/* Quiet technical details, shared by every MILO page. */
.milo-tech-title{position:relative}
.milo-tech-title.milo-glitch{animation:milo-title-signal .8s .4s steps(1) both}
@keyframes milo-title-signal{0%,22%,40%,100%{transform:translateX(0);text-shadow:none}12%{transform:translateX(-1px);text-shadow:2px 0 #83cfc366,-2px 0 #a4cf7255}30%{transform:translateX(1px);text-shadow:-1px 0 #83cfc366}}
.project-image{isolation:isolate}
.project-image::after{content:"";position:absolute;inset:12px;z-index:1;pointer-events:none;border:1px solid #efffdc55;background:linear-gradient(30deg,transparent 49.6%,#efffdc30 50%,transparent 50.4%),linear-gradient(150deg,transparent 49.6%,#efffdc30 50%,transparent 50.4%);background-size:56px 32px;opacity:0;transition:opacity .3s}
.project-image:is(:hover,:focus-visible)::after{opacity:.6}
.button,.nav-contact{position:relative;isolation:isolate;overflow:hidden}
.button::after,.nav-contact::after{content:"";position:absolute;inset:-60% -100%;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#c6ef7133 48%,#9eddd45c 50%,transparent 59%);transform:translateX(-45%);opacity:0;z-index:0}
.button:is(:hover,:focus-visible)::after,.nav-contact:is(:hover,:focus-visible)::after{animation:milo-holo-sweep .85s ease-out}
@keyframes milo-holo-sweep{0%{opacity:0;transform:translateX(-45%)}30%{opacity:1}100%{opacity:0;transform:translateX(45%)}}
.milo-tech-section{position:relative}
.milo-section-marker{position:absolute;top:18px;right:0;display:flex;align-items:center;gap:9px;font:9px/1 monospace;letter-spacing:.12em;color:var(--muted,#62685e);opacity:.48;pointer-events:none;user-select:none}
.milo-section-marker::before{content:"+";font-size:15px;color:#718843}
.milo-scan{position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,#8eae6555,transparent);transform:scaleX(.12);opacity:0;pointer-events:none}
.milo-scan.is-visible{animation:milo-section-signal 1.3s ease-out both}
@keyframes milo-section-signal{0%{opacity:0;transform:scaleX(.12)}35%{opacity:.8}100%{opacity:0;transform:scaleX(1)}}
.rendered-preview::after{content:"";position:absolute;inset:8px;pointer-events:none;background:linear-gradient(#84986b88,#84986b88) left top/14px 1px no-repeat,linear-gradient(#84986b88,#84986b88) left top/1px 14px no-repeat,linear-gradient(#84986b88,#84986b88) right bottom/14px 1px no-repeat,linear-gradient(#84986b88,#84986b88) right bottom/1px 14px no-repeat}
@media(prefers-reduced-motion:reduce){.milo-tech-title.milo-glitch,.milo-scan.is-visible,.button::after,.nav-contact::after{animation:none!important}.project-image::after{transition:none}}
@media(max-width:600px){.milo-section-marker{font-size:8px;top:12px}.project-image::after{background-size:40px 24px}}
.hero>.viewer{position:relative;isolation:isolate}
.hero>.viewer::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(#61794a22 1px,transparent 1px),linear-gradient(90deg,#61794a22 1px,transparent 1px),radial-gradient(ellipse at 80% 10%,#9eddd432,transparent 65%);background-size:44px 44px,44px 44px,100% 100%;mask-image:linear-gradient(135deg,#000,transparent 80%)}
.hero>.viewer::after{content:"3D / VIEWPORT";position:absolute;bottom:70px;right:20px;padding:5px 9px;border:1px solid #71884355;color:#546742;font:9px/1.3 monospace;letter-spacing:.12em;pointer-events:none}
.project-image::after{border-color:#526a4666;background:linear-gradient(30deg,transparent 49.4%,#405c4650 50%,transparent 50.6%),linear-gradient(150deg,transparent 49.4%,#405c4650 50%,transparent 50.6%);background-size:56px 32px}
.project-image:is(:hover,:focus-visible)::after{opacity:.85}
.milo-section-marker{opacity:.8;font-size:10px;letter-spacing:.16em}
.milo-section-marker::before{color:#627c3d}

/* A restrained cyber direction: dark hero, precise borders, two signal colours. */
:root{--cyber-cyan:#93ded5;--cyber-lime:#c6ef71;--cyber-graphite:#17221f}
.header{border-bottom:1px solid #728b7a44}
.wordmark-symbol{color:#657f51;text-shadow:1px 0 #93ded555}
.hero{background:radial-gradient(ellipse at 95% 5%,#93ded513,transparent 50%),var(--cyber-graphite);color:#f0f3e9;border:1px solid #456259;border-top:2px solid #93ded577;padding:clamp(24px,4vw,56px);margin-top:28px;margin-bottom:44px;position:relative;border-radius:2px 2px 22px 2px}
.hero .hero-intro,.hero .hero-note p{color:#c2ccc3}
.hero .eyebrow,.hero .hero-note .technical{color:var(--cyber-cyan)}
.hero h1>span{color:var(--cyber-lime);text-shadow:0 0 26px #c6ef7110}
.hero .text-link{color:#e6eee1}
.hero .hero-note{border-color:#93ded530}
.hero>.viewer{border:1px solid #93ded570;box-shadow:0 12px 40px #0000001c;border-radius:2px 2px 14px 2px}
.hero>.viewer::before{background:linear-gradient(#426b582b 1px,transparent 1px),linear-gradient(90deg,#426b582b 1px,transparent 1px),radial-gradient(ellipse at 85% 8%,#93ded54d,transparent 70%);background-size:40px 40px,40px 40px,100% 100%}
.hero>.viewer::after{border-color:#416d5866;color:#345943;letter-spacing:.16em}
.hero .button{background:var(--cyber-lime);color:#17221f;border:1px solid #c6ef71;border-radius:2px 2px 10px 2px}
.nav-contact,.button{border-radius:2px 2px 10px 2px}
.technical,.eyebrow{letter-spacing:.1em}
.rendered-preview{border-color:#64867580;border-radius:2px 2px 16px 2px;box-shadow:0 10px 30px #17221f08}
.rendered-preview-top{background:var(--cyber-graphite);color:#d6ede4;border-bottom:1px solid #93ded555}
.rendered-preview-top .technical{color:#b1d9cc}
.rendered-invite{background:linear-gradient(110deg,#e1eacd,#dfede5)}
.rendered-preview::after{background:linear-gradient(#93ded5aa,#93ded5aa) left top/18px 1px no-repeat,linear-gradient(#93ded5aa,#93ded5aa) left top/1px 18px no-repeat,linear-gradient(#61835599,#61835599) right bottom/18px 1px no-repeat,linear-gradient(#61835599,#61835599) right bottom/1px 18px no-repeat}
.rendered-picker button[aria-pressed=true]{border-top-color:#71985d}
.project-image{border:1px solid #77917a44;border-radius:2px 2px 16px 2px}
.project-image:is(:hover,:focus-visible){border-color:#638c78}
.motion-design{background:radial-gradient(ellipse at 100% 0,#93ded50c,transparent 55%),#17221f;border-block:1px solid #93ded530}
.motion-design-filmbar{border-radius:2px;border-color:#597768}
.motion-design-filmbar .technical:last-child{color:var(--cyber-cyan)}
.milo-section-marker{color:#486551;letter-spacing:.18em}
.motion-design .milo-section-marker{color:#9dbbb0}
@media(max-width:600px){.hero{padding:24px 20px;margin-top:16px;margin-bottom:28px}.hero h1{letter-spacing:-2px}.hero>.viewer{min-width:0}.hero .hero-actions{gap:16px}}