/* ============================================================
   Van Gaalen Kaasmakerij — shared stylesheet
   Palette, type and components carried over from the approved
   design mockup (vangaalen-website_12.html).
   ============================================================ */

:root{
  --navy:#13243F;          /* primary, deep premium blue */
  --navy-deep:#0B1626;     /* hero / footer */
  --navy-line:#24375A;     /* borders on dark */
  --brass:#8F6A1C;         /* aged-gold fills & buttons (AA with white text) */
  --brass-text:#79591A;    /* brass for small text on light backgrounds (AA) */
  --brass-bright:#C49A47;  /* brass on dark backgrounds */
  --brass-pale:#EBDFC0;
  --parchment:#F8F3E6;     /* page background: a touch warmer */
  --card:#FFFDF7;
  --line:#E0D4B9;
  --ink:#1B2230;
  --ink-soft:#525A6B;
  --radius:14px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Karla', 'Helvetica Neue', sans-serif;
  --font-mono:'Spline Sans Mono', monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--parchment);color:var(--ink);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.15;color:var(--ink)}
h1{font-size:clamp(2.4rem,5.5vw,4.1rem);letter-spacing:-.01em}
h2{font-size:clamp(1.8rem,3.4vw,2.55rem)}
h3{font-size:1.25rem}
p{color:var(--ink-soft)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
.eyebrow{font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-text);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--brass)}
.lede{font-size:1.13rem;max-width:62ch}
.dutch{font-style:italic;color:var(--brass-text)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:700;font-size:.95rem;padding:15px 30px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.btn-brass{background:var(--brass);color:#fff}
.btn-brass:hover{background:var(--brass-bright);box-shadow:0 10px 24px rgba(168,124,42,.35)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#1B3052;box-shadow:0 10px 24px rgba(19,36,63,.3)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
/* Touch: kill the 300ms delay and use a brand-tinted tap highlight */
a,button,summary,label,.btn{-webkit-tap-highlight-color:rgba(19,36,63,.12);touch-action:manipulation}

/* ---------- Header: transparent over the hero, solid navy + slightly
   shorter once scrolled ---------- */
header.site-head{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:background .3s ease, border-color .3s ease, box-shadow .3s ease}
header.site-head.scrolled{background:rgba(11,22,38,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--navy-line);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.nav{display:flex;align-items:center;justify-content:space-between;height:92px;transition:height .3s ease}
header.site-head.scrolled .nav{height:70px}
.logo{display:flex;align-items:center;line-height:1}
.logo img{height:64px;width:auto;display:block;transition:height .3s ease}
header.site-head.scrolled .logo img{height:52px}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{font-weight:700;font-size:.92rem;color:#EDEFF4;position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--brass-bright);transition:width .2s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:#fff}
.nav-links a.btn{color:#fff}
.nav-links a.btn::after{display:none}
.nav-cta{margin-left:6px}
.burger{display:none;background:none;border:none;cursor:pointer;padding:10px;z-index:120}
.burger span{display:block;width:26px;height:2.5px;background:#EDEFF4;margin:5px 0;border-radius:2px;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Mobile nav: smooth slide-in drawer */
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(320px,84vw);background:var(--navy-deep);border-left:1px solid var(--navy-line);padding:110px 30px 40px;transform:translateX(102%);transition:transform .38s cubic-bezier(.22,.61,.36,1);z-index:110;overflow-y:auto}
.mobile-menu.open{transform:none}
.mobile-menu a{display:block;padding:14px 4px;font-weight:700;font-size:1.05rem;color:#EDEFF4;border-bottom:1px solid var(--navy-line)}
.mobile-menu a.active{color:var(--brass-bright)}
/* Must re-declare display + padding: the `.mobile-menu a` rule above also
   matches this button, and without these it renders as a block with 4px side
   padding — which left-jams the label and makes justify-content inert. */
.mobile-menu .btn{display:flex;align-items:center;justify-content:center;width:100%;padding:16px 24px;margin-top:22px;border-bottom:none}
.menu-scrim{position:fixed;inset:0;background:rgba(11,22,38,.55);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:105}
.menu-scrim.show{opacity:1;pointer-events:auto}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;padding:150px 0 90px;background:var(--navy-deep)}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg img{width:100%;height:112%;object-fit:cover;opacity:.55}
.page-hero .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,22,38,.94) 18%,rgba(11,22,38,.6) 58%,rgba(11,22,38,.32))}
.hero-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--brass-bright)}
.hero .kicker{font-family:var(--font-mono);color:var(--brass-bright);letter-spacing:.24em;text-transform:uppercase;font-size:.78rem;margin-bottom:20px}
.hero-tagline{font-family:var(--font-display);font-style:italic;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--brass-pale);max-width:46ch;margin-top:16px;line-height:1.4}
.hero p{color:#D6DCE8;font-size:1.15rem;max-width:54ch;margin:24px 0 36px}
/* Inline links inside on-dark prose (hero / final CTA): default `a{color:var(--navy)}`
   would be near-invisible on the navy-deep background, so give them the brass accent. */
.hero p a,.cta-band p a{color:var(--brass-bright);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.hero p a:hover,.cta-band p a:hover{color:#fff}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-frame{position:relative;justify-self:end;width:min(380px,100%)}
.hero-frame .arch{border-radius:240px 240px var(--radius) var(--radius);overflow:hidden;border:4px solid var(--brass);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.hero-frame .arch img{height:480px;width:100%;object-fit:cover}
.hero-frame .stamp{position:absolute;bottom:-26px;left:-26px;background:var(--parchment);border:2px solid var(--brass);border-radius:50%;width:130px;height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);transform:rotate(-8deg)}
.hero-frame .stamp strong{font-family:var(--font-display);font-size:1.5rem;color:var(--navy);letter-spacing:0}

/* ---------- Delft tile divider (signature) ---------- */
.tiles{display:flex;justify-content:center;gap:14px;padding:36px 0;flex-wrap:wrap}
.tile{width:58px;height:58px;border:1.5px solid var(--navy);border-radius:8px;background:var(--card);display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--brass-pale)}
.tile svg{width:32px;height:32px;stroke:var(--navy);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;margin-top:48px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .22s ease, box-shadow .22s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(19,36,63,.13)}
.card img{height:200px;object-fit:cover;width:100%}
.card .body{padding:26px;display:flex;flex-direction:column;gap:12px;flex:1}
.card .body p{font-size:.96rem;flex:1}
.card .link{font-weight:700;font-size:.92rem;color:var(--brass-text);display:inline-flex;align-items:center;gap:8px}
.card .link::after{content:"→";transition:transform .2s}
.card:hover .link::after{transform:translateX(4px)}

/* ---------- Heritage band ---------- */
.heritage-band{background:var(--navy);position:relative;overflow:hidden}
.heritage-band::before{content:"";position:absolute;width:420px;height:420px;border:1.5px solid rgba(196,154,71,.25);border-radius:50%;top:-200px;right:-140px}
.heritage-band blockquote{position:relative;max-width:820px;margin:0 auto;text-align:center}
.heritage-band blockquote p{font-family:var(--font-display);font-size:clamp(1.4rem,2.8vw,2rem);color:#F2EDE0;line-height:1.4}
.heritage-band blockquote p em{color:var(--brass-bright);font-style:normal}
.heritage-band footer{margin-top:26px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-bright)}

/* ---------- History / timeline ---------- */
.history{background:var(--navy-deep)}
.history h2,.history h3{color:#fff}
.history p{color:#BCC6D8}
.history .eyebrow{color:var(--brass-bright)}
.timeline{margin-top:54px}
.t-row{display:grid;grid-template-columns:120px 30px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid var(--navy-line)}
.t-row:last-child{border-bottom:none}
.t-year{font-family:var(--font-display);font-size:1.6rem;color:var(--brass-bright);text-align:right}
.t-dot{position:relative}
.t-dot::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 5px rgba(168,124,42,.18)}
.t-dot::after{content:"";position:absolute;top:32px;bottom:-26px;left:50%;transform:translateX(-50%);width:1.5px;background:var(--navy-line)}
.t-row:last-child .t-dot::after{display:none}
.t-body h3{margin-bottom:6px;font-size:1.15rem}

/* ---------- Split sections ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split .img-stack{position:relative}
.split .img-stack img{border-radius:var(--radius);box-shadow:0 24px 48px rgba(19,36,63,.18)}
.split .img-stack .badge{position:absolute;top:-20px;right:-14px;background:var(--brass);color:#fff;font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:12px 18px;border-radius:8px;transform:rotate(3deg);box-shadow:0 8px 18px rgba(0,0,0,.18)}

/* ---------- Testimonials ---------- */
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:48px}
.quote{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:var(--radius);padding:32px}
.quote .stars{color:var(--brass-text);letter-spacing:3px;margin-bottom:14px;font-size:1.05rem}
.quote p{font-style:italic;font-size:1rem}
.quote footer{margin-top:18px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}

/* ---------- Google reviews carousel ---------- */
.review-meta{margin-top:14px;color:var(--ink-soft);font-size:1rem}
.review-meta a{color:var(--brass-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.review-carousel{margin-top:48px}
.review-track{display:flex;gap:22px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;min-height:420px;padding:4px 4px 18px;scrollbar-width:none;-ms-overflow-style:none}
.review-track::-webkit-scrollbar{display:none}
.review-track:focus-visible{outline:3px solid var(--brass);outline-offset:4px;border-radius:var(--radius)}
.review-card{flex:none;width:min(85vw,360px);scroll-snap-align:start;display:flex;flex-direction:column}
.review-card p{flex:1}
.review-card footer{display:flex;flex-direction:column;gap:4px}
.review-source{color:var(--ink-soft);font-weight:400;letter-spacing:.1em}
.review-nav{display:flex;justify-content:center;gap:14px;margin-top:22px}
.review-arrow{flex:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease, color .2s ease, opacity .2s ease}
.review-arrow:hover{border-color:var(--brass);color:var(--brass-text)}
.review-arrow:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.review-arrow[hidden]{display:none}
.review-arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){
  .review-track{gap:16px;min-height:460px}
}
@media (prefers-reduced-motion: reduce){
  .review-track{scroll-behavior:auto}
}

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy-deep);border:1px solid var(--navy-line);border-radius:calc(var(--radius) + 8px);padding:70px 56px;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;width:340px;height:340px;border:1.5px dashed rgba(196,154,71,.3);border-radius:50%;top:-160px;right:-120px}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band p{color:#BCC6D8;max-width:56ch;margin:0 auto 34px}
.cta-band .hero-actions{justify-content:center}

/* ---------- Events / what's on (home) ---------- */
.events-empty{margin-top:44px;padding:38px 30px;border:1.5px dashed var(--line);border-radius:var(--radius);text-align:center;color:var(--ink-soft);font-size:1.02rem;background:var(--card)}
.events-empty a{color:var(--brass-text);font-weight:700}
.event-date{display:inline-block;font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--brass);padding:6px 12px;border-radius:999px;margin-bottom:6px}

/* ---------- Page hero ---------- */
.page-hero{position:relative;padding:185px 0 95px;background:var(--navy-deep);overflow:hidden}
.page-hero .hero-bg img{opacity:.5}
.page-hero h1{color:#fff;position:relative}
.page-hero p{position:relative;color:#D6DCE8;font-size:1.13rem;max-width:60ch;margin-top:18px}
.page-hero .kicker{position:relative;font-family:var(--font-mono);color:var(--brass-bright);letter-spacing:.24em;text-transform:uppercase;font-size:.76rem;margin-bottom:18px}

/* ---------- Trails ---------- */
.trail-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:340px 1fr;margin-top:30px;transition:box-shadow .22s, opacity .35s ease, transform .35s ease}
.trail-card.hide{display:none}
.trail-filter{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.trail-filter button{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink-soft);cursor:pointer;transition:all .2s}
.trail-filter button:hover{border-color:var(--brass);color:var(--brass-text)}
.trail-filter button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.trail-count{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:16px}
.trail-card:hover{box-shadow:0 18px 36px rgba(19,36,63,.12)}
.trail-card img{width:100%;height:100%;object-fit:cover;min-height:260px}
.trail-body{padding:34px 38px;display:flex;flex-direction:column;gap:14px}
.trail-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.marker{width:42px;height:42px;border-radius:9px;border:2.5px solid var(--navy-deep);box-shadow:2px 2px 0 rgba(19,36,63,.18);flex:none}
.trail-meta{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.trail-meta span{border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--ink-soft);background:var(--parchment)}
.trail-map{margin-top:6px;border:2px dashed var(--line);border-radius:10px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--parchment);flex-wrap:wrap}
.trail-map .note{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.trail-map a{font-weight:700;font-size:.85rem;background:var(--navy);color:#fff;padding:10px 18px;border-radius:999px}
.trail-map a.gpx-btn{display:none;background:var(--brass)}
.trail-map[data-gpx]:not([data-gpx=""]) a.gpx-btn{display:inline-flex}
.maps-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:36px}
.map-dl{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px;display:flex;align-items:center;gap:14px;font-weight:700;color:var(--navy);transition:transform .18s, box-shadow .18s}
.map-dl:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(19,36,63,.12)}
.map-dl svg{width:26px;height:26px;stroke:var(--brass);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.map-dl small{display:block;font-weight:400;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.rules{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.rules summary{cursor:pointer;padding:20px 24px;font-weight:700;color:var(--navy);list-style:none;display:flex;justify-content:space-between;align-items:center}
.rules summary::after{content:"+";font-family:var(--font-display);font-size:1.4rem;color:var(--brass)}
.rules[open] summary::after{content:"–"}
.rules ol{padding:0 24px 24px 44px;color:var(--ink-soft);font-size:.95rem;display:grid;gap:8px}

/* ---------- Hours / price cards ---------- */
.hours-card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--brass);border-radius:var(--radius);padding:34px}
.hours-card h3{margin-bottom:16px}
.hours-card ul{list-style:none}
.hours-card li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:.95rem}
.hours-card li:last-child{border:none}
.hours-card li b{color:var(--ink);flex:1;min-width:0}
.hours-card li span:last-child{font-family:var(--font-mono);font-weight:600;color:var(--brass-text);text-align:right}
.price-list{margin-top:14px;list-style:none}
.price-list li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px dashed var(--line);font-size:.97rem}
.price-list li span:last-child{font-family:var(--font-mono);font-weight:600;color:var(--brass-text)}

/* ---------- Quick reference: prices & hours (home page, below hero) ---------- */
.quickinfo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px;align-items:stretch}
.quickinfo-grid .hours-card{display:flex;flex-direction:column}
.quickinfo-grid .hours-card ul{flex:none}
.quickinfo-hours{font-size:.85rem;margin-top:14px;flex:1}
.quickinfo-grid .link{margin-top:16px;font-weight:700;font-size:.92rem;color:var(--brass-text);display:inline-flex;align-items:center;gap:8px}
.quickinfo-grid .link::after{content:"→";transition:transform .2s}
.quickinfo-grid .link:hover::after{transform:translateX(4px)}
.quickinfo-note{margin-top:28px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft);text-align:center}

/* ---------- Menu ---------- */
.menu-board{background:var(--navy-deep);border:1px solid var(--navy-line);border-radius:calc(var(--radius)+6px);padding:60px 56px;margin-top:50px;position:relative}
.menu-board::before{content:"";position:absolute;inset:14px;border:1px solid rgba(196,154,71,.35);border-radius:var(--radius);pointer-events:none}
.menu-board h3{color:var(--brass-bright);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-mono);font-weight:600;margin:40px 0 18px}
.menu-board h3:first-of-type{margin-top:0}
.menu-board .cat-note{font-size:.88rem;color:#9FACC2;margin:-10px 0 18px;font-style:italic}
.menu-cols{columns:2;column-gap:60px}
.menu-item{break-inside:avoid;margin-bottom:18px}
.menu-item .row{display:flex;align-items:baseline;gap:10px}
.menu-item .row b{font-family:var(--font-display);font-weight:400;color:#F2EDE0;font-size:1.02rem}
.menu-item .row .dots{flex:1;border-bottom:1.5px dotted rgba(196,154,71,.4);transform:translateY(-4px)}
.menu-item .row .price{font-family:var(--font-mono);color:var(--brass-bright);font-size:.92rem;white-space:nowrap}
.menu-item p{font-size:.88rem;color:#9FACC2;margin-top:4px}
.menu-note{margin-top:36px;text-align:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8B98B0}
.menu-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.special{background:var(--brass);color:#fff;border-radius:12px;padding:22px 28px;display:flex;align-items:center;gap:18px;margin-top:34px;flex-wrap:wrap}
.special b{font-family:var(--font-display);font-weight:400;font-size:1.2rem}
.special span{font-size:.95rem;opacity:.95}

/* ---------- Collapsible menu categories ---------- */
.menu-controls{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:26px 0 8px}
.menu-controls .btn svg{flex:none}
.menu-hint{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.menu-cat{border-top:1px solid rgba(196,154,71,.24)}
.menu-cat:first-of-type{border-top:none}
.menu-cat>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 2px;font-family:var(--font-mono);font-weight:600;font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-bright);transition:color .2s ease}
.menu-cat>summary::-webkit-details-marker{display:none}
.menu-cat>summary::after{content:"+";font-family:var(--font-display);font-size:1.55rem;line-height:1;color:var(--brass-bright)}
.menu-cat[open]>summary::after{content:"–"}
.menu-cat>summary:hover,.menu-cat[open]>summary{color:#fff}
.menu-cat .cat-note{margin:0 0 16px}
.menu-cat .menu-cols{padding-bottom:24px}

/* ---------- FAQ accordions ----------
   Same <details>/<summary> mechanic as .menu-cat, but questions are sentences,
   so they take the display face at readable size rather than the uppercase
   letterspaced mono treatment that suits short menu-category labels. Sits on
   the light parchment background, so it uses --ink / --brass-text, not the
   on-dark brass. */
.faq{max-width:840px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:first-of-type{border-top:none}
.faq-item>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:21px 2px;font-family:var(--font-display);font-size:1.04rem;line-height:1.42;color:var(--ink);transition:color .2s ease}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{content:"+";font-family:var(--font-display);font-size:1.5rem;line-height:1.1;color:var(--brass-text);flex:none}
.faq-item[open]>summary::after{content:"–"}
.faq-item>summary:hover,.faq-item[open]>summary{color:var(--brass-text)}
.faq-a{padding:0 2px 24px;max-width:66ch}
.faq-a p+p{margin-top:12px}
.faq-a ul{margin:10px 0 0;padding-left:20px}
.faq-a li{margin-bottom:7px}
@media (max-width:760px){
  .faq-item>summary{padding:19px 2px;font-size:1rem}
}

/* ---------- Live opening-hours status pill (hero) ---------- */
.open-status{display:inline-flex;align-items:center;gap:11px;margin:26px 0 34px;padding:10px 19px 10px 15px;border:1px solid rgba(196,154,71,.4);border-radius:999px;background:rgba(11,22,38,.5);font-family:var(--font-mono);font-size:.76rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#AAB6C9;max-width:100%}
.open-status[hidden]{display:none}
.open-dot{position:relative;width:9px;height:9px;border-radius:50%;flex:none;background:#6E7C97;box-shadow:0 0 0 4px rgba(110,124,151,.15)}
.open-status.is-open .open-dot{background:#5FBF7A;box-shadow:0 0 0 4px rgba(95,191,122,.17)}
.open-status.is-open .open-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#5FBF7A;animation:openPulse 2.6s ease-out infinite}
.open-status.is-soon .open-dot{background:var(--brass-bright);box-shadow:0 0 0 4px rgba(196,154,71,.18)}
@keyframes openPulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(2.8);opacity:0}100%{transform:scale(2.8);opacity:0}}
.open-status .open-state{font-weight:600;color:#EDEFF4}
.open-status.is-open .open-state{color:#8FD9A3}
.open-status.is-soon .open-state{color:var(--brass-bright)}
.open-status .open-detail::before{content:"·";margin:0 9px;color:rgba(196,154,71,.75)}
@media (max-width:480px){
  .open-status{font-size:.69rem;letter-spacing:.07em;gap:9px;padding:9px 15px 9px 12px;margin:22px 0 28px}
  .open-status .open-detail::before{margin:0 7px}
}

/* ---------- Functions / celebrations ---------- */
.functions-stack{position:relative}
.functions-stack .fn-main{width:100%;height:560px;object-fit:cover;border-radius:var(--radius);box-shadow:0 24px 48px rgba(19,36,63,.18)}
.functions-stack .fn-inset{position:absolute;left:18px;bottom:18px;width:132px;height:168px;object-fit:cover;border-radius:10px;border:4px solid var(--parchment);box-shadow:0 14px 30px rgba(0,0,0,.3)}
@media (max-width:760px){
  .functions-stack .fn-main{height:420px}
  .functions-stack .fn-inset{width:104px;height:132px;left:14px;bottom:14px}
}

/* ---------- Cheese process ---------- */
.process{counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin-top:48px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;position:relative}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-size:2.1rem;color:var(--brass-text);display:block;margin-bottom:12px}
.step h3{font-size:1.08rem;margin-bottom:8px}
.step p{font-size:.93rem}

/* ---------- Contact ---------- */
/* min-width:0 overrides the grid item's default min-width:auto, which would
   otherwise size the track to the form controls' min-content and force
   horizontal overflow on narrow viewports */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:start}
.contact-grid>div{min-width:0}
form .field{margin-bottom:20px}
form label{display:block;font-weight:700;font-size:.9rem;margin-bottom:8px}
form input,form textarea,form select{width:100%;padding:15px 18px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);font-family:var(--font-body);font-size:1rem;color:var(--ink);transition:border-color .2s, box-shadow .2s}
form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379591A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px;cursor:pointer}
form input:focus,form textarea:focus,form select:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 4px rgba(168,124,42,.14)}
form textarea{min-height:150px;resize:vertical}
.form-msg{display:none;margin-top:18px;padding:16px 20px;border-radius:10px;background:#EFF3E8;border:1px solid #C6D4B4;color:#46603A;font-weight:700}
.form-msg.error{background:#F7ECE8;border-color:#DCC0B4;color:#7A4630}
.info-list{list-style:none;display:grid;gap:6px}
.info-list li{display:flex;gap:16px;align-items:flex-start;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
/* flex item defaults to min-width:auto, which would size to the unbroken
   email addresses below and re-introduce overflow at narrow widths */
.info-list li>div{min-width:0}
.info-list .ic{width:44px;height:44px;border-radius:10px;background:var(--brass-pale);display:flex;align-items:center;justify-content:center;flex:none}
.info-list .ic svg{width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.info-list b{display:block;font-size:.95rem}
.info-list span,.info-list a{font-size:.92rem;color:var(--ink-soft)}
/* the mailto addresses are unbroken strings with no natural wrap point;
   let them break mid-string on very narrow viewports instead of overflowing */
.info-list a{overflow-wrap:anywhere}
.map-frame{margin-top:34px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 16px 32px rgba(19,36,63,.1)}
.map-frame iframe{width:100%;height:380px;border:0;display:block}
.socials{display:flex;gap:12px;margin-top:8px}
.socials a{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--navy);display:flex;align-items:center;justify-content:center;transition:background .2s}
.socials a:hover{background:var(--navy)}
.socials a:hover svg{stroke:#fff}
.socials svg{width:20px;height:20px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Footer ---------- */
footer.site{background:var(--navy-deep);color:#BCC6D8;padding:70px 0 0}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:54px}
footer.site .foot-head{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-bright);margin-bottom:20px}
footer.site ul{list-style:none;display:grid;gap:10px}
footer.site a{color:#BCC6D8;font-size:.95rem}
footer.site a:hover{color:#fff}
footer.site .logo{margin-bottom:16px}
footer.site .logo img{height:66px;width:auto}
footer.site p{font-size:.93rem;color:#8B98B0}
footer.site .dutch{color:var(--brass-bright)}
.foot-bottom{border-top:1px solid var(--navy-line);padding:22px 0;text-align:center;font-size:.85rem;color:#6E7C97}
.foot-bottom a{color:#8B98B0}

/* ---------- Reveal on scroll ----------
   Deliberately inverted from the usual pattern: content is VISIBLE by default
   and JS adds .pre only to elements still below the fold, removing it as they
   scroll into view. So if JS never runs (or an observer misfires) nothing is
   left permanently invisible — and there is no flash of hidden content. */
.reveal{transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.pre{opacity:0;transform:translateY(26px)}
/* Used for one frame while the initial hidden state is applied, so elements
   snap to hidden instead of visibly fading OUT before they fade in. */
.no-anim,.no-anim *{transition:none!important;animation:none!important}
/* soft stagger for items that share a grid */
.card-grid .reveal:nth-child(2),.quote-grid .reveal:nth-child(2),.quickinfo-grid .reveal:nth-child(2){transition-delay:.09s}
.card-grid .reveal:nth-child(3),.quote-grid .reveal:nth-child(3),.quickinfo-grid .reveal:nth-child(3){transition-delay:.18s}
.card-grid .reveal:nth-child(4),.quote-grid .reveal:nth-child(4),.quickinfo-grid .reveal:nth-child(4){transition-delay:.27s}

/* ---------- Cohesive: slow cinematic drift on every hero image ---------- */
@keyframes kenburns{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.12) translateY(-1.5%)}}
.hero-bg img{animation:kenburns 26s ease-out forwards}

/* ---------- Scroll progress bar (ridge-brass) ---------- */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brass),var(--brass-bright));z-index:200;transition:width .1s linear}

/* ---------- Signature: self-drawing Magaliesberg ridgeline
     (carried over exactly from the approved mockup, v12 timing) ---------- */
.ridge{display:block;width:100%;max-width:560px;height:auto;margin:22px 0 4px}
.ridge path{fill:none;stroke:var(--brass-bright);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--rl,1400);stroke-dashoffset:var(--rl,1400);transition:stroke-dashoffset 3.4s cubic-bezier(.45,0,.18,1)}
.ridge.in path{stroke-dashoffset:0}
.ridge .peak{opacity:0;transition:opacity .5s ease 3s}
.ridge.in .peak{opacity:1}
.ridge-divider{display:flex;justify-content:center;padding:30px 0}
.ridge-divider .ridge{max-width:680px;margin:0}
.ridge-divider path{stroke:var(--brass)}

/* ---------- Hero staggered entrance ---------- */
.hero-rise{opacity:0;transform:translateY(30px);animation:heroRise .85s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes heroRise{to{opacity:1;transform:none}}
.hero-frame.hero-rise{animation-name:heroRiseFrame}
@keyframes heroRiseFrame{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- Animated heritage timeline (same .pre gating as .reveal) ---------- */
.t-dot::before{transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.t-row.pre .t-dot::before{transform:translateX(-50%) scale(0)}
.t-dot::after{transform-origin:top;transition:transform .7s ease .12s}
.t-row.pre .t-dot::after{transform:translateX(-50%) scaleY(0)}
.t-year{transition:opacity .6s ease .1s, transform .6s ease .1s}
.t-row.pre .t-year{opacity:0;transform:translateX(-14px)}
.t-body{transition:opacity .6s ease .2s, transform .6s ease .2s}
.t-row.pre .t-body{opacity:0;transform:translateY(14px)}

/* ---------- Process flow: milk-to-wheel sequence ---------- */
.process .step{transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)}
.process.pre .step{opacity:0;transform:translateY(28px) scale(.97)}
.process .step:nth-child(1){transition-delay:.05s}
.process .step:nth-child(2){transition-delay:.15s}
.process .step:nth-child(3){transition-delay:.25s}
.process .step:nth-child(4){transition-delay:.35s}
.process .step:nth-child(5){transition-delay:.45s}
.process .step:nth-child(6){transition-delay:.55s}
.process .step::before{transition:color .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1)}
.process .step:hover::before{transform:scale(1.12);color:var(--brass)}

/* ---------- Extra micro-animations ---------- */
.card img,.trail-card img,.split .img-stack img{transition:transform .5s ease}
.card:hover img{transform:scale(1.05)}
.trail-card:hover img{transform:scale(1.03)}
.btn-brass,.btn-navy{position:relative;overflow:hidden}
.btn-brass::after,.btn-navy::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .6s ease}
.btn-brass:hover::after,.btn-navy:hover::after{left:130%}
.tile{transition:transform .25s ease, box-shadow .25s ease}
.tile:hover{transform:translateY(-4px) rotate(-3deg);box-shadow:5px 6px 0 var(--brass-pale)}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero-frame .stamp{animation:floatY 5s ease-in-out infinite}

/* ---------- WhatsApp floating button ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:90;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.28);transition:transform .2s, box-shadow .2s;animation:waPulse 2.6s ease-out infinite}
.wa-float:hover{transform:scale(1.08);box-shadow:0 10px 26px rgba(0,0,0,.34)}
.wa-float svg{width:32px;height:32px;fill:#fff}
@keyframes waPulse{0%{box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 0 rgba(37,211,102,0)}}

img.img-fallback{background:repeating-linear-gradient(45deg,var(--brass-pale) 0 14px,var(--card) 14px 28px);object-fit:cover}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal,.reveal.pre{opacity:1;transform:none}
  .t-row.pre .t-year,.t-row.pre .t-body,.process.pre .step{opacity:1;transform:none}
  .wa-float{animation:none}
  .hero-frame .stamp{animation:none}
  .hero-bg img{animation:none}
  .hero-rise{opacity:1;transform:none;animation:none}
  .ridge path{stroke-dashoffset:0}
  .ridge .peak{opacity:1}
  .t-year,.t-body{opacity:1;transform:none}
  .t-dot::before{transform:translateX(-50%) scale(1)}
  .t-dot::after{transform:translateX(-50%) scaleY(1)}
  .process .step{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .hero-frame{justify-self:start;margin-top:10px}
  .split{grid-template-columns:1fr;gap:40px}
  .trail-card{grid-template-columns:1fr}
  .trail-card img{min-height:220px;max-height:260px}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .menu-cols{columns:1}
  .menu-board{padding:46px 34px}
  .quickinfo-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .nav-links{display:none}
  .burger{display:block}
  section{padding:64px 0}
  .hero{min-height:auto;padding:135px 0 70px}
  .hero-frame{display:none}
  .t-row{grid-template-columns:70px 24px 1fr;gap:14px}
  .t-year{font-size:1.2rem}
  .cta-band{padding:52px 28px}
  .trail-body{padding:26px}
  .foot-grid{grid-template-columns:1fr}
  .menu-board{padding:40px 24px}
  .logo img{height:54px}
  .quickinfo-grid{grid-template-columns:1fr}
  .quickinfo{padding:44px 0 36px!important}
  header.site-head.scrolled .logo img{height:46px}
  /* Larger, easier tap targets on touch screens */
  footer.site ul{gap:2px}
  footer.site li a{display:inline-block;padding:10px 0}
  .card .link,.quickinfo-grid .link{padding:9px 0}
  .trail-filter button{padding:13px 20px}
  .trail-map a{padding:13px 20px}
  .info-list a{display:inline-block;padding:4px 0}
}
@media (max-width:480px){
  /* Stack primary actions full-width so they read as intentional, not wrapped */
  .hero-actions,.menu-actions,.cta-band .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn,.menu-actions .btn,.cta-band .hero-actions .btn{width:100%;justify-content:center}
  /* Ease the hero headline down a touch so long words wrap gracefully on small phones */
  .hero h1,.page-hero h1{font-size:clamp(2rem,8.5vw,2.6rem)}
  .hero p,.page-hero p{font-size:1.05rem}
  section{padding:56px 0}
  .wrap{padding:0 20px}
  .cta-band{padding:44px 22px}
  .menu-board{padding:34px 20px}
  .quote{padding:26px}
}