/* Mobile chapters share the desktop identity, with portrait-specific framing. */
.menu-scrim { display: none; }
@media (max-width: 900px) {
  .site-header { padding-top: env(safe-area-inset-top, 0px); }
  /* Feather the content under the floating controls, without a header band. */
  .site-header::before { content: ''; position: absolute; inset: 0 0 auto; height: calc(110px + env(safe-area-inset-top, 0px)); z-index: -1; pointer-events: none; background: linear-gradient(#111113e8 0%,#11111399 48%,#11111300 100%); }
  .site-header__inner { min-height: 72px; }
  .js .menu-toggle { border: 1px solid #ffffff30; border-radius: 99px; padding: 11px 16px; gap: 12px; background: #171719b3; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .menu-toggle__icon { position: relative; width: 18px; height: 16px; }
  .menu-toggle__icon::before,.menu-toggle__icon::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .22s, top .22s; }
  .menu-toggle__icon::before { top: 4px; }
  .menu-toggle__icon::after { top: 11px; }
  [aria-expanded="true"] .menu-toggle__icon::before { top: 7px; transform: rotate(45deg); }
  [aria-expanded="true"] .menu-toggle__icon::after { top: 7px; transform: rotate(-45deg); }
  .js .site-nav,.js .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: calc(84px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; width: auto; max-height: calc(100svh - 110px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 18px; border: 1px solid #ffffff26; border-radius: 24px; background: linear-gradient(145deg,#242426f5,#131315fa); box-shadow: 0 24px 70px #0006; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); counter-reset: menu-item; }
  .js .site-nav { visibility: hidden; opacity: 0; transform: translateY(-10px) scale(.98); transform-origin: top right; transition: opacity .22s,transform .22s,visibility .22s; }
  .js .site-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .site-nav::before { content: 'Explore Guilden'; display: block; color: #a0a0a8; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; padding: 2px 0 18px; }
  .site-header .site-nav>a { display: flex; align-items: center; gap: 16px; padding: 19px 0; min-height: 64px; font-family: var(--title-font); font-size: clamp(23px,5.5vw,30px); font-weight: 500; letter-spacing: -.04em; line-height: 1.15; border-top: 1px solid #ffffff12; text-shadow: none; }
  .site-nav>a::before { counter-increment: menu-item; content: '0' counter(menu-item); color: #82828b; font-family: var(--body-font); font-size: 12px; letter-spacing: .04em; }
  .site-nav>a::after { content: none; }
  .site-nav>a[aria-current="location"],.site-nav>a[aria-current="location"]::after { color: var(--brand); }
  .menu-scrim { display: block; position: fixed; inset: 0; z-index: 9; visibility: hidden; opacity: 0; background: #08080b99; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .22s,visibility .22s; }
  .menu-open { overflow: hidden; }
  .menu-open .menu-scrim { visibility: visible; opacity: 1; }
  .menu-open .site-header .brand { text-shadow: none; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: calc(94px + env(safe-area-inset-top, 0px)); }
  .container { width: calc(100% - 40px); }
  .site-header__inner { width: calc(100% - 32px); padding-block: 12px; }
  .brand { font-size: 27px; gap: 7px; }
  .brand img { width: 36px; height: 36px; }
  .hero--immersive { padding: calc(122px + env(safe-area-inset-top, 0px)) 0 80px; }
  .hero--immersive h1 { font-size: clamp(39px,10.8vw,48px); line-height: 1.08; }
  .hero--immersive .eyebrow { font-size: 11px; letter-spacing: .09em; margin-bottom: 24px; }
  .hero__lead { font-size: 17px; line-height: 1.65; margin-top: 24px; }
  .scroll-cue { margin-top: 28px; font-size: 13px; gap: 12px; }
  .journey-enabled #vision { margin-top: calc(-1 * var(--mobile-overlap, 45svh)); min-height: 0; padding-block: 36px 76px; gap: 28px; }
  .world-intro h2 { font-size: clamp(34px,9vw,40px); line-height: 1.12; }
  .world-intro .eyebrow { font-size: 11px; margin-bottom: 18px; }
  .world-intro__details>p { font-size: 18px; line-height: 1.65; }
  .world-intro__principles { margin-top: 28px; }
  .world-intro__principles>div { padding: 20px 0; border-color: #ffffff25; }
  .world-intro__principles h3 { font-size: 23px; }
  .world-intro__principles p { font-size: 16px; }
  .world-portal { border: 1px solid #ffffff30; box-shadow: 0 16px 50px #0004; }
  .world-portal img { object-fit: contain; }
  .world-portal { border-color: rgb(255 255 255 / calc(.19 * (1 - var(--portal-background,0)))); box-shadow: 0 16px 50px rgb(0 0 0 / calc(.25 * (1 - var(--portal-background,0)))); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgb(0 0 0 / calc(1 - var(--portal-background,0))) 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgb(0 0 0 / calc(1 - var(--portal-background,0))) 100%); }
  .section { padding-block: 64px; }
  .section-heading { margin-bottom: 28px; gap: 22px; }
  .section-heading h2 { font-size: clamp(33px,9vw,40px); }
  .section-heading h2 .accent { display: block; text-wrap: balance; }
  .section-heading .eyebrow { margin-bottom: 18px; font-size: 12px; }
  .growth-stage,.revenue-stage { padding-block: 30px; }
  .growth-heading h2 { font-size: 29px; }
  .analytics__header { padding: 16px 14px; }
  .analytics__breadcrumb { font-size: 12px; }
  .analytics__body { padding: 12px; }
  .metric-card { padding: 12px 10px; }
  .metric-reading strong { font-size: 21px; }
  .analytics__footer { font-size: 11px; line-height: 1.5; }
  .revenue-heading h2 { font-size: 32px; }
  .revenue-panel h3 { font-size: 17px; line-height: 1.4; }
  .revenue-panel__header p { font-size: 12px; }
  .revenue-plot { height: clamp(160px,23svh,210px); }
  .revenue-legend { font-size: 11px; }
  .growth-chapters p { font-size: 13px; }
  .studio-section--new { padding-block: 64px; }
  .studio-heading h2 { font-size: clamp(34px,9.3vw,42px); }
  .studio-heading h2>span { display: block; text-wrap: balance; }
  .studio-description { font-size: 17px; }
  .studio-method { gap: 28px; }
  .studio-method h3 { font-size: 27px; }
  .studio-method p { font-size: 16px; }
  .gallery-stage { padding-block: 38px; }
  .game-gallery { gap: 36px; }
  .game-gallery img { border-radius: 16px; }
  .game-gallery figcaption { padding-top: 12px; font-size: 13px; }
  .business-intro { font-size: 17px; }
  .offers { gap: 18px; }
  .offer { padding: 26px; border-radius: 20px; }
  .offer h3 { margin-top: 26px; font-size: 27px; }
  .offer>p { font-size: 16px; line-height: 1.7; }
  .offer-model { font-size: 13px; padding-top: 24px; }
  .business-note { font-size: 13px; line-height: 1.65; }
  .contact-section { padding-block: 56px; }
  .contact-layout { gap: 30px; }
  .contact-layout h2 { font-size: clamp(34px,9.5vw,42px); overflow-wrap: anywhere; }
  .contact-layout>div>p:last-child { font-size: 17px; line-height: 1.7; }
  .contact-card { padding-top: 28px; }
  .contact-card h3 { font-size: 25px; }
  .contact-card__note { font-size: 14px; }
  .site-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .footer-top .brand { font-size: 27px; }
  .footer-top { gap: 20px; }
  .footer-top .text-link { font-size: 14px; }
  .footer-top>p { font-size: 14px; }
  .footer-bottom { font-size: 12px; }
}
@media (max-width: 620px) and (max-height: 700px) {
  .hero--immersive { padding-top: 110px; padding-bottom: 56px; }
  .hero--immersive h1 { font-size: 39px; }
  .hero__lead { font-size: 16px; }
  .journey-enabled #vision { padding-top: 56px; }
}
/* Keep the complete analytics chapter in a portrait screen while it progresses. */
@media (max-width: 620px) {
  .growth-stage,.revenue-stage { padding-block: 12px; }
  .growth-heading,.revenue-heading { margin-bottom: 16px; }
  .growth-heading h2,.revenue-heading h2 { font-size: 27px; line-height: 1.12; }
  .growth-heading .eyebrow,.revenue-heading .eyebrow { font-size: 11px; margin-bottom: 8px; }
  .growth-stage>.growth-heading,.revenue-stage>.revenue-heading { translate: none; }
  .analytics__header { padding: 12px; }
  .analytics__header h3 { font-size: 18px; line-height: 1.2; }
  .benchmark-heading { margin-bottom: 10px; }
  .benchmark-heading h4,.benchmark-heading>span { font-size: 12px; }
  .benchmark-grid { gap: 8px; }
  .metric-card { padding: 10px; }
  .metric-card h4 { min-height: 31px; line-height: 1.2; margin-bottom: 5px; }
  .metric-reading { min-height: 0; gap: 4px; }
  .metric-reading strong { font-size: 22px; line-height: 1.1; }
  .metric-trend { font-size: 12px; line-height: 1.4; }
  .benchmark-track { margin-top: 12px; }
  .analytics__footer { padding: 9px 12px; }
  .analytics__footer>span:last-child { display: none; }
  .revenue-panel { padding: 14px; }
  .revenue-panel h3 { margin-top: 10px; line-height: 1.3; }
  .revenue-reading { margin-top: 10px; }
  .revenue-reading strong { font-size: 30px; }
  .revenue-plot { height: clamp(130px,20svh,180px); margin-top: 16px; }
  .revenue-xaxis,.revenue-legend { margin-top: 12px; }
  .growth-chapters { margin-top: 14px; }
  .growth-chapters p { font-size: 12px; line-height: 1.35; }
}
@media (max-width: 620px) and (max-height: 740px) {
  .growth-heading .eyebrow,.revenue-heading .eyebrow { display: none; }
  .growth-stage,.revenue-stage { padding-block: 8px; }
  .growth-heading h2,.revenue-heading h2 { font-size: 24px; }
  .growth-heading,.revenue-heading { margin-bottom: 12px; }
  .revenue-panel__header p { display: none; }
  .benchmark-heading { display: none; }
  .metric-card { padding-block: 6px; }
  .benchmark-track { margin-block: 6px 2px; }
  .benchmark-rank { bottom: 5px; }
  .growth-chapters>div>span { display: none; }
  .growth-chapters>div { padding-top: 6px; }
  .growth-chapters p { margin-top: 0; }
  .revenue-plot { height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .site-nav,.menu-scrim,.menu-toggle__icon::before,.menu-toggle__icon::after { transition: none; }
}