/* OTTERS mobile usability update, 15 October 2026.
   All layout overrides are restricted to mobile and small tablets.
   Desktop dimensions, typography and colours remain unchanged. */
.mobile-call{display:none}
@media (max-width:900px){
  /* Keep recovery contacts reachable without opening the menu. */
  .site-header{z-index:100}
  .header-inner{position:relative}
  .site-nav{z-index:102;max-height:calc(100dvh - 82px);overflow-y:auto;overscroll-behavior:contain}
  .site-nav a{display:flex;align-items:center;justify-content:center;min-height:48px;text-align:center;white-space:normal}
  .site-nav a.nav-whatsapp{min-height:48px}
  .site-nav .nav-cta{margin-top:6px}
  .menu-button{flex-shrink:0;cursor:pointer}
}
@media (max-width:767px){
  html{scroll-padding-top:84px}
  body{overflow-x:clip;-webkit-text-size-adjust:100%}
  main,main>*{min-width:0}
  .shell,.wrap{width:calc(100% - 32px);max-width:1160px;margin-left:auto;margin-right:auto}
  .site-header .header-inner{min-height:68px;gap:10px}
  .brand-lockup{width:148px;flex:0 0 148px;min-width:0}
  .mobile-call{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 13px;background:#10283a;border:1px solid #425b6e;color:#fff;border-radius:10px;text-decoration:none;font-weight:750;font-size:14px;margin-left:auto}
  .mobile-call:focus-visible{outline:3px solid #ff8d41;outline-offset:2px}
  .menu-button{display:block;width:44px;height:44px;flex:0 0 44px;border-color:#526777;touch-action:manipulation}
  .site-nav{top:68px;left:16px;right:16px;box-shadow:0 20px 48px #0008}
  .site-nav a{min-height:48px}
  .pagehead{padding:28px 0 15px}
  .pagehead h1{font-size:clamp(1.8rem,7.4vw,2.5rem);line-height:1.12;letter-spacing:-.035em;margin:8px 0 11px;overflow-wrap:break-word}
  .pagehead .muted{font-size:1rem;line-height:1.5}
  .availability-banner{max-width:100%;padding:13px 14px;font-size:.91rem;line-height:1.5;overflow-wrap:anywhere}
  .wizard{padding:8px 0 44px}
  .wizard>.card{padding:18px 16px 20px;border-radius:17px;box-shadow:0 6px 22px rgba(9,26,42,.06);min-width:0}
  /* Show one clear booking row instead of six uneven wrapped pills. */
  .progress{display:flex;flex-wrap:nowrap;gap:7px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:2px 1px 10px;margin:0 0 17px;scrollbar-width:thin}
  .progress span{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;padding:8px 11px;font-size:.77rem;line-height:1.25}
  .step h2{font-size:clamp(1.3rem,5.8vw,1.65rem);line-height:1.22;letter-spacing:-.025em}
  .step .intro{font-size:.94rem;line-height:1.5;margin-bottom:19px}
  .formgrid,.columns,.safety-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .safety-grid fieldset{min-width:0;margin:0;padding:10px 12px 11px;border-radius:11px}
  .safety-grid legend{max-width:100%;padding:0 4px;font-size:.92rem;line-height:1.38;overflow-wrap:break-word}
  .safety-grid label{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:3px 2px;margin:0 20px 0 0;cursor:pointer;touch-action:manipulation}
  .safety-grid input[type=radio]{width:18px;height:18px;margin:0;accent-color:#086ee6;flex-shrink:0}
  .fieldrow{min-width:0}
  .fieldrow input,.fieldrow select,.fieldrow textarea{max-width:100%;min-height:48px;font-size:16px}
  .fieldrow input[type=checkbox]{min-height:initial}
  .fieldrow .radio{align-items:flex-start;gap:11px;min-height:48px;font-size:.94rem;line-height:1.45}
  .fieldrow .radio input{flex:0 0 auto;margin-top:4px}
  .btn{min-height:48px;touch-action:manipulation;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
  .step-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:16px}
  .step-actions>.btn,.step-actions>button,.step-actions>a{width:100%;min-width:0;min-height:48px;text-align:center}
  .step-actions .btn{padding:12px}
  .safety-escalation{max-width:100%;margin:12px 0 20px;padding:15px;border-left-width:5px;border-radius:11px}
  .safety-escalation h3{font-size:1.12rem;line-height:1.3;margin:0 0 8px}
  .safety-escalation p{font-size:.94rem;line-height:1.52;overflow-wrap:anywhere;margin:8px 0 12px}
  .safety-escalation .safety-small{font-size:.85rem}
  .safety-escalation-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin-top:14px}
  .safety-escalation-actions .btn{width:100%;min-height:49px}
  #wizard{scroll-margin-top:88px}
  #main,.pagehead,.section,.hero{scroll-margin-top:80px}
  .offer{padding:15px}
  .offerhead{flex-direction:column;gap:10px}
  .money{font-size:1.45rem}
  .suggestions{max-height:min(50dvh,280px)}
  .footer-inner{grid-template-columns:1fr;gap:18px;padding:27px 0}
  .footer-copy{min-width:0}
  .footer-copy p{font-size:.87rem;line-height:1.65;overflow-wrap:anywhere}
  .footer-copy a{overflow-wrap:anywhere}
  /* Keep the home page balanced on smaller devices. */
  .hero{padding:40px 0 48px}
  .hero h1{font-size:clamp(2.35rem,10.5vw,3.7rem);line-height:1.03;overflow-wrap:break-word}
  .hero-text{font-size:1.04rem;line-height:1.55}
  .hero-actions{gap:10px}
  .hero-actions .button{min-height:50px}
  .safety-strip{width:100%;max-width:100%;border-radius:15px}
  .step-card,.service-card,.operator-panel{padding:20px}
  .boundary-card{padding:21px}
}
@media (max-width:359px){
  .shell,.wrap{width:calc(100% - 24px)}
  .brand-lockup{width:132px;flex-basis:132px}
  .site-header .header-inner{gap:7px}
  .mobile-call{padding:0 10px;font-size:13px}
  .site-nav{left:12px;right:12px}
  .wizard>.card{padding:16px 12px}
  .progress span{font-size:.74rem;padding:8px 10px}
  .pagehead h1{font-size:1.8rem}
  .safety-escalation{padding:12px}
}
@media (prefers-reduced-motion:reduce){.progress{scroll-behavior:auto}}