/* V3: boutique depth and motion — intentionally light, no scroll hijacking */
:root { --ease-luxe:cubic-bezier(.17,.78,.18,1); --depth-shadow:0 30px 66px rgba(28,41,30,.13); }
/* Entire first desktop screen must fit, including the scroll cue. */
@media(min-width:851px){
  .hero{display:flex;flex-direction:column;justify-content:space-between;height:100svh;min-height:640px;max-height:980px;padding:95px 0 20px}
  .hero-grid{flex:1;min-height:0;align-items:center;gap:34px}
  .hero-copy{padding:0}
  .hero h1{font-size:clamp(42px,min(5vw,7.9vh),78px);margin:19px 0 15px;line-height:1.015}
  .hero-subtitle{font-size:clamp(13px,1.08vw,16px);line-height:1.64;margin-bottom:0}
  .hero-actions{margin-top:22px}
  .hero-mini{margin-top:22px}
  .hero-scene{height:min(62svh,590px);min-height:410px}
  .hero-bottom{margin-top:0;padding:5px 0 4px;flex:none}
}
@media(min-width:851px) and (max-height:790px){
  .hero{padding-top:86px;padding-bottom:12px}
  .hero h1{font-size:clamp(39px,min(4.65vw,7.25vh),63px)}
  .hero-scene{height:clamp(390px,57svh,486px);min-height:0}
  .poster-card.hero-main{height:370px;width:292px;top:7%;left:24%}
  .poster-card.hero-left{height:250px;width:190px;top:30%;left:0}
  .poster-card.hero-right{height:238px;width:181px;top:25%;right:0}
  .scene-orbit{width:390px;height:390px}
  .scene-orbit::before{inset:47px}.scene-orbit::after{inset:102px}
  .scene-label.a{top:12px}.scene-label.b{bottom:12px}
  .hero-visual-tag{bottom:43px}
  .hero-mini{margin-top:14px}
}
/* Frosted header: noticeable material, not a dark solid stripe. */
.site-header::before{
  background:linear-gradient(130deg,rgba(244,251,238,.23),rgba(173,199,172,.09) 48%,rgba(244,252,238,.16));
  border:1px solid rgba(255,255,255,.41);
  box-shadow:0 19px 54px rgba(8,19,11,.27),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(29px) saturate(175%);backdrop-filter:blur(29px) saturate(175%);
}
.site-header.scrolled::before{
  background:linear-gradient(120deg,rgba(59,79,63,.88),rgba(24,41,29,.82) 55%,rgba(40,60,44,.89));
  border-color:rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(32px) saturate(160%);backdrop-filter:blur(32px) saturate(160%);
}
/* Minimal solar orbit: only two places, two tiny satellites in hero and one in featured. */
.scene-orbit{isolation:isolate}
.orbit-track{position:absolute;inset:0;border-radius:50%;display:block;animation:orbit-cycle 27s linear infinite;pointer-events:none}
.orbit-track::after{content:"";position:absolute;left:50%;top:0;width:7px;height:7px;border-radius:50%;background:#f7d39d;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(231,185,122,.08),0 0 15px rgba(243,206,146,.6)}
.orbit-track.inner{inset:58px;animation-direction:reverse;animation-duration:34s}
.orbit-track.inner::after{width:5px;height:5px;background:#b3d9c7;box-shadow:0 0 11px rgba(175,231,202,.6)}
.featured-photo-orbit{pointer-events:none}
.featured-orbiter{position:absolute;inset:-1px;border-radius:50%;animation:orbit-cycle 30s linear infinite;pointer-events:none}
.featured-orbiter::after{content:"";position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:7px;height:7px;background:#fff4d2;border-radius:50%;box-shadow:0 0 14px rgba(255,255,255,.8)}
@keyframes orbit-cycle{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* High-quality 3D depth through surfaces; no canvas/GPU-heavy scene. */
.depth-panel{--tx:0deg;--ty:0deg;--depth-lift:0px;transform:perspective(1150px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(var(--depth-lift));transform-style:preserve-3d;transition:transform .65s var(--ease-luxe),box-shadow .6s var(--ease-luxe),border-color .5s ease;will-change:auto}
.depth-panel:hover{--depth-lift:-7px;box-shadow:var(--depth-shadow)}
.js-ready .reveal.visible.depth-panel{transform:perspective(1150px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(var(--depth-lift))}
.js-ready .reveal.depth-panel:not(.visible){transform:translateY(33px);opacity:0}
.depth-panel .inner-depth{transform:translateZ(18px)}
.pain-card,.service-card,.process-card{box-shadow:0 12px 34px rgba(24,43,29,.035)}
.pain-card:hover,.service-card:hover,.process-card:hover{border-color:rgba(178,140,86,.38)}
.work-section{position:relative;isolation:isolate}
.work-section::before{content:"";position:absolute;width:330px;height:330px;right:-155px;top:12%;border:1px solid rgba(171,152,109,.16);border-radius:50%;pointer-events:none}
.featured-project{box-shadow:0 32px 74px rgba(34,52,37,.11);transition:box-shadow .6s}
.featured-project:hover{box-shadow:0 42px 95px rgba(34,52,37,.16)}
.featured-visual{perspective:1100px}
.featured-visual>img{transform:translate3d(0,var(--feature-parallax,0px),36px) rotate(-6deg) rotateY(var(--feature-rot,0deg))}
.featured-visual:hover>img{transform:translate3d(0,calc(var(--feature-parallax,0px) - 9px),45px) rotate(-3deg) rotateY(var(--feature-rot,0deg)) scale(1.025)}
.strategy-art{perspective:1250px;box-shadow:0 20px 58px rgba(1,13,11,.19)}
.strategy-art img{transform:translate3d(0,var(--strategy-parallax,0px),38px) rotate(-4deg) rotateY(-5deg);transition:transform .7s var(--ease-luxe)}
.strategy-art:hover img{transform:translate3d(0,calc(var(--strategy-parallax,0px) - 8px),52px) rotate(-2deg) rotateY(1deg)}
.strategy-art::after{content:"";position:absolute;inset:5%;pointer-events:none;border-radius:50%;border:1px solid rgba(232,212,174,.09);transform:rotate(25deg) scaleX(.81)}
.process-card{border-radius:13px}
/* Designer identity: photo is optional, never invented. Monogram is a premium default. */
.about-identity{display:grid;grid-template-columns:minmax(0,1fr) 142px;gap:15px;align-items:center;overflow:hidden;position:relative;isolation:isolate}
.about-identity-copy{position:relative;z-index:2;min-width:0}
.about-identity-copy b{display:block;white-space:normal}
.portrait-slot{width:142px;height:182px;position:relative;display:grid;place-items:center;isolation:isolate;border-radius:95px 95px 70px 70px;background:linear-gradient(150deg,#354c3c,#1b2d22);border:1px solid rgba(232,197,138,.34);box-shadow:0 16px 36px rgba(9,21,14,.26);overflow:hidden;transform:rotate(5deg) translateZ(26px)}
.portrait-monogram{font-family:Georgia,serif;font-size:42px;letter-spacing:-.08em;color:rgba(245,211,156,.8)}
.portrait-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;filter:saturate(.85) contrast(1.03);z-index:2}
.portrait-photo[hidden]{display:none}
.portrait-ring{position:absolute;inset:16px -24px;border:1px solid rgba(224,189,128,.28);border-radius:50%;pointer-events:none;transform:rotate(-30deg)}
/* subtle 3D embellishments for supporting sections without spinning distractions */
.contact-panel{box-shadow:0 24px 57px rgba(3,13,8,.12)}
.service-card .button{position:relative;z-index:3}
.section-title{text-wrap:balance}
/* max-height and mobile accessibility */
@media(max-width:1100px) and (min-width:851px){.hero h1{font-size:clamp(37px,4.6vw,58px)}.hero-scene{min-height:390px}.about-identity{grid-template-columns:1fr 110px}.portrait-slot{width:105px;height:146px}}
@media(max-width:850px){.orbit-track.inner{inset:47px}.hero{height:auto;max-height:none;min-height:auto}.about-identity{grid-template-columns:minmax(0,1fr) 122px}.portrait-slot{width:122px;height:162px}}
@media(max-width:590px){.hero{padding-top:99px}.hero-scene{height:325px}.scene-orbit{width:320px;height:320px}.orbit-track.inner{inset:42px}.portrait-slot{width:97px;height:135px}.about-identity{grid-template-columns:minmax(0,1fr) 97px;gap:8px}.about-identity-copy b{font-size:25px}.about-identity-copy p{font-size:11px}.depth-panel:hover{--depth-lift:0px}}
@media(prefers-reduced-motion:reduce){.orbit-track,.featured-orbiter{animation:none}.depth-panel,.js-ready .reveal.visible.depth-panel{--tx:0deg!important;--ty:0deg!important;--depth-lift:0px!important;transform:none!important}.featured-visual>img,.featured-visual:hover>img{transform:rotate(-6deg)}.strategy-art img,.strategy-art:hover img{transform:rotate(-4deg)}}
/* Keep decorative glow outside page width without horizontal scrolling. */
.work-section{overflow:clip}
@media(min-width:851px){.hero-bottom{transform:translateY(-28px)}}
/* Robust reveal fallback: text stays readable even when scroll observers are throttled. */
.js-ready .reveal{opacity:1;filter:none;transform:none;transition:none}
.js-ready .reveal.visible{opacity:1;filter:none;transform:none;animation:soft-appear .85s cubic-bezier(.15,.8,.22,1) both}
@keyframes soft-appear{from{opacity:.78;transform:translateY(15px);filter:blur(1px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.js-ready .reveal.depth-panel:not(.visible){opacity:1;transform:perspective(1150px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(var(--depth-lift))}
.js-ready .reveal.visible.depth-panel{animation:soft-appear .6s ease both}
.site-header::before{background:linear-gradient(125deg,rgba(59,76,61,.87),rgba(24,40,30,.83) 54%,rgba(54,73,56,.87));border-color:rgba(255,255,255,.38);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%)}
@media(prefers-reduced-motion:reduce){.js-ready .reveal.visible{animation:none!important}}