/* ==========================================================================
   SHILOH SPECIALTY ROOFING — DESIGN SYSTEM
   ==========================================================================
   Brand constraint: two colors only — matte black and warm sand/tan — plus
   neutral off-white for body backgrounds where pure white/black would hurt
   readability. Tan is used sparingly: thin rule lines, dividers, link and
   button hover/focus states. It is not a background color for large areas.

   No photography exists yet (available spring). Every spot in this file
   where an image will eventually drop in is marked with an IMAGE SLOT
   comment stating the intended aspect ratio, so photography can be added
   later without a redesign.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS
   Headings run on Archivo (Google Fonts variable font, weights 700/800,
   width axis set to expanded via font-stretch) until licensed Monument
   Extended files exist. To swap Monument Extended in:
     1. Get the license and .woff2 files from the foundry.
     2. Place them in /assets/fonts/ using these exact names:
          monument-extended-regular.woff2
          monument-extended-bold.woff2
     3. Uncomment the two @font-face blocks below.
     4. Change ONE line: add "Monument Extended", to the front of
        --font-heading in the :root block just below. That's the whole
        swap — every heading on every page reads that one variable.
   -------------------------------------------------------------------------- */

/*
@font-face {
  font-family: "Monument Extended";
  src: url("../assets/fonts/monument-extended-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Monument Extended";
  src: url("../assets/fonts/monument-extended-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  /* ---- Brand colors (do not add more) ---- */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-tan: #c4a98b;
  --color-tan-dim: #a8916f; /* tan darkened ~15% for text/borders on white where AA contrast is needed */
  --color-offwhite: #f6f4f0; /* body backgrounds only, per brand spec */

  /* ---- Functional text colors ---- */
  --color-text-on-white: #111111;
  --color-text-on-white-muted: #4a4a4a;
  --color-text-on-black: #ffffff;
  --color-text-on-black-muted: #c9c9c9;

  /* ---- Type ---- */
  --font-heading: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* ---- Layout ---- */
  --container-width: 1200px;
  --container-pad: 1.25rem;
  --radius: 2px; /* architectural, not soft — corners stay near-square */

  /* ---- Motion ---- */
  --transition: 160ms ease;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-on-white);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-stretch: expanded;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.08;
  margin: 0 0 1rem;
}

h1 { font-size: clamp(2.25rem, 5vw + 1rem, 4.25rem); }
h2 { font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.5vw + 1rem, 1.75rem); }
h4 { font-size: 1.125rem; letter-spacing: 0.06em; }

p {
  margin: 0 0 1.25rem;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-tan-dim);
  margin: 0 0 0.75rem;
  display: block;
}
.section--dark .eyebrow { color: var(--color-tan); }

.rule {
  width: 56px;
  height: 3px;
  background: var(--color-tan);
  border: 0;
  margin: 0 0 1.5rem;
}
.rule--center { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.container--wide {
  max-width: 1560px;
}

.section {
  padding: clamp(3rem, 6vw, 6rem) 0;
}

.section--dark {
  background: var(--color-black);
  color: var(--color-text-on-black);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-white);
}
.section--dark p {
  color: var(--color-text-on-black-muted);
}

.section--offwhite {
  background: var(--color-offwhite);
}

.section-head {
  max-width: 720px;
  margin: 0 0 2.5rem;
}
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-tan);
  color: var(--color-black);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.95rem 1.75rem;
  border: 1.5px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

/* On white/offwhite: black outline button */
.btn--primary {
  color: var(--color-black);
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-tan);
  border-color: var(--color-tan);
  color: var(--color-black);
}

.btn--ghost {
  color: var(--color-black);
  border-color: var(--color-black);
  background: transparent;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--color-tan-dim);
  color: var(--color-tan-dim);
}

/* On black: white outline button */
.btn--on-dark {
  color: var(--color-white);
  border-color: var(--color-white);
  background: transparent;
}
.btn--on-dark:hover,
.btn--on-dark:focus-visible {
  border-color: var(--color-tan);
  color: var(--color-tan);
}

.btn--tan {
  color: var(--color-black);
  border-color: var(--color-tan);
  background: var(--color-tan);
}
.btn--tan:hover,
.btn--tan:focus-visible {
  background: transparent;
  color: var(--color-tan);
}

.btn--block {
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--color-tan);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-black);
  border-bottom: 1px solid #1a1a1a;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.logo-link {
  display: block;
  flex-shrink: 0;
}
.logo {
  width: 220px;
  height: auto;
  display: block;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid #333;
  color: var(--color-white);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

.nav-primary {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 84vw);
  background: var(--color-black);
  transform: translateX(100%);
  transition: transform var(--transition);
  padding: 5.5rem 1.5rem 2rem;
  overflow-y: auto;
}
.nav-primary.is-open {
  transform: translateX(0);
}
.nav-primary ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav-primary a {
  display: block;
  padding: 0.85rem 0;
  color: var(--color-white);
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 1px solid #1f1f1f;
}
.nav-primary a[aria-current="page"] {
  color: var(--color-tan);
}
.nav-primary .nav-phone {
  margin-top: 1.5rem;
}

.header-cta {
  display: none;
}

@media (min-width: 960px) {
  .nav-toggle { display: none; }

  .nav-primary {
    position: static;
    width: auto;
    transform: none;
    background: transparent;
    padding: 0;
    overflow: visible;
    flex: 1;
    display: flex;
    justify-content: center;
  }
  .nav-primary ul {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.25rem;
  }
  .nav-primary a {
    display: block;
    padding: 0.25rem 0;
    border-bottom: 0;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
  }
  .nav-primary a:hover,
  .nav-primary a:focus-visible {
    color: var(--color-tan);
  }
  .nav-primary .nav-phone { display: none; }
  .header-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
  }
  .header-cta .btn {
    padding: 0.85rem 1.15rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }
  .header-phone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
  }
  .header-phone .label {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-tan);
  }
  .header-phone .number {
    font-family: var(--font-heading);
    font-stretch: expanded;
    font-size: 1.15rem;
    color: var(--color-white);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   TRUST STRIP
   Slim credential line under the header. Small and quiet on purpose, it's
   a footnote-weight fact, not a second headline.
   -------------------------------------------------------------------------- */
.trust-strip {
  background: var(--color-black);
  text-align: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid #1a1a1a;
}
.trust-strip .eyebrow {
  margin: 0;
  color: var(--color-tan);
}

/* --------------------------------------------------------------------------
   MOBILE STICKY CALL BAR
   Roofing leads call more than they submit — always-visible on mobile.
   -------------------------------------------------------------------------- */
.sticky-call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  background: var(--color-tan);
  border-top: 1px solid var(--color-black);
}
.sticky-call-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 0.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-black);
}
.sticky-call-bar a + a {
  border-left: 1px solid rgba(0, 0, 0, 0.25);
}
.sticky-call-bar svg {
  width: 16px;
  height: 16px;
}
body {
  padding-bottom: 58px; /* clears the sticky call bar on mobile */
}
@media (min-width: 960px) {
  .sticky-call-bar { display: none; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   HOME HERO — asymmetric split, ~75/25. Stacks on mobile, Specialty first.
   -------------------------------------------------------------------------- */
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .hero-split {
    grid-template-columns: 3fr 1fr;
    min-height: 640px;
  }
}

.hero-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  min-height: 60vh;
  background: var(--color-black);
  color: var(--color-white);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}
@media (min-width: 800px) {
  .hero-panel { min-height: 640px; }
}

.hero-panel--specialty {
  background: var(--color-black);
}
.hero-panel--storm {
  background: #0c0c0c;
  border-top: 1px solid #1c1c1c;
}
@media (min-width: 800px) {
  .hero-panel--storm {
    border-top: 0;
    border-left: 1px solid #1c1c1c;
    min-height: 640px;
    justify-content: center;
  }
}

/* IMAGE SLOT: hero-panel background image, when photography is available.
   Specialty panel target: 1600x1400 (landscape-tall), dark-graded exterior
   shot of a cedar/slate/metal roof at dusk, object-fit: cover, with this
   same black gradient overlay kept on top for text contrast:
   .hero-panel::before { background: linear-gradient(...); } */
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.85) 100%),
    repeating-linear-gradient(115deg, rgba(196,169,139,0.05) 0px, rgba(196,169,139,0.05) 1px, transparent 1px, transparent 64px);
}

.hero-panel .eyebrow { color: var(--color-tan); }
.hero-panel h1 {
  font-size: clamp(2rem, 4.5vw + 1rem, 3.75rem);
  margin-bottom: 1rem;
}
.hero-panel--storm h2 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
  margin-bottom: 0.75rem;
}
.hero-panel p {
  max-width: 46ch;
  color: var(--color-text-on-black-muted);
  font-size: 1.0625rem;
}
.hero-panel .btn-fake {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.95rem 1.75rem;
  border: 1.5px solid var(--color-white);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.hero-panel:hover .btn-fake,
.hero-panel:focus-visible .btn-fake {
  background: var(--color-tan);
  border-color: var(--color-tan);
  color: var(--color-black);
}
.hero-panel:hover::before,
.hero-panel:focus-visible::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.75) 100%),
    repeating-linear-gradient(115deg, rgba(196,169,139,0.09) 0px, rgba(196,169,139,0.09) 1px, transparent 1px, transparent 64px);
}

/* --------------------------------------------------------------------------
   PAGE HERO (interior pages) — simple black band with title.
   -------------------------------------------------------------------------- */
.page-hero {
  background: var(--color-black);
  color: var(--color-white);
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.page-hero .eyebrow { color: var(--color-tan); }
.page-hero p {
  max-width: 62ch;
  color: var(--color-text-on-black-muted);
  font-size: 1.125rem;
}
.page-hero .btn { margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-white);
  border: 1px solid #e7e2da;
  padding: 1.75rem;
}
.section--offwhite .card,
.section .card {
  background: var(--color-white);
}
.card h3 {
  font-size: 1.0625rem;
}
.card .rule {
  width: 32px;
  height: 2px;
  margin-bottom: 1rem;
}

.card--dark {
  background: var(--color-black);
  color: var(--color-white);
  border: 1px solid #232323;
}
.card--dark p { color: var(--color-text-on-black-muted); }

/* --------------------------------------------------------------------------
   SERVICE AREA LIST
   -------------------------------------------------------------------------- */
.area-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1.5rem;
}
@media (min-width: 640px) {
  .area-list { grid-template-columns: repeat(3, 1fr); }
}
.area-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e7e2da;
  font-size: 0.9375rem;
  font-weight: 600;
}
.section--dark .area-list li {
  border-bottom-color: #232323;
}
.area-list .county {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-tan-dim);
  font-weight: 700;
  margin-top: 0.15rem;
}
.section--dark .area-list .county { color: var(--color-tan); }

/* --------------------------------------------------------------------------
   DIAGRAM FIGURES (Specialty Materials page)
   -------------------------------------------------------------------------- */
.diagram {
  background: var(--color-white);
  border: 1px solid #e7e2da;
  padding: 1.5rem 1.5rem 1.25rem;
  margin: 0;
}
.diagram svg {
  width: 100%;
  height: auto;
}
.diagram figcaption {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e7e2da;
  font-size: 0.8125rem;
  color: var(--color-text-on-white-muted);
  line-height: 1.55;
}
.diagram figcaption strong {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 0.35rem;
}

/* --------------------------------------------------------------------------
   TECHNICAL DIAGRAM SVGs — shared classes so each diagram's markup only
   carries geometry, not inline styling. Black + tan only, per brand.
   -------------------------------------------------------------------------- */
.diagram svg text {
  font-family: var(--font-body);
}
.d-line { fill: none; stroke: var(--color-black); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.d-line-thin { fill: none; stroke: var(--color-black); stroke-width: 1; }
.d-line-accent { fill: none; stroke: var(--color-tan-dim); stroke-width: 1.5; }
.d-fill { fill: var(--color-white); stroke: var(--color-black); stroke-width: 2; stroke-linejoin: round; }
.d-fill-black { fill: var(--color-black); stroke: none; }
.d-fill-accent { fill: var(--color-tan); stroke: var(--color-black); stroke-width: 1.5; stroke-linejoin: round; }
.d-fill-accent-soft { fill: #eee3d6; stroke: var(--color-tan-dim); stroke-width: 1; }
.d-hatch { fill: none; stroke: var(--color-black); stroke-width: 1; opacity: 0.55; }
.d-dim { fill: none; stroke: var(--color-tan-dim); stroke-width: 1; }
.d-dim-cap { fill: var(--color-tan-dim); }
.d-label { font-size: 12px; fill: var(--color-black); font-weight: 600; }
.d-label-sm { font-size: 10.5px; fill: #4a4a4a; font-weight: 500; }
.d-label-dim { font-size: 10.5px; fill: var(--color-tan-dim); font-weight: 700; letter-spacing: 0.02em; }
.d-leader { fill: none; stroke: #8a8a8a; stroke-width: 1; stroke-dasharray: 2 2; }

/* --------------------------------------------------------------------------
   MATERIAL SECTION (Specialty Materials page repeating pattern)
   -------------------------------------------------------------------------- */
.material-block {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-bottom: 1px solid #e7e2da;
}
.material-block:last-child { border-bottom: 0; }
.material-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .material-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}
.material-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0;
  padding: 1rem 0;
  border-top: 1px solid #e7e2da;
  border-bottom: 1px solid #e7e2da;
}
.material-meta div {
  min-width: 120px;
}
.material-meta .label {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-tan-dim);
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.material-meta .value {
  font-weight: 700;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   PROCESS / TIMELINE STEPS (Storm & Insurance, Roof Replacement)
   -------------------------------------------------------------------------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: 1.5rem;
}
.step {
  position: relative;
  padding-left: 3.25rem;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-stretch: expanded;
  font-size: 1rem;
  border: 1.5px solid var(--color-tan);
  color: var(--color-tan-dim);
}
.section--dark .step::before { color: var(--color-tan); }
.step h3 { margin-bottom: 0.4rem; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   WORKED EXAMPLE TABLE (Storm & Insurance — ACV/RCV example)
   -------------------------------------------------------------------------- */
.worked-example {
  border: 1px solid var(--color-black);
}
.worked-example table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.worked-example caption {
  text-align: left;
  font-family: var(--font-heading);
  font-stretch: expanded;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--color-black);
  color: var(--color-white);
  padding: 0.85rem 1.25rem;
}
.worked-example th,
.worked-example td {
  text-align: left;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #e7e2da;
}
.worked-example thead th {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-on-white-muted);
  border-bottom: 1px solid var(--color-black);
}
.worked-example tbody tr:last-child td {
  border-bottom: 0;
}
.worked-example td:last-child,
.worked-example th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.worked-example tr.total td {
  font-weight: 700;
  border-top: 2px solid var(--color-black);
}
.worked-example .tan-highlight td {
  color: var(--color-tan-dim);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   DEFINITION LIST (ACV/RCV/depreciation glossary)
   -------------------------------------------------------------------------- */
.glossary {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 720px) {
  .glossary { grid-template-columns: repeat(3, 1fr); }
}
.glossary dt {
  font-family: var(--font-heading);
  font-stretch: expanded;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.glossary dt .term-full {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-tan-dim);
  margin-top: 0.25rem;
}
.section--dark .glossary dt .term-full { color: var(--color-tan); }
.glossary dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-on-white-muted);
}
.section--dark .glossary dd { color: var(--color-text-on-black-muted); }

/* --------------------------------------------------------------------------
   CALLOUT / LEGAL NOTE
   -------------------------------------------------------------------------- */
.callout {
  border-left: 3px solid var(--color-tan);
  padding: 1.25rem 1.5rem;
  background: var(--color-offwhite);
  font-size: 0.9375rem;
}
.section--dark .callout,
.page-hero .callout {
  background: #111111;
  color: var(--color-text-on-black-muted);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--color-black); }
.section--dark .callout strong,
.page-hero .callout strong { color: var(--color-white); }
.page-hero .callout { margin: 1.5rem 0; max-width: 62ch; }

/* --------------------------------------------------------------------------
   FAQ / ACCORDION-FREE Q&A (kept plain for accessibility + simplicity)
   -------------------------------------------------------------------------- */
.qa-list {
  display: grid;
  gap: 1.75rem;
}
.qa-list dt {
  font-weight: 700;
  font-size: 1.0625rem;
  margin-bottom: 0.4rem;
}
.qa-list dt {
  color: var(--color-black);
}
.qa-list dd {
  margin: 0;
  color: var(--color-text-on-white-muted);
}
.section--dark .qa-list dt { color: var(--color-white); }
.section--dark .qa-list dd { color: var(--color-text-on-black-muted); }

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.form-panel {
  background: var(--color-black);
  color: var(--color-white);
  padding: clamp(2rem, 4vw, 3rem);
}
.form-panel .eyebrow { color: var(--color-tan); }

.risk-reversal {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-tan);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #2a2a2a;
}
.risk-reversal p { margin: 0 0 0.4rem; }
.risk-reversal p:last-child { margin-bottom: 0; font-weight: 700; }
.form-panel--light .risk-reversal {
  border-bottom-color: #e7e2da;
}

.lead-form {
  display: grid;
  gap: 1.1rem;
}
.form-row {
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 560px) {
  .form-row--2 { grid-template-columns: repeat(2, 1fr); }
}

.field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--color-tan);
}
.form-panel--light .field label {
  color: var(--color-tan-dim);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  background: transparent;
  border: 1.5px solid #3a3a3a;
  color: var(--color-white);
  border-radius: var(--radius);
}
.form-panel--light .field input,
.form-panel--light .field select,
.form-panel--light .field textarea {
  border-color: #d8d2c6;
  color: var(--color-black);
  background: var(--color-white);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-tan);
  outline-offset: 1px;
  border-color: var(--color-tan);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23c4a98b' d='M4 6l4 4 4-4H4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.field-note {
  font-size: 0.75rem;
  color: var(--color-text-on-black-muted);
}
.form-panel--light .field-note {
  color: var(--color-text-on-white-muted);
}

.form-legal {
  font-size: 0.75rem;
  color: var(--color-text-on-black-muted);
  margin-top: 0.25rem;
}
.form-panel--light .form-legal {
  color: var(--color-text-on-white-muted);
}

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* --------------------------------------------------------------------------
   CONTACT SPLIT (Contact page)
   -------------------------------------------------------------------------- */
.contact-split {
  display: grid;
  gap: 0;
}
@media (min-width: 900px) {
  .contact-split { grid-template-columns: 1fr 1fr; }
}
.contact-info {
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--color-offwhite);
}
.contact-info dl {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.contact-info dt {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-tan-dim);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.contact-info dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* IMAGE SLOT: contact page map. Target 1:1 or 4:3 ratio, static map image
   or embedded map, once a public address is confirmed. Until then this is
   a text-only service-area statement to avoid a placeholder-looking box. */

/* --------------------------------------------------------------------------
   THANK YOU PAGE
   -------------------------------------------------------------------------- */
.thanks {
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: var(--color-black);
  color: var(--color-white);
}
.thanks .container { max-width: 720px; text-align: center; }
.thanks .rule--center { margin-top: 1.5rem; margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-black);
  color: var(--color-text-on-black-muted);
  padding: 3rem 0 6.5rem; /* extra bottom padding clears mobile call bar */
}
@media (min-width: 960px) {
  .site-footer { padding-bottom: 3rem; }
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}
.footer-brand p {
  max-width: 40ch;
  margin-top: 1rem;
  font-size: 0.875rem;
}
.footer-col h4 {
  color: var(--color-white);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.footer-col ul {
  display: grid;
  gap: 0.65rem;
}
.footer-col a {
  font-size: 0.875rem;
}
.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--color-tan);
}
.footer-bottom {
  border-top: 1px solid #1f1f1f;
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.75rem;
}
.footer-legal-note {
  max-width: 70ch;
  font-size: 0.75rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */
.text-tan { color: var(--color-tan-dim); }
.section--dark .text-tan { color: var(--color-tan); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }