/*
Theme Name: HOF Flatbreads
Theme URI: https://hofflatbreads.com/
Author: Glen Tenorio
Description: Local WordPress recreation of the supplied HOF Flatbreads v2 homepage.
Version: 1.88.0
Text Domain: hof-flatbreads
*/

/* ============================================================
   TOKENS. Lifted from index.html unchanged.
   ============================================================ */
:root{
  --bg:        oklch(96.8% 0.004 80);
  --card:      oklch(99.3% 0.002 80);
  --card-sink: oklch(94.6% 0.005 80);
  --ink:       oklch(19% 0.006 60);
  --ink-2:     oklch(19% 0.006 60 / .62);
  --rule:      oklch(89% 0.004 80);
  --rule-2:    oklch(99% 0 0 / .16);

  /* Brand palette (client guide): black #070707, yellow #EFB800, red #AC0000. */
  --dark:      #070707;   /* true brand black, for dark sections */
  --dark-card: #171514;   /* raised surface for cards on black */
  --dark-rule: oklch(99% 0 0 / .14);

  /* The two logo colours, sampled from assets/logo-hof.png. */
  --flame:     #A11E23;
  --ember:     #8C191D;
  --sesame:    #EFB800;
  --sesame-ink:#B07C00;

  --f-sans:"Switzer","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Azeret Mono",ui-monospace,monospace;

  --t-h1:clamp(2.125rem,3.6vw,3.375rem);
  --t-h2:clamp(1.75rem,2.7vw,2.5rem);
  --t-h3:clamp(1.0625rem,1.25vw,1.25rem);
  --t-lead:clamp(1.0625rem,1.15vw,1.1875rem);
  --t-body:1rem;
  --t-small:0.875rem;
  --t-micro:0.6875rem;

  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --s9:96px; --s10:128px;

  --gap:var(--s4);
  --sec-gap:clamp(var(--s7),5.5vw,var(--s9));
  --margin:var(--s5);
  --container:1240px;

  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-pill:999px;
  --shadow:0 1px 2px oklch(19% .006 60 / .05), 0 var(--s3) var(--s6) oklch(19% .006 60 / .06);
  --shadow-card:0 2px 8px oklch(19% .006 60 / .10), 0 var(--s5) var(--s8) oklch(19% .006 60 / .10);
  --e:cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;padding:var(--margin);
  /* A faint dot grid on the page ground, ink at 9%, 22px pitch. Cards stay
     solid, so they read as sheets laid on it. */
  background-color:var(--bg);
  background-image:radial-gradient(oklch(19% .006 60 / .09) 1px, transparent 1.3px);
  background-size:22px 22px;
  color:var(--ink);
  font-family:var(--f-sans);font-size:var(--t-body);line-height:1.55;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
figure,blockquote,dl,dd{margin:0}
h1,h2,h3{margin:0;text-wrap:balance;font-family:var(--f-sans);letter-spacing:-.028em}
/* Sentence case, weight contrast inside one sentence. No uppercase,
   nothing above 700. This is the whole headline system. */
h1{font-size:var(--t-h1);line-height:1.02;font-weight:400}
h1 strong{font-weight:700}
h2{font-size:var(--t-h2);line-height:1.08;font-weight:400}
h2 strong{font-weight:700}
h3{font-size:var(--t-h3);line-height:1.25;font-weight:600;letter-spacing:-.018em}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
table{border-collapse:collapse}
::selection{background:var(--flame);color:oklch(99% 0 0)}

:focus{outline:none}
:focus-visible{outline:2px solid var(--flame);outline-offset:3px;border-radius:3px}
.on-dark :focus-visible{outline-color:oklch(99% 0 0)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--card);padding:var(--s3) var(--s5)}
.skip:focus{left:0}

.shell{max-width:var(--container);margin-inline:auto}
.pad{padding:clamp(var(--s6),3.4vw,var(--s8))}

/* the one panel */
.card{background:var(--card);border-radius:var(--r-xl);overflow:hidden}
.card--line{border:1px solid var(--rule)}
.card--sink{background:var(--card-sink)}
.on-dark{background:var(--dark);color:var(--card)}

.lift{transition:transform .35s var(--e),box-shadow .35s var(--e)}
.lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}

/* Numbered / labelled micro type. Every section label gets a 6px red
   mark in front of it: the accent repeating small enough to become a
   rhythm, never large enough to become a colour scheme. */
.eyebrow{
  display:inline-block;
  font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.eyebrow::before{
  content:"";display:inline-block;
  width:6px;height:6px;border-radius:50%;
  margin-right:var(--s2);vertical-align:.08em;
  background:var(--sesame);
}
.on-dark .eyebrow{color:oklch(99% 0 0 / .62)}
.on-dark .eyebrow::before{background:var(--sesame)}
.num{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.06em;color:var(--ink-2)}

.sec{margin-top:var(--sec-gap)}
/* Shared section header: label, headline, and an optional line of
   supporting text set to the right on wide screens. */
.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s6);flex-wrap:wrap;margin:0 var(--s5) var(--s6)}
.sec__head h2{margin-top:var(--s3);max-width:20ch}
.sec__head p{font-size:var(--t-small);color:var(--ink-2);max-width:40ch}
.on-dark .sec__head p{color:oklch(99% 0 0 / .68)}

/* the one image frame */
.shot{margin:0;position:relative;overflow:hidden;background:var(--card-sink)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot--missing{background:repeating-linear-gradient(-38deg,oklch(93% .006 80) 0 16px,oklch(90% .008 80) 16px 32px)}
.shot--missing img{display:none}

/* The cut-out frame. The supplied photography has no background, so it
   sits on a pale sunken panel with a soft pool of light under it rather
   than being cropped into a rectangle. */
.cut{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 62% 46% at 50% 62%, oklch(91% .012 80 / .9) 0%, transparent 70%),
    var(--card-sink);
  overflow:hidden;
}
.cut img{
  width:86%;max-height:86%;object-fit:contain;
  filter:drop-shadow(0 14px 18px oklch(19% .006 60 / .22));
  transition:transform .45s var(--e);
}

/* ============================================================
   BUTTONS. Primary is a logo-red pill; secondary is outlined.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:46px;padding:0 var(--s5);
  background:var(--flame);color:oklch(99% 0 0);
  border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--f-sans);font-size:var(--t-small);font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:opacity .25s var(--e),translate .25s var(--e),background .25s var(--e);
}
/* Hovers are a shade, not a colour change: red deepens to ember, outlines
   take a faint fill, and everything lifts 1px. */
.btn:hover{background:var(--ember);opacity:1;translate:0 -1px}
.btn:focus-visible{outline-color:var(--ink)}
.on-dark .btn:focus-visible{outline-color:oklch(99% 0 0)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--line:hover{background:var(--card);border-color:var(--ink)}
.on-dark .btn--line{color:var(--card);border-color:oklch(99% 0 0 / .34)}
.on-dark .btn--line:hover{background:oklch(99% 0 0 / .08);border-color:oklch(99% 0 0 / .6)}
/* The pale button sits on dark bands, so its label is the safest place
   on the page for red type: --ember on near-white is 9:1. */
.btn--pale{background:var(--card);color:var(--ember)}
/* Yellow secondary. Near-black type on the brand yellow sits at about 11:1,
   which is the one way the yellow can carry text. Red stays the order action. */
.btn--sesame{background:var(--sesame);color:var(--dark);border-color:transparent}
.btn--sesame:hover{background:#F5C520;color:var(--dark)}
/* On black the yellow button sits filled at rest and hollows out on hover:
   the fill drops away, leaving a yellow rule and yellow type (about 11:1 on
   the brand black). */
.on-dark .btn--sesame:hover{background:transparent;color:var(--sesame);border-color:var(--sesame)}
.on-dark .btn--sesame:focus-visible{outline-color:var(--sesame)}
.btn--sesame:focus-visible{outline-color:var(--dark)}
/* ONE CONTROL SIZE (1.71.0): every button on the site is 46px tall, text
   buttons and round icon buttons alike (.btn, .item__add, .rail__btn,
   .nav__tel, the mobile sticky bar). .btn--sm is no longer used anywhere;
   it stays defined so an old paste cannot break, but do not reach for it. */
.btn--sm{min-height:38px;padding:0 var(--s4);font-size:var(--t-small)}
.cta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}

.tag{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:var(--s1) var(--s3);border-radius:var(--r-pill);
  border:1px solid var(--rule);
  font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  white-space:nowrap;line-height:1.8;
}
.on-dark .tag{border-color:oklch(99% 0 0 / .28);color:oklch(99% 0 0 / .8)}

/* ============================================================
   NAV. Inside its own rounded container.
   ============================================================ */
.nav{
  display:flex;align-items:center;gap:var(--s5);
  padding:var(--s3) var(--s3) var(--s3) var(--s6);
  margin-bottom:var(--gap);
  position:sticky;top:var(--margin);z-index:100;
  /* Glass: a thin white wash over an 18px blur, with a 1px pale edge and a
     top highlight so the sheet reads as a surface. It firms up a little once
     stuck so the links stay readable over the black panels. */
  background:oklch(99.3% .002 80 / .58);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid oklch(99% 0 0 / .7);
  border-radius:var(--r-pill);
  overflow:visible;
  box-shadow:inset 0 1px 0 oklch(99% 0 0 / .8), 0 8px 24px oklch(19% .006 60 / .06);
  transition:box-shadow .3s var(--e),background .3s var(--e);
}
.nav.is-stuck{
  background:oklch(99.3% .002 80 / .72);
  box-shadow:inset 0 1px 0 oklch(99% 0 0 / .8), 0 1px 2px oklch(19% .006 60 / .05), 0 8px 24px oklch(19% .006 60 / .08);
}
/* Browsers without backdrop-filter get a near-solid bar instead of a see-through one. */
@supports not (backdrop-filter:blur(1px)){
  .nav,.nav.is-stuck{background:oklch(99.3% .002 80 / .95)}
}
.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo__mark{height:38px;width:auto;display:block}
.nav__links{display:flex;gap:var(--s2);margin-left:auto;align-items:center}
/* Each link is a pill that fills yellow on hover, so the state is a shape,
   not just a shade of grey. */
.nav__links a{font-size:var(--t-small);font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:var(--r-pill);transition:background .2s var(--e),color .2s var(--e)}
.nav__links a:hover,.nav__links a:focus-visible{background:rgba(239,184,0,.28);color:var(--ink)}
.nav__tel{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);color:var(--ink);flex:0 0 auto}
.nav__tel:hover{background:var(--card-sink)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--rule);border-radius:50%;align-items:center;justify-content:center;flex:0 0 auto}
.burger:hover{background:var(--card-sink)}

/* Mobile panel, dropped out of the nav pill. */
.drawer{
  display:none;position:fixed;inset:var(--margin);z-index:200;
  background:var(--card);border-radius:var(--r-xl);
  padding:var(--s5);flex-direction:column;
  box-shadow:var(--shadow-card);
}
.drawer.is-open{display:flex}
.drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s6)}
.drawer__top img{height:38px;width:auto}
.drawer a.drawer__link{
  display:block;padding:var(--s4) 0;border-bottom:1px solid var(--rule);
  font-size:1.375rem;font-weight:500;letter-spacing:-.022em;
}
.drawer a.drawer__link:hover{color:var(--ember)}
.drawer__foot{margin-top:auto;padding-top:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}

/* ============================================================
   1. HERO. The reference's split: copy left, the product turning
   inside a ring of type on the right.
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  align-items:center;gap:var(--s6);
  padding:clamp(var(--s6),3.6vw,var(--s8));
}
.hero__copy{max-width:min(100%,560px)}
/* The hero used to override the section mark into a 28px bar. It was the
   only label on the page that did, which broke the repeating rhythm the
   dot is there to create. It now uses the same 6px dot as every other
   section label. */
.hero h1{margin-top:var(--s5)}
/* Each clause gets its own measure. 14ch lands "Flatbreads off / the
   stone." in two lines; the tail is left unconstrained so it stays on
   one. A shared measure could not do both at once. */
.hero h1 strong{display:block;max-width:14ch}
.hero h1 .h1-tail{display:block;font-weight:400}
.hero__lead{margin-top:var(--s5);font-size:var(--t-lead);color:var(--ink-2);max-width:40ch}
.hero .cta{margin-top:var(--s6)}

/* When, where and how, on one hairline. The rating is not repeated
   here: it is on the chip over the photograph, where it is a link. */
.hero__at{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s2) var(--s3);
  margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
}
.hero__at li{display:inline-flex;align-items:center;gap:var(--s2)}
.hero__at li:not(:last-child)::after{
  content:"";width:3px;height:3px;border-radius:50%;
  background:var(--rule);margin-left:var(--s3);
}
.hero__at [data-status-line]{color:var(--ink);font-weight:500}

.hero__stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:min(58vh,540px)}
.hero__stage::before{
  content:"";position:absolute;z-index:0;
  width:min(78%,452px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, oklch(91% .012 80 / .92) 0%, oklch(96.8% .004 80 / 0) 68%);
}
.hero__orbit{position:absolute;width:min(100%,520px);height:auto;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  .hero__orbit{animation:spin 72s linear infinite reverse}
  .hero__disc{animation:spin 34s linear infinite}
}
.hero__disc{position:relative;z-index:1;transform-origin:center;filter:drop-shadow(0 26px 34px oklch(19% .006 60 / .24))}
.hero__disc img{width:min(26vw,340px)}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* floating cards: thumbnail plus two lines of tiny text */
.chip{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2);
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);max-width:244px;
  transition:translate .3s var(--e);
}
.chip:hover{translate:0 -2px}
.chip .shot{width:56px;height:56px;border-radius:var(--r-md);flex:0 0 auto}
.chip b{display:block;font-size:var(--t-small);font-weight:600;letter-spacing:-.01em}
.chip span{display:block;font-size:var(--t-micro);line-height:1.4;color:var(--ink-2);margin-top:2px}
.chip__txt{padding-right:var(--s2)}
.chip--rating b{display:flex;align-items:center;gap:var(--s2);font-variant-numeric:tabular-nums}
.chip--rating .stars{display:flex;gap:3px;padding-block:2px}
.chip--rating .stars svg{width:13px;height:13px;display:block;fill:var(--sesame-ink)}
.chip--price{max-width:none}
.chip--price b{font-size:1.125rem;letter-spacing:-.025em}

.hero__float{position:absolute;z-index:3}
.hero__float--a{left:0;bottom:5%;z-index:4}
.hero__float--b{right:0;bottom:23%;z-index:4}
@media (prefers-reduced-motion:no-preference){
  .hero__float{animation:drift 7s ease-in-out infinite}
  .hero__float--b{animation-duration:8.6s;animation-delay:-3.1s}
}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* The live dot. Neutral until the script has checked the hours. */
.dot{width:7px;height:7px;border-radius:50%;background:var(--ink-2);flex:0 0 auto;position:relative;display:inline-block}
.is-open .dot{background:var(--flame)}
.is-open .dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--flame);
  animation:pulse 2.6s var(--e) infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.8);opacity:0}}
/* On black the live dot goes yellow; on the light sections it stays red,
   where yellow would vanish into the page. */
.on-dark .is-open .dot,.on-dark .is-open .dot::after{background:var(--sesame)}

/* ============================================================
   2. MISSION. Label far left, copy right.
   ============================================================ */
/* index.html hung this label out in a far-left column, which worked
   there because a 9fr column of copy sat beside it. Here a third column
   for the photograph squeezed the middle, and the label column ended up
   twice the width of the label itself, so "What we do" floated in a
   void with nothing to align to.
   It sits above the statement instead, which is what every other
   section on this page already does. Two columns on one top line: the
   statement, and the only photograph of the actual shop in the set. */
.mission{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(var(--s5),2.6vw,var(--s7));
  align-items:center;
  padding-block:clamp(var(--s6),3.2vw,var(--s7));
}
/* The largest body type on the page. It is the one block that is a
   statement rather than a label on something else, so it is set to be
   read rather than scanned. */
.mission p{
  margin-top:var(--s4);
  font-size:clamp(1.25rem,2vw,1.75rem);
  line-height:1.3;letter-spacing:-.022em;max-width:28ch;
}
.mission .cta{margin-top:var(--s6)}
.mission__shot{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/3;background:var(--card-sink);
}
.mission__shot img{width:100%;height:100%;object-fit:cover}
.mission__cap{
  position:absolute;left:var(--s3);bottom:var(--s3);
  padding:var(--s2) var(--s3);border-radius:var(--r-pill);
  background:oklch(99.3% .002 80 / .92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.08em;text-transform:uppercase;
}

/* ============================================================
   3. ITEMS. Product cards on light ground.
   ============================================================ */
/* The photography is cut out on transparent ground, so a rectangular
   frame is the one thing it does not need. The bread sits ON the page
   and overhangs the top edge of the card instead, which is also what
   makes six differently-framed shots read as one set: they are all
   floating objects at a common height, not six different crops.
   The row gap and the leading padding are what make room for it. */
.items{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(var(--s9) + var(--s4)) var(--gap);
  padding-top:calc(var(--s8) + var(--s4));
}
.item{
  position:relative;                   /* containing block for the sr-only text:
                                          without it those absolute spans escape
                                          the carousel's clip and widen the page,
                                          which pushed the mobile sticky bar past
                                          the screen edge */
  display:flex;flex-direction:column;color:inherit;
  overflow:visible;                    /* .card clips, and the food must not be */
  padding:0 var(--s5) var(--s5);
}
.item__fig{
  position:relative;height:186px;margin-top:-84px;
  display:flex;align-items:flex-end;justify-content:center;
}
.item__fig img{
  position:relative;z-index:1;
  width:auto;max-width:88%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 20px oklch(19% .006 60 / .26));
  transition:transform .45s var(--e);
}
/* Contact shadow, so the bread is resting on the card rather than
   hovering somewhere above it. */
.item__fig::after{
  content:"";position:absolute;z-index:0;left:50%;bottom:2px;translate:-50% 0;
  width:64%;height:22px;border-radius:50%;
  background:radial-gradient(ellipse at center, oklch(19% .006 60 / .16) 0%, transparent 72%);
}
.item:hover .item__fig img{transform:translateY(-6px) scale(1.03)}
.item__body{display:flex;flex-direction:column;flex:1;padding:var(--s5) 0 0}
.item__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
/* Card text needs air: the title can wrap to two lines, so give it real
   leading, and let the description breathe rather than sit 2px under it. */
.item__head h3{line-height:1.3}
.item__body p{font-size:var(--t-small);line-height:1.55;color:var(--ink-2);margin-top:var(--s2);margin-bottom:var(--s5)}
.item__buy{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:auto;padding-top:calc(var(--s3) + var(--s1));border-top:1px solid var(--rule)}
.item__price{font-size:1.125rem;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.item__add{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 var(--s4);border:1px solid var(--rule);border-radius:var(--r-pill);font-size:var(--t-small);font-weight:600;transition:background .25s var(--e),color .25s var(--e),border-color .25s var(--e)}
/* Add fills red on hover. One of the three red fills on the page, and
   it is on the control that takes money. */
.item:hover .item__add{background:var(--sesame);color:var(--dark);border-color:var(--sesame)}
/* The one tile with no photograph. The dish is real and on the live
   menu; the picture does not exist in the supplied set, so the frame
   carries the mark rather than a stand-in shot of another dessert. */
.item--mark .item__fig::after{
  content:"";position:absolute;z-index:0;left:50%;bottom:0;translate:-50% 0;
  width:152px;height:152px;border-radius:50%;background:var(--ink);
}
.item--mark .item__fig img{max-width:126px;filter:none}
.items__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);margin-top:var(--s5);flex-wrap:wrap;padding-inline:var(--s5)}
.items__foot p{font-size:var(--t-small);color:var(--ink-2);max-width:52ch}

/* ============================================================
   4. RAIL ARROWS. Prev/next buttons shared by the menu carousel
   ============================================================ */
.rail__nav{display:flex;gap:var(--s2)}
.rail__btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);
  color:var(--ink);display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--e),opacity .2s var(--e),border-color .2s var(--e);
}
.rail__btn:hover:not([disabled]){background:var(--sesame);color:var(--dark);border-color:var(--sesame)}
.rail__btn[disabled]{opacity:.28;cursor:not-allowed}

/* ============================================================
   5. SPLIT FEATURE (featured bake, catering, careers)
   ============================================================ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.split__fig{min-height:400px;position:relative}
.split__fig .shot,.split__fig .cut{position:absolute;inset:0}
.split__body{display:flex;flex-direction:column;justify-content:center}
.split__body h2{margin-top:var(--s4)}
.split__body > p{margin-top:var(--s5);color:var(--ink-2);max-width:44ch}
.on-dark .split__body > p{color:oklch(99% 0 0 / .72)}
.split__body .cta{margin-top:var(--s6)}
.split__tags{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}
/* Catering occasion callouts: one compact scannable row of the gatherings
   HOF caters, sitting between the intro paragraph and the food list. Shares
   the pill language of .tag so it reads as part of the same system. */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   CATERING SPREAD. A composed overhead arrangement, not a
   photograph: every item is one of the site's own product
   cutouts, lit and shadowed in CSS. It fills the right
   column of the split edge to edge so it matches the section
   container. Stands in until HOF supply the wide complete
   spread shot the brief asks for. Deliberately reads as a
   styled arrangement rather than a real tray, so it never
   claims to be food the customer will receive.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.split__fig .spread{position:absolute;inset:0}
.spread{
  margin:0;overflow:hidden;isolation:isolate;
  background:
    /* Faint dot grid, the same language as the page ground, so the panel reads
       as part of the site rather than a pasted-in photograph. */
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0/22px 22px,
    /* One warm lamp, high and off centre, so the light has a direction. */
    radial-gradient(46% 40% at 38% 24%, rgba(239,184,0,.24) 0%, rgba(239,184,0,.06) 54%, transparent 78%),
    /* The table: warm near-black falling off to true brand black at the edges. */
    radial-gradient(125% 95% at 40% 20%, #4b3517 0%, #2a1e0f 34%, #150f09 64%, #0a0807 100%),
    var(--dark);
}
/* A pool of shadow across the lower middle so the items sit ON a surface
   instead of floating in the dark. Under the food, above the ground. */
.spread::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(58% 30% at 48% 74%, rgba(0,0,0,.5) 0%, transparent 72%);
}
/* Vignette over the food. This is the part that reads as cinematic. */
.spread::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(86% 82% at 44% 38%, transparent 32%, rgba(7,7,7,.55) 86%, rgba(7,7,7,.8) 100%);
}
/* The stage the items are positioned against. It fills the column on desktop,
   and when the layout stacks it becomes a centred panel of the SAME 62:89
   proportion, so one set of positions serves every width. Without this the
   stacked column is a short wide strip and the same percentages produce a
   crowded, overlapping mess. */
.spread__stage{position:absolute;inset:0}

/* Sized by HEIGHT, not width. The vertical extent of every item is then a
   fixed percentage of the column, so the arrangement can never run off the top
   or bottom however tall the copy beside it grows. The horizontal extent only
   ever shrinks as the column narrows, so nothing clips at the sides either. */
.spread__i{
  position:absolute;z-index:1;width:auto;
  filter:drop-shadow(16px 22px 20px rgba(0,0,0,.6)) saturate(1.06) contrast(1.05);
}
/* Four bands down the column, alternating left and right so the eye zig-zags
   the way it would across a real table. Every item sits fully inside the
   container. Rotations stay under 9 degrees because rotation widens a bounding
   box. These are the PRODUCT cutouts, not the cat-*.webp category art: that art
   is cropped hard against its own file edges (cat-shawarma has zero transparent
   padding on three sides) so it always read as cut off, whatever the position. */
.spread__i--zaatar{height:21%;left:3%; top:2%; transform:rotate(8deg)}
.spread__i--shaw  {height:24%;right:2%;top:3%; transform:rotate(-6deg)}
.spread__i--flat  {height:29%;left:4%; top:25%;transform:rotate(-5deg)}
.spread__i--dip   {height:23%;right:2%;top:44%;transform:rotate(7deg)}
.spread__i--salad {height:22%;left:4%; top:62%;transform:rotate(-6deg)}
.spread__i--sweet {height:24%;right:2%;top:73%;transform:rotate(5deg)}

/* Stacked below 900px the theme gives .split__fig a 280px strip, whose aspect
   ratio would swing from about 3:1 on a tablet to 4:3 on a phone. No single
   arrangement fills both, so the figure gets a height that keeps it roughly as
   portrait as the desktop column, and the items grow to suit. Scoped to
   --spread so the featured bake figure keeps its own 280px strip. */
@media (max-width:900px){
  /* Two classes, because the theme's own .split__fig{min-height:280px} for this
     breakpoint is declared later in this file at equal specificity. */
  .split__fig.split__fig--spread{min-height:min(520px,118vw)}
  /* Centre a 62:89 stage instead of rescaling every item: the arrangement then
     reads exactly as it does on desktop, just smaller. The dark ground still
     runs the full width of the column behind it. */
  .spread__stage{
    inset:0 auto;left:50%;transform:translateX(-50%);
    height:100%;width:auto;aspect-ratio:62/89;
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   CATERING PAGE. No catering photography is approved yet,
   so this page is carried by type, the brand colours and
   the dot grid rather than images. Everything here is
   additive: it does not touch the legal content pages.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.page__lead{margin-top:var(--s5);font-size:var(--t-lead);line-height:1.5;max-width:54ch}
.on-dark .page__lead{color:oklch(99% 0 0 / .78)}
.page__head .cta{margin-top:var(--s7)}
.page__head .bread__facts{grid-template-columns:repeat(4,minmax(0,1fr))}
/* The generic page h1 is clamped to 18ch for short legal titles. The catering
   headline is a sentence, so it gets room to breathe. Two classes, because
   .page__head h1 is declared later in this file at the same specificity. */
.page__head.page__head--wide h1{max-width:34ch}

/* Tiles carry a mono numeral instead of the icon box the homepage used, since
   no iconography is approved for this page either. */
.tile .num{display:block;color:var(--flame);letter-spacing:.14em;text-transform:uppercase}

/* Package cards side by side, inclusions as a rule-separated list. */
.packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.pack{padding:clamp(var(--s5),2.6vw,var(--s7));display:flex;flex-direction:column}
.pack h3{margin-top:var(--s3)}
.pack > p{margin-top:var(--s2);font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}
.pack ul{list-style:none;margin:var(--s5) 0 0;padding:0;border-top:1px solid var(--rule)}
.pack ul li{padding:var(--s3) 0;border-bottom:1px solid var(--rule);font-size:var(--t-small);line-height:1.45}
.pack ul li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--flame);margin-right:var(--s3);vertical-align:.14em}
.packs__note{margin:var(--s5) var(--s5) 0;font-size:var(--t-small);line-height:1.5;color:var(--ink-2);max-width:64ch}

/* Numbered process. The oversized mono numeral does the work a photo would. */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.steps li{padding-top:var(--s4);border-top:2px solid var(--sesame)}
.steps b{display:block;font-family:var(--f-mono);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1;font-weight:500;color:var(--flame)}
.steps h3{margin-top:var(--s4)}
.steps p{margin-top:var(--s2);font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}

/* The closing band has no cutout art here, so the right half holds the contact
   details as type instead of sitting empty. */
.closing--noart{min-height:0}
/* Without art the two halves would drift apart across an empty middle, so the
   copy is allowed to run wider and the details column is ruled off. */
.closing--noart .closing__copy{max-width:52ch}
.closing--noart .closing__reach{border-left:1px solid rgba(7,7,7,.22);padding-left:clamp(var(--s5),3vw,var(--s7))}
@media (max-width:820px){
  .closing--noart .closing__reach{border-left:0;padding-left:0;padding-top:var(--s5);border-top:1px solid rgba(7,7,7,.22);width:100%}
}
.closing__reach{position:relative;z-index:1;min-width:min(100%,240px)}
.closing__reach div{margin-top:var(--s4)}
.closing__reach dt{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.closing__reach dd{margin:var(--s1) 0 0;font-size:var(--t-small);line-height:1.45}
.closing__reach a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

@media (max-width:960px){
  .packs{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page__head .bread__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .steps{grid-template-columns:minmax(0,1fr)}
}

/* Keeps a hyphenated phrase from breaking across lines mid-word. */
.nowrap{white-space:nowrap}
.occasions{
  list-style:none;margin:var(--s5) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s2);
}
/* A faint outline with 62% ink type at 11px was close to invisible on the cream
   card. These now use the same yellow-fill-plus-ink-type language as the nav
   hover: a tinted fill instead of an outline, solid ink rather than 62% alpha,
   and 12px with a little more weight. Yellow never carries the text here, it
   only fills behind near-black type, which is the contrast rule this theme
   follows everywhere. */
.occasions li{
  display:inline-flex;align-items:center;
  padding:var(--s2) var(--s3);border-radius:var(--r-pill);
  background:rgba(239,184,0,.26);
  border:1px solid rgba(239,184,0,.55);
  font-family:var(--f-mono);font-size:.75rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;line-height:1.6;
}
.on-dark .occasions li{
  background:rgba(239,184,0,.2);border-color:rgba(239,184,0,.45);
  color:oklch(99% 0 0 / .94);
}
.occasions + p{margin-top:var(--s4)}
#family-friends-meals .cta{flex-wrap:wrap}
.dl{margin-top:var(--s6);border-top:1px solid var(--rule)}
.on-dark .dl{border-color:var(--rule-2)}
.dl__row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.on-dark .dl__row{border-color:var(--rule-2)}
.dl__row dt{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.on-dark .dl__row dt{color:oklch(99% 0 0 / .58)}
.dl__row dd{font-size:var(--t-small)}
/* The featured bake sits on a sunken panel, not on a colour field. */
.feature__fig{background:
  radial-gradient(ellipse 58% 44% at 50% 58%, oklch(91% .012 80 / .95) 0%, transparent 72%),
  var(--card-sink)}

/* ============================================================
   ORDER YOUR WAY. Direct is a full card with the buttons in it. The two
   apps are ROWS inside one card beside it, not two tall tiles: as tiles
   they were a name and a link floating in a lot of nothing, and the
   "Also on" label had no card to belong to.

   Each row carries its platform's own brand colour, which is what makes
   them recognisable at a glance. The names are set in Switzer, not in
   either company's typeface: the official Uber Eats mark is a wordmark
   in Uber Move and DoorDash's is drawn, so redrawing them by hand would
   produce something visibly wrong. The row is built so an official SVG
   badge drops into .app__mark whenever the brand kits are to hand.
   ============================================================ */
/* Two lines, not three. A measure alone cannot do it: at 32ch the line
   breaks after "however you", which is the wrong place. Giving the
   emphasised clause its own line puts the break after the comma, where
   the sentence already breaks. Same trick as the hero h1. */
#order-your-way .sec__head h2{max-width:34ch}
#order-your-way .sec__head h2 strong{display:block}

.channels{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap);margin-bottom:var(--s6)}
.channel--direct{padding:clamp(var(--s5),2.6vw,var(--s7));display:flex;flex-direction:column;justify-content:center}
.channel--direct h3{margin-top:var(--s3);font-size:var(--t-h3)}
.channel--direct p{margin-top:var(--s3);color:var(--ink-2);max-width:44ch}
.channel--direct .cta{margin-top:var(--s6)}
/* The client's own counter photo as a backdrop. The URL arrives as the
   --direct-photo custom property, set inline by front-page.php from the
   media-library upload with slug hof-three-flatbreads, so the client can
   swap it by uploading a new file of that name. Multiplied into the yellow
   at 36% under a scrim that stays solid behind the copy and thins to the
   right. With no upload the card is plain yellow. */
.channel--direct.on-sesame{position:relative;isolation:isolate}
.channel--direct.on-sesame > *{position:relative;z-index:1}
.channel--direct.on-sesame::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--direct-photo,none) 70% 62% / cover no-repeat;
  filter:grayscale(.3) contrast(1.05);mix-blend-mode:multiply;opacity:.36;
}
.channel--direct.on-sesame::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg, var(--sesame) 0%, var(--sesame) 38%, rgba(239,184,0,.3) 100%);
}

.channel--apps{padding:clamp(var(--s5),2.2vw,var(--s6));display:flex;flex-direction:column}
.channel--apps > .num{display:block;margin-bottom:var(--s4)}
.app{
  position:relative;
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s4) var(--s3);margin-inline:calc(var(--s3) * -1);
  border-radius:var(--r-md);
  color:inherit;transition:background .25s var(--e);
}
/* A border-top on a 14px-radius box curves up at both ends, which read as
   a stray hairline rather than a divider. Draw it as a straight rule
   instead, inset to line up with the text above and below it. */
.app + .app::before{
  content:"";position:absolute;top:0;left:var(--s3);right:var(--s3);
  height:1px;background:var(--rule);
}
/* The brand colour is the identifier, so it is on the swatch and on the
   name, and the row washes very faintly toward it on hover. */
.app__mark{
  width:44px;height:44px;flex:0 0 auto;border-radius:var(--r-md);
  background:var(--brand);display:flex;align-items:center;justify-content:center;
}
.app__mark svg{width:26px;height:26px;fill:#fff}
.app__txt{flex:1;min-width:0}
.app b{display:block;font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;color:var(--brand-ink)}
.app span{display:block;margin-top:1px;font-size:var(--t-small);color:var(--ink-2)}
.app i{
  font-style:normal;flex:0 0 auto;color:var(--ink-2);
  transition:transform .25s var(--e),color .25s var(--e);
}
.app:hover{background:color-mix(in oklab, var(--brand) 7%, transparent)}
.app:hover i{transform:translateX(3px);color:var(--brand)}
/* Each platform gets two values from its own palette, because one will
   not do both jobs. The swatch takes the colour at close to full strength
   (a white glyph on it only needs 3:1); the NAME takes it a few steps
   darker, because the brand colours as published are 2.3:1 and 3.6:1 on
   this card and would fail AA as 17px text.
     swatch  white glyph on it   name        on the card
     #06A050        3.4:1        #067A34        5.3:1
     #EB3A00        4.1:1        #D02F00        5.0:1  */
.app--ubereats{--brand:#06A050;--brand-ink:#067A34}
.app--doordash{--brand:#EB3A00;--brand-ink:#D02F00}
.app--grubhub{--brand:#FF8000;--brand-ink:#B85C00}
.channels__note{
  margin:0 var(--s5) var(--s5);
  font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}

/* ============================================================
   6. TILES
   ============================================================ */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.tile{padding:var(--s5)}
.tile__ico{width:38px;height:38px;border-radius:var(--r-md);background:var(--card-sink);display:flex;align-items:center;justify-content:center;color:var(--ember)}
.tile h3{margin-top:var(--s4)}
.tile p{font-size:var(--t-small);line-height:1.45;color:var(--ink-2);margin-top:var(--s2)}

/* ============================================================
   7. THE BREAD. The one dark band, and the only full-width
   photographic moment on the page.
   ============================================================ */
.bread{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  align-items:center;gap:var(--s6);
  padding:clamp(var(--s6),3.6vw,var(--s8));
  background:var(--dark);color:var(--card);
}
.bread h2{margin-top:var(--s3);max-width:18ch}
.bread h2 strong{color:var(--sesame)}
.bread > div > p{margin-top:var(--s5);font-size:var(--t-lead);color:oklch(99% 0 0 / .78);max-width:42ch}
.bread__facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5);margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid oklch(99% 0 0 / .22);
}
.bread__facts b{
  display:block;font-family:var(--f-mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sesame);
}
.bread__facts span{display:block;margin-top:var(--s2);font-size:var(--t-small);line-height:1.4;color:oklch(99% 0 0 / .9)}
.bread__stage{position:relative;display:flex;justify-content:center}
.bread__stage > img{width:min(100%,440px);filter:drop-shadow(0 28px 40px oklch(0% 0 0 / .55))}
/* A quote, pulled verbatim from the reviews further down. */
.bread__quote{
  position:absolute;right:0;top:var(--s3);max-width:216px;
  background:var(--card);color:var(--ink);
  border-radius:var(--r-lg);padding:var(--s4);
  box-shadow:var(--shadow-card);
}
.bread__quote p{font-size:var(--t-small);line-height:1.45}
.bread__quote cite{display:block;margin-top:var(--s3);font-style:normal;font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(var(--s6),3.4vw,var(--s8))}
.contact__aside h2{margin-top:var(--s3)}
.contact__aside > p{margin-top:var(--s5);color:var(--ink-2);max-width:34ch}
.contact__direct{margin-top:var(--s6);border-top:1px solid var(--rule)}
.contact__direct a,.contact__direct span{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) 0;border-bottom:1px solid var(--rule);
  font-size:var(--t-small);
}
.contact__direct svg{flex:0 0 auto;color:var(--ink-2)}
.contact__direct a:hover{color:var(--ember)}
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field label{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;min-height:46px;
  border:1px solid var(--rule);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);font:inherit;font-size:var(--t-small);
  background:var(--card);color:var(--ink);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.5}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--flame);outline-offset:1px}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.form__grid .field--wide{grid-column:1 / -1}
.form__foot{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5)}
.form__foot p{font-size:var(--t-micro);color:var(--ink-2);max-width:38ch}
.form__ok{padding:var(--s7) var(--s5);text-align:center}
.form__ok p{margin-top:var(--s3);color:var(--ink-2)}

/* ============================================================
   8. SIGNUP
   ============================================================ */
.signup{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s7);align-items:center}
.signup > div > p{margin-top:var(--s5);color:var(--ink-2);max-width:42ch}
.signup__row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.signup__row input{
  flex:1;min-width:200px;min-height:46px;
  border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:0 var(--s5);font:inherit;font-size:var(--t-small);
  background:var(--card);color:var(--ink);
}
.signup__row input:focus-visible{border-color:var(--flame);outline-offset:1px}
.signup__form label{display:block;font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.signup__note{font-size:var(--t-micro);color:var(--ink-2);margin-top:var(--s3)}

/* Signup on Fluent Forms (1.85.0). The plugin stacks its groups, so the
   fieldset becomes the old .signup__row: email grows, the button sits
   beside it, and both keep the pill shape. The .careers__form skin on
   the wrapper supplies the field styling; only the LAYOUT is here.
   Below 700px it stacks, matching what .signup__row did. */
.signup__form--ff .frm-fluent-form fieldset{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3);margin:var(--s4) 0 0;padding:0;border:0}
.signup__form--ff .ff-el-group{flex:1 1 200px;margin:0}
.signup__form--ff .ff-hpsf-container{flex:0 0 0;margin:0}
.signup__form--ff .ff_submit_btn_wrapper{flex:0 0 auto;margin:0}
/* Two classes: .careers__form .ff-el-form-control is declared later at
   equal specificity, so a single-class override loses on source order. */
.signup__form--ff.careers__form .ff-el-form-control{border-radius:var(--r-pill)}
.signup__form--ff .ff-btn-submit{margin:0}
.signup__form--ff .ff-el-input--label label{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.signup__form--ff .signup__note{margin-top:var(--s3)}
@media (max-width:700px){
  .signup__form--ff .frm-fluent-form fieldset{flex-direction:column;align-items:stretch}
  .signup__form--ff .ff_submit_btn_wrapper .ff-btn-submit{width:100%}
}

/* ============================================================
   9. VISIT
   ============================================================ */
.visit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap)}
.hours{margin:var(--s5) 0}
.hours caption{text-align:left;padding-bottom:var(--s2);font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.hours th,.hours td{text-align:left;padding:var(--s1) var(--s6) var(--s1) 0;font-family:var(--f-mono);font-weight:400;font-size:var(--t-small);font-variant-numeric:tabular-nums}
/* Real embedded map. The old rule drew fake streets with gradients and
   positioned a pin over them, which looked like a placeholder nobody had
   finished. The frame fills the tile; the label sits above it as a real
   link, because the iframe swallows clicks. */
.map{position:relative;display:block;border-radius:var(--r-xl);overflow:hidden;min-height:380px;background:var(--card-sink)}
.map__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map__label{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:1;display:block;padding:var(--s3) var(--s4);background:var(--card);border-radius:var(--r-md);font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--shadow);transition:transform .25s var(--e),box-shadow .25s var(--e)}
.map__label:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.visit__lead{margin-top:var(--s5);color:var(--ink-2);max-width:52ch}
.visit .cta{margin-top:var(--s6)}
.visit h2{margin-top:var(--s3)}
.status{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;margin-top:var(--gap);padding:var(--s4) var(--s5)}
.status b{display:inline-flex;align-items:center;gap:var(--s3);font-size:var(--t-small);font-weight:600}
.status span{font-size:var(--t-small);color:var(--ink-2)}

/* ============================================================
   10. REVIEWS
   ============================================================ */
.revs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.rev{display:flex;flex-direction:column;padding:var(--s5)}
.rev blockquote{margin:var(--s3) 0 var(--s5);font-size:var(--t-lead);line-height:1.42;letter-spacing:-.015em}
.rev figcaption{
  margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}
.stars{color:var(--sesame-ink);letter-spacing:.16em;font-size:.8rem}
/* Fourth tile. Not a testimonial: the three above are verbatim from the
   live site and inventing a fourth would be inventing a customer. */
.rev--more{background:var(--flame);color:oklch(99% 0 0);transition:transform .35s var(--e)}
.rev--more:hover{transform:translateY(-3px)}
.rev--more:focus-visible{outline-color:oklch(99% 0 0)}
.rev--more .eyebrow{color:oklch(99% 0 0 / .78)}
.rev--more .eyebrow::before{background:var(--sesame)}
.rev--more b{display:block;margin-top:auto;font-size:clamp(1.375rem,1.75vw,1.625rem);font-weight:400;line-height:1.16;letter-spacing:-.022em;text-wrap:balance}
.rev--more .rev__go{
  display:flex;align-items:center;gap:var(--s2);
  margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid oklch(99% 0 0 / .32);
  font-size:var(--t-small);font-weight:600;
}
.rev--more:hover .rev__go i{transform:translateX(3px)}
.rev--more .rev__go i{font-style:normal;transition:transform .25s var(--e)}

/* ============================================================
   11. CLOSING + FOOTER
   ============================================================ */
.closing{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;position:relative;min-height:340px}
/* The card clips by default; this one lets the food break the frame. */
.closing.card{overflow:visible}
.closing__copy{position:relative;z-index:1;max-width:46ch}
.closing__copy .btn{margin-top:var(--s5)}
/* The food breaks out of the panel: the flatbread rises above the top edge,
   the bowl drops below the bottom. Nothing sits over the copy. */
.closing__art{position:absolute;right:0;top:-34%;bottom:-16%;width:50%;pointer-events:none}
.closing__art img{position:absolute;height:auto;filter:drop-shadow(0 28px 34px rgba(7,7,7,.28))}
.closing__art img:first-child{right:0;top:0;width:74%;transform:rotate(-8deg)}
.closing__art img:last-child{left:12%;bottom:0;width:46%;transform:rotate(6deg)}
/* The only place the two logo colours appear together, at the one moment
   the page is asking for the order. 3px, edge to edge. */
.closing::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--r-xl) var(--r-xl) 0 0;background:linear-gradient(90deg,var(--flame),var(--sesame))}
.closing p{margin-top:var(--s3);color:oklch(99% 0 0 / .68);max-width:40ch}

/* Yellow panel. One per page, on the final ask, so it does not fight the
   black hero and menu. Type on it is near-black (about 11:1); the red strong
   is the darker ember (about 5:1). */
.on-sesame{background:var(--sesame);color:var(--dark)}
/* A warmer pool of yellow behind the food so the panel is not one flat swatch. */
/* The 3px rule is painted as a background layer here, not the ::before, so it
   follows the rounded corners now that the card no longer clips. */
.closing.on-sesame{background:linear-gradient(90deg,var(--flame),var(--dark)) top/100% 3px no-repeat,radial-gradient(90% 160% at 82% 50%, #F8CB3C 0%, var(--sesame) 60%)}
.closing.on-sesame::before{display:none}
.on-sesame h2 strong{color:var(--ember)}
.closing.on-sesame p,.channel--direct.on-sesame p{color:var(--ink)}
/* Labels on yellow go solid ink: the usual 62% grey lands near 3:1 on this ground. */
.on-sesame .num,.on-sesame .eyebrow{color:var(--ink)}
.on-sesame .eyebrow::before{background:var(--dark)}
.on-sesame .btn{background:var(--dark);color:var(--card)}
.on-sesame .btn:hover{background:var(--ink);color:var(--card)}
/* The outline button on yellow: ink rule and ink type, a faint dark wash on hover. */
.on-sesame .btn--line{background:transparent;color:var(--dark);border-color:rgba(7,7,7,.45)}
.on-sesame .btn--line:hover{background:rgba(7,7,7,.08);color:var(--dark);border-color:var(--dark)}
.on-sesame :focus-visible,.on-sesame .btn:focus-visible{outline-color:var(--dark)}

.foot{margin-top:var(--sec-gap)}
.foot__logo{height:64px;width:auto;margin-bottom:var(--s7)}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s7) var(--s5)}
.foot__h{margin-bottom:var(--s4);font-family:var(--f-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sesame)}
.foot li{margin-bottom:var(--s2)}
.foot a{font-size:var(--t-small);color:oklch(99% 0 0 / .84);border-bottom:1px solid transparent}
.foot a:hover{color:var(--card);border-color:oklch(99% 0 0 / .5)}
.foot address{font-style:normal;font-size:var(--t-small);color:oklch(99% 0 0 / .84);line-height:1.85}
.foot__base{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--rule-2);font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:oklch(99% 0 0 / .5)}
.foot__base a{font-family:inherit;font-size:inherit;letter-spacing:inherit}

.sticky{display:none;position:fixed;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:120;transform:translateY(160%);transition:transform .35s var(--e)}
.sticky.is-in{transform:translateY(0)}
.sticky .btn{width:100%}

/* ============================================================
   REVEAL
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--e),transform .7s var(--e)}
[data-reveal].is-in{opacity:1;transform:none}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (max-width:1180px){
  .mission{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .revs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav{padding-left:var(--s5)}
  .nav__links,.nav__tel{display:none}
  .burger{display:inline-flex}
  .nav .btn{margin-left:auto}
  .hero,.bread,.signup,.contact,.channels{grid-template-columns:minmax(0,1fr)}
  .hero__copy{max-width:none}
  /* The ring of type is a wide-screen flourish. Below the breakpoint the
     stage is too short to hold it and it collided with the stats row, so
     it goes. The disc keeps turning: the ring was never the only reason
     for the motion, and the product reads better moving. */
  .hero__orbit{display:none}
  .hero__stage{min-height:0;padding-top:var(--s5);flex-direction:column;gap:var(--s5)}
  .hero__disc img{width:min(58vw,320px)}
  .hero__float{position:static;animation:none;flex:1 1 220px}
  .hero__floats{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;width:100%}
  .hero__floats .chip{max-width:none}
  .split,.visit,.menu{grid-template-columns:minmax(0,1fr)}
  .mission{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .mission p{max-width:30ch}
  .split__fig{min-height:280px;order:-1}
  .split--flip .split__fig{order:0}
  .items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bread__stage{margin-top:var(--s6)}
  .bread__quote{position:static;max-width:none;margin-top:var(--s4)}
  .bread__stage{flex-direction:column;align-items:center}
}
@media (max-width:900px){
  /* Stacked: copy first, then the two cutouts in a band that still spills
     past the right edge and below the bottom of the panel. */
  .closing{min-height:0;padding-bottom:0}
  .closing__copy{max-width:none}
  .closing__art{position:relative;right:auto;top:auto;bottom:auto;width:100%;height:clamp(180px,42vw,260px);margin-top:var(--s4);margin-bottom:-14%}
  .closing__art img:first-child{right:-4%;top:-6%;width:62%}
  .closing__art img:last-child{left:2%;bottom:6%;width:44%}
}
@media (max-width:640px){
  :root{--margin:var(--s3)}
  .items,.tiles,.revs,.form__grid{grid-template-columns:minmax(0,1fr)}
  .rail__nav{display:none}
  .bread__facts{gap:var(--s4)}
  .bread__facts{grid-template-columns:minmax(0,1fr)}
  .sticky{display:block}
  body{padding-bottom:84px}
  /* The Order pill is what carried margin-left:auto once the links were
     hidden, so dropping it here left the burger sitting against the logo
     with the whole bar empty to its right. The burger takes the auto
     margin now: logo one end, burger the other. */
  .nav .btn{display:none}
  .burger{margin-left:auto}
  .sec__head{margin-inline:var(--s3)}
  .items__foot{padding-inline:var(--s3)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}


/* =====================================================
   MOST-ORDERED CAROUSEL. Slides of six, same grid as
   before; the .rail's shadow-room trick is reused.
   ===================================================== */
.items-carousel{
  overflow:hidden;
  padding-bottom:96px;               /* room for the lifted card shadow */
  margin-bottom:-72px;
}
.items-carousel__track{display:flex;transition:transform .55s var(--e)}
.items-carousel__slide{flex:0 0 100%;min-width:100%}
.items-carousel__dots{display:flex;justify-content:center;gap:var(--s2);margin-top:var(--s2)}
.items-carousel__dot{
  width:8px;height:8px;border-radius:50%;background:var(--rule);
  padding:0;border:0;cursor:pointer;
  transition:background .25s var(--e),transform .25s var(--e);
}
.items-carousel__dot:hover{background:var(--ink-2)}
.items-carousel__dot.is-on{background:var(--flame);transform:scale(1.25)}
@media (max-width:640px){
  .items-carousel{overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-top:calc(var(--s8) + var(--s6))}
  .items-carousel::-webkit-scrollbar{display:none}
  .items-carousel__track{transform:none !important;display:flex;gap:var(--gap)}
  .items-carousel__slide,.items-carousel .items{display:contents}
  .items-carousel .item{flex:0 0 84%;scroll-snap-align:start}
  .items-carousel__dots{display:none}
}
@media (prefers-reduced-motion:reduce){
  .items-carousel__track{transition:none}
}

/* =====================================================
   DARK MENU SECTION. Black showcase panel (matching the
   bread band) with WHITE product cards, so the food photos
   read cleanly and cutout images float above the card.
   Scoped to .menu-dark so nothing else is affected.
   ===================================================== */
.menu-dark{
  background:var(--dark);
  border-radius:var(--r-xl);
  padding:clamp(var(--s6),3.4vw,var(--s8)) clamp(var(--s5),2.6vw,var(--s7));
}
.menu-dark .sec__head{margin-inline:0}
.menu-dark h2 strong{color:var(--sesame)}

/* White cards on black: force dark text (section default is light) */
.menu-dark .item{
  background:var(--card);
  color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.35), 0 22px 50px rgba(0,0,0,.4);
}
.menu-dark .item__head h3,
.menu-dark .item__price{color:var(--ink)}
.menu-dark .item__body p{color:var(--ink-2)}
.menu-dark .item .num{color:var(--ink-2)}
.menu-dark .item__buy{border-top-color:var(--rule)}
.menu-dark .item__add{color:var(--ink);border-color:var(--rule)}
.menu-dark .item:hover .item__add{background:var(--flame);color:#fff;border-color:var(--flame)}
/* Food image + contact shadow keep the theme defaults (tuned for a light
   card), so transparent cutouts float and rest naturally. */

/* Carousel controls on the black panel */
.menu-dark .rail__btn{color:var(--card);border-color:oklch(99% 0 0 / .34)}
.menu-dark .rail__btn:hover:not([disabled]){background:var(--sesame);color:var(--dark);border-color:var(--sesame)}
.menu-dark .items-carousel__dot{background:oklch(99% 0 0 / .3)}
.menu-dark .items-carousel__dot:hover{background:oklch(99% 0 0 / .55)}
.menu-dark .items-carousel__dot.is-on{background:var(--sesame);transform:scale(1.25)}

/* Foot line on black */
.menu-dark .items__foot{padding-inline:0}
.menu-dark .items__foot p{color:oklch(99% 0 0 / .68)}

/* =====================================================
   DARK HERO. The opening section becomes a black card to
   match the menu and bread bands. Headline goes white,
   the product keeps a soft spotlight, and the floating
   chips stay white so they pop off the black.
   Scoped to .hero.on-dark.
   ===================================================== */
.hero.on-dark{background:var(--dark)}
.hero.on-dark h1 strong{color:var(--sesame)}
.hero.on-dark .h1-tail{color:oklch(99% 0 0 / .72)}
.hero.on-dark .hero__lead{color:oklch(99% 0 0 / .72)}

/* Status hairline */
.hero.on-dark .hero__at{border-top-color:var(--dark-rule);color:oklch(99% 0 0 / .58)}
.hero.on-dark .hero__at li:not(:last-child)::after{background:oklch(99% 0 0 / .28)}
.hero.on-dark .hero__at [data-status-line]{color:var(--card)}
.hero.on-dark .dot{background:oklch(99% 0 0 / .5)}
.hero.on-dark.is-open .dot,
.hero.on-dark .is-open .dot{background:var(--flame)}

/* Orbit ring + product */
.hero.on-dark .hero__orbit{color:oklch(99% 0 0 / .5)}
.hero.on-dark .hero__stage::before{
  background:radial-gradient(circle, oklch(99% 0 0 / .08) 0%, oklch(99% 0 0 / 0) 66%);
}
.hero.on-dark .hero__disc{filter:drop-shadow(0 30px 42px rgba(0,0,0,.6))}

/* Floating chips stay white with dark text */
.hero.on-dark .chip{color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.4)}


/* =====================================================
   DARK REVIEW CARDS. The three testimonial cards go black
   (the red "More" card is left as-is). Scoped to .rev--dark.
   ===================================================== */
.rev--dark{background:var(--dark);color:var(--card)}
.rev--dark .stars{color:var(--sesame)}
.rev--dark figcaption{color:oklch(99% 0 0 / .6);border-top-color:var(--dark-rule)}

/* =====================================================
   HERO BACKGROUND. The shop interior, pushed right back
   so it reads as atmosphere, not a photograph. Two layers:
   ::before is the image, ::after is the scrim that keeps
   the copy and the product readable over it.
   ===================================================== */
.hero.on-dark::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url(assets/visit-interior.jpg) center/cover no-repeat;
  opacity:.34;
  filter:grayscale(.35) contrast(1.08);
}
.hero.on-dark::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    /* brand accent bar, sits on top of everything in this layer */
    linear-gradient(90deg,var(--flame),var(--sesame)) top/100% 3px no-repeat,
    /* darkest behind the copy on the left, easing off to the right */
    linear-gradient(100deg, #070707 0%, rgba(7,7,7,.94) 36%, rgba(7,7,7,.58) 66%, rgba(7,7,7,.78) 100%),
    /* vertical settle so the status line and the card edges stay clean */
    linear-gradient(180deg, rgba(7,7,7,.45) 0%, rgba(7,7,7,.25) 45%, rgba(7,7,7,.75) 100%);
}
/* Content must sit above both decorative layers */
.hero__copy,
.hero__stage{position:relative;z-index:1}

/* =====================================================
   ACCENT PASS. More of the brand red and yellow, placed
   where it does work: the section top bars, the price,
   the Add control and the category numbering.
   ===================================================== */
/* Brand bar across the top of the dark menu panel */
.menu-dark{
  background:
    linear-gradient(90deg,var(--flame),var(--sesame)) top/100% 3px no-repeat,
    var(--dark);
}
/* Price and the Add control carry the red */
/* Price as a yellow pill: dark type on yellow reads at about 11:1, where
   yellow type on the white card would not. */
.menu-dark .item__price{background:var(--sesame);color:var(--dark);padding:2px 10px;border-radius:var(--r-pill);font-size:1rem}
.menu-dark .item__add{color:var(--flame);border-color:rgba(161,30,35,.4)}
.menu-dark .item:hover .item__add{background:var(--flame);color:#fff;border-color:var(--flame)}

/* =====================================================
   CONTENT PAGES (Accessibility, Terms). Dark header band
   to match the homepage, then a readable prose column.
   ===================================================== */
.page__head{border-radius:var(--r-xl)}
.page__head h1{margin-top:var(--s4);max-width:18ch}
.page__head .page__meta{
  margin-top:var(--s5);font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;color:oklch(99% 0 0 / .55);
}
.page__body{margin-top:var(--s5)}
.page__body > *{max-width:68ch}
.page__body h2{
  margin-top:var(--s8);padding-top:var(--s5);
  border-top:1px solid var(--rule);font-size:var(--t-h3);font-weight:700;
}
.page__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.page__body h3{margin-top:var(--s6);font-size:var(--t-body);font-weight:600}
.page__body p,
.page__body li{font-size:var(--t-body);line-height:1.62;color:var(--ink-2)}
.page__body p{margin-top:var(--s4)}
.page__body ul{margin-top:var(--s4);list-style:none}
.page__body ul li{position:relative;padding-left:var(--s5);margin-top:var(--s3)}
.page__body ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--flame);
}
.page__body strong{color:var(--ink);font-weight:600}
.page__body a{color:var(--ember);border-bottom:1px solid rgba(140,25,29,.35)}
.page__body a:hover{border-bottom-color:var(--ember)}
.page__body .page__note{
  margin-top:var(--s7);padding:var(--s5);border-radius:var(--r-md);
  background:var(--card-sink);font-size:var(--t-small);color:var(--ink-2);
}
@media (max-width:640px){
  .page__body > *{max-width:none}
}

/* =====================================================
   OFFICIAL PARTNER MARKS. The marks themselves are not
   redrawn here (see assets/brands/README.txt). Whatever
   file is supplied lands in the same 44px box at the same
   optical size, so the two rows stay identical to each
   other whichever variant is used.
   ===================================================== */
.app__mark img{
  display:block;width:28px;height:28px;
  object-fit:contain;                 /* never stretch a trademark */
}
/* An official square app icon fills the whole box; the theme radius does the
   rounding so all three read as one set. */
.app__mark--icon{background:transparent;overflow:hidden}
.app__mark--icon img{width:44px;height:44px;border-radius:var(--r-md);object-fit:cover}
/* A full-colour mark cannot sit on a colour square, so it gets a neutral
   one. Same box, same footprint, so the row does not shift. */
.app__mark--plain{
  width:44px;height:44px;flex:0 0 auto;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--card);
  border:1px solid var(--rule);
}

/* Platform initials, used until an official mark is supplied.
   Everything here needs two classes to beat ".app span", which styles the
   supporting line under each platform name. That selector also silently
   won over .app__mark's own display:flex (a class+element beats a single
   class), which left the swatch as a block box and dropped its contents
   into the top-left corner. Restated here at the right weight. */
.app .app__mark,
.app .app__mark--plain{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;
  border-radius:var(--r-md);
}
.app .app__initials{
  display:block;margin:0;
  font-family:var(--f-sans);
  font-size:.9375rem;font-weight:700;letter-spacing:.005em;line-height:1;
  text-align:center;color:#fff;
}
/* A full-colour mark sits on a neutral square, so the letters would be
   invisible there; it never shows initials, but keep the colour honest. */
.app .app__mark--plain .app__initials{color:var(--brand-ink)}


/* =====================================================
   MISSION / "WHAT WE DO". Was a single sentence and two
   outline buttons floating in a tall white card, with no
   heading to anchor it. Now: a real h2, a compact facts
   row for texture, and one primary action.
   ===================================================== */
.mission{align-items:start}
.mission__body h2{margin-top:var(--s3);max-width:20ch}
.mission__body h2 strong{color:var(--ember)}
.mission__body > p{
  margin-top:var(--s4);
  font-size:var(--t-lead);line-height:1.45;color:var(--ink-2);max-width:34ch;
}
.mission__facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5);margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--rule);
}
.mission__facts b{
  display:block;font-family:var(--f-mono);font-size:var(--t-micro);
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ember);
}
.mission__facts span{
  display:block;margin-top:var(--s2);
  font-size:var(--t-small);line-height:1.4;color:var(--ink-2);
}
.mission .cta{margin-top:var(--s6)}
@media (max-width:640px){
  .mission__facts{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
}


/* =====================================================
   FOOTER ON PHONES. Centred single column. Two columns
   did not work because three link groups do not divide
   evenly into two: the address ended up spanning a full
   row beneath a half-empty one, which read as broken
   rather than deliberate.
   ===================================================== */
@media (max-width:640px){
  .foot{text-align:center}
  .foot__logo{height:44px;margin:0 auto var(--s5)}
  .foot__cols{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .foot__h{margin-bottom:var(--s3)}
  .foot li{margin-bottom:var(--s1)}
  .foot__cols a{display:inline-block;padding-block:var(--s2)}
  .foot address{line-height:1.7}
  .foot__base{justify-content:center;margin-top:var(--s6);gap:var(--s2) var(--s5)}
  body{padding-bottom:96px}
}


/* ==========================================================================
   CAREERS PAGE  (/careers/)
   Scoped to the is_page('careers') branch in page.php. The Fluent Forms
   rules live here too, because the free plugin ships a blue default button
   and unstyled controls that do not belong to this palette.
   ========================================================================== */
.careers__head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(var(--s5),3.2vw,var(--s7));align-items:center}
.careers__head .page__lead{max-width:52ch}
.careers__head .careers__facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:var(--s6);gap:var(--s4)}
.careers__head .cta{margin-top:var(--s6)}
.careers__shot{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--dark-card);box-shadow:0 var(--s5) var(--s8) rgba(0,0,0,.45)}
.careers__shot img{display:block;width:100%;height:100%;object-fit:cover}
.careers__shot::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,var(--flame),var(--sesame))}

.careers__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--s5);align-items:start;scroll-margin-top:96px}
.careers__aside{display:grid;gap:var(--s5);position:sticky;top:96px}
.careers__list{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s5)}
.careers__list li{display:grid;gap:4px;padding-left:var(--s4);border-left:2px solid var(--sesame)}
.careers__list b{font-size:var(--t-h3);font-weight:600;line-height:1.3}
.careers__list span{color:var(--ink-2);font-size:var(--t-small);line-height:1.6}
.careers__place{margin:0;padding:0;overflow:hidden}
.careers__place img{display:block;width:100%;height:220px;object-fit:cover}
.careers__place figcaption{display:grid;gap:2px;padding:var(--s5)}
.careers__place b{font-weight:600}
.careers__place span{color:var(--ink-2);font-size:var(--t-small)}
.careers__form h2{margin:var(--s3) 0 var(--s3)}
.careers__note{max-width:62ch;margin:0 0 var(--s6);color:var(--ink-2);font-size:var(--t-small);line-height:1.6}
.careers__note b{color:var(--ink);font-weight:600}

/* Fluent Forms, themed --------------------------------------------------- */
.careers__form .ff-el-group{margin-bottom:var(--s5)}
.careers__form .ff-el-input--label{margin-bottom:6px}
.careers__form .ff-el-input--label label{font-family:var(--f-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.careers__form .ff-el-is-required.asterisk-right label::after{color:var(--flame)}
.careers__form .ff-el-form-control{width:100%;min-height:48px;padding:12px var(--s4);background:var(--card);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:none;font-family:var(--f-sans);font-size:var(--t-body);line-height:1.5;transition:border-color .2s var(--e),box-shadow .2s var(--e)}
.careers__form textarea.ff-el-form-control{min-height:160px;resize:vertical}
.careers__form .ff-el-form-control::placeholder{color:oklch(19% .006 60/.36)}
.careers__form .ff-el-form-control:hover{border-color:oklch(19% .006 60/.3)}
.careers__form .ff-el-form-control:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(239,184,0,.5)}
.careers__form .ff-el-help-message{margin:6px 0 0;color:var(--ink-2);font-size:var(--t-small);line-height:1.55}
.careers__form .ff-el-is-error .ff-el-form-control{border-color:var(--flame)}
.careers__form .text-danger,.careers__form .error{color:var(--ember);font-size:var(--t-small)}
.careers__form .ff-btn-submit{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:46px;padding:0 var(--s5);margin-top:var(--s2);background:var(--flame)!important;color:oklch(.99 0 0)!important;border:1px solid transparent!important;border-radius:var(--r-pill)!important;box-shadow:none!important;font-family:var(--f-sans);font-size:var(--t-small);font-weight:600;cursor:pointer;transition:background .25s var(--e),translate .25s var(--e)}
.careers__form .ff-btn-submit:hover{background:var(--ember)!important;translate:0 -1px}
.careers__form .ff-btn-submit:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.careers__form .ff-message-success{padding:var(--s5);background:var(--sesame);color:var(--dark);border:0;border-radius:var(--r-md);font-size:var(--t-lead);line-height:1.5}

@media (max-width:1000px){
  .careers__head{grid-template-columns:1fr}
  .careers__shot{order:-1;aspect-ratio:16/9}
  .careers__grid{grid-template-columns:1fr}
  .careers__aside{position:static}
}
@media (max-width:560px){
  .careers__form .ff-btn-submit{width:100%}
}

/* Careers, follow-up pass ------------------------------------------------ */
.careers__head .page__lead{margin-top:var(--s4)}
.careers__fallback{margin:var(--s5) 0 0;padding-top:var(--s5);border-top:1px solid var(--rule);color:var(--ink-2);font-size:var(--t-small);line-height:1.6}
.careers__fallback a{color:var(--ember);text-underline-offset:3px}
.careers__form .ff-el-input--label .ff-el-tooltip{color:var(--sesame-ink)}

/* Standalone page heroes, top spacing ------------------------------------
   The homepage hero carries no .sec, so it sits 16px under the sticky nav.
   Every page.php hero (careers, catering, accessibility, terms) DOES carry
   .sec, which was adding a full section gap of up to 96px above the fold and
   made the inner pages look detached from the navigation. Match the homepage.
   ------------------------------------------------------------------------ */
#main > .page__head:first-child{margin-top:0}


/* ============================================================
   MOST ORDERED, POLISH PASS (1.67.0). Three cards per slide
   instead of six, so each card gets more room and the section
   is one row tall. Every card now has the same vertical rhythm:
   category line, a title reserved at two lines, the full
   description (never truncated), then price and a solid Order button on a
   rule. That keeps the rules and buttons level across a row no
   matter how long a name or description is, and an item with no
   category still lines up. The old yellow price pill competed
   with the title, so price now anchors the footer instead.
   Appended last on purpose: it has to win source order against
   the earlier .menu-dark rules of equal specificity.
   ============================================================ */
.menu-dark .items{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);padding-top:calc(var(--s8) + var(--s6))}
/* No outer drop shadow: on a black panel it adds nothing you can see,
   and the carousel's overflow:hidden clipped it into a hard vertical
   edge beside the outer cards. Hover uses an INSET yellow ring for the
   same reason, so it can never be clipped either. */
.menu-dark .item{
  padding:0 var(--s6) var(--s6);
  box-shadow:inset 0 1px 0 oklch(100% 0 0 / .9);
}
.menu-dark .item:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 2px rgba(239,184,0,.8)}
.menu-dark .item:focus-visible{outline:3px solid var(--sesame);outline-offset:4px}
.menu-dark .item__fig{height:200px;margin-top:-104px}
.menu-dark .item__fig img{max-width:84%}
.menu-dark .item__body{padding-top:var(--s3)}
.menu-dark .item__cat{
  display:block;min-height:1.4em;line-height:1.4;
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--flame);
}
.menu-dark .item__title{
  margin-top:var(--s2);font-size:1.25rem;line-height:1.25;color:var(--ink);
}
.menu-dark .item__body .item__desc{
  margin:var(--s3) 0 var(--s5);font-size:var(--t-small);line-height:1.55;color:var(--ink-2);
}
.menu-dark .item__buy{align-items:center;padding-top:var(--s4);border-top:1px solid var(--rule)}
.menu-dark .item__price{background:none;padding:0;border-radius:0;color:var(--ink);font-size:1.375rem;font-weight:700;letter-spacing:-.03em}
.menu-dark .item__add{gap:var(--s2);min-height:46px;padding:0 var(--s5);background:var(--flame);border-color:var(--flame);color:#fff}
.menu-dark .item__add svg{transition:transform .25s var(--e)}
.menu-dark .item:hover .item__add{background:var(--dark);border-color:var(--dark);color:#fff}
.menu-dark .item:hover .item__add svg{transform:translate(2px,-2px)}

/* Below 900px a three-up row is too tight, and a 2-column grid would
   leave the third card of every slide alone on its own row. So the
   swipe mode that phones already used now starts at 900px: two cards
   in view on tablets, one and a peek on phones. The arrows and dots
   only make sense for the paged desktop version. The JS breakpoint in
   front-page.php was moved to 900px to match. */
@media (max-width:900px){
  .menu-dark .rail__nav,.menu-dark .items-carousel__dots{display:none}
  .items-carousel{overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-top:calc(var(--s8) + var(--s6))}
  .items-carousel::-webkit-scrollbar{display:none}
  .items-carousel__track{transform:none !important;display:flex;gap:var(--gap)}
  .items-carousel__slide,.items-carousel .items{display:contents}
  .items-carousel .item{flex:0 0 calc(50% - var(--gap) / 2);scroll-snap-align:start}
}
@media (max-width:640px){
  .items-carousel .item{flex-basis:84%}
  .menu-dark .item{padding:0 var(--s5) var(--s5)}
  /* Full-bleed product band (1.81.0). On phones the panel drops its page
     gutter and radius so the black runs edge to edge, and the carousel
     spans the whole band: mid-scroll cards clip at the SCREEN edge, while
     padding-inline plus scroll-padding keep the resting card on the same
     24px line as the heading. Scoped to the product section only. */
  .menu-dark{margin-inline:calc(-1 * var(--margin));border-radius:0;padding-inline:var(--s5)}
  .menu-dark .items-carousel{margin-inline:calc(-1 * var(--s5));padding-inline:var(--s5);scroll-padding-inline:var(--s5)}
}


/* ============================================================
   FAMILY & FRIENDS MEALS CTA (1.70.0). A single clear primary
   button into the dedicated page, at the standard .btn size,
   with an arrow that nudges on hover. Email is the secondary
   outline button and the phone number is a quiet text link, so
   the eye lands on one action instead of three.
   ============================================================ */
#family-friends-meals .cta--ffm{align-items:center}
.btn--ffm svg{transition:transform .25s var(--e)}
.btn--ffm:hover svg,.btn--ffm:focus-visible svg{transform:translateX(3px)}
.cta__alt{margin-top:var(--s4);font-size:var(--t-small);color:var(--ink-2)}
.cta__alt a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap}
.cta__alt a:hover{color:var(--flame)}
@media (max-width:560px){
  #family-friends-meals .cta--ffm .btn{width:100%;justify-content:center}
}


/* ============================================================
   MOBILE PASS (1.73.0). Found by walking every page at 375px.
   Also fixed above: a stray closing brace after the spread
   breakpoint silently discarded the next rule (.page__lead),
   which is why page intros sat flush against their h1 on every
   screen size.
   ============================================================ */

/* Google's attribution strip sits along the bottom edge of the map
   embed and has to stay visible; the label used to cover it. */
.map__label{bottom:calc(var(--s4) + 20px)}

@media (max-width:640px){
  /* One button pattern on phones: full width, stacked, same height.
     Mixed-width stacks (a long button over a short one) were the most
     visible "desktop squeezed down" tell on the homepage. */
  #main .cta{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3)}
  #main .cta .btn,
  #main .closing__copy .btn,
  #main .form__foot .btn,
  #main .signup__row .btn,
  #main .items__foot .btn,
  #main .card > .btn{width:100%;justify-content:center}
  #main .form__foot{flex-direction:column;align-items:stretch;gap:var(--s3)}
  #main .form__foot p{max-width:none;text-align:center}
  #main .signup__row{flex-direction:column}
  #main .signup__row input{width:100%}
  #main .items__foot{flex-direction:column;align-items:stretch;gap:var(--s4)}

  /* Below 16px, iOS Safari zooms the whole page when a field is focused. */
  #main input:not([type=checkbox]):not([type=radio]):not([type=submit]),
  #main select,#main textarea,
  .fluentform .ff-el-form-control{font-size:16px !important}

  /* Hero status: three separate facts wrapped into two lines with a
     dangling separator dot. Stack them and drop the dots. */
  .hero__at{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .hero__at li:not(:last-child)::after{display:none}

  /* Most ordered: less dead space between the heading and the first card. */
  .menu-dark .sec__head{margin-bottom:var(--s4)}
  .menu-dark .items-carousel{padding-top:calc(var(--s8) + var(--s4))}

  /* Occasion pills went five rows deep. Tighter tracking and padding, and
     the longest pill moved last, packs them into three. */
  .occasions{gap:6px}
  .occasions li{padding:6px 10px;letter-spacing:.03em}
  .occasions li:nth-child(4){order:1}

  /* Hours table: each cell was wrapping to two lines in its own column. */
  .hours th,.hours td{white-space:nowrap;padding-right:var(--s4)}

  /* Footer: a single centred column ran about 1,000px. Two by two. */
  /* Menu and Visit share a row; More and the address block each get the
     full width, because the email address cannot break inside a half column. */
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s3)}
  .foot__cols > :nth-child(n+3){grid-column:1 / -1}
}
@media (max-width:374px){
  .hours th,.hours td{display:block;white-space:normal;padding-right:0}
  .foot__cols{grid-template-columns:minmax(0,1fr)}
}


/* ============================================================
   CONSISTENCY PASS (1.75.0). Measured across the homepage,
   Family & Friends Meals and Careers before changing anything.
   The theme was close; what varied was small and everywhere.

   Rules this block enforces:
   1. ONE card padding (--pad-card). It was 37, 46, 49 and 52px
      on different panels, so labels started at four different
      left edges down the page.
   2. Open sections (no card) indent their heading by the same
      amount, so every eyebrow lines up with card content.
   3. Label to heading is 12px (h2) / 16px (h1) everywhere.
   4. Type tiers: hero/page lead 17px, section body 16px, card
      and helper text 14px. No sentence text below 14px.
   5. Buttons: primary is red on light, yellow on dark, black on
      yellow. Secondary is always the outline. Two filled colours
      side by side (red + yellow) no longer compete.
   6. Headline accents (<strong>) are ink on light and yellow on
      dark. Mission was the one red outlier.
   7. Tag pills share the occasion-pill style.
   ============================================================ */
:root{--pad-card:clamp(var(--s6),3.4vw,var(--s7))}

.pad,.hero,.bread,.menu-dark,.mission{padding:var(--pad-card)}
.sec__head{margin-inline:var(--pad-card)}
.menu-dark .sec__head{margin-inline:0}

.eyebrow + h2,.sec__head h2,.bread h2,.mission__body h2{margin-top:var(--s3)}
.eyebrow + h1,.hero h1,.page__head h1{margin-top:var(--s4)}

.sec__head p{font-size:var(--t-body);line-height:1.55}
.bread > div > p,.mission__body > p{font-size:var(--t-body)}
.signup__note,.form__foot p{font-size:var(--t-small)}

.mission__body h2 strong{color:var(--ink)}

.tag{
  padding:var(--s2) var(--s3);
  background:rgba(239,184,0,.26);border:1px solid rgba(239,184,0,.55);
  font-size:.75rem;font-weight:500;letter-spacing:.08em;color:var(--ink);line-height:1.2;
}

/* The closing band lets its food cutouts spill off the bottom edge when
   stacked; the blanket padding above must not put a floor back under it. */
@media (max-width:900px){
  .closing{padding-bottom:0}
}
@media (max-width:640px){
  :root{--pad-card:var(--s5)}
}

/* ==========================================================================
   19. 404
   Scoped entirely to .notfound so nothing else on the site can be affected.
   Mirrors the hero gold accent and reuses the existing spacing and mono scales.
   ========================================================================== */

.notfound h1 strong { display: block; max-width: 20ch; color: var(--sesame); }

.notfound .page__lead { margin-top: var(--s5); max-width: 56ch; color: oklch(99% 0 0 / .72); }

.notfound .cta { margin-top: var(--s7); display: flex; flex-wrap: wrap; gap: var(--s3); }

.notfound__links {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid oklch(99% 0 0 / .14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.notfound__links a { color: oklch(99% 0 0 / .62); text-decoration: none; }
.notfound__links a:hover { color: var(--sesame); }