/* =========================================================================
   Proxsea website — LAYOUT & STYLE
   =========================================================================
   Colour, type, spacing and layout. Words live in content.js; changing text
   there never touches this file. Colour tokens match assets/PXD_Web_Tokens.css.
   ========================================================================= */

:root{
  --night:#061430;
  --band:rgba(3,8,20,.86);   /* the header's and footer's band, the darkest blue, a little translucent */
  --deep:#0D2B6E;
  --blue:#0A4FAD;
  --cobalt:#1671CC;
  --cyan:#62D6E8;
  --teal:#4AB8CE;
  --abyss:#1A3A5C;
  --mist:#B0D8E4;
  --paper:#EEF3F6;
  --paper-2:#E1EAF0;
  --ink:#0A1C3A;
  --ink-2:#3E5670;
  --on-dark:#E6F1F5;
  --on-dark-2:#9FBBCB;
  --rule-dark:rgba(176,216,228,.16);
  --rule-light:rgba(10,28,58,.14);
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow","Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
  /* the page grid: three equal columns between large margins; everything
     starts at the left margin and nothing is centred on the viewport */
  --margin:clamp(24px,5vw,96px);
  --col-gap:clamp(20px,3vw,48px);
  --col:calc((100% - 2 * var(--col-gap)) / 3);
  --gutter:var(--margin);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--on-dark);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
.wrap{max-width:none;margin-inline:0;padding-inline:var(--margin)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:.005em}
h2{font-size:clamp(34px,4.4vw,54px)}
h3{font-size:clamp(24px,2.4vw,30px)}
p{margin:0}
em{font-style:normal;color:var(--cyan)}
.light em{color:var(--blue)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);display:block}
.light .eyebrow{color:var(--blue)}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.55;max-width:62ch}
.lede + .lede{margin-top:12px}
/* a hyphenated word never breaks at its hyphen (see keepHyphens in site.js) */
.nb{white-space:nowrap}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--band);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-dark)}   /* the band: the same on every page, header and footer alike */
.nav .wrap{display:flex;align-items:center;gap:24px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:34px;height:34px;flex:none}
.wordmark{font-family:var(--display);font-weight:600;font-size:25px;letter-spacing:.2em;color:var(--cyan);line-height:1}
.nav ul{display:flex;gap:26px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{text-decoration:none;font-size:15px;color:var(--on-dark-2);font-weight:500;white-space:nowrap}
.nav ul a:hover{color:var(--on-dark)}
.nav ul a[aria-current]{color:var(--cyan)}
.nav a#navBrand{text-decoration:none;color:inherit;display:inline-flex}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:15px;text-decoration:none;padding:12px 20px;border-radius:3px;border:1px solid transparent;cursor:pointer;line-height:1.2;transition:background .2s,border-color .2s,color .2s}
.btn-primary{background:var(--cyan);color:var(--night)}
.btn-primary:hover{background:#8BE3F0}
.btn-ghost{border-color:rgba(176,216,228,.4);color:var(--on-dark);background:transparent}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.light .btn-ghost{border-color:var(--rule-light);color:var(--ink)}
.light .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
@media (max-width:1100px){.nav ul{gap:18px}.nav ul a{font-size:14px}}
/* a narrow screen: the links fold away behind a Menu button and drop down as a list when it is pressed */
.nav-menu{display:none;margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark);background:none;border:1px solid var(--rule-dark);border-radius:3px;padding:7px 11px;cursor:pointer}
.nav-menu[aria-expanded="true"]{border-color:var(--cyan);color:var(--cyan)}
@media (max-width:980px){.nav ul{display:none}.nav .btn-primary{margin-left:auto}.nav-menu{display:inline-block}
  .nav.open ul{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;margin:0;padding:6px var(--margin) 14px;background:var(--band);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-dark)}
  .nav.open ul li{border-top:1px solid var(--rule-dark)}
  .nav.open ul a{display:block;padding:13px 0;font-size:16px}
  .nav.open ul li.temp a{display:inline-block;margin:10px 0;padding:5px 8px}}
@media (max-width:520px){.nav .btn-primary{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule-dark);
  background:radial-gradient(1200px 500px at 80% 10%,rgba(22,113,204,.28),transparent 60%),linear-gradient(180deg,#071838 0%,var(--night) 100%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;padding-block:clamp(48px,7vw,96px)}
.definition{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-family:var(--mono);font-size:13px;color:var(--on-dark-2);padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--rule-dark)}
.definition strong{color:var(--cyan);font-weight:500;font-size:14px}
.hero h1{font-size:clamp(44px,6.2vw,82px);font-weight:600;letter-spacing:-.005em}
.hero .lede{margin-top:24px;color:var(--on-dark-2)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.instrument{border:1px solid var(--rule-dark);background:rgba(6,20,48,.55);border-radius:4px;padding:10px}
.instrument img,.instrument canvas{display:block;width:100%;border-radius:2px}
.instrument canvas{aspect-ratio:16/11}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}

/* ---------- proof strip ---------- */
.proof{border-bottom:1px solid var(--rule-dark);background:#07183A}
.proof .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.proof-item{padding:22px 20px 22px 0;border-right:1px solid var(--rule-dark);display:flex;flex-direction:column;gap:4px}
.proof-item + .proof-item{padding-left:20px}
.proof-item:last-child{border-right:0}
.proof-item .k{font-family:var(--display);font-size:26px;font-weight:600;color:var(--on-dark);line-height:1.1}
.proof-item .v{font-size:14px;color:var(--on-dark-2);line-height:1.4}
@media (max-width:800px){.proof .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.proof-item{border-right:0;border-bottom:1px solid var(--rule-dark)}.proof-item + .proof-item{padding-left:0}.proof-item:nth-child(even){padding-left:20px;border-left:1px solid var(--rule-dark)}.proof-item:nth-last-child(-n+2){border-bottom:0}}

/* ---------- section shells ---------- */
section{padding-block:clamp(64px,8vw,112px)}
.light{background:var(--paper);color:var(--ink)}
.light .lede{color:var(--ink-2)}
.dark-2{background:#0A1F47}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--col-gap);align-items:end;margin-bottom:clamp(36px,5vw,56px)}
.sec-head .eyebrow{margin-bottom:14px}
.dark-2 .lede,section:not(.light) .lede{color:var(--on-dark-2)}
.light .sec-head h2{color:var(--ink)}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}

/* ---------- proxy story ---------- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--col-gap);align-items:start}
.story blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(30px,3.6vw,46px);line-height:1.12;color:var(--ink);text-wrap:balance}
.proxies{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--rule-light)}
.proxies li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule-light);font-size:16px}
.proxies li .to{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.proxies li:last-child{font-weight:600;color:var(--blue)}
.proxies li:last-child .to{color:var(--blue)}
.signoff{margin-top:30px;font-family:var(--display);font-size:24px;font-weight:600;color:var(--ink)}
@media (max-width:860px){.story{grid-template-columns:1fr}}

/* ---------- outcomes ---------- */
.outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}
.outcome{border-top:2px solid var(--cyan);padding-top:20px;display:flex;flex-direction:column;gap:12px}
.outcome h3{font-size:28px}
.outcome p{color:var(--on-dark-2);font-size:16px}
@media (max-width:820px){.outcomes{grid-template-columns:1fr}}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule-light);border:1px solid var(--rule-light)}
.service{background:#fff;padding:28px 26px 30px;display:flex;flex-direction:column;gap:14px}
.service .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.service h3{font-size:28px;color:var(--ink)}
.service p{color:var(--ink-2);font-size:16px}
.service ul{margin:4px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule-light)}
.service li{padding:9px 0;border-bottom:1px solid var(--rule-light);font-size:15.5px;display:flex;gap:10px}
.service li::before{content:"";flex:none;width:12px;height:0;border-top:2px dashed var(--teal);margin-top:12px}
.service li.measured::before{border-top-style:solid;border-top-color:var(--blue)}
.svc-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;color:var(--ink-2)}
.svc-key span{display:inline-flex;align-items:center;gap:8px}
.svc-key i{display:inline-block;width:18px;border-top:2px dashed var(--teal)}
.svc-key i.measured{border-top:2px solid var(--blue)}
@media (max-width:920px){.services{grid-template-columns:1fr}}

/* ---------- approach ---------- */
.gate-line{height:2px;margin-bottom:6px;background:linear-gradient(90deg,var(--teal) 0 33%,var(--cobalt) 33% 66%,var(--on-dark) 66%)}
.gates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.gate{padding:26px 26px 28px 0;display:flex;flex-direction:column;gap:12px}
.gate + .gate{padding-left:26px;border-left:1px solid var(--rule-dark)}
.gate .num{font-family:var(--mono);font-size:12px;color:var(--cyan);letter-spacing:.1em}
.gate h3{font-size:32px}
.gate p{color:var(--on-dark-2);font-size:16px}
.gate .fid{display:flex;gap:3px;margin-top:6px}
.gate .fid i{flex:1;height:6px;background:rgba(176,216,228,.14);border-radius:1px}
.gate .fid i.on{background:var(--cyan)}
.gate .meta{font-family:var(--mono);font-size:12.5px;color:var(--on-dark-2)}
.pullquote{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;padding-top:28px;border-top:1px solid var(--rule-dark)}
.pullquote .q{font-family:var(--display);font-size:64px;line-height:.8;color:var(--cyan)}
.pullquote p{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);line-height:1.25;font-weight:500;max-width:48ch}
.pullquote cite{display:block;margin-top:12px;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--on-dark-2);letter-spacing:.06em}
@media (max-width:860px){.gates{grid-template-columns:1fr}.gate,.gate + .gate{padding:22px 0;border-left:0;border-top:1px solid var(--rule-dark)}}

/* ---------- image frames ---------- */
.ph{position:relative;margin:0;background:var(--night);border-radius:3px;overflow:hidden;isolation:isolate}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.ph canvas{display:block;width:100%;height:100%}
.ph video{display:block;width:100%;height:100%;object-fit:cover}
.ph .ph-tag{position:absolute;left:10px;top:10px;z-index:2;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:rgba(6,20,48,.82);color:var(--mist);padding:5px 8px;border-radius:2px;border:1px solid rgba(176,216,228,.25);max-width:calc(100% - 20px)}
.ph .ph-tag b{color:var(--cyan);font-weight:500}
.ph .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(6,20,48,.72);border:1px solid rgba(98,214,232,.7);display:grid;place-items:center;z-index:2;pointer-events:none}
.ph .play svg{width:22px;height:22px;fill:var(--cyan)}
.ph .dur{position:absolute;right:10px;bottom:10px;z-index:2;font-family:var(--mono);font-size:11px;background:rgba(6,20,48,.82);color:var(--mist);padding:3px 7px;border-radius:2px}
.cap{margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.5}
section:not(.light) .cap{color:var(--on-dark-2)}

/* ---------- case studies ---------- */
.feature{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--col-gap);align-items:start;background:#fff;border:1px solid var(--rule-light);padding:clamp(20px,3vw,36px);border-radius:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:2px;border:1px solid var(--rule-light);color:var(--ink-2);background:var(--paper)}
.chip.ok{border-color:rgba(20,120,90,.35);color:#0E6B50;background:#E3F3EC}
.chip.draft{color:var(--ink-2);border-color:rgba(62,86,112,.45);background:rgba(62,86,112,.08)}
.chip.hist{border-color:rgba(10,79,173,.3);color:var(--blue);background:#E3EDF8}
.feature h3{font-size:clamp(28px,3vw,38px);color:var(--ink)}
.feature .sub{margin-top:10px;color:var(--ink-2)}
.cs-block{margin-top:22px;display:grid;gap:18px}
.cs-block h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:500;margin-bottom:6px}
.cs-block p,.cs-block li{font-size:15.5px;color:var(--ink)}
.cs-block ul{margin:0;padding-left:18px}
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule-light);border:1px solid var(--rule-light);margin-top:24px}
.figs div{background:var(--paper);padding:14px 12px}
.figs .k{font-family:var(--display);font-size:32px;font-weight:600;color:var(--blue);line-height:1;font-variant-numeric:tabular-nums}
.figs .v{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.35}
.feature-figs{display:grid;gap:14px}
.feature-figs .ph{aspect-ratio:4/3}
.feature-figs .ph + .ph{aspect-ratio:16/9}
@media (max-width:960px){.feature{grid-template-columns:1fr}}
@media (max-width:520px){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}}

.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap);margin-top:clamp(18px,2.4vw,28px)}
.case{background:#fff;border:1px solid var(--rule-light);border-radius:3px;display:flex;flex-direction:column;overflow:hidden}
.case .ph{aspect-ratio:16/8;border-radius:0}
.case-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.case h3{font-size:25px;color:var(--ink)}
.case p{font-size:15.5px;color:var(--ink-2)}
.case em{color:var(--ink-2);font-style:italic}
.case .meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule-light);display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.case .meta b{font-weight:500;color:var(--ink)}
@media (max-width:760px){.cases{grid-template-columns:1fr}}

/* ---------- media reel ---------- */
.reel{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--col-gap)}
.reel-side{display:grid;gap:clamp(16px,2vw,24px)}
.reel .ph{aspect-ratio:16/9}
@media (max-width:860px){.reel{grid-template-columns:1fr}}

/* ---------- toolkit ---------- */
.toolkit-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--col-gap);align-items:center}
.toolkit-grid ul{margin:24px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule-light)}
.toolkit-grid li{padding:12px 0;border-bottom:1px solid var(--rule-light);font-size:16px;display:flex;gap:12px;color:var(--ink)}
.toolkit-grid li::before{content:"";flex:none;width:12px;height:0;border-top:2px solid var(--blue);margin-top:12px}
.toolkit-figure{background:#fff;border:1px solid var(--rule-light);border-radius:3px;padding:16px}
.toolkit-figure img{display:block;width:100%;border-radius:2px}
.toolkit-embed{margin-top:clamp(24px,4vw,40px);border:1px solid var(--rule-light);border-radius:3px;overflow:hidden;background:#fff}
.toolkit-embed iframe{display:block;width:100%;height:min(78vh,760px);border:0}
@media (max-width:900px){.toolkit-grid{grid-template-columns:1fr}}

/* ---------- R&D ---------- */
.snap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--col-gap);align-items:center}
.snap .ph{aspect-ratio:16/9}
.snap .ph-live{aspect-ratio:4/3;background:var(--night);max-width:500px;margin:0}
.ph-live canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.snap .lede + .lede{margin-top:12px}
.snap-flow{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--rule-dark)}
.snap-flow li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;padding:12px 0;border-bottom:1px solid var(--rule-dark);font-size:15.5px}
.snap-flow li .mono{color:var(--cyan)}
.snap-flow li span:last-child{color:var(--on-dark-2)}
.status{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--mist);border:1px solid var(--rule-dark);padding:6px 10px;border-radius:2px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--cyan)}
@media (max-width:900px){.snap{grid-template-columns:1fr}}
@media (max-width:460px){.snap-flow li{grid-template-columns:1fr;gap:2px}}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--col-gap)}
.quote{margin:0;padding:clamp(22px,3vw,36px);border-radius:3px;background:#fff;border:1px solid var(--rule-light);display:flex;flex-direction:column;gap:20px}
.quote p{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,29px);line-height:1.25;color:var(--ink)}
.quote:nth-child(2) p{font-size:clamp(19px,1.8vw,23px)}
.quote footer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:auto;font-size:15px;color:var(--ink-2)}
.quote footer b{color:var(--ink);font-weight:600}
.logo-ph{display:grid;place-items:center;height:36px;padding:0 12px;border:1px dashed var(--rule-light);border-radius:2px;font-family:var(--mono);font-size:11px;color:var(--ink-2);letter-spacing:.06em}
.logos{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.logos .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.logos .logo-ph{height:54px}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}
@media (max-width:640px){.logos{grid-template-columns:1fr}}

/* ---------- founder ---------- */
/* the portrait stands as tall as the words beside it, no taller; the four headings run beneath both */
.founder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:0 var(--col-gap);align-items:stretch}
.founder .ph{aspect-ratio:auto;min-height:220px;grid-row:1/3}   /* the portrait reaches from the eyebrow to the foot of the headings' grid */
.founder .ph img{object-position:50% 20%}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.creds span{font-family:var(--mono);font-size:12px;border:1px solid var(--rule-dark);padding:5px 9px;border-radius:2px;color:var(--mist)}
.founder .lede{margin-top:22px;color:var(--on-dark-2);max-width:none}   /* the words run the column's width, the same as the grid beneath */
.founder .lede a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.founder + .founder{margin-top:clamp(40px,6vw,72px);padding-top:clamp(40px,6vw,72px);border-top:1px solid var(--rule-dark)}
.creds a{font-family:var(--mono);font-size:12px;border:1px solid var(--rule-dark);padding:5px 9px;border-radius:2px;color:var(--cyan);text-decoration:none}
.creds a .arr{font-size:11px}
.ph-person{display:grid;place-items:center;background:var(--deep,#0d2a5c);color:var(--mist);font-family:var(--mono);font-size:clamp(28px,4vw,44px);letter-spacing:.08em}
/* the four headings: two by two, under the words and as wide as them */
.cv{grid-column:2;margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule-dark)}
.cv div{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule-dark)}
.cv div:nth-child(even){padding-left:14px;border-left:1px solid var(--rule-dark)}
.cv h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);font-weight:500;margin-bottom:5px}
.cv p{font-size:13.5px;color:var(--on-dark-2);line-height:1.45}
@media (max-width:860px){.founder{grid-template-columns:1fr;gap:var(--col-gap)}.founder .ph{aspect-ratio:4/3;grid-row:auto}.cv{grid-column:1}}
@media (max-width:520px){.cv{grid-template-columns:1fr}.cv div:nth-child(even){padding-left:0;border-left:0}}

/* ---------- sectors ---------- */
.sectors{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.sectors span{font-size:16px;padding:10px 16px;border:1px solid var(--rule-light);background:#fff;border-radius:2px;color:var(--ink)}

/* ---------- contact ---------- */
/* the hand-over into the contact section: the section before it lightens from night to deep over its lower
   half, and the contact section darkens from deep back to night at the footer, so the page goes dark, light
   and dark again with no edge between the two */
section:not(.light):has(+ .contact){background:linear-gradient(180deg,var(--night) 0%,var(--night) 35%,var(--deep) 100%)}
.contact{background:linear-gradient(180deg,var(--deep) 0%,var(--night) 100%)}
.contact .split{align-items:start;margin-top:14px}   /* the words at the left, the form at the right, the form's top on the title's line */
.contact h2{font-size:clamp(30px,3.3vw,46px);margin-top:0}   /* two lines in the left column, the longer first line held on one */
.contact .lede{margin-top:20px;color:var(--on-dark-2)}
/* site characterisation */
.sc-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--col-gap);align-items:start}
.sc-fig{margin:0;border:1px solid var(--rule-dark);background:var(--night)}
.sc-fig canvas{display:block;width:100%;aspect-ratio:16/10}
.sc-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.sc-steps li{border-top:1px solid var(--rule-dark);padding-top:14px}
.sc-steps .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--cyan)}
.sc-steps h3{font-family:var(--display);font-size:22px;margin:6px 0 6px;color:var(--white)}
.sc-steps p{margin:0;color:var(--on-dark-2);font-size:15.5px;line-height:1.5}
.sc-out{margin:26px 0 0;font-size:17px;color:var(--on-dark);max-width:70ch}
@media (max-width:860px){.sc-grid{grid-template-columns:1fr}}
/* the hub pages' first screen */
.page-hero{border-bottom:1px solid var(--rule-dark);background:linear-gradient(180deg,var(--night) 0%,var(--deep) 100%)}
.page-hero .wrap{padding-block:clamp(56px,9vw,120px)}
.page-hero h1{font-size:clamp(40px,5.8vw,76px);font-weight:600;letter-spacing:-.005em;max-width:18ch;margin-top:12px}
.page-hero .lede{margin-top:22px;color:var(--on-dark-2)}
/* the Discuss a project form */
.contact-lines{margin:28px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px}
.contact-lines dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2);padding-top:3px}
.contact-lines dd{margin:0}
.contact-lines a{color:var(--cyan)}
.contact-form{border:1px solid var(--rule-dark);background:rgba(6,20,48,.7);padding:24px;border-radius:3px;display:grid;gap:14px}
.cf-field{display:grid;gap:6px}
.cf-field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2)}
.cf-field input,.cf-field textarea{font:inherit;font-size:15.5px;color:var(--on-dark);background:rgba(6,20,48,.6);border:1px solid var(--rule-dark);border-radius:3px;padding:10px 12px;width:100%;box-sizing:border-box}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--cyan)}
.cf-field textarea{resize:vertical;min-height:120px}
.cf-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}   /* two fields side by side */
.cf-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cf-status{font-size:14px;color:var(--mist)}
.cf-status:empty{display:none}
.cf-privacy{margin:0;font-size:12.5px;color:var(--on-dark-2);flex:1 1 200px}
@media (max-width:520px){.cf-two{grid-template-columns:1fr}}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-card{border:1px solid var(--rule-dark);background:rgba(6,20,48,.7);padding:24px;border-radius:3px;display:grid;gap:14px}
.contact-card dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px}
.contact-card dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2);padding-top:3px}
.contact-card dd{margin:0;font-size:16px;overflow-wrap:anywhere}
.contact-card a{color:var(--cyan)}
@media (max-width:860px){.contact .split{grid-template-columns:1fr}}

/* ---------- footer ---------- */
/* the footer is the header's band again: the same colour and blur, the same height */
footer.site{border-top:1px solid var(--rule-dark);padding-block:10px;background:var(--band);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;justify-content:space-between;color:var(--on-dark-2);font-size:14px;min-height:48px}
footer.site .brand .wordmark{font-size:19px}
footer.site .tagline{font-family:var(--mono);font-size:12px;letter-spacing:.06em}
footer.site .tagline:empty{display:none}

/* ---------- weather-window calculator ---------- */
.ww{display:grid;gap:clamp(20px,3vw,32px)}
.ww-site{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ww-chip{font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:5px 9px;border-radius:2px;background:rgba(98,214,232,.14);color:var(--cyan);border:1px solid rgba(98,214,232,.35)}
.ww-chip.is-synthetic{background:rgba(176,216,228,.12);color:var(--mist);border-color:rgba(176,216,228,.45)}
.ww-site .mono{color:var(--on-dark-2)}
.ww-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.ww-controls{display:grid;gap:18px;margin:0;padding:clamp(18px,2.4vw,26px);border:1px solid var(--rule-dark);border-radius:3px;background:rgba(6,20,48,.45)}
.ww-field{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.ww-field label,.ww-field legend{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2);padding:0;margin-bottom:2px}
.ww-row{display:flex;align-items:center;gap:14px}
.ww-row input[type=range]{flex:1;min-width:0;accent-color:var(--cyan);height:28px}
.ww-row output{font-family:var(--mono);font-size:14px;color:var(--on-dark);min-width:76px;text-align:right}
.ww-seg{display:flex;flex-wrap:wrap;gap:4px}
.ww-seg button{font-family:var(--mono);font-size:12px;padding:8px 10px;border-radius:2px;border:1px solid var(--rule-dark);background:transparent;color:var(--on-dark-2);cursor:pointer;min-width:44px;min-height:36px}
.ww-seg button:hover{border-color:var(--cyan);color:var(--on-dark)}
.ww-seg button[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--night)}
.ww-results{display:grid;border-top:1px solid var(--rule-dark)}
.ww-stat{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule-dark)}
.ww-stat .v{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2)}
.ww-stat .k{font-family:var(--display);font-size:clamp(38px,4.6vw,56px);font-weight:600;line-height:1;color:var(--cyan);font-variant-numeric:tabular-nums}
.ww-stat .s{font-size:14px;color:var(--on-dark-2);line-height:1.45}
.ww-charts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,32px)}
.ww-charts figure{margin:0;display:grid;gap:10px;align-content:start;min-width:0}
.ww-charts figcaption{font-family:var(--mono);font-size:11.5px;color:var(--on-dark-2);letter-spacing:.04em}
.ww-charts canvas{display:block;width:100%}
.ww-charts [data-ww-heat]{cursor:pointer}
.ww-missing{color:var(--mist)}
@media (max-width:900px){.ww-grid,.ww-charts{grid-template-columns:1fr}}

/* ---------- the method panel under each calculator ---------- */
.ww-method{border:1px solid var(--rule-dark);border-radius:3px;background:rgba(6,20,48,.35)}
.ww-method summary{cursor:pointer;padding:14px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);list-style:none}
.ww-method summary::-webkit-details-marker{display:none}
.ww-method summary::before{content:"+ ";color:var(--on-dark-2)}
.ww-method[open] summary::before{content:"\2212  "}
.ww-method-body{display:grid;gap:22px;padding:4px 18px 22px;max-width:86ch}
.ww-method-part h4{font-family:var(--display);font-size:22px;font-weight:600;color:var(--on-dark);margin:0 0 8px}
.ww-method-part p{color:var(--on-dark-2);font-size:15.5px;line-height:1.6;margin:0 0 10px}
.ww-method-part ul{margin:0;padding-left:18px;display:grid;gap:8px}
.ww-method-part li{color:var(--on-dark-2);font-size:15px;line-height:1.55}
.ww-method-part b{color:var(--on-dark);font-weight:600}
.ww-formula{margin:4px 0 12px;padding:12px 14px;border-left:2px solid var(--cyan);background:rgba(6,20,48,.55);font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--mist);white-space:pre-wrap;overflow-x:auto}

/* ---------- the tide-and-daylight variant ---------- */
.ww-plus{background:#081a3d}
.wp-group{margin:6px 0 -6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.wp-group:first-child{margin-top:0}
.wp-bars-block{padding:16px 0 4px;display:grid;gap:10px}
.wp-bars-title{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2)}
.wp-bars-title span{color:var(--cyan)}
.wp-bars{display:grid;gap:7px}
.wp-bar{display:grid;grid-template-columns:minmax(96px,130px) minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:13.5px;color:var(--on-dark-2)}
.wp-bar-track{height:10px;background:rgba(176,216,228,.08);border-radius:1px;overflow:hidden}
.wp-bar-fill{display:block;height:100%;background:var(--teal)}
.wp-bar-value{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--on-dark)}
.wp-bar.is-binding .wp-bar-label{color:var(--on-dark);font-weight:600}
.wp-bar.is-binding .wp-bar-fill{background:var(--cyan)}
.wp-bar.is-all{margin-top:4px;padding-top:9px;border-top:1px solid var(--rule-dark)}
.wp-bar.is-all .wp-bar-fill{background:var(--cyan)}
.wp-bars-note{margin:0;font-size:13px;color:var(--on-dark-2);line-height:1.5}
.wp-week-nav{display:flex;align-items:center;gap:10px}
.wp-week-nav button{font-family:var(--mono);font-size:14px;width:36px;height:32px;border-radius:2px;border:1px solid var(--rule-dark);background:transparent;color:var(--on-dark);cursor:pointer}
.wp-week-nav button:hover{border-color:var(--cyan);color:var(--cyan)}
.wp-week-nav .mono{color:var(--on-dark-2)}

/* ---------- temporary nav entries (Index, R&D) ---------- */
.nav ul li.temp a{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;border:1px dashed rgba(98,214,232,.5);padding:5px 8px;border-radius:3px}
.nav ul li.temp a[aria-current]{border-style:solid}

/* ---------- the page opening: the home's pattern on every page ---------- */
.hero2{background:var(--night);border-bottom:1px solid var(--rule-dark)}
.hero2 .wrap{padding-block:clamp(28px,4vh,44px) clamp(40px,6vh,64px)}
.hero2 .definition{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;font-family:var(--mono);font-size:15px;color:var(--on-dark)}
.hero2 .definition .pr{color:var(--cyan);font-size:18px}
.hero2-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--col-gap);align-items:stretch}
.hero2 .definition + .hero2-grid{margin-top:clamp(28px,5vh,56px)}
.hero2 h1{font-size:clamp(36px,4.6vw,64px);font-weight:600;letter-spacing:-.005em;text-wrap:wrap;max-width:none}
.hero2 .lede{margin-top:20px;color:var(--on-dark-2)}
.hero2 .lede + .lede{margin-top:12px}
.hero2 .ctas{margin-top:26px}
.hero2-inst{background:rgba(6,20,48,.6);border:1px solid var(--rule-dark);padding:4px;min-height:340px;display:flex}
.hero2-inst canvas{width:100%;height:auto;min-height:332px;flex:1;display:block}
@media (max-width:860px){.hero2-grid{grid-template-columns:1fr}.hero2-inst{min-height:260px}.hero2-inst canvas{min-height:252px}}

/* ---------- the Index ---------- */
.archive-head{background:var(--night);border-bottom:1px solid var(--rule-dark)}
.archive-head h1{font-size:clamp(36px,4.6vw,64px);margin-top:12px}
.archive-toc{columns:3;column-gap:var(--col-gap);margin:28px 0 0;padding-left:20px;font-size:15px;color:var(--on-dark-2)}
.archive-toc li{break-inside:avoid;padding:3px 0}
.archive-toc a{color:var(--on-dark)}
.archive-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);padding:14px var(--margin);background:#07183A;border-top:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark)}
.archive-label code{color:var(--on-dark-2);margin-left:12px;text-transform:none;letter-spacing:0}
@media (max-width:900px){.archive-toc{columns:1}}

/* ---------- the R&D page ---------- */
.lab{background:var(--night)}
.lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}
.lab-card{background:rgba(6,20,48,.6);border:1px solid var(--rule-dark);padding:14px;display:flex;flex-direction:column;gap:12px}
.lab-fig{background:var(--night);border:1px solid var(--rule-dark);display:flex;flex-direction:column}
.lab-fig canvas{width:100%;height:220px;display:block}
.lab-ctl{display:flex;align-items:center;gap:10px;padding:8px 10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2);border-top:1px solid var(--rule-dark)}
.lab-ctl input[type=range]{flex:1;accent-color:var(--cyan)}
.lab-ctl .btn{padding:6px 12px;font-size:13px}
.lab-card h3{font-size:22px;margin-top:4px}
.lab-card .where{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--cyan);margin:0}
.lab-card p{margin:0;color:var(--on-dark-2);font-size:15px;line-height:1.5}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.reveal-demo{display:grid;gap:8px;padding:12px;min-height:220px;align-content:center}
.reveal-demo div{padding:10px 12px;border:1px solid var(--rule-dark);font-size:14px;color:var(--on-dark)}
@media (max-width:900px){.lab-grid{grid-template-columns:1fr}}

/* ---------- extremes: two methods, two options each ---------- */
.ext-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap);margin-top:clamp(8px,2vw,24px)}
.ext-card .ph-live{aspect-ratio:4/3;background:var(--night);border:1px solid var(--rule-dark);margin:0}
.ext-option{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.ext-card h3{font-size:22px;margin-top:6px}
.ext-card p{margin:8px 0 0;color:var(--on-dark-2);font-size:15px;line-height:1.5}
#extremes .cap{margin-top:clamp(20px,3vw,32px);font-family:var(--mono);font-size:12px;color:var(--on-dark-2)}
@media (max-width:860px){.ext-grid{grid-template-columns:1fr}}

/* ---------- the home page below the waterline: three-column text blocks, the case studies in three parts ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}
.cols3 h3{font-size:24px;margin-bottom:10px}
.cols3 p{margin:0;font-size:16px;line-height:1.55;color:var(--on-dark-2)}
.light .cols3 p{color:var(--ink-2)}
.cols3 .tail{margin-top:12px;color:var(--cyan);font-weight:500}
.light .cols3 .tail{color:var(--blue)}
.ticks{list-style:none;margin:12px 0 0;padding:0}
.ticks li{position:relative;padding:5px 0 5px 18px;border-top:1px solid var(--rule-light);font-size:15px;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:8px;border:1.5px solid var(--cobalt);border-radius:50%}
.pull{margin:16px 0 0;padding-left:14px;border-left:3px solid var(--cobalt);font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,28px);line-height:1.2;color:var(--ink)}
.signoff.big{margin-top:clamp(28px,4vw,48px);font-family:var(--display);font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.15;color:var(--on-dark)}
.studies{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px)}
.study{background:#fff;border:1px solid var(--rule-light);display:flex;flex-direction:column}
.study .ph{aspect-ratio:16/7;margin:0}
.study-body{padding:18px 20px 22px}
.study-body h3{font-size:24px;margin:8px 0 6px}
.study-part{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule-light)}
.study-part h4{margin:0 0 4px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt)}
.study-part p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (max-width:900px){.cols3{grid-template-columns:1fr}.studies{grid-template-columns:1fr}}

/* ---------- section backgrounds: flat, distinct, in the palette; anchors clear the sticky nav ---------- */
.deep{background:var(--deep)}
.light.alt{background:var(--paper-2)}
section[id]{scroll-margin-top:80px}
/* the problems section: the points and the figure side by side */
.prob-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--col-gap);align-items:start}
.prob-points h3{font-size:22px;margin:0 0 6px}
.prob-points > div{padding:14px 0;border-top:1px solid var(--rule-light)}
.prob-points p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.prob-points .stakes{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule-light);color:var(--ink);font-weight:500}
.prob-points .close{margin-top:14px;color:var(--ink)}
.prob-fig .ph-live{aspect-ratio:4/3;background:var(--night);border:1px solid var(--rule-light);margin:0}
.prob-fig .cap,.why-fig .cap{margin:10px 0 0;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.why-fig{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--col-gap);align-items:end}
.why-fig .ph-live{aspect-ratio:16/10;background:var(--night);border:1px solid var(--rule-dark);margin:0}
.why-fig .cap{color:var(--on-dark-2)}
@media (max-width:900px){.prob-grid,.why-fig{grid-template-columns:1fr}}

/* ---------- the rule below the waterline: text on the left, the graphic on the right, at one size ---------- */
.split{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);gap:var(--col-gap);align-items:start}   /* the words a little narrower than the figure */
.split + .split,.split + .cap{margin-top:clamp(28px,4vw,48px)}
.split .sec-head{grid-template-columns:1fr;margin-bottom:clamp(18px,2.5vw,28px)}
.split .cols3,.split .services,.split .gates,.split .quotes,.split .studies{grid-template-columns:1fr}
.split .cols3{gap:clamp(16px,2vw,24px)}
.split .gates{margin-top:8px}
.split .gate,.split .gate + .gate{padding:18px 0;border-left:0;border-top:1px solid var(--rule-dark)}
.split .fig .ph,.split .fig .ph-live{aspect-ratio:2/1;width:100%;max-width:none;margin:0;background:var(--night)}   /* one standard figure: twice as wide as high */
.split .fig .ph-live{border:1px solid var(--rule-dark)}
.light .split .fig .ph-live{border-color:var(--rule-light)}
.fig .cap{margin:10px 0 0;font-family:var(--mono);font-size:12px;color:var(--on-dark-2)}
.light .fig .cap{color:var(--ink-2)}
.ph-empty{display:grid;place-items:center;border:1px dashed var(--rule-dark);color:var(--on-dark-2);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-align:center;padding:20px}
.light .ph-empty{border-color:var(--rule-light);color:var(--ink-2);background:var(--paper-2)}
.ext-row h3{font-size:24px;margin-top:6px}
.ext-row p{margin:8px 0 0;color:var(--on-dark-2);font-size:16px;line-height:1.55}
.study{background:transparent;border:0}
.light .study .study-body{padding:0}
.logos.panel{margin:0;padding:22px;border:1px solid var(--rule-light);background:#fff;aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:center;gap:16px}
.logos.panel .row{grid-template-columns:repeat(2,minmax(0,1fr))}
.px-stage{background:var(--night)}
@media (max-width:900px){.split{grid-template-columns:1fr}.split .fig .ph,.split .fig .ph-live,.need .ph,.need .ph-live{aspect-ratio:4/3}}

/* ---------- the problems list and the projects columns ---------- */
.needs{list-style:none;counter-reset:need;margin:clamp(20px,3vw,32px) 0 0;padding:0}
.needs li{counter-increment:need;position:relative;padding:14px 0 14px 54px;border-top:1px solid var(--rule-dark)}
.needs li::before{content:counter(need);position:absolute;left:0;top:10px;font-family:var(--display);font-weight:600;font-size:34px;line-height:1;color:var(--cyan)}
.needs h3{font-size:22px;margin:0 0 4px}
.needs p{margin:0;font-size:15.5px;line-height:1.5;color:var(--on-dark-2)}
.proj-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap)}
.proj{display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px solid var(--rule-dark)}
.proj .sector{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.proj h3{font-size:22px;margin:0;min-height:2.3em}
.proj .ph,.proj .ph-live{aspect-ratio:4/3;margin:0}
.proj .chips{margin:0}
.proj-part h4{margin:0 0 3px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.proj-part p{margin:0;font-size:14.5px;line-height:1.5;color:var(--on-dark-2)}
.proj-quote{margin:6px 0 0;padding:12px 14px;border-left:3px solid var(--cyan);background:rgba(6,20,48,.45)}
.proj-quote p{margin:0;font-size:14px;line-height:1.5;color:var(--on-dark)}
.proj-quote footer{margin-top:8px;font-size:12.5px;color:var(--on-dark-2)}
@media (max-width:1100px){.proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.proj-grid{grid-template-columns:1fr}}

/* ---------- services: three columns, Data, Analysis, Engineering, a visual then the words ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}
.svc{display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px solid var(--rule-dark)}
.svc h3{font-size:30px;margin:0}
.svc .ph,.svc .ph-live{aspect-ratio:4/3;margin:0}
.svc .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.svc h4{font-size:21px;margin:-4px 0 0}
.svc p{margin:0;font-size:15.5px;line-height:1.5;color:var(--on-dark-2)}
.svc ul{margin:4px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule-dark)}
.svc li{padding:8px 0;border-bottom:1px solid var(--rule-dark);font-size:14.5px;display:flex;gap:10px;color:var(--on-dark)}
.svc li::before{content:"";flex:none;width:12px;height:0;border-top:2px dashed var(--teal);margin-top:11px}
.svc li.measured::before{border-top-style:solid;border-top-color:var(--cyan)}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr}}
.sec-head.one{grid-template-columns:1fr;margin-bottom:clamp(20px,3vw,32px)}
#problems .needs{margin-top:0}

/* ---------- the four problems: a column each, a figure each ---------- */
/* the four problems listed under the heading, then one below another: words left, figure right */
.plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px) var(--col-gap);margin:clamp(18px,2.5vw,28px) 0 0}
.pbox{display:flex;flex-direction:column;gap:6px;padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,22px);border:1px solid var(--rule-dark);color:var(--on-dark);text-decoration:none;font-size:clamp(18px,1.6vw,21px);line-height:1.4;transition:border-color .2s,background-color .2s}
.pbox:hover,.pbox:focus-visible{border-color:var(--cyan);background:rgba(98,214,232,.06);outline:0}
.pbox b{font-weight:600;color:var(--cyan)}
@media (max-width:700px){.plist{grid-template-columns:1fr}}
.need{padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--rule-dark)}
.need[id]{scroll-margin-top:80px}

.need > div:first-child{display:flex;flex-direction:column;gap:12px}
#problems .theme{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.need h3{font-size:26px;margin:0}
.need h3 b{color:var(--cyan);font-weight:600}
.need .ph,.need .ph-live{aspect-ratio:2/1;margin:0}
.need p{margin:0;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--on-dark-2)}
.need p+p{margin-top:.75em}
.need .cap{margin:0}
#problems .close{margin-top:clamp(24px,3vw,40px);font-size:17px;color:var(--on-dark)}
#problems h2{font-size:clamp(28px,3.3vw,46px);max-width:none}


/* ---------- the clients' band: the logos pass by on pale tiles of one size, in grey; a click brings the client's words and lines up beneath ---------- */
.clients{margin-top:0}
.logo-band{overflow:hidden;padding:18px 0;border-top:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;align-items:center;width:max-content;touch-action:pan-y;cursor:grab;will-change:transform}   /* moved by the page's script: a slow drift, or a drag */
.logo-band.dragging .logo-track{cursor:grabbing}
.logo-band.dragging .logo-tile{pointer-events:none}
.logo-tile{display:flex;align-items:center;justify-content:center;width:224px;height:104px;margin-right:clamp(20px,2.5vw,36px);padding:10px 14px;border:2px solid transparent;border-radius:4px;background:var(--on-dark);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .2s}
.logo-tile:hover,.logo-tile:focus-visible{border-color:var(--cyan);outline:0}
.logo-tile img{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(1);-webkit-user-drag:none;user-select:none}   /* every mark the same size, in grey */
.logo-tile.white img{filter:invert(1) grayscale(1)}   /* white artwork, turned dark for the pale tile */
.logo-tile.plain img{filter:grayscale(1)}
.logo-tile .wordmark{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;color:var(--ink2)}
/* the panel: the company's lines in a box at the left, always; their words, when given, in a box of the same size at the right */
.client-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap);align-items:stretch;min-height:160px;margin-top:clamp(20px,3vw,32px);transition:opacity .28s ease,transform .28s ease}
.client-panel.out{opacity:0;transform:translateY(10px)}
.client-about,.client-quote{margin:0;padding:18px 22px;background:rgba(6,20,48,.45)}
.client-about{border-left:3px solid var(--rule-dark)}
.client-quote{border-left:3px solid var(--cyan)}
.client-quote p{margin:0;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--on-dark)}
.client-quote footer{margin-top:12px;font-size:13.5px;color:var(--on-dark-2)}
@media (max-width:760px){.client-panel{grid-template-columns:1fr}}
.client-about .eyebrow{display:block;margin-bottom:6px}
.client-about h3{font-size:20px;margin:0 0 6px}
.client-about p{margin:0;font-size:15.5px;line-height:1.5;color:var(--on-dark-2)}
.client-about p+p{margin-top:6px}
.client-about .site{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(98,214,232,.4)}
.client-about .site:hover{border-bottom-color:var(--cyan)}
@media (prefers-reduced-motion:reduce){.client-panel{transition:none}}   /* the band then stands still, and moves only when dragged */

/* a figure that plays once and holds: a click plays it again */
canvas[data-once]{cursor:pointer}

/* the approach's four parts, two by two */
.cols3.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols3 p + p{margin-top:10px}
@media (max-width:640px){.cols3.four{grid-template-columns:1fr}}

/* the approach's second part, the engineering services: a rule above, then the same two-column layout */
.approach-services{margin-top:clamp(48px,7vw,96px);padding-top:clamp(40px,6vw,72px);border-top:1px solid var(--rule-dark)}