/* ============================================================
   DRAFT — "EQUINOX LAYER"
   Premium editorial refinement over style.css. Loaded after it,
   draft pages only. Import = ship this file + add one <link> tag
   to every page.

   Design moves: knife-sharp corners · hairline rules · bigger,
   tighter display type · obsessive tracking on micro-labels ·
   campaign-treated photography · slow expensive motion ·
   monochrome discipline with gold as punctuation.
   ============================================================ */

/* ── 1. Palette discipline: warmer paper-white, hairline borders ── */
:root {
  --text: #f2efe7;
  --text-muted: rgba(242, 239, 231, 0.68);
  --text-faint: rgba(242, 239, 231, 0.34);
  --border: rgba(255, 255, 255, 0.05);
  --border-2: rgba(255, 255, 255, 0.09);
}
::selection { background: var(--gold); color: #000; }
html { scrollbar-width: thin; scrollbar-color: #2a2a28 var(--bg); }

/* ── 2. Type: bigger, tighter, more air around it ── */
.display-xl { font-size: clamp(3.8rem, 8.5vw, 9.5rem); line-height: 0.88; letter-spacing: 0.02em; }
.display-lg { font-size: clamp(3rem, 6vw, 6.5rem); line-height: 0.9; letter-spacing: 0.02em; }
.display-md { line-height: 0.92; letter-spacing: 0.03em; }
.lead { font-weight: 300; font-size: 1.08rem; line-height: 1.95; }
.body-sm { font-weight: 300; line-height: 1.9; }
p { font-weight: 300; }
strong, b { font-weight: 600; }

/* Micro-labels: the luxury signature — smaller, wider, quieter */
.eyebrow { font-size: 0.56rem; letter-spacing: 0.34em; font-weight: 600; }
.eyebrow::before, .eyebrow.center::after { width: 32px; background: var(--gold-mid, rgba(201,169,110,0.4)); }
.trust-label, .pb-tier, .card-tier-label, .includes-label, .tier-tag, .marquee-item {
  letter-spacing: 0.28em !important; font-weight: 600 !important;
}

/* ── 3. Sharp everything: zero radius, hairline framing ── */
.btn, .btn-gold, .btn-gold-lg, .btn-outline, .btn-white, .nav-cta,
.card-apply, .comp-apply-btn, input, textarea, select,
.tier-card-inner, .svc-card, .sticky-apply a {
  border-radius: 0 !important;
}

/* ── 4. Buttons: Equinox inversion — gold flips to white on hover ── */
.btn { letter-spacing: 0.22em; font-weight: 600; transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-gold:hover, .btn-gold-lg:hover, .card-apply:hover, .comp-apply-btn:hover {
  background: #fff !important; color: #000 !important; opacity: 1 !important; transform: none !important;
}
.btn-outline { border-width: 1px; }
.btn-outline:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; transform: none !important; }
.nav-cta { letter-spacing: 0.22em; transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-cta:hover { background: #fff !important; color: #000 !important; }

/* ── 5. Nav: quieter, wider tracking, editorial underline on hover ── */
.nav-links a {
  letter-spacing: 0.2em; font-weight: 500; font-size: 0.66rem;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
  padding-bottom: 4px;
}
.nav-links a:hover { background-size: 100% 1px; }
/* Apply pill: opt out of the underline treatment — restore symmetric padding so the gold box doesn't shift above the nav */
.nav-links a.nav-apply { padding: 10px 26px; display: inline-block; background-image: none; }

/* ── 6. Photography: campaign treatment — cohesive, cinematic ── */
img { filter: grayscale(0.12) contrast(1.05) brightness(0.98); }
.ba-card img { filter: grayscale(0.05) contrast(1.04); }

/* ── 7. Motion: slow, expensive easing ── */
.fade-up { transform: translateY(28px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.fade-in { transition: opacity 1.4s ease; }
.marquee-track { animation-duration: 48s !important; }
.marquee-item { opacity: 0.55; font-size: 0.6rem; }
.marquee-item.accent { opacity: 0.85; }

/* ── 8. Space is the luxury: more of it ── */
.py-xl { padding-top: 150px; padding-bottom: 150px; }
@media (max-width: 768px) { .py-xl { padding-top: 90px; padding-bottom: 90px; } }
.trust-num { font-size: 3.4rem; letter-spacing: 0.02em; }

/* ── 9. Hairline card framing, flat surfaces ── */
.tier-card-inner, .svc-card { border-width: 1px; }
.sticky-apply a { letter-spacing: 0.2em; }

/* ── 10. Footer: whisper quiet ── */
footer { border-top: 1px solid var(--border); }
footer a { transition: color 0.3s; }

/* ============================================================
   V3 — CRAFT SYSTEM (the de-AI pass)
   Editorial details a full-time studio would ship: ghost
   numerals, figure captions, keyline frames, staggered hero,
   count-up stats, drop caps, scroll cue, hide-on-scroll nav.
   ============================================================ */

/* ── Hero: line-by-line staggered reveal ── */
.hero-line { display: block; overflow: hidden; }
.hero-line > span { display: inline-block; transform: translateY(110%); animation: lineUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hero-line:nth-child(1) > span { animation-delay: 0.15s; }
.hero-line:nth-child(2) > span { animation-delay: 0.30s; }
.hero-line:nth-child(3) > span { animation-delay: 0.45s; }
@keyframes lineUp { to { transform: translateY(0); } }

/* ── Scroll cue: thin vertical line that draws itself ── */
.scroll-cue { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 3; }
.scroll-cue .sc-label { font-size: 0.52rem; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-faint); }
.scroll-cue .sc-line { width: 1px; height: 64px; background: linear-gradient(var(--gold), transparent); animation: cueDraw 2.2s cubic-bezier(0.16,1,0.3,1) infinite; transform-origin: top; }
@keyframes cueDraw { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ── Ghost numerals: oversized section indices, magazine-style ── */
.g-num { position: absolute; top: 64px; right: 0; font-family: var(--font-display); font-size: clamp(6rem, 12vw, 12rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(242,239,231,0.07); pointer-events: none; user-select: none; }
section { position: relative; }
@media (max-width: 768px) { .g-num { font-size: 5rem; top: 32px; } }

/* ── Keyline frame: the signature offset gold hairline on imagery ── */
.keyline { position: relative; }
.keyline::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gold-mid, rgba(201,169,110,0.35)); transform: translate(14px, 14px); pointer-events: none; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.keyline:hover::after { transform: translate(8px, 8px); }

/* ── Figure captions ── */
.figcap { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-faint); }
.figcap::before { content: ''; width: 28px; height: 1px; background: var(--gold-mid, rgba(201,169,110,0.4)); flex-shrink: 0; }

/* ── Count-up stats: tabular numerals so digits don't jitter ── */
.trust-num, .cs-num { font-variant-numeric: tabular-nums; }

/* ── Drop cap for editorial body openings ── */
.dropcap::first-letter { font-family: var(--font-serif); font-size: 3.4em; line-height: 0.8; float: left; padding: 6px 12px 0 0; color: var(--gold); }

/* ── Giant serif quote glyph ── */
.q-glyph { position: relative; }
.q-glyph::before { content: '\201C'; position: absolute; top: -0.28em; left: -0.45em; font-family: var(--font-serif); font-size: 4.6em; line-height: 1; color: rgba(201,169,110,0.16); pointer-events: none; }

/* ── Nav: hides on scroll down, returns on scroll up ── */
#nav { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), background 0.3s; }
#nav.nav-hidden { transform: translateY(-100%); }

/* ── CTA arrow: slides on hover ── */
.btn .arr { display: inline-block; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.btn:hover .arr { transform: translateX(5px); }

/* ── SVG icon defaults: thin professional strokes ── */
.ico { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -2px; }

/* ── Play button: engineered, not emoji ── */
.play-btn { width: 84px; height: 84px; border-radius: 999px; border: 1px solid rgba(242,239,231,0.4); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.5s cubic-bezier(0.16,1,0.3,1); background: rgba(9,9,8,0.3); backdrop-filter: blur(4px); }
.play-btn:hover { background: var(--gold); border-color: var(--gold); }
.play-btn svg { width: 22px; height: 22px; fill: var(--text); stroke: none; margin-left: 3px; transition: fill 0.3s; }
.play-btn:hover svg { fill: #000; }
.film-meta { position: absolute; top: 18px; left: 20px; font-size: 0.54rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(242,239,231,0.75); display: flex; align-items: center; gap: 10px; }
.film-meta::before { content: ''; width: 22px; height: 1px; background: var(--gold); }

/* ── Editorial footer: oversized wordmark ── */
.f-word { font-family: var(--font-display); font-size: clamp(3.4rem, 9vw, 8.5rem); line-height: 0.9; letter-spacing: 0.02em; color: var(--text); padding: 90px 0 40px; border-bottom: 1px solid var(--border); }
.f-word span { color: transparent; -webkit-text-stroke: 1px rgba(201,169,110,0.55); }

/* ── Inputs: gold focus underline, quiet chrome ── */
input:focus, textarea:focus { border-color: rgba(201,169,110,0.55) !important; box-shadow: 0 1px 0 0 rgba(201,169,110,0.55); }

/* ============================================================
   V4 — QA POLISH (system consistency · accessibility · perf)
   ============================================================ */

/* Keyboard focus: visible, on-brand, never a blue default ring */
:focus-visible { outline: 1px solid var(--gold) !important; outline-offset: 3px; }
.btn:focus-visible, a:focus-visible { outline-offset: 4px; }

/* Respect reduced-motion — professional accessibility baseline */
@media (prefers-reduced-motion: reduce) {
  .hero-line > span { animation: none; transform: none; }
  .scroll-cue .sc-line { animation: none; }
  .fade-up, .fade-in { transition: none; transform: none; }
  .marquee-track { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* Editorial email capture — underline input, no chrome */
.cap-line { display: flex; align-items: flex-end; gap: 18px; }
.cap-line input {
  background: transparent !important; border: none !important;
  border-bottom: 1px solid var(--border-2) !important; border-radius: 0 !important;
  padding: 10px 2px !important; font-size: 0.9rem; width: 250px; color: var(--text);
  transition: border-color 0.4s;
}
.cap-line input:focus { border-bottom-color: var(--gold) !important; box-shadow: none !important; }
.cap-line button {
  background: none; border: none; cursor: pointer; padding: 10px 2px;
  font-family: var(--font-body); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid var(--gold); transition: color 0.3s, border-color 0.3s;
}
.cap-line button:hover { color: var(--text); border-color: var(--text); }

/* Modal system: sharp, on-grid */
.modal-panel { border-radius: 0 !important; }
.modal-panel input, .modal-panel button { border-radius: 0 !important; }

/* Prevent layout shift on the editorial portrait */
.method-grid img { aspect-ratio: 844 / 1500; object-fit: cover; }