/* Quieter service typography below the display-led opening. */
#how .how-no { display:flex; align-items:center; gap:.8rem; font-family:var(--sans); font-size:.78rem; font-weight:600; line-height:1.4; color:var(--forest-65); }
#how .how-no > span { display:grid; place-items:center; width:32px; height:32px; flex:none; border:1px solid var(--sand); border-radius:50%; font-size:.7rem; font-weight:500; color:var(--forest); }
#how .how h2 { font-family:var(--sans); font-weight:600; text-transform:none; color:var(--forest); font-size:clamp(1.85rem,1.25rem + 2.1vw,3rem); letter-spacing:-.035em; line-height:1.13; max-width:20ch; margin-top:1.15rem; text-wrap:balance; }
#how .how h2 em { display:block; margin-top:.12em; font-family:inherit; font-style:normal; font-weight:inherit; color:var(--amber-btn); }
#how .how .sub { font-size:clamp(1.05rem,.98rem + .3vw,1.2rem); line-height:1.65; max-width:44ch; margin-top:1.2rem; }

/* Give the two display lines in the founder introduction room to breathe. */
.studio-about-title { line-height:1.12; }

/* Dimensional website illustration for the services introduction. */
#how .services-intro { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center; gap:clamp(1rem,4vw,4rem); margin-bottom:2.5rem; }
.services-intro-copy { min-width:0; }.services-intro-copy > p { max-width:44ch; margin-top:1.5rem; }
.services-scene { position:relative; width:100%; max-width:560px; aspect-ratio:1.25; margin-inline:auto; perspective:1000px; pointer-events:none; }
.scene-floor { position:absolute; left:12%; right:5%; bottom:8%; height:12%; border-radius:50%; background:rgba(0,82,45,.12); filter:blur(14px); transform:rotate(-7deg); }
.scene-browser { position:absolute; width:76%; left:6%; top:18%; border:2px solid var(--forest); border-radius:12px; background:var(--chalk); box-shadow:5px 7px 0 #7c957b,8px 11px 0 var(--forest),20px 30px 35px rgba(0,52,29,.14); transform:rotateX(12deg) rotateY(-15deg) rotateZ(-7deg); transform-style:preserve-3d; animation:scene-browser-float 7s ease-in-out infinite; }
.scene-browser-bar { display:flex; gap:4px; align-items:center; padding:9px 10px; border-bottom:1px solid var(--sand); border-radius:10px 10px 0 0; background:#eee8da; }
.scene-browser-bar i { width:5px; height:5px; background:#8a9e88; border-radius:50%; }.scene-browser-bar span{font-size:8px;margin:auto;color:var(--forest)}
.scene-site { padding:5%; }.scene-brand{font-size:clamp(8px,1vw,12px);font-weight:600;}
.scene-site-hero { display:grid; grid-template-columns:1.25fr 1fr; gap:7%; margin-top:5%; align-items:center; }
.scene-site-hero strong { font-size:clamp(16px,2.3vw,29px); line-height:1.08; letter-spacing:-.03em; font-weight:600; display:block; }
.scene-site-cta{display:inline-flex;gap:15px;font-size:9px;background:var(--forest);color:var(--chalk);padding:7px 10px;border-radius:5px;margin-top:12px}
.scene-art{position:relative;aspect-ratio:.85;overflow:hidden;background:var(--apricot);border-radius:50% 50% 9px 9px}.scene-art span{position:absolute;width:75%;height:75%;background:var(--amber);border-radius:50%;left:25%;top:36%}.scene-art i{position:absolute;width:55%;height:80%;background:var(--forest);transform:rotate(-30deg);border-radius:60% 60% 0 0;left:-10%;top:30%}.scene-art b{position:absolute;width:22%;height:22%;border-radius:50%;background:var(--chalk);right:20%;top:15%}
.scene-site-lines{display:flex;gap:6%;margin-top:7%;padding-bottom:2%}.scene-site-lines i{height:5px;background:var(--sand);width:30%;border-radius:4px}
.scene-phone{position:absolute;right:4%;bottom:8%;width:24%;aspect-ratio:.5;background:var(--forest);padding:6px;border-radius:20px;box-shadow:4px 5px 0 #173a28,10px 20px 22px rgba(0,52,29,.2);transform:rotateY(-18deg) rotateZ(10deg);animation:scene-phone-float 6s ease-in-out infinite;}
.scene-phone-screen{height:100%;background:var(--chalk);border-radius:14px;padding:22% 10% 10%;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start}.scene-phone-notch{position:absolute;z-index:1;top:9px;left:34%;width:32%;height:6px;border-radius:8px;background:var(--forest)}
.scene-phone-screen>span{font-size:7px;font-weight:600}.scene-phone-screen strong{font-size:clamp(11px,1.3vw,17px);line-height:1.15;margin-top:12%;letter-spacing:-.035em}.scene-phone-art{width:100%;flex:1;min-height:20px;background:var(--apricot);border-radius:35px 35px 4px 4px;margin-top:10%;position:relative;overflow:hidden}.scene-phone-art::after{content:"";position:absolute;inset:30% -20% -40% 20%;border-radius:50%;background:var(--amber)}.scene-phone-screen>i{font-size:6px;font-style:normal;background:var(--forest);color:white;border-radius:4px;padding:5px;margin-top:9%;width:100%;text-align:center}
.scene-search{position:absolute;z-index:2;left:7%;top:7%;display:flex;align-items:center;gap:10px;background:var(--chalk);border:1px solid var(--sand);border-radius:999px;padding:12px 18px;box-shadow:0 8px 0 rgba(0,82,45,.08);transform:rotate(-5deg);animation:scene-search-float 6s ease-in-out infinite}.scene-search svg{width:17px;height:17px}.scene-search span{font-size:12px}.scene-search b{color:var(--amber-btn)}
.scene-enquiry{position:absolute;left:3%;bottom:9%;display:flex;gap:10px;align-items:center;background:var(--forest);color:var(--chalk);padding:13px 16px;border-radius:10px;box-shadow:4px 6px 0 #94a48a;transform:rotate(-5deg);animation:scene-search-float 8s ease-in-out infinite reverse}.scene-enquiry>span{display:grid;place-items:center;background:var(--apricot);color:var(--forest);border-radius:50%;width:29px;height:29px;font-size:23px}.scene-enquiry strong{display:block;font-size:12px;font-weight:500}.scene-enquiry small{display:block;font-size:9px;margin-top:3px;color:var(--apricot)}
.services-scene :is(.scene-browser,.scene-phone,.scene-search,.scene-enquiry){animation-play-state:paused}
.services-scene.is-in-view :is(.scene-browser,.scene-phone,.scene-search,.scene-enquiry){animation-play-state:running}
@keyframes scene-browser-float{0%,100%{transform:translateY(0) rotateX(12deg) rotateY(-15deg) rotateZ(-7deg)}50%{transform:translateY(-12px) rotateX(6deg) rotateY(-9deg) rotateZ(-4deg)}}
@keyframes scene-phone-float{0%,100%{transform:translateY(0) rotateY(-18deg) rotateZ(10deg)}50%{transform:translateY(10px) rotateY(-10deg) rotateZ(7deg)}}
@keyframes scene-search-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media(max-width:700px){#how .services-intro{grid-template-columns:1fr;gap:1.25rem}.services-scene{max-width:430px}.scene-site-hero strong{font-size:clamp(18px,5vw,26px)}.scene-phone-screen strong{font-size:clamp(12px,3vw,16px)}.scene-search{padding:9px 13px}.scene-search span{font-size:10px}.scene-enquiry{padding:10px 12px}.scene-enquiry strong{font-size:10px}.scene-enquiry small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.services-scene :is(.scene-browser,.scene-phone,.scene-search,.scene-enquiry){animation:none!important}}
@media (min-width:600px) and (max-width:1100px) {
  #how .services-intro { grid-template-columns:1fr; gap:2rem; }
  .services-intro-copy { text-align:center; }
  .services-intro-copy h2 { margin-inline:auto; }
  .services-intro-copy > p { max-width:50ch; margin-inline:auto; }
  .services-scene { max-width:520px; }
}

/* Real-time 3D version of the scene (services-3d-v1.js), wide screens only.
   The CSS illustration stays until the first 3D frame, then fades out underneath it. */
.services-scene > canvas.scene-3d { position:absolute; left:-8%; top:-10%; width:116%; height:120%; opacity:0; transition:opacity .8s ease; }
.services-scene.has-3d > canvas.scene-3d { opacity:1; }
.services-scene.has-3d > :not(canvas) { opacity:0; transition:opacity .5s ease; }
@media (max-width:860px) { .services-scene > canvas.scene-3d { display:none; } .services-scene.has-3d > :not(canvas) { opacity:1; } }