/* ==========================================================================
   Sresak Software Solutions — site.css  (v2: engineering / editorial)
   Dark technical surfaces, hairline structure, mono labels, real photography.
   No framework, no build step.
   ========================================================================== */

:root{
  /* surfaces */
  --ink:#0A0D12;
  --ink-2:#0E1319;
  --ink-3:#131A22;
  --paper:#FFFFFF;
  --paper-2:#F4F6F8;
  --paper-3:#E9EDF1;
  --line:#E2E7EC;
  --line-dark:rgba(255,255,255,.11);
  --line-dark-2:rgba(255,255,255,.06);

  /* text */
  --t-dark:#0B1016;      /* on light */
  --t-dark-2:#48545F;
  --t-light:#EDF1F5;     /* on dark */
  --t-light-2:#93A3B3;
  --t-light-3:#6C7A88;

  /* accents */
  --blue:#4F9CF9;
  --blue-dk:#2563EB;
  --cyan:#3ED8E0;
  --amber:#F5A524;
  --green:#3ECF8E;
  --grad-tech:linear-gradient(120deg,#4F9CF9,#3ED8E0);

  /* type */
  --f-display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --f-head:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* type scale — deliberately wide so sections read differently from each other */
  --fs-display:clamp(2.6rem,6vw,4.9rem);
  --fs-h1:clamp(2.05rem,4.2vw,3.25rem);
  --fs-h2:clamp(1.7rem,3.1vw,2.6rem);
  --fs-h3:clamp(1.12rem,1.45vw,1.36rem);
  --fs-lede:clamp(1.06rem,1.35vw,1.28rem);
  --fs-body:clamp(15.5px,.3vw + 15px,17px);
  --fs-sm:14.6px;

  /* layout */
  --wrap:1200px;
  --pad:clamp(20px,5vw,44px);
  --r-xs:6px; --r:10px; --r-md:14px; --r-lg:20px;
  --ease:cubic-bezier(.22,.68,.36,1);
  --shadow:0 1px 2px rgba(10,13,18,.05),0 18px 44px -16px rgba(10,13,18,.22);
  --shadow-lg:0 40px 90px -30px rgba(5,10,18,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--t-dark);
  font:400 clamp(15.5px,.3vw + 15px,17px)/1.68 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--t-dark);line-height:1.08;letter-spacing:-.032em;
  margin:0 0 .34em;font-weight:600;text-wrap:balance}
h1{font-size:var(--fs-display);line-height:1.02}
h2{font-size:var(--fs-h2);line-height:1.08}
h3{font-size:var(--fs-h3);letter-spacing:-.022em}
h4{font-size:1.02rem}
/* serif italic accent inside headings — the contrast that stops the page reading flat */
h1 em,h2 em,h3 em{font-family:var(--f-display);font-style:italic;font-weight:400;
  letter-spacing:-.015em;padding-right:.06em;color:inherit}
.phero h1{font-size:var(--fs-h1)}
p{margin:0 0 1.05em;text-wrap:pretty}
p:last-child{margin-bottom:0}
ul{margin:0 0 1em;padding-left:1.05em}
li{margin:.34em 0}
strong{font-weight:600;color:inherit}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* ---------------------------------------------------------------- helpers */
.wrap{width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto}
.section{padding:clamp(42px,4.6vw,68px) 0;position:relative}
.section--tight{padding:clamp(30px,3.4vw,50px) 0}
.s-light{background:var(--paper)}
.s-tint{background:var(--paper-2)}
.s-dark{background:var(--ink);color:var(--t-light-2)}
.s-dark h1,.s-dark h2,.s-dark h3,.s-dark h4,.s-dark strong{color:var(--t-light)}
.s-dark p{color:var(--t-light-2)}
.grid-bg{position:relative;isolation:isolate}
.grid-bg::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(var(--line-dark-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-dark-2) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%)}
.glow::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(760px 420px at 78% -6%,rgba(79,156,249,.20),transparent 62%),
             radial-gradient(520px 320px at 8% 8%,rgba(62,216,224,.10),transparent 60%)}
.mono{font-family:var(--f-mono);font-weight:500;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.mono--wide{letter-spacing:.18em}
.mono--amber{color:var(--amber)}
.mono--blue{color:var(--blue)}
.tagline{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.tagline::before{content:"";width:28px;height:1px;background:currentColor;opacity:.55}
.s-dark .tagline{color:var(--cyan)}
.lead{font-size:var(--fs-lede);line-height:1.6;color:var(--t-dark-2);max-width:62ch}
.s-dark .lead{color:var(--t-light-2)}
/* display serif for statement ledes */
.lead--serif{font-family:var(--f-display);font-size:clamp(1.35rem,2.3vw,1.95rem);line-height:1.28;
  letter-spacing:-.015em;color:var(--t-dark)}
.s-dark .lead{color:var(--t-light-2)}
.head{max-width:74ch}
.head--center{margin-inline:auto;text-align:center}
.hair{border-top:1px solid var(--line);margin:0}
.s-dark .hair{border-color:var(--line-dark)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
::selection{background:rgba(79,156,249,.28)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:12px 18px;z-index:200;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 15.5px/1 var(--f-head);letter-spacing:-.01em;
  padding:15px 24px;border-radius:var(--r-xs);border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn--primary{background:var(--blue);color:#06121F;font-weight:600}
.btn--primary:hover{background:#7db4fb;transform:translateY(-1px)}
.btn--darkline{background:transparent;color:var(--t-light);border-color:var(--line-dark)}
.btn--darkline:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
.btn--line{background:transparent;color:var(--t-dark);border-color:var(--line)}
.btn--line:hover{border-color:var(--t-dark);transform:translateY(-1px)}
.btn--ghost{background:var(--paper-2);color:var(--t-dark);border-color:transparent}
.btn--ghost:hover{background:var(--paper-3)}
.btn--amber{background:var(--amber);color:#1B1206;font-weight:600}
.btn--amber:hover{background:#ffbb4d}
.btn--sm{padding:11px 18px;font-size:14.5px}
.btn--wide{width:100%;justify-content:center}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.tlink{display:inline-flex;align-items:center;gap:8px;font:500 15.5px var(--f-head);color:var(--blue-dk);
  text-decoration:none;border-bottom:1px solid rgba(37,99,235,.3);padding-bottom:2px}
.s-dark .tlink{color:var(--cyan);border-color:rgba(62,216,224,.35)}
.tlink:hover{border-color:currentColor}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:90;background:rgba(10,13,18,.86);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.hdr.is-stuck{border-color:var(--line-dark);background:rgba(10,13,18,.95)}
.hdr__bar{display:flex;align-items:center;gap:28px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;color:var(--t-light)}
.brand svg{flex:none}
.brand__words{display:flex;flex-direction:column;line-height:1}
.brand__name{font:600 19px var(--f-head);letter-spacing:-.035em;color:#fff}
.brand__tag{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.26em;color:var(--t-light-3);margin-top:5px}
.nav{display:flex;align-items:center;gap:2px}
.nav a{padding:9px 12px;border-radius:var(--r-xs);text-decoration:none;font:500 14.6px var(--f-head);
  color:#C3CEDA;transition:color .18s,background .18s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{content:"";display:block;height:1px;margin-top:5px;background:var(--grad-tech)}
.hdr__cta{display:flex;align-items:center;gap:16px}
.hdr__phone{font-family:var(--f-mono);font-size:13.4px;letter-spacing:.04em;color:#E4EAF0;text-decoration:none;
  padding:9px 2px;border-bottom:1px solid transparent;white-space:nowrap}
.hdr__phone:hover{color:#fff;border-color:var(--cyan)}
@media(max-width:1240px){.hdr__phone{display:none}}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-dark);background:transparent;border-radius:var(--r-xs);
  cursor:pointer;align-items:center;justify-content:center}
.burger i{display:block;width:18px;height:1.6px;background:#fff;position:relative;transition:.25s var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:18px;height:1.6px;background:#fff;transition:.25s var(--ease)}
.burger i::before{top:-6px}.burger i::after{top:6px}
body.nav-open .burger i{background:transparent}
body.nav-open .burger i::before{top:0;transform:rotate(45deg)}
body.nav-open .burger i::after{top:0;transform:rotate(-45deg)}
@media(max-width:1120px){.nav{display:none}.burger{display:inline-flex}.hdr__cta .btn{display:none}}
.drawer{position:fixed;inset:74px 0 0;z-index:85;background:var(--ink);padding:20px var(--pad) 40px;overflow-y:auto;
  transform:translateY(-6px);opacity:0;pointer-events:none;transition:.26s var(--ease)}
body.nav-open .drawer{transform:none;opacity:1;pointer-events:auto}
.drawer a{display:flex;justify-content:space-between;padding:16px 2px;border-bottom:1px solid var(--line-dark);
  text-decoration:none;font:500 18px var(--f-head);color:var(--t-light)}
.drawer a span{color:var(--t-light-3)}
.drawer .btn{margin-top:24px}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;background:var(--ink);color:var(--t-light-2);padding:clamp(48px,6vw,88px) 0 clamp(56px,7vw,96px);
  overflow:hidden;isolation:isolate}
.hero__grid::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.55;
  background-image:linear-gradient(var(--line-dark-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark-2) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(130% 100% at 60% -10%,#000 15%,transparent 80%);
          mask-image:radial-gradient(130% 100% at 60% -10%,#000 15%,transparent 80%)}
.hero__glow::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(680px 380px at 84% 4%,rgba(79,156,249,.22),transparent 62%),
  radial-gradient(460px 300px at 4% 30%,rgba(62,216,224,.10),transparent 60%)}
.hero__in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4.6vw,64px);align-items:center}
@media(max-width:1020px){.hero__in{grid-template-columns:1fr;gap:40px}}
.hero h1{color:#fff;max-width:20ch}
.hero .lead{color:#A9B8C6;max-width:52ch}
.hero__facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--t-light-3)}
.hero__facts span{display:inline-flex;align-items:center;gap:8px}
.hero__facts i{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(62,207,142,.14)}

/* terminal window */
.console{background:#080B10;border:1px solid var(--line-dark);border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  overflow:hidden;font-family:var(--f-mono);font-size:13px;line-height:1.75}
.console__bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-dark);background:#0B0F15}
.console__dots{display:flex;gap:6px}
.console__dots i{width:9px;height:9px;border-radius:50%;background:#2A3441}
.console__title{margin-left:auto;font-size:11px;letter-spacing:.12em;color:var(--t-light-3);text-transform:uppercase}
.console__body{padding:16px 18px 20px;min-height:288px;color:#C6D2DE}
.console__body .ln{white-space:pre-wrap;word-break:break-word}
.console__body .p{color:var(--blue)}
.console__body .ok{color:var(--green)}
.console__body .warn{color:var(--amber)}
.console__body .dim{color:#6C7A88}
.console__body .hi{color:#fff}
.cursor{display:inline-block;width:7px;height:14px;background:var(--cyan);vertical-align:-2px;animation:blink 1.15s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.cursor{animation:none}}

/* page hero (inner pages) */
.phero{position:relative;background:var(--ink);color:var(--t-light-2);padding:clamp(40px,5.4vw,72px) 0 clamp(44px,6vw,80px);
  overflow:hidden;isolation:isolate}
.phero__grid::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.5;
  background-image:linear-gradient(var(--line-dark-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark-2) 1px,transparent 1px);
  background-size:72px 72px;-webkit-mask-image:radial-gradient(120% 100% at 70% 0%,#000 10%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 70% 0%,#000 10%,transparent 78%)}
.phero__glow::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(620px 340px at 88% 0%,rgba(79,156,249,.18),transparent 62%)}
.crumb{display:flex;gap:9px;align-items:center;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t-light-3);margin-bottom:16px}
.crumb a{text-decoration:none;color:var(--t-light-3)}
.crumb a:hover{color:#fff}
.phero h1{color:#fff;max-width:26ch}
.phero .lead{color:#A9B8C6}

/* ---------------------------------------------------------------- structure rows */
.rows{border-top:1px solid var(--line)}
.s-dark .rows{border-color:var(--line-dark)}
.row{display:grid;grid-template-columns:76px minmax(220px,1fr) 1.25fr;gap:clamp(16px,3vw,44px);align-items:start;
  padding:clamp(16px,1.8vw,24px) 0;border-bottom:1px solid var(--line);transition:background .25s var(--ease)}
.s-dark .row{border-color:var(--line-dark)}
.row:hover{background:var(--paper-2)}
.s-dark .row:hover{background:rgba(255,255,255,.03)}
.row__idx{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--blue);padding-top:6px}
.s-dark .row__idx{color:var(--cyan)}
.row h3{margin:0 0 .35em}
.row p{margin:0;color:var(--t-dark-2);font-size:15.6px}
.s-dark .row p{color:var(--t-light-2)}
.row__link{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-dk);text-decoration:none}
.s-dark .row__link{color:var(--cyan)}
.row__link:hover{text-decoration:underline}
@media(max-width:820px){.row{grid-template-columns:56px 1fr;row-gap:10px}.row__idx{padding-top:4px}}

/* metrics */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.s-dark .metrics{border-color:var(--line-dark)}
.metric{padding:clamp(22px,2.6vw,34px) clamp(16px,2vw,26px);border-right:1px solid var(--line)}
.s-dark .metric{border-color:var(--line-dark)}
.metric:last-child{border-right:0}
.metric b{display:block;font:600 clamp(1.6rem,2.6vw,2.35rem)/1 var(--f-head);letter-spacing:-.04em;color:var(--t-dark)}
.s-dark .metric b{color:#fff}
.metric span{display:block;margin-top:10px;font-size:14.4px;color:var(--t-dark-2)}
.s-dark .metric span{color:var(--t-light-2)}
@media(max-width:900px){.metrics{grid-template-columns:1fr 1fr}.metric{border-bottom:1px solid var(--line)}
 .metric:nth-child(even){border-right:0}.s-dark .metric{border-color:var(--line-dark)}}

/* ---------------------------------------------------------------- console band */
.band-tech{background:var(--ink);color:var(--t-light-2);position:relative;overflow:hidden;isolation:isolate}
.band-tech::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(var(--line-dark-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark-2) 1px,transparent 1px);
  background-size:72px 72px;-webkit-mask-image:radial-gradient(120% 100% at 20% 0%,#000 10%,transparent 80%);
  mask-image:radial-gradient(120% 100% at 20% 0%,#000 10%,transparent 80%)}
.tech-split{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,60px);align-items:start}
@media(max-width:980px){.tech-split{grid-template-columns:1fr}}

/* dashboard mock (drawn in CSS/SVG) */
.dash{background:#0B0F15;border:1px solid var(--line-dark);border-radius:var(--r-md);box-shadow:var(--shadow-lg);overflow:hidden}
.dash__bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-dark)}
.dash__bar .mono{color:var(--t-light-3)}
.dash__live{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.dash__live i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.dash__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark)}
.kpi{background:#0B0F15;padding:18px 18px 20px}
.kpi em{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-style:normal;color:var(--t-light-3)}
.kpi b{display:block;margin-top:10px;font:600 27px/1 var(--f-head);letter-spacing:-.03em;color:#fff}
.kpi small{display:block;margin-top:8px;font-size:12.6px;color:var(--t-light-2)}
.kpi svg{margin-top:12px;width:100%;height:34px}
.dash__chart{padding:20px 18px 24px;background:#0B0F15;border-top:1px solid var(--line-dark)}
.bars{display:flex;align-items:flex-end;gap:6px;height:112px;margin-top:14px}
.bars i{flex:1;background:linear-gradient(180deg,rgba(79,156,249,.85),rgba(79,156,249,.25));border-radius:3px 3px 0 0;
  min-height:6px;transform-origin:bottom;animation:grow .9s var(--ease) both}
.bars i:nth-child(3n){background:linear-gradient(180deg,rgba(62,216,224,.9),rgba(62,216,224,.25))}
@keyframes grow{from{transform:scaleY(.1);opacity:.2}to{transform:scaleY(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.bars i{animation:none}}
.bars-x{display:flex;gap:6px;margin-top:8px;font-family:var(--f-mono);font-size:10px;color:var(--t-light-3)}
.bars-x span{flex:1;text-align:center}

/* architecture diagram */
.arch{background:#0B0F15;border:1px solid var(--line-dark);border-radius:var(--r-md);padding:22px;box-shadow:var(--shadow-lg)}
.arch figcaption{margin-top:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--t-light-3)}
.arch svg text{font-family:var(--f-mono);font-size:10.5px;fill:#9FB0C0;letter-spacing:.04em}
.arch svg .ttl{fill:#fff;font-size:11.5px}
.arch svg rect{fill:rgba(79,156,249,.07);stroke:rgba(79,156,249,.45);stroke-width:1}
.arch svg .alt rect{fill:rgba(62,216,224,.06);stroke:rgba(62,216,224,.4)}
.arch svg .amber rect{fill:rgba(245,165,36,.07);stroke:rgba(245,165,36,.45)}
.arch svg path{stroke:rgba(255,255,255,.28);stroke-width:1;fill:none}
.arch svg .dashline{stroke-dasharray:3 4;stroke:rgba(255,255,255,.22)}

/* ---------------------------------------------------------------- split / media */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.4vw,64px);align-items:center}
@media(max-width:960px){.split{grid-template-columns:1fr}}
.split--rev .split__media{order:-1}
@media(max-width:960px){.split--rev .split__media{order:0}}
.shot{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--paper-3);
  box-shadow:var(--shadow);border:1px solid var(--line)}
.s-dark .shot{border-color:var(--line-dark)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease)}
.shot--tall img{aspect-ratio:3/4}
.shot--wide img{aspect-ratio:16/9}
.shot:hover img{transform:scale(1.03)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:#E7EEF5;background:linear-gradient(0deg,rgba(6,10,16,.82),transparent)}

/* lists — marker drawn in CSS (no icon assets, no pictograms) */
.checks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:15.6px;margin:0}
.checks li::before{content:"";flex:none;width:7px;height:7px;margin-top:9px;background:var(--blue);border-radius:1px}
.s-dark .checks li::before{background:var(--cyan)}

/* chips / stack */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chips span{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;padding:8px 12px;border-radius:var(--r-xs);
  border:1px solid var(--line);color:var(--t-dark-2);background:var(--paper)}
.s-dark .chips span{border-color:var(--line-dark);color:var(--t-light-2);background:rgba(255,255,255,.03)}

/* statement (unattributed brand voice — no portrait, no name) */
.human{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,56px);align-items:center}
@media(max-width:960px){.human{grid-template-columns:1fr}}
.statement{margin:0;position:relative;padding-left:clamp(18px,2vw,30px);border-left:2px solid var(--amber)}
.statement p{font-family:var(--f-display);font-weight:400;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.16;
  letter-spacing:-.018em;color:var(--t-dark);margin:0}
.s-dark .statement p{color:#fff}

/* roles (text only — no stock faces) */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);border-top:1px solid var(--line);padding-top:24px}
@media(max-width:860px){.roles{grid-template-columns:1fr}.role{padding-bottom:14px;border-bottom:1px solid var(--line)}.role:last-child{border-bottom:0}}
.role .mono{color:var(--blue);margin-bottom:10px;display:block}
.s-dark .role .mono{color:var(--cyan)}
.role h3{margin:0 0 .35em;font-size:1.06rem}
.role p{margin:0;font-size:14.9px;color:var(--t-dark-2)}
.s-dark .role p{color:var(--t-light-2)}

/* people (kept for when real team photography is available) */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
@media(max-width:860px){.people{grid-template-columns:1fr}}
.person{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--paper-3)}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.55) contrast(1.03);transition:filter .5s var(--ease),transform 1.1s var(--ease)}
.person:hover img{filter:none;transform:scale(1.02)}
.person__meta{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(0deg,rgba(6,10,16,.9),rgba(6,10,16,.05))}
.person__meta strong{display:block;font:600 17px var(--f-head);color:#fff}
.person__meta span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#A9B8C6}

/* ---------------------------------------------------------------- case studies */
.case{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.6vw,52px);align-items:center;
  padding:clamp(28px,3.6vw,48px) 0;border-top:1px solid var(--line)}
.case:last-child{border-bottom:1px solid var(--line)}
@media(max-width:960px){.case{grid-template-columns:1fr}}
.case--flip .case__media{order:-1}
@media(max-width:960px){.case--flip .case__media{order:0}}
.case__meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.case__meta span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 10px;border-radius:var(--r-xs);border:1px solid var(--line);color:var(--t-dark-2)}
.case h3{font-size:clamp(1.35rem,2.2vw,1.95rem);margin-bottom:.4em}
.case dl{margin:20px 0 0;display:grid;gap:14px}
.case dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-dark-2)}
.case dd{margin:4px 0 0;font-size:15.8px}
.case__outcome{display:flex;gap:24px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.case__outcome div b{display:block;font:600 22px/1 var(--f-head);color:var(--blue-dk);letter-spacing:-.03em}
.case__outcome div span{font-size:13.6px;color:var(--t-dark-2)}

/* industries rows */
.indrow{display:grid;grid-template-columns:240px 1fr auto;gap:clamp(18px,2.6vw,36px);align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none}
.indrow:hover{background:var(--paper-2)}
.indrow img{width:240px;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r);filter:grayscale(.35)}
.indrow h3{margin:0 0 .3em}
.indrow p{margin:0;color:var(--t-dark-2);font-size:15.4px}
.indrow__go{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-dk);white-space:nowrap}
@media(max-width:820px){.indrow{grid-template-columns:1fr}.indrow img{width:100%}}

/* timeline */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px);margin-top:40px;position:relative}
@media(max-width:1000px){.tl{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tl{grid-template-columns:1fr}}
.tl::before{content:"";position:absolute;left:0;right:0;top:14px;height:1px;background:var(--line)}
.s-dark .tl::before{background:var(--line-dark)}
.tl__item{position:relative;padding-top:38px}
.tl__item::before{content:"";position:absolute;top:9px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:1px solid var(--blue)}
.s-dark .tl__item::before{background:var(--ink);border-color:var(--cyan)}
.tl__num{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;color:var(--blue-dk);text-transform:uppercase}
.s-dark .tl__num{color:var(--cyan)}
.tl__item h3{margin:10px 0 .35em;font-size:1.08rem}
.tl__item p{font-size:14.9px;margin:0;color:var(--t-dark-2)}
.s-dark .tl__item p{color:var(--t-light-2)}

/* accordion */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line);background:transparent}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:20px 0;font:500 16.8px var(--f-head);color:var(--t-dark);letter-spacing:-.015em}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--f-mono);color:var(--blue-dk);font-size:19px;line-height:1;transition:transform .25s var(--ease)}
.acc[open] summary::after{transform:rotate(45deg)}
.acc__body{padding:0 clamp(0px,4vw,80px) 22px 0;color:var(--t-dark-2);font-size:15.6px}

/* ---------------------------------------------------------------- forms */
.contact{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:start}
@media(max-width:960px){.contact{grid-template-columns:1fr}}
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(22px,2.6vw,32px)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.f-grid{grid-template-columns:1fr}}
label{display:block;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-dark-2);margin:16px 0 7px}
input,textarea,select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-xs);
  font:400 15.6px var(--f-body);color:var(--t-dark);background:var(--paper-2);transition:border-color .2s,background .2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(79,156,249,.18)}
textarea{min-height:132px;resize:vertical}
.req{color:#C2410C}
.form__note{font-size:13.6px;color:var(--t-dark-2);margin-top:14px}
.form__ok{display:none;margin-top:16px;padding:14px 16px;border-radius:var(--r-xs);background:#ECFDF5;
  border:1px solid #A7F3D0;color:#065F46;font-size:14.6px}
.form__ok.show{display:block}
.info{display:grid;gap:0;border-top:1px solid var(--line)}
.info__row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.info__row dt{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-dark-2)}
.info__row dd{margin:0;text-align:right;font-size:15.6px}
.info__row a{text-decoration:none;border-bottom:1px solid rgba(37,99,235,.3)}
.info__row a:hover{border-color:currentColor}
.todo{color:#B45309;font-weight:600}
.map{margin-top:24px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;height:250px;background:var(--paper-2)}
.map iframe{width:100%;height:100%;border:0;display:block}

/* ---------------------------------------------------------------- CTA + footer */
.cta{position:relative;background:var(--ink);color:var(--t-light-2);overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(680px 360px at 82% 10%,rgba(79,156,249,.22),transparent 60%),
             radial-gradient(520px 320px at 6% 90%,rgba(62,216,224,.10),transparent 62%)}
.cta__in{padding:clamp(54px,6.4vw,96px) 0;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(26px,4vw,56px);align-items:center}
@media(max-width:900px){.cta__in{grid-template-columns:1fr}}
.cta h2{color:#fff;max-width:24ch}
.cta__actions{display:flex;flex-direction:column;gap:12px}
@media(max-width:900px){.cta__actions{flex-direction:row;flex-wrap:wrap}}
.ftr{background:#070A0E;color:var(--t-light-3);padding:clamp(46px,5.4vw,72px) 0 28px;font-size:14.6px}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:clamp(22px,3.4vw,46px)}
@media(max-width:940px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr h4{color:#fff;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;font-weight:500}
.ftr a{color:#93A3B3;text-decoration:none;display:block;padding:5px 0}
.ftr a:hover{color:#fff}
.ftr__brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ftr__bot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-dark-2);display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:#5C6A78}

/* ---------------------------------------------------------------- motion */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .shot img,.person img{transition:none}
}
.totop{position:fixed;right:18px;bottom:18px;z-index:80;width:44px;height:44px;border-radius:var(--r-xs);
  border:1px solid var(--line-dark);background:rgba(10,13,18,.85);color:var(--cyan);display:grid;place-items:center;
  cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;backdrop-filter:blur(8px)}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{transform:translateY(-2px)}
@media print{.hdr,.drawer,.totop,.form,.cta__actions{display:none!important}}

/* ==========================================================================
   v3 additions: motion, density, video
   ========================================================================== */

/* ---- video backgrounds -------------------------------------------------- */
.vbg{position:absolute;inset:0;overflow:hidden;z-index:-2}
.vbg video,.vbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vbg video{filter:saturate(.75) contrast(1.02)}
.vbg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,10,16,.86) 0%,rgba(6,10,16,.92) 100%),
  radial-gradient(760px 420px at 80% 0%,rgba(79,156,249,.20),transparent 62%)}
.kenburns{animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1.2%,-1%,0)}}
@media(prefers-reduced-motion:reduce){.kenburns{animation:none}}

/* framed looping clip inside a section */
.clip{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-dark);
  background:#080B10;box-shadow:var(--shadow-lg);aspect-ratio:16/9}
.s-light .clip{border-color:var(--line)}
.clip video,.clip img{width:100%;height:100%;object-fit:cover;display:block}
.clip__tag{position:absolute;left:12px;bottom:12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#E7EEF5;background:rgba(7,12,20,.72);border:1px solid var(--line-dark);
  padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px)}

/* ---- marquee ----------------------------------------------------------- */
.marquee{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.s-dark .marquee{border-color:var(--line-dark)}
.marquee__track{display:flex;gap:38px;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-dark-2);white-space:nowrap;display:inline-flex;align-items:center;gap:12px}
.s-dark .marquee span{color:var(--t-light-2)}
.marquee span::after{content:"";width:4px;height:4px;background:var(--blue);border-radius:50%;opacity:.5}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---- compact tile grid -------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tiles{grid-template-columns:1fr}}
.tile{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 20px 22px;
  transition:background .25s var(--ease)}
.tile:hover{background:var(--paper-2)}
.s-dark .tiles{border-color:var(--line-dark)}
.s-dark .tile{border-color:var(--line-dark)}
.s-dark .tile:hover{background:rgba(255,255,255,.03)}
.tile .mono{display:block;color:var(--blue);margin-bottom:9px}
.s-dark .tile .mono{color:var(--cyan)}
.tile h3{font-size:1.03rem;margin:0 0 .3em}
.tile p{margin:0;font-size:14.6px;color:var(--t-dark-2)}
.s-dark .tile p{color:var(--t-light-2)}

/* ---- two-column lists -------------------------------------------------- */
.twolists{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,48px)}
@media(max-width:820px){.twolists{grid-template-columns:1fr}}
.fitlist{border-top:1px solid var(--line);padding-top:20px}
.fitlist h3{font-size:1.08rem;margin-bottom:.7em;display:flex;align-items:center;gap:10px}
.fitlist h3::after{content:"";flex:1;height:1px;background:var(--line)}
.fitlist ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.fitlist li{display:flex;gap:12px;font-size:15.2px}
.fitlist li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;border-radius:1px;background:var(--blue)}
.fitlist--no li::before{background:#B9C2CB}

/* ---- compact data table ------------------------------------------------ */
.dtable{width:100%;border-collapse:collapse;font-size:15.2px}
.dtable th,.dtable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.dtable th{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-dark-2);font-weight:500}
.dtable td:first-child{font-family:var(--f-mono);font-size:12.5px;color:var(--blue);white-space:nowrap}
.s-dark .dtable th,.s-dark .dtable td{border-color:var(--line-dark)}
.s-dark .dtable th{color:var(--t-light-3)}
.s-dark .dtable td:first-child{color:var(--cyan)}
.tablewrap{overflow-x:auto;border-top:1px solid var(--line)}
.s-dark .tablewrap{border-color:var(--line-dark)}

/* ---- animated diagram dashes ------------------------------------------ */
.arch svg .flow{stroke:rgba(79,156,249,.75);stroke-width:1.4;stroke-dasharray:5 7;animation:dash 3.6s linear infinite}
.arch svg .flow.alt{stroke:rgba(62,216,224,.7)}
.arch svg .flow.amber{stroke:rgba(245,165,36,.75)}
@keyframes dash{to{stroke-dashoffset:-48}}
@media(prefers-reduced-motion:reduce){.arch svg .flow{animation:none}}

/* ---- dense stat row (compact, inline) --------------------------------- */
.statline{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statline div{padding:18px clamp(16px,2.4vw,30px);border-right:1px solid var(--line);flex:1 1 190px}
.statline div:last-child{border-right:0}
.statline b{display:block;font-family:var(--f-head);font-size:clamp(1.25rem,2vw,1.7rem);letter-spacing:-.03em;color:var(--t-dark)}
.statline span{display:block;margin-top:6px;font-size:14.2px;color:var(--t-dark-2)}
.s-dark .statline,.s-dark .statline div{border-color:var(--line-dark)}
.s-dark .statline b{color:#fff}
.s-dark .statline span{color:var(--t-light-2)}

/* tighter grids / cards in dense mode */
.grid--tight{gap:14px}
.card--tight{padding:20px}
.prose{max-width:70ch}
.prose h3{margin-top:1.3em}
.lede-sm{font-size:15.8px;color:var(--t-dark-2)}

/* ==========================================================================
   v4 - density pass: tighter vertical rhythm everywhere
   Later rules win; this block tightens the vertical rhythm everywhere.
   ========================================================================== */
:root{
  --s4:28px; --s5:40px; --s6:56px; --s7:76px;
}
body{line-height:1.6}
.section{padding:clamp(32px,3.4vw,52px) 0}
.section--tight{padding:clamp(22px,2.4vw,36px) 0}
.hero{padding:clamp(34px,3.8vw,58px) 0 clamp(38px,4.2vw,64px)}
.phero{padding:clamp(26px,3vw,44px) 0 clamp(28px,3.2vw,48px)}
.cta__in{padding:clamp(36px,4.2vw,60px) 0}
.ftr{padding:clamp(32px,3.4vw,48px) 0 22px}
h1,h2,h3,h4{margin-bottom:.28em}
h2{line-height:1.06}
.tagline{margin-bottom:8px}
.head{max-width:66ch}
.lead{max-width:58ch}
.grid{gap:16px}
.grid--tight{gap:12px}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.card{padding:clamp(16px,1.8vw,22px)}
.row{padding:13px 0;gap:clamp(12px,2vw,34px)}
.row h3{margin-bottom:.2em}
.row p{font-size:15.2px}
.tiles .tile{padding:15px 16px 17px}
.tile h3{font-size:.99rem}
.tile p{font-size:14.2px}
.tl{gap:clamp(14px,2vw,26px);margin-top:26px}
.tl__item{padding-top:30px}
.tl::before{top:12px}
.tl__item::before{top:7px}
.acc summary{padding:15px 0;font-size:16.2px}
.acc__body{padding-bottom:16px;font-size:15.2px}
.faq{gap:0}
.split{gap:clamp(20px,2.8vw,42px)}
.human{gap:clamp(20px,3vw,40px)}
.case{padding:clamp(20px,2.4vw,32px) 0;gap:clamp(20px,2.8vw,40px)}
.case dl{gap:10px;margin-top:16px}
.case__outcome{margin-top:16px;padding-top:14px;gap:20px}
.indrow{padding:15px 0;gap:clamp(14px,2vw,28px)}
.indrow img{width:210px}
.roles{padding-top:18px;gap:clamp(14px,2vw,22px)}
.checks{gap:9px;margin-top:16px}
.checks li{font-size:15.1px}
.chips{margin-top:16px;gap:6px}
.chips span{padding:6px 10px;font-size:11.5px}
.marquee{padding:10px 0}
.dtable th,.dtable td{padding:11px 14px}
.statline div{padding:14px 18px}
.prose p{margin-bottom:.85em}
.clip{display:none}          /* video retired outside the Home hero */
.media__cap,.shot figcaption{padding:9px 12px;font-size:10.5px}
.wrap{width:min(1240px,100% - var(--pad)*2)}
@media(max-width:900px){
  .section{padding:28px 0}
  .hero{padding:28px 0 34px}
}

/* hero right column: terminal + at-a-glance panel (fills the space) */
.hero__right{display:grid;gap:12px;align-content:start}
.hero__glance{border:1px solid var(--line-dark);border-radius:var(--r-md);background:rgba(255,255,255,.035);
  padding:14px 18px;display:grid;gap:10px}
.hero__glance>div{display:grid;grid-template-columns:108px 1fr;gap:12px;align-items:baseline}
.hero__glance .mono{color:var(--cyan);letter-spacing:.12em;font-size:10.5px}
.hero__glance strong{font-family:var(--f-body);font-weight:500;font-size:14.4px;color:#C9D6E2}
@media(max-width:520px){.hero__glance>div{grid-template-columns:1fr;gap:2px}}
.console__body{min-height:262px}

/* hero right column stretches to match the left — no dead space */
.hero__in{align-items:stretch}
.hero__right{align-content:stretch}
.console{display:flex;flex-direction:column}
.console__body{flex:1 1 auto;min-height:246px}

/* ==========================================================================
   v12 — wide-screen proportions
   The container was capped at 1240px, which left huge empty margins on large
   monitors (340px at 1920, 660px at 2560, 1100px at 3440). It now scales with
   the viewport and the type scale grows with it.
   ========================================================================== */
.wrap{width:min(1320px,100% - var(--pad)*2)}

/* rows: fill the whole width with a right-aligned action at the far edge */
.row{grid-template-columns:88px minmax(210px,.85fr) minmax(0,1.55fr) minmax(150px,max-content);
  align-items:baseline}
.row__act{text-align:right;white-space:nowrap}
.row__act .row__link{display:inline-flex;align-items:center;gap:8px}
.row__act .ar{transition:transform .25s var(--ease)}
.row:hover .row__act .ar{transform:translateX(4px)}
@media(max-width:900px){
  .row{grid-template-columns:64px 1fr;row-gap:8px}
  .row__body{grid-column:2}
  .row__act{grid-column:2;text-align:left;margin-top:6px}
}

@media(min-width:1600px){
  .wrap{width:min(1520px,94vw)}
  body{font-size:17.5px}
  :root{--fs-display:clamp(5rem,4.6vw,6rem); --fs-h1:clamp(2.4rem,3.4vw,3.9rem);
        --fs-h2:clamp(1.9rem,2.5vw,3rem); --fs-lede:clamp(1.12rem,1.15vw,1.4rem)}
  .hero h1{max-width:24ch}
  .section{padding:clamp(40px,3.4vw,62px) 0}
}
@media(min-width:1900px){
  .wrap{width:min(1660px,92vw)}
  body{font-size:18px}
  :root{--fs-display:clamp(4.6rem,4.5vw,6.6rem); --fs-h2:clamp(2.1rem,2.6vw,3.4rem)}
  .hero h1{max-width:25ch}
  .row{grid-template-columns:96px minmax(230px,.9fr) minmax(0,1.6fr) minmax(160px,max-content)}
}
@media(min-width:2300px){
  .wrap{width:min(2000px,88vw)}
  body{font-size:18.5px}
  .grid.g-auto{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  :root{--fs-display:clamp(5rem,4.4vw,7rem)}
}
@media(min-width:2800px){
  .wrap{width:min(2160px,84vw)}
  body{font-size:19px}
}