/* MamChef website: shared styles (all pages).
   Colours (T-20261024-03): the brand is THREE colours, rust leads: rust #b93d22 (hero + closing walls, every button, link,
   number, rust glow on rust walls), forest #15392f (one calm band per page: home .why, /chefs .ch-kitchen; heading text via
   --ink, body via --umber/--taupe greens), gold #eba743 (accent on dark only: highlight words + underlines, icons, eyebrows,
   links, hats; never on cream, never on rust-500 surfaces: white there). Other dark bands + footer = neutral charcoal.
   Light-rust tints are sparing (rust-100 chip only). Semantic ok/err/warn/info unchanged. rgba() uses the same triplets:
   ink = forest 21,57,47 | deep 44,83,70 | mint 194,225,215 | gold 235,167,67 | ember 42,19,14 | ember-card 59,28,20
   blush 243,217,205 | rust-300 232,160,142 | rust-400 217,103,76 | rust-500 185,61,34 | rust-600 159,49,25
   rust-700 127,38,19 | white 255,255,255 | char 31,29,27 | char-card 42,39,36
   app zone only: sage 82,124,112 | night 15,42,34 */

:root {
  color-scheme: only light; /* "only" = opt out of browser auto-dark / forced dark mode (plain "light" does not) */
  /* original app tokens (values frozen). forest/deep/mint/gold are also brand chrome tokens since T-20261024-03 (see header);
     sage/paper/night/... stay app zone only (real app UI inside the phone/chef mock-ups + hidden BizzChef block). */
  --forest: #15392f; --deep: #2c5346; --sage: #527c70; --mint: #c2e1d7;
  --gold: #eba743; --rust: #b93d22; --paper: #f5f5f5; --white: #ffffff;
  --night: #0f2a22; --night-card: #163a30; --night-input: #12332a;
  --sage-lt: #8aa89e; --rust-lt: #e8a08e; --rust-pale: #f7e4df;
  /* site chrome (T-20261024-01, T-20261024-03): rust family + neutrals, see header */
  --rust-50: #fbf0ec; --rust-100: #f7e4df; --rust-200: #efc6ba; --rust-300: #e8a08e; --rust-400: #d9674c;
  --rust-500: #b93d22; --rust-600: #9f3119; --rust-700: #7f2613; --rust-800: #5c1b0e;
  --cream: #fbf6f0; --sand: #f3e9df; --line: #e6d6c8; --ink: #15392f; --umber: #2c5346; --taupe: #47695c;
  --ember: #2a130e; --ember-card: #3b1c14; --char: #1f1d1b; --char-card: #2a2724; --on-dark: #ffffff; --on-rust: #fff1e8; --blush: #f3d9cd; --blush-dim: #c9a89a;
  --ok: #2e7d4f; --err: #b3173e; --warn: #eba743; --warn-text: #8a5a00; --info: #2f6f8f;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --r1: 12px; --r2: 20px; --r3: 32px;
  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 32px);
  --hdr-h: 64px;
  --display: "Bricolage Grotesque", "MC Display Fallback", Arial, sans-serif;
  --text: "MC Text", "MC Text Fallback", Arial, sans-serif;
  --glass: rgba(42, 19, 14, .82);
  --hair-dark: rgba(243, 217, 205, .22);
  --shadow-1: 0 1px 2px rgba(42, 19, 14, .06), 0 8px 24px rgba(42, 19, 14, .08);
  --shadow-2: 0 2px 6px rgba(42, 19, 14, .08), 0 24px 60px rgba(42, 19, 14, .16);
}
@media (min-width: 1600px) { :root { --wrap: 1320px; } }

/* Fonts: self-hosted (OFL, see assets/fonts/README.txt). Fallbacks are metric-matched to cut layout shift. */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-600-800.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "MC Text"; src: url("../fonts/mc-text-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "MC Text"; src: url("../fonts/mc-text-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "MC Display Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); size-adjust: 94.94%; ascent-override: 97.96%; descent-override: 28.44%; line-gap-override: 0%; }
@font-face { font-family: "MC Text Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 98.85%; ascent-override: 99.85%; descent-override: 21.55%; line-gap-override: 0%; }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 28px); }
html:not(.motion-off) { scroll-behavior: smooth; }
body {
  font-family: var(--text); font-size: 1.0625rem; line-height: 1.6; color: var(--ink);
  background: var(--cream); overflow-x: hidden; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }
em { font-style: normal; }
strong { font-weight: 700; }
[hidden] { display: none !important; }

/* i18n: while a stored/browser LT choice is applied, hide the EN flash (fail-safe reveal after 1.2 s) */
.i18n-wait body { opacity: 0; animation: i18n-show 0s 1.2s forwards; }
@keyframes i18n-show { to { opacity: 1; } }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Focus: 3 px ring, ink on light, warm white (on-rust) on dark */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible, .site-header :focus-visible, .sheet :focus-visible, .site-footer :focus-visible { outline-color: var(--on-rust); }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 200; padding: 12px 18px; border-radius: 999px;
  background: var(--on-rust); color: var(--rust-700); font-family: var(--display); font-weight: 650; text-decoration: none;
  transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

/* Type helpers */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600;
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rust-600);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.dark .eyebrow { color: var(--blush); }
.h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); font-weight: 800; margin-top: 14px; }
.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--umber); max-width: 60ch; }
.dark .lead { color: var(--blush); }
.dark { color: var(--white); }

/* Buttons (targets >= 44 px) */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; overflow: hidden; isolation: isolate;
  font-family: var(--display); font-weight: 650; font-size: 1.0625rem; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; border: 1.5px solid transparent;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
/* .btn-gold = primary CTA on dark/rust bands (class name kept, markup unchanged): warm-white pill, rust-700 label */
.btn-gold { background: var(--on-rust); color: var(--rust-700); box-shadow: 0 8px 24px rgba(217, 103, 76, .28), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-gold:hover { background: var(--white); box-shadow: 0 14px 36px rgba(217, 103, 76, .42), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
.btn-gold:hover::after { transform: translateX(120%); }
.btn-gold:active { background: var(--blush); color: var(--rust-800); }
.btn-glass { background: rgba(255, 255, 255, .08); color: var(--white); border-color: rgba(243, 217, 205, .4); }
.btn-glass:hover { background: rgba(255, 255, 255, .14); border-color: var(--gold); }
/* "Become a chef": dark pill with the real logo hat (gold) and a slowly turning gold-rust ring (site palette).
   Ring = rotating conic layer (::before, transform only) under an inner ember fill (::after); hover = lift, glow, light sweep. */
.btn-chef { color: var(--white); background: transparent; border: 0; padding: 0 26px 0 20px; box-shadow: 0 10px 28px rgba(42, 19, 14, .45); }
.btn-chef::before {
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: calc(100% + 56px); aspect-ratio: 1; pointer-events: none;
  translate: -50% -50%; background: conic-gradient(from 0deg, var(--gold), var(--rust-400) 30%, var(--rust-600) 50%, var(--rust-400) 70%, var(--gold));
  animation: chef-ring 5s linear infinite;
}
.btn-chef::after {
  content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, rgba(243, 217, 205, 0) 35%, rgba(243, 217, 205, .2) 50%, rgba(243, 217, 205, 0) 65%) no-repeat -150% 0 / 60% 100%,
    linear-gradient(160deg, var(--ember-card), var(--ember) 80%);
  transition: background-position .9s var(--ease);
}
@keyframes chef-ring { to { transform: rotate(1turn); } }
.btn-chef .hat { width: 22px; height: auto; color: var(--gold); transition: transform .45s var(--ease); }
.btn-chef:hover { box-shadow: 0 16px 38px rgba(42, 19, 14, .5), 0 0 26px rgba(217, 103, 76, .3); }
.btn-chef:hover::after { background-position: 250% 0, 0 0; }
.btn-chef:hover .hat { transform: rotate(-12deg) translateY(-1px); }
.btn-chef.btn-sm { padding: 0 18px 0 14px; }
.btn-chef.btn-sm .hat { width: 19px; }
.motion-off .btn-chef::before { animation: none; transform: rotate(35deg); }
.btn-forest { background: var(--rust-500); color: var(--white); box-shadow: var(--shadow-1); }
.btn-forest:hover { background: var(--rust-600); box-shadow: var(--shadow-2); }
.btn-forest:active { background: var(--rust-700); }
.btn-line { color: var(--rust-600); border-color: var(--rust-500); background: transparent; }
.btn-line:hover { background: var(--rust-500); color: var(--white); }

/* Inline wordmark / hat (from the SVG sprite at the top of <body>) */
.wm { width: 100%; height: auto; aspect-ratio: 754 / 210; fill: currentColor; }
.hat { aspect-ratio: 508 / 512; fill: currentColor; }

/* ---------- Header: floating glass pill ---------- */
.site-header {
  position: fixed; z-index: 100; top: 12px; left: 50%; width: min(var(--wrap), 100% - 24px);
  transform: translate(-50%, 0); transition: transform .5s var(--ease);
  color: var(--white);
}
.site-header.is-hidden { transform: translate(-50%, calc(-100% - 60px)); }
.site-header.is-moving { will-change: transform; } /* only while the hide/show slide runs (site.js) */
.hdr {
  display: flex; align-items: center; gap: 16px; height: var(--hdr-h); padding: 0 10px 0 22px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--hair-dark); /* same tint as before, no backdrop blur (T-20261023-07 r4: blur = scroll lag) */
  box-shadow: 0 12px 32px rgba(42, 19, 14, .22);
}
.brand { display: block; width: 124px; flex: none; color: var(--white); border-radius: 8px; }
.brand:hover { color: var(--gold); }
.hdr-nav { margin-left: auto; }
.hdr-nav ul { display: flex; gap: 2px; list-style: none; }
.hdr-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  color: var(--white); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: .9375rem;
  transition: background-color .25s, color .25s;
}
.hdr-nav a:hover { background: rgba(127, 38, 19, .35); color: var(--gold); }
.hdr-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hdr-nav + .hdr-tools { margin-left: 8px; }

.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(243, 217, 205, .1); border: 1px solid var(--hair-dark); }
.lang button {
  min-width: 44px; min-height: 38px; padding: 0 10px; border-radius: 999px; font-family: var(--display); font-weight: 650; font-size: .875rem;
  color: var(--white); letter-spacing: .04em; transition: background-color .25s, color .25s;
}
.lang button[aria-pressed="true"] { background: var(--on-rust); color: var(--rust-700); }
.lang button:not([aria-pressed="true"]):hover { background: rgba(42, 19, 14, .6); color: var(--gold); }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; flex: none;
  color: var(--white); border: 1px solid var(--hair-dark); background: rgba(243, 217, 205, .06);
  transition: background-color .25s, color .25s;
}
.icon-btn:hover { background: rgba(243, 217, 205, .16); color: var(--gold); }
.icon-btn svg { width: 18px; height: 18px; }

.burger { display: none; }
.burger span { position: relative; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease); }
.burger span::before { transform: translateY(-6px); }
.burger span::after { transform: translateY(6px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: rotate(-45deg); }

/* scroll progress (scroll-driven, progressive) */
.progress { position: absolute; left: 28px; right: 28px; bottom: -1px; height: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--rust-400)); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .progress i { animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* Nav hidden below 1100: logo, EN/LT, both CTAs and the burger spread over the bar (hdr-tools children join the .hdr flex row).
   Phones < 600 keep the bar minimal (logo, EN/LT, burger); the menu sheet holds both CTAs. (.hide-md is now hidden < 600 only.) */
@media (max-width: 1099px) {
  .hdr-nav { display: none; }
  .burger { display: inline-grid; }
  .hdr { justify-content: space-between; }
  .hdr-tools { display: contents; }
}
@media (max-width: 599px) {
  :root { --hdr-h: 58px; }
  .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: 10px; }
  .site-header { top: 8px; width: calc(100% - 16px); }
  .hdr { padding: 0 7px 0 16px; gap: 8px; }
  .brand { width: 108px; }
  .hdr-tools .hide-sm, .hdr-tools .hide-md { display: none; }
  .lang button { min-width: 40px; padding: 0 8px; }
}

/* Header CTAs never squeeze; small tablets (600-767) use a compact bar so logo, EN/LT, both CTAs and the burger fit */
.hdr-tools .btn { flex: none; }
@media (min-width: 600px) and (max-width: 767px) {
  .hdr { gap: 6px; padding: 0 8px 0 16px; }
  .brand { width: 100px; }
  .hdr-tools .btn-sm { padding: 0 12px; font-size: .875rem; }
  .hdr-tools .btn-chef.btn-sm { padding: 0 12px 0 10px; gap: 7px; }
  .hdr-tools .btn-chef.btn-sm .hat { width: 17px; }
  .lang button { min-width: 40px; padding: 0 8px; }
}

/* Mobile menu sheet */
.sheet {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--hdr-h) + 40px) var(--gut) 32px; color: var(--white);
  background: radial-gradient(120% 70% at 85% 0%, var(--rust-700), var(--ember) 60%);
  opacity: 0; transform: translateY(-12px); transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.sheet.is-open { opacity: 1; transform: none; }
.sheet ul { list-style: none; border-top: 1px solid var(--hair-dark); }
.sheet li { border-bottom: 1px solid var(--hair-dark); }
.sheet li a {
  display: flex; justify-content: space-between; align-items: center; min-height: 64px; color: var(--white);
  text-decoration: none; font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
}
.sheet li a::after { content: "\2192"; font-family: var(--text); color: var(--gold); font-size: 1.25rem; }
.sheet-ctas { display: grid; gap: 12px; margin-top: 28px; }
.sheet-ctas .btn { width: 100%; }
.sheet-mail { color: var(--gold); font-family: var(--display); font-weight: 600; text-underline-offset: 4px; }
.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
body.sheet-open { overflow: hidden; }
@media (min-width: 1100px) { .sheet { display: none !important; } }

/* ---------- Reveal + logo-hat motif ---------- */
.js .rv { opacity: 0; transform: translateY(-14px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }

/* The real MamChef hat draws its outline, then fills (section dividers, hero, footer) */
.hat-draw use { fill: currentColor; stroke: currentColor; stroke-width: var(--sw, 14); stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .hat-draw use { transition: stroke-dashoffset 1.6s var(--ease), fill .6s .9s ease; }
.js .hat-draw:not(.in) use { stroke-dashoffset: 1; fill: transparent; }
.hat-draw.outline-only use { fill: transparent !important; }
.divider { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--rust-500); }
.divider::before, .divider::after { content: ""; height: 1px; width: min(28vw, 220px); background: linear-gradient(90deg, transparent, var(--rust-500)); }
.divider::after { transform: scaleX(-1); }
.divider svg { width: 30px; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--char); color: var(--blush); padding: clamp(64px, 8vw, 112px) 0 28px; }
.site-footer::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 80%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(185, 61, 34, .28), transparent 70%);
}
.ft-grid { position: relative; display: grid; gap: 40px; grid-template-columns: 1.4fr repeat(3, 1fr); }
.ft-brand .wm { width: 168px; color: var(--white); }
.ft-brand p { margin-top: 18px; max-width: 34ch; color: var(--blush); }
.ft-social { display: flex; gap: 10px; margin-top: 22px; }
.ft-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--white); border: 1px solid var(--hair-dark); transition: background-color .25s, color .25s, transform .35s var(--ease); }
.ft-social a:hover { background: var(--on-rust); color: var(--rust-700); transform: translateY(-2px); }
.ft-social svg { width: 18px; height: 18px; }
.ft-col h2 { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blush-dim); margin-bottom: 14px; }
.ft-col ul { list-style: none; display: grid; gap: 2px; }
.ft-col a { display: inline-flex; align-items: center; min-height: 40px; color: var(--white); text-decoration: none; transition: color .25s; }
.ft-col a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.ft-col .muted { display: inline-flex; align-items: center; min-height: 40px; color: var(--blush); }
.ft-giant { position: relative; margin: clamp(48px, 7vw, 96px) auto 0; color: var(--char-card); }
.ft-giant .wm { fill: var(--char-card); stroke: rgba(243, 217, 205, .16); stroke-width: 1; }
.ft-bottom {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hair-dark); font-size: .9375rem; color: var(--blush);
}
/* Giant wordmark: phones and tablets only (desktop already shows the logo in the footer brand column) */
@media (min-width: 1024px) { .ft-giant { display: none; } .ft-bottom { margin-top: clamp(48px, 5vw, 72px); } }
@media (max-width: 899px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 479px) { .ft-grid { grid-template-columns: 1fr; } }

/* ---------- Off-screen pause (site.js adds .is-off to sections far outside the viewport): loops keep their state ---------- */
html:not(.motion-off) .is-off, html:not(.motion-off) .is-off::before, html:not(.motion-off) .is-off::after,
html:not(.motion-off) .is-off *, html:not(.motion-off) .is-off *::before, html:not(.motion-off) .is-off *::after { animation-play-state: paused !important; }
/* one-shot entrance animations (chefs tabs/phone/receipt, FAQ answers) still finish off screen, exactly as before */
html:not(.motion-off) .is-off .ch-pan, html:not(.motion-off) .is-off .ch-phone,
html:not(.motion-off) .is-off .ch-rc-row, html:not(.motion-off) .is-off details p { animation-play-state: running !important; }

/* ---------- Motion off: OS prefers-reduced-motion (class set before first paint; no on-page toggle) ---------- */
.motion-off *, .motion-off *::before, .motion-off *::after {
  animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
  transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
}
.motion-off .rv { opacity: 1 !important; transform: none !important; }
.motion-off .hat-draw use { stroke-dashoffset: 0 !important; fill: currentColor !important; }
.motion-off .hat-draw.outline-only use { fill: transparent !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.js) *, html:not(.js) *::before, html:not(.js) *::after { animation: none !important; transition: none !important; }
}
.motion-off .progress { display: none; }
@media print { .site-header, .sheet, .skip-link { display: none !important; } }

/* T-20261023-07 r5: phones (≤ 899 px or touch) get every shadow at 70% (offset, blur, spread × 0.7, whole px);
   colours unchanged, desktop untouched. Focus rings are outlines, not shadows, so they stay full size. */
@media (max-width: 899px), (pointer: coarse) {
  :root {
    --shadow-1: 0 1px 1px rgba(42, 19, 14, .06), 0 6px 17px rgba(42, 19, 14, .08);
    --shadow-2: 0 1px 4px rgba(42, 19, 14, .08), 0 17px 42px rgba(42, 19, 14, .16);
  }
  .btn-gold { box-shadow: 0 6px 17px rgba(217, 103, 76, .28), inset 0 1px 0 rgba(255, 255, 255, .45); }
  .btn-gold:hover { box-shadow: 0 10px 25px rgba(217, 103, 76, .42), inset 0 1px 0 rgba(255, 255, 255, .45); }
  .btn-chef { box-shadow: 0 7px 20px rgba(42, 19, 14, .45); }
  .btn-chef:hover { box-shadow: 0 11px 27px rgba(42, 19, 14, .5), 0 0 18px rgba(217, 103, 76, .3); }
  .hdr { box-shadow: 0 8px 22px rgba(42, 19, 14, .22); }
}