/* TD v05: decision map hero, type rhythm and scroll motion. Loaded last; content stays visible without JS. */
:root{--hm-ease:cubic-bezier(.16,1,.3,1)}

/* Type: the display size and tracking of v04 fused words ("Umestudopara"). */
.hero-fluid h1{font-size:clamp(3.5rem,6.1vw,6rem);line-height:1.01;letter-spacing:-.04em;max-width:700px}
.hero-fluid-copy{max-width:640px}
.home-page .section-split h2{letter-spacing:-.04em}

/* Hero ambient replaces the WebGL field. */
.home-page .hero-fluid-fallback{opacity:1;background:radial-gradient(ellipse 38% 58% at 78% 48%,rgba(165,218,194,.42),transparent 72%),#fff}

/* Decision map */
.hero-map{right:0;top:50%;width:clamp(440px,41vw,580px);height:auto;transform:translateY(-50%);perspective:1400px}
.hero-map .atropos-inner{position:relative;padding:34px 30px 22px;overflow:visible}
.hm-surface{position:absolute;inset:0;border-radius:44px;background:linear-gradient(155deg,rgba(255,255,255,.92),rgba(228,241,234,.86));box-shadow:0 30px 70px rgba(18,57,77,.13),0 3px 10px rgba(18,57,77,.05)}
.hm-stage{position:relative;aspect-ratio:560/500}
.hm-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;stroke:none;stroke-width:0}
.hm-flow{fill:none}
.hm-flow:not([data-alt="B"]){stroke-opacity:.32}
.hm-flow[data-alt="B"]{stroke:#16776e;stroke-opacity:.7;stroke-width:2}
.hm-alt:not(.is-chosen) rect{opacity:.6}.hm-alt:not(.is-chosen) text{fill:#4f6f7a}
.hm-captions{position:relative;display:grid;grid-template-columns:32% 44.6% 23.4%;margin-top:12px;font-size:13px;font-weight:600;line-height:1.2;color:#365e69;text-align:center}
.hm-cap-decision{color:#16776e}
.hm-captions span{justify-self:center}

/* Pre-JS hold for the intro only; the 3 s timeout in <head> releases it if scripts fail. */
.motion-pending .hm-chip,.motion-pending .hm-flow,.motion-pending .hm-alt,.motion-pending .hm-layer-decision,.motion-pending .hm-captions span{opacity:0}

@media(min-width:1101px) and (max-width:1320px){.hero-map{width:440px;right:-10px}.hero-fluid h1{font-size:clamp(3.4rem,5.6vw,5rem)}.hero-fluid-copy{max-width:560px}}
@media(max-width:1100px){.hero-map{position:relative;top:auto;right:auto;transform:none;width:min(100%,540px);height:auto;margin:34px 0 18px;align-self:flex-start}}
@media(max-width:800px){.hero-map{width:min(100%,500px);height:auto}}
@media(max-width:600px){.hm-flow:not([data-alt="B"]){stroke-opacity:.22}.hero-map{width:100%;height:auto;margin:26px 0 12px}.hero-map .atropos-inner{padding:22px 16px 16px}.hm-surface{border-radius:30px}.hm-captions{font-size:12px;margin-top:8px}.hero-fluid h1{font-size:clamp(2.9rem,12.4vw,4.2rem);line-height:1.02}}
@media(max-width:360px){.hero-fluid h1{font-size:2.7rem}}

/* Headings revealed line by line (motion.js adds .ln only when motion is allowed). */
.ln{display:block;overflow:clip;padding-block:.16em .1em;margin-block:-.16em -.1em}
.ln-i{display:block}

/* Deliverables: pointer light follows the item being read. */
.deliverables-list>div{position:relative;isolation:isolate;overflow:hidden;transition:translate .25s var(--hm-ease),box-shadow .25s var(--hm-ease)}
.deliverables-list>div::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(165,218,194,.6),transparent 70%);transition:opacity .3s}
@media(hover:hover) and (pointer:fine){.deliverables-list>div:hover{translate:0 -3px;box-shadow:0 18px 40px rgba(18,57,77,.1)}.deliverables-list>div:hover::before{opacity:1}}

/* Closing CTA: one pass of light around the conversion action (4 s) plus a 0.5 s fade, once per page load,
   started by motion.js when the section first appears. Total motion 4.5 s; never restarts. Off with reduced motion. */
@property --beam{syntax:"<angle>";inherits:false;initial-value:0deg}
.closing .contact-active{position:relative;isolation:isolate}
.closing .contact-active::after{content:"";position:absolute;inset:-3px;border-radius:inherit;padding:3px;z-index:-1;background:conic-gradient(from var(--beam),transparent 0 72%,#a5dac2 86%,#16776e 94%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.closing.is-beam-played .contact-active::after{opacity:1;animation:td-beam 4s linear 1 forwards,td-beam-out .5s ease 4s forwards}
@keyframes td-beam{to{--beam:360deg}}
@keyframes td-beam-out{to{opacity:0}}

@media(prefers-reduced-motion:reduce){
  .deliverables-list>div,.deliverables-list>div::before{transition:none}
  .deliverables-list>div:hover{translate:none}
  .closing .contact-active::after{animation:none!important;opacity:0!important}
}

@media print{.deliverables-list>div,.people-teaser-photos img,.ln-i{opacity:1!important;transform:none!important;clip-path:none!important}}