/* -- FONTS (self-hosted latin subsets, preloaded in each page <head>) -- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/montserrat-latin-var.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; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-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; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-italic-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; }

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

:root {
  --logo: url("images/jss-logo.svg");
  --yellow: #FFF3B0;
  --gold: #E09F3E;
  --maroon: #9E2A2B;
  --teal: #355C67;
  --wa: #25D366;
  --wa-dark: #1DA851;
  --wa-ink: #0B3B22;      /* text on WhatsApp green (6.4:1) */
  --wa-hover: #3EDC7B;    /* lighter on hover so dark text keeps contrast */
  --gold-text: #F4C77F;   /* gold for small text on teal or maroon (4.6:1) */
  --maroon-deep: #6E1A1B; /* maroon for small text on gold (5.0:1) */
  --hairline: rgba(50,50,50,0.12);
  --grid: rgba(50,50,50,0.05);
  --paper: #FFFFFF;
  --soft: #F6F4EE;
  --ink: #2B2620;
  --body-text: #4A4438;
  --font: 'Montserrat', sans-serif;
  --serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --maxw: 1280px;
  --nav-h: 64px;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--paper); color: var(--teal); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
section[id], footer[id] { scroll-margin-top: 84px; }

/* -- BROWSER SURFACES -- */
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible { outline-color: var(--teal); }
.cta :focus-visible { outline-color: var(--yellow); }
a { text-underline-offset: 3px; }

/* -- DISPLAY TYPE --
   Instrument Serif carries every page and section headline, matching
   /spares/. Montserrat stays the voice for nav, body, cards and labels. */
.hero h1, .pagehead h1, .pg-hero h1,
.prod-title, .why-title, .mk-title, .about-title, .howit-title, .export-title,
.cta-text h2, .pg-section-title, .pg-export-title, .pg-mfg-title,
.cat-info h2, .hub-cta h2, .faq-head h2, .nf h1, .ways-title, .way-card h3, .hfaq-title,
.pg-legal-body h2, .pg-mv-card h3, .pg-feature-text h3 {
  font-family: var(--serif); font-weight: 400; font-style: normal;
  letter-spacing: .008em; line-height: 1.14; text-wrap: balance;
}
.prod-title, .why-title, .mk-title, .about-title, .howit-title,
.pg-section-title, .pg-export-title, .pg-mfg-title {
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
}

/* -- NAV: floating pill, identical on every page and hero colour --
   One white bar, 12px from the top. It gains a deeper shadow once the page
   scrolls (nav.scrolled, set in site.js). The mobile menu is a card that
   drops from the pill's top-right corner, where the menu button lives. */
nav {
  position: fixed; top: 12px; left: 50%; z-index: 105;
  width: min(calc(100% - 24px), calc(var(--maxw) + 32px)); height: var(--nav-h);
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 10px 0 22px;
  background: var(--paper); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(43,38,32,.06), 0 6px 20px rgba(43,38,32,.07);
  transition: box-shadow .25s var(--ease-out);
}
nav.scrolled { box-shadow: 0 1px 2px rgba(43,38,32,.08), 0 10px 30px rgba(43,38,32,.13); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; border-radius: 8px; }
.brand img { display: block; width: 104px; height: auto; }

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links a {
  display: block; padding: 9px 14px; border-radius: 999px;
  font-weight: 500; font-size: .9rem; color: var(--ink); text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { background: var(--soft); color: var(--teal); }
}
.nav-links a[aria-current="page"] { color: var(--teal); font-weight: 600; background: rgba(53,92,103,.08); }

.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-quote {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--teal); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, transform .16s var(--ease-out);
}
.nav-quote svg { width: 16px; height: 16px; }
.nav-wa {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--wa); color: var(--wa-ink);
  transition: background-color .15s ease, transform .16s var(--ease-out);
}
.nav-wa svg { width: 21px; height: 21px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .nav-quote:hover { background: #2c4d57; }
  .nav-wa:hover { background: var(--wa-hover); }
}
.nav-quote:active, .nav-wa:active { transform: scale(0.97); }

/* WhatsApp button (mobile menu, CTAs) */
.wa-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--wa); color: var(--wa-ink); font-weight: 600; font-size: .9rem; padding: 12px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, transform .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .wa-btn:hover { background: var(--wa-hover); } }
.wa-btn:active { transform: scale(0.97); }
.wa-btn svg { width: 17px; height: 17px; fill: var(--wa-ink); flex-shrink: 0; }

/* -- HERO -- */
.hero {
  position: relative;
  padding-top: 72px;
  background-color: var(--yellow);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
}
.hero-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 48px;
  padding: 60px 4vw 84px; min-height: 70vh;
}

.hero h1 {
  color: var(--maroon);
  font-size: clamp(2.75rem, 6.2vw, 5.25rem);
  max-width: 880px; word-wrap: break-word; margin-bottom: 1.5rem;
}
/* Italic serif phrase with a passing gold highlight. Two background
   layers: a caret bar (maroon) on top of the gold fill. The markSweep
   keyframes (HERO MOTION, below) blink the caret before "Biscuit", sweep the
   gold to "Plant" like a text selection, hold it, then clear it. Box-
   decoration stays "slice" so the sweep runs line by line in reading order.
   The static values here (no caret, no fill) are the end state that
   reduced-motion visitors see. */
.mark {
  font-style: italic;
  color: var(--maroon);
  background-image: linear-gradient(var(--maroon), var(--maroon)), linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 100% 0%, 100% 0%;
  background-size: 0px 100%, 0% 100%;
  border-radius: 3px;
  padding: 0 .08em;
}

.hero-sub { font-weight: 500; color: var(--teal); font-size: clamp(1.02rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 600px; margin-bottom: 2.1rem; }

.hero-actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.btn-quote {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--teal); color: var(--yellow);
  font-family: var(--font); font-weight: 600; font-size: 1.02rem;
  padding: 16px 28px; border-radius: 10px; text-decoration: none;
  box-shadow: 0 8px 22px rgba(53,92,103,.28);
  transition: transform .16s var(--ease-out), box-shadow .2s var(--ease-out), background-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn-quote:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(53,92,103,.34); background: #2c4d57; }
}
.btn-quote:active { transform: scale(0.97); box-shadow: 0 4px 12px rgba(53,92,103,.2); }
.btn-quote svg { width: 18px; height: 18px; }

/* On product-page teal heroes (and the maroon manufacturing band), a teal
   button vanishes into the background. Switch the primary CTA to gold with
   dark text: distinct from the green WhatsApp CTAs and high-contrast. */
body.pg-page .pg-hero .btn-quote { background: var(--gold); color: #23303a; box-shadow: 0 8px 20px rgba(16,36,42,.28); }
@media (hover: hover) and (pointer: fine) {
  body.pg-page .pg-hero .btn-quote:hover { background: #cf9233; box-shadow: 0 12px 24px rgba(16,36,42,.32); }
}
body.pg-page .pg-hero .btn-quote:active { box-shadow: 0 4px 10px rgba(16,36,42,.24); }
body.pg-page .pg-hero .btn-quote svg { color: #23303a; }
.link-text { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; color: var(--maroon); text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; transition: border-color .15s ease; }
.link-text svg { transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-text:hover { border-color: var(--maroon); }
  .link-text:hover svg { transform: translate(2px, -2px); }
}
.link-text svg { width: 15px; height: 15px; }

.hero-trust { margin-top: 1.5rem; font-weight: 500; font-size: .85rem; color: var(--teal); }
.hero-trust b { color: var(--maroon); font-weight: 600; }

/* illustration */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }
.hero-visual::before {
  content: ''; position: absolute; z-index: 0;
  width: min(440px, 92%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(224,159,62,0.30) 0%, rgba(224,159,62,0.08) 45%, transparent 70%);
}
.hero-visual::after {
  content: ''; position: absolute; z-index: 0;
  width: min(380px, 80%); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed rgba(53,92,103,0.22);
}
.hero-visual svg { position: relative; z-index: 1; width: 100%; max-width: 420px; height: auto; }



/* Hero SVG motion is pure CSS (see HERO MOTION below). */
/* -- STATS -- */
.stats { background: var(--paper); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.stats-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); padding: 34px 4vw; }
.stat { display: flex; gap: 16px; align-items: flex-start; padding: 0 6px; }
.stat::before { content: ''; width: 2px; align-self: stretch; min-height: 54px; background: var(--gold); border-radius: 2px; }
.stat-num { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 4.8vw, 3.75rem); color: var(--maroon); line-height: .95; font-variant-numeric: lining-nums; }
.stat-label { font-weight: 500; font-size: clamp(.74rem, 1.1vw, .86rem); letter-spacing: .06em; text-transform: uppercase; color: #6B6357; margin-top: 10px; }

/* --------- RESPONSIVE --------- */

/* small desktop / large tablet landscape */
@media (max-width: 1080px) {
  .hero-grid { gap: 36px; }
}

/* tablet: stack hero, keep stats in one row */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 8px; padding: 48px 6vw 72px; text-align: center; }
  .hero h1, .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { margin-top: 28px; }
  .hero-visual svg { max-width: 340px; }
}

/* small tablet / large phone */
@media (max-width: 680px) {
  .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 30px 0; padding: 30px 6vw; }
  .hero-visual svg { max-width: 280px; }
  .btn-quote { padding: 14px 24px; }
}

/* phones */
@media (max-width: 480px) {
  .hero { padding-top: 80px; }
  .hero-grid { padding: 36px 6vw 56px; }
  .hero-actions { gap: .8rem; }
  .btn-quote { width: 100%; justify-content: center; }
  .link-text { width: 100%; justify-content: center; }
}

/* -- PRODUCTS -- */
.products { background: var(--paper); padding: 96px 4vw 84px; }
.products-inner { max-width: var(--maxw); margin: 0 auto; }
.prod-title { color: var(--teal); max-width: 760px; margin-bottom: 1rem; }
.prod-intro { font-weight: 500; color: var(--body-text); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55; max-width: 620px; margin-bottom: 3rem; }

.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 18px; align-items: stretch; }
.prod-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--hairline); border-radius: 14px;
  padding: 28px 24px; background: var(--paper);
  transition: transform .2s var(--ease-out), border-color .2s ease, box-shadow .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .prod-card:hover { transform: translateY(-4px); border-color: rgba(53,92,103,0.35); box-shadow: 0 18px 40px rgba(43,38,32,0.12); }
}
.prod-icon { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; border-radius: 12px; margin-bottom: 16px; }
.prod-icon { background: rgba(53,92,103,0.08); color: var(--teal); }
.prod-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prod-made { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--gold); color: #23303a; font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.prod-made::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.prod-made.is-both { background: transparent; border: 1px solid rgba(53,92,103,.28); color: var(--teal); }
.card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-go { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-weight: 600; font-size: .83rem; color: var(--maroon); opacity: 0; transform: translateY(4px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.card-go svg { width: 14px; height: 14px; }
@media (hover: none) { .card-go { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  .prod-card:hover .card-go { opacity: 1; transform: none; }
}
.prod-icon svg { width: 24px; height: 24px; }
.prod-card h3 { font-family: var(--font); font-weight: 600; font-size: 1.06rem; color: var(--teal); line-height: 1.3; margin-bottom: 10px; }
.prod-card p { font-weight: 400; font-size: .9rem; line-height: 1.55; color: var(--body-text); margin-bottom: 16px; flex: 1; }
.prod-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.prod-tags span {
  font-weight: 600; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--teal); background: transparent;
  border: 1px solid rgba(53,92,103,0.28);
  padding: 4px 10px; border-radius: 5px;
}


.prod-cta { margin-top: 38px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn-products { display: inline-flex; align-items: center; gap: 10px; background: var(--teal); color: var(--yellow); font-family: var(--font); font-weight: 600; font-size: .96rem; padding: 15px 26px; border-radius: 10px; text-decoration: none; transition: background-color .15s ease, transform .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn-products:hover { background: #2c4d57; transform: translateY(-2px); } }
.btn-products:active { transform: scale(0.97); }
.btn-products svg { width: 17px; height: 17px; }
.prod-cta-note { font-weight: 500; font-size: .85rem; color: #6B6357; }

@media (max-width: 820px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } .products { padding: 64px 6vw; } }
@media (max-width: 460px) { .prod-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } }


/* -- WHY JSS -- */
.why { background: var(--paper); padding: 84px 4vw; }
.why-inner { max-width: var(--maxw); margin: 0 auto; }
.why-title { color: var(--teal); max-width: 760px; margin-bottom: 1rem; }
.why-intro { font-weight: 500; color: var(--body-text); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55; max-width: 680px; margin-bottom: 3rem; }

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why-card {
  background: var(--soft); border: 1px solid var(--hairline); border-radius: 16px; padding: 32px 30px 36px;
}
.why-card h3 { font-family: var(--font); font-weight: 700; font-size: 1.26rem; color: var(--maroon); margin-bottom: 10px; letter-spacing: -.01em; }
.why-card p { font-weight: 400; font-size: 1rem; line-height: 1.55; color: var(--body-text); }

@media (max-width: 980px) { .why-grid { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 820px) { .why { padding: 64px 6vw; } .why-card { padding: 26px 24px 30px; } }


/* -- MARKETS -- */
.markets { background: var(--soft); padding: 84px 4vw; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.markets-inner { max-width: var(--maxw); margin: 0 auto; }
.mk-title { color: var(--teal); max-width: 760px; margin-bottom: 2.6rem; }

.mk-wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: start; }

.mk-list { display: flex; flex-direction: column; }
.mk-item { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.mk-item:first-child { padding-top: 0; }
.mk-dot { width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; background: var(--gold); }
.mk-item h3 { font-family: var(--font); font-weight: 600; font-size: 1.22rem; color: var(--teal); margin-bottom: 7px; }
.mk-item p { font-weight: 400; font-size: .95rem; line-height: 1.5; color: var(--body-text); }

.mk-note { background: var(--teal); border-radius: 24px; padding: 36px 34px; position: sticky; top: 24px; }
.mk-note h3 { font-family: var(--font); font-weight: 600; font-size: 1.28rem; color: var(--gold-text); margin-bottom: 18px; }
.mk-note p { font-weight: 400; font-size: .96rem; line-height: 1.55; color: var(--yellow); margin-bottom: 14px; }
.mk-note .btn-wa { margin-top: 8px; }

@media (max-width: 900px) { .mk-wrap { grid-template-columns: 1fr; gap: 32px; } .mk-note { position: static; } }
@media (max-width: 820px) { .markets { padding: 64px 6vw; } }


/* -- MOBILE MENU: toggle in the pill + a card that drops from it --
   The pill (z 125) stays above the backdrop (z 110) and the card (z 120),
   so the same button opens and closes the menu. Exit is faster than enter. */
.nav-toggle {
  display: none; position: relative; width: 44px; height: 44px; border: none; border-radius: 50%;
  background: var(--soft); color: var(--ink); cursor: pointer;
  transition: background-color .15s ease, transform .16s var(--ease-out);
}
.nav-toggle:active { transform: scale(0.96); }
.nav-toggle svg {
  position: absolute; inset: 0; margin: auto; width: 22px; height: 22px;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), filter .2s var(--ease-out);
}
.nav-toggle .i-close { opacity: 0; transform: rotate(-45deg) scale(.8); filter: blur(2px); }
.nav-toggle[aria-expanded="true"] .i-menu { opacity: 0; transform: rotate(45deg) scale(.8); filter: blur(2px); }
.nav-toggle[aria-expanded="true"] .i-close { opacity: 1; transform: none; filter: none; }

.menu-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(33,29,23,.32); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.menu-backdrop.open { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.mobile-menu {
  position: fixed; z-index: 120; top: calc(12px + var(--nav-h) + 8px); right: 12px;
  width: min(calc(100% - 24px), 380px); padding: 8px;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 22px; box-shadow: 0 2px 4px rgba(43,38,32,.06), 0 24px 60px rgba(43,38,32,.22);
  transform-origin: top right; opacity: 0; transform: translateY(-6px) scale(.96); visibility: hidden;
  transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s;
}
.mobile-menu.open {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity .2s var(--ease-out), transform .26s var(--ease-out), visibility 0s;
}
.mobile-menu > a { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-radius: 14px; font-weight: 500; font-size: 1.02rem; color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
.mobile-menu > a[aria-current="page"] { color: var(--teal); font-weight: 600; background: rgba(53,92,103,.08); }
.mobile-menu > a:active { background: var(--soft); }
.mobile-menu > a svg { width: 16px; height: 16px; color: var(--gold); }
.mobile-menu-foot { display: flex; gap: 8px; margin-top: 6px; padding: 10px 8px 6px; border-top: 1px solid var(--hairline); }
.mobile-menu-foot .wa-btn { flex: 1; justify-content: center; }

.btn-docs { display: inline-flex; align-items: center; gap: 9px; background: var(--gold); color: #23303a; font-family: var(--font); font-weight: 600; font-size: .96rem; padding: 13px 22px; border-radius: 10px; text-decoration: none; transition: transform .16s var(--ease-out), background-color .15s ease; }
@media (hover: hover) and (pointer: fine) { .btn-docs:hover { transform: translateY(-2px); background: #cf9233; } }
.btn-docs:active { transform: scale(0.97); }
.btn-docs svg { width: 18px; height: 18px; }

/* Nav breakpoints: links fold into the menu card below 1120px; on phones
   the round WhatsApp button goes too (the floating one stays). */
@media (max-width: 1120px) {
  nav { z-index: 125; padding: 0 8px 0 18px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 520px) {
  :root { --nav-h: 58px; }
  nav { top: 10px; width: calc(100% - 20px); padding: 0 7px 0 16px; gap: 10px; }
  .brand img { width: 88px; }
  .nav-wa { display: none; }
  .nav-quote { height: 42px; padding: 0 16px; font-size: .86rem; }
  .nav-quote svg { display: none; }
  .nav-toggle { width: 42px; height: 42px; }
  .mobile-menu { top: calc(10px + var(--nav-h) + 8px); right: 10px; width: calc(100% - 20px); }
}
@media (min-width: 1121px) { .mobile-menu, .menu-backdrop { display: none; } }


.prod-card:active { transform: scale(0.99); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  /* no movement on hover or press either; colour changes stay */
  a:hover, a:active, button:hover, button:active, .prod-card:hover, .prod-card:active { transform: none !important; }
}


/* -- EXPORT PROOF: own section after Products -- */
.proof { background: var(--soft); padding: 84px 4vw; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.proof-inner { max-width: var(--maxw); margin: 0 auto; }
.export-head { margin-bottom: 28px; }
.export-title { color: var(--teal); font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 10px; }
.export-sub { font-weight: 500; color: var(--body-text); font-size: clamp(.98rem, 1.3vw, 1.15rem); line-height: 1.5; max-width: 660px; }
.export-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.export-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: 16px; padding: 14px 14px 22px; }
.export-img { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 16px; background: rgba(0,0,0,.15); }
.export-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.export-card h3 { font-family: var(--font); font-weight: 600; font-size: 1.08rem; color: var(--maroon); margin: 0 8px 6px; }
.export-card p { font-weight: 400; font-size: .9rem; line-height: 1.5; color: var(--body-text); margin: 0 8px; }
@media (max-width: 900px) { .export-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .proof { padding: 64px 6vw; } }


/* -- TWO WAYS TO BUY: planned procurement vs JSS Spares (urgent single parts) -- */
.ways { background: var(--paper); padding: 84px 4vw; }
.ways-inner { max-width: var(--maxw); margin: 0 auto; }
.ways-title { color: var(--teal); font-size: clamp(2.25rem, 4.2vw, 3.5rem); margin-bottom: 2.2rem; }
.ways-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.way-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--soft); border: 1px solid var(--hairline); border-radius: 16px; padding: 36px 34px 38px; }
.way-card h3 { font-size: clamp(1.9rem, 2.8vw, 2.4rem); color: var(--teal); margin-bottom: 12px; }
.way-card p { font-size: 1rem; line-height: 1.6; color: var(--body-text); max-width: 46ch; margin-bottom: 26px; }
.way-card .btn-quote { margin-top: auto; }
.way-card.is-spares { background: var(--maroon); border-color: var(--maroon); }
.way-card.is-spares h3 { color: var(--gold-text); }
.way-card.is-spares p { color: var(--yellow); }
.btn-spares { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 10px; background: var(--gold); color: var(--maroon-deep); font-weight: 700; font-size: .98rem; text-decoration: none; transition: background-color .15s ease, transform .16s var(--ease-out); }
.btn-spares svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) { .btn-spares:hover { background: #f0b357; transform: translateY(-2px); } }
.btn-spares:active { transform: scale(0.97); }
.way-card.is-spares :focus-visible, .btn-spares:focus-visible { outline-color: var(--yellow); }
@media (max-width: 820px) { .ways { padding: 64px 6vw; } .ways-grid { grid-template-columns: 1fr; gap: 16px; } .way-card { padding: 28px 24px 30px; } }

/* -- ABOUT -- */
.about { background: var(--soft); padding: 84px 4vw; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.about-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.about-title { color: var(--teal); margin-bottom: 1.4rem; }
.about-text p { font-weight: 400; color: var(--body-text); font-size: 1.03rem; line-height: 1.65; margin-bottom: 1.1rem; max-width: 560px; }
.about-text p a { color: var(--maroon); font-weight: 600; text-decoration-thickness: 1px; }
.about-badges { display: flex; flex-wrap: wrap; gap: 9px; margin: 1.7rem 0 1.9rem; }
.about-badges span { font-weight: 600; font-size: .76rem; letter-spacing: .04em; color: var(--teal); background: var(--paper); border: 1px solid var(--hairline); padding: 7px 13px; border-radius: 999px; }

.about-visual { position: relative; }
.about-offset { position: absolute; left: -22px; bottom: -22px; width: 62%; height: 72%; background: var(--teal); border-radius: 16px; z-index: 0; }
.about-photo { position: relative; z-index: 1; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; box-shadow: 0 20px 46px rgba(53,40,30,0.18); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-caption { position: absolute; z-index: 2; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; background: var(--maroon); color: var(--yellow); font-weight: 600; font-size: .76rem; letter-spacing: .02em; padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(33,29,23,.28); }
.about-caption::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

@media (max-width: 900px) {
  .about { padding: 64px 6vw; }
  .about-inner { grid-template-columns: 1fr; gap: 44px; }
  .about-offset { left: -12px; bottom: -12px; }
}


/* -- HOW IT WORKS -- */
.howit { background: var(--paper); padding: 84px 4vw; }
.howit-inner { max-width: var(--maxw); margin: 0 auto; }
.howit-title { color: var(--teal); max-width: 680px; margin-bottom: 3.4rem; }
.howit-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.howit-steps::before { content: ''; position: absolute; top: 31px; left: 32px; right: calc(25% - 40px); height: 1.5px; background: rgba(53,92,103,0.22); z-index: 0; }
.howit-step { position: relative; z-index: 1; }
.howit-num { width: 64px; height: 64px; border: 2px solid var(--teal); border-radius: 50%; color: var(--teal); font-family: var(--serif); font-weight: 400; font-size: 2rem; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; background: var(--paper); }
.howit-step h3 { font-family: var(--font); font-weight: 600; font-size: 1.18rem; color: var(--maroon); line-height: 1.25; margin-bottom: 12px; }
.howit-step p { font-weight: 400; font-size: .95rem; line-height: 1.55; color: var(--body-text); }
@media (max-width: 1080px) { .howit-steps { grid-template-columns: repeat(2, 1fr); gap: 34px 28px; } .howit-steps::before { display: none; } }
@media (max-width: 560px) { .howit-steps { grid-template-columns: 1fr; } .howit { padding: 64px 6vw; } }

/* -- HOMEPAGE FAQ: heading column + always-visible answers (FAQPage JSON-LD mirrors the text) -- */
.hfaq { background: var(--soft); padding: 84px 4vw; border-top: 1px solid var(--hairline); }
.hfaq-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.hfaq-head { position: sticky; top: calc(12px + var(--nav-h) + 32px); }
.hfaq-title { color: var(--teal); font-size: clamp(2.25rem, 4.2vw, 3.5rem); margin-bottom: 14px; }
.hfaq-head p { font-size: 1.02rem; line-height: 1.6; color: var(--body-text); max-width: 34ch; margin-bottom: 20px; }
.hfaq-list { border-top: 1px solid var(--hairline); }
.hfaq-q { padding: 24px 0 26px; border-bottom: 1px solid var(--hairline); }
.hfaq-q h3 { font-family: var(--font); font-weight: 600; font-size: 1.06rem; line-height: 1.4; text-wrap: balance; color: var(--teal); margin-bottom: 8px; }
.hfaq-q p { font-size: .97rem; line-height: 1.7; color: var(--body-text); max-width: 62ch; text-wrap: pretty; }
.hfaq-q a, .cta-text p a { font-weight: 600; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
.hfaq-q a { color: var(--maroon); text-decoration-color: rgba(158,42,43,.35); }
.cta-text p a { color: var(--yellow); text-decoration-color: rgba(255,243,176,.45); }
@media (hover: hover) and (pointer: fine) { .hfaq-q a:hover, .cta-text p a:hover { text-decoration-color: currentColor; } }
@media (max-width: 900px) { .hfaq-inner { grid-template-columns: 1fr; gap: 28px; } .hfaq-head { position: static; } }
@media (max-width: 820px) { .hfaq { padding: 64px 6vw; } }

/* -- CTA BAND -- */
.cta { background: var(--teal); padding: 76px 4vw; }
.cta-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.cta-text { flex: 1 1 460px; }
.cta-text h2 { color: var(--yellow); font-size: clamp(2.25rem, 4.6vw, 3.75rem); margin-bottom: 1rem; }
.cta-text p { font-weight: 500; color: rgba(255,243,176,0.88); font-size: clamp(1rem, 1.4vw, 1.18rem); max-width: 540px; }
.cta-wa { display: inline-flex; align-items: center; gap: 11px; background: var(--wa); color: var(--wa-ink); font-family: var(--font); font-weight: 700; font-size: 1.1rem; padding: 18px 32px; border-radius: 10px; text-decoration: none; box-shadow: 0 10px 24px rgba(16,36,42,.32); transition: transform .16s var(--ease-out), background-color .15s ease, box-shadow .2s var(--ease-out); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .cta-wa:hover { transform: translateY(-2px); background: var(--wa-hover); } }
.cta-wa:active { transform: scale(0.97); box-shadow: 0 4px 12px rgba(16,36,42,.26); }
.cta-wa svg { width: 22px; height: 22px; fill: var(--wa-ink); }
@media (max-width: 820px) { .cta { padding: 60px 6vw; } }

/* -- FOOTER: light paper, so the full-colour logo sits on it as designed -- */
.footer { background: var(--soft); border-top: 1px solid var(--hairline); padding: 72px 4vw 30px; }
.footer-top { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; }
.foot-logo { display: inline-block; margin-bottom: 18px; border-radius: 6px; }
.foot-logo img { display: block; width: 140px; height: auto; }
.foot-about p { font-weight: 400; font-size: .95rem; line-height: 1.65; color: var(--body-text); max-width: 340px; }
.foot-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.foot-badges span { font-weight: 600; font-size: .72rem; letter-spacing: .03em; color: var(--teal); background: var(--paper); border: 1px solid var(--hairline); padding: 6px 11px; border-radius: 999px; }
.foot-col h2 { font-family: var(--font); font-weight: 600; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon); margin-bottom: 16px; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot-col a { font-weight: 400; font-size: .95rem; color: var(--ink); text-decoration: none; transition: color .15s ease; }
@media (hover: hover) and (pointer: fine) { .foot-col a:hover { color: var(--maroon); } }
.foot-contact a.link { color: var(--teal); font-weight: 500; }
.foot-addr { font-weight: 400; font-size: .95rem; color: var(--body-text); }
.footer-bottom { max-width: var(--maxw); margin: 48px auto 0; padding-top: 22px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-weight: 400; font-size: .82rem; color: #6B6357; }
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr; gap: 32px; } .footer { padding: 56px 6vw 28px; } }
/* legal links and the cookie settings button in the bottom bar */
.foot-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot-legal a, .foot-cookie { display: inline-block; padding: 4px 0; font: inherit; color: #6B6357; text-decoration: none; background: none; border: 0; cursor: pointer; transition: color .15s ease; }
@media (hover: hover) and (pointer: fine) { .foot-legal a:hover, .foot-cookie:hover { color: var(--maroon); } }
.foot-legal a[aria-current="page"] { color: var(--teal); font-weight: 600; }

/* -- COOKIE CONSENT --
   Built by site.js when no choice is stored. Analytics stays denied (Google
   Consent Mode, set in each page's analytics loader) until "Accept". Both
   buttons are the same size.
   Motion: transitions, not keyframes, so a quick open then close retargets
   smoothly. site.js adds [data-open] a beat after the hero settles; the card
   rises from its own corner (origin bottom left) with a short stagger on its
   contents. Exit is faster than entry and skips the stagger. On phones the
   card spans the width and the WhatsApp button lifts above it with the same
   curve (--consent-h is set by site.js). */
.consent { position: fixed; left: 22px; bottom: 22px; z-index: 102; width: min(440px, calc(100vw - 44px)); background: var(--paper); border-radius: 16px; box-shadow: 0 1px 2px rgba(16,36,42,.08), 0 18px 48px rgba(16,36,42,.22); padding: 22px 22px 20px; transform-origin: bottom left;
  opacity: 0; transform: translateY(14px) scale(.98); filter: blur(4px);
  transition: opacity .3s var(--ease-out), transform .36s var(--ease-out), filter .3s var(--ease-out); }
.consent[data-open] { opacity: 1; transform: none; filter: none; }
.consent > * { opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.consent[data-open] > * { opacity: 1; transform: none; }
.consent[data-open] > :nth-child(1) { transition-delay: .06s; }
.consent[data-open] > :nth-child(2) { transition-delay: .1s; }
.consent[data-open] > :nth-child(3) { transition-delay: .14s; }
.consent.is-leaving { opacity: 0; transform: translateY(8px) scale(.99); transition-duration: .18s; pointer-events: none; }
.consent-title { font-weight: 700; font-size: .95rem; color: var(--teal); margin-bottom: 6px; }
.consent-text { font-size: .88rem; line-height: 1.55; color: var(--body-text); }
.consent-text a { color: var(--maroon); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.consent-actions { display: flex; gap: 10px; margin-top: 16px; }
.consent-actions button { flex: 1; font: 600 .92rem var(--font); padding: 12px 16px; border-radius: 10px; border: 1px solid var(--teal); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .14s var(--ease-out); }
.consent-reject { background: var(--paper); color: var(--teal); }
.consent-accept { background: var(--teal); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .consent-reject:hover { background: var(--soft); } .consent-accept:hover { background: #2A4A53; } }
.consent-actions button:active { transform: scale(0.97); }
.consent-actions button:focus-visible { outline-color: var(--gold); outline-offset: 2px; }
@media (max-width: 640px) {
  .consent { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 18px 16px; transform-origin: bottom center; }
  /* the transition on the destination state wins: lift slow (here), drop fast (base .wa-float rule) */
  .has-consent .wa-float { translate: 0 calc(-1 * (var(--consent-h, 0px) + 8px)); transition: transform .16s var(--ease-out), background-color .15s ease, translate .36s var(--ease-out); }
}
/* reduced motion: a plain fade, no rise, scale or blur */
@media (prefers-reduced-motion: reduce) {
  .consent, .consent > *, .consent.is-leaving { transform: none; filter: none; }
  .consent > * { transition: none; opacity: 1; }
  .wa-float { translate: none !important; }
  .has-consent .wa-float { bottom: calc(var(--consent-h, 0px) + 24px); }
}


/* -- FLOATING WHATSAPP -- */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 100; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37,211,102,.42); transition: transform .16s var(--ease-out), background-color .15s ease, translate .18s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover { transform: scale(1.06); background: var(--wa-hover); }
}
.wa-float:active { transform: scale(0.96); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 480px) { .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; } .wa-float svg { width: 28px; height: 28px; } }

/* -- HERO MOTION (homepage) --
   Pure CSS, so it starts with the first paint and runs off the main thread
   (no GSAP, no Three.js). One authored moment: the copy rises in, the oven
   builds, then the highlight sweeps "Biscuit ... Plant". */
.hero { overflow: hidden; }
.hero-grid { position: relative; z-index: 1; }

/* heroIn starts at .1 opacity, not 0: Chrome skips text that first paints
   fully transparent, so a 0 start made the cookie banner or a late frame the
   LCP (about 3.6s on a slow phone instead of 1.8s). At .1 with the blur it
   still reads as invisible. */
@keyframes heroIn { from { opacity: .1; transform: translateY(14px); filter: blur(6px); } }
@keyframes heroFade { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.hero h1      { animation: heroIn .8s var(--ease-out) .05s both; }
.hero-sub     { animation: heroIn .7s var(--ease-out) .16s both; }
.hero-actions { animation: heroIn .7s var(--ease-out) .24s both; }
.hero-trust   { animation: heroIn .7s var(--ease-out) .32s both; }
.hero-visual  { animation: heroFade .9s var(--ease-out) .1s both; }

/* Highlight, 3.7s: the caret blinks twice before "Biscuit" (1s), leads the
   gold fill to "Plant" (0.9s), the highlight holds (1.4s), then the gold
   clears in reading direction (0.4s) and the phrase is plain italic again. */
.mark { animation: markSweep 3.7s .75s both; }
@keyframes markSweep {
  0%      { background-size: 3px 100%, 0% 100%;   background-position: 0% 0%, 0% 0%;     animation-timing-function: step-end; }
  6.76%   { background-size: 0px 100%, 0% 100%;   background-position: 0% 0%, 0% 0%;     animation-timing-function: step-end; }
  13.51%  { background-size: 3px 100%, 0% 100%;   background-position: 0% 0%, 0% 0%;     animation-timing-function: step-end; }
  20.27%  { background-size: 0px 100%, 0% 100%;   background-position: 0% 0%, 0% 0%;     animation-timing-function: step-end; }
  27.03%  { background-size: 3px 100%, 0% 100%;   background-position: 0% 0%, 0% 0%;     animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  51.35%  { background-size: 3px 100%, 100% 100%; background-position: 100% 0%, 0% 0%;   animation-timing-function: step-end; }
  54%     { background-size: 0px 100%, 100% 100%; background-position: 100% 0%, 100% 0%; }
  89.19%  { background-size: 0px 100%, 100% 100%; background-position: 100% 0%, 100% 0%; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  100%    { background-size: 0px 100%, 0% 100%;   background-position: 100% 0%, 100% 0%; }
}

/* Oven illustration: builds once, then idles quietly. */
.hero-visual svg * { transform-box: fill-box; transform-origin: center; }
@keyframes ovenDrop   { from { opacity: 0; transform: translateY(-18px); } }
@keyframes beltGrow   { from { opacity: 0; transform: scaleY(.85); } }
@keyframes lineGrow   { from { transform: scaleX(0); } }
@keyframes biscuitPop { from { opacity: 0; transform: scale(.5); } }
@keyframes heatRise   { from { opacity: .85; transform: translateY(0); } to { opacity: 0; transform: translateY(-9px); } }
@keyframes blink      { from { opacity: 1; } to { opacity: .3; } }
@keyframes pulse      { from { opacity: .5; } to { opacity: 1; } }
@keyframes bob        { to { transform: translateY(4px); } }

.hero-visual svg > rect { animation: ovenDrop .6s var(--ease-out) .3s both; }
.hero-visual .light-a { animation: ovenDrop .6s var(--ease-out) .35s both, blink 1.2s linear 1.4s infinite alternate; }
.hero-visual .light-b { animation: ovenDrop .6s var(--ease-out) .4s both, blink 1.2s linear 1.4s infinite alternate-reverse; }
.hero-visual polygon { transform-origin: top center; animation: beltGrow .6s var(--ease-out) .5s both; }
.hero-visual .belt-lines line { animation: lineGrow .5s var(--ease-out) .7s both, pulse 1.8s ease-in-out 1.5s infinite alternate; }
.hero-visual .belt-lines line:nth-child(2) { animation-delay: .78s, 1.95s; }
.hero-visual .belt-lines line:nth-child(3) { animation-delay: .86s, 2.4s; }
.hero-visual .belt-lines line:nth-child(4) { animation-delay: .94s, 2.85s; }
.hero-visual .b-row > g { animation: biscuitPop .5s cubic-bezier(0.34, 1.56, 0.64, 1) .9s both; }
.hero-visual .b-row > g:nth-child(2) { animation-delay: .95s; }
.hero-visual .b-row > g:nth-child(3) { animation-delay: 1s; }
.hero-visual .r2 > g { animation-delay: 1.02s; } .hero-visual .r2 > g:nth-child(2) { animation-delay: 1.07s; } .hero-visual .r2 > g:nth-child(3) { animation-delay: 1.12s; }
.hero-visual .r3 > g { animation-delay: 1.14s; } .hero-visual .r3 > g:nth-child(2) { animation-delay: 1.19s; } .hero-visual .r3 > g:nth-child(3) { animation-delay: 1.24s; }
.hero-visual .r4 > g { animation-delay: 1.26s; } .hero-visual .r4 > g:nth-child(2) { animation-delay: 1.31s; } .hero-visual .r4 > g:nth-child(3) { animation-delay: 1.36s; }
.hero-visual .b-row { animation: bob 2.5s ease-in-out 1.8s infinite alternate; }
.hero-visual .r2 { animation-delay: 2.2s; } .hero-visual .r3 { animation-delay: 2.6s; } .hero-visual .r4 { animation-delay: 3s; }
.hero-visual .heat path { animation: heatRise 2.4s ease-out 1.2s infinite; }
.hero-visual .heat path:nth-child(2) { animation-delay: 1.65s; }
.hero-visual .heat path:nth-child(3) { animation-delay: 2.1s; }

/* Ambient specks: replaces the Three.js particle field (121KB) with two
   compositor-only layers of scattered dots on prime-sized tiles. */
.hero::before, .hero::after {
  content: ''; position: absolute; inset: -40px; z-index: 0; pointer-events: none;
  animation: drift 26s ease-in-out infinite alternate;
}
.hero::before {
  background:
    radial-gradient(circle, rgba(224,159,62,.55) 0 1.6px, transparent 2.2px) 0 0 / 173px 137px,
    radial-gradient(circle, rgba(224,159,62,.4) 0 2.2px, transparent 2.8px) 61px 43px / 251px 199px,
    radial-gradient(circle, rgba(224,159,62,.35) 0 1.2px, transparent 1.8px) 97px 151px / 317px 263px;
}
.hero::after {
  background:
    radial-gradient(circle, rgba(158,42,43,.3) 0 1.4px, transparent 2px) 29px 71px / 211px 181px,
    radial-gradient(circle, rgba(158,42,43,.22) 0 1.8px, transparent 2.4px) 133px 17px / 349px 277px;
  animation-duration: 34s; animation-direction: alternate-reverse;
}
@keyframes drift { from { transform: translate3d(-12px, 8px, 0); } to { transform: translate3d(14px, -10px, 0); } }

/* -- SCROLL REVEAL (site.js) --
   site.js tags groups below the fold and plays a WAAPI fade-rise when each
   enters view; elements already on screen at load are never hidden. The
   class only holds the hidden state; WAAPI does the motion, so card hover
   transitions stay untouched. */
.js .reveal:not(.is-visible) { opacity: 0; }

/* -- FAQ: animated open where the browser supports it -- */
@supports (interpolate-size: allow-keywords) {
}

@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .btn-quote { width: 100%; justify-content: center; }
  .link-text { width: auto; align-self: center; justify-content: center; }
}


/* =====================================================================
   PRODUCT DETAIL PAGES  (<body class="pg-page">)
   One template for all nine detail pages. Page-only sections
   (.pg-spares, .pg-mfg, .flav-all) live here too, so no page needs its
   own copy of the shared rules.
   ===================================================================== */


/* Hero */
.pg-hero { background: var(--teal); padding: 128px 4vw 96px; }
.pg-hero-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 72px; align-items: center; }
.pg-hero-content { display: flex; flex-direction: column; align-items: flex-start; }
.pg-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,243,176,0.85); margin-bottom: 1.4rem; }
.pg-breadcrumb a { display: inline-block; padding: 10px 0; color: rgba(255,243,176,0.85); text-decoration: none; transition: color .15s ease; }
@media (hover: hover) and (pointer: fine) { .pg-breadcrumb a:hover { color: var(--gold-text); } }
.pg-breadcrumb span { color: rgba(255,243,176,0.55); }
.pg-breadcrumb [aria-current] { color: rgba(255,243,176,0.9); }
.pg-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; margin: -.2rem 0 1.3rem; }
.pg-badge.mfg { background: var(--gold); color: #23303a; }
.pg-badge.mfg::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #23303a; }
.pg-badge.src, .pg-badge.both { background: rgba(255,243,176,0.1); color: var(--yellow); border: 1px solid rgba(255,243,176,0.25); }
.pg-badge.both::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.pg-hero h1 { color: var(--yellow); font-size: clamp(2.6rem, 5vw, 4.25rem); margin-bottom: 1.3rem; }
.pg-hero-sub { font-weight: 400; color: rgba(255,243,176,0.82); font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.7; max-width: 540px; margin-bottom: 2.2rem; }
.pg-hero-actions { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; }
.pg-hero-trust { margin-top: 1.5rem; font-size: .82rem; font-weight: 500; line-height: 1.6; color: rgba(255,243,176,0.85); }
.pg-hero-trust b { color: var(--gold-text); font-weight: 600; }
.pg-hero-sub + .pg-hero-trust { margin-top: -.7rem; }
.link-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: rgba(255,243,176,0.88); text-decoration: none; padding: 12px 0; transition: color .15s ease; }
.link-back svg { transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-back:hover { color: var(--gold-text); } .link-back:hover svg { transform: translateX(-2px); } }
.link-back svg { width: 15px; height: 15px; }

/* Arrival: the hero copy rises in from first paint, like the homepage */
.pg-hero-content > * { animation: heroIn .7s var(--ease-out) both; }
.pg-hero-content > :nth-child(2) { animation-delay: .05s; }
.pg-hero-content > :nth-child(3) { animation-delay: .1s; }
.pg-hero-content > :nth-child(4) { animation-delay: .16s; }
.pg-hero-content > :nth-child(5) { animation-delay: .22s; }
.pg-hero-content > :nth-child(6) { animation-delay: .28s; }
.pg-hero-index { animation: heroFade .8s var(--ease-out) .2s both; }

/* Hero index: the range at a glance, linking to each card below */
.pg-hero-index { border: 1px solid rgba(255,243,176,0.18); border-radius: 16px; padding: 26px 26px 10px; background: rgba(0,0,0,0.08); }
.pg-hero-index-title { font-family: var(--font); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 8px; }
.pg-hero-index ul { list-style: none; }
.pg-hero-index li + li { border-top: 1px solid rgba(255,243,176,0.12); }
.pg-hero-index a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; font-weight: 500; font-size: .95rem; line-height: 1.35; color: var(--yellow); text-decoration: none; transition: color .15s ease; }
.pg-hero-index a svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold); transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pg-hero-index a:hover { color: var(--gold-text); }
  .pg-hero-index a:hover svg { transform: translateY(2px); }
}

/* Section heads */
.pg-section-title { color: var(--teal); max-width: 760px; margin-bottom: 1rem; }
.pg-section-title.is-compact { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.pg-section-sub { font-weight: 500; color: var(--body-text); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; max-width: 660px; margin-bottom: 3rem; }
.pg-section-sub.is-compact { font-size: .98rem; margin-bottom: 0; }

/* Range */
.pg-range { background: var(--paper); padding: 96px 4vw; }
.pg-range-inner { max-width: var(--maxw); margin: 0 auto; }
.ing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ing-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; padding: 28px 24px; scroll-margin-top: 100px; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s ease; }
.ing-card:target { border-color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .ing-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(43,38,32,0.11); border-color: rgba(53,92,103,0.3); }
}
.ing-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.ing-icon svg { width: 22px; height: 22px; }
.ing-icon { background: rgba(53,92,103,0.08); color: var(--teal); }
.ing-card h3 { font-weight: 600; font-size: 1.08rem; color: var(--teal); line-height: 1.3; margin-bottom: 8px; }
.ing-card .hsn { font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--maroon); margin-bottom: 10px; }
.ing-card p { font-weight: 400; font-size: .92rem; line-height: 1.6; color: var(--body-text); flex: 1; margin-bottom: 16px; }
.ing-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.ing-meta span { font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); border: 1px solid rgba(53,92,103,0.28); padding: 4px 10px; border-radius: 5px; }

/* Quick-reference spares list (oven heaters) */
.pg-spares { background: var(--soft); padding: 72px 4vw; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.pg-spares-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.pg-spares-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pg-spare-item { background: var(--paper); border: 1px solid var(--hairline); border-radius: 10px; padding: 12px 16px; font-weight: 500; font-size: .9rem; color: var(--teal); display: flex; align-items: center; gap: 10px; }
.pg-spare-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

/* Custom-made canvas band (conveyor belts page): a light section like
   .pg-spares, so maroon stays reserved for the Spares hand-off. */
.pg-mfg { background: var(--soft); padding: 96px 4vw; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.pg-mfg-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.pg-mfg-title { color: var(--teal); margin-bottom: 1rem; }
.pg-mfg-sub { font-weight: 500; color: var(--body-text); font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.65; margin-bottom: 2rem; }
.pg-mfg-cards { display: flex; flex-direction: column; gap: 14px; }
.pg-mfg-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; padding: 24px 22px; }
.pg-mfg-card h3 { font-weight: 600; font-size: 1.08rem; color: var(--teal); margin-bottom: 8px; }
.pg-mfg-card p { font-weight: 400; font-size: .92rem; line-height: 1.6; color: var(--body-text); margin-bottom: 12px; }
.pg-mfg-sub a { color: var(--maroon); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(158,42,43,.4); transition: text-decoration-color .15s ease; }
@media (hover: hover) and (pointer: fine) { .pg-mfg-sub a:hover { text-decoration-color: currentColor; } }

/* Full flavour list (flavours page) */
.flav-all { margin-top: 40px; padding: 30px 26px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--soft); }
.flav-all h3 { font-weight: 600; font-size: 1.12rem; color: var(--teal); margin-bottom: 6px; }
.flav-all p { font-weight: 400; font-size: .92rem; line-height: 1.6; color: var(--body-text); margin-bottom: 18px; max-width: 720px; }
.flav-all .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.flav-all .tags span { font-weight: 600; font-size: .72rem; letter-spacing: .02em; color: var(--teal); background: var(--paper); border: 1px solid rgba(53,92,103,0.24); padding: 6px 12px; border-radius: 6px; }
.flav-all .flav-group { margin: 18px 0 10px; font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--maroon); }
.flav-all .tags + .flav-group { margin-top: 22px; }
/* Photo panel inside a range section: a real photo beside a short text
   block (flavour matching and samples, cotton gloves). */
.pg-feature { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; border: 1px solid var(--hairline); border-radius: 16px; background: var(--soft); overflow: hidden; scroll-margin-top: 100px; }
.pg-feature:target { border-color: var(--gold); }
.pg-feature-img { display: block; width: 100%; height: 100%; min-height: 240px; aspect-ratio: 16 / 10; object-fit: cover; background: var(--hairline); }
.pg-feature-text { padding: 30px 32px; }
.pg-feature-text h3 { font-size: clamp(1.75rem, 2.4vw, 2.2rem); color: var(--teal); margin-bottom: 12px; }
.pg-feature-text p { font-weight: 400; font-size: .92rem; line-height: 1.6; color: var(--body-text); margin-bottom: 18px; max-width: 60ch; }
.pg-feature-text .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-feature-text .tags span { font-weight: 600; font-size: .72rem; letter-spacing: .02em; color: var(--teal); background: var(--paper); border: 1px solid rgba(53,92,103,0.24); padding: 6px 12px; border-radius: 6px; }
/* tall subjects (a tank on legs): portrait photo, narrower column */
.pg-feature.is-tall { grid-template-columns: minmax(0, .64fr) minmax(0, 1.36fr); align-items: stretch; }
.pg-feature.is-tall .pg-feature-img { aspect-ratio: 4 / 5; }
/* tall panels: the text runs as one centred block beside the photo,
   with a quote checklist so the column carries useful content */
.pg-feature.is-tall .pg-feature-text { display: flex; flex-direction: column; justify-content: center; padding: 40px 48px; }
.pg-feature.is-tall .pg-feature-text > * { max-width: 600px; }
.pg-feature.is-tall .pg-feature-text h3 { font-size: clamp(2rem, 2.8vw, 2.6rem); color: var(--teal); margin-bottom: 14px; }
/* every feature photo carries a caption pill, as on the homepage about photo */
.pg-feature-media { position: relative; min-height: 0; }
.pg-feature-media .pg-feature-img { height: 100%; }
.pg-feature-cap { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; background: var(--maroon); color: var(--yellow); font-weight: 600; font-size: .76rem; letter-spacing: .02em; padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(33,29,23,.28); }
.pg-feature-cap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.pg-feature.is-tall .pg-feature-text > p { margin-bottom: 24px; }
.pg-feature-ask { margin-bottom: 22px; }
.pg-feature-ask p { font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: 4px; }
.pg-feature-ask ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.pg-feature-ask li { position: relative; padding: 11px 0 11px 20px; border-bottom: 1px solid var(--hairline); font-weight: 500; font-size: .9rem; line-height: 1.45; color: var(--body-text); }
.pg-feature-ask li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 7px; height: 7px; border-radius: 2px; background: var(--gold); }
.pg-feature.is-tall .tags { padding-top: 22px; border-top: 1px solid var(--hairline); }
.pg-feature.is-tall .link-text { align-self: flex-start; margin-bottom: 26px; }
@media (max-width: 760px) {
  .pg-feature { grid-template-columns: 1fr; }
  .pg-feature-img { height: auto; min-height: 0; }
  .pg-feature.is-tall { grid-template-columns: 1fr; }
  .pg-feature.is-tall .pg-feature-img { aspect-ratio: 4 / 5; }
  .pg-feature.is-tall .pg-feature-text { padding: 26px 24px 26px; }
  .pg-feature-ask ul { grid-template-columns: 1fr; }
  .pg-feature-text { padding: 24px 22px 26px; }
}

/* Part pages: where the part is used on the line (cotton canvas belts) */
.pg-uses { background: var(--soft); padding: 96px 4vw; border-bottom: 1px solid var(--hairline); }
.pg-uses-inner { max-width: var(--maxw); margin: 0 auto; }
.pg-uses-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: use; }
.pg-use { counter-increment: use; position: relative; background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; padding: 26px 22px; }
.pg-use::before { content: counter(use, decimal-leading-zero); display: block; font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--gold); margin-bottom: 14px; }
.pg-use h3 { font-weight: 600; font-size: 1.08rem; color: var(--teal); line-height: 1.3; margin-bottom: 8px; }
.pg-use p { font-size: .92rem; line-height: 1.6; color: var(--body-text); }
.pg-uses-note { margin-top: 24px; font-size: .95rem; line-height: 1.6; color: var(--body-text); max-width: 660px; }
.pg-uses-note a { color: var(--maroon); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(158,42,43,.35); transition: text-decoration-color .15s ease; }
@media (hover: hover) and (pointer: fine) { .pg-uses-note a:hover { text-decoration-color: currentColor; } }

/* Part pages: specify, measure and replace */
.pg-spec { background: var(--soft); padding: 96px 4vw; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.pg-spec-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.pg-spec-h { font-weight: 600; font-size: 1.08rem; color: var(--maroon); margin: 2.2rem 0 14px; }
.pg-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 12px; }
.pg-steps li { counter-increment: step; position: relative; padding-left: 42px; font-size: .95rem; line-height: 1.6; color: var(--body-text); }
.pg-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(224,159,62,0.16); color: #A86B14; font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.pg-spec-table { overflow-x: auto; background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; }
.pg-spec-table table { width: 100%; border-collapse: collapse; }
.pg-spec-table caption { text-align: left; padding: 18px 20px 6px; font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--maroon); }
.pg-spec-table th, .pg-spec-table td { text-align: left; vertical-align: top; padding: 12px 20px; font-size: .92rem; line-height: 1.5; border-top: 1px solid var(--hairline); }
.pg-spec-table th { width: 38%; font-weight: 600; color: var(--teal); }
.pg-spec-table td { color: var(--body-text); }
.pg-spec .pg-spares-list { list-style: none; }
/* the extra light section shifts the rhythm after it, like .pg-spares */
.pg-spec + .pg-why, .pg-spec ~ .pg-markets, .pg-spec ~ .pg-related { background: var(--paper); }
.pg-spec ~ .pg-export, .pg-spec ~ .pg-faq { background: var(--soft); }

/* Food colours shade card (flavours page): one swatch per colour, grouped by
   shade. Swatch hues are indicative only, so the copy says so. */
.pg-colours { background: var(--soft); padding: 96px 4vw; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); scroll-margin-top: 80px; }
.pg-colours-inner { max-width: var(--maxw); margin: 0 auto; }
.pg-colour-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: end; margin-bottom: 48px; }
.pg-colour-head .pg-section-sub { margin-bottom: 0; }
.pg-colour-packs { display: grid; gap: 0; background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; padding: 4px 22px; }
.pg-colour-packs div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 16px; padding: 14px 0; }
.pg-colour-packs div + div { border-top: 1px solid var(--hairline); }
.pg-colour-packs dt { font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--maroon); padding-top: 2px; }
.pg-colour-packs dd { font-weight: 500; font-size: .92rem; line-height: 1.5; color: var(--ink); }
.shade-deck { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.shade-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--hairline); }
.shade-head h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.14; letter-spacing: .008em; color: var(--teal); }
.shade-head p { margin-top: 6px; font-weight: 600; font-size: .78rem; color: var(--body-text); font-variant-numeric: tabular-nums; }
.shade-list { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px 12px; }
.shade { display: flex; flex-direction: column; min-width: 0; }
.shade-chip { display: block; height: 68px; border-radius: 10px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(43,38,32,0.10), inset 0 14px 18px -12px rgba(255,255,255,0.35), 0 6px 14px -8px rgba(43,38,32,0.35); margin-bottom: 10px; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.shade-name { font-weight: 600; font-size: .86rem; line-height: 1.3; color: var(--ink); }
.sw-tio2 .shade-chip { box-shadow: inset 0 0 0 1px rgba(43,38,32,0.18), 0 6px 14px -8px rgba(43,38,32,0.25); }
@media (hover: hover) and (pointer: fine) {
  .shade:hover .shade-chip { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(43,38,32,0.10), inset 0 14px 18px -12px rgba(255,255,255,0.35), 0 12px 22px -10px rgba(43,38,32,0.45); }
}
.pg-colour-note { margin-top: 28px; max-width: 760px; font-weight: 500; font-size: .88rem; line-height: 1.65; color: var(--body-text); }
.sw-tartrazine { --sw: #F4D11A; }
.sw-quinoline { --sw: #E9DF3C; }
.sw-sunset { --sw: #F0861E; }
.sw-egg-yellow { --sw: #F7B21B; }
.sw-keshari { --sw: #F59A23; }
.sw-keshari-b { --sw: #EE7F22; }
.sw-orange-red { --sw: #E5532A; }
.sw-orange-red-c { --sw: #D9441F; }
.sw-carmoisine { --sw: #AE1730; }
.sw-amaranth { --sw: #8A1638; }
.sw-ponceau { --sw: #D6223A; }
.sw-erythrosine { --sw: #E2457E; }
.sw-allura { --sw: #C91F2B; }
.sw-raspberry { --sw: #BE1F55; }
.sw-tomato { --sw: #DD3B22; }
.sw-grape { --sw: #5C2B70; }
.sw-black-currant { --sw: #4A1F52; }
.sw-black-currant-fcf { --sw: #3F1C49; }
.sw-falsa { --sw: #7B2F69; }
.sw-kalakatta { --sw: #3B1A3A; }
.sw-veno { --sw: #6E2140; }
.sw-indigo { --sw: #25348C; }
.sw-brilliant-blue { --sw: #1E56D0; }
.sw-apple-green { --sw: #5AA832; }
.sw-pea-green { --sw: #4A872E; }
.sw-choc-fcf { --sw: #5B3321; }
.sw-choc-tas { --sw: #4A2B1D; }
.sw-carmeline { --sw: #8C4D20; }
.sw-cola { --sw: #3A2318; }
.sw-bright-black { --sw: #19191C; }
.sw-iron-black { --sw: #2B2927; }
.sw-tio2 { --sw: #FFFFFF; }
/* the extra light section shifts the rhythm after it, like .pg-spec */
.pg-colours + .pg-why, .pg-colours ~ .pg-markets, .pg-colours ~ .pg-related { background: var(--paper); }
.pg-colours ~ .pg-export, .pg-colours ~ .pg-faq { background: var(--soft); }
@media (max-width: 920px) {
  .pg-colours { padding: 72px 6vw; }
  .pg-colour-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .shade-row { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .shade-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .shade-head p { margin-top: 0; }
  .shade-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .shade-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .shade-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
  .shade-chip { height: 52px; }
  .shade-name { font-size: .8rem; }
  .pg-colour-packs div { grid-template-columns: 1fr; gap: 4px; }
}

/* Why source through JSS */
.pg-why { background: var(--soft); padding: 96px 4vw; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.pg-why-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.pg-why-points { display: flex; flex-direction: column; gap: 18px; }
.pg-why-point { display: flex; gap: 18px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; padding: 24px 22px; }
.pg-why-dot { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(224,159,62,0.16); color: #A86B14; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.pg-why-dot svg { width: 20px; height: 20px; }
.pg-why-point h3 { font-weight: 600; font-size: 1.06rem; color: var(--maroon); margin-bottom: 6px; }
.pg-why-point p { font-weight: 400; font-size: .93rem; line-height: 1.6; color: var(--body-text); }

/* Export readiness */
/* the oven page adds a light spares band; shift the rhythm after it */
.pg-spares + .pg-why, .pg-spares ~ .pg-markets, .pg-spares ~ .pg-related { background: var(--paper); }
.pg-spares ~ .pg-export, .pg-spares ~ .pg-faq { background: var(--soft); }
.pg-export { background: var(--paper); padding: 96px 4vw; }
.pg-export-inner { max-width: var(--maxw); margin: 0 auto; }
.pg-export-title { color: var(--teal); max-width: 680px; margin-bottom: 1rem; }
.pg-export-sub { font-weight: 500; color: var(--body-text); font-size: clamp(1rem, 1.3vw, 1.1rem); max-width: 580px; margin-bottom: 2.6rem; line-height: 1.6; }
/* real export photos, shared by every detail page */
.pg-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.pg-proof figure { margin: 0; }
.pg-proof img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--soft); }
.pg-proof figcaption { margin-top: 8px; font-weight: 600; font-size: .82rem; color: var(--body-text); }
@media (max-width: 560px) { .pg-proof { grid-template-columns: 1fr 1fr; } .pg-proof figure:last-child { display: none; } }
.pg-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.pg-chip { min-width: 0; background: var(--soft); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 20px; }
.pg-chip strong { display: block; font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--maroon); margin-bottom: 5px; }
.pg-chip span { font-weight: 500; font-size: .92rem; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }

/* Markets: natural-width chips, so long names wrap instead of overflowing */
.pg-markets { background: var(--soft); padding: 96px 4vw; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.pg-markets-inner { max-width: var(--maxw); margin: 0 auto; }
.pg-market-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.2rem; max-width: 880px; }
.pg-market-item { display: inline-flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid var(--hairline); border-radius: 10px; padding: 13px 18px; }
.pg-market-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.pg-market-item span { font-weight: 600; font-size: .9rem; color: var(--teal); }

/* FAQ */
.pg-faq { background: var(--paper); padding: 96px 4vw; }
.pg-faq-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.pg-faq-head { position: sticky; top: calc(12px + var(--nav-h) + 32px); }
.pg-faq-head .pg-section-title { margin-bottom: 14px; }
.pg-faq-head p { font-size: 1.02rem; line-height: 1.6; color: var(--body-text); max-width: 34ch; margin-bottom: 20px; }
.pg-faq-list { border-top: 1px solid var(--hairline); }
.pg-faq-q { padding: 24px 0 26px; border-bottom: 1px solid var(--hairline); }
.pg-faq-q h3 { font-family: var(--font); font-weight: 600; font-size: 1.04rem; line-height: 1.4; text-wrap: balance; color: var(--teal); margin-bottom: 8px; }
.pg-faq-q p { font-size: .95rem; line-height: 1.7; color: var(--body-text); max-width: 62ch; text-wrap: pretty; }
.pg-faq-q a, .pg-section-sub a, .pg-export-sub a, .ing-card p a, .pg-why-point p a { color: var(--maroon); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(158,42,43,.35); transition: text-decoration-color .15s ease; }
@media (hover: hover) and (pointer: fine) { .pg-faq-q a:hover, .pg-section-sub a:hover, .pg-export-sub a:hover, .ing-card p a:hover, .pg-why-point p a:hover { text-decoration-color: currentColor; } }
/* JSS Spares hand-off on breakdown-part pages, on top of the FAQ section */
.pg-handoff { max-width: var(--maxw); margin: 0 auto 64px; padding: 30px 34px; border-radius: 16px; background: var(--maroon); display: flex; align-items: center; justify-content: space-between; gap: 22px 40px; }
.pg-handoff h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.14; letter-spacing: .008em; color: var(--gold-text); margin-bottom: 8px; text-wrap: balance; }
.pg-handoff p { font-size: .95rem; line-height: 1.6; color: var(--yellow); max-width: 56ch; }
.pg-handoff .btn-spares { margin-top: 0; flex-shrink: 0; }

/* Contact page: enquiry form beside a "what to include" note, then the
   Spares hand-off. The form posts to /contact/submit (a Pages Function);
   site.js sends it with fetch and shows the result inline. */
.pg-contact { background: var(--paper); padding: 96px 4vw 56px; scroll-margin-top: 80px; }
.pg-contact-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.pg-contact-main .pg-section-sub { margin-bottom: 2.2rem; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cf-wide { grid-column: 1 / -1; }
.cf-field label { font-weight: 600; font-size: .86rem; color: var(--ink); }
.cf-req { color: var(--maroon); }
.cf-opt { font-weight: 500; color: var(--body-text); }
.cf-field input, .cf-field textarea { width: 100%; font: 500 .98rem/1.5 var(--font); color: var(--ink); background: var(--soft); border: 1px solid var(--hairline); border-radius: 10px; padding: 13px 14px; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.cf-field textarea { resize: vertical; min-height: 150px; }
.cf-field input:focus, .cf-field textarea:focus { outline: none; background: var(--paper); border-color: var(--teal); box-shadow: 0 0 0 3px rgba(53,92,103,0.16); }
.cf-field [aria-invalid="true"] { border-color: var(--maroon); background: #FCF4F3; }
.cf-hint { font-size: .8rem; line-height: 1.5; color: var(--body-text); }
.cf-error { font-weight: 600; font-size: .8rem; color: var(--maroon); }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 26px; }
.cf-submit { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border: 0; border-radius: 10px; background: var(--teal); color: var(--paper); font: 600 .98rem var(--font); cursor: pointer; transition: background-color .15s ease, transform .15s var(--ease-out), opacity .15s ease; }
.cf-submit svg { width: 17px; height: 17px; transition: transform .2s var(--ease-out); }
.cf-submit:active { transform: scale(0.97); }
.cf-submit[disabled] { opacity: .6; cursor: progress; }
@media (hover: hover) and (pointer: fine) { .cf-submit:hover { background: #2A4A53; } .cf-submit:hover svg { transform: translateX(3px); } }
.cf-status { font-weight: 500; font-size: .9rem; line-height: 1.5; color: var(--body-text); max-width: 46ch; }
.cf-status.is-error { color: var(--maroon); font-weight: 600; }
.cf-status a, .cf-done a { color: var(--maroon); font-weight: 600; text-underline-offset: 3px; }
.cf-done { padding: 30px 30px 32px; border-radius: 16px; background: var(--soft); border: 1px solid var(--hairline); }
.cf-done:focus { outline: none; }
.cf-done h3 { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.14; letter-spacing: .008em; color: var(--teal); margin-bottom: 10px; }
.cf-done p { font-size: .98rem; line-height: 1.65; color: var(--body-text); max-width: 56ch; }
.pg-contact-side { position: sticky; top: calc(var(--nav-h) + 40px); padding: 30px 28px; border-radius: 16px; background: var(--soft); }
.pg-contact-side h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.14; letter-spacing: .008em; color: var(--teal); margin-bottom: 16px; }
.cf-list { list-style: none; margin-bottom: 18px; }
.cf-list li { position: relative; padding: 10px 0 10px 22px; font-weight: 500; font-size: .92rem; line-height: 1.5; color: var(--ink); border-top: 1px solid var(--hairline); }
.cf-list li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); }
.pg-contact-side p { font-size: .9rem; line-height: 1.6; color: var(--body-text); margin-bottom: 18px; }
.pg-contact-spares { background: var(--paper); padding: 0 4vw 96px; }
.pg-contact-spares .pg-handoff { margin: 0 auto; }
@media (max-width: 920px) {
  .pg-contact { padding: 72px 6vw 48px; }
  .pg-contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .pg-contact-side { position: static; }
  .pg-contact-spares { padding: 0 6vw 72px; }
}
@media (max-width: 560px) {
  .cf-grid { grid-template-columns: 1fr; }
  .cf-submit { width: 100%; justify-content: center; }
}

/* Legal pages (privacy, cookies, terms): a sticky "On this page" list
   beside one readable column of numbered sections. */
.pg-legal { background: var(--paper); padding: 88px 4vw 104px; }
.pg-legal-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 236px minmax(0, 760px); gap: 72px; align-items: start; }
.pg-legal-toc { position: sticky; top: calc(var(--nav-h) + 40px); }
.pg-legal-toc-title { font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); margin-bottom: 12px; }
.pg-legal-toc ol { list-style: none; }
.pg-legal-toc a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--hairline); font-weight: 500; font-size: .86rem; line-height: 1.4; color: var(--body-text); text-decoration: none; transition: color .15s ease, border-color .15s ease; }
@media (hover: hover) and (pointer: fine) { .pg-legal-toc a:hover { color: var(--teal); border-color: var(--teal); } }
.pg-legal-body > section { scroll-margin-top: 100px; }
.pg-legal-body > section + section { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--hairline); }
.pg-legal-body h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); color: var(--teal); margin-bottom: 14px; }
.pg-legal-body h3 { font-weight: 600; font-size: 1.02rem; line-height: 1.4; color: var(--ink); margin: 24px 0 8px; }
.pg-legal-body p, .pg-legal-body li { font-size: 1rem; line-height: 1.75; color: var(--body-text); text-wrap: pretty; }
.pg-legal-body p + p, .pg-legal-body ul + p, .pg-legal-body p + ul { margin-top: 12px; }
.pg-legal-body ul { list-style: none; }
.pg-legal-body li { position: relative; padding-left: 22px; }
.pg-legal-body li + li { margin-top: 8px; }
.pg-legal-body li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); }
.pg-legal-body strong { font-weight: 600; color: var(--ink); }
.pg-legal-body a { color: var(--maroon); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(158,42,43,.35); overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .pg-legal-body a:hover { text-decoration-color: currentColor; } }
.pg-legal-lead { padding: 22px 24px; border-radius: 14px; background: var(--soft); margin-bottom: 48px; }
.pg-legal-lead p { font-weight: 500; color: var(--ink); }
.pg-legal-table { margin-top: 16px; overflow-x: auto; border: 1px solid var(--hairline); border-radius: 12px; }
.pg-legal-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9rem; line-height: 1.55; }
.pg-legal-table th, .pg-legal-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--hairline); color: var(--body-text); }
.pg-legal-table th { background: var(--soft); font-weight: 600; font-size: .8rem; letter-spacing: .02em; color: var(--ink); }
.pg-legal-table tr:last-child td { border-bottom: 0; }
.pg-legal-table code { font: 600 .84rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--teal); }
.pg-legal-body .cf-submit { margin-top: 18px; }
@media (max-width: 960px) {
  .pg-legal-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pg-legal-toc { position: static; padding: 20px 22px 14px; border-radius: 14px; background: var(--soft); }
}
@media (max-width: 820px) { .pg-legal { padding: 64px 6vw 80px; } }

/* About page: story with key facts, a photo panel, mission and vision,
   how we work (.pg-why), values and registrations. */
.pg-story { background: var(--paper); padding: 96px 4vw; }
.pg-story-inner { max-width: var(--maxw); margin: 0 auto; }
.pg-story-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.pg-story-text p { font-size: 1.02rem; line-height: 1.75; color: var(--body-text); max-width: 62ch; text-wrap: pretty; }
.pg-story-text p + p { margin-top: 14px; }
.pg-story-text a { color: var(--maroon); font-weight: 600; text-underline-offset: 3px; }
.pg-story-photo { margin: 0; }
.pg-story-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; background: var(--soft); }
.pg-story-photo figcaption { margin-top: 12px; font-size: .88rem; line-height: 1.6; color: var(--body-text); max-width: 52ch; }
.pg-story-photo figcaption b { font-weight: 600; color: var(--ink); }
.pg-mv { background: var(--soft); padding: 96px 4vw; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.pg-mv-inner { max-width: var(--maxw); margin: 0 auto; }
.pg-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pg-mv-card { border-radius: 16px; padding: 36px 34px 38px; background: var(--paper); border: 1px solid var(--hairline); }
.pg-mv-card.is-mission { background: var(--teal); border-color: var(--teal); }
.pg-mv-card h3 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); color: var(--teal); margin-bottom: 14px; }
.pg-mv-card.is-mission h3 { color: var(--yellow); }
.pg-mv-card p { font-weight: 500; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--ink); max-width: 46ch; text-wrap: pretty; }
.pg-mv-card.is-mission p { color: rgba(255,243,176,0.9); }
.pg-mv + .pg-why { background: var(--paper); border: 0; }
.pg-values { background: var(--soft); padding: 96px 4vw; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.pg-values-inner { max-width: var(--maxw); margin: 0 auto; }
.pg-values-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; max-width: 1040px; }
.pg-value { padding: 26px 0 28px; border-top: 1px solid rgba(53,92,103,0.2); }
.pg-value h3 { font-weight: 600; font-size: 1.08rem; color: var(--maroon); margin-bottom: 8px; }
.pg-value p { font-size: .96rem; line-height: 1.65; color: var(--body-text); max-width: 52ch; }
.pg-reg { background: var(--paper); padding: 96px 4vw; }
.pg-reg-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.pg-reg-list { border-top: 1px solid var(--hairline); }
.pg-reg-list div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.pg-reg-list dt { font-weight: 600; font-size: .86rem; color: var(--body-text); }
.pg-reg-list dd { font-weight: 600; font-size: .96rem; color: var(--ink); }
@media (max-width: 960px) {
  .pg-story-grid, .pg-reg-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 820px) { .pg-story, .pg-mv, .pg-values, .pg-reg { padding: 72px 6vw; } }
@media (max-width: 560px) {
  .pg-mv-grid, .pg-values-grid { grid-template-columns: 1fr; }
  .pg-mv-card { padding: 28px 24px 30px; }
  .pg-reg-list div { grid-template-columns: 1fr; gap: 4px; }
}

/* Related */
.pg-related { background: var(--soft); padding: 80px 4vw; border-top: 1px solid var(--hairline); }
.pg-related-inner { max-width: var(--maxw); margin: 0 auto; }
.pg-related-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }
.pg-related-link { display: inline-flex; align-items: center; gap: 9px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 20px; font-weight: 600; font-size: .92rem; color: var(--teal); text-decoration: none; transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .16s var(--ease-out); }
.pg-related-link svg { transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pg-related-link:hover { border-color: var(--teal); background: rgba(53,92,103,0.05); color: var(--maroon); }
  .pg-related-link:hover svg { transform: translate(2px, -2px); }
}
.pg-related-link:active { transform: scale(0.97); }
.pg-related-link svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 960px) {
  .pg-hero-inner { grid-template-columns: 1fr; }
  .pg-hero-index { margin-top: 28px; padding: 0; border: 0; background: none; min-width: 0; }
  .pg-hero-index-title { display: none; }
  .pg-hero-index ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .pg-hero-index ul::-webkit-scrollbar { display: none; }
  .pg-hero-index li + li { border-top: 0; }
  .pg-hero-index a { padding: 10px 14px; border: 1px solid rgba(255,243,176,0.28); border-radius: 999px; white-space: nowrap; font-size: .86rem; }
  .pg-hero-index a svg { display: none; }
  .pg-faq-inner { grid-template-columns: 1fr; gap: 28px; }
  .pg-faq-head { position: static; }
  .pg-handoff { flex-direction: column; align-items: flex-start; padding: 26px 24px; }
  .pg-why-inner, .pg-spares-inner, .pg-mfg-inner, .pg-spec-inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 820px) {
  .ing-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-uses-list { grid-template-columns: 1fr; }
  .pg-hero { padding: 108px 6vw 72px; }
  .pg-range, .pg-why, .pg-export, .pg-markets, .pg-faq, .pg-mfg, .pg-uses, .pg-spec { padding: 72px 6vw; }
  .pg-spares, .pg-related { padding: 60px 6vw; }
}
@media (max-width: 960px) {
  /* one column: the index chips sit under the trust line by their own margin */
  .pg-hero-inner { gap: 0; }
}
/* Phones: the detail template reads as a dense list, not a stack of
   boxes. Range cards put the icon beside the HSN and title, the spares
   list and export facts become hairline rows, and the why points give
   their text the full card width. */
@media (max-width: 560px) {
  .ing-grid { grid-template-columns: 1fr; gap: 12px; }
  /* breadcrumb: on phones show only "Home / Products"; the current page
     is the h1 right below, and long names wrapped onto a second line */
  .pg-breadcrumb:has(> li:nth-child(5)) > li:nth-last-child(-n+2) { display: none; }
  /* the product pages' "All products" back link repeats that breadcrumb */
  .pg-hero-actions .link-back:has(svg) { display: none; }
  /* "In this range" chips run to the screen edge and fade out there, so
     the row reads as scrollable */
  .pg-hero-index ul { margin-right: -6vw; padding-right: 6vw; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
  .pg-hero-actions { flex-direction: column; align-items: flex-start; gap: 6px; }

  .ing-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; padding: 20px 18px; }
  .ing-icon { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; border-radius: 10px; }
  .ing-icon svg { width: 20px; height: 20px; }
  .ing-card .hsn { align-self: end; margin-bottom: 3px; }
  .ing-card h3 { align-self: start; margin-bottom: 0; }
  .ing-card p, .ing-meta { grid-column: 1 / -1; }
  .ing-card p { margin: 12px 0 14px; }

  .pg-spares-list { grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .pg-spare-item { align-items: flex-start; background: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; padding: 11px 0; font-size: .86rem; line-height: 1.4; }
  .pg-spare-dot { margin-top: .42em; }

  .pg-why-points { gap: 12px; }
  .pg-why-inner > div > .pg-section-sub { margin-bottom: 0; }
  .pg-why-point { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 20px 18px; }
  .pg-why-point > div:not(.pg-why-dot) { display: contents; }
  .pg-why-dot { width: 34px; height: 34px; border-radius: 9px; margin: 0; }
  .pg-why-dot svg { width: 18px; height: 18px; }
  .pg-why-point h3 { margin: 0; }
  .pg-why-point p { grid-column: 1 / -1; margin-top: 10px; }

  .pg-chips { gap: 0; border-top: 1px solid var(--hairline); }
  .pg-chip { background: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; padding: 14px 0; }
}

/* ===================================================================
   PHONE POLISH (MOBILE-AUDIT.md, 7 Oct 2026). Phones only: nothing in
   this block reaches desktop. Numbers refer to the audit checklist.
   =================================================================== */

/* 3. Hero highlight: each line of "Biscuit & Confectionery Plants" gets
   its own neat gold box instead of a staircase. On phones the sweep runs
   on every line at once, which still reads as one highlight. Phones get no
   hero motion at all (copy entrance, highlight, oven build and idle loops,
   drifting specks): everything shows in its final state at first paint, and
   the phrase is plain italic, the same as the end of the desktop sweep. */
@media (max-width: 680px) {
  .hero h1 { text-wrap: balance; }
  .mark { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .1em; }
  .hero::before, .hero::after, .hero h1, .hero-sub, .hero-actions, .hero-trust,
  .mark, .hero-visual, .hero-visual * { animation: none !important; }
  /* Same for every other page heading: products, detail, contact, about,
     legal and 404 (their entrance fades delayed LCP on slow phones). */
  .pagehead h1, .ph-side > *, .pg-hero-content > *, .pg-hero-index,
  .nf h1, .nf-text p, .nf-links { animation: none !important; }
}

@media (max-width: 560px) {
  /* 1 + 2. One button system: every main button is full width with the
     same 10px radius. Pills stay for the nav "Get a quote" and tag chips. */
  .pg-hero-actions { align-self: stretch; align-items: stretch; }
  .pg-hero-actions .link-back { align-self: center; }
  .btn-quote, .btn-spares, .btn-docs, .btn-products, .cta-wa, .cf-submit { width: 100%; justify-content: center; border-radius: 10px; }
  .way-card .btn-quote, .way-card .btn-spares { align-self: stretch; }

  /* 4. Homepage products: one list of compact rows (icon, name, two-line
     summary, arrow), like the /products item lists. */
  .prod-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; background: var(--paper); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
  .prod-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; column-gap: 14px; row-gap: 4px; align-items: center; height: auto; padding: 16px 16px 16px 14px; border: 0; border-radius: 0; }
  .prod-card + .prod-card { border-top: 1px solid var(--hairline); }
  .prod-top { display: contents; }
  .prod-icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 44px; height: 44px; margin: 0; border-radius: 11px; }
  .prod-icon svg { width: 21px; height: 21px; }
  .prod-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1rem; }
  .prod-made { display: none; }
  .prod-card p { grid-column: 2; grid-row: 2; margin: 0; font-size: .86rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .prod-tags { display: none; }
  .card-go { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin: 0; opacity: 1; transform: none; font-size: 0; }
  .card-go svg { width: 16px; height: 16px; }
  .prod-card:active { transform: none; background: var(--soft); }

  /* 4. Export photos: a swipeable row instead of three stacked cards. */
  .export-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 6vw; margin: 0 -6vw; padding: 0 6vw 4px; scrollbar-width: none; }
  .export-grid::-webkit-scrollbar { display: none; }
  .export-card { scroll-snap-align: start; }

  /* 4. How it works: the number sits beside the step title. */
  .howit-steps { gap: 28px; }
  .howit-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .howit-num { width: 44px; height: 44px; font-size: 1.35rem; margin: 0; }
  .howit-step h3 { margin: 0; }
  .howit-step p { grid-column: 1 / -1; margin-top: 10px; }

  /* 7. Text: closing CTA copy at body line spacing, FAQ questions use the
     full width, trust items never split across lines. */
  .cta-text p { line-height: 1.6; }
  .hfaq-q h3, .pg-faq-q h3 { text-wrap: pretty; }
  .trust-item { white-space: nowrap; }

  /* 8. Tap targets of about 44px. */
  .foot-col ul { gap: 0; }
  .foot-col li > a { display: inline-block; padding: 11px 0; }
  .foot-legal { gap: 0 22px; }
  .foot-legal a, .foot-cookie { padding: 12px 0; }
  .pg-breadcrumb { margin-top: -4px; margin-bottom: calc(1.4rem - 4px); }
  .pg-breadcrumb a { padding: 14px 0; }
  .link-text, .link-back { position: relative; }
  .link-text::after, .link-back::after { content: ""; position: absolute; inset: -12px -4px; }

  /* 9. Even rows: related links as full-width rows, market chips in two
     columns. */
  .pg-related-grid { flex-direction: column; gap: 10px; }
  .pg-related-link { justify-content: space-between; }
  .pg-market-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .pg-market-item { padding: 12px 14px; }

  /* 6. Cookie table: each cookie becomes a small stacked card. */
  .pg-legal-table { overflow: visible; border: 0; border-radius: 0; }
  .pg-legal-table table { min-width: 0; }
  .pg-legal-table thead { display: none; }
  .pg-legal-table tr { display: block; border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 0 10px; }
  .pg-legal-table tr + tr { margin-top: 10px; }
  .pg-legal-table td { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 4px 16px; border: 0; }
  .pg-legal-table td:first-child { display: block; padding-bottom: 8px; }
  .pg-legal-table td:nth-child(2)::before { content: "Provider"; }
  .pg-legal-table td:nth-child(3)::before { content: "Purpose"; }
  .pg-legal-table td:nth-child(4)::before { content: "Duration"; }
  .pg-legal-table td:nth-child(5)::before { content: "Type"; }
  .pg-legal-table td::before { font-weight: 600; font-size: .78rem; color: var(--ink); }

  /* Minor: small labels up from .72rem for phone readability. */
  .prod-made, .pg-badge, .ing-card .hsn, .ing-meta span, .stat-label, .pg-chip strong { font-size: .76rem; }
}
/* 6. The note under the cookie table needs space at every width. */
.pg-legal-table + p { margin-top: 16px; }