/* ==== fonts.css ==== */
/* Self-hosted Google Fonts (latin + latin-ext). Generated by tools/fonts.py from fonts.googleapis.com */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/Archivo-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/Archivo-var-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/IBMPlexMono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/IBMPlexMono-400-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/IBMPlexMono-500-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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/IBMPlexMono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/IBMPlexMono-600-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;}
/* One variable face covers 400-600. The old 400/600 rules pointed at the same
122 KB file, so the browser fetched the whole designspace twice before the
body copy could settle. See tools/fonts.py. */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/SourceSerif4-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/SourceSerif4-var-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;}
/* ==== metric-matched fallbacks (tools/fallback-metrics.py) ==== */
@font-face{font-family:'Archivo Fallback';src:local('Arial');size-adjust:99.79%;ascent-override:87.99%;descent-override:21.04%;line-gap-override:0.00%;}
@font-face{font-family:'Source Serif 4 Fallback';src:local('Georgia');size-adjust:107.84%;ascent-override:96.06%;descent-override:31.06%;line-gap-override:0.00%;}
@font-face{font-family:'IBM Plex Mono Fallback';src:local('Courier New');size-adjust:99.97%;ascent-override:102.53%;descent-override:27.51%;line-gap-override:0.00%;}
/* ==== end metric-matched fallbacks ==== */
/* ==== tokens.css ==== */
/* ==========================================================================
FCV Tobacco Limited — design tokens
"The science of the leaf": the palette is derived from the company's own
colour-grade scale (L / LO / O / V / R / M), which means colour here is
classification data, not decoration.
Discipline: the amber-to-mahogany end of the scale is reserved for grade
encoding — swatches, classification chips, the leaf explorer. It is never
spent on buttons or section backgrounds. The interface accent is forest.
========================================================================== */
:root {
/* ---- Leaf colour scale (grade encoding only) ------------------------- */
--fcv-lemon: #F2D66B; /* L Lemon */
--fcv-lemon-o: #EDC65A; /* LO Lemon-Orange */
--fcv-gold: #E8B347;
--fcv-orange: #D98828; /* O Orange */
--fcv-variegated: #C6742A; /* V Variegated */
--fcv-red: #B5501D; /* R Red */
--fcv-amber: #B5651D;
/* Amber is a fill/border colour; as text on white it only reaches 4.34:1,
so small-text uses take the darker ink variant (4.9:1). */
--fcv-amber-ink: #A85C16;
--fcv-mahogany: #7A3F1D; /* M Mahogany */
--fcv-greenish: #9BA84E; /* G Greenish */
--fcv-dark: #4A3524; /* D Dark/Mixed */
/* ---- Agricultural greens (interface) --------------------------------- */
--fcv-leaf: #3F6B4A;
--fcv-forest: #1E3A2A;
--fcv-forest-dp: #0F241A;
/* ---- Neutrals: paper with a green bias, never a warm cream ----------- */
--fcv-paper: #F7F8F3;
--fcv-surface: #FFFFFF;
--fcv-surface-2: #EEF1E9;
--fcv-cream: #F2F0E4;
--fcv-charcoal: #151E18;
--fcv-ink-2: #37473D;
--fcv-muted: #5E6F64; /* 4.7:1 on --fcv-surface-2, the darkest ground it sits on */
--fcv-border: #DCE2D6;
--fcv-border-2: #BEC9B7;
/* ---- Semantic (state), kept separate from the accent hue ------------- */
--fcv-ok: #2C6448;
--fcv-ok-bg: #DDEEE2;
--fcv-warn: #7E6007;
--fcv-warn-bg: #F8EDCC;
--fcv-crit: #96262A;
--fcv-crit-bg: #F7E0DE;
/* ---- Applied roles --------------------------------------------------- */
--ground: var(--fcv-paper);
--surface: var(--fcv-surface);
--surface-2: var(--fcv-surface-2);
--ink: var(--fcv-charcoal);
--ink-2: var(--fcv-ink-2);
--muted: var(--fcv-muted);
--rule: var(--fcv-border);
--rule-strong: var(--fcv-border-2);
--accent: var(--fcv-forest);
--accent-ink: #FFFFFF;
--on-forest: #E9EFE7;
/* ---- Gradients: refined and agricultural, never artificial ----------- */
--grad-cure: linear-gradient(105deg, var(--fcv-lemon) 0%, var(--fcv-orange) 55%, var(--fcv-mahogany) 100%);
--grad-sun: linear-gradient(160deg, var(--fcv-cream) 0%, var(--fcv-lemon) 100%);
--grad-field: linear-gradient(180deg, rgba(15,36,26,0) 0%, rgba(15,36,26,.72) 62%, rgba(15,36,26,.94) 100%);
/* ---- Type ------------------------------------------------------------ */
--font-display: Archivo, "Archivo Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
--font-body: "Source Serif 4", "Source Serif 4 Fallback", Georgia, "Times New Roman", serif;
--font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;
--step--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem);
--step-0: clamp(1.02rem, 0.99rem + 0.14vw, 1.10rem);
--step-1: clamp(1.20rem, 1.14rem + 0.30vw, 1.38rem);
--step-2: clamp(1.44rem, 1.33rem + 0.55vw, 1.80rem);
--step-3: clamp(1.75rem, 1.55rem + 1.00vw, 2.45rem);
--step-4: clamp(2.10rem, 1.72rem + 1.90vw, 3.40rem);
--step-5: clamp(2.50rem, 1.85rem + 3.10vw, 4.60rem);
--measure: 68ch;
/* ---- Space ----------------------------------------------------------- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
--sp-9: 96px; --sp-10: 128px;
/* ---- Shape ----------------------------------------------------------- */
--r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
--shadow-1: 0 1px 2px rgba(21,30,24,.05), 0 6px 18px -14px rgba(21,30,24,.28);
--shadow-2: 0 2px 6px rgba(21,30,24,.06), 0 22px 48px -28px rgba(21,30,24,.34);
/* ---- Motion ---------------------------------------------------------- */
--motion-micro: 140ms;
--motion-standard: 260ms;
--motion-reveal: 520ms;
--ease: cubic-bezier(.4, 0, .2, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--header-h: 118px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ground: #0E120E;
--surface: #161B16;
--surface-2: #1D231D;
--ink: #E7EDE4;
--ink-2: #C1CCBE;
--muted: #8B9A8E;
--rule: #2A322A;
--rule-strong: #3C463C;
--accent: #A8CDB2;
--accent-ink: #0E120E;
--on-forest: #E9EFE7;
--fcv-ok: #6FBF92; --fcv-ok-bg: #16301F;
--fcv-warn: #D9B84A; --fcv-warn-bg: #332A11;
--fcv-crit: #E68A86; --fcv-crit-bg: #3A1E1E;
--shadow-1: 0 1px 2px rgba(0,0,0,.42), 0 6px 18px -14px rgba(0,0,0,.7);
--shadow-2: 0 2px 6px rgba(0,0,0,.5), 0 22px 48px -28px rgba(0,0,0,.8);
}
}
:root[data-theme="dark"] {
--ground: #0E120E;
--surface: #161B16;
--surface-2: #1D231D;
--ink: #E7EDE4;
--ink-2: #C1CCBE;
--muted: #8B9A8E;
--rule: #2A322A;
--rule-strong: #3C463C;
--accent: #A8CDB2;
--accent-ink: #0E120E;
--on-forest: #E9EFE7;
--fcv-ok: #6FBF92; --fcv-ok-bg: #16301F;
--fcv-warn: #D9B84A; --fcv-warn-bg: #332A11;
--fcv-crit: #E68A86; --fcv-crit-bg: #3A1E1E;
--shadow-1: 0 1px 2px rgba(0,0,0,.42), 0 6px 18px -14px rgba(0,0,0,.7);
--shadow-2: 0 2px 6px rgba(0,0,0,.5), 0 22px 48px -28px rgba(0,0,0,.8);
}
@media (prefers-reduced-motion: reduce) {
:root { --motion-micro: 0ms; --motion-standard: 0ms; --motion-reveal: 0ms; }
}
/* ==== styles.css ==== */
/* ==========================================================================
FCV Tobacco Limited — component styles
Cascade order is deliberate: reset → elements → layout → components →
utilities. Components never restyle layout; utilities never restyle
components. This is what keeps section spacing from silently cancelling.
========================================================================== */
/* ---- 1. Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--ground);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* ---- 2. Elements ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--ink);
line-height: 1.14;
letter-spacing: -0.018em;
text-wrap: balance;
margin: 0;
font-weight: 700;
}
h1 { font-size: var(--step-4); letter-spacing: -0.028em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: var(--step-0); font-weight: 600; letter-spacing: -0.005em; }
p { margin: 0 0 1em; max-width: var(--measure); }
ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; max-width: var(--measure); }
li { margin-bottom: 0.4em; }
li::marker { color: var(--fcv-leaf); }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-strong);
text-underline-offset: 2.5px; text-decoration-thickness: 1px;
transition: text-decoration-color var(--motion-micro) var(--ease); }
a:hover { text-decoration-color: var(--accent); }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--fcv-amber);
outline-offset: 2px;
border-radius: 3px;
}
code, kbd, samp { font-family: var(--font-mono); font-size: 0.88em; }
strong, b { font-weight: 600; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
hr { border: none; border-top: 1px solid var(--rule); margin: var(--sp-7) 0; }
/* ---- 3. Layout --------------------------------------------------------- */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--sp-4); }
@media (min-width: 640px) { .container { padding-inline: var(--sp-6); } }
.container--narrow { max-width: 900px; }
.skip-link {
position: absolute; left: var(--sp-3); top: -100px; z-index: 999;
background: var(--accent); color: var(--accent-ink);
padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
font-family: var(--font-display); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--sp-3); }
main { flex: 1; }
.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--alt { background: var(--surface-2); }
.section--ink { background: var(--fcv-forest); color: var(--on-forest); }
.section--ink :is(h1,h2,h3,h4) { color: #FFF; }
.section--ink a { color: var(--fcv-lemon); text-decoration-color: rgba(242,214,107,.4); }
@media (min-width: 900px) { .section { padding-block: var(--sp-9); } }
.stack > * + * { margin-top: var(--sp-4); }
.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* ---- 4. Typographic utilities ------------------------------------------ */
.eyebrow {
font-family: var(--font-mono); font-size: 0.69rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--fcv-amber); margin: 0 0 var(--sp-3);
}
.section--ink .eyebrow { color: var(--fcv-lemon); }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.nums { font-variant-numeric: tabular-nums; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ==========================================================================
5. COMPONENTS
========================================================================== */
/* ---- Header / navigation ----------------------------------------------- */
.topbar {
background: var(--fcv-forest-dp); color: var(--on-forest);
font-family: var(--font-display); font-size: 0.78rem;
}
.topbar__in { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
align-items: center; justify-content: space-between; padding-block: var(--sp-2); }
.topbar a { color: var(--fcv-lemon); text-decoration: none; font-weight: 500; }
.topbar a:hover { text-decoration: underline; }
.topbar__notice { color: #9FB5A6; font-size: 0.72rem; letter-spacing: .02em; }
.masthead { position: sticky; top: 0; z-index: 100; background: var(--surface);
border-bottom: 1px solid var(--rule); }
.masthead__in { display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-5); padding-block: var(--sp-3); }
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none;
flex-shrink: 0; }
.brand__mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.brand__sub { display: block; font-family: var(--font-mono); font-size: 0.6rem;
letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); font-weight: 500;
margin-top: 2px; }
.nav { display: none; }
@media (min-width: 1024px) { .nav { display: flex; align-items: center; gap: var(--sp-1); } }
.nav__item { position: relative; }
.nav__link {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-display); font-size: 0.88rem; font-weight: 500;
color: var(--ink-2); text-decoration: none; padding: var(--sp-3) var(--sp-3);
border-radius: var(--r-sm); background: none; border: 0; cursor: pointer;
transition: color var(--motion-micro) var(--ease), background var(--motion-micro) var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--surface-2); }
.nav__link[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav__link[aria-current="page"]::after {
content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 4px;
height: 2px; background: var(--fcv-amber); border-radius: 2px;
}
.nav__chev { transition: transform var(--motion-micro) var(--ease); }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.mega {
position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
min-width: 460px; background: var(--surface); border: 1px solid var(--rule);
border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--sp-5);
display: grid; gap: var(--sp-4) var(--sp-5); grid-template-columns: repeat(2, 1fr);
}
.mega[hidden] { display: none; }
.mega__head { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.64rem;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
padding-bottom: var(--sp-2); border-bottom: 1px solid var(--rule); }
.mega__link { display: block; text-decoration: none; padding: var(--sp-2) var(--sp-3);
border-radius: var(--r-sm); transition: background var(--motion-micro) var(--ease); }
.mega__link:hover { background: var(--surface-2); }
.mega__t { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
color: var(--ink); display: block; }
.mega__d { font-size: 0.8rem; color: var(--muted); line-height: 1.4; display: block;
margin-top: 2px; max-width: none; }
.navtoggle {
display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px;
padding: var(--sp-2) var(--sp-4); background: var(--surface-2); color: var(--ink);
border: 1px solid var(--rule); border-radius: var(--r-sm); cursor: pointer;
font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
}
@media (min-width: 1024px) { .navtoggle { display: none; } }
.drawer {
position: fixed; inset: 0; z-index: 200; background: var(--ground);
overflow-y: auto; padding: var(--sp-4) 0 var(--sp-8);
}
.drawer[hidden] { display: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between;
padding-bottom: var(--sp-4); border-bottom: 1px solid var(--rule); }
.drawer__group { border-bottom: 1px solid var(--rule); padding-block: var(--sp-4); }
.drawer__gt { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-3); }
.drawer__link { display: block; min-height: 44px; display: flex; align-items: center;
font-family: var(--font-display); font-weight: 500; font-size: 1rem;
text-decoration: none; color: var(--ink); padding: var(--sp-2) 0; }
.drawer__link[aria-current="page"] { color: var(--accent); font-weight: 600; }
/* ---- CTA buttons -------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
min-height: 46px; padding: var(--sp-3) var(--sp-5);
font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
text-decoration: none; border-radius: var(--r-sm); border: 1px solid transparent;
cursor: pointer; transition: background var(--motion-micro) var(--ease),
border-color var(--motion-micro) var(--ease), color var(--motion-micro) var(--ease);
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--fcv-leaf); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--accent); }
.btn--light { background: var(--fcv-lemon); color: var(--fcv-forest-dp); }
.btn--light:hover { background: var(--fcv-gold); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* ---- Breadcrumb --------------------------------------------------------- */
.crumbs { padding-block: var(--sp-4); border-bottom: 1px solid var(--rule);
background: var(--surface); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center;
gap: var(--sp-2); margin: 0; padding: 0; max-width: none;
font-family: var(--font-display); font-size: 0.8rem; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before { content: "/"; color: var(--rule-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }
/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; background: var(--fcv-forest-dp); color: var(--on-forest);
overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--grad-field); }
.hero__in { position: relative; padding-block: var(--sp-8) var(--sp-8); }
@media (min-width: 900px) { .hero__in { padding-block: var(--sp-9) var(--sp-8);
display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr);
gap: var(--sp-8); align-items: end; } }
.hero h1 { color: #FFF; font-size: var(--step-4); max-width: 18ch; }
.hero .eyebrow { color: var(--fcv-lemon); }
.hero__lede { font-size: var(--step-1); color: #D5E0D6; max-width: 46ch; margin-top: var(--sp-4); }
.hero__rule { width: 68px; height: 4px; background: var(--grad-cure); border-radius: 2px;
margin: var(--sp-5) 0; }
/* Specification metadata card floating beside the hero */
.specmeta { background: rgba(255,255,255,.07); border: 1px solid rgba(233,239,231,.2);
border-radius: var(--r-lg); padding: var(--sp-5); backdrop-filter: blur(8px);
margin-top: var(--sp-6); }
@media (min-width: 900px) { .specmeta { margin-top: 0; } }
.specmeta__h { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--fcv-lemon); margin: 0 0 var(--sp-4);
padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(233,239,231,.2); }
.specmeta__row { display: flex; justify-content: space-between; align-items: baseline;
gap: var(--sp-4); padding-block: var(--sp-2); font-size: 0.85rem; }
.specmeta__row + .specmeta__row { border-top: 1px solid rgba(233,239,231,.1); }
.specmeta__k { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .09em;
text-transform: uppercase; color: #9FB5A6; }
.specmeta__v { font-family: var(--font-display); font-weight: 600; color: #FFF;
text-align: right; }
/* ---- Fact strip --------------------------------------------------------- */
.facts { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 620px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--surface); padding: var(--sp-5); }
.fact__k { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-2); }
.fact__v { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem;
line-height: 1.25; color: var(--ink); letter-spacing: -0.015em; }
.fact__n { font-size: 0.82rem; color: var(--muted); margin: var(--sp-2) 0 0; max-width: none; }
/* ---- Provenance badge — the compliance-critical component --------------- */
.prov {
display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 2px 6px; border-radius: 3px; border: 1px solid; white-space: nowrap;
}
.prov--indicative { background: var(--fcv-warn-bg); color: var(--fcv-warn); border-color: var(--fcv-warn); }
.prov--lot { background: var(--surface-2); color: var(--ink-2); border-color: var(--rule-strong); }
.prov--lab { background: var(--fcv-ok-bg); color: var(--fcv-ok); border-color: var(--fcv-ok); }
.prov--buyer { background: transparent; color: var(--fcv-amber); border-color: var(--fcv-amber); }
/* ---- Specification matrix ----------------------------------------------- */
.matrix { margin-block: var(--sp-5); }
.matrix__scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-md);
background: var(--surface); box-shadow: var(--shadow-1); }
.matrix table { border-collapse: collapse; width: 100%; font-family: var(--font-display);
font-size: 0.86rem; }
.matrix caption { caption-side: bottom; text-align: left; padding: var(--sp-3) var(--sp-4);
font-size: 0.78rem; color: var(--muted); font-family: var(--font-display); }
.matrix th { text-align: left; font-family: var(--font-mono); font-size: 0.63rem;
font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule-strong);
background: var(--surface); white-space: nowrap; }
.matrix td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule);
color: var(--ink-2); vertical-align: top; line-height: 1.45; }
.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix tbody tr:hover td { background: var(--surface-2); }
.matrix th[scope="row"], .matrix td:first-child {
font-weight: 600; color: var(--ink); position: sticky; left: 0;
background: var(--surface); border-right: 1px solid var(--rule);
}
.matrix tbody tr:hover th[scope="row"], .matrix tbody tr:hover td:first-child {
background: var(--surface-2);
}
.matrix .nums { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* ---- Leaf explorer ------------------------------------------------------ */
.leafx { display: grid; gap: var(--sp-6); }
@media (min-width: 940px) { .leafx { grid-template-columns: minmax(0,420px) minmax(0,1fr);
gap: var(--sp-8); align-items: start; } }
.stalk { display: flex; flex-direction: column-reverse; gap: var(--sp-2); }
.stalk__btn {
display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: var(--sp-3);
width: 100%; min-height: 56px; text-align: left; cursor: pointer;
background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid;
border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
font-family: var(--font-display); color: var(--ink);
transition: transform var(--motion-micro) var(--ease),
box-shadow var(--motion-micro) var(--ease),
border-color var(--motion-micro) var(--ease);
}
.stalk__btn:hover { transform: translateX(4px); box-shadow: var(--shadow-1); }
.stalk__btn[aria-selected="true"] { background: var(--surface-2); box-shadow: var(--shadow-1);
transform: translateX(6px); }
.stalk__btn[aria-selected="true"] .stalk__code { transform: scale(1.08); }
.stalk__code { display: grid; place-items: center; width: 34px; height: 34px;
border-radius: 50%; font-family: var(--font-mono); font-weight: 600; font-size: 0.9rem;
color: var(--fcv-forest-dp); transition: transform var(--motion-micro) var(--ease); }
.stalk__name { font-weight: 600; font-size: 0.95rem; }
.stalk__pos { font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: .09em;
text-transform: uppercase; color: var(--muted); display: block; margin-top: 1px; }
.stalk__nic { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
font-variant-numeric: tabular-nums; white-space: nowrap; }
.leafx__panels > * + * { margin-top: var(--sp-5); }
.leafx__panel { border: 1px solid var(--rule); border-radius: var(--r-lg);
background: var(--surface); padding: var(--sp-5) var(--sp-6); box-shadow: var(--shadow-1); }
.leafx__panel h3 { margin-bottom: var(--sp-2); }
.leafx__panel p { color: var(--ink-2); }
.leafx__tag { font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: .12em;
text-transform: uppercase; color: var(--fcv-amber); margin-bottom: var(--sp-2); }
.leafx__props { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
border-radius: var(--r-sm); overflow: hidden; margin-top: var(--sp-4); }
@media (min-width: 560px) { .leafx__props { grid-template-columns: repeat(2, 1fr); } }
.leafx__prop { background: var(--surface); padding: var(--sp-3) var(--sp-4); }
.leafx__pk { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); }
.leafx__pv { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; }
/* When JS is on, non-active panels collapse; without JS every panel stays readable. */
.js .leafx__panel[data-inactive] { display: none; }
/* ---- Colour grade scale ------------------------------------------------- */
.colours { display: grid; gap: var(--sp-3);
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.colour { border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
background: var(--surface); text-align: left; }
.colour__chip { height: 62px; position: relative; }
.colour__code { position: absolute; left: var(--sp-3); bottom: var(--sp-2);
font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem;
color: rgba(15,36,26,.85); }
.colour__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.colour__name { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
color: var(--ink); }
.colour__desc { font-size: 0.82rem; color: var(--ink-2); line-height: 1.45;
margin: var(--sp-2) 0 0; max-width: none; }
/* ---- Process timeline --------------------------------------------------- */
.timeline { position: relative; display: grid; gap: var(--sp-4); }
@media (min-width: 780px) { .timeline { grid-template-columns: repeat(2, 1fr);
gap: var(--sp-5); } }
@media (min-width: 1100px) { .timeline { grid-template-columns: repeat(3, 1fr); } }
.stage { position: relative; background: var(--surface); border: 1px solid var(--rule);
border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--shadow-1); }
.stage__n { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
letter-spacing: .1em; color: var(--fcv-amber); }
.stage__t { font-family: var(--font-display); font-weight: 600; font-size: 1rem;
margin: var(--sp-2) 0 var(--sp-2); color: var(--ink); }
.stage__d { font-size: 0.85rem; color: var(--ink-2); margin: 0; max-width: none; line-height: 1.5; }
.stage::before { content: ""; position: absolute; left: 0; top: var(--sp-5); bottom: var(--sp-5);
width: 3px; background: var(--grad-cure); border-radius: 0 2px 2px 0; opacity: .85; }
/* ---- Cards / related links --------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
padding: var(--sp-5); box-shadow: var(--shadow-1); }
.card h3 { margin-bottom: var(--sp-2); }
.card p { font-size: 0.9rem; color: var(--ink-2); max-width: none; }
.linkcard { display: block; text-decoration: none; background: var(--surface);
border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--sp-5);
transition: border-color var(--motion-micro) var(--ease),
transform var(--motion-micro) var(--ease),
box-shadow var(--motion-micro) var(--ease); }
.linkcard:hover { border-color: var(--accent); transform: translateY(-2px);
box-shadow: var(--shadow-2); }
.linkcard__k { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .12em;
text-transform: uppercase; color: var(--fcv-amber); }
.linkcard__t { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
color: var(--ink); margin: var(--sp-2) 0 var(--sp-2); letter-spacing: -0.01em; }
.linkcard__d { font-size: 0.86rem; color: var(--ink-2); margin: 0; line-height: 1.5;
max-width: none; }
/* ---- Section navigation (sticky, long pages) ---------------------------- */
.withnav { display: block; }
@media (min-width: 1080px) {
.withnav { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--sp-8);
align-items: start; }
}
.secnav { display: none; }
@media (min-width: 1080px) {
.secnav { display: block; position: sticky; top: calc(var(--sp-8) + 44px);
max-height: 76vh; overflow-y: auto; }
.secnav__h { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-3);
padding-bottom: var(--sp-2); border-bottom: 1px solid var(--rule); }
.secnav ol { list-style: none; margin: 0; padding: 0; display: flex;
flex-direction: column; gap: 1px; }
.secnav li { margin: 0; }
.secnav a { display: block; padding: var(--sp-2) var(--sp-3); font-family: var(--font-display);
font-size: 0.82rem; line-height: 1.35; color: var(--muted); text-decoration: none;
border-left: 2px solid transparent; border-radius: 0 var(--r-sm) var(--r-sm) 0;
transition: color var(--motion-micro) var(--ease),
background var(--motion-micro) var(--ease); }
.secnav a:hover { color: var(--ink); background: var(--surface-2); }
.secnav a[aria-current="true"] { color: var(--accent); font-weight: 600;
border-left-color: var(--fcv-amber); background: var(--surface-2); }
}
/* ---- Prose (long-form body copy) --------------------------------------- */
.prose { max-width: var(--measure); }
.prose > h2 { margin-top: var(--sp-8); margin-bottom: var(--sp-4);
padding-top: var(--sp-5); border-top: 1px solid var(--rule); }
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose > h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose > .matrix, .prose > .callout, .prose > .figure { max-width: none; }
.prose blockquote { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5);
border-left: 3px solid var(--fcv-amber); background: var(--surface);
border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-2); font-style: italic; }
.figure { margin: var(--sp-6) 0; }
.figure img { border-radius: var(--r-md); border: 1px solid var(--rule); width: 100%; }
.figure figcaption { font-family: var(--font-display); font-size: 0.8rem; color: var(--muted);
margin-top: var(--sp-3); }
/* ---- Compliance notice — cannot be de-emphasised ----------------------- */
.compliance {
border: 1px solid var(--rule-strong); border-left: 4px solid var(--fcv-amber);
background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0;
padding: var(--sp-5) var(--sp-6); margin-block: var(--sp-6);
}
.compliance__h { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
letter-spacing: 0.13em; text-transform: uppercase; color: var(--fcv-amber-ink);
margin: 0 0 var(--sp-3); }
.compliance p { font-size: 0.88rem; color: var(--ink-2); margin-bottom: var(--sp-2);
max-width: 76ch; }
.compliance p:last-child { margin-bottom: 0; }
.compliance strong { color: var(--ink); }
.callout { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface-2);
padding: var(--sp-4) var(--sp-5); margin-block: var(--sp-5); }
.callout p { margin-bottom: 0; font-size: 0.9rem; color: var(--ink-2); }
/* ---- FAQ accordion ------------------------------------------------------ */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--sp-4); background: none; border: 0; cursor: pointer; text-align: left;
padding: var(--sp-4) var(--sp-2); min-height: 48px; color: var(--ink);
font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; line-height: 1.4; }
.faq__q:hover { color: var(--accent); }
.faq__qh { margin: 0; font-size: inherit; font-weight: inherit; font-family: inherit; }
.faq__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;
transition: transform var(--motion-standard) var(--ease); color: var(--fcv-amber); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__a { padding: 0 var(--sp-2) var(--sp-5); }
.faq__a p { color: var(--ink-2); font-size: 0.94rem; margin-bottom: 0; }
.js .faq__a[hidden] { display: none; }
.faq__filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.faq__chip { font-family: var(--font-display); font-size: 0.8rem; font-weight: 500;
padding: var(--sp-2) var(--sp-4); min-height: 40px; border-radius: 999px;
border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink-2);
cursor: pointer; }
.faq__chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink);
border-color: var(--accent); }
/* ---- Forms -------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-4); max-width: 720px; }
@media (min-width: 680px) { .form__row { display: grid; grid-template-columns: 1fr 1fr;
gap: var(--sp-4); } }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label { font-family: var(--font-display); font-weight: 600; font-size: 0.86rem;
color: var(--ink); }
.field__opt { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea {
font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
background: var(--surface); border: 1px solid var(--rule-strong);
border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); min-height: 46px;
width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; font-family: var(--font-body); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field__hint { font-size: 0.78rem; color: var(--muted); }
.field__err { font-size: 0.8rem; color: var(--fcv-crit); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: var(--sp-3); align-items: flex-start; }
.consent input { width: 20px; height: 20px; min-height: 20px; margin-top: 3px; flex-shrink: 0; }
.consent label { font-weight: 400; font-family: var(--font-body); font-size: 0.88rem;
color: var(--ink-2); line-height: 1.5; }
/* ---- Origin map --------------------------------------------------------- */
.originmap { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) { .originmap { grid-template-columns: minmax(0,1fr) minmax(0,1fr);
align-items: center; } }
.originmap svg { width: 100%; height: auto; }
.district { border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface);
padding: var(--sp-3) var(--sp-4); }
.district__n { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; }
.district__z { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); margin-top: 2px; }
/* ---- Footer ------------------------------------------------------------- */
.foot { background: var(--fcv-forest-dp); color: #B9C9BC; margin-top: var(--sp-9);
font-size: 0.88rem; }
.foot__top { display: grid; gap: var(--sp-6); padding-block: var(--sp-8); }
@media (min-width: 700px) { .foot__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .foot__top { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.foot h2, .foot h3 { color: #FFF; }
.foot__gt { font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--fcv-lemon); margin: 0 0 var(--sp-4); font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
gap: var(--sp-2); }
.foot li { margin: 0; }
.foot a { color: #B9C9BC; text-decoration: none; font-family: var(--font-display);
font-size: 0.86rem; }
.foot a:hover { color: #FFF; text-decoration: underline; }
.foot__brand p { color: #94A897; font-size: 0.86rem; max-width: 34ch; }
/* The two contact links were inline text separated by
, so each hit area
was only 15px tall. Stacking them as blocks with padding gives every link a
28px tap target with clear space around it (WCAG 2.2 target size). */
.foot__contact { display: flex; flex-direction: column; align-items: flex-start; }
.foot__contact a { display: block; padding-block: 7px; }
.foot__legal { border-top: 1px solid rgba(233,239,231,.14); padding-block: var(--sp-5);
display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between;
align-items: center; font-size: 0.78rem; color: #8A9C8D; }
.foot__legal p { margin: 0; max-width: none; }
/* ---- 404 ---------------------------------------------------------------- */
.e404 { text-align: center; padding-block: var(--sp-9); }
.e404__code { font-family: var(--font-mono); font-size: clamp(4rem, 16vw, 9rem);
font-weight: 600; line-height: 1; background: var(--grad-cure);
-webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---- Reduced motion final guard ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}
.stalk__btn:hover, .linkcard:hover { transform: none; }
}
/* ---- Print -------------------------------------------------------------- */
@media print {
.masthead, .topbar, .secnav, .foot, .navtoggle, .btn { display: none !important; }
body { background: #fff; color: #000; font-size: 11pt; }
.matrix__scroll { overflow: visible; border: 1px solid #999; }
.js .leafx__panel[data-inactive] { display: block !important; }
.js .faq__a[hidden] { display: block !important; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}
/* ==== specbuilder.css ==== */
/* ==========================================================================
SpecBuilder
Two panels: an editorial pitch on forest ground, and the working
configurator on paper. The result block is the only place the leaf gradient
appears at full strength, because that is where the answer lives.
========================================================================== */
.sb {
display: grid;
gap: 0;
border: 1px solid var(--rule);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-2);
background: var(--surface);
}
@media (min-width: 1000px) {
.sb { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
}
/* ---- Pitch panel -------------------------------------------------------- */
.sb__pitch {
background: var(--fcv-forest);
color: var(--on-forest);
padding: var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
@media (min-width: 700px) { .sb__pitch { padding: var(--sp-7); } }
.sb__pitch h2 {
color: #fff;
font-size: var(--step-3);
letter-spacing: -0.022em;
margin: 0;
}
.sb__pitch h2 em {
font-style: normal;
background: var(--grad-cure);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.sb__pitch > p { color: #C7D5C9; font-size: 0.94rem; margin: 0; max-width: 46ch; }
.sb__pitch .eyebrow { color: var(--fcv-lemon); margin: 0; }
.sb__note {
background: rgba(181, 101, 29, 0.24);
border: 1px solid rgba(232, 179, 71, 0.34);
border-radius: var(--r-md);
padding: var(--sp-4);
font-size: 0.88rem;
color: #E4EAE2;
}
.sb__note strong { color: #fff; display: block; margin-bottom: 3px; }
.sb__terms {
display: grid;
gap: var(--sp-4);
margin: var(--sp-2) 0 0;
padding-top: var(--sp-5);
border-top: 1px solid rgba(233, 239, 231, 0.16);
}
@media (min-width: 520px) { .sb__terms { grid-template-columns: repeat(3, 1fr); } }
.sb__terms > div { border-left: 2px solid var(--fcv-amber); padding-left: var(--sp-3); }
.sb__terms dt {
font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.13em;
text-transform: uppercase; color: #9FB5A6; margin-bottom: 3px;
}
.sb__terms dd {
margin: 0; font-family: var(--font-display); font-weight: 600;
font-size: 0.86rem; color: #fff; line-height: 1.35;
}
/* ---- Configurator panel ------------------------------------------------- */
.sb__panel {
padding: var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-5);
background: var(--surface);
}
@media (min-width: 700px) { .sb__panel { padding: var(--sp-7); } }
.sb__head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-4); padding-bottom: var(--sp-4);
border-bottom: 1px solid var(--rule);
}
.sb__head h3 { margin: 0; font-size: var(--step-2); }
.sb__group { border: 0; padding: 0; margin: 0; display: flex;
flex-direction: column; gap: var(--sp-2); min-width: 0; }
.sb__group > label, .sb__group > legend {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--sp-3); width: 100%; padding: 0; float: none;
font-family: var(--font-display); font-weight: 600; font-size: 0.86rem;
color: var(--ink);
}
.sb__group output {
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
/* --fcv-amber is a fill colour; as small bold text on white it is 4.33:1.
The ink variant clears AA. */
font-weight: 600; font-size: 0.86rem; color: var(--fcv-amber-ink);
}
.sb__hint { font-size: 0.76rem; color: var(--muted); margin: 0; max-width: none;
line-height: 1.45; }
.sb__row { display: grid; gap: var(--sp-5); }
@media (min-width: 560px) { .sb__row { grid-template-columns: 1fr 1fr; } }
.sb__forms { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sb__form {
min-height: 44px; padding: var(--sp-2) var(--sp-4);
font-family: var(--font-display); font-weight: 500; font-size: 0.84rem;
color: var(--ink-2); background: var(--surface);
border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
cursor: pointer;
transition: background var(--motion-micro) var(--ease),
border-color var(--motion-micro) var(--ease),
color var(--motion-micro) var(--ease);
}
.sb__form:hover { border-color: var(--accent); color: var(--ink); }
.sb__form[aria-selected="true"] {
background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
font-weight: 600;
}
.sb__swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); }
.sb__sw {
height: 52px; border-radius: var(--r-sm); cursor: pointer;
border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(21, 30, 24, 0.14);
position: relative; padding: 0;
transition: transform var(--motion-micro) var(--ease),
border-color var(--motion-micro) var(--ease);
}
.sb__sw span {
position: absolute; left: 6px; bottom: 4px;
font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
color: rgba(15, 36, 26, 0.82);
}
.sb__sw:hover { transform: translateY(-2px); }
.sb__sw[aria-pressed="true"] {
border-color: var(--ink); transform: translateY(-3px);
box-shadow: 0 4px 12px -4px rgba(21, 30, 24, 0.4);
}
/* Range inputs: styled in both directions so the track reads on either theme. */
.sb__panel input[type="range"] {
-webkit-appearance: none; appearance: none; width: 100%;
height: 22px; background: transparent; cursor: pointer; margin: 0;
}
.sb__panel input[type="range"]::-webkit-slider-runnable-track {
height: 5px; border-radius: 3px; background: var(--surface-2);
border: 1px solid var(--rule);
}
.sb__panel input[type="range"]::-moz-range-track {
height: 5px; border-radius: 3px; background: var(--surface-2);
border: 1px solid var(--rule);
}
.sb__panel input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
background: var(--accent); border: 2px solid var(--surface);
box-shadow: 0 1px 4px rgba(21, 30, 24, 0.35);
}
.sb__panel input[type="range"]::-moz-range-thumb {
width: 18px; height: 18px; border-radius: 50%;
background: var(--accent); border: 2px solid var(--surface);
box-shadow: 0 1px 4px rgba(21, 30, 24, 0.35);
}
.sb__panel select {
font-family: var(--font-body); font-size: 0.92rem; color: var(--ink);
background: var(--surface); border: 1px solid var(--rule-strong);
border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
min-height: 46px; width: 100%;
}
/* ---- Result ------------------------------------------------------------- */
.sb__result {
background: var(--fcv-forest-dp); color: var(--on-forest);
border-radius: var(--r-lg); padding: var(--sp-5); position: relative;
overflow: hidden;
}
.sb__result::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: var(--grad-cure);
}
.sb__rhead {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-3); margin-bottom: var(--sp-2);
}
.sb__rlabel {
font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em;
text-transform: uppercase; color: #9FB5A6;
}
.sb__fit {
font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
letter-spacing: 0.09em; text-transform: uppercase;
padding: 3px 8px; border-radius: 3px; border: 1px solid;
}
.sb__fit.is-strong { background: rgba(111,191,146,.16); color: #8FD6AC; border-color: #4E9A72; }
.sb__fit.is-partial { background: rgba(232,179,71,.16); color: #EDC65A; border-color: #B58A2E; }
.sb__fit.is-weak { background: rgba(230,138,134,.16); color: #E9A19D; border-color: #A75B58; }
.sb__result h4 {
color: #fff; font-size: var(--step-2); margin: 0 0 var(--sp-2);
letter-spacing: -0.018em;
}
.sb__result > p { color: #C7D5C9; font-size: 0.88rem; margin: 0; max-width: 52ch; }
.sb__why { list-style: none; margin: var(--sp-4) 0 0; padding: 0;
display: flex; flex-direction: column; gap: var(--sp-2); max-width: none; }
.sb__why li {
font-size: 0.82rem; line-height: 1.5; color: #B9C9BC; margin: 0; /* on --fcv-forest-dp: 9.4:1 */
padding-left: var(--sp-4); position: relative;
}
.sb__why li::before {
content: ""; position: absolute; left: 0; top: 8px;
width: 6px; height: 6px; border-radius: 50%; background: #4E7A5E;
}
/* A conflict is stated, not hidden. Colour is not the only signal — the
text itself names the contradiction. */
.sb__why li.is-conflict { color: #F0C9A6; }
.sb__why li.is-conflict::before { background: var(--fcv-gold); }
.sb__alts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
margin-top: var(--sp-4); }
.sb__altlabel {
font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em;
text-transform: uppercase; color: #8A9C8D; margin-right: var(--sp-1);
}
.sb__alt {
font-family: var(--font-display); font-size: 0.76rem; color: #D5E0D6;
background: rgba(233, 239, 231, 0.08); border: 1px solid rgba(233, 239, 231, 0.16);
border-radius: 999px; padding: 3px 10px;
}
.sb__alt .mono { color: var(--fcv-lemon); font-weight: 600; }
.sb__fine { font-size: 0.74rem; color: var(--muted); margin: 0; line-height: 1.5;
max-width: none; }
/* ---- Grade band reference (open by default without JS) ------------------ */
.sb__bands { grid-column: 1 / -1; border-top: 1px solid var(--rule);
background: var(--surface-2); padding: 0 var(--sp-6) var(--sp-5); }
.sb__bands summary {
cursor: pointer; padding: var(--sp-5) 0 var(--sp-3);
font-family: var(--font-display); font-weight: 600; font-size: 0.88rem;
color: var(--ink);
}
.sb__bands summary::marker { color: var(--fcv-amber); }
.sb__bands .matrix { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
.sb__sw:hover, .sb__sw[aria-pressed="true"] { transform: none; }
}
/* ---- Live stalk ladder --------------------------------------------------
Fills the pitch panel and does real work: it shows where the buyer's
current targets land on the plant, so the configurator reads as botany
rather than as a form. Decorative to assistive tech (the same information
is in the result block as text), hence aria-hidden on the container. */
.sb__stalk {
margin-top: auto; /* pushes the ladder to the foot of the panel */
padding-top: var(--sp-5);
border-top: 1px solid rgba(233, 239, 231, 0.16);
}
.sb__stalklab {
font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.13em;
text-transform: uppercase; color: #9FB5A6; margin: 0 0 var(--sp-3);
}
.sb__ladder {
list-style: none; margin: 0; padding: 0 0 0 var(--sp-4);
display: flex; flex-direction: column; gap: 2px; position: relative;
max-width: none;
}
/* The stalk itself. */
.sb__ladder::before {
content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px;
width: 2px; border-radius: 1px;
background: linear-gradient(180deg, var(--fcv-mahogany), var(--fcv-orange), var(--fcv-lemon));
opacity: 0.55;
}
.sb__rung {
display: grid; grid-template-columns: 14px 16px 1fr auto;
align-items: center; gap: var(--sp-3);
padding: 5px var(--sp-3) 5px 0; margin: 0; border-radius: var(--r-sm);
position: relative;
transition: background var(--motion-standard) var(--ease),
transform var(--motion-standard) var(--ease);
}
.sb__dot {
width: 10px; height: 10px; border-radius: 50%; margin-left: -1px;
box-shadow: 0 0 0 2px var(--fcv-forest);
transition: transform var(--motion-standard) var(--ease),
box-shadow var(--motion-standard) var(--ease);
}
.sb__rcode {
font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
color: #8A9C8D;
}
.sb__rname {
font-family: var(--font-display); font-size: 0.8rem; color: #B9C9BC; /* on --fcv-forest: 7.2:1 */
}
.sb__rnic {
font-family: var(--font-mono); font-size: 0.68rem; color: #7E8F82;
font-variant-numeric: tabular-nums;
}
/* Active rung: the match. Colour is not the only cue — weight and the
leading marker change too. */
.sb__rung.is-active {
background: rgba(233, 239, 231, 0.09);
transform: translateX(3px);
}
.sb__rung.is-active .sb__dot {
transform: scale(1.5);
box-shadow: 0 0 0 2px var(--fcv-forest), 0 0 0 4px rgba(242, 214, 107, 0.45);
}
.sb__rung.is-active .sb__rcode { color: var(--fcv-lemon); }
.sb__rung.is-active .sb__rname { color: #fff; font-weight: 600; }
.sb__rung.is-active .sb__rnic { color: #D5E0D6; }
/* Runner-up rungs get a quieter treatment so the trade space is visible. */
.sb__rung.is-near .sb__rname { color: #CFDCD1; }
.sb__rung.is-near .sb__dot { transform: scale(1.2); }
.sb__stalkfoot {
font-size: 0.72rem; color: #7E8F82; margin: var(--sp-3) 0 0;
max-width: none; line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
.sb__rung, .sb__dot { transition: none; }
.sb__rung.is-active { transform: none; }
}
/* ==== _smoke.css ==== */
.smoke-ok{color:var(--fcv-ok)}
/* ==== interactive.css ==== */
/* ==== Interactive modules + site chrome upgrades ========================= */
:root { --accent-2: #8A4A12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-2: #E0A050; } }
:root[data-theme="dark"] { --accent-2: #E0A050; }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.eyebrow { color: var(--accent-2); font-size: 0.72rem; }
.ix__src { font-family: var(--font-display); font-size: .8rem; color: var(--muted); margin: var(--sp-3) 0 0; }
.ix__src a { color: var(--ink-2); }
/* ---- Colour ribbon ------------------------------------------------------ */
.ribbon { display: grid; grid-template-columns: repeat(8, 1fr); border-radius: var(--r-md); overflow: hidden;
box-shadow: var(--shadow-1); margin: 0; }
.ribbon__seg { background: var(--sw); color: var(--ink); padding: var(--sp-3) var(--sp-2); min-height: 62px;
display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; font-family: var(--font-display); }
.ribbon__seg b { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; }
/* Full opacity for the same reason as .gc__pos: --ink is already chosen for
contrast against the segment's swatch, and fading it broke AA on the
variegated and red bands. */
.ribbon__seg i { font-style: normal; font-size: .66rem; }
.ribbon__seg[style*="--ink:#FFFFFF"] { color: #fff; }
@media (max-width: 720px) { .ribbon { grid-template-columns: repeat(4, 1fr); } .ribbon__seg i { display: none; } }
/* ---- Who we are --------------------------------------------------------- */
.who__h { font-size: var(--step-1); margin-bottom: var(--sp-4); }
.who__grid { display: grid; gap: var(--sp-4); margin: 0; }
@media (min-width: 720px) { .who__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .who__grid { grid-template-columns: repeat(4, 1fr); } }
.who__cell { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--sp-5);
border-top: 3px solid var(--fcv-leaf); }
.who__cell dt { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--accent-2); margin-bottom: var(--sp-2); }
.who__cell dd { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
/* ---- Editorial layout (fixes the lonely reading column) ------------------ */
.editorial { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 1080px) { .editorial { grid-template-columns: 200px minmax(0, 1fr); } }
@media (min-width: 1280px) { .editorial { grid-template-columns: 200px minmax(0, 1fr) 300px; } }
.editorial .secnav { display: none; }
@media (min-width: 1080px) { .editorial .secnav { display: block; } }
.editorial .prose { max-width: 70ch; }
.aside { display: none; }
@media (min-width: 1280px) { .aside { display: block; position: sticky; top: calc(var(--header-h) + var(--sp-5)); } }
.aside__card { background: var(--fcv-forest); color: var(--on-forest); border-radius: var(--r-lg); padding: var(--sp-6);
box-shadow: var(--shadow-2); }
.aside__card h3 { color: #fff; font-size: var(--step-1); margin-bottom: var(--sp-3); }
.aside__card p { font-size: .92rem; color: #C9D6CC; }
.aside__card .btn { width: 100%; justify-content: center; }
.aside__facts { margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); }
.aside__facts div { display: flex; justify-content: space-between; gap: var(--sp-3); border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--sp-3); }
.aside__facts dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #9FB5A6; }
.aside__facts dd { margin: 0; font-family: var(--font-display); font-size: .84rem; text-align: right; color: #fff; }
.aside__links { margin-top: var(--sp-5); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); background: var(--surface); }
.aside__links p { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3); }
.aside__links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.aside__links a { font-family: var(--font-display); font-size: .9rem; text-decoration: none; color: var(--ink); }
.aside__links a:hover { color: var(--accent); text-decoration: underline; }
/* ---- Grade cards -------------------------------------------------------- */
.gc { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) { .gc { grid-template-columns: 170px minmax(0, 1fr); } }
.gc__plantwrap { margin: 0; position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
@media (max-width: 899px) { .gc__plantwrap { position: static; max-width: 200px; margin-inline: auto; } }
.gc__plant { width: 100%; height: auto; }
.gc__tier { cursor: pointer; transition: opacity var(--motion-micro) var(--ease); }
.gc__tier:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gc__tier ellipse { transition: transform var(--motion-standard) var(--ease-out); }
.gc__tier.is-active ellipse { filter: drop-shadow(0 0 4px rgba(0,0,0,.35)); }
.gc[data-active] .gc__tier:not(.is-active) { opacity: .45; }
.gc__tierlabel { font-family: var(--font-mono); font-size: 9px; fill: var(--muted); }
.gc__plantwrap figcaption { font-family: var(--font-display); font-size: .78rem; color: var(--muted); margin-top: var(--sp-3); text-align: center; }
.gc__cards { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .gc__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .gc__cards { grid-template-columns: repeat(3, 1fr); } }
.gc__card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
box-shadow: var(--shadow-1); display: flex; flex-direction: column; transition: transform var(--motion-standard) var(--ease-out), box-shadow var(--motion-standard) var(--ease); }
.gc__card:hover, .gc__card.is-active { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.gc__band { background: var(--sw); color: var(--ink); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); }
.gc__card[style*="--ink:#FFFFFF"] .gc__band { color: #fff; }
.gc__code { font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; }
/* No opacity here. Each card picks --ink for contrast against its own grade
swatch, and fading the text to 85% dropped the two tightest pairs
(variegated and red) from 4.8:1 and 5.1:1 to 4.0:1 and 4.1:1. */
.gc__pos { font-family: var(--font-display); font-size: .78rem; }
.gc__name { font-size: var(--step-1); margin: var(--sp-4) var(--sp-5) var(--sp-2); }
.gc__desc { font-size: .92rem; color: var(--ink-2); margin: 0 var(--sp-5) var(--sp-4); }
.gc__specs { margin: 0 var(--sp-5); display: grid; gap: var(--sp-3); border-top: 1px solid var(--rule); padding-top: var(--sp-4); }
.gc__specs div { display: grid; grid-template-columns: 100px 1fr; gap: var(--sp-3); align-items: start; }
.gc__specs dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.gc__specs dd { margin: 0; font-family: var(--font-display); font-size: .88rem; }
.gc__bar { display: block; position: relative; height: 6px; margin-top: 6px; border-radius: 3px;
background: linear-gradient(90deg, var(--fcv-lemon), var(--fcv-orange), var(--fcv-mahogany)); opacity: .35; }
.gc__bar span { position: absolute; top: -3px; height: 12px; border-radius: 6px; background: var(--ink); opacity: 1; }
.gc__bar { opacity: 1; background: var(--surface-2); }
.gc__bar span { background: var(--sw); border: 1px solid var(--rule-strong); }
.gc__cta { display: block; margin: var(--sp-5); font-family: var(--font-display); font-weight: 600; font-size: .88rem; text-decoration: none;
color: var(--accent); }
.gc__cta::after { content: " →"; }
.gc__cta:hover { text-decoration: underline; }
/* ---- Curing curve ------------------------------------------------------- */
.cc { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-1); }
.cc__chart { width: 100%; height: auto; display: block; }
.cc__grid { stroke: var(--rule); stroke-width: 1; }
.cc__tick { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }
.cc__phase { font-family: var(--font-display); font-weight: 600; font-size: 12px; fill: var(--ink-2); }
.cc__line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.js .cc__line { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: cc-draw 1.8s var(--ease-out) forwards; }
@keyframes cc-draw { to { stroke-dashoffset: 0; } }
.cc__cursor line { stroke: var(--fcv-amber); stroke-width: 2; stroke-dasharray: 4 4; }
.cc__cursor circle { fill: var(--fcv-amber); stroke: #fff; stroke-width: 2; }
.cc__controls { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0; }
@media (min-width: 900px) { .cc__controls { grid-template-columns: 1fr 1fr; align-items: start; column-gap: var(--sp-7); } .cc__controls label, .cc__controls input { grid-column: 1; } .cc__readout { grid-column: 2; grid-row: 1 / span 2; } }
.cc__controls label { font-family: var(--font-display); font-weight: 600; font-size: .9rem; display: flex; justify-content: space-between; }
.cc__controls output { font-family: var(--font-mono); color: var(--accent-2); }
.cc__controls input[type="range"] { width: 100%; accent-color: var(--accent); }
.cc__readout { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); }
.cc__readout p { margin: 0 0 var(--sp-2); font-size: .92rem; }
.cc__rphase { font-family: var(--font-display); }
.cc__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .js .cc__line { animation: none; stroke-dashoffset: 0; } }
/* ---- Crop calendar ------------------------------------------------------ */
.cal__table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; font-family: var(--font-display); }
.cal__table caption { caption-side: bottom; text-align: left; font-size: .8rem; color: var(--muted); padding-top: var(--sp-3); }
.cal__table th, .cal__table td { padding: 0; }
.cal__table thead th { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); text-align: center; padding: 0 0 var(--sp-2); font-weight: 500; }
.cal__table thead th:first-child { text-align: left; }
.cal__table tbody th { text-align: left; font-weight: 600; font-size: .86rem; padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; width: 280px; border-top: 1px solid var(--rule); }
.cal__n { font-family: var(--font-mono); color: var(--accent-2); font-size: .74rem; margin-right: 4px; }
.cal__note { display: block; font-weight: 400; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.cal__cell { border-top: 1px solid var(--rule); border-left: 1px dashed var(--rule); height: 44px; position: relative; }
.cal__cell.is-on::after { content: ""; position: absolute; inset: 12px 0; background: linear-gradient(90deg, var(--fcv-leaf), var(--fcv-forest)); }
.cal__cell.is-on + .cal__cell:not(.is-on)::before { content: none; }
.cal__cell.is-now { background: rgba(217,136,40,.12); }
.cal__cell.is-now::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: 2px; background: var(--fcv-amber); opacity: .6; }
.cal__now { font-family: var(--font-display); font-size: .92rem; background: var(--surface-2); border-left: 3px solid var(--fcv-amber); padding: var(--sp-3) var(--sp-4); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 0 0 var(--sp-4); }
/* ---- Form comparator ---------------------------------------------------- */
.fc__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.fc__chip { font-family: var(--font-display); font-weight: 600; font-size: .84rem; padding: 8px 14px; border-radius: 999px;
border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.fc__chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.fc__cards { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .fc__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .fc__cards { grid-template-columns: repeat(4, 1fr); } }
.fc__card { display: flex; flex-direction: column; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
padding: var(--sp-5); text-decoration: none; color: inherit; transition: transform var(--motion-standard) var(--ease-out), box-shadow var(--motion-standard) var(--ease), opacity var(--motion-standard) var(--ease); }
.fc__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.fc__card[hidden] { display: none; }
.fc__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); margin-bottom: var(--sp-2); color: var(--ink); }
.fc__row { display: grid; gap: 2px; font-size: .84rem; border-top: 1px solid var(--rule); padding-top: var(--sp-2); }
.fc__row span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fc__row b { font-family: var(--font-display); font-weight: 500; color: var(--ink-2); }
.fc__table { margin-top: var(--sp-5); }
.fc__table summary, .calc__ref summary, .dec__matrix summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; color: var(--accent); }
/* ---- Container calculator ----------------------------------------------- */
.calc { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-1); }
.calc__form { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5); }
@media (min-width: 640px) { .calc__form { grid-template-columns: 1fr 1fr; } }
.calc__field label, .dec__field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .86rem; margin-bottom: 6px; }
.calc__field input, .calc__field select, .dec__field input, .dec__field select { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.calc__out { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .calc__out { grid-template-columns: repeat(3, 1fr); } }
.calc__stat { background: var(--fcv-forest); color: #fff; border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); }
.calc__k { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #9FB5A6; margin-bottom: 4px; }
.calc__stat b { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; line-height: 1; }
.calc__note { grid-column: 1 / -1; margin: 0; font-family: var(--font-display); font-size: .88rem; color: var(--fcv-warn); background: var(--fcv-warn-bg); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); }
.calc__fine { font-size: .84rem; color: var(--muted); margin: var(--sp-4) 0; }
.calc__ref { margin-bottom: var(--sp-4); }
/* ---- Grade decoder ------------------------------------------------------ */
.dec__form { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5); }
@media (min-width: 720px) { .dec__form { grid-template-columns: 1fr 1fr 1fr; } }
.dec__card { border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-1); }
.dec__band { padding: var(--sp-4) var(--sp-5); background: linear-gradient(100deg, var(--sw) 0 55%, var(--cw) 55% 100%); color: var(--ink);
display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-family: var(--font-display); font-weight: 600; }
.dec__band > span:last-child { background: rgba(255,255,255,.82); color: #151E18; padding: 4px 10px; border-radius: 999px; font-size: .84rem; }
.dec__code { font-family: var(--font-mono); font-size: 1.4rem; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.dec__card > p { margin: var(--sp-4) var(--sp-5); }
.dec__specs { margin: 0 var(--sp-5) var(--sp-4); display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .dec__specs { grid-template-columns: 1fr 1fr; } }
.dec__specs dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dec__specs dd { margin: 2px 0 0; font-size: .9rem; }
.dec__cta { display: inline-block; margin: 0 var(--sp-5) var(--sp-5); font-family: var(--font-display); font-weight: 600; color: var(--accent); }
.dec__matrix { margin-top: var(--sp-5); }
.dec__typ { color: var(--fcv-ok); text-align: center; }
.dec__rare { color: var(--muted); text-align: center; }
.dec__off { color: var(--rule-strong); text-align: center; }
/* ---- Chrome: theme toggle, sticky enquiry bar, reveal, progress ----------- */
.themetoggle { display: none; }
.js .themetoggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 1rem; }
.themetoggle:hover { border-color: var(--rule-strong); }
.enquire { display: none; }
.js .enquire { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
background: var(--fcv-forest-dp); color: #fff; box-shadow: 0 -8px 24px rgba(0,0,0,.25); transform: translateY(110%);
transition: transform var(--motion-standard) var(--ease-out); align-items: center; justify-content: center; }
.js .enquire.is-on { transform: none; }
.enquire__t { display: none; font-family: var(--font-display); font-size: .84rem; color: #C9D6CC; margin-right: auto; }
@media (min-width: 900px) { .enquire__t { display: block; } .js .enquire { padding-inline: var(--sp-6); } }
.enquire .btn { padding: 10px 16px; font-size: .88rem; }
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--fcv-lemon), var(--fcv-orange), var(--fcv-mahogany)); z-index: 70; pointer-events: none; }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--motion-reveal) var(--ease-out), transform var(--motion-reveal) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .js .enquire { transition: none; } }
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.hero__lede { max-width: 66ch; }
.matrix th, .matrix td { font-size: .86rem; }
@media print { .themetoggle, .enquire, .progress { display: none !important; } .gc__band, .ribbon__seg, .calc__stat, .dec__band { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
/* ==== pmlightbox.css ==== */
/* ==== Filmstrip lightbox ==================================================== */
.pmlb { border: 0; padding: 0; margin: auto; width: min(1100px, 100vw); max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; background: transparent; color: #fff; overflow: visible; }
.pmlb:not([open]) { display: none; }
.pmlb::backdrop { background: rgba(6, 12, 9, .94); backdrop-filter: blur(6px); }
.pmlb[open] { display: grid; place-items: center; animation: pmlb-in .3s var(--ease-out, ease) both; }
@keyframes pmlb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.pmlb figure { margin: 0; display: grid; gap: 14px; justify-items: center; max-width: 100%; padding: 0 64px; }
.pmlb img { max-width: 100%; max-height: 74vh; width: auto; height: auto; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1); background: #000; }
.pmlb figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: center; text-align: center; font-family: var(--font-display); font-size: .92rem; color: #E9EFE7; }
.pmlb figcaption b { font-family: var(--font-mono); font-weight: 500; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fcv-lemon, #F5D66B); }
.pmlb figcaption a { color: var(--fcv-lemon, #F5D66B); }
.pmlb__count { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; color: #9FB5A6; }
.pmlb__x, .pmlb__nav { position: fixed; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.5); color: #fff; font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(6px); transition: background .2s; }
.pmlb__x:hover, .pmlb__nav:hover { background: rgba(255,214,90,.35); }
.pmlb__x { top: 16px; right: 16px; }
.pmlb__nav { top: 50%; transform: translateY(-50%); }
.pmlb__nav--l { left: 12px; } .pmlb__nav--r { right: 12px; }
@media (max-width: 599px) { .pmlb figure { padding: 0 8px; } .pmlb img { max-height: 66vh; } .pmlb__nav { top: auto; bottom: 18px; transform: none; } .pmlb__nav--l { left: 18px; } .pmlb__nav--r { right: 18px; } }
@media (prefers-reduced-motion: reduce) { .pmlb[open] { animation: none; } }
/* ==== protect.css ==== */
/* ==== Content protection ==== */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
img, picture, video, svg { -webkit-user-drag: none; user-drag: none; }
video::-internal-media-controls-download-button { display: none; }
video::-webkit-media-controls-enclosure { overflow: hidden; }
/* ==== quickquote.css ==== */
/* ==== Quick quote: right-hand drawer ======================================= */
.qq { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(540px, 100vw); height: 100vh; height: 100dvh; max-height: none; max-width: none; border: 0; padding: 0; border-radius: 0; background: var(--surface); color: var(--ink); box-shadow: -30px 0 80px rgba(0,0,0,.45); overflow: auto; display: flex; flex-direction: column; }
.qq:not([open]) { display: none; }
.qq::backdrop { background: rgba(8,16,12,.6); backdrop-filter: blur(4px); }
.qq[open] { animation: qq-in .38s var(--ease-out, ease) both; }
@keyframes qq-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.qq__head { position: relative; background: #0c1a14; color: #fff; padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.qq__k { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fcv-orange, #E8A33C); margin: 0 0 var(--sp-3); }
.qq__head h2 { margin: 0 0 var(--sp-4); font-family: var(--font-serif, Georgia, "Times New Roman", serif); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); line-height: 1.15; color: #fff; }
.qq__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff; font-size: 1.25rem; cursor: pointer; display: grid; place-items: center; }
.qq__x:hover { background: rgba(255,255,255,.12); }
.qq__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.qq__steps li { border-top: 1px solid rgba(255,255,255,.18); padding-top: 8px; font-family: var(--font-display); font-size: .78rem; line-height: 1.3; color: #C9D6CC; }
.qq__steps b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: .62rem; letter-spacing: .12em; color: var(--fcv-orange, #E8A33C); margin-bottom: 3px; }
.qq form, .qq__ok { padding: var(--sp-5); flex: 1; }
.qq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.qq__grid .qq__full { grid-column: 1 / -1; }
.qq label, .qq__lbl { display: block; font-family: var(--font-display); font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.qq label small, .qq__lbl small { font-weight: 400; color: var(--muted); font-size: .8rem; margin-left: 4px; }
.qq input, .qq select, .qq textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; font-size: 1rem; }
.qq textarea { min-height: 96px; resize: vertical; }
.qq input:focus, .qq select:focus, .qq textarea:focus { outline: 2px solid var(--fcv-orange, #D97A2B); outline-offset: 0; border-color: var(--fcv-orange, #D97A2B); }
.qq [aria-invalid="true"] { border-color: #c0392b; box-shadow: 0 0 0 2px rgba(192,57,43,.18); }
.qq__seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qq__seg label { position: relative; margin: 0; }
.qq__seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qq__seg span { display: block; text-align: center; padding: 12px 10px; border: 1px solid var(--rule); border-radius: 8px; font-family: var(--font-display); font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .2s, color .2s; }
.qq__seg input:checked + span { background: #0c1a14; color: #fff; border-color: #0c1a14; }
.qq__seg input:focus-visible + span { outline: 2px solid var(--fcv-orange, #D97A2B); }
.qq__consent { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--ink); background: color-mix(in srgb, var(--fcv-orange, #D97A2B) 9%, var(--surface)); border-radius: 8px; padding: 12px 14px; margin: 14px 0; }
.qq__consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: #0c1a14; flex: 0 0 auto; }
.qq__foot { display: grid; gap: 10px; }
.qq__foot .btn { width: 100%; padding: 14px; font-size: 1rem; }
.qq__alt { text-align: center; font-size: .82rem; color: var(--muted); }
.qq__alt a { color: inherit; }
.qq__err { color: #c0392b; font-size: .84rem; margin: 0 0 10px; }
.qq__err[hidden], .qq__ok[hidden], .qq form[hidden] { display: none; }
.qq__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qq__ok { text-align: center; display: grid; place-content: center; }
.qq__ok .qq__tick { width: 68px; height: 68px; border-radius: 50%; background: #1EBE5D; color: #062b16; display: grid; place-items: center; margin: 0 auto var(--sp-4); font-size: 2rem; }
.qq__ok h2 { margin: 0 0 8px; font-family: var(--font-serif, Georgia, serif); font-weight: 400; font-size: 1.6rem; }
.qq__ok p { color: var(--muted); margin: 0 0 var(--sp-4); }
@media (max-width: 599px) {
.qq { width: 100vw; }
.qq__grid { grid-template-columns: 1fr; }
.qq__steps { gap: 8px; } .qq__steps li { font-size: .72rem; }
.qq form, .qq__ok { padding: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) { .qq[open] { animation: none; } }
/* ==== videos.css ==== */
/* ==== /videos: cinematic theatre + playlist + poster grid ================ */
.vt { position: relative; background: var(--fcv-forest-dp, #0f241a); color: #fff; padding: var(--sp-7) 0; isolation: isolate; overflow: hidden; scroll-margin-top: 84px; }
.vt::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
radial-gradient(60% 50% at 12% 0%, rgba(255,214,90,.16), transparent 60%),
radial-gradient(50% 40% at 100% 100%, rgba(214,120,40,.18), transparent 60%); }
.vt::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,36,26,.55), rgba(15,36,26,.82)); }
.vt__amb { position: absolute; inset: -25%; z-index: -2; background-size: cover; background-position: center; filter: blur(90px) saturate(1.5); opacity: .55; transition: background-image .6s ease; animation: vt-amb 26s ease-in-out infinite alternate; }
@keyframes vt-amb { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-3%, 2%); } }
.vt__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-6); align-items: stretch; }
.vt__main { min-width: 0; }
.vt__stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: radial-gradient(130% 100% at 50% 45%, transparent 62%, rgba(0,0,0,.4)); }
.vt__prog { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 4; background: rgba(255,255,255,.14); }
.vt__prog i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--fcv-lemon, #F5D66B), var(--fcv-orange, #D97A2B)); box-shadow: 0 0 12px rgba(255,214,90,.7); transition: width .25s linear; }
.vt__next { position: absolute; right: 14px; bottom: 68px; z-index: 4; background: rgba(0,0,0,.62); backdrop-filter: blur(8px); border: 1px solid rgba(255,214,90,.45); color: #fff; padding: 8px 12px; border-radius: 10px; font-family: var(--font-display); font-size: .8rem; pointer-events: none; animation: vt-up .4s var(--ease-out, ease) both; }
.vt__next b { color: var(--fcv-lemon, #F5D66B); }
.vt__next[hidden] { display: none; }
@keyframes vt-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vt__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); background: rgba(255,255,255,.04); backdrop-filter: blur(6px); width: min(100%, calc(64vh * 16 / 9)); }
.vt__meta div { display: grid; gap: 2px; }
.vt__meta dt { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #9FB5A6; }
.vt__meta dd { margin: 0; font-family: var(--font-display); font-size: .84rem; color: #fff; }
.vt__meta a { color: var(--fcv-lemon, #F5D66B); text-decoration: none; border-bottom: 1px solid rgba(245,214,107,.4); }
.vt__meta a:hover { border-bottom-color: currentColor; }
.vt__n { display: inline-block; min-width: 1.6em; color: var(--fcv-lemon, #F5D66B); }
.vt__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: #9FB5A6; }
.vt__dot[data-c="leaf-strips"] { background: #F5D66B; } .vt__dot[data-c="shisha-golden-virginia"] { background: #F0A34A; }
.vt__dot[data-c="processing"] { background: #7CC5A0; } .vt__dot[data-c="stock-warehouse"] { background: #C9A27A; }
.vt__dot[data-c="samples"] { background: #9FB5FF; } .vt__dot[data-c="stems-scrap"] { background: #D08A5A; }
.vg__card[data-cat="leaf-strips"] .vg__tag { color: #B08A10; } .vg__card[data-cat="processing"] .vg__tag { color: #2E8B62; }
.vg__card[data-cat="stock-warehouse"] .vg__tag { color: #8C6A3F; } .vg__card[data-cat="samples"] .vg__tag { color: #4A63C8; }
.vg__card[data-cat="stems-scrap"] .vg__tag { color: #A85F2A; }
.vt__stage { position: relative; width: min(100%, calc(64vh * 16 / 9)); aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: #000; box-shadow: 0 34px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.14), 0 0 120px rgba(255,214,90,.14); isolation: isolate; }
.vt__bg { position: absolute; inset: -12%; z-index: 0; background-size: cover; background-position: center; filter: blur(30px) saturate(1.25) brightness(.55); transform: scale(1.1); transition: opacity .45s ease; }
.vt__stage video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; transition: opacity .35s ease; }
.vt__stage.is-swap video, .vt__stage.is-swap .vt__bg { opacity: 0; }
.vt__big { position: absolute; z-index: 3; inset: 0; margin: auto; width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14); backdrop-filter: blur(12px); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .3s var(--ease-out, ease), opacity .3s ease, background .2s; }
.vt__big::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255,214,90,.55); animation: vt-ring 2.2s ease-out infinite; }
.vt__big svg { width: 34px; height: 34px; margin-left: 5px; fill: #fff; }
.vt__big:hover { background: rgba(255,214,90,.35); transform: scale(1.06); }
.vt__stage.is-playing .vt__big { opacity: 0; pointer-events: none; transform: scale(.7); }
@keyframes vt-ring { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.vt__hud { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; display: flex; gap: 8px; align-items: center; pointer-events: none; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.vt__hud > span { background: rgba(0,0,0,.5); backdrop-filter: blur(8px); padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: #fff; }
.vt__hud .vt__cat { margin-left: auto; color: var(--fcv-lemon, #F5D66B); }
.vt__side { min-width: 0; display: flex; flex-direction: column; }
/* The playlist takes exactly the height left beside the player, so the two
columns always end together (no dead space under the stage). */
.vt__listwrap { position: relative; flex: 1; min-height: 240px; }
.vt__list { position: absolute; inset: 0; }
.vt__k { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fcv-lemon, #F5D66B); margin: 0 0 var(--sp-2); display: flex; align-items: center; gap: 8px; }
.vt__k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff5f5f; box-shadow: 0 0 12px #ff5f5f; animation: vt-blink 1.6s ease-in-out infinite; }
@keyframes vt-blink { 50% { opacity: .35; } }
.vt__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.15; margin: 0 0 var(--sp-2); color: #fff; }
.vt__cap { color: #C9D6CC; margin: 0 0 var(--sp-4); font-size: .95rem; line-height: 1.55; }
.vt__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.vt__nav { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-3); }
.vt__nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 1rem; transition: background .2s, transform .2s; }
.vt__nav button:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.vt__auto { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: .8rem; color: #C9D6CC; cursor: pointer; }
.vt__auto input { accent-color: var(--fcv-lemon, #F5D66B); }
.vt__list { list-style: none; margin: 0; padding: 0 4px 28px 0; display: grid; gap: 6px; align-content: start; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; -webkit-mask: linear-gradient(#000 86%, transparent); mask: linear-gradient(#000 86%, transparent); }
.vt__item { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; width: 100%; text-align: left; background: rgba(255,255,255,.05); border: 1px solid transparent; border-radius: 12px; padding: 6px; color: #fff; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; font: inherit; }
.vt__item:hover { background: rgba(255,255,255,.11); transform: translateX(2px); }
.vt__item[aria-current="true"] { border-color: var(--fcv-lemon, #F5D66B); background: rgba(255,214,90,.14); }
.vt__thumb { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #000; }
.vt__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt__item[aria-current="true"] .vt__thumb::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.vt__item[aria-current="true"] .vt__eq { display: flex; }
.vt__eq { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); gap: 3px; align-items: flex-end; height: 16px; z-index: 1; }
.vt__eq i { width: 3px; background: var(--fcv-lemon, #F5D66B); animation: vt-eq .9s ease-in-out infinite; height: 40%; }
.vt__eq i:nth-child(2) { animation-delay: .2s; } .vt__eq i:nth-child(3) { animation-delay: .4s; }
@keyframes vt-eq { 50% { height: 100%; } }
.vt__it b { display: block; font-family: var(--font-display); font-weight: 600; font-size: .84rem; line-height: 1.25; }
.vt__it small { display: block; color: #9FB5A6; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.vt__list li[hidden] { display: none; }
.vt .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.vt .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
/* grid of every clip */
.vg__head { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); align-items: end; margin-bottom: var(--sp-4); }
.vg__stats { display: flex; gap: var(--sp-4); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vg__stats b { display: block; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0; color: var(--ink); }
.vg__chips { position: sticky; top: 62px; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; margin-bottom: var(--sp-4); background: color-mix(in srgb, var(--surface, #fff) 88%, transparent); backdrop-filter: blur(10px); scrollbar-width: none; }
.vg__chips::-webkit-scrollbar { display: none; }
.vg__chip { flex: 0 0 auto; border: 1px solid var(--rule); background: var(--surface); color: inherit; border-radius: 999px; padding: 7px 14px; font-family: var(--font-display); font-size: .82rem; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.vg__chip span { font-family: var(--font-mono); font-size: .66rem; opacity: .7; }
.vg__chip:hover { transform: translateY(-1px); border-color: var(--fcv-orange, #D97A2B); }
.vg__chip.is-on { background: var(--fcv-forest, #1E4D3A); color: #fff; border-color: var(--fcv-forest, #1E4D3A); }
.vg__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }
.vg__card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-1); transition: transform .3s var(--ease-out, ease), box-shadow .3s; }
.vg__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.vg__card[hidden] { display: none; }
.vg__card.is-now { outline: 2px solid var(--fcv-lemon, #F5D66B); outline-offset: 2px; }
.vg__play { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0; background: #000; cursor: pointer; overflow: hidden; }
.vg__play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease-out, ease), filter .4s; }
.vg__card:hover .vg__play img { transform: scale(1.07); filter: brightness(1.08); }
.vg__glyph { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.45); transition: transform .3s, background .3s; }
.vg__glyph::after { content: ""; position: absolute; left: 55%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%); border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #fff; }
.vg__card:hover .vg__glyph { transform: scale(1.12); background: rgba(255,214,90,.45); }
.vg__dur { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.65); color: #fff; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; padding: 3px 7px; border-radius: 6px; }
.vg__no { position: absolute; left: 10px; top: 10px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: #fff; background: rgba(0,0,0,.5); padding: 3px 7px; border-radius: 6px; }
.vg__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.vg__t { margin: 0; font-size: 1rem; line-height: 1.3; }
.vg__c { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--muted); opacity: .85; }
.vg__tag { margin-top: auto; align-self: flex-start; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fcv-orange, #D97A2B); border: 1px solid currentColor; border-radius: 999px; padding: 3px 8px; }
.vg__empty { text-align: center; padding: var(--sp-6); color: var(--muted); }
@supports (animation-timeline: view()) {
.vg__card { animation: vg-in linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
@keyframes vg-in { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
}
.vid-intro { max-width: none; }
.vid-intro p { max-width: 70ch; }
.vid-links { columns: 2; column-gap: var(--sp-5); font-size: .86rem; }
@media (max-width: 899px) {
.vt { padding: var(--sp-5) 0; scroll-margin-top: 64px; }
.vt__in { grid-template-columns: 1fr; gap: var(--sp-4); }
.vt__stage { width: 100%; aspect-ratio: var(--ar, 16 / 9); max-height: 72vh; margin-inline: auto; }
.vt__meta { width: 100%; gap: var(--sp-3) var(--sp-4); }
.vt__amb { animation: none; }
.vt__listwrap { position: static; min-height: 0; }
.vt__list { position: static; display: flex; overflow-x: auto; max-height: none; gap: 8px; padding: 4px 0 12px; scroll-snap-type: x mandatory; -webkit-mask: none; mask: none; scrollbar-width: none; }
.vt__list li { flex: 0 0 210px; scroll-snap-align: start; }
.vt__item { grid-template-columns: 64px 1fr; }
.vg__head { grid-template-columns: 1fr; }
.vg__chips { top: 56px; }
.vg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.vg__body { padding: var(--sp-3); }
.vg__c { display: none; }
.vid-links { columns: 1; }
}
@media (min-width: 900px) and (max-height: 820px) { .vt__stage, .vt__meta { width: min(100%, calc(56vh * 16 / 9)); } }
@media (prefers-reduced-motion: reduce) { .vt__big::before, .vt__k::before, .vt__eq i, .vg__card, .vt__amb, .vt__next { animation: none !important; } }
/* ---- homepage band: poster mosaic beside the player ---- */
.vt--home { padding: var(--sp-8) 0; scroll-margin-top: 0; }
.vt--home .vt__in { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); align-items: center; }
.vt--home .vt__stage { width: 100%; }
.vt--home .vt__h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1.1; color: #fff; margin: 0 0 var(--sp-3); }
.vt--home .vt__lede { color: #C9D6CC; font-size: .98rem; line-height: 1.55; margin: 0 0 var(--sp-4); }
.vt__stats { display: flex; gap: var(--sp-5); margin: 0 0 var(--sp-4); }
.vt__stats b { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: #fff; }
.vt__stats span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #9FB5A6; }
.vt--home .vt__listwrap { position: static; flex: 0 0 auto; min-height: 0; }
.vt--home .vt__listwrap { position: relative; }
.vt--home .vt__list { position: static; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-columns: calc((100% - 16px) / 3); gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0; -webkit-mask: none; mask: none; }
.vt--home .vt__list::-webkit-scrollbar { display: none; }
.vt--home .vt__list li { scroll-snap-align: start; }
.vt__larr { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.62); backdrop-filter: blur(6px); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 1rem; transition: background .2s, opacity .2s; }
.vt__larr:hover { background: rgba(255,214,90,.4); }
.vt__larr[disabled] { opacity: .25; cursor: default; }
.vt__larr--l { left: -16px; } .vt__larr--r { right: -16px; }
.vt__lpage { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; color: #9FB5A6; }
.vt--home .vt__item { display: block; padding: 0; position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #000; }
.vt--home .vt__item:hover { transform: translateY(-3px); }
.vt--home .vt__thumb { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.vt--home .vt__thumb img { transition: transform .8s var(--ease-out, ease); }
.vt--home .vt__item:hover .vt__thumb img { transform: scale(1.08); }
.vt--home .vt__it { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 7px; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.vt--home .vt__it b { font-size: .7rem; line-height: 1.2; }
.vt--home .vt__it small { display: none; }
.vt__now { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin: var(--sp-3) 0 var(--sp-4); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #9FB5A6; }
.vt__now b { color: var(--fcv-lemon, #F5D66B); font-family: var(--font-display); font-size: .86rem; letter-spacing: 0; text-transform: none; }
@media (max-width: 899px) {
.vt--home { padding: var(--sp-6) 0; }
.vt--home .vt__in { grid-template-columns: 1fr; }
.vt--home .vt__list li { flex: none; }
.vt__larr--l { left: -8px; } .vt__larr--r { right: -8px; }
.vt__stats { gap: var(--sp-4); }
}
/* ==== zz-theme.css ==== */
/* ==== Theme pass 2: mobile-first rhythm, cinematic hero, photo sections ==== */
/* Loaded last in the bundle (zz-) so it wins over the base system. */
/* ---- Mobile chrome: one-line topbar, compact masthead ------------------- */
.topbar__in { flex-wrap: nowrap; padding-block: 6px; gap: var(--sp-3); }
.topbar__notice { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Named, not positional. This was :last-child, so adding the language
switcher after it silently hid the switcher on phones and un-hid the
number the rule was written for. */
.topbar__wa { flex-shrink: 0; }
@media (max-width: 639px) { .topbar__wa { display: none; } }
.masthead__in { padding-block: 10px; gap: var(--sp-3); }
.brand__mark { width: 34px; height: 34px; }
@media (max-width: 479px) { .brand__sub { display: none; } .brand__name { font-size: .98rem; } }
.navtoggle { padding: var(--sp-2) var(--sp-3); }
.js .themetoggle { width: 36px; height: 36px; border-color: var(--rule-strong); font-size: .95rem; line-height: 1; }
@media (max-width: 1023px) { .js .themetoggle { order: 2; } .navtoggle { order: 3; } }
:root { --header-h: 72px; }
@media (min-width: 1024px) { :root { --header-h: 100px; } }
/* ---- Hero: cinematic, photo visible, editorial headline ----------------- */
.hero { min-height: clamp(520px, 78svh, 860px); display: flex; align-items: flex-end; isolation: isolate; }
.hero__media img { opacity: .78; transform: scale(1.04); transition: opacity 1.2s var(--ease-out); will-change: transform; }
.hero__media::after { background:
linear-gradient(90deg, rgba(15,36,26,.94) 0%, rgba(15,36,26,.78) 38%, rgba(15,36,26,.28) 72%, rgba(15,36,26,.15) 100%),
linear-gradient(180deg, rgba(15,36,26,.25) 0%, rgba(15,36,26,0) 30%, rgba(15,36,26,.85) 100%); }
.hero__in { width: 100%; padding-block: var(--sp-8) var(--sp-7); }
.hero h1 { font-size: clamp(2.35rem, 1.6rem + 3.6vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 16ch; }
.hero__accent { font-style: normal; background: var(--grad-cure); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lede { font-size: clamp(1.02rem, .95rem + .45vw, 1.28rem); max-width: 52ch; }
.hero .eyebrow { font-size: .7rem; }
.hero .btn-row .btn { min-height: 48px; }
@media (max-width: 639px) { .hero .btn-row .btn { flex: 1 1 100%; } .hero__lede { font-size: 1rem; } }
@media (min-width: 900px) { .hero__in { padding-block: var(--sp-10) var(--sp-8); grid-template-columns: minmax(0, 1.4fr) minmax(300px, .7fr); } }
.specmeta { background: rgba(15,36,26,.55); backdrop-filter: blur(14px); border-color: rgba(233,239,231,.16); }
@media (max-width: 899px) { .specmeta { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); padding: var(--sp-4); }
.specmeta__h { grid-column: 1 / -1; } .specmeta__row + .specmeta__row { border-top: 0; } .specmeta__row { border-top: 1px solid rgba(233,239,231,.1); } }
/* scroll cue */
.hero__cue { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.35); border-radius: 13px; display: none; }
.hero__cue::before { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--fcv-lemon); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@media (min-width: 900px) { .hero__cue { display: block; } }
@media (prefers-reduced-motion: reduce) { .hero__cue::before { animation: none; } }
/* ---- Ticker: key facts in motion --------------------------------------- */
.ticker { overflow: hidden; background: var(--fcv-forest-dp); color: #C9D6CC; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.ticker__track { display: flex; width: max-content; gap: 0; animation: ticker 60s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: 12px 0; white-space: nowrap; }
.ticker__item::after { content: "◆"; color: var(--fcv-orange); margin: 0 22px; font-size: .55rem; vertical-align: 2px; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; flex-wrap: wrap; width: auto; } .ticker__item { padding: 8px 0; } }
/* ---- Ribbon pulled over the hero edge ------------------------------------ */
.ribbon { box-shadow: var(--shadow-2); }
.ribbon__seg { min-height: 56px; transition: transform var(--motion-standard) var(--ease-out); }
.ribbon__seg:hover { transform: translateY(-4px); }
/* ---- Sections: rhythm, dark photo bands, bleed figures ------------------ */
.section { padding-block: var(--sp-8); }
@media (min-width: 900px) { .section { padding-block: var(--sp-10); } }
.section--photo { position: relative; color: var(--on-forest); background: var(--fcv-forest-dp); isolation: isolate; }
.section--photo::before { content: ""; position: absolute; inset: 0; background-image: var(--photo); background-size: cover; background-position: center; opacity: .32; z-index: -1; }
.section--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,36,26,.6), rgba(15,36,26,.85)); z-index: -1; }
.section--photo :is(h2, h3, h4) { color: #fff; }
.section--photo .lede { color: #C9D6CC; }
.section--photo .eyebrow { color: var(--fcv-lemon); }
.section--photo .cc, .section--photo .calc, .section--photo .cal__table tbody th { color: var(--ink); }
.section--photo .cc, .section--photo .calc { background: var(--surface); }
.section--photo .cal__table { background: rgba(255,255,255,.94); border-radius: var(--r-md); color: var(--ink); }
.section--photo .cal__table caption, .section--photo .cal__now { color: #C9D6CC; }
.section--photo .cal__now { background: rgba(255,255,255,.08); color: #fff; }
.section--photo .cal__table thead th { color: var(--ink-2); }
.section--photo .cal__table thead th, .section--photo .cal__table tbody th, .section--photo .cal__cell { padding-inline: 6px; }
.section--photo .stage { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.section--photo .stage__t { color: #fff; } .section--photo .stage__d { color: #C9D6CC; }
.bleed { margin: 0; position: relative; }
.bleed picture, .bleed img { width: 100%; height: clamp(220px, 42vw, 520px); object-fit: cover; display: block; }
.bleed figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-5) 0; color: #fff; background: linear-gradient(180deg, rgba(15,36,26,0), rgba(15,36,26,.8)); font-family: var(--font-display); font-size: .86rem; }
.bleed figcaption .container { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: flex-end; }
.bleed figcaption .eyebrow { color: var(--fcv-lemon); margin: 0 0 4px; }
.bleed figcaption span { opacity: .8; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
/* ---- Cards and modules on small screens: swipe, not stack forever ------- */
@media (max-width: 719px) {
.gc { gap: var(--sp-4); }
.gc__plantwrap { display: none; }
.gc__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--sp-3); padding: 4px 4px var(--sp-4); margin-inline: calc(-1 * var(--sp-4)); padding-inline: var(--sp-4); scrollbar-width: none; }
.gc__cards::-webkit-scrollbar { display: none; }
.gc__card { flex: 0 0 82vw; max-width: 340px; scroll-snap-align: start; }
.fc__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--sp-3); margin-inline: calc(-1 * var(--sp-4)); padding: 4px var(--sp-4) var(--sp-4); scrollbar-width: none; }
.fc__cards::-webkit-scrollbar { display: none; }
.fc__card { flex: 0 0 74vw; max-width: 300px; scroll-snap-align: start; }
.fc__card[hidden] { display: none; }
.colours { display: flex; overflow-x: auto; gap: var(--sp-3); scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--sp-4)); padding: 0 var(--sp-4) var(--sp-3); scrollbar-width: none; }
.colour { flex: 0 0 240px; scroll-snap-align: start; }
.swipe-hint { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-3); }
.cc { padding: var(--sp-4); }
.cc__chartwrap { overflow-x: auto; margin-inline: calc(-1 * var(--sp-4)); padding-inline: var(--sp-4); }
.cc__chart { min-width: 620px; }
.calc { padding: var(--sp-4); }
.calc__stat b { font-size: var(--step-2); }
.who__cell { padding: var(--sp-4); }
.facts { grid-template-columns: repeat(2, 1fr); }
.fact { padding: var(--sp-4); } .fact__v { font-size: 1rem; }
.timeline { display: flex; overflow-x: auto; gap: var(--sp-3); scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--sp-4)); padding: 0 var(--sp-4) var(--sp-3); }
.stage { flex: 0 0 240px; scroll-snap-align: start; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.9rem); }
.lede { font-size: 1.02rem; }
.btn { min-height: 48px; }
.matrix th, .matrix td { padding: 10px 12px; }
.enquire .btn { flex: 1 1 0; padding: 10px 12px; }
}
.swipe-hint { display: none; }
/* ---- Spec builder tidy on phones ----------------------------------------- */
@media (max-width: 719px) {
.sb__pitch h2 { font-size: 1.7rem; }
.sb__stalk { display: none; }
.sb__forms { display: grid; grid-template-columns: 1fr 1fr; }
.sb__swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
}
/* ---- Cards: premium finish ----------------------------------------------- */
.gc__card, .fc__card, .who__cell, .dec__card, .card, .linkcard { border-color: var(--rule); }
.gc__card { position: relative; }
.gc__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--sw); opacity: 0; transition: opacity var(--motion-micro); }
.linkcard { transition: transform var(--motion-standard) var(--ease-out), box-shadow var(--motion-standard) var(--ease); }
.linkcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.stage { transition: transform var(--motion-standard) var(--ease-out), box-shadow var(--motion-standard) var(--ease); }
.stage:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.stage__n { color: var(--accent-2); }
/* ---- Product / pillar heroes with photography ---------------------------- */
.hero--page { min-height: clamp(440px, 60svh, 640px); }
/* ---- Footer polish -------------------------------------------------------- */
.foot { position: relative; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-cure); }
/* ---- Sticky enquiry bar stays clear of iOS home indicator ----------------- */
.js .enquire { padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom)); }
body { padding-bottom: 0; }
.js .foot { padding-bottom: 72px; }
/* ==== Laptop pass: 13-inch screens (short viewports, 1280–1536 px wide) ==== */
/* Header: group navigation, theme toggle and CTA on the right instead of
spreading them across the bar with an orphaned toggle. */
@media (min-width: 1024px) {
.masthead__in { justify-content: flex-start; }
.nav { margin-left: auto; }
.js .themetoggle { margin-left: var(--sp-2); }
/* The header already carries the quote CTA; the fixed bottom bar only
stole vertical space on laptops. Keep it for phones and tablets. */
.js .enquire { display: none; }
.js .foot { padding-bottom: 0; }
}
/* Spec builder: at laptop width the controls and the result sit side by
side, and the result stays pinned while the sliders are moved, so the
match is never below the fold. */
@media (min-width: 1000px) {
.sb { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
.sb__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .82fr); column-gap: var(--sp-6); row-gap: var(--sp-4); align-content: start; }
.sb__head { grid-column: 1 / -1; }
.sb__panel > .sb__group, .sb__panel > .sb__row { grid-column: 1; margin: 0; }
.sb__result { grid-column: 2; grid-row: 2 / span 6; align-self: start; position: sticky; top: calc(var(--header-h) + 12px); margin: 0; }
.sb__fine { grid-column: 1 / -1; margin-top: var(--sp-2); }
.sb__pitch { padding: var(--sp-6); }
.sb__pitch h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
.sb__pitch > p { font-size: .92rem; }
.sb__note { padding: var(--sp-3) var(--sp-4); font-size: .88rem; }
.sb__terms { display: none; }
.sb__stalk { margin-top: var(--sp-5); }
.sb__rung { padding-block: 3px; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
.sb__pitch .btn-row { display: none; }
.sb__stalklab { margin-top: 0; }
}
/* Short viewports (laptops at 125% scaling ≈ 730 px tall): tighter rhythm. */
@media (min-width: 1000px) and (max-height: 820px) {
.hero { min-height: clamp(480px, 84svh, 700px); }
.hero__in { padding-block: var(--sp-8) var(--sp-7); }
.hero h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.9rem); }
.section { padding-block: var(--sp-8); }
.sb__pitch { padding: var(--sp-5) var(--sp-6); }
.sb__stalk { display: none; }
.sb__panel { padding: var(--sp-5) var(--sp-6); row-gap: var(--sp-3); }
.sb__group label, .sb__group legend { font-size: .86rem; }
.sb__result { padding: var(--sp-4) var(--sp-5); }
.sb__result h4 { font-size: 1.25rem; }
.sb__result p, .sb__why li { font-size: .88rem; }
.gc__plantwrap { top: calc(var(--header-h) + 8px); }
.secnav { top: calc(var(--header-h) + 12px); max-height: calc(100vh - var(--header-h) - 40px); }
.aside { top: calc(var(--header-h) + 12px); }
}
/* ==== Fit-the-fold pass: every module keeps its controls and its result
on screen together at laptop widths (>= 1000 px) ======================= */
@media (min-width: 1000px) {
/* Section headings: eyebrow + H2 left, lede right, so the module starts
~120 px higher on a 730 px-tall screen. */
section.section > .container:has(> h2 + .lede) {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: var(--sp-8); align-items: end; }
section.section > .container:has(> h2 + .lede) > .eyebrow { grid-column: 1; grid-row: 1; margin-bottom: var(--sp-2); }
section.section > .container:has(> h2 + .lede) > h2 { grid-column: 1; grid-row: 2; }
section.section > .container:has(> h2 + .lede) > .lede { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 4px !important; font-size: 1.02rem; max-width: none; }
section.section > .container:has(> h2 + .lede) > :not(.eyebrow):not(h2):not(.lede) { grid-column: 1 / -1; }
section.section > .container:has(> h2 + .lede) > .lede + * { margin-top: var(--sp-6); }
/* Curing curve: chart left, scrubber and readout right; table below. */
.container > .cc { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); column-gap: var(--sp-6); align-items: start; }
.container > .cc > .cc__chartwrap { grid-column: 1; grid-row: 1; }
.container > .cc > .cc__controls { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 1fr; margin: 0; position: sticky; top: calc(var(--header-h) + 12px); }
.container > .cc > .cc__controls .cc__readout { grid-column: 1; grid-row: auto; }
.container > .cc > .matrix, .container > .cc > .ix__src { grid-column: 1 / -1; }
.cc__chart { max-width: calc(min(48vh, 400px) * 820 / 340); margin-inline: auto; }
/* Container calculator: inputs left, live results right. */
.container > .calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: var(--sp-6); align-items: start; }
.container > .calc > .calc__form { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; margin: 0; }
.container > .calc > .calc__out { grid-column: 2; grid-row: 1; }
.container > .calc > .calc__fine, .container > .calc > .calc__ref, .container > .calc > p { grid-column: 1 / -1; }
/* Grade decoder: selectors left, decoded card right. */
.dec { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: var(--sp-6); align-items: start; }
.dec > .dec__form { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; margin: 0; }
.dec > .dec__card { grid-column: 2; grid-row: 1; }
.dec > .dec__matrix { grid-column: 1 / -1; }
/* Comparator: chips and cards in one screen. */
.fc__cards { grid-template-columns: repeat(4, 1fr); }
.fc__card { padding: var(--sp-4); gap: 6px; }
.fc__row { font-size: .8rem; }
/* Grade cards: six on one screen with the stalk beside them. */
.gc { grid-template-columns: 150px minmax(0, 1fr); }
.gc__cards { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.gc__desc { display: none; }
.gc__name { margin-top: var(--sp-3); font-size: 1.05rem; }
.gc__specs { gap: var(--sp-2); padding-top: var(--sp-3); }
.gc__specs div { grid-template-columns: 88px 1fr; }
.gc__cta { margin: var(--sp-3) var(--sp-5) var(--sp-4); font-size: .82rem; }
/* Crop calendar: shorter rows. */
.cal__cell { height: 36px; }
.cal__cell.is-on::after { inset: 10px 0; }
.cal__table tbody th { padding-block: var(--sp-2); width: 250px; }
.cal__note { display: none; }
/* Who-we-are block: four cells, one line each. */
.who__cell { padding: var(--sp-4); }
.who__cell dd { font-size: .9rem; }
}
@media (min-width: 1000px) and (max-height: 820px) {
.gc__card:hover, .gc__card.is-active { transform: none; }
.cc__chart { max-width: calc(min(42vh, 330px) * 820 / 340); }
.cc__readout p { font-size: .88rem; }
.fc__chips { margin-bottom: var(--sp-3); }
.section--tight { padding-block: var(--sp-6); }
.bleed picture, .bleed img { height: clamp(180px, 30vh, 320px); }
.facts .fact { padding: var(--sp-4) var(--sp-5); }
.hero__lede { font-size: 1.02rem; }
}
@media (min-width: 1000px) and (max-height: 820px) {
.section { padding-block: var(--sp-7); }
.gc__specs div:last-child { display: none; } /* texture row: keep colour, nicotine, body */
.gc__cta { margin-block: var(--sp-2) var(--sp-3); }
.gc__band { padding-block: var(--sp-2); }
}
/* ==== Desktop long-form pages: use the width ============================ */
/* Left rail (page nav + enquiry card), content column takes everything else.
Text keeps a readable measure; tables, cards, tools and figures span the
full column so nothing is squeezed or cut off. */
.rail__cta { display: none; }
@media (min-width: 1080px) {
.withnav { grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-8); }
.rail { position: sticky; top: calc(var(--header-h) + var(--sp-4)); max-height: calc(100vh - var(--header-h) - var(--sp-6)); overflow-y: auto; scrollbar-width: thin; }
.rail .secnav { position: static; max-height: none; overflow: visible; }
.rail__cta { display: block; margin-top: var(--sp-5); background: var(--fcv-forest); color: #fff; border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--shadow-1); }
.rail__k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fcv-lemon); margin: 0 0 var(--sp-2); }
.rail__t { font-size: .86rem; color: #C9D6CC; margin: 0 0 var(--sp-4); line-height: 1.5; }
.rail__cta .btn { width: 100%; }
.rail__wa { display: block; margin-top: var(--sp-3); font-family: var(--font-display); font-size: .84rem; color: #fff; text-decoration: none; }
.rail__wa:hover { text-decoration: underline; }
.rail__moq { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em; color: #9FB5A6; margin: var(--sp-4) 0 0; line-height: 1.5; }
.prose { max-width: none; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose h2, .prose h3, .prose h4, .prose .callout, .prose .lede { max-width: 78ch; }
.prose .matrix, .prose .figure, .prose .gc, .prose .fc, .prose .cc, .prose .calc, .prose .dec, .prose .cal, .prose .colours,
.prose .timeline, .prose .originmap, .prose .sb, .prose .faq, .prose .grid, .prose .compliance { max-width: none; }
.prose .figure img { max-height: 520px; object-fit: cover; }
.prose .gc { grid-template-columns: 150px minmax(0, 1fr); }
.prose .gc__cards { grid-template-columns: repeat(3, 1fr); }
.prose .fc__cards { grid-template-columns: repeat(4, 1fr); }
.prose .cc { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); column-gap: var(--sp-6); align-items: start; }
.prose .cc > .cc__chartwrap { grid-column: 1; grid-row: 1; }
.prose .cc > .cc__controls { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 1fr; margin: 0; }
.prose .cc > .matrix, .prose .cc > .ix__src { grid-column: 1 / -1; }
.prose .calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: var(--sp-6); align-items: start; }
.prose .calc > .calc__form { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; margin: 0; }
.prose .calc > .calc__out { grid-column: 2; grid-row: 1; }
.prose .calc > .calc__fine, .prose .calc > .calc__ref, .prose .calc > p { grid-column: 1 / -1; }
.prose .colours { display: grid; grid-template-columns: repeat(4, 1fr); }
.prose .timeline { display: grid; grid-template-columns: repeat(4, 1fr); }
.prose .originmap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.content-section + .content-section { margin-top: var(--sp-7); }
}
@media (min-width: 1440px) {
.container { max-width: 1360px; }
.withnav { grid-template-columns: 240px minmax(0, 1fr); }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose h2, .prose h3, .prose h4, .prose .callout, .prose .lede { max-width: 82ch; }
}
/* ==== Navigation: compact dropdowns, header that always fits ============= */
@media (min-width: 1024px) {
.masthead__in { gap: var(--sp-3); }
.nav { flex-shrink: 1; min-width: 0; gap: 0; }
.nav__link { font-size: .86rem; padding: var(--sp-2) 10px; white-space: nowrap; }
.nav__link[aria-current="page"]::after { left: 10px; right: 10px; }
.masthead .btn { white-space: nowrap; padding-inline: var(--sp-4); min-height: 42px; font-size: .88rem; }
.brand__mark { width: 32px; height: 32px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
.brand__sub { display: none; }
.nav__link { font-size: .82rem; padding-inline: 8px; }
.masthead .btn { padding-inline: var(--sp-3); font-size: .84rem; }
.js .themetoggle { width: 32px; height: 32px; }
}
/* ==== Dropdown menus, designed ========================================== */
@media (min-width: 1024px) {
.nav { gap: 2px; }
.nav__link[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.mega { top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 320px; width: max-content; max-width: 360px;
padding: 8px; display: block; border-radius: 14px; background: var(--surface); border: 1px solid var(--rule);
box-shadow: 0 28px 60px -28px rgba(21,30,24,.5), 0 6px 16px -8px rgba(21,30,24,.18); }
.mega[hidden] { display: none; }
.js .mega { animation: mega-in .18s var(--ease-out); }
@keyframes mega-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Invisible bridge over the 10 px gap: the pointer never "leaves" the item. */
.mega::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.mega::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
background: var(--surface); border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); transform: rotate(45deg); }
.mega__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
padding: 6px 12px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); }
.mega__head { display: block; grid-column: auto; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted); padding: 0; border: 0; }
.mega__all { font-family: var(--font-display); font-size: .8rem; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.mega__all::after { content: " \2192"; }
.mega__all:hover { text-decoration: underline; }
.mega__grid { display: grid; grid-template-columns: 1fr; gap: 2px; }
.mega--wide { max-width: 560px; }
.mega--wide .mega__grid { grid-template-columns: 1fr 1fr; column-gap: 6px; }
.mega__link { display: block; padding: 9px 12px 9px 26px; border-radius: 9px; position: relative; }
.mega__link::before { content: ""; position: absolute; left: 12px; top: 16px; width: 6px; height: 6px; border-radius: 50%;
background: var(--rule-strong); transition: background var(--motion-micro) var(--ease), transform var(--motion-micro) var(--ease); }
.mega__link:hover { background: var(--surface-2); }
.mega__link:hover::before, .mega__link[aria-current="page"]::before { background: var(--fcv-orange); transform: scale(1.3); }
.mega__t { display: block; font-family: var(--font-display); font-weight: 600; font-size: .88rem; line-height: 1.25; color: var(--ink); }
.mega__d { display: block; font-family: var(--font-body); font-size: .76rem; line-height: 1.35; color: var(--muted); margin-top: 2px; max-width: none; }
.mega__link[aria-current="page"] .mega__t { color: var(--accent); }
}
@media (min-width: 1024px) and (max-width: 1139px) {
.nav__link { font-size: .8rem; padding-inline: 7px; }
.masthead .btn { font-size: .82rem; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) { .js .mega { animation: none; } }
/* Narrow reading containers (FAQ blocks) must stay narrow on wide screens,
and answers use that full width. */
.container--narrow { max-width: 900px; }
.faq__a p { max-width: none; }
@media (min-width: 1080px) { .faq__q { padding-right: var(--sp-6); } }
/* ==== E-E-A-T byline on long-form pages ================================= */
.byline { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--fcv-leaf); border-radius: var(--r-md);
padding: var(--sp-4) var(--sp-5); margin: var(--sp-7) 0; font-family: var(--font-display); font-size: .86rem; color: var(--ink-2); display: grid; gap: 6px; }
.byline__k { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin-right: 6px; }
.byline ul { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.byline li { margin: 0; font-size: .8rem; }
.byline a { color: var(--ink); }
/* ==== Photo gallery, lightbox, product stock strips ===================== */
.gal__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.gal__chip { font-family: var(--font-display); font-weight: 600; font-size: .84rem; padding: 8px 14px; border-radius: 999px;
border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.gal__chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.gal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
@media (max-width: 639px) { .gal__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } }
.gal__item { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
box-shadow: var(--shadow-1); transition: transform var(--motion-standard) var(--ease-out), box-shadow var(--motion-standard) var(--ease); }
.gal__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.gal__item[hidden] { display: none; }
.gal__link { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.gal__link img, .gal__link picture { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.gal__item:hover .gal__link img { transform: scale(1.04); }
.gal__item figcaption { padding: var(--sp-3) var(--sp-4); font-family: var(--font-display); font-size: .84rem; color: var(--ink-2); line-height: 1.35; }
.gal__cat { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 3px; }
.gal__dlg { border: 0; padding: 0; background: rgba(10,18,12,.96); color: #fff; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; }
.gal__dlg::backdrop { background: rgba(10,18,12,.9); }
.gal__dlg figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-6) var(--sp-8); box-sizing: border-box; }
.gal__dlg img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: var(--r-sm); }
.gal__dlg figcaption { margin-top: var(--sp-4); font-family: var(--font-display); font-size: .95rem; color: #C9D6CC; text-align: center; }
.gal__close, .gal__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.08); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.gal__close { top: 16px; right: 16px; transform: none; font-size: 1.5rem; }
.gal__nav--prev { left: 12px; } .gal__nav--next { right: 12px; }
.gal__close:hover, .gal__nav:hover { background: rgba(255,255,255,.2); }
@media (max-width: 639px) { .gal__dlg figure { padding: var(--sp-7) var(--sp-3) var(--sp-5); } .gal__nav { width: 40px; height: 40px; } }
.stock { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin: var(--sp-4) 0; }
@media (min-width: 720px) { .stock { grid-template-columns: repeat(6, 1fr); } }
.stock__item { display: block; text-decoration: none; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rule); background: var(--surface); box-shadow: var(--shadow-1); }
.stock__item picture, .stock__item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.stock__item span { display: block; padding: 6px 8px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stock__item:hover { box-shadow: var(--shadow-2); }
/* Photo grids fill their rows: 3 columns for the 6-photo home preview, 4 on the gallery page. */
@media (min-width: 900px) { #home-gallery .gal__grid { grid-template-columns: repeat(3, 1fr); } #gallery .gal__grid { grid-template-columns: repeat(4, 1fr); } .stock { grid-template-columns: repeat(6, 1fr); } }
/* Compliance notice: paragraphs fill the box instead of stopping at 68 characters. */
.compliance p { max-width: none; }
@media (min-width: 900px) { .compliance { columns: 2; column-gap: var(--sp-7); } .compliance .compliance__h { column-span: all; } .compliance p { break-inside: avoid; } }
/* Curing-curve controls: never sticky; the two-column layout already keeps them beside the chart. */
.cc__controls { position: static !important; top: auto !important; }
/* ==== Photography, redesigned: editorial mosaic + overlay captions ======== */
#gallery .gal__grid, #home-gallery .gal__grid, .gal__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; grid-auto-flow: dense; gap: 12px; }
.gal__item { grid-column: span 2; grid-row: span 2; border: 0; border-radius: var(--r-lg); background: var(--fcv-forest-dp); position: relative; }
.gal__item:nth-child(8n+1) { grid-column: span 4; grid-row: span 4; }
.gal__item:nth-child(8n+7) { grid-row: span 4; }
.gal__item:nth-child(8n+8) { grid-column: span 4; grid-row: span 4; }
#home-gallery .gal__item:nth-child(1) { grid-column: span 4; grid-row: span 4; }
#home-gallery .gal__item:nth-child(n+2) { grid-column: span 2; grid-row: span 2; }
.gal__link { aspect-ratio: auto; height: 100%; display: block; }
.gal__link img { transition: transform .8s var(--ease-out), filter .8s var(--ease-out); }
.gal__item:hover .gal__link img { transform: scale(1.06); }
.gal__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-6) var(--sp-4) var(--sp-4); color: #fff;
background: linear-gradient(180deg, rgba(15,36,26,0) 0%, rgba(15,36,26,.82) 100%); font-size: .86rem; line-height: 1.35;
opacity: 0; transform: translateY(8px); transition: opacity var(--motion-standard) var(--ease), transform var(--motion-standard) var(--ease-out); pointer-events: none; }
.gal__item:hover figcaption, .gal__item:focus-within figcaption { opacity: 1; transform: none; }
.gal__cat { position: absolute; top: 12px; left: 12px; margin: 0; padding: 5px 10px; border-radius: 999px; background: rgba(15,36,26,.72); color: var(--fcv-lemon);
backdrop-filter: blur(6px); font-size: .58rem; z-index: 1; }
.gal__item:nth-child(8n+1) figcaption, .gal__item:nth-child(8n+8) figcaption, #home-gallery .gal__item:nth-child(1) figcaption { font-size: 1.02rem; padding-inline: var(--sp-5); }
@media (hover: none) { .gal__item figcaption { opacity: 1; transform: none; } }
@media (max-width: 719px) {
#gallery .gal__grid, #home-gallery .gal__grid, .gal__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; gap: 8px; }
.gal__item, .gal__item:nth-child(n), #home-gallery .gal__item:nth-child(n) { grid-column: span 1; grid-row: span 1; border-radius: var(--r-md); }
.gal__item:nth-child(5n+1), #home-gallery .gal__item:nth-child(1) { grid-column: span 2; }
.gal__item figcaption { font-size: .74rem; padding: var(--sp-5) var(--sp-3) var(--sp-3); }
}
/* Product pages: accordion filmstrip, the hovered photograph opens wide. */
.stock, .stock { display: flex; gap: 8px; height: 220px; margin: var(--sp-4) 0; }
.stock__item { flex: 1 1 0; min-width: 0; position: relative; border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--fcv-forest-dp);
transition: flex .5s var(--ease-out); }
.stock__item picture, .stock__item img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; transition: transform .8s var(--ease-out); }
.stock__item:hover { flex: 2.6 1 0; }
.stock__item:hover img { transform: scale(1.05); }
.stock__item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; color: var(--fcv-lemon); background: linear-gradient(180deg, rgba(15,36,26,0), rgba(15,36,26,.85)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 719px) { .stock { height: auto; flex-wrap: wrap; } .stock__item { flex: 1 1 30%; aspect-ratio: 1; } .stock__item:hover { flex: 1 1 30%; } }
/* ==== Motion: filmstrips, Ken Burns drift, scroll-in, light sweep ======= */
.pm { display: grid; gap: 14px; margin-inline: calc(50% - 50vw); padding-inline: 0; overflow: hidden; }
.pm__row { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pm__track { display: flex; gap: 14px; width: max-content; animation: pm-left 70s linear infinite; }
.pm__row--rev .pm__track { animation-name: pm-right; animation-duration: 84s; }
.pm__row:hover .pm__track { animation-play-state: paused; }
@keyframes pm-left { to { transform: translateX(-50%); } }
@keyframes pm-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.pm__tile { position: relative; flex: 0 0 auto; width: clamp(220px, 26vw, 360px); aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--fcv-forest-dp); text-decoration: none; color: #fff; box-shadow: var(--shadow-1); }
.pm__tile picture, .pm__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease-out); }
.pm__tile:hover img { transform: scale(1.08); }
.pm__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; font-family: var(--font-display); font-size: .8rem; line-height: 1.3; background: linear-gradient(180deg, rgba(15,36,26,0), rgba(15,36,26,.85)); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.pm__cap b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fcv-lemon); margin-bottom: 2px; }
.pm__tile:hover .pm__cap, .pm__tile:focus-visible .pm__cap { opacity: 1; transform: none; }
@media (hover: none) { .pm__cap { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pm__track { animation: none; } .pm__row { overflow-x: auto; mask-image: none; -webkit-mask-image: none; } }
/* Gallery tiles: slow cinematic drift, staggered scroll-in, light sweep. */
.gal__item .gal__link img { animation: kb 16s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.gal__item:nth-child(3n+1) .gal__link img { animation-duration: 18s; transform-origin: 30% 40%; }
.gal__item:nth-child(3n+2) .gal__link img { animation-duration: 21s; transform-origin: 70% 60%; animation-delay: -6s; }
.gal__item:nth-child(3n+3) .gal__link img { animation-duration: 19s; transform-origin: 50% 80%; animation-delay: -11s; }
@keyframes kb { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2%, 1.5%); } }
.gal__item:hover .gal__link img { animation-play-state: paused; }
.gal__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); transition: transform .9s var(--ease-out); pointer-events: none; z-index: 1; }
.gal__item:hover::after { transform: translateX(120%); }
@supports (animation-timeline: view()) {
.gal__item { animation: gal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
.gal__item:nth-child(2n) { animation-range: entry 5% entry 45%; }
.gal__item:nth-child(3n) { animation-range: entry 10% entry 50%; }
@keyframes gal-in { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .gal__item .gal__link img, .gal__item { animation: none !important; } .gal__item::after { display: none; } }
/* Homepage hero: let the barn photograph show through. */
.hero__media img { opacity: .9; }
.hero__media::after { background: linear-gradient(90deg, rgba(15,36,26,.92) 0%, rgba(15,36,26,.62) 42%, rgba(15,36,26,.12) 75%, rgba(15,36,26,.05) 100%), linear-gradient(180deg, rgba(15,36,26,.2) 0%, rgba(15,36,26,0) 35%, rgba(15,36,26,.8) 100%); }
/* ==== Catalogue, designed ============================================== */
.cat__stats { background: var(--fcv-forest-dp); color: #fff; }
.cat__statsin { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.08); }
@media (min-width: 900px) { .cat__statsin { grid-template-columns: repeat(5, 1fr); } }
.cat__stat { background: var(--fcv-forest-dp); padding: var(--sp-5) var(--sp-5); position: relative; overflow: hidden; }
.cat__stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.cat__stat b { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.cat__stat b small { font-size: .8rem; font-weight: 500; color: #9FB5A6; margin-left: 6px; letter-spacing: 0; }
.cat__stat span { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #C9D6CC; }
.cat__tools { margin: var(--sp-5) 0 var(--sp-6); }
.cat__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cat__chip { font-family: var(--font-display); font-weight: 600; font-size: .84rem; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.cat__chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cat__search { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.cat__search input { flex: 1 1 240px; font: inherit; padding: 10px 14px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface); color: var(--ink); }
.cat__family { margin: 0 0 var(--sp-8); }
.cat__family[hidden] { display: none; }
.cat__fh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); padding: 0 0 var(--sp-4) var(--sp-4); border-left: 6px solid var(--fam); margin-bottom: var(--sp-5); }
.cat__fh h2 { font-size: var(--step-2); }
.cat__fd { margin: 6px 0 0; color: var(--ink-2); max-width: 60ch; }
.cat__fprice { text-align: right; }
.cat__fprice b { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.cat__fprice small { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.cat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.cat__card { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--sp-3); overflow: hidden;
transition: transform var(--motion-standard) var(--ease-out), box-shadow var(--motion-standard) var(--ease); }
.cat__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--fam); }
.cat__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.cat__card[hidden] { display: none; }
.cat__ch { display: flex; justify-content: space-between; align-items: center; }
.cat__no { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; color: var(--muted); }
.cat__grade { font-family: var(--font-mono); font-weight: 600; font-size: .92rem; background: var(--fam); color: var(--famink); padding: 4px 10px; border-radius: 8px; }
.cat__name { font-size: 1.2rem; margin: 0; }
.cat__meta { margin: 0; font-family: var(--font-display); font-size: .8rem; color: var(--muted); }
.cat__gauges { display: grid; gap: 8px; margin-top: 4px; }
.cat__gauge { display: grid; grid-template-columns: 74px 1fr 58px; align-items: center; gap: 10px; font-family: var(--font-display); font-size: .82rem; }
.cat__gk { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cat__gbar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.cat__gbar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--fcv-lemon), var(--fcv-orange), var(--fcv-mahogany)); transition: width 1.1s var(--ease-out); }
.cat__gbar--av i { background: linear-gradient(90deg, var(--fcv-leaf), var(--fcv-forest)); }
.js .is-in .cat__gbar i, .js .cat__card.is-in .cat__gbar i { width: var(--w); }
.cat__gauge b { text-align: right; }
.cat__cf { margin-top: auto; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; border-top: 1px solid var(--rule); padding-top: var(--sp-3); }
.cat__pv { display: flex; flex-direction: column; }
.cat__pv > span:first-child { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.cat__pv--req > span:first-child { font-size: 1.05rem; color: var(--ink-2); }
.cat__pv small { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.cat__status { grid-column: 1 / -1; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fcv-ok); }
.cat__actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.cat__actions .btn { min-height: 36px; padding: 6px 14px; font-size: .82rem; }
.cat__wa { font-family: var(--font-display); font-size: .8rem; color: var(--accent); }
.cat__table tbody tr.is-hidden { display: none; }
.cat__table th[scope="row"] { min-width: 220px; }
.cat__table .cat__grade { font-size: .74rem; padding: 2px 8px; margin-left: 6px; background: var(--fcv-warn-bg); color: var(--accent-2); }
.cat__basis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--sp-6); }
@media (min-width: 900px) { .cat__basis { grid-template-columns: repeat(3, 1fr); } }
.cat__fact { background: var(--surface); padding: var(--sp-4) var(--sp-5); font-family: var(--font-display); font-size: .86rem; color: var(--ink-2); line-height: 1.4; }
.cat__k { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 4px; }
@supports (animation-timeline: view()) {
.cat__card { animation: cat-in linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
@keyframes cat-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .cat__card { animation: none !important; } .cat__gbar i { transition: none; } }
@media (max-width: 719px) { .cat__grid { grid-template-columns: 1fr; } .cat__fh { padding-left: var(--sp-3); } .cat__fprice { text-align: left; } }
@media print { .cat__search, .cat__chips, .cat__families, .enquire, .themetoggle, .foot, .crumbs, .hero__media, .cat__stats { display: none !important; } .cat__table { display: block !important; } .hero { min-height: 0; } .matrix__scroll { overflow: visible; border: 0; } }
.pband { border-top: 1px solid var(--rule); }
.pband .pm { margin-top: var(--sp-2); }
/* ==== Living hero: breathing photo, light shaft, giant letter, stalk explorer ==== */
.hero--live { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%); padding-bottom: 2vw; }
.hero--live .hero__media img { animation: hero-kb 30s ease-in-out infinite alternate; transform-origin: 70% 40%; }
@keyframes hero-kb { from { transform: scale(1.04); } to { transform: scale(1.16) translate(-2%, -1%); } }
.hero--live .hero__media::before { content: ""; position: absolute; inset: -20% -40%; background: linear-gradient(100deg, transparent 42%, rgba(255,226,140,.22) 50%, transparent 58%); animation: hero-sweep 11s ease-in-out infinite; pointer-events: none; z-index: 1; }
@keyframes hero-sweep { 0% { transform: translateX(-45%); } 55% { transform: translateX(45%); } 100% { transform: translateX(45%); } }
.hero--live .hero__media::after { z-index: 2; }
.hero--live .hero__in { align-items: center; }
.hero--live h1 { text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hxw { position: relative; }
.hx { position: relative; background: rgba(15,36,26,.55); backdrop-filter: blur(16px); border: 1px solid rgba(233,239,231,.16); border-radius: var(--r-xl); padding: var(--sp-5); color: #fff; box-shadow: var(--shadow-2); }
.hx__h { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fcv-lemon); margin: 0 0 var(--sp-3); }
.hx__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.hx__chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); cursor: pointer; font-family: var(--font-display); font-size: .8rem; transition: background var(--motion-micro), transform var(--motion-micro), border-color var(--motion-micro); }
.hx__chip:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.hx__code { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); color: #151E18; display: inline-grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: .78rem; }
.hx__nm { color: #C9D6CC; }
.hx__panel { display: none; position: relative; }
.hx__pos { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #9FB5A6; margin: 0 0 6px; }
.hx__name { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); color: #fff; margin: 0 0 var(--sp-3); }
.hx__specs { margin: 0; display: grid; gap: 8px; }
.hx__specs div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 8px; font-family: var(--font-display); font-size: .86rem; }
.hx__specs dt { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #9FB5A6; padding-top: 3px; }
.hx__specs dd { margin: 0; color: #fff; }
.hx__cta { display: inline-block; margin-top: var(--sp-4); font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--fcv-lemon); text-decoration: none; }
.hx__cta:hover { text-decoration: underline; }
.hx__foot { margin: var(--sp-4) 0 0; font-family: var(--font-display); font-size: .74rem; color: #9FB5A6; }
/* giant outlined letter beside the card, one per panel */
.hx__panel::before { content: attr(data-pos); position: absolute; right: 100%; top: 50%; transform: translate(-4vw, -50%); font-family: var(--font-display); font-weight: 700; font-size: clamp(14rem, 30vw, 28rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--sw); opacity: .3; pointer-events: none; letter-spacing: -.04em; animation: hx-in .6s var(--ease-out) both; }
@keyframes hx-in { from { opacity: 0; transform: translate(-4vw, -46%) scale(.94); } to { opacity: .3; transform: translate(-4vw, -50%) scale(1); } }
.hx__panel > * { animation: hx-up .45s var(--ease-out) both; }
@keyframes hx-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#hp-P:checked ~ .hx .hx__panel[data-pos="P"], #hp-L:checked ~ .hx .hx__panel[data-pos="L"], #hp-C:checked ~ .hx .hx__panel[data-pos="C"],
#hp-X:checked ~ .hx .hx__panel[data-pos="X"], #hp-F:checked ~ .hx .hx__panel[data-pos="F"], #hp-T:checked ~ .hx .hx__panel[data-pos="T"] { display: block; }
#hp-P:checked ~ .hx label[for="hp-P"], #hp-L:checked ~ .hx label[for="hp-L"], #hp-C:checked ~ .hx label[for="hp-C"],
#hp-X:checked ~ .hx label[for="hp-X"], #hp-F:checked ~ .hx label[for="hp-F"], #hp-T:checked ~ .hx label[for="hp-T"] { background: var(--sw); border-color: var(--sw); }
#hp-P:checked ~ .hx label[for="hp-P"] .hx__nm, #hp-L:checked ~ .hx label[for="hp-L"] .hx__nm, #hp-C:checked ~ .hx label[for="hp-C"] .hx__nm,
#hp-X:checked ~ .hx label[for="hp-X"] .hx__nm, #hp-F:checked ~ .hx label[for="hp-F"] .hx__nm, #hp-T:checked ~ .hx label[for="hp-T"] .hx__nm { color: #151E18; }
.hx__in:focus-visible ~ .hx { outline: 2px solid var(--fcv-lemon); outline-offset: 4px; }
@media (max-width: 899px) { .hx__panel::before { display: none; } .hx { margin-top: var(--sp-5); padding: var(--sp-4); } .hx__nm { display: none; } .hx__chip { padding: 4px; } .hero--live { clip-path: none; padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .hero--live .hero__media img, .hero--live .hero__media::before, .hx__panel::before, .hx__panel > * { animation: none !important; } }
/* Keep the photo, sweep and gradient beneath the headline and card. */
.hero--live .hero__media { z-index: 0; isolation: isolate; }
.hero--live .hero__in { z-index: 1; }
.hero--live .hero__media img { opacity: .95; }
/* Giant stalk letter: bolder stroke, soft fill glow, higher presence. */
.hx__panel::before { -webkit-text-stroke: 4px var(--sw); opacity: .55; color: color-mix(in srgb, var(--sw) 18%, transparent); filter: drop-shadow(0 0 28px color-mix(in srgb, var(--sw) 55%, transparent)); font-size: clamp(16rem, 34vw, 32rem); }
@keyframes hx-in { from { opacity: 0; transform: translate(-4vw, -46%) scale(.94); } to { opacity: .55; transform: translate(-4vw, -50%) scale(1); } }
/* ==== Google reviews band ================================================ */
.rev { background: var(--fcv-forest-dp); color: #fff; position: relative; overflow: hidden; }
.rev::before { content: "\201C"; position: absolute; left: -2vw; top: -6vw; font-family: var(--font-body); font-size: 34vw; line-height: 1; color: var(--fcv-orange); opacity: .08; pointer-events: none; }
.rev .eyebrow { color: var(--fcv-lemon); }
.rev h2 { color: #fff; }
.rev__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); margin-bottom: var(--sp-6); position: relative; }
.rev__g { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 999px; background: #fff; color: #151E18; text-decoration: none; font-family: var(--font-display); box-shadow: var(--shadow-2); }
.rev__g b { display: block; font-size: .9rem; } .rev__g small { display: block; font-size: .7rem; color: #5B6C60; }
.rev__grid { display: grid; gap: var(--sp-4); position: relative; }
@media (min-width: 900px) { .rev__grid { grid-template-columns: repeat(3, 1fr); } }
.rev__card { margin: 0; position: relative; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5) var(--sp-5); backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: var(--sp-4); transition: transform var(--motion-standard) var(--ease-out), background var(--motion-standard); }
.rev__card::before { content: ""; position: absolute; left: var(--sp-5); top: 0; width: 44px; height: 4px; border-radius: 0 0 4px 4px; background: var(--sw); }
.rev__card:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); }
.rev__q { margin: 0; padding: 0; border: 0; background: none; font-style: normal; }
.rev__q p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: #F2F5F0; max-width: none; }
.rev__who { display: flex; align-items: center; gap: 12px; margin-top: auto; font-family: var(--font-display); }
.rev__av { width: 42px; height: 42px; border-radius: 50%; background: var(--sw); color: #151E18; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.rev__who b { display: block; font-size: .92rem; color: #fff; } .rev__who small { display: block; font-size: .74rem; color: #9FB5A6; margin-top: 2px; }
@media (max-width: 899px) { .rev__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--sp-3); margin-inline: calc(-1 * var(--sp-4)); padding: 4px var(--sp-4) var(--sp-3); scrollbar-width: none; } .rev__card { flex: 0 0 84vw; max-width: 360px; scroll-snap-align: start; } }
.faq__cta { margin: 10px 0 0; font-family: var(--font-display); font-weight: 600; font-size: .92rem; }
.faq__cta a { color: var(--accent); text-decoration: none; }
.faq__cta a::after { content: " 92"; }
.faq__cta a:hover { text-decoration: underline; }
/* Ghost buttons on dark backgrounds: never a pale hover behind white text. */
.hero .btn--ghost, .sb__pitch .btn--ghost, .sb__result .btn--ghost, .enquire .btn--ghost, .section--ink .btn--ghost, .section--photo .btn--ghost, .aside__card .btn--ghost, .rev .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.hero .btn--ghost:hover, .sb__pitch .btn--ghost:hover, .sb__result .btn--ghost:hover, .enquire .btn--ghost:hover, .section--ink .btn--ghost:hover, .section--photo .btn--ghost:hover, .aside__card .btn--ghost:hover, .rev .btn--ghost:hover { background: rgba(255,255,255,.18); color: #fff; border-color: #fff; }
.hero .btn--ghost:focus-visible, .sb__pitch .btn--ghost:focus-visible { outline-color: var(--fcv-lemon); }
.hx__panel::before { font-size: clamp(11rem, 22vw, 20rem); }
.hx__panel::before { transform: translate(-9vw, -50%); }
@keyframes hx-in { from { opacity: 0; transform: translate(-9vw, -46%) scale(.94); } to { opacity: .55; transform: translate(-9vw, -50%) scale(1); } }
/* Giant letter as a watermark inside the glass card, clipped to its shape. */
.hx { overflow: hidden; }
.hx__panel { position: static; }
.hx__panel::before { right: -4%; left: auto; top: 6%; transform: none; font-size: clamp(14rem, 22vw, 22rem); opacity: .16; -webkit-text-stroke: 3px var(--sw); color: color-mix(in srgb, var(--sw) 10%, transparent); filter: none; z-index: 0; }
.hx__panels, .hx__h, .hx__chips, .hx__foot { position: relative; z-index: 1; }
@keyframes hx-in { from { opacity: 0; transform: translateX(20px); } to { opacity: .16; transform: none; } }
/* Back to the standalone letter, centred in the gap between headline and card. */
.hx { overflow: visible; }
.hx__panel { position: relative; }
.hx__panel::before { left: auto; right: 100%; top: 50%; transform: translate(-6.5vw, -50%); font-size: clamp(13rem, 24vw, 22rem); opacity: .55; -webkit-text-stroke: 4px var(--sw); color: color-mix(in srgb, var(--sw) 18%, transparent); filter: drop-shadow(0 0 28px color-mix(in srgb, var(--sw) 55%, transparent)); z-index: 0; }
@keyframes hx-in { from { opacity: 0; transform: translate(-6.5vw, -46%) scale(.94); } to { opacity: .55; transform: translate(-6.5vw, -50%) scale(1); } }
/* ==== Hero: letter inside the card, floating leaf medallion in the gap ==== */
.hx__panel::before { left: auto; right: -8px; top: auto; bottom: 34px; transform: none; font-size: clamp(7rem, 9vw, 9rem); opacity: .14; -webkit-text-stroke: 3px var(--sw); color: color-mix(in srgb, var(--sw) 12%, transparent); filter: none; z-index: 0; animation: hx-wm .6s var(--ease-out) both; }
@keyframes hx-wm { from { opacity: 0; transform: translateY(10px); } to { opacity: .14; transform: none; } }
.hx__panel > *:not(.hx__photo) { position: relative; z-index: 1; }
.hx__photo { position: absolute; right: 100%; top: 50%; margin: 0; width: clamp(200px, 21vw, 320px); aspect-ratio: 1; transform: translate(-5vw, -50%); border-radius: 50%; overflow: hidden; border: 3px solid var(--sw); box-shadow: 0 0 0 10px color-mix(in srgb, var(--sw) 18%, transparent), 0 30px 60px -20px rgba(0,0,0,.6); animation: hx-float 6s ease-in-out infinite, hx-pop .6s var(--ease-out) both; z-index: 2; }
.hx__photo picture, .hx__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes hx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes hx-pop { from { opacity: 0; transform: translate(-5vw, -50%) scale(.85); } to { opacity: 1; transform: translate(-5vw, -50%) scale(1); } }
@media (max-width: 899px) { .hx__photo { display: none; } .hx__panel::before { display: block; font-size: 6rem; } }
@media (prefers-reduced-motion: reduce) { .hx__photo { animation: none; } }
/* Medallion holds the lit plant diagram. */
.hx__photo { background: radial-gradient(circle at 50% 40%, #1E3A2A, #0F241A 70%); padding: 6%; }
.hx__photo svg { width: 100%; height: 100%; display: block; }
/* ==== Photo filmstrips redesigned: 35 mm contact sheet on a light table ==== */
.pm { position: relative; isolation: isolate; gap: 26px; padding: 34px 0 30px; overflow: hidden; background:
radial-gradient(80% 60% at 50% 0%, rgba(245,214,107,.09), transparent 60%),
linear-gradient(180deg, #141a17, #0d1411); }
.pm::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 28px 28px; -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent); }
.pm::after { content: ""; position: absolute; inset: -20% -40%; z-index: 0; pointer-events: none;
background: linear-gradient(100deg, transparent 44%, rgba(255,214,90,.10) 50%, transparent 56%); animation: pm-leak 14s ease-in-out infinite; }
@keyframes pm-leak { 0% { transform: translateX(-45%); } 60%, 100% { transform: translateX(45%); } }
.pm__row { position: relative; z-index: 1; padding: 0; }
.pm__track { position: relative; gap: 18px; padding: 24px 18px 30px; counter-reset: frame; border-radius: 3px; background:
repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.62) 14px 24px, transparent 24px 40px) left 0 top 7px / 100% 9px no-repeat,
repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.62) 14px 24px, transparent 24px 40px) left 0 bottom 7px / 100% 9px no-repeat,
#050807; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.pm__tile { width: clamp(200px, 22vw, 320px); aspect-ratio: 3 / 2; border-radius: 3px; overflow: visible; background: none; box-shadow: none; transition: transform .5s var(--ease-out), filter .5s; }
.pm__tile picture { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: #0a0d0b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: box-shadow .3s; }
.pm__tile img { filter: saturate(1.06) contrast(1.03); }
.pm__tile::before { content: counter(frame) "A"; counter-increment: frame; position: absolute; left: 2px; bottom: -21px; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; color: #E8A33C; }
.pm__tile::after { content: "FCV \00B7 REAL STOCK"; position: absolute; right: 2px; bottom: -21px; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em; color: rgba(232,163,60,.55); }
.pm__tile:hover, .pm__tile:focus-visible { transform: scale(1.07) rotate(-.6deg); z-index: 3; filter: drop-shadow(0 22px 40px rgba(0,0,0,.7)); }
.pm__tile:hover picture, .pm__tile:focus-visible picture { box-shadow: 0 0 0 2px var(--fcv-lemon); }
.pm__cap { border-radius: 0 0 3px 3px; }
@media (max-width: 719px) { .pm { padding: 22px 0; gap: 18px; } .pm__track { padding: 20px 12px 26px; gap: 12px; } .pm__tile { width: clamp(180px, 58vw, 260px); } }
@media (prefers-reduced-motion: reduce) { .pm::after { animation: none; } .pm__tile:hover { transform: none; } }
/* ==== Contact CTAs: WhatsApp first, floating button, closing band ==== */
.wa-ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: 0 0 auto; }
.btn--wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn--wa.btn--primary, .btn--wa.btn--light { background: #1EBE5D; border-color: #1EBE5D; color: #062b16 !important; }
.btn--wa.btn--primary:hover, .btn--wa.btn--light:hover { background: #25D366; border-color: #25D366; color: #062b16 !important; }
.wafab { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px 0 14px; border-radius: 999px; background: #1EBE5D; color: #062b16; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: .92rem; box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.25) inset; transition: transform .25s var(--ease-out), background .2s; }
.wafab .wa-ico { width: 28px; height: 28px; }
.wafab:hover { transform: translateY(-2px) scale(1.03); background: #25D366; }
.wafab__ring { position: absolute; inset: 0; border-radius: inherit; border: 2px solid #25D366; animation: wafab-ring 2.4s ease-out infinite; pointer-events: none; }
@keyframes wafab-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.35); opacity: 0; } }
.wafab__t { white-space: nowrap; }
@media (max-width: 899px) {
.wafab { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 56px; padding: 0; justify-content: center; }
.wafab__t { display: none; }
.enquire .btn { flex: 1; }
}
.ctab { position: relative; background: var(--fcv-forest-dp, #0f241a); color: #fff; padding: var(--sp-8) 0; isolation: isolate; overflow: hidden; }
.ctab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 0% 0%, rgba(30,190,93,.18), transparent 60%), radial-gradient(50% 50% at 100% 100%, rgba(245,214,107,.14), transparent 60%); }
.ctab__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.1fr); gap: var(--sp-7); align-items: center; }
.ctab h2 { color: #fff; margin: 0 0 var(--sp-3); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.ctab .eyebrow { color: var(--fcv-lemon, #F5D66B); }
.ctab__lead p:last-child { color: #C9D6CC; margin: 0; max-width: 52ch; }
.ctab__opts { display: grid; gap: 10px; }
.ctab__opt { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #fff; text-decoration: none; transition: transform .25s var(--ease-out), background .2s, border-color .2s; }
.ctab__opt .wa-ico { width: 30px; height: 30px; }
.ctab__opt b { display: block; font-family: var(--font-display); font-size: 1.02rem; }
.ctab__opt small { display: block; color: #C9D6CC; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.ctab__opt:hover { transform: translateX(4px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }
.ctab__opt--wa { background: #1EBE5D; border-color: #1EBE5D; color: #062b16; }
.ctab__opt--wa small { color: #0b4a25; }
.ctab__opt--wa:hover { background: #25D366; border-color: #25D366; }
@media (max-width: 899px) { .ctab { padding: var(--sp-6) 0; } .ctab__in { grid-template-columns: 1fr; gap: var(--sp-5); } }
@media print { .wafab, .ctab { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .wafab__ring { animation: none; } }
/* ==== No sideways scroll, ever: full-bleed bands are measured in viewport
units (100vw), which on Windows includes the vertical scrollbar, so they
overshoot the document by ~17px. Clip the overflow at the root without
turning html/body into scroll containers (that would break sticky). ==== */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
.pm, .bleed { max-width: 100vw; }
/* ==== Reviews band v2: photos, Google badge, summary tile ==== */
.rev__grid--sum { gap: var(--sp-4); }
@media (min-width: 1100px) { .rev__grid--sum { grid-template-columns: minmax(220px, .75fr) repeat(3, 1fr); } }
@media (min-width: 900px) and (max-width: 1099px) { .rev__grid--sum { grid-template-columns: repeat(3, 1fr); } .rev__sum { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; } }
.rev__sum { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: #fff; color: #151E18; box-shadow: var(--shadow-2); }
.rev__sumg { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.rev__sumg svg { width: 22px; height: 22px; }
.rev__sumn { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.rev__sumn b { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.rev__sumn span { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #5B6C60; }
.rev__sumt { margin: 0; font-size: .84rem; line-height: 1.5; color: #4d5a52; }
.rev__sum .btn--light { background: #151E18; color: #fff; border-color: #151E18; text-align: center; }
.rev__sum .btn--light:hover { background: var(--fcv-forest); border-color: var(--fcv-forest); }
.rev__card { display: flex; flex-direction: column; gap: var(--sp-3); }
.rev__who { display: flex; align-items: center; gap: 12px; margin: 0; order: -1; }
.rev__av { width: 56px; height: 56px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--sw); color: #151E18; font-family: var(--font-display); font-weight: 700; font-size: 1rem; flex: 0 0 auto; }
.rev__av--photo { display: block; overflow: hidden; box-shadow: 0 0 0 3px var(--sw); }
.rev__av--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rev__id b { display: block; font-family: var(--font-display); font-size: 1rem; color: #fff; }
.rev__id small { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: #C9D6CC; margin-top: 3px; }
.rev__id small svg { width: 14px; height: 14px; }
.rev__q { position: relative; padding-left: 18px; }
.rev__q::before { content: "\201C"; position: absolute; left: -4px; top: -10px; font-family: var(--font-body); font-size: 2.6rem; line-height: 1; color: var(--sw); opacity: .9; }
.rev__more { margin-top: auto; align-self: flex-start; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fcv-lemon); text-decoration: none; border-bottom: 1px solid rgba(245,214,107,.4); }
.rev__more:hover { border-bottom-color: currentColor; }
/* ==== Social + Google profile links ==== */
.social, .ctab__social { display: flex; flex-wrap: wrap; gap: 8px; }
.social__a, .ctab__social__a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: #fff !important; text-decoration: none !important; font-family: var(--font-display); font-size: .82rem; transition: background .2s, border-color .2s, transform .2s; }
.social__a svg, .ctab__social__a svg { width: 18px; height: 18px; }
.social__a:hover, .ctab__social__a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); transform: translateY(-1px); }
.social__a--facebook:hover { background: #1877F2; border-color: #1877F2; }
.social__a--instagram:hover { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); border-color: transparent; }
.social__a--google:hover { background: #4285F4; border-color: #4285F4; }
.ctab__social { grid-column: 1 / -1; margin-top: 4px; }
.ctab__social__a { background: rgba(255,255,255,.04); }
.rev__stars { color: #FBBC05; letter-spacing: 1px; font-size: .95rem; line-height: 1; display: inline-block; }
.rev__id .rev__stars { display: block; margin-top: 4px; }
.rev__sumn span .rev__stars { font-size: 1.1rem; color: #FBBC05; }
.rev__q p[dir="rtl"] { text-align: right; font-size: 1.1rem; }
.rev__tr { margin: 10px 0 0 !important; font-size: .9rem !important; color: #C9D6CC !important; }
.rev__tr small { display: block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: #9FB5A6; margin-bottom: 2px; }
.rev__reply { margin: 0; padding: 10px 12px; border-left: 3px solid var(--sw); background: rgba(255,255,255,.05); border-radius: 0 8px 8px 0; font-size: .84rem; color: #E9EFE7; }
.rev__reply b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fcv-lemon); margin-bottom: 3px; }
@media (min-width: 1100px) { .rev__grid--sum { grid-template-columns: minmax(200px, .7fr) repeat(2, 1fr); } .rev__card:nth-of-type(n+3) { grid-column: auto; } }
/* ==== Brand logo (image) ==== */
.brand__logo { display: block; height: 62px; width: auto; max-width: min(240px, 52vw); object-fit: contain; }
.masthead .brand { padding: 4px 0; }
.foot__logo { display: block; width: 230px; max-width: 70%; height: auto; }
@media (max-width: 899px) { .brand__logo { height: 48px; } }
@media (max-width: 479px) { .brand__logo { height: 42px; } }
/* ---- Offscreen sections ---------------------------------------------------
The homepage carries close to 2,900 elements, and style + layout ran for
every one of them before first paint — 2.8 s of main-thread work on a
throttled phone, which is most of the page's blocking time. content-
visibility lets the browser skip layout, paint and style for a section
until it scrolls near, and `contain-intrinsic-size: auto ` makes it
remember the height it last measured, so the scrollbar stays honest and
CLS stays at zero. The first two sections are excluded: the hero must
never be deferred, because it holds the LCP element. Anything that scripts
measure on load has to tolerate a zero size first (see videos.js).
The footer is deliberately not in this list. It is small enough that
skipping it saves nothing, and a skipped element reports no resolved
background, which made contrast checkers read its pale text against the
page ground instead of the dark green it actually sits on. */
main > section:nth-of-type(n+3) {
content-visibility: auto;
contain-intrinsic-size: auto 720px;
}
/* Find-in-page and #anchor navigation still reveal skipped content, but a
print run has no viewport to scroll, so nothing may be hidden there. */
@media print {
main > section:nth-of-type(n+3) { content-visibility: visible; }
}
/* ---- Language switcher ----------------------------------------------------
Sits in the topbar beside the WhatsApp number. Each link is a 24px tap
target in its own right, and the current language is a filled chip rather
than only an aria-current attribute, so the state is visible as well as
announced. */
.langsw { display: inline-flex; gap: 2px; margin-left: var(--sp-3); }
.langsw a {
display: inline-flex; align-items: center; justify-content: center;
min-width: 30px; min-height: 24px; padding: 2px 7px; border-radius: var(--r-sm, 5px);
font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
text-decoration: none; color: inherit; opacity: .72;
}
.langsw a:hover, .langsw a:focus-visible { opacity: 1; background: rgba(255, 255, 255, .12); }
.langsw a[aria-current="true"] { opacity: 1; background: rgba(255, 255, 255, .18); font-weight: 600; }
@media (max-width: 720px) { .langsw { margin-left: auto; } }