/* SYNERGY HomeCare of Middle Tennessee: Careers Landing Pages
   Brand palette sampled directly from the SYNERGY HomeCare logo.
   Mobile-first: the large majority of Meta caregiver traffic is on phones. */

:root {
  --wine:        #872F39;   /* logo heart swoosh + tagline */
  --wine-dark:   #6B242C;
  --wine-tint:   #FBF3F4;
  --plum:        #38323C;   /* logo wordmark */
  --charcoal:    #433F3C;   /* site header */
  --ink:         #241F26;
  --body:        #4E4952;
  --muted:       #7A737F;
  --line:        #E6E1E6;
  --bg:          #FFFFFF;
  --bg-soft:     #FAF8F7;
  --gold:        #B8873B;
  --green:       #2F6B4F;
  --green-tint:  #EEF6F1;

  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 1px 2px rgba(36,31,38,.05), 0 8px 24px rgba(36,31,38,.07);
  --shadow-lg:   0 2px 4px rgba(36,31,38,.06), 0 18px 44px rgba(36,31,38,.13);
  --wrap:        1080px;

  /* Typography: the real SYNERGY brand faces, served from SYNERGY's own Adobe
     Fonts kit (ndf4syl) which is what synergyhomecare.com itself loads.
     Available weights are limited by the kit, so respect them:
       atrament-web     400 only   -> never ask for bold, you'd get a fake one
       quasimoda        400, 700
       fairwater-script 700 only
     Fallbacks are listed for the seconds before the kit lands, and for the
     day it doesn't. */
  --display: "atrament-web", "Avenir Next", "Segoe UI", Roboto, sans-serif;
  --sans:    "quasimoda", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --script:  "fairwater-script", "Snell Roundhand", "Brush Script MT", cursive;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.015em; }
/* atrament-web ships at weight 400 only. Asking for 700 makes the browser
   smear a synthetic bold over it, so we ask for 400 and let the size carry it. */
h1 { font-family: var(--display); font-size: clamp(2.05rem, 5.6vw, 3.25rem); font-weight: 400; }
h2 { font-family: var(--display); font-size: clamp(1.58rem, 3.7vw, 2.2rem); font-weight: 400; }
h3 { font-size: 1.09rem; font-weight: 700; letter-spacing: -.005em; }
p  { margin: 0 0 1em; }
a  { color: var(--wine); }

/* Fairwater Script: the face in their own logo tagline. It is a signature,
   not a text face. Reserve it for short emotional beats and never set a
   sentence in it. */
.script {
  font-family: var(--script);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wine);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

/* Skip link: keyboard and screen reader users land on an escape hatch first */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--wine); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- Header ----------
   The sticky lives on the WRAPPER, not on .site-header itself. app.js injects
   the header into <div id="site-header">, and a sticky element can only travel
   inside its containing block: that div is exactly as tall as the header, so
   sticky on the inner element has nowhere to go and scrolls straight off. It
   looks like sticky "silently doesn't work". Keep it on the wrapper. */
#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  box-shadow: 0 1px 0 rgba(36,31,38,.04), 0 6px 18px rgba(36,31,38,.05);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* A sticky header hides whatever an in-page link jumps to. Every anchor target
   needs to stop clear of it, or "See open positions" lands with the heading
   tucked underneath the bar.

   70px is measured, not assumed: the height is set by the CTA button, not the
   logo, so it stays ~68-70px at every breakpoint. Re-measure if the header
   padding or the button size changes. */
:root { --header-h: 70px; }

#main, #openings, #why, #who-we-are {
  scroll-margin-top: calc(var(--header-h) + 14px);
}

/* The supplied logo is full-color on white, so the header is white rather
   than the charcoal bar. Dropping it on dark would mean recoloring their
   mark, which isn't ours to do. */
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; min-width: 0; }
.brand__logo { display: block; width: auto; height: 40px; flex: 0 0 auto; }
.brand__tag {
  font-size: .74rem; color: var(--muted); letter-spacing: .04em;
  white-space: nowrap; padding-left: 10px; border-left: 1px solid var(--line);
}
@media (max-width: 560px) {
  .brand__logo { height: 33px; }
  .brand__tag { display: none; }
}

.header-cta {
  color: var(--wine); text-decoration: none; font-weight: 700; font-size: .93rem;
  border: 1.5px solid #E4CDD1; padding: 8px 16px; border-radius: 100px;
  white-space: nowrap; transition: background .15s ease, border-color .15s ease;
}
.header-cta:hover { background: var(--wine-tint); border-color: var(--wine); }

/* ---------- Hero ----------
   Full-bleed photo behind the copy. The photo is bright and busy, so the
   text can never sit on it unaided: the scrim below is what makes it legible,
   not decoration. Subject (the two faces) sits right-of-centre, so the image
   is anchored right and the scrim is heaviest on the left where the copy is. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--plum);
  padding: 56px 0 52px;
  min-height: 460px;
  display: flex;
  align-items: center;
}
@media (min-width: 780px) { .hero { padding: 92px 0 88px; min-height: 560px; } }

.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 38%;
}
/* Stop positions are measured, not eyeballed. The copy column ends at ~58%
   of the hero and the lamp behind it is the brightest thing in the frame, so
   the scrim stays weighted to 58% and opens up after 74%, where the two faces
   are.

   Measured worst-case contrast at these values: 7.6:1 on the h1, 6.0:1 on the
   subhead. WCAG AA needs 3.0 and 4.5 respectively, so there is roughly one
   more lightening step of headroom and no more. For reference, a version with
   the left at .62 measured 4.3:1 on the subhead, which FAILS. Re-measure if
   you touch these, and don't trust your monitor: the failure looks like
   "slightly washed out", not like something broken. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(28,23,30,.78) 0%,
      rgba(28,23,30,.75) 34%,
      rgba(28,23,30,.68) 58%,
      rgba(28,23,30,.38) 74%,
      rgba(28,23,30,.12) 100%);
}
.hero .wrap { position: relative; width: 100%; }
.hero__copy { max-width: 40rem; }

/* On phones the subject would be cropped out of a side-weighted crop, so
   swap to a top-down scrim and let the faces sit under the lower copy.
   This one has to stay heavier than the desktop gradient: here the copy runs
   the full width and sits directly over the faces, so there is no quiet
   corner to hide the text in. Measured: 9.8:1 h1, 8.1:1 subhead. */
@media (max-width: 780px) {
  .hero__bg { object-position: 68% 32%; }
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(31,26,33,.84) 0%,
        rgba(31,26,33,.80) 45%,
        rgba(31,26,33,.74) 100%);
  }
}

/* Light-on-dark type for the hero only. */
.hero h1 { color: #fff; }

/* Two-part headline: script clause, then the display face. This mirrors the
   logo itself (wordmark + script tagline) rather than decorating for its own
   sake.

   Fairwater runs far wider per character than atrament, so it needs its own
   measure. The h1's 17ch cap is tuned for the condensed face and would fold
   the script into a three-line tower. */
/* Each clause gets its own measure. A single max-width on the h1 can't serve
   both: `ch` resolves against the h1's font (atrament), and Fairwater is far
   wider per character, so one value either towers the script or orphans the
   last word of the display line. text-wrap:balance evens the rag where the
   browser supports it. */
.hero h1 { max-width: none; }

.hero__script {
  display: block;
  font-family: var(--script);
  font-weight: 700;
  color: #fff;
  font-size: clamp(1.85rem, 4.3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: 0;
  margin-bottom: .12em;
  padding-right: .1em;    /* script swashes overhang the glyph box */
  max-width: 11em;        /* em, so it scales with the script's own size */
  text-wrap: balance;
}
.hero__line2 {
  display: block;
  max-width: 13ch;        /* ch is correct here: this line IS atrament */
  text-wrap: balance;
}
@media (max-width: 899px) {
  .hero__script { max-width: 10em; }
  .hero__line2  { max-width: 15ch; }
}
.hero .hero__sub { color: #F1ECF2; max-width: 46ch; }
.hero .eyebrow {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--wine); background: #fff;
  border: 1px solid #EBD9DC; border-radius: 100px;
  padding: 6px 14px; margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 3px var(--green-tint);
}

.hero__sub {
  font-size: clamp(1.03rem, 2vw, 1.19rem);
  color: var(--body);
  max-width: 54ch;
  margin-bottom: 26px;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Generic inline photo */
.photo { margin: 0; }
.photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.photo figcaption { font-size: .8rem; color: var(--muted); margin-top: 9px; }

/* Job-page photos come from jobs.js in mixed aspect ratios and are lazy-loaded,
   so without a reserved box they collapse to zero height and then snap the page
   open when they arrive. Pin a ratio: space is held from first paint, no shift. */
.prose .photo img {
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  object-position: center 30%;
  background: var(--bg-soft);
}

/* Two-up band: photo + copy */
.band { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) { .band { grid-template-columns: .9fr 1.1fr; gap: 44px; } }
.band--flip .photo { order: 2; }
@media (max-width: 859px) { .band--flip .photo { order: 0; } }

/* The team shot is portrait; uncapped it towers over the copy beside it.
   Crop to a calmer height, biased upward so faces stay in frame. */
.band .photo img {
  max-height: 430px;
  object-fit: cover;
  object-position: center 32%;
}
@media (max-width: 859px) { .band .photo img { max-height: 340px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: 1.02rem; font-weight: 700;
  padding: 15px 28px; border-radius: 100px;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .12s ease, box-shadow .18s ease, background .15s ease;
}
.btn--primary { background: var(--wine); color: #fff; box-shadow: 0 4px 14px rgba(135,47,57,.28); }
.btn--primary:hover { background: var(--wine-dark); transform: translateY(-1px); box-shadow: 0 7px 20px rgba(135,47,57,.34); }
/* Outline button for light backgrounds */
.btn--outline { background: #fff; color: var(--wine); border-color: #E4CDD1; }
.btn--outline:hover { background: var(--wine-tint); border-color: var(--wine); transform: translateY(-1px); }

/* Secondary button sitting on the hero photo */
.btn--ondark {
  background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn--ondark:hover { background: rgba(255,255,255,.20); border-color: #fff; transform: translateY(-1px); }
.btn--block { width: 100%; }
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid var(--wine); outline-offset: 2px;
}

/* ---------- Trust bar ---------- */
.trust { background: var(--plum); color: #fff; padding: 26px 0; }
.trust__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px;
  text-align: center;
}
@media (min-width: 760px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }
.trust__num {
  font-family: var(--display); font-size: 1.6rem; font-weight: 400; color: #fff;
  line-height: 1.1; display: block;
}
.trust__lbl { font-size: .79rem; color: #C4BCC8; line-height: 1.4; margin-top: 5px; display: block; }

/* ---------- Sections ---------- */
.section { padding: 52px 0; }
.section--soft { background: var(--bg-soft); border-block: 1px solid var(--line); }
.section__head { max-width: 60ch; margin-bottom: 30px; }
.section__head p { color: var(--muted); margin-bottom: 0; }

/* Script kicker above a section heading. This is the pattern that carries
   Fairwater through the page instead of leaving it stranded at the bottom.
   Keep the line short: it sits above an atrament heading and the two faces
   have to read as a pair, not compete. */
.kicker { margin: 0 0 2px; line-height: 1; }
.kicker .script { font-size: clamp(1.45rem, 3vw, 1.9rem); display: inline-block; }
.section__head .kicker { color: var(--wine); }

/* ---------- Location filter ---------- */
.filter {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px;
  border-bottom: 1px solid var(--line); padding-bottom: 18px;
}
.filter__btn {
  font-family: var(--sans); font-size: .93rem; font-weight: 600;
  background: #fff; color: var(--body);
  border: 1.5px solid var(--line); border-radius: 100px;
  padding: 9px 17px; cursor: pointer;
  transition: all .14s ease;
}
.filter__btn:hover { border-color: var(--muted); }
.filter__btn[aria-pressed="true"] {
  background: var(--plum); border-color: var(--plum); color: #fff;
}
.filter__btn .count {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 100px; font-size: .78rem; font-weight: 700;
  background: var(--wine-tint); color: var(--wine);
}
.filter__btn[aria-pressed="true"] .count { background: rgba(255,255,255,.2); color: #fff; }

/* ---------- Location group ---------- */
.loc-group { margin-bottom: 40px; }
.loc-group__head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 6px;
}
.loc-group__name { font-family: var(--display); font-size: 1.42rem; font-weight: 400; color: var(--ink); }
.loc-group__blurb { color: var(--muted); font-size: .92rem; max-width: 62ch; margin-bottom: 18px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 700; letter-spacing: .03em;
  padding: 4px 11px; border-radius: 100px; white-space: nowrap;
}
.badge--open { background: var(--green-tint); color: var(--green); }
.badge--open::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}
.badge--none { background: #F1EFF1; color: var(--muted); }

/* ---------- Job cards ---------- */
.jobs { display: grid; gap: 14px; }
@media (min-width: 860px) { .jobs { grid-template-columns: 1fr 1fr; } }

.job-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; text-decoration: none;
  transition: border-color .16s ease, box-shadow .18s ease, transform .16s ease;
}
.job-card:hover { border-color: #D7CDD3; box-shadow: var(--shadow); transform: translateY(-2px); }
.job-card--featured { border-color: #E4CDD1; background: linear-gradient(180deg, #FEFAFA 0%, #fff 46%); }

.job-card__flag {
  position: absolute; top: -9px; left: 20px;
  background: var(--wine); color: #fff;
  font-size: .67rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 100px;
}
.job-card__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.job-card__title { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; letter-spacing: -.01em; }
.job-card__loc { font-size: .87rem; color: var(--muted); margin: 0; }
.job-card__pay {
  font-family: var(--display); font-size: 1.16rem; font-weight: 400; color: var(--wine);
  white-space: nowrap; text-align: right; line-height: 1.25;
}
.job-card__pay small { display: block; font-family: var(--sans); font-size: .68rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }

.job-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 16px; }
.chip {
  font-size: .77rem; font-weight: 600; color: var(--body);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 100px; padding: 4px 10px;
}
.job-card__foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.job-card__link { font-size: .93rem; font-weight: 700; color: var(--wine); display: inline-flex; align-items: center; gap: 6px; }
.job-card:hover .job-card__link .arw { transform: translateX(3px); }
.arw { transition: transform .16s ease; }

/* ---------- Empty state ---------- */
.empty {
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  padding: 26px; text-align: center; background: var(--bg-soft);
}
.empty p { margin: 0 0 4px; font-weight: 600; color: var(--body); }
.empty small { color: var(--muted); }

/* ---------- Why / benefit grid ---------- */
.why-grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
}
.why__ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--wine-tint); color: var(--wine);
  display: grid; place-items: center; margin-bottom: 13px;
}
.why h3 { margin-bottom: 5px; }
.why p { font-size: .93rem; color: var(--muted); margin: 0; }

/* ---------- Pull quote ---------- */
.quote {
  border-left: 3px solid var(--wine);
  padding: 4px 0 4px 22px;
  margin: 0 0 26px;
}
.quote p {
  font-family: var(--display); font-size: clamp(1.15rem, 2.4vw, 1.42rem);
  font-style: italic; color: var(--ink); line-height: 1.45; margin: 0;
}
.quote cite { display: block; margin-top: 9px; font-size: .84rem; font-style: normal; color: var(--muted); }

/* ---------- Job detail ---------- */
.crumb { font-size: .88rem; color: var(--muted); margin-bottom: 16px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--wine); text-decoration: underline; }

.detail { display: grid; gap: 34px; align-items: start; }
@media (min-width: 900px) { .detail { grid-template-columns: minmax(0,1fr) 330px; gap: 44px; } }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 30px; }
@media (min-width: 620px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: #fff; padding: 15px 16px; }
.fact__lbl { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px; }
.fact__val { font-size: .96rem; font-weight: 700; color: var(--ink); line-height: 1.3; }

.prose h2 { font-size: 1.4rem; margin-top: 34px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: none; padding: 0; margin: 0 0 8px; }
.prose li { position: relative; padding-left: 27px; margin-bottom: 10px; }
.prose li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wine); opacity: .75;
}
.prose li.tick::before {
  content: "✓"; background: none; width: auto; height: auto;
  top: 0; left: 0; color: var(--green); font-weight: 700; opacity: 1;
}
.prose__script { margin: 18px 0 0; line-height: 1; }
.prose__script .script { font-size: clamp(1.5rem, 3vw, 1.95rem); }

/* ---------- Sticky apply rail ----------
   Offset by the header, otherwise this parks underneath the sticky bar. */
.rail { position: sticky; top: calc(var(--header-h) + 22px); }
.rail__card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px;
}
.rail__pay { font-family: var(--display); font-size: 1.85rem; font-weight: 400; color: var(--wine); line-height: 1.1; }
.rail__paysub { font-size: .84rem; color: var(--muted); margin: 4px 0 18px; }
.rail__list { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--line); padding-top: 16px; }
.rail__list li { font-size: .88rem; color: var(--body); padding-left: 22px; position: relative; margin-bottom: 8px; }
.rail__list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.rail__note { font-size: .78rem; color: var(--muted); text-align: center; margin: 12px 0 0; }

/* ---------- Mobile sticky bar ---------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  transform: translateY(110%); transition: transform .26s ease;
}
.stickybar.show { transform: translateY(0); }
.stickybar__pay { flex: 1; min-width: 0; }
.stickybar__pay strong { display: block; font-family: var(--display); font-size: 1.06rem; color: var(--wine); line-height: 1.2; }
.stickybar__pay small { font-size: .73rem; color: var(--muted); }
.stickybar .btn { padding: 13px 22px; font-size: .96rem; }
@media (min-width: 900px) { .stickybar { display: none; } }
body.has-stickybar { padding-bottom: 82px; }
@media (min-width: 900px) { body.has-stickybar { padding-bottom: 0; } }

/* ---------- Numbered steps ---------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 4px; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 16px 0 16px 62px;
  border-bottom: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 14px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--wine); color: #fff;
  font-family: var(--display); font-size: 1.14rem; font-weight: 400;
  line-height: 1;
}
.steps strong { display: block; color: var(--ink); font-size: 1.04rem; margin-bottom: 2px; }
.steps span { color: var(--muted); font-size: .95rem; }

.steps__cta {
  margin-top: 26px; padding-left: 62px;   /* line up under the step text, not the numbers */
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.steps__cta small { color: var(--muted); font-size: .85rem; }
@media (max-width: 560px) { .steps__cta { padding-left: 0; } }

/* ---------- Who we are ---------- */
.who__lede {
  font-size: clamp(1.08rem, 2.1vw, 1.28rem);
  color: var(--body); max-width: 62ch;
}
.who__facts { margin: 28px 0 34px; }

.who__care {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px;
}
.who__care h3 { margin-bottom: 8px; }
.who__care > p { max-width: 68ch; color: var(--body); }
.who__script {
  margin: 22px 0 2px;
  line-height: 1;
}
.who__script .script { font-size: clamp(1.7rem, 3.6vw, 2.35rem); }
.who__scriptsub {
  margin: 0; color: var(--muted); font-size: .93rem; max-width: 56ch;
}

.owners {
  display: grid; gap: 18px; margin-top: 32px;
}
@media (min-width: 760px) { .owners { grid-template-columns: 1fr 1fr; gap: 20px; } }
.owner {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
}
/* These are all <p>, so a bare `.owner p` rule would out-specify the name and
   role classes and flatten them to one size. Scope the body copy to its own
   class instead of leaning on the element selector. */
.owner__name {
  font-family: var(--display); font-size: 1.55rem; font-weight: 400;
  color: var(--ink); margin: 0; line-height: 1.15;
}
.owner__role {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wine); margin: 4px 0 12px;
}
.owner__bio { font-size: .95rem; color: var(--body); margin: 0; }

.promise {
  margin-top: 34px; padding: 28px 30px;
  background: var(--wine); color: #fff; border-radius: var(--radius);
}
.promise__script {
  font-family: var(--script); font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  color: #fff; line-height: 1.05; margin: 0 0 10px; display: block;
}
.promise p { margin: 0; color: #F2E4E6; max-width: 62ch; font-size: .98rem; }

.close__script { margin: 0 0 6px; line-height: 1; }
.close__script .script { font-size: clamp(1.8rem, 4vw, 2.5rem); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 17px 34px 17px 0; position: relative;
  font-weight: 700; color: var(--ink); list-style: none; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--wine); line-height: 1;
}
.faq details[open] summary::after { content: "-"; }
.faq details p { padding: 0 0 17px; margin: 0; color: var(--body); font-size: .96rem; max-width: 66ch; }

/* ---------- Filled / closed notice ---------- */
.notice {
  background: #FFF9E9; border: 1px solid #EBDDB4; border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 30px; display: flex; gap: 13px; align-items: flex-start;
}
.notice__ico { flex: 0 0 auto; color: var(--gold); margin-top: 1px; }
.notice p { margin: 0; font-size: .95rem; color: #6B5824; }
.notice strong { color: #4E3F16; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: #B9B2B6; padding: 40px 0 34px; font-size: .89rem; }
.site-footer a { color: #fff; }
.footer__grid { display: grid; gap: 26px; margin-bottom: 26px; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 { color: #fff; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 11px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 7px; }
.footer__legal { border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; font-size: .79rem; color: #918A8E; }
.footer__legal p { margin: 0 0 6px; }
.footer__policies {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; padding: 0; list-style: none;
}
.footer__policies a { color: #D8D2D6; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); }
.footer__policies a:hover { color: #fff; border-bottom-color: #fff; }

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