/* Top Stoffering — brand colours taken from the logo (red/maroon on white). */

:root {
  --red: #E25041;
  --red-dark: #C33C2F;
  --maroon: #9B1C2E;
  --ink: #1F2124;
  --muted: #6B7076;
  --line: #E4E0DD;
  --sand: #F7F4F2;
  --white: #fff;

  --wrap: 1180px;
  /* Square by default: the sharp edges read as more established and less
     templated than the rounded look. Every rounded corner in this file
     routes through this token, so setting it to e.g. 8px brings the
     rounding back everywhere at once. */
  --radius: 0;
  /* Tight, low-blur shadow. Large soft shadows belong to the same rounded
     idiom as the old border radius and look wrong against hard corners. */
  --shadow: 0 1px 0 rgba(31,33,36,.07), 0 6px 14px rgba(31,33,36,.09);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Playfair Display", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--maroon); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }
.h5 { font-size: 1rem; font-family: var(--font); font-weight: 600;
      text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

p { margin: 0 0 1.1em; }
.lead { font-size: 1.15rem; color: #3A3E43; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 13px 24px; border-radius: var(--radius);
  background: var(--red); color: #fff; font-weight: 600; font-size: 1rem;
  border: 2px solid var(--red); cursor: pointer; transition: .18s ease;
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark);
             text-decoration: none; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--sand); border-color: var(--ink); color: var(--ink); }
.btn-sm { padding: 8px 16px; font-size: .9rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between;
                gap: 16px; min-height: 72px; }

.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { width: 48px; height: 48px; object-fit: contain;
             border-radius: var(--radius); }
.brand-text { font-family: var(--display); font-size: 1.25rem; letter-spacing: .01em; }
.brand-text strong { color: var(--red); }

.nav { display: flex; align-items: center; gap: 24px; }
.nav a { color: var(--ink); font-weight: 500; font-size: .96rem; }
.nav a:hover { color: var(--red); text-decoration: none; }
.nav a.btn { color: #fff; }
.nav a.btn:hover { color: #fff; }

.nav .lang-switch { display: flex; gap: 2px; }
.nav .lang-switch a { padding: 4px 6px; font-size: .8rem; font-weight: 600;
                      letter-spacing: .06em; color: var(--muted); }
.nav .lang-switch a:hover { color: var(--red); }
.nav .lang-switch a[aria-current="page"] { color: var(--ink);
                                           box-shadow: inset 0 -2px 0 var(--red); }

/* Strip above the header, only when the browser language differs. */
.lang-hint { position: relative; display: flex; flex-wrap: wrap; align-items: center;
             justify-content: center; gap: 4px 12px; padding: 10px 52px 10px 16px;
             background: var(--ink); color: #fff; font-size: .92rem; text-align: center; }
.lang-hint[hidden] { display: none; }
.lang-hint a { color: #fff; font-weight: 600; text-decoration: underline;
               text-underline-offset: 3px; }
.lang-hint a:hover { color: var(--red); }
.lang-hint button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
                    width: 36px; height: 36px; border: 0; border-radius: var(--radius);
                    background: transparent; color: #fff; font-size: 1.4rem;
                    line-height: 1; cursor: pointer; }
.lang-hint button:hover { background: rgba(255,255,255,.12); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: 10px; cursor: pointer;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); transition: .2s; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch;
        background: var(--sand); border-bottom: 1px solid var(--line); }
.hero-body { display: flex; align-items: center; padding: clamp(32px, 6vw, 80px) 0; }
.hero-body .wrap { max-width: 620px; margin: 0 auto; }
.hero-media { position: relative; min-height: 420px; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%;
                  object-fit: cover; }

.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
           font-weight: 600; color: var(--red); margin-bottom: .75em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.center-actions { justify-content: center; }

/* ---------- USP strip ---------- */
.usp-strip { background: var(--ink); color: #fff; }
.usp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 280px));
            justify-content: center; gap: 16px; padding: 28px 16px; }
.usp { text-align: center; }
.usp-figure { display: block; font-family: var(--display); font-size: 1.9rem;
              color: #fff; line-height: 1.1; }
.usp-label { display: block; font-size: .85rem; color: #B9BDC2;
             text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }

/* ---------- Sections ---------- */
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section-alt { background: var(--sand); }
.section-head { max-width: 720px; margin-bottom: 40px; }
.cta { background: var(--maroon); color: #fff; }
.cta h2 { color: #fff; }
.cta .lead { color: rgba(255,255,255,.9); }
.cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.cta .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff;
                        border-color: #fff; }

.note { border-left: 3px solid var(--red); padding: 4px 0 4px 16px;
        color: var(--muted); font-size: .96rem; }

/* Opening hours inside the dark call-to-action band. */
.cta-hours { display: inline-grid; grid-template-columns: auto auto;
             gap: 6px 18px; margin: 28px 0 0; padding: 20px 26px;
             background: rgba(255,255,255,.1);
             border-left: 3px solid #fff; text-align: left; }
.cta-hours dt { font-size: .92rem; color: rgba(255,255,255,.8); }
.cta-hours dd { margin: 0; font-size: .92rem; font-weight: 600; color: #fff;
                font-variant-numeric: tabular-nums; white-space: nowrap; }
.cta-hours dd.closed { font-weight: 400; color: rgba(255,255,255,.6); }

/* ---------- Chips ---------- */
.brand-block { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
         padding: 0; margin: 0 0 32px; }
.chips li { border: 1px solid var(--line); background: #fff;
            border-radius: var(--radius);
            padding: 7px 14px; font-size: .9rem; font-weight: 500; }
.chips-alt li { border-color: transparent; background: var(--sand); }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
             gap: 20px; }
.card { position: relative; background: #fff; border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 26px; transition: .18s ease; }
/* A hard 3px rule on the left instead of a lifted, rounded card. */
.card::before { content: ""; position: absolute; left: -1px; top: -1px;
                bottom: -1px; width: 3px; background: var(--red);
                transform: scaleY(0); transform-origin: top;
                transition: transform .2s ease; }
.card:hover::before { transform: scaleY(1); }
.card:hover { box-shadow: var(--shadow); border-color: var(--ink); }
.card h3 { margin-bottom: .35em; }
.card p { margin: 0; color: var(--muted); font-size: .96rem; }

/* ---------- Galleries ---------- */
.gallery-block { margin-bottom: 64px; }
.gallery-block:last-child { margin-bottom: 0; }
.gallery-head { margin-bottom: 20px; }
.gallery-head h3 { margin-bottom: .2em; }
.count { display: inline-block; font-family: var(--font); font-size: .75rem;
         font-weight: 600; color: var(--muted); background: var(--sand);
         border-radius: var(--radius); padding: 3px 9px;
         vertical-align: middle; }
.gallery-head p { margin: 0; font-size: .96rem; }

.gallery { display: grid; gap: 12px;
           grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.shot { padding: 0; border: 0; background: var(--sand); cursor: zoom-in;
        border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.shot img { width: 100%; height: 100%; object-fit: cover;
            transition: transform .35s ease; }
.shot:hover img { transform: scale(1.05); }
.shot:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------- Carousel ---------- */
/* Slides keep each photo's own aspect ratio at a fixed height: the set mixes
   portrait and landscape, and a fixed frame would crop the portraits hard. */
.carousel { position: relative; margin-bottom: 56px;
            --car-h: clamp(240px, 36vw, 440px); }
.car-track { position: relative; display: flex; gap: 12px; overflow-x: auto;
             scroll-snap-type: x mandatory; scroll-behavior: smooth;
             overscroll-behavior-x: contain; scrollbar-width: none; }
.car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 auto; height: var(--car-h); padding: 0; border: 0;
             background: var(--sand); cursor: zoom-in; scroll-snap-align: start;
             border-radius: var(--radius); overflow: hidden; }
.car-slide picture { display: block; height: 100%; }
.car-slide img { display: block; height: 100%; width: auto;
                 transition: transform .35s ease; }
.car-slide:hover img { transform: scale(1.03); }
.car-slide:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.car-nav { position: absolute; top: calc(var(--car-h) / 2); transform: translateY(-50%);
           width: 44px; height: 44px; border: 0; border-radius: var(--radius);
           background: rgba(31,33,36,.72); color: #fff; cursor: pointer;
           font-size: 1.8rem; line-height: 1; display: grid; place-items: center;
           transition: background .15s; }
.car-nav:hover { background: var(--red); }
.car-nav:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.car-prev { left: 0; }
.car-next { right: 0; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 300;
            background: rgba(20,20,22,.94);
            display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lb-figure { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.lb-figure img { max-width: 92vw; max-height: 80vh; width: auto; height: auto;
                 margin: 0 auto; border-radius: var(--radius); }
.lb-figure figcaption { color: #D8D8D8; font-size: .9rem; margin-top: 12px; }
.lb-close, .lb-nav { position: absolute; background: rgba(255,255,255,.1);
                     color: #fff; border: 0; cursor: pointer;
                     border-radius: var(--radius);
                     width: 48px; height: 48px; font-size: 1.8rem; line-height: 1;
                     display: grid; place-items: center; transition: .15s; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.25); }
.lb-close { top: 20px; right: 20px; font-size: 2rem; }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #C9CDD2; padding: 64px 0 0; }
.site-footer h3 { color: #fff; }
.site-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase;
                  letter-spacing: .1em; margin: 0 0 14px; }
.site-footer a { color: #fff; }
.site-footer .muted { color: #9BA1A8; }
.footer-grid { display: grid; gap: 40px;
               grid-template-columns: 1.6fr 1fr 1.2fr .8fr; }
.plain { list-style: none; padding: 0; margin: 0; }
.footer-subhead { margin-top: 22px !important; }

/* Opening hours as a two-column definition list. */
.hours { display: grid; grid-template-columns: auto auto;
         gap: 6px 16px; margin: 0; justify-content: start; }
.hours dt { color: #9BA1A8; font-size: .9rem; }
.hours dd { margin: 0; font-size: .9rem; font-variant-numeric: tabular-nums;
            white-space: nowrap; }
.hours dd.closed { color: #9BA1A8; }
.plain li { margin-bottom: 8px; }
address { font-style: normal; }
.footer-bottom { border-top: 1px solid #33373C; margin-top: 56px; padding: 20px 16px; }
.footer-bottom p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-media { min-height: 300px; order: -1; }
  .hero-body .wrap { max-width: var(--wrap); }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px 16px 20px; display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav a.btn { margin-top: 12px; text-align: center; border-bottom: 0; }
  .nav .lang-switch { gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .nav .lang-switch a { padding: 8px 10px; border-bottom: 0; font-size: .9rem; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
  .carousel { margin-bottom: 40px; }
  .car-track { gap: 8px; }
  .car-nav { width: 36px; height: 36px; font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html, .car-track { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}