/* =============================================================================
   TRI OCEAN — responsive & adaptive layer (mobile / tablet / fold / cover only)
   Loaded after styles.css + clients-grid.css so these rules win when active.
   Viewports > 1024px: no rules here apply → desktop layout unchanged.
   -----------------------------------------------------------------------------
   Breakpoint map (reference):
     ≤1024px  tablet / iPad portrait / small laptop
     ≤768px   phones + drawer nav, stacked layouts
     ≤430px   large phones (iPhone Pro Max class)
     ≤390px   common iPhone / Android width
     ≤360px   small phones
     ≤320px   flip cover / ultra-narrow
   Fold / flip: horizontal-viewport-segments, vertical-viewport-segments, spanning (fallback)
   Aspect:4:3 inner displays, 20:9 phones; cover screens (≤280px / very short height)
   Orientation: portrait = single-column bias; landscape = tighter vertical rhythm + multi-column
   Portrait depth: tall 20:9, flip/cover, fold closed → stack, vmin spacing, cap flex stretch
   Aspect-ratio bands: § VIEWPORT ASPECT-RATIO LAYOUT (below fold rules)
   Fold × orientation: § FOLD × ORIENTATION (four modes + hinge-safe grids)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Mobile / Desktop text switching utilities
   --------------------------------------------------------------------------- */
.mobile-only {
  display: none;
}

.desktop-only {
  display: inline;
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 520px) and (max-width: 932px) {
  .mobile-only {
    display: inline;
  }

  .desktop-only {
    display: none;
  }

  /* Splash loader: replace circular ring with horizontal bar on mobile */
  .ring-loader__wrap {
    display: none;
  }

  .ring-loader__logo-fallback {
    display: block;
    width: 100px;
    height: 100px;
    margin-bottom: 28px;
  }

  .bar-loader__track {
    display: block;
  }
}

:root {
  /* Used only inside max-width blocks in this file (no effect on desktop) */
  --m-pad-x: clamp(0.75rem, 3.8vw, 1.35rem);
  --m-pad-y: clamp(1.5rem, 4.5vh, 2.75rem);
  /* Optional hooks for ratio-driven rules (non-fold default: 1 pane) */
  --m-viewport-segments: 1;
  --m-glass-blur: 10px;
  --m-glass-saturate: 125%;
  --m-touch-min: 44px;
  /* Overridden in fold media queries where env(viewport-segment-*) is available */
  --fold-hinge-inline: 0px;
  --fold-hinge-block: 0px;
  --fold-segment-min: 100vw;
}

/* ---------------------------------------------------------------------------
   Orientation-safe shell — horizontal overflow, flex min sizes, long text
   (phones, tablets, iPad, foldables; ≤1024px only — desktop unchanged)
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .app {
    max-width: 100%;
    overflow-x: hidden;
  }

  .page {
    min-width: 0;
  }

  .page-index,
  .page-index-content,
  .page-contact-main,
  .page-about-section,
  .page-expertise-section,
  .page-clients-section {
    min-width: 0;
  }

  #clients-react-root,
  .clients-react-mount {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .page.page-operations {
    overflow-x: hidden;
  }

  .app img,
  .app video {
    max-width: 100%;
    height: auto;
  }

  .page p,
  .page li,
  .page-about-full,
  .page-contact-main,
  .site-footer-inner {
    overflow-wrap: break-word;
  }

  pre {
    overflow-x: auto;
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Rotation UX — consistent flex min-sizes + dynamic viewport on tablets
   (fold inner display, iPad split view, flip open to full width)
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .page-about-full .about-page-scroll,
  .page-expertise-page .expertise-page-scroll,
  .page-clients-all .clients-all-scroll {
    min-height: 0;
  }

  /* Full-bleed index sections already use dvh in styles.css; reinforce flex child shrink on rotate */
  .page-index > .page-about-section,
  .page-index > .page-expertise-section {
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------------
   Optional layout primitives — add classes in HTML where you want a
   header / content / card stack without changing global desktop selectors.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .layout-m-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.5rem, 2vw, 0.85rem);
    width: 100%;
    max-width: min(100%, 48rem);
    margin-inline: auto;
    padding-inline: var(--m-pad-x);
    box-sizing: border-box;
  }

  .layout-m-content {
    display: flex;
    flex-direction: column;
    gap: clamp(0.85rem, 2.5vw, 1.35rem);
    width: 100%;
    max-width: min(100%, 42rem);
    margin-inline: auto;
    padding-inline: var(--m-pad-x);
    padding-block: var(--m-pad-y);
    box-sizing: border-box;
  }

  .layout-m-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
    gap: clamp(0.65rem, 2.2vw, 1rem);
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  .layout-m-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Two columns on tablet only; phones stay one column (see ≤768 block). */
@media (min-width: 768px) and (max-width: 1024px) {
  .layout-m-card-grid.layout-m-card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   Tablet / iPad (≤1024): safe insets + readable type, no desktop breakpoint
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .page.page-index,
  .page.page-operations,
  .page.page-clients-all {
    padding-top: calc(6rem + env(safe-area-inset-top, 0px));
    padding-right: calc(2rem + env(safe-area-inset-right, 0px));
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    padding-left: calc(2rem + env(safe-area-inset-left, 0px));
  }

  /* Keeps full-bleed clients/footer aligned with .page horizontal padding (was hard-coded 2rem). */
  .page.page-index {
    --page-pad-x: calc(2rem + env(safe-area-inset-left, 0px));
    --page-pad-x-right: calc(2rem + env(safe-area-inset-right, 0px));
  }

  body.index-can-scroll .page-index > .page-clients-section,
  body.index-can-scroll .page-index > .site-footer {
    width: calc(100% + var(--page-pad-x) + var(--page-pad-x-right));
    margin-left: calc(-1 * var(--page-pad-x));
    margin-right: calc(-1 * var(--page-pad-x-right));
  }

  .site-footer-inner {
    padding-bottom: calc(clamp(0.9rem, 2.2vw, 1.2rem) + env(safe-area-inset-bottom, 0px));
    padding-left: calc(clamp(1.15rem, 3.5vw, 2rem) + env(safe-area-inset-left, 0px));
    padding-right: calc(clamp(1.15rem, 3.5vw, 2rem) + env(safe-area-inset-right, 0px));
  }

  .explore-back-btn,
  .explore-reset-btn {
    top: calc(1.5rem + env(safe-area-inset-top, 0px));
  }

  .explore-back-btn {
    left: calc(1.5rem + env(safe-area-inset-left, 0px));
  }

  .explore-reset-btn {
    left: calc(7rem + env(safe-area-inset-left, 0px));
  }

  /* 4:3 and similar: avoid over-wide hero copy blocks */
  .hero-expertise-scene-title {
    max-width: min(94vw, 36rem);
  }
}

/* Tall portrait: keep hero full first-screen height (base rule in styles.css) */
@media (max-width: 768px) and (max-aspect-ratio: 10/16) {
  .mobile-hero {
    padding-block: clamp(1.25rem, 4vh, 2rem);
  }
}

/* ---------------------------------------------------------------------------
   Phones + compact landscape (≤768 or short landscape ≤932 wide): shell matches styles.css mobile nav
   --------------------------------------------------------------------------- */
@media (max-width: 768px), (orientation: landscape) and (max-height: 520px) and (max-width: 932px) {
  .page.page-index,
  .page.page-operations {
    --page-pad-x: max(1rem, calc(1.1rem + env(safe-area-inset-left, 0px)));
    --page-pad-x-right: max(1rem, calc(1.1rem + env(safe-area-inset-right, 0px)));
    padding-top: calc(4.75rem + env(safe-area-inset-top, 0px));
    padding-right: var(--page-pad-x-right);
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
    padding-left: var(--page-pad-x);
  }

  /* Full-width footer + no side gutter; header / grid keep their own horizontal padding */
  .page.page-clients-all {
    --page-pad-x: max(1rem, calc(1.1rem + env(safe-area-inset-left, 0px)));
    --page-pad-x-right: max(1rem, calc(1.1rem + env(safe-area-inset-right, 0px)));
    padding-top: calc(4.75rem + env(safe-area-inset-top, 0px));
    padding-left: 0;
    padding-right: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .page-clients-all .clients-all-scroll {
    flex: 1 1 auto;
    min-height: 0;
  }

  .page-clients-all .clients-all-react-mount {
    flex: 1 0 auto;
    min-height: 0;
  }

  .page-clients-all .clients-all-scroll > .site-footer {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: auto;
  }

  body.index-can-scroll .page-index > .page-clients-section,
  body.index-can-scroll .page-index > .site-footer {
    width: calc(100% + var(--page-pad-x) + var(--page-pad-x-right));
    margin-left: calc(-1 * var(--page-pad-x));
    margin-right: calc(-1 * var(--page-pad-x-right));
  }

  .page-title {
    font-size: clamp(1.45rem, 6.5vw, 2.35rem);
  }

  .projects-list-title {
    font-size: clamp(1.25rem, 5vw, 1.85rem);
  }

  .page-contact {
    padding-top: calc(5.5rem + env(safe-area-inset-top, 0px));
    padding-left: 0;
    padding-right: 0;
  }

  .page-contact-main {
    --contact-pad-x: max(1.2rem, calc(1.1rem + env(safe-area-inset-left, 0px)));
    --contact-pad-x-right: max(1.2rem, calc(1.1rem + env(safe-area-inset-right, 0px)));
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: var(--contact-pad-x);
    padding-right: var(--contact-pad-x-right);
    padding-top: clamp(1rem, 2.8vh, 1.75rem);
    padding-bottom: calc(clamp(2rem, 5vh, 3.25rem) + env(safe-area-inset-bottom, 0px));
  }

  .page-contact-content {
    grid-template-columns: 1fr;
    max-width: none;
    width: 100%;
    gap: 1.5rem;
    margin: 0;
  }

  .page-contact .contact-col-form,
  .page-contact .contact-col-info {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: clamp(1.1rem, 4vw, 1.45rem) clamp(1rem, 3.8vw, 1.35rem);
  }

  .page-contact .contact-block-title {
    font-size: clamp(1.32rem, 5.2vw, 1.82rem);
    margin-bottom: 0.35rem;
  }

  .page-contact .contact-block-lead {
    font-size: 0.86rem;
    max-width: none;
    margin-bottom: 1.15rem;
  }

  .page-contact .contact-col-info .contact-block-lead {
    max-width: none;
  }

  .contact-form {
    gap: 1rem;
  }

  /*16px+ avoids iOS zoom on field focus */
  .page-contact .contact-input {
    font-size: 1rem;
    padding: 0.82rem 1rem;
  }

  .page-contact .contact-label {
    font-size: 0.68rem;
  }

  .page-contact .contact-submit {
    width: 100%;
    padding: 0.95rem 1.2rem;
    min-height: 48px;
    font-size: 0.9rem;
    margin-top: 0.35rem;
  }

  .page-contact .contact-map-wrap {
    aspect-ratio: 4 / 3;
    max-height: min(52vw, 240px);
  }

  .page-contact .contact-legal-name {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .page-contact .contact-address-inline {
    font-size: 0.8rem;
  }

  /*
   * Do not set `transform` on `.mobile-nav-drawer` here — it would override
   * styles.css `translateX(-100%)` / open `translateX(0)` (same specificity, this file loads last).
   */
  .mobile-nav-toggle {
    transform: translateZ(0);
    backface-visibility: hidden;
    backdrop-filter: blur(var(--m-glass-blur)) saturate(var(--m-glass-saturate));
    -webkit-backdrop-filter: blur(var(--m-glass-blur)) saturate(var(--m-glass-saturate));
  }

  .mobile-nav-drawer {
    backface-visibility: hidden;
    backdrop-filter: blur(var(--m-glass-blur)) saturate(var(--m-glass-saturate));
    -webkit-backdrop-filter: blur(var(--m-glass-blur)) saturate(var(--m-glass-saturate));
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    width: min(300px, calc(86vw - env(safe-area-inset-left, 0px)));
  }

  .mobile-nav-toggle {
    top: max(1rem, calc(1rem + env(safe-area-inset-top, 0px)));
    left: max(1rem, calc(1rem + env(safe-area-inset-left, 0px)));
    min-width: var(--m-touch-min);
    min-height: var(--m-touch-min);
  }

  .mobile-nav-drawer-header {
    padding-top: 1.25rem;
  }

  .mobile-nav-drawer-link {
    font-size: clamp(0.82rem, 3.6vw, 0.95rem);
    min-height: var(--m-touch-min);
    display: flex;
    align-items: center;
  }

  .mobile-nav-details {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-nav-details-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 1rem 1rem;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: clamp(0.82rem, 3.6vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(0, 212, 255, 0.92);
    min-height: var(--m-touch-min);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    box-sizing: border-box;
  }

  /* Down chevron — collapsible About / Expertise */
  .mobile-nav-details-summary::after {
    content: '';
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
    opacity: 0.88;
    transition: transform 0.22s ease, opacity 0.2s ease;
  }

  .mobile-nav-details-summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav-details[open] > .mobile-nav-details-summary {
    color: #fff;
  }

  .mobile-nav-details[open] > .mobile-nav-details-summary::after {
    transform: rotate(-135deg);
    opacity: 1;
  }

  .mobile-nav-drawer-submenu {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0 0.5rem 0.85rem 0.65rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .mobile-nav-drawer-sublink,
  .mobile-nav-drawer-submenu .mobile-nav-drawer-link {
    padding: 0.75rem 0.85rem;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: 10px;
    font-size: clamp(0.78rem, 3.2vw, 0.88rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .mobile-nav-drawer-sublink {
    display: flex;
    align-items: center;
    font-family: var(--font-sans, system-ui, sans-serif);
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }

  .mobile-nav-drawer-sublink:hover,
  .mobile-nav-drawer-sublink:focus-visible {
    background: rgba(0, 212, 255, 0.1);
    color: #fff;
    outline: none;
  }

  /* Projects page: full-bleed horizontal (globe + stack); vertical layout in styles.css */
  .page.page-operations {
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
    padding-bottom: 0;
  }

  .globe-info-panel {
    bottom: max(3rem, calc(3rem + env(safe-area-inset-bottom, 0px)));
  }

  .mobile-hero-title {
    font-size: clamp(2rem, 10vw, 3.25rem);
  }

  .ring-loader__wrap {
    width: min(300px, 82vw);
    height: min(300px, 82vw);
  }

  .ring-loader__logo {
    width: min(158px, 42vw);
    height: min(158px, 42vw);
  }

  .ring-loader__pct {
    font-size: clamp(1rem, 4.2vw, 1.35rem);
  }

  .filter-pill {
    font-size: clamp(0.78rem, 3.2vw, 0.88rem);
    padding: 0.5rem clamp(0.65rem, 2.5vw, 1rem);
  }
}

/* ---------------------------------------------------------------------------
   Large phones (≤430)
   --------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .hero-expertise-pin-panel {
    width: min(100%, calc(100vw - 2 * env(safe-area-inset-left, 0px) - 1.25rem));
  }

  .hero-expertise-pin-panel--carousel {
    width: min(100%, calc(100vw - 1rem));
  }

  .site-footer-col--links {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Typical iPhone / Android (≤390)
   --------------------------------------------------------------------------- */
@media (max-width: 390px) {
  .explore-nav-dropdown {
    max-width: calc(100vw - 1.25rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }

  .page-expertise-section,
  .page-about-section {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }
}

/* ---------------------------------------------------------------------------
   Small phones (≤360)
   --------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .ring-loader__wrap {
    width: min(260px, 78vw);
    height: min(260px, 78vw);
  }

  .ring-loader__logo {
    width: min(130px, 36vw);
    height: min(130px, 36vw);
  }

  .hero-sky-tagline__row--bottom {
    font-size: clamp(1.15rem, 6.8vw, 1.85rem);
  }

  /* Clients widget: single column (higher specificity than clients-grid.css) */
  html body #clients-react-root .grid-cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  html body #clients-react-root .min-\[480px\]\:grid-cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Flip cover / ultra-narrow (≤320)
   --------------------------------------------------------------------------- */
@media (max-width: 320px) {
  .ring-loader__wrap {
    width: min(220px, 88vw);
    height: min(220px, 88vw);
  }

  .mobile-hero {
    padding-inline: max(0.65rem, env(safe-area-inset-left, 0px));
  }

  .mobile-nav-drawer-link {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ---------------------------------------------------------------------------
   Foldables & dual-screen: hinge gap + per-pane reading width
   - horizontal-viewport-segments: 2 → vertical hinge, left/right panes (book mode)
   - vertical-viewport-segments: 2 → horizontal hinge, top/bottom panes
   - spanning:* duplicates some rules for older Chromium builds
   --------------------------------------------------------------------------- */

/* Vertical hinge: keep prose and UI within one physical pane; avoid straddling the gap */
@media (horizontal-viewport-segments: 2), (spanning: single-fold-vertical) {
  :root {
    --fold-hinge-inline: max(
      0px,
      calc(
        100vw - env(viewport-segment-width 0 0, 0px) - env(viewport-segment-width 1 0, 0px)
      )
    );
    --fold-segment-min: min(
      env(viewport-segment-width 0 0, 50vw),
      env(viewport-segment-width 1 0, 50vw)
    );
  }

  html.index-can-scroll {
    /* Snap / scroll anchoring: keep section edges away from the mechanical hinge */
    scroll-padding-inline: max(12px, calc(var(--fold-hinge-inline) * 0.35));
  }

  .page.page-index,
  .page.page-operations,
  .page.page-clients-all {
    padding-left: calc(2rem + env(safe-area-inset-left, 0px) + min(1.25rem, var(--fold-hinge-inline) * 0.2));
    padding-right: calc(2rem + env(safe-area-inset-right, 0px) + min(1.25rem, var(--fold-hinge-inline) * 0.2));
  }

  @media (max-width: 768px) {
    .page.page-index,
    .page.page-operations {
      --page-pad-x: max(1rem, calc(1.1rem + env(safe-area-inset-left, 0px) + min(0.75rem, var(--fold-hinge-inline) * 0.18)));
      --page-pad-x-right: max(1rem, calc(1.1rem + env(safe-area-inset-right, 0px) + min(0.75rem, var(--fold-hinge-inline) * 0.18)));
      padding-left: var(--page-pad-x);
      padding-right: var(--page-pad-x-right);
    }
  }

  /* Centered columns must not span wider than one segment (minus comfortable inset) */
  .page-about-section,
  .page-about-body,
  .page-expertise-section,
  .page-clients-section,
  .page-clients-headline,
  .clients-react-mount {
    max-width: min(780px, calc(var(--fold-segment-min) - 2.75rem));
  }

  .page-expertise-section {
    max-width: min(1180px, calc(var(--fold-segment-min) * 2 - 3rem));
  }

  .page-about-body {
    max-width: min(660px, calc(var(--fold-segment-min) - 3.25rem));
  }

  .mobile-nav-drawer {
    max-width: min(280px, calc(42vw - env(safe-area-inset-left, 0px)));
    width: min(280px, calc(42vw - env(safe-area-inset-left, 0px)));
  }

  .hero-expertise-scene-title {
    max-width: min(94vw, calc(var(--fold-segment-min) - 2rem), 36rem);
  }

  .explore-nav-dropdown {
    max-width: min(100%, calc(var(--fold-segment-min) - 2.5rem));
  }
}

/* Book mode + enough total width: tablet-style grids (phone → unfolded tablet) */
@media (horizontal-viewport-segments: 2) and (min-width: 720px),
(spanning: single-fold-vertical) and (min-width: 720px) {
  .layout-m-card-grid:not(.layout-m-card-grid--1) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* React clients widget: allow multi-column when each pane is wide enough */
  html body #clients-react-root .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body #clients-react-root .min-\[480px\]\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Dual-screen + mid viewport: footer band matches tablet fold (avoid single skinny column) */
@media (horizontal-viewport-segments: 2) and (min-width: 720px) and (max-width: 1100px),
(spanning: single-fold-vertical) and (min-width: 720px) and (max-width: 1100px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
  }

  .site-footer-col--brand {
    grid-column: 1 / -1;
    max-width: none;
  }

  .site-footer-col--links {
    grid-template-columns: 1fr;
  }
}

/* Unfolded but contact still single-column from (max-width: 880px): restore two columns */
@media (horizontal-viewport-segments: 2) and (min-width: 780px) and (max-width: 880px),
(spanning: single-fold-vertical) and (min-width: 780px) and (max-width: 880px) {
  .page-contact-content {
    grid-template-columns: 1fr 1fr;
    max-width: min(1040px, calc(100% - 0.5rem));
    gap: clamp(1.35rem, 3.5vw, 2.75rem);
  }
}

/* Horizontal hinge (stacked displays): extra block inset so controls clear the gap */
@media (vertical-viewport-segments: 2), (spanning: single-fold-horizontal) {
  :root {
    --fold-hinge-block: max(
      0px,
      calc(
        100vh - env(viewport-segment-height 0 0, 0px) - env(viewport-segment-height 1 0, 0px)
      )
    );
  }

  .page.page-index,
  .page.page-operations,
  .page.page-clients-all {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + min(1.5rem, var(--fold-hinge-block) * 0.35));
  }

  @media (max-width: 768px) {
    .page.page-index,
    .page.page-operations {
      padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px) + min(1.25rem, var(--fold-hinge-block) * 0.35));
    }
  }

  .cesium-control-panel,
  .globe-info-panel {
    margin-bottom: calc(env(safe-area-inset-bottom, 0px) + min(1rem, var(--fold-hinge-block) * 0.3));
  }

  .mobile-nav-toggle {
    top: max(1rem, calc(1rem + env(safe-area-inset-top, 0px) + min(0.5rem, var(--fold-hinge-block) * 0.15)));
  }

  html.index-can-scroll {
    scroll-padding-bottom: max(12px, calc(var(--fold-hinge-block) * 0.35));
  }
}

/* ---------------------------------------------------------------------------
   Aspect ratio: tall narrow (~20:9 phones) vs squarer inner (~4:3 tablets)
   --------------------------------------------------------------------------- */
@media (max-aspect-ratio: 4/3) and (min-width: 560px) and (max-width: 1024px) {
  .page-about-section,
  .page-expertise-section {
    padding-top: clamp(2.25rem, 3.5vh, 3.75rem);
    padding-bottom: clamp(2.25rem, 3.5vh, 4.5rem);
  }

  .page-about-headline,
  .page-expertise-headline {
    font-size: clamp(1.85rem, 4.2vw, 3.25rem);
  }

  .hero-expertise-scene-title {
    max-width: min(94vw, 34rem);
  }

  .clients-all-page-inner {
    padding-bottom: clamp(1.25rem, 2.5vh, 2rem);
  }
}

@media (min-aspect-ratio: 20/9) and (max-width: 520px) {
  .page-index-mobile-hero-stack {
    gap: clamp(0.35rem, 1.8vh, 1rem);
  }

  .mobile-hero {
    padding-block: clamp(0.85rem, 2.5vh, 1.5rem);
  }

  .hint-drag {
    margin-top: clamp(0.25rem, 1.2vh, 0.75rem);
  }
}

/* ---------------------------------------------------------------------------
   Cover / outer display: very narrow or very short viewports (flip phones)
   --------------------------------------------------------------------------- */
@media (max-width: 280px) {
  :root {
    --m-touch-min: 40px;
  }

  .page.page-index,
  .page.page-operations,
  .page.page-clients-all {
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  }

  .mobile-hero-title {
    font-size: clamp(1.35rem, 9vw, 1.85rem);
    letter-spacing: 0.02em;
  }

  .hero-sky-tagline__row--bottom {
    font-size: clamp(1rem, 6vw, 1.45rem);
  }

  .page-title,
  .projects-list-title {
    font-size: clamp(1.15rem, 5.5vw, 1.65rem);
  }

  .ring-loader__wrap {
    width: min(200px, 90vw);
    height: min(200px, 90vw);
  }

  .ring-loader__logo {
    width: min(110px, 38vw);
    height: min(110px, 38vw);
  }
}

@media (max-height: 380px) and (max-width: 540px) {
  .page.page-index,
  .page.page-operations {
    padding-top: calc(3.25rem + env(safe-area-inset-top, 0px));
  }

  .mobile-nav-toggle {
    top: max(0.5rem, calc(0.5rem + env(safe-area-inset-top, 0px)));
    left: max(0.5rem, calc(0.5rem + env(safe-area-inset-left, 0px)));
    min-width: 40px;
    min-height: 40px;
  }

  .mobile-hero-title {
    font-size: clamp(1.2rem, 7vw, 2rem);
  }

  .splash--ring-loader .ring-loader__status {
    font-size: clamp(0.72rem, 2.8vw, 0.85rem);
  }
}

/* ---------------------------------------------------------------------------
   Motion & low refresh: lighter animations on small screens
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  @media (max-width: 768px), (orientation: landscape) and (max-height: 520px) and (max-width: 932px) {
    .hint-arrow,
    .bubble,
    .dive-wrap {
      animation: none !important;
    }

    .mobile-nav-drawer,
    .mobile-nav-overlay,
    .mobile-nav-bars,
    .mobile-nav-bars::before,
    .mobile-nav-bars::after {
      transition-duration: 0.01ms !important;
      transition-delay: 0s !important;
    }

    .mobile-nav-details-summary::after {
      transition: none !important;
    }

    body.mobile-nav-open .mobile-nav-drawer,
    body:not(.mobile-nav-open) .mobile-nav-drawer {
      will-change: auto;
    }
  }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 520px) and (max-width: 932px) {
  @media (update: slow) {
    .mobile-nav-drawer,
    .mobile-nav-toggle {
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
  }
}

/* =============================================================================
   ORIENTATION — portrait vs landscape (mobile-first; ≤1024px only)
   Structure:
     1) Overflow-safe shell (rotation-safe widths)
     2) Portrait: single-column bias, vertical padding from vh
     3) Landscape: shorter page chrome, multi-column where width allows
     4) Extreme aspect ratios (very tall / very wide)
     5) Glass + motion tuned per orientation
     6) Foldable: orientation + spanning (unfolded “tablet” in landscape)
   Example markup (optional primitive — already in file):
     <header class="layout-m-header">…</header>
     <div class="layout-m-content">
       <div class="layout-m-card-grid layout-m-card-grid--2">… cards …</div>
     </div>
   ============================================================================= */

/* 1) Rotation-safe: flex/grid children may otherwise refuse to shrink → horizontal scroll */
@media (max-width: 1024px) {
  .page-index,
  .page-contact-main,
  .clients-all-scroll,
  .clients-all-page-inner,
  .site-footer-inner {
    min-width: 0;
  }

  .page.page-index,
  .page.page-operations,
  .page.page-clients-all,
  .page.page-contact {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* 2) Portrait (phones + tablets): favor one column, vmin-aware type */
@media (orientation: portrait) and (max-width: 1024px) {
  :root {
    --m-pad-y: clamp(1.35rem, 4.2vmin, 2.65rem);
  }

  .page-title {
    font-size: clamp(1.4rem, 5.5vmin + 0.5vw, 2.35rem);
  }

  .projects-list-title {
    font-size: clamp(1.2rem, 4.8vmin + 0.5vw, 1.85rem);
  }

  .mobile-hero-title {
    font-size: clamp(2rem, 7.5vmin + 1vw, 3.25rem);
  }

  /* Tablet portrait (iPad 4:3 class): explicit single column for card primitive */
  @media (min-width: 769px) {
    .layout-m-card-grid {
      grid-template-columns: 1fr;
    }
  }
}

/* ---------------------------------------------------------------------------
   Portrait — phones & fold closed: vertical stack, no stray columns, anti-stretch
   (Complements §2 above; overrides landscape grid on .page-about-section when rotated.)
   --------------------------------------------------------------------------- */
@media (orientation: portrait) and (max-width: 768px) {
  .layout-m-card-grid {
    grid-template-columns: 1fr;
    gap: clamp(0.6rem, 2.5vmin, 1rem);
  }

  .layout-m-header,
  .layout-m-content {
    max-width: min(100%, 40rem);
  }

  .operations-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .page-about-section {
    display: block;
    text-align: center;
    max-width: min(780px, 100%);
    margin-inline: auto;
  }

  .page-about-body {
    max-width: min(40rem, 100%);
    margin-inline: auto;
  }

  .expertise-grid--four,
  .expertise-grid--six {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  html body #clients-react-root .grid-cols-2,
  html body #clients-react-root .min-\[480px\]\:grid-cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-index-mobile-hero-stack .hero-learn-more-btn,
  .hero-learn-more-btn {
    max-width: min(100%, 22rem);
    width: auto;
    box-sizing: border-box;
  }

  .filter-bar {
    justify-content: center;
    gap: 0.45rem 0.5rem;
  }

  .page-contact-content {
    grid-template-columns: 1fr;
  }

  .page-clients-all .clients-all-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tall portrait (~18:9–20:9): cap hero flex growth; vmin-based section rhythm */
@media (orientation: portrait) and (max-width: 480px) and (max-aspect-ratio: 9/19) {
  .mobile-hero-main {
    flex: 0 1 auto;
    min-height: min(34vh, 13.5rem);
    max-height: min(44vh, 19rem);
  }

  .mobile-hero {
    gap: clamp(0.35rem, 1.5vmin, 0.85rem);
    justify-content: flex-start;
  }

  .page-index-mobile-hero-stack {
    gap: clamp(0.35rem, 1.8vmin, 1rem);
  }

  .page-about-section,
  .page-expertise-section,
  .page-clients-section {
    padding-top: clamp(2.35rem, 5.5vmin, 3.75rem);
    padding-bottom: clamp(2.35rem, 5.5vmin, 3.75rem);
  }

  .operation-card-image {
    max-height: min(42vw, 200px);
  }

  .projects-globe-container {
    max-height: min(48vh, 320px);
  }
}

/* Flip outer / fold-closed narrow portrait */
@media (orientation: portrait) and (max-width: 380px) {
  .page-clients-all .clients-all-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }

  .page-title,
  .projects-list-title {
    text-wrap: balance;
    hyphens: auto;
  }

  .mobile-nav-drawer {
    width: min(300px, calc(100vw - 0.75rem - env(safe-area-inset-left, 0px)));
  }

  .hero-sky-rule {
    max-width: min(20rem, 88vw);
  }
}

/* Fold phone closed (one pane): keep clients + expertise from mimicking tablet columns */
@media (orientation: portrait) and (max-width: 440px) {
  @media (horizontal-viewport-segments: 1) {
    .expertise-grid--four,
    .expertise-grid--six {
      grid-template-columns: 1fr;
    }
  }
}

/* 3) Landscape: reclaim vertical space; add columns when there is enough inline size */
@media (orientation: landscape) and (max-width: 1024px) {
  :root {
    --m-pad-y: clamp(1rem, 3.2vmin, 1.85rem);
    /* Slightly lighter glass on wide rotated viewports (GPU / legibility) */
    --m-glass-blur: 8px;
    --m-glass-saturate: 118%;
  }

  /* iPad / tablet landscape: modest tightening vs 6rem portrait (keeps proportions) */
  @media (min-width: 769px) {
    .page.page-index,
    .page.page-operations,
    .page.page-clients-all {
      padding-top: calc(4.5rem + env(safe-area-inset-top, 0px));
      padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
    }
  }

  /* Phone landscape: reclaim vertical space (refined again in ≤768 block below) */
  @media (max-width: 768px) {
    .page.page-index,
    .page.page-operations,
    .page.page-clients-all {
      padding-top: calc(3.35rem + env(safe-area-inset-top, 0px));
      padding-bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px));
    }
  }

  .page-title {
    font-size: clamp(1.3rem, 3.8vmin + 1.2vw, 2.1rem);
  }

  .projects-list-title {
    font-size: clamp(1.15rem, 3.2vmin + 1vw, 1.75rem);
  }

  .mobile-hero-title {
    font-size: clamp(1.65rem, 4.8vmin + 1.5vw, 2.85rem);
  }

  .page-contact-main {
    padding-top: clamp(0.65rem, 2vmin, 1.35rem);
  }

  .page-contact .contact-map-wrap {
    max-height: min(42vh, 220px);
  }

  /* Phone landscape: two columns for optional card grid */
  @media (max-width: 768px) and (min-width: 520px) {
    .layout-m-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(0.55rem, 1.8vw, 0.95rem);
    }
  }

  /* Tablet / iPad landscape: two columns; optional third when --2 modifier */
  @media (min-width: 769px) {
    .layout-m-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .layout-m-card-grid.layout-m-card-grid--2 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Contact: side-by-side when inline size allows (rotation into “wide” phone) */
  @media (min-width: 640px) and (max-width: 880px) {
    .page-contact-content {
      grid-template-columns: 1fr 1fr;
      max-width: min(1040px, 100%);
      gap: clamp(1.15rem, 2.8vw, 2.25rem);
    }
  }

  /* Clients “see all”: one more column in landscape on mid-width phones */
  @media (max-width: 768px) and (min-width: 560px) {
    .page-clients-all .clients-all-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.85rem 0.55rem;
    }
  }

}

/* Phones only: portrait keeps taller top bar; landscape tightens (overrides §Phones block) */
@media (max-width: 768px) and (orientation: portrait) {
  .page.page-index,
  .page.page-operations {
    padding-top: calc(4.75rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .page.page-index,
  .page.page-operations {
    padding-top: calc(3.15rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
  }

  .page-index-mobile-hero-stack {
    gap: clamp(0.3rem, 2vmin, 0.85rem);
  }

  .mobile-hero {
    padding-block: clamp(0.65rem, 2.5vmin, 1.35rem);
  }

  .hint-drag {
    margin-top: clamp(0.15rem, 1vmin, 0.5rem);
  }
}

/* Short landscape (notch / Dynamic Island / flip opened flat): avoid clipping controls */
@media (orientation: landscape) and (max-height: 430px) and (max-width: 1024px) {
  .explore-back-btn,
  .explore-reset-btn {
    top: calc(0.85rem + env(safe-area-inset-top, 0px));
  }

  .explore-reset-btn {
    left: calc(6.25rem + env(safe-area-inset-left, 0px));
  }

  .filter-pill {
    padding: 0.4rem clamp(0.55rem, 2vw, 0.85rem);
  }
}

/* =============================================================================
   LANDSCAPE LAYOUT — horizontal density (phones, tablets / iPad 4:3, fold open)
   Vertical stacks → grid / row; cap line-length for readability; trim dead space
   Compact phone landscape: (orientation: landscape) + max-height 520px + max-width 932px
   (matches extended mobile breakpoint in styles.css)
   ============================================================================= */

@media (orientation: landscape) and (max-height: 520px) and (max-width: 932px) {
  /* Desktop east column would duplicate copy when stack is already two-column */
  .hero-sky-block--east {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Narrow compact landscape: trim vertical dead space (single-column hero; styles.css treats as mobile) */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 479px) {
  .page-index-mobile-hero-stack {
    min-height: min(
      calc(100dvh - 3.15rem - env(safe-area-inset-top, 0px)),
      calc(100lvh - 3.15rem - env(safe-area-inset-top, 0px)),
      68vh
    );
  }

  .mobile-hero-main {
    min-height: min(36vh, 9.5rem);
    padding: 0.35rem 0 0.5rem;
  }
}

/* Compact landscape with room: hero = 2-column grid (tagline + TRI OCEAN title) */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 480px) and (max-width: 932px) {
  .page-index-mobile-hero-stack {
    display: grid;
    grid-template-columns: minmax(11.5rem, 1fr) minmax(0, 1.2fr);
    align-items: center;
    column-gap: clamp(0.65rem, 2.5vw, 1.35rem);
    min-height: min(
      calc(100dvh - 3.15rem - env(safe-area-inset-top, 0px)),
      calc(100lvh - 3.15rem - env(safe-area-inset-top, 0px)),
      82vh
    );
  }

  /* Reveal first hero column (hidden on portrait mobile in styles.css) */
  .page-index-mobile-hero-stack > .hero-sky-block {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 0.5rem 0.35rem 0.5rem max(0.85rem, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    background: linear-gradient(105deg, rgba(6, 22, 32, 0.72) 0%, rgba(6, 22, 32, 0.2) 72%, transparent 100%);
  }

  .page-index-mobile-hero-stack .hero-sky-tagline {
    align-items: flex-start;
  }

  .page-index-mobile-hero-stack .hero-sky-tagline__row--top,
  .page-index-mobile-hero-stack .hero-sky-tagline__row--bottom {
    justify-content: flex-start;
  }

  .page-index-mobile-hero-stack .hero-learn-more-btn {
    align-self: flex-start;
    margin-top: 0.65rem;
  }

  .page-index-mobile-hero-stack .hero-sky-rule {
    margin-left: 0;
    margin-right: 0;
    max-width: min(100%, 18rem);
  }

  .page-index-mobile-hero-stack .mobile-hero {
    grid-column: 2;
    padding: 0.5rem max(0.85rem, env(safe-area-inset-right, 0px)) 0.5rem 0;
    justify-content: center;
  }

  .page-index-mobile-hero-stack .mobile-hero-main {
    min-height: unset;
    min-height: min(52vh, 14rem);
    justify-content: center;
  }
}

/* Index “Who we are”: two text columns when wide enough (readability via shorter measure per column) */
@media (orientation: landscape) and (max-width: 1024px) and (min-width: 600px) {
  .page-about-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.1rem, 3vw, 2rem);
    row-gap: 0.85rem;
    text-align: start;
    max-width: min(920px, calc(100% - 1.5rem));
  }

  .page-about-section::before,
  .page-about-label {
    grid-column: 1 / -1;
    justify-self: center;
    text-align: center;
  }

  .page-about-body {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Expertise cards: more columns in compact / phone landscape */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 932px) and (min-width: 560px) {
  .expertise-grid--four,
  .expertise-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (orientation: landscape) and (min-width: 769px) and (max-width: 1024px) {
  .expertise-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .expertise-grid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-expertise-section {
    max-width: min(1180px, 96vw);
    padding-inline: clamp(1.25rem, 3vw, 2rem);
  }
}

/* Home clients widget: extra columns in compact / phone landscape */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 932px) and (min-width: 520px) {
  html body #clients-react-root .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body #clients-react-root .min-\[480px\]\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (orientation: landscape) and (min-width: 769px) and (max-width: 1024px) {
  html body #clients-react-root .min-\[480px\]\:grid-cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Projects (operations): tighter globe + list padding in compact / phone landscape */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 932px) {
  .page.page-operations .cesium-globe-container {
    height: clamp(150px, 30vh, 240px);
  }

  .projects-list-section {
    padding: 1rem max(1rem, env(safe-area-inset-left, 0px)) 2rem max(1rem, env(safe-area-inset-right, 0px));
  }

  .page-operations .filter-bar {
    margin-bottom: 1.15rem;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 932px) and (min-width: 600px) {
  .operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 1.25rem;
  }

  .page.page-operations .cesium-project-item {
    flex: 0 0 calc(50% - 0.35rem);
    width: calc(50% - 0.35rem);
    max-width: calc(50% - 0.35rem);
    scroll-snap-align: start;
  }
}

@media (orientation: landscape) and (min-width: 769px) and (max-width: 1024px) {
  .operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 1.5rem;
    max-width: min(960px, 94vw);
  }

  .projects-globe-container {
    height: clamp(200px, 38vh, 340px);
    min-height: 200px;
  }
}

/* Fold open + landscape: match tablet grids; hinge-aware max-width already set earlier */
@media (orientation: landscape) and (max-width: 1024px) {
  @media (horizontal-viewport-segments: 2) and (min-width: 720px),
    (spanning: single-fold-vertical) and (min-width: 720px) {
    .page-about-section {
      max-width: min(920px, calc(var(--fold-segment-min, 50vw) * 2 + var(--fold-hinge-inline, 0px) - 2rem));
    }

    .operations-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body #clients-react-root .min-\[480px\]\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

/* =============================================================================
   VIEWPORT ASPECT-RATIO LAYOUT (width/height) — complements width breakpoints
   CSS compares aspect as width/height (e.g. portrait 360×800 → 9/20).
   Examples:
     Ultra-tall portrait:  @media (orientation: portrait) and (max-aspect-ratio: 9/20)
     ~16:9 portrait band:  (min-aspect-ratio: 9/18) and (max-aspect-ratio: 9/15)
     iPad portrait ~4:3:   (orientation: portrait) and (min-aspect-ratio: 3/4)
     Phone landscape wide: (orientation: landscape) and (min-aspect-ratio: 16/9)
     iPad landscape ~4:3:  (orientation: landscape) and (max-aspect-ratio: 4/3)
   Fold: --m-viewport-segments + existing horizontal-viewport-segments blocks.
   ============================================================================= */

@media (horizontal-viewport-segments: 2), (spanning: single-fold-vertical) {
  :root {
    --m-viewport-segments: 2;
  }
}

/* --- Ultra-tall portrait (~20:9 and taller): w/h ≤ 9/20 — vmin-led, cap vh stretch --- */
@media (orientation: portrait) and (max-aspect-ratio: 9/20) and (max-width: 540px) {
  .page-about-body,
  .page-contact .contact-block-lead {
    font-size: clamp(0.88rem, 3.8vmin, 1rem);
    line-height: 1.65;
  }

  .page.page-index,
  .page.page-operations {
    padding-left: max(var(--page-pad-x, 1rem), clamp(0.85rem, 4.2vmin, 1.35rem));
    padding-right: max(var(--page-pad-x-right, 1rem), clamp(0.85rem, 4.2vmin, 1.35rem));
  }

  .ring-loader__pct {
    font-size: clamp(0.92rem, 3.6vmin, 1.25rem);
  }

  .page-contact .contact-map-wrap {
    aspect-ratio: 4 / 3;
    max-height: min(42vmin, 200px);
  }
}

/* --- Tall portrait (~18–20:9): between 9/20 and 9/18 — slight relief vs ultra-tall --- */
@media (orientation: portrait) and (min-aspect-ratio: 9/20) and (max-aspect-ratio: 9/18) and (max-width: 480px) {
  .mobile-hero-title {
    font-size: clamp(2rem, min(12vw, 9vmin), 3.5rem);
  }

  .page-about-section,
  .page-expertise-section {
    padding-inline: clamp(1rem, 4.5vmin, 1.75rem);
  }
}

/* --- Standard portrait (~15:9–16:9 class): 9/18 < w/h ≤ 9/15 --- */
@media (orientation: portrait) and (min-aspect-ratio: 9/18) and (max-aspect-ratio: 9/15) and (max-width: 480px) {
  .hero-sky-tagline__row--bottom {
    font-size: clamp(1.35rem, min(7.5vw, 6.5vmin), 2.4rem);
  }

  .page-clients-headline {
    font-size: clamp(1.5rem, min(5.5vw, 5vmin), 2.25rem);
  }
}

/* --- Tablet / iPad portrait (~4:3): w/h ≥ 3/4 — wider measure, calmer vertical padding --- */
@media (orientation: portrait) and (min-aspect-ratio: 3/4) and (max-width: 1024px) {
  .page-about-section,
  .page-expertise-section {
    padding-inline: clamp(1.5rem, min(4vw, 3.5vmin), 2.75rem);
    max-width: min(1180px, 100%);
  }

  .page-about-body {
    max-width: min(42rem, 92vw);
  }

  .layout-m-content {
    max-width: min(100%, min(48rem, 92vw));
  }

  .hero-expertise-scene-title {
    max-width: min(94vw, 38rem);
  }
}

/* --- Landscape ≥ ~16:9: prioritize horizontal space (phone rotated, wide) --- */
@media (orientation: landscape) and (min-aspect-ratio: 16/9) and (max-width: 1024px) {
  .page-title {
    font-size: clamp(1.35rem, min(3.5vw, 4vmin), 2.15rem);
  }

  .projects-list-title {
    font-size: clamp(1.2rem, min(3vw, 3.5vmin), 1.85rem);
  }

  .projects-globe-container {
    height: clamp(180px, min(36vh, 32vw), 360px);
  }

  .filter-bar {
    gap: clamp(0.4rem, 1.5vw, 0.65rem);
  }
}

/* --- Landscape ≤ ~4:3 (iPad class): avoid overly wide text lines --- */
@media (orientation: landscape) and (max-aspect-ratio: 4/3) and (min-width: 768px) and (max-width: 1366px) {
  .page-about-section,
  .page-expertise-section {
    margin-inline: auto;
    max-width: min(960px, 100%);
  }

  .operations-grid {
    max-width: min(1000px, min(94vw, 100%));
    margin-inline: auto;
  }

  .site-footer-inner {
    max-width: min(1200px, min(96vw, 100%));
  }
}

/* --- Ultrawide landscape (≥ ~21:9): extra side padding, smaller footer meta --- */
@media (orientation: landscape) and (min-aspect-ratio: 21/9) and (max-width: 1024px) {
  .page-about-section,
  .page-expertise-section {
    padding-inline: clamp(1rem, min(5vw, 6vmin), 2.5rem);
  }

  .site-footer-legal p {
    font-size: clamp(0.58rem, 1.8vmin, 0.64rem);
  }

  .page-clients-section {
    padding-inline: clamp(1rem, min(4.5vw, 5vmin), 2rem);
  }
}

/* --- Fold: single pane (closed / one segment) + tall ratio → treat like phone --- */
@media (horizontal-viewport-segments: 1) and (orientation: portrait) and (max-aspect-ratio: 9/19) and (max-width: 500px) {
  html body #clients-react-root .grid-cols-2,
  html body #clients-react-root .min-\[480px\]\:grid-cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Fold: two panes + portrait (uncommon) — cap content to segment feel --- */
@media (horizontal-viewport-segments: 2) and (orientation: portrait) and (max-width: 1024px) {
  .layout-m-header,
  .layout-m-content {
    max-width: min(100%, calc(var(--fold-segment-min, 100vw) - 1.5rem));
  }
}

/* 5) Foldable: unfolded landscape behaves like tablet width — keep multi-column + hinge vars */
@media (orientation: landscape) and (max-width: 1024px) {
  @media (horizontal-viewport-segments: 2) and (min-width: 720px),
    (spanning: single-fold-vertical) and (min-width: 720px) {
    .layout-m-card-grid.layout-m-card-grid--2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

/* =============================================================================
   FOLD × ORIENTATION — adaptive modes (hinge-aware + grid expansion)
   Modes:
     A) Folded portrait  — segments:1, portrait → phone column flow
     B) Folded landscape — segments:1, landscape → compact strip
     C) Unfolded portrait — segments:2, portrait → tablet-like 2-pane height
     D) Unfolded landscape — segments:2, landscape → full wide book + denser grids
   Also: vertical-viewport-segments:2 × orientation (horizontal hinge)
   Use env(viewport-segment-*) via --fold-hinge-inline / --fold-hinge-block (set above).
   ============================================================================= */

/* -- A) Folded portrait: single pane, upright (phone mode) — single column, no span straddle -- */
@media (horizontal-viewport-segments: 1) and (orientation: portrait) and (max-width: 600px) {
  .operations-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .layout-m-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html body #clients-react-root .grid-cols-2,
  html body #clients-react-root .min-\[480px\]\:grid-cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -- B) Folded landscape: single pane, short height — horizontal density, hinge N/A -- */
@media (horizontal-viewport-segments: 1) and (orientation: landscape) and (max-height: 520px) {
  .explore-nav {
    padding: 0.55rem clamp(0.85rem, 2.5vw, 1.35rem);
    gap: clamp(0.65rem, 2vw, 1.25rem);
  }

  .filter-bar {
    margin-bottom: clamp(0.85rem, 2.5vh, 1.35rem);
  }
}

/* -- C) Unfolded portrait: vertical hinge, tall canvas — 2-col grids, hinge padding, per-pane width -- */
@media (horizontal-viewport-segments: 2) and (orientation: portrait) and (max-width: 1200px),
(spanning: single-fold-vertical) and (orientation: portrait) and (max-width: 1200px) {
  html.index-can-scroll {
    scroll-padding-inline: max(16px, calc(var(--fold-hinge-inline, 0px) * 0.42));
  }

  .page.page-index,
  .page.page-operations,
  .page.page-clients-all {
    padding-left: calc(
      max(1rem, env(safe-area-inset-left, 0px)) + min(1.1rem, var(--fold-hinge-inline, 0px) * 0.22)
    );
    padding-right: calc(
      max(1rem, env(safe-area-inset-right, 0px)) + min(1.1rem, var(--fold-hinge-inline, 0px) * 0.22)
    );
  }

  .operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.2vw, 1.5rem);
    max-width: min(
      1000px,
      calc(var(--fold-segment-min, 45vw) * 2 + var(--fold-hinge-inline, 0px) - 1.5rem)
    );
    margin-inline: auto;
  }

  .expertise-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expertise-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body #clients-react-root .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body #clients-react-root .min-\[480px\]\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-m-card-grid:not(.layout-m-card-grid--1) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .explore-nav {
    flex-wrap: wrap;
    justify-content: center;
    max-width: min(
      94vw,
      calc(var(--fold-segment-min, 45vw) * 2 + var(--fold-hinge-inline, 0px) - 2.5rem)
    );
  }
}

/* -- D) Unfolded landscape: full wide book — expand grids; keep content inside visual span -- */
@media (horizontal-viewport-segments: 2) and (orientation: landscape) and (min-width: 560px),
(spanning: single-fold-vertical) and (orientation: landscape) and (min-width: 560px) {
  html.index-can-scroll {
    scroll-padding-inline: max(14px, calc(var(--fold-hinge-inline, 0px) * 0.38));
  }

  .operations-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.1rem, 2vw, 1.65rem);
    max-width: min(
      1240px,
      calc(100vw - var(--fold-hinge-inline, 0px) - 2.5rem)
    );
    margin-inline: auto;
  }

  .expertise-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .expertise-grid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html body #clients-react-root .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body #clients-react-root .min-\[480px\]\:grid-cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .layout-m-card-grid:not(.layout-m-card-grid--1) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .layout-m-card-grid.layout-m-card-grid--2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .explore-nav {
    max-width: min(
      96vw,
      calc(var(--fold-segment-min, 40vw) * 2 + var(--fold-hinge-inline, 0px) - 2rem)
    );
    gap: clamp(1rem, 2.2vw, 2rem);
  }

  .projects-list-section {
    padding-inline: clamp(
      1rem,
      calc(1.25rem + min(0.75rem, var(--fold-hinge-inline, 0px) * 0.15)),
      2.5rem
    );
  }
}

/* Horizontal hinge (stacked panes) × orientation — extra safe inset on the fold line */
@media (vertical-viewport-segments: 2) and (orientation: portrait),
(spanning: single-fold-horizontal) and (orientation: portrait) {
  .page.page-index,
  .page.page-operations,
  .page.page-clients-all {
    padding-bottom: calc(
      3rem + env(safe-area-inset-bottom, 0px) + min(1.35rem, var(--fold-hinge-block, 0px) * 0.32)
    );
  }

  .operations-grid,
  .expertise-grid--four,
  .expertise-grid--six {
    row-gap: clamp(1rem, 2.5vmin, 1.5rem);
  }
}

@media (vertical-viewport-segments: 2) and (orientation: landscape),
(spanning: single-fold-horizontal) and (orientation: landscape) {
  .page.page-index,
  .page.page-operations {
    padding-inline: calc(1.5rem + min(0.85rem, var(--fold-hinge-block, 0px) * 0.18));
  }

  .cesium-control-panel,
  .globe-info-panel {
    margin-bottom: calc(
      env(safe-area-inset-bottom, 0px) + min(1.1rem, var(--fold-hinge-block, 0px) * 0.28)
    );
  }
}

/* =============================================================================
   COMPONENTS × ORIENTATION — portrait stack vs landscape row/grid
   Navbar (.explore-nav) | Hero | Cards | Modals/panels | Sidebar (.mobile-nav-drawer)
   ============================================================================= */

/* --- Navbar (desktop pill): tablet portrait = wrapped stack; landscape = single row --- */
@media (orientation: portrait) and (min-width: 769px) and (max-width: 1024px) {
  .explore-nav {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    row-gap: 0.45rem;
    column-gap: clamp(0.85rem, 2.2vw, 1.35rem);
    max-width: min(94vw, 36rem);
    padding: 0.65rem clamp(1rem, 3vw, 1.75rem);
  }

  .explore-nav-dropdown {
    flex-direction: column;
    align-items: stretch;
    max-width: min(94vw, 22rem);
    padding: 0.55rem 1rem;
    gap: 0.35rem 0.5rem;
  }

  .explore-nav-dropdown-link {
    text-align: center;
    width: 100%;
  }
}

@media (orientation: landscape) and (min-width: 769px) and (max-width: 1200px) {
  .explore-nav {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(1rem, 2.2vw, 2.25rem);
    max-width: min(96vw, 56rem);
    padding: 0.8rem clamp(1.25rem, 2.5vw, 2.5rem);
  }

  .explore-nav-dropdown {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: min(94vw, 52rem);
  }
}

/* --- Sidebar: mobile drawer — portrait full column nav; landscape 2-column link grid --- */
@media (max-width: 768px) and (orientation: portrait) {
  .mobile-nav-drawer {
    width: min(300px, calc(86vw - env(safe-area-inset-left, 0px)));
  }

  .mobile-nav-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
}

@media (max-width: 768px) and (orientation: landscape) and (min-height: 280px) {
  .mobile-nav-drawer {
    width: min(100%, max(320px, 55vw));
    max-width: min(480px, calc(100vw - env(safe-area-inset-left, 0px) - 0.5rem));
  }

  .mobile-nav-drawer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem 0.45rem;
    padding: 0.65rem 0.65rem 1.25rem;
    align-content: start;
  }

  .mobile-nav-drawer-link {
    padding: 0.65rem 0.55rem;
    font-size: clamp(0.72rem, 2.8vw, 0.85rem);
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .mobile-nav-details {
    grid-column: 1 / -1;
  }

  .mobile-nav-drawer-submenu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem;
  }
}

/* --- Hero: mobile portrait = column stack (matches ≤768 mobile index); avoids breaking tablet/desktop index --- */
@media (orientation: portrait) and (max-width: 768px) {
  .page-index-mobile-hero-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .page-index-mobile-hero-stack .mobile-hero {
    grid-column: auto;
    width: 100%;
  }

  .mobile-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-sky-tagline {
    flex-direction: column;
    align-items: center;
  }

  .hero-sky-tagline__row--top,
  .hero-sky-tagline__row--bottom {
    justify-content: center;
  }
}

@media (orientation: landscape) and (max-width: 768px) and (min-width: 480px) {
  .page-index-mobile-hero-stack .mobile-hero {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

/* --- Cards: portrait narrow = full-width tracks; landscape = multi-column where grids exist --- */
@media (orientation: portrait) and (max-width: 768px) {
  .operation-card,
  .expertise-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .expertise-card-title {
    padding: 0.85rem 1rem;
  }

  .expertise-card-list {
    padding: 1rem 1rem 1.1rem 1.15rem;
  }
}

@media (orientation: landscape) and (max-width: 768px) and (min-width: 560px) {
  .operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expertise-grid--four,
  .expertise-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (orientation: landscape) and (min-width: 769px) and (max-width: 1024px) {
  .expertise-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expertise-grid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Modals / overlays: portrait = tall narrow sheet; landscape = wider, shorter --- */
@media (orientation: portrait) and (max-width: 768px) {
  .hero-expertise-pin-panel {
    width: min(440px, calc(100vw - 1.25rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-height: min(62vh, 480px);
  }

  .hero-expertise-pin-panel--carousel {
    width: min(100%, calc(100vw - 0.85rem));
    max-height: min(78vh, 560px);
  }

  .page.page-operations .cesium-detail-panel-inner {
    max-width: 100%;
  }

  .globe-info-panel {
    width: min(calc(100vw - 1.5rem), 320px);
  }
}

@media (orientation: landscape) and (max-width: 1024px) {
  .hero-expertise-pin-panel {
    width: min(400px, 42vw);
    max-height: min(88vh, 440px);
  }

  .hero-expertise-pin-panel--carousel {
    width: min(720px, 78vw);
    max-height: min(92vh, 520px);
  }

  .globe-info-panel {
    width: min(360px, 38vw);
    max-width: 380px;
  }
}

@media (orientation: landscape) and (min-width: 640px) and (max-width: 1200px) {
  .about-ms-expand-inner {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: 1rem 1.5rem;
    max-width: min(56rem, 92vw);
    align-items: start;
  }

  .about-ms-expand-meta {
    margin-bottom: 0;
  }
}

@media (orientation: portrait) and (max-width: 1023px) {
  .about-ms-expand-inner {
    display: block;
    max-width: min(40rem, 100%);
  }
}

/* =============================================================================
   PERFORMANCE — orientation & reflow
   Nav drawer/overlay: transform + opacity only (compositor-friendly).
   Durations tuned per orientation; shorter on low-refresh viewports.
   prefers-reduced-motion: see § Motion & low refresh (above) + styles.css about-ms.
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 768px), (orientation: landscape) and (max-height: 520px) and (max-width: 932px) {
    :root {
      --m-motion-drawer: 0.4s;
      --m-motion-overlay-op: 0.35s;
      --m-motion-overlay-vis: 0.35s;
      --m-motion-bars: 0.25s;
    }

    .mobile-nav-drawer {
      transition-property: transform;
      transition-duration: var(--m-motion-drawer);
      transition-timing-function: var(--ease-out);
    }

    .mobile-nav-overlay {
      transition-property: opacity, visibility;
      transition-duration: var(--m-motion-overlay-op), var(--m-motion-overlay-vis);
      transition-timing-function: var(--ease-out), linear;
    }

    .mobile-nav-bars::before,
    .mobile-nav-bars::after {
      transition-duration: var(--m-motion-bars);
    }

    body.mobile-nav-open .mobile-nav-drawer {
      will-change: transform;
    }

    body:not(.mobile-nav-open) .mobile-nav-drawer {
      will-change: auto;
    }
  }

  @media (orientation: landscape) and (max-height: 520px) and (max-width: 932px) {
    :root {
      --m-motion-drawer: 0.26s;
      --m-motion-overlay-op: 0.22s;
      --m-motion-overlay-vis: 0.2s;
      --m-motion-bars: 0.18s;
    }
  }

  @media (max-width: 768px), (orientation: landscape) and (max-height: 520px) and (max-width: 932px) {
    @media (update: slow) {
      :root {
        --m-motion-drawer: 0.22s;
        --m-motion-overlay-op: 0.2s;
        --m-motion-overlay-vis: 0.18s;
        --m-motion-bars: 0.16s;
      }
    }
  }
}