/* =========================================================================
   LGD — responsive.css
   Loaded last so these overrides win. Desktop-first adjustments plus
   capability queries (touch, low-power, reduced data).
   ========================================================================= */

/* ------------------------- ≤ 1100px — laptop -------------------------- */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .hero__proof { justify-self: start; }
  /* Portrait sits beside the stat rather than above it once stacked. */
  .hero__media {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: center;
  }
  .system__layout { grid-template-columns: minmax(0, 1fr); }
  .system__diagram { order: -1; width: min(100%, 420px); }
  .academy__panel { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --------------------- ≤ 900px — tablet / nav swap -------------------- */
@media (max-width: 900px) {
  .burger { display: flex; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-md);
    padding: 6rem var(--gutter) var(--gutter);
    background: rgba(0, 0, 0, 0.97);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    transform: translateX(100%);
    transition: transform var(--dur-mid) var(--ease-out);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__link { font-size: 1.5rem; letter-spacing: 0.02em; color: var(--color-white); }

  .header__actions .btn { display: none; }

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

  .showcase__grid { grid-template-columns: repeat(2, 1fr); }
  .shot--tall, .shot--wide, .shot--half { grid-column: span 1; }
  .shot--wide { grid-column: span 2; }
}

/* ------------------------- ≤ 640px — phone ---------------------------- */
@media (max-width: 640px) {
  .hero { min-height: 92svh; padding-block: 7.5rem var(--space-xl); }
  /* display:none would NOT stop the browser downloading the portrait, so
     hiding it on phones spent the bytes and showed nothing for them. Instead
     it stays visible at a compact size and the download earns its place. */
  .hero__media { display: block; }
  .hero__figure { max-width: 210px; margin-bottom: var(--space-md); }
  .hero__ctas .btn { flex: 1 1 100%; }
  .hero__scroll { display: none; }

  .proof__grid { grid-template-columns: minmax(0, 1fr); }
  .stat { padding: var(--space-md); }

  .showcase__grid { grid-template-columns: minmax(0, 1fr); }
  .shot--wide { grid-column: span 1; }

  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .service { min-height: 0; }

  .quotes__controls { flex-direction: column-reverse; align-items: stretch; gap: var(--space-sm); }
  .quotes__arrows { justify-content: center; }
  .quotes__dots { justify-content: center; }

  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__bottom { justify-content: flex-start; }

  .newsletter__row { flex-wrap: wrap; }
  .newsletter__submit { flex: 1 1 100%; }

  .to-top { width: 46px; height: 46px; }
}

/* ------------------- Touch / no fine pointer -------------------------- */
/* Custom cursor and magnetic hover are pointer-only affordances. */
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none !important; }
  .shot:hover .shot__img { transform: scale(1.02); }
  .service::after { display: none; }
}

/* ------------------- Low-power / small viewport WebGL ----------------- */
/* hero-scene.js also checks these conditions in JS before booting, but the
   CSS guarantees the static poster never flashes on top of a live canvas. */
@media (max-width: 640px) {
  .hero__canvas { display: none; }
  .hero__ring-fallback {
    width: min(120vw, 560px);
    background:
      radial-gradient(circle, transparent 58%, var(--gold-14) 59%, transparent 61%),
      radial-gradient(circle, var(--gold-08) 0%, transparent 60%);
  }
}

@media (prefers-reduced-data: reduce) {
  .hero__canvas { display: none; }
}

/* ------------------------------ Print --------------------------------- */
@media print {
  .loader, .header, .to-top, .cursor, .cursor-dot,
  .hero__canvas, .ambient, .hero__ring-fallback { display: none !important; }
  body { background: #fff; color: #000; }
  .glass, .service, .academy__panel { border: 1px solid #ccc; box-shadow: none; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ---------------- Interior page components ---------------------------- */
@media (max-width: 900px) {
  .band { grid-template-columns: minmax(0, 1fr); }
  .page-hero::after { opacity: 0.55; }
}
@media (max-width: 640px) {
  .page-hero { padding-block: 7.5rem var(--space-xl); }
  .offers, .diffs { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .mini-stats { gap: var(--space-md) var(--space-lg); }
  .faq__q { font-size: 1rem; }
}

/* ---------------- Work / portfolio components ------------------------- */
@media (max-width: 640px) {
  .cases { grid-template-columns: minmax(0, 1fr); }
  .filters__count { margin-left: 0; width: 100%; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* No .case__mono override here: it is sized in cqw against the card, which
     already handles narrow viewports. A viewport-based rule here would win on
     specificity and reintroduce the overflow it was meant to prevent. */
}

/* ---------------- About / narrative components ------------------------ */
@media (max-width: 640px) {
  .chapter { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person__body { padding: var(--space-sm); }
}
@media (max-width: 380px) {
  .people { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .track__item { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .track__when { padding-top: 0; }
}

@media (max-width: 640px) {
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .form__actions .btn { flex: 1 1 100%; }
  .video__disc { width: 62px; height: 62px; }
}

@media (max-width: 640px) {
  .packs { grid-template-columns: minmax(0, 1fr); }
  .checks { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .charts-grid { grid-template-columns: minmax(0, 1fr); }
  .chart { padding: var(--space-sm); }
  .chart__tick { font-size: 13px; }
}

@media (max-width: 640px) {
  .funnel__stage { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
}

@media (max-width: 900px) { .alt__grid { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 640px) { .posts { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 640px) {
  .prose { font-size: var(--fs-body); }
  .prose table { display: block; overflow-x: auto; }
}

/* ---------------- Legal pages ----------------------------------------- */
@media (max-width: 900px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  /* The sticky rail becomes a collapsible summary rather than a wall of links
     eating the first screen on a phone. */
  .legal__toc { position: static; max-height: none; }
  .legal__toc ol { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

@media (max-width: 640px) {
  .lgd-shell .woocommerce table.shop_table { display: block; overflow-x: auto; }
}

/* ---- Header dropdown on the mobile drawer ----------------------------- */
@media (max-width: 900px) {
  .nav__item { flex-wrap: wrap; }
  .nav__sub {
    position: static;
    translate: none;
    transform: none;
    width: 100%;
    min-width: 0;
    margin: 0.4rem 0 0.6rem;
    padding: 0.35rem;
    background: var(--gold-04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .nav__sub::before { content: none; }
  /* Hover cannot open anything on a touch screen — only the caret does. */
  .nav__item--has-sub:hover .nav__sub,
  .nav__item--has-sub:focus-within .nav__sub { display: none; }
  .nav__item--has-sub.is-open .nav__sub { display: grid; }
  .nav__caret { width: 32px; height: 32px; margin-left: auto; }
  .nav__sublink { white-space: normal; }
}

@media (max-width: 640px) { .offices { grid-template-columns: minmax(0, 1fr); } }