/* Motion plays like a short edit: entrance, accent, then rest. */
@keyframes hero-line-in{from{opacity:0;transform:translate3d(0,45px,0);filter:blur(6px)}to{opacity:1;transform:translateZ(0);filter:blur(0)}}
@keyframes hero-detail-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes art-intro{from{opacity:0;transform:translateY(35px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes line-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes frame-wipe{from{clip-path:inset(0 100% 0 0);filter:brightness(1.5)}to{clip-path:inset(0 0 0 0);filter:brightness(1)}}
@keyframes mark-enter{from{opacity:0;transform:translateY(55px) rotate(-12deg)}to{opacity:.92;transform:translateY(0) rotate(0)}}
@keyframes monogram-enter{from{opacity:0;transform:rotate(-28deg) scale(.76)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes symbol-enter{0%{opacity:0;transform:translate(-12px,12px) rotate(-45deg)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes border-glow{0%,100%{box-shadow:0 0 0 #d6fa4800}50%{box-shadow:0 0 22px #d6fa483d}}
.hero-line{display:block;will-change:transform}.hero-line:nth-child(1){animation:hero-line-in .8s cubic-bezier(.18,.75,.24,1) .06s both}.hero-line:nth-child(2){animation:hero-line-in .8s cubic-bezier(.18,.75,.24,1) .18s both}.hero-line:nth-child(3){animation:hero-line-in .8s cubic-bezier(.18,.75,.24,1) .3s both}
.hero-copy .eyebrow{animation:hero-detail-in .7s ease .05s both}.hero-lede{animation:hero-detail-in .75s ease .48s both}.hero-actions{animation:hero-detail-in .75s ease .61s both}.hero-art{animation:art-intro 1.05s cubic-bezier(.16,.72,.28,1) .17s both;translate:0 var(--hero-scroll,0px)}
.section-kicker{position:relative}.js-motion .section-kicker.reveal.is-visible:before{content:'';position:absolute;top:-1px;left:0;width:28%;height:2px;background:var(--accent);transform-origin:left;animation:line-sweep .9s ease .2s both}
.js-motion .process-grid article.is-visible .step-art{animation:frame-wipe .95s cubic-bezier(.18,.72,.27,1) .12s both}
.js-motion .service-row.is-visible .service-symbol{animation:symbol-enter .65s cubic-bezier(.2,.7,.2,1) .18s both}
.js-motion .feature-card.is-visible .visual-big{animation:mark-enter 1.05s cubic-bezier(.16,.72,.28,1) .15s both}
.js-motion .about-right.is-visible .about-monogram{animation:monogram-enter .95s cubic-bezier(.16,.72,.28,1) .1s both}
.back-to-top.is-visible{animation:border-glow 3.2s ease-in-out infinite}

@media(max-width:720px){
  body{font-size:16px}
  .hero h1{font-size:clamp(48px,10.3vw,72px);line-height:1.12}
  .intro h2,.process h2,.about h2,.contact h2,.feature h2{font-size:clamp(39px,8.4vw,61px)}
  .hero-lede{font-size:17px;line-height:1.72}
  .intro-grid p,.process-heading p,.feature-content p,.about-right p,.about-right p+p,.contact-grid>div>p{font-size:16px;line-height:1.76}
  .service-row p,.process-grid p{font-size:15px;line-height:1.74}
  .service-row h3,.process-grid h3{font-size:19px;line-height:1.4}
  .brief-form label{font-size:15px}.brief-form input,.brief-form select,.brief-form textarea{font-size:16px;line-height:1.55}
  .button,.text-link,.channel-link,.back-top{font-size:14px}.desktop-nav a,.mobile-nav a{font-size:15px}
  .hero-topline,.section-kicker,.eyebrow,.hero-bottom,.step-no,.service-no,.form-note,.footer-bottom{font-size:11px;line-height:1.6}
  .form-note{font-size:12px}.footer-bottom{font-size:11px}
  .service-row{padding-top:29px;padding-bottom:29px}.process-grid article,.process-grid article+article{padding-top:32px;padding-bottom:37px}
  .marquee div{animation-duration:21s}
}
@media(max-width:400px){
  .hero h1{font-size:clamp(43px,11.4vw,48px)}
  .intro h2,.process h2,.about h2,.contact h2,.feature h2{font-size:clamp(32px,9.3vw,38px)}
  .service-row h3,.process-grid h3{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .hero-line,.hero-copy .eyebrow,.hero-lede,.hero-actions,.hero-art,.js-motion .section-kicker.reveal.is-visible:before,.js-motion .process-grid article.is-visible .step-art,.js-motion .service-row.is-visible .service-symbol,.js-motion .feature-card.is-visible .visual-big,.js-motion .about-right.is-visible .about-monogram,.back-to-top.is-visible{animation:none;filter:none;clip-path:none;transform:none;opacity:1}
  .hero-art{translate:none}
}