/* ============================================================
PARKWEST REAL ESTATE — Institutional refresh
Design system / shared stylesheet
============================================================ */
/* ---------- Fonts ---------- */
/* Loaded via tags in each page's (parallel download, faster first paint). */
/* ---------- Tokens ---------- */
:root {
/* Light "paper" surfaces */
--paper: #F4F0E8;
--paper-2: #FAF7F1;
--paper-card: #FFFFFF;
/* Dark "charcoal" surfaces */
--char: #101012;
--char-2: #16161A;
--char-3: #1E1E23;
/* Ink (text on light) */
--ink: #16171B;
--ink-soft: #595A60;
--ink-faint: #8A8B90;
/* Cream (text on dark) */
--cream: #EFEBE2;
--cream-soft: #A4A09A;
--cream-faint: #6E6B66;
/* Accent */
--gold: #B08A4F;
--gold-soft: #C6A66E;
/* Lines */
--line-dk: rgba(255,255,255,0.13);
--line-lt: rgba(18,18,20,0.14);
--line-lt-soft: rgba(18,18,20,0.08);
/* Type */
--serif: 'Newsreader', Georgia, 'Times New Roman', serif;
--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Layout */
--maxw: 1240px;
--gutter: clamp(20px, 5vw, 72px);
--nav-h: 76px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Kill sideways panning on phones (body-only overflow-x is not enough on iOS:
the off-screen mobile menu panel could let the page shift a few px right,
making full-width images look misaligned vs. centered thumbnails). */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
body {
margin: 0;
font-family: var(--sans);
font-size: 17px;
line-height: 1.65;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
figure { margin: 0; } /* the slider is a ; UA default is margin: 1em 40px */
/* ---------- Typography helpers ---------- */
.display {
font-family: var(--serif);
font-weight: 400;
line-height: 1.04;
letter-spacing: -0.012em;
}
.h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
.h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.h3 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.eyebrow {
font-family: var(--sans);
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 0.7em;
}
.eyebrow::before {
content: "";
width: 26px; height: 1px;
background: currentColor;
opacity: 0.65;
}
.lede {
font-size: clamp(1.05rem, 1.6vw, 1.28rem);
line-height: 1.6;
color: var(--ink-soft);
max-width: 46ch;
font-weight: 400;
}
.muted { color: var(--ink-soft); }
/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: clamp(72px, 10vw, 150px) 0; }
.section--tight { padding: clamp(56px, 7vw, 100px) 0; }
/* Surfaces */
.bg-paper { background: var(--paper); color: var(--ink); }
.bg-paper-2 { background: var(--paper-2); color: var(--ink); }
.bg-dark { background: var(--char); color: var(--cream); }
.bg-dark .eyebrow { color: var(--gold-soft); }
.bg-dark .lede, .bg-dark .muted { color: var(--cream-soft); }
/* ============================================================
NAVIGATION
============================================================ */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: var(--nav-h);
display: flex; align-items: center;
transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
border-bottom: 1px solid transparent;
}
/* Full-bleed bar: logo pinned toward the left edge of the SCREEN (desktop and
mobile) and the Investor Login button toward the right edge, per design. */
.nav__inner { width: 100%; max-width: none; margin: 0 auto; padding: 0 clamp(20px, 2.5vw, 40px);
display: flex; align-items: center; justify-content: space-between; }
/* Desktop: the six links sit as one group centered over the middle of the
viewport (aligned with the centered content below); the Investor Login
button pins to the right edge. The link row overlays the full bar but only
its children take pointer events, so the logo underneath stays clickable. */
@media (min-width: 1161px) {
.nav__inner { position: relative; }
.nav__links { position: absolute; inset: 0; justify-content: center; pointer-events: none; }
.nav__link { pointer-events: auto; }
.nav__cta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: auto; }
}
.brand {
font-family: var(--serif);
font-size: 1.45rem;
letter-spacing: 0.28em;
font-weight: 500;
padding-left: 0.28em; /* optical balance for tracking */
color: var(--ink);
transition: color .4s var(--ease);
}
.nav__links { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 38px); }
.nav__link {
font-size: 0.67rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-soft); position: relative; padding: 6px 2px; display: inline-block;
transition: color .25s var(--ease), transform .3s var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--ink); }
.nav__link:hover { transform: scale(1.12); }
.nav__link.is-active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold);
}
.nav__cta {
font-size: 0.65rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink); border: 1px solid var(--line-lt);
padding: 9px 15px; display: inline-flex; align-items: center; gap: 7px;
transition: all .25s var(--ease); background: transparent;
}
.nav__cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav__cta svg { width: 11px; height: 11px; }
/* Transparent over dark heroes */
.nav--over-dark .brand { color: var(--cream); }
.nav--over-dark .nav__link { color: var(--cream-soft); }
.nav--over-dark .nav__link:hover, .nav--over-dark .nav__link.is-active { color: var(--cream); }
.nav--over-dark .nav__cta { color: var(--cream); border-color: var(--line-dk); }
.nav--over-dark .nav__cta:hover { background: var(--cream); color: var(--char); border-color: var(--cream); }
/* Scrolled / solid */
/* Blur lives on a pseudo-element, not .nav itself — applying backdrop-filter
to .nav would create a containing block that traps the fixed mobile menu
panel inside the nav bar's height when scrolled. */
.nav::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: rgba(244,240,232,0.86);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
opacity: 0; transition: opacity .4s var(--ease); pointer-events: none;
}
.nav.is-scrolled::before { opacity: 1; }
.nav.is-scrolled {
border-bottom-color: var(--line-lt-soft);
}
.nav.is-scrolled .brand { color: var(--ink); }
.nav.is-scrolled .nav__link { color: var(--ink-soft); }
.nav.is-scrolled .nav__link:hover, .nav.is-scrolled .nav__link.is-active { color: var(--ink); }
.nav.is-scrolled .nav__cta { color: var(--ink); border-color: var(--line-lt); }
.nav.is-scrolled .nav__cta:hover { background: var(--ink); color: var(--paper); }
/* Mobile menu toggle */
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; }
.nav__toggle span { width: 24px; height: 1.5px; background: currentColor; transition: .3s var(--ease); }
.nav--over-dark .nav__toggle { color: var(--cream); }
.nav.is-scrolled .nav__toggle, .nav:not(.nav--over-dark) .nav__toggle { color: var(--ink); }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: 10px;
font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
padding: 15px 26px; border: 1px solid transparent; transition: all .3s var(--ease);
}
.btn svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: #000; }
.btn--ghost { border-color: var(--line-lt); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bg-dark .btn--solid { background: var(--cream); color: var(--char); }
.bg-dark .btn--solid:hover { background: #fff; }
.bg-dark .btn--ghost { border-color: var(--line-dk); color: var(--cream); }
.bg-dark .btn--ghost:hover { background: var(--cream); color: var(--char); border-color: var(--cream); }
.textlink {
display: inline-flex; align-items: center; gap: 9px;
font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid var(--gold);
transition: gap .3s var(--ease), color .3s var(--ease);
}
.textlink:hover { gap: 14px; color: var(--gold); }
.bg-dark .textlink { color: var(--cream); }
.bg-dark .textlink:hover { color: var(--gold-soft); }
/* ============================================================
HERO
============================================================ */
.hero {
position: relative; min-height: 62vh; display: flex; align-items: flex-end;
padding-top: calc(var(--nav-h) + 40px); padding-bottom: clamp(56px, 8vw, 110px);
background: var(--char); color: var(--cream); overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
/* Layered "darkened landscape" backdrop, fully self-contained */
.hero__bg::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(120% 80% at 80% 0%, rgba(176,138,79,0.16), transparent 55%),
radial-gradient(90% 70% at 10% 100%, rgba(60,70,90,0.30), transparent 60%),
linear-gradient(180deg, #14151A 0%, #0E0F12 60%, #0B0B0E 100%);
}
.hero__bg::after { /* subtle topographic contour texture */
content: ""; position: absolute; inset: 0; opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M0 620 C 200 560 360 600 540 560 C 760 510 920 580 1200 520'/%3E%3Cpath d='M0 660 C 220 600 380 650 560 610 C 780 560 940 630 1200 570'/%3E%3Cpath d='M0 700 C 220 650 400 695 580 660 C 800 615 960 680 1200 625'/%3E%3Cpath d='M0 740 C 240 695 420 735 600 705 C 820 665 980 725 1200 675'/%3E%3Cpath d='M0 560 C 180 520 340 545 520 510 C 740 470 900 525 1200 470'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover; background-position: center bottom;
}
.hero__grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); }
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__inner .wrap { width: 100%; }
.hero .eyebrow { color: var(--gold-soft); margin-bottom: 26px; }
.hero h1 { color: var(--cream); max-width: 30ch; margin-bottom: 26px; font-size: clamp(2.2rem, 5.2vw, 4.4rem); text-wrap: balance; }
.hero__sub { color: var(--cream-soft); max-width: 52ch; font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.6; }
.hero__actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 16px; }
/* page-specific hero tints */
.hero--strategy .hero__bg::before { background:
radial-gradient(120% 80% at 78% 0%, rgba(176,138,79,0.18), transparent 55%),
radial-gradient(95% 75% at 8% 100%, rgba(54,66,86,0.34), transparent 60%),
linear-gradient(180deg, #15161B 0%, #0E0F12 60%, #0A0B0D 100%); }
.hero--portfolio .hero__bg::before { background:
radial-gradient(120% 80% at 85% 10%, rgba(176,138,79,0.14), transparent 55%),
radial-gradient(90% 70% at 12% 100%, rgba(46,58,64,0.34), transparent 60%),
linear-gradient(180deg, #14161A 0%, #0E100F 60%, #0A0B0B 100%); }
.hero--leadership .hero__bg::before { background:
radial-gradient(120% 80% at 75% 0%, rgba(176,138,79,0.13), transparent 55%),
radial-gradient(90% 70% at 10% 100%, rgba(58,60,78,0.32), transparent 60%),
linear-gradient(180deg, #15151A 0%, #0F0F13 60%, #0A0A0D 100%); }
.hero--markets .hero__bg::before { background:
radial-gradient(120% 80% at 82% 5%, rgba(176,138,79,0.15), transparent 55%),
radial-gradient(90% 70% at 8% 100%, rgba(48,64,72,0.32), transparent 60%),
linear-gradient(180deg, #14161A 0%, #0E100F 60%, #0A0B0C 100%); }
/* shorter inner-page hero */
.hero--page { min-height: 49vh; }
/* ============================================================
GENERIC SECTION PIECES
============================================================ */
.section-head { max-width: 60ch; }
.section-head .eyebrow { margin-bottom: 22px; }
.section-head h2 { margin-bottom: 24px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.split--lede { grid-template-columns: 0.9fr 1.1fr; }
.split__body p + p { margin-top: 1.2em; }
/* numbered process grid */
.process { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-lt-soft);
border: 1px solid var(--line-lt-soft); margin-top: clamp(40px, 6vw, 70px); }
.process__item { background: var(--paper); padding: clamp(28px, 4vw, 48px); }
.bg-paper-2 .process__item { background: var(--paper-2); }
.process__num { font-family: var(--serif); font-size: 0.95rem; color: var(--gold); letter-spacing: 0.1em; }
.process__item h3 { font-family: var(--serif); font-size: 1.6rem; margin: 14px 0 14px; }
.process__item p { color: var(--ink-soft); font-size: 0.98rem; }
/* stat band (dark) — cells center their content vertically so a taller,
stacked value (e.g. the three-line Approach cell) doesn't leave the other
cells top-heavy with empty space beneath. */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); }
.statband__cell { padding: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 44px);
border-left: 1px solid var(--line-dk);
display: flex; flex-direction: column; justify-content: center; }
.statband__val--stack span { display: block; }
.statband__cell:first-child { border-left: 0; }
.statband__cell .eyebrow { color: var(--gold-soft); margin-bottom: 20px; }
.statband__val { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; color: var(--cream);
/* Reserve the height of the tallest value (the 3-line Approach cell: 3 × 1.15
line-height) in every cell, so vertically-centered content lands all four
eyebrows on one line and all first value-lines on one line. */
min-height: 3.45em; }
.statband__val small { font-size: 0.55em; vertical-align: super; color: var(--cream-faint); }
/* two-column asset profile */
.assetcols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 96px); margin-top: clamp(40px, 6vw, 64px); }
.assetcol h3 { font-family: var(--serif); font-size: 1.7rem; padding-bottom: 18px; border-bottom: 1px solid var(--line-lt); margin-bottom: 24px; }
.tagrow { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.tag { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-soft); border: 1px solid var(--line-lt); border-radius: 999px; padding: 7px 14px; }
.bg-dark .tag { color: var(--cream-soft); border-color: var(--line-dk); }
.speclist { list-style: none; margin: 0; padding: 0; }
.speclist li { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line-lt-soft); color: var(--ink-soft); font-size: 0.98rem; }
.speclist li::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; margin-top: 9px; background: var(--gold); border-radius: 50%; }
/* regions list */
.regions { display: flex; flex-direction: column; }
.region { padding: 26px 0; border-top: 1px solid var(--line-lt); }
.region:last-child { border-bottom: 1px solid var(--line-lt); }
.region h4 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 8px; }
.region p { color: var(--ink-soft); font-size: 0.98rem; max-width: 52ch; }
.bg-dark .region { border-color: var(--line-dk); }
/* ============================================================
CARDS (insights / generic dark cards)
============================================================ */
.cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(40px, 6vw, 64px); }
.icard { background: var(--char-2); border: 1px solid var(--line-dk); padding: clamp(26px, 3vw, 40px); min-height: 280px;
display: flex; flex-direction: column; transition: transform .4s var(--ease), border-color .4s var(--ease); }
.icard:hover { transform: translateY(-4px); border-color: rgba(176,138,79,0.4); }
.icard__k { font-family: var(--serif); font-size: 0.9rem; color: var(--gold-soft); letter-spacing: 0.08em; }
.icard h3 { font-family: var(--serif); font-size: 1.45rem; color: var(--cream); margin: auto 0 12px; }
.icard p { color: var(--cream-soft); font-size: 0.96rem; }
/* ============================================================
PORTFOLIO
============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: flex-start;
padding-bottom: 34px; border-bottom: 1px solid var(--line-lt); margin-bottom: 44px; }
.filtergroup__label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.filtergroup__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-soft);
border: 1px solid var(--line-lt); border-radius: 999px; padding: 9px 17px; background: transparent; transition: all .25s var(--ease); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filters__count { margin-left: auto; font-size: 0.8rem; color: var(--ink-faint); letter-spacing: 0.04em; align-self: flex-end; padding-bottom: 8px; }
.portfolio-head { display:flex; align-items:baseline; justify-content:space-between; gap:24px;
padding-bottom: 26px; border-bottom: 1px solid var(--line-lt); margin-bottom: 44px; }
.portfolio-head__count { font-size: 0.8rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.portgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 30px); }
.pcard { position: relative; display: flex; flex-direction: column; background: var(--char);
color: var(--cream); overflow: hidden; transition: transform .4s var(--ease); }
.pcard:hover { transform: translateY(-5px); }
.pcard__media { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
background:
radial-gradient(120% 120% at 30% 0%, rgba(176,138,79,0.14), transparent 60%),
linear-gradient(160deg, #1d1e23 0%, #121317 100%); overflow: hidden; }
.pcard__media::after { content:""; position:absolute; inset:0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.04'%3E%3Cpath d='M0 230 C 80 205 150 220 220 200 C 300 178 350 210 400 192'/%3E%3Cpath d='M0 255 C 90 232 160 248 240 226 C 320 204 360 236 400 218'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; }
.pcard__num { position: relative; z-index:1; font-family: var(--serif); font-size: clamp(3rem, 6vw, 4.6rem); color: rgba(239,235,226,0.92); line-height: 1; }
.pcard__numlabel { position: absolute; bottom: 18px; left: 0; right:0; text-align:center; z-index:1;
font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-faint); }
.pcard__status { position: absolute; top: 16px; left: 16px; z-index: 2;
font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--char);
background: var(--gold-soft); padding: 5px 10px; font-weight: 700; }
.pcard__status--realized { background: rgba(239,235,226,0.85); }
.pcard__body { padding: 24px 24px 28px; background: var(--paper-card); color: var(--ink); flex: 1; display:flex; flex-direction: column; }
.pcard__loc { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.pcard__name { font-family: var(--serif); font-size: 1.32rem; line-height: 1.15; margin-bottom: 12px; }
.pcard__desc { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; }
.pcard__meta { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-lt-soft);
display: flex; gap: 26px; }
.pcard__meta div span { display:block; }
.pcard__meta .k { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.pcard__meta .v { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.pcard__tags { margin-top: 16px; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.empty { text-align:center; color: var(--ink-faint); padding: 80px 0; font-size: 0.95rem; }
/* ============================================================
LEADERSHIP
============================================================ */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); }
.leader__photo { aspect-ratio: 4/5; background: linear-gradient(165deg, #23242b, #131419);
display:flex; align-items:flex-end; justify-content:center; position: relative; overflow:hidden; margin-bottom: 28px; }
.leader__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: center 18%; z-index:1; }
.leader__mono { font-family: var(--serif); font-size: 5rem; color: rgba(239,235,226,0.14); letter-spacing: 0.04em; }
.leader__name { font-family: var(--serif); font-size: 2rem; margin-bottom: 6px; }
.leader__role { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.leader__bio p { color: var(--ink-soft); font-size: 0.98rem; }
.leader__bio p + p { margin-top: 1em; }
.leader__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.bg-dark .leader__bio p { color: var(--cream-soft); }
/* ============================================================
MARKETS / MAP
============================================================ */
.mapwrap { position: relative; background: var(--char-2); border: 1px solid var(--line-dk); padding: clamp(20px, 3vw, 40px); }
.usmap { width: 100%; height: auto; display:block; }
.usmap .land { fill: #2c2e37; stroke: rgba(255,255,255,0.28); stroke-width: 1.2; }
.marker-dot { fill: var(--gold-soft); }
.marker-hq { fill: #fff; }
.marker-ring { fill: none; stroke: var(--gold-soft); stroke-width: 1.5; opacity: 0.5; }
.maplegend { display: flex; gap: 28px; margin-top: 22px; font-size: 0.8rem; color: var(--cream-soft); }
.maplegend span { display:inline-flex; align-items:center; gap: 9px; }
.maplegend i { width: 9px; height: 9px; border-radius: 50%; display:inline-block; }
.maplegend .i-mkt { background: var(--gold-soft); }
.maplegend .i-hq { background: #fff; }
.mapnote { margin-top: 16px; font-size: 0.82rem; color: var(--cream-faint); max-width: 60ch; }
.maptip { position: fixed; z-index: 60; pointer-events: none; background: #fff; color: var(--ink);
padding: 10px 14px; font-size: 0.8rem; box-shadow: 0 14px 40px rgba(0,0,0,0.25); opacity: 0; transform: translateY(4px);
transition: opacity .2s, transform .2s; max-width: 240px; }
.maptip.show { opacity: 1; transform: translateY(0); }
.maptip strong { font-family: var(--serif); font-weight: 500; font-size: 0.95rem; display:block; }
.maptip span { color: var(--ink-faint); font-size: 0.72rem; letter-spacing: 0.04em; }
/* ============================================================
CTA band
============================================================ */
.cta { text-align: center; }
.cta h2 { max-width: 18ch; margin: 0 auto 18px; }
.cta p { color: var(--cream-soft); max-width: 46ch; margin: 0 auto 34px; }
.cta__actions { display:flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ============================================================
CONTACT
============================================================ */
.contactgrid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 7vw, 96px); align-items: start; }
.field { margin-bottom: 22px; }
.field label { display:block; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px; }
.field input, .field textarea, .field select {
width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
background: var(--paper-2); border: 1px solid var(--line-lt); padding: 14px 16px; transition: border-color .25s; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 130px; }
.contactinfo .row { padding: 22px 0; border-top: 1px solid var(--line-lt); }
.contactinfo .row:last-child { border-bottom: 1px solid var(--line-lt); }
.contactinfo .k { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.contactinfo .v { font-family: var(--serif); font-size: 1.2rem; }
.contactinfo .v a:hover { color: var(--gold); }
/* ============================================================
FOOTER
============================================================ */
.footer { background: var(--char); color: var(--cream); padding: clamp(60px, 8vw, 96px) 0 40px; }
.footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(36px, 6vw, 80px); padding-bottom: 56px; border-bottom: 1px solid var(--line-dk); }
.footer__brand { font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.26em; margin-bottom: 6px; }
.footer__brandsub { font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 22px; }
.footer__tag { color: var(--cream-soft); font-size: 0.95rem; max-width: 36ch; }
.footer__col h5 { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-faint); margin-bottom: 18px; font-weight: 600; }
.footer__col a, .footer__col p { display:block; color: var(--cream-soft); font-size: 0.95rem; padding: 6px 0; transition: color .25s; }
.footer__col a:hover { color: var(--cream); }
.footer__bottom { display:flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 28px; }
.footer__bottom p { font-size: 0.78rem; color: var(--cream-faint); max-width: 70ch; }
.footer__bottom .accent { color: var(--gold-soft); letter-spacing: 0.04em; }
/* ============================================================
REVEAL ANIMATION
============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } html{scroll-behavior:auto;} }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1000px) {
.statband { grid-template-columns: 1fr 1fr; }
.statband__cell:nth-child(3) { border-left: 0; }
.statband__cell:nth-child(odd) { border-left: 0; }
.statband__cell:nth-child(n+3) { border-top: 1px solid var(--line-dk); }
.cardgrid, .portgrid { grid-template-columns: 1fr 1fr; }
}
/* Collapse the primary nav to a menu button at ≤1160px: with the link group
centered in the viewport, anything narrower would collide with the logo/CTA. */
@media (max-width: 1160px) {
.nav__links { position: fixed; inset: 0 0 0 auto; width: min(82vw, 360px);
background: var(--char); flex-direction: column; align-items: flex-start; justify-content: center;
padding: 0 40px; gap: 26px; transform: translateX(100%); visibility: hidden;
transition: transform .45s var(--ease), visibility 0s linear .45s; }
/* Hidden until opened so the off-canvas panel can't add sideways scroll
(and isn't tab-focusable while closed); visibility flips instantly on open. */
.nav__links.open { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
.nav__links .nav__link { color: var(--cream-soft); font-size: 0.95rem; letter-spacing: 0.08em; }
.nav__links .nav__link:hover { transform: none; }
.nav__links .nav__cta { color: var(--cream); border-color: var(--line-dk); margin-top: 12px; font-size: 0.82rem; }
.nav__toggle { display: flex; z-index: 110; }
.nav__toggle.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav__toggle.open span:nth-child(2){ opacity: 0; }
.nav__toggle.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
.nav--over-dark:not(.is-scrolled) .nav__toggle { color: var(--cream); }
.nav .nav__toggle.open { color: var(--cream); }
}
@media (max-width: 860px) {
:root { --nav-h: 66px; }
.split, .split--lede, .assetcols, .team, .contactgrid, .footer__top { grid-template-columns: 1fr; }
.process { grid-template-columns: 1fr; }
.cardgrid, .portgrid { grid-template-columns: 1fr; }
.statband { grid-template-columns: 1fr; }
.statband__cell { border-left: 0 !important; border-top: 1px solid var(--line-dk); }
.statband__cell:first-child { border-top: 0; }
.statband__val { min-height: 0; } /* stacked single-column: no cross-cell alignment to hold */
.footer__bottom { flex-direction: column; }
.filters__count { margin-left: 0; }
}
@media (max-width: 520px) {
body { font-size: 16px; }
.hero { min-height: 59vh; }
}
/* ============================================================
BEFORE / AFTER COMPARISON SLIDER (Feature A)
============================================================ */
.ba-grid { display: grid; gap: clamp(48px, 7vw, 84px); }
/* 760px keeps the sliders at an editorial, non-dominating scale (roughly the
measure of the section intro text), displays the older low-res "before"
photos at ~native size (no grainy upscaling), and still fills the full
width on phones/tablets. */
.ba-item { width: 100%; max-width: 760px; margin: 0 auto; }
.ba-item__head { margin-bottom: 24px; }
.ba-item__head .eyebrow { margin-bottom: 14px; }
.ba-item__head h3 { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.ba {
position: relative; width: 100%; aspect-ratio: var(--ba-aspect, 4 / 3); overflow: hidden;
background: var(--char-2); border: 1px solid var(--line-dk);
touch-action: pan-y; cursor: ew-resize;
user-select: none; -webkit-user-select: none;
}
/* Portrait tiles (e.g. 4/5): cap the displayed WIDTH so the tall frame still
fits comfortably on screen, while keeping its true aspect ratio. */
.ba-item--portrait .ba { max-width: 560px; margin-inline: auto; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* The "before" layer sits on top and is clipped to the handle position. */
.ba__before { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba__label {
position: absolute; top: 16px; z-index: 3;
font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--cream); background: rgba(16,16,18,0.55); padding: 6px 11px;
-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); pointer-events: none;
}
.ba__label--before { left: 16px; }
.ba__label--after { right: 16px; }
.ba__divider {
position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px;
background: var(--gold); z-index: 4; pointer-events: none;
}
.ba__handle {
position: absolute; top: 50%; left: var(--pos, 50%); transform: translate(-50%, -50%); z-index: 5;
width: 46px; height: 46px; border-radius: 50%; background: var(--gold); color: var(--char);
display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,0.45); pointer-events: none;
}
.ba__handle svg { width: 22px; height: 22px; display: block; }
/* The range input is the accessible, keyboard-operable control (kept sr-only;
mouse/touch dragging is handled on the frame itself). */
.ba__range { position: absolute; width: 1px; height: 1px; bottom: 0; left: 0; opacity: 0; margin: 0; }
.ba.is-focus { outline: 2px solid var(--gold); outline-offset: 3px; }
.ba.is-focus .ba__handle { box-shadow: 0 0 0 3px var(--cream), 0 6px 20px rgba(0,0,0,0.45); }
.ba__caption { margin-top: 18px; font-size: 0.92rem; color: var(--ink-soft); max-width: 62ch; line-height: 1.55; }
.bg-dark .ba__caption { color: var(--cream-soft); }
/* Thumbnail strip — one "after" thumbnail per comparison; click to load it above. */
.ba-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.ba-thumb {
width: clamp(64px, 12vw, 96px); aspect-ratio: 3 / 2; padding: 0; overflow: hidden;
background: var(--char-2); border: 2px solid transparent; cursor: pointer; opacity: 0.7;
transition: opacity .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease);
}
.ba-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-thumb:hover { opacity: 1; transform: translateY(-2px); }
.ba-thumb.is-active { border-color: var(--gold); opacity: 1; }
.ba-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ba-thumb:hover { transform: none; } }
/* Case-study performance stats beneath each comparison */
.ba-stats {
display: flex; flex-wrap: wrap; justify-content: center; gap: 1px;
margin-top: 26px; border-top: 1px solid var(--line-lt); padding-top: 26px;
}
.ba-stat { flex: 1 1 0; min-width: 150px; text-align: center; padding: 0 18px; }
.ba-stat + .ba-stat { border-left: 1px solid var(--line-lt-soft); }
.ba-stat__v { display: inline-block; font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; color: var(--ink); }
/* Gold rule matches the width of the figure above it, spaced evenly between
the figure and the label below. */
.ba-stat__v::after { content: ""; display: block; width: 100%; height: 2px; background: var(--gold); margin: 12px auto; }
.ba-stat__k { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.ba-stat__s { display: block; font-size: 0.7rem; color: var(--ink-faint); margin-top: 4px; }
.ba-note {
margin: 22px auto 0; max-width: 58ch; text-align: center;
font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft);
}
/* Portfolio-level track-record band at the top of the page */
.ba-stats--lead { margin-top: clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--line-lt); padding-bottom: 26px; }
/* Track-record band inside the dark hero — centered, larger, the page's marquee row */
.ba-stats--hero { margin: clamp(36px, 5vw, 56px) auto 0; border-top: 1px solid var(--line-dk); padding-top: clamp(28px, 4vw, 44px); max-width: 1020px; }
.ba-stats--hero .ba-stat { text-align: center; padding: 0 26px; }
.ba-stats--hero .ba-stat + .ba-stat { border-left: 1px solid var(--line-dk); }
.ba-stats--hero .ba-stat__v { color: var(--cream); font-size: clamp(2.5rem, 5vw, 3.6rem); }
.ba-stats--hero .ba-stat__v::after { height: 2px; margin: 14px auto; }
.ba-stats--hero .ba-stat__k { color: var(--cream); font-size: 0.72rem; letter-spacing: 0.18em; }
.ba-stats--hero .ba-stat__s { color: var(--cream-faint); margin-top: 6px; }
.ba-disclosure { margin-top: clamp(40px, 6vw, 64px); font-size: 0.74rem; line-height: 1.6; color: var(--ink-faint); max-width: 78ch; }
@media (max-width: 560px) {
.ba-stat { min-width: 120px; padding: 0 10px; }
/* Stack the hero track-record band cleanly on phones */
.ba-stats--hero { flex-direction: column; }
.ba-stats--hero .ba-stat { padding: 18px 0 0; }
.ba-stats--hero .ba-stat + .ba-stat { border-left: 0; border-top: 1px solid var(--line-dk); margin-top: 18px; padding-left: 0; }
}
/* ============================================================
SHARED UTILITIES (promoted from inline styles)
============================================================ */
.textlink svg { width: 14px; height: 14px; }
/* Keep a phrase on one line on desktop; wrap normally on phones */
.nowrap-desktop { white-space: nowrap; }
@media (max-width: 860px) { .nowrap-desktop { white-space: normal; } }
/* Three-up criteria columns that collapse on phones (Markets page) */
.assetcols--3 { grid-template-columns: 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
@media (max-width: 860px) { .assetcols--3 { grid-template-columns: 1fr; } }
/* Two-up form fields that collapse on phones (Contact page) */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
/* Visible keyboard focus, in the site's gold vocabulary */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.bg-paper-2 .ba { background: var(--char-2); }
/* Multi-view switcher (a property with several before/after views in one tile) */
.ba-item__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.ba-views { display: inline-flex; align-items: center; gap: 10px; }
.ba-views__btn { width: 40px; height: 40px; border: 1px solid var(--line-lt); background: transparent; color: var(--ink); border-radius: 999px; font-size: 1.3rem; line-height: 1; display: grid; place-items: center; transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); }
.ba-views__btn:hover { border-color: var(--gold); color: var(--gold); }
.ba-views__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ba-views__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); min-width: 132px; text-align: center; }
.bg-dark .ba-views__btn { color: var(--cream); border-color: var(--line-dk); }
.bg-dark .ba-views__label { color: var(--cream-soft); }
/* Transformations hero tint (matches the other page heroes) */
.hero--transformations .hero__bg::before { background:
radial-gradient(120% 80% at 80% 0%, rgba(176,138,79,0.17), transparent 55%),
radial-gradient(90% 70% at 10% 100%, rgba(52,60,80,0.32), transparent 60%),
linear-gradient(180deg, #15161B 0%, #0E0F12 60%, #0A0B0D 100%); }
/* ============================================================
RICHER SCROLL MOTION (Feature B)
============================================================ */
/* Staggered reveal for the stat-band cells (the band reveals as a group). */
.statband.reveal .statband__cell { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.statband.reveal.in .statband__cell { opacity: 1; transform: none; }
.statband.reveal.in .statband__cell:nth-child(2) { transition-delay: .08s; }
.statband.reveal.in .statband__cell:nth-child(3) { transition-delay: .16s; }
.statband.reveal.in .statband__cell:nth-child(4) { transition-delay: .24s; }
/* Parallax backdrop — slightly oversized so the slow drift never reveals an edge. */
.hero__bg { inset: -8% 0 auto 0; height: 116%; will-change: transform; }
/* ============================================================
WORDMARK ENTRANCE (Feature C)
============================================================ */
.brand__l { display: inline-block; opacity: 0; transform: translateY(0.34em); animation: brandLetter .6s var(--ease) forwards; }
@keyframes brandLetter { to { opacity: 1; transform: none; } }
/* Honor reduced-motion for every enhancement added above. */
@media (prefers-reduced-motion: reduce) {
.statband.reveal .statband__cell { opacity: 1; transform: none; transition: none; }
.hero__bg { transform: none !important; }
.brand__l { opacity: 1; transform: none; animation: none; }
}
@media (max-width: 520px) {
.ba__handle { width: 40px; height: 40px; }
.ba__handle svg { width: 18px; height: 18px; }
}