/* Self-hosted webfonts (no external CDN, no paid fonts).
   Jost - SIL Open Font License 1.1 - https://fonts.google.com/specimen/Jost
   Roboto - Apache License 2.0 - https://fonts.google.com/specimen/Roboto
   Files and unicode-ranges mirror what Google Fonts served, so rendering is
   unchanged; only the origin moved to our own server. See docs/fonts.md. */

/* Jost 400 - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost 400 - latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost 500 - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost 500 - latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost 600 - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost 600 - latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost 700 - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost 700 - latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Roboto 400 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Roboto 400 - latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Roboto 400 - symbols */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-symbols.woff2') format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* Roboto 500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Roboto 500 - latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Roboto 500 - symbols */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/roboto-symbols.woff2') format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* Roboto 700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Roboto 700 - latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Roboto 700 - symbols */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-symbols.woff2') format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}

/* ITC Master Chef - design system
   Palette lifted from live itcmasterchef.com clientlibs:
   charcoal #161616 · yellow #FFCC2A · orange #E07000 · red #DF0018 */

:root {
  --ink: #161616;
  --ink-2: #1f1f1f;
  --ink-3: #2a2a2a;
  --line: #3a3a3a;
  --paper: #ffffff;
  --muted: #b8b8b8;
  --yellow: #ffcc2a;
  --orange: #e07000;
  --red: #df0018;
  --teal: #0cbda9;
  --font-head: "Jost", "Trebuchet MS", sans-serif;
  --font-body: "Roboto", Arial, sans-serif;
  --radius: 16px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --wrap: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

a { color: var(--yellow); text-decoration: none; }
a:hover { color: #ffe27a; }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 14px;
}

/* ---------- header ---------- */

.topbar {
  background: var(--yellow);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 8px 16px;
  font-family: var(--font-head);
  letter-spacing: 0.03em;
  line-height: 1.4;
}

header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(22, 22, 22, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  max-width: var(--wrap);
  margin: 0 auto;
}

.nav .brand img { height: 52px; width: auto; }

.nav ul {
  display: flex;
  gap: 6px;
  list-style: none;
  align-items: center;
}

.nav ul a {
  display: block;
  color: var(--paper);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}

.nav ul a:hover { background: var(--ink-3); color: var(--yellow); }
.nav ul a.active { background: var(--yellow); color: var(--ink); font-weight: 600; }

.nav .cta {
  background: var(--yellow);
  color: var(--ink) !important;
  font-weight: 600 !important;
}
.nav .cta:hover { background: var(--orange); color: var(--paper) !important; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 72px;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(255, 204, 42, 0.14), transparent 60%),
    radial-gradient(900px 420px at 10% 110%, rgba(224, 112, 0, 0.12), transparent 60%),
    var(--ink);
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(38px, 5vw, 60px);
  margin-bottom: 20px;
}

.hero h1 em {
  font-style: normal;
  color: var(--yellow);
}

.hero p.lead {
  font-size: 18px;
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 30px;
}

.hero-art { position: relative; min-height: 380px; }

.hero-art img {
  position: absolute;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s ease;
}
.hero-art img:hover { transform: translateY(-8px) rotate(0deg) !important; }

.hero-art .a { width: 52%; top: 0; left: 2%; z-index: 3; transform: rotate(-4deg); }
.hero-art .b { width: 44%; top: 22%; right: 0; z-index: 2; transform: rotate(3deg); }
.hero-art .c { width: 40%; bottom: 0; left: 24%; z-index: 1; transform: rotate(-2deg); }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.03em;
  padding: 14px 28px;
  border-radius: 999px;
  transition: transform 0.15s, background 0.2s, color 0.2s;
}
.btn:active { transform: scale(0.97); }

.btn-solid { background: var(--yellow); color: var(--ink); }
.btn-solid:hover { background: var(--orange); color: var(--paper); }

.btn-ghost { border: 1.5px solid var(--line); color: var(--paper); }
.btn-ghost:hover { border-color: var(--yellow); color: var(--yellow); }

.hero-stats {
  display: flex;
  gap: 36px;
  margin-top: 40px;
}
.hero-stats div strong {
  display: block;
  font-family: var(--font-head);
  font-size: 30px;
  color: var(--yellow);
}
.hero-stats div span { font-size: 13.5px; color: var(--muted); }

/* ---------- sections ---------- */

section.band { padding: 76px 0; }
section.band.alt { background: var(--ink-2); }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); }
.section-head p { color: var(--muted); max-width: 56ch; margin-top: 10px; }
.section-head .more, .shorts-head .more { white-space: nowrap; font-family: var(--font-head); font-weight: 600; }

/* category tiles */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cat-tile {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 22px;
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
  color: var(--paper);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.cat-tile:hover { border-color: var(--yellow); transform: translateY(-4px); color: var(--paper); }
.cat-tile h3 { font-size: 21px; margin-bottom: 8px; }
.cat-tile p { font-size: 14px; color: var(--muted); margin-bottom: 14px; min-height: 66px; }
.cat-tile .count {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--yellow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cat-tile::after {
  content: "→";
  position: absolute;
  right: 20px;
  bottom: 16px;
  font-size: 20px;
  color: var(--yellow);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  transform: translateX(-6px);
}
.cat-tile:hover::after { opacity: 1; transform: translateX(0); }

/* product cards */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 204, 42, 0.55);
  box-shadow: var(--shadow);
}

.card .thumb {
  background: #fff;
  padding: 18px;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.82;
  border-radius: 15px 15px 0 0; /* match card radius so iOS Safari can't bleed square corners */
}
.card .thumb img { max-height: 100%; object-fit: contain; transition: transform 0.3s; }
.card:hover .thumb img { transform: scale(1.05); }
/* SKU listing shows the actual product pack (dark-background shot) on a dark
   tile so it blends, instead of plated food. */
.card .thumb.pack { background: var(--ink-2); }
/* Plated interim shots (transparent plate cutouts) fill the tile on a soft warm
   wash instead of sitting as a flat pack on stark white. */
.card .thumb.plated { padding: 0; background: radial-gradient(circle at 50% 40%, #fff, #f1ede6 78%); }
.card .thumb.plated img { max-height: none; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }

.card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; border-radius: 0 0 15px 15px; }
.card .body h3 { font-size: 18px; color: var(--paper); }
.card .body h3 a { color: var(--paper); }
.card .body h3 a:hover { color: var(--yellow); }
/* Guide (blog) cards: full-bleed photo thumbnail + title, whole card is the link. */
.gcard .gthumb { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-3); }
.gcard .gthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.gcard:hover .gthumb img { transform: scale(1.04); }
.gcard .body { padding: 18px 20px 20px; }
.gcard .body h3 { font-size: 19px; line-height: 1.3; }
.gcard:hover h3 { color: var(--yellow); }
.card .meta { font-size: 13px; color: var(--muted); }
.card .tag {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(255, 204, 42, 0.1);
  border: 1px solid rgba(255, 204, 42, 0.3);
  padding: 3px 10px;
  border-radius: 999px;
}
.card .price-line {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-head);
}
.card .price-line strong { font-size: 18px; color: var(--yellow); }
.card .price-line span { font-size: 12.5px; color: var(--muted); }

/* recipe cards */

/* Recipe cards now carry full plated photos, so fill the tile edge-to-edge
   instead of the white-padded contain used for pack shots. */
.card .thumb.recipe { aspect-ratio: 1 / 0.7; padding: 0; background: var(--ink-2); }
.card .thumb.recipe img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.rmeta {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-head);
  letter-spacing: 0.04em;
}
.rmeta b { color: var(--yellow); font-weight: 600; }

/* ---------- breadcrumbs ---------- */

.crumbs {
  padding: 18px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--yellow); }
.crumbs span.sep { margin: 0 8px; color: var(--line); }
.crumbs span.here { color: var(--paper); }

/* ---------- PDP ---------- */

.pdp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 44px 0 70px;
  align-items: start;
}

.pdp-visual {
  position: sticky;
  top: 110px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px;
  display: grid;
  place-items: center;
}
.pdp-visual img { max-height: 440px; object-fit: contain; }

/* ---------- PDP image gallery ---------- */
.pdp-gallery { position: sticky; top: 110px; }
.pg-main {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
}
.pg-main img { max-height: 100%; max-width: 100%; object-fit: contain; }
.pg-thumbs { display: flex; gap: 12px; margin-top: 14px; }
.pg-thumb {
  flex: 0 0 76px;
  height: 76px;
  background: var(--ink-2);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.15s;
}
.pg-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pg-thumb.on, .pg-thumb:hover { border-color: var(--yellow); }

/* ---------- A+ product video ---------- */
.pdp-video {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  max-width: 900px;
}
.pdp-video video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- nutrition & ingredients ---------- */
.nutri-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: start;
}
.nutri-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.nutri-card h3 { font-size: 17px; margin-bottom: 12px; }
.nutri-card h3 span { color: var(--muted); font-weight: 400; font-size: 13px; }
.nutri-card table { width: 100%; border-collapse: collapse; }
.nutri-card td { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.nutri-card td:first-child { color: var(--muted); }
.nutri-card td:last-child { text-align: right; font-family: var(--font-head); font-weight: 600; }
.nutri-card tr:last-child td { border-bottom: none; }
.ing-list { font-size: 14px; line-height: 1.7; color: var(--paper); }
.nutri-src { font-size: 12.5px; color: var(--muted); margin-top: 14px; }

/* ---------- McCain-style cook cues ---------- */
.cook-cues { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 22px; }
.cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px 7px 10px;
}
.cue b { font-size: 15px; line-height: 1; }

.pdp h1 { font-size: clamp(30px, 3.6vw, 44px); margin: 6px 0 6px; }
.pdp .tagline { font-size: 18px; color: var(--muted); margin-bottom: 18px; }

.pdp .rating {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-head);
  font-size: 14px;
  margin-bottom: 18px;
  color: var(--yellow);
}
.pdp .rating .stars { letter-spacing: 2px; }
.pdp .rating span { color: var(--muted); }

.pdp .desc { color: #dcdcdc; margin-bottom: 24px; }

.usps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.usps li {
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-head);
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 204, 42, 0.4);
  color: var(--yellow);
  background: rgba(255, 204, 42, 0.07);
}

.buy-panel {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 34px;
}
.buy-panel h3 { font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.buy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  margin-bottom: 10px;
  color: var(--paper);
  font-family: var(--font-head);
  font-weight: 500;
  transition: border-color 0.2s, background 0.2s;
}
.buy-row:last-child { margin-bottom: 0; }
.buy-row:hover { border-color: var(--yellow); background: rgba(255, 204, 42, 0.06); color: var(--paper); }
.buy-row .store { display: flex; align-items: center; gap: 10px; }
.buy-row .price { color: var(--yellow); font-weight: 600; font-size: 17px; }
.buy-row .go { font-size: 12.5px; color: var(--muted); }

/* ---------- Buy Now page (per-SKU quick-commerce links) ---------- */
.buy-list { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.buy-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-areas: "img head" "img stores";
  column-gap: 28px;
  row-gap: 14px;
  align-items: center;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 28px;
}
.buy-item-img { grid-area: img; width: 150px; height: 150px; background: var(--ink-2); border-radius: 14px; overflow: hidden; display: block; }
.buy-item-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform 0.3s; }
.buy-item-img:hover img { transform: scale(1.04); }
.buy-item-head { grid-area: head; align-self: end; }
.buy-item-head h3 { font-size: 22px; }
.buy-item-meta { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.buy-stores { grid-area: stores; align-self: start; display: flex; flex-wrap: wrap; gap: 12px; }
.buy-store {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--ink-3); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 15px; min-width: 138px;
  transition: border-color 0.2s, background 0.2s;
}
.buy-store:hover { border-color: var(--yellow); background: rgba(255, 204, 42, 0.06); }
.buy-store-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.buy-store-top img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; background: #fff; padding: 3px; }
.buy-store-price { color: var(--yellow); font-weight: 700; font-size: 16px; }
.buy-store-name { font-size: 12.5px; color: var(--muted); font-family: var(--font-head); font-weight: 600; letter-spacing: 0.02em; }

.cook-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 8px; }
.cook-methods .method {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.cook-methods .method h4 {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 8px;
}
.cook-methods .method p { font-size: 13.5px; color: var(--muted); }

.pdp-section { padding: 8px 0 40px; }
.pdp-section h2 { font-size: 26px; margin-bottom: 18px; }

/* ---------- FAQ ---------- */

.faq h2 {
  font-size: clamp(22px, 3.4vw, 28px);
  line-height: 1.2;
  margin: 0 0 22px;
}
.faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  background: var(--ink-2);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 16px 20px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--yellow); font-size: 22px; flex-shrink: 0; }
.faq details[open] summary::after { content: "-"; }
.faq details p { padding: 0 20px 18px; color: var(--muted); font-size: 15px; }

/* ---------- recipe page ---------- */

.recipe-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  padding: 44px 0 30px;
}
.recipe-hero h1 { font-size: clamp(30px, 3.6vw, 44px); margin: 8px 0 14px; }
.recipe-hero .desc { color: var(--muted); font-size: 17px; margin-bottom: 22px; }

.recipe-facts {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 8px;
}
.recipe-facts div {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  background: var(--ink-2);
  border-right: 1px solid var(--line);
}
.recipe-facts div:last-child { border-right: 0; }
.recipe-facts b { display: block; font-family: var(--font-head); color: var(--yellow); font-size: 17px; }
.recipe-facts span { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.recipe-body {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  padding: 30px 0 60px;
}
.recipe-body h2 { font-size: 24px; margin-bottom: 16px; }
.recipe-body ul.ing { list-style: none; }
.recipe-body ul.ing li {
  padding: 11px 0 11px 30px;
  border-bottom: 1px dashed var(--line);
  color: #dcdcdc;
  font-size: 15px;
  position: relative;
}
.recipe-body ul.ing li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  color: var(--yellow);
}
.recipe-body ol.steps { list-style: none; counter-reset: step; }
.recipe-body ol.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 56px;
  color: #dcdcdc;
}
.recipe-body ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  display: grid;
  place-items: center;
}

.tip-box {
  border-left: 3px solid var(--yellow);
  background: rgba(255, 204, 42, 0.07);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  color: #eee;
  font-size: 15px;
  margin-top: 10px;
}
.tip-box b { color: var(--yellow); font-family: var(--font-head); }

/* featured product strip inside recipe/blog */

.uses-product {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 26px 0;
}
.uses-product img { width: 84px; height: 84px; object-fit: contain; background: var(--ink-2); border-radius: 12px; padding: 6px; }
.uses-product .t { flex: 1; }
.uses-product .t small { color: var(--muted); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--font-head); }
.uses-product .t a { font-family: var(--font-head); font-weight: 600; font-size: 17px; display: block; color: var(--paper); }
.uses-product .t a:hover { color: var(--yellow); }

/* ---------- blog ---------- */

.article { max-width: 780px; margin: 0 auto; padding: 44px 24px 70px; }
.article h1 { font-size: clamp(30px, 3.6vw, 42px); margin: 10px 0 14px; }
.article-hero { display: block; width: 100%; height: auto; border-radius: var(--radius); margin: 8px 0 34px; }
.article .byline { color: var(--muted); font-size: 14px; margin-bottom: 34px; }
.article h2 { font-size: 25px; margin: 38px 0 14px; color: var(--yellow); }
.article p { color: #dcdcdc; margin-bottom: 16px; }
.article h3 { font-size: 18px; margin: 24px 0 10px; color: var(--paper); }
.article ul, .article ol { color: #dcdcdc; margin: 0 0 16px; padding-left: 24px; line-height: 1.65; }
.article li { margin-bottom: 8px; }
.article address { color: #dcdcdc; font-style: normal; line-height: 1.6; margin-bottom: 16px; }
.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 24px;
  font-size: 14.5px;
}
.article table th {
  font-family: var(--font-head);
  text-align: left;
  background: var(--ink-3);
  color: var(--yellow);
  padding: 11px 14px;
  border: 1px solid var(--line);
}
.article table td { padding: 11px 14px; border: 1px solid var(--line); color: #dcdcdc; }
.table-scroll { overflow-x: auto; }

/* ---------- home FAQ / story ---------- */

.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.story-grid p { color: var(--muted); margin-bottom: 16px; }
.story-grid .pledge { list-style: none; margin-top: 8px; }
.story-grid .pledge li {
  padding: 10px 0 10px 34px;
  position: relative;
  color: #dcdcdc;
  border-bottom: 1px dashed var(--line);
}
.story-grid .pledge li::before { content: "★"; position: absolute; left: 2px; color: var(--yellow); }

/* ---------- footer ---------- */

footer.site {
  background: #0e0e0e;
  border-top: 1px solid var(--line);
  padding: 56px 0 30px;
  margin-top: 40px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.foot-grid .about img { height: 56px; margin-bottom: 16px; }
.foot-grid .about p { color: var(--muted); font-size: 14px; max-width: 34ch; }
.foot-grid h4 {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 16px;
}
.foot-grid ul { list-style: none; }
.foot-grid ul li { margin-bottom: 10px; }
.foot-grid ul a { color: var(--muted); font-size: 14.5px; }
.foot-grid ul a:hover { color: var(--yellow); }

.foot-legal {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  color: #777;
  font-size: 13px;
}
.foot-legal .marks { display: flex; gap: 18px; align-items: center; }
.foot-legal .marks img { height: 30px; opacity: 0.85; }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .hero .wrap, .pdp, .recipe-hero, .recipe-body, .story-grid { grid-template-columns: 1fr; }
  .pdp-visual { position: static; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cook-methods { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .hero-art { min-height: 300px; }
  .nav ul { display: none; }
  .nav .menu-toggle { display: block; }
}

@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .section-head { flex-direction: column; align-items: flex-start; }
}

/* mobile nav */
.menu-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: var(--paper);
  font-size: 20px;
  padding: 6px 12px;
  cursor: pointer;
}
.nav.open ul {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding: 12px 20px 20px;
  gap: 4px;
}

/* ================= consumer-lens redesign additions ================= */

/* ---------- campaign hero ---------- */

.hero-banner { background: #fac400; }
.hero-banner picture img { width: 100%; display: block; }

.hero-band {
  background: linear-gradient(180deg, #fac400 0%, #f0b800 100%);
  color: var(--ink);
  padding: 34px 0 40px;
}
.hero-band-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 36px;
  align-items: center;
}
.hero-band h1 {
  font-size: clamp(30px, 4vw, 46px);
  color: var(--ink);
  margin-bottom: 12px;
}
.hero-band h1 em { font-style: normal; color: #b3261e; }
.hero-band .lead {
  font-size: 17px;
  color: #3a3000;
  max-width: 58ch;
}
.hero-band-cta { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

.btn-dark { background: var(--ink); color: var(--yellow); justify-content: center; }
.btn-dark:hover { background: #000; color: #ffe27a; }
.btn-dark-ghost { border: 2px solid var(--ink); color: var(--ink); justify-content: center; }
.btn-dark-ghost:hover { background: var(--ink); color: var(--yellow); }

/* ---------- craving tiles ---------- */

.crave-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.crave-tile {
  text-align: center;
  padding: 26px 16px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  color: var(--paper);
  transition: transform 0.2s, border-color 0.2s;
}
.crave-tile:hover { transform: translateY(-6px); border-color: var(--yellow); color: var(--paper); }
.crave-img {
  display: block;
  width: 128px; height: 128px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--yellow);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.crave-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.crave-tile:hover .crave-img img { transform: scale(1.12); }
.crave-tile h3 { font-size: 17px; margin-bottom: 6px; }
.crave-tile p { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* ---------- occasion cards ---------- */

.occ-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.occ-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.occ-card:hover { transform: translateY(-6px); border-color: rgba(255,204,42,0.55); box-shadow: var(--shadow); color: var(--paper); }
.occ-img { display: block; aspect-ratio: 1/0.85; background: #fff; overflow: hidden; }
.occ-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.occ-card:hover .occ-img img { transform: scale(1.07); }
.occ-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.occ-body h3 { font-size: 17px; }
.occ-body p { font-size: 12.5px; color: var(--muted); line-height: 1.45; flex: 1; }
.occ-go { font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--yellow); }

/* ---------- sticky filter bar ---------- */

.filterbar {
  position: sticky;
  top: 80px;
  z-index: 30;
  background: var(--yellow);
  border-top: 1px solid rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(0,0,0,.16);
  padding: 14px 0 16px;
  margin-bottom: 8px;
}
/* Filter collapses as you choose: each answered row shrinks to a single pill
   and the answered pills flow together on one line, so the panel stays short
   and never covers the results. Only the current question keeps a full row. */
.filterbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.filterbar .chip-row { flex: 1 1 100%; margin: 0; }
.filterbar .chip-row.answered { flex: 0 0 auto; }
.filterbar .chip-row.answered .chip-label { display: none; }
.filterbar .filter-status { flex: 1 1 100%; margin-top: 6px; }
.filterbar .chip-label { color: #161616; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; min-width: 168px; }
.filterbar .chip { background: rgba(255,255,255,.92); color: #161616; border-color: rgba(0,0,0,.22); }
.filterbar .chip:hover { background: #fff; }
.filterbar .chip.on { background: #161616; color: var(--yellow); border-color: #161616; }
.filterbar .filter-status { color: #161616; }
.filterbar .filter-status .fs-count { color: #161616; }
.filterbar .filter-status a { color: #161616; }

/* ---------- filter states ---------- */

/* Options that would return zero results are hidden entirely (not greyed out),
   so each question only offers filters that actually lead somewhere. */
.chip.off { display: none; }
.filter-status {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-family: var(--font-head);
  font-size: 14px;
  color: var(--muted);
}
.filter-status .fs-count { color: var(--yellow); font-weight: 600; }
.filter-status a { color: var(--muted); text-decoration: underline; }
.filter-status a:hover { color: var(--yellow); }
.no-results {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  margin-top: 8px;
}
.no-results h3 { font-size: 20px; margin-bottom: 8px; }
.no-results p { color: var(--muted); font-size: 15px; }
.no-results a { color: var(--yellow); text-decoration: underline; }

/* ---------- forms (Contact / For Businesses) ---------- */
.contact-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 44px; align-items: start; }
.contact-info h3 { font-size: 20px; margin-bottom: 14px; }
.contact-info p { color: var(--muted); margin-bottom: 16px; line-height: 1.6; }
.contact-info strong { color: var(--paper); }
.contact-info a { color: var(--yellow); }
.cform { display: flex; flex-direction: column; gap: 16px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.cform .hp { position: absolute; left: -9999px; }
.cform .field { display: flex; flex-direction: column; gap: 6px; }
.cform label { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--muted); }
.cform input, .cform select, .cform textarea {
  font-family: inherit; font-size: 15px; color: var(--paper);
  background: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; width: 100%;
}
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: 2px solid var(--yellow); outline-offset: 0; border-color: var(--yellow); }
.cform textarea { resize: vertical; }
.cform button { align-self: flex-start; margin-top: 4px; }
.cform .form-error { color: #ff8a8a; font-size: 13.5px; line-height: 1.5; margin: -4px 0 0; }
.cform .form-error[hidden] { display: none; }

/* ---------- B2B categories ---------- */
.b2b-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.b2b-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2);
  overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.b2b-card:hover { border-color: rgba(255,204,42,0.45); transform: translateY(-3px); }
/* ITC plate shots sit on a transparent canvas; a soft spotlight lifts the food
   off the dark card. Crop to a consistent frame with the plate centered. */
.b2b-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, var(--ink-3), var(--ink) 72%); }
.b2b-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.b2b-body { padding: 18px 22px 22px; }
.b2b-card h3 { font-size: 17px; margin-bottom: 8px; color: var(--yellow); }
.b2b-card p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* B2B product tiles (rail): plate shot + name, from the ITC source page. */
.b2b-product { flex: 0 0 210px; scroll-snap-align: start; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--ink-2); overflow: hidden; text-align: center;
  transition: border-color .2s, transform .2s; }
.b2b-product:hover { border-color: rgba(255,204,42,0.45); transform: translateY(-3px); }
.b2b-product-img { display: block; aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 44%, var(--ink-3), var(--ink) 72%); }
.b2b-product-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.b2b-product-name { display: block; padding: 12px 14px 16px; font-family: var(--font-head);
  font-weight: 500; font-size: 14px; color: var(--paper); }

/* ---------- retailers (Buy Now) ---------- */

.retailer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.retailer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  transition: border-color 0.2s, transform 0.2s;
}
.retailer:hover { border-color: rgba(255, 204, 42, 0.55); transform: translateY(-3px); }
.retailer h3 { font-size: 18px; color: var(--paper); }
.retailer p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.retailer .go { color: var(--yellow); font-family: var(--font-head); font-weight: 600; font-size: 14px; white-space: nowrap; }

/* ---------- four pillars ---------- */

.pillars-band { background: var(--ink-2); }
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pillar {
  border-top: 2px solid var(--yellow);
  padding: 20px 4px 0;
}
.pillar-kicker {
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}
.pillar h3 { font-size: 19px; margin: 10px 0 10px; }
.pillar p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ---------- horizontal scrollers ---------- */

.hscroll-wrap { overflow: hidden; }
.hscroll {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px; /* so snap rests the first card at the padded start,
                                aligned with the .wrap heading (not 24px left of it) */
  padding: 4px 24px 18px;
  max-width: var(--wrap);
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.hscroll > .card {
  flex: 0 0 264px;
  scroll-snap-align: start;
}
.hscroll-end {
  flex: 0 0 190px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  border: 1px dashed rgba(255, 204, 42, 0.5);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--yellow);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  transition: background 0.2s, border-color 0.2s;
}
.hscroll-end b { font-size: 24px; }
.hscroll-end:hover { background: rgba(255, 204, 42, 0.08); border-color: var(--yellow); }

/* Swipe affordance. The native bar is hidden and replaced with a permanent
   yellow one drawn below each rail: macOS overlay scrollbars fade out and iOS
   Safari never paints one at all, so on the devices where "is this swipeable?"
   actually bites, a styled ::-webkit-scrollbar would show nothing.
   (ITC feedback, Aug 2026.) */
.hscroll { scrollbar-width: none; }
.hscroll::-webkit-scrollbar { height: 0; width: 0; }

.hscroll-bar {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px 18px;
  touch-action: none;
}
.hscroll-bar[hidden] { display: none; }
.hscroll-bar .track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
.hscroll-bar .thumb {
  position: absolute;
  top: -3px;
  left: 0;
  height: 10px;
  min-width: 28px;
  border-radius: 999px;
  background: var(--yellow);
  cursor: grab;
}
.hscroll-bar.dragging .thumb { cursor: grabbing; }
@media (prefers-reduced-motion: no-preference) {
  .hscroll-bar:not(.dragging) .thumb { transition: left 0.12s ease-out, width 0.12s ease-out; }
}

/* ---------- craving / occasion as sliders ---------- */
.crave-scroll .crave-tile { flex: 0 0 190px; scroll-snap-align: start; }
.occ-scroll .occ-card { flex: 0 0 260px; scroll-snap-align: start; }

/* ---------- visual pillar cards (Why ITC Master Chef) ---------- */
.pillar-scroll .pillar-card { flex: 0 0 300px; scroll-snap-align: start; }
.pillar-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pillar-img { display: block; position: relative; aspect-ratio: 16 / 10; background: #fff; overflow: hidden; }
.pillar-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pillar-body { padding: 20px 22px 24px; }
.pillar-body .pillar-kicker { font-family: var(--font-head); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.pillar-body h3 { font-size: 19px; margin: 9px 0 10px; }
.pillar-body p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ---------- testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Testimonials as a horizontal slider (same rail pattern as the other bands). */
.testi-scroll > .tcard { flex: 0 0 clamp(300px, 30vw, 380px); scroll-snap-align: start; }
.tcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ink-2); padding: 26px 24px; text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s; }
.tcard:hover { border-color: rgba(255,204,42,0.5); transform: translateY(-3px); }
.tstars { color: var(--yellow); letter-spacing: 2px; font-size: 14px; }
.tcard blockquote { margin: 12px 0 18px; color: var(--paper); font-size: 15px; line-height: 1.65; flex: 1; }
.tcard figcaption { font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--paper); }
.tcard .t-src { display: block; margin-top: 3px; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.tcard:hover .t-src { color: var(--yellow); }
.testi-note { text-align: center; color: var(--muted); font-size: 12px; margin-top: 18px; }

/* ---------- scroll reveal (opt-in via JS, respects reduced motion) ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); }
.js-reveal .reveal.in { opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }

/* ---------- Instagram band ---------- */
/* Official Instagram post embeds (/embed/captioned) in a horizontal rail. Real
   cover, likes, caption and inline reel playback; Instagram owns the white card
   chrome, we set the fixed card size the iframe needs. */
.ig-rail { align-items: stretch; }
/* 3 cards fit within the rail on desktop, so center them (no overflow = the
   flex-center scroll cut-off gotcha can't bite); narrower screens scroll. */
@media (min-width: 1140px) { .ig-rail { justify-content: center; } }
/* Crop the card so only the profile header + the reel show; the likes, caption
   and comments below are clipped off (we can't touch the cross-origin iframe's
   insides, but overflow:hidden on the container clips what's visible). The
   iframe still renders full-size; we just show its top slice. */
/* Fixed card width on every screen so the crop is deterministic: the reel media
   scales with width, so a %/vw width would move the "View more" line per device
   and leak the action row back in. Fixed width => one crop height works. */
.ig-card { flex: 0 0 320px; scroll-snap-align: start; height: 486px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.ig-card iframe { width: 100%; height: 760px; border: 0; display: block; background: #fff; }

/* ---------- YouTube band (theatre + rail) ---------- */
.yt-theatre { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.yt-main { min-width: 0; }
.yt-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: #000; border: 1px solid var(--line); }
.yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-stage iframe, .yt-stage video { position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; object-fit: cover; background: #000; }
.yt-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--yellow); cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 10px 34px rgba(0, 0, 0, .45); transition: transform .2s; }
.yt-play-btn:hover { transform: translate(-50%, -50%) scale(1.07); }
.yt-play-btn:active { transform: translate(-50%, -50%) scale(.95); }
.yt-tri { width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--ink); margin-left: 4px; }
.yt-caption { margin-top: 12px; color: var(--muted); font-family: var(--font-head); font-size: 15px; }

.yt-rail { display: flex; flex-direction: column; gap: 10px; }
.yt-rail-item { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 8px; }
.yt-rail-item:hover, .yt-rail-item.on { background: var(--ink-3); border-color: var(--line); }
.yt-thumb { position: relative; flex: 0 0 128px; aspect-ratio: 16 / 9; border-radius: 8px;
  overflow: hidden; background: #000; }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.yt-mini-play { position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%);
  width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.yt-rail-title { font-family: var(--font-head); font-weight: 500; font-size: 14px;
  color: var(--paper); line-height: 1.3; }

@media (prefers-reduced-motion: no-preference) {
  .yt-stage .yt-play-btn { animation: ytpulse 2.6s ease-in-out infinite; }
  @keyframes ytpulse {
    0%, 100% { box-shadow: 0 10px 34px rgba(0, 0, 0, .45), 0 0 0 0 rgba(255, 204, 42, .45); }
    50% { box-shadow: 0 10px 34px rgba(0, 0, 0, .45), 0 0 0 15px rgba(255, 204, 42, 0); }
  }
}

/* Shorts rail: vertical 9:16 facades under the theatre. */
.shorts-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 34px; }
.shorts-head h3 { font-size: 20px; margin-top: 2px; }
.shorts-rail { align-items: stretch; }
.short-card { flex: 0 0 190px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px;
  text-align: left; cursor: pointer; background: transparent; border: 0; padding: 0; }
.short-thumb { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden;
  background: #000; border: 1px solid var(--line); }
.short-thumb img { width: 100%; height: 100%; object-fit: cover; }
.short-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.short-card:hover .short-thumb { border-color: var(--yellow); }
.short-title { font-family: var(--font-head); font-weight: 500; font-size: 14px; color: var(--paper); line-height: 1.3; }

/* ---------- promise tiles ---------- */

.promise-band {
  background:
    radial-gradient(900px 400px at 50% -20%, rgba(255,204,42,0.12), transparent 65%),
    var(--ink);
}
.promise-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: stretch;
}
.promise-visual {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 420px;
  border: 1px solid var(--line);
}
.promise-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promise-visual-cap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px 30px 30px;
  background: linear-gradient(0deg, rgba(15,15,15,0.92) 8%, rgba(15,15,15,0.55) 42%, rgba(15,15,15,0.05) 78%);
}
.promise-visual-cap .eyebrow,
.promise-visual-cap h2,
.promise-visual-cap p { text-shadow: 0 1px 10px rgba(0,0,0,0.55); }
.promise-visual-cap h2 { margin: 6px 0 12px; line-height: 1.12; }
.promise-visual-cap p { color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 42ch; }
.promise-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
/* 6-up promise strip (For Businesses): 3 across on desktop. */
.promise-grid-3 { grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
.promise-tile {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px 24px;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  transition: border-color 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.promise-tile:hover { border-color: rgba(255,204,42,0.5); transform: translateY(-4px); }
.p-ico {
  display: inline-grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  font-size: 26px;
  background: rgba(255,204,42,0.12);
  border: 1.5px solid rgba(255,204,42,0.45);
  margin-bottom: 16px;
}
/* Client-supplied ITC line-art icons (white on black): screen blend drops the
   black so only the white mark shows, no coloured badge behind it. */
.p-ico--img { width: 76px; height: 76px; background: none; border: 0; }
.p-ico--img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
.promise-tile h3 { font-size: 17px; margin-bottom: 8px; color: var(--yellow); }
.promise-tile p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* ---------- filter chips ---------- */

.chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.chip-label {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 76px;
}
.chip {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--yellow); color: var(--yellow); }
.chip.on { background: var(--yellow); border-color: var(--yellow); color: var(--ink); font-weight: 600; }

/* Answered rows collapse to just the chosen chip so the filter panel never
   grows tall enough to cover the results (client feedback). The chosen chip
   shows a ✕ to signal it can be tapped to reopen the row and re-choose. */
.chip-row.answered .chip:not(.on) { display: none; }
.chip-row.answered .chip.on::after { content: " ✕"; font-weight: 400; opacity: 0.65; }

/* ---------- PDP dish shot ---------- */

.pdp-dish {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.pdp-dish img { width: 100%; display: block; }
.pdp-dish span {
  display: block;
  padding: 10px 16px;
  font-family: var(--font-head);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--ink-2);
}

/* ---------- cookie bar ---------- */

.cookie-bar {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 100;
  max-width: 720px;
  margin: 0 auto;
  background: #fffdf5;
  color: var(--ink);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  padding: 18px 22px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { font-size: 13.5px; line-height: 1.5; flex: 1; margin: 0; }
.cookie-bar a { color: #8a6d00; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.ck-btn {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  transition: all 0.15s;
}
.ck-btn:hover { background: rgba(0,0,0,0.06); }
.ck-accept { background: var(--ink); color: var(--yellow); }
.ck-accept:hover { background: #000; }

/* ---------- responsive for new components ---------- */

@media (max-width: 960px) {
  .hero-band-grid { grid-template-columns: 1fr; }
  .hero-band-cta { flex-direction: row; }
  .crave-grid { grid-template-columns: repeat(3, 1fr); }
  .occ-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
  .retailer-grid { grid-template-columns: repeat(2, 1fr); }
  .b2b-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .pdp-gallery { position: static; }
  .nutri-grid { grid-template-columns: 1fr; }
  .promise-layout { grid-template-columns: 1fr; gap: 24px; }
  .promise-visual { min-height: 320px; }
  .promise-visual-cap { background: linear-gradient(0deg, rgba(15,15,15,0.95) 30%, rgba(15,15,15,0.78) 62%, rgba(15,15,15,0.45) 100%); }
  .promise-grid { grid-template-columns: repeat(2, 1fr); }
  .yt-theatre { grid-template-columns: 1fr; gap: 16px; }
  .yt-rail { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .yt-rail-item { flex-direction: column; align-items: stretch; flex: 0 0 200px; }
  .yt-thumb { flex: none; width: 100%; }
  /* iOS Safari bleeds square image/badge corners past the card's rounded
     overflow:hidden edge because the transform-transition children are GPU
     composited. Touch devices have no hover, so promote the card to its own
     clipping layer, drop the transform/shadow transitions, neutralize the
     sticky :hover, and clip the image box directly. Mobile only, desktop
     (>960px) hover and lift are unchanged. */
  .card { transform: translateZ(0); transition: border-color 0.2s; }
  .card:hover { transform: translateZ(0); box-shadow: none; border-color: var(--line); }
  .card .thumb { overflow: hidden; }
  .card .thumb img { transition: none; }
  .card:hover .thumb img { transform: none; }
}
@media (max-width: 560px) {
  /* On phones the header and filter bar sit at the top and scroll away with the
     page, so they don't eat the screen and hide the catalog. */
  header.site { position: static; }
  .filterbar { position: static; top: auto; }
  .topbar { font-size: 11.5px; padding: 8px 14px; letter-spacing: 0.02em; }
  .pillar-grid { grid-template-columns: 1fr; gap: 22px; }
  /* Buy Now page: pack shot + title on top, stores full-width below, two-up */
  .buy-item { grid-template-columns: 92px 1fr; grid-template-areas: "img head" "stores stores"; column-gap: 14px; row-gap: 14px; padding: 16px; }
  .buy-item-img { width: 92px; height: 92px; }
  .buy-item-head { align-self: center; }
  .buy-item-head h3 { font-size: 17px; }
  .buy-stores { gap: 8px; }
  .buy-store { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 10px 12px; }
  .retailer-grid { grid-template-columns: 1fr; }
  .hscroll { padding-left: 20px; padding-right: 20px; gap: 14px; scroll-padding-left: 20px; }
  .hscroll-bar { padding-left: 20px; padding-right: 20px; }
  /* Widen carousel cards so the next card shows a clean thin sliver (scroll
     snaps to card edges) instead of a half-cut card with chopped text. */
  .hscroll > .card { flex: 0 0 84vw; }
  .testi-scroll > .tcard { flex: 0 0 84vw; }
  /* Keep recipe meta items intact ("17 min", "Stir-fry") and let whole items
     wrap rather than breaking mid-word on narrow cards. */
  .rmeta { flex-wrap: wrap; gap: 4px 12px; }
  .rmeta span { white-space: nowrap; }
  .hscroll-end { flex: 0 0 46vw; }
  .crave-scroll .crave-tile { flex-basis: 44vw; }
  .occ-scroll .occ-card { flex-basis: 72vw; }
  .pillar-scroll .pillar-card { flex-basis: 78vw; }
  .testi-grid { grid-template-columns: 1fr; }
  /* keep the fixed 320px card, just center it in the viewport; scroll for more */
  .ig-card { scroll-snap-align: center; }
  .hscroll.ig-rail { padding-left: max(16px, calc((100vw - 320px) / 2));
    padding-right: max(16px, calc((100vw - 320px) / 2)); }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .contact-layout { grid-template-columns: 1fr; gap: 24px; }
  .cform { padding: 20px; }
  .b2b-grid { grid-template-columns: 1fr; }
  /* filter labels drop to their own line so chips flow cleanly below */
  .filterbar .chip-label { min-width: 100%; margin-bottom: 2px; }
  .filterbar .chip-row { margin: 4px 0 12px; }
  .more { display: inline-block; padding: 6px 0; }
  .card .body h3 a { display: inline-block; padding: 3px 0; }
  .card .body { padding: 12px 12px 14px; gap: 6px; }
  .card .body h3 { font-size: 15px; }
  /* stack price and delivery detail so they don't collide at the tile's bottom-left */
  .card .price-line { flex-direction: column; align-items: flex-start; gap: 2px; }
  .card .price-line strong { font-size: 16px; }
  .card .price-line span { font-size: 11.5px; }
  .cookie-bar { flex-direction: column; align-items: stretch; text-align: left; }
  .hero-band-cta { flex-direction: column; }
  .chip-label { min-width: 100%; }
}