/* ============================================================
   Northbound — Minimalist system (assertive minimalism)
   paper + ink + one blue · Archivo / Public Sans / JetBrains Mono
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:clip; }
:root{
  --paper:#f4f2ec; --paper-2:#ece9e1; --ink:#15181d; --ink-soft:#5b626b;
  --line:#dcd8d0; --line-2:#c9c4ba; --blue:#2257e8; --blue-soft:rgba(34,87,232,0.08);
  --display:'Archivo',system-ui,sans-serif; --body:'Public Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace; --maxw:1120px;
}
body{ background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px;
  line-height:1.6; letter-spacing:-0.005em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--display); font-weight:700; letter-spacing:-0.03em; line-height:1.02; }
img{ display:block; max-width:100%; }

.kicker{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:12px; }
.kicker::before{ content:''; width:26px; height:1px; background:var(--blue); }
.kicker.nodash::before{ display:none; }
.accent{ color:var(--blue); }

/* nav */
nav{ position:sticky; top:0; z-index:50; background:rgba(244,242,236,0.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav-in{ max-width:var(--maxw); margin:0 auto; padding:0 40px; height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.logo{ font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-0.02em; }
.logo .accent{ color:var(--blue); }
.nav-links{ display:flex; gap:34px; list-style:none; }
.nav-links a{ font-size:14.5px; color:var(--ink-soft); transition:color .2s; }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-cta{ font-size:14px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:8px; border-bottom:1.5px solid var(--blue); padding-bottom:3px; transition:gap .2s; justify-self:end; }
.nav-cta:hover{ gap:12px; }
/* nav dropdown */
.nav-links .has-drop{ position:relative; }
.drop-toggle{ font-family:var(--body); font-size:14.5px; color:var(--ink-soft); background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:0; transition:color .2s; }
.drop-toggle .caret{ font-size:13px; line-height:1; color:var(--blue); transition:transform .25s ease; display:inline-block; transform:translateY(1px); }
.has-drop:hover .drop-toggle .caret{ transform:translateY(1px) rotate(180deg); }
.has-drop:hover .drop-toggle, .drop-toggle.active{ color:var(--ink); }
.drop-menu{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px); min-width:308px; background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:0 24px 48px -24px rgba(21,24,29,0.35); padding:8px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:60; }
.has-drop:hover .drop-menu, .has-drop.open .drop-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.has-drop.open .drop-toggle{ color:var(--ink); }
.has-drop::after{ content:''; position:absolute; top:100%; left:-20px; right:-20px; height:18px; }
.drop-menu a{ display:block; padding:12px 14px; border-radius:8px; transition:background .15s ease; }
.drop-menu a:hover{ background:var(--paper-2); }
.drop-menu .dm-t{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.drop-menu .dm-d{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:3px; line-height:1.4; }

/* mobile nav */
.nav-burger{ display:none; width:42px; height:42px; background:none; border:0; cursor:pointer; position:relative; justify-self:end; }
.nav-burger span{ position:absolute; left:10px; right:10px; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav-burger span:nth-child(1){ top:16px; }
.nav-burger span:nth-child(2){ top:24px; }
nav.open .nav-burger span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
nav.open .nav-burger span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }
@media(max-width:820px){
  .nav-in{ grid-template-columns:1fr auto auto; gap:16px; }
  .nav-burger{ display:block; }
  .nav-cta{ justify-self:end; }
  .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:6px 24px 20px;
    box-shadow:0 30px 44px -30px rgba(21,24,29,0.45); }
  nav.open .nav-links{ display:flex; }
  .nav-links li{ border-top:1px solid var(--line); }
  .nav-links li:first-child{ border-top:0; }
  .nav-links a, .drop-toggle{ display:flex; width:100%; padding:15px 0; font-size:16px; }
  .has-drop::after{ display:none; }
  .drop-menu{ position:static; transform:none; min-width:0; opacity:1; visibility:hidden; pointer-events:auto;
    border:0; box-shadow:none; background:transparent; padding:0 0 10px 16px; display:none; }
  .has-drop.open .drop-menu, .has-drop:hover .drop-menu{ position:static; transform:none; visibility:visible; display:block; }
  .drop-menu a{ display:block; padding:10px 0; }
}

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--paper); font-family:var(--body); font-weight:600; font-size:15.5px; padding:15px 26px; border-radius:2px; border:none; cursor:pointer; transition:transform .2s, background .2s; }
.btn:hover{ transform:translateY(-2px); background:var(--blue); }
.btn-text{ font-weight:600; font-size:15.5px; display:inline-flex; align-items:center; gap:9px; color:var(--ink); }
.btn-text .ar{ transition:transform .2s; }
.btn-text:hover .ar{ transform:translateX(5px); }

/* hero */
.hero{ padding:130px 0 110px; border-bottom:1px solid var(--line); }
.hero.short{ padding:120px 0 90px; }
.hero h1{ font-size:clamp(44px,7vw,92px); font-weight:800; max-width:15ch; margin:30px 0 0; }
.hero.short h1{ font-size:clamp(40px,5.6vw,72px); }
.hero .lede{ font-size:clamp(18px,2vw,21px); color:var(--ink-soft); max-width:58ch; margin-top:30px; line-height:1.55; }
.hero-actions{ margin-top:46px; display:flex; align-items:center; gap:30px; flex-wrap:wrap; }

/* cinematic media hero — light treatment: media washed toward paper, dark ink text */
.media-hero{ position:relative; min-height:68vh; display:flex; align-items:center; overflow:hidden; background:var(--paper); }
.media-hero .mh-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(0.72) brightness(1.16) contrast(0.94) saturate(0.8); opacity:0.85;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.32) 0%, #000 14%, #000 48%, rgba(0,0,0,0.5) 70%, transparent 85%);
          mask-image:linear-gradient(180deg, rgba(0,0,0,0.32) 0%, #000 14%, #000 48%, rgba(0,0,0,0.5) 70%, transparent 85%); }
/* paper wash — light at top so the media reads, then dissolves fully into paper by ~85% so the bottom is a clean paper base (no hard cut) */
.media-hero::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(244,242,236,0.28) 0%, rgba(244,242,236,0.44) 28%, rgba(244,242,236,0.66) 50%, rgba(244,242,236,0.90) 68%, var(--paper) 84%); }
/* faint blue duotone tint to tie media to the palette */
.media-hero::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:var(--blue); opacity:0.05; mix-blend-mode:multiply; }
.media-hero .mh-in{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:56px 40px 132px; }
.media-hero .kicker{ color:var(--ink-soft); }
.media-hero h1{ color:var(--ink); font-family:var(--display); font-weight:800; font-size:clamp(42px,6.4vw,86px); letter-spacing:-0.03em; line-height:1.02; max-width:16ch; margin:26px 0 0; }
.media-hero h1 .accent{ color:var(--blue); }
.media-hero .lede{ color:var(--ink-soft); max-width:58ch; margin-top:24px; font-size:clamp(17px,1.9vw,20px); line-height:1.55; }
.media-hero .hero-actions{ margin-top:40px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
@media(max-width:780px){ .media-hero{ min-height:60vh; } .media-hero .mh-in{ padding:100px 24px 48px; } }

/* metrics */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.metric{ padding:46px 30px; border-right:1px solid var(--line); text-align:center; }
.metric:last-child{ border-right:0; }
.metric .num{ font-family:var(--display); font-weight:700; font-size:clamp(34px,4vw,52px); letter-spacing:-0.04em; }
.metric .lbl{ font-size:14px; color:var(--ink-soft); margin-top:8px; }
@media(max-width:780px){ .metrics{ grid-template-columns:1fr 1fr; } .metric{ padding:30px 20px; } .metric:nth-child(2){ border-right:0; } }

/* sections */
section{ padding:120px 0; border-bottom:1px solid var(--line); }
section.tight{ padding:90px 0; }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:60px; }
.sec-head h2{ font-size:clamp(30px,3.6vw,46px); font-weight:700; max-width:18ch; margin-top:18px; }
.sec-head p{ color:var(--ink-soft); max-width:34ch; font-size:15.5px; }
@media(max-width:780px){ .sec-head{ flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:40px; } }

/* capability / ruled list */
.cap{ display:grid; grid-template-columns:64px 1.1fr 1.4fr auto; align-items:baseline; gap:24px; padding:34px 0; border-top:1px solid var(--line); transition:padding-left .25s ease; }
.cap:last-child{ border-bottom:1px solid var(--line); }
.cap:hover{ padding-left:10px; }
.cap .idx{ font-family:var(--mono); font-size:13px; color:var(--blue); }
.cap h3{ font-size:23px; font-weight:600; letter-spacing:-0.02em; }
.cap p{ color:var(--ink-soft); font-size:15.5px; line-height:1.55; }
.cap .go{ font-size:14px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:color .2s; }
.cap:hover .go{ color:var(--blue); }
@media(max-width:780px){ .cap{ grid-template-columns:40px 1fr; } .cap p, .cap .go{ grid-column:2; } }

/* ── Feature rows (alternating image / text) — light paper theme ── */
.feature-rows{ display:flex; flex-direction:column; gap:22px; margin-top:14px; }
.feature-row{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:0 1px 2px rgba(21,24,29,0.04);
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.feature-row:hover{ border-color:rgba(34,87,232,0.32); box-shadow:0 18px 40px -20px rgba(21,24,29,0.28); transform:translateY(-2px); }
.feature-media{ position:relative; min-height:420px; overflow:hidden; background:var(--ink); }
.feature-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.03); filter:grayscale(.18) saturate(.92) brightness(.96);
  transition:transform .8s cubic-bezier(.2,.7,.25,1);
}
.feature-row:hover .feature-media img{ transform:scale(1.08); }
/* melt the inner edge of the image into the paper card */
.feature-media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(236,233,225,0) 72%, var(--paper-2) 100%);
}
.feature-row.reverse .feature-media::after{
  background:linear-gradient(270deg, rgba(236,233,225,0) 72%, var(--paper-2) 100%);
}
.feature-text{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:left; padding:52px 56px; }
.feature-index{
  font-family:var(--mono); font-size:13px; font-weight:600; color:var(--blue);
  margin-bottom:18px; font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:center; gap:9px;
}
.feature-index::after{ content:''; width:24px; height:1px; background:currentColor; opacity:.4; }
.feature-text h3{ font-family:var(--display); font-size:clamp(24px,2.6vw,33px); font-weight:800; letter-spacing:-0.03em; line-height:1.1; margin-bottom:16px; color:var(--ink); }
.feature-text p{ font-size:15.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:26px; max-width:46ch; }
.feature-link{ display:inline-flex; align-items:center; gap:7px; color:var(--blue); font-weight:600; font-size:14px; letter-spacing:-0.01em; text-decoration:none; transition:gap .2s ease; }
.feature-link svg{ transition:transform .2s ease; }
.feature-link:hover{ gap:11px; }
.feature-link:hover svg{ transform:translateX(4px); }
.feature-row.reverse .feature-media{ order:2; }
.feature-row.reverse .feature-text{ order:1; }
@media(max-width:860px){
  .feature-row, .feature-row.reverse{ grid-template-columns:1fr; }
  .feature-row .feature-media, .feature-row.reverse .feature-media{ order:0; min-height:230px; }
  .feature-row .feature-text, .feature-row.reverse .feature-text{ order:0; padding:34px 28px; }
  .feature-media::after, .feature-row.reverse .feature-media::after{ background:linear-gradient(180deg, rgba(236,233,225,0) 64%, var(--paper-2) 100%); }
}

/* ── Flow diagram (how it works) — paper theme ── */
.diagram{ background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:38px 36px 30px; width:100%; max-width:680px; margin:14px auto 0; position:relative; overflow:hidden; isolation:isolate; }
/* soft blue glow that breathes behind the engine */
.diagram::after{ content:''; position:absolute; left:50%; top:50%; width:340px; height:340px; transform:translate(-50%,-50%); z-index:0; pointer-events:none; background:radial-gradient(circle, rgba(34,87,232,0.15), transparent 66%); animation:diagGlow 5s ease-in-out infinite; }
@keyframes diagGlow{ 0%,100%{ opacity:0.5; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:0.95; transform:translate(-50%,-50%) scale(1.14); } }

.diagram .top-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; position:relative; z-index:2; }
.diagram .input-node{ background:var(--paper); border:1px solid var(--line-2); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s; }
.diagram .input-node:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -20px rgba(21,24,29,0.5); }
.diagram .input-node.ours{ border-color:rgba(34,87,232,0.35); background:var(--blue-soft); }
.diagram .input-node.ours:hover{ border-color:var(--blue); box-shadow:0 16px 32px -16px rgba(34,87,232,0.5); }
.diagram .input-icons{ display:flex; gap:6px; margin-bottom:2px; }
.diagram .input-icon-pill{ width:22px; height:22px; border-radius:5px; background:var(--paper-2); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; transition:transform .25s ease; }
.diagram .input-node:hover .input-icon-pill{ transform:translateY(-2px); }
.diagram .input-node:hover .input-icon-pill:nth-child(2){ transition-delay:.05s; }
.diagram .input-node:hover .input-icon-pill:nth-child(3){ transition-delay:.1s; }
.diagram .input-node.ours .input-icon-pill{ background:rgba(34,87,232,0.1); border-color:rgba(34,87,232,0.25); }
.diagram .input-label{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); }
.diagram .input-node.ours .input-label{ color:var(--blue); }
.diagram .input-bars{ display:flex; flex-direction:column; gap:5px; }
.diagram .input-bar{ height:4px; border-radius:2px; background:var(--line-2); position:relative; overflow:hidden; }
.diagram .input-bar.w100{ width:100%; } .diagram .input-bar.w70{ width:70%; } .diagram .input-bar.w55{ width:55%; }
.diagram .input-bar.accent{ background:rgba(34,87,232,0.4); }
/* live-data shimmer running along the "our automation" bars */
.diagram .input-bar.accent::after{ content:''; position:absolute; top:0; bottom:0; left:0; width:40%; background:linear-gradient(90deg, transparent, rgba(34,87,232,0.9), transparent); transform:translateX(-120%); animation:barFlow 2.4s linear infinite; }
.diagram .input-bars .input-bar.accent:nth-child(2)::after{ animation-delay:.45s; }
.diagram .input-bars .input-bar.accent:nth-child(3)::after{ animation-delay:.9s; }
@keyframes barFlow{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(360%); } }

.diagram .connector-svg{ width:100%; height:60px; display:block; overflow:visible; position:relative; z-index:1; }
.diagram .flow-dot{ fill:var(--blue); filter:drop-shadow(0 0 3px rgba(34,87,232,0.8)); }
.diagram .branch-dot{ fill:var(--blue); filter:drop-shadow(0 0 3px rgba(34,87,232,0.7)); }
/* dispatch area + crisp confirmation badge (kept out of the stretched SVG so it stays round) */
.diagram .dispatch{ position:relative; z-index:1; }
.diagram .dispatch-svg{ width:100%; height:56px; display:block; overflow:visible; }
.diagram .engine-check{ position:absolute; left:50%; top:20px; transform:translate(-50%,-50%); width:24px; height:24px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 11px -3px rgba(34,87,232,0.55); }
.diagram .engine-check svg{ width:13px; height:13px; }
/* card → engine feeder line lights up on output-card hover */
.diagram .feed-line{ transition:stroke .25s ease, stroke-width .25s ease; }
.diagram .feed-grp.feed-on .feed-line{ stroke:var(--blue); stroke-width:2; }

.diagram .engine-box{ background:var(--paper); border:1px solid rgba(34,87,232,0.3); border-radius:10px; padding:13px 18px; display:flex; align-items:center; gap:10px; position:relative; z-index:2; overflow:hidden; animation:enginePulse 3s ease-in-out infinite; }
@keyframes enginePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(34,87,232,0); border-color:rgba(34,87,232,0.3); } 50%{ box-shadow:0 10px 30px -12px rgba(34,87,232,0.55); border-color:rgba(34,87,232,0.6); } }
/* scanning sheen sweeping across the engine */
.diagram .engine-box::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:45%; background:linear-gradient(90deg, transparent, rgba(34,87,232,0.14), transparent); transform:translateX(-120%); animation:engineScan 3.2s ease-in-out infinite; pointer-events:none; }
@keyframes engineScan{ 0%{ transform:translateX(-120%); } 60%,100%{ transform:translateX(260%); } }
.diagram .engine-dots{ display:flex; gap:6px; position:relative; z-index:1; }
.diagram .engine-dot{ width:7px; height:7px; border-radius:50%; background:var(--line-2); animation:dotSeq 1.6s ease-in-out infinite; }
.diagram .engine-dot:nth-child(2){ animation-delay:.16s; }
.diagram .engine-dot:nth-child(3){ animation-delay:.32s; }
.diagram .engine-dot:nth-child(4){ animation-delay:.48s; }
.diagram .engine-dot:nth-child(5){ animation-delay:.64s; }
@keyframes dotSeq{ 0%,100%{ background:var(--line-2); transform:scale(1); } 45%{ background:var(--blue); transform:scale(1.28); } }
.diagram .engine-label{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); margin-left:auto; position:relative; z-index:1; }

.diagram .output-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; position:relative; z-index:2; }
.diagram .out-card{ background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:14px 12px; display:flex; flex-direction:column; gap:8px; text-decoration:none; cursor:pointer; transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s; }
.diagram .out-card:hover{ transform:translateY(-4px); border-color:var(--blue); box-shadow:0 18px 34px -18px rgba(34,87,232,0.5); }
.diagram .out-card-icon{ width:28px; height:28px; border-radius:6px; background:rgba(34,87,232,0.1); display:flex; align-items:center; justify-content:center; transition:background .25s ease, transform .25s ease; }
.diagram .out-card:hover .out-card-icon{ background:var(--blue); transform:scale(1.08); }
.diagram .out-card:hover .out-card-icon svg{ stroke:#fff; }
.diagram .out-card-label{ font-family:var(--display); font-size:12.5px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); line-height:1.15; transition:color .25s ease; }
.diagram .out-card:hover .out-card-label{ color:var(--blue); }
.diagram .out-bar{ height:3px; border-radius:2px; background:var(--line-2); transition:background .3s ease, width .4s cubic-bezier(.2,.7,.3,1); }
.diagram .out-bar.w100{ width:100%; } .diagram .out-bar.w70{ width:70%; }
.diagram .out-card:hover .out-bar{ background:rgba(34,87,232,0.6); }
.diagram .out-card:hover .out-bar.w70{ width:100%; }
.diagram .diag-annotation{ text-align:center; font-family:var(--mono); font-size:10px; color:var(--ink-soft); letter-spacing:0.08em; text-transform:uppercase; margin-top:22px; position:relative; z-index:2; }

/* staggered build-in once the panel scrolls into view */
.diagram .top-row, .diagram .connector-svg, .diagram .engine-box, .diagram .dispatch, .diagram .output-row, .diagram .diag-annotation{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.diagram.in .top-row{ opacity:1; transform:none; transition-delay:.05s; }
.diagram.in .connector-svg{ opacity:1; transform:none; transition-delay:.2s; }
.diagram.in .engine-box{ opacity:1; transform:none; transition-delay:.32s; }
.diagram.in .dispatch{ opacity:1; transform:none; transition-delay:.46s; }
.diagram.in .output-row{ opacity:1; transform:none; transition-delay:.58s; }
.diagram.in .diag-annotation{ opacity:1; transform:none; transition-delay:.72s; }

@media(max-width:560px){ .diagram{ padding:28px 20px 24px; } .diagram .out-card-label{ font-size:11px; } }
@media(prefers-reduced-motion:reduce){
  .diagram::after, .diagram .engine-box, .diagram .engine-box::before, .diagram .engine-dot, .diagram .input-bar.accent::after{ animation:none !important; }
  .diagram .top-row, .diagram .connector-svg, .diagram .engine-box, .diagram .dispatch, .diagram .output-row, .diagram .diag-annotation{ opacity:1 !important; transform:none !important; }
}

/* service group (services page) */
.svc{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; padding:70px 0; border-top:1px solid var(--line); }
.svc:last-of-type{ border-bottom:1px solid var(--line); }
.svc-h .idx{ font-family:var(--mono); font-size:13px; color:var(--blue); }
.svc-h h3{ font-size:clamp(26px,3vw,36px); font-weight:700; margin:16px 0 14px; }
.svc-h p{ color:var(--ink-soft); font-size:16px; max-width:38ch; }
.svc-items{ display:flex; flex-direction:column; }
.svc-item{ padding:22px 0; border-top:1px solid var(--line); }
.svc-item:first-child{ border-top:0; padding-top:0; }
.svc-item h4{ font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-0.01em; margin-bottom:7px; }
.svc-item p{ color:var(--ink-soft); font-size:15px; line-height:1.55; }
@media(max-width:820px){ .svc{ grid-template-columns:1fr; gap:28px; padding:48px 0; } }

/* two-col generic */
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.cols2 .item h4{ font-family:var(--display); font-size:18px; font-weight:600; margin-bottom:8px; }
.cols2 .item p{ color:var(--ink-soft); font-size:15px; }
.cols2 .item{ padding:28px 0; border-top:1px solid var(--line); }
@media(max-width:780px){ .cols2{ grid-template-columns:1fr; } }

/* quotes */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.quote p{ font-size:16px; line-height:1.6; }
.quote .by{ font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--ink-soft); margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
@media(max-width:780px){ .quotes{ grid-template-columns:1fr; gap:30px; } }

/* graph / chart */
.graph-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center; }
.graph-copy h2{ font-size:clamp(28px,3.2vw,40px); font-weight:700; max-width:16ch; margin:18px 0 22px; }
.graph-copy p{ color:var(--ink-soft); font-size:16px; max-width:42ch; margin-bottom:26px; }
.legend{ display:flex; flex-direction:column; gap:14px; }
.leg{ display:flex; align-items:center; gap:12px; font-size:14.5px; }
.leg .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.leg .v{ font-family:var(--mono); margin-left:auto; font-size:13px; color:var(--ink); }
.chart{ background:var(--paper-2); border:1px solid var(--line); padding:30px 30px 22px; }
.chart-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.chart-top .t{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); }
.chart-top .live{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--blue); display:inline-flex; align-items:center; gap:7px; }
.chart-top .live i{ width:7px; height:7px; border-radius:50%; background:var(--blue); display:inline-block; animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
.chart svg{ width:100%; height:auto; display:block; }
.xaxis{ display:flex; justify-content:space-between; margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--ink-soft); }
@media(max-width:860px){ .graph-grid{ grid-template-columns:1fr; gap:40px; } }

/* before / after case study */
.ba-head{ margin-bottom:44px; }
.ba-head h2{ font-family:var(--display); font-size:clamp(28px,3.4vw,44px); font-weight:800; letter-spacing:-0.03em; line-height:1.05; margin:16px 0 14px; max-width:20ch; }
.ba-head p{ color:var(--ink-soft); font-size:16px; line-height:1.6; max-width:66ch; }
.ba-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.ba-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:28px 28px 14px; transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s; }
.ba-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(21,24,29,0.4); }
.ba-after{ border-color:rgba(34,87,232,0.4); background:linear-gradient(180deg, rgba(34,87,232,0.06), var(--paper-2) 55%); }
.ba-after:hover{ border-color:var(--blue); box-shadow:0 22px 46px -20px rgba(34,87,232,0.45); }
.ba-card-head{ margin-bottom:8px; }
.ba-tag{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:8px; }
.ba-tag::before{ content:''; width:8px; height:8px; border-radius:50%; background:#c0584f; }
.ba-after .ba-tag{ color:var(--blue); }
.ba-after .ba-tag::before{ background:var(--blue); }
.ba-card-head h3{ font-family:var(--display); font-size:18px; font-weight:700; letter-spacing:-0.02em; margin-top:12px; color:var(--ink); }
.ba-rows{ list-style:none; }
.ba-rows li{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; min-height:52px; padding:11px 0; border-top:1px solid var(--line); }
.ba-rows li:first-child{ border-top:none; }
.ba-label{ font-size:14px; color:var(--ink-soft); line-height:1.3; }
.ba-val{ font-family:var(--display); font-weight:700; font-size:16.5px; letter-spacing:-0.01em; white-space:nowrap; }
.ba-before .ba-val{ color:#9a7e74; }
.ba-after .ba-val{ color:var(--ink); }
.ba-right{ display:inline-flex; align-items:center; gap:10px; justify-content:flex-end; }
.ba-delta{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.03em; color:var(--blue); background:rgba(34,87,232,0.1); border:1px solid rgba(34,87,232,0.22); border-radius:20px; padding:2px 9px; white-space:nowrap; opacity:0; transform:translateX(-6px); transition:opacity .5s ease, transform .5s ease; }
.ba-after.in .ba-delta{ opacity:1; transform:none; }
.ba-after.in .ba-rows li:nth-child(2) .ba-delta{ transition-delay:.08s; }
.ba-after.in .ba-rows li:nth-child(3) .ba-delta{ transition-delay:.16s; }
.ba-after.in .ba-rows li:nth-child(4) .ba-delta{ transition-delay:.24s; }
.ba-after.in .ba-rows li:nth-child(5) .ba-delta{ transition-delay:.32s; }
.ba-after.in .ba-rows li:nth-child(6) .ba-delta{ transition-delay:.4s; }
/* center arrow */
.ba-vs{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; width:40px; height:40px; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -5px rgba(21,24,29,0.55); }
/* outcome strip */
.ba-outcome{ margin-top:24px; background:var(--ink); color:var(--paper); border-radius:16px; padding:26px 32px; display:flex; align-items:center; gap:38px; flex-wrap:wrap; }
.ba-out-item{ display:flex; flex-direction:column; gap:5px; }
.ba-out-item b{ font-family:var(--display); font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-0.03em; line-height:1; color:#fff; }
.ba-out-item:first-child b{ color:#6f9bff; }
.ba-out-item span{ font-size:12.5px; color:rgba(244,242,236,0.72); letter-spacing:0.01em; }
.ba-out-item span em{ font-style:normal; color:rgba(244,242,236,0.42); }
.ba-outcome .btn{ margin-left:auto; background:var(--blue); color:#fff; }
.ba-outcome .btn:hover{ background:#1c49c4; transform:translateY(-2px); }
@media(max-width:780px){
  .ba-grid{ grid-template-columns:1fr; gap:14px; }
  .ba-vs{ display:none; }
  .ba-outcome{ gap:24px; padding:24px; }
  .ba-outcome .btn{ margin-left:0; width:100%; justify-content:center; }
}
@media(prefers-reduced-motion:reduce){ .ba-delta{ opacity:1; transform:none; } }

/* mini stat bars (dashboard-ish, minimal) */
.bars{ display:flex; flex-direction:column; gap:20px; }
.bar-row{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; }
.bar-row .bl{ font-size:14.5px; }
.bar-row .bv{ font-family:var(--mono); font-size:13px; color:var(--ink-soft); }
.bar-track{ grid-column:1 / -1; height:6px; background:var(--paper-2); border:1px solid var(--line); position:relative; overflow:hidden; }
.bar-fill{ position:absolute; inset:0 auto 0 0; background:var(--blue); }

/* feature list w/ bullets (supply-chain detail) */
.flist{ list-style:none; display:flex; flex-direction:column; gap:0; }
.flist li{ padding:16px 0 16px 24px; border-top:1px solid var(--line); position:relative; font-size:15.5px; color:var(--ink-soft); }
.flist li:first-child{ border-top:0; }
.flist li::before{ content:''; position:absolute; left:0; top:23px; width:9px; height:1px; background:var(--blue); }
.flist li b{ color:var(--ink); font-weight:600; }

/* about — founders */
.founder{ display:grid; grid-template-columns:240px 1fr; gap:52px; padding:64px 0; border-top:1px solid var(--line); align-items:start; }
.founder:last-of-type{ border-bottom:1px solid var(--line); }
.founder .ph{ width:220px; height:264px; border-radius:4px; overflow:hidden; border:1px solid var(--line); }
.founder .ph img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.founder .nm{ font-family:var(--display); font-size:22px; font-weight:700; }
.founder .role{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue); margin:6px 0 20px; }
.founder .bio p{ color:var(--ink-soft); font-size:15.5px; margin-bottom:14px; max-width:60ch; }
.founder .bio b{ color:var(--ink); font-weight:600; }
@media(max-width:780px){ .founder{ grid-template-columns:1fr; gap:24px; } .founder .ph{ width:170px; height:204px; } }

.pull{ text-align:center; padding:30px 0; }
.pull q{ font-family:var(--display); font-size:clamp(22px,3vw,34px); font-weight:600; font-style:italic; letter-spacing:-0.02em; }
.pull .sub{ font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:18px; }

/* contact form */
.contact-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:start; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.field label{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
.field input, .field select, .field textarea{ font-family:var(--body); font-size:15.5px; color:var(--ink); background:transparent; border:none; border-bottom:1px solid var(--line-2); padding:10px 0; outline:none; transition:border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue); }
.field textarea{ resize:vertical; min-height:96px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.aside-block{ border:1px solid var(--line); padding:32px; }
.aside-block h3{ font-size:20px; font-weight:700; margin-bottom:10px; }
.aside-block p{ color:var(--ink-soft); font-size:15px; margin-bottom:20px; }
.aside-meta{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-top:14px; }
.info-list{ list-style:none; margin-top:30px; display:flex; flex-direction:column; }
.info-list li{ padding:18px 0; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-soft); }
.info-list li b{ color:var(--ink); font-weight:600; }
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } .field-row{ grid-template-columns:1fr; } }

/* CTA */
.cta{ text-align:center; padding:140px 0; border-bottom:1px solid var(--line); }
.cta h2{ font-size:clamp(34px,5vw,68px); font-weight:800; max-width:16ch; margin:24px auto 0; }
.cta p{ color:var(--ink-soft); max-width:48ch; margin:26px auto 40px; font-size:17px; }

/* footer */
footer{ padding:50px 0; }
.foot-in{ max-width:var(--maxw); margin:0 auto; padding:0 40px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.foot-in .logo{ font-size:16px; }
.foot-links{ display:flex; gap:28px; list-style:none; }
.foot-links a{ font-size:13.5px; color:var(--ink-soft); }
.foot-links a:hover{ color:var(--ink); }
.foot-copy{ font-size:13px; color:var(--ink-soft); justify-self:end; }
@media(max-width:780px){ .foot-in{ display:flex; flex-direction:column; text-align:center; } .foot-copy, .nav-cta{ justify-self:auto; } }

/* reveal */
.rv{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.rv.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } }