/* =============================================================================
   Trusted Home Services LLC — Design System
   -----------------------------------------------------------------------------
   Generated by the `ui-ux-pro-max` skill:

     PATTERN : Trust & Authority + Conversion
               (Hero -> Proof -> Services -> Solution -> Clear CTA path)
     STYLE   : Flat Design (2D, bold color blocks, NO gradients/shadows,
               clean lines, simple shapes, typography-led)
     COLORS  : Professional blue #1E40AF + safety orange #EA580C
     TYPE    : Poppins (headings) / Open Sans (body)
     AVOID   : Hidden contact info, missing certifications
               -> so phone + License R101 + Insured are in the top bar, the
                  hero, the trust strip, the wizard AND the footer.

   DESIGNER ADAPTATIONS (deliberate, documented):
     1. --ink-* neutralized to slate instead of the generated blue body ink.
        A saturated navy body color reads "SaaS"; slate reads "trades" and
        holds up over long reading. Contrast only improves (17:1 on white).
     2. --accent-600 darkens the accent for FILLED buttons so white text passes
        5.18:1 (the raw #EA580C gives white only 3.56:1, large-text only).
        #EA580C is still used verbatim for rules, marks and tint fills.
     3. Pure CSS rather than the Tailwind Play CDN: no build step, no runtime
        dependency, no FOUC, works offline. Same responsive/a11y principles.
   ============================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --brand:        #1E40AF;   /* generated primary      */
  --brand-700:    #1E3A8A;   /* generated foreground   */
  --brand-600:    #2563EB;   /* hover                  */
  --brand-50:     #EFF6FF;   /* generated background   */
  --brand-100:    #DBEAFE;

  /* Accent (safety orange) */
  --accent:       #EA580C;   /* generated accent — marks, rules, fills */
  --accent-600:   #C2410C;   /* filled CTA: white text @ 5.18:1        */
  --accent-700:   #9A3412;   /* hover                                 */
  --accent-50:    #FFF7ED;

  /* Ink (neutralized — see adaptation #1) */
  --ink:          #0F172A;   /* headings, body        17.4:1 on white */
  --ink-2:        #334155;   /* secondary              10.4:1          */
  --ink-3:        #475569;   /* muted                  7.5:1           */

  /* Surfaces */
  --surface:      #FFFFFF;
  --surface-2:    #F8FAFC;
  --bg:           #F1F5F9;
  --line:         #CBD5E1;   /* decorative separators, cards        */
  --line-strong:  #94A3B8;   /* interactive outlines                */
  /* Input/select/textarea borders are the sole boundary identifying the
     control, so they need 3:1 against the fill (WCAG 1.4.11). --line-strong
     only reaches 2.56:1; this reaches 3.52:1 on white and 3.36:1 on
     --surface-2. */
  --line-input:   #7C8A9C;

  /* Status
     --danger is the generated #DC2626, but that only reaches 4.41:1 on
     --danger-bg (below the 4.5:1 text threshold). --danger-text is the
     darker shade reserved for text and borders on tinted error surfaces;
     --danger stays for the error icon and the border on white. */
  --danger:       #DC2626;
  --danger-text:  #B91C1C;   /* 5.83:1 on --danger-bg, 6.30:1 on white */
  --danger-bg:    #FEF2F2;
  --success:      #15803D;
  --success-bg:   #F0FDF4;

  /* 8px rhythm (4dp base) */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* Type */
  --font-head: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Open Sans", ui-sans-serif, system-ui, sans-serif;

  /* Flat design: transitions only, never shadows */
  --t-fast: 150ms;
  --t-base: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --radius: 8px;
  --radius-lg: 12px;
  --maxw: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; }
/* svg stays inline: forcing display:block here stacks inline icons on top of
   their adjacent text (icon + label inside a link or list item). Flex
   containers blockify their svg children automatically, which is what we
   want everywhere else. */
svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }

/* Long URLs / identifiers must wrap, never clip */
a, .wrap-anywhere { overflow-wrap: anywhere; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

/* The `hidden` attribute loses to any explicit display in the UA/author
   cascade (e.g. `.btn { display: inline-flex }`), which left the wizard's Back
   button visible on step 1. Make `hidden` authoritative. */
[hidden] { display: none !important; }

/* ---------- Focus: visible for keyboard only ---------- */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Never remove the ring — only avoid showing it on mouse press */
:focus:not(:focus-visible) { outline: none; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-4); }
@media (min-width: 640px)  { .wrap { padding-inline: var(--sp-6); } }
@media (min-width: 1024px) { .wrap { padding-inline: var(--sp-8); } }

.section { padding-block: var(--sp-16); }
@media (min-width: 768px) { .section { padding-block: var(--sp-20); } }

.section--tint { background: var(--bg); }
.section--blue { background: var(--brand-50); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100%;
  background: var(--ink); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius); font-weight: 700; z-index: 200;
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-block; font-family: var(--font-head); font-size: 0.8125rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-600); margin-bottom: var(--sp-3);
}
.h-xl { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); letter-spacing: -0.02em; }
.h-lg { font-size: clamp(1.6rem, 1.25rem + 1.7vw, 2.35rem); letter-spacing: -0.015em; }
.h-md { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }
.lede  { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-3); }
.sec-head { max-width: 68ch; margin-bottom: var(--sp-10); }
.sec-head .lede { margin-top: var(--sp-4); }

/* ---------- Buttons (min 44px target) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-head); font-size: 1rem; font-weight: 600;
  border: 2px solid transparent; border-radius: var(--radius);
  text-decoration: none; text-align: center;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--accent-600); color: #fff; }
.btn--primary:hover { background: var(--accent-700); }
.btn--secondary { background: var(--brand); color: #fff; }
.btn--secondary:hover { background: var(--brand-700); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface-2); }
.btn--invert { background: #fff; color: var(--brand-700); }
.btn--invert:hover { background: var(--brand-50); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 479px) { .btn-row .btn { width: 100%; } }

/* ---------- Top trust bar ---------- */
.topbar { background: var(--ink); color: #fff; font-size: 0.875rem; }
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2) var(--sp-6); padding-block: var(--sp-2);
}
.topbar__list { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); list-style: none; padding: 0; }
.topbar__list li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.topbar__list li a { display: inline-flex; align-items: center; gap: var(--sp-2); }
.topbar__list svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface); border-bottom: 2px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); min-height: 76px; min-width: 0;
}
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--ink); min-width: 0; }
.brand__mark {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: var(--brand); color: #fff; border-radius: var(--radius);
}
.brand__mark svg { width: 26px; height: 26px; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
.brand__tag  { display: block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
               color: var(--accent-600); letter-spacing: 0.06em; text-transform: uppercase; }

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: var(--sp-6); list-style: none; padding: 0; }
/* Nav/footer/brand links get a 44px hit area without changing their visual
   size: inline-flex + padding + negative margin keeps the text where it was
   while the tappable box reaches the platform minimum (WCAG 2.5.8). */
.nav a, .site-footer a, .topbar__list a, .area__list a, .hero__contact a, .skip-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--sp-2);
  margin-block: calc(var(--sp-2) * -1);
}
.nav a { color: var(--ink-2); font-weight: 600; text-decoration: none; font-size: 0.9375rem; }
.nav a:hover { color: var(--brand); }
.nav li { display: flex; align-items: center; }
.header-cta { flex: none; }
@media (min-width: 900px) { .nav { display: block; } }

/* Below 640px the full CTA label would force the header wider than the
   viewport, so collapse it to an icon and keep the accessible name on the
   button itself. The hero CTA carries the full visible label. */
@media (max-width: 639px) {
  .header-cta { padding-inline: var(--sp-3); }
  .header-cta svg { width: 24px; height: 24px; }
  .header-cta__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .brand__mark { width: 40px; height: 40px; }
  .brand__mark svg { width: 24px; height: 24px; }
  .brand__name { font-size: 0.9375rem; }
}

/* ---------- Hero ---------- */
.hero { background: var(--brand-50); border-bottom: 2px solid var(--line); }
.hero__grid { display: grid; gap: var(--sp-10); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.4fr 1fr; gap: var(--sp-12); } }

.hero__title { margin-bottom: var(--sp-5); }
.hero__title .accent { color: var(--accent-600); }

.hero__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-block: var(--sp-6); padding: 0; list-style: none; }
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); background: var(--surface);
  border: 2px solid var(--line); border-radius: 999px;
  font-size: 0.875rem; font-weight: 600; color: var(--ink-2);
}
.badge svg { width: 16px; height: 16px; color: var(--success); flex: none; }

.hero__card {
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
@media (min-width: 480px) { .hero__card { padding: var(--sp-8); } }
.hero__card h2 { font-size: 1.25rem; margin-bottom: var(--sp-2); }
.hero__card > p { color: var(--ink-2); margin-bottom: var(--sp-5); }
.hero__card .btn-row { flex-direction: column; }
.hero__contact { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 2px solid var(--line); display: grid; gap: var(--sp-3); }
.hero__contact a { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink); text-decoration: none; font-weight: 600; min-height: 44px; }
.hero__contact a:hover { color: var(--brand); }
.hero__contact svg { width: 20px; height: 20px; color: var(--accent-600); flex: none; }
.hero__contact small { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--ink-3); }
/* The yahoo address is 32 chars and would break mid-word on a phone; step
   the size down instead so it stays whole. */
@media (max-width: 480px) {
  .hero__contact a[href^="mailto:"] { font-size: 0.8125rem; }
}

/* ---------- Trust strip ---------- */
.trust { background: var(--ink); color: #fff; padding-block: var(--sp-10); }
.trust__grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.trust__item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.trust__item svg { width: 28px; height: 28px; color: var(--accent); flex: none; }
.trust__item h3 { font-size: 1.0625rem; margin-bottom: var(--sp-1); }
.trust__item p { font-size: 0.9375rem; color: #CBD5E1; }
.trust__item strong { color: #fff; }

/* ---------- Services ---------- */
/* Explicit 1 / 2 columns: auto-fit produced 3 + 1 orphan at 1180px. */
.cards { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; padding: 0; margin: 0; list-style: none; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }
.card {
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-6); transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.card:hover { border-color: var(--brand); }
.card__icon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); border-radius: var(--radius); margin-bottom: var(--sp-4); }
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.1875rem; margin-bottom: var(--sp-2); }
.card p { color: var(--ink-2); font-size: 0.9375rem; }
.card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); padding: 0; list-style: none; }
.card__tags li {
  font-size: 0.8125rem; font-weight: 600; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.25rem var(--sp-2);
}

/* ---------- Steps ---------- */
.steps { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 0; margin: 0; list-style: none; counter-reset: step; }
/* padding-top must clear the 40px numbered circle plus a gap, or the
   circle overlaps the heading text. */
.step { position: relative; padding-top: 3.25rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--accent-600); color: #fff; border-radius: 50%;
  font-family: var(--font-head); font-weight: 700;
}
.step h3 { font-size: 1.125rem; margin-bottom: var(--sp-2); }
.step p { color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- Service area ---------- */
.area { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 900px) { .area { grid-template-columns: 1fr 1fr; gap: var(--sp-12); } }
.area__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.area__list li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--ink-2); }
/* These list rows are not links — they are plain informational text with a
   leading icon. Give them a comfortable 44px row height for scanning, but do
   NOT inline-flex the span: that would break a bold lead-in and its trailing
   text onto separate lines. */
.area__list li > span { display: block; min-height: 44px; padding-block: var(--sp-2); }
.area__list svg { width: 20px; height: 20px; color: var(--accent-600); flex: none; margin-top: 4px; }
.area__note { background: var(--brand); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-6); }
.area__note h3 { font-size: 1.125rem; margin-bottom: var(--sp-3); }
.area__note p { color: #DBEAFE; }
.area__note strong { color: #fff; }

/* ---------- Owner ---------- */
.owner { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 900px) { .owner { grid-template-columns: 1fr 1.2fr; gap: var(--sp-12); } }
.owner__figure {
  background: var(--bg); border: 2px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-8); display: flex; align-items: center; gap: var(--sp-5);
  /* Sticky so the identity card stays beside the copy while it is read. */
  position: sticky; top: calc(76px + var(--sp-6));
}
.owner__avatar {
  width: 72px; height: 72px; flex: none; display: grid; place-items: center;
  background: var(--brand); color: #fff; border-radius: 50%;
  font-family: var(--font-head); font-size: 1.75rem; font-weight: 700;
}
.owner__figure h3 { font-size: 1.125rem; }
.owner__figure p { font-size: 0.9375rem; color: var(--ink-2); }
.owner__body p + p { margin-top: var(--sp-4); }
.owner__body p { color: var(--ink-2); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--brand); color: #fff; padding-block: var(--sp-16); }
@media (min-width: 768px) { .cta-band { padding-block: var(--sp-20); } }
.cta-band__inner { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.4fr 1fr; } }
.cta-band h2 { margin-bottom: var(--sp-4); }
.cta-band p { color: #DBEAFE; font-size: 1.0625rem; max-width: 56ch; }
.cta-band .btn-row { flex-direction: column; }
@media (min-width: 480px) { .cta-band .btn-row { flex-direction: row; } }
@media (max-width: 479px) { .cta-band .btn-row .btn { width: 100%; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #CBD5E1; padding-block: var(--sp-12) var(--sp-8); font-size: 0.9375rem; }
.site-footer__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-10); } }
.site-footer h2 { font-size: 1rem; color: #fff; margin-bottom: var(--sp-3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.site-footer a { color: #CBD5E1; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .brand { color: #fff; margin-bottom: var(--sp-3); }
.site-footer .brand__tag { color: var(--accent); }
.site-footer__bottom {
  margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid #334155;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: space-between;
  font-size: 0.875rem; color: #94A3B8;
}

/* =============================================================================
   APPOINTMENT WIZARD (modal)
   ========================================================================== */
.wizard-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(15, 23, 42, 0.72);
  display: none; align-items: flex-start; justify-content: center;
  padding: var(--sp-4); overflow-y: auto;
}
.wizard-backdrop[data-open="true"] { display: flex; }

.wizard {
  background: var(--surface); width: 100%; max-width: 720px;
  border-radius: var(--radius-lg); border: 2px solid var(--ink);
  margin-block: auto;
}
@media (min-width: 640px) { .wizard-backdrop { padding: var(--sp-8); } }

.wizard__head {
  position: relative; padding: var(--sp-6); border-bottom: 2px solid var(--line);
  background: var(--brand-50); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.wizard__head h2 { font-size: 1.25rem; padding-right: var(--sp-10); }
.wizard__head p { font-size: 0.9375rem; color: var(--ink-2); margin-top: var(--sp-1); }
.wizard__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 2px solid var(--line); border-radius: var(--radius); color: var(--ink-2);
  background: var(--surface);
}
.wizard__close:hover { border-color: var(--ink); color: var(--ink); }
.wizard__close svg { width: 22px; height: 22px; }

.wizard__body { padding: var(--sp-6); }
@media (min-width: 640px) { .wizard__body { padding: var(--sp-8); } }

/* Progress */
.progress { margin-bottom: var(--sp-6); }
.progress__label {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-family: var(--font-head); font-size: 0.875rem; font-weight: 600; color: var(--ink-2);
  margin-bottom: var(--sp-2);
}
.progress__track { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.progress__bar {
  height: 100%; width: 25%; background: var(--accent-600); border-radius: 999px;
  transition: width var(--t-base) var(--ease);
}
.progress__dots { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-3); list-style: none; padding: 0; }
.progress__dots li {
  flex: 1; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--ink-3);
  padding-top: var(--sp-1);
}
.progress__dots li[aria-current="step"] { color: var(--accent-700); }
.progress__dots li[data-done="true"] { color: var(--success); }

/* Steps */
.wizard-step { display: none; }
.wizard-step[data-active="true"] { display: block; }
.wizard-step > h3 { font-size: 1.125rem; margin-bottom: var(--sp-2); }
.wizard-step > .step-hint { color: var(--ink-2); font-size: 0.9375rem; margin-bottom: var(--sp-6); }

/* Option cards (radio / checkbox groups) */
.options { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); padding: 0; margin: 0; list-style: none; }
.option { position: relative; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option__face {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  min-height: 44px; height: 100%;
  padding: var(--sp-4); cursor: pointer;
  background: var(--surface); border: 2px solid var(--line-input); border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.option__face:hover { border-color: var(--brand); }
.option input:checked + .option__face { border-color: var(--brand); background: var(--brand-50); }
.option input:focus-visible + .option__face { outline: 3px solid var(--accent); outline-offset: 2px; }
.option__face svg { width: 22px; height: 22px; color: var(--brand); flex: none; margin-top: 2px; }
.option__face strong { display: block; font-family: var(--font-head); font-size: 0.9375rem; }
.option__face small { display: block; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.45; }
/* Selected state is not conveyed by color alone — a check mark reinforces it */
.option__check { margin-left: auto; width: 20px; height: 20px; flex: none; color: var(--brand); opacity: 0; }
.option input:checked ~ .option__check { opacity: 1; }

/* Fields */
.field { margin-bottom: var(--sp-5); }
.field:last-child { margin-bottom: 0; }
.field > label, .fieldset__legend {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: 0.9375rem; margin-bottom: var(--sp-2);
}
.req { color: var(--accent-600); }
.field__hint { font-size: 0.8125rem; color: var(--ink-3); margin-bottom: var(--sp-2); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: var(--sp-3);
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--line-input); border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; padding-right: var(--sp-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-3) center; background-size: 20px;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--brand); outline: 3px solid var(--accent); outline-offset: 1px; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }

/* Selectors are keyed on [data-invalid] rather than .field so that the
   checkbox/radio `fieldset`s (which have no .field class) get the same
   treatment as single inputs. */
[data-invalid="true"] .input,
[data-invalid="true"] .select,
[data-invalid="true"] .textarea { border-color: var(--danger); background: var(--danger-bg); }
[data-invalid="true"] .option__face { border-color: var(--danger); }
[data-invalid="true"] .option input:checked + .option__face { background: var(--danger-bg); }

.field__error { display: none; align-items: flex-start; gap: var(--sp-2); font-size: 0.875rem; color: var(--danger-text); margin-top: var(--sp-2); font-weight: 600; }
[data-invalid="true"] .field__error { display: flex; }
.field__error svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

.row { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .row--2 { grid-template-columns: 1fr 1fr; } }

fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
.fieldset__legend { padding: 0; }

/* Error summary */
.error-summary {
  display: none; margin-bottom: var(--sp-6);
  background: var(--danger-bg); border: 2px solid var(--danger); border-left-width: 6px;
  border-radius: var(--radius); padding: var(--sp-5);
}
.error-summary[data-visible="true"] { display: block; }
.error-summary h3 { font-size: 1.0625rem; color: var(--danger-text); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.error-summary h3 svg { width: 22px; height: 22px; flex: none; color: var(--danger); }
.error-summary ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.error-summary a { color: var(--danger-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; min-height: 28px; align-items: center; }
.error-summary a:hover { color: #7F1D1D; }

/* Photo upload */
.dropzone {
  display: grid; place-items: center; gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4); text-align: center; cursor: pointer;
  background: var(--surface-2); border: 2px dashed var(--line-input); border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.dropzone:hover, .dropzone[data-drag="true"] { border-color: var(--brand); background: var(--brand-50); }
.dropzone svg { width: 34px; height: 34px; color: var(--brand); }
.dropzone strong { font-family: var(--font-head); font-size: 0.9375rem; }
.dropzone small { color: var(--ink-3); font-size: 0.8125rem; }

.thumbs { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); list-style: none; padding: 0; margin: var(--sp-5) 0 0; }
.thumb { position: relative; margin: 0; aspect-ratio: 1; border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb__name {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 0.25rem var(--sp-2); font-size: 0.6875rem; color: #fff;
  background: linear-gradient(transparent, rgba(15,23,42,0.85));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Shown when the browser cannot decode the file (HEIC is the common case on
   iPhones). A labelled placeholder beats a broken-image icon. */
.thumb__fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--bg); color: var(--line-strong);
}
.thumb__fallback svg { width: 28px; height: 28px; }
.thumb__remove {
  position: absolute; top: 4px; right: 4px;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--ink); color: #fff; border-radius: 50%; cursor: pointer;
}
.thumb__remove:hover { background: var(--danger); }
.thumb__remove svg { width: 16px; height: 16px; }

/* Wizard footer */
.wizard__foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  padding: var(--sp-5) var(--sp-6); border-top: 2px solid var(--line); background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
@media (min-width: 640px) { .wizard__foot { padding: var(--sp-5) var(--sp-8); } }
.wizard__foot .btn { flex: 1 1 140px; }
.wizard__foot [data-step-back] { flex: 0 0 auto; }

/* Review */
/* label / value / edit-link on one line; long values wrap beneath the label
   instead of inheriting grid row gaps that read as unrelated whitespace. */
.review { background: var(--surface-2); border: 2px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); margin-top: var(--sp-5); }
.review h4 { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-4); }
.review dl {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin: 0; font-size: 0.9375rem;
}
.review dt {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-weight: 600; color: var(--ink-2); font-size: 0.8125rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  margin-top: var(--sp-4);
}
.review dt:first-of-type { margin-top: 0; }
.review dd { margin: 0; padding-top: 2px; }
.review__edit {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 28px; flex: none;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--brand); text-decoration: underline; text-underline-offset: 3px;
}
.review__edit:hover { color: var(--brand-700); }
.review__edit svg { width: 14px; height: 14px; }

/* Status / success */
.status { border-radius: var(--radius); padding: var(--sp-5); margin-bottom: var(--sp-5); font-size: 0.9375rem; }
.status[hidden] { display: none; }
.status--error { background: var(--danger-bg); border: 2px solid var(--danger); color: var(--danger-text); font-weight: 600; }
.status--success { background: var(--success-bg); border: 2px solid var(--success); color: var(--success); }
.status__title { font-family: var(--font-head); font-size: 1.0625rem; font-weight: 700; margin-bottom: var(--sp-2); }
.status p + p { margin-top: var(--sp-2); }
.status ol, .status ul { margin: var(--sp-3) 0 0; padding-left: 1.25rem; }
.status li + li { margin-top: var(--sp-2); }

.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;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .progress__bar { transition: none; }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .site-header, .cta-band, .wizard-backdrop, .btn { display: none !important; }
  body { color: #000; }
  .section { padding-block: var(--sp-4); }
}