/* v0.5.1 — orange grid signals, scroll choreography and the supplied brand mark. */
:root{--accent-text:#1e3a8a;--deep-blue:#1e3a8a}
.eyebrow,.story-index,.event-story .story-index,.project-meta span:first-child,.step,.contact-copy h2 em{color:var(--deep-blue)}
/* v0.5.2: unboxed white labels on the dark sections. */
.event-story .story-index{display:block;padding:0;border:0;border-radius:0;background:none;color:#fff}
.technology-v3 .technology-copy .eyebrow{display:block;color:#fff;background:none;border:0;padding:0;border-radius:0}
.project-filters[hidden]{display:none!important}
.projects-heading{margin-bottom:32px}
.brand-icon{display:block;object-fit:contain;height:auto;flex:none}
.about-mark{display:grid;place-items:center;flex:none;width:42px}
.about-mark .brand-icon{width:23px}
.technology-signature .brand-icon{width:25px}
/* Keep the original floating photo field; remove the excessive empty buffer. */
.client-v5{padding-top:112px}
.hero-v5 .fragment-11{--top:1010px}
.hero-v5 .fragment-12{--top:1050px}
.hero-v5 .frame-gala{--top:990px}
.hero-v5 .frame-light{--top:1030px}
/* Broad perspective planes carry animated orange paths into the vanishing point. */
.hero-v5 .infinity-room{opacity:.88;perspective-origin:50% 34%}
.hero-v5 .infinity-floor,.hero-v5 .infinity-ceiling{background:none;animation:none;will-change:auto}
.hero-v5 .infinity-floor{height:180%;top:34%;mask-image:linear-gradient(transparent,#000 10%,#000 75%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 75%,transparent)}
.hero-v5 .infinity-ceiling{height:160%;bottom:66%;opacity:.52}
.infinity-mesh{display:block;width:100%;height:100%;fill:none;overflow:visible}
.infinity-mesh .grid-base{stroke:#ffffff29;stroke-width:1;vector-effect:non-scaling-stroke}
.infinity-mesh .grid-signals path{stroke:#fa4616;stroke-width:2;stroke-linecap:round;stroke-dasharray:100 1580;animation:infinity-signal var(--signal-duration,11s) linear infinite;animation-delay:var(--signal-delay,0s);filter:drop-shadow(0 0 3px #fa4616);vector-effect:non-scaling-stroke}
.hero-v5 .infinity-vanish{background:radial-gradient(ellipse 28% 17% at 50% 34%,#111113 6%,#111113ad 35%,transparent 100%)}
.hero-v5 .infinity-tunnel .tunnel-signal{fill:none;stroke:#fa4616;stroke-width:1.1;stroke-dasharray:.12 .88;animation:tunnel-signal 12s linear infinite;opacity:.55}
/* Circular grid: concentric rings with orange signals running around each orbit. */
.event-space-grid{inset:-8% -24%;background:none;transform:perspective(1000px) rotateY(13deg) rotateX(9deg);mask-image:radial-gradient(ellipse,#000 28%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse,#000 28%,transparent 75%);pointer-events:none}
.event-ring-grid{display:block;width:100%;height:100%;fill:none;overflow:visible}
.event-ring-grid .ring-base{stroke:#ffffff26;stroke-width:1}
.event-ring-grid .ring-signal{stroke:#fa4616;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:.09 .91;animation:ring-signal var(--ring-duration,13s) linear infinite;animation-delay:var(--ring-delay,0s);filter:drop-shadow(0 0 3px #fa4616)}
.event-ring-grid .ring-signal:nth-child(even){animation-direction:reverse}
/* Outer frame follows scroll, inner wrapper pops in, image floats independently. */
.stage-v5 .story-image{transform:translate3d(var(--story-flight-x,0px),var(--story-flight-y,0px),0) rotate(var(--tilt,0deg));background:transparent;overflow:visible;border:0;box-shadow:none;will-change:transform}
.story-arrival,.story-float{display:block;width:100%;height:100%;border-radius:inherit}
.story-arrival{transform-origin:50% 60%}
.story-float{overflow:hidden;border:3px solid #fff;box-shadow:0 18px 40px #0002;background:#ddd}
.event-story .stage-v5 .story-image{border:0;box-shadow:none}
.event-story .story-float{border-color:#ffffff66;box-shadow:0 22px 50px #0006;background:#252525}
.story-float img{display:block;object-fit:cover}
.motion-ready .story-image:not(.frame-arrived) .story-arrival{opacity:0;transform:translate3d(0,75px,0) scale(.82);filter:blur(6px)}
.motion-ready .story-image.frame-arrived .story-arrival{animation:story-arrive 1.15s cubic-bezier(.16,.74,.22,1) var(--story-delay,0ms) both}
.motion-ready .story-image.frame-arrived .story-float{animation:story-float var(--story-float-time,10s) ease-in-out infinite;animation-delay:calc(var(--story-delay,0ms) + 1.15s)}
.motion-ready .approach-grid [data-reveal]{transform:translate3d(0,48px,0) scale(.965);transition-duration:.9s}
.motion-ready .approach-grid [data-reveal].is-visible{transform:none}
/* The pause control applies to every added effect as well. */
.motion-paused .grid-signals path,.motion-paused .tunnel-signal,.motion-paused .ring-signal,.motion-paused .story-arrival,.motion-paused .story-float,
.is-out-of-view .grid-signals path,.is-out-of-view .tunnel-signal,.is-offscreen .ring-signal,.is-offscreen .story-arrival,.is-offscreen .story-float{animation-play-state:paused!important}
.motion-paused .story-stage .story-arrival{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}
.motion-paused .stage-v5 .story-image{transform:rotate(var(--tilt,0deg));will-change:auto}
.motion-paused .story-float{animation:none!important}
@keyframes infinity-signal{to{stroke-dashoffset:-1680}}
@keyframes tunnel-signal{to{stroke-dashoffset:-1}}
@keyframes ring-signal{to{stroke-dashoffset:-1}}
@keyframes story-arrive{from{opacity:0;transform:translate3d(0,75px,0) scale(.82);filter:blur(6px)}to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes story-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}
@media(min-width:1680px){.client-v5{padding-top:120px}.hero-v5 .frame-gala{--top:1060px}.hero-v5 .frame-light{--top:1100px}.hero-v5 .fragment-11{--top:1100px}.hero-v5 .fragment-12{--top:1120px}}
@media(max-width:1100px) and (min-width:701px){.client-v5{padding-top:100px}.hero-v5 .frame-gala{--top:910px}.hero-v5 .frame-light{--top:940px}.hero-v5 .fragment-11{--top:950px}.hero-v5 .fragment-12{--top:980px}}
@media(max-width:700px){
 .client-v5{padding-top:78px}
 .hero-v5 .frame-gala{--top:565px}.hero-v5 .frame-light{--top:625px}
 .hero-v5 .fragment-10{--top:650px}.hero-v5 .fragment-11{--top:695px}.hero-v5 .fragment-12{--top:710px}
 .hero-v5 .infinity-room{perspective:400px}
 .event-space-grid{inset:-10% -32%}
 .story-float{border-width:3px}
 .approach-grid article{display:block}
 .approach-grid .step{display:block;margin:0 0 15px}
 .motion-ready .approach-grid [data-reveal]{transition-delay:0ms}
 .about-mark{width:32px}.about-mark .brand-icon{width:19px}
 .technology-signature .brand-icon{width:18px}
 .projects-heading{margin-bottom:24px}
}
@media(prefers-reduced-motion:reduce){
 .grid-signals path,.tunnel-signal,.ring-signal,.story-arrival,.story-float{animation:none!important}
 .motion-ready .story-stage .story-arrival{opacity:1!important;filter:none!important;transform:none!important}
 .stage-v5 .story-image{transform:rotate(var(--tilt,0deg))!important;will-change:auto}
 .motion-ready .approach-grid [data-reveal]{opacity:1;transform:none;transition:none}
}
/* v0.5.2 — flat navigation, light logo tiles and circular Travel signals. */
.contact-copy h2 em{color:#fa4616}
.logo-tile.dark-logo,
.logo-tile.dark-logo:hover,
.logo-tile.dark-logo.is-active{background:#fff;border-color:#e7e7e7}
.logo-tile.dark-logo:hover,.logo-tile.dark-logo.is-active{background:#fff7f4;border-color:var(--accent)}
.logo-tile.dark-logo img,
.logo-tile.dark-logo:is(:hover,.is-active,:focus-visible) img{filter:grayscale(1) brightness(.4)}
/* Navigation stays in document flow, including its expanded mobile menu. */
:root{scroll-padding-top:24px}
.site-header{position:relative;top:auto;padding:0;z-index:40;background:#fff;border-bottom:1px solid #e9e9eb;pointer-events:auto}
.site-header .nav-wrap{width:min(1280px,calc(100% - 64px));min-height:82px;padding:0;margin:auto;gap:24px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.site-header .brand img{width:172px}
.site-header .desktop-nav{gap:28px;font-size:14px}
.site-header .nav-cta{margin-left:0;min-height:44px;padding:0 0 0 12px;border:0;border-radius:0;background:transparent;color:var(--ink);font-size:13px;box-shadow:none;gap:13px}
.site-header .nav-cta svg{width:20px;height:20px;color:var(--accent)}
.site-header .nav-cta:hover{color:var(--accent);background:transparent;transform:none;box-shadow:none}
.site-header .menu-toggle{border-radius:0;background:transparent}
.site-header .mobile-nav{position:static;inset:auto;flex-basis:100%;width:100%;padding:8px 0 18px;margin:0;background:#fff;border:0;border-top:1px solid #ececee;border-radius:0;box-shadow:none}
.site-header .mobile-nav[hidden]{display:none!important}
.site-header .mobile-nav a{font-size:15px;min-height:48px}
.journey-grid{inset:-8% -24%;perspective:none;background:none;transform:perspective(1000px) rotateY(-13deg) rotateX(9deg);mask-image:radial-gradient(ellipse,#000 28%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse,#000 28%,transparent 75%)}
.journey-grid:before{display:none;animation:none}
.travel-ring-grid{display:block;width:100%;height:100%;fill:none;overflow:visible}
.travel-ring-grid .ring-base{stroke:#fa46162e;stroke-width:1}
.travel-ring-grid .ring-signal{stroke:#fa4616;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:.09 .91;animation:ring-signal var(--ring-duration,13s) linear infinite;animation-delay:var(--ring-delay,0s);filter:drop-shadow(0 0 2px #fa461650)}
.travel-ring-grid .ring-signal:nth-child(even){animation-direction:reverse}
@media(max-width:1100px) and (min-width:801px){.site-header .desktop-nav{gap:19px;font-size:12px}.site-header .nav-wrap{gap:18px}.site-header .brand img{width:150px}}
@media(max-width:800px){
 :root{scroll-padding-top:16px}
 .site-header .nav-wrap{width:calc(100% - 36px);min-height:68px;gap:0 12px;flex-wrap:wrap}
 .site-header .brand{min-height:68px}
 .site-header .brand img{width:132px}
 .site-header .desktop-nav{display:none}
 .site-header .nav-cta{margin-left:auto;padding:0;font-size:12px;gap:9px;min-height:44px}
 .site-header .nav-cta svg{width:17px;height:17px}
 .site-header .menu-toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0}
 .site-header .menu-toggle svg{width:22px;height:22px}
}
@media(max-width:700px){.journey-grid{inset:-10% -32%}}
@media(max-width:360px){.site-header .nav-wrap{width:calc(100% - 32px);gap:0 10px}.site-header .brand img{width:116px}.site-header .nav-cta{font-size:12px;gap:6px}}