/* =============================================================================
   V10: the inner-page kit. Stacked cards, kinetic type bands, scroll-lit words,
   pinned horizontal tracks and lit dark sections. Markup opts in; main.js
   drives the motion (initStack, initKinetic, initScrub, initHScroll).
   ========================================================================== */

/* ---------- Kinetic band: two rows of display type sliding in opposite directions ---------- */
.kin { position: relative; z-index: 2; display: grid; gap: clamp(4px, .8vw, 12px); padding: clamp(48px, 7vw, 112px) 0; overflow: hidden; background: var(--paper); }
.kin__row { display: flex; align-items: center; gap: .42em; width: max-content; white-space: nowrap; font-family: var(--fd); font-size: clamp(3rem, 1.4rem + 6.2vw, 8.8rem); line-height: 1; letter-spacing: -.035em; color: var(--ink); will-change: transform; }
.kin__row em { font-style: italic; color: var(--green); }
.kin__row--alt { color: transparent; -webkit-text-stroke: 1.2px rgba(22, 32, 26, .42); }
.kin__row--alt em { color: transparent; -webkit-text-stroke-color: var(--apricot-d); }
.kin__dot { flex: none; display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: var(--apricot); box-shadow: 0 0 0 .08em rgba(255, 179, 71, .25); }
.kin--dark { background: var(--night); }
.kin--dark .kin__row { color: var(--on-night); }
.kin--dark .kin__row em { color: var(--apricot); }
.kin--dark .kin__row--alt { color: transparent; -webkit-text-stroke-color: rgba(241, 237, 228, .35); }

/* ---------- Stacked cards: each pins under the header; the next slides over it ---------- */
.stk { display: grid; gap: 6vh; margin: 0; padding: 0 0 4vh; list-style: none; }
.stk__i { position: sticky; top: calc(var(--hdr) + 18px + var(--si, 0) * 16px); }
.stk__card {
  --dim: 0;
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px);
  min-height: min(76vh, 700px); padding: clamp(26px, 3.6vw, 60px);
  border-radius: 30px; overflow: hidden; transform-origin: 50% 0;
  background: var(--night); color: var(--on-night);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .06), 0 -24px 60px -36px rgba(15, 23, 18, .5), 0 40px 80px -50px rgba(15, 23, 18, .5);
}
.stk__card::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #0B110D; opacity: calc(var(--dim) * .4); pointer-events: none; }
.stk__i--1 .stk__card { background: var(--green); }
.stk__i--2 .stk__card { background: var(--apricot); color: var(--apricot-ink); }
.stk__i--3 .stk__card { background: var(--bone); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule), 0 -24px 60px -36px rgba(15, 23, 18, .35); }
.stk__txt { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-width: 0; }
.stk__q, .stk__n { color: inherit; }
.stk__n { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; opacity: .7; }
.stk__n span { font-family: var(--fd); font-size: 2.6rem; font-weight: 400; letter-spacing: -.02em; opacity: 1; margin-right: 4px; }
.stk__q { margin: 0; max-width: 17ch; font-family: var(--fd); font-weight: 400; font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.7rem); line-height: 1.03; letter-spacing: -.025em; text-wrap: balance; }
.stk__p { margin: 0; max-width: 46ch; font-size: var(--t-body); line-height: 1.6; color: inherit; opacity: .84; }
.stk__fig { position: relative; min-height: 320px; margin: 0; border-radius: 20px; overflow: hidden; isolation: isolate; }
.stk__fig picture, .stk__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stk__fig img { transform: scale(1.06); transition: transform 1.6s var(--e-out); }
.stk__card:hover .stk__fig img { transform: scale(1); }
.stk__fig::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(10, 16, 12, .55)); }
.stk__stat { position: absolute; left: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px); z-index: 2; display: grid; gap: 4px; padding: 14px 18px 12px; border-radius: 16px; color: var(--bone); background: rgba(15, 23, 18, .42); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.stk__stat b { font-family: var(--fd); font-weight: 400; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.8rem); line-height: .9; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stk__stat small { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
@media (max-width: 899.98px) {
  .stk__card { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 22px; }
  .stk__card { gap: 18px; padding: 22px; }
  .stk__txt { gap: 14px; }
  .stk__n span { font-size: 1.9rem; }
  .stk__q { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); }
  .stk__p { font-size: 1rem; line-height: 1.5; }
  .stk__fig { min-height: 0; aspect-ratio: 16 / 9; border-radius: 14px; }
  .stk__stat { padding: 10px 14px 8px; }
  .stk__stat b { font-size: 2.2rem; }
  .stk__i { top: calc(var(--hdr) + 10px + var(--si, 0) * 10px); }
}

/* ---------- Scroll-lit words ---------- */
.scrub-w { will-change: opacity; }

/* ---------- Lit dark sections: a warm light under the pointer, a fine grain ---------- */
.atmo { position: relative; isolation: isolate; }
.atmo::before, .atmo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.atmo::before { background:
  radial-gradient(680px circle at var(--gx, 78%) var(--gy, 22%), rgba(255, 179, 71, .14), transparent 62%),
  radial-gradient(900px circle at 8% 108%, rgba(136, 201, 153, .13), transparent 60%); }
.atmo::after { opacity: .09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Horizontal track: pins on desktop, swipes on phones ---------- */
.hs__track { display: flex; gap: clamp(16px, 1.8vw, 28px); }
.hs__bar { position: relative; height: 2px; margin-top: clamp(28px, 3vw, 44px); background: var(--rule); border-radius: 2px; overflow: hidden; }
.hs__bar::after { content: ""; position: absolute; inset: 0; background: var(--apricot); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.on-dark .hs__bar { background: var(--rule-n); }
[data-hs].is-hs { height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
@media (max-width: 999.98px) {
  .hs__track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; }
  .hs__track::-webkit-scrollbar { display: none; }
  .hs__track > * { scroll-snap-align: start; }
  .hs__bar { display: none; }
}
/* No pin without motion, so every card has to fit in the normal flow. */
@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
  .hs__track { flex-wrap: wrap; }
  .hs__bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kin__row { flex-wrap: wrap; width: auto; white-space: normal; padding-inline: var(--gut); }
  .kin__row--alt, .kin__row > :nth-child(n+9) { display: none; }
  .stk__i { position: relative; top: auto; }
  .stk__fig img { transform: none; transition: none; }
}

/* =============================================================================
   Form rooms (Contact, RFQ, Samples, Feasibility): a washed paper backdrop,
   the form on a raised card with a glowing progress edge, the desk as a lit
   dark panel, the side column pinned beside the form.
   ========================================================================== */
.sec:has(> .fwrap), .sec:has(> .wrap > .fwrap), .sec:has(.wiz) { position: relative; isolation: isolate; background:
  radial-gradient(900px 600px at 88% 0%, rgba(255, 179, 71, .16), transparent 60%),
  radial-gradient(800px 700px at 0% 100%, rgba(136, 201, 153, .16), transparent 60%), var(--paper); }
.fwrap .fpanel { border: 1px solid transparent; border-radius: 30px;
  background: linear-gradient(180deg, #FFFDF9, var(--bone)) padding-box, linear-gradient(155deg, #fff, rgba(22, 32, 26, .1) 38%, rgba(255, 179, 71, .5)) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(15, 23, 18, .04), 0 30px 60px -30px rgba(15, 23, 18, .28), 0 80px 120px -70px rgba(26, 67, 49, .35); }
.fwrap .fprog { height: 4px; background: rgba(22, 32, 26, .06); }
.fwrap .fprog i { box-shadow: 0 0 14px rgba(255, 179, 71, .8); border-radius: 0 4px 4px 0; }
.fwrap .fpanel__head .d-3, .fwrap .fpanel__head h2 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); letter-spacing: -.02em; }
.fwrap .input, .fwrap .select, .fwrap .textarea { border-radius: 14px; background: #FFFEFB; border-color: rgba(22, 32, 26, .18); box-shadow: inset 0 1px 2px rgba(15, 23, 18, .04); transition: border-color .3s, box-shadow .4s var(--e-out), background-color .3s; }
.fwrap .input:hover, .fwrap .select:hover, .fwrap .textarea:hover { border-color: rgba(22, 32, 26, .4); }
.fwrap .input:focus-visible, .fwrap .select:focus-visible, .fwrap .textarea:focus-visible { background: #fff; border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 0 6px rgba(136, 201, 153, .22), 0 12px 30px -16px rgba(26, 67, 49, .4); }
.fwrap .form .opt span { transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--e-out), box-shadow .4s var(--e-out); }
.fwrap .form .opt span:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(15, 23, 18, .35); }
.fwrap .form .opt input:checked + span { box-shadow: 0 12px 24px -12px rgba(15, 23, 18, .55); }
.fwrap .desk { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; box-shadow: 0 40px 80px -40px rgba(15, 23, 18, .6), inset 0 1px 0 rgba(241, 237, 228, .08); }
.fwrap .desk::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at 85% 0%, rgba(255, 179, 71, .18), transparent 60%), radial-gradient(500px circle at 0% 100%, rgba(136, 201, 153, .14), transparent 60%); pointer-events: none; }
.fwrap .flow-card { border: 1px solid transparent; border-radius: 28px;
  background: linear-gradient(180deg, #FFFDF9, var(--bone)) padding-box, linear-gradient(155deg, #fff, rgba(22, 32, 26, .1) 40%, rgba(255, 179, 71, .45)) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 24px 50px -30px rgba(15, 23, 18, .3); }
@media (min-width: 1000px) { .fwrap > .fside { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; } }

/* A dark sheet over a dark section: a light top edge keeps the fold visible. */
.is-sheet--edge { box-shadow: inset 0 1px 0 rgba(241, 237, 228, .16), 0 -30px 70px -30px rgba(0, 0, 0, .85); }

/* ---------- Ink: a hand-drawn underline under a heading's accent word ---------- */
.ink { position: relative; display: inline-block; }
.ink__s { position: absolute; left: -2%; bottom: -.06em; width: 104%; height: .22em; overflow: visible; pointer-events: none; }
.ink__s path { fill: none; stroke: var(--apricot); stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1); }
.ink.is-drawn .ink__s path { stroke-dashoffset: 0; }

/* ---------- Page transition: a dark layer leads the paper; an arched photo rides with the label ---------- */
.curtain__n { position: absolute; inset: 0; background: var(--night); transform: translateY(100%); }
html.curtain-in .curtain__n { transform: none; }
.curtain__img { display: none; width: clamp(96px, 9vw, 140px); aspect-ratio: 4 / 5; border-radius: 999px 999px 18px 18px; background: var(--paper-2) center / cover no-repeat; box-shadow: 0 30px 60px -30px rgba(15, 23, 18, .6); }
.curtain.has-img .curtain__img { display: block; }

/* =============================================================================
   WORDMARK: the inner-page hero (views/partials/page_hero.php, initHw).
   A paper sheet with a giant word knocked out of it; the photograph shows
   through the letters. Desktop pins the stage and flies through a letter.
   ========================================================================== */
main > section.hw, .hw { position: relative; z-index: 1; overflow: visible; background: var(--paper); color: var(--ink); }
.hw__pin { position: relative; isolation: isolate; overflow: hidden; }
.hw__word { position: relative; overflow: hidden; }
.hw__photo { position: absolute; inset: -6%; z-index: 0; will-change: transform; }
.hw__photo picture, .hw__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw__photo img { filter: saturate(1.15) contrast(1.06); }
.hw__photo::after { content: ""; position: absolute; inset: 0; background: rgba(10, 16, 12, var(--hw-shade, 0)); }
.hw__mask { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }
.hw__paper { fill: var(--paper); }
.hw__txt { font-family: var(--fd); font-weight: 400; font-size: 25vw; letter-spacing: -.045em; }
.hw__cap { position: absolute; left: 50%; bottom: 28px; z-index: 2; margin: 0; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; white-space: nowrap; font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--bone); background: rgba(15, 23, 18, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; }
.hw__cap span { margin-right: 6px; letter-spacing: .14em; text-transform: uppercase; color: var(--apricot); }

.hw__ui { position: relative; z-index: 3; }
.hw__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; font-size: .75rem; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.hw__crumb { display: flex; align-items: center; gap: 12px; }
.hw__crumb a { color: inherit; text-decoration: none; }
.hw__crumb a:hover { color: var(--green); }
.hw__crumb i { width: 28px; height: 1px; background: currentColor; opacity: .6; }
.hw__crumb span { color: var(--ink); }
.hw__no { margin: 0; padding: 7px 12px; border: 1px solid var(--rule-2); border-radius: 999px; color: var(--ink); }
.hw__time { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0; }
.hw__time b { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(136, 201, 153, .25); animation: hwPulse 2s ease-in-out infinite; }
.hw__time time { color: var(--ink); }
@keyframes hwPulse { 50% { box-shadow: 0 0 0 8px rgba(136, 201, 153, 0); } }

.hw__bottom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px clamp(24px, 5vw, 96px); align-items: end; }
.hw__title { margin: 0; max-width: 20ch; font-family: var(--fd); font-weight: 400; font-size: clamp(2rem, 1rem + 2.3vw, 3.7rem); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; color: var(--ink); }
.hw__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hw__w > span { display: inline-block; transform-origin: 0 100%; }
.hw__side { display: grid; gap: 18px; }
.hw__lede { margin: 0; max-width: 46ch; font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); }
.hw__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hw__link { font-weight: 600; color: var(--ink); }
.hw__facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.hw__fact { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; padding: 14px 18px 0 0; }
.hw__fact + .hw__fact { padding-left: 18px; border-left: 1px solid var(--rule-2); }
.hw__fact dt { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.hw__fact dt span { color: var(--apricot-d); margin-right: 4px; }
.hw__fact dd { margin: 0; font-family: var(--fd); font-size: clamp(1.2rem, 1rem + .7vw, 1.8rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (min-width: 900px) {
  .hw__pin { height: 100svh; min-height: 680px; }
  .hw__word { position: absolute; inset: 0; z-index: 1; }
  .hw__ui { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-top: calc(var(--hdr) + 16px); padding-bottom: clamp(22px, 3.6vh, 40px); pointer-events: none; }
  .hw__ui a, .hw__ui button { pointer-events: auto; }
}
@media (max-width: 899.98px) {
  .hw__ui { display: contents; }
  .hw__pin { display: flex; flex-direction: column; padding: calc(var(--hdr) + 16px) 0 28px; }
  .hw__top { order: 1; grid-template-columns: 1fr auto; padding-inline: var(--gut); row-gap: 12px; }
  .hw__time { grid-column: 1 / -1; justify-content: flex-start; }
  .hw__word { order: 2; height: 30vw; margin: 26px 0 22px; }
  .hw__bottom { order: 3; grid-template-columns: minmax(0, 1fr); padding-inline: var(--gut); }
  .hw__title { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.6rem); }
  .hw__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw__fact { flex-direction: column; gap: 6px; padding: 14px 12px 14px 0; }
  .hw__fact + .hw__fact { padding-left: 12px; }
  .hw__fact:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-2); }
  .hw__fact:nth-child(4) { border-top: 1px solid var(--rule-2); }
  .hw__photo { animation: hwPan 14s ease-in-out infinite alternate; }
  @keyframes hwPan { to { transform: translate3d(-4%, 2%, 0) scale(1.06); } }
}
@media (prefers-reduced-motion: reduce) { .hw__photo, .hw__time b { animation: none; } }

/* ── Header: Menu button grouped with the primary nav links ──────────────
   The menu button now lives inside .nav. On desktop it reads as part of the
   nav group; when the text links collapse on narrower screens it stays put
   as the sole menu trigger (so the links hide, not the button). */
.nav .menu-btn { margin-left: clamp(8px, 1vw, 18px); }
/* Six links only just fit a small laptop, so they tighten before the CTA is pushed out. */
@media (max-width: 1400px) { .nav { gap: 8px; } .nav a { font-size: .875rem; } }
@media (max-width: 1240px) {
  .nav { display: flex !important; justify-self: end; margin-left: auto; gap: 0; }
  .nav > a { display: none; }
}

/* ── Montserrat site-wide ────────────────────────────────────────────────
   One geometric family for both body and display. Hierarchy now comes from
   weight and size rather than a serif/sans contrast. Loaded after v9 so it
   wins the --f / --fd definitions. */
:root {
  --f:  "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fd: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Montserrat display hierarchy. The serif read as "display" at weight 400;
   the geometric sans needs more weight to carry the same headings. Big stat
   numbers stay light on purpose. Overrides v4's "one display voice" 400. */
.d-2, .d-3, .h-4, h2, h3, .rng__title, .rng__ghost, .rc__name, .rc__desc,
.stmt__t, .xm__t, .cell__t, .svc__t, .pf__name, .pf__n, .dcard__q,
.film__h, .film__big, .kin span, .tile__b b, .file__name, .dossier__no,
.curtain__p b, .seq__step h3, .call h2, .badge-cert__name, .loader__w,
.menu__main a { font-weight: 600 !important; }
.d-xl, .d-1, .ph__title, h1, .hx__title, .fin__t, .ft__h { font-weight: 700 !important; }

/* Black & white treatment for the Sourcing/Process sequence imagery — every
   step photo in the "It starts with what goes in" frame renders monochrome. */
.seq .seq__img,
.seq .seq__inline,
.seq__media img,
.seq__imgs img { filter: grayscale(100%); transition: filter .5s ease, opacity .9s var(--e-out), clip-path .9s var(--e-out), transform .9s var(--e-out); }
/* Hovering a step photo brings it back to full colour. */
.seq__media:hover .seq__img,
.seq__media:hover .seq__imgs img,
.seq .seq__inline:hover { filter: grayscale(0); }

/* ── Living field ────────────────────────────────────────────────────────
   Reactive WebGL background and cursor image trail for the section above the
   footer (js/field.js). Layers, back to front: field, veil, trail, content.
   Photos pass behind the copy, so the copy carries a soft shadow to stay
   readable over them. */
[data-field] { position: relative; isolation: isolate; }
.ft__field .ft__cta { position: relative; z-index: 1; }
.field__gl { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; }
.field__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 23, 18, .55) 0%, rgba(15, 23, 18, 0) 30%, rgba(15, 23, 18, 0) 60%, rgba(15, 23, 18, .9) 100%),
    radial-gradient(70% 70% at 18% 55%, rgba(15, 23, 18, .6), transparent 72%);
}
.field__trail { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.field__trail-img { position: absolute; width: clamp(150px, 15vw, 230px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); will-change: transform, opacity; }
.fin__copy, .crunch__cap, .crunch__meter, .ft__cta-l { text-shadow: 0 1px 18px rgba(8, 14, 10, .75); }
.fin__copy .btn, .ft__cta-l .btn { text-shadow: none; }