/* ==========================================================================
   Leads Zee - design system
   --------------------------------------------------------------------------
   BRAND (sampled from static/img/logo-full.png, not eyeballed)
     --leadzee-blue       #00ADFE   the bright hexagon
     --leadzee-dark-blue  #0055A5   the deep hexagon
     --leadzee-orange     #FE7402   the orange hexagon
     --leadzee-ink        #3D4248   the LEADS ZEE wordmark
     --leadzee-gold       #FD9E02   the rule beneath the wordmark

   WHY THE TWO BLUES ARE NOT INTERCHANGEABLE
     #00ADFE sits at about 2.5:1 against white. That is below AA for text of
     any size and for white text laid on it, so it can never carry a label, a
     link or a button. #0062F0 is 5.3:1 and carries all of those.
     So: DEEP blue for anything you read or click, BRIGHT blue for shapes
     you only look at - the corner wedge, icon tiles, marks on dark bands.
     The mark itself is built the same way.

   COLOR BUDGET (60 / 30 / 10)

   PRIMARY   60%  WHITE #FEFEFE
                  The dominant ground. Page background, nav bar, every card
                  and panel, the search bar, the form surfaces. Plus its own
                  tint ramp (--mist / --ice) for alternating section bands.

   SECONDARY 30%  INK #3D4248
                  Structure and reading matter. All headings, body copy, icon
                  glyphs and form labels. This is the wordmark's own grey, so
                  the page reads in the same colour the logo is set in. It
                  replaced #00162C, a near-black navy left over from the
                  previous mark that appeared nowhere in the current one.
                  Dark bands use --blue-700, a deepened brand blue, rather
                  than ink: a mid grey slab reads as washed out.

   TERTIARY  10%  BLUE #0062F0 + #00ADFE
                  Accent, rationed. Buttons, links, the highlighted hero
                  words, eyebrows, stat icons, focus rings (deep); the corner
                  wedge and dark-band marks (bright).

   ACCENT     -   ORANGE #FE7402 / GOLD #FD9E02
                  Rationed harder still. The nav underline echoes the orange
                  rule under the wordmark; gold marks the rating. Adding a
                  third orange element means removing one.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* brand - sampled straight from static/img/logo-full.png, so the page and
     the mark cannot drift apart. Every other ramp below is derived from these. */
  --leadzee-blue:      #00ADFE;   /* bright hexagon */
  --leadzee-dark-blue: #0055A5;   /* deep hexagon */
  --leadzee-orange:    #FE7402;   /* upper hexagon */
  --leadzee-ink:       #3D4248;   /* the LEADS ZEE wordmark */
  --leadzee-gold:      #FD9E02;
  --leadzee-white:     #FEFEFE;

  /* blue ramp (tertiary). --blue and darker carry text and white-on-blue;
     --blue-400 is the bright brand blue and is for fills only. */
  --blue-700: #003A70;
  --blue-600: #0050C8;
  /* Everything you read or click. The deep hexagon #0055A5 used to sit here
     and read as navy on screen, so it is gone; this is vivid enough to match
     the brand blue the crew wear and still 5.3:1 under white text. */
  --blue:     #0062F0;
  --blue-400: #00ADFE;
  --blue-200: #8FDCFE;
  --blue-100: #CDEFFF;
  --blue-50:  #EEF9FF;

  /* accent ramp - decorative only, both fail AA as text on white */
  --orange:     #FE7402;
  --orange-700: #C85600;
  /* Held in reserve: #FD9E02 is 2.07:1 on white and #FE7402 is 2.75:1, so
     neither may carry an icon or label on a light ground. Orange is used
     once, on the nav underline, where the active state is also carried by
     the link colour - so the underline is reinforcement, not the only cue. */
  --gold:       #FD9E02;

  /* ink ramp (secondary) - anchored on the wordmark grey. The ramp it
     replaced was #00162C, a near-black navy carried over from the previous
     mark and present nowhere in the current one. --ink is 9.6:1 on white and
     --ink-600 is 6.1:1, so both carry body text; --ink-500 is 3.8:1 and is
     for large or supporting text only. */
  --ink:      #3D4248;
  --ink-900:  #23272B;
  --ink-800:  #2F3439;
  --ink-600:  #5A626C;
  --ink-500:  #7B838E;
  --ink-400:  #9BA3AE;

  /* neutral ramp (primary family) */
  --white:    #FEFEFE;
  --mist:     #F5F9FF;
  --ice:      #EAF1FB;
  --line:     #DCE6F2;
  --line-soft:#EDF2F9;
  --ink-soft: #5A6B7F;

  /* utility */
  --ok:     #00794F;
  --ok-bg:  #E9FAF3;
  --err:    #D92D20;
  --err-bg: #FEF3F2;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sh-xs: 0 1px 2px rgba(0, 45, 90, .06);
  --sh-sm: 0 2px 8px rgba(0, 45, 90, .06), 0 1px 2px rgba(0, 45, 90, .04);
  --sh-md: 0 8px 24px -6px rgba(0, 45, 90, .12), 0 2px 6px rgba(0, 45, 90, .05);
  --sh-lg: 0 20px 48px -12px rgba(0, 45, 90, .18), 0 6px 16px -6px rgba(0, 45, 90, .08);
  --sh-blue: 0 8px 20px -6px rgba(0, 98, 240, .32);

  --shell: 1280px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* 90px clears the 79px sticky header, so an in-page anchor no longer drops
   the heading you navigated to behind it. Also fixes keyboard focus. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
/* height:auto so width/height attrs act as a ratio hint, not a hard height */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-700); }
h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin: 0 0 .5em;
  font-weight: 800;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 700; letter-spacing: -.02em; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.skip-link {
  position: absolute; left: 16px; top: -60px;
  background: var(--blue); color: #fff;
  padding: .7rem 1.2rem; border-radius: var(--r-md);
  font-weight: 700; z-index: 200; transition: top .18s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- layout ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 28px; }
.section { padding-block: clamp(52px, 7vw, 92px); }
.section--mist { background: var(--mist); }
.section--deep { background: var(--blue-700); color: var(--blue-100); }
.section--deep h2, .section--deep h3 { color: #fff; }

.eyebrow {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);                       /* TERTIARY */
  margin-bottom: .9rem;
}
.section--deep .eyebrow, .form-hero .eyebrow { color: var(--blue-400); }
.section--deep .req, .form-hero .req { color: var(--blue-400); }
.lede { font-size: 1.06rem; color: var(--ink-soft); max-width: 60ch; }
.section--deep .lede { color: var(--blue-100); }
.section-head { margin-bottom: clamp(28px, 3.5vw, 48px); }
.section-head--center { text-align: center; max-width: 700px; margin-inline: auto; }
.section-head--center .lede { margin-inline: auto; }
.section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.link-arrow { font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.link-arrow i { transition: transform .18s ease; }
.link-arrow:hover i { transform: translateX(3px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.55rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  font: inherit; font-weight: 700; font-size: .95rem;
  cursor: pointer;
  /* No nowrap: at 200% text a label like "Find a professional" is
     478px wide and cannot fit a 393px viewport, which forced
     two-dimensional scrolling (WCAG 1.4.4). Labels are short
     enough that they do not wrap at normal sizes. */
  text-wrap: balance;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--sh-blue); }   /* TERTIARY */
.btn--primary:hover { background: var(--blue-600); color: #fff; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-900); color: #fff; }
.btn--outline { background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: var(--sh-xs); }
.btn--outline:hover { border-color: var(--blue); color: var(--blue); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn--lg { padding: 1rem 2rem; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(254, 254, 254, .93);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
/* min-height rather than height, and allowed to wrap: at large text sizes
   the nav row grows downward instead of pushing the page sideways. */
.site-header__bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1.5rem; min-height: 78px;
}

/* min-height lifts the tap target to 44px without resizing the mark. */
.brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; min-height: 44px; }
.brand img { height: 36px; width: auto; }
/* Set as one uppercase word to match the lockup. Uppercase needs positive
   tracking where the old mixed-case wordmark wanted negative. */
.brand__word {
  font-size: 1.32rem; font-weight: 800; letter-spacing: .02em;
  line-height: 1; color: var(--ink); text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: 1.75rem; margin-inline: auto; }
.nav > a, .nav__group > button {
  position: relative;
  font-family: inherit; font-size: .94rem; font-weight: 600;
  color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem;
}
.nav > a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2.5px; border-radius: 2px;
  /* the orange rule that sits under the wordmark in the lockup */
  background: var(--orange); transition: width .2s ease;   /* ACCENT */
}
.nav > a:hover::after, .nav > a[aria-current="page"]::after { width: 100%; }
.nav > a[aria-current="page"] { color: var(--blue); }

.header__actions { display: flex; align-items: center; gap: .7rem; flex: none; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: none; border-radius: 50%;
  color: var(--ink); cursor: pointer; font-size: 1rem;
  transition: background .16s ease;
}
.icon-btn:hover { background: var(--ice); }
.nav-toggle { display: none; }
.nav > a.nav__cta { display: none; }   /* shown only inside the mobile nav panel */

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--white); }
/* Brand corner wedge - pinned to the page's top-right corner, drawn above the
   sticky header (z 80) so it crosses the nav row as the brand mockup shows.
   pointer-events:none keeps the CTA beneath it clickable. */
.corner-wedge {
  position: absolute; top: 0; right: 0; z-index: 70;  /* below .site-header (80) */
  width: clamp(84px, 8vw, 124px); aspect-ratio: 1;
  background: var(--blue-400);                               /* TERTIARY */
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none;
}
.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.14fr .86fr;
  gap: clamp(24px, 3vw, 44px); align-items: center;
  padding-block: clamp(40px, 5vw, 64px) clamp(36px, 4vw, 52px);
}
.hero h1 { margin-bottom: 1.1rem; }
.hero h1 em { font-style: normal; color: var(--blue); display: block; }   /* TERTIARY */
.hero__sub { font-size: 1.1rem; color: var(--ink-soft); max-width: 48ch; margin-bottom: 1.9rem; }

/* search bar */
.searchbar {
  display: flex; align-items: center;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  padding: .42rem .42rem .42rem 1.15rem;
  gap: .5rem; max-width: 700px;
}
.searchbar__field { display: flex; align-items: center; gap: .6rem; flex: 1 1 0; min-width: 0; }
.searchbar__field i { color: var(--ink); font-size: .95rem; flex: none; }
.searchbar__field input {
  border: 0; background: none;
  font: inherit; font-size: .95rem; color: var(--ink);
  width: 100%; min-width: 0; padding: .65rem 0;
}
/* Suppress the ring only when NOT focus-visible, so keyboard users keep it. */
.searchbar__field input:not(:focus-visible) { outline: 0; }
.searchbar__field input::placeholder { color: var(--ink-soft); }
.searchbar__sep { width: 1px; align-self: stretch; background: var(--line); flex: none; margin-block: .4rem; }
.searchbar .btn { border-radius: var(--r-pill); padding-inline: 1.7rem; flex: none; }

/* quick service chips under the search bar - eight across on one row */
.quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.quick__item {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  width: 76px; text-align: center;
}
.quick__ico {
  width: 50px; height: 50px; display: grid; place-items: center;
  background: var(--white); border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md); box-shadow: var(--sh-xs);
  color: var(--ink); font-size: 1.15rem;
  transition: border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
/* Gated: on a touch screen :hover sticks after a tap, leaving cards lifted
   and bordered as though selected. */
@media (hover: hover) {
  .quick__item:hover .quick__ico { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); box-shadow: var(--sh-sm); }
}
.quick__item span { font-size: .78rem; font-weight: 600; color: var(--ink); line-height: 1.25; }

/* stat strip */
.statstrip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: clamp(1.2rem, 3vw, 2.6rem); margin-top: 2.1rem;
}
/* stretch, not centre: the first label wraps to two lines and the second does
   not, so centring offset the two rows against each other by 12px. */
.statstrip__item { display: flex; align-items: center; gap: .8rem; }
.statstrip__item + .statstrip__item { border-left: 1px solid var(--line); padding-left: clamp(1.2rem, 3vw, 2.6rem); }
.statstrip i { font-size: 1.7rem; color: var(--blue); }      /* TERTIARY */
.statstrip b { display: block; font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.statstrip span { font-size: .83rem; color: var(--ink-soft); }
.todo, .statstrip .todo {
  display: inline-block; vertical-align: middle;
  font-size: .58rem; font-weight: 800; letter-spacing: .1em;
  background: var(--blue-100); color: var(--blue-700);
  border-radius: 4px; padding: 1px 5px; margin-left: 5px;
}

/* hero figure */
.hero__figure { position: relative; }
.hero__figure img { width: 100%; border-radius: var(--r-xl); }

/* search acknowledgement - shown when the hero search carries a query */
.searchack {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--white); border: 1.5px solid var(--blue-200);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-sm); padding: 1rem 1.15rem;
  margin-bottom: 24px; box-shadow: var(--sh-xs);
}
.searchack i { color: var(--blue); margin-top: 4px; flex: none; }
.searchack p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.searchack b { color: var(--ink); }

/* ---------- service cards ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.svc {
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover: hover) {
  .svc:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--blue-200); }
}
.svc img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.svc__body { padding: .9rem 1rem 1.1rem; }
.svc__body h3 { margin-bottom: .15rem; font-size: 1rem; }
.svc__body span { font-size: .84rem; color: var(--ink-soft); line-height: 1.4; display: block; }

/* ---------- steps ---------- */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step { position: relative; padding-top: 4.6rem; }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; top: 0; left: 0;
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--blue); color: #fff;                        /* TERTIARY */
  font-weight: 800; font-size: 1.2rem;
  box-shadow: var(--sh-blue);
}
.step p { color: var(--ink-soft); margin: 0; }
.section--deep .step p { color: var(--blue-100); }
.section--deep .step::before { background: var(--blue); box-shadow: none; }

/* ---------- feature cards ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 1.9rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
@media (hover: hover) {
  .card:hover { border-color: var(--blue-200); box-shadow: var(--sh-md); transform: translateY(-3px); }
}
.card__ico {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 1.15rem;
  background: var(--blue-50); color: var(--blue); font-size: 1.25rem;
}
.card p { color: var(--ink-soft); font-size: .96rem; margin-bottom: 0; }
.section--deep .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.section--deep .card:hover { border-color: var(--blue-400); transform: translateY(-3px); }
.section--deep .card p { color: var(--blue-100); }
.section--deep .card__ico { background: rgba(0,173,254,.22); color: var(--blue-400); }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split__media img { border-radius: var(--r-xl); box-shadow: var(--sh-lg); width: 100%; }
.checklist { list-style: none; padding: 0; margin: 1.4rem 0 2rem; }
.checklist li { position: relative; padding-left: 2.1rem; margin-bottom: .9rem; color: var(--ink-soft); }
.section--deep .checklist li { color: var(--blue-100); }
.checklist li b { color: var(--ink); }
.section--deep .checklist li b { color: #fff; }
.checklist li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 0; top: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: .62rem;
  background: var(--blue); color: #fff;                        /* TERTIARY */
}

/* ---------- FAQ ---------- */
.faq { max-width: 840px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); margin-bottom: .75rem; overflow: hidden;
}
.faq details[open] { border-color: var(--blue); box-shadow: var(--sh-sm); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.15rem 3.3rem 1.15rem 1.35rem;
  font-weight: 700; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "\2b"; position: absolute; right: 1.3rem; top: 50%;
  transform: translateY(-50%); font-size: 1.1rem; font-weight: 400;
  color: var(--blue); transition: transform .2s ease;
}
.faq details[open] summary::after { content: "\2212"; }
.faq__a { padding: 0 1.35rem 1.3rem; color: var(--ink-soft); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(46rem 22rem at 50% 120%, rgba(0,103,254,.4), transparent 65%);
  pointer-events: none;
}
.cta-band .shell { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }
.cta-band .lede { margin-inline: auto; margin-bottom: 2rem; color: var(--blue-100); }
.cta-row { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--blue-100); padding-block: clamp(48px, 6vw, 76px) 0; }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.15rem; }
.site-footer a { color: var(--blue-100); font-size: .93rem; }
.site-footer a:hover { color: var(--blue-400); }
.footer__grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 44px; }
.footer__links { list-style: none; padding: 0; margin: 0; }
.footer__links li { margin-bottom: .62rem; }
.footer__brand .brand { margin-bottom: 1.1rem; }
.footer__brand .brand__word { color: #fff; }
.footer__brand p { font-size: .93rem; color: var(--blue-100); max-width: 34ch; }
.footer__bottom {
  margin-top: 46px; border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; font-size: .86rem; color: var(--ink-400);
}

/* ==========================================================================
   FORM
   ========================================================================== */
.form-page { background: var(--mist); }
.form-hero { background: var(--ink); color: #fff; padding-block: clamp(44px, 5.5vw, 70px); position: relative; overflow: hidden; }
/* same corner motif as the homepage, kept small so blue stays within budget */
.form-hero::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: clamp(84px, 8vw, 124px); aspect-ratio: 1;
  background: var(--blue-400); clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none;
}
.form-hero .shell { position: relative; z-index: 2; }
.form-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); }
.form-hero p { color: var(--blue-100); max-width: 56ch; margin: 0; }

.form-wrap { max-width: 900px; margin-inline: auto; padding-block: clamp(30px, 4vw, 52px); }
.form-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden;
}

fieldset.fs { border: 0; margin: 0; padding: clamp(1.5rem, 3vw, 2.4rem); border-bottom: 1px solid var(--line-soft); }
fieldset.fs:last-of-type { border-bottom: 0; }
/* real <legend> so each section is a named group for assistive tech;
   legends need float/padding reset before flex behaves predictably */
legend.fs__head {
  display: flex; align-items: center; gap: .9rem;
  float: none; width: 100%; padding: 0; margin-bottom: .35rem;
}
.fs__num {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--ink); color: #fff; font-size: .88rem; font-weight: 800;
}
.fs__title { font-size: 1.2rem; font-weight: 800; color: var(--ink); letter-spacing: -.025em; }
.fs__hint { font-size: .88rem; color: var(--ink-soft); margin: 0 0 1.5rem 2.95rem; }

.row { display: grid; gap: 1.1rem; margin-bottom: 1.1rem; }
.row:last-child { margin-bottom: 0; }
.row--2 { grid-template-columns: 1fr 1fr; }
.row--3 { grid-template-columns: 1fr 1fr 1fr; }
.row--phone { grid-template-columns: 136px 1fr; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field > label, .lbl { font-size: .87rem; font-weight: 600; color: var(--ink); margin-bottom: .45rem; }
.req { color: var(--blue); font-weight: 800; }               /* TERTIARY */
.opt { color: var(--ink-soft); font-weight: 500; font-size: .8rem; }

.ctrl {
  width: 100%; padding: .78rem .95rem;
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--mist); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ctrl::placeholder { color: var(--ink-soft); }
.ctrl:hover { border-color: var(--blue-200); }
.ctrl:focus {
  outline: none; background: var(--white);
  border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 98, 240, .16);
}
.ctrl:user-invalid { border-color: var(--err); }
textarea.ctrl { resize: vertical; min-height: 108px; line-height: 1.6; }
select.ctrl {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B8199'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 15px;
  padding-right: 2.3rem;
}
.hint { font-size: .8rem; color: var(--ink-soft); margin-top: .35rem; }
/* Inline upload errors, replacing the blocking alert() sheets. */
.hint--err { color: var(--err); font-weight: 600; }

.choices { display: grid; gap: .8rem; }
.choices--2 { grid-template-columns: 1fr 1fr; }
.choice {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem 1.1rem; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); background: var(--mist); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.choice:hover { border-color: var(--blue-400); background: var(--white); }
.choice input { margin: 3px 0 0; accent-color: var(--blue); flex: none; width: 17px; height: 17px; }
.choice b { display: block; font-size: .95rem; color: var(--ink); }
.choice small { display: block; color: var(--ink-soft); font-size: .84rem; line-height: 1.45; }
.choice:has(input:checked) { border-color: var(--blue); background: var(--blue-50); }

.pills { display: flex; flex-wrap: wrap; gap: .55rem; }
.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .52rem .9rem; border: 1.5px solid var(--line);
  border-radius: var(--r-pill); background: var(--mist);
  font-size: .89rem; font-weight: 600; color: var(--ink); cursor: pointer;
  min-height: 44px;   /* was 41px from padding alone */
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pill input { accent-color: var(--blue); width: 15px; height: 15px; margin: 0; }
.pill:hover { border-color: var(--blue-400); }
.pill:has(input:checked) { border-color: var(--blue); background: var(--blue-50); color: var(--blue-700); }

.drop {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .4rem;
  padding: 1.7rem 1rem; border: 2px dashed var(--line);
  border-radius: var(--r-sm); background: var(--mist);
  cursor: pointer; text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.drop:hover { border-color: var(--blue); background: var(--blue-50); }
.drop:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; border-color: var(--blue); }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop i { font-size: 1.45rem; color: var(--blue); }
.drop b { font-size: .92rem; color: var(--ink); }
.drop small { font-size: .78rem; color: var(--ink-soft); }
.drop.has-file { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.drop.has-file i, .drop.has-file b { color: var(--ok); }

.agree {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1rem 1.1rem; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); background: var(--mist); margin-bottom: .8rem;
}
.agree input { margin: 2px 0 0; accent-color: var(--blue); width: 24px; height: 24px; flex: none; }
.agree label { font-size: .9rem; color: var(--ink-soft); line-height: 1.55; }
.agree label b { color: var(--ink); }
.agree:has(input:checked) { border-color: var(--blue); background: var(--blue-50); }

.form-actions {
  padding: clamp(1.5rem, 3vw, 2.2rem); background: var(--mist);
  display: flex; flex-direction: column; gap: .9rem; align-items: center;
}
.form-actions .btn { min-width: 290px; }
.form-actions small { color: var(--ink-soft); font-size: .84rem; text-align: center; }

.flash {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .95rem 1.15rem; border-radius: var(--r-sm);
  margin-bottom: .7rem; font-size: .93rem;
}
.flash--error { background: var(--err-bg); border: 1px solid #FDA29B; color: #912018; }
.flash--success { background: var(--ok-bg); border: 1px solid #6CE9B5; color: #05603A; }
.flash i { margin-top: 4px; }

.done-card {
  max-width: 640px; margin: clamp(48px, 8vw, 88px) auto;
  background: var(--white); border-radius: var(--r-xl);
  box-shadow: var(--sh-md); border: 1px solid var(--line);
  padding: clamp(2rem, 5vw, 3.2rem); text-align: center;
}
.done-card .tick {
  width: 76px; height: 76px; margin: 0 auto 1.4rem; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok);
  display: grid; place-items: center; font-size: 2rem;
}
.done-card p { color: var(--ink-soft); }

/* ---------- responsive ---------- */
/* Footer links sat 18px tall with a 10px gap - a 28px pitch, so on a phone
   the neighbouring link is as easy to hit as the one aimed at. Padding does
   the work and the list gap is dropped, so each row is a 44px target without
   the column growing by the full difference. */
@media (pointer: coarse) {
  .footer__links a { display: flex; align-items: center; min-height: 44px; }
  /* 44px targets that abut with no boundary read as one block; the nav
     panel solves this with hairlines, so match it here. */
  .footer__links li { margin-bottom: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .footer__links li:last-child { border-bottom: 0; }
  /* A standalone call to action, not a link inside a sentence. */
  .link-arrow { min-height: 44px; }
}

/* iOS Safari zooms the viewport in when a focused control is under 16px and
   does not zoom back out, so every field below that size traps the visitor
   at 1.2x until they pinch out. Keyed off pointer rather than width, since
   tablets zoom too. 16px exactly - .95rem was 15.2px. */
@media (pointer: coarse) {
  .ctrl, .searchbar__field input { font-size: 16px; }
}

@media (max-width: 1180px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .nav { gap: 1.15rem; }
}
@media (max-width: 1024px) {
  /* minmax(0,...) lets the column shrink below its min-content width;
     a bare 1fr blew past the viewport at 200% text zoom. */
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__figure { order: -1; max-width: 560px; margin-inline: auto; }
  .corner-wedge { width: clamp(64px, 11vw, 92px); }
  /* minmax(0,...) everywhere: a bare 1fr will not go below min-content,
     which is what pushed the page 105px wide at 200% text zoom. */
  .split { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .step { padding-top: 0; padding-left: 4.8rem; min-height: 56px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }

  .nav-toggle { display: grid; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md); padding: .4rem 28px 1.2rem; margin: 0;
  }
  .nav.open { display: flex; }
  .nav > a { padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }
  .nav > a::after { display: none; }

  /* Header bar keeps only the brand + hamburger; the CTAs move into the panel,
     otherwise the action row overflows the viewport on small screens. */
  .header__actions .btn,
  .header__actions .icon-btn:not(.nav-toggle) { display: none; }
  /* .nav > a wins on padding/background/colour, so restate the button
     properties at matching specificity rather than relying on .btn */
  .nav > a.nav__cta {
    display: inline-flex; width: 100%; border-bottom: 0;
    padding: .82rem 1.55rem; justify-content: center;
  }
  .nav > a.btn--primary { background: var(--blue); color: #fff; }
  .nav > a.btn--outline { background: var(--white); color: var(--ink); border-color: var(--line); }
  .nav > a.nav__cta + a.nav__cta { margin-top: .6rem; }
  .nav > a.nav__cta:first-of-type { margin-top: 1rem; }
}
@media (max-width: 760px) {
  .shell { padding-inline: 20px; }
  .nav { padding-inline: 20px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .row--2, .row--3, .choices--2 { grid-template-columns: minmax(0, 1fr); }
  .row--phone { grid-template-columns: 106px 1fr; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .form-actions .btn { min-width: 0; width: 100%; }
  .fs__hint { margin-left: 0; }
  .section-head--split { align-items: flex-start; }

  .searchbar { flex-direction: column; align-items: stretch; border-radius: var(--r-lg); padding: .55rem; gap: .1rem; }
  .searchbar__field { padding-inline: .7rem; }
  .searchbar__sep { width: auto; height: 1px; align-self: stretch; margin: .2rem .7rem; }
  .searchbar .btn { width: 100%; margin-top: .45rem; }

  .quick { gap: .5rem; }
  .quick__item { width: calc(25% - .4rem); }
  .quick__ico { width: 48px; height: 48px; }

  .statstrip {
    display: grid;
    /* auto-fit with a rem-based floor: three across at normal size, and
       as the text scales the floor scales with it, so the row drops to
       two then one instead of pushing the page sideways at 200% zoom. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr));
    gap: .7rem; justify-items: center; text-align: center;
  }
  .statstrip__item { flex-direction: column; gap: .3rem; }
  .statstrip__item + .statstrip__item { border-left: 0; padding-left: 0; }
  .statstrip i { font-size: 1.45rem; }
  .statstrip span { font-size: .76rem; line-height: 1.3; }

  .header__actions .btn--outline { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .card:hover, .svc:hover, .quick__item:hover .quick__ico { transform: none; }
}

/* visually-hidden label text that screen readers still announce */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}