/* =========================================================
   Advanced Mobility — site.css
   Palette sampled from the client's logo:
     red  #CD1515 (logo "Mobility")   ink #231414 (tagline maroon-black)
   Type: Lexend (display) / Atkinson Hyperlegible (body) —
   both designed for readability; this audience skews older.
   ========================================================= */

/* ---------- fonts ---------- */
@font-face{font-family:"Lexend";src:url(/assets/fonts/lexend.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --red:#CD1515; --red-dk:#A80F0F; --red-tint:#FBEAE8;
  --ink:#231414; --ink-2:#584646; --line:#E6DCD7;
  --paper:#FBF8F6; --sand:#F3EDE9; --white:#fff;
  --dark:#231414;
  --r:18px; --r-sm:12px;
  --shadow:0 1px 2px rgba(35,20,20,.06),0 8px 24px rgba(35,20,20,.07);
  --display:"Lexend",system-ui,sans-serif;
  --body:"Atkinson",system-ui,sans-serif;
  --hdr:84px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.6 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-dk);text-underline-offset:3px}
a:hover{color:var(--red)}
h1,h2,h3{font-family:var(--display);line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;font-weight:600;color:var(--ink)}
h1{font-size:clamp(2.3rem,4.4vw,3.8rem)}
h2{font-size:clamp(1.85rem,3vw,2.6rem)}
h3{font-size:1.25rem;letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}
.ic{width:1.25em;height:1.25em;flex:none;stroke-width:1.9}
.muted{color:var(--ink-2)} .small{font-size:.95rem}
.mt{margin-top:1.5em}
.eyebrow{font-family:var(--display);font-size:.82rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--red-dk);margin:0 0 .9rem;display:flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--red);flex:none}
.eyebrow .ic{display:none}
.lede{font-size:1.2rem;color:var(--ink-2);max-width:62ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font:600 1.05rem/1 var(--display);padding:.95em 1.4em;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn-lg{font-size:1.12rem;padding:1.05em 1.6em}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dk);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--sand);color:var(--ink)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(251,248,246,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:24px;height:var(--hdr)}
.brand{flex:none;display:block}
.brand img{height:52px;width:auto}
.nav{margin-left:auto}
.nav ul{display:flex;gap:4px}
.nav a{display:block;font:500 1.02rem/1 var(--display);color:var(--ink);text-decoration:none;padding:.75em .9em;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--sand)}
.nav a[aria-current]{color:var(--red-dk);background:var(--red-tint)}
.hdr-call{padding:.8em 1.2em;font-size:1rem}
.menu-btn{display:none;background:none;border:0;padding:10px;margin-right:-10px;color:var(--ink);cursor:pointer}
.menu-btn .ic{width:28px;height:28px}
.menu-btn .i-close{display:none}
@media (max-width:1060px){
  .nav a{padding:.75em .65em}
}
@media (max-width:980px){
  .menu-btn{display:block}
  .hdr-call{margin-left:auto}
  .nav{position:fixed;inset:var(--hdr) 0 auto 0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:12px clamp(16px,4vw,40px) 20px;display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:2px}
  .nav a{font-size:1.2rem;padding:.9em .6em}
  .menu-btn[aria-expanded=true] .i-open{display:none}
  .menu-btn[aria-expanded=true] .i-close{display:block}
}
@media (max-width:560px){
  :root{--hdr:68px}
  .brand img{height:40px}
  .hdr-in{gap:10px}
  .hdr-call .lbl{display:none}
  .hdr-call{padding:.75em}
  .hdr-call .ic{width:1.35em;height:1.35em}
}

/* ---------- photo slots ---------- */
.photo{margin:0;border-radius:var(--r);overflow:hidden;background:var(--sand);position:relative;width:100%}
.photo img{width:100%;height:100%;object-fit:cover}
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;color:var(--ink-2);
  background:repeating-linear-gradient(135deg,#F0E8E3 0 14px,#F5EFEB 14px 28px);border:2px dashed #D9CBC4}
.ph-ic{width:44px;height:44px;stroke-width:1.4;color:#B9A39A}
.ph figcaption,.ph span{font:500 .95rem/1.4 var(--display);max-width:28ch}

/* ---------- hero ---------- */
.hero{padding:clamp(32px,5vw,72px) 0 0;position:relative}
.hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero h1{max-width:15ch}
.hero-sub{font-size:1.25rem;color:var(--ink-2);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 18px}
.hero-note{display:flex;align-items:center;gap:.5em;color:var(--ink-2);font-size:1rem}
.hero-media{position:relative}
.hero-photo{border-radius:28px 28px 28px 120px;aspect-ratio:5/6;max-height:640px;background:#E9E1DC}
.hero-photo img,.hero-photo video{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo img{object-position:50% 40%}
.hero-dot{position:absolute;width:clamp(44px,5vw,68px);aspect-ratio:1;border-radius:50%;background:var(--red);top:-18px;right:14%;box-shadow:0 10px 30px rgba(205,21,21,.35)}
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(36px,5vw,64px);background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.proof li{display:flex;gap:14px;padding:22px 24px;align-items:flex-start}
.proof li+li{border-left:1px solid var(--line)}
.proof .ic{color:var(--red);width:28px;height:28px;margin-top:2px}
.proof strong{display:block;font:600 1.05rem/1.3 var(--display)}
.proof span{display:block;color:var(--ink-2);font-size:.98rem;line-height:1.45;margin-top:4px}
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr}
  .hero-media{max-width:560px}
  .hero-photo{aspect-ratio:1/1;border-radius:24px 24px 24px 80px}
  .proof{grid-template-columns:1fr 1fr}
  .proof li:nth-child(3){border-left:0}
  .proof li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .proof{grid-template-columns:1fr}
  .proof li+li{border-left:0;border-top:1px solid var(--line)}
  .hero-cta .btn{width:100%}
}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,8vw,112px) 0}
.sec-sand{background:var(--sand)}
.sec-head{margin-bottom:clamp(28px,4vw,48px)}
.sec-head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.more{display:inline-flex;align-items:center;gap:.4em;font:600 1.05rem var(--display);text-decoration:none;white-space:nowrap}
.check li{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.check .ic{color:var(--red);margin-top:3px}

/* ---------- product categories ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px}
.cat{display:flex;flex-direction:column;gap:8px;height:100%;padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);transition:box-shadow .15s,transform .15s,border-color .15s}
.cat:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#d6c7c0;color:var(--ink)}
.cat .ic{width:34px;height:34px;color:var(--red);stroke-width:1.6;margin-bottom:6px}
.cat strong{font:600 1.18rem/1.25 var(--display)}
.cat span{color:var(--ink-2);font-size:1rem;line-height:1.5}

/* ---------- services ---------- */
.svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(20px,3vw,48px)}
.svc{border-top:3px solid var(--ink);padding-top:22px}
.svc .ic{width:32px;height:32px;color:var(--red);stroke-width:1.6;margin-bottom:12px}
.svc h3{margin-bottom:.25em}
.svc-lead{font:500 1.05rem var(--display);color:var(--red-dk);margin-bottom:.6em}
.svc p:last-child{color:var(--ink-2);margin:0}
@media (max-width:900px){.svcs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svcs{grid-template-columns:1fr}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.steps li{background:#fff;border-radius:var(--r);padding:28px 24px;position:relative;border:1px solid var(--line)}
.step-n{position:absolute;top:22px;right:22px;font:600 2.4rem/1 var(--display);color:var(--red-tint);-webkit-text-stroke:1px #E9B5AF}
.steps .ic{width:32px;height:32px;color:var(--red);stroke-width:1.6;margin-bottom:16px}
.steps p{color:var(--ink-2);margin:0;font-size:1.02rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- family ---------- */
.fam-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.fam-in .check{margin:20px 0 28px}
@media (max-width:900px){.fam-in{grid-template-columns:1fr}}

/* ---------- locations ---------- */
.locs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:20px}
.loc{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.loc .photo{border-radius:0;border-width:0 0 2px}
.loc-body{padding:22px 24px 24px}
.loc-body p{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;color:var(--ink-2)}
.loc-body .ic{color:var(--red);margin-top:3px}
.tag{display:inline-block!important;font:600 .78rem var(--display);letter-spacing:.14em;text-transform:uppercase;background:var(--red-tint);color:var(--red-dk)!important;padding:5px 10px;border-radius:999px}
.loc-links{gap:18px!important;flex-wrap:wrap;margin-top:14px!important}
.loc-links a{display:inline-flex;gap:8px;align-items:center;font:600 1rem var(--display)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.qa{border-bottom:1px solid var(--line)}
.qa:first-child{border-top:1px solid var(--line)}
.qa summary{display:flex;justify-content:space-between;gap:16px;align-items:center;cursor:pointer;list-style:none;padding:22px 0;font:500 1.15rem/1.35 var(--display)}
.qa summary::-webkit-details-marker{display:none}
.qa .chev{transition:transform .2s;color:var(--red)}
.qa[open] .chev{transform:rotate(180deg)}
.qa p{color:var(--ink-2);padding-bottom:20px;margin:0;max-width:64ch}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.band{background:var(--dark);color:#F1E6E2;padding:clamp(56px,7vw,88px) 0}
.band-in{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.band h2{color:#fff;max-width:22ch}
.band p{margin:0;color:#D9C8C2}
.band-cta{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:560px){.band-cta .btn{width:100%}}

/* ---------- inner pages ---------- */
.phero{padding:clamp(48px,7vw,96px) 0 clamp(16px,3vw,32px)}
.phero h1{max-width:20ch}
.phero.center{text-align:center;padding-bottom:clamp(64px,8vw,120px)}
.phero.center h1,.phero.center .lede{margin-inline:auto}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.jump a{display:block;padding:.6em 1em;border-radius:999px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--ink);font:500 .98rem var(--display)}
.jump a:hover{border-color:var(--red);color:var(--red-dk)}
.prods{display:grid;gap:clamp(56px,7vw,96px)}
.prod,.svc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.prod.flip .photo{order:2}
.prod-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.prod .check{margin-top:16px}
.svc-rows{display:grid;gap:clamp(48px,6vw,80px)}
.svc-row:nth-child(even) .photo{order:2}
@media (max-width:860px){.prod,.svc-row{grid-template-columns:minmax(0,1fr)}.prod.flip .photo,.svc-row:nth-child(even) .photo{order:0}}
.ph-text{border:2px dashed #D9CBC4;border-radius:var(--r-sm);padding:20px;background:#fff;color:var(--ink-2);font-style:italic}

/* ---------- footer ---------- */
.ftr{background:#1A0E0E;color:#D9C8C2;padding:72px 0 0;font-size:1rem}
.ftr a{color:#fff;text-decoration:none}
.ftr a:hover{text-decoration:underline;color:#fff}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.ftr-brand img{width:240px;margin-bottom:22px}
.ftr address{font-style:normal;line-height:1.7;margin-bottom:12px}
.ftr .muted{color:#BFA9A3}
.ftr-h{font:600 .82rem var(--display);letter-spacing:.18em;text-transform:uppercase;color:#F09A92;margin-bottom:16px}
.ftr-list li{margin-bottom:10px;line-height:1.45}
.ftr-base{border-top:1px solid rgba(255,255,255,.12);margin-top:56px;padding-top:22px;padding-bottom:22px;font-size:.92rem;color:#BFA9A3}
.ftr-base p{margin:0}
@media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr-grid{grid-template-columns:1fr}}

/* ---------- mobile call bar ---------- */
.callbar{display:none}
@media (max-width:760px){
  .callbar{display:flex;align-items:center;justify-content:center;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;background:var(--red);color:#fff;font:600 1.1rem var(--display);padding:16px;border-radius:999px;text-decoration:none;box-shadow:0 8px 24px rgba(35,20,20,.3)}
  .callbar:hover{color:#fff}
  body{padding-bottom:84px}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* phone: product categories as a compact 2-up grid */
@media (max-width:560px){
  .cats{grid-template-columns:1fr 1fr;gap:10px}
  .cat{padding:16px}
  .cat strong{font-size:1.02rem}
  .cat span{display:none}
}

.prod-cta .btn,.svc-row .btn{white-space:normal;text-align:center;line-height:1.25}

/* ---------- v2: informational DME site ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sec-head.center{text-align:center}.sec-head.center .eyebrow{justify-content:center}.sec-head.center .lede{margin-inline:auto}
.sec-tight{padding:0 0 clamp(56px,7vw,96px)}

/* video hero: pause control (WCAG 2.2.2) */
.hero-video{position:relative}
.vid-toggle{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(35,20,20,.72);color:#fff;display:grid;place-items:center;cursor:pointer}
.vid-toggle:hover{background:rgba(35,20,20,.9)}
.vid-toggle .ic{width:20px;height:20px}
.vid-toggle .i-play{display:none}
.vid-toggle[aria-pressed=true] .i-play{display:block}
.vid-toggle[aria-pressed=true] .i-pause{display:none}

/* SIGNATURE: hospital-to-home journey, seen from both sides */
.paths{padding-top:clamp(72px,9vw,120px)}
.path-tabs{display:flex;justify-content:center;gap:6px;margin:0 auto 34px;padding:6px;background:var(--sand);border-radius:999px;width:max-content;max-width:100%}
.path-tab{display:inline-flex;align-items:center;gap:10px;font:600 1.05rem/1 var(--display);color:var(--ink-2);background:transparent;border:0;border-radius:999px;padding:.9em 1.4em;cursor:pointer;white-space:nowrap}
.path-tab .ic{width:22px;height:22px}
.path-tab:hover{color:var(--ink)}
.path-tab[aria-selected=true]{background:var(--dark);color:#fff}
.path-tab[aria-selected=true] .ic{color:#F09A92}
.path-intro{text-align:center;color:var(--ink-2);font-size:1.15rem;max-width:60ch;margin:0 auto 34px}
.path-panel{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.journey::before{content:"";position:absolute;left:12%;right:12%;top:46px;height:2px;background:repeating-linear-gradient(90deg,#E2B4AE 0 10px,transparent 10px 18px);z-index:0}
.journey li{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px 24px;text-align:center}
.journey .ic{width:30px;height:30px;color:#fff;background:var(--red);border-radius:50%;padding:13px;box-sizing:content-box;margin:0 auto 16px;display:block;box-shadow:0 0 0 6px var(--paper)}
.journey h3{margin-bottom:.4em}
.journey p{color:var(--ink-2);font-size:1.02rem;margin:0}
.journey .step-n{position:absolute;top:14px;left:16px;font:600 .9rem var(--display);color:var(--red-dk);background:var(--red-tint);border-radius:999px;width:28px;height:28px;display:grid;place-items:center}
.paths-cta{text-align:center;margin:34px 0 0}
@media (max-width:900px){.journey{grid-template-columns:1fr 1fr}.journey::before{display:none}}
@media (max-width:560px){
  .journey{grid-template-columns:1fr}
  .journey li{text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:16px;padding:20px}
  .journey .ic{grid-row:span 2;margin:0}
  .journey .step-n{display:none}
  .path-tabs{width:100%}
  .path-tab{flex:1;justify-content:center;padding:.85em .6em;font-size:.98rem;white-space:normal;text-align:center}
  .path-tab .ic{display:none}
  .paths-cta .btn{width:100%}
}

/* manufacturers line */
.makers{margin-top:clamp(28px,4vw,44px);padding-top:24px;border-top:1px solid var(--line)}
.makers-k{font:500 .8rem var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
.makers ul{display:flex;flex-wrap:wrap;gap:12px 40px}
.makers li{display:flex;flex-direction:column}
.makers strong{font:600 1.2rem var(--display)}
.makers span{color:var(--ink-2);font-size:.98rem}

/* private pay */
.pp{display:flex;align-items:center;gap:24px;background:var(--red-tint);border:1px solid #F1C9C4;border-radius:var(--r);padding:clamp(22px,3vw,34px)}
.pp h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-bottom:.3em}
.pp p{margin:0;color:var(--ink-2)}
.pp .btn{margin-left:auto}
.pp-ic{width:44px;height:44px;color:var(--red);flex:none}
@media (max-width:760px){.pp{flex-direction:column;align-items:flex-start}.pp .btn{margin-left:0;width:100%}.pp-ic{display:none}}

/* note card */
.note-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.note-ic{width:32px;height:32px;color:var(--red);margin-bottom:12px}
.note-card p{color:var(--ink-2);margin:0}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,56px);align-items:stretch}
.contact-card{display:grid;gap:28px;align-content:start}
.big-phone{display:flex;align-items:center;gap:18px;background:var(--red);color:#fff;text-decoration:none;border-radius:var(--r);padding:24px 28px;font:600 clamp(1.7rem,3.4vw,2.4rem)/1.1 var(--display)}
.big-phone:hover{background:var(--red-dk);color:#fff}
.big-phone .ic{width:40px;height:40px}
.big-phone small{display:block;font:500 .85rem var(--display);letter-spacing:.16em;text-transform:uppercase;opacity:.85;margin-bottom:6px}
.contact-lines p{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;font-size:1.15rem}
.contact-lines .ic{color:var(--red);margin-top:4px}
.contact-lines .btn .ic{color:inherit;margin:0}
.contact-notes h2{font-size:1.4rem}
.map-wrap{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--sand);min-height:420px}
.map-wrap iframe{width:100%;height:100%;min-height:420px;border:0;display:block}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}.map-wrap,.map-wrap iframe{min-height:320px}}
.ftr address{font-style:normal;line-height:1.7}
.hero-photo picture{display:block;height:100%}

/* ---------- v3: full-bleed hero, headline over the media ---------- */
/* Nothing is blurred or tinted across the media. A gradient sits only behind
   the text column and fades to fully clear across the rest of the frame. */
.hero-full{position:relative;padding:0;min-height:calc(100svh - var(--hdr));max-height:960px;display:flex;align-items:center;overflow:hidden;background:var(--dark)}
.hero-bg{position:absolute;inset:0}
.hero-bg picture{display:block;width:100%;height:100%}
.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover;display:block}
.hero--photo .hero-bg img{object-position:70% 35%}
.hero--video .hero-bg video{object-position:58% 50%}
.hero-scrim{position:absolute;inset:0;pointer-events:none}
.hero-full .hero-in{position:relative;z-index:1;display:block;padding-block:clamp(48px,7vw,96px)}
.hero-full .hero-copy{max-width:600px}
.hero-full h1{max-width:14ch}
/* photo: bright, airy room -> light wash behind dark text */
.hero--photo{background:var(--paper)}
.hero--photo .hero-scrim{background:linear-gradient(90deg,rgba(251,248,246,.94) 0%,rgba(251,248,246,.82) 30%,rgba(251,248,246,.35) 46%,rgba(251,248,246,0) 58%)}
/* video: darker scene -> dark wash behind white text */
.hero--video .hero-scrim{background:linear-gradient(90deg,rgba(26,14,14,.78) 0%,rgba(26,14,14,.62) 32%,rgba(26,14,14,.22) 50%,rgba(26,14,14,0) 62%)}
.hero--video h1,.hero--video .hero-sub,.hero--video .hero-note{color:#fff}
.hero--video .hero-sub{color:#F3E9E5}
.hero--video .eyebrow{color:#F6B3AC}
.hero--video .eyebrow::before{background:#F6B3AC}
.hero--video .btn-ghost{color:#fff;border-color:rgba(255,255,255,.85)}
.hero--video .btn-ghost:hover{background:#fff;color:var(--ink)}
.hero--video h1,.hero--video .hero-sub{text-shadow:0 1px 18px rgba(0,0,0,.25)}
.hero-full .vid-toggle{z-index:2}
.proof-sec{padding-top:clamp(28px,4vw,48px)}
.proof-sec .proof{margin-top:0}

@media (max-aspect-ratio:1/1), (max-width:760px){
  .hero-full{align-items:flex-end;max-height:none;min-height:calc(100svh - var(--hdr))}
  .hero-full .hero-in{padding-block:0 28px}
  .hero--photo .hero-bg img{object-position:50% 30%}
  .hero--video .hero-bg video{object-position:50% 50%}
  .hero--photo .hero-scrim{background:linear-gradient(0deg,rgba(251,248,246,.96) 0%,rgba(251,248,246,.88) 38%,rgba(251,248,246,.4) 52%,rgba(251,248,246,0) 64%)}
  .hero--video .hero-scrim{background:linear-gradient(0deg,rgba(26,14,14,.86) 0%,rgba(26,14,14,.7) 38%,rgba(26,14,14,.25) 54%,rgba(26,14,14,0) 66%)}
  .hero-full .vid-toggle{top:16px;bottom:auto}
}
@media (max-width:760px){
  .hero-full .hero-in{padding-bottom:104px}   /* clear the fixed call bar */
  .hero-full .hero-sub{font-size:1.08rem}
  .hero-full .hero-note{display:none}
  .hero-full .hero-cta{margin:20px 0 0}
  .hero-full .hero-cta .btn-red{display:none}  /* the fixed call bar is the phone CTA on phones */
}
/* keep the copy column clear of the people in the frame */
.hero-full .hero-copy{max-width:540px}
.hero-full h1{font-size:clamp(2.3rem,3.9vw,3.4rem);max-width:none}
.hero-full .hero-sub{max-width:36ch}
/* phones: headline + one button only, so the people stay visible above it */
@media (max-width:760px){
  .hero-full .eyebrow,.hero-full .hero-sub{display:none}
  .hero-full h1{font-size:clamp(2rem,8.4vw,2.5rem);margin-bottom:0}
  .hero--photo .hero-scrim{background:linear-gradient(0deg,rgba(251,248,246,.96) 0%,rgba(251,248,246,.85) 26%,rgba(251,248,246,.35) 40%,rgba(251,248,246,0) 50%)}
  .hero--video .hero-scrim{background:linear-gradient(0deg,rgba(26,14,14,.86) 0%,rgba(26,14,14,.68) 26%,rgba(26,14,14,.22) 40%,rgba(26,14,14,0) 50%)}
  .hero--photo .hero-bg img{object-position:50% 20%}
}

/* ---------- v4: manufacturer product photos ---------- */
.photo.product{background:#fff;border:1px solid var(--line);aspect-ratio:4/3;display:flex;flex-direction:column}
.photo.product picture{display:block;flex:1;min-height:0}
.photo.product img{width:100%;height:100%;object-fit:contain;padding:4%}
.photo.product .shown{font-size:.85rem;color:var(--ink-2);padding:0 16px 12px;text-align:center}
.prod .photo.product{aspect-ratio:auto}
.prod .photo.product picture{aspect-ratio:4/3}
.cat.has-img{padding:0 0 22px;overflow:hidden}
.cat.has-img .cat-img{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0 0 12px}
.cat.has-img strong,.cat.has-img span{padding:0 20px}
@media (max-width:560px){.cat.has-img{padding-bottom:14px}.cat.has-img strong{padding:0 12px}}

/* ---------- v5: photo anchored right, headline on plain background ----------
   Desktop (>=1240px): the photo is a 3:2 panel pinned to the right edge at full
   hero height. Its left ~18% (the sofa) fades into the page; the people are never
   covered, tinted or faded. The headline sits on the plain page colour.
   Hero height is capped so the family always clears the copy column. */
@media (min-width:1240px){
  .hero--photo.hero-full{min-height:0;height:clamp(560px,43vw,820px);max-height:none}
  .hero--photo .hero-bg{inset:0 0 0 auto;height:100%;aspect-ratio:3/2;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
  .hero--photo .hero-bg img{object-position:50% 50%}
  .hero--photo .hero-scrim{display:none}
  .hero--photo.hero-full .hero-copy{max-width:500px}
}
/* Tablets / small laptops (761-1239px): photo full-width on top, copy below it. */
@media (min-width:761px) and (max-width:1239px){
  .hero--photo.hero-full{display:block;min-height:0;max-height:none}
  .hero--photo .hero-bg{position:relative;inset:auto;aspect-ratio:3/2;max-height:70vh;width:100%}
  .hero--photo .hero-bg img{object-position:50% 40%}
  .hero--photo .hero-scrim{display:none}
  .hero--photo.hero-full .hero-in{padding-block:36px 8px}
  .hero--photo.hero-full .hero-copy{max-width:720px}
  .hero--photo.hero-full h1{max-width:20ch}
}
/* Phones (<=760px): same stacked layout as tablets, using a square crop that keeps
   all three people and the wheelchair. Nothing is laid over the photo. */
@media (max-width:760px){
  .hero--photo.hero-full{display:block;min-height:0;max-height:none}
  .hero--photo .hero-bg{position:relative;inset:auto;aspect-ratio:1/1;width:100%}
  .hero--photo .hero-bg img{object-position:50% 50%}
  .hero--photo .hero-scrim{display:none}
  .hero--photo.hero-full .hero-in{padding-block:24px 8px}
  .hero--photo.hero-full .eyebrow{display:flex}
  .hero--photo.hero-full .hero-sub{display:block}
  .hero--photo.hero-full h1{margin-bottom:.4em}
}
@media (min-width:1240px){
  .hero--photo.hero-full h1{font-size:clamp(2.4rem,3.3vw,3.4rem)}
  .hero--photo.hero-full .hero-in{padding-block:40px}
}

/* ---------- v6: headline over the photo at every size (replaces the v5 stacked
   tablet/phone layouts). People's faces are never under the text or the wash. ---------- */
/* Small laptops / landscape tablets: same pinned-right panel as desktop, compact copy. */
@media (min-width:980px) and (max-width:1239px){
  .hero--photo.hero-full{display:flex;align-items:center;height:540px;min-height:0;max-height:none}
  .hero--photo .hero-bg{position:absolute;inset:0 0 0 auto;width:auto;height:100%;max-height:none;aspect-ratio:3/2;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
  .hero--photo .hero-scrim{display:none}
  .hero--photo.hero-full .hero-in{padding-block:32px}
  .hero--photo.hero-full .hero-copy{max-width:300px}
  .hero--photo.hero-full h1{font-size:2.15rem;max-width:none}
  .hero--photo.hero-full .hero-sub,.hero--photo.hero-full .hero-note{display:none}
  .hero--photo.hero-full .hero-cta{flex-direction:column;align-items:flex-start;margin:20px 0 0}
}
/* Phones and portrait tablets: the photo fills the hero, headline over the lower part
   (floor and wheelchair). The light wash only covers the bottom ~half, below the faces. */
@media (max-width:979px){
  .hero--photo.hero-full{display:flex;align-items:flex-end;height:clamp(500px,133vw,760px);min-height:0;max-height:none}
  .hero--photo .hero-bg{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-height:none;-webkit-mask-image:none;mask-image:none}
  .hero--photo .hero-bg img{object-position:65% 30%}
  .hero--photo .hero-scrim{display:block;background:linear-gradient(0deg,rgba(251,248,246,.95) 0%,rgba(251,248,246,.88) 30%,rgba(251,248,246,.45) 44%,rgba(251,248,246,0) 54%)}
  .hero--photo.hero-full .hero-in{padding-block:0 32px}
  .hero--photo.hero-full .eyebrow,.hero--photo.hero-full .hero-sub,.hero--photo.hero-full .hero-note{display:none}
  .hero--photo.hero-full h1{font-size:clamp(1.95rem,7.6vw,2.8rem);max-width:16ch;margin-bottom:0}
  .hero--photo.hero-full .hero-cta{margin:18px 0 0}
}
@media (max-width:760px){
  .hero--photo.hero-full .hero-in{padding-bottom:100px}   /* clears the fixed call bar */
}
/* v6b: on portrait screens the only open area is the wall above everyone's heads, so the
   photo sits in the lower part of the hero and its top edge (curtains) fades into the page.
   The headline sits over that faded top. Faces, bodies and the wheelchair are untouched. */
@media (max-width:979px){
  .hero--photo.hero-full{align-items:flex-start;height:clamp(560px,150vw,900px)}
  .hero--photo .hero-bg{inset:auto 0 0 0;height:74%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
  .hero--photo .hero-bg img{object-position:62% 35%}
  .hero--photo .hero-scrim{display:none}
  .hero--photo.hero-full .hero-in{padding-block:28px 0}
  .hero--photo.hero-full .hero-cta{margin:20px 0 0}
}
@media (max-width:760px){
  .hero--photo.hero-full{height:clamp(540px,148vw,700px)}
  .hero--photo .hero-bg{height:76%}
  .hero--photo.hero-full .hero-in{padding:20px 16px 0}
  .hero--photo.hero-full h1{font-size:clamp(1.8rem,7.4vw,2.2rem)}
  .hero--photo.hero-full .hero-cta{display:none}   /* the fixed call bar is the phone CTA */
}
/* v6c: true overlay on portrait screens. The photo fills the whole hero; the headline sits
   over the wall/curtains above everyone's heads, with a light wash only across that strip. */
@media (max-width:979px){
  .hero--photo.hero-full{height:clamp(560px,100vw,820px)}
  .hero--photo .hero-bg{inset:0;height:100%;-webkit-mask-image:none;mask-image:none}
  .hero--photo .hero-bg img{object-position:55% 0%}
  .hero--photo .hero-scrim{display:block;background:linear-gradient(180deg,rgba(251,248,246,.92) 0%,rgba(251,248,246,.78) 12%,rgba(251,248,246,0) 21%)}
  .hero--photo.hero-full .hero-in{padding-block:22px 0}
  .hero--photo.hero-full h1{font-size:clamp(1.6rem,4.6vw,2.3rem);max-width:none;line-height:1.1}
  .hero--photo.hero-full .hero-cta{display:none}   /* header phone button / phone call bar carry the CTA */
}
@media (max-width:760px){
  .hero--photo.hero-full{height:clamp(540px,154vw,700px)}
  .hero--photo.hero-full .hero-in{padding:14px 16px 0}
  .hero--photo.hero-full h1{font-size:clamp(1.45rem,6.4vw,1.75rem)}
}
.fam-photo img{width:100%;height:100%;object-fit:cover;object-position:55% 40%}.fam-photo picture{display:block;height:100%}

/* ---------- v8: phones — whole photo (everyone in frame) with the intro below it ---------- */
@media (max-width:760px){
  .hero--photo.hero-full{display:block;height:auto;min-height:0;max-height:none}
  .hero--photo .hero-bg{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;-webkit-mask-image:none;mask-image:none}
  .hero--photo .hero-bg img{object-position:50% 50%}
  .hero--photo .hero-scrim{display:none}
  .hero--photo.hero-full .hero-in{padding:22px 16px 4px}
  .hero--photo.hero-full .eyebrow{display:flex;font-size:.74rem;letter-spacing:.16em}
  .hero--photo.hero-full .hero-sub{display:block;font-size:1.08rem;margin-top:.2em}
  .hero--photo.hero-full h1{font-size:clamp(1.9rem,8vw,2.3rem);line-height:1.12;margin-bottom:.35em}
  .hero--photo.hero-full .hero-cta{display:flex;margin:18px 0 0}
  .hero--photo.hero-full .hero-cta .btn-red{display:none}   /* the fixed call bar is the phone call button */
  .hero--photo.hero-full .hero-cta .btn{width:100%}
  .hero--photo.hero-full .hero-note{display:none}
}

/* ---------- v9: wide screens — keep the hero inside the page width ----------
   On big monitors the photo used to run to the far right edge while the copy sat
   inside the 1240px column, so the hero looked off-centre. From 1500px the photo
   ends where the header's phone button ends, and the hero is centred like the
   rest of the page. Height/copy width are sized so the family still clears the text. */
@media (min-width:1500px){
  .hero--photo.hero-full{height:620px}
  .hero--photo .hero-bg{inset:30px auto 30px auto;right:calc((100vw - 1240px) / 2 + 40px);height:auto;
    border-radius:24px;overflow:hidden}
  .hero--photo .hero-bg img{object-position:50% 45%}
  .hero--photo.hero-full .hero-copy{max-width:440px}
  .hero--photo.hero-full h1{font-size:3.1rem}
}
@media (min-width:1500px){
  .hero--photo.hero-full{height:700px}
  .hero--photo .hero-bg{inset:70px auto 70px auto;right:calc((100vw - 1240px) / 2 + 40px)}
  .hero--photo.hero-full .hero-copy{max-width:450px}
  .hero--photo.hero-full h1{font-size:2.9rem}
  .hero--photo.hero-full .hero-cta{flex-wrap:nowrap;gap:10px}
  .hero--photo.hero-full .hero-cta .btn-lg{font-size:1rem;padding:.95em 1.2em}
}
/* v10: two offices in the footer */
.ftr address.ftr-office{margin-bottom:18px}
.ftr address.ftr-office a{display:inline-block;margin-top:2px}
.ftr-phone{margin-top:-4px}
/* v11: both offices on the contact page */
.offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 28px;margin-bottom:8px}
.office .loc-addr{margin-bottom:10px}
.maps{display:grid;gap:18px;grid-template-rows:1fr 1fr}
.maps .map-wrap{min-height:300px}.maps .map-wrap iframe{min-height:300px}
.band-cta{flex-wrap:wrap}
.maps{grid-template-rows:none}
.map-item{display:flex;flex-direction:column}
.map-item .map-wrap{flex:1}
.map-label{display:flex;gap:8px;align-items:center;font:600 .95rem var(--display);margin:0 0 8px;color:var(--ink)}
.map-label .ic{color:var(--red)}
/* v12: contact page is addresses only (no maps) */
.contact-grid{grid-template-columns:minmax(0,760px)!important}
/* v13: "What we supply" as the top of the home page (no-hero version) */
.sec-top h1{font-size:clamp(2rem,4.2vw,3rem);margin:0 0 10px}
.sec-top{padding-top:clamp(36px,5vw,64px)}
/* Everstead credit beside the copyright line */
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}