/* ---------- Brand faces, inlined (CSP blocks font CDNs) ---------- */
@font-face{
  font-family:'Varela Round';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/varela-round.woff2') format('woff2');
}
@font-face{
  font-family:'Sora';
  font-style:normal;font-weight:100 800;font-display:swap;
  src:url('fonts/sora.woff2') format('woff2');
}

/* ---------- Tokens ----------
   White is the ground. Black is the type and the two anchor bands.
   Orange is the touch: one button fill, the eyebrow dashes, the hero arc.

   This design commits to light only. color-scheme:light also keeps form
   controls, scrollbars and focus rings light on a dark-mode OS. */
:root{
  color-scheme:light;
  --ink:#0B0B0B;
  --ink-2:#161615;
  --paper:#FFFFFF;
  --grey:#F5F5F4;
  --grey-2:#EDECEA;
  --orange:#FDB059;
  --orange-deep:#F09A34;
  --orange-ink:#8A5410;
  --text:#2F2E2E;
  --muted:#6C6B69;
  --line:#E4E3E0;
  --line-strong:#CAC8C4;

  --surface:var(--paper);
  --surface-alt:var(--grey);
  --surface-sunk:var(--grey-2);
  --on-surface:var(--text);
  --on-surface-muted:var(--muted);
  --border:var(--line);
  --border-strong:var(--line-strong);
  --heading:var(--ink);
  --link:var(--ink);
  --accent:var(--orange);
  --accent-ink:var(--orange-ink);

  --band-ink:var(--ink);
  --band-ink-2:var(--ink-2);
  --on-band:#F6F5F3;
  --on-band-muted:#A6A4A1;

  --shadow-sm:0 1px 2px rgba(11,11,11,.04), 0 6px 16px -10px rgba(11,11,11,.18);
  --shadow-lift:0 2px 4px rgba(11,11,11,.05), 0 20px 44px -20px rgba(11,11,11,.3);

  --display:'Varela Round', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --body:'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1.0625rem;
  --fs-lg:1.25rem; --fs-xl:1.5rem;
  --fs-3xl:clamp(1.9rem,4.2vw,2.9rem);
  --fs-4xl:clamp(2.5rem,5.4vw,4.1rem);

  --wrap:1180px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --r:4px;
  --r-lg:10px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--surface-sunk);
  color:var(--on-surface);
  font-family:var(--body);
  font-size:var(--fs-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;line-height:1.12;color:var(--heading);letter-spacing:-.01em;}
p{margin:0;}
a{color:var(--link);}
img{max-width:100%;display:block;}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:2px;}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}

/* ---------- Comp chrome (not part of the design) ---------- */
.comp-bar{
  position:sticky;top:0;z-index:300;
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;
  padding:.6rem clamp(.9rem,3vw,1.5rem);
  background:#0B0B0B;color:#F6F5F3;
  border-bottom:1px solid rgba(246,245,243,.16);
  font-size:var(--fs-sm);
}
.comp-bar b{font-weight:600;}
.comp-bar .dot{color:var(--orange);}
.comp-bar-meta{color:#A6A4A1;}
.comp-tools{display:flex;gap:.5rem;flex-wrap:wrap;}
.comp-btn{
  font:inherit;font-weight:600;cursor:pointer;
  background:transparent;color:#F6F5F3;
  border:1px solid rgba(246,245,243,.4);border-radius:999px;
  padding:.3rem .85rem;
}
.comp-btn:hover{border-color:var(--orange);color:var(--orange);}
.comp-btn[aria-pressed="true"]{background:var(--orange);color:#0B0B0B;border-color:var(--orange);}

.note{display:none;}
body.notes-on .note{
  display:block;
  background:var(--surface-alt);
  border-left:3px solid var(--orange);
  padding:.85rem 1.1rem;
  font-size:var(--fs-sm);line-height:1.55;
}
body.notes-on .note b{font-family:var(--display);font-weight:400;font-size:var(--fs-base);display:block;color:var(--heading);}
body.notes-on .note span{color:var(--on-surface-muted);}
body.notes-on .note strong{color:var(--on-surface);}
body.notes-on .note .tag{
  display:inline-block;background:var(--ink);color:#FFFFFF;
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.15rem .45rem;border-radius:3px;margin-right:.4rem;vertical-align:1px;
}
/* The rail itself must collapse too, or its padding leaves an empty strip
   across the page while the notes inside are hidden. */
.note-rail{display:none;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);}
body.notes-on .note-rail{display:block;}

/* ---------- The mock, and its phone-preview mode ---------- */
.mock{
  container-type:inline-size;
  background:var(--surface);
  margin-inline:auto;
  max-width:100%;
  /* clip, not hidden: clip does not create a scroll container, so the sticky
     header keeps working while stray overflow is still contained */
  overflow-x:clip;
  transition:max-width .3s ease;
}
body.mobile-mode .mock{
  max-width:402px;
  margin-block:1.75rem 6rem;
  border:11px solid #111111;
  border-radius:38px;
  overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
body.mobile-mode .note-rail{max-width:520px;}

/* ---------- Shared ---------- */
.eyebrow{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-surface-muted);margin:0 0 1rem;
  display:flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);flex:none;}
.eyebrow.on-dark{color:var(--on-band-muted);}
.lede{font-size:var(--fs-md);color:var(--on-surface-muted);line-height:1.7;max-width:60ch;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-size:var(--fs-base);font-weight:700;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  padding:.85rem 1.6rem;border-radius:var(--r);border:2px solid transparent;
  transition:transform .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn-accent{background:var(--orange);color:#0B0B0B;border-color:var(--orange);}
.btn-accent:hover{background:var(--orange-deep);border-color:var(--orange-deep);transform:translateY(-1px);}
.btn-dark{background:var(--ink);color:#FFFFFF;border-color:var(--ink);}
.btn-dark:hover{background:#000;border-color:#000;transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--heading);border-color:var(--border-strong);}
.btn-outline:hover{border-color:var(--heading);}
.btn-invert{background:#FFFFFF;color:#0B0B0B;border-color:#FFFFFF;}
.btn-invert:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-1px);}
.btn-invert-outline{background:transparent;color:var(--on-band);border-color:rgba(246,245,243,.38);}
.btn-invert-outline:hover{border-color:#FFFFFF;color:#FFFFFF;}
@media (prefers-reduced-motion: reduce){
  .btn,.cat,.qcard{transition:none;}
  .btn:hover,.cat:hover,.qcard:hover{transform:none;}
}

.section{padding-block:clamp(3rem,6.5vw,5rem);}
.section-alt{background:var(--surface-alt);}
.section-dark{background:var(--band-ink);color:var(--on-band);}
.section-dark h2,.section-dark h3{color:#FFFFFF;}
.section-dark .lede{color:var(--on-band-muted);}
.section-head{max-width:58ch;margin-bottom:clamp(1.75rem,3.5vw,2.75rem);}
.section-head h2{font-size:var(--fs-3xl);margin-bottom:.9rem;}

.shot{overflow:hidden;background:var(--surface-alt);border-radius:var(--r-lg);}
.shot img{width:100%;height:100%;object-fit:cover;}

.photo{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--surface-alt);border:1px dashed var(--border-strong);
  border-radius:var(--r-lg);overflow:hidden;
}
.photo::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg, transparent 0 13px, color-mix(in srgb, var(--on-surface) 5%, transparent) 13px 14px);
}
.photo-tag{
  position:relative;margin:auto auto 0;width:100%;padding:.7rem .85rem;
  background:rgba(11,11,11,.9);color:#F6F5F3;display:flex;gap:.6rem;align-items:flex-start;
}
.photo-tag svg{flex:none;margin-top:2px;color:var(--orange);}
.photo-tag .n{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);display:block;}
.photo-tag .b{font-size:var(--fs-sm);line-height:1.4;color:#F6F5F3;}

/* ---------- Header: white ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-top{
  display:flex;align-items:center;justify-content:flex-end;gap:1.25rem;
  padding:.4rem 0;font-size:var(--fs-xs);color:var(--on-surface-muted);
  border-bottom:1px solid var(--border);
}
.header-top a{color:var(--on-surface-muted);text-decoration:none;}
.header-top a:hover{color:var(--heading);}
.header-main{display:flex;align-items:center;gap:1.5rem;padding:.8rem 0;}
.brand{display:flex;align-items:center;gap:.85rem;flex:none;text-decoration:none;}
.brand img{height:34px;width:auto;}
/* Endorsement lockup: Chapman is the voice, SurNet the parent group */
.brand .rule{width:1px;height:46px;background:var(--border-strong);flex:none;}
.brand .parent{display:flex;align-items:center;}
.brand .parent img{height:50px;}

/* SurNet endorsement band */
.surnet-band{border-block:1px solid var(--border);background:var(--surface);}
.surnet-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2rem;
  padding-block:1.6rem;text-align:center;
}
.surnet-inner img{height:66px;width:auto;}
.footer-surnet{display:flex;align-items:center;gap:.75rem;}
.footer-surnet img{height:38px;width:auto;filter:brightness(0) invert(1);opacity:.9;}
.footer-surnet span{font-size:var(--fs-sm);color:#7D7B79;max-width:16ch;line-height:1.35;}
.footer-brand img{filter:invert(1);}

.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto;}
.nav-item{position:relative;}
.nav-link{
  display:flex;align-items:center;gap:.35rem;
  font-size:var(--fs-base);font-weight:600;color:var(--heading);text-decoration:none;
  padding:.7rem .8rem;border-bottom:2px solid transparent;
}
.nav-item:hover>.nav-link,.nav-item:focus-within>.nav-link,.nav-link:hover{border-bottom-color:var(--orange);}
.nav-link svg{opacity:.45;}
.dropdown{
  position:absolute;top:100%;left:0;min-width:252px;
  background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--orange);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--shadow-lift);padding:.5rem;display:none;
}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{display:block;}
.dropdown a{
  display:block;padding:.55rem .7rem;border-radius:var(--r);
  color:var(--on-surface);text-decoration:none;font-size:var(--fs-base);font-weight:500;
}
.dropdown a:hover{background:var(--surface-alt);color:var(--heading);}
.dropdown .all{border-top:1px solid var(--border);margin-top:.35rem;padding-top:.6rem;font-weight:700;color:var(--heading);}
.header-cta{display:flex;align-items:center;gap:.9rem;flex:none;}
.header-phone{display:flex;flex-direction:column;line-height:1.15;text-decoration:none;color:var(--heading);}
.header-phone .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface-muted);}
.header-phone .num{font-family:var(--display);font-size:var(--fs-md);}
.burger{display:none;}
.burger .ico-close{display:none;}
body.nav-open .burger .ico-open{display:none;}
body.nav-open .burger .ico-close{display:block;}

/* ---------- Mobile menu ---------- */
.mobilenav{display:none;border-top:1px solid var(--border);background:var(--surface);}
.mobilenav-inner{display:flex;flex-direction:column;padding-block:.5rem 1rem;}
.mobilenav a{
  padding:.85rem .1rem;text-decoration:none;color:var(--heading);
  font-family:var(--display);font-size:1.15rem;
  border-bottom:1px solid var(--border);
}
.mobilenav a:active{color:var(--orange-ink);}
.mobilenav-sep{height:.6rem;}
.mobilenav-cta{display:flex;flex-direction:column;gap:.55rem;margin-top:1rem;}
.mobilenav-cta .btn{width:100%;}
@keyframes navDrop{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--surface);}
.hero-grid{
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;
  padding-top:clamp(2.5rem,5vw,4rem);
}
.hero h1{font-size:var(--fs-4xl);margin-bottom:1.25rem;letter-spacing:-.025em;line-height:1.04;}
.hero h1 .mark{position:relative;white-space:nowrap;}
.hero h1 .mark::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;
  background:var(--orange);z-index:-1;border-radius:2px;
}
.hero p.lede{max-width:44ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem;}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.75rem;
  font-size:var(--fs-sm);color:var(--on-surface-muted);
}
.hero-trust span{display:flex;align-items:center;gap:.4rem;}
.hero-trust svg{color:var(--heading);flex:none;}

.hero-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:470px;}
.hero-stage::before{
  content:"";position:absolute;z-index:0;
  width:min(92%,470px);aspect-ratio:1;border-radius:50%;
  background:var(--surface-alt);
  left:50%;top:50%;transform:translate(-50%,-46%);
}
.hero-stage::after{
  content:"";position:absolute;z-index:0;
  width:min(98%,508px);aspect-ratio:1;border-radius:50%;
  border:2px solid var(--orange);
  clip-path:polygon(0 0,100% 0,100% 46%,0 46%);
  left:50%;top:50%;transform:translate(-50%,-46%) rotate(-14deg);
}
.hero-cutout{position:relative;z-index:1;width:min(100%,480px);height:auto;}
.hero-chip{
  position:absolute;z-index:2;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);padding:.7rem .9rem;
  display:flex;align-items:center;gap:.6rem;
}
.hero-chip .n{font-family:var(--display);font-size:var(--fs-lg);color:var(--heading);line-height:1;font-variant-numeric:tabular-nums;}
.hero-chip .t{font-size:var(--fs-xs);color:var(--on-surface-muted);line-height:1.25;max-width:12ch;}
.chip-a{left:0;top:16%;}
.chip-b{right:0;bottom:16%;}
.hero-chip .tick{
  width:26px;height:26px;border-radius:50%;background:var(--orange);
  display:flex;align-items:center;justify-content:center;color:#0B0B0B;flex:none;
}

/* ---------- Quick select ---------- */
.qwrap{padding-bottom:clamp(2.5rem,5vw,3.5rem);}
.qhead{
  font-family:var(--display);font-size:var(--fs-lg);color:var(--heading);
  margin-bottom:1rem;display:flex;align-items:center;gap:.6rem;
}
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;}
.qcard{
  display:flex;align-items:center;gap:.75rem;
  padding:1rem 1.1rem;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  text-decoration:none;color:var(--heading);font-weight:700;
  box-shadow:var(--shadow-sm);
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.qcard:hover{transform:translateY(-2px);border-color:var(--heading);box-shadow:var(--shadow-lift);}
.qcard svg{color:var(--heading);flex:none;}
.qcard .go{margin-left:auto;color:var(--on-surface-muted);}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);}
.stat{display:flex;flex-direction:column;gap:.3rem;}
.stat .fig{font-family:var(--display);font-size:clamp(2.1rem,4vw,3rem);color:#FFFFFF;line-height:1;font-variant-numeric:tabular-nums;}
.stat .fig em{font-style:normal;color:var(--orange);}
.stat .cap{color:var(--on-band-muted);font-size:var(--fs-base);max-width:26ch;}

/* ---------- Category cards ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.cat{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:var(--on-surface);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--heading);}
.cat .photo,.cat .shot{aspect-ratio:3/2;border:0;border-radius:0;border-bottom:1px solid var(--border);}
.cat-body{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1;}
.cat-body h3{font-size:var(--fs-xl);}
.cat-body p{font-size:var(--fs-base);color:var(--on-surface-muted);line-height:1.6;}
.cat-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;}
.cat-list li{font-size:var(--fs-sm);color:var(--on-surface-muted);border:1px solid var(--border);border-radius:999px;padding:.15rem .6rem;}
.cat-go{margin-top:auto;padding-top:.9rem;font-weight:700;color:var(--heading);display:flex;align-items:center;gap:.4rem;font-size:var(--fs-base);}
.cat-wide{
  grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
  padding:1.25rem 1.4rem;background:var(--surface-alt);
  border:1px solid var(--border);border-radius:var(--r-lg);
  text-decoration:none;color:var(--on-surface);
}
.cat-wide:hover{border-color:var(--heading);}
.cat-wide h3{font-size:var(--fs-lg);}
.cat-wide p{font-size:var(--fs-base);color:var(--on-surface-muted);flex:1;min-width:15rem;}

/* ---------- Carrier wall ---------- */
/* Grid lines drawn per tile rather than by a 1px gap, so an incomplete
   last row leaves white space instead of a stray grey block. */
.carriers{
  display:grid;grid-template-columns:repeat(7,1fr);
  background:#FFFFFF;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
}
/* Logo chips stay white in both themes: most carrier marks are dark-on-transparent
   and several ship with a baked-in white background. */
.carrier{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  background:#FFFFFF;min-height:122px;padding:1rem .9rem;
  text-decoration:none;text-align:center;transition:background-color .12s ease;
  box-shadow:1px 0 0 var(--border), 0 1px 0 var(--border);
}
.carrier:hover{background:#FAFAF9;}
/* Logos stay in full colour and simply lift on hover.
   Height is normalised by aspect: a stacked square mark capped at the same
   height as a long wordmark reads about half the size, so compact logos are
   allowed to grow. Wide wordmarks hit the tile width first regardless. */
.carrier img,.carrier .wm{
  max-height:40px;max-width:100%;width:auto;object-fit:contain;
  transition:transform .18s ease, filter .18s ease;
}
.carrier img.lg{max-height:52px;}   /* ratio roughly 2.5 to 3   */
.carrier img.xl{max-height:66px;}   /* ratio under 2, stacked   */
.carrier:hover img,.carrier:focus-visible img,
.carrier:hover .wm,.carrier:focus-visible .wm{
  transform:scale(1.09);
  filter:drop-shadow(0 6px 12px rgba(11,11,11,.20));
}
.carrier .wm{max-height:none;display:flex;flex-direction:column;align-items:center;gap:.3rem;}
.carrier .mark{font-family:var(--display);font-size:var(--fs-md);color:#0B0B0B;line-height:1.15;}
.carrier .slot{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#6C6B69;display:flex;align-items:center;gap:.3rem;}
.carrier .slot::before{content:"";width:6px;height:6px;border:1px solid var(--orange);flex:none;}
.carrier:hover .slot{color:var(--orange-ink);}
@media (prefers-reduced-motion: reduce){
  .carrier img,.carrier .wm{transition:none;}
  .carrier:hover img,.carrier:hover .wm{transform:none;}
}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);}
.step{display:flex;flex-direction:column;gap:.7rem;padding-top:1.6rem;border-top:2px solid var(--orange);}
.step .num{font-family:var(--display);font-size:var(--fs-sm);letter-spacing:.12em;color:var(--accent-ink);text-transform:uppercase;font-variant-numeric:tabular-nums;}
.step h3{font-size:var(--fs-lg);}
.step p{color:var(--on-surface-muted);font-size:var(--fs-base);}

/* ---------- Locals ---------- */
.locals{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.local{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);display:flex;flex-direction:column;}
.local .photo{aspect-ratio:16/10;border:0;border-radius:0;border-bottom:1px solid var(--border);}
.local-body{padding:1.1rem 1.25rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;}
.local-body h3{font-size:var(--fs-lg);}
.local-body p{font-size:var(--fs-base);color:var(--on-surface-muted);}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,3.5rem);align-items:center;}
.split .shot,.split .photo{aspect-ratio:5/4;}
.checks{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-base);color:var(--on-surface-muted);}
.checks svg{flex:none;margin-top:5px;color:var(--heading);}

/* ---------- Reviews carousel ---------- */
.revwrap{max-width:820px;margin-inline:auto;}
.revview{overflow:hidden;}
.revtrack{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);}
.rev{
  flex:0 0 100%;min-width:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3.5vw,2.25rem);margin:0;
  display:flex;flex-direction:column;gap:1.1rem;
  box-shadow:var(--shadow-sm);
}
.revstars{display:flex;gap:.15rem;color:var(--orange);}
.rev blockquote{
  margin:0;font-family:var(--display);font-size:clamp(1.05rem,2.1vw,1.35rem);
  line-height:1.5;color:var(--heading);text-wrap:pretty;
}
.rev figcaption{display:flex;align-items:center;gap:.8rem;margin-top:auto;}
.revavatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--ink);color:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:var(--fs-md);
}
.revwho{display:flex;flex-direction:column;line-height:1.3;}
.revwho b{font-weight:700;color:var(--on-surface);font-size:var(--fs-base);}
.revwho span{font-size:var(--fs-sm);color:var(--on-surface-muted);}
.revsource{
  margin-left:auto;display:flex;align-items:center;gap:.4rem;
  font-size:var(--fs-sm);color:var(--on-surface-muted);flex:none;
}
.revnav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.4rem;}
.revbtn{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  background:var(--surface);border:1px solid var(--border-strong);color:var(--heading);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s ease, background-color .15s ease;
}
.revbtn:hover{border-color:var(--heading);background:var(--surface-alt);}
.revdots{display:flex;gap:.45rem;}
.revdot{
  width:8px;height:8px;border-radius:50%;padding:0;cursor:pointer;
  background:var(--border-strong);border:0;transition:background-color .2s ease, width .2s ease;
}
.revdot[aria-current="true"]{background:var(--orange);width:22px;border-radius:99px;}
.revnote{
  text-align:center;margin-top:1.1rem;font-size:var(--fs-sm);color:var(--on-surface-muted);
}
@media (prefers-reduced-motion: reduce){ .revtrack{transition:none;} }

/* ---------- Team ---------- */
.team-lead{margin-bottom:clamp(1.75rem,3.5vw,2.5rem);aspect-ratio:3/2;max-height:400px;}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.person{display:flex;flex-direction:column;gap:.8rem;}
.person .shot,.person .photo{aspect-ratio:1/1;}
.person h3{font-size:var(--fs-lg);}
.person .role{font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--on-surface-muted);font-weight:700;}
.person-contact{display:flex;flex-direction:column;gap:.15rem;font-size:var(--fs-base);}
.person-contact a{color:var(--on-surface);text-decoration:none;border-bottom:1px solid var(--border-strong);align-self:flex-start;}
.person-contact a:hover{color:var(--heading);border-color:var(--orange);}

/* ---------- FAQ ---------- */
/* Rows span the full container; only the answer text is held to a readable
   measure, so the block lines up with the grids above instead of floating. */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--border);}
.faq details{border-bottom:1px solid var(--border);}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 2.5rem 1.05rem 0;position:relative;font-family:var(--display);font-size:var(--fs-lg);color:var(--heading);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);font-family:var(--body);font-size:1.5rem;color:var(--accent-ink);line-height:1;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{padding:0 2.5rem 1.3rem 0;color:var(--on-surface-muted);max-width:66ch;}

/* ---------- Final CTA ---------- */
.cta-final{position:relative;overflow:hidden;background:var(--ink);isolation:isolate;}
/* focal point held high so both faces clear the band's short crop */
.cta-final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;z-index:-2;}
/* Centred block, so the scrim is a vignette rather than a left-to-right sweep:
   darkest through the middle where the type sits, easing off at the edges so
   the photograph still reads. */
.cta-final::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 78% 130% at 50% 45%,
    rgba(5,5,5,.93) 0%, rgba(5,5,5,.86) 55%, rgba(5,5,5,.72) 100%);
}
/* Narrower column so the pair stay clear of the type without cropping in hard */
.cta-grid{padding-block:clamp(2.75rem,5.5vw,4.25rem);max-width:48ch;margin-inline:auto;text-align:center;}
.cta-final h2{font-size:var(--fs-3xl);color:#FFFFFF;}
.cta-final p{color:#C6C4C1;margin:.7rem auto 0;font-size:var(--fs-md);max-width:46ch;}
.cta-grid .hero-actions{justify-content:center;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#A6A4A1;font-size:var(--fs-base);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-block:clamp(2.5rem,5vw,3.5rem);}
.site-footer h4{font-family:var(--body);font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF;margin-bottom:1rem;}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;}
.site-footer a{color:#C6C4C1;text-decoration:none;}
.site-footer a:hover{color:#FFFFFF;}
.footer-brand img{height:30px;width:auto;margin-bottom:1rem;}
.footer-brand p{max-width:34ch;line-height:1.6;}
.footer-bottom{border-top:1px solid rgba(246,245,243,.12);padding-block:1.05rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:var(--fs-sm);color:#7D7B79;}

/* ---------- Sticky mobile action bar (lives outside .mock) ---------- */
.mobile-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:250;
  grid-template-columns:1fr 1fr;gap:0;
  box-shadow:0 -10px 30px -14px rgba(0,0,0,.5);
}
.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem .5rem;text-decoration:none;font-weight:700;font-size:var(--fs-md);}
.mobile-bar .call{background:#0B0B0B;color:#FFFFFF;}
.mobile-bar .quote{background:var(--orange);color:#0B0B0B;}
body.mobile-mode .mobile-bar{
  display:grid;left:50%;transform:translateX(-50%);right:auto;
  width:402px;bottom:1.75rem;border-radius:0 0 27px 27px;overflow:hidden;
}
@media (max-width:760px){
  body:not(.mobile-mode) .mobile-bar{display:grid;}
  body:not(.mobile-mode){padding-bottom:4.5rem;}
}

/* ---------- Responsive: container queries so phone mode is real ---------- */
@container (max-width:1000px){
  .cats,.locals,.team,.steps,.stats{grid-template-columns:repeat(2,1fr);}
  .carriers{grid-template-columns:repeat(4,1fr);}
  .qgrid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .nav{display:none;}
  .burger{
    display:flex;align-items:center;gap:.5rem;margin-left:auto;
    background:transparent;border:1px solid var(--border-strong);color:var(--heading);
    font:inherit;font-weight:600;padding:.5rem .8rem;border-radius:var(--r);cursor:pointer;
  }
  .mock > *{
    --fs-4xl:2.9rem;
    --fs-3xl:2rem;
    --pad:1.5rem;
  }
  .hero-grid{grid-template-columns:1fr;}
  .hero-stage{min-height:0;margin-top:1.5rem;max-width:540px;margin-inline:auto;}
  .hero p.lede{max-width:none;}
}
@container (max-width:700px){
  /* Every vw-based clamp resolves against the viewport, not this frame, so at
     phone width the scale is pinned to fixed values instead. */
  .mock > *{
    --fs-4xl:2.3rem;
    --fs-3xl:1.55rem;
    --fs-xl:1.2rem;
    --fs-lg:1.05rem;
    --fs-md:1rem;
    --pad:1.15rem;
  }

  /* ---- Centred on mobile: headings and short self-contained blocks ----
     Body copy stays left. Centring multi-line paragraphs, lists, FAQ answers
     and contact details makes them measurably harder to read, because the eye
     loses the start of each line. So headings centre, content does not. */
  .section-head{text-align:center;margin-inline:auto;}
  .section-head .lede{margin-inline:auto;}
  .eyebrow{justify-content:center;}
  .eyebrow::before{display:none;}

  .stats{text-align:center;}
  .stat{align-items:center;}
  .steps{text-align:center;}
  .step{align-items:center;}

  .split > div:first-child{text-align:center;}
  .split .lede{margin-inline:auto;}
  .split .hero-actions{justify-content:center;}
  .checks{text-align:left;}

  .cta-grid{text-align:center;margin-inline:auto;}
  .cta-final p{margin-inline:auto;}
  .cta-grid .hero-actions{justify-content:center;}

  .cats,.team,.steps,.stats,.split{grid-template-columns:1fr;}
  .steps,.stats{gap:1.6rem;}
  .split{gap:1.5rem;}
  .cats{gap:1rem;}
  .carriers{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;gap:1.5rem;padding-block:2.25rem;}
  .section{padding-block:2.5rem;}
  .section-head{margin-bottom:1.5rem;}

  /* header: icon-only menu button buys back the width the lockup needs */
  .header-top{display:none;}
  /* the whole call-us block goes: the brand lockup plus a phone number plus a
     burger cannot fit 360px, and the sticky bottom bar already offers Call now */
  .header-cta{display:none;}
  .header-main{gap:.55rem;padding:.65rem 0;}
  .burger{margin-left:auto;}
  .brand{gap:.5rem;}
  .brand img{height:24px;}
  .brand .parent img{height:33px;}
  .brand .rule{height:28px;}
  .header-phone .num{font-size:.95rem;}
  .burger{padding:.45rem .5rem;gap:0;font-size:0;}

  /* Mobile hero is centred and cut to a hook. The supporting sentence is
     desktop-only, so the phone gets a headline and one line, not a paragraph. */
  .hero-grid{padding-top:1.5rem;gap:.75rem;}
  .hero-grid > div:first-child{text-align:center;}
  /* the 22px dash sits ahead of the text and pushes it off the optical centre */
  .hero .eyebrow{justify-content:center;}
  .hero .eyebrow::before{display:none;}
  .hero h1{line-height:1.1;margin-bottom:.9rem;letter-spacing:-.02em;}
  .hero h1 br{display:none;}          /* let it wrap and balance instead */
  /* no subhead on a phone: the headline and the trust marks carry it */
  .hero p.lede{display:none;}
  .hero-actions{margin-top:1.15rem;gap:.5rem;justify-content:center;}
  .hero-actions .btn{flex:1 1 100%;}
  /* one decisive CTA: the phone is already a permanent button at the bottom */
  .hero .hero-actions .btn-outline{display:none;}
  .hero-trust{
    margin-top:1rem;gap:.4rem .8rem;font-size:.72rem;
    justify-content:center;border-top:0;padding-top:0;
  }

  /* same composition as desktop, scaled: cutout centred on the circle with the
     arc behind it and the two chips floating over its edges */
  .hero-stage{
    display:flex;justify-content:center;align-items:flex-end;
    position:relative;margin-top:.35rem;min-height:0;
  }
  .hero-cutout{width:min(100%,272px);}
  .hero-stage::before{width:min(84%,254px);transform:translate(-50%,-47%);}
  .hero-stage::after{display:block;width:min(90%,274px);border-width:2px;}
  .hero-chip{
    position:absolute;width:auto;max-width:44%;
    padding:.45rem .5rem;gap:.4rem;align-items:center;
  }
  /* Tyler's head fills the top ~27% of the cutout, so both chips sit below it.
     Staggered left/right keeps the desktop feel without covering his face. */
  .chip-a{left:0;right:auto;top:44%;bottom:auto;}
  .chip-b{right:0;left:auto;bottom:8%;top:auto;}
  .hero-chip .t{max-width:none;font-size:9.5px;line-height:1.25;}
  .hero-chip .tick{width:19px;height:19px;}
  .hero-chip .tick svg{width:11px;height:11px;}

  /* the four cards were thin white outlines on white, which read as debris after
     a centred hero. Filled tiles under a centred heading make it a real module. */
  .qwrap{padding-bottom:2.25rem;padding-top:.5rem;}
  .qhead{font-size:1.05rem;margin-bottom:.8rem;justify-content:center;text-align:center;}
  .qcard{
    padding:.85rem .8rem;font-size:.875rem;gap:.55rem;
    background:var(--surface-alt);border-color:transparent;box-shadow:none;
  }
  .qcard svg{width:19px;height:19px;}
  .qgrid{gap:.6rem;}

  .stat .fig{font-size:2rem;}
  .cat-body{padding:1.1rem 1.1rem 1.2rem;}
  .cat-wide{padding:1.1rem;}

  .carrier{min-height:96px;padding:.8rem .6rem;}
  .carrier img{max-height:30px;}
  .carrier img.lg{max-height:40px;}
  .carrier img.xl{max-height:50px;}

  .surnet-inner{padding-block:1.35rem;gap:.7rem;}
  .surnet-inner img{height:44px;}
  .surnet-inner p{font-size:.85rem;}

  .rev{padding:1.2rem;gap:.75rem;}
  .rev blockquote{font-size:1rem;line-height:1.45;}
  .rev figcaption{flex-wrap:wrap;gap:.55rem;}
  .revavatar{width:34px;height:34px;}
  .revsource{margin-left:0;width:100%;}
  .revnav{margin-top:1.1rem;gap:.7rem;}
  .revnote{font-size:.72rem;}

  .faq summary{font-size:1.05rem;padding:.9rem 2rem .9rem 0;}
  .faq details p{padding-right:0;padding-bottom:1.1rem;}

  .cta-grid{padding-block:2.5rem;}
  .cta-final::after{background:linear-gradient(180deg, rgba(5,5,5,.93) 0%, rgba(5,5,5,.88) 100%);}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:.7rem;}
  .footer-surnet img{height:34px;}
  /* extra specificity so the desktop chip float loses here regardless of order */
  .mock .hero-chip{animation:none;}

  body.nav-open .mobilenav{display:block;animation:navDrop .22s ease both;}
}

/* Narrow phones: the h1 lines are forced with <br> so they cannot rewrap,
   and "You get the coverage." overruns a 360px screen at 2.15rem. */
@container (max-width:420px){
  .mock > *{--fs-4xl:2rem;--fs-3xl:1.45rem;--pad:1rem;}
  .section{padding-block:2.25rem;}
  .hero-cutout{width:min(100%,248px);}
  .hero-stage::before{width:min(86%,232px);}
  .hero-stage::after{width:min(92%,250px);}
  .hero-chip{max-width:46%;padding:.38rem .44rem;}
  .hero-chip .t{font-size:9px;}
  .chip-a{top:46%;}
  .chip-b{bottom:6%;}
  .qcard{padding:.7rem .7rem;font-size:.84rem;}
  .carrier{min-height:86px;padding:.7rem .5rem;}
  .carrier img{max-height:26px;}
  .carrier img.lg{max-height:35px;}
  .carrier img.xl{max-height:44px;}
  .mobilenav a{font-size:1.05rem;padding:.75rem .1rem;}
}

/* ============ MOTION ============
   All of it sits behind prefers-reduced-motion, and the scroll reveals only
   arm themselves once JS adds .anim-ready, so the page is never blank if the
   script fails to run. */
@keyframes riseIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes wipeIn{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}

  /* hero plays a short entrance sequence on load */
  .hero-grid > div:first-child > *{animation:riseIn .75s cubic-bezier(.2,.7,.3,1) both;}
  .hero-grid > div:first-child > *:nth-child(1){animation-delay:.06s;}
  .hero-grid > div:first-child > *:nth-child(2){animation-delay:.14s;}
  .hero-grid > div:first-child > *:nth-child(3){animation-delay:.22s;}
  .hero-grid > div:first-child > *:nth-child(4){animation-delay:.30s;}
  .hero-grid > div:first-child > *:nth-child(5){animation-delay:.38s;}
  .hero-stage{animation:riseIn .9s cubic-bezier(.2,.7,.3,1) .2s both;}
  .qwrap{animation:riseIn .8s cubic-bezier(.2,.7,.3,1) .5s both;}

  /* the orange rule under "shopping" draws itself in */
  .hero h1 .mark::after{transform-origin:left center;animation:wipeIn .55s cubic-bezier(.2,.7,.3,1) .55s both;}

  .chip-a{animation:floatY 6.5s ease-in-out 1.2s infinite;}
  .chip-b{animation:floatY 6.5s ease-in-out 4.4s infinite;}

  /* scroll reveals */
  .anim-ready .reveal{
    opacity:0;transform:translateY(20px);
    transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1);
    transition-delay:var(--d,0ms);
  }
  .anim-ready .reveal.in{opacity:1;transform:none;}
}

/* hover micro-interactions */
.cat-go svg,.qcard .go{transition:transform .18s ease;display:inline-block;}
.cat:hover .cat-go svg{transform:translateX(5px);}
.qcard:hover .go{transform:translateX(4px);}
.site-header{transition:box-shadow .25s ease;}
body.scrolled .site-header{box-shadow:0 8px 24px -16px rgba(11,11,11,.45);}
@media (prefers-reduced-motion: reduce){
  .cat-go svg,.qcard .go,.site-header{transition:none;}
}

/* ============ REVISION 2 ============
   Additive only. v1's rules are untouched, so the two builds share every
   token, breakpoint and asset, and differ by exactly what is below. */

/* Three tiles, all of which count. The RIBO badge that sat here was the one
   that did not move, and the footer already says we are licensed through RIBO. */
/* auto-fit, not a fixed four. The About page runs three stats, and in a four
   column grid the empty track pushed them off centre against the left. */
.stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(1.2rem,2.5vw,2rem);}
/* one column fewer in the footer now that "Get in touch" is folded into the brand */
.footer-grid{grid-template-columns:1.4fr 1fr 1fr;}
.stat .fig{font-size:clamp(2.6rem,5.2vw,4.2rem);}
/* v1's own breakpoints have to be restated. This block sits after them in the
   stylesheet and matches on the same specificity, so without these the four
   columns would win inside the container queries and crush the phone layout. */
@container (max-width:1000px){ .stats{grid-template-columns:repeat(2,1fr);} }
@container (max-width:700px){ .stats{grid-template-columns:1fr;} }
/* The same trap, and .footer-grid fell into it: dropping to three columns here
   also overrode v1's collapse, so on a phone the footer stayed three across
   and its third column ran off the right edge of the screen. */
@container (max-width:1000px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@container (max-width:700px){ .footer-grid{grid-template-columns:1fr;gap:1.5rem;} }
/* Three tiles whose figures are all different widths, and whose labels are all
   different lengths. Sitting them beside the number left-aligned made the row
   look ragged, so the label goes underneath and the whole tile centres. Now the
   three read as one row regardless of what the figures say. */
.stat{align-items:center;text-align:center;gap:.5rem;}
.stat .fig{display:flex;flex-direction:column;align-items:center;gap:.1em;line-height:1;}
.stat .fig .suf{
  font-size:.24em;font-family:var(--body);font-weight:700;color:var(--on-band-muted);
  letter-spacing:.12em;text-transform:uppercase;margin-left:0;max-width:none;line-height:1.2;
}
.stat .cap{max-width:32ch;margin-inline:auto;}

/* reading position, top of the viewport */
.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;
  background:var(--orange);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
}
/* inside the phone frame it would float over the mock's own chrome */
body.mobile-mode .progress{display:none;}

@media (prefers-reduced-motion: no-preference){
  /* each step's orange rule draws itself as the row arrives */
  .anim-ready .step{border-top-color:transparent;position:relative;}
  .anim-ready .step::before{
    content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--orange);
    transform:scaleX(0);transform-origin:0 50%;
    transition:transform 1.2s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
  }
  .anim-ready .step.in::before{transform:scaleX(1);}

  /* cards pop rather than slide: further to travel, and an easing curve that
     overshoots a little before it settles */
  .anim-ready .cat.reveal,.anim-ready .carrier.reveal,
  .anim-ready .stat.reveal,.anim-ready .person.reveal{
    transform:translateY(64px) scale(.82);filter:blur(7px);
    transition:opacity .8s ease var(--d,0ms),
               filter .8s ease var(--d,0ms),
               transform 1.15s cubic-bezier(.34,1.5,.5,1) var(--d,0ms);
  }
  .anim-ready .cat.reveal.in,.anim-ready .carrier.reveal.in,
  .anim-ready .stat.reveal.in,.anim-ready .person.reveal.in{
    transform:none;filter:blur(0);
  }

  /* the cutout is a large image being moved on every scroll frame, so give it
   its own compositor layer rather than repainting it */
.hero-cutout{will-change:transform;}

/* ---- a wider page ----
   The real constraint behind the crowded header. The container was 1180px,
   which after padding leaves about 1100px of content, and into that goes a
   double logo lockup, five nav items, a phone number and a button. No amount
   of trimming inside the bar fixes a container that is too narrow for it.

   1320px gives the same content 140px more to work with, and widens the insurer
   tiles by about 13% as a side effect, which the four new logos needed anyway.
   Body copy is unaffected: .lede and .section-head are capped in ch, not
   pixels, so line length does not change. */
:root{--wrap:1320px;}

/* ---- the top bar, thinned out ----
   Both marks are trimmed to their artwork, so these were their true sizes:
   Chapman rendering 164x34 and SurNet 132x50. The parent group was sitting
   47% taller than the client's own logo in the client's own header, which is
   most of why the strip read as busy. Matching their heights lets Chapman lead
   on width instead, and hands back about 40px.

   The rest is air. Crowding here is as much about the three groups running
   into each other as it is about how much is in them. */
.brand .parent img{height:34px;}
.brand .rule{height:30px;}   /* was 46px, taller than either logo beside it */
.brand{gap:.7rem;}
.header-main{gap:2.25rem;}

/* ---- the header nav, now that About us makes five items ----
   Two problems at once. .nav-link never had a white-space rule, so the only
   two-word label in the row broke across two lines and sat lower than
   everything beside it. And five items plus the double brand lockup plus the
   phone block plus the button genuinely does not fit at the width the desktop
   nav used to appear from. */
/* .55rem was what it took to fit inside the old 1180px container. With 140px
   more to play with, the links get their breathing room back. */
.nav-link{white-space:nowrap;padding-inline:.7rem;}
.nav{gap:.1rem;}
/* Hand over to the burger 100px earlier than v1 did. Between 1000 and 1100 the
   old breakpoint left the nav visible with nothing like enough room for it,
   which is what forced the wrap in the first place. */
@container (max-width:1100px){
  .nav{display:none;}
  .burger{
    display:flex;align-items:center;gap:.5rem;margin-left:auto;
    background:transparent;border:1px solid var(--border-strong);color:var(--heading);
    font:inherit;font-weight:600;padding:.5rem .8rem;border-radius:var(--r);cursor:pointer;
  }
}

/* Six across, so eighteen insurers fill three clean rows, and a little more
   height than v1 allowed now that the wall is wider. */
.carriers{grid-template-columns:repeat(6,1fr);}
/* and the same restatement it needs to keep collapsing below that */
@container (max-width:1000px){ .carriers{grid-template-columns:repeat(4,1fr);} }
@container (max-width:700px){ .carriers{grid-template-columns:repeat(2,1fr);} }
.carrier img{max-height:48px;}
.carrier img.lg{max-height:58px;}
.carrier img.xl{max-height:72px;}
/* A logo trimmed to its artwork has no built-in margin, so left alone it runs
   the full width of its tile and reads as touching the one beside it. The
   original fourteen sit at roughly 70% of the tile because of the whitespace
   baked into their files; this holds the trimmed ones to the same rhythm. */
.carrier img.ink{max-width:78%;}

/* the hero pushes in harder than v1's 22px nudge */
  @keyframes riseInBig{
    from{opacity:0;transform:translateY(48px) scale(.96);filter:blur(8px);}
    to{opacity:1;transform:none;filter:blur(0);}
  }
  .hero-grid > div:first-child > *,.hero-stage,.qwrap{
    animation-name:riseInBig;animation-duration:1.1s;
  }

  /* Headings populate character by character. The reference theme slides each
     character in from the right; this goes further and flips each one up from
     flat, which reads far more clearly from across a room. */
  .anim-ready .split-w{perspective:700px;}
  .anim-ready .split-w .w{display:inline-block;}
  .anim-ready .split-w .c{
    display:inline-block;font-style:inherit;transform-origin:50% 100%;
    opacity:0;transform:translateY(.45em) rotateX(-88deg) scale(.9);
    transition:opacity .7s ease var(--cd,0ms),
               transform .95s cubic-bezier(.2,.9,.3,1.1) var(--cd,0ms);
  }
  .anim-ready .split-w.in .c{opacity:1;transform:none;}

  /* the claims photo wipes in from the side while the picture inside settles
     back from a slow push in, so the two halves of that row do not move as one */
  .anim-ready .split .shot.reveal{
    transform:none;clip-path:inset(0 0 0 100%);
    transition:opacity .6s ease, clip-path 1.3s cubic-bezier(.22,.61,.36,1);
  }
  .anim-ready .split .shot.reveal.in{clip-path:inset(0 0 0 0);}
  .anim-ready .split .shot img{transform:scale(1.14);transition:transform 1.9s cubic-bezier(.22,.61,.36,1);}
  .anim-ready .split .shot.in img{transform:none;}

  /* Everything that reveals now travels further and takes longer. v1's rule is
     restated here rather than edited, so v1 itself is untouched. */
  .anim-ready .reveal{
    transform:translateY(38px);
    transition:opacity 1.05s ease, transform 1.05s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--d,0ms);
  }
  .anim-ready .reveal.in{transform:none;}

  /* The h1 now fills in character by character, so the orange rule under
     "shopping" has to wait for that word to arrive. v1 drew it at 0.55s,
     which would now land under letters that are not there yet. */
  .hero h1 .mark::after{animation-delay:1.8s;}

  /* the claims checklist ticks in one line at a time */
  .anim-ready .checks li{
    opacity:0;transform:translateX(-16px);
    transition:opacity .8s ease var(--d,0ms), transform .8s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
  }
  .anim-ready .checks li.in{opacity:1;transform:none;}
}

/* category photos push in slightly under the pointer. The card already lifts,
   so this is the same gesture carried through to the image. */
.cat .shot{overflow:hidden;}
.cat .shot img{transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.cat:hover .shot img{transform:scale(1.06);}
@media (prefers-reduced-motion: reduce){
  .cat .shot img,.cat:hover .shot img{transition:none;transform:none;}
}

/* ---- odometer counters ----
   Each digit is a strip of 0-9 in a 1em window. The strip spins through two
   full turns before landing on its digit, and later digits run longer, so the
   number settles left to right the way a mechanical counter does. */
.odo{display:inline-flex;align-items:flex-start;}
.odo-col{display:inline-block;height:1em;overflow:hidden;vertical-align:top;}
.odo-strip{
  display:block;transform:translateY(0);
  transition-property:transform;transition-timing-function:cubic-bezier(.16,.86,.3,1);
  will-change:transform;
}
.odo-cell{display:block;height:1em;line-height:1;}
/* Commas, percent signs and pluses sit between the spinning columns. They need
   the same 1em box and top alignment as a column, or they sit on their own
   baseline and the whole figure looks half a line out. */
.odo-lit{display:inline-block;height:1em;line-height:1;vertical-align:top;}

/* each broker now carries a short background, not just a phone number */
.person .bio{font-size:var(--fs-base);color:var(--on-surface-muted);line-height:1.6;}

/* ---- the hero rings ----
   Three concentric shapes around Tyler, all turning at different speeds and
   in opposite directions. Slow on purpose: 26 and 34 seconds reads as drift,
   which is the difference between expensive and cheap. */
.hero-ring{
  position:absolute;z-index:0;pointer-events:none;
  width:min(104%,548px);aspect-ratio:1;border-radius:50%;
  border:1px dashed color-mix(in srgb, var(--orange) 60%, transparent);
  left:50%;top:50%;transform:translate(-50%,-46%);
}
@keyframes arcOrbit{
  from{transform:translate(-50%,-46%) rotate(-14deg);}
  to{transform:translate(-50%,-46%) rotate(346deg);}
}
@keyframes ringSpin{
  from{transform:translate(-50%,-46%) rotate(0deg);}
  to{transform:translate(-50%,-46%) rotate(-360deg);}
}
@keyframes discBreathe{
  0%,100%{transform:translate(-50%,-46%) scale(1);}
  50%{transform:translate(-50%,-46%) scale(1.035);}
}
/* the ring around the tick pings outward, which is what pulls the eye to the
   two chips in the first place */
@keyframes tickPing{
  0%{opacity:.75;transform:scale(1);}
  70%,100%{opacity:0;transform:scale(2);}
}
@keyframes chipIn{
  from{opacity:0;transform:translateY(18px) scale(.8);}
  to{opacity:1;transform:none;}
}

.hero-chip .tick{position:relative;}
.hero-chip .tick::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--orange);pointer-events:none;
}

@media (prefers-reduced-motion: no-preference){
  .hero-stage::after{animation:arcOrbit 26s linear 1.4s infinite;}
  .hero-ring{animation:ringSpin 34s linear infinite;}
  .hero-stage::before{animation:discBreathe 9s ease-in-out 1s infinite;}

  /* pop in after the headline has landed, then take up the existing float.
     floatY is listed last so it owns transform once its delay elapses. */
  .chip-a{animation:chipIn .85s cubic-bezier(.2,.9,.3,1.3) 1.05s both,
                    floatY 6.5s ease-in-out 2.1s infinite;}
  .chip-b{animation:chipIn .85s cubic-bezier(.2,.9,.3,1.3) 1.3s both,
                    floatY 6.5s ease-in-out 4.6s infinite;}
  .chip-a .tick::after{animation:tickPing 3.4s ease-out 2.4s infinite;}
  .chip-b .tick::after{animation:tickPing 3.4s ease-out 4.1s infinite;}
}

/* ---- the rotating seal in the final CTA ---- */
.seal{
  position:absolute;right:clamp(2rem,6vw,5rem);top:50%;transform:translateY(-50%);
  width:130px;height:130px;display:grid;place-items:center;z-index:2;
  color:#FFFFFF;text-decoration:none;
}
.seal svg{position:absolute;inset:0;width:100%;height:100%;}
.seal text{
  font-family:var(--body);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;fill:#FFFFFF;
}
.seal-arrow{
  position:static !important;width:20px !important;height:14px !important;
  color:var(--orange);transition:transform .2s ease;
}
.seal:hover .seal-arrow{transform:translateX(4px);}
/* the ring itself is what turns, so the arrow in the middle stays upright */
@keyframes sealSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: no-preference){
  .seal > svg:first-of-type{animation:sealSpin 22s linear infinite;transform-origin:50% 50%;}
}
/* no room for it beside the copy once the CTA stacks */
@container (max-width:900px){ .seal{display:none;} }

/* v1's own breakpoints, restated for the larger figures */
@container (max-width:700px){ .stat .fig{font-size:clamp(2.4rem,9vw,3.2rem);} }
.footer-bottom .built a{color:#A6A4A1;text-decoration:none;border-bottom:1px solid rgba(246,245,243,.25);}
.footer-bottom .built a:hover{color:#FFFFFF;}

/* A phone in dark mode does not just pick a dark stylesheet: Chrome on Android
   and Samsung Internet will algorithmically darken a light page, and they
   stack that on top of our own dark scrim, which is what turned the hero
   photographs into black rectangles. "only light" is the opt out. The plain
   "light" v1 already sets keeps form controls and scrollbars light but does
   not stop the automatic darkening. */
:root{color-scheme:only light;}

/* ============ INTERIOR PAGES ============
   Everything above is the homepage design, untouched. These are the few
   pieces an interior page needs that a single-page comp never did. */
/* .page-hero has been folded into .hub-hero; see photoHero(). The rules that
   named it are kept only where they still apply to the converted markup. */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  font-size:var(--fs-xs);color:var(--on-surface-muted);margin-bottom:1rem;
}
.crumbs a{color:inherit;text-decoration:none;}
.crumbs a:hover{color:var(--heading);}
.crumbs span{opacity:.5;}
.nav-link[aria-current="page"]{border-bottom-color:var(--orange);}

/* a promo video, poster first so nothing downloads until it is asked for */
.videowrap{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border);background:#0B0B0B;box-shadow:var(--shadow-lift);
}
.videowrap video{display:block;width:100%;height:auto;}
.videonote{
  margin-top:.85rem;font-size:var(--fs-sm);color:var(--on-surface-muted);
  display:flex;align-items:center;gap:.5rem;
}
.videonote::before{content:"";width:22px;height:2px;background:var(--orange);flex:none;}

/* two columns that do not need the .split photo treatment */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,3.5rem);align-items:center;}

/* contact tiles */
.contacts{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.contact-card{
  display:flex;flex-direction:column;gap:.5rem;padding:1.5rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.contact-card .k{
  font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-surface-muted);font-weight:700;
}
.contact-card .v{font-family:var(--display);font-size:var(--fs-lg);color:var(--heading);}
.contact-card a{color:var(--heading);text-decoration:none;}
.contact-card a:hover{color:var(--orange-ink);}
.contact-card p{font-size:var(--fs-base);color:var(--on-surface-muted);}

/* ---- coverage hub hero ----
   A cinematic band: the photo runs full bleed behind a scrim with the copy
   over it. The first attempt floated a rounded snapshot with an orange arc
   orbiting it, borrowed from the homepage. That arc is drawn to circle a
   circular cutout; around a rectangle it reads as a stray line, and the
   section clipped it. This uses the one good photograph per line properly,
   and uses it once. */
/* One height for every header on the site. Three different bands (hub, child
   page, plain utility page) at three different heights read as three different
   templates; going from one page to the next, the content jumped. --hero-h is
   the single number now, and it is set high enough that the tallest headline
   still fits inside it rather than pushing the band taller. */
:root{--hero-h:clamp(320px,38vw,520px);--hero-h-phone:420px;}
/* min-height alone does not make headers uniform: it is a floor, and a page
   with a three line headline simply grows past it, which is why these ran
   520, 546, 575 and 648 side by side. From tablet up the band is given an
   explicit height instead, sized so the tallest headline on the site still
   sits inside it. Below that the content decides, because a phone cannot
   afford a fixed 600px band. */
@container (min-width:701px){
  .hub-hero,.hub-hero.compact{height:clamp(430px,42vw,760px);min-height:0;}
}

/* Same problem on a phone, where the bands ran anywhere from 320 to 516.
   A hub headline at --fs-4xl is four lines at 390px; dropped to the size the
   child pages already use it is three, and then one height covers every
   header on the site at phone width too. */
@container (max-width:700px){
  .hub-copy h1{font-size:var(--fs-3xl);}
  .hub-copy .lede{font-size:var(--fs-base);margin-top:.7rem;}
  .hub-hero,.hub-hero.compact{height:var(--hero-h-phone);min-height:0;}
  .hub-hero .wrap{padding-block:1.5rem;}
  /* v1 centres every .eyebrow on a phone, which is right for a section head,
     where the heading and lede are centred too. Nothing else on an interior
     page is centred, so in a hero, a punch band or a two column block the
     eyebrow floated into the middle above left aligned type. Put the default
     back to the left and let the centred blocks ask for centre. */
  .eyebrow{justify-content:flex-start;}
  .section-head .eyebrow,.cta-grid .eyebrow{justify-content:center;}
  /* The scrim is a left to right gradient, which works when the copy sits in
     the left half of a wide band. On a phone the copy spans the whole width,
     including the bright end of it, so the phone gets a vertical wash as well. */
  /* Dark enough for white type on the brightest photograph here, and no
     darker. The first pass was .62 to .88, which held the text well and hid
     the photograph behind it: on the auto hero you could barely make out the
     car. The type sits in the lower half, so the weight goes there. */
  .hub-hero::after{background:linear-gradient(180deg, rgba(8,8,8,.34) 0%, rgba(8,8,8,.52) 40%, rgba(8,8,8,.74) 100%);}
  /* The trail is worth its 28px on a desktop page and is not on a phone, where
     it pushes the headline down and the header taller. Search engines still
     get the breadcrumb from the JSON-LD, which does not depend on it. */
  .hub-hero .crumbs{display:none;}
  /* Stacked full width, the two buttons are 68px of band on every header.
     Side by side they still clear the 44px tap target at 360px wide. */
  .hub-copy .hero-actions{flex-wrap:nowrap;gap:.5rem;margin-top:1.35rem;}
  .hub-copy .hero-actions .btn{
    flex:1 1 auto;white-space:nowrap;padding-inline:.85rem;text-align:center;justify-content:center;
  }
}
/* On a 360px phone two buttons on one row is 12px too wide with the normal
   button padding, and they cannot be allowed to wrap: the band is a fixed
   height, so a second row of buttons would be clipped rather than shown. */
@container (max-width:420px){
  .hub-copy .hero-actions .btn{padding-inline:.6rem;font-size:var(--fs-base);}
}
.hub-hero{
  position:relative;overflow:hidden;background:var(--ink);isolation:isolate;
  display:flex;align-items:center;min-height:var(--hero-h);
}
/* The default focal point is the middle of the frame, which is right for a
   landscape but wrong for a photograph of people: a wide short hero crops top
   and bottom, and the middle of a standing figure is their waist. Lines whose
   photograph has faces in it set their own focus in coverage.js. */
.hub-hero > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;z-index:-2;
}
.hub-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg, rgba(8,8,8,.95) 0%, rgba(8,8,8,.88) 34%,
    rgba(8,8,8,.62) 64%, rgba(8,8,8,.34) 100%);
}
.hub-hero .wrap{padding-block:clamp(2rem,4vw,3rem);width:100%;}
/* a child page carries the same photograph as its hub, shorter. It ties a
   line together visually, and it is the difference between an interior page
   that looks designed and one that is a wall of text on white. */
/* .compact keeps the smaller headline that gives a child page its place in
   the hierarchy, but not a smaller band. */
.hub-hero.compact{min-height:var(--hero-h);}
.hub-hero.compact h1{font-size:var(--fs-3xl);max-width:18ch;}
.hub-copy{max-width:40rem;}
/* A 15ch measure put the longest headline on four lines while every other
   hero ran to two, and each extra line is another 73px of band. The copy
   column is already held to 40rem, which is the right measure for a headline
   at this size, so the h1 takes that and nothing on the site needs more than
   three lines. */
.hub-copy h1{color:#FFFFFF;font-size:var(--fs-4xl);max-width:none;}
.hub-copy .lede{color:#D2D0CD;max-width:46ch;margin-top:1rem;}
.hub-copy .eyebrow{color:var(--orange);}
.hub-copy .crumbs{color:#9E9C99;}
.hub-copy .crumbs a{color:#D2D0CD;}
.hub-copy .crumbs a:hover{color:#FFFFFF;}
.hub-copy .hero-actions{margin-top:1.75rem;}

/* ---- coverage cards ----
   Six columns with each card spanning two, so three sit per row. The trailing
   cards get a wider span from the generator, which is the only way a set of
   five fills both its rows: auto-fit leaves the fifth stranded in a quarter
   width track with three empty ones beside it. */
.covergrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;}
.covercard{grid-column:span 2;}
.covercard.w3{grid-column:span 3;}
.covercard.w6{grid-column:span 6;}
.covercard{
  display:flex;flex-direction:column;gap:.4rem;padding:1.5rem 1.5rem 1.35rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  text-decoration:none;color:var(--on-surface);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.covercard:hover{transform:translateY(-3px);border-color:var(--heading);box-shadow:var(--shadow-lift);}
/* a bordered tile, not a pale wash. Orange arrives on hover, as a touch. */
.coverico{
  width:46px;height:46px;border-radius:var(--r);flex:none;margin-bottom:.8rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-alt);border:1px solid var(--border);color:var(--heading);
  transition:border-color .16s ease, color .16s ease;
}
.coverico svg{width:23px;height:23px;}
.coverico.big{width:56px;height:56px;margin-bottom:0;}
.coverico.big svg{width:28px;height:28px;}
.covercard:hover .coverico{border-color:var(--orange);color:var(--orange-ink);}
.covercard h3{font-size:var(--fs-md);}
.covercard p{font-size:var(--fs-base);color:var(--on-surface-muted);line-height:1.55;}
/* auto, so every card's link sits on the same baseline however long its
   blurb runs. Without it the shorter cards trail off into dead space. */
.covercard .go{
  margin-top:auto;padding-top:1.1rem;font-weight:700;color:var(--heading);
  font-size:var(--fs-sm);display:flex;align-items:center;gap:.45rem;
}
.covercard .go svg{transition:transform .18s ease;}
.covercard:hover .go svg{transform:translateX(5px);}

/* ---- the punch line ----
   One hard statement per product, set large on black. It is the beat that
   stops a child page being three quiet sections on white, and it is the thing
   a visitor should leave remembering. */
.punch{background:var(--ink);}
.punch .wrap{
  padding-block:clamp(2.75rem,6vw,4.25rem);
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
}
.punch .eyebrow{color:var(--orange);margin-bottom:1.1rem;}
.punchline{
  font-family:var(--display);color:#FFFFFF;
  font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.3;max-width:26ch;
}
@container (max-width:700px){
  .punch .wrap{grid-template-columns:1fr;align-items:start;gap:1.5rem;}
}

/* The team grid is three across in the master, sized for the homepage section
   that no longer exists. About runs two people. Two portrait cards stretched
   across the full wrap give absurdly large photographs, and holding the grid
   to 860px leaves a hole on the right, which is the same complaint as the
   stat band. So the card turns sideways: photo beside the words, two across,
   filling the width honestly. The master's own breakpoints are page width
   media queries and cannot see the comp frame, so the collapse is redone here
   as container queries. */
.team{grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.4rem);}
.person{display:grid;grid-template-columns:200px 1fr;column-gap:1.4rem;row-gap:.65rem;align-content:start;}
.person .shot{grid-row:1 / span 3;aspect-ratio:4/5;}
.person .bio{margin:0;}
@container (max-width:1040px){
  .person{grid-template-columns:150px 1fr;}
}
@container (max-width:820px){
  .team{grid-template-columns:1fr;}
  .person{grid-template-columns:180px 1fr;}
}
@container (max-width:560px){
  .person{grid-template-columns:1fr;}
  .person .shot{grid-row:auto;aspect-ratio:4/3;}
}

/* ---- what moves the price ----
   The section that makes a coverage page worth reading. It replaced a copy of
   the homepage's three steps, its stat strip and its insurer wall, none of
   which said anything a visitor could not already have read on the homepage. */
.factors{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.factor{
  padding:1.4rem 1.45rem;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  border-top:2px solid var(--orange);
}
.factor h3{
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-surface-muted);margin-bottom:.5rem;
}
.factor p{font-size:var(--fs-base);color:var(--on-surface);line-height:1.6;}

@container (max-width:1000px){ .factors{grid-template-columns:repeat(2,1fr);} }
@container (max-width:700px){ .factors{grid-template-columns:1fr;} }

/* the one thing people miss, pulled out of the list so it is not skimmed past */
.callout{
  padding:1.75rem;background:var(--surface-alt);border:1px solid var(--border);
  border-left:3px solid var(--orange);border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:.7rem;align-items:flex-start;
}
.callout p{color:var(--on-surface);font-size:var(--fs-md);line-height:1.7;}
.callout .btn{margin-top:.5rem;}

/* claims */
.emergency{
  padding:1.1rem 1.35rem;border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--orange) 18%, var(--surface));
  border:1px solid var(--orange);font-size:var(--fs-md);
}
.claimlist{
  display:grid;grid-template-columns:repeat(2,1fr);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
}
.claimrow{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.3rem;box-shadow:1px 0 0 var(--border), 0 1px 0 var(--border);
}
.claimrow a{
  font-family:var(--display);color:var(--heading);text-decoration:none;white-space:nowrap;
}
.claimrow a:hover{color:var(--orange-ink);}

/* the quote form */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem;}
.field{display:flex;flex-direction:column;gap:.35rem;}
.field.wide{grid-column:1 / -1;}
.field label{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-surface-muted);
}
.field input,.field select,.field textarea{
  font:inherit;padding:.7rem .85rem;border:1px solid var(--border-strong);
  border-radius:var(--r);background:var(--surface);color:var(--on-surface);width:100%;
}
.field textarea{resize:vertical;}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:1px;border-color:var(--heading);
}
.formnote{margin-top:.85rem;font-size:var(--fs-sm);color:var(--on-surface-muted);}

/* ---- booking ----
   Calendly's inline widget is a 640px iframe in Calendly's own typography, and
   dropped onto the page it read as something pasted in from somewhere else,
   which is what it was. So the page keeps its own card, and the calendar is a
   popup that only appears once someone has decided to book. Dark band, white
   card, orange button: the calendar is now the thing you click, not a hole in
   the middle of the page. */
.bookgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center;}
.bookcopy h2{font-size:var(--fs-3xl);}
.bookcopy .lede{margin-top:.9rem;}
/* .lede carries no margin of its own and h2 has margin:0, so every place a
   lede follows a heading needs its own gap. page-hero, hub-copy and bookcopy
   each set one; the two column .duo blocks did not, so the sentence sat
   directly against the heading. */
.duo .lede{margin-top:.9rem;}
.bookcopy .checks{margin-top:1.6rem;}
.section-dark .eyebrow{color:var(--on-band-muted);}
.section-dark .checks li{color:var(--on-band);}
.section-dark .checks svg{color:var(--orange);}

.bookcard{
  background:#FFFFFF;border-radius:var(--r-lg);padding:clamp(1.6rem,2.6vw,2.2rem);
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.bookwho{display:flex;align-items:center;gap:1rem;padding-bottom:1.2rem;border-bottom:1px solid var(--border);}
.bookwho img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none;}
.bookwho .role{display:block;font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--on-surface-muted);font-weight:700;}
.bookwho h3{font-size:var(--fs-lg);color:var(--heading);margin-top:.1rem;}
.bookmeta{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem;}
.bookmeta li{display:flex;gap:.75rem;align-items:center;font-size:var(--fs-base);color:var(--on-surface);}
.bookmeta svg{flex:none;color:var(--orange);}
.bookbtn{display:block;width:100%;text-align:center;margin-top:1.5rem;}
.booknote{margin-top:.9rem;text-align:center;font-size:var(--fs-sm);color:var(--on-surface-muted);}
.booknote a{color:var(--heading);font-weight:700;}
/* The dialog sits outside .mock, so the container queries that collapse the
   form to one column on a narrow page cannot see it. On a phone the two up
   name and phone row is unusable, so it gets a viewport query of its own. */
@media (max-width:620px){
  .qm .formgrid{grid-template-columns:1fr;}
  .qm-panel{padding:1.4rem 1.15rem;}
}

/* ---- header on a phone ----
 * The v2 stylesheet restates the burger at 1100px, after v1's 700px rule that
 * strips it back to an icon, so on a phone the word "Menu" came back along
 * with padding the header could not afford and the button ran off the edge.
 * Restated here, last, where nothing can undo it. Between 700 and 1100 the
 * labelled button is right and stays. */
@container (max-width:700px){
  .burger{
    gap:0;font-size:0;padding:.5rem;line-height:0;
    width:40px;height:40px;justify-content:center;flex:none;
  }
  .burger svg{width:18px;height:12px;}
  .burger .ico-close{width:14px;height:14px;}
  .header-main{gap:.5rem;}
  .brand{min-width:0;flex:1 1 auto;}
}

/* ---- the mobile menu ----
 * Accordion groups that mirror the desktop dropdowns exactly.
 *
 * Open, the menu used to sit in the flow under the sticky header, so a swipe
 * moved the PAGE behind it and only reached the menu once the page had run
 * out. Open it is now a panel pinned under the header that scrolls on its
 * own, with the page behind it locked. --hdr is the header's real measured
 * height, set by the script, because the header is not a fixed size. */
body.nav-open{overflow:hidden;}
@media (max-width:1100px){
  body.nav-open .mobilenav{
    /* v1 opened the menu from inside a container query. Out here that query
       no longer applies, so this rule owns opening it as well as pinning it. */
    display:block;
    position:fixed;left:0;right:0;top:var(--hdr,64px);bottom:0;z-index:120;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-bottom:5.5rem;border-top:1px solid var(--border);
    animation:navDrop .22s ease both;
  }
}
.mnav-group{border-bottom:1px solid var(--border);}
.mnav-head{display:flex;align-items:center;gap:.5rem;}
.mnav-top{
  flex:1 1 auto;display:block;padding:.95rem 0;
  font:inherit;font-size:var(--fs-md);font-weight:700;color:var(--heading);
  text-decoration:none;
}
/* The chevron is its own control, and a big enough one to hit: the name beside
   it is a link to the line, and the two must not fight for the same tap. */
.mnav-toggle{
  flex:none;width:44px;height:44px;display:grid;place-items:center;
  background:none;border:0;padding:0;color:var(--on-surface-muted);cursor:pointer;
}
.mnav-toggle:hover{color:var(--heading);}
.mnav-chev{flex:none;color:var(--on-surface-muted);transition:transform .2s ease;}
.mnav-toggle[aria-expanded="true"] .mnav-chev{transform:rotate(180deg);}
.mnav-sub{display:flex;flex-direction:column;padding:0 0 .8rem .9rem;gap:.1rem;}
/* display:flex outranks the user agent [hidden] rule, so without this every
   group renders open. Same trap as .qm. */
.mnav-sub[hidden]{display:none;}
.mnav-sub a{
  padding:.55rem 0;border:0;color:var(--on-surface-muted);
  text-decoration:none;font-size:var(--fs-base);
}
.mnav-sub a:hover{color:var(--heading);}
.mnav-sub a.all{color:var(--heading);font-weight:700;}
.mobilenav a.mnav-flat{
  display:block;padding:.85rem 0;border-bottom:1px solid var(--border);
  color:var(--heading);text-decoration:none;font-size:var(--fs-md);font-weight:700;
}
.mobilenav-sep{display:block;height:.6rem;}
@media (prefers-reduced-motion:reduce){ .mnav-chev{transition:none;} }

@container (max-width:900px){
  .bookgrid{grid-template-columns:1fr;}
}

/* Four coverage cards, all the same shape now that Life has a photograph, so
   the row of three with a wide strip underneath becomes two by two. */
.cats{grid-template-columns:repeat(2,1fr);}
@container (max-width:700px){ .cats{grid-template-columns:1fr;} }

/* the line under the insurer wall, on both pages that carry it */
/* The line under the insurer wall. It was two sentences, which is a wall of
   text under a wall of logos. This is the site's own eyebrow treatment made
   symmetrical: the same 22px orange bar and the same uppercase letterspacing,
   with a bar on each side so it sits centred. It is deliberately not a
   sentence. The logos say what they are; this only has to say they are not
   the whole list. */
.wallmore{
  display:flex;align-items:center;justify-content:center;gap:.85rem;
  margin:1.6rem 0 0;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-surface-muted);
}
.wallmore::before,.wallmore::after{
  content:"";height:2px;width:22px;background:var(--orange);flex:none;
}

/* ---- motion on a page you actually read ----
   Everything below restates the homepage's reveal rules for interior pages at
   a higher specificity, rather than editing them, so the homepage is
   untouched. One transition, one distance, one duration, and no per item
   delay: a section settles into place instead of parading in.

   Not a left to right wipe, which was the other idea on the table. A wipe
   animates the words themselves while someone is trying to read them, which
   is the thing being complained about; this animates the block and leaves the
   text alone. */
body.calm.anim-ready .reveal,
body.calm.anim-ready .cat.reveal,
body.calm.anim-ready .carrier.reveal,
body.calm.anim-ready .stat.reveal,
body.calm.anim-ready .person.reveal,
body.calm.anim-ready .checks li{
  opacity:0;transform:translateY(10px);filter:none;
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
  transition-delay:0ms;
}
body.calm.anim-ready .reveal.in,
body.calm.anim-ready .cat.reveal.in,
body.calm.anim-ready .carrier.reveal.in,
body.calm.anim-ready .stat.reveal.in,
body.calm.anim-ready .person.reveal.in,
body.calm.anim-ready .checks li.in{
  opacity:1;transform:none;filter:none;
}
/* the hub headline is the first thing on the page: it fades, it does not move */
body.calm.anim-ready .hub-copy > .reveal{transform:none;}

/* ---- footer ----
   On a phone the footer was one long column: brand, blurb, phone, email, four
   coverage links, three company links and four legal lines, every one of them
   on its own row. Roughly nine hundred pixels of scrolling to reach nothing.
   The two link lists are short enough to sit side by side, which halves it,
   and the contact details become the two things worth tapping. */
.footer-contact{display:flex;flex-direction:column;gap:.3rem;margin-top:1.1rem;}
.footer-contact a{text-decoration:none;width:fit-content;}
.footer-contact .tel{font-family:var(--display);font-size:var(--fs-md);color:#FFFFFF;}
.footer-contact .mail{color:#C6C4C1;}
.footer-contact a:hover{color:#FFFFFF;}

.footer-social{display:flex;gap:1rem;}
.footer-social a{color:#7D7B79;text-decoration:none;border-bottom:1px solid transparent;}
.footer-social a:hover{color:#FFFFFF;border-bottom-color:rgba(246,245,243,.3);}

@container (max-width:700px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.6rem 1.25rem;padding-block:2.25rem 1.25rem;}
  .footer-brand{grid-column:1 / -1;}
  .footer-brand p{max-width:none;}
  .footer-brand img{height:26px;margin-bottom:.85rem;}
  .site-footer h4{margin-bottom:.5rem;}
  .site-footer ul{gap:0;}
  .site-footer ul a{display:block;padding:.4rem 0;}
  .footer-contact{margin-top:1.25rem;gap:.45rem;}
  .footer-contact .tel{font-size:var(--fs-lg);}
  /* the legal block is three short lines and a lockup, not four stacked rows */
  .footer-bottom{gap:.85rem;padding-block:1.1rem 1.5rem;}
  .footer-bottom .built{order:4;}
  .footer-social{gap:1.25rem;}
}

/* ---- form validation ----
   The form carries novalidate, so the browser does not put its own bubble on
   screen; the constraint API still answers, which is what decides here. That
   keeps email format and empty checks as the browser's job while the message
   and the styling stay the page's. */
.field .opt{
  font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--on-surface-muted);font-size:var(--fs-xs);
}
.field .err{
  display:none;font-size:var(--fs-sm);color:#B3261E;margin-top:.1rem;
}
.field.bad .err{display:block;}
.field.bad input,.field.bad select,.field.bad textarea{
  border-color:#B3261E;
}
.field.bad input:focus-visible,.field.bad select:focus-visible{outline-color:#B3261E;}
/* 'Choose one' is a prompt, not an answer, so it reads as one until a real
   option is picked. A required select with an empty value is :invalid. */
.field select:invalid{color:var(--on-surface-muted);}
.field select option{color:var(--on-surface);}
:root[data-theme="dark"] .field .err,
:root:not([data-theme="light"]) .field .err{color:#B3261E;}

/* ---- quote dialog ----
   A quote button that navigates away costs the visitor the page they were
   reading and a full round trip. The form is the same one the page uses; it
   just arrives over the top of whatever they were looking at. */
.qm{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:1.25rem;}
/* display:flex here outranks the user agent [hidden] rule, so without this
   the dialog is open on every page from first paint. */
.qm[hidden]{display:none;}
/* No backdrop-filter. Blurring the backdrop means compositing the whole page
   through a filter on the frame the dialog appears, and on a page carrying a
   full bleed hero photograph that is what made opening it feel slow. A flat
   wash costs nothing and reads the same. */
.qm-backdrop{position:absolute;inset:0;background:rgba(8,8,8,.66);}
.qm-panel{
  position:relative;width:min(560px,100%);max-height:calc(100dvh - 2.5rem);overflow-y:auto;
  background:var(--surface);border-radius:var(--r-lg);padding:clamp(1.5rem,3.5vw,2.4rem);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.qm-panel h2{font-size:clamp(1.5rem,3.2vw,2rem);margin-top:.35rem;}
.qm-panel .lede{margin-top:.6rem;margin-bottom:1.5rem;}
.qm-panel .quoteform{margin:0;}
.qm-x{
  position:absolute;top:.85rem;right:.85rem;width:36px;height:36px;display:grid;place-items:center;
  border:0;border-radius:50%;background:var(--surface-alt);color:var(--on-surface);cursor:pointer;
}
.qm-x:hover{background:var(--border);color:var(--heading);}
.qm-alt{margin-top:1rem;font-size:var(--fs-sm);color:var(--on-surface-muted);}
.qm-alt a{color:var(--heading);font-weight:700;}
body.qm-open{overflow:hidden;}
@media (prefers-reduced-motion:no-preference){
  .qm-panel{animation:qmIn .22s cubic-bezier(.2,.7,.3,1) both;will-change:transform,opacity;}
  @keyframes qmIn{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}
}

/* sitemap */
.maplist{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.mapcol h3{font-size:var(--fs-md);margin-bottom:.7rem;}
.mapcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;}
.mapcol a{color:var(--on-surface-muted);text-decoration:none;font-size:var(--fs-base);}
.mapcol a:hover{color:var(--heading);}

@container (max-width:1000px){
  .contacts{grid-template-columns:repeat(2,1fr);}
  .maplist{grid-template-columns:repeat(2,1fr);}
  .covergrid{grid-template-columns:repeat(2,1fr);}
  .covercard,.covercard.w3,.covercard.w6{grid-column:auto;}
  .hub-grid{grid-template-columns:1fr;}
  .hub-stage{margin-top:1.5rem;max-width:540px;margin-inline:auto;}
  .hub-copy h1{max-width:none;}
}
@container (max-width:700px){
  .duo,.contacts,.covergrid,.maplist,.formgrid,.claimlist{grid-template-columns:1fr;}
  .band::after{background:linear-gradient(180deg, rgba(5,5,5,.9) 0%, rgba(5,5,5,.85) 100%);}
}