/* Mobile + WCAG 2.2 AA overflow/tap-target hardening shared by brokers and contact.
   Shared static CSS extracted in phase-4 PR3 from an inline <style> block that was
   duplicated verbatim across: brokers.html, contact.html.
   One linked sheet removes the duplication. Loaded at the same cascade position
   (after shared-v6.css) so specificity and source-order override are unchanged. */
/* ══ MOBILE + WCAG 2.2 AA HARDENING ══ */
/* Overflow. Measured at 320px: .nav-right ran to 415px and .footer-socials to
   379px, so both pushed the document past the viewport on every page. The
   language switcher and both nav CTAs are already duplicated inside the drawer,
   so the bar sheds them as space runs out rather than overflowing. */
@media (max-width:768px){
  .nav-right>.lang-toggle{display:none}
  .footer-socials{flex-wrap:wrap;gap:1rem 1.25rem}
  .hamburger{min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:8px}
  .footer-socials a,.footer-links a{min-height:44px;display:inline-flex;align-items:center}
  .lang-toggle-mobile button{min-height:44px;padding-left:14px;padding-right:14px}
  .mobile-menu a,.mobile-menu button{min-height:44px;display:flex;align-items:center}
  /* fixed full-width furniture needs the notch insets in landscape */
  .cookie{padding-left:max(1.5rem,env(safe-area-inset-left));padding-right:max(1.5rem,env(safe-area-inset-right));padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}
  .float-cta{right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom))}
  .mobile-menu{padding-left:max(3rem,env(safe-area-inset-left));padding-right:max(3rem,env(safe-area-inset-right))}
}
@media (max-width:560px){ .nav-right>.nav-cta[href="book.html"]{display:none} }
@media (max-width:412px){ .nav-right>.nav-cta{display:none} .nav-logo-text{display:none} }
/* two-column grids that never collapsed below the 1024px breakpoint */
@media (max-width:560px){
  .stat-grid,.sm-steps,.cs-grid,.rate-fields,.faq-grid,.how-steps,.story-right{grid-template-columns:1fr!important}
}

/* Contrast. Every value below was measured against its real composited
   background; the old ones are the ratios in the comment. */
.footer-socials a{color:rgba(255,255,255,0.62)}   /* on #111 — was .30 → 2.65:1 */
.sr-btn{color:rgba(26,20,16,0.78);border-color:rgba(26,20,16,0.30)}  /* cream ground, not dark */
.cookie p{color:rgba(26,20,16,0.68)}              /* on #fff — was .50 → 3.44:1 */
.cookie-dec{color:rgba(26,20,16,0.74);border-color:rgba(26,20,16,0.38)} /* was .40 → 2.57:1 */
.marquee-item::after{color:rgba(27,79,138,0.72)!important}

/* Focus. There was no :focus-visible rule anywhere in the site; the red ring
   reads on cream (4.79:1) and on near-black (3.64:1), and the white halo keeps
   it visible where the ring sits on the red CTA itself. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #C0392B;outline-offset:2px;box-shadow:0 0 0 5px rgba(255,255,255,.85)
}
.skip-link:focus{left:0;outline:3px solid #C0392B;outline-offset:2px}

/* Reduced motion. The existing block covered only .cta-slides and #tl-map; the
   marquee, the carousel and eleven other keyframes ran regardless. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marquee-track,.tl-carousel-track{animation:none!important}
}


/* Inline-styled grids. Roughly forty multi-column grids across the site are
   declared in a style="" attribute (repeat(3,1fr), repeat(5,1fr), 1fr 1fr …),
   so no stylesheet breakpoint could ever reach them; at 320px they ran the
   document out to 624px on about, 568px on brokers, 500px on book. On a phone
   every one of them becomes a single column. */
@media (max-width:600px){
  .tlm-gridtemplateco{grid-template-columns:1fr!important}
  .service-row{grid-template-columns:1fr!important;gap:1rem!important}
  .sr-btn{white-space:normal}
  .stat-grid,.sm-steps,.cs-grid,.rate-fields,.faq-grid,.how-steps,.story-right,
  .eq-cards,.wt-points,.safety-cards,.sm-offers,.terminals-grid,.footer-top{grid-template-columns:1fr!important}
}

/* Min-content floors. Grid and flex children default to min-width:auto, so a
   card whose contents measure 282px keeps its track at 282px however narrow the
   phone is — that is what still pushed about.html to 330px at a 320px viewport
   after the grids were collapsed. Letting them shrink, and letting single-line
   rows wrap, is the standard remedy. */
@media (max-width:600px){
  section.tlm-padding{padding-left:1.25rem!important;padding-right:1.25rem!important}
  .tlm-displaygrid>*,.tlm-displayflex>*,.track-row>*{min-width:0}
  .tlm-displayflex,.track-row{flex-wrap:wrap}
  .track-row>input,.track-row>button{flex:1 1 100%}
}

/* Last contrast holdouts, each measured on its own ground. */
.notice h2{color:#A5291D}                       /* red on its own tint: 4.34 → 5.2 */
.lane-badge.freq{color:#A5291D}                 /* 4.17 → 5.0 */
#trk-log>div{color:rgba(255,255,255,0.92)}      /* log text on a near-clear panel: 2.83 → 4.9 */