/* Motion direction: 7/10. Each effect supports hierarchy, spatial context or a
   real interaction. Native CSS timelines never intercept scrolling.
   The reduced-motion preference returns a static page. */
.hero-content{animation:none}
.hero h1{max-width:1050px;font-size:clamp(38px,4.45vw,64px);line-height:1.13}
.hero h1 .hero-line{display:block;overflow:hidden;padding-bottom:.075em;margin-bottom:-.075em;color:#f1f3f2}
.hero h1 .hero-line-accent{color:#b6cbd9}
.hero h1 .hero-line>span{display:block;color:inherit}
.hero-intro{max-width:460px}
.hero-media picture{display:block;width:100%;height:100%}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;opacity:0;transition:opacity 1.3s ease}
.hero.video-ready .hero-video{opacity:1}
.technology-image{position:relative}
.technology-incoming{position:absolute;inset:0;height:100%;object-fit:cover;pointer-events:none}
.case-tabs{position:relative}
.tab-indicator{position:absolute;left:0;bottom:0;height:2px;width:1px;background:var(--accent);transform-origin:left;pointer-events:none;opacity:0;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.case-tabs.indicator-ready .tab-indicator{opacity:1}
.case-tabs.indicator-ready button[aria-selected=true]:after{display:none}
.case-panel>img{background:var(--raised)}
.brand-statement{line-height:1.4}
.statement-line{display:block;position:relative;white-space:nowrap;color:var(--muted)}
.statement-ink{position:absolute;inset:0;color:var(--accent);clip-path:inset(0 100% 0 0)}
.contact{position:relative;overflow:hidden}
.contact .container{position:relative}
.header:after{content:"";height:1px;position:absolute;bottom:-1px;left:0;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}

@media(prefers-reduced-motion:no-preference){
  :root:not([data-motion=paused]) .hero-line>span{animation:headline-in 1.2s cubic-bezier(.16,1,.3,1) .12s both}
  :root:not([data-motion=paused]) .hero-line:nth-child(2)>span{animation-delay:.28s}
  :root:not([data-motion=paused]) .hero-eyebrow{animation:soft-in .7s ease .05s both}
  :root:not([data-motion=paused]) .hero-intro{animation:soft-in .9s ease .55s both}
  :root:not([data-motion=paused]) .hero-buttons{animation:soft-in .9s ease .72s both}
  :root:not([data-motion=paused]) .hero-media picture{animation:hero-lens 1.7s cubic-bezier(.2,.7,.2,1) both}
  .will-reveal{opacity:0;transform:translateY(32px);transition:opacity .95s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1)}
  .will-reveal.is-visible{opacity:1;transform:none}
  .technology-image.will-reveal{transform:translateY(35px) scale(.97);transition-duration:1.1s}
  .technology-image.will-reveal.is-visible{transform:none}
  .tech-step[open] .step-body{animation:soft-in .5s cubic-bezier(.22,1,.36,1) both}
  .faq-item[open]>p{animation:soft-in .4s ease both}
  dialog[open]{animation:dialog-enter .35s cubic-bezier(.22,1,.36,1) both}
  dialog[open]::backdrop{animation:backdrop-enter .25s ease both}
  .statement-line.is-visible .statement-ink{animation:statement-reveal 1.3s cubic-bezier(.22,1,.36,1) both}
  .main-nav a{position:relative}
  .main-nav a:after{content:"";position:absolute;bottom:-6px;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .main-nav a:hover:after{transform:scaleX(1);transform-origin:left}
  .button{transition:background .25s ease,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
  .button:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgb(0 0 0 / .14)}
  .button:active{transform:translateY(0)}
  @supports(animation-timeline:view()){
    :root:not([data-motion=paused]) .header:after{animation:reading-progress linear both;animation-timeline:scroll(root block)}
    :root:not([data-motion=paused]) .brand-statement{view-timeline-name:--statement;view-timeline-axis:block}
    :root:not([data-motion=paused]) .statement-ink{animation:statement-reveal linear both;animation-timeline:--statement;animation-range:entry 10% cover 40%}
    :root:not([data-motion=paused]) .statement-line:nth-child(2) .statement-ink{animation-range:entry 40% cover 55%}
    :root:not([data-motion=paused]) .statement-line:nth-child(3) .statement-ink{animation-range:entry 70% cover 70%}
    @media(min-width:1024px){
      :root:not([data-motion=paused]) .portable-photo{view-timeline-name:--equipment;view-timeline-axis:block}
      :root:not([data-motion=paused]) .portable-photo img{animation:equipment-depth linear both;animation-timeline:--equipment;animation-range:entry 0% exit 100%}
    }
  }
}
@keyframes headline-in{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes soft-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-lens{from{transform:scale(1.12);opacity:.45}to{transform:scale(1);opacity:1}}
@keyframes statement-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes equipment-depth{from{transform:translateY(-5%) scale(1.12)}to{transform:translateY(5%) scale(1.12)}}
@keyframes reading-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
:root[data-motion=paused]{scroll-behavior:auto}
:root[data-motion=paused] *, :root[data-motion=paused] *:before,:root[data-motion=paused] *:after{animation:none!important;transition:none!important}
:root[data-motion=paused] .will-reveal{opacity:1;transform:none}
:root[data-motion=paused] .statement-ink{clip-path:inset(0)}
@media(prefers-reduced-motion:reduce){
  .will-reveal{opacity:1;transform:none}
  .statement-ink{clip-path:inset(0)}
  .hero-video{display:none}
}
@media(max-width:1023px){
  .hero h1{font-size:clamp(34px,5.1vw,52px)}
  .hero-intro{max-width:370px}
  .hero-video{object-position:57% center}
}
@media(max-width:767px){
  .hero{min-height:640px;height:calc(100svh - 72px);max-height:820px}
  .hero-content{min-height:0;height:100%;padding-top:40px;padding-bottom:36px}
  .hero h1{font-size:clamp(22px,6.8vw,46px);line-height:1.2;letter-spacing:-.045em}
  .hero h1 .hero-line{overflow:visible}
  .hero h1 .hero-line>span{animation-name:soft-in}
  .hero-intro{font-size:16px;max-width:370px}
  .hero-buttons{padding-top:40px;gap:16px;margin-top:auto}
  .hero-media{inset:150px 0 0}
  .hero-video{object-position:58% center}
  .hero .film-trigger{font-size:12px}
  .hero-shade{background:linear-gradient(180deg,#111719 0%,#111719 18%,rgb(17 23 25 / .72) 36%,rgb(17 23 25 / .08) 58%,rgb(17 23 25 / .95) 100%)}
  .statement-line{white-space:normal}
  .brand-statement{font-size:clamp(34px,8.5vw,60px)}
  .section-heading h2{font-size:clamp(23px,6.45vw,30px)}
  .portable>*{min-width:0}
  .portable-copy h2{font-size:clamp(30px,7.6vw,38px)}
}