@font-face {
  font-family: "Yummy Burbank Exact";
  src: url("../fonts/burbank-big-condensed-black.otf") format("opentype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --navy: #083860;
  --navy-2: #0c5387;
  --navy-3: #062844;
  --gold: #f8b010;
  --gold-warm: #fcb415;
  --cream: #fff9e9;
  --paper: #f4edd3;
  --ink: #071f31;
  --white: #fff;
  --muted: #9bb1c2;
  --shadow: 0 28px 80px rgba(1, 25, 43, .24);
  --radius: 28px;
  --display: "Yummy Burbank Exact", Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  --body: "Trebuchet MS", Arial, sans-serif;

  /* Layout tokens. Every width/offset that used to be a magic number lives here,
     so the widescreen tiers below only have to restate the token. */
  --shell-max: 1180px;   /* main content column */
  --reel-max: 1480px;    /* gallery is deliberately wider than the shell */
  --header-h: 88px;      /* .nav min-height; drives the drawer + scroll offsets */
  --scroll-offset: 104px;/* header height + breathing room for anchored headings */
  --gutter: 40px;        /* total horizontal page gutter */
  --section-pad: 110px;
}

* { box-sizing: border-box; }
/* overflow-x on html as well as body: body alone does not reliably suppress the
   phantom horizontal scroll on iOS Safari. */
html { scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: var(--scroll-offset); }
section[id], [id] { scroll-margin-top: var(--scroll-offset); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--body);
  overflow-x: hidden;
}
button, a { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
/* <picture> is an inline wrapper by default, which would swallow the height:100%
   sizing the frames below rely on. Give it a real block box that fills its frame,
   so the <img> inside it can fill the picture exactly. */
.photo-frame picture, .meal-visual picture, .gallery-card picture { display: block; width: 100%; height: 100%; }
figure { margin: 0; }
::selection { color: var(--navy); background: var(--gold); }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 18px;
  color: var(--navy);
  background: var(--white);
  border-radius: 10px;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

/* The full-viewport dot-grid overlay was removed on 2026-09-03. It was a fixed
   z-index:999 layer of two 1px radial-gradient dot tiles (19x23px and 29x31px)
   at opacity .075 with mix-blend-mode:multiply, sitting above every element —
   the speckle it put over the cream photo frame and the price badge is what the
   client identified as the "square dots". Do not reintroduce it. */

.shell { width: min(var(--shell-max), calc(100% - var(--gutter))); margin-inline: auto; }
.section { padding: var(--section-pad) 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: var(--navy-2);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before { width: 30px; height: 4px; content: ""; background: var(--gold); border-radius: 99px; }
.section-title {
  max-width: 780px;
  margin: 0;
  color: var(--navy);
  font-family: var(--display);
  /* floor lowered from 3.2rem: the old ≤420 override (3.6rem) was BIGGER than this
     floor, so headings grew as the screen shrank. One continuous curve instead. */
  font-size: clamp(2.6rem, 8vw, 7.8rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.section-title .outline { color: transparent; -webkit-text-stroke: 2px var(--navy); }
@supports not (-webkit-text-stroke: 2px var(--navy)) {
  .section-title .outline { color: var(--navy); }
}
@media (forced-colors: active) {
  .section-title .outline { color: CanvasText; -webkit-text-stroke: 0; }
}
.section-intro { max-width: 580px; margin: 24px 0 0; font-size: 1.05rem; line-height: 1.75; }

.site-header {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  color: var(--white);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.site-header.scrolled {
  position: fixed;
  background: rgba(8, 56, 96, .94);
  box-shadow: 0 10px 34px rgba(0, 20, 36, .22);
  backdrop-filter: blur(14px);
}
.nav { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand {
  flex: 0 0 auto;
  width: 205px;
  padding: 7px 11px;
  background: var(--cream);
  border-radius: 13px;
}
.brand img { width: 100%; height: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  position: relative;
  /* The desktop links were 16px tall — below even the 24px WCAG 2.5.8 minimum,
     and these are real targets on touch laptops and iPad in landscape. The nav
     row is 88px, so padding this out to 44px changes no layout. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--white);
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-links a:not(.nav-order)::after {
  position: absolute;
  right: 0;
  bottom: 9px;
  left: 0;
  height: 3px;
  content: "";
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-links a.nav-order {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: var(--navy);
  background: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 999px;
}
.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  color: var(--white);
  background: transparent;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 50%;
  cursor: pointer;
}

.hero {
  position: relative;
  /* Was a flat 880px. min()/max() keeps the desktop look identical on a tall
     screen while letting short viewports (landscape phones, small laptops)
     shrink instead of forcing 880px of hero above the fold. */
  min-height: min(880px, max(660px, 92vh));
  color: var(--white);
  background:
    radial-gradient(circle at 75% 20%, rgba(12,83,135,.8), transparent 32%),
    linear-gradient(145deg, var(--navy-3), var(--navy) 54%, #0c4773);
  overflow: hidden;
}
.hero::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .21;
  background:
    repeating-radial-gradient(ellipse at 20% 110%, transparent 0 20px, rgba(255,255,255,.2) 21px 23px, transparent 24px 44px);
  transform: scale(1.25);
}
.hero::after {
  position: absolute;
  right: -10%;
  bottom: -125px;
  /* Capped: at 3440px an unbounded 70% made this a 2408x260 stripe whose
     border-radius collapsed to a flat line. */
  width: min(70%, 1400px);
  height: clamp(200px, 15vw, 320px);
  content: "";
  background: var(--gold);
  border-radius: 50% 0 0 0;
  transform: rotate(-5deg);
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: min(880px, max(660px, 92vh));
  padding-top: 140px;
  padding-bottom: 90px;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 56px;
}
.hero-copy { position: relative; z-index: 3; }
.hero .eyebrow { color: var(--gold); }
.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(5rem, 10.5vw, 10.2rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-shadow: 7px 7px 0 rgba(0,0,0,.2);
}
.hero h1 .gold { color: var(--gold); }
.hero-lede { max-width: 510px; margin: 26px 0 30px; color: #dce8f0; font-size: 1.08rem; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.button:focus-visible, .meal-tab:focus-visible, .menu-toggle:focus-visible, .icon-button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.button-gold { color: var(--navy); background: var(--gold); border-color: var(--gold); }
.button-ghost { color: var(--white); background: transparent; border-color: rgba(255,255,255,.5); }

.hero-art { position: relative; min-height: 570px; }
.photo-frame {
  position: absolute;
  inset: 36px 0 30px 50px;
  padding: 12px;
  background: var(--paper);
  box-shadow: var(--shadow);
  transform: rotate(3deg);
}
.photo-frame::before {
  position: absolute;
  inset: -14px;
  z-index: -1;
  content: "";
  border: 3px dashed rgba(248,176,16,.65);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.price-burst {
  position: absolute;
  z-index: 4;
  top: 0;
  /* A 156px box rotated 10deg has a ~181px bounding box, so right:-25px put it
     ~37px past the column edge against a 20px gutter — the badge was clipped by
     .hero{overflow:hidden} at every width below ~1220px. The negative offset is
     restored in the widescreen tier, where there is room for it. */
  right: 0;
  display: grid;
  width: 156px;
  height: 156px;
  color: var(--navy);
  background: var(--gold);
  border: 7px solid var(--navy);
  border-radius: 50%;
  place-content: center;
  text-align: center;
  transform: rotate(10deg);
  box-shadow: 0 16px 34px rgba(0,0,0,.2);
}
.price-burst small { display: block; font-size: .68rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.price-burst strong { font-family: var(--display); font-size: 2.35rem; line-height: 1; }
.stamp {
  position: absolute;
  z-index: 4;
  bottom: 2px;
  left: 0;
  display: grid;
  width: 132px;
  height: 132px;
  color: var(--white);
  border: 3px solid var(--white);
  border-radius: 50%;
  place-content: center;
  text-align: center;
  transform: rotate(-13deg);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.45;
  text-transform: uppercase;
}
.stamp::before, .stamp::after { position: absolute; inset: 7px; content: ""; border: 1px solid var(--white); border-radius: 50%; }
.stamp::after { inset: 13px; border-style: dashed; }

.menu-section { position: relative; padding-top: 132px; background: var(--cream); overflow: hidden; }
/* Pinned to the content column rather than the viewport edge: on an ultrawide
   these rings used to float alone in ~1100px of empty margin. */
.menu-section::before {
  position: absolute;
  top: 80px;
  right: calc(max(0px, (100% - var(--shell-max)) / 2) - 90px);
  width: 320px;
  height: 320px;
  content: "";
  border: 55px solid rgba(248,176,16,.14);
  border-radius: 50%;
}
.menu-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.menu-note { max-width: 340px; margin: 0 0 8px; padding-left: 18px; border-left: 5px solid var(--gold); line-height: 1.6; }
.catch-builder {
  display: grid;
  margin-top: 56px;
  padding: 22px;
  color: var(--white);
  background: var(--navy);
  border-radius: 36px;
  box-shadow: var(--shadow);
  grid-template-columns: 1.15fr .85fr;
  gap: 38px;
}
.meal-visual { position: relative; min-height: 580px; overflow: hidden; border-radius: 24px; background: var(--navy-3); }
.meal-visual::after {
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  content: "";
  background: linear-gradient(transparent, rgba(3,23,38,.92));
  pointer-events: none;
}
.meal-visual img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease, transform .6s ease; }
.meal-visual.changing img { opacity: .3; transform: scale(1.04); }
.meal-number {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 22px;
  display: grid;
  width: 70px;
  height: 70px;
  color: var(--navy);
  background: var(--gold);
  border-radius: 50%;
  place-items: center;
  font-family: var(--display);
  font-size: 1.7rem;
}
.meal-caption { position: absolute; z-index: 3; right: 28px; bottom: 24px; left: 28px; }
.meal-caption span { color: var(--gold); font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.meal-caption strong { display: block; margin-top: 7px; font-size: 1rem; }
.meal-panel { display: flex; min-width: 0; flex-direction: column; padding: 18px 18px 18px 0; }
.meal-kicker { margin: 10px 0 8px; color: var(--gold); font-size: .74rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.meal-panel h3 { margin: 0; font-family: var(--display); font-size: clamp(2.4rem, 5vw, 5.6rem); font-weight: 900; line-height: .94; text-transform: uppercase; }
/* 82px reserved 3 lines; the longest meal copy runs to 4, so the panel still
   jumped on every tab switch. 6.6em == 4 lines at line-height 1.65, and it
   scales with the font instead of being a fixed pixel guess. */
.meal-description { min-height: 6.6em; margin: 20px 0 8px; color: #d7e3eb; line-height: 1.65; }
.meal-price { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 18px; color: var(--gold); }
.meal-price small { font-weight: 900; text-transform: uppercase; }
.meal-price strong { font-family: var(--display); font-size: clamp(2.6rem, 6vw, 6.4rem); line-height: 1; }
.meal-tabs { display: grid; margin-top: auto; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.meal-tab {
  min-height: 58px;
  padding: 10px 12px;
  color: var(--white);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.meal-tab:hover { transform: translateY(-2px); }
.meal-tab.active { color: var(--navy); background: var(--gold); border-color: var(--gold); }
.meal-tab span { display: block; font-size: .68rem; font-weight: 900; letter-spacing: .1em; opacity: .75; text-transform: uppercase; }
.meal-tab strong { display: block; margin-top: 3px; }
.meal-actions { display: grid; margin-top: 12px; grid-template-columns: 1fr auto; gap: 10px; }
.meal-actions .button { width: 100%; }
.icon-button {
  width: 56px;
  height: 56px;
  color: var(--gold);
  background: transparent;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.25rem;
}

.promise-section { color: var(--white); background: var(--navy-3); }
.promise-section .section-title { color: var(--white); }
.promise-section .outline { -webkit-text-stroke-color: var(--gold); }
.promise-grid { display: grid; margin-top: 64px; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.promise-card {
  position: relative;
  min-height: 290px;
  padding: 32px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  overflow: hidden;
  transition: transform .25s ease, background .25s ease;
}
.promise-card:hover { transform: translateY(-8px); background: var(--navy); }
.promise-card::after {
  position: absolute;
  right: -35px;
  bottom: -35px;
  width: 120px;
  height: 120px;
  content: "";
  border: 18px solid rgba(248,176,16,.3);
  border-radius: 50%;
}
.promise-icon { display: grid; width: 64px; height: 64px; color: var(--navy); background: var(--gold); border-radius: 18px; place-items: center; font-size: 1.8rem; transform: rotate(-5deg); }
.promise-card h3 { margin: 34px 0 10px; font-family: var(--display); font-size: 2rem; letter-spacing: .02em; text-transform: uppercase; }
.promise-card p { margin: 0; color: #b8cad7; line-height: 1.65; }

.gallery-section { padding-bottom: 38px; background: var(--paper); overflow: hidden; }
.gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.gallery-reel {
  display: grid;
  width: min(var(--reel-max), calc(100% - 30px));
  margin: 60px auto 0;
  grid-template-columns: 1.05fr .85fr 1.1fr;
  gap: 14px;
}
.gallery-card { position: relative; min-height: 430px; overflow: hidden; background: var(--navy); }
.gallery-card:nth-child(1) { border-radius: 30px 8px 8px 0; }
.gallery-card:nth-child(2) { transform: translateY(38px) rotate(-1deg); }
.gallery-card:nth-child(3) { border-radius: 8px 30px 0 8px; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery-card:hover img { transform: scale(1.05); }
.gallery-label { position: absolute; right: 18px; bottom: 18px; left: 18px; padding: 15px 18px; color: var(--navy); background: var(--gold); font-family: var(--display); font-size: 1.4rem; text-transform: uppercase; }

.cta-section { position: relative; padding: 160px 0 110px; color: var(--white); background: var(--gold); overflow: hidden; }
.cta-section::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .15;
  background: repeating-radial-gradient(ellipse at 70% 120%, transparent 0 24px, var(--navy) 25px 28px, transparent 29px 54px);
}
.cta-card {
  position: relative;
  display: grid;
  padding: 68px;
  background: var(--navy);
  border-radius: 38px;
  box-shadow: 15px 15px 0 rgba(255,255,255,.65);
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
}
.cta-card h2 { max-width: 760px; margin: 0; font-family: var(--display); font-size: clamp(2.6rem, 7vw, 7.6rem); line-height: .92; text-transform: uppercase; }
.cta-card h2 span { color: var(--gold); }
.cta-card p { max-width: 620px; margin: 22px 0 0; color: #d7e4ec; line-height: 1.65; }
.cta-round {
  display: grid;
  width: 170px;
  height: 170px;
  color: var(--navy);
  background: var(--gold);
  border: 0;
  border-radius: 50%;
  place-content: center;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(7deg);
  transition: transform .25s ease;
}
.cta-round:hover { transform: rotate(0) scale(1.06); }
.cta-round b { display: block; font-size: 2rem; line-height: 1; }

.contact-section {
  position: relative;
  color: var(--white);
  background: var(--navy-3);
  overflow: hidden;
}
.contact-section::before {
  position: absolute;
  top: -130px;
  right: calc(max(0px, (100% - var(--shell-max)) / 2) - 100px);
  width: 390px;
  height: 390px;
  content: "";
  border: 64px solid rgba(248,176,16,.1);
  border-radius: 50%;
}
.contact-layout {
  position: relative;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: start;
  gap: 68px;
}
.contact-section .eyebrow { color: var(--gold); }
/* Floor lowered from 3.8rem. At 0-2-0 this rule outranked the old 0-1-0 mobile
   override, so this heading alone stayed 60.8px on a 320px screen. */
.contact-section .section-title { color: var(--white); font-size: clamp(2.6rem, 7vw, 7rem); }
.contact-section .outline { -webkit-text-stroke-color: var(--gold); }
.contact-lede { max-width: 580px; margin: 26px 0 34px; color: #c2d2dd; line-height: 1.75; }
.office-card {
  display: block;
  padding: 28px;
  color: var(--ink);
  background: var(--gold);
  border-radius: 22px;
  font-style: normal;
  box-shadow: 10px 10px 0 rgba(255,255,255,.12);
}
.office-kicker { display: block; margin-bottom: 8px; font-size: .7rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.office-card > strong { font-family: var(--display); font-size: 2.1rem; text-transform: uppercase; }
.office-card p { margin: 12px 0 18px; font-size: .9rem; line-height: 1.65; }
.office-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.office-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0;
  font-size: .78rem; font-weight: 900; text-underline-offset: 3px; }

.franchise-form {
  position: relative;
  padding: 38px;
  color: var(--ink);
  background: var(--cream);
  border-radius: 30px;
  box-shadow: 14px 14px 0 var(--gold);
}
.form-heading { margin-bottom: 28px; }
.form-heading span { display: block; color: var(--navy-2); font-size: .7rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.form-heading strong { display: block; margin-top: 5px; color: var(--navy); font-family: var(--display); font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: .95; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid label { display: grid; align-content: start; gap: 8px; }
.form-grid label > span { font-size: .72rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  color: var(--ink);
  background: var(--white);
  border: 2px solid #d8d4c5;
  border-radius: 12px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-grid input, .form-grid select { min-height: 50px; padding: 0 14px; }
.form-grid textarea { min-height: 126px; padding: 14px; resize: vertical; }
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(248,176,16,.2); }
.form-wide { grid-column: 1 / -1; }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* The whole label is the target, so the row carries the 44px not the box. */
/* Two rows of content now (the consent sentence, then the privacy link), so the
   checkbox aligns to the top of the text rather than to the centre of the block. */
.consent-row { display: grid; margin: 20px 0; grid-template-columns: 24px 1fr; align-items: start; gap: 10px; }
.consent-row input { width: 24px; height: 24px; margin: 0; accent-color: var(--navy); }
.consent-text { display: grid; justify-items: start; gap: 2px; }
/* The label carries the pointer, not the whole row: the row now contains a link
   that must not read as "click to tick". */
.consent-text label { min-height: 24px; color: #4d5962; font-size: .76rem; line-height: 1.5; cursor: pointer; }
.consent-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy-2);
  font-size: .74rem; font-weight: 900; text-underline-offset: 3px; }
.form-submit { width: 100%; }
.form-note { margin: 11px 0 0; color: #68737a; font-size: .7rem; text-align: center; }
.form-status { margin: 0 0 16px; padding: 12px 14px; color: #0a5435; background: #dff4e8; border: 1px solid #acd8bf; border-radius: 10px; font-size: .84rem; font-weight: 900; line-height: 1.5; }
.form-status.error { color: #7b251d; background: #fce6e3; border-color: #efb8b0; }

.site-footer { padding: 50px 0; color: #b9ccd9; background: #031a2b; }
.footer-inner { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: start; gap: 38px; }
.footer-brand { width: 170px; height: auto; padding: 7px 10px; background: var(--cream); border-radius: 12px; }
.footer-content { display: grid; gap: 30px; }
.footer-copy { max-width: 780px; margin: 0; font-size: .8rem; line-height: 1.75; }
.footer-copy a, .footer-developer { display: inline-block; padding: 11px 2px;
  color: var(--gold); text-underline-offset: 3px; }
.ownership-block > p { margin: 0 0 16px; color: var(--white); font-weight: 900; }
/* 168 + 92 + 30 = 290px was exactly the 292px shell at 320px — zero slack. */
.ownership-logos { display: flex; flex-wrap: wrap; align-items: end; gap: 22px 30px; }
.ownership-logos > div { display: grid; gap: 8px; }
.ownership-logos span { color: #8da7b9; font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.ownership-logos img { object-fit: contain; object-position: left center; }
.laudian-logo { width: 168px; height: auto; filter: grayscale(1) brightness(0) invert(1); }
.tfc-logo { width: 92px; height: auto; }
.footer-actions { display: grid; justify-items: end; gap: 22px; text-align: right; }
.footer-top, .footer-developer { display: inline-flex; align-items: center; min-height: 44px; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.footer-developer { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.js .reveal.visible { opacity: 1; transform: none; }

/* ===========================================================================
   Responsive tiers
   ---------------------------------------------------------------------------
   Order matters: the max-width tiers cascade down (980 -> 760 -> 480), then the
   min-width tiers add the widescreen scale on top.

   The one structural change from the original: the mobile drawer now starts at
   980px, not 760px. Between 761 and 979 the desktop nav did not fit and its
   links wrapped onto two rows -- which is every tablet in portrait and every
   phone in landscape.
   =========================================================================== */

/* --- Tablet: <= 980px ---------------------------------------------------- */
@media (max-width: 980px) {
  :root { --section-pad: 92px; }

  /* Hamburger from here down. */
  .menu-toggle { display: inline-grid; place-items: center; }
  .nav-links {
    position: fixed;
    inset: calc(var(--header-h) + 8px) 12px auto;
    z-index: 90;
    display: grid;
    gap: 4px;                 /* was inheriting the desktop 30px row gap */
    padding: 16px;
    color: var(--white);
    background: var(--navy-3);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 20px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;       /* keeps the closed drawer out of the tab order */
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  /* 19px text links were the worst tap targets on the site. */
  .nav-links a { display: flex; align-items: center; min-height: 48px; padding: 0 10px; font-size: 1rem; }
  .nav-links a:not(.nav-order)::after { right: 10px; bottom: 8px; left: 10px; }
  .nav-links a.nav-order { justify-content: center; margin-top: 6px; }

  /* Hero: single column, and released from the 880px floor. Left as-is it
     rendered 1154px tall at 768px -- taller than the whole iPad viewport. */
  .hero, .hero-grid { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; padding-top: 128px; padding-bottom: 78px; gap: 34px; }
  .hero-copy { max-width: 760px; }
  .hero-art { min-height: 440px; }

  .catch-builder { grid-template-columns: 1fr; }
  .meal-panel { padding: 10px; }
  .promise-grid { grid-template-columns: 1fr; }
  .promise-card { min-height: 220px; }

  /* The third photo used to be display:none from here down and was never
     restored, so nobody on a tablet or phone had ever seen it. It now spans
     the full row underneath the other two. */
  .gallery-reel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-card:nth-child(3) { grid-column: 1 / -1; min-height: 380px; }

  .cta-card { padding: 54px; grid-template-columns: 1fr; }
  .cta-round { width: 145px; height: 145px; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-copy { max-width: 760px; }
  .footer-inner { grid-template-columns: 170px minmax(0, 1fr); }
  .footer-actions { grid-column: 2; justify-items: start; text-align: left; }
}

/* --- Large phone / small tablet: <= 760px -------------------------------- */
@media (max-width: 760px) {
  :root { --header-h: 76px; --scroll-offset: 92px; --gutter: 28px; --section-pad: 80px; }

  .nav { min-height: var(--header-h); }
  .brand { width: 164px; }

  .hero-grid { padding-top: 112px; padding-bottom: 84px; gap: 30px; }
  /* Continuous with the clamp above it: at 761px the h1 is 80px, and this now
     reaches exactly 80px at 760px instead of jumping to 112px. */
  .hero h1 { font-size: clamp(3.4rem, 11vw, 5rem); }
  .hero-lede { font-size: .98rem; }
  .hero-art { min-height: 390px; }
  .photo-frame { inset: 30px 8px 20px 26px; }
  .price-burst { width: 122px; height: 122px; border-width: 5px; }
  .price-burst strong { font-size: 1.8rem; }
  /* One consistent rule: no stamp on phones, stamp from tablet up. Previously
     it was hidden at <=420 and visible at 430, so a 390px iPhone and a 430px
     iPhone disagreed. */
  .stamp { display: none; }

  .menu-head, .gallery-head { display: block; }
  .menu-note { margin-top: 24px; }
  .catch-builder { margin-top: 38px; padding: 12px; border-radius: 25px; gap: 18px; }
  .meal-visual { min-height: 390px; }
  .meal-tabs { grid-template-columns: 1fr; }
  .meal-description { min-height: 0; }
  /* No override here at all. The base clamp(2.6rem, 6vw, 6.4rem) already reaches
     its 2.6rem floor by ~433px, so it stays monotonic all the way down on its
     own. The old fixed 4.2rem jumped 54.4px -> 67.2px crossing 761px, and a
     capped mobile clamp inverted it the other way. */

  .promise-grid { margin-top: 42px; }
  .gallery-reel { width: calc(100% - 28px); grid-template-columns: 1fr; }
  .gallery-section { padding-bottom: 0; }
  /* Radius set via :nth-child so it beats the per-card radii by source order
     rather than by !important. */
  .gallery-card:nth-child(n) { min-height: 340px; border-radius: 22px; }
  .gallery-card:nth-child(2) { transform: none; }

  .cta-section { padding: 100px 0 80px; }
  .cta-card { padding: 36px 25px; border-radius: 26px; box-shadow: 8px 8px 0 rgba(255,255,255,.65); }
  .cta-round { width: 130px; height: 130px; }
  .contact-layout { gap: 46px; }
  .franchise-form { padding: 28px; border-radius: 24px; box-shadow: 8px 8px 0 var(--gold); }
  .form-grid { grid-template-columns: 1fr; }
  .form-wide { grid-column: auto; }

  .footer-inner { grid-template-columns: 1fr; justify-items: center; }
  .footer-content { justify-items: center; }
  .footer-copy { text-align: center; }
  .ownership-block > p { text-align: center; }
  .ownership-logos { justify-content: center; }
  .ownership-logos > div { justify-items: center; }
  .ownership-logos img { object-position: center; }
  .footer-actions { grid-column: auto; justify-items: center; text-align: center; }
}

/* --- Phone: <= 480px ----------------------------------------------------- */
/* Was 420px, which let the 428/430px Pro Max models fall through to the tablet
   rules. No font-size overrides live here any more -- the clamps above already
   reach their floors by this width, so the scale stays monotonic. */
@media (max-width: 480px) {
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .hero-art { min-height: 330px; }
  .meal-visual { min-height: 320px; }
  .meal-actions { grid-template-columns: 1fr; }
  .icon-button { width: 100%; border-radius: 999px; }
  .office-card { padding: 22px; }
  .office-links { display: grid; }
  .franchise-form { padding: 24px 20px; }
  .ownership-logos { align-items: center; flex-direction: column; gap: 22px; }
}

/* --- Widescreen ---------------------------------------------------------- */
/* Above ~1560px every clamp had saturated AND the shell was capped at 1180px,
   so 1920 / 2560 / 3440 rendered pixel-identical content in a progressively
   emptier canvas: 39%, 54% and 66% dead space respectively. These tiers step
   the container and let the type and rhythm keep growing. */
@media (min-width: 1440px) {
  :root { --shell-max: 1320px; --reel-max: 1560px; --section-pad: 128px; }
  .price-burst { right: -25px; }   /* room for the overhang again */
  .section-intro, .hero-lede { font-size: 1.14rem; }
}

@media (min-width: 1920px) {
  :root { --shell-max: 1520px; --reel-max: 1800px; --section-pad: 150px; --gutter: 64px; }
  .hero h1 { font-size: clamp(5rem, 9vw, 12.5rem); }
  .section-title { font-size: clamp(2.6rem, 6.6vw, 9.4rem); }
  .contact-section .section-title { font-size: clamp(2.6rem, 6vw, 8.4rem); }
  .cta-card h2 { font-size: clamp(2.6rem, 6vw, 9rem); }
  .section-intro, .hero-lede { font-size: 1.2rem; }
  .hero-art { min-height: 640px; }
}

@media (min-width: 2560px) {
  :root { --shell-max: 1800px; --reel-max: 2100px; --section-pad: 172px; }
  .section-intro, .hero-lede { font-size: 1.28rem; }
}

@media (min-width: 3200px) {
  :root { --shell-max: 2040px; --reel-max: 2380px; }
}

/* --- Input modality ------------------------------------------------------ */
/* Every hover transform used to fire on touch and stick until the next tap. */
@media (hover: none), (pointer: coarse) {
  .button:hover,
  .meal-tab:hover,
  .promise-card:hover,
  .cta-round:hover { transform: none; }
  .gallery-card:hover img { transform: none; }
  .nav-links a:hover::after { transform: scaleX(0); }
}

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