/* ============================================================
   Columbus Bathroom Remodel Pro — refined design-build studio
   Aesthetic: warm plaster, espresso ink, bronze. Editorial serif
   (Newsreader) + grotesque UI (Archivo). No AI-slop navy/gold.
   ============================================================ */

:root {
  /* warm neutral system */
  --ink: #1C1712;          /* espresso near-black */
  --ink-soft: #3A3229;
  --stone: #6B6055;        /* muted body / captions */
  --stone-light: #97897A;
  --paper: #F3ECE0;        /* warm plaster page bg */
  --paper-2: #EDE4D5;      /* alt band */
  --surface: #FCFAF5;      /* cards */
  --surface-2: #FBF6EE;
  --line: #E2D8C7;
  --line-soft: #EDE5D6;

  /* bronze accent */
  --bronze: #9A6A34;
  --bronze-deep: #7C5324;  /* accessible on cream */
  --bronze-ink: #5E3F1C;
  --bronze-glow: #D8AC6C;  /* on dark surfaces */
  --bronze-wash: rgba(154,106,52,.10);

  /* deep surfaces */
  --espresso: #211A13;
  --espresso-2: #2C2318;
  --sage: #59634F;         /* subtle secondary */

  --ok: #2C6E49;

  --shadow-xs: 0 1px 2px rgba(28,23,18,.05);
  --shadow-sm: 0 2px 6px rgba(28,23,18,.06), 0 8px 20px rgba(28,23,18,.05);
  --shadow-md: 0 6px 18px rgba(28,23,18,.09), 0 20px 44px rgba(28,23,18,.08);
  --shadow-lg: 0 18px 54px rgba(28,23,18,.16);

  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --max: 1200px;

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bronze-deep); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--bronze-ink); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.012em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.5rem); line-height: 1.04; font-weight: 480; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.12; }
h3 { font-size: 1.3rem; line-height: 1.25; }
p { margin: 0 0 1em; text-wrap: pretty; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* kicker / eyebrow shared */
.kicker {
  font-family: var(--sans);
  color: var(--bronze-deep);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.kicker::before {
  content: "";
  width: 22px; height: 1.5px;
  background: var(--bronze);
  display: inline-block;
}

/* -------- ANNOUNCEMENT BAR -------- */
.rentbar {
  background: var(--espresso);
  color: #E8D9BF;
  font-size: 13px;
  text-align: center;
  padding: 9px 16px;
  letter-spacing: .01em;
}
.rentbar strong { color: var(--bronze-glow); font-weight: 600; }

/* ======================================================
   HEADER + NAV
   ====================================================== */
.site-header {
  background: rgba(246,241,233,.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  max-width: var(--max);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  flex: 0 1 auto;
  min-width: 0;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 42px; height: 42px;
  flex: 0 0 42px;
  border-radius: 10px;
}
.brand-name {
  display: flex; flex-direction: column;
  font-family: var(--serif);
  font-weight: 560;
  font-size: 18px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  min-width: 0;
}
@media (max-width: 720px) {
  .header-inner { gap: 10px; padding: 11px 18px; }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .brand-name { font-size: 16px; }
  .brand-name small { display: none; }
}
.brand-name small {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--stone);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 3px;
}

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 13px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--bronze); }
.nav-toggle:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

.header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bronze-deep);
  color: #FFF;
  font-family: var(--sans);
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: transform .12s var(--ease), background .18s var(--ease);
}
.header-call:hover { background: var(--bronze-ink); color: #FFF; transform: translateY(-1px); }
.header-call svg { width: 15px; height: 15px; }
/* On phones the floating bottom bar handles calling — keep the header from overflowing */
@media (max-width: 720px) { .header-call { display: none; } }

/* mobile-first nav = hidden drawer */
.site-nav { display: none; }
.site-nav.open {
  display: block;
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 8px 0 18px;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}
.site-nav.open > ul { list-style: none; margin: 0; padding: 0 24px; max-width: var(--max); margin: 0 auto; }
.site-nav.open > ul > li { border-bottom: 1px solid var(--line-soft); }
.site-nav.open > ul > li > a {
  display: block;
  padding: 14px 4px;
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
}
.site-nav.open .mega { display: block; padding: 0 0 10px; }
.site-nav.open .mega-inner { display: block; padding: 0; border: none; box-shadow: none; background: transparent; animation: none; }
.site-nav.open .mega-aside { display: none; }
.site-nav.open .mega-h { display: none; }
.site-nav.open .mega-links { display: block; }
.site-nav.open .mega-link,
.site-nav.open .area-link {
  display: block;
  padding: 10px 4px 10px 16px;
  color: var(--stone);
  font-size: 14.5px;
  border-bottom: 1px solid var(--line-soft);
}
.site-nav.open .mega-link .mi-t { color: var(--ink-soft); font-weight: 550; }
.site-nav.open .mega-link .mi-d { display: none; }

/* ---- desktop nav ---- */
@media (min-width: 960px) {
  .header-inner { padding: 16px 24px; gap: 26px; }
  .nav-toggle { display: none; }
  /* Keep the brand on one line on desktop — a wrapped brand makes the header
     taller and reopens the dropdown hover gap. */
  .brand-name { font-size: 19px; white-space: nowrap; }
  .brand-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .site-nav {
    display: block;
    flex: 1 1 auto;
  }
  .site-nav > ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .site-nav > ul > li { position: static; }
  .site-nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 15px;
    font-size: 15px;
    font-weight: 550;
    color: var(--ink-soft);
    border-radius: 8px;
    white-space: nowrap;
    transition: color .15s var(--ease), background .15s var(--ease);
  }
  .site-nav > ul > li > a:hover { color: var(--ink); background: var(--bronze-wash); }
  .site-nav > ul > li.has-mega > a::after {
    content: "";
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: .55;
    transition: transform .2s var(--ease);
  }
  .site-nav > ul > li.has-mega:hover > a::after { transform: rotate(45deg) translateY(1px); }

  .header-call { margin-left: 4px; }

  /* MEGA PANEL — anchored to header, cannot overflow */
  .mega {
    display: none;
    position: absolute;
    /* Lift the hover zone up to meet the links (2px overlap) so the cursor
       never crosses dead space between the menu word and the panel.
       The extra top padding keeps the visible panel in the same place. */
    top: calc(100% - 18px);
    left: 24px; right: 24px;
    margin: 0 auto;
    max-width: calc(var(--max) - 0px);
    z-index: 120;
    padding-top: 28px;
    pointer-events: none;
  }
  .has-mega:hover > .mega,
  .has-mega:focus-within > .mega { display: block; pointer-events: auto; }
  .mega-inner {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 22px;
    display: grid;
    grid-template-columns: 1fr 268px;
    gap: 22px 26px;
    animation: megaIn .18s var(--ease) both;
  }
  @keyframes megaIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  .mega-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 18px;
    align-content: start;
  }
  .mega-areas .mega-links { grid-template-columns: repeat(3, 1fr); }

  .mega-h {
    grid-column: 1 / -1;
    font-family: var(--sans);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--stone-light);
    margin: 0 2px 8px;
  }
  .mega-link {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background .14s var(--ease);
  }
  .mega-link:hover { background: var(--bronze-wash); }
  .mega-link .mi-t {
    display: block;
    font-weight: 600; font-size: 15px; color: var(--ink);
    margin-bottom: 2px;
  }
  .mega-link .mi-d {
    display: block;
    font-size: 12.5px; color: var(--stone); line-height: 1.4;
  }
  .area-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14.5px; font-weight: 550; color: var(--ink-soft);
    transition: background .14s var(--ease), color .14s var(--ease);
  }
  .area-link::after { content: "\2197"; color: var(--bronze); opacity: 0; transition: opacity .14s var(--ease); }
  .area-link:hover { background: var(--bronze-wash); color: var(--ink); }
  .area-link:hover::after { opacity: 1; }

  .mega-aside {
    background: linear-gradient(160deg, var(--espresso), var(--espresso-2));
    border-radius: var(--radius); color: #EFE6D6;
    padding: 20px; align-self: stretch;
    display: flex; flex-direction: column; justify-content: center;
  }
  .mega-aside h4 { color: #FFF; font-size: 1.15rem; margin: 0 0 6px; }
  .mega-aside p { font-size: 13px; color: #C9BCA6; margin: 0 0 14px; }
}

/* In the tight desktop band the subtitle would truncate — drop it cleanly */
@media (min-width: 960px) and (max-width: 1120px) {
  .brand-name small { display: none; }
}

/* ======================================================
   BUTTONS
   ====================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  padding: 15px 26px;
  border-radius: 11px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  transition: transform .1s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--bronze-deep);
  color: #FFF;
  box-shadow: 0 6px 18px rgba(124,83,36,.30);
}
.btn-primary:hover { background: var(--bronze-ink); color: #FFF; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(124,83,36,.36); }
.btn-ghost {
  background: rgba(255,255,255,.06);
  color: #FBF4E8;
  border-color: rgba(240,230,214,.4);
}
.btn-ghost:hover { border-color: #F0E6D6; color: #FFF; background: rgba(255,255,255,.12); }
.btn-outline {
  background: transparent;
  color: var(--bronze-deep);
  border-color: var(--bronze);
}
.btn-outline:hover { background: var(--bronze-deep); color: #FFF; border-color: var(--bronze-deep); }
.btn-block { display: flex; width: 100%; justify-content: center; }
.btn-lg { padding: 17px 30px; font-size: 16.5px; }

/* ======================================================
   SECTIONS
   ====================================================== */
.section { padding: 72px 0; }
.section-tight { padding: 44px 0; }
.section-alt { background: var(--paper-2); }
.section-dark {
  background: linear-gradient(165deg, var(--espresso), #191309);
  color: #D9CDBB;
}
.section-dark h2, .section-dark h3 { color: #FFF; }
.section-header { max-width: 760px; margin-bottom: 42px; }
.section-header h2 { margin-bottom: 14px; }
.section-header p { color: var(--stone); font-size: 1.1rem; line-height: 1.55; }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header.center .kicker { justify-content: center; }

/* ======================================================
   HERO — full-bleed photo + warm scrim
   ====================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--espresso);
  color: #FBF4E8;
  isolation: isolate;
}
.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(20,14,8,.94) 0%, rgba(20,14,8,.82) 42%, rgba(20,14,8,.34) 78%, rgba(20,14,8,.15) 100%),
    linear-gradient(0deg, rgba(20,14,8,.55), rgba(20,14,8,0) 55%);
}
.hero-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 84px 24px 88px;
}
.hero-copy { max-width: 620px; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--bronze-glow);
  margin-bottom: 22px;
}
.hero .eyebrow::before { content:""; width: 24px; height: 1.5px; background: var(--bronze-glow); }
.hero h1 {
  color: #FFF;
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  line-height: 1.03;
  margin-bottom: 20px;
}
.hero h1 em {
  font-style: italic;
  color: var(--bronze-glow);
}
.hero-sub {
  font-size: 1.18rem;
  line-height: 1.55;
  color: #E4DAC9;
  max-width: 560px;
  margin-bottom: 30px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note { font-size: 13.5px; color: #C4B7A3; margin: 16px 0 0; display: flex; align-items: center; gap: 8px; }
.hero-note svg { width: 15px; height: 15px; color: var(--bronze-glow); flex: 0 0 15px; }

.trust-row {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 620px;
  border-top: 1px solid rgba(240,230,214,.18);
}
.trust-row div {
  color: #DACFBE;
  font-size: 13px;
  line-height: 1.4;
  padding: 20px 22px 0 0;
}
.trust-row div + div { padding-left: 22px; border-left: 1px solid rgba(240,230,214,.18); }
.trust-row strong {
  display: block;
  font-family: var(--serif);
  color: #FFF;
  font-size: 2rem;
  font-weight: 480;
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.trust-row strong .u { color: var(--bronze-glow); }

/* Hero quote form + two-column hero so the form (name + phone) is visible
   above the fold — required by the lead-gen checklist. */
.hero-quote { width: 100%; align-self: start; }
@media (min-width: 920px) {
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr minmax(390px, 440px);
    gap: 52px;
    align-items: start;
    padding: 74px 24px 86px;
  }
  .hero-copy { padding-top: 6px; }
}
@media (max-width: 919px) {
  .hero-quote { margin-top: 26px; max-width: 560px; }
}
@media (max-width: 640px) {
  .hero-inner { padding: 24px 20px 38px; }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero h1 { font-size: clamp(1.8rem, 6.6vw, 2.25rem); margin-bottom: 14px; }
  .hero-sub, .hero-note, .hero .trust-row { display: none; }
  .hero-quote { margin-top: 14px; }
  .trust-row { grid-template-columns: 1fr; }
  .trust-row div { padding: 18px 0 0; }
  .trust-row div + div { padding-left: 0; border-left: none; border-top: 1px solid rgba(240,230,214,.14); }
}

/* ======================================================
   TRUST STRIP (guarantees)
   ====================================================== */
.assurance {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.assurance-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
}
.assurance-item {
  background: var(--surface);
  padding: 22px 24px;
  display: flex; align-items: flex-start; gap: 13px;
}
.assurance-item svg { width: 22px; height: 22px; color: var(--bronze-deep); flex: 0 0 22px; margin-top: 2px; }
.assurance-item b { display: block; font-family: var(--sans); font-weight: 650; font-size: 14.5px; color: var(--ink); margin-bottom: 2px; }
.assurance-item span { font-size: 12.5px; color: var(--stone); line-height: 1.4; }
@media (max-width: 860px) { .assurance-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .assurance-inner { grid-template-columns: 1fr; } }

/* ======================================================
   PROOF STATS
   ====================================================== */
.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.proof-item { padding: 30px 28px; }
.proof-item + .proof-item { border-left: 1px solid var(--line-soft); }
.proof-item strong {
  display: block;
  font-family: var(--serif);
  font-size: 2.5rem; font-weight: 460;
  color: var(--ink);
  line-height: 1; margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.proof-item strong .u { color: var(--bronze-deep); }
.proof-item span { color: var(--stone); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 820px) {
  .proof { grid-template-columns: 1fr 1fr; }
  .proof-item:nth-child(3), .proof-item:nth-child(4) { border-top: 1px solid var(--line-soft); }
  .proof-item:nth-child(odd) { border-left: none; }
  .proof-item:nth-child(3) { border-left: none; }
}
@media (max-width: 460px) {
  .proof { grid-template-columns: 1fr; }
  .proof-item + .proof-item { border-left: none; border-top: 1px solid var(--line-soft); }
}

/* How-it-works process strip — de-risks the purchase, reads as competence (CXL). */
.process-head { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.process-head h2 { margin-top: 12px; }
.process-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 30px;
}
.pstep { display: flex; gap: 16px; align-items: flex-start; }
.pstep__n {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  color: var(--bronze-deep); background: var(--bronze-wash);
  border: 1px solid rgba(154,106,52,.28);
}
.pstep b { display: block; font-family: var(--sans); font-weight: 650; font-size: 15px; color: var(--ink); margin-bottom: 5px; letter-spacing: -0.005em; }
.pstep p { font-size: 13.5px; color: var(--stone); line-height: 1.5; }
@media (max-width: 860px) { .process-steps { grid-template-columns: 1fr 1fr; gap: 28px 26px; } }
@media (max-width: 500px) {
  .process-steps { grid-template-columns: 1fr; gap: 22px; }
  .process-head { text-align: left; }
}

/* ======================================================
   SERVICE CARDS (with photos)
   ====================================================== */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 680px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #D6C8B2; }
.card-photo {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-2);
  position: relative;
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card-photo img { transform: scale(1.05); }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin-bottom: 8px; font-size: 1.24rem; }
.card p { color: var(--stone); font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }
.card .link {
  margin-top: auto;
  color: var(--bronze-deep);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.card .link::after { content: "\2192"; transition: transform .16s var(--ease); }
.card:hover .link::after { transform: translateX(4px); }

/* icon fallback (kept for cards without photos) */
.card-icon {
  width: 46px; height: 46px;
  border-radius: 11px;
  background: var(--bronze-wash);
  color: var(--bronze-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.card-icon svg { width: 23px; height: 23px; }

/* ======================================================
   SPLIT / FEATURE
   ====================================================== */
.split {
  display: grid; gap: 40px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; gap: 60px; }
  .split.reverse > :first-child { order: 2; }
}
.split-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--espresso);
  box-shadow: var(--shadow-md);
  position: relative;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-copy h2 { margin-bottom: 16px; }
.split-copy > p { color: var(--stone); font-size: 1.05rem; }
.split-copy ul { list-style: none; padding: 0; margin: 22px 0 28px; }
.split-copy li {
  padding: 12px 0 12px 34px;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.split-copy li:last-child { border-bottom: none; }
.split-copy li::before {
  content: "";
  position: absolute; left: 2px; top: 17px;
  width: 15px; height: 9px;
  border-left: 2px solid var(--bronze); border-bottom: 2px solid var(--bronze);
  transform: rotate(-45deg);
}

/* ======================================================
   PROCESS STEPS
   ====================================================== */
.steps { display: grid; gap: 22px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px 24px;
  position: relative;
  counter-increment: step;
  box-shadow: var(--shadow-xs);
}
.step::before {
  content: "0" counter(step);
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--bronze);
  opacity: .85;
  line-height: 1;
  display: block;
  margin-bottom: 14px;
  font-weight: 460;
}
.step h3 { font-size: 1.18rem; margin-bottom: 6px; }
.step p { color: var(--stone); font-size: 14px; margin: 0; line-height: 1.5; }

/* ======================================================
   LEAD BAND / FORM
   ====================================================== */
.lead-band {
  background: linear-gradient(160deg, var(--espresso) 0%, #2A2013 100%);
  color: #EFE6D6;
  border-radius: var(--radius-xl);
  padding: 40px;
  display: grid; gap: 40px;
  grid-template-columns: 1fr;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.lead-band::before {
  content: ""; position: absolute; top: -40%; right: -10%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(216,172,108,.16), transparent 70%);
  pointer-events: none;
}
@media (min-width: 940px) {
  .lead-band { grid-template-columns: 1fr 1.05fr; padding: 48px; gap: 52px; }
}
.lead-band .kicker { color: var(--bronze-glow); }
.lead-band .kicker::before { background: var(--bronze-glow); }
.lead-band h2 { color: #FFF; }
.lead-band .lead-h1 { color: #FFF; font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.08; margin: 12px 0 12px; }
.lead-lede { color: #D9CCB9; font-size: 1.08rem; line-height: 1.5; }
.lead-trust { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 22px 0 0; }
.lead-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #ECE2D1; font-weight: 600; }
.lead-trust svg { width: 15px; height: 15px; color: var(--bronze-glow); flex: 0 0 15px; }
.lead-call { color: #CDBFAC; margin: 18px 0 0; font-size: 14.5px; }
.lead-call a { color: var(--bronze-glow); font-weight: 600; }
.field label .opt { color: var(--stone-light); font-weight: 400; }
.lead-copy > p { color: #D3C6B3; font-size: 1.06rem; }
.lead-copy ul { padding: 0; list-style: none; margin: 22px 0 0; }
.lead-copy li {
  color: #E7DDCC;
  padding: 10px 0 10px 30px;
  position: relative;
  font-size: 15px;
  border-bottom: 1px solid rgba(240,230,214,.12);
}
.lead-copy li:last-child { border-bottom: none; }
.lead-copy li::before {
  content: "";
  position: absolute; left: 0; top: 15px;
  width: 15px; height: 9px;
  border-left: 2px solid var(--bronze-glow); border-bottom: 2px solid var(--bronze-glow);
  transform: rotate(-45deg);
}
.lead-form {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.lead-form h3 { font-size: 1.35rem; margin-bottom: 4px; }
.lead-form .form-note { color: var(--stone); font-size: 13.5px; margin-bottom: 20px; }
.field { margin-bottom: 15px; }
.field label {
  display: block;
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit; font-size: 16px;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #FFFDF9;
  color: var(--ink);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input::placeholder { color: var(--stone-light); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px var(--bronze-wash);
  background: #FFF;
}
.field-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field textarea { min-height: 92px; resize: vertical; }
.form-privacy { font-size: 12px; color: var(--stone); margin-top: 12px; text-align: center; line-height: 1.5; }
.form-reassure {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 14px;
  font-size: 12px; color: var(--stone);
}
.form-reassure span { display: inline-flex; align-items: center; gap: 5px; }
.form-reassure svg { width: 13px; height: 13px; color: var(--ok); }
.form-success {
  display: none;
  background: #EDF6F0; color: var(--ok);
  border: 1px solid #C4E3D0; border-radius: 10px;
  padding: 16px 18px; font-size: 14.5px; margin-top: 14px;
}
.form-success.show { display: block; }
.form-error {
  display: none;
  color: #9A3221; background: #FBEDE9;
  border: 1px solid #F1C9BF; padding: 12px 14px;
  border-radius: 10px; font-size: 13px; margin-top: 12px;
}
.form-error.show { display: block; }

/* ======================================================
   GALLERY
   ====================================================== */
.gallery-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gallery-item .media { aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.gallery-item .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery-item:hover .media img { transform: scale(1.05); }
.gallery-item .cap { padding: 18px 20px; }
.gallery-item .cap h3 { font-size: 1.1rem; margin: 0 0 5px; }
.gallery-item .cap p { color: var(--stone); font-size: 13.5px; margin: 0; }
.photo-note {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--stone);
  border-radius: 10px;
  padding: 13px 16px; font-size: 13px; margin-bottom: 22px;
}

/* ======================================================
   AREAS
   ====================================================== */
.area-list { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .area-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .area-list { grid-template-columns: repeat(3, 1fr); } }
.area-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  font-weight: 550; font-size: 15px;
  transition: border-color .16s var(--ease), transform .16s var(--ease), background .16s var(--ease);
}
.area-list a:hover { border-color: var(--bronze); background: var(--surface-2); transform: translateX(3px); }
.area-list a::after { content: "\2192"; color: var(--bronze-deep); }

/* ======================================================
   FAQ
   ====================================================== */
.faq { max-width: 800px; margin: 0 auto; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 22px;
  margin-bottom: 12px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.faq details[open] { border-color: #D6C8B2; box-shadow: var(--shadow-xs); }
.faq summary {
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 500; font-size: 1.15rem;
  color: var(--ink);
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding: 16px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 12px;
  width: 12px; height: 12px; position: relative;
}
.faq summary::after {
  content: "+"; font-family: var(--sans); font-size: 24px; font-weight: 300;
  color: var(--bronze-deep); line-height: 1; transition: transform .2s var(--ease);
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0 0 18px; color: var(--stone); font-size: 15px; line-height: 1.6; }

/* ======================================================
   CALLBAND
   ====================================================== */
.callband {
  background: linear-gradient(135deg, var(--bronze) 0%, var(--bronze-ink) 100%);
  color: #FFF;
  border-radius: var(--radius-xl);
  padding: 40px;
  display: grid; gap: 20px; align-items: center;
  grid-template-columns: 1fr;
  text-align: center;
  position: relative; overflow: hidden;
}
.callband::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 300px at 80% -20%, rgba(255,255,255,.14), transparent 60%);
  pointer-events: none;
}
@media (min-width: 820px) { .callband { grid-template-columns: 1fr auto; text-align: left; padding: 44px 48px; } }
.callband h2 { color: #FFF; margin: 0 0 6px; }
.callband p { color: rgba(255,255,255,.9); margin: 0; font-size: 1.05rem; }
.callband .btn-primary { background: #FFF; color: var(--bronze-ink); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.callband .btn-primary:hover { background: var(--paper); color: var(--bronze-ink); }

/* ======================================================
   FOOTER
   ====================================================== */
.site-footer {
  background: linear-gradient(180deg, var(--espresso), #17110A);
  color: #B7AB98;
  padding: 64px 0 24px;
  margin-top: 0;
}
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid h4 {
  color: #FFF; font-family: var(--sans);
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 16px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; font-size: 14px; }
.footer-grid a { color: #B7AB98; }
.footer-grid a:hover { color: var(--bronze-glow); }
.footer-brand .brand { color: #FFF; margin-bottom: 14px; }
.footer-brand .brand-name { color: #FFF; }
.footer-brand .brand-name small { color: #8F8474; }
.footer-brand p { font-size: 14px; color: #948978; line-height: 1.6; max-width: 320px; }
.footer-brand .fcall { color: var(--bronze-glow); font-weight: 600; font-size: 1.05rem; }
.footer-bottom {
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid rgba(240,230,214,.1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: #7C7263;
}

/* ======================================================
   BREADCRUMB
   ====================================================== */
.crumbs { font-size: 13px; color: var(--stone); padding: 18px 0 0; }
.crumbs a { color: var(--stone); text-decoration: underline; text-decoration-color: rgba(107,96,85,.35); }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-current] { color: var(--ink); font-weight: 500; }

/* ======================================================
   FLOATING CALL (mobile)
   ====================================================== */
.tap-call-fixed { display: none; }
@media (max-width: 720px) {
  .tap-call-fixed {
    display: flex;
    position: fixed; left: 14px; right: 14px; bottom: 14px;
    z-index: 90;
    background: var(--bronze-deep);
    color: #FFF; font-family: var(--sans); font-weight: 700;
    text-align: center; padding: 16px 18px;
    border-radius: 13px; box-shadow: 0 10px 30px rgba(28,23,18,.34);
    justify-content: center; align-items: center; gap: 9px;
  }
  .tap-call-fixed:hover { color: #FFF; }
  .tap-call-fixed svg { width: 18px; height: 18px; }
  body { padding-bottom: 80px; }
}

/* ======================================================
   PILLS + PAGE HERO (interior)
   ====================================================== */
.pill {
  display: inline-block;
  background: var(--bronze-wash);
  color: var(--bronze-deep);
  border-radius: 999px;
  padding: 5px 13px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .05em;
}
.page-hero {
  background: linear-gradient(165deg, var(--espresso), #191309);
  color: #FBF4E8;
  padding: 56px 0 60px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 320px at 88% -10%, rgba(216,172,108,.2), transparent 62%);
  pointer-events: none;
}
.page-hero-inner { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.page-hero h1 { color: #FFF; margin: 14px 0 14px; }
.page-hero p { color: #D3C6B3; max-width: 660px; font-size: 1.1rem; }
.page-hero .pill { background: rgba(216,172,108,.16); color: var(--bronze-glow); }
/* Pills that land on a DARK surface (the lead-capture band) must switch to the
   light bronze-glow ink — the default --bronze-deep is "accessible on cream" only,
   so on the espresso band it renders as unreadable brown-on-brown. This chip sits
   above the primary quote CTA, so it has to be crisp. */
.lead-band .pill {
  background: rgba(216,172,108,.18);
  color: var(--bronze-glow);
  border: 1px solid rgba(216,172,108,.38);
}
/* Badge/eyebrow above a heading must NEVER crowd it. One rule covers the whole pattern —
   a pill / eyebrow / kicker directly followed by a heading always gets breathing room, in
   every section (hero, page-hero, lead band). This is the permanent fix for the "FREE QUOTE"
   chip sitting flush on the H2 beneath it. */
.pill + h1, .pill + h2, .pill + h3,
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3,
.kicker + h1, .kicker + h2, .kicker + h3 { margin-top: 16px; }

/* ======================================================
   LONGFORM (service/area copy)
   ====================================================== */
.longform { max-width: 780px; }
.longform p, .longform ul, .longform ol { color: var(--ink-soft); font-size: 16.5px; line-height: 1.7; }
.longform h2 { margin-top: 42px; }
.longform h3 { margin-top: 28px; }
.longform ul, .longform ol { padding-left: 22px; }
.longform li { margin-bottom: 8px; }
.longform strong { color: var(--ink); }
.longform blockquote {
  border-left: 3px solid var(--bronze);
  margin: 28px 0; padding: 6px 0 6px 22px;
  color: var(--stone); font-style: italic; font-family: var(--serif); font-size: 1.2rem;
}
.two-col { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .two-col { grid-template-columns: 1.7fr 1fr; gap: 52px; } }
.sidebar {
  position: sticky; top: 100px; align-self: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.sidebar h3 { font-size: 1.2rem; margin-bottom: 4px; }
.sidebar > p { color: var(--stone); font-size: 14px; }
/* A .lead-form is a self-contained CARD (its own surface + padding + shadow).
   When it sits INSIDE another card (the sidebar), strip that card chrome so we
   never get a phantom card-inside-a-card shadow/padding conflict. */
.sidebar .lead-form {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-top: 14px;
}

/* ======================================================
   MICRO
   ====================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  * { scroll-behavior: auto; }
}