/* ==========================================================================
   AEBS — Minimalist (stone / sage) design system
   Warm-stone neutrals, a single muted sage accent, soft rounded cards.
   Applied from the imported Claude Design project "AEBS homepage redesign".
   ========================================================================== */

:root {
  /* stone scale */
  --stone-50: #faf9f7;
  --stone-100: #f3f1ed;
  --stone-200: #e8e5df;
  --stone-300: #d8d3ca;
  --stone-400: #b3ac9f;
  --stone-500: #8a8275;
  --stone-600: #635c50;
  --stone-700: #453f38;
  --stone-800: #2a2622;
  --stone-900: #171512;

  /* accent */
  --sage-500: #6b7a5e;
  --sage-600: #556449;

  /* role tokens (kept under the site's existing var names so inline
     styles across every page don't need to be touched individually) */
  --ink: var(--stone-900);
  --ink-soft: rgba(23, 21, 18, 0.72);
  --neutral-strong: var(--stone-100);      /* header / footer / mobile-menu ground — same as page */
  --neutral-strong-line: var(--stone-200); /* hairline on neutral-strong */
  --neutral-raised: var(--stone-200);      /* emphasis panels, icon bubbles, stat tiles, badges */
  --amber: var(--sage-500);                /* the one accent */
  --amber-dim: var(--sage-600);            /* accent hover/pressed */
  --amber-glow: rgba(107, 122, 94, 0.30);
  --amber-line: rgba(85, 100, 73, 0.30);
  --cream: #ffffff;                        /* raised card surface */
  --paper: var(--stone-100);               /* page background */
  --paper-line: var(--stone-200);          /* hairline on paper/cream */
  --graphite: var(--stone-600);            /* muted text everywhere */

  --cta-bg: #141210;
  --cta-bg-hover: var(--stone-800);
  --cta-text: #ffffff;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(23, 21, 18, 0.04), 0 4px 16px rgba(23, 21, 18, 0.05);
  --shadow-raised: 0 8px 30px rgba(23, 21, 18, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

p, li { color: var(--graphite); }

a { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, opacity 180ms ease; }

img { max-width: 100%; height: auto; }

section { position: relative; }

::selection { background: var(--amber-glow); color: var(--ink); }

/* -------------------------------------------------------------------------
   Type roles
   ------------------------------------------------------------------------- */

.kicker {
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--graphite);
}

.marker-note {
  font-family: inherit;
  font-weight: 500;
  color: var(--graphite);
  line-height: 1.3;
}

.figure-mono {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------
   Header / primary nav
   ------------------------------------------------------------------------- */

.site-header { background: var(--neutral-strong); border-bottom: 1px solid var(--neutral-strong-line); }

.topbar { background: var(--cream); color: var(--graphite); border-bottom: 1px solid var(--paper-line); }
.topbar a { color: var(--graphite); }
.topbar a:hover { color: var(--amber-dim); }

.brand-name { color: var(--ink); }
.brand-name .accent { color: var(--amber-dim); }
.brand-sub { color: var(--graphite); font-family: inherit; letter-spacing: 0.06em; }

.main-nav > ul > li > a,
.main-nav .dropdown-toggle {
  color: var(--graphite);
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0;
}
.main-nav > ul > li > a:hover,
.main-nav .dropdown-toggle:hover { color: var(--ink); background: var(--stone-200); }

.nav-dropdown {
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}
.nav-dropdown a { color: var(--graphite); }
.nav-dropdown a:hover { color: var(--ink); background: var(--stone-100); }

/* No-JS / keyboard fallback: the desktop dropdowns are normally toggled by
   site.js, but must stay reachable when JS fails to load or via Tab alone. */
.main-nav > ul > li:hover > .nav-dropdown,
.main-nav > ul > li:focus-within > .nav-dropdown {
  display: block;
}
/* The dropdown sits mt-3 below its toggle, leaving a gap with nothing
   hoverable in it -- without this bridge, :hover drops the instant the
   cursor crosses that gap and the menu closes before a click can land. */
.main-nav > ul > li.relative::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 1rem;
}

#mobileToggle { background: var(--cta-bg); color: var(--cta-text); }
#mobileMenu { background: var(--neutral-strong); color: var(--ink); border-right: 1px solid var(--neutral-strong-line); }
#mobileMenu a { color: var(--ink); }
#mobileMenu a:hover { color: var(--amber-dim); }
#mobileMenu .brand-sub { color: var(--graphite); }

#mobileBackdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483645 !important;
}
#mobileMenu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 2147483646 !important;
}
#mobileToggle { z-index: 2147483647 !important; }
body.mobile-menu-open { overflow: hidden; }

/* -------------------------------------------------------------------------
   Section grounds
   ------------------------------------------------------------------------- */

.section-dark {
  background: var(--stone-200);
  color: var(--ink);
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--ink); }
.section-dark p, .section-dark li { color: var(--graphite); }

.section-paper { background: var(--paper); }
.section-cream { background: var(--cream); }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 1.5rem 4rem;
}
.page-hero::before { content: none; }
.page-hero > * { position: relative; z-index: 1; }

.home-hero {
  position: relative;
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
}
.home-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(23, 21, 18, 0.82) 2%, rgba(23, 21, 18, 0.5) 46%, rgba(23, 21, 18, 0.26) 100%),
    linear-gradient(100deg, rgba(23, 21, 18, 0.5), rgba(23, 21, 18, 0.16) 60%);
}
.home-hero__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.9) brightness(0.72) contrast(1.02);
}
.home-hero__content { position: relative; z-index: 1; }

.timer-readout {
  font-family: inherit;
  font-weight: 600;
  color: var(--cream);
  font-size: 1rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
}
.timer-readout .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage-500);
  box-shadow: 0 0 6px var(--sage-500);
}

/* -------------------------------------------------------------------------
   Panels / cards — soft rounded surfaces with a gentle lift
   ------------------------------------------------------------------------- */

.panel {
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: 1.85rem;
  box-shadow: var(--shadow-card);
}
.panel h2, .panel h3 { color: var(--ink); }

.panel-cream { background: var(--cream); border-color: var(--paper-line); }

.panel-dark {
  background: var(--neutral-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: 1.85rem;
  color: var(--ink);
}
.panel-dark h2, .panel-dark h3 { color: var(--ink); }
.panel-dark p, .panel-dark li { color: var(--graphite); }

.panel-lede {
  position: relative;
  padding-left: 1.75rem;
  border-left: 2px solid var(--amber-line);
}

.tab-label {
  display: inline-block;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-dim);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-pill);
  padding: 0.2em 0.75em;
  margin-bottom: 0.75rem;
}
.panel-dark .tab-label { color: var(--amber-dim); border-color: var(--amber-line); }

/* -------------------------------------------------------------------------
   Stat tiles
   ------------------------------------------------------------------------- */

.stat-tile {
  border: 1px solid var(--paper-line);
  background: var(--cream);
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-lg);
}
.value {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: 2.25rem;
  line-height: 1;
}
.stat-tile .label { font-size: 0.85rem; color: var(--graphite); margin-top: 0.35rem; }

.section-dark .stat-tile { background: var(--cream); border-color: var(--paper-line); }
.section-dark .stat-tile .value { color: var(--ink); }
.section-dark .stat-tile .label { color: var(--graphite); }

/* -------------------------------------------------------------------------
   Buttons — pill-shaped, matching the imported Button component
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.5em;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0;
  font-size: 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: all 180ms ease;
}

.btn-amber { background: var(--cta-bg); color: var(--cta-text); font-weight: 600; }
.btn-amber:hover { background: var(--cta-bg-hover); box-shadow: 0 0 0 4px rgba(20, 18, 16, 0.12); }

.btn-outline-dark { border-color: var(--stone-300); color: var(--ink); background: transparent; }
.btn-outline-dark:hover { background: var(--stone-200); }

.btn-outline-light { border-color: rgba(255, 255, 255, 0.4); color: var(--ink); background: rgba(255, 255, 255, 0.9); }
.btn-outline-light:hover { background: #ffffff; border-color: rgba(255, 255, 255, 0.6); }

/* -------------------------------------------------------------------------
   Prose (long-form policy / doctrine pages)
   ------------------------------------------------------------------------- */

.develop-prose h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  color: var(--ink);
  margin-top: 0.5rem;
  margin-bottom: 0.6rem;
}
.develop-prose h3 {
  margin-top: 2.2rem;
  color: var(--ink);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.develop-prose h3::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--amber-dim);
  flex-shrink: 0;
}
.develop-prose h4 {
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: 0;
  margin-top: 1.6rem;
}
.develop-prose p, .develop-prose li {
  font-family: inherit;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--graphite);
  text-transform: none;
  letter-spacing: normal;
  max-width: 68ch;
}
.develop-prose ul { margin-top: 0.6rem; padding-left: 1.4rem; list-style: disc; max-width: 68ch; }
.develop-prose hr { border: none; border-top: 1px dashed var(--paper-line); margin: 2.2rem 0; }

.develop-table {
  margin-top: 1rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  border-collapse: collapse;
}
.develop-table thead tr { background: var(--cta-bg); }
.develop-table th {
  color: #ffffff;
  font-family: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  padding: 0.75rem 1rem;
  text-align: left;
}
.develop-table td {
  border-top: 1px solid var(--paper-line);
  font-size: 0.95rem;
  color: var(--ink-soft);
  padding: 0.7rem 1rem;
}
.develop-table tbody tr:nth-child(even) { background: var(--stone-50); }
.develop-table.fee-table td:last-child { text-align: right; font-family: inherit; font-weight: 600; }
.develop-table tr.total td { font-weight: 700; color: var(--ink); }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.site-footer { background: var(--neutral-strong); color: var(--graphite); border-top: 1px solid var(--neutral-strong-line); }
.site-footer h3 {
  color: var(--ink);
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  font-weight: 700;
}
.site-footer a { color: var(--graphite); }
.site-footer a:hover { color: var(--amber-dim); }
.site-footer .brand-name { color: var(--ink); }

.ledger-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  border-bottom: 1px dashed var(--paper-line);
  padding: 0.55rem 0;
  font-family: inherit;
  font-size: 0.9rem;
}
.ledger-row .k { color: var(--graphite); opacity: 0.75; min-width: 5.5rem; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; font-weight: 600; }
.ledger-row .v { color: var(--ink); }
.ledger-row .v a:hover { color: var(--amber-dim); }

/* -------------------------------------------------------------------------
   Develop reveal — scroll-triggered surfacing animation
   ------------------------------------------------------------------------- */

.develop-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease, transform 0.7s ease;
}
.develop-reveal.is-developed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .develop-reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   Utility icon sizing (Phosphor)
   ------------------------------------------------------------------------- */

.ph, [class^="ph-"], [class*=" ph-"] { line-height: 1; vertical-align: -0.08em; }