/* Beyond Insurance Group – 2027 site styles
   Brand: Grove direction / Eastern White Pine mark (see Design System Summary, Nov 5 2026) */

:root {
  /* Palette */
  --bark: #2E2416;        /* primary dark · text */
  --brown: #7A5C38;       /* supporting */
  --clay: #B08048;        /* warm accent */
  --sage: #6B6840;        /* brand accent · color ground */
  --deep-sage: #4E4E2E;   /* dark accent */
  --mid: #9A8660;         /* captions · rules */
  --hairline: #D4CAB0;    /* hairlines */
  --paper: #F4EFE3;       /* primary light · ground */
  --warm: #EDE5D0;        /* secondary ground */

  /* Type */
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max-width: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--bark);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
/* paper grain over the whole page */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background-image: var(--grain); mix-blend-mode: multiply;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Type ─────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 6.5vw, 4.8rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.6rem; }
h1 em, h2 em { font-style: italic; }
.label {
  font-family: var(--sans); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--sage);
}
.label-rule { display: inline-flex; align-items: center; gap: 10px; }
.label-rule::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.lede { font-size: 1.15rem; color: var(--brown); max-width: 34em; }

/* rough hand-drawn rule */
.rule { height: 6px; border: 0; background: none; position: relative; }
.rule::after {
  content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 1px;
  background: var(--hairline); border-radius: 1px;
}

/* ── Logo lockup (E2 · horizontal: mark · divider · wordmark) ── */
.lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--bark); }
.lockup__mark { height: 52px; width: auto; }
.lockup__divider { width: 1px; height: 42px; background: var(--mid); opacity: 0.55; }
.lockup__word { display: flex; flex-direction: column; }
.lockup__name { font-family: var(--serif); font-size: 2rem; line-height: 0.95; letter-spacing: -0.3px; }
.lockup__sub {
  display: flex; align-items: center; gap: 6px; margin-top: 5px;
  font-family: var(--sans); font-weight: 500; font-size: 0.56rem;
  letter-spacing: 0.47em; text-transform: uppercase; color: var(--sage);
}
.lockup__sub::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.lockup--inverse { color: var(--paper); }
.lockup--inverse .lockup__sub { color: var(--clay); }
.lockup--inverse .lockup__divider { background: var(--paper); opacity: 0.3; }

/* ── Header ───────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 24px; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a {
  text-decoration: none; font-weight: 400; font-size: 0.95rem; color: var(--bark);
  padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--sage); border-color: var(--sage); }

/* ── Buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 500; font-size: 0.82rem;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 15px 26px; border-radius: 2px; border: 1px solid var(--bark);
  transition: background .2s, color .2s, border-color .2s; cursor: pointer;
}
.btn--primary { background: var(--bark); color: var(--paper); }
.btn--primary:hover { background: var(--sage); border-color: var(--sage); }
.btn--ghost { background: transparent; color: var(--bark); }
.btn--ghost:hover { background: var(--bark); color: var(--paper); }
.site-nav .btn { padding: 11px 20px; color: var(--paper); border-bottom: 1px solid var(--bark); }
.site-nav .btn:hover { color: var(--paper); }

/* ── Hero ─────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: clamp(64px, 10vw, 128px) 0 clamp(72px, 10vw, 120px); }
.hero .container { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 48px; }
.hero h1 { margin: 22px 0 26px; }
.hero .lede { margin-bottom: 36px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.hero__badges span { font-weight: 500; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mid); }

/* ── Sections ─────────────────────────────────────── */
.section { padding: clamp(72px, 9vw, 112px) 0; }
.section--warm { background: var(--warm); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 52px; flex-wrap: wrap; }
.section-head h2 { margin-top: 14px; max-width: 14em; }
.section-head p { max-width: 26em; color: var(--brown); }

/* Coverage cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.card {
  position: relative; padding: 34px 28px 30px; background: var(--paper);
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 14px; text-decoration: none; transition: background .25s;
}
.card:hover { background: #F8F4EA; }
.card__num { font-family: var(--serif); font-style: italic; color: var(--clay); font-size: 1.1rem; }
.card h3 { font-size: 1.75rem; }
.card p { color: var(--brown); font-size: 0.97rem; flex: 1; }

/* Approach / split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 96px); align-items: start; }
.split h2 { margin: 14px 0 22px; }
.steps { list-style: none; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 26px 0; border-bottom: 1px solid var(--hairline); }
.steps li:first-child { border-top: 1px solid var(--hairline); }
.steps .num { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--sage); }
.steps h3 { font-size: 1.35rem; margin-bottom: 6px; }
.steps p { color: var(--brown); font-size: 0.97rem; }

/* Quote / testimonial */
.quote { text-align: center; max-width: 820px; margin: 0 auto; }
.quote .pine-sm { height: 64px; width: auto; margin: 0 auto 28px; }
.quote blockquote { font-family: var(--serif); font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.25; }
.quote cite { display: block; margin-top: 24px; font-style: normal; }

/* CTA band (bark ground) */

/* Page hero (inner pages) */
.page-hero { padding: clamp(64px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--hairline); }
.page-hero h1 { margin-top: 18px; font-size: clamp(2.4rem, 5.5vw, 4rem); }
.page-hero .lede { margin-top: 20px; }

/* Contact */
.form { display: grid; gap: 18px; background: var(--warm); padding: clamp(24px, 4vw, 40px); border-top: 2.5px solid var(--sage); }
.form label { display: grid; gap: 6px; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); }
.form input, .form select, .form textarea {
  font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--bark);
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 2px; padding: 12px 14px;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--sage); outline-offset: 1px; }

/* ── Footer ───────────────────────────────────────── */
.site-footer { background: var(--bark); color: var(--hairline); padding: 64px 0 28px; font-size: 0.92rem; position: relative; }
.site-footer::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); pointer-events: none; }
.footer-grid { position: relative; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(244, 239, 227, 0.14); }
.footer-grid h4 { font-weight: 500; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--clay); margin-bottom: 14px; }
.footer-grid ul { list-style: none; display: grid; gap: 8px; }
.footer-grid a { text-decoration: none; color: var(--hairline); }
.footer-grid a:hover { color: var(--paper); }
.footer-bottom { position: relative; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: 0.8rem; color: var(--mid); }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .hero .container, .split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cards, .footer-grid { grid-template-columns: 1fr; }
  .lockup__mark { height: 42px; }
  .lockup__name { font-size: 1.6rem; }
  .lockup__divider { height: 34px; }
}


/* ── Header lockup: large, clay accent, sage rule ── */
.site-header { border-bottom: 3px solid var(--sage); }
.site-header .container { min-height: 156px; }
.site-header .lockup { gap: 24px; }
.site-header .lockup__mark { height: 116px; }
.site-header .lockup__divider { height: 92px; }            /* ≈0.8× mark height, per brand spec */
.site-header .lockup__name { font-size: 4rem; }
.site-header .lockup__sub { color: var(--clay); font-size: 0.92rem; gap: 10px; margin-top: 9px; }
.site-header .lockup__sub::before { width: 34px; }
.site-header .site-nav { gap: 36px; }
.site-header .site-nav a { font-size: 1.08rem; }
.site-header .site-nav .btn { font-size: 0.88rem; padding: 16px 26px; }

@media (max-width: 1000px) {
  .site-header .site-nav { gap: 24px; }
  .site-header .lockup__mark { height: 96px; }
  .site-header .lockup__divider { height: 76px; }
  .site-header .lockup__name { font-size: 3.2rem; }
  .site-header .lockup__sub { font-size: 0.76rem; }
}
@media (max-width: 820px) {
  .site-header .container { min-height: 112px; }
  .site-header .lockup { gap: 16px; }
  .site-header .lockup__mark { height: 78px; }
  .site-header .lockup__divider { height: 62px; }
  .site-header .lockup__name { font-size: 2.7rem; }
  .site-header .lockup__sub { font-size: 0.66rem; }
}
@media (max-width: 400px) {
  .site-header .container { min-height: 100px; }
  .site-header .lockup { gap: 12px; }
  .site-header .lockup__mark { height: 66px; }
  .site-header .lockup__divider { height: 52px; }
  .site-header .lockup__name { font-size: 2.25rem; }
  .site-header .lockup__sub { font-size: 0.56rem; letter-spacing: 0.36em; }
  .site-header .lockup__sub::before { width: 20px; }
}

/* ── Sage accents ─────────────────────────────────── */
/* hero: sage rule above the badges, sage badges */
.hero__badges { border-top: 2px solid var(--sage); }
.hero__badges span { color: var(--sage); }
.hero__badges span + span::before { content: "·"; margin-right: 28px; color: var(--clay); }

/* coverage cards: sage bar slides in on hover, sage numbers */
.card { overflow: hidden; }
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--sage); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.card:hover::before { transform: scaleX(1); }
.card__num { color: var(--sage); }

/* sage section ground (testimonial) */
.section--sage { background: var(--sage); color: var(--paper); position: relative; }
.section--sage::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); pointer-events: none; }
.section--sage .container { position: relative; }
.section--sage .label { color: var(--warm); }

/* inner page heroes: sage label rule + thicker sage underline */
.page-hero { border-bottom: 2px solid var(--sage); }

/* footer: sage band on top */
.site-footer { border-top: 6px solid var(--sage); }

/* ── Header menu: lowercase, bottom-aligned with the logo ── */
.site-header .container {
  align-items: flex-end;                 /* menu sits on the bottom edge of the pine mark */
  padding-top: 20px; padding-bottom: 20px;
}
.site-header .site-nav { align-items: flex-end; }
.site-header .site-nav a { text-transform: lowercase; line-height: 1; padding-bottom: 6px; }
.site-header .site-nav .btn { text-transform: lowercase; letter-spacing: 0.04em; font-size: 1rem; padding: 14px 26px; line-height: 1; }
@media (max-width: 820px) {
  .site-header .container { align-items: center; }   /* phones: menu button stays centered */
  .site-header .site-nav { align-items: flex-start; }
}

/* ── Rounded corners ──────────────────────────────── */
:root { --radius-lg: 22px; --radius-md: 14px; --radius-pill: 999px; }
.btn { border-radius: var(--radius-pill); }

/* coverage cards become separate rounded boxes */
.cards { gap: 20px; border: 0; }
.card { border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.card::before { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* form / embed boxes and inputs */
.form { border-radius: var(--radius-lg); border-top: 0; box-shadow: inset 0 3px 0 var(--sage); }
.form input, .form select, .form textarea { border-radius: var(--radius-md); }

/* how-we-work steps as rounded boxes */
.steps { gap: 14px; }
.steps li, .steps li:first-child { border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 24px 26px; background: var(--paper); }
.split .steps li { grid-template-columns: 52px 1fr; }

/* ── Header menu: light weight, underlined ───────── */
.site-header .site-nav a:not(.btn) {
  font-weight: 300;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--hairline);
  transition: color .2s, text-decoration-color .2s;
}
.site-header .site-nav a:not(.btn):hover,
.site-header .site-nav a:not(.btn)[aria-current="page"] {
  color: var(--sage);
  text-decoration-color: var(--sage);
}
.site-header .site-nav .btn { font-weight: 400; }

/* ── Home page contact form: centered, wide ─────── */
.home-form__head { text-align: center; max-width: 40em; margin: 0 auto 40px; }
.home-form__head .label-rule { justify-content: center; }
.home-form__head h2 { margin: 14px 0 12px; }
.home-form__head p { color: var(--brown); }
.home-form__box { max-width: 1000px; margin: 0 auto; background: var(--paper); padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 64px); }

/* Keep the sticky header from covering the form heading when jumping to /#contact */
#about, #contact, #team { scroll-margin-top: 140px; }
@media (max-width: 820px) { #about, #contact, #team { scroll-margin-top: 110px; } }

/* ── Our team (home page) ────────────────────────── */
.team__head { text-align: center; max-width: 40em; margin: 0 auto 48px; }
.team__head h2 { margin: 14px 0 12px; }
.team__head p { color: var(--brown); }
/* Nine identical cards: partners and staff share one grid style */
.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 24px; }

.member {
  display: flex; flex-direction: column; height: 100%;
  padding: 18px 18px 24px; background: var(--warm); border-radius: var(--radius-lg);
  box-shadow: inset 0 3px 0 var(--sage);
}
/* Square photo with iOS-icon-style rounded corners */
.member__photo {
  aspect-ratio: 1 / 1; width: 100%; overflow: hidden; margin-bottom: 18px;
  border-radius: 22.5%; background: var(--paper); border: 1px solid var(--hairline);
}
.member__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.member__photo.is-placeholder { display: grid; place-items: center; }
.member__photo.is-placeholder img { width: auto; height: 46%; object-fit: contain; opacity: .22; }
.member__name { font-size: 1.4rem; line-height: 1.2; padding: 0 6px; }
.member__title {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay);
  margin-top: 6px; padding: 0 6px; line-height: 1.5; min-height: 3em;   /* room for two lines, so every card lines up */
}
.member__facts { display: grid; gap: 6px; margin: 14px 6px 0; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 0.93rem; line-height: 1.45; }
.member__facts div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.member__facts dt { font-weight: 500; color: var(--sage); }
.member__facts dd { margin: 0; color: var(--brown); }

@media (max-width: 1000px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .team__grid { grid-template-columns: 1fr; grid-auto-rows: auto; max-width: 400px; margin-left: auto; margin-right: auto; }
  .member__title { min-height: 0; }
}

/* ── Header: keep 5 menu items + button on one line ── */
.site-header .lockup__sub, .site-header .site-nav a { white-space: nowrap; }
@media (max-width: 1200px) and (min-width: 821px) { .site-header .site-nav { gap: 26px; } }
@media (max-width: 1080px) and (min-width: 821px) {
  .site-header .site-nav { gap: 18px; }
  .site-header .lockup__mark { height: 84px; }
  .site-header .lockup__name { font-size: 2.8rem; }
}
@media (max-width: 960px) and (min-width: 821px) {
  .site-header .site-nav { gap: 14px; }
  .site-header .lockup { gap: 14px; }
  .site-header .lockup__mark { height: 68px; }
  .site-header .lockup__name { font-size: 2.3rem; }
  .site-header .lockup__sub { font-size: 0.68rem; letter-spacing: 0.2em; }
  .site-header .site-nav .btn { padding-left: 16px; padding-right: 16px; }
}

/* ── Footer icons: cross, flag, family ───────────── */
.footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.footer-bottom > :last-child { justify-self: end; }
.footer-icons { display: inline-flex; align-items: center; gap: 22px; color: var(--mid); opacity: .6; }
.footer-icon { display: block; height: 20px; width: auto; }
.footer-icon--flag { height: 15px; }
.footer-icon--family { height: 21px; }
@media (max-width: 820px) {
  .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .footer-bottom > :last-child { justify-self: center; }
  .footer-icons { order: -1; }
}

/* ── Copy-to-clipboard buttons (added by main.js next to phone/email) ── */
.copyable { display: inline-flex; align-items: center; gap: 8px; }
.copy-btn {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 1px solid currentColor; background: transparent; color: inherit;
  opacity: .45; cursor: pointer; transition: opacity .2s, color .2s, border-color .2s, background-color .2s;
}
.copy-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.copy-btn:hover, .copy-btn:focus-visible { opacity: 1; color: var(--sage); }
.copy-btn:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.copy-btn.is-copied { opacity: 1; color: var(--sage); }
.copy-btn__tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  padding: 4px 10px; border-radius: var(--radius-pill); background: var(--sage); color: var(--paper);
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.copy-btn.is-copied .copy-btn__tip { opacity: 1; transform: translate(-50%, 0); }

/* On the dark footer: Clay ring and tint */
.site-footer .copy-btn:hover, .site-footer .copy-btn:focus-visible, .site-footer .copy-btn.is-copied { color: var(--paper); border-color: var(--clay); background: rgba(176,128,72,.18); }
.site-footer .copy-btn__tip { background: var(--clay); color: var(--bark); }

/* ── About section (home page) ───────────────────── */
.about .split { align-items: start; }
.about__sub { font-size: 1.6rem; margin-bottom: 14px; }

/* ══ Header: three buttons (Start · Learn · Contact) ══════════════ */
.site-header .site-nav--buttons { display: flex; position: static; flex-direction: row; align-items: flex-end; gap: 12px; padding: 0; background: none; border: 0; }
.site-header .site-nav--buttons a.nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 118px; padding: 15px 28px; line-height: 1;
  font-family: var(--sans); font-size: 1rem; font-weight: 400; letter-spacing: 0.04em; text-transform: none;
  color: var(--bark); background: transparent;
  border: 1.5px solid var(--bark); border-radius: var(--radius-pill);
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.site-header .site-nav--buttons a.nav-btn:hover { background: var(--sage); border-color: var(--sage); color: var(--paper); text-decoration: none; }
.site-header .site-nav--buttons a.nav-btn--start { background: var(--bark); color: var(--paper); }
.site-header .site-nav--buttons a.nav-btn--start:hover { background: var(--sage); border-color: var(--sage); }
.site-header .site-nav--buttons a.nav-btn:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

@media (max-width: 1080px) and (min-width: 821px) {
  .site-header .site-nav--buttons a.nav-btn { min-width: 96px; padding: 13px 20px; }
}
@media (max-width: 960px) and (min-width: 821px) {
  .site-header .site-nav--buttons { gap: 8px; }
  .site-header .site-nav--buttons a.nav-btn { min-width: 0; padding: 12px 16px; font-size: 0.92rem; }
}
/* Phones: logo on top, the three buttons in a row underneath */
@media (max-width: 820px) {
  .site-header .container { flex-wrap: wrap; justify-content: center; row-gap: 16px; }
  .site-header .site-nav--buttons { width: 100%; justify-content: center; gap: 8px; }
  .site-header .site-nav--buttons a.nav-btn { flex: 1 1 0; min-width: 0; max-width: 140px; padding: 12px 10px; font-size: 0.95rem; }
}

/* ══ Start: three options in the hero ═════════════════════════════ */
.start-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.start-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 20px 20px 18px; border-radius: var(--radius-lg);
  background: var(--warm); border: 1.5px solid var(--hairline); color: var(--bark);
  text-decoration: none; line-height: 1.25; font-size: 0.95rem;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.start-option svg { width: 30px; height: 30px; fill: none; stroke: var(--sage); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.start-option strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.start-option:hover, .start-option:focus-visible { background: var(--sage); border-color: var(--sage); color: var(--paper); transform: translateY(-2px); }
.start-option:hover svg, .start-option:focus-visible svg { stroke: var(--paper); }
.start-option:first-child { background: var(--bark); border-color: var(--bark); color: var(--paper); }
.start-option:first-child svg { stroke: var(--clay); }
.start-option:first-child:hover { background: var(--sage); border-color: var(--sage); }
.start-option:first-child:hover svg { stroke: var(--paper); }
@media (max-width: 560px) {
  .start-options { grid-template-columns: 1fr; }
  .start-option { flex-direction: row; align-items: center; padding: 16px 18px; }
}

/* ══ Learn: menu of the informational sections ═══════════════════ */
.learn { padding: clamp(48px, 6vw, 72px) 0; border-top: 1px solid var(--hairline); text-align: center; }
.learn .label-rule { justify-content: center; }
.learn h2 { margin: 12px 0 26px; }
.learn-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.learn-menu a {
  padding: 11px 22px; border-radius: var(--radius-pill); border: 1px solid var(--hairline);
  background: var(--warm); color: var(--bark); text-decoration: none; font-size: 0.95rem;
  transition: background-color .2s, color .2s, border-color .2s;
}
.learn-menu a:hover, .learn-menu a:focus-visible { background: var(--sage); border-color: var(--sage); color: var(--paper); }

/* ══ Contact: info row above the form ════════════════════════════ */
.contact-info { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto 28px; padding: 0; }
.contact-info li { background: var(--paper); border-radius: var(--radius-lg); padding: 20px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.contact-info .label { color: var(--sage); }
.contact-info a { font-family: var(--serif); font-size: 1.2rem; color: var(--bark); text-decoration: none; }
.contact-info a:hover { color: var(--sage); }
.contact-info p { color: var(--brown); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 1000px) { .contact-info { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .contact-info { grid-template-columns: 1fr; } }

/* Anchor offsets for the sticky header */
#start, #learn, #coverage, #how-we-work, #reviews { scroll-margin-top: 140px; }
@media (max-width: 820px) { #start, #learn, #coverage, #how-we-work, #reviews, #about, #contact, #team { scroll-margin-top: 170px; } }
/* Phones: drop the big pine illustration so the Start options are on the first screen */
@media (max-width: 820px) { .hero { padding-top: 40px; } }

/* ── Header buttons: all three ink, Sage when hovered / focused / clicked / current ── */
.site-header .site-nav--buttons a.nav-btn,
.site-header .site-nav--buttons a.nav-btn--start { background: var(--bark); border-color: var(--bark); color: var(--paper); }
.site-header .site-nav--buttons a.nav-btn:hover,
.site-header .site-nav--buttons a.nav-btn:focus-visible,
.site-header .site-nav--buttons a.nav-btn:active,
.site-header .site-nav--buttons a.nav-btn[aria-current="true"] { background: var(--sage); border-color: var(--sage); color: var(--paper); }

/* ── Start options: four ink buttons (2 × 2), Sage when hovered / focused / clicked ── */
.start-options { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
.start-option,
.start-option:first-child { background: var(--bark); border-color: var(--bark); color: var(--paper); }
.start-option svg,
.start-option:first-child svg { stroke: var(--clay); }
.start-option:hover, .start-option:focus-visible, .start-option:active,
.start-option:first-child:hover, .start-option:first-child:focus-visible, .start-option:first-child:active { background: var(--sage); border-color: var(--sage); color: var(--paper); }
.start-option:hover svg, .start-option:focus-visible svg, .start-option:active svg { stroke: var(--paper); }
.start-option:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.start-option { flex-direction: row; align-items: center; gap: 16px; padding: 18px 20px; }
@media (max-width: 560px) { .start-options { grid-template-columns: 1fr; } }

/* ── Slogan + landscape illustration (top of home page) ── */
.landscape { padding: clamp(40px, 6vw, 72px) 0 0; text-align: center; }
.landscape__slogan { margin: 0 auto clamp(24px, 4vw, 40px); max-width: 16em; }
.landscape__img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--hairline);
  border-bottom: 3px solid var(--sage);
}
/* Start section now follows the image, so it needs less top space and no h1 gap */
.hero { padding-top: clamp(40px, 6vw, 72px); }
.hero .label-rule + .lede { margin-top: 18px; }
@media (max-width: 820px) { .hero { padding-top: 32px; } }

/* ── Start section: no tree, four buttons in one row ── */
.hero .container { grid-template-columns: 1fr; }
.hero .lede { max-width: 40em; }
.start-options { grid-template-columns: repeat(4, 1fr); max-width: none; }
@media (max-width: 1000px) { .start-options { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .start-options { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .start-option { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .start-option strong { font-size: 1.15rem; }
}

/* ══ Header: larger again (more room now that the menu is 3 buttons) ══ */
.site-header .container { min-height: 188px; }
.site-header .lockup { gap: 28px; }
.site-header .lockup__mark { height: 144px; }
.site-header .lockup__divider { height: 115px; }          /* ≈0.8× mark height */
.site-header .lockup__name { font-size: 5rem; }
.site-header .lockup__sub { font-size: 1.1rem; margin-top: 11px; }
.site-header .lockup__sub::before { width: 40px; }
@media (max-width: 1200px) {
  .site-header .container { min-height: 170px; }
  .site-header .lockup { gap: 24px; }
  .site-header .lockup__mark { height: 124px; }
  .site-header .lockup__divider { height: 99px; }
  .site-header .lockup__name { font-size: 4.3rem; }
  .site-header .lockup__sub { font-size: 0.95rem; }
}
@media (max-width: 1080px) and (min-width: 821px) {
  .site-header .container { min-height: 150px; }
  .site-header .lockup { gap: 20px; }
  .site-header .lockup__mark { height: 104px; }
  .site-header .lockup__divider { height: 83px; }
  .site-header .lockup__name { font-size: 3.6rem; }
  .site-header .lockup__sub { font-size: 0.8rem; }
}
@media (max-width: 960px) and (min-width: 821px) {
  .site-header .lockup { gap: 16px; }
  .site-header .lockup__mark { height: 88px; }
  .site-header .lockup__divider { height: 70px; }
  .site-header .lockup__name { font-size: 3rem; }
  .site-header .lockup__sub { font-size: 0.7rem; letter-spacing: 0.4em; }
  .site-header .lockup__sub::before { width: 28px; }
}
@media (max-width: 820px) {
  .site-header .container { min-height: 0; }
  .site-header .lockup { gap: 18px; }
  .site-header .lockup__mark { height: 92px; }
  .site-header .lockup__divider { height: 74px; }
  .site-header .lockup__name { font-size: 3.1rem; }
  .site-header .lockup__sub { font-size: 0.74rem; letter-spacing: 0.4em; }
  .site-header .lockup__sub::before { width: 28px; }
}
@media (max-width: 560px) {
  .site-header .lockup { gap: 14px; }
  .site-header .lockup__mark { height: 80px; }
  .site-header .lockup__divider { height: 64px; }
  .site-header .lockup__name { font-size: 2.7rem; }
  .site-header .lockup__sub { font-size: 0.64rem; letter-spacing: 0.36em; }
  .site-header .lockup__sub::before { width: 22px; }
}
@media (max-width: 400px) {
  .site-header .lockup { gap: 12px; }
  .site-header .lockup__mark { height: 72px; }
  .site-header .lockup__divider { height: 58px; }
  .site-header .lockup__name { font-size: 2.45rem; }
  .site-header .lockup__sub { font-size: 0.58rem; letter-spacing: 0.34em; }
  .site-header .lockup__sub::before { width: 18px; }
}
/* Anchor offsets for the taller header */
#start, #learn, #coverage, #how-we-work, #reviews, #about, #team, #contact { scroll-margin-top: 200px; }
@media (max-width: 1200px) { #start, #learn, #coverage, #how-we-work, #reviews, #about, #team, #contact { scroll-margin-top: 180px; } }
@media (max-width: 1080px) { #start, #learn, #coverage, #how-we-work, #reviews, #about, #team, #contact { scroll-margin-top: 160px; } }
@media (max-width: 820px)  { #start, #learn, #coverage, #how-we-work, #reviews, #about, #team, #contact { scroll-margin-top: 190px; } }

/* ══ Light / dark toggle switch ══════════════════════════════════ */
.theme-toggle {
  flex: none; align-self: center; position: relative;
  width: 68px; height: 36px; padding: 0; cursor: pointer;
  border-radius: var(--radius-pill); border: 1.5px solid var(--bark);
  background: transparent; color: var(--bark);
  transition: border-color .2s, background-color .2s;
}
.site-header .site-nav--buttons .theme-toggle { align-self: center; }
.theme-toggle__thumb {
  position: absolute; top: 3px; left: 3px; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bark); color: var(--paper);
  transition: transform .25s ease, background-color .2s;
}
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle__moon { display: none; }
.theme-toggle__hint { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); opacity: .45; }
.theme-toggle__hint svg { width: 14px; height: 14px; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--sage); }
.theme-toggle:hover .theme-toggle__thumb, .theme-toggle:focus-visible .theme-toggle__thumb { background: var(--sage); }
.theme-toggle:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
[data-theme="dark"] .theme-toggle__thumb { transform: translateX(32px); }
[data-theme="dark"] .theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: block; }
[data-theme="dark"] .theme-toggle__hint { right: auto; left: 10px; }
@media (max-width: 820px) {
  .site-header .site-nav--buttons .theme-toggle { width: 60px; }
  [data-theme="dark"] .theme-toggle__thumb { transform: translateX(24px); }
}

/* ══ Dark mode ═══════════════════════════════════════════════════ */
/* Swap the palette: dark grounds, light ink. Buttons that are "ink" in light mode become cream. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1C1710;       /* ground */
  --warm: #261F15;        /* secondary ground */
  --bark: #EFE8D6;        /* ink · text */
  --brown: #CBB892;       /* supporting text */
  --clay: #C99A62;
  --sage: #A6A26C;
  --deep-sage: #C5C190;
  --mid: #A8956E;
  --hairline: #463B2B;
}
[data-theme="dark"] .card:hover { background: #2E2618; }
[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .5; }
[data-theme="dark"] .landscape__img { filter: brightness(.9); }
/* These areas keep their light-mode colors in dark mode:
   the footer (already dark), the Sage testimonial band,
   and the contact form box. */
[data-theme="dark"] .site-footer,
[data-theme="dark"] .section--sage,
[data-theme="dark"] .home-form__box {
  --bark: #2E2416; --brown: #7A5C38; --clay: #B08048; --sage: #6B6840; --deep-sage: #4E4E2E;
  --mid: #9A8660; --hairline: #D4CAB0; --paper: #F4EFE3; --warm: #EDE5D0;
}
[data-theme="dark"] .site-footer { background: #120E08; }
[data-theme="dark"] .site-footer { border-top-color: #6B6840; }

/* Toggle: the faint icon on the empty side shows the mode you'd switch to */
.theme-toggle__sun-hint { display: none; }
[data-theme="dark"] .theme-toggle__moon-hint { display: none; }
[data-theme="dark"] .theme-toggle__sun-hint { display: block; }

/* "Start" lands a little lower: the Start section's label sits just under the header */
#start { scroll-margin-top: 140px; }
@media (max-width: 1200px) { #start { scroll-margin-top: 128px; } }
@media (max-width: 1080px) { #start { scroll-margin-top: 116px; } }
@media (max-width: 820px)  { #start { scroll-margin-top: 170px; } }


/* ── Larger pine above the client review ── */
.quote .pine-sm { height: 124px; margin-bottom: 32px; }
@media (max-width: 560px) { .quote .pine-sm { height: 96px; } }

/* ══ Footer: taller, larger logo; "Beyond" matches the cream pine ══ */
.site-footer { padding: 104px 0 36px; font-size: 1rem; }
.footer-grid { gap: 48px; padding-bottom: 64px; align-items: start; }
.footer-grid ul { gap: 12px; }
.footer-grid h4 { font-size: 0.76rem; margin-bottom: 18px; }
.site-footer .lockup,
.site-footer .lockup:hover { color: #F4EFE3; }              /* same cream as the pine mark */
.site-footer .lockup { gap: 22px; }
.site-footer .lockup__mark { height: 112px; }
.site-footer .lockup__divider { height: 90px; }
.site-footer .lockup__name { font-size: 3.8rem; }
.site-footer .lockup__sub { font-size: 0.86rem; gap: 10px; margin-top: 10px; }
.site-footer .lockup__sub::before { width: 32px; }
.footer-bottom { padding-top: 30px; font-size: 0.86rem; }
.footer-icon { height: 24px; }
.footer-icon--flag { height: 18px; }
.footer-icon--family { height: 25px; }
@media (max-width: 1000px) {
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer { padding-top: 72px; }
  .site-footer .lockup { gap: 16px; }
  .site-footer .lockup__mark { height: 88px; }
  .site-footer .lockup__divider { height: 70px; }
  .site-footer .lockup__name { font-size: 3rem; }
  .site-footer .lockup__sub { font-size: 0.68rem; letter-spacing: 0.4em; }
  .site-footer .lockup__sub::before { width: 22px; }
}
/* Give the larger footer logo room so "Insurance Group" stays on one line */
.site-footer .lockup__sub { white-space: nowrap; font-size: 0.8rem; }
.footer-grid { grid-template-columns: 2.8fr 1fr 1fr 1.2fr; }
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .footer-grid { grid-template-columns: 1fr; } .site-footer .lockup__sub { font-size: 0.66rem; } }

/* ══ Footer v3: logo + Company + Office; logo as tall as the lists ══ */
.footer-grid { grid-template-columns: auto 1fr 1fr; column-gap: clamp(48px, 7vw, 120px); align-items: stretch; }
.footer-grid > :first-child { grid-column: auto; display: flex; align-items: flex-end; }
.site-footer .lockup { gap: 28px; }
.site-footer .lockup__mark { height: 184px; }               /* ≈ height of the Company / Office lists */
.site-footer .lockup__divider { height: 147px; }
.site-footer .lockup__name { font-size: 6.2rem; }
.site-footer .lockup__sub { font-size: 1rem; margin-top: 14px; }
.site-footer .lockup__sub::before { width: 40px; }
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: auto 1fr 1fr; }
  .footer-grid > :first-child { grid-column: auto; }
  .site-footer .lockup { gap: 22px; }
  .site-footer .lockup__mark { height: 160px; }
  .site-footer .lockup__divider { height: 128px; }
  .site-footer .lockup__name { font-size: 5.2rem; }
  .site-footer .lockup__sub { font-size: 0.86rem; }
}
/* Tablets: logo on its own row, the two lists side by side below */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .site-footer .lockup__mark { height: 140px; }
  .site-footer .lockup__divider { height: 112px; }
  .site-footer .lockup__name { font-size: 4.6rem; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .site-footer .lockup { gap: 16px; }
  .site-footer .lockup__mark { height: 104px; }
  .site-footer .lockup__divider { height: 83px; }
  .site-footer .lockup__name { font-size: 3.3rem; }
  .site-footer .lockup__sub { font-size: 0.66rem; letter-spacing: 0.4em; }
  .site-footer .lockup__sub::before { width: 22px; }
}
@media (max-width: 400px) {
  .site-footer .lockup__mark { height: 92px; }
  .site-footer .lockup__divider { height: 74px; }
  .site-footer .lockup__name { font-size: 2.9rem; }
  .site-footer .lockup__sub { font-size: 0.6rem; letter-spacing: 0.36em; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .footer-grid { column-gap: 48px; }
  .site-footer .lockup__mark { height: 182px; }
  .site-footer .lockup__divider { height: 146px; }
  .site-footer .lockup__name { font-size: 5.6rem; }
}
@media (max-width: 1040px) and (min-width: 561px) {
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 48px; column-gap: 48px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .site-footer .lockup__mark { height: 140px; }
  .site-footer .lockup__divider { height: 112px; }
  .site-footer .lockup__name { font-size: 4.6rem; }
}
.footer-grid li { white-space: nowrap; }

/* ══ Footer logo = same size as the header logo at every screen width ══ */
.site-footer .lockup { gap: 28px; }
.site-footer .lockup__mark { height: 144px; }
.site-footer .lockup__divider { height: 115px; }
.site-footer .lockup__name { font-size: 5rem; }
.site-footer .lockup__sub { font-size: 1.1rem; letter-spacing: 0.47em; margin-top: 11px; }
.site-footer .lockup__sub::before { width: 40px; }
.footer-grid > :first-child { align-items: center; }
@media (max-width: 1200px) {
  .site-footer .lockup { gap: 24px; }
  .site-footer .lockup__mark { height: 124px; }
  .site-footer .lockup__divider { height: 99px; }
  .site-footer .lockup__name { font-size: 4.3rem; }
  .site-footer .lockup__sub { font-size: 0.95rem; }
}
@media (max-width: 1080px) {
  .site-footer .lockup { gap: 20px; }
  .site-footer .lockup__mark { height: 104px; }
  .site-footer .lockup__divider { height: 83px; }
  .site-footer .lockup__name { font-size: 3.6rem; }
  .site-footer .lockup__sub { font-size: 0.8rem; }
}
@media (max-width: 960px) {
  .site-footer .lockup { gap: 16px; }
  .site-footer .lockup__mark { height: 88px; }
  .site-footer .lockup__divider { height: 70px; }
  .site-footer .lockup__name { font-size: 3rem; }
  .site-footer .lockup__sub { font-size: 0.7rem; letter-spacing: 0.4em; }
  .site-footer .lockup__sub::before { width: 28px; }
}
@media (max-width: 820px) {
  .site-footer .lockup { gap: 18px; }
  .site-footer .lockup__mark { height: 92px; }
  .site-footer .lockup__divider { height: 74px; }
  .site-footer .lockup__name { font-size: 3.1rem; }
  .site-footer .lockup__sub { font-size: 0.74rem; letter-spacing: 0.4em; }
}
@media (max-width: 560px) {
  .site-footer .lockup { gap: 14px; }
  .site-footer .lockup__mark { height: 80px; }
  .site-footer .lockup__divider { height: 64px; }
  .site-footer .lockup__name { font-size: 2.7rem; }
  .site-footer .lockup__sub { font-size: 0.64rem; letter-spacing: 0.36em; }
  .site-footer .lockup__sub::before { width: 22px; }
}
@media (max-width: 400px) {
  .site-footer .lockup { gap: 12px; }
  .site-footer .lockup__mark { height: 72px; }
  .site-footer .lockup__divider { height: 58px; }
  .site-footer .lockup__name { font-size: 2.45rem; }
  .site-footer .lockup__sub { font-size: 0.58rem; letter-spacing: 0.34em; }
  .site-footer .lockup__sub::before { width: 18px; }
}

/* ══ FAQ carousel (replaces the "Get started" band) ═══════════════ */
.faq { position: relative; overflow: hidden; background: var(--bark); color: var(--paper); padding: clamp(72px, 9vw, 112px) 0; }
.faq::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .8; pointer-events: none; }
.faq .container { position: relative; }
.faq .label { color: var(--clay); }

.faq__controls { display: flex; gap: 10px; }
.faq__btn {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1.5px solid rgba(244, 239, 227, .35); background: transparent; color: var(--paper);
  transition: background-color .2s, border-color .2s, color .2s;
}
.faq__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.faq__icon-play { fill: currentColor !important; stroke: none !important; width: 18px !important; }
.faq__btn:hover, .faq__btn:focus-visible { background: var(--sage); border-color: var(--sage); }
.faq__btn:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.faq__pause { width: 44px; height: 44px; align-self: center; }
.faq__pause svg { width: 18px; height: 18px; }
.faq__icon-play { display: none; }
.faq.is-paused .faq__icon-pause { display: none; }
.faq.is-paused .faq__icon-play { display: block; }

.faq__viewport {
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; border-radius: var(--radius-lg);
}
.faq__viewport::-webkit-scrollbar { display: none; }
.faq__viewport:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }
.faq__track { list-style: none; display: flex; gap: 20px; padding: 0; margin: 0; }
.faq-card {
  flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px;
  padding: 30px 28px 32px; border-radius: var(--radius-lg);
  background: rgba(244, 239, 227, .06); border: 1px solid rgba(244, 239, 227, .14);
  box-shadow: inset 0 3px 0 var(--sage);
}
.faq-card__tag { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--clay); }
.faq-card h3 { font-size: 1.5rem; line-height: 1.2; color: var(--paper); }
.faq-card p { color: var(--hairline); font-size: 0.98rem; line-height: 1.65; }

.faq__footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; }
.faq__counter { font-size: 0.85rem; letter-spacing: 0.12em; color: var(--mid); font-variant-numeric: tabular-nums; }
.faq__current { color: var(--paper); }
.faq__dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.faq__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(244, 239, 227, .25); cursor: pointer; transition: background-color .2s, width .2s; }
.faq__dot.is-active { width: 24px; border-radius: var(--radius-pill); background: var(--clay); }

@media (max-width: 1000px) { .faq-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 640px) {
  .faq-card { flex-basis: 88%; padding: 26px 22px 28px; }
  .faq-card h3 { font-size: 1.3rem; }
  .faq__btn { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .faq__viewport { scroll-behavior: auto; } }

/* Dark mode: FAQ keeps its dark band (like the footer) */
[data-theme="dark"] .faq {
  --bark: #2E2416; --brown: #7A5C38; --clay: #B08048; --sage: #6B6840; --deep-sage: #4E4E2E;
  --mid: #9A8660; --hairline: #D4CAB0; --paper: #F4EFE3; --warm: #EDE5D0;
  background: #120E08;
}

/* Anchor offset for the FAQ link in the Learn menu */
#faq { scroll-margin-top: 200px; }
@media (max-width: 1200px) { #faq { scroll-margin-top: 180px; } }
@media (max-width: 1080px) { #faq { scroll-margin-top: 160px; } }
@media (max-width: 820px)  { #faq { scroll-margin-top: 190px; } }

/* ── Learn menu: ink buttons with light text, Sage on hover / focus / click ── */
.learn-menu a { background: var(--bark); border-color: var(--bark); color: var(--paper); }
.learn-menu a:hover, .learn-menu a:focus-visible, .learn-menu a:active { background: var(--sage); border-color: var(--sage); color: var(--paper); }
.learn-menu a:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

/* Coverage cards are no longer links: no hover highlight */
div.card:hover, [data-theme="dark"] div.card:hover { background: var(--paper); }
div.card:hover::before { transform: scaleX(0); }

/* ── Start section label: Clay, centered, with a matching rule on both sides ── */
#start .label-rule { display: flex; justify-content: center; color: var(--clay); }
#start .label-rule::after { content: ""; width: 28px; height: 1px; background: currentColor; }

/* ── Start section: no intro paragraph; badges centered under the buttons ── */
#start .start-options { margin-top: 30px; }
#start .hero__badges { justify-content: center; text-align: center; }
@media (max-width: 560px) {
  #start .label-rule { white-space: nowrap; letter-spacing: 0.2em; font-size: 0.66rem; gap: 8px; }
  #start .label-rule::before, #start .label-rule::after { width: 18px; }
}

/* ── Learn label: Clay, with a matching rule on both sides ── */
.learn .label-rule { color: var(--clay); }
.learn .label-rule::after { content: ""; width: 28px; height: 1px; background: currentColor; }

/* ── Office address: bold, with a copy button like the phone and email ── */
.contact-info strong[data-copy] { font-weight: 700; color: var(--bark); }
.copyable:has(> [data-copy]) { align-items: flex-start; }
.copyable:has(> [data-copy]) .copy-btn { margin-top: 1px; }
.contact-info strong { font-weight: 700; color: var(--bark); }
.contact-info__note { display: block; margin-top: -4px; font-size: .85rem; color: var(--mid); }

/* ── Coverage: three cards (Home, Auto, Business) ── */
.cards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }

/* ── Start buttons: icon + form name, centered ── */
.start-option { justify-content: center; text-align: center; }
@media (max-width: 560px) { .start-option { align-items: center; } }

/* ── Every section label: centered, Clay, with a rule on both sides (matches Start) ── */
.label-rule { display: flex; justify-content: center; color: var(--clay); }
.label-rule::after { content: ""; width: 28px; height: 1px; background: currentColor; }
/* Labels on two-column sections sit above both columns, centered on the page */
.section-label { margin-bottom: 18px; }
.split > .section-label { grid-column: 1 / -1; margin-bottom: 0; }
.split:has(> .section-label) { row-gap: 20px; }

/* ── Inner pages (About, Terms, Privacy, Licenses) ── */
.page-hero { text-align: center; }
.page-hero .lede { margin-left: auto; margin-right: auto; }
.legal__date { margin-top: 18px; font-size: 0.85rem; color: var(--mid); }
.legal { padding-top: clamp(48px, 6vw, 72px); }
.legal__body { max-width: 780px; color: var(--brown); line-height: 1.7; }
.legal__body > :first-child { margin-top: 0; }
.legal__body h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); color: var(--bark); margin: 52px 0 14px; }
.legal__body h3 { font-size: 1.25rem; color: var(--bark); margin: 28px 0 8px; }
.legal__body p { margin: 0 0 14px; }
.legal__body ul, .legal__body ol { margin: 0 0 16px; padding-left: 1.3em; }
.legal__body li { margin-bottom: 8px; }
.legal__body li::marker { color: var(--clay); }
.legal__body strong { color: var(--bark); font-weight: 600; }
.legal__body a { color: var(--bark); text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 3px; }
.legal__body a:hover { color: var(--sage); }
.legal__summary { background: var(--warm); border-radius: var(--radius-lg); padding: 24px 28px 12px; }
.legal__summary h2 { margin-top: 0; font-size: 1.4rem; }
.legal__callout { border-left: 3px solid var(--clay); background: var(--warm); padding: 14px 18px; border-radius: 0 10px 10px 0; color: var(--bark); }
.legal__note { font-size: 0.9rem; color: var(--mid); }
.facts { display: grid; gap: 0; margin: 0 0 16px; border-top: 1px solid var(--hairline); }
.facts > div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.facts dt { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); padding-top: 4px; }
.facts dd { margin: 0; color: var(--bark); }
@media (max-width: 560px) { .facts > div { grid-template-columns: 1fr; gap: 2px; } }
.table-wrap { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.license-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.license-table th, .license-table td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.license-table thead th { background: var(--warm); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); font-weight: 500; }
.license-table tbody th { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; color: var(--bark); }
.license-table tbody tr:last-child > * { border-bottom: 0; }
.license-table tr.is-placeholder > * { color: var(--mid); }

/* Footer: Facebook link and "Based in Michigan" */
.footer-social { display: inline-flex; align-items: center; gap: 8px; }
.footer-social svg { width: 16px; height: 16px; }
.footer-origin { white-space: nowrap; }

/* ── Section labels: no rules on either side ── */
.label-rule::before, .label-rule::after,
#start .label-rule::before, #start .label-rule::after,
.learn .label-rule::after { content: none; display: none; }

/* Connect cards: same Sage accent along the top edge as the form */
/* (Sage top accent removed from the Connect cards) */

/* About page: multi-column lists of coverage types and states */
.legal__body ul.list-cols { columns: 2; column-gap: 40px; }
.legal__body ul.list-cols--3 { columns: 3; }
.legal__body ul.list-cols li { break-inside: avoid; }
@media (max-width: 560px) { .legal__body ul.list-cols, .legal__body ul.list-cols--3 { columns: 1; } .legal__body ul.list-cols--3 { columns: 2; } }
.place-list { color: var(--brown); }

/* Careers page roles */
.legal__body .role { border-top: 1px solid var(--hairline); padding-top: 4px; }
.legal__body .role + .role { margin-top: 8px; }

/* ── Service page: carrier cards (laid out like the team cards) ── */
.service-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.service-emergency { margin: 18px auto 0; max-width: 38em; font-size: 0.9rem; color: var(--mid); }
.service { padding-top: clamp(48px, 6vw, 72px); }
.carrier-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 24px; }
@media (max-width: 1000px) { .carrier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .carrier-grid { grid-template-columns: 1fr; grid-auto-rows: auto; max-width: 440px; margin: 0 auto; } }
.carrier {
  display: flex; flex-direction: column; height: 100%;
  padding: 24px 24px 22px; background: var(--warm); border-radius: var(--radius-lg);
  box-shadow: inset 0 3px 0 var(--sage);
}
.carrier__name { font-size: 1.45rem; line-height: 1.2; }
.carrier__lines {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay);
  margin-top: 6px; line-height: 1.5; min-height: 3em;
}
.carrier__contacts { display: grid; gap: 12px; margin: 14px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline); }
.carrier__contacts dt { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); }
.carrier__contacts dd { margin: 3px 0 0; color: var(--brown); font-size: 0.92rem; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.carrier__contacts a { font-family: var(--serif); font-size: 1.15rem; color: var(--bark); text-decoration: none; }
.carrier__contacts a:hover { color: var(--sage); }
.carrier__hours { flex-basis: 100%; font-size: 0.8rem; color: var(--mid); }
.carrier__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 20px; }
.carrier__links a {
  display: inline-flex; align-items: center; padding: 9px 16px; border-radius: var(--radius-pill);
  background: var(--bark); color: var(--paper); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: background .2s;
}
.carrier__links a::after { content: "↗"; margin-left: 6px; font-size: 0.8em; opacity: .7; }
.carrier__links a:hover, .carrier__links a:focus-visible { background: var(--sage); }
.service-note { max-width: 46em; margin: 36px auto 0; text-align: center; font-size: 0.88rem; color: var(--mid); }

/* ── Connect cards: Bark (ink) theme with Clay labels ── */
.contact-info li { background: #2E2416; color: #F4EFE3; box-shadow: none; }
.contact-info li .label { color: #B08048; }
.contact-info li a, .contact-info li strong, .contact-info li strong[data-copy] { color: #F4EFE3; }
.contact-info li a:hover { color: #D9B88A; }
.contact-info .copy-btn { color: #F4EFE3; }
.contact-info .copy-btn:hover, .contact-info .copy-btn:focus-visible, .contact-info .copy-btn.is-copied { color: #F4EFE3; border-color: #B08048; background: rgba(176,128,72,.22); }
.contact-info .copy-btn__tip { background: #B08048; color: #2E2416; }
[data-theme="dark"] .contact-info li { border: 1px solid rgba(244,239,227,.14); }

/* Connect cards: three equal columns (Call, Text, Email) */
.contact-info { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .contact-info { grid-template-columns: 1fr; } }

/* Connect cards: a Sage border appears on hover (drawn inside the card, so nothing shifts) */
.contact-info li { transition: box-shadow .2s ease; }
.contact-info li:hover, .contact-info li:focus-within { box-shadow: inset 0 0 0 3px #6B6840; }

/* Start buttons that open a form in place (Auto Quote). The form tray slides out from
   underneath the buttons and sits a step back: recessed, darker ground, inner shadow. */
.start-options { position: relative; z-index: 1; }
.start-option[aria-expanded="true"] { background: var(--sage); border-color: var(--sage); color: var(--paper); }
.start-option[aria-expanded="true"] svg { stroke: var(--paper); }
.start-panel { display: grid; grid-template-rows: 0fr; max-width: 720px; margin-top: -14px; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.start-panel.is-open { grid-template-rows: 1fr; }
.start-panel__inner { min-height: 0; overflow: hidden; }
.start-panel__tray {
  position: relative;
  margin: 0 10px;
  padding: 34px clamp(16px, 3vw, 28px) 20px;
  background: var(--warm);
  border: 1px solid var(--hairline);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: inset 0 14px 16px -12px rgba(46,36,22,.38), 0 18px 30px -24px rgba(46,36,22,.35);
  transform: translateY(-24px); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.start-panel.is-open .start-panel__tray { transform: none; opacity: 1; }
.start-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.start-panel__head .label { color: var(--sage); }
.start-panel__close { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--hairline); border-radius: 50%; background: transparent; color: var(--bark); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.start-panel__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.start-panel__close:hover, .start-panel__close:focus-visible { background: var(--sage); border-color: var(--sage); color: var(--paper); }
.start-panel iframe { display: block; width: 100%; min-height: 420px; border: 0; border-radius: var(--radius-md); background: #fff; }
.start-panel + .hero__badges { margin-top: 28px; }
@media (max-width: 560px) { .start-panel__tray { margin: 0 4px; } }
@media (prefers-reduced-motion: reduce) { .start-panel, .start-panel__tray { transition: none; } }

/* Form tray: same width as the Start buttons, and starts just below them (not tucked under) */
.start-panel { max-width: none; margin-top: 0; }
.start-panel__tray { margin: 14px 0 0; padding-top: 20px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); transform: translateY(-12px); }
@media (max-width: 560px) { .start-panel__tray { margin: 12px 0 0; } }

/* Form tray: no frame. The panel content sits right on the page. */
.start-panel__tray { margin: 18px 0 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.start-panel iframe { background: transparent; border-radius: 0; }
@media (max-width: 560px) { .start-panel__tray { margin: 16px 0 0; } }
/* Dark mode: give the Canopy form a light ground (like the contact form), in case its text is always dark */
[data-theme="dark"] .start-panel__tray[data-canopy-alias] { background: #F4EFE3; border-radius: var(--radius-lg); padding: 20px clamp(16px, 3vw, 28px); }

/* Let the in-page form run a bit wider than the page content (up to 80px past the buttons on each side),
   but never closer than 16px to the screen edge. On phones it stays the width of the buttons. */
.start-panel { --form-bleed: min(80px, max(0px, (100vw - 100%) / 2 - 24px)); margin-left: calc(-1 * var(--form-bleed)); margin-right: calc(-1 * var(--form-bleed)); }

/* Cognito Forms contact form (Connect section): match the site.
   Cognito builds its look from CSS variables set on .cog-<form number>; these override them.
   The box keeps light-mode colors in dark mode (see the Dark mode block), so the form stays light there too. */
.home-form__box .cog-cognito {
  --font-family: var(--sans);
  --font-size: 16px;
  --gutter: 14px;                          /* Cognito spaces rows, labels and columns by this (default 25px); smaller = more compact */
  --color: var(--bark);
  --background-hsl: 43, 31%, 76%;          /* hairline: card and divider borders */
  --border-radius: 12px;
  --highlight: var(--sage);
  --highlight-reverse: var(--paper);
  --primary: var(--bark);
  --primary-reverse: var(--paper);
  --negative: #A4452C;
  --a__color: var(--clay);
  --form__background-color: transparent;
  --form__width: 100%;
  --header__color: var(--bark);
  --header__font-family: var(--serif);
  --header__font-weight: 400;
  --heading__color: var(--bark);
  --heading__font-family: var(--serif);
  --heading__font-weight: 400;
  --label__color: var(--bark);
  --label__font-family: var(--sans);
  --label__font-size: 0.95em;
  --label__font-weight: 500;
  --input__background-color: #FBF8F1;
  --input__border-color: #CDBF9F;
  --input__border-radius: 12px;
  --input__color: var(--bark);
  --input__padding-v: 9px;
  --input__padding-h: 14px;
  --input-highlight: var(--sage);
  --input-focus__box-shadow: 0 0 0 3px rgba(107, 104, 64, .2);
  --placeholder__color: var(--mid);
  --checkable__border-color: #CDBF9F;
  --checkbox__border-radius: 4px;
  --card__border-color: #CDBF9F;
  --button-primary__background-color: var(--bark);
  --button-primary__border-color: var(--bark);
  --button-primary__color: var(--paper);
  --button-primary__border-radius: var(--radius-pill);
  --button-primary__font-family: var(--sans);
  --button-primary__font-size: 0.82rem;
  --button-primary__font-weight: 500;
  --button-secondary__background-color: transparent;
  --button-secondary__border-color: var(--bark);
  --button-secondary__color: var(--bark);
  --button-secondary__border-radius: var(--radius-pill);
  --button-secondary__font-family: var(--sans);
  --button-secondary__font-weight: 500;
  font-family: var(--sans);
}
/* Send button: Bark, turns Sage on hover (same as the site's buttons) */
/* Cognito sizes its button with a very high-priority rule, so these few need !important */
.home-form__box .cog-cognito .cog-button--primary { letter-spacing: 0.18em !important; text-transform: uppercase !important; padding: 15px 28px !important; }
.home-form__box .cog-cognito .cog-button--primary:hover,
.home-form__box .cog-cognito .cog-button--primary:focus-visible {
  --button-primary__background-color: var(--sage);
  --button-primary__border-color: var(--sage);
  --primary: var(--sage);
  --primary-reverse: var(--sage);
}

/* Start section: three buttons (Quote, Upload, Service) in one row at every screen size */
.start-options { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .start-options { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .start-options { grid-template-columns: repeat(3, 1fr); gap: 8px; } .start-option { padding: 14px 8px; } }
/* Canopy Connect form inside the Quote panel: give it room while it loads */
.start-panel__tray[data-canopy-alias] { min-height: 560px; }

/* Quote panel placeholder ("Online quotes are coming soon") until Canopy Connect is set up */
.quote-soon { text-align: center; padding: clamp(28px, 5vw, 44px) 20px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.quote-soon__title { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin: 0 0 10px; }
.quote-soon__title em { font-style: italic; }
.quote-soon__text { margin: 0 auto 22px; max-width: 34em; opacity: .8; }
.quote-soon__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
[data-theme="dark"] .quote-soon .btn--ghost { color: #F4EFE3; border-color: rgba(244, 239, 227, .55); }
[data-theme="dark"] .quote-soon .btn--ghost:hover { background: #6B6840; border-color: #6B6840; color: #F4EFE3; }

/* FAQ: no heading; the cards sit right under the "FAQs" label.
   Below the cards: counter on the left, previous / pause / next centered, dots on the right. */
.faq .section-label + .faq__viewport { margin-top: 32px; }
.faq__footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin-top: 32px; }
.faq__footer .faq__counter { justify-self: start; }
.faq__footer .faq__controls { justify-self: center; align-items: center; }
.faq__footer .faq__dots { justify-self: end; }
/* Phones: buttons centered on their own row, counter and dots on the row below */
@media (max-width: 640px) {
  .faq__footer { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .faq__footer .faq__controls { grid-column: 1 / -1; grid-row: 1; }
}