/* Devoted Action studio homepage. Dark-canvas system: Inter 400 + Geist Mono eyebrows, pill buttons, hairline cards. Used only by / (the /gita page keeps styles.css). */
:root{
  --canvas:#0a0a0a;--canvas-soft:#1a1c20;--canvas-card:#191919;--canvas-mid:#363a3f;--hairline:#212327;
  --ink:#fff;--body:#dadbdf;--mute:#7d8187;--pill:rgba(255,255,255,.25);
  --sunset:#ff7a17;--sunset-soft:#ffc285;--dusk:#7c3aed;--twilight:#c4b5fd;--breeze:#a0c3ec;--midnight:#0d1726;
  --sans:"Inter",system-ui,-apple-system,sans-serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--canvas);color-scheme:dark}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 16px/24px var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
b,strong,h1,h2,h3,h4{font-weight:400}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:var(--canvas);border-bottom:1px solid var(--hairline)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 24px}
.nav .logo{font:400 14px/20px var(--mono);letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
.nav nav{display:flex;align-items:center;gap:24px;font-size:14px;line-height:20px}
.nav nav a{color:var(--ink)}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid var(--pill);border-radius:9999px;background:transparent;color:var(--ink);font:400 14px/20px var(--sans);cursor:pointer;white-space:nowrap;-webkit-appearance:none;appearance:none}
.pill.primary{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.pill.sm{min-height:32px;padding:4px 12px}
.pill.wide{width:100%}

/* type */
.eyebrow{font:400 14px/20px var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--ink);margin:0 0 16px}
.eyebrow.sm{font-size:12px;line-height:16px;letter-spacing:1.2px;color:var(--mute)}
.eyebrow.dim{color:var(--mute)}
h1{font-size:96px;line-height:96px;letter-spacing:-2.4px;margin:0 0 32px;max-width:1000px}
h2{font-size:48px;line-height:48px;letter-spacing:-1.2px;margin:0 0 24px}
h3{font-size:20px;line-height:28px;margin:0 0 8px}
.display-sm{font-size:32px;line-height:36px;letter-spacing:-.6px}
.lead{font-size:18px;line-height:28px;color:var(--body);max-width:720px;margin:0 0 16px}
p{margin:0 0 16px;color:var(--body)}
.mute{color:var(--mute)}
.small{font-size:14px;line-height:20px}

/* bands */
section{padding:64px 24px;border-top:1px solid var(--hairline)}
section .wrap{padding:0}
.hero{padding:96px 24px 64px;border-top:0}
.hero .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* metrics */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;padding-top:32px;border-top:1px solid var(--hairline)}
.metric .eyebrow{margin:0 0 8px}
.metric .v{font-size:32px;line-height:36px;letter-spacing:-.6px;margin:0 0 4px}
.metric p{margin:0;color:var(--mute);font-size:14px;line-height:20px}

/* cards */
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--canvas-card);border:1px solid var(--hairline);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:8px}
.card .eyebrow{margin:0 0 12px}
.card p{margin:0;color:var(--body)}
.card p+p{margin-top:8px}
.card .ill{width:48px;height:48px;margin-bottom:16px}
.card .ill svg{width:48px;height:48px;display:block}

/* example / quote */
.quote{margin-top:16px;background:var(--canvas-card);border:1px solid var(--hairline);border-radius:8px;padding:24px}
.quote q{display:block;quotes:none;font-size:32px;line-height:36px;letter-spacing:-.6px;margin:0 0 16px;max-width:900px}
.quote p{margin:0}

/* product feature */
.feature{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;background:var(--canvas-card);border:1px solid var(--hairline);border-radius:8px;padding:24px}
.feature .shot{border:1px solid var(--hairline);border-radius:8px;overflow:hidden;background:var(--canvas-soft)}
.feature .shot img{width:100%;height:520px;object-fit:cover;object-position:top}
.feature .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.feature .txt h3{font-size:32px;line-height:36px;letter-spacing:-.6px;margin-bottom:16px}

/* form */
.contact .wrap{max-width:720px}
form.lead-form{display:grid;gap:16px;margin-top:32px}
form.lead-form label{display:block;font-size:14px;line-height:20px;color:var(--body)}
form.lead-form label>input,form.lead-form label>select,form.lead-form label>textarea{margin-top:8px}
form.lead-form .opt{color:var(--mute)}
form.lead-form input,form.lead-form select,form.lead-form textarea{width:100%;background:var(--canvas-soft);color:var(--ink);border:1px solid var(--hairline);border-radius:8px;padding:12px 16px;font:400 16px/24px var(--sans);-webkit-appearance:none;appearance:none;outline:0}
form.lead-form input:focus,form.lead-form select:focus,form.lead-form textarea:focus{border-color:var(--pill)}
form.lead-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23dadbdf' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
form.lead-form textarea{resize:vertical;min-height:150px}
form.lead-form .pill{margin-top:8px}
form.lead-form .fine{margin:0;font-size:14px;line-height:20px;color:var(--mute)}
form.lead-form .fine a{color:var(--body);border-bottom:1px solid var(--hairline)}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* footer */
footer{border-top:1px solid var(--hairline);padding:48px 24px;font-size:14px;line-height:20px;color:var(--body)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 24px;padding:0}
footer nav{display:flex;flex-wrap:wrap;gap:16px 24px}
footer .mono{font:400 12px/16px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--mute);width:100%}

@media (max-width:980px){
  .grid.three{grid-template-columns:repeat(2,1fr)}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr}
}
@media (max-width:767px){
  h1{font-size:48px;line-height:48px;letter-spacing:-1.2px}
  h2{font-size:32px;line-height:36px;letter-spacing:-.6px}
  .quote q,.feature .txt h3{font-size:24px;line-height:30px;letter-spacing:-.4px}
  .hero{padding:48px 24px}
  .feature .shot img{height:320px}
  section{padding:48px 24px}
  .grid.two,.grid.three,.metrics{grid-template-columns:1fr}
  .nav nav{gap:16px}
  .nav nav a:not(.pill){display:none}
  .pill{min-height:44px}
  .pill.sm{min-height:36px}
}

/* ---------- motion layer (redesign 2026-10-20) ---------- */
body{overflow-x:hidden}
.nav{background:rgba(10,10,10,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hero{position:relative;overflow:hidden;min-height:calc(100vh - 57px);display:flex;align-items:center}
.hero .wrap{position:relative;z-index:2;width:100%}
.aurora{position:absolute;inset:-20%;z-index:0;pointer-events:none;filter:blur(90px);opacity:.22}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:drift 18s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:46vw;height:46vw;left:48%;top:8%;background:radial-gradient(circle,var(--sunset) 0,transparent 65%)}
.aurora i:nth-child(2){width:42vw;height:42vw;left:62%;top:38%;background:radial-gradient(circle,var(--dusk) 0,transparent 65%);animation-duration:22s;animation-delay:-6s}
.aurora i:nth-child(3){width:34vw;height:34vw;left:30%;top:50%;background:radial-gradient(circle,var(--breeze) 0,transparent 65%);opacity:.6;animation-duration:26s;animation-delay:-12s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vw,6vh) scale(1.15)}100%{transform:translate(6vw,-4vh) scale(.95)}}
.gridlines{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 0,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 0,transparent 75%);opacity:.6}
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero h1 .rot{display:inline-block;background:linear-gradient(90deg,var(--sunset-soft),var(--sunset),var(--twilight));-webkit-background-clip:text;background-clip:text;color:transparent;transition:opacity .35s,transform .35s}
.hero h1 .rot.out{opacity:0;transform:translateY(.25em)}
.badge{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 10px;border:1px solid var(--hairline);border-radius:9999px;background:rgba(25,25,25,.6);font:400 13px/18px var(--sans);color:var(--body);margin-bottom:28px}
.badge .dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,220,132,.6)}80%,100%{box-shadow:0 0 0 10px rgba(61,220,132,0)}}
.pill{transition:border-color .2s,background .2s}
.pill:not(.primary):hover{border-color:var(--ink)}

/* showreel marquee */
.reel{padding:48px 0 64px;overflow:hidden}
.reel .wrap{padding:0 24px;margin-bottom:24px}
.track{display:flex;gap:16px;width:max-content;animation:scroll 70s linear infinite}
.reel:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.tile{position:relative;flex:0 0 auto;width:220px;aspect-ratio:9/16;border-radius:8px;overflow:hidden;border:1px solid var(--hairline);background:var(--canvas-soft);margin:0}
.tile.wide{width:auto;aspect-ratio:16/9;height:391px}
.tile video,.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:32px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.85));font:400 12px/16px var(--mono);letter-spacing:1px;text-transform:uppercase;color:#fff}
.tile figcaption span{display:block;color:var(--body);text-transform:none;letter-spacing:0;font-family:var(--sans);margin-top:2px}

/* turnkey list */
.turnkey{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:8px;overflow:hidden;margin-top:40px}
.turnkey>div{background:var(--canvas);padding:28px;transition:background .3s}
.turnkey>div:hover{background:var(--canvas-card)}
.turnkey .n{font:400 12px/16px var(--mono);color:var(--sunset);letter-spacing:1.2px;margin-bottom:20px;display:block}
.turnkey h3{margin-bottom:10px}
.turnkey p{margin:0;font-size:15px;line-height:23px}
.turnkey ul{margin:12px 0 0;padding:0;list-style:none;font-size:14px;line-height:22px;color:var(--mute)}
.turnkey li::before{content:"+ ";color:var(--sunset-soft)}

/* cases */
.cases{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:40px}
.case{grid-column:span 3;position:relative;border:1px solid var(--hairline);border-radius:8px;overflow:hidden;background:var(--canvas-card);display:flex;flex-direction:column;transition:border-color .3s,transform .3s}
.case:hover{border-color:var(--canvas-mid);transform:translateY(-2px)}
.case.third{grid-column:span 2}
.case .media{aspect-ratio:16/10;overflow:hidden;background:var(--canvas-soft);position:relative}
.case .media img,.case .media video{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.case:hover .media img,.case:hover .media video{transform:scale(1.04)}
.case .media.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px}
.case .body{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.case .body p{margin:0}
.case .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px}
.case .tags span{font:400 11px/16px var(--mono);letter-spacing:.8px;text-transform:uppercase;color:var(--mute);border:1px solid var(--hairline);border-radius:9999px;padding:3px 10px}
.case .link{font-size:14px;color:var(--sunset-soft)}
.case.ai .media{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,rgba(124,58,237,.45),transparent 60%),radial-gradient(circle at 75% 70%,rgba(255,122,23,.35),transparent 55%),var(--canvas-soft)}
.wave{display:flex;align-items:center;gap:5px;height:90px}
.wave i{display:block;width:6px;height:14px;border-radius:3px;background:linear-gradient(var(--sunset-soft),var(--dusk));animation:eq 1.2s ease-in-out infinite}
.wave i:nth-child(odd){animation-duration:.9s}.wave i:nth-child(3n){animation-duration:1.5s}.wave i:nth-child(4n){animation-delay:-.4s}
@keyframes eq{0%,100%{height:14px}50%{height:84px}}
.langs{position:absolute;left:16px;bottom:14px;display:flex;gap:6px}
.langs span{font:400 11px/16px var(--mono);background:rgba(0,0,0,.5);border:1px solid var(--hairline);border-radius:6px;padding:2px 8px;color:var(--body)}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat .v{font-size:56px;line-height:60px;letter-spacing:-1.6px;background:linear-gradient(180deg,#fff,#8a8d93);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat p{margin:6px 0 0;color:var(--mute);font-size:14px;line-height:20px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;counter-reset:s}
.steps .card::before{counter-increment:s;content:"0" counter(s);font:400 40px/40px var(--sans);letter-spacing:-1px;color:var(--canvas-mid);margin-bottom:16px}

/* cta band */
.cta{position:relative;overflow:hidden;text-align:center}
.cta .aurora{opacity:.18}
.cta .wrap{position:relative;z-index:2}
.cta h2{max-width:820px;margin:0 auto 20px}
.cta .lead{margin:0 auto 28px}

/* reveal on scroll (only when JS runs) */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.js .rv.in{opacity:1;transform:none}

@media (max-width:980px){
  .turnkey,.steps{grid-template-columns:repeat(2,1fr)}
  .case,.case.third{grid-column:span 6}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .hero{min-height:auto;padding:64px 16px 56px}
  .reel .wrap{padding:0 16px}
  .tile{width:160px}.tile.wide{width:auto;height:284px}
  .turnkey,.steps{grid-template-columns:1fr}
  .stat .v{font-size:40px;line-height:44px}
  section{padding:48px 16px}
  .aurora{opacity:.2}
}
@media (prefers-reduced-motion:reduce){
  .aurora i,.track,.wave i,.badge .dot{animation:none}
  .js .rv{opacity:1;transform:none}
}

/* mono ticker */
.ticker{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);overflow:hidden;padding:14px 0;white-space:nowrap}
.ticker .row{display:inline-flex;gap:40px;width:max-content;animation:scroll 50s linear infinite;font:400 13px/18px var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--mute)}
.ticker .row span::before{content:"✦";color:var(--sunset);margin-right:40px}
.price{font:400 20px/28px var(--mono);letter-spacing:1px;color:var(--ink);margin:8px 0 0}
@media (prefers-reduced-motion:reduce){.ticker .row{animation:none}}

/* ---------- visual layer v2: neural canvas, product tiles, pipeline, drawn icons ---------- */
#net{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.announce{display:inline-flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border:1px solid var(--hairline);border-radius:9999px;background:rgba(25,25,25,.7);font:400 13px/20px var(--sans);color:var(--body);margin-bottom:28px;transition:border-color .2s}
.announce:hover{border-color:var(--pill)}
.announce b{font:400 11px/16px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--canvas);background:var(--sunset-soft);border-radius:9999px;padding:2px 8px}
.hero h1{max-width:1100px}
.hero h1 .rot{white-space:nowrap}

/* product tiles under hero */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.ptile{display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:8px;background:var(--canvas-card);overflow:hidden;transition:border-color .25s}
.ptile:hover{border-color:var(--canvas-mid)}
.ptile .pv{aspect-ratio:4/5;overflow:hidden;background:var(--canvas-soft)}
.ptile .pv img,.ptile .pv video{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.ptile:hover .pv img,.ptile:hover .pv video{transform:scale(1.05)}
.ptile .tx{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.ptile .tx p{margin:0;font-size:14px;line-height:20px}
.ptile .go{margin-top:auto;padding-top:8px;font-size:14px;color:var(--ink)}
.ptile .go::after{content:" →";transition:margin .2s}
.ptile:hover .go::after{margin-left:4px}

/* big mono numbers */
.bignums{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bignums>div{border-left:1px solid var(--hairline);padding-left:20px}
.bignums .v{font:400 40px/44px var(--mono);letter-spacing:-1px;color:var(--ink)}
.bignums p{margin:8px 0 0;font-size:14px;line-height:20px;color:var(--mute)}

/* pipeline */
.pipe{display:flex;align-items:center;margin-top:40px;padding:32px 24px;border:1px solid var(--hairline);border-radius:8px;background:var(--canvas-card);overflow:hidden}
.node{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:.35;transition:opacity .4s}
.node.on{opacity:1}
.node .ic{width:56px;height:56px;border-radius:50%;border:1px solid var(--pill);display:flex;align-items:center;justify-content:center;background:var(--canvas);transition:border-color .4s}
.node.on .ic{border-color:var(--sunset)}
.node .ic svg{width:26px;height:26px}
.node span{font:400 11px/16px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--body)}
.link{flex:1;height:1px;min-width:16px;margin:0 8px 26px;background:var(--hairline);position:relative;overflow:hidden}
.link::after{content:"";position:absolute;top:-1px;left:-30%;width:30%;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--sunset),transparent);animation:flow 2.4s linear infinite}
.link:nth-of-type(4n)::after{animation-delay:-.6s}.link:nth-of-type(4n+2)::after{animation-delay:-1.2s;background:linear-gradient(90deg,transparent,var(--twilight),transparent)}
@keyframes flow{to{left:100%}}
.pipe-note{margin-top:16px;font-size:14px;color:var(--mute)}

/* drawn service icons */
.turnkey .art{width:96px;height:96px;margin-bottom:20px}
.turnkey .art svg{width:96px;height:96px;overflow:visible}
.turnkey .art *{fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.js .turnkey .art .d{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.6s ease .2s}
.js .turnkey .rv.in .art .d{stroke-dashoffset:0}
.turnkey .art .acc{fill:currentColor;stroke:none;opacity:0;transition:opacity .6s 1.2s}
.turnkey .rv.in .art .acc,html:not(.js) .turnkey .art .acc{opacity:1}

/* work cards on gradient (x.ai news style) */
.case .media{background:radial-gradient(120% 90% at 0% 0%,rgba(255,122,23,.28),transparent 55%),radial-gradient(120% 90% at 100% 100%,rgba(124,58,237,.32),transparent 55%),var(--canvas-soft)}
.case .media.pad{padding:20px;display:flex;align-items:center;justify-content:center;gap:12px}
.case .media.pad img,.case .media.pad video{width:auto;height:100%;max-width:31%;aspect-ratio:9/16;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,.08)}
.case .media.pad.one img,.case .media.pad.one video{max-width:100%;aspect-ratio:auto;width:100%}

/* choose how to start */
.choose{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.choose .card{padding:32px;gap:12px}
.choose .card h3{font-size:32px;line-height:36px;letter-spacing:-.6px}
.choose ul{margin:4px 0 8px;padding:0;list-style:none;color:var(--body);font-size:15px;line-height:26px}
.choose li::before{content:"+ ";color:var(--sunset-soft)}
.choose .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:8px}
.choose .thumb{border:1px solid var(--hairline);border-radius:8px;overflow:hidden;height:180px}
.choose .thumb img{width:100%;height:100%;object-fit:cover;object-position:top}

@media (max-width:980px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .bignums{grid-template-columns:repeat(2,1fr)}
  .choose{grid-template-columns:1fr}
}
@media (max-width:767px){
  .tiles{grid-template-columns:1fr 1fr}
  .tiles .ptile:last-child{grid-column:span 2}
  .tiles .ptile:last-child .pv{aspect-ratio:16/9}
  .bignums{grid-template-columns:1fr 1fr;gap:20px}
  .bignums .v{font-size:26px;line-height:30px}
  .pipe{flex-direction:column;align-items:flex-start;padding:24px}
  .node{flex-direction:row;gap:14px}
  .link{width:1px;height:22px;flex:0 0 auto;min-width:0;margin:4px 0 4px 28px}
  .link::after{left:-1px;top:-30%;width:3px;height:30%;animation-name:flowv;background:linear-gradient(180deg,transparent,var(--sunset),transparent)}
  .choose .card{padding:24px}
  .choose .card h3{font-size:24px;line-height:30px}
}
@keyframes flowv{to{top:100%}}
@media (prefers-reduced-motion:reduce){
  .link::after{animation:none;display:none}
  .js .turnkey .art .d{stroke-dashoffset:0;transition:none}
  .node{opacity:1}
}
@media (max-width:767px){.hero h1 br{display:none}}
.choose .thumb.pad{height:220px;padding:16px;display:flex;align-items:center;justify-content:center;gap:10px;background:radial-gradient(120% 90% at 0% 0%,rgba(255,122,23,.28),transparent 55%),radial-gradient(120% 90% at 100% 100%,rgba(124,58,237,.32),transparent 55%),var(--canvas-soft)}
.choose .thumb.pad img,.choose .thumb.pad video{height:100%;width:auto;aspect-ratio:9/16;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,.08)}
.choose .thumb.pad img.wide{aspect-ratio:16/9;object-position:left center}
@media (max-width:767px){.choose .thumb.pad{height:180px}.choose .thumb.pad img.wide{display:none}}
.nav .logo{display:inline-flex;align-items:center;gap:10px}
.nav .logo img{width:26px;height:26px;border-radius:6px}

/* services menu: business / people */
.menu{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-top:40px}
.menu .card{padding:28px}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.mhead h3{font-size:28px;line-height:32px;letter-spacing:-.5px;margin:0}
.mcols{columns:2;column-gap:28px}
.mgrp{break-inside:avoid;margin-bottom:22px}
.mgrp .eyebrow{margin:0 0 8px;color:var(--sunset-soft)}
.mgrp ul{margin:0;padding:0;list-style:none}
.mgrp li{font-size:15px;line-height:22px;color:var(--body);padding:5px 0;border-bottom:1px solid var(--hairline)}
.mgrp li:last-child{border-bottom:0}
@media (max-width:980px){.menu{grid-template-columns:1fr}}
@media (max-width:767px){.mcols{columns:1}.menu .card{padding:22px}.mhead h3{font-size:24px;line-height:30px}}
.nav nav a.lang,footer a.lang{font:400 12px/16px var(--mono);letter-spacing:1.2px;border:1px solid var(--hairline);border-radius:9999px;padding:4px 10px}
@media (max-width:767px){.nav nav a.lang{display:inline-block}}
.hero h1 .rot{padding:0 .04em .14em 0;margin-bottom:-.14em;vertical-align:top;line-height:1.1}
.hero h1 .rot{display:block;width:max-content;max-width:100%}
@media (max-width:1100px) and (min-width:768px){.hero h1{font-size:72px;line-height:76px;letter-spacing:-1.8px}}
@media (max-width:900px) and (min-width:768px){.hero h1{font-size:60px;line-height:64px;letter-spacing:-1.4px}}
@media (max-width:767px){.hero h1{font-size:42px;line-height:46px;letter-spacing:-1px}.hero h1 .rot{width:auto}}