/* ================================================================
   GEOCEL GROUP · V3 — "CINEMATIC EDITORIAL"
   A ground-up flagship build. Warm ivory editorial pages cut with
   full-bleed cinematic noir chapters. Massive Clash Display,
   Zodiak italics, hairline precision, blend-mode chrome.
   Brand: indigo #2B2F92 · green #3DA64A · est. 2009, Kochi.
   ================================================================ */

/* fonts are loaded via <link> in each page head - faster than @import here */

/* ================================================================
   01 · TOKENS
   ================================================================ */
:root {
  /* Surfaces */
  --paper:      #ffffff;   /* page ground - white */
  --paper-2:    #f0f0ee;
  --ivory:      #fbfaf8;   /* near-white: text on dark grounds, light buttons */
  --raised:     #f5f5f3;   /* tinted surfaces that must separate from white */
  --noir:       #0c0b08;   /* cinema black */
  --noir-2:     #14120c;
  --ink:        #16140f;
  --ink-soft:   #45423a;
  --muted:      #6c665a;
  --faint:      #7a7367;   /* 4.69:1 on white (was 2.93 - failed AA) */

  /* Brand */
  --brand:      #2b2f92;
  --brand-deep: #191c5e;
  --iris:       #7d83f0;   /* indigo, legible on noir */
  --sky:        #4b8ef7;   /* the chosen blue — NOT legible as text on noir (2.6–3.0:1) */
  --azure:      #8fbaf8;   /* same hue (215°), lightened — blue counterpart to --mint */
  --green:      #3da64a;
  --green-deep: #237a35;
  --mint:       #8ef39b;   /* green, legible on noir */

  /* Hairlines */
  --line:       rgba(22, 20, 15, .14);
  --line-2:     rgba(22, 20, 15, .3);
  --line-inv:   rgba(247, 243, 234, .16);
  --line-inv-2: rgba(247, 243, 234, .34);

  /* Type scale */
  --fs-colossal: clamp(3rem, 9.4vw, 8.4rem);  /* unused: hero words now set on .cine-h1 */
  --fs-mega:     clamp(2.2rem, 5.6vw, 5rem);      /* section megas / footer CTA */
  --fs-title:    clamp(1.8rem, 4vw, 3.4rem);      /* chapter titles */
  --fs-h3:       clamp(1.3rem, 2.4vw, 1.9rem);
  --fs-lead:     clamp(1.06rem, 1rem + .5vw, 1.3rem);
  --fs-body:     1.04rem;
  --fs-sm:       .92rem;
  --fs-micro:    .7rem;

  --ease:  cubic-bezier(.19, 1, .22, 1);
  --ease2: cubic-bezier(.65, 0, .35, 1);

  --gutter: clamp(20px, 4.5vw, 72px);
  --head-h: 68px;
  --maxw: 1560px;
}

/* ================================================================
   02 · RESET / BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: var(--fs-body); line-height: 1.66;
  background: var(--paper); color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.skip-link { position: absolute; left: 16px; top: -64px; z-index: 4000; background: var(--ink); color: var(--ivory); padding: 12px 22px; transition: top .25s var(--ease); }
.skip-link:focus { top: 16px; }

/* Film grain */
.grain {
  position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .34; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ================================================================
   03 · TYPOGRAPHY
   ================================================================ */
h1, h2, h3, h4 { font-family: 'Clash Display', system-ui, sans-serif; font-weight: 500; line-height: 1.02; letter-spacing: -.03em; }
.it { font-family: 'Zodiak', Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-soft); }
.muted { color: var(--muted); }
.measure { max-width: 58ch; }
.measure-s { max-width: 42ch; }

/* Micro label — the system's signature */
.tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--muted);
}
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.tag.plain::before { display: none; }
.tag.inv { color: rgba(247,243,234,.6); }

/* Section index — "01 / Products" rail */
.sec-rail {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: clamp(40px, 6vw, 84px);
}
.sec-rail .idx { font-family: 'Zodiak', serif; font-style: italic; font-size: 1.05rem; color: var(--green-deep); }
.sec-rail.inv { border-color: var(--line-inv); }
.sec-rail.inv .idx { color: var(--mint); }

.mega { font-size: var(--fs-mega); letter-spacing: -.035em; line-height: .98; }
.title { font-size: var(--fs-title); }

/* line-mask reveal (JS-driven) */
.lines .ln { display: block; overflow: hidden; padding: .06em .05em .12em; margin: -.06em -.05em -.12em; }
.lines .ln > .li { display: block; will-change: transform; }

/* ================================================================
   04 · LAYOUT
   ================================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.blk { padding-block: clamp(68px, 9.02vw, 131px); position: relative; }
.blk.flush { padding-block: 0; }
.blk.dark { background: var(--noir); color: var(--ivory); }
.blk.dark h1, .blk.dark h2, .blk.dark h3 { color: var(--ivory); }
.blk.raised { background: var(--raised); border-block: 1px solid var(--line); }
.hr { border: 0; height: 1px; background: var(--line); }

/* ================================================================
   05 · BUTTONS & LINKS
   ================================================================ */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 30px; border-radius: 2px;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  will-change: transform;
}
.btn svg { width: 17px; height: 17px; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-ink { background: var(--ink); color: var(--ivory); }
.btn-ink:hover { background: #000; }
.btn-ivory { background: var(--ivory); color: var(--ink); }
.btn-ivory:hover { background: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-deep); }
.btn-out { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.btn-out:hover { border-color: var(--ink); }
.btn-out.inv { border-color: var(--line-inv-2); color: var(--ivory); }
.btn-out.inv:hover { border-color: var(--ivory); }

/* underline link */
.ul-link { position: relative; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-sm); padding-bottom: 4px; }
.ul-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .5s var(--ease); }
.ul-link:hover::after { transform: scaleX(.4); }
.ul-link svg { width: 15px; height: 15px; }

/* ================================================================
   06 · HEADER — minimal chrome, difference blend
   ================================================================ */
.head {
  position: fixed; inset: 0 0 auto 0; height: var(--head-h); z-index: 300;
  display: flex; align-items: center;
  padding-inline: var(--gutter);
  background: #fff;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: box-shadow .35s var(--ease);
}
.head.scrolled { box-shadow: 0 6px 26px rgba(22, 20, 15, .08); }
.head-in { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.head .wordmark { display: flex; align-items: center; gap: 12px; }
/* full colour lockup on the solid white bar */
.head .wordmark span { display: none; }
.head .wordmark img { width: auto; height: 42px; transition: transform .35s var(--ease); }

/* header is a solid white bar - no adaptive chrome needed */
.head .menu-btn { color: var(--ink); }
.head .wordmark .wm-t { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.22rem; letter-spacing: -.01em; }
.head .wordmark .wm-s { display: block; font-family: 'Switzer'; font-size: .56rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .64; margin-top: 2px; }

/* desktop primary nav - procurement visitors should not have to open a menu */
.head-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.head-nav a { position: relative; color: inherit; font-size: var(--fs-sm); font-weight: 500; letter-spacing: .01em; padding-bottom: 3px; white-space: nowrap; }
.head-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.head-nav a { transition: color .3s var(--ease); }
.head-nav a:hover { color: var(--green-deep); }
.head-nav a:hover::after, .head-nav a[aria-current="page"]::after { transform: scaleX(1); }
.head-nav a[aria-current="page"] { font-weight: 600; }
.head-nav .nav-cta {
  background: var(--brand); color: var(--ivory);
  padding: 9px 19px; border-radius: 100px; font-weight: 600;
  transition: background .35s var(--ease), color .35s var(--ease), transform .25s var(--ease);
}
.head-nav .nav-cta::after { display: none; }
.head-nav .nav-cta:hover { background: var(--ink); color: var(--ivory); transform: translateY(-1px); }
.head-nav .nav-cta[aria-current="page"] { background: var(--ink); }
.head-nav { color: var(--ink); }
.head-right { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); }
.head-cta { color: var(--ivory); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; position: relative; padding-bottom: 3px; }
.head-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.head-cta:hover::after { transform: scaleX(1); }

.menu-btn { display: inline-flex; align-items: center; gap: 12px; color: var(--ivory); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.menu-btn .mb-ic { position: relative; width: 30px; height: 12px; }
.menu-btn .mb-ic span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .45s var(--ease), width .45s var(--ease); }
/* desktop uses the nav bar; the burger is mobile-only */
@media (min-width: 901px) { .head .menu-btn { display: none; } }
.menu-btn .mb-ic span:first-child { top: 0; }
.menu-btn .mb-ic span:last-child { bottom: 0; width: 66%; }
.menu-btn:hover .mb-ic span:last-child { width: 100%; }
body.menu-open .menu-btn .mb-ic span:first-child { transform: translateY(5px) rotate(45deg); }
body.menu-open .menu-btn .mb-ic span:last-child { transform: translateY(-5px) rotate(-45deg); width: 100%; }

/* ================================================================
   07 · FULLSCREEN MENU
   ================================================================ */
.menu {
  position: fixed; inset: 0; z-index: 250; background: var(--noir); color: var(--ivory);
  display: flex; flex-direction: column; justify-content: flex-end;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease), visibility .6s;
}
body.menu-open .menu { visibility: visible; opacity: 1; pointer-events: auto; }
.menu::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 80% 10%, rgba(43,47,146,.28), transparent 62%), radial-gradient(50% 70% at 12% 90%, rgba(61,166,74,.14), transparent 60%); }
.menu-grid { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: end; padding: 0 var(--gutter) clamp(36px, 6vh, 76px); width: 100%; max-width: var(--maxw); margin-inline: auto; }

.menu-nav li { border-top: 1px solid var(--line-inv); overflow: hidden; }
.menu-nav li:last-child { border-bottom: 1px solid var(--line-inv); }
.menu-link {
  display: flex; align-items: baseline; gap: clamp(16px, 2.4vw, 34px);
  padding: clamp(10px, 1.8vh, 22px) 0;
  font-family: 'Clash Display', sans-serif; font-weight: 500;
  font-size: clamp(2.1rem, 5.4vh, 4.3rem); letter-spacing: -.03em; line-height: 1;
  color: rgba(247,243,234,.82);
  transform: translateY(110%); transition: transform .8s var(--ease), color .4s var(--ease), padding-left .5s var(--ease);
}
body.menu-open .menu-link { transform: translateY(0); }
body.menu-open .menu-nav li:nth-child(1) .menu-link { transition-delay: .1s; }
body.menu-open .menu-nav li:nth-child(2) .menu-link { transition-delay: .17s; }
body.menu-open .menu-nav li:nth-child(3) .menu-link { transition-delay: .24s; }
body.menu-open .menu-nav li:nth-child(4) .menu-link { transition-delay: .31s; }
body.menu-open .menu-nav li:nth-child(5) .menu-link { transition-delay: .38s; }
.menu-link .no { font-family: 'Zodiak', serif; font-style: italic; font-size: .32em; color: var(--mint); }
.menu-link:hover, .menu-link[aria-current="page"] { color: var(--ivory); padding-left: 14px; }
.menu-link[aria-current="page"] .no { color: var(--iris); }

.menu-meta { display: grid; gap: 26px; padding-bottom: 8px; }
.menu-meta .mm-block h5 { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(247,243,234,.44); margin-bottom: 12px; font-family: 'Switzer'; }
.menu-meta a, .menu-meta p { color: rgba(247,243,234,.78); font-size: var(--fs-sm); line-height: 1.9; }
.menu-meta a:hover { color: var(--ivory); }
.menu-clock { font-family: 'Zodiak', serif; font-style: italic; color: var(--mint); font-size: 1.05rem; }

/* ================================================================
   08 · INTRO LOADER (first visit per session, fast)
   ================================================================ */
/* Intro: the wordmark wipes in over a drawn rule, then the screen parts.
   No percentage counter - it reads as a progress bar that is not measuring
   anything. Whole sequence is ~1.5s. */
.intro { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; pointer-events: none; }
.intro .in-panel { position: absolute; left: 0; right: 0; height: 50.5%; background: #fff;
  transition: transform .78s var(--ease2); will-change: transform; }
.intro .in-top { top: 0; }
.intro .in-bot { bottom: 0; }
.intro.done .in-top { transform: translateY(-100%); }
.intro.done .in-bot { transform: translateY(100%); }
.intro .in-mark { position: relative; z-index: 2; display: grid; justify-items: center; gap: 18px;
  transition: opacity .3s var(--ease); }
.intro.done .in-mark { opacity: 0; }
/* the COLOURED lockup, so the intro ground had to go light: the wordmark is
   dominantly #181848 and measures 1.18:1 on noir, 4.10:1 on white */
.intro .in-mark img { width: clamp(150px, 26vw, 250px); height: auto;
  clip-path: inset(0 100% 0 0); animation: inMark .6s var(--ease2) .1s forwards; }
.intro .in-rule { display: block; width: clamp(150px, 26vw, 250px); height: 1px; background: var(--line);
  position: relative; overflow: hidden; }
.intro .in-rule::after { content: ""; position: absolute; inset: 0; background: var(--green-deep);
  transform: scaleX(0); transform-origin: left; animation: inRule .62s var(--ease2) .42s forwards; }
@keyframes inMark { to { clip-path: inset(0 0 0 0); } }
@keyframes inRule { to { transform: scaleX(1); } }
html.no-intro .intro { display: none; }

/* ================================================================
   09 · CINEMATIC HERO (home + interior)
   ================================================================ */
.cine {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--noir); color: var(--ivory); overflow: hidden;
}
.cine-media { position: absolute; inset: 0; z-index: 0; }
.cine-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(38%) contrast(1.02) brightness(.58); transform-origin: center; animation: kenburns 16s var(--ease) both alternate infinite; will-change: transform; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
.cine-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(12,11,8,.54) 0%, rgba(12,11,8,.30) 28%, rgba(12,11,8,.50) 70%, rgba(12,11,8,.90) 100%),
    linear-gradient(90deg, rgba(12,11,8,.40) 0%, rgba(12,11,8,.10) 60%, rgba(12,11,8,0) 95%);
}

.cine-body { position: relative; z-index: 2; padding: calc(var(--head-h) + 4vh) var(--gutter) clamp(30px, 7vh, 76px); max-width: var(--maxw); margin-inline: auto; width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.cine-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(18px, 3vh, 34px); }
.cine-eyebrow .rule { width: clamp(40px, 6vw, 90px); height: 1px; background: var(--line-inv-2); }

.cine-h1 { font-size: clamp(1.9rem, 6.6vw, 5.6rem); font-weight: 600; letter-spacing: -.045em; line-height: .88; color: var(--ivory); text-wrap: balance; }
.cine-h1 .thin { font-weight: 400; }
.cine-h1 .it { color: var(--mint); font-weight: 400; }
.cine-h1 .ghost { color: transparent; -webkit-text-stroke: 1.5px rgba(247,243,234,.55); }

.cine-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: clamp(20px, 3.4vh, 40px); }
.cine-sub .lead { color: rgba(247,243,234,.76); max-width: 46ch; }
.cine-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.cine-foot {
  display: none !important;  /* removed: scroll cue / product feed / coordinates */
  position: relative; z-index: 2; margin-top: clamp(28px, 4.5vh, 52px);
  border-top: 1px solid var(--line-inv);
  grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 3vw, 44px);
  padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom));
  max-width: var(--maxw); margin-inline: auto; width: 100%;
  font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; color: rgba(247,243,234,.56);
}
.cine-foot .scroll-cue { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.scroll-cue .dotline { width: 42px; height: 1px; background: var(--line-inv-2); position: relative; overflow: hidden; }
.scroll-cue .dotline::after { content: ""; position: absolute; inset: 0; width: 45%; background: var(--mint); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateX(-130%); } 100% { transform: translateX(320%); } }
.cine-foot .feed { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cine-foot .feed span { display: inline-block; padding-right: 3.4em; }
.cine-foot .coords { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- home hero: photographed ground, inverted chrome ---- */
.cine.hero-img { background: var(--noir); color: var(--ivory); }
/* The photograph is a panel beside the type, not a bed under it. Text sits on
   flat noir, so it needs no veil and no per-image contrast tuning. */
.hero-duo { display: grid; grid-template-columns: 1.3fr .7fr; align-items: stretch; }
.hero-duo .cine-body {
  max-width: none; margin: 0; width: auto;
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2)) clamp(28px, 4vw, 72px);
  justify-content: center;
}
.hero-figure { position: relative; margin: 0; overflow: hidden; border-left: 1px solid var(--line-inv); }
.hero-figure::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12,11,8,.55) 0%, rgba(12,11,8,0) 22%); }
/* hero slideshow: the client's own factory photographs, crossfading */
#heroSlides .hs-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s var(--ease); }
#heroSlides .hs-slide { filter: grayscale(30%) contrast(1.03) brightness(.78); }
#heroSlides .hs-slide.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #heroSlides .hs-slide { transition: none; } }
.cine.hero-img .cine-body { justify-content: center; padding-block: calc(var(--head-h) + 5vh) clamp(38px, 7vh, 96px); }
/* sized to the type COLUMN, not the viewport: at 6.6vw the 28-char second line
   needed 1017px and wrapped inside its overflow:hidden .ln */
.cine.hero-img .cine-h1 { color: var(--ivory); font-size: clamp(1.8rem, 4.4vw, 3.6rem); margin-bottom: clamp(18px, 2.6vh, 32px); }
.cine.hero-img .cine-h1 .it { color: var(--mint); }
/* Industries hero headline: was --fs-colossal (9.4vw -> ~120px at 1280), which
   dwarfed every other heading. Reduced ~30%. The low 1.9rem FLOOR matters as
   much as the cap: --fs-colossal's 3rem floor beat its own vw term on phones
   and forced "and traded to spec." to wrap inside its overflow:hidden .ln. */
body.t-ind .cine-h1 { font-size: clamp(1.9rem, 6.6vw, 5.6rem); }
/* the real facility photo is brighter than the stock one it replaced:
   .6 alpha measures 4.02 on it, .72 measures 5.01 */
body.t-ind .cine-eyebrow .tag.inv { color: rgba(247,243,234,.72); }
body.t-mkt .cine-h1 { font-size: clamp(1.7rem, 6.6vw, 5.6rem); }  /* lower floor than t-ind: "and technical textiles." is longer */
.cine.hero-img .lead { color: rgba(247,243,234,.84); }
/* the panel sits over the photo - keep it opaque and edged so it reads as a card */
/* veil tuned to THIS photo: the lightest scrim that still clears AA on every
   hero element, so the bottling line stays visible. Scoped so the interior
   heroes keep their own separately-verified veil. */
.cine.hero-img .cine-media img { filter: grayscale(38%) contrast(1.02) brightness(.62); }
.cine.hero-img .cine-veil {
  background:
    linear-gradient(180deg, rgba(12,11,8,.46) 0%, rgba(12,11,8,.30) 28%, rgba(12,11,8,.48) 70%, rgba(12,11,8,.70) 100%),
    linear-gradient(90deg, rgba(12,11,8,.30) 0%, rgba(12,11,8,.02) 60%, rgba(12,11,8,0) 95%);
}


/* ---- HOME HERO ON WHITE --------------------------------------------------
   Scoped to .hero-duo so the interior heroes (.cine.short, photo-bed + veil)
   keep their dark treatment. Every colour below measured on #ffffff:
   ink 18.40:1, ink-soft 10.03:1, green-deep 5.38:1, brand 10.91:1. */
.cine.hero-img.hero-duo { background: var(--paper); color: var(--ink); }
.cine.hero-img.hero-duo .cine-h1 { color: var(--ink); }
.cine.hero-img.hero-duo .cine-h1 .it { color: var(--green-deep); }
.cine.hero-img.hero-duo .lead { color: var(--ink-soft); }
/* the photo is no longer a dark neighbour: keep it bright and let it fade into
   the white panel instead of into black */
.hero-duo .hero-figure { border-left-color: var(--line); }
.hero-duo .hero-figure::after {
  background: linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 18%); }
.hero-duo #heroSlides .hs-slide { filter: contrast(1.03) saturate(.92); }
/* route pills invert with the ground */
:is(.hero-duo, .hero-stack) .hr-opt { background: var(--paper); border-color: var(--line-2); color: var(--ink);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
:is(.hero-duo, .hero-stack) .hr-opt:hover { background: var(--raised); border-color: var(--ink); }
:is(.hero-duo, .hero-stack) .hr-go { border-color: var(--line-2); color: var(--ink); }
:is(.hero-duo, .hero-stack) .hero-route .hr-opt:nth-child(1) .hr-k { color: var(--green-deep); }
:is(.hero-duo, .hero-stack) .hero-route .hr-opt:nth-child(2) .hr-k { color: var(--brand); }
:is(.hero-duo, .hero-stack) .hr-opt:hover .hr-go { color: var(--ivory); }

/* ---- HOME HERO: centred stack over a full-width band --------------------
   The photograph is no longer a column beside the type: the statement sits
   centred at the top of the page and the plant runs edge to edge beneath it. */
.cine.hero-img.hero-stack { background: var(--paper); color: var(--ink); justify-content: flex-start; }
.hero-stack .hero-head {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-start; text-align: center;
  padding-block: calc(var(--head-h) + clamp(24px, 5vh, 64px)) clamp(20px, 3vh, 44px);
}
/* sized to the FULL column now, not a 0.65 one: "Consistency is our delivery."
   needs 12.04px of ink per font px, so 5.6vw clears 1151px of usable width at
   1280. The 1.55rem floor is what keeps it on one line at 360px. */
.cine.hero-img.hero-stack .cine-h1 {
  color: var(--ink); font-size: clamp(1.55rem, 5.6vw, 4.4rem);
  line-height: .92; letter-spacing: -.045em; margin-bottom: 0;
}
.cine.hero-img.hero-stack .cine-h1 .it { color: var(--green-deep); }
.cine.hero-img.hero-stack .lead {
  color: var(--ink-soft); max-width: 74ch; margin: clamp(18px, 2.6vh, 30px) auto 0;
}
.hero-stack .hero-route { max-width: 620px; margin-inline: auto; margin-top: clamp(22px, 3vh, 34px); }
.hero-stack .hero-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(20px, 4.5vw, 64px); margin-top: clamp(22px, 3.2vh, 40px); }
.hero-stack .hero-facts .v { display: block; font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.3rem; }
.hero-stack .hero-facts .k { display: block; font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.hero-band { position: relative; margin: 0; width: 100%; overflow: hidden; background: var(--noir); height: clamp(360px, 68vh, 920px); }
/* the id carries the filter, so the override has to out-rank it */
#heroSlides.hero-band .hs-slide { filter: contrast(1.03) saturate(.92); }

/* ---- hero routing: two direct paths into the divisions ---- */
/* hero splits: statement on the left, the two division routes on the right */
/* Two columns of EQUAL HEIGHT: the statement on the left, the routes on the
   right as one framed object split into two equal halves. align-items:stretch
   is what makes the panel match the text block rather than float beside it. */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .6fr);
  gap: clamp(24px, 3.4vw, 64px); align-items: center; width: 100%;
}
.hs-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.hs-main .lead { margin-top: clamp(22px, 3.4vh, 42px); max-width: 52ch; }

/* one bordered panel, one hairline between the halves - no gap, no second border */
/* two separate boxes with a gap, each carrying its own frame and glass */
.hero-route { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.1vw, 16px); min-width: 0; margin-top: clamp(22px, 3.2vh, 40px); }
.hr-opt {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 16px; padding: 14px clamp(17px, 1.9vw, 22px);
  min-height: 62px;
  border: 1px solid var(--line-inv-2); border-radius: 2px;   /* 2px matches .btn */
  background: rgba(12,11,8,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .35s var(--ease);
}
.hr-opt:hover { background: rgba(12,11,8,.78); border-color: var(--ivory); transform: translateY(-2px); }
.hr-k { grid-column: 1; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.hr-go { grid-column: 2; width: 30px; height: 30px; border: 1px solid var(--line-inv-2); border-radius: 50%; display: grid; place-items: center; color: var(--ivory); transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); }
/* each route wears its own division accent (Industries green, Marketing blue),
   so the two paths are told apart by colour, not just by reading the words.
   Measured on this panel: mint 9.70:1, azure 6.63:1. */
.hero-route .hr-opt:nth-child(1) .hr-k { color: var(--mint); }
.hero-route .hr-opt:nth-child(2) .hr-k { color: var(--azure); }
.hero-route .hr-opt:nth-child(1):hover .hr-go { background: var(--green-deep); border-color: var(--green-deep); }
.hero-route .hr-opt:nth-child(2):hover .hr-go { background: var(--brand); border-color: var(--brand); }
.hr-go svg { width: 42%; height: 42%; }
.hr-opt:hover .hr-go { transform: rotate(-45deg); }

/* compact interior variant */
.cine.short { min-height: 72svh; }

/* ================================================================
   10 · MANIFESTO — editorial statement block
   ================================================================ */
.manifesto { display: grid; grid-template-columns: minmax(140px, .8fr) 2.2fr; gap: clamp(24px, 5vw, 100px); align-items: start; }
.manifesto .side { position: sticky; top: calc(var(--head-h) + 20px); }
.manifesto .m-copy { font-family: 'Clash Display', sans-serif; font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 3.1rem); line-height: 1.22; letter-spacing: -.02em; }
.manifesto .m-copy .dim { color: var(--faint); }
.manifesto .m-copy .hi { color: var(--brand); }
.manifesto .m-copy .hi-g { color: var(--green-deep); }
.manifesto .m-after { margin-top: clamp(26px, 4vw, 48px); display: flex; gap: clamp(24px, 5vw, 70px); flex-wrap: wrap; }
.manifesto .m-after .fact .v { font-family: 'Clash Display'; font-weight: 600; font-size: 1.3rem; }
.manifesto .m-after .fact .k { display: block; font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
/* manifesto on a dark ground */
.blk.dark .manifesto .m-copy .dim { color: rgba(247,243,234,.46); }
.blk.dark .manifesto .m-copy .hi { color: var(--iris); }
.blk.dark .manifesto .m-copy .hi-g { color: var(--mint); }
.blk.dark .manifesto .m-after .fact .k { color: rgba(247,243,234,.6); }

/* ================================================================
   11 · PRODUCT GRID — editorial, no card chrome
   ================================================================ */
.chapters {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 3.6vw, 58px) clamp(20px, 2.4vw, 40px);
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(8px, 1.6vw, 24px) var(--gutter) clamp(50px, 7vw, 96px);
}
.chapter {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
}

.chp-media { position: relative; overflow: hidden; order: -1; aspect-ratio: 4 / 3; margin-bottom: clamp(16px, 1.8vw, 24px); }
.chp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(58%) contrast(1.05) brightness(.86); transition: filter 1s var(--ease), transform 1.4s var(--ease); }
.chapter:hover .chp-media img { filter: grayscale(0%) contrast(1.02) brightness(.96); transform: scale(1.035); }
.chp-media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(22,20,15,.12); }
/* caption scrim: white .cm-cap measures 1.8:1 unaided on a bright photo; a .45+
   floor over the caption band takes it to 5.4:1 */
.chp-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.45) 15%, rgba(0,0,0,0) 42%); }
.chp-media:not(:has(.cm-cap))::before { display: none; }
.chp-media .cm-cap { position: absolute; left: 16px; bottom: 14px; z-index: 2; color: #fff; font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; opacity: .9; text-shadow: 0 2px 12px rgba(0,0,0,.55); }

.chp-info { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 0; }
.chp-ghost { display: none; }  /* the kicker carries the number in this layout */
.chp-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.chp-kicker .no { font-family: 'Zodiak', serif; font-style: italic; font-size: 1rem; color: var(--green-deep); }
.chp-kicker .div { font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; color: var(--faint); }
.chp-info h3 { font-size: clamp(1.35rem, 2vw, 1.85rem); letter-spacing: -.03em; margin-bottom: 10px; max-width: 16ch; }
.chp-info p { color: var(--muted); font-size: var(--fs-sm); max-width: 46ch; margin-bottom: 16px; }
.chp-specs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.chp-specs span { font-size: .74rem; font-weight: 500; letter-spacing: .05em; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 100px; color: var(--ink-soft); }
.chp-info .ul-link { margin-top: auto; }

/* ================================================================
   13 · BIG STATS
   ================================================================ */
.bigstats { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.bstat { padding: clamp(30px, 4.4vw, 64px) clamp(18px, 2.4vw, 44px); border-left: 1px solid var(--line); }
.bstat:first-child { border-left: 0; padding-left: 0; }
.bstat .n { font-family: 'Clash Display'; font-weight: 600; font-size: clamp(3rem, 6.4vw, 6rem); line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.bstat .n .u { color: var(--green-deep); font-family: 'Zodiak', serif; font-style: italic; font-weight: 400; font-size: .55em; }
.bstat .k { margin-top: 16px; font-size: var(--fs-sm); color: var(--muted); max-width: 20ch; }
.blk.dark .bigstats { border-color: var(--line-inv); }
.blk.dark .bstat { border-color: var(--line-inv); }
.blk.dark .bstat .n .u { color: var(--mint); }
.blk.dark .bstat .k { color: rgba(247,243,234,.6); }

/* ================================================================
   15 · PILLARS — numbered editorial list
   ================================================================ */

/* ================================================================
   16 · QUOTE BAND (cinematic)
   ================================================================ */
.quote-band { position: relative; overflow: hidden; min-height: clamp(440px, 68vh, 700px); display: grid; place-items: center; background: var(--noir); color: var(--ivory); }
.quote-band .qb-media { position: absolute; inset: -12% 0; }
.quote-band .qb-media img { width: 100%; height: 124%; object-fit: cover; filter: grayscale(100%) brightness(.42) contrast(1.06); }
.quote-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 90% at 50% 50%, transparent 30%, rgba(12,11,8,.72)); }
.quote-band .qb-in { position: relative; z-index: 2; text-align: center; padding: clamp(56px, 9vw, 120px) var(--gutter); max-width: 1150px; }
.quote-band .qb-line { font-family: 'Clash Display'; font-weight: 500; font-size: clamp(1.9rem, 4.6vw, 4.4rem); line-height: 1.06; letter-spacing: -.03em; }
.quote-band .qb-line .it { color: var(--mint); font-weight: 400; }
.quote-band .qb-sub { margin-top: 24px; color: rgba(247,243,234,.72); font-size: var(--fs-lead); max-width: 54ch; margin-inline: auto; }

/* ================================================================
   17 · EDITORIAL SPLITS / CARDS / PILLS
   ================================================================ */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 110px); align-items: start; }
.duo .sticky { position: sticky; top: calc(var(--head-h) + 24px); }

.panel { background: var(--raised); border: 1px solid var(--line); padding: clamp(26px, 3.4vw, 48px); }
.blk.dark .panel { background: var(--noir-2); border-color: var(--line-inv); }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 40px); }
.facts .f .v { font-family: 'Clash Display'; font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1; }
.facts .f .v.b { color: var(--brand); }
.facts .f .v.g { color: var(--green-deep); }
.facts .f p { color: var(--muted); font-size: var(--fs-sm); margin-top: 8px; }

.pillrow { display: flex; flex-wrap: wrap; gap: 10px; }
.pillrow .pl { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid var(--line-2); border-radius: 100px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-soft); }
.pillrow .pl b { font-family: 'Clash Display'; color: var(--brand); font-weight: 600; }
.blk.dark .pillrow .pl { border-color: var(--line-inv-2); color: rgba(247,243,234,.78); }
.blk.dark .pillrow .pl b { color: var(--iris); }

/* capability rows — quiet label + pills, hairline separated (no cards) */
.caprows { margin-top: clamp(30px, 4.4vw, 58px); border-top: 1px solid var(--line); }
.caprows.tight { margin-top: clamp(24px, 3.2vw, 40px); }
.caprow { display: grid; grid-template-columns: minmax(150px, .48fr) 1fr; gap: clamp(14px, 3vw, 46px); align-items: baseline; padding: clamp(20px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--line); }
.caprow .ck { font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; color: var(--faint); }
.blk.dark .caprows { border-top-color: var(--line-inv); }
.blk.dark .caprow { border-bottom-color: var(--line-inv); }
.blk.dark .caprow .ck { color: rgba(247,243,234,.45); }
.pillrow .pl em { font-style: normal; font-size: .82em; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-left: 3px; }
.blk.dark .pillrow .pl em { color: rgba(247,243,234,.45); }

/* image figure with caption rail */
.fig { position: relative; overflow: hidden; }
.fig img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(46%) contrast(1.04); transition: filter 1s var(--ease), transform 1.3s var(--ease); }
.fig:hover img { filter: grayscale(0); transform: scale(1.03); }
.fig .fig-rail { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 14px 18px; color: #fff; font-size: var(--fs-micro); letter-spacing: .24em; text-transform: uppercase; background: linear-gradient(transparent, rgba(12,11,8,.68)); }

/* ================================================================
   17b · LEGAL DOCUMENTS (privacy / terms)
   ================================================================ */
.legal { max-width: 74ch; }
.legal .lead { color: var(--ink-soft); margin-bottom: clamp(26px, 3.4vw, 40px); }
.legal h2 {
  font-family: 'Clash Display', sans-serif; font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.42rem); letter-spacing: -.02em; color: var(--ink);
  margin-top: clamp(30px, 3.8vw, 48px); margin-bottom: 12px;
  padding-top: clamp(18px, 2.2vw, 26px); border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: clamp(24px, 3vw, 34px); }
.legal p { color: var(--muted); margin-bottom: 14px; }
.legal ul { color: var(--muted); margin: 0 0 14px; padding-left: 0; list-style: none; }
.legal li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.legal li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 6px; height: 1px; background: var(--green); }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-2); }
.legal a:hover { text-decoration-color: var(--green); }
.legal b { color: var(--ink); font-weight: 600; }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.legal .legal-note {
  background: var(--raised); border-left: 2px solid var(--green);
  padding: 14px 18px; margin: 18px 0 22px; font-size: var(--fs-sm); color: var(--ink-soft);
}

/* footer legal links */
.foot-legal { display: inline-flex; flex-wrap: wrap; gap: 18px; }
.foot-legal a { color: rgba(247,243,234,.62); }
.foot-legal a:hover { color: var(--ivory); }

/* ================================================================
   17c · SPEC TABLES / PRODUCT CARDS / FILTER  (procurement detail)
   ================================================================ */
.spectable-wrap { overflow-x: auto; margin-top: clamp(22px, 2.8vw, 34px); -webkit-overflow-scrolling: touch; }
.spectable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 640px; }
.spectable th, .spectable td { text-align: left; padding: 13px 18px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spectable thead th { font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-weight: 600; border-bottom-color: var(--line-2); white-space: nowrap; }
.spectable tbody td { color: var(--muted); }
.spectable tbody td:first-child { color: var(--ink); font-weight: 500; }
.spectable tbody tr:hover td { color: var(--ink); }
.blk.dark .spectable th, .blk.dark .spectable td { border-bottom-color: var(--line-inv); }
.blk.dark .spectable tbody td { color: rgba(247,243,234,.7); }
.blk.dark .spectable tbody td:first-child { color: var(--ivory); }

.psearch { display: block; margin-top: clamp(18px, 2.2vw, 26px); }
.psearch input {
  width: 100%; max-width: 520px; font: inherit; font-size: var(--fs-sm); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line-2);
  padding: 12px 2px; transition: border-color .35s var(--ease);
}
.psearch input::placeholder { color: var(--faint); }
.psearch input:focus { outline: none; border-bottom-color: var(--green); }

.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(20px, 2.4vw, 28px); }
.pcard { border: 1px solid var(--line); padding: clamp(16px, 1.8vw, 22px); background: var(--raised); transition: border-color .35s var(--ease), transform .35s var(--ease); }
.pcard:hover { border-color: var(--line-2); transform: translateY(-2px); }
.pcard h4 { font-family: 'Clash Display', sans-serif; font-weight: 500; font-size: 1.02rem; letter-spacing: -.015em; margin-bottom: 8px; }
.pcard p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 12px; }
.pcard-m { display: inline-block; font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--green-deep); }
.pcard[hidden], .caprow[hidden] { display: none; }
.psearch-empty { margin-top: 18px; color: var(--muted); font-size: var(--fs-sm); }
.c-input.c-file { padding: 10px 0; font-size: var(--fs-sm); }
.c-input.c-file::file-selector-button { font: inherit; font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; margin-right: 14px; padding: 8px 16px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; border-radius: 100px; }
.c-input.c-file::file-selector-button:hover { border-color: var(--ink); }
.c-form-error { margin-top: 16px; color: #c43a3a; font-size: var(--fs-sm); }
.speclist { list-style: none; padding: 0; margin: 12px 0 0; }
.speclist li { position: relative; padding-left: 20px; margin-bottom: 7px; color: var(--muted); font-size: var(--fs-sm); }
.speclist li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 7px; height: 1px; background: var(--green); }
.speclist b { color: var(--ink); font-weight: 600; }
body.t-mkt .speclist li::before { background: var(--brand); }
.pcard.wide { grid-column: span 2; }
/* range intro: copy left, filter right, so the search sits with the grid it drives */
.range-head { display: grid; grid-template-columns: 1fr minmax(240px, .42fr); gap: clamp(18px, 3vw, 54px); align-items: end; margin-bottom: clamp(22px, 2.6vw, 32px); }
.range-head .psearch { margin-top: 0; }
/* customers reads image-first, mirroring the duos above it */
.duo.mirror { grid-template-columns: .82fr 1fr; }
@media (max-width: 900px) {
  .range-head { grid-template-columns: 1fr; align-items: start; }
  .duo.mirror { grid-template-columns: 1fr; }
}
.pcard h4 { font-size: var(--fs-sm); letter-spacing: .14em; text-transform: uppercase; }
.pcard .speclist { margin-top: 10px; }
.pcard.wide .speclist { columns: 2; column-gap: 26px; }
.pcard.wide .speclist li { break-inside: avoid; }
.pcard .note { margin-top: 10px; font-size: var(--fs-micro); color: var(--faint); }
/* Marketing carries the most copy on the site - tighten its vertical rhythm */
body.t-mkt .blk { padding-block: clamp(34px, 4.4vw, 68px); }
body.t-mkt .blk.tight-blk { padding-block: clamp(24px, 3vw, 44px); }
.enquire-strip { display: grid; grid-template-columns: 1fr auto; gap: clamp(18px, 3vw, 48px); align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: clamp(20px, 2.6vw, 30px); }
@media (max-width: 900px) {
  .pcard.wide { grid-column: auto; }
  .pcard.wide .speclist { columns: 1; }
  .enquire-strip { grid-template-columns: 1fr; }
}
/* the products ARE the content in these rows, so the chips carry the emphasis:
   outlined, no fill, with full-strength --ink text rather than --ink-soft. */
.pillrow.products { gap: 8px; }
.pillrow.products .pl { background: transparent; color: var(--ink); border-color: var(--line-2); padding: 9px 15px; }
.pillrow.products .pl:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
/* blend / construction shown as its own field inside the chip, split by a hairline.
   --muted, not --faint: at ~12px on --paper, faint measures 2.45:1 and fails AA;
   muted is 4.75:1. */
.pillrow.products .pl em { font-style: normal; font-size: .8em; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-left: 11px; padding-left: 11px; border-left: 1px solid var(--line-2); }
.pillrow.products .pl:hover em { color: rgba(247,243,234,.75); border-left-color: rgba(247,243,234,.35); }
/* one reference image per sector / stock row, sitting above its label in the
   left column. Muted by default so 8 photos don't shout over the chips. */
.sec-side { display: block; }
.ck-media { display: block; position: relative; width: 100%; max-width: 260px; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 12px; background: var(--line); }
.ck-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(22%) contrast(1.01) brightness(1.01) saturate(.94); transition: filter .8s var(--ease), transform 1.2s var(--ease); }
.caprow.sector:hover .ck-media img { filter: none; transform: scale(1.04); }
@media (max-width: 900px) { .ck-media { max-width: 100%; } }
/* facility gallery - the client's own plant photographs */
.facgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(26px, 3.2vw, 42px); }
.facshot { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--line); }
.facshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(18%) contrast(1.02); transition: filter .8s var(--ease), transform 1.2s var(--ease); }
.facshot:hover img { filter: none; transform: scale(1.04); }
.facshot::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,.56) 16%, rgba(0,0,0,0) 45%); }
.facshot figcaption { position: absolute; z-index: 2; left: 12px; bottom: 10px; z-index: 2; color: #fff; font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
@media (max-width: 900px) { .facgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* full-bleed facility panorama: shown at its natural 2.67:1 so the yard reads
   end to end; cropped tighter on phones so it does not become a sliver */
.fullband { position: relative; display: block; margin: 0; width: 100%; overflow: hidden; background: var(--noir); }
.fullband img { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .fullband img { aspect-ratio: 2 / 1; object-fit: cover; } }
/* principal descriptor, sitting under the supplier name as a subheading */
.sup-sub { font-family: 'Zodiak', Georgia, serif; font-style: italic; font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem); line-height: 1.35; letter-spacing: -.01em;
  color: var(--ink-soft); max-width: 62ch; margin: -18px 0 clamp(22px, 2.8vw, 34px); }
@media (max-width: 900px) { .sup-sub { margin-top: -10px; } }
.caprow.sector { align-items: start; }
.caprow.sector .ck { color: var(--ink); font-size: var(--fs-sm); letter-spacing: .16em; font-weight: 600; }
.caprow.sector p { color: var(--muted); font-size: var(--fs-sm); max-width: 62ch; }
.caprow.sector .note { margin-top: 12px; color: var(--faint); }
.psearch-empty a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* partner logos: real wordmarks, not initials */
.plogos { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.4vw, 16px); }
.plogo {
  display: inline-flex; flex-direction: column; gap: 3px;
  padding: 12px 18px; border: 1px solid var(--line-2); border-radius: 4px;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.plogo:hover { border-color: var(--ink); background: var(--raised); }
.plogo .pl-name { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: -.01em; color: var(--ink); }
.plogo .pl-note { font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }

/* ================================================================
   18 · TIMELINE (about) — editorial ledger
   ================================================================ */
.ledger { border-top: 1px solid var(--line); }
.ledger-row { display: grid; grid-template-columns: minmax(120px, .5fr) 1fr 1.4fr; gap: clamp(16px, 3.4vw, 60px); padding: clamp(24px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: background .5s var(--ease), padding-left .5s var(--ease); }
.ledger-row:hover { background: linear-gradient(90deg, rgba(43,47,146,.045), transparent 60%); padding-left: 14px; }
.ledger-row .yr { font-family: 'Clash Display'; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -.02em; color: var(--brand); }
.ledger-row h3 { font-size: var(--fs-h3); margin-bottom: 6px; }
.ledger-row p { color: var(--muted); font-size: var(--fs-sm); max-width: 58ch; }
.ledger-row .tagline { display: inline-block; margin-top: 10px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--green-deep); }

/* ================================================================
   19 · SECTORS (marketing)
   ================================================================ */
.sector-cols { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.sector-col { padding: clamp(28px, 3.4vw, 52px); border-left: 1px solid var(--line); transition: background .5s var(--ease); }
.sector-col:first-child { border-left: 0; }
.sector-col:hover { background: var(--raised); }
.sector-col .s-no { font-family: 'Zodiak', serif; font-style: italic; color: var(--green-deep); font-size: 1.2rem; margin-bottom: 18px; }
.sector-col h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.sector-col p { color: var(--muted); font-size: var(--fs-sm); }

/* ================================================================
   20 · CONTACT — underline form, premium ledger style
   ================================================================ */
.c-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); }
.c-field { position: relative; margin-bottom: clamp(24px, 3.4vw, 40px); }
.c-field label { display: block; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.c-field label .req { color: var(--green-deep); }
.c-input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2);
  padding: 10px 2px 14px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink);
  border-radius: 0; transition: border-color .35s var(--ease);
}
.c-input::placeholder { color: var(--faint); }
.c-input:focus { outline: none; border-bottom-color: var(--ink); }
textarea.c-input { resize: vertical; min-height: 110px; line-height: 1.5; }
.c-field.error .c-input { border-bottom-color: #c43a3a; }
.c-field .err { display: none; position: absolute; right: 0; top: 0; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: #c43a3a; }
.c-field.error .err { display: block; }

.seg { display: flex; gap: 10px; flex-wrap: wrap; }
.seg input { position: absolute; opacity: 0; }
.seg label { display: inline-flex; flex-direction: column; gap: 3px; padding: 14px 22px; border: 1px solid var(--line-2); border-radius: 3px; cursor: pointer; font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; transition: all .3s var(--ease); }
.seg label small { font-weight: 400; color: var(--muted); font-size: .8rem; }
.seg input:checked + label { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.seg input:checked + label small { color: rgba(247,243,234,.66); }
.seg input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 3px; }

.c-aside .c-line { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.c-aside .c-line .k { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.c-aside .c-line .v { font-size: var(--fs-body); font-weight: 500; text-align: right; }
.c-aside .c-line .v a:hover { color: var(--brand); }

.c-success { display: none; padding: clamp(30px, 5vw, 60px) 0; }
.c-success.show { display: block; }
.c-success .cs-mark { width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--green); color: var(--green-deep); display: grid; place-items: center; margin-bottom: 22px; }
.c-success .cs-mark svg { width: 44%; }

/* ================================================================
   21 · FOOTER — mega CTA + watermark
   ================================================================ */
.foot { position: relative; background: var(--noir); color: var(--ivory); overflow: hidden; }
.foot-cta { display: block; padding: clamp(64px, 10vw, 140px) var(--gutter) clamp(44px, 6vw, 90px); max-width: var(--maxw); margin-inline: auto; }
.foot-cta .tag { margin-bottom: 22px; }
.foot-cta .fc-line {
  font-family: 'Clash Display'; font-weight: 500; letter-spacing: -.035em; line-height: 1;
  font-size: clamp(2.4rem, 6.6vw, 6rem); color: var(--ivory);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap;
}
.foot-cta .fc-line .it { color: var(--mint); font-weight: 400; }
.foot-cta .fc-go { width: clamp(56px, 7vw, 96px); height: clamp(56px, 7vw, 96px); border: 1px solid var(--line-inv-2); border-radius: 50%; display: grid; place-items: center; transition: background .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease); flex-shrink: 0; }
.foot-cta .fc-go svg { width: 36%; height: 36%; }
.foot-cta:hover .fc-go { background: var(--green); border-color: var(--green); transform: rotate(-45deg); }

/* footer email picker — choose a division, then mailto (contact page) */
.mailpick > summary { list-style: none; cursor: pointer; }
.mailpick > summary::-webkit-details-marker { display: none; }
.mailpick > summary::marker { content: ""; }
.mailpick > summary .fc-hint {
  display: inline-block; margin-top: 22px;
  font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; color: rgba(247,243,234,.42);
  transition: color .45s var(--ease);
}
.mailpick > summary:hover .fc-hint { color: var(--mint); }
.mailpick[open] > summary.foot-cta { padding-bottom: clamp(26px, 3.2vw, 44px); }
.mailpick[open] > summary.foot-cta .fc-go,
.mailpick[open] > summary.foot-cta:hover .fc-go { background: var(--green); border-color: var(--green); transform: rotate(90deg); }
.mailpick[open] > summary .fc-hint { color: var(--mint); }

.mp-opts { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) clamp(44px, 6vw, 90px); }
.mp-opt {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center; gap: clamp(14px, 2.4vw, 34px);
  padding: clamp(22px, 2.8vw, 34px) 0; border-top: 1px solid var(--line-inv);
}
.mp-opt:last-child { border-bottom: 1px solid var(--line-inv); }
.mp-opt::before { content: ""; position: absolute; inset: 0 -20px; background: rgba(247,243,234,.05); opacity: 0; transition: opacity .45s var(--ease); }
.mp-opt:hover::before, .mp-opt:focus-visible::before { opacity: 1; }
.mp-opt > * { position: relative; }
.mp-k { display: block; font-family: 'Clash Display', sans-serif; font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.8rem); letter-spacing: -.02em; color: var(--ivory); }
.mp-n { display: block; margin-top: 9px; font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; color: rgba(247,243,234,.42); }
.mp-m { font-size: var(--fs-sm); color: rgba(247,243,234,.66); word-break: break-word; transition: color .45s var(--ease); }
.mp-opt:hover .mp-m { color: var(--mint); }
.mp-go { width: clamp(40px, 4.4vw, 56px); height: clamp(40px, 4.4vw, 56px); border: 1px solid var(--line-inv-2); border-radius: 50%; display: grid; place-items: center; transition: background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease); }
.mp-go svg { width: 40%; height: 40%; }
.mp-opt:hover .mp-go { background: var(--green); border-color: var(--green); transform: rotate(-45deg); }
.mailpick[open] .mp-opt { animation: mpIn .55s var(--ease) backwards; }
.mailpick[open] .mp-opt:nth-child(2) { animation-delay: .08s; }
@keyframes mpIn { from { opacity: 0; transform: translateY(16px); } }

.foot-grid { display: grid; grid-template-columns: 1.5fr .9fr 1.15fr; gap: clamp(26px, 4vw, 60px); padding: clamp(36px, 5vw, 64px) var(--gutter); border-top: 1px solid var(--line-inv); max-width: var(--maxw); margin-inline: auto; }
.foot h5 { font-family: 'Switzer'; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(247,243,234,.42); margin-bottom: 18px; }
.foot-about { color: rgba(247,243,234,.6); font-size: var(--fs-sm); max-width: 34ch; margin-top: 18px; }
.foot .fbrand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
/* footer uses the full wordmark lockup (text baked in) — sized up so the wordmark reads */
.foot .fbrand span { display: none; }
.foot .fbrand img { width: auto; height: 40px; filter: brightness(0) invert(1); }
.foot .fbrand .t { font-family: 'Clash Display'; font-weight: 600; font-size: 1.25rem; }
.foot .fbrand .s { display: block; font-size: .56rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(247,243,234,.44); margin-top: 3px; }
.foot-links { display: grid; gap: 12px; }
.foot-links a { color: rgba(247,243,234,.66); font-size: var(--fs-sm); transition: color .3s var(--ease), padding-left .3s var(--ease); }
.foot-links a:hover { color: var(--ivory); padding-left: 6px; }
.foot-meta p, .foot-meta a { color: rgba(247,243,234,.66); font-size: var(--fs-sm); line-height: 1.95; display: block; }
.foot-meta .fm-pair { display: block; }
.foot-meta .fm-pair a { display: inline; }
.foot-meta .fm-pair .sep { font-style: normal; color: rgba(247,243,234,.3); padding: 0 8px; }
.foot-meta a:hover { color: var(--ivory); }
.foot-clock { font-family: 'Zodiak', serif; font-style: italic; color: var(--mint); margin-top: 10px; font-size: 1rem; }

.foot-bottom {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px clamp(16px, 3vw, 48px);
  padding: 22px var(--gutter) calc(22px + clamp(60px, 9vw, 150px));
  border-top: 1px solid var(--line-inv); max-width: var(--maxw); margin-inline: auto;
  font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: rgba(247,243,234,.4);
}
.foot-bottom > span:not(.foot-legal):not(.dev-credit) { order: 1; justify-self: start; }
.foot-bottom .foot-legal { order: 2; justify-self: center; }
.foot-bottom .dev-credit { order: 3; justify-self: end; }
.foot-mark {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 46%); z-index: 0; pointer-events: none; user-select: none;
  font-family: 'Clash Display'; font-weight: 600; letter-spacing: -.02em; line-height: .8; white-space: nowrap;
  font-size: clamp(6rem, 17vw, 17rem);
  color: transparent; -webkit-text-stroke: 1px rgba(247,243,234,.07);
}

/* ================================================================
   22 · REVEAL BASE (JS-gated with safety net)
   ================================================================ */
html.js [data-fx] { opacity: 0; }
html.js [data-fx="up"] { transform: translateY(36px); }
html.js [data-fx="fade"] { transform: none; }

/* ================================================================
   23 · THEMES (division accents)
   ================================================================ */
/* Industries = green, Marketing = blue.
   Each accent carries BOTH a light-ground and a dark-ground token, or it fails
   contrast on one of them: green goes --green-deep / --mint, blue goes
   --brand / --azure. Measured on the real hero photos through the .cine filter
   and veil: --mint 7.04 / 6.14, --azure 4.81 / 4.19, plain --sky only 2.97 /
   2.59 (under the 3:1 large-text floor), which is why --sky is not used here. */

/* --- Industries: green --- */
body.t-ind .tag::before                        { background: var(--green); }
body.t-ind .tag.inv::before                    { background: var(--mint); }
body.t-ind .sec-rail .idx                      { color: var(--green-deep); }
body.t-ind .sec-rail.inv .idx                  { color: var(--mint); }
body.t-ind .cine-h1 .it                        { color: var(--mint); }
body.t-ind .menu-link[aria-current="page"] .no { color: var(--mint); }

/* --- Marketing: blue --- */
body.t-mkt .tag::before                        { background: var(--brand); }
body.t-mkt .tag.inv::before                    { background: var(--azure); }
body.t-mkt .sec-rail .idx                      { color: var(--brand); }
body.t-mkt .sec-rail.inv .idx                  { color: var(--azure); }
body.t-mkt .cine-h1 .it                        { color: var(--azure); }
body.t-mkt .menu-link[aria-current="page"] .no { color: var(--azure); }
/* marketing-only components that carried the house green */
body.t-mkt .pcard-m                            { color: var(--brand); }
body.t-mkt .psearch input:focus                { border-bottom-color: var(--brand); }

/* ================================================================
   24 · RESPONSIVE
   ================================================================ */
@media (max-width: 1060px) {
  .cine.hero-img { min-height: 0; }
  .hero-duo { grid-template-columns: 1fr; }
  .hero-duo .cine-body { padding-inline: var(--gutter); }
  .hero-figure { height: clamp(220px, 38vh, 380px); border-left: 0; border-top: 1px solid var(--line-inv); }
  .hero-figure::after { background: linear-gradient(180deg, rgba(12,11,8,.5) 0%, rgba(12,11,8,0) 30%); }
  .hero-route { grid-template-columns: 1fr; }
  .cine.hero-img .cine-body { padding-block: calc(var(--head-h) + 6vh) clamp(46px, 8vh, 84px); }
  .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --head-h: 60px; }
  .head-nav { display: none; }
  .menu-grid { grid-template-columns: 1fr; align-items: center; gap: 0; padding: var(--head-h) var(--gutter) clamp(40px, 9vh, 90px); }
  .menu { justify-content: center; overflow-y: auto; }  /* nav links sit lower / centred, like the desktop menu */
  .menu-link { font-size: clamp(2rem, 8.6vw, 3rem); }
  .menu-meta { display: none; }  /* mobile: clean menu — just the page links */
  .cine-sub { flex-direction: column; align-items: flex-start; }
  .cine-foot { grid-template-columns: 1fr auto; }
  .cine-foot .feed { display: none; }
  .manifesto { grid-template-columns: 1fr; }
  .manifesto .side { position: static; }
  /* 'Consistency is our' is the longest line — keep it inside the gutter on small phones */
  /* line 2 is 28 chars of Zodiak italic in an overflow:hidden .ln, so it must
     never wrap. The clamp FLOOR is deliberately low (1.3rem) so vw drives the
     size down on narrow phones - a 1.6rem floor fits 375px but wraps at 320px. */
  .cine.hero-img .cine-h1 { font-size: clamp(1.3rem, 6.85vw, 2.1rem); }
  .hero-split { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); align-items: start; }
  .bigstats { grid-template-columns: 1fr 1fr; }
  .bstat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .bstat { border-top: 1px solid var(--line); }
  .bstat:nth-child(-n+2) { border-top: 0; }
  .duo { grid-template-columns: 1fr !important; }  /* beats inline desktop ratios (e.g. contact form) */
  .duo .sticky { position: static; }
  .c-aside { margin-bottom: 8px; }
  .caprow { grid-template-columns: 1fr; gap: 12px; }
  .sector-cols { grid-template-columns: 1fr; }
  .sector-col { border-left: 0; border-top: 1px solid var(--line); }
  .sector-col:first-child { border-top: 0; }
  .ledger-row { grid-template-columns: 1fr; gap: 8px; }
  .c-form .row { grid-template-columns: 1fr; gap: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .mp-opt { grid-template-columns: 1fr auto; gap: 8px clamp(14px, 2.4vw, 34px); }
  .mp-opt .mp-id { grid-column: 1; grid-row: 1; }
  .mp-opt .mp-m { grid-column: 1; grid-row: 2; }
  .mp-opt .mp-go { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 560px) {
  .chapters { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: 1fr; }
  .cine-actions { flex-direction: column; align-items: stretch; }
  .cine-actions .btn { width: 100%; justify-content: center; }
  .grain { opacity: .26; }
  /* declutter header: just logo + Menu */
  .head-cta { display: none; }
  .head .wordmark img { width: auto; height: 34px; }  /* 4:1 lockup - never force a square */
  /* section rails: index sits above the heading, never crowds it */
  .sec-rail { flex-wrap: wrap; gap: 6px 16px; }
  .sec-rail .idx { order: -1; }
  .bigstats { grid-template-columns: 1fr; }
  .bstat:nth-child(n) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .bstat:first-child { border-top: 0; }
  .foot-cta .fc-line { font-size: clamp(2rem, 9vw, 3rem); }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .duo { gap: 30px; }
  /* home hero: drop the "Geocel Group · Est. 2009" eyebrow on phones (declutter) */
}

/* ================================================================
   25 · REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js [data-fx] { opacity: 1 !important; transform: none !important; }
  .cine-media img { animation: none; }
  .grain { display: none; }
  .intro { display: none !important; }
}

/* ================================================================
   26 · MOTION & MICRO-INTERACTIONS (no magnetic, no cursor changes)
   ================================================================ */

/* --- Buttons: gradient fill-sweep + press state --- */
.btn { transition: background-position .55s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .2s var(--ease); background-size: 205% 100%; background-position: 100% 0; }
.btn:active { transform: scale(.975); }
.btn-ink { background-image: linear-gradient(100deg, var(--green) 50%, var(--ink) 50%); }
.btn-ink:hover { background-position: 0 0; color: #fff; }
.btn-ivory { background-image: linear-gradient(100deg, var(--ink) 50%, var(--ivory) 50%); }
.btn-ivory:hover { background-position: 0 0; color: var(--ivory); }
.btn-green { background-image: linear-gradient(100deg, var(--green-deep) 50%, var(--green) 50%); }
.btn-green:hover { background-position: 0 0; }
.btn-out { background-image: linear-gradient(100deg, var(--ink) 50%, transparent 50%); }
.btn-out:hover { background-position: 0 0; color: var(--ivory); border-color: var(--ink); }
.btn-out.inv { background-image: linear-gradient(100deg, var(--ivory) 50%, transparent 50%); }
.btn-out.inv:hover { color: var(--ink); border-color: var(--ivory); }

/* --- Links: drawn underlines (footer, menu meta) --- */
.foot-links a, .menu-meta a, .c-aside .c-line .v a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: left calc(100% - 1px);
  transition: background-size .5s var(--ease), color .3s var(--ease), padding-left .3s var(--ease);
  width: fit-content;
}
.foot-links a:hover, .menu-meta a:hover, .c-aside .c-line .v a:hover { background-size: 100% 1px; }

/* --- Tag dot: quiet radar ping --- */
.tag::before { animation: tagping 3.2s var(--ease) infinite; }
@keyframes tagping {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(61, 166, 74, 0); }
  20% { box-shadow: 0 0 0 5px rgba(61, 166, 74, .18); }
  40% { box-shadow: 0 0 0 9px rgba(61, 166, 74, 0); }
}

/* --- Section rail: gradient line draws in --- */
.sec-rail { position: relative; }
.sec-rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--green), var(--brand)); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .15s; }
.sec-rail.in::after { transform: scaleX(1); }

/* --- Big stats: rule ticks in under the numeral --- */
.bstat .n { position: relative; display: inline-block; padding-bottom: 14px; }
.bstat .n::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--brand), var(--green)); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .3s; }
.bstat.in .n::after { transform: scaleX(1); }
.bstat .k { margin-top: 8px; }

/* --- Spec chips & pills: ink-fill on hover --- */
.chp-specs span, .pillrow .pl { transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease); }
.chp-specs span:hover, .pillrow .pl:hover { transform: translateY(-2px); }
.chp-specs span:hover, .pillrow .pl:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.pillrow .pl:hover b { color: var(--mint); }


/* --- Ledger: year warms on hover --- */
.ledger-row .yr { transition: color .35s var(--ease); }
.ledger-row:hover .yr { color: var(--green-deep); }

/* --- Menu link: number nudges with the slide --- */
.menu-link .no { display: inline-block; transition: transform .45s var(--ease), color .35s var(--ease); }
.menu-link:hover .no { transform: translateX(5px); }

/* --- Menu button: Menu ⇄ Close word flip --- */
.mb-word { position: relative; display: inline-flex; flex-direction: column; height: 1.05em; overflow: hidden; line-height: 1.05em; }
.mb-word i { font-style: normal; display: block; height: 1.05em; transition: transform .5s var(--ease); }
body.menu-open .mb-word i { transform: translateY(-100%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Header: compresses quietly once scrolled --- */
.head .wordmark img, .head .wm-s { transition: transform .5s var(--ease), opacity .4s var(--ease); }
.head.scrolled .wm-s { opacity: 0; transform: translateY(-5px); }
.head.scrolled .wordmark img { transform: scale(.92); }

/* --- Footer CTA: accent brightens, arrow leans in --- */
.foot-cta .fc-line .it { transition: color .45s var(--ease); }
.foot-cta:hover .fc-line .it { color: var(--ivory); }
.foot-cta:hover .fc-go { background: var(--green); border-color: var(--green); transform: translateX(8px) rotate(-45deg); }

/* --- Contact form: label wakes on focus --- */
.c-field label { transition: color .3s var(--ease); }
.c-field:focus-within label { color: var(--green-deep); }
.c-field:focus-within label .req { color: var(--brand); }
.seg label:active { transform: scale(.97); }

/* --- Chapter media: curtain reveal panel (JS-driven) --- */
.cm-curtain { position: absolute; inset: -1px; z-index: 4; will-change: transform; }
.chp-media img { will-change: transform; }

/* --- Sector columns: numeral swings --- */
.sector-col .s-no { display: inline-block; transition: transform .4s var(--ease); }
.sector-col:hover .s-no { transform: rotate(-8deg) scale(1.15); }

/* --- Scroll cue fades once you've moved on --- */
.head.scrolled ~ main .cine-foot .scroll-cue { opacity: .3; }
.cine-foot .scroll-cue { transition: opacity .6s var(--ease); }

/* --- Footer developer credit --- */
.foot-bottom .dev-credit { color: rgba(247, 243, 234, .52); white-space: nowrap; }
.foot-bottom .dev-credit a { color: var(--mint); position: relative; }
.foot-bottom .dev-credit a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform .5s var(--ease); }
.foot-bottom .dev-credit a:hover::after { transform: scaleX(1); }
@media (max-width: 760px) {
  .foot-bottom { grid-template-columns: 1fr; justify-items: start; gap: 12px; }
  .foot-bottom .foot-legal, .foot-bottom .dev-credit { justify-self: start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .tag::before { animation: none; }
  .sec-rail::after, .bstat .n::after { transform: scaleX(1); transition: none; }
  .cm-curtain { display: none !important; }
  .mb-word i { transition: none; }
}