/* ═══════════════════════════════════════════════════════════════════
   TLYN BRAND LAYER — sitewide champagne + inscriptional wordmarks
   Load AFTER page styles. Prefer also loading assets/tlyn-tokens.css first
   (Wave B). Tokens define the palette; this layer hard-enforces champagne
   and glass materials so legacy page :root gold (#C9A227) cannot win.
   Pages must also load Cinzel (400;600) for wordmarks.
   ═══════════════════════════════════════════════════════════════════ */

@import url("tlyn-tokens.css");

:root {
  --gold: #E1D6B7 !important;
  --gold-lite: #F3EBD3 !important;
  --gold-deep: #A68A56 !important;
  --gold-glow: rgba(225, 214, 183, 0.14) !important;
  --gold-brd: rgba(225, 214, 183, 0.32) !important;
  --tlyn-gold: #E1D6B7 !important;
  --tlyn-gold-lite: #F3EBD3 !important;
  --tlyn-gold-deep: #A68A56 !important;
}

/* wordmarks: inscriptional caps, champagne metal */
.logo, .nav-logo {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  background: linear-gradient(180deg, #FFFBEE 0%, #F3E7C8 55%, #D9C89E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(240, 224, 180, 0.25));
}

/* gold CTAs: champagne metal with ink text (matches dashboard pills) */
.btn-gold, .cta-gold, .btn-primary {
  background: linear-gradient(135deg, #FFFDF4, #E1D6B7) !important;
  color: #1A1403 !important;
  box-shadow: 0 2px 12px rgba(225, 214, 183, 0.28) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GO-LIVE MATERIALS PASS (2026-07-12) — every marketing/portal card
   gets the dashboard's luxury language: neutral graphite glass, ONE
   129° sheared specular, warm-white hairline, deep shadow, champagne
   accents. Applies sitewide via this shared layer.
   ═══════════════════════════════════════════════════════════════════ */

.panel, .trade-card, .promise-card, .county-card, .pl-card,
.cmd-card, .pf-card, .match-card, .teaser-box, .tier-row {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #14120E 0%, #0B0A08 55%, #080707 100%) !important;
  border: 1px solid rgba(255,248,232,.12) !important;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4),
              inset 0 1px 0 rgba(255,248,232,.08) !important;
}
.panel::before, .trade-card::before, .promise-card::before,
.county-card::before, .pl-card::before, .cmd-card::before,
.pf-card::before, .match-card::before, .teaser-box::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(129deg, rgba(255,250,240,.11) 0%, rgba(255,250,240,.045) 28%, transparent 50%);
}
.panel > *, .trade-card > *, .promise-card > *, .county-card > *,
.pl-card > *, .cmd-card > *, .pf-card > *, .match-card > *, .teaser-box > * {
  position: relative;
}
.panel:hover, .trade-card:hover, .promise-card:hover, .county-card:hover,
.pl-card:hover, .cmd-card:hover {
  border-color: rgba(225,214,183,.35) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.65), 0 0 24px rgba(225,214,183,.08),
              inset 0 1px 0 rgba(255,248,232,.12) !important;
}
.panel-eyebrow {
  color: rgba(214,192,132,.85) !important;
  letter-spacing: .16em;
}
/* champagne numerals wherever big stats appear */
.stat-big, .kpi-num, .price-num, .county-count {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  background: linear-gradient(180deg, #FFFEF6 0%, #ECE3CB 55%, #D9CCA6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(240,225,180,.25));
}
/* gold CTAs: champagne gradient + ink text (never flat yellow) */
.btn-hero, .btn-gold, .cta-gold, button.primary {
  background: linear-gradient(135deg, #FFFDF4, #E1D6B7 60%, #CDBA8C) !important;
  color: #14100A !important;
  box-shadow: 0 2px 14px rgba(225,214,183,.35), inset 0 1px 0 rgba(255,252,240,.7) !important;
}
/* tables inherit the dashboard's satin language */
table.perf-table th, .compare th {
  color: rgba(198,169,99,.85) !important;
  letter-spacing: .12em;
}

/* ═══ Mobile hamburger dropdown — shared across marketing pages ═══ */
.nav-burger{ display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:0; background:rgba(255,255,255,.04);
  border:1px solid rgba(201,162,39,.28); border-radius:10px; cursor:pointer; flex-shrink:0; }
.nav-burger span{ display:block; width:20px; height:2px; margin:0 auto; border-radius:2px;
  background:#F0E0A0; transition:transform .25s ease, opacity .2s ease; }
.nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{ position:fixed; top:64px; left:12px; right:12px; z-index:9998;
  display:none; flex-direction:column; gap:2px; padding:12px;
  background:linear-gradient(160deg,#14110A,#0A0908 70%,#070606);
  border:1px solid rgba(201,162,39,.30); border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.7), 0 0 30px rgba(240,208,130,.08); }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:13px 14px; border-radius:10px; font-size:15px; font-weight:600;
  color:#EAE6DA; text-decoration:none; letter-spacing:.01em; }
.mobile-menu a:active, .mobile-menu a:hover{ background:rgba(201,162,39,.10); color:#FFF8E0; }
.mm-divider{ height:1px; margin:8px 4px; background:rgba(201,162,39,.20); }
.mobile-menu .mm-ghost{ border:1px solid rgba(201,162,39,.35); text-align:center; margin-top:2px; }
.mobile-menu .mm-gold{ text-align:center; margin-top:6px; color:#1A1403;
  background:linear-gradient(135deg,#FFF3C4,#E1D6B7); font-weight:800; }
@media(max-width:768px){ .nav-burger{ display:flex; } }