/* Five shared principles: masks, lines, images, counters and link feedback. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-time:660ms}
.text-mask,.hero-line{display:block;padding-bottom:.075em;margin-bottom:-.075em}
.text-mask{overflow:hidden;overflow:clip}
/* The hero headline must be readable from first paint, including font swap. */
.hero-line{overflow:visible}
.mask-inner{display:block;transform-origin:0 100%}
.contact h2 .text-mask,.contact h2 .mask-inner{color:var(--white)}
.contact h2 .mask-inner>span{color:var(--blue)}
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(125,146,182,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(125,146,182,.065) 1px,transparent 1px);background-size:110px 110px;mask-image:linear-gradient(110deg,transparent 20%,#000 90%)}
.hero::after{content:"";position:absolute;z-index:-1;inset:4% -16% 0 60%;background:radial-gradient(ellipse at 55% 45%,rgba(125,146,182,.095),transparent 68%);pointer-events:none}
.hero-visual{perspective:1100px}
.visual-stage{transform:perspective(1100px) translate3d(var(--hero-x,0px),calc(var(--hero-y,0px) + var(--hero-scroll,0px)),0) rotateX(var(--hero-rx,0deg)) rotateY(var(--hero-ry,0deg)) rotate(-3deg);transform-style:preserve-3d}
.visual-stage::before{transform:translate3d(var(--back-x,0px),var(--back-y,0px),-12px);opacity:.9}
.visual-stage img{box-shadow:0 12px 32px rgba(0,0,0,.12)}
.motion-tracking .visual-stage{will-change:transform}

/* Section masks stay animated; the hero headline has no clipped load state. */
@keyframes text-rise{from{transform:translate3d(0,112%,0)}to{transform:translate3d(0,0,0)}}
@keyframes accent-rise{from{transform:translate3d(0,118%,0) skewY(1.6deg)}to{transform:translate3d(0,0,0) skewY(0)}}
@keyframes copy-rise{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes image-arrive{from{opacity:0;transform:translate3d(0,12px,0) scale(1.018)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@media(prefers-reduced-motion:no-preference){
 .hero-description{animation:copy-rise 540ms var(--motion-ease) 235ms both}
 .hero-actions{animation:copy-rise 540ms var(--motion-ease) 295ms both}
 .hero-visual{animation:image-arrive 800ms var(--motion-ease) 100ms both}
}

/* One entry sequence, applied to bounded groups rather than whole long sections. */
.motion-enabled .motion-group .mask-inner{transition:transform var(--motion-time) var(--motion-ease);transition-delay:var(--text-delay,65ms)}
.motion-enabled .motion-group.is-pending .mask-inner{transform:translate3d(0,112%,0)}
.motion-enabled .motion-group .text-mask:nth-child(2){--text-delay:120ms}
.motion-enabled .motion-group .text-mask:nth-child(3){--text-delay:175ms}
.motion-enabled .motion-label{overflow:hidden;overflow:clip}
.motion-enabled .motion-label>span{display:block;transition:transform 520ms var(--motion-ease)}
.motion-enabled .is-pending.motion-label>span{transform:translateY(120%)}
.motion-enabled .motion-copy{transition:opacity 520ms var(--motion-ease),transform 520ms var(--motion-ease);transition-delay:var(--copy-delay,140ms)}
.motion-enabled .is-pending .motion-copy{opacity:0;transform:translate3d(0,9px,0)}
.motion-enabled .project-figure{transition:opacity 600ms var(--motion-ease);transition-delay:100ms}
.motion-enabled .project-figure.is-pending{opacity:0}
.project-image-link{overflow:hidden}
.project-image-link picture{display:block;transform:translate3d(0,var(--project-y,0px),0);transition:transform 120ms linear}
.project-image-link img{transform:scale(1);transition:transform 850ms var(--motion-ease)}
.motion-enabled .project-figure.is-pending img{transform:scale(1.022)}
.motion-enabled .is-pending .mask-inner:focus-within,.motion-enabled .is-pending .motion-copy:focus-within{opacity:1;transform:none;transition:none}
.motion-group.has-focus .mask-inner,.motion-group.has-focus .motion-copy{opacity:1!important;transform:none!important;transition:none!important}
.company h2 .text-mask:last-child{--text-delay:240ms}
.blue-ink{position:relative;box-shadow:none;isolation:isolate}
.blue-ink::after{content:"";position:absolute;left:0;right:0;bottom:.025em;height:.17em;background:var(--blue);z-index:-1;transform:scaleX(1);transform-origin:left;transition:transform 650ms var(--motion-ease) 270ms}
.motion-enabled .is-pending .blue-ink::after{transform:scaleX(0)}

/* Existing rules become short line draws; their space is always reserved. */
.business-field,.numbers>div,.region,.timeline,.numbers-note,.press,.route-link,.footer-inner,.hero-bottom{position:relative}
.business-field,.region,.timeline,.numbers-note,.press,.route-link,.footer-inner,.hero-bottom,.numbers>div{border-top-color:transparent}
.business-field::before,.numbers>div::before,.region::before,.timeline::before,.numbers-note::before,.press::before,.route-link::before,.footer-inner::before,.hero-bottom::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--line);transform:scaleX(1);transform-origin:left;transition:transform 640ms var(--motion-ease);transition-delay:var(--line-delay,0ms);pointer-events:none}
.numbers>div::before,.numbers-note::before{background:rgba(0,0,0,.4)}
.route-link::before,.footer-inner::before,.hero-bottom::before{background:var(--line-light)}
.motion-enabled .is-pending.business-field::before,.motion-enabled .is-pending .business-field::before,.motion-enabled .is-pending.numbers>div::before,.motion-enabled .is-pending.region::before,.motion-enabled .is-pending .region::before,.motion-enabled .is-pending.timeline::before,.motion-enabled .is-pending.numbers-note::before,.motion-enabled .is-pending.press::before,.motion-enabled .is-pending .route-link::before,.motion-enabled .is-pending.footer-inner::before{transform:scaleX(0)}
.beta-note{position:relative;border-left-color:transparent!important}
.beta-note::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--blue);transform-origin:top;transition:transform 540ms var(--motion-ease) 200ms}
.motion-enabled .is-pending .beta-note::before{transform:scaleY(0)}
.company,.reach,.projects,.contact{position:relative}
.company::before,.reach::before,.projects::before,.contact::before{content:"";position:absolute;left:max(var(--gutter),calc((100% - var(--max))/2));top:-24px;height:48px;width:1px;background:var(--blue);z-index:2;pointer-events:none;transform-origin:top;transition:transform 600ms var(--motion-ease)}
.reach::before{background:var(--black);opacity:.5}
.motion-enabled .section-not-entered::before{transform:scaleY(0)}

/* The real value and its width remain available throughout the one-time count. */
.numbers dd{font-variant-numeric:tabular-nums}
.numbers dd .count-value{font-size:1em!important;letter-spacing:inherit;display:inline-grid;grid-template-areas:"number";vertical-align:baseline}
.numbers dd .count-value::before{content:attr(data-final);grid-area:number;visibility:hidden}
.numbers dd .count-rolling{font-size:1em!important;letter-spacing:inherit;grid-area:number;text-align:right}

/* One small abstract network, not a geographic representation. */
.network-detail{width:min(100%,360px);margin-top:24px;color:var(--blue)}
.network-detail svg{display:block;width:100%;height:auto;overflow:visible}
.network-lines{clip-path:inset(0);transition:clip-path 850ms var(--motion-ease) 140ms}
.network-nodes circle{transform-box:fill-box;transform-origin:center;transition:transform 420ms var(--motion-ease) 330ms,opacity 420ms ease 330ms}
.network-nodes circle:nth-child(n+3){transition-delay:440ms}
.network-nodes circle:nth-child(n+5){transition-delay:540ms}
.motion-enabled .is-pending .network-lines{clip-path:inset(0 100% 0 0)}
.motion-enabled .is-pending .network-nodes circle{transform:scale(.1);opacity:0}
.community-origin>p:last-of-type{font-size:14px}

/* Tactile feedback never moves the label or changes layout. */
.button,.contact-email,.main-nav a,.route-link{transition:background 200ms ease,color 200ms ease,box-shadow 200ms ease,transform 200ms var(--motion-ease)}
.button:active{transform:translateY(1px)}
.button-blue:hover{box-shadow:inset 0 0 0 1px var(--blue)}
.text-link{position:relative;border-bottom-color:transparent}
.text-link::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform 350ms var(--motion-ease),background 200ms ease}
.text-link:hover::after,.text-link:focus-visible::after{transform:scaleX(.86);background:var(--blue)}
.main-nav a{position:relative}
.main-nav a::after{content:"";position:absolute;bottom:5px;left:0;width:100%;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 350ms var(--motion-ease)}
.main-nav a:hover::after,.main-nav a:focus-visible::after{transform:scaleX(1)}
.contact-email{position:relative;transition:color 220ms ease,background 220ms ease}
.contact-email::after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 450ms var(--motion-ease)}
.contact-email:hover::after,.contact-email:focus-visible::after{transform:scaleX(1)}
.contact-email:active{color:var(--blue);background:rgba(125,146,182,.09)}
@media(hover:hover) and (pointer:fine){.project-image-link:hover img{transform:scale(1.012)}.route-link:hover{box-shadow:inset 0 -1px 0 var(--blue)}}
@media(min-width:801px){html{scroll-padding-top:128px}.site-header{position:sticky;top:0;z-index:30;transition:transform 360ms var(--motion-ease),background 300ms ease}.site-header.is-scrolled{transform:translateY(-12px);background:rgba(0,0,0,.96)}}
@media(max-width:800px){.hero::before{background-size:88px 88px;opacity:.7}.network-detail{margin-top:18px}}
@media(max-width:600px){
 .visual-stage{transform:rotate(-2deg)}
 .project-image-link picture{transform:none;transition:none}
 .network-detail{grid-column:1/-1;width:100%;margin-top:13px}
 .community-origin>p:last-of-type{font-size:12px;max-width:115px;padding-bottom:6px}
 .network-detail svg{max-height:49px}
 .company::before,.reach::before,.projects::before,.contact::before{top:-16px;height:32px}
 .hero::before{opacity:.48}
 .motion-enabled .motion-group .mask-inner{transition-duration:540ms}
 .motion-enabled .project-figure{transition-delay:35ms}
 .motion-enabled .motion-copy{--copy-delay:90ms}
 .motion-enabled .project-figure.is-pending img{transform:scale(1.012)}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .mask-inner,.motion-enabled .is-pending .mask-inner,.motion-enabled .motion-copy,.motion-enabled .is-pending .motion-copy,.motion-enabled .motion-label,.project-figure{transform:none!important;opacity:1!important;clip-path:none!important}
 .hero-description,.hero-actions,.hero-visual{opacity:1!important;transform:none!important}
 .visual-stage{transform:rotate(-3deg)!important}
 .visual-stage::before,.project-image-link picture,.project-image-link img{transform:none!important}
 .motion-group::before,.motion-group::after,.motion-group *::before,.motion-group *::after,.section-not-entered::before,.network-nodes circle{transform:none!important;opacity:1!important}
 .network-lines{clip-path:none!important}
 .site-header{transform:none!important}
}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media(prefers-reduced-motion:reduce){.motion-enabled .motion-label>span,.button span,.text-link span,.route-link>span,.image-arrow{transform:none!important}}

/* Reserve the final number footprint; reveal digits only when counting starts. */
.numbers .count-value:not([data-counted="true"]) .count-rolling{visibility:hidden}