/* ==========================================================================
   Edge RCM — Responsive Layer
   Breakpoints: 1280 / 1100 / 980 / 860 / 640 / 420
   ========================================================================== */

/* ---------------- Large desktop / laptop ---------------- */
@media (max-width: 1280px) {
  .hero__floating--one { left: -1%; }
  .hero__floating--two { right: 0; }
  .nav__link { padding: .6rem .62rem; font-size: .9rem; }
}

@media (max-width: 1160px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .footer-grid > *:nth-child(4) { grid-column: 1 / -1; }
  .footer-grid > *:nth-child(4) .footer-contact { max-width: 620px; }
}

/* ---------------- Small laptop / large tablet ---------------- */
@media (max-width: 1080px) {
  :root { --header-h: 70px; }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 86vw);
    margin: 0;
    background: #fff;
    box-shadow: -18px 0 60px rgba(6, 24, 58, .18);
    padding: 5.5rem 1.5rem 2rem;
    overflow-y: auto;
    transform: translateX(105%);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
    z-index: 1001;
    visibility: hidden;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
  }
  .nav.is-open .nav__list li { animation: av-nav-in .45s cubic-bezier(.16, 1, .3, 1) both; }
  .nav.is-open .nav__list li:nth-child(1) { animation-delay: .06s; }
  .nav.is-open .nav__list li:nth-child(2) { animation-delay: .10s; }
  .nav.is-open .nav__list li:nth-child(3) { animation-delay: .14s; }
  .nav.is-open .nav__list li:nth-child(4) { animation-delay: .18s; }
  .nav.is-open .nav__list li:nth-child(5) { animation-delay: .22s; }
  .nav.is-open .nav__list li:nth-child(6) { animation-delay: .26s; }

  .nav__link {
    padding: .95rem 1rem;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--color-line-soft);
    border-radius: 0;
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] {
    background: var(--color-primary-050);
    border-radius: var(--radius-xs);
    border-bottom-color: transparent;
  }

  .nav__mobile-cta {
    display: block;
    margin-top: 1.5rem;
  }
  .nav__mobile-contact {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-line);
    display: grid;
    gap: .8rem;
  }
  .nav__mobile-contact a {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text);
  }
  .nav__mobile-contact svg { width: 18px; height: 18px; color: var(--color-primary); }

  /* Push the whole right-hand cluster over together. Putting margin-left:auto
     on the toggle alone left the call and email icons stranded beside the
     logo; moving it to .nav__actions keeps icons and menu button as one group
     on the right, which is where a thumb expects them. */
  .nav__actions { margin-left: auto; gap: .5rem; }
  .nav__toggle { display: grid; margin-left: 0; }
  .nav__actions .btn { display: none; }
  .nav__actions .icon-btn { display: grid; }

  /* tighter spacing so the three controls read as one cluster */
  .navbar__inner { gap: .6rem; }

  .hero__inner,
  .page-hero__inner,
  .split {
    grid-template-columns: 1fr;
  }
  .split--reverse .split__media { order: 0; }
  .hero__media { max-width: 620px; margin-inline: auto; }
  .page-hero__media { max-width: 560px; margin-inline: auto; }

  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band .btn-row { justify-content: flex-start; }

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

/* ---------------- Tablet ---------------- */
@media (max-width: 980px) {
  .topbar__inner { justify-content: center; gap: 1rem; }
  .topbar__spacer { margin-left: 0; }
  .topbar__note { display: none; }

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

  .hub { max-width: 460px; margin-inline: auto; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > *:nth-child(1) { grid-column: 1 / -1; }
  .footer-grid > *:nth-child(4) { grid-column: 1 / -1; }
}

/* ---------------- Small tablet / large phone ---------------- */
@media (max-width: 860px) {
  /* Workflow timeline switches to single column */
  .flow::before,
  .flow__progress { left: 31px; margin-left: 0; }
  .flow__item {
    grid-template-columns: 62px 1fr;
    gap: 1rem;
    align-items: start;
  }
  .flow__dot { grid-column: 1; justify-self: start; }
  .flow__card,
  .flow__item:nth-child(even) .flow__card {
    grid-column: 2;
    text-align: left;
  }
  .flow__arrow { left: 31px; }

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

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

  .hero__floating--one { top: 2%; left: 0; }
  .hero__floating--two { bottom: 6%; right: 0; }
  .hero__floating--three { display: none; }

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

  .cta-strip__inner { flex-direction: column; align-items: flex-start; }

  .tabs__nav { border-radius: var(--radius); justify-content: flex-start; }
}

/* ---------------- Phone ---------------- */
@media (max-width: 640px) {
  :root {
    --header-h: 64px;
    --fs-md: .98rem;
  }

  body { line-height: 1.68; }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--auto,
  .grid--auto-sm { grid-template-columns: 1fr; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .stat { padding: 1.2rem .8rem; }

  .hero-stats { grid-template-columns: 1fr; gap: 1.1rem; text-align: left; }

  .brand__mark { width: 38px; height: 38px; border-radius: 11px; }
  .brand__mark svg { width: 22px; height: 22px; }
  .brand__name { font-size: .96rem; }
  .brand__tag { font-size: .58rem; letter-spacing: .14em; }

  .topbar__item span.topbar__label { display: none; }
  .topbar { font-size: .72rem; }
  .topbar__inner { min-height: 36px; gap: .9rem; }

  .btn { width: 100%; }
  .btn--sm { width: auto; }

  /* The icon buttons must keep their square box. Letting width fall back to
     auto here collapsed them to the width of the icon while the height stayed
     42px, so border-radius:50% rendered a tall oval instead of a circle - and
     the hover fill took that oval shape too. flex:none stops a cramped header
     squeezing them as well. */
  .icon-btn {
    width: 42px;
    height: 42px;
    flex: none;
  }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .hero__badge { font-size: .8rem; }

  .cta-band { border-radius: var(--radius-lg); }

  .quote-card__mark { font-size: 2.6rem; }

  .map-wrap__badge {
    position: static;
    display: inline-block;
    margin-bottom: 1rem;
  }

  .state-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-bottom nav { gap: 1rem; }

  .to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }

  .toc ol { columns: 1; }

  table.data th, table.data td { padding: .8rem 1rem; }

  .flow__item { grid-template-columns: 52px 1fr; }
  .flow__dot { width: 52px; height: 52px; border-radius: 16px; }
  .flow__dot svg { width: 22px; height: 22px; }
  .flow::before, .flow__progress, .flow__arrow { left: 26px; }
}

/* ---------------- Small phone ---------------- */
@media (max-width: 420px) {
  :root { --container-pad: 1rem; }

  /* Keep the logo lockup inside a 320px viewport */
  .brand__logo { height: 36px; }
  .brand__name { font-size: .92rem; }

  .stats { grid-template-columns: 1fr; }
  .hero__floating { padding: .7rem .85rem; }
  .hero__floating i { width: 32px; height: 32px; }
  .hero__floating b { font-size: .95rem; }
  .card { border-radius: var(--radius); }
  .form-card { border-radius: var(--radius-lg); }
  .tabs__btn { padding: .6rem 1rem; font-size: .82rem; }
  .nav { width: 100%; }
}

/* ---------------- Landscape phones (short viewports) ---------------- */
@media (max-height: 520px) and (max-width: 1080px) {
  .nav { padding-top: 4.5rem; }
}

/* ---------------- Large screens / iMac ---------------- */
@media (min-width: 1600px) {
  :root { --container: 1280px; }
  .hero { padding-block: 6rem 7rem; }
}

/* ---------------- Print ---------------- */
@media print {
  .site-header,
  .site-footer,
  .to-top,
  .cta-band,
  .cta-strip,
  .nav-backdrop,
  .hero__floating { display: none !important; }

  body { color: #000; background: #fff; font-size: 12pt; }
  .section { padding-block: 1.2rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .card, .tile, .quote-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* ---------------- Forced colors / high contrast ---------------- */
@media (forced-colors: active) {
  .btn, .card, .tile, .acc-item, .field input, .field select, .field textarea {
    border: 1px solid CanvasText;
  }
  .nav__link[aria-current="page"] { outline: 2px solid Highlight; }
}