/* ============================================================
   Gammatron 2026 - Responsive Stylesheet
   Breakpoints:
     - Large desktop:      >= 1400px
     - Desktop / laptop:   1200px - 1399px
     - iPad landscape:     992px - 1199px
     - iPad portrait:      768px - 991px    (hamburger appears)
     - Mobile large:       576px - 767px
     - Mobile:             < 576px
   ============================================================ */

/* ===== LARGE DESKTOP (>= 1400px) ===== */
@media (min-width: 1400px) {

  .hero__content h1 {
    font-size: 50px;
  }

  .sh {
    font-size: 38px;
  }

  .lifesec__intro h2,
  .test__left h2 {
    font-size: 38px;
  }

  .logo {
    height: 90px;
  }

  .footer__logo {
    height: 100px;
  }
}

/* ===== DESKTOP / LAPTOP (1200px - 1399px) ===== */
@media (max-width: 1399.98px) {
  .hero__content h1 {
    font-size: 42px;
  }

  .acc {
    height: 370px;
    /*height: 480px;*/
  }

  .nav__menu {
    gap: 26px;
    font-size: 15px;
  }

  /* Shrink watermark so GAMMATRON fits within the slice */
  .hero-watermark {
    font-size: 110px;
    letter-spacing: 5px;
  }

  .tc p {
    font-size: 15px;
  }
}

/* ===== IPAD LANDSCAPE (992px - 1199px) ===== */
@media (max-width: 1199.98px) {

  .strip__inner,
  .nav__inner {
    padding-left: 28px;
    padding-right: 28px;
  }

  .logo {
    height: 60px;
  }

  .nav__inner {
    min-height: 80px;
  }

  .nav__menu {
    gap: 22px;
    font-size: 14.5px;
  }

  .hero {
    height: auto;
  }

  .hero__content {
    padding-left: 0;
    max-width: 560px;
  }

  .hero__content h1 {
    font-size: 40px;
  }

  .hero-watermark {
    font-size: 100px;
    letter-spacing: 4px;
  }

  .lifesec {
    padding: 50px 32px;
    gap: 28px;
  }

  .lifesec__intro h2 {
    font-size: 28px;
  }

  .svc,
  .impact,
  .ins {
    padding: 50px 32px;
  }

  .acc {
    height: 440px;
  }

  .apanel__content h4 {
    font-size: 22px;
  }

  .stat {
    min-width: 140px;
    padding: 22px 14px 20px;
  }

  .stat__number {
    font-size: 28px;
  }

  .test {
    padding: 60px 32px;
  }

  .test__band {
    gap: 30px;
  }

  .test__left {
    flex: 0 0 280px;
    max-width: 300px;
  }

  .test__left h2 {
    font-size: 28px;
  }

  .footer {
    padding: 54px 32px 12px;
  }

  .footer__logo {
    height: 92px;
  }

  .footer__tagline {
    font-size: 20px;
  }

  .footer__brand p {
    font-size: 14.5px;
    color: #cadecf;
  }

  .footer__links a {
    font-size: 14.5px;
    color: #dceee2;
  }

  .footer__contact-label {
    color: #b6d1bd;
  }

  .footer__disclaimer {
    font-size: 13px;
    color: #cadecf;
    padding: 18px 0;
    text-align: left;
  }

  .footer__disclaimer b {
    color: var(--gm-atomic);
  }

  .footer__bar {
    font-size: 13px;
    color: #cadecf;
    padding: 15px 0 20px;
  }

  .footer__bar a {
    color: var(--gm-atomic);
  }
}

/* ===== IPAD PORTRAIT (768px - 991px)  --> HAMBURGER ON ===== */
@media (max-width: 991.98px) {
  .strip__inner {
    padding: 0 20px;
    font-size: 11px;
  }

  .strip .tag {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .nav__inner {
    padding: 12px 20px;
    min-height: 74px;
  }

  .logo {
    height: 54px;
  }

  /* Show hamburger, collapse menu into overlay panel */
  .nav__toggle {
    display: inline-flex;
  }

  /* ============================================================
     Mobile hamburger menu - full-screen drawer with accordion
     ============================================================ */
  .nav__menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    background: #fff !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 80px 0 24px;
    margin: 0 !important;
    border: none;
    box-shadow: none;
    transform: translate3d(0, -100%, 0);
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
      visibility 0s linear .35s;
    z-index: 100;
    will-change: transform;
  }

  .nav__menu.is-open {
    transform: translate3d(0, 0, 0);
    /* slide down into view */
    visibility: visible;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
      visibility 0s;
  }

  /* Show the close button on mobile widths only */
  .nav__close {
    display: inline-flex;
  }

  /* Simple text link (Home, About, Documents, Contact). */
  .nav__menu>a {
    display: block;
    width: 100%;
    padding: 16px 22px;
    margin: 0;
    border-bottom: 1px solid #eef2ef;
    font-family: 'Poppins', sans-serif;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.4;
    color: #14201a;
    background: transparent;
    text-decoration: none;
    text-align: left;
    opacity: 1;
    visibility: visible;
  }

  /* Trigger row (Services) - text left, caret right. */
  .nav__menu>.nav__item>.nav__trigger {
    display: flex;
    width: 100%;
    padding: 16px 22px;
    margin: 0;
    border-bottom: 1px solid #eef2ef;
    justify-content: space-between;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.4;
    color: #14201a;
    background: transparent;
    text-decoration: none;
    text-align: left;
    opacity: 1;
    visibility: visible;
    cursor: pointer;
  }

  .nav__menu>a::after,
  .nav__menu>.nav__item>.nav__trigger::after {
    display: none;
  }

  .nav__menu>a:last-child {
    border-bottom: none;
  }

  .nav__menu>a.on {
    color: var(--gm-green);
    font-weight: 700;
  }

  .nav__item {
    display: block;
    width: 100%;
    position: static;
  }

  /* Main-menu items stay visible whether submenu is open or not. */
  .nav__menu>a,
  .nav__menu>.nav__item,
  .nav__menu>.nav__item>.nav__trigger {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto;
  }

  /* Caret rotates to indicate accordion open/closed */
  .nav__caret {
    font-size: 12px;
    color: #8fa39a;
    transform: rotate(0deg);
    transition: transform .3s ease, color .2s ease;
  }

  .nav__item.is-open .nav__caret {
    transform: rotate(180deg);
    color: var(--gm-green);
  }

  .nav__item.is-open>.nav__trigger {
    color: var(--gm-green);
    background: #f6faf7;
  }

  /* ---------- Accordion submenu (expands INLINE below Services) ---------- */
  .nav__submenu {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    height: auto;
    max-height: 0;
    min-width: 0;
    max-width: none;
    background: #f6faf7;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: block;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1),
      padding .3s ease;
    z-index: auto;
    will-change: max-height;
  }

  /* On mobile the .is-open state must beat the desktop rule
     `.nav__item.is-open .nav__submenu { transform: translateX(-50%) translateY(0) }`
     which otherwise shifts the whole submenu 50% left. */
  .nav__item.is-open .nav__submenu {
    max-height: 600px;
    padding: 6px 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    left: auto;
    top: auto;
  }

  .nav__submenu a {
    display: block;
    width: 100%;
    padding: 13px 22px 13px 40px;
    /* left-indent = visual nesting */
    margin: 0;
    border-bottom: 1px solid #e6ece9;
    font-family: 'Poppins', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
    color: #14201a;
    background: transparent;
    text-decoration: none;
    border-radius: 0;
    text-align: left;
    transition: color .2s ease, background .2s ease;
    transform: none;
  }

  .nav__submenu a:hover,
  .nav__submenu a:active {
    background: rgba(23, 138, 55, .08);
    color: var(--gm-green);
    transform: none;
  }

  .nav__submenu a:last-child {
    border-bottom: none;
  }

  /* Back button not needed for the accordion pattern */
  .nav__back {
    display: none !important;
  }

  .hero {
    height: auto;
  }

  .hero__content {
    padding-left: 0;
    padding-right: 0;
  }

  .hero__content h1 {
    font-size: 36px;
  }

  /* Portrait: smaller watermark, moved to the right (X set in main.js TABLET). */
  .hero-watermark {
    font-size: 56px;
    letter-spacing: 3px;
  }

  .lifesec {
    flex-direction: column;
    padding: 48px 24px 56px;
    gap: 36px;
  }

  .sh {
    font-size: 26px;
  }

  .slead {
    font-size: 13.5px;
    margin-bottom: 30px;
  }

  .svc,
  .impact,
  .ins {
    padding: 44px 24px;
  }

  /* Accordion becomes a 2-col grid on tablets */
  .acc {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    height: auto;
  }

  .apanel {
    flex: none;
    height: 200px;
  }

  .apanel.open {
    flex: none;
  }

  .apanel__name {
    writing-mode: horizontal-tb;
    transform: translateX(-50%);
    bottom: 16px;
  }

  .apanel__content {
    left: 18px;
    bottom: 18px;
  }

  /* Grid layout: every service box is shown "active" by default (like Design),
     revealing its content and hiding the collapsed number/name labels. */
  .apanel__content {
    opacity: 1;
  }

  .apanel__name,
  .apanel__num {
    opacity: 0;
  }

  .apanel__content h4 {
    font-size: 20px;
  }

  .igrid {
    justify-content: center;
  }

  .stat {
    flex: 0 0 calc(33.333% - 22px);
    min-width: 0;
  }

  .test {
    padding: 50px 24px;
  }

  .test__band {
    flex-direction: column;
    gap: 28px;
  }

  .test__left {
    flex: none;
    max-width: 100%;
  }

  .test__cards {
    width: 100%;
  }

  .footer {
    padding: 48px 24px 16px;
  }

  .footer__brand,
  .footer__col {
    margin-bottom: 32px;
  }

  .footer__logo {
    height: 82px;
  }

  .footer__tagline {
    color: #fff;
  }

  .footer__brand p {
    color: #cadecf;
  }

  .footer__col h5 {
    color: #fff;
  }

  .footer__links a {
    color: #dceee2;
  }

  .footer__contact-label {
    color: #b6d1bd;
  }

  .footer__contact-value {
    color: #eaf6ec;
  }

  .footer__socials a {
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
  }

  /* Disclaimer + copyright bar always visible with strong contrast */
  .footer__disclaimer {
    display: block !important;
    font-size: 13px !important;
    color: #cadecf !important;
    padding: 20px 0 !important;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .18);
  }

  .footer__disclaimer b {
    color: var(--gm-atomic);
    font-weight: 700;
  }

  .footer__bar {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 16px 0 24px !important;
    font-size: 13px !important;
    color: #cadecf !important;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  .footer__bar a {
    color: var(--gm-atomic);
    font-weight: 700;
  }

  .footer__bar span,
  .footer__disclaimer,
  .footer__disclaimer b {
    display: inline-block;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ===== MOBILE LARGE (576px - 767px) ===== */
@media (max-width: 767.98px) {
  .strip {
    font-size: 10px;
  }

  .strip__inner {
    padding: 0 16px;
    height: 32px;
  }

  .strip .tag {
    display: none;
  }

  .strip .u {
    justify-content: flex-end;
    width: 100%;
  }

  .nav__inner {
    padding: 10px 16px;
  }

  .logo {
    height: 55px;
  }

  /* Restack the hero on mobile: text + buttons on top,
     the atom/GAMMATRON watermark artwork below them,
     domain footer at the very bottom. */
  /* Full-background video hero: layout/scrim/heights handled in styles.css.
     Keep the video backdrop visible and fill the hero. */
  .hero__bg {
    display: block;
  }

  .hero__video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .lifesec {
    padding: 44px 20px 52px;
    gap: 26px;
  }

  .lifesec__intro h2 {
    font-size: 24px;
  }

  .props {
    grid-template-columns: 1fr;
  }

  .svc,
  .impact,
  .ins {
    padding: 40px 20px;
  }

  .sh {
    font-size: 22px;
  }

  .acc {
    grid-template-columns: 1fr;
  }

  .apanel {
    height: 180px;
  }

  .stat {
    flex: 0 0 calc(50% - 11px);
  }

  .stat__number {
    font-size: 26px;
  }

  .test {
    padding: 40px 20px;
  }

  .test__left h2 {
    font-size: 24px;
  }

  .test__arrow {
    width: 46px;
    height: 46px;
    font-size: 16px;
  }

  .footer {
    padding: 40px 20px 16px;
  }

  .footer__logo {
    height: 72px;
  }

  .footer__tagline {
    font-size: 18px;
  }

  .footer__brand p {
    font-size: 14px;
    color: #cadecf;
  }

  .footer__col h5 {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .footer__links a {
    font-size: 14.5px;
    margin-bottom: 12px;
    color: #dceee2;
  }

  .footer__contact-value {
    font-size: 14px;
    color: #eaf6ec;
  }

  .footer__contact-label {
    color: #b6d1bd;
  }
}

/* ===== MOBILE (< 576px) ===== */
@media (max-width: 575.98px) {
  .hero {
    height: auto;
    min-height: 380px;
  }

  /* preserve the flex-column stack */
  .hero__content h1 {
    font-size: 24px;
  }

  .hero__btns {
    gap: 10px;
  }

  .hero__btns .exp-btn {
    min-width: 140px;
    padding: 10px 20px;
    font-size: 12.5px;
  }

  .hero__btns .exp-btn--ghost {
    padding-left: 6px;
  }



  .stat {
    flex: 0 0 100%;
  }

  .test__arrow {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }

  .footer__bar {
    font-size: 12px;
  }

  .video-modal .modal-dialog {
    padding: 10px;
  }
}

/* ===== IPAD LANDSCAPE (Mini / Air / Pro) =====
   Shrinks the GAMMATRON hero watermark so it sits cleanly in the
   right-side gap. The ring position + watermark X are handled in
   assets/js/main.js (IPAD_LS config). */
@media (min-width: 992px) and (max-width: 1366px) {
  .hero-watermark {
    font-size: 55px;
    letter-spacing: 4px;
  }
}


/* =========================================================================
   ABOUT US PAGE — RESPONSIVE
   Columns use Bootstrap grid (row-cols-*); these rules tune the hero,
   headings and the orbit graphic across laptop, iPad and mobile.
   ========================================================================= */

/* iPad landscape and smaller laptops (<= 1199.98px) */
@media (max-width: 1199.98px) {
  .hero-about { height: 440px; }
  .hero-about .in { left: 40px; top: 80px; max-width: 560px; }
  .hero-about h1 { font-size: 52px; }
  /* Keep sections aligned with the footer content (footer sides = 32px here) */
  .about-page .caps,
  .about-page .vsec,
  .about-page .indsec { padding-left: 32px; padding-right: 32px; }
}

/* iPad portrait (<= 991.98px) */
@media (max-width: 991.98px) {
  .hero-about { height: 420px; }
  .hero-about .in { left: 32px; right: 24px; top: 70px; }
  .hero-about h1 { font-size: 44px; }
  .hero-about .tag { font-size: 17px; }
  .about-page .h2c { font-size: 30px; }
  .about-page .nucleus { width: 42vw; height: 27vw; }
  .about-page .nucleus .nt { font-size: 21px; }
  .about-page .eglow { width: 460px; height: 320px; }
  /* Footer sides = 24px here */
  .about-page .caps,
  .about-page .vsec,
  .about-page .indsec { padding-left: 24px; padding-right: 24px; }
}

/* Mobile large / small tablets (<= 767.98px) — hero content flows in-line */
@media (max-width: 767.98px) {
  .hero-about { height: auto; min-height: 340px; }
  .hero-about .scrim { background: linear-gradient(180deg, rgba(3, 10, 6, .5) 0%, rgba(3, 10, 6, .82) 100%); }
  .hero-about .in { position: relative; left: auto; right: auto; top: auto; max-width: none; padding: 54px 22px; }
  .hero-about h1 { font-size: 34px; }
  .hero-about .tag { font-size: 16px; }
  .hero-about p { font-size: 15px; }
  .about-page .feature .txt { padding: 26px 24px; }
  .about-page .h2c { font-size: 27px; margin-bottom: 22px; }
  .about-page .orbitline .olh { padding: 0 20px; }
  .about-page .nucleus { width: 46vw; height: 29vw; }
  .about-page .nucleus .ny { font-size: 11px; }
  .about-page .nucleus .nt { font-size: 17px; }
  .about-page .nucleus .nd { font-size: 11px; line-height: 1.5; }
  .about-page .eglow { width: 360px; height: 260px; }
  /* Orbit shrinks with the SVG at this width; enlarge nodes so they stay visible.
     CSS `r` overrides the r set by pick() in JS, so the active state needs its own larger r. */
  .about-page .mnode .ball { r: 18px; }
  .about-page .mnode.on .ball { r: 24px; }
  .about-page .mnode .halo { r: 40px; }
  .about-page .mnode .yl { font-size: 26px; }
  .about-page .mnode .bsh { rx: 11px; ry: 8.5px; }
}

/* Mobile (<= 575.98px) */
@media (max-width: 575.98px) {
  .hero-about { min-height: 300px; }
  .hero-about .in { padding: 44px 18px; }
  .hero-about h1 { font-size: 28px; }
  .hero-about .bc { font-size: 11px; }
  .about-page .h2c { font-size: 24px; }
  /* Footer sides = 20px here */
  .about-page .caps,
  .about-page .vsec,
  .about-page .indsec { padding-left: 20px; padding-right: 20px; }
  .about-page .feature .txt { padding: 22px 20px; }
  .about-page .feature h3 { font-size: 23px; }
  .about-page .nucleus { width: 60vw; height: 33vw; }
  .about-page .nucleus .nt { font-size: 15px; }
  .about-page .nucleus .nd { font-size: 10px; line-height: 1.45; }
  .about-page .eglow { width: 300px; height: 230px; }
  /* At ~360px the SVG scales to ~0.31; push node/label size further so they read clearly.
     Active state gets a larger r since CSS `r` overrides the value pick() sets in JS. */
  .about-page .mnode .ball { r: 24px; }
  .about-page .mnode.on .ball { r: 32px; }
  .about-page .mnode .halo { r: 48px; }
  .about-page .mnode .yl { font-size: 27px; }
  .about-page .mnode .bsh { rx: 14px; ry: 11px; }
}


/* =========================================================================
   DOCUMENTS PAGE — RESPONSIVE (laptop / iPad landscape / iPad portrait / mobile)
   ========================================================================= */

/* iPad landscape and smaller laptops (<= 1199.98px) */
@media (max-width: 1199.98px) {
  .hero-docs .in { left: 40px; }
  .hero-docs h1 { font-size: 44px; }
  .hero-docs .wm { font-size: 120px; }
  .docs-page .docwrap { padding: 16px 32px 40px; }
}

/* iPad portrait (<= 991.98px) */
@media (max-width: 991.98px) {
  .hero-docs { height: 260px; }
  .hero-docs .in { left: 32px; right: 24px; top: 62px; }
  .hero-docs h1 { font-size: 40px; }
  .hero-docs .tag { font-size: 17px; }
  .hero-docs .wm { font-size: 100px; }
  .docs-page .docwrap { padding: 12px 24px 36px; }
}

/* Mobile large / small tablets (<= 767.98px) — hero content flows in-line */
@media (max-width: 767.98px) {
  .hero-docs { height: auto; min-height: 210px; }
  .hero-docs .scrim { background: linear-gradient(180deg, rgba(3, 10, 6, .5) 0%, rgba(3, 10, 6, .82) 100%); }
  .hero-docs .in { position: relative; left: auto; right: auto; top: auto; max-width: none; padding: 46px 22px; }
  .hero-docs h1 { font-size: 32px; }
  .hero-docs .tag { font-size: 15px; }
  .hero-docs .wm { font-size: 80px; bottom: -14px; }
  .docs-page .dsh h2 { font-size: 20px; }
  .docs-page .cta { padding: 44px 22px; }
}

/* Mobile (<= 575.98px) */
@media (max-width: 575.98px) {
  .hero-docs .in { padding: 40px 18px; }
  .hero-docs h1 { font-size: 27px; }
  .hero-docs .bc { font-size: 11px; }
  .hero-docs .wm { font-size: 64px; }
  .docs-page .docwrap { padding: 8px 16px 30px; }
  .docs-page .dcard { flex-wrap: wrap; }
  .docs-page .dcard .di { flex: 1 1 60%; }
  .docs-page .dcard .dl { margin-left: 62px; }
}


/* =========================================================================
   CONTACT PAGE — RESPONSIVE (laptop / iPad landscape / iPad portrait / mobile)
   Columns use Bootstrap grid; these tune the hero, padding and the map.
   ========================================================================= */

/* iPad landscape and smaller laptops (<= 1199.98px) */
@media (max-width: 1199.98px) {
  .hero-contact .in { left: 40px; }
  .hero-contact h1 { font-size: 44px; }
  .hero-contact .wm { font-size: 120px; }
  .contact-page .contact { padding: 44px 32px 52px; }
  .contact-page .mapsec { padding: 0 32px 48px; }
}

/* iPad portrait (<= 991.98px) */
@media (max-width: 991.98px) {
  .hero-contact { height: 260px; }
  .hero-contact .in { left: 32px; right: 24px; top: 62px; }
  .hero-contact h1 { font-size: 40px; }
  .hero-contact .tag { font-size: 17px; }
  .hero-contact .wm { font-size: 100px; }
  .contact-page .contact { padding: 40px 24px 46px; }
  .contact-page .mapsec { padding: 0 24px 44px; }
  .contact-page .cform { padding: 30px 28px; }
}

/* Mobile large / small tablets (<= 767.98px) — hero content flows in-line */
@media (max-width: 767.98px) {
  .hero-contact { height: auto; min-height: 210px; }
  .hero-contact .scrim { background: linear-gradient(180deg, rgba(3, 10, 6, .5) 0%, rgba(3, 10, 6, .82) 100%); }
  .hero-contact .in { position: relative; left: auto; right: auto; top: auto; max-width: none; padding: 46px 22px; }
  .hero-contact h1 { font-size: 32px; }
  .hero-contact .tag { font-size: 15px; }
  .hero-contact .wm { font-size: 80px; bottom: -14px; }
  .contact-page .maphd { flex-direction: column; align-items: flex-start; }
  .contact-page .maphd .mb { width: 100%; }
  .contact-page .mapph { height: 260px; }
}

/* Mobile (<= 575.98px) */
@media (max-width: 575.98px) {
  .hero-contact .in { padding: 40px 18px; }
  .hero-contact h1 { font-size: 27px; }
  .hero-contact .bc { font-size: 11px; }
  .hero-contact .wm { font-size: 64px; }
  .contact-page .contact { padding: 32px 16px 40px; }
  .contact-page .mapsec { padding: 0 16px 36px; }
  .contact-page .cform { padding: 24px 20px; }
  .contact-page .cform .send { width: 100%; justify-content: center; }
  .contact-page .mbtn { flex: 1; justify-content: center; }
}

/* =========================================================================
   SERVICE PAGES — shared .caps side-padding steps so the featured band stays
   aligned with the footer content (which steps 56 -> 32 -> 24 -> 20px). The
   .caps top/bottom padding is unchanged; only the horizontal gutters track
   the footer at each breakpoint.
   ========================================================================= */
@media (max-width: 1199.98px) {
  .design-page .caps,
  .mfg-page .caps,
  .storage-page .caps,
  .logistics-page .caps,
  .encapsulation-page .caps,
  .recycling-page .caps,
  .dsp-page .caps,
  .leak-testing-page .caps { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 991.98px) {
  .design-page .caps,
  .mfg-page .caps,
  .storage-page .caps,
  .logistics-page .caps,
  .encapsulation-page .caps,
  .recycling-page .caps,
  .dsp-page .caps,
  .leak-testing-page .caps { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 767.98px) {
  .design-page .caps,
  .mfg-page .caps,
  .storage-page .caps,
  .logistics-page .caps,
  .encapsulation-page .caps,
  .recycling-page .caps,
  .dsp-page .caps,
  .leak-testing-page .caps { padding: 44px 22px; }
  .design-page .feature .txt,
  .mfg-page .feature .txt,
  .storage-page .feature .txt,
  .logistics-page .feature .txt,
  .encapsulation-page .feature .txt,
  .recycling-page .feature .txt,
  .dsp-page .feature .txt,
  .leak-testing-page .feature .txt { padding: 26px 24px; }
}
@media (max-width: 575.98px) {
  .design-page .caps,
  .mfg-page .caps,
  .storage-page .caps,
  .logistics-page .caps,
  .encapsulation-page .caps,
  .recycling-page .caps,
  .dsp-page .caps,
  .leak-testing-page .caps { padding-left: 20px; padding-right: 20px; }
  .design-page .feature h3,
  .mfg-page .feature h3,
  .storage-page .feature h3,
  .logistics-page .feature h3,
  .encapsulation-page .feature h3,
  .recycling-page .feature h3,
  .dsp-page .feature h3,
  .leak-testing-page .feature h3 { font-size: 23px; }
}

/* =========================================================================
   DESIGN PAGE — responsive rules limited to the three new structures:
   the Approach row (.appr), the Chips row (.also/.chips), and the Orbit grid.
   Laptop (>= 1200px) uses the base styles.css layout (3 columns, 56px sides).
   ========================================================================= */

/* iPad landscape and smaller laptops (<= 1199.98px) */
@media (max-width: 1199.98px) {
  /* Keep the Approach row aligned with the footer content (sides = 32px here) */
  .design-page .appr { padding-left: 32px; padding-right: 32px; }
  .design-page .orbit .txt { left: 40px; top: 72px; max-width: 380px; }
}

/* iPad portrait (<= 991.98px) — 3 columns still fit; overlay gets a scrim */
@media (max-width: 991.98px) {
  .design-page .appr { padding-left: 24px; padding-right: 24px; }
  /* Darker scrim behind the overlay so text stays legible over the shrunken SVG */
  .design-page .orbit .orbit-embed:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3, 10, 6, .72) 0%, rgba(3, 10, 6, .3) 68%, rgba(3, 10, 6, 0) 100%);
  }
  .design-page .orbit .txt { left: 32px; right: 24px; top: 40px; max-width: none; }
  .design-page .orbit .txt h3 { font-size: 24px; }
  .design-page .chips { gap: 8px; }
}

/* Mobile large / small tablets (<= 767.98px) — Approach stacks to a single
   column (Bootstrap col-12); orbit text flows below the full-width SVG. */
@media (max-width: 767.98px) {
  .design-page .appr { padding: 40px 22px; }
  /* Scrim not needed once the text is stacked below on the dark background */
  .design-page .orbit .orbit-embed:before { display: none; }
  .design-page .orbit .txt {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    max-width: none;
    padding: 20px 22px 30px;
  }
  .design-page .orbit .txt h3 { font-size: 22px; }
  .design-page .orbit .txt p { font-size: 14px; }
  .design-page .also { font-size: 14px; }
}

/* Mobile (<= 575.98px) */
@media (max-width: 575.98px) {
  .design-page .appr { padding: 32px 20px; }
  .design-page .orbit .txt { padding: 16px 20px 26px; }
  .design-page .orbit .txt h3 { font-size: 20px; }
  .design-page .chip { font-size: 12.5px; padding: 7px 13px; }
}

/* =========================================================================
   MANUFACTURING PAGE — responsive rules limited to the new structures
   (the flip-card process grid .pwrap/.flip and the record stats band .stats)
   plus the reused Orbit grid. Laptop (>= 1200px) uses the styles.css layout
   (3-column process grid, 56px sides).
   ========================================================================= */

/* iPad landscape and smaller laptops (<= 1199.98px) */
@media (max-width: 1199.98px) {
  /* Keep sections aligned with the footer content (sides = 32px here) */
  .mfg-page .pwrap { padding-left: 32px; padding-right: 32px; }
  .mfg-page .orbit .txt { left: 40px; top: 72px; max-width: 380px; }
}

/* iPad portrait (<= 991.98px) — process grid drops to 2 columns (Bootstrap
   row-cols-md-2); orbit overlay gets a scrim for legibility. */
@media (max-width: 991.98px) {
  .mfg-page .pwrap { padding-left: 24px; padding-right: 24px; }
  .mfg-page .stats { gap: 32px 44px; padding: 44px 24px; }
  .mfg-page .stats .lead { max-width: none; width: 100%; text-align: center; }
  .mfg-page .orbit .orbit-embed:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3, 10, 6, .72) 0%, rgba(3, 10, 6, .3) 68%, rgba(3, 10, 6, 0) 100%);
  }
  .mfg-page .orbit .txt { left: 32px; right: 24px; top: 40px; max-width: none; }
  .mfg-page .orbit .txt h3 { font-size: 24px; }
  .mfg-page .chips { gap: 8px; }
}

/* Mobile large / small tablets (<= 767.98px) — process grid stacks to a
   single column (Bootstrap row-cols-1); orbit text flows below the SVG. */
@media (max-width: 767.98px) {
  .mfg-page .pwrap { padding: 40px 22px; }
  .mfg-page .pwrap .head { font-size: 28px; }
  .mfg-page .stats { flex-direction: column; gap: 26px; padding: 40px 22px; }
  .mfg-page .stats .dot { transform: rotate(90deg); height: 46px; }
  .mfg-page .orbit .orbit-embed:before { display: none; }
  .mfg-page .orbit .txt {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    max-width: none;
    padding: 20px 22px 30px;
  }
  .mfg-page .orbit .txt h3 { font-size: 22px; }
  .mfg-page .orbit .txt p { font-size: 14px; }
  .mfg-page .also { font-size: 14px; }
  /* Mobile: no flip. Show the front image (with the number) and overlay the
     label, title, and description on the lower part of the image; hide the
     hover hint. */
  .mfg-page .pwrap .subhead { display: none; }
  .mfg-page .flip { height: 320px; perspective: none; }
  .mfg-page .flip__inner { transform: none !important; transition: none; -webkit-transform-style: flat; transform-style: flat; }
  .mfg-page .flip__face { -webkit-backface-visibility: visible; backface-visibility: visible; }
  .mfg-page .flip__front { opacity: 1 !important; }
  .mfg-page .flip__front .foot { display: none; }
  .mfg-page .flip__back { transform: none; background: none; border: none; box-shadow: none; justify-content: flex-end; padding: 20px 18px; }
  .mfg-page .flip__back .big { display: none; }
  .mfg-page .flip__back .k { color: #8dff6f; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }
  .mfg-page .flip__back h4 { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
  .mfg-page .flip__back p { color: #eaf7ec; font-size: 12px; text-shadow: 0 1px 8px rgba(0, 0, 0, .85); }
}

/* Mobile (<= 575.98px) */
@media (max-width: 575.98px) {
  .mfg-page .pwrap { padding: 32px 20px; }
  .mfg-page .stats .s .n { font-size: 54px; }
  .mfg-page .orbit .txt { padding: 16px 20px 26px; }
  .mfg-page .orbit .txt h3 { font-size: 20px; }
  .mfg-page .chip { font-size: 12.5px; padding: 7px 13px; }
}

/* =========================================================================
   STORAGE PAGE — responsive rules limited to the new structure (the
   full-width parallax image band .imgband) plus the reused Approach row
   and Orbit grid. Laptop (>= 1200px) uses the styles.css layout.
   ========================================================================= */

/* iPad landscape and smaller laptops (<= 1199.98px) */
@media (max-width: 1199.98px) {
  .storage-page .appr { padding-left: 32px; padding-right: 32px; }
  .storage-page .imgband .cap { padding-left: 40px; padding-right: 40px; }
  .storage-page .orbit .txt { left: 40px; top: 72px; max-width: 380px; }
}

/* iPad portrait (<= 991.98px) — orbit overlay gets a scrim for legibility */
@media (max-width: 991.98px) {
  .storage-page .appr { padding-left: 24px; padding-right: 24px; }
  .storage-page .imgband { min-height: 320px; }
  .storage-page .imgband .cap h3 { font-size: 25px; }
  .storage-page .orbit .orbit-embed:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3, 10, 6, .72) 0%, rgba(3, 10, 6, .3) 68%, rgba(3, 10, 6, 0) 100%);
  }
  .storage-page .orbit .txt { left: 32px; right: 24px; top: 40px; max-width: none; }
  .storage-page .orbit .txt h3 { font-size: 24px; }
  .storage-page .chips { gap: 8px; }
}

/* Mobile large / small tablets (<= 767.98px) — Approach stacks (col-12);
   orbit text flows below the SVG. iOS ignores fixed attachment, so the
   parallax degrades gracefully to a standard cover background. */
@media (max-width: 767.98px) {
  .storage-page .appr { padding: 40px 22px; }
  .storage-page .imgband { min-height: 280px; }
  .storage-page .imgband .bg { background-attachment: scroll; }
  .storage-page .imgband .cap { padding: 48px 22px; }
  .storage-page .imgband .cap h3 { font-size: 22px; }
  .storage-page .orbit .orbit-embed:before { display: none; }
  .storage-page .orbit .txt {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    max-width: none;
    padding: 20px 22px 30px;
  }
  .storage-page .orbit .txt h3 { font-size: 22px; }
  .storage-page .orbit .txt p { font-size: 14px; }
  .storage-page .also { font-size: 14px; }
}

/* Mobile (<= 575.98px) */
@media (max-width: 575.98px) {
  .storage-page .appr { padding: 32px 20px; }
  .storage-page .imgband .cap h3 { font-size: 20px; }
  .storage-page .orbit .txt { padding: 16px 20px 26px; }
  .storage-page .orbit .txt h3 { font-size: 20px; }
  .storage-page .chip { font-size: 12.5px; padding: 7px 13px; }
}

/* =========================================================================
   LOGISTICS PAGE — no new structures; responsive rules cover the reused
   Approach row and Orbit grid (same behavior as the other service pages).
   Laptop (>= 1200px) uses the styles.css layout.
   ========================================================================= */

/* iPad landscape and smaller laptops (<= 1199.98px) */
@media (max-width: 1199.98px) {
  .logistics-page .appr { padding-left: 32px; padding-right: 32px; }
  .logistics-page .orbit .txt { left: 40px; top: 72px; max-width: 380px; }
}

/* iPad portrait (<= 991.98px) — orbit overlay gets a scrim for legibility */
@media (max-width: 991.98px) {
  .logistics-page .appr { padding-left: 24px; padding-right: 24px; }
  .logistics-page .orbit .orbit-embed:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3, 10, 6, .72) 0%, rgba(3, 10, 6, .3) 68%, rgba(3, 10, 6, 0) 100%);
  }
  .logistics-page .orbit .txt { left: 32px; right: 24px; top: 40px; max-width: none; }
  .logistics-page .orbit .txt h3 { font-size: 24px; }
  .logistics-page .chips { gap: 8px; }
}

/* Mobile large / small tablets (<= 767.98px) — Approach stacks (col-12);
   orbit text flows below the SVG. */
@media (max-width: 767.98px) {
  .logistics-page .appr { padding: 40px 22px; }
  .logistics-page .orbit .orbit-embed:before { display: none; }
  .logistics-page .orbit .txt {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    max-width: none;
    padding: 20px 22px 30px;
  }
  .logistics-page .orbit .txt h3 { font-size: 22px; }
  .logistics-page .orbit .txt p { font-size: 14px; }
  .logistics-page .also { font-size: 14px; }
}

/* Mobile (<= 575.98px) */
@media (max-width: 575.98px) {
  .logistics-page .appr { padding: 32px 20px; }
  .logistics-page .orbit .txt { padding: 16px 20px 26px; }
  .logistics-page .orbit .txt h3 { font-size: 20px; }
  .logistics-page .chip { font-size: 12.5px; padding: 7px 13px; }
}

/* =========================================================================
   ENCAPSULATION PAGE — no new structures; responsive rules cover the reused
   Approach row, the metrics band (.rband), and the Orbit grid (same behavior
   as the other service pages). Laptop (>= 1200px) uses the styles.css layout.
   ========================================================================= */

/* iPad landscape and smaller laptops (<= 1199.98px) */
@media (max-width: 1199.98px) {
  .encapsulation-page .appr { padding-left: 32px; padding-right: 32px; }
  .encapsulation-page .rband { gap: 14px 40px; padding-left: 32px; padding-right: 32px; }
  .encapsulation-page .orbit .txt { left: 40px; top: 72px; max-width: 380px; }
}

/* iPad portrait (<= 991.98px) — orbit overlay gets a scrim for legibility */
@media (max-width: 991.98px) {
  .encapsulation-page .appr { padding-left: 24px; padding-right: 24px; }
  .encapsulation-page .rband { gap: 18px 32px; padding: 40px 24px; }
  .encapsulation-page .orbit .orbit-embed:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3, 10, 6, .72) 0%, rgba(3, 10, 6, .3) 68%, rgba(3, 10, 6, 0) 100%);
  }
  .encapsulation-page .orbit .txt { left: 32px; right: 24px; top: 40px; max-width: none; }
  .encapsulation-page .orbit .txt h3 { font-size: 24px; }
  .encapsulation-page .chips { gap: 8px; }
}

/* Mobile large / small tablets (<= 767.98px) — Approach stacks (col-12);
   metrics band stacks its dots; orbit text flows below the SVG. */
@media (max-width: 767.98px) {
  .encapsulation-page .appr { padding: 40px 22px; }
  .encapsulation-page .rband { flex-direction: column; gap: 22px; padding: 36px 22px; }
  .encapsulation-page .rband .dot { transform: rotate(90deg); height: 46px; }
  .encapsulation-page .orbit .orbit-embed:before { display: none; }
  .encapsulation-page .orbit .txt {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    max-width: none;
    padding: 20px 22px 30px;
  }
  .encapsulation-page .orbit .txt h3 { font-size: 22px; }
  .encapsulation-page .orbit .txt p { font-size: 14px; }
  .encapsulation-page .also { font-size: 14px; }
}

/* Mobile (<= 575.98px) */
@media (max-width: 575.98px) {
  .encapsulation-page .appr { padding: 32px 20px; }
  .encapsulation-page .rband .st .n { font-size: 44px; }
  .encapsulation-page .orbit .txt { padding: 16px 20px 26px; }
  .encapsulation-page .orbit .txt h3 { font-size: 20px; }
  .encapsulation-page .chip { font-size: 12.5px; padding: 7px 13px; }
}

/* =========================================================================
   RECYCLING PAGE — no new structures; responsive rules cover the reused
   Approach row, the metrics band (.rband), and the Orbit grid (same behavior
   as the other service pages). The infographic (.infowrap img) scales
   fluidly on its own. Laptop (>= 1200px) uses the styles.css layout.
   ========================================================================= */

/* iPad landscape and smaller laptops (<= 1199.98px) */
@media (max-width: 1199.98px) {
  .recycling-page .appr { padding-left: 32px; padding-right: 32px; }
  .recycling-page .rband { gap: 14px 40px; padding-left: 32px; padding-right: 32px; }
  .recycling-page .orbit .txt { left: 40px; top: 72px; max-width: 380px; }
}

/* iPad portrait (<= 991.98px) — orbit overlay gets a scrim for legibility */
@media (max-width: 991.98px) {
  .recycling-page .appr { padding-left: 24px; padding-right: 24px; }
  .recycling-page .rband { gap: 18px 32px; padding: 40px 24px; }
  .recycling-page .orbit .orbit-embed:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3, 10, 6, .72) 0%, rgba(3, 10, 6, .3) 68%, rgba(3, 10, 6, 0) 100%);
  }
  .recycling-page .orbit .txt { left: 32px; right: 24px; top: 40px; max-width: none; }
  .recycling-page .orbit .txt h3 { font-size: 24px; }
  .recycling-page .chips { gap: 8px; }
}

/* Mobile large / small tablets (<= 767.98px) — Approach stacks (col-12);
   metrics band stacks its dots; orbit text flows below the SVG. */
@media (max-width: 767.98px) {
  .recycling-page .appr { padding: 40px 22px; }
  .recycling-page .rband { flex-direction: column; gap: 22px; padding: 36px 22px; }
  .recycling-page .rband .dot { transform: rotate(90deg); height: 46px; }
  .recycling-page .orbit .orbit-embed:before { display: none; }
  .recycling-page .orbit .txt {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    max-width: none;
    padding: 20px 22px 30px;
  }
  .recycling-page .orbit .txt h3 { font-size: 22px; }
  .recycling-page .orbit .txt p { font-size: 14px; }
  .recycling-page .also { font-size: 14px; }
}

/* Mobile (<= 575.98px) */
@media (max-width: 575.98px) {
  .recycling-page .appr { padding: 32px 20px; }
  .recycling-page .rband .st .n { font-size: 44px; }
  .recycling-page .orbit .txt { padding: 16px 20px 26px; }
  .recycling-page .orbit .txt h3 { font-size: 20px; }
  .recycling-page .chip { font-size: 12.5px; padding: 7px 13px; }
}

/* =========================================================================
   DISUSED SOURCE PROCESSING PAGE — no new component styles; responsive rules
   cover the reused Process timeline (.proc), the metrics band (.rband), and
   the Orbit grid. Laptop (>= 1200px) uses the styles.css layout (6-step row).
   ========================================================================= */

/* iPad landscape and smaller laptops (<= 1199.98px) */
@media (max-width: 1199.98px) {
  .dsp-page .proc { padding-left: 32px; padding-right: 32px; }
  .dsp-page .rband { gap: 14px 40px; padding-left: 32px; padding-right: 32px; }
  .dsp-page .orbit .txt { left: 40px; top: 72px; max-width: 380px; }
}

/* iPad portrait (<= 991.98px) — the 6-step timeline wraps to a 3-column grid;
   the horizontal connector line is dropped once steps wrap. */
@media (max-width: 991.98px) {
  .dsp-page .proc { padding-left: 24px; padding-right: 24px; }
  .dsp-page .proc .track { flex-wrap: wrap; justify-content: center; gap: 32px 4%; margin-top: 24px; }
  .dsp-page .proc .track:before { display: none; }
  .dsp-page .proc .step { width: 30%; }
  .dsp-page .rband { gap: 18px 32px; padding: 40px 24px; }
  .dsp-page .orbit .orbit-embed:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3, 10, 6, .72) 0%, rgba(3, 10, 6, .3) 68%, rgba(3, 10, 6, 0) 100%);
  }
  .dsp-page .orbit .txt { left: 32px; right: 24px; top: 40px; max-width: none; }
  .dsp-page .orbit .txt h3 { font-size: 24px; }
  .dsp-page .chips { gap: 8px; }
}

/* Mobile large / small tablets (<= 767.98px) — timeline drops to 2 columns;
   metrics band stacks its dots; orbit text flows below the SVG. */
@media (max-width: 767.98px) {
  .dsp-page .proc { padding: 40px 22px; }
  .dsp-page .proc .track { gap: 28px 6%; }
  .dsp-page .proc .step { width: 47%; }
  .dsp-page .rband { flex-direction: column; gap: 22px; padding: 36px 22px; }
  .dsp-page .rband .dot { transform: rotate(90deg); height: 46px; }
  .dsp-page .orbit .orbit-embed:before { display: none; }
  .dsp-page .orbit .txt {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    max-width: none;
    padding: 20px 22px 30px;
  }
  .dsp-page .orbit .txt h3 { font-size: 22px; }
  .dsp-page .orbit .txt p { font-size: 14px; }
  .dsp-page .also { font-size: 14px; }
}

/* Mobile (<= 575.98px) — timeline single column */
@media (max-width: 575.98px) {
  .dsp-page .proc { padding: 32px 20px; }
  .dsp-page .proc .step { width: 100%; }
  .dsp-page .rband .st .n { font-size: 40px; }
  .dsp-page .orbit .txt { padding: 16px 20px 26px; }
  .dsp-page .orbit .txt h3 { font-size: 20px; }
  .dsp-page .chip { font-size: 12.5px; padding: 7px 13px; }
}

/* =========================================================================
   LEAK TEST ORDER PAGE — responsive rules for the new order-form structures.
   The form/summary columns stack automatically via Bootstrap col-lg-*; these
   rules adjust padding, unstick the summary, and stack rows on smaller screens.
   ========================================================================= */

/* iPad landscape and smaller laptops (<= 1199.98px) */
@media (max-width: 1199.98px) {
  .leak-order-page .order { padding: 40px 32px 52px; }
  .leak-order-page .postband { padding: 40px 32px 48px; }
}

/* iPad portrait (<= 991.98px) — columns stack; summary no longer sticky */
@media (max-width: 991.98px) {
  .leak-order-page .order { padding: 36px 24px 48px; }
  .leak-order-page .sumcol { position: static; top: auto; }
  .leak-order-page .postband { padding: 36px 24px 44px; }
}

/* Mobile large / small tablets (<= 767.98px) — stack field rows + instr call */
@media (max-width: 767.98px) {
  .leak-order-page .order { padding: 28px 20px 40px; }
  .leak-order-page .row2,
  .leak-order-page .row3 { flex-direction: column; gap: 0; }
  .leak-order-page .kitline { flex-wrap: wrap; }
  .leak-order-page .kitline__body { flex: 1 1 100%; order: 3; }
  .leak-order-page .instrcall { flex-direction: column; align-items: flex-start; gap: 16px; }
  .leak-order-page .postband { padding: 28px 20px 40px; }
}

/* Mobile (<= 575.98px) */
@media (max-width: 575.98px) {
  .leak-order-page .seg { display: flex; width: 100%; }
  .leak-order-page .seg label { flex: 1; text-align: center; padding: 10px 12px; }
  .leak-order-page .fsec { padding: 20px 18px; }
}

/* =========================================================================
   LEAK TEST INSTRUCTIONS PAGE — reused hero/cta plus the new intro, guide,
   safety callout, and parallax band. iOS ignores fixed attachment, so the
   band degrades to a standard scroll background on mobile.
   ========================================================================= */
@media (max-width: 1199.98px) {
  .leak-instr-page .intro { padding-left: 32px; padding-right: 32px; }
  .leak-instr-page .guide { padding-left: 40px; padding-right: 40px; }
  .leak-instr-page .safety { margin-left: 40px; margin-right: 40px; }
  .leak-instr-page .rband2 .in { max-width: 560px; }
}
@media (max-width: 991.98px) {
  .leak-instr-page .intro { padding-left: 24px; padding-right: 24px; }
  .leak-instr-page .intro h2 { font-size: 27px; }
  .leak-instr-page .rband2 { min-height: 300px; }
  .leak-instr-page .rband2 .ov { background: linear-gradient(90deg, rgba(3, 12, 6, .92) 0%, rgba(3, 12, 6, .74) 60%, rgba(3, 12, 6, .5) 100%); }
}
@media (max-width: 767.98px) {
  .leak-instr-page .intro { padding: 40px 22px 6px; }
  .leak-instr-page .guide { padding: 20px 22px 6px; }
  .leak-instr-page .safety { margin-left: 22px; margin-right: 22px; }
  .leak-instr-page .gstep { gap: 16px; }
  .leak-instr-page .gstep .gn { width: 48px; height: 48px; font-size: 18px; }
  .leak-instr-page .gstep:not(:last-child):before { left: 24px; top: 52px; }
  .leak-instr-page .gstep .gc h4 { font-size: 18px; }
  /* iOS/mobile ignore fixed attachment — fall back to scroll */
  .leak-instr-page .rband2 .bg { background-attachment: scroll; }
  .leak-instr-page .rband2 .in { padding: 40px 22px; max-width: none; }
  .leak-instr-page .rband2 .in h3 { font-size: 25px; }
}
@media (max-width: 575.98px) {
  .leak-instr-page .intro h2 { font-size: 24px; }
  .leak-instr-page .rband2 .in h3 { font-size: 22px; }
  /* Hero buttons: shrink and keep both on a single row */
  .leak-instr-page .hero-about .btns { flex-wrap: nowrap; gap: 10px; }
  .leak-instr-page .hero-about .btns .exp-btn { font-size: 12px; padding: 12px 10px; white-space: nowrap; }
}

/* =========================================================================
   LEAK TESTING PAGE — responsive rules for the reused Approach row, metrics
   band, process timeline, and orbit, plus the new .intro and .actions/.acard
   structures. Laptop (>= 1200px) uses the styles.css layout.
   ========================================================================= */

/* iPad landscape and smaller laptops (<= 1199.98px) */
@media (max-width: 1199.98px) {
  .leak-testing-page .intro { padding-left: 32px; padding-right: 32px; }
  .leak-testing-page .matter { padding-left: 32px; padding-right: 32px; }
  .leak-testing-page .appr { padding-left: 32px; padding-right: 32px; }
  .leak-testing-page .rband { gap: 14px 40px; padding-left: 32px; padding-right: 32px; }
  .leak-testing-page .actions { padding-left: 32px; padding-right: 32px; }
  .leak-testing-page .orbit .txt { left: 40px; top: 72px; max-width: 380px; }
}

/* iPad portrait (<= 991.98px) — approach 2-up; timeline wraps to 3 columns;
   orbit overlay gets a scrim. */
@media (max-width: 991.98px) {
  .leak-testing-page .intro { padding-left: 24px; padding-right: 24px; }
  .leak-testing-page .matter { padding-left: 24px; padding-right: 24px; }
  .leak-testing-page .appr { padding-left: 24px; padding-right: 24px; }
  .leak-testing-page .rband { gap: 18px 32px; padding: 40px 24px; }
  .leak-testing-page .actions { padding-left: 24px; padding-right: 24px; }
  .leak-testing-page .proc .track { flex-wrap: wrap; justify-content: center; gap: 32px 4%; margin-top: 24px; }
  .leak-testing-page .proc .track:before { display: none; }
  .leak-testing-page .proc .step { width: 30%; }
  .leak-testing-page .orbit .orbit-embed:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3, 10, 6, .72) 0%, rgba(3, 10, 6, .3) 68%, rgba(3, 10, 6, 0) 100%);
  }
  .leak-testing-page .orbit .txt { left: 32px; right: 24px; top: 40px; max-width: none; }
  .leak-testing-page .orbit .txt h3 { font-size: 24px; }
  .leak-testing-page .chips { gap: 8px; }
}

/* Mobile large / small tablets (<= 767.98px) — timeline 2-up; metrics band
   stacks; orbit text flows below the SVG. */
@media (max-width: 767.98px) {
  .leak-testing-page .intro { padding: 40px 22px 0; }
  .leak-testing-page .intro h2 { font-size: 26px; }
  .leak-testing-page .matter { padding: 20px 22px 0; }
  .leak-testing-page .appr { padding: 32px 22px; }
  .leak-testing-page .rband { flex-direction: column; gap: 22px; padding: 36px 22px; }
  .leak-testing-page .rband .dot { transform: rotate(90deg); height: 46px; }
  .leak-testing-page .actions { padding: 20px 22px 40px; }
  .leak-testing-page .proc .track { gap: 28px 6%; }
  .leak-testing-page .proc .step { width: 47%; }
  .leak-testing-page .orbit .orbit-embed:before { display: none; }
  .leak-testing-page .orbit .txt {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    max-width: none;
    padding: 20px 22px 30px;
  }
  .leak-testing-page .orbit .txt h3 { font-size: 22px; }
  .leak-testing-page .orbit .txt p { font-size: 14px; }
  .leak-testing-page .also { font-size: 14px; }
}

/* Mobile (<= 575.98px) — timeline single column */
@media (max-width: 575.98px) {
  .leak-testing-page .proc .step { width: 100%; }
  .leak-testing-page .rband .st .n { font-size: 44px; }
  .leak-testing-page .orbit .txt { padding: 16px 20px 26px; }
  .leak-testing-page .orbit .txt h3 { font-size: 20px; }
  .leak-testing-page .chip { font-size: 12.5px; padding: 7px 13px; }
  /* Hero buttons: shrink and keep both on a single row */
  .leak-testing-page .hero-about .btns { flex-wrap: nowrap; gap: 10px; }
  .leak-testing-page .hero-about .btns .exp-btn { font-size: 12px; padding: 12px 10px; white-space: nowrap; }
}