/* ============================================================
GEO EARTH HOLDINGS
Self-hosted only. Zero external requests.
Design system: brand/BRAND.md
============================================================ */
@font-face{font-family:"Archivo";src:url("/brand/fonts/archivo-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/brand/fonts/archivo-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/brand/fonts/archivo-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/brand/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/brand/fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/brand/fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* Design tokens live in assets/tokens.css — the single token file (blueprint §3).
Linked ahead of this stylesheet in inc/head.php. Do not re-declare a token here;
one definition site is what keeps the two verticals from drifting apart. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--t-body);line-height:1.65;
color:var(--ink);background:var(--paper);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--geo-blue-l);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--font-display);line-height:1.1;text-wrap:balance}
h1{font-size:var(--t-h1);font-weight:800;letter-spacing:-.02em;line-height:1.06}
h2{font-size:var(--t-h2);font-weight:700;letter-spacing:-.015em}
h3{font-size:var(--t-h3);font-weight:600;letter-spacing:-.008em}
p{max-width:68ch;text-wrap:pretty}
.container{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:var(--w-wide)}
.section{padding-block:var(--sec-y)}
.s-dark{background:var(--forest);color:var(--ink-inv)}
.s-light{background:var(--paper);color:var(--ink)}
.s-light-2{background:var(--paper-2);color:var(--ink)}
.s-dark p,.s-dark .dim{color:var(--ink-inv-dim)}
.s-light .dim,.s-light-2 .dim{color:var(--ink-dim)}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:var(--t-eyebrow);
font-weight:600;letter-spacing:.34em;text-transform:uppercase;margin-bottom:var(--s-4)}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor;flex:none;border-radius:2px}
.s-dark .eyebrow{color:var(--accent-dark)}
.s-light .eyebrow,.s-light-2 .eyebrow{color:var(--accent)}
.hr{border:0;border-top:1px solid var(--line-light)}
.rule-inset{border-left:3px solid var(--accent-cta);padding-left:var(--s-5)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
min-height:48px;padding:var(--s-3) var(--s-6);font-size:15px;font-weight:600;
letter-spacing:.01em;border:1px solid transparent;border-radius:var(--r-lg);
text-decoration:none;cursor:pointer;white-space:nowrap;
transition:background-color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease),
transform var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.btn--primary{background:var(--accent-cta);color:var(--accent-cta-ink);border-color:var(--accent-cta)}
.btn--primary:hover{background:var(--accent-cta-hover);border-color:var(--accent-cta-hover);transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0)}
.s-dark .btn--secondary,.hero .btn--secondary,.eduhero .btn--secondary,
.rail .btn--secondary,.phead .btn--secondary{background:transparent;color:var(--ink-inv);
border-color:rgba(238,245,240,.24)}
.s-dark .btn--secondary:hover,.hero .btn--secondary:hover,.eduhero .btn--secondary:hover,
.rail .btn--secondary:hover,.phead .btn--secondary:hover{
border-color:var(--accent-dark);background:rgba(238,245,240,.06)}
.link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
text-decoration-color:rgba(255,255,255,.4);transition:text-decoration-color var(--d-fast) var(--ease)}
.s-light .link,.s-light-2 .link{color:var(--accent);text-decoration-color:currentColor;
text-decoration-thickness:1px}
.s-dark .link,.s-dark-2 .link{color:var(--accent-dark);text-decoration-color:currentColor}
.link:hover{text-decoration-color:currentColor}
/* --- Nav --- */
.nav{position:sticky;top:0;z-index:50;background:rgba(7,35,26,.92);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
min-height:68px}
.nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-inv)}
.nav__brand img{width:auto;height:36px;flex:none}
.nav__brand b{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;
letter-spacing:-.01em;line-height:1.1}
.nav__brand i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.28em;
color:var(--ink-inv-dim);text-transform:uppercase;font-weight:600;margin-top:1px}
.nav__links{display:none;gap:var(--s-6);align-items:center}
@media (min-width:1000px){.nav__links{display:flex}}
.nav__links a{font-size:14px;font-weight:500;color:var(--ink-inv-dim);text-decoration:none;
transition:color var(--d-fast) var(--ease)}
.nav__links a:hover{color:var(--ink-inv)}
.nav .btn{min-height:40px;padding:var(--s-2) var(--s-5);font-size:14px}
.nav__cta{display:none}
@media (min-width:640px){.nav__cta{display:inline-flex}}
/* --- Hero --- */
.hero{position:relative;overflow:hidden;padding-block:var(--hero-y);
background:var(--forest);color:var(--ink-inv)}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__bg::before{content:"";position:absolute;inset:0;
background:repeating-linear-gradient(0deg,transparent 0 63px,rgba(126,230,55,.045) 63px 64px),
repeating-linear-gradient(90deg,transparent 0 63px,rgba(126,230,55,.045) 63px 64px);
-webkit-mask:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 78%);
mask:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 78%)}
.hero__bg::after{content:"";position:absolute;inset:0;
background:repeating-radial-gradient(circle at 50% 135%,transparent 0 43px,rgba(126,230,55,.05) 43px 44px),
radial-gradient(70% 55% at 88% 6%,rgba(15,84,147,.22),transparent 62%),
radial-gradient(75% 60% at 8% 100%,rgba(21,122,42,.20),transparent 64%)}
.hero__inner{position:relative;z-index:1;display:grid;gap:var(--s-8);align-items:center}
@media (min-width:1200px){.hero__inner{grid-template-columns:6fr 6fr;gap:var(--s-9)}}
.hero h1{margin-bottom:var(--s-5);max-width:14ch}
.hero__deck{color:var(--ink-inv-dim);max-width:52ch;margin-bottom:var(--s-7)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.hero__figure{justify-self:center;width:100%;max-width:520px}
@media (max-width:1199px){.hero__figure{max-width:440px}}
@media (max-width:639px){.hero__figure{max-width:300px}}
.node-ring{fill:none;stroke:rgba(126,230,55,.28);stroke-width:1}
.tick{stroke:rgba(238,245,240,.14);stroke-width:1;fill:none}
.reg{stroke:rgba(238,245,240,.10);stroke-width:1;fill:none}
.vector{fill:none;stroke-width:1.5;stroke-linecap:round}
html.js-motion .vector{stroke-dasharray:600;stroke-dashoffset:600;
animation:drawIn 900ms var(--ease) forwards}
.vector--move{stroke:var(--geo-blue-l);opacity:.55}
.vector--env{stroke:var(--earth-g2);opacity:.6}
.v-1{animation-delay:300ms}.v-2{animation-delay:380ms}.v-3{animation-delay:460ms}
.v-4{animation-delay:540ms}.v-5{animation-delay:620ms}
.node-dot--move{fill:var(--geo-blue-l)}.node-dot--env{fill:var(--earth-g2)}
.node-label{font-family:var(--font-body);font-size:10.5px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;fill:var(--ink-inv-dim)}
/* --- Trust --- */
.trust{background:var(--forest-2);color:var(--ink-inv);border-block:1px solid var(--line)}
.trust__row{display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.trust__row{grid-template-columns:repeat(4,1fr)}}
.trust__cell{padding:var(--s-5)}
.trust__cell+.trust__cell{border-left:1px solid var(--line)}
@media (max-width:899px){
.trust__cell:nth-child(odd){border-left:0}
.trust__cell:nth-child(n+3){border-top:1px solid var(--line)}}
.trust__label{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.28em;
text-transform:uppercase;color:var(--ink-inv-dim);margin-bottom:var(--s-2)}
.trust__value{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink-inv)}
/* --- About --- */
.about{display:grid;gap:var(--s-8)}
@media (min-width:1000px){.about{grid-template-columns:5fr 6fr;gap:var(--s-9)}}
.quote{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.4vw,26px);
line-height:1.35;color:var(--accent);letter-spacing:-.01em}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:var(--s-7)}
.facts div{padding:var(--s-5) var(--s-5) var(--s-5) 0;border-top:1px solid var(--line-light)}
.facts dt{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.28em;text-transform:uppercase;
color:var(--ink-dim);margin-bottom:6px}
.facts dd{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink)}
/* --- Pillars --- */
.pillars{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--s-8)}
@media (min-width:640px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{position:relative;overflow:hidden;background:var(--paper);
border:1px solid var(--line-light);border-radius:var(--r);
padding:clamp(24px,3vw,36px);--fam:var(--fam-move);
transition:transform var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease),
box-shadow var(--d-fast) var(--ease)}
.pillar--env{--fam:var(--fam-env)}
.pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--fam)}
.pillar:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(14,26,20,.07)}
.pillar__icon{width:32px;height:32px;color:var(--fam);margin-bottom:var(--s-5)}
.pillar h3{margin-bottom:var(--s-3)}
.pillar__desc{color:var(--ink-dim);margin-bottom:var(--s-5);font-size:15px}
.pillar__list{list-style:none;border-top:1px solid var(--line-light);padding-top:var(--s-4);
display:flex;flex-direction:column;gap:var(--s-2);font-size:13.5px;color:var(--ink-dim)}
.pillar__list li{display:flex;align-items:baseline;gap:10px}
.pillar__list li::before{content:"";width:3px;height:3px;flex:none;background:var(--fam);
opacity:.5;transform:translateY(-3px)}
@media (min-width:1200px){
.pillar--wide{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;
gap:var(--gap);align-items:start}
.pillar--wide .pillar__list{border-top:0;padding-top:0}
.pillar--wide .pillar__desc{margin-bottom:0}}
/* --- Approach --- */
.track{display:flex;flex-direction:column;gap:var(--s-7);position:relative;margin-top:var(--s-8)}
.track__stage{display:block;position:relative;z-index:1}
.track__num{display:block;font-family:var(--font-display);font-weight:800;
font-size:clamp(40px,5vw,60px);line-height:1;color:var(--accent-tint)}
.track__dot{display:block;width:11px;height:11px;border-radius:50%;background:var(--accent-dark);
box-shadow:0 0 0 1px rgba(126,230,55,.35),0 0 0 5px rgba(126,230,55,.08);
margin:var(--s-4) 0 var(--s-4)}
.track__stage h3{font-size:19px;margin-bottom:6px}
.track__stage p{font-size:14.5px;color:var(--ink-inv-dim)}
@media (min-width:900px){
.track{flex-direction:row;gap:var(--gap)}
.track__stage{flex:1}
.track::before{content:"";position:absolute;left:0;right:0;top:81px;height:1px;
background:linear-gradient(90deg,var(--geo-blue-l),var(--earth-g2));opacity:.45;
transform:scaleX(0);transform-origin:left;transition:transform 800ms var(--ease)}
.track.in::before{transform:scaleX(1)}}
/* --- Values --- */
.values{display:grid;grid-template-columns:1fr;margin-top:var(--s-8)}
@media (min-width:640px){.values{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.values{grid-template-columns:repeat(5,1fr)}}
.value{padding:var(--s-6) var(--s-5);border-top:1px solid var(--line-light)}
@media (min-width:1200px){
.value{border-top:0;border-left:1px solid var(--line-light)}
.value:first-child{border-left:0;padding-left:0}}
.value__icon{width:28px;height:28px;color:var(--accent);margin-bottom:var(--s-4)}
.value h3{font-size:18px;margin-bottom:var(--s-2)}
.value p{font-size:var(--t-small);line-height:1.55;color:var(--ink-dim)}
/* --- Why --- */
.why{display:grid;gap:var(--s-8)}
@media (min-width:1000px){.why{grid-template-columns:4fr 7fr;gap:var(--s-9)}}
.why__list{list-style:none;display:flex;flex-direction:column}
.why__list li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);
padding-block:var(--s-6);border-top:1px solid var(--line-light)}
.why__list li:first-child{border-top:0;padding-top:0}
.why__n{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.08em;
color:var(--accent);padding-top:4px}
.why__list h3{font-size:19px;margin-bottom:6px}
.why__list p{font-size:14.5px;color:var(--ink-dim)}
/* --- Contact --- */
.contact{display:grid;gap:var(--s-8)}
@media (min-width:1000px){.contact{grid-template-columns:7fr 5fr;gap:var(--s-9)}}
.cblock{list-style:none;display:flex;flex-direction:column;margin-top:var(--s-7)}
.cblock li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:start;
padding-block:var(--s-5);border-top:1px solid var(--line)}
.cblock li:first-child{border-top:0}
.cblock svg{width:20px;height:20px;color:var(--accent-dark);margin-top:3px;flex:none}
.cblock a{color:var(--ink-inv);text-decoration:underline;
text-decoration-color:rgba(238,245,240,.3);text-underline-offset:4px;
transition:text-decoration-color var(--d-fast) var(--ease)}
.cblock a:hover{text-decoration-color:var(--ink-inv)}
.cform{background:var(--forest-2);border:1px solid var(--line);border-radius:var(--r);
padding:clamp(24px,3vw,36px)}
.field{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-5)}
.field label{font-size:var(--t-small);font-weight:600;color:var(--ink-inv-dim)}
.field input,.field select,.field textarea{min-height:48px;padding:var(--s-3) var(--s-4);
background:rgba(238,245,240,.04);color:var(--ink-inv);border:1px solid var(--line-inv);
border-radius:var(--r);transition:border-color var(--d-fast) var(--ease),
box-shadow var(--d-fast) var(--ease)}
.field textarea{min-height:110px;resize:vertical}
.field :is(input,textarea)::placeholder{color:rgba(166,188,174,.6)}
.field :is(input,select,textarea):focus{outline:none;border-color:var(--geo-blue-l);
box-shadow:0 0 0 3px rgba(18,160,220,.15)}
.cform .btn{width:100%}
.cform__note{font-size:12px;color:var(--ink-inv-dim);margin-top:var(--s-4);text-align:center}
/* --- Footer --- */
.footer{background:var(--forest-deep);color:var(--ink-inv);padding-block:var(--s-9) var(--s-6)}
.footer__grid{display:grid;grid-template-columns:1fr;gap:var(--s-7)}
/* Brand column, then one equal-weight column per vertical + Group. Equal weight
is deliberate (§2.6): it is what tells a reader the verticals are peers. */
@media (min-width:900px){.footer__grid{
grid-template-columns:1.7fr repeat(var(--fcols-sub,3),minmax(0,1fr));gap:var(--gap)}}
.footer h4{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.28em;text-transform:uppercase;
color:var(--ink-inv-dim);margin-bottom:var(--s-4);font-family:var(--font-body)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
.footer a{color:var(--ink-inv-dim);text-decoration:none;transition:color var(--d-fast) var(--ease)}
.footer a:hover{color:var(--ink-inv)}
.footer__logo{width:180px;margin-bottom:var(--s-5)}
.footer__desc{font-size:14px;color:var(--ink-inv-dim);max-width:34ch}
.footer__bar{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-4);
font-size:12px;color:var(--ink-inv-dim)}
/* --- Motion --- */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes drawIn{to{stroke-dashoffset:0}}
html.js-motion .an{opacity:0;animation:riseIn 600ms var(--ease) forwards}
.an--1{animation-delay:0ms}.an--2{animation-delay:90ms}
.an--3{animation-delay:180ms}.an--4{animation-delay:260ms}
/* INVERTED 2026-07-22 — content is visible by DEFAULT. The hidden state exists
only under html.js-motion, which an inline script in head.php sets before first
paint and only when JS is alive and reduced-motion is not requested.
Previously .reveal was opacity:0 unconditionally and only site.js un-hid it, so
JS-off (or a failed script load) rendered most page content permanently invisible.
Pattern taken from unionconstruction-ca in our Design-Repo. */
html.js-motion .reveal{opacity:0;transform:translateY(16px);
transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease);
transition-delay:calc(var(--i,0)*60ms)}
html.js-motion .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal,.an{opacity:1!important;transform:none!important}
.vector{stroke-dashoffset:0!important}
}
.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}
.skip-link{position:absolute;left:var(--s-4);top:-100px;z-index:99;background:var(--accent-cta);
color:#fff;padding:var(--s-3) var(--s-5);border-radius:var(--r);text-decoration:none}
.skip-link:focus{top:var(--s-4)}
/* ============================================================
MULTIPAGE ADDITIONS — Mei, 2026-07-21
Contrast: every text/bg pair below independently recomputed.
============================================================ */
/* Tokens formerly declared here (--forest-3, --paper-3, --ink-dim-2,
--blue-on-dark, --line-strong, --phead-y, --w-read, --nav-h, --d-mid,
--fam, --fam-dark) moved to assets/tokens.css, 2026-07-23, values unchanged.
body.svc--move / .svc--env moved with them — they are token assignments. */
html{scroll-behavior:auto}
.lede{font-size:clamp(17px,2.4vw,20px);line-height:1.55;max-width:56ch}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.s-dark-2{background:var(--forest-2);color:var(--ink-inv)}
.s-dark-2 p,.s-dark-2 .dim{color:var(--ink-inv-dim)}
.s-dark-2 .eyebrow{color:var(--accent-dark)}
.container--read{max-width:var(--w-read)}
.s-dark :focus-visible,.nav :focus-visible{outline-color:var(--accent-dark)}
/* ---- NAV: disclosure + drawer ---- */
.nav.is-stuck{background:rgba(7,35,26,.98);
box-shadow:0 1px 0 rgba(126,230,55,.10),0 8px 24px rgba(0,0,0,.28)}
.nav__links > a,.nav__disc-trg{position:relative;display:inline-flex;align-items:center;gap:6px;
font-size:14px;font-weight:500;color:var(--ink-inv-dim);text-decoration:none;
background:none;border:0;cursor:pointer;padding-block:8px;font-family:var(--font-body);
transition:color var(--d-fast) var(--ease)}
.nav__links > a:hover,.nav__disc-trg:hover{color:var(--ink-inv)}
.nav__links [aria-current="page"],.nav__links .is-section{color:var(--ink-inv)}
.nav__links [aria-current="page"]::after,.nav__links .is-section::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent-dark);border-radius:2px}
.nav__disc-trg svg{width:11px;height:11px;transition:transform var(--d-fast) var(--ease)}
.nav__disc-trg[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__disc{position:relative}
.nav__disc-pan{position:absolute;top:calc(100% + 14px);left:-14px;width:264px;
background:var(--forest-2);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:0 18px 40px rgba(0,0,0,.42);padding:var(--s-2);list-style:none;
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity var(--d-fast) var(--ease),transform var(--d-fast) var(--ease),
visibility 0s linear var(--d-fast)}
.nav__disc-pan.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav__disc-pan a{display:block;padding:11px var(--s-4);font-size:14px;font-weight:500;
color:var(--ink-inv-dim);text-decoration:none;border-radius:var(--r);
border-left:3px solid var(--blue-on-dark);
transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.nav__disc-pan a:hover,.nav__disc-pan [aria-current="page"]{background:rgba(238,245,240,.06);color:var(--ink-inv)}
.nav__disc-pan .is-env{border-left-color:var(--earth-g2)}
/* A vertical's "Overview" link carries no service icon, so it indents to match
the icon-bearing rows beneath it and takes the leaf rule + a separator, to
read as the parent of the group rather than a sixth sibling. */
.nav__disc-pan .is-overview{border-left-color:var(--accent-dark);font-weight:600;
padding-left:calc(var(--s-4) + 29px)}
.nav__disc-pan--vertical li:first-child{margin-bottom:6px;padding-bottom:6px;
border-bottom:1px solid var(--line)}
/* Group panel: plain entries, no icons, no vertical accent. */
.nav__disc-pan .is-plain{border-left-color:transparent}
.nav__disc-pan .is-plain:hover,.nav__disc-pan .is-plain[aria-current="page"]{
border-left-color:var(--accent-dark)}
.nav__burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
width:44px;height:44px;padding:10px;background:none;border:0;cursor:pointer;flex:none}
@media (min-width:1000px){.nav__burger{display:none}}
.nav__burger span{display:block;height:2px;background:var(--ink-inv);border-radius:2px;
transition:transform var(--d-fast) var(--ease),opacity var(--d-fast) var(--ease)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* PRE-EXISTING BUG, fixed 2026-07-23. `.nav` carries backdrop-filter, and a
filter/backdrop-filter establishes a CONTAINING BLOCK for position:fixed
descendants. So this drawer was resolving `inset:… 0 0 0` against the 69px
nav bar, not the viewport — it rendered as a 96px scrollable sliver with
~718px of menu inside it, i.e. the mobile menu was unusable on the live site.
`bottom:0` cannot be trusted here; the height is therefore stated explicitly.
dvh so mobile browser chrome does not clip the last item; vh first as the
fallback for engines without dvh. */
.nav__drawer{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:55;background:var(--forest);
height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));
padding:var(--s-6) var(--gutter) var(--s-8);overflow-y:auto;
display:flex;flex-direction:column;gap:var(--s-2);
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity var(--d-mid) var(--ease),transform var(--d-mid) var(--ease),
visibility 0s linear var(--d-mid)}
.nav__drawer.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media (min-width:1000px){.nav__drawer{display:none}}
.nav__drawer a{display:flex;align-items:center;min-height:52px;font-family:var(--font-display);
font-weight:600;font-size:18px;color:var(--ink-inv);text-decoration:none;
border-bottom:1px solid var(--line)}
.nav__drawer a[aria-current="page"]{color:var(--accent-dark)}
.nav__grouphead{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.34em;
text-transform:uppercase;color:var(--ink-inv-dim);margin-top:var(--s-6);margin-bottom:var(--s-2)}
.nav__drawer .is-sub{font-size:16px;font-weight:500;padding-left:var(--s-4);
border-left:3px solid var(--blue-on-dark);min-height:48px}
.nav__drawer .is-sub.is-env{border-left-color:var(--earth-g2)}
.nav__drawer .btn{margin-top:var(--s-7)}
/* ---- PAGE HEADER ---- */
.phead{position:relative;overflow:hidden;background:var(--forest);color:var(--ink-inv);
padding-block:var(--phead-y);border-bottom:1px solid var(--line)}
.phead--tight{padding-block:clamp(40px,5vw,64px)}
.phead__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
background:repeating-linear-gradient(0deg,transparent 0 63px,rgba(126,230,55,.035) 63px 64px),
repeating-linear-gradient(90deg,transparent 0 63px,rgba(126,230,55,.035) 63px 64px);
-webkit-mask:radial-gradient(110% 100% at 22% 30%,#000 20%,transparent 74%);
mask:radial-gradient(110% 100% at 22% 30%,#000 20%,transparent 74%)}
.phead__in{position:relative;z-index:1;display:grid;gap:var(--s-7);align-items:center}
@media (min-width:1000px){.phead__in{grid-template-columns:7fr 5fr;gap:var(--s-9)}}
.phead h1{margin-bottom:var(--s-4);max-width:16ch}
.phead .lede{color:var(--ink-inv-dim);margin-bottom:var(--s-6)}
.phead__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4)}
.phead__tel{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink-inv);
text-decoration:none;border-bottom:1px solid rgba(238,245,240,.28);padding-bottom:2px}
.phead__tel:hover{border-bottom-color:var(--accent-dark)}
.phead__aside{justify-self:center;width:100%;max-width:420px}
@media (max-width:999px){.phead__aside{max-width:340px}}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;
color:var(--ink-inv-dim);margin-bottom:var(--s-5);list-style:none}
.crumb li{display:flex;align-items:center;gap:8px}
.crumb li+li::before{content:"/";opacity:.5}
.crumb a{color:var(--ink-inv-dim);text-decoration:none;transition:color var(--d-fast) var(--ease)}
.crumb a:hover{color:var(--ink-inv);text-decoration:underline;text-underline-offset:3px}
.crumb [aria-current="page"]{color:var(--ink-inv)}
/* ---- FAMILY SPLIT ---- */
.fams{display:grid;gap:var(--gap);margin-top:var(--s-8)}
@media (min-width:900px){.fams{grid-template-columns:repeat(2,1fr);gap:var(--s-8)}}
.fam{padding-top:var(--s-5);border-top:4px solid var(--fam)}
.fam--move{--fam:var(--geo-blue)}
.fam--env{--fam:var(--earth-g1)}
.fam__tag{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.34em;text-transform:uppercase;
color:var(--fam);margin-bottom:var(--s-3)}
.fam h3{margin-bottom:var(--s-3)}
.fam p{color:var(--ink-dim-2);font-size:15px;margin-bottom:var(--s-5)}
.fam__links{list-style:none;display:flex;flex-direction:column}
.fam__links a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
padding-block:var(--s-4);border-top:1px solid var(--line-light);font-family:var(--font-display);
font-weight:600;font-size:16px;color:var(--ink);text-decoration:none;
transition:color var(--d-fast) var(--ease),padding-left var(--d-fast) var(--ease)}
.fam__links a::after{content:"";width:7px;height:7px;flex:none;
border-top:1.5px solid var(--fam);border-right:1.5px solid var(--fam);
transform:rotate(45deg);transition:transform var(--d-fast) var(--ease)}
.fam__links a:hover{color:var(--fam);padding-left:6px}
/* ---- SPEC TABLE ---- */
.spec{margin-top:var(--s-7);border-top:3px solid var(--fam)}
.spec__row{display:grid;grid-template-columns:1fr;gap:6px;padding-block:var(--s-5);
border-bottom:1px solid var(--line-light)}
@media (min-width:760px){
.spec__row{grid-template-columns:minmax(180px,240px) 1fr;gap:var(--s-6);align-items:baseline}}
.spec__k{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.28em;text-transform:uppercase;
color:var(--ink-dim-2)}
.spec__v{font-family:var(--font-display);font-weight:600;font-size:clamp(15px,1.9vw,17px);
line-height:1.5;color:var(--ink);letter-spacing:-.005em;font-variant-numeric:tabular-nums}
.spec__v span+span::before{content:"·";display:inline-block;margin-inline:10px;
color:var(--fam);font-weight:700}
/* ---- NOUN COLUMNS ---- */
.nouns{display:grid;gap:var(--s-7) var(--gap);margin-top:var(--s-8);
grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.nouns h3{font-size:17px;margin-bottom:var(--s-4);padding-bottom:var(--s-3);
border-bottom:1px solid var(--line-light)}
.nouns ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px;
color:var(--ink-dim-2)}
.nouns li{display:flex;align-items:baseline;gap:10px}
.nouns li::before{content:"";width:4px;height:4px;flex:none;background:var(--fam);
opacity:.55;transform:translateY(-3px)}
/* ---- ENQUIRY PROMPTS ---- */
.prompts{list-style:none;counter-reset:p;margin-top:var(--s-6);display:flex;
flex-direction:column;gap:var(--s-4);max-width:60ch}
.prompts li{counter-increment:p;display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);
align-items:baseline;font-size:15px;color:var(--ink-inv-dim)}
.prompts li::before{content:counter(p,decimal-leading-zero);font-family:var(--font-display);
font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--accent-dark)}
/* ---- RELATED ---- */
.rels{display:grid;gap:var(--gap);margin-top:var(--s-8);
grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rel{position:relative;display:block;padding:var(--s-6);text-decoration:none;background:var(--paper);
border:1px solid var(--line-light);border-radius:var(--r);--fam:var(--geo-blue);
transition:transform var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease),
border-color var(--d-fast) var(--ease)}
.rel--env{--fam:var(--earth-g1)}
.rel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--fam)}
.rel:hover{transform:translateY(-2px);border-color:var(--line-strong);
box-shadow:0 12px 32px rgba(14,26,20,.07)}
.rel__tag{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.28em;text-transform:uppercase;
color:var(--fam);margin-bottom:var(--s-3)}
.rel h3{font-size:19px;margin-bottom:6px;color:var(--ink)}
.rel p{font-size:14px;color:var(--ink-dim-2)}
/* ---- LEADER: signed statement now, portrait later ---- */
.leader{position:relative;overflow:hidden}
.leader__in{position:relative;z-index:1;display:grid;gap:var(--s-7);
max-width:var(--w-read);margin-inline:auto}
.leader--photo .leader__in{max-width:none;margin-inline:0}
@media (min-width:900px){
.leader--photo .leader__in{grid-template-columns:5fr 7fr;gap:var(--s-9);align-items:center}}
.leader__mark{position:absolute;right:-10px;bottom:-14px;width:200px;opacity:.05;
pointer-events:none;z-index:0}
.leader__fig{position:relative;margin:0}
.leader__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line);
border-radius:var(--r-lg);position:relative;z-index:1}
.leader__fig::after{content:"";position:absolute;inset:12px -12px -12px 12px;
background:var(--forest-2);border-radius:var(--r-lg);z-index:0}
.leader__stmt{font-family:var(--font-display);font-weight:600;font-size:clamp(19px,2.2vw,25px);
line-height:1.4;letter-spacing:-.01em;color:var(--ink-inv);max-width:34ch}
.leader__sig{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.leader__name{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink-inv)}
.leader__role{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.28em;text-transform:uppercase;
color:var(--accent-dark);margin-top:4px}
.leader__reach{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin-top:var(--s-5)}
.leader__reach a{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink-inv);
text-decoration:none;border-bottom:1px solid rgba(238,245,240,.28);padding-bottom:2px;
transition:border-color var(--d-fast) var(--ease)}
.leader__reach a:hover{border-bottom-color:var(--accent-dark)}
.leader__reach .is-tel{font-size:18px}
/* ---- CTA BAND ---- */
.ctaband{display:grid;gap:var(--s-6);align-items:center}
@media (min-width:900px){.ctaband{grid-template-columns:7fr 5fr;gap:var(--s-8)}}
.ctaband h2{max-width:18ch}
.ctaband__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4)}
@media (min-width:900px){.ctaband__act{justify-content:flex-end}}
/* ---- FORM MESSAGES ---- */
.formmsg{padding:var(--s-4) var(--s-5);border-radius:var(--r);font-size:14.5px;
margin-bottom:var(--s-5);border:1px solid}
.formmsg--ok{background:rgba(21,122,42,.16);border-color:rgba(126,230,55,.35);color:var(--ink-inv)}
.formmsg--err{background:rgba(138,90,8,.18);border-color:rgba(224,168,60,.4);color:var(--ink-inv)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field__hint{font-size:12.5px;color:var(--ink-inv-dim)}
/* ---- DORMANT PROOF COMPONENTS ----
Ship unused. When Menon supplies photography, logos, cases or certificates,
adding them is a paste of markup — never a stylesheet change.
Do NOT render empty containers for these. */
.media{margin:0;position:relative}
.media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);
border:1px solid var(--line-light)}
.s-dark .media img,.phead .media img{border-color:var(--line)}
.media figcaption{margin-top:var(--s-3);font-size:12.5px;color:var(--ink-dim-2)}
.clients{display:grid;gap:var(--s-6);align-items:center;margin-top:var(--s-7);
grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.clients img{max-height:38px;width:auto;margin-inline:auto;filter:grayscale(1);opacity:.72}
.case{padding:clamp(24px,3vw,36px);background:var(--paper);border:1px solid var(--line-light);
border-radius:var(--r);border-top:3px solid var(--fam)}
.case__figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s-5);
margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line-light)}
.case__fig b{display:block;font-family:var(--font-display);font-weight:800;
font-size:clamp(24px,3vw,32px);color:var(--ink);font-variant-numeric:tabular-nums}
.case__fig span{display:block;font-size:12.5px;color:var(--ink-dim-2);margin-top:4px}
.certs{display:grid;gap:var(--gap);margin-top:var(--s-7);
grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cert{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5);
border:1px solid var(--line-light);border-radius:var(--r)}
/* ---- corridor: nodes are links ---- */
.node-link{cursor:pointer}
.node-link .node-label{transition:fill var(--d-fast) var(--ease)}
.node-link:hover .node-label,.node-link:focus-visible .node-label{fill:var(--ink-inv)}
.node-link:hover .node-ring{stroke:rgba(126,230,55,.55)}
.node-link:focus-visible{outline:2px solid var(--accent-dark);outline-offset:3px;border-radius:4px}
.corridor--reduced .node-link{opacity:.22;transition:opacity var(--d-fast) var(--ease)}
.corridor--reduced .node-link:hover,.corridor--reduced .node-link:focus-visible{opacity:.7}
.corridor--reduced .is-active{opacity:1}
.corridor--reduced .is-active .node-ring{stroke:var(--fam-dark)}
.corridor--reduced .is-active .node-label{fill:var(--ink-inv)}
.corridor--reduced .vector{opacity:.16}
.corridor--reduced .vector.is-active{opacity:.75;stroke:var(--fam-dark)}
@media (prefers-reduced-motion:reduce){
.nav__disc-pan,.nav__drawer{transition:none!important}
}
@media print{
.nav,.nav__drawer,.skip-link,.ctaband__act{display:none!important}
.s-dark,.s-dark-2,.phead,.footer{background:#fff!important;color:#000!important}
}
/* ============================================================
OWNED VISUAL SYSTEM — Mei, 2026-07-22
Operational schematics + service-icon family + regmark texture
+ dormant duotone photo frames. EXTENDS the system above; every
token below is verbatim from :root. Family colour is driven by
body.svc--move / .svc--env (--fam / --fam-dark), never hard-coded.
Static-first: the draw-in is additive, gated exactly like the
corridor, and neutralised under prefers-reduced-motion.
============================================================ */
/* ---- PER-SERVICE SCHEMATICS (.phead__aside) ---- */
.sch{width:100%;height:auto;overflow:visible}
.sch .reg{stroke:rgba(238,245,240,.12);stroke-width:1;fill:none}
.sch .node-ring{fill:none;stroke:var(--fam-dark);stroke-width:1;opacity:.55}
.sch .node-ring.lo{stroke:rgba(166,188,174,.32)}
.sch .hub-ring{fill:none;stroke:var(--fam-dark);stroke-width:1;opacity:.42}
.sch .dot{fill:var(--fam-dark)}
.sch .dot-lo{fill:var(--ink-inv-dim);opacity:.6}
.sch .vec{fill:none;stroke:var(--fam-dark);stroke-width:1.8;stroke-linecap:round;opacity:.82}
.sch .vec-lo{fill:none;stroke:var(--ink-inv-dim);stroke-width:1;stroke-linecap:round;
opacity:.45;stroke-dasharray:2 5}
.sch .rail{fill:none;stroke:var(--line-inv);stroke-width:1}
.sch .tick{fill:none;stroke:var(--fam-dark);stroke-width:1.4;stroke-linecap:round;opacity:.6}
.sch .glyph{fill:none;stroke:var(--fam-dark);stroke-width:1.5;stroke-linecap:round;
stroke-linejoin:round;opacity:.9}
.sch .ping{fill:none;stroke:var(--fam-dark);stroke-width:1;opacity:.5}
.sch .lab{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;fill:var(--ink-inv-dim)}
.sch .lab-on{fill:var(--fam-dark);opacity:.95}
.sch .cap{font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;fill:rgba(166,188,174,.72)}
/* draw-in — additive only, same technique + gate as the corridor */
html.js-motion .sch .vec{stroke-dasharray:660;stroke-dashoffset:660;
animation:drawIn 900ms var(--ease) forwards}
html.js-motion .sch .v1{animation-delay:200ms}
html.js-motion .sch .v2{animation-delay:300ms}
html.js-motion .sch .v3{animation-delay:400ms}
html.js-motion .sch .v4{animation-delay:500ms}
html.js-motion .sch .v5{animation-delay:600ms}
html.js-motion .sch .ping{transform-box:fill-box;transform-origin:center;opacity:0;
animation:pingOut 2.6s var(--ease) infinite}
html.js-motion .sch .p2{animation-delay:1.3s}
@keyframes pingOut{0%{opacity:.55;transform:scale(.35)}70%{opacity:0;transform:scale(1.7)}100%{opacity:0}}
/* ---- SERVICE-ICON FAMILY ---- */
.svc-ico{width:20px;height:20px;flex:none;color:inherit}
/* home "Five operations" family cards — coloured by the family container */
.fam__links a{gap:var(--s-3)}
.fam__links a::after{margin-left:auto}
.fam__links .svc-ico{width:21px;height:21px}
.fam--move .fam__links .svc-ico{color:var(--geo-blue)}
.fam--env .fam__links .svc-ico{color:var(--earth-g1)}
/* nav disclosure + mobile drawer (dark) */
.nav__disc-pan a{display:flex;align-items:center}
.nav__disc-pan a .svc-ico,.nav__drawer .is-sub .svc-ico{width:18px;height:18px;margin-right:11px;
color:var(--blue-on-dark)}
.nav__disc-pan a.is-env .svc-ico,.nav__drawer .is-sub.is-env .svc-ico{color:var(--earth-g2)}
/* footer sitemap (dark, small) */
.footer ul a{display:inline-flex;align-items:center}
.footer .svc-ico{width:15px;height:15px;margin-right:9px;color:var(--ink-inv-dim)}
.footer li:hover .svc-ico{color:var(--accent-dark)}
/* related-service cards (light) */
.rel .svc-ico{width:27px;height:27px;color:var(--fam);margin-bottom:var(--s-4)}
/* ---- REGMARK: engineering registration texture on dark sections ----
Four subtle corner crop-marks + a faint depth glow. Isolated stacking
context with a z-index:-1 layer, so it sits behind in-flow content and
does not fight the hero/phead grids that already carry their own bg. */
.regmark{position:relative;isolation:isolate}
.regmark::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
linear-gradient(var(--line),var(--line)) left 22px top 22px /16px 1px no-repeat,
linear-gradient(var(--line),var(--line)) left 22px top 22px /1px 16px no-repeat,
linear-gradient(var(--line),var(--line)) right 22px top 22px /16px 1px no-repeat,
linear-gradient(var(--line),var(--line)) right 22px top 22px /1px 16px no-repeat,
linear-gradient(var(--line),var(--line)) left 22px bottom 22px /16px 1px no-repeat,
linear-gradient(var(--line),var(--line)) left 22px bottom 22px /1px 16px no-repeat,
linear-gradient(var(--line),var(--line)) right 22px bottom 22px /16px 1px no-repeat,
linear-gradient(var(--line),var(--line)) right 22px bottom 22px /1px 16px no-repeat,
radial-gradient(80% 60% at 84% 18%,rgba(126,230,55,.05),transparent 70%)}
/* ---- DUOTONE PHOTO-RECEIVING FRAME (ships DORMANT) ----
No markup renders this today. The day Menon supplies real facility / fleet
/ team photography, wrapping the ![]()
in .frame drops it into the brand's
forest duotone with a registration corner — so real photos join the
schematic language instead of reading as dropped-in stock. Never faked. */
.frame{position:relative;margin:0}
.frame img{width:100%;display:block;border-radius:var(--r-lg);
filter:grayscale(1) contrast(1.04) brightness(.92) sepia(.4) hue-rotate(78deg) saturate(1.35)}
.frame::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;
background:linear-gradient(158deg,rgba(7,35,26,.10),rgba(7,35,26,.52));mix-blend-mode:multiply}
.frame::before{content:"";position:absolute;left:12px;top:12px;width:20px;height:20px;z-index:1;
border-top:1px solid var(--accent-dark);border-left:1px solid var(--accent-dark);opacity:.6}
@media (prefers-reduced-motion:reduce){
.sch .vec{stroke-dashoffset:0!important;animation:none!important}
.sch .ping{animation:none!important;opacity:.5!important}
}
/* ============================================================
TREATED SECTOR PHOTOGRAPHY — Mei, 2026-07-22
Self-hosted atmospheric imagery (Pexels; assets/img/PROVENANCE.md).
NEVER a Geo Earth asset claim — generic sector atmosphere only, so
these are their OWN component, never the dormant .frame/.media proof
slots (those wait for Menon's real photos).
ONE forest-duotone treatment (same recipe as .frame) so every photo
reads as the brand, not rainbow stock. Text over a photo always sits
on a forest scrim; contrast recomputed for AA. Photos are plain ![]()
(JS-off safe); below-fold imagery is lazy, only the home LCP hero
preloads. Family colour is never hard-coded.
============================================================ */
/* shared forest duotone — the .frame recipe, retuned for open bands */
.tphoto{filter:grayscale(1) contrast(1.06) sepia(.42) hue-rotate(74deg)
saturate(1.02) brightness(.82)}
/* ---- PHOTO SCRIM: treated photo BEHIND dark content (hero + company head) ----
Sits at z-0; the content wrapper is lifted to z-1 so text/schematic never
fall behind the image. Darkened harder than an open band because copy lives
on top, plus a left-weighted forest gradient carries the text column. */
.photo-scrim{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.photo-scrim img{width:100%;height:100%;object-fit:cover;object-position:center;
filter:grayscale(1) contrast(1.03) sepia(.42) hue-rotate(74deg) saturate(.95) brightness(.52)}
.photo-scrim::after{content:"";position:absolute;inset:0;
background:
linear-gradient(100deg,var(--forest-deep) 4%,rgba(7,35,26,.88) 46%,rgba(7,35,26,.52) 100%),
linear-gradient(0deg,rgba(5,25,18,.82),transparent 58%)}
/* keep every phead's text/schematic above a scrim (phead__in already is) */
.phead > .container{position:relative;z-index:1}
/* company head crops to the working band (cranes + containers, less sky) */
.phead--photo .photo-scrim img{object-position:center 62%}
/* hero: photo below the existing grid texture (which stays z-0 via DOM order)
and below content (z-1). Extra pool of dark behind the corridor guarantees
the thin blue/green vectors stay legible over the image. */
.hero .photo-scrim{z-index:0}
.hero .photo-scrim::after{
background:
linear-gradient(100deg,var(--forest-deep) 2%,rgba(7,35,26,.86) 44%,rgba(7,35,26,.60) 100%),
radial-gradient(60% 62% at 82% 52%,rgba(5,25,18,.66),transparent 72%),
linear-gradient(0deg,rgba(5,25,18,.80),transparent 60%)}
/* ---- PHOTOBAND: standalone full-bleed treated photo divider ----
Single cinematic image, or a 2-/3-up operational strip. The photo IS the
subject here, so it is only lightly darkened; a soft forest vignette seats
it into the dark bands around it, and a leaf registration tick ties it to
the schematic language. */
.photoband{position:relative;overflow:hidden;background:var(--forest);
border-block:1px solid var(--line)}
.photoband__grid{display:grid;gap:0}
.photoband--2 .photoband__grid,.photoband--3 .photoband__grid{grid-template-columns:1fr}
@media (min-width:680px){
.photoband--2 .photoband__grid{grid-template-columns:1fr 1fr}
.photoband--3 .photoband__grid{grid-template-columns:1fr 1fr 1fr}}
.photoband figure{position:relative;margin:0;overflow:hidden;isolation:isolate}
.photoband figure + figure{border-top:1px solid var(--line)}
@media (min-width:680px){
.photoband--2 figure + figure,.photoband--3 figure + figure{
border-top:0;border-left:1px solid var(--line)}}
.photoband img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.photoband--1 img{height:clamp(220px,32vw,384px)}
.photoband--2 img,.photoband--3 img{height:clamp(196px,24vw,300px)}
/* forest vignette to seat the photo into the surrounding dark sections */
.photoband figure::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(7,35,26,.30),transparent 26%,transparent 60%,
rgba(5,25,18,.55)),radial-gradient(120% 80% at 50% 50%,transparent 58%,rgba(5,25,18,.30))}
/* leaf registration tick — echoes .frame / .regmark */
.photoband figure::before{content:"";position:absolute;left:16px;top:16px;width:20px;height:20px;
z-index:2;border-top:1px solid var(--accent-dark);border-left:1px solid var(--accent-dark);opacity:.55}
/* ============================================================
PARENT TIER + VERTICAL ARCHITECTURE — Phase 2 / 3
Blueprint §2.4 (nav), §6 (portfolio rail), §1.4 (group hero),
§4 (per-vertical skin).
EVERY MEASUREMENT BELOW IS A SHARED TOKEN. Nothing here forks the
skeleton per vertical — a vertical may override exactly the five
things in §4 and nothing else. Type scale, grid, rhythm, radius,
motion, nav, footer and the four-stage block stay locked, which is
why Education reads as the same company before you look at colour.
============================================================ */
/* ---- NAV: flat vertical link (§2.4) ----
Education is the only top-level item with no dropdown. The asymmetry is the
mechanism that makes it stand out — it is the only thing reachable in one
click — so it is styled to sit as a peer of the disclosure triggers, never as
a smaller or larger thing. */
.nav__flat{position:relative;display:inline-flex;align-items:center;
font-size:14px;font-weight:600;color:var(--ink-inv);text-decoration:none;
padding-block:8px;font-family:var(--font-body);
transition:color var(--d-fast) var(--ease)}
.nav__flat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
border-radius:2px;background:var(--accent-dark);
transform:scaleX(0);transform-origin:left;
transition:transform var(--d-fast) var(--ease)}
.nav__flat:hover::after,.nav__flat.is-section::after,
.nav__flat[aria-current="page"]::after{transform:scaleX(1)}
/* ---- MOBILE DRAWER: Education renders as a full-width accented panel ----
§2.4: "Education Hub renders as a full-width panel at the top with its own
accent; Environmental & Logistics as a standard collapsed group below it." */
.nav__panel{border:1px solid var(--line);border-radius:var(--r-lg);
padding:var(--s-4) var(--s-5) var(--s-5);margin-bottom:var(--s-5);
background:linear-gradient(180deg,rgba(217,168,74,.09),transparent 70%)}
.nav__panel-lead{font-family:var(--font-display);font-weight:700;font-size:20px;
color:var(--accent-dark)!important;border-bottom:1px solid var(--line)}
.nav__panel .is-sub{font-size:16px;font-weight:500;padding-left:var(--s-4);
border-left:3px solid var(--accent-dark);border-bottom:0;min-height:46px;
margin-top:var(--s-2)}
.nav__drawer .nav__panel a{border-bottom-color:transparent}
/* ---- FOOTER: each vertical column heading carries its own accent ----
§2.6 — the only colour in the footer, and the thing that says "peers". */
.footer__vhead{color:var(--accent-dark)!important;opacity:.9}
/* ============================================================
THE PORTFOLIO RAIL (§6)
============================================================ */
.rail{position:relative;background:var(--forest);color:var(--ink-inv);
border-block:1px solid var(--line)}
/* NO-JS / BASELINE: slides are static stacked blocks, each with its own accent,
fully readable and fully linked. This is the default and it is the contract —
the stage behaviour below is additive and opt-in via html.js-rail. */
.rail__slide{position:relative;overflow:hidden;padding-block:clamp(56px,7vw,88px);
border-top:1px solid var(--line)}
.rail__slide:first-child{border-top:0}
.rail__photo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.rail__photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.rail__photo::after{content:"";position:absolute;inset:0;
background:linear-gradient(100deg,var(--forest-deep) 4%,rgba(7,35,26,.88) 48%,rgba(7,35,26,.55) 100%),
linear-gradient(0deg,rgba(5,25,18,.78),transparent 62%)}
.rail__in{position:relative;z-index:1;max-width:760px}
.rail__h{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
line-height:1.06;font-size:var(--t-h1);margin-bottom:var(--s-4);max-width:16ch}
.rail__p{color:var(--ink-inv-dim);max-width:52ch;margin-bottom:var(--s-6)}
/* The segment bar. Present at every breakpoint, because seeing the WHOLE
portfolio at once is the correct message for a holding company. */
.rail__bar{position:relative;z-index:2;display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
border-top:1px solid var(--line);background:var(--forest-deep)}
.rail__seg{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
padding:var(--s-5) var(--gutter);background:none;border:0;cursor:pointer;
text-align:left;font-family:var(--font-body);color:var(--ink-inv-dim);
transition:color var(--d-fast) var(--ease),background-color var(--d-fast) var(--ease)}
.rail__seg+.rail__seg{border-left:1px solid var(--line)}
.rail__seg:hover{color:var(--ink-inv);background:rgba(238,245,240,.03)}
.rail__seg-line{display:block;width:100%;height:2px;background:var(--line-inv);
border-radius:2px;overflow:hidden;margin-bottom:var(--s-2)}
.rail__seg-line i{display:block;height:100%;width:0;border-radius:2px;
background:var(--accent-dark);transition:width var(--d-mid) var(--ease)}
.rail__seg.is-active .rail__seg-line i{width:100%}
.rail__seg-n{font-family:var(--font-display);font-weight:700;font-size:12px;
letter-spacing:.1em;color:var(--accent-dark);opacity:.75}
.rail__seg-label{font-family:var(--font-display);font-weight:600;font-size:17px;
letter-spacing:-.01em}
.rail__seg.is-active{color:var(--ink-inv)}
.rail__seg:focus-visible{outline:2px solid var(--accent-dark);outline-offset:-3px}
/* ---- JS-ENHANCED STAGE ----
One slide visible at a time, cross-fade plus a small scale settle. Applied
ONLY under html.js-rail, so a failed script load degrades to the stacked
baseline above rather than to a blank box. */
html.js-rail .rail__stage{position:relative;display:grid}
html.js-rail .rail__slide{grid-area:1/1;border-top:0;min-height:clamp(440px,58vh,620px);
display:flex;align-items:center;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--d-slow) var(--ease),visibility 0s linear var(--d-slow)}
html.js-rail .rail__slide.is-active{opacity:1;visibility:visible;pointer-events:auto;
transition-delay:0s}
html.js-rail .rail__slide .rail__photo img{transform:scale(1.04);
transition:transform 900ms var(--ease)}
html.js-rail .rail__slide.is-active .rail__photo img{transform:none}
/* ---- GROUP HERO above the rail ---- */
.hero--rail{padding-block:clamp(64px,8vw,110px)}
.hero__lead{position:relative;z-index:1;max-width:900px}
.hero--rail h1{max-width:18ch}
.hero--rail .hero__deck{max-width:62ch}
/* ============================================================
VERTICAL CARDS — the two verticals as EQUAL-WEIGHT peers (§2.6, §6.6)
Same card, same size, same treatment. Only the accent differs. Equality
is not a layout convenience here; it is the message.
============================================================ */
.vcards{display:grid;gap:var(--gap);margin-top:var(--s-8)}
@media (min-width:900px){.vcards{grid-template-columns:repeat(2,1fr);gap:var(--s-7)}}
.vcard{position:relative;display:flex;flex-direction:column;
padding:clamp(26px,3vw,40px);text-decoration:none;background:var(--paper);
border:1px solid var(--line-light);border-radius:var(--r);
transition:transform var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease),
border-color var(--d-fast) var(--ease)}
.vcard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
background:var(--accent);border-radius:var(--r) var(--r) 0 0}
.vcard:hover{transform:translateY(-2px);border-color:var(--line-strong);
box-shadow:0 14px 36px rgba(14,26,20,.08)}
.vcard__tag{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.28em;
text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-3)}
.vcard h3{font-size:clamp(21px,2.4vw,26px);color:var(--ink);margin-bottom:var(--s-3)}
.vcard__p{font-size:15px;color:var(--ink-dim-2);margin-bottom:var(--s-5)}
.vcard__links{list-style:none;display:flex;flex-wrap:wrap;gap:8px var(--s-4);
padding-top:var(--s-4);border-top:1px solid var(--line-light);
font-size:13.5px;color:var(--ink-dim);margin-bottom:var(--s-5)}
.vcard__links li{display:flex;align-items:baseline;gap:8px}
.vcard__links li::before{content:"";width:3px;height:3px;flex:none;
background:var(--accent);opacity:.55;transform:translateY(-3px)}
.vcard__go{margin-top:auto;font-family:var(--font-display);font-weight:600;
font-size:15px;color:var(--accent)}
@media (prefers-reduced-motion:reduce){
/* §6.5 — colour change is instant, no scale, autoplay disabled in site.js. */
html.js-rail .rail__slide,html.js-rail .rail__slide .rail__photo img,
.rail__seg-line i{transition:none!important}
html.js-rail .rail__slide .rail__photo img{transform:none!important}
}
/* ============================================================
EDUCATION VERTICAL — blueprint §4.2, §5.2
FIVE DEGREES OF FREEDOM AND NOT ONE MORE. A vertical may override its
accent, its photography, its hero composition, its eyebrow vocabulary
and its copy register. Type scale, grid, rhythm, radius, motion, nav,
footer and the four-stage block are LOCKED and shared — which is why
this reads as the same company as /waste-management before you have
read a word of it. Nothing below re-declares a token.
============================================================ */
/* ---- DETAIL SIGNATURE: a 48px accent rule under every eyebrow ----
Small, cheap, and it is the thing the eye learns to associate with this
vertical. It uses --accent-*, so it is not brass in the CSS — it is brass
because the page is wearing v--edu. */
/* The base .eyebrow draws a 24px leading bar. This vertical's signature is a
48px rule UNDERNEATH instead, so the leading bar is suppressed — two rules on
one eyebrow reads as a mistake rather than as a detail. */
.eyebrow--rule{position:relative;padding-bottom:var(--s-3)}
.eyebrow--rule::before{display:none}
.eyebrow--rule::after{content:"";position:absolute;left:0;bottom:0;
width:48px;height:1px;background:currentColor;opacity:.85}
/* ---- ① HERO: EDITORIAL SPLIT, 72vh ----
Text column left at 5/12, full-bleed photograph right at 7/12 running to the
viewport edge and bleeding under the nav. Deeper than any other page on the
site (72vh against the standard .phead) — this is the structural mechanism by
which Education stands out, and it costs no extra colour or ornament to do it.
Below 1000px it stacks: text first, photograph beneath, because a 5/12 text
column on a phone is unreadable. */
.eduhero{position:relative;background:var(--forest);color:var(--ink-inv);
display:grid;grid-template-columns:1fr;align-items:stretch}
@media (min-width:1000px){
.eduhero{grid-template-columns:5fr 7fr;min-height:72vh;
margin-top:calc(var(--nav-h) * -1);padding-top:var(--nav-h)}}
.eduhero__text{display:flex;align-items:center;
padding:clamp(40px,6vw,88px) 0 clamp(40px,6vw,72px);
padding-inline:var(--gutter)}
@media (min-width:1000px){
.eduhero__text{padding-inline:max(var(--gutter),calc((100vw - var(--w)) / 2 + var(--gutter)));
padding-right:clamp(32px,4vw,64px)}}
.eduhero__textin{width:100%;max-width:560px}
.eduhero h1{font-size:var(--t-h1);margin-bottom:var(--s-5);max-width:15ch}
.eduhero .lede{color:var(--ink-inv-dim);margin-bottom:var(--s-6);max-width:52ch}
.eduhero .crumb{margin-bottom:var(--s-5)}
.eduhero__fig{position:relative;margin:0;overflow:hidden;min-height:clamp(260px,48vw,420px)}
@media (min-width:1000px){.eduhero__fig{min-height:0}}
.eduhero__fig img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* Seat the photograph into the dark ground on its left edge so the split reads
as one composition rather than two panels butted together. */
.eduhero__fig::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(90deg,var(--forest) 0%,rgba(7,35,26,.34) 22%,transparent 52%),
linear-gradient(0deg,rgba(5,25,18,.55),transparent 42%)}
/* THE CAPTION IS NOT OPTIONAL. Route 2 imagery is context, never claim, and the
word "illustrative" has to be visible on the page — not buried in alt text. */
.eduhero__fig figcaption{position:absolute;right:var(--s-5);bottom:var(--s-4);z-index:2;
font-size:12px;letter-spacing:.02em;color:rgba(238,245,240,.82);
background:rgba(5,25,18,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
padding:5px 10px;border-radius:var(--r);max-width:min(90%,44ch)}
/* ---- MANDATORY DISCLAIMER LINE ---- */
.disclaim{margin-top:var(--s-5);padding-left:var(--s-4);
border-left:2px solid var(--accent);font-size:13.5px;color:var(--ink-dim-2)}
.s-dark .disclaim,.s-dark-2 .disclaim{border-left-color:var(--accent-dark);color:var(--ink-inv-dim)}
/* ---- OWNED DIAGRAMS: campus plan + locator map ---- */
.eduplan,.edumap{margin:var(--s-8) 0 0}
.eduplan__svg,.edumap__svg{width:100%;height:auto;
background:var(--forest);border:1px solid var(--line);border-radius:var(--r-lg);
padding:var(--s-5)}
.eduplan figcaption,.edumap figcaption{margin-top:var(--s-4);font-size:12.5px;
line-height:1.5;color:var(--ink-dim-2);max-width:60ch}
.eduplan figcaption strong{color:var(--ink)}
.s-dark :is(.eduplan,.edumap) figcaption{color:var(--ink-inv-dim)}
.s-dark :is(.eduplan,.edumap) figcaption strong{color:var(--ink-inv)}
.eduplan__zone{fill:rgba(238,245,240,.035);stroke:var(--line-inv);stroke-width:1}
.eduplan__core{fill:var(--accent-tint);stroke:var(--accent-dark);stroke-width:1.4}
.edumap__land{fill:rgba(238,245,240,.05);stroke:var(--line-inv);stroke-width:1}
.edumap__land--alt{fill:rgba(238,245,240,.028)}
.edumap__pin-ring{fill:none;stroke:var(--accent-dark);stroke-width:1.6}
.edumap__pin-dot{fill:var(--accent-dark)}
/* ---- ③ CAMPUS MODEL CARDS ---- */
.edugrid{display:grid;gap:var(--gap);margin-top:var(--s-8);
grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.educard{position:relative;padding:var(--s-6) var(--s-5) var(--s-6) 0;
border-top:1px solid var(--line-light)}
.s-dark .educard,.s-dark-2 .educard{border-top-color:var(--line)}
.educard__n{display:block;font-family:var(--font-display);font-weight:700;font-size:12px;
letter-spacing:.12em;color:var(--accent);margin-bottom:var(--s-3)}
.s-dark .educard__n,.s-dark-2 .educard__n{color:var(--accent-dark)}
.educard h3{font-size:18px;margin-bottom:var(--s-3)}
.educard p{font-size:14.5px;color:var(--ink-dim-2)}
.s-dark .educard p,.s-dark-2 .educard p{color:var(--ink-inv-dim)}
/* ---- ④ ACADEMIC PILLARS: three tall cards, accent numerals ---- */
.edupillars{display:grid;gap:var(--gap);margin-top:var(--s-8);grid-template-columns:1fr}
@media (min-width:760px){.edupillars{grid-template-columns:repeat(3,1fr);gap:var(--s-7)}}
.edupillar{padding-top:var(--s-5);border-top:2px solid var(--accent-dark)}
.edupillar__n{display:block;font-family:var(--font-display);font-weight:800;
font-size:clamp(34px,4vw,48px);line-height:1;color:var(--accent-dark);opacity:.42;
margin-bottom:var(--s-4)}
.edupillar h3{font-size:20px;margin-bottom:var(--s-4)}
.edupillar p{font-size:14.5px;color:var(--ink-inv-dim)}
.s-light .edupillar p,.s-light-2 .edupillar p{color:var(--ink-dim-2)}
.s-light .edupillar,.s-light-2 .edupillar{border-top-color:var(--accent)}
.s-light .edupillar__n,.s-light-2 .edupillar__n{color:var(--accent);opacity:.35}
/* ---- ACCREDITATION LINE — a standing line, set in meta size. Plain. ---- */
.accredit{margin-top:var(--s-8);padding-top:var(--s-5);
border-top:1px solid var(--line);font-size:var(--t-small);letter-spacing:.02em;
color:var(--ink-inv-dim);max-width:none}
.s-light .accredit,.s-light-2 .accredit{border-top-color:var(--line-light);color:var(--ink-dim-2)}
/* ---- ⑥ GEOGRAPHY ---- */
.edugeo{display:grid;gap:var(--s-8)}
@media (min-width:1000px){.edugeo{grid-template-columns:5fr 6fr;gap:var(--s-9);align-items:center}}
.edugeo__list{margin-top:var(--s-6);display:flex;flex-direction:column}
.edugeo__list > div{padding-block:var(--s-4);border-top:1px solid var(--line-light)}
.edugeo__list > div:first-child{border-top:0}
.edugeo__list dt{font-family:var(--font-display);font-weight:600;font-size:16px;
color:var(--ink);margin-bottom:4px}
.edugeo__list dd{font-size:14.5px;color:var(--ink-dim-2)}
.edugeo__close{margin-top:var(--s-6);padding-left:var(--s-5);
border-left:3px solid var(--accent);font-family:var(--font-display);font-weight:600;
font-size:clamp(17px,2vw,21px);line-height:1.4;color:var(--ink);letter-spacing:-.01em}
.edugeo .edumap{margin-top:0}
/* ---- CROSS-RAIL: let a vertical accent drive the card rule ---- */
.rel.v--edu,.rel.v--env{--fam:var(--accent)}
/* ---- CONTACT: the vertical branch selector (§3.7) ---- */
.branch{display:grid;gap:var(--s-4);margin-bottom:var(--s-6)}
@media (min-width:560px){.branch{grid-template-columns:repeat(2,1fr)}}
.branch__opt{position:relative;display:block;cursor:pointer}
.branch__opt input{position:absolute;opacity:0;width:1px;height:1px}
.branch__box{display:block;height:100%;padding:var(--s-4) var(--s-5);
border:1px solid var(--line-inv);border-radius:var(--r);
background:rgba(238,245,240,.03);
transition:border-color var(--d-fast) var(--ease),background-color var(--d-fast) var(--ease)}
.branch__opt:hover .branch__box{border-color:rgba(238,245,240,.32)}
.branch__opt input:checked + .branch__box{border-color:var(--accent-dark);
background:rgba(238,245,240,.07);box-shadow:inset 0 0 0 1px var(--accent-dark)}
.branch__opt input:focus-visible + .branch__box{outline:2px solid var(--accent-dark);outline-offset:2px}
.branch__t{display:block;font-family:var(--font-display);font-weight:600;font-size:16px;
color:var(--ink-inv);margin-bottom:4px}
.branch__d{display:block;font-size:13px;color:var(--ink-inv-dim)}
/* PREVENT, NEVER ERROR: the inactive branch's fields are removed from the form,
not merely greyed out, so an invalid combination is never selectable. Without
JS both branches render in full under their own headings and the server
validates — the form is complete and submittable either way. */
.branch__fields{display:none}
.branch__fields.is-on{display:block}
/* WITHOUT JS the chooser STAYS VISIBLE and both branches render in full.
The radio is not decoration — the server reads `vertical` to decide which
branch to validate. Hiding it would leave a no-JS education enquirer filling
in education fields and being told to supply a service line. */
html:not(.js-branch) .branch__fields{display:block}
.branch__legend{font-family:var(--font-display);font-weight:700;font-size:17px;
color:var(--ink-inv);margin:var(--s-6) 0 var(--s-5);padding-bottom:var(--s-3);
border-bottom:1px solid var(--line)}
html.js-branch .branch__legend{display:none}
/* ---- LONG-FORM K/V ROWS (education sub-pages) ---- */
.edulong{display:grid;gap:var(--s-4);padding-block:var(--s-7);
border-top:1px solid var(--line-light)}
.edulong:first-of-type{border-top:0;padding-top:0}
@media (min-width:860px){
.edulong{grid-template-columns:4fr 7fr;gap:var(--s-8)}
.edulong--wide{grid-template-columns:4fr 7fr;gap:var(--s-9);align-items:start}}
.edulong--wide{border-top:0;padding-block:0}
.edulong__k h2,.edulong__k h3{letter-spacing:-.015em}
.edulong__v p{max-width:64ch}