/* Cross-cutting responsive corrections.
 *
 * The mirror (css/style.css, css/page/top.css) has one breakpoint at 768px and jumps
 * straight from the phone layout to the full desktop one. Everything here fills the range
 * in between — tablets and small laptops, roughly 768px to 1200px — plus the handful of
 * global rules the custom sections rely on.
 *
 * Loaded last, so it can correct any of them. Nothing here is an effect; if a rule changes
 * how something moves it belongs in that section's own file.
 */

/* The page gutter, as one value the sections can read. Named so the parked GAIA unit in
   new-era-scroll.css can solve its width against the same number the container uses. */
:root {
  --l-gutter: clamp(20px, 4vw, 48px);
}

.l-inner,
.l-inner__s {
  padding-left: var(--l-gutter);
  padding-right: var(--l-gutter);
}

#about-gaia,
#specifications,
#image-gallery,
#promotion-video,
#contact-us {
  scroll-margin-top: 90px;
}

.header-toggle {
  display: none;
}

.l-header {
  z-index: 20;
}

body.is-header-menu-open {
  overflow: hidden;
}

/* ---- Global corrections from 768px up ----------------------------------------------- */

@media only screen and (min-width: 768px) {
  /* style.css drops the body to 1.2rem below 768px and never restores it. */
  body {
    font-size: 1.4rem;
  }

  /* style.css hides both of these at max-width 767.99px with no matching restore, so they
     stay hidden at every width above it. */
  .menu {
    display: -ms-flexbox;
    display: flex;
  }

  .pc-only {
    display: revert;
  }

  /* Restores the desktop rhythm that top.css's max-width 767.99px block overrides. */
  .contact__end {
    padding-top: 100px;
  }

  .contact__end p {
    margin-top: 80px;
  }

  .l-header .l-inner {
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
  }

  .header-logo {
    flex: 0 0 auto;
  }

  .header-logo img {
    width: 280px;
    height: 25px;
  }

  .header-menu {
    margin-left: auto;
    min-width: 0;
  }

  .menu {
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    padding-left: 20px;
  }

  .menu > .menu-item {
    flex: 0 0 auto;
  }

  .menu-item--contact {
    margin-left: 14px;
  }

  .menu > .menu-item .header-link {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
  }

  .menu > .menu-item .header-button {
    min-height: 42px;
    margin: 0;
    padding: 10px 30px;
    border: 0;
    font-size: 1.8rem;
    line-height: 1.244;
    white-space: nowrap;
  }

  .header-button--contact {
    background: linear-gradient(95.97deg, #7b2987 14.878%, #453cac 97.945%);
    color: #fff;
  }

  .header-button--brochure {
    background: #fff;
    color: #000;
  }
}

/* ---- Tablets and small laptops ------------------------------------------------------ */

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  /* 120px of section padding is a desktop measure; it strands the copy on a short screen. */
  .l-section {
    padding-top: clamp(72px, 9vw, 100px);
    padding-bottom: clamp(72px, 9vw, 100px);
  }

  /* top.css fixes .point at 100vh capped to 747px. At this width the copy is taller than
     that and overflows, so the section grows to fit instead. */
  .point {
    height: auto;
    max-height: none;
    min-height: 92vh;
  }

  .point__2 p {
    max-width: min(500px, 52vw);
  }

  .point__2:after {
    right: var(--l-gutter);
  }

  /* True Colour (RGB) is a stacked section taller than a screen on its own, so the floor
     above only adds empty space under it. Two classes, because the `@supports` block at the
     foot of this file restates `.point`'s min-height and would otherwise win on order. */
  .point.point__4 {
    min-height: 0;
  }

  /* The 61/39 split and its 106px gap are desktop measures; two even columns fit here. */
  .features ul {
    padding: 0;
    gap: 28px 48px;
  }

  .features ul .pc-only {
    display: none;
  }

  .features ul li:nth-child(odd),
  .features ul li:nth-child(2n) {
    width: calc(50% - 24px);
  }

  .features h2 {
    margin-bottom: 48px;
  }

  .features p {
    max-width: 760px;
    margin-top: 56px;
    line-height: 1.55;
  }

  /* The copy grows less than the card, so the title stays legible for more of the move. */
  .opscroll {
    --op-pad-top: 44px;
    --op-pad-bottom: 18px;
    --op-gap: 22px;
    --op-reserve: 240px;
    --op-copy-k: calc(1 + (var(--op-k) - 1) * 0.7);
    height: 145vh;
  }

  .opscroll-copy {
    padding-left: var(--l-gutter);
    padding-right: var(--l-gutter);
  }

  .header-logo img {
    width: clamp(172px, 19vw, 230px);
    height: auto;
  }

  .menu {
    gap: clamp(12px, 1.5vw, 20px);
    padding-left: 16px;
  }

  .menu-item--contact {
    margin-left: clamp(0px, 0.8vw, 8px);
  }

  .menu > .menu-item .header-link {
    font-size: clamp(1rem, 1.15vw, 1.2rem);
  }

  .menu > .menu-item .header-button {
    min-height: 36px;
    padding: 8px clamp(12px, 1.4vw, 18px);
    font-size: clamp(1.1rem, 1.25vw, 1.35rem);
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .opscroll {
    --op-pad-top: 48px;
    --op-pad-bottom: 20px;
    --op-gap: 28px;
    --op-reserve: 260px;
    height: 160vh;
  }

  .header-logo img {
    width: 250px;
    height: auto;
  }

  .menu {
    gap: 24px;
  }

  .menu > .menu-item .header-button {
    padding-left: 24px;
    padding-right: 24px;
    font-size: 1.6rem;
  }
}

@media only screen and (max-width: 1199px) {
  #about-gaia,
  #specifications,
  #image-gallery,
  #promotion-video,
  #contact-us {
    scroll-margin-top: 49px;
  }

  .l-main {
    padding-top: 39px;
  }

  .l-header .l-inner {
    justify-content: flex-start;
    height: 39px;
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
  }

  .header-logo {
    margin: 0;
  }

  .header-logo img {
    width: 170.518px;
    height: 15px;
  }

  .header-toggle {
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 12;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
  }

  .header-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 999px;
    transition: transform 240ms ease, opacity 180ms ease;
  }

  .l-header.is-menu-open .header-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .l-header.is-menu-open .header-toggle span:nth-child(2) {
    opacity: 0;
  }

  .l-header.is-menu-open .header-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .header-menu {
    position: fixed;
    top: 39px;
    left: 0;
    z-index: 11;
    display: block;
    width: 100%;
    height: calc(100vh - 39px);
    height: calc(100svh - 39px);
    padding: 38px 28px;
    background: rgba(0, 0, 0, 0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -12px, 0);
    transition: opacity 240ms ease, visibility 240ms ease, transform 240ms ease;
  }

  .l-header.is-menu-open .header-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  .menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    max-width: 420px;
    margin: 0 auto;
    padding-left: 0;
  }

  .menu > .menu-item {
    width: 100%;
  }

  .menu-item--link {
    display: block;
  }

  .menu > .menu-item .header-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
  }

  .menu-item--contact {
    margin-top: 24px;
    margin-left: 0;
  }

  .menu-item--download {
    margin-top: 14px;
  }

  .menu > .menu-item .header-button {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 11px 18px;
    border: 0;
    font-size: 1.5rem;
    line-height: 1.25;
    white-space: normal;
  }

  .header-button--contact {
    background: linear-gradient(95.97deg, #7b2987 14.878%, #453cac 97.945%);
    color: #fff;
  }

  .header-button--brochure {
    background: #fff;
    color: #000;
  }

  .mainvisual {
    top: 39px;
  }

  .mainvisual-button {
    display: block;
    padding: 24px 0;
    background: #000;
  }

  .mainvisual-button .l-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  .mainvisual-button .button {
    width: auto;
    min-width: clamp(156px, 32vw, 225px);
    min-height: 44px;
    margin: 0;
    padding: 11px clamp(18px, 3vw, 30px);
    border: 0;
    font-size: clamp(1.5rem, 2vw, 1.8rem);
    line-height: 1.25;
    white-space: nowrap;
  }

  .mainvisual-button .button:nth-child(n+2) {
    margin-top: 0;
  }

  .mainvisual-button__contact {
    background: linear-gradient(95.97deg, #7b2987 14.878%, #453cac 97.945%);
    color: #fff;
  }

  .mainvisual-button__brochure {
    background: #fff;
    color: #000;
  }

  .era-unit {
    --unit-top: calc((100vh - 39px - var(--unit-h)) / 2);
  }

  .era-unit-inner {
    top: 39px;
  }
}

/* ---- Phones -------------------------------------------------------------------------
 *
 * The mirror gives every `.l-section` 60px of padding top and bottom below 768px, so any two
 * sections sit 120px apart — and several of the `.point` sections add another 50px of margin
 * on top of that. On a 390px screen 120px of empty space between blocks is about a third of
 * the fold, and the page read as a series of islands rather than as one document.
 *
 * The ramp below lands on 30px at 390 and rises to 54px at 767. The phone design was still
 * reading too open at the previous 40px floor, so this keeps the sections connected while
 * leaving enough air for the large type and image blocks.
 *
 * It comes after the tablet block on purpose: at exactly 768 Chrome matches both `min-width:
 * 768px` and the mirror's `max-width: 767.99px`, and of the two answers the later one wins.
 * The difference there is 54px against 72px, which is acceptable because the tablet rule
 * deliberately opens the rhythm back up once the two-column layouts return.
 */
@media only screen and (max-width: 767.99px) {
  .l-section {
    padding-top: clamp(30px, 7.6vw, 54px);
    padding-bottom: clamp(30px, 7.6vw, 54px);
  }

  /* top.css gives these 50px of margin on top of the section padding, at every width. On a
     phone that is a third gap between two that are already generous. */
  .point__2,
  .point__3,
  .point__4 {
    margin-bottom: 0;
  }

  /* 100px over the CTA and 80px under its lead are desktop measures restored above; below the
     breakpoint the section's own padding is enough. */
  .contact__end {
    padding-top: clamp(30px, 7.6vw, 54px);
  }

  /* Section-specific phone rhythm. The global section trim above fixes the big gaps
     between blocks; these pull in the larger internal gaps that still made the page read
     as a stack of separate posters on small screens. */
  .new-era-lines {
    margin-top: 18px;
  }

  .new-era-lockup {
    margin-top: 26px;
  }

  .contact-title {
    font-size: clamp(2.88rem, 9.2vw, 4.64rem);
  }

  .era-overlap .contact > .l-section {
    padding-top: clamp(60px, 15.2vw, 108px);
    padding-bottom: clamp(60px, 15.2vw, 108px);
  }

  .contact-cta {
    margin-top: clamp(20px, 6vw, 32px);
  }

  .contact__end p {
    margin-top: 28px;
  }

  .point h3 {
    margin-top: 8px;
  }

  .point__2 p {
    margin-top: 8px;
  }

  .point-content {
    gap: 18px;
  }

  .point-content--pic img {
    width: min(66%, 260px);
  }

  .mainvisual-button {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .mainvisual-button .button {
    min-width: min(164px, calc(50% - 7px));
    padding-left: 14px;
    padding-right: 14px;
    font-size: clamp(1.3rem, 3.7vw, 1.5rem);
  }

  .opscroll {
    --p: 1;
    --op-k: 1;
    --op-copy-k: 1;
    --op-pt: 1;
    --op-title-p: 1;
    --op-lead-p: 1;
    --op-gap: 18px;
    --op-card-w-end: min(560px, calc(100vw - var(--l-gutter) * 2));
    height: auto;
  }

  .opscroll-sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding-top: clamp(30px, 7.6vw, 54px);
    padding-bottom: clamp(30px, 7.6vw, 54px);
  }

  .opscroll-card {
    border-radius: 18px;
    transform: none;
  }

  .opscroll-copy {
    opacity: 1;
    transform: none;
    padding-left: var(--l-gutter);
    padding-right: var(--l-gutter);
  }

  .launch-line > span,
  .launch-reveal--delay .launch-line > span {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .opscroll-lead {
    margin-top: 8px;
    line-height: 1.55;
  }

  .features h2,
  .specific h2,
  .event h2,
  .gallery-video .gallery-title,
  .gallery-video .promo-title {
    margin-bottom: 28px;
  }

  .features ul {
    gap: 18px;
  }

  .features p {
    margin-top: 34px;
  }

  .specific dl {
    padding-bottom: 12px;
  }

  .specific dl + dl {
    margin-top: 18px;
  }

  .connectivity-lead {
    margin-top: 16px;
  }

  .connectivity-flow {
    margin-top: 24px;
    margin-bottom: 16px;
  }

  .truecolour {
    --tc-gap: 16px;
    --tc-col-gap: 22px;
    --tc-cap-gap: 10px;
    --tc-reveal: 1 !important;
  }

  .point__4 .truecolour-copy.inview,
  .point__4 .truecolour-copy.inview.is-view {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .truecolour-compare {
    flex-direction: column;
  }

  .truecolour-shot__mask {
    -webkit-clip-path: none;
    clip-path: none;
  }

  .truecolour-shot__mask img {
    transform: none;
    will-change: auto;
  }

  .truecolour-lead {
    line-height: 1.6;
  }

  .gallery-video .l-inner {
    gap: 40px;
  }

  .gallery-video {
    --gv-title-gap: 24px;
  }

  .event-content {
    gap: 22px;
  }

  .event dl {
    padding: 18px 0;
  }

  .event h4 {
    margin-top: 24px;
  }
}

/* ---- The header, which runs out of room before anything else ------------------------ */

/* Same reason as .opscroll's --op-vh: 100vh changes as mobile browser chrome hides. */
@supports (height: 100svh) {
  @media only screen and (min-width: 768px) and (max-width: 1199px) {
    .point {
      min-height: 92svh;
    }
  }
}