/*
Theme Name: Star Center
Theme URI: https://starcenterdetroit.org
Author: LCMS Digital Solutions
Description: Custom marketing theme for Star Center — outpatient opioid-addiction treatment center (Wayne County / Detroit, MI). Pixel-faithful recreation of the Figma handoff with editable content via the WordPress block editor and ACF.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.0
Text Domain: star-center
*/

:root{
  --red:#8d0b0b;
  --cream:#fcf8f4;
  --offwhite:#f9fbfb;
  --gray:#f3f4f6;
  --teal-card:#a4c6bc;
  --teal-icon:#7daea0;
  --teal-accent:#629d8c;
  --teal-bright:#35aaaa;
  --ink:#000;
  --ink-2:#1a1a1a;
  --head:#333;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:#1a1a1a;
  font-family:'Poppins',system-ui,sans-serif;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---- native responsive layout (no canvas scaling = crisp) ---- */
#frame{ position:relative; width:100%; }
.stage{ position:relative; width:100%; background:#fff; }
:root{ --sec-x: max(28px, calc((100% - 1354px) / 2)); --gut: max(28px, calc((100% - 1354px) / 2)); --gut-hero: max(28px, calc((100% - 1240px) / 2)); }

/* ============ NAV ============ */
.nav{
  height:84px; width:100%;
  background:#fff;
  box-shadow:0 6px 22px rgba(21,21,21,.06);
  display:flex; align-items:center;
  position:relative; z-index:10;
}
.nav__inner{
  width:100%; margin:0 auto; padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between;
}
.nav__logo{ display:flex; align-items:center; }
.nav__logo img, .nav__logo svg{ height:60px; width:auto; display:block; }
.nav__logo .logo-lock{ display:flex; flex-direction:column; align-items:center; gap:4px; line-height:1; }
.nav__logo .logo-mark{ height:44px; width:auto; display:block; color:var(--red); }
.nav__logo .logo-word{ font-family:'Manrope',sans-serif; font-weight:800; font-size:11px; letter-spacing:.2em; color:var(--red); white-space:nowrap; }
.m-bar__logo .logo-lock{ display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1; }
.m-bar__logo .logo-mark{ height:30px; width:auto; display:block; color:var(--red); }
.m-bar__logo .logo-word{ font-family:'Manrope',sans-serif; font-weight:800; font-size:8px; letter-spacing:.16em; color:var(--red); white-space:nowrap; }
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links > a, .nav__item > a{
  font-family:'Poppins',sans-serif; font-size:18px; color:#1a1a1a;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
}
.nav__links > a:hover, .nav__item > a:hover{ color:var(--red); }
.nav__links a.active{ font-weight:700; }
.nav__links .caret{ width:13px; height:13px; }
/* dropdown menus */
.nav__item{ position:relative; display:inline-flex; align-items:center; }
.nav__item > a .caret{ transition:transform .2s ease; }
.nav__item:hover > a .caret{ transform:rotate(180deg); }
.nav__menu{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(8px);
  background:#fff; border-radius:14px; box-shadow:0 26px 56px -18px rgba(0,0,0,.24);
  padding:10px; min-width:236px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease; z-index:60;
}
.nav__menu::before{ content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
.nav__item:hover .nav__menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav__menu a{ font-family:'Poppins',sans-serif; font-size:16px; padding:11px 16px; border-radius:9px; color:#1a1a1a; white-space:nowrap; }
.nav__menu a:hover{ background:var(--cream); color:var(--red); }
.nav__btns{ display:flex; align-items:center; gap:18px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:'Manrope',sans-serif; font-weight:700;
  border-radius:8px; cursor:pointer; border:1.5px solid transparent;
  white-space:nowrap; transition:transform .14s ease, background .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn .ic{ width:22px; height:22px; }
.btn--nav{ font-size:22px; padding:16px 36px; }
.btn--red{ background:var(--red); color:#fff; }
.btn--red:hover{ background:#6f0808; }
.btn--whitered{ background:#fff; color:var(--red); border-color:var(--red); }
.btn--whitered:hover{ background:var(--red); color:#fff; }
.btn--white{ background:#fff; color:var(--red); border-color:transparent; }
.btn--white:hover{ background:var(--red); color:#fff; }
/* nav "After Hours": text + icon only, no border/fill */
.btn--plainred{ background:transparent; color:var(--red); border-color:transparent; padding:16px 12px; }
.btn--plainred:hover{ transform:translateY(-2px); opacity:.82; }
/* office call button: the number sits under the label, so desktop visitors can read it */
.btn.btn--call{ flex-direction:column; gap:3px; line-height:1.15; }
.btn__num{ font-size:.7em; font-weight:600; letter-spacing:.02em; font-variant-numeric:tabular-nums; opacity:.92; }

/* ============ HERO ============ */
.hero{
  width:100%; background:var(--cream);
  padding:40px var(--gut-hero);
  display:flex; justify-content:space-between; align-items:center; gap:56px;
}
.hero__left{ flex:1 1 440px; min-width:0; display:flex; flex-direction:column; gap:32px; }
.hero h1{
  margin:0; font-family:'Manrope',sans-serif; font-weight:700;
  font-size:64px; line-height:1.18; color:rgb(51,51,51); letter-spacing:-.01em;
}
.hero h1 .hl-red{ color:var(--red); }
.hero__sub{ margin:0; font-size:18px; line-height:1.7; color:var(--ink-2); max-width:520px; }
.hero__ctas{ display:flex; gap:16px; }
.btn--lg{ font-size:22px; padding:17px 36px; }
.hero__right{ position:relative; flex:1 1 460px; min-width:0; max-width:600px; }
.hero__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  width:100%;
}
.hero__cell{
  border-radius:24px; overflow:hidden;
  aspect-ratio:1/.95;
}
.hero__cell img{ width:100%; height:100%; object-fit:cover; }
/* Bottom row sits under the overlapping testimonial card — bias the focal
   point upward so faces stay clear of the card (esp. at narrower widths). */
.hero__cell:nth-child(3) img, .hero__cell:nth-child(4) img{ object-position:50% 18%; }
.hero__quote{
  position:absolute; left:24px; right:14px; bottom:-26px; width:auto;
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.1);
  border-radius:16px; backdrop-filter:blur(8px);
  padding:14px 22px 22px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.25);
}
.hero__quote .qm{ font-family:'Inter',serif; font-weight:700; font-size:60px; line-height:.7; color:var(--red); display:block; }
.hero__quote p{ margin:6px 0 0; font-family:'Inter',sans-serif; font-size:19px; line-height:1.4; color:var(--ink); }
.hero__quote .q-red{ color:var(--red); font-weight:600; }
/* Sit the testimonial card low so it overlaps only the bottom edge of the
   photos (faces stay clear). Desktop only — on mobile the card stacks normally,
   so the spacer must not apply there. */
@media (min-width:981px){
  .hero__right{ margin-bottom:96px; }
  .hero__quote{ bottom:-96px; }
}

/* ============ REASSURANCE ============ */
.reassure{
  width:100%; background:var(--offwhite);
  padding:40px var(--gut);
  display:flex; align-items:center; gap:56px;
}
.reassure__img{ flex:1 1 360px; width:100%; max-width:530px; min-width:0; height:auto; aspect-ratio:53/31; border-radius:24px; object-fit:cover; }
.reassure__body{ flex:1; }
.reassure h2{
  margin:0 0 24px; font-family:'Manrope',sans-serif; font-weight:700;
  font-size:50px; line-height:1.08; color:var(--ink);
}
.reassure p{ margin:0; font-size:18px; line-height:1.75; color:var(--ink); max-width:640px; }

/* ============ ABOUT / METHADONE ============ */
.about{ width:100%; background:#fff; padding:40px var(--gut); display:flex; flex-direction:column; gap:34px; }
.split{ display:flex; align-items:center; gap:44px; }
.split__img{ flex:1 1 380px; width:100%; max-width:600px; min-width:0; height:auto; aspect-ratio:60/38; border-radius:24px; object-fit:cover; }
.split__body{ flex:1; }
.split__body h2{
  margin:0 0 20px; font-family:'Manrope',sans-serif; font-weight:700;
  font-size:48px; line-height:1.08; color:var(--ink);
}
.split__body p{ margin:0 0 16px; font-size:18px; line-height:1.7; color:var(--ink); }
.split__body p:last-child{ margin-bottom:0; }

/* ============ PROGRAMS ============ */
.programs{ width:100%; background:var(--cream); padding:40px var(--gut); }
.programs__title{
  margin:0 0 28px; font-family:'Manrope',sans-serif; font-weight:700;
  font-size:50px; color:var(--ink);
}
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch; }
.card{
  position:relative; display:flex; flex-direction:column; min-height:500px;
  background:#fff; border-radius:32px; padding:40px;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.18);
}
.card h3{ margin:0 0 16px; font-family:'Manrope',sans-serif; font-weight:700; font-size:34px; color:var(--ink); }
.card__text{ max-width:none; }
.card__text p{ margin:0 0 14px; font-size:18px; line-height:1.65; color:var(--ink); }
/* Button follows the text; illustration is pushed to the bottom-right in normal
   flow, so long copy grows the card instead of colliding with them. */
.card__foot{ order:1; margin-top:24px; }
.card__illo{ order:2; align-self:flex-end; margin-top:auto; padding-top:24px; }
.card:first-child .card__illo{ width:330px; height:250px; }
.card:last-child .card__illo{ width:284px; height:208px; }
.card__illo img{ width:100%; height:100%; object-fit:contain; object-position:bottom right; }
.btn--prog{ font-size:22px; padding:16px 36px; }

/* ============ WHY ============ */
.why{ width:100%; background:#fff; padding:40px var(--gut); }
.why__title{ margin:0 0 30px; font-family:'Manrope',sans-serif; font-weight:700; font-size:50px; color:var(--ink); }
.why__grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px 112px; max-width:1146px; }
.why__item{ display:flex; flex-direction:column; gap:14px; }
.why__ic{ width:40px; height:40px; color:var(--teal-icon); }
.why__item p{ margin:0; font-size:18px; line-height:1.65; color:var(--ink); max-width:509px; }
.why__link{ display:inline-block; margin-top:28px; font-family:'Manrope',sans-serif; font-weight:700; font-size:22px; color:var(--red); }
.why__link:hover{ text-decoration:underline; }

/* ============ STEPS ============ */
.steps{ width:100%; background:var(--gray); padding:40px var(--gut); }
.steps__title{
  margin:0 0 28px; font-family:'Manrope',sans-serif; font-weight:700;
  font-size:50px; line-height:1.1; color:var(--ink);
}
.steps__row{ display:flex; gap:48px; align-items:stretch; }
.steps__list{ flex:1; display:flex; flex-direction:column; gap:28px; }
.step{ font-size:18px; line-height:1.65; color:var(--ink); max-width:605px; }
.steps__link{ margin-top:12px; font-family:'Manrope',sans-serif; font-weight:700; font-size:22px; color:var(--red); }
.steps__link:hover{ text-decoration:underline; }
.steps__img{ flex:1 1 380px; width:100%; max-width:600px; height:auto; aspect-ratio:3/2; min-width:0; border-radius:24px; object-fit:cover; align-self:center; }

/* ============ FAQ BAND ============ */
.faq{
  width:100%; height:240px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)), url('assets/img/faq-bg.webp') center/cover no-repeat;
}
.faq h2{ margin:0; font-family:'Manrope',sans-serif; font-weight:700; font-size:50px; color:#fff; text-align:center; }
.btn--faq{ font-family:'Inter',sans-serif; font-weight:500; font-size:20px; padding:17px 36px; }

/* ============ SERVICES ============ */
.services{ width:100%; background:#000; color:#fff; padding:42px var(--gut) 0; display:flex; gap:60px; align-items:flex-start; position:relative; z-index:2; }
.services__left{ flex:1; display:flex; flex-direction:column; }
.services__qm{ font-family:'Inter',serif; font-weight:700; font-size:60px; line-height:.6; color:var(--teal-bright); display:block; margin-bottom:12px; }
.services h2{ margin:0 0 14px; font-family:'Manrope',sans-serif; font-weight:700; font-size:50px; line-height:1.12; max-width:none; }
.services__left p{ margin:0 0 14px; font-size:18px; line-height:1.7; color:#fff; max-width:620px; }
.services__img{ width:100%; max-width:600px; height:auto; aspect-ratio:2/1; border-radius:6px; object-fit:cover; margin-top:28px; margin-bottom:-44px; position:relative; z-index:3; }
.services__right{ flex:1 1 360px; max-width:533px; min-width:0; padding-top:6px; }
.services__label{ margin:0 0 22px; font-family:'Inter',sans-serif; font-weight:500; font-size:20px; }
.services__list{ list-style:disc; margin:0 0 26px; padding-left:24px; display:flex; flex-direction:column; gap:14px; }
.services__list li{ font-size:18px; line-height:1.55; color:#fff; padding-left:4px; }
.services__list li::marker{ color:#fff; }
.btn--svc{ font-family:'Inter',sans-serif; font-weight:400; font-size:16px; padding:18px 36px; }

/* The services photo hangs 44px into whatever follows, so the next band
   needs that much padding plus breathing room before its heading. */
.services + .cta{ padding-top:88px; }

/* ============ FOOTER ============ */
.footer{ width:100%; background:var(--red); position:relative; z-index:1; height:200px; }
.footer__logo{ position:absolute; left:var(--gut); top:58px; }
.footer__logo img, .footer__logo svg{ height:84px; width:auto; display:block; }
.footer__nav{
  position:absolute; left:50%; top:82px; transform:translateX(-50%);
  display:flex; gap:52px; white-space:nowrap;
}
.footer__nav a{ font-family:'Inter',sans-serif; font-weight:500; font-size:20px; color:#fff; }
.footer__nav a:hover{ opacity:.8; }
.footer__copy{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  font-family:'Inter',sans-serif; font-size:16px; color:rgba(255,255,255,.5); white-space:nowrap;
}

/* ============ CTA BAND ============ */
.cta{
  width:100%; background:#fff; padding:38px var(--gut);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
}
.cta h2{ margin:0; font-family:'Manrope',sans-serif; font-weight:700; font-size:50px; color:var(--ink); }
.cta p{ margin:0; font-size:18px; line-height:1.6; color:var(--ink); max-width:620px; }
.cta .btn{ margin-top:8px; }
.btn--cta{ font-size:22px; padding:17px 44px; }

/* ============ MOBILE NAV (real-pixel, outside scaled stage) ============ */
.m-bar{
  display:none; align-items:center; justify-content:space-between; gap:14px;
  position:fixed; top:0; left:0; right:0; height:64px; z-index:300;
  background:#fff; box-shadow:0 4px 18px rgba(21,21,21,.10);
  padding:0 18px; font-family:'Poppins',sans-serif;
}
.m-bar__btn{
  width:44px; height:44px; flex:0 0 44px; border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:0;
}
.m-bar__btn span{ display:block; width:26px; height:2.5px; background:var(--red); border-radius:2px; transition:transform .26s ease, opacity .2s ease; }
body.m-open .m-bar__btn span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
body.m-open .m-bar__btn span:nth-child(2){ opacity:0; }
body.m-open .m-bar__btn span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }
.m-bar__logo{ display:flex; align-items:center; }
.m-bar__logo img, .m-bar__logo svg{ height:40px; width:auto; display:block; }

.m-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:310;
  opacity:0; visibility:hidden; transition:opacity .3s ease;
}
body.m-open .m-overlay{ opacity:1; visibility:visible; }

.m-drawer{
  display:none; position:fixed; top:0; left:0; bottom:0; width:min(82vw,340px); z-index:320;
  background:#fff; box-shadow:0 0 60px rgba(0,0,0,.35);
  transform:translateX(-100%); transition:transform .3s ease;
  overflow-y:auto; padding:0 0 24px; font-family:'Poppins',sans-serif;
}
body.m-open .m-drawer{ transform:translateX(0); }
/* Drawer header: brand on the left, close (x) on the right — stays put while the
   list scrolls. Mirrors the collapsed bar so the brand is always visible. */
.m-drawer__head{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:14px; height:64px; padding:0 16px 0 24px; background:#fff; border-bottom:1px solid #efeded;
}
.m-drawer__logo{ display:flex; align-items:center; }
.m-drawer__logo svg{ height:40px; width:auto; display:block; }
.m-drawer__close{
  width:44px; height:44px; flex:0 0 44px; border:0; background:transparent; color:var(--red);
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.m-drawer__nav{ padding-top:8px; }
.m-drawer a{ display:block; color:#1a1a1a; font-size:19px; padding:14px 28px; text-decoration:none; }
.m-drawer a.active{ font-weight:700; }
.m-drawer a:hover{ background:var(--cream); color:var(--red); }
/* drawer accordion groups */
.m-group__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:transparent; border:0; cursor:pointer; text-align:left;
  font-family:'Poppins',sans-serif; font-size:19px; color:#1a1a1a; padding:14px 28px;
}
.m-group__btn .m-caret{ transition:transform .25s ease; color:var(--red); }
.m-group.open .m-group__btn{ font-weight:700; }
.m-group.open .m-group__btn .m-caret{ transform:rotate(180deg); }
.m-group__sub{ max-height:0; overflow:hidden; transition:max-height .3s ease; background:var(--cream); }
.m-group.open .m-group__sub{ max-height:420px; }
.m-group__sub a{ font-size:16px; color:#444; padding:11px 28px 11px 44px; }
.m-group__sub a:hover{ color:var(--red); }
.m-drawer__phones{ display:flex; flex-direction:column; gap:12px; padding:22px 28px 0; }
.m-drawer__phones a{
  display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 16px;
  border-radius:8px; font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; text-decoration:none;
  text-align:center;
}
.m-drawer__phones a svg{ width:20px; height:20px; }
.m-drawer__phones a.m-phone--red{ background:var(--red); color:#fff; }
.m-drawer__phones a.m-phone--out{ background:#fff; color:var(--red); border:1.5px solid var(--red); }

/* Header only: switch to the mobile bar from 1100px down, before the desktop
   nav (logo + links + CTA buttons) overflows the viewport in the ~981-1099 band
   (which caused a site-wide horizontal scroll on iPad-Pro-portrait / small
   laptops). Section layouts keep their own 980px breakpoint below. */
@media (max-width:1100px){
  .m-bar{ display:flex; }
  .m-overlay{ display:block; }
  .m-drawer{ display:block; }
  .nav{ display:none; }
  #frame{ margin-top:64px; }
}

@media (max-width:980px){
  .m-bar{ display:flex; }
  .m-overlay{ display:block; }
  .m-drawer{ display:block; }
  .nav{ display:none; }
  #frame{ margin-top:64px; }
  .stage{ width:100%; }
  .nav, .hero, .reassure, .about, .programs, .why, .steps, .faq, .services, .cta, .footer{ width:100%; }

  /* cta band */
  .cta{ padding:30px 28px; }
  .cta h2{ font-size:clamp(28px,6.5vw,42px); }
  .cta p{ font-size:16px; }
  .btn--cta{ font-size:18px; padding:15px 36px; }

  /* hero */
  .hero{ flex-direction:column; align-items:stretch; padding:30px 28px 34px; gap:28px; }
  .hero__left{ width:auto; gap:24px; }
  .hero h1{ font-size:clamp(34px,8vw,52px); }
  .hero__sub{ font-size:16px; max-width:none; }
  .hero__ctas{ flex-wrap:wrap; }
  .btn--lg{ font-size:18px; padding:14px 26px; }
  .hero__right{ width:auto; height:auto; }
  .hero__grid{ width:100%; }
  .hero__quote{ position:static; width:auto; margin-top:16px; }

  /* reassurance */
  .reassure{ flex-direction:column; padding:32px 28px; gap:24px; }
  /* Clear the desktop cap: stacked, these are full-width bands. Without
     this they sat ~600px wide in a 712px column with a gap beside them. */
  .reassure__img{ flex:none; width:100%; max-width:none; height:auto; aspect-ratio:16/9; }
  .reassure h2{ font-size:clamp(28px,6.5vw,42px); margin-bottom:18px; }
  .reassure h2 br{ display:none; }
  .reassure p{ font-size:16px; max-width:none; }

  /* about / methadone splits */
  .about{ padding:32px 28px; gap:28px; }
  .split{ flex-direction:column; align-items:stretch; gap:22px; }
  .split__img{ flex:none; width:100%; max-width:none; height:auto; aspect-ratio:16/10; order:-1; }
  .split__body h2{ font-size:clamp(26px,6vw,38px); margin-bottom:16px; }
  .split__body p{ font-size:16px; }

  /* programs */
  .programs{ padding:32px 28px; }
  .programs__title{ font-size:clamp(28px,6.5vw,42px); margin-bottom:24px; }
  .cards{ grid-template-columns:1fr; gap:22px; }
  .card{ height:auto; padding:28px; }
  .card h3{ font-size:26px; }
  .card__text{ max-width:none; }
  .card__text p{ font-size:16px; }
  .card:first-child .card__illo, .card:last-child .card__illo{
    position:static; order:0; align-self:auto; width:auto; height:auto;
    right:auto; bottom:auto; margin:18px 0 22px; padding-top:0;
  }
  .card__illo img{ height:150px; object-position:center; }
  .card__foot{ position:static; order:0; margin-top:0; }
  .btn--prog{ font-size:18px; padding:14px 28px; }

  /* why */
  .why{ padding:32px 28px; }
  .why__title{ font-size:clamp(28px,6.5vw,42px); margin-bottom:26px; }
  .why__grid{ grid-template-columns:1fr; gap:26px; max-width:none; }
  .why__item p{ font-size:16px; max-width:none; }
  .why__link{ font-size:18px; margin-top:28px; }

  /* steps */
  .steps{ padding:32px 28px; }
  .steps__title{ font-size:clamp(26px,6vw,40px); margin-bottom:24px; }
  .steps__row{ flex-direction:column; gap:24px; }
  .step{ font-size:16px; max-width:none; }
  .steps__img{ flex:none; width:100%; max-width:none; height:auto; aspect-ratio:16/10; }
  .steps__link{ font-size:18px; }

  /* faq band */
  .faq{ height:auto; padding:36px 28px; gap:20px; }
  .faq h2{ font-size:clamp(26px,6vw,40px); }
  .btn--faq{ font-size:16px; }

  /* services */
  .services{ flex-direction:column; padding:32px 28px; gap:26px; }
  .services__left{ flex:none; }
  .services h2{ font-size:clamp(28px,6.5vw,42px); }
  .services h2 br{ display:none; }
  .services__left p{ font-size:16px; max-width:none; }
  .services__img{ width:100%; max-width:none; height:auto; aspect-ratio:2/1; margin-top:18px; margin-bottom:0; }
  .services__right{ flex:none; padding-top:0; }
  /* Stacked, the photo no longer hangs into the band below, so the extra
     clearance the desktop layout needs would just be dead space here. */
  .services + .cta{ padding-top:30px; }
  .services__list li{ font-size:16px; }
  .btn--svc{ font-size:15px; }

  /* footer */
  .footer{ height:auto; padding:28px 28px 24px; }
  .footer__logo{ position:static; transform:none; display:flex; justify-content:center; margin-bottom:18px; }
  .footer__logo img, .footer__logo svg{ height:60px; }
  .footer__nav{ position:static; transform:none; flex-wrap:wrap; justify-content:center; gap:14px 26px; margin-bottom:16px; }
  .footer__nav a{ font-size:17px; }
  .footer__copy{ position:static; transform:none; text-align:center; white-space:normal; }
}
@media (max-width:560px){
  .hero, .reassure, .about, .programs, .why, .steps, .faq, .services, .cta, .footer{ padding-left:20px; padding-right:20px; }
  .hero h1 br, .hero__quote .qm + p br{ display:none; }
  .hero__ctas .btn--lg{ flex:1 1 auto; text-align:center; }
}

/* ============ BACK TO TOP ============
   Sits clear of the iOS home indicator via env(safe-area-inset-*), stays out
   of the way until the reader is a screen down, and is hidden from pointer
   events while invisible so it cannot swallow a click on content beneath. */
.totop{
  position:fixed; right:24px; bottom:24px;
  right:calc(24px + env(safe-area-inset-right)); bottom:calc(24px + env(safe-area-inset-bottom));
  width:48px; height:48px; border-radius:50%; cursor:pointer; box-sizing:border-box;
  background:var(--red); color:#fff; display:grid; place-items:center;
  /* The white ring keeps it legible on the red footer, where a plain red
     button would vanish; the shadow does the same job on white sections. */
  border:2px solid #fff;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  opacity:0; visibility:hidden; transform:translateY(10px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s, background-color .18s ease;
  z-index:80;
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.totop svg{ width:22px; height:22px; display:block; transition:transform .25s ease; }
/* Same arrow, flipped, so the button reads as one control with two states
   rather than two different icons appearing and disappearing. */
.totop--down svg{ transform:rotate(180deg); }
.totop:hover{ background:#6f0808; }
.totop:focus-visible{ outline:3px solid #fff; outline-offset:-6px;
  box-shadow:0 0 0 3px var(--red), 0 6px 20px rgba(141,11,11,.28); }
@media (max-width:560px){
  .totop{ width:44px; height:44px; right:16px; bottom:16px;
    right:calc(16px + env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce){
  .totop{ transition:opacity .01s linear, visibility .01s linear; transform:none; }
  .totop svg{ transition:none; }
}
@media print{ .totop{ display:none; } }