/* ============================================================
   ALCHEMY MANAGEMENT GROUP — SHARED STYLESHEET
   Applies to every page. Page-specific CSS stays inline.
   Design system: dark near-black, single gold accent,
   Cormorant Garamond display + DM Sans body.
   ============================================================ */

/* ---- TOKENS ---- */
:root {
  --gold:       #C49A2A;
  --gold-light: #E2B84A;
  --gold-pale:  rgba(196,154,42,0.08);
  --black:      #080808;
  --dark:       #0E0E10;
  --dark2:      #161619;
  --dark3:      #1E1E22;
  --off-white:  #F0EBE0;
  --muted:      rgba(240,235,224,0.52);
  --border:     rgba(196,154,42,0.18);

  --pad-h:      60px;   /* horizontal section padding */
  --pad-v:      120px;  /* vertical section padding */
}

/* ---- RESET ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }

/* ---- BASE ---- */
body {
  background: var(--black);
  color: var(--off-white);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- TYPOGRAPHY ---- */
h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 5vw, 78px);
  font-weight: 300;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--off-white);
}
h1 em { font-style:italic; color:var(--gold-light); }

h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--off-white);
}
h2 em { font-style:italic; color:var(--gold-light); }

h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--off-white);
}

h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--off-white);
}

p { line-height: 1.78; color: var(--muted); }

a { color: var(--gold); }

/* ============================================================
   NAV
   Fixed top bar: logo image left, links right, hamburger mobile.
   Inner pages use background:rgba(8,8,8,0.97) + border-bottom.
   Homepage uses gradient (overridden inline).
   ============================================================ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--pad-h);
  background: rgba(8,8,8,0.97);
  border-bottom: 1px solid var(--border);
}

.nav-logo { display:block; line-height:0; flex-shrink:0; }
.nav-logo img {
  height: 72px !important;   /* !important overrides per-page inline height:54px */
  width: auto !important;
  max-width: none;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(196,154,42,0.28));
  transition: filter 0.3s;
}
.nav-logo:hover img { filter: drop-shadow(0 0 14px rgba(196,154,42,0.45)); }
.nav-logo:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 0.25s;
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after { width: 100%; }
.nav-links a:hover,
.nav-links a.active { color: var(--gold-light); }
.nav-links a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.nav-cta {
  border: 1px solid rgba(196,154,42,0.45);
  color: var(--gold) !important;
  padding: 9px 22px;
  border-radius: 2px;
  font-size: 11px !important;
  letter-spacing: 0.14em;
  transition: background 0.25s, color 0.25s !important;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.nav-cta:hover {
  background: var(--gold) !important;
  color: var(--black) !important;
}

/* Hamburger button — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
  z-index: 201;
}
.nav-toggle span {
  width: 24px;
  height: 1.5px;
  background: var(--gold);
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }

/* ============================================================
   GOLD SHIMMER ACCENT SYSTEM
   .eyebrow wraps .eyebrow-line and .gold-dot as its first children.
   JS adds .shimmer class when element enters reading zone.
   ============================================================ */

/* The horizontal line — sweeps in with a brief brightness flare */
.eyebrow-line {
  display: inline-block;
  flex-shrink: 0;
  width: 40px;
  height: 1px;
  background: var(--gold);
  transform-origin: left center;
  opacity: 0;
}
.eyebrow-line.shimmer {
  animation: lineFocus 0.85s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes lineFocus {
  0%   { opacity:0; transform:scaleX(0); filter:brightness(1); }
  22%  { opacity:1; transform:scaleX(1.04); filter:brightness(1.9); box-shadow:0 0 4px 2px rgba(228,184,74,0.28); }
  65%  { opacity:1; transform:scaleX(1); filter:brightness(1.2); box-shadow:0 0 2px 0 rgba(196,154,42,0.1); }
  100% { opacity:1; transform:scaleX(1); filter:brightness(1); box-shadow:none; }
}

/* The dot — blooms from a soft glow into a crisp point */
.gold-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  position: relative;
}
.gold-dot::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-light);
  opacity: 0;
}
.gold-dot.shimmer {
  animation: dotSettle 0.95s cubic-bezier(.22,.68,0,1.2) forwards;
}
.gold-dot.shimmer::after {
  animation: dotBloom 0.95s ease-out forwards;
}
@keyframes dotSettle {
  0%   { opacity:0; transform:scale(0); }
  22%  { opacity:1; transform:scale(1.6); }
  60%  { opacity:1; transform:scale(0.95); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes dotBloom {
  0%   { opacity:0;    width:5px;  height:5px; }
  15%  { opacity:0.35; width:14px; height:14px; filter:blur(3px); }
  55%  { opacity:0.1;  width:10px; height:10px; filter:blur(5px); }
  100% { opacity:0;    width:5px;  height:5px;  filter:blur(0); }
}

/* Eyebrow row */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
  font-weight: 400;
}

/* Legacy .section-eyebrow — static gold line via ::before, no shimmer.
   Pages not yet updated to the new .eyebrow pattern still look correct. */
.section-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-eyebrow::before {
  content: "";
  display: block;
  width: 40px; height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background: var(--gold);
  color: var(--black);
  padding: 14px 34px;
  border: none;
  border-radius: 2px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.25s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-primary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.btn-ghost {
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 14px 34px;
  border-radius: 2px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  font-weight: 300;
  transition: border-color 0.25s, color 0.25s;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-light); }
.btn-ghost:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ============================================================
   SCROLL REVEAL
   JS adds .visible when element enters viewport.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--black);
  padding: 56px var(--pad-h) 36px;
  border-top: 1px solid var(--border);
}
.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.footer-brand {}
.footer-logo img {
  height: 42px;
  width: auto;
  display: block;
  opacity: 0.75;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 6px rgba(196,154,42,0.2));
}
.footer-tagline {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240,235,224,0.28);
}
.footer-cols {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}
.footer-col h4 {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
}
.footer-col a,
.footer-col p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.85;
  text-decoration: none;
  display: block;
  transition: color 0.25s;
  font-weight: 300;
}
.footer-col a:hover { color: var(--gold-light); }
.footer-col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 1px; }
.footer-legal {
  border-top: 1px solid rgba(196,154,42,0.1);
  padding-top: 22px;
  font-size: 11px;
  color: rgba(240,235,224,0.22);
  line-height: 1.65;
  max-width: 720px;
}

/* ============================================================
   RESPONSIVE — TABLET  (max-width: 1024px)
   ============================================================ */
@media (max-width:1024px) {
  :root { --pad-h:36px; --pad-v:80px; }

  nav { padding:10px var(--pad-h); }
  .nav-logo img { height: 60px !important; }
  .nav-links { gap:22px; }
  .nav-links a { font-size:11px; }

  footer { padding:48px var(--pad-h) 30px; }
  .footer-cols { gap:36px; }
}

/* ============================================================
   RESPONSIVE — MOBILE  (max-width: 760px)
   ============================================================ */
@media (max-width:760px) {
  :root { --pad-h:22px; --pad-v:64px; }

  /* Nav: hide links, show hamburger */
  nav { padding:12px var(--pad-h); }
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh; height: 100dvh;
    width: 78%; max-width: 300px;
    background: var(--dark2);
    border-left: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 48px 36px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
    z-index: 199;
    overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 15px; letter-spacing: 0.1em; min-height: 44px; display:flex; align-items:center; }
  .nav-links a:not(.nav-cta)::after { display:none; }
  .nav-cta { margin-top: 8px; min-height:48px; }
  .nav-toggle { display: flex; }
  .nav-logo img { height: 48px !important; }

  /* Hamburger: enforce a minimum 44px tap target and centre the bars.
     Higher specificity than the per-page inline .nav-toggle rule. */
  nav .nav-toggle {
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center;
    box-sizing: border-box;
  }

  /* Prevent iOS Safari auto-zoom on focus: form controls must be >=16px.
     !important overrides the 14px set in per-page inline styles. */
  input, select, textarea { font-size: 16px !important; }

  /* Footer: stack */
  .footer-inner { flex-direction: column; gap: 32px; }
  .footer-cols { flex-direction: column; gap: 24px; }

  /* ---- MOBILE READABILITY ----------------------------------------
     Per-page inline styles set card body text to 13-15px.
     Minimum 16px on mobile — essential for readability on a phone,
     especially for an older audience. !important wins the cascade.
  ----------------------------------------------------------------- */

  /* Card and section body paragraphs */
  .approach-card p,
  .portfolio-card .pc-desc,
  .risk p,
  .reason p,
  .tombstone-desc,
  .tombstone p,
  .team-card p,
  .mistake p,
  .mandate-item p,
  .cap-card p,
  .ethos-card p,
  .tl-desc,
  .advisory-link-text p,
  .advisory-link-cta p { font-size: 16px !important; line-height: 1.78; }

  /* FAQ answers and process steps */
  .faq-a p,
  .step-content p,
  .step-content .detail { font-size: 15px !important; line-height: 1.75; }

  /* Detail metadata (investments page table rows) */
  .pc-detail-value { font-size: 15px !important; }

  /* Pull-quote / wall italics */
  .wall { font-size: 15px !important; }

  /* Hero and section intro — already 15px in many pages; ensure minimum */
  .hero-sub,
  .section-intro { font-size: 16px !important; }

  /* Article body (insights guide) */
  .article-body p,
  .article-body li { font-size: 16px !important; line-height: 1.85; }

  /* Proof items (selling / buying hero panel) */
  .proof-text { font-size: 18px !important; }
}

/* ============================================================
   REDUCED MOTION
   All animations and transitions off. Shimmer elements show static.
   ============================================================ */
@media (prefers-reduced-motion:reduce) {
  .reveal,
  .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .eyebrow-line {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .gold-dot {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .gold-dot::after { display:none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}