/* ==========================================================================
   Layout v2 — FULL STYLE variant
   Re-themes about.html / services.html / properties.html / contact.html to
   a Rich Black + Champagne + Burnt Copper "index" look, structurally
   inspired by a client-supplied reference layout (an agency "Industry
   Solutions" page): huge bold headlines, small eyebrow counters, a
   numbered hairline-bordered index grid, and full-bleed color-block
   sections. As of Round 11, index.html runs the same "Golden Obsession"
   palette via main.css (Luxury Gold accent) — this file keeps the four
   pages above on a Burnt-Copper-accented reading of the same reference
   palette, so the whole site now shares one consistent luxury look while
   still visually distinguishing the numbered-index pages.

   This reuses the same CSS-custom-property design-system approach as
   every previous palette round on this project: only the --clr-* token
   VALUES change here, so every existing component (cards, buttons,
   property cards, forms, footer, nav) re-colors automatically on just
   these four pages. WhatsApp buttons keep WhatsApp's own brand green,
   as on every page and every round so far — not overridden here either.
   ========================================================================== */

:root{
  --clr-black:        #0B0B0F; /* Rich Black */
  --clr-black-soft:   #1C1A17; /* Deep Espresso */
  --clr-black-panel:  #2D3138; /* Slate Gray — panel */
  --clr-green:        #B87333; /* Burnt Copper — primary buttons/bullets */
  --clr-green-deep:   #935C29; /* Burnt Copper, deep — CTA/panel backgrounds */
  --clr-green-bright: #B87333; /* Burnt Copper — bright accent/headings/icons */
  --clr-mint:         #B87333; /* Burnt Copper — muted tag accent */
  --clr-white:        #E9E1D0; /* Champagne — body text */
  --clr-ink:          #0B0B0F; /* Rich Black — dark text on bright buttons */
  --clr-line:         rgba(233,225,208,0.16);
  --clr-line-soft:    rgba(233,225,208,0.09);
  --clr-mist:         rgba(233,225,208,0.64);
  --clr-green-rgb:    184,115,51; /* for literal rgba() accent tints below */
  --clr-white-rgb:    233,225,208; /* for literal rgba() text-derived tints below */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Bolder, tighter type on these pages to read closer to the reference's
   heavy grotesque headlines — VT's Fraunces serif is swapped for Inter
   at heavy weight via --font-display above; this adds the weight/tracking. */
h1, h2, h3{
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* literal (non-var) accent tints in main.css are recolored to the
   Burnt Copper accent here so hover states and icon chips match on
   these four pages. */
.card:hover{ border-color: rgba(var(--clr-green-rgb),0.4); }
.property-card:hover{ border-color: rgba(var(--clr-green-rgb),0.35); }
.card .icon{ background: rgba(var(--clr-green-rgb),0.14); }
.feature-tag{ background: rgba(var(--clr-green-rgb),0.12); border-color: rgba(var(--clr-green-rgb),0.3); }
.cta-band{ border-color: rgba(var(--clr-green-rgb),0.3); }
.field input:focus, .field textarea:focus, .field select:focus{ box-shadow: 0 0 0 3px rgba(var(--clr-green-rgb),0.22); }
.property-card .plot-graphic{ background: radial-gradient(120% 130% at 15% 0%, rgba(var(--clr-green-rgb),0.22), transparent 60%), var(--clr-green-deep); }
/* Round 11: no color overlay on the scroll video — tint-green resolves to
   the same neutral near-black vignette as the base .scroll-video-scrim. */
.scroll-video-scrim.tint-green{
  background: linear-gradient(180deg, rgba(5,13,15,0.7) 0%, rgba(5,13,15,0.18) 24%, rgba(5,13,15,0.14) 52%, rgba(4,10,11,0.82) 100%);
}

/* ---- Mega header ---- */
.page-header.mega h1{
  font-size: clamp(2.8rem, 10vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
}
.page-header.mega .eyebrow{
  font-size: 0.78rem;
  letter-spacing: 0.24em;
}
.page-header.mega .divider{
  margin-top: 32px;
}
.page-header-media img{ opacity: 0.2; }

/* ---- Numbered index grid ---- */
.index-grid{
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--clr-line);
  border-left: 1px solid var(--clr-line);
  margin-top: 28px;
}
@media (min-width: 640px){ .index-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .index-grid{ grid-template-columns: repeat(3, 1fr); } }

.index-cell{
  display: block;
  padding: 26px 22px;
  border-right: 1px solid var(--clr-line);
  border-bottom: 1px solid var(--clr-line);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-med) var(--ease-out);
}
a.index-cell:hover{ background: rgba(var(--clr-green-rgb),0.1); }
.index-num{
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--clr-green-bright);
  margin-bottom: 16px;
}
.index-cell h3{ font-size: 1.05rem; margin-bottom: 6px; font-weight: 700; }
.index-cell p{ font-size: 0.85rem; color: var(--clr-mist); margin: 0; }

/* ---- Mega CTA ---- */
.cta-band.mega h2{
  font-size: clamp(2rem, 6vw, 3.8rem);
  line-height: 0.98;
}

/* anchor targets should clear the sticky nav */
[id]{ scroll-margin-top: calc(var(--nav-h) + 24px); }