/* HUB E47 — typography leads; interactions provide the contrast. */
:root { --ease-out:cubic-bezier(.22,1,.36,1); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.hero-main { max-width:1440px; padding-top:165px; padding-bottom:100px; }
.hero { min-height:650px; }
.hero h1 { font-size:clamp(52px,6.25vw,94px); letter-spacing:-.065em; line-height:1.08; }
.title-line { display:block; overflow:clip; padding:.12em .02em; margin:-.12em -.02em; color:var(--sand); perspective:1000px; }
.title-line:last-child { color:var(--citrus); }
.title-word,.title-word > span { display:inline-block; }
.title-word > span { transform-origin:50% 100%; }
.hero-actions { gap:18px; }
.button,.nav-cta,.film-trigger { transition:transform 360ms var(--ease-out),background-color 180ms; }
.button.magnet-active { transition:transform 140ms ease-out; }
.button > .button-label { position:relative; overflow:clip; display:inline-block; font-size:inherit; line-height:1.45; transform:none; }
.hero-actions .button > .button-label { font-size:inherit; }
.button-label > span { display:block; transition:transform 420ms var(--ease-out); }
.button-label > .label-copy { position:absolute; inset:0; transform:translateY(135%); }
.button:is(:hover,:focus-visible) .button-label > span:first-child { transform:translateY(-135%); }
.button:is(:hover,:focus-visible) .button-label > .label-copy { transform:translateY(0); }
.button-arrow,.nav-cta svg,.text-link > span,.scroll-arrow,.play-icon { display:inline-block; transition:transform 400ms var(--ease-out); }
.button:is(:hover,:focus-visible) .button-arrow { transform:translate(4px,-4px) rotate(45deg); }
.nav-cta:hover svg { transform:translate(3px,-3px); }
.button:active,.film-trigger:active { transform:scale(.97); }
.text-link:is(:hover,:focus-visible) > span { transform:translate(6px,6px) rotate(-45deg); }
.hero-bottom a:hover .scroll-arrow { transform:translateY(6px); }
.film-trigger:hover .play-icon { transform:scale(1.25); }

/* This single continuous gesture gives the page its editorial rhythm. */
.disciplines { position:relative; display:block; margin:0; max-width:none; border:0; border-top:1px solid #9fbab838;
  border-bottom:1px solid #9fbab838; border-radius:0; background:var(--night); padding:26px 0; overflow:clip; }
.marquee-window { overflow:clip; margin:0; mask-image:linear-gradient(90deg,transparent,#000 5%,#000 92%,transparent); }
.marquee-track { display:flex; width:max-content; }
.marquee-group { display:flex; align-items:center; flex-shrink:0; gap:36px; padding-right:36px; }
.disciplines .marquee-group > span { display:block; color:var(--sand); font-family:Shoulders,Impact,sans-serif; font-weight:700;
  font-size:clamp(64px,7.8vw,118px); line-height:1; letter-spacing:-.025em; text-transform:uppercase; white-space:nowrap; }
.disciplines .marquee-group > span:nth-of-type(even) { color:transparent; -webkit-text-stroke:1px var(--mist); }
.disciplines .marquee-group > i { display:block; font-family:Instrument,Arial,sans-serif; font-style:normal; font-size:48px; color:var(--citrus); }
.motion-on .marquee-track { animation:creative-band 34s linear infinite; animation-play-state:paused; }
.motion-on.is-running .marquee-track { animation-play-state:running; }

/* A citrus curtain is a response to choosing a service. */
.services { align-items:start; }
.service { position:relative; isolation:isolate; transition:transform 450ms var(--ease-out),border-color 200ms; }
.service::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--citrus);
  transform:translateY(101%); transition:transform 520ms var(--ease-out); }
.service:hover,.service[open] { background:radial-gradient(ellipse at 50% 0,#103f4633,transparent 75%),#0b2327; }
.service:is(:hover,:focus-within,[open]) { border-color:var(--citrus); }
.service:is(:hover,:focus-within,[open])::before { transform:translateY(0); }
.service .service-name,.service .service-teaser,.service-content p { transition:color 200ms; }
.service:is(:hover,:focus-within,[open]) .service-name { color:var(--ink); }
.service:is(:hover,:focus-within,[open]) .service-teaser,.service:is(:hover,:focus-within,[open]) .service-content p { color:#122b30dc; }
.service:is(:hover,:focus-within,[open]) .service-content li { color:var(--ink); border-color:#122b3059; }
.service:is(:hover,:focus-within,[open]) .expand-icon::before,.service:is(:hover,:focus-within,[open]) .expand-icon::after { background:var(--ink); }
.icon-stage { transition:transform 520ms var(--ease-out); }
.service:is(:hover,:focus-within,[open]) .icon-stage { transform:rotate(9deg) scale(1.08); }
.service[open] .service-content { animation:content-enter 400ms var(--ease-out); }
.expand-icon::after { transition:transform 300ms var(--ease-out); }
@supports (interpolate-size:allow-keywords) {
  .service { interpolate-size:allow-keywords; }
  .service::details-content { block-size:0; overflow:clip;
    transition:block-size 320ms var(--ease-out),content-visibility 320ms allow-discrete; }
  .service[open]::details-content { block-size:auto; }
}

.process { overflow:clip; }
.process-grid li { transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out); transition-delay:var(--step-delay,0ms); }
.process-grid li.motion-pending { opacity:0; transform:translateX(60px) rotate(3deg); }
.process-grid li.motion-entered { opacity:1; transform:none; }
.film-dialog::backdrop { backdrop-filter:none; background:#081c20ed; }
.film-dialog[open] { animation:dialog-enter 450ms var(--ease-out); }
.film-dialog[open]::backdrop { animation:backdrop-enter 240ms ease-out; }
.close-dialog { transition:transform 250ms var(--ease-out),background-color 160ms; }
.close-dialog:hover { transform:rotate(90deg); background:#9fbab81a; }

@media (hover:hover) and (pointer:fine) {
  .service:hover { transform:translateY(-6px); }
  .process-grid li:hover .step { transform:translateX(6px); }
  .step { transition:transform 300ms var(--ease-out); }
}
@media (max-width:1050px) { .hero h1 { font-size:6.35vw; } }
@media (max-width:800px) {
  .hero h1 { font-size:6.7vw; }
  .header nav,.header nav.menu-open { display:flex; position:absolute; top:88px; left:var(--gutter); right:var(--gutter);
    width:auto; flex-direction:column; align-items:flex-start; border:1px solid #9fbab83b; border-radius:20px; background:#0b2327;
    padding:16px; gap:6px; box-shadow:0 20px 30px #00000030; font-size:16px; transform:translateY(-14px) scale(.96); transform-origin:top right;
    opacity:0; visibility:hidden; pointer-events:none; transition:transform 320ms var(--ease-out),opacity 220ms,visibility 320ms; }
  .header nav a { width:100%; padding:12px 14px; border-radius:12px; font-size:15px; }
  .header nav.menu-open { transform:none; opacity:1; visibility:visible; pointer-events:auto; }
}
@media (max-width:520px) {
  .hero-main { padding-top:138px; padding-bottom:100px; }
  .hero h1 { font-size:clamp(29px,8.6vw,39px); line-height:1.12; }
  .hero-actions { gap:12px; }
  .disciplines { padding:23px 0; }
  .marquee-group { gap:22px; padding-right:22px; }
  .disciplines .marquee-group > span { font-size:64px; }
  .disciplines .marquee-group > i { font-size:32px; }
  .process-grid li.motion-pending { transform:translateX(32px) rotate(2deg); }
}
@media (prefers-reduced-motion:no-preference) {
  .hero-kicker { animation:soft-enter 750ms var(--ease-out) 30ms both; }
  .title-word > span { animation:word-enter 1100ms var(--ease-out) both; animation-delay:calc(100ms + var(--word-index) * 75ms); }
  .hero-copy > p { animation:soft-enter 750ms var(--ease-out) 640ms both; }
  .hero-actions { animation:soft-enter 750ms var(--ease-out) 760ms both; }
  .hero-bottom { animation:soft-enter 750ms var(--ease-out) 880ms both; }
  @supports (animation-timeline:view()) {
    .origin { view-timeline-name:--origin-reel; view-timeline-axis:block; }
    .origin-art > span { animation:origin-drift linear both; animation-timeline:--origin-reel; animation-range:entry 0% exit 100%; }
  }
}
@keyframes word-enter { from { transform:translate3d(0,125%,0) rotateX(65deg) skewX(-10deg); opacity:0; }
  to { transform:translate3d(0,0,0) rotateX(0) skewX(0); opacity:1; } }
@keyframes soft-enter { from { transform:translateY(30px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes creative-band { to { transform:translateX(-50%); } }
@keyframes content-enter { from { transform:translateY(16px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes origin-drift { from { transform:translate(-15px,65px) rotate(-10deg); } to { transform:translate(-15px,-65px) rotate(10deg); } }
@keyframes dialog-enter { from { transform:translateY(40px) scale(.92); opacity:0; } to { transform:none; opacity:1; } }
@keyframes backdrop-enter { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .process-grid li.motion-pending { opacity:1; transform:none; }
  .button:hover,.film-trigger:hover,.service:hover,.service:is(:hover,:focus-within,[open]) .icon-stage,
  .button:is(:hover,:focus-visible) .button-arrow,.nav-cta:hover svg,.text-link:is(:hover,:focus-visible) > span,.close-dialog:hover { transform:none; }
  .button:is(:hover,:focus-visible) .button-label > span:first-child { transform:none; }
  .button-label > .label-copy { display:none; }
  .marquee-window { margin:0; mask-image:none; }
  .marquee-track { width:auto; }
  .marquee-group { width:100%; flex-wrap:wrap; justify-content:center; padding:0 20px; gap:15px; }
  .marquee-group + .marquee-group { display:none; }
  .disciplines .marquee-group > span { font-size:36px; }
  .disciplines .marquee-group > i { font-size:22px; }
}