/* Targeted polish: preserve the existing palette and composition. */
/* HERO TYPE LAW (W0 2026-09-23): ONE clamp for the hero title, defined here (this file
   loads after studio.css, so this value always wins — the old 1.2rem+5.9vw slope made line
   2 "Built around" render WIDER than line 1 "Web design." at 1300–1500px, breaking the
   staircase composition). The 7vw slope + 6.4rem cap keeps line 2 strictly narrower than
   line 1 at every width. Do not add a competing hero-title clamp anywhere else. */
.header>.brand{white-space:nowrap;flex-shrink:0}.sculpture{height:425px}.hero-copy{min-width:0}.hero-title .hero-word{pointer-events:auto}.hero .hero-title{font-size:clamp(3.5rem,7vw,6.4rem);line-height:1.02;letter-spacing:-.045em}
.hero-title .hero-word{position:relative;display:inline-block;color:var(--coral);padding-bottom:.06em}
.hero-title .hero-char{display:inline-block;color:inherit;transition:transform .5s var(--ease),color .3s var(--ease);transform-origin:50% 85%}
.hero-word::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--lilac);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
@media(hover:hover) and (pointer:fine){.hero-word:hover .hero-char{transform:translateY(-.055em) rotate(-5deg);color:var(--lilac)}.hero-word:hover .hero-char:nth-child(2){transform:translateY(.015em) rotate(4deg)}.hero-word:hover .hero-char:nth-child(3){transform:translateY(-.025em) rotate(-3deg)}.hero-word:hover .hero-char:nth-child(4){transform:translateY(-.08em)}.hero-word:hover::after{transform:scaleX(1)}}
.small-cta,.hero-bottom .button{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-style:normal;font-size:15px;line-height:1.2;letter-spacing:.005em;white-space:nowrap;font-synthesis:none}
.small-cta{min-height:48px;gap:16px;padding:13px 22px}.small-cta .cta-label{line-height:1.3;padding:2px 0}.hero-bottom .button{font-size:16px;gap:30px;flex-shrink:0}.hero-bottom .button svg{transition:transform .3s var(--ease)}
@media(hover:hover){.hero-bottom .button:hover svg{transform:translate(3px,-3px)}}
.small-cta:focus-visible .cta-label>span:first-child{transform:translateY(-130%);opacity:0}.small-cta:focus-visible .cta-label>span+span{transform:none;opacity:1}
.header .primary-nav{margin-right:16px;gap:23px}.header .primary-nav a{white-space:nowrap}.nav-end{gap:22px}
.playground-note{color:var(--plum);font-weight:600;max-width:420px;line-height:1.6}
/* Ownership card: the old idle drift yields to direct manipulation. */
.key-card{animation:none;position:relative;text-align:left;isolation:isolate;overflow:hidden;min-height:0;height:auto;padding:20px 22px;border-radius:12px;box-shadow:0 16px 32px #09020e40;transform:rotate(-3deg) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transition:transform .45s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);border:1px solid transparent}
.key-card::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,40%),#fff7,transparent 65%);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.key-card .key-kicker{display:flex;align-items:center;justify-content:space-between;width:100%}.key-kicker svg{width:17px;height:17px}.key-card strong{white-space:nowrap;line-height:1.15;margin-top:18px}.key-card .key-line{display:block;width:100%;flex:none;margin:14px 0 10px}.key-card .key-detail{font-size:11px;letter-spacing:.03em}.key-card[aria-pressed=true]{background:var(--lilac)}
@media(hover:hover) and (pointer:fine){.key-card:hover{box-shadow:0 20px 38px #09020e55;transform:translateY(-4px) rotate(-1deg) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg))}.key-card:hover::before{opacity:1}.handover-art:has(.key-card:hover) .ownership-orbit{transform:rotateX(48deg) rotateZ(10deg)}}
.handover-art{height:260px}.ownership-orbit{display:none}.key-card:focus-visible{outline:3px solid var(--stone);outline-offset:7px}.key-card:focus-visible::before{opacity:.5}.key-card:active{scale:.98}
/* Services use editorial rows, not another wall of rounded cards. */
.services{padding:110px 4.4% 90px;background:var(--stone);color:var(--plum);border-radius:32px 32px 0 0}
.services-heading{display:grid;grid-template-columns:1.35fr 1fr;gap:70px;align-items:center;margin-bottom:64px}.service-eyebrow{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:24px;font-weight:600}.services h2{font-size:clamp(2.6rem,1.5rem + 3.6vw,4.7rem)}
/* SECTION-INTRO COMPONENT (W0 2026-09-23): one law for the right-column deck beside every
   section heading. Replaces the old conflict (polish 380px/16px vs studio 58ch/22px —
   whichever loaded last won, per-section). Color is NOT set here on purpose: each section's
   own color token (plum on stone, stone on plum) inherits, so contrast is correct everywhere. */
.services-heading>p,.work-heading>p,.ownership-title>p,.section-intro>div>p:first-child{font-size:19px;font-weight:450;line-height:1.6;max-width:36ch;margin-left:auto;text-wrap:pretty}
.service-list{border-top:1px solid #281b2f50}.service-row{position:relative;isolation:isolate;display:grid;grid-template-columns:45px minmax(0,1fr) minmax(0,1fr) 44px;gap:28px;align-items:center;padding:30px 0;border-bottom:1px solid #281b2f50;text-decoration:none;color:var(--plum)}
.service-row::before{content:'';position:absolute;inset:0 -18px;background:var(--lilac);opacity:0;z-index:-1;transform:scaleY(.86);transition:opacity .3s var(--ease),transform .4s var(--ease)}.service-number{align-self:start;padding-top:5px;font-size:12px;font-variant-numeric:tabular-nums}.service-title h3{font-size:clamp(1.4rem,.85rem + 1.3vw,2rem);font-weight:500;line-height:1.15;letter-spacing:-.025em}.service-title>span{display:block;font-size:11px;margin-top:12px}.service-row p{font-size:13px;line-height:1.75;max-width:420px}.service-arrow{width:44px;height:44px;display:grid;place-items:center;border:1px solid #281b2f60;border-radius:50%;transition:background .3s,color .3s,transform .4s var(--ease)}.service-arrow svg{width:20px;height:20px}
.service-row:focus-visible{outline:3px solid var(--plum);outline-offset:6px}.service-row:focus-visible::before{opacity:1;transform:none}.service-row:focus-visible .service-arrow{background:var(--plum);color:var(--stone);transform:rotate(45deg)}
@media(hover:hover){.service-row:hover::before{opacity:1;transform:none}.service-row:hover .service-arrow{background:var(--plum);color:var(--stone);transform:rotate(45deg)}}
.services-foot{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:30px;font-size:12px}.services-foot p{max-width:490px}.services-foot a{display:flex;align-items:center;gap:15px;flex-shrink:0;padding:12px 0}.services-foot svg{width:20px}
.contact .build-heading{font-size:clamp(2.5rem,1.1rem + 4.5vw,4.8rem)}.contact .build-heading>span{white-space:nowrap}
@media(min-width:1700px){.services{padding-left:max(4.4%,calc((100vw - 1550px)/2));padding-right:max(4.4%,calc((100vw - 1550px)/2))}}
@media(min-width:761px) and (max-width:1100px){.sculpture{height:350px}.header{gap:18px}.header .primary-nav{gap:16px;margin-right:0}.small-cta{padding:12px 17px;font-size:14px}.nav-end{gap:12px}.services-heading{gap:40px}.service-row{grid-template-columns:26px minmax(0,1fr) minmax(0,1.1fr) 36px;gap:18px}.service-arrow{width:36px;height:36px}}
@media(max-width:760px){.sculpture{height:300px}.small-cta{font-size:13px;padding:10px 16px;gap:11px}.hero-bottom .button{font-size:16px}.services{padding:70px 6% 55px;border-radius:24px 24px 0 0}.services-heading{grid-template-columns:1fr;gap:26px;margin-bottom:36px}.services-heading>p{font-size:17px;max-width:none}.services h2{font-size:clamp(2.5rem,1.6rem + 4vw,3.8rem)}.service-row{grid-template-columns:25px minmax(0,1fr) 36px;gap:12px;padding:25px 0}.service-title h3{font-size:24px}.service-title>span{font-size:11px;margin-top:8px}.service-row p{grid-column:2/3;font-size:13px;margin-top:3px}.service-arrow{grid-column:3;grid-row:1;width:36px;height:36px}.service-row::before{inset:0 -10px}.services-foot{align-items:start;flex-direction:column;gap:10px}.services-foot p{max-width:340px}.handover-art{height:220px}.key-card{min-height:0}.key-card strong{font-size:39px}.contact .build-heading{font-size:clamp(2.3rem,1rem + 6.8vw,4rem)}.contact .build-spark{right:-25px;width:21px;height:21px}}
@media(min-width:1101px){nav.section-rail{left:18px;gap:0;padding:8px 0;background:transparent;border:0;transform:translateY(-50%)}nav.section-rail::before{content:'';position:absolute;left:11px;top:20px;bottom:20px;width:1px;background:linear-gradient(to bottom,transparent,rgba(231,217,190,.22) 10%,rgba(231,217,190,.22) 90%,transparent)}nav.section-rail a{width:24px;height:30px;display:grid;place-items:center}nav.section-rail a::before{content:'';width:7px;height:1px;background:rgba(231,217,190,.46);transition:width .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}nav.section-rail i{display:none}nav.section-rail [aria-current]::before{width:15px;height:2px;background:var(--coral);transform:translateX(2px)}nav.section-rail a:hover::before,nav.section-rail a:focus-visible::before{width:15px;background:var(--stone);transform:translateX(2px)}nav.section-rail a:hover span,nav.section-rail a:focus-visible span{opacity:1;transform:translateX(0)}nav.section-rail span{left:32px}}
@media(prefers-reduced-motion:reduce){.hero-title .hero-char,.key-card,.key-card:hover{transform:none!important;transition:none!important}.key-card:active{scale:1}.hero-word::after{transition:none}.service-row::before,.service-arrow{transition:none}}