/* V2 "Golden Hour" (Homescene | SERHANT. hub, design round 1). One evening on Tampa Bay: the grounds follow the clock, warm paper at
   4:30 PM > sunset rose > blue-hour navy > after-dark navy > night. ONE accent: low-sun amber #E9A245 (clock hand, sun, primary CTA).
   Type: Bodoni Moda (display, roman only) / Manrope (body) / JetBrains Mono (utility: clock, readouts, tickets). Tokens mirror
   kit/tokens.css .w-v2 (copied here so the world is self-contained). Motion is GSAP only (js/app.js): no @keyframes; transitions are
   custom cubic-beziers on transform / opacity. Hidden start states live ONLY under .js + prefers-reduced-motion: no-preference, and
   html.gh-static (the dead-man switch) cancels them, so JS-off and reduced-motion renders are complete. */

/* ---------- fonts (kit files) + metric-matched fallbacks (no layout shift on swap) ---------- */
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../../../kit/fonts/bodoni-moda-var-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../../../kit/fonts/manrope-var-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../../../kit/fonts/jetbrains-mono-400-latin.woff2") format('woff2'); }
@font-face { font-family: 'Bodoni Fallback'; src: local('Georgia'); size-adjust: 93%; ascent-override: 104%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback'; src: local('Segoe UI'), local('Arial'); size-adjust: 104%; ascent-override: 102%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: 'Mono Fallback'; src: local('Consolas'), local('Courier New'); size-adjust: 101%; }

:root {
  --g-paper: #F4EEE6;     /* 4:30 PM */
  --g-paper-2: #EBE2D6;
  --g-rose: #D9A79E;      /* sunset */
  --g-plum: #7A4F5E;
  --g-navy: #121274;      /* blue hour = the brand navy */
  --g-afterdark: #0C0E46;
  --g-night: #070A24;     /* never #000 */
  --ink: #1D1A33;
  --ink-soft: #5A5470;    /* 6.20 on paper */
  --rose-soft: #3B2F45;   /* 6.0 on rose */
  --paper-soft: #C9C3D6;  /* 9+ on navy and night */
  --amber: #E9A245;       /* the low sun (hsl 35 79% 59%) */
  --amber-ink: #8A5410;   /* amber as text on paper, 5.43 */
  --err: #A3361F;
  --pendry-stone: #EDE8E1;
  --pendry-brass: #9C7A4A;
  --rb-pink: #EE3A8D;
  --rb-pink-light: #E6A8C7;
  --f-display: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  --f-body: 'Manrope', 'Manrope Fallback', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', 'Mono Fallback', ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 64px);
  --max: 1360px;
  --band: clamp(104px, 14vw, 224px);
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --e-press: cubic-bezier(0.34, 1.4, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--g-night); -webkit-text-size-adjust: 100%; scroll-padding-top: 104px; }
body { margin: 0; background: var(--g-paper); color: var(--ink); font: 400 17px/1.62 var(--f-body); overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, figure, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
main { display: block; overflow-x: clip; }
.i { width: 18px; height: 18px; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mono { font-family: var(--f-mono); font-weight: 400; letter-spacing: 0.08em; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 16px; top: -80px; z-index: 60; background: var(--g-night); color: var(--g-paper); padding: 12px 18px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 8px; }
.gh-paths :focus-visible, .gh-con :focus-visible, .gh-formcard :focus-visible { outline-color: var(--g-navy); }

/* ---------- buttons: pill + button-in-button icon; press feedback; hover moves the nested icon ---------- */
.btn { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 8px 8px 26px; border-radius: 999px; border: 0;
  font: 650 15.5px/1 var(--f-body); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.35s var(--e-out), background-color 0.35s var(--e-soft); }
.btn:active { transform: scale(0.98); }
.btn-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  transition: transform 0.55s var(--e-out); }
.btn-ico .i { width: 17px; height: 17px; transition: transform 0.55s var(--e-out); }
.btn:hover .btn-ico { transform: translateX(3px) scale(1.06); }
.btn:hover .btn-ico .i { transform: rotate(-35deg); }
.btn--amber { background: var(--amber); color: var(--g-night); }
.btn--amber .btn-ico { background: var(--g-night); color: var(--amber); }
.btn--sm { min-height: 46px; padding: 6px 6px 6px 20px; font-size: 14px; gap: 12px; }
.btn--sm .btn-ico { width: 34px; height: 34px; }
.btn--ghost-ink, .btn--ghost-light { padding: 8px 24px; gap: 10px; }
.btn--ghost-ink { color: var(--g-navy); background: rgba(244, 238, 230, 0.62); box-shadow: inset 0 0 0 1px rgba(18, 18, 116, 0.32); }
.btn--ghost-ink:hover { background: rgba(244, 238, 230, 0.86); }
.btn--ghost-light { color: var(--g-paper); background: rgba(244, 238, 230, 0.04); box-shadow: inset 0 0 0 1px rgba(244, 238, 230, 0.34); }
.btn--ghost-light:hover { background: rgba(244, 238, 230, 0.1); }
.btn--ghost-light .btn-ico { background: var(--g-paper); color: var(--g-night); width: 34px; height: 34px; margin-right: -14px; }
.btn--ghost-ink .i, .btn--ghost-light > .i { transition: transform 0.55s var(--e-out); }
.btn--ghost-ink:hover > .i, .btn--ghost-light:hover > .i { transform: rotate(-12deg) scale(1.1); }

/* ---------- double-bezel surfaces ---------- */
.gh-bezel { padding: 8px; border-radius: 32px; }
.gh-bezel > .gh-bezel-core { border-radius: 24px; overflow: hidden; position: relative; }
.gh-bezel--glass { background: rgba(244, 238, 230, 0.07); box-shadow: inset 0 0 0 1px rgba(244, 238, 230, 0.14), 0 28px 52px -30px rgba(3, 4, 30, 0.7); }
.gh-bezel--glass > .gh-bezel-core { background: rgba(7, 10, 36, 0.95); box-shadow: inset 0 1px 0 rgba(244, 238, 230, 0.12); }
.gh-bezel--warm { background: rgba(233, 162, 69, 0.12); box-shadow: inset 0 0 0 1px rgba(233, 162, 69, 0.28), 0 30px 64px -34px rgba(233, 162, 69, 0.32); }
.gh-bezel--warm > .gh-bezel-core { background: var(--g-paper); color: var(--ink); box-shadow: inset 0 1px 0 #fffaf2; }
.gh-bezel--night { background: rgba(244, 238, 230, 0.05); box-shadow: inset 0 0 0 1px rgba(244, 238, 230, 0.12); }
.gh-bezel--night > .gh-bezel-core { background: var(--g-afterdark); box-shadow: inset 0 1px 0 rgba(244, 238, 230, 0.1); }

/* ---------- island nav (fixed; glass blur allowed on fixed only) ---------- */
.gh-nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 40; padding-inline: var(--gutter); pointer-events: none; }
.gh-nav-shell { pointer-events: auto; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 7px 7px 7px 22px; border-radius: 999px; background: rgba(7, 10, 36, 0.58); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: inset 0 0 0 1px rgba(244, 238, 230, 0.14), inset 0 1px 0 rgba(244, 238, 230, 0.12), 0 20px 50px -30px rgba(3, 4, 30, 0.65); color: var(--g-paper); }
.gh-nav-logo img { height: 44px; width: auto; }
.gh-nav-links { display: flex; gap: 26px; font-size: 14px; font-weight: 550; }
.gh-nav-links a, .gh-nav-tel { text-decoration: none; position: relative; }
.gh-nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--e-out); }
.gh-nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.gh-nav-cta { display: flex; align-items: center; gap: 18px; }
.gh-nav-tel { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--f-body); letter-spacing: 0.02em; }
.gh-nav-tel .i { width: 16px; height: 16px; color: var(--amber); }

/* ---------- the evening clock (.gh-clock): docked inside the island nav at every width (RP2: the old fixed bottom-left pill
   sat over body copy, the concierge lead and the booking hotline at 1440); hand + readout follow the scroll ---------- */
.gh-clock { position: relative; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 14px; border-radius: 999px; color: var(--g-paper); background: rgba(7, 10, 36, 0.32);
  box-shadow: inset 0 0 0 1px rgba(244, 238, 230, 0.12), inset 0 1px 0 rgba(244, 238, 230, 0.08); }
.gh-clock-time { font-size: 13.5px; min-width: 70px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.gh-clock-rail { position: relative; width: 120px; height: 26px; }
.gh-clock-sunset { display: none; }
@media (min-width: 1680px) { .gh-clock-sunset { display: inline; } .gh-clock-rail { width: 160px; } }
.gh-clock-track { position: absolute; left: 0; right: 0; top: 60%; height: 1px; background: rgba(244, 238, 230, 0.34); }
.gh-clock-ticks i { position: absolute; top: 60%; left: calc(var(--tx) * 100%); width: 1px; height: 6px; background: rgba(244, 238, 230, 0.45); transform: translate(-50%, -50%); }
.gh-clock-ticks i.maj { height: 11px; background: rgba(244, 238, 230, 0.7); }
.gh-clock-sun { position: absolute; left: calc(var(--sx) * 100%); top: -3px; color: var(--amber); transform: translateX(-50%); }
.gh-clock-sun .i { width: 16px; height: 16px; }
.gh-clock-hand { position: absolute; left: calc(var(--sx) * 100%); top: calc(60% - 10px); width: 3px; height: 20px; margin-left: -1.5px; border-radius: 2px; background: var(--amber); }
.gh-clock-label { display: flex; gap: 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--paper-soft); }
.gh-clock-chapter { color: var(--g-paper); display: inline-block; min-width: 140px; }

/* ---------- 390 sticky Call + Book ---------- */
.gh-sticky { display: none; }

/* =========================================================================== HERO (.gh-sky: the turning light) */
.gh-hero { position: relative; background: var(--g-night); }
.gh-sky { position: relative; min-height: 100vh; min-height: 100dvh; overflow: clip; isolation: isolate; }
.gh-frames, .gh-frame, .gh-grade { position: absolute; inset: 0; }
.gh-frame img { width: 100%; height: 100%; object-fit: cover; }
.gh-frame--1 img { object-position: 50% 42%; }
.gh-frame--2 img { object-position: 55% 60%; }
.gh-frame--3 img { object-position: 58% 55%; }
.gh-grade { pointer-events: none; }
.gh-grade--haze { background: linear-gradient(180deg, rgba(244, 238, 230, 0.8) 0%, rgba(244, 238, 230, 0.5) 28%, rgba(244, 238, 230, 0.1) 50%, rgba(244, 238, 230, 0) 60%), linear-gradient(90deg, rgba(244, 238, 230, 0.6) 0%, rgba(244, 238, 230, 0.3) 38%, rgba(244, 238, 230, 0) 62%); }
.gh-grade--gold { opacity: 0; mix-blend-mode: soft-light; background: linear-gradient(180deg, rgba(255, 200, 130, 0.35) 0%, rgba(255, 170, 90, 0.75) 55%, rgba(214, 110, 82, 0.85) 100%); }
.gh-grade--dusk { background: linear-gradient(90deg, rgba(36, 20, 40, 0.42) 0%, rgba(36, 20, 40, 0.18) 34%, rgba(36, 20, 40, 0) 56%), linear-gradient(0deg, rgba(36, 20, 40, 0.9) 0%, rgba(70, 40, 62, 0.66) 30%, rgba(110, 70, 90, 0.22) 50%, rgba(122, 79, 94, 0) 64%); }
.gh-grade--seam { top: auto; height: 16vh; background: linear-gradient(180deg, rgba(217, 167, 158, 0) 0%, var(--g-rose) 100%); }
.gh-hero-copy { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; padding: 132px var(--gutter) 120px; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto;
  display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.gh-h1 { display: inline-flex; align-items: center; gap: 12px; font: 650 14px/1.35 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--g-navy); }
.gh-h1::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; }
.gh-display { margin-top: 26px; font-family: var(--f-display); font-weight: 500; font-size: clamp(54px, 9.4vw, 140px); line-height: 0.9; letter-spacing: -0.025em; color: var(--g-navy); }
.gh-line { display: block; }
.gh-line + .gh-line { padding-left: 0.5em; }
.gh-beat--a { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.gh-hero-card { align-self: flex-end; width: min(540px, 100%); background: rgba(244, 238, 230, 0.3); box-shadow: inset 0 0 0 1px rgba(244, 238, 230, 0.6), 0 28px 52px -30px rgba(7, 10, 36, 0.5); }
.gh-hero-card > .gh-bezel-core { padding: 26px 26px 24px; background: rgba(244, 238, 230, 0.93); box-shadow: inset 0 1px 0 #fffaf2; }
.gh-hero-sub { max-width: 44ch; font-size: 18px; line-height: 1.55; font-weight: 500; color: var(--ink); }
.gh-hero-ctas { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.gh-hero-towers { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14.5px; font-weight: 600; color: var(--g-navy); }
.gh-hero-towers a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding-bottom: 3px; box-shadow: inset 0 -1px 0 rgba(18, 18, 116, 0.4); }
.gh-hero-towers .i { width: 15px; height: 15px; transition: transform 0.5s var(--e-out); }
.gh-hero-towers a:hover .i { transform: translateX(4px); }
.gh-beat--b { align-self: flex-end; max-width: 760px; color: var(--g-paper); text-align: left; }
.gh-beat-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--g-paper); }
.gh-beat-kicker .i { color: var(--amber); }
.gh-beat-kicker .i { width: 18px; height: 18px; }
.gh-beat-line { margin-top: 16px; font-family: var(--f-display); font-weight: 400; font-size: clamp(42px, 6.2vw, 96px); line-height: 0.96; letter-spacing: -0.02em; text-wrap: balance; }
.gh-beat-sun { margin-top: 20px; font-size: 18px; color: #EDE3EA; }
.gh-beat-sun .gh-sunset-time { font-family: var(--f-mono); color: var(--amber); letter-spacing: 0.02em; }

/* =========================================================================== bands */
.gh-band { position: relative; padding-block: var(--band); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em;
  box-shadow: inset 0 0 0 1px rgba(29, 26, 51, 0.28); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(233, 162, 69, 0.25); }
.eyebrow--dark { color: var(--g-paper); box-shadow: inset 0 0 0 1px rgba(244, 238, 230, 0.26); }
.gh-h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(42px, 6.3vw, 104px); line-height: 0.96; letter-spacing: -0.02em; text-wrap: balance; }
.gh-lead { font-size: 19px; line-height: 1.6; max-width: 46ch; }
.gh-head { display: grid; gap: 28px; margin-bottom: clamp(56px, 8vw, 120px); }
.gh-head .gh-h2 { max-width: 15ch; }
.gh-fine { margin-top: 56px; font-size: 12.5px; line-height: 1.6; color: var(--paper-soft); max-width: 110ch; }

/* golden mask (.gh-reveal): two lids part from a horizon line; transform only. Unmasked with JS off / reduced motion. */
.gh-reveal { position: relative; overflow: hidden; }
.gh-reveal img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--e-out); }
.gh-lid, .gh-horizon { display: none; }

/* ---------- PATHS (sunset rose) ---------- */
.gh-paths { background: var(--g-rose); color: var(--ink); --ground: var(--g-rose); }
.gh-head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; column-gap: 32px; }
.gh-head--split .eyebrow { grid-column: 1 / -1; justify-self: start; }
.gh-head--split .gh-h2 { grid-column: 1 / span 8; }
.gh-head--split .gh-lead { grid-column: 9 / span 4; color: var(--rose-soft); }
.gh-paths-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.gh-path { display: block; text-decoration: none; color: inherit; }
.gh-path--invest { margin-top: clamp(80px, 14vw, 220px); }
.gh-path-media { padding: 8px; border-radius: 30px; background: rgba(244, 238, 230, 0.26); box-shadow: inset 0 0 0 1px rgba(244, 238, 230, 0.5), 0 26px 52px -32px rgba(60, 30, 40, 0.5); }
.gh-path-media picture { display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; transform: translateZ(0); }
.gh-path--invest .gh-path-media picture { aspect-ratio: 4 / 5; }
.gh-path:hover .gh-path-media img { scale: 1.045; }
.gh-path-body { position: relative; padding: 4px 8px 0; }
.gh-path-word { font-family: var(--f-display); font-weight: 500; font-size: clamp(88px, 11.5vw, 184px); line-height: 0.82; letter-spacing: -0.03em; margin-top: -0.18em; color: var(--ink); position: relative; z-index: 1; }
.gh-path-name { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 700 21px/1.25 var(--f-body); letter-spacing: -0.005em; }
.gh-path-name .mono { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; padding: 5px 10px; border-radius: 999px; }
.gh-path--live .gh-path-name .mono { background: var(--pendry-stone); color: var(--ink); box-shadow: inset 0 -2px 0 var(--pendry-brass); }
.gh-path--invest .gh-path-name .mono { background: var(--rb-pink-light); color: #000; box-shadow: inset 0 -2px 0 var(--rb-pink); }
.gh-path-note { margin-top: 14px; max-width: 46ch; color: var(--rose-soft); font-size: 16.5px; }
.gh-path-go { margin-top: 26px; display: inline-flex; align-items: center; gap: 14px; font: 650 15px/1 var(--f-body); }
.gh-path-go .btn-ico { background: var(--ink); color: var(--g-paper); width: 40px; height: 40px; }
.gh-path:hover .gh-path-go .btn-ico { transform: translateX(6px); }

/* price ticket: notched, perforated stub; mono labels */
.gh-ticket { margin-top: 24px; display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 22px; align-items: center;
  padding: 14px 18px 14px 20px; border-radius: 12px; background: var(--g-paper); color: var(--ink); position: relative;
  -webkit-mask: radial-gradient(circle 9px at calc(100% - 46px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at calc(100% - 46px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 9px at calc(100% - 46px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at calc(100% - 46px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  box-shadow: inset 4px 0 0 var(--tick, var(--amber)); }
.gh-ticket--pendry { --tick: var(--pendry-brass); }
.gh-ticket--rb { --tick: var(--rb-pink); }
.gh-ticket-k { grid-column: 1; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); }
.gh-ticket-v { grid-column: 1; font-family: var(--f-display); font-weight: 500; font-size: 34px; line-height: 1.05; letter-spacing: -0.01em; }
.gh-ticket-stub { grid-column: 2; grid-row: 1 / span 2; writing-mode: vertical-rl; transform: rotate(180deg); padding-right: 14px; margin-right: -6px;
  border-right: 1px dashed rgba(29, 26, 51, 0.35); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft); min-height: 64px; text-align: center; }

/* ---------- DEVELOPMENTS (blue hour navy) ---------- */
.gh-devs { background: var(--g-navy); color: var(--g-paper); --ground: var(--g-navy); }
.gh-devs .gh-lead { color: var(--paper-soft); }
.gh-dev-list { display: grid; gap: clamp(96px, 12vw, 180px); }
.gh-dev { position: relative; }
.gh-dev-media { height: min(94vh, 960px); min-height: 520px; }
.gh-dev-media picture { display: block; height: 100%; }
.gh-dev:hover .gh-dev-media img { scale: 1.03; }
.gh-dev-hourmark { position: absolute; z-index: 2; top: clamp(24px, 4vw, 56px); right: var(--gutter); font-size: 12px; text-transform: uppercase; letter-spacing: 0.24em; color: var(--g-paper);
  padding: 8px 14px; border-radius: 999px; background: rgba(7, 10, 36, 0.55); box-shadow: inset 0 0 0 1px rgba(244, 238, 230, 0.2); }
.gh-dev-panel { position: relative; z-index: 3; width: min(1000px, calc(100% - var(--gutter) * 2)); margin: -300px 0 0 var(--gutter); }
.gh-dev:nth-child(even) .gh-dev-panel { margin-left: auto; margin-right: var(--gutter); }
.gh-dev-core { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: clamp(28px, 4vw, 64px); padding: clamp(28px, 4vw, 56px); }
.gh-dev-hour { display: flex; align-items: center; gap: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--paper-soft); }
.gh-dev-path { padding: 5px 10px; border-radius: 999px; color: var(--g-night); background: var(--amber); letter-spacing: 0.16em; }
.gh-dev-head { margin-top: 20px; font-family: var(--f-display); font-weight: 500; font-size: clamp(40px, 5vw, 76px); line-height: 0.96; letter-spacing: -0.02em; }
.gh-dev-name { margin-top: 18px; font: 700 15px/1.3 var(--f-body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--amber); }
.gh-dev-note { margin-top: 12px; color: var(--paper-soft); max-width: 52ch; }
.gh-dev-claim { margin-top: 12px; padding-left: 14px; font-size: 14.5px; color: var(--g-paper); box-shadow: inset 2px 0 0 var(--tower); }
.gh-dev-facts { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 18px 32px; padding-top: 22px; box-shadow: inset 0 1px 0 rgba(244, 238, 230, 0.16); }
.gh-dev-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--paper-soft); }
.gh-dev-facts dd { margin-top: 6px; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.gh-dev-foot { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 32px; }
.gh-dev-foot .gh-ticket { margin-top: 0; }
.gh-dev-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.gh-textlink { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; text-decoration: none; padding-bottom: 3px; box-shadow: inset 0 -1px 0 rgba(233, 162, 69, 0.6); }
.gh-textlink .i { width: 15px; height: 15px; transition: transform 0.5s var(--e-out); }
.gh-textlink:hover .i { transform: translateX(4px); }

/* Lights On (.gh-windows): our own night elevation (never on a rendering): a slender glass shaft, seven bays of tall windows
   between hairline mullions, a podium and crown line, then the Bay's horizon and the tower's broken reflection. Lit floor by floor. */
.gh-windows { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; margin: 0; }
.gh-windows-svg { width: 100%; max-height: 440px; height: auto; overflow: visible; }
.gh-win { fill: var(--amber); }
.gh-win--lamp { fill: #F6DCA8; }
.gh-win--ember { fill: #D98A55; }
.gh-win--dark { fill: #2A2E66; }
.gh-win-refl rect { fill: var(--amber); }
.gh-win-refl .gh-win--lamp { fill: #F6DCA8; }
.gh-win-refl .gh-win--ember { fill: #D98A55; }
.gh-win-shell { stroke: rgba(244, 238, 230, 0.22); stroke-width: 0.35; }
.gh-win-mull path { stroke: rgba(244, 238, 230, 0.07); stroke-width: 0.25; fill: none; }
.gh-win-crown { stroke: var(--amber); stroke-width: 0.5; fill: none; }
.gh-win-podium { fill: rgba(244, 238, 230, 0.06); stroke: rgba(244, 238, 230, 0.18); stroke-width: 0.3; }
.gh-win-horizon { stroke: rgba(233, 162, 69, 0.55); stroke-width: 0.35; }
.gh-windows figcaption { display: grid; justify-items: center; gap: 6px; text-align: center; }
.gh-windows-n { font-family: var(--f-display); font-weight: 500; font-size: 40px; line-height: 0.9; letter-spacing: -0.02em; color: var(--g-paper); font-variant-numeric: lining-nums; }
.gh-windows figcaption .mono { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--paper-soft); max-width: 14ch; line-height: 1.5; }

/* coming soon */
.gh-soon { max-width: 820px; }
.gh-soon-core { padding: clamp(28px, 4vw, 52px); display: grid; gap: 16px; justify-items: start; }
.gh-soon-name { font-family: var(--f-display); font-weight: 500; font-size: clamp(32px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.015em; }
.gh-soon-note { color: var(--paper-soft); max-width: 52ch; }
.gh-soon .btn { margin-top: 10px; }

/* ---------- REPRESENTATION (after dark) ---------- */
.gh-rep { background: var(--g-afterdark); color: var(--g-paper); --ground: var(--g-afterdark); }
.gh-rep-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
.gh-rep-copy .gh-h2 { margin-top: 28px; max-width: 12ch; }
.gh-rep-miles { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: auto minmax(0, 30ch); align-items: end; gap: 12px 28px; }
.gh-rep-num { font-family: var(--f-display); font-weight: 500; font-size: clamp(110px, 15vw, 236px); line-height: 0.78; letter-spacing: -0.04em; color: var(--amber); }
.gh-rep-unit { font-size: 17px; color: var(--paper-soft); padding-bottom: 10px; }
.gh-rep-list { margin-top: clamp(48px, 6vw, 88px); }
.gh-rep-list li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; padding: 30px 0; box-shadow: inset 0 1px 0 rgba(244, 238, 230, 0.16); }
.gh-rep-list h3 { font-family: var(--f-display); font-weight: 500; font-size: 27px; line-height: 1.12; letter-spacing: -0.01em; }
.gh-rep-list p { color: var(--paper-soft); }
.gh-cta-row { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 12px; }
.gh-rep-media { position: sticky; top: 120px; }
.gh-rep-media .gh-bezel { background: rgba(244, 238, 230, 0.06); box-shadow: inset 0 0 0 1px rgba(244, 238, 230, 0.14); }
.gh-rep-media .gh-bezel-core { aspect-ratio: 4 / 5; }
.gh-rep-media picture { height: 100%; }
.gh-rep-media img { object-position: 46% 50%; }
.gh-rep-media figcaption { margin-top: 16px; font-size: 12px; color: var(--paper-soft); letter-spacing: 0.06em; }

/* ---------- CONCIERGE (tonight: a warm lit room on night) ---------- */
.gh-con { background: var(--g-night); --ground: var(--g-night); }
.gh-con-core { padding: clamp(28px, 5vw, 80px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 44px; }
.gh-con-head { grid-column: 1 / span 5; display: grid; gap: 24px; align-content: start; }
.gh-con-head .eyebrow { justify-self: start; }
.gh-con-head .gh-h2 { font-size: clamp(40px, 4.6vw, 76px); max-width: 11ch; }
.gh-con-head .gh-lead { color: var(--ink-soft); font-size: 17.5px; }
.gh-con-form { grid-column: 6 / span 7; display: grid; gap: 30px; }
.gh-q { border: 0; padding: 0; margin: 0; min-width: 0; }
.gh-q legend { padding: 0; margin-bottom: 14px; font-family: var(--f-display); font-weight: 500; font-size: 28px; line-height: 1.15; }
.gh-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.gh-opt { position: relative; cursor: pointer; }
.gh-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gh-opt span { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px; border-radius: 999px; font-size: 15.5px; font-weight: 600;
  background: #FBF7F1; box-shadow: inset 0 0 0 1px rgba(29, 26, 51, 0.24); transition: background-color 0.35s var(--e-soft), color 0.35s var(--e-soft), transform 0.35s var(--e-out); }
.gh-opt:hover span { box-shadow: inset 0 0 0 1px var(--g-navy); }
.gh-opt:active span { transform: scale(0.98); }
.gh-opt input:checked + span { background: var(--g-navy); color: var(--g-paper); box-shadow: inset 0 0 0 1px var(--g-navy); }
.gh-opt input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 3px; }
.gh-con-result { grid-column: 1 / -1; padding: clamp(24px, 3.5vw, 44px); border-radius: 22px; background: var(--g-paper-2); box-shadow: inset 0 0 0 1px rgba(29, 26, 51, 0.1); }
.gh-con-idle { font-size: 17px; max-width: 70ch; color: var(--ink); }
.gh-match { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 40px; }
.gh-match-title { grid-column: 1 / -1; font-family: var(--f-display); font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; }
.gh-match-row { display: grid; gap: 8px; padding-top: 18px; box-shadow: inset 0 1px 0 rgba(29, 26, 51, 0.16); }
.gh-match-row.is-dim { box-shadow: inset 0 1px 0 rgba(29, 26, 51, 0.16); }
.gh-match-row.is-dim .gh-match-price { color: var(--ink-soft); }
.gh-match-name { font-weight: 700; font-size: 17px; }
.gh-match-price { font-family: var(--f-display); font-size: 30px; line-height: 1.1; }
.gh-match-meta { font-size: 14.5px; color: var(--ink-soft); }
.gh-match-go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.gh-match-go .btn--ink { background: var(--g-navy); color: var(--g-paper); }
.gh-match-go .btn--ink .btn-ico { background: var(--amber); color: var(--g-night); }

/* ---------- BOOKING (night, warm lit card) ---------- */
.gh-book { background: var(--g-night); color: var(--g-paper); padding-top: calc(var(--band) * 0.6); --ground: var(--g-night); }
.gh-book-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 104px); align-items: start; }
.gh-invite .gh-h2 { margin-top: 26px; font-size: clamp(40px, 5vw, 80px); }
.gh-lead--dark { margin-top: 24px; color: var(--paper-soft); font-size: 17.5px; }
.gh-invite-card { margin-top: 40px; }
.gh-invite-card .gh-bezel-core { padding: 30px; display: grid; gap: 24px; }
.gh-invite-live { display: flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: 0.06em; color: var(--g-paper); }
.gh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--paper-soft); flex: none; }
.gh-invite-live.is-open .gh-dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(233, 162, 69, 0.22); }
.gh-invite-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.gh-invite-contact { display: grid; gap: 10px; }
.gh-invite-contact a { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; text-decoration: none; }
.gh-invite-contact .i { color: var(--amber); }
.gh-hours { display: grid; gap: 8px; padding-top: 20px; box-shadow: inset 0 1px 0 rgba(244, 238, 230, 0.14); }
.gh-hours div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.gh-hours dt { color: var(--paper-soft); }
.gh-hours dd { font-family: var(--f-mono); font-size: 13.5px; letter-spacing: 0.04em; }
.gh-invite-addr { font-size: 13.5px; color: var(--paper-soft); }

.gh-form { padding: clamp(26px, 4vw, 56px); display: grid; gap: 22px; }
.gh-form-title { font-family: var(--f-display); font-weight: 500; font-size: clamp(34px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.015em; }
.gh-form-intro { color: var(--ink-soft); margin-top: -8px; }
.gh-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 18px; }
.gh-field { display: grid; gap: 7px; align-content: start; }
.gh-field--wide { grid-column: 1 / -1; }
.gh-field label { font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em; }
.gh-opt-tag { font-weight: 500; color: var(--ink-soft); }
.gh-field input, .gh-field select, .gh-field textarea, .gh-phone select { width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 12px; background: #FFFCF7;
  box-shadow: inset 0 0 0 1px rgba(29, 26, 51, 0.3); transition: box-shadow 0.3s var(--e-soft); font-size: 16px; color: var(--ink); }
.gh-field textarea { resize: vertical; min-height: 96px; }
.gh-field input:hover, .gh-field select:hover, .gh-field textarea:hover { box-shadow: inset 0 0 0 1px rgba(29, 26, 51, 0.55); }
.gh-field input:focus, .gh-field select:focus, .gh-field textarea:focus, .gh-phone select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--g-navy), 0 0 0 5px rgba(233, 162, 69, 0.38); }
.gh-phone { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 8px; }
.gh-err { display: none; font-size: 13px; font-weight: 600; color: var(--err); }
.gh-field.is-invalid input, .gh-field.is-invalid select { box-shadow: inset 0 0 0 2px var(--err); }
.gh-field.is-invalid .gh-err { display: block; }
.gh-check { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 44px; }
.gh-check input { width: 22px; height: 22px; accent-color: var(--g-navy); flex: none; }
.gh-sms { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.btn--submit { justify-self: start; }
.gh-form-status { font-size: 15px; font-weight: 600; color: var(--g-navy); min-height: 1.4em; }
.gh-form-status.is-mock { padding: 14px 18px; border-radius: 12px; background: #FBEFD9; box-shadow: inset 4px 0 0 var(--amber); }

/* ---------- FOOTER (night) ---------- */
.gh-foot { background: var(--g-night); color: var(--paper-soft); padding-top: clamp(80px, 9vw, 140px); padding-bottom: 72px; box-shadow: inset 0 1px 0 rgba(244, 238, 230, 0.1); }
.gh-foot-top { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: end; padding-bottom: 48px; box-shadow: inset 0 -1px 0 rgba(244, 238, 230, 0.12); }
.gh-foot-logo { height: 76px; width: auto; }
.gh-foot-line { font-family: var(--f-display); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; color: var(--g-paper); max-width: 22ch; }
.gh-foot-links { display: grid; gap: 8px; font-size: 15px; font-weight: 600; color: var(--g-paper); text-align: right; }
.gh-foot-links a { text-decoration: none; }
.gh-foot-links a:hover { color: var(--amber); }
.legal { margin-top: 44px; display: grid; gap: 14px; font-size: 12.5px; line-height: 1.65; max-width: 128ch; }
.legal a { color: var(--g-paper); text-decoration: underline; text-decoration-color: rgba(233, 162, 69, 0.7); text-underline-offset: 3px; }
.legal-affiliation { font-size: 14px; font-weight: 600; color: var(--g-paper); }
.legal-eho { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--g-paper); }
.legal-eho img { width: 36px; height: auto; }
.gh-disclosures { margin-top: 36px; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(244, 238, 230, 0.16); }
.gh-disclosures summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; min-height: 56px;
  font-size: 15px; font-weight: 700; color: var(--g-paper); }
.gh-disclosures summary::-webkit-details-marker { display: none; }
.gh-disclosures summary::after { content: "+"; font-family: var(--f-mono); font-size: 20px; color: var(--amber); transition: transform 0.45s var(--e-out); }
.gh-disclosures[open] summary::after { transform: rotate(45deg); }
.gh-disc-body { padding: 4px 22px 26px; display: grid; gap: 12px; font-size: 12.5px; line-height: 1.65; max-width: 128ch; }
.gh-disc-body p { margin: 0; }
.gh-disc-h { margin-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-paper); }
.gh-concept { margin-top: 36px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--paper-soft); }

/* =========================================================================== motion start states (JS + motion only) */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.gh-static) .gh-hero { height: 240vh; }
  .js:not(.gh-static) .gh-sky { position: sticky; top: 0; height: 100vh; height: 100dvh; }
  .js:not(.gh-static) .gh-hero-copy { position: absolute; inset: 0; max-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
  .js:not(.gh-static) .gh-frame--2, .js:not(.gh-static) .gh-frame--3 { opacity: 0; }
  .js:not(.gh-static) .gh-grade--dusk, .js:not(.gh-static) .gh-grade--seam { opacity: 0; }
  .js:not(.gh-static) .gh-beat--b { opacity: 0; }
  .js:not(.gh-static) .gh-display .gh-line { opacity: 0; }
  .js:not(.gh-static) .gh-rise { opacity: 0; transform: translateY(28px); }
  .js:not(.gh-static) .gh-reveal .gh-lid { display: block; position: absolute; left: 0; right: 0; height: 50.5%; z-index: 2; background: var(--ground); will-change: transform; }
  .js:not(.gh-static) .gh-reveal .gh-lid--t { top: 0; }
  .js:not(.gh-static) .gh-reveal .gh-lid--b { bottom: 0; }
  .js:not(.gh-static) .gh-reveal .gh-horizon { display: block; position: absolute; left: 0; right: 0; top: 50%; height: 1px; z-index: 3; background: var(--amber); transform: scaleX(0); }
  .js:not(.gh-static) .gh-beat--a { position: absolute; top: 132px; bottom: 100px; left: max(var(--gutter), calc((100vw - var(--max)) / 2)); right: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
  .js:not(.gh-static) .gh-beat--b { position: absolute; left: max(var(--gutter), calc((100vw - var(--max)) / 2)); right: var(--gutter); bottom: 124px; }
  .js:not(.gh-static) .gh-clock-hand { left: 0; }
  .js:not(.gh-static) .gh-win { opacity: 0.08; }
  .js:not(.gh-static) .gh-win-refl { opacity: 0; }
}
/* =========================================================================== responsive */
@media (max-width: 1399px) and (min-width: 1181px) { .gh-clock-label { display: none; } .gh-clock-rail { width: 100px; } }
@media (max-width: 1239px) and (min-width: 1181px) { .gh-clock-rail { width: 64px; } .gh-clock-ticks i:not(.maj) { display: none; } }
@media (max-width: 1180px) {
  .gh-nav-links { display: none; }
  .gh-dev-facts { grid-template-columns: repeat(2, minmax(0, auto)); }
}
@media (max-width: 960px) {
  .gh-head--split, .gh-con-core { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .gh-head--split .gh-h2, .gh-head--split .gh-lead { grid-column: 1 / -1; }
  .gh-con-head, .gh-con-form { grid-column: 1 / -1; }
  .gh-book-grid, .gh-rep-grid { grid-template-columns: 1fr; }
  .gh-rep-media { position: relative; top: 0; }
  .gh-foot-top { grid-template-columns: 1fr; align-items: start; }
  .gh-foot-links { text-align: left; }
}
@media (max-width: 768px) {
  body { font-size: 16.5px; padding-bottom: 84px; }
  .gh-nav { top: 10px; }
  .gh-nav-shell { padding: 6px 6px 6px 16px; }
  .gh-nav-logo img { height: 40px; }
  .gh-nav-cta { display: none; }
  /* the clock docks inside the nav island at 390 */
  .gh-clock { padding: 8px 14px; gap: 10px; }
  .gh-clock-rail { width: 68px; height: 22px; }
  .gh-clock-label { display: none; }
  .gh-clock-time { font-size: 13px; min-width: 64px; text-align: right; }
  .gh-clock-ticks i:not(.maj) { display: none; }
  .gh-sticky { display: grid; grid-template-columns: auto 1fr; gap: 6px; position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 40;
    padding: 6px; border-radius: 999px; background: rgba(7, 10, 36, 0.84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(244, 238, 230, 0.16), 0 18px 40px -20px rgba(3, 4, 30, 0.8); }
  .gh-sticky a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 999px; text-decoration: none; font: 650 15px/1 var(--f-body); }
  .gh-sticky-call { padding: 0 20px; color: var(--g-paper); box-shadow: inset 0 0 0 1px rgba(244, 238, 230, 0.28); }
  .gh-sticky-call .i { color: var(--amber); }
  .gh-sticky-book { background: var(--amber); color: var(--g-night); }
  .gh-sticky a:active { transform: scale(0.98); }

  .gh-hero-copy { padding: 104px var(--gutter) 108px; gap: 40px; }
  .gh-h1 { font-size: 14px; letter-spacing: 0.12em; align-items: flex-start; }
  .gh-h1::before { display: none; }
  .gh-display { margin-top: 18px; font-size: clamp(50px, 14.6vw, 72px); line-height: 0.92; }
  .gh-line + .gh-line { padding-left: 0; }
  .gh-hero-sub { font-size: 16px; line-height: 1.5; }
  .gh-hero-ctas { display: none; }
  .gh-hero-card { width: 100%; }
  .gh-hero-card > .gh-bezel-core { padding: 18px 20px; }
  .js:not(.gh-static) .gh-beat--a { top: 100px; bottom: 90px; }
  .gh-hero-ctas .btn { flex: 1 1 auto; justify-content: space-between; }
  .gh-hero-ctas .btn--ghost-ink { justify-content: center; }
  .gh-hero-towers { margin-top: 18px; gap: 10px 18px; font-size: 14px; }
  .gh-beat-line { font-size: clamp(40px, 11.4vw, 56px); }
  .js:not(.gh-static) .gh-beat--b { bottom: 104px; }
  .gh-beat-sun { font-size: 16px; }
    .gh-grade--haze { background: linear-gradient(180deg, rgba(244, 238, 230, 0.86) 0%, rgba(244, 238, 230, 0.6) 30%, rgba(244, 238, 230, 0.18) 52%, rgba(244, 238, 230, 0) 62%); }

  .gh-paths-grid { grid-template-columns: 1fr; gap: 72px; }
  .gh-path--invest { margin-top: 0; }
  .gh-path--invest .gh-path-media { margin-left: 15%; }
  .gh-path--invest .gh-path-body { text-align: right; }
  .gh-path--invest .gh-path-name { justify-content: flex-end; }
  .gh-path--invest .gh-path-note { margin-left: auto; }
  .gh-path-word { font-size: 104px; }
  .gh-ticket-v { font-size: 30px; }

  .gh-dev-media { height: 74svh; min-height: 440px; }
  .gh-dev-panel, .gh-dev:nth-child(even) .gh-dev-panel { margin: -120px 12px 0; width: auto; }
  .gh-dev-core { grid-template-columns: 1fr; padding: 26px 22px 28px; }
  .gh-dev-text { padding-right: 0; }
  .gh-dev-head, .gh-dev-hour, .gh-dev-name { padding-right: 86px; }
  .gh-windows { position: absolute; right: 14px; top: 20px; width: 70px; gap: 6px; }
  .gh-windows-svg { max-height: 150px; }
  .gh-windows-n { font-size: 24px; }
  .gh-windows figcaption .mono { font-size: 10px; letter-spacing: 0.1em; }
  .gh-windows figcaption .mono .gh-cap-long { display: none; }
  .gh-dev-hourmark { left: var(--gutter); right: auto; top: 22px; }
  .gh-dev-facts { grid-template-columns: 1fr 1fr; }
  .gh-dev-foot { flex-direction: column; align-items: stretch; }
  .gh-dev-foot .gh-ticket { justify-self: start; align-self: flex-start; }
  .gh-dev-ctas .btn { width: 100%; justify-content: space-between; }

  .gh-rep-miles { grid-template-columns: 1fr; }
  .gh-rep-list li { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .gh-cta-row .btn, .gh-invite-btns .btn { width: 100%; justify-content: space-between; }
  .gh-cta-row .btn--ghost-light, .gh-invite-btns .btn--ghost-light { justify-content: center; }
  .gh-con-core { padding: 26px 20px; row-gap: 32px; }
  .gh-q legend { font-size: 24px; }
  .gh-opt span { padding: 10px 16px; font-size: 15px; }
  .gh-fields { grid-template-columns: 1fr; }
  .gh-phone { grid-template-columns: minmax(0, 132px) minmax(0, 1fr); }
  .btn--submit { width: 100%; justify-content: space-between; }
  .gh-bezel { border-radius: 26px; padding: 6px; }
  .gh-bezel > .gh-bezel-core { border-radius: 20px; }
  .gh-invite-card .gh-bezel-core { padding: 22px; }
  .gh-foot-logo { height: 64px; }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) { .js:not(.gh-static) .gh-hero { height: 220vh; } }