/* Bollant Industries — effects layer (v3.1): glass, cursor, preloader, page transitions, split text,
   marquee, stacked cards, hover-reveal lists, WebGL stages, illustrations, giant footer word.
   Everything here is progressive: without JS the page reads normally. */

/* ---------- glass (used on cards over imagery, the hero stat cards and floating panels) */
.glass { background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 48px -28px rgba(15, 42, 30, .35); }
.glass-dark, .on-forest .glass, .on-graphite .glass, .hero .glass, .hero-x .glass { background: rgba(15, 42, 30, .38); border: 1px solid rgba(245, 243, 236, .16); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 30px 60px -30px rgba(0, 0, 0, .6); color: var(--paper); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255,255,255,.92); } .glass-dark, .hero .glass { background: rgba(15,42,30,.88); } }

/* ---------- breadcrumbs: kept in JSON-LD only */
.crumbs { display: none; }

/* ---------- scroll progress + header hide */
.progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: calc(var(--z-header) + 1); background: var(--copper); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.hdr { transition: transform .5s var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr--over.is-solid { background: rgba(245, 243, 236, .78); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }

/* ---------- custom cursor (fine pointers only) */
.cursor, .cursor-ring { position: fixed; left: 0; top: 0; z-index: var(--z-skip); pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.cursor { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--copper); }
.cursor-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid rgba(24, 156, 156, .6); display: grid; place-items: center; font: 600 10px/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s var(--ease), border-color .35s, opacity .3s; }
.cursor-ring span { opacity: 0; transition: opacity .2s; }
.has-cursor .cursor, .has-cursor .cursor-ring { opacity: 1; }
.cursor-ring.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: var(--copper); }
.cursor-ring.is-label { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--forest); border-color: var(--forest); }
.cursor-ring.is-label span { opacity: 1; }
@media (pointer: coarse) { .cursor, .cursor-ring { display: none; } }

/* ---------- preloader (first visit of a session) */
.preloader { position: fixed; inset: 0; z-index: calc(var(--z-skip) + 1); display: grid; place-items: center; background: var(--forest-deep); color: var(--paper); }
.preloader__in { display: grid; justify-items: center; gap: var(--s-5); }
.preloader img { width: 84px; height: 84px; }
.preloader__bar { width: 220px; height: 1px; background: rgba(245,243,236,.2); overflow: hidden; }
.preloader__bar i { display: block; height: 100%; background: var(--copper-light); transform-origin: left; transform: scaleX(0); }
.preloader .tech { color: rgba(245,243,236,.6); }

/* ---------- page transition curtain */
.curtain { position: fixed; inset: 0; z-index: calc(var(--z-skip) - 1); pointer-events: none; display: grid; grid-template-columns: repeat(5, 1fr); }
.curtain i { background: var(--forest); transform: scaleY(0); transform-origin: bottom; }
.curtain i:nth-child(2n) { background: var(--forest-deep); }
.curtain__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--paper); font: 700 clamp(1.5rem, 1rem + 2vw, 2.5rem)/1 var(--font-display); letter-spacing: -.02em; opacity: 0; white-space: nowrap; }

/* ---------- split text (JS wraps words) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; will-change: transform; }
.scrub-words .sw { opacity: .16; transition: none; }

/* ---------- marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--rule); padding-block: var(--s-5); white-space: nowrap; user-select: none; }
.marquee__track { display: inline-flex; gap: var(--s-7); align-items: center; will-change: transform; }
.marquee__item { display: inline-flex; align-items: center; gap: var(--s-4); font: 700 clamp(1.75rem, 1.2rem + 2.2vw, 3.5rem)/1 var(--font-display); letter-spacing: -.03em; color: var(--fg-strong); }
.marquee__item svg { width: clamp(40px, 4vw, 64px); height: auto; color: var(--accent); }
.marquee__item.outline { color: transparent; -webkit-text-stroke: 1px var(--fg-strong); }

/* ---------- WebGL stages */
.gl { position: absolute; inset: 0; z-index: 0; }
.gl canvas { display: block; width: 100% !important; height: 100% !important; }
.gl-fixed { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease); }
.gl-fixed.is-on { opacity: 1; }
.viewer3d { position: relative; aspect-ratio: 1 / 1; background: radial-gradient(60% 60% at 50% 45%, #fff 0%, var(--paper-deep) 70%); border: 1px solid var(--rule); overflow: hidden; cursor: grab; }
.viewer3d:active { cursor: grabbing; }
.viewer3d .fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-strong); }
.viewer3d .fallback svg { width: 70%; height: auto; }
.viewer3d.is-live .fallback { opacity: 0; transition: opacity .6s; }
.viewer3d .tech { position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 2; }

/* ---------- home hero v3.1 */
.hero-x { position: relative; min-height: 100svh; overflow: hidden; background: radial-gradient(120% 90% at 70% 30%, #23503c 0%, var(--forest-deep) 55%, #08180f 100%); color: var(--paper); isolation: isolate; --fg: var(--paper); --fg-muted: #C9D2CB; --fg-strong: var(--paper); --accent: var(--copper-light); --accent-ink: var(--copper-light); --rule: rgba(245,243,236,.16); --rule-strong: rgba(245,243,236,.4); --focus: var(--copper-light); }
.hero-x__media { position: absolute; inset: 0; z-index: -2; opacity: .38; mix-blend-mode: luminosity; }
.hero-x__media video, .hero-x__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-x.gl-live .hero-x__media { opacity: .14; }
.hero-x__vignette { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,24,15,.82) 0%, rgba(8,24,15,.45) 38%, rgba(8,24,15,0) 62%), linear-gradient(180deg, rgba(8,24,15,.55), rgba(8,24,15,0) 30%, rgba(8,24,15,0) 60%, rgba(8,24,15,.85)); pointer-events: none; }
.hero-x__in { position: relative; z-index: 2; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding-top: 120px; pointer-events: none; }
.hero-x__in a, .hero-x__in button { pointer-events: auto; }
.hero-x__copy { align-self: center; max-width: 760px; }
.hero-x h1 { font-size: clamp(3rem, 1.6rem + 5.6vw, 7.5rem); line-height: .96; letter-spacing: -.045em; font-weight: 800; max-width: 11ch; }
.hero-x h1 em { font-style: normal; color: var(--copper-light); }
.hero-x .lede { margin-top: var(--s-6); max-width: 46ch; color: #DDE3DD; }
.hero-x .btns { margin-top: var(--s-6); }
.hero-x__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); padding-bottom: var(--s-6); }
.statcard { padding: var(--s-4) var(--s-5); }
.statcard .tech { color: rgba(245,243,236,.7); }
.statcard strong { display: block; margin-top: 8px; font: 700 clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.statcard > span:last-child { display: block; margin-top: 6px; font-size: var(--fs-caption); color: #C9D2CB; }
.hero-x__label { position: absolute; right: var(--gutter); top: 50%; z-index: 2; writing-mode: vertical-rl; color: rgba(245,243,236,.5); pointer-events: none; }
@media (max-width: 900px) { .hero-x__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-x__label { display: none; } .hero-x__media { opacity: .45; } }

/* ---------- big statement (scrub-filled words) */
.statement { font: 700 clamp(2rem, 1.2rem + 3.6vw, 5rem)/1.06 var(--font-display); letter-spacing: -.035em; color: var(--fg-strong); max-width: 20ch; }
.statement .hl { color: var(--accent-ink); }

/* ---------- floating product layer (background products) */
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.floaters svg { position: absolute; color: var(--fg-strong); opacity: .1; }
.section > .wrap, .section > .process__sticky { position: relative; z-index: 1; }

/* ---------- product rail (home) */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 26vw); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-5); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rcard { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; min-height: 520px; padding: var(--s-5); text-decoration: none; overflow: hidden; isolation: isolate; border: 1px solid var(--rule); background: var(--bg-raised); transition: border-color var(--dur-2); }
.rcard:hover { border-color: var(--rule-strong); }
.rcard__img { position: absolute; inset: 0; z-index: -2; }
.rcard__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s var(--ease); }
.rcard:hover .rcard__img img { transform: scale(1.16); }
.rcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,42,30,.1) 20%, rgba(15,42,30,.85)); }
.rcard__top { display: flex; justify-content: space-between; color: var(--paper); }
.rcard__ill { width: 120px; color: var(--paper); margin-top: auto; opacity: .9; }
.rcard__body { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); color: var(--paper); }
.rcard__body h3 { color: var(--paper); }
.rcard__body p { margin-top: var(--s-2); font-size: .9375rem; color: #E3E8E3; }
.rail-ctl { display: flex; gap: var(--s-2); }
.rail-ctl button { width: 48px; height: 48px; border: 1px solid var(--rule-strong); background: transparent; color: var(--fg-strong); border-radius: var(--radius-1); cursor: pointer; font-size: 18px; }
.rail-ctl button:hover { border-color: var(--fg-strong); }

/* ---------- expanding film */
.expand { position: relative; height: 100vh; overflow: hidden; }
.expand__media { position: absolute; inset: 0; clip-path: inset(18% 22% 18% 22%); will-change: clip-path; }
.expand__media video, .expand__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.expand__copy { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--paper); z-index: 2; pointer-events: none; }
.expand__copy h2 { color: var(--paper); font-size: clamp(2.5rem, 1.4rem + 5vw, 6.5rem); letter-spacing: -.04em; line-height: .95; text-shadow: 0 10px 40px rgba(0,0,0,.35); }
.expand .vidctl { pointer-events: auto; }
@media (max-width: 900px) { .expand { height: 70vh; } }

/* ---------- hover reveal list (industries) */
.hlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); position: relative; }
.hlist li { border-bottom: 1px solid var(--rule); }
.hlist a { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 40px; gap: var(--s-5); align-items: center; padding: var(--s-6) 0; text-decoration: none; transition: padding var(--dur-2) var(--ease); }
.hlist a:hover { padding-left: var(--s-4); }
.hlist h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); letter-spacing: -.03em; }
.hlist p { color: var(--fg-muted); font-size: .9375rem; }
.hlist .arr { width: 22px; height: 22px; color: var(--accent); }
.hfloat { position: fixed; left: 0; top: 0; width: 300px; aspect-ratio: 4 / 5; z-index: var(--z-sticky); pointer-events: none; overflow: hidden; opacity: 0; transform: scale(.8); }
.hfloat img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .hlist a { grid-template-columns: 40px 1fr; } .hlist a > p, .hlist .arr { display: none; } .hfloat { display: none; } }

/* ---------- stacked cards (cases) */
.stack-cards { display: grid; gap: var(--s-6); }
.scard { position: sticky; top: 110px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 460px; background: var(--bg-raised); border: 1px solid var(--rule); overflow: hidden; transform-origin: 50% 0; text-decoration: none; }
.scard .frame { height: 100%; }
.scard__b { padding: var(--s-7); display: flex; flex-direction: column; gap: var(--s-4); }
.scard__b h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); letter-spacing: -.025em; }
.scard__b p { color: var(--fg-muted); }
@media (max-width: 900px) { .scard { position: relative; top: 0; grid-template-columns: minmax(0, 1fr); } .scard .frame { aspect-ratio: 16 / 10; } .scard__b { padding: var(--s-5); } }

/* ---------- illustrations (technical line drawings, drawn on scroll) */
.ill { color: var(--fg-strong); }
.ill svg { width: 100%; height: auto; overflow: visible; }
.ill .ln { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ill .ln-a { fill: none; stroke: var(--accent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ill .fl { fill: currentColor; opacity: .07; }
.ill .dim { fill: none; stroke: currentColor; stroke-width: .8; opacity: .55; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ill text { fill: currentColor; font: 500 9px var(--font-text); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.ill-panel { padding: var(--s-6); border: 1px solid var(--rule); background: var(--bg-raised); }

/* ---------- loop diagram */
.loop { max-width: 620px; margin-inline: auto; }

/* ---------- glass card over image (generic) */
.overlay-card { position: relative; overflow: hidden; }
.overlay-card .glass, .overlay-card .glass-dark { position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); padding: var(--s-5); }

/* ---------- giant footer word */
.ftr__giant { overflow: hidden; padding-top: var(--s-6); line-height: .8; }
.ftr__giant span { display: block; font: 800 clamp(4rem, 1rem + 15vw, 17rem)/.8 var(--font-display); letter-spacing: -.06em; color: rgba(245, 243, 236, .07); white-space: nowrap; }

/* ---------- magnetic */
[data-magnetic] { will-change: transform; }

/* ---------- glossary links inside prose */
a.term { text-decoration: underline dotted; text-decoration-color: var(--accent); text-underline-offset: .2em; }
.term-hero dfn { font-style: normal; }

/* ---------- index grids for new hubs */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }
.tile { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--rule); background: var(--bg-raised); text-decoration: none; transition: border-color var(--dur-2), transform var(--dur-2) var(--ease); }
.tile:hover { border-color: var(--rule-strong); transform: translateY(-3px); }
.tile h3 { font-size: 1.125rem; }
.tile p { font-size: var(--fs-caption); color: var(--fg-muted); }
.tile .ill { width: 72px; margin-bottom: var(--s-2); }
.az { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.az a { min-width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--rule); text-decoration: none; font-weight: 600; }

/* ---------- reduced motion: nothing transformed */
@media (prefers-reduced-motion: reduce) { .expand__media { clip-path: none; } .scard { position: relative; top: 0; } .marquee__track { transform: none !important; } }

/* preloader only on the first page of a session (class set in <head>) */
.preloader { display: none; }
.preload .preloader { display: grid; }
.preload body { overflow: hidden; }

.scard .metrics strong { font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); }
.scard .metrics div { padding-right: var(--s-3); }
.scard .metrics div + div { padding-left: var(--s-3); }

.hero-x .btn:not(.btn--secondary) { --btn-bg: var(--paper); --btn-fg: var(--forest); --btn-bd: var(--paper); }
.hero-x .btn:not(.btn--secondary):hover { --btn-bg: var(--white); --btn-bd: var(--white); }
.hero-x .btn--secondary { --btn-fg: var(--paper); --btn-bd: rgba(245,243,236,.45); }

/* =========================================================== v3.2 handmade layer */
/* paper grain over the whole site */
body::after { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-overlay) - 1); pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* hand-drawn wobble on every line drawing (filter defined once in the page) */
.ill svg, .marquee__item svg, .floaters svg { filter: url(#rough); }
/* handwritten annotations: Caveat, used only for margin notes */
.hand { font-family: "Caveat", "Segoe Print", cursive; font-weight: 600; font-size: clamp(1.25rem, 1rem + .6vw, 1.6rem); line-height: 1.1; color: var(--accent-ink); letter-spacing: 0; text-transform: none; }
.hand-note { position: absolute; display: flex; align-items: flex-start; gap: 6px; transform: rotate(-4deg); pointer-events: none; z-index: 3; }
.hand-note svg { width: 54px; height: 40px; flex: none; color: var(--accent); }
.hand-note svg path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (max-width: 900px) { .hand-note { display: none; } }
/* scribble underline drawn under key words in headings */
.scribble { position: relative; white-space: nowrap; display: inline-block; }
.scribble .scrib { position: absolute; left: -3%; bottom: -.12em; width: 106%; height: .32em; overflow: visible; pointer-events: none; }
.scribble .scrib path { fill: none; stroke: var(--copper); stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.on-forest .scribble .scrib path, .on-graphite .scribble .scrib path, .hero .scribble .scrib path, .hero-x .scribble .scrib path { stroke: var(--copper-light); }
/* taped photographs */
.taped { overflow: visible !important; transform: rotate(-1.1deg); box-shadow: 0 18px 40px -24px rgba(15,42,30,.45); background: #fff; padding: 8px; }
.taped:nth-of-type(even), .split > div:nth-child(2) .taped { transform: rotate(1deg); }
.taped img, .taped video { display: block; }
.taped::before, .taped::after { content: ""; position: absolute; width: 96px; height: 26px; border: 0; background: rgba(214, 189, 146, .78); box-shadow: 0 1px 2px rgba(0,0,0,.08); z-index: 2; }
.taped::before { left: 18px; top: -12px; transform: rotate(-6deg); }
.taped::after { right: 18px; top: -10px; left: auto; bottom: auto; transform: rotate(5deg); }
.taped.frame { aspect-ratio: auto; }
.taped.frame img { aspect-ratio: 4 / 3; height: auto; }
/* torn paper edge above alternate bands */
.section--alt { position: relative; }
.section--alt::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; pointer-events: none; background: var(--paper-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 9 L6 7 L11 10 L17 5 L24 8 L30 4 L37 9 L43 6 L50 10 L57 5 L63 8 L70 3 L77 9 L84 6 L90 10 L97 5 L104 8 L111 4 L120 8 L120 14 Z'/%3E%3C/svg%3E") 0 0 / 240px 14px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 9 L6 7 L11 10 L17 5 L24 8 L30 4 L37 9 L43 6 L50 10 L57 5 L63 8 L70 3 L77 9 L84 6 L90 10 L97 5 L104 8 L111 4 L120 8 L120 14 Z'/%3E%3C/svg%3E") 0 0 / 240px 14px repeat-x; }
.section + .section--alt { border-top: 0 !important; }
/* craft hero: text-only pages */
.hero-craft { position: relative; overflow: hidden; padding-top: calc(var(--section) * .9); padding-bottom: calc(var(--section) * .7); background: var(--paper); border-bottom: 1px solid var(--rule); }
.hero-craft__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; position: relative; z-index: 1; }
.hero-craft h1 { font-size: clamp(2.5rem, 1.4rem + 4vw, 5.5rem); line-height: .98; letter-spacing: -.04em; font-weight: 800; max-width: 14ch; }
.hero-craft .lede { margin-top: var(--s-5); }
.hero-craft .btns { margin-top: var(--s-6); }
.hero-craft__art { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.hero-craft__art .ill { width: 100%; color: var(--forest); }
.hero-craft__art::before { content: ""; position: absolute; inset: 8% 6%; background: radial-gradient(closest-side, rgba(24, 156, 156,.14), transparent 70%); border-radius: 50%; }
.hero-craft__lines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--rule) 1px, transparent 1px); background-size: 100% 40px; opacity: .55; -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.hero-craft .hand-note { right: 4%; bottom: 8%; }
@media (max-width: 900px) { .hero-craft__grid { grid-template-columns: minmax(0, 1fr); } .hero-craft__art { max-width: 420px; } }
/* Ken Burns on image heroes */
.fx .hero--page .hero__media img { animation: kb 18s var(--ease-io) infinite alternate; }
@keyframes kb { from { transform: scale(1.04); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
/* tilt cards */
.tile, .pcard, .ccard, .ecard, .rcard, .panel { transform-style: preserve-3d; will-change: transform; }
.tilt-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.35), transparent 40%); opacity: 0; transition: opacity .3s; z-index: 3; }
.tile:hover .tilt-glare, .pcard:hover .tilt-glare, .ccard:hover .tilt-glare, .ecard:hover .tilt-glare { opacity: 1; }
.tile, .pcard, .ccard { position: relative; }
/* section headings get a small hand-drawn mark before the eyebrow on inner pages */
.eyebrow::before { height: 2px; border-radius: 2px; }
/* FAQ: a touch more personality */
.faq summary { transition: color var(--dur-1), padding var(--dur-2) var(--ease); }
.faq summary:hover { color: var(--accent-ink); padding-left: 6px; }
.faq-section .panel { position: sticky; top: 110px; }
/* forms: aligned rows */
.form__row { align-items: start; }
.field .hint { order: 3; }
.form__status[data-state="ok"] { color: var(--forest); font-weight: 600; }
.form__status a { color: inherit; font-weight: 600; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* aligned photo collage: one big frame and two stacked frames share top and bottom edges */
.collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--s-5); height: clamp(420px, 44vw, 640px); }
.collage figure { position: relative; margin: 0; overflow: hidden; background: var(--bg-alt); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage__a { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.collage__b { grid-column: 8 / span 5; grid-row: 1; }
.collage__c { grid-column: 8 / span 5; grid-row: 2; }
.collage figcaption { position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 2; padding: 6px 10px; color: var(--paper); background: rgba(15,42,30,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 900px) { .collage { height: auto; grid-template-rows: none; } .collage figure { grid-column: 1 / -1 !important; grid-row: auto !important; aspect-ratio: 16 / 10; } }
/* process step: illustration under the text so every card keeps the same text column */
.process__step .ill { width: 96px; }

/* section sub-navigation (hub + sub-pages) */
.subnav { position: sticky; top: 0; z-index: calc(var(--z-header) - 1); background: rgba(245,243,236,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.subnav ul { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 92%, transparent); mask: linear-gradient(90deg, #000 92%, transparent); }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--s-4); white-space: nowrap; text-decoration: none; font-size: .875rem; font-weight: 500; color: var(--graphite-muted); border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--forest); }
.subnav a[aria-current="page"] { color: var(--forest); border-bottom-color: var(--copper); font-weight: 600; }
.hdr:not(.is-hidden) ~ main .subnav { top: 76px; }
/* steps grid (production process page) */
.steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-5); margin-top: var(--s-5); }
.step { padding: var(--s-5); border: 1px solid var(--rule); background: var(--bg-raised); display: flex; flex-direction: column; gap: var(--s-2); }
.step .ill { width: 110px; }
.step h3 { font-size: 1.125rem; }

/* responsive hardening */
.prose, .prose * { overflow-wrap: anywhere; }
.prose table, .spec { overflow-wrap: normal; }
.aside-layout > *, .split > *, .grid > *, .hero-craft__grid > * { min-width: 0; }
.loop svg { overflow: hidden; }
@media (max-width: 1200px) { .hdr__in { gap: var(--s-4); } }
@media (max-width: 560px) {
  .hero-x__cards { gap: var(--s-2); } .statcard { padding: var(--s-3); }
  .rail { grid-auto-columns: 84%; } .rcard { min-height: 440px; }
  .hlist a { padding: var(--s-5) 0; } .collage figure { aspect-ratio: 4 / 3; }
  .cta h2 { font-size: clamp(2rem, 1.5rem + 3vw, 2.6rem); }
  .hero-craft h1 { font-size: clamp(2.25rem, 1.6rem + 4vw, 3rem); }
  .scard__b { padding: var(--s-4); }
}
@media (min-width: 1600px) { :root { --container: 1440px; } }

/* custom cursor removed (v3.4) */
.cursor, .cursor-ring { display: none !important; }

/* certification cards */
.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s-5); }
.cert { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-6); border: 1px solid var(--rule); background: var(--bg-raised); position: relative; }
.cert--pending { border-style: dashed; opacity: .85; }
.cert__seal { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--forest); color: var(--forest); font: 800 .95rem/1 var(--font-display); letter-spacing: -.02em; text-align: center; box-shadow: inset 0 0 0 5px var(--bg-raised), inset 0 0 0 6px var(--copper); transform: rotate(-8deg); }
.cert h3 { margin: 4px 0 var(--s-2); }
.cert p { color: var(--fg-muted); font-size: .9375rem; }
@media (max-width: 560px) { .cert { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================== v3.5 muted animated background
   Fixed behind everything; shows through paper sections, hidden under solid bands. Very low contrast. */
.bgfx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.bgfx__row { position: absolute; left: 0; width: 100%; white-space: nowrap; will-change: transform; }
.bgfx__row--0 { top: 12%; } .bgfx__row--1 { top: 46%; } .bgfx__row--2 { top: 78%; }
.bgfx__track { display: inline-flex; align-items: center; gap: .35em; animation: bgfx-slide 140s linear infinite; will-change: transform; }
.bgfx__row--1 .bgfx__track { animation-duration: 180s; animation-direction: reverse; }
.bgfx__row--2 .bgfx__track { animation-duration: 120s; }
.bgfx__track span { font: 800 clamp(5rem, 3rem + 9vw, 13rem)/1 var(--font-display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(24, 58, 43, .075); }
.bgfx__row--1 .bgfx__track span { -webkit-text-stroke-color: rgba(24, 156, 156, .085); }
.bgfx__track i { font-style: normal; font: 800 clamp(3rem, 2rem + 5vw, 7rem)/1 var(--font-display); color: rgba(24, 156, 156, .12); padding: 0 .1em; }
@keyframes bgfx-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.bgfx__art { position: absolute; inset: 0; color: var(--forest); }
.bgfx__ill { position: absolute; left: -260px; top: var(--y); width: calc(200px * var(--s)); opacity: .12; animation: bgfx-drift var(--d) linear infinite; animation-delay: var(--delay); will-change: transform; filter: none !important; }
.bgfx__ill .ln, .bgfx__ill .ln-a, .bgfx__ill .dim { stroke-width: 1.2; }
.bgfx__ill text { display: none; }
.bgfx__ill:nth-child(3n) { color: var(--copper); opacity: .14; }
@keyframes bgfx-drift { 0% { transform: translate3d(0, 0, 0) rotate(-8deg); } 50% { transform: translate3d(calc(50vw + 130px), -40px, 0) rotate(6deg); } 100% { transform: translate3d(calc(100vw + 520px), 10px, 0) rotate(-4deg); } }
/* solid sections cover it; paper sections let it through */
.hero-craft, .section:not([class*="on-"]):not(.section--alt), .ftr__family { background: transparent; }
.hero-craft { background: linear-gradient(180deg, rgba(245,243,236,.55), rgba(245,243,236,.2)); }
.panel, .pcard, .ccard, .tile, .answer, .spec-wrap, .faq-section .panel, .cert, .dlp, .step, .ill-panel { background: var(--bg-raised); }
@media (max-width: 760px) { .bgfx__row--2, .bgfx__ill:nth-child(n+6) { display: none; } .bgfx__row--0 { top: 18%; } .bgfx__row--1 { top: 62%; } }
@media (prefers-reduced-motion: reduce) { .bgfx__track, .bgfx__ill { animation: none !important; } }
.static .bgfx__track, .static .bgfx__ill { animation-play-state: paused; }

/* v3.6 flat vector background illustrations */
.vec .v1 { fill: #1D5440; } .vec .v2 { fill: #189C9C; } .vec .v3 { fill: #C49A68; } .vec .v7 { fill: #D8D824; } .vec .v8 { fill: #189C9C; } .vec .v4 { fill: #48A848; } .vec .v5 { fill: #ECE8DD; } .vec .v6 { fill: #FFFFFF; }
.vec path[fill="none"] { stroke: #1D5440; }
.bgfx__ill.vec { opacity: .13; width: calc(210px * var(--s)); }
.bgfx__ill.vec:nth-child(3n) { opacity: .1; }
@media (max-width: 760px) { .bgfx__ill.vec { width: calc(150px * var(--s)); opacity: .11; } }

/* v3.6 full-width film band (inner pages) */
.film { position: relative; height: clamp(320px, 56vw, 78vh); overflow: hidden; isolation: isolate; }
.film__media { position: absolute; inset: -10% 0; z-index: -2; }
.film__media video { width: 100%; height: 100%; object-fit: cover; }
.film__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,24,15,.15) 40%, rgba(8,24,15,.8)), linear-gradient(90deg, rgba(8,24,15,.45), transparent 60%); }
.film__cap { position: absolute; left: 0; right: 0; bottom: var(--s-6); display: grid; gap: var(--s-2); color: var(--paper); }
.film__cap .tech { color: rgba(245,243,236,.75); }
.film__title { font: 700 clamp(1.5rem, 1.1rem + 2vw, 3rem)/1.05 var(--font-display); letter-spacing: -.03em; max-width: 22ch; }
.film .vidctl { top: var(--s-5); }
@media (max-width: 760px) { .film { height: 62vw; min-height: 260px; } .film__cap { bottom: var(--s-4); } }

/* v3.10 header: a slim floating glass pill instead of a full-width bar */
:root { --hdr-h: 60px; --hdr-gap: 12px; --hdr-total: calc(var(--hdr-h) + var(--hdr-gap) * 2); }
.hdr, .hdr--over, .hdr--over.is-solid, .hdr--over.menu-open { background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.hdr { padding: var(--hdr-gap) 12px; pointer-events: none; }
.hdr > * { pointer-events: auto; }
.hdr__in { height: var(--hdr-h); width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 8px 0 22px; gap: var(--s-3); border-radius: 999px;
  background: rgba(245, 243, 236, .84); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(29, 84, 64, .12); box-shadow: 0 10px 34px -16px rgba(18, 56, 41, .35); transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.hdr__logo img { height: 30px; }
.nav { gap: 2px; }
.nav > a, .nav__trigger { height: 40px; padding: 0 14px; border-radius: 999px; font-size: .875rem; font-weight: 500; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.nav > a::after, .nav__trigger::after { display: none; }
.nav > a:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { background: rgba(29, 84, 64, .09); }
.nav [aria-current="page"] { background: rgba(24, 156, 156, .14); color: var(--forest); }
.hdr__cta { min-height: 44px; padding: .55rem 1.15rem; border-radius: 999px; margin-left: var(--s-2); }
.hdr--over .hdr__in { background: rgba(18, 56, 41, .32); border-color: rgba(245, 243, 236, .18); box-shadow: none; }
.hdr--over .nav > a:hover, .hdr--over .nav__trigger:hover, .hdr--over .nav__trigger[aria-expanded="true"] { background: rgba(245, 243, 236, .14); }
.hdr--over.is-solid .hdr__in, .hdr--over.menu-open .hdr__in { background: rgba(245, 243, 236, .88); border-color: rgba(29, 84, 64, .12); box-shadow: 0 10px 34px -16px rgba(18, 56, 41, .35); }
.hdr--over.is-solid .nav > a:hover, .hdr--over.is-solid .nav__trigger:hover, .hdr--over.menu-open .nav__trigger[aria-expanded="true"] { background: rgba(29, 84, 64, .09); }
.hdr.is-hidden { transform: translateY(calc(-100% - 4px)); }
.mega { left: 12px; right: 12px; top: calc(100% - 4px); max-width: 1280px; margin: 0 auto; border: 1px solid rgba(29, 84, 64, .12); border-radius: 28px; overflow: hidden;
  background: rgba(245, 243, 236, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.mega__in { padding-block: var(--s-6); }
.menu-btn { width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(29, 84, 64, .09); }
.hdr--over:not(.is-solid):not(.menu-open) .menu-btn { background: rgba(245, 243, 236, .16); }
.hdr:not(.is-hidden) ~ main .subnav { top: var(--hdr-total); }
@media (max-width: 1200px) {
  .hdr__in { padding: 0 8px 0 18px; }
  .drawer { inset: calc(var(--hdr-total) - 4px) 12px auto; max-height: calc(100dvh - var(--hdr-total) - 8px); border-radius: 28px; border: 1px solid rgba(29, 84, 64, .12); box-shadow: 0 24px 60px -24px rgba(18, 56, 41, .45); }
}
@media (max-width: 600px) {
  :root { --hdr-h: 54px; --hdr-gap: 8px; }
  .hdr { padding-inline: 8px; }
  .hdr__logo img { height: 26px; }
  .drawer { left: 8px; right: 8px; }
}

/* v3.11 product shots and homepage card sliders */
.shot { margin: 0; display: grid; place-items: center; background: #fff; border: 1px solid var(--rule); border-radius: 20px; padding: var(--s-5); }
.shot img { height: auto; }
.shot--main { min-height: 280px; }
.tile__shot { margin: 0 0 var(--s-4); display: grid; place-items: center; background: #fff; border-radius: 14px; aspect-ratio: 4 / 3; overflow: hidden; padding: var(--s-3); }
.tile__shot img { max-height: 100%; width: auto; object-fit: contain; }
.rail--cards { grid-auto-columns: minmax(270px, 23%); }
.pcard2 { scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s-3); min-height: 280px; padding: var(--s-6) var(--s-5); border-radius: 24px;
  background: var(--bg-raised); border: 1px solid var(--rule); transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.pcard2:hover { transform: translateY(-4px); border-color: var(--teal); }
.pcard2 h3 { font-size: 1.25rem; line-height: 1.2; }
.pcard2 p { color: var(--fg-muted); font-size: .9375rem; }
.pcard2__by { font: 700 .8125rem/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-ink) !important; }
.pcard2 .link { margin-top: auto; }
.pcard2--doc { background: linear-gradient(160deg, rgba(216, 216, 36, .16), rgba(24, 156, 156, .08) 60%, var(--bg-raised)); }
@media (max-width: 760px) { .rail--cards { grid-auto-columns: 82%; } }