/* ICOMAT mobile source proportions, adapted to RAIO's content and own Create button. */
.raio-mobile-artwork { display: contents; }
.raio-mobile-artwork > source { display: none; }
#raio-site-header .raio-nav-mobile-only,
.raio-menu-footer,
.raio-hero-scroll,
.raio-work-index__visit { display: none; }

@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) {
  body.agency-concept-page {
    --raio-hero-vr: calc((100vw / 393 + 1px + 100svh / 812 + 1px) / 4);
    --raio-hero-margin: calc(20 * var(--raio-hero-vr));
    --raio-gutter: var(--raio-hero-margin);
    --mobile-gap: calc(10 * var(--raio-hero-vr));
    --mobile-column: calc((100vw - 2 * var(--raio-hero-margin) - 5 * var(--mobile-gap)) / 6);
  }
  #raio-hero-module.raio-reverse-hero { height: 100svh; min-height: 520px; }
  #raio-hero-module .raio-reverse-title {
    top: calc(150 * var(--raio-hero-vr)); bottom: auto;
    left: var(--raio-hero-margin); right: auto; width: calc(100% - 2 * var(--raio-hero-margin));
    font-size: calc(35 * var(--raio-hero-vr)); line-height: .98;
    letter-spacing: calc(-.525 * var(--raio-hero-vr)); text-align: left;
  }
  #raio-hero-module .raio-reverse-copy {
    top: auto; bottom: max(calc(20 * var(--raio-hero-vr)),env(safe-area-inset-bottom));
    left: var(--raio-hero-margin); right: auto; transform: none;
    width: calc(5 * var(--mobile-column) + 4 * var(--mobile-gap));
    font-size: calc(16.2 * var(--raio-hero-vr)); line-height: 1.03; text-align: left;
  }
  #raio-hero-module .raio-reverse-copy > span { margin-top: 0; color: #f8f8f899; }
  #raio-hero-module .raio-reverse-copy > .raio-reverse-copy-primary { color: #f8f8f8; }
  #raio-hero-module .raio-reverse-socials { display: none; }
  .raio-hero-scroll {
    display: grid; place-items: center; position: absolute; right: var(--raio-hero-margin);
    bottom: max(calc(22 * var(--raio-hero-vr)),env(safe-area-inset-bottom));
    width: var(--mobile-column); height: calc(.75 * var(--mobile-column));
    border-radius: calc(8 * var(--raio-hero-vr)); color: #f8f8f8;
    background: #ffffff1a; backdrop-filter: blur(43px); text-decoration: none;
  }
  .raio-hero-scroll svg { width: calc(18 * var(--raio-hero-vr)); height: calc(18 * var(--raio-hero-vr)); }
  body.agency-concept-page #raio-site-header.raio-reverse-header {
    top: max(calc(22 * var(--raio-hero-vr)),env(safe-area-inset-top));
    left: var(--raio-hero-margin); right: var(--raio-hero-margin); gap: 12px;
  }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-logo { gap: calc(8 * var(--raio-hero-vr)); }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-wordmark { font-size: calc(22 * var(--raio-hero-vr)); }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-logo > img,
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-mark-draw { width: calc(27 * var(--raio-hero-vr)); height: calc(28 * var(--raio-hero-vr)); }
  body.agency-concept-page .raio-reverse-menu {
    display: flex; align-items: center; padding: 0; border: 0; background: none;
    gap: calc(12 * var(--raio-hero-vr)); color: inherit; cursor: pointer;
  }
  body.agency-concept-page .raio-reverse-menu-icon {
    width: var(--mobile-column); height: calc(.72 * var(--mobile-column));
    border-radius: calc(8 * var(--raio-hero-vr)); background: #ffffff1a; backdrop-filter: blur(43px);
  }
  .raio-menu-entry-face { background: #ffffff1a; }
  .raio-menu-entry-face svg, .raio-reverse-menu-icon > svg { width: 24px; height: 24px; }
  .raio-menu-entry-face svg path { transition: transform .5s cubic-bezier(.16,1,.3,1); transform-origin: center; }
  .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[aria-expanded=true] > span:first-child { visibility: hidden; }
  #raio-site-header.is-on-light .raio-reverse-menu-icon { color: #080808; background: #0808080d; }
  #raio-site-header.is-on-light .raio-menu-entry-face { background: #0808080d; }
  body.raio-menu-open #raio-site-header .raio-reverse-menu-icon { color: #f8f8f8; background: #ffffff1a; }
  body.raio-menu-open #raio-site-header .raio-menu-entry-face { background: #ffffff1a; }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock {
    display: flex; position: fixed; inset: 0; z-index: -1; width: 100%; height: 100dvh;
    min-width: 0; padding: calc(150 * var(--raio-hero-vr)) var(--raio-hero-margin) max(calc(14 * var(--raio-hero-vr)),env(safe-area-inset-bottom));
    border-radius: 0; background: linear-gradient(180deg,#081225,#5e5d69);
    backdrop-filter: none; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; visibility: hidden; pointer-events: none; overflow-y: auto; overscroll-behavior: contain;
    clip-path: inset(0 0 100% 0); transition: clip-path .7s cubic-bezier(.76,0,.24,1),visibility .7s;
  }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock.is-open { visibility: visible; pointer-events: auto; clip-path: inset(0); }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-nav {
    display: flex; flex-direction: column; align-items: stretch; flex: none; gap: var(--mobile-gap);
  }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-nav > a {
    display: flex; align-items: center; flex-shrink: 0; gap: calc(18 * var(--raio-hero-vr));
    padding: calc(10 * var(--raio-hero-vr)) calc(9 * var(--raio-hero-vr));
    border-radius: calc(8 * var(--raio-hero-vr)); background: #ffffff1a; border: 0;
    opacity: 0; translate: 0 18px; transition: opacity .35s,translate .6s cubic-bezier(.16,1,.3,1);
    font-size: calc(11 * var(--raio-hero-vr)); line-height: .91;
  }
  #raio-site-header .raio-header-nav > a::before {
    content: ''; flex: 0 0 calc(71 * var(--raio-hero-vr)); width: calc(71 * var(--raio-hero-vr));
    height: calc(71 * var(--raio-hero-vr)); border-radius: calc(7 * var(--raio-hero-vr));
    background: center / cover no-repeat url('../images/mobile/hero.jpg');
  }
  #raio-site-header .raio-header-nav > a[href='#projects']::before { background-image: url('../images/mobile/bibo.jpg'); }
  #raio-site-header .raio-header-nav > a[href='#raio-capabilities']::before { background-image: url('../images/mobile/software.jpg'); }
  #raio-site-header .raio-header-nav > a[href='#about']::before { background: #f8f8f8 url('../images/raio-logo-alt.svg') center / 35% no-repeat; filter: invert(1); }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock.is-open .raio-header-nav > a { opacity: 1; translate: 0 0; }
  .raio-header-dock.is-open .raio-header-nav > a:nth-child(2) { transition-delay: .08s; }
  .raio-header-dock.is-open .raio-header-nav > a:nth-child(3) { transition-delay: .12s; }
  .raio-header-dock.is-open .raio-header-nav > a:nth-child(4) { transition-delay: .16s; }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-cta {
    --raio-create-height: 56px; align-self: center; margin-top: calc(43 * var(--raio-hero-vr));
  }
  .raio-menu-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: auto; padding-top: calc(46 * var(--raio-hero-vr));
  }
  .raio-menu-footer > div { display: flex; gap: 16px; }
  body.agency-concept-page #raio-site-header .raio-menu-footer a { font-size: calc(10 * var(--raio-hero-vr)); }
  body.agency-concept-page.raio-menu-open #raio-site-header.raio-reverse-header,
  body.agency-concept-page.raio-menu-open #raio-site-header .raio-header-logo,
  body.raio-menu-open .raio-header-letter-draw, body.raio-menu-open .raio-header-mark-draw,
  body.raio-menu-open .raio-header-dock a, body.raio-menu-open .raio-reverse-menu { color: #f8f8f8; }
  body.agency-concept-page.raio-menu-open #raio-site-header .raio-header-logo > img { filter: brightness(0) invert(1); }

  #raio-monolith-section.raio-icomat-intro,
  #raio-monolith-section.raio-icomat-intro.has-logo-merge { height: auto; min-height: 0; padding: 90px 20px 0; text-align: left; }
  body.agency-concept-page #raio-monolith-section .raio-intro-statement { font-size: clamp(30px,9.6vw,40px); line-height: 1.08; letter-spacing: -.025em; text-align: left; }
  #raio-monolith-section .raio-intro-line { display: flex; align-items: baseline; gap: .22em; height: 1.08em; }
  #raio-monolith-section .raio-intro-half { position: static; text-align: left; }
  #raio-monolith-section .raio-intro-half--right { order: 1; }
  #raio-monolith-section .raio-intro-mark { display: none; position: static; }
  #raio-monolith-section .raio-intro-line:last-child .raio-intro-mark { display: grid; order: 2; align-self: center; width: .58em; height: .58em; margin-left: .08em; }
  #raio-monolith-section .raio-intro-line:last-child .raio-intro-mark svg { width: 100%; height: 100%; }
  #raio-monolith-section.raio-mobile-create-flow .raio-intro-mark,
  #raio-monolith-section.raio-mobile-create-flow .raio-intro-line:last-child .raio-intro-mark {
    display: none;
  }
  #raio-monolith-section.raio-mobile-create-flow .raio-intro-mark svg { display: block; width: 100%; height: 100%; }
  /* Mobile text layout must not inherit offsets or hidden states from desktop motion. */
  #raio-monolith-section .raio-intro-statement,
  #raio-monolith-section .raio-intro-line,
  #raio-monolith-section .raio-intro-half,
  #raio-monolith-section .raio-intro-mark,
  #raio-monolith-section .raio-intro-description { transform: none !important; opacity: 1 !important; visibility: visible !important; }
  #raio-monolith-section .raio-intro-metal { display: none; }
  #raio-monolith-section.raio-icomat-intro.raio-mobile-create-flow { display: block; height: auto; min-height: 0; padding: 64px 0 0; }
  #raio-monolith-section.raio-mobile-create-flow .raio-intro-copy { padding: 0 20px 20px; }
  #raio-monolith-section .raio-intro-mobile-scene { position: relative; width: 100%; height: 280px; overflow: hidden; }
  #raio-monolith-section.raio-mobile-create-flow .raio-intro-metal { display: block; width: 416px; height: 208px; }
  body.agency-concept-page #raio-monolith-section .raio-intro-invitation-copy { padding: 0 20px; text-align: center; }
  body.agency-concept-page #raio-monolith-section .raio-intro-description { max-width: 32ch; font-size: 16px; line-height: 1.4; margin: 24px 0 0; text-align: left; text-wrap: pretty; }
  #projects.raio-work-index { padding: 56px 20px calc(100 * var(--raio-hero-vr)); }
  #projects .raio-work-index__heading { font-size: calc(18 * var(--raio-hero-vr)); margin-bottom: calc(30 * var(--raio-hero-vr)); }
  #projects .raio-work-index__link { grid-template-columns: calc(71 * var(--raio-hero-vr)) minmax(0,1fr) 16px; grid-template-rows: auto auto; gap: 5px calc(14 * var(--raio-hero-vr)); min-height: calc(101 * var(--raio-hero-vr)); padding: calc(15 * var(--raio-hero-vr)) 0; }
  #projects .raio-work-index__thumb { width: calc(71 * var(--raio-hero-vr)); height: calc(71 * var(--raio-hero-vr)); border-radius: calc(7 * var(--raio-hero-vr)); }
  #projects .raio-work-index__name { font-size: calc(22 * var(--raio-hero-vr)); line-height: 1.1; }
  #projects .raio-work-index__scope { font-size: clamp(11px,calc(10 * var(--raio-hero-vr)),12px); line-height: 1.45; }
  #projects .raio-work-index__visit { display: block; grid-column: 3; grid-row: 1 / 3; width: 16px; height: 16px; color: #656b70; transition: transform .2s, color .2s; }
  #projects .raio-work-index__link:active .raio-work-index__visit { transform: translate(2px,-2px); color: #080808; }
  #projects .raio-work-index__link:active { background: #08080806; }
  #projects .raio-work-index__name { overflow-wrap: normal; }
  #raio-capabilities { padding: calc(100 * var(--raio-hero-vr)) var(--raio-hero-margin) 0; }
  #raio-capabilities .raio-capabilities__title { font-size: calc(35 * var(--raio-hero-vr)); line-height: .98; }
  #raio-capabilities .raio-capabilities__statement { font-size: calc(18 * var(--raio-hero-vr)); line-height: 1.1; }
  #raio-capabilities .raio-capabilities__list { gap: calc(50 * var(--raio-hero-vr)); }
  .raio-service__trigger { min-height: 54px; touch-action: manipulation; }
  .raio-service__trigger:active { color: #f8f8f8; }
  body.agency-concept-page #raio-capabilities .raio-service__link { min-height: 44px; display: inline-flex; align-items: center; }
  .raio-service__name { font-size: calc(18 * var(--raio-hero-vr)); }
  .raio-service__description { font-size: calc(18 * var(--raio-hero-vr)); line-height: 1.1; }
  .raio-service__services { font-size: calc(16 * var(--raio-hero-vr)); }
  .raio-process__screen { height: 100svh; min-height: 520px; padding: calc(8 * var(--raio-hero-vr)); }
  .raio-process.has-color-transition .raio-process__transition { height: 140svh; }
  .raio-process__title { max-width: 100%; font-size: calc(31.5 * var(--raio-hero-vr)); line-height: .98; letter-spacing: 0; }
  .raio-process__body { padding: calc(20 * var(--raio-hero-vr)) var(--raio-hero-margin) calc(100 * var(--raio-hero-vr)); }
  .raio-process__steps { grid-template-columns: 1fr; width: calc(6 * var(--mobile-column) + 4.5 * var(--mobile-gap) - .5 * var(--mobile-column)); gap: calc(22 * var(--raio-hero-vr)); }
  .raio-process__step { border: 0; }
  .raio-process__number { display: none; }
  .raio-process__name { font-size: calc(18 * var(--raio-hero-vr)); line-height: 1.1; margin: 0; letter-spacing: 0; }
  .raio-process__copy { max-width: none; font-size: calc(18 * var(--raio-hero-vr)); line-height: 1.1; }
  .raio-next { min-height: 75svh; padding: calc(200 * var(--raio-hero-vr)) var(--raio-hero-margin); }
  .raio-next__title { font-size: calc(31.5 * var(--raio-hero-vr)); line-height: .98; letter-spacing: 0; }
  .raio-next__copy { font-size: calc(18 * var(--raio-hero-vr)); line-height: 1.1; margin: 24px 0 40px; }
  .raio-next__cta { --raio-create-height: 56px; }
  .raio-site-footer { min-height: 80svh; padding: calc(17 * var(--raio-hero-vr)) var(--raio-hero-margin) max(calc(63 * var(--raio-hero-vr)),env(safe-area-inset-bottom)); }
  .raio-site-footer__wordmark { order: -1; flex: none; padding: 0; }
  .raio-site-footer__top { grid-template-columns: 1fr; gap: calc(30 * var(--raio-hero-vr)); margin-top: auto; padding-top: calc(100 * var(--raio-hero-vr)); }
  .raio-site-footer__title { font-size: calc(24 * var(--raio-hero-vr)); line-height: 1.05; }
  .raio-site-footer__cta { --raio-create-height: 46px; }
  .raio-site-footer__details { grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  .raio-site-footer__label { font-size: calc(10 * var(--raio-hero-vr)); margin-bottom: 0; }
  .raio-site-footer__link, .raio-site-footer__address { font-size: calc(11 * var(--raio-hero-vr)); line-height: 1.3; }
  .raio-site-footer__nav a, .raio-site-footer__group > a { display: inline-flex; align-items: center; min-height: 44px; }
  .raio-site-footer__bottom { gap: 12px; margin-top: calc(30 * var(--raio-hero-vr)); align-items: start; }
  .raio-site-footer__copyright { max-width: 24ch; }
  .raio-site-footer__copyright span { display: block; }
  .raio-site-footer__bottom > a { display: inline-flex; align-items: center; min-height: 44px; margin-top: -12px; white-space: nowrap; }
  .raio-menu-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .raio-menu-footer > div a { min-width: 30px; justify-content: center; }
  body.raio-menu-open { overflow: hidden; overscroll-behavior: none; }
  .raio-reverse-menu { touch-action: manipulation; position: relative; min-height: 44px; margin-block: -4px; }
}
@media (max-width: 768px) and (max-height: 600px), (max-width: 950px) and (max-height: 500px) {
  #raio-hero-module.raio-reverse-hero { height: 600px; }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock { padding-top: 80px; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock,
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-nav > a,
  .raio-menu-entry-face svg path { transition: none; }
}

@media (max-width: 768px) and (max-height: 740px) and (orientation: portrait) {
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-dock { padding-top: 96px; }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-nav > a { padding: 8px; gap: 16px; min-height: 70px; }
  #raio-site-header .raio-header-nav > a::before { flex-basis: 54px; width: 54px; height: 54px; }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-cta { --raio-create-height: 52px; margin-top: 26px; }
  .raio-menu-footer { padding-top: 16px; }
}
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  body.agency-concept-page .raio-reverse-menu-icon { width: 50px; height: 36px; }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-nav > a { min-height: 64px; padding: 8px; gap: 16px; }
  #raio-site-header .raio-header-nav > a::before { flex-basis: 48px; width: 48px; height: 48px; }
  body.agency-concept-page #raio-site-header.raio-reverse-header .raio-header-cta { --raio-create-height: 48px; margin-top: 20px; }
  .raio-menu-footer { padding-top: 8px; }
}