/* =============================================================
 * elevate.css — the premium finishing layer (10/2/2026)
 * Loaded after mono.css on every page. Paper grain, thin gold rules,
 * faint section numbers, typographic spacing, consistent buttons,
 * slow Ken Burns on hero imagery. Every motion honors
 * prefers-reduced-motion.
 * ============================================================= */

/* ── paper / grain: one fixed, almost invisible noise layer ───── */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
/* cream page tint instead of flat white */
:root { --bg-page: #FDFCFA; --paper: #FDFCFA; --bg-warm: #F6F4EF; --cream: #F6F4EF; }
body { background: var(--bg-page); }

/* ── eyebrow: a thin gold rule, tracked-out small caps ────────── */
.eyebrow-row { gap: 16px !important; }
.eyebrow-row::before { width: 44px !important; height: 1px !important; background: var(--gold) !important; }
.t-eyebrow { font-size: 10.5px !important; letter-spacing: .3em !important; font-weight: 600 !important; }

/* ── typography spacing ───────────────────────────────────────── */
h1, h2, h3 { text-wrap: balance; }
h2 { letter-spacing: -.006em; }
p { text-wrap: pretty; }
.intro, .hero-sub, .nh-grid p, .tagline, .diff-card p, .process-step p, .res-body .dek, .test-card blockquote { line-height: 1.62 !important; }
.diff-card h3, .process-step h3, .product-card h3, .res-body h3 { letter-spacing: .005em; }

/* ── section numbers + gold top rule (injected by elevate.js) ─── */
section.has-num { position: relative; }
section.has-num > .container { position: relative; z-index: 1; }
section.has-num::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(100% - 2 * var(--gutter, 48px), var(--max-w, 1320px)); transform: translateX(-50%);
  height: 1px; background: linear-gradient(90deg, var(--gold) 0, var(--gold) 64px, var(--hairline-dark) 64px, var(--hairline-dark) 100%); opacity: .9;
}
.sec-num {
  position: absolute; right: max(var(--gutter, 48px), calc((100% - var(--max-w, 1320px)) / 2)); top: clamp(22px, 3vw, 44px);
  font-family: var(--font-display); font-size: clamp(72px, 10vw, 168px); line-height: .9; letter-spacing: -.02em;
  color: var(--fg-1); opacity: .045; pointer-events: none; user-select: none; z-index: 0;
}
section.has-num.on-dark .sec-num { color: #fff; opacity: .07; }
section.has-num.on-dark::before { background: linear-gradient(90deg, var(--gold) 0, var(--gold) 64px, rgba(255,255,255,.12) 64px, rgba(255,255,255,.12) 100%); }
@media (max-width: 760px) { .sec-num { font-size: 64px; top: 18px; } }

/* ── buttons: one voice ───────────────────────────────────────── */
.btn { padding: 17px 32px !important; line-height: 1 !important; gap: 12px !important; }
.btn:focus-visible, .arrow-link:focus-visible, .nav-cta:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn-red { position: relative; overflow: hidden; }
.btn-red::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s var(--ease-out); pointer-events: none; }
.btn-red:hover::after { transform: translateX(120%); }
.arrow-link { transition: gap .35s var(--ease-out), color .25s !important; }

/* ── cards: calmer borders, hairline + hover lift ─────────────── */
.diff-card, .product-card, .res-card, .test-card, .nh-loan-card, .nhx-card, .process-step { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s !important; }
.product-card:hover, .res-card:hover, .nhx-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -28px rgba(10,10,10,.22) !important; }
.product-card .photo, .res-card .photo, .nhx-img { overflow: hidden; }
.product-card .photo img, .res-card .photo img, .nhx-img img { transition: transform 1.4s var(--ease-out); }
.product-card:hover .photo img, .res-card:hover .photo img, .nhx-card:hover .nhx-img img { transform: scale(1.05); }

/* ── Ken Burns: slow zoom on hero imagery (and the dark CTA) ───── */
@keyframes kenburns { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.11) translate3d(0,-1.2%,0); } }
@keyframes kenburns-soft { from { transform: scale(1); } to { transform: scale(1.07); } }
/* home hero: the photo moves on a pseudo-element so _motion.js keeps the parallax on .hero-bg itself */
body[data-nav="home"] .hero-bg { background-image: none !important; overflow: hidden; }
body[data-nav="home"] .hero-bg::before { content: ""; position: absolute; inset: -2%; background: url("assets/brand/vegas-hero.webp") center/cover no-repeat; animation: kenburns 22s cubic-bezier(.2,.6,.3,1) both; will-change: transform; }
.nh-hero .bg { animation: kenburns 24s cubic-bezier(.2,.6,.3,1) both; will-change: transform; }
.ahero .bg, .ahero img { animation: kenburns-soft 24s cubic-bezier(.2,.6,.3,1) both; }

/* ── studio band (real G. Lending imagery, 10/1 shoot) ─────────── */
.studio { background: var(--bg-page); padding: var(--section-y) 0; }
.studio-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 44px; }
.studio-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 3.8vw, 60px); line-height: .96; letter-spacing: -.01em; text-transform: uppercase; margin: 18px 0 0; color: var(--fg-1); }
.studio-head h2 .accent { color: var(--gold); }
.studio-head .intro { font-size: 17px; line-height: 1.62; color: var(--fg-2); margin: 0; max-width: 520px; }
.studio-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(120px, auto); gap: 14px; }
.studio-grid figure { margin: 0; position: relative; overflow: hidden; background: #0A0A0A; border: 1px solid var(--hairline-dark); }
.studio-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.6s var(--ease-out); }
.studio-grid figure:hover img { transform: scale(1.04); }
.studio-grid .s-wide { grid-column: span 7; aspect-ratio: 16 / 10; }
.studio-grid .s-tall { grid-column: span 5; aspect-ratio: 16 / 10; }
.studio-grid .s-sq { grid-column: span 4; aspect-ratio: 4 / 3; }
.studio-grid figcaption { position: absolute; left: 16px; bottom: 14px; font-family: var(--font-sans); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.86); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.studio-grid figcaption::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: 10px; }
.studio-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 30px; flex-wrap: wrap; }
.studio-foot .note { font-size: 12px; color: var(--fg-3); letter-spacing: .02em; margin: 0; }
@media (max-width: 1024px) { .studio-head { grid-template-columns: 1fr; } .studio-grid .s-wide { grid-column: span 12; } .studio-grid .s-tall { grid-column: span 12; } .studio-grid .s-sq { grid-column: span 6; } }
@media (max-width: 640px) { .studio-grid .s-sq { grid-column: span 12; aspect-ratio: 16 / 10; } }

/* dark CTA band carries the team photo, dimmed, slowly drifting */
.cta-band { position: relative; overflow: hidden; }
.cta-band .cta-photo { position: absolute; inset: -3%; z-index: 0; background: url("assets/studio/studio-team.webp") center 30% / cover no-repeat; opacity: .32; filter: saturate(.55) contrast(1.05); animation: kenburns 28s cubic-bezier(.2,.6,.3,1) both; will-change: transform; }
.cta-band .cta-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 50% 60%, rgba(10,10,10,.05) 0%, rgba(10,10,10,.82) 100%); }
.cta-band > .container { position: relative; z-index: 1; }

/* ── about: founders strip using real studio stills ───────────── */
.about-studio { margin-top: 56px; }
.about-studio .strip { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; }
.about-studio figure { margin: 0; overflow: hidden; border: 1px solid var(--hairline-dark); aspect-ratio: 4 / 3; background: #0A0A0A; }
.about-studio img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-studio .cap { font-size: 12px; color: var(--fg-3); margin: 12px 0 0; }
@media (max-width: 760px) { .about-studio .strip { grid-template-columns: 1fr 1fr; } .about-studio figure:first-child { grid-column: span 2; } }

/* ── neighborhood pages ───────────────────────────────────────── */
.nh-credit { position: absolute; right: var(--gutter, 48px); bottom: 14px; z-index: 3; font-size: 10px; letter-spacing: .06em; color: rgba(255,255,255,.55); }
.nh-credit a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 2px; }
.nh-stats .v { font-variant-numeric: tabular-nums; }
.nh-stats .v small { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--fg-3); margin-left: 6px; letter-spacing: .02em; }
.nh-sources { font-size: 11px; color: rgba(255,255,255,.55); margin: 14px 0 0; max-width: 760px; line-height: 1.55; }
.nh-sources a { color: rgba(255,255,255,.72); }
.nh-map { position: relative; border: 1px solid var(--hairline-dark); overflow: hidden; background: #fff; }
.nh-map img { width: 100%; height: auto; display: block; }
.nh-map .cap { position: absolute; left: 14px; bottom: 12px; font-family: var(--font-sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--fg-2); background: rgba(253,252,250,.86); padding: 6px 10px; }
.nh-map .cap::before { content: ""; display: inline-block; width: 16px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: 8px; }
.nhx-card .meta { color: var(--fg-3) !important; }
@media (max-width: 760px) { .nh-credit { position: static; display: block; margin-top: 18px; color: var(--fg-4); } .nh-credit a { color: var(--fg-3); } }

/* ── motion off ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-nav="home"] .hero-bg::before, .nh-hero .bg, .ahero .bg, .ahero img, .cta-band .cta-photo { animation: none !important; }
  .btn-red::after { display: none; }
  .product-card .photo img, .res-card .photo img, .nhx-img img, .studio-grid img { transition: none !important; }
}

/* ── phone safety: long display headlines never widen the page ─ */
html, body { overflow-x: clip; }
@media (max-width: 420px) { .nhx-hero h1 { font-size: 33px !important; } }