/* ============================================================
   MAITRA — MOBILE OPTIMIZATION FINAL
   Desktop remains unchanged. All rules are scoped to <=700px.
   Purpose: preserve the frozen desktop design while making the
   same experience thumb-friendly, readable and stable on phones.
   ============================================================ */

@media (max-width: 700px) {
  :root {
    --m-pad: clamp(14px, 4.4vw, 20px);
    --m-bottom-bar: 68px;
    --m-safe-bottom: max(10px, env(safe-area-inset-bottom));
    --m-ink: #0b2947;
    --m-paper: #f4f7f9;
    --m-line: rgba(11,41,71,.14);
    --m-yellow: #ffbd00;
  }

  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
    overscroll-behavior-x: none;
  }

  body { min-width: 320px; }

  /* ----------------------------------------------------------
     1. HERO — preserve the cinematic desktop composition,
     but recompose it for portrait screens.
     ---------------------------------------------------------- */
  .hero {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: 100svh !important;
    height: 100dvh !important;
  }

  .hero-media,
  .hero-video,
  .hero-poster {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  .hero-video,
  .hero-poster {
    object-fit: cover !important;
    object-position: 52% 48% !important;
  }

  .hero-content {
    width: calc(100% - (2 * var(--m-pad))) !important;
    max-width: 430px !important;
    padding: max(12px, env(safe-area-inset-top)) 0 calc(var(--m-bottom-bar) + 34px + var(--m-safe-bottom)) !important;
  }

  .hero-brand-row {
    min-height: 82px !important;
  }

  .hero-brand {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: clamp(94px, 25vw, 116px) !important;
  }

  .hero-eyebrow {
    top: 5px !important;
    right: 0 !important;
    width: min(58%, 205px) !important;
    max-width: 205px !important;
    font-size: clamp(.36rem, 1.65vw, .48rem) !important;
    line-height: 1.5 !important;
    letter-spacing: .12em !important;
  }

  .hero-copy {
    align-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-kicker {
    margin-bottom: 9px !important;
    font-size: clamp(.50rem, 1.9vw, .62rem) !important;
    letter-spacing: .15em !important;
  }

  .hero-title {
    max-width: 100% !important;
    margin-bottom: 13px !important;
    font-size: clamp(2.35rem, 11.4vw, 3.75rem) !important;
    line-height: .90 !important;
    letter-spacing: -.06em !important;
    text-wrap: balance !important;
  }

  .hero-support {
    max-width: 34ch !important;
    font-size: clamp(.78rem, 2.45vw, .92rem) !important;
    line-height: 1.48 !important;
  }

  /* ----------------------------------------------------------
     2. BOTTOM NAV — the desktop command dock becomes a true
     horizontal thumb-scroll selector on phones.
     ---------------------------------------------------------- */
  .hero-command-dock {
    position: fixed !important;
    left: var(--m-pad) !important;
    right: var(--m-pad) !important;
    bottom: var(--m-safe-bottom) !important;
    width: auto !important;
    height: var(--m-bottom-bar) !important;
    min-height: var(--m-bottom-bar) !important;
    max-height: var(--m-bottom-bar) !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1450 !important;
    overflow: hidden !important;
    border: 1px solid rgba(11,41,71,.16) !important;
    border-radius: 3px !important;
    background: rgba(248,251,253,.97) !important;
    box-shadow: 0 12px 32px rgba(7,25,42,.22) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  }

  .hero-command-label { display: none !important; }

  .hero-command-actions {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity;
  }

  .hero-command-actions::-webkit-scrollbar { display: none !important; }

  .hero-command-item {
    flex: 0 0 clamp(92px, 27vw, 112px) !important;
    min-width: clamp(92px, 27vw, 112px) !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    gap: 3px 7px !important;
    border: 0 !important;
    border-right: 1px solid var(--m-line) !important;
    background: transparent !important;
    color: var(--m-ink) !important;
    text-align: left !important;
    scroll-snap-align: start;
  }

  .hero-command-item:last-child { border-right: 0 !important; }
  .hero-command-item > span {
    grid-row: 1 / span 2;
    align-self: center;
    font-size: .48rem !important;
    color: #1769a8 !important;
  }
  .hero-command-item strong {
    font-size: .61rem !important;
    line-height: 1 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
  }
  .hero-command-item em {
    display: block !important;
    font-size: .42rem !important;
    line-height: 1.15 !important;
    color: #70849a !important;
    font-style: normal !important;
  }
  .hero-command-item.is-primary,
  .hero-command-item.is-current {
    background: var(--m-yellow) !important;
    color: var(--m-ink) !important;
  }
  .hero-command-item.is-primary > span,
  .hero-command-item.is-current > span,
  .hero-command-item.is-primary em,
  .hero-command-item.is-current em { color: var(--m-ink) !important; }

  /* Do not leave the navigation over internal panels. */
  body:has(.panel-shell:not([hidden])) .hero-command-dock,
  body:has(#consultShell:not([hidden])) .hero-command-dock,
  body:has(#modalShell:not([hidden])) .hero-command-dock,
  body:has(#lightbox:not([hidden])) .hero-command-dock {
    display: none !important;
  }

  /* ----------------------------------------------------------
     3. PROJECT ASSIST — compact launcher above the dock;
     the opened experience becomes a phone-first full-screen flow.
     ---------------------------------------------------------- */
  .project-assist-float {
    right: var(--m-pad) !important;
    bottom: calc(var(--m-bottom-bar) + 12px + var(--m-safe-bottom)) !important;
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 8px 11px 8px 8px !important;
    z-index: 1600 !important;
    border-radius: 3px !important;
  }

  .project-assist-float > span:last-child {
    display: inline !important;
    font-size: .54rem !important;
    letter-spacing: .075em !important;
  }

  .project-assist-float-icon {
    width: 29px !important;
    height: 29px !important;
    flex-basis: 29px !important;
  }

  body:has(.panel-shell:not([hidden])) .project-assist-float,
  body:has(#lightbox:not([hidden])) .project-assist-float {
    display: none !important;
  }

  .modal-shell#consultShell {
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
    z-index: 1700 !important;
  }

  .modal-shell#consultShell .modal-consult {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    min-height: 100svh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .modal-shell#consultShell .modal-body.project-assist-body {
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: calc(20px + env(safe-area-inset-top)) var(--m-pad) calc(28px + var(--m-safe-bottom)) !important;
  }

  .project-assist-body .project-assist-progress {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 5px 0 14px;
    margin: -5px 0 15px !important;
    background: linear-gradient(180deg, rgba(11,41,71,1) 0%, rgba(11,41,71,.94) 75%, rgba(11,41,71,0) 100%);
  }

  .consult-step h3,
  .consult-review h3 {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1.08 !important;
  }

  .consult-choice-grid { gap: 10px !important; }
  .choice-button,
  .choice-button span {
    min-height: 60px !important;
  }
  .choice-button span {
    padding: 15px 15px 15px 16px !important;
    font-size: .88rem !important;
  }

  .consult-step-nav { margin-top: 14px !important; }
  .consult-back-btn,
  .consult-back-to-options,
  .project-submit { min-height: 48px !important; }

  /* ----------------------------------------------------------
     4. TEAM — horizontal selector stays horizontal; feature
     portrait becomes a controlled first viewport block.
     ---------------------------------------------------------- */
  .team-showcase { padding: 22px var(--m-pad) 46px !important; }
  .team-roster-head { margin-top: 12px !important; }
  .team-roster.team-roster-horizontal {
    display: flex !important;
    width: calc(100% + var(--m-pad)) !important;
    margin-right: calc(-1 * var(--m-pad));
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain !important;
  }
  .team-roster.team-roster-horizontal::-webkit-scrollbar { display: none !important; }
  .team-roster-horizontal .team-roster-item,
  .team-roster-horizontal .team-roster-item:nth-child(odd),
  .team-roster-horizontal .team-roster-item:nth-child(even) {
    flex: 0 0 184px !important;
    min-width: 184px !important;
    min-height: 78px !important;
    padding: 9px 10px !important;
    scroll-snap-align: start;
  }
  .team-roster-horizontal .team-roster-copy strong { font-size: .67rem !important; }
  .team-roster-horizontal .team-roster-copy small { font-size: .43rem !important; }

  .team-feature.team-feature-compact {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 16px !important;
  }

  .team-feature-compact .team-feature-visual {
    height: clamp(245px, 63vw, 300px) !important;
    min-height: clamp(245px, 63vw, 300px) !important;
  }

  .team-feature-compact .team-feature-copy {
    padding: 22px 18px 26px !important;
  }

  .team-feature-compact .team-feature-copy h3 {
    font-size: clamp(2rem, 10.5vw, 3rem) !important;
  }

  .team-feature-compact .team-feature-desc {
    font-size: .90rem !important;
    line-height: 1.58 !important;
  }

  /* ----------------------------------------------------------
     5. SERVICES / O&M — vertical rhythm, prominent media,
     no unnecessary horizontal compression.
     ---------------------------------------------------------- */
  .ix-command-intro,
  .ix-om-hero,
  .ix-project-intro,
  .ix-dd-hero { display: block !important; }

  .ix-command-intro > p,
  .ix-project-intro > p,
  .ix-dd-hero > p,
  .ix-om-copy > p:not(.ix-kicker) {
    margin-top: 14px !important;
    font-size: .93rem !important;
    line-height: 1.62 !important;
  }

  .ix-service-trigger {
    min-height: 92px !important;
    grid-template-columns: 38px minmax(0,1fr) 26px !important;
    gap: 10px !important;
  }

  .ix-service-copy strong { font-size: .90rem !important; }
  .ix-service-copy small { font-size: .74rem !important; line-height: 1.45 !important; }

  .ix-om-hero { display: grid !important; grid-template-columns: 1fr !important; gap: 22px !important; }
  .ix-om-media,
  .ix-om-media video {
    min-height: 0 !important;
    height: min(64vw, 320px) !important;
    max-height: 320px !important;
  }
  .ix-om-media video { width: 100% !important; object-fit: cover !important; }
  .ix-cycle > div { grid-template-columns: 1fr 1fr !important; }
  .ix-om-item { min-height: 58px !important; }

  /* ----------------------------------------------------------
     6. PROJECTS — filters become a single horizontal scroller;
     cards stack without creating page-wide overflow.
     ---------------------------------------------------------- */
  .ix-projects { padding-left: var(--m-pad) !important; padding-right: var(--m-pad) !important; }

  .ix-project-tools {
    display: block !important;
    overflow: hidden !important;
  }

  .gallery-filters {
    display: flex !important;
    width: calc(100% + var(--m-pad)) !important;
    margin-right: calc(-1 * var(--m-pad));
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 10px 0 12px !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity;
  }
  .gallery-filters::-webkit-scrollbar { display: none !important; }

  .filter-btn {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 10px 13px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  .ix-project-meta {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 10px !important;
    font-size: .48rem !important;
  }

  .ix-project-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .ix-project-grid .g-item,
  .ix-project-grid .g-item:nth-child(1),
  .ix-project-grid .g-item:nth-child(4) {
    grid-column: 1 !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }
  .ix-project-grid .g-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* ----------------------------------------------------------
     7. TYPOGRAPHY — responsive without changing desktop sizes.
     ---------------------------------------------------------- */
  .panel-title { font-size: clamp(1.65rem, 8.2vw, 2.45rem) !important; }
  .ix h3 { font-size: clamp(2.25rem, 12vw, 4rem) !important; }
  .ix-kicker,
  .panel-eyebrow { letter-spacing: .18em !important; }

  /* ----------------------------------------------------------
     8. TOUCH TARGETS — minimum comfortable controls.
     ---------------------------------------------------------- */
  .panel-close,
  .modal-close,
  .nav-toggle,
  .ix-back,
  .choice-button,
  .consult-back-btn,
  .filter-btn,
  .team-roster-item,
  .hero-command-item,
  .project-assist-float {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .panel-close,
  .modal-close,
  .nav-toggle { min-width: 44px !important; min-height: 44px !important; }

  /* ----------------------------------------------------------
     9. IMAGE / VIDEO CROPPING — keep people and field context
     visible rather than using desktop crop assumptions.
     ---------------------------------------------------------- */
  .team-feature-visual.is-photo img { object-fit: cover !important; object-position: center 28% !important; }
  .team-feature-visual.is-cutout img { object-fit: contain !important; object-position: center bottom !important; }
  .ix-about-media img { object-fit: cover !important; object-position: center !important; }
  .ix-om-media video { object-position: center center !important; }

  /* ----------------------------------------------------------
     10. PERFORMANCE / OVERFLOW — avoid expensive effects and
     accidental horizontal layout growth on small screens.
     ---------------------------------------------------------- */
  .hero-command-dock,
  .project-assist-float,
  .panel,
  .modal { contain: layout paint; }

  .menu-layout,
  .panel-body,
  .modal-body,
  .gallery-filters,
  .team-roster-horizontal,
  .hero-command-actions {
    -webkit-overflow-scrolling: touch;
  }

  .hero-video { will-change: auto !important; }
}

@media (max-width: 380px) {
  :root { --m-bottom-bar: 64px; }
  .hero-command-item { flex-basis: 86px !important; min-width: 86px !important; padding-inline: 8px !important; }
  .hero-command-item strong { font-size: .56rem !important; }
  .hero-command-item em { font-size: .38rem !important; }
  .project-assist-float > span:last-child { font-size: .50rem !important; }
  .team-roster-horizontal .team-roster-item { flex-basis: 174px !important; min-width: 174px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-command-actions,
  .team-roster-horizontal,
  .gallery-filters { scroll-behavior: auto !important; scroll-snap-type: none !important; }
}

@media (max-width: 700px) {
  /* On the landing screen Services is the highlighted command; once a
     panel is open, the active/current command becomes the only highlight. */
  .hero-command-item.is-primary { background: transparent !important; }
  body:not(:has(.panel-shell:not([hidden]))) .hero-command-item.is-primary {
    background: var(--m-yellow) !important;
  }
}