/* ==========================================================================
   Mettle Law — Responsive
   Breakpoints: 1100 (switch to mobile nav), 900 (tablet), 640 (phone),
   420 / 360 (small phones), plus short-height / landscape handling.
   ========================================================================== */

/* ---- Large tablets / small laptops: collapse nav into a drawer ---- */
@media (max-width: 1100px) {
  :root { --header-h: 72px; }

  /* backdrop-filter on the header would trap the fixed drawer inside it */
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ivory-200); }

  .brand { margin-left: 0; }

  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(360px, 88vw); height: 100vh; height: 100dvh;
    background: var(--ivory-100);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: calc(var(--header-h) + 1.25rem) 1.75rem max(2rem, env(safe-area-inset-bottom));
    gap: 2rem; z-index: 60;
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
    box-shadow: -20px 0 60px -30px rgba(0,0,0,0.3);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .nav__list > li { border-bottom: 1px solid var(--color-border); }
  .nav__link { display: flex; align-items: center; justify-content: space-between; font-size: 1.05rem; padding: 0.9rem 0; }
  .nav__link::after { display: none; }
  .nav__item--dropdown { width: 100%; }
  .nav__trigger { width: 100%; }
  .nav__trigger svg { width: 11px; height: 11px; }

  .nav__dropdown {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border: none; background: transparent; min-width: 0;
    padding: 0; max-height: 0; overflow: hidden;
    transition: max-height var(--dur-med) var(--ease-out);
  }
  .nav__dropdown::before { display: none; }
  .nav__item--dropdown:hover .nav__dropdown { max-height: 0; }
  .nav__item--dropdown:focus-within .nav__dropdown { max-height: 0; }
  .nav__item--dropdown.is-open .nav__dropdown { max-height: 420px; padding-bottom: 0.6rem; transform: none; }
  .nav__dropdown a { padding: 0.65rem 0 0.65rem 0.9rem; border-left: 1px solid var(--color-border); border-radius: 0; }

  .header__cta .btn--primary { display: none; }
  .nav__toggle { display: flex; z-index: 70; }
  .nav__cta-mobile { display: inline-flex !important; width: 100%; margin-top: 0.25rem; }

  .nav-scrim {
    position: fixed; inset: 0; background: rgba(29,16,23,0.45);
    opacity: 0; visibility: hidden; z-index: 50;
    transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; }

  .footer__top { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; max-width: 420px; }
}

/* ---- Tablets ---- */
@media (max-width: 900px) {
  .split, .split--reverse, .split--contact, .split--booking { grid-template-columns: 1fr; }
  .split--contact { align-items: start; }
  .split__label { position: static; }
  .split--reverse .split__label { order: 0; }
  .region { max-width: 240px; }

  .grid-areas { grid-template-columns: repeat(2, 1fr); }
  .area-card { min-height: 0; }
  .pillars { grid-template-columns: 1fr; gap: 2rem; }
  .pillar { border-left: none; padding-left: 0; padding-right: 0; border-top: 1px solid var(--color-border-dark); padding-top: 1.75rem; }
  .pillar:first-child { border-top: none; padding-top: 0; }
  .pillar-grid { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer__brand { grid-column: 1 / -1; }
  .stat-strip { grid-template-columns: 1fr 1fr; row-gap: 1.75rem; }

  .hero__watermark { opacity: 0.05; }
}

/* ---- Phones ---- */
@media (max-width: 640px) {
  :root { --header-h: 64px; }

  .header__bar { gap: 0.75rem; }
  .brand__mark { width: 40px; height: 40px; }

  .hero { padding-block: 4rem 3.25rem; }
  .hero--page { padding-block: 3.5rem 2.75rem; }
  .hero__lead { margin-top: 1.25rem; }
  .hero__actions { flex-direction: column; align-items: stretch; margin-top: 2rem; }
  .hero__actions .btn { width: 100%; }
  .hero__watermark { width: 300px; right: -25%; }

  .grid-areas { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; gap: 0; }
  .field-row { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .cta-band { flex-direction: column; align-items: stretch; }
  .cta-band__actions { flex-direction: column; }
  .cta-band__actions .btn { width: 100%; }
  .stat-strip { grid-template-columns: 1fr; }

  .practice-block__head { flex-direction: column; gap: 0.9rem; }
  .practice-block__foot { flex-direction: column; align-items: stretch; gap: 1rem; }
  .practice-block__foot .btn { width: 100%; }
  .value-item { grid-template-columns: 20px 1fr; gap: 1rem; }

  .form-panel .btn[type="submit"] { width: 100%; }
  .detail-item { gap: 0.9rem; }
  .statement { max-width: none; }
  .eyebrow { letter-spacing: 0.16em; flex-wrap: wrap; }
  .subnav__list { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
}

/* ---- Small phones ---- */
@media (max-width: 420px) {
  .brand__word span { display: none; }
  .brand__word { letter-spacing: 0.04em; }
  .area-card, .pillar-card, .form-panel, .detail-panel, .aside-card, .cta-band { padding: 1.5rem; }
  .btn { padding: 0.9rem 1.4rem; }
}

@media (max-width: 340px) {
  .brand__word { font-size: 1.05rem; }
  .brand__mark { width: 34px; height: 34px; }
  .btn { white-space: normal; text-align: center; }
}

/* ---- Short viewports / landscape phones ---- */
@media (max-height: 520px) {
  .hero { padding-block: 3rem 2.5rem; }
  .hero--page { padding-block: 2.5rem 2rem; }
  .nav { padding-top: calc(var(--header-h) + 0.5rem); gap: 1rem; }
  .nav__link { padding: 0.6rem 0; }
}

/* ---- Very wide screens ---- */
@media (min-width: 1600px) {
  :root { --container-max: 1360px; }
}