/* ==========================================================================
   Advanced Solutions — stylesheet
   Design tokens carried over from the original Breakdance build.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face { font-family: Poppins; src: url("../fonts/Poppins_400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url("../fonts/Poppins_500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url("../fonts/Poppins_600.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url("../fonts/Poppins_700.woff") format("woff"); font-weight: 700; font-display: swap; }

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Primary is sampled straight from the logo mark. */
  --blue:        #374BA0;
  --blue-lift:   #4A60C0;
  --blue-deep:   #26327A;
  --cyan:        #00CEDB;   /* minor accent only — not in the logo */
  --navy:        #16243d;
  --ink:         #101B30;
  --pale:        #DDE3F5;
  --grey-bg:     #F3F4F6;
  --body:        #374151;
  --heading:     #292B3C;
  /* #5d6470, not the old #6b7280: that missed 4.5:1 on every tinted ground the
     site uses (4.39 on --grey-bg, 4.08 on the quote gradient, 3.77 on --pale).
     This clears all of them — worst is 4.65 on --pale, 5.42 on --grey-bg. */
  --muted:       #5d6470;
  --line:        #e5e7eb;
  --white:       #ffffff;

  /* Decoration only — hairlines, hover rules, accent bars. White text on it
     fails from ~38% across (1.94 at the cyan end). */
  --gradient:    linear-gradient(90deg, var(--blue) 0%, var(--cyan) 100%);
  /* The same blue-to-teal movement stopped short of cyan, for any surface that
     carries text: white holds 5.34 at its worst point, including a button's
     hover position. Cyan stays "never a surface" (README). */
  --gradient-fill: linear-gradient(90deg, var(--blue) 0%, #16739a 100%);

  --shadow-sm:   0 1px 3px rgba(55, 65, 81, .08), 0 1px 2px rgba(55, 65, 81, .06);
  --shadow-md:   5px 5px 25px rgba(55, 65, 81, .17);
  --shadow-lg:   0 18px 50px rgba(22, 36, 61, .13);

  --container:   1120px;
  --gutter:      20px;
  /* Tightened from clamp(56px, 7vw, 100px). The page was 8.5 screens with low
     content density — generous padding was most of the cost. */
  --section-y:   clamp(46px, 5.2vw, 74px);
  --radius:      3px;
  --radius-lg:   14px;
  --speed:       300ms;
}

/* --- Reset ---------------------------------------------------------------- */

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

/* The UA rule for [hidden] is display:none, but any author `display` beats it —
   `.field { display: grid }` was leaving the honeypot and the form status
   message visible on both forms. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--blue); text-decoration: none; transition: color var(--speed) ease; }
a:hover { color: var(--cyan); }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  color: var(--heading);
  font-weight: 600;
  line-height: 1.15;
}
/* h2 was 50px — only 1.25× the h1, so section labels competed with the hero,
   and "Our Approach" ate 62% of the container for two words. 40px keeps the
   hero clearly dominant (1.56×) and still reads as a section head.
   h3's cap came down with it; nothing actually renders at the old 40px, since
   every card overrides h3 to ~19–21px. */
h1 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.9rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.4rem,  1.15rem + 1vw, 1.75rem); font-weight: 700; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* Sticky header would otherwise cover the target of an in-page link. */
[id] { scroll-margin-top: 96px; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- Layout --------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--grey { background: var(--grey-bg); }
.section--navy { background: var(--navy); color: #cbd5e1; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }

.section-head { max-width: 720px; margin-bottom: clamp(26px, 3vw, 42px); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: .75em;
  color: var(--blue);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--cyan);
  border-radius: 2px;
}
/* Centred heads get the rule on both sides so they stay balanced. */
.section-head--center .eyebrow::after,
.cta .eyebrow::after {
  content: "";
  width: 26px; height: 2px;
  background: var(--cyan);
  border-radius: 2px;
}
.section--navy .eyebrow { color: var(--cyan); }
/* --muted is a mid grey chosen against white; on navy it measures 3.21:1, which
   fails AA for body text. The coverage pages are the first to put a lede on a
   dark band. Same value as .section--navy .approach p, which measures 8.96:1. */
.section--navy .lede { color: #b9c6d8; }

.section-head h2 { margin-bottom: .45em; }
.section-head h2:last-child { margin-bottom: 0; }

.lede { font-size: 1.06rem; color: var(--muted); }
.section-head--center .lede { margin-inline: auto; }

.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  transition: all var(--speed) ease-in-out;
}
.btn--primary  { background: var(--blue); color: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.btn--primary:hover  { background: var(--blue-lift); color: #fff; transform: translateY(-1px); }
.btn--gradient { background: var(--gradient-fill); color: #fff; background-size: 150% 100%; }
.btn--gradient:hover { color: #fff; background-position: 100% 0; }
.btn--outline  { border-color: currentColor; color: var(--blue); background: transparent; }
.btn--outline:hover  { background: var(--blue); color: #fff; }
.btn--white    { background: #fff; color: var(--navy); }
.btn--white:hover { background: var(--cyan); color: #fff; }
/* Secondary action on the light hero — reads as a button without competing. */
.btn--ghost {
  background: rgba(255, 255, 255, .72);
  color: var(--navy);
  border-color: rgba(22, 36, 61, .14);
}
.btn--ghost:hover { background: #fff; color: var(--blue); border-color: var(--blue); }
.btn--lg { padding: 18px 36px; }

.link-more {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 600; font-size: .92rem;
}
.link-more .ico { width: .85em; height: .85em; }

/* --- Header / nav --------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
/* A single hairline of brand colour — the only place the gradient survives
   above the fold, so the CTA keeps its meaning. */
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gradient);
}
/* Items stretch to full header height so the Services dropdown, anchored at
   top:100% of its <li>, opens below the gradient hairline instead of 21px up
   inside the bar where it clipped the border. */
.site-header__inner {
  display: flex; align-items: stretch; justify-content: space-between; gap: 24px;
  min-height: 82px;
}

/* --- Brand lockup --------------------------------------------------------- */

.brand { display: inline-flex; align-items: center; gap: 13px; align-self: center; }
.brand__mark {
  width: 46px; height: 46px;
  border-radius: 7px;
  flex: none;
}
.brand__text { line-height: 1.16; }
.brand__text b {
  display: block;
  color: #fff;
  font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em;
}
.brand__text > span {
  display: block;
  color: #8fa1c2;
  font-size: .655rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
}
.brand:hover .brand__text b { color: #fff; }

/* --- Nav ------------------------------------------------------------------ */

.nav { display: flex; align-items: stretch; gap: 30px; }
.nav__list { display: flex; align-items: stretch; gap: 24px; }
.nav__list > li { display: flex; align-items: center; }
.nav__actions { display: flex; align-items: center; gap: 20px; }

/* Phone gets real estate — calling is the conversion path for an agency. */
.header-phone { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.header-phone .ico {
  width: 34px; height: 34px; padding: 9px;
  background: rgba(255, 255, 255, .08);
  border-radius: 50%;
  color: var(--cyan);
  transition: background var(--speed) ease;
}
.header-phone:hover .ico { background: rgba(0, 206, 219, .18); }
.header-phone__text { line-height: 1.2; }
.header-phone__text small {
  display: block;
  color: #8fa1c2;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
}
.header-phone__text b { display: block; color: #fff; font-size: .95rem; font-weight: 600; }
.header-phone:hover .header-phone__text b { color: var(--cyan); }

.nav__list > li > a,
.nav__sub-toggle {
  position: relative;
  display: inline-flex; align-items: center; gap: .35em;
  padding: 10px 0;
  background: none; border: 0;
  color: #dbe4f2;
  font-size: .95rem; font-weight: 500;
  transition: color var(--speed) ease;
}
.nav__list > li > a:hover, .nav__sub-toggle:hover { color: #fff; }

/* Active indicator — a rule under the current section, not a colour swap. */
.nav__list > li > a::after,
.nav__sub-toggle::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed) ease;
}
.nav__list > li > a:hover::after,
.nav__sub-toggle:hover::after { transform: scaleX(1); }

.nav__list > li > a[aria-current] { color: #fff; }
.nav__list > li > a[aria-current]::after { transform: scaleX(1); }

/* Light up "Services" when any coverage page beneath it is the current page. */
.nav__item--has-sub:has(.nav__sub a[aria-current]) > .nav__sub-toggle { color: #fff; }
.nav__item--has-sub:has(.nav__sub a[aria-current]) > .nav__sub-toggle::after { transform: scaleX(1); }

.ico--chev { width: .7em; height: .7em; transition: transform var(--speed) ease; }
[aria-expanded="true"] .ico--chev { transform: rotate(180deg); }

.nav__item--has-sub { position: relative; }
.nav__sub {
  position: absolute; top: 100%; left: -18px;
  min-width: 232px; padding: 10px 0;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--speed) ease;
}
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub,
.nav__sub-toggle[aria-expanded="true"] + .nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__sub a {
  display: block; padding: 9px 22px; color: var(--body); font-weight: 400;
}
.nav__sub a:hover, .nav__sub a[aria-current] { background: var(--pale); color: var(--blue); }

.nav-toggle {
  display: none;
  align-self: center;
  width: 44px; height: 44px;
  background: none; border: 0; padding: 0;
  place-items: center;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block; width: 24px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: all var(--speed) ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* --- Home hero ------------------------------------------------------------ */

.hero {
  position: relative;
  /* Ends on a lighter tint of the logo blue — full --blue here overpowers the
     subject and kills contrast against a light shirt. */
  background: linear-gradient(102deg, #ffffff 0%, #f0f4fc 28%, #adbde3 64%, #6B7EC6 100%);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: end;
  gap: 40px;
  min-height: 560px;
}
/* Soft light behind the subject so the cut-out sits in the scene rather than
   floating on top of a flat gradient. */
.hero::before {
  content: "";
  position: absolute; right: -4%; bottom: 0;
  width: min(640px, 54%); aspect-ratio: 1;
  background: radial-gradient(circle at 50% 55%,
    rgba(255, 255, 255, .46) 0%,
    rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}

.hero__copy {
  position: relative; z-index: 1;
  padding-block: clamp(52px, 6.5vw, 96px);
  max-width: 560px;
}
.hero__title { margin-bottom: .38em; }

/* Underlines a single word, so the rule can never break across two lines. */
.hero__title .accent { position: relative; white-space: nowrap; }
.hero__title .accent::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: .07em;
  height: .14em;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 100%);
}

.hero__text { max-width: 46ch; font-size: 1.05rem; color: #303a4d; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hero__stats {
  display: flex; flex-wrap: wrap; gap: 22px clamp(28px, 5vw, 60px);
  margin-top: 46px; padding-top: 28px;
  border-top: 1px solid rgba(22, 36, 61, .16);
}
.hero__stat b {
  display: block;
  color: var(--navy);
  font-size: 2.1rem; font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
}
.hero__stat span {
  display: block; margin-top: 5px;
  font-size: .78rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: #4a5670;
}

/* A brand-colour panel anchored to the bottom, so the cut-out stands on
   something instead of floating on the gradient. The diagonal edge crops its
   base, which reads as the panel continuing behind the next section. */
.hero__figure { position: relative; z-index: 1; align-self: end; }
/* Must be WIDER than the photo, not narrower. At 4% inset the panel was 456px
   against a 496px figure, so his shoulders overhung both edges and it read as a
   card behind him rather than ground under him. */
.hero__figure::before {
  content: "";
  position: absolute; z-index: 0;
  left: -7%; right: -7%; bottom: 0;
  height: 82%;
  background: linear-gradient(158deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 18px 42px rgba(38, 50, 122, .3);
}
.hero__figure img { position: relative; z-index: 1; margin-inline: auto; }

/* Diagonal echo of the slash running through the logo mark. The wedge has to
   match whatever section follows the hero, or it reads as a stray triangle. */
/* Must sit ABOVE .hero__figure (z-index 1), or the grounding panel paints over
   the wedge and its square bottom corners float on the next section instead of
   being cropped by the diagonal. */
.hero__edge {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: clamp(38px, 5.5vw, 84px);
  background: var(--hero-edge-color, var(--grey-bg));
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* --- Cards ---------------------------------------------------------------- */

.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  position: relative;
  overflow: hidden;
  padding: 34px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease,
              border-color var(--speed) ease;
}
/* Diagonal wash in the corner — the logo's slash again, very quietly. */
.card::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 88px; height: 88px;
  background: linear-gradient(225deg, rgba(0, 206, 219, .16) 0%, rgba(55, 75, 160, 0) 62%);
  pointer-events: none;
}
/* Accent rule that draws in on hover. */
.card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed) ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.card:hover::after { transform: scaleX(1); }

.card h3, .card h4 {
  margin-bottom: .5em;
  font-size: 1.2rem; font-weight: 600;
  letter-spacing: -.01em;
}
.card p { font-size: .95rem; color: var(--muted); }
.card > * { position: relative; z-index: 1; }

.card__icon {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--blue-lift) 0%, var(--blue-deep) 100%);
  color: #fff;
  font-size: 1.75rem;
  box-shadow: 0 10px 20px -7px rgba(55, 75, 160, .62);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease;
}
.card:hover .card__icon {
  transform: translateY(-3px);
  box-shadow: 0 15px 26px -7px rgba(55, 75, 160, .7);
}

/* Feature cards carry an icon and a little more air. */
.card--feature { padding: 36px 30px 34px; }

.card--num .card__icon { font-size: 1.05rem; font-weight: 600; }

/* --- Our Approach: columns, not cards ------------------------------------- */
/* Deliberately unboxed. With cards here, the page ran four boxed grids back to
   back and read as a template. Hairlines give structure without chrome. */

.approach { display: grid; grid-template-columns: repeat(4, 1fr); }
.approach__item { position: relative; padding: 2px 30px; }
.approach__item:first-child { padding-left: 0; }
.approach__item:last-child { padding-right: 0; }

/* Divider fades in from cyan, matching the rule beside the checklists. */
.approach__item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(55, 75, 160, .13) 58%);
}
.approach__item:first-child::before { display: none; }

/* Cyan corner on the icon tile — the same blue-into-cyan move as the header
   hairline and the kicker pills, so the accent reads as brand rather than
   decoration. */
.approach__icon {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: linear-gradient(142deg, var(--cyan) 0%, var(--blue) 58%, var(--blue-deep) 100%);
  color: #fff;
  font-size: 1.75rem;
  box-shadow: 0 10px 22px -7px rgba(0, 150, 175, .55);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease;
}
.approach__item:hover .approach__icon {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -7px rgba(0, 150, 175, .65);
}
.approach h3 { margin-bottom: .4em; font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.approach p { margin: 0; font-size: .95rem; color: var(--muted); }

/* On navy both halves of the divider gradient disappear — the blue end is
   darker than the ground and --muted body text goes unreadable. Same kind of
   variant .section--navy .checklist::before already is. */
.section--navy .approach__item::before {
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(255, 255, 255, .10) 58%);
}
.section--navy .approach p { color: #b9c6d8; }

/* --- Policy parts: what a policy contains --------------------------------- */

/* Coverage pages, not the homepage. Unboxed for the same reason .approach is:
   this section sits between a checklist and an FAQ, and a third bordered grid
   would make the page read as a stack of modules again.
   Named for the job, not for cars — every coverage page has a liability line, a
   damage line and a set of add-ons, so all six reuse this. */
.policy-parts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 0;
  row-gap: clamp(34px, 3.6vw, 46px);
}

.policy-part { position: relative; padding: 2px 30px; }
/* Column starts, not list starts — :first-child alone would only clear the
   left edge of the first row and leave item 4 with a stray rule. */
.policy-part:nth-child(3n + 1) { padding-left: 0; }
.policy-part:nth-child(3n)     { padding-right: 0; }

.policy-part::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(55, 75, 160, .13) 58%);
}
.policy-part:nth-child(3n + 1)::before { display: none; }

/* Smaller than .approach__icon — six of these at 58px turned the section into a
   field of tiles and pulled the eye off the headings. */
.policy-part__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: linear-gradient(142deg, var(--cyan) 0%, var(--blue) 58%, var(--blue-deep) 100%);
  color: #fff;
  font-size: 1.35rem;
  box-shadow: 0 8px 18px -6px rgba(0, 150, 175, .55);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease;
}
.policy-part:hover .policy-part__icon {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px -6px rgba(0, 150, 175, .65);
}

/* Answers "which of these do I actually need?" — the one thing on the page a
   visitor comparing quotes can act on. Same pill shape as
   .service-card__kicker, but on a light ground it needs a border to read. */
.policy-part__tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
/* Only the legal requirement gets brand colour. If all three tags were coloured
   the distinction they exist to draw would vanish. */
.policy-part__tag--required {
  border-color: transparent;
  background: var(--blue);
  color: #fff;
}
.policy-part__tag--lender {
  border-color: rgba(55, 75, 160, .3);
  background: var(--pale);
  color: var(--blue-deep);
}

.policy-part h3 { margin-bottom: .4em; font-size: 1.14rem; font-weight: 600; letter-spacing: -.01em; }
.policy-part p { margin: 0; font-size: .94rem; color: var(--muted); }

/* --- Find Coverage: asymmetric layout ------------------------------------- */

/* Heading left, supporting copy right. Breaks the centred rhythm at zero cost
   to the grid — an earlier version put the intro in a sidebar column, which
   squeezed the cards to 249px. This section is the routing layer into six
   product pages; the cards are the point, so they get the full width. */
.section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(20px, 4vw, 60px);
  /* Bottom-aligned so the copy's last line lands on the heading's baseline.
     With `start` and a nudge, the paragraph floated between the eyebrow and the
     heading, matching neither — no shared line, so the halves read as unrelated. */
  align-items: end;
  max-width: none;
  text-align: left;
}
.section-head--split h2 { margin-bottom: 0; }
.section-head--split .lede { margin: 0; }

/* Centred follow-up line beneath a grid — used under Coverage and Partners. */
.section-followup {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 12px;
  margin: 34px 0 0;
  font-size: .98rem;
  color: var(--muted);
}

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Service cards with a photo */
.service-card {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease,
              border-color var(--speed) ease;
}
/* Accent rule that draws in on hover, matching the feature cards. */
.service-card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed) ease;
  z-index: 4;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.service-card:hover::after { transform: scaleX(1); }

/* 3:2 — keeps real photo presence at full card width while still running
   shorter than the original 4:3. */
.service-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.service-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms ease;
}
.service-card:hover .service-card__media img { transform: scale(1.06); }
/* Scrim so the pill keeps its contrast over any photo. */
.service-card__media::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(16, 27, 48, 0) 0%, rgba(16, 27, 48, .5) 100%);
  z-index: 1;
}

.service-card__kicker {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  padding: 9px 16px 8px;
  background: var(--gradient-fill); color: #fff;
  border-radius: 999px;
  font-size: .68rem; font-weight: 600; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(16, 27, 48, .34);
}

.service-card__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 24px 24px 26px;
}
.service-card__body h3 { margin-bottom: .4em; font-size: 1.28rem; }
.service-card__body p { flex: 1; font-size: .95rem; color: var(--muted); }

.service-card__body .link-more {
  align-self: flex-start;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line);
  width: 100%;
  color: var(--blue);
  font-weight: 600;
}
.service-card:hover .link-more { color: var(--blue-lift); }
.link-more .ico { transition: transform var(--speed) ease; }
.service-card:hover .link-more .ico { transform: translate(3px, -3px); }

/* Whole card is the click target; the visible link stays the accessible name. */
.service-card .link-more::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 3;
}

/* --- Checklist ------------------------------------------------------------ */

/* Set the list apart from the prose above it: a hairline rule and an indent,
   so the bullets read as supporting points rather than more body copy. */
.checklist {
  position: relative;
  display: grid;
  gap: 16px;
  margin-top: 32px;
  padding-left: 26px;
}
/* Rule fades top-to-bottom so it registers without drawing a hard line down
   the whole column. */
.checklist::before {
  content: "";
  position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan) 0%, var(--pale) 72%);
}
.checklist li { display: flex; gap: 15px; align-items: flex-start; font-size: .95rem; }
.checklist .ico {
  width: 24px; height: 24px; padding: 6px;
  margin-top: 1px;
  background: linear-gradient(145deg, var(--blue-lift) 0%, var(--blue-deep) 100%);
  color: #fff;
  border-radius: 50%;
  /* Cyan ring drawn as a shadow so it costs no layout and never squeezes the
     glyph the way a real border would. */
  box-shadow: 0 0 0 1.5px var(--cyan), 0 5px 12px -3px rgba(55, 75, 160, .55);
}
.checklist b { color: var(--heading); font-weight: 600; }

.section--navy .checklist::before {
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(255, 255, 255, .12) 72%);
}
.section--navy .checklist .ico {
  background: rgba(0, 206, 219, .16);
  color: var(--cyan);
  box-shadow: 0 0 0 1.5px rgba(0, 206, 219, .55);
}
.section--navy .checklist b { color: #fff; }

/* --- Split (image + copy) ------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
/* Direct children only — .photo-stack does its own framing. */
.split__media > img,
.split__figure > img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.split--reverse .split__media { order: 2; }

/* For splits where the copy is much taller than the image — the media tracks
   the copy instead of sitting centred in a column of dead space. */
.split--sticky { align-items: start; }
.split--sticky .split__media { position: sticky; top: 112px; }
/* Squarer crop than the source 3:2, so the image fills more of the taller
   column. Sticky alone still left a visible gap in the static view. */
/* The photo is wrapped so its bracket stays sized to the image. The media column
   also holds the quote card, and a percentage-sized accent would stretch with
   the column instead of tracking the photo. */
.split--sticky .split__figure { position: relative; }
.split--sticky .split__figure > img {
  display: block;
  position: relative;
  z-index: 1;            /* the bracket is absolutely positioned, and without
                            this it would paint over the photo */
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Accents so the photo is framed rather than floating in white space. The media
   column is the outer one, so both lean left into the page margin rather than
   crowding the copy, and they bracket the column diagonally — the rule sits at
   the top of the photo, the dots at the foot of the whole column. */

/* Corner bracket, offset outside the top-left. A full outline would fight the
   photo's own rounded corners; two sides read as a frame without boxing it in. */
.split--sticky .split__figure::after {
  content: ""; position: absolute; pointer-events: none;
  top: -15px; left: -15px;
  width: 44%; height: 38%;
  border-top: 3px solid var(--blue);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-lg) 0 0 0;
}

/* Dots on the opposite top corner, diagonally across from the pair at the foot
   of the column. Most of the patch is behind the photo — only the band that
   clears the edge shows, which is what makes it wrap the corner rather than sit
   on the image. */
.split--sticky .split__figure::before {
  content: ""; position: absolute; pointer-events: none;
  top: -18px; right: -18px;
  width: 150px; height: 112px;
  background-image: radial-gradient(var(--blue) 1.9px, transparent 1.9px);
  background-size: 15px 15px;
  opacity: .38;
}

/* Dot grid at the bottom of the column — same motif and same 15px pitch as the
   photo stacks, so the page repeats one texture instead of introducing a second.
   Sized in px, not %, so it does not grow with the column. */
.split--sticky .split__media::before {
  content: ""; position: absolute; pointer-events: none;
  left: -18px; bottom: -18px;
  width: 180px; height: 132px;
  background-image: radial-gradient(var(--blue) 1.9px, transparent 1.9px);
  background-size: 15px 15px;
  opacity: .38;
}

/* Compact supporting quote, filling what used to be dead space under the photo.
   Deliberately quieter than .quote-card on the homepage — this is a footnote to
   the photograph, not a testimonial section of its own.
   z-index because the dot grid is absolutely positioned and would otherwise
   paint over it. */
.story-quote {
  position: relative; z-index: 1;
  margin: 30px 0 0;
  padding: 20px 24px 18px;
  background: var(--grey-bg);
  border-radius: var(--radius-lg);
}
.story-quote__mark { width: 25px; height: 25px; color: var(--cyan); opacity: .6; }
.story-quote blockquote {
  margin: 6px 0 15px;
  color: #303a4d;
  font-size: .94rem; line-height: 1.62;
}
.story-quote figcaption { display: flex; align-items: center; gap: 12px; }
.story-quote__avatar {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gradient-fill);
  color: #fff;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
}
.story-quote__who b {
  display: block;
  color: var(--heading);
  font-size: .93rem; font-weight: 600;
}
.story-quote__who > span {
  display: block; margin-top: 2px;
  font-size: .67rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue);
}

/* The photo's bracket, mirrored onto the opposite corner of the column, so the
   composition is closed at both ends instead of only at the top. */
.story-quote::after {
  content: ""; position: absolute; pointer-events: none;
  bottom: -15px; right: -15px;
  width: 44%; height: 54%;
  border-bottom: 3px solid var(--blue);
  border-right: 3px solid var(--blue);
  border-radius: 0 0 var(--radius-lg) 0;
}


/* Does the same job as .story-quote — fills the column under a sticky photo —
   but carries a fact rather than a review. The coverage pages argue about risk,
   and a testimonial there would be answering a question nobody asked yet.
   z-index for the same reason: the column's dot grid is absolutely positioned
   and would otherwise paint over this. */
.fact-note {
  position: relative; z-index: 1;
  margin: 30px 0 0;
  padding: 26px 28px 24px;
  background: var(--pale);
  border-radius: var(--radius-lg);
}

/* Corner bracket mirroring the photo's, so the column is closed at both ends.
   Same placement rule as .story-quote::after — diagonally opposite the
   bracket at the top-left of the photo. */
.fact-note::after {
  content: ""; position: absolute; pointer-events: none;
  bottom: -15px; right: -15px;
  width: 40%; height: 52%;
  border-bottom: 3px solid var(--blue);
  border-right: 3px solid var(--blue);
  border-radius: 0 0 var(--radius-lg) 0;
}

.fact-note__icon { width: 26px; height: 26px; color: var(--blue); }

/* Sized against the h3 step rather than the h2 — this supports the copy column,
   it does not compete with the heading over there. */
.fact-note__stat {
  display: block;
  margin: 10px 0 6px;
  color: var(--blue-deep);
  font-size: 1.55rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15;
}
.fact-note p { margin: 0; font-size: .93rem; color: #495468; }

/* The intro paragraph reads as a lede so there is real hierarchy between it
   and the bullets underneath. Scoped to the one directly after the heading —
   the coverage pages also put a button in a trailing <p>. */
.split__copy > h2 + p {
  font-size: 1.06rem;
  line-height: 1.72;
  color: #303a4d;
}
.section--navy .split__copy > h2 + p { color: #d3ddec; }

/* --- Overlapping photo pair ----------------------------------------------- */

.photo-stack {
  position: relative;
  width: 100%;
  max-width: 545px;
  aspect-ratio: 1 / 1.06;
  margin-inline: auto;
}
/* Dot grid in the empty bottom-left corner — reads as deliberate texture,
   where a filled panel behind the photos just read as a smudge. */
.photo-stack::before {
  content: "";
  position: absolute; left: -1%; bottom: -2%;
  width: 33%; height: 27%;
  background-image: radial-gradient(var(--blue) 1.9px, transparent 1.9px);
  background-size: 15px 15px;
  opacity: .38;
}
/* Dark blue dots vanish on the navy section — switch to cyan and lift them. */
.section--navy .photo-stack::before {
  background-image: radial-gradient(var(--cyan) 1.9px, transparent 1.9px);
  opacity: .6;
}

.photo-stack figure {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 7px solid #fff;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 46px rgba(22, 36, 61, .22);
}
.photo-stack img { width: 100%; height: 100%; object-fit: cover; }

/* The offset is load-bearing: the front photo must clear the top of the back
   one, or it crops the mother's face out of the frame. */
.photo-stack__back {
  top: 0; left: 0;
  width: 61%; height: 81%;
  transform: rotate(-2.5deg);
  z-index: 1;
}
.photo-stack__front {
  right: 0; bottom: 0;
  width: 67%; height: 81%;
  z-index: 2;
}

/* --- Attribution ---------------------------------------------------------- */

.person {
  display: flex; align-items: center; gap: 17px;
  margin-top: 34px; padding-top: 28px;
  border-top: 1px solid var(--line);
}
.person img {
  width: 62px; height: 62px;
  border-radius: 50%; object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(22, 36, 61, .18);
}
.person b { display: block; color: var(--heading); font-size: 1.02rem; }
.person span {
  display: block;
  font-size: .74rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue);
}
.section--navy .person { border-top-color: rgba(255, 255, 255, .14); }
.section--navy .person b { color: #fff; }
.section--navy .person span { color: var(--cyan); }

/* --- Team strip (homepage) ------------------------------------------------ */
/* The condensed counterpart to the full team grid on /about-us/.
   Five people don't fit side-by-side as portrait-beside-name (~245px each),
   so each person stacks: portrait over name, five equal columns, the link
   centred underneath. Flex so a short row centres — 2 + 2 + 1 at ≤767px. */

.team-strip {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(26px, 3vw, 34px);
  margin-top: clamp(44px, 5vw, 68px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.team-strip__people {
  --strip-cols: 5;
  --strip-gap: 24px;
  display: flex; flex-wrap: wrap; justify-content: center;
  width: 100%;
  gap: 28px var(--strip-gap);
}
.team-strip__people > li {
  flex: 0 0 calc((100% - var(--strip-gap) * (var(--strip-cols) - 1)) / var(--strip-cols));
}
/* Each person is a link to the team on /about-us/ — the hover lift implied it
   was clickable, so now it is. .person carries its own divider for the
   attribution use; not wanted in a row. */
.team-strip .person {
  flex-direction: column; text-align: center;
  margin: 0; padding: 4px 0; border: 0; gap: 14px;
  border-radius: var(--radius-lg);
}
/* Larger than the inline attribution use — at 62px the faces were unreadable. */
.team-strip .person img {
  width: 88px; height: 88px;
  border-width: 4px;
  box-shadow: 0 6px 20px rgba(22, 36, 61, .2);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease;
}
/* Cyan ring sits outside the white border rather than replacing it, so the
   portrait gains a highlight instead of swapping one frame for another. */
.team-strip .person:hover img,
.team-strip .person:focus-visible img {
  transform: translateY(-5px);
  box-shadow: 0 0 0 3px var(--cyan), 0 14px 30px rgba(22, 36, 61, .3);
}
.team-strip .person { transition: color var(--speed) ease; }
.team-strip .person:hover b,
.team-strip .person:focus-visible b { color: var(--blue); }
.team-strip .person:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.team-strip .person b { font-size: 1.06rem; }
.team-strip .link-more { font-size: .92rem; }

/* --- Team ----------------------------------------------------------------- */

/* Portrait crop with the name plate overlapping the photo's lower edge —
   plain image-over-caption read as a contact sheet rather than a team. */
.team-card { position: relative; padding-bottom: 30px; }

/* A second card offset behind the portrait — the hero's "stand him on brand
   colour" move at card scale. It gives the card the colour weight a white plate
   on a grey section otherwise lacks.
   The height comes from the pseudo-element's OWN aspect-ratio rather than a
   percentage of .team-card. A percentage would resolve against the card box,
   which is the portrait plus 30px of padding for the name plate — so the
   backing would finish below the portrait and leave a strip of gradient running
   down beside the plate. Sized this way it owes nothing to the plate's height.
   4/4.2 stops it clear of the plate entirely; the portrait's own ratio is 4/5.
   The offset is deliberately small — the exposed strip is the whole effect, and
   past about 8px it starts to read as a slab rather than a second card. */
.team-card::before {
  content: "";
  position: absolute; z-index: 0;
  top: -7px; right: -7px;
  width: 100%;
  aspect-ratio: 4 / 4.2;
  border-radius: var(--radius-lg);
  background: linear-gradient(142deg, var(--cyan) 0%, var(--blue) 55%, var(--blue-deep) 100%);
  transition: transform var(--speed) ease;
}
.team-card:hover::before { transform: translate(3px, -3px); }

.team-card__photo {
  position: relative; z-index: 1;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--pale);
}
.team-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%;
  transition: transform 700ms ease;
}
.team-card:hover .team-card__photo img { transform: scale(1.05); }
/* Scrim so the plate has something to sit against on light photos. */
.team-card__photo::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(180deg, rgba(16, 27, 48, 0) 0%, rgba(16, 27, 48, .34) 100%);
}

.team-card__name {
  position: absolute; z-index: 2;
  left: 18px; right: 18px; bottom: 0;
  overflow: hidden;                 /* clips the accent rule to the radius */
  padding: 15px 18px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 26px rgba(22, 36, 61, .16);
  text-align: center;
  transition: transform var(--speed) ease, box-shadow var(--speed) ease;
}
/* Same bottom-edge accent as .service-card, so hover behaves the way it does
   everywhere else on the site. */
.team-card__name::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed) ease;
}
.team-card:hover .team-card__name {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(22, 36, 61, .22);
}
.team-card:hover .team-card__name::after { transform: scaleX(1); }
.team-card__name b {
  display: block;
  color: var(--heading);
  font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em;
}
.team-card__name span {
  display: block; margin-top: 3px;
  font-size: .71rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue);
}

/* Five people, one row on desktop. Flex rather than grid so a short last row
   (3 + 2 at tablet, 2 + 2 + 1 on phones) centres instead of hanging left.
   At ~200px a card is too narrow for the three-across plate, so the plate
   insets and the type step down. 34px row gap clears the 7px backing overhang. */
.team-grid {
  --team-cols: 5;
  --team-gap: 22px;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 34px var(--team-gap);
}
.team-grid > .team-card {
  flex: 0 0 calc((100% - var(--team-gap) * (var(--team-cols) - 1)) / var(--team-cols));
}
.team-grid .team-card__name { left: 10px; right: 10px; padding: 12px 8px; }
.team-grid .team-card__name b { font-size: .98rem; }
.team-grid .team-card__name span { font-size: .64rem; letter-spacing: .1em; }

/* --- Visit the office (About) --------------------------------------------- */
/* Hairline columns, same language as Our Approach — the page already has
   enough boxed grids. */

.visit { display: grid; grid-template-columns: repeat(3, 1fr); }
.visit__item { position: relative; padding: 2px 32px; }
.visit__item:first-child { padding-left: 0; }
.visit__item:last-child { padding-right: 0; }
.visit__item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 6px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(55, 75, 160, .13) 58%);
}
.visit__item:first-child::before { display: none; }

.visit__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 18px;
  border-radius: 15px;
  background: linear-gradient(142deg, var(--cyan) 0%, var(--blue) 58%, var(--blue-deep) 100%);
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 10px 22px -7px rgba(0, 150, 175, .55);
}
.visit__item b { display: block; margin-bottom: .3em; color: var(--heading); font-size: 1.14rem; font-weight: 600; }
.visit__item p { margin: 0 0 12px; font-size: .96rem; color: var(--muted); }

/* --- Partner logos -------------------------------------------------------- */

/* Two logo formats sit in this row, and none of the files carry transparency:
     · wordmarks on white  — Heritage, SageSure, Orion180, Orchid
     · solid colour badges — Progressive, SSIU, Jewelers Mutual, Safeco
   A uniform white tile reconciles them. The wordmarks' own white merges into
   the tile; the badges sit inside it like an app icon, which reads as intent.
   Greyscale was the real culprit — it turned the blue badges into grey mud.
   Four across so eight logos land 4 + 4. */
.logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.logos {
  --logo-tile: 122px;
  --logo-pad: 22px;
}
.logos li {
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  height: var(--logo-tile);
  padding: var(--logo-pad);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease,
              border-color var(--speed) ease;
}
/* Same accent rule as the service cards — draws in from the left on hover. */
.logos li::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed) ease;
}
.logos li:hover::after { transform: scaleX(1); }
/* max-height must be an explicit length, not 100% — as a percentage on a grid
   item it does not resolve, and the square badges rendered at 218px inside a
   108px tile. Keep this in step with --logo-tile and --logo-pad. */
.logos img {
  max-width: 100%;
  max-height: calc(var(--logo-tile) - var(--logo-pad) * 2);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 7px;   /* rounds the solid-background badges */
}
.logos li:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* --- Partner directory ---------------------------------------------------- */

.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Two zones rather than one open box: a white well for the logo and a tinted
   footer for the name. Twenty-four identical white rectangles read as a
   spreadsheet; splitting them gives each card structure without touching the
   part that has to stay plain. */
.partner {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: transform var(--speed) ease, box-shadow var(--speed) ease,
              border-color var(--speed) ease;
}

/* The well stays white in every state. None of the logo files carries
   transparency — most are opaque white rectangles — so a tinted well would
   show each logo's own white box floating inside it. */
.partner__well {
  display: grid; place-items: center;
  padding: 26px 20px 22px;
}
.partner::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed) ease;
}
/* Full colour here, unlike the muted strip on the homepage. This page exists so
   people can identify carriers, and several of these marks are pale enough to
   disappear under greyscale. */
.partner img {
  width: 100%; height: 74px;
  object-fit: contain;
  transition: transform var(--speed) ease;
}
a.partner:hover img { transform: scale(1.04); }
.partner__name {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  margin-top: auto;
  padding: 12px 14px 14px;
  background: var(--grey-bg);
  border-top: 1px solid var(--line);
  color: var(--heading);
  font-size: .87rem; font-weight: 600; line-height: 1.35;
  transition: background var(--speed) ease, color var(--speed) ease,
              border-color var(--speed) ease;
}
.partner__name .ico {
  width: .78em; height: .78em; opacity: .55;
  transition: transform var(--speed) ease, opacity var(--speed) ease;
}

a.partner:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
a.partner:hover::after { transform: scaleX(1); }
a.partner:hover .partner__name {
  background: var(--pale);
  border-top-color: transparent;
  color: var(--blue);
}
/* Same nudge as .link-more, so an outbound link behaves the same everywhere. */
a.partner:hover .partner__name .ico { opacity: 1; transform: translateX(3px); }

/* Placeholder for a logo we could not identify — deliberately inert. */
.partner--unknown {
  border-style: dashed;
  background: var(--grey-bg);
}
.partner--unknown img { opacity: .38; }
/* The card is uniformly grey, so the footer divider has nothing to divide. */
.partner--unknown .partner__name {
  border-top-color: transparent;
  color: var(--muted); font-weight: 500; font-style: italic;
}

.partner-note {
  max-width: 62ch;
  margin: 36px auto 0;
  text-align: center;
  font-size: .84rem;
  color: var(--muted);
}

/* --- FAQ ------------------------------------------------------------------ */
/* Native <details>, so it works with no JavaScript and stays keyboard- and
   screen-reader-accessible for free. */

.faq { display: grid; gap: 12px; }

.faq__item {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease,
              transform var(--speed) ease;
}
.faq__item:hover { border-color: transparent; box-shadow: var(--shadow-md); }
.faq__item[open] { border-color: transparent; box-shadow: var(--shadow-lg); }

/* Brand rule down the left edge, drawn in when the answer opens. */
.faq__item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan) 0%, var(--blue) 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--speed) ease;
}
.faq__item[open]::before { transform: scaleY(1); }

.faq__item summary {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;                 /* hide the default disclosure triangle */
  color: var(--heading);
  font-size: 1.06rem; font-weight: 600;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--blue); }

/* Subject icon rather than a number. Numbering implied a ranking that does not
   exist — these six questions are not ordered by importance. Four of the icons
   are the ones Our Approach already uses on the homepage (tag = cost, sliders =
   tailoring, headset = people, shield-check = coverage), so the set reads as one
   vocabulary instead of decoration. */
.faq__icon {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--pale);
  color: var(--blue);
  transition: background var(--speed) ease, color var(--speed) ease,
              box-shadow var(--speed) ease;
}
.faq__icon .ico { width: 19px; height: 19px; }

.faq__item[open] .faq__icon {
  background: linear-gradient(142deg, var(--cyan) 0%, var(--blue) 60%, var(--blue-deep) 100%);
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(0, 150, 175, .6);
}

/* Lets the chevron's margin-left:auto push off a real element rather than an
   anonymous text box. */
.faq__q { min-width: 0; }

/* Chevron drawn from borders; auto margin pushes it to the far edge past the
   anonymous text flex item. */
.faq__item summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 10px; height: 10px;
  margin-top: -4px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform var(--speed) ease;
}
.faq__item[open] summary::after { margin-top: 2px; transform: rotate(-135deg); }

/* Indented to sit under the question text, not the number badge:
   24px padding + 40px badge + 18px gap = 82px. Panel stays full width for a
   generous click target; the prose is capped so lines do not run to ~95ch. */
.faq__item > p,
.faq__list { margin: 0 24px 20px 82px; max-width: 76ch; color: var(--muted); font-size: .97rem; }
.faq__item > p + .faq__list { margin-top: -8px; }
.faq__list {
  display: grid; gap: 5px;
  padding-left: 20px;
  list-style: disc;
}

/* --- Testimonials --------------------------------------------------------- */

.quote-card {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  margin: 0;
  padding: 36px 30px 28px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(22, 36, 61, .10);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease;
}
/* Brand cap across the top edge — always on, so the cards read as a set
   rather than waiting for a hover to acquire any colour. */
.quote-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient);
}
.quote-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(22, 36, 61, .18);
}

/* Oversized watermark rather than a timid inline glyph. Bled into the corner
   and kept faint — sitting square behind the first two lines it read as a
   smudge rather than decoration. */
.quote-card__mark {
  position: absolute; top: -10px; right: -8px;
  width: 104px; height: 104px;
  color: var(--pale);
  fill: currentColor;
  opacity: .55;
  pointer-events: none;
}
/* Clamped to 7 lines so one long review cannot stretch its whole row. The text
   is never altered — main.js adds a "Read more" toggle to any card that
   overflows, so the full review stays available verbatim. */
.quote-card blockquote {
  position: relative; z-index: 1;
  flex: 1;
  margin: 0 0 18px;
  font-size: 1.01rem;
  line-height: 1.75;
  color: #303a4d;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}
.quote-card.is-expanded blockquote {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.quote-card__more {
  position: relative; z-index: 1;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 0;
  background: none; border: 0;
  color: var(--blue);
  font-size: .88rem; font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.quote-card__more:hover { color: var(--cyan); }
.quote-card figcaption {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 15px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
/* Monogram rather than a stock photo — inventing faces for real named clients
   would be fabricating. Swap in real avatars only if the client supplies them. */
.quote-card__avatar {
  flex: none;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--blue-lift) 0%, var(--blue-deep) 100%);
  color: #fff;
  font-size: .92rem; font-weight: 600; letter-spacing: .04em;
  box-shadow: 0 0 0 3px #fff, 0 5px 14px -3px rgba(55, 75, 160, .55);
}
.quote-card__who b { display: block; color: var(--heading); font-size: 1.04rem; }
.quote-card__who > span {
  display: block;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue);
}

/* Featured review — spans two columns on navy. The longest review becomes the
   focal point instead of a sizing problem, and the section gains a dark anchor
   on a page that was otherwise six light sections out of eight. */
.quote-card--featured {
  grid-column: span 2;
  background: var(--navy);
  box-shadow: 0 16px 44px rgba(16, 27, 48, .3);
}
.quote-card--featured blockquote {
  color: #dbe4f2;
  font-size: 1.16rem;
  line-height: 1.72;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.quote-card--featured .quote-card__mark { color: rgba(255, 255, 255, .13); }
.quote-card--featured figcaption { border-top-color: rgba(255, 255, 255, .16); }
.quote-card--featured .quote-card__who b { color: #fff; }
.quote-card--featured .quote-card__who > span { color: var(--cyan); }
.quote-card--featured .quote-card__avatar {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .16), 0 5px 14px -3px rgba(0, 0, 0, .4);
}

/* Empty slots — deliberately obvious, so they cannot ship unnoticed.
   No brand cap and no elevation, so they read as holes rather than cards. */
.quote-card--empty {
  background: transparent;
  border: 1px dashed #c3cbd8;
  box-shadow: none;
}
.quote-card--empty::before { display: none; }
.quote-card--empty:hover { transform: none; box-shadow: none; }
.quote-card--empty .quote-card__mark { opacity: .45; }
.quote-card--empty blockquote { color: var(--muted); font-style: italic; }
.quote-card--empty .quote-card__avatar {
  background: #d1d5db; color: #6b7280;
  box-shadow: none;
}
.quote-card--empty .quote-card__who b,
.quote-card--empty .quote-card__who > span { color: var(--muted); }

/* --- Page hero (interior pages) ------------------------------------------- */

.page-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  padding-block: 72px;
  /* --hero-pos lets a page aim its own crop. The band is wide and short on
     desktop, so `center` shows only a narrow horizontal strip of the source,
     and which strip that is matters per photograph. Has no effect below about
     500px, where the image already fits the band's height exactly and cover
     crops horizontally instead. */
  background: var(--navy) var(--hero-pos, center) / cover no-repeat;
  text-align: center;
  color: #fff;
}
/* --hero-scrim lets a page set its own mask strength, the way --hero-pos aims
   its own crop. The gradient always runs 17 points darker at the bottom; the
   variable is the top stop. 55% is the default and what a bright photograph
   needs; the dark generated heroes are washed out by it and set their own — see
   the table in NOTES.md. Each value is the lightest that still measures 3:1 on
   the h1 and 4.5:1 on the breadcrumb at 375, 768, 1265 and 1920px, so don't
   nudge one without re-measuring that page. */
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(22,36,61, var(--hero-scrim, .55)) 0%,
    rgba(22,36,61, calc(var(--hero-scrim, .55) + .17)) 100%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin-bottom: .3em; }

/* One band needs more height than the rest. About's photograph is a full-length
   family — heads at 27% of the frame, the waterline at 61% — and a 340px band
   shows only 27% of the height at 1920px, so the crop had to choose between
   their heads and the beach. 480px holds both. Phones already see the whole
   frame, so this drops back to the shared height below 900px. */
.page-hero--tall { min-height: 480px; }

/* White, not the #cbd5e1 used for supporting text on flat navy: the breadcrumb
   sits on a photograph, as .cta p does, and at #cbd5e1 it missed 4.5:1 on five
   heroes. With colour no longer separating the link from the current page,
   weight does — the 500 the header nav uses for its links. Don't tint the
   current page off-white instead; even #e8eef7 fails on the brightest heroes. */
.breadcrumb {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: .6em; font-size: .9rem; color: #fff;
}
.breadcrumb a { color: #fff; font-weight: 500; }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb li + li::before { content: "/"; margin-right: .6em; opacity: .6; }

/* --- Contact -------------------------------------------------------------- */
/* Band 2 shares .quote-section's gradient with the homepage closer: forms live
   on that surface, so the page you land on after clicking Get A Quote is
   recognisably the same kind of place. What differs is the layout inside — a
   contact block here, the three steps there.

   Body copy is mostly --body here, a choice that predates the --muted fix. */

.contact-layout {
  /* Lifts the form and contact block above .quote-section::before's dots. */
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 52px);
  align-items: start;
}
/* The head spans both columns rather than sitting inside the form column as
   .quote-layout does — the contact block is a peer of the form, not a caption
   to it. */
.contact-layout__head { grid-column: 1 / -1; margin-bottom: 0; }

/* --- The contact block ---------------------------------------------------- */

/* Stretched to the form's height, with the cards stacked as one tight group at
   the BOTTOM, directly above the claims/visit links. Distributing them with
   space-between left three cards floating ~90px apart, reading as unrelated
   boxes rather than one contact block. Bottom rather than top so the block ends
   level with the form, and the links close the column the way the form's note
   closes the card. */
.reach {
  display: grid; gap: 12px;
  align-self: stretch;
  align-content: end;
}

.reach__item {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: center;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid rgba(55, 75, 160, .1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease,
              border-color var(--speed) ease;
}
.reach__icon {
  grid-row: 1 / 4;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 15px;
  background: linear-gradient(142deg, var(--cyan) 0%, var(--blue) 58%, var(--blue-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 22px -7px rgba(0, 150, 175, .55);
}
.reach__icon .ico { width: 23px; height: 23px; }
.reach__label {
  grid-column: 2; align-self: end;
  color: var(--blue);
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
}
.reach__value {
  grid-column: 2; align-self: start;
  color: var(--heading); font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + .5vw, 1.45rem);
  letter-spacing: -.01em;
  word-break: break-word;
}
/* The email is 25 characters; at the phone's size it wraps to three lines in a
   380px column. */
.reach__value--sm { font-size: 1.04rem; letter-spacing: 0; }
.reach__sub { grid-column: 2; color: var(--body); font-size: .92rem; }

/* The phone is the reason this block exists, so it is the one filled card —
   three identical white boxes on a pale ground gave the eye nowhere to land.
   Same idea as the homepage's steps, where only the last one is filled.

   Navy rather than --gradient: white on the gradient's cyan end measures 1.94
   (DEFERRED), and this is the largest text in the column. The colour also
   recurs from band 3 and the footer, so it reads as the page's dark note
   rather than a one-off. */
.reach__item--call {
  background: var(--navy);
  border-color: transparent;
  box-shadow: 0 14px 34px -12px rgba(22, 36, 61, .55);
}
.reach__item--call .reach__label { color: var(--cyan); }
.reach__item--call .reach__value { color: #fff; }
.reach__item--call .reach__go { color: var(--cyan); opacity: .85; }
/* The gradient tile vanishes into navy; on the dark card the icon takes the
   same treatment as .section--navy .checklist .ico. */
.reach__item--call .reach__icon {
  background: rgba(0, 206, 219, .16);
  color: var(--cyan);
  box-shadow: 0 0 0 1.5px rgba(0, 206, 219, .55);
}
.reach__item--call:hover { box-shadow: 0 18px 44px -12px rgba(22, 36, 61, .7); }

/* The arrow marks which of these are actionable — the hours card is not. */
.reach__go {
  grid-column: 3; grid-row: 1 / 4;
  display: grid; place-items: center;
  color: var(--blue);
  opacity: .5;
  transition: transform var(--speed) ease, opacity var(--speed) ease;
}
.reach__go .ico { width: 15px; height: 15px; }
.reach__item:hover .reach__go { transform: translateX(3px); opacity: 1; }

/* Hover is one language: lift, shadow, gradient rule along the bottom edge. */
.reach__item::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed) ease;
}
.reach__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.reach__item:hover::after { transform: scaleX(1); }
/* Not a link, so it does not get the link's affordances. */
.reach__item--static:hover { transform: none; box-shadow: var(--shadow-sm); }
.reach__item--static:hover::after { transform: scaleX(0); }

/* Ties the page's other two destinations into the first screen. The claims link
   matters most: someone with a flooded house should not have to scroll past a
   quote form to find out what to do. */
.reach__more {
  display: grid; gap: 6px;
  margin: 4px 0 0;
  padding-left: 4px;
}
.reach__more p { margin: 0; color: var(--body); font-size: .95rem; }
/* No colour or arrow override: the base `a` rules give the site's standard link
   hover (blue to cyan, arrow still), the same as the homepage's links. A colour
   set here outranks `a:hover` and froze these links at blue. */
.reach__more .link-more { margin-left: .35em; }

/* --- Band 4, claims ------------------------------------------------------- */

.claims {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 56px);
  align-items: start;
}
.claims__h { margin-bottom: .2em; font-size: 1.24rem; }
/* .checklist carries its own 32px top margin, meant for sitting under a
   paragraph rather than straight under a heading. */
.claims .checklist { margin-top: 20px; }

.claims__side { display: grid; gap: 18px; }

/* Placeholder, deliberately obvious — same language as .quote-card--empty and
   .partner--unknown. Transparent rather than filled, so it reads as an empty
   slot rather than a card. */
.claims__pending {
  padding: 24px 24px 22px;
  background: transparent;
  border: 1px dashed #c3cbd8;
  border-radius: var(--radius-lg);
}
.claims__pending b { display: block; margin-bottom: .35em; color: var(--heading); font-size: 1.02rem; }
.claims__pending p { margin: 0; color: var(--muted); font-size: .94rem; font-style: italic; }

.claims__us {
  padding: 26px 24px 24px;
  background: var(--pale);
  border-radius: var(--radius-lg);
}
.claims__us b { display: block; margin-bottom: .35em; color: var(--heading); font-size: 1.08rem; }
.claims__us p { margin: 0 0 14px; color: var(--body); font-size: .95rem; }
.claims__us .link-more { font-size: 1.1rem; }   /* hover: see .reach__more */
.claims__hours { display: block; margin-top: 8px; color: var(--body); font-size: .88rem; }

/* --- Band 3, on navy ------------------------------------------------------ */
/* The homepage stacks the same three steps vertically with an escalating fill
   (white -> --pale -> --blue). Here they run three-across on the page's dark
   band, numbered rather than badged. */

.steps--row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: 0;
  counter-reset: none;
}
.steps--row .step {
  position: relative;
  padding: 30px 28px 28px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-lg);
}
/* A rule that reads as a sequence rather than three unrelated panels. It runs
   between the cards, so it is drawn on all but the last and only when they are
   actually side by side. */
.steps--row .step:not(:last-child)::after {
  content: "";
  position: absolute; top: 50px; right: calc(-1 * clamp(20px, 2.6vw, 32px));
  width: clamp(20px, 2.6vw, 32px); height: 2px;
  background: linear-gradient(90deg, rgba(0, 206, 219, .5), rgba(0, 206, 219, .08));
}
.step__num {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  /* Solid --blue, not --gradient: white on the gradient's cyan end measures
     1.94 and this is a numeral, which is text. On --blue it is 7.85. */
  background: var(--blue);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0, 206, 219, .22);
  color: #fff; font-size: 1.22rem; font-weight: 700; line-height: 1;
}
.steps--row .step h3 { margin-bottom: .4em; font-size: 1.2rem; }
.section--navy .steps--row .step p { color: #b9c6d8; font-size: .95rem; margin: 0; }

/* --- Band 4, the office --------------------------------------------------- */


.locate {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 48px);
  align-items: center;
}
.locate__mapwrap { position: relative; }

.locate__map {
  position: relative; display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
/* Enough to cool OSM's warm default and let the marker win, and no more. The
   first pass was much heavier and washed the map out; the measurements showed
   tint costs almost nothing in label legibility either way, so there is no
   reason to pay for it in colour. Options in _preview/contact-map-tint/. */
.locate__map img {
  display: block; width: 100%; height: auto;
  filter: saturate(.62) contrast(.97) brightness(1.02);
  transition: filter var(--speed) ease;
}
.locate__map::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--pale);
  mix-blend-mode: multiply;
  opacity: .14;
  pointer-events: none;
}
.locate__map:hover img { filter: saturate(.85) contrast(1) brightness(1); }

/* The marker is overlaid rather than baked in: it stays on-palette, and the
   asset stays independent of the treatment. */
.locate__pin {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--blue);
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 20px -6px rgba(22, 36, 61, .6);
}
.locate__pin .ico { width: 21px; height: 21px; }

.locate__attrib {
  margin: 10px 2px 0;
  color: var(--body); font-size: .78rem;
}
.locate__attrib a { color: var(--body); text-decoration: underline; }
.locate__attrib a:hover { color: var(--blue); }

/* The card carries the corner bracket; the map column carries the dot patch,
   bottom-left. Diagonal, never stacked on one corner. */
.locate__card {
  position: relative;
  padding: 34px 32px 32px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.locate__card::before {
  content: "";
  position: absolute; top: -11px; right: -11px;
  width: 62px; height: 62px;
  border-top: 3px solid var(--blue);
  border-right: 3px solid var(--blue);
  border-radius: 0 6px 0 0;
}
.locate__card > * { position: relative; z-index: 1; }

.locate__mapwrap::before {
  content: "";
  position: absolute; left: -18px; bottom: 18px;
  width: 104px; height: 78px;
  background-image: radial-gradient(var(--blue) 1.9px, transparent 1.9px);
  background-size: 15px 15px;
  opacity: .38;
  pointer-events: none;
}

.locate__ico {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: linear-gradient(142deg, var(--cyan) 0%, var(--blue) 58%, var(--blue-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 22px -7px rgba(0, 150, 175, .55);
}
.locate__ico .ico { width: 23px; height: 23px; }

.locate__name {
  display: block; margin-bottom: .35em;
  color: var(--heading); font-size: 1.24rem; font-weight: 600;
}
.locate__addr { margin: 0; color: var(--body); font-size: 1.02rem; }
.locate__near {
  margin: 16px 0 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--body); font-size: .93rem;
}

/* --- Forms ---------------------------------------------------------------- */

.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 500; color: var(--heading); font-size: .92rem; }
.field .req { color: #b91c1c; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 16px;
  font: inherit; font-size: .95rem;
  color: var(--body);
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(73, 104, 169, .18);
}
.field input::placeholder, .field textarea::placeholder { color: #787e8b; }

.form__note { font-size: .85rem; color: var(--muted); }

.field__hint { margin: 0; font-size: .82rem; color: var(--muted); }

/* Errors only — success replaces the whole form with .form-done. Tinted panel
   plus a left rule; #991b1b clears AA on its tint. */
.form__status {
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid;
  border-radius: var(--radius);
  font-size: .92rem;
}
.form__status--error { background: #fef2f2; border-color: #dc2626; color: #991b1b; }
.form__status a { color: inherit; font-weight: 600; text-decoration: underline; }
.btn[disabled] { opacity: .7; cursor: progress; }

/* Thank-you panel that takes the form's place after a send (main.js). It is
   given the form's height inline, so the page below doesn't jump; the content
   centres in that space. Icon tile is the same gradient square as .reach__icon. */
.form-done {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  padding: 24px 8px;
  text-align: center;
}
.form-done__icon {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 18px;
  background: linear-gradient(142deg, var(--cyan) 0%, var(--blue) 58%, var(--blue-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 22px -7px rgba(0, 150, 175, .55);
}
.form-done__icon .ico { width: 28px; height: 28px; }
.form-done__title { margin: 4px 0 0; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); }
.form-done__title:focus { outline: none; }
.form-done p { max-width: 34ch; margin: 0; color: var(--body); }
.form-done p a { font-weight: 600; white-space: nowrap; }
/* A quiet text button — sending again is allowed, not encouraged. */
.form-done__again {
  margin-top: 6px; padding: 4px 2px;
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--blue);
  background: none; border: 0;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--speed) ease;
}
.form-done__again:hover { color: var(--cyan); }

/* --- CTA band ------------------------------------------------------------- */

.cta {
  position: relative;
  /* The cap is what sets this band's height on wide screens, and the band's
     height is what decides how much of the photograph survives. At 82px the
     band was 422px at 1920px wide and showed rows 33–67%: the sun sat on the
     top edge and the group was cut at the chest. At 120px it is 488px and
     shows 31–69%. Only screens wider than ~1367px change; below that 6vw is
     already under the cap. */
  padding-block: clamp(52px, 6vw, 120px);
  background: var(--navy) center / cover no-repeat;
  text-align: center;
  color: #e2e8f0;
}
/* Two layers, so the photo stays visible without losing the text.
   The lakeside shot is bright sky at the top and near-black silhouettes at the
   bottom, so the readability scrim is vertical and tracks that: heaviest where
   the sky blows out, almost absent over the dark foreground. The brand tint
   underneath is light enough to colour the scene rather than bury it.
   Earlier this was a flat 0.82–0.95 wash, which hid the image entirely. */
.cta::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8, 15, 32, .56) 0%,
      rgba(8, 15, 32, .50) 46%,
      rgba(8, 15, 32, .26) 100%),
    linear-gradient(100deg,
      rgba(16, 28, 56, .30) 0%,
      rgba(30, 42, 105, .26) 55%,
      rgba(0, 118, 136, .28) 100%);
}
.cta > * { position: relative; z-index: 1; }
/* White text, cyan rules. Cyan text here measured 3.10–3.87 against the photo
   and scrim (worst pixel, 375–1920px); white measures 5.99–7.49. The rules on
   either side keep the accent — they are not text, so cyan is fine there. */
.cta .eyebrow { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.cta h2 { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .40); }
.cta p {
  max-width: 58ch; margin-inline: auto;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.cta .btn { margin-top: 28px; }

/* --- Get A Quote (homepage closer) ---------------------------------------- */

.quote-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, #f6f8fd 0%, #e6ecf9 100%);
}
/* Dot grid, echoing the accent on the photo stacks so the page carries one
   repeated motif rather than two unrelated textures. */
.quote-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(55, 75, 160, .19) 1.7px, transparent 1.7px);
  background-size: 22px 22px;
  pointer-events: none;
}
.quote-layout {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
}

.steps { display: grid; gap: 16px; margin-top: 6px; }
/* Opaque, not translucent: at .72 / .8 alpha the section's dot grid showed
   through the cards. These are the colours the translucent fills produced over
   the gradient, so the look is unchanged — only the dots are gone. */
.step {
  padding: 22px 26px;
  background: #f8fbfe;
  border: 1px solid rgba(55, 75, 160, .1);
  border-radius: var(--radius-lg);
}
.step__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 8px 17px;
  background: var(--gradient-fill);
  color: #fff;
  border-radius: 9px;
  font-size: .78rem; font-weight: 600; line-height: 1;
}
.step h3 { margin-bottom: .3em; font-size: 1.16rem; }
.step p { margin: 0; font-size: .94rem; color: var(--muted); }

/* Emphasis builds across the three steps, as the original did. */
.step--mid { background: #e0e6f6; }
.step--last {
  background: var(--blue);
  border-color: transparent;
  box-shadow: 0 14px 34px -12px rgba(55, 75, 160, .7);
}
.step--last h3 { color: #fff; }
.step--last p { color: rgba(255, 255, 255, .88); }

/* One component for both forms — the homepage closer and /contact-us/ — so
   they cannot drift apart. The accents started as a Contact-only pass and were
   promoted here when the client asked for the two to match.

   Two accents, both borrowed rather than invented — the 3px gradient rule is
   the card-hover motif held permanently open, and the corner wash is .card's
   diagonal "logo slash". They pull the card out of the flat white-on-pale the
   band otherwise is. `isolation` keeps the wash (z-index -1) above the card's
   own white but below the fields. */
.quote-form-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(26px, 3vw, 36px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 52px rgba(22, 36, 61, .14);
}
.quote-form-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient);
}
.quote-form-card::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 132px; height: 132px;
  background: linear-gradient(225deg, rgba(0, 206, 219, .16) 0%, rgba(55, 75, 160, 0) 62%);
  pointer-events: none;
  z-index: -1;
}

/* --- Footer --------------------------------------------------------------- */

.site-footer { background: var(--navy); color: #94a3b8; font-size: .93rem; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-block: clamp(48px, 6vw, 72px);
}
.brand--footer { margin-bottom: 20px; }
.site-footer__brand p { max-width: 34ch; }
.site-footer__social { display: flex; gap: 12px; margin-top: 22px; }
.site-footer__social a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  background: rgba(255, 255, 255, .07);
  border-radius: 50%;
  font-size: .95rem;
  transition: all var(--speed) ease;
}
.site-footer__social a:hover { background: var(--blue); color: #fff; }
.site-footer__col h2 {
  margin-bottom: 18px;
  color: #fff; font-size: 1rem; font-weight: 600;
  letter-spacing: .04em;
}
.site-footer__col ul { display: grid; gap: 10px; }
.site-footer a { color: #94a3b8; }
.site-footer a:hover { color: var(--cyan); }
.site-footer__bar {
  padding-block: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .85rem;
}
.site-footer__bar p { margin: 0; }

/* --- Floating bits -------------------------------------------------------- */

.quote-tab {
  position: fixed; right: 0; top: 46%; z-index: 40;
  padding: 16px 11px;
  background: var(--blue); color: #fff;
  border-left: 3px solid var(--cyan);
  border-radius: 10px 0 0 10px;
  box-shadow: -4px 4px 18px rgba(16, 27, 48, .26);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  writing-mode: vertical-rl;
  transition: background var(--speed) ease, padding var(--speed) ease;
}
.quote-tab:hover { background: var(--blue-lift); color: #fff; padding-left: 15px; }

.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: #fff; color: var(--blue);
  border: 1px solid var(--line); border-radius: 50%;
  box-shadow: var(--shadow-md);
  font-size: 1.1rem;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all var(--speed) ease;
}
.to-top .ico { transform: rotate(180deg); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* --- Responsive ----------------------------------------------------------- */

/* Between 1024 and 1240 the header runs out of room before the mobile nav
   kicks in — drop the least important pieces first. */
@media (max-width: 1240px) {
  .site-header__inner { gap: 16px; }
  .nav { gap: 20px; }
  .nav__list { gap: 17px; }
  .nav__actions { gap: 14px; }
  .brand__text > span { display: none; }
  .header-phone__text small { display: none; }
}

@media (max-width: 1023px) {
  .quote-layout { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { --team-cols: 3; --team-gap: 26px; }

  .section-head--split { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  /* relative, not static — the accents are positioned against this box, and
     static would send them to the nearest positioned ancestor. */
  .split--sticky .split__media { position: relative; top: auto; }
  /* Container padding is only 20px here, so pull every accent in off the edge. */
  .split--sticky .split__figure::after  { top: -9px; left: -9px; }
  .split--sticky .split__figure::before { top: -10px; right: -10px; width: 120px; height: 92px; }
  .split--sticky .split__media::before  { left: -10px; bottom: -10px; width: 140px; }
  .story-quote::after { bottom: -9px; right: -9px; }

  .visit { grid-template-columns: 1fr; row-gap: 34px; }
  .visit__item { padding: 0; }
  .visit__item::before { display: none; }
  /* 82px of indent is too much at 375px — align to the panel edge instead. */
  .faq__item > p,
  .faq__list { margin-left: 24px; }
  .coverage-grid { grid-template-columns: repeat(2, 1fr); }

  .approach { grid-template-columns: repeat(2, 1fr); row-gap: 38px; }
  .approach__item:nth-child(odd)::before { display: none; }
  .approach__item:nth-child(odd) { padding-left: 0; }
  .approach__item:nth-child(even) { padding-right: 0; }

  /* Two columns, so the rule and the padding move to the even/odd boundary.
     The 3n rules have to be reset explicitly — they are the same specificity
     and would otherwise still be clearing item 4's left edge. */
  .policy-parts { grid-template-columns: repeat(2, 1fr); }
  .policy-part:nth-child(3n + 1) { padding-left: 30px; }
  .policy-part:nth-child(3n)     { padding-right: 30px; }
  .policy-part:nth-child(3n + 1)::before { display: block; }
  .policy-part:nth-child(odd)::before { display: none; }
  .policy-part:nth-child(odd)  { padding-left: 0; }
  .policy-part:nth-child(even) { padding-right: 0; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__inner { grid-template-columns: 1fr; min-height: 0; }
  /* The photo stays on mobile. Hiding it removed the only human face above the
     fold for most visitors, on a business that sells on relationships.
     Cropped to head-and-shoulders — the full figure pushed the hero to 1.4
     viewports, and the face is the part doing the work. */
  .hero__figure { max-width: 320px; margin-inline: auto; }
  .hero__figure img {
    height: 300px;
    object-fit: cover;
    object-position: 50% 8%;
  }
  /* Same rule as desktop: wider than the photo, or it reads as a card behind
     him. Kept to -4% so it cannot push past the viewport at 375px. */
  .hero__figure::before { left: -4%; right: -4%; height: 76%; }
  .hero__copy { padding-bottom: 30px; }

  /* The contact block moves ABOVE the form. On a phone, tap-to-call sitting
     over a seven-field form is the right priority — a deliberate inversion of
     the desktop reading order, not a fallback. */
  .contact-layout { grid-template-columns: 1fr; }
  .contact-layout__head { order: 1; }
  .reach { order: 2; }
  .contact-layout .quote-form-card { order: 3; }

  .claims { grid-template-columns: 1fr; }

  .locate { grid-template-columns: 1fr; }
  /* Stacked, the column is wider than the asset; without a cap the map is
     upscaled past its native 810px and goes soft. */
  .locate__mapwrap { width: 100%; max-width: 810px; margin-inline: auto; }
  /* The bracket would sit under the sticky header's shadow at the top of a
     stacked card, and the dot patch would hang off the viewport edge. */
  .locate__card::before { display: none; }
  .locate__mapwrap::before { left: auto; right: -14px; bottom: -14px; }

  .nav-toggle { display: grid; }

  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(360px, 84vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    padding: 88px 28px 32px;
    background: var(--navy);
    box-shadow: -8px 0 40px rgba(0,0,0,.3);
    transform: translateX(100%);
    transition: transform var(--speed) ease;
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  /* Back to block: the Services item stacks a button above its submenu here,
     and the desktop flex row would sit them side by side. */
  .nav__list > li { display: block; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav__list a, .nav__sub-toggle { width: 100%; padding: 14px 0; justify-content: space-between; }

  .nav__sub {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    display: none;
    min-width: 0; padding: 0 0 10px;
    background: none; box-shadow: none; border-radius: 0;
  }
  .nav__sub-toggle[aria-expanded="true"] + .nav__sub { display: block; }
  .nav__sub a { padding: 10px 0 10px 16px; color: #94a3b8; }
  .nav__sub a:hover, .nav__sub a[aria-current] { background: none; color: var(--cyan); }

  /* The sliding underline reads as noise in a stacked panel. */
  .nav__list > li > a::after,
  .nav__sub-toggle::after { display: none; }
  .nav__list > li > a[aria-current] { color: var(--cyan); }

  .nav__actions {
    flex-direction: column; align-items: stretch; gap: 18px;
    margin-top: 28px;
  }
  .header-phone {
    padding: 14px 16px;
    background: rgba(255, 255, 255, .06);
    border-radius: var(--radius-lg);
  }
  .nav__cta { justify-content: center; }
}

@media (max-width: 900px) {
  .logos { grid-template-columns: repeat(3, 1fr); }
  /* Phones and small tablets already show the whole frame — see .page-hero--tall. */
  .page-hero--tall { min-height: 340px; }
}

@media (max-width: 767px) {
  body { font-size: 15px; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .coverage-grid { grid-template-columns: 1fr; }
  .steps--row { grid-template-columns: 1fr; }
  /* The connector only means anything when the cards are side by side. */
  .steps--row .step:not(:last-child)::after { display: none; }

  /* Label size on screen is 10px × (display width ÷ 810). At 375px the map
     lands at 335px — a 0.41 ratio, so street names render at about 4px and the
     whole point of the tighter render is lost. Crop to the centre instead of
     shrinking the frame: cover holds the scale at 0.69 and the marker is
     centred, so the crop keeps it. */
  .locate__map img { height: 420px; object-fit: cover; }
  .approach { grid-template-columns: 1fr; row-gap: 34px; }
  .approach__item { padding: 0; }
  .approach__item::before { display: none; }

  /* Every reset here has to carry an :nth-child to match the specificity of the
     two-column rules above, or those keep winning and item 4 ships a stray
     divider with 30px of orphaned indent. */
  .policy-parts { grid-template-columns: 1fr; row-gap: 32px; }
  .policy-part,
  .policy-part:nth-child(3n + 1),
  .policy-part:nth-child(3n),
  .policy-part:nth-child(odd),
  .policy-part:nth-child(even) { padding: 0; }
  .policy-part::before,
  .policy-part:nth-child(3n + 1)::before { display: none; }
  .quote-card--featured { grid-column: span 1; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .team-grid { --team-cols: 2; --team-gap: 18px; row-gap: 28px; }
  /* Two, not three — at 375px three columns are ~104px and every name and
     title wraps. Matches .team-grid: 2 + 2 + 1. */
  .team-strip__people { --strip-cols: 2; --strip-gap: 16px; }
  .team-strip .person img { width: 80px; height: 80px; }
  /* Padding belongs to the well now — on .partner it would inset the footer and
     stop it reaching the card edges. */
  .partner__well { padding: 22px 14px 18px; }
  .partner img { height: 62px; }
  /* At 162px wide the longer carrier names wrap to two lines and the short ones
     do not, which left the footer divider at a different height on every card
     in a row. A two-line floor evens them up. */
  .partner__name { min-height: 64px; padding: 10px 10px 12px; }
  .site-header__inner { min-height: 68px; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__text b { font-size: .95rem; }
  .brand__text > span { display: none; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .split--reverse .split__media { order: 0; }
  .quote-tab { display: none; }
  .hero__stats { flex-wrap: wrap; gap: 20px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}