/* ============================================================
   Perceptix - shared stylesheet
   ============================================================ */

:root{
  --navy-ink:#1d1d1f;
  --navy-deep:#6e1530;
  --crimson:#861A3C;
  --crimson-bright:#A8244F;
  --paper:#ffffff;
  --paper-warm:#f5f6f8;
  --white:#ffffff;
  --ink:#1d1d1f;
  --muted:#6e6e73;
  --hair:#e6e7ea;
  --hair-strong:#d5d7db;
  --grid-gap:clamp(20px,4vw,56px);
  --pad-x:clamp(22px,6vw,120px);
  --font-display:'Manrope',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}
::selection{background:var(--crimson);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.04;color:var(--navy-ink)}
.lede{font-size:clamp(16px,1.35vw,19px);color:var(--muted);max-width:52ch;font-weight:300;line-height:1.65}

.shell{max-width:1440px;margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
section{position:relative}

/* ---------- nav ---------- */
/* locked to the top of the viewport, always visible and always solid */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad-x);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
  transition:padding .35s ease,box-shadow .35s ease;
}
/* once the page moves, tighten it and lift it off the content */
.nav.scrolled{
  padding-top:12px;padding-bottom:12px;
  box-shadow:0 8px 26px -22px rgba(29,29,31,.6);
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:19px;color:var(--navy-ink)}
.brand img{height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:38px}
.nav-links a{font-size:13.5px;color:var(--muted);font-weight:500;letter-spacing:.01em;transition:color .25s;position:relative}
.nav-links a:hover{color:var(--navy-ink)}
.nav-links a.active{color:var(--crimson);font-weight:600}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--crimson);border-radius:2px}
.nav-cta{
  font-family:var(--font-body);font-size:13.5px;font-weight:600;
  background:var(--crimson);color:#fff;padding:11px 22px;border-radius:20px;
  transition:background .3s,transform .3s;letter-spacing:.01em;
}
.nav-cta:hover{background:var(--crimson-bright);transform:translateY(-1px)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;width:30px;height:24px;justify-content:center;align-items:center;z-index:120;padding:0}
.nav-toggle span{width:24px;height:2px;background:var(--navy-ink);display:block;border-radius:2px;transition:transform .3s ease,opacity .25s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.menu-open .nav-toggle{opacity:0;pointer-events:none}

.mobile-menu{
  position:fixed;inset:0;z-index:110;
  background:rgba(255,255,255,.98);backdrop-filter:blur(16px);
  padding:96px var(--pad-x) 40px;
  display:flex;flex-direction:column;gap:4px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(-100%);opacity:0;pointer-events:none;
  transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .35s ease;
}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mm-close{
  position:absolute;top:18px;right:var(--pad-x);width:44px;height:44px;
  display:grid;place-items:center;background:none;border:none;cursor:pointer;z-index:130;color:var(--navy-ink);
}
.mm-close svg{width:26px;height:26px}
.mobile-menu a{
  font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--navy-ink);
  padding:15px 0;border-bottom:1px solid var(--hair);transition:color .25s;
}
.mobile-menu a:hover{color:var(--crimson)}
.mobile-menu .mm-cta{
  margin-top:22px;background:var(--crimson);color:#fff;text-align:center;border-radius:20px;
  padding:16px;border-bottom:none;font-family:var(--font-body);font-size:15px;font-weight:600;transition:background .3s;
}
.mobile-menu .mm-cta:hover{background:var(--crimson-bright);color:#fff}
body.menu-open{overflow:hidden}
@media(max-width:880px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-toggle{display:flex}
}
@media(min-width:881px){ .mobile-menu{display:none} }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-body);font-size:14.5px;font-weight:600;letter-spacing:.01em;
  padding:15px 30px;border-radius:24px;cursor:pointer;transition:all .3s;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:10px;
}
.btn-primary{background:var(--crimson);color:#fff}
.btn-primary:hover{background:var(--crimson-bright);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(134,26,60,.4)}
.btn .arr{transition:transform .3s}
.btn:hover .arr{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--navy-ink);border-color:var(--hair-strong)}
.btn-ghost:hover{border-color:var(--crimson);background:var(--paper-warm);color:var(--crimson)}

/* ---------- reveal ---------- */
/* Content is visible by default. It is only hidden for the scroll animation
   when the .js flag confirms scripts are running, so a missing or blocked
   script.js can never leave the page blank. */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- sections ---------- */
.sec{padding:clamp(72px,10vh,120px) 0}
.sec-head{max-width:58ch;margin-bottom:clamp(40px,6vh,64px)}
.sec-head h2{font-size:clamp(28px,3.4vw,46px)}
.sec-head .lede{margin-top:20px}

/* ---------- page header (subpages) ---------- */
/* taller split variant: copy left, motif right, sized to hold the fold */
.page-head.head-split{
  padding-top:clamp(150px,19vh,205px);
  padding-bottom:clamp(56px,9vh,96px);
  min-height:min(88vh,880px);
  display:flex;align-items:center;
}
.head-split .shell{width:100%}
.head-grid{
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(28px,4vw,72px);align-items:center;
}
.head-split h1{font-size:clamp(38px,5.4vw,70px);max-width:15ch}
.head-split .lede{margin-top:24px;max-width:50ch;font-size:clamp(16px,1.45vw,19px)}
.head-viz{justify-self:end;width:100%;max-width:420px}
.head-viz svg{width:100%;height:auto;display:block}
@media(max-width:900px){
  .page-head.head-split{min-height:0;display:block;padding-bottom:clamp(44px,7vh,72px)}
  .head-grid{grid-template-columns:1fr;gap:34px}
  .head-viz{justify-self:start;max-width:330px}
}
@media(max-width:520px){.head-viz{display:none}}
.page-head{
  padding-top:clamp(140px,18vh,200px);
  padding-bottom:clamp(44px,7vh,80px);
  background:var(--paper-warm);
  border-bottom:1px solid var(--hair);
}
.page-head h1{font-size:clamp(34px,5vw,64px);font-weight:800;max-width:20ch}
.page-head h1 .em{color:var(--crimson);font-style:normal}
.page-head .lede{margin-top:22px;max-width:58ch}

/* ---------- hero type (shared by the centered hero) ---------- */
.hero-sub{margin-top:28px;font-size:clamp(16px,1.4vw,19px);color:var(--muted);max-width:44ch;font-weight:300;line-height:1.7}
.hero-actions{margin-top:38px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* sample report panel */
.report-panel{
  background:var(--white);border-radius:16px;padding:32px;position:relative;overflow:hidden;
  box-shadow:0 30px 60px -35px rgba(29,29,31,.18);border:1px solid var(--hair);min-height:430px;
}
.rp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--hair)}
.rp-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--crimson);text-transform:uppercase}
.rp-title{margin-top:8px;font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--navy-ink);letter-spacing:-.01em}
.rp-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;text-align:right;white-space:nowrap}
.rp-body{margin-top:24px;display:flex;flex-direction:column;gap:24px}
.rp-block-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.rp-summary{font-size:13.5px;color:var(--muted);line-height:1.65;font-weight:300}
.rp-sentiment{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--paper-warm)}
.rp-sentiment i{display:block;height:100%}
.rp-sentiment .pos,.rp-legend .pos{background:#34c759}
.rp-sentiment .neu,.rp-legend .neu{background:#c7cad1}
.rp-sentiment .neg,.rp-legend .neg{background:#ff9f40}
.rp-legend{display:flex;gap:18px;margin-top:10px;flex-wrap:wrap}
.rp-legend span{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
.rp-legend i{width:8px;height:8px;border-radius:50%;display:block}
.rp-narratives{display:flex;flex-direction:column;gap:9px}
.rp-nline{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:8px;background:var(--paper-warm);border:1px solid var(--hair)}
.rp-nline .rn-rank{font-family:var(--font-mono);font-size:10px;color:var(--muted);flex-shrink:0;width:16px}
.rp-nline .rn-txt{font-size:12.5px;color:var(--navy-ink);flex:1}
.rp-nline .rn-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--crimson);flex-shrink:0}
.rp-foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.rp-foot span{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:.08em}
@media(max-width:920px){.report-panel{min-height:auto}}

/* ---------- centered hero ---------- */
.hero-c{
  padding-top:clamp(150px,20vh,220px);
  padding-bottom:clamp(48px,8vh,88px);
  text-align:center;overflow:hidden;position:relative;
}
.hero-c::after{
  content:"";position:absolute;left:50%;top:-10%;width:min(1100px,120vw);height:520px;
  transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(134,26,60,.07) 0%, rgba(134,26,60,0) 70%);
}
.hero-c h1{
  margin:0 auto;font-size:clamp(34px,5vw,68px);font-weight:800;
  max-width:23ch;line-height:1.04;
}
.hero-c h1 .em{color:var(--crimson);font-style:normal}
.hero-c .hero-sub{margin:26px auto 0;max-width:62ch;font-size:clamp(16px,1.4vw,18.5px);color:var(--muted);font-weight:300;line-height:1.7}
.hero-c .hero-actions{margin-top:36px;justify-content:center}

/* ---------- trust strip ---------- */
.trust-strip{padding:clamp(30px,5vh,48px) 0 clamp(44px,7vh,72px);border-bottom:1px solid var(--hair)}
.trust-label{text-align:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.logo-row{
  margin-top:28px;display:flex;align-items:center;justify-content:center;
  gap:clamp(34px,6vw,86px);flex-wrap:wrap;
}
.logo-row img{
  max-height:30px;max-width:140px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.5;transition:filter .3s,opacity .3s;
}
/* crest-shaped marks need more height to read at the same optical weight */
.logo-row img.crest{max-height:50px;max-width:60px}
.logo-row img:hover{filter:grayscale(0);opacity:1}
/* Windjammer bumped 25% above the base 30px */
.logo-row img.wj{max-height:38px;max-width:175px}
/* SHEIN trimmed 10% below the base 30px */
.logo-row img.shein{max-height:27px;max-width:126px}
@media(max-width:600px){.logo-row{gap:30px}.logo-row img{max-height:24px;max-width:108px}.logo-row img.crest{max-height:40px;max-width:48px}.logo-row img.wj{max-height:30px;max-width:135px}.logo-row img.shein{max-height:22px;max-width:97px}}

/* ---------- what we do (split) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.split h2{font-size:clamp(28px,3.4vw,44px)}
.split .lede{margin-top:20px}
.why-title{
  margin-top:34px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--crimson);
}
.why-list{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:2px}
.why-list li{display:flex;gap:13px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--hair);font-size:15px;font-weight:300;color:var(--ink);line-height:1.5}
.why-list li:last-child{border-bottom:none}
.why-list .ck{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;margin-top:1px;
  display:grid;place-items:center;background:rgba(134,26,60,.09);color:var(--crimson);
}
.why-list .ck svg{width:11px;height:11px}
.split .btn{margin-top:30px}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- service index (list + detail panel) ---------- */
.svc-index{display:block}
.js .svc-index{
  display:grid;grid-template-columns:1fr 1.02fr;
  gap:clamp(24px,3.4vw,58px);align-items:start;
}
.svc-list{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.svc-item{
  width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--hair);cursor:pointer;
  padding:15px 26px 15px 16px;position:relative;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:600;font-size:16.5px;
  color:var(--navy-ink);letter-spacing:-.01em;line-height:1.3;
  transition:color .28s,padding-left .28s,background .28s;
}
.svc-item::before{
  content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:0;
  background:var(--crimson);transition:width .28s;
}
.svc-item .n{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  color:var(--muted);flex-shrink:0;transition:color .28s;
}
.svc-item .d{
  flex-basis:100%;font-family:var(--font-body);font-weight:300;font-size:14px;
  color:var(--muted);line-height:1.6;margin-top:8px;
}
.js .svc-item .d{display:none}
.svc-item:hover{color:var(--crimson);padding-left:22px}
.svc-item.is-active{color:var(--crimson);background:rgba(134,26,60,.035)}
.svc-item.is-active::before{width:3px}
.svc-item.is-active .n{color:var(--crimson)}
.svc-item:focus-visible{outline:2px solid var(--crimson);outline-offset:-2px}

.svc-panel{
  position:sticky;top:104px;overflow:hidden;
  border:1px solid var(--hair);border-radius:16px;
  padding:clamp(28px,3vw,44px);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(134,26,60,.07), rgba(134,26,60,0) 60%),
    var(--white);
  box-shadow:0 26px 54px -40px rgba(29,29,31,.3);
}
.svc-panel .p-n{
  font-family:var(--font-display);font-weight:800;font-size:clamp(40px,4.6vw,62px);
  line-height:.9;color:var(--crimson);opacity:.16;letter-spacing:-.03em;
}
.svc-panel h3{margin-top:18px;font-size:clamp(20px,2.3vw,28px);line-height:1.2}
.svc-panel .p-rule{width:36px;height:2px;background:var(--crimson);border-radius:2px;margin-top:16px}
.svc-panel p{
  margin-top:16px;font-size:clamp(14.5px,1.35vw,16.5px);
  color:var(--muted);font-weight:300;line-height:1.7;
}
.js .svc-panel{opacity:0;animation:panelIn .4s ease forwards}
@keyframes panelIn{to{opacity:1}}
@media(max-width:900px){
  .js .svc-index{grid-template-columns:1fr}
  .js .svc-item .d{display:block}
  .js .svc-panel{display:none}
  .svc-item::before{display:none}
  .svc-item:hover{padding-left:16px}
}

/* ---------- ecosystem / layers ---------- */
.eco-top{margin-bottom:clamp(30px,4vh,48px)}
.eco-top h2{font-size:clamp(28px,3.4vw,46px)}
.eco-top p{
  margin-top:16px;color:var(--muted);font-weight:300;
  font-size:clamp(15px,1.35vw,17px);line-height:1.65;max-width:46ch;
}
.eco{
  display:grid;grid-template-columns:1fr .78fr 1fr;
  gap:clamp(14px,1.8vw,26px);align-items:stretch;
}
.eco-col{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,26px)}
.eco-card{
  background:var(--white);border:1px solid var(--hair);border-radius:16px;
  padding:clamp(22px,2.4vw,32px);flex:1;
  transition:border-color .35s,transform .35s,box-shadow .35s;
}
.eco-card:hover{
  border-color:rgba(134,26,60,.35);transform:translateY(-3px);
  box-shadow:0 22px 44px -30px rgba(29,29,31,.28);
}
.eco-card .ec-head{display:flex;align-items:center;gap:12px}
.eco-card .ec-ic{
  width:38px;height:38px;flex-shrink:0;border-radius:10px;
  display:grid;place-items:center;color:var(--crimson);
  background:rgba(134,26,60,.07);transition:background .35s,color .35s;
}
.eco-card:hover .ec-ic{background:var(--crimson);color:#fff}
.eco-card .ec-ic svg{width:20px;height:20px}
.eco-card h3{font-size:17.5px;color:var(--navy-ink);line-height:1.25;letter-spacing:-.01em}
.eco-card p{margin-top:14px;font-size:14px;color:var(--muted);font-weight:300;line-height:1.65}
.eco-media{
  border-radius:16px;overflow:hidden;display:grid;place-items:center;
  padding:clamp(14px,1.6vw,24px);
  background:linear-gradient(160deg,rgba(134,26,60,.10),rgba(134,26,60,.03) 60%,rgba(134,26,60,.08));
}
.eco-media svg{width:100%;height:auto;max-height:none}
@media(max-width:980px){
  .eco{grid-template-columns:1fr 1fr}
  .eco-media{grid-column:1 / -1;order:-1;padding:clamp(20px,4vw,40px)}
  .eco-media svg{max-height:300px}
  .eco-top p{text-align:left}
}
@media(max-width:640px){
  .eco{grid-template-columns:1fr}
}

/* ---------- "A over B" principles ---------- */
.swap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.swap{padding:0 clamp(18px,2.2vw,34px);position:relative}
.swap + .swap{border-left:1px solid var(--hair)}
.swap:first-child{padding-left:0}
.swap:last-child{padding-right:0}
/* the rejected term, struck through */
.swap .out{
  display:inline-block;position:relative;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(17px,1.9vw,22px);color:var(--hair-strong);
  letter-spacing:-.01em;
}
.swap .out::after{
  content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;
  background:var(--crimson);opacity:.55;border-radius:2px;
  transform:scaleX(0);transform-origin:left;
}
.swap .out::after{transform:scaleX(1)}
.js .swap .out::after{transform:scaleX(0);transition:transform .55s cubic-bezier(.35,0,.15,1)}
.js .swap-grid.in .swap .out::after{transform:scaleX(1)}
.js .swap-grid.in .swap:nth-child(2) .out::after{transition-delay:.12s}
.js .swap-grid.in .swap:nth-child(3) .out::after{transition-delay:.24s}
.js .swap-grid.in .swap:nth-child(4) .out::after{transition-delay:.36s}
.swap .arw{display:block;margin:10px 0 8px;color:var(--crimson);font-size:15px;line-height:1}
.swap .in-term{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(22px,2.5vw,30px);line-height:1.1;
  color:var(--navy-ink);letter-spacing:-.02em;
}
.swap p{margin-top:14px;font-size:14px;color:var(--muted);font-weight:300;line-height:1.65}
@media(max-width:900px){
  .swap-grid{grid-template-columns:1fr 1fr;gap:34px 0}
  .swap:nth-child(odd){border-left:none;padding-left:0}
  .swap:last-child{padding-right:clamp(18px,2.2vw,34px)}
}
@media(max-width:560px){
  .swap-grid{grid-template-columns:1fr;gap:30px}
  .swap{border-left:none!important;padding:0!important}
}

/* ---------- about: one continuous gradient across the top sections ---------- */
.about-top{
  position:relative;
  background:
    radial-gradient(66% 46% at 96% 30%, rgba(134,26,60,.16), rgba(134,26,60,0) 62%),
    radial-gradient(52% 40% at 4% 78%, rgba(134,26,60,.07), rgba(134,26,60,0) 60%),
    linear-gradient(180deg, var(--paper-warm) 0%, var(--paper-warm) 68%, var(--paper) 100%);
}
/* the sections inside sit on the shared gradient rather than painting their own */
.about-top .page-head{background:transparent;border-bottom:none}

/* ---------- problem band ---------- */
.problem-band{background:transparent;overflow:hidden;position:relative}
.problem-band h2{max-width:20ch}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(40px,6vh,68px)}
.pcol{
  position:relative;overflow:hidden;background:var(--white);
  border:1px solid var(--hair);border-radius:14px;
  padding:clamp(26px,2.8vw,36px);
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.pcol:hover{transform:translateY(-4px);box-shadow:0 24px 48px -34px rgba(29,29,31,.3);border-color:rgba(134,26,60,.3)}
/* crimson strip marks each one as a failure state */
.pcol::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--crimson)}
/* the icon sits large and ghosted behind the copy */
.pico{
  position:absolute;right:-14px;top:-12px;width:120px;height:120px;
  color:var(--crimson);opacity:.09;pointer-events:none;
}
.pico svg{width:100%;height:100%}
.pcol h3{
  position:relative;font-size:clamp(19px,2.1vw,25px);
  line-height:1.15;letter-spacing:-.02em;color:var(--navy-ink);
}
.pcol p{position:relative;margin-top:12px;color:var(--muted);font-size:14.5px;font-weight:300;line-height:1.65;max-width:32ch}
@media(max-width:860px){.pgrid{grid-template-columns:1fr}}

/* ---------- audiences (who it's for) ---------- */
.aud-grid{display:grid;grid-template-columns:1fr 1fr}
.aud{
  padding:clamp(32px,4vw,58px) clamp(20px,3vw,52px);
  text-align:center;position:relative;
}
/* hairline quadrant dividers rather than card borders */
.aud:nth-child(odd){border-right:1px solid var(--hair)}
.aud:nth-child(-n+2){border-bottom:1px solid var(--hair)}
.aud-ic{
  width:56px;height:56px;margin:0 auto 22px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(134,26,60,.07);color:var(--crimson);
  transition:background .35s,color .35s,transform .35s;
}
.aud-ic svg{width:24px;height:24px}
.aud:hover .aud-ic{background:var(--crimson);color:#fff;transform:translateY(-3px)}
.aud h3{
  font-size:clamp(19px,2.1vw,26px);font-weight:800;
  color:var(--navy-ink);line-height:1.15;letter-spacing:-.02em;
}
/* short crimson rule that grows on hover, the same accent used across the site */
.aud h3::after{
  content:"";display:block;width:26px;height:2px;margin:14px auto 0;
  background:var(--crimson);opacity:.35;border-radius:2px;
  transition:width .4s,opacity .4s;
}
.aud:hover h3::after{width:52px;opacity:1}
.aud p{
  margin:14px auto 0;max-width:38ch;
  font-size:15px;color:var(--muted);font-weight:300;line-height:1.65;
}
@media(max-width:820px){
  .aud-grid{grid-template-columns:1fr}
  .aud:nth-child(odd){border-right:none}
  .aud{border-bottom:1px solid var(--hair)}
  .aud:last-child{border-bottom:none}
}

/* ---------- feature rows (alternating media / copy) ---------- */
.feature{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,4.5vw,72px);align-items:center;
}
.feature + .feature{margin-top:clamp(48px,7vw,96px)}
.feature.flip .fmedia{order:2}
.fmedia{
  border-radius:22px;padding:clamp(24px,3.4vw,52px);
  display:grid;place-items:center;position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(134,26,60,.09) 0%,rgba(134,26,60,.035) 55%,rgba(134,26,60,.07) 100%);
}
.fmedia::before{
  content:"";position:absolute;right:-14%;top:-22%;width:62%;height:150%;
  background:radial-gradient(circle at 50% 50%,rgba(134,26,60,.09),rgba(134,26,60,0) 68%);
}
.fmedia svg{width:100%;height:auto;position:relative;z-index:1;display:block}
.fbody h2,.fbody h3{font-size:clamp(24px,2.9vw,38px);line-height:1.1}
.fbody > p{margin-top:18px;font-size:clamp(15px,1.35vw,17px);color:var(--muted);font-weight:300;line-height:1.68;max-width:46ch}
.flist{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:3px}
.flist li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:15px;font-weight:400;color:var(--ink);line-height:1.5}
.flist .cv{flex-shrink:0;width:16px;height:16px;margin-top:3px;color:var(--crimson)}
.flist .cv svg{width:100%;height:100%}
.fbody .btn{margin-top:26px}
@media(max-width:900px){
  .feature{grid-template-columns:1fr;gap:32px}
  .feature.flip .fmedia{order:0}
}

/* ---------- clients marquee ---------- */
.clients{background:var(--paper-warm);overflow:hidden;padding:clamp(52px,7vh,80px) 0}
.clients h2{font-size:clamp(22px,2.2vw,30px);max-width:24ch}
.client-marquee{
  margin-top:clamp(26px,3.5vw,40px);width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.client-track{display:flex;align-items:center;width:max-content;gap:clamp(60px,8vw,120px);animation:clientScroll 26s linear infinite}
.client-marquee:hover .client-track{animation-play-state:paused}
.client-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:70px}
.client-logo img{max-height:44px;width:auto;filter:grayscale(1);opacity:.5;transition:filter .3s,opacity .3s}
.client-logo img:hover{filter:grayscale(0);opacity:1}
@keyframes clientScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:600px){.client-logo{height:56px}.client-logo img{max-height:34px}}

/* ---------- card grid (who we serve / problems / principles) ---------- */
.grid-2,.grid-3,.grid-4{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.gcard{background:var(--white);padding:clamp(28px,3vw,38px);transition:background .35s,transform .35s;position:relative;display:flex;flex-direction:column}
.gcard:hover{background:var(--paper-warm);transform:translateY(-3px)}
.gcard .gnum{font-family:var(--font-mono);font-size:12px;color:var(--crimson);letter-spacing:.14em}
/* icon variant, used where a card leads with a visual instead of a number */
.gcard .g-ic{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:rgba(134,26,60,.07);color:var(--crimson);
  transition:background .35s,color .35s,transform .35s;
}
.gcard .g-ic svg{width:22px;height:22px}
.gcard:hover .g-ic{background:var(--crimson);color:#fff;transform:translateY(-2px)}
.gcard .g-ic + h3{margin-top:22px}
.gcard h3{font-size:19px;margin:16px 0 12px;color:var(--navy-ink);letter-spacing:-.01em;line-height:1.2}
.gcard p{font-size:14px;color:var(--muted);line-height:1.62;font-weight:300}
.gcard .bar{position:absolute;left:0;top:0;height:3px;width:0;background:var(--crimson);transition:width .5s}
.gcard:hover .bar{width:100%}
@media(max-width:980px){.grid-4{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr}}
@media(max-width:820px){.grid-2{grid-template-columns:1fr}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}


/* ---------- methodology ---------- */
/* ---------- with / without ---------- */
.compare{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.col{padding:clamp(30px,3.4vw,44px);border-radius:8px;position:relative}
.col.without{background:var(--paper-warm);border:1px solid var(--hair-strong)}
.col.with{background:#eaf7ee;border:1px solid rgba(52,199,89,.28);box-shadow:0 24px 50px -32px rgba(52,199,89,.25);overflow:hidden}
.col h3{font-size:13px;font-family:var(--font-mono);font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin-bottom:24px}
.col.without h3{color:var(--muted)}
.col.with h3{color:#249a45}
.col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.col li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;font-weight:300;line-height:1.45;padding:11px;border-radius:6px;transition:background .25s,transform .25s}
.col.without li{color:var(--muted)}
.col.with li{color:var(--ink)}
.col.without li:hover{background:rgba(29,29,31,.04)}
.col.with li:hover{background:rgba(52,199,89,.08);transform:translateX(3px)}
.col li .mk{flex-shrink:0;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;margin-top:1px;font-size:13px;font-weight:600}
.without li .mk{background:var(--paper-warm);color:var(--muted);border:1px solid var(--hair-strong)}
.with li .mk{background:rgba(52,199,89,.16);color:#249a45;border:1px solid rgba(52,199,89,.35)}
.col li b{font-weight:600;color:var(--navy-ink)}
.compare-vs{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#249a45;color:#fff;font-family:var(--font-display);font-weight:800;font-size:16px;
  border:3px solid var(--paper);box-shadow:0 10px 30px -8px rgba(52,199,89,.4);
}
@media(max-width:760px){.compare{grid-template-columns:1fr;gap:40px}.compare-vs{left:50%;top:auto;bottom:calc(50% - 8px)}}

/* ---------- why we do this ---------- */
.why-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(30px,4.5vw,80px);align-items:start;
}
.why-grid h2{font-size:clamp(28px,3.4vw,46px);position:sticky;top:110px}
.why-lead{
  border-left:3px solid var(--crimson);
  padding-left:clamp(20px,2.4vw,32px);
}
.why-lead p{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(18px,1.9vw,24px);line-height:1.5;
  color:var(--navy-ink);letter-spacing:-.01em;
}
.why-lead p + p{margin-top:18px;font-family:var(--font-body);font-weight:300;font-size:clamp(15px,1.4vw,17px);line-height:1.7;color:var(--muted)}
.why-list{margin-top:clamp(32px,4vw,48px);display:grid;gap:0}
.why-item{padding:22px 0;border-top:1px solid var(--hair);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.why-item:last-child{border-bottom:1px solid var(--hair)}
.why-item .wk{
  width:8px;height:8px;margin-top:8px;border-radius:2px;
  background:var(--crimson);transform:rotate(45deg);
}
.why-item h3{font-size:16.5px;color:var(--navy-ink);letter-spacing:-.01em}
.why-item p{margin-top:8px;font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.7}
@media(max-width:900px){
  .why-grid{grid-template-columns:1fr;gap:28px}
  .why-grid h2{position:static}
}

/* ---------- team roster ---------- */
.team{background:var(--paper)}
.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.member{
  padding:0 clamp(18px,2.2vw,34px);position:relative;
  transition:transform .4s;
}
.member + .member{border-left:1px solid var(--hair)}
.member:first-child{padding-left:0}
.member:last-child{padding-right:0}
.member:hover{transform:translateY(-4px)}
.member .shot{
  width:clamp(96px,9vw,124px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;position:relative;
}
.member .shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1);transition:filter .45s,transform .6s;
}
.member:hover .shot img{filter:grayscale(0);transform:scale(1.04)}
/* ring sits above the photo so it reads as a frame, not a border */
.member .shot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--hair-strong);transition:border-color .35s;
}
.member:hover .shot::after{border-color:var(--crimson)}
.member .name{
  margin-top:22px;font-family:var(--font-display);font-weight:700;
  font-size:18px;color:var(--navy-ink);letter-spacing:-.01em;
}
.member .mrule{
  display:block;width:24px;height:2px;border-radius:2px;
  background:var(--crimson);margin:14px 0 16px;transition:width .4s;
}
.member:hover .mrule{width:48px}
.member p{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.7}
/* no hover on touch, so the portraits show in colour by default there */
@media(hover:none){
  .member .shot img{filter:none}
}
@media(max-width:900px){
  .roster{grid-template-columns:1fr 1fr;gap:40px 0}
  .member:nth-child(odd){border-left:none;padding-left:0}
}
@media(max-width:560px){
  .roster{grid-template-columns:1fr;gap:36px}
  .member{border-left:none!important;padding:0!important}
}

/* ---------- CTA band ---------- */
.cta-sec{padding:clamp(24px,5vh,56px) 0 clamp(64px,9vh,110px);background:var(--paper)}
.cta-band{
  position:relative;overflow:hidden;border-radius:24px;isolation:isolate;color:#fff;
  padding:clamp(44px,5.2vw,76px) clamp(28px,4.6vw,72px);
  background:
    radial-gradient(95% 130% at 88% -12%, rgba(255,255,255,.17), rgba(255,255,255,0) 58%),
    linear-gradient(112deg,#3a0b1a 0%,#6e1530 46%,var(--crimson) 78%,#a3244d 100%);
  box-shadow:0 40px 84px -52px rgba(134,26,60,.7);
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:clamp(26px,4vw,64px);
}
/* the signal motif: noise resolving into a clean rising line */
.cta-wave{
  position:absolute;z-index:-1;inset:0;width:100%;height:100%;
  pointer-events:none;
  /* held back behind the headline, strongest as it resolves toward the button */
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.5) 26%,#000 62%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.5) 26%,#000 62%);
}
.cta-wave svg{width:100%;height:100%;display:block}
.cta-wave .w-noise{fill:none;stroke:#ffffff;stroke-opacity:.16;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.cta-wave .w-echo{fill:none;stroke:#ffffff;stroke-opacity:.08;stroke-width:1.2;stroke-linejoin:round}
.cta-wave .w-dot{fill:#fff;fill-opacity:.9}
.cta-copy h2{
  color:#fff;font-size:clamp(25px,3.1vw,42px);font-weight:800;
  line-height:1.08;max-width:17ch;letter-spacing:-.02em;
}
/* rule under the headline, drawn in as the band reveals */
.cta-rule{
  margin-top:22px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.22);overflow:hidden;
}
.cta-rule i{display:block;height:100%;width:100%;background:rgba(255,255,255,.85);border-radius:2px}
.js .cta-rule i{width:0;transition:width 1.1s cubic-bezier(.35,0,.15,1) .25s}
.js .cta-band.in .cta-rule i{width:100%}
/* rule under the headline, drawn in as the band reveals */
.cta-copy.lined h2::after{
  content:"";display:block;height:2px;width:100%;margin-top:20px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.15));
}
.js .cta-copy.lined h2::after{width:0;transition:width 1.1s cubic-bezier(.35,0,.15,1) .25s}
.js .cta-band.in .cta-copy.lined h2::after{width:100%}
.cta-copy.lined h2{max-width:16ch}
.cta-copy.lined p{margin-top:18px}
@media(max-width:840px){.cta-copy.lined h2{max-width:none}}

.cta-copy p{
  margin-top:18px;color:rgba(255,255,255,.76);
  font-size:clamp(14.5px,1.3vw,17px);font-weight:300;line-height:1.6;max-width:44ch;
}
.cta-act{display:flex;flex-direction:column;align-items:center;gap:13px}
.cta-demo{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:#fff;color:var(--crimson);border:1px solid #fff;
  padding:16px 32px;border-radius:12px;
  font-family:var(--font-body);font-weight:600;font-size:15px;
  transition:transform .3s,box-shadow .3s,background .3s,color .3s;
}
.cta-demo:hover{transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(0,0,0,.45)}
.cta-demo .arr{transition:transform .3s}
.cta-demo:hover .arr{transform:translateX(4px)}
.cta-mail{
  font-size:13.5px;color:rgba(255,255,255,.72);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.3);transition:color .25s,text-decoration-color .25s;
}
.cta-mail:hover{color:#fff;text-decoration-color:#fff}
@media(max-width:840px){
  .cta-band{grid-template-columns:1fr;gap:28px}
  .cta-act{align-items:flex-start}
  .cta-copy h2,.cta-copy p{max-width:none}
}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:0 auto;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.6vw,18.5px);
  color:var(--navy-ink);letter-spacing:-.01em;line-height:1.35;
  transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--crimson)}
.faq summary:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;border-radius:4px}
/* plus / minus built from two rules so it needs no icon font */
.faq summary::before,
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;background:var(--crimson);
  border-radius:2px;transition:transform .3s ease,opacity .3s ease;
}
.faq summary::before{width:14px;height:2px;transform:translateY(-50%)}
.faq summary::after{width:2px;height:14px;right:12px;transform:translateY(-50%)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq details[open] summary{color:var(--crimson)}
.faq .fa-body{padding:0 44px 24px 0}
.faq .fa-body p{font-size:15px;color:var(--muted);font-weight:300;line-height:1.7}
.faq .fa-body p + p{margin-top:12px}
.js .faq details[open] .fa-body{animation:faOpen .32s ease}
@keyframes faOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- methodology carousel ---------- */
.car-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,4vw,56px);flex-wrap:wrap;margin-bottom:clamp(26px,3.4vh,40px);
}
.car-head h2{font-size:clamp(26px,3.2vw,42px)}
.car-bar{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.car-progress{flex:1;height:2px;background:var(--hair);border-radius:2px;overflow:hidden}
.car-progress i{display:block;height:100%;background:var(--crimson);border-radius:2px;transition:width .55s cubic-bezier(.22,.8,.2,1)}
.car-nav{display:flex;gap:10px;flex-shrink:0}
.car-arrow{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--hair-strong);
  background:var(--white);color:var(--navy-ink);cursor:pointer;
  display:grid;place-items:center;transition:all .3s;
}
.car-arrow svg{width:18px;height:18px}
.car-arrow:hover{background:var(--crimson);border-color:var(--crimson);color:#fff;transform:translateY(-2px)}
.car-arrow:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.car-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 93%,transparent);
  mask-image:linear-gradient(90deg,#000 93%,transparent);
}
.car-track{display:flex;gap:20px;transition:transform .6s cubic-bezier(.22,.8,.2,1);will-change:transform}
.car-card{
  flex:0 0 auto;width:330px;background:var(--white);
  border:1px solid var(--hair);border-radius:14px;
  padding:28px 26px;display:flex;flex-direction:column;
  transition:border-color .35s,transform .35s,box-shadow .35s;
}
.car-card:hover{
  border-color:rgba(134,26,60,.4);transform:translateY(-4px);
  box-shadow:0 24px 48px -32px rgba(29,29,31,.26);
}
.car-ic{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:rgba(134,26,60,.07);color:var(--crimson);
  transition:background .35s,color .35s;
}
.car-ic svg{width:22px;height:22px}
.car-card:hover .car-ic{background:var(--crimson);color:#fff}
.car-card h3{margin-top:34px;font-size:18px;color:var(--navy-ink);line-height:1.25;letter-spacing:-.01em}
.car-card p{margin-top:12px;font-size:14px;color:var(--muted);font-weight:300;line-height:1.65}
@media(max-width:820px){
  .car-card{width:280px;padding:24px 22px}
}

/* ---------- insight-to-decision chain ---------- */
.chain{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.6vw,40px);position:relative;text-align:center;
}
/* the connector runs between the three marks, not to the edges of the row */
.chain::before{
  content:"";position:absolute;top:22px;left:16.6%;right:16.6%;height:1px;
  background:linear-gradient(90deg,var(--hair-strong),rgba(134,26,60,.5));
}
.chain-step{position:relative;z-index:1}
.chain-ic{
  width:44px;height:44px;margin:0 auto;border-radius:50%;
  display:grid;place-items:center;color:var(--crimson);
  background:var(--paper);border:1px solid rgba(134,26,60,.28);
  transition:background .35s,color .35s,transform .35s,border-color .35s;
}
.chain-ic svg{width:22px;height:22px}
.chain-step:hover .chain-ic{
  background:var(--crimson);border-color:var(--crimson);color:#fff;transform:translateY(-3px);
}
.chain-step h3{margin-top:18px;font-size:18.5px;color:var(--navy-ink);letter-spacing:-.01em}
.chain-step p{
  margin:9px auto 0;max-width:30ch;font-size:14px;
  color:var(--muted);font-weight:300;line-height:1.6;
}
@media(max-width:760px){
  .chain{grid-template-columns:1fr;gap:30px}
  /* a vertical connector would run straight through the centred text, so it goes */
  .chain::before{display:none}
}

/* ---------- narrative prose block (methodology) ---------- */
/* section marker: the triangle mark from the brand set, not a button */
.prose-label{
  display:inline-flex;align-items:center;gap:13px;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  color:var(--crimson);letter-spacing:-.01em;
}
.prose-label .lm{width:24px;height:24px;flex-shrink:0;display:block}
.prose-label .lm svg{width:100%;height:100%;display:block}
.prose-label::after{
  content:"";width:clamp(40px,7vw,110px);height:1px;
  background:linear-gradient(90deg,rgba(134,26,60,.55),rgba(134,26,60,0));
}
/* the two blocks read as a pair, split by a hairline */
.prose-cols{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,4.4vw,68px);margin-top:clamp(26px,3.4vh,42px);
}
.prose-col{position:relative}
.prose-col + .prose-col{
  padding-left:clamp(30px,4.4vw,68px);
  border-left:1px solid var(--hair);
  margin-left:calc(clamp(30px,4.4vw,68px) * -1);
}
.prose-col .cap{
  display:block;width:26px;height:2px;border-radius:2px;
  background:var(--crimson);margin-bottom:18px;transition:width .4s;
}
.prose-col:hover .cap{width:54px}
.prose-col h2{font-size:clamp(21px,2.4vw,30px);line-height:1.15}
.prose-col p{
  margin-top:16px;color:var(--muted);font-weight:300;
  font-size:clamp(14.5px,1.35vw,16.5px);line-height:1.7;
  max-width:52ch;   /* keeps the measure readable in a wide column */
}
.prose-col .blist{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:2px;max-width:52ch}
.prose-col .blist li{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--hair);
  font-size:15px;font-weight:400;color:var(--ink);line-height:1.5;
}
.prose-col .blist li:last-child{border-bottom:none}
.prose-col .blist .bk{
  flex-shrink:0;width:6px;height:6px;margin-top:8px;border-radius:2px;
  background:var(--crimson);transform:rotate(45deg);
}
@media(max-width:860px){
  .prose-cols{grid-template-columns:1fr;gap:38px}
  .prose-col + .prose-col{padding-left:0;border-left:none;margin-left:0;padding-top:34px;border-top:1px solid var(--hair)}
}

/* ---------- "when it is used" band ---------- */
.used-band{
  background:rgba(134,26,60,.05);
  border-top:1px solid rgba(134,26,60,.10);
  border-bottom:1px solid rgba(134,26,60,.10);
  padding:clamp(34px,4vw,54px) 0;
}
.used{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(22px,3.4vw,50px);align-items:center;
}
.used-mark{width:clamp(74px,7vw,102px);flex-shrink:0}
.used-mark svg{width:100%;height:auto;display:block}
.used h2{font-size:clamp(21px,2.3vw,30px);color:var(--navy-ink)}
.used p{
  margin-top:12px;color:var(--muted);font-weight:300;
  font-size:clamp(14.5px,1.3vw,16px);line-height:1.7;max-width:82ch;
}
@media(max-width:700px){
  .used{grid-template-columns:1fr;gap:20px}
  .used-mark{width:70px}
}

/* ---------- closing section: copy left, CTA card right ---------- */
.close-grid{
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(30px,4.5vw,68px);align-items:center;
}
.close-copy h2{
  font-size:clamp(27px,3.4vw,44px);font-weight:800;
  line-height:1.08;max-width:15ch;color:var(--navy-ink);
}
.close-rule{
  margin-top:24px;height:2px;border-radius:2px;
  background:var(--hair);overflow:hidden;position:relative;
  /* held to the width of the copy so it lines up with the text above and below */
  max-width:26em;
}
.close-rule i{
  display:block;height:100%;width:100%;border-radius:2px;
  background:var(--crimson);position:relative;overflow:hidden;
}
.js .close-rule i{width:0;transition:width 1.1s cubic-bezier(.35,0,.15,1) .25s}
.js .close-copy.in .close-rule i{width:100%}
/* a light pulse travels the rule once it has drawn, echoing the signal motif */
.close-rule i::after{
  content:"";position:absolute;inset:0;width:38%;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));
}
.js .close-rule i::after{transform:translateX(-120%)}
.js .close-copy.in .close-rule i::after{animation:rulePulse 3.4s ease-in-out 1.5s infinite}
@keyframes rulePulse{
  0%{transform:translateX(-120%)}
  55%,100%{transform:translateX(320%)}
}
.close-copy p{
  margin-top:20px;max-width:44ch;color:var(--muted);
  font-weight:300;font-size:clamp(15px,1.35vw,17px);line-height:1.7;
}
/* the red card, stacked and centred when it sits beside the copy */
.cta-band.center{
  grid-template-columns:1fr;text-align:center;justify-items:center;
  /* the band's own row gap would stack on top of the button's margin here */
  gap:0;
  padding:clamp(28px,2.4vw,38px) clamp(24px,2.4vw,36px);
  max-width:430px;width:100%;justify-self:end;border-radius:20px;
  box-shadow:0 30px 62px -44px rgba(134,26,60,.7);
}
.cta-band.center .cta-copy h2{max-width:none;font-size:clamp(21px,2.1vw,29px);line-height:1.12}
.cta-band.center .cta-copy p{
  max-width:32ch;margin:12px auto 0;font-size:14.5px;line-height:1.55;
}
.cta-band.center .cta-act{margin-top:22px;align-items:center;gap:10px}
.cta-band.center .cta-demo{padding:13px 26px;font-size:14.5px}
.cta-band.center .cta-mail{font-size:12.5px}
/* the motif was drawn for a wide band; in this narrower card it is settled
   into the lower area so it reads as texture rather than noise behind the text */
.cta-band.center .cta-wave{
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 26%,rgba(0,0,0,.45) 60%,rgba(0,0,0,.8) 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 26%,rgba(0,0,0,.45) 60%,rgba(0,0,0,.8) 100%);
}
@media(max-width:900px){
  .close-grid{grid-template-columns:1fr}
  .close-copy h2{max-width:none}
  .cta-band.center{max-width:none;justify-self:stretch}
}

/* ---------- contact page ---------- */
.contact-head{padding-top:clamp(140px,18vh,200px);padding-bottom:clamp(30px,5vh,50px);text-align:center}
.contact-head h1{font-size:clamp(32px,4.6vw,58px);font-weight:800;max-width:26ch;margin:0 auto}
.contact-head h1 .em{color:var(--crimson);font-style:normal}
.contact-head p{margin:22px auto 0;max-width:52ch;color:var(--muted);font-size:clamp(15px,1.4vw,18px);font-weight:300;line-height:1.65}
.booking{padding-bottom:clamp(64px,9vh,110px)}
.booking-grid{display:grid;grid-template-columns:1.55fr .45fr;gap:clamp(20px,3vw,36px);align-items:start}
.cal-card{background:var(--white);border:1px solid var(--hair);border-radius:16px;padding:10px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(29,29,31,.2)}
.cal-card iframe{width:100%;height:640px;border:0;display:block;border-radius:10px}
.side-card{background:var(--paper-warm);border:1px solid var(--hair);border-radius:16px;padding:28px}
.side-card h2{font-size:18px;margin-bottom:6px}
.side-card p{font-size:14px;color:var(--muted);font-weight:300;line-height:1.6}
.side-sep{height:1px;background:var(--hair);margin:22px 0}
@media(max-width:980px){.booking-grid{grid-template-columns:1fr}.cal-card iframe{height:700px}}
@media(max-width:600px){.cal-card iframe{height:760px}}

/* person card + contact details */
.person-card{
  background:var(--white);border:1px solid var(--hair);border-radius:10px;
  padding:16px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;transition:border-color .3s;
}
.person-card:hover{border-color:rgba(134,26,60,.35)}
.person-card .avatar{width:52px;height:52px;border-radius:50%;flex-shrink:0;object-fit:cover;border:1px solid var(--hair)}
.person-card .pinfo{flex:1;min-width:110px}
.person-card .pinfo b{display:block;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--navy-ink);letter-spacing:-.01em}
.person-card .pinfo span{font-size:13px;color:var(--muted);font-weight:300}
.gt-contact{display:flex;flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.gt-contact a.mail{font-size:15px;color:var(--navy-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair-strong);transition:color .25s,text-decoration-color .25s}
.gt-contact a.mail:hover{color:var(--crimson);text-decoration-color:var(--crimson)}
.gt-linkedin{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--hair-strong);color:var(--muted);transition:all .3s;
}
.gt-linkedin:hover{background:var(--crimson);border-color:var(--crimson);color:#fff;transform:translateY(-2px)}
.gt-linkedin svg{width:17px;height:17px}

/* ---------- 404 ---------- */
.err{
  min-height:78vh;display:grid;place-items:center;text-align:center;
  padding:clamp(150px,20vh,210px) 0 clamp(70px,10vh,120px);
}
.err-code{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(88px,17vw,190px);line-height:.85;color:var(--crimson);
  opacity:.13;user-select:none;
}
/* the flatlined signal sits inside the numerals, tying the page to the
   noise-to-clarity motif used elsewhere on the site */
.err-sig{max-width:340px;margin:-14px auto 0}
.err-sig svg{width:100%;height:auto;display:block}
.err h1{margin-top:24px;font-size:clamp(26px,3.4vw,42px);font-weight:800}
.err p{
  margin:18px auto 0;max-width:46ch;color:var(--muted);
  font-weight:300;font-size:clamp(15px,1.4vw,17px);line-height:1.65;
}
.err-actions{margin-top:34px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.err-links{
  margin-top:46px;padding-top:26px;border-top:1px solid var(--hair);
  display:flex;gap:clamp(18px,3vw,34px);justify-content:center;flex-wrap:wrap;
  max-width:620px;margin-left:auto;margin-right:auto;
}
.err-links a{
  font-size:14px;color:var(--muted);font-weight:500;transition:color .25s;
}
.err-links a:hover{color:var(--crimson)}

/* ---------- legal documents ---------- */
.doc-hero{padding:clamp(130px,17vh,180px) var(--pad-x) clamp(36px,5vh,56px);background:var(--paper-warm);border-bottom:1px solid var(--hair)}
.doc-hero .inner{max-width:900px;margin:0 auto}
.doc-hero h1{font-size:clamp(32px,4.6vw,52px);font-weight:800}
.doc-hero .updated{margin-top:16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.doc-wrap{max-width:900px;margin:0 auto;padding:clamp(44px,6vh,72px) var(--pad-x) clamp(56px,8vh,100px)}
.doc .intro{font-size:16.5px;color:var(--ink);font-weight:300;line-height:1.75}
.doc .intro p{margin-bottom:18px}
.doc h2{font-size:clamp(20px,2.2vw,26px);margin:44px 0 8px;display:flex;align-items:baseline;gap:14px;scroll-margin-top:100px}
.doc h2 .hn{font-family:var(--font-mono);font-size:14px;color:var(--crimson);font-weight:500;flex-shrink:0}
.doc h3{font-weight:600;font-size:17px;margin:26px 0 6px}
.doc h3 .hsub{color:var(--crimson)}
.doc p{font-size:15.5px;color:var(--muted);font-weight:300;line-height:1.78;margin:14px 0}
.doc ul{margin:14px 0 14px 4px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.doc li{font-size:15.5px;color:var(--muted);font-weight:300;line-height:1.7;padding-left:6px}
.doc li::marker{color:var(--crimson)}
.doc a{color:var(--crimson);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.doc a:hover{color:var(--crimson-bright)}
.doc .divider{height:1px;background:var(--hair);margin:42px 0}
.doc .about-box{margin-top:46px;background:var(--white);border:1px solid var(--hair);border-radius:8px;padding:clamp(26px,3vw,36px)}
.doc .about-box h2{margin-top:0}
.doc .about-box p{color:var(--ink)}
.back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:34px;transition:color .25s}
.back:hover{color:var(--crimson)}
.back svg{width:14px;height:14px}

/* ---------- footer ---------- */
footer{background:var(--paper-warm);color:var(--ink);padding:48px var(--pad-x) 36px;border-top:1px solid var(--hair)}
.foot-wrap{max-width:1440px;margin:0 auto}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--hair)}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--navy-ink)}
.foot-brand img{height:30px}
.foot-social{display:flex;align-items:center;gap:12px}
.foot-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--hair-strong);color:var(--muted);transition:all .3s}
.foot-social a:hover{background:var(--crimson);border-color:var(--crimson);color:#fff;transform:translateY(-2px)}
.foot-social svg{width:17px;height:17px}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px}
.foot-meta{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.08em}
.foot-legal{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.foot-legal a{font-size:13px;color:var(--muted);transition:color .25s}
.foot-legal a:hover{color:var(--navy-ink)}
.foot-legal a.current{color:var(--crimson)}
@media(max-width:620px){.foot-bottom{flex-direction:column;align-items:flex-start;gap:18px}.foot-legal{gap:18px}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .client-track{animation:none}
  .js .close-copy.in .close-rule i::after{animation:none;opacity:0}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}