/* ============================================================
   Star Center — shared site stylesheet (interior pages)
   Loaded in addition to the theme style.css on non-front pages.
   ============================================================ */
:root{
  --red:#8d0b0b;
  --red-deep:#6f0808;
  --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;
  --sec-x: max(28px, calc((100% - 1354px) / 2));
}
*{ 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; }

#frame{ position:relative; width:100%; }
.stage{ position:relative; width:100%; background:#fff; }

/* ============ BUTTONS ============ */
.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--red{ background:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-deep); }
.btn--white{ background:#fff; color:var(--red); border-color:transparent; }
.btn--white:hover{ background:var(--red); color:#fff; }
.btn--outline{ background:transparent; color:var(--red); border-color:var(--red); }
.btn--outline:hover{ background:var(--red); color:#fff; }
.btn--nav{ font-size:22px; padding:16px 36px; }
.btn--plainred{ background:transparent; color:var(--red); border-color:transparent; padding:16px 12px; }
.btn--plainred:hover{ transform:translateY(-2px); opacity:.82; }
.btn--lg{ font-size:22px; padding:17px 40px; }

/* ============ 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(--sec-x); 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__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; }
.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; }

/* ============ PAGE HERO ============ */
.phero{ width:100%; background:var(--cream); padding:38px var(--sec-x); display:flex; align-items:center; gap:64px; }
.phero__body{ flex:1; }
.phero__eyebrow{ font-family:'Poppins',sans-serif; font-size:18px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:0 0 12px; }
.phero h1{ margin:0 0 16px; font-family:'Manrope',sans-serif; font-weight:700; font-size:60px; line-height:1.1; color:var(--head); letter-spacing:-.01em; }
.phero p{ margin:0; font-size:19px; line-height:1.7; color:var(--ink-2); max-width:640px; }
.phero__img{ flex:1 1 380px; width:100%; max-width:520px; min-width:0; height:auto; aspect-ratio:2/1; border-radius:24px; object-fit:cover; }
.phero--center{ flex-direction:column; text-align:center; gap:0; }
.phero--center .phero p{ max-width:760px; margin:0 auto; }

/* ============ GENERIC SECTION ============ */
.sec{ width:100%; padding:38px var(--sec-x); }
.sec--cream{ background:var(--cream); }
.sec--white{ background:#fff; }
.sec--off{ background:var(--offwhite); }
.sec--gray{ background:var(--gray); }
.sec--dark{ background:#000; color:#fff; }
.sec__head{ max-width:880px; margin:0 0 26px; }
/* Section heads are left-aligned everywhere else because they sit above
   left-aligned prose. On a page whose hero is centred - the 404 - a left
   head under a centred heading is the same mismatch .faqlist--center fixes. */
.sec__head--center{ max-width:980px; margin-left:auto; margin-right:auto;
  text-align:center; }
.sec__title{ margin:0 0 12px; font-family:'Manrope',sans-serif; font-weight:700; font-size:46px; line-height:1.12; color:var(--ink); }
.sec--dark .sec__title{ color:#fff; }
.sec__lead{ margin:0; font-size:18px; line-height:1.7; color:var(--ink); }
.sec--dark .sec__lead{ color:rgba(255,255,255,.86); }

/* ---- prose ---- */
.prose{ max-width:880px; }
.prose h3{ margin:26px 0 10px; font-family:'Manrope',sans-serif; font-weight:700; font-size:28px; color:var(--ink); }
.prose h3:first-child{ margin-top:0; }
.prose p{ margin:0 0 16px; font-size:18px; line-height:1.75; color:var(--ink); }

/* ---- value / info cards grid ---- */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.icard{ background:var(--offwhite); border:1px solid #eef1f0; border-radius:26px; padding:32px; }
.icard__ic{ width:54px; height:54px; border-radius:14px; background:var(--cream); color:var(--red); display:grid; place-items:center; margin-bottom:16px; }
.icard__ic svg{ width:28px; height:28px; }
.icard h3{ margin:0 0 12px; font-family:'Manrope',sans-serif; font-weight:700; font-size:26px; color:var(--ink); }
.icard p{ margin:0; font-size:17px; line-height:1.7; color:var(--ink); }

/* ---- numbered steps (timeline) ---- */
.steps2{ display:flex; flex-direction:column; gap:0; max-width:980px; }
.step2{ display:flex; gap:32px; padding:0 0 28px; position:relative; }
.step2:last-child{ padding-bottom:0; }
.step2__n{ flex:0 0 64px; width:64px; height:64px; border-radius:50%; background:var(--red); color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:26px; display:grid; place-items:center; position:relative; z-index:2; }
.step2:not(:last-child)::before{ content:""; position:absolute; left:32px; top:64px; bottom:0; width:2px; background:#e7ddd5; }
.step2__body h3{ margin:6px 0 10px; font-family:'Manrope',sans-serif; font-weight:700; font-size:26px; color:var(--ink); }
.step2__body p{ margin:0; font-size:18px; line-height:1.7; color:var(--ink); max-width:640px; }

/* ---- program cards ---- */
.pgcards{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch; }
.pgcard{ min-width:0; overflow-wrap:anywhere; background:#fff; border:1px solid #eef1f0; border-radius:30px; padding:32px; display:flex; flex-direction:column; box-shadow:0 30px 60px -42px rgba(0,0,0,.2); }
.pgcard h3{ margin:0 0 14px; font-family:'Manrope',sans-serif; font-weight:700; font-size:32px; color:var(--ink); }
.pgcard p{ margin:0 0 14px; font-size:17px; line-height:1.7; color:var(--ink); }
/* margin-top:auto bottom-aligns the button so cards of unequal text length stay balanced */
.pgcard .btn{ margin-top:auto; align-self:flex-start; font-size:20px; padding:15px 34px; }

/* ---- feature list (services) ---- */
.flist{ display:grid; grid-template-columns:1fr 1fr; gap:22px 48px; }
.fitem{ border-top:2px solid var(--cream); padding-top:18px; }
.fitem h3{ margin:0 0 10px; font-family:'Manrope',sans-serif; font-weight:700; font-size:22px; color:var(--ink); }
.fitem p{ margin:0; font-size:16px; line-height:1.65; color:#3a3a3a; }

/* ---- FAQ accordion ---- */
.faqlist{ max-width:980px; border-top:1px solid #e9e9e9; }
/* The FAQ page is the only one whose hero is centred and whose accordion has
   nothing below it to line up with, so past ~1060px - where the band grows
   wider than the list - it sat hard left under a centred heading with 374px of
   empty page beside it. Counseling and Gold Star reuse .faqlist under a
   left-aligned hero next to left-aligned prose, so they must stay as they are:
   this is a modifier, not a change to the base. Below ~1060px the list already
   fills the band and this does nothing. */
.faqlist--center{ margin-left:auto; margin-right:auto; }
.faqitem{ border-bottom:1px solid #e9e9e9; }
.faqitem summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 4px; font-family:'Manrope',sans-serif; font-weight:700; font-size:23px; color:var(--ink); }
.faqitem summary::-webkit-details-marker{ display:none; }
.faqitem summary .pm{ flex:0 0 30px; width:30px; height:30px; position:relative; }
.faqitem summary .pm::before, .faqitem summary .pm::after{ content:""; position:absolute; background:var(--red); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.faqitem summary .pm::before{ left:5px; right:5px; top:14px; height:2.5px; }
.faqitem summary .pm::after{ top:5px; bottom:5px; left:14px; width:2.5px; }
.faqitem[open] summary .pm::after{ transform:scaleY(0); opacity:0; }
.faqitem__a{ padding:0 4px 22px; font-size:17px; line-height:1.75; color:#333; max-width:820px; }

/* ---- testimonials ---- */
.tst__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.tcard{ background:#fff; border-radius:24px; padding:28px 26px; box-shadow:0 30px 60px -40px rgba(0,0,0,.22); display:flex; flex-direction:column; }
.tcard__qm{ font-family:'Inter',serif; font-weight:700; font-size:54px; line-height:.5; color:var(--red); margin-bottom:14px; }
.tcard p{ margin:0 0 18px; font-size:17px; line-height:1.7; color:var(--ink); }
.tcard__by{ margin-top:auto; font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; color:var(--ink); }
.tcard__role{ font-family:'Poppins',sans-serif; font-size:14px; color:#8a8a8a; font-weight:400; }
.tst__note{ margin:20px 0 0; font-size:14px; color:#9a9a9a; font-style:italic; }

/* ---- stats band ---- */
.stats{ width:100%; background:var(--red); color:#fff; padding:34px var(--sec-x); display:flex; justify-content:space-between; gap:40px; }
.stat{ text-align:center; flex:1; }
.stat__n{ font-family:'Manrope',sans-serif; font-weight:800; font-size:58px; line-height:1; }
.stat__l{ font-family:'Poppins',sans-serif; font-size:18px; margin-top:8px; color:rgba(255,255,255,.85); }
.stat__divider{ width:1px; background:rgba(255,255,255,.22); }

/* ---- contact layout ---- */
.contact{ display:flex; gap:72px; align-items:flex-start; }
.contact__info{ flex:1 1 340px; min-width:0; max-width:460px; }
.cinfo{ display:flex; gap:18px; align-items:flex-start; margin-bottom:26px; }
.cinfo__ic{ flex:0 0 46px; width:46px; height:46px; border-radius:50%; background:var(--cream); color:var(--red); display:grid; place-items:center; }
.cinfo__ic svg{ width:20px; height:20px; }
.cinfo__label{ font-family:'Poppins',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#8a8a8a; margin:0 0 4px; }
.cinfo__val{ font-family:'Manrope',sans-serif; font-weight:700; font-size:20px; color:var(--ink); line-height:1.4; }
.cinfo__val span{ display:block; font-family:'Poppins',sans-serif; font-weight:400; font-size:15px; color:#555; margin-top:2px; }
/* Phone numbers and the address are links, but a contact block where every
   value is blue and underlined reads as a link farm rather than information.
   Keep them in the body colour and show the underline only on hover or
   keyboard focus. */
.cinfo__val a{ color:inherit; text-decoration:none; border-radius:4px; }
.cinfo__val a:hover{ text-decoration:underline; text-underline-offset:3px; }
.cinfo__val a:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
/* The address spans two lines, so the link has to be a block for the second
   line to sit under the first and for the whole thing to be one tap target. */
.cinfo__map{ display:inline-block; }
.form{ flex:1; background:var(--offwhite); border:1px solid #eef1f0; border-radius:26px; padding:42px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:'Poppins',sans-serif; font-size:15px; font-weight:500; color:#333; margin-bottom:8px; }
.field input, .field select, .field textarea{ width:100%; font-family:'Poppins',sans-serif; font-size:16px; color:var(--ink); background:#fff; border:1.5px solid #e2e2e2; border-radius:10px; padding:14px 16px; outline:none; transition:border-color .18s ease; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--red); }
.field textarea{ min-height:140px; resize:vertical; }
.consent{ display:flex; gap:12px; align-items:flex-start; margin-bottom:24px; }
.consent input{ width:20px; height:20px; flex:0 0 20px; margin-top:3px; accent-color:var(--red); }
.consent label{ font-size:14px; line-height:1.6; color:#555; }
.form .btn{ font-size:20px; padding:16px 40px; }

/* ---- Contact page: get the form onto the first screen -------------------
   A full-size hero plus a full-size section pushed the form roughly 700px
   down, so a visitor landing here saw a headline and no way to get in touch.
   The hero is trimmed, the intro moves in beside the phone numbers, and the
   two columns start right under it. */
.phero--compact{ padding:30px var(--sec-x) 24px; }
.phero--compact h1{ font-size:38px; margin:0; }
.sec--contact{ padding-top:30px; padding-bottom:48px; }
.contact__lede{ font-size:16px; line-height:1.7; color:#555; margin:0 0 26px; }
/* Two balanced columns, centred. The form column is deliberately under 480px:
   that is Jotform's own breakpoint, below which it lays its fields out full
   width instead of half width with dead space beside them. */
.sec--contact .contact{ display:flex; flex-direction:row; gap:56px;
  max-width:1040px; margin:0 auto; align-items:flex-start; }
.sec--contact .contact__info{ flex:1 1 380px; max-width:500px; }
.sec--contact .form--embed{ flex:0 0 452px; max-width:452px; }
.sec--contact .cinfo{ margin-bottom:18px; }
.sec--contact .cinfo__ic{ flex:0 0 40px; width:40px; height:40px; }
.sec--contact .cinfo__val{ font-size:18px; }

/* Jotform embed. The form is an iframe, so everything inside it — background,
   field widths, button colour — is set in Jotform, not here. What the theme
   can do is frame it like the site's other panels: no padding of its own (the
   form brings plenty), and rounded corners that clip the iframe so the form's
   own background reads as one clean card instead of a box inside a box. */
/* The embed used to paint a tinted page (#f3f3fe) with its own white card
   inset 8px inside it — a box inside a box — and the workaround was to crop
   the iframe by exactly that 8px. That crop then ate the top of Jotform's
   validation banner, which renders at y=0 inside the frame: submit an empty
   form and the error message was sliced by the rounded corner.
   The inset is now gone at source (the form's own background is white and
   flush), so there is nothing to crop and nothing to clip. Do not reintroduce
   a negative margin here — anything Jotform draws at the very top of the
   frame, errors included, has to stay visible. */
.form.form--embed{ background:#fff; border:1px solid #eef1f0; border-radius:16px;
  padding:0; overflow:hidden; align-self:flex-start; position:relative; }
.form.form--embed iframe{ width:100% !important; min-width:0 !important;
  max-width:none !important; border:0; display:block; margin:0; }

/* Loading state: the embed arrives asynchronously, so hold the space and say
   what is happening rather than showing an empty column. */
.form__loading{ display:none; }
.form--embed.is-loading{ background:var(--offwhite); border:1px solid #eef1f0;
  min-height:620px; }
.form--embed.is-loading iframe{ opacity:0; }
.form--embed.is-loading .form__loading{ position:absolute; inset:0; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center; padding:24px; }
.form__loading p{ margin:0; font-size:16px; color:#666; }
.form__loading-alt{ font-size:15px !important; color:#8a8a8a !important; }
.form__loading-alt a{ color:var(--red); font-weight:600; }
.form__spinner{ width:34px; height:34px; border:3px solid #e6e6e6;
  border-top-color:var(--red); border-radius:50%; animation:sc-spin .8s linear infinite; }
@keyframes sc-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .form__spinner{ animation-duration:2.4s; } }

@media (max-width:900px){
  .phero--compact{ padding:32px var(--sec-x) 24px; }
  .phero--compact h1{ font-size:32px; }
  .sec--contact{ padding-top:28px; }
  /* One centred column capped at the same 452px the form gets on a desktop.
     That is under Jotform's own 480px breakpoint, so the fields run the full
     width of the card instead of sitting half-width with dead space beside
     them.

     Order, on a phone: intro and the two phone numbers, then the form, then
     fax, address and hours. Calling is one tap and gets answered out of hours;
     the form is seven fields and a wait, so the number goes first. But only
     the part worth that position goes first - the two phone rows are 98px.
     Fax, address and hours are for people who have already made contact or
     already decided to come in. Lifting the whole info column above the form
     instead would push the first form field 1.1-1.5 screens down, measured
     across iPhone SE, iPhone 14 and Pixel 7.

     display:contents dissolves .contact__info so its two halves become flex
     items of .contact and can be ordered around the form, which sits in a
     different parent. A browser that ignores display:contents simply keeps the
     column whole above the form: still the right order, just longer. */
  .sec--contact .contact{ flex-direction:column; gap:30px;
    align-items:center; max-width:452px; }
  .sec--contact .contact__info{ display:contents; }
  .sec--contact .contact__lead{ order:1; }
  .sec--contact .form.form--embed{ order:2; }
  .sec--contact .contact__rest{ order:3; }
  /* As a flex item the lead block keeps its last child's bottom margin instead
     of collapsing it away, which would add 18px to the 30px column gap. */
  .sec--contact .contact__lead .cinfo:last-child{ margin-bottom:0; }
  /* In a column, flex-basis is the HEIGHT. The 452px that sizes the form
     beside the address block on desktop turned into a 452px-tall window with
     overflow:hidden, which cut the form off mid-field on every tablet and
     phone. Everything is content-height from here down. */
  .sec--contact .contact__lead,
  .sec--contact .contact__rest,
  .sec--contact .form.form--embed{ flex:0 0 auto; width:100%; max-width:100%; }
}

/* ---- emergency callout + hotlines ---- */
.callout{ background:#fff4f4; border:1.5px solid #f2c9c9; border-radius:22px; padding:26px 30px; max-width:980px; margin:0 auto 28px; }
.callout h3{ margin:0 0 10px; font-family:'Manrope',sans-serif; font-weight:700; font-size:24px; color:var(--red); }
.callout p{ margin:0; font-size:17px; line-height:1.7; color:#3a2a2a; }
.callout b{ color:var(--red); }
.hlines{ max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:0; border-top:1px solid #ececec; }
.hline{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 4px; border-bottom:1px solid #ececec; }
.hline__name{ font-family:'Poppins',sans-serif; font-size:18px; color:var(--ink); }
.hline__num{ font-family:'Manrope',sans-serif; font-weight:700; font-size:22px; color:var(--red); white-space:nowrap; }
.hline__num:hover{ text-decoration:underline; }

/* ---- community partner ---- */
.pcard{ display:flex; gap:44px; align-items:center; background:var(--offwhite); border:1px solid #eef1f0; border-radius:28px; padding:36px; }
.pcard__mark{ flex:0 0 300px; height:200px; border-radius:18px; background:linear-gradient(135deg,#0f5b52,#157e6f); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:0 18px; }
.pcard__mark b{ font-family:'Manrope',sans-serif; font-weight:800; font-size:56px; line-height:1; }
.pcard__mark span{ font-family:'Poppins',sans-serif; font-size:14px; letter-spacing:.04em; opacity:.9; }
.pcard__body h3{ margin:0 0 12px; font-family:'Manrope',sans-serif; font-weight:700; font-size:28px; color:var(--ink); }
.pcard__body p{ margin:0 0 14px; font-size:17px; line-height:1.7; color:var(--ink); max-width:760px; }
.pcard__body p:last-child{ margin-bottom:0; }
.pcard__body a.inline{ color:var(--red); font-weight:600; }
.pcard__body a.inline:hover{ text-decoration:underline; }

/* ---- article cards ---- */
.acards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.acard{ background:#fff; border:1px solid #eef1f0; border-radius:22px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 60px -44px rgba(0,0,0,.2); }
.acard__img{ height:210px; width:100%; object-fit:cover; }
.acard__body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.acard__tag{ font-family:'Poppins',sans-serif; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin:0 0 12px; }
.acard h3{ margin:0 0 12px; font-family:'Manrope',sans-serif; font-weight:700; font-size:22px; line-height:1.25; color:var(--ink); }
.acard p{ margin:0 0 20px; font-size:15px; line-height:1.65; color:#444; }
.acard__more{ margin-top:auto; font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; color:var(--red); }
.acard__more:hover{ text-decoration:underline; }

/* ---- news list ---- */
.newslist{ max-width:980px; border-top:1px solid #ececec; }
.newsitem{ display:flex; gap:36px; padding:22px 4px; border-bottom:1px solid #ececec; }
.newsitem__date{ flex:0 0 150px; font-family:'Poppins',sans-serif; font-size:15px; color:#8a8a8a; padding-top:4px; }
.newsitem__body h3{ margin:0 0 10px; font-family:'Manrope',sans-serif; font-weight:700; font-size:23px; color:var(--ink); }
.newsitem__body p{ margin:0; font-size:16px; line-height:1.7; color:#3a3a3a; max-width:680px; }

/* ---- helpful links ---- */
.linkgroup{ margin-bottom:30px; }
.linkgroup:last-child{ margin-bottom:0; }
.linkgroup > h3{ margin:0 0 14px; font-family:'Manrope',sans-serif; font-weight:700; font-size:26px; color:var(--ink); }
.lcards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lcard{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; background:var(--offwhite); border:1px solid #eef1f0; border-radius:18px; padding:20px 24px; transition:border-color .18s ease, transform .14s ease; }
.lcard:hover{ border-color:var(--red); transform:translateY(-2px); }
.lcard h4{ margin:0 0 6px; font-family:'Manrope',sans-serif; font-weight:700; font-size:19px; color:var(--ink); }
.lcard p{ margin:0; font-size:15px; line-height:1.6; color:#555; }
.lcard__arrow{ flex:0 0 22px; color:var(--red); margin-top:2px; }
.lcard__arrow svg{ width:22px; height:22px; display:block; }

/* ---- CTA band ---- */
.cta{ width:100%; background:var(--cream); padding:38px var(--sec-x); display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.cta--white{ background:#fff; }
.cta h2{ margin:0; font-family:'Manrope',sans-serif; font-weight:700; font-size:48px; 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; font-size:22px; padding:17px 44px; }

/* ============ FOOTER ============ */
.footer{ width:100%; background:var(--red); position:relative; z-index:1; height:200px; }
.footer__logo{ position:absolute; left:var(--sec-x); 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; }

/* ============ MOBILE NAV ============ */
.m-bar{ display:none; align-items:center; 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:84px 0 32px; font-family:'Poppins',sans-serif; }
body.m-open .m-drawer{ transform:translateX(0); }
.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); }
.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:480px; }
.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); }

/* ============ RESPONSIVE ============ */
/* Header only: switch to the mobile bar from 1100px down (matches style.css),
   so the desktop nav can't overflow interior pages in the ~981-1099 band. */
@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, .phero, .sec, .stats, .cta, .footer{ width:100%; }

  .phero{ flex-direction:column; align-items:stretch; padding:26px 28px; gap:20px; }
  .phero h1{ font-size:clamp(32px,7.5vw,50px); }
  .phero p{ font-size:16px; max-width:none; }
  .phero__img{ flex:none; width:100%; max-width:none; height:auto;
    aspect-ratio:2/1; order:-1; }

  .sec{ padding:28px 28px; }
  .sec__head{ margin-bottom:18px; }
  .sec__title{ font-size:clamp(27px,6.2vw,40px); }
  .sec__lead, .prose p{ font-size:16px; }
  .prose h3{ font-size:23px; }

  .grid2{ grid-template-columns:1fr; gap:18px; }
  .icard{ padding:24px; }
  .icard h3{ font-size:23px; }
  .icard p{ font-size:16px; }

  .step2{ gap:20px; padding-bottom:22px; }
  .step2__n{ flex:0 0 50px; width:50px; height:50px; font-size:21px; }
  .step2:not(:last-child)::before{ left:25px; top:50px; }
  .step2__body h3{ font-size:22px; }
  .step2__body p{ font-size:16px; }

  .pgcards{ grid-template-columns:1fr; gap:18px; }
  .pgcard{ padding:26px; }
  .pgcard h3{ font-size:27px; }

  .flist{ grid-template-columns:1fr; gap:22px; }

  .faqitem summary{ font-size:19px; padding:16px 2px; }
  .faqitem__a{ font-size:16px; }

  .tst__grid{ grid-template-columns:1fr; gap:18px; }
  .tcard{ padding:26px; }
  .tcard p{ font-size:16px; }

  .stats{ flex-direction:column; padding:32px 28px; gap:22px; }
  .stat__divider{ display:none; }
  .stat__n{ font-size:46px; }

  .contact{ flex-direction:column; gap:32px; }
  .contact__info{ flex:none; width:100%; }
  .form{ width:100%; padding:28px; }
  .form__row{ grid-template-columns:1fr; gap:0; }

  .callout{ padding:22px; }
  .hline{ flex-direction:column; align-items:flex-start; gap:6px; padding:18px 2px; }
  .hline__num{ font-size:20px; }

  .pcard{ flex-direction:column; align-items:stretch; gap:24px; padding:26px; }
  .pcard__mark{ flex:none; width:100%; height:150px; }
  .pcard__mark b{ font-size:46px; }
  .pcard__body h3{ font-size:24px; }
  .pcard__body p{ font-size:16px; max-width:none; }

  .acards{ grid-template-columns:1fr; gap:16px; }
  .newsitem{ flex-direction:column; gap:6px; padding:22px 2px; }
  .newsitem__date{ flex:none; }
  .newsitem__body h3{ font-size:21px; }
  .linkgroup > h3{ font-size:23px; }
  .lcards{ grid-template-columns:1fr; gap:14px; }
  .lcard{ padding:20px; }

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

  .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){
  .phero, .sec, .stats, .cta, .footer{ padding-left:20px; padding-right:20px; }
}

/* ---- group calendar ---- */
.cal{ max-width:1200px; margin:0 auto; }
.cal__month{ margin:0 0 18px; font-family:'Manrope',sans-serif; font-weight:700; font-size:32px; color:var(--ink); text-align:center; }
.cal__preview{ background:#fff; border:1px solid #eef1f0; border-radius:20px; padding:12px; box-shadow:0 30px 60px -42px rgba(0,0,0,.2); }
.cal__img{ display:block; width:100%; height:auto; border-radius:10px; }
/* Match the PDF's page shape (US Letter landscape, 792x612pt) so the whole page
   fits the width — no horizontal scroll inside the embed. */
.cal__embed{ display:block; width:100%; aspect-ratio:792 / 612; height:auto; border:0; border-radius:10px; }
.cal__fallback, .cal__empty{ margin:0; padding:28px; font-size:17px; line-height:1.6; color:var(--ink); text-align:center; }
.cal__actions{ margin-top:20px; text-align:center; }
.cal__download{ font-size:20px; padding:15px 40px; }
@media (max-width:560px){
  .cal__month{ font-size:26px; }
}

/* ---- referral resources (styled list of places + phone numbers) ---- */
.rrlist{ max-width:980px; margin:0 auto; display:grid; gap:12px; }
.rrcard{ display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--offwhite); border:1px solid #eef1f0; border-radius:18px; padding:16px 22px; transition:box-shadow .2s ease, transform .2s ease; }
.rrcard:hover{ box-shadow:0 24px 46px -34px rgba(0,0,0,.28); transform:translateY(-2px); }
.rrcard__info{ min-width:0; }
.rrcard__name{ display:block; font-family:'Poppins',sans-serif; font-weight:600; font-size:19px; color:var(--ink); }
.rrcard__name a{ color:inherit; text-decoration:none; }
.rrcard__name a:hover{ color:var(--red); text-decoration:underline; }
.rrcard__detail{ display:block; margin-top:4px; font-size:15px; line-height:1.5; color:var(--ink-2); }
.rrcard__num{ display:inline-flex; align-items:center; gap:10px; flex:none; font-family:'Manrope',sans-serif; font-weight:700; font-size:21px; color:var(--red); white-space:nowrap; }
.rrcard__num:hover{ text-decoration:underline; }
.rrcard__num--static{ color:var(--ink); }
.rrcard__num--static:hover{ text-decoration:none; }
.rrcard__ic{ width:20px; height:20px; flex:none; }
.rrcard__link{ flex:0 1 auto; min-width:0; font-size:16px; white-space:normal; overflow-wrap:anywhere; }
.rrcard__ext{ width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rrlist__empty{ margin:0; padding:28px; font-size:17px; line-height:1.6; color:var(--ink); text-align:center; }
@media (max-width:560px){
  .rrcard{ flex-direction:column; align-items:flex-start; gap:10px; padding:18px 20px; }
  .rrcard__num{ font-size:20px; }
}

/* ---- patient forms (one card per form link in the page content) ---- */
.pflist{ max-width:980px; margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.pfcard{ display:flex; align-items:center; gap:18px; height:100%; background:var(--offwhite); border:1px solid #eef1f0; border-left:4px solid var(--red); border-radius:18px; padding:22px 24px; transition:box-shadow .2s ease, transform .2s ease, background .2s ease; }
.pfcard:hover{ background:#fff; box-shadow:0 24px 46px -34px rgba(0,0,0,.32); transform:translateY(-2px); }
.pfcard:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.pfcard__ic{ flex:0 0 54px; width:54px; height:54px; border-radius:14px; background:var(--cream); color:var(--red); display:grid; place-items:center; }
.pfcard__ic svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pfcard__info{ flex:1; min-width:0; }
.pfcard__name{ display:block; font-family:'Manrope',sans-serif; font-weight:700; font-size:20px; line-height:1.3; color:var(--ink); }
.pfcard__go{ flex:none; display:inline-flex; align-items:center; gap:8px; font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; color:var(--red); white-space:nowrap; }
.pfcard__go svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.pfcard:hover .pfcard__go svg{ transform:translateX(4px); }
.pfnote{ max-width:980px; margin:28px auto 0; padding:18px 22px; background:var(--cream); border-radius:14px; font-size:17px; line-height:1.6; color:var(--ink-2); text-align:center; }
.pfnote a{ color:var(--red); font-weight:700; white-space:nowrap; }
.pfnote a:hover{ text-decoration:underline; }
@media (max-width:900px){
  .pflist{ grid-template-columns:minmax(0,1fr); }
}

/* ---- a single patient form page (template-parts/jotform-page.php) ---- */
.phero--form .phero__body{ width:100%; max-width:860px; margin:0 auto; }
.phero--form h1{ font-size:44px; }
.phero--form p{ margin-top:10px; font-size:17px; }
.pfreq{ color:var(--red); font-weight:700; }
.pfback{ display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; color:var(--red); }
.pfback svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.pfback:hover svg{ transform:translateX(-3px); }
.pfback:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.sec--form{ padding-top:32px; padding-bottom:48px; }
.pfwrap{ max-width:860px; margin:0 auto; }
.pfwrap .form--embed{ box-shadow:0 30px 60px -48px rgba(0,0,0,.35); }
/* These forms are long, so the frame holds ~1,400px while loading; a centred
   spinner would sit below the fold. Keep it where the visitor is looking. */
.pfwrap .form--embed.is-loading .form__loading{ justify-content:flex-start; padding-top:110px; }
.pfintro{ margin-bottom:24px; }
.pfwrap .pfnote{ margin-top:24px; }
@media (max-width:560px){
  .pfcard{ flex-wrap:wrap; padding:18px 20px; }
  .pfcard__go{ flex-basis:100%; padding-left:72px; }
  .phero--form h1{ font-size:32px; }
  .sec--form{ padding-left:12px; padding-right:12px; }
}

/* ---- wide screens: spend the width instead of the scroll ----------------
   Lists of short, self-contained rows were running in a single 980px column
   with a third of the band empty beside them - the referral list alone ran
   2,463px that way, against 1,640px in two columns across the full band.

   This block lives at the end of the file on purpose: the rules it overrides
   are defined further down than it would otherwise sit, and at equal
   specificity the later rule wins. Placed mid-file it silently did nothing.

   Deliberately NOT included: .prose, .sec__head and .faqlist. The empty space
   beside a paragraph is not waste, it is line length. At 880px and 18px those
   lines already run ~95 characters, past the comfortable measure; widening
   them to fill the band would make the page harder to read, not better. */
@media (min-width:1100px){
  .rrlist{ max-width:none; grid-template-columns:1fr 1fr; gap:12px 20px; }

  .hlines{ max-width:none; display:grid; grid-template-columns:1fr 1fr;
    column-gap:48px; border-top:0; }
  /* The list spans the band now, so the alert above it lines up on the left
     instead of sitting centred over it. Its own width stays at the readable
     measure rather than stretching to match. */
  .callout{ margin-left:0; margin-right:auto; }

  /* The connector line only reads down a single column, so once the steps sit
     side by side the numbers carry the sequence instead. */
  .steps2{ max-width:none; display:grid; grid-template-columns:1fr 1fr;
    column-gap:56px; row-gap:30px; }
  .steps2 .step2{ padding-bottom:0; }
  .steps2 .step2:not(:last-child)::before{ display:none; }
}

/* ---- 404 ----
   Only the hero's action row needs styling; the suggested-page cards reuse
   .rrlist/.rrcard. The buttons wrap rather than shrink, so a narrow phone
   stacks them at full tap size instead of squeezing two onto one line. */
.nf__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin-top:26px; }
.nf__after{ margin-top:16px; font-size:16px; color:var(--ink-2); }
.nf__after a{ color:var(--red); font-weight:700; }
.nf__after a:hover{ text-decoration:underline; }
@media (max-width:560px){
  .nf__actions{ flex-direction:column; align-items:stretch; }
  .nf__actions .btn{ width:100%; }
}