/* Hero B: one composition, two lighting themes. */
:root{--hero-ink:#f6f2ed;--hero-ground:#352238;--hero-rule:#f6f2ed55}
:root[data-theme="light"]{--hero-ink:#352238;--hero-ground:#f6f2ed;--hero-rule:#35223855}
.header{position:absolute;inset:0 0 auto;height:112px;min-height:0;padding:0 4%;display:grid;grid-template-columns:31% 1fr 44px;gap:25px;background:transparent;color:var(--hero-ink);z-index:20}
.header .brand{width:clamp(190px,19vw,290px)}.header nav{gap:3vw;font-size:14px;font-weight:550}.header nav .pill{margin-left:auto;margin-right:15px;min-height:43px;padding:12px 27px}.header nav>a:after{background:currentColor}
.theme-toggle{position:relative;display:grid;place-items:center;width:42px;height:42px;background:none;color:inherit;border:1px solid var(--hero-rule);border-radius:50%;transition:background .25s,transform .25s}
.theme-toggle:hover{background:#d6cbea25;transform:rotate(10deg)}.theme-toggle svg{width:21px;height:21px}.theme-moon{display:none}[data-theme="light"] .theme-sun{display:none}[data-theme="light"] .theme-moon{display:block}
.theme-tooltip{position:absolute;top:calc(100% + 10px);right:0;white-space:nowrap;font-size:11px;padding:8px 12px;background:var(--hero-ink);color:var(--hero-ground);border-radius:4px;opacity:0;transform:translateY(-4px);transition:.2s;pointer-events:none}
.theme-toggle:hover .theme-tooltip,.theme-toggle:focus-visible .theme-tooltip{opacity:1;transform:none}
.immersive-hero{height:100svh;min-height:600px;width:100%;display:block;position:relative;overflow:hidden;isolation:isolate;z-index:1;background:var(--hero-ground);color:var(--hero-ink);pointer-events:auto}
.hero-stage{position:absolute;inset:-1%;z-index:-2;transform:translate(var(--bgx,0px),var(--bgy,0px));pointer-events:none}
.hero-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:opacity .65s}
.hero-stage .stage-light{opacity:0}[data-theme="light"] .hero-stage .stage-light{opacity:1}[data-theme="light"] .hero-stage .stage-dark{opacity:0}
.immersive-hero .hero-copy{position:absolute;left:4%;top:19%;width:37%;max-width:none;padding:0;background:none;z-index:4;pointer-events:none}
.immersive-hero h1{font-family:'Times New Roman',Georgia,serif;font-weight:700;font-size:clamp(78px,min(10.2vw,17svh),190px);line-height:.76;letter-spacing:-.07em}
.immersive-hero h1>span{white-space:nowrap}.immersive-hero .accent{color:var(--lime)}
.immersive-hero .hero-description{font-size:clamp(14px,1.45vw,23px);line-height:1.45;letter-spacing:.045em;margin-top:30px;max-width:none}
.immersive-hero .hero-cta{margin-top:30px;color:var(--hero-ink);pointer-events:auto;gap:22px;font-size:17px}
.immersive-hero .hero-cta b{width:65px;height:65px;font-size:32px;color:var(--plum)}
.hero-monitor{position:absolute;left:39%;bottom:14%;width:51%;height:74%;padding:0;border:0;background:none;z-index:2;transform:translate(var(--bgx,0px),var(--bgy,0px));will-change:transform}
.hero-monitor img{height:100%;width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 8px #180d2335)}
.hero-phone{position:absolute;right:3%;bottom:16%;width:12%;height:34%;padding:0;background:none;border:0;z-index:3;transform:translate(var(--devx,0px),var(--devy,0px)) rotate(var(--devr,0deg));will-change:transform}
.hero-phone img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 8px #180d2340)}
.immersive-bottom{position:absolute;bottom:4%;left:4%;right:4%;display:flex;gap:30px;align-items:center;z-index:6;color:var(--hero-ink)}
.immersive-bottom>span{font-size:10px;letter-spacing:.25em;white-space:nowrap}.immersive-bottom>i{height:1px;background:var(--hero-rule);flex:1}
.immersive-bottom>a{font-size:13px;letter-spacing:.14em;display:flex;align-items:center;gap:20px}
.immersive-bottom b{font:25px Instrument,sans-serif;border:1px solid var(--hero-rule);border-radius:50%;height:50px;width:50px;display:grid;place-items:center;transition:transform .3s,background .3s}
.immersive-bottom a:hover b{transform:translateY(5px);background:#d6cbea25}
.immersive-hero .motion-control{position:absolute;left:4%;bottom:10%;font-size:8px;padding:5px 0;color:var(--hero-ink);background:none;opacity:.65;z-index:5}
[data-theme="dark"] .services{background:#2a1c2e;color:var(--paper)}[data-theme="dark"] .service-intro h2 span{color:var(--paper)}
[data-theme="dark"] .service-row{border-color:#d6cbea44}[data-theme="dark"] .service-signature:before{background:#d6cbea66}
[data-theme="dark"] .resources{background:#2a1c2e}[data-theme="dark"] .works{background:radial-gradient(ellipse at 55% 50%,#3b273e,#241829)}
[data-theme="light"] .works{background:var(--plum)}
[data-theme="dark"] .service-photo{box-shadow:0 5px 12px #0002}
.header .menu-toggle{color:var(--hero-ink)}.header .menu-toggle span{background:currentColor}
@media(max-height:760px) and (min-width:901px){.header{height:85px}.immersive-hero .hero-copy{top:20%}.immersive-hero .hero-description{font-size:16px;margin-top:22px}.immersive-hero .hero-cta{margin-top:20px;font-size:14px}.immersive-hero .hero-cta b{width:48px;height:48px}.immersive-hero .motion-control{bottom:11%}}
@media(min-width:701px) and (max-width:1050px){.header{grid-template-columns:26% 1fr 42px;gap:12px;padding:0 3%}.header .brand{width:180px}.header nav{gap:20px;font-size:12px}.header nav .pill{padding:10px 18px;margin-right:5px}.immersive-hero .hero-copy{left:4%;top:22%}.immersive-hero h1{font-size:11vw}.hero-monitor{left:39%;width:58%;bottom:20%;height:65%}.hero-phone{bottom:18%;right:1%}.immersive-bottom>span{font-size:8px}}
@media(max-width:700px){
.header{height:78px;padding:0 6%;display:flex;gap:16px}.header .brand{width:185px;margin-right:auto}.header nav{display:none}.header .menu-toggle{order:3;display:block}.theme-toggle{width:34px;height:34px;flex-shrink:0}.theme-toggle svg{width:17px;height:17px}.theme-tooltip{font-size:10px}
.immersive-hero{height:100svh;min-height:760px}.hero-stage{inset:0;transform:none}.hero-stage img{object-position:67% bottom;object-fit:cover}
.immersive-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--hero-ground) 0%,var(--hero-ground) 41%,transparent 70%);z-index:-1;pointer-events:none}
.immersive-hero .hero-copy{top:105px;left:6%;width:88%}.immersive-hero h1{font-size:clamp(63px,18.7vw,100px);line-height:.78}.immersive-hero .hero-description{font-size:12px;line-height:1.4;margin-top:20px;letter-spacing:.02em}
.immersive-hero .hero-cta{position:absolute;right:0;bottom:0;gap:8px;font-size:11px;margin:0}.immersive-hero .hero-cta b{width:37px;height:37px;font-size:23px}
.hero-monitor{left:7%;bottom:13%;width:80%;height:39%;transform:translate(var(--bgx,0px),var(--bgy,0px))}.hero-phone{right:4%;bottom:13%;width:19%;height:23%}
.immersive-bottom{left:6%;right:6%;bottom:3%;gap:10px}.immersive-bottom>span{font-size:6px;letter-spacing:.12em;max-width:90px;line-height:1.6;white-space:normal}.immersive-bottom>a{font-size:10px;letter-spacing:.03em;gap:9px}.immersive-bottom b{width:35px;height:35px;font-size:21px}.immersive-bottom>i{min-width:10px}
.immersive-hero .motion-control{left:6%;bottom:9%;font-size:7px}.works{padding-top:35px}
}
@media(prefers-reduced-motion:reduce){.hero-stage img,.theme-toggle,.theme-tooltip{transition:none}}

@media(min-width:1051px){.hero-monitor{left:32%;width:63%;height:77%;bottom:14%}.immersive-hero h1{font-size:clamp(78px,min(11vw,18.5svh),235px)}}
@media(max-width:700px){.hero-monitor{left:-9%;width:112%;height:47%;bottom:14%}.hero-phone{width:22%;height:25%;right:0;bottom:14%}.immersive-hero .hero-copy{top:100px}}

/* Responsive composition: fixed scenery, grouped devices, two-line title. */
.hero-stage{inset:0;transform:none}
.hero-stage img{object-fit:fill}
.immersive-hero .hero-copy{top:clamp(125px,23svh,285px);width:43%}
.immersive-hero h1{font-size:clamp(76px,min(8.3vw,16svh),175px);line-height:.86;letter-spacing:-.065em}
.immersive-hero h1>span{display:block}
.immersive-hero .hero-description{font-size:clamp(14px,1.3vw,21px);margin-top:28px}
.hero-monitor{left:40%;width:55%;height:auto;aspect-ratio:3/2;bottom:16%;transform:none;will-change:auto}
.hero-phone{right:3%;bottom:17%;width:11%;height:auto;aspect-ratio:2/3;transform:none;will-change:auto}
.hero-monitor img,.hero-phone img{display:block;object-fit:contain}
.immersive-hero .hero-cta{margin-top:26px}
@media(min-width:701px) and (max-height:700px){
 .header{height:82px}
 .immersive-hero .hero-copy{top:130px}
 .immersive-hero h1{font-size:min(8.3vw,16svh)}
 .immersive-hero .hero-description{margin-top:20px;font-size:14px}
 .immersive-hero .hero-cta{margin-top:18px}
}
@media(min-width:701px) and (max-aspect-ratio:6/5){
 .immersive-hero .hero-copy{top:145px;width:85%}
 .immersive-hero h1{font-size:10.8vw}
 .hero-monitor{left:6%;width:87%;bottom:15%}
 .hero-phone{right:3%;width:17%;bottom:16%}
 .immersive-hero .hero-cta{position:absolute;right:0;bottom:0}
}
@media(max-width:700px){
 .immersive-hero{height:100svh;min-height:680px;max-height:980px}
 .immersive-hero .hero-copy{top:108px;left:6%;width:88%;padding:0}
 .immersive-hero h1{font-size:clamp(54px,14.4vw,96px);line-height:.89}
 .immersive-hero .hero-description{font-size:13px;line-height:1.5;margin-top:20px;letter-spacing:0}
 .immersive-hero .hero-cta{position:static;margin-top:18px;gap:12px;font-size:13px}
 .immersive-hero .hero-cta b{width:40px;height:40px;font-size:24px}
 .hero-stage{inset:40% 0 0}
 .hero-stage img{object-fit:fill;object-position:center}
 .immersive-hero:after{background:linear-gradient(180deg,var(--hero-ground) 0%,var(--hero-ground) 38%,transparent 66%)}
 .hero-monitor{left:-9%;width:112%;height:auto;aspect-ratio:3/2;bottom:15%;transform:none}
 .hero-phone{right:0;bottom:16%;width:22%;height:auto;aspect-ratio:2/3;transform:none}
 .immersive-bottom{bottom:22px}
 .immersive-hero .motion-control{bottom:76px}
}
@media(max-width:700px) and (min-height:850px){
 .immersive-hero .hero-copy{top:125px}
 .hero-monitor{bottom:17%}
 .hero-phone{bottom:18%}
}
@media(prefers-reduced-motion:reduce){
 .hero-monitor,.hero-phone{animation:none!important;transform:none!important}
}

@media(max-width:700px){.hero-stage{inset:0}.hero-stage img{object-fit:cover;object-position:63% bottom}}
@media(min-width:701px) and (min-aspect-ratio:6/5){.hero-monitor{left:auto;right:5%;width:min(55%,100svh)}.hero-phone{width:min(11%,20svh)}}
/* Mobile website is a first-class part of the device presentation. */
.hero-phone{width:min(18%,30svh);right:1%;bottom:14.5%}
@media(min-width:701px) and (max-aspect-ratio:6/5){.hero-phone{width:26%;right:0;bottom:14%}}
@media(max-width:700px){.hero-phone{width:35%;right:-1%;bottom:14%;height:auto}.hero-monitor{left:-12%;width:112%}}
@media(max-width:700px){.immersive-hero:after{background:linear-gradient(180deg,var(--hero-ground) 0%,var(--hero-ground) 38%,transparent 66%,transparent 83%,var(--hero-ground) 100%)}.immersive-bottom>span{font-size:8px}.immersive-hero .motion-control{font-size:9px;opacity:.85}}
@media(max-width:700px) and (max-height:740px){.immersive-hero .hero-copy{top:96px}.immersive-hero h1{font-size:clamp(50px,14vw,80px)}.immersive-hero .hero-description{margin-top:14px}.immersive-hero .hero-cta{margin-top:14px}}
@media(min-width:701px) and (max-aspect-ratio:6/5){.hero-stage img{object-fit:cover;object-position:63% bottom}}
/* Compact phone composition: height follows content width, not a tall viewport. */
@media(max-width:480px){
 .immersive-hero{height:clamp(680px,calc(310px + 110vw),820px);min-height:680px;max-height:none}
 .immersive-hero .hero-copy{top:108px}
 .hero-monitor{bottom:15%}
 .hero-phone{bottom:14%}
}
@media(max-width:480px) and (max-height:740px){.immersive-hero .hero-copy{top:96px}}