/* ==========================================================================
   Prime Time Insurance Agency — design system
   Palette sampled from the agency logo: copper on charcoal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted.

   These used to come from Google Fonts, which cost a render-blocking
   stylesheet plus a DNS lookup and TLS handshake to a second origin before a
   single glyph could be drawn. Serving them from our own domain removes that
   whole round trip, and the preload hints in head() start the download in
   parallel with the CSS rather than after it.

   Both are the *variable* font, latin subset: one file covers every weight
   the site uses (400/500/600/700) instead of one file per weight. Playfair
   italic was requested from Google but never used anywhere, so it is gone.

   The unicode-range matches what Google served, so characters outside latin
   (the ★ in the trust bar, the → in "Get directions") keep falling back to a
   system font exactly as they did before.

   Files are cached immutably for a year — see vercel.json. That means a
   replacement font MUST get a new filename, or returning visitors keep the
   old one. Licences are in assets/fonts/OFL.txt and must ship with the files.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-latin-wght.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand */
  --copper:        #B07A56;
  --copper-light:  #D9AE8E;
  --copper-deep:   #8A5A3C;
  --copper-glow:   rgba(176, 122, 86, 0.18);

  --charcoal:      #1B1815;
  --charcoal-2:    #262220;
  --charcoal-3:    #332D28;

  --cream:         #FAF7F3;
  --cream-2:       #F1EAE2;
  --ink:           #24201C;
  --ink-soft:      #5C534B;
  --line:          #E3D9CE;

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Space */
  --gutter: 24px;
  --max: 1180px;
  --radius: 14px;
  --radius-sm: 9px;

  --shadow-sm: 0 1px 2px rgba(36, 32, 28, .06), 0 2px 8px rgba(36, 32, 28, .05);
  --shadow-md: 0 4px 12px rgba(36, 32, 28, .08), 0 14px 34px rgba(36, 32, 28, .09);
  --shadow-lg: 0 10px 24px rgba(36, 32, 28, .10), 0 30px 70px rgba(36, 32, 28, .14);
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--copper-deep); text-decoration-color: rgba(138, 90, 60, .35); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.4rem); }
p  { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }

.eyebrow {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper-deep);
  margin: 0 0 .9rem;
}
.eyebrow.on-dark { color: var(--copper-light); }

.lede { font-size: 1.16rem; color: var(--ink-soft); }
.lede.on-dark { color: rgba(250, 247, 243, .78); }

section { padding: clamp(56px, 8vw, 104px) 0; }

/* ---------- Buttons ---------- */
.btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .92em 1.7em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit;
  font-size: .97rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }

.btn-primary {
  background: linear-gradient(135deg, var(--copper) 0%, var(--copper-deep) 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(138, 90, 60, .28), 0 10px 26px rgba(138, 90, 60, .22);
}
.btn-primary:hover { box-shadow: 0 4px 10px rgba(138, 90, 60, .32), 0 16px 36px rgba(138, 90, 60, .28); }

.btn-ghost { border-color: rgba(250, 247, 243, .42); color: var(--cream); }
.btn-ghost:hover { background: rgba(250, 247, 243, .1); border-color: var(--cream); }

.btn-outline { border-color: var(--line); background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-outline:hover { border-color: var(--copper); color: var(--copper-deep); }

.btn-lg { padding: 1.05em 2.1em; font-size: 1.03rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(27, 24, 21, .92);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(217, 174, 142, .16);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 78px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { height: 48px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: .02em;
}
.brand-sub {
  white-space: nowrap;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--copper-light);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: .55em .85em;
  border-radius: 8px;
  color: rgba(250, 247, 243, .84);
  font-size: .94rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s, background-color .16s;
}
.nav a:hover { color: #fff; background: rgba(250, 247, 243, .09); }
.nav a[aria-current="page"] { color: var(--copper-light); }

.has-menu { position: relative; }
.has-menu > button {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .55em .85em; border: 0; border-radius: 8px;
  background: none; color: rgba(250, 247, 243, .84);
  font: inherit; font-size: .94rem; font-weight: 500; cursor: pointer;
}
.has-menu > button:hover { color: #fff; background: rgba(250, 247, 243, .09); }
.has-menu > button svg { transition: transform .18s ease; }
.has-menu[data-open="true"] > button svg { transform: rotate(180deg); }
.menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 236px;
  padding-top: 10px;
  display: none;
}
.menu-inner {
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.has-menu[data-open="true"] .menu { display: block; }
.menu a {
  display: block;
  padding: .6em .8em;
  border-radius: 6px;
  color: var(--ink);
  font-size: .93rem;
}
.menu a:hover { background: var(--cream-2); color: var(--copper-deep); }

.header-cta { display: flex; align-items: center; gap: 10px; }
.header-phone {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--cream); font-weight: 600; font-size: .95rem; text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 1080px) { .header-cta .header-phone { display: none; } }
.nav .header-phone { display: none; }
.header-phone:hover { color: var(--copper-light); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid rgba(250, 247, 243, .28);
  border-radius: 9px;
  background: none; color: var(--cream);
  cursor: pointer;
  align-items: center; justify-content: center;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1000px 520px at 78% -8%, rgba(176, 122, 86, .30), transparent 62%),
    radial-gradient(700px 420px at 4% 108%, rgba(217, 174, 142, .13), transparent 60%),
    linear-gradient(168deg, var(--charcoal) 0%, #221E1A 52%, #14110F 100%);
  color: var(--cream);
  padding: clamp(64px, 9vw, 116px) 0 clamp(72px, 9vw, 120px);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity: .04;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--copper-light); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

.hero-points { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: .7rem; }
.hero-points li { display: flex; align-items: flex-start; gap: .65em; font-size: .97rem; color: rgba(250, 247, 243, .82); }
.hero-points svg { flex: none; margin-top: 3px; color: var(--copper-light); }

/* ---------- Quote card ---------- */
.quote-card {
  background: #fff;
  border-radius: 18px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.quote-card h2 { font-size: 1.55rem; margin-bottom: .25em; }
.quote-card .sub { font-size: .93rem; color: var(--ink-soft); margin-bottom: 1.4em; }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .4em;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: .82em .9em;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  font-size: .97rem;
  color: var(--ink);
  transition: border-color .16s, box-shadow .16s;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px var(--copper-glow);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; font-style: italic; }

/* "Best way to reach you back" — three radios that read as one control. */
.field.pref { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.field.pref legend {
  padding: 0;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: .4em;
}
.pref-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: stretch; }
.pref-row label {
  display: flex; align-items: center; justify-content: center; gap: .45em;
  text-transform: none; letter-spacing: 0; font-weight: 500;
  min-height: 44px; padding: .5em .4em;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer;
  font-size: .93rem; color: var(--ink);
  transition: border-color .16s, background .16s;
}
.pref-row input { width: auto; margin: 0; accent-color: var(--copper); flex: none; }
.pref-row label:hover { border-color: var(--copper); }
.pref-row label:has(input:checked) { border-color: var(--copper); background: var(--copper-glow); }
.pref-row label:has(input:focus-visible) { outline: 3px solid var(--copper-glow); outline-offset: 2px; }
@media (max-width: 400px) { .pref-row { grid-template-columns: 1fr; } }
/* Only after the visitor has tried to submit — never red on first sight. */
.was-validated .field :is(input:not([type="radio"]), select, textarea):invalid:not(:focus) { border-color: #C0574F; }
.was-validated .pref-row label:has(input:invalid) { border-color: #C0574F; }
.form-note { font-size: .79rem; color: var(--ink-soft); margin: .9em 0 0; line-height: 1.5; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 1rem; padding: .9em 1.1em; border-radius: var(--radius-sm); font-size: .93rem; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: #EDF6EE; color: #1E5B2B; border: 1px solid #C3E2C8; }
.form-status.err { background: #FCEFEF; color: #8A2B2B; border: 1px solid #F0CFCF; }

/* ---------- Trust bar ---------- */
.trustbar { background: var(--charcoal-2); color: var(--cream); padding: 22px 0; }
.trustbar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(20px, 4vw, 54px);
}
.trust-item { display: flex; align-items: center; gap: .6em; font-size: .88rem; color: rgba(250, 247, 243, .78); }
.trust-item strong { color: var(--copper-light); font-weight: 600; }
.trust-item svg { color: var(--copper); flex: none; }

/* The Google rating sits first in the trust bar. It ships with a "600+"
   fallback rendered server-side and is upgraded to the live figure by JS,
   so it still says something true if the API is unreachable. */
.trust-rating {
  text-decoration: none;
  /* It is the one link in the bar, so give it a real tap target. */
  padding: .55em .7em; margin: -.55em -.7em; border-radius: var(--radius-sm);
}
.trust-rating:hover { background: rgba(250, 247, 243, .07); }
.trust-rating:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
.trust-rating:hover strong { color: #fff; }
.trust-rating .stars { color: var(--copper); letter-spacing: .04em; display: inline-flex; gap: 1px; }
.trust-rating .stars .off { color: rgba(250, 247, 243, .3); }

/* ---------- Section headers ---------- */
.section-head { max-width: 680px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- Coverage cards ---------- */
.card-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Five cards: 3 on top, 2 centred beneath, instead of a ragged 4 + 1. */
@media (min-width: 1000px) {
  .card-grid.of-5 { grid-template-columns: repeat(6, 1fr); }
  .card-grid.of-5 > * { grid-column: span 2; }
  .card-grid.of-5 > :nth-child(4) { grid-column: 2 / span 2; }
  .card-grid.of-5 > :nth-child(5) { grid-column: 4 / span 2; }
}

.cov-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  overflow: hidden;
}
.cov-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--copper), var(--copper-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.cov-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(176, 122, 86, .4); }
.cov-card:hover::before { transform: scaleX(1); }
.cov-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(176, 122, 86, .16), rgba(217, 174, 142, .1));
  color: var(--copper-deep);
  margin-bottom: 18px;
}
.cov-card h3 { margin-bottom: .35em; }
.cov-card p { font-size: .95rem; color: var(--ink-soft); margin-bottom: 1.3em; }
.cov-link {
  margin-top: auto;
  font-size: .9rem; font-weight: 600; color: var(--copper-deep);
  display: inline-flex; align-items: center; gap: .4em;
}
.cov-card:hover .cov-link svg { transform: translateX(3px); }
.cov-link svg { transition: transform .2s ease; }

/* ---------- Carrier wall ---------- */
.carriers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.carrier {
  display: grid;
  place-items: center;
  height: 88px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.carrier:hover { border-color: rgba(176, 122, 86, .45); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.carrier img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
  opacity: .55;
  transition: opacity .25s ease;
}
.carrier:hover img { opacity: .95; }

/* ---------- Team photo ---------- */
.team-photo {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  width: 100%;
  height: auto;
}
figure { margin: 0 0 1.6em; }
figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: .7em; }

/* ---------- Alt section ---------- */
.band-dark {
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(176, 122, 86, .22), transparent 60%),
    linear-gradient(160deg, var(--charcoal) 0%, #1F1B18 100%);
  color: var(--cream);
}
.band-dark h2, .band-dark h3 { color: #fff; }
.band-tint { background: var(--cream-2); }

/* ---------- Feature split ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 66px);
  align-items: center;
}
.split.flip > :first-child { order: 2; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 2rem; }
.stat {
  padding: 20px 22px;
  border-radius: var(--radius-sm);
  background: rgba(250, 247, 243, .06);
  border: 1px solid rgba(217, 174, 142, .2);
}
.stat b { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--copper-light); line-height: 1; margin-bottom: .3rem; }
.stat span { font-size: .85rem; color: rgba(250, 247, 243, .72); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; counter-reset: step; }
.step { counter-increment: step; position: relative; padding-top: 58px; }
.step::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--copper), var(--copper-deep));
  color: #fff;
  font-family: var(--font-display);
  /* Pinned deliberately. This inherits 400, and the old Google Fonts request
     only fetched Playfair at 500/600/700, so the browser snapped these numerals
     to 500. The variable font does have a real 400, so leaving this unset would
     quietly make the step numbers lighter than they have always looked. */
  font-weight: 500;
  font-size: 1.2rem;
  box-shadow: 0 6px 16px rgba(138, 90, 60, .3);
}
.step h3 { font-size: 1.15rem; margin-bottom: .3em; }
.step p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* ---------- Service / quick actions ---------- */
.action-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.action {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s, transform .18s, box-shadow .2s;
}
.action:hover { border-color: var(--copper); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.action svg { color: var(--copper-deep); flex: none; }
.action b { display: block; font-size: .99rem; }
.action span { font-size: .85rem; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05em 2.4em 1.05em 0;
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 600;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 4px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper);
  transform: translateY(-65%) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq p { color: var(--ink-soft); font-size: .97rem; padding-bottom: .4em; margin: 0 0 1em; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 1.8rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: rgba(250, 247, 243, .7); padding: clamp(48px, 6vw, 72px) 0 28px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; }
.site-footer .footer-h {
  font-family: var(--font-body);
  font-size: .76rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--copper-light); margin: 0 0 1.1em;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6em; }
.site-footer a { color: rgba(250, 247, 243, .72); text-decoration: none; }
.site-footer a:hover { color: var(--copper-light); }
.footer-brand img { height: 78px; width: auto; margin-bottom: 18px; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(217, 174, 142, .28); border-radius: 50%;
  transition: background-color .18s, border-color .18s, color .18s;
}
.social a:hover { background: var(--copper); border-color: var(--copper); color: #fff; }
.footer-disclaimer {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(217, 174, 142, .16);
  font-size: .82rem;
  color: rgba(250, 247, 243, .70);
  line-height: 1.6;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-legal a { color: rgba(250, 247, 243, .78); }
.footer-legal a:hover { color: var(--copper-light); }
.footer-bottom {
  margin-top: 18px; padding-top: 0;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: .84rem; color: rgba(250, 247, 243, .72);
}
.hours-list { display: grid; gap: .35em; }
.hours-list div { display: flex; justify-content: space-between; gap: 18px; }
.hours-list div > span { white-space: nowrap; }
.hours-list div > span:last-child { text-align: right; }

/* Placeholder marker for details still to be supplied */
.tbd {
  background: rgba(176, 122, 86, .16);
  border-bottom: 1px dashed var(--copper);
  padding: 0 .25em;
  border-radius: 3px;
}

/* ---------- Page hero (interior) ---------- */
.page-hero {
  background:
    radial-gradient(760px 380px at 82% -20%, rgba(176, 122, 86, .26), transparent 62%),
    linear-gradient(165deg, var(--charcoal) 0%, #1E1A17 100%);
  color: var(--cream);
  padding: clamp(52px, 7vw, 86px) 0;
}
.page-hero h1 { color: #fff; max-width: 18ch; }
.breadcrumb { font-size: .84rem; color: rgba(250, 247, 243, .55); margin-bottom: 1rem; }
.breadcrumb a { color: rgba(250, 247, 243, .75); text-decoration: none; }
.breadcrumb a:hover { color: var(--copper-light); }

/* ---------- Prose ---------- */
.prose h2 { margin-top: 1.9em; }
.prose h3 { margin-top: 1.5em; }
.prose ul { padding-left: 1.2em; margin: 0 0 1.3em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--copper); }

.checklist { list-style: none; padding: 0; margin: 0 0 1.5em; display: grid; gap: .75em; }
.checklist li { display: flex; gap: .7em; align-items: flex-start; }
.checklist svg { flex: none; margin-top: 4px; color: var(--copper); }

.aside-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 104px;
}
.layout-aside { display: grid; grid-template-columns: 1.6fr .9fr; gap: clamp(30px, 4vw, 56px); align-items: start; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-grid, .split, .layout-aside { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .aside-card { position: static; }
}

@media (max-width: 860px) {
  .nav, .header-phone { display: none; }
  .nav-toggle { display: flex; }
  .site-header.open .nav {
    display: flex;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 2px;
    padding: 14px var(--gutter) 22px;
    background: var(--charcoal);
    border-bottom: 1px solid rgba(217, 174, 142, .18);
    max-height: calc(100vh - 78px);
    overflow-y: auto;
  }
  .site-header.open .nav a { padding: .8em .6em; font-size: 1rem; }
  .site-header.open .nav .header-phone {
    display: inline-flex !important; margin-top: 10px; padding: .85em 1em;
    border: 1px solid rgba(217, 174, 142, .35); border-radius: 999px; justify-content: center;
  }
  .site-header.open .has-menu { position: static; }
  .site-header.open .has-menu > button { width: 100%; justify-content: space-between; padding: .8em .6em; font-size: 1rem; }
  .site-header.open .menu {
    position: static; display: block; padding: 0 0 6px 14px; min-width: 0;
  }
  .site-header.open .menu-inner {
    background: none; border: 0; box-shadow: none; padding: 0;
  }
  .site-header.open .menu a { color: rgba(250, 247, 243, .72); }
  .site-header.open .menu a:hover { background: rgba(250,247,243,.08); color: var(--copper-light); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .brand-sub { display: none; }
  .header-cta .btn { padding: .8em 1.2em; font-size: .9rem; }
}

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

/* Appointment-only callout on the contact page */
.appt-note {
  display: flex;
  gap: .8em;
  align-items: flex-start;
  margin: 1.6em 0 0;
  padding: 1.1em 1.2em;
  background: rgba(176, 122, 86, .10);
  border: 1px solid rgba(176, 122, 86, .32);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  line-height: 1.55;
}
.appt-note svg { flex: none; margin-top: 2px; color: var(--copper-deep); }

/* Skip link — visible only when focused */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: .85em 1.5em;
  background: var(--copper-deep);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); outline: 3px solid var(--copper-light); outline-offset: 2px; }

/* Keyboard focus needs to be obvious on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 2px;
  border-radius: 4px;
}
.site-header a:focus-visible,
.site-header button:focus-visible { outline-color: var(--copper-light); }
.site-footer a:focus-visible { outline-color: var(--copper-light); }

/* Footer links were 15-17px tall on a phone — below the WCAG 2.2 target size.
   Padding gives a comfortable tap area without changing how it looks. */
.site-footer ul a,
.footer-legal a {
  display: inline-block;
  padding-block: .32em;
}
.site-footer ul { gap: .35em; }

/* Very narrow phones: long button labels were pushing the page sideways. */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; }
  .hero-actions .btn,
  .cta-band .actions .btn { width: 100%; }
  .page-hero .hero-actions { gap: 10px; }
}

/* ---------- Carrier claim line directory ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.claim-search { max-width: 460px; margin: 0 auto 26px; }
.claim-search input {
  width: 100%;
  padding: .95em 1.1em;
  border-radius: 999px;
  border: 1.5px solid rgba(217, 174, 142, .32);
  background: rgba(250, 247, 243, .06);
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
}
.claim-search input::placeholder { color: rgba(250, 247, 243, .5); }
.claim-search input:focus {
  outline: none;
  border-color: var(--copper-light);
  box-shadow: 0 0 0 3px rgba(217, 174, 142, .18);
}

.claim-table {
  max-width: 820px;
  margin-inline: auto;
  border: 1px solid rgba(217, 174, 142, .18);
  border-radius: var(--radius);
  overflow: hidden;
}
.claim-head,
.claim-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr .9fr;
  gap: 14px;
  align-items: center;
  padding: .85em 1.2em;
}
.claim-head {
  background: rgba(250, 247, 243, .07);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper-light);
}
.claim-row { border-top: 1px solid rgba(217, 174, 142, .12); font-size: .95rem; }
.claim-row:nth-child(odd) { background: rgba(250, 247, 243, .025); }
.claim-name { color: var(--cream); font-weight: 500; }
.claim-tel { color: var(--copper-light); font-weight: 600; white-space: nowrap; text-decoration: none; }
.claim-tel:hover { text-decoration: underline; }
.claim-link { color: rgba(250, 247, 243, .72); font-size: .88rem; text-decoration: none; }
.claim-link:hover { color: var(--copper-light); text-decoration: underline; }
.claim-none { color: rgba(250, 247, 243, .38); font-size: .86rem; }
.claim-empty { padding: 1.6em 1.2em; margin: 0; color: rgba(250, 247, 243, .72); text-align: center; }
.claim-empty a { color: var(--copper-light); }
.claim-note {
  max-width: 820px; margin: 1.4em auto 0;
  font-size: .85rem; color: rgba(250, 247, 243, .55); text-align: center; line-height: 1.6;
}

.norcast-photo {
  width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  margin-bottom: 1.8em;
}

@media (max-width: 640px) {
  .claim-head { display: none; }
  .claim-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name tel" "link link";
    row-gap: 4px;
  }
  .claim-name { grid-area: name; }
  .claim-tel { grid-area: tel; }
  .claim-link, .claim-row .claim-none { grid-area: link; font-size: .84rem; }
}

/* ---------- Live Google reviews ---------- */
.reviews { margin-bottom: 30px; }
.reviews-summary {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .55em; margin-bottom: 26px; font-size: 1.02rem; color: var(--ink-soft);
}
.reviews-summary b { font-size: 1.28rem; color: var(--ink); font-family: var(--font-display); }
.stars { display: inline-flex; gap: 1px; color: var(--copper); letter-spacing: .04em; }
.stars .off { color: var(--line); }

.reviews-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  align-items: stretch;
}
.review {
  margin: 0; padding: 24px 24px 20px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 14px;
}
.review blockquote {
  margin: 0; font-size: .97rem; line-height: 1.62; color: var(--ink);
  /* Long reviews are clamped so the cards stay the same height. */
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.review figcaption { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.review figcaption img, .review .avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover;
}
.review .avatar {
  display: grid; place-items: center;
  background: var(--cream-2); color: var(--copper-deep);
  font-weight: 600; font-size: .95rem;
}
.review figcaption span span { display: block; font-size: .8rem; color: var(--ink-soft); }
.review figcaption b { font-size: .93rem; }
.reviews-credit { margin: 22px 0 0; font-size: .82rem; color: var(--ink-soft); text-align: center; }

/* ---------- Canopy Connect shortcut above the quote form ---------- */
.canopy {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 18px;
  background: var(--cream); border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
}
.canopy-text { flex: 1 1 210px; min-width: 0; }
.canopy-text b { display: block; font-size: .96rem; margin-bottom: .18em; }
.canopy-text span { display: block; font-size: .83rem; line-height: 1.5; color: var(--ink-soft); }
.canopy .btn { flex: none; padding: .72em 1.25em; font-size: .9rem; }
@media (max-width: 460px) { .canopy .btn { width: 100%; } }

.canopy-or {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px; color: var(--ink-soft);
  font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
}
.canopy-or::before, .canopy-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}