/* ==========================================================================
   Quwa Smart Services: design system (white)
   Light-first, large-type, motion-on-scroll. Built to feel engineered.

   The dark original alternated dark sections with light .inverse ones. Here the
   base surface is white and .inverse is a faint blue-grey wash, so the same
   alternation survives without either surface going dark. Accent hues are the
   darkened variants of the brand palette; the bright cyan/teal/amber of the
   dark theme fall well below 4.5:1 on white and could not carry text.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* Ink ramp: every step clears 4.1:1 on white, so no tier is unreadable. */
  --ink:#0d1219;            /* headings          16.2:1 */
  --ink-2:#425163;          /* body / lede        8.2:1 */
  --ink-3:#5d6a7a;          /* captions           5.5:1 */
  --ink-4:#707d8d;          /* micro-labels       4.2:1 */

  --bg:#ffffff;             /* section surface */
  --bg-1:#ffffff;           /* card surface: border and shadow separate it */
  --bg-2:#f4f7fa;           /* recessed: table head, chips, readouts, formula */
  --bg-3:#e8edf3;           /* deepest: range tracks */
  --line:rgba(11,20,33,.11);
  --line-2:rgba(11,20,33,.20);

  /* Darkened brand palette. --brand doubles as a fill under white text and as
     accent text on white (5.3:1 either way), so --brand-3 aliases it rather
     than being the lighter tint it was on dark. */
  --brand:#0b7592;          /* QSS cyan, darkened */
  --brand-2:#085a71;        /* hover / pressed */
  --brand-3:#0b7592;        /* accent text */
  --teal:#0c8465;
  --warm:#b35c00;           /* thermal warm */
  --hot:#b83a14;
  --violet:#5b4bd6;

  --ok:#0c8465;
  --warn:#9a6a00;
  --bad:#c62f1c;

  --wrap:1180px;
  --wrap-narrow:760px;
  --r:16px;
  --r-lg:26px;
  --r-sm:10px;

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --shadow:0 1px 2px rgba(11,20,33,.05),0 14px 40px -16px rgba(11,20,33,.18);
  --glow:0 0 0 1px rgba(11,117,146,.20),0 18px 60px -20px rgba(11,117,146,.28);
}

/* Alternating sections: a faint blue-grey wash that lets white cards sit on top
   of it. Only the surfaces shift; the ink ramp and accents are already tuned
   for light and are inherited unchanged. */
.inverse{
  --bg:#f5f8fa;
  --bg-1:#ffffff;
  --bg-2:#eef3f7;
  --bg-3:#e2e9f0;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv02","cv03","cv04","ss01";
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 44px,var(--wrap-narrow));margin-inline:auto}
.section{position:relative;padding:clamp(72px,10vw,150px) 0;background:var(--bg);color:var(--ink)}
.section--tight{padding:clamp(52px,6vw,90px) 0}
.section--flush{padding-top:0}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* ---------- type ---------- */
.eyebrow{
  font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-3);display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6;flex:none}
.eyebrow--plain::before{display:none}

.d1{font-size:clamp(2.9rem,7.4vw,5.6rem);line-height:1.02;letter-spacing:-.035em;font-weight:700}
.h1{font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.06;letter-spacing:-.03em;font-weight:700}
.h2{font-size:clamp(1.65rem,3.1vw,2.6rem);line-height:1.12;letter-spacing:-.024em;font-weight:660}
.h3{font-size:clamp(1.16rem,1.7vw,1.42rem);line-height:1.24;letter-spacing:-.014em;font-weight:640}
.h4{font-size:1.02rem;line-height:1.32;letter-spacing:-.008em;font-weight:640}

.lede{font-size:clamp(1.08rem,1.75vw,1.42rem);line-height:1.5;color:var(--ink-2);letter-spacing:-.012em}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.tiny{font-size:.8rem;line-height:1.5;color:var(--ink-3)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mw-60{max-width:60ch}.mw-52{max-width:52ch}.mw-44{max-width:44ch}
.center{text-align:center}
.center .eyebrow{justify-content:center}

.grad{
  background:linear-gradient(98deg,#0b7592 0%,#0e8fb4 46%,#0c8465 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:999px;
  font-weight:580;font-size:.95rem;letter-spacing:-.005em;
  border:1px solid transparent;
  transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s,opacity .25s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 8px 26px -10px rgba(11,117,146,.45)}
.btn--primary:hover{background:var(--brand-2);box-shadow:0 14px 34px -10px rgba(11,117,146,.5)}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--brand);background:rgba(11,117,146,.07)}
.btn--text{padding:0;color:var(--brand-3);font-weight:580}
.btn--text:hover{transform:none;gap:13px}
.btn__arrow{transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btnrow{display:flex;flex-wrap:wrap;gap:13px;align-items:center}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s;
}
.nav.is-stuck{background:rgba(255,255,255,.92);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:26px;height:62px}
.brand{display:flex;align-items:center;gap:11px;font-weight:680;letter-spacing:-.022em;font-size:1.06rem;color:var(--ink);flex:none}
.brand__mark{width:27px;height:27px;flex:none}
.brand small{display:block;font:500 10px/1 var(--mono);letter-spacing:.13em;color:var(--ink-3);text-transform:uppercase;margin-top:3px}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__link{
  padding:8px 14px;border-radius:999px;font-size:.9rem;font-weight:520;color:var(--ink-2);
  transition:color .2s,background .2s;
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--ink);background:rgba(11,20,33,.06)}
.nav__cta{margin-left:8px}
.nav__toggle{display:none;margin-left:auto;padding:8px;border-radius:9px}
.nav__toggle:hover{background:rgba(11,20,33,.06)}

/* dropdown */
.navdrop{position:relative}
.navdrop__panel{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-8px);
  width:min(92vw,660px);padding:14px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.97);backdrop-filter:blur(24px);
  border:1px solid var(--line-2);box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
}
.navdrop:hover .navdrop__panel,.navdrop:focus-within .navdrop__panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.navdrop__item{display:block;padding:11px 13px;border-radius:12px;transition:background .18s}
.navdrop__item:hover{background:rgba(11,20,33,.05)}
.navdrop__item b{display:block;font-size:.92rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.navdrop__item span{display:block;font-size:.79rem;color:var(--ink-3);margin-top:2px;line-height:1.4}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,860px);display:flex;align-items:center;overflow:hidden;background:var(--bg)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 0%,transparent 26%,rgba(255,255,255,.72) 78%,var(--bg) 100%),
    linear-gradient(180deg,rgba(255,255,255,.62) 0%,transparent 28%,transparent 60%,var(--bg) 100%);
}
.hero__in{position:relative;z-index:2;padding:120px 0 90px;width:100%}
.hero__badge{
  display:inline-flex;align-items:center;gap:9px;padding:6px 15px 6px 7px;border-radius:999px;
  background:rgba(11,20,33,.04);border:1px solid var(--line-2);
  font-size:.79rem;color:var(--ink-2);margin-bottom:30px;backdrop-filter:blur(10px);
}
.hero__badge b{
  padding:3px 9px;border-radius:999px;background:var(--brand);color:#fff;
  font:700 10px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;flex:none;
}
.hero .lede{max-width:60ch;margin-top:26px}
.hero .btnrow{margin-top:40px}

/* The hero headline is a long one, and its manual <br>s are tuned for the
   display size. Once the column is narrow enough that the text wraps on its
   own, those breaks compound with the natural wrapping and the headline grows
   to eight ragged lines, so drop them and let it wrap, then ease the floor of
   the clamp so six words do not fill a phone screen. Scoped to .hero: the other
   pages' d1 headings are short and already wrap cleanly. */
@media (max-width:820px){ .hero .d1 br{display:none} }
@media (max-width:560px){ .hero .d1{font-size:clamp(2.05rem,8.4vw,2.75rem)} }

/* scroll cue */
.scrollcue{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);
}
.scrollcue i{display:block;width:1px;height:38px;background:linear-gradient(var(--ink-4),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}

/* ---------- stat rows ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--bg-1);padding:26px 22px}
.stat__v{font:700 clamp(1.7rem,3.4vw,2.5rem)/1 var(--sans);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat__v .u{font-size:.5em;font-weight:600;color:var(--ink-3);margin-left:5px;letter-spacing:0}
.stat__l{margin-top:9px;font-size:.83rem;color:var(--ink-3);line-height:1.4}
.stat--brand .stat__v{color:var(--brand-3)}
.stat--warn .stat__v{color:var(--warn)}
.stat--bad .stat__v{color:var(--bad)}

/* ---------- cards ---------- */
/* Explicit column counts. auto-fit packed six-card sections as 4+2, which reads
   as a mistake rather than a layout. */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:660px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
}

.card{
  position:relative;background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px;overflow:hidden;
  transition:border-color .3s,transform .4s var(--ease),background .3s;
}
.card--link:hover{border-color:var(--line-2);transform:translateY(-3px)}
.card__ic{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(140deg,rgba(11,117,146,.13),rgba(12,132,101,.08));
  border:1px solid rgba(11,117,146,.20);color:var(--brand-3);
}
.card__ic svg{width:19px;height:19px}
.card .h3{margin-bottom:9px}
.card p{color:var(--ink-2);font-size:.95rem}
.card__tag{font:600 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--brand-3);margin-bottom:13px;display:block}
.card__foot{margin-top:20px;padding-top:17px;border-top:1px solid var(--line)}

.ticks{margin-top:18px;display:grid;gap:9px}
.ticks li{position:relative;padding-left:23px;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.ticks li::before{
  content:"";position:absolute;left:0;top:.58em;width:11px;height:6px;
  border-left:1.6px solid var(--brand);border-bottom:1.6px solid var(--brand);
  transform:rotate(-45deg);
}

/* severity pills */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font:650 10px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid currentColor;
}
.pill--crit{color:var(--bad);background:rgba(198,47,28,.07)}
.pill--high{color:var(--warn);background:rgba(154,106,0,.08)}
.pill--med{color:var(--brand-3);background:rgba(11,117,146,.08)}
.pill--strat{color:var(--violet);background:rgba(91,75,214,.08)}
.pill--ok{color:var(--ok);background:rgba(12,132,101,.08)}

/* ---------- figure / media ---------- */
.fig{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--bg-1)}
.fig img{width:100%;display:block}
.fig figcaption{padding:15px 20px;font-size:.83rem;color:var(--ink-3);border-top:1px solid var(--line);line-height:1.5}
.fig--ir img{filter:saturate(1.06) contrast(1.03)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,64px);align-items:center}
.split--wide{grid-template-columns:1.1fr .9fr}
.split--rev>*:first-child{order:2}

/* ---------- video (click-to-load facade) ----------
   Nothing loads from Vimeo until the visitor asks for it: the poster is
   self-hosted and the iframe is only injected on play. The play control is the
   brand mark itself: the aperture is already a triangle in a ring. */
.video{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:#000;isolation:isolate;
}
.video__ratio{position:relative;width:100%;padding-top:56.25%}
.video__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out),filter .6s var(--ease);
}
.video:hover .video__poster{transform:scale(1.03);filter:brightness(.82)}
.video__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,11,.34) 0%,rgba(5,7,11,.05) 34%,rgba(5,7,11,.72) 100%);
}
.video__btn{
  position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;
  border:0;background:none;cursor:pointer;z-index:2;
}
.video__mark{width:88px;height:88px;filter:drop-shadow(0 10px 34px rgba(0,0,0,.6));
  transition:transform .45s var(--ease-out)}
.video__btn:hover .video__mark{transform:scale(1.09)}
.video__btn:active .video__mark{transform:scale(1.02)}
.video__ring{transform-origin:50% 50%;transition:stroke .35s}
.video__btn:hover .video__ring{stroke:#fff}
.video__meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:26px 28px;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
}
.video__t{font-size:1.06rem;font-weight:620;letter-spacing:-.014em;color:#fff;line-height:1.3}
.video__s{font-size:.8rem;color:rgba(255,255,255,.68);margin-top:5px}
.video__dur{
  font:600 .74rem/1 var(--mono);letter-spacing:.08em;color:#fff;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.24);
  padding:6px 11px;border-radius:999px;backdrop-filter:blur(8px);flex:none;
}
.video.is-live .video__poster,.video.is-live .video__scrim,
.video.is-live .video__btn,.video.is-live .video__meta{display:none}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.video__cap{
  padding:15px 20px;font-size:.83rem;color:var(--ink-3);line-height:1.5;
  border-top:1px solid var(--line);background:var(--bg-1);
}
@media (max-width:640px){ .video__mark{width:62px;height:62px} .video__meta{padding:18px} }

/* ---------- news ---------- */
.news{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.newsitem{
  background:var(--bg-1);padding:26px 28px;display:grid;
  grid-template-columns:132px 1fr auto;gap:26px;align-items:start;
  transition:background .22s;
}
a.newsitem:hover{background:var(--bg-2)}
.newsitem__d{font:600 .78rem/1.5 var(--mono);letter-spacing:.06em;color:var(--brand-3);padding-top:3px}
.newsitem__k{font:600 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:9px}
.newsitem__t{font-size:1.06rem;font-weight:620;letter-spacing:-.014em;line-height:1.32}
.newsitem__b{font-size:.92rem;color:var(--ink-2);margin-top:8px;line-height:1.55;max-width:70ch}
.newsitem__go{color:var(--brand-3);font-size:1.1rem;padding-top:2px;transition:transform .3s var(--ease)}
a.newsitem:hover .newsitem__go{transform:translateX(4px)}
@media (max-width:720px){
  .newsitem{grid-template-columns:1fr;gap:10px}
  .newsitem__go{display:none}
}


/* ---------- presence map ---------- */
/* Drawn light: a pale grey landmass on a near-white panel. It still carries its
   own surface rather than inheriting the section's, so it reads on both the
   white and the .inverse wash; that portability is the point, keep it. */
.map{
  position:relative;display:grid;grid-template-columns:1fr 260px;gap:28px;align-items:center;
  background:#fbfcfe;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(20px,3vw,34px);color:var(--ink);
}
.map__svg{width:100%;height:auto;overflow:visible}
.map__land{fill:rgba(11,20,33,.05);stroke:rgba(11,20,33,.22);stroke-width:1.4;stroke-linejoin:round}
.map__lake{fill:#fff;stroke:rgba(11,20,33,.10);stroke-width:1}
.map__halo{fill:var(--brand);opacity:.14;transition:opacity .25s,r .25s var(--ease)}
.map__dot{fill:var(--brand);transition:fill .25s,r .25s var(--ease)}
.map__lbl{fill:var(--ink-2);font-family:var(--sans);font-size:15px;font-weight:600;
  paint-order:stroke;stroke:#fbfcfe;stroke-width:4px;stroke-linejoin:round;transition:fill .25s}
.map__pin{cursor:pointer;outline:none}
.map__pin:hover .map__halo,.map__pin.is-on .map__halo{opacity:.34}
.map__pin:hover .map__dot,.map__pin.is-on .map__dot{fill:var(--brand-3)}
.map__pin:hover .map__lbl,.map__pin.is-on .map__lbl{fill:var(--ink)}
.map__pin:focus-visible .map__halo{opacity:.4}
.map__read{border-left:1px solid var(--line);padding-left:22px}
.map__city{font-size:1.24rem;font-weight:680;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.map__city span{display:block;font:600 10px/1 var(--mono);letter-spacing:.14em;
  color:var(--brand-3);margin-top:8px}
.map__city--idle{color:var(--ink)}
.map__note{font-size:.9rem;line-height:1.55;color:var(--ink-2);margin-top:14px}
@media (max-width:760px){
  .map{grid-template-columns:1fr;gap:20px}
  .map__read{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:18px}
}
@media (max-width:900px){
  .map{grid-template-columns:1fr;gap:18px}
  .map__read{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}
  .map__lbl{font-size:19px}
}

/* ---------- client trust strip ----------
   Several supplied marks carry a baked-in white background that shows as a grey
   box on a dark section, and the darker wordmarks disappear entirely. The strip
   therefore brings its own white surface rather than relying on the section it
   happens to sit in. */
/* A centred flex wrap rather than a fixed grid, because the count is no longer a
   multiple of the row length: 14 marks lay out 5 / 5 / 4 and the short last row
   centres itself instead of sitting hard against the left with an empty cell.
   The 195px basis reproduces what repeat(5,1fr) gave at 1180px, which is about
   the width the widest mark (Gateway, 4.46:1) needs at the full 44px cap. It is
   195 and not 200 because 5*200 + 4*30 is exactly the 1120px available, and
   sub-pixel rounding then wrapped a row early -- leaving 25px of slack keeps five
   per row deterministic.
   flex-grow stays 0 deliberately: if the last row stretched to fill, its four
   logos would render larger than the ten above them. */
.logos{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:34px 30px;
  background:#fff;border:1px solid rgba(6,12,20,.10);
  border-radius:var(--r-lg);padding:clamp(22px,3vw,34px) clamp(20px,3vw,30px);
}
.logo{display:flex;align-items:center;justify-content:center;height:52px;flex:0 1 195px}
.logo img{
  max-height:44px;width:auto;max-width:100%;object-fit:contain;
  filter:saturate(.88);opacity:.9;
  transition:filter .3s var(--ease),opacity .3s var(--ease),transform .4s var(--ease);
}
.logo:hover img{filter:none;opacity:1;transform:scale(1.05)}
@media (max-width:900px){ .logos{gap:28px 22px} .logo{flex-basis:170px} }
@media (max-width:560px){ .logo{flex-basis:150px} .logo img{max-height:36px} }

/* ---------- news posts (picture-led archive) ---------- */
.postgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.post{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .3s,transform .4s var(--ease);
}
.post:hover{border-color:var(--line-2);transform:translateY(-3px)}
.post__fig{background:var(--bg-2);overflow:hidden}
.post__fig img{width:100%;height:200px;object-fit:cover;display:block;
  transition:transform .8s var(--ease-out)}
.post:hover .post__fig img{transform:scale(1.04)}
.post__b{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.post__meta{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.post__kind{
  font:640 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-3);border:1px solid rgba(11,117,146,.26);
  background:rgba(11,117,146,.07);padding:5px 9px;border-radius:999px;
}
.post__date{font:500 .78rem/1 var(--mono);color:var(--ink-4)}
.post__t{font-size:1.08rem;font-weight:640;letter-spacing:-.016em;line-height:1.3;color:var(--ink)}
.post--slim{justify-content:flex-start}
.post--slim .post__b{padding:22px 24px}
.post--slim .post__t{font-size:1rem}
.post__ex{margin-top:11px;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
.post__go{
  margin-top:16px;display:inline-flex;align-items:center;gap:7px;
  font:580 .85rem/1 var(--sans);color:var(--brand-3);
}
.post__go i{font-style:normal;transition:transform .3s var(--ease)}
.post:hover .post__go i{transform:translateX(4px)}
.post__src{
  margin-top:12px;align-self:flex-start;font:500 .8rem/1 var(--sans);
  color:var(--ink-3);border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.post__src:hover{color:var(--brand-3);border-color:var(--brand-3)}
.chip.is-on{border-color:var(--brand);color:var(--brand-3);background:rgba(11,117,146,.07)}
button.chip{cursor:pointer}
@media (max-width:1000px){ .postgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:660px){ .postgrid{grid-template-columns:minmax(0,1fr)} }

/* ---------- sticky pinned scroll ---------- */
.pin{position:relative}
.pin__stage{position:sticky;top:62px;height:calc(100svh - 62px);display:flex;align-items:center;overflow:hidden}
.pin__steps{position:relative;z-index:2}
.pin__step{min-height:88svh;display:flex;align-items:center;padding:20px 0}
.pin__step .card{background:rgba(255,255,255,.86);backdrop-filter:blur(16px);max-width:430px}

/* ---------- scroll reveal ---------- */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
[data-rv].in{opacity:1;transform:none}
[data-rv-d="1"]{transition-delay:.08s}
[data-rv-d="2"]{transition-delay:.16s}
[data-rv-d="3"]{transition-delay:.24s}
[data-rv-d="4"]{transition-delay:.32s}
[data-rv-d="5"]{transition-delay:.40s}
[data-rv-d="6"]{transition-delay:.48s}

/* ---------- simulator ---------- */
.sim{
  background:linear-gradient(168deg,var(--bg-1),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.sim__head{padding:24px 28px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between}
.sim__head .h3{margin:0}
.sim__body{display:grid;grid-template-columns:300px 1fr;gap:0}
.sim__controls{padding:26px 28px;border-right:1px solid var(--line);display:grid;gap:22px;align-content:start}
.sim__view{padding:26px 28px;min-width:0}

.ctl{display:grid;gap:9px}
.ctl__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ctl__lab{font-size:.85rem;font-weight:560;color:var(--ink-2)}
.ctl__val{font:600 .92rem/1 var(--mono);color:var(--brand-3);font-variant-numeric:tabular-nums}
.ctl__hint{font-size:.74rem;color:var(--ink-4);line-height:1.45}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:var(--bg-3);border:1px solid var(--line)}
input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:var(--bg-3);border:1px solid var(--line)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;margin-top:-7.5px;
  background:var(--brand);border:2px solid var(--bg-1);
  box-shadow:0 0 0 1px var(--brand),0 3px 10px rgba(11,20,33,.22);
  transition:transform .18s var(--ease);
}
input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--brand);border:2px solid var(--bg-1);
  box-shadow:0 0 0 1px var(--brand);
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.18)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.05)}

/* toggle list */
.tog{display:flex;align-items:flex-start;gap:12px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);cursor:pointer;transition:border-color .2s,background .2s;text-align:left;width:100%}
.tog:hover{border-color:var(--line-2)}
.tog.on{border-color:rgba(11,117,146,.40);background:rgba(11,117,146,.06)}
.tog__box{
  flex:none;width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line-2);
  display:grid;place-items:center;margin-top:1px;transition:background .2s,border-color .2s;
}
.tog.on .tog__box{background:var(--brand);border-color:var(--brand)}
.tog__box svg{width:11px;height:11px;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s var(--ease);color:#fff}
.tog.on .tog__box svg{opacity:1;transform:none}
.tog__t{font-size:.87rem;font-weight:550;line-height:1.35;color:var(--ink)}
.tog__s{font:500 .74rem/1.4 var(--mono);color:var(--ink-3);margin-top:3px;display:block}

/* readouts */
.reads{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:22px}
.read{background:var(--bg-2);padding:16px 17px}
.read__l{font:600 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:9px}
.read__v{font:700 clamp(1.28rem,2.5vw,1.75rem)/1 var(--sans);letter-spacing:-.028em;font-variant-numeric:tabular-nums;transition:color .3s}
.read__v .u{font-size:.52em;font-weight:600;color:var(--ink-3);margin-left:4px;letter-spacing:0}
.read__s{font-size:.75rem;color:var(--ink-3);margin-top:6px;line-height:1.4}
.read--brand .read__v{color:var(--brand-3)}
.read--ok .read__v{color:var(--ok)}
.read--warn .read__v{color:var(--warn)}
.read--bad .read__v{color:var(--bad)}

.verdict{
  display:flex;align-items:center;gap:11px;padding:13px 17px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg-2);font-size:.88rem;line-height:1.45;margin-top:20px;
}
.verdict b{font-weight:640}
.verdict.ok{border-color:rgba(12,132,101,.32);background:rgba(12,132,101,.06)}
.verdict.bad{border-color:rgba(198,47,28,.32);background:rgba(198,47,28,.06)}
.verdict.warn{border-color:rgba(154,106,0,.32);background:rgba(154,106,0,.07)}
.verdict__dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}

.formula{
  font-family:var(--mono);font-size:.85rem;line-height:1.85;color:var(--ink-2);
  padding:15px 18px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);
  overflow-x:auto;white-space:nowrap;
}
.formula b{color:var(--brand-3);font-weight:600}
.formula em{color:var(--warm);font-style:normal}

/* ---------- charts ---------- */
.chart{width:100%;overflow:visible}
.chart text{font-family:var(--mono);font-size:9.5px;fill:var(--ink-4)}
.chart .ax{stroke:var(--line);stroke-width:1}
.chart .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.chart .lbl{fill:var(--ink-3);font-size:10px}
.chart__legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.chart__legend span{display:flex;align-items:center;gap:7px;font-size:.79rem;color:var(--ink-3)}
.chart__legend i{width:11px;height:11px;border-radius:3px;flex:none}
.chart-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tbl{min-width:560px;font-size:.9rem}
.tbl th,.tbl td{padding:13px 17px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{
  font:640 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
  background:var(--bg-2);white-space:nowrap;
}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .18s}
.tbl tbody tr:hover{background:rgba(11,20,33,.025)}
.tbl .num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.is-off td{color:var(--ink-4)}

/* ---------- prose (insights) ---------- */
.prose{font-size:1.08rem;line-height:1.72;color:var(--ink-2)}
.prose>*+*{margin-top:1.25em}
.prose h2{font-size:clamp(1.42rem,2.5vw,1.95rem);line-height:1.18;letter-spacing:-.022em;font-weight:660;color:var(--ink);margin-top:2.1em}
.prose h3{font-size:1.16rem;line-height:1.32;font-weight:640;color:var(--ink);margin-top:1.7em}
.prose strong{color:var(--ink);font-weight:620}
.prose a{color:var(--brand-3);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(11,117,146,.4)}
.prose a:hover{text-decoration-color:currentColor}
.prose ul{display:grid;gap:.6em;padding-left:0}
.prose ul li{position:relative;padding-left:24px}
.prose ul li::before{content:"";position:absolute;left:5px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--brand);opacity:.75}
.prose ol{counter-reset:n;display:grid;gap:.6em}
.prose ol li{position:relative;padding-left:32px;counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:.1em;font:640 .78rem/1.6 var(--mono);color:var(--brand-3)}
.prose blockquote{
  border-left:2px solid var(--brand);padding:4px 0 4px 24px;margin-left:0;
  font-size:1.14rem;line-height:1.55;color:var(--ink);letter-spacing:-.012em;
}
.prose figure{margin:2.2em 0}
.prose .pull{
  font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.36;letter-spacing:-.02em;color:var(--ink);
  font-weight:600;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:2em 0;
}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--bg-2);padding:2px 6px;border-radius:5px;border:1px solid var(--line);color:var(--brand-3)}

.postmeta{display:flex;flex-wrap:wrap;gap:9px 18px;align-items:center;font-size:.83rem;color:var(--ink-3)}
.postmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4)}

.callout{
  border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;background:var(--bg-1);
  display:grid;gap:9px;
}
.callout--brand{border-color:rgba(11,117,146,.26);background:rgba(11,117,146,.05)}
.callout__t{font:640 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--brand-3)}

/* ---------- timeline ---------- */
.tl{display:grid;gap:0;position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl__i{position:relative;padding:16px 0}
.tl__i::before{content:"";position:absolute;left:-24px;top:23px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--brand)}
.tl__d{font:640 .78rem/1 var(--mono);color:var(--brand-3);letter-spacing:.04em}
.tl__l{margin-top:6px;font-size:.95rem;color:var(--ink)}

/* ---------- footer ---------- */
.foot{background:var(--bg-1);border-top:1px solid var(--line);padding:64px 0 34px}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px}
.foot__t{font:640 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:17px}
.foot__l{display:grid;gap:11px}
.foot__l a{font-size:.9rem;color:var(--ink-2);transition:color .2s}
.foot__l a:hover{color:var(--brand-3)}
.foot__bot{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:.81rem;color:var(--ink-4)}

/* ---------- q-peak cross-link band ---------- */
.qpeak{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid rgba(12,132,101,.24);
  background:linear-gradient(126deg,rgba(12,132,101,.09),rgba(11,117,146,.06) 48%,transparent 78%),var(--bg-1);
  padding:clamp(30px,4.4vw,54px);
}
.qpeak::before{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(12,132,101,.14),transparent 68%);pointer-events:none;
}
.qpeak__mark{width:44px;height:44px;margin-bottom:22px}

/* ---------- misc ---------- */
.note{font-size:.79rem;color:var(--ink-4);line-height:1.55;margin-top:14px;padding-left:15px;border-left:1px solid var(--line)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-size:.9rem}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:5px 12px;border-radius:999px;border:1px solid var(--line);font-size:.78rem;color:var(--ink-2);background:var(--bg-2)}
.skip{position:absolute;left:-9999px;top:0;padding:11px 18px;background:var(--brand);color:#fff;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .sim__body{grid-template-columns:1fr}
  .sim__controls{border-right:0;border-bottom:1px solid var(--line)}
  .foot__grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:860px){
  body{font-size:16px}
  .nav__links{
    position:fixed;inset:62px 0 auto;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(255,255,255,.97);backdrop-filter:blur(24px);
    padding:16px 22px 26px;border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:.28s var(--ease);
    max-height:calc(100svh - 62px);overflow-y:auto;
  }
  .nav__links.open{transform:none;opacity:1;visibility:visible}
  .nav__link{padding:13px 14px;border-radius:11px;font-size:1rem}
  .nav__toggle{display:grid;place-items:center}
  .nav__cta{margin:10px 0 0}
  .navdrop__panel{
    position:static;transform:none;width:auto;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border:0;box-shadow:none;padding:2px 0 2px 12px;
    grid-template-columns:1fr;display:none;
  }
  .navdrop.open .navdrop__panel{display:grid}
  .split,.split--wide{grid-template-columns:1fr}
  .split--rev>*:first-child{order:0}
  .pin__stage{position:relative;top:0;height:auto;margin-bottom:24px}
  .pin__step{min-height:auto;padding:14px 0}
  .pin__step .card{max-width:none}
  .foot__grid{grid-template-columns:1fr}
  .section{padding:64px 0}
}
@media (max-width:520px){
  .wrap,.wrap-narrow{width:min(100% - 32px,var(--wrap))}
  .card{padding:22px}
  .sim__controls,.sim__view,.sim__head{padding:20px}
}

/* ---------- motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1;transform:none}
  .hero__canvas{display:none}
}
@media print{
  .nav,.foot,.scrollcue,.hero__canvas,.sim__controls{display:none}
  body{background:#fff;color:#000}
}

@media (max-width:960px) and (min-width:861px){
  .nav__links{
    position:fixed;inset:62px 0 auto;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(255,255,255,.97);backdrop-filter:blur(24px);
    padding:16px 22px 26px;border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:.28s var(--ease);
    max-height:calc(100svh - 62px);overflow-y:auto;
  }
  .nav__links.open{transform:none;opacity:1;visibility:visible}
  .nav__link{padding:13px 14px;border-radius:11px;font-size:1rem}
  .nav__toggle{display:grid;place-items:center}
  .nav__cta{margin:10px 0 0}
  .navdrop__panel{
    position:static;transform:none;width:auto;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border:0;box-shadow:none;padding:2px 0 2px 12px;
    display:none;
  }
  .navdrop.open .navdrop__panel{display:grid}
}