/* =============================================================================
   responsive.css — breakpoints & mobile behaviour
   Mobile type scale follows the brief exactly.
   ========================================================================== */

/* ---- Large tablets / small desktops ------------------------------------- */
@media (max-width:1080px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;flex-direction:row;flex-wrap:wrap}
  .sidebar .widget{flex:1 1 260px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-layout{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
}

/* ---- Mobile navigation --------------------------------------------------- */
@media (max-width:940px){
  .nav-toggle{display:flex;position:relative;z-index:80}
  /* Drawer + backdrop both sit INSIDE .site-header so they share its stacking
     context — the drawer (70) reliably stays above the backdrop (65). */
  .primary-nav{
    position:fixed;
    inset:0 0 0 auto;
    width:min(88%,360px);
    background:#fff;
    z-index:70;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding: 3rem 1.3rem 40rem;
    transform:translateX(100%);
    transition:transform .3s var(--ease);
    box-shadow:-16px 0 40px rgba(0,0,0,.15);
    overflow-y:auto;
  }
  .primary-nav.is-open{transform:translateX(0)}
  body.nav-open{overflow:hidden}
  .menu{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .menu__item{border-bottom:1px solid var(--line)}
  .menu__link{padding:.95rem .2rem;font-size:17px;justify-content:space-between}
  .menu__item.is-active > .menu__link::after{display:none}
  .menu__caret{transition:transform .25s}
  .menu__item.sub-open .menu__caret{transform:rotate(180deg)}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    padding:0 0 .6rem .3rem;min-width:0;max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
  .menu__item.sub-open .submenu{max-height:640px}
  .submenu__head{padding:.6rem .2rem .2rem}
  .nav-cta{margin:1.2rem 0 0}
  .nav-backdrop{position:fixed;inset:0;background:rgba(10,8,4,.5);z-index:65;opacity:0;visibility:hidden;transition:.3s}
  .nav-backdrop.is-open{opacity:1;visibility:visible}
}

/* ---- Journey line collapses to a vertical road on small screens ---------- */
@media (max-width:820px){
  .journey__track{grid-template-columns:1fr;gap:1.6rem;max-width:420px;margin-inline:auto}
  .journey__track::before{left:31px;right:auto;top:0;bottom:0;width:2px;height:auto;
    background-image:linear-gradient(180deg,var(--gold) 0 60%,transparent 60% 100%);background-size:2px 16px;background-repeat:repeat-y}
  .journey__pin{display:none}
  .step{display:grid;grid-template-columns:64px 1fr;gap:1rem;text-align:left;align-items:center}
  .step__dot{margin:0}
  .split,.split--flip .split__media{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
  .compare{grid-template-columns:1fr}
}

/* ---- General mobile layout ---------------------------------------------- */
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr;gap:1.8rem}
  .footer-bar__inner{flex-direction:column;align-items:flex-start;gap:.6rem}
  .form__row{grid-template-columns:1fr}
  .inline-cta{flex-direction:column;align-items:flex-start;text-align:left}
  .topbar__msg{display:none}
  .topbar__inner{justify-content:center}
  .itin-mini{grid-template-columns:1fr 1fr}
}

/* ---- Mobile TYPE SCALE (per brief) -------------------------------------- */
@media (max-width:600px){
  body{font-size:17px;line-height:1.7}
  small,.small{font-size:15px;line-height:1.6}
  h1{font-size:34px;line-height:1.2}
  h2{font-size:30px;line-height:1.25}
  h3{font-size:26px;line-height:1.3}
  h4{font-size:22px;line-height:1.35}
  h5{font-size:20px;line-height:1.4}
  h6{font-size:18px;line-height:1.4}
  .prose p,.prose li{font-size:17px}
  .prose blockquote{font-size:20px;line-height:1.6}
  .hero__title{font-size:38px;line-height:1.15}
  .hero__sub{font-size:19px}
  .btn{padding:13px 24px;font-size:16px}
  .btn--lg{padding:14px 26px}
  .section-head p{font-size:17px}
  .intro p:first-child{font-size:18px}
  .sidebar{flex-direction:column}
  .sidebar .widget{flex:1 1 auto}
  .itin-mini{grid-template-columns:1fr}
}

/* ---- Fine-tuning very small screens ------------------------------------- */
@media (max-width:400px){
  .brand__logo{height:36px}
  .hero__title{font-size:32px}
}

/* ---- Print --------------------------------------------------------------- */
@media print{
  .topbar,.site-header,.to-top,.cta-band,.inline-cta,.sidebar,.nav-toggle{display:none!important}
  body{font-size:12pt;color:#000}
  .hero{color:#000;background:none}
  .hero::before,.hero__overlay{display:none}
}