/* ==========================================================================
   GOLD PEACH COMMERCIAL — design system
   Commercial division of Gold Peach Realty · North Georgia

   Direction: architectural, not photographic. Graphite ground, brass as the
   capital/CTA signal, bone as paper, forest for land & development, clay as a
   restrained nod to the parent brand's peach. Type does the heavy lifting:
   Instrument Serif for statement, Archivo for structure, Inter for reading,
   IBM Plex Mono for data language.

   No page builder. No stock hero. No uniform card grid.
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --ink:        #070706;
  --slate:      #12100C;
  --slate-2:    #1B1812;
  --slate-3:    #272217;
  --brass:      #C8A14D;
  --brass-lt:   #E7C778;
  --brass-dk:   #806018;
  --bone:       #FBF6EB;
  --bone-2:     #F5EBD9;
  --bone-3:     #E3D5B8;
  --forest:     #1D3B33;
  --clay:       #A9613D;
  --mist:       #978A77;
  --mist-2:     #D8C9AF;

  --ff-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --ff-head:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* 8px rhythm */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem; --s4: 2.5rem;
  --s5: 4rem;   --s6: 6rem;   --s7: 8.5rem;

  --wrap: 1240px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);

  --hair: 1px solid var(--slate-2);
  --hair-light: 1px solid var(--bone-3);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5 { margin: 0 0 var(--s2); text-wrap: balance; }
p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }

a { color: var(--brass-dk); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brass-dk); }

/* Accessibility: visible focus everywhere, never removed */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}
.gpc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brass); color: var(--ink);
  font-family: var(--ff-head); font-weight: 600; font-size: .9375rem;
  padding: .75rem 1.25rem; text-decoration: none;
}
.gpc-skip:focus { left: var(--gutter); top: .75rem; }

/* ── 3. Layout primitives ──────────────────────────────────────────────── */
.gpc-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.gpc-wrap--narrow { max-width: var(--wrap-narrow); }

.gpc-sec { padding-block: clamp(3.5rem, 9vw, 8.5rem); position: relative; }
.gpc-sec--tight { padding-block: clamp(2.5rem, 6vw, 5rem); }

.gpc-sec--dark  { background: var(--ink);   color: var(--bone); }
.gpc-sec--slate { background: var(--slate); color: var(--bone); }
.gpc-sec--bone  { background: var(--bone);  color: var(--ink); }
.gpc-sec--bone2 { background: var(--bone-2);color: var(--ink); }
.gpc-sec--forest{ background: var(--forest);color: var(--bone); }

.gpc-sec--dark a, .gpc-sec--slate a, .gpc-sec--forest a { color: var(--brass-lt); }
.gpc-sec--dark a:hover, .gpc-sec--slate a:hover, .gpc-sec--forest a:hover { color: var(--bone); }

/* Atmospheric grain — texture without an image request */
.gpc-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gpc-grain > * { position: relative; z-index: 2; }

/* ── 4. Type language ──────────────────────────────────────────────────── */
.gpc-eyebrow {
  font-family: var(--ff-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 var(--s3);
  display: flex; align-items: center; gap: .75rem;
}
.gpc-eyebrow::before {
  content: ""; width: 2rem; height: 1px; background: var(--brass); flex: none;
}
.gpc-sec--bone .gpc-eyebrow, .gpc-sec--bone2 .gpc-eyebrow { color: var(--brass-dk); }
.gpc-sec--bone .gpc-eyebrow::before, .gpc-sec--bone2 .gpc-eyebrow::before { background: var(--brass-dk); }

.gpc-display {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 7vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0 0 var(--s3);
}
.gpc-display em { font-style: italic; color: var(--brass-lt); }
.gpc-sec--bone .gpc-display em, .gpc-sec--bone2 .gpc-display em { color: var(--brass-dk); }

.gpc-h2 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0 0 var(--s3);
}
.gpc-h3 {
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -.005em;
  line-height: 1.3;
  margin: 0 0 var(--s1);
}
.gpc-lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
  color: var(--mist-2);
  max-width: 62ch;
}
.gpc-sec--bone .gpc-lede, .gpc-sec--bone2 .gpc-lede { color: #4A5259; }

.gpc-num {
  font-family: var(--ff-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--brass);
}

/* ── 5. Buttons ────────────────────────────────────────────────────────── */
.gpc-btn {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: var(--ff-head); font-weight: 600; font-size: .9375rem;
  letter-spacing: .01em;
  padding: 1rem 1.75rem;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.gpc-btn-arrow { transition: transform .35s var(--ease-out); }
.gpc-btn:hover .gpc-btn-arrow { transform: translateX(5px); }

.gpc-btn--primary { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.gpc-btn--primary:hover { background: var(--brass-lt); border-color: var(--brass-lt); color: var(--ink); }

.gpc-btn--ghost { background: transparent; color: var(--bone); border-color: var(--slate-3); }
.gpc-btn--ghost:hover { border-color: var(--brass); color: var(--brass-lt); background: rgba(184,134,47,.07); }

.gpc-btn--ink { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.gpc-btn--ink:hover { background: var(--slate); color: var(--brass-lt); }

.gpc-btn--outline-dark { background: transparent; color: var(--ink); border-color: var(--bone-3); }
.gpc-btn--outline-dark:hover { border-color: var(--brass-dk); color: var(--brass-dk); background: rgba(184,134,47,.06); }

.gpc-btns { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* ── 6. Header ─────────────────────────────────────────────────────────── */
.gpc-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,7,6,.88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.gpc-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: 76px;
}

/* Divisional lockup — the parent brokerage's OWN logo, with the division named
   beneath it. The mark is never redrawn or recoloured: it is
   3-Marketing/Logos Branding/Logos/Gold Peach Realty Logo White.png, trimmed and
   converted by brand_assets.py. A visitor should read "Gold Peach Realty" first
   and "Commercial" second, in that order. */
.gpc-lockup {
  display: inline-flex; flex-direction: column; align-items: stretch;
  width: max-content; gap: .3rem; text-decoration: none;
}
.gpc-lockup-logo { height: 30px; width: auto; display: block; }
.gpc-lockup-div {
  font-family: var(--ff-mono); font-size: .5625rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; color: var(--brass-lt);
  text-align: center; padding-top: .32rem;
  border-top: 1px solid rgba(231, 199, 120, .4);
}
@media (max-width: 640px) { .gpc-lockup-logo { height: 25px; } }
.gpc-lockup--footer .gpc-lockup-logo { height: 40px; }

.gpc-nav { display: flex; align-items: center; gap: var(--s3); }
.gpc-nav-list { display: flex; align-items: center; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.gpc-nav-link {
  font-family: var(--ff-head); font-weight: 500; font-size: .875rem;
  color: var(--mist-2); text-decoration: none; padding: .5rem 0;
  position: relative; transition: color .25s var(--ease);
}
.gpc-nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--brass); transition: width .35s var(--ease-out);
}
.gpc-nav-link:hover { color: var(--bone); }
.gpc-nav-link:hover::after { width: 100%; }

.gpc-header-cta { display: flex; align-items: center; gap: var(--s2); }
.gpc-header-phone {
  font-family: var(--ff-mono); font-size: .8125rem; font-weight: 500;
  color: var(--brass-lt); text-decoration: none; white-space: nowrap;
  letter-spacing: .03em;
}
.gpc-header-phone:hover { color: var(--bone); }

.gpc-burger {
  display: none; background: none; border: 1px solid var(--slate-3);
  width: 44px; height: 44px; cursor: pointer; padding: 0;
  place-items: center; gap: 5px; flex-direction: column;
}
.gpc-burger span { display: block; width: 18px; height: 1.5px; background: var(--bone); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.gpc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.gpc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gpc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .gpc-burger { display: flex; }
  .gpc-nav {
    position: fixed; inset: 76px 0 auto 0;
    background: var(--ink); border-bottom: 1px solid var(--slate-2);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s3) var(--gutter) var(--s4);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .gpc-nav[data-open="true"] { transform: none; opacity: 1; visibility: visible; }
  .gpc-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .gpc-nav-link { padding: .9rem 0; border-bottom: 1px solid var(--slate-2); font-size: 1rem; }
  .gpc-header-cta .gpc-btn { display: none; }
}
@media (max-width: 560px) {
  .gpc-header-phone { display: none; }
  .gpc-lockup-name { font-size: .8125rem; letter-spacing: .12em; }
}

/* ── 7. Hero ───────────────────────────────────────────────────────────── */
.gpc-hero {
  position: relative; background: var(--ink); color: var(--bone);
  padding-block: clamp(4.5rem, 13vw, 10rem) clamp(3.5rem, 9vw, 7rem);
  overflow: hidden;
}
/* Topographic line-art backdrop — drawn, not photographed. Decorative only. */
.gpc-hero-topo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .3; pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
}
.gpc-hero-topo path { fill: none; stroke: var(--brass); stroke-width: .75; }
.gpc-hero-glow {
  position: absolute; right: -14%; top: -18%; width: 62vw; height: 62vw;
  max-width: 900px; max-height: 900px; pointer-events: none;
  background-color: rgba(184,134,47,.13);
  border-radius: 50%;
  filter: blur(110px);
}
.gpc-hero-inner { position: relative; z-index: 3; }
.gpc-hero-h1 {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(2.875rem, 8vw, 6.5rem);
  line-height: .98; letter-spacing: -.02em;
  margin: 0 0 var(--s3); max-width: 17ch;
}
.gpc-hero-h1 em { font-style: italic; color: var(--brass-lt); }
.gpc-hero-sub { max-width: 58ch; font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); color: var(--mist-2); line-height: 1.6; }
.gpc-hero-rule { width: 100%; height: 0; border-top: 1px solid rgba(184,134,47,.5); margin: var(--s4) 0 var(--s3); }
.gpc-hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4);
  font-family: var(--ff-mono); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mist);
}
.gpc-hero-meta strong { color: var(--brass-lt); font-weight: 500; }
.gpc-hero-phone { color: var(--brass-lt); text-decoration: none; }

/* ── 8. Market rail — names and corridors, never invented numbers ──────── */
.gpc-rail {
  background: var(--slate); border-block: 1px solid var(--slate-2);
  overflow: hidden; padding-block: 1.125rem;
}
.gpc-rail-track {
  display: flex; gap: var(--s5); width: max-content;
  animation: gpc-marquee 58s linear infinite;
}
.gpc-rail:hover .gpc-rail-track, .gpc-rail:focus-within .gpc-rail-track { animation-play-state: paused; }
@keyframes gpc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .gpc-rail-track { animation: none; width: 100%; overflow-x: auto; padding-inline: var(--gutter); }
}
.gpc-rail-item {
  display: flex; align-items: baseline; gap: .625rem; white-space: nowrap;
  font-family: var(--ff-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
}
.gpc-rail-city { color: var(--bone); }
.gpc-rail-county { color: var(--mist); font-size: .6875rem; }
.gpc-rail-dot { width: 4px; height: 4px; background: var(--brass); flex: none; align-self: center; }

/* ── 9. Blueprint divider ──────────────────────────────────────────────── */
.gpc-rule {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass);
  margin-bottom: var(--s4);
}
.gpc-rule::before, .gpc-rule::after { content: ""; height: 1px; background: currentColor; opacity: .35; flex: 1; }
.gpc-rule::before { flex: 0 0 3rem; }

/* ── 10. Split editorial — sticky label column ─────────────────────────── */
.gpc-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.gpc-split-label { position: sticky; top: 112px; }
@media (max-width: 900px) {
  .gpc-split { grid-template-columns: 1fr; gap: var(--s3); }
  .gpc-split-label { position: static; }
}

/* ── 11. Bento — property types, deliberately uneven ───────────────────── */
.gpc-bento {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; background: var(--slate-2); border: 1px solid var(--slate-2);
}
.gpc-bento-cell {
  background: var(--ink); padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: var(--s2);
  text-decoration: none; color: inherit; position: relative;
  transition: background .35s var(--ease);
  min-height: 200px;
}
.gpc-bento-cell:hover { background: var(--slate); }
.gpc-bento-cell::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--brass); transition: width .45s var(--ease-out);
}
.gpc-bento-cell:hover::after { width: 100%; }
.gpc-bento-cell--w3 { grid-column: span 3; }
.gpc-bento-cell--w2 { grid-column: span 2; }
.gpc-bento-cell--w4 { grid-column: span 4; }
.gpc-bento-cell--w6 { grid-column: span 6; }
.gpc-bento-glyph { width: 40px; height: 40px; stroke: var(--brass); fill: none; stroke-width: 1.1; }
.gpc-bento-title { font-family: var(--ff-head); font-weight: 600; font-size: 1.25rem; color: var(--bone); margin: 0; }
.gpc-bento-body { color: var(--mist); font-size: .9375rem; margin: 0; line-height: 1.6; }
.gpc-bento-more { font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-top: auto; }
@media (max-width: 900px) {
  .gpc-bento { grid-template-columns: repeat(2, 1fr); }
  .gpc-bento-cell--w3, .gpc-bento-cell--w2, .gpc-bento-cell--w4, .gpc-bento-cell--w6 { grid-column: span 1; }
}
@media (max-width: 560px) { .gpc-bento { grid-template-columns: 1fr; } }

/* ── 12. Numbered market cards ─────────────────────────────────────────── */
.gpc-markets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--bone-3); border: 1px solid var(--bone-3); }
.gpc-market {
  background: var(--bone); padding: clamp(1.5rem, 3vw, 2.25rem);
  text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .75rem;
  position: relative; transition: background .35s var(--ease), transform .35s var(--ease);
}
.gpc-market:hover { background: #FFF; transform: translateY(-3px); }
.gpc-market-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.gpc-market-num { font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .16em; color: var(--brass-dk); }
.gpc-market-tier { font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: #5B636A; }
.gpc-market-city { font-family: var(--ff-display); font-size: 1.875rem; line-height: 1.1; margin: 0; color: var(--ink); }
.gpc-market-county { font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: #565E64; }
.gpc-market-body { font-size: .9375rem; color: #4A5259; margin: 0; line-height: 1.6; }
.gpc-market-corridors { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: auto; padding-top: var(--s2); }
.gpc-market-chip {
  font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .08em;
  padding: .28rem .5rem; border: 1px solid var(--bone-3); color: #5B636A;
}

/* ── 13. Signal panel — qualitative, zero invented figures ─────────────── */
.gpc-signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--slate-2); border: 1px solid var(--slate-2); }
.gpc-signal { background: var(--ink); padding: clamp(1.5rem, 3vw, 2.25rem); }
.gpc-signal-label { font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin: 0 0 .875rem; }
.gpc-signal-title { font-family: var(--ff-display); font-size: 1.5rem; line-height: 1.15; color: var(--bone); margin: 0 0 .625rem; }
.gpc-signal-body { font-size: .9375rem; color: var(--mist); margin: 0; line-height: 1.6; }

/* ── 14. Process steps ─────────────────────────────────────────────────── */
.gpc-steps { display: grid; gap: 0; counter-reset: gpc-step; }
.gpc-step {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s3);
  padding: var(--s4) 0; border-top: var(--hair-light);
}
.gpc-step:last-child { border-bottom: var(--hair-light); }
.gpc-step-n {
  counter-increment: gpc-step;
  font-family: var(--ff-mono); font-size: .75rem; letter-spacing: .14em; color: var(--brass-dk);
  padding-top: .35rem;
}
.gpc-step-n::before { content: "0" counter(gpc-step); }
.gpc-step-title { font-family: var(--ff-head); font-weight: 600; font-size: 1.1875rem; margin: 0 0 .5rem; }
.gpc-step-body { color: #4A5259; margin: 0; }
.gpc-sec--dark .gpc-step, .gpc-sec--slate .gpc-step { border-color: var(--slate-2); }
.gpc-sec--dark .gpc-step-body, .gpc-sec--slate .gpc-step-body { color: var(--mist); }
.gpc-sec--dark .gpc-step-n, .gpc-sec--slate .gpc-step-n { color: var(--brass); }
@media (max-width: 640px) { .gpc-step { grid-template-columns: 1fr; gap: var(--s1); } }

/* ── 15. TL;DR quick answer ────────────────────────────────────────────── */
.gpc-tldr {
  border-left: 2px solid var(--brass);
  background: rgba(184,134,47,.07);
  padding: var(--s3) clamp(1.25rem, 3vw, 2rem);
  margin: 0 0 var(--s4);
}
.gpc-tldr-label { font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-dk); margin: 0 0 .625rem; }
.gpc-tldr-body { font-size: 1.0625rem; line-height: 1.6; margin: 0; color: var(--ink); }
.gpc-sec--dark .gpc-tldr-body, .gpc-sec--slate .gpc-tldr-body { color: var(--bone); }
.gpc-sec--dark .gpc-tldr-label, .gpc-sec--slate .gpc-tldr-label { color: var(--brass); }

/* ── 16. FAQ ───────────────────────────────────────────────────────────── */
.gpc-faq { border-top: var(--hair-light); }
.gpc-faq-item { border-bottom: var(--hair-light); }
.gpc-faq-q {
  font-family: var(--ff-head); font-weight: 600; font-size: 1.0625rem;
  padding: var(--s3) 3rem var(--s3) 0; cursor: pointer; position: relative;
  list-style: none; transition: color .25s var(--ease);
}
.gpc-faq-q::-webkit-details-marker { display: none; }
.gpc-faq-q:hover { color: var(--brass-dk); }
.gpc-faq-q::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 1.5px solid var(--brass-dk); border-bottom: 1.5px solid var(--brass-dk);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.gpc-faq-item[open] .gpc-faq-q::after { transform: rotate(-135deg); }
.gpc-faq-a { padding: 0 3rem var(--s3) 0; color: #4A5259; }
.gpc-sec--dark .gpc-faq, .gpc-sec--dark .gpc-faq-item { border-color: var(--slate-2); }
.gpc-sec--dark .gpc-faq-a { color: var(--mist); }
.gpc-sec--dark .gpc-faq-q::after { border-color: var(--brass); }

/* ── 17. CTA band ──────────────────────────────────────────────────────── */
.gpc-cta { background: var(--ink); color: var(--bone); position: relative; overflow: hidden; }
.gpc-cta-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.gpc-cta-h2 { font-family: var(--ff-display); font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.05; margin: 0 0 var(--s2); }
.gpc-cta-body { color: var(--mist-2); margin: 0; max-width: 52ch; }
.gpc-cta-aside { border-left: 1px solid var(--slate-2); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
.gpc-cta-line { font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin: 0 0 .625rem; }
.gpc-cta-phone { font-family: var(--ff-display); font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--bone); text-decoration: none; display: block; line-height: 1.1; }
.gpc-cta-phone:hover { color: var(--brass-lt); }
.gpc-cta-email { font-family: var(--ff-mono); font-size: .8125rem; color: var(--mist-2); text-decoration: none; }
@media (max-width: 860px) {
  .gpc-cta-grid { grid-template-columns: 1fr; }
  .gpc-cta-aside { border-left: 0; border-top: 1px solid var(--slate-2); padding-left: 0; padding-top: var(--s3); }
}

/* ── 18. GPR bridge — the parent-brand anchor block ────────────────────── */
.gpc-bridge {
  border: 1px solid var(--bone-3); background: var(--bone-2);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--s4);
  align-items: center;
}
.gpc-bridge-label { font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-dk); margin: 0 0 .75rem; }
.gpc-bridge-title { font-family: var(--ff-display); font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.15; margin: 0 0 .625rem; }
.gpc-bridge-body { margin: 0; color: #4A5259; max-width: 60ch; }
.gpc-sec--dark .gpc-bridge { background: var(--slate); border-color: var(--slate-2); }
.gpc-sec--dark .gpc-bridge-body { color: var(--mist); }
.gpc-sec--dark .gpc-bridge-label { color: var(--brass); }
@media (max-width: 780px) { .gpc-bridge { grid-template-columns: 1fr; } }

/* ── 19. Breadcrumbs ───────────────────────────────────────────────────── */
.gpc-crumbs { font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: #5B636A; margin-bottom: var(--s3); }
.gpc-crumbs a { color: var(--brass-dk); text-decoration: underline; text-underline-offset: .2em; }
.gpc-crumbs a:hover { color: var(--clay); }
.gpc-crumbs span { opacity: .5; margin: 0 .5rem; }

/* ── 20. Prose (articles + long-form page bodies) ──────────────────────── */
.gpc-prose { max-width: 72ch; }
.gpc-prose > * + * { margin-top: var(--s2); }
.gpc-prose h2 { font-family: var(--ff-display); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.12; margin-top: var(--s5); margin-bottom: var(--s2); }
.gpc-prose h3 { font-family: var(--ff-head); font-weight: 600; font-size: 1.25rem; margin-top: var(--s4); margin-bottom: .5rem; }
.gpc-prose ul, .gpc-prose ol { padding-left: 1.25rem; margin-top: var(--s2); }
.gpc-prose li { margin-bottom: .625rem; }
.gpc-prose li::marker { color: var(--brass-dk); }
.gpc-prose blockquote {
  border-left: 2px solid var(--brass); margin: var(--s4) 0; padding: .25rem 0 .25rem var(--s3);
  font-family: var(--ff-display); font-size: 1.5rem; line-height: 1.3; color: var(--ink);
}
.gpc-prose table { width: 100%; border-collapse: collapse; margin: var(--s3) 0; font-size: .9375rem; }
.gpc-prose th, .gpc-prose td { text-align: left; padding: .875rem 1rem; border-bottom: var(--hair-light); vertical-align: top; }
.gpc-prose th { font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-dk); }
.gpc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 21. Article header + cards ────────────────────────────────────────── */
.gpc-post-head { background: var(--ink); color: var(--bone); padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem); }
.gpc-post-head-h1 { font-family: var(--ff-display); font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; margin: 0 0 var(--s3); max-width: 22ch; }
.gpc-post-meta { font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); display: flex; flex-wrap: wrap; gap: var(--s3); }
.gpc-post-meta strong { color: var(--brass-lt); font-weight: 500; }

.gpc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1px; background: var(--bone-3); border: 1px solid var(--bone-3); }
.gpc-card { background: var(--bone); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: .75rem; text-decoration: none; color: inherit; transition: background .3s var(--ease); }
.gpc-card:hover { background: #FFF; }
.gpc-card-kicker { font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-dk); }
.gpc-card-title { font-family: var(--ff-head); font-weight: 600; font-size: 1.125rem; line-height: 1.3; margin: 0; }
.gpc-card-body { font-size: .9375rem; color: #4A5259; margin: 0; }
.gpc-card-more { font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-dk); margin-top: auto; padding-top: var(--s2); }

/* ── 22. Link list (service/market index) ──────────────────────────────── */
.gpc-list { list-style: none; margin: 0; padding: 0; border-top: var(--hair-light); }
.gpc-list-item { border-bottom: var(--hair-light); }
.gpc-list-link {
  display: grid; grid-template-columns: 3.5rem 1fr auto; gap: var(--s3);
  align-items: baseline; padding: var(--s3) 0; text-decoration: none; color: inherit;
  transition: padding-left .35s var(--ease-out), background .3s var(--ease);
}
.gpc-list-link:hover { padding-left: var(--s2); background: rgba(184,134,47,.05); }
.gpc-list-n { font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .14em; color: var(--brass-dk); }
.gpc-list-title { font-family: var(--ff-head); font-weight: 600; font-size: 1.125rem; margin: 0 0 .25rem; }
.gpc-list-desc { font-size: .9375rem; color: #4A5259; margin: 0; }
.gpc-list-arrow { color: var(--brass-dk); transition: transform .35s var(--ease-out); }
.gpc-list-link:hover .gpc-list-arrow { transform: translateX(5px); }
.gpc-sec--dark .gpc-list, .gpc-sec--dark .gpc-list-item { border-color: var(--slate-2); }
.gpc-sec--dark .gpc-list-desc { color: var(--mist); }
@media (max-width: 640px) { .gpc-list-link { grid-template-columns: 2.5rem 1fr; } .gpc-list-arrow { display: none; } }

/* ── 23. Forms (Fluent Forms host styles) ──────────────────────────────── */
.gpc-form-shell { background: var(--slate); border: 1px solid var(--slate-2); padding: clamp(1.5rem, 4vw, 2.75rem); }
.gpc-form-shell label, .gpc-form-shell .ff-el-input--label label {
  font-family: var(--ff-mono) !important; font-size: .6875rem !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
  color: var(--brass) !important; margin-bottom: .5rem !important;
}
.gpc-form-shell input[type="text"], .gpc-form-shell input[type="email"],
.gpc-form-shell input[type="tel"], .gpc-form-shell select, .gpc-form-shell textarea {
  width: 100%; background: var(--ink) !important; border: 1px solid var(--slate-3) !important;
  color: var(--bone) !important; font-family: var(--ff-body) !important; font-size: 1rem !important;
  padding: .875rem 1rem !important; border-radius: 0 !important;
  transition: border-color .25s var(--ease);
}
.gpc-form-shell input:focus, .gpc-form-shell select:focus, .gpc-form-shell textarea:focus {
  border-color: var(--brass) !important; outline: 2px solid rgba(184,134,47,.35); outline-offset: 1px;
}
.gpc-form-shell button[type="submit"], .gpc-form-shell .ff-btn-submit {
  background: var(--brass) !important; color: var(--ink) !important; border: 0 !important;
  font-family: var(--ff-head) !important; font-weight: 600 !important; font-size: .9375rem !important;
  padding: 1rem 1.75rem !important; border-radius: 0 !important; cursor: pointer;
  transition: background .3s var(--ease);
}
.gpc-form-shell button[type="submit"]:hover, .gpc-form-shell .ff-btn-submit:hover { background: var(--brass-lt) !important; }

/* ── 24. Footer ────────────────────────────────────────────────────────── */
.gpc-footer { background: var(--ink); color: var(--mist); padding-block: clamp(3rem, 7vw, 5.5rem) var(--s4); border-top: 1px solid var(--slate-2); }
.gpc-footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.gpc-footer-col h3 { font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); margin: 0 0 var(--s2); font-weight: 500; }
.gpc-footer-col ul { list-style: none; margin: 0; padding: 0; }
.gpc-footer-col li { margin-bottom: .625rem; }
.gpc-footer-col a { color: var(--mist); text-decoration: none; font-size: .9375rem; transition: color .25s var(--ease); }
.gpc-footer-col a:hover { color: var(--brass-lt); }
.gpc-footer-about { max-width: 42ch; font-size: .9375rem; line-height: 1.65; }
.gpc-footer-gpr {
  margin-top: var(--s4); padding: var(--s3);
  border: 1px solid var(--slate-2); background: var(--slate);
  font-size: .9375rem; line-height: 1.65; color: var(--mist-2);
}
.gpc-footer-gpr a { color: var(--brass-lt); }
.gpc-footer-gpr strong { color: var(--bone); }
.gpc-footer-legal {
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--slate-2);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); justify-content: space-between;
  font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .06em; color: var(--mist);
}
.gpc-footer-legal a { color: var(--mist); text-decoration: underline; text-underline-offset: .2em; }
.gpc-footer-legal a:hover { color: var(--brass-lt); }
.gpc-footer-legal p { margin: 0; max-width: 78ch; line-height: 1.7; }
@media (max-width: 900px) { .gpc-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gpc-footer-grid { grid-template-columns: 1fr; } }

/* ── 25. Motion — safe by default ──────────────────────────────────────── */
/* Base state is VISIBLE. The `js` class (set inline in <head>) is what arms the
   animation, so a JS failure or a headless crawler still sees every section. */
.js .gpc-reveal { opacity: 0; transform: translateY(18px); }
.js .gpc-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js .gpc-reveal, .js .gpc-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── 26. Utilities ─────────────────────────────────────────────────────── */
.gpc-mt-4 { margin-top: var(--s4); }
.gpc-mt-5 { margin-top: var(--s5); }
.gpc-mb-4 { margin-bottom: var(--s4); }
.gpc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.gpc-cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); }


/* ── 27. Inline link affordance ─────────────────────────────────────────── */
/* Lighthouse `link-in-text-block`: a link inside a paragraph must be
   distinguishable without colour. Underline every inline link in body copy;
   buttons, cards and nav items are excluded because they carry their own
   non-colour affordance (border, background, or a hover rule). */
.gpc-prose a,
.gpc-signal-body a,
.gpc-step-body a,
.gpc-faq-a a,
.gpc-bridge-body a,
.gpc-footer-about a,
.gpc-footer-gpr a,
.gpc-tldr-body a,
.gpc-lede a,
.gpc-split-body a {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.gpc-btn, .gpc-card, .gpc-market, .gpc-bento-cell,
.gpc-list-link, .gpc-nav-link, .gpc-lockup { text-decoration: none; }

/* Mono runs at 500 throughout; the 400 face is not shipped. */
.gpc-rail-item, .gpc-crumbs, .gpc-market-num, .gpc-market-tier,
.gpc-market-county, .gpc-market-chip, .gpc-footer-legal,
.gpc-post-meta, .gpc-cta-line, .gpc-num { font-weight: 500; }


/* ── 28. Block-gap reset on the site shell ─────────────────────────────── */
/* WordPress applies its default block gap between the top-level template
   parts, which put a 24px margin above <main> and above the footer. That let
   the bone body background show as a stripe under the sticky dark header and
   again above the dark footer. The sections own their own spacing. */
.wp-site-blocks > *,
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > main {
  margin-block-start: 0;
  margin-block-end: 0;
}
.wp-site-blocks { padding-top: 0; }
main.wp-block-group > *:first-child { margin-block-start: 0; }

/* ── 20. OM brand devices ──────────────────────────────────────────────────
   Ported from the locked Gold Peach Commercial Offering Memorandum system
   (Drive: 1-Listings/Commercial/OM Template Pack). The OM builds every one of
   these from CSS gradients, which is a PERMANENT factory_cwv_gate failure here:
   the gate walks each element's computed backgroundImage and tries to FETCH it,
   and a bare linear-/radial-gradient is unfetchable.

   The escape hatch is to put the gradient INSIDE an SVG data URI. The data URI
   is fetchable, the gradient is internal to the SVG, and the existing grain
   overlay already proves the route on this site at perf 1.00. Every device
   below is therefore a faithful port, not a compromise.
   ────────────────────────────────────────────────────────────────────────── */

/* The OM's signature inset hairline — a gold rule floating inside the page
   edge rather than a border on it. Sheet-level, so it reads as stationery. */
.gpc-framed::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: var(--gutter); right: var(--gutter);
  top: clamp(1.25rem, 2.5vw, 2rem); bottom: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid rgba(231, 199, 120, .12);
  border-radius: 18px;
}
.gpc-sec--bone .gpc-framed::before,
.gpc-sec--bone2 .gpc-framed::before { border-color: rgba(151, 115, 35, .16); }

/* 22px dot field — the OM's .bggrid. Warmth without an image request. */
.gpc-tex-dots::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='.75' fill='%23E7C778' fill-opacity='.12'/%3E%3C/svg%3E");
  opacity: .16;
}
.gpc-sec--bone .gpc-tex-dots::after,
.gpc-sec--bone2 .gpc-tex-dots::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='.75' fill='%23503714' fill-opacity='.07'/%3E%3C/svg%3E");
  opacity: 1;
}
.gpc-tex-dots > * { position: relative; z-index: 2; }

/* 72px drafting grid — structural texture under dark sheets. */
.gpc-tex-grid::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M72 0V72H0' fill='none' stroke='%23FFFFFF' stroke-opacity='.025' stroke-width='1'/%3E%3C/svg%3E");
}
.gpc-tex-grid > * { position: relative; z-index: 2; }

/* The diagonal light sliver that crosses every OM sheet at 128deg. */
.gpc-streak::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .55;
  background-color: #E7C778;
  -webkit-mask-image: linear-gradient(128deg, rgba(0,0,0,0) 44%, rgba(0,0,0,.10) 46.2%, rgba(0,0,0,0) 46.8%);
  mask-image: linear-gradient(128deg, rgba(0,0,0,0) 44%, rgba(0,0,0,.10) 46.2%, rgba(0,0,0,0) 46.8%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* 3px gold rule that fades out to the right — the OM's card top edge and the
   underline beneath every section head. */
.gpc-goldrule { position: relative; }
.gpc-goldrule::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background-color: #C8A14D;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,1) 45%, rgba(0,0,0,0));
  mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,1) 45%, rgba(0,0,0,0));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: .82;
}

/* Corner glow. The OM uses a radial-gradient; same shape, fetchable wrapper. */
.gpc-glow-corner::before {
  content: ""; position: absolute; right: -42px; top: -42px;
  width: 210px; height: 210px; pointer-events: none; z-index: 0;
  background-color: #E7C778;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,.10), rgba(0,0,0,0) 70%);
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,.10), rgba(0,0,0,0) 70%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* The OM's own paper tone for light sheets, so a light section reads as the
   same stationery rather than as "the white one". */
.gpc-sec--paper { background: var(--bone-2); color: var(--ink); }

/* ── 21. Photography ───────────────────────────────────────────────────────
   Scrims are SVG data URIs, not CSS gradients, for the reason given in 20.
   Every frame is object-fit: cover inside a fixed-aspect box so a photograph
   can never move the layout (CLS budget is 0.05 and the build measures 0).
   ────────────────────────────────────────────────────────────────────────── */

.gpc-phero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  background: var(--ink); color: var(--bone);
  overflow: hidden;
}
.gpc-phero-media { position: absolute; inset: 0; z-index: 0; }
.gpc-phero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }

/* Vertical scrim: transparent at the top, brand black at the bottom, so the
   headline sits on ink rather than on whatever the photograph happens to be. */
.gpc-phero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-color: #070706;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.34), rgba(0,0,0,.62) 45%, rgba(0,0,0,.93));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.34), rgba(0,0,0,.62) 45%, rgba(0,0,0,.93));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.gpc-phero-inner {
  position: relative; z-index: 3;
  padding-block: clamp(3rem, 7vw, 6rem);
  width: 100%;
}
.gpc-phero-h1 {
  font-family: var(--ff-display); font-weight: 400;
  letter-spacing: -.032em; line-height: .96; margin: 0 0 var(--s3);
  color: var(--bone); max-width: 17ch;
}
.gpc-phero-h1 em { color: var(--brass-lt); font-style: italic; }

/* Page tiers. This is the hierarchy the flat build was missing: a flagship page
   and a leaf page must not carry the same visual weight. */
.gpc-phero--home  { min-height: clamp(30rem, 82vh, 52rem); }
.gpc-phero--home  .gpc-phero-h1 { font-size: clamp(2.9rem, 6.6vw, 5.6rem); max-width: 15ch; }
.gpc-phero--hub   { min-height: clamp(22rem, 56vh, 34rem); }
.gpc-phero--hub   .gpc-phero-h1 { font-size: clamp(2.4rem, 4.8vw, 4rem); }
.gpc-phero--leaf  { min-height: clamp(18rem, 44vh, 27rem); }
.gpc-phero--leaf  .gpc-phero-h1 { font-size: clamp(2.1rem, 3.9vw, 3.25rem); }
.gpc-phero--money { min-height: clamp(17rem, 40vh, 25rem); }
.gpc-phero--money .gpc-phero-h1 { font-size: clamp(2rem, 3.6vw, 3rem); max-width: 20ch; }

/* Full-bleed band — the deliberate rhythm break between sections. */
.gpc-band { position: relative; isolation: isolate; background: var(--ink); }
.gpc-band-media { aspect-ratio: 21 / 7; }
.gpc-band-media img { width: 100%; height: 100%; object-fit: cover; }
.gpc-band-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-color: #070706;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.86), rgba(0,0,0,.30) 62%, rgba(0,0,0,.10));
  mask-image: linear-gradient(to right, rgba(0,0,0,.86), rgba(0,0,0,.30) 62%, rgba(0,0,0,.10));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.gpc-band-inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
}
.gpc-band-statement {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(1.5rem, 3.1vw, 2.9rem); line-height: 1.12;
  letter-spacing: -.022em; color: var(--bone); max-width: 22ch; margin: 0;
}
.gpc-band-statement em { color: var(--brass-lt); font-style: italic; }
@media (max-width: 760px) { .gpc-band-media { aspect-ratio: 4 / 3; } }

/* Captioned editorial figure. */
.gpc-figure { margin: 0; }
.gpc-figure img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}
.gpc-figure-cap {
  font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .1em;
  line-height: 1.6; color: var(--mist); margin-top: .875rem;
  padding-left: .75rem; border-left: 2px solid var(--brass);
}
.gpc-sec--dark .gpc-figure-cap, .gpc-sec--slate .gpc-figure-cap { color: var(--mist-2); }

/* Overlapping image/text composition — depth without a page builder. */
.gpc-msplit {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center; gap: 0;
}
.gpc-msplit-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 16px; box-shadow: 0 34px 90px rgba(0, 0, 0, .32);
}
.gpc-msplit-body {
  position: relative; z-index: 2;
  margin-left: -3.5rem; padding: clamp(1.75rem, 3.4vw, 3rem);
  background: var(--bone); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .14);
}
.gpc-sec--dark .gpc-msplit-body, .gpc-sec--slate .gpc-msplit-body {
  background: var(--slate-2); box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.gpc-msplit--flip { direction: rtl; }
.gpc-msplit--flip > * { direction: ltr; }
.gpc-msplit-label {
  font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass-dk); margin-bottom: var(--s2);
}
.gpc-sec--dark .gpc-msplit-label, .gpc-sec--slate .gpc-msplit-label { color: var(--brass); }
@media (max-width: 900px) {
  .gpc-msplit { grid-template-columns: 1fr; }
  .gpc-msplit-body { margin-left: 0; margin-top: -2.5rem; margin-inline: 1rem; }
}

/* Gold-ruled statement, straight from the OM. */
.gpc-quote {
  margin: var(--s4) 0; padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1.25rem, 2.6vw, 2.25rem);
  border-left: 4px solid var(--brass);
  border-top: 1px solid var(--bone-3); border-right: 1px solid var(--bone-3);
  border-bottom: 1px solid var(--bone-3);
  border-radius: 12px; background: var(--bone-2);
}
.gpc-sec--dark .gpc-quote, .gpc-sec--slate .gpc-quote {
  background: var(--slate-2); border-top-color: var(--slate-3);
  border-right-color: var(--slate-3); border-bottom-color: var(--slate-3);
}
.gpc-quote-text {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(1.3rem, 2.3vw, 1.9rem); line-height: 1.22;
  letter-spacing: -.018em; margin: 0;
}
.gpc-quote-cite {
  display: block; margin-top: var(--s2); font-style: normal;
  font-family: var(--ff-mono); font-size: .625rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mist);
}