html.xiro-entry-active {
      --viewport-height: 100vh;
    }

    #xiro-intro-root .intro-container {
      --bg: #020b16;
      --white: #ffffff;

      /* Fluid dimensions: small phones through large desktop screens. */
      --scene-padding: 12px;
      --scene-gap: 10px;
      --stage-height: 38px;
      --loader-width: 76px;
      --loader-height: 8px;
      --x-size: 18px;
      --x-thickness: 4px;
      --x-y-offset: -1.2px;
      --word-size: 22px;
      --label-size: 8px;
      --label-spacing: .16em;
      --mark-gap: 6px;
      --counter-height: 136px;
      --counter-column: 72px;
      --counter-size: 122px;
      --logo-size: 132px;
    }

    @supports (width: clamp(1px, 2vw, 3px)) {
      #xiro-intro-root .intro-container {
        --scene-padding: clamp(10px, 3vw, 34px);
        --scene-gap: clamp(7px, 1.8vw, 18px);
        --stage-height: clamp(36px, 5vw, 46px);
        --loader-width: clamp(72px, 13vw, 112px);
        --loader-height: clamp(7px, 1.05vw, 10px);
        /* Match the geometric X to the visible cap-height of IRO, not the CSS font box. */
        --word-size: clamp(21px, 3.6vw, 34px);
        --x-size: calc(var(--word-size) * .84);
        --x-thickness: calc(var(--word-size) * .18);
        --x-y-offset: calc(var(--word-size) * -.055);
        --label-size: clamp(7px, 1.15vw, 11.5px);
        --label-spacing: clamp(.10em, .45vw, .32em);
        --mark-gap: clamp(5px, .7vw, 8px);
        /* Larger progress counter on every screen size. */
        --counter-height: clamp(118px, 16vw, 176px);
        --counter-column: clamp(66px, 8.5vw, 92px);
        --counter-size: clamp(108px, 14vw, 158px);
        --logo-size: clamp(118px, 24vmin, 190px);
      }
    }

    * {
      box-sizing: border-box;
    }

    html.xiro-entry-active,
    html.xiro-entry-active body {
      margin: 0;
      width: 100%;
      height: 100%;
      min-height: 100%;
      overflow: hidden;
      background: var(--bg);
      color: var(--white);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    html.xiro-entry-active body {
      min-height: var(--viewport-height);
    }

    .intro-container button,
    .intro-container input,
    .intro-container textarea,
    .intro-container select {
      font: inherit;
    }

    .intro-container {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: var(--viewport-height);
      min-height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: var(--bg);
      z-index: 100;
      isolation: isolate;
    }

    .main-content {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding:
        max(var(--scene-padding), env(safe-area-inset-top))
        max(var(--scene-padding), env(safe-area-inset-right))
        max(var(--scene-padding), env(safe-area-inset-bottom))
        max(var(--scene-padding), env(safe-area-inset-left));
    }

    /*
      Three independent grid columns keep both labels and the loader on the
      exact same vertical center. Expanding XIRO never shifts the viewport center.
    */
    .loader-scene {
      position: relative;
      width: 100%;
      max-width: 980px;
      min-width: 0;
      min-height: var(--stage-height);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      column-gap: var(--scene-gap);
      white-space: nowrap;
    }

    .loader-label {
      min-width: 0;
      height: var(--stage-height);
      display: flex;
      align-items: center;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size: var(--label-size);
      font-weight: 300;
      line-height: 1;
      letter-spacing: var(--label-spacing);
      text-transform: uppercase;
      color: rgba(255, 255, 255, .78);
      opacity: 0;
      transform: translateY(8px);
      -webkit-transform: translateY(8px);
      will-change: transform, opacity;
    }

    #label-left {
      grid-column: 1;
      justify-self: end;
      justify-content: flex-end;
      text-align: right;
    }

    #label-right {
      grid-column: 3;
      justify-self: start;
      justify-content: flex-start;
      text-align: left;
    }

    .brand-reveal {
      grid-column: 2;
      position: relative;
      min-width: 0;
      min-height: var(--stage-height);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      transform: scale(1);
      -webkit-transform: scale(1);
      transform-origin: center center;
      -webkit-transform-origin: center center;
      will-change: transform, opacity;
    }

    .symbol-stage {
      position: relative;
      width: calc(var(--loader-width) + 8px);
      height: var(--stage-height);
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      will-change: width;
    }

    .loader-morph {
      position: relative;
      width: var(--loader-width);
      height: var(--stage-height);
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      opacity: 0;
      transform: scale(1);
      -webkit-transform: scale(1);
      transform-origin: center center;
      -webkit-transform-origin: center center;
      will-change: width, transform, opacity;
    }

    .loader-track,
    .loader-fill,
    .loader-cross {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--loader-width);
      height: var(--loader-height);
      margin-left: calc(var(--loader-width) / -2);
      margin-top: calc(var(--loader-height) / -2);
      border-radius: 999px;
      transform-origin: center center;
      -webkit-transform-origin: center center;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .loader-track {
      background: rgba(255, 255, 255, .18);
    }

    .loader-fill {
      background: #ffffff;
      transform: scaleX(0);
      -webkit-transform: scaleX(0);
      transform-origin: left center;
      -webkit-transform-origin: left center;
    }

    .loader-cross {
      width: var(--x-size);
      height: var(--x-thickness);
      top: calc(50% + var(--x-y-offset));
      margin-left: calc(var(--x-size) / -2);
      margin-top: calc(var(--x-thickness) / -2);
      background: #ffffff;
      opacity: 0;
      transform: scaleX(.3) rotate(0deg);
      -webkit-transform: scaleX(.3) rotate(0deg);
      -webkit-font-smoothing: antialiased;
    }

    /* The geometric X and the IRO letter row share one exact center line. */
    .symbol-stage,
    .loader-morph,
    .wordmark {
      align-self: center;
    }

    .wordmark {
      width: 0;
      height: var(--stage-height);
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      align-self: center;
      opacity: 0;
      overflow: hidden;
      flex: 0 0 auto;
      margin-left: var(--mark-gap);
      white-space: nowrap;
      -webkit-mask-image: -webkit-radial-gradient(white, black);
    }

    .wordmark.is-visible {
      overflow: visible;
      -webkit-mask-image: none;
      mask-image: none;
    }

    .wordmark span {
      height: var(--word-size);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      flex: 0 0 auto;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size: var(--word-size);
      font-weight: 300;
      line-height: 1;
      letter-spacing: .10em;
      color: #ffffff;
      opacity: 0;
      transform: translateY(14px);
      -webkit-transform: translateY(14px);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .wordmark span:last-child {
      letter-spacing: 0;
    }

    .final-logo-stage {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--logo-size);
      height: var(--logo-size);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(.72);
      -webkit-transform: translate(-50%, -50%) scale(.72);
      transform-origin: center center;
      -webkit-transform-origin: center center;
      will-change: transform, opacity;
    }

    .final-logo {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .final-logo * {
      transform-box: fill-box;
      transform-origin: center center;
      -webkit-transform-origin: center center;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .logo-outer {
      fill: url(#outerGradFinal);
      opacity: 0;
    }

    .logo-inner {
      fill: url(#innerGradFinal);
      opacity: 0;
    }

    .bottom-ui {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: calc(var(--counter-height) + 14px);
      display: flex;
      align-items: flex-end;
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
      padding-bottom: max(5px, env(safe-area-inset-bottom));
    }

    .counter-box {
      display: flex;
      height: var(--counter-height);
      overflow: hidden;
    }

    .col {
      width: var(--counter-column);
      display: flex;
      flex-direction: column;
      text-align: center;
      flex: 0 0 var(--counter-column);
      will-change: transform;
    }

    .num {
      width: var(--counter-column);
      height: var(--counter-height);
      line-height: var(--counter-height);
      flex: 0 0 var(--counter-height);
      color: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size: var(--counter-size);
      line-height: var(--counter-height);
      font-weight: 200;
      font-variant-numeric: tabular-nums;
    }

    .site-content {
      width: 100%;
      min-height: var(--viewport-height);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #000000;
      color: #ffffff;
      opacity: 0;
    }

    .site-content h1 {
      margin: 0;
      padding: 20px;
      max-width: 100%;
      text-align: center;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size: clamp(26px, 6vw, 64px);
      font-weight: 200;
      letter-spacing: clamp(5px, 2vw, 15px);
      overflow-wrap: anywhere;
    }

    /* Very narrow phones: retain side labels without collisions. */
    @media (max-width: 390px) {
      #xiro-intro-root .intro-container {
        --scene-padding: 8px;
        --scene-gap: 6px;
        --label-size: 7px;
        --label-spacing: .08em;
        --loader-width: 68px;
        --word-size: 19px;
        --x-size: calc(var(--word-size) * .84);
        --x-thickness: calc(var(--word-size) * .18);
        --x-y-offset: calc(var(--word-size) * -.055);
        --mark-gap: 5px;
        --counter-height: 118px;
        --counter-column: 64px;
        --counter-size: 106px;
      }
    }

    /* Ultra-narrow embedded browsers and compact phones. */
    @media (max-width: 330px) {
      #xiro-intro-root .intro-container {
        --scene-padding: 6px;
        --scene-gap: 4px;
        --label-size: 6.5px;
        --label-spacing: .05em;
        --loader-width: 62px;
        --word-size: 17px;
        --x-size: calc(var(--word-size) * .84);
        --x-thickness: calc(var(--word-size) * .18);
        --x-y-offset: calc(var(--word-size) * -.055);
        --mark-gap: 4px;
        --counter-height: 108px;
        --counter-column: 58px;
        --counter-size: 96px;
      }
    }

    /* Short landscape screens: reduce vertical footprint. */
    @media (max-height: 480px) and (orientation: landscape) {
      #xiro-intro-root .intro-container {
        --counter-height: 92px;
        --counter-column: 50px;
        --counter-size: 82px;
        --logo-size: 108px;
        --stage-height: 30px;
        --word-size: 18px;
        --x-size: calc(var(--word-size) * .84);
        --x-thickness: calc(var(--word-size) * .18);
        --x-y-offset: calc(var(--word-size) * -.055);
      }

      .bottom-ui {
        height: 102px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .intro-container *,
      .site-content * {
        scroll-behavior: auto !important;
      }
    }

/* XIRO site integration — keeps the supplied intro isolated from the site. */
html.xiro-entry-active #xiro-site {
  visibility: hidden !important;
}

html.xiro-entry-active.xiro-site-ready #xiro-site {
  visibility: visible !important;
}

#xiro-intro-root {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: auto;
}

#xiro-intro-root .intro-container {
  z-index: 99999;
}

#xiro-intro-root .final-logo-stage {
  z-index: 3;
}

/* Added final circular zoom reveal requested for the XIRO entry. */
.intro-reveal-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  aspect-ratio: 1 / 1;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  -webkit-transform-origin: center center;
  will-change: width, height, opacity;
  z-index: 5;
}




/* Final reveal: logo disappears first, then a plain white circle grows.
   The real website keeps its original site.css colors. */
.intro-reveal-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  -webkit-transform: translate(-50%, -50%) scale(0);
  transform-origin: center center;
  -webkit-transform-origin: center center;
  will-change: transform, opacity;
  z-index: 4;
}


/* Perfect circular transparent window revealing the real site underneath. */
#xiro-intro-root .intro-container.is-hole-reveal {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  will-change: -webkit-mask-image, mask-image;
}




/* =========================================================
   V30 — ACTUAL MOBILE INTRO COUNTER SIZE
   The intro counter uses --counter-size.
   Reduce that real value by approximately 10% on phones.
   ========================================================= */
@media(max-width:560px){
  #xiro-intro-root .intro-container{
    --counter-size:clamp(97px,12.6vw,142px);
  }
}

@media(max-width:390px){
  #xiro-intro-root .intro-container{
    /* 106px -> ~95px */
    --counter-size:95px;
  }
}

@media(max-width:330px){
  #xiro-intro-root .intro-container{
    /* 96px -> ~86px */
    --counter-size:86px;
  }
}

@media(max-height:480px) and (orientation:landscape){
  #xiro-intro-root .intro-container{
    /* 82px -> ~74px */
    --counter-size:74px;
  }
}


/* =========================================================
   V31 — CLEARLY SMALLER MOBILE INTRO COUNTER
   Reduce number size + digit height + column width together.
   This changes the actual rendered counter geometry, so it is visibly smaller.
   Desktop remains unchanged.
   ========================================================= */
@media(max-width:560px){
  #xiro-intro-root .intro-container{
    --counter-height:92px;
    --counter-column:52px;
    --counter-size:78px;
  }
}

@media(max-width:430px){
  #xiro-intro-root .intro-container{
    --counter-height:86px;
    --counter-column:48px;
    --counter-size:74px;
  }
}

@media(max-width:330px){
  #xiro-intro-root .intro-container{
    --counter-height:80px;
    --counter-column:44px;
    --counter-size:68px;
  }
}

@media(max-height:480px) and (orientation:landscape){
  #xiro-intro-root .intro-container{
    --counter-height:72px;
    --counter-column:40px;
    --counter-size:62px;
  }
}