@charset "UTF-8";

/*
Theme Name: Studio Lyve
Theme URI:  
Author: the LYVE team
Author URI:  
Description: 
Requires at least: 5.3
Tested up to: 6.2
Requires PHP: 5.6
Version: 1.8
License: GNU General Public License v2 or later
License URI:  
Text Domain: studiolyve
Tags: 
 
*/
 /* Layout idea: full-bleed film hero, staggered ruled headlines, alternating ink and panel bands, one green signal. */
:root{
  color-scheme:dark;
  --ink:#0C0C0C; --ink-2:#111111; --panel:#1A1A1A; --panel-2:#222422;
  --text:#FFFFFF; --mute:#9BA19D; --dim:#5B615D; --line:rgba(255,255,255,.12);
  --green:#03DC49; --amber:#FFB43A;
  --r-pill:100px; --r-card:26px;
  --display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Fragment Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gut:clamp(16px,1.7vw,24px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font-family:var(--display);font-size:16px;line-height:1.4;letter-spacing:-.03em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
canvas{display:block;width:100%;height:100%}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase}
.wrap{padding-inline:var(--gut);max-width:1680px;margin-inline:auto}
section{position:relative}
.band{padding-block:clamp(72px,9vw,150px)}
.band.panel{background:var(--ink-2)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:60px;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding-inline:var(--gut);background:rgba(12,12,12,.9);backdrop-filter:blur(10px)}
.mark{font-weight:700;font-size:17px;letter-spacing:.42em;text-transform:uppercase;white-space:nowrap}
.mark sup{color:var(--green);font-size:10px;letter-spacing:0;margin-left:-.3em}
.nav nav{display:flex;justify-content:space-between;font-weight:500;font-size:18px;letter-spacing:-.04em}
.nav nav a{transition:color .2s}.nav nav a:hover{color:var(--green)}

/* hero */
.hero{height:clamp(640px,100vh,940px);overflow:hidden;background:#050605}
.hero canvas{position:absolute;inset:0}
.hero .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 62% 45%,#000 0,transparent 62%);-webkit-mask-image:radial-gradient(ellipse at 62% 45%,#000 0,transparent 62%)}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,5,.35),transparent 30%,transparent 55%,rgba(5,6,5,.92))}
.hero-top{position:absolute;top:104px;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;padding-inline:var(--gut)}
.live{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;text-transform:uppercase;color:#e9efe9}
.dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:8px 0 0 -2px rgba(255,255,255,.75);margin-right:8px;flex:none}
.hero h2{font-weight:600;font-size:clamp(40px,4.6vw,66px);letter-spacing:-.06em;line-height:1.05;margin:6px 0 16px}
.addr{font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:-.02em;line-height:1.5}
.tags .yr{display:flex;gap:8px;align-items:center;font-size:11px;font-weight:700}.tags .yr b{color:var(--green);font-weight:400;font-size:16px}
.tags ul{list-style:none;border-left:1px solid var(--green);margin:8px 0 0 6px;padding-left:16px}
.tags li{font-weight:500;font-size:clamp(22px,2.3vw,32px);letter-spacing:-.05em;line-height:1.22}
.hero h1{position:absolute;left:var(--gut);bottom:26px;font-weight:600;text-transform:uppercase;font-size:clamp(46px,8.4vw,124px);line-height:.9;letter-spacing:-.065em}
.hero h1 span{display:block}
.hero h1 .a{color:var(--green)}
.hero h1 .b{background:linear-gradient(180deg,var(--green),#fff 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 svg{width:.5em;height:.5em;vertical-align:.42em;margin-left:.12em}
.side{position:absolute;right:var(--gut);bottom:30px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:600;display:flex;gap:10px;align-items:center}
.side i{display:block;width:10px;height:26px;background:repeating-linear-gradient(180deg,#fff 0 1px,transparent 1px 3px)}

/* shared heads */
.shead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:clamp(24px,3vw,44px);font-weight:500;font-size:17px}
.shead .l{display:flex;gap:10px;align-items:center}
.shead .r{text-align:right}.shead .r .live{justify-content:flex-end;color:var(--mute);font-size:10px;margin-bottom:8px}.shead .r .dot{width:8px;height:8px;margin-right:6px}
.glyph{width:18px;height:18px;flex:none}
.stag{font-weight:600;text-transform:uppercase;font-size:clamp(38px,7.3vw,112px);line-height:.98;letter-spacing:-.065em}
.stag span{display:block;border-bottom:1px solid var(--line);padding-block:.03em;color:var(--dim)}
.stag span.on{color:var(--text)}
.stag .i1{padding-left:7%}.stag .i2{padding-left:14%}
.center{text-align:center}
.center h2{font-weight:600;text-transform:uppercase;font-size:clamp(40px,6.4vw,96px);letter-spacing:-.065em;line-height:1}
.center p{margin-top:14px;color:var(--mute)}
.pill{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 24px;border-radius:var(--r-pill);border:1px solid var(--line);font-weight:600;font-size:17px;letter-spacing:-.04em;transition:background .2s,color .2s,border-color .2s}
.pill::after{content:"";width:26px;height:8px;background:linear-gradient(var(--green),var(--green)) left center/100% 1.5px no-repeat;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);border-right:0;position:relative}
.pill:hover{background:var(--green);color:#041007;border-color:var(--green)}.pill:hover::after{background-image:linear-gradient(#041007,#041007)}
.pill.solid{background:var(--green);color:#041007;border-color:var(--green)}.pill.solid::after{background-image:linear-gradient(#041007,#041007)}
.pill.solid:hover{background:#fff;border-color:#fff}
.card{background:var(--panel);border-radius:var(--r-card);overflow:hidden}
.lines p{font-weight:500;font-size:clamp(20px,2.1vw,30px);letter-spacing:-.05em;border-bottom:1px solid var(--line);padding-block:10px;color:var(--mute)}
.lines p:first-child{color:var(--text)}

/* slate */
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 26px}
.chip{height:38px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--line);font-weight:600;font-size:14px;color:var(--mute);transition:.2s}
.chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#041007}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tile{position:relative;aspect-ratio:1.1;overflow:hidden;border-radius:4px;background:var(--panel);cursor:pointer;transition:opacity .3s,transform .3s}
.tile.off{opacity:.16}
.tile canvas{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile:hover canvas,.tile:focus-visible canvas{transform:scale(1.06)}
.tile .meta{position:absolute;inset:auto 0 0 0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.82));display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.tile h3{font-weight:600;font-size:clamp(20px,2.2vw,32px);letter-spacing:-.05em;line-height:1.05}
.tile .mono{color:#dfe5e0;display:block;margin-bottom:6px}
.tile .st{font-family:var(--mono);font-size:10px;text-transform:uppercase;border:1px solid rgba(255,255,255,.4);border-radius:var(--r-pill);padding:5px 10px;white-space:nowrap}
.tile .st.live{border-color:var(--green);color:var(--green)}
.more{display:block;text-align:center;font-weight:600;text-transform:uppercase;font-size:clamp(36px,5.6vw,84px);letter-spacing:-.065em;padding-top:clamp(40px,6vw,90px);transition:color .2s}.more:hover{color:var(--green)}

/* marquee */
.marq{overflow:hidden;margin-top:48px;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq div{display:flex;gap:64px;width:max-content;animation:mq 34s linear infinite}
.marq:hover div{animation-play-state:paused}
.marq span{font-weight:700;font-size:clamp(34px,4.6vw,68px);letter-spacing:-.06em;white-space:nowrap;color:var(--dim);transition:color .2s}
.marq span:hover{color:var(--text)}.marq span i{font-style:normal;color:var(--green)}
@keyframes mq{to{transform:translateX(-50%)}}
.hint{text-align:center;margin-top:44px;color:var(--mute)}

/* formats */
.fmt{display:grid;grid-template-columns:230px minmax(0,1fr) 230px;gap:28px;margin-top:clamp(40px,5vw,80px);align-items:start}
.fmt .list button{display:block;font-weight:600;font-size:17px;padding:7px 0;color:var(--mute);text-align:left;transition:color .2s}
.fmt .list button[aria-selected="true"]{color:var(--green)}
.fmt .stage{position:relative;aspect-ratio:1.42;border-radius:var(--r-card);overflow:hidden;background:var(--panel)}
.fmt .word{position:absolute;left:-.06em;bottom:22%;font-weight:600;font-size:clamp(54px,9vw,140px);letter-spacing:-.07em;line-height:1;mix-blend-mode:difference;pointer-events:none;white-space:nowrap}
.fmt .num{position:absolute;right:22px;bottom:14px;font-weight:600;font-size:clamp(40px,5vw,72px);letter-spacing:-.06em}
.fmt .bar{position:absolute;left:22px;right:22px;bottom:12px;height:2px;background:rgba(255,255,255,.18)}.fmt .bar i{display:block;height:100%;width:0;background:var(--green)}
.fmt .desc{position:absolute;left:22px;top:20px;max-width:300px;font-weight:500;font-size:15px}
.fmt .subs{list-style:none}.fmt .subs li{font-weight:500;font-size:15px;padding:6px 0;color:var(--mute)}

/* distribution */
.dist{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);margin-top:clamp(40px,5vw,72px);border-radius:var(--r-card);overflow:hidden;background:var(--panel)}
.dist .feat{background:var(--green);color:#041007;padding:34px;display:flex;flex-direction:column;justify-content:space-between;gap:60px;min-height:300px}
.dist .feat h3{font-weight:600;font-size:clamp(26px,2.8vw,40px);letter-spacing:-.05em;line-height:1.08}
.dist .feat p{font-weight:600;font-size:18px;margin-top:10px}
.dist .feat .pill{background:#fff;border-color:#fff;color:#041007;align-self:flex-start}.dist .feat .pill::after{background-image:linear-gradient(#041007,#041007)}
.rows>div{display:grid;grid-template-columns:1fr auto;gap:6px 20px;padding:20px 30px;border-bottom:1px solid var(--line)}
.rows>div:last-child{border:0}
.rows h4{font-weight:600;font-size:21px;letter-spacing:-.05em}.rows p{color:var(--mute);font-size:14px}.rows em{font-style:normal;font-weight:600;font-size:14px;align-self:center}

/* stats */
.stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);margin-top:20px}
.stats .txt{padding-left:clamp(0px,8vw,150px)}
.stats .txt>p{color:var(--mute);margin-top:22px;max-width:52ch;font-weight:500}
.stat{display:grid;grid-template-columns:minmax(120px,.8fr) 1.4fr;gap:20px;align-items:center;padding:26px 0;border-top:1px solid var(--line)}
.stat .n{font-weight:600;font-size:clamp(58px,6.4vw,96px);letter-spacing:-.06em;line-height:1;border-left:1px solid var(--line);padding-left:20px;font-variant-numeric:tabular-nums}
.stat .n sup{font-size:.36em;color:var(--dim);vertical-align:1.3em;margin-left:4px}
.stat h4{font-weight:600;font-size:24px;letter-spacing:-.05em}.stat p{color:var(--mute);font-size:14px;margin-top:6px;max-width:38ch}

/* reel */
.reel{height:clamp(420px,78vh,820px);overflow:hidden;background:#000}
.reel canvas{position:absolute;inset:0}
.reel .ov{position:absolute;inset:0;padding:clamp(24px,5vw,90px);display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 60%)}
.reel .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:110px;height:110px;display:grid;place-items:center}
.reel .play svg{width:84px;height:84px;transition:transform .2s}.reel .play:hover svg{transform:scale(1.1)}
.reel h3{font-weight:500;font-size:clamp(20px,2vw,26px);letter-spacing:-.05em;max-width:24ch;margin-top:10px}

/* process */
.proc{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 12px)/3);gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:clamp(40px,5vw,72px)}
.proc::-webkit-scrollbar{display:none}
.step{scroll-snap-align:start;background:var(--panel);border-radius:var(--r-card);padding:26px;min-height:380px;display:flex;flex-direction:column}
.step .h{display:flex;justify-content:space-between;align-items:baseline}
.step h3{font-weight:600;font-size:clamp(28px,3vw,42px);letter-spacing:-.06em}.step .h b{color:var(--green);font-weight:600;font-size:18px}
.step>p{font-weight:500;margin-top:14px;max-width:30ch}
.step .o{font-size:13px;color:var(--mute);margin-top:10px}.step .o b{color:var(--text);font-weight:600}
.step ul{list-style:none;margin-top:auto;padding-top:28px}.step li{font-size:13.5px;padding:3px 0 3px 20px;position:relative;font-weight:500}
.step li::before{content:"+";position:absolute;left:0;color:var(--green)}
.arrows{display:flex;gap:10px;justify-content:center;margin-top:26px}
.arrows button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);color:var(--green);font-size:20px;transition:.2s}.arrows button:hover{background:var(--green);color:#041007}

/* cta strip */
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:clamp(60px,7vw,110px)}
.cta .mono{color:var(--mute)}
.cta h3{font-weight:600;font-size:clamp(24px,2.6vw,36px);letter-spacing:-.055em;line-height:1.12;max-width:20ch;margin:16px 0 30px}
.cta .who{display:flex;align-items:center;gap:16px}.cta .who::before{content:"LYVE STUDIOS";font-size:10px;font-weight:700;letter-spacing:.4em;color:var(--green)}
.cta .who i{flex:1;height:1px;background:var(--line)}
.cta .who div{font-size:14px;font-weight:600}.cta .who small{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--mute);font-weight:400;margin-top:3px}

/* bento */
.bento{display:grid;grid-template-columns:1.25fr .9fr .75fr;gap:6px;margin-top:clamp(40px,5vw,72px)}
.bento .card{padding:26px;min-height:240px;display:flex;flex-direction:column}
.bento h3{font-weight:600;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.055em;line-height:1.05}
.bento p{color:var(--mute);font-size:14.5px;margin-top:12px;max-width:40ch;font-weight:500}
.bento .dark{background:#000;border:1px solid var(--line);align-items:center;justify-content:center;text-align:center;grid-row:span 1}
.bento .big{font-weight:600;font-size:clamp(54px,6vw,92px);letter-spacing:-.07em;line-height:1}
.bento .acc{background:var(--green);color:#041007}.bento .acc p{color:#052b10}
.bento .wide{grid-column:span 2}
.bento .foot{margin-top:auto;padding-top:22px}
.five{display:flex;gap:6px;margin-top:auto;padding-top:24px;flex-wrap:wrap}.five span{font-family:var(--mono);font-size:10px;text-transform:uppercase;border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 10px}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:6px;margin-top:6px}
.calc .card{padding:28px}
.ctl{margin-top:22px}.ctl label{display:flex;justify-content:space-between;font-weight:600;font-size:15px}.ctl output{font-variant-numeric:tabular-nums;color:var(--green)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line);margin-top:16px;border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--green);border:4px solid var(--panel);box-shadow:0 0 0 1px var(--green);cursor:grab}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--green);border:4px solid var(--panel);box-shadow:0 0 0 1px var(--green);cursor:grab}
.outs{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;height:100%}
.out{background:var(--panel-2);border-radius:18px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;min-height:130px}
.out b{font-weight:600;font-size:clamp(30px,3.4vw,50px);letter-spacing:-.06em;font-variant-numeric:tabular-nums;line-height:1}
.out span{font-size:13px;color:var(--mute);font-weight:500}
.out.money b{color:var(--amber)}
.out.acc{background:var(--green);color:#041007}.out.acc span{color:#052b10}
.note{font-size:12.5px;color:var(--mute);margin-top:18px}

/* signals */
.sig{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;max-width:1100px;margin:clamp(40px,5vw,70px) auto 0;align-items:center}
.sig .q{font-size:64px;line-height:.5;color:var(--green);font-weight:700}
.sig blockquote{font-weight:600;font-size:clamp(20px,2.1vw,28px);letter-spacing:-.05em;line-height:1.2;margin:24px 0;min-height:5.2em}
.sig cite{font-style:normal;font-weight:600;display:block}.sig cite a{color:var(--mute);font-size:13px;border-bottom:1px solid var(--line)}
.sig .fig{aspect-ratio:.9;border-radius:var(--r-card);background:var(--panel);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px}
.sig .fig b{font-weight:600;font-size:clamp(40px,4.6vw,72px);letter-spacing:-.07em;line-height:1;color:var(--green);white-space:nowrap}
.sig .fig span{color:var(--mute);font-size:14px;margin-top:18px;max-width:22ch}
.dots{display:flex;gap:8px;margin-top:26px}.dots button{width:34px;height:4px;border-radius:4px;background:var(--line)}.dots button[aria-current="true"]{background:var(--green)}

/* story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:clamp(40px,5vw,72px)}
.story .case{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.story .case .t{padding:30px;display:flex;flex-direction:column}
.story .case h3{font-weight:600;font-size:clamp(28px,3vw,44px);letter-spacing:-.06em;margin:22px 0 14px}
.story .case p{color:var(--mute);font-size:14.5px;font-weight:500}
.story .case .v{position:relative;min-height:240px}
.story .m{padding:30px}
.story .m .h{display:flex;justify-content:space-between;align-items:baseline}
.story .m h4{font-weight:600;font-size:24px;letter-spacing:-.05em}
.three{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px}
.three div{padding:0 18px;border-left:1px solid var(--line)}.three div:first-child{border:0;padding-left:0}
.three b{font-weight:600;font-size:clamp(34px,3.8vw,56px);letter-spacing:-.06em;line-height:1;display:block}
.three b sup{font-size:.4em;color:var(--dim);margin-left:3px;vertical-align:1.1em}
.three span{font-size:12.5px;color:var(--mute);display:block;margin-top:14px;max-width:16ch}
.tag{font-family:var(--mono);font-size:10px;text-transform:uppercase;border:1px solid var(--amber);color:var(--amber);border-radius:var(--r-pill);padding:5px 10px;align-self:flex-start}
.route{list-style:none;margin-top:26px}.route li{display:grid;grid-template-columns:70px 1fr auto;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-weight:600;font-size:15px}
.route li span{font-family:var(--mono);font-size:11px;color:var(--mute);text-transform:uppercase;align-self:center;font-weight:400}

/* deals */
.deal{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,1.1fr) minmax(0,.8fr);gap:30px;align-items:start;background:var(--panel);border-radius:var(--r-card);padding:30px;margin-top:6px}
.deals{margin-top:clamp(40px,5vw,72px)}
.stub{width:88px;aspect-ratio:.68;border-radius:8px;padding:9px;display:flex;flex-direction:column;justify-content:space-between;font-size:11px;font-weight:700;transform:rotate(-4deg);background:var(--panel-2);border:1px solid var(--line)}
.stub.g{background:var(--green);color:#041007;border:0}.stub.w{background:#fff;color:#041007;border:0}
.stub i{display:block;height:14px;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 3px,currentColor 3px 5px,transparent 5px 6px)}
.deal h3{font-weight:600;font-size:clamp(28px,3vw,40px);letter-spacing:-.06em;line-height:1}
.deal .fee{font-weight:600;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.05em;color:var(--amber);margin:12px 0}
.deal .fee small{font-size:12px;color:var(--mute);font-weight:500;letter-spacing:0;display:block;margin-top:4px}
.deal ul{list-style:none}.deal li{font-weight:500;font-size:14.5px;padding:5px 0 5px 22px;position:relative}
.deal li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:5px;border-left:1.5px solid var(--green);border-bottom:1.5px solid var(--green);transform:rotate(-45deg)}
.deal .act p{color:var(--mute);font-size:13.5px;margin-top:16px;max-width:22ch}

/* team */
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:clamp(40px,5vw,72px)}
.role{background:var(--panel);border-radius:var(--r-card);padding:24px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;transition:background .2s}
.role:hover{background:var(--panel-2)}
.role b{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--green)}
.role h4{font-weight:600;font-size:21px;letter-spacing:-.05em;line-height:1.1}.role p{font-size:13px;color:var(--mute);margin-top:8px;font-weight:500}
.role.hubs{background:var(--green);color:#041007}.role.hubs b{color:#041007}.role.hubs p{color:#052b10}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:clamp(30px,8vw,140px);margin-top:clamp(40px,5vw,72px)}
.faq aside h3{font-weight:600;font-size:26px;letter-spacing:-.055em;line-height:1.1;margin:22px 0 12px}.faq aside p{color:var(--mute);font-size:14px;max-width:28ch}
.faq .thumb{width:170px;aspect-ratio:1.35;border-radius:14px;overflow:hidden;position:relative}
.qa{border-radius:14px;margin-bottom:4px;transition:background .2s}
.qa.open,.qa:hover{background:var(--panel)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px;font-weight:600;font-size:16.5px;text-align:left}
.qa button::after{content:"+";color:var(--green);font-size:26px;font-weight:400;line-height:1;transition:transform .25s}
.qa.open button::after{transform:rotate(45deg)}
.qa div{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}.qa.open div{grid-template-rows:1fr}
.qa p{overflow:hidden;color:var(--mute);font-size:14.5px;padding-inline:20px;max-width:70ch;font-weight:500}.qa.open p{padding-bottom:20px}

/* brief */
.brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:6px;margin-top:clamp(40px,5vw,72px)}
.brief .card{padding:30px}
.f{margin-bottom:24px}.f>label,.f>span{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.f .chips{justify-content:flex-start;margin:0}
.f input[type=text],.f select{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);font:inherit;font-weight:600;font-size:17px;padding:8px 0;border-radius:0}
.f select option{background:var(--panel)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sheet{background:#000;border:1px solid var(--line);position:sticky;top:76px}
.sheet h4{font-weight:600;font-size:24px;letter-spacing:-.055em;margin:14px 0 18px}
.sheet dl{display:grid;grid-template-columns:110px 1fr;gap:0}
.sheet dt,.sheet dd{padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.sheet dt{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;color:var(--mute);padding-top:12px}.sheet dd{font-weight:600}
.sheet .go{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap}
.sheet small{color:var(--mute);font-size:12.5px}

/* footer */
footer{background:var(--ink-2);padding-top:40px}
.giant{font-weight:600;text-transform:uppercase;letter-spacing:-.07em;line-height:.8;font-size:13.1vw;white-space:nowrap;overflow:hidden;border-bottom:1px solid var(--line);padding-bottom:.06em}
.giant b{font-weight:600;color:var(--green)}
.tagline{text-align:right;font-size:11px;font-weight:700;text-transform:uppercase;padding:8px 0 40px}.tagline b{color:var(--green)}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.news h3{font-weight:600;font-size:clamp(30px,3.2vw,44px);letter-spacing:-.06em;display:inline}
.news>p{display:inline-block;vertical-align:top;border-left:1px solid var(--green);padding-left:12px;margin-left:12px;font-size:13px;color:var(--mute);max-width:24ch}
.news form{max-width:340px;margin-top:22px}
.news input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);font:inherit;font-size:14px;padding:10px 2px;margin-bottom:6px;border-radius:0}
.news button{font-weight:600;font-size:19px;margin-top:12px;display:inline-flex;gap:12px;align-items:center}.news button::after{content:"";width:30px;height:1.5px;background:var(--green)}
.news output{display:block;font-size:13px;color:var(--green);margin-top:10px;min-height:1.4em}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cols h5{font-family:var(--mono);font-weight:400;font-size:10.5px;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.cols a,.cols span{display:block;font-weight:600;font-size:15.5px;padding:4px 0}.cols a:hover{color:var(--green)}
.base{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-block:30px 40px}
.base h4{font-weight:600;font-size:21px;letter-spacing:-.05em;max-width:18ch;line-height:1.15}.base h4 b{color:var(--green);font-weight:600}
.base p{font-size:12.5px;color:var(--mute);margin-top:14px;max-width:34ch}
.base .big{font-weight:600;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.055em}.base .big i{font-style:normal;color:var(--dim)}

@media (max-width:980px){
  .fmt{grid-template-columns:1fr}.fmt .list{display:flex;flex-wrap:wrap;gap:4px 18px}.fmt .subs{display:flex;flex-wrap:wrap;gap:0 18px}
  .dist,.stats,.cta,.calc,.sig,.story,.faq,.brief,.fgrid,.base{grid-template-columns:1fr}
  .stats .txt{padding-left:0}.bento{grid-template-columns:1fr 1fr}.bento .wide{grid-column:span 2}
  .proc{grid-auto-columns:calc((100% - 6px)/2)}.roles{grid-template-columns:1fr 1fr}
  .deal{grid-template-columns:90px 1fr}.deal ul,.deal .act{grid-column:2}
  .sheet{position:static}.sig .fig{aspect-ratio:2}
}
@media (max-width:640px){
  .nav{grid-template-columns:auto 1fr;gap:18px}.mark{font-size:13px;letter-spacing:.3em}.nav nav{font-size:14px;gap:10px}
  .hero-top{grid-template-columns:1fr;gap:26px;top:86px}
  .tiles{grid-template-columns:1fr}.tile{aspect-ratio:1.4}
  .proc{grid-auto-columns:86%}.bento{grid-template-columns:1fr}.bento .wide{grid-column:auto}
  .story .case{grid-template-columns:1fr}.three{grid-template-columns:1fr;gap:20px}.three div{border:0;padding:0}
  .roles,.outs,.two,.cols{grid-template-columns:1fr}.stat{grid-template-columns:1fr}
  .shead{flex-direction:column;gap:14px}.shead .r{text-align:left}.shead .r .live{justify-content:flex-start}
  .deal{grid-template-columns:1fr}.deal ul,.deal .act{grid-column:auto}
  .side{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marq div{animation:none}*{transition:none!important}}

/* hero background film */
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.08) brightness(.8);transition:opacity .6s}
.hero video.off{opacity:0}
.hero .tint{position:absolute;inset:0;background:radial-gradient(ellipse at 85% 15%,rgba(3,220,73,.5),transparent 55%),linear-gradient(180deg,rgba(3,60,25,.35),rgba(5,6,5,.2));mix-blend-mode:screen;pointer-events:none;transition:opacity .6s}
.hero video.off+.tint{opacity:0}
.thumbs button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* motion layer carried over from v2 */
.rvw i{font-style:normal;color:var(--dim);transition:color .3s}.rvw i.on{color:var(--text)}
.stag span,.stag span.on{color:inherit}.lines p,.lines p:first-child{color:inherit}
.hero .dot,.shead .dot{animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.hero h1 span{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}.hero h1 span:nth-child(2){animation-delay:.1s}.hero h1 span:nth-child(3){animation-delay:.2s}
@keyframes rise{from{transform:translateY(40%);opacity:0}}
.thumbs{position:absolute;right:var(--gut);top:46%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:5px}
.thumbs button{position:relative;width:92px;height:52px;border-radius:10px;overflow:hidden;opacity:.5;border:1px solid transparent;transition:opacity .2s,transform .2s}
.thumbs button:hover{opacity:1;transform:translateX(-4px)}.thumbs button[aria-pressed="true"]{opacity:1;border-color:var(--green)}
.zoom{height:230vh;position:relative}
.zoom .stick{position:sticky;top:0;height:100vh;overflow:hidden}
.zoom .zg{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.5fr 1fr;grid-template-rows:1fr 1.5fr 1fr;gap:6px;transform-origin:50% 50%;will-change:transform}
.zoom .zg div{position:relative;overflow:hidden;border-radius:4px;background:var(--panel)}
.zoom .ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.6),transparent 62%)}
.zoom .ov h2{font-weight:600;text-transform:uppercase;font-size:clamp(46px,8vw,124px);letter-spacing:-.065em;line-height:.95}
.zoom .ov h2 b{color:var(--green);font-weight:600}
.zoom .ov p{margin-top:16px;color:#e3e8e4}
.reelwrap{padding:clamp(30px,5vw,80px) var(--gut);overflow:hidden;background:var(--ink)}
.reelwrap .reel{border-radius:var(--r-card);transform:rotate(-4deg) scale(.84);will-change:transform}
.step{transition:transform .35s cubic-bezier(.2,.7,.2,1),background .25s}.step:hover{transform:translateY(-8px);background:var(--panel-2)}
.role{transition:transform .35s cubic-bezier(.2,.7,.2,1),background .2s}.role:hover{transform:translateY(-6px)}
.bento .card{transition:transform .35s cubic-bezier(.2,.7,.2,1)}.bento .card:hover{transform:translateY(-6px)}
.deal{transition:transform .35s cubic-bezier(.2,.7,.2,1)}.deal:hover{transform:translateX(8px)}
.out b{transition:color .2s}
@media (max-width:980px){.thumbs{display:none}.zoom{height:auto}.zoom .stick{position:relative;height:78vh}.reelwrap .reel{transform:none!important}}
@media (prefers-reduced-motion:reduce){.reelwrap .reel{transform:none}.hero h1 span,.hero .dot,.shead .dot{animation:none}}