/* ==========================================================================
   HIGHRISE MAINTENANCE AUSTRALIA — "The Vertical Plane"
   Design tokens per design-system.md
   Palette informed by modusprojects.nl (near-black + single warm accent)
   and metriccivil.ca (warm off-white ground for light sections).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=IBM+Plex+Mono:wght@400;500&family=Inter:opsz,wght@14..32,300..700&display=swap');

:root{
  /* ---- colour ---- */
  --ink:        #080B0F;   /* the shadow side of a tower */
  --ink-2:      #10161D;   /* elevated surface */
  --ink-3:      #1B242E;   /* hairline / border */
  --concrete:   #EFEBE4;   /* warm limestone — Perth daylight */
  --concrete-2: #E2DCD2;
  --slate:      #8B96A3;   /* muted on dark */
  --slate-d:    #5C6470;   /* muted on light */
  --signal:     #FF5A1F;   /* the only accent. Hi-vis. */
  --signal-dim: #C6420F;

  /* ---- type ---- */
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- spacing (8px base, extended) ---- */
  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s5: 48px;  --s6: 64px;  --s7: 96px;  --s8: 128px;
  --s9: 192px; --s10: 256px; --s11: 384px;

  /* ---- motion ---- */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 200ms;
  --t-med:  520ms;
  --t-slow: 1000ms;

  /* ---- layout ---- */
  --max: 1560px;
  --gut: clamp(20px, 4vw, 64px);
  --rail: 76px;             /* altitude rail width, desktop */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--concrete);
  font-family:var(--body);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.65;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--signal); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:2px;
}

/* --------------------------------------------------------------------------
   Typography primitives
   -------------------------------------------------------------------------- */
.display{
  font-family:var(--display);
  font-weight:800;
  line-height:0.86;
  letter-spacing:-0.025em;
  text-transform:uppercase;
  font-variation-settings:'wdth' 88, 'wght' 800;
  margin:0;
}
.h1{ font-size:clamp(2.9rem, 6.6vw, 7.4rem); }
.h2{ font-size:clamp(2.4rem, 5.6vw, 6.2rem); }
.h3{
  font-family:var(--display);
  font-weight:700;
  font-variation-settings:'wdth' 92,'wght' 700;
  font-size:clamp(1.5rem, 2.3vw, 2.35rem);
  line-height:1.02;
  letter-spacing:-0.015em;
  text-transform:uppercase;
  margin:0;
}
.lede{
  font-size:clamp(1.12rem, 1.55vw, 1.5rem);
  line-height:1.5;
  font-weight:350;
  max-width:46ch;
  color:color-mix(in srgb, var(--concrete) 88%, transparent);
}
.label{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--slate);
}
.label--signal{ color:var(--signal); }
.num{
  font-family:var(--display);
  font-variation-settings:'wdth' 70,'wght' 700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.03em;
  line-height:0.84;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--s3);
}
section{ position:relative; }
.pad{ padding-block:clamp(var(--s7), 12vw, var(--s10)); }
.light{ background:var(--concrete); color:var(--ink); }
.light .label{ color:var(--slate-d); }
.light .lede{ color:color-mix(in srgb, var(--ink) 78%, transparent); }
.rule{ height:1px; background:var(--ink-3); border:0; margin:0; }
.light .rule{ background:color-mix(in srgb, var(--ink) 15%, transparent); }

/* --------------------------------------------------------------------------
   Preloader — the descent counter
   -------------------------------------------------------------------------- */
#preload{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:grid; place-items:center;
  gap:var(--s3);
}
#preload .pl-inner{ text-align:left; }
#preload .pl-num{
  font-family:var(--display);
  font-variation-settings:'wdth' 68,'wght' 700;
  font-size:clamp(4rem,14vw,11rem);
  line-height:0.8;
  color:var(--concrete);
  font-variant-numeric:tabular-nums;
}
#preload .pl-num sup{ font-size:0.22em; vertical-align:super; color:var(--signal); font-family:var(--mono); letter-spacing:0.1em; }
#preload .pl-bar{ height:2px; background:var(--ink-3); margin-top:var(--s3); overflow:hidden; }
#preload .pl-bar i{ display:block; height:100%; width:0; background:var(--signal); }
body.loading{ overflow:hidden; }

/* --------------------------------------------------------------------------
   Altitude rail — fixed scroll-linked elevation gauge
   technique: original to this project (survey/elevation metaphor)
   -------------------------------------------------------------------------- */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail);
  z-index:40; pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
  padding-block:var(--s6);
}
/* The rail is fixed over both ink and concrete sections, so its labels invert
   against whatever is actually behind them — difference blending does that per
   element, while the orange progress bar stays out of the blend and keeps its hue. */
.rail__val,.rail__unit,.rail__cap{ mix-blend-mode:difference; }
.rail__line{
  flex:1; width:1px; background:#7A8492; opacity:.55; position:relative; margin-block:var(--s2);
}
.rail__prog{
  position:absolute; top:0; left:-1px; width:3px; height:0;
  background:var(--signal);
}
.rail__val{
  font-family:var(--display);
  font-variation-settings:'wdth' 66,'wght' 700;
  font-size:22px; color:#FFFFFF; font-variant-numeric:tabular-nums; line-height:1;
}
.rail__unit{ font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:#9AA4B0; margin-top:6px; }
.rail__cap{
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; color:#9AA4B0;
  writing-mode:vertical-rl; text-orientation:mixed;
}

/* --------------------------------------------------------------------------
   Custom cursor — a survey reticle
   -------------------------------------------------------------------------- */
.cursor{
  position:fixed; top:0; left:0; z-index:150; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  opacity:0; transition:opacity var(--t-fast) linear;
}
.cursor svg{ width:100%; height:100%; display:block; }
.cursor circle{ transition:r 380ms var(--e-out), stroke-opacity 380ms; }
.cursor .cx{ transition:opacity 300ms; }
.cursor__label{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.7);
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:var(--signal); padding:5px 8px; white-space:nowrap;
  opacity:0; transition:opacity 240ms, transform 380ms var(--e-out);
}
body.cur-on .cursor{ opacity:1; }
body.cur-grow .cursor circle{ r:26; stroke-opacity:.9; }
body.cur-grow .cursor .cx{ opacity:0; }
body.cur-tag .cursor circle{ r:0; stroke-opacity:0; }
body.cur-tag .cursor .cx{ opacity:0; }
body.cur-tag .cursor__label{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:var(--s3) var(--gut) var(--s3) calc(var(--rail) + 8px);
  display:flex; align-items:center; gap:var(--s5);
  transition:background var(--t-med) var(--e-out), border-color var(--t-med), padding var(--t-med) var(--e-out);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--ink-3);
  padding-block:14px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand svg{ height:38px; width:auto; color:var(--concrete); transition:height var(--t-med) var(--e-out); }
.nav.stuck .brand svg{ height:32px; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--display);
  font-variation-settings:'wdth' 76,'wght' 800;
  font-size:17px; letter-spacing:0.06em; text-transform:uppercase; color:var(--concrete);
}
.brand__sub{
  font-family:var(--mono); font-size:8.5px; letter-spacing:0.235em;
  text-transform:uppercase; color:var(--slate); margin-top:5px;
}
.nav__links{ display:flex; gap:var(--s4); margin-left:auto; }
.nav__links a{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); position:relative; padding-block:4px;
  transition:color var(--t-fast);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--signal); transform:scaleX(0); transform-origin:right;
  transition:transform 420ms var(--e-out);
}
.nav__links a:hover{ color:var(--concrete); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__tel{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--concrete);
  display:flex; align-items:center; gap:8px;
}
.nav__tel .dot{ width:6px; height:6px; background:var(--signal); border-radius:50%; animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.burger{ display:none; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  --bg:var(--signal); --fg:var(--ink);
  position:relative; display:inline-flex; align-items:center; gap:14px;
  padding:19px 30px; border:0; cursor:pointer;
  background:var(--bg); color:var(--fg);
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  overflow:hidden; isolation:isolate; will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:var(--concrete); transform:translateY(101%);
  transition:transform 520ms var(--e-out);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:var(--ink); }
.btn svg{ position:relative; z-index:2; width:15px; height:15px; transition:transform 460ms var(--e-out); }
.btn:hover svg{ transform:translateX(5px); }
.btn--ghost{ --bg:transparent; --fg:var(--concrete); box-shadow:inset 0 0 0 1px var(--ink-3); }
.btn--ghost::before{ background:var(--signal); }
.light .btn--ghost{ --fg:var(--ink); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent); }

/* --------------------------------------------------------------------------
   HERO — asymmetric 7/5, no centring anywhere
   -------------------------------------------------------------------------- */
.hero{
  min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--s7) + 40px) 0 var(--s5);
  padding-left:var(--rail);
  overflow:hidden;
}
.hero__grid{ align-items:end; }
.hero__type{ grid-column:1 / span 7; }
.hero__kick{ display:flex; align-items:center; gap:14px; margin-bottom:var(--s4); }
.hero__kick .bar{ width:44px; height:1px; background:var(--signal); }
.hero h1{ margin-bottom:var(--s4); }
.hero h1 .em{ color:var(--signal); }
.hero__lede{ margin-bottom:var(--s5); max-width:42ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.hero__media{
  grid-column:9 / span 4; position:relative;
  aspect-ratio:3/4; max-height:64svh; align-self:center; overflow:hidden; background:var(--ink-2);
}
.hero__media img{ width:100%; height:112%; object-fit:cover; will-change:transform; }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, color-mix(in srgb,var(--ink) 70%, transparent), transparent 46%);
}
.hero__tag{
  position:absolute; left:0; bottom:0; z-index:2;
  background:var(--signal); color:var(--ink);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:10px 16px;
}
.hero__foot{
  margin-top:var(--s6); padding-top:var(--s3);
  border-top:1px solid var(--ink-3);
  display:flex; flex-wrap:wrap; gap:var(--s6) var(--s7);
}
.hero__foot div{ display:flex; flex-direction:column; gap:8px; }
.hero__foot strong{
  font-family:var(--display); font-variation-settings:'wdth' 78,'wght' 700;
  font-size:clamp(1.4rem,2.2vw,2rem); line-height:1; text-transform:uppercase;
}

/* line-mask reveal used by kinetic type */
.line-mask{ overflow:hidden; display:block; padding:0 .06em .12em; margin:0 -.06em -.12em; }

/* --------------------------------------------------------------------------
   Marquee — standards ticker
   -------------------------------------------------------------------------- */
.ticker{
  border-block:1px solid var(--ink-3);
  padding-block:18px; overflow:hidden; white-space:nowrap;
  background:var(--ink-2);
}
.ticker__track{ display:inline-flex; will-change:transform; }
.ticker__track span{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--slate); padding-inline:26px; display:inline-flex; align-items:center; gap:26px;
}
.ticker__track span::after{ content:''; width:5px; height:5px; background:var(--signal); display:block; }

/* --------------------------------------------------------------------------
   Manifest
   -------------------------------------------------------------------------- */
.manifest__grid{ align-items:start; }
.manifest__media{ grid-column:1 / span 4; position:relative; overflow:hidden; aspect-ratio:4/5; }
.manifest__media img{ width:100%; height:118%; object-fit:cover; will-change:transform; }
.manifest__body{ grid-column:6 / span 7; }
.manifest__body p{ font-size:clamp(1.05rem,1.35vw,1.28rem); line-height:1.62; max-width:52ch; }
.manifest__body p + p{ margin-top:var(--s3); }
.manifest__quote{
  font-family:var(--display); font-variation-settings:'wdth' 92,'wght' 600;
  font-size:clamp(1.6rem,2.7vw,2.7rem); line-height:1.06; text-transform:uppercase;
  letter-spacing:-0.015em; margin:0 0 var(--s5); max-width:20ch;
}
.manifest__quote em{ font-style:normal; color:var(--signal); }

/* --------------------------------------------------------------------------
   Method — asymmetric bento comparing access methods
   -------------------------------------------------------------------------- */
.bento{
  display:grid; gap:2px;
  grid-template-columns:repeat(12,1fr);
  background:color-mix(in srgb,var(--ink) 14%, transparent);
  margin-top:var(--s6);
}
.cell{
  background:var(--concrete); padding:var(--s5) var(--s4);
  display:flex; flex-direction:column; gap:var(--s3);
  position:relative; transition:background 420ms var(--e-out), color 420ms var(--e-out);
}
.cell__head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2); }
.cell__idx{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--slate-d); }
.cell__metrics{ margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.metric{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2);
  border-top:1px solid color-mix(in srgb,var(--ink) 12%, transparent); padding-top:10px; }
.metric dt{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-d); margin:0; }
.metric dd{ margin:0; font-family:var(--display); font-variation-settings:'wdth' 80,'wght' 700;
  font-size:1.25rem; text-transform:uppercase; line-height:1; }
.cell p{ margin:0; font-size:.96rem; line-height:1.55; color:color-mix(in srgb,var(--ink) 72%,transparent); }
/* spans — deliberately uneven */
.cell--a{ grid-column:span 3; }
.cell--b{ grid-column:span 3; }
.cell--c{ grid-column:span 3; }
.cell--d{ grid-column:span 3; background:var(--ink); color:var(--concrete); }
.cell--d .cell__idx,.cell--d .metric dt{ color:var(--signal); }
.cell--d p{ color:color-mix(in srgb,var(--concrete) 76%,transparent); }
.cell--d .metric{ border-top-color:var(--ink-3); }
.cell--wide{ grid-column:span 12; background:var(--ink); color:var(--concrete);
  flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s4); }
.cell--wide p{ color:color-mix(in srgb,var(--concrete) 80%,transparent); max-width:46ch; }

/* --------------------------------------------------------------------------
   Services — pinned horizontal scroll
   -------------------------------------------------------------------------- */
.hscroll{ overflow:hidden; }
.hscroll__viewport{ height:100svh; display:flex; align-items:center; padding-top:56px; }
.hscroll__track{ display:flex; gap:var(--s4); will-change:transform;
  padding-left:calc(var(--gut) + var(--rail)); padding-right:var(--gut); }
.sector{
  flex:0 0 min(88vw, 640px);
  background:var(--ink-2); border:1px solid var(--ink-3);
  display:flex; flex-direction:column;
  max-height:76svh;
}
.sector__img{ position:relative; height:clamp(180px,26svh,280px); overflow:hidden; flex:none; }
.sector__img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.35); transition:filter 700ms var(--e-out), transform 900ms var(--e-out); }
.sector:hover .sector__img img{ filter:grayscale(0); transform:scale(1.05); }
.sector__no{
  position:absolute; top:0; left:0; background:var(--signal); color:var(--ink);
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; padding:9px 14px;
}
.sector__body{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); overflow:hidden; }
.sector__body > p{ margin:0; font-size:.98rem; color:var(--slate); max-width:44ch; }
.sector__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s3); }
.sector__list li{
  font-size:.9rem; padding:10px 0; border-top:1px solid var(--ink-3);
  display:flex; align-items:center; gap:10px; color:color-mix(in srgb,var(--concrete) 82%,transparent);
}
.sector__list li::before{ content:''; width:4px; height:4px; background:var(--signal); flex:none; }
.hscroll__hint{
  position:absolute; right:var(--gut); bottom:var(--s5); z-index:3;
  display:flex; align-items:center; gap:12px;
}
.hscroll__hint .bar{ width:90px; height:2px; background:var(--ink-3); position:relative; }
.hscroll__hint .bar i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--signal); display:block; }

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s3) var(--s4); }
.stat{ grid-column:span 3; border-top:1px solid var(--ink-3); padding-top:var(--s3); }
.light .stat{ border-top-color:color-mix(in srgb,var(--ink) 16%,transparent); }
.stat__v{ font-size:clamp(3rem,6.2vw,6.4rem); display:flex; align-items:baseline; gap:2px; }
.stat__v sup{ font-size:.26em; color:var(--signal); font-family:var(--mono); letter-spacing:.06em; top:-1.6em; }
.stat__k{ margin-top:var(--s2); font-size:.92rem; max-width:26ch; color:var(--slate); }
.light .stat__k{ color:var(--slate-d); }

/* --------------------------------------------------------------------------
   Compliance — scroll-drawn rope + document list
   -------------------------------------------------------------------------- */
.comply__grid{ align-items:start; }
.comply__head{ grid-column:1 / span 5; position:sticky; top:140px; }
.comply__list{ grid-column:7 / span 6; list-style:none; margin:0; padding:0; }
.comply__list li{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s3);
  padding:var(--s4) 0; border-top:1px solid var(--ink-3);
}
.comply__list li:last-child{ border-bottom:1px solid var(--ink-3); }
.comply__list .code{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--signal);
  padding-top:6px; white-space:nowrap;
}
.comply__list h4{ margin:0 0 8px; font-family:var(--display);
  font-variation-settings:'wdth' 92,'wght' 700; font-size:1.15rem; text-transform:uppercase; letter-spacing:-.01em; }
.comply__list p{ margin:0; font-size:.95rem; color:var(--slate); max-width:44ch; }
.rope{ position:absolute; left:calc(50% - 1px); top:0; height:100%; width:2px; pointer-events:none; opacity:.55; }
.rope__node{ position:absolute; left:-5px; top:0; width:12px; height:12px; border:2px solid var(--signal);
  border-radius:50%; background:var(--concrete); }
.rope svg{ height:100%; width:100%; overflow:visible; }

/* --------------------------------------------------------------------------
   About / team
   -------------------------------------------------------------------------- */
.about__grid{ align-items:start; }
.about__l{ grid-column:1 / span 6; }
.about__r{ grid-column:8 / span 5; }
.about__r p{ font-size:1.02rem; line-height:1.62; }
.about__r p + p{ margin-top:var(--s3); }
.values{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:var(--s5);
  background:color-mix(in srgb,var(--ink) 14%,transparent); }
.values div{ background:var(--concrete); color:var(--ink); padding:var(--s3); }
.values dt{ font-family:var(--display); font-variation-settings:'wdth' 84,'wght' 700;
  font-size:1.05rem; text-transform:uppercase; }
.values dd{ margin:8px 0 0; font-size:.9rem; color:var(--slate-d); }
.about__media{ margin-top:var(--s5); overflow:hidden; aspect-ratio:16/10; }
.about__media img{ width:100%; height:115%; object-fit:cover; will-change:transform; }

/* pull quotes */
.quotes{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s6) var(--s4); }
.quote{ grid-column:span 6; }
.quote blockquote{
  margin:0 0 var(--s3);
  font-family:var(--display); font-variation-settings:'wdth' 96,'wght' 500;
  font-size:clamp(1.25rem,1.9vw,1.8rem); line-height:1.18; letter-spacing:-.01em;
  text-transform:none;
}
.quote blockquote::before{ content:'“'; color:var(--signal); }
.quote blockquote::after{ content:'”'; color:var(--signal); }
.quote figcaption{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate); }
.quote--offset{ margin-top:var(--s7); }

/* --------------------------------------------------------------------------
   Contact / form
   -------------------------------------------------------------------------- */
.contact__grid{ align-items:start; }
.contact__l{ grid-column:1 / span 5; }
.contact__form{ grid-column:7 / span 6; }
.field{ position:relative; margin-bottom:var(--s4); }
.field label{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--slate); margin-bottom:10px;
}
.field .req{ color:var(--signal); }
.field input,.field textarea,.field select{
  width:100%; background:transparent; color:var(--concrete);
  border:0; border-bottom:1px solid var(--ink-3);
  padding:12px 0; font-family:var(--body); font-size:1.02rem;
  transition:border-color 300ms var(--e-out);
  border-radius:0; appearance:none;
}
.field select{ cursor:pointer; }
.field select option{ background:var(--ink-2); color:var(--concrete); }
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:0; border-bottom-color:var(--signal); }
.field input::placeholder,.field textarea::placeholder{ color:#4a525d; }
.field.err input,.field.err textarea,.field.err select{ border-bottom-color:var(--signal); }
.field .msg{ display:none; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  color:var(--signal); text-transform:uppercase; margin-top:8px; }
.field.err .msg{ display:block; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.field--row .field{ margin-bottom:0; }
.chipset{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.chip span{
  display:block; padding:11px 16px; border:1px solid var(--ink-3);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--slate); transition:all 260ms var(--e-out);
}
.chip input:checked + span{ background:var(--signal); border-color:var(--signal); color:var(--ink); }
.chip input:focus-visible + span{ outline:2px solid var(--signal); outline-offset:3px; }
.form__foot{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s5); }
.form__note{ font-size:.8rem; color:var(--slate); max-width:34ch; }
.form__ok{
  display:none; border:1px solid var(--signal); padding:var(--s4);
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; line-height:1.7;
}
.form__ok.on{ display:block; }
.contact__details{ list-style:none; margin:var(--s5) 0 0; padding:0; }
.contact__details li{ padding:var(--s3) 0; border-top:1px solid var(--ink-3); }
.contact__details a{ font-family:var(--display); font-variation-settings:'wdth' 82,'wght' 700;
  font-size:clamp(1.3rem,2vw,1.9rem); text-transform:uppercase; letter-spacing:-.01em;
  display:inline-block; transition:color 260ms; }
.contact__details a:hover{ color:var(--signal); }
.contact__details .k{ display:block; margin-bottom:8px; }

/* careers strip */
.careers{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s4); align-items:center; }
.careers__t{ grid-column:1 / span 5; }
.careers__b{ grid-column:7 / span 6; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot{ padding:var(--s7) 0 var(--s4); border-top:1px solid var(--ink-3); }
.foot__claim{
  font-family:var(--display); font-variation-settings:'wdth' 74,'wght' 800;
  font-size:clamp(2.6rem,10vw,9rem); line-height:.84; text-transform:uppercase;
  letter-spacing:-.03em; margin:0 0 var(--s6);
  color:color-mix(in srgb, var(--concrete) 15%, transparent);
}
.foot__cols{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s4); }
.foot__cols > div:nth-child(1){ grid-column:span 4; }
.foot__cols > div:nth-child(2){ grid-column:span 3; }
.foot__cols > div:nth-child(3){ grid-column:span 3; }
.foot__cols > div:nth-child(4){ grid-column:span 2; }
.foot__cols h5{ margin:0 0 var(--s3); font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--slate); font-weight:500; }
.foot__cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot__cols a{ font-size:.92rem; color:color-mix(in srgb,var(--concrete) 80%,transparent); transition:color 220ms; }
.foot__cols a:hover{ color:var(--signal); }
.foot__base{ margin-top:var(--s7); padding-top:var(--s3); border-top:1px solid var(--ink-3);
  display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }
.foot__base p{ margin:0; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate-d); }

/* --------------------------------------------------------------------------
   Reveal defaults (JS adds .in)
   -------------------------------------------------------------------------- */
[data-rise]{ opacity:0; transform:translateY(34px); }
[data-rise].in{ opacity:1; transform:none; transition:opacity 900ms var(--e-out), transform 900ms var(--e-out); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .hero__type{ grid-column:1 / span 8; }
  .hero__media{ grid-column:9 / span 4; }
  .manifest__media{ grid-column:1 / span 5; }
  .manifest__body{ grid-column:7 / span 6; }
  .cell--a,.cell--b,.cell--c,.cell--d{ grid-column:span 6; }
  .stat{ grid-column:span 6; }
  .about__l{ grid-column:1 / span 12; }
  .about__r{ grid-column:1 / span 12; margin-top:var(--s5); }
  .comply__head{ grid-column:1 / span 12; position:static; margin-bottom:var(--s5); }
  .comply__list{ grid-column:1 / span 12; }
  .contact__l{ grid-column:1 / span 12; }
  .contact__form{ grid-column:1 / span 12; margin-top:var(--s6); }
  .careers__t,.careers__b{ grid-column:span 12; }
  .foot__cols > div{ grid-column:span 6 !important; }
}
@media (max-width:860px){
  :root{ --rail:0px; }
  .nav{ gap:var(--s3); }
  .nav__tel{ white-space:nowrap; font-size:11.5px; }
  .rail{ display:none; }
  .nav{ padding-left:var(--gut); }
  .nav__links{ display:none; }
  .nav__tel{ margin-left:auto; }
  .burger{
    display:grid; place-items:center; width:44px; height:44px; margin-left:var(--s2);
    background:transparent; border:1px solid var(--ink-3); cursor:pointer;
  }
  .burger i{ display:block; width:18px; height:1.5px; background:var(--concrete); transition:transform 340ms var(--e-out), opacity 200ms; }
  .burger i + i{ margin-top:5px; }
  body.menu-open .burger i:first-child{ transform:translateY(6.5px) rotate(45deg); }
  body.menu-open .burger i:nth-child(2){ opacity:0; }
  body.menu-open .burger i:last-child{ transform:translateY(-6.5px) rotate(-45deg); }
  .drawer{
    position:fixed; inset:0; z-index:95; background:var(--ink);
    display:flex; flex-direction:column; justify-content:center; gap:var(--s3);
    padding:var(--gut); transform:translateY(-100%); transition:transform 620ms var(--e-out);
  }
  body.menu-open .drawer{ transform:none; }
  .drawer a{ font-family:var(--display); font-variation-settings:'wdth' 84,'wght' 700;
    font-size:2.2rem; text-transform:uppercase; line-height:1; }
  .drawer a small{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em;
    color:var(--slate); margin-top:8px; }
  .hero{ min-height:auto; padding-top:calc(var(--s8) + 20px); }
  .hero__type{ grid-column:1 / span 12; }
  .hero__media{ grid-column:1 / span 12; margin-top:var(--s5); aspect-ratio:4/3; }
  .hero__foot{ gap:var(--s4) var(--s5); margin-top:var(--s6); }
  .manifest__media{ grid-column:1 / span 12; }
  .manifest__body{ grid-column:1 / span 12; margin-top:var(--s5); }
  .cell--a,.cell--b,.cell--c,.cell--d{ grid-column:span 12; }
  .stat{ grid-column:span 6; }
  .quote{ grid-column:span 12; }
  .quote--offset{ margin-top:0; }
  .values{ grid-template-columns:1fr; }
  .hscroll__viewport{ height:auto; display:block; padding-block:var(--s6); }
  .hscroll__track{ flex-direction:column; transform:none !important; }
  .sector{ flex:none; max-height:none; }
  .hscroll__hint{ display:none; }
  .field--row{ grid-template-columns:1fr; gap:var(--s4); }
  .field--row .field{ margin-bottom:0; }
  .foot__cols > div{ grid-column:span 12 !important; }
}
@media (max-width:560px){
  .brand__sub{ display:none; }
  .brand svg{ height:32px; }
  .brand__name{ font-size:15px; }
  .nav__tel{ font-size:11px; }
  .hero__foot{ gap:var(--s3) var(--s4); }
  .sector__list{ grid-template-columns:1fr; }
  .stat{ grid-column:span 12; }
}
@media (min-width:861px){ .drawer{ display: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; }
  [data-rise]{ opacity:1; transform:none; }
  .cursor{ display:none; }
  /* the pinned horizontal track never runs here, so stack the sectors —
     otherwise cards 3 and 4 sit outside the clipped viewport, unreachable. */
  .hscroll__viewport{ height:auto; display:block; padding:var(--s6) 0; }
  .hscroll__track{ flex-direction:column; transform:none !important;
    padding-left:calc(var(--gut) + var(--rail)); }
  .sector{ flex:none; max-height:none; }
  .hscroll__hint{ display:none; }
}