/* SELF HOSTED TYPE ---------------------------------------------------------
   Latin subsets only, served from this origin. The Google Fonts stylesheet
   was a render blocking third party request on every page; on a phone on
   congested LTE that is the headline visibly reflowing while the camera
   looks. font-display: swap keeps text readable in the fallback stack from
   the first paint. Re-fetch with the block in assets/fonts/_manifest.txt if
   the families ever change. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
}

/* The tagline script. SUBSET TO SEVEN GLYPHS: O r g a n i c. There are no
   other characters in this file. Change the word and it breaks. */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/pacifico-organic-400.woff2') format('woff2');
}

@charset "UTF-8";
/* ==========================================================================
   BLEU TRUFFLE KITCHENS
   Concept: cobalt is the room, food is the only luxury in it.

   Almost nobody in food commits to saturated blue, because the received wisdom
   says blue suppresses appetite. That wisdom is about blue food, not a blue
   room. Against deep cobalt a golden brioche bun, green herbs and a red tomato
   read hotter than they ever do against the charcoal every other private chef
   site uses. So: cobalt fields carry the architecture, and the plates are the
   only warm thing on screen.

   Colour discipline. Blue and bone carry the whole site. Green is an accent
   only: a rule under an eyebrow, an active state, a dietary tag. It is never a
   button fill and never a section background. Green fails AA as text on both
   bone and cobalt, so it never carries meaning on its own.

   Section index
     01  Tokens
     02  Reset and base
     03  Typography
     04  Layout
     05  Accessibility furniture
     06  Header and navigation
     07  Buttons
     08  Eyebrow labels and rules
     09  Hero
     10  The problem
     10b The organic standard
     11  Private chef
     12  The Pass
     12b What people sent
     13  Chef Al
     14  How it works
     14b The catering menu
     15  The honest answers, FAQ
     16  Inquiry form
     17  Footer
     18  Sticky mobile action bar
     19  Motion and reveals
     20  Utilities
   ========================================================================== */


/* 01  TOKENS
   ========================================================================== */
:root {
  /* Blue, from the supplied logo artwork, not sampled from the JPG banner */
  --bt-blue:        #00499A;   /* master brand blue */
  --bt-blue-deep:   #002E63;   /* sections that need weight */
  --bt-blue-ink:    #001A3D;   /* near black navy, masthead and footer */
  --bt-blue-tint:   #EAF0F9;   /* pale field for cards on bone */

  /* Green, from the supplied hero graphic. Accent only. */
  --bt-green:       #76A63D;

  /* Neutrals, warm so food does not go cold next to them */
  --bt-bone:        #F7F4EE;   /* warm off white canvas, never pure #fff */
  --bt-linen:       #EDE7DC;   /* secondary warm neutral */
  --bt-ink:         #1A1D21;   /* body text on light */
  --bt-muted:       #5E6672;   /* 5.29:1 on bone, passes AA */
  --bt-strong:      #1A1D21;   /* emphatic text, flips on cobalt */
  --bt-line:        #D8D2C7;

  /* On cobalt */
  --bt-on-blue:         #FFFFFF;              /* 8.76:1 on --bt-blue, AAA */
  --bt-on-blue-muted:   rgba(255,255,255,.76);
  --bt-on-blue-line:    rgba(255,255,255,.20);

  --radius:   2px;   /* near square, editorial, not friendly-rounded */
  --ease:     cubic-bezier(.2,.7,.2,1);

  /* Type */
  --font-script:  'Pacifico', 'Brush Script MT', cursive;
  --font-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype',
                  Palatino, 'Times New Roman', serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, Helvetica, Arial, sans-serif;

  /* Fluid scale.
     Deliberately large. Restraint on a luxury site is expressed through
     whitespace and a disciplined palette, not through timid type. The display
     face is allowed to be the loudest thing on any screen that is not food. */
  --t-hero:   clamp(3rem, 8.4vw, 7rem);
  --t-h2:     clamp(2.25rem, 5vw, 4rem);
  --t-h3:     clamp(1.4rem, 2.4vw, 2rem);
  --t-h4:     clamp(1.0625rem, 1.4vw, 1.25rem);
  --t-lead:   clamp(1.125rem, 1.6vw, 1.4375rem);
  --t-body:   1.0625rem;                       /* 17px floor */
  --t-small:  0.9375rem;
  --t-eyebrow: 0.75rem;                        /* 12px */
  --track-eyebrow: 0.22em;                     /* wide, quiet, expensive */

  /* Rhythm */
  --gutter:      clamp(1.25rem, 4vw, 3rem);
  --measure:     68ch;
  --section-y:   clamp(5rem, 11vw, 10.5rem);
  --stack:       clamp(1rem, 1.6vw, 1.5rem);

  --shadow-plate: 0 30px 70px -25px rgba(0,17,45,.55);
  --header-h:     68px;
}

@media (min-width: 900px) {
  :root { --header-h: 80px; }
}

/* LARGE DESKTOPS, up to 32 inch and ultrawide.
   Every clamp() above tops out around a 1200px viewport, so without these the
   site is fully grown at 1400px and then simply floats in the middle of a
   2560 or 3840 screen with the same 1200px column. Stepping the container,
   the display sizes and the vertical rhythm keeps the proportions intact
   instead of turning a big monitor into a lot of empty bone. */
@media (min-width: 1600px) {
  :root {
    --container-max: 1360px;
    --t-hero:  7.5rem;
    --t-h2:    4.25rem;
    --section-y: 11rem;
  }
}
@media (min-width: 2000px) {
  :root {
    --container-max: 1520px;
    --t-hero:  8.25rem;
    --t-h2:    4.75rem;
    --t-lead:  1.5rem;
    --t-body:  1.125rem;
    --section-y: 12rem;
    --gutter:  3.5rem;
  }
}
@media (min-width: 2560px) {
  :root {
    --container-max: 1700px;
    --t-hero:  9rem;
    --t-h2:    5.25rem;
    --t-h3:    2.25rem;
    --t-lead:  1.625rem;
    --t-body:  1.1875rem;
    --section-y: 13rem;
    --gutter:  4rem;
  }
}


/* 02  RESET AND BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Anchor targets clear the sticky masthead */
:target { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

body {
  margin: 0;
  background: var(--bt-bone);
  color: var(--bt-ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; }

/* Intrinsic width and height attributes are set on every image so the browser
   reserves the box before the file arrives. This keeps the ratio while letting
   the layout drive the width. Deliberately a bare element selector: an
   attribute qualified version such as img[width][height] outranks class rules
   like .brand img and silently overrides them. */
img, video { height: auto; }

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--bt-line);
  margin: 0;
}


/* 03  TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--t-hero); line-height: .95; letter-spacing: -0.025em; }
h2 { font-size: var(--t-h2);   line-height: 1.02; }
h3 { font-size: var(--t-h3);   line-height: 1.15; }

/* h4 is a UI heading, not an editorial one, so it takes the body face */
h4 {
  font-family: var(--font-body);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

p { margin: 0 0 var(--stack); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--bt-muted);
}

/* Secondary text on any cobalt field.
   --bt-muted is #5E6672, which scores 2.3:1 on --bt-blue-deep and fails AA
   badly. Every section that paints a blue background has to re-point the
   muted token, not just the ones that remembered to. Listing the real section
   classes here rather than an opt in helper class is deliberate: an opt in is
   something you can forget to add, and this is the failure mode that ships. */
.hero,
.pass,
.offer,
.inquire,
.section--blue,
.section--deep {
  --bt-muted: var(--bt-on-blue-muted);
  --bt-strong: #fff;
  --bt-line: var(--bt-on-blue-line);
}

strong, b { font-weight: 600; }

::selection { background: var(--bt-blue); color: #fff; }


/* 04  LAYOUT
   ========================================================================== */
/* The measure grows with the screen instead of stranding a 1200px column in
   the middle of a 32 inch monitor. It is stepped rather than fluid so line
   length stays deliberate: body copy is still held to --measure, and only the
   layout gets wider. */
.container {
  width: 100%;
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 780px; }
.container--wide   { max-width: 1400px; }

.section { padding-block: var(--section-y); }

.section--blue {
  background: var(--bt-blue);
  color: var(--bt-on-blue);
}
.section--deep {
  background: var(--bt-blue-deep);
  color: var(--bt-on-blue);
}
.section--linen { background: var(--bt-linen); }

.section--blue h1, .section--blue h2, .section--blue h3,
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--bt-on-blue); }

/* A hairline that reads as editorial rather than as a border */
.rule {
  border-top: 1px solid var(--bt-line);
  margin-block: clamp(2rem, 5vw, 3.5rem);
}
.section--blue .rule,
.section--deep .rule { border-color: var(--bt-on-blue-line); }

.stack > * + * { margin-top: var(--stack); }


/* 05  ACCESSIBILITY FURNITURE
   ========================================================================== */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--bt-bone);
  color: var(--bt-ink);
  padding: .75rem 1.25rem;
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--bt-blue);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* One visible focus treatment, everywhere, on both fields */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bt-green);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.section--blue :where(a, button, summary):focus-visible,
.section--deep :where(a, button, summary):focus-visible,
.site-header :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible {
  outline-color: #fff;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* 06  HEADER AND NAVIGATION
   ==========================================================================
   The masthead is solid navy at all times, so it never depends on JavaScript
   to stay legible over whatever section happens to be behind it. Cobalt hero
   under near black navy masthead reads as two tone and deliberate. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bt-blue-ink);
  color: var(--bt-on-blue);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* The wordmark is a custom illustrated script. It is never re-set in a
   typeface and never substituted, so the masthead uses the supplied artwork:
   the chef emblem as the mark, the wordmark as the name. Both are white
   variants generated from the delivered vectors, same single fill. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  flex: 0 0 auto;
  min-width: 0;
  /* A finger sized hit area on touch. The emblem is 28px tall by design and
     stays that way: this grows the box around it, not the artwork. */
  min-height: 44px;
}
.brand__emblem {
  height: clamp(28px, 3.4vw, 34px);
  width: auto;
  flex: 0 0 auto;
}
.brand__wordmark {
  height: clamp(20px, 2.5vw, 25px);
  width: auto;
  flex: 0 0 auto;
}

.nav { display: none; }

@media (min-width: 900px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.4vw, 2.25rem);
  }
  .nav a {
    text-decoration: none;
    white-space: nowrap;
    font-size: var(--t-small);
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--bt-on-blue-muted);
    padding-block: .35rem;
    border-bottom: 1px solid transparent;
    transition: color .18s var(--ease), border-color .18s var(--ease);
  }
  .nav a:hover { color: #fff; border-bottom-color: var(--bt-green); }
  .nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--bt-green); }
}

.header__actions { display: flex; align-items: center; gap: .625rem; }

/* Below the nav breakpoint the masthead carries the brand and the menu
   toggle only. The header CTA would overflow a 390px viewport alongside
   both, and it is redundant there: the hero owns the call to action at the
   top of the page and the sticky action bar owns it from then on. */
@media (max-width: 899px) {
  .header__actions > .btn { display: none; }
}

/* Mobile menu, a plain disclosure. Without JS the toggle is hidden and the
   footer navigation carries the site, so nothing is ever unreachable. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  padding: .5rem .75rem;
  min-height: 44px;
  border-radius: var(--radius);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav-toggle__bars {
  position: relative;
  width: 16px; height: 10px;
  flex: 0 0 auto;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform .22s var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-4.25px) rotate(-45deg); }

.mobile-nav {
  display: none;
  background: var(--bt-blue-ink);
  border-top: 1px solid rgba(255,255,255,.12);
}
.mobile-nav.is-open { display: block; }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

.mobile-nav ul { list-style: none; margin: 0; padding: .5rem 0 1.25rem; }
.mobile-nav a {
  display: block;
  padding: .8rem var(--gutter);
  text-decoration: none;
  color: var(--bt-on-blue-muted);
  font-size: 1.0625rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mobile-nav a[aria-current="page"] { color: #fff; }
.mobile-nav .btn { margin: 1rem var(--gutter) 0; display: flex; }


/* 07  BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: var(--bt-blue);
  --btn-fg: #fff;
  --btn-bd: var(--bt-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.6rem;
  min-height: 48px;                 /* comfortable tap target */
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* On cobalt the primary action inverts to bone, so the warmest thing on a
   blue field stays the food and the second warmest is the button. */
.btn--bone {
  --btn-bg: var(--bt-bone);
  --btn-fg: var(--bt-blue-ink);
  --btn-bd: var(--bt-bone);
}
.btn--bone:hover { --btn-bg: #fff; --btn-bd: #fff; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--bt-ink);
  --btn-bd: var(--bt-line);
}
.btn--ghost:hover { --btn-bd: var(--bt-blue); --btn-fg: var(--bt-blue); }

.btn--ghost-on-blue {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255,255,255,.42);
}
.btn--ghost-on-blue:hover { --btn-bd: #fff; }

.btn--sm {
  padding: .6rem 1rem;
  min-height: 40px;
  font-size: var(--t-eyebrow);
  letter-spacing: .06em;
  white-space: nowrap;
}
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Inline text link that still reads as a link without relying on colour */
.link {
  color: inherit;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
.link:hover { text-decoration-thickness: 2px; }


/* 08  EYEBROW LABELS AND RULES
   ========================================================================== */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-muted);
  margin: 0 0 1.15rem;
}
.eyebrow::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  margin-top: .85rem;
  background: var(--bt-green);   /* the only place green appears by default */
}
.section--blue .eyebrow,
.section--deep .eyebrow,
.hero .eyebrow { color: var(--bt-on-blue-muted); }

.eyebrow--plain::after { display: none; }


/* 09  HERO
   ==========================================================================
   Full bleed cobalt. One promise, one action, one plate. Nothing else.
   The plate is the LCP element and is preloaded with fetchpriority high.

   Two hero forms share this block:
     .hero              the original split field, still used by the short
                        utility pages (thank you, 404)
     .hero--cinematic   the full bleed film frame used by every real page:
                        a 2:1 plate bled edge to edge, a cobalt scrim, and
                        the promise set large over the top.

   The scrim is not decoration, it is the contrast guarantee. At 0.92 alpha
   over the copy column, the effective background can never be lighter than
   roughly rgb(20,44,76) no matter what the photograph does, which holds white
   text far above AA. Never lighten the left stop to "let more image through". */
.hero {
  position: relative;
  background: var(--bt-blue);
  color: var(--bt-on-blue);
  overflow: hidden;
}

/* --- the cinematic hero --------------------------------------------- */
.hero--cinematic {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(88svh, 940px);
  padding-block: clamp(4rem, 12vw, 8rem) clamp(2.5rem, 6vw, 4.5rem);
  background: var(--bt-blue-ink);
}

/* Absolute, not a grid cell: the section carries generous vertical padding to
   position the copy, and a media element inside that padding box leaves an
   unbled strip along the top edge. The film frame has to be the section. */
.hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}
/* picture is an inline wrapper by default, so height:100% on the img resolves
   against auto and the photograph keeps its own ratio instead of covering the
   section. On a tall phone viewport that leaves the image as a band across the
   top with flat navy underneath. The wrapper has to carry the box. */
.hero__media picture {
  display: block;
  width: 100%; height: 100%;
}
/* The hero source is a 21:9 frame composed with the food in the right third
   and deliberate empty shadow on the left, where the headline sits. Cover on a
   narrower viewport crops the sides, so the focal point has to move with the
   breakpoint or the composition works against itself.

   Phones crop hardest: a 21:9 frame in a portrait box shows about a fifth of
   its width, so there the focus swings right to keep the plate in shot and the
   copy rides the bottom scrim instead of the left one. */
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 76% 50%;
}
@media (min-width: 900px) {
  .hero__media img { object-position: 54% 50%; }
}
/* Two scrims: one across for the copy column, one up from the floor so the
   headline never sits on a bright patch of plate. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,    rgba(0,26,61,.90) 0%, rgba(0,26,61,.30) 42%, rgba(0,26,61,.10) 70%),
    linear-gradient(to right,  rgba(0,26,61,.94) 0%, rgba(0,26,61,.78) 34%, rgba(0,26,61,.30) 66%, rgba(0,26,61,.12) 100%);
}

/* 09a  MOTION LAYERS
   ==========================================================================
   Every video on this site is an overlay on top of a still that is already
   complete. The still is the LCP element, the no JavaScript state, the reduced
   motion state and the poster. The video fades in on top only once it is
   actually playing, and it carries no meaning of its own, so losing it costs
   the visitor nothing.

   No `autoplay` attribute anywhere: playback is started from JavaScript after
   the gates in main.js pass. That way a no JS visitor never downloads a video
   they will not see, and the still is never a fallback that had to fail first. */
.reel {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s var(--ease);
  pointer-events: none;
}
.reel.is-ready { opacity: 1; }

/* The scrim has to stay above the motion, or the headline loses its contrast
   guarantee the moment the video fades in. */
.hero__media::after { z-index: 1; }
.hero__media .reel { object-position: 54% 50%; }

/* Motion runs on phones and tablets too, but the rule is that a loop may play
   on a small screen only if it has brought a small file with it. A reel with no
   data-reel-sm stays desktop only rather than pushing a desktop sized download
   over cellular, and js/main.js 5b will not even fetch it.

   The small file is already cropped to the band it sits in, so the desktop
   object-position that pulls the wide frame toward the food must be reset here
   or the crop is applied twice. */
@media (max-width: 899px) {
  .reel:not([data-reel-sm]) { display: none; }
  .hero__media .reel { object-position: 50% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .reel { display: none !important; }
}

.hero__content {
  position: relative;
  align-self: end;
  width: 100%;
  z-index: 2;
}
.hero--cinematic h1 {
  max-width: 13ch;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.9rem);
  text-shadow: 0 2px 30px rgba(0,17,45,.5);
}
.hero--cinematic .hero__sub { max-width: 48ch; }

/* A thin rule and a service line along the floor of the frame, the way an
   editorial cover carries its strapline. */
.hero__strap {
  position: relative;
  z-index: 1;
  align-self: end;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255,255,255,.22);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.hero__strap span { white-space: nowrap; }
/* nowrap keeps each fact whole and lets the row break BETWEEN facts, which is
   what you want at almost every width. At about 320px a single fact can be
   wider than the viewport itself, and nowrap then clips it: the reader loses
   the end of the line with no scroll to recover it. On the catering hero,
   "California and destination events" measured 321px inside a 320px screen.
   Below that threshold, wrapping inside a fact is the lesser evil. */
@media (max-width: 380px) {
  .hero__strap span { white-space: normal; }
}

/* MOBILE HERO.
   A 21:9 frame inside a portrait viewport is roughly a four and a half times
   crop, so no focal point saves it: you get an enormous fragment of bun and
   the headline lands on busy mid-tones. Overlaying copy on that is less
   legible and less expensive looking than not overlaying it at all.

   So below the nav breakpoint the hero stops being an overlay and becomes what
   the reference sites do on a phone: a cinematic band, then the promise on
   clean cobalt underneath. The photograph still opens the page, the type is
   still perfectly legible, and neither is fighting the other. */
@media (max-width: 899px) {
  .hero--cinematic {
    display: block;
    min-height: 0;
    padding-block: 0 clamp(2.5rem, 8vw, 3.5rem);
  }
  .hero__media {
    position: relative;
    inset: auto;
    margin-bottom: clamp(2rem, 7vw, 3rem);
  }
  .hero__media picture { height: auto; }
  .hero__media img {
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: 64% 50%;
  }
  /* Only a soft foot on the band now, since nothing sits on top of it. */
  .hero__media::after {
    background: linear-gradient(to top, rgba(0,26,61,.60) 0%, rgba(0,26,61,0) 42%);
  }
  .hero--cinematic h1 { text-shadow: none; max-width: 100%; }
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    min-height: min(82vh, 780px);
  }
}

/* The headline wants a tight measure, the actions row does not. Constraining
   the whole column forces the two buttons to stack, so the measure lives on
   the text elements instead. */
.hero__copy h1 {
  max-width: 12ch;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.hero__sub {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--bt-on-blue-muted);
  max-width: 46ch;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  align-items: center;
}

/* The plate. A soft cobalt vignette bleeds the photograph into the field so it
   reads as lit in the room rather than pasted on top of it. */
.hero__plate {
  position: relative;
  margin: 0;
}
.hero__plate img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-plate);
}
.hero__plate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 60% 45%, transparent 45%, rgba(0,45,99,.35) 100%);
}

/* A quiet line of service area under the fold edge, good for local SEO and
   good for the visitor who is checking whether he comes to them. */
.hero__foot {
  border-top: 1px solid var(--bt-on-blue-line);
  padding-block: 1rem clamp(1rem, 3vw, 1.75rem);
  font-size: var(--t-small);
  color: var(--bt-on-blue-muted);
}
.hero__foot p { max-width: none; }


/* 09b  FULL BLEED IMAGE BANDS
   ==========================================================================
   The device both reference sites lean on: a wide cinematic strip of food
   edge to edge, used as punctuation between sections. It gives the page a
   pulse and it is where the appetite actually lives.

   A band is either quiet (image only) or carries one short line. It never
   carries a paragraph: that is what the sections on either side are for. */
.band {
  position: relative;
  overflow: hidden;
  background: var(--bt-blue-ink);
}
.band__media { margin: 0; }
.band__media picture { display: block; }
.band__media img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  /* A 2:1 strip on a phone is a letterbox sliver. Square it up so the food
     still reads as food. */
  .band__media img { aspect-ratio: 4 / 3; }
}

.band--quote::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,26,61,.86) 0%, rgba(0,26,61,.34) 55%, rgba(0,26,61,.14) 100%);
}
.band__line {
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.75rem, 5vw, 3.5rem) 0;
  color: #fff;
}
.band__line p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0;
  text-shadow: 0 2px 26px rgba(0,17,45,.5);
}

/* A short, wide divider band for pages that want the pulse without the copy */
.band--slim .band__media img { aspect-ratio: 3.2 / 1; }
@media (max-width: 700px) {
  .band--slim .band__media img { aspect-ratio: 2 / 1; }
}


/* 09c  THE THREE DOORS
   ==========================================================================
   The conversion engine of the homepage.

   Bleu Truffle is three businesses wearing one name: a menu you can order from
   tonight, catering for a room, and a chef for an evening. A single hero and a
   single call to action can only ever speak to one of those, so the visitor
   who wanted the other two leaves. This section lets them self identify and
   routes them, which is the highest converting pattern we have.

   Every door publishes its PRICE SHAPE. That is deliberate and it is the most
   useful thing on the page: "from $1,000" quietly excuses the person planning
   a $200 birthday before either side wastes a conversation, and "from $4.99"
   tells a hungry visitor they can buy right now. Self qualification beats
   persuasion. */
.doors {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 880px) {
  .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bt-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease);
}
.door:hover {
  border-color: var(--bt-blue);
  transform: translateY(-3px);
  box-shadow: 0 22px 48px -30px rgba(0,26,61,.5);
}
/* One link per card, stretched over the whole surface. A bigger target
   converts better, and keeping it to a single anchor keeps the card to a
   single tab stop with one clear accessible name. */
.door:focus-within {
  border-color: var(--bt-blue);
  outline: 3px solid var(--bt-green);
  outline-offset: 3px;
}
.door__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.door__cta:focus-visible { outline: none; }

.door__media { margin: 0; overflow: hidden; }
.door__media picture { display: block; }
/* 4:3 rather than 5:3. One of the three doors is a portrait of a person, and
   a 5:3 letterbox cut from a 3:4 source is too thin a band to hold a face. */
.door__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.door:hover .door__media img { transform: scale(1.035); }
.door__media img { object-position: 50% 50%; }
.door--chef .door__media img { object-position: 50% 4%; }

.door__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
}
.door__who {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-muted);
  margin-bottom: .7rem;
}
.door__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.05;
  margin: 0 0 .7rem;
}
.door__body p {
  font-size: var(--t-small);
  color: var(--bt-muted);
  margin: 0 0 1.15rem;
}

.door .door__price {
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid var(--bt-line);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bt-blue);
}
.door .door__price small {
  display: block;
  margin-top: .4rem;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bt-muted);
}
.door__foot { margin-top: 1.15rem; }
.door__foot .btn { width: 100%; }



/* THE TAGLINE LOCKUP.
   Chef Al's banner sets "Organic" as a green script against a bold "Done
   Right". This is that, in type.

   The green is his, #76A63D, unchanged. The note at the top of this file says
   green fails AA and never carries meaning alone, which is true on bone (2.62)
   and cobalt (3.01) and is why it is an accent everywhere else. It was never
   measured on the hero. The hero copy sits over a .90 to .94 overlay of
   #001A3D, where the same green scores 6.00:1 and passes outright. "Done
   Right" is bone regardless, so the meaning never rests on the colour.
   ========================================================================== */
.lockup {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--bt-on-blue);
  margin: 0;
}
.lockup em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  color: var(--bt-green);
  /* Pacifico sits small on its em box next to a bold face, and its descender
     needs the room. */
  font-size: 1.18em;
  line-height: 1;
  padding-right: .08em;
}

.hero__tagline {
  font-size: clamp(1.75rem, 4.2vw, 2.9rem);
  margin: 0 0 clamp(.5rem, 1.5vw, .9rem);
}
/* On bone or linen the green would be 2.62:1, so the lockup is only ever used
   on the dark fields. qa.py has no way to catch that, so it is written here. */

/* 10  THE PROBLEM
   ========================================================================== */
.problem { background: var(--bt-bone); }
.problem__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
@media (min-width: 860px) {
  .problem__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: start; }
}
.problem h2 { max-width: 16ch; }
.problem__body { font-size: var(--t-lead); line-height: 1.6; }
.problem__body p + p { margin-top: var(--stack); }
.problem__body .turn {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--bt-blue);
  letter-spacing: -0.01em;
  max-width: 28ch;
}



/* 10b  THE ORGANIC STANDARD
   Chef Al's tagline, set in the site's own type. Green is the accent under the
   word, never the word itself: #76A63D scores below AA on both bone and cobalt,
   so it marks and it never carries.
   ========================================================================== */
.organic__head {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: end;
}
@media (min-width: 860px) {
  .organic__head { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
}
.organic__tagline {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0.35em 0 0;
  color: var(--bt-on-blue);
}
.organic__tagline em {
  font-style: italic;
  /* skip-ink, on by default, breaks the rule around the descender of the
     italic g. A drawn gradient underline cannot do that and struck through it. */
  text-decoration: underline;
  text-decoration-color: var(--bt-green);
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: auto;
}
.organic__lede {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--bt-on-blue-muted);
  margin: 0;
  max-width: 46ch;
}
.organic__list {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 820px) {
  .organic__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.organic__list li {
  border-top: 1px solid var(--bt-on-blue-line);
  padding-top: 1.25rem;
}
.organic__list h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bt-on-blue);
  margin: 0 0 0.6rem;
  max-width: 18ch;
}
.organic__list p {
  color: var(--bt-on-blue-muted);
  margin: 0;
  max-width: 40ch;
}


/* THE BRAND PLATE
   Chef Al's own banner artwork. It is 1536px of flat art, so it is only ever
   shown contained: full bleed would soften it and put a JPEG next to the
   photography, which is the one place this site cannot afford to look cheap.
   ========================================================================== */
.brand-plate {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  max-width: 720px;
}
.brand-plate img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-plate);
}
.brand-plate figcaption {
  font-size: var(--t-small);
  color: var(--bt-muted);
  margin-top: 0.85rem;
  max-width: 46ch;
}
.section--deep .brand-plate figcaption { color: var(--bt-on-blue-muted); }

/* 11  PRIVATE CHEF
   ========================================================================== */
.offer { background: var(--bt-blue-deep); color: var(--bt-on-blue); }
.offer__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .offer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
}
/* The source frames are 3:4 phone portraits. Left at their native ratio they
   stretch the section to twice the height of its copy, so they are cropped to
   a controlled editorial portrait and the subject is held toward the top. */
.offer__media { position: relative; margin: 0; }
/* 9:16 phone footage framed by the same 4:5 box as the still it covers, so the
   two are interchangeable and the layout never moves when motion arrives. */
.offer__media .reel {
  inset: auto;
  top: 0; left: 0;
  aspect-ratio: 4 / 5;
  height: auto;
  border-radius: var(--radius);
  object-position: 50% 55%;
}
.offer__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-plate);
}
.offer h2 { margin-bottom: var(--stack); max-width: 18ch; }
.offer__who {
  font-size: var(--t-small);
  color: var(--bt-on-blue-muted);
  border-top: 1px solid var(--bt-on-blue-line);
  padding-top: 1.25rem;
  margin-top: 1.5rem;
}
.offer__actions { margin-top: clamp(1.5rem, 3vw, 2rem); display: flex; flex-wrap: wrap; gap: .875rem; }


/* 12  THE PASS
   ==========================================================================
   The signature moment, and the only spectacle on the site.

   A fixed service window in cobalt. As the visitor scrolls, plates slide
   horizontally into and out of the frame like service on a chef's pass. The
   frame and the type stay put. Only the food moves.

   Four states, all of which must work:
     a. Full          sticky stage, scroll driven horizontal translate
     b. No JS         static responsive grid of the same dishes
     c. Reduced motion static grid
     d. Coarse pointer or narrow viewport, horizontal snap scroller

   The static grid is what ships in the HTML. JavaScript upgrades it to the
   sticky pass only when it is safe to do so, so a script failure degrades to
   a complete, readable section rather than an empty one. */
.pass {
  background: var(--bt-blue);
  color: var(--bt-on-blue);
  padding-block: var(--section-y);
}

.pass__intro { max-width: 54ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.pass__intro h2 { margin-bottom: var(--stack); }

/* --- default, and the no JS / reduced motion state: a calm static grid --- */
.pass__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.plate { margin: 0; }
.plate__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bt-blue-deep);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-plate);
}
/* picture is an inline wrapper by default, so height:100% on the img would
   resolve against auto and the image would keep its own ratio, leaving a gap
   inside the frame. The wrapper has to carry the box. */
.plate__frame picture {
  display: block;
  width: 100%; height: 100%;
}
.plate__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.plate__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.15;
  margin: 1rem 0 .4rem;
  letter-spacing: -0.01em;
}
.plate__note {
  font-size: var(--t-small);
  color: var(--bt-on-blue-muted);
  margin: 0;
  max-width: 44ch;
}

/* Dietary and allergen tags. Green is allowed here as a border accent, never
   as the sole carrier of meaning, so the text is always readable on its own. */
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
/* Tags appear on cobalt (The Pass) and on bone (/menu, /the-food). Hard coding
   the on-cobalt colours here made every allergen tag on the menu page white on
   bone, at 1.07:1. Using the context flipped tokens means a tag is correct
   wherever it is dropped, which is the whole point of having the tokens. */
.tag {
  font-size: 0.6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  padding: .28rem .55rem;
  border: 1px solid var(--bt-line);
  border-radius: var(--radius);
  color: var(--bt-muted);
}
.tag--diet { border-color: var(--bt-green); color: var(--bt-strong); }

.pass__standfirst {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--bt-on-blue-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  justify-content: space-between;
}
.pass__standfirst p {
  font-size: var(--t-lead);
  color: var(--bt-on-blue-muted);
  margin: 0;
  max-width: 46ch;
}

/* --- upgraded state: the sticky pass. Only applied when JS enables it. --- */
.pass.is-live .pass__grid { display: none; }

.pass__stagewrap { display: none; }
.pass.is-live .pass__stagewrap { display: block; position: relative; }

/* Flex column rather than a grid: the stage has three children (window,
   caption, ticks) and an explicit two row template pushed the third into an
   implicit row, spreading them down the viewport instead of grouping them. */
.pass__stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  padding-block: clamp(1rem, 3vw, 2rem);
  overflow: hidden;
}

/* The service window itself. Fixed. Only the food inside it moves. */
.pass__window {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  width: min(88vw, 720px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bt-blue-deep);
  box-shadow: var(--shadow-plate);
}
/* The lip of the pass: a warm hairline along the bottom edge of the window */
.pass__window::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--bt-green);
  opacity: .85;
  z-index: 2;
}

.pass__track {
  display: flex;
  height: 100%;
  width: 100%;
  will-change: transform;
}
.pass__slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}
.pass__slide picture {
  display: block;
  width: 100%; height: 100%;
}
.pass__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* The caption block is fixed in place. Its contents crossfade.
   All captions stack in one grid cell rather than being absolutely
   positioned, so the block sizes itself to the tallest caption and the
   progress ticks below it can never be overlapped. */
.pass__caption {
  display: grid;
  flex: 0 0 auto;
  text-align: center;
  width: min(92vw, 620px);
}
.pass__cap {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.pass__cap.is-active { opacity: 1; transform: none; pointer-events: auto; }
.pass__cap .tag-row { justify-content: center; }
.pass__cap h3 {
  font-size: var(--t-h3);
  margin: 0 0 .35rem;
}
.pass__cap p {
  font-size: var(--t-small);
  color: var(--bt-on-blue-muted);
  margin: 0 auto;
  max-width: 52ch;
}

/* Progress, as a row of ticks along the pass. Not a decorative flourish: it
   tells the visitor how much service is left so the section never feels like
   a scroll trap. */
.pass__ticks {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  gap: .4rem;
}
.pass__tick {
  width: 22px; height: 2px;
  background: var(--bt-on-blue-line);
  transition: background .3s var(--ease);
}
.pass__tick.is-active { background: var(--bt-green); }

/* --- coarse pointer or narrow viewport: a horizontal snap scroller --- */
@media (max-width: 767px), (pointer: coarse) {
  .pass.is-live .pass__stagewrap { display: none; }
  .pass.is-live .pass__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 320px);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .pass.is-live .plate { scroll-snap-align: start; }
}


/* 12b  THE DISH LIST, /the-food
   ==========================================================================
   The Pass is the only spectacle on the site, so the dedicated food page is
   deliberately calm: an alternating editorial list where each dish gets room
   to be read rather than performed. Same plates, different job. */
.dishes { display: grid; gap: clamp(3rem, 7vw, 6rem); }

.dish {
  display: grid;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  margin: 0;
}
@media (min-width: 860px) {
  .dish { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Alternate the side the plate sits on, so the eye zigzags down the page
     instead of running down a single rail. */
  .dish:nth-child(even) .dish__media { order: 2; }
}

.dish__media { margin: 0; position: relative; }
.dish__media picture { display: block; }
.dish__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 26px 56px -30px rgba(0,26,61,.55);
}
/* Portrait sources such as the lemonade are framed taller so the glass is not
   cropped to an abstract band. */
.dish--tall .dish__media img { aspect-ratio: 3 / 4; }

.dish__body h2 {
  font-size: var(--t-h2);
  margin-bottom: .35rem;
}
.dish__sub {
  font-family: var(--font-body);
  font-size: var(--t-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bt-muted);
  margin-bottom: var(--stack);
}
.dish__body p { font-size: var(--t-lead); line-height: 1.55; }
.dish .tag-row { margin-top: 1.25rem; }

/* The allergen limitation statement. Required on the menu and in the FAQ.
   Deliberately plain rather than styled down, because burying it is the
   failure mode this exists to prevent. */
.allergen-note {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--bt-line);
  border-left: 3px solid var(--bt-green);
  border-radius: var(--radius);
  background: var(--bt-blue-tint);
  font-size: var(--t-small);
}
.allergen-note h2 {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.allergen-note p { max-width: 76ch; }



/* 12b  WHAT PEOPLE SENT
   Real quotes, so they are allowed to be the loudest type on a linen field.
   Three columns on a wide screen, stacked below. The handle is the proof, so
   it never shrinks to a whisper.
   ========================================================================== */
.praise__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 860px) {
  .praise__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.praise__item {
  margin: 0;
  border-top: 2px solid var(--bt-blue);
  padding-top: 1.5rem;
}
.praise__item blockquote { margin: 0; }
.praise__item blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--bt-ink);
  margin: 0;
}
/* Typographic quotation marks, drawn rather than typed, so the quoted text
   itself stays exactly the characters the person wrote. */
.praise__item blockquote p::before { content: "\201C"; }
.praise__item blockquote p::after  { content: "\201D"; }

.praise__item figcaption {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.praise__handle {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--bt-strong);
}
.praise__role {
  font-size: var(--t-small);
  font-style: italic;
  color: var(--bt-muted);
}

/* 13  CHEF AL
   ========================================================================== */
.chef { background: var(--bt-linen); }
.chef__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .chef__grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); }
}
.chef__portrait { margin: 0; }
.chef__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;   /* holds his face, crops the floor */
  border-radius: var(--radius);
  box-shadow: 0 24px 50px -28px rgba(0,26,61,.5);
}
.chef__portrait figcaption {
  font-size: var(--t-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bt-muted);
  margin-top: .75rem;
}
.chef h2 { margin-bottom: var(--stack); max-width: 18ch; }
.chef__says {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bt-line);
  font-size: var(--t-small);
  color: var(--bt-muted);
}


/* 14  HOW IT WORKS
   ========================================================================== */
.steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
}
@media (min-width: 800px) {
  .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.steps__item {
  counter-increment: step;
  border-top: 2px solid var(--bt-blue);
  padding-top: 1.25rem;
}
.steps__item h3 {
  font-size: var(--t-h4);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 .5rem;
}
.steps__item p { font-size: var(--t-small); color: var(--bt-muted); margin: 0; }

/* The step marker is a plated dot on the rule, not a numbered folio. */
.steps__item h3::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bt-green);
  margin-right: .6rem;
  vertical-align: .18em;
}



/* 14b  THE CATERING MENU
   126 dishes. The design problem is scanning, not decoration: hairlines rather
   than 126 cards, columns rather than one long ribbon, and the course title
   pinned left on wide screens so you always know where you are.
   ========================================================================== */
.collection-keys {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 760px) {
  .collection-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.collection-key { border-top: 2px solid var(--bt-blue); padding-top: 1.1rem; }
.collection-key h2 {
  font-size: var(--t-h3);
  line-height: 1.15;
  margin: 0 0 .5rem;
}
.collection-key p { margin: 0; color: var(--bt-muted); max-width: 44ch; }

.menu-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.menu-controls__group { display: flex; align-items: baseline; flex-wrap: wrap; gap: .75rem; }
.menu-controls__label {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-muted);
}
.menu-controls__count {
  margin: 0;
  font-size: var(--t-small);
  color: var(--bt-muted);
  font-variant-numeric: tabular-nums;
}
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-btn {
  font: inherit;
  font-size: var(--t-small);
  /* 44px tall, so the row is thumb sized on a phone. */
  padding: .65rem 1.1rem;
  min-height: 44px;
  background: transparent;
  color: var(--bt-ink);
  border: 1px solid var(--bt-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.filter-btn:hover { border-color: var(--bt-blue); color: var(--bt-blue); }
.filter-btn.is-on {
  background: var(--bt-blue);
  border-color: var(--bt-blue);
  color: var(--bt-on-blue);
}

.jump-nav { margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.jump-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 .55rem;
  border-top: 1px solid var(--bt-line);
  padding-top: 1.1rem;
}
.jump-nav a {
  font-size: var(--t-small);
  color: var(--bt-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  /* 44px, not negotiable. An index of fifteen courses is exactly the control a
     thumb reaches for first, and it was shipping at 36. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 .35rem;
  white-space: nowrap;
}
.jump-nav a:hover { color: var(--bt-blue); border-bottom-color: var(--bt-green); }
@media (max-width: 759.98px) {
  /* One scrolling strip rather than six stacked rows. The scroll lives inside
     this container, so the page body still never scrolls sideways. */
  .jump-nav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0 .55rem;
  }
  .jump-nav ul::-webkit-scrollbar { display: none; }
  .jump-nav li { flex: 0 0 auto; }
}

.course + .course { margin-top: clamp(3rem, 7vw, 5rem); }
.course__title {
  font-size: var(--t-h3);
  line-height: 1.1;
  margin: 0 0 1.5rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--bt-line);
}
@media (min-width: 1000px) {
  /* The course title becomes a running head in the margin, which is what an
     actual printed menu does and what makes 126 dishes navigable. */
  .course { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0 clamp(2rem, 4vw, 3.5rem); }
  .course__title {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    align-self: start;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    max-width: 11ch;
  }
}

.dish-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
@media (min-width: 620px) {
  .dish-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
}
.dish-list__item {
  border-top: 1px solid var(--bt-line);
  padding: 1.15rem 0;
}
/* The first row of each column should not double the rule against the course
   heading above it, and on one column only the very first item is a first row. */
@media (min-width: 620px) {
  .dish-list__item:nth-child(-n+2) { border-top: 0; padding-top: 0; }
}
@media (max-width: 619.98px) {
  .dish-list__item:first-child { border-top: 0; padding-top: 0; }
}
.dish-list__item h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  /* 1.25 rather than 1.15: the capital E acute in the two Etouffee titles
     sits 2px above a 1.15 line box. Nothing clips it, but it should not be
     one stylesheet change away from being clipped. */
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 .35rem;
}
.dish-list__item p {
  margin: 0;
  color: var(--bt-muted);
  font-size: var(--t-small);
  line-height: 1.55;
  max-width: 42ch;
}
.dish-list__link { margin-top: .5rem !important; }
.dish-list__link .link { font-size: var(--t-small); }

/* A hidden course still occupies a grid row without this. */
[data-course][hidden], .dish-list__item[hidden], .jump-nav li[hidden] { display: none; }


/* The Heritage / Premium model.
   A guest has one question on this page: how many of these do I get, and which
   ones spend my Premium allowance. The table answers the first, the tag on the
   dish and the label on the course answer the second.
   ========================================================================== */
.course__counts {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-muted);
  margin-top: .5rem;
}
.dish-list__level {
  display: inline-block;
  margin: 0 0 .35rem;
  padding: .15rem .5rem;
  border: 1px solid var(--bt-blue);
  border-radius: var(--radius);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bt-blue);
}

.allowance { margin-top: clamp(2rem, 5vw, 3rem); overflow-x: auto; }
.allowance table {
  width: 100%;
  min-width: 34rem;          /* below this it scrolls rather than crushes */
  border-collapse: collapse;
  text-align: left;
}
.allowance caption {
  text-align: left;
  font-size: var(--t-small);
  color: var(--bt-muted);
  padding-bottom: .9rem;
}
.allowance th, .allowance td {
  border-top: 1px solid var(--bt-line);
  padding: .9rem 1rem .9rem 0;
  vertical-align: top;
}
.allowance thead th {
  border-top: 0;
  border-bottom: 2px solid var(--bt-blue);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-muted);
  font-weight: 600;
  padding-bottom: .7rem;
}
.allowance tbody th {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  white-space: nowrap;
  padding-right: 1.5rem;
}
.allowance td strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}
.allowance td span {
  display: block;
  font-size: var(--t-small);
  color: var(--bt-muted);
  margin-top: .25rem;
}


/* The upgrade rate card. One place, by category, because a price beside every
   one of 126 dishes reads as a spreadsheet rather than a menu.
   ========================================================================== */
.rate-card {
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 2px solid var(--bt-blue);
  padding-top: 1.5rem;
  max-width: 34rem;
}
.rate-card h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.15;
  margin: 0 0 1rem;
}
.rate-card ul { list-style: none; margin: 0; padding: 0; }
.rate-card li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--bt-line);
}
.rate-card__what { color: var(--bt-ink); }
.rate-card__cost {
  font-family: var(--font-display);
  font-size: 1.25rem;
  white-space: nowrap;
  color: var(--bt-blue);
}
.rate-card__cost small {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--bt-muted);
}
.rate-card p {
  margin: 1rem 0 0;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--bt-muted);
}
/* Market priced is a different kind of thing from Premium, so it does not
   borrow the same blue. */
.dish-list__level--market {
  border-color: var(--bt-muted);
  color: var(--bt-muted);
  margin-left: .35rem;
}

/* 15  THE HONEST ANSWERS, FAQ
   ==========================================================================
   Native details and summary, so it opens and closes with zero JavaScript and
   is keyboard operable for free. The visible text mirrors the FAQPage schema
   one to one. */
.faq__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); align-items: start; }
}
.faq__list { border-top: 1px solid var(--bt-line); }

.faq__item { border-bottom: 1px solid var(--bt-line); }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-family: var(--font-body);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  position: absolute;
  right: .35rem;
  top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-right: 2px solid var(--bt-blue);
  border-bottom: 2px solid var(--bt-blue);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .22s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item summary:hover { color: var(--bt-blue); }

.faq__answer {
  padding: 0 0 1.4rem;
  color: var(--bt-muted);
  max-width: var(--measure);
}
.faq__answer p { margin-bottom: .75rem; }
.faq__answer p:last-child { margin-bottom: 0; }


/* 16  INQUIRY FORM
   ==========================================================================
   The only conversion the site has in Phase 1, so it is the most reliable
   thing on it. It posts to a Netlify function that reads a real response, and
   it degrades to a native Netlify Forms POST when JavaScript is unavailable. */
.inquire { background: var(--bt-blue-ink); color: var(--bt-on-blue); }
.inquire__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
/* An author display beats the UA [hidden] rule. Without this the
   checkout form renders under "Your order is empty" and can be
   filled in and submitted with nothing in the cart. */
.inquire__grid[hidden] { display: none; }
@media (min-width: 940px) {
  .inquire__grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); align-items: start; }
}
.inquire h2 { margin-bottom: var(--stack); }

.inquire__aside { font-size: var(--t-small); color: var(--bt-on-blue-muted); }
.inquire__aside a { color: #fff; }
.inquire__direct {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bt-line);
}
.inquire__direct dt {
  font-size: var(--t-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Context token, not the on-blue one: this dl now also appears on bone
     (the press page), where the hardcoded on-blue muted measured 1.07:1. On
     cobalt sections the context flip restores the exact same value. */
  color: var(--bt-muted);
  margin-bottom: .3rem;
}
.inquire__direct dd {
  margin: 0 0 1rem;
  font-size: 1.125rem;
}
.inquire__direct dd a { text-decoration: none; color: #fff; }
.inquire__direct dd a:hover { text-decoration: underline; }

.field { margin-bottom: 1.1rem; }
.field > label {
  display: block;
  font-size: var(--t-small);
  font-weight: 500;
  margin-bottom: .4rem;
}
.field .req { color: var(--bt-green); }
.field__hint {
  display: block;
  font-size: var(--t-eyebrow);
  letter-spacing: .02em;
  color: var(--bt-on-blue-muted);
  margin-top: .35rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--radius);
  color: #fff;
  padding: .8rem .9rem;
  min-height: 48px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(255,255,255,.42); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(255,255,255,.4); }
.field input:focus,
.field select:focus,
.field textarea:focus { background: rgba(255,255,255,.10); border-color: #fff; }

/* Native select needs an explicit dark option colour on Windows */
.field select option { background: var(--bt-blue-ink); color: #fff; }

.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* Honeypot. Off screen rather than display none, so bots that check
   computed style still fill it. Hidden from assistive tech and from tab order. */
.hp {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  margin: 1.25rem 0;
  font-size: var(--t-eyebrow);
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--bt-on-blue-muted);
}
.consent input[type="checkbox"] {
  width: 18px; height: 18px;
  min-height: 0;
  margin-top: .15rem;
  accent-color: var(--bt-green);
}
.consent a { color: #fff; }

/* Carried over from a catering card. Stated out loud rather than silently
   preselected, because a form that fills itself in without saying so reads as
   a mistake the visitor has to hunt for. */
.form__prefill {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--bt-strong);
  background: rgba(255, 255, 255, .07);
  border-left: 3px solid var(--bt-green);
  padding: .75rem .95rem;
  margin: 0 0 1.35rem;
  border-radius: 2px;
}

.form__foot { margin-top: 1.25rem; }
.form__reassure {
  font-size: var(--t-small);
  color: var(--bt-on-blue-muted);
  margin-top: .9rem;
}

/* Honest confirmation. Success shows only on a confirmed success response.
   Failure shows a real fallback so a lead is never lost in silence. */
.form__status {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: var(--t-small);
}
.form__status[hidden] { display: none; }
.form__status--ok {
  background: rgba(118,166,61,.14);
  border-color: var(--bt-green);
  color: #fff;
}
.form__status--err {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.form__status a { color: #fff; font-weight: 600; }


/* 16b  PROSE, the legal pages
   ========================================================================== */
.prose { max-width: 72ch; }
.prose h2 {
  font-size: var(--t-h3);
  margin: clamp(2.25rem, 5vw, 3rem) 0 .75rem;
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--bt-line);
}
.prose h2:first-of-type { border-top: 0; padding-top: 0; }
.prose h3 {
  font-family: var(--font-body);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: 0;
  margin: 1.75rem 0 .5rem;
}
.prose p, .prose li { color: var(--bt-muted); }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 var(--stack); max-width: var(--measure); }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--bt-blue); text-underline-offset: .2em; }
.prose__updated {
  font-size: var(--t-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bt-muted);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
/* Clauses carriers and regulators look for specifically. Called out so they
   cannot be missed in a review, and so nobody quietly deletes one. */
.prose .clause {
  background: var(--bt-blue-tint);
  border-left: 3px solid var(--bt-blue);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin: 0 0 var(--stack);
  color: var(--bt-ink);
  max-width: var(--measure);
}


/* 16c  THE MENU AND THE CART
   ========================================================================== */
.menu-list { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }

.menu-item {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--bt-line);
  margin: 0;
}
@media (min-width: 760px) {
  .menu-item { grid-template-columns: 220px minmax(0, 1fr) auto; align-items: start; }
}
.menu-item:last-child { border-bottom: 0; }

.menu-item__media picture { display: block; }
.menu-item__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.menu-item__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.15;
  margin: 0 0 .3rem;
}
.menu-item__sub {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-muted);
  margin-bottom: .7rem;
}
.menu-item__desc { font-size: var(--t-small); color: var(--bt-muted); margin-bottom: .75rem; }

.menu-item__buy {
  display: grid;
  gap: .6rem;
  justify-items: start;
  min-width: 190px;
}
@media (min-width: 760px) { .menu-item__buy { justify-items: end; } }

.price {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--bt-blue);
}
.price small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-muted);
  margin-top: .35rem;
}

.menu-item select,
.menu-item input[type="number"] {
  border: 1px solid var(--bt-line);
  border-radius: var(--radius);
  background: #fff;
  padding: .55rem .7rem;
  min-height: 44px;
  width: 100%;
  max-width: 190px;
}

/* Add ons live in a native disclosure so they cost nothing until wanted. */
.addons { width: 100%; max-width: 320px; }
.addons summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--t-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bt-blue);
  padding: .35rem 0;
}
.addons summary::-webkit-details-marker { display: none; }
.addons summary::before { content: '+ '; }
.addons[open] summary::before { content: '\2212  '; }
.addons__list { display: grid; gap: .4rem; padding: .5rem 0 .25rem; }
.addons__list label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .5rem;
  align-items: center;
  font-size: var(--t-small);
  color: var(--bt-muted);
}
.addons__list input { accent-color: var(--bt-blue); width: 16px; height: 16px; }

/* No JavaScript means no cart. Rather than leaving seven buttons that look
   like controls and do nothing, the buy column is hidden and a single phone
   fallback takes its place. The menu itself stays completely readable, which
   is the point: a visitor with no JS can still see every dish, every price
   and every allergen, and can still order, just by calling. */
.no-js .menu-item__buy { display: none; }
.js [data-nojs-order] { display: none; }

.nojs-order {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--bt-line);
  border-left: 3px solid var(--bt-blue);
  border-radius: var(--radius);
  background: var(--bt-blue-tint);
  margin-bottom: clamp(2rem, 4vw, 2.5rem);
}
.nojs-order p { margin: 0; font-size: var(--t-small); }

/* --- the cart drawer ------------------------------------------------- */
.cart-btn { position: relative; }
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 .3rem;
  margin-left: .4rem;
  border-radius: 10px;
  background: var(--bt-green);
  /* Ink, not white: the brand green carries white at only 2.88:1. Same
     finding, same fix, as the "Most popular" tier badge. */
  color: var(--bt-blue-ink);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: 0;
}
.cart-count[hidden] { display: none; }

.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0,26,61,.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.cart-scrim.is-open { opacity: 1; visibility: visible; }

.cart {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 160;
  width: min(100%, 420px);
  background: var(--bt-bone);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  box-shadow: -20px 0 60px -20px rgba(0,17,45,.4);
}
.cart.is-open { transform: none; }

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--gutter);
  background: var(--bt-blue-ink);
  color: #fff;
}
.cart__head h2 {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}
.cart__close {
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: var(--radius);
  width: 44px; height: 44px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.cart__body { flex: 1; overflow-y: auto; padding: var(--gutter); }
.cart__empty { color: var(--bt-muted); font-size: var(--t-small); }

.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bt-line);
}
.cart-line__name { font-weight: 600; font-size: var(--t-small); }
.cart-line__meta { grid-column: 1 / -1; font-size: var(--t-eyebrow); color: var(--bt-muted); }
.cart-line__qty { display: flex; align-items: center; gap: .5rem; }
.cart-line__qty button {
  width: 30px; height: 30px;
  border: 1px solid var(--bt-line);
  background: #fff;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.cart__foot { padding: var(--gutter); border-top: 1px solid var(--bt-line); background: var(--bt-linen); }
.cart-totals { font-size: var(--t-small); margin-bottom: 1rem; }
.cart-totals div { display: flex; justify-content: space-between; padding: .22rem 0; }
.cart-totals .is-total {
  border-top: 1px solid var(--bt-line);
  margin-top: .45rem;
  padding-top: .6rem;
  font-weight: 700;
  font-size: 1.0625rem;
}
.cart-note { font-size: var(--t-eyebrow); color: var(--bt-muted); margin-top: .75rem; }


/* 16d  CATERING TIERS
   ==========================================================================
   Prices are shown as a starting figure only, never a range with a plus sign.
   A published ceiling with no delivered events behind it invites a question
   the business cannot yet answer. See data/catering.json. */
.tier-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tier-tabs a {
  padding: .8rem 1.35rem;
  border: 1px solid var(--bt-line);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bt-ink);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.tier-tabs a:hover { border-color: var(--bt-blue); color: var(--bt-blue); }

.tiers { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 980px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tier {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bt-line);
  border-radius: var(--radius);
  background: #fff;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
/* The top tier wears the ink, so the hierarchy is visible before it is read. */
.tier--label {
  background: var(--bt-blue-ink);
  border-color: var(--bt-blue-ink);
  color: var(--bt-on-blue);
  --bt-muted: var(--bt-on-blue-muted);
  --bt-line: var(--bt-on-blue-line);
}
.tier--label .tier__name,
.tier--label .price { color: #fff; }

.tier__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1;
  margin: 0 0 .3rem;
  color: var(--bt-blue-ink);
}
.tier__desc {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-muted);
  margin-bottom: 1.15rem;
}
.tier__price { margin-bottom: 1.15rem; }
.tier__for {
  font-size: var(--t-small);
  color: var(--bt-muted);
  padding-bottom: 1.15rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid var(--bt-line);
}
.tier__list { list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: var(--t-small); }
.tier__list li {
  padding-left: 1.15rem;
  position: relative;
  margin-bottom: .45rem;
  color: var(--bt-muted);
}
.tier__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bt-green);
}
.tier__foot { margin-top: auto; }
.tier__meta {
  font-size: var(--t-eyebrow);
  color: var(--bt-muted);
  margin-top: .9rem;
  letter-spacing: .02em;
}


/* 16e  CATERING, THE EXPERIENCE LADDER AND THE ESTIMATOR
   ========================================================================== */

/* The ladder is the sharpest qualifying device Chef Al gave us: three lines
   that let a host place themselves without reading a single price. */
/* Two sections that are really one argument. The ladder names the three
   experiences and the section directly beneath it prices them, so the standard
   rhythm between unrelated sections reads here as a dropped thread: at 1440px
   it opened 317px of empty page between a sentence and its own answer. */
.section--continues { padding-bottom: calc(var(--section-y) * 0.35); }
.section--continued { padding-top: calc(var(--section-y) * 0.5); }

.ladder { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 860px) { .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ladder__step {
  padding-top: 1.25rem;
  border-top: 2px solid var(--bt-blue);
}
.ladder__step:nth-child(2) { border-top-color: var(--bt-green); }
.ladder__step:nth-child(3) { border-top-color: var(--bt-blue-ink); }
.ladder__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.1;
  margin: 0 0 .2rem;
}
.ladder__desc {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-muted);
  margin-bottom: .85rem;
}
.ladder__step p { font-size: var(--t-small); color: var(--bt-muted); margin: 0; }

/* Badges. Only two tiers carry one, so the row has to hold its height whether
   a badge is present or not, or the three cards start at different y. */
.tier__badgerow { min-height: 1.9rem; margin-bottom: .5rem; }
.tier__badge {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: var(--radius);
  background: var(--bt-green);
  /* Ink, not white. The brand green carries white at only 2.88:1, which fails
     AA at this size, and darkening the green to rescue white would quietly
     shift a brand colour. Ink on the true brand green measures 6.00:1. */
  color: var(--bt-blue-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tier--label .tier__badge { background: #fff; color: var(--bt-blue-ink); }

.tier__rate {
  font-size: var(--t-small);
  color: var(--bt-muted);
  margin-top: -.6rem;
  margin-bottom: 1.15rem;
}

/* Example pricing. A published table a client can check with a calculator is
   worth more than any adjective about transparency. */
.tier__examples {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  margin-bottom: 1.15rem;
}
.tier__examples th {
  text-align: left;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-muted);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--bt-line);
}
.tier__examples th:last-child, .tier__examples td:last-child { text-align: right; }
.tier__examples td { padding: .4rem 0; color: var(--bt-muted); }
.tier__examples tr + tr td { border-top: 1px solid var(--bt-line); }

/* --- the estimator ---------------------------------------------------
   Enter a guest count, see the starting investment for whichever tiers fit.
   It is arithmetic on published figures, not a quote, and it says so. */
.estimator {
  background: var(--bt-blue-tint);
  border: 1px solid var(--bt-line);
  border-left: 3px solid var(--bt-blue);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.estimator__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.estimator label {
  display: block;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-muted);
  margin-bottom: .45rem;
}
.estimator input[type="number"] {
  width: 9rem;
  padding: .7rem .8rem;
  min-height: 48px;
  border: 1px solid var(--bt-line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 1.125rem;
}
.estimator__out { display: grid; gap: .75rem; }
.estimate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--bt-line);
  border-radius: var(--radius);
}
.estimate__name { font-weight: 600; }
.estimate__name small {
  display: block;
  font-weight: 400;
  font-size: var(--t-eyebrow);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bt-muted);
  margin-top: .2rem;
}
.estimate__figure {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--bt-blue);
  white-space: nowrap;
}
.estimate--none { color: var(--bt-muted); font-size: var(--t-small); display: block; }
.estimator__note { font-size: var(--t-eyebrow); color: var(--bt-muted); margin-top: 1.15rem; }

/* --- full tier detail ------------------------------------------------- */
.detail { border-top: 1px solid var(--bt-line); }
.detail__item { border-bottom: 1px solid var(--bt-line); }
.detail__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.15;
}
.detail__item summary::-webkit-details-marker { display: none; }
.detail__item summary::after {
  content: '';
  position: absolute;
  right: .35rem; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-right: 2px solid var(--bt-blue);
  border-bottom: 2px solid var(--bt-blue);
  transform: rotate(45deg);
  transition: transform .22s var(--ease);
}
.detail__item[open] summary::after { transform: rotate(-135deg); }
.detail__item summary span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-muted);
  margin-top: .3rem;
}

.detail__body { padding-bottom: 1.75rem; }
/* Multi column, not grid. These blocks have wildly different lengths: a food
   list of six sits beside an "ideal for" list of ten, and in a grid every cell
   in a row is dragged to the tallest one, opening holes of dead space the
   reader has to scroll past. Columns pack the blocks instead, so the panel
   reads as one dense specification rather than a sparse table. */
.detail__grid { column-gap: clamp(1.25rem, 3vw, 2.25rem); }
.detail__grid > * {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 760px)  { .detail__grid { column-count: 2; } }
@media (min-width: 1200px) { .detail__grid { column-count: 3; } }

.detail__block h4 {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-blue);
  margin: 0 0 .6rem;
}
.detail__block ul { list-style: none; margin: 0; padding: 0; font-size: var(--t-small); }
.detail__block li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: .35rem;
  color: var(--bt-muted);
}
.detail__block li::before {
  content: '';
  position: absolute;
  left: 0; top: .58em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bt-green);
}
.detail__block p { font-size: var(--t-small); color: var(--bt-muted); margin: 0; }
.detail__note {
  grid-column: 1 / -1;
  font-size: var(--t-small);
  color: var(--bt-muted);
  padding-top: 1rem;
  border-top: 1px solid var(--bt-line);
}

.addons-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.addons-table td { padding: .38rem 0; color: var(--bt-muted); vertical-align: top; }
.addons-table td:last-child { text-align: right; white-space: nowrap; padding-left: 1rem; }
.addons-table tr + tr td { border-top: 1px solid var(--bt-line); }


/* 17  FOOTER
   ========================================================================== */
.site-footer {
  background: var(--bt-blue-ink);
  color: var(--bt-on-blue-muted);
  padding-block: clamp(3rem, 7vw, 5rem) 2rem;
  font-size: var(--t-small);
}
.site-footer a { color: var(--bt-on-blue-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); }
}
.footer__brand img { height: 60px; width: auto; margin-bottom: 1.1rem; }
.footer__brand p { max-width: 38ch; }
.footer__tagline {
  font-size: var(--t-h3);
  margin: 0 0 0.75rem;
}

.footer__col h2 {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 .9rem;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: .5rem; }

.footer__legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--t-eyebrow);
  letter-spacing: .02em;
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }


/* 18  STICKY MOBILE ACTION BAR
   ==========================================================================
   His buyers are a tap to call audience and he works 11am to 6pm. The phone
   path is never more than one thumb away. */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,.16);
  border-top: 1px solid rgba(255,255,255,.16);
  transform: translateY(100%);
  transition: transform .28s var(--ease);
}
.action-bar.is-visible { transform: none; }
.action-bar a {
  background: var(--bt-blue-ink);
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: .95rem .5rem;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-size: var(--t-small);
  font-weight: 600;
}
.action-bar a + a { background: var(--bt-blue); }

@media (min-width: 900px) { .action-bar { display: none; } }

/* Keep the bar from covering the end of the page */
body.has-action-bar { padding-bottom: 0; }
@media (max-width: 899px) {
  body.has-action-bar .site-footer { padding-bottom: calc(2rem + 56px); }
}


/* 19  MOTION AND REVEALS
   ==========================================================================
   Motion is response, not decoration: small amplitudes, one easing family,
   transform and opacity only. Reveals are opt in via JS, so with no JS every
   element is simply already visible. */
.reveal { opacity: 1; }
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal--d1 { transition-delay: .08s; }
.js .reveal--d2 { transition-delay: .16s; }
.js .reveal--d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .action-bar { transition: none; }
  /* The Pass falls back to the calm static grid. */
  .pass.is-live .pass__stagewrap { display: none !important; }
  .pass.is-live .pass__grid { display: grid !important; }
}


/* 20  UTILITIES
   ========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.nowrap { white-space: nowrap; }

@media print {
  .site-header, .action-bar, .nav-toggle, .mobile-nav, .pass__stagewrap { display: none !important; }
  body { background: #fff; color: #000; }
  .section--blue, .section--deep, .inquire, .site-footer, .pass, .hero {
    background: #fff !important;
    color: #000 !important;
  }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* The accordion label is an h3 so the outline runs h2, h3, h4 rather than
   skipping a level. It must still look and size exactly like the summary text
   it replaced, so the heading is stripped back to inline type here. */
.detail__item summary h3 {
  display: inline;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

.estimate__note {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--bt-muted);
  margin: .9rem 0 0;
}

/* The estimate row is a control. It has to say so without shouting, because it
   is sitting underneath a number the reader is still absorbing. */
a.estimate {
  text-decoration: none;
  position: relative;
  padding-right: 2.4rem;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
a.estimate::after {
  content: '';
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-right: 1.5px solid var(--bt-blue);
  border-top: 1.5px solid var(--bt-blue);
  transform: rotate(45deg);
  opacity: .55;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
a.estimate:hover,
a.estimate:focus-visible { border-color: var(--bt-blue); }
a.estimate:hover::after,
a.estimate:focus-visible::after { opacity: 1; transform: rotate(45deg) translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
  a.estimate, a.estimate::after { transition: none; }
  a.estimate:hover::after { transform: rotate(45deg); }
}

/* CARD PAYMENT ------------------------------------------------------------
   Square renders the card fields inside its own iframes, so this styles the
   frame around them rather than the inputs themselves. The height is reserved
   so the button does not jump down the page when the iframe finishes loading. */
.pay { margin: 0 0 1.5rem; }

.pay__card {
  min-height: 92px;
  padding: .35rem .75rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--bt-on-blue-line);
  border-radius: var(--radius);
}

.pay__wallets { display: grid; gap: .6rem; margin-bottom: 1.1rem; }
.pay__wallets[hidden] { display: none; }
/* PayPal renders its own button into this, so it only needs room and a floor
   under the height so the layout does not jump when the SDK arrives. */
.pay__paypal { margin-bottom: 1.1rem; min-height: 48px; }
.pay__paypal[hidden] { display: none; }
.pay__wallets > div { min-height: 48px; }

/* The separator between paying with a wallet and typing a card. */
.pay__or {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.1rem;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-muted);
}
.pay__or[hidden] { display: none; }
.pay__or::before,
.pay__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bt-on-blue-line);
}

/* Square's own error text, kept legible on cobalt. */
.pay__error {
  margin: .6rem 0 0;
  font-size: var(--t-small);
  color: #FFB4A8;
}

/* PRESS PAGE --------------------------------------------------------------
   A fact sheet reads as a fact sheet: generous line height, hard left edge,
   one rule between entries. */
.press-list { list-style: none; padding: 0; margin: 0; }
.press-list li {
  padding: .9rem 0;
  border-top: 1px solid var(--bt-line);
  line-height: 1.65;
}
.press-list li:last-child { border-bottom: 1px solid var(--bt-line); }

/* The as-featured strip. Ships commented out in index.html and is published
   by uncommenting AFTER the segment airs, so the style has to already be
   here. Quiet by design: proof does not shout. */
.hero__press {
  margin: 1.1rem 0 0;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-on-blue-muted);
}
.hero__press a { color: #fff; }

/* PAYMENT POLICY ----------------------------------------------------------
   Terms people are about to be held to, set to be read rather than skimmed
   past: each clause on its own line, a rule between them, and the heading
   carrying the weight so the shape of the policy is legible at a glance. */
.policy { margin: 0; }
.policy dt {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bt-strong);
  padding-top: 1.15rem;
  border-top: 1px solid var(--bt-line);
}
.policy dd {
  margin: .5rem 0 1.15rem;
  line-height: 1.65;
  color: var(--bt-muted);
}
.policy dd:last-of-type { margin-bottom: 0; }
.policy__ack {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bt-line);
  font-size: var(--t-small);
  color: var(--bt-muted);
}