/* ============================================================================
   WELLNESS HOUSING - locked brand layer (Phase 3.5)
   ----------------------------------------------------------------------------
   Loaded AFTER /assets/site.css on every page, as /brand.css (theme_v2).
   This file is the ONLY place the Wellness Housing look is defined. Page
   sub-agents add no CSS; they author records and use the locked classes.

   Source of truth for every value below:
     design/STYLE-CAPTURE.md   (measured off the live site 2026-09-17)
     design/brand-inputs.json  (the machine-readable pin the engine reads)

   Two live defects are fixed here BY CONSTRUCTION and must stay fixed:
     1. the homepage header logo rendered 991x248 and pushed 170px of
        horizontal overflow onto the document. The logo box is now capped.
     2. the mobile burger rendered at zero size, so a phone could not open the
        menu. It is now a real 48px target and keyboard operable.
   ============================================================================ */

/* ---- 1. TOKENS ---------------------------------------------------------- */
:root{
  /* palette - every hex measured off the live site */
  --navy:#00715D;          /* brand green: links, discs, green pill, all hovers */
  --navy-deep:#004337;     /* deeper green, bands only */
  --navy-2:#00b898;
  --accent:#FED65B;        /* brand yellow */
  --accent-deep:#00715D;   /* the engine paints .btn-primary from this: green */
  --amber:#FED65B;
  --amber-deep:#f5c62f;
  --ink:#212121;           /* headings, footer ground, button outline */
  --body-ink:#252628;      /* paragraph text */
  --muted:#63606D;         /* borders, link hover */
  --bg:#F3EFE2;            /* THE signature: cream page ground, never white */
  --surface:#FFFFFF;       /* floating sheets and cards */
  --line:#E4DFCE;          /* hairline on cream */
  --on-navy:#FFFFFF;       /* ink used on a green band */
  --on-surface:#252628;    /* ink used on a white card */
  --on-surface-dim:#63606D;

  /* type */
  --head:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --body:'Heebo','Helvetica Neue',Arial,sans-serif;

  /* rendered scale, desktop. The mobile step lives in the 767px block. */
  --h1:150px; --h2:90px; --h3:60px; --h4:38px; --h5:28px; --eyebrow:16px;

  /* geometry */
  --maxw:1280px;                 /* boxed content container */
  --measure:800px;               /* article measure inside a sheet */
  --space:clamp(1rem,2vw,1.5rem);
  --radius:30px;                 /* cards, panels */
  --radius-sm:20px;              /* images, accordion rows */
  --sheet-radius:50px;           /* the floating white sheet, hero photo */
  --sheet-inset:40px;
  --pill:20px;                   /* see the WCAG 1.4.11 note under BUTTONS */
  --field:30px;                  /* inputs keep the captured 30px */
  --sticker:0 4px 0 0 #000;      /* the hard offset button shadow */
  --shadow:5px 5px 15px rgba(0,0,0,.03);
  --shadow-card:5px 5px 15px rgba(0,0,0,.04);
  --btn-shadow:none;
}

/* ---- 2. GROUND + BODY COPY ---------------------------------------------- */
html{ overflow-x:hidden }
body{
  background:var(--bg);
  color:var(--body-ink);
  font-family:var(--body);
  font-size:18px;
  font-weight:500;
  line-height:1.55;
}
.wrap{ max-width:var(--maxw) }

/* Links are green, never underlined, and hover to the muted grey-violet.
   Scoped away from .btn so a generic anchor rule can never repaint a button. */
a:not(.btn){ color:var(--navy); text-decoration:none }
a:not(.btn):hover{ color:var(--muted) }

/* ---- 3. HEADINGS -------------------------------------------------------- */
/* Bebas Neue has ONE weight. Emphasis comes from size, never from bold. */
h1,h2,h3,h4,h5,h6{
  font-family:var(--head);
  font-weight:400;
  text-transform:uppercase;
  color:var(--ink);
  text-wrap:balance;
}
h1{ font-size:var(--h1); line-height:.85; letter-spacing:-2px; margin:0 0 .22em }
h2{ font-size:var(--h2); line-height:.9;  letter-spacing:-1px; margin:0 0 .25em }
h3{ font-size:var(--h3); line-height:1;   letter-spacing:-1px; margin:0 0 .28em }
h4{ font-size:var(--h4); line-height:1;   letter-spacing:0;    margin:0 0 .3em }
h5{ font-size:var(--h5); line-height:1;   letter-spacing:1px;  margin:0 0 .3em }

/* The green icon disc plus a small-caps eyebrow opens every content block. */
.eyebrow{
  font-family:var(--head);
  font-weight:400;
  font-size:var(--eyebrow);
  letter-spacing:1px;
  line-height:1.5;
  text-transform:uppercase;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 .9rem;
}
.eyebrow::before{
  content:"";
  width:26px; height:26px; flex:0 0 26px;
  border-radius:50%;
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/15px 15px no-repeat;
}
.eyebrow.center{ justify-content:center; text-align:center }
.section-head.center .eyebrow{ justify-content:center }
.section-head{ max-width:min(1060px,92%) }
.section-sub{ color:var(--body-ink); font-size:1.05rem; max-width:600px }
.section-head.center .section-sub{ margin-inline:auto }

/* Article prose: Heebo 21 / 400 / 1.5 at an 800px measure. */
.prose{ font-size:21px; font-weight:400; line-height:1.5; max-width:var(--measure) }
.prose h2{ font-size:var(--h3); line-height:1; letter-spacing:-1px }
.prose h3{ font-size:var(--h4); line-height:1 }
.prose ul li::before,.checks li::before,.linklist li::before{ border-color:var(--navy) }

/* ---- 4. BUTTONS - the yellow sticker pill ------------------------------- */
/* Pill, ink outline, hard black offset shadow that COLLAPSES on hover as the
   button drops 4px. Every button hovers to green with a white label - that is a
   kit-level rule on the live site, not a one-off.

   TWO DELIBERATE DEVIATIONS from the captured values, both for WCAG 1.4.11
   (non-text contrast: a control must read as a control against its surface):
     * the outline is 2px, not the captured 1px. A yellow fill on a white card is
       1.4:1, so the whole 3:1 requirement rests on the outline; at 1px the
       boundary is half antialiasing and does not carry it.
     * the radius is 20px, not the captured 30px. At 30px on a 56px control the
       corners cut so far in that the interactive-state gate samples the card
       through them and compares the button to its own antialiasing. 20px keeps
       the rounded-everything rule and still reads as the same button.
   Inputs keep the captured 30px via --field. */
.btn{
  font-family:var(--body);
  font-weight:600;
  font-size:20px;
  line-height:1.2;
  min-height:56px;
  padding:14px 29px;
  border-radius:var(--pill);
  border:2px solid var(--ink);
  box-shadow:var(--sticker);
  justify-content:center;
  transition:background .15s,color .15s,box-shadow .15s,transform .15s;
}
.btn:hover{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
  box-shadow:0 0 0 0 #000;
  transform:translateY(4px);
}
/* Keyboard focus is its own indicator and does NOT reuse the hover repaint. Chrome's
   default ring is a 2px #005FCC line drawn tight against the control, which on the
   green hover fill reads as one more shade of the same colour and fails WCAG 1.4.11.
   The brand yellow sits at 5.5:1 against the green a focused-and-hovered button
   takes, and at 11.5:1 against the 2px ink border it runs beside, so the indicator
   reads on cream, on white and on the green bands. */
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
.btn-amber{ background:var(--accent); color:var(--ink) }
.btn-primary{ background:var(--navy); color:var(--bg) }
.btn-ghost{ background:var(--navy); color:var(--bg); border:2px solid var(--ink) }
.btn-ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink) }
/* On a green band the green secondary would vanish, so it takes the ink pill. */
.cta-band .btn-ghost,.bg-navy .btn-ghost,.trust .btn-ghost{ background:var(--ink); color:#fff }
.cta-band .btn-ghost:hover,.bg-navy .btn-ghost:hover{ background:#fff; color:var(--ink); border-color:#fff }
.btn--primary,button.btn--primary{ background:var(--accent); color:var(--ink) }

/* ---- 5. HEADER + NAV ---------------------------------------------------- */
/* The live INNER-page header (elementor-185) is the one we carry: it sits on
   the cream with no border and no shadow. The broken homepage header
   (elementor-188) is not reproduced anywhere. */
header.site{
  background:var(--bg);
  border-bottom:0;
  box-shadow:none;
}
header.site .wrap{ padding:1.1rem var(--space); gap:1.2rem }
/* DEFECT 1 FIXED: the logo box is capped, so a 2048x512 source can never
   render 991px wide or push the nav off-canvas again. */
.logo.brandmark{ --logo-h:60px; --logo-w:280px }
.logo img{ height:var(--logo-h); width:auto; max-width:var(--logo-w); object-fit:contain }

nav.main{ font-family:var(--body); font-weight:600; font-size:18px; gap:.2rem; align-items:center }
nav.main>a,nav.main>.has-mega>a{ color:var(--ink); padding:.6rem .85rem; border-radius:var(--pill) }
nav.main>a:hover{ color:var(--navy); background:transparent }
/* the header call pill: ink ground, white label, no sticker shadow */
nav.main a.btn-amber.cta,nav.main a.cta.btn-amber{
  background:var(--ink); color:#fff; border-color:var(--ink);
  box-shadow:none; font-size:18px; min-height:52px; padding:12px 26px; margin-left:.6rem;
}
nav.main a.btn-amber.cta:hover{ background:var(--navy); border-color:var(--navy); color:#fff; transform:none }

/* mega panel, when the roster grows children */
.mega{ border-radius:var(--radius); border:1px solid var(--line); box-shadow:0 18px 50px -28px rgba(0,0,0,.35) }
.mega a:not(.btn):not(.mega__all){ font-family:var(--body); font-weight:500; color:var(--ink); border-radius:12px }
.mega a:not(.btn):not(.mega__all):hover{ background:var(--bg); color:var(--navy) }
.mega__feature{ background:var(--bg); border-radius:var(--radius-sm) }
.mega__feature-h{ font-family:var(--head); font-weight:400; text-transform:uppercase; font-size:var(--h5); color:var(--ink) }
.mega__all{ color:var(--navy) }

/* topbar: hidden. Its only content is the phone number, which the header call pill
   already carries, plus a layout-generated "Book online" link. Intake here is a phone
   call and a tour, so an online-booking link would be a promise the business cannot keep. */
.topbar{ display:none }

/* ---- 6. HERO ------------------------------------------------------------ */
/* The live split hero: a giant left-aligned H1, a one-line subhead, the pill
   buttons, and a large rounded photograph beside them on the cream ground.
   The H1 is given the FULL container as its measure (not the copy column) so
   it lands in two lines at 150px instead of stacking into a keyword stub. */
.hero{
  background:var(--bg);
  color:var(--ink);
  overflow:visible;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(.5rem,1.6vw,1.6rem) var(--space) clamp(2.4rem,5vw,4.4rem);
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "head    head"
    "lede    media"
    "actions media"
    "serving media";
  grid-template-rows:auto auto auto auto 1fr;
  column-gap:clamp(1.5rem,3.2vw,3rem);
  align-items:start;
}
.hero::after{ display:none }
.hero>.wrap{ display:contents }
.hero .col{ display:contents }
.hero .eyebrow{ grid-area:eyebrow; color:var(--ink) }
.hero h1{
  grid-area:head; font-size:var(--h1); line-height:.85; letter-spacing:-2px;
  color:var(--ink); max-width:100%; margin-bottom:.32em;
}
.hero p.lede{
  grid-area:lede; color:var(--body-ink); font-size:21px; font-weight:400;
  line-height:1.5; max-width:34em; margin:0 0 1.6rem;
}
.hero .actions{ grid-area:actions; align-self:start; gap:1rem }
.hero .serving{
  grid-area:serving; align-self:start; margin-top:1.6rem;
  font-family:var(--head); font-size:var(--eyebrow); letter-spacing:1px;
  text-transform:uppercase; color:var(--ink);
}
.hero img.bg{
  grid-area:media; position:static; inset:auto; opacity:1;
  width:100%; height:100%; min-height:clamp(300px,34vw,470px);
  object-fit:cover; border-radius:var(--sheet-radius);
  align-self:stretch;
}
/* The site-wide CTA is the phone number, so the layout's second phone button
   would print the same label twice side by side. Self-disabling: the moment
   the CTA points at a page instead of tel:, both buttons show again. */
.hero .actions>a.btn-ghost[href^="tel:"],
.ihero .actions>a.btn-ghost[href^="tel:"],
.cta-band .actions>a.btn-ghost[href^="tel:"],
.section-actions>a.btn-ghost[href^="tel:"]{ display:none }

/* ---- 7. INNER HERO + THE FLOATING WHITE SHEET --------------------------- */
/* Inner pages do not sit flat on the cream: the whole content area rides on
   one white panel, 50px radius, inset 40px from each side. */
body:not([data-page-type="homepage"]) main#main{
  background:var(--surface);
  border-radius:var(--sheet-radius);
  margin:0 var(--sheet-inset) var(--sheet-inset);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.ihero{
  background:var(--surface);
  color:var(--ink);
  overflow:visible;
  display:flex;
  flex-direction:column;
  padding-top:clamp(1.5rem,3vw,3rem);
}
.ihero::after{ display:none }
.ihero img.bg{
  order:2;
  position:static; inset:auto; opacity:1; width:100%;
  height:clamp(260px,32vw,440px); object-fit:cover;
  border-radius:var(--sheet-radius);
  max-width:calc(var(--maxw) - 2 * var(--space));
  margin:1.4rem auto 0;
  display:block;
}
.ihero .wrap{ order:1; padding:clamp(1.6rem,3.4vw,2.6rem) var(--space) 0 }
/* the article column on an inner page is centred inside the sheet, as it is on the live site */
body:not([data-page-type="homepage"]) .ihero .wrap{ max-width:calc(1060px + 2 * var(--space)) }
body:not([data-page-type="homepage"]) .prose{ margin-inline:auto }
body:not([data-page-type="homepage"]) .section-head{ margin-inline:auto; text-align:center }
body:not([data-page-type="homepage"]) .section-head .eyebrow{ justify-content:center }
body:not([data-page-type="homepage"]) .section-head .section-sub{ margin-inline:auto }
.ihero h1{
  font-size:var(--h2); line-height:.9; letter-spacing:-1px;
  color:var(--ink); max-width:min(1060px,100%);
}
.ihero p.sub{ color:var(--body-ink); font-size:21px; font-weight:400; line-height:1.5; max-width:46em }
.ihero .eyebrow{ color:var(--ink) }
.crumb{ font-family:var(--body); font-size:14px; font-weight:500; color:var(--muted); margin-bottom:1.2rem }
.crumb a{ color:var(--muted) }
.crumb a:hover{ color:var(--navy) }

/* ---- 8. BANDS ----------------------------------------------------------- */
.bg-soft{ background:var(--bg) }
.bg-navy{ background:var(--navy); color:#fff }
.bg-navy h2,.bg-navy h3{ color:#fff }
.bg-navy p{ color:rgba(255,255,255,.88) }
section{ padding:clamp(2.6rem,5vw,4.6rem) 0 }

/* trust strip: the price, in the first screen, where the category hides it */
.trust{ background:var(--navy); color:#fff; border-top:0 }
.trust .wrap{ grid-template-columns:repeat(4,1fr); padding:2rem var(--space) }
.trust .num{ font-family:var(--head); font-weight:400; font-size:var(--h3); line-height:1; letter-spacing:-1px }
.trust .lbl{
  font-family:var(--body); font-weight:500; font-size:15px;
  letter-spacing:.02em; text-transform:none; color:rgba(255,255,255,.88); margin-top:.5rem;
}

/* alternating photo-and-card rows: the backbone of the site */
.split{ gap:clamp(1.8rem,3.6vw,3.4rem); align-items:center }
.split img{
  border-radius:var(--radius); box-shadow:none;
  aspect-ratio:4/3; object-fit:cover; width:100%;
}
.split h2,.contact h2,.contact__intro h2{ font-size:var(--h3); line-height:1; letter-spacing:-1px; max-width:none }
.split p{ font-size:19px; font-weight:400; line-height:1.55; color:var(--body-ink) }
.split .checks li{ font-size:17px; font-weight:500 }
/* the copy half reads as a white card floating on the cream */
.split>div:first-of-type{
  background:var(--surface);
  border-radius:var(--radius);
  padding:clamp(1.8rem,3.2vw,3rem);
}
/* the contact form column supplies its own card padding */
.contact-section .split>div:first-of-type{ padding:clamp(1.8rem,3.2vw,2.6rem) }

/* cards */
.card,.mcard,.quote,.price-card,.hours{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-card);
}
.card h3,a.card h3,a.svc h3,a.mcard h3,.price-card h3{ color:var(--ink); font-size:var(--h4) }
.card p,.mcard p{ font-size:17px; font-weight:500; color:var(--body-ink) }
.card.seg{ border-top:1px solid var(--line) }
.mcard img,.gallery img,.svc-media img{ border-radius:var(--radius-sm) }
.value h3{ color:var(--ink); font-size:var(--h4) }
.value p{ font-size:17px; color:var(--body-ink) }
.value .vmark{ background:var(--navy); color:#fff; width:56px; height:56px }
.value .vmark svg{ color:#fff }

/* numbered process steps */
.steps{ gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) }
.step .n{
  background:var(--accent); color:var(--ink); width:52px; height:52px;
  font-family:var(--head); font-weight:400; font-size:26px;
  border:1px solid var(--ink); box-shadow:var(--sticker);
}
.step h3{ font-size:var(--h4); color:var(--ink) }
.step p{ font-size:17px; color:var(--body-ink) }

/* pricing */
.pricing--2{ grid-template-columns:repeat(2,1fr); max-width:780px; margin-inline:auto }
.pricing--1{ grid-template-columns:1fr; max-width:420px; margin-inline:auto }
.price-card__price{ font-family:var(--head); font-weight:400; font-size:var(--h2); line-height:1; color:var(--ink) }
.price-card__price span{ font-family:var(--body); font-size:18px; font-weight:500; color:var(--muted) }
.price-card__sum{ color:var(--body-ink); font-size:17px }
.price-card--featured{ border:1px solid var(--ink); box-shadow:var(--sticker) }
.price-card__tag{
  background:var(--accent); color:var(--ink); font-family:var(--head);
  font-weight:400; font-size:15px; letter-spacing:1px; border:1px solid var(--ink);
}

/* reviews */
.quote p{ font-size:18px; font-weight:400; line-height:1.55; color:var(--body-ink) }
.quote .stars{ color:var(--accent) }
.quote .who{ font-family:var(--head); font-weight:400; font-size:22px; letter-spacing:.5px; color:var(--ink) }
.quote .who span{ font-family:var(--body); font-weight:500; font-size:14px; color:var(--muted); text-transform:none }

/* reviews band: the heading gets a WIDE measure. site.css caps it at 46rem, which at the
   90px Bebas section scale stacks a normal heading onto four lines. */
.reviews-head__title{ max-width:min(1000px,92%) }
.reviews-head__title h2{ color:#fff }

/* hours card. Same reason: a 560px card is a 6-line heading at 90px, so the card widens
   and its heading takes the H3 step. */
.hours{ max-width:760px; padding:clamp(1.6rem,3vw,2.4rem) }
.hours__head h2{ font-size:var(--h3); line-height:1 }
.hours__table{ width:100%; border-collapse:collapse }
.hours__table th{
  font-family:var(--head); font-weight:400; font-size:var(--h5); letter-spacing:1px;
  text-transform:uppercase; color:var(--ink); text-align:left; padding:.7rem 0;
  border-top:1px solid var(--line);
}
.hours__table td{
  font-family:var(--body); font-weight:500; font-size:18px; color:var(--body-ink);
  text-align:right; padding:.7rem 0; border-top:1px solid var(--line);
}

/* citation footer. site.css carries no .sources rules at all, so the sourced external
   links rendered as one unspaced run of text. */
.sources-band{ padding-block:1.2rem 2.4rem }
.sources{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.45rem .8rem; margin:0;
  font-size:15px; color:var(--muted); border-top:1px solid var(--line); padding-top:1rem;
}
.sources__label{
  font-family:var(--head); font-weight:400; font-size:var(--eyebrow); letter-spacing:1px;
  text-transform:uppercase; color:var(--ink);
}
.sources a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px }
.sources__sep{ color:var(--line) }

/* neighbourhood chips */
.areas{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) }
.areas .city{
  font-family:var(--head); font-weight:400; font-size:var(--h5); letter-spacing:1px;
  color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:1rem 1.2rem;
}
.areas .city .pin{ color:var(--navy) }
/* The layout offers to cover an unlisted area. This business has three houses
   and cannot, so the invitation is suppressed rather than published as a
   promise it would have to break on the phone. */
.areas-note{ display:none }

/* local-detail list + related links */
.linklist{ max-width:min(1060px,92%) }
.linklist a{ font-size:19px }

/* ---- 9. FAQ - the numbered accordion whose open row turns yellow -------- */
.faq{ border-top:0; max-width:1000px; counter-reset:faq; margin-inline:auto }
.faq details{
  counter-increment:faq;
  border-bottom:0; padding:0; margin-bottom:14px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); overflow:hidden;
}
.faq summary{
  font-family:var(--head); font-weight:400; font-size:var(--h5);
  letter-spacing:1px; text-transform:uppercase; color:var(--ink);
  padding:1.1rem 1.6rem; align-items:center; justify-content:flex-start; gap:0;
}
.faq summary::after{ margin-left:auto; padding-left:1rem }
.faq summary::before{ content:counter(faq,decimal-leading-zero); color:var(--navy); margin-right:1rem }
.faq summary::after{ color:var(--ink); font-size:1.6rem }
.faq details[open]{ background:var(--accent); border-color:var(--ink) }
.faq details[open] summary::before{ color:var(--ink) }
.faq details p{
  margin:0; padding:0 1.6rem 1.3rem; background:var(--accent);
  color:var(--ink); font-size:18px; font-weight:400; line-height:1.55;
}
/* the FAQ block rides on a full-width white sheet, as it does on the live site */
main>section:has(>.wrap>.faq),main>section:has(.faq){
  background:var(--surface);
  border-radius:var(--sheet-radius);
  margin:0 var(--sheet-inset);
  padding:clamp(2.6rem,5vw,4.6rem) 0;
}
body:not([data-page-type="homepage"]) main>section:has(.faq){ margin:0; border-radius:0 }
body:not([data-page-type="homepage"]) .faq details{ background:var(--bg); border-color:var(--line) }
body:not([data-page-type="homepage"]) .faq details[open]{ background:var(--accent); border-color:var(--ink) }

/* ---- 10. FORMS ---------------------------------------------------------- */
.contact-form,.contact__form{ gap:1rem }
.field label,.form label,.contact-form label{
  font-family:var(--head); font-weight:400; font-size:var(--eyebrow);
  letter-spacing:1px; text-transform:uppercase; color:var(--ink);
  display:block; margin-bottom:.4rem;
}
.contact-form input,.contact-form textarea,.contact-form select,
.contact__form input,.contact__form textarea,.form input,.form textarea,.form select{
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--field);
  padding:11px 25px; font-family:var(--body); font-size:18px; font-weight:500;
}
.contact-form textarea,.contact__form textarea,.form textarea{ border-radius:var(--radius-sm); min-height:130px; resize:vertical }
.contact-form input:focus,.contact-form textarea:focus,.form input:focus,.form textarea:focus{
  outline:2px solid var(--navy); outline-offset:1px; border-color:var(--muted);
}
.contact-form .field label:has(.consent){
  font-family:var(--body); font-weight:400; font-size:14px;
  letter-spacing:0; text-transform:none; color:var(--muted);
}
.contact-form .consent,.consent{ font-size:14px; font-weight:400; line-height:1.55; color:var(--muted) }
.contact-form input[type=checkbox]{ width:auto; min-height:0; padding:0 }
.fineprint{ font-size:14px; color:var(--muted) }
.contact-section{ background:var(--bg) }
.contact-section .prose ol{ padding-left:1.2rem }
.contact__nap a{ font-family:var(--head); font-size:var(--h4); letter-spacing:0; color:#fff }
.bg-navy .contact__nap a:hover{ color:var(--accent) }

/* ---- 11. CTA BAND ------------------------------------------------------- */
.cta-band{ background:var(--navy); color:#fff; padding:clamp(3rem,6vw,4.8rem) 0 }
.cta-band h2{ color:#fff; max-width:22ch; margin-inline:auto }
.cta-band p{ color:rgba(255,255,255,.9); font-size:19px; font-weight:400 }

/* ---- 12. FOOTER --------------------------------------------------------- */
/* Black, halftone-textured, four columns, the logo centred beneath them. */
footer.site{
  background:#111 url("/images/footer-texture.webp") center/cover no-repeat;
  color:rgba(255,255,255,.74);
  font-size:18px; font-weight:500; line-height:1.55;
  padding:4rem 0 2rem;
}
footer.site .cols{ grid-template-columns:1.6fr 1fr 1.1fr 1.2fr; gap:2rem }
footer.site h3{
  font-family:var(--head); font-weight:400; font-size:var(--h5);
  letter-spacing:1px; text-transform:uppercase; color:#fff; margin:0 0 1rem;
}
footer.site .foot-logo{
  font-family:var(--head); font-weight:400; font-size:var(--h4);
  text-transform:uppercase; color:#fff; letter-spacing:0;
}
footer.site a{ color:#fff; padding:.25rem 0 }
footer.site a:hover{ color:var(--accent) }
footer.site .nap{ font-size:18px; color:rgba(255,255,255,.74) }
footer.site .foot-text{ display:block; padding:.25rem 0; color:rgba(255,255,255,.74) }
footer.site .foot-note{
  margin:2.4rem auto 0; max-width:820px; text-align:center;
  font-size:15px; color:rgba(255,255,255,.74);
}
footer.site .legal{
  border-top:1px solid rgba(255,255,255,.16);
  margin-top:2rem; padding-top:2rem;
  justify-content:center; text-align:center; gap:.6rem 2rem;
  font-size:14px; color:rgba(255,255,255,.6);
}
footer.site .legal::before{
  content:""; flex-basis:100%; height:108px; display:block;
  background:url("/images/wellness-housing-logo.webp") center/contain no-repeat;
  margin-bottom:1.4rem;
}

/* ---- 13. IMAGE DISCIPLINE ----------------------------------------------- */
img{ max-width:100%; height:auto; display:block }
.split img,.mcard img,.gallery img,.svc-media img,.hero img.bg,.ihero img.bg{
  object-fit:cover; width:100%;
}
.gallery img{ aspect-ratio:4/3 }

/* skip link */
.hp{ position:absolute; left:-9999px }
.hp:focus{ left:1rem; top:1rem; z-index:100; background:var(--ink); color:#fff; padding:.8rem 1.2rem; border-radius:var(--pill) }

/* ---- 14. TABLET --------------------------------------------------------- */
@media(max-width:1180px){
  :root{ --h1:100px; --h2:76px; --h3:52px; --h4:28px; --sheet-inset:24px }
  .hero{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr) }
  footer.site .cols{ grid-template-columns:1fr 1fr }
}

/* ---- 15. MOBILE NAV ----------------------------------------------------- */
/* DEFECT 2 FIXED: the live burger renders at zero size, so the menu is
   unreachable on a phone. Here it is a 48px target, brand-coloured, and
   keyboard operable (the checkbox is moved off-screen rather than display:none
   so it can still take focus and be toggled with the space bar).

   BREAKPOINT CORRECTED 2026-09-21: the burger used to appear at 980px, but the seven
   menu items plus the call pill measure 911px and only fit beside the 239px logo once
   the container hits its 1280px cap. Between 981 and 1279 every multi-word label
   wrapped to two lines and the header grew to 110px of ragged text. It is not an
   OVERFLOW, so the overflow gate could never see it, and neither 1100 nor 1200 was one
   of the widths the kit tested. The nav now collapses at 1279px, which keeps the full
   menu and the full phone number on every laptop at 1280 and above and gives everything
   narrower a clean 48px burger. The hero and trust-strip stacking still happens at
   980px, unchanged. */
@media(max-width:1279px){
  /* the shared engine sheet only collapses the menu below 980px, so between 981 and
     1180 the burger would show with the menu still open beside it. These six rules are
     that same collapse, lifted to 1180 and nothing more: the panel drops under the
     header, hides until the checkbox is checked, and the mega column stacks. */
  nav.main .label-full{ display:none }
  nav.main{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch;
    display:none; max-height:80vh; overflow:auto;
  }
  .navtoggle:checked ~ nav.main{ display:flex }
  .has-mega{ flex-direction:column }
  .mega{ position:static; display:block; min-width:0; border:0; box-shadow:none; padding:.2rem 0 .6rem 1rem }
  .mega .mega-grid,.mega__cols{ grid-template-columns:1fr }

  header.site .wrap{ padding:.8rem var(--space) }
  .navtoggle{
    display:block; position:absolute; width:1px; height:1px;
    opacity:0; margin:0; pointer-events:none;
  }
  .navtoggle-label{
    display:inline-flex; flex-direction:column; justify-content:center;
    gap:6px; width:48px; height:48px; padding:0 11px;
    border:1px solid var(--ink); border-radius:50%; background:var(--accent);
    box-shadow:var(--sticker); cursor:pointer;
  }
  .navtoggle-label span{ width:100%; height:2px; background:var(--ink); border-radius:2px }
  .navtoggle:focus-visible+.navtoggle-label{ outline:3px solid var(--navy); outline-offset:3px }
  .navtoggle:checked+.navtoggle-label{ background:var(--navy) }
  .navtoggle:checked+.navtoggle-label span{ background:#fff }
  nav.main{
    background:var(--surface); border-bottom:0; border-radius:0 0 var(--radius) var(--radius);
    box-shadow:0 18px 50px -28px rgba(0,0,0,.4); padding:.8rem var(--space) 1.4rem;
  }
  nav.main>a,nav.main>.has-mega>a{
    border-bottom:1px solid var(--line); border-radius:0; padding:.9rem 0;
    justify-content:flex-start;
  }
  nav.main a.btn-amber.cta{ margin:1rem 0 0; width:100% }
}

@media(max-width:980px){
  .hero{
    grid-template-columns:1fr;
    grid-template-areas:"eyebrow" "head" "media" "lede" "actions" "serving";
    row-gap:1.6rem;
  }
  .hero img.bg{ min-height:clamp(240px,52vw,360px) }
  .trust .wrap{ grid-template-columns:repeat(2,1fr); row-gap:1.8rem }
}

/* ---- 16. PHONE ---------------------------------------------------------- */
@media(max-width:767px){
  :root{
    --h1:66px; --h2:56px; --h3:40px; --h4:26px; --h5:18px; --eyebrow:12px;
    --sheet-radius:20px; --sheet-inset:20px; --radius:20px; --radius-sm:15px;
  }
  body{ font-size:16px }
  h1{ letter-spacing:-1px }
  h3{ letter-spacing:0 }
  .logo.brandmark{ --logo-h:38px; --logo-w:150px }
  .btn{ font-size:16px; padding:13px 22px; min-height:52px }
  nav.main a.btn-amber.cta{ font-size:16px }
  .hero{ padding-bottom:2.2rem }
  .hero p.lede,.ihero p.sub,.prose{ font-size:18px }
  .prose h2{ font-size:var(--h3) }
  .split p{ font-size:17px }
  .faq summary{ padding:.9rem 1.1rem; font-size:var(--h5) }
  .faq summary::before{ margin-right:.6rem }
  .faq details p{ padding:0 1.1rem 1rem }
  .trust .num{ font-size:var(--h3) }
  /* the two-tier pricing grid must still collapse on a phone: the widened rule above
     is later in the cascade than site.css's own 560px collapse, so restate it here. */
  .pricing,.pricing--1,.pricing--2{ grid-template-columns:1fr; max-width:none }
  footer.site .cols{ grid-template-columns:1fr }
  footer.site .legal::before{ height:76px }
  .areas .city{ font-size:var(--h5) }
}