/* ---------- TABLET ---------- */
@media (max-width:1024px){
  .af-mega-inner{grid-template-columns:200px 1fr}
  .af-cta{display:none}
  .af-list,.af-brands{grid-template-columns:repeat(2,1fr)}
}
/* Make room for the search icon before the bar gets crowded */
@media (max-width:1100px) and (min-width:861px){
  .af-bar{gap:20px}
  .af-link{padding:0 12px}
  .af-link::after{left:12px;right:12px}
}

/* ---------- MOBILE ---------- */
@media (max-width:860px){
  .af-bar{gap:12px;padding:0 16px}
  .af-call{display:none}
  .af-burger{display:grid}
  .af-burger:active{background:rgba(255,255,255,.2)}

  /* Search: the bar opens over the logo, results span the screen */
  .af-logo{transition:opacity .3s,visibility .3s}
  .af-header.search-open .af-logo{opacity:0;visibility:hidden}
  .af-search-results{position:fixed;left:16px;right:16px;top:80px;width:auto}

  /* Drawer */
  .af-nav{position:fixed;top:72px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;height:auto;gap:0;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 0 32px;
    transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility .3s}
  .af-nav.open{transform:none;visibility:visible}
  .af-nav > li{flex-direction:column;flex-shrink:0;border-bottom:1px solid var(--line)}

  .af-link{color:var(--navy);min-height:56px;padding:0 20px;justify-content:space-between;width:100%;font-size:16px;
    transition:background .2s,color .2s}
  .af-link::after{display:none}
  .af-link:hover,.af-has-mega.open > .af-link,.af-has-drop.open > .af-link{color:var(--navy)}
  .af-link:active{background:var(--soft)}
  .af-link.active{color:var(--navy);background:var(--soft);box-shadow:inset 4px 0 0 var(--yellow)}
  .af-caret{width:12px;height:12px}

  /* Products accordion (animated height) */
  .af-mega{position:static;box-shadow:none;border:0;opacity:1;transform:none;background:var(--soft);
    display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility .3s}
  .af-has-mega.open .af-mega{grid-template-rows:1fr;visibility:visible}
  .af-mega-inner{display:block;min-height:0;overflow:hidden;padding:0 16px}

  /* Resources accordion */
  .af-drop{position:static;min-width:0;box-shadow:none;border-radius:0;opacity:1;transform:none;background:var(--soft);
    display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility .3s}
  .af-has-drop.open .af-drop{grid-template-rows:1fr;visibility:visible;transform:none}
  .af-drop-list{min-height:0;overflow:hidden;padding:0}
  .af-drop-list li + li{border-top:1px solid var(--line)}
  .af-drop-list a{min-height:50px;display:flex;align-items:center;padding:0 20px 0 32px;border-radius:0;font-size:15px}
  .af-drop-list a:hover{background:none;padding-left:32px}
  .af-drop-list a:active{background:#fff}

  /* Category switch */
  .af-cats{border:0;padding:4px;display:flex;gap:4px;margin:14px 0 16px;background:#fff;border-radius:10px;
    box-shadow:0 1px 3px rgba(20,16,90,.08)}
  .af-cats .af-label{display:none}
  .af-cat{flex:1;justify-content:center;gap:6px;font-size:14px;padding:11px 8px;margin:0;text-align:center}
  .af-cat:hover{background:none}
  .af-cat.active{background:var(--navy)}
  .af-cat svg{display:none}
  .af-cat-count{margin:0;min-width:20px;padding:2px 6px;border-radius:10px;background:var(--soft);color:var(--navy);opacity:1}
  .af-cat.active .af-cat-count{background:rgba(255,255,255,.18);color:#fff}

  .af-panel-head{align-items:center;margin-bottom:12px}
  .af-panel-head h3{font-size:16px}

  /* Brand links as tap rows */
  .af-list{grid-template-columns:repeat(2,1fr);gap:8px;justify-items:stretch}
  .af-list a{min-height:48px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;
    font-size:14px;font-weight:600;color:var(--text);line-height:1.3;transition:border-color .2s,background .2s,color .2s}
  .af-list a::before{display:none}
  .af-list a::after{content:"";flex-shrink:0;width:7px;height:7px;margin-left:auto;border-top:2px solid currentColor;
    border-right:2px solid currentColor;transform:rotate(45deg);opacity:.35}
  .af-list a:hover{padding-left:14px}
  .af-list a:active{border-color:var(--yellow);background:#fffaf0;color:var(--navy)}

  .af-brands{grid-template-columns:repeat(2,1fr);gap:8px}
  .af-brand{background:#fff;padding:14px}
  .af-brand:hover{transform:none;box-shadow:none}
  .af-brand:active{border-color:var(--yellow);background:#fffaf0}

  .af-cta{display:flex;margin:16px 0 20px;padding:18px}
  .af-cta h3{font-size:18px}
  .af-overlay{display:none}

  /* Call / quote buttons at the bottom of the drawer */
  .af-nav > .af-nav-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:20px 16px 0;border:0}
  .af-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 12px;border-radius:10px;
    font-weight:700;font-size:14px;text-align:center;transition:background .2s,transform .1s}
  .af-btn:active{transform:scale(.97)}
  .af-btn-outline{border:2px solid var(--navy);color:var(--navy)}
  .af-btn-solid{background:var(--yellow);color:var(--navy-dark)}
}

/* ---------- HOME SLIDER ---------- */
@media (max-width:860px){
  /* Stacked layout: scale from the viewport height only */
  .hs{--u:clamp(.64px,(100vh - 72px)/850,1px)}
  @supports (height:100svh){.hs{--u:clamp(.64px,(100svh - 72px)/850,1px)}}
  .hs-slide{min-height:0;align-items:flex-start}
  .hs-inner{grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*52);padding:calc(var(--u)*34) 16px 76px}
  .hs-copy{max-width:none}
  .hs-eyebrow{font-size:max(10.5px,calc(var(--u)*11.5));margin-bottom:calc(var(--u)*14)}
  .hs-title{font-size:calc(var(--u)*31)}
  .hs-sub{font-size:max(13px,calc(var(--u)*15.5));margin-top:calc(var(--u)*12);max-width:none}
  .hs-actions{gap:calc(var(--u)*10);margin-top:calc(var(--u)*20)}
  .hs-btn{height:calc(var(--u)*50);padding:0 20px;font-size:max(13px,calc(var(--u)*15));flex:1 1 auto}
  .hs-feats{gap:calc(var(--u)*10) 20px;margin-top:calc(var(--u)*24);padding-top:calc(var(--u)*16)}

  .hs-s1::before{clip-path:polygon(0 74%,100% 60%,100% 100%,0 100%)}
  .hs-s1::after{clip-path:polygon(55% 100%,100% 78%,100% 100%)}
  .hs-s1.is-active::before,.hs-s1.is-active::after{animation-name:hsPanelUp}
  .hs-detector{max-width:calc(var(--u)*230)}
  .hs-megaphone{max-width:calc(var(--u)*200)}
  .hs-s3{background-image:radial-gradient(circle calc(var(--u)*230) at 50% calc(100% - var(--u)*170),#ffcf3d 99.6%,transparent 100%)}
  .hs-s2{box-shadow:inset 6px 0 0 var(--yellow)}
  .hs-brands{max-width:none;padding:calc(var(--u)*16);border-radius:20px}
  .hs-brands > p{margin-bottom:calc(var(--u)*12)}
  .hs-tiles{gap:8px}
  .hs-tile{min-height:calc(var(--u)*60);padding:6px}
  .hs-tile strong{font-size:max(12px,calc(var(--u)*15))}
  .hs-tile span{font-size:max(10px,calc(var(--u)*10.5));line-height:1.2}
  .hs-tile.ask strong{font-size:max(11px,calc(var(--u)*12))}

  .hs-ui{bottom:18px;padding:0 16px}
}
@keyframes hsPanelUp{from{transform:translateY(40%)}}

/* ---------- SMALL PHONES ---------- */
@media (max-width:520px){
  .af-list,.af-brands{grid-template-columns:1fr}
  .af-logo img{height:42px}
  .af-wa{width:40px;height:40px}
}
@media (max-width:360px){
  .af-nav > .af-nav-actions{grid-template-columns:1fr}
  .af-cat{font-size:13px}
}

/* ---------- QUOTE MODAL (bottom sheet on phones) ---------- */
@media (max-width:640px){
  .qm{padding:48px 0 0}
  .qm-dialog{margin:auto 0 0;border-radius:20px 20px 0 0;transform:translateY(100%);opacity:1;
    transition:transform .45s cubic-bezier(.2,.9,.3,1)}
  .quote-card{padding:22px 18px 28px}
  .quote-card .g2,.quote-card .who{grid-template-columns:1fr}
  .quote-card .qh h2{font-size:24px}
  .quote-card .actions .btn{width:100%;justify-content:center}
}

/* ---------- ABOUT ---------- */
@media (max-width:1024px){
  .ab-inner{gap:40px}
}
@media (max-width:860px){
  .ab{padding:64px 0}
  .ab-inner{grid-template-columns:minmax(0,1fr);gap:44px;padding:0 16px}
  .ab-copy{order:-1}
  .ab-panel{font-size:15.5px}
  .ab-card{padding:16px;border-radius:20px}
  .ab-visual::before{border-radius:20px;transform:rotate(-2deg)}
}
/* ---------- JUST LAUNCHED ---------- */
@media (max-width:860px){
  .nl{--gut:16px;padding:40px 0 24px}
  .nl-head{padding:0 16px}
  .nl-track{gap:16px;margin-top:28px}
  .nl-arrow{width:48px;height:48px}
  /* No hover on touch screens, so the quote pill stays open */
  .nl-go span{max-width:120px;opacity:1;margin-right:10px}
}
@media (max-width:640px){
  .nl-head{flex-direction:column;align-items:stretch;gap:24px}
  .nl-ctrl{justify-items:start}
  .nl-sku,.nl-name,.nl-foot{margin-left:16px;margin-right:16px}
  .nl-card{padding-bottom:16px}
}

@media (max-width:520px){
  .ab-tabs{display:flex}
  .ab-tab{flex:1;padding:0 8px;font-size:13px}
  .ab-why{grid-template-columns:1fr}
  .ab-actions .ab-btn{flex:1 1 auto}
}