/* One design and sizing system for the complete Arkiden site. */
:root{--max:1400px;--gutter:clamp(22px,4.8vw,60px);--bg:#02050C;--bg-2:#060A15;--bg-3:#0B1120;--head:#edf1f5;--text:#bbc8d3;--muted:#90a0b1;--line:#ffffff16;--line-2:#ffffff26;--r:10px;--sp-xl:96px;--sp-l:80px;--sp-m:56px;--sp-s:32px;--sp-seq:80px}
body{background:var(--bg);color:var(--text);font-family:Geist,Arial,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.page{max-width:var(--max);margin-inline:auto;background:transparent}
.bar,.wrap{max-width:var(--max);padding-inline:var(--gutter)}
.site-head{background:#040f17ed;border-bottom:1px solid var(--line)}
.site-footer{background:linear-gradient(135deg,#091c2855,#02050C);border-top:1px solid var(--line)}
h1,.h1,.display,.collection h1{font-size:clamp(38px,4.5vw,64px);font-weight:700;line-height:1.08;letter-spacing:-.04em}
h2,.h2{font-size:clamp(28px,2.65vw,38px);font-weight:650;line-height:1.18;letter-spacing:-.025em}
h3,.h3{font-size:22px;line-height:1.3;letter-spacing:-.02em}
.lede,.collection>.lead{font-size:18px;line-height:1.65;color:var(--text);max-width:65ch}
.btn,.hero-action{font-size:14px;line-height:1.3;font-weight:600;padding:13px 21px;border-radius:6px}
.site-nav .btn{border-radius:999px}
.idx,.portfolio-kicker,.eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em}
/* Product directory: the same content edges and bounded type as every page. */
.collection{padding:64px var(--gutter) 80px}
.collection h1{margin:0 0 24px}
.collection>.lead{max-width:760px;margin-bottom:0}
.filter-tools{margin:32px 0 18px}
.filters button{font-size:13px;padding:11px 16px;min-height:44px}
.search{font-size:14px;min-height:46px}
.count{font-size:13px;margin:0 0 24px}
.grid{gap:24px;grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:radial-gradient(ellipse at top,color-mix(in srgb,var(--accent),transparent 91%),transparent 75%),#060A15;border-color:var(--line-2);border-radius:10px}
.card-body{padding:22px}
.card h2{font-size:20px;line-height:1.3;letter-spacing:-.02em;margin:0 0 14px;min-height:2.6em}
.card-description{font-size:14px;line-height:1.65;margin:0 0 22px;min-height:8.25em}
.card-sector,.card-status{font-size:12px;line-height:1.6;margin-bottom:12px}
.card-price{font-size:14px;line-height:1.6;margin:0 0 22px;color:#c4cfd9}
.card-price small{font-size:12px}
.card-go{font-size:13px;padding-top:16px;line-height:1.6}
.card-go b{font-size:19px}
/* Product study layouts keep their art proportions, with consistent readable copy. */
.product-page .hero h1{font-size:var(--title);line-height:1.08}
.product-page .hero h2{font-size:var(--headline);line-height:1.24}
.product-page .hero p{font-size:clamp(16px,1.62cqw,21px);line-height:1.55}
.product-page .hero-action{margin-top:20px}
.product-page .page-meta{font-size:13px;padding:18px var(--gutter);gap:20px}
.story{padding:44px var(--gutter);gap:40px}
.story h2{font-size:24px;line-height:1.3;margin-bottom:12px}
.story p{font-size:16px;line-height:1.65}
.story section{grid-template-columns:56px 1fr;gap:20px}
.story section+section{grid-template-columns:56px 1fr;padding-left:40px}
.story-icon{width:48px;height:48px}.story-icon svg{width:28px;height:28px}
.interface{margin-inline:var(--gutter);margin-bottom:24px}
.features{padding:36px var(--gutter) 28px}
.feature{padding-inline:22px}
.feature h3{font-size:20px;margin:20px 0 12px;line-height:1.3}
.feature p{font-size:15px;line-height:1.65}
.icon{width:76px;height:76px;border-radius:12px}.icon svg{width:44px;height:44px}
.workflow{padding:24px var(--gutter) 56px}
.workflow h2{font-size:24px;margin-bottom:28px}
.steps{gap:28px}
.step{padding-top:54px}.step:before{width:36px;height:36px;font-size:14px}.step:after{top:18px;left:48px;right:-14px}
.step h3{font-size:16px;margin-bottom:8px}.step p{font-size:14px}
.suite-panels{padding:12px var(--gutter) 44px;gap:24px}
.suite-panels .card p{font-size:15px}
/* Services, home, about and supporting pages adopt the directory's navy panels. */
.content-page main{background:radial-gradient(ellipse at 50% 25%,#09203155,transparent 50%),#02050C}
.content-page .sheet,.content-page .stage{background:transparent}
.content-page .mist{background:linear-gradient(180deg,#02050C,#071721 45%,#02050C)}
.content-page .page-hero{padding-block:64px 56px;background:radial-gradient(ellipse at 85% 20%,#24405244,transparent 55%),linear-gradient(120deg,#02050C,#081925);border-bottom:1px solid var(--line)}
.content-page .page-hero:after{display:none}
.content-page .hero{background:radial-gradient(ellipse at 80% 50%,#19384855,transparent 60%),#02050C;padding-block:64px 56px;border-bottom:1px solid var(--line)}
.content-page .hero-copy h1{font-size:clamp(38px,4.1vw,58px);line-height:1.12;letter-spacing:-.04em}
.content-page .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px}
.content-page .hero-copy{max-width:540px}
.content-page .hero-copy .eyebrow{border:0;padding:0;background:none;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--gold)}
.content-page .hero-copy .eyebrow img{display:none}
.content-page .show-stage{aspect-ratio:1.65;perspective:none}
.content-page .show-tilt{transform:none!important}
.show-scene{position:absolute;inset:0;display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 24px 60px #0005}
.show-scene img{width:100%;height:100%;object-fit:cover}
.content-page .portfolio-section{padding:64px 0;border-bottom:1px solid var(--line)}
.content-page .portfolio-art-frame{border-radius:10px;background:#060A15;border-color:var(--line-2)}
.content-page .project{padding:32px;margin:0 0 24px;border:1px solid var(--line-2);border-radius:10px;background:radial-gradient(ellipse at 0 0,#d8b76f0c,transparent 65%),#060A15;gap:36px}
.content-page .project h2{font-size:28px;line-height:1.25}
.content-page .qa>div,.content-page .tech,.content-page .svc,.content-page .founder,.content-page .callout,.content-page .portfolio-card{border-radius:10px;background:linear-gradient(135deg,#11233055,#060A15);border-color:var(--line-2);box-shadow:none}
.content-page .qa h3,.content-page .tech h3{font-size:18px;line-height:1.4}
.content-page .qa p,.content-page .tech p{font-size:15px;color:var(--text)}
.content-page .portfolio-features h3{font-size:20px}
.content-page .portfolio-features p{color:var(--text);font-size:15px}
.content-page .field input,.content-page .field select,.content-page .field textarea{background:#091721;border:1px solid #2A2440;border-radius:8px;font-size:16px}
.content-page .prose{max-width:980px}
.content-page .prose h2{font-size:24px}
@media(min-width:1400px){.product-page .hero h1{font-size:min(var(--title),64px)}.product-page .hero h2{font-size:min(var(--headline),46px)}}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card-description{min-height:6.6em}.content-page .hero-grid{grid-template-columns:1fr}.content-page .hero-copy{max-width:760px}.content-page .show{max-width:900px;width:100%;margin-inline:auto}.content-page .hero-copy h1{font-size:clamp(38px,5vw,58px)}}
@media(max-width:800px){:root{--sp-xl:72px;--sp-l:56px;--sp-m:44px;--sp-s:24px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.collection,.content-page .page-hero{padding-block:44px}.story{grid-template-columns:1fr;padding-block:32px;gap:28px}.story section+section{border:0;padding-left:0}.features{grid-template-columns:repeat(2,1fr);gap:32px 0}.feature:nth-child(2){border-right:0}.steps{grid-template-columns:repeat(2,1fr)}.content-page .project{padding:26px;grid-template-columns:1fr}.content-page .portfolio-section{padding-block:48px}}
@media(max-width:700px){h1,.h1,.display,.collection h1{font-size:38px}.lede,.collection>.lead{font-size:16px}.product-page .hero h1{font-size:34px}.product-page .hero h2{font-size:30px}.product-page .hero-copy{margin-inline:var(--gutter)}.product-page .hero p{font-size:16px}.page-meta .meta-price{margin-left:0;width:100%}.story h2{font-size:22px}.story p{font-size:15px}.feature{padding-inline:14px}.feature h3{font-size:18px}.feature p{font-size:14px}.workflow h2{font-size:22px}.step h3{font-size:15px}.step p{font-size:13px}.card-body{padding:20px}.card h2{font-size:19px}.card-description{font-size:14px;min-height:0}.content-page .hero{padding-block:44px}.content-page .hero-copy h1{font-size:38px}.content-page .show-stage{aspect-ratio:1.55}.content-page .project h2{font-size:25px}.content-page .project .two{grid-template-columns:1fr}.suite-panels{grid-template-columns:1fr}}
@media(max-width:480px){.grid{grid-template-columns:1fr}.card h2{min-height:0}.card-art{aspect-ratio:1.9}.card-body{padding:22px}.collection h1{font-size:38px}.filters{gap:8px}.filters button{font-size:12px;padding:10px 14px}.filter-tools{gap:20px}.search{width:100%}.story section,.story section+section{grid-template-columns:40px 1fr;gap:16px}.story-icon{width:36px;height:36px}.story-icon svg{width:23px;height:23px}.features{padding-inline:16px}.icon{width:60px;height:60px}.icon svg{width:34px;height:34px}.content-page .project{padding:22px}.content-page .btn{min-height:44px}.content-page .page-hero .actions{margin-top:24px}}
/* Content remains visible without waiting for scroll animations. */
.js .rv{opacity:1;transform:none;transition:none}
@media(min-width:1101px){.product-page .hero h1{font-size:min(var(--title),64px)}.product-page .hero h2{font-size:min(var(--headline),46px)}}
@media(max-width:1100px) and (min-width:701px){.product-page .hero{aspect-ratio:auto;min-height:0;padding-top:1px;padding-bottom:390px;background:#060A15}.product-page .hero-copy{position:relative;left:auto;top:auto;width:auto;margin:44px var(--gutter) 36px;max-width:650px}.product-page .hero h1{font-size:38px;margin-bottom:20px}.product-page .hero h2{font-size:34px;margin-bottom:18px;max-width:560px}.product-page .hero p{font-size:17px;max-width:570px}.product-page .hero>img{height:390px;top:auto;bottom:0;z-index:0;object-position:75% center;mask-image:linear-gradient(to bottom,transparent,#000 20%)}.product-page .hero:after{display:none}.product-page .hero-copy{z-index:1}}

.product-type{font-size:11px;line-height:1.5;color:var(--accent,var(--gold));letter-spacing:.04em;margin:0 0 8px}.card .product-type{min-height:3em}.card h2{min-height:0}

.site-nav .portal-nav{border:1px solid #e2c27a44;padding:9px 15px;border-radius:999px;color:#e2c27a}