/* October 2026: HUMAN × MACHINE. Existing brand tokens remain authoritative. */
:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
html { scroll-padding-top: 100px; }
[hidden], .project.is-hidden { display:none !important; }
.human-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:1.05fr 1fr; min-height:min(960px,calc(100svh - 76px)); background:var(--ink); color:var(--paper); overflow:hidden; border:0; }
.human-hero .hero-copy { padding:clamp(70px,9vw,145px) 0 95px clamp(24px,5vw,80px); z-index:3; align-self:center; }
.human-hero .eyebrow { color:var(--acid); font-size:.7rem; letter-spacing:.16em; }
.human-hero #hero-title { font-size:clamp(3.2rem,7.6vw,8rem); line-height:.94; letter-spacing:-.075em; margin:28px 0; text-transform:none; overflow:visible; }
.human-hero #hero-title span { color:var(--acid); -webkit-text-stroke:0; }
.human-hero .hero-intro { max-width:31rem; color:#deded8; font-size:clamp(1rem,1.3vw,1.25rem); line-height:1.65; }
.human-hero .hero-actions { display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
.human-hero .button { color:var(--ink); background:var(--acid); border-color:var(--acid); }
.hero-caption { margin-top:46px; color:#b7bbb5; font-size:.72rem; letter-spacing:.09em; }
.portrait-stage { position:relative; align-self:stretch; min-height:650px; z-index:2; display:flex; align-items:end; justify-content:center; }
.portrait { position:relative; width:min(100%,680px); line-height:0; transform:translateY(var(--portrait-shift,0px)); }
.portrait img { width:100%; height:auto; }
.portrait-machine { position:absolute; inset:0; opacity:0; mask-image:radial-gradient(circle 105px at var(--mx,50%) var(--my,45%),#000 15%,transparent 100%); -webkit-mask-image:radial-gradient(circle 105px at var(--mx,50%) var(--my,45%),#000 15%,transparent 100%); transition:opacity .25s; }
.portrait.is-revealing .portrait-machine { opacity:1; }
.portrait.is-machine .portrait-machine { opacity:1; mask-image:none; -webkit-mask-image:none; }
.portrait-orbit { position:absolute; width:85%; aspect-ratio:1; border:1px solid #67ffbe38; border-radius:50%; top:10%; background:radial-gradient(ellipse,#67ffbe18,transparent 70%); }
.portrait-orbit:after { content:""; position:absolute; inset:10%; border:1px solid #67ffbe25; border-radius:50%; }
.portrait-label { position:absolute; bottom:76px; right:24px; left:24px; z-index:4; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; font-size:.63rem; letter-spacing:.06em; }
.portrait-label small { flex-basis:100%; text-align:right; color:#ddd; }
.reveal-toggle { border:1px solid #ffffff60; border-radius:40px; color:var(--paper); background:#131313d9; padding:12px 18px; cursor:pointer; font-size:.75rem; }
.reveal-toggle[aria-pressed=true] { color:var(--ink); background:var(--acid); }
.human-hero .hero-index { grid-column:1/-1; z-index:4; margin:0; width:100%; color:var(--acid); background:var(--ink); border-top:1px solid #ffffff29; }
.human-hero .hero-index span { padding:19px 24px; border-color:#ffffff29; font-size:.66rem; }
.hero-atmosphere { position:absolute; inset:0; pointer-events:none; z-index:1; }
.hero-atmosphere span { position:absolute; width:3px; height:3px; background:var(--acid); border-radius:50%; opacity:.35; animation:drift 14s ease-in-out infinite alternate; }
.hero-atmosphere span:nth-child(1) { left:7%;top:15%; }.hero-atmosphere span:nth-child(2) { left:42%;top:67%;animation-delay:-4s; }.hero-atmosphere span:nth-child(3) { left:83%;top:25%;animation-delay:-8s; }.hero-atmosphere span:nth-child(4) { left:58%;top:35%;animation-delay:-2s; }.hero-atmosphere span:nth-child(5) { left:20%;top:81%;animation-delay:-6s; }.hero-atmosphere span:nth-child(6) { left:94%;top:70%;animation-delay:-10s; }
@keyframes drift { to { transform:translate3d(20px,-35px,0); opacity:.65; } }
.manifesto { position:relative; display:grid; grid-template-columns:1.4fr 1fr; gap:32px; background:var(--acid); padding-top:120px; padding-bottom:120px; }
.manifesto > .eyebrow { grid-column:1/-1; }
.manifesto h2 { font-size:clamp(2.6rem,5.8vw,6rem); line-height:1.04; letter-spacing:-.06em; margin:0; }
.manifesto em { font-family:Georgia,serif; font-weight:normal; }
.manifesto-copy { max-width:32rem; align-self:end; }
.manifesto-copy p { line-height:1.8; }
.portfolio .section-head h2 { font-size:clamp(2.4rem,5vw,5rem); max-width:18ch; letter-spacing:-.055em; }
.project-grid { gap:80px 32px; }
.project { transition:transform .4s ease; }
.project-art, .project .image-wrap { border-radius:4px; overflow:hidden; }
.project-meta h3 { letter-spacing:-.035em; }
.service-paths { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ink); color:var(--paper); }
.service-paths > a { padding:45px; border:1px solid #ffffff35; }
.service-paths span { color:var(--acid); font-size:.7rem; letter-spacing:.1em; }
.service-paths h2 { font-size:clamp(2rem,3.4vw,3.8rem); line-height:1.05; letter-spacing:-.05em; }
.service-paths a:hover { border-color:var(--acid); }
.faq { background:var(--paper); }
.faq details { border-top:1px solid var(--line); padding:22px 0; }
.faq summary { cursor:pointer; font-size:clamp(1.1rem,2vw,1.6rem); font-weight:700; padding-right:28px; }
.faq details p { max-width:820px; line-height:1.8; padding-left:20px; }
.faq-next { margin-top:36px; }
.service-page { max-width:1200px; margin:auto; }
.service-page h1 { max-width:15ch; font-size:clamp(3rem,7vw,7rem); line-height:1; letter-spacing:-.06em; }
.service-lead { font-size:1.4rem; max-width:40rem; }
.service-content { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin:90px 0; }
.service-content h2 { font-size:2rem; line-height:1.15; }
.service-content p { line-height:1.8; }
.service-related { display:flex; gap:24px; flex-wrap:wrap; text-decoration:underline; }
.motion-ready .reveal { opacity:1; transform:none; }
.motion-ready .reveal.motion-pending { opacity:0; transform:translateY(30px); }
.motion-ready .reveal { transition:opacity .7s ease,transform .85s cubic-bezier(.2,.7,.2,1); }
@media(min-width:1000px) { .portfolio .project:nth-child(even) { margin-top:80px; } .manifesto { border-radius:48px 48px 0 0; margin-top:-40px; z-index:5; } }
@media(max-width:900px) { .human-hero { grid-template-columns:1fr; min-height:0; }.human-hero .hero-copy { padding:65px 24px 20px; }.human-hero #hero-title { font-size:clamp(3.2rem,12vw,6rem); }.portrait-stage { min-height:0; height:auto; }.portrait { width:min(80%,500px); }.portrait-label { bottom:24px; }.human-hero .hero-index { grid-template-columns:1fr 1fr; }.manifesto { grid-template-columns:1fr; padding:70px 24px; }.service-paths { grid-template-columns:1fr; }.project-grid { gap:50px 20px; }.hero-caption { margin:28px 0; }.service-content { grid-template-columns:1fr; gap:24px; margin:60px 0; } }
@media(max-width:480px) { .human-hero #hero-title { font-size:clamp(2.8rem,12vw,4rem); }.portrait-label > span { display:none; }.portrait-label { justify-content:center; }.portrait-label small { text-align:center; font-size:.57rem; }.human-hero .hero-index span { padding:16px; }.service-paths > a { padding:28px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }.portrait { transform:none; }.motion-ready .reveal.motion-pending { opacity:1; transform:none; } }
@media(forced-colors:active) { .portrait-machine,.hero-atmosphere,.portrait-orbit { display:none; } }
.human-hero #hero-title { font-size:clamp(2.8rem,6.5vw,7.2rem); overflow-wrap:normal; word-break:normal; white-space:nowrap; }
@media(max-width:900px) { .human-hero #hero-title { font-size:clamp(2.8rem,10vw,6rem); } }

.motion-toggle { color:#d7d7d2; border:0; border-bottom:1px solid #ffffff50; background:transparent; padding:8px 0; font-size:.7rem; cursor:pointer; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state:paused !important; transition:none !important; }
.motion-paused .reveal.motion-pending { opacity:1; transform:none; }
/* Refinement: outlined type, portrait breathing room and spring cursor. */
@media (hover:hover) and (pointer:fine) {
  .human-hero #hero-title:hover, .human-hero #hero-title:hover span { color:transparent; -webkit-text-stroke:1.5px var(--acid); }
}
.portrait-stage { padding:45px 28px 0; }
.portrait { width:min(90%,590px); flex:none; mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent); -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent); }
.hero-atmosphere span { width:4px; height:4px; opacity:.6; box-shadow:0 0 12px #67ffbe66; animation:particle-float 6.5s ease-in-out infinite alternate; }
.hero-atmosphere span:nth-child(3n) { width:2px;height:2px; }
.hero-atmosphere span:nth-child(7) { left:15%;top:32%;animation-delay:-3s; }
.hero-atmosphere span:nth-child(8) { left:36%;top:12%;animation-delay:-7s; }
.hero-atmosphere span:nth-child(9) { left:71%;top:8%;animation-delay:-2s; }
.hero-atmosphere span:nth-child(10) { left:90%;top:44%;animation-delay:-8s; }
.hero-atmosphere span:nth-child(11) { left:49%;top:45%;animation-delay:-6s; }
.hero-atmosphere span:nth-child(12) { left:8%;top:60%;animation-delay:-5s; }
.hero-atmosphere span:nth-child(13) { left:31%;top:73%;animation-delay:-9s; }
.hero-atmosphere span:nth-child(14) { left:61%;top:86%;animation-delay:-1s; }
.hero-atmosphere span:nth-child(15) { left:77%;top:64%;animation-delay:-4s; }
.hero-atmosphere span:nth-child(16) { left:93%;top:90%;animation-delay:-10s; }
.hero-atmosphere span:nth-child(17) { left:52%;top:20%;animation-delay:-3s; }
.hero-atmosphere span:nth-child(18) { left:22%;top:49%;animation-delay:-7s; }
@keyframes particle-float { 0% { transform:translate3d(-12px,12px,0);opacity:.25; } 100% { transform:translate3d(30px,-65px,0);opacity:.75; } }
.cursor-bubble { position:fixed; top:0;left:0; width:42px;height:42px; margin:-21px 0 0 -21px; border:1px solid #67ffbeaa; border-radius:50%; background:radial-gradient(circle at 28% 25%,#ffffff38,transparent 48%,#67ffbe16); box-shadow:inset 0 0 10px #67ffbe18,0 0 14px #67ffbe12; pointer-events:none; z-index:90; opacity:0; will-change:transform; transition:opacity .2s; }
.cursor-bubble.is-visible { opacity:1; }
@media(max-width:900px) { .portrait-stage { padding:20px 20px 0; }.portrait { width:min(88%,470px); } }
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse) { .cursor-bubble { display:none; } }
.motion-paused .cursor-bubble { display:none; }
.motion-toggle { display:block; width:max-content; text-align:left; margin:0; }

/* Denser, livelier particle field. */
.hero-atmosphere span:nth-child(19) { left:48%;top:12%;animation-delay:-5.3s;animation-duration:7.9s; }
.hero-atmosphere span:nth-child(20) { left:85%;top:35%;animation-delay:-7.0s;animation-duration:5.5s; }
.hero-atmosphere span:nth-child(21) { left:28%;top:58%;animation-delay:-8.7s;animation-duration:6.1s; }
.hero-atmosphere span:nth-child(22) { left:65%;top:81%;animation-delay:-1.4s;animation-duration:6.7s; }
.hero-atmosphere span:nth-child(23) { left:8%;top:18%;animation-delay:-3.1s;animation-duration:7.3s; }
.hero-atmosphere span:nth-child(24) { left:45%;top:41%;animation-delay:-4.8s;animation-duration:7.9s; }
.hero-atmosphere span:nth-child(25) { left:82%;top:64%;animation-delay:-6.5s;animation-duration:5.5s; }
.hero-atmosphere span:nth-child(26) { left:25%;top:87%;animation-delay:-8.2s;animation-duration:6.1s; }
.hero-atmosphere span:nth-child(27) { left:62%;top:24%;animation-delay:-0.9s;animation-duration:6.7s; }
.hero-atmosphere span:nth-child(28) { left:5%;top:47%;animation-delay:-2.6s;animation-duration:7.3s; }
.hero-atmosphere span:nth-child(29) { left:42%;top:70%;animation-delay:-4.3s;animation-duration:7.9s; }
.hero-atmosphere span:nth-child(30) { left:79%;top:7%;animation-delay:-6.0s;animation-duration:5.5s; }
.hero-atmosphere span:nth-child(31) { left:22%;top:30%;animation-delay:-7.7s;animation-duration:6.1s; }
.hero-atmosphere span:nth-child(32) { left:59%;top:53%;animation-delay:-0.4s;animation-duration:6.7s; }