/* ============================================================
   Casaus Insurance Group - concept refinement
   Brand kept: #c9a84c gold, near-black ink, lion shield logo.
   Changed: display/body typeface pairing, type scale, card
   geometry, and the section-rule motif (heraldic lozenge).
   ============================================================ */

:root {
  /* Brand */
  --gold: #c9a84c;
  --gold-deep: #a8863a;
  --gold-pale: #e8d59a;

  /* Surfaces */
  --ink: #0e0e0f;
  --ink-soft: #191919;
  --ink-line: #2c2b28;
  --ivory: #f6f2e9;
  --ivory-deep: #ede6d7;
  --paper: #fffdf8;

  /* Text */
  --text: #23211d;
  --text-muted: #5c574e;
  --text-on-ink: #f3efe6;
  --text-on-ink-muted: #b9b2a4;

  --rule: #ded5c2;

  --font-display: "Libre Caslon Display", "Big Caslon", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  /* Type scale - deliberately large. Primary audience shops
     Medicare, life and annuities, so it skews 60+. */
  --t-base: 1.125rem;   /* 18px floor */
  --t-lede: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  --t-h3: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem);
  --t-h2: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  --t-h1: clamp(2.6rem, 1.7rem + 4vw, 5rem);
  --t-small: 1rem;
  --t-label: 0.95rem;

  --shell: 1240px;
  --shell-narrow: 780px;
  --radius: 3px;
  --ease: cubic-bezier(0.4, 0.14, 0.3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

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

/* The header is sticky, so anchor jumps must leave room for it or the
   target heading lands underneath it. */
[id] { scroll-margin-top: 7rem; }

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
@media (min-width: 900px) { .shell { width: min(100% - 5rem, var(--shell)); } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--ink);
  padding: 0.9rem 1.4rem; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- shared type pieces ---------- */

/* Eyebrow. Deliberately NOT a pill/chip - just letterspaced caps
   over a hairline, which reads as engraved stationery. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.eyebrow--onink { color: var(--gold); }

/* Heraldic rule: hairline with a lozenge at centre, echoing the
   shield in the logo. Replaces the plain gold underline. */
.crest-rule {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.4rem 0 0;
}
.crest-rule::before,
.crest-rule::after {
  content: "";
  height: 1px;
  width: 3rem;
  background: var(--gold);
  opacity: 0.55;
}
.crest-rule i {
  width: 7px; height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  display: block;
}
.crest-rule--center { justify-content: center; }
.crest-rule--center::before,
.crest-rule--center::after { width: 4.5rem; }

.section {
  padding: clamp(4rem, 3rem + 5vw, 7.5rem) 0;
}
.section--ivory { background: var(--ivory); }
.section--ink { background: var(--ink); color: var(--text-on-ink); }
.section--ink h2, .section--ink h3 { color: var(--paper); }

.section-head { max-width: 46rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--t-h2); }
.section-head p {
  font-size: var(--t-lede);
  color: var(--text-muted);
  margin-top: 1.5rem;
}
.section--ink .section-head p { color: var(--text-on-ink-muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1.05rem 2rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-pale); border-color: var(--gold-pale); }

.btn--ghost { background: transparent; color: var(--paper); border-color: rgba(246,242,233,0.5); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--outline { background: transparent; color: var(--text); border-color: var(--rule); }
.btn--outline:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- header ---------- */
/* The bar is sticky, so an in-page jump would otherwise park the target's
   heading underneath it. Offset every anchor target by the bar's real height. */
section[id], [id="quote"], [id="visit"], [id="about"] {
  scroll-margin-top: calc(var(--brand-h, 112px) + 2.25rem);
}

.topbar {
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.5rem 0;
}
.brand { display: flex; align-items: center; text-decoration: none; }
/* His full logo lockup carries the name, so no HTML wordmark sits beside it.
   The source PNG is a 1000px square with the artwork only 390px tall, which is
   why it rendered at ~21px in a 54px box. logo-lockup.png is cropped to the
   artwork itself, so height here is the real height on screen. */
.brand__logo {
  height: var(--brand-h, 112px);
  width: auto;
  display: block;
}
.brand__logo--foot { height: calc(var(--brand-h, 112px) * 0.75); }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-on-ink);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

.callbtn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--gold); text-decoration: none;
  font-weight: 700; font-size: 1.1rem;
  white-space: nowrap;
}
.callbtn:hover { color: var(--gold-pale); }
.callbtn svg { width: 1.1em; height: 1.1em; }

.navtoggle {
  display: none;
  background: none; border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem; cursor: pointer;
}
.navtoggle span {
  display: block; width: 24px; height: 2px;
  background: var(--paper); margin: 5px 0;
}

@media (max-width: 960px) {
  /* smaller lockup so it does not crowd a narrow bar next to the menu button */
  :root { --brand-h: 70px; }
  .navtoggle { display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.25rem 1.5rem;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 1rem 0; border-bottom: 1px solid var(--ink-line); font-size: 1.1rem; }
  .topbar .callbtn { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: var(--ink);
  isolation: isolate;
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%;
}
/* Two-stop scrim: heavy at the text edge, light over the house so
   the photograph still reads as a photograph. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(9,9,10,0.94) 0%, rgba(9,9,10,0.86) 34%, rgba(9,9,10,0.42) 62%, rgba(9,9,10,0.30) 100%),
    linear-gradient(to bottom, rgba(9,9,10,0.5) 0%, rgba(9,9,10,0) 30%, rgba(9,9,10,0.65) 100%);
}
.hero__inner {
  padding: clamp(4rem, 3rem + 8vw, 8.5rem) 0 0;
}
.hero__copy { max-width: 40rem; }
.hero h1 {
  font-size: var(--t-h1);
  color: var(--paper);
}
.hero h1 em {
  font-style: normal;
  color: var(--gold);
}
.hero__lede {
  font-size: var(--t-lede);
  color: #ddd7ca;
  margin-top: 1.75rem;
  max-width: 34rem;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-top: 2.5rem;
}

/* Trust strip: the 5.0 rating pulled out of the paragraph it was
   buried in and given its own architecture at the base of the hero. */
.trustbar {
  margin-top: clamp(3.5rem, 2rem + 6vw, 6rem);
  border-top: 1px solid rgba(201,168,76,0.35);
  display: grid;
  /* minmax(0, 1fr) rather than 1fr, so a long single word like
     "Independent" can shrink its track instead of overflowing it. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trustbar__cell {
  padding: 1.9rem 1.5rem 2.1rem 0;
  border-right: 1px solid rgba(201,168,76,0.18);
}
.trustbar__cell:last-child { border-right: 0; }
.trustbar__cell:not(:first-child) { padding-left: 1.75rem; }
.trustbar__k {
  font-family: var(--font-display);
  /* Fluid, not stepped. Four cells across a 320px phone leaves about
     100px of usable width per cell, and "Independent" is one word that
     cannot wrap, so the size has to fall continuously with the viewport
     instead of holding 2.1rem until a breakpoint rescues it. */
  font-size: clamp(1.15rem, 0.7rem + 2.1vw, 2.1rem);
  color: var(--gold);
  line-height: 1;
  display: flex; align-items: center; gap: 0.5rem;
}

/* Below 620px the four cells become two by two. Four items divides
   evenly into two columns, so the strip can never end on a short row
   with an empty cell beside it. */
@media (max-width: 620px) {
  .trustbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trustbar__cell { padding: 1.4rem 0.85rem 1.5rem 0; }
  .trustbar__cell:nth-child(even) { padding-left: 1rem; border-right: 0; }
  .trustbar__cell:nth-child(odd) { padding-left: 0; border-right: 1px solid rgba(201,168,76,0.18); }
  .trustbar__cell:nth-child(-n+2) { border-bottom: 1px solid rgba(201,168,76,0.18); }
}
.trustbar__v {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-ink-muted);
  margin-top: 0.7rem;
  text-wrap: balance;
}
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 15px; height: 15px; fill: var(--gold); }

@media (max-width: 900px) {
  .trustbar { grid-template-columns: repeat(2, 1fr); }
  .trustbar__cell { padding: 1.4rem 1rem 1.4rem 0; border-bottom: 1px solid rgba(201,168,76,0.18); }
  .trustbar__cell:nth-child(2n) { border-right: 0; padding-left: 1.25rem; }
  .trustbar__cell:nth-child(n+3) { border-bottom: 0; }
  .trustbar__k { font-size: 1.7rem; }
}
@media (max-width: 560px) {
  .hero__media img { object-position: 68% 50%; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ---------- value columns ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.pillar__num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-deep);
  letter-spacing: 0.16em;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.5rem;
}
.pillar h3 { font-size: var(--t-h3); margin-bottom: 0.9rem; }
.pillar p { color: var(--text-muted); }

/* ---------- coverage cards ---------- */
.covergrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.cover {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cover:hover {
  border-color: var(--gold);
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(20,16,8,0.13);
}
.cover__media { aspect-ratio: 3 / 2; overflow: hidden; }
.cover__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.cover:hover .cover__media img { transform: scale(1.05); }
.cover__body { padding: 1.9rem 1.75rem 2rem; display: flex; flex-direction: column; flex: 1; }
.cover__body h3 { font-size: var(--t-h3); margin-bottom: 0.85rem; }
.cover__body p { color: var(--text-muted); font-size: 1.05rem; }
.cover__more {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: flex; align-items: center; gap: 0.5rem;
}
.cover__more svg { width: 1em; height: 1em; transition: transform 0.3s var(--ease); }
.cover:hover .cover__more svg { transform: translateX(4px); }

/* ---------- agent / meet section ---------- */
.meet {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .meet { grid-template-columns: 1fr; } }

/* Portrait slot. Holds Jessy's own photograph. The frame keeps the
   4:5 ratio the image was cropped to, so object-fit never has to
   remove anything. The inset gold hairline is the same heraldic
   detail used by the crest rule. */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ivory-deep);
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.portrait::after {
  content: "";
  position: absolute; inset: 12px;
  border: 1px solid rgba(246,242,233,0.35);
  pointer-events: none;
}
.portrait__cap {
  margin-top: 1rem;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-deep);
}
.portrait__cap span {
  display: block;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

.meet__body h2 { font-size: var(--t-h2); }
.meet__body p { color: var(--text-muted); font-size: 1.1rem; margin-top: 1.4rem; }
/* Three stats, so this is a three column grid at every width. It used
   to be flex-wrap, which broke to 2 + 1 on a phone and left a dead cell
   beside "Multiple". The display size falls fluidly instead, so all
   three keep sitting on one row down to 320px. */
.meet__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.3rem + 3vw, 2.5rem);
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.meet__stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 0.75rem + 2.3vw, 2.4rem);
  color: var(--gold-deep);
  line-height: 1;
}
.meet__stat span {
  display: block;
  font-size: clamp(0.78rem, 0.66rem + 0.5vw, 0.95rem); font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 0.6rem;
}

/* ---------- testimonials ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2rem;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.quote {
  border: 1px solid var(--ink-line);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 2.25rem 2rem 2rem;
  background: var(--ink-soft);
  display: flex; flex-direction: column;
}
.quote blockquote {
  margin: 1.25rem 0 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--paper);
  /* balance is ignored past ~6 lines, so pretty is the one that actually stops
     a one-word last line on a real client quote */
  text-wrap: pretty;
  flex: 1;
}
.quote figcaption {
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--ink-line);
  font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-on-ink-muted);
}
/* Reviewer's real name on top, source and recency underneath. Google's terms
   expect attribution and a link back when their review content is shown. */
.quote figcaption { color: var(--gold); }
.quote figcaption span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-on-ink-muted);
}
.reviews-all { margin: 3rem 0 0; text-align: center; }
.reviews-all a {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(201,162,77,0.45);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.reviews-all a:hover { color: var(--paper); border-bottom-color: var(--paper); }
.reviews-all svg { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- quote form ----------
   Fields mirror the ones on his current site so this reads as his form
   finished, not a different one. Type is at the page's 18px floor or above,
   and the corners follow --radius rather than rounding into pills. */
.quoteform {
  max-width: 860px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
}
.qform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.qfield { margin-bottom: 1.5rem; display: flex; flex-direction: column; }
.qform__row .qfield { margin-bottom: 0; }
.qform__row + .qform__row, .qform__row + .qfield { margin-top: 1.5rem; }
.qfield label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.qfield__req { color: var(--gold-deep); }
.qfield input,
.qfield select,
.qfield textarea {
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.qfield textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
.qfield input::placeholder, .qfield textarea::placeholder { color: #9a9488; }
.qfield input:focus,
.qfield select:focus,
.qfield textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.22);
}
/* native select arrow is inconsistent across browsers, so draw one */
.qfield select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c574e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.15rem;
  padding-right: 3rem;
}
.qfield__err {
  display: none;
  margin-top: 0.5rem;
  font-size: var(--t-small);
  font-weight: 600;
  color: #a32d24;
}
.qfield.has-error input,
.qfield.has-error select,
.qfield.has-error textarea { border-color: #a32d24; }
.qfield.has-error .qfield__err { display: block; }

.qform__foot {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.qform__foot .btn { flex: none; }
.qform__note {
  flex: 1 1 20rem;
  margin: 0;
  font-size: var(--t-small);
  color: var(--text-muted);
  text-wrap: pretty;
}
.qform__note a { color: var(--gold-deep); font-weight: 700; }
.qform__status {
  display: none;
  margin: 1.75rem 0 0;
  padding: 1.15rem 1.35rem;
  border-left: 3px solid var(--gold);
  background: var(--ivory-deep);
  font-size: var(--t-base);
  color: var(--text);
  text-wrap: pretty;
}
.qform__status[data-show="true"] { display: block; }

@media (max-width: 640px) {
  .qform__row { grid-template-columns: 1fr; gap: 1.5rem; }
  .qform__row .qfield + .qfield { margin-top: 0; }
}

/* ---------- hours + location ---------- */
.locate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  /* Find Us carries a map and runs much taller than the hours list. With
     the default stretch, the hours panel ended in roughly 270px of empty
     card. Each panel sizes to its own content instead. */
  align-items: start;
}
.panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 2.25rem 2rem;
}
.panel h3 { font-size: var(--t-h3); margin-bottom: 1.5rem; }
.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.05rem;
}
.hours li:last-child { border-bottom: 0; }
.hours li[data-today="true"] { color: var(--gold-deep); font-weight: 700; }
.hours dt { font-weight: 600; }

.addr { font-style: normal; font-size: 1.1rem; line-height: 1.8; color: var(--text-muted); }
.addr strong { color: var(--text); display: block; font-size: 1.15rem; }
.phone-lg {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 1.5rem; font-weight: 700;
  color: var(--gold-deep); text-decoration: none;
  margin: 1.5rem 0;
  white-space: nowrap;
}
.phone-lg svg { width: 1.05em; height: 1.05em; flex: none; }
.phone-lg { padding: 0.35rem 0; }
/* tel: links in the footer are inline text, so they need explicit
   vertical padding to clear the 44px touch target */
.foot a[href^="tel:"] { display: inline-block; padding: 0.65rem 0; }
.phone-lg:hover { text-decoration: underline; }

/* Static map. Replaces the third-party grey "Click to Load Map"
   placeholder that reads as an unfinished build. */
.mapshot {
  margin-top: 1.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: block;
}
.mapshot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mapshot__tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(14,14,15,0.88));
  color: var(--paper);
  padding: 2.5rem 1.25rem 1rem;
  font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.06em;
}
.mapshot:hover .mapshot__tag { color: var(--gold); }

/* ---------- closing CTA ---------- */
.closer {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding: clamp(5rem, 3rem + 7vw, 9rem) 0;
  color: var(--paper);
  overflow: hidden;
}
.closer__media { position: absolute; inset: 0; z-index: -2; }
.closer__media img { width: 100%; height: 100%; object-fit: cover; }
.closer__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(9,9,10,0.86), rgba(9,9,10,0.9));
}
.closer h2 { font-size: var(--t-h2); max-width: 20ch; margin-inline: auto; }
.closer p {
  font-size: var(--t-lede); color: #d7d1c4;
  max-width: 42rem; margin: 1.5rem auto 0;
}
.closer__actions {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  margin-top: 2.75rem;
}

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--text-on-ink-muted); padding: clamp(3.5rem, 2rem + 4vw, 5rem) 0 0; }
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 3rem;
  padding-bottom: 3rem;
}
@media (max-width: 800px) { .foot__grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.foot__head {
  font-family: var(--font-body);
  font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 1.4rem;
  line-height: 1.3;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.2rem; }
/* Inline-block with vertical padding so each link clears the 44px
   touch target minimum without spreading the list out. */
.foot li a { display: inline-block; padding: 0.7rem 0; }
.foot a { text-decoration: none; font-size: 1.08rem; }
.foot a:hover { color: var(--gold); }
.foot__blurb { font-size: 1.05rem; max-width: 34rem; margin-top: 1.4rem; }
.foot__bar {
  border-top: 1px solid var(--ink-line);
  padding: 1.75rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between;
  font-size: 1rem;
  text-wrap: pretty;
}

/* ---------- demo disclosure ---------- */
.demobar {
  background: var(--gold);
  color: #2b230d;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  padding: 0.7rem 1.25rem;
  line-height: 1.5;
  margin: 0;
  text-wrap: balance;
}
.demobar a {
  color: #2b230d;
  font-weight: 700;
  display: inline-block;
  padding: 0.6rem 0;
}
/* Demo-layer links. These live in the banner, not in the site nav, so
   that stripping the banner at launch removes them all at once. */
.demobar__links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  align-items: center;
  margin-left: 0.35rem;
}
.demobar__links a { white-space: nowrap; }
.demobar__links a + a { position: relative; }
.demobar__links a + a::before {
  content: "";
  position: absolute; left: -0.78rem; top: 50%;
  width: 1px; height: 1em;
  transform: translateY(-50%);
  background: rgba(43,35,13,0.4);
}

/* ---------- interior page head ---------- */
.pagehead {
  background: var(--ink);
  color: var(--text-on-ink);
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0;
  border-bottom: 1px solid var(--ink-line);
}
.pagehead h1 { font-size: clamp(2.3rem, 1.6rem + 3vw, 4rem); color: var(--paper); max-width: 20ch; }
.pagehead__lede {
  font-size: var(--t-lede);
  color: var(--text-on-ink-muted);
  max-width: 40rem;
  margin-top: 1.5rem;
}

.grouphead {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--gold);
  margin-bottom: 2rem;
}
.grouphead:not(:first-child) { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }

/* ---------- coverage rows ----------
   The live site keeps a two-column row at every width, so on a phone
   the copy is squeezed into roughly 45% of the screen while the button
   floats beside it. Below 780px this collapses to a single column and
   the button goes full width.                                        */
.lines { display: grid; gap: 1.25rem; }
.line {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.85rem 1.9rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.line:hover { box-shadow: 0 10px 30px rgba(20,16,8,0.09); }
.line__text h3 { font-size: var(--t-h3); margin-bottom: 0.7rem; }
.line__text p { color: var(--text-muted); font-size: 1.05rem; max-width: 62ch; }
.line__cta { white-space: nowrap; }

@media (max-width: 780px) {
  .line {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.6rem 1.4rem;
  }
  .line__cta { width: 100%; justify-content: center; }
}

.helpline {
  margin-top: 2.5rem;
  font-size: 1.1rem;
  color: var(--text-muted);
  text-align: center;
}
.helpline a { color: var(--gold-deep); font-weight: 700; }

/* ---------- FAQ ---------- */
.faqs {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  max-width: 58rem;
  margin-inline: auto;
}
.faq {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 0 1.6rem;
}
.faq summary {
  font-family: var(--font-display);
  font-size: 1.3rem;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  text-wrap: balance;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.25s var(--ease);
}
.faq[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq p {
  color: var(--text-muted);
  padding-bottom: 1.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.2rem;
  max-width: 68ch;
}

/* ---------- reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* Four values. Column counts are explicit at every step, because
   auto-fit would land on 3 + 1 at some widths and leave a dead cell
   beside the last card. 4 divides evenly by 1, 2 and 4, so those are
   the only counts this grid is ever allowed to use. */
.values {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
@media (min-width: 640px)  { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.value { border-top: 2px solid var(--gold); padding-top: 1.4rem; }
.value h3 { font-size: var(--t-h3); margin-bottom: 0.8rem; }
.value p { color: var(--text-muted); text-wrap: pretty; }

/* Ten service areas. 10 divides by 2 and 5, so this grid steps
   1 -> 2 -> 5 and never touches 3 or 4. */
.serves {
  list-style: none;
  margin: clamp(2.5rem, 1.5rem + 3vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
@media (min-width: 960px) { .serves { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.serves li {
  padding: 1.05rem 0.75rem 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.05rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.serves li::before {
  content: "";
  width: 7px; height: 7px;
  flex: none;
  background: var(--gold);
  transform: rotate(45deg);
}
.serves__note {
  margin-top: 1.75rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* Bio block on the about page. Sits opposite the portrait. */
.bio > p { text-wrap: pretty; }
.bio > p + p { margin-top: 1.4rem; }
.bio h2 { font-size: var(--t-h2); }
/* h2 carries no bottom margin site-wide, so the first paragraph after it
   needs its own space or it collides with the heading. */
.bio h2 + p { margin-top: 1.5rem; }
.bio .eyebrow { margin-bottom: 1.25rem; }

/* ============================================================
   QUOTE PAGE
   ============================================================ */

/* The reassurance strip under the form heading. Three items, so the
   grid is 1 or 3 and never 2. */
.assure {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 860px;
  margin: 0 auto clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}
@media (min-width: 780px) { .assure { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.assure div {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}
.assure b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--gold-deep);
  margin-bottom: 0.3rem;
}
.assure span { color: var(--text-muted); font-size: 1.02rem; }

/* The three ways to reach him, below the form. Three items, so the grid
   steps 1 -> 3 and skips 2 entirely. A two column stage would leave the
   third panel alone on its own row with a dead cell beside it. */
.otherways {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  max-width: 860px;
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) auto 0;
}
@media (min-width: 900px) {
  .otherways {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1120px;
  }
}

/* Honeypot. Parked off-screen rather than display:none, because some
   bots skip fields they cannot render. aria-hidden and tabindex=-1 in
   the markup keep it away from keyboard and screen-reader users.
   NOTE for the narrow-width sweep: this is an intentional off-screen
   park, the same false positive the skip link produces. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submission states on the quote form. Colour carries meaning, so the
   wording changes too and never relies on colour alone. */
.qform__status[data-kind="ok"]      { border-left-color: #2f7d4f; }
.qform__status[data-kind="bad"]     { border-left-color: #a33b3b; }
.qform__status[data-kind="working"] { border-left-color: var(--rule); color: var(--text-muted); }
.qform__status a { color: var(--gold-deep); font-weight: 700; }

/* Button row under the home page quote invitation. Wraps and centres,
   so the two buttons never collide at a narrow width. */
.ctarow {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}

/* The two panels sit in an equal-height row. Without this the shorter
   one ends in a slab of empty card, and its call to action floats away
   from the one beside it. Pushing the action down fills the panel on
   purpose and lines the two actions up with each other. */
.otherways .panel { display: flex; flex-direction: column; }
.otherways .panel > :last-child { margin-top: auto; padding-top: 1.5rem; }

/* Two buttons side by side inside a panel. Wraps rather than colliding,
   so a narrow panel stacks them instead of pushing one off the edge. */
.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}