@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* John Hill Foods website, mk19.
   Layout idea: full-bleed bands that alternate between paper-white and burnt-sugar dark, with real
   factory footage doing the persuading. Type is one industrial family (Archivo) used condensed and
   heavy for headings, normal width for reading, plus a mono face for batch-label details. */

:root {
  --burnt: #1c130f;          /* burnt sugar: dark bands */
  --burnt-2: #2a1c15;
  --burnt-3: #3a281e;
  --caramel: #c98a3b;
  --caramel-hi: #e7b46c;     /* caramel on dark */
  --red: #ad1713;            /* logo red: actions */
  --red-hi: #c21d18;
  --cta-ink: #ffffff;
  --paper: #fbf9f6;
  --cream: #f4eee6;          /* fondant: alternate light band */
  --ink: #1d1714;
  --ink-2: #5d534c;
  --ink-3: #72675f;
  --line: rgba(29, 23, 20, 0.13);
  --on-dark: #f7f1ea;
  --on-dark-2: rgba(247, 241, 234, 0.72);
  --line-dark: rgba(247, 241, 234, 0.16);
  --focus: #2a6fdb;
  --accent: var(--red);      /* small text accents; caramel in dark mode */
  --surface: var(--paper);   /* cards, tables */
  --field: #ffffff;          /* form fields */
  --ease: cubic-bezier(0.2, 0.65, 0.25, 1);

  --display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* labels: Inter in small caps style */

  --wrap: 1360px;
  --gutter: clamp(18px, 4vw, 40px);
  --band: clamp(64px, 9vw, 128px);
  --radius: 6px;
  --radius-l: 12px;          /* photos and tiles */
}

/* Brand guide palette (Feb 2026): navy and caramel orange. Switched on by the review page only. */
html.palette-navy {
  --burnt: #10233a;
  --burnt-2: #1b3a5c;
  --burnt-3: #24496f;
  --caramel: #e8913a;
  --caramel-hi: #f2ae66;
  --red: #e8913a;
  --red-hi: #f0a252;
  --cta-ink: #10233a;
  --paper: #ffffff;
  --cream: #eef4f8;
  --ink: #1d2a36;
  --ink-2: #4c5c6b;
  --ink-3: #7d8b97;
  --line: rgba(16, 35, 58, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.62 var(--text); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.dark :focus-visible { outline-color: var(--caramel-hi); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--radius); text-decoration: none; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
.band.tight { padding-block: clamp(48px, 6vw, 80px); }
.band.cream { background: var(--cream); }
.dark { background: var(--burnt); color: var(--on-dark); }
.dark .lede, .dark .muted { color: var(--on-dark-2); }

/* type scale */
.kicker { font: 500 0.75rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--accent); }
.dark .kicker { color: var(--caramel-hi); }
.dark .kicker::before { background: var(--caramel-hi); }
.h-xl { font-size: clamp(2.3rem, 5vw, 4.3rem); font-weight: 750; line-height: 1.02; letter-spacing: -0.032em; }
.h-l { font-size: clamp(1.85rem, 3.5vw, 2.9rem); letter-spacing: -0.028em; }
.h-m { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.h-s { font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -0.01em; line-height: 1.1; }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--ink-2); }
.prose { max-width: 68ch; display: grid; gap: 1em; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 0.8em; }
.prose h3 { font-size: 1.25rem; margin-top: 0.6em; }
.prose ul, .prose ol { margin: 0; padding-left: 1.2em; display: grid; gap: 0.4em; }
.mono { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.02em; }
.stack { display: grid; gap: 18px; align-content: start; }
.stack-l { display: grid; gap: 28px; align-content: start; }

/* buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 20px;
  font: 600 0.98rem/1 var(--text); text-decoration: none; border-radius: var(--radius);
  border: 1.5px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform 0.15s; }
.btn:hover svg { transform: translateX(3px); }
.btn-red { background: var(--red); color: var(--cta-ink); }
.btn-red:hover { background: var(--red-hi); }
.btn-line { border-color: currentColor; color: inherit; background: transparent; }
.btn-line:hover { background: rgba(127, 127, 127, 0.12); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.link-arrow svg { width: 14px; height: 14px; transition: transform 0.15s; }
.link-arrow:hover svg { transform: translateX(3px); }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 249, 246, 0.94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
html.palette-navy .site-header { background: rgba(255, 255, 255, 0.95); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.brand img { height: 48px; width: auto; display: block; }
.brand-name { display: grid; line-height: 1.05; }
.brand-name b { font: 760 1.12rem/1 var(--display); letter-spacing: -0.01em; }
.brand-name span { font: 500 0.66rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.nav { display: flex; align-items: center; gap: 4px; margin-left: clamp(20px, 3.4vw, 52px); }
.nav a { text-decoration: none; font-weight: 500; font-size: 0.97rem; padding: 10px 12px; border-radius: var(--radius); color: var(--ink); }
.nav a:hover { background: rgba(29, 23, 20, 0.06); }
.nav a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
html.palette-navy .nav a[aria-current="page"] { color: var(--burnt-2); box-shadow: inset 0 -2px 0 var(--caramel); }
.header-cta { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.header-phone { font: 500 0.86rem/1 var(--mono); text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.header-phone:hover { color: var(--ink); }
.header-cta .btn { min-height: 44px; padding: 10px 16px; }
.nav a.nav-contact { display: none; }
.menu-btn { display: none; margin-left: auto; align-items: center; gap: 8px; background: none; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font: 600 0.95rem/1 var(--text); color: var(--ink); cursor: pointer; }
.menu-btn .bars { width: 18px; height: 12px; position: relative; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; }

/* see-through header over a dark hero (home, how we make it); turns solid once you scroll */
.site-header.overlay { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; transition: background 0.25s, border-color 0.25s; }
.site-header.overlay .nav a { color: #fff; }
.site-header.overlay .nav a:hover { background: rgba(255, 255, 255, 0.12); }
.site-header.overlay .nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--caramel-hi); }
.site-header.overlay .menu-btn { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.site-header.overlay.scrolled, .site-header.overlay.open { background: color-mix(in srgb, var(--burnt) 94%, transparent); border-bottom-color: var(--line-dark); backdrop-filter: saturate(1.2) blur(10px); }
html.palette-navy .site-header.overlay { background: transparent; }
html.palette-navy .site-header.overlay.scrolled, html.palette-navy .site-header.overlay.open { background: color-mix(in srgb, var(--burnt) 94%, transparent); }
@media (max-width: 1040px) {
  .site-header .wrap { min-height: 66px; }
  .menu-btn { display: inline-flex; }
  .nav, .header-cta { display: none; }
  .site-header.open .nav { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 16px; gap: 0; }
  .site-header.open .nav a { padding: 14px 4px; font-size: 1.1rem; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .site-header.open .header-cta { display: flex; position: absolute; left: 0; right: 0; top: calc(100% + var(--menu-h, 330px)); background: var(--paper); padding: 0 var(--gutter) 20px; border-bottom: 1px solid var(--line); }
  .site-header.open .header-phone { display: inline; }
  .site-header.overlay.open .nav, .site-header.overlay.open .header-cta { background: var(--burnt); border-bottom-color: var(--line-dark); }
  .site-header.overlay.open .nav a { color: #fff; border-bottom-color: var(--line-dark); }
}

/* hero */
.hero { position: relative; isolation: isolate; color: var(--on-dark); background: var(--burnt); overflow: hidden; }
.hero-media, .hero-media video, .hero-media img, .hero-media picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(20, 13, 10, 0.92) 0%, rgba(20, 13, 10, 0.78) 38%, rgba(20, 13, 10, 0.25) 75%, rgba(20, 13, 10, 0.15) 100%),
              linear-gradient(0deg, rgba(20, 13, 10, 0.85) 0%, rgba(20, 13, 10, 0) 45%); }
html.palette-navy .hero::before { background: linear-gradient(90deg, rgba(16, 35, 58, 0.93) 0%, rgba(16, 35, 58, 0.78) 38%, rgba(16, 35, 58, 0.25) 75%, rgba(16, 35, 58, 0.12) 100%), linear-gradient(0deg, rgba(16, 35, 58, 0.85) 0%, rgba(16, 35, 58, 0) 45%); }
.hero .wrap { min-height: min(84vh, 800px); display: grid; align-content: end; gap: 22px; padding-block: clamp(96px, 13vh, 160px) 0; }
.hero h1 { max-width: 19ch; font-size: clamp(2.2rem, 4.4vw, 3.9rem); }
.hero .kicker, .hero .crumbs, .hero .crumbs a { color: var(--caramel-hi); }
.hero .kicker::before { background: var(--caramel-hi); }
.hero .lede { color: var(--on-dark-2); max-width: 54ch; }
.hero .btn-line { color: var(--on-dark); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); margin-top: clamp(28px, 5vh, 56px); }
.facts li { list-style: none; padding: 18px 18px 22px 0; display: grid; gap: 4px; }
.facts li + li { padding-left: 18px; border-left: 1px solid var(--line-dark); }
.facts b { font: 700 1.05rem/1.2 var(--display); }
.facts span { font-size: 0.86rem; color: var(--on-dark-2); }
.facts { padding: 0; margin-bottom: 0; }
.video-toggle { position: absolute; right: max(16px, var(--gutter)); top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: rgba(20, 13, 10, 0.55); color: var(--on-dark); border: 1px solid var(--line-dark); border-radius: 99px; padding: 8px 12px; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.video-toggle:hover { background: rgba(20, 13, 10, 0.8); }

@media (max-width: 760px) {
  .hero .wrap { min-height: 0; padding-block: 120px 0; }
  .hero::before { background: linear-gradient(0deg, rgba(20, 13, 10, 0.96) 0%, rgba(20, 13, 10, 0.8) 55%, rgba(20, 13, 10, 0.45) 100%); }
  html.palette-navy .hero::before { background: linear-gradient(0deg, rgba(16, 35, 58, 0.96) 0%, rgba(16, 35, 58, 0.8) 55%, rgba(16, 35, 58, 0.45) 100%); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}

/* minimal home hero: no fact strip */
.hero-min .wrap { min-height: 100vh; min-height: 100svh; padding-block: clamp(110px, 16vh, 170px) clamp(56px, 10vh, 120px); gap: 20px; }
.hero-min h1 { max-width: 15ch; font-size: clamp(2.45rem, 5.4vw, 4.7rem); line-height: 1.02; }
.hero-min .lede { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }

/* home showcase */
.showcase-title { margin-bottom: clamp(20px, 3vw, 32px); }
.showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.tile { display: grid; gap: 14px; text-decoration: none; color: inherit; align-content: start; }
.tile .media { aspect-ratio: 3 / 4; border-radius: var(--radius-l); overflow: hidden; background: var(--burnt-2); }
.tile .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.tile:hover .media img { transform: scale(1.03); }
.tile-text { display: grid; gap: 2px; }
.tile h3 { font-size: 1.4rem; }
.tile p { color: var(--ink-2); }
@media (max-width: 760px) { .showcase { grid-template-columns: minmax(0, 1fr); } .tile .media { aspect-ratio: 4 / 3; } }

/* questions */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq-item { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.faq-q { font-size: 1.15rem; letter-spacing: -0.012em; }
.faq-a { color: var(--ink-2); max-width: 70ch; }

/* logos: dark-text logo on light backgrounds, white-text logo on dark ones */
.site-header .brand .logo-on-dark { display: none; }
.site-header.overlay .brand .logo-on-light { display: none; }
.site-header.overlay .brand .logo-on-dark { display: block; }
html.theme-dark .site-header .brand .logo-on-light { display: none; }
html.theme-dark .site-header .brand .logo-on-dark { display: block; }

/* ---- lighter home page styles (Luke, 27 Oct). Chosen on the review page; the winner becomes the default. */
/* shared: light header on light styles, lighter "made the traditional way" band */
html.home-studio:not(.theme-dark) body.home .site-header.overlay .brand .logo-on-light{ display: block; }
html.home-studio:not(.theme-dark) body.home .site-header.overlay .brand .logo-on-dark{ display: none; }
html.home-studio:not(.theme-dark) body.home .site-header.overlay .nav a{ color: var(--ink); }
html.home-studio:not(.theme-dark) body.home .site-header.overlay .nav a:hover{ background: rgba(29, 23, 20, 0.06); }
html.home-studio:not(.theme-dark) body.home .site-header.overlay .menu-btn{ color: var(--ink); border-color: var(--line); }
html.home-studio:not(.theme-dark) body.home .site-header.overlay.open .nav .theme-btn{ color: var(--ink); border-bottom-color: var(--line); }
html.home-studio:not(.theme-dark) body.home .site-header.overlay.scrolled,
html.home-studio:not(.theme-dark) body.home .site-header.overlay.open{ background: rgba(251, 249, 246, 0.95); border-bottom-color: var(--line); backdrop-filter: saturate(1.4) blur(10px); }
html.home-studio:not(.theme-dark) body.home .site-header.overlay.open .nav, html.home-studio:not(.theme-dark) body.home .site-header.overlay.open .header-cta{ background: var(--paper); border-bottom-color: var(--line); }
html.home-studio:not(.theme-dark) body.home .site-header.overlay.open .nav a{ color: var(--ink); border-bottom-color: var(--line); }
html.home-studio:not(.theme-dark) body.home .band.dark { background: var(--cream); color: var(--ink); }
html.home-studio:not(.theme-dark) body.home .band.dark .lede { color: var(--ink-2); }

/* studio: caramel on a cream backdrop, dark words on the left */
html.home-studio:not(.theme-dark) body.home .hero-min { background: #ece4d6; color: var(--ink); }
html.home-studio:not(.theme-dark) body.home .hero-min::before { background: linear-gradient(90deg, rgba(240, 233, 222, 0.9) 0%, rgba(240, 233, 222, 0.62) 34%, rgba(240, 233, 222, 0) 58%); }
html.home-studio:not(.theme-dark) body.home .hero-min .lede { color: var(--ink-2); }
html.home-studio:not(.theme-dark) body.home .hero-min .btn-line { color: var(--ink); }
@media (max-width: 760px) {
  html.home-studio:not(.theme-dark) body.home .hero-min::before { background: linear-gradient(0deg, rgba(240, 233, 222, 0.97) 0%, rgba(240, 233, 222, 0.86) 42%, rgba(240, 233, 222, 0) 70%); }
}

/* page hero (inner pages) */
.page-hero { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 64px); }
.page-hero .grid-2 { align-items: end; }
.page-hero.compact { padding-block: clamp(28px, 3.4vw, 44px) clamp(20px, 2.4vw, 30px); }
.crumbs { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--accent); }
.dark .crumbs, .dark .crumbs a { color: var(--on-dark-2); }

/* grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
.grid-2.wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head .stack { gap: 14px; }
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .section-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .grid-2, .grid-2.wide-left { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* product cards */
.pcard { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.band.cream .pcard { background: var(--surface); }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(29, 23, 20, 0.12); border-color: transparent; }
.pcard .media { aspect-ratio: 4 / 5; background: var(--burnt-2); overflow: hidden; position: relative; }
.pcard .media img, .pcard .media video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.pcard:hover .media img { transform: scale(1.04); }
.pcard .body { padding: 20px 20px 22px; display: grid; gap: 10px; align-content: start; }
.pcard .body p { color: var(--ink-2); font-size: 0.98rem; }
.pcard .more { margin-top: 4px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; color: var(--accent); }
html.palette-navy .pcard .more { color: var(--burnt-2); }
.pcard .more svg { width: 14px; height: 14px; }
@media (max-width: 560px) { .pcard .media { aspect-ratio: 4 / 3; } }
.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.tags li { list-style: none; font: 500 0.7rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink-2); }
.media-label { position: absolute; left: 12px; bottom: 12px; font: 500 0.68rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(20, 13, 10, 0.6); padding: 6px 8px; border-radius: 3px; }
.pcard.recipe .media { display: grid; place-items: center; background: var(--burnt); color: var(--on-dark); }
.recipe-card-art { padding: 28px; display: grid; gap: 10px; width: 100%; height: 100%; align-content: center; background: radial-gradient(120% 90% at 80% 10%, var(--burnt-3), var(--burnt) 60%); }
.recipe-card-art .line { font: 500 0.8rem/1.6 var(--mono); color: var(--on-dark-2); border-bottom: 1px dashed var(--line-dark); padding-bottom: 6px; display: flex; justify-content: space-between; gap: 12px; }
.recipe-card-art .line b { color: var(--caramel-hi); font-weight: 500; }

.checks.one { grid-template-columns: minmax(0, 1fr); }
.checks.one li, .checks.one li:nth-child(odd), .checks.one li:nth-child(even) { border-right: 0; padding-left: 0; }
.pcard.wide { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.pcard.wide .media { aspect-ratio: auto; min-height: 180px; }
.pcard.wide .body { align-content: center; }
@media (max-width: 760px) { .pcard.wide { grid-template-columns: minmax(0, 1fr); } }

/* process (video steps) */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); counter-reset: step; padding: 0; margin: 0; }
.step { list-style: none; display: grid; gap: 14px; align-content: start; }
.step .clip { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--burnt-2); }
.step .clip video, .step .clip img { width: 100%; height: 100%; object-fit: cover; }
.step .n { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; color: var(--caramel-hi); }
.step h3 { font-size: 1.3rem; }
.step p { color: var(--on-dark-2); font-size: 0.98rem; }
.band:not(.dark) .step p { color: var(--ink-2); }
.band:not(.dark) .step .n { color: var(--accent); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.steps.one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 600px) {
  .steps.scroller { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: thin; }
  .steps.scroller .step { scroll-snap-align: start; }
  .steps:not(.scroller) { grid-template-columns: minmax(0, 1fr); }
}

/* process as a numbered list beside one photo */
.process-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-dark); }
.step-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-dark); }
.step-list .n { font: 500 0.82rem/1.6 var(--mono); letter-spacing: 0.08em; color: var(--caramel-hi); }
.step-list h3 { font-size: 1.25rem; margin-bottom: 4px; }
.step-list p { color: var(--on-dark-2); font-size: 0.98rem; }
.band:not(.dark) .step-list, .band:not(.dark) .step-list li { border-color: var(--line); }
.band:not(.dark) .step-list p { color: var(--ink-2); }
.band:not(.dark) .step-list .n { color: var(--accent); }
@media (max-width: 860px) { .process-split { grid-template-columns: minmax(0, 1fr); } .process-split .figure { aspect-ratio: 16 / 10; } }

/* proof */
.proof { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.big-number { font: 800 clamp(5rem, 12vw, 9.5rem)/0.85 var(--display); letter-spacing: -0.03em; color: var(--accent); }
html.palette-navy .big-number { color: var(--burnt-2); }
.big-number small { display: block; font-size: 0.2em; font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.case { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; align-content: start; background: var(--surface); }
.case .who { font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.case h3 { font-size: 1.22rem; line-height: 1.12; }
.case p { color: var(--ink-2); font-size: 0.97rem; }
.case .since { font: 600 0.8rem/1 var(--mono); color: var(--accent); margin-top: 4px; }
html.palette-navy .case .since { color: var(--burnt-2); }
@media (max-width: 980px) { .proof { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .cases { grid-template-columns: minmax(0, 1fr); } }

/* checks list (quality) */
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); padding: 0; margin: 0; }
.checks li { list-style: none; padding: 22px 24px 24px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; }
.checks li:nth-child(odd) { border-right: 1px solid var(--line); }
.checks li:nth-child(even) { padding-left: 24px; }
.checks svg { width: 26px; height: 26px; color: var(--accent); grid-row: span 2; margin-top: 2px; }
html.palette-navy .checks svg { color: var(--caramel); }
.checks b { font: 700 1.1rem/1.2 var(--display); }
.checks span { color: var(--ink-2); font-size: 0.98rem; }
.dark .checks, .dark .checks li { border-color: var(--line-dark); }
.dark .checks span { color: var(--on-dark-2); }
.dark .checks svg { color: var(--caramel-hi); }
@media (max-width: 760px) {
  .checks { grid-template-columns: minmax(0, 1fr); }
  .checks li:nth-child(odd) { border-right: 0; }
  .checks li:nth-child(even) { padding-left: 0; }
}

/* routes (two ways in) */
.routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.route { border: 1px solid var(--line-dark); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); display: grid; gap: 14px; align-content: start; background: rgba(255, 255, 255, 0.03); }
.route h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.route p { color: var(--on-dark-2); }
.route .contact-line { font: 500 1rem/1.4 var(--mono); color: var(--on-dark); word-break: break-word; }
@media (max-width: 760px) { .routes { grid-template-columns: minmax(0, 1fr); } }
.cta-band .head { display: grid; gap: 14px; margin-bottom: clamp(26px, 3vw, 40px); max-width: 760px; }
.cta-band { background: var(--burnt-2); }
.cta-band .route { background: rgba(255, 255, 255, 0.04); }

/* media blocks */
.figure { position: relative; border-radius: var(--radius-l); overflow: hidden; background: var(--burnt-2); }
.figure img, .figure video { width: 100%; height: 100%; object-fit: cover; }
.figure.r45 { aspect-ratio: 4 / 5; }
.figure.r43 { aspect-ratio: 4 / 3; }
.figure.r169 { aspect-ratio: 16 / 9; }
.figcap { font: 500 0.74rem/1.5 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); margin-top: 10px; }
.dark .figcap { color: var(--on-dark-2); }
.mosaic { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.mosaic .figure:first-child { grid-row: span 2; }

/* spec table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.spec { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 0.96rem; }
table.spec th, table.spec td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); }
table.spec thead th { font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); background: var(--cream); }
table.spec tbody th { font: 700 1.02rem/1.2 var(--display); }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: 0; }

/* timeline */
.timeline { display: grid; gap: 0; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.timeline li { list-style: none; position: relative; padding: 0 0 34px 30px; display: grid; gap: 6px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); }
.timeline .year { font: 800 2rem/1 var(--display); color: var(--accent); }
html.palette-navy .timeline .year { color: var(--burnt-2); }
html.palette-navy .timeline li::before { border-color: var(--caramel); }
.timeline p { color: var(--ink-2); max-width: 58ch; }

/* forms */
.form { display: grid; gap: 30px; }
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.fieldset legend, .label { font: 700 1.08rem/1.25 var(--display); padding: 0; margin-bottom: 4px; }
.hint { font-size: 0.9rem; color: var(--ink-2); margin-top: -6px; }
.options { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 500; font-size: 0.96rem; }
.opt input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.opt input:hover + span { border-color: var(--ink-2); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field label .opt-tag { font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea { font: 400 1rem/1.4 var(--text); padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--field); color: var(--ink); width: 100%; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink-2); outline: 3px solid rgba(42, 111, 219, 0.35); outline-offset: 0; }
.field .err { color: #b3261e; font-size: 0.88rem; display: none; }
.field.invalid input, .field.invalid textarea { border-color: #b3261e; }
.field.invalid .err { display: block; }
.form-note { font-size: 0.9rem; color: var(--ink-2); }
.form-status { border-radius: var(--radius); padding: 16px 18px; display: none; gap: 8px; }
.form-status.show { display: grid; }
.form-status.ok { background: #e7f3ea; color: #1d4d2b; }
.form-status.warn { background: #fdf3e2; color: #6a4a12; border: 1px solid #ecd3a3; }
.form-status pre { white-space: pre-wrap; font: 400 0.85rem/1.5 var(--mono); background: rgba(255, 255, 255, 0.7); padding: 12px; border-radius: 4px; margin: 4px 0 0; max-height: 220px; overflow: auto; }
@media (max-width: 600px) { .fields { grid-template-columns: minmax(0, 1fr); } }

.contact-card { background: var(--burnt); color: var(--on-dark); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); display: grid; gap: 22px; align-content: start; position: sticky; top: 100px; }
.contact-card .item { display: grid; gap: 4px; }
.contact-card .item span { font: 500 0.72rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--caramel-hi); }
.contact-card .item a, .contact-card .item p { font-size: 1.08rem; text-decoration: none; color: var(--on-dark); }
.contact-card .item a:hover { text-decoration: underline; }
.copy-btn { justify-self: start; background: none; border: 1px solid var(--line-dark); color: var(--on-dark-2); border-radius: 4px; font: 500 0.72rem/1 var(--mono); padding: 6px 8px; cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase; }
.copy-btn:hover { color: var(--on-dark); }
@media (max-width: 760px) { .contact-card { position: static; } }

/* guides list */
.guide-card { display: grid; gap: 12px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: var(--surface); align-content: start; transition: border-color 0.2s, transform 0.2s; }
.guide-card:hover { border-color: var(--ink-2); transform: translateY(-2px); }
.guide-card .meta { font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.guide-card p { color: var(--ink-2); }
.article-hero { max-width: 860px; }
.aside-box { border-left: 3px solid var(--accent); background: var(--cream); padding: 18px 20px; border-radius: 0 var(--radius) var(--radius) 0; }
html.palette-navy .aside-box { border-color: var(--caramel); }

/* badges row */
.badges { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; background: #fff; }
.badge img { height: 40px; width: auto; }
.badge span { font-size: 0.88rem; color: var(--ink-2); line-height: 1.35; }
.badge b { display: block; color: var(--ink); font-size: 0.95rem; }

/* footer */
.site-footer { background: var(--burnt); color: var(--on-dark-2); padding-block: clamp(56px, 7vw, 88px) 28px; font-size: 0.95rem; }
.site-footer a { text-decoration: none; color: var(--on-dark); }
.site-footer a:hover { text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-grid h2 { font: 500 0.72rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--caramel-hi); margin-bottom: 14px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.foot-brand { display: grid; gap: 16px; align-content: start; max-width: 36ch; }
.foot-brand .brand { color: var(--on-dark); }
.foot-brand .brand-name span { color: var(--on-dark-2); }
.foot-legal { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: 0.84rem; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* small helpers */
.divider { height: 1px; background: var(--line); margin-block: clamp(32px, 4vw, 48px); }
.center { text-align: center; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; }
.note-strip { font: 500 0.78rem/1.5 var(--mono); letter-spacing: 0.04em; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 16px; }

/* ---- product range as photo tiles (Luke liked Meadow's range page, 28 Oct) ---- */
.range { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.rtile { display: grid; gap: 12px; align-content: start; text-decoration: none; color: inherit; }
.rtile .media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-l); overflow: hidden; background: var(--burnt-2); }
.rtile .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.rtile:hover .media img { transform: scale(1.045); }
.rlabel { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-radius: 8px; background: rgba(28, 19, 15, 0.86); color: #fff; font: 650 1.05rem/1.2 var(--text); letter-spacing: -0.005em;
  backdrop-filter: blur(6px); transition: background 0.2s, color 0.2s; }
.rlabel svg { width: 16px; height: 16px; flex: none; transition: transform 0.2s; }
.rtile:hover .rlabel { background: var(--red); color: var(--cta-ink); }
.rtile:hover .rlabel svg { transform: translateX(3px); }
.rtile > p { color: var(--ink-2); font-size: 0.98rem; max-width: 40ch; }
.rtile.ask .media { display: grid; place-items: center; padding: 28px 28px 84px; background: var(--burnt); color: #fff; text-align: center; }
.rtile.ask .media img { position: absolute; inset: 0; filter: brightness(0.42) saturate(0.9); }
.rtile.ask b { position: relative; font: 750 clamp(1.7rem, 2.8vw, 2.5rem)/1.04 var(--display); letter-spacing: -0.025em; max-width: 12ch; text-wrap: balance; }
.rtile.ask .rlabel { background: var(--red); color: var(--cta-ink); }
@media (max-width: 980px) { .range { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* products: the six tiles fill the rest of the screen on a computer (site.js sets --fit-top) */
@media (min-width: 981px) and (min-height: 600px) {
  .range.fit { height: calc(100svh - var(--fit-top, 260px) - 28px); min-height: 420px; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .range.fit .rtile { grid-template-rows: minmax(0, 1fr); min-height: 0; }
  .range.fit .rtile .media { aspect-ratio: auto; height: 100%; }
}
@media (max-width: 560px) {
  .range { grid-template-columns: minmax(0, 1fr); }
  .rtile .media { aspect-ratio: 4 / 3; }
}
.spec-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; }
.spec-band .stack { gap: 8px; }

/* ---- contact: everything on one screen, details beside a short form (Luke, 28 Oct) ---- */
.contact-band { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 80px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.contact-intro { display: grid; gap: 16px; align-content: start; }
.contact-intro .crumbs { margin-bottom: 0; }
.contact-list { list-style: none; margin: 10px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 16px; }
.contact-list li { display: grid; gap: 3px; justify-items: start; }
.contact-list .k { font: 500 0.72rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.contact-list .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.contact-list a { font-size: 1.12rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.contact-list a:hover { color: var(--accent); }
.contact-list p { color: var(--ink-2); }
.contact-list .copy-btn { border-color: var(--line); color: var(--ink-2); }
.contact-list .copy-btn:hover { color: var(--ink); }
.contact-list .map-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.95rem; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.contact-list .map-link svg { width: 13px; height: 13px; }
.enquiry { gap: 14px; padding: clamp(20px, 2.4vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: 0 24px 48px -32px rgba(29, 23, 20, 0.35); }
.enquiry .fields { gap: 12px 14px; }
.enquiry .field textarea { min-height: 120px; }
.enq-foot { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 14px; }
.enq-foot .field { flex: 1 1 220px; }
.enq-foot .btn { flex: none; }
.enquiry .form-note { font-size: 0.84rem; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .enq-foot .btn { width: 100%; justify-content: center; } }

/* ---- home: What we make as panels that open up on hover (Luke's mk4 product explorer, 28 Oct) ---- */
.explorer { display: flex; gap: clamp(8px, 1vw, 14px); height: clamp(420px, min(46vw, 64vh), 600px); }
.xp { position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--radius-l); color: #fff; text-decoration: none; background: var(--burnt-2); transition: flex-grow 0.7s var(--ease); }
.xp.is-active { flex-grow: 4.2; }
.xp > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.7); transform: scale(1.06); transition: transform 0.9s var(--ease), filter 0.5s ease; }
.xp.is-active > img { filter: none; transform: none; }
.xp-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 13, 8, 0.45) 0%, rgba(22, 13, 8, 0) 30%), linear-gradient(0deg, rgba(22, 13, 8, 0.9) 0%, rgba(22, 13, 8, 0.05) 62%); }
.xp-num { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font: 600 0.75rem/1 var(--mono); letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.82); transition: left 0.5s var(--ease), transform 0.5s var(--ease); }
.xp.is-active .xp-num { left: 26px; transform: none; }
.xp-label { position: absolute; left: 50%; bottom: 26px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font: 600 1.08rem/1 var(--text); white-space: nowrap; transition: opacity 0.2s; }
.xp.is-active .xp-label { opacity: 0; }
.xp-body { position: absolute; left: clamp(22px, 3vw, 40px); right: clamp(22px, 3vw, 40px); bottom: clamp(22px, 3vw, 36px); display: grid; gap: 10px; max-width: 520px; opacity: 0; transform: translateY(18px); transition: opacity 0.25s ease, transform 0.5s var(--ease); pointer-events: none; }
.xp.is-active .xp-body { opacity: 1; transform: none; transition-delay: 0.2s; }
.xp-body strong { font: 700 clamp(1.9rem, 3.4vw, 3.1rem)/1.02 var(--display); letter-spacing: -0.025em; }
.xp-body > span:not(.xp-link) { color: rgba(255, 255, 255, 0.86); max-width: 44ch; }
.xp-link { display: inline-flex; align-items: center; gap: 8px; width: max-content; margin-top: 4px; padding-bottom: 3px; border-bottom: 1.5px solid rgba(255, 255, 255, 0.7); font-weight: 600; }
.xp-link svg { width: 14px; height: 14px; transition: transform 0.15s; }
.xp:hover .xp-link svg { transform: translateX(3px); }
@media (max-width: 760px) {
  .explorer { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; scrollbar-width: thin; }
  .xp, .xp.is-active { flex: 0 0 min(80vw, 340px); height: 430px; scroll-snap-align: start; }
  .xp > img, .xp.is-active > img { filter: brightness(0.9); transform: none; }
  .xp-label { display: none; }
  .xp-num, .xp.is-active .xp-num { left: 20px; transform: none; }
  .xp-body, .xp.is-active .xp-body { left: 20px; right: 20px; bottom: 20px; opacity: 1; transform: none; }
  .xp-body strong { font-size: 1.8rem; }
}
.explorer-hint { margin-top: 14px; font-size: 0.9rem; color: var(--ink-3); }
@media (min-width: 761px) { .explorer-hint { display: none; } }

/* ---- home: Made to your recipe gets its own section (Luke: "a key feature") ---- */
.recipe-feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.recipe-media { position: relative; }
.recipe-media .figure { aspect-ratio: 4 / 3; }
.recipe-card { position: absolute; right: -24px; bottom: -28px; width: min(300px, 72%); list-style: none; margin: 0; padding: 18px 20px; display: grid; gap: 10px; background: var(--burnt); color: var(--on-dark); border-radius: var(--radius-l); box-shadow: 0 24px 48px -20px rgba(20, 13, 10, 0.55); }
.recipe-card li { display: flex; justify-content: space-between; gap: 12px; font: 500 0.82rem/1.5 var(--mono); letter-spacing: 0.04em; color: var(--on-dark-2); border-bottom: 1px dashed var(--line-dark); padding-bottom: 8px; }
.recipe-card li:last-child { border-bottom: 0; padding-bottom: 0; }
.recipe-card b { color: var(--caramel-hi); font-weight: 600; }
@media (max-width: 860px) {
  .recipe-feature { grid-template-columns: minmax(0, 1fr); }
  .recipe-media { margin-bottom: 30px; }
  .recipe-card { right: 12px; bottom: -30px; }
}

/* ---- home: Made the traditional way as a full-width photo band (Luke: "spice this up") ---- */
.band.pan-band { position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark); background: var(--burnt); padding-block: clamp(96px, 12vw, 170px); }
.pan-media { position: absolute; inset: 0; z-index: -2; }
.pan-media img { width: 100%; height: 100%; object-fit: cover; }
.pan-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 13, 10, 0.92) 0%, rgba(20, 13, 10, 0.72) 48%, rgba(20, 13, 10, 0.3) 100%); }
.pan-inner { display: grid; gap: 20px; justify-items: start; }
.pan-inner h2 { max-width: 14ch; }
.pan-band .lede { color: var(--on-dark-2); max-width: 50ch; }
.pan-band .kicker { color: var(--caramel-hi); }
.pan-band .kicker::before { background: var(--caramel-hi); }
.pan-band .btn-line { color: var(--on-dark); }
.pan-facts { list-style: none; margin: 10px 0 6px; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 880px; border-top: 1px solid var(--line-dark); }
.pan-facts li { display: grid; gap: 4px; align-content: start; padding: 20px 20px 0 0; }
.pan-facts li + li { padding-left: 20px; border-left: 1px solid var(--line-dark); }
.pan-facts b { font: 700 clamp(1.35rem, 2vw, 1.75rem)/1.1 var(--display); letter-spacing: -0.015em; color: #fff; }
.pan-facts span { font-size: 0.93rem; color: var(--on-dark-2); }
@keyframes drift-lg { from { translate: 0 -7%; } to { translate: 0 7%; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pan-media img { scale: 1.16; animation: drift-lg linear both; animation-timeline: view(); }
  }
}
@media (max-width: 760px) {
  .pan-facts { grid-template-columns: minmax(0, 1fr); }
  .pan-facts li, .pan-facts li + li { padding: 16px 0 0; border-left: 0; }
  .pan-band::before { background: rgba(20, 13, 10, 0.8); }
}

/* ---- light / dark (Luke, 28 Oct): the earlier dark home page, carried across every page.
   Light is the default. The header switch flips it and the browser remembers the choice on that device. */
/* dark mode switch: in the phone menu and the footer (Luke: not on the top bar) */
.theme-btn { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
html.js .site-footer .theme-btn { display: inline-flex; }
.theme-btn .switch { position: relative; width: 40px; height: 22px; flex: none; border-radius: 99px; background: rgba(127, 127, 127, 0.4); transition: background 0.2s; }
.theme-btn .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.25s var(--ease); }
.theme-btn[aria-checked="true"] .switch { background: var(--caramel); }
.theme-btn[aria-checked="true"] .switch::after { transform: translateX(18px); }
.site-footer .theme-btn { color: var(--on-dark-2); }
.site-footer .theme-btn:hover { color: var(--on-dark); }
@media (max-width: 1040px) {
  html.js .site-header.open .nav .theme-btn { display: flex; width: 100%; padding: 14px 4px; font-size: 1.1rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); }
  html.js .site-header.overlay.open .nav .theme-btn { color: #fff; border-bottom-color: var(--line-dark); }
}

/* bigger logo over the home photo, back to normal once the header turns solid (Luke, 28 Oct) */
.site-header.overlay .wrap { min-height: 100px; transition: min-height 0.3s var(--ease); }
.site-header.overlay .brand img { height: 68px; transition: height 0.3s var(--ease); }
.site-header.overlay.scrolled .wrap { min-height: 76px; }
.site-header.overlay.scrolled .brand img { height: 48px; }
@media (max-width: 1040px) {
  .site-header.overlay .wrap { min-height: 80px; }
  .site-header.overlay .brand img { height: 56px; }
  .site-header.overlay.scrolled .wrap { min-height: 66px; }
  .site-header.overlay.scrolled .brand img { height: 46px; }
}

html.theme-dark {
  color-scheme: dark;
  --paper: #17110d;
  --cream: #21180f;
  --surface: #271c14;
  --field: #1d150f;
  --ink: #f4ede4;
  --ink-2: rgba(244, 237, 228, 0.74);
  --ink-3: rgba(244, 237, 228, 0.54);
  --line: rgba(244, 237, 228, 0.15);
  --burnt: #0e0a07;
  --burnt-2: #2a1e16;
  --burnt-3: #3b2a1f;
  --accent: var(--caramel-hi);
  --focus: #8ab4ff;
}
html.palette-navy.theme-dark {
  --paper: #0f1a27; --cream: #142234; --surface: #192a3d; --field: #122031;
  --ink: #eef3f8; --ink-2: rgba(238, 243, 248, 0.74); --ink-3: rgba(238, 243, 248, 0.54); --line: rgba(238, 243, 248, 0.15);
  --burnt: #0a1420; --burnt-2: #16293f; --burnt-3: #1f3653;
}
html.theme-dark .site-header:not(.overlay) { background: color-mix(in srgb, var(--paper) 92%, transparent); }
html.theme-dark .nav a:hover { background: rgba(255, 255, 255, 0.08); }
html.theme-dark .field .err { color: #ffa198; }
html.theme-dark .field.invalid input, html.theme-dark .field.invalid textarea { border-color: #ffa198; }
html.theme-dark .badge { border-color: transparent; }
html.theme-dark .badge b { color: #1d1714; }
html.theme-dark .badge span { color: #5d534c; }
.hero-media .pic-dark { display: none; }
html.theme-dark .hero-media .pic-dark { display: block; }
html.theme-dark .hero-media .pic-light { display: none; }
html.theme-fade, html.theme-fade *:not(svg, svg *), html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease !important; }

/* ---- gentle movement (Luke liked how Pecan Deluxe feels "animated rather than rigid", 28 Oct).
   Headings rise in on arrival; blocks in each band rise into place as they come on screen (the list matches
   site.js); feature photos drift slightly as you scroll. All of it is off for visitors who ask for less motion. */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes settle { from { transform: scale(1.06); } }
@keyframes drift { from { translate: 0 -4.5%; } to { translate: 0 4.5%; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .wrap > *, .page-hero .wrap > * { animation: rise 0.9s var(--ease) backwards; }
  .hero .wrap > :nth-child(2), .page-hero .wrap > :nth-child(2) { animation-delay: 0.1s; }
  .hero .wrap > :nth-child(3), .page-hero .wrap > :nth-child(3) { animation-delay: 0.2s; }
  .hero .wrap > :nth-child(n+4), .page-hero .wrap > :nth-child(n+4) { animation-delay: 0.3s; }
  .hero-media img { animation: settle 2.4s var(--ease) backwards; }
}
html.motion .band .wrap > :not(.showcase, .range, .grid-3, .grid-4, .faq, .checks, .timeline, .cases, .step-list, .explorer, .pan-facts, .sr):not(.shown),
html.motion :is(.showcase, .range, .grid-3, .grid-4, .faq, .checks, .timeline, .cases, .step-list, .explorer, .pan-facts) > :not(.shown) { opacity: 0; }
html.motion .shown { animation: rise 0.85s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .figure img { scale: 1.1; animation: drift linear both; animation-timeline: view(); }
  }
}
/* Keychain tracking question (consent.js): sits under the header and the phone menu */
.consent { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: 16px; max-width: 460px; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2); font-size: 0.95rem; line-height: 1.5; }
.consent p { margin: 0 0 14px; }
.consent a { color: inherit; }
.consent-btns { display: flex; gap: 10px; }
.consent-btns .btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
.tracking-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
@media print { .consent { display: none; } }
@media print { html.motion * { opacity: 1 !important; animation: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---- phones and small tablets (Luke, 29 Oct) ---- */
@media (max-width: 760px) and (orientation: portrait) {
  /* phones: the whole pour across the top, fading into the dark behind the words */
  html.theme-dark .hero-media .pic-dark img { bottom: auto; height: 70%; object-position: 55% 0%;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
}
@media (max-width: 1040px) {
  .site-header .wrap { gap: 10px; }
  .site-header .header-cta, .site-header.open .header-cta { display: none; }
  .menu-btn { margin-left: auto; min-height: 42px; padding: 9px 12px; }
  /* Contact us lives in the menu on phones (Luke, 29 Oct) */
  .site-header.open .nav a.nav-contact { display: flex; justify-content: center; gap: 10px; margin-top: auto; padding: 15px 18px; border: 0; border-radius: var(--radius); font: 600 1.05rem/1 var(--text); letter-spacing: 0; color: var(--cta-ink) !important; background: var(--red); }
  .site-header.open .nav a.nav-contact::after { content: none; }
  /* the open menu fills the screen under the header */
  .site-header.open, .site-header.overlay.open { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  /* open menu: header and menu are one sheet, no line or gap between them (Luke, 29 Oct) */
  .site-header.open { background: var(--paper) !important; border-bottom-color: transparent !important; }
  .site-header.open .nav { background: var(--paper); }
  .site-header.overlay.open { background: var(--burnt) !important; }
  .site-header.overlay.open .nav { background: var(--burnt); }
  html.home-studio:not(.theme-dark) body.home .site-header.overlay.open { background: var(--paper) !important; }
  html.home-studio:not(.theme-dark) body.home .site-header.overlay.open .nav { background: var(--paper); }
  .site-header.open .nav { display: flex; flex-direction: column; align-items: stretch; margin: 0; gap: 0; position: fixed; left: 0; right: 0; top: var(--hdr-h, 66px); bottom: 0; overflow-y: auto; padding: 6px var(--gutter) calc(24px + env(safe-area-inset-bottom)); border-bottom: 0; z-index: 60; }
  .site-header.open .nav a { display: flex; align-items: center; justify-content: space-between; padding: 17px 0; font: 650 1.45rem/1.15 var(--display); letter-spacing: -0.015em; box-shadow: none; }
  .site-header.open .nav a::after { content: "\2192"; font: 400 1.1rem/1 var(--text); opacity: 0.45; }
  .site-header.open .nav a[aria-current="page"] { color: var(--accent); box-shadow: none; }
  .site-header.overlay.open .nav a[aria-current="page"] { color: var(--caramel-hi); }
  html.js .site-header.open .nav .theme-btn { margin-top: 0; padding: 18px 0 4px; border-bottom: 0; font-size: 1rem; justify-content: space-between; }
  html.menu-open, html.menu-open body { overflow: hidden; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .site-header.overlay .wrap { min-height: 84px; }
  .site-header.overlay .brand img { height: 50px; }
  .site-header.overlay.scrolled .wrap { min-height: 68px; }
  .site-header.overlay.scrolled .brand img { height: 44px; }
  /* home: words and buttons sit low, near the thumb */
  .hero-min .wrap { padding-block: 120px calc(26px + env(safe-area-inset-bottom)); gap: 16px; }
  /* What we make: three stacked cards instead of a sideways strip */
  .explorer { display: grid; gap: 14px; height: auto; overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; }
  .xp, .xp.is-active { flex: none; height: auto; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; }
  .xp-body, .xp.is-active .xp-body { position: relative; left: auto; right: auto; bottom: auto; padding: 22px 20px 22px; }
  .xp-body strong { font-size: 1.7rem; }
  .explorer-hint { display: none; }
  /* footer: two short columns and a smaller legal line */
  .site-footer { padding-block: 44px 24px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .foot-brand { grid-column: 1 / -1; gap: 12px; }
  .foot-brand > p:first-of-type { display: none; }
  .foot-grid > div:last-child { grid-column: 1 / -1; }
  .foot-grid > div:last-child ul { display: flex; flex-wrap: wrap; gap: 10px 22px; }
  .foot-grid ul { gap: 8px; }
  .foot-legal { margin-top: 28px; padding-top: 18px; font-size: 0.78rem; gap: 8px 20px; }
  /* comparison table becomes one card per product */
  .table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; }
  table.spec { min-width: 0; }
  table.spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.spec, table.spec tbody, table.spec tr, table.spec th, table.spec td { display: block; }
  table.spec tbody tr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; }
  table.spec tbody tr + tr { margin-top: 12px; }
  table.spec tbody th { padding: 0 0 10px; border: 0; font-size: 1.2rem; }
  table.spec td { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; padding: 7px 0; border: 0; border-top: 1px solid var(--line); }
  table.spec td::before { content: attr(data-label); font: 500 0.68rem/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
}
@media (max-width: 560px) {
  /* buttons stack to the same full width */
  .btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .btns .btn { width: 100%; justify-content: center; }
}

/* contact on phones: Send a message / Contact details buttons (Luke, 30 Oct) */
.contact-tabs { display: none; }
@media (max-width: 760px) {
  .contact-band[data-tab] .contact-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
  .contact-tabs button { appearance: none; border: 0; border-radius: 999px; padding: 12px 10px; background: transparent; color: var(--ink-2); font: 600 0.95rem/1 var(--text); cursor: pointer; }
  .contact-tabs button[aria-pressed="true"] { background: var(--red); color: var(--cta-ink); }
  .contact-band[data-tab="form"] .contact-list { display: none; }
  .contact-band[data-tab="details"] .enquiry { display: none; }
  .contact-band[data-tab="details"] .contact-list { border-top: 0; padding-top: 6px; }
  .contact-band[data-tab] .contact-grid { gap: 20px; }
}

/* phones: just the JF mark, centred in the top bar (Luke, 30 Oct). Over the home photo the full logo
   sits on the left and glides to the centred mark once the bar turns solid. One slow ease for the
   slide, the crop, the bar height and the bar colour so they move together; the slide is a transform only. */
@media (max-width: 760px) {
  .site-header { --glide: 0.7s cubic-bezier(0.45, 0, 0.15, 1); }
  .site-header .wrap { position: relative; }
  .site-header .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .site-header .brand img { width: 48px; object-fit: cover; object-position: left center; }
  .site-header.overlay { transition: background var(--glide), border-color var(--glide); }
  .site-header.overlay .wrap { transition: min-height var(--glide); }
  .site-header.overlay .brand { transition: transform var(--glide); will-change: transform; }
  .site-header.overlay .brand img { width: 44px; transition: width var(--glide), height var(--glide); }
  .site-header.overlay:not(.scrolled) .brand { transform: translate(calc(var(--gutter) - 50vw), -50%); }
  .site-header.overlay:not(.scrolled) .brand img { width: calc(50px * 111 / 48); }
}

/* process photo runs the full height of the step list on wider screens (Luke, 2 Nov 2026) */
@media (min-width: 861px) {
  .process-split { align-items: stretch; }
  .process-split .figure { aspect-ratio: auto; min-height: 420px; }
}

/* accessibility fixes from the Codex review (Luke, 3 Nov 2026) */
.field input, .field select, .field textarea { border-color: #8a7f77; }
html.theme-dark .field input, html.theme-dark .field select, html.theme-dark .field textarea { border-color: rgba(247, 241, 234, 0.42); }
.form-about { font: 600 0.82rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 0; }
/* without JavaScript the Menu button can't open, so show the links instead */
@media (max-width: 1040px) {
  html:not(.js) .menu-btn { display: none; }
  html:not(.js) .site-header .wrap { flex-wrap: wrap; padding-bottom: 10px; }
  html:not(.js) .site-header .brand { position: static; transform: none; }
  html:not(.js) .site-header .nav { display: flex; flex-wrap: wrap; width: 100%; margin-left: 0; gap: 4px 14px; }
  html:not(.js) .site-header .nav .theme-btn { display: none; }
}
/* a field without an error line keeps its normal height when the one beside it shows an error */
.field { align-content: start; }

/* products on phones: two shorter tiles a row and a jump to the comparison (Luke, 3 Nov 2026) */
.compare-jump { display: none; }
#compare { scroll-margin-top: 80px; }
#compare .section-head { scroll-margin-top: 90px; }
@media (max-width: 560px) {
  .compare-jump { display: inline-flex; width: max-content; }
  .range { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rtile .media { aspect-ratio: 1 / 1; border-radius: var(--radius); }
  .rlabel { left: 8px; right: 8px; bottom: 8px; padding: 9px 10px; font-size: 0.86rem; line-height: 1.15; }
  .rlabel svg { width: 13px; height: 13px; }
  .rtile.ask .media { padding: 14px 12px 58px; }
  .rtile.ask b { font-size: 1.15rem; }
}

/* guides: the Read links line up along the bottom of the cards (Luke, 3 Nov 2026) */
.guide-card { display: flex; flex-direction: column; }
.guide-card > .link-arrow { margin-top: auto; align-self: flex-start; }

/* What we make on a computer: a quicker, evenly eased change between products (Luke, 3 Nov 2026) */
@media (min-width: 761px) {
  .explorer { --xp-glide: 0.5s cubic-bezier(0.45, 0, 0.2, 1); }
  .xp { transition: flex-grow var(--xp-glide); }
  .xp > img { transition: transform var(--xp-glide), filter var(--xp-glide); }
  .xp-num { transition: left var(--xp-glide), transform var(--xp-glide); }
  .xp-label { transition: opacity 0.25s ease; }
  .xp.is-active .xp-label { transition-delay: 0s; }
  .xp:not(.is-active) .xp-label { transition-delay: 0.25s; }
  .xp-body { transition: opacity 0.3s ease, transform var(--xp-glide); }
  .xp.is-active .xp-body { transition-delay: 0.15s; }
}

/* second Codex review, Luke's picks (3 Nov 2026) */
/* product pages: key facts under the intro */
.hero-facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
.hero-facts li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hero-facts b { font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.hero-facts span { font-size: 0.98rem; color: var(--ink); }
@media (max-width: 760px) {
  .page-hero .figure.r45 { aspect-ratio: 4 / 3; }
}
/* FAQ and Quality: jump list of topics, phones only */
.topics { display: none; }
.faq-group { margin-top: clamp(28px, 4vw, 48px); padding-bottom: 6px; scroll-margin-top: 90px; }
.faq-group:first-child { margin-top: 0; }
#q-safety, #q-certified, #q-documents { scroll-margin-top: 80px; }
@media (max-width: 760px) {
  .topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
  .topics a { font: 600 0.88rem/1 var(--text); text-decoration: none; color: var(--ink); padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); }
}
/* guides: the intro lines up with the article body on a computer */
.wrap.article-hero { max-width: calc(var(--wrap) + 2 * var(--gutter)); }
.article-hero > * { max-width: 860px; }
/* What we make: pause control */
.xp-controls { display: none; }
@media (min-width: 761px) { .xp-controls { display: flex; justify-content: flex-end; margin-top: 10px; } }
.xp-pause { font: 600 0.85rem/1 var(--text); color: var(--ink-2); background: none; border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.xp-pause:hover { color: var(--ink); border-color: var(--ink-2); }

/* comparison review, Luke's picks (3 Nov 2026) */
/* What we make: three even cards on a computer */
@media (min-width: 761px) {
  .explorer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: clamp(440px, 40vw, 540px); }
  .xp, .xp.is-active { flex: none; }
  .xp > img, .xp.is-active > img { filter: brightness(0.82) saturate(0.95); transform: none; transition: transform 0.6s var(--ease); }
  .xp:hover > img { transform: scale(1.03); }
  .xp-label { display: none; }
  .xp-num, .xp.is-active .xp-num { left: 24px; transform: none; }
  .xp-body, .xp.is-active .xp-body { left: 24px; right: 24px; bottom: 24px; opacity: 1; transform: none; transition: none; }
  .xp-body strong { font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
  .xp-controls { display: none !important; }
}
/* product pages: sample link under the buttons */
.sample-line { margin: 0; }
/* About examples: link to the product */
.case-link { font-weight: 600; font-size: 0.92rem; color: var(--accent); text-decoration: none; margin-top: 2px; }
.case-link::after { content: " \2192"; }
.case-link:hover { text-decoration: underline; }