/* =========================================================
   core.css — shared layer for EVERY page (Phase D5, 2026-07-29)
   Tokens, base, consent modal, render-scoping, ticker, header,
   nav, section scaffolding, footer, reveal, shared responsive,
   and mobile drawer. Sourced verbatim from the homepage, which
   is the design source of truth (CLAUDE.md §2). Loaded before
   home.css / inner.css on all 11 pages.

   This replaces the two divergent private copies that were the
   root cause of the §13 #8–#10 header bugs. Homepage breakpoints
   (1200/1050/960/768/640/480) are canonical for shared furniture.
   ========================================================= */

/* =========================================================
   TOKENS — light theme (default)
   ========================================================= */
:root {
  /* Tells the browser which theme the page is actually in, so native UI
     (scrollbars, form controls, the pre-paint canvas) is drawn to match
     instead of defaulting to light. Prevents the white scrollbar/flash in
     dark mode. Paired with the override in html[data-theme="dark"]. */
  color-scheme: light;

  /* Brand */
  --navy-deep:    #0F1A26;
  --navy-mid:     #1B2E42;
  --navy-surface: #243A50;
  --navy-light:   #2D4660;

  --gold:         #CFA85C;
  --gold-light:   #E0BE78;
  --gold-dark:    #B08A40;
  --gold-glow:    rgba(207,168,92,.28);

  --crimson:      #dc2626;
  --crimson-dark: #b91c1c;
  --amber:        #d97706;
  --emerald:      #059669;

  /* Surfaces */
  --bg:            #ffffff;
  --surface:       #f8f9fa;
  --surface-alt:   #f1f3f5;
  --surface-hover: #e9ecef;

  /* Text */
  --text-primary:   #1B2E42;
  --text-secondary: #4a5568;
  --text-muted:     #718096;
  --text-inverse:   #ffffff;

  /* Lines */
  --border-subtle: rgba(27,46,66,.08);
  --border-line:   rgba(27,46,66,.12);
  --border-navy:   rgba(27,46,66,.18);
  --border-gold:   rgba(207,168,92,.35);

  /* Elevation */
  --shadow-sm:  0 1px 2px rgba(15,26,38,.04), 0 1px 3px rgba(15,26,38,.06);
  --shadow-md:  0 4px 12px rgba(15,26,38,.06), 0 2px 4px rgba(15,26,38,.04);
  --shadow-lg:  0 12px 32px rgba(15,26,38,.08), 0 4px 10px rgba(15,26,38,.04);
  --shadow-xl:  0 24px 60px rgba(15,26,38,.12), 0 8px 20px rgba(15,26,38,.06);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  /* Layout */
  --header-h: 68px;
  --ticker-h: 42px;
  --container: 1280px;
  --section-y: 5.5rem;
}

/* Dark theme */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0B1320;
  --surface:       #15243A;
  --surface-alt:   #1B2D48;
  --surface-hover: #233656;
  --card-bg:       #17253A;

  --text-primary:   #EAF0F8;
  --text-secondary: #B8C4D4;
  --text-muted:     #8196AD;
  --text-inverse:   #0B1320;

  --border-subtle: rgba(234,240,248,.08);
  --border-line:   rgba(234,240,248,.14);
  --border-navy:   rgba(234,240,248,.20);
  --border-gold:   rgba(207,168,92,.45);

  --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.25);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.3);
  --shadow-xl:  0 24px 60px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.35);
}
html:not([data-theme="dark"]) { --card-bg: var(--bg); }

/* Density */
html[data-density="compact"]  { --section-y: 4rem; }
html[data-density="spacious"] { --section-y: 7.5rem; }

/* =========================================================
   BASE
   ========================================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(var(--header-h) + var(--ticker-h));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }

::selection { background: var(--gold); color: var(--navy-deep); }

/* Focus rings */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================
   COOKIE CONSENT MODAL (centered, with backdrop)
   ========================================================= */
.consent-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 26, 38, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-out);
}
.consent-overlay.shown { opacity: 1; pointer-events: auto; }

.consent-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: min(480px, calc(100vw - 2rem));
  background: var(--navy-deep);
  color: #EAF0F8;
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 12px 24px rgba(0,0,0,.3);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
  font-size: .95rem;
  line-height: 1.55;
}
.consent-modal.shown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.consent-modal-title {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: 1.15rem;
  color: var(--gold-light);
  margin-bottom: .65rem;
}
.consent-modal-title i { font-size: 1.05rem; }
.consent-modal p { margin: 0 0 1.1rem; color: #C8D2E0; }
.consent-modal p:last-of-type { margin-bottom: 1.35rem; }
.consent-modal a { color: var(--gold-light); text-decoration: underline; }
.consent-modal-actions {
  display: flex; gap: .65rem; justify-content: flex-end; flex-wrap: wrap;
}
.consent-btn {
  font: inherit;
  padding: .65rem 1.25rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  transition: background .2s, color .2s, border-color .2s, transform .1s;
}
.consent-btn:active { transform: translateY(1px); }
.consent-btn-decline {
  background: transparent;
  color: #C8D2E0;
  border-color: rgba(234,240,248,.22);
}
.consent-btn-decline:hover { background: rgba(234,240,248,.08); color: #fff; }
.consent-btn-accept {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--navy-deep);
}
.consent-btn-accept:hover { background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%); }
@media (max-width: 480px) {
  .consent-modal { padding: 1.4rem; }
  .consent-modal-actions { flex-direction: column-reverse; }
  .consent-btn { width: 100%; }
}

/* Skip link (a11y) — visible only when focused via keyboard */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  padding: .75rem 1rem;
  background: var(--navy-deep);
  color: #fff;
  font-weight: 600;
  z-index: 10000;
  transform: translateY(-110%);
  transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--gold); outline-offset: -2px; }

/* Respect user motion preference — disable non-essential animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; }

/* =========================================================
   BELOW-THE-FOLD RENDER SCOPING (Phase D3)
   Every major section below the hero carries [data-section].
   content-visibility:auto lets the browser skip style, layout and
   paint for the ones that are currently off screen. That shrinks
   the work done on first load AND on every later interaction,
   because a theme swap only has to restyle what is on screen.
   Measured on the homepage: theme-toggle style recalc dropped from
   7.9ms to 2.2ms (-72%) on desktop, and 3.2ms on about.html. The win is
   larger on mobile, where full-viewport paint dominates the cost.

   contain-intrinsic-size uses the `auto` keyword, so a section's
   real height is remembered once it has been rendered. The px figures
   below are only the estimates used before a section first renders,
   and come from measured means: ~800px at 1280px wide, ~1500px at 375px.

   Checked before enabling this: no descendant of any [data-section]
   overflows its section box, and no box-shadow extends past it, at
   either 375px or 1280px. That check matters because
   content-visibility implies contain:paint, which clips anything
   that does overflow.
   ========================================================= */
[data-section] {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}
/* Sections roughly double in height once the layout stacks for narrow
   viewports, so the pre-render estimate is raised to match. Measured
   mean section height: ~800px at 1280px wide, ~1500px at 375px. */
 (max-width: 780px) {
  [data-section] { contain-intrinsic-size: auto 1500px; }
}

/* Printing must render every section, not just the visible ones. */
@media print {
  [data-section] { content-visibility: visible; }
}

/* =========================================================
   TICKER — refined
   Threat-level pill anchored left + inline marquee
   ========================================================= */
.ticker-bar {
  position: fixed; top: 0; left: 0; width: 100%;
  height: var(--ticker-h);
  background: linear-gradient(90deg, var(--navy-deep) 0%, var(--navy-mid) 50%, var(--navy-deep) 100%);
  border-bottom: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  z-index: 300;
  overflow: hidden;
}
html[data-theme="dark"] .ticker-bar {
  background: linear-gradient(90deg, #B08A40 0%, #C9A24A 50%, #B08A40 100%);
  border-bottom: 1px solid #8f7030;
}
html[data-theme="dark"] .ticker-item {
  color: #1B2E42;
}
html[data-theme="dark"] .ticker-item strong { color: #0F1A26; }

/* Threat-level pill (anchored, not scrolling) */
.threat-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 100%;
  padding: 0 1rem 0 1.1rem;
  background: linear-gradient(90deg, rgba(217,119,6,.22), transparent 85%);
  border-right: 1px solid var(--border-gold);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fff;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}
.threat-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(217,119,6,.6);
  animation: threat-pulse 2s ease-in-out infinite;
}
.threat-pill .level { color: var(--gold-light); }
@keyframes threat-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217,119,6,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(217,119,6,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,119,6,0); }
}

/* Fade mask on the scrolling region so items enter/exit cleanly */
.ticker-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent);
}
.ticker-track {
  display: flex;
  animation: ticker-scroll 77s linear infinite;
  width: max-content;
}
.ticker-viewport:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Empty state — static, no marquee, centered placeholder */
.ticker-track.ticker-empty {
  animation: none;
  width: 100%;
  justify-content: center;
}
.ticker-item-empty {
  font-style: italic;
  opacity: .75;
}
.ticker-item {
  display: flex; align-items: center; gap: .6rem;
  padding: 0 1.75rem;
  white-space: nowrap;
  font-size: .92rem;
  font-weight: 500;
  color: rgba(255,255,255,.94);
}
.ticker-item strong { color: #fff; font-weight: 700; }
.ticker-item .tag {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  display: inline-flex; align-items: center; gap: 5px;
}
.tag.breaking {
  background: var(--crimson); color: #fff;
  animation: badge-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(220,38,38,.45);
}
.tag.breaking .breaking-dot {
  width: 7px; height: 7px; background: #fff; border-radius: 50%;
  animation: live-pulse-white 1.2s ease-in-out infinite;
}
@keyframes live-pulse-white {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.9); }
  70%     { box-shadow: 0 0 0 5px rgba(255,255,255,0); }
}
.tag.live     { background: rgba(16,185,129,.18); color: #6ee7b7; border: 1px solid rgba(16,185,129,.4); }
.tag.alert    { background: rgba(250,204,21,.2);  color: #fde047; border: 1px solid rgba(250,204,21,.5); }
.tag.report   { background: rgba(148,163,184,.2); color: #cbd5e1; border: 1px solid rgba(148,163,184,.45); }
.tag.advisory { background: rgba(234,88,12,.2); color: #fb923c; border: 1px solid rgba(234,88,12,.4); }

/* On gold ticker (dark mode) — solid opaque tags so they stand out */
html[data-theme="dark"] .tag.live     { background: #14532d; color: #22c55e; border-color: #16a34a; }
html[data-theme="dark"] .tag.alert    { background: #92400e; color: #fde047; border-color: #d97706; }
html[data-theme="dark"] .tag.report   { background: #374151; color: #d1d5db; border-color: #6b7280; }
html[data-theme="dark"] .tag.advisory { background: #7c2d12; color: #fb923c; border-color: #ea580c; }
html[data-theme="dark"] .tag.breaking { background: var(--crimson-dark); color: #fff; }
.tag.live .live-dot {
  width: 6px; height: 6px; background: #22c55e; border-radius: 50%;
  animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
  70%     { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
@keyframes badge-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .75; }
}
.ticker-sep {
  display: inline-block;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); opacity: .5;
  align-self: center;
  margin: 0 .25rem;
}

/* =========================================================
   HEADER
   ========================================================= */
.main-header {
  position: fixed; top: var(--ticker-h); left: 0; width: 100%;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(20px);
  -webkit-backdrop-filter: saturate(1.4) blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem;
  z-index: 200;
  transition: height .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s;
}
.main-header.scrolled {
  height: 58px;
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--border-line);
}

.logo {
  display: flex; align-items: center; gap: .75rem;
  cursor: pointer; flex-shrink: 0;
}
.logo-img-wrap { height: 52px; transition: filter .2s; flex-shrink: 0; }
.logo:hover .logo-img-wrap { filter: drop-shadow(0 0 14px var(--gold-glow)); }
.logo-img { height: 52px; width: auto; display: block; }
.logo-img-dark { display: none; }
html[data-theme="dark"] .logo-img-light { display: none; }
html[data-theme="dark"] .logo-img-dark  { display: block; }
.logo-img { height: 100%; width: auto; }
html[data-theme="dark"] .logo-hex-outer { stroke: #B8BCC4; }
.logo-text {
  display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap;
}
.logo-mark {
  font-family: 'Inter', sans-serif;
  font-size: 1.35rem; font-weight: 800; letter-spacing: .01em;
  color: var(--navy-deep);
  -webkit-text-fill-color: var(--navy-deep);
}
html[data-theme="dark"] .logo-mark {
  background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-dark));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
html[data-theme="dark"] .logo-sub { color: var(--text-muted); }
.logo-sub {
  font-size: .6rem; color: var(--gold);
  letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; margin-top: 2px;
}

/* Nav */
.nav-links {
  display: flex; align-items: center; gap: 1.75rem;
  flex-shrink: 1; white-space: nowrap;
}
.nav-links > a,
.nav-dropdown > .nav-trigger {
  color: var(--text-secondary);
  font-size: .89rem; font-weight: 500;
  padding: .5rem 0; position: relative;
  transition: color .2s;
  background: none; border: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: .35rem;
}
.nav-links > a::after,
.nav-dropdown > .nav-trigger::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; margin: auto;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width .3s var(--ease-out);
}
.nav-links > a:hover,
.nav-dropdown:hover > .nav-trigger,
.nav-links > a.active { color: var(--text-primary); }
.nav-links > a:hover::after,
.nav-dropdown:hover > .nav-trigger::after,
.nav-links > a.active::after { width: 100%; }

.nav-dropdown { position: relative; }
.nav-dropdown-content {
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  position: absolute; top: calc(100% + 6px); left: -1rem;
  background: var(--bg);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  min-width: 300px; padding: .5rem;
  box-shadow: var(--shadow-lg);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s;
}
.nav-dropdown:hover .nav-dropdown-content,
.nav-dropdown:focus-within .nav-dropdown-content {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown-content a {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem;
  color: var(--text-secondary);
  font-size: .87rem;
  border-radius: var(--r-sm);
  transition: background .15s, color .15s;
}
.nav-dropdown-content a:hover {
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--text-primary);
  border-left: 2px solid var(--gold);
  padding-left: calc(.85rem - 2px);
}
.nav-dropdown-content i {
  width: 18px; color: var(--gold-dark);
  font-size: .9rem;
}
.nav-list-item {
  display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem;
  color: var(--text-secondary); font-size: .87rem; border-radius: var(--r-sm);
  cursor: default;
}

/* Right cluster */
.nav-right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

.icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-line);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .2s;
}
.icon-btn:hover { border-color: var(--border-navy); color: var(--text-primary); background: var(--surface); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  padding: .65rem 1.25rem;
  font-size: .88rem; font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer; letter-spacing: .01em;
  transition: transform .2s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s, color .2s, border-color .2s;
  position: relative;
  white-space: nowrap;
}
.btn:active { transform: translateY(0) scale(.98); }

.btn-primary {
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
  color: #fff;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,26,38,.22); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: var(--navy-deep);
  font-weight: 700;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--gold-glow); }

.btn-danger {
  background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(220,38,38,.35), inset 0 1px 0 rgba(255,255,255,.22);
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-dark));
  color: var(--navy-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.4); }

.btn-outline {
  background: transparent; color: var(--text-primary);
  border-color: var(--border-navy);
}
.btn-outline:hover { border-color: var(--text-primary); background: var(--surface); }

.btn-lg { padding: .9rem 1.6rem; font-size: .95rem; }

/* Mobile menu */
.mobile-menu-btn { display: none; }

/* =========================================================
   SECTION SCAFFOLDING
   ========================================================= */
section[data-section] {
  padding: var(--section-y) 2rem;
  border-top: 1px solid var(--border-subtle);
}
section[data-section].tight { padding: calc(var(--section-y) * .7) 2rem; }

.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3rem;
}
.section-head.left { text-align: left; margin-left: 0; }
.section-label {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold-dark);
  margin-bottom: .75rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.section-label::before {
  content: ''; width: 24px; height: 1px; background: var(--gold-dark); opacity: .6;
}
.section-title {
  font-size: clamp(2rem, 3.3vw, 2.75rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.02em;
  text-wrap: balance;
  line-height: 1.12;
}
.section-title em {
  font-style: normal;
  font-weight: 700;
  color: var(--gold-dark);
}
.section-sub {
  margin-top: .75rem;
  color: var(--text-secondary);
  font-size: .98rem;
  line-height: 1.65;
}

/* =========================================================
   FOOTER
   ========================================================= */
.main-footer {
  background: var(--navy-deep);
  color: #94a3b8;
  padding: 4rem 2rem 1.75rem;
  margin-top: 0;
  border-top: 1px solid var(--border-gold);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  max-width: var(--container); margin: 0 auto 2.5rem;
}
.footer-brand .logo-mark {
  font-size: 1.3rem;
  background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-dark));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.footer-brand p {
  font-size: .88rem; color: #94a3b8;
  line-height: 1.6; margin: 1rem 0;
  max-width: 300px;
}
.social-links { display: flex; gap: .5rem; }
.social-links a {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: .9rem;
  transition: all .2s;
}
.social-links a:hover {
  background: var(--gold); color: var(--navy-deep);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.footer-col h4 {
  font-size: .78rem; font-weight: 700;
  color: #fff; text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: .55rem; }
.footer-col ul li a {
  font-size: .85rem; color: #94a3b8;
  transition: color .2s;
}
.footer-col ul li a:hover { color: var(--gold); }

.newsletter-desc {
  font-size: .82rem; color: #94a3b8;
  line-height: 1.55; margin-bottom: .85rem;
}
.newsletter-form {
  display: flex; gap: .4rem;
}
.newsletter-form input {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-sm);
  padding: .55rem .8rem;
  color: #fff; font-size: .85rem;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}
.newsletter-form input::placeholder { color: #5a7290; }
.newsletter-form input:focus { border-color: var(--gold); }
.newsletter-form button {
  background: var(--gold); color: var(--navy-deep);
  border: none; border-radius: var(--r-sm);
  padding: .55rem 1rem;
  font-weight: 700; font-size: .85rem;
  cursor: pointer;
  transition: background .2s;
}
.newsletter-form button:hover { background: var(--gold-light); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  max-width: var(--container); margin: 0 auto;
  color: #5a7290; font-size: .8rem;
}
.footer-bottom a { color: #94a3b8; transition: color .2s; }
.footer-bottom a:hover { color: var(--gold); }
.footer-legal-links { display: flex; gap: 1.25rem; }

/* Back to top */
.back-to-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  width: 42px; height: 42px;
  background: var(--navy-deep);
  color: #fff;
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .95rem;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .3s var(--ease-out);
  box-shadow: var(--shadow-lg);
  z-index: 100;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 60ms);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* =========================================================
   RESPONSIVE — shared furniture (header, nav, logo, ticker,
   footer, container, section padding). Homepage breakpoints
   (1200 / 1050 / 960 / 768 / 640 / 480) are the canonical set
   for every page (CLAUDE.md §2). Page-specific responsive lives
   in home.css / inner.css.
   ========================================================= */
.main-header { flex-wrap: nowrap; min-width: 0; }

@media (max-width: 1200px) {
  .nav-links { gap: 1.25rem; }
}

@media (max-width: 1050px) {
  .nav-links > a, .nav-dropdown > .nav-trigger { font-size: .82rem; }
}

@media (max-width: 960px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --header-h: 60px; }
  .ticker-track { animation-duration: 84s; }

  .main-header { padding: 0 1.25rem; }
  .logo-img-wrap { height: 42px; }
  .logo-img { height: 42px; }
  .logo-mark { font-size: 1.05rem; }

  .nav-links,
  .nav-right .icon-btn:not(.theme-toggle):not(.mobile-menu-btn) { display: none; }
  .nav-right .btn-gold { display: none; }
  .mobile-menu-btn { display: inline-flex; }

  section[data-section] { padding: 4rem 1.5rem; }
  .container { padding: 0 1.5rem; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .main-header { padding: 0 1rem; }
  .logo-mark { font-size: .82rem; letter-spacing: 0; }
  .logo-sub  { font-size: .53rem; letter-spacing: .1em; }
  .logo-img-wrap { height: 36px; }
  .logo-img { height: 36px; }

  section[data-section] { padding: 3.5rem 1rem; }
  .container { padding: 0 1rem; }

  .footer-grid { grid-template-columns: 1fr; }
  .main-footer { padding: 3rem 1rem 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .75rem; }
  .footer-legal-links { justify-content: center; flex-wrap: wrap; gap: .75rem; }
  .newsletter-form { flex-direction: column; }
}

@media (max-width: 480px) {
  :root { --header-h: 56px; }

  .main-header { padding: 0 .875rem; }
  .logo-mark { font-size: .75rem; }
  .logo-img-wrap { height: 32px; }
  .logo-img { height: 32px; }

  section[data-section] { padding: 3rem .875rem; }
  .container { padding: 0 .875rem; }

  .footer-bottom { font-size: .75rem; }
}

/* =========================================================
   MOBILE DRAWER
   ========================================================= */
.mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 998;
  opacity: 0;
  transition: opacity .3s;
}
.mobile-overlay.open { display: block; opacity: 1; }

.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 85vw);
  background: var(--bg);
  border-left: 1px solid var(--border-gold);
  z-index: 999;
  transform: translateX(100%);
  transition: transform .3s var(--ease-out);
  display: flex; flex-direction: column;
  padding: 1.5rem;
  gap: 1.75rem;
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-line);
}
.drawer-header .logo-img-wrap { height: 36px; }
.drawer-header .logo-img { height: 36px; width: auto; object-fit: contain; }

.drawer-nav {
  display: flex; flex-direction: column; gap: .25rem;
}
.drawer-link {
  display: block;
  padding: .9rem 1rem;
  color: var(--text-primary);
  font-size: .97rem; font-weight: 600;
  border-radius: var(--r-sm);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
  transition: background .2s, color .2s;
}
.drawer-link:last-child { border-bottom: none; }
.drawer-link:hover { background: var(--surface-hover); color: var(--gold); }

.drawer-services-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gold-dark); padding: .75rem 1rem .4rem;
}
.drawer-service-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem 1rem; color: var(--text-secondary); font-size: .88rem;
}
.drawer-service-item i { width: 1rem; color: var(--gold-dark); font-size: .85rem; }
.drawer-cta {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border-line);
}
.drawer-cta .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}