/* ==========================================================================
   THINKASOL — site.css
   Version B editorial system rendered in the approved light palette.
   Sections are predominantly light (#FCFCFD / #F4F1EC / #F8FAFC) with two
   deliberate dark navy (#0A0F1C) moments: the Solutions explorer and the
   closing CTA — the "Dark CTA/surface" role in the approved palette.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset) ---------------------------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/archivo-400.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/archivo-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/archivo-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2')}

/* ---------- Tokens ------------------------------------------------------- */
:root{
  --bg:#FCFCFD;
  --surface-warm:#F4F1EC;
  --surface-cool:#F8FAFC;
  --surface-card:#FFFFFF;
  --ink:#0A0F1C;
  --ink-body:#4E5457;
  --ink-dim:#6C7276;
  --ink-faint:#8A9095;
  --brand:#0033CC;
  --brand-deep:#002299;
  --brand-tint:#E8EDF5;
  --cyan:#37BDD1;
  --dark:#0A0F1C;
  --dark-2:#0E1424;
  --dark-ink:#F7F8FA;
  --dark-body:#AEB6C2;
  --dark-dim:#79828F;
  --line:rgba(10,15,28,0.12);
  --line-soft:rgba(10,15,28,0.08);
  --line-strong:rgba(10,15,28,0.18);
  --dark-line:rgba(255,255,255,0.14);
  --dark-line-soft:rgba(255,255,255,0.09);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --display-xl:clamp(40px,6.6vw,92px);
  --display-l:clamp(34px,4.7vw,66px);
  --display-m:clamp(30px,3.6vw,50px);
  --display-s:clamp(27px,3.2vw,44px);
  --header-h:78px;
}

/* ---------- Reset / base ------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink-body);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3{margin:0;color:var(--ink);font-weight:600;letter-spacing:-.02em;line-height:1.05}
p{margin:0}
a{color:var(--brand);text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}
.section--dark :focus-visible,.hero :focus-visible{outline-color:var(--cyan)}

.container{width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
.mono{font-family:var(--mono)}

.skip-link{
  position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-160%);
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:3px;font-size:14px;font-weight:600;
  transition:transform .25s var(--ease-out);
}
.skip-link:focus{transform:translateY(0);color:#fff}

/* ---------- Typography helpers ------------------------------------------ */
.display{color:var(--ink);text-wrap:balance}
.display--xl{font-size:var(--display-xl);line-height:.94;letter-spacing:-.042em}
.display--l{font-size:var(--display-l);line-height:.99;letter-spacing:-.036em}
.display--m{font-size:var(--display-m);line-height:1.03;letter-spacing:-.03em}
.display--s{font-size:var(--display-s);line-height:1.08;letter-spacing:-.026em}

.eyebrow{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--mono);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim)}
.eyebrow__dot{width:6px;height:6px;background:var(--cyan);display:block;flex:none}
.eyebrow__dot--pulse{animation:tsl-blink 3s ease-in-out infinite}

.section-head{display:flex;align-items:center;gap:16px;margin:0 0 clamp(40px,5vw,64px);
  padding-bottom:24px;border-bottom:1px solid var(--line)}
.section-head__num{font-size:10.5px;letter-spacing:.22em;color:var(--brand)}
.section-head__num--cyan{color:var(--cyan)}
.section-head__label{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.section-head--dark{border-bottom-color:var(--dark-line)}
.section-head--dark .section-head__label{color:var(--dark-dim)}

.prose{display:grid;gap:16px;max-width:52ch}
.prose p{font-size:16px;line-height:1.64;color:var(--ink-body)}
.prose--tight{gap:14px}
.prose--tight p{font-size:15.5px;line-height:1.62}
.prose__lead{color:var(--ink)!important;font-weight:500}
.prose--invert p{color:var(--dark-body)}
.prose--invert .prose__lead{color:var(--dark-ink)!important}

.link-underline{display:inline-flex;align-items:center;gap:10px;margin-top:6px;justify-self:start;
  color:var(--ink);font-size:14px;font-weight:600;border-bottom:1px solid var(--line-strong);
  padding-bottom:6px;transition:color .25s var(--ease-out),border-color .25s var(--ease-out)}
.link-underline:hover{color:var(--brand);border-color:var(--brand)}
.link-underline span{font-family:var(--mono);font-size:12px}

/* ---------- Buttons ----------------------------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:15px 24px;border-radius:3px;font-size:14px;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .16s var(--ease-out),background .25s var(--ease-out),
    border-color .3s var(--ease-out),color .25s var(--ease-out),box-shadow .3s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn__arrow{font-family:var(--mono);font-size:12px;display:inline-block;transition:transform .3s var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(5px)}

.btn--primary{background:var(--brand);color:#fff;box-shadow:0 8px 22px rgba(0,51,204,.20)}
.btn--primary:hover{background:var(--brand-deep);color:#fff;box-shadow:0 10px 28px rgba(0,51,204,.28)}
.btn--primary::after{content:"";position:absolute;top:0;left:0;height:100%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-220%) skewX(-14deg);transition:transform .8s var(--ease-out);pointer-events:none}
.btn--primary:hover::after{transform:translateX(380%) skewX(-14deg)}

.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#1b2233;color:#fff}

.btn--ghost{color:var(--ink);border-color:var(--line-strong)}
.btn--ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease-drawer)}
.btn--ghost:hover{color:#fff;border-color:var(--ink)}
.btn--ghost:hover::before{transform:scaleX(1)}

.btn--ghost-dark{color:var(--ink);border-color:var(--line-strong)}
.btn--ghost-dark:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.btn--ghost-invert{color:var(--dark-ink);border-color:rgba(255,255,255,.28)}
.btn--ghost-invert::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--surface-warm);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease-drawer)}
.btn--ghost-invert:hover{color:var(--ink);border-color:var(--surface-warm)}
.btn--ghost-invert:hover::before{transform:scaleX(1)}

/* ---------- Header ------------------------------------------------------ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;will-change:transform;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease,transform .4s cubic-bezier(.4,0,.2,1)}
/* header shows only at the top of the page; slides away once scrolled down */
.site-header.is-hidden{transform:translateY(-100%)}
.site-header.is-scrolled{background:rgba(252,252,253,.86);border-bottom-color:var(--line);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px)}
.site-header__inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;
  gap:20px;transition:height .35s ease}
.site-header.is-scrolled .site-header__inner{height:64px}

.brand{display:inline-flex;align-items:center;gap:10px;transition:opacity .25s var(--ease-out)}
.brand:hover{opacity:.74}
.brand__icon{height:36px;width:auto;flex:none;transition:height .35s ease}
.site-header.is-scrolled .brand__icon{height:32px}
.brand__logo{height:28px;width:auto}
.site-header.is-scrolled .brand__logo{height:25px;transition:height .35s ease}

.site-nav__list{display:flex;align-items:center;gap:34px;margin:0;padding:0;list-style:none}
.site-nav__link{position:relative;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim);transition:color .25s var(--ease-out)}
.site-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-out)}
.site-nav__link:hover,.site-nav__link[aria-current]{color:var(--ink)}
.site-nav__link:hover::after,.site-nav__link[aria-current]::after{transform:scaleX(1)}
/* Five nav items remain full-size on desktop. Tighten only the inter-item
   rhythm on smaller laptops; tablets switch to the mobile navigation below. */
@media (max-width:1180px){.site-nav__list{gap:20px}}

.site-header__actions{display:flex;align-items:center;gap:14px}
.site-header__cta{padding:11px 18px;font-size:12px}

.nav-toggle{display:none;width:44px;height:44px;background:transparent;border:1px solid var(--line);
  border-radius:4px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.nav-toggle__bar{width:18px;height:2px;background:var(--ink);transition:transform .3s var(--ease-out),opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.mobile-nav{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:rgba(252,252,253,.98);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:32px clamp(20px,5vw,72px);display:flex;flex-direction:column;gap:8px;
  border-top:1px solid var(--line);z-index:59;overflow-y:auto}
.mobile-nav[hidden]{display:none}
.mobile-nav__list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column}
.mobile-nav__link{display:block;padding:18px 0;font-size:24px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line-soft)}
.mobile-nav__cta{margin-top:12px;width:100%;height:54px}

/* ---------- Section shells ---------------------------------------------- */
.section{position:relative;padding:clamp(78px,9vw,140px) 0;scroll-margin-top:80px;background:var(--bg)}
.section--warm{background:var(--surface-warm)}
.section--cool{background:var(--surface-cool)}
.section--dark{background:var(--dark);color:var(--dark-ink);border-top:1px solid rgba(255,255,255,.08)}
.section--dark .display{color:var(--dark-ink)}

/* ---------- S01 Hero ---------------------------------------------------- */
.hero{position:relative;min-height:92svh;display:flex;align-items:center;
  padding:calc(var(--header-h) + 40px) 0 56px;overflow:hidden;background:var(--bg)}
.hero__field{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.82;pointer-events:none}
/* Veil keeps the headline crisp on the left while the field breathes on the right. */
.hero__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(252,252,253,.92) 34%,rgba(252,252,253,.4) 62%,rgba(252,252,253,0) 100%)}
/* Faint dotted texture, concentrated on the right behind the ecosystem. */
.hero__grid-texture{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(10,15,28,.14) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 40%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.8) 100%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 40%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.8) 100%)}
.hero__glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;opacity:.55}
.hero__glow--blue{width:760px;height:760px;top:-26%;right:-12%;background:rgba(0,51,204,.09)}
.hero__inner{position:relative;width:100%}
.hero__grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(28px,3.2vw,56px);align-items:center}

.eyebrow--hero{margin:0 0 26px;color:var(--brand);font-size:12px;letter-spacing:.22em;font-weight:500}
.hero__headline{font-size:clamp(38px,4.7vw,70px);line-height:1;letter-spacing:-.032em;color:var(--ink);
  font-weight:700;text-wrap:nowrap}
.hero__headline-dot{color:var(--brand)}
.hero__copy{max-width:38ch;margin:26px 0 0}
.hero__copy p{font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.6;color:var(--ink-body)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__actions .btn{padding:15px 24px}
.hero__mantra{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:clamp(30px,3vw,44px) 0 0;
  padding-top:24px;border-top:1px solid var(--line);
  font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.hero__mantra-sep{color:var(--brand);font-weight:400}

/* ---------- S01 Hero · ecosystem diagram -------------------------------- */
.hero-eco{position:relative;width:100%;aspect-ratio:1000/760;isolation:isolate}
.hero-eco__links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.hero-eco__path{fill:none;stroke:var(--brand);stroke-width:2.2;opacity:.5;
  transition:opacity .3s var(--ease-out),stroke-width .3s var(--ease-out)}
.hero-eco__flow{fill:var(--brand);opacity:0}
.hero-eco.is-live .hero-eco__flow{opacity:.9;animation:eco-flow 3.4s linear infinite}
.hero-eco__flow[data-flow="finance"]{animation-delay:-.7s}
.hero-eco__flow[data-flow="operations"]{animation-delay:-1.4s}
.hero-eco__flow[data-flow="hr"]{animation-delay:-2.1s}
.hero-eco__flow[data-flow="customer"]{animation-delay:-2.8s}

/* Central platform card */
.eco-core{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);z-index:3;
  width:clamp(178px,21vw,236px);padding:24px 22px 20px;text-align:center;
  background:linear-gradient(180deg,#0E1424,#0A0F1C);color:var(--dark-ink);
  border:1px solid rgba(60,110,255,.32);border-radius:16px;
  box-shadow:0 22px 50px -24px rgba(10,15,28,.5),inset 0 1px 0 rgba(120,160,255,.14)}
.eco-core__glow{position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 12%,rgba(45,105,255,.28),transparent 62%);opacity:.9}
/* Brand mark (same icon as the header lockup), tinted brand-blue via a mask so
   it renders as a crisp blue silhouette on the dark platform card. */
.eco-core__mark{position:relative;display:inline-flex;width:46px;height:46px;margin-bottom:14px;
  background-color:#3D6BFF;
  -webkit-mask:url("../images/thinkasol-mark.png") center/contain no-repeat;
  mask:url("../images/thinkasol-mark.png") center/contain no-repeat}
.eco-core__title{position:relative;margin:0;font-size:clamp(15px,1.35vw,19px);font-weight:600;letter-spacing:-.01em;color:#fff}
.eco-core__sub{position:relative;margin:6px 0 0;font-size:12.5px;color:var(--dark-body);letter-spacing:.01em}

/* Department cards */
.eco-card{position:absolute;z-index:2;width:clamp(170px,19vw,214px);transform:translate(-50%,-50%);
  padding:15px 15px 13px;background:var(--surface-card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 30px -18px rgba(10,15,28,.28);
  transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),border-color .3s var(--ease-out)}
.eco-card--sales{left:21%;top:15.5%}
.eco-card--finance{left:79%;top:15.5%}
.eco-card--operations{left:12.5%;top:49.5%}
.eco-card--hr{left:87.5%;top:49.5%}
.eco-card--customer{left:46%;top:85.5%}
.eco-card__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.eco-card__icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;
  border-radius:50%;background:var(--brand-tint);color:var(--brand)}
.eco-card__icon svg{width:19px;height:19px}
.eco-card__label{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.eco-card__metric{margin:0;font-size:12.5px;color:var(--ink-dim)}
.eco-card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:5px}
.eco-card__figures{min-width:0}
.eco-card__value{margin:0;font-size:clamp(19px,1.9vw,23px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.eco-card__unit{font-size:.62em;font-weight:600;color:var(--ink-dim);margin-left:1px}
.eco-card__delta{margin:2px 0 0;font-size:12px;font-weight:600;color:#1a9d5a;display:flex;align-items:center;gap:3px}
.eco-card__delta span{font-size:11px}
.eco-card__chart{display:block;flex:none;width:64px;height:32px;color:var(--brand)}
.eco-card--hr .eco-card__chart{width:78px}
.eco-card__chart svg{width:100%;height:100%;overflow:visible}
.eco-card__chart .ec-bars rect{fill:var(--brand);opacity:.85}
.eco-card__chart .ec-bars rect:nth-child(n+6){fill:var(--brand)}
.eco-card__chart .ec-dots circle{fill:var(--brand)}
.eco-card__chart .ec-people .is-on{fill:none;stroke:var(--brand);stroke-width:1.7}
.eco-card__chart .ec-people .is-off{fill:none;stroke:var(--line-strong);stroke-width:1.7}
.eco-card__chart .ec-spark{filter:none}

/* Desktop hover: lift the card, brighten its connector, nudge the core */
@media (hover:hover) and (min-width:1081px){
  .eco-card:hover{transform:translate(-50%,-50%) translateY(-4px);border-color:rgba(0,51,204,.5);
    box-shadow:0 20px 40px -20px rgba(0,51,204,.34)}
  .hero-eco__path.is-hot{opacity:.95;stroke-width:2.6}
  .eco-core.is-reacting{border-color:rgba(80,140,255,.6)}
  .eco-core.is-reacting .eco-core__glow{opacity:1;filter:saturate(1.2)}
}

/* Entrance: staged reveal. Only armed once JS adds .is-armed (so no-JS shows all). */
.hero-eco.is-armed .eco-core,
.hero-eco.is-armed .eco-card{opacity:0}
.hero-eco.is-armed .eco-core{transform:translate(-50%,-50%) scale(.94)}
.hero-eco.is-armed .eco-card{transform:translate(-50%,-50%) translateY(10px)}
.hero-eco.is-armed .hero-eco__path{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.hero-eco.is-in .eco-core{opacity:1;transform:translate(-50%,-50%);
  transition:opacity .45s var(--ease-out) .3s,transform .5s var(--ease-out) .3s}
.hero-eco.is-in .hero-eco__path{stroke-dashoffset:0;transition:stroke-dashoffset .55s var(--ease-out) .6s}
.hero-eco.is-in .eco-card{opacity:1;transform:translate(-50%,-50%);
  transition:opacity .45s var(--ease-out),transform .5s var(--ease-out)}
.hero-eco.is-in .eco-card--sales{transition-delay:.82s}
.hero-eco.is-in .eco-card--finance{transition-delay:.9s}
.hero-eco.is-in .eco-card--operations{transition-delay:.98s}
.hero-eco.is-in .eco-card--hr{transition-delay:1.06s}
.hero-eco.is-in .eco-card--customer{transition-delay:1.14s}
/* Idle drift once settled */
.hero-eco.is-live .eco-card{animation:eco-drift 7s ease-in-out infinite}
.hero-eco.is-live .eco-card--finance{animation-duration:8.2s;animation-delay:-1.5s}
.hero-eco.is-live .eco-card--operations{animation-duration:6.4s;animation-delay:-2.6s}
.hero-eco.is-live .eco-card--hr{animation-duration:7.6s;animation-delay:-.9s}
.hero-eco.is-live .eco-card--customer{animation-duration:8.8s;animation-delay:-3.4s}

/* Lede entrance */
.hero__lede.is-armed [data-seq]{opacity:0;transform:translateY(14px)}
.hero__lede.is-in [data-seq]{opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.hero__lede.is-in [data-seq="1"]{transition-delay:.05s}
.hero__lede.is-in [data-seq="2"]{transition-delay:.16s}
.hero__lede.is-in [data-seq="3"]{transition-delay:.34s}
.hero__lede.is-in [data-seq="4"]{transition-delay:.48s}
.hero__lede.is-in [data-seq="5"]{transition-delay:.6s}

/* ---------- S02 Growth / fragmentation --------------------------------- */
/* Top→middle→bottom scroll story. Blue stays reserved for system/data (see
   :root tokens); amber marks manual handoffs only. Per-department accent is
   passed inline via --accent. Not added to :root — locked palette.
   Progressive enhancement: everything is visible by default; site.js arms the
   hidden state (`.frag.is-armed`) then reveals it stage by stage on scroll. */
.growth{--amber:#C1712A;--amber-soft:#DB8B3A;
  --sys-shadow:0 20px 44px -26px rgba(10,15,28,.4),0 2px 6px -3px rgba(10,15,28,.1);
  padding-top:clamp(56px,6vw,104px);padding-bottom:clamp(56px,6vw,104px)}

/* TOP — context (centred on desktop, left-aligned once it stacks). */
.growth__top{max-width:900px;margin:0 auto;text-align:center}
.growth__headline{font-size:clamp(34px,5.4vw,68px);line-height:1.02;letter-spacing:-.038em}
.growth__dot{color:var(--brand)}
.growth__intro{margin:clamp(14px,1.6vw,22px) auto 0;max-width:52ch;
  font-size:clamp(15px,1.35vw,19px);line-height:1.5;color:var(--ink-dim)}

/* Artifact wrapper — deliberately tall; generous rhythm between the three
   vertical stages rather than one crowded infographic. */
.frag{position:relative;max-width:1240px;margin:clamp(32px,4vw,60px) auto 0}

/* Connector layer (stubs + converging feeds), drawn in JS at real px. */
.frag__wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;
  pointer-events:none;overflow:visible}
.frag__stub{fill:none;stroke:rgba(24,58,150,.34);stroke-width:1.5;stroke-dasharray:5 6;stroke-linecap:round}
.frag__feed{fill:none;stroke:rgba(24,58,150,.28);stroke-width:1.5;stroke-dasharray:5 6;stroke-linecap:round}
/* data flows down the wires — dashes march from the systems into Management */
@keyframes frag-flow{to{stroke-dashoffset:-11}}
@media (prefers-reduced-motion:no-preference){
  .frag__stub{animation:frag-flow .9s linear infinite}
  .frag__feed{animation:frag-flow 1.15s linear infinite}
}
.frag__stubs,.frag__conv{transition:opacity .7s ease}
.frag.is-armed .frag__stubs,.frag.is-armed .frag__conv{opacity:0}
.frag.is-armed.is-wired .frag__stubs,.frag.is-armed.is-wired .frag__conv{opacity:1}
/* Scrubbed draw: --frag-draw (0→1) is written by the S02 progress timeline,
   so the connector layer wipes downward toward Management in step with the
   scrollbar. Clip-path only — no geometry is recalculated per frame. */
.frag.is-armed.is-wired .frag__wires{
  clip-path:inset(0 0 calc((1 - var(--frag-draw,1)) * 100%) 0)}

/* Four systems — ONE horizontal row on desktop. */
.frag__systems{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.5vw,24px);align-items:stretch}
.sys{position:relative;display:flex;flex-direction:column;background:var(--surface-card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sys-shadow);overflow:hidden;
  transition:opacity .7s ease,transform .8s var(--ease-out),box-shadow .45s var(--ease-out)}
.sys:hover{box-shadow:0 28px 60px -26px rgba(10,15,28,.5),0 3px 8px -3px rgba(10,15,28,.16)}
.sys__bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,var(--brand))}
.sys__body{flex:1;padding:16px 18px 18px 22px}
.sys__head{display:flex;align-items:center;gap:10px;padding-bottom:12px;
  margin-bottom:12px;border-bottom:1px solid var(--line-soft)}
.sys__icon{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--accent,var(--brand));color:#fff}
.sys__icon svg{width:15px;height:15px}
.sys__name{flex:1;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.sys__menu{color:var(--ink-faint);font-size:17px;line-height:.4;letter-spacing:.5px}
.sys__rows{display:flex;flex-direction:column;gap:11px}
.sys__row{display:flex;flex-direction:column;gap:3px}
.sys__label{font-size:11px;color:var(--ink-faint);letter-spacing:.005em}
.sys__val{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.sys__val--blue{color:var(--brand)}
.sys__val--amber{color:var(--amber)}
.sys__val--purple{color:#6B4FD6}

/* Manual handoffs — one pill under each card (desktop). */
.frag__frict{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.5vw,24px);margin-top:clamp(40px,4.2vw,62px)}
.frict{justify-self:center;display:inline-flex;align-items:center;gap:9px;
  transition:opacity .6s ease,transform .6s var(--ease-out)}
.frict__badge{flex:none;width:20px;height:20px;border-radius:50%;background:var(--amber-soft);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;line-height:1;
  box-shadow:0 6px 15px -5px rgba(219,139,58,.65)}
.frict__label{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);white-space:nowrap}

/* Management — the dark conclusion of all four systems. */
.mgmt{position:relative;z-index:2;max-width:760px;margin:clamp(52px,5.5vw,92px) auto 0;
  background:#0B0F1C;color:var(--dark-ink);border-radius:16px;padding:22px clamp(20px,2.4vw,30px) 20px;
  box-shadow:0 44px 84px -30px rgba(8,12,22,.66),0 8px 22px -10px rgba(8,12,22,.5);
  transition:opacity .8s ease,transform .9s var(--ease-out)}
.mgmt__head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.mgmt__icon{flex:none;width:28px;height:28px;border-radius:8px;background:var(--brand);
  display:grid;place-items:center}
.mgmt__mark{width:16px;height:16px;object-fit:contain;filter:brightness(0) invert(1)}
.mgmt__tag{flex:1;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;font-weight:500}
.mgmt__menu{color:var(--dark-dim);font-size:17px;line-height:.4;letter-spacing:.5px}
.mgmt__q{margin:0 0 16px;text-align:center;font-size:clamp(18px,2vw,26px);font-weight:600;
  color:#fff;letter-spacing:-.02em;line-height:1.15}
.mgmt__q b{color:#5C9BFF;font-weight:600}
.mgmt__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1vw,14px)}
.mgmt__cell{display:flex;flex-direction:column;gap:7px;padding:13px 15px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:11px;
  transition:opacity .6s ease,transform .6s var(--ease-out)}
.mgmt__who{font-size:11px;color:var(--dark-dim)}
.mgmt__ans{font-size:13px;font-weight:600;letter-spacing:-.005em;line-height:1.25}
.mgmt__ans--blue{color:#5C9BFF}
.mgmt__ans--green{color:#3FB98D}
.mgmt__ans--purple{color:#9B86FF}
.mgmt__ans--orange{color:#E9A05A}
.mgmt__foot{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 0;
  padding-top:16px;border-top:1px solid var(--dark-line-soft);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-soft);
  transition:opacity .6s ease}
.mgmt__foot-ic{font-size:12px;line-height:1}

/* BOTTOM — continuation + CTA, below the whole artifact. */
.growth__bottom{margin:clamp(40px,4.6vw,68px) auto 0;text-align:center}
.growth__friction{margin:0;font-size:clamp(17px,1.8vw,24px);font-weight:600;
  color:var(--ink-dim);letter-spacing:-.02em}
.growth__transition{margin:clamp(8px,1vw,14px) 0 clamp(26px,3vw,40px);
  font-size:clamp(19px,2.1vw,28px);font-weight:600;color:var(--ink);letter-spacing:-.025em}
.growth__brand{color:var(--brand)}
.growth__cta{display:flex;justify-content:center}

/* Staged reveal (only when armed by JS). */
.frag.is-armed .sys{opacity:0;transform:translateY(22px)}
.frag.is-armed.is-cards .sys{opacity:1;transform:none}
.frag__systems .sys:nth-child(2){transition-delay:.08s}
.frag__systems .sys:nth-child(3){transition-delay:.16s}
.frag__systems .sys:nth-child(4){transition-delay:.24s}
.frag.is-armed .frict{opacity:0;transform:translateY(8px)}
.frag.is-armed.is-friction .frict{opacity:1;transform:none}
.frag__frict .frict:nth-child(2){transition-delay:.08s}
.frag__frict .frict:nth-child(3){transition-delay:.16s}
.frag__frict .frict:nth-child(4){transition-delay:.24s}
.frag.is-armed .mgmt{opacity:0;transform:translateY(28px)}
.frag.is-armed.is-mgmt .mgmt{opacity:1;transform:none}
.frag.is-armed .mgmt__cell{opacity:0;transform:translateY(10px)}
.frag.is-armed.is-answers .mgmt__cell{opacity:1;transform:none}
.mgmt__grid .mgmt__cell:nth-child(2){transition-delay:.09s}
.mgmt__grid .mgmt__cell:nth-child(3){transition-delay:.18s}
.mgmt__grid .mgmt__cell:nth-child(4){transition-delay:.27s}
.frag.is-armed .mgmt__foot{opacity:0}
.frag.is-armed.is-truth .mgmt__foot{opacity:1}

/* The intro and conclusion copy live outside .frag, so the SECTION carries
   their phase classes (is-intro / is-conclusion) from the same S02 progress
   timeline. Keeping them on the timeline — rather than on the generic
   data-reveal path — is what makes the section read as one continuous
   narrative from heading through to CTA. */
.growth.is-armed .growth__headline,
.growth.is-armed .growth__intro{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .72s var(--ease-out),transform .72s var(--ease-out)}
.growth.is-armed .growth__intro{transform:translate3d(0,18px,0);transition-delay:.09s}
.growth.is-armed.is-intro .growth__headline,
.growth.is-armed.is-intro .growth__intro{opacity:1;transform:none}

.growth.is-armed .growth__friction,
.growth.is-armed .growth__transition,
.growth.is-armed .growth__cta{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.growth.is-armed .growth__transition{transition-delay:.08s}
.growth.is-armed .growth__cta{transition-delay:.16s}
.growth.is-armed.is-conclusion .growth__friction,
.growth.is-armed.is-conclusion .growth__transition,
.growth.is-armed.is-conclusion .growth__cta{opacity:1;transform:none}

/* Tablet — heading left-aligns, systems reflow to a 2×2 grid. */
@media (max-width:1080px){
  .growth__top{text-align:left;margin-left:0;max-width:none}
  .growth__intro{margin-left:0}
  .frag__systems{grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,26px)}
  .sys__row--extra{display:none}
  .frag__frict{grid-template-columns:repeat(2,1fr);row-gap:16px;
    margin-top:clamp(46px,6vw,72px)}
}
/* Mobile — compact 2×2 cards, lighter connectors, stacked Management rows. */
@media (max-width:640px){
  .frag{margin-top:36px}
  .frag__systems{gap:12px}
  .sys{border-radius:12px}
  .sys__body{padding:13px 13px 14px 16px}
  .sys__head{gap:8px;padding-bottom:9px;margin-bottom:9px}
  .sys__icon{width:23px;height:23px;border-radius:7px}
  .sys__icon svg{width:13px;height:13px}
  .sys__name{font-size:13.5px}
  .sys__rows{gap:8px}
  .sys__label{font-size:10.5px}
  .sys__val{font-size:13px}
  .frag__frict{margin-top:44px;column-gap:10px}
  .frict{gap:7px}
  .frict__label{font-size:8.5px;letter-spacing:.12em}
  .mgmt{margin-top:clamp(64px,16vw,96px);border-radius:14px;padding:18px 16px 16px}
  .mgmt__grid{grid-template-columns:1fr;gap:0}
  .mgmt__cell{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
    background:transparent;border:0;border-top:1px solid var(--dark-line-soft);border-radius:0;
    padding:11px 0}
  .mgmt__cell:first-child{border-top:0}
  .mgmt__ans{text-align:right}
  .growth__cta .btn{width:100%}
}

/* ---------- S03 Story · image-led editorial ----------------------------- */
/* Intentional pacing break: after S02's long pinned sequence, S03 is
   immediate cinematic impact. All three visuals sit in view together on
   desktop (~90–105vh). Imagery carries the story; text stays short. */
.story{padding-top:clamp(64px,7vw,110px);padding-bottom:clamp(70px,8vw,120px)}
.story__head{margin:clamp(28px,3.4vw,44px) 0 clamp(30px,3.6vw,52px);max-width:56ch}
.story__title{margin:0 0 clamp(12px,1.4vw,18px)}
.story__sub{margin:0;font-size:clamp(15px,1.3vw,18px);line-height:1.5;color:var(--ink-dim);max-width:48ch}

.story__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,22px)}

.story-card{position:relative;margin:0;overflow:hidden;border-radius:14px;
  background:var(--dark);box-shadow:0 24px 60px -32px rgba(10,15,28,.55);isolation:isolate}
.story-card__media{position:absolute;inset:0;z-index:0}
.story-card__img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1.2s var(--ease-out)}
.story-card__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(6,10,22,.14) 0%,
    rgba(6,10,22,0) 34%,
    rgba(8,12,26,.42) 62%,
    rgba(6,9,20,.86) 100%)}
/* Reserve panel height via aspect ratio so all three align (portrait on desktop). */
.story-card::before{content:"";display:block;padding-top:132%}
.story-card__caption{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(20px,2vw,30px);color:#fff}
.story-card__num{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.06em;
  color:rgba(255,255,255,.72)}
.story-card__rule{display:block;width:26px;height:1px;background:rgba(255,255,255,.4)}
.story-card__title{margin:10px 0 8px;color:#fff;font-size:clamp(22px,2vw,30px);
  line-height:1.05;letter-spacing:-.02em;font-weight:600}
.story-card__copy{margin:0;max-width:34ch;font-size:clamp(13.5px,1vw,15px);line-height:1.5;
  color:rgba(233,238,247,.86)}

.story__cta{display:flex;justify-content:center;margin-top:clamp(34px,3.8vw,56px)}

@media (hover:hover) and (min-width:1081px){
  .story-card:hover .story-card__img{transform:scale(1.08)}
}

/* Desktop — fit the whole section within one viewport height. The panels
   flex to fill the space left after the heading + CTA, so no page scroll is
   needed to see all three. (Tablet/mobile keep their aspect-ratio panels.) */
@media (min-width:1081px){
  .story{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
    padding-top:calc(var(--header-h) + clamp(20px,3.2vh,44px));
    padding-bottom:clamp(20px,3.6vh,48px)}
  .story>.container{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .story__head{margin:clamp(14px,2.4vh,30px) 0 clamp(14px,2.4vh,30px)}
  .story__grid{flex:1 1 auto;min-height:0}
  .story-card::before{content:none}          /* height comes from the grid row */
  .story__cta{margin-top:clamp(16px,2.6vh,32px)}
}

/* Tablet — Connect + Automate share a row, Intelligently Grow spans below. */
@media (max-width:1080px){
  .story__grid{grid-template-columns:1fr 1fr;gap:16px}
  .story-card::before{padding-top:118%}
  .story-card--s03-grow{grid-column:1 / -1}
  .story-card--s03-grow::before{padding-top:52%}
  .story-card--s03-grow .story-card__copy{max-width:42ch}
}

/* Mobile — stacked cinematic strips. */
@media (max-width:640px){
  .story__grid{grid-template-columns:1fr;gap:14px}
  .story-card::before,
  .story-card--s03-grow::before{padding-top:82%}
  .story-card{border-radius:12px}
  .story-card__caption{padding:18px}
  .story__cta{margin-top:26px}
  .story__cta .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .story-card__img{transform:none;transition:none}
  .story-card:hover .story-card__img{transform:none}
}

/* ---------- S04 Explorer — cinematic image tab explorer ----------------- */
.explorer{padding-bottom:clamp(60px,8vw,120px)}
.explorer__intro{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);
  align-items:end;margin:clamp(40px,5vw,68px) 0 0}
.explorer__intro .display{max-width:22ch}
/* horizontal tab strip */
.explorer__tabs{display:flex;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--dark-line);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.explorer__tabs::-webkit-scrollbar{display:none}
.explorer__tab{display:flex;align-items:baseline;gap:10px;background:transparent;border:0;
  border-bottom:2px solid transparent;padding:16px 2px 18px;text-align:left;cursor:pointer;
  color:var(--dark-dim);white-space:nowrap;flex-shrink:0;
  transition:color .22s ease,border-color .22s ease;margin-bottom:-1px}
/* first/last tabs sit flush with the panel edges (mockup) */
.explorer__tab:first-child{padding-left:0}
.explorer__tab:last-child{padding-right:0}
.explorer__tab:hover{color:var(--dark-ink)}
.explorer__tab[aria-selected="true"]{color:var(--dark-ink);border-bottom-color:var(--cyan)}
.explorer__tab-num{font-size:10px;letter-spacing:.2em}
.explorer__tab-label{font-size:12.5px;letter-spacing:.14em}
/* cinematic image panel */
.explorer__visual{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid rgba(55,189,209,.22);
  box-shadow:0 0 0 1px rgba(55,189,209,.06),0 0 80px rgba(55,189,209,.08);
  aspect-ratio:16/7;background:var(--dark-2)}
/* image stack — all stacked, active crossfades in */
.explorer__imgs{position:absolute;inset:0;overflow:hidden}
/* Crossfade timing and the incoming image's starting scale are written from
   the motion registry (sections.s04.interaction) so they stay centrally
   tunable; the values below are only the no-JS fallback. */
.explorer__img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;
  transition:opacity var(--s04-crossfade,.42s) var(--ease-out),
             transform var(--s04-crossfade,.42s) var(--ease-out);
  transform:scale(var(--s04-img-scale,1.015))}
/* incoming image fades in and settles from a whisper of zoom */
.explorer__img.is-active{opacity:1;transform:scale(1)}
/* dual-axis dark gradient overlay */
.explorer__overlay{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(115deg,rgba(7,11,24,.9) 0%,rgba(7,11,24,.62) 36%,rgba(7,11,24,.12) 62%,transparent 100%),
    linear-gradient(to top,rgba(7,11,24,.72) 0%,rgba(7,11,24,0) 48%)}
/* caption block overlaid bottom-left of the panel */
.explorer__caption{position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:clamp(24px,3.5vw,52px)}
.explorer__content{display:none;max-width:560px}
.explorer__content.is-active{display:block}
.explorer__step{font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 14px}
.explorer__headline{font-size:clamp(20px,2.4vw,34px);line-height:1.13;
  letter-spacing:-.025em;font-weight:500;color:#fff;
  margin:0 0 clamp(14px,2vw,22px);max-width:22ch}
.explorer__chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:clamp(10px,1.4vw,16px)}
.explorer__chip{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(55,189,209,.28);color:rgba(247,248,250,.72);
  padding:5px 10px;border-radius:3px;background:rgba(55,189,209,.08)}
.explorer__note{margin:0;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dark-dim)}
/* desktop: fit the whole section within one viewport height */
@media (min-width:1081px){
  .explorer{padding-top:clamp(44px,6vh,72px);padding-bottom:clamp(36px,5vh,60px);
    min-height:100vh;display:flex;flex-direction:column;justify-content:center}
  .explorer>.container{width:100%}
  .explorer__intro{margin-top:clamp(20px,2.8vh,36px)}
  .explorer__tabs{margin-top:clamp(14px,2vh,26px)}
  .explorer__visual{aspect-ratio:auto;height:clamp(340px,50vh,540px);margin-top:clamp(10px,1.4vh,20px)}
  .explorer__tab{padding-top:clamp(10px,1.6vh,16px);padding-bottom:clamp(12px,1.8vh,18px)}
}

/* ---------- S05 · One business. Different views (dashboard carousel) ----- */
/* Premium 3D dashboard carousel. Progressive enhancement: without JS the
   active (first) dashboard shows; site.js fans the four screens into 3D
   space and drives nav / labels / dots / swipe / keyboard plus the light↔dark
   image swap, respecting prefers-reduced-motion. The section clips
   horizontally so side screens peek at the edges without page overflow. */
.views{position:relative;overflow:hidden}
.views__ambient{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 44%,rgba(0,51,204,.07),transparent 72%)}
.views::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:radial-gradient(rgba(10,15,28,.05) 1px,transparent 1.4px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(118% 92% at 50% 42%,#000 26%,transparent 78%);
          mask-image:radial-gradient(118% 92% at 50% 42%,#000 26%,transparent 78%)}
.views>.container{position:relative;z-index:1}

.views__head{margin:clamp(28px,3.4vw,46px) 0 clamp(22px,2.6vw,34px);max-width:62ch}
.views__title{margin:0 0 12px}
.views__intro{margin:0;font-size:clamp(15px,1.3vw,18px);line-height:1.5;color:var(--ink-dim);max-width:54ch}

/* 3D stage */
.views__stage{position:relative;width:100%;perspective:1600px}
.views__deck{position:relative;height:clamp(300px,50vh,540px);max-width:1120px;margin:0 auto;
  transform-style:preserve-3d}
.dash{position:absolute;left:50%;top:50%;margin:0;width:min(60%,600px);aspect-ratio:764/508;
  transform:translate(-50%,-50%);opacity:0;border-radius:14px;overflow:hidden;
  background:var(--surface-card);border:1px solid var(--line);
  box-shadow:0 30px 70px -34px rgba(10,15,28,.42),0 4px 12px -6px rgba(10,15,28,.18);
  /* --s05-move is the resting carousel transition; the fan-out entrance
     swaps in the longer --s05-entrance for one beat. Both are written from
     the motion registry (sections.s05). */
  transition:transform var(--s05-move,.7s) var(--ease-out),opacity var(--s05-move,.7s) var(--ease-out),
    box-shadow .6s var(--ease-out),border-color .5s var(--ease-out);
  backface-visibility:hidden;will-change:transform,opacity}
.views__deck.is-entering .dash{transition-duration:var(--s05-entrance,.95s)}
/* no-JS / first paint: show the active screen */
.dash:first-child{opacity:1;z-index:10}
.dash__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  background:var(--surface-card)}
/* active screen commands attention: front-facing, soft blue edge + glow */
.dash.is-active{border-color:rgba(0,51,204,.30);
  box-shadow:0 46px 96px -34px rgba(0,51,204,.30),0 12px 34px -14px rgba(10,15,28,.32)}
/* dark image variant: swap card + letterbox to navy so wide screenshots blend */
.views__deck.is-dark .dash{background:var(--dark);border-color:var(--dark-line)}
.views__deck.is-dark .dash__img{background:var(--dark)}
.views__deck.is-dark .dash.is-active{border-color:rgba(55,189,209,.42);
  box-shadow:0 46px 96px -34px rgba(0,51,204,.4),0 12px 34px -14px rgba(6,10,22,.5)}

/* arrows */
.views__arrow{position:absolute;top:50%;z-index:30;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--ink);font-size:24px;line-height:1;
  background:rgba(255,255,255,.86);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 10px 26px -12px rgba(10,15,28,.34);
  transition:transform .2s var(--ease-out),background .25s var(--ease-out),color .25s var(--ease-out),
    border-color .25s var(--ease-out)}
.views__arrow--prev{left:clamp(2px,2vw,20px);transform:translateY(-50%)}
.views__arrow--next{right:clamp(2px,2vw,20px);transform:translateY(-50%)}
.views__arrow span{position:relative;top:-1px}
.views__arrow:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.views__arrow--prev:active{transform:translateY(-50%) scale(.92)}
.views__arrow--next:active{transform:translateY(-50%) scale(.92)}

/* caption */
.views__caption{text-align:center;margin:clamp(20px,2.6vw,32px) 0 0;min-height:44px}
.views__caption-name{display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.views__caption-desc{display:block;margin-top:4px;font-size:14px;color:var(--ink-dim)}

/* dots + theme toggle */
.views__controls{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,44px);
  flex-wrap:wrap;margin-top:clamp(14px,1.8vw,22px)}
.views__dots{display:flex;align-items:center;gap:10px}
.views__dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line-strong);
  cursor:pointer;transition:transform .25s var(--ease-out),background .25s var(--ease-out)}
.views__dot:hover{background:var(--ink-faint)}
.views__dot.is-active{background:var(--brand);transform:scale(1.4)}
.views__theme{display:inline-flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface-card)}
.views__theme-ic{font-size:12px;color:var(--ink-dim);padding-left:4px}
.views__theme-opt{border:0;background:transparent;cursor:pointer;padding:5px 12px;border-radius:999px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
  transition:background .25s var(--ease-out),color .25s var(--ease-out)}
.views__theme-opt.is-active{background:var(--ink);color:#fff}

/* label selector */
.views__labels{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(6px,2vw,30px);
  margin-top:clamp(18px,2.4vw,28px)}
.views__label{position:relative;display:inline-flex;align-items:baseline;gap:9px;
  background:transparent;border:0;cursor:pointer;padding:8px 4px 13px;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink-dim);
  transition:color .25s var(--ease-out)}
.views__label-num{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink-faint);
  transition:color .25s var(--ease-out)}
.views__label::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:center;transition:transform .4s var(--ease-out)}
.views__label:hover{color:var(--ink)}
.views__label.is-active{color:var(--brand)}
.views__label.is-active .views__label-num{color:var(--brand)}
.views__label.is-active::after{transform:scaleX(1)}

/* Desktop: fit within one viewport height, generous stage. */
@media (min-width:1281px){
  .views{min-height:96vh;display:flex;flex-direction:column;justify-content:center;
    padding-top:calc(var(--header-h) + clamp(20px,3vh,40px));padding-bottom:clamp(24px,4vh,56px)}
  .views>.container{width:100%}
  .views__head{margin:clamp(18px,2.4vh,32px) 0 clamp(16px,2vh,26px)}
  .views__deck{height:clamp(360px,46vh,520px)}
}
/* Laptop ~1280: tighten spread (JS geometry also eases the angle). */
@media (max-width:1280px){
  .views__deck{height:clamp(320px,44vh,460px);max-width:980px}
  .dash{width:min(58%,540px)}
}
/* Tablet: shallower stack, active ~72–78% width. */
@media (max-width:1024px){
  .dash{width:min(72%,560px)}
  .views__deck{height:clamp(300px,52vw,460px)}
}
@media (max-width:767px){
  .views__deck{height:clamp(230px,64vw,320px)}
  .dash{width:min(88vw,430px)}
  .views__arrow{width:40px;height:40px;font-size:21px}
  .views__label{font-size:14px;gap:7px}
  .views__labels{gap:6px}
}
@media (max-width:400px){
  .views__labels{gap:2px}
  .views__label{padding:7px 3px 11px;font-size:13px}
}

/* ---------- S06 Closing (dark) — final brand moment ---------------------- */
/* Layered back-to-front: particle field (0) → readability mask + grid (1) →
   copy and CTAs (2). The mask is what guarantees the statement always wins
   over the wave, so keep it between the canvas and .closing__inner. */
.closing{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(720px,88vh,980px);
  padding:clamp(90px,8vw,120px) 0 clamp(40px,4vw,60px);
  background:radial-gradient(118% 88% at 76% 24%,#111C35 0%,#0A0F1C 54%,#070B14 100%);
  border-top:1px solid rgba(255,255,255,.07);
  color:var(--dark-ink);
}
/* Laptops with little vertical room: let the section size to its content. */
@media (max-height:820px){ .closing{min-height:0} }
/* Short laptop screens: compress the vertical rhythm so the statement and
   both CTAs stay on one screen without shrinking the type too far. */
@media (min-width:1081px) and (max-height:920px){
  .closing{padding:clamp(64px,6vw,84px) 0 clamp(26px,2.6vw,36px)}
  .closing__lede{margin:26px 0 32px}
  .closing__bridge{font-size:clamp(23px,2vw,28px)}
  .closing__brand{font-size:clamp(36px,4.4vw,60px)}
  .closing__actions{margin-top:28px}
  .closing__outro{margin-top:38px}
  .section-head{margin-bottom:clamp(28px,3vw,40px);padding-bottom:18px}
}
.closing :focus-visible{outline-color:var(--cyan)}

.closing__field{position:absolute;inset:0;z-index:0;pointer-events:none}
.closing__canvas,.closing__static{position:absolute;inset:0;width:100%;height:100%;display:block}
/* The SVG is the no-JS / canvas-failure composition; JS swaps to the canvas. */
.closing__canvas{opacity:0;transition:opacity .9s ease}
.closing__static{opacity:1;transition:opacity .9s ease}
.closing__field.is-live .closing__canvas{opacity:1}
.closing__field.is-live .closing__static{opacity:0}

.closing__mask{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(100deg,#070B14 0%,rgba(7,11,20,.95) 26%,rgba(7,11,20,.74) 45%,rgba(7,11,20,.2) 66%,rgba(7,11,20,0) 82%),
  linear-gradient(to bottom,rgba(7,11,20,.5) 0%,rgba(7,11,20,0) 24%,rgba(7,11,20,0) 66%,rgba(7,11,20,.86) 100%)}

.closing__grid{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  height:clamp(180px,28vh,320px);
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 46%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 46%,transparent 100%)}

.closing__inner{position:relative;z-index:2;width:100%}

.closing__lede{max-width:600px;margin:clamp(36px,4vw,56px) 0 clamp(40px,4.6vw,64px)}
.closing__bridge{font-size:clamp(24px,2.4vw,34px);line-height:1.14;letter-spacing:-.026em;
  font-weight:600;color:var(--dark-ink);text-wrap:balance}
.closing__sub{margin-top:18px;max-width:44ch;font-size:16px;line-height:1.66;color:var(--dark-body)}

.closing__brand{font-size:clamp(40px,6vw,88px);line-height:.94;letter-spacing:-.042em;
  font-weight:600;color:var(--dark-ink)}
/* inline-block so each line can carry its own reveal transform; the <br>
   breaks still control the layout, so the type composition is unchanged */
.closing__line{display:inline-block}
.closing__brand-accent{color:var(--cyan)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* Two background layers: the approved brand gradient, plus a soft light
     band parked OFF the glyphs at both ends of its travel. The resting
     appearance is therefore pixel-identical to the plain gradient — the
     band is only ever visible while it sweeps across. Background-position
     only: no filter animation, no text-shadow, no per-letter work. */
  .closing__brand-accent{
    background-image:
      linear-gradient(96deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 58%),
      linear-gradient(96deg,#2F6BFF 0%,#37BDD1 54%,#8FE6F4 100%);
    background-size:260% 100%,100% 100%;
    background-position:150% 0,0 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 0 26px rgba(55,189,209,.26));
    transition:background-position var(--s06-accent,.9s) var(--ease-out) var(--s06-accent-delay,.1s)}
  .closing__brand-accent.is-lit{background-position:-60% 0,0 0}
}
@media (prefers-reduced-motion:reduce){
  .closing__brand-accent{transition:none}
}

.closing__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(32px,3.6vw,48px)}
.closing__cta{padding:17px 30px;font-size:14.5px}
.closing .btn--primary{background:linear-gradient(96deg,var(--brand) 0%,#1657E0 56%,#2C8FD6 100%);
  box-shadow:0 10px 30px rgba(0,51,204,.30)}
.closing .btn--primary:hover{background:linear-gradient(96deg,var(--brand-deep) 0%,#1553D8 56%,#2F9CE0 100%);
  box-shadow:0 12px 38px rgba(55,189,209,.32)}
/* Ghost CTA keeps a soft blue hover here instead of the light-fill used on
   the rest of the site — a warm fill would fight the dark closing frame. */
.closing .btn--ghost-invert{background:rgba(255,255,255,.02);border-color:rgba(120,190,255,.28)}
.closing .btn--ghost-invert::before{display:none}
.closing .btn--ghost-invert:hover{background:rgba(55,189,209,.10);border-color:rgba(55,189,209,.5);
  color:var(--dark-ink)}

/* Hand-off band into the footer. Kept as its own row so the future footer
   particle treatment can pick the composition up from this line. */
.closing__outro{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(16px,3vw,32px);
  width:100%;max-width:1440px;margin:clamp(48px,5vw,76px) auto 0;padding:0 clamp(20px,5vw,72px)}
.closing__rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
/* The mark ships as navy artwork; flatten it to white for the dark band. */
.closing__mark{width:26px;height:26px;flex:none;opacity:.4;filter:brightness(0) invert(1)}

/* Tablet: composition stacks — wave moves upper/right, copy reads over a
   bottom-weighted mask instead of the desktop left-to-right one. */
@media (max-width:1080px){
  .closing{min-height:0;padding:clamp(84px,10vw,120px) 0 clamp(44px,5vw,64px)}
  .closing__lede{max-width:none}
  .closing__sub{max-width:52ch}
  .closing__brand{font-size:clamp(38px,7.2vw,64px)}
  .closing__mask{background:linear-gradient(to bottom,rgba(7,11,20,.34) 0%,rgba(7,11,20,.5) 26%,
    rgba(7,11,20,.86) 58%,#070B14 100%)}
}
@media (max-width:700px){
  .closing{padding:clamp(72px,13vw,96px) 0 clamp(40px,7vw,56px)}
  .closing__lede{margin:clamp(32px,7vw,44px) 0 clamp(36px,8vw,52px)}
  .closing__bridge{font-size:clamp(22px,5.8vw,27px)}
  .closing__sub{font-size:15px;margin-top:14px}
  .closing__brand{font-size:clamp(34px,9.4vw,46px)}
  .closing__grid{height:clamp(140px,22vh,200px);background-size:44px 44px}
  .closing__actions{flex-direction:column;align-items:stretch;gap:12px}
  .closing__cta{width:100%;padding:16px 22px}
  .closing__outro{margin-top:clamp(48px,10vw,64px)}
}

/* ---------- Footer (dark — continues the S06 closing) -------------------- */
/* Base colour matches the foot of .closing so the homepage reads as one
   continuous dark surface; inner pages get a hairline to sit against light. */
.site-footer{position:relative;overflow:hidden;isolation:isolate;
  background:#070B14;color:var(--dark-body);
  padding:clamp(56px,6vw,88px) 0 0;
  border-top:1px solid rgba(255,255,255,.07)}
.page-home .site-footer{border-top-color:transparent}

/* The wave arrives from S06 and settles: masked out before it reaches the
   links so it never competes with them. Density is set in site.js. */
.site-footer__field{position:absolute;left:0;top:0;z-index:0;display:block;
  width:100%;height:clamp(220px,30vw,400px);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.45) 58%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.45) 58%,transparent 100%)}
.site-footer__grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 40%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 40%,#000 100%)}

.site-footer__inner{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,80px)}
.brand--footer{display:block;margin-bottom:22px}
/* The logo ships as navy artwork — flatten it to white for the dark ground. */
.brand__logo--stacked{height:auto;width:clamp(108px,13vw,138px);
  filter:brightness(0) invert(1);opacity:.9}
.site-footer__blurb{max-width:38ch;font-size:15px;line-height:1.64;color:var(--dark-dim)}
.site-footer__tagline{margin-top:22px;font-size:11px;letter-spacing:.26em;color:var(--cyan)}

.social{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:28px 0 0;padding:0}
.social__link{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid rgba(255,255,255,.14);border-radius:3px;color:var(--dark-dim);
  background:rgba(255,255,255,.02);
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out),
    background .25s var(--ease-out),transform .2s var(--ease-out)}
.social__link:hover{color:#fff;border-color:rgba(55,189,209,.55);
  background:rgba(55,189,209,.12);transform:translateY(-2px)}
.social__link:active{transform:translateY(0)}

.site-footer__nav{position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.footer-col__title{font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.38);margin:0 0 16px}
.footer-col__list{list-style:none;margin:0;padding:0;display:grid}
.footer-link{position:relative;display:inline-block;color:var(--dark-body);font-size:14px;
  line-height:2.05;width:fit-content;transition:color .25s var(--ease-out)}
.footer-link::after{content:"";position:absolute;left:0;bottom:3px;height:1px;width:100%;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-out)}
.footer-link:hover{color:var(--dark-ink)}
.footer-link:hover::after{transform:scaleX(1)}

.site-footer__bar{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px;
  margin-top:clamp(44px,6vw,72px);padding-top:24px;border-top:1px solid var(--dark-line-soft)}
.site-footer__legal,.site-footer__motto{font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.34)}
.to-top{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dark-dim);
  border:1px solid rgba(255,255,255,.18);padding:9px 16px;border-radius:3px;
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out),transform .2s var(--ease-out)}
.to-top:hover{color:var(--dark-ink);border-color:rgba(55,189,209,.55)}
.to-top:hover .to-top__arrow{transform:translateY(-3px)}
.to-top__arrow{display:inline-block;transition:transform .3s var(--ease-out)}
.to-top:active{transform:scale(.97)}
.site-footer :focus-visible{outline-color:var(--cyan)}

/* Sign-off watermark. `height` is what crops the glyphs against the footer
   base; the mask softens that cut so it reads as a fade, not a slice. */
.site-footer__artifact{position:relative;z-index:0;margin:clamp(18px,2.2vw,30px) 0 0;
  font-size:max(78px,18.6vw);line-height:.78;font-weight:700;letter-spacing:-.05em;
  text-align:center;white-space:nowrap;color:rgba(255,255,255,.05);
  height:.4em;overflow:hidden;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 25%,rgba(0,0,0,.3) 100%);
  mask-image:linear-gradient(to bottom,#000 25%,rgba(0,0,0,.3) 100%)}
/* The tagline must stay on one line: the brand column narrows well before
   the footer drops to a single column, so step the tracking down early. */
@media (max-width:1200px){ .site-footer__tagline{font-size:10px;letter-spacing:.16em} }
@media (max-width:700px){
  .site-footer__field{height:clamp(160px,40vw,240px)}
  .social{margin-top:24px}
}

/* ---------- Coming Soon ------------------------------------------------- */
.coming{position:relative;min-height:82svh;display:flex;align-items:center;
  padding:calc(var(--header-h) + 80px) 0 100px;overflow:hidden;background:var(--bg)}
.coming__field{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(820px 620px at 80% -10%,rgba(0,51,204,.07),transparent 70%),
    radial-gradient(620px 520px at 0% 120%,rgba(55,189,209,.06),transparent 70%)}
.coming__inner{position:relative;max-width:760px}
.coming__title{font-size:var(--display-l);line-height:.98;letter-spacing:-.036em;color:var(--ink);margin:26px 0 26px}
.coming__lead{font-size:clamp(17px,2vw,20px);line-height:1.55;color:var(--ink-body);max-width:44ch}
.coming__sub{margin-top:16px;font-size:16px;line-height:1.6;color:var(--ink-dim);max-width:48ch}
.coming__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.coming__signature{margin-top:clamp(48px,7vw,80px);padding-top:22px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- Talk to Us ---------------------------------------------------
   Deliberately the least decorated page on the site: no diagram, no dashboard,
   no photography. The form IS the composition, so the work here is typography,
   hairlines, space and one selection state. Everything below is scoped to the
   .tk- prefix except the .field/.consent primitives, which stay generic so any
   future form can reuse them. */

/* ---------- S01 · Hero --------------------------------------------------- */
.tk-hero{position:relative;background:var(--surface-warm);border-bottom:1px solid #E2DCD2;
  padding:calc(var(--header-h) + clamp(38px,4.6vw,70px)) 0 clamp(48px,6vw,84px)}
.tk-hero__grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(32px,5vw,80px);align-items:center}
/* Success state drops the side panel, so the hero becomes a single column
   rather than a headline stranded beside empty space. */
.tk-hero__grid--solo{grid-template-columns:minmax(0,1fr)}

.tk-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 clamp(20px,2.4vw,30px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.tk-eyebrow__num{color:var(--brand)}
.tk-eyebrow__rule{width:52px;height:1px;background:#D6CEC0}
.tk-eyebrow__label{color:var(--ink-dim)}

.tk-hero__title{margin:0;font-weight:600;color:var(--ink);
  font-size:clamp(37px,5.1vw,74px);line-height:1;letter-spacing:-.042em}
.tk-hero__rule{display:block;width:88px;height:1px;background:#D6CEC0;margin:clamp(22px,2.8vw,34px) 0 0}
.tk-hero__copy{margin-top:clamp(20px,2.6vw,30px);max-width:50ch;
  font-size:clamp(15.5px,1.1vw,17px);line-height:1.64;color:var(--ink-body)}

/* Routing indicator — states what the page asks for, in order. */
.tk-hero__panel{justify-self:end;width:min(100%,340px);background:var(--surface-card);
  border:1px solid #E2DCD2;border-radius:16px;padding:clamp(22px,2.4vw,28px);
  box-shadow:0 24px 60px -46px rgba(10,15,28,.42)}
.tk-panel__title{margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.tk-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:none}
.tk-step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.tk-step__num{font-size:10.5px;letter-spacing:.14em;color:var(--cyan)}
.tk-step__label{font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.012em}
.tk-panel__jump{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--line-soft);width:100%;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);text-decoration:none;transition:gap .3s var(--ease-out)}
.tk-panel__jump:hover{gap:12px}

/* ---------- S02 · Intent selector --------------------------------------- */
/* Section padding is tightened on both halves so S02 and S03 read as one warm
   workspace rather than two stacked sections. */
.tk-intent{padding-bottom:clamp(30px,3.4vw,44px)}
.tk-fields{padding-top:clamp(30px,3.4vw,44px)}

.tk-intent__set{border:0;margin:0;padding:0;min-width:0}
.tk-intent__legend{display:block;width:100%;padding:0;margin:0 0 clamp(26px,3vw,38px)}
.tk-intent__title{display:block;margin:0;letter-spacing:-.03em;max-width:18ch}
.tk-intent__copy{display:block;margin-top:16px;max-width:48ch;
  font-size:15.5px;line-height:1.62;color:var(--ink-body)}

.tk-options{display:grid;gap:0;border-top:1px solid var(--line)}
.tk-option{position:relative}
/* The real radio stays in the layout (never display:none) so it keeps its
   accessible name, tab order and focus ring host. */
.tk-option__input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.tk-option__label{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,1.8vw,26px);align-items:center;
  padding:clamp(16px,1.8vw,20px) clamp(10px,1.4vw,18px);
  border-bottom:1px solid var(--line-soft);cursor:pointer;
  transition:background .25s var(--ease-out),padding-left .3s var(--ease-out)}
/* Cyan indicator that grows in on selection — the one moving part in S02. */
.tk-option__label::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;
  background:var(--cyan);transform:scaleY(0);transform-origin:center;
  transition:transform .32s var(--ease-out)}
.tk-option__label:hover{background:rgba(255,255,255,.55);padding-left:clamp(16px,1.9vw,26px)}
.tk-option__num{font-size:11px;letter-spacing:.14em;color:var(--ink-faint);transition:color .25s ease}
.tk-option__body{display:grid;gap:4px;min-width:0}
.tk-option__name{font-size:clamp(16px,1.35vw,18.5px);font-weight:600;color:var(--ink);letter-spacing:-.016em}
.tk-option__note{font-size:13.5px;line-height:1.5;color:var(--ink-dim)}
.tk-option__tick{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  color:#fff;background:var(--brand);opacity:0;transform:scale(.6);
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.tk-option__tick svg{width:13px;height:13px}

.tk-option__input:checked + .tk-option__label{background:var(--surface-card);padding-left:clamp(16px,1.9vw,26px)}
.tk-option__input:checked + .tk-option__label::before{transform:scaleY(1)}
.tk-option__input:checked + .tk-option__label .tk-option__num{color:var(--brand)}
.tk-option__input:checked + .tk-option__label .tk-option__tick{opacity:1;transform:scale(1)}
/* Keyboard focus lands on the hidden input; show the ring on its label. */
.tk-option__input:focus-visible + .tk-option__label{outline:2px solid var(--brand);outline-offset:-2px}

/* ---------- S03 · Fields + routing rail ---------------------------------- */
.tk-fields__title{margin:0 0 clamp(24px,2.8vw,34px);letter-spacing:-.03em}
.tk-work__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.tk-work__form{display:grid;gap:clamp(16px,1.8vw,20px);max-width:60ch}
.tk-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,18px)}

.tk-submit{margin-top:8px;justify-self:start}
.tk-submit[data-busy]{opacity:.7;pointer-events:none}

/* Sticky routing rail. aria-hidden: it mirrors the radio group, which already
   announces the same state, so it must not be read twice. */
.tk-rail{position:sticky;top:calc(var(--header-h) + 28px);align-self:start}
.tk-rail__inner{display:grid;gap:24px;border-left:1px solid var(--line);
  padding:4px 0 4px clamp(18px,2vw,26px)}
.tk-rail__cell{display:grid;gap:8px}
.tk-rail__k{margin:0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.tk-rail__v{margin:0;font-size:15.5px;line-height:1.45;font-weight:500;color:var(--ink);
  letter-spacing:-.014em;transition:opacity .22s ease}
.tk-rail__v[data-swapping]{opacity:0}

.tk-note{margin:clamp(34px,4vw,52px) 0 0;padding-top:18px;border-top:1px solid var(--line-soft);
  max-width:62ch;font-size:13.5px;line-height:1.6;color:var(--ink-dim)}

/* ---------- Success ------------------------------------------------------ */
.tk-done{display:grid;justify-items:center;text-align:center;gap:14px;
  padding:clamp(24px,4vw,56px) 4px;max-width:52ch;margin:0 auto}
.tk-done:focus{outline:none}
.tk-done__mark{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  color:var(--brand);background:var(--brand-tint)}
.tk-done__mark svg{width:28px;height:28px}
.tk-done__title{margin:0;font-size:clamp(24px,2.8vw,32px);letter-spacing:-.026em}
.tk-done__lead{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-body)}
.tk-done .btn{margin-top:10px}

/* ---------- Shared form primitives --------------------------------------- */
.form-alert{margin:0 0 24px;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.45;
  color:#8a1c1c;background:rgba(200,40,40,.07);border:1px solid rgba(200,40,40,.22)}

.field{display:grid;gap:7px}
.field__label{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.field__optional{font-weight:500;color:var(--ink-faint)}
.field__control{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--surface-card);
  border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;appearance:none}
.field__control::placeholder{color:var(--ink-faint)}
.field__control:hover{border-color:var(--ink-faint)}
.field__control:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,51,204,.14)}
.field__control[aria-invalid="true"]{border-color:rgba(200,40,40,.55)}
.field__control[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(200,40,40,.16)}
.field__control--area{resize:vertical;min-height:130px;line-height:1.55}
/* Empty error spans collapse, so the layout does not jump when one appears. */
.field__error{font-size:12.5px;color:#a12020;font-weight:500}
.field__error:empty{display:none}
.field__error--block{margin:0 0 20px}
.field--conditional[hidden]{display:none}

.field--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field--consent{margin-top:6px}
.consent{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;cursor:pointer}
.consent__box{margin:1px 0 0;width:18px;height:18px;flex:none;accent-color:var(--brand);cursor:pointer}
.consent__text{font-size:13px;line-height:1.5;color:var(--ink-dim)}

.u-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Talk to Us · responsive -------------------------------------- */
@media (max-width:1000px){
  .tk-hero__grid{grid-template-columns:1fr;gap:clamp(32px,5vw,44px)}
  .tk-hero__panel{justify-self:start;width:100%;max-width:420px}
  .tk-work__grid{grid-template-columns:1fr;gap:clamp(30px,5vw,40px)}
  /* Rail moves above the fields and un-sticks: on a stacked layout a sticky
     summary would sit over the inputs it describes. */
  .tk-rail{position:static;order:-1}
  .tk-rail__inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
    border-left:0;border-top:1px solid var(--line);padding:20px 0 0}
}
@media (max-width:640px){
  .tk-row{grid-template-columns:1fr}
  .tk-rail__inner{grid-template-columns:1fr;gap:16px}
  .tk-option__label{grid-template-columns:auto minmax(0,1fr) auto;gap:14px;
    padding-left:8px;padding-right:8px;min-height:56px}
  .tk-option__note{font-size:13px}
  .tk-submit{width:100%;justify-content:center}
  .tk-hero__panel{padding:20px 18px;border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  .tk-option__label,.tk-option__label::before,.tk-option__tick,
  .tk-rail__v,.tk-panel__jump{transition:none}
  .tk-option__label:hover{padding-left:clamp(10px,1.4vw,18px)}
}
/* ---------- Keyframes --------------------------------------------------- */
@keyframes tsl-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes tsl-drop{0%{transform:translateY(-8px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateY(76px);opacity:0}}
@keyframes tsl-scan{0%{transform:translateY(0);opacity:0}10%{opacity:.7}86%{opacity:.7}100%{transform:translateY(var(--frag-h,620px));opacity:0}}
@keyframes tsl-flow{to{stroke-dashoffset:-192}}
@keyframes eco-drift{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-3px)}}
@keyframes eco-flow{0%{offset-distance:0%;opacity:0}12%{opacity:.85}88%{opacity:.85}100%{offset-distance:100%;opacity:0}}

/* ---------- Responsive -------------------------------------------------- */
/* Laptop: keep the two-column hero but tighten it. */
@media (max-width:1240px){
  .eco-card{width:clamp(160px,19vw,210px);padding:14px 14px 12px}
  .eco-card--sales{left:22%}
  .eco-card--finance{left:78%}
  .eco-card--operations{left:14%}
  .eco-card--hr{left:86%}
}
/* Tablet: stack content over a centred, simplified ecosystem. */
@media (max-width:1080px){
  .hero{padding-top:calc(var(--header-h) + 48px)}
  .hero__grid{grid-template-columns:1fr;gap:clamp(40px,6vw,64px);align-items:start}
  .hero__copy{max-width:56ch}
  .hero-eco{max-width:620px;margin:0 auto;width:100%}
  .explorer__intro{grid-template-columns:1fr;gap:48px}
  .site-footer__inner{grid-template-columns:1fr;gap:44px}
  .approach__body{grid-template-columns:1fr;gap:14px}
}
@media (max-width:1080px){
  .site-nav{display:none}
  .nav-toggle{display:flex}
  .site-header__cta{display:none}
  .explorer__visual{aspect-ratio:4/3}
  .explorer__tab{padding:12px 16px 14px}
  .explorer__tab-label{font-size:12px;letter-spacing:.1em}
  .approach__row{grid-template-columns:110px 1fr}
}
@media (max-width:700px){
  .explorer__visual{aspect-ratio:unset;height:clamp(440px,118vw,560px);border-radius:12px}
  /* deeper bottom gradient so the caption reads over a clean zone, not busy imagery */
  .explorer__overlay{background:
    linear-gradient(to top,rgba(7,11,24,.94) 0%,rgba(7,11,24,.82) 26%,rgba(7,11,24,.35) 52%,rgba(7,11,24,.06) 74%,transparent 100%)}
  /* mobile mockup: left-aligned, horizontally scrollable tab row */
  .explorer__tabs{justify-content:flex-start;gap:0}
  .explorer__tab{padding-left:13px;padding-right:13px}
  .explorer__tab:first-child{padding-left:0}
  .explorer__caption{padding:20px 20px 22px}
  .explorer__content{max-width:none}
  /* large stacked step treatment to match the mobile mockup (01 / RUN) */
  .explorer__step{font-size:12px;letter-spacing:.28em;margin:0 0 10px}
  .explorer__headline{max-width:none;font-size:clamp(23px,6.6vw,29px)}
  .explorer__chip{font-size:10px;padding:6px 11px}
  .explorer__tab{padding:10px 13px 12px}
  .explorer__tab-label{font-size:11px}
  .explorer__tab-num{display:none}
}
/* Mobile: no network diagram — central card then a compact card grid. */
@media (max-width:640px){
  .hero-eco{aspect-ratio:auto;max-width:440px;display:grid;grid-template-columns:1fr 1fr;
    gap:12px;isolation:auto}
  .hero-eco__links{display:none}
  .eco-core,.eco-card{position:static;transform:none!important;width:auto;
    opacity:1!important;animation:none!important}
  .eco-core{grid-column:1/-1;padding:22px}
  .eco-card--customer{grid-column:1/-1}
  .hero-eco.is-armed .eco-core,.hero-eco.is-armed .eco-card{opacity:1}
}
@media (max-width:520px){
  .hero__actions,.coming__actions,.closing__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn,.coming__actions .btn,.closing__actions .btn{width:100%}
  .hero__mantra{gap:8px;font-size:14px}
  .site-footer__nav{grid-template-columns:1fr 1fr;gap:28px}
  .approach__row{grid-template-columns:1fr;gap:14px}
}
@media (max-width:400px){
  .hero-eco{grid-template-columns:1fr}
  .eco-card--customer{grid-column:auto}
}

/* ---------- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  /* Keep the diagram fully visible and static; no drift, flow or draw-on. */
  .hero-eco .eco-core,.hero-eco .eco-card{opacity:1!important;
    transform:translate(-50%,-50%)!important;animation:none!important}
  .hero__lede [data-seq]{opacity:1!important;transform:none!important}
  .hero-eco__path{stroke-dashoffset:0!important;stroke-dasharray:none!important}
  .hero-eco__flow{display:none}
  @media (max-width:640px){
    .hero-eco .eco-core,.hero-eco .eco-card{transform:none!important}
  }
}

/* ==========================================================================
   SOLUTIONS PAGE (/solutions/)
   --------------------------------------------------------------------------
   Same design system as the homepage — identical tokens, .section-head,
   .display, .btn and .mono idioms — with its own composition. Nothing below
   touches a homepage selector, so index.php is unaffected.

   Art direction is set at 1440px and then re-composed (not merely stacked)
   at 1280 / 1080 / 860 / 640. The two diagrams (S01 swimlane, S05 management
   panel) each have a deliberate small-screen state rather than a squashed
   desktop one.
   ========================================================================== */

/* ---------- S01 · Solutions hero ---------------------------------------- */
.sol-hero{position:relative;display:flex;align-items:center;overflow:hidden;background:var(--bg);
  padding:calc(var(--header-h) + clamp(48px,5vw,84px)) 0 clamp(64px,7vw,110px)}
.sol-hero__grid-texture{position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(10,15,28,.13) 1px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,rgba(0,0,0,.5) 64%,rgba(0,0,0,.85) 100%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,rgba(0,0,0,.5) 64%,rgba(0,0,0,.85) 100%)}
.sol-hero__glow{position:absolute;width:820px;height:820px;top:-32%;right:-16%;border-radius:50%;
  background:rgba(0,51,204,.075);filter:blur(130px);pointer-events:none}
.sol-hero__inner{position:relative;width:100%}
.sol-hero__grid{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);
  gap:clamp(32px,4vw,72px);align-items:center}

.sol-hero__headline{font-size:clamp(33px,3.6vw,52px);line-height:1.04;letter-spacing:-.032em;
  font-weight:700;color:var(--ink)}
.sol-hero__copy{max-width:44ch;margin:26px 0 0}
.sol-hero__copy p{font-size:clamp(15px,1.05vw,16.5px);line-height:1.62;color:var(--ink-body)}
.sol-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.sol-hero__note{display:block;margin:clamp(28px,3vw,40px) 0 0;padding-top:22px;
  border-top:1px solid var(--line);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim)}

/* Hero lede entrance — same shape as the homepage sequence, own namespace. */
.sol-hero__lede.is-armed [data-seq]{opacity:0;transform:translateY(14px)}
.sol-hero__lede.is-in [data-seq]{opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.sol-hero__lede.is-in [data-seq="1"]{transition-delay:.05s}
.sol-hero__lede.is-in [data-seq="2"]{transition-delay:.14s}
.sol-hero__lede.is-in [data-seq="3"]{transition-delay:.30s}
.sol-hero__lede.is-in [data-seq="4"]{transition-delay:.42s}
.sol-hero__lede.is-in [data-seq="5"]{transition-delay:.52s}

/* ---------- S01 · Swimlane artifact -------------------------------------
   All geometry is expressed against a single 620×430 viewBox. The SVG uses
   preserveAspectRatio:none and the board is locked to that exact ratio, so
   there is no distortion and the HTML nodes sit precisely on the wires. */
.lane{position:relative;width:100%}
.lane__caption{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.lane__caption-dot{width:6px;height:6px;flex:none;background:var(--cyan);display:block}
.lane__board{position:relative;width:100%;aspect-ratio:620/430}
.lane__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lane__grid path{fill:none;stroke:var(--line-soft);stroke-width:1}
.lane__feeds path{fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:2 5;opacity:0;
  transition:opacity .5s var(--ease-out) .95s}
.lane.is-in .lane__feeds path{opacity:1}
.lane__path{fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;opacity:.62}
.lane__path--branch{stroke:var(--cyan);opacity:.55}
.lane.is-armed .lane__path{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
.lane.is-in .lane__path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease-out) .25s}
.lane__pulse{fill:var(--brand);opacity:0}
.lane.is-live .lane__pulse{opacity:.9;animation:lane-flow 4.2s linear infinite}
@keyframes lane-flow{0%{offset-distance:0%;opacity:0}10%{opacity:.9}86%{opacity:.9}100%{offset-distance:100%;opacity:0}}

/* stage header row: x 96→600, y 0→40 of the viewBox */
.lane__stages{position:absolute;left:15.48%;right:3.22%;top:0;height:9.3%;
  display:grid;grid-template-columns:repeat(6,1fr);align-items:center}
.lane__stage{text-align:center;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint)}

/* lane labels sit in the left gutter, x 0→96 */
.lane__label{position:absolute;left:0;top:var(--t);width:15.48%;transform:translateY(-50%);
  display:flex;align-items:center;gap:7px;padding-right:10px}
.lane__label-ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  flex:none;border-radius:50%;background:var(--brand-tint);color:var(--brand)}
.lane__label-ic svg{width:13px;height:13px}
.lane__label-name{font-size:11.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane__label--customer .lane__label-ic{background:rgba(55,189,209,.16);color:#1f8ea1}

/* work nodes */
.lane__node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  z-index:2;width:12.6%;min-width:74px;display:flex;flex-direction:column;gap:2px;
  padding:8px 9px;background:var(--surface-card);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 20px -14px rgba(10,15,28,.3)}
.lane__node::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:var(--brand);opacity:.8}
.lane__node--customer::before{background:var(--cyan)}
.lane__node-title{font-size:10.5px;font-weight:600;color:var(--ink);line-height:1.25;letter-spacing:-.01em}
.lane__node-meta{font-size:8.5px;letter-spacing:.06em;color:var(--ink-faint);white-space:nowrap}
.lane.is-armed .lane__node{opacity:0;transform:translate(-50%,-50%) translateY(7px)}
.lane.is-in .lane__node{opacity:1;transform:translate(-50%,-50%);
  transition:opacity .42s var(--ease-out),transform .5s var(--ease-out);
  transition-delay:calc(.34s + var(--i) * .085s)}

/* management band: x 96→600, y 366→422 */
.lane__mgmt{position:absolute;left:15.48%;right:3.22%;top:85.12%;height:13.02%;
  display:flex;align-items:center;gap:12px;padding:0 16px;border-radius:10px;
  background:linear-gradient(180deg,var(--dark-2),var(--dark));
  border:1px solid rgba(60,110,255,.26);
  box-shadow:0 18px 40px -26px rgba(10,15,28,.55)}
.lane__mgmt-mark{display:inline-flex;width:20px;height:20px;flex:none;background-color:#3D6BFF;
  -webkit-mask:url("../images/thinkasol-mark.png") center/contain no-repeat;
  mask:url("../images/thinkasol-mark.png") center/contain no-repeat}
.lane__mgmt-mark img{display:none}
.lane__mgmt-name{flex:none;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#8FB4FF}
.lane__mgmt-q{font-size:11.5px;color:var(--dark-body);line-height:1.35;letter-spacing:-.005em}
.lane.is-armed .lane__mgmt{opacity:0;transform:translateY(10px)}
.lane.is-in .lane__mgmt{opacity:1;transform:none;
  transition:opacity .5s var(--ease-out) 1.05s,transform .55s var(--ease-out) 1.05s}

/* mobile trace — hidden until the board is retired */
.lane__mobile{display:none}

/* ---------- S02 · Where the work slows down ----------------------------- */
.friction__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(48px,5.5vw,84px)}
.friction__title{max-width:19ch}
.friction__intro{font-size:clamp(15px,1.05vw,16.5px);line-height:1.65;color:var(--ink-body);max-width:46ch}
.friction__body{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(32px,5vw,88px);align-items:start}

/* stage rail */
.frail{position:sticky;top:112px}
.frail__caption{margin:0 0 20px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint)}
.frail__list{list-style:none;margin:0;padding:0;position:relative}
.frail__list::before{content:"";position:absolute;left:4.5px;top:10px;bottom:10px;width:1px;
  background:var(--line)}
.frail__list::after{content:"";position:absolute;left:4.5px;top:10px;width:1px;
  height:calc(var(--frail-p,0) * (100% - 20px));background:var(--brand);
  transition:height .25s linear}
.frail__item{position:relative;display:flex;align-items:center;gap:14px;padding:9px 0}
.frail__dot{position:relative;z-index:1;width:10px;height:10px;flex:none;border-radius:50%;
  background:var(--surface-warm);border:1px solid var(--line-strong);
  transition:background .3s var(--ease-out),border-color .3s var(--ease-out),transform .3s var(--ease-out)}
.frail__stage{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  transition:color .3s var(--ease-out)}
.frail__item.is-on .frail__dot{background:var(--brand);border-color:var(--brand);transform:scale(1.2)}
.frail__item.is-on .frail__stage{color:var(--ink)}
.frail__foot{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}

/* the ledger */
.fledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.fledger__row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,2.4vw,36px);align-items:start;padding:clamp(24px,2.6vw,34px) 0;
  border-bottom:1px solid var(--line)}
.fledger__num{font-size:11px;letter-spacing:.18em;color:var(--brand);padding-top:5px;
  transition:color .3s var(--ease-out)}
.fledger__label{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:0 0 8px;
  font-size:clamp(18px,1.55vw,23px);font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.fledger__stage{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  padding:3px 8px;border:1px solid var(--line);border-radius:2px}
.fledger__copy{font-size:15px;line-height:1.62;color:var(--ink-body);max-width:62ch}
.fledger__flag{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  flex:none;margin-top:3px;border-radius:50%;background:rgba(224,129,47,.12);color:#C06A1E;
  font-family:var(--mono);font-size:12px;font-weight:500;
  transition:transform .3s var(--ease-out),background .3s var(--ease-out)}
.fledger__row.is-on .fledger__flag{background:rgba(224,129,47,.2);transform:scale(1.08)}
/* armed state — released by the section's scroll progress */
.friction.is-armed .fledger__row{opacity:0;transform:translateY(16px)}
.friction.is-armed .fledger__row.is-shown{opacity:1;transform:none;
  transition:opacity .55s var(--ease-out),transform .6s var(--ease-out)}
.friction__close{margin:clamp(44px,5vw,72px) 0 0;max-width:56ch;font-size:clamp(16px,1.3vw,19px);
  line-height:1.5;font-weight:500;color:var(--ink);letter-spacing:-.015em}

/* ---------- S03 · Connection model (dark) ------------------------------- */
.model__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(48px,5.5vw,80px)}
.model__title{max-width:17ch}
.model__intro{max-width:48ch}

.stack{position:relative;display:grid;gap:22px;padding:clamp(20px,2.4vw,34px) 0}
.stack__spine{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  clip-path:inset(0 0 calc((1 - var(--sol-draw,1)) * 100%) 0)}
.stack__lines path{fill:none;stroke:rgba(120,170,255,.4);stroke-width:1;stroke-dasharray:3 6}

.slab{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(20px,3vw,56px);align-items:center;
  padding:clamp(22px,2.4vw,32px) clamp(22px,2.6vw,36px);border-radius:14px;
  background:linear-gradient(180deg,rgba(20,28,48,.86),rgba(12,18,34,.86));
  border:1px solid var(--dark-line-soft);
  box-shadow:0 24px 60px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(140,180,255,.07);
  transition:border-color .4s var(--ease-out),background .4s var(--ease-out)}
.slab.is-on{border-color:rgba(80,140,255,.34)}
.slab__num{display:inline-block;margin-bottom:12px;font-size:10px;letter-spacing:.22em;color:var(--cyan)}
.slab__name{font-size:clamp(19px,1.65vw,25px);font-weight:600;letter-spacing:-.022em;
  color:var(--dark-ink);margin-bottom:10px}
.slab__copy{font-size:14.5px;line-height:1.62;color:var(--dark-body);max-width:44ch}
.slab__nodes{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}
.slab__node{padding:9px 14px;border-radius:4px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dark-body);
  background:rgba(255,255,255,.035);border:1px solid var(--dark-line-soft);
  transition:color .35s var(--ease-out),border-color .35s var(--ease-out),background .35s var(--ease-out)}
.slab.is-on .slab__node{color:var(--dark-ink);border-color:rgba(120,170,255,.28);
  background:rgba(60,110,255,.09)}
.stack.is-armed .slab{opacity:0;transform:translateY(20px)}
.stack.is-armed .slab.is-shown{opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .7s var(--ease-out),border-color .4s var(--ease-out)}

/* one data language */
.odl{margin-top:clamp(48px,5.5vw,84px);padding-top:clamp(34px,3.6vw,52px);
  border-top:1px solid var(--dark-line-soft)}
.odl__label{margin:0 0 22px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.odl__rail{list-style:none;display:flex;align-items:center;gap:0;margin:0;padding:0;flex-wrap:wrap}
.odl__step{position:relative;display:flex;align-items:center;gap:11px;padding:0 clamp(14px,1.8vw,28px) 0 0;
  margin-right:clamp(14px,1.8vw,28px)}
.odl__step:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;width:clamp(20px,2.6vw,42px);
  height:1px;background:linear-gradient(90deg,rgba(120,170,255,.5),rgba(120,170,255,.12));
  transform:translate(50%,-50%)}
.odl__dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--cyan);opacity:.85}
.odl__name{font-size:clamp(14px,1.15vw,17px);font-weight:600;letter-spacing:-.015em;color:var(--dark-ink);
  white-space:nowrap}
.odl.is-armed .odl__step{opacity:0;transform:translateY(10px)}
.odl.is-armed .odl__step.is-shown{opacity:1;transform:none;
  transition:opacity .45s var(--ease-out),transform .5s var(--ease-out)}
.odl__who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);
  margin-top:clamp(30px,3.4vw,46px)}
.odl__line{font-size:14px;line-height:1.55;color:var(--dark-body);
  padding-top:16px;border-top:1px solid var(--dark-line-soft)}
.odl__team{display:block;font-weight:600;color:var(--dark-ink);margin-bottom:2px}
.odl__note{margin:clamp(26px,3vw,40px) 0 0;max-width:74ch;font-size:11px;line-height:1.7;
  letter-spacing:.04em;color:var(--dark-dim)}

/* ---------- S04 · Six objectives ---------------------------------------- */
.objectives__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(44px,5vw,72px)}
.objectives__title{max-width:15ch}
.objectives__intro{font-size:clamp(15px,1.05vw,16.5px);line-height:1.65;color:var(--ink-body);max-width:48ch}

/* Desktop: the six rows hold the left column and every panel is absolutely
   positioned into the right column, so only one is ever visible. On small
   screens the same markup falls back to an accordion with no DOM change. */
.areas{position:relative}
.areas__list{list-style:none;margin:0;padding:0;width:46%;border-top:1px solid var(--line)}
.area{border-bottom:1px solid var(--line)}
.area__row{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;
  gap:16px;width:100%;padding:clamp(18px,1.9vw,26px) 4px;background:transparent;border:0;
  text-align:left;cursor:pointer;color:inherit;
  transition:padding-left .35s var(--ease-out)}
.area__num{font-size:11px;letter-spacing:.18em;color:var(--ink-faint);
  transition:color .3s var(--ease-out)}
.area__ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  border-radius:50%;background:var(--brand-tint);color:var(--brand);
  transition:background .3s var(--ease-out),color .3s var(--ease-out)}
.area__ic svg{width:18px;height:18px}
.area__name{grid-column:3;font-size:clamp(19px,1.65vw,26px);font-weight:600;letter-spacing:-.025em;
  color:var(--ink);line-height:1.15;transition:color .3s var(--ease-out)}
.area__obj{grid-column:3;font-size:13px;line-height:1.45;color:var(--ink-dim);margin-top:4px;
  max-width:34ch}
.area__chev{font-family:var(--mono);font-size:13px;color:var(--line-strong);
  transition:transform .35s var(--ease-out),color .3s var(--ease-out)}
.area__row:hover .area__name{color:var(--brand)}
.area__row:hover .area__chev{transform:translateX(4px);color:var(--brand)}
.area__row.is-active{padding-left:16px}
.area__row.is-active .area__num{color:var(--brand)}
.area__row.is-active .area__ic{background:var(--brand);color:#fff}
.area__row.is-active .area__name{color:var(--ink)}
.area__row.is-active .area__chev{color:var(--brand);transform:translateX(4px)}
/* Accent bar lives on the ROW, not on the <li>: making .area a positioned
   ancestor would capture the absolutely-placed panel below and collapse it
   into the left column. */
.area__row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--brand);transform:scaleY(0);transform-origin:center;
  transition:transform .4s var(--ease-drawer)}
.area__row.is-active::before{transform:scaleY(1)}

/* right-hand panel */
.area__panel{position:absolute;left:52%;top:1px;width:48%;
  padding:clamp(26px,2.6vw,38px);background:var(--surface-card);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 26px 60px -44px rgba(10,15,28,.4)}
.area__panel[hidden]{display:none}
.area__panel-obj{margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid var(--line-soft);
  font-size:12px;line-height:1.6;letter-spacing:.02em;color:var(--brand)}
.area__facets{margin:0;display:grid;gap:20px}
.area__facet{display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;align-items:start}
.area__facet dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  padding-top:3px}
.area__facet dd{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-body)}
.area__chips-label{margin:26px 0 12px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.area__chips{display:flex;flex-wrap:wrap;gap:8px}
.area__chip{padding:7px 12px;border-radius:3px;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-dim);background:var(--surface-cool);
  border:1px solid var(--line-soft)}
/* panel swap */
.area__panel.is-leaving{opacity:0;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease}
.area__panel.is-entering{opacity:0;transform:translateY(10px)}
.area__panel.is-active{opacity:1;transform:none;
  transition:opacity .4s var(--ease-out),transform .45s var(--ease-out)}

/* overlap + audience guidance */
.guide{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(30px,4.5vw,80px);
  margin-top:clamp(56px,6vw,96px);padding-top:clamp(34px,3.6vw,52px);border-top:1px solid var(--line)}
.guide__label{margin:0 0 14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.guide__copy{font-size:14.5px;line-height:1.65;color:var(--ink-body);max-width:42ch}
.guide__list{list-style:none;margin:0;padding:0}
.guide__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line-soft)}
.guide__row:first-child{border-top:1px solid var(--line-soft)}
.guide__case{font-size:15px;line-height:1.5;color:var(--ink);letter-spacing:-.01em}
.guide__tags{display:flex;gap:7px;flex:none}
.guide__tag{padding:5px 10px;border-radius:3px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-tint)}
.guide__note{margin:18px 0 0;font-size:11px;line-height:1.7;letter-spacing:.04em;color:var(--ink-faint);
  max-width:52ch}

/* ---------- S05 · One operating picture --------------------------------- */
.picture__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(32px,4.5vw,80px);align-items:center}
.picture__title{max-width:16ch}
.picture__intro{margin-top:22px;font-size:15px;line-height:1.65;color:var(--ink-body);max-width:44ch}
.picture__caption{display:block;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.picture__close{margin:clamp(44px,5vw,72px) 0 0;max-width:62ch;font-size:clamp(16px,1.3vw,19px);
  line-height:1.5;font-weight:500;color:var(--ink);letter-spacing:-.015em}

.panel{border-radius:16px;overflow:hidden;background:linear-gradient(180deg,var(--dark-2),var(--dark));
  border:1px solid rgba(60,110,255,.2);
  box-shadow:0 40px 90px -56px rgba(10,15,28,.72),inset 0 1px 0 rgba(140,180,255,.08)}
.panel__chrome{display:flex;align-items:center;gap:12px;padding:16px clamp(18px,2vw,26px);
  border-bottom:1px solid var(--dark-line-soft);background:rgba(255,255,255,.02)}
.panel__mark{display:inline-flex;width:22px;height:22px;flex:none;background-color:#3D6BFF;
  -webkit-mask:url("../images/thinkasol-mark.png") center/contain no-repeat;
  mask:url("../images/thinkasol-mark.png") center/contain no-repeat}
.panel__mark img{display:none}
.panel__title{font-size:14px;font-weight:600;color:var(--dark-ink);letter-spacing:-.01em}
.panel__pill{margin-left:auto;padding:5px 11px;border-radius:3px;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#8FB4FF;background:rgba(60,110,255,.14);
  border:1px solid rgba(60,110,255,.26)}
.panel__body{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr)}
.panel__sources{padding:clamp(18px,2vw,26px);border-right:1px solid var(--dark-line-soft);
  display:flex;flex-direction:column;gap:12px;align-content:start}
.panel__sources-label{margin:0 0 4px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dark-dim)}
.panel__source{display:flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.06em;
  color:var(--dark-body)}
.panel__source-dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--cyan);opacity:.5;
  transition:opacity .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.panel.is-live .panel__source-dot{opacity:1;box-shadow:0 0 0 3px rgba(55,189,209,.14)}

.panel__timeline{list-style:none;margin:0;padding:clamp(8px,1vw,14px) 0}
.panel__row{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1.15fr) minmax(0,1fr) minmax(0,.8fr) auto;
  gap:clamp(10px,1.4vw,20px);align-items:center;padding:13px clamp(18px,2vw,26px)}
.panel__row + .panel__row{border-top:1px solid rgba(255,255,255,.05)}
.panel__tick{width:7px;height:7px;flex:none;border-radius:50%;background:rgba(120,170,255,.35)}
.panel__stage{font-size:13px;font-weight:600;color:var(--dark-ink);letter-spacing:-.01em}
.panel__ref{font-size:11px;letter-spacing:.05em;color:var(--dark-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel__owner{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-dim)}
.panel__state{justify-self:end;padding:5px 10px;border-radius:3px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;border:1px solid transparent}
.panel__state--done{color:#6FD8A6;background:rgba(31,158,116,.14);border-color:rgba(31,158,116,.28)}
.panel__state--warn{color:#F0B36B;background:rgba(224,129,47,.14);border-color:rgba(224,129,47,.3)}
.panel__state--open{color:#8FB4FF;background:rgba(60,110,255,.14);border-color:rgba(60,110,255,.3)}
.panel__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  padding:15px clamp(18px,2vw,26px);border-top:1px solid var(--dark-line-soft);
  background:rgba(255,255,255,.02)}
.panel__foot-label{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dark-dim)}
.panel__foot-item{position:relative;padding-left:15px;font-size:12.5px;color:var(--dark-body)}
.panel__foot-item::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:#E0812F}
.panel__foot-item:last-child::before{background:#3D6BFF}
/* sequenced arrival */
.panel.is-armed .panel__row,.panel.is-armed .panel__source,.panel.is-armed .panel__foot-item{opacity:0}
.panel.is-armed .panel__row{transform:translateX(-10px)}
.panel.is-in .panel__source{opacity:1;transition:opacity .4s var(--ease-out);
  transition-delay:calc(.1s + var(--i) * .07s)}
.panel.is-in .panel__row{opacity:1;transform:none;
  transition:opacity .45s var(--ease-out),transform .5s var(--ease-out);
  transition-delay:calc(.3s + var(--i) * .09s)}
.panel.is-in .panel__foot-item{opacity:1;transition:opacity .45s var(--ease-out) 1s}

/* ---------- S06 · Questions and next step ------------------------------- */
.next{overflow:hidden;padding-bottom:clamp(48px,5vw,72px)}
.next__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 10%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 10%,transparent 72%)}
.next__inner{position:relative}
.faq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,52px);
  margin:0;padding-bottom:clamp(44px,5vw,72px);border-bottom:1px solid var(--dark-line-soft)}
.faq__q{font-size:clamp(15px,1.2vw,17.5px);font-weight:600;letter-spacing:-.018em;
  color:var(--dark-ink);line-height:1.3;margin-bottom:12px}
.faq__a{margin:0;font-size:14px;line-height:1.65;color:var(--dark-body)}
.next__cta{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,72px);align-items:end;padding-top:clamp(44px,5vw,72px)}
.next__title{grid-row:1;max-width:20ch}
.next__copy{grid-column:2;grid-row:1;font-size:14.5px;line-height:1.65;color:var(--dark-body);max-width:44ch}
.next__actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,40px)}
.next__plates{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:clamp(48px,5vw,80px)}
.next__plate{display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(120,170,255,.34),transparent)}
.next__plate:nth-child(1){width:min(760px,62%)}
.next__plate:nth-child(2){width:min(520px,42%);opacity:.6}
.next__plate:nth-child(3){width:min(300px,24%);opacity:.35}

/* ==========================================================================
   SOLUTIONS — responsive
   ========================================================================== */

/* Laptop: tighten, keep every composition intact. */
@media (max-width:1280px){
  .sol-hero{padding-top:calc(var(--header-h) + 44px)}
  .sol-hero__grid{grid-template-columns:1fr;gap:clamp(36px,5vw,56px)}
  .sol-hero__headline{max-width:22ch;font-size:clamp(32px,4.4vw,48px)}
  .sol-hero__copy{max-width:64ch}
  /* full-width board: the swimlane gains room rather than losing it */
  .lane__board{aspect-ratio:620/380}
  .lane__node-title{font-size:12px}
  .lane__node-meta{font-size:9.5px}
  .lane__label-name{font-size:12.5px}
  .lane__stage{font-size:10px}
  .lane__mgmt-q{font-size:13px}
  .areas__list{width:44%}
  .area__panel{left:50%;width:50%}
}

@media (max-width:1080px){
  .friction__head,.model__head,.objectives__head{grid-template-columns:1fr;gap:22px;align-items:start}
  .friction__title,.model__title,.objectives__title{max-width:24ch}
  .friction__body{grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:36px}
  .slab{grid-template-columns:1fr;gap:20px}
  .slab__nodes{justify-content:flex-start}
  .odl__who{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .guide{grid-template-columns:1fr;gap:36px}
  .picture__grid{grid-template-columns:1fr;gap:32px}
  .picture__title{max-width:24ch}
  .picture__intro{max-width:64ch}
  .faq{grid-template-columns:1fr;gap:26px}
  .faq__item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;
    padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.05)}
  .faq__item:last-child{border-bottom:0;padding-bottom:0}
  .faq__q{margin-bottom:0}
  .next__cta{grid-template-columns:1fr;gap:18px;align-items:start}
  .next__copy{grid-column:1;grid-row:2}
  .next__title{max-width:26ch}
}

/* Tablet & below: the two diagrams switch to their own compositions. */
@media (max-width:860px){
  /* swimlane → vertical trace */
  .lane__board{display:none}
  .lane__mobile{display:grid;gap:0;list-style:none;margin:0;padding:0;position:relative}
  .lane__mobile::before{content:"";position:absolute;left:5px;top:14px;bottom:14px;width:1px;
    background:linear-gradient(180deg,var(--brand),rgba(0,51,204,.15))}
  .lane__mstep{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:14px;padding:13px 0 13px 26px;border-bottom:1px solid var(--line-soft)}
  .lane__mstep::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:11px;height:11px;border-radius:50%;background:var(--surface-card);
    border:2px solid var(--brand)}
  .lane__mstep:last-child::before{border-color:var(--cyan)}
  .lane__mstage{grid-column:1;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-faint);width:62px}
  .lane__mtitle{grid-column:2;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
  .lane__mmeta{grid-column:3;font-size:9.5px;letter-spacing:.1em;color:var(--ink-faint);white-space:nowrap}

  /* stage rail → horizontal strip above the ledger.
     minmax(0,1fr): a bare 1fr floors at min-content, and the rail's flex row
     would then widen the whole track and push the page sideways. */
  .friction__body{grid-template-columns:minmax(0,1fr);gap:26px}
  .frail,.frail__list,.fledger{min-width:0}
  .frail{position:static}
  .frail__caption{margin-bottom:14px}
  .frail__list{display:flex;overflow-x:auto;gap:0;padding-bottom:10px;
    scrollbar-width:none;-ms-overflow-style:none}
  .frail__list::-webkit-scrollbar{display:none}
  .frail__list::before{left:5px;right:5px;top:14px;bottom:auto;width:auto;height:1px}
  .frail__list::after{left:5px;top:14px;width:calc(var(--frail-p,0) * (100% - 10px));height:1px}
  .frail__item{flex-direction:column;align-items:flex-start;gap:10px;padding:9px 26px 0 0;flex:none}
  .frail__foot{display:none}
  .fledger__row{grid-template-columns:auto minmax(0,1fr);gap:16px}
  .fledger__flag{grid-column:2;grid-row:1;justify-self:end;margin-top:0}

  /* objectives → accordion, single DOM */
  .areas__list{width:100%}
  .area__panel{position:static;width:auto;left:auto;border:0;border-radius:0;box-shadow:none;
    background:transparent;padding:0 4px clamp(24px,4vw,32px)}
  .area__panel-obj{display:none}
  .area__row.is-active{padding-left:12px}
  .area__chev{transform:rotate(90deg)}
  .area__row:hover .area__chev,.area__row.is-active .area__chev{transform:rotate(90deg) translateX(3px)}
  .area__row.is-active .area__chev{transform:rotate(-90deg)}
  .area__obj{max-width:46ch}

  /* management panel → source rail moves above the timeline */
  .panel__body{grid-template-columns:1fr}
  .panel__sources{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 18px;
    border-right:0;border-bottom:1px solid var(--dark-line-soft);padding-block:14px}
  .panel__sources-label{width:100%;margin:0}
  .panel__row{grid-template-columns:auto minmax(0,1fr) auto;gap:10px 14px;
    padding-block:14px;row-gap:6px}
  .panel__ref{grid-column:2;grid-row:2;font-size:10.5px}
  .panel__owner{grid-column:3;grid-row:2;justify-self:end}
  .panel__state{grid-column:3;grid-row:1}
}

@media (max-width:640px){
  .sol-hero__headline{font-size:clamp(28px,7.6vw,36px);max-width:none}
  .sol-hero__actions{flex-direction:column;align-items:stretch}
  .sol-hero__actions .btn{width:100%}
  .sol-hero__note{font-size:10px;letter-spacing:.14em}
  .lane__mstep{grid-template-columns:minmax(0,1fr) auto;padding-left:24px}
  .lane__mstage{grid-column:1;grid-row:1;width:auto}
  .lane__mtitle{grid-column:1;grid-row:2;font-size:15px}
  .lane__mmeta{grid-column:2;grid-row:1/3;align-self:center}
  .fledger__label{font-size:18px;gap:9px}
  .fledger__copy{font-size:14.5px}
  .area__row{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
  .area__ic{display:none}
  .area__name{grid-column:2;font-size:19px}
  .area__obj{grid-column:2;font-size:12.5px}
  .area__facet{grid-template-columns:1fr;gap:6px}
  .area__facet dt{padding-top:0}
  .guide__row{flex-direction:column;align-items:flex-start;gap:10px}
  .odl__who{grid-template-columns:1fr;gap:0}
  .odl__line{padding:14px 0}
  .odl__line:not(:last-child){border-bottom:0}
  .faq__item{grid-template-columns:1fr;gap:10px}
  .next__actions{flex-direction:column;align-items:stretch}
  .next__actions .btn{width:100%}
}

@media (max-width:480px){
  .odl__rail{flex-direction:column;align-items:flex-start;gap:0}
  .odl__step{margin-right:0;padding:9px 0}
  .odl__step:not(:last-child)::after{display:none}
  .panel__foot{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---------- Solutions · reduced motion ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sol-hero__lede [data-seq]{opacity:1!important;transform:none!important}
  .lane__path{stroke-dashoffset:0!important;stroke-dasharray:none!important}
  .lane__pulse{display:none}
  .lane__feeds path{opacity:1!important}
  .lane__node{opacity:1!important;transform:translate(-50%,-50%)!important}
  .lane__mgmt{opacity:1!important;transform:none!important}
  .fledger__row,.slab,.odl__step,
  .panel__row,.panel__source,.panel__foot-item{opacity:1!important;transform:none!important}
  .stack__spine{clip-path:none!important}
  .frail__list::after{transition:none}
}

/* ==========================================================================
   PLATFORM (/platform/)
   --------------------------------------------------------------------------
   Four major sections + a compact CTA, in the same design system as Home and
   Solutions but with its own visual language: a grounded platform "elevation"
   (not the homepage radial), a fragments→one-record convergence, a travelling
   context object (not the Solutions data-language list), and a dependency
   spine. Every selector below is absent from index.php and solutions/index.php,
   so neither of those pages is touched.
   ========================================================================== */

/* ---------- S01 · Platform hero ----------------------------------------- */
.plat-hero{position:relative;overflow:hidden;background:var(--bg);
  padding:calc(var(--header-h) + 48px) 0 clamp(64px,8vw,112px)}
.plat-hero__grid-texture{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(10,15,28,.14) 1px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,rgba(0,0,0,.5) 72%,rgba(0,0,0,.8) 100%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,rgba(0,0,0,.5) 72%,rgba(0,0,0,.8) 100%)}
.plat-hero__glow{position:absolute;width:720px;height:720px;top:-24%;right:-12%;border-radius:50%;
  filter:blur(120px);pointer-events:none;opacity:.5;background:rgba(0,51,204,.09)}
.plat-hero__inner{position:relative}
.plat-hero__grid{display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);
  gap:clamp(30px,3.6vw,64px);align-items:center}
.plat-hero__headline{font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.035em;
  color:var(--ink);font-weight:700;max-width:15ch}
.plat-hero__copy{max-width:44ch;margin-top:24px}
.plat-hero__copy p{font-size:clamp(15.5px,1.1vw,17px);line-height:1.62;color:var(--ink-body)}
.plat-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3vw,36px)}
.plat-hero__note{margin:clamp(28px,3vw,40px) 0 0;padding-top:22px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}

/* Platform elevation: a web-native connected-business model. */
.plat-stage{position:relative;margin:0;border-radius:16px;overflow:hidden;isolation:isolate;
  aspect-ratio:7/6;background:linear-gradient(145deg,#f8faff 0%,#edf2fb 52%,#f8fafc 100%);border:1px solid var(--line);
  box-shadow:0 30px 70px -38px rgba(10,15,28,.5)}
.plat-stage__label{position:absolute;top:16px;left:16px;z-index:3;display:flex;align-items:center;gap:8px;
  margin:0;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.plat-stage__dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none;
  box-shadow:0 0 10px rgba(55,189,209,.65)}
.plat-stage__note{position:absolute;top:16px;right:16px;z-index:3;margin:0;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

.plat-stage__map{position:absolute;left:18px;right:18px;top:50px;bottom:104px}
.plat-stage__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plat-stage__wire-grid path{fill:none;stroke:rgba(10,15,28,.055);stroke-width:1}
.plat-stage__wire-main path{fill:none;stroke:rgba(0,51,204,.42);stroke-width:1.7;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.plat-stage__wire-main path:last-child{stroke:var(--cyan);stroke-width:2}
.plat-stage__signals circle{fill:var(--cyan);filter:drop-shadow(0 0 5px rgba(55,189,209,.8));opacity:0}
.plat-stage.is-live .plat-stage__signals circle{opacity:.92}

.plat-node{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;width:31%;min-height:58px;
  padding:10px 11px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 14px 28px -22px rgba(10,15,28,.38)}
.plat-node--tl{left:2%;top:5%}.plat-node--tr{right:2%;top:5%}
.plat-node--ml{left:2%;top:43%}.plat-node--mr{right:2%;top:43%}
.plat-node--bc{left:34.5%;bottom:0}
.plat-node__ic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border-radius:8px;background:var(--brand-tint);color:var(--brand)}
.plat-node__ic svg{width:17px;height:17px}
.plat-node__body{display:flex;flex-direction:column;min-width:0}
.plat-node__name{font-size:12px;font-weight:600;line-height:1.2;color:var(--ink)}
.plat-node__meta{margin-top:3px;font-size:8px;line-height:1.2;letter-spacing:.04em;color:var(--ink-faint);white-space:nowrap}
.plat-context{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);width:104px;height:104px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;text-align:center;
  background:var(--surface-card);border:1px solid rgba(0,51,204,.35);box-shadow:0 16px 38px -22px rgba(0,51,204,.55)}
.plat-context__rings{position:absolute;inset:-12px;border:1px solid rgba(0,51,204,.12);border-radius:50%}
.plat-context__rings::after{content:"";position:absolute;inset:6px;border:1px dashed rgba(55,189,209,.25);border-radius:50%}
.plat-context__label{font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.plat-context__value{margin-top:3px;font-size:13px;font-weight:700;line-height:1.15;color:var(--ink)}

.plat-found{position:absolute;left:clamp(12px,1.6vw,18px);right:clamp(12px,1.6vw,18px);
  bottom:clamp(12px,1.6vw,18px);z-index:4;padding:0}
.plat-found__cap{margin:0 0 8px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.plat-found__base{position:relative;overflow:hidden;margin-top:13px;display:flex;align-items:center;gap:11px;
  padding:13px 15px;border-radius:10px;color:var(--dark-ink);
  background:linear-gradient(180deg,#0E1424,#0A0F1C);border:1px solid rgba(60,110,255,.3)}
.plat-found__edge{position:absolute;top:0;left:0;right:0;height:2px;transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.9}
.plat-found__mark{position:relative;width:24px;height:24px;flex:none}
.plat-found__mark img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:.95}
.plat-found__name{font-size:13.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.plat-found__role{margin-left:auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-body)}
.plat-found__pulse{position:absolute;top:1px;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 12px 2px rgba(55,189,209,.8);opacity:0}

/* Hero entrance (armed by JS; no-JS shows everything) */
.plat-stage.is-armed .plat-node{opacity:0;transform:translateY(9px)}
.plat-stage.is-armed .plat-context{opacity:0;transform:translate(-50%,-50%) scale(.9)}
.plat-stage.is-armed .plat-found__edge{opacity:0;transform:scaleX(.35)}
.plat-stage.is-in .plat-node{opacity:1;transform:none;
  transition:opacity .5s var(--ease-out),transform .55s var(--ease-out);
  transition-delay:calc(.3s + var(--i) * .08s)}
.plat-stage.is-in .plat-context{opacity:1;transform:translate(-50%,-50%) scale(1);
  transition:opacity .55s var(--ease-out) .74s,transform .7s var(--ease-out) .74s}
.plat-stage.is-in .plat-found__edge{opacity:.9;transform:none;
  transition:opacity .6s var(--ease-out) .7s,transform .7s var(--ease-out) .7s}
.plat-stage.is-live .plat-found__pulse{opacity:1;animation:plat-edge 3.6s var(--ease-io) infinite}
.plat-hero__lede.is-armed [data-seq]{opacity:0;transform:translateY(14px)}
.plat-hero__lede.is-in [data-seq]{opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.plat-hero__lede.is-in [data-seq="1"]{transition-delay:.05s}
.plat-hero__lede.is-in [data-seq="2"]{transition-delay:.14s}
.plat-hero__lede.is-in [data-seq="3"]{transition-delay:.30s}
.plat-hero__lede.is-in [data-seq="4"]{transition-delay:.42s}
.plat-hero__lede.is-in [data-seq="5"]{transition-delay:.52s}
@keyframes plat-edge{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}

/* ---------- S02 · One business, different systems ----------------------- */
.plat-frag__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,4vw,64px);
  align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.plat-frag__title{max-width:16ch}
.plat-frag__intro{font-size:clamp(15px,1.05vw,16.5px);line-height:1.65;color:var(--ink-body);max-width:46ch}
.plat-frag__body{max-width:1180px;margin:0 auto}

.plat-conv{position:relative;display:flex;flex-direction:column;padding:clamp(18px,2.4vw,30px);
  background:rgba(255,255,255,.38);border:1px solid var(--line);border-radius:16px}
.plat-conv__legend{display:grid;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.plat-conv__legend span:nth-child(2){text-align:center}.plat-conv__legend span:last-child{text-align:right}
.plat-conv__frags{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.plat-fragc{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 15px 15px;
  background:var(--surface-card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 30px -22px rgba(10,15,28,.28);--acc:var(--brand)}
.plat-fragc::before{content:"";position:absolute;top:0;left:16px;width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--acc)}
.plat-fragc--sales{--acc:#0033CC}
.plat-fragc--operations{--acc:#6B4FD6}
.plat-fragc--finance{--acc:#1F9E74}
.plat-fragc--support{--acc:#E0812F}
.plat-fragc__ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border-radius:8px;background:var(--brand-tint);color:var(--acc)}
.plat-fragc__ic svg{width:18px;height:18px}
.plat-fragc__name{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.plat-fragc__knows{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.plat-fragc__field{margin-top:auto;font-size:10.5px;letter-spacing:.04em;color:var(--ink-faint)}

.plat-conv__wires{width:100%;height:clamp(56px,7vw,92px);display:block}
.plat-conv__lines path{fill:none;stroke:var(--brand);stroke-width:1.6;opacity:.55;
  stroke-linecap:round;stroke-linejoin:round}
.plat-conv.is-armed .plat-conv__lines path{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}
.plat-conv.is-in .plat-conv__lines path{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease-out) .35s}
.plat-conv__join{display:flex;align-items:center;justify-content:center;gap:12px;margin:-7px 0 12px;
  font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--brand)}
.plat-conv__join span{width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--brand))}
.plat-conv__join span:last-child{transform:scaleX(-1)}

.plat-conv__one{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;
  background:var(--surface-card);border:1px solid rgba(0,51,204,.4);
  box-shadow:0 18px 40px -24px rgba(0,51,204,.4)}
.plat-conv__one-mark{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border-radius:10px;background:var(--brand-tint)}
.plat-conv__one-mark img{width:26px;height:26px;object-fit:contain}
.plat-conv__one-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.plat-conv__one-name{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.plat-conv__one-sub{font-size:11px;letter-spacing:.04em;color:var(--ink-dim)}
.plat-conv__one-pill{margin-left:auto;flex:none;padding:6px 11px;border-radius:999px;background:var(--brand);color:#fff;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.plat-conv.is-armed .plat-fragc{opacity:0;transform:translateY(14px)}
.plat-conv.is-in .plat-fragc{opacity:1;transform:none;
  transition:opacity .55s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i) * .09s)}
.plat-conv.is-armed .plat-conv__one{opacity:0;transform:translateY(12px)}
.plat-conv.is-in .plat-conv__one{opacity:1;transform:none;
  transition:opacity .6s var(--ease-out) .95s,transform .6s var(--ease-out) .95s}

/* ---------- S03 · One data language (travelling context) ---------------- */
.plat-flow__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,4vw,64px);
  align-items:end;margin-bottom:clamp(20px,3vw,40px)}
.plat-flow__title{max-width:18ch}
.plat-flow__intro{font-size:clamp(15px,1.05vw,16.5px);line-height:1.65;color:var(--ink-body);max-width:48ch}

.plat-flow__track{position:relative;padding:clamp(84px,10vw,116px) clamp(92px,9vw,126px) clamp(52px,6vw,72px)}
.plat-flow__rail{position:relative;height:14px;margin:0 auto;width:100%}
.plat-flow__line{position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);
  background:var(--line-strong)}
/* Resting state = the record has arrived with full context. JS adds
   .is-armed to reset it and hand control to the scrubbed --flow-p, so the
   diagram is never blank when JavaScript is unavailable. */
.plat-flow__fill{position:absolute;left:4%;top:50%;height:2px;transform:translateY(-50%);
  width:92%;background:linear-gradient(90deg,var(--brand),var(--cyan));transition:width .12s linear}
.plat-flow__station{position:absolute;left:var(--x);top:50%;transform:translate(-50%,-50%);z-index:2}
.plat-flow__dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--brand);
  border:2px solid var(--brand);transition:border-color .3s var(--ease-out),background .3s var(--ease-out),transform .3s var(--ease-out)}
.plat-flow__station:last-child .plat-flow__dot{background:var(--cyan);border-color:var(--cyan)}
.plat-flow__name{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
  transition:color .3s var(--ease-out)}
.plat-flow__object{position:absolute;left:96%;top:50%;transform:translate(-50%,-100%);z-index:4;
  transition:left .12s linear}
.plat-flow__stem{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:1px;height:24px;
  background:var(--line-strong)}
.plat-flow__card{display:block;width:220px;padding:11px 13px;border-radius:10px;background:var(--surface-card);
  border:1px solid var(--line);box-shadow:0 16px 34px -20px rgba(10,15,28,.42)}
.plat-flow__card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plat-flow__card-id{display:block;font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.plat-flow__carry-label{font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);white-space:nowrap}
.plat-flow__card-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.plat-flow__gchip{padding:3px 6px;border-radius:5px;background:var(--brand-tint);color:var(--brand);
  font-size:9.5px;letter-spacing:.02em;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}

/* Armed (JS present): drive the rail from scroll progress. */
.plat-flow__track.is-armed .plat-flow__fill{width:calc(var(--flow-p,0) * 92%)}
.plat-flow__track.is-armed .plat-flow__object{left:calc(4% + var(--flow-p,0) * 92%)}
.plat-flow__track.is-armed .plat-flow__dot{background:var(--surface-card);border-color:var(--line-strong)}
.plat-flow__track.is-armed .plat-flow__name{color:var(--ink-dim)}
.plat-flow__track.is-armed .plat-flow__gchip{opacity:0;transform:translateY(3px)}
.plat-flow__track.is-armed .plat-flow__station.is-on .plat-flow__dot{border-color:var(--brand);background:var(--brand);transform:scale(1.12)}
.plat-flow__track.is-armed .plat-flow__station:last-child.is-on .plat-flow__dot{border-color:var(--cyan);background:var(--cyan)}
.plat-flow__track.is-armed .plat-flow__station.is-on .plat-flow__name{color:var(--ink)}
.plat-flow__track.is-armed .plat-flow__gchip.is-on{opacity:1;transform:none}
.plat-flow__mobile{display:none}
.plat-flow__caption{margin:clamp(24px,3vw,40px) 0 0;font-size:11.5px;line-height:1.6;letter-spacing:.02em;
  color:var(--ink-faint);max-width:62ch}

/* ---------- S04 · Built on connection (dark) ---------------------------- */
.plat-build{overflow:hidden}
.plat-build__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:74px 74px;
  -webkit-mask-image:radial-gradient(120% 90% at 80% 0%,#000 8%,transparent 70%);
  mask-image:radial-gradient(120% 90% at 80% 0%,#000 8%,transparent 70%)}
.plat-build .container{position:relative}
.plat-build__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,4vw,64px);
  align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.plat-build__title{max-width:17ch;color:var(--dark-ink)}
.plat-build__intro{max-width:48ch}
.plat-build__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,60px);align-items:stretch}

.plat-ops{position:relative;margin:0;padding:18px;border-radius:16px;overflow:hidden;
  background:linear-gradient(145deg,rgba(20,30,52,.94),rgba(8,13,25,.98));border:1px solid var(--dark-line);
  box-shadow:0 28px 64px -40px rgba(0,0,0,.8)}
.plat-ops::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:38px 38px;mask-image:linear-gradient(180deg,#000,transparent 88%)}
.plat-ops__caption{position:relative;z-index:1;display:flex;align-items:center;gap:8px;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dark-body)}
.plat-ops__caption-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px rgba(55,189,209,.8)}
.plat-ops__frame{position:relative;z-index:1;display:grid;gap:8px;margin-top:18px}
.plat-ops__sources{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:3px}
.plat-ops__sources span{position:relative;padding:8px;text-align:center;font-size:10px;color:var(--dark-body);
  border:1px solid var(--dark-line-soft);border-radius:7px;background:rgba(255,255,255,.025)}
.plat-ops__sources span::after{content:"";position:absolute;left:50%;top:100%;height:12px;width:1px;background:rgba(55,189,209,.4)}
.plat-ops__layer{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;
  min-height:54px;padding:10px 12px;border:1px solid var(--dark-line-soft);border-radius:8px;background:rgba(255,255,255,.035);
  transition:border-color .4s var(--ease-out),background .4s var(--ease-out),transform .55s var(--ease-out),opacity .5s var(--ease-out)}
.plat-ops__layer::after{content:"";position:absolute;left:25px;top:100%;width:1px;height:9px;background:var(--dark-line);z-index:2}
.plat-ops__layer:last-of-type::after{display:none}
.plat-ops__index{font-size:9px;color:var(--cyan)}
.plat-ops__name{font-size:11.5px;color:var(--dark-ink);line-height:1.3}
.plat-ops__status{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-dim)}
.plat-ops__flow{display:flex;align-items:center;gap:6px;min-width:0}
.plat-ops__flow i{font-style:normal;font-size:9px;color:var(--dark-body)}
.plat-ops__flow b{height:1px;min-width:12px;flex:1;background:linear-gradient(90deg,var(--brand),var(--cyan))}
.plat-ops__signal{display:flex;align-items:flex-end;gap:4px;height:20px}
.plat-ops__signal i{display:block;width:10px;height:var(--h,8px);background:rgba(55,189,209,.46);border-radius:2px 2px 0 0}
.plat-ops__signal i:nth-child(2){--h:13px}.plat-ops__signal i:nth-child(3){--h:10px}
.plat-ops__signal i:nth-child(4){--h:17px}.plat-ops__signal i:nth-child(5){--h:14px}.plat-ops__signal i:nth-child(6){--h:19px}
.plat-ops__foundation{display:flex;align-items:center;gap:10px;margin-top:4px;padding:12px 13px;border-radius:8px;
  background:linear-gradient(90deg,rgba(0,51,204,.34),rgba(55,189,209,.12));border:1px solid rgba(55,189,209,.3)}
.plat-ops__foundation img{width:22px;height:22px;filter:brightness(0) invert(1);opacity:.94}
.plat-ops__foundation span{font-size:11.5px;font-weight:600;color:#fff}
.plat-ops__foundation small{margin-left:auto;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-body)}
.plat-ops.is-armed .plat-ops__layer{opacity:.34;transform:translateY(5px)}
.plat-ops.is-armed .plat-ops__layer.is-on{opacity:1;transform:none;border-color:rgba(55,189,209,.34);background:rgba(55,189,209,.055)}
.plat-ops.is-armed .plat-ops__layer.is-on .plat-ops__status{color:var(--cyan)}

.plat-ladder{position:relative;list-style:none;margin:0;padding:0}
.plat-ladder__spine{position:absolute;left:11px;top:8px;bottom:8px;width:2px;overflow:hidden;
  background:var(--dark-line)}
.plat-ladder__draw{display:block;width:100%;height:calc(var(--build-draw,0) * 100%);
  background:linear-gradient(180deg,var(--cyan),var(--brand));transition:height .12s linear}
.plat-ladder__step{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);
  column-gap:clamp(14px,1.6vw,20px);align-items:start;padding:clamp(11px,1.4vw,17px) 0}
.plat-ladder__step:not(:last-child){border-bottom:1px solid var(--dark-line-soft)}
.plat-ladder__node{grid-column:1;grid-row:1 / span 3;justify-self:center;margin-top:6px;
  width:13px;height:13px;border-radius:50%;background:var(--dark-2);border:2px solid var(--dark-line);z-index:2;
  transition:border-color .35s var(--ease-out),background .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.plat-ladder__num{grid-column:2;grid-row:1;font-size:10px;letter-spacing:.16em;color:var(--cyan)}
.plat-ladder__name{grid-column:2;grid-row:2;margin-top:2px;font-size:clamp(17px,1.5vw,21px);font-weight:600;
  color:var(--dark-ink);letter-spacing:-.02em;line-height:1.15}
.plat-ladder__copy{grid-column:2;grid-row:3;margin-top:5px;font-size:14px;line-height:1.55;color:var(--dark-body);max-width:44ch}
.plat-build__note{margin:clamp(40px,5vw,60px) 0 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-dim)}

.plat-ladder.is-armed .plat-ladder__step{opacity:0;transform:translateY(16px)}
.plat-ladder.is-armed .plat-ladder__step.is-shown{opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .65s var(--ease-out)}
.plat-ladder__step.is-shown .plat-ladder__node{border-color:var(--cyan);background:var(--cyan);
  box-shadow:0 0 0 4px rgba(55,189,209,.14)}

/* ---------- S05 · Compact CTA ------------------------------------------- */
.plat-cta{overflow:hidden;background:var(--surface-cool);padding:clamp(64px,8vw,104px) 0 clamp(56px,6vw,84px)}
.plat-cta__inner{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.plat-cta__title{max-width:18ch}
.plat-cta__copy{margin-top:16px;font-size:clamp(15px,1.1vw,16.5px);line-height:1.62;color:var(--ink-body);max-width:46ch}
.plat-cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start}
.plat-cta__plates{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:clamp(48px,6vw,84px)}
.plat-cta__plate{display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(0,51,204,.3),transparent)}
.plat-cta__plate:nth-child(1){width:min(760px,64%)}
.plat-cta__plate:nth-child(2){width:min(520px,44%);opacity:.62}
.plat-cta__plate:nth-child(3){width:min(300px,26%);opacity:.36}

/* ==========================================================================
   PLATFORM — responsive
   ========================================================================== */
@media (max-width:1280px){
  .plat-hero{padding-top:calc(var(--header-h) + 40px)}
  .plat-hero__grid{grid-template-columns:1fr;gap:clamp(34px,5vw,52px)}
  .plat-hero__headline{max-width:22ch}
  .plat-hero__copy{max-width:60ch}
  .plat-stage{aspect-ratio:16/11;max-width:760px}
}
@media (max-width:1080px){
  .plat-frag__head,.plat-flow__head,.plat-build__head{grid-template-columns:1fr;gap:20px;align-items:start}
  .plat-frag__title,.plat-build__title{max-width:24ch}
  .plat-build__body{grid-template-columns:1fr;gap:clamp(26px,4vw,38px)}
  .plat-ops{max-width:720px}
}
@media (max-width:860px){
  /* travelling rail → vertical accumulation trace */
  .plat-flow__track{display:none}
  .plat-flow__mobile{display:grid;gap:0;list-style:none;margin:clamp(24px,4vw,36px) 0 0;padding:0;position:relative}
  .plat-flow__mobile::before{content:"";position:absolute;left:5px;top:16px;bottom:16px;width:1px;
    background:linear-gradient(180deg,var(--brand),var(--cyan))}
  .plat-flow__mstep{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
    gap:14px;padding:14px 0 14px 26px;border-bottom:1px solid var(--line-soft)}
  .plat-flow__mstep:last-child{border-bottom:0}
  .plat-flow__mstep::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:11px;height:11px;border-radius:50%;background:var(--surface-card);border:2px solid var(--brand)}
  .plat-flow__mstep:last-child::before{border-color:var(--cyan)}
  .plat-flow__mname{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
    grid-column:1;width:72px}
  .plat-flow__mcarry{grid-column:2;font-size:13.5px;color:var(--ink);letter-spacing:-.01em}
  /* fragments → 2×2, with an explicit convergence bridge. */
  .plat-conv__frags{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plat-conv__wires{display:none}
  .plat-conv__join{margin:20px 0 12px}
  .plat-conv__legend{grid-template-columns:1fr auto}.plat-conv__legend span:nth-child(2){display:none}
  .plat-conv__legend span:last-child{text-align:right}
}
@media (max-width:640px){
  .plat-hero__actions{flex-direction:column;align-items:stretch}
  .plat-hero__actions .btn{width:100%}
  .plat-hero__note{font-size:10px;letter-spacing:.12em}
  .plat-stage{aspect-ratio:auto;min-height:590px}
  .plat-stage__map{top:54px;bottom:108px}
  .plat-stage__wires{display:none}
  .plat-node{width:46%;min-height:58px}
  .plat-node--tl{left:0;top:0}.plat-node--tr{right:0;top:0}
  .plat-node--ml{left:0;top:22%}.plat-node--mr{right:0;top:22%}
  .plat-node--bc{left:27%;bottom:0}
  .plat-context{top:58%}
  .plat-found__role{font-size:8px;letter-spacing:.09em}
  .plat-flow__mname{width:auto;grid-column:1;grid-row:1}
  .plat-flow__mcarry{grid-column:1;grid-row:2;margin-top:2px}
  .plat-flow__mstep{grid-template-columns:1fr;gap:4px}
  .plat-cta__inner{grid-template-columns:1fr;gap:22px}
  .plat-cta__actions{flex-direction:column;align-items:stretch}
  .plat-cta__actions .btn{width:100%}
}
@media (max-width:460px){
  .plat-conv__frags{grid-template-columns:1fr}
  .plat-fragc{flex-direction:row;align-items:center;gap:12px}
  .plat-fragc::before{display:none}
  .plat-fragc__field{margin:0 0 0 auto}
  .plat-conv{padding:14px}
  .plat-conv__one{align-items:flex-start;flex-wrap:wrap}
  .plat-conv__one-body{width:calc(100% - 54px)}
  .plat-conv__one-sub{white-space:normal;line-height:1.5}
  .plat-conv__one-pill{margin-left:52px}
  .plat-stage{min-height:620px}
  .plat-stage__label{right:92px;line-height:1.35}
  .plat-node{width:100%;min-height:50px}
  .plat-node--tl{left:0;top:0}.plat-node--tr{right:auto;left:0;top:14%}
  .plat-node--ml{left:0;top:28%}.plat-node--mr{right:auto;left:0;top:42%}
  .plat-node--bc{left:0;bottom:0}
  .plat-context{top:69%;width:92px;height:92px}
  .plat-ops{padding:14px}
  .plat-ops__layer{grid-template-columns:24px minmax(0,1fr);gap:7px}
  .plat-ops__status{grid-column:2}
  .plat-ops__foundation small{display:none}
}

/* ---------- Platform · reduced motion ----------------------------------- */
@media (prefers-reduced-motion:reduce){
  .plat-hero__lede [data-seq],
  .plat-stage .plat-node,
  .plat-conv__frags .plat-fragc,.plat-conv__one,
  .plat-ladder__step{opacity:1!important;transform:none!important}
  .plat-stage .plat-context{opacity:1!important;transform:translate(-50%,-50%)!important}
  .plat-found__edge{opacity:.9!important;transform:none!important}
  .plat-found__pulse{display:none}
  .plat-conv__lines path{stroke-dashoffset:0!important;stroke-dasharray:none!important}
  .plat-flow__fill{width:92%!important}
  .plat-flow__station .plat-flow__dot{border-color:var(--brand)!important;background:var(--brand)!important}
  .plat-flow__gchip{opacity:1!important;transform:none!important}
  .plat-ladder__draw{height:100%!important}
  .plat-ladder__step .plat-ladder__node{border-color:var(--cyan)!important;background:var(--cyan)!important}
  .plat-stage__signals{display:none}
  .plat-ops__layer{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   AI & AUTOMATION (/ai-automation/)
   --------------------------------------------------------------------------
   Four major sections + a compact CTA, in the same design system as Home,
   Solutions and Platform but with its own visual language built on movement,
   decision, branching, state, review and execution: a routing panel (S01), a
   two-path comparison resting on one human-judgment bar (S02), a workflow rail
   with an exception that leaves the line and rejoins it (S03 — the signature),
   and a rising data→growth progression (S04). Every selector below is absent
   from index.php, solutions/index.php and platform/index.php, so none of those
   pages is touched.
   ========================================================================== */

/* ---------- S01 · Hero -------------------------------------------------- */
.aia-hero{position:relative;overflow:hidden;background:var(--bg);
  padding:calc(var(--header-h) + 48px) 0 clamp(64px,8vw,112px)}
.aia-hero__grid-texture{position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(10,15,28,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,15,28,.09) 1px,transparent 1px);background-size:52px 52px;
  -webkit-mask-image:radial-gradient(110% 80% at 78% 34%,#000 0%,transparent 68%);
  mask-image:radial-gradient(110% 80% at 78% 34%,#000 0%,transparent 68%)}
.aia-hero__glow{position:absolute;width:680px;height:680px;top:-20%;right:-10%;border-radius:50%;
  filter:blur(120px);pointer-events:none;opacity:.5;background:rgba(0,51,204,.09)}
.aia-hero__inner{position:relative}
.aia-hero__grid{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  gap:clamp(30px,3.6vw,60px);align-items:center}
.aia-hero__headline{font-size:clamp(33px,4.3vw,60px);line-height:1.03;letter-spacing:-.035em;
  color:var(--ink);font-weight:700;max-width:15ch}
.aia-hero__copy{max-width:44ch;margin-top:24px}
.aia-hero__copy p{font-size:clamp(15.5px,1.1vw,17px);line-height:1.62;color:var(--ink-body)}
.aia-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3vw,36px)}
.aia-hero__note{margin:clamp(28px,3vw,40px) 0 0;padding-top:22px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim)}

/* Hero stage: IMAGE SLOT A (4:5) beside the routing panel, one artifact. */
.aia-stage{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);
  gap:clamp(10px,1.2vw,16px);margin:0;align-items:stretch}
.aia-stage__media{position:relative;border-radius:16px;overflow:hidden;isolation:isolate;
  aspect-ratio:4/5;background:var(--dark);border:1px solid var(--line);
  box-shadow:0 30px 70px -38px rgba(10,15,28,.5)}
.aia-stage__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  will-change:transform}
.aia-stage__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,15,28,.34) 0%,rgba(10,15,28,.12) 42%,rgba(10,15,28,.52) 100%)}
.aia-stage__label{position:absolute;top:14px;left:14px;right:14px;z-index:3;display:flex;align-items:center;gap:8px;
  margin:0;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.aia-stage__dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none;
  box-shadow:0 0 10px rgba(55,189,209,.9)}
.aia-stage__frame{position:absolute;left:14px;right:14px;bottom:13px;z-index:3;margin:0;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* The router: request → classify → rule | AI assistance → human → action. */
.aia-router{--fgap:10px;position:relative;display:flex;flex-direction:column;
  padding:clamp(14px,1.5vw,18px);border-radius:16px;background:var(--surface-card);
  border:1px solid var(--line);box-shadow:0 26px 62px -40px rgba(10,15,28,.42)}
.aia-router__cap{margin:0 0 10px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim)}
.aia-rt__row{display:flex;justify-content:center;flex:none}
.aia-rt__row--pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--fgap)}
.aia-node{display:flex;flex-direction:column;gap:1px;min-width:0;width:100%;max-width:190px;
  padding:8px 11px;border-radius:9px;background:var(--bg);border:1px solid var(--line);
  --acc:var(--ink-dim)}
.aia-rt__row--pair .aia-node{max-width:none}
.aia-node__k{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);line-height:1.5}
.aia-node__n{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.012em;line-height:1.25}
.aia-node--classify{--acc:var(--brand)}
.aia-node--rule{--acc:var(--brand);border-color:rgba(0,51,204,.34);background:var(--brand-tint)}
.aia-node--ai{--acc:#17788A;border-color:rgba(55,189,209,.46);background:rgba(55,189,209,.11)}
.aia-node--human{--acc:var(--cyan);border-color:rgba(60,110,255,.32);
  background:linear-gradient(180deg,#0E1424,#0A0F1C);box-shadow:0 12px 26px -18px rgba(10,15,28,.6)}
.aia-node--human .aia-node__n{color:#fff}
.aia-node--action{--acc:var(--brand);border-color:rgba(0,51,204,.3)}

/* Connectors. --fgap keeps the fork legs on the pair columns' true centres:
   a 2-col grid puts them at 25% ∓ gap/4 from each edge. */
.aia-rt__link,.aia-rt__fork,.aia-rt__join{position:relative;display:block;flex:1 1 auto;min-height:18px}
.aia-rt__fork,.aia-rt__join{min-height:24px}
.aia-rt__link::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--line-strong)}
.aia-rt__stem,.aia-rt__leg,.aia-rt__bar{position:absolute;background:var(--line-strong);display:block}
.aia-rt__stem{left:50%;width:1px}
.aia-rt__leg{width:1px}
.aia-rt__bar{height:1px;left:calc(25% - var(--fgap) / 4);right:calc(25% - var(--fgap) / 4);top:50%}
.aia-rt__leg--l{left:calc(25% - var(--fgap) / 4)}
.aia-rt__leg--r{right:calc(25% - var(--fgap) / 4)}
.aia-rt__fork .aia-rt__stem{top:0;height:50%}
.aia-rt__fork .aia-rt__leg{top:50%;height:50%}
.aia-rt__join .aia-rt__leg{top:0;height:50%}
.aia-rt__join .aia-rt__stem{top:50%;height:50%}
.aia-rt__pulse{position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 9px 1px rgba(0,51,204,.55);opacity:0}
.aia-stage.is-live .aia-rt__pulse{animation:aia-travel 2.9s var(--ease-io) infinite;animation-delay:var(--d,0s)}
@keyframes aia-travel{0%{top:0;opacity:0}14%{opacity:1}86%{opacity:1}100%{top:100%;opacity:0}}

/* Hero entrance (armed by JS; no-JS shows the finished state). */
.aia-hero__lede.is-armed [data-seq]{opacity:0;transform:translateY(14px)}
.aia-hero__lede.is-in [data-seq]{opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.aia-hero__lede.is-in [data-seq="1"]{transition-delay:.05s}
.aia-hero__lede.is-in [data-seq="2"]{transition-delay:.14s}
.aia-hero__lede.is-in [data-seq="3"]{transition-delay:.30s}
.aia-hero__lede.is-in [data-seq="4"]{transition-delay:.42s}
.aia-hero__lede.is-in [data-seq="5"]{transition-delay:.52s}
.aia-stage.is-armed .aia-node{opacity:0;transform:translateY(8px)}
.aia-stage.is-armed .aia-rt__link::before,.aia-stage.is-armed .aia-rt__stem,
.aia-stage.is-armed .aia-rt__leg,.aia-stage.is-armed .aia-rt__bar{opacity:0}
.aia-stage.is-in .aia-node{opacity:1;transform:none;
  transition:opacity .5s var(--ease-out),transform .55s var(--ease-out);
  transition-delay:calc(.28s + var(--i) * .1s)}
.aia-stage.is-in .aia-rt__link::before,.aia-stage.is-in .aia-rt__stem,
.aia-stage.is-in .aia-rt__leg,.aia-stage.is-in .aia-rt__bar{opacity:1;
  transition:opacity .55s var(--ease-out) .6s}

/* ---------- S02 · Rules are not AI -------------------------------------- */
.aia-split__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,4vw,64px);
  align-items:end;margin-bottom:clamp(38px,4.5vw,58px)}
.aia-split__title{max-width:17ch}
.aia-split__intro{font-size:clamp(15px,1.05vw,16.5px);line-height:1.65;color:var(--ink-body);max-width:48ch}
.aia-split__body{--fgap:clamp(16px,2.4vw,30px)}
.aia-split__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--fgap)}
.aia-side{position:relative;margin:0;padding:clamp(20px,2.3vw,30px);border-radius:14px;
  background:var(--surface-card);border:1px solid var(--line);
  box-shadow:0 16px 38px -28px rgba(10,15,28,.32);--acc:var(--brand)}
.aia-side::before{content:"";position:absolute;top:0;left:clamp(20px,2.3vw,30px);width:28px;height:3px;
  border-radius:0 0 3px 3px;background:var(--acc)}
.aia-side--ai{--acc:#17788A}
.aia-side__kind{margin:0;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.aia-side__def{margin:12px 0 0;font-size:clamp(19px,1.75vw,25px);font-weight:600;color:var(--ink);
  letter-spacing:-.022em;line-height:1.2}
.aia-side__char{margin:9px 0 0;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint)}
.aia-side__ex{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(18px,2vw,24px) 0 0;padding:0;list-style:none}
.aia-ex{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);
  font-size:12.5px;color:var(--ink);white-space:nowrap}

/* Both paths descend into the same constant. */
.aia-split__down{position:relative;display:block;height:clamp(46px,5vw,70px)}
.aia-split__down i{position:absolute;background:var(--line-strong);display:block}
.aia-split__leg{width:1px;top:0;height:52%}
.aia-split__leg--l{left:calc(25% - var(--fgap) / 4)}
.aia-split__leg--r{right:calc(25% - var(--fgap) / 4)}
.aia-split__bar{height:1px;top:52%;left:calc(25% - var(--fgap) / 4);right:calc(25% - var(--fgap) / 4)}
.aia-split__stem{width:1px;left:50%;top:52%;height:48%}

.aia-human{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(14px,2vw,28px);padding:clamp(18px,2vw,26px) clamp(20px,2.3vw,30px);border-radius:14px;
  color:var(--dark-ink);background:linear-gradient(180deg,#0E1424,#0A0F1C);
  border:1px solid rgba(60,110,255,.3);box-shadow:0 22px 48px -30px rgba(10,15,28,.6)}
.aia-human__kind{margin:0;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);
  white-space:nowrap}
.aia-human__line{margin:0;font-size:clamp(16px,1.35vw,20px);font-weight:600;color:#fff;letter-spacing:-.018em}
.aia-human__roles{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;justify-content:flex-end}
.aia-role{padding:6px 11px;border-radius:999px;border:1px solid var(--dark-line);
  font-size:11.5px;color:var(--dark-body);white-space:nowrap}
.aia-split__note{margin:clamp(28px,3.4vw,44px) 0 0;font-size:11.5px;line-height:1.6;letter-spacing:.02em;
  color:var(--ink-faint);max-width:62ch}

/* Entrance: sides settle, examples stagger, the legs draw, the bar lands. */
.aia-split__body.is-armed .aia-side{opacity:0;transform:translateY(16px)}
.aia-split__body.is-armed .aia-ex{opacity:0;transform:translateY(6px)}
.aia-split__body.is-armed .aia-split__down i{opacity:0}
.aia-split__body.is-armed .aia-human{opacity:0;transform:translateY(14px)}
.aia-split__body.is-in .aia-side{opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .65s var(--ease-out);
  transition-delay:calc(var(--s) * .12s)}
.aia-split__body.is-in .aia-ex{opacity:1;transform:none;
  transition:opacity .42s var(--ease-out),transform .45s var(--ease-out);
  transition-delay:calc(.34s + var(--s) * .1s + var(--i) * .055s)}
.aia-split__body.is-in .aia-split__down i{opacity:1;transition:opacity .5s var(--ease-out) .85s}
.aia-split__body.is-in .aia-human{opacity:1;transform:none;
  transition:opacity .6s var(--ease-out) 1.05s,transform .65s var(--ease-out) 1.05s}

/* ---------- S03 · A better workflow (signature) ------------------------- */
.aia-work__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,4vw,64px);
  align-items:end;margin-bottom:clamp(20px,3vw,40px)}
.aia-work__title{max-width:18ch}
.aia-work__intro{font-size:clamp(15px,1.05vw,16.5px);line-height:1.65;color:var(--ink-body);max-width:48ch}

.aia-track{--bh:clamp(122px,13vw,162px);position:relative;padding:clamp(26px,3vw,40px) 0 clamp(84px,9vw,116px)}
.aia-track__rail{position:relative;height:14px;margin-top:var(--bh);width:100%}
.aia-track__line{position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);
  background:var(--line-strong)}
/* Resting state = the workflow has run and the branch is drawn. JS adds
   .is-armed to reset it and hand control to --wf-p, so the diagram is never
   blank when JavaScript is unavailable. */
.aia-track__fill{position:absolute;left:4%;top:50%;height:2px;transform:translateY(-50%);
  width:92%;background:linear-gradient(90deg,var(--brand),var(--cyan));transition:width .12s linear}
.aia-track__station{position:absolute;left:var(--x);top:50%;width:0;height:0;z-index:2}
.aia-track__dot{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:14px;height:14px;
  border-radius:50%;background:var(--brand);border:2px solid var(--brand);
  transition:border-color .3s var(--ease-out),background .3s var(--ease-out),transform .3s var(--ease-out)}
.aia-track__station:last-of-type .aia-track__dot{background:var(--cyan);border-color:var(--cyan)}
.aia-track__name{position:absolute;left:0;top:20px;transform:translateX(-50%);white-space:nowrap;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  transition:color .3s var(--ease-out)}
/* Fixed two-line box: the longest micro wraps, and reserving that space keeps
   every `by` pill on one baseline instead of colliding with the wrap. */
.aia-track__micro{position:absolute;left:0;top:40px;transform:translateX(-50%);width:clamp(96px,9vw,124px);
  min-height:2.9em;text-align:center;font-size:12px;line-height:1.42;color:var(--ink-dim)}
.aia-track__by{position:absolute;left:0;top:86px;transform:translateX(-50%);white-space:nowrap;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--bg);
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.aia-track__token{position:absolute;left:96%;top:50%;transform:translate(-50%,-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:6px;transition:left .12s linear}
.aia-track__token-dot{order:2;width:9px;height:9px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px rgba(0,51,204,.14),0 0 12px 2px rgba(0,51,204,.45)}
.aia-track__token-lb{order:1;position:absolute;bottom:calc(100% - 2px);padding:4px 10px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:9px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}

/* Exception detour, above the line: it leaves after Approval, is reviewed by
   a person, and rejoins before Assignment. */
.aia-track__branch{position:absolute;top:clamp(26px,3vw,40px);left:0;right:0;height:var(--bh)}
.aia-track__branch-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.aia-track__branch-path{fill:none;stroke:#E0812F;stroke-width:1.3;stroke-linecap:round;
  stroke-dasharray:var(--len,400);stroke-dashoffset:calc(var(--len,400) * (1 - var(--branch-p,1)))}
.aia-track__review{position:absolute;left:31.6%;bottom:66.7%;transform:translate(-50%,50%);z-index:3;
  display:flex;flex-direction:column;gap:2px;width:clamp(150px,15vw,186px);padding:11px 14px;
  border-radius:11px;background:var(--surface-card);border:1px solid rgba(224,129,47,.5);
  box-shadow:0 16px 34px -22px rgba(10,15,28,.4)}
.aia-track__review-k{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#B8621B}
.aia-track__review-n{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.015em;line-height:1.2}
.aia-track__review-m{font-size:11.5px;line-height:1.4;color:var(--ink-dim)}

.aia-track.is-armed .aia-track__fill{width:calc(var(--wf-p,0) * 92%)}
.aia-track.is-armed .aia-track__token{left:calc(4% + var(--wf-p,0) * 92%)}
.aia-track.is-armed .aia-track__dot{background:var(--surface-card);border-color:var(--line-strong)}
.aia-track.is-armed .aia-track__name{color:var(--ink-dim)}
.aia-track.is-armed .aia-track__station.is-on .aia-track__dot{background:var(--brand);border-color:var(--brand);
  transform:translate(-50%,-50%) scale(1.12)}
.aia-track.is-armed .aia-track__station:last-of-type.is-on .aia-track__dot{background:var(--cyan);border-color:var(--cyan)}
.aia-track.is-armed .aia-track__station.is-on .aia-track__name{color:var(--ink)}
.aia-track.is-armed .aia-track__review{opacity:0;transform:translate(-50%,calc(50% + 10px))}
.aia-track.is-armed .aia-track__review.is-on{opacity:1;transform:translate(-50%,50%);
  transition:opacity .5s var(--ease-out),transform .55s var(--ease-out)}

.aia-work__mobile{display:none}
.aia-work__note{margin:clamp(22px,3vw,36px) 0 0;font-size:11.5px;line-height:1.6;letter-spacing:.02em;
  color:var(--ink-faint);max-width:64ch}

/* ---------- IMAGE SLOT B · full-bleed human band ------------------------ */
.aia-band{position:relative;margin:0;overflow:hidden;background:var(--dark);
  aspect-ratio:16/10;max-height:min(58vh,520px)}
.aia-band img{width:100%;height:100%;object-fit:cover}
.aia-band__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,15,28,.28) 0%,rgba(10,15,28,.05) 40%,rgba(10,15,28,.7) 100%)}
.aia-band__cap{position:absolute;left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);
  bottom:clamp(18px,2.4vw,30px);z-index:2;display:flex;align-items:center;gap:9px;margin:0;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.94)}
.aia-band__dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none;
  box-shadow:0 0 10px rgba(55,189,209,.9)}

/* ---------- S04 · From data to action (dark) ---------------------------- */
.aia-chain{overflow:hidden}
.aia-chain__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:74px 74px;
  -webkit-mask-image:radial-gradient(110% 90% at 18% 100%,#000 6%,transparent 68%);
  mask-image:radial-gradient(110% 90% at 18% 100%,#000 6%,transparent 68%)}
.aia-chain .container{position:relative}
.aia-chain__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,4vw,64px);
  align-items:end;margin-bottom:clamp(30px,4vw,50px)}
.aia-chain__title{max-width:19ch;color:var(--dark-ink)}
.aia-chain__intro{max-width:50ch}

.aia-chain__stage{position:relative;width:100%;aspect-ratio:1000/340;min-height:290px;
  margin:clamp(34px,4.5vw,62px) 0 clamp(14px,2vw,26px)}
.aia-chain__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.aia-chain__ramp{fill:none;stroke:url(#aiaRamp);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:calc(var(--len,1200) * (1 - var(--ramp-p,1)))}
.aia-chain__state{position:absolute;left:var(--x);bottom:var(--y);width:0;height:0}
.aia-chain__dot{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:13px;height:13px;
  border-radius:50%;background:var(--dark-2);border:2px solid var(--dark-line);z-index:2;
  transition:border-color .35s var(--ease-out),background .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.aia-chain__name{position:absolute;left:0;bottom:17px;transform:translateX(-50%);white-space:nowrap;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dark-dim);
  transition:color .35s var(--ease-out)}
.aia-chain__copy{position:absolute;left:0;top:17px;transform:translateX(-50%);
  width:clamp(112px,11.5vw,150px);text-align:center;font-size:12.5px;line-height:1.45;color:var(--dark-body)}
.aia-chain__state.is-on .aia-chain__dot{background:var(--cyan);border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(55,189,209,.14)}
.aia-chain__state.is-on .aia-chain__name{color:var(--dark-ink)}
.aia-chain__list{display:none}

.aia-chain__foot{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,32px);align-items:center;
  justify-content:space-between;margin-top:clamp(34px,4.5vw,60px);padding-top:26px;
  border-top:1px solid var(--dark-line)}
.aia-chain__note{margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-dim);
  max-width:52ch}
.aia-chain__links{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,30px)}
.aia-chain__link{display:inline-flex;align-items:center;gap:10px;color:var(--dark-ink);font-size:14px;
  font-weight:600;border-bottom:1px solid var(--dark-line);padding-bottom:6px;
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out)}
.aia-chain__link:hover{color:var(--cyan);border-color:var(--cyan)}
.aia-chain__link span{font-family:var(--mono);font-size:12px}

/* ---------- S05 · Compact CTA ------------------------------------------- */
.aia-cta{overflow:hidden;background:var(--surface-cool);padding:clamp(64px,8vw,104px) 0 clamp(56px,6vw,84px)}
.aia-cta__inner{position:relative;display:grid;justify-items:center;text-align:center;gap:clamp(24px,3vw,34px)}
.aia-cta__title{max-width:21ch}
.aia-cta__copy{margin:16px auto 0;font-size:clamp(15px,1.1vw,16.5px);line-height:1.62;color:var(--ink-body);
  max-width:54ch}
.aia-cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.aia-cta__plates{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:clamp(48px,6vw,84px)}
.aia-cta__plate{display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(0,51,204,.3),transparent)}
.aia-cta__plate:nth-child(1){width:min(760px,64%)}
.aia-cta__plate:nth-child(2){width:min(520px,44%);opacity:.62}
.aia-cta__plate:nth-child(3){width:min(300px,26%);opacity:.36}

/* ==========================================================================
   AI & AUTOMATION — responsive
   ========================================================================== */
@media (max-width:1280px){
  .aia-hero{padding-top:calc(var(--header-h) + 40px)}
  .aia-hero__grid{grid-template-columns:1fr;gap:clamp(34px,5vw,52px)}
  .aia-hero__headline{max-width:22ch}
  .aia-hero__copy{max-width:60ch}
  .aia-stage{max-width:660px}
}
@media (max-width:1080px){
  .aia-split__head,.aia-work__head,.aia-chain__head{grid-template-columns:1fr;gap:20px;align-items:start}
  .aia-split__title,.aia-work__title,.aia-chain__title{max-width:24ch}
  .aia-human{grid-template-columns:1fr;gap:14px;justify-items:start}
  .aia-human__roles{justify-content:flex-start}
  .aia-chain__stage{aspect-ratio:1000/380}
  .aia-chain__copy{font-size:12px;width:clamp(104px,12vw,132px)}
  .aia-chain__foot{gap:20px}
}
@media (max-width:960px){
  /* The track needs all six stations to stay legible; below this it is
     replaced by the purpose-built vertical sequence, not scaled down. */
  .aia-track{display:none}
  .aia-work__mobile{display:grid;gap:0;list-style:none;margin:clamp(26px,4vw,38px) 0 0;padding:0;position:relative}
  .aia-work__mobile::before{content:"";position:absolute;left:5px;top:18px;bottom:18px;width:1px;
    background:linear-gradient(180deg,var(--brand),var(--cyan))}
  .aia-work__mstep{position:relative;display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) auto;
    align-items:center;gap:6px 16px;padding:15px 0 15px 28px;border-bottom:1px solid var(--line-soft)}
  .aia-work__mstep:last-child{border-bottom:0}
  .aia-work__mstep::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:11px;height:11px;border-radius:50%;background:var(--surface-card);border:2px solid var(--brand)}
  .aia-work__mstep:last-child::before{border-color:var(--cyan)}
  /* The exception is indented and amber — it visibly leaves the main line. */
  .aia-work__mstep--exception{margin-left:26px;padding-left:28px}
  .aia-work__mstep--exception::before{border-color:#E0812F;background:#fff}
  .aia-work__mstep--exception .aia-work__mname{color:#B8621B}
  .aia-work__mname{grid-column:1;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
  .aia-work__mmicro{grid-column:2;font-size:13.5px;color:var(--ink);letter-spacing:-.01em}
  .aia-work__mby{grid-column:3;padding:3px 9px;border-radius:999px;border:1px solid var(--line);
    font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
}
@media (max-width:860px){
  /* The rising ramp needs horizontal room for five labelled states; below
     this it becomes an ascending vertical progression instead. */
  .aia-chain__stage{display:none}
  .aia-chain__list{display:grid;gap:0;list-style:none;margin:clamp(26px,4vw,38px) 0 0;padding:0;position:relative}
  .aia-chain__list::before{content:"";position:absolute;left:5px;top:18px;bottom:18px;width:1px;
    background:linear-gradient(180deg,var(--brand),var(--cyan))}
  .aia-chain__lstep{position:relative;display:grid;gap:3px;padding:15px 0 15px 28px;
    border-bottom:1px solid var(--dark-line-soft)}
  .aia-chain__lstep:last-child{border-bottom:0}
  .aia-chain__lstep::before{content:"";position:absolute;left:0;top:22px;width:11px;height:11px;
    border-radius:50%;background:var(--dark-2);border:2px solid var(--cyan)}
  .aia-chain__lname{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
  .aia-chain__lcopy{font-size:14px;color:var(--dark-ink);letter-spacing:-.01em}
  .aia-chain__foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:760px){
  .aia-stage{grid-template-columns:1fr;gap:12px}
  .aia-stage__media{aspect-ratio:16/10}
  .aia-split__pair{grid-template-columns:1fr;gap:14px}
  /* One column: the legs would point at nothing, so the connector collapses
     to a single stem into the human bar. */
  .aia-split__down{height:36px}
  .aia-split__leg,.aia-split__bar{display:none}
  .aia-split__stem{top:0;height:100%}
}
@media (max-width:640px){
  .aia-hero__actions{flex-direction:column;align-items:stretch}
  .aia-hero__actions .btn{width:100%}
  .aia-hero__note{font-size:10px;letter-spacing:.12em}
  .aia-router{padding:13px}
  .aia-work__mstep{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
  .aia-work__mname{grid-column:1;grid-row:1}
  .aia-work__mmicro{grid-column:1;grid-row:2}
  .aia-work__mby{grid-column:2;grid-row:1 / span 2;align-self:center}
  .aia-work__mstep--exception{margin-left:18px}
  .aia-band{aspect-ratio:4/3}
  .aia-cta__actions{flex-direction:column;align-items:stretch;width:100%}
  .aia-cta__actions .btn{width:100%}
}
@media (max-width:460px){
  .aia-rt__row--pair{grid-template-columns:1fr;gap:8px}
  /* Single column: the fork/join legs no longer line up, so they collapse. */
  .aia-rt__fork .aia-rt__leg,.aia-rt__fork .aia-rt__bar,
  .aia-rt__join .aia-rt__leg,.aia-rt__join .aia-rt__bar{display:none}
  .aia-rt__fork .aia-rt__stem,.aia-rt__join .aia-rt__stem{top:0;height:100%}
  .aia-node{max-width:none}
  .aia-ex{font-size:12px;padding:6px 10px}
}

/* ---------- AI & Automation · reduced motion ---------------------------- */
@media (prefers-reduced-motion:reduce){
  .aia-hero__lede [data-seq],
  .aia-stage .aia-node,
  .aia-split__body .aia-side,.aia-split__body .aia-ex,.aia-split__body .aia-human{opacity:1!important;transform:none!important}
  .aia-track__review{opacity:1!important;transform:translate(-50%,50%)!important}
  .aia-stage .aia-rt__link::before,.aia-stage .aia-rt__stem,
  .aia-stage .aia-rt__leg,.aia-stage .aia-rt__bar,
  .aia-split__down i{opacity:1!important}
  .aia-rt__pulse{display:none}
  .aia-track__fill{width:92%!important}
  .aia-track__station .aia-track__dot{background:var(--brand)!important;border-color:var(--brand)!important}
  .aia-track__branch-path{stroke-dashoffset:0!important;stroke-dasharray:none!important}
  .aia-chain__ramp{stroke-dashoffset:0!important;stroke-dasharray:none!important}
  .aia-chain__state .aia-chain__dot{background:var(--cyan)!important;border-color:var(--cyan)!important}
  .aia-chain__state .aia-chain__name{color:var(--dark-ink)!important}
}

/* ==========================================================================
   REUSABLE EDITORIAL TEXT MOTION  (shared primitive)
   --------------------------------------------------------------------------
   Two opt-in, composable hooks for major editorial headings. NEITHER is ever
   applied blanket to h1/h2/h3 — a heading animates only when it explicitly
   carries the attribute, so restraint stays the default and a sitewide rollout
   is a deliberate, heading-by-heading act.

     [data-text-reveal]   Masked per-line rise. The author declares line units
                          with .tr-line; site.js (initTextMotion) wraps each
                          line's content in .tr-line__inner, arms the clip and
                          fires ONE shared scroll trigger — the same coalesced
                          rAF pass every other reveal already rides. No new
                          scroll listener and no per-heading rAF loop.
     .text-highlight /    Brand -> cyan gradient clipped to the glyphs, with a
     [data-text-highlight] soft light band that sweeps across once on entry.
                          Generalised from the S06 "Grow Further." accent so the
                          whole site shares one highlight language.

   Tunable per instance with the custom properties below (set inline or in a
   page block) or the data-* overrides read by initTextMotion. Both hooks
   degrade to fully legible static text with no JS and under reduced motion. */
.tr-line{display:block}
[data-text-reveal]{
  --text-reveal-duration:.82s;--text-reveal-stagger:.09s;--text-reveal-delay:0s;
  --text-reveal-ease:cubic-bezier(.16,1,.3,1);--text-reveal-distance:110%}
/* Armed only after JS has wrapped each line, so the no-JS state is plain text. */
[data-text-reveal].is-armed .tr-line{overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
[data-text-reveal].is-armed .tr-line__inner{display:block;will-change:transform;
  transform:translateY(var(--text-reveal-distance));opacity:0}
[data-text-reveal][data-tr-dir="down"].is-armed .tr-line__inner{
  transform:translateY(calc(-1 * var(--text-reveal-distance)))}
[data-text-reveal].is-in .tr-line__inner{transform:none;opacity:1;
  transition:transform var(--text-reveal-duration) var(--text-reveal-ease),
    opacity calc(var(--text-reveal-duration) * .68) var(--text-reveal-ease);
  transition-delay:calc(var(--text-reveal-delay) + var(--tr-i,0) * var(--text-reveal-stagger))}

.text-highlight{color:var(--brand)}   /* no background-clip: solid brand fallback */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .text-highlight{
    --text-highlight-a:var(--brand);--text-highlight-b:var(--cyan);--text-highlight-c:#8FE6F4;
    --text-highlight-duration:.9s;--text-highlight-delay:.14s;
    background-image:
      linear-gradient(96deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 58%),
      linear-gradient(96deg,var(--text-highlight-a) 0%,var(--text-highlight-b) 56%,var(--text-highlight-c) 100%);
    background-size:260% 100%,100% 100%;background-position:150% 0,0 0;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  /* Dark surfaces: lift the resting gradient and add a restrained glow. */
  .section--dark .text-highlight,.sep-cta .text-highlight{
    --text-highlight-a:#2F6BFF;filter:drop-shadow(0 0 26px rgba(55,189,209,.24))}
  /* The sweep only runs once armed by JS; the resting appearance is the plain
     gradient (identical to the band's parked-off position). */
  .text-highlight.is-armed{transition:background-position var(--text-highlight-duration) var(--ease-out) var(--text-highlight-delay)}
  .text-highlight.is-lit{background-position:-60% 0,0 0}
}
@media (prefers-reduced-motion:reduce){
  [data-text-reveal].is-armed .tr-line__inner{transform:none!important;opacity:1!important;transition:none!important}
  .text-highlight{transition:none!important}
}

/* ==========================================================================
   SALES ENGINE PRO  (/sales-engine-pro/)
   --------------------------------------------------------------------------
   Page-specific composition for the approved Claude Design. Reuses the shared
   system (tokens, .container, .btn, .mono, .eyebrow, the motion engine and the
   text primitive above) and adds only what this page's layout genuinely needs.
   Every selector is prefixed .sep- / .page-sales-engine, so no other page is
   touched. All product UI is DEMONSTRATION content, mirrored in plain copy.
   ========================================================================== */
@keyframes sep-scan{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(420px);opacity:0}}
@keyframes sep-dash{to{stroke-dashoffset:-320}}
.page-sales-engine{background:var(--bg)}
.sep-mono{font-family:var(--mono)}
.sep-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 clamp(24px,3vw,40px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.sep-eyebrow__num{color:var(--brand)}
.sep-eyebrow__rule{width:24px;height:1px;background:var(--line-strong);display:inline-block}
.sep-eyebrow__label{color:var(--ink-dim)}
.sep-eyebrow--cyan .sep-eyebrow__num{color:var(--cyan)}
.sep-eyebrow--cyan .sep-eyebrow__rule{background:rgba(255,255,255,.3)}
.sep-eyebrow--cyan .sep-eyebrow__label{color:var(--dark-body)}
.sep-badge{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);border:1px solid var(--line);padding:4px 8px;background:#fff;white-space:nowrap}
.sep-badge--dark{color:var(--dark-dim);border-color:var(--dark-line);background:transparent}

/* ---------- S01 · Hero -------------------------------------------------- */
.sep-hero{position:relative;padding-top:var(--header-h);border-bottom:1px solid var(--line);
  scroll-margin-top:80px;overflow:hidden}
.sep-hero__grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(28px,3.4vw,56px);align-items:start}
.sep-hero__lede{padding:clamp(40px,5vw,72px) clamp(22px,2.6vw,40px) clamp(64px,7vw,96px) 0;
  border-right:1px solid var(--line)}
.sep-hero__title{margin:0;font-size:clamp(34px,4.9vw,60px);line-height:1.03;letter-spacing:-.035em;
  font-weight:600;color:var(--ink)}
.sep-hero__rule{height:2px;width:92px;background:var(--cyan);margin-top:22px;transform-origin:left}
.sep-hero__copy{margin:26px 0 0;max-width:430px;font-size:clamp(15.5px,1.1vw,16.5px);line-height:1.62;color:var(--ink-body)}
.sep-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:36px}
.sep-hero__meta{margin-top:clamp(44px,5vw,72px);display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line)}
.sep-hero__meta-cell{padding:18px 20px 0 0}
.sep-hero__meta-cell + .sep-hero__meta-cell{padding:18px 0 0 24px;border-left:1px solid var(--line)}
.sep-hero__meta-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.sep-hero__meta-v{font-size:14px;color:var(--ink);margin-top:7px;font-weight:500;line-height:1.45}
.sep-hero__stage{padding:clamp(40px,5vw,72px) 0 clamp(64px,7vw,96px)}

/* ---------- Workspace product UI (demonstration) ------------------------ */
.sep-ui{position:relative;border:1px solid var(--line);background:#fff;border-radius:3px;
  box-shadow:0 24px 60px -30px rgba(10,15,28,.28);overflow:hidden}
.sep-ui__scan{position:absolute;left:0;right:0;top:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
@media (prefers-reduced-motion:no-preference){.sep-ui__scan{animation:sep-scan 9s 1.2s linear infinite}}
.sep-ui__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-cool)}
.sep-ui__crumb{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.sep-ui__sq{width:8px;height:8px;background:var(--brand);flex:none}
.sep-ui__crumb-a{color:var(--ink)}
.sep-ui__crumb-sep{color:var(--line-strong)}
.sep-ui__crumb-b{color:var(--ink-dim)}
.sep-ui__body{display:grid;grid-template-columns:178px minmax(0,1fr) 192px;min-height:434px}
.sep-ui__col-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
/* accounts column */
.sep-ui__accounts{border-right:1px solid var(--line);background:var(--bg);padding:16px 0}
.sep-ui__accounts > .sep-ui__col-label{padding:0 16px 12px}
.sep-acc{display:block;width:100%;text-align:left;cursor:pointer;padding:11px 14px;
  border:0;border-left:2px solid transparent;border-bottom:1px solid var(--line-soft);
  background:transparent;transition:background .18s var(--ease-out),border-color .18s var(--ease-out)}
.sep-acc:hover{background:rgba(0,51,204,.03)}
.sep-acc__name{font-size:13px;font-weight:500;color:var(--ink-body);letter-spacing:-.01em}
.sep-acc__status{font-family:var(--mono);font-size:10px;color:var(--ink-dim);margin-top:5px}
.sep-acc.is-active{border-left-color:var(--brand);background:#fff}
.sep-acc.is-active .sep-acc__name{color:var(--ink);font-weight:600}
.sep-acc.is-active .sep-acc__status{color:var(--brand)}
.sep-ui__hint{padding:14px 16px 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--line-strong)}
/* detail column */
.sep-ui__detail{padding:22px 24px;display:flex;flex-direction:column;gap:20px;min-width:0}
.sep-ui__acc-name{font-size:24px;font-weight:600;letter-spacing:-.025em;margin-top:6px;color:var(--ink)}
.sep-ui__acc-sector{font-size:13px;color:var(--ink-dim);margin-top:5px}
.sep-ui__pair{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sep-ui__pair-cell{padding:14px 16px 14px 0}
.sep-ui__pair-cell + .sep-ui__pair-cell{padding:14px 0 14px 18px;border-left:1px solid var(--line)}
.sep-ui__pair-v{font-size:14.5px;font-weight:600;margin-top:7px;color:var(--ink)}
.sep-ui__pair-s{font-size:12.5px;color:var(--ink-dim);margin-top:3px}
.sep-ui__pair-s--brand{font-family:var(--mono);font-size:11px;color:var(--brand)}
.sep-ui__ctx{border:1px solid var(--line);background:var(--surface-cool);padding:14px 16px}
.sep-ui__ctx p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-body)}
.sep-ui__actions{display:flex;align-items:center;gap:10px;margin-top:auto;flex-wrap:wrap}
.sep-ui__act{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;padding:9px 14px;
  border-radius:2px;border:1px solid transparent;background:var(--brand);color:#fff}
.sep-ui__act--ghost{background:#fff;border-color:var(--line);color:var(--ink-body);font-weight:500;padding:8px 14px}
/* status column */
.sep-ui__status{border-left:1px solid var(--line);background:var(--bg);padding:18px 16px}
.sep-ui__pill{display:inline-flex;align-items:center;gap:7px;margin-top:8px;border:1px solid var(--brand);padding:5px 9px;border-radius:2px}
.sep-ui__pill-dot{width:6px;height:6px;background:var(--cyan);flex:none}
@media (prefers-reduced-motion:no-preference){.sep-ui__pill-dot{animation:tsl-blink 2.4s ease-in-out infinite}}
.sep-ui__pill-txt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--brand)}
.sep-ui__divider{height:1px;background:var(--line);margin:18px 0}
.sep-ui__next{font-size:13.5px;font-weight:600;margin-top:8px;line-height:1.4;color:var(--ink)}
.sep-ui__tl{margin-top:14px;display:block}
.sep-ui__tl-item{display:flex;gap:10px}
.sep-ui__tl-rail{display:flex;flex-direction:column;align-items:center}
.sep-ui__tl-dot{width:7px;height:7px;background:var(--line);margin-top:4px;transition:background .3s}
.sep-ui__tl-line{width:1px;flex:1;background:var(--line)}
.sep-ui__tl-item:last-child .sep-ui__tl-line{display:none}
.sep-ui__tl-label{font-size:12.5px;font-weight:500;color:var(--ink-dim);padding-bottom:15px}
.sep-ui__tl-item.is-done .sep-ui__tl-dot{background:var(--brand)}
.sep-ui__tl-item.is-done .sep-ui__tl-label{color:var(--ink)}
.sep-ui__tl-item.is-current .sep-ui__tl-dot{background:var(--brand)}
.sep-ui__tl-item.is-current .sep-ui__tl-label{color:var(--ink);font-weight:600}

/* ---------- Editorial figure / image slots ------------------------------ */
.sep-figure{border-bottom:1px solid var(--line)}
.sep-figure--a{background:var(--surface-warm)}
.sep-figure--b{background:var(--bg)}
.sep-figure__grid{display:grid;align-items:stretch}
.sep-figure--a .sep-figure__grid{grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr)}
.sep-figure--b .sep-figure__grid{grid-template-columns:minmax(0,.52fr) minmax(0,1.48fr)}
.sep-figure__aside{display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.sep-figure--a .sep-figure__aside{padding:56px 0 56px 40px;border-left:1px solid #DED8CE}
.sep-figure--b .sep-figure__aside{padding:64px 40px 64px 0;border-right:1px solid var(--line)}
.sep-figure__kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.sep-figure__lead{margin:18px 0 0;font-size:clamp(19px,1.7vw,22px);line-height:1.42;letter-spacing:-.02em;font-weight:500;color:var(--ink)}
.sep-figure__foot{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
  border-top:1px solid var(--line);padding-top:14px}
.sep-figure--a .sep-figure__foot{border-top-color:#DED8CE}
.sep-figure__check{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.sep-figure__check span:first-child{width:6px;height:6px;background:var(--brand);flex:none}
.sep-figure__check-txt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
/* image slot: controlled placeholder, exact designed aspect until a real photo lands */
.sep-figure__media{position:relative;overflow:hidden}
.sep-figure--a .sep-figure__media{height:460px}
.sep-figure--b .sep-figure__media{height:520px;margin-left:-1px}
.sep-slot{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:22px;background:
    radial-gradient(120% 120% at 78% 20%,rgba(0,51,204,.06),transparent 60%),
    linear-gradient(180deg,#EEF1F5,#E4E8EE);
  background-color:#E9ECF1}
.sep-slot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(10,15,28,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,15,28,.05) 1px,transparent 1px);
  background-size:32px 32px}
.sep-slot__tag{position:relative;align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);background:rgba(255,255,255,.7);border:1px solid var(--line);padding:5px 9px}
.sep-slot__desc{position:relative;max-width:34ch;font-size:13.5px;line-height:1.5;color:var(--ink-dim)}
.sep-slot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sep-figure__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sep-figure__accent{position:absolute;background:rgba(55,189,209,.75);pointer-events:none;z-index:2}
.sep-figure__accent--h{left:0;bottom:0;width:108px;height:1px}
.sep-figure--b .sep-figure__accent--h{top:88px;bottom:auto;left:0;right:0;width:auto;height:1px}
.sep-figure__accent--v{left:0;top:88px;width:1px;height:46px}
.sep-figure__card{position:absolute;right:26px;bottom:26px;z-index:2;background:#fff;border:1px solid var(--line);
  padding:14px 16px;width:232px;box-shadow:0 16px 40px -26px rgba(10,15,28,.5);pointer-events:none}
.sep-figure__card-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.sep-figure__card-t{font-size:13.5px;font-weight:600;margin-top:8px;color:var(--ink)}
.sep-figure__card-s{font-size:12.5px;color:var(--ink-dim);margin-top:3px}

/* ---------- Section shells for the storytelling blocks ------------------ */
.sep-block{border-bottom:1px solid var(--line)}
.sep-block--frag{background:var(--bg)}
.sep-block--journey{background:var(--surface-cool)}
.sep-block--loop{background:var(--surface-warm)}
.sep-block__inner{padding:clamp(72px,9vw,104px) 0}
.sep-head{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,4vw,72px);
  align-items:end;margin-bottom:clamp(40px,5vw,56px)}
.sep-head__title{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.08;color:var(--ink)}
.sep-block--frag .sep-head__title{font-size:clamp(30px,3.6vw,42px)}
.sep-block--journey .sep-head__title{font-size:clamp(32px,4vw,48px);line-height:1.06}
.sep-block--loop .sep-head__title{font-size:clamp(30px,3.6vw,44px);line-height:1.07}
.sep-head__intro{margin:0 0 6px;font-size:16px;line-height:1.6;color:var(--ink-body);max-width:420px}
.sep-caption{margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-dim);line-height:1.6}

/* ---------- S02 · Fragmentation ----------------------------------------- */
.sep-frag__stage{position:relative;border:1px solid var(--line);background:#fff;border-radius:3px;
  padding:clamp(24px,3vw,40px);overflow:hidden}
.sep-frag__gridbg{position:absolute;inset:0;pointer-events:none;opacity:.45;transition:opacity .5s ease;
  background-image:linear-gradient(#F0F2F4 1px,transparent 1px),linear-gradient(90deg,#F0F2F4 1px,transparent 1px);
  background-size:48px 48px}
.sep-frag__stage.is-resolved .sep-frag__gridbg{opacity:1}
.sep-frag__row{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) 96px minmax(0,.9fr);align-items:center;min-height:380px}
.sep-frag__scatter{position:relative;height:380px}
.sep-fragc{position:absolute;left:var(--x);top:var(--y);width:clamp(150px,42%,208px);
  transform:rotate(var(--r,0deg));transform-origin:50% 50%;border:1px solid var(--line);background:#fff;
  box-shadow:0 10px 26px -18px rgba(10,15,28,.4);border-radius:2px;
  transition:transform .7s var(--ease-out),opacity .5s ease,filter .5s ease}
.sep-fragc__bar{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--line-soft);background:var(--surface-cool)}
.sep-fragc__label{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--ink-dim)}
.sep-fragc__dot{width:5px;height:5px;background:var(--line-strong)}
.sep-fragc__body{padding:10px}
.sep-fragc__title{font-size:11.5px;font-weight:600;color:var(--ink)}
.sep-fragc__line{height:5px;background:#F0F2F4;margin-top:9px}
.sep-fragc__line:nth-child(3){margin-top:6px;width:72%}
.sep-fragc__line:nth-child(4){margin-top:6px;width:48%}
.sep-frag__stage.is-resolved .sep-fragc{opacity:.26;filter:saturate(.4);transform:rotate(0deg) translateX(12px) scale(.96)}
.sep-frag__link{height:380px;display:flex;align-items:center;justify-content:center}
.sep-frag__link svg{overflow:visible}
.sep-frag__link .sep-frag__feed{stroke-dasharray:4 5}
@media (prefers-reduced-motion:no-preference){.sep-frag__link .sep-frag__feed{animation:sep-dash 13s linear infinite}}
.sep-frag__resolved{border:1px solid var(--brand);background:#fff;border-radius:2px;
  box-shadow:0 18px 44px -28px rgba(0,51,204,.55);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.sep-frag__stage.is-resolved .sep-frag__resolved{transform:scale(1.04);box-shadow:0 24px 54px -24px rgba(0,51,204,.6)}
.sep-frag__rhead{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--brand)}
.sep-frag__rhead-t{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#fff}
.sep-frag__rhead-dot{width:6px;height:6px;background:var(--cyan)}
@media (prefers-reduced-motion:no-preference){.sep-frag__rhead-dot{animation:tsl-blink 2.4s ease-in-out infinite}}
.sep-frag__rbody{padding:18px 16px}
.sep-frag__rname{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.sep-frag__rsub{font-size:12.5px;color:var(--ink-dim);margin-top:4px}
.sep-frag__rdiv{height:1px;background:var(--line);margin:16px 0}
.sep-frag__rrow{display:flex;align-items:baseline;justify-content:space-between;padding:7px 0;gap:12px}
.sep-frag__rk{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink-dim)}
.sep-frag__rv{font-size:12.5px;font-weight:500;color:var(--ink)}
.sep-frag__meter{position:relative;display:flex;align-items:center;justify-content:space-between;
  margin-top:28px;border-top:1px solid var(--line);padding-top:14px}
.sep-frag__meter span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.sep-frag__meter .sep-frag__state{color:var(--brand)}

/* ---------- S03 · Connected journey ------------------------------------- */
.sep-journey__chips{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.sep-chip{cursor:pointer;text-align:left;border:0;border-right:1px solid var(--line);border-top:2px solid transparent;
  background:transparent;padding:18px 14px 16px;transition:background .25s var(--ease-out),border-color .25s var(--ease-out)}
.sep-chip:last-child{border-right:0}
.sep-chip__top{display:flex;align-items:center;gap:8px}
.sep-chip__num{font-family:var(--mono);font-size:9.5px;color:var(--line-strong)}
.sep-chip__dot{width:5px;height:5px;background:var(--line)}
.sep-chip__label{font-size:12.5px;font-weight:500;color:var(--ink-dim);letter-spacing:.01em;margin-top:10px}
.sep-chip:hover{background:rgba(10,15,28,.02)}
.sep-chip.is-done .sep-chip__dot{background:var(--brand)}
.sep-chip.is-active{border-top-color:var(--brand);background:#fff}
.sep-chip.is-active .sep-chip__num{color:var(--brand)}
.sep-chip.is-active .sep-chip__dot{background:var(--cyan)}
.sep-chip.is-active .sep-chip__label{color:var(--ink);font-weight:600}
.sep-journey__panel{border:1px solid var(--line);border-top:0;background:var(--dark);color:var(--dark-ink);position:relative;overflow:hidden}
.sep-journey__pbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;
  border-bottom:1px solid var(--dark-line);background:var(--dark-2)}
.sep-journey__pbar-l{display:flex;align-items:center;gap:12px}
.sep-journey__pbar-dot{width:8px;height:8px;background:var(--cyan);flex:none}
@media (prefers-reduced-motion:no-preference){.sep-journey__pbar-dot{animation:tsl-blink 2.4s ease-in-out infinite}}
.sep-journey__pbar-txt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#fff}
.sep-journey__pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) 250px}
.sep-journey__pcol{padding:30px 26px;min-width:0}
.sep-journey__pcol--a{border-right:1px solid var(--dark-line-soft)}
.sep-journey__pcol--b{border-right:1px solid var(--dark-line-soft);display:flex;flex-direction:column}
.sep-journey__pcol--c{padding:30px 22px;background:var(--dark-2)}
.sep-journey__k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-dim)}
.sep-journey__acc{font-size:27px;font-weight:600;letter-spacing:-.028em;margin-top:12px;color:#fff}
.sep-journey__accsub{font-size:13.5px;color:var(--dark-body);margin-top:8px;line-height:1.5}
.sep-journey__div{height:1px;background:var(--dark-line-soft);margin:26px 0}
.sep-journey__contact{font-size:16px;font-weight:600;margin-top:10px;color:#fff}
.sep-journey__role{font-size:13px;color:var(--dark-body);margin-top:4px}
.sep-journey__carry{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sep-journey__tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--dark-ink);border:1px solid var(--dark-line);padding:5px 9px}
.sep-journey__activity{font-size:16px;font-weight:600;margin-top:10px;color:#fff}
.sep-journey__ago{font-family:var(--mono);font-size:11px;color:var(--cyan);margin-top:6px}
.sep-journey__ctx{border:1px solid var(--dark-line);background:var(--dark-2);padding:16px 18px;margin-top:24px}
.sep-journey__ctx p{margin:10px 0 0;font-size:14px;line-height:1.6;color:#E4E7EC}
.sep-journey__seller{margin-top:24px}
.sep-journey__acts{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px}
.sep-journey__act{display:inline-flex;align-items:center;font-size:13px;font-weight:600;padding:10px 16px;border-radius:2px;background:var(--brand);color:#fff;border:1px solid transparent}
.sep-journey__act--ghost{background:transparent;border-color:var(--dark-line);color:var(--dark-ink);font-weight:500;padding:9px 16px}
.sep-journey__pill{display:inline-flex;align-items:center;gap:7px;margin-top:10px;border:1px solid var(--cyan);padding:5px 10px}
.sep-journey__pill span:first-child{width:6px;height:6px;background:var(--cyan);flex:none}
.sep-journey__pill-txt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--cyan)}
.sep-journey__rail{margin-top:16px}
.sep-journey__rail-item{display:flex;gap:12px}
.sep-journey__rail-col{display:flex;flex-direction:column;align-items:center}
.sep-journey__rail-dot{width:7px;height:7px;background:rgba(255,255,255,.22);margin-top:4px;transition:background .3s}
.sep-journey__rail-line{width:1px;flex:1;background:var(--dark-line)}
.sep-journey__rail-item:last-child .sep-journey__rail-line{display:none}
.sep-journey__rail-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#6E7688;padding-bottom:13px;transition:color .3s}
.sep-journey__rail-item.is-done .sep-journey__rail-dot{background:var(--brand)}
.sep-journey__rail-item.is-done .sep-journey__rail-label{color:var(--dark-ink)}
.sep-journey__rail-item.is-current .sep-journey__rail-dot{background:var(--cyan)}
.sep-journey__rail-item.is-current .sep-journey__rail-label{color:#fff;font-weight:500}

/* ---------- S04 · Seller support loop ----------------------------------- */
.sep-loop__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid #DED8CE;background:#fff;border-radius:3px}
.sep-loopc{padding:26px 22px 28px;border-right:1px solid #EDE8E0;background:#FDFCFA;transition:background .3s;position:relative}
.sep-loopc:last-child{border-right:0}
.sep-loopc__top{display:flex;align-items:center;justify-content:space-between}
.sep-loopc__num{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--line-strong)}
.sep-loopc__dot{width:6px;height:6px;background:var(--line);transition:all .3s}
.sep-loopc__label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-top:22px}
.sep-loopc__title{font-size:16px;font-weight:600;letter-spacing:-.018em;margin-top:12px;color:var(--ink);line-height:1.3}
.sep-loopc__rule{height:1px;background:#EDE8E0;margin:16px 0 14px;transition:background .3s}
.sep-loopc__line{display:flex;gap:8px;padding:3px 0}
.sep-loopc__line span:first-child{font-size:12.5px;color:var(--line-strong)}
.sep-loopc__line-t{font-size:12.5px;line-height:1.45;color:var(--ink-dim)}
.sep-loopc__human{display:inline-flex;align-items:center;gap:7px;margin-top:18px;border:1px solid var(--brand);padding:5px 9px}
.sep-loopc__human span:first-child{width:5px;height:5px;background:var(--cyan);flex:none}
@media (prefers-reduced-motion:no-preference){.sep-loopc__human span:first-child{animation:tsl-blink 2.4s ease-in-out infinite}}
.sep-loopc__human-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--brand)}
.sep-loopc.is-focus{background:#fff}
.sep-loopc.is-focus .sep-loopc__num{color:var(--brand)}
.sep-loopc.is-focus .sep-loopc__label{color:var(--brand)}
.sep-loopc.is-focus .sep-loopc__dot{width:8px;height:8px;background:var(--cyan)}
.sep-loopc.is-focus .sep-loopc__rule{background:var(--brand)}
.sep-loopc.is-focus .sep-loopc__line-t{color:var(--ink-body)}
.sep-loop__meter{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}
.sep-loop__meter span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.sep-loop__meter .sep-loop__return{color:var(--brand)}

/* ---------- S05 · CTA (dark) -------------------------------------------- */
.sep-cta{background:var(--dark);color:var(--dark-ink)}
.sep-cta__inner{padding:clamp(72px,9vw,96px) 0 clamp(76px,9vw,100px);display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,4vw,64px);align-items:end}
.sep-cta__title{margin:0;font-size:clamp(32px,4.4vw,52px);line-height:1.05;letter-spacing:-.032em;font-weight:600;color:var(--dark-ink)}
.sep-cta__copy{margin:24px 0 0;font-size:16.5px;line-height:1.6;color:var(--dark-body);max-width:460px}
.sep-cta__actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:6px}
.sep-cta__actions .btn{width:auto}

/* ==========================================================================
   SALES ENGINE PRO · responsive
   ========================================================================== */
@media (max-width:1080px){
  .sep-hero__grid{grid-template-columns:1fr}
  .sep-hero__lede{border-right:0;border-bottom:1px solid var(--line);padding:clamp(36px,6vw,56px) 0 clamp(40px,6vw,56px)}
  .sep-hero__copy{max-width:56ch}
  .sep-hero__stage{padding:clamp(40px,6vw,56px) 0 clamp(48px,7vw,72px)}
  .sep-head{grid-template-columns:1fr;gap:20px;align-items:start}
  .sep-head__intro{max-width:60ch}
  .sep-cta__inner{grid-template-columns:1fr;gap:32px;align-items:start}
  .sep-cta__actions{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:860px){
  .sep-figure__grid,
  .sep-figure--a .sep-figure__grid,
  .sep-figure--b .sep-figure__grid{grid-template-columns:1fr}
  .sep-figure--a .sep-figure__grid{grid-template-areas:"media" "aside"}
  .sep-figure--b .sep-figure__grid{grid-template-areas:"media" "aside"}
  .sep-figure__media{grid-area:media}
  .sep-figure__aside{grid-area:aside}
  .sep-figure--a .sep-figure__aside{padding:32px 0 0;border-left:0}
  .sep-figure--b .sep-figure__aside{padding:32px 0 0;border-right:0}
  .sep-figure--b .sep-figure__media{margin-left:0}
  .sep-figure--a .sep-figure__media,.sep-figure--b .sep-figure__media{height:clamp(280px,52vw,440px)}
  /* Journey chips wrap to two rows of four. */
  .sep-journey__chips{grid-template-columns:repeat(4,1fr)}
  .sep-chip:nth-child(4){border-right:0}
  .sep-chip:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .sep-journey__pgrid{grid-template-columns:1fr}
  .sep-journey__pcol--a,.sep-journey__pcol--b{border-right:0;border-bottom:1px solid var(--dark-line-soft)}
  /* Loop: 5 across is too tight — go to a scannable stack of rows. */
  .sep-loop__grid{grid-template-columns:1fr}
  .sep-loopc{border-right:0;border-bottom:1px solid #EDE8E0}
  .sep-loopc:last-child{border-bottom:0}
}
@media (max-width:760px){
  /* Fragmentation: drop the connector column, stack scatter over resolved. */
  .sep-frag__row{grid-template-columns:1fr;min-height:0;gap:24px}
  .sep-frag__link{display:none}
  .sep-frag__scatter{height:340px}
  .sep-ui__body{grid-template-columns:1fr}
  .sep-ui__accounts{border-right:0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:0}
  .sep-ui__accounts > .sep-ui__col-label{flex-basis:100%}
  .sep-acc{flex:1 1 44%;border-bottom:1px solid var(--line-soft)}
  .sep-ui__status{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .sep-hero__meta{grid-template-columns:1fr}
  .sep-hero__meta-cell + .sep-hero__meta-cell{padding:18px 0 0;border-left:0;border-top:1px solid var(--line);margin-top:18px}
  .sep-hero__actions{flex-direction:column;align-items:stretch}
  .sep-hero__actions .btn{width:100%}
  .sep-frag__scatter{height:300px}
  .sep-fragc{width:clamp(140px,54%,190px)}
  .sep-journey__chips{grid-template-columns:repeat(2,1fr)}
  .sep-chip{border-bottom:1px solid var(--line)}
  .sep-chip:nth-child(2n){border-right:0}
  .sep-cta__actions{flex-direction:column;align-items:stretch;width:100%}
  .sep-cta__actions .btn{width:100%}
}

/* ---------- Sales Engine Pro · reduced motion --------------------------- */
@media (prefers-reduced-motion:reduce){
  .sep-ui__scan{display:none}
  .sep-frag__stage.is-resolved .sep-fragc{transform:rotate(0deg);opacity:.4}
}

/* ==========================================================================
   COMPANY  (/company/)
   --------------------------------------------------------------------------
   A purpose-and-philosophy page, deliberately the most HUMAN surface on the
   site. Where Home, Platform, AI and Sales Engine Pro lead with interfaces,
   diagrams and system vocabulary, this page leads with photography, space and
   typography — roughly 60% visual to 40% copy — and carries no product UI,
   no workflow nodes and no data artifacts at all.

   It still reads as THINKASOL: the same tokens, container, buttons, section
   numbering, hairline rules, dark manifesto surface and the shared text-motion
   primitive ([data-text-reveal] / .text-highlight), used on exactly three
   headings — hero, manifesto, closing.

   PHOTOGRAPHY. Three designed zones, each with a compositional job. The layout
   is driven by aspect-ratio so the sources recrop cleanly at every breakpoint.
   See content/live/COMPANY-DRAFT.md § Image slots.
     A  company-photo-a   4:5  hero portrait — people building with technology
     B  company-photo-b  16:10 wide editorial — a working session in context
     C  company-photo-c   3:2  closing, right-bled — the people the systems are for

   Every selector is prefixed .co- / .page-company, so no other page is touched.
   ========================================================================== */
.page-company{background:var(--bg)}

/* ---------- Shared: numbered eyebrow ------------------------------------ */
.co-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 clamp(22px,2.8vw,34px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.co-eyebrow__num{color:var(--brand)}
.co-eyebrow__rule{width:24px;height:1px;background:var(--line-strong);display:inline-block;flex:none}
.co-eyebrow__label{color:var(--ink-dim)}
.co-eyebrow--warm .co-eyebrow__rule{background:#D6CEC0}
.co-eyebrow--cyan .co-eyebrow__num{color:var(--cyan)}
.co-eyebrow--cyan .co-eyebrow__rule{background:rgba(255,255,255,.28)}
.co-eyebrow--cyan .co-eyebrow__label{color:var(--dark-body)}

/* ---------- Shared: photographic slot -----------------------------------
   .co-media is the ratio box; .co-slot is the placeholder that fills it. To
   publish a real photo, replace the placeholder's children with a single
   <img> — it is absolutely positioned and object-fit:cover, so the designed
   crop holds at every breakpoint. */
/* margin:0 resets the UA <figure> margin (1em 40px). Left unset it eats 80px of
   every slot's width, and on a 390px phone that is a fifth of the photograph.
   Slots that bleed past the container re-declare their own margin longhands
   below, which win over this shorthand.

   No slot carries a max-height. Combined with aspect-ratio, a max-height makes
   Chromium shrink the box's WIDTH to keep the ratio — the 16:10 band came out
   893px wide inside a 1296px container, stranding 400px of white beside it. The
   ratio is the contract these slots publish, so it is the thing that holds, and
   size is controlled by the column and the breakpoints instead. */
.co-media{position:relative;overflow:hidden;margin:0;background:#EAE6DE}
.co-slot{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  gap:16px;padding:clamp(16px,1.6vw,24px);
  background:
    radial-gradient(118% 112% at 74% 16%,rgba(0,51,204,.075),transparent 62%),
    linear-gradient(168deg,#F2EFE9,#E1DDD4);
  background-color:#EAE6DE}
.co-slot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(10,15,28,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,15,28,.05) 1px,transparent 1px);
  background-size:34px 34px}
.co-slot__tag{position:relative;align-self:flex-start;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
  background:rgba(255,255,255,.72);border:1px solid var(--line);padding:5px 9px}
.co-slot__desc{position:relative;max-width:36ch;font-size:13.5px;line-height:1.5;color:var(--ink-dim)}
/* Slots that also carry an overlaid caption: keep the placeholder's description
   clear of the scrim and the caption line sitting on top of it. */
.co-slot--capped{padding-bottom:clamp(48px,4.5vw,66px)}
.co-slot > img,.co-media__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Overlaid caption. Sits on a bottom scrim so it stays legible over either the
   placeholder or a dark photograph. */
.co-media__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,15,28,0) 52%,rgba(10,15,28,.58) 100%)}
.co-media__cap{position:absolute;left:clamp(16px,2vw,26px);right:clamp(16px,2vw,26px);
  bottom:clamp(14px,1.6vw,20px);z-index:2;margin:0;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.94)}
.co-media__dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none;
  box-shadow:0 0 10px rgba(55,189,209,.85)}

/* ---------- S01 · Hero (warm) -------------------------------------------
   The only warm-surface hero on the site, and the point of that is tone: this
   page is about people, so it opens on paper rather than on interface white. */
.co-hero{position:relative;overflow:hidden;background:var(--surface-warm);
  border-bottom:1px solid #E2DCD2;
  padding:calc(var(--header-h) + clamp(40px,5vw,76px)) 0 clamp(56px,7vw,96px)}
.co-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,84px);align-items:center}
.co-hero__title{margin:0;font-weight:600;color:var(--ink);
  font-size:clamp(37px,5.1vw,74px);line-height:1;letter-spacing:-.042em}
.co-hero__rule{display:block;width:88px;height:1px;background:#D6CEC0;
  margin:clamp(22px,2.8vw,34px) 0 0}
.co-hero__copy{margin-top:clamp(22px,2.8vw,34px);max-width:52ch;
  font-size:clamp(15.5px,1.1vw,17px);line-height:1.64;color:var(--ink-body)}
.co-hero__actions{margin-top:clamp(24px,3vw,34px)}
.co-hero__note{margin:clamp(30px,4vw,48px) 0 0;padding-top:16px;border-top:1px solid #E2DCD2;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
/* IMAGE SLOT A — 4:5 portrait. */
.co-hero__media{aspect-ratio:4/5;
  box-shadow:0 40px 90px -60px rgba(10,15,28,.55)}
/* The drift layer. Its resting scale is what creates the headroom the parallax
   travels through, so the crop never exposes an edge — and with no JS, or under
   reduced motion, that scale IS the final state and nothing reads as unfinished.
   Keep the 1.09 here and in initCoParallax() in step. */
.co-hero__layer{position:absolute;inset:0;transform:scale(1.09);will-change:transform}
.co-hero__edge{position:absolute;left:0;bottom:0;width:96px;height:1px;background:var(--cyan);z-index:3}

/* ---------- S02 · Why THINKASOL ----------------------------------------- */
.co-why{background:var(--bg);border-bottom:1px solid var(--line);padding:clamp(72px,9vw,118px) 0}
.co-why__top{display:grid;grid-template-columns:minmax(0,1.44fr) minmax(0,.96fr);
  gap:clamp(30px,5vw,76px);align-items:start}
.co-why__title{margin:0;font-weight:600;color:var(--ink);max-width:15ch;
  font-size:clamp(30px,4vw,56px);line-height:1.04;letter-spacing:-.036em}
.co-why__body{margin-top:clamp(20px,2.4vw,30px);max-width:56ch;
  font-size:16px;line-height:1.66;color:var(--ink-body)}
.co-why__aside{border-top:1px solid var(--line);padding-top:20px}
.co-why__aside-k{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim)}
.co-why__aside-p{margin:14px 0 0;font-size:clamp(16px,1.35vw,18.5px);line-height:1.5;
  letter-spacing:-.018em;font-weight:500;color:var(--ink)}
/* IMAGE SLOT B — 16:10 wide editorial band. */
.co-why__band{margin-top:clamp(44px,5.5vw,76px);aspect-ratio:16/10}

/* Promise progression — typographic, not cards. The cyan tick lengthens at
   each step so the row reads as one progression rather than three items. */
.co-prog{margin-top:clamp(44px,5.5vw,76px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(22px,3.4vw,56px);row-gap:32px}
.co-prog__step{position:relative;border-top:1px solid var(--line);padding-top:22px}
.co-prog__step::before{content:"";position:absolute;top:-1px;left:0;height:1px;background:var(--cyan)}
.co-prog__step:nth-child(1)::before{width:34px}
.co-prog__step:nth-child(2)::before{width:70px}
.co-prog__step:nth-child(3)::before{width:112px}
.co-prog__i{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--brand)}
.co-prog__w{display:block;margin-top:12px;font-weight:600;color:var(--ink);
  font-size:clamp(18px,1.7vw,24px);line-height:1.1;letter-spacing:.004em;text-transform:uppercase}
.co-prog__p{margin:12px 0 0;font-size:14.5px;line-height:1.58;color:var(--ink-body)}

/* ---------- S03 · Manifesto (dark) --------------------------------------
   The one typographic-only section on a photography-led page. No diagram, no
   nodes: the principles are the composition. */
.co-mani{position:relative;overflow:hidden;background:var(--dark);
  padding:clamp(78px,9.5vw,126px) 0}
.co-mani__tex{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 18% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 18% 0%,#000 0%,transparent 72%)}
.co-mani__inner{position:relative;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(34px,6vw,96px);align-items:start}
.co-mani__lead{position:sticky;top:calc(var(--header-h) + 40px)}
.co-mani__title{margin:0;font-weight:600;color:var(--dark-ink);max-width:22ch;
  font-size:clamp(28px,3.4vw,46px);line-height:1.06;letter-spacing:-.034em}
.co-mani__sub{margin:20px 0 0;max-width:36ch;font-size:15.5px;line-height:1.62;color:var(--dark-body)}
.co-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.4vw,38px);
  border-top:1px solid var(--dark-line);padding:clamp(24px,2.8vw,36px) 0}
.co-item:last-child{border-bottom:1px solid var(--dark-line)}
.co-item__n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--cyan);padding-top:6px}
.co-item__t{margin:0;font-weight:600;color:var(--dark-ink);
  font-size:clamp(18px,1.55vw,22px);line-height:1.2;letter-spacing:-.022em}
.co-item__p{margin:11px 0 0;max-width:58ch;font-size:15.5px;line-height:1.64;color:var(--dark-body)}

/* ---------- S04 · People and technology --------------------------------- */
.co-people{background:var(--bg);border-bottom:1px solid var(--line);padding:clamp(76px,9vw,122px) 0}
.co-people__grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(32px,5vw,78px);align-items:center}
.co-people__title{margin:0;font-weight:600;color:var(--ink);max-width:19ch;
  font-size:clamp(27px,3.1vw,42px);line-height:1.08;letter-spacing:-.03em}
.co-people__body{margin-top:22px;max-width:54ch;font-size:16px;line-height:1.66;color:var(--ink-body)}
.co-people__links{margin-top:clamp(26px,3vw,36px);display:flex;flex-wrap:wrap;
  gap:clamp(18px,2.4vw,34px)}
.co-people__links .link-underline{margin-top:0}
/* IMAGE SLOT C — 3:2, bled to the container edge for an asymmetric crop. */
.co-people__media{aspect-ratio:3/2;
  margin-right:calc(-1 * clamp(20px,5vw,72px));
  box-shadow:0 40px 90px -64px rgba(10,15,28,.5)}
.co-facts{margin-top:clamp(48px,6vw,84px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(22px,3.4vw,56px);row-gap:30px}
.co-fact{border-top:1px solid var(--line);padding-top:18px}
.co-fact__k{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand)}
.co-fact__p{margin:11px 0 0;font-size:15px;line-height:1.6;color:var(--ink-body)}

/* ---------- S05 · Compact CTA ------------------------------------------- */
.co-cta{position:relative;overflow:hidden;background:var(--surface-cool);
  padding:clamp(64px,8vw,104px) 0 clamp(58px,7vw,88px)}
.co-cta__inner{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.co-cta__title{margin:0;font-weight:600;color:var(--ink);max-width:24ch;
  font-size:clamp(27px,3.1vw,44px);line-height:1.06;letter-spacing:-.034em}
.co-cta__copy{margin:16px 0 0;max-width:48ch;font-size:clamp(15px,1.1vw,16.5px);
  line-height:1.62;color:var(--ink-body)}
.co-cta__actions{display:flex;flex-wrap:wrap;gap:14px}
.co-cta__plates{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:clamp(46px,6vw,80px)}
.co-cta__plate{display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(0,51,204,.3),transparent)}
.co-cta__plate:nth-child(1){width:min(760px,64%)}
.co-cta__plate:nth-child(2){width:min(520px,44%);opacity:.62}
.co-cta__plate:nth-child(3){width:min(300px,26%);opacity:.36}

/* ==========================================================================
   COMPANY · responsive
   Photography keeps real presence at every width — the slots re-crop rather
   than shrinking to thumbnails, and the hero portrait stays a full-width
   moment on a phone.
   ========================================================================== */
@media (max-width:1100px){
  .co-hero__grid{grid-template-columns:1fr;gap:clamp(32px,5vw,48px)}
  .co-hero__media{aspect-ratio:3/2;order:-1}
  .co-hero__title{font-size:clamp(37px,6.4vw,58px)}
  .co-mani__inner{grid-template-columns:1fr;gap:clamp(30px,4.5vw,48px)}
  .co-mani__lead{position:static}
  .co-mani__title{max-width:20ch}
  .co-mani__sub{max-width:56ch}
}
@media (max-width:960px){
  .co-why__top{grid-template-columns:1fr;gap:clamp(26px,4vw,38px)}
  .co-why__title{max-width:20ch}
  .co-people__grid{grid-template-columns:1fr;gap:clamp(30px,4.5vw,44px)}
  .co-people__media{aspect-ratio:16/10;
    margin-right:calc(-1 * clamp(20px,5vw,72px));margin-left:calc(-1 * clamp(20px,5vw,72px))}
  .co-cta__inner{grid-template-columns:1fr;gap:clamp(24px,3.5vw,34px);align-items:start}
  .co-cta__title{max-width:24ch}
}
@media (max-width:760px){
  .co-prog{grid-template-columns:1fr;row-gap:26px}
  .co-prog__step:nth-child(2)::before{width:34px}
  .co-prog__step:nth-child(3)::before{width:34px}
  .co-facts{grid-template-columns:1fr;row-gap:24px}
  .co-why__band{aspect-ratio:3/2}
  .co-item{grid-template-columns:1fr;gap:10px}
  .co-item__n{padding-top:0}
}
@media (max-width:560px){
  /* The hero portrait returns to portrait on a phone: it is the page's first
     human moment and a 16:10 sliver would waste it. */
  .co-hero__media{aspect-ratio:4/5}
  .co-cta__actions{flex-direction:column;align-items:stretch;width:100%}
  .co-cta__actions .btn{width:100%}
  .co-slot__desc{display:none}
}

/* ---------- Company · reduced motion ------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .co-hero__layer{transform:scale(1.09)!important}
}

/* ==========================================================================
   BLOG / INSIGHTS  (/blog/ and /blog/<slug>/)
   --------------------------------------------------------------------------
   The site's EDITORIAL surface. Where the product pages argue with diagrams,
   interfaces and system vocabulary, this one is set as a publication: oversized
   article titles, asymmetric composition, hairline rules, restrained mono
   labels and generous whitespace. Deliberately absent: rounded blog cards, pill
   tags, drop shadows behind text, and any "Latest from our blog" furniture.

   It is still THINKASOL — same tokens, container, buttons, eyebrow grammar and
   the shared photographic slot (.co-media / .co-slot, reused from /company/
   rather than reimplemented). The shared text-motion primitive appears on
   exactly two headings in the whole area: the listing H1 and the article H1.

   PROSE MEASURE. Body copy is capped at 720px (~70 characters) via
   .bl-article__measure. Images and the illustrative chain figure break wider
   on purpose, which is what stops the article reading as one narrow column.

   IMAGERY. One primary photograph per article (declared in includes/blog.php),
   re-cropped by the layout: 4:3 featured, 3:2 in the index and 16:9 as the
   article hero. The index crops are below the fold and load lazily; article
   heroes load eagerly.

   Every selector is prefixed .bl- / .page-blog, so no other page is touched.
   ========================================================================== */
.page-blog{background:var(--bg)}

/* ---------- Shared: eyebrow, rule label, metadata ----------------------- */
.bl-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 clamp(20px,2.6vw,30px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.bl-eyebrow__num{color:var(--brand)}
.bl-eyebrow__rule{width:24px;height:1px;background:var(--line-strong);display:inline-block;flex:none}
.bl-eyebrow__label{color:var(--ink-dim)}
/* Article masthead: the eyebrow's first slot is the route back to the index,
   so the reader always has a named way out of the piece. */
.bl-eyebrow__back{color:var(--brand);border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease-out)}
.bl-eyebrow__back:hover{border-bottom-color:var(--brand)}

/* Section marker: LABEL ————————— NN. A full-width hairline between the two
   ends, which is the listing's structural device instead of boxed headings. */
.bl-rule-label{display:flex;align-items:center;gap:clamp(14px,2vw,22px);margin:0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.bl-rule-label__k{color:var(--ink);flex:none}
.bl-rule-label__line{flex:1 1 auto;height:1px;background:var(--line);min-width:20px}
.bl-rule-label__n{color:var(--brand);flex:none}

.bl-meta{display:flex;align-items:center;gap:12px;margin:0;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim)}
.bl-meta__sep{width:14px;height:1px;background:var(--line-strong);display:inline-block;flex:none}

/* ==========================================================================
   LISTING  (/blog/)
   ========================================================================== */

/* ---------- S01 · Hero (compact) ----------------------------------------
   Short on purpose: the featured article is the real first thing to read, so
   the hero introduces the area and stops. Headline left, supporting copy set
   against its baseline on the right. */
.bl-hero{background:var(--bg);border-bottom:1px solid var(--line);
  padding:calc(var(--header-h) + clamp(44px,5.6vw,86px)) 0 clamp(42px,5.2vw,70px)}
.bl-hero__grid{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.86fr);
  gap:clamp(28px,5vw,80px);align-items:end}
.bl-hero__title{margin:0;font-weight:600;color:var(--ink);
  font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.042em}
.bl-hero__copy{margin:0;max-width:48ch;font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.68;color:var(--ink-body)}
.bl-hero__note{margin:clamp(22px,2.6vw,32px) 0 0;padding-top:15px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim)}

/* ---------- S02 · Featured article ---------------------------------------
   An editorial composition, not a bigger card. No panel, no radius, no shadow
   behind the type; the piece dominates through placement and scale. The 4:3
   image bleeds to the viewport's left edge so the composition reads as a
   spread rather than as two columns inside a box.

   The whole grid is one hit area: .bl-feat__a::after covers it, so hovering
   or clicking the photograph activates the same link as the title, while the
   accessible link text stays the title alone. */
.bl-feat{background:var(--bg);padding:clamp(52px,6.5vw,92px) 0 clamp(60px,7.5vw,104px)}
.bl-feat__grid{position:relative;display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(26px,4.4vw,72px);align-items:center;margin-top:clamp(30px,3.8vw,52px)}
/* IMAGE SLOT — 4:3, bled to the container edge for the asymmetric crop. */
.bl-feat__media{aspect-ratio:4/3;
  margin-left:calc(-1 * clamp(20px,5vw,72px));
  box-shadow:0 44px 96px -66px rgba(10,15,28,.5)}
/* Resting scale is the headroom the drift travels through, so the crop never
   exposes an edge. With no JS, or under reduced motion, this scale IS the
   final state. Keep the 1.09 here and in initCoParallax() in step. */
.bl-feat__layer{position:absolute;inset:0;transform:scale(1.09);will-change:transform}
/* That 1.09 pushes ~4.1% of the layer past the crop on every side. A photograph
   is meant to be cropped, but the PLACEHOLDER's label and art-direction note are
   text — without this inset they are sliced off at the bled left edge. Scoped to
   the featured layer so no other slot on the site changes. */
.bl-feat__layer .co-slot{
  padding-top:calc(clamp(16px,1.6vw,24px) + 4.5%);
  padding-left:calc(clamp(16px,1.6vw,24px) + 4.5%);
  padding-right:calc(clamp(16px,1.6vw,24px) + 4.5%)}
.bl-feat__body{position:relative}
.bl-feat__cat{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand)}
.bl-feat__title{margin:clamp(14px,1.6vw,20px) 0 0;font-weight:600;
  font-size:clamp(28px,3.5vw,50px);line-height:1.04;letter-spacing:-.036em}
.bl-feat__a{color:var(--ink);transition:color .25s var(--ease-out)}
.bl-feat__a::after{content:"";position:absolute;inset:0;z-index:3}
.bl-feat__grid:hover .bl-feat__a,.bl-feat__a:focus-visible{color:var(--brand)}
.bl-feat__excerpt{margin:clamp(16px,1.9vw,24px) 0 0;max-width:46ch;
  font-size:clamp(15.5px,1.1vw,17px);line-height:1.66;color:var(--ink-body)}
.bl-feat .bl-meta{margin-top:clamp(20px,2.4vw,28px)}
.bl-feat__cue{display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(20px,2.4vw,28px);padding-bottom:6px;
  border-bottom:1px solid var(--line-strong);color:var(--ink);
  font-size:14px;font-weight:600;
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out)}
.bl-feat__arrow{font-family:var(--mono);font-size:12px;display:inline-block;
  transition:transform .3s var(--ease-out)}
.bl-feat__grid:hover .bl-feat__cue{color:var(--brand);border-color:var(--brand)}
.bl-feat__grid:hover .bl-feat__arrow{transform:translateX(5px)}

/* ---------- S03 · The rest (editorial index) -----------------------------
   Numbered hairline rows, not a card grid. Three articles exist, so this is
   two rows; a fourth simply appears here with no markup change. */
.bl-index{background:var(--bg);padding:0 0 clamp(62px,7.5vw,104px)}
.bl-index__list{list-style:none;margin:clamp(26px,3.4vw,44px) 0 0;padding:0}
.bl-index__item{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,clamp(200px,22vw,300px));
  gap:clamp(18px,3vw,48px);align-items:start;
  border-top:1px solid var(--line);padding:clamp(26px,3.2vw,42px) 0}
/* Each row is an <article> inside an <li>, so :last-child must be scoped to the
   LIST ITEM — on the article it is always true and every row gains a border. */
.bl-index__list li:last-child .bl-index__item{border-bottom:1px solid var(--line)}
.bl-index__n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--brand);padding-top:4px}
.bl-index__cat{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim)}
.bl-index__h{margin:clamp(10px,1.2vw,14px) 0 0;font-weight:600;
  font-size:clamp(21px,2.4vw,34px);line-height:1.1;letter-spacing:-.03em}
.bl-index__a{color:var(--ink);transition:color .25s var(--ease-out)}
.bl-index__a::after{content:"";position:absolute;inset:0;z-index:3}
.bl-index__item:hover .bl-index__a,.bl-index__a:focus-visible{color:var(--brand)}
.bl-index__p{margin:clamp(12px,1.4vw,16px) 0 0;max-width:54ch;
  font-size:15.5px;line-height:1.64;color:var(--ink-body)}
.bl-index__meta{margin-top:clamp(14px,1.8vw,20px)}
.bl-index__arrow{font-family:var(--mono);font-size:12px;color:var(--brand);
  display:inline-block;transition:transform .3s var(--ease-out)}
.bl-index__item:hover .bl-index__arrow{transform:translateX(5px)}
/* IMAGE SLOT — 3:2 index crop. */
.bl-index__media{aspect-ratio:3/2}

/* ---------- S04 · Compact CTA -------------------------------------------
   Shared by the listing and every article (includes/blog-cta.php). Small on
   purpose. No newsletter field: no subscription workflow exists to honour it. */
.bl-cta{position:relative;background:var(--surface-cool);border-top:1px solid var(--line);
  padding:clamp(56px,7vw,92px) 0}
.bl-cta__inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(26px,4vw,60px);align-items:center}
.bl-cta__title{margin:0;font-weight:600;color:var(--ink);max-width:22ch;
  font-size:clamp(25px,2.9vw,40px);line-height:1.08;letter-spacing:-.032em}
.bl-cta__copy{margin:16px 0 0;max-width:48ch;font-size:clamp(15px,1.1vw,16.5px);
  line-height:1.64;color:var(--ink-body)}
.bl-cta__actions{display:flex;flex-wrap:wrap;gap:14px}

/* ==========================================================================
   ARTICLE  (/blog/<slug>/)
   ========================================================================== */
.bl-article{display:block}
.bl-article__head{padding:calc(var(--header-h) + clamp(40px,5.2vw,80px)) 0 clamp(26px,3.2vw,40px)}
/* The reading column. Centred rather than left-aligned: the images and the
   chain figure already break wider, which is where the asymmetry comes from,
   so the prose itself can sit where it is most comfortable to read. */
.bl-article__measure{max-width:720px;margin-inline:auto}
.bl-article__title{margin:0;font-weight:600;color:var(--ink);
  font-size:clamp(31px,3.9vw,54px);line-height:1.04;letter-spacing:-.036em;text-wrap:balance}
.bl-article__deck{margin:clamp(18px,2.2vw,28px) 0 0;font-size:clamp(17px,1.35vw,20px);
  line-height:1.52;letter-spacing:-.014em;font-weight:500;color:var(--ink)}
.bl-article__head .bl-meta{margin-top:clamp(20px,2.6vw,30px);padding-top:16px;
  border-top:1px solid var(--line)}
/* IMAGE SLOT — 16:9 hero, container width. */
.bl-article__media{aspect-ratio:16/9;margin-bottom:clamp(34px,4.4vw,64px);
  box-shadow:0 44px 96px -70px rgba(10,15,28,.45)}

/* ---------- Article prose ------------------------------------------------
   Readability first. Body text is 17px/1.72; headings step down from the H1
   rather than competing with it, and no paragraph is oversized. */
.bl-prose{font-size:clamp(16px,1.12vw,17px);line-height:1.72;color:var(--ink-body)}
.bl-prose > p{margin:0 0 1.32em}
.bl-prose > :last-child{margin-bottom:0}
.bl-prose h2{margin:clamp(38px,4.2vw,60px) 0 clamp(14px,1.5vw,18px);color:var(--ink);
  font-weight:600;font-size:clamp(21px,2.05vw,28px);line-height:1.2;letter-spacing:-.026em}
/* Short rule above every H2: the article's structural rhythm, and the reason
   the body does not need boxes or background tints to feel sectioned. */
.bl-prose h2::before{content:"";display:block;width:34px;height:1px;
  background:var(--line-strong);margin-bottom:clamp(16px,1.8vw,22px)}
.bl-prose h3{margin:clamp(28px,3vw,38px) 0 10px;color:var(--ink);font-weight:600;
  font-size:clamp(17.5px,1.5vw,20px);line-height:1.28;letter-spacing:-.02em}
.bl-prose strong{color:var(--ink);font-weight:600}
.bl-prose a{color:var(--brand);border-bottom:1px solid rgba(0,51,204,.32);
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out)}
.bl-prose a:hover{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}

/* Lists: a cyan tick rather than a bullet, so the prose keeps the site's
   hairline language instead of importing default UA list styling. */
.bl-prose__list{margin:0 0 1.32em;padding:0;list-style:none;display:grid;
  gap:clamp(12px,1.4vw,16px)}
.bl-prose__list li{position:relative;padding-left:26px}
.bl-prose__list li::before{content:"";position:absolute;left:0;top:.62em;
  width:10px;height:1px;background:var(--cyan)}

.bl-prose blockquote{margin:clamp(30px,3.6vw,46px) 0;padding-left:clamp(20px,2.4vw,30px);
  border-left:2px solid var(--brand);color:var(--ink);
  font-size:clamp(18px,1.7vw,23px);line-height:1.42;letter-spacing:-.02em;font-weight:500}
.bl-prose blockquote p{margin:0}

.bl-prose figure{margin:clamp(30px,3.6vw,46px) 0}
.bl-prose figcaption{margin-top:12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);line-height:1.5}

/* Closing contextual note. One per article, at the end, and the only place an
   article links to a product page — the piece educates first. */
.bl-note{margin:clamp(40px,4.8vw,66px) 0 0;padding:clamp(20px,2.4vw,28px);
  background:var(--surface-warm);border-left:2px solid var(--brand)}
.bl-note p{margin:0;font-size:15.5px;line-height:1.64;color:var(--ink-body)}

/* Illustrative sequence (article 03). Typography, not a diagram: the cyan tick
   lengthens at each step so six items read as one journey. Breaks wider than
   the prose measure, and its caption states plainly that it is illustrative. */
.bl-chain{margin:clamp(32px,4vw,52px) 0;padding:0}
.bl-chain__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,26px) clamp(14px,2vw,26px)}
.bl-chain__step{position:relative;border-top:1px solid var(--line);padding-top:14px}
.bl-chain__step::before{content:"";position:absolute;top:-1px;left:0;height:1px;background:var(--cyan)}
.bl-chain__step:nth-child(1)::before{width:18px}
.bl-chain__step:nth-child(2)::before{width:32px}
.bl-chain__step:nth-child(3)::before{width:46px}
.bl-chain__step:nth-child(4)::before{width:60px}
.bl-chain__step:nth-child(5)::before{width:74px}
.bl-chain__step:nth-child(6)::before{width:88px}
.bl-chain__i{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--brand)}
.bl-chain__w{display:block;margin-top:8px;font-weight:600;color:var(--ink);
  font-size:clamp(14px,1.15vw,16.5px);line-height:1.24;letter-spacing:-.012em}
.bl-chain__cap{margin-top:clamp(16px,1.8vw,22px)}

/* ---------- Related ------------------------------------------------------
   The other two pieces, compact. No recommendation engine: with a three-piece
   archive, "the other two" is the correct answer. */
.bl-related{margin-top:clamp(54px,6.6vw,92px);padding-top:clamp(40px,5vw,70px)}
.bl-related > .container{border-top:1px solid var(--line);padding-top:clamp(30px,3.6vw,46px)}
.bl-related__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.bl-related__title{margin:0;font-weight:600;color:var(--ink);
  font-size:clamp(20px,1.9vw,26px);line-height:1.14;letter-spacing:-.026em}
.bl-related__head .link-underline{margin-top:0}
.bl-related__list{list-style:none;margin:clamp(24px,3vw,38px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.bl-related__item{position:relative;border-top:1px solid var(--line);padding-top:clamp(18px,2vw,24px)}
.bl-related__cat{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim)}
.bl-related__h{margin:clamp(10px,1.2vw,14px) 0 0;font-weight:600;
  font-size:clamp(19px,1.8vw,24px);line-height:1.16;letter-spacing:-.026em}
.bl-related__a{color:var(--ink);transition:color .25s var(--ease-out)}
.bl-related__a::after{content:"";position:absolute;inset:0;z-index:3}
.bl-related__item:hover .bl-related__a,.bl-related__a:focus-visible{color:var(--brand)}
.bl-related__x{display:flex;align-items:center;gap:10px;
  margin:clamp(14px,1.6vw,18px) 0 0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.bl-related__arrow{color:var(--brand);font-size:12px;display:inline-block;
  transition:transform .3s var(--ease-out)}
.bl-related__item:hover .bl-related__arrow{transform:translateX(5px)}

/* ==========================================================================
   BLOG · responsive
   The reading column and the article titles are the two things protected at
   every width; the editorial crops re-shape around them.
   ========================================================================== */
@media (max-width:1024px){
  .bl-hero__grid{grid-template-columns:1fr;gap:clamp(26px,3.6vw,38px);align-items:start}
  .bl-hero__copy{max-width:60ch}
  .bl-feat__grid{grid-template-columns:1fr;gap:clamp(24px,3.4vw,36px)}
  /* Photograph leads on tablet, and un-bleeds to BOTH edges so the crop stays
     a full-width moment rather than a stranded panel. */
  .bl-feat__media{order:-1;aspect-ratio:16/10;
    margin-left:calc(-1 * clamp(20px,5vw,72px));
    margin-right:calc(-1 * clamp(20px,5vw,72px))}
  .bl-feat__title{font-size:clamp(28px,4.4vw,40px)}
  .bl-cta__inner{grid-template-columns:1fr;gap:clamp(22px,3vw,30px);align-items:start}
}
@media (max-width:900px){
  .bl-index__item{grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.4vw,22px)}
  .bl-index__n{display:none}          /* decorative, and already aria-hidden */
  .bl-index__media{order:-1;aspect-ratio:16/9}
  .bl-index__h{font-size:clamp(21px,3.4vw,30px)}
  .bl-related__list{grid-template-columns:1fr;gap:0}
  .bl-related__item{padding-bottom:clamp(18px,2.4vw,24px)}
  .bl-related__list li:last-child .bl-related__item{border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  .bl-hero__title{font-size:clamp(34px,8.4vw,44px)}
  .bl-chain__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Two columns: reset the tick so it still lengthens down the rows. */
  .bl-chain__step:nth-child(3)::before{width:18px}
  .bl-chain__step:nth-child(4)::before{width:32px}
  .bl-chain__step:nth-child(5)::before{width:18px}
  .bl-chain__step:nth-child(6)::before{width:32px}
}
@media (max-width:560px){
  /* Mobile keeps the safe box: no edge bleeds, no oversized type. */
  .bl-feat__media{aspect-ratio:4/3;margin-left:0;margin-right:0}
  .bl-feat__title{font-size:clamp(26px,7vw,32px)}
  .bl-article__title{font-size:clamp(29px,7.4vw,36px)}
  .bl-article__deck{font-size:17px}
  .bl-index__media{aspect-ratio:3/2}
  .bl-cta__actions{flex-direction:column;align-items:stretch;width:100%}
  .bl-cta__actions .btn{width:100%}
  .bl-note{padding-left:clamp(16px,4vw,20px)}
}

/* ---------- Blog · reduced motion ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .bl-feat__layer{transform:scale(1.09)!important}
  .bl-feat__arrow,.bl-index__arrow,.bl-related__arrow{transition:none!important}
}