/* ==========================================================================
   Whitcomb Capital, "Ledger & Brass"
   Institutional restraint. Deep ink green-black, ivory, restrained brass.
   Tabular numerals on every figure.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  --bg:        #101714;
  --bg-2:      #18211D;
  --bg-3:      #1E2823;
  --ivory:     #F0EDE6;
  --ivory-2:   #E8E4DB;
  --brass:     #B08D57;
  --brass-lt:  #C9A874;
  --text:      #F0EDE6;
  --text-dim:  #93998F;
  --ink:       #101714;
  --ink-dim:   #5C6359;

  --rule-dark:  rgba(240, 237, 230, 0.13);
  --rule-light: rgba(16, 23, 20, 0.16);
  --brass-soft: rgba(176, 141, 87, 0.30);

  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --hdr-h: 68px;

  --wrap:   1240px;
  --narrow: 880px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 0.8s;
}

/* --- 2. Reset ----------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, p, dl, dd, dt, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brass);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* --- 3. Typography ------------------------------------------------------ */

.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.1;
  text-wrap: balance;
}
.display--xl { font-size: clamp(2.6rem, 6.6vw, 5.25rem); line-height: 1.02; letter-spacing: -0.022em; }
.display--lg { font-size: clamp(1.95rem, 4.4vw, 3.4rem); line-height: 1.12; }
.display--md { font-size: clamp(1.7rem, 3.2vw, 2.6rem);  line-height: 1.16; }
.display--sm { font-size: clamp(1.25rem, 2vw, 1.6rem);   line-height: 1.25; }

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.5rem;
}
.eyebrow--dark { color: #8A6D3F; }

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  font-weight: 300;
}

/* Every figure on the site. Tabular so digits never shift width. */
.fig,
.counter__value,
[data-fig],
[data-count],
.tnum {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.015em;
}

.fig {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  display: block;
}
.fig__unit {
  font-size: 0.5em;
  color: #8A6D3F;
  letter-spacing: 0.02em;
  vertical-align: baseline;
}
.fig-label {
  margin-top: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1.45;
}

/* --- 4. Layout ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.25rem);
}
.wrap--narrow { max-width: var(--narrow); }

.section {
  position: relative;
  padding: clamp(5rem, 10vw, 9.5rem) 0;
}
.section--dark   { background: var(--bg);      color: var(--text); }
.section--panel  { background: var(--bg-2);    color: var(--text); }
.section--ivory  { background: var(--ivory);   color: var(--ink); }
.section--ivory-2 { background: var(--ivory-2); color: var(--ink); }
.section--bleed  { padding-left: 0; padding-right: 0; }

.section--ivory .display,
.section--ivory-2 .display { color: var(--ink); }

/* Faint ledger columns, the one texture this build allows itself. */
.section--dark::before,
.section--panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    rgba(240, 237, 230, 0.028) 0 1px,
    transparent 1px 25%
  );
  opacity: 0.7;
}
.section--dark > *,
.section--panel > * { position: relative; z-index: 1; }

/* --- 5. Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--brass);
  color: var(--brass);
  background: transparent;
  cursor: pointer;
  transition: background var(--slow) var(--ease), color var(--slow) var(--ease);
}
.btn:hover { background: var(--brass); color: var(--bg); }

.btn--brass {
  background: var(--brass);
  color: #14100A;
  border-color: var(--brass);
}
.btn--brass:hover { background: var(--brass-lt); border-color: var(--brass-lt); color: #14100A; }

.btn--lg { padding: 1.05rem 2.2rem; font-size: 0.8125rem; }

/* --- 6. Concept tag and header ------------------------------------------ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.site-header.is-solid {
  background: rgba(16, 23, 20, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--rule-dark);
}
.site-header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.25rem);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
}
.wordmark__mark {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--brass);
  color: var(--brass);
  font-family: var(--serif);
  font-size: 0.875rem;   /* a single letter carries more size than "WC" did */
  line-height: 1;
  flex: none;
}
.wordmark__name {
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
}

.site-nav__list { display: flex; gap: 2rem; }
.site-nav a {
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.site-nav a:hover { color: var(--text); border-bottom-color: var(--brass); }

@media (max-width: 1023px) {
  .site-nav { display: none; }
}
@media (max-width: 560px) {
  .site-header__cta { display: none; }
  .wordmark__name { font-size: 0.95rem; }
}

/* --- 7. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--bg);
}
@supports (height: 100svh) {
  .hero { height: 100svh; }
}

.hero__media { position: absolute; inset: 0; }
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Biased slightly left so the dusk sky, which the overlay copy sits on,
     stays in frame as the crane climbs. No scale: the earlier 1.06 existed
     only to crop the alt clip's unstable right edge, which this source does
     not have, and it cost resolution for nothing. */
  object-position: 42% 50%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(10, 15, 13, 0.90) 0%, rgba(10, 15, 13, 0.62) 38%, rgba(10, 15, 13, 0.12) 72%, rgba(10, 15, 13, 0.30) 100%),
    linear-gradient(to top, rgba(10, 15, 13, 0.86) 0%, rgba(10, 15, 13, 0.10) 42%, rgba(10, 15, 13, 0.42) 100%);
}

/* Narrow viewports put the copy across the full frame width, so the left to
   right scrim no longer covers it. Swap to a strong bottom up scrim. */
@media (max-width: 767px) {
  .hero__scrim {
    background: linear-gradient(to top,
      rgba(10, 15, 13, 0.95) 0%,
      rgba(10, 15, 13, 0.86) 30%,
      rgba(10, 15, 13, 0.48) 62%,
      rgba(10, 15, 13, 0.30) 100%);
  }
}

.hero__overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--hdr-h) clamp(1.25rem, 4vw, 3.25rem) clamp(2rem, 5vh, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__inner { max-width: 44rem; }

.hero__kicker {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.75rem;
}
.hero__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.6vw, 5.25rem);
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.hero__thesis {
  font-size: clamp(1.02rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: rgba(240, 237, 230, 0.86);
  max-width: 32rem;
  margin-bottom: 2.5rem;
}

.hero__hint {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--text-dim);
}
.hero__hint-label {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero__hint-rule {
  display: block;
  width: 4.5rem;
  height: 1px;
  background: linear-gradient(to right, var(--brass), transparent);
}

/* --- 8. Thesis ---------------------------------------------------------- */

.thesis .wrap { text-align: center; }
.thesis__body {
  margin: 2.75rem auto 0;
  display: grid;
  gap: 1.5rem;
  max-width: 46rem;
}
.thesis__body p { text-wrap: balance; }
.thesis__body p {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.68;
  color: rgba(240, 237, 230, 0.80);
}
.thesis__since {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-dark);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Full bleed architectural band. All imagery on the site shares one
   desaturated, darkened treatment so photography reads as a family rather
   than as a listing site. */
.thesis__band {
  position: relative;
  margin: clamp(3.5rem, 7vw, 6rem) 0 calc(clamp(5rem, 10vw, 9.5rem) * -1);
  overflow: hidden;
}
.thesis__band img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  filter: saturate(0.62) brightness(0.72) contrast(1.05);
}
.thesis__band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(16,23,20,0.55) 0%, rgba(16,23,20,0.12) 45%, rgba(16,23,20,0.72) 100%);
}
.thesis__band-cap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(1.25rem, 3.5vw, 2.5rem);
  width: 100%;
  max-width: var(--wrap);
  padding: 0 clamp(1.25rem, 4vw, 3.25rem);
  z-index: 1;
  text-align: center;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass-lt);
}
@media (max-width: 700px) {
  .thesis__band img { aspect-ratio: 16 / 9; }
}

/* --- 9. Track record ---------------------------------------------------- */

.track__head { text-align: center; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 900px) { .track__head .display { white-space: nowrap; } }
.track__item { text-align: center; }

.track__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule-light);
  border-left: 1px solid var(--rule-light);
}
.track__item {
  padding: clamp(1.75rem, 3.2vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
  border-right: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
}
@media (min-width: 700px)  { .track__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .track__grid { grid-template-columns: repeat(6, 1fr); } }

.track__note {
  margin-top: 2rem;
  text-align: center;
  text-wrap: balance;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0.75;
}

/* --- 10. Portfolio map (signature) -------------------------------------- */

.portfolio__head { max-width: 44rem; }
.portfolio__intro {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--text-dim);
  line-height: 1.6;
}

.portfolio__counters {
  margin: clamp(2.75rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  padding: 1.75rem 0;
  border-top: 1px solid var(--brass-soft);
  border-bottom: 1px solid var(--rule-dark);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.counter__value {
  display: block;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1;
  color: var(--brass-lt);
}
.counter__label {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.portfolio__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}
@media (min-width: 1024px) {
  .portfolio__split { grid-template-columns: 66fr 34fr; }
}

.map-frame {
  background: var(--bg-2);
  border: 1px solid var(--rule-dark);
}
.map {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 576;
}
/* Desktop: the map column matches the panel's height. The frame stretches,
   the map keeps its aspect and sits centred inside it. The section is wider
   than the standard wrap so the map itself grows to meet the panel. */
@media (min-width: 1024px) {
  .portfolio > .wrap { max-width: 1400px; }
  .portfolio__split { align-items: stretch; }
  .portfolio__mapcol { display: flex; flex-direction: column; }
  .map-frame { flex: 1; display: flex; align-items: center; }
}
.map__svg { width: 100%; height: 100%; }

.map__state {
  fill: rgba(240, 237, 230, 0.022);
  stroke: rgba(240, 237, 230, 0.16);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.map__state--market {
  fill: rgba(176, 141, 87, 0.055);
  stroke: rgba(176, 141, 87, 0.42);
}

/* Pins: a plumb line to a ground dot, not a consumer teardrop. */
.pin { cursor: pointer; }
.pin__hit { fill: transparent; stroke: none; }
.pin__stem {
  stroke: var(--brass);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.75;
}
.pin__ground { fill: var(--brass); }
.pin__head {
  fill: var(--brass);
  stroke: var(--bg-2);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: fill 0.4s var(--ease);
}
.pin__ring { fill: none; stroke: var(--brass); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; }
.pin__halo { fill: none; stroke: var(--brass-lt); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.4s var(--ease); }

.pin.is-active .pin__head,
.pin:hover .pin__head { fill: var(--brass-lt); }
.pin.is-active .pin__halo,
.pin:hover .pin__halo { opacity: 1; }
.pin:focus { outline: none; }
.pin:focus-visible .pin__halo { opacity: 1; }
.pin:focus-visible .pin__head { fill: var(--brass-lt); }

/* HTML labels sit over the SVG so type stays at real pixel sizes. */
.map__label {
  position: absolute;
  transform: translateY(-50%);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.4s var(--ease);
}
.map__label--end  { transform: translate(-100%, -50%); }
.map__label.is-active { color: var(--brass-lt); }

@media (max-width: 1023px) {
  /* Narrow: labels drop out (the panel carries the name), the viewBox crops
     to keep Texas whole, and the pins grow so they stay tappable. The market
     list below is the primary tap surface at this width. */
  .map__label { display: none; }
  .map { aspect-ratio: 1000 / 555; }
  /* Pin radii are set in main.js, not here: Safari does not apply CSS SVG
     geometry properties, so the attributes are the only reliable route. */
  .map__state       { stroke: rgba(240, 237, 230, 0.10); }
  .map__state--market { stroke: rgba(176, 141, 87, 0.52); }
}

/* Market list: the primary tap surface on narrow viewports and the
   accessible list of markets at every width. */
.market-list {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
}
.market-list__btn {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--bg-2);
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.market-list__btn:hover { background: var(--bg-3); }
.market-list__btn.is-active { background: var(--bg-3); }
.market-list__btn.is-active .market-list__name { color: var(--brass-lt); }
.market-list__name {
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text);
}
.market-list__units {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.875rem;
  color: var(--brass);
}
@media (min-width: 1024px) {
  .market-list { display: none; }
}

/* Panel */
/* Both panel states share one grid cell, so the container is always as tall
   as the taller of the two and swapping never shifts the page. */
.portfolio__panel {
  border: 1px solid var(--rule-dark);
  background: var(--bg-2);
  min-height: 20rem;
  display: grid;
}
.panel {
  grid-area: 1 / 1 / 2 / 2;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  width: 100%;
  transition: opacity 0.35s var(--ease);
}
.panel[hidden] { display: none; }   /* no-JS only, JS swaps to .is-off */
.panel.is-off { visibility: hidden; opacity: 0; pointer-events: none; }

.panel__eyebrow {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.5rem;
}
.panel__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
  color: var(--text);
}
.panel__region {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.panel__body {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(240, 237, 230, 0.72);
}
.panel__hint {
  margin-top: 2rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: 0.7;
}

.panel__stats {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1rem;
}
.panel__stat-value {
  display: block;
  font-family: var(--serif);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--brass-lt);
}
.panel__stat-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.panel__flagship {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
}
.panel__flagship-label {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.6rem;
}
.panel__flagship-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--text);
}
.panel__flagship-meta {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--brass-soft);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.status::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--brass);
  flex: none;
}

/* --- 11. Strategy ------------------------------------------------------- */

.strategy__head { max-width: 44rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.strategy__lede { margin-top: 1.5rem; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--ink-dim); }

.criteria { border-top: 1px solid var(--rule-light); }
.criteria__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: clamp(1.5rem, 2.6vw, 2.1rem) 0;
  border-bottom: 1px solid var(--rule-light);
}
@media (min-width: 760px) {
  .criteria__row { grid-template-columns: 15rem 1fr; gap: 2.5rem; align-items: baseline; }
}
.criteria__term {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8A6D3F;
}
.criteria__detail {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- 12. Vertically integrated ------------------------------------------ */

.integrated__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
}
/* Heading runs across the top; below it the image is exactly as tall as the
   text column beside it. */
@media (min-width: 900px) {
  .integrated__split {
    grid-template-columns: 45fr 55fr;
    grid-template-areas: "head head" "fig body";
    row-gap: clamp(2.25rem, 4vw, 3.25rem);
    align-items: stretch;
  }
  .integrated__head { grid-area: head; max-width: 52rem; }
  .integrated__figure { grid-area: fig; }
  .integrated__body { grid-area: body; }
}
.integrated__head .display { margin: 0; }
.integrated__figure {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule-dark);
}
.integrated__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.78) brightness(0.82) contrast(1.04);
}
@media (min-width: 900px) {
  .integrated__figure img {
    position: absolute; inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}
.integrated__lede {
  margin-top: 0;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  color: rgba(240, 237, 230, 0.78);
}
.disciplines { margin-top: 2.5rem; border-top: 1px solid var(--rule-dark); }
.disciplines__item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule-dark);
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 1rem;
}
.disciplines__n {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--brass);
  padding-top: 0.25rem;
}
.disciplines__name {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--text);
}
.disciplines__detail {
  grid-column: 2;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-dim);
}

/* --- 13. Offerings ------------------------------------------------------ */

.offerings__head { max-width: 44rem; margin: 0 auto clamp(2.75rem, 5vw, 4rem); text-align: center; }
.offerings__note { margin: 1.5rem auto 0; max-width: 34rem; text-wrap: balance; color: var(--text-dim); font-size: clamp(0.95rem, 1.2vw, 1.05rem); }

.offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
}
@media (min-width: 820px) { .offer-grid { grid-template-columns: repeat(3, 1fr); } }

.offer {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
}

/* Gated: the image is dimmed on purpose, the detail sits behind the request. */
.offer__media {
  position: relative;
  margin: 0 calc(clamp(1.75rem, 3vw, 2.5rem) * -1) clamp(1.5rem, 2.5vw, 2rem);
  overflow: hidden;
}
.offer__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.62) brightness(0.74) contrast(1.05);
  transition: filter var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.offer__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(16,23,20,0.10), rgba(16,23,20,0.68));
}
.offer:hover .offer__media img {
  filter: saturate(0.72) brightness(0.86) contrast(1.05);
  transform: scale(1.02);
}
.offer > .offer__status { margin-top: 0; }
.offer__status {
  align-self: flex-start;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--brass-soft);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.offer__status--upcoming { color: var(--text-dim); border-color: var(--rule-dark); }
.offer__market {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--text);
}
.offer__meta {
  display: grid;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.offer__gate {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
}
.offer__gate a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass);
  transition: gap 0.4s var(--ease);
}
.offer__gate a::after { content: ""; width: 1.25rem; height: 1px; background: var(--brass); }
.offer__gate a:hover { gap: 1rem; }

/* --- 14. Transactions --------------------------------------------------- */

.transactions__head { max-width: 44rem; margin: 0 auto clamp(2.75rem, 5vw, 4rem); text-align: center; }

.deal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule-light);
  border: 1px solid var(--rule-light);
}
@media (min-width: 640px) { .deal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .deal-grid { grid-template-columns: repeat(4, 1fr); } }

.deal {
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0 clamp(1.6rem, 2.6vw, 2.1rem) clamp(1.6rem, 2.6vw, 2.1rem);
}
.deal__media {
  margin: 0 calc(clamp(1.6rem, 2.6vw, 2.1rem) * -1) clamp(1.35rem, 2.2vw, 1.75rem);
  overflow: hidden;
}
.deal__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.66) contrast(1.03);
}

/* --- Per image grading -------------------------------------------------- */

/* The amenity deck is the only frame with pool water in it. Left alone the
   aqua pulls toward the Stonewater resort register this build must not
   resemble, so it is desaturated harder than its neighbours. */
.offer__media img[src$="amenity-deck.png"] {
  filter: saturate(0.34) brightness(0.74) contrast(1.08);
}
.offer:hover .offer__media img[src$="amenity-deck.png"] {
  filter: saturate(0.42) brightness(0.86) contrast(1.08);
}

/* This skyline is a photograph while every other image is a render. Pulled
   toward the others: less saturation, slightly lifted blacks, softer contrast
   so it does not read as a different source. */
.deal__media img[src$="skyline-secondary.png"] {
  filter: saturate(0.42) contrast(0.94) brightness(1.06);
}
.deal__name {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--ink);
}
.deal__market {
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.deal__meta {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-light);
  display: grid;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.deal__outcome { color: #8A6D3F; letter-spacing: 0.06em; }

.transactions__note {
  margin-top: 2rem;
  text-align: center;
  text-wrap: balance;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0.75;
}

/* --- 15. Team ----------------------------------------------------------- */

.team__head { max-width: 44rem; margin: 0 auto clamp(2.75rem, 5vw, 4rem); text-align: center; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--rule-light);
  border-top: 1px solid var(--rule-light);
  border-left: 1px solid var(--rule-light);
}
.member {
  background: var(--ivory-2);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  border-right: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
}
.member__mono {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border: 1px solid #8A6D3F;
  color: #8A6D3F;
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin-bottom: 1.75rem;
}
.member__photo {
  width: 54px; height: 54px;
  object-fit: cover;
  margin-bottom: 1.75rem;
  filter: saturate(0.8);
}
.member__name {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
}
.member__role {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8A6D3F;
  /* Reserve two lines so a wrapping title does not drop that card's rule
     out of alignment with the rest of the row. */
  min-height: 3.3em;
}
.member__focus {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-light);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.team__note {
  margin-top: 2rem;
  text-align: center;
  text-wrap: balance;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0.75;
}

/* --- 16. Process -------------------------------------------------------- */

.process { overflow: hidden; }
.process__inner { position: relative; z-index: 1; }

.process__head { max-width: 44rem; margin: 0 auto clamp(2.75rem, 5vw, 4rem); text-align: center; }

.steps {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--brass-soft);
}
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(0rem, 2vw, 1.75rem) clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 860px) {
  .step { border-bottom: none; border-right: 1px solid var(--rule-dark); padding-left: clamp(1rem, 2vw, 1.75rem); }
  .step:first-child { padding-left: 0; }
  .step:last-child { border-right: none; }
}
.step__n {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--brass);
  display: block;
  margin-bottom: 1.25rem;
}
.step__title {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--text);
}
.step__detail {
  margin-top: 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-dim);
}

/* --- 17. Request access ------------------------------------------------- */

.access__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .access__split { grid-template-columns: 38fr 62fr; }
}
/* The one CTA. The dusk photograph from the old CTA band sits behind it,
   scrimmed from the left where the copy is; the form is a glass card. */
.access {
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
}
.access__media { position: absolute; inset: 0; z-index: -1; }
.access__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  filter: saturate(0.75) brightness(1) contrast(1.04);
}
.access__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(10, 15, 13, 0.92) 0%,
      rgba(10, 15, 13, 0.70) 34%,
      rgba(10, 15, 13, 0.22) 64%,
      rgba(10, 15, 13, 0.08) 100%),
    linear-gradient(to top, rgba(10, 15, 13, 0.45), rgba(10, 15, 13, 0) 35%);
}
@media (max-width: 899px) {
  .access__media img { object-position: 78% 40%; }
  .access__media::after {
    background: linear-gradient(to bottom,
      rgba(10, 15, 13, 0.70) 0%,
      rgba(10, 15, 13, 0.86) 45%,
      rgba(10, 15, 13, 0.94) 100%);
  }
}
.access .display { color: var(--text); }
.access__intro { align-self: center; }
.access__body { margin-top: 1.5rem; font-size: clamp(1rem, 1.3vw, 1.15rem); color: rgba(240, 237, 230, 0.78); line-height: 1.6; text-wrap: balance; }

.access__formwrap {
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
  background: rgba(16, 23, 20, 0.38);
  border: 1px solid rgba(240, 237, 230, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
          backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(240, 237, 230, 0.06);
}
.access .field label { color: rgba(240, 237, 230, 0.66); }
.access .field input,
.access .field select,
.access .field textarea {
  background-color: rgba(10, 15, 13, 0.35);
  border-color: rgba(240, 237, 230, 0.18);
  color: var(--text);
}
.access .field select option { color: var(--ink); background: var(--ivory); }
.access .field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%);
}
.access .form__status { color: rgba(240, 237, 230, 0.72); font-size: 0.8125rem; }

.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 620px) {
  .form { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}
.field { display: grid; gap: 0.6rem; }
.field label {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: transparent;
  border: 1px solid var(--rule-light);
  border-radius: 0;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 300;
  transition: border-color 0.4s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, #8A6D3F 50%), linear-gradient(135deg, #8A6D3F 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--brass); outline: none; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.form__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* --- 18. Footer --------------------------------------------------------- */

.site-footer {
  background: #0C1210;
  color: var(--text);
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--brass-soft);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 820px) {
  .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr auto; gap: 3rem; }
}
.site-footer__addr,
.site-footer__contact {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-dim);
}
.site-footer__contact a { color: var(--text-dim); border-bottom: 1px solid transparent; }
.site-footer__contact a:hover { color: var(--brass); border-bottom-color: var(--brass); }

.site-footer__cols { display: contents; }
.footer-col__title {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.25rem;
}
.footer-col ul { display: grid; gap: 0.75rem; }
.footer-col a { font-size: 0.875rem; color: var(--text-dim); }
.footer-col a:hover { color: var(--text); }

.site-footer__legal { padding-top: clamp(1.75rem, 3vw, 2.5rem); display: flex; justify-content: center; }
.legal {
  font-size: 0.75rem;
  line-height: 1.75;
  color: rgba(147, 153, 143, 0.85);
}
.legal--concept { color: rgba(240, 237, 230, 0.72); }
.legal__tag {
  display: inline-block;
  margin-right: 0.6rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--brass);
  color: var(--brass);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.legal__copy { color: var(--text-dim); opacity: 0.7; }

.site-footer__wordmark { display: flex; align-items: center; gap: 0.7rem; }
.site-footer__name { font-family: var(--serif); font-size: 1.02rem; letter-spacing: 0.02em; color: var(--text); }

.legal__copy { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; opacity: 0.85; }
.legal__copy .soak-credit-text { text-wrap: balance; }
@media (min-width: 760px) { .legal__copy { white-space: nowrap; } }
.legal__copy .soak-mark { display: inline-block; width: 20px; height: 20px; flex: none;
  background-color: var(--brass);
  -webkit-mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat;
          mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat;
  opacity: .9; transition: opacity .2s ease; }
.legal__copy:hover .soak-mark { opacity: 1; }
.legal__copy:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 759px) {
  .legal__copy { align-items: flex-start; text-align: left; }
}

/* --- 19. Scroll offsets and reveal -------------------------------------- */

:target,
section[id] { scroll-margin-top: calc(var(--hdr-h) + 1rem); }

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
}
.no-motion [data-reveal],
.is-revealed {
  opacity: 1;
  transform: none;
}

/* --- 20. Reduced motion ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__video { display: none; }
  .hero__media { background-image: url("../assets/images/hero-poster.jpg"); background-size: cover; background-position: 42% 50%; }
}

/* --- Design audit 09-30: centred card text and centred steps ------------ */
.deal { text-align: center; }
.deal__meta { justify-items: center; }
.member { text-align: center; }
.member__mono, .member__photo { margin-left: auto; margin-right: auto; }
.step { text-align: center; }
@media (min-width: 860px) {
  .step, .step:first-child { padding-left: clamp(1rem, 2vw, 1.75rem); padding-right: clamp(1rem, 2vw, 1.75rem); }
}
.step__detail { text-wrap: balance; }
.portfolio__intro, .strategy__lede, .integrated__lede, .thesis .display { text-wrap: balance; }
.fig-label, .panel__body, .member__focus, .member__role, .disciplines__detail,
.criteria__detail, .hero__kicker, .hero__thesis, .deal__market, .offer__meta { text-wrap: balance; }
/* Six across: a wider row so each label holds one line. */
@media (min-width: 1100px) {
  .track > .wrap { max-width: 1400px; }
  .track__item { padding-left: 1rem; padding-right: 1rem; }
  .track .fig-label { letter-spacing: 0.1em; white-space: nowrap; }
}
@media (min-width: 1100px) {
  .member { padding-left: 1.25rem; padding-right: 1.25rem; }
  .member__role { letter-spacing: 0.09em; white-space: nowrap; min-height: 0; }
}

/* --- Round 2 review (10-01): one vertical rhythm ------------------------
   Every section takes --r top and bottom; image bands that close a section
   sit exactly --r below the copy above them. */
:root { --r: clamp(3.5rem, 6.25vw, 5.75rem); }
.section { padding: var(--r) 0; }
.section--bleed { padding-left: 0; padding-right: 0; }
.thesis__band { margin: var(--r) 0 calc(var(--r) * -1); }

/* Steps: the last row carries no extra foot, so the band closes on --r. */
@media (min-width: 860px) { .step { padding-bottom: 0; } }

/* Current Offerings and Selected Transactions share one wider column,
   so both card rows grow together. */
.offerings > .wrap,
.transactions > .wrap { max-width: 1440px; }

/* Footer bottom row: fiction line left, credit and mark right. */
.site-footer { padding-top: var(--r); }
.site-footer__legal { justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; }
.legal__fiction { margin: 0; color: var(--text-dim); opacity: 0.85; }
.legal__copy { margin-left: auto; }
@media (min-width: 1000px) { .legal__fiction { white-space: nowrap; } }
@media (max-width: 759px) {
  .site-footer__legal { flex-direction: column; justify-content: center; text-align: center; }
  .legal__fiction { text-wrap: balance; }
  .legal__copy { margin-left: 0; align-items: center; text-align: center; }
}