/* The approved storyboard shares one stable message across all three states. */
.hero{--hero-radius:28px;margin-inline:0;margin-bottom:0;border-radius:0;clip-path:inset(0px var(--page-edge) 0px var(--page-edge) round var(--hero-radius))}
/* Expand the surface without changing the text measure or the next section's position. */
.hero>.wrap{width:calc(100% - var(--page-edge)*2 - var(--gutter)*2)}
.hero+.service-method-flow>.services{padding-top:clamp(28px,3.2vw,48px)}
.hero::before{background:none}
.hero .hero-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(24px,3svh,38px);text-align:center;padding-block:20px 28px}
.hero-visual{width:100%;max-width:1200px;height:clamp(200px,29svh,340px);flex-shrink:0;pointer-events:none}
.hero-field{display:block;width:100%;height:100%;overflow:visible}
.hero .hero-copy{min-width:0;width:100%;max-width:1120px}
.hero h1{color:#fff;font-size:clamp(32px,3.5vw,54px);font-weight:400;line-height:1.13;letter-spacing:-.038em;text-wrap:balance;margin:0}
.hero-disciplines>em,.hero-disciplines>span{display:inline}
.hero h1 em{color:inherit}
.hero h1 .hero-term{--term-color:#fff;display:inline-block;color:var(--term-color)}
@supports (background-clip:text){
 .hero h1 .hero-term{background-image:linear-gradient(110deg,var(--term-color) 34%,#8580ff 41%,#5865f2 46%,#b9b0ff 50%,#f5efff 53%,#8db7ff 57%,#9185ff 61%,var(--term-color) 68%);background-size:300% 100%;background-position:100% 50%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.hero-opening{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#0d141d;pointer-events:none}
.hero-opening[hidden]{display:none}
.hero-opening video{display:block;width:min(1100px,130vw);height:auto;max-width:none;mix-blend-mode:lighten}
.hero h1>.hero-promise{margin-top:0}
.hero .hero-support{max-width:76ch;color:#b6bfce;font-size:16px;line-height:1.6;margin:24px auto 0}
.hero .hero-actions{justify-content:center;flex-wrap:wrap;gap:16px 32px;margin-top:28px}
.hero .primary-action{padding:8px 10px 8px 22px;gap:18px;min-height:56px;background:#5865f2;font-size:14px}
.hero .primary-action .icon{box-sizing:content-box;width:18px;height:18px;padding:10px;border-radius:50%;background:#ffffff1c;flex-shrink:0}
.hero .primary-action:hover{background:#4653dc}
.hero .hero-actions>.text-link{font-size:14px}
.hero .hero-foot{padding-bottom:16px}
.hero .hero-foot>a{color:#adb8cc}
@media(min-width:761px) and (max-height:800px){
 .hero .hero-main{padding-block:12px 20px;gap:20px}
 .hero-visual{height:clamp(150px,25svh,200px)}
 .hero h1{font-size:clamp(32px,3.2vw,46px)}
 .hero .hero-support{margin-top:18px;font-size:15px}
 .hero .hero-actions{margin-top:20px}
 .hero .hero-foot{padding-bottom:10px}
}
@media(max-width:1000px) and (min-width:761px){
 .hero .hero-main{padding-block:20px 30px}
 .hero-visual{height:clamp(200px,25svh,280px)}
 .hero .hero-support{max-width:58ch}
}
@media(max-width:760px){
 .hero{--hero-radius:22px}
  .hero-opening{grid-template-columns:minmax(0,1fr)}
  .hero-opening video{width:144vw;justify-self:center}
 .hero .hero-main{padding-block:8px 20px;gap:24px}
 .hero-visual{height:clamp(154px,22svh,204px);width:calc(100% + 32px);max-width:none}
 /* Crop the lateral field, keeping the original step and connection in view. */
 .hero-field{width:174%;max-width:none;margin-left:-34%}
 .hero h1{font-size:clamp(28px,7.5vw,40px);line-height:1.13;letter-spacing:-.038em}
 .hero h1>.hero-promise{margin-top:10px}
 .hero .hero-support{font-size:14px;line-height:1.55;margin-top:18px;max-width:44ch}
 .hero .hero-actions{flex-direction:column;gap:6px;margin-top:22px}
 .hero .primary-action{font-size:13px;min-height:54px;gap:14px;padding-left:18px}
 .hero .primary-action .icon{padding:9px}
 .hero .hero-actions>.text-link{font-size:13px;min-height:44px}
 .hero .hero-foot{padding-bottom:10px}
}
@media(max-width:360px){
 .hero-visual{height:146px}
 .hero .primary-action{font-size:12px;gap:10px;padding-left:14px}
}
/* ScrollTrigger can restore an inline smooth value after a media change. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}