/* Layout and colour are inline in the templates (src/build.mjs), as exported from the design.
   This file holds the base rules, keyframes and the hover/focus states inline styles cannot express. */
@font-face{font-family:Inter;src:url('/assets/inter-regular.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/inter-bold.woff2') format('woff2');font-weight:700 900;font-display:swap}
html{scroll-behavior:smooth;scroll-padding-top:84px;background:#0a0a0c}
body{margin:0;background:#0a0a0c;color:#f5f5f8;font-family:Inter,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
a:hover{color:#ffffff}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button,a{-webkit-tap-highlight-color:transparent}
::selection{background:#1a1a8a;color:#fff}
[hidden]{display:none!important}
button:focus-visible,a:focus-visible,video:focus-visible,[role=button]:focus-visible{outline:2px solid #b8b8c2;outline-offset:6px}
[data-drawer]:focus{outline:none}
.skip{position:fixed;top:-100px;left:20px;z-index:300;background:#fff;color:#000;padding:12px}
.skip:focus{top:12px}

@keyframes ajRise{from{transform:translateY(108%)}to{transform:none}}
@keyframes ajFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ajPulse{0%{box-shadow:0 0 0 0 rgba(200,200,210,.55)}70%{box-shadow:0 0 0 9px rgba(200,200,210,0)}100%{box-shadow:0 0 0 0 rgba(200,200,210,0)}}
@keyframes ajTravel{from{left:0%}to{left:100%}}
@keyframes ajBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes ajGlow{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.35)}}

/* Hover states. !important is needed to win over the inline base styles. */
.nav-link:hover,.filter:hover{color:#ffffff!important}
.motion:hover{border-color:rgba(255,255,255,.5)!important}
.button-solid:hover{background:#d8d8de!important;color:#101025!important;transform:translateY(-2px)}
.button-quiet:hover{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.6)!important;color:#ffffff}
.hover-accent:hover{border-color:var(--acc,#b8b8c2)!important;color:#ffffff}
.project-art:hover{border-color:rgba(200,200,210,.6)!important}
.index-row:hover{background:rgba(255,255,255,.05);padding-left:30px!important}
.capability:hover{border-color:rgba(200,200,210,.5)!important;transform:translateY(-4px)!important;background:#000056!important}
.copy:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.55)!important}
.case-step:hover{border-color:rgba(255,255,255,.6)!important}
.case-next:hover{background:#00006e!important}

/* Compact skills groups keep training readable without adding another card grid. */
.skills-section{display:grid;grid-template-columns:32% minmax(0,1fr);gap:24px 40px;margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.skills-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px}
.skills-list{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:13px;line-height:1.8;color:#b4b4bb}
@media(min-width:1001px){.skills-groups>div:nth-child(2){position:relative;left:-24px}}
@media(max-width:1000px){.skills-section{grid-template-columns:1fr}.skills-groups{gap:24px}}
@media(max-width:600px){.skills-groups{grid-template-columns:1fr;gap:20px}}

/* Motion off (the header toggle, or the visitor's reduced-motion preference). */
html.motion-off{scroll-behavior:auto}
.motion-off *{animation:none!important}

/* About / Earth: dimensions are reserved before the renderer or textures load. */
.earth-panel{position:sticky;top:110px;margin:0;padding:28px;border:1px solid rgba(255,255,255,.08);background:#101013;overflow:hidden;isolation:isolate}
.earth-panel>span{display:block;position:relative;z-index:2;line-height:1.7}
.earth-stage{position:relative;aspect-ratio:1.1;min-width:0;margin:12px -12px 0;pointer-events:none}
.earth-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0}
[data-globe="ready"] .earth-stage canvas{opacity:1}
.earth-fallback{position:absolute;height:84%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;background:#06101e;box-shadow:0 0 16px #4778ab24,inset 0 0 16px #79aafa44}
.earth-fallback img{position:absolute;height:100%;width:200%;max-width:none;left:-94%;object-fit:fill}
.earth-fallback:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 35%,transparent 24%,#03081588 76%,#02050be6 100%),linear-gradient(90deg,transparent 25%,#a2511820 45%,#020409ed 82%);box-shadow:inset 0 0 15px #4777aa80}
[data-globe="ready"] .earth-fallback{visibility:hidden}
.earth-marker{position:absolute;color:#f1f1f4;font:9px 'JetBrains Mono',monospace;letter-spacing:.05em;white-space:nowrap;transform:translate(10px,-50%);padding:3px 5px;background:#080b10b8;border-radius:2px;text-shadow:0 1px 3px #000}
@media(max-width:600px){.earth-panel{padding:20px}.earth-stage{margin:10px -10px 0;aspect-ratio:1}.earth-panel>span{font-size:10px!important;letter-spacing:.08em!important}.earth-marker{font-size:8px}}