/* ============================================================
   CORELYNX DESIGN SYSTEM — tokens
   ============================================================ */
:root{
  --ink:#0B1524;            /* deep navy — primary dark surface + display type */
  --ink-2:#0F2036;
  --ink-3:#16294a;
  --cobalt:#2151F0;         /* electric cobalt — the only loud color, used precisely */
  --cobalt-deep:#1638B8;
  --cobalt-soft:#5B7DF6;
  --paper:#FBFAF7;
  --mist:#F5F3EE;           /* warm-cool neutral section tint */
  --tint:#EDF2FF;           /* cobalt tint for chips / highlights */
  --line:#E7E4DC;
  --line-dark:rgba(255,255,255,.13);
  --slate:#54617A;          /* secondary text on light */
  --slate-2:#7C88A0;
  --fog:rgba(233,238,248,.78); /* secondary text on dark */
  --good:#0FA573; --good-bg:#E7F6EF;
  --warn:#B07B10; --warn-bg:#FBF3DF;
  --risk:#C24A3A; --risk-bg:#FBEAE6;
  --display:'Geist',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --w:1180px;
  --ease:cubic-bezier(.22,.61,.2,1);
  --shadow:0 20px 50px -24px rgba(11,21,36,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{font-family:var(--body);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--cobalt);color:#fff}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:2px}

/* ---------- typography ---------- */
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalt);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--cobalt);flex:none}
.eyebrow.on-dark{color:var(--cobalt-soft)}
.eyebrow.on-dark::before{background:var(--cobalt-soft)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.022em;line-height:1.08;font-weight:700}
.d1{font-size:clamp(40px,5.6vw,72px);letter-spacing:-.032em}
.d2{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.028em;line-height:1.1}
.d3{font-size:clamp(22px,2.2vw,28px);line-height:1.22}
.lede{font-size:clamp(17.5px,1.5vw,20px);line-height:1.6;color:var(--slate);max-width:62ch}
.on-dark .lede,.lede.on-dark{color:var(--fog)}
.small{font-size:14.5px;color:var(--slate)}
.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2)}

/* ---------- layout ---------- */
.wrap{max-width:var(--w);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
section{padding:clamp(84px,9vw,140px) 0}
section.tight{padding:clamp(56px,6vw,88px) 0}
.dark{background:var(--ink);color:#fff}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.misty{background:var(--mist)}
.head-block{max-width:760px;margin-bottom:clamp(40px,5vw,72px)}
.head-block .eyebrow{margin-bottom:22px}
.head-block .lede{margin-top:20px}
.grid{display:grid;gap:0}
.hairline-top{border-top:1px solid var(--line)}

/* ---------- reveal motion ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.01em;padding:15px 26px;border-radius:6px;transition:all .25s var(--ease);white-space:nowrap}
.btn .arr{transition:transform .25s var(--ease);font-family:var(--body)}
.btn:hover .arr{transform:translateX(4px)}
.btn-solid{background:var(--cobalt);color:#fff}
.btn-solid:hover{background:var(--cobalt-deep);transform:translateY(-1px);box-shadow:0 12px 28px -12px rgba(33,81,240,.55)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:var(--paper)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.dark .btn-ghost{border-color:var(--line-dark);color:#fff;background:transparent}
.dark .btn-ghost:hover{border-color:#fff}
.btn-text{padding:0;font-weight:600;color:var(--cobalt);border-radius:0}
.btn-text:hover .arr{transform:translateX(4px)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .35s var(--ease)}
header .bar{display:flex;align-items:center;justify-content:space-between;height:76px;transition:height .35s var(--ease)}
header.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header.scrolled .bar{height:62px}
header.on-hero{color:#fff}
header.on-hero.scrolled{color:var(--ink)}
.logo{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.045em;display:flex;align-items:center;gap:10px}
.logo .mark{width:30px;height:30px;flex:none;overflow:visible}
.logo .rg{stroke:currentColor;stroke-width:8;fill:none;stroke-linecap:round;stroke-dasharray:110;stroke-dashoffset:110;animation:ringdraw .65s var(--ease) .15s forwards}
.logo .dot{fill:var(--cobalt);transform-origin:center;transform-box:fill-box;transform:scale(0);animation:dotpop .4s cubic-bezier(.34,1.56,.64,1) forwards}
.logo .da{animation-delay:.55s}.logo .db{animation-delay:.7s}
.logo .wm-lynx{color:var(--cobalt)}
header.on-hero:not(.scrolled) .logo .dot{fill:#4E74FF}
header.on-hero:not(.scrolled) .logo .wm-lynx{color:#5B7DF6}
footer .logo .dot{fill:#4E74FF}
footer .logo .wm-lynx{color:#5B7DF6}
@keyframes ringdraw{to{stroke-dashoffset:0}}
@keyframes dotpop{to{transform:scale(1)}}
nav.main{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500}
nav.main a{opacity:.82;transition:opacity .2s;position:relative;padding:6px 0}
nav.main a:hover,nav.main a.active{opacity:1}
nav.main a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cobalt)}
.nav-cta{margin-left:8px}
.nav-cta .btn{padding:10px 18px;font-size:14px}
.dropdown{position:relative}
.dropdown>a{display:inline-flex;align-items:center;gap:6px}
.dropdown .panel{position:absolute;top:calc(100% + 14px);left:-20px;min-width:340px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .25s var(--ease)}
.dropdown:hover .panel,.dropdown:focus-within .panel{opacity:1;visibility:visible;transform:none}
.dropdown .panel a{display:block;padding:11px 14px;border-radius:7px;opacity:1}
.dropdown .panel a:hover{background:var(--mist)}
.dropdown .panel a .t{font-weight:600;font-size:14.5px;display:block}
.dropdown .panel a .s{font-size:13px;color:var(--slate);display:block;margin-top:2px}
#sol-panel{display:grid;grid-template-columns:1fr 1fr;min-width:620px;gap:2px 10px}
#sol-panel a:first-child{grid-column:1/-1;border-bottom:1px solid var(--line);border-radius:7px 7px 0 0;margin-bottom:4px;padding-bottom:13px}
.burger{display:none;width:40px;height:40px;position:relative;z-index:210}
.burger span{position:absolute;left:9px;right:9px;height:2px;background:currentColor;transition:all .3s var(--ease)}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:26px}
.burger.open span:nth-child(1){top:20px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:20px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;background:var(--ink);color:#fff;z-index:200;display:flex;flex-direction:column;justify-content:center;padding:0 32px;opacity:0;visibility:hidden;transition:all .35s var(--ease)}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{font-family:var(--display);font-size:clamp(26px,7vw,34px);font-weight:700;padding:10px 0;letter-spacing:-.02em;opacity:0;transform:translateY(14px);transition:all .45s var(--ease)}
.mobile-menu.open a{opacity:1;transform:none}
.mobile-menu .sub{font-size:16px;font-family:var(--body);font-weight:500;color:var(--fog);padding:6px 0}
@media(max-width:980px){nav.main{display:none}.burger{display:block}}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:none;background:var(--ink);border-radius:12px;padding:10px;box-shadow:0 20px 44px -14px rgba(11,21,36,.5);align-items:center;gap:8px}
.sticky-cta .btn{flex:1;justify-content:center;padding:13px 10px;font-size:14.5px}
.sticky-cta .alt{flex:none;width:48px;height:48px;border:1px solid var(--line-dark);border-radius:9px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
@media(max-width:760px){.sticky-cta.show{display:flex}}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:0}
.hero .inner{padding:clamp(140px,17vh,200px) 0 clamp(70px,8vw,110px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero .lede{margin:26px 0 38px}
.hero-notes{margin-top:56px;display:flex;gap:clamp(20px,3.5vw,48px);flex-wrap:wrap;border-top:1px solid var(--line-dark);padding-top:26px}
.hero-notes div{max-width:200px}
.hero-notes .k{font-family:var(--display);font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.hero-notes .v{font-size:13.5px;color:var(--fog);margin-top:4px;line-height:1.5}
.sysmap{width:100%;height:auto}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.sysmap-holder{max-width:560px}}

/* grain / glow discipline: one radial, one grid texture, nothing else */
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(1100px 520px at 82% 8%,rgba(33,81,240,.16),transparent 60%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(900px 600px at 70% 20%,#000,transparent 75%);pointer-events:none}
.hero .wrap{position:relative;z-index:2}

/* ---------- trust strip ---------- */
.trust{border-top:1px solid var(--line-dark);position:relative;z-index:2}
.trust .row{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-dark)}
.trust .cell{background:var(--ink);padding:26px 22px}
.trust .cell .t{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--cobalt-soft);margin-bottom:8px}
.trust .cell .d{font-size:13.5px;line-height:1.5;color:var(--fog)}
@media(max-width:980px){.trust .row{grid-template-columns:repeat(2,1fr)}.trust .cell:last-child{grid-column:1/-1}}

/* ---------- problem gallery ---------- */
.pg-scroller{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(330px,420px);gap:18px;overflow-x:auto;padding:6px 6px 26px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.pg-scroller::-webkit-scrollbar{height:5px}
.pg-scroller::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.p-card{scroll-snap-align:start;border:1px solid var(--line);border-radius:12px;background:#fff;padding:30px 28px;display:flex;flex-direction:column;transition:all .3s var(--ease)}
.p-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#D3DAE8}
.p-card .idx{font-family:var(--mono);font-size:11.5px;color:var(--slate-2);letter-spacing:.12em}
.p-card h3{font-size:21px;margin:16px 0 14px;line-height:1.25}
.p-card dl{display:grid;gap:12px;font-size:14.5px;flex:1}
.p-card dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);margin-bottom:3px}
.p-card dd{color:var(--slate);line-height:1.55}
.p-card .route{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--cobalt);display:flex;justify-content:space-between;align-items:center}

/* ---------- capability tiles ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line);gap:1px}
.cap{background:#fff;padding:clamp(28px,3.4vw,44px);transition:background .3s var(--ease);position:relative;display:block}
.cap:hover{background:var(--mist)}
.cap .num{font-family:var(--mono);font-size:11.5px;color:var(--slate-2);letter-spacing:.12em}
.cap h3{font-size:clamp(19px,1.8vw,23px);margin:14px 0 12px}
.cap p{font-size:15px;color:var(--slate);max-width:52ch}
.cap .sig{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--tint);color:var(--cobalt-deep);padding:5px 10px;border-radius:4px}
.cap .go{position:absolute;top:26px;right:26px;font-size:18px;color:var(--slate-2);transition:all .25s var(--ease)}
.cap:hover .go{color:var(--cobalt);transform:translate(3px,-3px)}
@media(max-width:820px){.cap-grid{grid-template-columns:1fr}}

/* ---------- sticky method ---------- */
.method{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,90px)}
.method .pin{position:sticky;top:120px;align-self:start}
.method .pin .big-idx{font-family:var(--display);font-weight:800;font-size:clamp(90px,11vw,150px);line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.28);transition:all .4s var(--ease)}
.method .pin .cur-title{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);font-weight:700;margin-top:18px;min-height:2.2em}
.m-step{border-top:1px solid var(--line-dark);padding:clamp(30px,3.6vw,46px) 0;opacity:.38;transition:opacity .5s var(--ease)}
.m-step.lit{opacity:1}
.m-step h3{font-size:21px;display:flex;gap:16px;align-items:baseline}
.m-step h3 .n{font-family:var(--mono);font-size:12px;color:var(--cobalt-soft);font-weight:500}
.m-step p{color:var(--fog);font-size:15.5px;margin-top:12px;max-width:56ch}
.m-step .io{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.m-step .io div{font-size:13px;line-height:1.5;color:var(--fog)}
.m-step .io b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt-soft);font-weight:500;margin-bottom:6px}
@media(max-width:880px){.method{grid-template-columns:1fr}.method .pin{position:static}.m-step{opacity:1}.method .pin .cur-title{display:none}}
@media(max-width:620px){.m-step .io{grid-template-columns:1fr}}

/* ---------- evaluation / proof ---------- */
.eval-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.eval{background:#fff;padding:30px 28px}
.eval .n{font-family:var(--mono);font-size:11px;color:var(--cobalt);letter-spacing:.12em}
.eval h4{font-size:17.5px;margin:12px 0 10px}
.eval p{font-size:14px;color:var(--slate);line-height:1.6}
@media(max-width:880px){.eval-grid{grid-template-columns:1fr}}

/* ---------- assessment engine ---------- */
.tool-shell{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 30px 70px -40px rgba(11,21,36,.25)}
.tool-head{padding:clamp(26px,3vw,38px) clamp(24px,3.4vw,44px);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap}
.tool-head h3{font-size:clamp(19px,2vw,24px)}
.tool-head p{font-size:14.5px;color:var(--slate);margin-top:8px;max-width:58ch}
.tool-meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2);text-align:right;line-height:2}
.tool-body{padding:clamp(24px,3.4vw,44px)}
.dim{padding:20px 0;border-bottom:1px solid var(--line)}
.dim:last-of-type{border-bottom:none}
.dim .top{display:flex;justify-content:space-between;gap:18px;align-items:baseline;margin-bottom:6px}
.dim .name{font-weight:600;font-family:var(--display);font-size:16.5px;letter-spacing:-.01em}
.dim .val{font-family:var(--mono);font-size:12.5px;color:var(--cobalt);min-width:110px;text-align:right}
.dim .desc{font-size:13.5px;color:var(--slate);max-width:60ch;margin-bottom:14px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:linear-gradient(to right,var(--cobalt) var(--fill,50%),var(--line) var(--fill,50%));outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--cobalt);box-shadow:0 2px 8px rgba(11,21,36,.2);cursor:grab;transition:transform .15s}
input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--cobalt);box-shadow:0 2px 8px rgba(11,21,36,.2);cursor:grab}
.scale-hints{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2);margin-top:8px}
.tool-actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.tool-result{display:none;border-top:1px solid var(--line);background:var(--mist)}
.tool-result.show{display:block}
.tr-inner{padding:clamp(26px,3.4vw,44px);display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,56px);align-items:start}
.score-ring{width:150px;height:150px;position:relative;flex:none}
.score-ring svg{transform:rotate(-90deg)}
.score-ring .txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-ring .n{font-family:var(--display);font-weight:800;font-size:38px;letter-spacing:-.03em}
.score-ring .d{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2)}
.band-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:4px;margin-bottom:12px}
.tr-bars{margin:20px 0 6px;display:grid;gap:10px}
.tr-bar{display:grid;grid-template-columns:190px 1fr auto;gap:14px;align-items:center;font-size:13px}
.tr-bar .track{height:6px;background:var(--line);border-radius:4px;overflow:hidden}
.tr-bar .fill{height:100%;background:var(--cobalt);border-radius:4px;width:0;transition:width 1s var(--ease)}
.tr-bar .pct{font-family:var(--mono);font-size:11px;color:var(--slate)}
.tr-note{font-size:14.5px;color:var(--slate);max-width:64ch;line-height:1.6}
.gate{margin-top:22px;padding:20px 22px;border:1px dashed #C9D4EA;border-radius:10px;background:#fff;display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}
.gate p{font-size:14px;color:var(--slate);max-width:46ch}
@media(max-width:760px){.tr-inner{grid-template-columns:1fr}.tr-bar{grid-template-columns:1fr}.tr-bar .pct{display:none}.tool-meta{text-align:left}}

/* ---------- results / case cards ---------- */
.case{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;margin-bottom:22px}
.case .hd{padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,40px);display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer}
.case .hd h3{font-size:clamp(18px,1.9vw,22px);line-height:1.3}
.case .hd .sector{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--cobalt);margin-bottom:8px}
.case .tog{width:40px;height:40px;flex:none;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease);font-size:18px}
.case.open .tog{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
.ind-block.open .case-tog{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
.case .bd{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.case .bd-in{padding:0 clamp(24px,3.4vw,40px) clamp(26px,3vw,38px);border-top:1px solid var(--line)}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 40px;padding-top:26px}
.case-grid .f b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);font-weight:500;margin-bottom:7px}
.case-grid .f p,.case-grid .f li{font-size:14.5px;color:var(--slate);line-height:1.6}
.case-grid .f ul{padding-left:18px}
.outcome-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.outcome-chips .chip{background:var(--good-bg);color:var(--good)}
@media(max-width:720px){.case-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{width:100%;text-align:left;padding:24px 4px;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--display);font-weight:600;font-size:17.5px;letter-spacing:-.012em}
.faq-q .pm{flex:none;font-size:20px;color:var(--slate-2);transition:transform .3s var(--ease);font-weight:400}
.faq-item.open .pm{transform:rotate(45deg);color:var(--cobalt)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a p{padding:0 4px 24px;color:var(--slate);font-size:15.5px;max-width:70ch}
.dark .faq-item{border-color:var(--line-dark)}
.dark .faq-a p{color:var(--fog)}

/* ---------- practice page ---------- */
.page-hero{background:var(--ink);color:#fff;padding:clamp(140px,16vh,190px) 0 clamp(60px,7vw,96px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 88% 0%,rgba(33,81,240,.18),transparent 62%)}
.page-hero .wrap{position:relative}
.page-hero .crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog);margin-bottom:26px;display:flex;gap:10px;flex-wrap:wrap}
.page-hero .crumbs a:hover{color:#fff}
.page-hero h1{max-width:17ch}
.page-hero .lede{margin-top:24px}
.page-hero .cta-row{margin-top:38px}
.answer-block{border-left:3px solid var(--cobalt);background:var(--tint);border-radius:0 12px 12px 0;padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,38px);max-width:820px}
.answer-block .mono-label{color:var(--cobalt-deep);margin-bottom:10px;display:block}
.answer-block p{font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vw,64px)}
@media(max-width:820px){.two-col{grid-template-columns:1fr}}
.list-cards{display:grid;gap:12px}
.list-cards li{list-style:none;border:1px solid var(--line);border-radius:10px;background:#fff;padding:16px 20px;font-size:15px;display:flex;gap:14px;align-items:flex-start;line-height:1.5}
.list-cards li .tick{flex:none;width:18px;height:18px;margin-top:2px;color:var(--cobalt)}
.sym-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sym{background:#fff;padding:22px 24px;font-size:15px;color:var(--ink-2);display:flex;gap:14px;line-height:1.5}
.sym .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--risk);margin-top:9px}
@media(max-width:720px){.sym-grid{grid-template-columns:1fr}}
.phases{counter-reset:ph}
.phase{display:grid;grid-template-columns:120px 1fr;gap:clamp(20px,3vw,44px);padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--line)}
.phase:last-child{border-bottom:1px solid var(--line)}
.phase .pn{font-family:var(--display);font-weight:800;font-size:15px;color:var(--cobalt);letter-spacing:.02em}
.phase .pn::before{counter-increment:ph;content:"Phase 0" counter(ph);display:block;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);margin-bottom:6px}
.phase h4{font-size:19px;margin-bottom:10px}
.phase p{font-size:15px;color:var(--slate);max-width:64ch}
.phase ul{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;padding:0}
.phase li{list-style:none}
@media(max-width:680px){.phase{grid-template-columns:1fr;gap:10px}}
.deliv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.deliv{border:1px solid var(--line);border-left:3px solid var(--cobalt);border-radius:8px;background:#fff;padding:16px 20px;font-size:15px;font-weight:500}
.deliv span{display:block;font-weight:400;font-size:13.5px;color:var(--slate);margin-top:4px}
@media(max-width:680px){.deliv-grid{grid-template-columns:1fr}}
.persist{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
.persist .it .n{font-family:var(--mono);font-size:11px;color:var(--cobalt-soft);letter-spacing:.13em;margin-bottom:10px}
.persist .it h4{font-size:17px;margin-bottom:8px;color:#fff}
.persist .it p{font-size:14px;color:var(--fog);line-height:1.6}
.persist.on-light .it{background:#fff;border-color:var(--line)}
.persist.on-light .it h4{color:var(--ink)}
.persist.on-light .it p{color:var(--slate)}
.persist.on-light .it .n{color:var(--cobalt)}
a.eval{color:inherit}
a.eval:hover{border-color:#CBD6EC}
.linkish{background:none;border:0;color:var(--cobalt);cursor:pointer;font:inherit;padding:0;text-decoration:underline;text-underline-offset:3px}
.foot-brief{margin-top:22px;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px 18px;max-width:340px}
.foot-brief b{font-family:var(--display);font-size:14px;color:#fff}
.foot-brief p{font-size:12.5px;margin:6px 0 12px!important;color:rgba(233,238,248,.6)!important}
.foot-brief form{display:flex;gap:8px}
.foot-brief input{flex:1;min-width:0;padding:9px 12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.06);color:#fff;font:500 13px 'Instrument Sans'}
.foot-brief input::placeholder{color:rgba(233,238,248,.4)}
.foot-brief button{padding:9px 14px;border:0;border-radius:8px;background:var(--cobalt);color:#fff;font:600 12.5px 'Instrument Sans';cursor:pointer}
.foot-brief .brief-foot{font-size:11px!important;margin:12px 0 0!important;color:rgba(233,238,248,.42)!important;line-height:1.5!important;font-style:italic}
@media(max-width:820px){.persist{grid-template-columns:1fr}}
.related-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:26px 26px;transition:all .3s var(--ease);display:block}
.rel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rel-card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);margin-bottom:12px}
.rel-card h4{font-size:16.5px;line-height:1.35;margin-bottom:10px}
.rel-card p{font-size:13.5px;color:var(--slate)}
@media(max-width:820px){.related-row{grid-template-columns:1fr}}

/* ---------- insights ---------- */
.ins-card{border-top:1px solid var(--line);padding:clamp(26px,3vw,40px) 0;display:grid;grid-template-columns:200px 1fr auto;gap:clamp(18px,3vw,44px);align-items:start;cursor:pointer;transition:background .25s}
.ins-card:hover{background:var(--mist)}
.ins-card:last-child{border-bottom:1px solid var(--line)}
.ins-card .meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);line-height:2}
.ins-card .meta .cat{color:var(--cobalt)}
.ins-card h3{font-size:clamp(18px,2vw,23px);line-height:1.3;max-width:24ch}
.ins-card .core-q{font-size:14.5px;color:var(--slate);margin-top:10px;max-width:66ch}
.ins-card .exp{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.ins-card .exp-in{padding-top:18px;font-size:15px;color:var(--ink-2);max-width:72ch}
.ins-card .exp-in p{margin-bottom:12px;color:var(--slate)}
.ins-card .exp-in b{color:var(--ink)}
@media(max-width:780px){.ins-card{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,90px)}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
.form{display:grid;gap:16px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.f-row{grid-template-columns:1fr}}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:13px 15px;font:inherit;font-size:15px;background:#fff;color:var(--ink);transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(33,81,240,.12)}
.expect{border:1px solid var(--line);border-radius:14px;background:var(--mist);padding:clamp(24px,3vw,36px)}
.expect ol{padding-left:0;counter-reset:ex;display:grid;gap:18px;margin-top:20px}
.expect li{list-style:none;display:grid;grid-template-columns:34px 1fr;gap:14px;font-size:15px;color:var(--slate);line-height:1.55}
.expect li::before{counter-increment:ex;content:counter(ex);font-family:var(--mono);font-size:12px;color:var(--cobalt);border:1px solid #C9D4EA;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff}
.contact-lines{margin-top:34px;display:grid;gap:2px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--line)}
.contact-lines a,.contact-lines div{background:#fff;padding:18px 22px;display:flex;justify-content:space-between;font-size:15px;transition:background .2s}
.contact-lines a:hover{background:var(--mist)}
.contact-lines .lb{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-2);align-self:center}

/* ---------- split CTA close ---------- */
.split-cta{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:16px;overflow:hidden}
.split-cta>div{background:var(--ink-2);padding:clamp(34px,4.4vw,60px)}
.split-cta h3{font-size:clamp(21px,2.4vw,28px);margin-bottom:14px}
.split-cta p{color:var(--fog);font-size:15.5px;max-width:44ch;margin-bottom:28px}
@media(max-width:780px){.split-cta{grid-template-columns:1fr}}

/* ---------- about ---------- */
.belief{display:grid;grid-template-columns:64px 1fr;gap:clamp(18px,3vw,36px);padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--line)}
.belief:last-child{border-bottom:1px solid var(--line)}
.belief .bi{font-family:var(--mono);font-size:12px;color:var(--cobalt);padding-top:6px}
.belief h4{font-size:19px;margin-bottom:8px}
.belief p{color:var(--slate);font-size:15px;max-width:66ch}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--line);margin-top:14px}
.tl{padding:26px 22px 0 0;position:relative}
.tl::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--cobalt)}
.tl .w{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);margin-bottom:8px}
.tl h4{font-size:16px;margin-bottom:8px}
.tl p{font-size:13.5px;color:var(--slate);line-height:1.55}
@media(max-width:820px){.timeline{grid-template-columns:1fr;border-top:none;border-left:2px solid var(--line);margin-left:5px}.tl{padding:0 0 26px 24px}.tl::before{top:4px;left:-6px}}

/* ---------- industries ---------- */
.ind-block{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:18px;overflow:hidden}
.ind-block .hd{padding:26px clamp(24px,3vw,36px);display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:18px}
.ind-block .hd h3{font-size:clamp(18px,2vw,22px)}
.ind-block .hd .mono-label{margin-top:6px}
.ind-bd{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.ind-bd-in{padding:0 clamp(24px,3vw,36px) 30px;border-top:1px solid var(--line)}
.ind-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 40px;padding-top:24px}
.ind-cols b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);font-weight:500;margin-bottom:8px}
.ind-cols ul{padding-left:18px}
.ind-cols li{font-size:14.5px;color:var(--slate);margin-bottom:6px;line-height:1.5}
@media(max-width:720px){.ind-cols{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#fff;padding:clamp(64px,7vw,96px) 0 40px}
.foot-grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.2fr));gap:clamp(30px,4vw,60px);padding-bottom:56px;border-bottom:1px solid var(--line-dark)}
.foot-grid p{color:var(--fog);font-size:14px;max-width:34ch;margin-top:16px}
.foot-col b{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--cobalt-soft);font-weight:500;display:block;margin-bottom:16px}
.foot-col a{display:block;font-size:14.5px;color:var(--fog);padding:5px 0;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:32px;font-size:13px;color:var(--slate-2)}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* hub tiles reused */
.hub-route{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.hub-route a{border:1px solid var(--line);border-radius:10px;padding:18px 22px;background:#fff;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:14px;transition:all .25s var(--ease)}
.hub-route a span.q{font-family:var(--body);font-weight:500;color:var(--ink-2)}
.hub-route a span.to{color:var(--cobalt);flex:none;font-size:17px;transition:transform .25s}
.hub-route a:hover{border-color:var(--cobalt);transform:translateY(-2px)}
.hub-route a:hover .to{transform:translateX(3px)}
@media(max-width:720px){.hub-route{grid-template-columns:1fr}}
.tool-index{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ti-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:30px;display:flex;flex-direction:column;transition:all .3s var(--ease)}
.ti-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ti-card .mono-label{margin-bottom:14px}
.ti-card h3{font-size:20px;margin-bottom:10px}
.ti-card p{font-size:14.5px;color:var(--slate);flex:1}
.ti-card .facts{display:flex;gap:20px;margin:20px 0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--slate-2);text-transform:uppercase}
@media(max-width:760px){.tool-index{grid-template-columns:1fr}}
.quicktest .qq{padding:18px 0;border-bottom:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.quicktest .qq p{font-size:15.5px;max-width:52ch}
.qopt{display:flex;gap:8px}
.qopt button{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-dark);border-radius:6px;padding:9px 15px;color:var(--fog);transition:all .2s}
.qopt button:hover{border-color:#fff;color:#fff}
.qopt button.sel{background:var(--cobalt);border-color:var(--cobalt);color:#fff}

/* ---------- market signals strip ---------- */
.signals{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:34px}
.signal{background:#fff;padding:22px 22px}
.signal .big{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;color:var(--cobalt-deep)}
.signal .lb{font-size:13px;color:var(--slate);margin-top:6px;line-height:1.5}
.signals-src{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-top:12px}
@media(max-width:880px){.signals{grid-template-columns:repeat(2,1fr)}}

/* ---------- offer tiers table ---------- */
.offers{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.offer-row{display:grid;grid-template-columns:minmax(200px,2.4fr) minmax(140px,1.4fr) minmax(120px,1.2fr) 2.6fr;gap:20px;padding:22px clamp(20px,3vw,32px);border-bottom:1px solid var(--line);align-items:center}
.offer-row:last-child{border-bottom:none}
.offer-row.head{background:var(--mist);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);padding:14px clamp(20px,3vw,32px)}
.offer-row .on{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.offer-row .on span{display:block;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);margin-bottom:6px}
.offer-row .price{font-family:var(--mono);font-size:13.5px;color:var(--cobalt-deep);font-weight:600}
.offer-row .mode{font-size:13px;color:var(--slate)}
.offer-row .desc{font-size:13.5px;color:var(--slate);line-height:1.55}
@media(max-width:860px){.offer-row{grid-template-columns:1fr 1fr;gap:10px 20px}.offer-row .desc{grid-column:1/-1}.offer-row.head{display:none}}

/* ---------- engagement layer stack ---------- */
.stack{display:grid;gap:14px;position:relative;max-width:880px}
.layer{border:1px solid var(--line);border-radius:14px;background:#fff;padding:clamp(22px,3vw,32px);display:grid;grid-template-columns:110px 1fr auto;gap:clamp(16px,3vw,36px);align-items:center;transition:all .3s var(--ease);position:relative}
.layer:hover{transform:translateX(6px);border-color:var(--cobalt);box-shadow:var(--shadow)}
.layer .ln{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt)}
.layer .ln b{display:block;font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-top:4px}
.layer h4{font-size:18.5px;margin-bottom:6px}
.layer p{font-size:14px;color:var(--slate);max-width:56ch}
.layer .lp{text-align:right}
.layer .lp .amt{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--cobalt-deep);white-space:nowrap}
.layer .lp .dur{font-size:12px;color:var(--slate-2);margin-top:4px;white-space:nowrap}
.stack .asc{position:absolute;left:-26px;top:8%;bottom:8%;width:2px;background:linear-gradient(var(--line),var(--cobalt));display:flex;align-items:flex-end}
.stack .asc::after{content:"↑";position:absolute;top:-22px;left:-8px;color:var(--cobalt);font-size:16px}
@media(max-width:760px){.layer{grid-template-columns:1fr}.layer .lp{text-align:left}.stack .asc{display:none}}

/* ---------- calculator result compare bars ---------- */
.cmp{display:grid;gap:14px;margin:22px 0 8px}
.cmp .row{display:grid;grid-template-columns:170px 1fr auto;gap:14px;align-items:center;font-size:13.5px}
.cmp .track{height:26px;background:var(--line);border-radius:6px;overflow:hidden}
.cmp .fillbar{height:100%;border-radius:6px;width:0;transition:width 1s var(--ease);display:flex;align-items:center;padding-left:10px;font-family:var(--mono);font-size:10.5px;color:#fff;letter-spacing:.05em}
.cmp .amtl{font-family:var(--mono);font-size:12px;color:var(--slate);white-space:nowrap}
@media(max-width:640px){.cmp .row{grid-template-columns:1fr}.cmp .amtl{display:none}}


/* ---------- page-hero visualization column ---------- */
.hero-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.ph-viz{width:100%;max-width:520px;justify-self:end}
.ph-viz svg{width:100%;height:auto}
@media(max-width:880px){.hero-cols{grid-template-columns:1fr}.ph-viz{max-width:440px;justify-self:start;margin-top:6px}}
@media(max-width:1220px){nav.main{gap:20px;font-size:14px}}
/* viz animation primitives */
@keyframes vdraw{to{stroke-dashoffset:0}}
@keyframes vrise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes vwide{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes vblink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes vsweep{from{transform:rotate(-118deg)}to{transform:rotate(32deg)}}
.viz .draw{stroke-dasharray:700;stroke-dashoffset:700;animation:vdraw 2.4s var(--ease) .5s forwards}
.viz .rise{transform:scaleY(0);transform-origin:center bottom;transform-box:fill-box;animation:vrise 1s var(--ease) forwards}
.viz .wide{transform:scaleX(0);transform-origin:left center;transform-box:fill-box;animation:vwide 1.1s var(--ease) forwards}
.viz .fade{opacity:0;animation:vfade .9s var(--ease) forwards}
.viz .blink{animation:vblink 2.6s ease-in-out infinite}
@keyframes vspin{to{transform:rotate(360deg)}}
.viz .spin{transform-origin:center;transform-box:fill-box;animation:vspin 16s linear infinite}
.viz .needle{transform-origin:150px 210px;transform:rotate(-118deg);animation:vsweep 1.6s var(--ease) .6s forwards}
.viz text{font-family:var(--mono)}

/* ---------- portfolio ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:960px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pf-grid{grid-template-columns:1fr}}
.pf-card{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:all .3s var(--ease);text-align:left;cursor:pointer;font:inherit;color:inherit;padding:0}
.pf-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#CBD6EC}
.pf-shot{background:linear-gradient(150deg,var(--ink) 0%,var(--ink-3) 100%);padding:22px 22px 0;position:relative;overflow:hidden}
.pf-shot::after{content:"";position:absolute;inset:0;background:radial-gradient(340px 160px at 80% -10%,rgba(33,81,240,.32),transparent 65%);pointer-events:none}
.pf-win{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);border-bottom:none;border-radius:10px 10px 0 0;padding:12px 14px 0;min-height:132px;position:relative;z-index:2}
.pf-dots{display:flex;gap:5px;margin-bottom:11px}
.pf-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.pf-dots i:first-child{background:var(--cobalt-soft)}
.pf-ui{display:grid;gap:7px}
.pf-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.pf-pill{height:8px;border-radius:4px;background:rgba(255,255,255,.16)}
.pf-pill.c{background:var(--cobalt)}
.pf-pill.s{background:rgba(91,125,246,.55)}
.pf-sq{width:8px;height:8px;border-radius:3px;background:rgba(255,255,255,.2)}
.pf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pf-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:8px 9px}
.pf-stat b{display:block;height:9px;width:60%;border-radius:4px;background:var(--cobalt-soft);margin-bottom:6px}
.pf-stat i{display:block;height:5px;width:85%;border-radius:3px;background:rgba(255,255,255,.16)}
.pf-bars{display:flex;align-items:flex-end;gap:6px;height:44px;padding:2px 2px 0}
.pf-bars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(to top,rgba(33,81,240,.9),rgba(91,125,246,.55))}
.pf-chat{display:grid;gap:6px}
.pf-msg{display:flex;gap:7px;align-items:flex-start}
.pf-av{width:14px;height:14px;border-radius:4px;background:var(--cobalt);flex:none}
.pf-av.h{background:rgba(255,255,255,.24);border-radius:50%}
.pf-bub{background:rgba(255,255,255,.08);border-radius:6px;height:16px;flex:1}
.pf-bub.w{max-width:70%}
.pf-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.pf-body .mono-label{margin-bottom:9px}
.pf-body h4{font-size:16.5px;margin-bottom:8px}
.pf-body p{font-size:13.5px;color:var(--slate);line-height:1.55;flex:1}
.pf-body .sig{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}

/* ---------- LLM architecture ---------- */
.llm-wrap{border:1px solid var(--line-dark);border-radius:16px;background:var(--ink-2);padding:clamp(18px,3vw,34px);overflow:hidden}
.llm-wrap svg{width:100%;height:auto}
.llm-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fog)}
.llm-legend span{display:flex;align-items:center;gap:8px}
.llm-legend i{width:9px;height:9px;border-radius:50%}
.model-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.model-chips .chip{background:rgba(33,81,240,.16);color:#B9C8FA;border:1px solid rgba(91,125,246,.3)}
.model-chips .chip.pv{background:rgba(224,164,80,.13);color:#EFD3A6;border-color:rgba(224,164,80,.3)}

/* ---------- blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}}
.blog-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:28px;display:flex;flex-direction:column;transition:all .3s var(--ease)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.blog-card .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.blog-card .meta .cat{color:var(--cobalt)}
.blog-card h3{font-size:19px;line-height:1.3;margin-bottom:10px}
.blog-card p{font-size:14px;color:var(--slate);flex:1}
.blog-card .go{margin-top:18px;font-weight:600;color:var(--cobalt);font-size:14px}
.blog-feature{border:1px solid var(--line-dark);border-radius:16px;background:var(--ink-2);color:#fff;padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,60px);align-items:center;margin-bottom:22px;transition:all .3s var(--ease)}
.blog-feature:hover{border-color:var(--cobalt)}
.blog-feature h3{font-size:clamp(22px,2.6vw,30px);color:#fff;margin:14px 0 12px}
.blog-feature p{color:var(--fog);font-size:15.5px;max-width:60ch}
@media(max-width:820px){.blog-feature{grid-template-columns:1fr}}
.post-hero{background:var(--ink);color:#fff;padding:clamp(130px,15vh,180px) 0 clamp(48px,6vw,70px);position:relative;overflow:hidden}
.post-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 380px at 85% 0%,rgba(33,81,240,.18),transparent 62%)}
.post-hero .wrap{position:relative}
.post-hero .crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog);margin-bottom:26px;display:flex;gap:10px;flex-wrap:wrap}
.post-hero .crumbs a:hover{color:#fff}
.post-hero h1{font-size:clamp(30px,4vw,50px);max-width:22ch;letter-spacing:-.03em}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
.post-body{max-width:760px}
.post-body h2{font-size:clamp(21px,2.3vw,27px);margin:clamp(40px,5vw,58px) 0 16px;letter-spacing:-.02em}
.post-body p{font-size:16.5px;line-height:1.75;color:var(--ink-2);margin-bottom:18px}
.post-body ul{margin:0 0 20px 4px;padding-left:20px}
.post-body li{font-size:15.5px;line-height:1.7;color:var(--slate);margin-bottom:9px}
.post-body li::marker{color:var(--cobalt)}
.pull-quote{border-left:3px solid var(--cobalt);padding:6px 0 6px 24px;margin:30px 0;font-family:var(--display);font-size:clamp(18px,2vw,22px);font-weight:600;line-height:1.45;letter-spacing:-.015em;color:var(--ink)}
.post-data{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:28px 0}
.post-data>div{background:var(--mist);padding:18px 20px}
.post-data b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--cobalt-deep);display:block}
.post-data span{font-size:12.5px;color:var(--slate);line-height:1.5;display:block;margin-top:4px}
@media(max-width:640px){.post-data{grid-template-columns:1fr}}
.author-box{display:flex;gap:16px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-top:44px;background:var(--mist)}
.author-box .av{width:46px;height:46px;border-radius:10px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;flex:none}
.author-box b{font-family:var(--display);font-size:15px;display:block}
.author-box span{font-size:13px;color:var(--slate)}


/* ---------- page transition ---------- */
@keyframes pgfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#app.pg{animation:pgfade .5s var(--ease)}

/* ---------- client showcase / logo wall ---------- */
.hero-logos{margin-top:44px;display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}
.hero-logos b{font-family:var(--display);font-size:15px;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.82);font-weight:700}
.hero-logos .sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3)}
.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:860px){.client-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.client-grid{grid-template-columns:1fr}}
.client-tile{border:1px solid var(--line);border-radius:12px;background:#fff;padding:26px 24px;cursor:pointer;transition:all .3s var(--ease);text-align:left;position:relative;overflow:hidden}
.client-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--cobalt)}
.client-tile .wordmark{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;color:var(--ink)}
.client-tile .sector{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);margin-top:7px}
.client-tile .peek{margin-top:14px;font-size:13.5px;color:var(--slate);line-height:1.5}
.client-tile .view-story{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font:600 13.5px var(--display);color:var(--cobalt)}
.client-tile:hover .view-story .arr{transform:translateX(4px)}
.client-tile .view-story .arr{transition:transform .25s var(--ease)}
.client-tile .open-hint{position:absolute;top:20px;right:20px;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--slate-2);transition:all .25s var(--ease)}
.client-tile:hover .open-hint{background:var(--cobalt);border-color:var(--cobalt);color:#fff;transform:rotate(45deg)}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:14px;overflow:hidden}
.counter{background:var(--ink-2);padding:clamp(22px,3vw,34px) clamp(18px,2.6vw,30px)}
.counter .num{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,46px);letter-spacing:-.035em;color:#fff}
.counter .num em{font-style:normal;color:var(--cobalt-soft)}
.counter .lbl{font-size:13px;color:var(--fog);margin-top:6px;line-height:1.5}
@media(max-width:760px){.counters{grid-template-columns:repeat(2,1fr)}}

/* ---------- modal ---------- */
.modal-ov{position:fixed;inset:0;z-index:300;background:rgba(9,15,26,.68);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:all .3s var(--ease)}
.modal-ov.open{opacity:1;visibility:visible}
.modal-card{background:#fff;border-radius:18px;max-width:760px;width:100%;max-height:86vh;overflow:auto;position:relative;box-shadow:0 40px 90px -30px rgba(9,15,26,.6);transform:translateY(16px) scale(.98);transition:transform .35s var(--ease)}
.modal-ov.open .modal-card{transform:none}
.modal-x{position:sticky;top:14px;margin-left:calc(100% - 54px);width:40px;height:40px;border-radius:50%;background:var(--mist);border:1px solid var(--line);font-size:20px;color:var(--slate);z-index:2;transition:all .2s}
.modal-x:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.modal-body{padding:6px clamp(26px,4vw,46px) clamp(28px,4vw,44px)}
.modal-body .wordmark{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.025em}
.modal-kv{display:grid;gap:22px;margin-top:26px}
.modal-kv b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);font-weight:500;margin-bottom:7px}
.modal-kv p,.modal-kv li{font-size:15px;color:var(--slate);line-height:1.65}
.modal-kv ul{padding-left:18px}
.modal-iframe{width:100%;height:72vh;border:none;border-radius:0 0 18px 18px}

/* ---------- gated report form ---------- */
.gate-form{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:clamp(20px,2.6vw,28px)}
.gate-form .f-row{margin-bottom:14px}
.gate-ty{display:flex;gap:18px;align-items:flex-start}
.gate-ty .ok{flex:none;width:44px;height:44px;border-radius:50%;background:var(--good-bg);color:var(--good);display:flex;align-items:center;justify-content:center}
.gate-ty h4{font-size:18px;margin-bottom:6px}
.gate-ty p{font-size:14px;color:var(--slate);max-width:52ch}

/* ---------- footer upgrade ---------- */
.social-row{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.social-row a{width:40px;height:40px;border:1px solid var(--line-dark);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--fog);transition:all .25s var(--ease)}
.social-row a:hover{background:var(--cobalt);border-color:var(--cobalt);color:#fff;transform:translateY(-2px)}
.social-row a svg{width:17px;height:17px}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-dark);border-radius:8px;padding:8px 13px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fog)}
.badge svg{width:13px;height:13px;color:var(--cobalt-soft)}

.pf-filter.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pf-grid-big{grid-template-columns:repeat(2,1fr)}
.pf-grid-big .pf-win{min-height:190px}
.pf-grid-big .pf-body h4{font-size:19px}
@media(max-width:700px){.pf-grid-big{grid-template-columns:1fr}}
/* ---------- richer portfolio mockups ---------- */
.pf-kan{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pf-col .pf-colhd{height:7px;border-radius:4px;background:rgba(255,255,255,.22);margin-bottom:7px;width:70%}
.pf-kcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);border-radius:5px;padding:6px;margin-bottom:6px}
.pf-kcard i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.2);margin-bottom:5px;width:90%}
.pf-kcard em{display:block;height:6px;width:36%;border-radius:3px}
.pf-tag-b{background:rgba(33,81,240,.8)}.pf-tag-g{background:rgba(46,203,143,.65)}.pf-tag-a{background:rgba(224,164,80,.7)}
.pf-nav{display:flex;gap:6px;margin-bottom:9px;align-items:center}
.pf-nav i{height:7px;border-radius:4px;background:rgba(255,255,255,.16);width:34px}
.pf-nav i.on{background:var(--cobalt)}
.pf-area{position:relative;height:52px;margin-top:5px}
.pf-area svg{position:absolute;inset:0;width:100%;height:100%}
.pf-typing{display:inline-flex;gap:3px;padding:5px 8px;background:rgba(255,255,255,.08);border-radius:6px}
.pf-typing i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.55);animation:vblink 1.2s infinite}
.pf-typing i:nth-child(2){animation-delay:.2s}.pf-typing i:nth-child(3){animation-delay:.4s}
.pf-act{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:#7EE2B8;background:rgba(46,203,143,.14);border:1px solid rgba(46,203,143,.3);border-radius:5px;padding:4px 8px}


/* ---------- Corelynx Navigator chatbot ---------- */
.cbot-launch{position:fixed;right:20px;bottom:20px;z-index:280;width:58px;height:58px;border-radius:50%;background:var(--cobalt);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -8px rgba(33,81,240,.6);transition:all .3s var(--ease)}
.cbot-launch:hover{transform:translateY(-3px) scale(1.05);background:var(--cobalt-deep)}
.cbot-launch svg{width:26px;height:26px}
.cbot-launch .dot{position:absolute;top:3px;right:3px;width:12px;height:12px;border-radius:50%;background:#2ECB8F;border:2px solid #fff}
@media(max-width:760px){.cbot-launch{bottom:86px;right:14px}}
.cbot{position:fixed;right:20px;bottom:92px;z-index:290;width:390px;max-width:calc(100vw - 24px);height:600px;max-height:min(78vh,640px);background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:0 40px 90px -24px rgba(9,15,26,.5);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transition:all .35s var(--ease)}
.cbot.open{opacity:1;visibility:visible;transform:none}
@media(max-width:760px){.cbot{bottom:150px;right:12px}}
.cbot-hd{background:var(--ink);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px}
.cbot-hd .av{width:36px;height:36px;border-radius:10px;background:var(--cobalt);display:flex;align-items:center;justify-content:center;flex:none}
.cbot-hd b{font-family:var(--display);font-size:15px;display:block}
.cbot-hd span{font-size:11.5px;color:var(--fog);display:flex;align-items:center;gap:6px}
.cbot-hd span i{width:7px;height:7px;border-radius:50%;background:#2ECB8F}
.cbot-hd .cbot-x{margin-left:auto;width:32px;height:32px;border-radius:8px;color:var(--fog);font-size:18px}
.cbot-hd .cbot-x:hover{background:rgba(255,255,255,.1);color:#fff}
.cbot-msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;background:var(--mist)}
.cm{max-width:86%;padding:11px 15px;border-radius:14px;font-size:14px;line-height:1.55}
.cm.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start;color:var(--ink-2)}
.cm.user{background:var(--cobalt);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.cm .cta-mini{display:inline-flex;align-items:center;gap:7px;margin-top:10px;background:var(--ink);color:#fff;font:600 13px var(--display);padding:9px 15px;border-radius:8px;transition:all .2s}
.cm .cta-mini:hover{background:var(--cobalt)}
.cbot-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 10px;background:var(--mist)}
.cbot-chips button{font:500 12.5px var(--body);border:1px solid var(--line);background:#fff;border-radius:18px;padding:7px 13px;color:var(--ink-2);transition:all .2s}
.cbot-chips button:hover{border-color:var(--cobalt);color:var(--cobalt)}
.cbot-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}
.cbot-in input{flex:1;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font:14px var(--body);outline:none}
.cbot-in input:focus{border-color:var(--cobalt)}
.cbot-in button{width:44px;height:44px;border-radius:10px;background:var(--cobalt);color:#fff;flex:none;display:flex;align-items:center;justify-content:center;transition:background .2s}
.cbot-in button:hover{background:var(--cobalt-deep)}
.cm.typing{display:inline-flex;gap:4px;padding:14px 16px}
.cm.typing i{width:6px;height:6px;border-radius:50%;background:var(--slate-2);animation:vblink 1.2s infinite}
.cm.typing i:nth-child(2){animation-delay:.2s}.cm.typing i:nth-child(3){animation-delay:.4s}
.cm form{margin-top:10px;display:grid;gap:8px}
.cm form input{border:1px solid var(--line);border-radius:8px;padding:9px 12px;font:13.5px var(--body);width:100%}
.cm form button{background:var(--cobalt);color:#fff;border-radius:8px;padding:10px;font:600 13.5px var(--display)}
.cbot-foot{font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2);text-align:center;padding:0 12px 10px;background:#fff}


/* ---------- Advisory programme (additive) ---------- */
.adv-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:38px}
.adv-stat{background:#fff;padding:26px 24px}
.adv-stat b{display:block;font-family:var(--display);font-size:clamp(28px,3.4vw,38px);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.adv-stat span{display:block;margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--slate)}
.adv-hero-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line-dark)}
.adv-hero-stat div b{display:block;font-family:var(--display);font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.05}
.adv-hero-stat div span{display:block;margin-top:9px;font-size:13px;line-height:1.55;color:var(--fog)}
.adv-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:26px;margin-top:44px;counter-reset:advstep}
.adv-step{position:relative;padding-top:26px;border-top:2px solid var(--ink)}
.adv-step::before{counter-increment:advstep;content:"0" counter(advstep);position:absolute;top:-11px;right:0;background:var(--paper);padding-left:10px;font:500 11px var(--mono);letter-spacing:.14em;color:var(--cobalt)}
.adv-step h4{font-family:var(--display);font-size:17.5px;font-weight:700;letter-spacing:-.018em;margin-bottom:10px}
.adv-step p{font-size:14.5px;line-height:1.7;color:var(--slate)}
.adv-engine{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:26px;margin-top:44px}
.adv-eng{border:1px solid var(--line);border-radius:14px;padding:34px 30px;background:#fff;position:relative;overflow:hidden}
.adv-eng.dark{background:var(--ink);border-color:transparent;color:#fff}
.adv-eng.dark::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 260px at 100% 0%,rgba(33,81,240,.22),transparent 64%);pointer-events:none}
.adv-eng .eng-k{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt)}
.adv-eng.dark .eng-k{color:var(--cobalt-soft)}
.adv-eng h3{font-family:var(--display);font-size:clamp(21px,2.2vw,26px);font-weight:800;letter-spacing:-.028em;margin:15px 0 13px;position:relative}
.adv-eng p{font-size:14.8px;line-height:1.72;color:var(--slate);position:relative}
.adv-eng.dark p{color:var(--fog)}
.adv-eng ul{list-style:none;margin-top:20px;display:grid;gap:11px;position:relative}
.adv-eng li{font-size:14.2px;line-height:1.6;color:var(--slate);padding-left:24px;position:relative}
.adv-eng.dark li{color:var(--fog)}
.adv-eng li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;border:2px solid var(--cobalt)}
.adv-eng.dark li::before{border-color:var(--cobalt-soft)}
.adv-lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:40px}
.adv-line{display:block;background:#fff;padding:28px 26px;transition:background .25s var(--ease)}
.adv-line:hover{background:var(--tint)}
.adv-line b{display:block;font-family:var(--display);font-size:16.5px;font-weight:700;letter-spacing:-.018em;color:var(--ink);margin-bottom:9px}
.adv-line span{display:block;font-size:13.8px;line-height:1.65;color:var(--slate)}
.adv-line em{display:inline-block;margin-top:14px;font-style:normal;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt)}
.adv-fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin-top:40px}
.adv-fit>div{border:1px solid var(--line);border-radius:12px;padding:30px 28px;background:#fff}
.adv-fit h4{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.018em;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.adv-fit ul{list-style:none;display:grid;gap:12px}
.adv-fit li{font-size:14.3px;line-height:1.62;color:var(--slate);padding-left:26px;position:relative}
.adv-fit li::before{position:absolute;left:0;top:0;font:600 14px var(--body)}
.adv-fit .yes li::before{content:"\2713";color:var(--good)}
.adv-fit .no li::before{content:"\2715";color:var(--slate-2)}
.adv-form-wrap{border:1px solid var(--line);border-radius:16px;background:#fff;padding:clamp(28px,4vw,46px);box-shadow:var(--shadow)}
.adv-chipset{display:flex;flex-wrap:wrap;gap:9px}
.adv-chipset label{cursor:pointer}
.adv-chipset input{position:absolute;opacity:0;width:0;height:0}
.adv-chipset .ck{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:9px 15px;color:var(--slate);background:#fff;transition:all .2s var(--ease)}
.adv-chipset label:hover .ck{border-color:var(--cobalt-soft);color:var(--cobalt-deep)}
.adv-chipset input:checked+.ck{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.adv-chipset input:focus-visible+.ck{outline:2px solid var(--cobalt);outline-offset:2px}
.adv-consent{display:flex;gap:12px;align-items:flex-start;font-size:13.6px;line-height:1.62;color:var(--slate)}
.adv-consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--cobalt)}
.adv-note{margin-top:18px;font-size:14px;line-height:1.6;min-height:22px}
.adv-qa{border-top:1px solid var(--line);margin-top:44px}
.adv-qa details{border-bottom:1px solid var(--line)}
.adv-qa summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:-.016em;color:var(--ink)}
.adv-qa summary::-webkit-details-marker{display:none}
.adv-qa summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font:400 22px var(--body);color:var(--cobalt);transition:transform .25s var(--ease)}
.adv-qa details[open] summary::after{content:"\2013"}
.adv-qa .qa-body{padding:0 40px 24px 0;font-size:14.8px;line-height:1.75;color:var(--slate)}
.adv-legal{margin-top:44px;border:1px solid var(--line);border-left:3px solid var(--cobalt);border-radius:10px;background:var(--mist);padding:26px 28px;font-size:13.6px;line-height:1.75;color:var(--slate)}
@media(max-width:720px){.adv-qa summary{font-size:15.5px}}

/* ============================================================
   READABILITY & DIAGRAM SCALE
   ------------------------------------------------------------
   Client-requested adjustments made after reviewing the built
   site. Appended rather than edited in place so the verbatim
   design-system port above stays intact and auditable.
   ============================================================ */

/* Body copy 17px -> 18px. The buyers this site targets (founders,
   CROs, CFOs) skim on laptops; 17px was tight for long-form
   paragraphs. Headings use clamp() and rescale on their own. */
body{font-size:18px}

/* Hero diagrams were rendering at ~425px wide because .ph-viz
   capped at 520px inside a 7fr/5fr split. At that size the
   labels inside each SVG were unreadable, which made every
   page's diagram look identical even though they differ. Give
   the diagram column real room. */
@media(min-width:901px){
  /* Detail/list pages (.hero-cols + .ph-viz) and the homepage
     (.hero-grid + .sysmap-holder) use two different containers;
     both were 7fr/5fr, which starved the diagram column. */
  .hero-cols{grid-template-columns:minmax(0,11fr) minmax(0,9fr)}
  .hero-grid{grid-template-columns:minmax(0,11fr) minmax(0,9fr)}
  .ph-viz{max-width:none}
  .sysmap-holder{max-width:none}

  /* The site-wide .wrap caps at 1180px, which is right for reading
     line-length but leaves the hero diagrams cramped. Let the hero
     band alone run wider on large screens — body sections keep the
     1180px measure. */
  /* NOTE: the hero .wrap is deliberately NOT widened. An earlier attempt set
     it to 1380px to give the diagrams more room, but that pushed the hero's
     left edge to x=74 while every section below stayed on the 1180px measure
     at x=130 — a visible ragged edge down the page, and the trust strip ran
     wider than the content beneath it. The diagram gains its extra width from
     the 11fr/9fr column split above instead, which keeps every section on the
     same left margin. */
}

/* Consecutive same-background sections stack their padding: each
   `section.tight` contributes ~86px top AND bottom, so two in a row
   leave ~173px of dead space. The original design file wrapped a whole
   blog post in ONE .tight section; the rebuild splits it into five
   (direct answer, summary, body, FAQ, footer), which is better for
   maintainability but reintroduced the gap. Collapse the seam where a
   .tight follows another .tight with no background change — the visual
   rhythm then matches the original. Sections that DO change background
   (.dark, .misty, .hairline-top) keep their full padding, because there
   the padding is what separates the colour bands. */
/* SCOPED TO BLOG POSTS ONLY.
   An earlier version of this rule applied to every `section.tight + .tight`
   pair on the site, which was wrong: on Home, Solutions and Engagement the
   consecutive sections are DISTINCT blocks that often change background
   (.misty.tight also matches section.tight), and there the padding is
   precisely what separates one band from the next. Collapsing it made those
   pages collide. A blog post is the opposite case — one continuous article
   split across sections for maintainability — so the collapse is correct
   only there. `main:has(.post-hero)` matches post pages and nothing else. */
main:has(.post-hero) section.tight + section.tight{padding-top:0}
main:has(.post-hero) section.tight + section.tight > .wrap > .head-block:first-child{margin-top:0}
main:has(.post-hero) section.tight:has(+ section.tight){padding-bottom:0}

/* The .post-body's first <h2> carries a 58px top margin meant to separate
   it from preceding prose. When it opens a section that already provides
   the separation, it doubles up. */
main:has(.post-hero) section.tight + section.tight > .wrap > .post-body > h2:first-child{margin-top:34px}

/* ============================================================
   MOBILE OVERFLOW FIXES
   ------------------------------------------------------------
   Appended after the verbatim design-system port. These are the
   only additions to this file; nothing above is modified.

   Both issues below exist in the original design mockup too
   (verified: /solutions overflowed 27px and /engagement 3px at
   375px in the mockup itself), so this is a genuine bug fix, not
   a deviation from the approved design. Desktop rendering is
   unchanged — every rule is inside a max-width media query.
   ============================================================ */
@media(max-width:560px){
  /* .btn sets white-space:nowrap, which is right for short labels
     but forces long ones (e.g. "Not sure where to start? Take an
     assessment") past the viewport edge on small phones. Allow
     wrapping and centre the text only at this width. */
  .btn{white-space:normal;text-align:center}
  .cta-row .btn{max-width:100%}

  /* Long unbroken strings (URLs, em-dash date ranges like
     "DAYS 13–14") can push a grid column wider than its track. */
  .wrap{overflow-wrap:break-word}

  /* .persist already has a max-width:820px rule collapsing it to one column,
     but the engagement timeline markup carries an inline
     grid-template-columns:repeat(4,1fr) which wins on specificity and forces
     four columns into a 320px viewport. !important is the right tool here
     precisely because it must beat an inline style without editing markup
     that is a verbatim port of the client's design file. */
  .persist{grid-template-columns:1fr !important}

  /* Same inline-style situation on the blog post's "Keep reading" pair,
     which the design file sets to 1fr 1fr. Two article cards do not fit
     side by side on a phone. */
  .blog-grid{grid-template-columns:1fr !important}
}

/* ============================================================
   CUSTOMER-REVIEW FIXES — 5 Aug 2026
   ------------------------------------------------------------
   Addresses findings in CUSTOMER-REVIEW.md. Each block notes the
   issue number it resolves and why the value was chosen.
   ============================================================ */

/* --- #1: inline form confirmation ---------------------------
   Replaces the raw-JSON page the browser used to navigate to.
   Rendered by wireSubmit() in site.js on a successful POST. */
.form-sent{
  display:flex;align-items:flex-start;gap:12px;
  padding:20px 22px;border:1px solid var(--line);border-radius:12px;
  background:var(--tint);
}
.form-sent:focus{outline:2px solid var(--cobalt);outline-offset:3px}
.form-sent svg{width:22px;height:22px;flex:none;color:var(--cobalt);margin-top:1px}
.form-sent p{font-size:15px;line-height:1.65;color:var(--ink);margin:0}
/* The newsletter form is a dark-background flex row in the footer,
   so the light tint panel would look wrong there. */
.foot-brief .form-sent{
  background:rgba(91,125,246,.12);border-color:rgba(91,125,246,.35);padding:14px 16px;
}
.foot-brief .form-sent p{font-size:14px;color:rgba(255,255,255,.9)}
.foot-brief .js-lead-form-note:empty{display:none}
.foot-brief .js-lead-form-note{
  display:block;margin-top:8px;font-size:13px;color:rgba(255,255,255,.72);
}

/* --- #8: logo sizing ----------------------------------------
   Was 22px/30px = 128x36 in a 76px header (58% of header height);
   below the 65-75% convention for B2B consulting sites, so the
   wordmark read as a peer of the 15px nav links rather than the
   brand anchor. 26px/34px lifts it to 68%.

   The gap increase is not cosmetic: at 26px the wordmark's right
   edge lands 66px from the first nav item, and without the extra
   gap it collides with "Solutions" (measured — that collision is
   exactly why the larger 29px option was rejected). */
.logo{font-size:26px}
.logo .mark{width:34px;height:34px}
header .bar{gap:44px}
nav.main{margin-left:22px}
@media(max-width:900px){
  /* Mobile keeps a slightly smaller mark so the logo clears the
     burger comfortably; nav.main is hidden at this width so the
     desktop gap rules above are irrelevant here. */
  .logo{font-size:24px}
  .logo .mark{width:31px;height:31px}
  nav.main{margin-left:0}
}

/* --- #10: tap targets --------------------------------------
   WCAG 2.2 (2.5.8) and Apple HIG both specify a 44px minimum.
   Measured 21 targets under 40px on the homepage at 390px, worst
   being the footer nav at 34px — the primary mobile navigation.
   Applied only at mobile widths so desktop density is unchanged. */
@media(max-width:900px){
  /* Footer nav columns are bare <div>s inside .foot-grid (no per-column
     class), so target their anchors directly. The .foot-col b headings and
     the logo/brief anchors are excluded — only the link lists need the
     larger hit area. */
  footer .foot-grid > div > a,
  footer .foot-col a,
  .social-row a{
    min-height:44px;display:flex;align-items:center;
  }
  /* The brand logo and the newsletter form's own controls live in the first
     column; they should keep their natural layout. */
  footer .foot-grid > div > a.logo{min-height:0;display:inline-flex}
  .social-row a{min-width:44px;justify-content:center}

  /* The legal strip (Privacy / Terms / GDPR / CCPA / Sitemap) sits in
     .foot-base as inline anchors inside a <span>, measured at 16px tall.
     They must stay inline so the row still reads as a sentence, so pad
     vertically instead of setting a min-height on a flex box. */
  footer .foot-base a{
    display:inline-block;padding:13px 0;line-height:18px;
  }
  /* .btn-text is an inline arrow link ("Read the full case studies →")
     measured at 26px. Padding rather than min-height keeps it inline. */
  .btn-text{padding-top:9px;padding-bottom:9px;display:inline-flex;align-items:center}
  .crumbs a{padding:6px 0;display:inline-block}
}

/* --- #4: platform proof rows --------------------------------
   Full-width rows for the commercial SaaS products Corelynx built
   (ConvergeHub, QuantmX, CareAxis, CLK CLK, ACS-CAM). Deliberately
   NOT a card grid: each entry carries problem/build/proof/stack and
   would be cramped in a three-up. Reuses the existing .sig/.chip
   and .mono-label tokens so it reads as part of the design system
   rather than a bolt-on. */
.plat-list{display:flex;flex-direction:column;gap:18px;margin-top:34px}
.plat{
  border:1px solid var(--line);border-radius:14px;background:#fff;
  padding:30px 32px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.plat:hover{border-color:rgba(78,116,255,.42);box-shadow:var(--shadow)}
.plat-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line);
}
.plat-head h3{
  font:800 clamp(23px,2.5vw,28px)/1.15 var(--display);
  letter-spacing:-.03em;color:var(--ink);margin:9px 0 0;
}
.plat-tag{font-size:15.5px;color:var(--slate);margin-top:8px;line-height:1.6;max-width:60ch}
.plat-visit{
  flex:none;font:600 14px var(--display);color:var(--cobalt);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  border:1px solid rgba(78,116,255,.38);border-radius:9px;padding:10px 16px;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.plat-visit:hover{background:var(--tint);border-color:var(--cobalt)}
.plat-row{display:grid;grid-template-columns:150px 1fr;gap:20px;margin-bottom:14px}
.plat-row:last-of-type{margin-bottom:0}
.plat-k{
  font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cobalt);padding-top:3px;
}
.plat-row p{font-size:15.5px;line-height:1.72;color:var(--slate)}
.plat-stack{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.plat-note{
  margin-top:26px;font-size:13.5px;line-height:1.7;color:var(--slate-2);
  padding-left:15px;border-left:2px solid var(--line);
}
@media(max-width:820px){
  .plat{padding:24px 22px}
  .plat-head{flex-direction:column;gap:16px}
  .plat-visit{align-self:flex-start}
  /* Stack the label above its paragraph — a 150px label column leaves
     too little room for the text on a phone. */
  .plat-row{grid-template-columns:1fr;gap:7px}
  .plat-k{padding-top:0}
}

/* ============================================================
   CONVERSION LAYER — 5 Aug 2026
   ------------------------------------------------------------
   Lead-capture surfaces added after the funnel audit found that
   46 of 48 pages could not capture an email, and that finishing
   an assessment offered nothing but "book a call".
   ============================================================ */

/* --- Assessment report gate --------------------------------
   Sits directly under the free score + dimension bars. Styled as
   a distinct offer panel rather than another content block, so
   it reads as "here is the next thing" instead of more prose. */
.gate-capture{
  margin-top:26px;padding:26px 28px;border-radius:14px;
  background:linear-gradient(180deg,var(--tint) 0%,#fff 100%);
  border:1px solid rgba(78,116,255,.32);
}
.gate-capture .eyebrow{margin-bottom:10px}
.gate-capture h4{
  font:800 clamp(19px,2.2vw,23px)/1.2 var(--display);
  letter-spacing:-.025em;color:var(--ink);margin:0 0 14px;
}
.gate-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.gate-list li{
  position:relative;padding-left:26px;font-size:14.5px;line-height:1.6;color:var(--slate);
}
.gate-list li::before{
  content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;
  border-left:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);
  transform:rotate(-45deg);
}
.gate-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.gate-form input[type=text],.gate-form input[type=email]{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:9px;
  font:400 15px var(--body);background:#fff;color:var(--ink);
}
.gate-form input:focus{outline:2px solid var(--cobalt);outline-offset:1px;border-color:transparent}
.gate-fine{margin-top:12px;font-size:12.5px;color:var(--slate-2);line-height:1.6}
.gate-capture .js-lead-form-note{display:block;margin-top:10px;color:var(--slate)}
.gate-capture .js-lead-form-note:empty{display:none}
.gate-capture .js-redownload{margin-top:14px}
/* The "healthy" band is a softer, non-urgent offer — signal that
   visually rather than shouting the same way as the urgent band. */
.gate-capture[data-band=healthy]{
  background:#fff;border-color:var(--line);
}
@media(max-width:720px){
  .gate-capture{padding:22px 20px}
  .gate-fields{grid-template-columns:1fr}
}

/* --- In-body content offer (blog / insight pages) ----------
   One per content cluster, placed inside the article flow. */
.inline-offer{
  margin:38px 0;padding:26px 28px;border-radius:14px;
  border:1px solid rgba(78,116,255,.3);background:var(--tint);
}
.inline-offer .eyebrow{margin-bottom:8px}
.inline-offer h4{
  font:800 clamp(18px,2vw,21px)/1.25 var(--display);
  letter-spacing:-.02em;color:var(--ink);margin:0 0 8px;
}
.inline-offer p{font-size:14.5px;line-height:1.65;color:var(--slate);margin:0 0 16px}
.inline-offer .gate-fields{grid-template-columns:1fr auto;gap:10px;margin-bottom:0}
.inline-offer .btn{white-space:nowrap}
@media(max-width:640px){
  .inline-offer .gate-fields{grid-template-columns:1fr}
}

/* --- Exit-intent offer -------------------------------------
   Fires once per visitor, only on high-loss pages. */
.exit-overlay{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(11,21,36,.62);backdrop-filter:blur(3px);
}
.exit-overlay.open{display:flex}
.exit-card{
  position:relative;max-width:520px;width:100%;background:#fff;
  border-radius:16px;padding:34px 36px;box-shadow:0 30px 80px rgba(11,21,36,.4);
  animation:exitPop .28s var(--ease);
}
@keyframes exitPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.exit-card h3{
  font:800 clamp(21px,2.6vw,27px)/1.2 var(--display);
  letter-spacing:-.03em;color:var(--ink);margin:12px 0 10px;
}
.exit-card p{font-size:15px;line-height:1.65;color:var(--slate);margin-bottom:20px}
.exit-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;
  border:none;background:transparent;color:var(--slate-2);cursor:pointer;
  font-size:22px;line-height:1;border-radius:8px;
}
.exit-close:hover{background:var(--mist);color:var(--ink)}
.exit-card .gate-fields{grid-template-columns:1fr;gap:10px;margin-bottom:14px}
@media(max-width:560px){.exit-card{padding:28px 22px}}

/* ============================================================
   SOLUTION DESK
   ------------------------------------------------------------
   One buyer question per page. The visual hierarchy is built
   around the short answer, because that is the block an answer
   engine lifts and the block a skimming buyer reads.
   ============================================================ */
.solution-hero h1{max-width:20ch}

.sd-situation{
  margin-bottom:22px;padding-left:16px;border-left:3px solid var(--line);
}
.sd-situation p{font-size:16.5px;line-height:1.7;color:var(--slate);margin-top:8px}

/* The liftable passage. Given the strongest visual treatment on the
   page so a skimmer cannot miss it. */
.sd-answer{
  padding:26px 30px;border-radius:14px;background:var(--ink);color:#fff;
  margin-bottom:34px;
}
.sd-answer .mono-label{color:#8FA6F9}
.sd-answer p{
  font:500 clamp(17px,2vw,20px)/1.6 var(--body);
  color:#fff;margin-top:12px;
}

.sd-block{margin-bottom:34px}
.sd-block h2{
  font:800 clamp(21px,2.4vw,26px)/1.2 var(--display);
  letter-spacing:-.025em;color:var(--ink);margin:0 0 16px;
}

.sd-causes{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sd-causes li{
  position:relative;padding-left:24px;font-size:16px;line-height:1.7;color:var(--slate);
}
.sd-causes li::before{
  content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;
  border-radius:50%;background:var(--cobalt);
}

.sd-path{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:sd}
.sd-path li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.sd-step-n{
  font:600 12px var(--mono);color:var(--cobalt);
  background:var(--tint);border-radius:8px;padding:7px 0;text-align:center;
}
.sd-path li > div{font-size:16px;line-height:1.7;color:var(--slate)}

/* The honest teaser. Warm border rather than alarm red — this is
   "here is what is genuinely hard", not a scare tactic. */
.sd-hard{
  padding:24px 28px;border-radius:14px;
  background:var(--warn-bg);border:1px solid rgba(176,123,16,.28);
  margin-bottom:8px;
}
.sd-hard .mono-label{color:var(--warn)}
.sd-hard p{font-size:16px;line-height:1.7;color:var(--ink);margin-top:10px}

.sd-next{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:34px 0}
.sd-next-card{
  display:block;padding:22px 24px;border:1px solid var(--line);border-radius:12px;
  background:#fff;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.sd-next-card:hover{border-color:rgba(78,116,255,.45);box-shadow:var(--shadow)}
.sd-next-card b{display:block;font:700 17px var(--display);color:var(--ink);margin:8px 0 10px}
.sd-next-go{font-size:14px;color:var(--cobalt);font-weight:600}

.sd-related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sd-related a{
  display:block;padding:18px 20px;border:1px solid var(--line);border-radius:12px;
  background:#fff;transition:border-color .2s var(--ease);
}
.sd-related a:hover{border-color:rgba(78,116,255,.45)}
.sd-related b{display:block;font:700 15px/1.4 var(--display);color:var(--ink);margin-top:8px}

/* ============================================================
   AI RESOURCE KIT (/ai)
   ------------------------------------------------------------
   Charts are inline DOM + CSS rather than a JS charting library:
   no external dependency under the CSP, figures remain readable
   as real text to crawlers and answer engines, and they animate
   through the existing .rv reveal system.
   ============================================================ */

/* Tone tokens shared by bars, values and headline cards. */
.ai-tone-cobalt{color:var(--cobalt)}
.ai-tone-risk{color:var(--risk)}
.ai-tone-warn{color:var(--warn)}
.ai-tone-good{color:var(--good)}
.ai-tone-cobalt-bg{background:var(--cobalt)}
.ai-tone-risk-bg{background:var(--risk)}
.ai-tone-warn-bg{background:var(--warn)}
.ai-tone-good-bg{background:var(--good)}

.ai-hero h1{max-width:22ch}

.ai-def{
  padding:26px 30px;border-radius:14px;background:var(--ink);color:#fff;margin-bottom:34px;
}
.ai-def .mono-label{color:#8FA6F9}
.ai-def p{font:500 clamp(16.5px,1.9vw,19px)/1.65 var(--body);color:#fff;margin-top:12px}

.ai-block{margin-bottom:38px}
.ai-block h2{
  font:800 clamp(21px,2.4vw,27px)/1.2 var(--display);
  letter-spacing:-.028em;color:var(--ink);margin:0 0 18px;
}

/* --- cited bar figures --- */
.ai-fig{
  margin:0 0 22px;padding:26px 28px;border:1px solid var(--line);
  border-radius:14px;background:#fff;
}
.ai-fig-title{
  font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cobalt);margin-bottom:20px;display:block;
}
.ai-bars{display:grid;gap:20px}
.ai-bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px}
.ai-bar-label{font-size:15px;line-height:1.5;color:var(--slate);max-width:52ch}
.ai-bar-value{font:800 clamp(20px,2.4vw,26px) var(--display);letter-spacing:-.02em;flex:none}
.ai-bar-track{height:9px;border-radius:5px;background:var(--mist);overflow:hidden}
.ai-bar-fill{
  height:100%;border-radius:5px;width:0;
  transition:width 1.1s cubic-bezier(.22,.61,.36,1) .15s;
}
/* Fill only once the block has revealed, so the bar animates into view. */
.rv.in .ai-bar-fill{width:var(--w)}
/* Reduced motion: show the final value immediately, no sweep. */
@media(prefers-reduced-motion:reduce){
  .ai-bar-fill{transition:none;width:var(--w)}
}
.ai-bar-src{
  margin-top:7px;font-size:12px;color:var(--slate-2);line-height:1.5;
}
.ai-fig-note{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.65;color:var(--slate-2);
}

/* --- capability rows --- */
.ai-caps{display:grid;gap:2px;border-top:1px solid var(--line)}
.ai-cap{
  display:grid;grid-template-columns:56px 1fr;gap:18px;
  padding:24px 0;border-bottom:1px solid var(--line);align-items:start;
}
.ai-cap-n{font:600 12.5px var(--mono);color:var(--cobalt);padding-top:4px;letter-spacing:.06em}
.ai-cap h3{font:800 clamp(17px,1.9vw,20px)/1.3 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.ai-cap p{font-size:15.5px;line-height:1.7;color:var(--slate);margin:0;max-width:70ch}
.ai-cap-proof{
  margin-top:10px !important;padding-left:12px;border-left:2px solid rgba(78,116,255,.35);
  font-size:14px !important;color:var(--slate-2) !important;
}

/* --- when NOT to --- */
.ai-avoid{
  padding:28px 30px;border-radius:14px;background:var(--warn-bg);
  border:1px solid rgba(176,123,16,.3);margin-bottom:38px;
}
.ai-avoid .mono-label{color:var(--warn)}
.ai-avoid h2{
  font:800 clamp(20px,2.2vw,24px)/1.25 var(--display);
  letter-spacing:-.025em;color:var(--ink);margin:10px 0 16px;
}
.ai-avoid ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ai-avoid li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.7;color:var(--ink)}
.ai-avoid li::before{
  content:"";position:absolute;left:3px;top:9px;width:11px;height:2px;
  background:var(--warn);border-radius:2px;
}

/* --- how to start --- */
.ai-steps{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.ai-steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.ai-step-n{
  font:600 12px var(--mono);color:var(--cobalt);background:var(--tint);
  border-radius:8px;padding:7px 0;text-align:center;
}
.ai-steps li > div{font-size:15.5px;line-height:1.7;color:var(--slate)}

/* --- index: headline figures --- */
.ai-headline{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ai-headline-card{
  padding:24px 22px;border:1px solid var(--line);border-radius:14px;background:#fff;
}
.ai-headline-value{
  font:800 clamp(30px,4vw,42px)/1 var(--display);letter-spacing:-.04em;margin-bottom:12px;
}
.ai-headline-card p{font-size:14.5px;line-height:1.6;color:var(--slate);margin:0 0 12px}
.ai-headline-src{
  font-size:11.5px;line-height:1.5;color:var(--slate-2);
  padding-top:11px;border-top:1px solid var(--line);
}

/* --- index: capability cards --- */
.ai-grid{display:grid;gap:14px}
.ai-card{
  display:grid;grid-template-columns:64px 1fr;gap:20px;
  padding:26px 28px;border:1px solid var(--line);border-radius:14px;background:#fff;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
}
.ai-card:hover{border-color:rgba(78,116,255,.45);box-shadow:var(--shadow);transform:translateY(-2px)}
.ai-card-n{font:600 13px var(--mono);color:var(--cobalt);padding-top:3px;letter-spacing:.06em}
.ai-card h3{font:800 clamp(18px,2vw,21px)/1.3 var(--display);letter-spacing:-.022em;color:var(--ink);margin:9px 0 9px}
.ai-card p{font-size:15px;line-height:1.65;color:var(--slate);margin:0 0 14px;max-width:72ch}

@media(max-width:900px){
  .ai-headline{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .ai-headline{grid-template-columns:1fr}
  .ai-card{grid-template-columns:1fr;gap:6px;padding:22px 20px}
  .ai-card-n{padding-top:0}
  .ai-cap{grid-template-columns:1fr;gap:8px}
  .ai-cap-n{padding-top:0}
  .ai-def,.ai-avoid,.ai-fig{padding:22px 20px}
  .ai-bar-head{flex-direction:column;gap:4px}
}

/* --- Practice: business-outcome mapping ------------------
   Renders extra_json.transformations. Two columns so the
   symptom and the response read as a pair. */
.tr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.tr-card{
  padding:28px 30px;border:1px solid var(--line);border-radius:14px;background:#fff;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.tr-card:hover{border-color:rgba(78,116,255,.4);box-shadow:var(--shadow)}
.tr-card h3{
  font:800 clamp(19px,2.1vw,22px)/1.25 var(--display);
  letter-spacing:-.025em;color:var(--ink);margin:10px 0 12px;
}
.tr-symptom{font-size:15.5px;line-height:1.7;color:var(--slate);margin:0}
.tr-what{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.tr-what-k{
  display:block;font:600 10.5px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--cobalt);margin-bottom:7px;
}
.tr-what p{font-size:15px;line-height:1.7;color:var(--slate);margin:0}

/* --- Practice: operating principles ----------------------
   Renders extra_json.beliefs. Numbered rows rather than cards:
   these are read sequentially, not scanned. */
.belief-grid{display:grid;gap:2px;margin-top:26px;border-top:1px solid var(--line)}
.belief{
  display:grid;grid-template-columns:64px 1fr;gap:20px;
  padding:26px 0;border-bottom:1px solid var(--line);align-items:start;
}
.belief-n{
  font:600 13px var(--mono);color:var(--cobalt);
  padding-top:4px;letter-spacing:.06em;
}
.belief h3{
  font:800 clamp(18px,2vw,21px)/1.3 var(--display);
  letter-spacing:-.02em;color:var(--ink);margin:0 0 9px;
}
.belief p{font-size:15.5px;line-height:1.72;color:var(--slate);margin:0;max-width:70ch}

@media(max-width:820px){
  .tr-grid{grid-template-columns:1fr}
  .tr-card{padding:24px 22px}
  .belief{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .belief-n{padding-top:0}
}

/* --- Footer compliance badges ----------------------------
   Restored from the design file (footer, under the social row).
   The footer is dark, so the badges need on-dark treatment that
   the default .badge (built for light sections) does not carry. */
.foot-badges{
  margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:9px;
}
.foot-badges .badge{
  border-color:rgba(255,255,255,.18);
  color:rgba(233,238,248,.8);
  background:rgba(255,255,255,.04);
}
.foot-badges .badge svg{color:#5B7DF6}
.foot-badge-link{
  font:600 12.5px var(--display);color:#8FA6F9;white-space:nowrap;
}
.foot-badge-link:hover{color:#fff}
@media(max-width:900px){
  /* Keeps the 44px tap target from the accessibility pass without
     stretching the non-interactive badges. */
  .foot-badges .foot-badge-link{min-height:44px;display:inline-flex;align-items:center}
}

/* --- Practice: resource-kit deep-dive band ---------------
   Optional per practice (extra_json.resourceKit). Sits between
   the practice content and its Solution Desk band. */
.rk-band{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;
  padding:32px 34px;border:1px solid rgba(78,116,255,.32);border-radius:16px;
  background:linear-gradient(180deg,var(--tint) 0%,#fff 100%);
}
.rk-band .btn{flex:none;white-space:nowrap}
@media(max-width:820px){
  .rk-band{grid-template-columns:1fr;gap:20px;padding:26px 22px}
  .rk-band .btn{width:100%;text-align:center;justify-content:center}
}

/* --- Portfolio conversion band ---------------------------
   Portfolio detail pages previously ended with no conversion
   path at all. Two-column so the CTA sits beside the pitch
   rather than below the fold. */
.pf-next{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center;
  padding:32px 34px;border:1px solid var(--line);border-radius:16px;background:#fff;
}
.pf-next-cta{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:none}
.pf-next-cta .js-pricing-cta{
  font:600 15px var(--display);color:#fff;background:var(--cobalt);
  border-radius:9px;padding:13px 22px;margin-top:0;
}
.pf-next-cta .js-pricing-cta:hover{background:var(--cobalt-deep)}
@media(max-width:820px){
  .pf-next{grid-template-columns:1fr;gap:22px;padding:26px 22px}
  .pf-next-cta{width:100%}
  .pf-next-cta .btn,.pf-next-cta .js-pricing-cta{width:100%;text-align:center;justify-content:center}
}

/* --- Solution Desk index --------------------------------- */
.sd-group{margin-bottom:clamp(38px,4.5vw,58px)}
.sd-group-head{margin-bottom:20px}
.sd-group-head h2{
  font:800 clamp(22px,2.6vw,28px)/1.2 var(--display);
  letter-spacing:-.028em;color:var(--ink);margin:8px 0 6px;
}
.sd-group-head p{font-size:15.5px;line-height:1.65;color:var(--slate);max-width:62ch}
.sd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sd-card{
  display:flex;flex-direction:column;padding:24px 26px;
  border:1px solid var(--line);border-radius:14px;background:#fff;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
}
.sd-card:hover{
  border-color:rgba(78,116,255,.45);box-shadow:var(--shadow);transform:translateY(-2px);
}
.sd-card h3{
  font:700 clamp(17px,1.9vw,19.5px)/1.35 var(--display);
  letter-spacing:-.02em;color:var(--ink);margin:9px 0 10px;
}
.sd-card p{font-size:14.5px;line-height:1.65;color:var(--slate);margin-bottom:16px;flex:1}
.sd-card .sd-go{font:600 13.5px var(--display);color:var(--cobalt)}

@media(max-width:820px){
  .sd-next,.sd-grid{grid-template-columns:1fr}
  .sd-related{grid-template-columns:1fr}
  .sd-answer{padding:22px 22px}
  .sd-hard{padding:20px 22px}
}

/* --- #11: minimum legible text -----------------------------
   .chip and .mono-label render at 10.5px and 8.5px on /solutions
   and /portfolio. Uppercase mono below ~11px is hard to read on a
   phone, particularly for the 45+ executive audience this site
   targets — the same reason body copy went to 18px. Floors only,
   so anything already larger is untouched. */
@media(max-width:900px){
  .chip{font-size:11px}
  .mono-label{font-size:11px}
  .eyebrow{font-size:11.5px}
  .sig .chip,.pf-body .chip{font-size:11px}
}