/* ==========================================================================
   ZOUR BEIRUT - shared page styles
   The tokens and shell (header, drawer, footer, buttons, street sign) lifted
   verbatim from index.html so the sub-pages cannot drift from the home page.
   index.html stays self-contained and does NOT load this file.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* --- Ground surfaces --- */
  --cream:#FFF9EE;         /* brand cream, straight off the logo */
  --cream-2:#F7EEDC;       /* recessed paper */
  --wall:#E6F0F2;          /* hero wall - the bowl's pale blue-white */
  --wall-2:#C6DFE7;        /* wainscot */
  --ink:#1C1A16;
  --ink-soft:#3F3A31;
  --muted:#5A5245;         /* 6.83:1 on cream */
  --muted-light:#D8CDBA;   /* on ink */
  --muted-teal:#CFE2E9;    /* on teal-deep - 5.48:1 */

  /* --- Brand accents, sampled from ZOUR BEIRUT - LOGO PACK/VECTOR --- */
  --red:#CC0B11;           /* logo "ZOUR". Text-safe on cream (5.47:1) */
  --red-bright:#E6292E;    /* logo "BEIRUT". GRAPHIC FILLS ONLY -
                              cream on it is 4.20:1, under AA for body text */
  --teal:#087A97;          /* logo pill. Cream text 4.68:1 */
  --teal-deep:#065E75;     /* text-heavy dark ground - cream 6.92:1 */
  --coral:#F0705C;         /* warm ground. ALWAYS ink text (5.97:1) */
  --order-red:#BD0000;     /* client-specified. Cream text on it = 6.17:1 */
  --yellow:#F2B33D;        /* highlights, badges (ink 9.26:1) */
  --yellow-light:#F7C766;  /* yellow as TEXT on dark grounds (4.68:1 on teal-deep) */
  --blue:#0E5CA8;          /* Lebanese street signs ONLY (white 6.71:1) */
  --pistachio:#6E8C4A;
  --pistachio-deep:#55703A;  /* tag fill - white text 5.57:1 */

  /* Spacing - 4/8 rhythm */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --radius-s:6px; --radius-m:12px; --radius-l:20px; --radius-pill:999px;
  --maxw:1280px;
  --header-h:74px;

  /* Motion - one rhythm site-wide */
  --e-out:cubic-bezier(.22,.68,.32,1);
  --e-spring:cubic-bezier(.34,1.42,.44,1);
  --t-fast:150ms; --t-base:280ms; --t-slow:620ms;

  /* Bauhaus-poster hard shadows, not soft blur */
  --hard:4px 4px 0 var(--ink);
  --hard-lg:7px 7px 0 var(--ink);
  --soft:0 6px 18px rgba(28,26,22,.10), 0 18px 44px rgba(28,26,22,.10);

  /* Paper grain + plaster texture, inline (no network cost) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  --plaster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)' opacity='.55'/%3E%3C/svg%3E");

  /* The melamine bowl motif - the pattern on every Lebanese household
     tea bowl. Same two colours as the logo, which is why it fits. */
  /* Four-point star tile, page 1 of the supplied pattern sheet.
     Cropped at its true 325px repeat and quantised to its five colours. */
  /* Patchwork encaustic cement tiles, drawn from the wall band in the
     restaurant reference photo: quatrefoil, eight-point star, opposed
     fans and diagonal lattice, in its navy / teal / terracotta palette. */
  --cementtile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='64' viewBox='0 0 256 64'%3E%3Cdefs%3E%3CclipPath id='k'%3E%3Crect width='64' height='64'/%3E%3C/clipPath%3E%3Cg id='a'%3E%3Crect width='64' height='64' fill='%23F2EBDD'/%3E%3Cpath d='M0 0a18 18 0 0 1 18 0 18 18 0 0 1-18 18z' fill='%23C96B3F'/%3E%3Cpath d='M64 0a18 18 0 0 0-18 0 18 18 0 0 0 18 18z' fill='%23C96B3F'/%3E%3Cpath d='M0 64a18 18 0 0 0 18 0 18 18 0 0 0-18-18z' fill='%23C96B3F'/%3E%3Cpath d='M64 64a18 18 0 0 1-18 0 18 18 0 0 1 18-18z' fill='%23C96B3F'/%3E%3Cg fill='%232E4A6B'%3E%3Cpath d='M32 32C23 24 23 11 32 4c9 7 9 20 0 28z'/%3E%3Cpath d='M32 32c8-9 21-9 28 0-7 9-20 9-28 0z'/%3E%3Cpath d='M32 32c9 8 9 21 0 28-9-7-9-20 0-28z'/%3E%3Cpath d='M32 32c-8 9-21 9-28 0 7-9 20-9 28 0z'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='5' fill='%233E8B8C'/%3E%3C/g%3E%3Cg id='b'%3E%3Crect width='64' height='64' fill='%23F2EBDD'/%3E%3Crect x='13' y='13' width='38' height='38' fill='%232E4A6B'/%3E%3Crect x='13' y='13' width='38' height='38' fill='%232E4A6B' transform='rotate(45 32 32)'/%3E%3Crect x='24' y='24' width='16' height='16' fill='%23F2EBDD' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='6' fill='%23C96B3F'/%3E%3C/g%3E%3Cg id='c'%3E%3Crect width='64' height='64' fill='%23F2EBDD'/%3E%3Cpath d='M0 0 L42 0 A42 42 0 0 1 0 42 Z' fill='%233E8B8C'/%3E%3Cpath d='M64 64 L22 64 A42 42 0 0 1 64 22 Z' fill='%233E8B8C'/%3E%3Cpath d='M64 0 L64 18 A18 18 0 0 0 46 0 Z' fill='%232E4A6B'/%3E%3Cpath d='M0 64 L0 46 A18 18 0 0 1 18 64 Z' fill='%232E4A6B'/%3E%3Ccircle cx='32' cy='32' r='7' fill='%23C96B3F'/%3E%3C/g%3E%3Cg id='d'%3E%3Crect width='64' height='64' fill='%23F2EBDD'/%3E%3Cg stroke='%232E4A6B' stroke-width='7' fill='none' clip-path='url(%23k)'%3E%3Cpath d='M-8 24L24 -8M-8 56L56 -8M8 72L72 8M40 72L72 40'/%3E%3C/g%3E%3Cpath d='M32 12 52 32 32 52 12 32z' fill='%23F2EBDD'/%3E%3Cpath d='M32 19 45 32 32 45 19 32z' fill='%23C96B3F'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23a' x='0'/%3E%3Cuse href='%23b' x='64'/%3E%3Cuse href='%23c' x='128'/%3E%3Cuse href='%23d' x='192'/%3E%3C/svg%3E");
  --stars:url("data:image/png;base64,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");
  --mount:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23FFF9EE'/%3E%3Cpath d='M16 1 31 16 16 31 1 16Z' fill='none' stroke='%23087A97' stroke-width='1.3' stroke-opacity='.55'/%3E%3Cpath d='M16 8.5 23.5 16 16 23.5 8.5 16Z' fill='none' stroke='%23CC0B11' stroke-width='1' stroke-opacity='.4'/%3E%3Ccircle cx='16' cy='16' r='2.1' fill='%23CC0B11'/%3E%3Cg fill='%23087A97' fill-opacity='.7'%3E%3Ccircle cx='0' cy='0' r='1.7'/%3E%3Ccircle cx='32' cy='0' r='1.7'/%3E%3Ccircle cx='0' cy='32' r='1.7'/%3E%3Ccircle cx='32' cy='32' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
  --bowl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96' viewBox='0 0 120 96'%3E%3Cdefs%3E%3Cg id='l'%3E%3Cpath d='M0 -34 C10 -18 12 -2 0 20 C-12 -2 -10 -18 0 -34Z'/%3E%3C/g%3E%3Cg id='f' fill='none' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M0 -34 V18'/%3E%3Cpath d='M0 -27 L-9 -20 M0 -27 L9 -20'/%3E%3Cpath d='M0 -18 L-11 -10 M0 -18 L11 -10'/%3E%3Cpath d='M0 -8 L-11 0 M0 -8 L11 0'/%3E%3Cpath d='M0 2 L-9 9 M0 2 L9 9'/%3E%3C/g%3E%3Cg id='t'%3E%3Cpath d='M0 42 V32' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M0 34 C-3 25 -1 20 0 16 C1 20 3 25 0 34Z'/%3E%3Cpath d='M0 35 C-7 30 -13 24 -12 14 C-6 18 -2 26 0 35Z'/%3E%3Cpath d='M0 35 C7 30 13 24 12 14 C6 18 2 26 0 35Z'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(30,44)'%3E%3Cuse href='%23l' fill='%23CC0B11'/%3E%3Cuse href='%23t' fill='%23087A97' stroke='%23087A97'/%3E%3C/g%3E%3Cg transform='translate(90,44)'%3E%3Cuse href='%23f' stroke='%23087A97'/%3E%3Cuse href='%23t' fill='%23CC0B11' stroke='%23CC0B11'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.62; color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:3;
  background-image:var(--grain); opacity:.14; mix-blend-mode:multiply;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--ink); outline-offset:3px; border-radius:3px;
}
.on-dark :where(a,button,[tabindex]):focus-visible{outline-color:var(--yellow)}
::selection{background:var(--yellow);color:var(--ink)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,52px)}
.skip{
  position:absolute;left:var(--s-4);top:-100px;z-index:200;
  background:var(--ink);color:var(--cream);padding:13px 22px;border-radius:var(--radius-s);
  font-weight:700;transition:top var(--t-fast) var(--e-out);
}
.skip:focus{top:var(--s-4)}
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 3. TYPE ---------- */
.poster{
  font-family:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  font-weight:400; text-transform:uppercase;
  line-height:1.02; letter-spacing:.012em;
  text-wrap:balance;
}
h1,h2,h3{text-wrap:balance}
h1{font-size:clamp(3.4rem,11vw,8.2rem)}
h2{font-size:clamp(2.3rem,6vw,4.4rem)}
h3{font-size:clamp(1.2rem,2.1vw,1.5rem);line-height:1.18;letter-spacing:-.008em;font-weight:700}
p{text-wrap:pretty;overflow-wrap:anywhere}
.lede{font-size:clamp(1.06rem,1.8vw,1.28rem);line-height:1.58;color:var(--muted);max-width:58ch}
.on-dark .lede{color:var(--muted-light)}
.sec--coral .lede{color:#F6DCDC}

.on-wall .lede{color:var(--ink-soft)}

.ar{font-family:"Noto Kufi Arabic",system-ui,sans-serif;direction:rtl}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.73rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-deep);
}
.on-dark .eyebrow{color:var(--yellow-light)}
.eyebrow::before{content:"";width:24px;height:3px;background:currentColor;flex:none}

/* ---------- 5. SIGNATURE COMPONENT: LEBANESE STREET SIGN ---------- */
.roadsign{
  display:inline-block;position:relative;
  background:var(--blue);color:#fff;
  padding:11px 22px;border-radius:5px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.92), var(--hard);
  text-align:center;
}
.roadsign__ar,.roadsign__en{display:block}
.roadsign__ar{
  font-family:"Noto Kufi Arabic",sans-serif;direction:rtl;
  font-size:.9rem;font-weight:400;line-height:1.5;
}
.roadsign__en{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:1.1rem;letter-spacing:.05em;line-height:1.18;margin-top:2px;
}
.roadsign--lg{padding:16px 34px}
.roadsign--lg .roadsign__ar{font-size:1.15rem}
.roadsign--lg .roadsign__en{font-size:clamp(1.5rem,3.4vw,2.4rem)}
/* the little red bolt-holes real Beirut signs have */
.roadsign::before,.roadsign::after{
  content:"";position:absolute;top:7px;width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.5);
}
.roadsign::before{left:7px} .roadsign::after{right:7px}
/* Anton has no U+2192, so a text arrow falls back to a system face and sits
   below the cap line. Masking a drawn arrow puts it exactly on the caps. */
.roadsign--arrow .roadsign__en::after{
  content:"";display:inline-block;
  width:.88em;height:.42em;margin-inline-start:.3em;vertical-align:.13em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h20M16.5 1.5 22.5 6l-6 4.5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h20M16.5 1.5 22.5 6l-6 4.5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ---------- 6. PATTERN BANDS ---------- */
/* Height is cropped to the motif itself (the tile carries ~9px of dead
   space below the stems) so the ticker can butt straight up against it.
   --band-h is shared with the ticker so the two read as one stacked pair. */
:root{--band-h:79px}
.tileband{height:var(--band-h);background-image:var(--bowl);background-repeat:repeat-x;background-size:110px 88px;background-position:center top;background-color:var(--cream);display:block;margin-bottom:0}
.tileband--sm{height:60px;background-size:75px 60px}
.tilewall{height:72px;background-image:var(--cementtile);background-repeat:repeat-x;background-size:288px 72px;background-color:#F2EBDD}
@media (max-width:600px){ .tilewall{height:56px;background-size:224px 56px} }
.starband{height:96px;background-image:var(--stars);background-repeat:repeat;background-size:96px 96px;background-color:#fff}
@media (max-width:600px){ .starband{height:72px;background-size:72px 72px} }

/* ---------- 7. BUTTONS ---------- */
.btn{
  --btn-bg:var(--order-red); --btn-fg:var(--cream);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 26px;border-radius:var(--radius-pill);
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:700;font-size:1.02rem;text-decoration:none;
  box-shadow:var(--hard);
  transition:transform var(--t-base) var(--e-spring), box-shadow var(--t-base) var(--e-out), background-color var(--t-fast) linear;
  touch-action:manipulation;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);transition-duration:80ms}
.btn--yellow{--btn-bg:var(--yellow);--btn-fg:var(--ink)}
.btn--cream{--btn-bg:var(--cream);--btn-fg:var(--ink)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);box-shadow:inset 0 0 0 2.5px var(--ink)}
.btn--ghost:hover{--btn-bg:rgba(28,26,22,.07);box-shadow:inset 0 0 0 2.5px var(--ink)}
.on-dark .btn--ghost{--btn-fg:var(--cream);box-shadow:inset 0 0 0 2.5px var(--cream)}
.on-dark .btn--ghost:hover{--btn-bg:rgba(250,242,226,.12);box-shadow:inset 0 0 0 2.5px var(--cream)}
.btn--sm{min-height:46px;padding:0 18px;font-size:.94rem;box-shadow:3px 3px 0 var(--ink)}
.btn--sm:hover{box-shadow:5px 5px 0 var(--ink)}
.btn__ico{flex:none;width:18px;height:18px}

/* ---------- 8. HEADER ----------
   Text stays ink at every scroll state, so there is no light/dark
   colour swap to get wrong - only the background changes.            */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);
  display:flex;align-items:center;padding-top:env(safe-area-inset-top);
  transition:background-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.hdr__in{display:flex;align-items:center;gap:var(--s-5);width:100%}
.hdr.is-stuck{
  background:var(--cream);
  box-shadow:0 3px 0 var(--ink), 0 10px 26px rgba(28,26,22,.10);
}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand__logo{
  height:38px;width:auto;
  transition:transform var(--t-base) var(--e-spring);
}
.brand:hover .brand__logo{transform:rotate(-1.6deg) scale(1.04)}
.brand__logo--full{height:104px}
.brand--stack{margin-bottom:18px}
/* Logo on a dark ground: the cream pill text and red already read;
   only the drop shadow needs to change. */
.on-dark .brand__logo{filter:drop-shadow(4px 4px 0 rgba(0,0,0,.32))}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{
  position:relative;padding:11px 14px;border-radius:var(--radius-s);
  font-size:.95rem;font-weight:700;text-decoration:none;
  transition:background-color var(--t-fast) linear;
}
.nav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:3px;
  background:var(--coral);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--e-out);
}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.hdr__cta{margin-left:var(--s-3);flex:none}

.burger{
  display:none;width:48px;height:48px;margin-left:auto;border-radius:11px;
  place-items:center;background:var(--cream);box-shadow:3px 3px 0 var(--ink);
}
.burger span{display:block;width:22px;height:3px;background:var(--ink);border-radius:2px;transition:transform var(--t-base) var(--e-out),opacity var(--t-fast) linear}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Mobile drawer - olive wall */
.drawer{
  position:fixed;inset:0;z-index:99;display:none;
  background:var(--teal-deep);color:var(--cream);
  background-image:var(--plaster);background-blend-mode:multiply;
  padding:calc(var(--header-h) + env(safe-area-inset-top) + 20px) 0 calc(32px + env(safe-area-inset-bottom));
  opacity:0;transform:translateY(-10px);
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open{opacity:1;transform:none}
/* Scoped to the nav: an unscoped .drawer a also hit the .btn in the footer,
   stripping its padding and centring so the label spilled past the pill. */
.drawer nav a{
  display:flex;align-items:center;gap:16px;
  min-height:62px;padding:8px 0;text-decoration:none;
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:1.9rem;letter-spacing:.02em;
  border-bottom:2px solid rgba(250,242,226,.22);
}
.drawer__foot{margin-top:var(--s-6);display:grid;gap:12px}

/* ---------- 11. SECTION SHELL ---------- */
.sec{padding:clamp(60px,8vw,var(--s-10)) 0;position:relative}
.sec--cream2{background:var(--cream-2)}
.sec--wall{background:var(--wall)}
.sec--teal-deep{background:var(--teal-deep);color:var(--cream)}
.sec--coral{background:var(--order-red);color:var(--cream)}
.sec--textured::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--plaster);opacity:.26;mix-blend-mode:multiply;
}
.sec--textured>*{position:relative;z-index:1}
.sec__head{max-width:62ch;margin-bottom:clamp(34px,4.5vw,var(--s-8))}
.sec__head h2{margin:var(--s-3) 0 var(--s-4)}
.sec__head--split{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-6);align-items:center}
.sec__head--sign{display:flex;flex-wrap:wrap;gap:var(--s-5);align-items:center;margin-bottom:clamp(34px,4.5vw,var(--s-8))}

.num{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:.86rem;letter-spacing:.16em;color:var(--teal-deep);
  font-variant-numeric:tabular-nums;
}
.on-dark .num{color:var(--yellow-light)}
.sec--coral.on-dark .num{color:var(--cream)}  /* yellow-light on #BD0000 is only 4.21:1 */

/* ---------- 19. FOOTER ---------- */
.ftr{background:var(--teal-deep);color:var(--cream);position:relative;overflow:hidden}
.ftr__body{padding:clamp(52px,6vw,84px) 0 calc(28px + env(safe-area-inset-bottom))}
.ftr::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--plaster);opacity:.24;mix-blend-mode:multiply;
}
.ftr .wrap{position:relative;z-index:1}
.ftr__ar{
  position:absolute;left:50%;bottom:-3vw;transform:translateX(-50%);pointer-events:none;z-index:0;
  font-family:"Rakkas",serif;font-size:clamp(6rem,18vw,16rem);line-height:.82;
  color:var(--cream);opacity:.07;white-space:nowrap;
}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:var(--s-6)}
.ftr h3{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:.9rem;letter-spacing:.15em;color:var(--yellow-light);margin-bottom:var(--s-4);
}
.ftr ul{list-style:none;padding:0;display:grid;gap:10px}
.ftr ul a{display:inline-flex;align-items:center;min-height:26px;font-size:.94rem;color:var(--muted-light);text-decoration:none;transition:color var(--t-fast) linear}
.ftr ul a:hover{color:var(--cream)}
.ftr__bar{
  margin-top:var(--s-8);padding-top:var(--s-5);border-top:2px solid rgba(250,242,226,.2);
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;
  font-size:.84rem;color:var(--muted-light);
}
.postage{
  width:112px;height:auto;flex:none;
  transform:rotate(-6deg);
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.30));
}
.ftr__seal{display:flex;align-items:center;gap:18px;margin-top:26px}
.ftr__seal p{font-size:.8rem;color:var(--muted-teal);max-width:20ch;line-height:1.5}
.social{display:flex;gap:9px}
.social a{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;background:var(--cream);color:var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.45);transition:transform var(--t-base) var(--e-spring),background-color var(--t-fast) linear}
.social a:hover{transform:translate(-2px,-2px);background:var(--yellow)}
.social svg{width:20px;height:20px}

/* Sticky mobile order bar */
.orderbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  padding:11px clamp(16px,4vw,20px) calc(11px + env(safe-area-inset-bottom));
  background:var(--cream);border-top:3px solid var(--ink);
  transform:translateY(115%);transition:transform var(--t-base) var(--e-out);
}
.orderbar.is-on{transform:none}
.orderbar__in{display:flex;gap:10px}

/* ---------- 20. SCROLL REVEAL ---------- */
[data-rv]{opacity:0;transform:translateY(20px);
  transition:opacity 640ms var(--e-out),transform 640ms var(--e-out);
  transition-delay:calc(var(--i,0) * 65ms);}
[data-rv].in{opacity:1;transform:none}
.no-js [data-rv]{opacity:1;transform:none}
/* Stamps land with a thump */
[data-rv] .stamp,[data-rv].stamp{transition:transform 520ms var(--e-spring),opacity 380ms linear;transition-delay:calc(var(--i,0) * 65ms + 160ms)}
[data-rv]:not(.in) .stamp,[data-rv].stamp:not(.in){transform:rotate(-13deg) scale(1.5);opacity:0}
[data-rv].in .stamp,[data-rv].stamp.in{transform:rotate(-13deg) scale(1);opacity:.92}

.rise{display:block;overflow:hidden}
.rise>*{transform:translateY(106%);opacity:0;
  transition:transform 880ms var(--e-out),opacity 660ms var(--e-out);
  transition-delay:calc(var(--i,0) * 92ms);}
.hero.ready .rise>*{transform:none;opacity:1}
.no-js .rise>*{transform:none;opacity:1}
.fade{opacity:0;transform:translateY(16px);
  transition:opacity 760ms var(--e-out),transform 760ms var(--e-out);
  transition-delay:calc(var(--i,0) * 92ms);}
.hero.ready .fade{opacity:1;transform:none}
.no-js .fade{opacity:1;transform:none}

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width:1120px){
  .hero__grid,.story,.visit{grid-template-columns:1fr}
  .hero__art{margin-top:var(--s-6);max-width:560px}
  .sec__head--split{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){
  .tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tab{font-size:clamp(.8rem,1.7vw,.95rem)}
}
@media (max-width:880px){
  :root{--header-h:66px}
  .nav,.hdr__cta{display:none}
  .burger{display:grid}
  .drawer{display:block}
  .daygrid{grid-template-columns:1fr;max-width:460px}
  .menugrid{grid-template-columns:1fr}
  .orderbar{display:block}
  .sec:last-of-type{padding-bottom:112px}
}
@media (max-width:600px){
  body{font-size:16px}
  .tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tab{min-height:58px;font-size:.86rem;padding:9px 10px}
  .hero__actions .btn,.drawer__foot .btn{width:100%}
  .ftr__grid{grid-template-columns:1fr;gap:var(--s-5)}
  .collage{grid-template-columns:1fr}
  .collage>*:nth-child(n){margin-top:0}
  .collage__stamp{position:static;margin:var(--s-4) auto 0}
  .hero__stamp{width:96px;top:-8px;right:-2px}
  .hero__sign{left:auto;right:-4px;bottom:-14px}
  :root{--band-h:40px}
  .tileband{background-size:44px 44px}
  .frame{padding:10px;background-size:34px 34px}
  .frame--mount{background-size:22px 22px}
}
@media (max-width:400px){ .ph__lbl{font-size:.54rem} .drawer a{font-size:1.55rem} }

/* ---------- 22. MOTION / PRINT ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  [data-rv],.rise>*,.fade{opacity:1 !important;transform:none !important}
  .reveal{height:100svh !important}
  .reveal__stage{clip-path:none !important}
  .reveal__media{transform:none !important}
  .reveal__copy{opacity:1 !important;transform:none !important}
  .reveal__cue{display:none}
  [data-rv] .stamp,[data-rv].stamp{transform:rotate(-13deg) !important;opacity:.92 !important}
  .ticker__track{animation:none;transform:none}
  /* de-tilt the collage so nothing reads as drifting */
  .frame--tilt,.frame--tilt-r,.collage>*{transform:none !important}
}
@media print{
  .hdr,.orderbar,.drawer,.ticker,.ph,.stamp{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .sec--teal-deep,.sec--coral,.sec--wall,.ftr,.hero{background:#fff !important;color:#000 !important}
  .sec{padding:16pt 0;break-inside:avoid}
  .frame,.btn,.channel,.tv{box-shadow:none !important}
}

/* ---------- 23. ENQUIRY FORMS (sub-pages only) ---------- */
.pagehead{padding:calc(var(--header-h) + clamp(40px,6vw,84px)) 0 clamp(28px,4vw,44px)}
.pagehead .lede{margin-top:var(--s-5)}
.formwrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,4.5vw,64px);align-items:start}
@media (max-width:900px){ .formwrap{grid-template-columns:1fr} }

.form{
  background:var(--cream);border-radius:var(--radius-l);
  padding:clamp(22px,3vw,38px);box-shadow:var(--hard-lg);
}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-5)}
@media (max-width:620px){ .form__grid{grid-template-columns:1fr} }
.field{display:flex;flex-direction:column;gap:7px}
.field--wide{grid-column:1 / -1}
.field label{
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);
}
.field .req{color:var(--red);margin-inline-start:3px}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:2px solid rgba(28,26,22,.28);border-radius:var(--radius-s);
  padding:12px 13px;min-height:48px;width:100%;
  transition:border-color var(--t-fast) linear,box-shadow var(--t-fast) linear;
}
.field textarea{min-height:132px;resize:vertical;line-height:1.55}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231C1A16' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(8,122,151,.28)
}
.field input:user-invalid,.field textarea:user-invalid,.field select:user-invalid{border-color:var(--red)}
.form__note{font-size:.84rem;color:var(--muted);margin-top:var(--s-4);line-height:1.55}
.form__note a{color:var(--teal-deep);font-weight:700}
.form__actions{display:flex;flex-wrap:wrap;gap:13px;align-items:center;margin-top:var(--s-5)}

/* Live region for the submit result - never a silent failure */
.form__status{
  margin-top:var(--s-4);padding:12px 15px;border-radius:var(--radius-s);
  font-size:.92rem;line-height:1.5;display:none;
}
.form__status[data-state="ok"]{display:block;background:rgba(85,112,58,.14);color:#3C5027;box-shadow:inset 0 0 0 2px rgba(85,112,58,.4)}
.form__status[data-state="err"]{display:block;background:rgba(204,11,17,.10);color:#8E0A0E;box-shadow:inset 0 0 0 2px rgba(204,11,17,.35)}

/* Supporting column beside the form */
.aside{display:grid;gap:var(--s-5)}
.card{
  background:var(--cream);border-radius:var(--radius-m);
  padding:clamp(18px,2.4vw,26px);box-shadow:var(--hard);
}
.card h3{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:.06em;color:var(--ink);margin-bottom:10px;
}
.card p,.card li{font-size:.95rem;color:var(--muted);line-height:1.6}
.card ul{list-style:none;padding:0;display:grid;gap:9px}
.card li{display:flex;gap:10px;align-items:flex-start}
.card li::before{content:"";flex:none;width:9px;height:9px;margin-top:8px;border-radius:2px;background:var(--yellow);box-shadow:1px 1px 0 var(--ink)}
.card a{color:var(--teal-deep);font-weight:700}