/* MIH motion layer — gold circuits, quiet depth, readable content. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#f5c6630b 1px,transparent 1px),linear-gradient(90deg,#f5c6630b 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent,#000);}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--orange),var(--gold),transparent);transform-origin:left;animation:circuit-connect 1.5s ease-out both;}
.hero-word{display:inline-block;vertical-align:baseline}
.hero-word-accent{color:var(--gold)}
.hero-bottom{position:relative;z-index:1}
.art-orbit{border-color:#f5c66340}
.orbit-two{border-style:dashed}
.art-orbit::after{content:"";position:absolute;top:14%;left:14%;width:7px;height:7px;background:var(--gold);border-radius:50%;box-shadow:0 0 0 5px #f5c66312}
.orbit-two::after{top:auto;left:auto;bottom:14%;right:14%;background:var(--orange)}
.art-service{animation:float 3.6s ease-in-out 1;animation-delay:0s}
.art-shirt{animation-delay:.15s}.art-growth{animation-delay:.3s}
.art-main{animation:terminal-arrive 1s cubic-bezier(.22,1,.36,1) both}
.reading-progress{position:absolute;bottom:-1px;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--gold));transform:scaleX(0);transform-origin:left;pointer-events:none}
.site-header{transition:box-shadow .3s ease}
.site-header.is-scrolled{box-shadow:0 4px 20px #292a2710}
.button,.header-cta{position:relative;overflow:hidden;isolation:isolate}
.button::after,.header-cta::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#fff6 50%,transparent 70%);transform:translateX(-130%);transition:transform .65s ease;z-index:-1}
.button:focus-visible::after,.header-cta:focus-visible::after{transform:translateX(130%)}
.button span:last-child,.text-link span:last-child{transition:transform .25s ease}
.button:focus-visible span:last-child,.text-link:focus-visible span:last-child{transform:translate(2px,-2px)}
.main-nav a{position:relative;padding-block:8px}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.main-nav a:focus-visible::after{transform:scaleX(1)}
.service-row{position:relative;transition:background-color .35s ease}
.service-row::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .7s ease}
.service-row:focus-within::after{transform:scaleX(1)}
.service-visual{transition:box-shadow .4s ease,translate .4s ease}
.service-visual::after{content:"";position:absolute;inset:12px;pointer-events:none;background:linear-gradient(#725d3b55,#725d3b55) left top/24px 1px no-repeat,linear-gradient(#725d3b55,#725d3b55) left top/1px 24px no-repeat,linear-gradient(#725d3b55,#725d3b55) right bottom/24px 1px no-repeat,linear-gradient(#725d3b55,#725d3b55) right bottom/1px 24px no-repeat}
.step-icon{transition:translate .3s ease,color .3s ease}
.field input,.field select,.field textarea{transition:border-color .2s ease,box-shadow .2s ease}
@media(hover:hover) and (pointer:fine){
  .button:hover::after,.header-cta:hover::after{transform:translateX(130%)}
  .button:hover span:last-child,.text-link:hover span:last-child{transform:translate(2px,-2px)}
  .main-nav a:hover::after{transform:scaleX(1)}
  .service-row:hover{background:#f5f0e5}
  .service-row:hover::after{transform:scaleX(1)}
  .service-row:hover .service-visual{translate:0 -4px;box-shadow:0 12px 24px #292a2710}
  .step:hover .step-icon{translate:0 -4px;color:#99491b}
}
@keyframes circuit-connect{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes terminal-arrive{from{opacity:0;transform:translateY(16px) rotate(-5deg)}to{opacity:1;transform:translateY(0) rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reading-progress{display:none}
  .service-row:hover .service-visual,.step:hover .step-icon{translate:none}
  .button:hover,.header-cta:hover{transform:none}
  .button span:last-child,.text-link span:last-child{transform:none!important}
  .hero::after{transform:none}
}

/* Cinematic service scenes inspired by the reference's editorial scale. */
.hero.experience-ready{background:#20221f;min-height:0;isolation:isolate}
.hero.experience-ready::before{background:radial-gradient(ellipse at 85% 40%,#a45a2455,transparent 54%),linear-gradient(#f5c66308 1px,transparent 1px),linear-gradient(90deg,#f5c66308 1px,transparent 1px);background-size:auto,80px 80px,80px 80px;mask-image:none}
.experience-ready .hero-grid{grid-template-columns:1.05fr 1fr;min-height:650px;gap:36px}
.experience-ready .hero-copy{padding:72px 0 40px}
.experience-ready h1{font-size:clamp(44px,5.1vw,72px);letter-spacing:-.055em;line-height:1.08}
.hero-word{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;vertical-align:top}
.hero-word-inner{display:inline-block}
.hero-art.experience-art{height:540px;position:relative;width:100%;max-width:100%;margin:0;left:auto;translate:none;transform:none;border:1px solid #f5c66333;border-radius:24px;background:linear-gradient(145deg,#ffffff0c,#ffffff02);overflow:hidden;box-shadow:0 30px 70px #11130f33}
.experience-art::before{inset:0;background:radial-gradient(ellipse at 50% 35%,#f5c66318,transparent 70%);z-index:0;opacity:1}
.experience-visual{height:390px;position:relative;translate:0 var(--scene-drift,0px)}
.experience-visual .service-visual{width:100%;height:100%;background:transparent;color:var(--gold);border-radius:0;overflow:visible;box-shadow:none}
.experience-visual .service-visual::before{width:340px;height:340px;border-color:#f5c66360;border-style:dashed;opacity:.6}
.experience-visual .service-visual::after{display:none}
.experience-visual .visual-badge{display:none}
.experience-visual .document-art{transform:scale(1.08) rotate(-8deg)}
.experience-visual .ledger-art{transform:scale(1.12) rotate(7deg)}
.experience-visual .terminal{transform:scale(1.1) rotate(-7deg)}
.experience-visual .growth-chart{transform:scale(1.1);color:var(--gold)}
.experience-caption{position:relative;z-index:1;border-top:1px solid #f5c66333;padding:26px 32px;background:#242620;min-height:150px}
.experience-caption h2{font-size:28px;line-height:1.2;max-width:80%;margin:0 0 14px;color:var(--white)}
.experience-number{position:absolute;right:24px;top:18px;font:400 68px/1 Manrope,sans-serif;color:#f5c66333;letter-spacing:-.07em}
.experience-link{font-size:12px;font-weight:700;color:var(--gold);text-decoration:none;padding-block:4px;display:inline-block}
.experience-link:hover{text-decoration:underline}
.experience-controls{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:2;padding-block:8px 28px;gap:20px}
.experience-controls button{position:relative;border:0;border-top:1px solid #9d8c70;background:none;color:#d6cbb8;padding:20px 0 10px;text-align:left;font-size:14px;font-weight:700;cursor:pointer;transition:color .3s ease}
.experience-controls button::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.experience-controls button[aria-selected=true]{color:var(--gold)}
.experience-controls button[aria-selected=true]::before{transform:scaleX(1)}
.experience-controls button:hover{color:var(--white)}
.service-navigation{position:sticky;top:78px;z-index:25;background:var(--paper);box-shadow:0 4px 14px #292a2708;border-bottom:1px solid var(--line)}
.service-navigation .service-index{margin:0;border:0;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.service-index a{transition:background .3s ease,color .3s ease;min-width:130px}
.service-index a[aria-current=location]{background:var(--charcoal);color:var(--gold)}
.service-row{scroll-margin-top:70px}
.service-row .service-visual{border-radius:16px}
.service-number{color:#99491b}
.process,.about,.contact{position:relative}
.about,.contact{border-radius:36px 36px 0 0}
.about::before,.contact::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,#f5c66388,transparent);pointer-events:none}
@media(min-width:1400px){.experience-ready .hero-grid{min-height:710px}.hero-art.experience-art{height:570px}.experience-visual{height:420px}}
@media(max-width:999px){
 .experience-ready .hero-grid{gap:24px;grid-template-columns:1.1fr 1fr;min-height:620px}
 .hero-art.experience-art{height:470px}.experience-visual{height:320px}
 .experience-caption{padding:24px}.experience-caption h2{font-size:24px}
 .experience-visual .document-art,.experience-visual .ledger-art,.experience-visual .terminal{scale:.85}
 .experience-visual .growth-chart{scale:.8}
 .experience-visual .service-visual::before{width:250px;height:250px}
}
@media(max-width:760px){
 .experience-ready .hero-grid{display:flex;gap:28px;min-height:0}
 .experience-ready .hero-copy{padding:52px 0 0}
 .experience-ready h1{font-size:clamp(39px,8.5vw,62px)}
 .hero-art.experience-art{height:370px;width:100%;margin-bottom:0;border-radius:16px}
 .experience-visual{height:250px}.experience-caption{min-height:120px;padding:20px 24px}
 .experience-caption h2{font-size:24px;margin-bottom:8px}
 .experience-number{font-size:55px;top:20px}
 .experience-visual .document-art,.experience-visual .ledger-art,.experience-visual .terminal{scale:.68}
 .experience-visual .growth-chart{scale:.68}
 .experience-controls{gap:12px;padding-block:28px 16px}
 .experience-controls button{font-size:12px;padding-top:16px}
 .service-navigation{top:66px}
 .about,.contact{border-radius:24px 24px 0 0}
}
@media(max-width:380px){.experience-controls{gap:8px}.experience-controls button{font-size:11px}.experience-caption h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){
 .experience-visual{translate:none!important}
 .experience-controls button,.experience-controls button::before{transition:none}
}
/* Let translated captions determine height instead of clipping at narrow widths. */
.hero-art.experience-art{height:auto;min-height:0}
.experience-visual .ledger-art{color:var(--charcoal)}
