/* LIUTE design tokens + base. Palette drawn from the logo (navy, blue, green). */
:root{
  --ink:#0b1420;--ink-2:#121f30;--navy:#0a2a5c;--blue:#1c7fd8;--green:#74c043;
  --paper:#f2f1ed;--paper-2:#e6e4dd;--steel:#8b98a8;--line:rgba(255,255,255,.14);--line-dark:rgba(11,20,32,.16);
  --font-display:"Manrope",system-ui,sans-serif;--font-body:"IBM Plex Sans",system-ui,sans-serif;
  /* motion tokens */
  --ease:cubic-bezier(.22,.8,.2,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-1:.2s;--dur-2:.45s;--dur-3:.9s;--reveal-y:28px;--stagger:.08s;
  --gutter:clamp(20px,4.5vw,64px);--max:1320px;--header-h:76px;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font:400 clamp(16px,1.05vw,18px)/1.65 var(--font-body);overflow-x:hidden}
img,video{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.04;letter-spacing:-.025em;margin:0}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--green);color:var(--ink);padding:10px 16px;z-index:200}
.skip:focus{left:8px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,10vw,150px)}
.light{background:var(--paper);color:var(--ink)}
.light .muted{color:#4a5666}
.muted{color:var(--steel)}
.eyebrow{font:600 12px/1 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--green);display:flex;gap:12px;align-items:center;margin-bottom:22px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.light .eyebrow{color:var(--navy)}
h1{font-size:clamp(42px,8.4vw,128px)}
h2{font-size:clamp(32px,5.2vw,76px)}
h3{font-size:clamp(20px,2vw,28px)}
.lead{font-size:clamp(17px,1.5vw,21px);max-width:58ch}
.tag{display:inline-block;font:600 11px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border:1px solid currentColor}
.tag.illus{color:#f0c36a}
.tag.real{color:var(--green)}
.hide-sm{display:initial}
.grid-tech{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px}
/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:calc(var(--header-h) + 40px) 0 clamp(36px,6vw,80px);overflow:hidden;isolation:isolate}
.hero-media,.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,20,32,.55) 0%,rgba(11,20,32,.25) 35%,rgba(11,20,32,.92) 100%),linear-gradient(90deg,rgba(11,20,32,.7),transparent 65%)}
.hero h1{max-width:12ch}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .lead{margin:28px 0 36px;color:#d4dbe4}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{display:flex;gap:clamp(18px,4vw,56px);flex-wrap:wrap;margin-top:clamp(40px,6vw,80px);padding-top:20px;border-top:1px solid var(--line);font:500 12px/1.5 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:#b9c4d2}
.hero-lines{position:absolute;right:0;bottom:0;width:min(52vw,720px);opacity:.55;z-index:-1;pointer-events:none}
.hero-lines *{fill:none;stroke:var(--green);stroke-width:1.2;vector-effect:non-scaling-stroke}
.draw{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)}
/* identity strip */
.strip{border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden}
.strip ul{list-style:none;margin:0;padding:0;display:flex;width:max-content}
.strip li{padding:22px 40px;font:700 14px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;border-right:1px solid var(--line);display:flex;gap:14px;align-items:center}
.strip li::before{content:"";width:8px;height:8px;background:var(--green)}
/* editorial intro */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split.top{align-items:start}
.frame{position:relative;overflow:hidden;background:#1a2738}
.frame img{width:100%;height:100%;object-fit:cover}
.frame figcaption,.cap{font:500 12px/1.4 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-top:12px}
.stack{position:relative}
.stack .frame:nth-child(2){position:absolute;width:48%;right:-4%;bottom:-8%;border:6px solid var(--paper)}
/* visual story */
.story{position:relative;min-height:90svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.story img.bg{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;z-index:-2}
.story::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,20,32,.92),rgba(11,20,32,.15) 70%)}
.story .wrap{padding-block:clamp(48px,8vw,110px)}
.story h2{max-width:14ch}
/* section head */
.head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,72px)}
.head h2{max-width:16ch}