/* ==== _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; }
.ribbon__seg i { font-style: normal; font-size: .66rem; opacity: .85; }
.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; }
.gc__pos { font-family: var(--font-display); font-size: .78rem; opacity: .85; }
.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; }
.topbar__in > span:last-child { flex-shrink: 0; }
@media (max-width: 639px) { .topbar__in > span:last-child { 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; } }