/* ============================================================
   About page — page-specific styles.
   Base tokens, buttons, nav, footer, forms, gallery-scroll,
   glass-panel, section-wine, section-divider, reveal primitives
   live in css/styles.css; loader / transitions / side-nav /
   scroll-to-top in css/animations.css. A few editorial
   components proven on developments.css / areas.css (doc rows,
   provenance badge) are re-declared here to keep pages decoupled.

   Content honesty: this page carries NO founding year, staff /
   office / award / press figures, delivered-project count or
   "leading developer" language — none is supplied. Every date is
   a verified project or infrastructure milestone; every number is
   verifiable today. See js/about.js for the source-of-truth data.
   ============================================================ */

section[id] { scroll-margin-top: 110px; }
@media (min-width: 1024px) { section[id] { scroll-margin-top: 130px; } }

/* ============================================================
   THE PRESENCE LINE — a thin gold line down the far left that
   fills with scroll progress. A quiet storytelling device, never
   visually dominant. Desktop only.
   ============================================================ */
.presence-line {
  position: fixed; left: 0; top: 0; bottom: 0; width: 1px;
  z-index: 30; display: none;
  background: rgba(201,164,92,.12);
  pointer-events: none;
}
.presence-line-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 60%, transparent);
  transform: scaleY(0); transform-origin: top center;
}
@media (min-width: 1280px) { .presence-line { display: block; } }
@media (prefers-reduced-motion: reduce) { .presence-line-fill { transform: scaleY(1) !important; opacity: .4; } }

/* ============================================================
   01 — HERO. Deliberately unlike Home / Properties / Developments
   / Areas: black ground, a single drawn gold vertical line, a
   small wordmark, the headline masked in from below, the image
   revealed through a clip mask.
   ============================================================ */
#hero { background: #060606; }

.about-hero-media {
  position: absolute; inset: 0; overflow: hidden;
}
.about-hero-media img {
  position: absolute; inset: -4% -4% -4% 8%;
  width: 100%; height: 108%; object-fit: cover;
  object-position: center 62%;
  filter: grayscale(.42) contrast(1.1) brightness(.44) saturate(.8);
  clip-path: inset(0% 0% 0% 100%);
}
.about-hero-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,6,6,.94) 0%, rgba(6,6,6,.6) 42%, rgba(6,6,6,.2) 72%, rgba(6,6,6,.55) 100%),
    linear-gradient(180deg, rgba(6,6,6,.5) 0%, transparent 30%, rgba(6,6,6,.35) 68%, #090909 100%);
}
.about-hero-rule {
  position: absolute; left: 24px; top: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(201,164,92,.55) 18%, rgba(201,164,92,.55) 82%, transparent);
  transform: scaleY(0); transform-origin: top center;
}
@media (min-width: 1024px) { .about-hero-rule { left: 48px; } }
.about-hero-wordmark {
  font-family: 'Manrope', sans-serif;
  font-size: 10px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 14px;
}
.about-hero-wordmark::before { content: ''; width: 26px; height: 1px; background: var(--gold); }
.about-hero-coord {
  font-family: 'Manrope', sans-serif;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 10px;
}
.about-hero-coord::before { content: ''; width: 22px; height: 1px; background: rgba(201,164,92,.5); }

@media (prefers-reduced-motion: reduce) {
  .about-hero-media img { clip-path: none !important; }
  .about-hero-rule { transform: scaleY(1) !important; }
}

/* ============================================================
   Shared small pieces
   ============================================================ */
.about-numeral {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(52px, 7vw, 92px); line-height: .8;
  color: rgba(201,164,92,.08);
  -webkit-text-stroke: 1px rgba(201,164,92,.4);
}
.about-lede { font-size: 16px; line-height: 1.75; color: var(--ink-secondary); max-width: 46ch; }
.about-kicker { font-family: 'Manrope', sans-serif; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.about-rule { width: 44px; height: 1px; background: var(--gold); }

.who-media { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.who-media img { width: 100%; height: 116%; object-fit: cover; }
.who-media--wide { aspect-ratio: 5/4; }

/* ============================================================
   03 — ESTABLISHED PRESENCE + signature "TIME" year + the
   architectural timeline.
   ============================================================ */
#presence { position: relative; overflow: hidden; }

.bigyear {
  position: absolute; right: -2vw; top: 50%; transform: translateY(-50%);
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(140px, 30vw, 440px); line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,164,92,.10);
  pointer-events: none; user-select: none; white-space: nowrap;
  z-index: 0;
}
.bigyear-wrap { position: relative; z-index: 1; }

.tl {
  position: relative;
  margin-top: 64px;
  padding-top: 78px;
}
.tl-track {
  position: absolute; left: 0; right: 0; top: 62px; height: 1px;
  background: rgba(201,164,92,.16);
}
.tl-track-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: scaleX(0); transform-origin: left center;
}
.tl-years {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.tl-year {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 0 8px 0 0;
  background: none; text-align: left; cursor: pointer;
}
.tl-year::after {
  content: ''; position: absolute; left: 0; top: -16px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface); border: 1px solid rgba(201,164,92,.4);
  transform: translateY(-100%);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.tl-year-label {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(30px, 4vw, 52px); line-height: 1;
  color: var(--ink-muted); transition: color .4s ease;
}
.tl-year-note {
  font-family: 'Manrope', sans-serif; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted); transition: color .4s ease;
}
.tl-year.active .tl-year-label { color: var(--gold-light); }
.tl-year.active .tl-year-note { color: var(--gold); }
.tl-year.active::after { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,164,92,.16); }

.tl-panel {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  margin-top: 54px; align-items: center;
}
@media (min-width: 900px) { .tl-panel { grid-template-columns: 1.05fr 1fr; gap: 48px; } }
.tl-panel-media { position: relative; aspect-ratio: 16/11; overflow: hidden; }
.tl-panel-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity .8s ease, transform 1.1s cubic-bezier(.16,1,.3,1);
  filter: grayscale(.34) contrast(1.08) brightness(.72);
}
.tl-panel-media img.active { opacity: 1; transform: scale(1); }
.tl-panel-tag { font-family: 'Manrope', sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.tl-panel-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; color: var(--ink); margin: 14px 0 12px; }
.tl-panel-copy { font-size: 14.5px; line-height: 1.7; color: var(--ink-secondary); max-width: 52ch; }
.tl-disclaimer { font-size: 12px; color: var(--ink-muted); margin-top: 34px; max-width: 60ch; line-height: 1.6; }

@media (max-width: 640px) {
  .tl { padding-top: 64px; }
  .tl-track { top: 50px; }
  .tl-year { padding-right: 4px; }
  .tl-year::after { top: -12px; width: 9px; height: 9px; }
  .tl-year-label { font-size: clamp(19px, 6vw, 26px); }
  .tl-year-note { font-size: 8.5px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-track-fill { transform: scaleX(1) !important; }
  .tl-panel-media img { transition: opacity .2s linear !important; }
}

/* ============================================================
   05 — HOW WE THINK. Large typography interaction: numbered
   list selects a principle; the stage title / copy / image /
   gold line all move.
   ============================================================ */
.phil {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: 40px;
}
@media (min-width: 1024px) { .phil { grid-template-columns: minmax(240px, 340px) 1fr; gap: 64px; } }

.phil-list { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.1); }
.phil-item {
  position: relative;
  display: flex; align-items: baseline; gap: 18px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 22px 4px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: none;
  transition: padding-left .35s ease;
}
.phil-item:hover, .phil-item:focus-visible { padding-left: 14px; }
.phil-item-num { font-family: 'Manrope', sans-serif; font-size: 11px; letter-spacing: .1em; color: var(--ink-muted); transition: color .3s ease; }
.phil-item-name { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(24px, 3vw, 32px); color: var(--ink-secondary); transition: color .3s ease; }
.phil-item.active .phil-item-num, .phil-item:hover .phil-item-num { color: var(--gold); }
.phil-item.active .phil-item-name, .phil-item:hover .phil-item-name { color: var(--gold-light); }

.phil-stage { position: relative; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.phil-stage-bg { position: absolute; inset: 0; }
.phil-stage-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.16,1,.3,1);
  filter: grayscale(.4) contrast(1.1) brightness(.4) saturate(.8);
}
.phil-stage-bg img.active { opacity: 1; transform: scale(1); }
.phil-stage-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,9,9,.35) 0%, rgba(9,9,9,.55) 55%, rgba(9,9,9,.9) 100%); }
.phil-stage-body { position: relative; z-index: 1; }
.phil-stage-line { width: 0; height: 1px; background: var(--gold); margin-bottom: 22px; transition: width .6s cubic-bezier(.16,1,.3,1); }
.phil-stage.is-ready .phil-stage-line { width: 72px; }
.phil-stage-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(32px, 5vw, 60px); line-height: 1; color: var(--ink); }
.phil-stage-copy { font-size: 15px; line-height: 1.75; color: var(--ink-secondary); max-width: 48ch; margin-top: 18px; }
.phil-fade-out { opacity: 0; transform: translateY(8px); }
.phil-stage-title, .phil-stage-copy { transition: opacity .35s ease, transform .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .phil-stage-bg img, .phil-stage-title, .phil-stage-copy, .phil-stage-line { transition: opacity .2s linear !important; }
}

/* ============================================================
   06 — THE TRUST ARCHITECTURE. Five connected pillars, not
   cards. Diagram + one shared explanation region (keyboard
   reachable; never hover-only).
   ============================================================ */
.trust-arch { position: relative; max-width: 760px; margin: 0 auto; }
.ta-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 26px 18px;
  z-index: 1;
}
.ta-pillar {
  grid-column: span 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 10px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer; text-align: center;
  transition: border-color .35s ease, background .35s ease, transform .35s ease;
}
.ta-pillar:hover, .ta-pillar:focus-visible { border-color: rgba(201,164,92,.4); transform: translateY(-2px); }
.ta-pillar.active { border-color: var(--gold); background: linear-gradient(160deg, rgba(201,164,92,.08), var(--surface) 60%); }
.ta-pillar-name { font-family: 'Manrope', sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-secondary); transition: color .3s ease; }
.ta-pillar.active .ta-pillar-name { color: var(--gold-light); }
.ta-pillar--center { border-color: rgba(201,164,92,.35); }
.ta-pillar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); transition: background .3s ease; }
.ta-pillar.active .ta-pillar-dot, .ta-pillar--center .ta-pillar-dot { background: var(--gold); }

/* diagram positions */
.ta-pillar[data-pillar="purpose"] { grid-column: 2; grid-row: 1; }
.ta-pillar[data-pillar="discipline"] { grid-column: 1; grid-row: 2; }
.ta-pillar[data-pillar="trust"] { grid-column: 2; grid-row: 2; }
.ta-pillar[data-pillar="transparency"] { grid-column: 3; grid-row: 2; }
.ta-pillar[data-pillar="evidence"] { grid-column: 2; grid-row: 3; }

/* connectors */
.ta-links { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ta-links::before, .ta-links::after {
  content: ''; position: absolute; background: rgba(201,164,92,.28);
}
.ta-links::before { left: 50%; top: 14%; bottom: 14%; width: 1px; transform: translateX(-50%); }
.ta-links::after { left: 12%; right: 12%; top: 50%; height: 1px; transform: translateY(-50%); }

.ta-detail {
  margin-top: 40px; padding: 30px 32px;
  border: 1px solid rgba(201,164,92,.18);
  background: rgba(255,255,255,.02);
}
.ta-detail-name { font-family: 'Manrope', sans-serif; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.ta-detail-copy { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.4; color: var(--ink); margin-top: 12px; max-width: 60ch; }

@media (max-width: 560px) {
  .ta-grid { grid-template-columns: 1fr; }
  .ta-pillar[data-pillar] { grid-column: 1 !important; grid-row: auto !important; }
  .ta-links { display: none; }
}

/* ============================================================
   07 — PEOPLE BEHIND THE NAME. No team data supplied — the work
   stands in for the portraits. Cinematic near-monochrome that
   lifts on hover / focus.
   ============================================================ */
.people-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 768px) { .people-grid { grid-template-columns: repeat(3, 1fr); } }
.people-frame {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.people-frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.85) contrast(1.12) brightness(.4);
  transform: scale(1.04);
  transition: filter .8s ease, transform 1.1s cubic-bezier(.16,1,.3,1);
}
.people-frame:hover img, .people-frame:focus-within img { filter: grayscale(.25) contrast(1.06) brightness(.66); transform: scale(1); }
.people-frame-line {
  position: absolute; left: 20px; bottom: 46px; width: 0; height: 1px; background: var(--gold);
  transition: width .6s cubic-bezier(.16,1,.3,1);
}
.people-frame:hover .people-frame-line, .people-frame:focus-within .people-frame-line { width: 40px; }
.people-frame-cap {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  font-family: 'Manrope', sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-secondary);
  transform: translateY(6px); transition: transform .5s ease, color .4s ease;
}
.people-frame:hover .people-frame-cap, .people-frame:focus-within .people-frame-cap { transform: translateY(0); color: var(--ink); }
.people-note { font-size: 13px; color: var(--ink-muted); max-width: 52ch; line-height: 1.7; margin-top: 22px; }

.brand-quote { max-width: 900px; margin: 0 auto; text-align: center; }
.brand-quote p { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic; font-size: clamp(28px, 5vw, 52px); line-height: 1.22; color: var(--ink); }
.brand-quote cite { display: block; font-style: normal; font-family: 'Manrope', sans-serif; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); margin-top: 26px; }

@media (prefers-reduced-motion: reduce) { .people-frame img { transition: none !important; } }

/* ============================================================
   08 — FROM IDEA TO ADDRESS. Company method, not a construction
   schedule. Continuous gold line; a stage expands on hover /
   focus; neighbours dim.
   ============================================================ */
.proc { display: grid; grid-template-columns: 1fr; gap: 44px; }
@media (min-width: 1024px) { .proc { grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } }

.proc-track { position: relative; padding-left: 30px; }
.proc-track::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(201,164,92,.15));
}
.proc-stage {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 20px 4px; background: none; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: opacity .35s ease, padding-left .35s ease;
}
.proc-stage::before {
  content: ''; position: absolute; left: -25px; top: 26px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-muted);
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.proc-track:hover .proc-stage:not(:hover),
.proc-track:focus-within .proc-stage:not(:focus) { opacity: .4; }
.proc-stage.active { padding-left: 10px; }
.proc-stage.active::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(201,164,92,.16); transform: scale(1.15); }
.proc-stage-row { display: flex; align-items: baseline; gap: 16px; }
.proc-stage-num { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 22px; color: var(--gold); line-height: 1; transition: font-size .35s ease; min-width: 34px; }
.proc-stage.active .proc-stage-num { font-size: 30px; }
.proc-stage-name { font-family: 'Manrope', sans-serif; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-secondary); transition: color .3s ease; }
.proc-stage.active .proc-stage-name { color: var(--ink); }
.proc-stage-copy {
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: 13.5px; line-height: 1.65; color: var(--ink-secondary); max-width: 46ch;
  transition: max-height .5s cubic-bezier(.4,0,.2,1), opacity .4s ease, margin .4s ease;
}
.proc-stage.active .proc-stage-copy { max-height: 160px; opacity: 1; margin-top: 12px; }

.proc-media { position: relative; aspect-ratio: 4/5; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
@media (min-width: 1024px) { .proc-media { position: sticky; top: 120px; } }
.proc-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05);
  transition: opacity .8s ease, transform 1.1s cubic-bezier(.16,1,.3,1);
  filter: grayscale(.38) contrast(1.08) brightness(.66);
}
.proc-media img.active { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) { .proc-media img { transition: opacity .2s linear !important; } }

/* ============================================================
   09 — OUR PRESENCE IN DUBAI. Not the Areas map — a cinematic
   skyline with abstract gold lines and a single presence point.
   ============================================================ */
.dubai-panel {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(ellipse at 22% 18%, rgba(111,35,75,.2), transparent 55%),
              radial-gradient(ellipse at 82% 82%, rgba(201,164,92,.1), transparent 50%),
              var(--surface);
}
.dubai-skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 68%; opacity: .5; }
.dubai-grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(201,164,92,.07) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(201,164,92,.05) 0 1px, transparent 1px 72px);
  mix-blend-mode: screen;
}
.dubai-point {
  position: absolute; left: 34%; top: 52%;
  width: 12px; height: 12px; transform: translate(-50%, -50%);
}
.dubai-point::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(201,164,92,.16), 0 0 22px rgba(201,164,92,.5); }
.dubai-point::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(201,164,92,.35); animation: dubaiPulse 3.4s ease-out infinite; }
@keyframes dubaiPulse { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }
.dubai-point-label {
  position: absolute; left: 20px; top: -4px; white-space: nowrap;
  font-family: 'Manrope', sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light);
}
.dubai-caption {
  position: absolute; left: 16px; bottom: 14px; max-width: 260px;
  font-family: 'Manrope', sans-serif; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
  opacity: .75; line-height: 1.5;
}
.dubai-legend { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 26px; }
.dubai-legend-item { display: inline-flex; align-items: center; gap: 10px; font-family: 'Manrope', sans-serif; font-size: 12px; color: var(--ink-secondary); }
.dubai-legend-swatch { width: 8px; height: 8px; border-radius: 50%; }
.dubai-legend-swatch--live { background: var(--gold); }
.dubai-legend-swatch--research { background: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .dubai-point::after { animation: none; } }

/* ============================================================
   10 — PORTFOLIO PRESENCE. One live development — a strong
   full-width frame plus a short honest strip.
   ============================================================ */
.pf-hero {
  position: relative; width: 100%; aspect-ratio: 16/11; overflow: hidden;
}
@media (min-width: 768px) { .pf-hero { aspect-ratio: 21/9; min-height: 320px; } }
.pf-hero img { position: absolute; left: 0; right: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; filter: grayscale(.3) contrast(1.08) brightness(.6); }
.pf-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(9,9,9,.9) 100%); }
.pf-hero-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px; }
.pf-hero-name { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(30px, 5vw, 52px); color: var(--ink); }
.pf-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; font-family: 'Manrope', sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.pf-note { font-size: 12px; color: var(--ink-muted); margin-top: 16px; max-width: 56ch; line-height: 1.6; }

/* ============================================================
   11 — CREDIBILITY / TRANSPARENCY / DOCUMENTS. Restrained rows,
   only what genuinely exists. No wall of logos, no fake PDFs.
   ============================================================ */
.cred-list { border-top: 1px solid rgba(255,255,255,.1); }
.cred-row {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 24px 4px; border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (min-width: 768px) { .cred-row { grid-template-columns: minmax(0, 300px) 1fr auto; gap: 28px; align-items: baseline; } }
.cred-row-name { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 20px; color: var(--ink); }
.cred-row-copy { font-size: 13.5px; line-height: 1.6; color: var(--ink-secondary); }
.cred-row-tag { font-family: 'Manrope', sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }

.tr-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
@media (min-width: 640px) { .tr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tr-grid { grid-template-columns: repeat(5, 1fr); } }
.tr-cell { background: var(--surface); padding: 24px 20px; }
.tr-cell-name { font-family: 'Manrope', sans-serif; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.tr-cell-copy { font-size: 12.5px; line-height: 1.6; color: var(--ink-muted); margin-top: 10px; }

.doc-list { border-top: 1px solid rgba(255,255,255,.1); }
.doc-row {
  display: flex; align-items: center; gap: 20px;
  padding: 22px 6px; border-bottom: 1px solid rgba(255,255,255,.1);
  transition: padding-left .35s ease, background .35s ease;
}
.doc-row:hover, .doc-row:focus-visible { padding-left: 14px; background: rgba(201,164,92,.03); }
.doc-num { font-family: 'Manrope', sans-serif; font-size: 12px; color: var(--gold); }
.doc-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.doc-title { font-family: 'Cormorant Garamond', serif; font-size: 21px; color: var(--ink); transition: color .3s ease; }
.doc-row:hover .doc-title { color: var(--gold-light); }
.doc-format { font-family: 'Manrope', sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.doc-action { font-family: 'Manrope', sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); white-space: nowrap; }
.doc-action .arrow { display: inline-block; transition: transform .3s ease; }
.doc-row:hover .doc-action .arrow { transform: translateX(4px); }

/* ============================================================
   12 — WHERE WE STAND TODAY. Visual data, not paragraphs.
   ============================================================ */
.today-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
@media (min-width: 900px) { .today-grid { grid-template-columns: repeat(5, 1fr); } }
.today-cell { background: var(--surface); padding: 30px 22px; display: flex; flex-direction: column; gap: 10px; }
.today-num { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(30px, 4vw, 46px); line-height: 1; color: var(--ink); white-space: nowrap; }
.today-num-sm { font-size: clamp(17px, 2.2vw, 24px); }
.today-label { font-family: 'Manrope', sans-serif; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.today-sub { font-size: 11px; color: var(--ink-muted); opacity: .8; }

/* ============================================================
   Big closing statements
   ============================================================ */
.about-statement { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(30px, 6vw, 68px); line-height: 1.16; color: var(--ink); max-width: 20ch; }
.about-statement .gold { color: var(--gold); font-style: italic; }
.about-final { text-align: center; max-width: 1000px; margin: 0 auto; }
.about-final-mark { font-family: 'Manrope', sans-serif; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-top: 34px; }
.about-final-sub { font-size: 13px; color: var(--ink-muted); margin-top: 14px; }

.about-signoff {
  text-align: center;
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(20px, 3vw, 30px); line-height: 1.4; color: var(--ink-secondary);
}
.about-signoff .gold { color: var(--gold-light); }

/* ============================================================
   Reduced motion — global fallbacks
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tl-year::after, .ta-pillar, .proc-stage, .phil-item { transition: none !important; }
}