/* ============================================================
   TRIYANT — design system
   Language: structural. Planes, axes and hairlines, derived
   from the geometry of the mark. Depth over decoration.
   ============================================================ */

:root{
  /* brand constants */
  --brand-blue:#2B69D4;
  --brand-navy:#0E1138;

  --bg:#FDFDFE;
  --bg-raise:#F6F8FC;
  --panel:#EDF2FB;
  --line:rgba(14,17,56,.13);
  --line-soft:rgba(14,17,56,.065);
  --ink:#0E1138;
  --ink-mid:#4E5673;
  --ink-dim:#858DA6;
  --accent:#2B69D4;
  --accent-solid:#2B69D4;
  --glow:rgba(43,105,212,.14);

  /* illustration tokens (used by the inline SVGs) */
  --viz-bg:#E9EFFA;
  --viz-a:#2B69D4;     /* primary geometry   */
  --viz-b:#2B69D4;     /* secondary geometry */
  --viz-c:#0E1138;     /* content bars       */

  --shell:1240px;
  --gutter:clamp(20px,5vw,64px);
  --r:14px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
/* Wordmark face: Oxanium SemiBold, SIL Open Font License 1.1.
   Subset to the six letters of the wordmark and embedded — no external request. */
@font-face{
  font-family:"Triyant Wordmark";
  src:url(data:font/woff2;base64,d09GMgABAAAAAAJ4AA8AAAAABOQAAAIhAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbfhwqBmA/U1RBVCoAXBEICoIYgV8BNgIkAxwLEAAEIAVUByAblAPIjtLUcqyRJE3Q1hfB9/e+e859v5UUrAUD1hpYABMvHTATi2jEAhagiF6fWvu9sy+7qDaV5OaJITNE+AkRma7avYrf4S29o4H8AhOfzvDFPvuEMk0wsQEG9AMOKNLAcmNTj+KRb41qtqoggSEghdAWAn0bnLDHgeHxULnLqa+EigaqiEDcFtRWQoZAaCRCV1rAY4sDVoF6KEooU0vbMSGip1WVl+0tFkQP5YEmzdhkCOSdUXhZE5+cfKMZcOXnYA8+UoqOaIfv8ohvBGRhF8AKVghdgXkMFrD3RcX1DJACosUmA0gUzOME5vHOwVhXajsQIlKseClVhPkNcU9cr8t1oc7XaQzdN0QVMUHogDG6OAE3ABrgnRAb+jxPVGQyap1FM/RIolI8SaOphAqUr7aAQ08KWcyVB+EjPmF7LEEZDAbT0ydZjCr6DRGyDGlKGtVPBgnz85Gds5GHIrthY/vhghXJbZ6bJhJ+WheQ8DPg+PKabb9TuKG8cIWipjPPoOn5qbjr5+u37MjGpsfa5gi6h1W2VTd+bX7Q+H4oHnNWOJdc3Y9+tn2CNwySX2/5fpaq+1uXco8Af9GZAP7Ht63+p6I9P1uuAG0Jgv91zekBWhYwmOtkFBJziGaYICHvgAPPZUAv06CJQcc+3jWpAACNRLGHE40caUxrDAyNP03AlIFYBYo0KJejVpICJYoUqxenQIUSvqqUy8cBdZkTAgA=) format("woff2");
  font-weight:600;font-style:normal;font-display:block;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:560;letter-spacing:-.03em;line-height:1.05}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent-solid);opacity:.8}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:9px;
  font-size:14.5px;font-weight:530;letter-spacing:-.01em;border:1px solid transparent;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .18s,border-color .18s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent-solid);color:#fff;box-shadow:0 8px 26px -10px var(--glow)}
.btn-primary:hover{background:#3d78e0}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent-solid);background:var(--line-soft)}
.btn > .arw{transition:transform .18s}
.btn:hover > .arw{transform:translateX(3px)}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent;transition:border-color .25s;
}
header.nav.stuck{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:38px;height:70px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand > img{width:27px;height:auto}
.brand > span{
  font-family:"Triyant Wordmark",var(--sans);
  font-size:17.5px;font-weight:600;letter-spacing:.2em;
  text-indent:.2em;  /* optical: balance the trailing tracked space */
  line-height:1;padding-top:1px;
}
.nav-links{display:flex;gap:30px;margin-left:6px}
.nav-links > a{font-size:14.5px;color:var(--ink-mid);transition:color .16s;position:relative;padding:4px 0}
.nav-links > a:hover{color:var(--ink)}
.nav-links > a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent-solid);
  transition:width .22s cubic-bezier(.2,.7,.3,1);
}
.nav-links > a:hover::after{width:100%}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(44px,6vw,74px) 0 clamp(40px,5vw,64px);overflow:hidden}
.hero-grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(115% 80% at 62% 30%,#000 5%,transparent 72%);
}
.hero-glow{
  position:absolute;width:820px;height:820px;right:-14%;top:-32%;pointer-events:none;
  background:radial-gradient(circle,var(--glow) 0%,transparent 62%);filter:blur(24px);
}
.hero-in{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:center}
.hero h1{
  font-size:clamp(40px,5.6vw,68px);margin:18px 0 0;max-width:14ch;
}
.hero h1 .em{
  background:linear-gradient(96deg,var(--accent) 0%,var(--ink) 72%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{margin-top:18px;font-size:clamp(16.5px,1.5vw,18.5px);color:var(--ink-mid);max-width:50ch}
.hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.hero-meta{
  display:flex;gap:26px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);
  flex-wrap:wrap;
}
.hero-meta b{color:var(--ink-mid);font-weight:500}

/* isometric stack figure */
.stack{width:100%;height:auto}
.stack .plane{transition:transform .55s cubic-bezier(.2,.7,.3,1),opacity .55s}
.stack:hover .p1{transform:translateY(-9px)}
.stack:hover .p2{transform:translateY(-3px)}
.stack:hover .p3{transform:translateY(3px)}
.stack:hover .p4{transform:translateY(9px)}
.stack text{font-family:var(--mono);font-size:11px;letter-spacing:.13em;fill:var(--ink-dim)}
.stack .lbl-a{fill:var(--accent)}

/* Hero stack: a white ground needs more ink than a dark one, so both
   the gradient stops and the plane strokes are themed rather than baked in. */
#pa stop:first-child{stop-opacity:.95}
#pa stop:last-child {stop-opacity:.50}
#pb stop:first-child{stop-opacity:.30}
#pb stop:last-child {stop-opacity:.10}
.stack .p1 path{stroke-opacity:.70}
.stack .p2 path{stroke-opacity:.46}
.stack .p3 path{stroke-opacity:.34}
.stack .p4 path{stroke-opacity:.24}
.stack > path{stroke-opacity:.30}

/* ---------- hero layer-stack animation ----------
   Ported from the prototype to vanilla JS + CSS 3D transforms: no React,
   no runtime JSX compiler, no bundled fonts. ~5KB instead of 1.3MB.
   The static SVG stays in the markup and is the fallback for no-JS and
   for prefers-reduced-motion — the animation only replaces it when motion
   is welcome. */
.stack-anim{position:relative;width:100%;aspect-ratio:980/780;display:none}
.stack-anim.on{display:block}
.anim-stage{position:absolute;top:0;left:0;width:980px;height:780px;transform-origin:top left}
.sa-cam{position:absolute;inset:0;will-change:transform}
.sa-plane{position:absolute;will-change:transform,opacity}
.sa-ring{position:absolute;inset:0}
.sa-label{position:absolute;display:flex;align-items:center;gap:14px;white-space:nowrap;
  font-family:var(--mono);font-size:30px;font-weight:500;will-change:transform,opacity}
.sa-lead{height:0;border-top:1px dashed}
.sa-idx{position:absolute;width:46px;text-align:right;font-family:var(--mono);
  font-size:18px;letter-spacing:.14em;color:rgba(30,55,95,.28)}
.sa-axis{position:absolute;width:0;transform-origin:top}
.sa-pulse{position:absolute}
.sa-pulse i{position:absolute;left:-14px;top:-8px;width:28px;height:28px;display:block;
  transform:rotate(45deg) scaleY(.55)}
.sa-pulse u{position:absolute;left:-1px;top:4px;width:2px;height:200px;display:block}


/* ---------- agent-loop animation (Agentic feature card) ---------- */
.agent-loop{position:relative;width:100%;aspect-ratio:880/720;display:none}
.agent-loop.on{display:block}
.al-breathe{position:absolute;inset:0;will-change:transform}
.al-node{position:absolute;font-family:var(--mono)}
.al-box{position:absolute;inset:0;border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-size:26px;letter-spacing:.2em;font-weight:500;will-change:transform}
.al-ripple{position:absolute;inset:0;border-radius:16px}
.al-tok{position:absolute;width:18px;height:18px;border-radius:9px;display:none}
.al-centre{position:absolute;width:320px;text-align:center;font-family:var(--mono);
  font-size:28px;line-height:1.45;letter-spacing:.22em;opacity:.92}

/* ---------- section frame ---------- */
/* Top-level page sections only. A bare `section` selector leaked into the
   nested <section> elements inside the legal pages, adding 82px of padding
   to each — the same failure mode as the earlier .cta p and .rail a bugs. */
main > section{position:relative;padding:clamp(52px,6vw,82px) 0}
.sec-rule{height:1px;background:var(--line-soft);max-width:var(--shell);margin-inline:auto}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:38px}
.sec-head > div > h2{font-size:clamp(30px,3.8vw,44px);margin-top:14px;max-width:17ch}
.sec-head > p{color:var(--ink-mid);font-size:16.5px;max-width:46ch}

/* ---------- capabilities ---------- */
.cap-band{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.cap-band::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;margin-bottom:32px}
.cap{
  background:var(--bg);padding:24px 24px 22px;position:relative;
  transition:background .22s;min-height:0;display:flex;flex-direction:column;
}
.cap:hover{background:var(--bg-raise)}
.cap > .no{font-family:var(--mono);font-size:11px;color:var(--ink-dim);letter-spacing:.1em}
.cap > h3{font-size:18.5px;margin:11px 0 8px;letter-spacing:-.02em}
.cap > p{font-size:14.6px;color:var(--ink-mid);line-height:1.62}
.cap > .go{
  margin-top:auto;padding-top:14px;font-size:13px;color:var(--accent);
  opacity:0;transform:translateY(5px);transition:opacity .22s,transform .22s;
}
.cap:hover > .go{opacity:1;transform:none}
.cap::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--accent-solid);
  transition:height .3s cubic-bezier(.2,.7,.3,1);
}
.cap:hover::before{height:100%}

/* ---------- approach ---------- */
.approach{background:var(--bg-raise);border-block:1px solid var(--line-soft)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps::before{content:"";position:absolute;top:22px;left:6%;right:6%;height:1px;background:var(--line)}
.step{position:relative;padding-right:28px}
.step > .dot{
  width:11px;height:11px;border-radius:50%;background:var(--bg-raise);
  border:2px solid var(--accent-solid);position:relative;z-index:2;margin:13px 0 18px;
}
.step > .k{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--accent);text-transform:uppercase}
.step > h3{font-size:19.5px;margin:10px 0 8px}
.step > p{font-size:14.6px;color:var(--ink-mid)}

/* ---------- engagement ---------- */
.eng{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.eng-card{
  border:1px solid var(--line-soft);border-radius:var(--r);padding:26px 26px 24px;background:var(--bg-raise);
  display:flex;flex-direction:column;transition:border-color .22s;
}
.eng-card:hover{border-color:var(--accent-solid)}
.eng-card.lead{background:linear-gradient(165deg,var(--panel),var(--bg-raise));border-color:var(--line)}
.eng-card > h3{font-size:20.5px;margin:11px 0 9px}
.eng-card > p{font-size:14.8px;color:var(--ink-mid)}
.eng-card > ul{margin:17px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.eng-card > ul > li{font-size:14.2px;color:var(--ink-mid);display:flex;gap:10px;align-items:flex-start}
.eng-card > ul > li > svg{flex-shrink:0;margin-top:4px;color:var(--accent)}
.pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--line);border-radius:99px;padding:5px 11px;align-self:flex-start}

/* ---------- featured capability (agentic) ---------- */
.feature{
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(150deg,var(--panel),var(--bg-raise));
  padding:30px 32px 28px;display:grid;grid-template-columns:1.1fr .9fr;
  gap:36px;align-items:center;margin-bottom:30px;
}
.feature > div > h3{font-size:clamp(22px,2.4vw,28px);margin:12px 0 10px}
.feature > div > p{color:var(--ink-mid);font-size:15.4px;max-width:50ch}
.feature > div > .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.feature .tags span{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-mid);
  border:1px solid var(--line);border-radius:6px;padding:5px 10px;background:var(--bg);
}
.loop{width:100%;height:auto}
.loop text{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;fill:var(--ink-mid)}
.loop .core{fill:var(--accent);font-size:11px}

/* ---------- practice ---------- */
.practice-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
}
.pr{background:var(--bg);padding:24px 24px 22px}
.pr > .ic{color:var(--accent-solid)}
.pr > h3{font-size:17px;margin:12px 0 8px;letter-spacing:-.02em}
.pr > p{font-size:14.3px;color:var(--ink-mid);line-height:1.6}

/* ---------- stack & tooling ---------- */
.sgs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 36px}
.sg > h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:500;margin:0 0 12px;padding-bottom:9px;
  border-bottom:1px solid var(--line-soft);
}
.sg > ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px}
.sg > ul > li{
  font-size:13px;color:var(--ink-mid);border:1px solid var(--line);
  border-radius:6px;padding:5px 10px;background:var(--bg-raise);
}

/* ---------- engagement profiles ---------- */
.profiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prof{
  border:1px solid var(--line-soft);border-radius:var(--r);padding:24px 24px 22px;
  background:var(--bg-raise);display:flex;flex-direction:column;
  transition:border-color .22s,transform .3s cubic-bezier(.2,.7,.3,1);
}
.prof:hover{border-color:var(--line);transform:translateY(-3px)}
.prof > .sector{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.prof > h3{font-size:18px;margin:11px 0 14px;letter-spacing:-.02em}
.prof > dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0 0 15px;font-size:13.4px}
.prof > dl > dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);padding-top:2px}
.prof > dl > dd{margin:0;color:var(--ink-mid)}
.prof > .outcome{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft);font-size:14.2px;color:var(--ink)}
.fill{color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);
  border-radius:4px;padding:0 5px;font-family:var(--mono);font-size:12.5px}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line-soft)}
.cta-glow{position:absolute;width:760px;height:560px;left:50%;translate:-50% 0;bottom:-58%;
  background:radial-gradient(circle,var(--glow) 0%,transparent 64%);pointer-events:none;filter:blur(20px)}

/* ---------- CTA + enquiry form ---------- */
.cta-in{position:relative;padding-block:clamp(8px,1.6vw,18px);
  display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;text-align:left}
.cta-copy > h2{font-size:clamp(30px,3.6vw,44px);margin:14px 0 0;max-width:15ch}
.cta-copy > p{color:var(--ink-mid);margin:16px 0 0;max-width:44ch;font-size:16.5px}
.cta-copy > .direct{margin-top:22px;font-size:14.6px;color:var(--ink-mid)}
.cta-copy > .direct a{color:var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.cta-copy > .direct a:hover{border-bottom-color:var(--accent)}

.form-card{
  background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 26px 24px;box-shadow:0 18px 44px -34px rgba(14,17,56,.5);
}
.form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field > label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-dim);
}
.field > input,.field > textarea{
  font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:11px 13px;width:100%;
  transition:border-color .16s,box-shadow .16s;
}
.field > textarea{resize:vertical;min-height:92px;line-height:1.55}
.field > input::placeholder,.field > textarea::placeholder{color:var(--ink-dim)}
.field > input:focus,.field > textarea:focus{
  outline:none;border-color:var(--accent-solid);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent);
}
.form > .btn{width:100%;justify-content:center;margin-top:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Scoped to the card: a bare .form-note loses to `.cta p`, which was silently
   inflating this to 16.5px — larger than the inputs it sits under. */
.form-card > .form-note{margin-top:13px;font-size:12.8px;color:var(--ink-dim);
  line-height:1.55;max-width:none}
.form-card > .form-note b{color:var(--ink-mid);font-weight:560}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line-soft);padding:46px 0 26px;background:var(--bg-raise)}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.f-top > div > p{font-size:14.4px;color:var(--ink-mid);margin-top:14px;max-width:34ch}
.f-col > h4{font-size:12px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:500;margin-bottom:13px}
.f-col > a{display:block;font-size:14.4px;color:var(--ink-mid);padding:4.5px 0;transition:color .16s}
.f-col > a:hover{color:var(--accent)}
.f-bot{margin-top:34px;padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13.4px;color:var(--ink-dim)}
.f-bot > .socials{display:flex;gap:18px}
.f-bot .socials > a:hover{color:var(--accent)}

/* ---------- reveal ---------- */
/* Content is visible by default. The hidden start state is only applied once
   JS has confirmed it can also remove it — no script, no disappearing page. */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
html.js .rv.in{opacity:1;transform:none}

@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:44px}
  .caps,.work,.eng,.profiles,.practice-grid,.sgs{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr;gap:26px}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:38px}
  .steps::before{display:none}
  .sec-head{grid-template-columns:1fr;gap:20px}
  .f-top{grid-template-columns:1fr 1fr;gap:36px}
  .cta-in{grid-template-columns:1fr;gap:32px}
  .nav-links{display:none}
}
@media (max-width:640px){
  .caps,.work,.eng,.profiles,.practice-grid,.sgs,.steps{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr}
  .hero-meta{gap:14px;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none}
}

/* ===========================================================
   SERVICE PAGES
   =========================================================== */
.page-hero{position:relative;overflow:hidden;padding:clamp(30px,4vw,48px) 0 clamp(34px,4.5vw,54px);
  border-bottom:1px solid var(--line-soft)}
.page-hero .hero-grid-bg{mask-image:radial-gradient(120% 90% at 30% 20%,#000 5%,transparent 75%)}
.ph-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:20px}
.crumb > a{color:var(--ink-dim);transition:color .16s}
.crumb > a:hover{color:var(--accent)}
.crumb > span{opacity:.5}
.page-hero h1{font-size:clamp(34px,4.6vw,56px);max-width:15ch;margin:0}
.page-hero .lede{margin-top:20px;font-size:clamp(16px,1.45vw,18px);color:var(--ink-mid);max-width:52ch}
.page-hero .hero-cta{margin-top:28px}

/* overview + capability rail */
.svc-body{display:grid;grid-template-columns:1fr 268px;gap:56px;align-items:start}
.svc-prose > p{font-size:16.4px;color:var(--ink-mid);line-height:1.72}
.svc-prose > p + p{margin-top:18px}
.svc-prose > h2{font-size:clamp(26px,3.2vw,36px);margin:0 0 20px}
.rail{position:sticky;top:92px;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:22px 20px;background:var(--bg-raise)}
.rail > h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:500;margin:0 0 14px}
.rail > a:not(.btn){display:block;font-size:14.2px;color:var(--ink-mid);padding:7px 0;
  border-bottom:1px solid var(--line-soft);transition:color .16s,padding-left .16s}
.rail > a:not(.btn):last-of-type{border-bottom:0}
.rail > a:not(.btn):hover{color:var(--accent);padding-left:4px}
.rail > a[aria-current]{color:var(--accent);font-weight:530}
.rail > .btn{display:flex;width:100%;justify-content:center;margin-top:18px}

/* faq */
.faq{border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;background:var(--bg-raise)}
.faq > details{border-bottom:1px solid var(--line-soft)}
.faq > details:last-child{border-bottom:0}
.faq details > summary{list-style:none;cursor:pointer;padding:19px 24px;display:flex;gap:16px;
  align-items:flex-start;font-size:16.2px;font-weight:530;letter-spacing:-.015em;
  transition:background .16s}
.faq details > summary::-webkit-details-marker{display:none}
.faq details > summary:hover{background:var(--panel)}
.faq details > summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:19px;
  color:var(--accent);line-height:1;transition:transform .22s;flex-shrink:0}
.faq details[open] > summary::after{transform:rotate(45deg)}
.faq details > .ans{padding:0 24px 21px 24px;font-size:14.9px;color:var(--ink-mid);line-height:1.68;max-width:78ch}
.faq details > .ans ul{margin:11px 0 0;padding-left:19px}
.faq details > .ans li{margin-bottom:6px}

/* related */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel{border:1px solid var(--line-soft);border-radius:var(--r);padding:22px 22px 20px;
  background:var(--bg-raise);transition:border-color .22s,transform .3s cubic-bezier(.2,.7,.3,1)}
.rel:hover{border-color:var(--accent-solid);transform:translateY(-3px)}
.rel > .no{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-dim)}
.rel > h3{font-size:17.5px;margin:10px 0 8px}
.rel > p{font-size:14.2px;color:var(--ink-mid)}
.rel > .go{margin-top:14px;font-size:13px;color:var(--accent);display:block}

/* engagement fit */
.fit{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px}
.fit-card{border:1px solid var(--line-soft);border-radius:var(--r);padding:22px;background:var(--bg-raise)}
.fit-card.on{border-color:var(--accent-solid);background:linear-gradient(160deg,var(--panel),var(--bg-raise))}
.fit-card > h3{font-size:17px;margin:0 0 8px}
.fit-card > p{font-size:14.2px;color:var(--ink-mid)}
.fit-card > .mark{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-dim)}
.fit-card.on > .mark{color:var(--accent)}
.dur{font-size:14.6px;color:var(--ink-mid)}
.dur b{color:var(--ink);font-weight:560}

@media (max-width:1000px){
  .ph-in{grid-template-columns:1fr;gap:32px}
  .svc-body{grid-template-columns:1fr;gap:34px}
  .rail{position:static}
  .related,.fit{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .related,.fit{grid-template-columns:1fr}
}

/* Turnstile: reserves no space in interaction-only mode, but keeps the
   button from jumping if a challenge does appear. */
.form > .cf-turnstile:not(:empty){margin-top:4px}

/* ===========================================================
   CASE STUDIES
   =========================================================== */
.record{position:sticky;top:92px;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:22px 20px;background:var(--bg-raise)}
.record > h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:500;margin:0 0 14px}
.record > dl{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin:0;font-size:13.4px}
.record > dl > dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);padding-top:2px}
.record > dl > dd{margin:0;color:var(--ink-mid)}
.record .nda{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.record .chips{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding-left:0}
.record .chips li{font-size:12px;color:var(--ink-mid);border:1px solid var(--line);
  border-radius:5px;padding:4px 8px;background:var(--bg)}

.chapter{margin-bottom:44px}
.chapter > .k{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:12px}
.chapter > h2{font-size:clamp(24px,2.9vw,32px);margin:0 0 16px;max-width:20ch}
.chapter > p{font-size:16.4px;color:var(--ink-mid);line-height:1.72}
.chapter > p + p{margin-top:16px}

.pull{border-left:2px solid var(--accent-solid);padding:4px 0 4px 22px;margin:36px 0;
  font-size:clamp(18px,2.1vw,22px);line-height:1.5;letter-spacing:-.015em;color:var(--ink);max-width:44ch}

.results{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.results > li{background:var(--bg);padding:18px 20px;font-size:14.6px;color:var(--ink-mid);
  display:flex;gap:12px;align-items:flex-start;line-height:1.6}
.results > li > svg{flex-shrink:0;margin-top:4px;color:var(--accent)}

@media (max-width:1000px){
  .record{position:static}
  .results{grid-template-columns:1fr}
}

/* ===========================================================
   LEGAL PAGES
   =========================================================== */
.legal{max-width:70ch}
.legal > section{margin-bottom:38px}
.legal > section > h2{font-size:clamp(20px,2.2vw,25px);margin:0 0 14px;letter-spacing:-.02em}
.legal p{font-size:15.8px;color:var(--ink-mid);line-height:1.75}
.legal p + p{margin-top:14px}
.legal ul{margin:14px 0 0;padding-left:20px}
.legal li{font-size:15.6px;color:var(--ink-mid);line-height:1.7;margin-bottom:8px}
.legal strong{color:var(--ink);font-weight:560}
.legal a{color:var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 32%,transparent)}
.legal a:hover{border-bottom-color:var(--accent)}
.legal-meta{margin-top:44px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}

/* Per-service hero diagram. Line-art in the site's own language — geometric,
   thin strokes, brand blue — so it reads as part of the page rather than stock art. */
.svc-viz{width:100%;height:auto;max-height:400px}
.svc-viz text{fill:var(--ink-dim)}
@media (max-width:1000px){ .svc-viz{max-height:300px} }

/* Subtle motion on the service diagrams. CSS-only and declarative — no rAF, no
   lifecycle, nothing that can leave a diagram half-rendered the way the hero did.
   One restrained movement each, reinforcing the mechanism rather than decorating it. */
@keyframes svc-flow  { to { stroke-dashoffset:-40 } }
@keyframes svc-pulse { 0%,100% { opacity:.4 } 50% { opacity:1 } }
@keyframes svc-bob   { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-7px) } }
@keyframes svc-slide { 0%,100% { opacity:.25 } 45%,55% { opacity:.95 } }

.svc-viz .flow  { stroke-dasharray:5 5; animation:svc-flow 1.9s linear infinite }
.svc-viz .pulse { animation:svc-pulse 3.2s ease-in-out infinite }
.svc-viz .bob   { animation:svc-bob 5s ease-in-out infinite;
                  transform-box:fill-box; transform-origin:center }
.svc-viz .seq   { animation:svc-slide 4s ease-in-out infinite }
.svc-viz .seq2  { animation-delay:1.1s } .svc-viz .seq3 { animation-delay:2.2s }
.svc-viz .seq4  { animation-delay:3.3s } .svc-viz .seq5 { animation-delay:4.4s }

@media (prefers-reduced-motion: reduce) {
  .svc-viz * { animation:none !important }
}