/* ============================================================
   OBSIDIAN LUX (V3) — shared shell for subpages
   Loads after css/obsidian.css (tokens, fonts, btn, img-slab,
   kicker, h2, footer). Escalated register: scale contrast,
   asymmetry, whitespace, accent starvation, micro-detail.
   ============================================================ */

html { scroll-behavior: smooth; }
body.lux {
  background: var(--bg); color: var(--ink);
  font-family: var(--gen); font-weight: 400;
  -webkit-font-smoothing: antialiased;
  margin: 0; overflow-x: clip; position: relative;
}
body.lux::after {
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: 0.05;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--oxblood); color: var(--ink); }
[id] { scroll-margin-top: 150px; }

/* accent discipline on imported chrome */
body.lux .footer h5 { color: var(--muted); }
body.lux .footer-bar { border-top-color: var(--hair); }
body.lux a:hover { color: var(--ink); }
body.lux .footer-bar .coords { letter-spacing: 0.08em; }

/* ---------- nav (fixed) ---------- */
body.lux .nav { position: fixed; background: transparent; transition: background 0.4s ease, border-color 0.4s ease; border-bottom: 1px solid transparent; }
body.lux .nav.scrolled, body.lux.menu-open .nav { background: var(--bg); border-bottom-color: var(--hair); }
body.lux .nav-links { gap: 0; }
body.lux .nav-links > a, body.lux .nav-dd > a { padding: 10px 22px; border-left: 1px solid transparent; border-right: 1px solid transparent; transition: border-color 0.25s ease; }
body.lux .nav-links > a:hover, body.lux .nav-dd > a:hover { border-left-color: var(--hair); border-right-color: var(--hair); color: var(--ink); }
body.lux .nav-phone { margin-left: 26px; border: 1px solid var(--hair); }
body.lux .nav-phone:hover { background: var(--oxblood); border-color: var(--oxblood); color: var(--ink); } /* the one oxblood hover */
.nav-dd { position: relative; display: flex; align-items: center; }
.dd-panel { position: absolute; top: 100%; left: 0; padding-top: 18px; display: none; min-width: 330px; }
.nav-dd:hover .dd-panel { display: block; }
.nav-dd.open .dd-panel { display: block; } /* a11y: keyboard focus opens the dropdown (see js/main.js) */
.dd-inner { background: var(--bg); border: 1px solid var(--hair); padding: 8px 0; }
.dd-inner a { display: flex; align-items: baseline; gap: 14px; padding: 15px 26px; font-family: var(--gen); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(236,234,229,0.72); }
.dd-inner a:hover { background: var(--charcoal); color: var(--ink); }
.dd-inner .n { color: var(--muted); font-size: 10px; }

/* mobile visibility + menu */
.only-m { display: none !important; }
button.burger { background: none; border: none; padding: 0; cursor: pointer; }
.mmenu { display: none; position: fixed; top: 64px; left: 0; right: 0; z-index: 98; background: var(--bg); border-bottom: 1px solid var(--hair); max-height: calc(100vh - 64px); overflow: auto; }
body.menu-open .mmenu { display: block; }
.mnav-panel { border-top: 1px solid var(--hair); padding: 10px 22px 34px; }
.mnav-link { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--hair); font-family: var(--clash); font-weight: 600; font-size: 20px; color: var(--ink); }
.mnav-link .go { color: var(--muted); font-size: 13px; }
.mnav-sub { padding: 4px 0 18px; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 14px; }
.mnav-sub a { font-size: 13px; color: var(--muted); letter-spacing: 0.06em; display: flex; gap: 12px; }
.mnav-sub .n { font-size: 11px; font-weight: 500; padding-top: 1px; color: var(--muted); }
.mnav-phone { margin-top: 28px; display: block; }

/* ---------- shared elements ---------- */
.quiet-link { font-family: var(--gen); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(236,234,229,0.72); }
.quiet-link .arr { display: inline-block; margin-left: 10px; transition: transform 0.3s ease; font-weight: 400; }
.quiet-link:hover { color: var(--ink); }
.quiet-link:hover .arr { transform: translateX(8px); }

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
  .reveal.in { opacity: 1; transform: none; }
}

/* vertical edge label */
.edge-label { position: absolute; right: 34px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-size: 10px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(236,234,229,0.28); }

/* crosshair marks */
.xh { position: absolute; width: 13px; height: 13px; pointer-events: none; }
.xh::before, .xh::after { content: ""; position: absolute; background: rgba(201,162,75,0.5); }
.xh::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.xh::after { top: 50%; left: 0; right: 0; height: 1px; }

/* ---------- subpage header: low-left, void above-right ---------- */
.chero-lux { position: relative; min-height: 72vh; display: flex; flex-direction: column; justify-content: flex-start; padding: 128px 64px 72px; border-bottom: 1px solid var(--hair); overflow: hidden; }
.chero-lux .eyebrow { display: flex; align-items: center; gap: 18px; }
.chero-lux .eyebrow .gold-rule { width: 56px; }
.chero-lux h1 { font-family: var(--clash); font-weight: 600; font-size: clamp(72px, 8.5vw, 124px); line-height: 1.0; letter-spacing: -0.02em; color: var(--ink); margin-top: auto; padding-top: 48px; }
.chero-lux .line { font-size: 16px; line-height: 1.75; color: var(--muted); max-width: 560px; margin-top: 44px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes luxUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  .chero-lux .eyebrow { animation: luxUp 1s ease-out both; }
  .chero-lux h1 { animation: luxUp 1s ease-out 0.12s both; }
  .chero-lux .line { animation: luxUp 1s ease-out 0.28s both; }
}

/* ---------- sticky subnav ---------- */
.subnav { position: sticky; top: 0; z-index: 90; background: var(--bg); border-bottom: 1px solid var(--hair); display: flex; gap: 40px; padding: 0 64px; }
.subnav a { font-family: var(--gen); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 20px 0 18px; border-bottom: 1px solid transparent; margin-bottom: -1px; display: flex; gap: 10px; white-space: nowrap; }
.subnav a .n { color: var(--gold); font-size: 10px; }
.subnav a.on, .subnav a:hover { color: var(--ink); border-bottom-color: rgba(236,234,229,0.4); }

/* ---------- pillar band: giant outlined numeral, asymmetric ---------- */
.pillar-band { display: grid; grid-template-columns: 300px 1fr; gap: 70px; align-items: baseline; padding: 130px 64px 60px; }
.pillar-band .num { font-family: var(--clash); font-weight: 600; font-size: 150px; line-height: 0.9; color: transparent; -webkit-text-stroke: 1px var(--gold); }
.pillar-band .name { font-family: var(--clash); font-weight: 600; font-size: clamp(38px, 3.6vw, 50px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.pillar-band .intro { font-size: 15px; line-height: 1.7; color: var(--muted); margin-top: 18px; max-width: 480px; }

/* ---------- service spreads ---------- */
.ssec { display: grid; grid-template-columns: 1fr 480px; gap: 110px; padding: 120px 64px; align-items: center; }
.ssec.flip { grid-template-columns: 480px 1fr; }
.ssec .ssec-idx { display: block; font-family: var(--gen); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 26px; }
.ssec h3 { font-family: var(--clash); font-weight: 600; font-size: clamp(32px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
.ssec p { font-size: 16px; line-height: 1.8; color: var(--muted); margin-top: 24px; max-width: 540px; }
.caps { list-style: none; margin-top: 34px; }
.caps li { padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; line-height: 1.6; color: rgba(236,234,229,0.62); display: flex; gap: 16px; align-items: baseline; }
.caps li::before { content: "—"; color: var(--muted); font-size: 13px; flex: none; }
.caps li:first-child { border-top: 1px solid var(--hair); }
.caps.two-col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }

/* diagram plates */
.diag-panel { border: 1px solid rgba(236,234,229,0.4); background: #0E0E11; }
.diag-panel img { display: block; width: 100%; height: auto; }
.diag-cap { font-family: var(--gen); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding-top: 12px; }

/* ---------- numbered editorial rows ---------- */
.numlist .row { display: grid; grid-template-columns: 170px 1fr minmax(0, 420px); gap: 40px; padding: 54px 64px; border-top: 1px solid var(--hair); align-items: baseline; }
.numlist .row:last-child { border-bottom: 1px solid var(--hair); }
.numlist .n { font-family: var(--clash); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; color: var(--gold); }
.numlist h4 { font-family: var(--clash); font-weight: 600; font-size: clamp(28px, 2.4vw, 34px); letter-spacing: -0.005em; color: var(--ink); }
.numlist .d { font-size: 14.5px; line-height: 1.7; color: var(--muted); }

/* ---------- role rows ---------- */
.role-row { display: grid; grid-template-columns: 1fr 150px 150px 90px; gap: 24px; align-items: center; padding: 44px 64px; border-top: 1px solid var(--hair); transition: background 0.35s ease; }
.role-row:last-of-type { border-bottom: 1px solid var(--hair); }
.role-row:hover { background: var(--charcoal); }
.role-title { font-family: var(--clash); font-weight: 600; font-size: clamp(26px, 2.2vw, 32px); color: var(--ink); }
.role-meta { font-family: var(--gen); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.role-arrow { font-size: 20px; color: rgba(236,234,229,0.45); text-align: right; transition: transform 0.35s ease; }
.role-row:hover .role-arrow { transform: translateX(8px); }
.roles-empty { border: 1px solid var(--hair); padding: 44px 48px; margin: 8px 64px 0; }
.roles-empty h4 { font-family: var(--clash); font-weight: 600; font-size: 22px; color: var(--ink); }
.roles-empty p { font-size: 15px; line-height: 1.7; color: var(--muted); margin-top: 12px; max-width: 620px; }

/* ---------- forms: charcoal panel ---------- */
.form-panel { background: var(--charcoal); border: 1px solid var(--hair); padding: 56px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; }
.field:first-child { margin-top: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field-row .field { margin-top: 28px; }
.form-panel > .field-row:first-child .field { margin-top: 0; }
.field label { font-family: var(--gen); font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  font-family: var(--gen); font-size: 15px; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--hair);
  padding: 12px 2px; outline: none; border-radius: 0; width: 100%;
  transition: border-color 0.25s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: rgba(236,234,229,0.45); }
.field input::placeholder, .field textarea::placeholder { color: rgba(236,234,229,0.25); }
.field textarea { height: 120px; resize: vertical; line-height: 1.6; }
.select-wrap { position: relative; }
.select-wrap::after { content: "▾"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--muted); pointer-events: none; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field select option { background: var(--charcoal); color: var(--ink); }
.form-panel .btn { margin-top: 40px; width: 100%; }

/* ---------- full-bleed band ---------- */
.band { position: relative; min-height: 80vh; display: flex; align-items: center; border-top: 1px solid var(--hair); overflow: hidden; }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.92) sepia(0.12) contrast(1.05) brightness(0.42); }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,13,0.82) 0%, rgba(11,11,13,0.35) 55%, rgba(11,11,13,0.55) 100%); }
.band-inner { position: relative; z-index: 2; padding: 160px 64px; max-width: 880px; }
.band-inner h2 { font-family: var(--clash); font-weight: 600; font-size: clamp(40px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -0.015em; color: var(--ink); margin-top: 28px; }
.band-inner .quiet-link { display: inline-block; margin-top: 52px; }

/* ---------- CTA close: statement, low-left ---------- */
.cta-close { position: relative; padding: 190px 64px 170px; border-top: 1px solid var(--hair); }
.cta-close h2 { font-family: var(--clash); font-weight: 600; font-size: clamp(44px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.015em; color: var(--ink); max-width: 900px; margin-top: 30px; }
.cta-close .row { display: flex; align-items: center; gap: 40px; margin-top: 60px; }

/* ---------- legal ---------- */
.legal { padding: 100px 64px 150px; max-width: 820px; }
.legal p { font-size: 16px; line-height: 1.8; color: var(--muted); margin-top: 18px; }
.legal h2 { font-family: var(--clash); font-weight: 600; font-size: 26px; color: var(--ink); margin-top: 60px; }
.legal a { color: rgba(236,234,229,0.8); text-decoration: underline; text-decoration-color: var(--hair); }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 1080px) {
  body.lux .nav { padding: 0 22px; height: 64px; }
  body.lux .nav-links { display: none; }
  .only-m { display: flex !important; align-items: center; gap: 18px; }
  body.lux .nav-phone { margin-left: 0; border: none; padding: 0; }
  .chero-lux { padding: 84px 22px 52px; min-height: 56svh; }
  .chero-lux h1 { font-size: clamp(44px, 12vw, 72px); }
  .chero-lux .line { margin-top: 32px; }
  .edge-label { display: none; }
  .subnav { padding: 0 22px; gap: 24px; overflow-x: auto; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .pillar-band { grid-template-columns: 1fr; gap: 20px; padding: 80px 22px 30px; }
  .pillar-band .num { font-size: 90px; }
  .ssec, .ssec.flip { grid-template-columns: 1fr; gap: 44px; padding: 70px 22px; }
  .ssec.flip .ssec-media { order: -1; }
  .caps.two-col { grid-template-columns: 1fr; }
  .numlist .row { grid-template-columns: 50px 1fr; gap: 14px 20px; padding: 40px 22px; }
  .numlist .d { grid-column: 2 / 3; }
  .role-row { grid-template-columns: 1fr 40px; gap: 8px 16px; padding: 30px 22px; }
  .role-arrow { grid-row: 1; grid-column: 2; }
  .roles-empty { margin: 8px 22px 0; padding: 30px 24px; }
  .band { min-height: 64svh; }
  .band-inner { padding: 100px 22px; }
  .cta-close { padding: 110px 22px 100px; }
  .cta-close .row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .legal { padding: 70px 22px 100px; }
  .form-panel { padding: 30px 24px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
}