/* ==========================================================================
   Mom's Heating & Cooling — AC Repair Vancouver
   Static CSS. Mobile-first: base styles are the 390px design.
   Brand palette extracted from momsheatingandcooling.com (2026-08-30).
   ========================================================================== */

:root{
  /* Brand — from the client's live site */
  --navy:        #1B4765;
  --navy-deep:   #0B2334;
  --navy-mid:    #143A55;
  --orange:      #F58735;
  --orange-dk:   #9C4E0C;      /* text-on-light only: 5.94:1 on white, 5.30:1 on #FDF0E4 */
  --coral:       #EB6046;

  /* Ink & surfaces */
  --ink:         #16232E;
  --ink-soft:    #4A5A67;
  --line:        #DCE3E9;
  --surface:     #FFFFFF;
  --surface-alt: #F4F7F9;
  --surface-warm:#FBF7F2;

  /* Action colours — ONE colour per action, site-wide.
     Call is the PRIMARY action on this page (call-first strategy). */
  --cta-call:      var(--orange);
  --cta-call-hov:  #FF9748;
  --cta-call-ink:  #24160A;      /* 8.4:1 on --orange */
  --cta-form:      var(--navy);
  --cta-form-hov:  #24587C;
  --cta-form-ink:  #FFFFFF;      /* 9.8:1 on --navy */

  /* Stars need TWO tokens — one for light surfaces, one for dark bands. */
  --star:         #C77800;       /* 3.46:1 on white  (non-text floor is 3:1) */
  --star-on-dark: #FFC24D;       /* 6.1:1 on --navy */

  --radius:   14px;
  --radius-s: 10px;
  --shadow:   0 4px 16px rgba(11,35,52,.08), 0 12px 32px rgba(11,35,52,.10);
  --shadow-lg:0 8px 24px rgba(11,35,52,.14), 0 24px 60px rgba(11,35,52,.18);

  --container: 1160px;
  --header-h:  62px;

  --focus:    #7FC4F0;           /* 3.4:1 on --navy, 2.1:1 on white — non-text ring */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* ---- Browser surfaces ----------------------------------------------------
   The parts we did not draw still carry the design. Selection, caret, form
   control accent and scrollbar all ship with browser defaults that belong to
   no design system. Theming them from the palette costs nothing at runtime
   and is the difference between a page that was assembled and one that was
   built. Zero layout impact, so CLS is unaffected. */

::selection{ background:var(--navy); color:#fff; text-shadow:none; }

input, textarea, select{ caret-color:var(--navy); }

/* The symptom tiles are radios; without this they render in the OS blue,
   which is the one colour on the page that belongs to nobody. */
input[type="radio"], input[type="checkbox"], progress{ accent-color:var(--orange); }

/* A global focus ring so controls we did not style individually still show
   one. Individual overrides later in the file keep their own offsets. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:3px solid var(--focus); outline-offset:3px;
}

@supports (scrollbar-color: auto){
  html{ scrollbar-color:#9FB2C0 var(--surface-alt); }
}
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width:12px; height:12px; }
  ::-webkit-scrollbar-track{ background:var(--surface-alt); }
  ::-webkit-scrollbar-thumb{
    background:#9FB2C0; border-radius:999px;
    border:3px solid var(--surface-alt);
  }
  ::-webkit-scrollbar-thumb:hover{ background:#7E93A3; }
}

*,*::before,*::after{ box-sizing:border-box; }

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

/* Sticky header offset for every anchored section. */
[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--surface);
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.15; letter-spacing:-.015em; font-weight:800; }
h1{ font-size:clamp(1.85rem, 6.2vw, 3.2rem); }
h2{ font-size:clamp(1.5rem, 4.4vw, 2.35rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1em; }
a{ color:var(--navy); }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Scroll reveal — only hides when JS is confirmed present. No-JS safe. */
.js .reveal{ opacity:0; transform:translateY(18px); }
.js .reveal.is-in{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================ BUTTONS ============================ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:14px 24px;
  border:0; border-radius:var(--radius-s);
  font-size:1.06rem; font-weight:800; font-family:inherit;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:3px solid #7FC4F0; outline-offset:3px; }

.btn-call{ background:var(--cta-call); color:var(--cta-call-ink); box-shadow:0 4px 14px rgba(245,135,53,.34); }
.btn-call:hover{ background:var(--cta-call-hov); }

.btn-form{ background:var(--cta-form); color:var(--cta-form-ink); }
.btn-form:hover{ background:var(--cta-form-hov); }

.btn-ghost{
  background:transparent; color:#fff;
  border:2px solid rgba(255,255,255,.55);
}
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

.btn-block{ width:100%; }
.btn svg{ flex:none; }

/* ============================ HEADER ============================ */

.site-header{
  position:sticky; top:0; z-index:60;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 10px rgba(11,35,52,.06);
}
.header-inner{
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand img{ width:118px; height:56px; }

.nav-desktop{ display:none; }

/* Header call pill — must never read as a footnote (contrast gate 4.5:1).
   Present on EVERY breakpoint. Top-right of a mobile header is the position
   users reach for to call, so it carries the real tel: link there; the earlier
   build put a non-tappable location badge in that slot and people tapped it. */
.header-call{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--cta-call); color:var(--cta-call-ink);
  padding:9px 14px; border-radius:999px;
  font-weight:800; font-size:.95rem; text-decoration:none; white-space:nowrap;
  box-shadow:0 3px 12px rgba(245,135,53,.30);
  min-height:44px; box-sizing:border-box;
}
.header-call:hover{ background:var(--cta-call-hov); }

/* Desktop-only, revealed once the hero form leaves the viewport. */
.header-form-cta{
  display:none; align-items:center;
  background:var(--cta-form); color:#fff;
  padding:11px 18px; border-radius:999px;
  font-weight:800; font-size:.98rem; text-decoration:none; white-space:nowrap;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.header-form-cta.is-shown{ opacity:1; visibility:visible; }
.header-form-cta:hover{ background:var(--cta-form-hov); }

/* Retired 2026-09-01. The mobile header slot now carries the real call link
   instead of a location badge. The "Metro Vancouver" geo signal still appears
   in the hero eyebrow and the trust bar, both above the fold. */
.header-mini-note{ display:none; }

/* ============================ HERO ============================ */

.hero{ position:relative; isolation:isolate; background:var(--navy-deep); color:#fff; overflow:hidden; }
/* Mobile: the photo is a band sized to the copy, bled full-width past the
   container padding. Desktop overrides this to a full-bleed hero band. */
.hero-copy{ position:relative; isolation:isolate; }
.hero-bg{ position:absolute; inset:-20px -20px -18px -20px; z-index:-1; overflow:hidden; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:52% 42%; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  /* Weighted to the top, where the copy sits — the lower third of the photo
     (technician + homeowner) stays clearly visible. */
  background:linear-gradient(180deg,
    rgba(11,35,52,.95) 0%,
    rgba(11,35,52,.90) 38%,
    rgba(11,35,52,.62) 68%,
    rgba(11,35,52,.42) 100%);
}
.hero-inner{ padding-block:20px 24px; }

.eyebrow{
  display:inline-block; margin:0 0 12px;
  font-size:.78rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  /* Default is the LIGHT-surface colour. A pale default was invisible on white
     wherever an eyebrow sat outside .sec-head (measured 1.25:1 and 1.34:1). */
  color:var(--orange-dk);
}
/* Dark surfaces opt in, so a new eyebrow anywhere is readable by default. */
.hero .eyebrow,
.sec-dark .eyebrow,
.finalcta .eyebrow{ color:#FFD8B0; }
.hero h1{ margin:0 0 12px; color:#fff; text-wrap:balance; }
.hero-sub{
  margin:0 0 16px; font-size:1.05rem; line-height:1.5;
  color:#E4EDF3; max-width:34ch;
}
.hero-sub strong{ color:#fff; }

.hero-actions{ display:flex; flex-direction:column; gap:10px; margin:18px 0 0; }
.hero-today{
  margin:10px 0 0; font-size:.94rem; font-weight:600; color:#CFE0EB;
}
.hero-deskphone{ display:none; }

/* ---- Google review proof: Variant B (inline). Chosen because the hero is a
   dark photographic band with its own type system; a white card would read as
   a bolted-on third-party widget. Same variant in all three placements. ---- */
.ginline{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:.95rem; font-weight:700; line-height:1.3;
}
.ginline .g-score{ font-weight:800; }
.ginline .g-count{ font-weight:600; opacity:.92; }
.ginline svg{ flex:none; }
.stars{ letter-spacing:1px; color:var(--star); }
.on-dark .stars, .hero .stars{ color:var(--star-on-dark); }
.hero .ginline{ color:#EAF2F7; }

/* ============================ FORM CARD ============================ */

.formcard{
  background:#fff; color:var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:16px 18px 18px;
  margin-top:12px;
}
.formcard h2{ font-size:1.3rem; margin:0 0 6px; }
.formcard .form-intro{ font-size:.95rem; color:var(--ink-soft); margin:0 0 16px; }

.field{ margin:0 0 11px; }
.field label{ display:block; font-weight:700; font-size:.94rem; margin:0 0 6px; }
.field .opt{ font-weight:500; color:var(--ink-soft); }
.field input, .field textarea{
  width:100%; padding:13px 14px;
  font:inherit; font-size:1rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-s);
  min-height:50px;
}
.field textarea{ min-height:74px; resize:vertical; }
.field input:focus, .field textarea:focus{
  outline:0; border-color:var(--navy); box-shadow:0 0 0 3px rgba(27,71,101,.16);
}
.field input:user-invalid{ border-color:var(--coral); }

/* Symptom tiles — one tap, includes "Not sure" so nobody is blocked. */
fieldset.symptoms{ border:0; padding:0; margin:0 0 15px; }
fieldset.symptoms legend{ font-weight:700; font-size:.94rem; padding:0; margin:0 0 8px; }
.tiles-note{ margin:9px 0 0; font-size:.83rem; color:var(--ink-soft); }
.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
/* 6 tiles divide evenly into both the 2-column phone grid and the 3-column
   desktop grid, so there is no orphan to span. */
.tile{ position:relative; display:flex; }
.tile input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; margin:0; cursor:pointer;
}
.tile span{
  display:flex; align-items:center; width:100%; min-height:58px;
  padding:11px 14px;
  border:1.5px solid var(--line); border-radius:var(--radius-s);
  font-size:.95rem; font-weight:600; line-height:1.25;
  background:#fff; transition:border-color .15s ease, background-color .15s ease;
}
/* A pale tint measured only 1.08:1 against an unselected tile — effectively
   invisible as a fill. A solid brand-orange fill makes the choice unmistakable
   at a glance. This is a selection STATE, not a CTA, so it does not conflict
   with the one-colour-per-action rule (Call = orange, form buttons = navy). */
.tile input:checked + span,
.tile.is-picked span{
  border-color:#C4671F; background:var(--orange); color:var(--cta-call-ink);
  box-shadow:inset 0 0 0 1px #C4671F;
  font-weight:800;
}
.tile input:focus-visible + span{ outline:3px solid var(--orange); outline-offset:2px; }
.tile:hover span{ border-color:#A9BCC9; }

/* Trust cue INSIDE the form — lifts completion. */
.form-trust{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  background:var(--surface-alt); border-radius:var(--radius-s);
  padding:9px 12px; margin:2px 0 13px;
  font-size:.88rem; font-weight:600; color:var(--ink);
}
/* On step 2 the trust row follows the "What happens next" panel. Two fills of
   the same colour stacked read as a single broken box, so here it drops the
   panel and becomes a rule-separated line instead. */
[data-step="2"] .form-trust{
  background:none; border-radius:0;
  border-top:1px solid var(--line);
  padding:13px 2px 0; margin:16px 0 0;
}
.form-note{ font-size:.83rem; color:var(--ink-soft); margin:10px 0 0; line-height:1.45; }
.form-note a{ color:var(--navy); }

.form-or{
  display:flex; align-items:center; gap:12px;
  margin:16px 0 0; color:var(--ink-soft); font-size:.88rem; font-weight:600;
}
.form-or::before,.form-or::after{ content:""; flex:1; height:1px; background:var(--line); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ============================ SECTIONS ============================ */

section{ padding:52px 0; }
.sec-alt{ background:var(--surface-alt); }
.sec-warm{ background:var(--surface-warm); }
.sec-dark{ background:var(--navy); color:#fff; }
.sec-dark h2, .sec-dark h3{ color:#fff; }
.sec-dark p{ color:#DCE8EF; }

.sec-head{ max-width:62ch; margin:0 0 28px; }
.sec-head p{ font-size:1.05rem; color:var(--ink-soft); margin:0; }
.sec-dark .sec-head p{ color:#DCE8EF; }

/* ---- Trust bar ---- */
.trustbar{ background:var(--navy-deep); color:#fff; padding:0; }
.trustbar ul{
  list-style:none; margin:0; padding:16px 0;
  display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;
}
.trustbar li{
  display:flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:700; line-height:1.25; color:#EAF2F7;
}
.trustbar svg{ flex:none; }

/* ---- Symptom cards ---- */
.symptom-grid{ display:grid; gap:14px; }
.symptom{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 16px; box-shadow:var(--shadow);
}
.symptom h3{ margin:0 0 6px; font-size:1.05rem; color:var(--navy); }
.symptom p{ margin:0; font-size:.95rem; color:var(--ink-soft); }
.symptom .sym-tag{
  display:inline-block; margin:0 0 10px;
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--orange-dk); background:#FDF0E4; padding:4px 9px; border-radius:999px;
}

/* ---- Steps ---- */
.steps{ display:grid; gap:16px; counter-reset:step; }
.step{
  position:relative; background:#fff; border-radius:var(--radius);
  padding:20px 18px 18px 18px; border:1px solid var(--line); box-shadow:var(--shadow);
}
.step::before{
  counter-increment:step; content:counter(step);
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin:0 0 12px;
  border-radius:50%; background:var(--navy); color:#fff;
  font-weight:800; font-size:1.05rem;
}
.step h3{ margin:0 0 6px; font-size:1.05rem; }
.step p{ margin:0; font-size:.95rem; color:var(--ink-soft); }

/* ---- Why-no-prices callout ---- */
/* A thick coloured bar down one side of a rounded card is the most
   recognizable tell in generated UI, and it fights the corner radius it sits
   inside. The accent survives as a hairline on all four sides, which reads as
   a deliberate note rather than a tab. */
.callout{
  background:#fff; border:1px solid rgba(245,135,53,.42);
  border-radius:var(--radius); padding:24px 20px;
  box-shadow:var(--shadow);
}
.callout h2{ font-size:1.4rem; }
.callout p:last-of-type{ margin-bottom:0; }

/* ---- Benefit cards ---- */
.benefits{ display:grid; gap:14px; }
.benefit{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:20px 18px;
}
.benefit img{ width:46px; height:46px; margin:0 0 12px; }
.benefit h3{ font-size:1.05rem; margin:0 0 6px; }
.benefit p{ margin:0; font-size:.94rem; }

/* ---- Reviews ---- */
.gsummary{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 22px; padding:14px 16px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-s);
  box-shadow:var(--shadow);
}
.reviews{ display:grid; gap:14px; }
.review{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 18px; box-shadow:var(--shadow);
}
.review .stars{ font-size:1rem; margin:0 0 8px; display:block; }
.review blockquote{ margin:0 0 12px; font-size:.98rem; line-height:1.6; color:var(--ink); }
.review cite{ font-style:normal; font-weight:800; font-size:.92rem; color:var(--navy); }
.review .rv-src{ display:block; font-size:.8rem; color:var(--ink-soft); font-weight:600; margin-top:2px; }

/* ---- Repair or replace ---- */
.rr{ display:grid; gap:14px; }
.rr-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 18px; box-shadow:var(--shadow);
}
.rr-card h3{ margin:0 0 10px; font-size:1.05rem; }
.rr-card ul{ margin:0; padding-left:1.15em; }
.rr-card li{ margin:0 0 7px; font-size:.95rem; color:var(--ink-soft); }
/* These two cards are contrasting advice, so the colour is carrying meaning
   and stays. It moves off the 4px top tab (which fought the corner radius)
   and into the full hairline border plus the heading, where it reads as
   encoding rather than as trim. */
.rr-card.is-repair{ border-color:var(--navy); }
.rr-card.is-repair h3{ color:var(--navy); }
.rr-card.is-replace{ border-color:var(--orange-dk); }
.rr-card.is-replace h3{ color:var(--orange-dk); }

/* ---- Owner ---- */
.owner{ display:grid; gap:20px; align-items:center; }
.owner-photo{
  background:linear-gradient(160deg,#22587C 0%, var(--navy) 60%, var(--navy-deep) 100%);
  border-radius:var(--radius); padding:16px 16px 0; text-align:center;
}
.owner-photo img{ width:min(260px,72%); height:auto; margin-inline:auto; }
.owner blockquote{
  margin:0 0 14px; font-size:1.12rem; line-height:1.5; font-weight:600;
  color:var(--ink); border-left:4px solid var(--orange); padding-left:16px;
}

/* ---- Service area ---- */
.areas{
  display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;
}
.areas li{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; font-size:.9rem; font-weight:700; color:var(--navy);
}
.areas li.is-primary{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ---- FAQ ---- */
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-s);
  margin:0 0 10px; box-shadow:0 1px 3px rgba(11,35,52,.05);
}
.faq summary{
  cursor:pointer; list-style:none; padding:16px 46px 16px 18px;
  font-weight:700; font-size:1rem; position:relative; min-height:54px;
  display:flex; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:18px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2.5px solid var(--navy); border-bottom:2.5px solid var(--navy);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq summary:focus-visible{ outline:3px solid #7FC4F0; outline-offset:-3px; }
.faq .faq-body{ padding:0 18px 16px; }
.faq .faq-body p{ margin:0 0 .7em; font-size:.97rem; color:var(--ink-soft); }
.faq .faq-body p:last-child{ margin-bottom:0; }

/* ---- Final CTA ---- */
.finalcta{ position:relative; isolation:isolate; background:var(--navy-deep); color:#fff; overflow:hidden; }
.finalcta .fc-bg{ position:absolute; inset:0; z-index:-2; }
.finalcta .fc-bg img{ width:100%; height:100%; object-fit:cover; object-position:60% 40%; }
.finalcta .fc-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,35,52,.93) 0%, rgba(11,35,52,.88) 100%);
}
.finalcta h2{ color:#fff; }
.finalcta p{ color:#DCE8EF; max-width:52ch; }
.finalcta .hero-actions{ max-width:420px; }

/* ---- Footer ---- */
.site-footer{ background:var(--navy-deep); color:#C6D6E1; padding:40px 0 108px; font-size:.92rem; }
.site-footer img.f-logo{ width:170px; height:80px; margin:0 0 16px; }
.site-footer h3{ font-size:.98rem; color:#fff; margin:0 0 10px; }
.footer-grid{ display:grid; gap:26px; }
.site-footer a{ color:#EAF2F7; }
.site-footer address{ font-style:normal; line-height:1.7; }
.footer-legal{
  margin:28px 0 0; padding:18px 0 0; border-top:1px solid rgba(255,255,255,.14);
  font-size:.84rem; line-height:1.6;
}
.footer-links{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; }
.footer-links a{ font-weight:700; }

.site-footer address a,
.legal address a,
.footer-links a{
  display:inline-flex; align-items:center; min-height:44px;
}
/* Inline links inside body copy: grow the tap area without moving the text. */
.form-note a, .legal p a{
  display:inline-block; padding:13px 2px; margin:-13px 0;
}

/* ---- Draft verification labels (preview only — never ship to production) ---- */
.label-flag{
  display:inline-block; margin:6px 0 0;
  background:#FFF3CD; color:#5A4300; border:1px solid #E0C55A;
  border-radius:5px; padding:3px 8px;
  font-size:.72rem; font-weight:800; letter-spacing:.02em; line-height:1.4;
}
.sec-dark .label-flag, .finalcta .label-flag{ background:#FFF3CD; color:#5A4300; }

/* ---- Sticky mobile action bar (mobile only — desktop uses the header) ---- */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:1.25fr 1fr; gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  box-shadow:0 -3px 16px rgba(11,35,52,.13);
}
.stickybar .btn{ min-height:50px; padding:10px 12px; font-size:.98rem; border-radius:10px; }
.stickybar .btn-form{ font-size:.93rem; }

/* ==========================================================================
   TABLET / DESKTOP — additive only. Components that solve a desktop-only
   problem are introduced here; mobile-only components are switched off here.
   ========================================================================== */

@media (min-width:700px){
  .trustbar ul{ grid-template-columns:repeat(4,1fr); padding:18px 0; }
  .symptom-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .benefits{ grid-template-columns:1fr 1fr; }
  .reviews{ grid-template-columns:1fr 1fr; }
  .reviews article:last-child{ grid-column:1 / -1; }
  .rr{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .hero-actions{ flex-direction:row; flex-wrap:wrap; align-items:center; }
  .hero-actions .btn{ flex:0 1 auto; }
}

@media (min-width:960px){
  :root{ --header-h:76px; }
  body{ font-size:17px; }
  section{ padding:76px 0; }

  .brand img{ width:186px; height:88px; }
  .nav-desktop{
    display:flex; align-items:center; gap:22px; margin-left:auto;
  }
  .nav-desktop a{
    display:inline-flex; align-items:center; min-height:44px;
    color:var(--ink); text-decoration:none; font-weight:700; font-size:.95rem;
    padding:10px 0 8px; border-bottom:2px solid transparent;
  }
  .nav-desktop a:hover{ color:var(--navy); border-bottom-color:var(--orange); }
  .header-call{ margin-left:18px; padding:11px 18px; font-size:1rem; gap:8px; }
  .header-form-cta{ display:inline-flex; margin-left:10px; }

  /* The sticky bar is a thumb-reach solution to a phone problem. Desktop has a
     persistent header instead, so the bar is removed rather than reflowed. */
  .stickybar{ display:none; }
  .site-footer{ padding-bottom:44px; }

  /* Hero becomes a full-bleed photographic band with the gradient weighted to
     the LEFT, where the copy sits — the photo stays visible on the right. */
  .hero-bg::after{
    background:linear-gradient(96deg,
      rgba(11,35,52,.97) 0%,
      rgba(11,35,52,.93) 34%,
      rgba(11,35,52,.66) 52%,
      rgba(11,35,52,.34) 70%,
      rgba(11,35,52,.30) 100%);
  }
  .hero-bg img{ object-position:58% 34%; }
  .hero-copy{ position:static; isolation:auto; }
  .hero-bg{ inset:0; z-index:-2; }
  .hero-inner{
    display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:40px;
    align-items:center; padding-block:44px 48px;
  }
  .hero-sub{ font-size:1.15rem; max-width:58ch; }
  .formcard{ margin-top:0; padding:24px 22px 22px; }

  /* The in-hero jump link was removed entirely: on desktop the form is already
     on screen (a no-op), and on mobile the sticky bar already owns that action. */
  /* Same logic for the in-form call button: on desktop the hero call CTA is
     visible on the same screen, so this one is a duplicate action. */
  .form-callpath{ display:none; }

  /* tel: does little on a desktop — the number must be READABLE there. */
  .hero-deskphone{
    display:block; margin:14px 0 0; font-size:1rem; font-weight:600; color:#D9E7F0;
  }
  .hero-deskphone .phone-number{ color:#fff; font-weight:800; }

  .owner{ grid-template-columns:340px 1fr; gap:44px; }
  .steps{ grid-template-columns:repeat(4,1fr); }
  .benefits{ grid-template-columns:repeat(4,1fr); }
  .symptom-grid{ grid-template-columns:repeat(3,1fr); }
  .reviews{ grid-template-columns:repeat(3,1fr); }
  .reviews article:last-child{ grid-column:auto; }
  .callout{ padding:34px 34px; }
  .callout h2{ font-size:1.7rem; }
  .faq{ max-width:850px; }
}

@media (min-width:1200px){
  .hero-inner{ grid-template-columns:minmax(0,1fr) 456px; gap:44px; }
}

/* ---- Partial-fill stars: 4.7 must not render as five solid stars.
        Two tokens, because gold tuned for a dark hero collapses on white
        and gold deep enough for white disappears on navy. ---- */
.stars{ position:relative; display:inline-block; white-space:nowrap; line-height:1; }
.stars-bg{ color:#C9D2D9; }
.sec-dark .stars-bg, .hero .stars-bg, .on-dark .stars-bg, .finalcta .stars-bg{ color:rgba(255,255,255,.34); }
.stars-fg{
  position:absolute; left:0; top:0; overflow:hidden;
  white-space:nowrap; color:var(--star);
}
.hero .stars-fg, .sec-dark .stars-fg, .on-dark .stars-fg, .finalcta .stars-fg{ color:var(--star-on-dark); }

/* ============================ SIMPLE PAGES ============================
   Thank-you, privacy policy and terms. Deliberately low-distraction: no
   anchor nav, no sticky bar, one way back to the conversion path. */
.simple-header{ background:#fff; border-bottom:1px solid var(--line); }
.simple-header .header-inner{ justify-content:space-between; }
.simple-main{ padding:44px 0 60px; }
.simple-main .container{ max-width:760px; }
.legal h2{ font-size:1.25rem; margin-top:1.8em; }
.legal h2:first-of-type{ margin-top:1em; }
.legal p, .legal li{ color:var(--ink-soft); font-size:.98rem; }
.legal ul{ padding-left:1.2em; }
.legal li{ margin-bottom:.5em; }

.ty-badge{
  display:flex; align-items:center; justify-content:center;
  width:74px; height:74px; margin:0 0 20px;
  border-radius:50%; background:#E6F4EC;
}
.ty-next{
  list-style:none; margin:0 0 26px; padding:0;
  counter-reset:tystep;
}
.ty-next li{
  position:relative; padding:0 0 0 46px; margin:0 0 16px;
  font-size:1rem; color:var(--ink);
}
.ty-next li::before{
  counter-increment:tystep; content:counter(tystep);
  position:absolute; left:0; top:-2px;
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--navy); color:#fff; font-weight:800; font-size:.95rem;
}
.ty-call{
  background:var(--surface-alt); border-radius:var(--radius);
  padding:22px 20px; margin:0 0 26px;
}
.ty-call h2{ font-size:1.2rem; margin:0 0 8px; }
.ty-call p{ margin:0 0 14px; color:var(--ink-soft); font-size:.97rem; }

/* ============================ PHOTOGRAPHY ============================
   Four real client photographs, each placed against a specific hesitation
   rather than for decoration. All below the fold and lazy-loaded, so none
   of them touches LCP. */

/* Editorial image/text split — #why-moms */
.editorial{ display:grid; gap:22px; margin:0 0 30px; align-items:center; }
.editorial-media{ margin:0; }
.editorial-media img{
  width:100%; height:auto; border-radius:var(--radius);
  box-shadow:0 10px 34px rgba(0,0,0,.34);
}
.sec-dark .editorial-media img{ border:1px solid rgba(255,255,255,.16); }
.editorial-body h2{ margin-bottom:.35em; }
.editorial-body p{ margin-bottom:.7em; }
.editorial-note{
  font-size:.92rem; font-weight:700; color:#FFD8B0; margin:0;
}

/* "You get a person, not a phone tree" — #how-it-works */
.whoanswers{
  display:grid; gap:18px; align-items:center;
  margin:28px 0 0; padding:20px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.whoanswers img{
  width:132px; height:132px; object-fit:cover; object-position:center;
  border-radius:50%; border:3px solid #fff;
  box-shadow:0 6px 18px rgba(11,35,52,.22);
}
.whoanswers h3{ margin:0 0 6px; font-size:1.1rem; }
.whoanswers p{ margin:0 0 14px; font-size:.96rem; color:var(--ink-soft); }

/* Founder photograph — #owner */
.owner-photo{
  margin:0; background:none; padding:0; text-align:left;
}
.owner-photo img{
  width:100%; height:auto; border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.owner-photo figcaption{
  margin:10px 2px 0; font-size:.88rem; font-weight:600; color:var(--ink-soft);
  line-height:1.45;
}

/* The real van — #service-area */
.vanband{ margin:0 0 24px; }
.vanband img{
  width:100%; height:auto; border-radius:var(--radius);
  box-shadow:var(--shadow);
}

@media (min-width:700px){
  .whoanswers{ grid-template-columns:auto 1fr; gap:22px; padding:22px 24px; }
  .whoanswers img{ width:150px; height:150px; }
}

@media (min-width:960px){
  .editorial{ grid-template-columns:minmax(0,0.92fr) minmax(0,1fr); gap:44px; margin-bottom:40px; }
  .owner{ grid-template-columns:400px 1fr; }
  .whoanswers img{ width:168px; height:168px; }
}

/* ============================ TWO-STEP FORM ============================
   One Netlify form, two steps. The card's height becomes the TALLER step
   rather than the sum, which is what lets it sit level with the hero copy
   on desktop — and a tap-to-start first step converts better than opening
   with a wall of text inputs.

   No-JS: the .js class is absent, .fstep stays display:block, and the whole
   thing renders as one ordinary long form that still submits. */
.fstep{ display:block; padding:0; }   /* <section> — must not inherit the page section padding */
.js .fstep{ display:none; }
.js .fstep.is-active{ display:block; }

/* Step chrome only makes sense once JS is driving the steps. */
.fprogress{ display:none; }
.js .fprogress{
  display:flex; align-items:center; gap:12px;
  margin:0 0 6px; min-height:44px;
}
.fstepno{
  font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
}
.fback{
  display:inline-flex; align-items:center; min-height:44px;
  background:none; border:0; padding:0 4px; margin:0 -4px;
  font:inherit; font-size:.86rem; font-weight:700; color:var(--navy);
  cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.fback:hover{ color:var(--cta-form-hov); }
.fback:focus-visible{ outline:3px solid #7FC4F0; outline-offset:3px; border-radius:4px; }

/* Echo the choice back so step 1 visibly "stuck". */
.fchosen{
  display:flex; align-items:center; gap:7px;
  margin:0 0 11px; padding:7px 11px;
  background:#EAF2F7; border-radius:var(--radius-s);
  font-size:.86rem; font-weight:700; color:var(--navy);
}
.fchosen::before{ content:"✓"; font-weight:800; }

.frow{ display:grid; gap:0; }

/* Slimmer trust row — one line, so it stops eating two. */
.form-trust{ font-size:.83rem; padding:8px 11px; margin:2px 0 12px; }
.form-trust span{ line-height:1.35; }

.formcard .form-intro{ margin-bottom:13px; }
.fstep h2{ font-size:1.28rem; margin:0 0 6px; }

@media (min-width:700px){
  /* Name + phone share a row: one field-height saved, and the pair reads as
     "just your contact details" rather than as two more things to do. */
  .frow{ grid-template-columns:1fr 1fr; gap:12px; }
}

@media (min-width:960px){
  /* The card TRACKS the hero copy column rather than guessing at a height:
     the grid row stretches, the card becomes a flex column, and the steps area
     absorbs the slack. Result — the card is exactly as tall as the hero copy at
     any H1 wrap, and it does not change height when the visitor changes step. */
  .hero-inner{ align-items:stretch; }
  .formcard{ display:flex; flex-direction:column; }
  #leadform{ display:flex; flex-direction:column; flex:1; }
  .fsteps{ flex:1; }
}

/* ============================ CHECKLIST ============================ */
.checklist{ list-style:none; margin:18px 0 0; padding:0; }
.checklist li{
  position:relative; padding:0 0 0 32px; margin:0 0 15px;
  font-size:.98rem; line-height:1.5;
}
.checklist li::before{
  content:""; position:absolute; left:2px; top:4px;
  width:15px; height:9px;
  border-left:2.5px solid var(--orange); border-bottom:2.5px solid var(--orange);
  transform:rotate(-45deg);
}
.checklist li strong{ display:block; }
.sec-dark .checklist li{ color:#DCE8EF; }
.sec-dark .checklist li strong{ color:#fff; }
.checklist-dark li{ color:var(--ink-soft); }
.checklist-dark li strong{ color:var(--ink); }
.checklist-dark li::before{ border-color:var(--orange-dk); }

/* Alternating editorial split — image on the right */
@media (min-width:960px){
  .editorial.rev .editorial-media{ order:2; }
  .editorial.rev .editorial-body{ order:1; }
}

/* ============================ THE PROMISE BAND ============================ */
.promise{
  background:var(--navy); color:#fff; text-align:center;
  padding:56px 0 0;
}
/* The mark sits beside the headline rather than stacked above it — same brand
   presence, ~120px less vertical space before the photograph. */
.promise-head{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  margin:0 0 30px;
}
.promise-words{ flex:0 1 auto; max-width:34ch; }
.promise-mark{
  width:104px; height:104px; margin:0;
  border:2px dashed rgba(255,255,255,.42); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1.1;
}
.promise-mark span{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; opacity:.8; }
.promise-mark strong{ font-size:1.32rem; font-weight:800; margin:2px 0; }
.promise-quote{
  margin:0 auto 12px; max-width:20ch;
  font-size:clamp(1.6rem, 5.6vw, 2.9rem); line-height:1.2; font-weight:800;
  letter-spacing:-.02em; color:#fff; text-wrap:balance;
}
.promise-attrib{
  margin:0; max-width:52ch;
  font-size:.97rem; color:#C8DAE7;
}
.promise-photo{ margin:0; }
.promise-photo img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius) var(--radius) 0 0;
  box-shadow:0 -6px 40px rgba(0,0,0,.28);
}
.promise-photo figcaption{
  padding:16px 0 0; font-size:.95rem; color:#C8DAE7;
}
.promise-photo figcaption em{ font-weight:700; color:#fff; font-style:italic; }

@media (min-width:960px){
  .promise{ padding-top:76px; }
  .promise-quote{ max-width:22ch; }
  .promise-photo img{ max-width:1000px; margin-inline:auto; border-radius:var(--radius); }
  .promise-photo figcaption{ padding-bottom:8px; }
}

/* ---- Step 1 rebuild: title, value exchange, visible CTA, anchored trust ----
   The card stretches to the hero copy height on desktop, so the step is a flex
   column and the trust row is pushed to the bottom with margin-top:auto. The
   slack then reads as deliberate breathing room instead of dead space. */
.js .fstep.is-active{ display:flex; flex-direction:column; min-height:100%; }

.ftime{
  font-size:.74rem; font-weight:700; letter-spacing:.04em;
  color:var(--ink-soft); text-transform:none;
}
.fprogress .fstepno + .ftime::before{ content:"\00b7"; margin-right:8px; }

fieldset.symptoms legend{
  font-weight:800; font-size:1.15rem; line-height:1.25;
  padding:0; margin:0 0 3px; color:var(--ink); letter-spacing:-.01em;
}
.symptoms-hint{
  margin:0 0 12px; font-size:.85rem; line-height:1.4; color:var(--ink-soft);
}

.fnext{ margin:14px 0 0; }

.fbenefits{ list-style:none; margin:14px 0 0; padding:0; }
.fbenefits li{
  position:relative; padding:0 0 0 22px; margin:0 0 7px;
  font-size:.85rem; line-height:1.4; color:var(--ink-soft);
}
.fbenefits li::before{
  content:""; position:absolute; left:1px; top:4px;
  width:11px; height:6px;
  border-left:2px solid #1E8E4E; border-bottom:2px solid #1E8E4E;
  transform:rotate(-45deg);
}

/* Anchor the trust row to the foot of the card. */
.fstep .form-trust{ margin:18px 0 0; }
@media (min-width:960px){
  .fstep .form-trust{ margin-top:auto; }
}

/* Reclaim the mobile fold after the richer step 1. The 44px floor on .fprogress
   exists for the Back button, which only appears on step 2. */
.fstep[data-step="1"] .fprogress{ min-height:0; margin-bottom:4px; }
@media (max-width:959px){
  .formcard{ padding-top:14px; }
  .hero-sub{ margin-bottom:12px; }
  .fstep h2{ margin-bottom:4px; }
  .formcard .form-intro{ margin-bottom:11px; font-size:.92rem; }
  .fbenefits{ margin-top:12px; }
  .fbenefits li{ margin-bottom:5px; }
}

/* ============================ HERO COPY ADDITIONS ============================ */
.hero-tagline{
  margin:0 0 14px; font-size:1.02rem; font-weight:800; font-style:italic;
  color:#FFD8B0; letter-spacing:-.01em;
}


/* ============================ BRANDED FORM CARD ============================
   The card was correct but colourless. Brand it with a navy header band
   carrying the Rosie mark, and switch the selected/confirmed states from
   generic blue and green to the brand orange. Action colours are unchanged:
   Call stays orange, form buttons stay navy. */
/* The 4px orange top bar is gone. A white card carrying shadow-lg against the
   dark hero is already fully separated, and the navy .fhead block directly
   below it is the brand moment. The bar was trim on top of trim. */

.fhead{
  display:flex; align-items:center; gap:13px;
  margin:-16px -18px 13px; padding:14px 18px;
  background:var(--navy);
  border-radius:11px 11px 0 0;
}
.fhead img{ width:44px; height:44px; flex:none; }
.fhead h2{ margin:0; color:#fff; font-size:1.18rem; line-height:1.2; }
.fhead-sub{
  margin:3px 0 0; font-size:.86rem; line-height:1.35; color:#C8DAE7;
}
.fhead-sub strong{ color:#fff; }


.fbenefits li::before{ border-color:#D9741F; }   /* 3.25:1 on white — non-text floor is 3:1 */
.fchosen{ background:#FFF4EA; color:#8A4509; }
.fchosen::before{ color:#D9741F; }

@media (min-width:960px){
  .fhead{ margin:-24px -22px 15px; padding:16px 22px; border-radius:11px 11px 0 0; }
  .fhead img{ width:50px; height:50px; }
  .fhead h2{ font-size:1.26rem; }
}

/* Two hero CTAs — navy "Book" and orange "Call", per the one-colour-per-action rule. */
.hero-actions .btn{ flex:1 1 auto; }
@media (min-width:700px){
  .hero-actions .btn{ flex:0 1 auto; }
}

/* ---- Hero CTA hierarchy (design review, 2026-08-31) ----
   Two solid buttons of equal weight = two competing primaries. The design
   guidance is one primary CTA with secondaries visually subordinate, and
   "accent for CTA only".

   It was also failing on measurement: the navy form button separated from the
   navy hero at only 1.64:1 as a SHAPE (a control needs 3:1). Navy on navy.

   So on the dark hero the form action takes its dark-surface variant — a white
   outline — and the orange Call button is the single solid primary. This page
   is call-first, so that is the correct one to promote. */
.hero .hero-actions .btn-form{
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.62);
  box-shadow:none;
}
.hero .hero-actions .btn-form:hover{
  background:rgba(255,255,255,.12);
  border-color:#fff;
}

/* ---- Repair-or-replace closing block ---- */
.rr-foot{
  display:grid; gap:18px; align-items:center;
  margin:26px 0 0; padding:22px;
  background:linear-gradient(150deg,#EAF2F7 0%, #F4F7F9 100%);
  border-radius:var(--radius);
}
.rr-foot img{ width:min(230px,60%); height:auto; justify-self:center; }
.rr-foot p{ margin:0; color:var(--ink-soft); font-size:.98rem; }
@media (min-width:700px){
  .rr-foot{ grid-template-columns:220px 1fr; gap:26px; padding:24px 28px; }
  .rr-foot img{ width:100%; }
}

/* The founder band is the emotional peak of the page — let it run full frame. */
@media (min-width:960px){
  .promise-photo img{ max-width:1100px; }
}

/* Mark left, words right — from tablet up. */
@media (min-width:760px){
  .promise{ text-align:left; }
  .promise-head{ flex-direction:row; align-items:center; gap:30px; margin-bottom:34px; }
  .promise-mark{ flex:none; width:118px; height:118px; }
  .promise-quote{ max-width:26ch; }
  .promise-attrib{ max-width:60ch; }
  .promise-photo figcaption{ text-align:left; }
}

/* ---- Progress indicator: has to be SEEN, not read ----
   "Step 1 of 2" measured 11.8px in soft grey — quiet enough that the form did
   not announce itself as multi-step at all. A two-segment bar communicates the
   step count before a word is read, and the label is now brand-coloured. */
.fbar{
  display:inline-flex; gap:4px; flex:none;
}
.fbar i{
  display:block; width:26px; height:5px; border-radius:3px;
  background:var(--line);
}
.fbar i.is-on{ background:var(--orange); }
.fstepno{
  font-size:.82rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--navy);
}
.ftime{
  font-size:.78rem; font-weight:600; letter-spacing:0;
  color:var(--ink-soft); text-transform:none;
}

/* ---- Progress segment: 2.5:1 on white is under the 3:1 non-text floor ---- */
.fbar i.is-on{ background:#D9741F; }   /* 3.25:1 on white */

/* ---- Trust row with stars ---- */
.form-trust .ft-score{ font-weight:800; }
.form-trust .stars{ font-size:.95rem; }
.form-trust .ft-rest{ font-weight:600; }

/* ---- "What happens next" — fills step 2 with reassurance at the exact moment
        of commitment, rather than with blank space ---- */
.fnext-steps{
  margin:14px 0 0; padding:14px 16px;
  background:var(--surface-alt); border-radius:var(--radius-s);
}
.fnext-steps strong{
  display:block; font-size:.82rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:var(--navy);
  margin:0 0 8px;
}
.fnext-steps ol{ margin:0; padding:0; list-style:none; counter-reset:ns; }
.fnext-steps li{
  position:relative; padding:0 0 0 26px; margin:0 0 7px;
  font-size:.87rem; line-height:1.4; color:var(--ink-soft);
}
.fnext-steps li:last-child{ margin-bottom:0; }
.fnext-steps li::before{
  counter-increment:ns; content:counter(ns);
  position:absolute; left:0; top:1px;
  width:17px; height:17px; border-radius:50%;
  background:var(--navy); color:#fff;
  font-size:.68rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* ---- Inline CTA strips ----
   After "How it works" the page ran 7 screens on desktop (11.5 on mobile) with
   no in-flow conversion point, straight past the reviews and the founder band,
   which are the two strongest moments on the page. The sticky bar and header
   pill meant nobody was stranded, but those moments went unharvested. */
.ctastrip{
  background:var(--surface-warm);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 0;
}
.ctastrip .container{
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.ctastrip p{
  margin:0; font-size:1.08rem; font-weight:700; color:var(--ink); max-width:34ch;
}
.ctastrip-actions{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.ctastrip-alt{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--navy); font-weight:700; font-size:.95rem;
  text-decoration:underline; text-underline-offset:3px;
}
.ctastrip-dark{
  background:var(--navy-deep); border-color:rgba(255,255,255,.14);
}
.ctastrip-dark p{ color:#fff; }
.ctastrip-dark .ctastrip-alt{ color:#CFE0EB; }

@media (min-width:760px){
  .ctastrip .container{ flex-direction:row; justify-content:center; gap:26px; text-align:left; }
  .ctastrip-actions{ flex-direction:row; align-items:center; gap:18px; }
}

/* ---- "You get a person" photo ----
   A transparent cut-out inside a circular mask always clipped the figure, which
   is why the face read as half-blocked. A tinted panel shows the whole gesture,
   and the gesture points at the reader, which is the section's whole argument. */
.whoanswers .wa-photo{
  margin:0; justify-self:center;
  background:linear-gradient(160deg,#EAF2F7 0%, #DCE8F0 100%);
  border-radius:var(--radius);
  padding:10px 10px 0;
  display:flex; align-items:flex-end; justify-content:center;
}
.whoanswers .wa-photo img{
  width:150px; height:auto; display:block;
  border-radius:0; border:0; box-shadow:none;
  object-fit:contain;
}
@media (min-width:700px){ .whoanswers .wa-photo img{ width:172px; } }
@media (min-width:960px){ .whoanswers .wa-photo img{ width:190px; } }

/* ---- Trust-bar rating with stars ---- */
.trustbar .tb-score{ font-weight:800; margin-right:2px; }
.trustbar .stars{ font-size:.95rem; margin:0 6px 0 2px; }
.trustbar .tb-count{ font-weight:700; }

/* ---- The promise band reads better centred: the founder photo below it is
        centred, and left-aligning the quote left a large void on the right. ---- */
@media (min-width:760px){
  /* The block was centred but only ~460px of a 1160px container, so it read as
     stranded with a void either side. Let it span the container instead: mark
     at the left, quote taking every remaining pixel at display size. Nothing is
     centred-and-narrow, so there is no void to notice. */
  .promise-head{
    justify-content:flex-start; align-items:center;
    gap:34px; text-align:left;
  }
  .promise-words{ flex:1 1 auto; max-width:none; }
  .promise-quote{
    max-width:none; margin:0 0 10px; text-align:left;
    font-size:clamp(1.9rem, 3.5vw, 3.05rem); line-height:1.13;
  }
  .promise-attrib{ max-width:none; margin:0; text-align:left; }
  .promise-photo img{ max-width:none; }
  .promise-photo figcaption{ text-align:left; }
}