/* ============================================================
   Chef Tasos, shared styles (styles.css)
   Used by index.html, store.html, events.html
   ============================================================ */
:root{
  /* Palette matched to the original cheftasos.com: gold #A88421 on white / light-grey / black */
  /* --bg-alt was #f1f1f1. Gold-deep text reads 4.95 on white but only 4.38
     on that tint - just under the 4.5 needed - and the alternating grey
     bands are where every eyebrow, every small gold label and the gold
     links sit. Four units lighter clears all of them at 4.54 without
     touching a single brand colour. The tint is indistinguishable. */
  --bg:#ffffff;--bg-alt:#f5f5f5;--paper:#ffffff;--ink:#1a1a1a;--ink-soft:#555555;
  --gold:#a88421;--gold-deep:#8a6c1b;--gold-ink:#7d611a;--gold-soft:#cda34a;--line:rgba(168,132,33,.30);
  --green:#173d2b;--green-deep:#102b1f;
  --plum:#1a1a1a;--plum-soft:#333333;--shadow:0 24px 60px rgba(0,0,0,.12);

  /* ---------- TYPE SYSTEM ----------------------------------------
     Fifteen sizes, four tracking values, four line-heights, two faces.
     Every piece of text on the site resolves to one of these.
     Do NOT invent a sixteenth size inside a page's own <style> block --
     if nothing here fits, the design has drifted; say so instead.
     Icon and ornament glyph sizes are deliberately NOT in this scale. */
  --ff-display:'EB Garamond',Georgia,serif;
  --ff-body:'Archivo',system-ui,-apple-system,sans-serif;

  /* fluid -- these carry the page all the way down to phone width */
  --t-mega:clamp(84px,16vw,190px);       /* ghost numerals behind sections */
  --t-hero:clamp(44px,7.4vw,92px);       /* the home page hero, only       */
  --t-display:clamp(34px,4.8vw,62px);    /* a page h1                      */
  --t-title:clamp(30px,4.2vw,52px);      /* big statements, pull quotes    */
  --t-section:clamp(28px,3.6vw,44px);    /* section headings               */
  --t-lead:clamp(15.5px,1.35vw,17.5px);  /* intro paragraphs               */

  /* fixed */
  --t-stat:44px;                         /* big stat numerals              */
  --t-head:32px;                         /* block headings, step numbers   */
  --t-sub:24px;                          /* card headings                  */
  --t-minor:20px;                        /* dish names, small headings     */
  --t-body:15.5px;                       /* running text                   */
  --t-small:14px;                        /* captions, notes, list items    */
  --t-fine:12.5px;                       /* dense UI text, hints           */
  --t-label:11px;                        /* uppercase labels, buttons      */
  --t-micro:9.5px;                       /* legal, fine print              */

  /* Tracking and leading are not tokenised. Four --tr-*/--lh- tokens used
     to sit here; they were guessed rather than measured, none of the
     four tracking values was among the site's common ones, and nothing
     ever referenced them. The values themselves are the scale now:
     letter-spacing .03 .06 .1 .14 .16 .2 .26 .3 .34 .42em,
     line-height 1 1.08 1.1 1.25 1.4 1.55 1.6 1.75 1.85 1.95 2.05. */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Archivo',sans-serif;font-weight:300;line-height:1.75;overflow-x:hidden}
body.no-scroll{overflow:hidden}
h1,h2,h3,h4{font-family:'EB Garamond',serif;font-weight:600;line-height:1.1;color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 30px}
.eyebrow{font-family:'Archivo';font-weight:500;letter-spacing:.34em;text-transform:uppercase;font-size:var(--t-fine);color:var(--gold-deep)}
/* Anchor jumps must clear the fixed header. */
section[id],div[id]{scroll-margin-top:92px}
.btn{display:inline-block;font-family:'Archivo';font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:var(--t-fine);padding:15px 32px;border:1px solid var(--gold);color:var(--gold-ink);background:none;transition:.35s;cursor:pointer}
.btn:hover{background:var(--gold-ink);color:#fff;border-color:var(--gold-ink)}
.btn.solid{background:linear-gradient(135deg,var(--gold-deep),#6d5416);color:#fff;border-color:transparent;box-shadow:0 10px 24px rgba(122,95,23,.30)}
.btn.solid:hover{filter:brightness(1.07)}
.btn.light{border-color:#fff;color:#fff}.btn.light:hover{background:#fff;color:var(--ink)}
.divider{width:56px;height:1px;background:var(--gold);margin:18px auto}

/* ---------- HEADER / NAV ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.4s;padding:6px 0;background:var(--green);border-bottom:1px solid rgba(201,162,75,.28)}
header.solid,header.scrolled{padding:4px 0;box-shadow:0 6px 24px rgba(0,0,0,.22)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px}
.nav .logo{height:72px;transition:.4s;filter:none}
header.scrolled .nav .logo,header.solid .nav .logo{height:60px}

/* ---------- BRAND MARK (real logo, framed as an emblem) ---------- */
.brand{display:flex;align-items:center;gap:0;text-decoration:none}
.brand .emblem{height:78px;width:auto;display:block;flex:0 0 auto;border:none;padding:0;transition:.45s;background:transparent}
.brand .emblem img{height:100%;width:auto;display:block}
.brand:hover .emblem{transform:translateY(-1px);opacity:.9}
header.scrolled .brand .emblem{height:58px}
header.solid .brand .emblem{height:78px}
header.solid.scrolled .brand .emblem{height:58px}
.brand .words{display:flex;flex-direction:column;line-height:1}
.brand .words .n{font-family:'Archivo',sans-serif;font-size:27px;font-weight:500;color:#fff;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;line-height:1}
.brand .words .t{font-family:'Archivo',sans-serif;font-size:var(--t-micro);font-weight:400;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-soft);margin-top:5px;white-space:nowrap}

header.scrolled .brand .words .n{font-size:var(--t-sub);letter-spacing:.16em}
header.scrolled .brand .words .t{font-size:var(--t-micro);letter-spacing:.34em}
@media(max-width:620px){
  .brand .words .n{font-size:var(--t-minor);letter-spacing:.16em}
  .brand .words .t{font-size:var(--t-micro);letter-spacing:.3em}
  .brand .emblem{height:58px}
}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-family:'Archivo';font-size:var(--t-fine);letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--gold-soft);transition:.3s}
.nav-links a:hover{color:#fff}
.nav-cta{font-family:'Archivo'!important;padding:11px 22px;font-size:var(--t-label);font-weight:500;letter-spacing:.16em;border:1px solid var(--gold-soft);color:var(--gold-soft)}
.nav-cta:hover{background:var(--gold-soft);color:var(--green)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.burger span{width:26px;height:2px;background:var(--gold-soft)}

/* ---------- SECTIONS ---------- */
section{padding:120px 0;position:relative}
.center{text-align:center;max-width:740px;margin:0 auto 64px}
.center h2{font-size:var(--t-title);margin:14px 0 14px}
.center h2 span{font-style:italic;color:var(--gold-deep)}
.center p{color:var(--ink-soft)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero video,.hero .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,.5),rgba(0,0,0,.22) 45%,rgba(0,0,0,0) 72%),linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.3) 45%,rgba(255,255,255,.96));z-index:1}
.hero-inner{position:relative;z-index:2;padding:0 24px;max-width:880px}
.hero .eyebrow{color:var(--gold-soft)}
.hero h1{font-size:var(--t-hero);font-weight:600;margin:16px 0 12px;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 span{color:var(--gold-soft);font-style:italic;font-weight:500}
.hero p{font-size:var(--t-lead);color:rgba(255,255,255,.94);max-width:640px;margin:0 auto 34px}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;width:26px;height:42px;border:2px solid rgba(255,255,255,.55);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.scroll-cue span{width:4px;height:8px;background:var(--gold-soft);border-radius:2px;animation:scrolldot 1.7s infinite}
@keyframes scrolldot{0%{opacity:0;transform:translateY(0)}40%{opacity:1}80%{opacity:0;transform:translateY(12px)}100%{opacity:0}}
.page-hero{min-height:56vh}
.page-hero::after{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.5))}

/* ---------- ABOUT SPLIT ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.split .imgwrap{position:relative}
.split img{width:100%;height:560px;object-fit:cover;box-shadow:var(--shadow)}
.split .imgwrap::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold);z-index:-1}
.split h2{font-size:var(--t-title);margin:12px 0 22px}
.split p{color:var(--ink-soft);margin-bottom:18px}
.signature{font-family:'EB Garamond';font-style:italic;font-size:var(--t-head);color:var(--gold-deep);margin-top:8px}

/* ---------- SERVICES ---------- */
.services{background:var(--bg-alt)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.scard{position:relative;height:380px;overflow:hidden;background:#000;box-shadow:var(--shadow)}
.scard img{width:100%;height:100%;object-fit:cover;transition:.7s;opacity:.92}
.scard:hover img{transform:scale(1.09);opacity:1}
.scard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(20,14,4,.82))}
.scard .meta{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:26px}
.scard .meta h3{font-size:var(--t-sub);color:#fff;margin-bottom:5px}
/* The card sub-line was Archivo 300 at 12.5px in gold on a photograph -
   light weight, small and low contrast all at once, which is why it was
   hard to read. EB Garamond italic picks up the ribbon and the page
   headings, and white carries over a photograph where gold did not.
   18px is off the type scale on purpose: it is the size Sotiris chose
   from a side-by-side, and the nearest steps are 15.5 and 20. */
.scard .meta p{font-family:'EB Garamond',Georgia,serif;font-style:italic;font-weight:500;
        font-size:18px;letter-spacing:.01em;color:rgba(255,255,255,.9)}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.stats .n{font-family:'EB Garamond';font-size:58px;color:var(--gold-deep);font-weight:600;line-height:1}
.stats .l{font-size:var(--t-fine);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px}

/* ---------- PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step{text-align:center;padding:0 6px}
.step .num{font-family:'EB Garamond';font-size:var(--t-head);color:#fff;background:linear-gradient(135deg,var(--gold),var(--gold-deep));width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-weight:600;box-shadow:0 10px 24px rgba(168,132,33,.3)}
.step h3{font-size:var(--t-sub);margin-bottom:8px}
.step p{color:var(--ink-soft);font-size:var(--t-small)}

/* ---------- MENU GRID (links to PDFs) ---------- */
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mcard{position:relative;height:230px;overflow:hidden;box-shadow:var(--shadow);display:block}
.mcard img{width:100%;height:100%;object-fit:cover;transition:.6s;opacity:.95}
.mcard:hover img{transform:scale(1.08)}
.mcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(20,14,4,.78))}
.mcard .lbl{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:18px;text-align:center}
.mcard .lbl h4{font-size:var(--t-sub);color:#fff}
.mcard .lbl span{font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);opacity:0;transition:.3s}
.mcard:hover .lbl span{opacity:1}

/* ---------- GALLERY ---------- */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:200px;gap:14px}
.gallery a{overflow:hidden;position:relative;display:block}
.gallery img{width:100%;height:100%;object-fit:cover;transition:.6s}
.gallery a:hover img{transform:scale(1.1)}
.gallery .big{grid-column:span 2;grid-row:span 2}
.gallery .tall{grid-row:span 2}
.gallery a::after{content:"";position:absolute;inset:0;background:rgba(168,132,33,0);transition:.4s}
.gallery a:hover::after{background:rgba(168,132,33,.18)}

/* ---------- WHY / FEATURES ---------- */
.features{background:var(--bg-alt)}
.grid-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.feat .ic{font-family:'EB Garamond';font-size:32px;color:var(--gold-deep);border:1px solid var(--gold);width:64px;height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:#fff;box-shadow:var(--shadow)}
.feat h3{font-size:var(--t-sub);margin-bottom:10px}
.feat p{color:var(--ink-soft);font-size:var(--t-small)}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.contact-info h3{font-size:var(--t-head);margin-bottom:16px}
.contact-info p{color:var(--ink-soft);margin-bottom:10px}
.contact-info a{color:var(--gold-deep)}
.field{margin-bottom:16px}
.field label{display:block;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);background:#fff;font-family:'Archivo';font-size:var(--t-small);color:var(--ink);outline:none;transition:.3s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);
        box-shadow:0 0 0 3px rgba(168,132,33,.22)}

/* ---------- CTA BANNER ---------- */
.cta-banner{position:relative;text-align:center;padding:130px 0;overflow:hidden}
.cta-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cta-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(20,14,6,.74),rgba(60,42,14,.55));z-index:1}
.cta-banner .wrap{position:relative;z-index:2}
.cta-banner .eyebrow{color:var(--gold-soft)}
.cta-banner h2{font-size:var(--t-display);margin:14px 0 18px;color:#fff}
.cta-banner p{color:rgba(255,255,255,.92);max-width:580px;margin:0 auto 30px}

/* ---------- FOOTER ---------- */
footer{background:#141414;padding:74px 0 30px;color:#c9c9c9}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:42px;margin-bottom:48px}
footer .logo{height:200px;width:auto;margin-bottom:18px}
footer p{color:#b6b6b6;font-size:var(--t-small)}
footer h4{font-size:var(--t-fine);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:18px;font-family:'Archivo';font-weight:500}
footer ul{list-style:none}
footer ul li{margin-bottom:11px}
footer ul li a{font-size:var(--t-small);color:#b6b6b6;transition:.3s}
footer ul li a:hover{color:var(--gold-soft)}
.fbottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:var(--t-fine);color:#b6b6b6;letter-spacing:.03em}
.socials{display:flex;gap:14px;margin-top:18px}
.socials a{width:38px;height:38px;border:1px solid rgba(216,185,106,.4);display:flex;align-items:center;justify-content:center;font-size:var(--t-fine);color:var(--gold-soft);transition:.3s;letter-spacing:.03em}
.socials a:hover{background:var(--gold-ink);color:#fff;border-color:var(--gold-ink)}

/* ---------- REVEAL ANIM ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:.8s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .grid4,.grid-feat,.stats,.steps,.menu-grid{grid-template-columns:repeat(2,1fr)}
  .split,.contact-grid{grid-template-columns:1fr;gap:40px}
  .split img{height:420px}
  .gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:160px}
  .fgrid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .nav-links{position:fixed;inset:0 0 0 auto;width:76%;max-width:320px;background:var(--green);flex-direction:column;justify-content:center;gap:26px;transform:translateX(100%);transition:.4s;z-index:60}
  .nav-links.open{transform:none}
  .nav-links a{color:var(--gold-soft)}
  .burger{display:flex;z-index:61}
  .grid4,.grid-feat,.menu-grid,.steps{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:34px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .big{grid-column:span 2}
  section{padding:74px 0}
}

/* ---------- ACCESS GATE (split-screen, cinematic) ---------- */
.gate{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:1.15fr 1fr;background:#0f1a13}
.gate[hidden]{display:none}
.gate-scene{position:relative;overflow:hidden}
.gate-scene video,.gate-scene .gimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.gate-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(12,26,17,.70),rgba(23,61,43,.34) 55%,rgba(12,26,17,.18)),linear-gradient(180deg,rgba(12,26,17,0) 52%,rgba(12,26,17,.78))}
.gate-scene .gquote{position:absolute;left:48px;bottom:52px;right:48px;z-index:2}
.gate-scene .gquote .ge{font-family:'Archivo';font-size:var(--t-label);font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px}
.gate-scene .gquote .q{font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(26px,3vw,40px);color:#fff;line-height:1.25;max-width:420px;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.gate-scene .gquote .q span{color:var(--gold-soft)}
.gate-scene .gquote .gl{width:52px;height:1px;background:var(--gold-soft);margin-top:20px}
.gate-panel{position:relative;display:flex;align-items:center;justify-content:center;background:#fbf8f2;padding:40px}
.gate-card{width:100%;max-width:392px;text-align:center;animation:gate-rise .8s cubic-bezier(.2,.7,.3,1)}
@keyframes gate-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.gate-card .gemblem{display:block;border:none;padding:0;margin:0 auto 22px;transition:opacity .3s}
.gate-card .gemblem:hover{opacity:.85}
.gate-card .gemblem img{height:190px;width:auto;display:block;margin:0 auto}
.gate-card .eyebrow{display:block;margin-bottom:12px;font-size:var(--t-label);letter-spacing:.38em}
.gate-card h2{font-size:37px;margin-bottom:0;line-height:1.08}
.gate-card h2 em{font-style:italic;color:var(--gold-deep)}
.gate-card .sub{color:var(--ink-soft);font-size:var(--t-small);margin:14px 0 26px;line-height:1.75}
.gate-card .btn{width:100%}
.gate-card .btn+.btn{margin-top:12px}
.gate .small{font-size:var(--t-fine);color:var(--ink-soft);margin-top:20px;line-height:1.6}
.gate .small a{color:var(--gold-deep);cursor:pointer;font-weight:500}
.gate .gfoot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.gate-tabs{display:flex;justify-content:center;gap:32px;border:none;border-bottom:1px solid var(--line);margin-bottom:24px}
.gate-tabs button{flex:0 0 auto;background:none;border:none;padding:0 2px 13px;font-family:'Archivo';font-weight:500;font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;transition:color .3s;position:relative}
.gate-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.gate-tabs button:hover{color:var(--gold-deep)}
.gate-tabs button.active{color:var(--gold-deep)}
.gate-tabs button.active::after{transform:scaleX(1)}
.gate .pane{display:none}
.gate .pane.active{display:block}
.gate .field{text-align:left;margin-bottom:13px}
.gate .pane .btn{width:100%;margin-top:4px}
.gate .gnote{display:none;background:#fdf3e3;border:1px solid var(--gold-soft);color:var(--gold-deep);font-size:var(--t-fine);padding:10px 14px;margin-bottom:14px}
.gate .ok-ic{font-family:'EB Garamond';font-size:44px;color:var(--gold-deep);line-height:1;margin-bottom:10px}
.gate .ok-t{font-family:'EB Garamond';font-size:28px;margin-bottom:10px}
.gate .ok-s{color:var(--ink-soft);font-size:var(--t-small);line-height:1.75}
@media(max-width:860px){
  .gate{grid-template-columns:1fr}
  .gate-scene{display:none}
  .gate-panel{padding:28px}
}
.gate .ok-msg{display:none;padding:10px 0;color:var(--gold-deep);font-family:'EB Garamond';font-size:var(--t-minor)}
.gate .gate-btns .btn{width:100%}
.signout-btn{position:fixed;bottom:18px;right:18px;z-index:120;background:var(--ink);color:#fff;border:none;padding:10px 16px;font-family:'Archivo';font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;opacity:.85;transition:.3s}
.signout-btn:hover{opacity:1;background:var(--gold)}

/* ---------- GREEN BAND (Why Choose Us) ---------- */
.green-band{background:var(--green)}
.green-band .eyebrow{color:var(--gold-soft)}
.green-band .center h2,.green-band .feat h3{color:#fff}
.green-band .center h2 span{color:var(--gold-soft)}
.green-band .center p,.green-band .feat p{color:rgba(255,255,255,.82)}
.green-band .divider{background:var(--gold-soft)}
.green-band .imgwrap::before{border-color:var(--gold-soft)}

/* ---------- TESTIMONIALS ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.quote{border:1px solid var(--line);padding:34px 28px;background:var(--paper);box-shadow:var(--shadow)}
.quote .stars{color:var(--gold);letter-spacing:3px;margin-bottom:14px}
.quote p{font-family:'EB Garamond';font-size:var(--t-minor);font-style:italic;color:var(--ink);line-height:1.4;margin-bottom:18px}
.quote .who{font-size:var(--t-fine);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}

/* ---------- INSTAGRAM STRIP ---------- */
.ig-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ig-strip a{position:relative;display:block;aspect-ratio:1;overflow:hidden}
.ig-strip img{width:100%;height:100%;object-fit:cover;transition:.5s}
.ig-strip a:hover img{transform:scale(1.1)}
.ig-strip a::after{content:"";position:absolute;inset:0;background:rgba(23,61,43,0);transition:.3s}
.ig-strip a:hover::after{background:rgba(23,61,43,.28)}

@media(max-width:900px){.quotes{grid-template-columns:1fr}.ig-strip{grid-template-columns:repeat(3,1fr)}}

/* ---------- GREEN FOOTER ---------- */
footer{background:var(--green)}

/* ---------- FLOATING CONTACT BUTTONS ---------- */
.fab-stack{position:fixed;left:18px;bottom:18px;z-index:130;display:flex;flex-direction:column;gap:12px}
.fab{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--green);color:var(--gold-soft);border:1px solid rgba(205,163,74,.55);box-shadow:0 10px 26px rgba(12,28,20,.32);transition:transform .35s cubic-bezier(.2,.7,.3,1),background .35s,color .35s,border-color .35s}
.fab::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(205,163,74,.22);opacity:0;transition:opacity .35s,inset .35s}
.fab{position:relative}
.fab:hover{transform:translateY(-3px);background:var(--gold-ink);color:#fff;border-color:var(--gold-ink)}
.fab:hover::after{opacity:1;inset:-8px}
.fab-wa{background:var(--green)}
@media(max-width:620px){.fab-stack{left:14px;bottom:14px}.fab{width:50px;height:50px}}

/* ---------- UNIFIED IMAGERY ---------- */
.scard img,.mcard img,.ig-strip img,.gallery img{filter:saturate(1.06) contrast(1.03)}
.occ .ph,.mrow .ph{filter:saturate(1.05) contrast(1.02)}

/* ---------- MARQUEE RIBBON (shared) ---------- */
.ribbon{background:var(--green);padding:15px 0;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(216,185,106,.25);border-bottom:1px solid rgba(216,185,106,.25)}
.ribbon .run{display:inline-block;animation:run 34s linear infinite}
.ribbon span{font-family:'EB Garamond';font-style:italic;font-size:var(--t-sub);color:var(--gold-soft);padding:0 24px}
.ribbon span::after{content:"\00b7";margin-left:24px;color:rgba(216,185,106,.45)}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* events cards hover polish */
.occ{transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s}
.occ:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(0,0,0,.18)}
.occ .ph{transition:.8s}
.occ:hover .ph{transform:scale(1.05)}

/* keep nav items on one line */
.nav-links a{white-space:nowrap}

/* nav: breathing room between brand and links */
.brand{margin-right:36px}
.nav-links{margin-left:auto;gap:26px}

/* footer socials as icon buttons */
.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.socials a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(216,185,106,.45);color:var(--gold-soft);transition:.3s;border-radius:0}
.socials a svg{width:17px;height:17px;display:block}
.socials a:hover{background:var(--gold-soft);color:var(--green);border-color:var(--gold-soft);transform:translateY(-2px)}

/* larger logo, keep the bar balanced on smaller screens */
@media(max-width:1180px){
  .brand .emblem,header.solid .brand .emblem{height:70px}
  .brand .words .n{font-size:var(--t-sub);letter-spacing:.16em}
  .nav-links{gap:20px}
}

/* ---- full-lockup logo: mobile polish ---- */
@media(max-width:820px){
  header{padding:8px 0}
  .brand .emblem,header.solid .brand .emblem{height:58px}
  header.scrolled .brand .emblem,header.solid.scrolled .brand .emblem{height:50px}
  .nav-links{gap:22px}
  .nav-links a{font-size:var(--t-small);letter-spacing:.14em}
  .nav-cta{font-size:var(--t-fine)!important;padding:12px 20px}
  .burger span{width:28px}
}
@media(max-width:620px){
  .brand .emblem,header.solid .brand .emblem{height:52px}
  header.scrolled .brand .emblem,header.solid.scrolled .brand .emblem{height:44px}
  .nav-links{padding:80px 30px}
  .nav-links a{font-size:var(--t-body);letter-spacing:.16em}
  .nav-cta{width:100%;text-align:center;margin-top:10px}
  footer .logo{height:150px}
  .hero h1{line-height:1.08}
  section{padding:64px 0}
  .fab{width:48px;height:48px}
  .fab-stack{bottom:12px;left:12px;gap:10px}
}

/* ================= CENTRED-LOGO HEADER ================= */
.nav-left{display:flex;align-items:center;gap:26px;justify-content:flex-start}
.nav-left a{font-family:'Archivo';font-size:var(--t-fine);letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--gold-soft);transition:.3s;white-space:nowrap;position:relative;padding-bottom:3px}
.nav-left a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold-soft);transition:width .35s cubic-bezier(.2,.7,.3,1)}
.nav-left a:hover{color:#fff}
.nav-left a:hover::after{width:100%}
.nav-left a.on{color:#fff}
.nav-left a.on::after{width:100%}
.brand{justify-self:center;margin:0}
.nav-right{display:flex;align-items:center;gap:16px;justify-content:flex-end}
.nav-right .ico{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(216,185,106,.4);color:var(--gold-soft);transition:.3s}
.nav-right .ico svg{width:15px;height:15px;display:block}
.nav-right .ico:hover{background:var(--gold-soft);color:var(--green);border-color:var(--gold-soft)}
.nav-right .nav-cta{white-space:nowrap}

@media(max-width:1240px){
  .nav{gap:18px}
  .nav-left{gap:18px}
  .nav-left a{font-size:var(--t-label);letter-spacing:.14em}
  .nav-right{gap:12px}
}
/* The icons used to be hidden below 1000px as well, which left them
   missing between 821 and 999 - the whole iPad band - while showing at
   768 and at 1024. Measured at 821, 900 and 999: the nav keeps an even
   18px either side of the wordmark and nothing overflows, so there was
   no reason for the gap. */
/* --- MOBILE: burger left, logo centred, CTA right ---
   The two outer columns are equal fractions, so the emblem in the middle
   column lands on the exact centre of the viewport whatever the burger and
   the right-hand group happen to measure. It used to be auto 1fr auto,
   which centred the logo inside the leftover space instead of the page and
   pushed it 35px to 59px left. Band raised from 820 to 900: between those
   two the desktop nav no longer fitted and the Plan an Event button ran
   38px off the right edge on an 834px iPad Pro. */
@media(max-width:900px){
  .nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px}
  .burger{display:flex;order:-1;justify-self:start;padding:12px;margin:-12px}
  .nav-left{position:fixed;inset:0 0 0 auto;width:82%;max-width:340px;background:var(--green);flex-direction:column;justify-content:center;align-items:flex-start;gap:28px;padding:0 34px;transform:translateX(100%);transition:.42s cubic-bezier(.3,.7,.3,1);z-index:60}
  .nav-left.open{transform:none}
  .nav-left a{font-size:var(--t-minor);letter-spacing:.16em;padding-top:11px;padding-bottom:11px;display:inline-block}
  .nav-left a::after{display:none}
  .nav-right{gap:10px;justify-self:end}
  .nav-right .ico{display:none}
  .nav-right .nav-cta{font-size:var(--t-label)!important;padding:10px 14px;letter-spacing:.14em}
}
@media(max-width:520px){
  .nav-right .nav-cta{display:none}
  .nav-right .ico{display:flex;width:38px;height:38px}
  .nav-right .ico svg{width:17px;height:17px}
}

/* crisper logo rendering at small sizes */
.brand .emblem img{image-rendering:auto;-webkit-backface-visibility:hidden}


/* ---------- ORNAMENTAL SECTION SEPARATOR ---------- */
.sep{background:var(--green);padding:22px 0;display:flex;align-items:center;justify-content:center;gap:20px;position:relative;overflow:hidden}
.sep::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(168,132,33,0),rgba(205,163,74,.14),rgba(168,132,33,0))}
.sep span{position:relative;z-index:2}
.sep .l,.sep .r{width:min(160px,22vw);height:1px}
.sep .l{background:linear-gradient(90deg,rgba(205,163,74,0),var(--gold-soft))}
.sep .r{background:linear-gradient(90deg,var(--gold-soft),rgba(205,163,74,0))}
.sep .d{width:8px;height:8px;transform:rotate(45deg);border:1px solid var(--gold-soft);display:block}
@media(max-width:620px){.sep{padding:16px 0;gap:14px}.sep .l,.sep .r{width:26vw}}


/* ---------- GATE: close + context line ---------- */
.gate-card{position:relative}
.gclose{position:absolute;top:-14px;right:-6px;width:40px;height:40px;border:none;background:none;font-family:'Archivo';font-size:30px;line-height:1;color:var(--ink-soft);cursor:pointer;transition:color .3s;z-index:3}
.gclose:hover{color:var(--gold-deep)}
.gate .gwhat{font-family:'Archivo';font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 0;margin-bottom:20px}
@media(max-width:900px){.gclose{top:-10px;right:-2px}}

/* ---------- LOCKED MENU LINKS ---------- */
.mrow .view.locked{display:inline-flex;align-items:center;gap:9px}
.view .lk{font-size:var(--t-label);line-height:1;opacity:.65;filter:grayscale(1);transform:translateY(-1px)}
.mrow .view.locked:hover .lk{opacity:1}
body.ct-member .view .lk{display:none}

/* ---------- DISCREET SLIDE-IN INVITATION ---------- */
.invite{position:fixed;right:22px;bottom:22px;z-index:140;width:min(370px,calc(100vw - 32px));background:#fbf8f2;border-top:2px solid var(--gold);box-shadow:0 26px 70px rgba(12,28,20,.30);padding:30px 30px 26px;transform:translateY(24px);opacity:0;pointer-events:none;transition:transform .7s cubic-bezier(.2,.7,.3,1),opacity .7s}
.invite.in{transform:translateY(0);opacity:1;pointer-events:auto}
.invite .ivx{position:absolute;top:6px;right:10px;width:34px;height:34px;border:none;background:none;font-family:'Archivo';font-size:var(--t-sub);line-height:1;color:var(--ink-soft);cursor:pointer;transition:color .3s}
.invite .ivx:hover{color:var(--gold-deep)}
.invite .ive{font-family:'Archivo';font-size:var(--t-label);font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.invite .ivt{font-family:'EB Garamond',serif;font-size:27px;line-height:1.1;color:var(--ink)}
.invite .ivt em{font-style:italic;color:var(--gold-deep)}
.invite .ivl{width:44px;height:1px;background:var(--gold);margin:14px 0 13px}
.invite p{font-size:var(--t-small);line-height:1.75;color:var(--ink-soft);margin-bottom:16px}
.invite input{width:100%;padding:12px 14px;border:1px solid var(--line);background:#fff;font-family:'Archivo';font-size:var(--t-small);color:var(--ink);margin-bottom:10px}
.invite input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(168,132,33,.22)}
.invite .btn{width:100%}
.invite .ivs{font-size:var(--t-label);letter-spacing:.06em;color:var(--ink-soft);margin-top:13px;text-align:center;opacity:.8}
.invite .ivok{display:none;font-family:'EB Garamond',serif;font-size:var(--t-minor);color:var(--gold-deep);padding:8px 0 4px}
.invite.done form{display:none}
.invite.done .ivok{display:block}
@media(max-width:620px){.invite{right:12px;left:12px;bottom:12px;width:auto;padding:26px 22px 22px}.invite .ivt{font-size:var(--t-sub)}}

/* ---------- TOAST ---------- */
.ct-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,26px);z-index:160;background:var(--green);color:#fff;border:1px solid rgba(205,163,74,.45);font-family:'Archivo';font-size:var(--t-fine);letter-spacing:.03em;padding:14px 26px;box-shadow:0 18px 46px rgba(0,0,0,.3);opacity:0;transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.3,1)}
.ct-toast.in{opacity:1;transform:translate(-50%,0)}

/* ---------- MOBILE TAP TARGETS (min 44px, WCAG 2.5.8) ---------- */
@media(max-width:820px){
  /* No display here: the nav icons are deliberately hidden between 521px
     and 900px, where the Plan an Event button takes that space. Setting
     display on them brought them back by accident. The minimums still
     apply wherever they are shown.
     The burger and the drawer links carry their padding in the mobile nav
     block above instead, so it follows that block's 900px band rather than
     stopping at 820 and leaving a 80px gap with small tap targets. */
  .nav-right .ico,.socials a{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  footer ul li a{display:inline-block;padding:7px 0}
  .fbottom a{display:inline-block;padding:8px 0}
  .btn{padding:16px 30px}
  .gate-tabs button{padding-top:8px;padding-bottom:15px}
}

.replypromise{text-align:center;margin-top:18px;font-family:'Archivo';font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}

/* ---- Closing call to action on the service pages. The enquiry form lives
   in one place now (services.html#inquire); every service page sends
   people there instead of carrying its own copy. ---- */
.ctaacts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.ctafoot{text-align:center;font-family:'Archivo';font-size:var(--t-fine);letter-spacing:.06em;color:var(--ink-soft);margin-top:20px}
.ctafoot a{color:var(--gold-deep)}
@media(max-width:520px){.ctaacts .btn{width:100%;text-align:center}}

/* ---- Soft corners. The menu tiles on the homepage set the tone at 14px;
   the picture blocks and cards across the site follow it, so nothing reads
   as a hard square. Buttons, rules and dividers stay straight: the contrast
   between soft pictures and sharp type is the point. ---- */
.srow .rph .ph,
.mini,
.scard,
.tqcard,
.item,
.gallery-m a,
.olweek .d,
.hbfacts>div,
.opt{border-radius:14px;overflow:hidden}
.item .thumb{border-radius:10px}
.mini .mph,.tqcard img,.scard img{border-radius:0}
input,select,textarea{border-radius:8px}
.field input,.field select,.field textarea{border-radius:8px}

/* Buttons and chips follow the same softening as the cards. */
.btn{border-radius:10px}
.gf{border-radius:999px}

/* The header icons lose their square box: circles, matching everything else. */
.nav-right .ico{border-radius:50%}

/* ---- The soft corners carried through every page, not just the homepage.
   Cards, panels, tiles, small buttons and inputs all sit on the same radius
   family: 14px for blocks, 10px for buttons, 999px for chips. ---- */
.add,.qty button,.catbar button,.gf,.tcatbtn{border-radius:10px}
.catbar button,.gf{border-radius:999px}
.tprod,.item,.tfact,.thow-step,.cocard,.mini,.scard,.step,.olday,.olfi,.proga,
.mrow,.ccard,.role,.cform,.pfstep,.hchap,.olweek .d,.gallery-m a{border-radius:14px;overflow:hidden}
.qty button{border-radius:8px}
.socials a{border-radius:50%}
.tp-ph{border-radius:14px 14px 0 0}

/* ============================================================
   QUESTIONS, ANSWERED
   One master toggle holds the whole set, so a closed FAQ costs
   the page a heading and nothing more. Inside, each question is
   its own soft panel.
   ============================================================ */
.faq{background:var(--bg-alt);padding:96px 0}
.faqmaster{max-width:880px;margin:0 auto}
.faqmaster>summary{cursor:pointer;list-style:none;text-align:center;padding:2px 0}
.faqmaster>summary::-webkit-details-marker{display:none}
.faqmaster>summary h2{font-size:var(--t-section);margin-top:12px;transition:color .25s}
.faqmaster>summary h2 span{font-style:italic;color:var(--gold-deep)}
.faqmaster>summary:hover h2{color:var(--gold-ink)}
.faqmaster>summary .divider{margin:18px auto 0}
.faqhint{display:inline-flex;align-items:center;gap:11px;margin-top:22px;font-family:'Archivo';font-weight:500;
  font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);
  border:1px solid var(--line);border-radius:999px;padding:11px 22px;transition:.3s}
.faqmaster>summary:hover .faqhint{background:var(--gold-ink);color:#fff;border-color:var(--gold-ink)}
.faqhint::after{content:"";width:7px;height:7px;flex:none;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.faqmaster[open]>summary .faqhint::after{transform:rotate(-135deg) translateY(1px)}
.faqhint .c{display:none}
.faqmaster[open]>summary .faqhint .o{display:none}
.faqmaster[open]>summary .faqhint .c{display:inline}

.faq .qa{max-width:880px;margin:36px auto 0;display:flex;flex-direction:column;gap:12px}
.faq .qa details{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  transition:box-shadow .3s,border-color .3s}
.faq .qa details[open]{box-shadow:0 14px 34px rgba(0,0,0,.07);border-color:rgba(168,132,33,.5)}
.faq .qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:22px 26px;font-family:'EB Garamond',serif;font-weight:600;font-size:var(--t-minor);color:var(--ink)}
.faq .qa summary::-webkit-details-marker{display:none}
.faq .qa summary::after{content:"";width:26px;height:26px;border-radius:50%;border:1px solid var(--line);flex:none;
  background:linear-gradient(var(--gold-deep),var(--gold-deep)) center/9px 1px no-repeat,
             linear-gradient(var(--gold-deep),var(--gold-deep)) center/1px 9px no-repeat;
  transition:transform .3s,background-color .3s}
.faq .qa details[open] summary::after{transform:rotate(135deg);background-color:rgba(168,132,33,.10)}
.faq .qa details p{padding:0 60px 24px 26px;color:var(--ink-soft);font-size:var(--t-body);line-height:1.85}
.faq .qa details p a{color:var(--gold-deep);border-bottom:1px solid var(--line)}
@media(max-width:560px){
  .faq{padding:72px 0}
  .faq .qa summary{padding:18px;font-size:var(--t-minor);gap:14px}
  .faq .qa details p{padding:0 18px 20px}
}

/* The Instagram handle is a link, so it should look like one on hover. */
.ighandle{transition:color .3s}
.ighandle:hover{color:var(--gold-deep)}
.ighandle:hover span{color:var(--gold)}
.ighandle:focus-visible{outline:2px solid var(--gold-soft);outline-offset:6px;border-radius:6px}

/* ============================================================
   PAGE HERO, split: one picture beside the words.
   Used by the nine service pages. Services, Menus and About have
   their own versions of this because their frames rotate.
   ============================================================ */
.pghero{background:var(--bg);padding:152px 0 92px;border-bottom:1px solid var(--line)}
.pggrid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
        gap:clamp(32px,5.5vw,84px);align-items:center}
.pgframe{border-radius:14px;overflow:hidden;background:var(--bg-alt)}
.pgframe img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.pgtext h1{font-size:clamp(32px,4.4vw,58px);font-weight:600;line-height:1.08;margin:12px 0 0;color:var(--ink)}
.pgtext h1 span{color:var(--gold-deep);font-style:italic;font-weight:500}
.pgtext .lead{margin-top:26px;font-size:var(--t-lead);line-height:2.05;
              color:var(--ink-soft);max-width:44ch}
.pgtext .acts{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:900px){
  .pghero{padding:120px 0 66px}
  .pggrid{grid-template-columns:1fr;gap:30px}
  .pgframe img{aspect-ratio:1/1}
  .pgtext .lead{max-width:none}
}

/* ============================================================
   SHARED SERVICE-PAGE COMPONENTS
   Moved here 11 Sep 2026. These six blocks were duplicated
   verbatim inside 7-13 separate pages' own <style> tags, which
   is how holidays.html ended up using .prog markup with no
   .prog rules at all. One definition now, for every page.
   ============================================================ */

/* Related services: the cards that close every service page */
.prog{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.prog a{display:block;border:1px solid var(--line);background:var(--paper);padding:32px 30px;transition:.35s}
.prog a:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow)}
.prog h3{font-size:var(--t-sub);margin-bottom:9px}
.prog p{font-size:var(--t-small);color:var(--ink-soft);line-height:1.75;margin-bottom:14px}
.prog .go{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
@media(max-width:820px){.prog{grid-template-columns:1fr}}

/* What the evening includes: the tick grid */
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:0 54px;max-width:940px;margin:44px auto 0}
.incl div{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line)}
.incl .tick{color:var(--gold-deep);font-size:var(--t-body);line-height:1.4;flex:none}
.incl p{font-size:var(--t-body);color:var(--ink-soft);line-height:1.75;margin:0}
.incl b{color:var(--ink);font-weight:500;font-family:'Archivo'}
@media(max-width:820px){.incl{grid-template-columns:1fr;gap:0}}

/* Numbered step cards (office lunch, office table, provisions) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px}
.step{background:var(--paper);box-shadow:var(--shadow);border-top:2px solid var(--gold);padding:32px 28px;text-align:center}
.step .n{font-family:'EB Garamond';font-style:italic;font-size:var(--t-head);color:var(--gold-deep);margin-bottom:10px}
.step h4{font-size:var(--t-minor);margin-bottom:9px}
.step p{font-size:var(--t-small);color:var(--ink-soft);line-height:1.75}
@media(max-width:900px){.steps{grid-template-columns:1fr}}

/* Our menus: image one side, the words the other. NEVER CROPPED.
   Do not add aspect-ratio or object-fit:cover to .msframe img. That
   rule silently zoomed every menu photograph and Sotiris called it
   out twice before the cause was found. */
.msplit{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
        gap:clamp(32px,5.5vw,84px);align-items:center}
.msframe{margin:0}
.msframe img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow)}
.mstext h2{font-size:var(--t-section);line-height:1.1;margin:14px 0 0}
.mstext h2 em{font-style:italic;font-weight:500;color:var(--gold-deep)}
.mstext .divider{margin:20px 0}
.mstext p{margin-top:0;color:var(--ink-soft);line-height:2.05;font-size:var(--t-lead)}
.mstext .acts{margin-top:32px}

/* Menu index: a menu header, framed in gold hairlines.
   EB Garamond, not Archivo. Sotiris rejected Archivo as not deluxe. */
.dirs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
      gap:6px 20px;margin:32px auto 0;padding:17px 0;max-width:840px;
      border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dirs span{display:inline-flex;align-items:center;font-family:'EB Garamond',serif;
           font-weight:500;font-size:var(--t-lead);letter-spacing:.2em;
           text-transform:uppercase;color:var(--gold-deep);line-height:1.6}
.dirs span:not(:last-child)::after{content:"\25C7";margin-left:20px;font-size:.5em;
                                   letter-spacing:0;color:var(--gold);opacity:.7}
.mstext .dirs{justify-content:flex-start;max-width:none;margin:32px 0 0}
@media(max-width:900px){
  .msplit{grid-template-columns:1fr;gap:36px}
  .mstext{text-align:center}
  .mstext .divider{margin:20px auto}
  .mstext .dirs{justify-content:center}
}
@media(max-width:620px){.dirs{gap:4px 14px;padding:14px 0}
                        .dirs span{letter-spacing:.14em}
                        .dirs span:not(:last-child)::after{margin-left:14px}}

/* The enquiry form: our frame, HoneyBook's fields */
.hbhold{max-width:760px;margin:34px auto 0;background:var(--paper);border:1px solid var(--line);
        border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.hbfall{font-family:'Archivo';font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;
        color:var(--ink-soft);text-align:center;padding:16px 24px 20px}
.hbfall a{color:var(--gold-deep)}
.coverline{max-width:640px;margin:34px auto 0;text-align:center;font-size:var(--t-small);line-height:1.95;color:var(--ink-soft)}

/* Content images are rounded site-wide, not page by page */
.fit img,.wideshot img{border-radius:14px}

/* The little gold rule under an eyebrow. Was defined only scoped
   (.abed .rline, .srow .rline) and locally on careers, so six pages
   used class="rline" with no rule at all and rendered nothing. */
.rline{width:52px;height:1px;background:var(--gold);margin:20px 0 22px}

/* ---- Touch targets ---------------------------------------------------
   Small-print links — the contact line under a form, the "prefer to talk"
   note — measured 12-14px tall on a phone. Right as type, too small as a
   target. The hit area is grown with a pseudo-element, so the type and the
   line it sits on do not move a pixel. */
.ctafoot a,.replynote a,.coverline a{position:relative;display:inline-block}
.ctafoot a::after,.replynote a::after,.coverline a::after{content:"";
        position:absolute;left:-8px;right:-8px;top:50%;height:44px;
        transform:translateY(-50%)}

/* The link under the enquiry form is not small print: when an ad blocker
   eats the embed it is the only way in. It gets the shape of a control. */
.hbfall{padding:18px 24px 24px}
.hbfall a{display:inline-flex;align-items:center;justify-content:center;
        min-height:44px;padding:0 24px;border:1px solid var(--line);
        border-radius:999px;color:var(--gold-deep);
        transition:border-color .3s ease,background .3s ease}
.hbfall a:hover{border-color:var(--gold);background:var(--bg-alt)}

/* ---- Two notes that sit under a call to action -----------------------
   Both were pasted verbatim into twelve page <style> blocks, which is how
   a one-line fix comes to apply to eleven pages and quietly miss the
   twelfth. Holidays and Provisions keep only their own difference: their
   price sits on a photograph and needs a shadow to stay legible. */
.pricenote{margin-top:20px;font-family:'Archivo';font-size:var(--t-fine);
        letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
.replynote{text-align:center;font-size:var(--t-fine);color:var(--ink-soft);margin-top:20px}

/* ---- The two smallest steps, on a phone -------------------------------
   --t-label (11px) and --t-micro (9.5px) are sized for a desktop column.
   On a 390px screen 9.5px uppercase is below reading size, and --t-label
   carries things people are meant to tap - "See the programme", "See the
   service", the link out of the enquiry form - not just quiet labels.
   Both go up one notch below 620px. Measured across all 24 pages at
   390px: no new horizontal overflow, and two labels gain a line. */
@media(max-width:620px){
  :root{--t-micro:11px;--t-label:12px}
}

/* ---- A row of buttons, and what it does on a phone --------------------
   .btnrow is the row itself. The rule under it catches every container
   holding two or more buttons, whatever it is called - .hero-cta, .acts,
   .nf .go, a bare styled div - and makes them one width once they stack.
   Measured at 390px, they were arriving at eight different widths on one
   page: 186 beside 333 on Office Table, 186 beside 315 on Portfolio. Two
   buttons under each other at different widths read as an accident. */
.btnrow{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
@media(max-width:520px){
  :is(div,p):has(> .btn + .btn){display:flex;flex-direction:column;align-items:center;gap:12px}
  :is(div,p):has(> .btn + .btn) > .btn{width:100%;max-width:340px;text-align:center;margin-left:0;margin-right:0}
}

/* ---- Reduced motion ---------------------------------------------------
   Only index.html honoured this before; the other 23 pages ignored it
   entirely, so a visitor who asks their system for less movement still
   got the .reveal fade-and-rise on every block, the scrolling ribbon and
   seven keyframe animations. This turns all of it off site-wide, and
   forces the reveal classes to their finished state so nothing that was
   waiting to animate in is left invisible. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;
        transition-delay:0s!important;scroll-behavior:auto!important}
  .reveal,.rise,.mask{opacity:1!important;transform:none!important;clip-path:none!important}
}