/* =====================================================================
   12WELVE STONES HOME HEALTHCARE, LLC — site styles
   Brand: navy #00205B  ·  green #3E5F1A  (sampled from logo)
   ===================================================================== */

:root{
  --navy:#00205B;
  --navy-deep:#001334;
  --navy-mid:#123067;
  --navy-soft:#E7ECF6;
  --green:#3E5F1A;
  --green-bright:#4F7A24;
  --green-soft:#EDF2E4;
  --sage:#A8C686;
  --cream:#FAF6EE;
  --sand:#F1E9DA;
  --white:#FFFFFF;
  --ink:#182234;
  --muted:#5C6879;
  --line:#E4DFD4;
  --line-dark:rgba(255,255,255,.16);

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,32,91,.06), 0 4px 14px rgba(0,32,91,.05);
  --shadow-md:0 2px 6px rgba(0,32,91,.07), 0 18px 44px rgba(0,32,91,.09);

  --wrap:1200px;
  --header-h:112px;
  --logo-h:72px;
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-brand:"Cinzel", Georgia, serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--navy); text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0 0 .5em; color:var(--navy); text-wrap:balance}
h1{font-size:clamp(2.3rem,5.2vw,3.75rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
h3{font-size:1.25rem; line-height:1.3}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0 0 1.1em; padding-left:1.15em}
li{margin-bottom:.4em}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.section{padding-block:clamp(56px,8vw,104px)}
.section--tight{padding-block:clamp(40px,5vw,64px)}
.section--cream{background:var(--cream)}
.section--white{background:var(--white)}
.section--sand{background:var(--sand)}
.center{text-align:center}
.lead{font-size:clamp(1.03rem,1.6vw,1.18rem); color:var(--muted)}
.narrow{max-width:720px; margin-inline:auto}

/* ---------- eyebrow chip ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); background:var(--green-soft);
  padding:7px 15px; border-radius:var(--r-pill); margin-bottom:18px;
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green)}
.eyebrow--light{color:var(--sage); background:rgba(168,198,134,.14)}
.eyebrow--light::before{background:var(--sage)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; white-space:nowrap; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-size:.97rem; font-weight:600;
  padding:15px 28px; border-radius:var(--r-pill);
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{flex:none}
.btn--primary{background:var(--green); color:#fff; box-shadow:0 8px 22px rgba(62,95,26,.26)}
.btn--primary:hover{background:var(--green-bright)}
.btn--navy{background:var(--navy); color:#fff; box-shadow:0 8px 22px rgba(0,32,91,.22)}
.btn--navy:hover{background:var(--navy-mid)}
.btn--white{background:#fff; color:var(--navy); box-shadow:var(--shadow-sm)}
.btn--ghost{background:transparent; color:var(--navy); border-color:rgba(0,32,91,.25)}
.btn--ghost:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.btn--ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.btn--ghost-light:hover{background:#fff; color:var(--navy)}
.btn--lg{padding:17px 34px; font-size:1.02rem}

/* ---------- legal-name bar ---------- */
.namebar{
  background:var(--navy); color:#fff;
  font-family:var(--font-brand); font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; text-align:center;
  padding:9px 20px; line-height:1.4;
}
.namebar .sep{color:var(--sage); margin-inline:10px}
.namebar .namebar-tag{
  font-family:var(--font-body); font-size:.7rem; letter-spacing:.14em; color:rgba(255,255,255,.72);
}
@media (max-width:700px){
  .namebar{font-size:.66rem; letter-spacing:.08em; padding:8px 16px}
  .namebar .sep,.namebar .namebar-tag{display:none}
}

/* ---------- coming-soon marquee ----------
   Same navy bar, but the line travels left → right.

   Two identical copies sit side by side in the track and the track slides from
   -50% to 0. At -50% the second copy occupies exactly the space the first copy
   occupies at 0, so the instant the animation loops the frame is identical and
   there is no visible seam. Each copy is at least a viewport wide, so the bar
   never shows a gap on a wide monitor. */
.namebar--marquee{
  padding-inline:0; padding-block:clamp(11px,1.1vw,15px); overflow:hidden;
  font-size:clamp(.84rem,1.05vw,.96rem);
  border-bottom:1px solid rgba(168,198,134,.34);
  --marquee-duration:34s;
}
/* The scrolling copy is decorative repetition; this is what a screen reader reads. */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Soften both ends so the line arrives and leaves instead of being chopped off. */
.marquee{
  display:flex; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);
}
.marquee-track{
  display:flex; flex:0 0 auto; width:max-content;
  animation:marquee-ltr var(--marquee-duration) linear infinite;
  will-change:transform;
}
.marquee-copy{
  display:flex; flex:0 0 auto; min-width:100vw;
  align-items:center; justify-content:space-around;
}
/* The separation is trailing padding on each item, never a flex gap on the track:
   a gap between the two copies would widen the track past 2x and the -50%
   keyframe would no longer land on an identical frame. */
.marquee-item{
  display:flex; align-items:center; flex:0 0 auto; white-space:nowrap;
  padding-inline-end:clamp(34px,7vw,96px);
}
.mq-dot{color:rgba(168,198,134,.55); margin-inline:clamp(12px,1.4vw,20px)}
/* The announcement is the point of the bar, so it is a filled sage chip rather
   than another run of text — navy on sage reads at about 8:1, so it stays legible
   at a glance even while moving. */
.mq-soon{
  background:var(--sage); color:var(--navy);
  font-size:1.06em; font-weight:700; letter-spacing:.16em;
  padding:.36em 1.05em .32em; border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
.mq-name{font-weight:600; color:#fff}
.mq-tag{
  font-family:var(--font-body); font-size:.78em; letter-spacing:.14em; color:rgba(255,255,255,.7);
}
/* Let a reader stop the line to finish reading it. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}

@keyframes marquee-ltr{
  from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}
}

@media (max-width:700px){
  .namebar--marquee{font-size:.74rem; letter-spacing:.08em; padding-block:10px; --marquee-duration:24s}
  .marquee{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  }
  .marquee-item{padding-inline-end:34px}
  .mq-tag{display:none}
  .mq-tag + .mq-dot,.mq-soon + .mq-dot{display:none}
}

/* Motion turned off: one static, centred copy — the announcement still reads. */
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none; transform:none; width:100%}
  .marquee-copy{min-width:0; flex:1 1 auto; justify-content:center}
  .marquee-copy + .marquee-copy{display:none}
  .marquee-copy .marquee-item + .marquee-item{display:none}
}

/* ---------- brand name in running copy ---------- */
.brandname{font-family:var(--font-brand); font-weight:700; letter-spacing:.02em; white-space:nowrap}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(0,32,91,.04);
}
/* full-bleed header: logo left, menu centred, call + CTA right */
.site-header .wrap{max-width:none; padding-inline:clamp(20px,3.2vw,52px)}
.header-inner{
  display:grid;
  /* equal side columns are what actually centres the menu on the page */
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:clamp(14px,2vw,32px);
  min-height:112px;
}
.brand{grid-column:1; justify-self:start; min-width:0}
.nav{grid-column:2; justify-content:center}
.header-cta{grid-column:3; justify-self:end}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.brand img{width:auto; height:var(--logo-h,72px); max-width:min(460px,44vw); object-fit:contain}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-name{font-family:var(--font-brand); font-weight:700; font-size:1.24rem; letter-spacing:.02em; color:var(--navy)}
.brand-name small{font-size:.82em}
.brand-sub{font-family:var(--font-body); font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--green); margin-top:5px}

.nav{display:flex; align-items:center; gap:clamp(2px,.6vw,12px)}
.nav a{
  font-size:clamp(.9rem,1.05vw,1.02rem); font-weight:500; color:var(--ink); text-decoration:none;
  padding:9px 14px; border-radius:var(--r-pill); transition:background .16s, color .16s;
}
.nav a:hover{background:var(--navy-soft); color:var(--navy)}
.nav a[aria-current="page"]{color:var(--navy); font-weight:650; background:var(--navy-soft)}

.header-cta{display:flex; align-items:center; gap:16px; flex:none}
.header-btn-compact{display:none}
.header-phone{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--navy)}
.header-phone .dot{
  width:36px; height:36px; border-radius:50%; background:var(--green-soft);
  display:grid; place-items:center; flex:none;
}
.header-phone span{display:block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600}
.header-phone strong{font-size:.95rem; font-weight:650; letter-spacing:.01em}

.nav-toggle{
  display:none; width:46px; height:46px; border-radius:12px;
  border:1px solid var(--line); background:#fff; cursor:pointer; place-items:center;
}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--navy); position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--navy)}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}

/* keep the side columns balanced as the viewport narrows */
@media (max-width:1440px){ :root{--logo-h:64px; --header-h:104px} .header-inner{min-height:104px} }
@media (max-width:1240px){ :root{--logo-h:56px; --header-h:96px}  .header-inner{min-height:96px} }
/* Below this the three header columns stop fitting side by side: the brand runs
   into the centred menu and the call block crowds the button. Dropping the
   "Care Available 24/7" text — the number is still a tap away in the nav and the
   footer — buys back the width the menu needs, down to the toggle breakpoint. */
@media (max-width:1180px){
  :root{--logo-h:50px; --header-h:92px}
  .header-inner{min-height:92px; gap:14px}
  .header-phone .brand-text{display:none}
  .nav a{padding-inline:11px}
}

/* ---------- hero (full-bleed split panel) ---------- */
.hero{padding:0}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  min-height:calc(100svh - var(--header-h));
  max-height:920px;
  background:var(--navy);
}
.hero-panel{
  background:var(--navy); color:#fff;
  display:flex; align-items:center;
  padding-block:clamp(48px,7vh,96px);
  padding-inline:max(20px, calc((100vw - var(--wrap)) / 2)) clamp(28px,4vw,72px);
  position:relative; isolation:isolate; overflow:hidden;
}
.hero-panel::after{
  content:""; position:absolute; inset:auto -30% -40% auto; width:80%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(168,198,134,.15), transparent 68%);
  z-index:-1;
}
.hero-panel-inner{max-width:34rem}
.hero-panel h1{color:#fff; margin-bottom:.4em; font-size:clamp(2.4rem,4.4vw,4rem)}
.hero-panel h1 em{font-style:normal; color:var(--sage); display:block}
.hero-panel p{color:rgba(255,255,255,.84); max-width:44ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-photo{position:relative; background:var(--sand); min-height:0}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 35%}
.hero-badge{
  position:absolute; left:28px; bottom:28px; right:28px; max-width:520px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  border-radius:var(--r-md); padding:16px 20px;
  display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-md);
}
.hero-badge img{width:38px; flex:none}
.hero-badge p{font-size:.88rem; color:var(--navy); font-weight:600; line-height:1.35}

/* ---------- trust strip ---------- */
.trust{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.trust-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 22px; box-shadow:var(--shadow-sm);
}
.trust-item .ico{margin-bottom:12px}
.trust-item h3{font-family:var(--font-body); font-size:.98rem; font-weight:700; color:var(--navy); margin-bottom:5px}
.trust-item p{font-size:.87rem; color:var(--muted); line-height:1.5}

/* ---------- generic icon chip ---------- */
.ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--green-soft); color:var(--green); flex:none;
}
.ico--navy{background:var(--navy-soft); color:var(--navy)}
.ico--light{background:rgba(255,255,255,.12); color:var(--sage)}

/* ---------- split feature ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4.5vw,68px); align-items:center}
.split--reverse .split-media{order:2}
.split-media img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:5/4;
  border-radius:var(--r-lg); box-shadow:var(--shadow-md); background:var(--sand);
}
.split-media--tall img{aspect-ratio:4/5}
.split-media--wide img{aspect-ratio:16/10}

/* ---------- cards grid ---------- */
.grid{display:grid; gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 28px; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.card .ico{margin-bottom:16px}
.card h3{margin-bottom:.45em}
.card p{font-size:.95rem; color:var(--muted)}
.card ul{font-size:.92rem; color:var(--muted); padding-left:1.1em; margin-top:.9em; margin-bottom:0}
.card ul li::marker{color:var(--green)}

/* mission statement — the one paragraph on About that should carry weight */
.mission{
  font-family:var(--font-display); font-size:clamp(1.12rem,1.9vw,1.4rem);
  line-height:1.6; color:var(--navy); max-width:62ch; margin-inline:auto;
}

/* icon-led service card (home page) */
.svc-card--icon{padding:30px 28px}
.svc-card--icon .ico{margin-bottom:16px}
.svc-card--icon .body{padding:0}

/* service card with photo */
.svc-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.svc-card > img{aspect-ratio:16/10; object-fit:cover; object-position:50% 40%; width:100%; height:auto; background:var(--sand)}
.svc-card .body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1}
.svc-card--icon{display:flex; flex-direction:column}
.svc-card h3{margin-bottom:.4em}
.svc-card p{font-size:.94rem; color:var(--muted)}
.svc-card ul{font-size:.9rem; color:var(--muted); margin-top:.6em}
.svc-card .more{margin-top:auto; padding-top:18px; font-size:.9rem; font-weight:650; color:var(--green); text-decoration:none; display:inline-flex; gap:7px; align-items:center}
.svc-card .more:hover{gap:11px}

/* ---------- steps ---------- */
.steps{display:grid; gap:4px}
.step{display:grid; grid-template-columns:auto 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step-num{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--navy); color:#fff; font-family:var(--font-display); font-weight:600; font-size:1.02rem;
}
.step h3{font-size:1.08rem; margin-bottom:.25em}
.step p{font-size:.93rem; color:var(--muted); margin:0}

.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3.4vw,44px); box-shadow:var(--shadow-sm)}

/* ---------- navy band ---------- */
.band{
  background:var(--navy); color:#fff; border-radius:var(--r-xl);
  padding:clamp(32px,4.4vw,60px); position:relative; overflow:hidden;
}
.band h2,.band h3{color:#fff}
.band p{color:rgba(255,255,255,.8)}
.band-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,56px); align-items:center}
.band-grid img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/5;
  border-radius:var(--r-lg); background:var(--navy-mid);
}

.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.chip{
  display:inline-flex; align-items:center; gap:8px; font-size:.87rem; font-weight:550;
  background:rgba(255,255,255,.1); border:1px solid var(--line-dark);
  color:#fff; padding:9px 16px; border-radius:var(--r-pill);
}
.chip svg{opacity:.85}

/* value list on navy */
.vlist{list-style:none; padding:0; margin:0; display:grid; gap:16px}
.vlist li{display:grid; grid-template-columns:auto 1fr; gap:14px; margin:0; align-items:start}
.vlist .tick{
  width:26px; height:26px; border-radius:50%; background:rgba(168,198,134,.18);
  color:var(--sage); display:grid; place-items:center; flex:none; margin-top:2px;
}
.vlist strong{display:block; font-weight:650; margin-bottom:2px}
.vlist span{font-size:.93rem; color:rgba(255,255,255,.76)}

/* ---------- CTA band ---------- */
.cta{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius:var(--r-xl); color:#fff; text-align:center;
  padding:clamp(40px,5.4vw,76px) clamp(24px,4vw,60px); position:relative; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; inset:-60% 55% auto -25%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(168,198,134,.18), transparent 66%);
}
.cta > *{position:relative}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.82); max-width:60ch; margin-inline:auto}
.cta-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px}

/* ---------- accordion / FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 46px 22px 0; position:relative;
  font-family:var(--font-display); font-size:1.08rem; font-weight:600; color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .answer{padding:0 40px 24px 0; color:var(--muted); font-size:.96rem}

/* ---------- page hero (inner pages) ---------- */
.page-hero{background:var(--navy); color:#fff; padding-block:clamp(48px,6vw,84px)}
.page-hero h1{color:#fff; margin-bottom:.3em}
.page-hero p{color:rgba(255,255,255,.8); max-width:62ch}
.crumbs{font-size:.83rem; color:rgba(255,255,255,.6); margin-bottom:16px}
.crumbs a{color:rgba(255,255,255,.78)}

/* ---------- forms ---------- */
.form-grid{display:grid; gap:18px}
.field label{display:block; font-size:.88rem; font-weight:650; color:var(--navy); margin-bottom:7px}
.field .hint{font-weight:400; color:var(--muted); font-size:.82rem}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:13px 15px; transition:border-color .16s, box-shadow .16s;
}
.field textarea{min-height:140px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(79,122,36,.16);
}
.req{color:#B3261E}

/* SMS consent block — intentionally standalone, never bundled */
.sms-consent{
  background:var(--green-soft);
  border:1.5px solid #D4E0C0;
  border-radius:var(--r-md);
  padding:16px 18px;
  margin-top:-2px;
}
.sms-consent .row{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start}
.sms-consent input[type=checkbox]{
  width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--green); cursor:pointer;
}
.sms-consent label{font-size:.87rem; line-height:1.55; color:var(--ink); font-weight:400; cursor:pointer; margin:0}
.sms-consent label a{color:var(--green); font-weight:600}
.sms-consent .optional-tag{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green); background:#fff; border:1px solid #D4E0C0;
  padding:3px 9px; border-radius:var(--r-pill); margin-bottom:9px;
}

.form-note{font-size:.82rem; color:var(--muted); margin-top:4px}
/* The medical-information caution earns a little more weight than the SMS note
   beneath the button — it asks the visitor not to do something. */
.form-note--privacy{
  margin-top:10px; padding-left:12px;
  border-left:3px solid var(--sage); color:var(--ink);
}
.form-status{
  display:none; margin-top:16px; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--navy-soft); color:var(--navy); font-size:.92rem; font-weight:550;
}
.form-status.show{display:block}

/* contact info list */
.contact-list{list-style:none; padding:0; margin:0; display:grid; gap:22px}
.contact-list li{display:grid; grid-template-columns:auto 1fr; gap:15px; margin:0}
.contact-list h3{font-family:var(--font-body); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; font-weight:650}
.contact-list p,.contact-list a{font-size:1.02rem; color:var(--navy); font-weight:600; text-decoration:none; margin:0}
.contact-list a:hover{text-decoration:underline}

/* ---------- legal pages ---------- */
/* One size for every word on these pages — headings read it from here too, so
   the two can never drift apart. */
.legal{max-width:840px; --legal-size:1rem; --legal-color:#38445A}
.legal p,.legal li{font-size:var(--legal-size); line-height:1.72; color:var(--legal-color)}

/*
  Section headers are bold run-in labels: identical family, size and colour to the
  paragraph beneath them, with weight and the space above carrying the structure.
  Every heading level is covered and each property is forced, because this content
  is pasted into the WordPress editor — which attaches its own font-size preset
  classes, and sometimes an inline style, to whatever heading level the paste
  landed on. Without !important those win and the headings shrink again.
*/
article.legal :is(h1,h2,h3,h4,h5,h6),
.legal :is(h1,h2,h3,h4,h5,h6),
.legal h1,.legal h2,.legal h3,.legal h4,.legal h5,.legal h6{
  font-family:var(--font-body) !important;
  font-size:var(--legal-size) !important;
  line-height:1.72 !important;
  font-weight:700 !important;
  color:var(--legal-color) !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  text-wrap:initial;
  border-bottom:0 !important;
  padding-bottom:0 !important;
  margin:2em 0 .35em;
}
.legal :is(h3,h4,h5,h6),
.legal h3,.legal h4,.legal h5,.legal h6{margin-top:1.6em}
.legal > :first-child,article.legal > :first-child{margin-top:0}
.legal .updated{font-size:.88rem; color:var(--muted); border-left:3px solid var(--green); padding-left:14px}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep); color:rgba(255,255,255,.72); padding-block:clamp(48px,6vw,72px) 28px; font-size:.93rem}
.footer-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); gap:38px}
.site-footer h4{font-family:var(--font-body); font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:#fff; margin-bottom:16px; font-weight:650}
.site-footer a{color:rgba(255,255,255,.72); text-decoration:none}
.site-footer a:hover{color:#fff; text-decoration:underline}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.site-footer ul li{margin:0}
.footer-logo{width:180px; margin-bottom:18px}
.footer-tag{font-family:var(--font-brand); font-size:.78rem; letter-spacing:.14em; color:var(--sage); text-transform:uppercase}
.footer-bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; font-size:.84rem;
}
.footer-legal-links{display:flex; flex-wrap:wrap; gap:20px}
.sms-footnote{
  margin-top:22px; padding:14px 16px; border:1px solid var(--line-dark); border-radius:var(--r-sm);
  font-size:.8rem; line-height:1.55; color:rgba(255,255,255,.6);
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  :root{--logo-h:56px; --header-h:96px}
  .header-inner{display:flex; align-items:center; min-height:96px}
  .nav-toggle{margin-left:auto}
  .nav{display:none}
  .nav.open{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; left:16px; right:16px; top:calc(100% + 8px);
    background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
    padding:10px; box-shadow:var(--shadow-md);
  }
  .nav.open a{padding:13px 14px}
  .nav-toggle{display:grid}
  .header-cta .header-phone{display:none}
  .site-header .wrap{position:relative}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:880px){
  .hero-grid{grid-template-columns:minmax(0,1fr); min-height:0; max-height:none}
  .hero-panel{padding-inline:clamp(20px,6vw,48px)}
  .hero-panel-inner{max-width:none}
  .hero-photo{aspect-ratio:4/5; min-height:0}
  .hero-photo img{object-position:50% 18%}
  .hero-badge{left:14px; right:14px; bottom:14px; padding:13px 15px; gap:11px}
  .hero-badge img{width:32px}
  .hero-badge p{font-size:.82rem}
  .split,.band-grid{grid-template-columns:minmax(0,1fr)}
  .split--reverse .split-media{order:0}
  .grid-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:700px){
  body{font-size:16px}
  :root{--header-h:80px; --logo-h:44px}
  .header-inner{gap:12px; min-height:80px}
  .site-header .wrap{padding-inline:16px}
  .brand{min-width:0}
  .brand img{height:var(--logo-h,44px); max-width:54vw}
  .brand-name{font-size:.95rem}
  .brand-sub{display:none}
  .nav-toggle{width:42px; height:42px}
  .header-btn-full{display:none}
  .header-btn-compact{display:inline-flex; padding:12px 15px; border-radius:50%}
  .grid-2,.grid-3,.grid-4,.trust{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:1fr; gap:30px}
  .hero-badge{left:14px; right:14px; bottom:14px; padding:13px 15px}
  .step{grid-template-columns:1fr; gap:12px}
}

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

/* reveal on scroll */
.reveal{transform:translateY(14px); transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){.reveal{transform:none}}

/* visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--green-bright); outline-offset:3px; border-radius:6px;
}
.hero-panel a:focus-visible,.band a:focus-visible,.cta a:focus-visible,.site-footer a:focus-visible{outline-color:var(--sage)}

/* skip link */
.skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 8px 0; z-index:100}
.skip:focus{left:0}

/* =====================================================================
   WordPress additions
   ===================================================================== */

/* honeypot — visually and audibly hidden, but not display:none (bots skip those) */
.ts-hp{position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden}

/* server-rendered form feedback */
.form-status{scroll-margin-top:110px}
.form-status--error{background:#FBE9E7 !important; color:#8C1D18 !important}

/* screen-reader text (WordPress convention) */
.screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute; width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:#fff; clip-path:none; color:var(--navy); display:block;
  font-size:.9rem; height:auto; left:8px; padding:14px 20px; top:8px;
  width:auto; z-index:100; border-radius:8px; box-shadow:var(--shadow-md);
}

/* Header logo — capped by height so a tall, stacked lockup cannot inflate the bar.
   --logo-h is emitted by the theme from the Customizer setting. */
/* an uploaded Site Identity logo is sized by height; width follows */
.brand .custom-logo{
  height:var(--logo-h,72px);
  width:auto;
  max-width:min(460px, 44vw);
  object-fit:contain;
}
.brand .custom-logo-link{display:block; line-height:0}
/* an uploaded lockup already contains the wordmark, so hide the typeset one */
.brand:has(.custom-logo) .brand-text{display:none}

/* editor / classic content inside .legal */
.legal img{border-radius:var(--r-md); margin-block:1.4em}
.legal .wp-caption-text{font-size:.85rem; color:var(--muted)}
.legal blockquote{
  border-left:3px solid var(--green); padding-left:18px; margin-left:0; color:#38445A;
}
.legal table{width:100%; border-collapse:collapse; margin-block:1.4em}
.legal th,.legal td{border:1px solid var(--line); padding:10px 12px; text-align:left; font-size:.95rem}
.legal th{background:var(--cream); color:var(--navy)}

/* pagination on the blog fallback */
.pagination .page-numbers{
  display:inline-block; padding:9px 15px; margin-right:6px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  text-decoration:none; color:var(--navy); background:#fff; font-size:.92rem;
}
.pagination .page-numbers.current{background:var(--navy); color:#fff; border-color:var(--navy)}

/* admin bar offset for the sticky header */
body.admin-bar .site-header{top:32px}
@media (max-width:782px){body.admin-bar .site-header{top:46px}}