/* Wordmark departure followed by one continuous cloud passage. */
.site-intro[hidden]{display:none}
.site-intro{position:fixed;inset:0;z-index:1000;overflow:hidden;color:#fff;animation:intro-depart 3.1s both;pointer-events:none}
.site-intro::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,#43a9e2,transparent 70%),linear-gradient(150deg,#0876b8,#288fcf);animation:intro-sky-clear 3.1s both}
.intro-playing{overflow:hidden}
.intro-brand{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Geist,Arial,sans-serif;font-size:clamp(46px,8vw,100px);font-weight:700;line-height:1;letter-spacing:-.065em;animation:intro-brand-depart 3.1s both}
.intro-brand img{width:.72em;height:.72em;margin-right:.18em;position:relative;top:.025em;flex-shrink:0;animation:intro-mark-arrive .8s cubic-bezier(.16,1,.3,1) both}
.intro-brand span{animation:intro-word-arrive .85s .18s cubic-bezier(.16,1,.3,1) both}
.intro-brand span+span{animation-delay:.32s}
.intro-cloud{position:absolute;inset:-65% -70%;background:url('/images/intro-cloud-volume.svg') center/100% 100% no-repeat;will-change:transform;animation:intro-cloud-pass 3.1s linear both}
@media(max-width:700px){.intro-cloud{inset:-80% -200%}}
.intro-skip{position:absolute;right:clamp(20px,4vw,60px);bottom:28px;z-index:2;border:1px solid #ffffff66;border-radius:30px;padding:12px 18px;background:#075a8b80;color:#fff;font:inherit;font-size:14px;cursor:pointer;pointer-events:auto}
.intro-skip:focus-visible{outline:3px solid #c6ff43;outline-offset:4px}
@keyframes intro-word-arrive{from{opacity:0;transform:translateY(24px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes intro-mark-arrive{from{opacity:0;transform:scale(.75) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes intro-brand-depart{0%,25%{opacity:1;transform:translateY(0)}42%,100%{opacity:0;transform:translateY(-80vh)}}
@keyframes intro-cloud-pass{0%,31%{transform:translateY(100%)}65.5%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@keyframes intro-sky-clear{0%,61%{opacity:1}67%,100%{opacity:0}}
@keyframes intro-depart{0%,94%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes intro-frame-settle{from{transform:scale(1.035);border-radius:0}to{transform:scale(1);border-radius:22px}}
@media(prefers-reduced-motion:no-preference){
 .intro-sequence .hero-shell{transform-origin:center top;animation:intro-frame-settle 1.05s 2s cubic-bezier(.22,1,.36,1) both}
 .intro-sequence .hero-title-line-main{animation-delay:2.15s}
 .intro-sequence .hero-title-line-accent{animation-delay:2.4s}
 .intro-sequence .hero .hero-summary{animation:intro-word-arrive .7s 2.6s both}
 .intro-sequence .hero-artwork .hero-actions{animation-delay:2.8s}
 .intro-sequence .hero-shell .header{animation:intro-word-arrive .7s 2s both}
}
@media(max-width:700px){@keyframes intro-frame-settle{from{transform:scale(1.035);border-radius:0}to{transform:scale(1);border-radius:17px}}}
@media(prefers-reduced-motion:reduce){.site-intro{display:none}.intro-playing{overflow:auto}}
/* Hero refinements; service styling comes from service-stories.css. */
.hero .hero-summary{max-width:580px;margin:0 auto 30px;color:#eef8ff;font-size:17px;line-height:1.6}
.hero-shell .hero-artwork{padding-bottom:66px}
.hero-artwork::before{top:auto;bottom:-40px;height:clamp(180px,30vw,400px);width:calc(100vw - 20px);background-size:100% auto;background-position:center bottom;mask-image:linear-gradient(to bottom,transparent,#000 18%)}
/* Frame the complete hero in the first visible browser screen. */
.hero-shell{min-height:calc(100vh - 20px);min-height:calc(100svh - 20px)}
.hero-shell .hero{flex:1;margin:0 auto;justify-content:center;padding:40px 0 80px}
.hero-shell .hero-artwork{padding-bottom:0}
.hero-artwork::before{display:none}
.hero-shell::after{display:block;inset:auto 0 0;width:100%;height:48%;z-index:1;background:url('/images/hero-cloud-banks.svg?v=2') center bottom/cover no-repeat;opacity:.8;filter:none;mask-image:linear-gradient(to bottom,transparent,#000 22%);pointer-events:none}
.hero-actions .button{align-items:center;justify-content:center;min-height:40px;padding-top:0;padding-bottom:0;line-height:1;text-align:center}
.hero-actions .button>span{align-self:center;display:inline-grid;place-items:center;line-height:1}
.hero-actions .button>span>i{display:block;line-height:1}
.hero-title-line{display:inline-block}.hero h1>.hero-title-line{color:#fff}
.services>#services-title{max-width:1080px}
@keyframes hero-title-line-arrive{from{opacity:0;translate:0 20px;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@media(min-width:801px){
 .service-story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3vw,42px)}
 .service-copy{width:100%;max-width:460px}
 .service-copy h3.service-direct-title{font-size:clamp(31px,3vw,42px);line-height:1.08;letter-spacing:-1.6px}
 .service-story:nth-child(odd) .service-copy{margin-left:auto}
 .service-story:nth-child(even) .service-copy{margin-right:auto}
 .service-story:nth-child(odd) .service-product{margin-left:0;margin-right:auto}
 .service-story:nth-child(even) .service-product{margin-left:auto;margin-right:0}
 #service-websites{--service-pair-shift:36px}
 #service-reports{--service-pair-shift:-34px}
 #service-presentations{--service-pair-shift:16px}
 #service-systems{--service-pair-shift:-59px}
 .service-story .service-copy,.service-story .service-product{translate:var(--service-pair-shift) 0}
}
@media(min-width:701px){.section.process{padding-top:52px}}
@media(prefers-reduced-motion:no-preference){
 .hero-shell .hero>h1{animation:none}
 .hero-title-line{animation:hero-title-line-arrive .72s cubic-bezier(.22,1,.36,1) both}
 .hero-title-line-main{animation-delay:.1s}
 .hero-title-line-accent{animation-delay:.38s}
 .hero-artwork .hero-actions{animation-delay:.7s}
}
@media(max-width:700px){
 .hero-shell{min-height:calc(100vh - 12px);min-height:calc(100svh - 12px)}
 .hero-shell .hero{padding:32px 0 64px}
 .hero-shell::after{height:38%;background-size:auto 100%}
 .hero .hero-summary{font-size:15px;padding:0 12px;max-width:360px;line-height:1.6}
 .hero-shell .hero h1>.hero-title-line-main{white-space:normal}
 .hero-summary br{display:none}
 .hero-artwork::before{width:200vw;height:220px;background-size:100% auto}
 .hero-actions .button{min-height:48px}
}