@import url(assets/fonts.css);
/* CyberX2: a board of tiles. Flat colour, one radius, no rules, no shadows at rest. */
:root{
  --bg:#fff;--surface:#f1f4f8;--ink:#091426;--muted:#4d5a72;
  --accent:#22c55e;--accent-ink:#091426;
  --blue:#0948b3;--blue-ink:#fff;
  --field-1:#050b15;--field-1-ink:#fff;--field-2:#dbe8fa;--field-2-ink:#091426;
  --r:8px;--gap:8px;--m:8px;
  --ease:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);
  --step-small:1rem;
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-display:clamp(3rem,1.5rem + 6.2vw,7.5rem);
  --font:"General Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.45 var(--font);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.ink :focus-visible,.blue :focus-visible,.top :focus-visible{outline-color:var(--accent)}
.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:var(--r);font-weight:600}
.skip:focus{top:8px}

/* the board */
.board{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin:var(--gap) var(--m)}
.t{position:relative;background:var(--surface);border-radius:var(--r);padding:24px;overflow:hidden;min-width:0}
.ink{background:var(--field-1);color:var(--field-1-ink)}
.blue{background:var(--blue);color:var(--blue-ink)}
.tint{background:var(--field-2);color:var(--field-2-ink)}
.acc{background:var(--accent);color:var(--accent-ink)}
.paper{background:var(--surface)}
.t p.m,.m{color:var(--muted)}
.t.ink .m,.t.blue .m,.t.ink p.m,.t.blue p.m{color:rgba(255,255,255,.82)}
.pic{padding:0}
.pic img{width:100%;height:100%;object-fit:cover}

/* top row, made of tiles */
.top{display:grid;grid-template-columns:60px 1fr auto;gap:var(--gap);margin:var(--m);position:sticky;top:var(--m);z-index:30}
.top .t{padding:0;display:flex;align-items:center;min-height:60px}
.top .logo{justify-content:center;background:var(--field-1)}
.top .logo img{width:36px;height:36px}
.top .links{background:var(--surface);padding:0 24px;gap:6px;overflow:visible}
.top .links a{padding:8px 14px;border-radius:var(--r);font-size:var(--step-small);font-weight:500;color:var(--muted);transition:background-color .18s ease,color .18s ease}
.top .links a[aria-current]{color:var(--ink);background:#fff}
.top .act{background:var(--field-1);color:#fff;padding:0 22px;font-weight:600;font-size:var(--step-small)}
.top .menu{display:none}
.top .name-m{display:none}
@media (hover:hover) and (pointer:fine){.top .links a:hover{background:#fff;color:var(--ink)}.top .act:hover{background:var(--accent);color:var(--accent-ink)}}
.top .act{transition:background-color .18s ease,color .18s ease}

/* buttons: one shape */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:var(--r);background:var(--field-1);color:#fff;font:600 var(--step-small)/1 var(--font);border:0;cursor:pointer;transition:transform .16s var(--ease),background-color .18s ease,color .18s ease}
.btn:active{transform:scale(.97)}
.btn.go{background:var(--accent);color:var(--accent-ink)}
.btn.lt{background:#fff;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--blue)}.btn.go:hover{background:#fff}.btn.lt:hover{background:var(--accent)}.btn.line:hover{background:rgba(255,255,255,.12)}}
.arrow{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover .arrow,.rowlink:hover .arrow{transform:translateX(4px)}

/* hero: two by two */
.hero{height:calc(100svh - 76px - var(--gap)*2);min-height:620px;grid-template-rows:1fr 1fr}
.hero .name{grid-column:1/7;grid-row:1;display:flex;align-items:flex-end}
.hero h1{font-size:clamp(4.5rem,10.4vw,9.5rem);font-weight:600;letter-spacing:-.05em;line-height:.82;margin-left:-.04em}
.hero h1 span{display:inline-block}
.hero .p1{grid-column:7/13;grid-row:1}
.hero .p2{grid-column:1/7;grid-row:2}
.hero .say{grid-column:7/10;grid-row:2;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.hero .tag{grid-column:10/13;grid-row:2;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.lead{font-size:var(--step-lead);line-height:1.25;font-weight:500;letter-spacing:-.01em}
.hero .tag .lead{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.25rem);font-weight:600;line-height:1.05;letter-spacing:-.03em}

/* features: statement cell and dark rows */
.split{display:grid;grid-template-columns:1fr 1fr;margin:clamp(56px,10vw,160px) var(--m) var(--m)}
.split>*{border-radius:0}
.split>:first-child{border-radius:var(--r) 0 0 var(--r)}
.split>:last-child{border-radius:0 var(--r) var(--r) 0}
.statement{background:var(--field-2);color:var(--field-2-ink);padding:clamp(24px,3vw,48px);display:flex;flex-direction:column;justify-content:space-between;min-height:90svh;gap:48px}
.statement h2{font-size:clamp(2.25rem,4.2vw,4.25rem);line-height:.98;letter-spacing:-.04em;font-weight:600}
.statement h2 span{display:block}
.statement h2 span:nth-child(2){text-align:right}
.statement .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.statement .foot p{max-width:30ch}
.rows{display:grid;grid-auto-rows:1fr;background:var(--field-1);color:#fff}
.rows a{display:grid;grid-template-columns:5fr 4fr 3fr;gap:24px;padding:28px;align-items:start;transition:background-color .25s ease}
.rows a:nth-child(odd){background:#0a1322}
.rows a:nth-child(even){background:#101b2f}
.rows h3{font-size:1.75rem;line-height:1.05;letter-spacing:-.02em;font-weight:600}
.rows p{font-size:1.125rem;color:rgba(255,255,255,.82)}
.rows ul{font-size:1.125rem;color:rgba(255,255,255,.82)}
.rows .go-arrow{display:inline-flex;margin-top:14px}
@media (hover:hover) and (pointer:fine){.rows a:hover{background:var(--blue)}}

/* accordion */
.intro{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin:clamp(72px,10vw,160px) var(--m) 40px;padding:0 clamp(16px,2vw,32px)}
.intro h2{grid-column:1/6;font-size:clamp(2.25rem,4vw,3.75rem);line-height:1;letter-spacing:-.04em;font-weight:600}
.intro p{grid-column:7/12;font-size:1.125rem;color:var(--muted)}
.acc-row{display:flex;gap:0;height:520px;margin:var(--m);border-radius:var(--r);overflow:hidden}
.panel{flex:1 1 0;min-width:64px;position:relative;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:0;transition:flex-grow .45s var(--ease-io)}
.panel[aria-expanded=true]{flex-grow:9}
.panel .side{position:absolute;left:20px;bottom:20px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:1.25rem;font-weight:700;white-space:nowrap;transition:opacity .2s ease}
.panel[aria-expanded=true] .side{opacity:0}
.panel .body{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transition:opacity .25s ease;pointer-events:none;min-width:420px}
.panel[aria-expanded=true] .body{opacity:1;visibility:visible;transition:opacity .35s ease .15s;pointer-events:auto}
.panel .body h3{font-size:2.5rem;letter-spacing:-.03em;line-height:1;font-weight:600}
.panel .body p{max-width:36ch;font-size:1.125rem}
.s1{background:#050b15;color:#fff}.s2{background:#0a2b66;color:#fff}.s3{background:#0948b3;color:#fff}.s4{background:#5c93e0;color:#091426}.s5{background:#dbe8fa;color:#091426}

/* mosaic */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);margin:clamp(72px,10vw,160px) 12px 12px}
.mosaic>*{aspect-ratio:1;border-radius:var(--r);overflow:hidden;position:relative}
.mosaic .pc{background:var(--field-1)}
.mosaic .pc i{position:absolute;inset:0;background-image:var(--img);background-size:656% 400%;background-position:var(--x) var(--y);transition:transform .5s var(--ease)}
.mosaic .ct{padding:16px;display:flex;flex-direction:column;justify-content:space-between}
.mosaic .ct h2{font-size:clamp(1.25rem,2.6vw,2.5rem);line-height:1;letter-spacing:-.03em;font-weight:600}
.mosaic .ct p{font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.2;font-weight:500}
.mosaic .hd{grid-column:span 2;aspect-ratio:2/1}
@media (hover:hover) and (pointer:fine){.mosaic .pc:hover i{transform:scale(1.08)}}

/* testimonial */
.quote{display:grid;grid-template-columns:5fr 7fr;margin:clamp(72px,10vw,160px) var(--m) var(--m);min-height:70svh}
.quote .who{background:var(--field-1);color:#fff;padding:32px;display:flex;flex-direction:column;justify-content:flex-end;gap:20px;border-radius:var(--r) 0 0 var(--r)}
.quote .who b{font-size:1.25rem;font-weight:600;display:block}
.quote .who span{color:rgba(255,255,255,.78);font-size:1rem}
.quote .qs{background:var(--blue);color:#fff;padding:48px;border-radius:0 var(--r) var(--r) 0;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.quote blockquote{font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.12;letter-spacing:-.02em;font-weight:500;max-width:28ch;text-indent:-.45em}
.quote .nav{display:flex;gap:8px}
.quote .nav button{height:44px;min-width:44px;padding:0 16px;border-radius:var(--r);border:0;background:rgba(255,255,255,.16);color:#fff;font:600 var(--step-small) var(--font);cursor:pointer;transition:transform .16s var(--ease),background-color .18s ease}
.quote .nav button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.quote .nav button:hover{background:#fff;color:var(--blue)}}

/* call to action row */
.cta{display:grid;grid-template-columns:2fr 8fr 2fr;gap:12px;margin:clamp(72px,10vw,160px) 0 clamp(96px,11vw,170px)}
.cta>*{border-radius:var(--r);min-height:380px}
.cta>:first-child{border-radius:0 var(--r) var(--r) 0}
.cta>:last-child{border-radius:var(--r) 0 0 var(--r)}
.cta .main{background:var(--blue);color:#fff;padding:40px;display:flex;flex-direction:column;gap:20px;justify-content:center}
.cta h2{font-size:clamp(2rem,3.2vw,3rem);line-height:1;letter-spacing:-.035em;font-weight:600}
.cta .main>p{max-width:46ch;font-size:1.0625rem;color:rgba(255,255,255,.88)}
.choose{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.choose legend{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
.choose label{position:relative}
.choose input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choose span{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:var(--r);background:rgba(255,255,255,.14);font-weight:600;font-size:var(--step-small);transition:background-color .18s ease,color .18s ease,transform .16s var(--ease)}
.choose input:checked+span{background:#fff;color:var(--blue)}
.choose input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.choose label:active span{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.choose input:not(:checked)+span:hover{background:rgba(255,255,255,.28)}}

/* footer */
.foot{background:var(--field-1);color:#fff;border-radius:var(--r);margin:var(--m);padding:clamp(24px,3vw,48px)}
.fcols{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:56px}
.fcols div:nth-child(1){grid-column:1/3}.fcols div:nth-child(2){grid-column:3/5}.fcols div:nth-child(3){grid-column:5/7}.fcols div:nth-child(4){grid-column:9/13}
.fcols h2{font-size:1.0625rem;font-weight:600;margin-bottom:12px}
.fcols a,.fcols p{display:block;font-size:1rem;color:rgba(255,255,255,.82);padding:4px 0;transition:color .18s ease}
@media (hover:hover) and (pointer:fine){.fcols a:hover{color:var(--accent)}}
.fin{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;flex-wrap:wrap;margin-top:56px;font-size:1rem;color:rgba(255,255,255,.78)}
.fin p{max-width:68ch}
.credits a{text-decoration:underline;text-underline-offset:3px}

/* inner pages */
.ph{grid-template-rows:minmax(320px,50svh) auto}
.ph .h{grid-column:1/8;display:flex;align-items:flex-end}
.ph h1{font-size:var(--step-display);font-weight:600;letter-spacing:-.045em;line-height:.9}
.ph .v{grid-column:8/13;grid-row:1/3;display:grid;place-items:center}
.ph .v.pic{display:block}
.ph .v img.big{width:min(70%,320px);height:auto}
.ph .l{grid-column:1/5;grid-row:2;display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:200px}
.ph .c{grid-column:5/8;grid-row:2;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.sec-h{margin:clamp(56px,8vw,120px) var(--m) 24px;padding:0 clamp(16px,2vw,32px);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.sec-h h2{grid-column:1/8;font-size:var(--step-head);line-height:1;letter-spacing:-.04em;font-weight:600}
.sec-h p{grid-column:9/13;color:var(--muted);align-self:end}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin:var(--gap) var(--m)}
.card{grid-column:span 4;min-height:240px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;transition:background-color .25s ease}
.card.w6{grid-column:span 6}.card.w3{grid-column:span 3}.card.w8{grid-column:span 8}
.card h3{font-size:1.5rem;line-height:1.05;letter-spacing:-.02em;font-weight:600}
.card p{font-size:1.125rem}
.card ul{font-size:1.125rem;display:grid;gap:6px}
.card li::before{content:"";display:inline-block;width:8px;height:8px;background:currentColor;border-radius:2px;margin-right:10px;opacity:.55}
a.card{cursor:pointer}
@media (hover:hover) and (pointer:fine){a.card:hover{background:var(--blue);color:#fff}a.card.ink:hover{background:var(--blue)}}
.chap{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin:var(--gap) var(--m)}
.chap>.t:first-child{grid-column:span 4;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:320px}
.chap h2{font-size:clamp(1.625rem,2.2vw,2.125rem);line-height:1;letter-spacing:-.035em;font-weight:600}
.chap .items{grid-column:span 8;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.chap .items .t{min-height:150px}
.chap .items h3{font-size:1.25rem;font-weight:600;margin-bottom:8px}
.chap .items p{font-size:1.0625rem;color:var(--muted)}
.chap.alt>.t:first-child{order:2}.chap.alt .items{order:1}
.form{display:grid;gap:14px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:grid;gap:6px;font-weight:500;font-size:var(--step-small)}
.form input,.form select,.form textarea{font:inherit;font-size:1rem;padding:12px 14px;border-radius:var(--r);border:0;background:#fff;color:var(--ink);width:100%}
.form textarea{min-height:140px;resize:vertical}
.form .chk{display:flex;gap:12px;align-items:flex-start;font-weight:400}
.form .chk input{width:22px;height:22px;margin-top:2px;accent-color:var(--blue)}
.form .err{color:#ffd3d3;font-weight:600;min-height:1.2em}
.note{font-size:1rem}

/* motion: only transform and opacity; content stays visible without script */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .shutter img{clip-path:inset(0 0 100% 0)}
.js .shutter.in img{clip-path:inset(0);transition:clip-path 1.1s var(--ease-io)}
.js .hero h1 span{opacity:0;transform:translateY(40%)}
.js .hero h1.in span{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i)*55ms)}
.pic img{transition:transform 1.2s var(--ease)}
@media (hover:hover) and (pointer:fine){.pic:hover img{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .hero h1 span{opacity:1;transform:none;transition:none}
  .js .shutter img{clip-path:none}
  .panel,.panel .body,.mosaic .pc i,.btn,.arrow{transition-duration:.01ms}
}

/* phone: its own board */
@media (max-width:900px){
  :root{--m:6px;--gap:6px}
  .top{grid-template-columns:60px 1fr 60px}
  .top .links{position:absolute;left:0;right:0;top:calc(100% + 6px);flex-direction:column;align-items:stretch;padding:12px;display:none;background:var(--surface)}
  .top.open .links{display:flex}
  .top .links a{padding:14px;font-size:1rem}
  .top .act{display:none}
  .top .menu{grid-column:3;display:flex;justify-content:center;align-items:center;background:var(--field-1);color:#fff;border:0;cursor:pointer}
  .top .menu svg{width:26px;height:26px}
  .top .links{grid-column:2/3;position:static;display:none}
  .top .name-m{display:flex;grid-column:2;align-items:center;padding:0 18px;font-weight:700;font-size:1.25rem;letter-spacing:-.03em;background:var(--surface)}
  .top.open{grid-template-rows:60px auto}
  .top.open .links{grid-column:1/4;grid-row:2;display:flex;position:static}
  .hero{height:auto;grid-template-rows:none}
  .hero .name{grid-column:1/-1;grid-row:auto;min-height:30svh}
  .hero h1{font-size:18.5vw}
  .hero .name{padding:16px}
  .hero .p1{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
  .hero .say,.hero .tag{grid-column:span 6;grid-row:auto;aspect-ratio:1;padding:16px}
  .hero .say .lead{font-size:1rem}
  .hero .tag .lead{font-size:1.5rem}
  .hero .p2{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
  .split{grid-template-columns:1fr}
  .split>:first-child{border-radius:var(--r) var(--r) 0 0}.split>:last-child{border-radius:0 0 var(--r) var(--r)}
  .statement{min-height:70svh}
  .statement h2{font-size:10vw}
  .rows a{grid-template-columns:1fr;gap:10px}
  .rows ul{display:flex;flex-wrap:wrap;gap:0 6px}.rows li:not(:last-child)::after{content:","}
  .intro h2,.intro p{grid-column:1/-1}
  .acc-row{flex-direction:column;height:auto}
  .panel{min-height:64px;flex:none}
  .panel .side{writing-mode:horizontal-tb;transform:none;left:20px;top:20px;bottom:auto}
  .panel .body{position:relative;inset:auto;display:none;min-width:0;min-height:300px}
  .panel[aria-expanded=true] .body{display:flex}
  .panel[aria-expanded=true]{flex-grow:0}
  .mosaic{grid-template-columns:repeat(3,1fr);gap:6px}
  .mosaic .pc{display:none}
  .mosaic .hd{grid-column:span 2;aspect-ratio:2/1}
  .mosaic .ct h2{font-size:6vw}.mosaic .ct p{font-size:1rem}
  .mosaic .hide-m{display:none}
  .quote{grid-template-columns:1fr}
  .quote .qs{order:1;border-radius:var(--r) var(--r) 0 0;padding:24px}
  .quote .who{order:2;border-radius:0 0 var(--r) var(--r);min-height:96px;padding:20px}
  .cta{grid-template-columns:1fr 1fr;gap:6px}
  .cta>*{border-radius:var(--r)!important}
  .cta .main{grid-column:1/-1;order:-1;padding:24px;min-height:300px}
  .cta .side{min-height:120px}
  .fcols div:nth-child(n){grid-column:span 6}
  .fcols div:nth-child(4){grid-column:1/-1}
  .mark b{font-size:11vw;min-width:0}
  .mark img{height:auto;width:17vw;margin-right:6px}
  .mark{height:22svh}
  .ph{grid-template-rows:none}
  .ph .h,.ph .v,.ph .l,.ph .c{grid-column:1/-1;grid-row:auto}
  .ph .h{min-height:34svh}
  .ph .v{min-height:220px}
  .sec-h h2,.sec-h p{grid-column:1/-1}
  .card,.card.w6,.card.w3,.card.w8{grid-column:span 6;min-height:0}
  .chap>.t:first-child,.chap .items{grid-column:1/-1}
  .chap .items{grid-template-columns:1fr}
  .chap.alt>.t:first-child,.chap.alt .items{order:0}
  .form .two{grid-template-columns:1fr}
  .quote blockquote{max-width:none}
  .band .pic{grid-column:span 12;min-height:220px}
}
@media (max-width:600px){.card,.card.w6,.card.w3,.card.w8{grid-column:1/-1}}

/* paragraphs never run past a readable line */
.t p,.intro p,.sec-h p,.cta p{max-width:60ch}
.hero .tag p,.hero .say p{max-width:none}
/* one moving picture: a slow drift on the hero photograph */
@keyframes drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.07) translate(-1.2%,-1%)}}
.js .shutter.in.drift img,.drift img{animation:drift 26s var(--ease-io) 1.4s infinite alternate}
@media (prefers-reduced-motion:reduce){.drift img{animation:none}}

/* picture band: three crops of real pictures */
.band{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin:var(--gap) var(--m)}
.band .pic{grid-column:span 4;min-height:340px}

/* footer: the real logo, large and calm */
.flogo{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.flogo img{width:min(560px,100%);height:auto}
.fcta{display:flex;flex-direction:column;gap:20px;align-items:flex-start;max-width:36ch;padding-top:12px}
.fcta p{font-size:1.375rem;line-height:1.25;font-weight:500;letter-spacing:-.01em;max-width:none}

/* full-screen slider hero */
.slider{position:relative;height:100svh;min-height:680px;margin-top:-76px;background:var(--field-1);color:#fff;overflow:hidden;isolation:isolate}
.slide{position:absolute;inset:0}
.js .slide{visibility:hidden;clip-path:inset(0 0 0 100%);z-index:1}
.js .slide.out{visibility:visible;clip-path:inset(0);z-index:2}
.js .slide.on{visibility:visible;clip-path:inset(0);z-index:3;transition:clip-path .95s var(--ease-io)}
.slide .bg,.slide .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .vid{opacity:0;transition:opacity .8s ease}
.slide .vid.ready{opacity:1}
.shade{position:absolute;inset:0;background:rgba(5,11,21,.5)}
.copy{position:absolute;left:clamp(24px,5vw,80px);right:clamp(24px,5vw,80px);bottom:clamp(112px,17vh,190px);display:grid;gap:14px;max-width:1100px}
.copy .word{font-size:clamp(4.5rem,13vw,13rem);font-weight:600;letter-spacing:-.05em;line-height:.85;margin-left:-.04em}
.copy .lead{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);line-height:1.1;letter-spacing:-.02em;font-weight:600;max-width:24ch}
.copy .sub{font-size:1.1875rem;max-width:52ch;color:rgba(255,255,255,.88)}
.copy .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.js .slide .copy>*{opacity:0;transform:translateY(26px)}
.js .slide.on .copy>*{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.js .slide.on .copy>:nth-child(1){transition-delay:.45s}.js .slide.on .copy>:nth-child(2){transition-delay:.56s}.js .slide.on .copy>:nth-child(3){transition-delay:.66s}.js .slide.on .copy>:nth-child(4){transition-delay:.76s}
.js .slide .bg,.js .slide .vid{transform:scale(1.08)}
.js .slide.on .bg,.js .slide.on .vid{transform:none;transition:transform 1.6s var(--ease),opacity .8s ease}
.sctl{position:absolute;left:var(--m);right:var(--m);bottom:var(--m);z-index:10;display:grid;grid-template-columns:repeat(4,1fr) 64px 64px 64px;gap:var(--gap)}
.stab{position:relative;height:64px;border:0;border-radius:var(--r);background:rgba(5,11,21,.78);color:rgba(255,255,255,.78);font:600 1.125rem var(--font);letter-spacing:-.01em;text-align:left;padding:0 22px;cursor:pointer;overflow:hidden;transition:background-color .2s ease,color .2s ease,transform .16s var(--ease)}
.stab:active,.sbtn:active{transform:scale(.97)}
.stab[aria-current=true]{background:rgba(5,11,21,.94);color:#fff}
.stab .fill{position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.stab[aria-current=true] .fill{animation:fill var(--dur,7s) linear forwards}
.slider.paused .fill{animation-play-state:paused}
.slider.still .stab[aria-current=true] .fill{animation:none;transform:scaleX(1)}
@keyframes fill{to{transform:scaleX(1)}}
.sbtn{height:64px;border:0;border-radius:var(--r);background:rgba(5,11,21,.78);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s ease,transform .16s var(--ease)}
.sbtn svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){.stab:hover{background:rgba(5,11,21,.94);color:#fff}.sbtn:hover{background:var(--accent);color:var(--accent-ink)}}
@media (prefers-reduced-motion:reduce){.js .slide.on{transition:none}.js .slide .copy>*,.js .slide.on .copy>*{opacity:1;transform:none;transition:none}.js .slide .bg,.js .slide .vid{transform:none}}
@media (max-width:900px){
  .slider{min-height:620px;margin-top:-72px}
  .sctl{grid-template-columns:repeat(4,1fr) 52px}
  .sctl .sbtn[data-dir]{display:none}
  .stab{height:52px;padding:0 4px;font-size:.875rem;text-align:center}.sbtn{height:52px}
  .copy{bottom:96px;gap:10px}
  .copy .word{font-size:21vw}
  .copy .sub{font-size:1.0625rem}
  .copy .row .btn{height:44px;padding:0 16px}
}

.ptitle{position:absolute;z-index:6;left:clamp(24px,5vw,80px);top:112px;max-width:22ch;font-size:clamp(1.5rem,1rem + 1.6vw,2.5rem);line-height:1.08;letter-spacing:-.03em;font-weight:600;color:#fff}
@media (prefers-reduced-motion:reduce){.js .slide:not(.on){display:none}}
@media (max-width:900px){.ptitle{top:96px;font-size:1.5rem}}