/* Figma additions: footer legal navigation, consent banner, contact success and legal pages. */
/* Do not lock the root with overflow:clip while CONTACT_POPUP is open.
   Sticky/transform-driven horizontal sections depend on viewport scrolling and
   can disappear when the root becomes a clipping container. */
html.contact-panel-open,
html.contact-panel-open.has-smooth-scroll.lenis.lenis-stopped {
  overflow: visible !important;
}

/* Figma: the contact popup uses pure white, not the global ivory panel color. */
.contact-panel { background: #FFFFFF; }
.footer-legal { display: flex; height: 102px; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0; }
.footer-legal-nav { display: grid; grid-template-columns: 113px 99px 55px; column-gap: 20px; align-items: start; }
.footer-legal-nav a,
.footer-legal-nav button {
  padding: 0; border: 0; background: transparent; color: rgba(250,248,242,.6);
  font: 500 15px/20px 'Satoshi', sans-serif; white-space: nowrap; cursor: pointer; transition: color .25s ease;
}
.footer-legal-nav a:hover, .footer-legal-nav a:focus-visible,
.footer-legal-nav button:hover, .footer-legal-nav button:focus-visible { color: #faf8f2; outline: none; }

.cookie-banner {
  position: fixed; z-index: 2147483200; left: 50%; bottom: 20px;
  transform: translateX(-50%);
  width: min(1399px, calc(100vw - 30px)); min-height: 70px; padding: 20px;
  display: grid; grid-template-columns: 24px auto minmax(300px,1fr) auto; align-items: center; gap: 20px;
  border: 1px solid rgba(250,248,242,.5); border-radius: 100px;
  background: #14141d; color: #faf8f2; box-shadow: 0 18px 50px rgba(0,0,0,.2);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__icon { width: 24px; height: 24px; }
.cookie-banner__title { margin: 0; font: 500 20px/1 'PP Eiko', Georgia, serif; white-space: nowrap; }
.cookie-banner__copy { margin: 0; color: rgba(250,248,242,.72); font: 400 17px/1.35 'Satoshi', sans-serif; }
.cookie-banner__actions { display: flex; gap: 15px; }
.cookie-banner__button {
  min-width: 148px; height: 28px; padding: 0 18px; border: 1px solid #faf8f2; border-radius: 100px;
  background: transparent; color: #faf8f2; font: 700 11px/1 'Satoshi', sans-serif;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.cookie-banner__button--accept { background: #faf8f2; color: #14141d; }
.cookie-banner__button:hover, .cookie-banner__button:focus-visible { outline: 2px solid #faf8f2; outline-offset: 3px; }

.contact-feedback { margin: 15px 0 0; color: #9c3030; font: 500 14px/1.4 'Satoshi', sans-serif; }
.contact-page .contact-feedback { color: #ffd0cc; text-align: center; }
.contact-submit[disabled] { cursor: wait; opacity: .5 !important; }
.contact-panel-success { display: none; width: 100%; max-width: 454px; color: rgba(19,18,36,.7); }
.contact-panel.is-success .contact-panel-intro,
.contact-panel.is-success .contact-panel-form,
.contact-panel.is-success .contact-panel-email-note { display: none; }
.contact-panel.is-success .contact-panel-success { display: block; padding-top: 217px; }
.contact-panel-success__icon { display: block; width: 32px; height: 32px; }
.contact-panel-success h2 { margin: 32px 0 0; max-width: 390px; font: 500 32px/1 'PP Eiko', Georgia, serif; letter-spacing: -.02em; color: rgba(19,18,36,.7); }
.contact-panel-success__close {
  width: 100%; margin-top: 198px; padding: 0 0 12px; display: flex; justify-content: space-between;
  border: 0; border-bottom: 1px solid rgba(19,18,36,.7); background: transparent;
  color: rgba(19,18,36,.7); font: 700 13.1px/1 'Satoshi', sans-serif; letter-spacing: .105em;
  text-transform: uppercase; cursor: pointer;
}
.contact-panel-success__close:hover, .contact-panel-success__close:focus-visible { color: #ff4d6d; border-color: #ff4d6d; outline: none; }

.contact-page-success {
  display: none; min-height: 1170px; padding: 160px 24px 120px; align-items: center; justify-content: center;
  flex-direction: column; text-align: center; color: #faf8f2;
}
.contact-page-section.is-success { padding: 0; }
.contact-page-section.is-success .contact-page-inner { display: none; }
.contact-page-section.is-success .contact-page-success { display: flex; }
.contact-page-success__icon { width: 52px; height: 52px; }
.contact-page-success h2 { margin: 27px 0 0; font: 500 64px/68px 'PP Eiko', Georgia, serif; letter-spacing: -.02em; }
.contact-page-success p { margin: 92px 0 0; font: 500 16px/22px 'Satoshi', sans-serif; text-transform: uppercase; color: rgba(250,248,242,.7); }

.legal-page { background: #f7f7f7; color: #131224; }
.legal-page-main { position: relative; min-height: 100vh; padding: 268px 0 190px; overflow: clip; background: #f7f7f7; }
.legal-ribbon { position: absolute; left: 0; top: 622px; width: 791px; height: 609px; pointer-events: none; }
.legal-layout {
  position: relative; z-index: 1; width: min(1568px, calc(100% - 96px)); margin: 0 auto;
  display: grid; grid-template-columns: 566px 700px; column-gap: 200px; align-items: start;
}
.legal-heading { position: sticky; top: 150px; }
.legal-heading h1 { margin: 0; font: 500 82px/96px 'PP Eiko', Georgia, serif; letter-spacing: -.02em; }
.legal-heading p { margin: 7px 0 0; color: rgba(19,18,36,.8); font: 500 20px/27px 'Satoshi', sans-serif; }
.legal-content { width: 700px; max-width: 100%; }
.legal-section { margin: 0 0 40px; padding: 0 0 40px; border-bottom: 1px solid rgba(19,18,36,.2); }
.legal-section:last-child { margin-bottom: 0; }
.legal-section__number { display: inline; margin: 0; color: #131224; font: 500 28px/36px 'PP Eiko', Georgia, serif; }
.legal-section__number::after { content: ' _ '; }
.legal-section h2 { display: inline; margin: 0; font: 500 28px/36px 'PP Eiko', Georgia, serif; }
.legal-section p { margin: 20px 0 0; white-space: pre-line; color: rgba(19,18,36,.8); font: 500 18px/1.5 'Satoshi', sans-serif; }
.legal-section a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1600px) {
  .legal-layout {
    grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr);
    column-gap: clamp(64px, 7vw, 120px);
  }
  .legal-content { width: 100%; }
}
@media (max-width: 1180px) {
  .cookie-banner { grid-template-columns: 24px 1fr auto; border-radius: 34px; }
  .cookie-banner__copy { grid-column: 2; }
  .cookie-banner__actions { grid-column: 3; grid-row: 1 / span 2; }
  .legal-layout { grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); column-gap: 80px; }
  .legal-heading h1 { font-size: 64px; line-height: 1.08; }
}
@media (max-width: 760px) {
  .cookie-banner { bottom: 10px; padding: 20px; grid-template-columns: 24px 1fr; gap: 12px 14px; border-radius: 28px; }
  .cookie-banner__copy, .cookie-banner__actions { grid-column: 1 / -1; }
  .cookie-banner__copy { font-size: 15px; }
  .cookie-banner__actions { grid-row: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-banner__button { min-width: 0; }
  .contact-panel.is-success .contact-panel-success { padding-top: min(25vh, 190px); }
  .contact-panel-success__close { margin-top: 130px; }
  .contact-page-success { min-height: 760px; padding-left: 22px; padding-right: 22px; }
  .contact-page-success h2 { font-size: clamp(42px, 13vw, 60px); line-height: 1.05; }
  .contact-page-success p { margin-top: 62px; font-size: 13px; }
  .legal-page-main { padding: 170px 22px 120px; }
  .legal-ribbon { top: 490px; width: min(85vw, 620px); height: auto; }
  .legal-layout { width: 100%; display: block; }
  .legal-heading { position: relative; top: auto; margin-bottom: 100px; }
  .legal-heading h1 { font-size: clamp(50px, 15vw, 68px); line-height: 1.02; }
  .legal-heading p { margin-top: 14px; font-size: 17px; }
  .legal-section { margin-bottom: 34px; padding-bottom: 34px; }
  .legal-section h2 { font-size: 24px; line-height: 31px; }
  .legal-section p { font-size: 16px; line-height: 1.55; }
  .footer-legal { height: auto; gap: 24px; }
  .footer-legal-nav { display: flex; flex-direction: column; gap: 10px; }
  .legal-section__number,
  .legal-section h2 { font-size: 24px; line-height: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner, .contact-panel-success, .contact-page-success { scroll-behavior: auto; }
}

/* ============================================================
   V11 — strict shared corrections
   ============================================================ */

/* Every underlined text/line/arrow CTA uses the original Satoshi 13px model. */
.trionn-line-button {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
}

/* Restore the restrained horizontal blur: the outgoing letters move right
   inside their own clipped label, so they can never cross the fixed arrow. */
.trionn-line-button.clean-roll-cta .trionn-blur-label {
  position: relative !important;
  display: inline-grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: center !important;
  height: 1em !important;
  min-height: 1em !important;
  overflow: hidden !important;
  line-height: 1 !important;
}

.trionn-line-button.clean-roll-cta .trionn-blur-label .blur-layer {
  grid-area: 1 / 1 !important;
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

.trionn-line-button.clean-roll-cta .trionn-blur-label .blur-layer-hover {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.trionn-line-button.clean-roll-cta .trionn-blur-label .char {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    opacity var(--dur, 500ms) ease,
    filter var(--dur, 500ms) cubic-bezier(.16, 1, .3, 1),
    transform var(--dur, 500ms) cubic-bezier(.16, 1, .3, 1) !important;
  transition-delay: var(--rd, 0ms) !important;
}

.trionn-line-button.clean-roll-cta .trionn-blur-label .blur-layer-hover .char {
  opacity: 0 !important;
  filter: blur(var(--blur-in, 3px)) !important;
  transform: translate3d(-.22em, 0, 0) !important;
}

.trionn-line-button.clean-roll-cta:hover .trionn-blur-label .blur-layer-base .char,
.trionn-line-button.clean-roll-cta:focus-visible .trionn-blur-label .blur-layer-base .char,
.project-card:hover .trionn-line-button.clean-roll-cta .trionn-blur-label .blur-layer-base .char,
.project-card:focus-visible .trionn-line-button.clean-roll-cta .trionn-blur-label .blur-layer-base .char {
  opacity: 0 !important;
  filter: blur(var(--blur-out, 3px)) !important;
  transform: translate3d(.42em, 0, 0) !important;
  transition-delay: var(--out, 0ms) !important;
}

.trionn-line-button.clean-roll-cta:hover .trionn-blur-label .blur-layer-hover .char,
.trionn-line-button.clean-roll-cta:focus-visible .trionn-blur-label .blur-layer-hover .char,
.project-card:hover .trionn-line-button.clean-roll-cta .trionn-blur-label .blur-layer-hover .char,
.project-card:focus-visible .trionn-line-button.clean-roll-cta .trionn-blur-label .blur-layer-hover .char {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: var(--in, 140ms) !important;
}

.trionn-line-button.clean-roll-cta .button-arrow,
.trionn-line-button.clean-roll-cta .cta-arrow {
  flex: 0 0 auto;
  transform: none !important;
}

/* V8 froze the pseudo-element with important declarations. Drive the wipe
   through an animatable custom property so the original left-to-right sweep
   is restored without moving the line box or the arrow. */
@property --lange-line-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@keyframes langeUnderlineScaleV11 {
  0% {
    --lange-line-scale: 1;
    --lange-line-origin: right center;
  }
  44% {
    --lange-line-scale: 0;
    --lange-line-origin: right center;
  }
  45% {
    --lange-line-scale: 0;
    --lange-line-origin: left center;
  }
  100% {
    --lange-line-scale: 1;
    --lange-line-origin: left center;
  }
}

.trionn-line-button.clean-roll-cta::after {
  transform: scaleX(var(--lange-line-scale)) !important;
  transform-origin: var(--lange-line-origin, left center) !important;
}

.trionn-line-button.clean-roll-cta:hover::after,
.trionn-line-button.clean-roll-cta:focus-visible::after,
.project-card:hover .trionn-line-button.clean-roll-cta::after,
.project-card:focus-visible .trionn-line-button.clean-roll-cta::after {
  animation: langeUnderlineScaleV11 .68s cubic-bezier(.22, .72, .18, 1) both !important;
}

/* Home Hero: retain the existing scroll transform while guaranteeing that the
   whole text/media composition is measured from the viewport centre. */
body[data-page-type="home"] #hero .hero-content {
  width: 100%;
  margin-inline: auto;
}

/* The popup submit control must remain a real, reachable row at every height. */
.contact-panel-form .contact-submit {
  display: flex !important;
  min-height: 27px;
  flex: 0 0 auto;
  visibility: visible !important;
}

/* Footer: at least one full viewport, no outside width, and a shared right
   column so the CTA is aligned with BUSINESS / SOCIAL at desktop widths. */
.site-footer {
  inset-inline: 0;
  width: 100% !important;
  max-width: 100% !important;
  min-height: max(100svh, 820px, 62.6042vw) !important;
  height: max(100svh, 820px, 62.6042vw) !important;
}

@media (min-width: 901px) {
  .footer-main-row {
    grid-template-columns: minmax(0, 1fr) 377px !important;
  }

  .footer-cta {
    grid-column: 2;
    justify-self: start !important;
  }
}

@media (max-width: 900px) {
  .site-footer {
    min-height: max(100svh, 820px) !important;
    height: auto !important;
  }
}

/* The legal background mark stays attached to the viewport while the legal
   copy scrolls. Small screens retain the original non-fixed composition. */
@media (min-width: 761px) {
  .legal-ribbon {
    position: fixed;
    top: 53.1624svh;
    width: min(41.1979vw, 791px);
    height: auto;
  }
}

/* Home: reveal the real Footer over the final Services frame. The mask is
   enabled only after the matching scroll controller is ready. */
@media (prefers-reduced-motion: no-preference) {
  html.home-footer-enhanced body[data-page-type="home"] .site-footer {
    --home-footer-band-0: 0%;
    --home-footer-band-1: 0%;
    --home-footer-band-2: 0%;
    --home-footer-band-3: 0%;
    --home-footer-band-4: 0%;
    --home-footer-band-5: 0%;
    z-index: 24;
    margin-top: -100svh !important;
    -webkit-mask-image:
      linear-gradient(to top, #000 0, #000 var(--home-footer-band-0), transparent calc(var(--home-footer-band-0) + .01%)),
      linear-gradient(to top, #000 0, #000 var(--home-footer-band-1), transparent calc(var(--home-footer-band-1) + .01%)),
      linear-gradient(to top, #000 0, #000 var(--home-footer-band-2), transparent calc(var(--home-footer-band-2) + .01%)),
      linear-gradient(to top, #000 0, #000 var(--home-footer-band-3), transparent calc(var(--home-footer-band-3) + .01%)),
      linear-gradient(to top, #000 0, #000 var(--home-footer-band-4), transparent calc(var(--home-footer-band-4) + .01%)),
      linear-gradient(to top, #000 0, #000 var(--home-footer-band-5), transparent calc(var(--home-footer-band-5) + .01%));
    mask-image:
      linear-gradient(to top, #000 0, #000 var(--home-footer-band-0), transparent calc(var(--home-footer-band-0) + .01%)),
      linear-gradient(to top, #000 0, #000 var(--home-footer-band-1), transparent calc(var(--home-footer-band-1) + .01%)),
      linear-gradient(to top, #000 0, #000 var(--home-footer-band-2), transparent calc(var(--home-footer-band-2) + .01%)),
      linear-gradient(to top, #000 0, #000 var(--home-footer-band-3), transparent calc(var(--home-footer-band-3) + .01%)),
      linear-gradient(to top, #000 0, #000 var(--home-footer-band-4), transparent calc(var(--home-footer-band-4) + .01%)),
      linear-gradient(to top, #000 0, #000 var(--home-footer-band-5), transparent calc(var(--home-footer-band-5) + .01%));
    -webkit-mask-size: 100% calc(100% / 6 + 1px);
    mask-size: 100% calc(100% / 6 + 1px);
    -webkit-mask-position: 0 0%, 0 20%, 0 40%, 0 60%, 0 80%, 0 100%;
    mask-position: 0 0%, 0 20%, 0 40%, 0 60%, 0 80%, 0 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trionn-line-button.clean-roll-cta .trionn-blur-label .blur-layer-base .char {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .trionn-line-button.clean-roll-cta .trionn-blur-label .blur-layer-hover {
    display: none !important;
  }
}

/* ============================================================
   V12 — capture-driven layout and scroll corrections
   ============================================================ */

/* 01 — the Vision grid is already centred by its auto margins. The former
   translateX(-50%) shifted the complete unit half a panel off-screen. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  body[data-page-type="home"] .intro-scroll-copy {
    left: auto !important;
    right: auto !important;
    margin-inline: auto !important;
    transform: none !important;
  }

  body[data-page-type="home"] .vision-target-line,
  body[data-page-type="home"] .vision-marquee {
    top: 50% !important;
  }
}

/* 02 — the final Work invitation is a full rail item, introduced by the same
   vertical rule used between project thumbnails. */
.work-end-panel {
  position: relative;
  color: rgba(19, 18, 36, .76) !important;
}

.work-end-panel h2,
.work-end-panel .work-end-cta {
  color: inherit !important;
}

@media (min-width: 901px) {
  .work-end-panel::before {
    content: "";
    position: absolute;
    top: -22vh;
    left: calc(var(--project-gap, clamp(70px, 8.2vw, 150px)) * -.5);
    width: 1px;
    height: 130vh;
    background: rgba(19, 18, 36, .075);
    pointer-events: none;
  }
}

/* 03 — Work is the moving light sheet. The real Services viewport remains
   fixed underneath it and appears through the growing right-hand reveal. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .work-section.is-services-revealing .work-bg-wipe,
  .work-section.is-services-revealing .work-sticky {
    clip-path: inset(0 var(--work-services-clip-right, 0px) 0 0) !important;
    will-change: clip-path;
  }

  html.services-enhanced .immersive-services.is-work-handoff {
    z-index: 44 !important;
    overflow: visible !important;
    background: transparent !important;
    pointer-events: none;
  }

  html.services-enhanced .immersive-services.is-work-handoff .immersive-services__sticky {
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    background: #14141d !important;
    transform: none !important;
  }
}

/* 04–05 — every Services copy settles as one vertically centred block. Title
   and body share one left edge; the final CTA stays centred at the viewport
   bottom and remains independent from the IA text block. */
html.services-enhanced .immersive-services__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

html.services-enhanced .immersive-services__copy > p,
html.services-enhanced .immersive-services__copy--right > p {
  margin-left: 0 !important;
}

html.services-enhanced .immersive-services__cta {
  position: absolute !important;
  inset: auto auto clamp(38px, 6.4svh, 76px) 50% !important;
  margin: 0 !important;
  transform: translate3d(-50%, var(--services-cta-y, 16px), 0) !important;
}

/* 06 — the shared desktop Footer is one true viewport at every aspect ratio;
   tablet/mobile retain their content-led height. */
@media (min-width: 901px) {
  .site-footer {
    min-height: 100svh !important;
    height: 100svh !important;
  }

  .contact-footer-inner {
    padding-top: clamp(76px, 11.15svh, 134px) !important;
  }

  .footer-meta-row {
    margin-top: clamp(48px, 7.25svh, 75px) !important;
  }
}

/* ============================================================
   V14 — final capture corrections
   ============================================================ */

/* Home / Vision: centre the eyebrow + editorial paragraph as one unit. The
   positioning note sits underneath and shares the paragraph's right edge. */
@media (min-width: 1121px) {
  body[data-page-type="home"] .intro-scroll-copy {
    position: relative !important;
    display: grid !important;
    grid-template-columns: max-content minmax(0, min(55vw, 1080px)) !important;
    grid-template-rows: auto auto !important;
    column-gap: clamp(28px, 2.25vw, 44px) !important;
    row-gap: clamp(26px, 3.6vh, 44px) !important;
    width: max-content !important;
    max-width: calc(100vw - 108px) !important;
    margin-inline: auto !important;
    align-items: start !important;
  }

  body[data-page-type="home"] .intro-scroll-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: min(55vw, 1080px) !important;
    max-width: min(55vw, 1080px) !important;
    margin: 0 !important;
  }

  body[data-page-type="home"] .intro-scroll-eyebrow {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
    padding-top: .62em !important;
  }

  body[data-page-type="home"] .intro-seo-copy {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: start !important;
    width: min(17vw, 320px) !important;
    max-width: 320px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* Home / Work: a slightly narrower, quieter final invitation. Its CTA uses
   the same neutral ink value as every project CTA in the light rail. */
@media (min-width: 901px) {
  .work-end-panel {
    flex-basis: min(60vw, 900px) !important;
    padding-inline: clamp(42px, 5vw, 82px) !important;
  }
}

.work-end-panel h2 {
  max-width: 620px;
  font-family: 'PP Eiko', 'Satoshi', sans-serif !important;
  font-size: clamp(1.92rem, 2.15vw, 2.65rem) !important;
  font-weight: 500 !important;
  line-height: .96 !important;
  letter-spacing: -.052em !important;
  color: var(--panel-ink) !important;
  opacity: 1 !important;
}

.work-end-panel .work-end-cta {
  color: var(--panel-ink) !important;
  opacity: 1 !important;
}

.work-end-panel .work-end-cta:hover,
.work-end-panel .work-end-cta:focus-visible {
  color: var(--panel-ink) !important;
}

/* Reuse the project CTA itself here, including its 1 px line opacity, label
   metrics and arrow spacing. This prevents the final invitation from drifting
   to the older generic line-button treatment. */
.work-end-panel .work-end-cta.project-link,
.work-end-panel .work-end-cta.project-link:hover,
.work-end-panel .work-end-cta.project-link:focus-visible {
  color: var(--panel-ink) !important;
  opacity: 1 !important;
}

.work-end-panel .work-end-cta.project-link::after {
  opacity: .82 !important;
}

/* Home / Services: the introduction and every service title reuse the exact
   responsive Home Hero title token. */
.immersive-services__intro-title,
.immersive-services__copy h3 {
  font-size: var(--hero-title-size) !important;
  line-height: var(--hero-title-line-height) !important;
}

/* The Footer reveal has two readable phases: first the dark surface, then its
   content. Hidden content cannot intercept clicks during the first phase. */
@media (prefers-reduced-motion: no-preference) {
  html.home-footer-enhanced body[data-page-type="home"] .site-footer {
    --home-footer-content-opacity: 0;
    --home-footer-content-y: 24px;
    --home-footer-content-blur: 8px;
  }

  html.home-footer-enhanced body[data-page-type="home"] .site-footer .contact-footer-inner {
    opacity: var(--home-footer-content-opacity);
    filter: blur(var(--home-footer-content-blur));
    transform: translate3d(0, var(--home-footer-content-y), 0);
    pointer-events: none;
    will-change: opacity, filter, transform;
  }

  html.home-footer-enhanced body[data-page-type="home"] .site-footer.is-footer-content-visible .contact-footer-inner {
    pointer-events: auto;
  }
}

/* One grain treatment for every major dark surface. These layers reproduce
   the Home Hero overlay exactly and never participate in pointer handling. */
.site-footer,
.about-face-section,
.about-process-section.process-scroll-section--dark,
.about-process-section.process-scroll-section--dark > .process-scroll-sticky,
.service-hero-sticky,
.contact-hero-sticky,
.contact-page-section,
.project-spec,
.service-panel--dark .service-panel-visual {
  isolation: isolate;
}

.site-footer::after,
.about-face-section::after,
.about-process-section.process-scroll-section--dark > .process-scroll-sticky::after,
.service-hero-sticky::after,
.contact-hero-sticky::after,
.contact-page-section::after,
.project-spec::after,
.service-panel--dark .service-panel-visual::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  display: block !important;
  width: auto;
  height: auto;
  background: url('../images/home/hero-overlay.webp') center / cover no-repeat;
  opacity: .35;
  mix-blend-mode: plus-lighter;
  transform: none !important;
  pointer-events: none;
  user-select: none;
}

.site-footer::after { z-index: 2; }
.about-face-section::after { z-index: 3; }
.service-hero-sticky::after { z-index: 6; }
.contact-hero-sticky::after { z-index: 3; }

.about-process-section.process-scroll-section--dark > .process-scroll-sticky::after {
  z-index: 0;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0;
  transform: none !important;
}

@media (min-width: 901px) {
  .about-process-section.process-scroll-section--dark > .process-scroll-sticky {
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: max(3.59375vw, calc((100vw - 1782px) / 2));
  }
}

.contact-page-section::after,
.project-spec::after,
.service-panel--dark .service-panel-visual::after {
  z-index: 0;
}

.contact-page-section > .contact-page-inner,
.contact-page-section > .contact-page-success,
.project-spec > .project-spec-inner,
.service-panel--dark .service-panel-visual > .service-visual-inner {
  position: relative;
  z-index: 1;
}

/* about-process-inner is also the scroll system's sticky viewport. Keep its
   stacking level without overwriting position: sticky. */
.about-process-section.process-scroll-section--dark > .about-process-inner {
  z-index: 1;
}

.about-process-section.process-scroll-section--dark > .process-scroll-sticky > * {
  position: relative;
  z-index: 1;
}

/* V17 — every visible dark surface uses the Footer's exact solid base. The
   Footer itself is intentionally absent from this override. */
.hero-scroll-wrap,
.hero,
.about-hero-stage,
.immersive-services,
.immersive-services__sticky,
.service-hero-sticky,
.contact-hero-sticky,
.about-face-section,
.about-process-section.process-scroll-section--dark,
.about-process-section.process-scroll-section--dark > .process-scroll-sticky,
.contact-page-section,
.project-spec,
.service-panel--dark .service-panel-visual {
  background: #14141d !important;
  isolation: isolate;
}

.video-stage,
.hero-video,
.immersive-services__media-stage,
.immersive-services__video {
  background: #14141d !important;
}

html.services-enhanced .immersive-services.is-work-handoff .immersive-services__sticky {
  background: #14141d !important;
}

/* The Heroes already contain dedicated grain nodes. Normalise those existing
   nodes instead of adding a second pseudo-element over the same surface. */
.hero-grain,
.immersive-services__grain {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: url('../images/home/hero-overlay.webp') center / cover no-repeat !important;
  object-fit: cover;
  opacity: .35 !important;
  mix-blend-mode: plus-lighter !important;
  transform: none !important;
  pointer-events: none !important;
  user-select: none;
}

/* Services and Contact now use the Footer's exact single pseudo-overlay.
   Disable their former grain nodes to avoid double compositing. */
.service-hero-grain,
.contact-hero-overlay {
  display: none !important;
}

/* Remove the former colour-tint gradients so the supplied grain is the only
   overlay applied above the shared #14141d background. */
body[data-page-type="home"] #hero > .overlay,
.about-hero-stage::before,
.immersive-services__overlay,
.service-hero-overlay,
.contact-hero-sticky::before {
  background: none !important;
  opacity: 0 !important;
}

/* The About portrait extension used a separate near-black value. Keep its
   image fade, but let it resolve into the same Footer colour. */
.about-page .about-face-shade {
  background: linear-gradient(to bottom,
    transparent calc(var(--seb-image-height) - 160px),
    #14141d var(--seb-image-height)) !important;
}

@media (max-width: 900px) {
  .about-page .about-face-shade {
    background: linear-gradient(to bottom,
      #14141d var(--seb-image-top),
      transparent calc(var(--seb-image-top) + 40px),
      transparent calc(var(--seb-image-top) + var(--seb-image-height) - 55px),
      #14141d calc(var(--seb-image-top) + var(--seb-image-height))) !important;
  }
}

.about-process-section.process-scroll-section--dark {
  isolation: isolate;
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .about-process-section.process-scroll-section--dark {
    height: 180svh;
    min-height: 1320px;
  }
}

/* Contact: the visible field surfaces remain fully transparent, including the
   focused state; only their one-pixel borders define the inputs. */
.contact-page .contact-page-form .contact-field,
.contact-page .contact-page-form .contact-field:focus-within,
.contact-page .contact-page-form .contact-field input,
.contact-page .contact-page-form .contact-field textarea {
  background: transparent !important;
}

/* Footer: the main collaboration CTA retains the shared line + arrow rollover.
   Only Email, LinkedIn and Instagram receive the menu-like letter blur. */
.site-footer .footer-blur-link {
  display: inline-flex !important;
  align-items: center;
  width: max-content;
  max-width: 100%;
}

.site-footer .footer-blur-link .trionn-blur-label {
  position: relative !important;
  display: inline-grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: center !important;
  min-height: 1em !important;
  overflow: visible !important;
  line-height: 1 !important;
}

/* Both footer columns use the same two 24 px rows. The first Business row is
   structurally taller because it combines a key and a blurred email label;
   explicit rows prevent that difference from pushing the telephone below
   Instagram. */
.site-footer .footer-business-links,
.site-footer .footer-social-links {
  display: grid !important;
  grid-template-rows: 24px 24px;
  row-gap: 12px !important;
  align-items: center !important;
}

.site-footer .footer-business-links > a,
.site-footer .footer-social-links > a {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 24px;
  min-height: 24px;
  line-height: 24px !important;
}

.site-footer .footer-blur-link .trionn-blur-label,
.site-footer .footer-blur-link .trionn-blur-label .blur-layer,
.site-footer .footer-blur-link .trionn-blur-label .char {
  line-height: 24px !important;
}

.site-footer .footer-blur-link .trionn-blur-label .blur-layer {
  grid-area: 1 / 1 !important;
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

.site-footer .footer-blur-link .trionn-blur-label .blur-layer-hover {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.site-footer .footer-blur-link .trionn-blur-label .char {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    opacity var(--dur, 540ms) ease,
    filter var(--dur, 540ms) var(--ease-out),
    transform var(--dur, 540ms) var(--ease-out) !important;
  transition-delay: var(--rd, 0ms) !important;
}

.site-footer .footer-blur-link .trionn-blur-label .blur-layer-hover .char {
  opacity: 0 !important;
  filter: blur(var(--blur-in, 6px)) !important;
  transform: translate3d(0, var(--in-y, .08em), 0) !important;
}

.site-footer .footer-blur-link:hover .trionn-blur-label .blur-layer-base .char,
.site-footer .footer-blur-link:focus-visible .trionn-blur-label .blur-layer-base .char {
  opacity: 0 !important;
  filter: blur(var(--blur-out, 5px)) !important;
  transform: translate3d(0, var(--out-y, .09em), 0) !important;
  transition-delay: var(--out, 0ms) !important;
}

.site-footer .footer-blur-link:hover .trionn-blur-label .blur-layer-hover .char,
.site-footer .footer-blur-link:focus-visible .trionn-blur-label .blur-layer-hover .char {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: var(--in, 230ms) !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-blur-link .trionn-blur-label .blur-layer-base .char {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .site-footer .footer-blur-link .trionn-blur-label .blur-layer-hover {
    display: none !important;
  }
}