/* ==========================================================================
   Responsive layers
   Breakpoints: 1340 · 1200 (nav becomes a drawer) · 760 · 520
   ========================================================================== */

@media (max-width:1340px){
  :root{--gut:22px}
  .nav__item>a{padding:12px clamp(7px,.72vw,11px)}
  .head__in{gap:16px}
  .foot__grid{gap:34px}
}

/* ══ nav collapses to a drawer ═══════════════════════════════════════════ */
@media (max-width:1200px){
  .topbar .topbar__badges{display:none}
  .topbar__facts{gap:18px}
  .topbar__social{padding-left:0;border-left:0}
  .burger{display:block}

  .nav{
    position:fixed;top:0;right:0;bottom:0;width:min(384px,92vw);
    background:#fff;z-index:920;display:flex;flex-direction:column;
    transform:translateX(102%);transition:transform .34s var(--ease);
    box-shadow:-14px 0 44px rgba(7,26,51,.22);overflow-y:auto;margin:0;
    flex:0 0 auto;justify-content:flex-start;
  }
  .nav.is-open{transform:none}
  .nav__head{display:flex;align-items:center;justify-content:space-between;
    padding:18px 22px;border-bottom:1px solid var(--line);gap:12px}
  .nav-close{width:42px;height:42px;border:1.5px solid var(--line);background:#fff;
    border-radius:var(--r);cursor:pointer;position:relative;flex-shrink:0}
  .nav-close::before,.nav-close::after{content:"";position:absolute;top:50%;left:50%;
    width:17px;height:2px;background:var(--navy)}
  .nav-close::before{transform:translate(-50%,-50%) rotate(45deg)}
  .nav-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

  .nav__list{display:block;padding:8px 0;flex:1;white-space:normal;
    flex-wrap:wrap;justify-content:flex-start}
  .nav__item{border-bottom:1px solid var(--line);position:relative;display:block}
  .nav__item>a{display:flex;justify-content:flex-start;padding:15px 22px;
    font-size:1rem;border-radius:0}
  .nav__item>a::after{display:none}
  .nav__item.is-active>a{background:var(--gray);box-shadow:inset 3px 0 0 var(--green)}
  .caret{display:none}

  .sub-toggle{display:block;position:absolute;top:0;right:0;width:60px;height:53px;
    border:0;border-left:1px solid var(--line);background:none;cursor:pointer}
  .sub-toggle::before,.sub-toggle::after{content:"";position:absolute;top:50%;left:50%;
    background:var(--navy);transition:transform .24s var(--ease)}
  .sub-toggle::before{width:13px;height:2px;transform:translate(-50%,-50%)}
  .sub-toggle::after{width:2px;height:13px;transform:translate(-50%,-50%)}
  .sub-toggle[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(90deg)}

  .subnav{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-top:1px solid var(--line);border-radius:0;
    background:var(--gray);padding:6px 0;display:none;min-width:0}
  .nav__item.is-open>.subnav{display:block}
  .nav__item--has:hover>.subnav{opacity:1;visibility:visible}
  .subnav a{padding:12px 22px 12px 36px;border-radius:0;border-left:0;
    box-shadow:inset 3px 0 0 transparent}
  .subnav a:hover,.subnav a.is-active{background:#fff;box-shadow:inset 3px 0 0 var(--green)}

  .nav__foot{display:block;padding:20px 22px 26px;border-top:1px solid var(--line);
    background:var(--gray)}
  .nav__tel{display:block;text-align:center;margin-top:14px;font-family:var(--h);
    font-weight:700;font-size:1.06rem;color:var(--navy)}

  .head__cta .btn--gold{display:none}
  .topbar__right{gap:12px}

  .trust__list{grid-template-columns:repeat(3,1fr)}
  .trust__list li:nth-child(4){border-left:0}
  .trust__list li:nth-child(n+4){border-top:1px solid rgba(255,255,255,.11)}
  .seals{grid-template-columns:repeat(3,1fr);gap:26px}
  .lstrip__list{grid-template-columns:repeat(3,1fr);row-gap:24px}
  .lstrip__list li:nth-child(4){border-left:0}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr;gap:40px}
  .statband__list{grid-template-columns:repeat(2,1fr);gap:34px}
  .statband__list li:nth-child(odd){border-left:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .covgrid{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:repeat(2,1fr)}

  .qboxes__grid{grid-template-columns:1fr}
  .qbox{border-right:0;border-bottom:1px solid var(--line)}
  .qbox:last-child{border-bottom:0}
  .split{grid-template-columns:1fr;gap:38px}
  .split--rev .split__media{order:0}
  .split__frame{display:none}
  .split__badge{right:16px;bottom:-16px}
  .split--rev .split__badge{left:auto;right:16px}
  .ctaband{background-attachment:scroll}
  .ledger--2{columns:1}
}

/* ══ phones and small tablets ════════════════════════════════════════════ */
@media (max-width:760px){
  :root{--gut:18px;--head-h:76px}
  body{font-size:16px}
  .topbar__facts li:nth-child(2){display:none}
  .topbar .hide-md{display:none}
  .topbar__social a{width:26px;height:26px}
  .brand img{width:212px}

  .hero__track{height:auto;min-height:clamp(520px,86vh,660px)}
  .slide__veil{background:linear-gradient(to top,rgba(7,26,51,.95) 12%,rgba(7,26,51,.72) 100%)}
  .slide__title{max-width:none}
  .harrow{display:none}
  .qboxes{margin-top:0;margin-bottom:0}
  .slide__in{padding-top:38px;padding-bottom:64px}
  .hero__dots{bottom:22px}
  .hero__bar{bottom:0}
  .qboxes__grid{border-radius:0;box-shadow:none;border-top:1px solid var(--line)}

  .grid,.g-2,.g-3,.g-4{grid-template-columns:1fr}
  .trust__list{grid-template-columns:1fr 1fr}
  .trust__list li{border-left:0;border-top:1px solid rgba(255,255,255,.11)}
  .trust__list li:nth-child(odd){border-right:1px solid rgba(255,255,255,.11)}
  .trust__list li:nth-child(-n+2){border-top:0}
  .stats,.statband__list{grid-template-columns:1fr 1fr;gap:16px}
  .statband__list li{border-left:0;padding:0 6px}
  .seals{grid-template-columns:repeat(2,1fr)}
  .lstrip__list{grid-template-columns:repeat(2,1fr)}
  .lstrip__list li:nth-child(odd){border-left:0}
  .covgrid,.team,.f-2{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}

  .foot__grid{grid-template-columns:1fr;gap:36px}
  .foot__seals{grid-template-columns:repeat(3,1fr);max-width:300px}
  .foot__bar__in{flex-direction:column;align-items:flex-start;gap:12px}
  .foot__slogan{display:block;margin-left:0;margin-top:4px}

  .prefoot__in,.ctaband__in{flex-direction:column;align-items:flex-start}
  .prefoot__act,.ctaband .btn-row{width:100%}
  .prefoot__act .btn,.ctaband .btn{flex:1;min-width:180px}
  .steps::before{left:22px}
  .step{gap:18px}
  .step__n{width:46px;height:46px;font-size:.9rem}
  .quotes__mark{font-size:5.5rem;top:-28px}
  .quotes__track{min-height:260px}
  .cbar__i{border-left:0;border-top:1px solid var(--line)}
  .cbar__i:first-child{border-top:0}
  .split__badge{position:static;margin-top:16px;display:inline-flex;
    flex-direction:row;align-items:baseline;gap:10px}
  .totop{right:14px;bottom:14px;width:42px;height:42px}
  .acc__q{font-size:.965rem;padding-right:42px}
  .pull{font-size:1.09rem;padding-left:20px}
}

/* ══ small phones ════════════════════════════════════════════════════════ */
@media (max-width:520px){
  .topbar .topbar__facts li:not(:first-child){display:none}
  .topbar__social{gap:6px}
  .brand img{width:188px}
  .btn{padding:13px 20px;font-size:.855rem}
  .btn--lg{padding:15px 24px;font-size:.9rem}
  .btn-row{gap:10px}
  .btn-row .btn{flex:1;min-width:145px}
  .trust__list{grid-template-columns:1fr}
  .trust__list li:nth-child(odd){border-right:0}
  .trust__list li:nth-child(2){border-top:1px solid rgba(255,255,255,.11)}
  .stats,.statband__list,.lstrip__list{grid-template-columns:1fr}
  .lstrip__list li{border-left:0}
  .seals{grid-template-columns:repeat(2,1fr);gap:16px}
  .foot__seals{grid-template-columns:repeat(3,1fr);max-width:100%}
  .foot__logo{width:260px}
  .card__body{padding:24px 20px}
  .qbox{padding:28px 22px 24px}
  .ocard{min-height:280px}
  .ocard__d{max-height:170px;opacity:1}
  .pbanner__in{padding:44px var(--gut) 48px}
}

/* ══ short viewports (laptops around 720-800px tall) ════════════════════ */
/* The heading and body text keep their normal size here. When height is
   short it is the padding that gives way, not the typography. */
@media (min-width:761px) and (max-height:820px){
  .slide__in{padding-top:38px;padding-bottom:100px}
  .hero__dots{bottom:84px}
}
@media (min-width:761px) and (max-height:700px){
  .slide__in{padding-top:30px;padding-bottom:92px}
  .hero__dots{bottom:76px}
}

/* ══ very small phones ═══════════════════════════════════════════════════ */
@media (max-width:520px){
  .hero__track{min-height:clamp(600px,104vh,720px)}
  .slide__in{padding-top:30px;padding-bottom:56px}
  .hero__dots{bottom:18px}
}

/* ── CTA band, prefooter and WhatsApp button ──────────────────────────── */
@media (max-width:1200px){
  .ctaband__grid{grid-template-columns:1fr;gap:34px}
  .prefoot__in{grid-template-columns:1fr;gap:30px}
  .ctaband{background-attachment:scroll}
  .ctapanel{max-width:520px}
}
@media (max-width:760px){
  .ctaband__grid,.prefoot__in{gap:26px}
  .ctapanel{padding:22px;max-width:none}
  .ctaband h2,.prefoot h2{max-width:none}
  .prefoot__act .btn{width:100%}
  .wa{left:14px;bottom:14px;height:50px}
  .wa__ic{width:38px;height:38px}
  .wa__ic svg{width:24px;height:24px}
  .wa__lab{display:none}
  .wa:hover,.wa:focus-visible{padding:0 6px}
}