/* ==========================================================
   NOMAD ENERGY AMERICA — Mobile Layer
   Loaded after styles.css + visual.css.
   Optimizes for performance, touch UX, and small-screen reading.
   ========================================================== */

/* ============================================================
   ACCESSIBILITY — reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-cinema__rays,
  .hero-cinema__stars,
  .hero-cinema__art,
  .trust-strip__marquee,
  .ticker__marquee,
  .map-pulse,
  .globe-pin .pin-pulse,
  .live-badge .dot,
  .globe-hint::before {
    animation: none !important;
  }
}

/* ============================================================
   TOUCH DEVICES — disable hover-only affordances
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .product-card:hover,
  .advantage-card:hover,
  .sector-card:hover,
  .value-card:hover,
  .usecase__card:hover { transform: none; }
  .product-card:hover { border-color: rgba(10,26,51,.06); box-shadow: 0 4px 14px rgba(6,18,38,.06); }
  .nav__menu a::after { display: none; }
  .btn::before { display: none; }

  /* Larger tap targets */
  .nav__menu a,
  .footer__col a,
  .product-card__link {
    padding: 8px 0;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================
   TABLET & BELOW (≤ 980px)
   ============================================================ */
@media (max-width: 980px) {
  /* Section padding tightened */
  .section { padding: 72px 0; }
  .section--tight { padding: 56px 0; }
  .mission,
  .advantage,
  .process,
  .compliance,
  .capability,
  .usecase,
  .us-deploy {
    padding: 72px 0;
  }
  .quote-band,
  .cta-band,
  .stat-band,
  .mega-stat {
    padding: 64px 0;
  }

  /* Container */
  .container { padding: 0 24px; }

  /* Typography scale-down */
  h1 { font-size: clamp(40px, 9vw, 72px); }
  h2 { font-size: clamp(30px, 6vw, 48px); }
  h3 { font-size: clamp(22px, 3.2vw, 28px); }

  /* Hero — disable heavy GPU effects on small screens */
  .hero-cinema { min-height: auto; }
  .hero-cinema__rays { display: none; }
  .hero-cinema__stars { opacity: 0.35; animation: none; }
  .hero-cinema__noise { opacity: 0.18; }
  .hero-cinema__horizon { height: 200px; }
  .hero-cinema__art { display: none !important; animation: none !important; }
  .hero-cinema__content { padding: 40px 0 80px; }
  .hero-cinema h1 { font-size: clamp(42px, 11vw, 76px); line-height: 0.95; }
  .hero-cinema__lead { font-size: 16px; line-height: 1.5; margin-bottom: 28px; }
  .live-badge { font-size: 10px; padding: 8px 14px; gap: 8px; margin-bottom: 22px; }

  /* Buttons — stretch + larger touch */
  .hero-cinema__cta,
  .cta-band__buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .hero-cinema__cta .btn,
  .cta-band__buttons .btn {
    justify-content: center;
    width: 100%;
  }
  .btn { padding: 16px 22px; font-size: 13px; letter-spacing: 0.16em; }

  /* Hero stats — 2x2 grid, smaller numbers */
  .hero-cinema__stats { padding: 16px 0; }
  .hero-cinema__stats .num { font-size: 22px; }
  .hero-cinema__stats .lbl { font-size: 9px; letter-spacing: 0.16em; }

  /* Trust strip — slow marquee + smaller seals */
  .trust-strip { padding: 18px 0; }
  .trust-strip__marquee { animation-duration: 60s; }
  .trust-strip__label { font-size: 10px; }
  .trust-item { font-size: 11px; gap: 8px; }
  .trust-item .seal { width: 28px; height: 28px; font-size: 8px; }

  /* Mega stat */
  .mega-stat .num { font-size: clamp(96px, 28vw, 160px); }
  .mega-stat .lbl { font-size: 12px; letter-spacing: 0.25em; }

  /* Ticker — slower for mobile reading */
  .ticker { padding: 14px 0; }
  .ticker__marquee { animation-duration: 50s; }
  .ticker__item { font-size: 13px; padding: 0 22px; gap: 12px; }
  .ticker__item .num { font-size: 15px; }

  /* Stat band */
  .stat-band__grid { gap: 28px 20px; }
  .stat-card .num { font-size: clamp(36px, 10vw, 56px); }
  .stat-card .lbl { font-size: 11px; }

  /* Mission */
  .mission__grid { gap: 40px; }
  .mission__pillars { border-left-width: 2px; }
  .mission__pillar { padding: 18px 0 18px 22px; }

  /* Products grid */
  .products__head { margin-bottom: 40px; gap: 24px; }
  .product-card__visual { height: 240px; }
  .product-card__body { padding: 28px 24px; }
  .product-card__specs { gap: 12px; padding: 16px 0; margin-bottom: 16px; }
  .product-card__specs .spec .v { font-size: 20px; }
  .product-card__specs .spec .l { font-size: 10px; }

  /* Defense */
  .defense__copy h2 { font-size: clamp(34px, 6vw, 52px); }
  .defense__lead { font-size: 16px; }
  .defense__list li { padding: 12px 0 12px 28px; font-size: 14px; }
  .defense__card { padding: 28px 24px; }
  .defense__metrics { gap: 16px; padding: 18px 0; }
  .defense__metric .v { font-size: 30px; }
  .defense__metric .l { font-size: 10px; }

  /* Compare bars */
  .compare-bar { margin: 20px 0; }
  .compare-bar__row {
    grid-template-columns: 1fr 60px;
    gap: 10px;
    margin-bottom: 16px;
  }
  .compare-bar__label {
    grid-column: 1 / -1;
    text-align: left;
    font-size: 10px;
    margin-bottom: 0;
  }
  .compare-bar__track {
    grid-column: 1;
    height: 12px;
  }
  .compare-bar__value {
    grid-column: 2;
    font-size: 14px;
    text-align: right;
  }

  /* Sectors */
  .sectors__head { margin-bottom: 40px; }
  .sectors__head h2 { margin-bottom: 16px; }
  .sector-grid { gap: 14px; }
  .sector-card { aspect-ratio: 16/10; }
  .sector-card__body { padding: 20px; }
  .sector-card__body h4 { font-size: 20px; }
  .sector-card__body .tag { font-size: 10px; letter-spacing: 0.2em; }
  .sector-card__arrow {
    width: 32px; height: 32px;
    top: 16px; right: 16px;
  }

  /* Advantage */
  .advantage__head { gap: 24px; margin-bottom: 48px; }
  .advantage-card { padding: 32px 26px; }

  /* Process timeline */
  .timeline { gap: 28px; }
  .timeline__step .dot { width: 64px; height: 64px; font-size: 22px; margin-bottom: 18px; }

  /* Globe */
  .globe-wrap { max-width: 420px; }
  .globe-hint { font-size: 9px; letter-spacing: 0.3em; bottom: -4px; }
  .us-deploy__legend { padding: 18px 20px; }
  .legend-row { font-size: 11px; gap: 12px; }

  /* Quote band */
  .quote-band__mark { font-size: 80px; margin-bottom: -8px; }
  .quote-band p { font-size: clamp(20px, 5.2vw, 30px); margin-bottom: 24px; }

  /* CTA band */
  .cta-band h2 { font-size: clamp(34px, 7vw, 56px); }
  .cta-band p { font-size: 16px; }

  /* Footer */
  .footer { padding: 56px 0 0; }
  .footer__grid { gap: 36px; margin-bottom: 40px; }
  .footer__brand p { font-size: 13px; }
  .footer__bottom { padding: 22px 0; font-size: 12px; flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Page hero (subpages) */
  .page-hero { padding: calc(var(--header-h) + 60px) 0 60px; }
  .page-hero h1 { font-size: clamp(42px, 10vw, 76px); }
  .page-hero__lead { font-size: 17px; }
  .crumbs { font-size: 11px; margin-bottom: 24px; }

  /* Threat rows on defense page */
  .threat-row {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: 32px !important;
    padding: 48px 0;
  }
  .threat-row > * { direction: ltr !important; }
  .threat-row__copy h3 { font-size: 26px; }
  .threat-row__data { padding: 28px 24px; }
  .threat-row__data .stat-line .value { font-size: 20px; }

  /* Capability matrix — collapse to clean stacked rows.
     Mobile message: "here's the requirement, and yes Nomad does it."
     The comparison columns (Tactical Genset / Diesel Rental) are
     intentionally hidden on phones since both are "—" in every row
     and the contrast adds noise without value. */
  .cap-table .row.head { display: none; }
  .cap-table .row {
    grid-template-columns: 1fr auto;
    padding: 14px 22px;
    align-items: center;
    gap: 12px;
  }
  .cap-table .row .req {
    font-size: 14px;
    line-height: 1.4;
    padding-right: 8px;
  }
  .cap-table .row > div:nth-child(3),
  .cap-table .row > div:nth-child(4) { display: none; }
  .cap-table .cell-check {
    text-align: right;
    color: #1ed760;
    font-size: 20px;
    font-weight: 700;
  }

  /* Use case grid */
  .usecase__grid { grid-template-columns: 1fr; gap: 14px; }
  .usecase__card { padding: 26px 24px; }

  /* Compliance grid */
  .compliance__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .compliance__card { padding: 24px 18px; }

  /* Sector blocks (sectors.html) */
  .sb-grid { grid-template-columns: 1fr !important; direction: ltr !important; gap: 32px !important; }
  .sb-grid > * { direction: ltr !important; }
  .sb-copy h2 { font-size: clamp(28px, 6vw, 40px); }
  .sb-copy .lead { font-size: 16px; }
  .sb-stats { grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
  .sb-stat .v { font-size: 26px; }
  .sb-quote { font-size: 17px; padding: 16px 0 16px 18px; }
  .sector-block { padding: 64px 0; }

  /* Product detail (products.html) */
  .pb-grid { grid-template-columns: 1fr !important; direction: ltr !important; gap: 36px !important; }
  .pb-grid > * { direction: ltr !important; }
  .pb-visual { height: 320px; position: static !important; }
  .product-block { padding: 64px 0; }
  .pb-copy h2 { font-size: clamp(30px, 6vw, 44px); }
  .spec-grid { grid-template-columns: 1fr 1fr 1fr; }
  .spec-grid .item .v { font-size: 22px; }
  .spec-grid .item .k { font-size: 9px; }

  /* About — values + timeline */
  .values-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .value-card { padding: 32px 26px; }
  .timeline-vert { padding-left: 48px; }
  .timeline-vert .item::before {
    width: 22px; height: 22px;
    left: -42px;
    border-width: 3px;
  }
  .timeline-vert::before { left: 11px; }
  .timeline-vert .item h4 { font-size: 19px; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px; }
  .contact-form { padding: 28px 24px; }
  .form-row { grid-template-columns: 1fr !important; gap: 16px; }
  .channel { padding: 20px; gap: 16px; }
  .channel__icon { width: 40px; height: 40px; }

  /* Header height on scroll */
  .nav { height: 64px; }
  .nav.scrolled { height: 60px; }
  .nav__inner { padding: 0 4px; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__mark .shield { width: 38px; height: 38px; }
  .brand__text .b1 { font-size: 15px; letter-spacing: 0.12em; }
  .brand__text .b2 { font-size: 9px; letter-spacing: 0.32em; }

  /* Mobile drawer */
  .nav__menu {
    display: none;
  }
  .nav__menu.open {
    display: flex !important;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    background: rgba(6, 18, 38, 0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 32px 24px;
    gap: 8px;
    align-items: stretch;
    z-index: 99;
    overflow-y: auto;
    animation: drawerIn 0.3s var(--ease);
  }
  .nav__menu.open a {
    font-size: 22px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    letter-spacing: 0.15em;
    width: 100%;
  }
  .nav__menu.open a:last-of-type { border-bottom: 0; }
  .nav__menu.open .nav__cta {
    text-align: center;
    font-size: 15px;
    padding: 18px 24px;
    margin-top: 16px;
    background: var(--red-bright);
    border-radius: 4px;
    align-self: stretch;
    border-bottom: 0 !important;
  }
  body.nav-open { overflow: hidden; }

  @keyframes drawerIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ============================================================
   PHONE (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
  .container { padding: 0 18px; }
  .section { padding: 56px 0; }

  h1 { font-size: clamp(36px, 10.5vw, 56px); }
  h2 { font-size: clamp(26px, 7vw, 38px); letter-spacing: -0.005em; }

  .scroll-cue { display: none; }

  /* Hero — even tighter */
  .hero-cinema h1 { font-size: clamp(40px, 12vw, 60px); letter-spacing: -0.02em; }
  .hero-cinema__lead { font-size: 15px; }
  .hero-cinema__content { padding: 24px 0 64px; }
  .hero-cinema__stats { grid-template-columns: 1fr 1fr; }
  .hero-cinema__stats .hero__stat:nth-child(2) { border-right: 0; }
  .hero-cinema__stats .hero__stat:nth-child(1),
  .hero-cinema__stats .hero__stat:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding-bottom: 14px;
  }
  .hero-cinema__stats .hero__stat:nth-child(3),
  .hero-cinema__stats .hero__stat:nth-child(4) {
    padding-top: 14px;
  }

  /* Trust strip — single line, smaller */
  .trust-strip__label {
    border-bottom: 1px solid rgba(10,26,51,.2);
    padding-bottom: 10px;
    text-align: center;
  }
  .trust-item { font-size: 10px; }
  .trust-item .seal { width: 26px; height: 26px; font-size: 8px; }

  /* Globe smaller */
  .globe-wrap { max-width: 320px; }

  /* Sector grid - single column */
  .sector-grid { grid-template-columns: 1fr; }
  .sector-card { aspect-ratio: 16/9; }

  /* Stat band 1x4 */
  .stat-band__grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .stat-card .num { font-size: clamp(32px, 11vw, 48px); }

  /* Defense metric grid stacks */
  .defense__metrics { grid-template-columns: 1fr 1fr; }

  /* Spec grid stays 3-col but smaller */
  .spec-grid .item .v { font-size: 18px; }
  .spec-grid .item .u { font-size: 12px; }

  /* Compliance grid → 2-col fine */

  /* Form */
  .contact-form { padding: 22px 20px; border-radius: 6px; }
  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    padding: 14px 14px;
  }
  .form-note { font-size: 12px; padding: 14px; }

  /* Page hero */
  .page-hero { padding: calc(var(--header-h) + 40px) 0 48px; }
  .page-hero h1 { font-size: clamp(38px, 11vw, 64px); }
  .page-hero__lead { font-size: 15px; }

  /* Quote band tighter */
  .quote-band p { font-size: clamp(18px, 5.2vw, 26px); }

  /* Footer cleaner */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col h5 { font-size: 11px; }
  .footer__col li { margin-bottom: 8px; }
}

/* ============================================================
   ULTRA-SMALL (≤ 380px)
   ============================================================ */
@media (max-width: 380px) {
  .container { padding: 0 16px; }
  .hero-cinema h1 { font-size: 38px; }
  .brand__text .b1 { font-size: 14px; }
  .brand__text .b2 { font-size: 8px; letter-spacing: 0.28em; }
  .nav__cta { padding: 9px 14px; font-size: 11px; }
  .product-card__body { padding: 22px 18px; }
  .product-card__visual { height: 200px; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LANDSCAPE PHONE — short viewport
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-cinema { min-height: auto; padding-bottom: 40px; }
  .hero-cinema__content { padding: 16px 0 32px; }
  .hero-cinema__stats { padding: 12px 0; }
  .scroll-cue { display: none; }
}