/* TOKENS. Built against USER/DESIGN/DESIGN_SYSTEM.md v1. Nothing below uses a value not declared here.
   Palette: the logo is gray on white, so the site leans light (follow the logo). The navy, slate and
   rust come from the client's own existing site theme, so the rebrand keeps their colour memory.
   Two families: Archivo (display, set wide) and IBM Plex Sans (body). */
:root{
  --t1:12px; --t2:14px; --t3:16px; --t4:20px; --t5:28px; --t6:40px; --t7:64px;
  /* paper surface: three text tones */
  --ink:#13202b; --ink-mid:#2e5478; --ink-dim:#5c6b73;
  --paper:#f5f6f4; --paper-2:#e9ece9; --white:#fff; --line:#d6dbd8;
  /* dark surface: three text tones */
  --night:#0f1b26; --night-2:#152534; --on-night:#eef2f4; --on-night-mid:#c3d0d9; --on-night-dim:#8fa2b0;
  --night-line:rgba(195,208,217,.16);
  /* the one accent, for the primary action only */
  --accent:#b4532a; --accent-hover:#9a4522;
  /* the scan colour lives only inside the hero diagram */
  --signal:#7fb4d9;
  --r-s:4px; --r-m:8px; --r-l:16px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;padding-top:72px;background:var(--paper);color:var(--ink);font:400 var(--t3)/1.65 'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--s4)}
section{padding:var(--s8) 0}
.band-paper{background:var(--paper)}
.band-paper2{background:var(--paper-2)}
.band-white{background:var(--white)}
.band-night{background:var(--night);color:var(--on-night)}

h1,h2,h3{font-family:Archivo,system-ui,sans-serif;font-stretch:112%;font-weight:700;margin:0;line-height:1.06;letter-spacing:-.01em}
h1{font-size:clamp(36px,6.4vw,var(--t7))}
h2{font-size:clamp(var(--t5),4.4vw,var(--t6));color:var(--ink-mid);margin-bottom:var(--s4)}
h3{font-size:var(--t4);line-height:1.25;margin-bottom:var(--s2)}
.band-night h2{color:var(--on-night)}
p{margin:0 0 var(--s4);max-width:64ch;color:var(--ink-dim)}
.band-night p{color:var(--on-night-dim)}
.lead{font-size:var(--t4);line-height:1.55;color:var(--ink)}
.band-night .lead{color:var(--on-night-mid)}
.eyebrow{font:600 var(--t1)/1.4 'IBM Plex Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mid);margin:0 0 var(--s3);display:flex;align-items:center;gap:var(--s3)}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor;border-radius:var(--r-s)}
.band-night .eyebrow{color:var(--signal)}

/* buttons: one solid (the accent), one quiet */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:var(--s3) var(--s5);
  border-radius:var(--r-pill);font:600 var(--t3)/1 'IBM Plex Sans',sans-serif;text-decoration:none;border:1.5px solid transparent;
  transition:background .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.btn-solid{background:var(--accent);color:var(--white)}
.btn-solid:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-quiet{border-color:var(--night-line);color:var(--on-night)}
.btn-quiet:hover{border-color:var(--on-night-mid)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* header */
/* Fixed rather than sticky, and solid. On iOS Safari a sticky header left a strip of scrolling page
   content visible between the status bar and the header (Drew's iPhone, 2026-09-24); making it opaque
   alone did not fix it. A fixed, opaque bar pinned at top:0 is the case Safari tints its top area for.
   The body is padded by the bar height so nothing starts underneath it. */
header.site{position:fixed;top:0;left:0;right:0;z-index:30;background:var(--paper);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
header.site.scrolled{border-color:var(--line);box-shadow:0 8px 24px rgba(19,32,43,.06)}
.bar{display:flex;align-items:center;gap:var(--s5);height:72px}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;min-width:0;min-height:44px}
.brand img{height:30px;width:auto}
.brand span{font:700 var(--t2)/1.15 Archivo,sans-serif;font-stretch:112%;color:var(--ink);letter-spacing:.01em}
.brand small{display:block;font:500 var(--t1)/1.3 'IBM Plex Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
nav.primary{display:flex;gap:var(--s5);margin-left:auto}
nav.primary a{font-size:var(--t2);font-weight:500;text-decoration:none;color:var(--ink);position:relative;padding:var(--s2) 0;min-height:44px;display:flex;align-items:center}
nav.primary a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--ink-mid);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
nav.primary a:hover::after{transform:scaleX(1)}
.bar .btn{min-height:44px;padding:var(--s2) var(--s4);font-size:var(--t2)}
.bar .btn .sm{display:none}

/* hero */
.hero{position:relative;overflow:hidden;padding:var(--s8) 0 0}
.hero::before{content:"";position:absolute;inset:0;background:url(../img/hero-lattice.webp) center/cover no-repeat;opacity:.1;filter:grayscale(1)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 90% at 85% 40%,transparent 0%,var(--night) 70%)}
.hero > *{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s7);align-items:center}
.hero h1{margin-bottom:var(--s5)}
.hero h1 em{font-style:normal;color:var(--signal)}
.hero-cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.scan{position:relative;border:1px solid var(--night-line);border-radius:var(--r-l);background:linear-gradient(180deg,var(--night-2),var(--night));padding:var(--s4)}
.scan svg{width:100%;height:auto;display:block}
.scan figcaption{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-dim);padding:var(--s3) var(--s2) 0}
.scan figcaption b{color:var(--on-night-mid);font-weight:600}

/* the wave that closes the hero: the logo's own arc, drawn as a signal */
.wave{display:block;width:100%;height:72px;margin-top:var(--s8)}
.wave path{fill:none;stroke:var(--night-line);stroke-width:1.5}
.wave path.live{stroke:var(--signal);stroke-width:2;stroke-dasharray:140 1400;animation:travel 7s linear infinite;opacity:.8}
@keyframes travel{from{stroke-dashoffset:1540}to{stroke-dashoffset:0}}

/* jump bar */
.jump{background:var(--night-2);border-top:1px solid var(--night-line)}
.jump ul{list-style:none;margin:0 auto;padding:0 var(--s4);max-width:1160px;display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none}
.jump ul::-webkit-scrollbar{display:none}
.jump a{display:flex;align-items:center;min-height:52px;padding:0 var(--s4);white-space:nowrap;font-size:var(--t2);font-weight:500;color:var(--on-night-mid);text-decoration:none;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.jump a:hover{color:var(--on-night);border-color:var(--signal)}

/* problem */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:start}
.reasons{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.reasons li{display:grid;grid-template-columns:40px 1fr;gap:var(--s4);padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.reasons .n{font:700 var(--t2)/1.6 Archivo,sans-serif;color:var(--ink-mid);font-variant-numeric:tabular-nums}
.reasons h3{margin-bottom:var(--s1)}
.reasons p{margin:0;font-size:var(--t2)}

/* industries */
.ind{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-top:var(--s7)}
/* Every industry photo is shown at 4:3, the shape the photos were taken in. The transmission card used to
   span two columns with a short, wide crop that cut the tower and pier off (client, 2026-09-28: images
   too zoomed in on desktop). With twelve industries the cards fill every row at 3, 2 and 1 columns, so
   the dark 'not listed' card runs the full width of the grid underneath them. */
.ind .feature{grid-column:auto}
.ind .ask{grid-column:1/-1}
/* Photo pending (client is sending photos for the five industries added 2026-10-05). A quiet hatched
   field with the AAE mark, same 4:3 frame as a real photo, so the grid reads as finished and swapping
   in a photo is replacing the .ph contents with an <img>. */
.ind .ph.pending{display:grid;place-items:center;background:
  repeating-linear-gradient(45deg,transparent 0 9px,rgba(46,84,120,.07) 9px 10px),var(--paper-2)}
.ind .ph.pending img{width:72px;height:auto;opacity:.28;transform:none}
.ind .ask{background:var(--night);border-color:var(--night);color:var(--on-night);justify-content:space-between;padding:var(--s6) var(--s5)}
.ind .ask:hover{transform:none;box-shadow:none}
.ind .ask h3{font-size:var(--t5);color:var(--on-night)}
.ind .ask p{color:var(--on-night-dim);font-size:var(--t3)}
.ind .ask a{align-self:flex-start;margin-top:var(--s5);color:var(--on-night);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:var(--s2);border-bottom:2px solid var(--signal)}
.ind article{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;min-width:0;
  display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ind article:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(19,32,43,.1)}
.ind .ph{overflow:hidden;aspect-ratio:4/3}
.ind .ph img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%);transition:transform .8s var(--ease)}
.ind article:hover .ph img{transform:scale(1.05)}
.ind .body{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.ind .body p{font-size:var(--t2);margin-bottom:var(--s3)}
.ind details{margin-top:auto;border-top:1px solid var(--line);padding-top:var(--s3)}
.ind summary{cursor:pointer;list-style:none;font-size:var(--t2);font-weight:600;color:var(--ink-mid);display:flex;align-items:center;justify-content:space-between;min-height:44px}
.ind summary::-webkit-details-marker{display:none}
.ind summary .pm{width:20px;height:20px;position:relative}
.ind summary .pm::before,.ind summary .pm::after{content:"";position:absolute;left:3px;right:3px;top:9px;height:2px;background:currentColor;border-radius:var(--r-s);transition:transform .3s var(--ease)}
.ind summary .pm::after{transform:rotate(90deg)}
.ind details[open] summary .pm::after{transform:rotate(0)}
.ind details p{margin:var(--s2) 0 0}

/* services: list and panel on wide screens, stacked on phones */
.svc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s7);margin-top:var(--s7);align-items:start}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--night-line)}
.svc-list button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:40px 1fr 20px;gap:var(--s3);align-items:center;
  padding:var(--s4) 0;border-bottom:1px solid var(--night-line);min-height:56px;color:var(--on-night-dim);transition:color .25s,padding .35s var(--ease)}
.svc-list button .n{font:700 var(--t2)/1 Archivo,sans-serif;font-variant-numeric:tabular-nums}
.svc-list button .t{font:600 var(--t4)/1.25 Archivo,sans-serif;font-stretch:108%}
.svc-list button .a{opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s var(--ease)}
.svc-list button:hover,.svc-list button[aria-selected=true],.svc-list button[aria-expanded=true]{color:var(--on-night)}
.svc-list button[aria-selected=true],.svc-list button[aria-expanded=true]{padding-left:var(--s3)}
.svc-list button[aria-selected=true] .n,.svc-list button[aria-expanded=true] .n{color:var(--signal)}
.svc-list button[aria-selected=true] .a,.svc-list button[aria-expanded=true] .a,.svc-list button:hover .a{opacity:1;transform:none}
.svc-list button:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--r-l);padding:var(--s5);min-height:420px}
.panel[hidden]{display:none}
.svc-list li > .panel{margin:var(--s3) 0 var(--s4)}
.panel.in{animation:panel .5s var(--ease)}
@keyframes panel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel .ph{border-radius:var(--r-m);overflow:hidden;background:var(--night);align-self:start}
/* Focal points. Every photo carries --fp, the point that must survive any crop (x% y%, default centre).
   Cropped frames (industry cards, method, service panels) aim object-position at it. */
/* Service photos (client 2026-10-05: the images did not fit each service between PC and phone).
   Each photo gets the layout its shape suits instead of one frame for all six:
   - Portrait photos (panel class "tall") sit beside the text from desktop down to tablet, in a portrait frame.
   - Landscape photos (panel class "wide") run full width above the text, so they are never a thin band.
   The frame follows the photo's own shape (--ar; --ar-s on phones), so any crop is a gentle trim toward the
   focal point (--fp), never the heavy zoom the client objected to in the first round. */
.panel .ph img,.panel .ph video{display:block;width:100%;height:auto;aspect-ratio:var(--ar,4/3);object-fit:cover;object-position:var(--fp,50% 50%)}
.panel.wide{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.panel h3{font-size:var(--t5);color:var(--on-night);margin-bottom:var(--s3)}
.panel p{color:var(--on-night-mid);font-size:var(--t3)}
.tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);padding:0;list-style:none}
.tags li{font-size:var(--t1);letter-spacing:.06em;color:var(--on-night-mid);border:1px solid var(--night-line);border-radius:var(--r-pill);padding:var(--s1) var(--s3)}

/* method */
.method{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:center}
.method .ph{border-radius:var(--r-l);overflow:hidden;position:relative}
.method .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:var(--fp,50% 50%)}
.method .ph figcaption{position:absolute;left:var(--s4);bottom:var(--s4);right:var(--s4);background:rgba(15,27,38,.82);backdrop-filter:blur(6px);color:var(--on-night-mid);
  font-size:var(--t2);padding:var(--s3) var(--s4);border-radius:var(--r-m)}
.steps{list-style:none;margin:var(--s6) 0 0;padding:0;counter-reset:s}
.steps li{position:relative;padding:0 0 var(--s6) 64px}
.steps li::before{counter-increment:s;content:"0" counter(s);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:var(--r-pill);
  display:grid;place-items:center;font:700 var(--t2)/1 Archivo,sans-serif;color:var(--ink-mid);border:1.5px solid var(--ink-mid);background:var(--paper)}
.steps li::after{content:"";position:absolute;left:21px;top:52px;bottom:8px;width:2px;background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{margin-bottom:var(--s1);padding-top:var(--s2)}
.steps p{margin:0;font-size:var(--t2)}
.aside{margin-top:var(--s6);background:var(--white);border:1px solid var(--line);border-left:3px solid var(--ink-mid);border-radius:var(--r-m);padding:var(--s4) var(--s5)}
.aside p{margin:0;font-size:var(--t2);color:var(--ink)}

/* faq */
.faq{margin-top:var(--s7);border-top:1px solid var(--line);max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr 24px;gap:var(--s4);align-items:center;padding:var(--s5) 0;min-height:44px;
  font:600 var(--t4)/1.35 Archivo,sans-serif;font-stretch:104%;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ink-mid)}
.faq .pm{width:24px;height:24px;position:relative}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:4px;right:4px;top:11px;height:2px;background:var(--ink-mid);border-radius:var(--r-s);transition:transform .3s var(--ease)}
.faq .pm::after{transform:rotate(90deg)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq .a{padding:0 0 var(--s5)}
.faq .a p{margin:0 0 var(--s3)}

/* capability statement download */
.cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center}
.cap h2{margin-bottom:var(--s3)}
.cap p{margin:0}
.cap .btn{gap:var(--s3)}
.cap .btn small{font-weight:500;opacity:.85}
@media (max-width:820px){.cap{grid-template-columns:1fr}}
@media (max-width:560px){.cap .btn{width:100%;flex-wrap:wrap;text-align:center}}

/* closing */
.close{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:var(--s7);align-items:end}
.close h2{font-size:clamp(var(--t5),5vw,52px)}
footer{background:var(--night);color:var(--on-night-dim);border-top:1px solid var(--night-line);padding:var(--s7) 0 var(--s6);font-size:var(--t2)}
.foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:start}
.foot img{width:200px}
.foot nav{display:grid;grid-template-columns:repeat(2,auto);gap:var(--s2) var(--s6)}
.foot nav a{text-decoration:none;color:var(--on-night-mid);min-height:44px;display:flex;align-items:center}
.foot nav a:hover{color:var(--on-night)}
.legal{grid-column:1/-1;border-top:1px solid var(--night-line);padding-top:var(--s5);margin-top:var(--s3);font-size:var(--t1);letter-spacing:.04em}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.on{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

@media (max-width:980px){
  nav.primary{display:none}
  .bar .btn{margin-left:auto}
  .hero-grid,.split,.method,.close,.svc{grid-template-columns:1fr}
  .ind{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{gap:var(--s6)}
  .split,.method{gap:var(--s6)}
  .panel{min-height:0}
}
@media (max-width:600px){
  .panel,.panel.wide{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .panel .ph img,.panel .ph video{aspect-ratio:var(--ar-s,var(--ar,4/3))}
}
@media (max-width:820px){
  section{padding:56px 0}
  .hero{padding-top:56px}
  .wave{margin-top:var(--s7);height:48px}
  .foot{grid-template-columns:1fr}
  .ind{grid-template-columns:1fr}
}
@media (max-width:560px){
  .brand small{display:none}
  .bar .btn .lg{display:none}
  .bar .btn .sm{display:inline}
  .bar{gap:var(--s3)}
  .bar .btn{padding:var(--s2) var(--s3)}
  .hero-cta .btn{width:100%}
  .close .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}