/* Mobile test: ICOMAT-style header, gap markers and word reveal. Desktop untouched. */
.raio-gap-markers { display: none; }

@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) {
  /* 1. Header hides while scrolling down, returns on scroll up */
  body.agency-concept-page #raio-site-header.raio-reverse-header {
    transition: translate .45s cubic-bezier(.16,1,.3,1), color .3s;
  }
  /* When it comes back mid-page it gets a soft band so it never sits on top of text */
  body.agency-concept-page #raio-site-header.raio-reverse-header::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: calc(-1 * max(calc(22 * var(--raio-hero-vr)), env(safe-area-inset-top)));
    bottom: calc(-14 * var(--raio-hero-vr));
    left: calc(-1 * var(--raio-hero-margin)); right: calc(-1 * var(--raio-hero-margin));
    background: #0d0d0db8; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    opacity: 0; transition: opacity .3s;
  }
  body.agency-concept-page #raio-site-header.raio-reverse-header.is-on-light::before { background: #f4f4f2c7; }
  body.agency-concept-page #raio-site-header.raio-reverse-header.is-floating::before { opacity: 1; }
  body.raio-menu-open #raio-site-header.raio-reverse-header::before { opacity: 0; }
  body.agency-concept-page #raio-site-header.raio-reverse-header.is-scrolled-away {
    translate: 0 calc(-100% - 60px);
  }

  /* 2. Square markers that give structure to the long empty stretches */
  .raio-gap-markers {
    display: grid; position: absolute; inset: var(--marker-inset, 72px) var(--raio-hero-margin);
    grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(var(--marker-rows, 3), 1fr);
    pointer-events: none; z-index: 0;
  }
  /* RAIO star instead of square markers */
  .raio-gap-markers > i {
    display: block; width: 9px; height: 9.2px; background: currentColor; opacity: .38;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 43 44'%3E%3Cpath d='M22.3958 14.3673V0C26.5591 6.99159 29.6448 10.6451 43 14.3673H29.5625V44C24.3469 25.5313 18.1531 19.0786 0 14.3673H22.3958Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 43 44'%3E%3Cpath d='M22.3958 14.3673V0C26.5591 6.99159 29.6448 10.6451 43 14.3673H29.5625V44C24.3469 25.5313 18.1531 19.0786 0 14.3673H22.3958Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .raio-gap-markers > i:nth-child(3n+2) { justify-self: center; }
  .raio-gap-markers > i:nth-child(3n) { justify-self: end; }
  .raio-gap-markers > i:nth-last-child(-n+3) { align-self: end; }
  /* Markers frame the content: one row just above, one just below */
  .raio-process__screen > .raio-gap-markers {
    z-index: 1; color: #8a8a8a;
    top: calc(50% - 64px); bottom: calc(50% - 64px);
  }
  .raio-process__screen > .raio-gap-markers > i { opacity: .55; }
  .raio-process__screen > .raio-process__title { position: relative; z-index: 1; }
  #raio-monolith-section .raio-intro-mobile-scene > .raio-gap-markers {
    color: #080808; top: calc(50% - 96px); bottom: calc(50% - 150px);
  }

  /* 3. Words fill from grey to full colour as they scroll through */
  .raio-reveal-word { transition: opacity .25s linear; opacity: .28; }
  .raio-reveal-word.is-lit { opacity: 1; }

  /* Tighter service rhythm: the label reads as the caption of its image */
  #raio-capabilities .raio-capabilities__list { gap: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .raio-reveal-word { opacity: 1 !important; transition: none; }
}

/* Layout-only pass: tighten dead space, align footer, two short copy lines */
.raio-m-copy { display: none; }
@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) {
  /* Intro: Create block closer to the text above */
  #raio-monolith-section .raio-intro-mobile-scene { height: 56svh; min-height: 320px; }

  /* Work heading + one line of copy */
  body.agency-concept-page .raio-m-copy--work {
    display: block; max-width: 30ch; margin: calc(-18 * var(--raio-hero-vr)) 0 calc(28 * var(--raio-hero-vr));
    font-size: 16px; line-height: 1.35; color: #656b70;
  }

  /* Process: shorter dark-to-light transition, subtitle under the title */
  .raio-process.has-color-transition .raio-process__transition { height: 120svh; }
  body.agency-concept-page .raio-m-copy--process {
    display: block; position: relative; z-index: 1; max-width: 28ch; margin: 14px auto 0;
    font-size: 16px; line-height: 1.35; text-align: center; color: #8b9299;
  }
  .raio-process__body { padding-top: 0; }

  /* Final CTA: no dead space below the button */
  .raio-next { min-height: 0; padding-top: 96px; padding-bottom: 120px; }

  /* Footer: email, socials and city in one aligned column */
  body.agency-concept-page .raio-site-footer__details { display: grid; grid-template-columns: 1fr; row-gap: 0; }
  body.agency-concept-page .raio-site-footer__group { display: grid; gap: 0; }
  body.agency-concept-page .raio-site-footer__nav { display: flex; flex-direction: row; gap: 28px; margin: 0; }
  body.agency-concept-page .raio-site-footer__address { margin-top: 8px; }
}
@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) {
  .raio-process__screen { flex-direction: column; height: 66svh; min-height: 420px; }
  .raio-process.has-color-transition .raio-process__transition { height: 100svh; }
  .raio-process__body { padding-bottom: 56px; }
  .raio-next { padding-top: 72px; padding-bottom: 88px; }
}
@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) {
  body.agency-concept-page .raio-m-copy--work { max-width: 34ch; font-size: 14px; line-height: 1.4; color: #8a8f94; text-wrap: pretty; }
}

/* Full-width brand reel between Work and Capabilities (mobile only) */
.raio-m-reel { display: block; position: relative; margin: 0; background: #090a0a; overflow: hidden; }
.raio-m-reel video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) {
  .raio-m-reel { display: block; position: relative; margin: 0; background: #080808; overflow: hidden; }
  .raio-m-reel video { display: block; width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
}

/* Desktop: reel sits inside the page gutters, like a framed piece, on the work section's paper */
@media (min-width: 951px), (min-width: 769px) and (min-height: 501px) {
  .raio-m-reel { background: var(--m-reel-ground, #f1f2f0); padding: 0 40px 120px; }
  .raio-m-reel video { max-width: 1280px; margin-inline: auto; border-radius: 12px; }
}

/* Mobile menu, RAIO version: small minimal labels, palette gradient, circular reveal, clean X */
@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) {
  /* Sheet: grows as a circle out of the menu button, painted with the hero palette */
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock {
    background:
      radial-gradient(110% 60% at 10% 110%, #fdb67c 0%, #fdb67c00 62%),
      radial-gradient(90% 50% at 95% 100%, #9fe3cf 0%, #9fe3cf00 60%),
      linear-gradient(180deg, #090a0a 0%, #0e1a22 28%, #2b6178 58%, #7ab9d8 80%, #ace3f9 100%);
    clip-path: inset(0 0 100% 0 round 0 0 50% 50% / 0 0 18vh 18vh);
    transition: clip-path .8s cubic-bezier(.65,0,.35,1), visibility 0s linear .8s;
  }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock.is-open {
    clip-path: inset(0 0 0 0 round 0 0 0 0 / 0 0 0 0);
    transition: clip-path .8s cubic-bezier(.65,0,.35,1), visibility 0s;
  }
  /* Closing: content leaves first, then the curtain lifts */
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock:not(.is-open) .raio-header-nav > a,
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock:not(.is-open) .raio-header-cta,
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock:not(.is-open) .raio-menu-footer {
    transition-duration: .25s; transition-delay: 0s;
  }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock:not(.is-open) {
    transition-delay: .12s, .92s;
  }

  /* Rows: small mono labels, thin rules, no grey cards */
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-nav { gap: 0; }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-nav > a {
    padding: 12px 0; border: 0; border-bottom: 1px solid #ffffff21; border-radius: 0; background: none;
    opacity: 0; translate: 0 22px; filter: blur(6px);
    transition: opacity .5s, translate .8s cubic-bezier(.16,1,.3,1), filter .6s;
  }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-nav > a:first-child { border-top: 1px solid #ffffff21; }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock.is-open .raio-header-nav > a { filter: none; }
  #raio-site-header .raio-header-nav > a::before {
    scale: .6; transition: scale .9s cubic-bezier(.16,1,.3,1);
  }
  .raio-header-dock.is-open .raio-header-nav > a::before { scale: 1; }
  #raio-site-header .raio-header-nav > a::after {
    content: ""; margin-left: auto; width: 14px; height: 14px; background: currentColor; opacity: .6;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M6 18 18 6M6 6h12v12'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M6 18 18 6M6 6h12v12'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .raio-header-dock.is-open .raio-header-nav > a:nth-child(1) { transition-delay: .32s; }
  .raio-header-dock.is-open .raio-header-nav > a:nth-child(2) { transition-delay: .34s; }
  .raio-header-dock.is-open .raio-header-nav > a:nth-child(3) { transition-delay: .40s; }
  .raio-header-dock.is-open .raio-header-nav > a:nth-child(4) { transition-delay: .46s; }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-cta,
  body.agency-concept-page #raio-site-header .raio-menu-footer {
    opacity: 0; translate: 0 16px; transition: opacity .5s, translate .8s cubic-bezier(.16,1,.3,1);
  }
  .raio-header-dock.is-open .raio-header-cta,
  .raio-header-dock.is-open .raio-menu-footer { opacity: 1 !important; translate: 0 0 !important; transition-delay: .54s !important; }
  body.agency-concept-page #raio-site-header .raio-menu-footer a { color: #090a0a; }

  /* Menu button: lines cross around their own centre, so the X sits exactly in the middle */
  .raio-menu-entry-face svg path, .raio-reverse-menu-icon > svg path {
    transform-box: fill-box; transform-origin: center;
    transition: transform .6s cubic-bezier(.76,0,.24,1);
  }
  .raio-reverse-menu[aria-expanded=true] svg path:first-child { transform: translateY(4px) rotate(45deg); }
  .raio-reverse-menu[aria-expanded=true] svg path:last-child { transform: translateY(-4px) rotate(-45deg); }
  .raio-reverse-menu-icon svg { transition: rotate .6s cubic-bezier(.76,0,.24,1); }
  .raio-reverse-menu[aria-expanded=true] .raio-reverse-menu-icon svg { rotate: 90deg; }
}
@media (prefers-reduced-motion: reduce) {
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock { transition: none; }
  .raio-reverse-menu[aria-expanded=true] .raio-reverse-menu-icon svg { rotate: none; }
}

/* Menu link press: no iOS blue flash; the tapped row nudges, the others dim */
@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) {
  #raio-site-header .raio-header-dock a { -webkit-tap-highlight-color: transparent; }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock.is-leaving .raio-header-nav > a:not(.is-pressed),
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock.is-leaving .raio-header-cta,
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock.is-leaving .raio-menu-footer {
    opacity: 0 !important; transition: opacity .2s !important;
  }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-nav > a.is-pressed { translate: 8px 0 !important; transition: translate .3s cubic-bezier(.16,1,.3,1), opacity .25s .15s !important; }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-nav > a:active { translate: 4px 0; }
}

/* Header star follows the wordmark: same timing on surface changes, white whenever the menu is open */
#raio-site-header .raio-header-morph,
#raio-site-header .raio-header-logo > img { transition: filter .3s; }
body.raio-menu-open #raio-site-header .raio-header-morph,
body.raio-menu-open #raio-site-header.is-on-light .raio-header-morph { filter: none !important; }