/* Prestige Woodwork & Design.

   Dark and cream bands alternate: a dark hero with a light serif headline and
   one word in gold, a stat strip that straddles the join into the first cream
   band, a featured mosaic with titles on the photographs, a dark row of
   bordered service cards, a cream process timeline, the gallery on dark,
   reviews on cream, the questions on dark, the estimate on cream with the
   form itself a dark panel, then the footer on dark. Gold is used the
   way the flyer uses it: hairlines, icons, small capitals, one filled button
   per screen.

   Cinzel is the brand: wordmark, eyebrows, buttons, labels. Cormorant Garamond
   is the voice: every headline, light and mixed case, because the flyer's
   whole charm is that contrast against the capitals. Lato reads. Pinyon Script
   carries the flyer's two script lines. */

:root {
  --black:    #0B0B0D;
  --black-2:  #131316;
  --black-3:  #1A1A1E;
  --cream:    #F3EFE8;
  --cream-2:  #EAE4DA;
  --cream-3:  #FBF9F5;
  --gold:     #C9A227;
  --gold-lt:  #E7CE86;
  --gold-dk:  #8A6E1C;
  --ink:      #1C1915;
  --mute-ink: #6F675C;
  --on-dark:  #EDE7DA;
  --mute:     #A79E8C;
  --hair:      rgba(201, 162, 39, .34);
  --hair-soft: rgba(201, 162, 39, .16);
  --hair-ink:  rgba(28, 25, 21, .12);
  --flag:      #E08A7A;
  --flag-ink:  #9B3A27;
  --brand:  "Cinzel", "Trajan Pro", Georgia, serif;
  --serif:  "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --script: "Pinyon Script", "Segoe Script", cursive;
  --sans:   "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1240px;
  --pad: 28px;
  --r: 4px;
  --r-card: 10px;
  --gold-grad: linear-gradient(180deg, #F4E3AE, #C9A227 55%, #8A6E1C);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.65;
  color: var(--on-dark); background: var(--black); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
figure, dl, dd { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* ===== bands ===== */

.band { padding: 96px 0; }
.band-dark { background: var(--black); color: var(--on-dark); }
.band-cream { background: var(--cream); color: var(--ink); }
@media (max-width: 800px) { .band { padding: 64px 0; } }

/* ===== type ===== */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.1; text-wrap: balance; letter-spacing: -.005em; }
h1 { font-size: clamp(46px, 6.2vw, 84px); font-weight: 300; line-height: 1.02; }
h2 { font-size: clamp(34px, 3.6vw, 48px); font-weight: 400; }
h3 { font-size: 24px; font-weight: 500; }
h1 .gold, h2 .gold { color: var(--gold); }
.band-cream h1 .gold, .band-cream h2 .gold { color: var(--gold-dk); }
p { margin: 0 0 16px; }
.eyebrow {
  font-family: var(--brand); font-size: 11px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 18px;
}
.band-cream .eyebrow { color: var(--gold-dk); }
.lede { font-size: 16.5px; line-height: 1.7; color: var(--mute); max-width: 44ch; }
.band-cream .lede { color: var(--mute-ink); }
.script { font-family: var(--script); font-weight: 400; color: var(--gold-lt); }

/* ===== buttons ===== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--brand); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  padding: 15px 24px; border-radius: var(--r); border: 1px solid var(--gold); color: var(--on-dark);
  background: transparent; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { background: rgba(201, 162, 39, .12); color: var(--gold-lt); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #1A1503; }
.btn-gold:hover { background: var(--gold-lt); border-color: var(--gold-lt); color: #1A1503; }
.band-cream .btn { color: var(--ink); border-color: var(--gold-dk); }
.band-cream .btn:hover { background: rgba(138, 110, 28, .08); color: var(--ink); }
.band-cream .btn-gold { color: #1A1503; border-color: var(--gold); }
.btn[disabled] { opacity: .55; cursor: progress; }
/* The circular arrow button that sits on the featured tiles. */
.round {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-lt);
  display: grid; place-items: center; background: rgba(11, 11, 13, .45); transition: background-color .18s ease, color .18s ease;
}
.round svg { width: 14px; height: 14px; }

/* ===== header ===== */

.site-head { position: sticky; top: 0; z-index: 40; background: rgba(11, 11, 13, .8); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair-soft); }
.head-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); height: 78px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand svg { width: 42px; height: 42px; flex: none; }
.brand-name { display: block; font-family: var(--brand); font-size: 20px; font-weight: 700; letter-spacing: .2em; line-height: 1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { display: block; font-family: var(--brand); font-size: 7.5px; font-weight: 500; letter-spacing: .32em; color: var(--mute); margin-top: 6px; line-height: 1; text-transform: uppercase; }
.site-nav { display: flex; gap: 28px; margin-right: 8px; }
.site-nav a { font-family: var(--brand); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.site-nav a:hover { color: var(--gold-lt); border-bottom-color: var(--gold); }
.head-btn { padding: 12px 20px; }
.head-tel { display: none; }
@media (max-width: 1080px) { .site-nav { display: none; } }
@media (max-width: 560px) {
  .head-in { height: 66px; }
  .brand svg { width: 36px; height: 36px; }
  .brand-name { font-size: 17px; }
  .head-btn { display: none; }
  .head-tel { display: inline-block; font-family: var(--brand); font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--gold-lt); text-decoration: none; white-space: nowrap; }
}

/* ===== hero ===== */

.hero { position: relative; overflow: hidden; background: var(--black); }
.hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; }
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%), linear-gradient(180deg, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 32%), linear-gradient(180deg, #000 60%, transparent 100%);
  mask-composite: intersect; animation: settle 1.6s ease-out both;
}
.hero-in { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 96px var(--pad) 150px; }
.hero-copy { max-width: 560px; }
.hero-copy > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .12s; }
.hero-copy > :nth-child(3) { animation-delay: .24s; }
.hero-copy > :nth-child(4) { animation-delay: .36s; }
.hero h1 { color: #FFF; margin: 0 0 26px; }
.hero-sub { color: var(--mute); font-size: 16.5px; line-height: 1.7; max-width: 42ch; margin: 0 0 34px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
/* The reference's little vertical pager at the far left of the hero. Purely
   decorative, so it only appears where there is room for it. */
.hero-dots { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; align-items: center; gap: 8px; }
.hero-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: .55; }
.hero-dots i:first-child { opacity: 1; }
.hero-dots b { width: 1px; height: 64px; background: var(--hair); }
@media (min-width: 1330px) { .hero-dots { display: flex; } }
@keyframes settle { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .hero-photo { position: relative; width: 100%; height: 320px; }
  .hero-photo img { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .hero-in { padding: 8px var(--pad) 120px; }
}

/* ===== stat strip ===== */

/* Straddles the join between the dark hero and the first cream band, the way
   the reference's does. The cream band gives up its top padding and the strip
   pulls itself up by half its own height. */
.strip-band { padding-top: 0; }
.strip {
  position: relative; z-index: 2; margin: -72px 0 72px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--black-2); border: 1px solid var(--hair); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35); color: var(--on-dark);
}
.stat { display: flex; align-items: center; gap: 16px; padding: 28px 28px; border-left: 1px solid var(--hair-soft); min-width: 0; }
.stat:first-child { border-left: 0; }
.stat svg { width: 36px; height: 36px; color: var(--gold); flex: none; }
.stat b { display: block; font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1; color: #FFF; letter-spacing: .01em; }
.stat b small { font-size: 22px; vertical-align: top; color: var(--gold); }
.stat span { display: block; font-size: 13px; color: var(--mute); margin-top: 6px; }
@media (max-width: 900px) {
  .strip { grid-template-columns: 1fr 1fr; margin: -56px 0 56px; }
  .stat { padding: 22px; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--hair-soft); }
}
@media (max-width: 480px) { .strip { grid-template-columns: 1fr; } .stat { border-left: 0; } .stat + .stat { border-top: 1px solid var(--hair-soft); } }

/* ===== featured mosaic ===== */

.feat { display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: center; }
.feat-head h2 { margin-bottom: 30px; }
.mosaic { display: grid; grid-template-columns: 1.25fr 1fr 0.8fr; grid-template-rows: 224px 224px; gap: 14px; }
.tile { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--black-3); text-decoration: none; color: #FFF; display: block; }
.tile img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .7s ease; }
.tile:hover img { transform: scale(1.04); }
.tile-big { grid-row: 1 / span 2; }
.tile-tall { grid-column: 3; grid-row: 1 / span 2; }
.tile-text {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
  background: linear-gradient(180deg, rgba(11,11,13,0) 40%, rgba(11,11,13,.85) 100%);
}
.tile h3 { font-size: 24px; font-weight: 500; color: #FFF; margin-bottom: 4px; }
.tile-big h3 { font-size: 28px; }
.tile span { font-family: var(--brand); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lt); }
.tile .round { position: absolute; right: 18px; bottom: 18px; }
.tile:hover .round { background: var(--gold); color: #1A1503; }
@media (max-width: 1080px) { .feat { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 760px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px; }
  .tile-big { grid-column: 1 / -1; grid-row: 1; }
  .tile-tall { grid-column: 2; grid-row: 2 / span 2; }
}
@media (max-width: 480px) {
  .mosaic { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 220px; }
  .tile-big, .tile-tall { grid-column: auto; grid-row: auto; }
}

/* ===== services ===== */

.svcs { display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: center; }
.svcs-head h2 { margin-bottom: 18px; }
.svcs-head .lede { margin-bottom: 28px; }
.svc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.svc-card {
  border: 1px solid var(--hair-soft); border-radius: 8px; padding: 30px 16px 28px; text-align: center;
  background: linear-gradient(180deg, rgba(201,162,39,.04), rgba(201,162,39,0)); transition: border-color .2s ease, transform .2s ease;
  min-width: 0;
}
.svc-card:hover { border-color: var(--hair); transform: translateY(-3px); }
.svc-card svg { width: 40px; height: 40px; color: var(--gold); margin: 0 auto 18px; display: block; }
.svc-card h3 { font-size: 21px; color: #FFF; margin-bottom: 10px; }
.svc-card p { font-size: 13.5px; line-height: 1.6; color: var(--mute); margin: 0; }
@media (max-width: 1080px) { .svcs { grid-template-columns: 1fr; gap: 36px; } .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .svc-grid { grid-template-columns: 1fr; } }

/* ===== process ===== */

.proc { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.proc-head h2 { margin-bottom: 28px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; text-align: center; }
.steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 24px; border-top: 1px dashed rgba(138, 110, 28, .5); }
.step { position: relative; padding-top: 70px; }
.step-num {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold); color: #1A1503; font-family: var(--brand); font-size: 13px; font-weight: 700; letter-spacing: .06em;
  display: grid; place-items: center; box-shadow: 0 0 0 8px var(--cream);
}
.step h3 { font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.step p { font-size: 14px; line-height: 1.6; color: var(--mute-ink); margin: 0; }
@media (max-width: 1080px) { .proc { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr 1fr; gap: 30px 20px; } .steps::before { display: none; } }
@media (max-width: 440px) { .steps { grid-template-columns: 1fr; } }

/* ===== gallery (dark) ===== */

.sec-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.sec-head p { color: var(--mute); margin: 14px 0 0; }
.band-cream .sec-head p { color: var(--mute-ink); }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 34px; }
.chip {
  font-family: var(--brand); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); background: transparent; border: 1px solid var(--hair-soft); border-radius: 999px; padding: 10px 18px; cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.chip:hover { color: var(--on-dark); border-color: var(--hair); }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1A1503; }
.gal { columns: 3; column-gap: 18px; }
.gal-item { break-inside: avoid; margin: 0 0 18px; border-radius: var(--r-card); overflow: hidden; position: relative; background: var(--black-3); }
.gal-item img { width: 100%; height: auto; }
.gal-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px;
  background: linear-gradient(180deg, rgba(11,11,13,0), rgba(11,11,13,.85));
  font-family: var(--brand); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lt);
  opacity: 0; transition: opacity .2s ease;
}
.gal-item:hover figcaption { opacity: 1; }
@media (hover: none) { .gal-item figcaption { opacity: 1; } }
.gal-pair { column-span: all; break-inside: avoid; background: none; border-radius: 0; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gal-item[hidden] { display: none; }
.gal-pair-item { margin: 0; border-radius: var(--r-card); overflow: hidden; position: relative; background: var(--black-3); }
.gal-pair-item img { width: 100%; height: auto; display: block; }
.gal-pair-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px;
  background: linear-gradient(180deg, rgba(11,11,13,0), rgba(11,11,13,.85));
  font-family: var(--brand); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lt);
  opacity: 0; transition: opacity .2s ease;
}
.gal-pair-item:hover figcaption { opacity: 1; }
@media (hover: none) { .gal-pair-item figcaption { opacity: 1; } }
@media (max-width: 520px) { .gal-pair { gap: 10px; } }
.gal-none { text-align: center; color: var(--mute); margin: 8px 0 0; }
@media (max-width: 900px) { .gal { columns: 2; } }
@media (max-width: 520px) { .gal { columns: 1; } }

/* ===== reels ===== */

.reels-head { display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: center; margin-top: 72px; padding-top: 64px; border-top: 1px solid var(--hair-soft); }
.reel { width: 300px; max-width: 100%; aspect-ratio: 375 / 476; background: var(--black-3); border: 1px solid var(--hair-soft); border-radius: var(--r-card); position: relative; overflow: hidden; }
/* Also inline on the <video>, so a browser holding an older copy of this file still sizes it. */
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
/* The walkthrough is an upright phone video, so its box is 9:16 and nothing is trimmed. */
.reel-feature { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; }
.reel-local { aspect-ratio: 9 / 16; flex: none; }
.reel-note { flex: 1 1 280px; max-width: 48ch; }
.reel-note h3 { color: var(--on-dark); margin: 0 0 14px; }
.reel-note p:not(.eyebrow) { color: var(--mute); font-size: 16px; line-height: 1.7; margin: 0; }
.reel-facts { margin: 24px 0 28px; border-top: 1px solid var(--hair-soft); }
.reel-facts div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--hair-soft); }
.reel-facts dt { font-family: var(--brand); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.reel-facts dd { margin: 0; color: var(--on-dark); }
.reel-local .reel-play { background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)); color: var(--on-dark); }
.reel-play {
  position: absolute; inset: 0; width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  font-family: var(--brand); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); text-decoration: none;
}
.reel-ico { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-lt); display: grid; place-items: center; transition: background-color .18s ease, color .18s ease; }
.reel-play:hover .reel-ico { background: var(--gold); color: #1A1503; }
.reel-play:hover { color: var(--on-dark); }
@media (max-width: 1080px) { .reels-head { grid-template-columns: 1fr; gap: 28px; } }

/* ===== reviews (cream) ===== */

.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 1000px; margin: 0 auto; }
.quotes--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
.quote { background: var(--cream-3); border: 1px solid var(--hair-ink); border-radius: var(--r-card); padding: 30px 28px 26px; display: flex; flex-direction: column; }
.quote .stars { color: var(--gold); letter-spacing: .2em; font-size: 13px; margin-bottom: 16px; }
.quote p { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.5; color: var(--ink); flex: 1; margin-bottom: 20px; }
.quote cite { font-family: var(--brand); font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mute-ink); }
.quotes-more { text-align: center; margin: 36px 0 0; }
.quotes-note { text-align: center; color: var(--mute-ink); font-size: 13px; margin: 0 0 24px; }
.areas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 56px; }
.areas li { font-size: 14px; color: var(--mute-ink); border: 1px solid var(--hair-ink); border-radius: 999px; padding: 8px 18px; }
.areas-note { text-align: center; color: var(--mute-ink); font-size: 15px; margin: 22px 0 0; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* ===== about (cream, deeper tone to break from reviews above) ===== */

.band-cream.about { background: var(--cream-2); border-top: 1px solid var(--hair-ink); }
.about-grid { display: grid; grid-template-columns: 440px 1fr; gap: 64px; align-items: start; }
.about-photo { margin: 0; position: sticky; top: 110px; }
.about-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-card); }
.about-badge-photo { float: right; width: 132px; margin: 6px max(0px, calc(100% - 62ch)) 14px 24px; background: var(--cream-3); padding: 8px 8px 10px; border-radius: 10px; border: 1px solid var(--hair); box-shadow: 0 14px 32px rgba(11, 11, 13, .22); text-align: center; }
.about-badge-photo img { width: 100%; height: auto; border-radius: 6px; margin-bottom: 8px; }
.about-badge-photo figcaption { font-family: var(--brand); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dk); }
.about-copy h2 { margin-bottom: 18px; }
.about-cred { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 26px; }
.about-cred span { display: flex; align-items: center; gap: 10px; font-family: var(--brand); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dk); }
.about-cred svg { width: 18px; height: 18px; color: var(--gold-dk); flex: none; }
.about-copy p { margin: 0 0 18px; max-width: 62ch; }
.about-copy p:last-child { margin-bottom: 0; }
@media (max-width: 1080px) { .about-grid { grid-template-columns: 1fr; gap: 36px; } .about-photo { position: static; max-width: 420px; margin: 0 auto; } .about-badge-photo { width: 124px; margin-left: 16px; } }

/* ===== faq (dark) ===== */

.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--black-3); border: 1px solid var(--hair-soft); border-radius: var(--r-card); padding: 0 30px; transition: border-color .2s ease; }
.faq-item[open], .faq-item:hover { border-color: var(--hair); }
.faq-item summary {
  font-family: var(--serif); font-size: 21px; color: #FFF; line-height: 1.3; cursor: pointer;
  padding: 22px 34px 22px 0; position: relative; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: translateY(-65%) rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] summary { padding-bottom: 8px; }
.faq-item[open] summary::after { transform: translateY(-35%) rotate(-135deg); }
.faq-item p { margin: 0 0 26px; color: var(--mute); font-size: 15.5px; line-height: 1.65; max-width: 680px; }
@media (max-width: 600px) { .faq-item { padding: 0 20px; } .faq-item summary { font-size: 18px; } }

/* ===== estimate (cream band, dark form panel) ===== */

/* The band is cream so the page keeps alternating after the dark FAQ, but the
   form stays a dark gold-trimmed panel: it keeps the input styling intact and
   makes the form the one thing on the screen that reads as the destination. */
.est { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.est-aside h2 { color: var(--ink); margin-bottom: 20px; }
.est-contact { margin: 30px 0 0; }
.est-contact li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--hair-ink); }
.est-contact li:last-child { border-bottom: 1px solid var(--hair-ink); }
.est-contact svg { width: 20px; height: 20px; color: var(--gold-dk); flex: none; margin-top: 3px; }
.est-contact b { display: block; font-family: var(--brand); font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mute-ink); margin-bottom: 3px; }
.est-contact a, .est-contact span { color: var(--ink); text-decoration: none; font-size: 16px; }
.est-contact a:hover { color: var(--gold-dk); }
.est-review { margin: 34px 0 0; padding: 24px; border: 1px solid var(--hair-ink); border-radius: var(--r-card); background: var(--cream-3); display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; scroll-margin-top: 100px; }
.est-review-qr { display: block; border: 1px solid var(--hair-ink); border-radius: 8px; overflow: hidden; }
.est-review-qr img { display: block; width: 100%; height: auto; }
.est-review .eyebrow { margin-bottom: 8px; }
.est-review h3 { color: var(--ink); margin-bottom: 8px; }
.est-review p:not(.eyebrow) { color: var(--mute-ink); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.est-review .btn { padding: 12px 18px; }
/* On a phone the code is what matters: the owner holds it out to be scanned. */
@media (max-width: 560px) {
  .est-review { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .est-review-qr { width: min(260px, 100%); }
}
.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; }
.form-card { color: var(--on-dark); }
.form-card .eyebrow { color: var(--gold); }
.form-card .btn-gold { color: #1A1503; border-color: var(--gold); }
.form-card .btn-gold:hover { background: var(--gold-lt); border-color: var(--gold-lt); }
.form-card { background: var(--black-3); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 40px 40px 36px; position: relative; }
.form-card::before { content: ""; position: absolute; left: 40px; right: 40px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.form-card h3 { color: #FFF; font-size: 28px; margin-bottom: 4px; }
.form-intro { color: var(--mute); font-size: 15px; margin: 0 0 28px; }
.field { margin-bottom: 20px; min-width: 0; }
.field > label, .fieldset-label { display: block; font-family: var(--brand); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 9px; }
.field > label .opt-note { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 400; color: var(--mute); font-size: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--on-dark); background: var(--black-2);
  border: 1px solid rgba(201,162,39,.22); border-radius: var(--r); padding: 13px 14px; transition: border-color .15s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; }
input::placeholder, textarea::placeholder { color: #7E766A; }
textarea { min-height: 120px; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; }
select option { background: var(--black-2); color: var(--on-dark); }
fieldset { border: 0; margin: 0 0 20px; padding: 0; }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 20px; }
.opt { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--on-dark); }
.opt input, .consent input { margin: 4px 0 0; accent-color: var(--gold); flex: none; }
.drop { border: 1px dashed var(--hair); border-radius: var(--r); padding: 18px 20px; background: rgba(201,162,39,.04); }
.drop b { display: block; font-size: 15px; color: #FFF; margin-bottom: 4px; }
.drop span { font-size: 13.5px; color: var(--mute); }
.drop a { color: var(--gold-lt); }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--mute); }
.form-card .btn { width: 100%; margin-top: 22px; }
.form-card .hint { font-size: 13px; color: var(--mute); text-align: center; margin: 14px 0 0; }
.form-card .hint a { color: var(--gold-lt); }
.hp { position: absolute; left: -9999px; }
.form-card .err { color: var(--flag); font-size: 13.5px; margin: 6px 0 0; }
.form-card [aria-invalid="true"] { border-color: var(--flag); }
.form-card .form-alert { border-left: 3px solid var(--flag); background: rgba(224,138,122,.08); color: var(--flag); font-size: 15px; padding: 11px 14px; margin: 20px 0 0; }
.form-done h3 { margin: 6px 0 14px; }
.form-done p { color: var(--mute); margin: 0 0 12px; }
.form-done p:last-child { margin-bottom: 0; }
.form-done a { color: var(--gold-lt); }
@media (max-width: 960px) { .est { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px) { .row2, .opts { grid-template-columns: 1fr; } .form-card { padding: 28px 20px; } }

/* ===== footer ===== */

/* Three columns like the reference: the closing line and a button, the ways to
   reach him, the crest and a line about the business. A faint drafting grid
   sits behind it. */
.site-foot { position: relative; background: var(--black-2); border-top: 1px solid var(--hair-soft); padding: 72px 0 26px; color: var(--mute); overflow: hidden; }
.site-foot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--hair-soft) 1px, transparent 1px), linear-gradient(90deg, var(--hair-soft) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .4;
  -webkit-mask-image: radial-gradient(ellipse 50% 90% at 85% 50%, #000 10%, transparent 100%); mask-image: radial-gradient(ellipse 50% 90% at 85% 50%, #000 10%, transparent 100%);
}
.site-foot .wrap { position: relative; }
.foot-grid { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: 48px; }
.foot-cta h2 { font-size: clamp(30px, 3vw, 40px); color: #FFF; margin-bottom: 26px; }
.foot-list li { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-size: 15.5px; }
.foot-list svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.foot-list a { color: var(--on-dark); text-decoration: none; }
.foot-list a:hover { color: var(--gold-lt); }
.follow { font-family: var(--brand); font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin: 24px 0 12px; }
.socials { display: flex; gap: 10px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; color: var(--gold-lt); transition: background-color .18s ease, color .18s ease; }
.socials a:hover { background: var(--gold); color: #1A1503; }
.socials svg { width: 16px; height: 16px; }
.foot-brand .brand { margin-bottom: 18px; }
.foot-brand p { font-size: 14.5px; max-width: 34ch; }
.foot-brand .script { font-size: 24px; display: block; margin-bottom: 10px; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; border-top: 1px solid var(--hair-soft); margin-top: 52px; padding-top: 20px; font-size: 12.5px; }
.foot-bottom a { color: var(--mute); text-decoration: none; }
.foot-bottom a:hover { color: var(--gold-lt); }
@media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ===== legal pages ===== */

/* Long form reading rather than marketing copy, so the measure narrows and the
   masthead sits in its own dark band above a cream page of prose, the same
   dark-to-cream rhythm the home page uses between sections. */
.legal-mast { max-width: 760px; }
.legal-mast h1 { color: #FFF; margin: 0 0 12px; font-size: clamp(34px, 4.4vw, 54px); }
.legal-date {
  font-family: var(--brand); font-size: 11px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute);
}
.legal { max-width: 700px; margin: 0 auto; font-size: 16.5px; line-height: 1.75; color: var(--ink); }
.legal h2 {
  font-size: 25px; margin: 46px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--hair-ink);
}
.legal h3 {
  font-family: var(--brand); font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute-ink); margin: 26px 0 8px;
}
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.legal li { margin-bottom: 9px; }
.legal a { color: var(--gold-dk); }
.legal-summary {
  background: var(--cream-3); border-left: 3px solid var(--gold);
  padding: 24px 26px; margin-bottom: 8px;
}
.legal-summary h2 { margin: 0 0 10px; padding: 0; border: 0; }
.legal-summary p { margin: 0; }
.legal-back { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hair-ink); }
@media (max-width: 700px) { .legal-summary { padding: 20px 20px; } }

/* ===== sticky mobile call bar ===== */

.callbar { display: none; }
@media (max-width: 700px) {
  .callbar { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(201,162,39,.35); }
  .callbar a { background: var(--black); color: var(--gold-lt); text-decoration: none; font-family: var(--brand); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-align: center; padding: 17px 10px; }
  .callbar a.primary { background: var(--gold); color: #1A1503; }
  body { padding-bottom: 56px; }
}