/* ==========================================================================
   QUARRI — Website v1 · components
   Palette rule enforced here:
     .widget (data surfaces) → GREEN accents only
     everything else        → CORAL accent only
   ========================================================================== */

/* ---------- HERO: problem ↔ solution ---------- */
.hero{ padding-top:clamp(56px,7vh,88px); padding-bottom:clamp(56px,7vh,88px) }
.hero-copy{ max-width:64ch }
.hero h1{ margin-top:16px }
.hero .lead{ margin-top:24px }
.hero-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap }

.ps{
  margin-top:clamp(38px,4.6vw,58px);
  display:grid; grid-template-columns:0.84fr auto 1.16fr; gap:clamp(14px,2vw,30px);
  align-items:start;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,40px);
  box-shadow:0 40px 90px -64px rgba(17,17,17,.5);
}
.ps-side .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; display:block; margin-bottom:5px }
.ps-side .sub{ font-size:13px; line-height:1.45; color:var(--ink-3) }
.ps-today .tag{ color:var(--ink-3) }
.ps-with .tag{ color:var(--coral) }
.ps-with .sub{ color:var(--ink-2) }

/* left: the mess */
.mess{ position:relative; height:clamp(300px,29vw,372px); margin-top:18px }
.mess .tangle{ position:absolute; inset:0; width:100%; height:100% }
.mess .tangle line{ stroke:#d8d5cd; stroke-width:1.5; stroke-dasharray:3 6 }
.doc{
  position:absolute; width:132px; background:var(--white);
  border:1px solid var(--rule); border-radius:9px; padding:11px 12px 13px;
  box-shadow:0 16px 30px -20px rgba(17,17,17,.4); filter:grayscale(1) opacity(.94);
}
.doc .dh{ display:flex; align-items:center; gap:7px; margin-bottom:9px }
.doc .di{ width:15px; height:15px; border-radius:4px; background:#e7e4dd; flex:none }
.doc .dt{ font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:#8c8a84 }
.doc .dl{ height:5px; border-radius:3px; background:#eeece6; margin-top:6px }
.doc .dl.a{ width:88% } .doc .dl.b{ width:62% } .doc .dl.c{ width:75% }
.mess .gap{ position:absolute; font-family:var(--mono); font-size:15px; color:#b9b2a8 }
.mess .byhand{
  position:absolute; bottom:-2px; left:4%;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:#9a8f86; background:var(--bone); border:1px dashed #cdc7bd; border-radius:999px; padding:4px 11px;
}

/* middle */
.ps-mid{ display:flex; flex-direction:column; align-items:center; gap:11px; align-self:center; padding-top:46px }
.ps-mid .badge{
  width:52px; height:52px; border-radius:50%; background:var(--coral); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:23px; line-height:1;
  box-shadow:0 0 0 7px var(--coral-soft);
}
.ps-mid .ml{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--coral) }

/* ---------- WIDGET (data surface — GREEN only) ---------- */
.widget{
  margin-top:18px; border-radius:14px; overflow:hidden;
  border:1px solid #24242c; background:#0d0d10;
  box-shadow:0 44px 80px -44px rgba(17,17,17,.62);
}
.widget-bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; background:#08080a; border-bottom:1px solid #24242c }
.widget-bar .d{ width:9px; height:9px; border-radius:50%; background:#3a3a42 }
.widget-bar .url{ margin-left:10px; font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.5); background:rgba(255,255,255,.04); border:1px solid #24242c; border-radius:6px; padding:4px 12px }
.widget-body{ padding:14px; display:flex; flex-direction:column; gap:10px }
.widget-head{ display:flex; align-items:center; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5) }
.widget-head .live{ color:var(--gain-2) }

.chart{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:11px; padding:12px 14px 10px }
.chart-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px }
.chart-t{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55) }
.chart-v{ font-family:var(--mono); font-size:11px; color:var(--gain-2); white-space:nowrap }
.chart svg{ width:100%; height:auto; display:block }

.rec{ background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1); border-radius:11px; padding:12px 14px; display:flex; flex-direction:column; gap:5px }
.rec-top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.rec-tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:3px 10px; white-space:nowrap }
.rec-impact{ font-family:var(--mono); font-size:12px; font-weight:500; color:var(--gain-2); white-space:nowrap }
.rec h4{ font-size:14px; font-weight:600; line-height:1.25; color:var(--white); letter-spacing:-.01em }
.rec p{ font-size:11.5px; line-height:1.4; color:rgba(255,255,255,.56) }
.rec .act{ font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--gain-2); margin-top:2px }

/* agents */
.agents{ margin-top:6px; border-top:1px solid rgba(255,255,255,.08); padding-top:15px }
.agents .at{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); display:block; margin-bottom:13px }
.agent-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap }
.agent-src{ font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.16); border-radius:9px; padding:9px 12px }
.agent-arw{ color:var(--gain-2); font-size:16px }
.agent-chip{ display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:8px 13px; background:rgba(255,255,255,.03) }
.agent-chip svg{ width:17px; height:17px; color:var(--white); flex:none }
.agent-chip .nm{ font-size:13px; color:var(--white); font-weight:500 }
.agent-more{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5); padding:0 4px }
.agents .note{ font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.5); margin-top:13px }

/* ---------- Capability stack ---------- */
.stack{ display:flex; flex-direction:column; align-items:center; gap:9px }
.layer{ width:100%; background:var(--white); border:1px solid var(--rule); border-radius:12px; padding:16px 24px; display:flex; align-items:center; gap:22px }
.layer .lx{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--coral); flex:none; width:26px }
.layer .lname{ font-size:16px; font-weight:600; letter-spacing:-.01em; flex:none; width:198px }
.layer .ldesc{ font-size:14px; color:var(--ink-2); line-height:1.45 }
.layer.apex{ background:var(--coral); border-color:var(--coral) }
.layer.apex .lx{ color:rgba(255,255,255,.6) }
.layer.apex .lname{ color:var(--white) }
.layer.apex .ldesc{ color:rgba(255,255,255,.84) }
.srcs{ display:inline-flex; flex-wrap:wrap; gap:6px; margin-left:4px; vertical-align:middle }
.srcs b{ font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); border:1px solid var(--rule); border-radius:999px; padding:3px 10px; background:var(--bone) }

/* ---------- Scene band ---------- */
.scene{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:clamp(240px,30vw,380px); background-size:cover; background-position:center; display:flex; align-items:flex-end }
.scene::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,.05) 15%,rgba(10,10,10,.72)) }
.scene-cap{ position:relative; z-index:1; padding:clamp(24px,3.2vw,40px); color:var(--white); max-width:42ch }
.scene-cap .t{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.8) }
.scene-cap h3{ font-size:clamp(22px,2.5vw,34px); font-weight:600; margin-top:10px; color:var(--white) }

/* ---------- Operators ---------- */
.ops-list{ display:flex; flex-direction:column }
.op-row{ display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; padding:30px 0; border-top:1px solid var(--rule); transition:padding-left .3s var(--ease) }
.op-row:last-child{ border-bottom:1px solid var(--rule) }
.op-row:hover{ padding-left:10px }
.op-num{ font-family:var(--mono); font-size:12px; color:var(--coral); letter-spacing:.1em }
.op-name{ font-size:clamp(20px,2vw,28px); font-weight:600; letter-spacing:-.02em }
.op-row p{ font-size:14.5px; color:var(--ink-2); margin-top:7px; max-width:70ch }
.op-soon{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--coral); border:1px dashed rgba(218,119,86,.5); border-radius:999px; padding:3px 10px; margin-left:9px; white-space:nowrap }
.op-arw{ font-size:20px; color:var(--coral); transition:transform .3s var(--ease) }
.op-row:hover .op-arw{ transform:translateX(5px) }

/* ---------- Problem grid ---------- */
.prob-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden }
.prob{ background:var(--bone); padding:28px 26px 30px }
.prob .pn{ font-family:var(--mono); font-size:11px; color:var(--coral); letter-spacing:.1em }
.prob h3{ margin:12px 0 9px }
.prob p{ font-size:14px; color:var(--ink-2); line-height:1.6 }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:28px }
.stat .num{ font-family:var(--mono); font-size:clamp(30px,3.4vw,46px); font-weight:700; letter-spacing:-.02em; color:var(--coral) }
.stat .lbl{ font-size:13.5px; color:var(--ink-2); margin-top:8px; line-height:1.5 }
.on-dark .stat .lbl{ color:var(--on-dark) }

/* ---------- Workflow / example cards ---------- */
.ex-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px }
.ex{ background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:12px }
.ex .who{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--coral) }
.ex h3{ letter-spacing:-.015em }
.ex p{ font-size:14px; color:var(--ink-2); line-height:1.6 }
.ex .out{ margin-top:auto; padding-top:14px; border-top:1px solid var(--rule); font-size:13.5px; color:var(--ink) }
.ex .out b{ font-family:var(--mono); font-weight:500; color:var(--gain) }

/* ---------- CTA ---------- */
.cta{ text-align:center }
.cta .lead{ margin:26px auto 0 }
.cta .hero-cta{ justify-content:center }

@media (max-width:900px){
  .ps{ grid-template-columns:1fr; gap:22px }
  .ps-mid{ flex-direction:row; padding-top:0 }
  .ps-mid .badge{ transform:rotate(90deg) }
  .layer{ flex-wrap:wrap; gap:6px 14px; width:100%!important }
  .layer .lname{ width:auto }
  .layer .ldesc{ flex:1 1 100% }
  .op-row{ grid-template-columns:auto 1fr; gap:16px }
  .op-arw{ display:none }
}

/* ==========================================================================
   GRAVITATE-STYLE SECTIONS — outcome-led homepage
   ========================================================================== */

/* trust / counter band */
.trust{ padding:clamp(44px,6vh,72px) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--white) }
.trust-tag{ text-align:center; font-size:14.5px; color:var(--ink-3); margin-bottom:36px }
.counters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:32px; text-align:center }
.counter .cn{ font-family:var(--mono); font-size:clamp(30px,3.6vw,50px); font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1 }
.counter .cn span{ color:var(--coral) }
.counter .cl{ font-size:13px; color:var(--ink-3); margin-top:12px; line-height:1.45 }

/* named modules */
.mods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px }
.mod{ background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); padding:28px 26px 30px; display:flex; flex-direction:column; gap:12px; transition:border-color .25s var(--ease), transform .25s var(--ease) }
.mod:hover{ border-color:var(--coral); transform:translateY(-2px) }
.mod .mi{ width:30px; height:30px; color:var(--coral) }
.mod h3{ letter-spacing:-.015em }
.mod p{ font-size:14px; color:var(--ink-2); line-height:1.6 }
.mod .mtags{ margin-top:auto; padding-top:14px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); line-height:1.9 }

/* who we serve */
.serve{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px }
.srv{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:300px; display:flex; align-items:flex-end; background-size:cover; background-position:center }
.srv::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,.12) 30%,rgba(10,10,10,.82)) }
.srv-in{ position:relative; z-index:1; padding:26px; color:var(--white) }
.srv-in .sn{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75) }
.srv-in h3{ color:var(--white); margin:9px 0 8px; font-size:22px }
.srv-in p{ font-size:13.5px; color:rgba(255,255,255,.78); line-height:1.5 }
.srv-in .go{ display:inline-block; margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--coral) }

/* why / pillars */
.why{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:34px }
.wh h3{ margin-bottom:10px }
.wh p{ font-size:14.5px; color:var(--ink-2); line-height:1.65 }
.on-dark .wh p{ color:var(--on-forest) }

/* testimonial */
.quote-band{ border:1px solid var(--rule); border-radius:var(--radius-lg); background:var(--white); padding:clamp(30px,4vw,52px); margin-bottom:clamp(40px,5vw,64px) }
.quote-band blockquote{ font-size:clamp(20px,2.3vw,30px); font-weight:500; line-height:1.35; letter-spacing:-.02em; max-width:44ch }
.quote-band .attr{ margin-top:22px; font-size:13.5px; color:var(--ink-3) }
.quote-band .attr b{ color:var(--ink); font-weight:500; display:block; font-size:14.5px }

/* proof cards */
.proof{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px }
.pf{ background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); padding:28px 26px; display:flex; flex-direction:column; gap:10px }
.on-dark .pf{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14) }
.pf .who{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--coral) }
.pf .big{ font-family:var(--mono); font-size:clamp(28px,3.2vw,42px); font-weight:700; letter-spacing:-.03em; line-height:1; margin:6px 0 2px }
.on-dark .pf .big{ color:var(--white) }
.pf .cap{ font-size:14px; color:var(--ink-2); line-height:1.55 }
.on-dark .pf .cap{ color:var(--on-forest) }
.pf .vs{ margin-top:auto; padding-top:14px; border-top:1px solid var(--rule); font-size:12.5px; color:var(--ink-3) }
.on-dark .pf .vs{ border-color:rgba(255,255,255,.12) }


/* ---------- PRODUCT SHOWCASE (alternating rows) ---------- */
.show{ display:grid; grid-template-columns:0.86fr 1.14fr; gap:clamp(30px,4.5vw,70px); align-items:center; padding:clamp(46px,6vw,78px) 0; border-top:1px solid var(--rule) }
.show:first-of-type{ border-top:0 }
.show.flip .show-copy{ order:2 }
.show.flip .show-vis{ order:1 }
.show-copy .label{ margin-bottom:14px }
.show-copy h3{ font-size:clamp(24px,2.6vw,34px); letter-spacing:-.022em; line-height:1.1 }
.show-copy p{ font-size:15.5px; color:var(--ink-2); line-height:1.65; margin-top:16px; max-width:48ch }
.show-pts{ list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:10px }
.show-pts li{ font-size:14.5px; color:var(--ink); padding-left:24px; position:relative; line-height:1.5 }
.show-pts li::before{ content:""; position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:2px; background:var(--gain) }
.show-pts li{ color:var(--ink-2) }
.show-vis{ position:relative }
.win-frame{ border-radius:12px; overflow:hidden; border:1px solid var(--rule); background:var(--white); box-shadow:0 44px 90px -50px rgba(16,42,28,.55) }
.win-frame .wf-bar{ display:flex; align-items:center; gap:6px; padding:10px 13px; background:#f1efeb; border-bottom:1px solid var(--rule) }
.win-frame .wf-bar .d{ width:9px; height:9px; border-radius:50%; background:#d5d2cb }
.win-frame .wf-bar .u{ margin-left:10px; font-family:var(--mono); font-size:10px; color:var(--ink-3); background:var(--white); border:1px solid var(--rule); border-radius:6px; padding:4px 12px }
.win-frame img{ width:100%; display:block }
.show-badge{ position:absolute; right:-10px; bottom:-16px; background:var(--forest); color:var(--white); border-radius:10px; padding:14px 18px; box-shadow:0 20px 40px -20px rgba(16,42,28,.6); max-width:230px }
.show-badge .bn{ font-family:var(--mono); font-size:20px; font-weight:700; color:#7fc79b; letter-spacing:-.02em }
.show-badge .bl{ font-size:11.5px; color:rgba(255,255,255,.72); line-height:1.4; margin-top:5px }

/* image strip */
.strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.strip div{ height:clamp(150px,17vw,215px); border-radius:10px; background-size:cover; background-position:center }
.strip div:nth-child(1){ grid-row:span 1 }

/* forest CTA with image */
.cta-forest{ position:relative; background-size:cover; background-position:center; overflow:hidden }
.cta-forest::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,42,28,.86),rgba(11,31,20,.94)) }
.cta-forest .container{ position:relative; z-index:1 }

@media(max-width:900px){
  .show{ grid-template-columns:1fr; gap:26px }
  .show.flip .show-copy{ order:1 } .show.flip .show-vis{ order:2 }
  .show-badge{ position:static; margin-top:14px; max-width:none }
  .strip{ grid-template-columns:repeat(2,1fr) }
}

/* ---------- GRAVITATE-CLOSE: module rows, pillars, insights ---------- */
.modrow{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(28px,4vw,64px); align-items:center; padding:clamp(40px,5vw,68px) 0; border-top:1px solid var(--rule) }
.modrow.flip .mr-copy{ order:2 } .modrow.flip .mr-vis{ order:1 }
.mr-name{ display:flex; align-items:center; gap:12px; margin-bottom:14px }
.mr-name .ic{ width:34px; height:34px; border-radius:8px; background:var(--coral-soft); color:var(--coral); display:flex; align-items:center; justify-content:center; flex:none }
.mr-name .ic svg{ width:19px; height:19px }
/* Now the section's primary heading rather than a subhead under an eyebrow, so
   it takes the display treatment: Archivo Light, and larger. At 500 above 20px
   it reads as a different typeface next to the body copy. */
.mr-name h3{ font-size:clamp(25px,2.7vw,34px); font-weight:300; letter-spacing:-.025em }
.mr-copy > p{ font-size:15.5px; color:var(--ink-2); line-height:1.65; max-width:46ch }
.mr-list{ list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:11px }
.mr-list li{ font-size:14.5px; line-height:1.5; padding-left:22px; position:relative; color:var(--ink-2) }
.mr-list li::before{ content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:2px; background:var(--gain) }
.mr-link{ display:inline-block; margin-top:22px; font-size:14px; font-weight:500; color:var(--coral) }

/* pillars on forest */
.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:30px; margin-top:8px }
.pil{ border-top:2px solid var(--coral); padding-top:20px }
.pil h3{ color:var(--white); margin-bottom:10px }
.pil p{ font-size:14.5px; color:var(--on-forest); line-height:1.6 }

/* insights */
.posts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px }
.post{ background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s var(--ease), border-color .25s var(--ease) }
.post:hover{ transform:translateY(-3px); border-color:var(--coral) }
.post .ph{ height:150px; background-size:cover; background-position:center }
.post .pb{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1 }
.post .pm{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.post h3{ font-size:17px; letter-spacing:-.015em; line-height:1.3 }
.post p{ font-size:13.5px; color:var(--ink-2); line-height:1.55 }
.post .pl{ margin-top:auto; padding-top:12px; font-size:13px; color:var(--coral); font-weight:500 }

@media(max-width:900px){
  .modrow{ grid-template-columns:1fr; gap:24px }
  .modrow.flip .mr-copy{ order:1 } .modrow.flip .mr-vis{ order:2 }
}

/* ==========================================================================
   BOLD IMAGERY — full-bleed bands, statement spreads, taller cards
   ========================================================================== */
.fullbleed{ width:100vw; margin-left:calc(50% - 50vw); position:relative }

/* big statement band over a photograph */
.band-xl{
  position:relative; min-height:clamp(420px,58vh,640px);
  background-size:cover; background-position:center; background-attachment:scroll;
  display:flex; align-items:flex-end; overflow:hidden;
}
.band-xl::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,20,13,.18) 0%,rgba(8,20,13,.30) 45%,rgba(8,20,13,.88) 100%);
}
.band-xl .bx{ position:relative; z-index:1; width:100%; max-width:var(--content); margin:0 auto; padding:0 var(--gutter) clamp(46px,6vw,80px) }
.band-xl .bx .lbl{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--coral) }
.band-xl .bx h2{ color:var(--white); font-size:clamp(30px,4.4vw,62px); letter-spacing:-.028em; margin-top:14px; max-width:19ch; line-height:1.02 }
.band-xl .bx p{ color:rgba(255,255,255,.82); font-size:var(--t-lead); line-height:1.55; max-width:56ch; margin-top:20px }

/* split: photo one side, copy the other */
.split-img{ display:grid; grid-template-columns:1fr 1fr; min-height:clamp(420px,54vh,600px) }
.split-img .si-photo{ background-size:cover; background-position:center }
.split-img .si-copy{ background:var(--forest); color:var(--white); display:flex; align-items:center; padding:clamp(34px,5vw,76px) }
.split-img .si-copy .in{ max-width:46ch }
.split-img .si-copy .lbl{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--coral) }
.split-img .si-copy h2{ color:var(--white); margin-top:14px; font-size:clamp(26px,3vw,42px) }
.split-img .si-copy p{ color:var(--on-forest); font-size:16px; line-height:1.65; margin-top:18px }
.split-img.rev .si-photo{ order:2 } .split-img.rev .si-copy{ order:1 }

/* photo mosaic */
.mosaic{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(120px,13vw,180px); gap:8px }
.mosaic div{ background-size:cover; background-position:center; border-radius:4px }
.mosaic .a{ grid-column:span 2; grid-row:span 2 }
.mosaic .b{ grid-column:span 2 }
.mosaic .c{ grid-column:span 2 }
.mosaic .d{ grid-column:span 2 }
.mosaic .e{ grid-column:span 2 }

/* taller serve cards */
.serve .srv{ min-height:clamp(330px,34vw,420px) }

/* why-on-photo */
.why-photo{ position:relative; background-size:cover; background-position:center }
.why-photo::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,rgba(11,26,17,.86) 32%,rgba(11,26,17,.56)) }
.why-photo .container{ position:relative; z-index:1 }

@media(max-width:900px){
  .split-img{ grid-template-columns:1fr }
  .split-img .si-photo{ min-height:280px }
  .split-img.rev .si-photo{ order:1 } .split-img.rev .si-copy{ order:2 }
  .mosaic{ grid-template-columns:repeat(4,1fr); grid-auto-rows:110px }
  .mosaic .a{ grid-column:span 2; grid-row:span 2 }
  .mosaic .b,.mosaic .c,.mosaic .d,.mosaic .e{ grid-column:span 2 }
}

/* ---------- ARTICLE / BLOG ---------- */
.art-hero{ position:relative; min-height:clamp(320px,46vh,480px); background-size:cover; background-position:center; display:flex; align-items:flex-end }
.art-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,20,13,.2),rgba(8,20,13,.88)) }
/* 720px, matching .article below it. At 860 the eyebrow, h1 and byline started
   70px to the left of the body copy they introduce, which read as broken. */
.art-hero .in{ position:relative; z-index:1; width:100%; max-width:720px; margin:0 auto; padding:0 var(--gutter) clamp(36px,5vw,60px) }
.art-hero .meta{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--coral) }
.art-hero h1{ color:var(--white); font-size:clamp(30px,4vw,54px); margin-top:14px; max-width:22ch }
.art-hero .byline{ color:rgba(255,255,255,.72); font-size:14px; margin-top:18px }
.article{ max-width:720px; margin:0 auto; padding:clamp(48px,7vh,84px) var(--gutter) }
.article > p{ font-size:17.5px; line-height:1.75; color:var(--ink-2); margin-bottom:24px }
/* Weight 400, not 500. Archivo at 500 reads as a different typeface next to the
   400 body copy right under it, which is what made this paragraph look wrong.
   Size and ink colour carry the emphasis instead. */
.article > p.standfirst{ font-size:21px; line-height:1.62; color:var(--ink); font-weight:400; letter-spacing:-.01em; margin-bottom:32px }
.article h2{ font-size:clamp(23px,2.4vw,30px); margin:44px 0 16px }
.article h3{ font-size:19px; margin:32px 0 12px }
.article ul,.article ol{ margin:0 0 24px 20px }
.article li{ font-size:17px; line-height:1.7; color:var(--ink-2); margin-bottom:9px }
.article blockquote{ border-left:3px solid var(--coral); padding:6px 0 6px 22px; margin:32px 0; font-size:19px; line-height:1.5; color:var(--ink); font-weight:500 }
.article img{ border-radius:var(--radius); margin:32px 0 }
.article figure{ margin:34px 0 }
.article figure img{ margin:0; width:100% }
.article figure figcaption{ font-size:13px; color:var(--ink-3); margin-top:10px; line-height:1.55 }

/* ==========================================================================
   CASE STUDY COMPONENTS
   Three jobs that were previously being done by borrowed components plus
   inline styles: the outcome figures, the value argument, and the customer
   voice. Each gets its own treatment so the page reads as a ladder rather
   than three interchangeable grey boxes.
   Coral throughout: these are editorial callouts, not data widgets, so the
   green/red semantic pair does not apply here.
   ========================================================================== */

/* --- Outcome figures. Replaces .cs-out, which is a card footer on the index
       page and only worked here with three inline overrides. --- */
.cs-metrics{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden; margin:30px 0 16px;
}
.cs-metrics .m{ background:var(--white); padding:20px 22px 22px }
.cs-metrics .m-n{
  display:block; font-family:var(--mono); font-size:clamp(19px,2.3vw,25px);
  font-weight:700; color:var(--coral); letter-spacing:-.02em;
}
.cs-metrics .m-d{
  display:block; font-size:13.5px; color:var(--ink-2); line-height:1.5; margin-top:8px;
}
/* p.cs-note, not .cs-note: it has to out-rank `.article > p` (0,1,1), which was
   silently restyling the note to full body size. */
.article p.cs-note{ font-size:13.5px; color:var(--ink-3); line-height:1.6; margin:0 }

/* --- Image and text side by side, as a full-width band. A centred breakout
       wider than the 720px measure never aligns with anything, so instead the
       band goes full-bleed with its own surface and rules: a deliberate
       section change, the way the homepage handles wide moments. The inner
       grid is its own layout context, centred like every other section. --- */
.cs-band{
  width:100vw; margin:48px calc(50% - 50vw);
  background:var(--white);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:clamp(36px,5vw,58px) 0;
}
.cs-band .cb-in{
  max-width:1080px; margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,64px); align-items:center;
}
.cs-band figure{ margin:0 }
.cs-band img{ width:100%; margin:0; border-radius:var(--radius) }
.cs-band figcaption{ font-size:12.5px; color:var(--ink-3); line-height:1.5; margin-top:10px }
/* Same voice as the article h2s: Archivo Light. At 500 these read as a second
   heading style; 300 needs ~24px+ to hold, hence the larger clamp. */
.cs-band .cb-body h3{
  margin:0 0 14px; font-size:clamp(23px,2.3vw,27px);
  font-weight:300; letter-spacing:-.02em;
}
.cs-band .cb-body p{ font-size:16px; line-height:1.7; color:var(--ink-2); margin:0 0 14px }
.cs-band .cb-body p:last-child{ margin-bottom:0 }
/* Alternating sides. Media is first in the DOM so it leads on mobile. */
.cs-band.rev figure{ order:2 }
/* No room to bleed once the columns stack. */
@media(max-width:900px){ .ph-callout{ margin-left:0; margin-right:0 } }

@media(max-width:820px){
  .cs-band .cb-in{ grid-template-columns:1fr; gap:22px }
  .cs-band.rev figure{ order:0 }
}

/* ==========================================================================
   VERTICAL PAGES — process spine and roadmap block
   The vertical pages are organised around the operator's own process, not
   around Quarri's platform steps. The spine names that process in their
   vocabulary directly under the hero, so the page declares whose world it is
   before it says anything about us.
   ========================================================================== */
.op-spine{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:2px 0; margin-top:clamp(22px,3vw,32px);
}
.op-spine .sp{
  font-family:var(--mono); font-size:clamp(11px,1.15vw,13px);
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.92); white-space:nowrap;
}
.op-spine .sp.soon{ color:var(--coral-hi) }
.op-spine .ssep{ color:var(--coral-hi); margin:0 clamp(9px,1.3vw,16px); font-size:13px }
@media(max-width:600px){ .op-spine .ssep{ margin:0 8px } }

/* Conveyor. A horizontal track for the homepage case studies and insights, so
   four wider cards run in one line and carry on past the edge instead of
   wrapping into a grid.
   Full-bleed so the track runs to the viewport edge and the next card peeks.

   The base state here is a plain scrollable track, which is what a reader gets
   with no JavaScript. carousel.js clones the cards and adds .rolling on top of
   that, which is what turns it into a continuous loop. Written that way round
   so the cards are always reachable even if the script never runs. */
.conveyor{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:4px 0 22px;
  /* fade the trailing edge so the track reads as continuing */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
}
.conveyor::-webkit-scrollbar{ display:none }
.conv-track{
  display:flex; gap:18px; width:max-content;
  /* the gutter is padding so the first card lines up with the heading above */
  padding:0 max(var(--gutter), calc(50vw - var(--content)/2));
}
.conv-track > *{
  flex:0 0 clamp(300px, 27vw, 400px);
  scroll-snap-align:start;
}

/* Rolling. One set width of travel, then the cloned set is sitting exactly
   where the first one started, so the seam never shows. Hover, keyboard focus
   and scrolling out of view all stop it, because cards moving under someone
   who is reading them is the thing to avoid. */
.conveyor.rolling{ overflow:hidden; scroll-snap-type:none }
.conveyor.rolling .conv-track{
  padding-right:0;
  animation:convroll var(--dur,60s) linear infinite;
  will-change:transform;
}
.conveyor.rolling:hover .conv-track,
.conveyor.rolling:focus-within .conv-track,
.conveyor.rolling:not(.inview) .conv-track{ animation-play-state:paused }
.conveyor.rolling{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
@keyframes convroll{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(calc(-1 * var(--shift,0px)),0,0) }
}
@media (prefers-reduced-motion: reduce){ .conveyor{ scroll-behavior:auto } }
/* No mask on touch, where the native scrollbar and momentum already signal it.
   Touch readers also get the swipe rather than the loop: a thumb is a better
   control than an animation, and it saves the battery. carousel.js leaves
   .rolling off below this width. */
@media(max-width:760px){
  .conveyor, .conveyor.rolling{ -webkit-mask-image:none; mask-image:none; scroll-snap-type:x proximity }
  .conv-track > *{ flex:0 0 82vw }
}
/* A quiet hint that the row moves. */
.conveyor-hint{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-top:2px;
}
.on-dark .conveyor-hint{ color:var(--on-forest) }

/* Crossover callout. Insights and case studies are two halves of the same
   argument, so each page ends by handing the reader to the other. Boxed and
   labelled so it reads as a distinct destination rather than more of the list
   above it. */
.xover{
  border:1px solid var(--rule); border-radius:var(--radius-lg);
  background:var(--white);
  padding:clamp(26px,3.6vw,42px);
  display:grid; grid-template-columns:1fr auto;
  gap:clamp(18px,3vw,44px); align-items:center;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.xover:hover{ border-color:var(--coral); transform:translateY(-2px) }
.xover .xo-t{ display:block; margin:12px 0 10px; font-size:clamp(21px,2.2vw,27px); font-weight:300; letter-spacing:-.02em }
.xover p{ font-size:15.5px; color:var(--ink-2); line-height:1.6; max-width:56ch; margin:0 }
.xover .btn{ flex:none; white-space:nowrap }
@media(max-width:760px){
  .xover{ grid-template-columns:1fr; gap:22px }
  .xover .btn{ justify-self:start }
}

/* Built for. Its own component: four joined cells with a coral index, the same
   construction as .cs-metrics, so a label-only row still looks finished. */
.who-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden; margin-top:20px;
}
.who-cell{ background:var(--white); padding:20px 22px 22px }
.who-n{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--coral); margin-bottom:10px;
}
.who-t{ display:block; font-size:15px; line-height:1.45; color:var(--ink); text-wrap:balance }
@media(max-width:900px){ .who-grid{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:520px){ .who-grid{ grid-template-columns:1fr } }

/* Mono labels wrap badly: uppercase with wide tracking runs long, and a plain
   break leaves one orphaned word on a second line. Balance them and stop the
   panel header from stacking its two halves. */
.mr-copy .stage-line{ text-wrap:balance; letter-spacing:.09em }
.wf-panel .pt{ gap:14px; flex-wrap:wrap }
.wf-panel .pt span{ text-wrap:balance }
.wf-panel .pt em{ flex:none; white-space:nowrap; margin-left:auto }

/* ==========================================================================
   AI NATIVE
   The headline carries the claim; this band makes the argument, drawing the
   line between a fixed platform and one built as a model of the operation.
   ========================================================================== */
.ai-compare{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px) }
.aic{ border:1px solid var(--rule); border-radius:var(--radius-lg); padding:clamp(24px,3vw,34px) }
.aic-t{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:18px;
}
.aic ul{ list-style:none; display:flex; flex-direction:column; gap:13px }
.aic li{ font-size:15.5px; line-height:1.55; padding-left:26px; position:relative }
.aic li::before{ position:absolute; left:0; font-family:var(--mono); font-size:13px }
/* The old way: muted, and deliberately not styled as a villain. */
.aic.rigid{ background:var(--bone) }
.aic.rigid .aic-t{ color:var(--ink-3) }
.aic.rigid li{ color:var(--ink-3) }
.aic.rigid li::before{ content:"\00d7" }
.aic.native{
  background:var(--white); border-color:rgba(218,119,86,.38);
  box-shadow:0 30px 60px -44px rgba(11,31,20,.45);
}
.aic.native .aic-t{ color:var(--coral) }
.aic.native li{ color:var(--ink-2) }
.aic.native li::before{ content:"+"; color:var(--coral) }
@media(max-width:820px){ .ai-compare{ grid-template-columns:1fr } }

/* Analytics band. Sits across the four phases rather than inside one, so it
   gets a dark full-section treatment: the texture change is doing work after
   four alternating light rows. */
.an-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,72px); align-items:center;
}
.an-copy h2{ margin-top:14px }
.an-copy .lead{ margin-top:18px }
.an-list{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-top:24px }
.an-list li{
  font-size:15.5px; color:var(--on-forest); line-height:1.6;
  padding-left:22px; position:relative;
}
.an-list li::before{
  content:""; position:absolute; left:0; top:9px;
  width:7px; height:7px; border-radius:2px; background:var(--gain-2);
}
.an-caps{ margin-top:22px }
/* .an-grid prefix so this outranks `.ph-caps span`, which is defined later in
   this file and would otherwise repaint these white on the dark band. */
.an-grid .ph-caps span{
  background:transparent; border-color:rgba(255,255,255,.22); color:var(--on-forest);
}
@media(max-width:900px){ .an-grid{ grid-template-columns:1fr } }

/* Sticky phase tracker. Rides under the nav while the process section is in
   view; the active phase is set by an IntersectionObserver in the page script.
   It is the page's wayfinding, so it stays quiet: mono, small, one accent. */
.phase-track{
  position:sticky; top:70px; z-index:40;
  background:rgba(247,246,243,.92); backdrop-filter:blur(10px);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  margin-bottom:clamp(28px,4vw,52px);
}
.phase-track .pt-in{
  max-width:var(--content); margin:0 auto;
  display:flex; align-items:center; gap:clamp(18px,3vw,40px);
  padding:13px var(--gutter); overflow-x:auto; scrollbar-width:none;
}
.phase-track .pt-in::-webkit-scrollbar{ display:none }
.phase-track a{
  font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
  transition:color .25s var(--ease);
}
.phase-track a .n{ color:var(--ink-3); transition:color .25s var(--ease) }
.phase-track a.on{ color:var(--ink) }
.phase-track a.on .n{ color:var(--coral) }
.phase-track a:hover{ color:var(--ink) }
/* progress underline on the active item */
.phase-track a{ position:relative; padding-bottom:2px }
.phase-track a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-14px; height:2px;
  background:var(--coral); transition:right .35s var(--ease);
}
.phase-track a.on::after{ right:0 }
/* Anchored rows must clear the nav plus the sticky tracker itself. */
.modrow[id]{ scroll-margin-top:132px }

/* Phase sections reuse .modrow. The eyebrow carries the phase, the heading
   carries the operator's own stage names. */
.wf-stage .phase{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--coral);
}
/* The operator's own stage names, under the phase heading. */
.mr-copy .stage-line{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:14px;
}

/* A photograph of the phase with its instrument panel layered over the bottom
   corner. The overlap is what stops the column reading as two stacked boxes:
   the panel sits ON the photograph, the reading taken of the scene. Mirrored
   on flipped rows so the collage alternates sides down the page. */
.mr-photo{
  margin:0; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:3/2; background:var(--rule);
}
.mr-photo img{
  width:100%; height:100%; object-fit:cover; margin:0; display:block;
  transition:transform 1.4s var(--ease);
}
.modrow:hover .mr-photo img{ transform:scale(1.045) }
.mr-vis .mr-photo + .wf-panel{
  width:min(94%, 540px); margin:-52px 0 0 auto;
  position:relative; z-index:2;
  box-shadow:0 30px 60px -30px rgba(11,31,20,.55);
}
.modrow.flip .mr-vis .mr-photo + .wf-panel{ margin:-52px auto 0 0 }
.mr-vis .wf-panel{ transition:transform .4s var(--ease) }
.modrow:hover .mr-vis .wf-panel{ transform:translateY(-4px) }
@media(max-width:900px){
  .mr-vis .mr-photo + .wf-panel,
  .modrow.flip .mr-vis .mr-photo + .wf-panel{ width:100%; margin:14px 0 0 }
}

/* Rows enter from their own side rather than all fading up identically.
   .modrow.reveal outranks styles.css's .reveal at equal specificity by file
   order, so the .in state must be restated here or rows never arrive. */
.modrow.reveal{ transform:translate(-30px, 14px) }
.modrow.flip.reveal{ transform:translate(30px, 14px) }
.modrow.reveal.in{ transform:none }
@media (prefers-reduced-motion: reduce){
  .modrow.reveal, .modrow.flip.reveal{ transform:none }
  .mr-photo img, .mr-vis .wf-panel{ transition:none }
}

/* Links inside the before/after proof cards inherit body colour and vanish.
   They are the only path from a vertical page to its case study. */
.ex a{ color:var(--coral); font-weight:500 }
.ex a:hover{ text-decoration:underline; text-underline-offset:3px }

/* Spine items walk in left to right once the hero reveals. */
.op-spine .sp, .op-spine .ssep{ opacity:0 }
.op-spine.in .sp, .op-spine.in .ssep{ animation:riseIn .5s var(--ease) forwards }
.op-spine.in > *:nth-child(1){ animation-delay:.05s }
.op-spine.in > *:nth-child(2){ animation-delay:.11s }
.op-spine.in > *:nth-child(3){ animation-delay:.17s }
.op-spine.in > *:nth-child(4){ animation-delay:.23s }
.op-spine.in > *:nth-child(5){ animation-delay:.29s }
.op-spine.in > *:nth-child(6){ animation-delay:.35s }
.op-spine.in > *:nth-child(7){ animation-delay:.41s }
.op-spine.in > *:nth-child(8){ animation-delay:.47s }
.op-spine.in > *:nth-child(9){ animation-delay:.53s }
.op-spine.in > *:nth-child(10){ animation-delay:.59s }
.op-spine.in > *:nth-child(11){ animation-delay:.65s }
@media (prefers-reduced-motion: reduce){
  .op-spine .sp, .op-spine .ssep{ opacity:1; animation:none }
}

/* The capability layer, laid over the process. The phase says what happens on
   the ground; this says what Quarri does about it, in the same vocabulary.
   Inset and ruled so the two readings stay visibly separate. */
.ph-opt{
  margin-top:20px; padding:18px 0 0; border-top:1px solid var(--rule);
}
.ph-opt-l{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--coral); margin-bottom:10px;
}
/* The single statement of what Quarri does at this stage, in a callout box
   that borrows the coming-soon block's two-tone wash. The box carries the
   emphasis so the type does not have to: heavier weight here read as a
   different typeface against the body copy. */
.ph-callout{
  position:relative; overflow:hidden;
  border:1px solid rgba(218,119,86,.28); border-left:3px solid var(--coral);
  border-radius:var(--radius);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(218,119,86,.22), transparent 58%),
    radial-gradient(100% 130% at 100% 100%, rgba(53,160,95,.10), transparent 64%),
    linear-gradient(180deg,#12301f 0%,#0d2416 100%);
  box-shadow:0 26px 50px -34px rgba(11,31,20,.55);
  /* Bleed the box out by exactly its own left inset (3px border + 22px pad) so
     the text inside starts on the same vertical as the paragraph above and the
     bullets below. Otherwise the column has three different left edges, which
     is what makes it read as messy. */
  margin:0 -22px 20px -25px;
  padding:20px 22px 22px;
}
.ph-callout .ph-opt-l{ margin-bottom:9px; color:var(--coral-hi) }
/* Bone, not white. On deep forest a pure white is glary at this size, and the
   warm off-white agrees with the coral wash behind it. */
.ph-opt-line{
  margin:0; font-size:clamp(16px,1.7vw,18px); line-height:1.6;
  font-weight:400; color:var(--bone); letter-spacing:-.005em;
}
/* Capability names, in the operator's words rather than ours. */
.ph-caps{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px }
.ph-caps span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:999px; padding:5px 11px;
  background:var(--white); white-space:nowrap;
}

/* --- Coming soon. A dark, lit block dropped into the light half of the page,
       so the one thing that is not built yet is also the thing that catches
       the eye. Honest about status in the copy, optimistic in the styling. --- */
.soon-block{
  position:relative; overflow:hidden;
  border:1px solid rgba(218,119,86,.42); border-radius:var(--radius-lg);
  padding:clamp(30px,4.4vw,52px);
  background:
    radial-gradient(120% 100% at 12% 0%, rgba(218,119,86,.20), transparent 58%),
    radial-gradient(90% 80% at 92% 100%, rgba(53,160,95,.16), transparent 62%),
    linear-gradient(180deg,#102a1c 0%,#0b1f14 100%);
  box-shadow:0 44px 90px -50px rgba(11,31,20,.8);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); align-items:center;
}
.soon-block .sb-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--coral-hi);
  border:1px solid rgba(240,144,106,.45); border-radius:999px;
  background:rgba(240,144,106,.10);
  padding:5px 13px 5px 11px; display:inline-flex; align-items:center; gap:8px;
  margin-bottom:18px;
}
/* live dot: says "in motion" without claiming a ship date */
.soon-block .sb-tag::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--coral-hi); flex:none;
  animation:sbPulse 2.2s ease-in-out infinite;
}
@keyframes sbPulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.72) } }
@media (prefers-reduced-motion: reduce){ .soon-block .sb-tag::before{ animation:none } }
.soon-block h3{
  font-size:clamp(26px,2.9vw,36px); font-weight:300; letter-spacing:-.025em;
  margin-bottom:14px; color:#fff;
}
.soon-block p{ font-size:16px; line-height:1.7; color:var(--on-forest); margin-bottom:14px }
.soon-block ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:18px }
.soon-block li{ font-size:15px; color:var(--on-forest); padding-left:22px; position:relative }
.soon-block li::before{ content:"+"; position:absolute; left:0; color:var(--coral-hi); font-family:var(--mono) }
@media(max-width:820px){ .soon-block{ grid-template-columns:1fr } }

/* --- The workflow visual: a dark full-bleed band of wf-panels, one per skill,
       in the homepage's data-panel idiom. Green/red semantics only inside the
       widgets, per the palette rule; the surface carries the section. --- */
.cs-flow{
  width:100vw; margin:48px calc(50% - 50vw);
  background:var(--forest-2);
  padding:clamp(40px,6vw,68px) 0;
}
.cs-flow .cf-in{ max-width:1080px; margin:0 auto; padding:0 var(--gutter) }
.cs-flow .cf-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:18px; flex-wrap:wrap; margin-bottom:24px;
}
.cs-flow .cf-head h3{
  color:var(--white); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(22px,2.3vw,27px); margin:0;
}
.cs-flow .cf-sub{
  font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--on-forest);
}
.cs-flow .cf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.cs-flow .cf-wide{ grid-column:1/-1 }
@media(max-width:820px){ .cs-flow .cf-grid{ grid-template-columns:1fr } }

/* --- The value argument. This is the commercial heart of a case study and was
       previously set as ordinary <strong>-led paragraphs. --- */
.cs-value{ display:flex; flex-direction:column; gap:14px; margin:30px 0 }
.cs-value .v{
  background:var(--white); border:1px solid var(--rule); border-left:3px solid var(--coral);
  border-radius:var(--radius); padding:22px 26px 24px;
  transition:transform .25s var(--ease);
}
.cs-value .v:hover{ transform:translateY(-2px) }
.cs-value .v-h{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:10px }
.cs-value .v-k{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}
.cs-value .v-n{
  font-family:var(--mono); font-size:clamp(18px,2.1vw,23px); font-weight:700;
  color:var(--coral); letter-spacing:-.02em;
}
.cs-value .v-t{ font-size:15px; color:var(--ink-2); line-height:1.62 }

/* --- Customer voice. Attribution is anonymised by policy, so the oversized
       opening mark is what tells a reader this is speech rather than
       narration. Stacked quotes get real separation. --- */
.cs-quote{
  position:relative; background:var(--bone);
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:28px 32px 24px 64px; margin:30px 0;
}
/* Two speakers in a row read as a pair, so they sit tighter than the 30px that
   separates a quote from body copy. Both sides have to be set: adjacent margins
   collapse to the LARGER of the two, so setting margin-top alone does nothing. */
.cs-quote:has(+ .cs-quote){ margin-bottom:16px }
.cs-quote + .cs-quote{ margin-top:16px }
.cs-quote::before{
  content:"\201C"; position:absolute; left:22px; top:16px;
  font-family:var(--font); font-size:60px; line-height:1; font-weight:400;
  color:var(--coral); opacity:.3; pointer-events:none;
}
.cs-quote p{
  margin:0; font-size:clamp(16.5px,1.65vw,19px); line-height:1.55;
  color:var(--ink); letter-spacing:-.012em; font-weight:400;
}
.cs-quote cite{
  display:block; margin-top:16px; padding-top:14px; border-top:1px solid var(--rule);
  font-style:normal; font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
@media(max-width:640px){
  .cs-metrics{ grid-template-columns:1fr }
  .cs-quote{ padding:26px 22px 22px 22px }
  .cs-quote::before{ position:static; display:block; margin-bottom:-14px }
}
.article .pull{ background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); padding:24px 26px; margin:32px 0 }
.article .pull .n{ font-family:var(--mono); font-size:28px; font-weight:700; color:var(--coral); letter-spacing:-.02em }
.article .pull .t{ font-size:14.5px; color:var(--ink-2); margin-top:8px; line-height:1.55 }
.art-back{ display:inline-block; font-size:14px; color:var(--coral); font-weight:500; margin-bottom:26px }

/* insights index */
.ins-featured{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden; background:var(--white); margin-bottom:clamp(30px,4vw,52px) }
.ins-featured .f-photo{ min-height:340px; background-size:cover; background-position:center }
.ins-featured .f-copy{ padding:clamp(28px,3.4vw,46px); display:flex; flex-direction:column; justify-content:center }
.ins-featured .f-copy .pm{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--coral) }
.ins-featured .f-copy h2{ font-size:clamp(24px,2.6vw,34px); margin:12px 0 14px }
.ins-featured .f-copy p{ font-size:15.5px; color:var(--ink-2); line-height:1.6 }
.ins-featured .f-copy .pl{ margin-top:20px; font-size:14px; color:var(--coral); font-weight:500 }
@media(max-width:900px){ .ins-featured{ grid-template-columns:1fr } }

/* ==========================================================================
   HERO v2 — full-bleed image, glass panels, animated charts
   ========================================================================== */
.hero-full{
  position:relative; background-size:cover; background-position:center 40%;
  padding:clamp(70px,11vh,140px) 0 clamp(56px,8vh,110px); overflow:hidden;
}
/* The photograph drifts for ~20s after load, one slow push-in. The image sits
   on its own layer because a background on the section itself cannot be
   transformed. z-index:-1 keeps it under the ::before scrim and the copy. */
.hero-full .hf-bg{
  position:absolute; inset:0; z-index:-1;
  background-size:cover; background-position:center 40%;
  animation:hfDrift 22s cubic-bezier(.2,.6,.3,1) forwards;
  will-change:transform;
}
@keyframes hfDrift{
  from{ transform:scale(1) translateY(0) }
  to  { transform:scale(1.09) translateY(-1.4%) }
}
@media (prefers-reduced-motion: reduce){ .hero-full .hf-bg{ animation:none } }
.hero-full::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,20,13,.90) 0%,rgba(8,20,13,.78) 38%,rgba(8,20,13,.95) 100%);
}
.hero-full > .container{ position:relative; z-index:1 }
/* Light display type needs the brighter accent and a stronger scrim to hold
   its own over photography. */
.hero-full .label{ color:var(--coral-hi) }
.hero-full h1{ color:#fff; margin-top:16px; max-width:17ch }
.hero-full h1 .coral{ color:var(--coral-hi) }
.hero-full .lead{ color:rgba(255,255,255,.86); margin-top:24px; max-width:60ch }
.hero-full .btn-ghost{ border-color:rgba(255,255,255,.34); color:var(--white) }
.hero-full .btn-ghost:hover{ border-color:var(--white); background:rgba(255,255,255,.06) }

/* ==========================================================================
   HERO v3 — headline on its own solid ground, photograph broken out below it
   so the type is never fighting the image for contrast
   ========================================================================== */
/* `section` carries var(--pad-y) top/bottom by default. On the hero that padding
   rendered as a solid band between the nav and the footage, so it is zeroed here:
   the video must meet the nav with nothing in between. */
.hero-split{ background:var(--forest-2); padding:0 }

.hero-head{
  position:relative; overflow:hidden;
  padding:clamp(96px,17vh,196px) 0 clamp(92px,16vh,168px);
  background:#0a1c12;
}
/* Forest footage. The video carries its own motion, so only a still fallback
   gets the slow drift. */
.hero-media{ position:absolute; inset:0; overflow:hidden; z-index:0 }
.hero-media img, .hero-media video{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Parallax: the JS writes --pxy, the video drifts slower than the page scrolls.
   scale(1.18) leaves 9% of overflow on each edge; the JS caps drift below that
   so a translate can never expose the edge of the frame. */
.hero-media video{ transform:scale(1.18) translate3d(0, var(--pxy, 0px), 0); will-change:transform }

/* scroll cue */
.hero-cue{
  position:absolute; left:50%; bottom:clamp(18px,3vh,34px); transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.6); animation:cueBob 2.6s ease-in-out infinite;
}
.hero-cue svg{ width:14px; height:20px }
@keyframes cueBob{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,7px) } }
.hero-media img{ will-change:transform; animation:heroPan 30s ease-in-out infinite alternate }
@keyframes heroPan{
  from{ transform:scale(1.06) translate3d(0,0,0) }
  to  { transform:scale(1.15) translate3d(-2.5%,-1.5%,0) }
}
/* Minimal scrim only. The aerial canopy is bright enough that white type needs
   some help, but this is weighted to the left so the right two-thirds of the
   footage stays at full brightness. Nothing like a full-frame dim. */
/* Two separate layers on purpose.
   ::before is the left-weighted scrim that keeps the type readable. It is masked
   so it has faded to nothing well before the bottom edge, otherwise the left side
   arrives at the seam darker than the right and you see a diagonal shift.
   ::after is the bottom fade, uniform across the full width, so the join is one
   flat colour from left to right. */
.hero-head::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(95deg,
    rgba(8,20,13,.72) 0%, rgba(8,20,13,.46) 34%, rgba(8,20,13,.10) 62%, rgba(8,20,13,0) 82%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.35) 72%, transparent 86%);
          mask-image:linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.35) 72%, transparent 86%);
}
.hero-head::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,20,13,.26) 0%, rgba(8,20,13,0) 22%,
    rgba(12,34,22,0) 56%, rgba(12,34,22,.42) 76%,
    rgba(12,34,22,.80) 90%, rgba(12,34,22,.96) 97%, #0c2216 100%);
}
.hero-head > .container{ position:relative; z-index:2 }
.hero-head h1,
.hero-head .lead{ text-shadow:0 2px 20px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35) }
@media (prefers-reduced-motion: reduce){
  .hero-media img{ animation:none; transform:scale(1.04) }
  .hero-media video{ transform:scale(1.04) }
  .hero-cue{ animation:none }
}
.hero-head h1{ color:#fff; max-width:17ch }
.hero-head h1 .coral{ color:var(--coral-hi) }
.hero-head .lead{ color:rgba(255,255,255,.88); margin-top:24px; max-width:58ch }
.hero-head .btn-ghost{ border-color:rgba(255,255,255,.34); color:#fff }
.hero-head .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08) }
.hero-jump{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; align-items:center }

/* The hero entrance runs slower and wider apart than the rest of the site.
   Everything else uses .8s with .08s steps; here it is worth the extra beat. */
.hero-head .reveal{ transition-duration:1.15s; transform:translateY(26px) }
/* must out-rank the .hero-head .reveal rule above, or the text never arrives */
.hero-head .reveal.in{ transform:none }
.hero-head .reveal.d1{ transition-delay:.22s }
.hero-head .reveal.d2{ transition-delay:.44s }

/* the source cards fall in one after another rather than all at once */
.scatter .gdoc{ opacity:0; transform-origin:center top }
.flow2.in .scatter .gdoc{ animation:cardIn .8s cubic-bezier(.16,1,.3,1) forwards }
.flow2.in .scatter .gdoc:nth-of-type(1){ animation-delay:.30s }
.flow2.in .scatter .gdoc:nth-of-type(2){ animation-delay:.46s }
.flow2.in .scatter .gdoc:nth-of-type(3){ animation-delay:.62s }
.flow2.in .scatter .gdoc:nth-of-type(4){ animation-delay:.78s }
.flow2.in .scatter .gdoc:nth-of-type(5){ animation-delay:.94s }
/* Uses the independent translate/scale properties rather than `transform`, so it
   composes with the per-card rotate() set inline instead of wiping it. */
@keyframes cardIn{
  from{ opacity:0; translate:0 -16px; scale:.97 }
  to  { opacity:1; translate:0 0;    scale:1 }
}
/* the connecting lines, the arrow and the panel arrive after the cards have landed */
.scatter svg.tang{ opacity:0 }
.flow2.in .scatter svg.tang{ animation:fadein .9s ease 1.05s forwards }
.flow2 .arrow2{ opacity:0 }
.flow2.in .arrow2{ animation:fadein .6s ease 1.20s forwards }
.flow2 .glass{ opacity:0 }
.flow2.in .glass{ animation:cardIn .9s cubic-bezier(.16,1,.3,1) 1.30s forwards }

@media (prefers-reduced-motion: reduce){
  .hero-head .reveal{ transition:none; transform:none }
  .scatter .gdoc,
  .scatter svg.tang,
  .flow2 .arrow2,
  .flow2 .glass{ opacity:1; animation:none }
}

/* the product graphic now sits on plain ground, so nothing competes with it */
.hero-stage{
  position:relative; overflow:hidden;
  padding:clamp(40px,6vh,74px) 0 clamp(50px,8vh,96px);
  /* Top edge must be exactly #0c2216, the colour the video fade terminates on,
     or the join shows as a band. The radial is pushed down the panel so it
     contributes nothing at y=0. */
  background:
    radial-gradient(110% 78% at 78% 58%, rgba(24,58,38,.40), transparent 72%),
    linear-gradient(180deg, #0c2216 0%, #0c2216 12%, #0a1c12 100%);
}
.hero-stage > .container{ position:relative; z-index:1 }
.hero-stage .flow2{ margin-top:0 }

/* the flow: docs → quarri → live panel (no outer frame) */
.flow2{ display:grid; grid-template-columns:0.88fr auto 1.12fr; gap:clamp(12px,2vw,26px); align-items:center; margin-top:clamp(44px,6vw,72px) }
.scatter{ position:relative; height:clamp(400px,36vw,520px) }
.scatter svg.tang{ position:absolute; inset:0; width:100%; height:100% }
.scatter svg.tang line{ stroke:rgba(255,255,255,.16); stroke-width:1.2; stroke-dasharray:2 7 }
.gdoc{
  position:absolute; width:clamp(132px,12vw,158px);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:8px; padding:11px 13px 13px;
}
.gdoc .gh{ display:flex; align-items:center; gap:6px; margin-bottom:8px }
.gdoc .gi{ width:13px; height:13px; border-radius:3px; background:rgba(255,255,255,.22); flex:none }
.gdoc .gt{ font-family:var(--mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.62); white-space:nowrap }
.gdoc .gl{ height:4px; border-radius:2px; background:rgba(255,255,255,.13); margin-top:5px }
.gdoc .gl.a{ width:86% } .gdoc .gl.b{ width:58% } .gdoc .gl.c{ width:72% }
.scatter .gx{ position:absolute; font-family:var(--mono); font-size:14px; color:rgba(255,255,255,.34) }
.scatter .ghand{
  position:absolute; bottom:0; left:2%;
  font-family:var(--mono); font-size:9px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.5); border:1px dashed rgba(255,255,255,.24); border-radius:999px; padding:4px 11px;
}
.arrow2{ display:flex; align-items:center; justify-content:center }
.arrow2 .b{
  width:46px; height:46px; border-radius:50%; background:var(--coral); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:21px; line-height:1;
  box-shadow:0 0 0 8px rgba(218,119,86,.16);
}

/* glass live panel */
.glass{
  border-radius:14px; overflow:hidden;
  background:rgba(10,22,15,.62); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px); box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
}
.glass-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.1) }
.glass-bar .d{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.22) }
.glass-bar .u{ margin-left:8px; font-family:var(--mono); font-size:9.5px; color:rgba(255,255,255,.52) }
.glass-bar .live{ margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gain-2); display:flex; align-items:center; gap:6px }
.glass-bar .live i{ width:6px; height:6px; border-radius:50%; background:var(--gain-2); font-style:normal; animation:blip 2.4s ease-in-out infinite }
@keyframes blip{ 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(53,160,95,.5)} 50%{opacity:.55;box-shadow:0 0 0 5px rgba(53,160,95,0)} }
.glass-body{ padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:11px }
.gcell{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:12px 13px 9px }
.gcell.wide{ grid-column:1 / -1 }
.gc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px }
.gc-t{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5) }
.gc-v{ font-family:var(--mono); font-size:11px; color:var(--gain-2) }
.gcell svg{ width:100%; height:auto; display:block; overflow:visible }

/* animated chart primitives — held at their start state until the row
   they sit in scrolls into view (.reveal.in), so every chart draws as you
   reach it rather than all of them playing at once on load. */
.spark-line{ fill:none; stroke:#35a05f; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:420; stroke-dashoffset:420 }
.reveal.in .spark-line{ animation:drawline 2.2s cubic-bezier(.16,1,.3,1) .15s forwards }
@keyframes drawline{ to{ stroke-dashoffset:0 } }
@keyframes fadein{ to{ opacity:1 } }
.spark-area{ opacity:0 }
.reveal.in .spark-area{ animation:fadein 1.2s ease .8s forwards }
.spark-dot{ fill:#35a05f; opacity:0 }
.reveal.in .spark-dot{ animation:fadein .5s ease 1.5s forwards }
.reveal.in .spark-dot.pulse{ animation:fadein .5s ease 1.5s forwards, ping 2.6s ease-in-out 2s infinite }
@keyframes ping{ 0%,100%{ r:3 } 50%{ r:4.6 } }
.gbar{ transform-origin:center bottom; transform:scaleY(0) }
.reveal.in .gbar{ animation:grow .9s cubic-bezier(.16,1,.3,1) forwards }
@keyframes grow{ to{ transform:scaleY(1) } }
.gridline{ stroke:rgba(255,255,255,.1); stroke-width:1; stroke-dasharray:2 5 }

/* generic scroll-triggered primitives used by the bespoke panel SVGs */
.dr-bar{ transform-origin:left center; transform:scaleX(0) }
.reveal.in .dr-bar{ animation:growx .8s cubic-bezier(.16,1,.3,1) forwards }
@keyframes growx{ to{ transform:scaleX(1) } }
.dr-up{ opacity:0; transform:translateY(6px) }
.reveal.in .dr-up{ animation:riseIn .55s var(--ease) forwards }
@keyframes riseIn{ to{ opacity:1; transform:none } }
.dr-flow{ stroke-dasharray:4 6; animation:flow 1.1s linear infinite }
@keyframes flow{ to{ stroke-dashoffset:-20 } }

/* recommendation strip inside glass */
.grec{ grid-column:1 / -1; display:flex; align-items:center; gap:12px; background:rgba(53,160,95,.09);
  border:1px solid rgba(53,160,95,.26); border-radius:10px; padding:11px 14px }
.grec .gi{ width:26px; height:26px; border-radius:7px; background:rgba(53,160,95,.2); color:var(--gain-2);
  display:flex; align-items:center; justify-content:center; flex:none; font-size:13px }
.grec .gtxt{ font-size:12.5px; color:rgba(255,255,255,.9); line-height:1.35 }
.grec .gtxt b{ color:#fff; font-weight:600 }
.grec .gimp{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--gain-2); white-space:nowrap }

/* agents row on glass */
.gagents{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:2px }
.gagents .gl2{ font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.45) }
.gagents .gchip{ display:flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:6px 10px; background:rgba(255,255,255,.04) }
.gagents .gchip svg{ width:14px; height:14px; color:#fff }
.gagents .gchip span{ font-size:11.5px; color:#fff }

@media (prefers-reduced-motion: reduce){
  .spark-line,.reveal.in .spark-line{ stroke-dashoffset:0; animation:none }
  .spark-area,.spark-dot,.reveal.in .spark-area,.reveal.in .spark-dot,
  .reveal.in .spark-dot.pulse{ opacity:1; animation:none }
  .gbar,.reveal.in .gbar{ transform:none; animation:none }
  .dr-bar,.reveal.in .dr-bar{ transform:none; animation:none }
  .dr-up,.reveal.in .dr-up{ opacity:1; transform:none; animation:none }
  .dr-flow{ animation:none }
  .glass-bar .live i{ animation:none }
}
@media(max-width:900px){
  .flow2{ grid-template-columns:1fr; gap:20px }
  .arrow2 .b{ transform:rotate(90deg) }
  .glass-body{ grid-template-columns:1fr }
}

/* ---------- WORKFLOW CHAIN (homepage platform section) ---------- */
.wf-stage{ display:flex; align-items:center; gap:12px; margin-bottom:16px }
.wf-stage .num{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--coral) }
.wf-stage .who{ font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--rule); border-radius:999px; padding:4px 11px; background:var(--white) }
.wf-panel{ border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#0e2318;
  box-shadow:0 40px 80px -46px rgba(11,31,20,.7); padding:20px 22px }
.wf-panel .pt{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:14px; display:flex; justify-content:space-between; align-items:baseline }
.wf-panel .pt em{ font-style:normal; color:var(--gain-2) }
.wf-panel svg{ width:100%; height:auto; display:block; overflow:visible }
.wf-panel .cap{ font-size:11.5px; color:rgba(255,255,255,.5); margin-top:14px; line-height:1.45 }
.mono-s{ font-family:var(--mono); font-size:8px; fill:rgba(255,255,255,.55) }
.mono-g{ font-family:var(--mono); font-size:8px; fill:#35a05f }
.mono-w{ font-family:var(--mono); font-size:8.5px; fill:rgba(255,255,255,.85) }
.mono-r{ font-family:var(--mono); font-size:8px; fill:#e07b6a }

/* ==========================================================================
   V2 ADDITIONS — hero glass upgrades, vertical pages, pricing, security,
   demo, legal, 404
   ========================================================================== */

/* ---- Hero glass: live metric ticker ---- */
.glass-body > *{ min-width:0 }
.gticker{ grid-column:1 / -1; overflow:hidden; position:relative; border-bottom:1px solid rgba(255,255,255,.08); margin:-14px -14px 0; padding:8px 0 }
.gticker .tk{ display:flex; gap:34px; white-space:nowrap; width:max-content; animation:tick 36s linear infinite; padding-left:14px }
.gticker span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:rgba(255,255,255,.55) }
.gticker b{ font-weight:500; color:var(--gain-2) }
@keyframes tick{ to{ transform:translateX(-50%) } }

/* ---- Hero glass: Ask Quarri typing row ---- */
.gask{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px 14px }
.gask .qi{ width:22px; height:22px; border-radius:6px; background:rgba(53,160,95,.18); color:var(--gain-2); display:flex; align-items:center; justify-content:center; flex:none; font-size:12px }
.gask .qtxt{ font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.82); overflow:hidden; white-space:nowrap;
  min-width:0; text-overflow:ellipsis; max-width:0; animation:typing 2.6s steps(38,end) 1.4s forwards }
@keyframes typing{ to{ max-width:100% } }
.gask .qtxt::after{ content:"▍"; color:var(--gain-2); animation:caret 1.1s step-end infinite }
@keyframes caret{ 50%{ opacity:0 } }
@media (prefers-reduced-motion: reduce){
  .gticker .tk{ animation:none }
  .gask .qtxt{ max-width:100%; animation:none }
  .gask .qtxt::after{ animation:none; content:"" }
  .spark-fc{ opacity:1; animation:none }
}
.gask .qtag{ margin-left:auto; font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); white-space:nowrap }

/* dashed forecast continuation on spark charts */
.spark-fc{ fill:none; stroke:#35a05f; stroke-width:1.4; stroke-linecap:round; stroke-dasharray:2 5; opacity:0; animation:fadein 1s ease 2.2s forwards }

/* ---- Chain strip (vertical pages + homepage) ---- */
.chain{ display:flex; align-items:center; gap:0; flex-wrap:wrap; margin-top:26px }
.chain .cnode{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 14px; white-space:nowrap; transition:all .2s var(--ease) }
.chain .cnode.on{ color:#fff; border-color:var(--coral); background:rgba(218,119,86,.16) }
.chain a.cnode:hover{ color:#fff; border-color:rgba(255,255,255,.5) }
.chain .csep{ color:rgba(255,255,255,.35); font-size:12px; padding:0 8px }

/* ---- Vertical sub-segments (Wood Products) ---- */
.vsegs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px }
.vseg{ background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); padding:24px 24px 26px; transition:border-color .25s var(--ease), transform .25s var(--ease) }
.vseg:hover{ border-color:var(--coral); transform:translateY(-2px) }
.vseg .vn{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--coral) }
.vseg h3{ margin:10px 0 8px; font-size:18px }
.vseg p{ font-size:13.5px; color:var(--ink-2); line-height:1.6 }

/* ---- Adjacent chain cross-links ---- */
.xlinks{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.xlink{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:190px; display:flex; align-items:flex-end; background-size:cover; background-position:center }
.xlink::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,.2) 20%,rgba(10,10,10,.82)) }
.xlink .xin{ position:relative; z-index:1; padding:22px; color:#fff }
.xlink .xd{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.7) }
.xlink h3{ color:#fff; margin:7px 0 4px; font-size:19px }
.xlink .xgo{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--coral) }
@media(max-width:700px){ .xlinks{ grid-template-columns:1fr } }

/* ---- Pricing ---- */
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; max-width:860px }
.tier{ background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); padding:34px 32px 36px; display:flex; flex-direction:column; gap:14px }
.tier.hot{ border-color:var(--coral); box-shadow:0 30px 70px -50px rgba(218,119,86,.55) }
.tier .tn{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--coral) }
.tier .tp{ font-size:clamp(34px,3.6vw,46px); font-weight:600; letter-spacing:-.03em; line-height:1 }
.tier .tp small{ font-size:15px; font-weight:400; color:var(--ink-3); letter-spacing:0 }
.tier .td{ font-size:14.5px; color:var(--ink-2); line-height:1.6 }
.tier ul{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:6px }
.tier li{ font-size:14px; color:var(--ink); padding-left:22px; position:relative; line-height:1.5 }
.tier li::before{ content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:2px; background:var(--coral) }
.tier .btn{ margin-top:auto; justify-content:center }
.price-note{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) }

.cmp-wrap{ overflow-x:auto; border:1px solid var(--rule); border-radius:var(--radius); background:var(--white) }
.cmp{ width:100%; border-collapse:collapse; min-width:560px }
.cmp th,.cmp td{ text-align:left; padding:13px 20px; font-size:14px; border-bottom:1px solid var(--rule) }
.cmp thead th{ font-size:15px; font-weight:600; background:var(--bone); position:sticky; top:0 }
.cmp thead th small{ display:block; font-family:var(--mono); font-size:11px; font-weight:400; color:var(--coral); margin-top:3px }
.cmp .cat td{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); background:var(--bone); padding:9px 20px }
.cmp td:not(:first-child){ color:var(--ink-2) }
.cmp .yes{ color:var(--coral); font-weight:600 }
.cmp .no{ color:var(--rule) }
.cmp tbody tr:last-child td{ border-bottom:0 }

/* ---- Security strip (homepage condensed) ---- */
.sec-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); overflow:hidden }
.sec-cell{ background:var(--forest-2); padding:22px 24px }
.sec-cell .sv{ font-family:var(--mono); font-size:17px; font-weight:500; color:#fff; letter-spacing:-.01em }
.sec-cell .sl{ font-size:12.5px; color:var(--on-forest); margin-top:6px; line-height:1.45 }

/* ---- Capability buckets (security page) ----
   Restores the numbered card with a flowing tag list from the live site. Denser
   and more scannable than three paragraph boxes for a list of guarantees. */
.capb{ display:flex; flex-direction:column; gap:14px }
.capb-row{
  background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
  padding:22px 26px 24px; display:grid; grid-template-columns:minmax(150px,220px) 1fr;
  gap:clamp(14px,2.4vw,36px); align-items:start;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.capb-row:hover{ border-color:var(--coral); transform:translateY(-2px) }
.capb-head{ display:flex; align-items:baseline; gap:12px }
.capb-num{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; color:var(--coral); flex:none }
.capb-name{ font-size:clamp(16px,1.8vw,20px); font-weight:500; letter-spacing:-.015em; line-height:1.25 }
.capb-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:7px 9px }
.capb-tags span{ font-size:13.5px; color:var(--ink-2); line-height:1.5 }
.capb-tags .sep{ color:var(--ink-3); opacity:.6 }
.on-dark .capb-row{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14) }
.on-dark .capb-name{ color:#fff }
.on-dark .capb-tags span{ color:var(--on-forest) }
@media(max-width:700px){
  .capb-row{ grid-template-columns:1fr; gap:12px }
}

/* ---- Security page promises ---- */
.promises{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:30px }
.promise{ border-top:2px solid var(--coral); padding-top:18px }
.promise .pnum{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--coral) }
.promise h3{ color:#fff; margin:10px 0 8px }
.promise p{ font-size:14px; color:var(--on-forest); line-height:1.6 }

/* ---- Demo scheduler ---- */
.sched-shell{ background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden; margin-top:clamp(20px,3vh,36px) }
.sched-shell iframe{ display:block; width:100%; height:760px; border:0 }
.expect{ list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:22px }
.expect li{ font-size:15px; line-height:1.55; padding-left:26px; position:relative; color:var(--ink-2) }
.expect li::before{ content:""; position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:2px; background:var(--coral) }
.expect li b{ color:var(--ink); font-weight:500 }

/* ---- 404 ---- */
.err-wrap{ min-height:62vh; display:flex; align-items:center }
.err-code{ font-family:var(--mono); font-size:clamp(60px,10vw,120px); font-weight:700; color:var(--coral); letter-spacing:-.04em; line-height:1 }

/* ==========================================================================
   ARCHITECTURE CARD — lifted from the MNRF / investor deck.
   Models on top, Quarri underneath, data sources feeding up from the bottom.
   ========================================================================== */
.arch{
  background:#0e2318; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg);
  padding:clamp(16px,2.2vw,26px); box-shadow:0 44px 90px -50px rgba(11,31,20,.75);
}
.arch-cap{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.48); display:block; margin-bottom:7px }
/* Compacted: the diagram is a reference chart, not a hero. Every box lost a
   few px of padding and every stack a few px of gap, which takes roughly a
   fifth off the height without shrinking any type. */
.arch-tier{
  border:1px solid rgba(255,255,255,.17); border-radius:12px;
  background:rgba(255,255,255,.045); padding:12px 14px 13px;
}
.arch-tier h4{ font-size:15px; font-weight:500; color:#fff; letter-spacing:-.01em }
.arch-tier h4 em{ font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.45); margin-left:9px }
.arch-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px }
.arch-chip{ font-size:12.5px; color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:8px; padding:4px 10px; background:rgba(255,255,255,.05) }

/* read / write band between the models and Quarri */
.arch-rw{ display:flex; align-items:center; justify-content:center; gap:clamp(28px,6vw,72px); padding:6px 0 }
.arch-rw span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gain-2); display:inline-flex; align-items:center; gap:7px }
.arch-rw svg{ width:12px; height:20px; overflow:visible }

/* the Quarri block */
.arch-quarri{ border:1px solid rgba(53,160,95,.36); border-radius:12px;
  background:rgba(53,160,95,.07); padding:12px 14px 13px }
.arch-quarri > h4{ font-size:16px; font-weight:500; color:#fff; letter-spacing:-.012em; margin-bottom:4px }
.arch-quarri > h4 em{ font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gain-2); margin-left:9px }
.arch-layer{ border-top:1px solid rgba(255,255,255,.1); padding:8px 0 7px }
.arch-lname{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gain-2); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap }
.arch-lname i{ font-style:normal; color:rgba(255,255,255,.5) }
.arch-pills{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px }
.arch-pills b{ font-weight:400; font-size:12px; color:rgba(255,255,255,.84);
  border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:3px 10px;
  background:rgba(255,255,255,.035) }

/* ingestion band and the sources at the bottom */
/* Seven arrows, one per source, each its own svg so nothing stretches. The
   old version was a single 600-wide viewBox with preserveAspectRatio:none
   scaled to full width, which flattened every arrowhead, and its five fixed
   positions could never line up with a wrapping row of pills. */
.arch-ingest{
  display:flex; justify-content:space-around; align-items:center;
  height:26px; margin:4px 0 9px; padding:0 2%;
}
.arch-ingest svg{ width:10px; height:20px; overflow:visible; flex:none }
.arch-ingest path{
  stroke:#35a05f; stroke-width:1.3; stroke-linecap:round; fill:none; opacity:.8;
}
/* The sources sit under their own arrows, so the row spreads to match. */
.arch-src{ justify-content:space-around }
.arch-src{ display:flex; gap:7px; flex-wrap:wrap }
.arch-src b{ font-weight:400; font-size:12px; color:rgba(255,255,255,.72);
  border:1px dashed rgba(255,255,255,.22); border-radius:8px; padding:6px 11px }
@media(max-width:640px){
  .arch-rw{ gap:22px }
  .arch-tier, .arch-quarri{ padding:13px 14px 14px }
}

/* ---- Cookie preferences link in the footer bar ---- */
/* LinkedIn glyph, right end of the footer bottom bar. Circled to read as a
   control rather than a stray mark, and it inherits currentColor so the hover
   only has to change one value. */
.fb-social{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:none;
  border:1px solid rgba(255,255,255,.18); border-radius:50%;
  color:var(--on-forest);
  transition:color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.fb-social:hover{ color:var(--coral); border-color:var(--coral); transform:translateY(-2px) }
.fb-social svg{ width:14px; height:14px; fill:currentColor; display:block }

.ck-line{ display:inline-flex }
.ck-prefs{ color:var(--ink-3); text-decoration:underline; text-underline-offset:2px; transition:color .2s }
.ck-prefs:hover{ color:var(--on-forest) }

/* ---- Consent notice ---- */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--forest-2); border-top:1px solid rgba(255,255,255,.14);
  transform:translateY(100%); transition:transform .3s var(--ease);
  box-shadow:0 -20px 50px -30px rgba(0,0,0,.7);
}
.consent.is-in{ transform:none }
.consent-in{ max-width:var(--content); margin:0 auto; padding:16px var(--gutter);
  display:flex; align-items:center; gap:clamp(14px,3vw,34px); flex-wrap:wrap }
.consent-copy{ flex:1 1 340px; font-size:13.5px; line-height:1.55; color:var(--on-forest); margin:0 }
.consent-copy a{ color:var(--coral-hi); text-decoration:underline; text-underline-offset:2px }
.consent-btns{ display:flex; gap:10px; flex:none }
.consent-btns .btn{ padding:10px 20px; font-size:14px }
.consent-btns .btn-ghost{ border-color:rgba(255,255,255,.3); color:#fff }
.consent-btns .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08) }
@media (prefers-reduced-motion: reduce){ .consent{ transition:none } }

/* ---- generic svg panel sizing on vertical pages ---- */
.mr-vis .wf-panel svg{ min-height:120px }

/* ==========================================================================
   V3 — nav flyout, supply-chain map, marquee, scroll rail, case studies,
   reworked hero left
   ========================================================================== */

/* ---- Scroll progress rail ---- */
.scroll-rail{ position:fixed; left:0; right:0; top:0; height:2px; z-index:70; pointer-events:none; background:transparent }
.scroll-rail::before{ content:""; position:absolute; left:0; top:0; height:2px; width:var(--scroll,0%); background:var(--coral) }

/* ---- Nav flyout ---- */
.nav-group{ position:relative }
.nav-group > a{ display:inline-flex; align-items:center; gap:6px; cursor:pointer }
.nav-group > a::after{ content:""; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px); transition:transform .2s var(--ease) }
.nav-group:hover > a::after, .nav-group:focus-within > a::after{ transform:rotate(225deg) translateY(-3px) }
.nav-pop{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  min-width:290px; background:var(--white); border:1px solid var(--rule); border-radius:12px;
  box-shadow:0 30px 60px -30px rgba(17,17,17,.42); padding:8px;
  opacity:0; visibility:hidden; transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  display:flex; flex-direction:column; gap:2px;
}
.nav-group:hover .nav-pop, .nav-group:focus-within .nav-pop{ opacity:1; visibility:visible; transform:translate(-50%,4px) }
.nav-pop::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px }
.nav-pop a{ display:block; padding:10px 13px; border-radius:8px; transition:background .18s var(--ease) }
.nav-pop a:hover{ background:var(--bone) }
/* 400, not 500. These sat heavier and darker than every other nav item, which
   made the flyout look like a different piece of furniture. Colour alone is
   enough to separate them from the sub-label underneath. */
.nav-pop .np-t{ display:block; font-size:14.5px; font-weight:400; color:var(--ink); line-height:1.3 }
.nav-pop .np-s{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:3px }
.nav-pop .np-group{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding:12px 13px 6px; border-top:1px solid var(--rule); margin-top:6px }
.nav-pop .np-group:first-child{ border-top:0; margin-top:0; padding-top:6px }

/* ---- Supply-chain map: "where do I sit" ---- */
.chainmap{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(30px,4vw,48px) }
.cm-rail{ position:absolute; left:0; right:0; top:52px; height:1px; background:var(--rule); z-index:0 }
.cmx{
  position:relative; z-index:1; display:flex; flex-direction:column; gap:0;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cmx:hover{ border-color:var(--coral); transform:translateY(-3px); box-shadow:0 26px 50px -34px rgba(17,17,17,.4) }
.cmx .cm-photo{ height:clamp(150px,15vw,190px); background-size:cover; background-position:center; position:relative }
.cmx .cm-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,20,14,.15),rgba(10,20,14,.6)) }
.cmx .cm-step{ position:absolute; z-index:1; left:14px; bottom:10px; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:#fff }
.cmx .cm-body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1 }
.cmx h3{ font-size:17.5px; letter-spacing:-.015em }
.cmx .cm-io{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--coral) }
.cmx .cm-who{ font-size:13px; color:var(--ink-2); line-height:1.5 }
.cmx .cm-go{ margin-top:auto; padding-top:10px; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); transition:color .2s var(--ease) }
.cmx:hover .cm-go{ color:var(--coral) }
.cm-note{ margin-top:18px; font-size:13.5px; color:var(--ink-3); display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.cm-note b{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--coral); font-weight:400 }
@media(max-width:900px){
  .chainmap{ grid-template-columns:1fr 1fr }
  .cm-rail{ display:none }
}
@media(max-width:540px){ .chainmap{ grid-template-columns:1fr } }

/* ---- Marquee stat band ---- */
.mq{ position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) }
.mq-track{ display:flex; gap:clamp(40px,5vw,86px); width:max-content; align-items:baseline;
  animation:mqscroll 48s linear infinite; will-change:transform }
.mq:hover .mq-track, .mq:focus-within .mq-track{ animation-play-state:paused }
@keyframes mqscroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.mq-stat{ display:flex; flex-direction:column; gap:9px; flex-shrink:0; min-width:190px;
  padding-left:22px; border-left:1px solid var(--rule) }
.on-dark .mq-stat{ border-left-color:rgba(255,255,255,.16) }
.mq-num{ font-family:var(--mono); font-size:clamp(26px,3vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--ink) }
.on-dark .mq-num{ color:#fff }
.mq-lab{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); line-height:1.4; max-width:24ch }
.on-dark .mq-lab{ color:var(--on-forest) }
@media (prefers-reduced-motion: reduce){
  .mq{ -webkit-mask-image:none; mask-image:none; overflow-x:auto }
  .mq-track{ animation:none }
}

/* ---- Case studies ---- */
.cases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px }
.cs{ background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .25s var(--ease), transform .25s var(--ease) }
.cs:hover{ border-color:var(--coral); transform:translateY(-2px) }
.cs-head{ padding:22px 24px 18px; border-bottom:1px solid var(--rule); background:var(--bone) }
.cs-who{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--coral) }
.cs-head h3{ font-size:18px; letter-spacing:-.015em; margin-top:9px; line-height:1.3 }
.cs-body{ padding:20px 24px 24px; display:flex; flex-direction:column; gap:16px; flex:1 }
.cs-blk .cs-l{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:6px }
.cs-blk p{ font-size:14px; color:var(--ink-2); line-height:1.6 }
.cs-blk p b{ color:var(--ink); font-weight:500 }
.cs-out{ margin-top:auto; padding-top:16px; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:10px }
.cs-row{ display:flex; align-items:baseline; gap:12px }
.cs-n{ font-family:var(--mono); font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.02em; flex:none; min-width:96px }
.cs-d{ font-size:12.5px; color:var(--ink-2); line-height:1.45 }
.cs-more{ display:inline-block; margin-top:16px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--coral); font-weight:400 }
.cs:hover .cs-more{ text-decoration:underline }

/* ---- Hero left: the scattered systems, made legible ----
   No backdrop-filter here on purpose: blurring the photograph behind a
   semi-transparent card is what made these read as soft/out-of-focus. A near
   solid surface keeps the type crisp against the same background. */
.scatter .gdoc{
  background:rgba(11,24,16,.93); border:1px solid rgba(255,255,255,.34);
  box-shadow:0 22px 40px -24px rgba(0,0,0,.9);
}
.scatter .gdoc .gt{ color:#fff; font-size:9.5px; letter-spacing:.06em }
.scatter .gdoc .gi{ background:var(--coral); opacity:.9 }
.scatter .gdoc .gl{ background:rgba(255,255,255,.24) }
.scatter .gdoc .gsub{ font-family:var(--mono); font-size:7.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-top:7px; display:block }
/* the two cards that disagree — concrete conflict beats an abstract "≠" */
.scatter .gdoc .gval{ font-family:var(--mono); font-size:8px; letter-spacing:.04em; color:rgba(255,255,255,.62);
  margin-top:8px; display:block; white-space:nowrap }
.scatter .gdoc .gval b{ color:#fff; font-weight:500 }
.scatter .gdoc .gval b.bad{ color:#e07b6a }
.scatter .gx{ color:var(--coral); opacity:.85; font-size:15px }
.scatter .ghand{ color:rgba(255,255,255,.82); border-color:rgba(255,255,255,.4); background:rgba(14,28,20,.6); font-size:9.5px }
.scatter svg.tang line{ stroke:rgba(255,255,255,.3) }

/* ---- Plug into any agent ----
   Chips are logo-ready: swap the placeholder <svg class="ag-mark"> for
   <img class="ag-mark" src="assets/logos/<name>.svg" alt=""> and nothing else changes. */
.agentstrip{
  display:flex; align-items:center; gap:clamp(14px,2vw,26px); flex-wrap:wrap;
  padding:22px 26px; margin-top:clamp(26px,3.4vw,44px);
  background:var(--white); border:1px solid var(--rule);
  border-radius:var(--radius) var(--radius) 0 0; border-bottom:0;
}
.agentstrip .ag-lab{ font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); flex:none }
.agentstrip .ag-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.ag-chip{ display:inline-flex; align-items:center; gap:9px; padding:8px 14px;
  border:1px solid var(--rule); border-radius:999px; background:var(--bone) }
.ag-chip .ag-mark{ width:17px; height:17px; color:var(--ink); flex:none; object-fit:contain }
.ag-chip span{ font-size:13.5px; color:var(--ink); letter-spacing:-.01em }
.agentstrip .ag-more{ font-size:13px; color:var(--ink-3) }

/* ---- Platform: AI band (three short cells, replaces the old text block) ---- */
.aihead{ font-family:var(--mono); font-size:11.5px; font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--coral); margin-top:clamp(26px,3.4vw,44px) }
.aiband{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
  border-radius:0 0 var(--radius) var(--radius); overflow:hidden; margin-top:0 }
.aib{ background:var(--white); padding:26px 26px 28px; display:flex; flex-direction:column; gap:11px }
.aib .aii{ width:26px; height:26px; color:var(--coral); flex:none }
.aib h4{ font-size:16px; font-weight:500; letter-spacing:-.012em; line-height:1.3 }
.aib p{ font-size:13.5px; color:var(--ink-2); line-height:1.6 }

/* ==========================================================================
   DEPLOYMENT, on how-it-works
   The implementation work is most of the early value and appeared nowhere on
   the site. Four workstreams as a grid, then the timeline that backs the
   "live in two weeks" claim.
   ========================================================================== */
.dep-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden }
.dep{ background:var(--white); padding:clamp(22px,2.8vw,32px) }
.dep-n{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--coral); margin-bottom:12px }
.dep h3{ font-size:clamp(18px,1.9vw,21px); font-weight:500; letter-spacing:-.015em; margin-bottom:10px }
.dep p{ font-size:15px; line-height:1.65; color:var(--ink-2) }

.dep-time{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px);
  margin-top:clamp(22px,3vw,34px) }
.dt{ border-top:2px solid var(--coral); padding-top:16px }
.dt-k{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--coral); margin-bottom:9px }
.dt p{ font-size:14.5px; line-height:1.6; color:var(--ink-2) }
@media(max-width:820px){
  .dep-grid{ grid-template-columns:1fr }
  .dep-time{ grid-template-columns:1fr; gap:18px }
}

/* Model marks in the architecture diagram. Supplied as black glyphs, recoloured
   white at build time because the chip sits on a deep forest panel. alt="" as
   the brand name is already the chip's own text. */
.arch-chip.has-logo{ display:inline-flex; align-items:center; gap:8px }
.arch-chip.has-logo img{ width:15px; height:15px; object-fit:contain; opacity:.92; flex:none }

/* ── FAQ ─────────────────────────────────────────────────────────────────────
   Answers are long and read as prose, so the column is narrower than the page
   grid and each answer is a plain block rather than an accordion. Accordions
   hide the text from the reader who is skimming and, more to the point here,
   from the answer engines this page exists to be quoted by: a passage collapsed
   behind a click is still in the DOM but reads as secondary.
   No FAQPage schema by design — see the note at the top of _build_faq.py. */
.faq-meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-forest); margin-top:26px;
}
.faq-jump{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.faq-jump a{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-forest); border:1px solid rgba(255,255,255,.22); border-radius:100px;
  padding:8px 15px; transition:border-color .25s var(--ease), color .25s var(--ease);
}
.faq-jump a:hover{ border-color:var(--coral); color:#fff }

.faq-list{ max-width:75ch; margin-top:clamp(28px,3.4vw,44px) }
.faq-q{ padding:clamp(26px,3vw,38px) 0; border-top:1px solid var(--rule) }
.faq-q:first-child{ border-top:none; padding-top:0 }
/* the anchor is the jump target, so it must not sit under the sticky nav */
.faq-q h3{
  font-size:clamp(19px,1.7vw,23px); font-weight:300; letter-spacing:-.02em;
  line-height:1.35; margin-bottom:16px; scroll-margin-top:96px;
}
.faq-a p{ font-size:16px; line-height:1.72; color:var(--ink-2); margin-bottom:14px }
.faq-a p:last-child{ margin-bottom:0 }
.faq-a strong{ color:var(--ink); font-weight:500 }
.faq-a ul{ margin:0 0 14px; padding-left:0; list-style:none }
.faq-a li{
  font-size:16px; line-height:1.72; color:var(--ink-2);
  padding-left:20px; position:relative; margin-bottom:9px;
}
.faq-a li::before{
  content:""; position:absolute; left:2px; top:11px;
  width:5px; height:5px; border-radius:50%; background:var(--coral);
}

/* A three-item Resources menu does not need the width the Who-we-serve menu
   uses for eleven. Narrower, and no group headings to separate. */
.nav-pop-sm{ min-width:238px }
.nav-pop-sm a{ padding:11px 13px }