/* ============================================================
   THE CLARITY CODE — SHARED DESIGN SYSTEM
   Editorial executive aesthetic. Navy-dominant.
   Cormorant Garamond + Manrope. Brass + signal-red accents.
   ============================================================ */

:root{
  --navy-950:#050E29;
  --navy-900:#0A1A3F;
  --navy-800:#0F2150;
  --navy-700:#152C66;
  --navy-600:#1E3A8A;

  --brass:#C9A96A;
  --brass-light:#E2CC9A;
  --brass-deep:#9C7E44;

  --red:#D33828;     /* compass-needle accent, used sparingly */

  --silver:#C7CFDD;
  --steel:#8390AE;

  --ivory:#F4EFE5;
  --cream:#F7F3EC;
  --paper:#FCFAF6;

  --ink:#0C1322;
  --ink-soft:#3A4257;
  --muted:#6B7388;

  --hairline:rgba(255,255,255,.10);
  --hairline-dk:rgba(10,26,63,.10);

  --shadow-sm:0 1px 2px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.18);
  --shadow-md:0 1px 2px rgba(0,0,0,.18), 0 14px 30px rgba(0,0,0,.28);
  --shadow-lg:0 4px 8px rgba(0,0,0,.22), 0 36px 70px rgba(0,0,0,.4);
  --shadow-glow-brass:0 0 0 1px rgba(201,169,106,.4), 0 12px 28px rgba(201,169,106,.25);

  --maxw:1200px;
}

*{ box-sizing:border-box }
html, body{ margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  font-family:'Manrope', ui-sans-serif, sans-serif;
  font-weight:400;
  color:#E8ECF5;
  background:var(--navy-950);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit }

/* Typography primitives ====================================== */
.serif{ font-family:'Cormorant Garamond', 'EB Garamond', Georgia, serif }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace }

h1, h2, h3, h4{ font-family:'Cormorant Garamond', Georgia, serif; font-weight:500; letter-spacing:-.005em }

.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Manrope', sans-serif; font-weight:600;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brass);
}
.kicker::before, .kicker.flank::after{
  content:""; width:28px; height:1px; background:var(--brass);
  display:inline-block;
}
.kicker.solo::before{ display:none }
.kicker.solo::after{ content:""; width:28px; height:1px; background:var(--brass); display:inline-block }

/* Container ================================================== */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 22px }
.container-narrow{ max-width:960px; margin:0 auto; padding:0 22px }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(5,14,41,.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid rgba(201,169,106,.15);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 22px;
  max-width:var(--maxw); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:11px;
  min-width:0;
}
.brand .logo-mark{
  width:36px; height:36px; flex:0 0 auto;
  color:var(--silver);
}
.brand-text{
  display:flex; flex-direction:column;
  line-height:1.05;
}
.brand-text .b-name{
  font-family:'Cormorant Garamond', serif;
  font-size:18px; font-weight:600;
  color:#fff;
  letter-spacing:.04em;
}
.brand-text .b-sub{
  font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brass);
  font-weight:600;
}
.topbar .class-info{
  display:none;
  align-items:center; gap:12px;
  font-family:'Manrope', sans-serif;
  font-size:13px; color:rgba(255,255,255,.78);
}
@media(min-width:680px){ .topbar .class-info{ display:inline-flex } }
.topbar .class-info .live-dot{
  position:relative;
  width:8px; height:8px; border-radius:50%;
  background:var(--red);
}
.topbar .class-info .live-dot::after{
  content:""; position:absolute; inset:-4px;
  border-radius:50%;
  border:1.5px solid var(--red);
  opacity:0;
  animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%{ transform:scale(.5); opacity:.8 }
  100%{ transform:scale(1.8); opacity:0 }
}
.topbar .class-info .lbl{
  text-transform:uppercase; letter-spacing:.2em; font-size:10px;
  color:var(--brass); font-weight:600;
}
.topbar .class-info b{ color:#fff; font-weight:600 }
.topbar .class-info .sep{ opacity:.3 }

.topbar .class-info.compact{
  display:inline-flex;
  font-size:11.5px;
  gap:8px;
}
@media(min-width:680px){
  .topbar .class-info.compact{ display:none }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:18px 28px; min-height:56px;
  font-family:'Manrope', sans-serif;
  font-weight:700; font-size:15px;
  letter-spacing:.02em;
  border-radius:999px;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  cursor:pointer;
  text-align:center;
}
.btn-primary{
  background:linear-gradient(180deg, #E2CC9A 0%, var(--brass) 55%, var(--brass-deep) 100%);
  color:var(--navy-950);
  box-shadow:0 10px 28px rgba(201,169,106,.28), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-primary:hover{
  transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 14px 32px rgba(201,169,106,.45), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-primary .arrow{ transition:transform .25s ease }
.btn-primary:hover .arrow{ transform:translateX(5px) }

/* shimmer accent */
.btn-primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-110%);
  pointer-events:none;
  display:none; /* Disabled shimmer effect to remove parallelogram artifacts */
}
.btn-primary:hover::after{
  transform:translateX(110%);
  transition:transform 1.1s ease;
  display:none; /* Disabled shimmer effect to remove parallelogram artifacts */
}

.btn-ghost{
  background:transparent; color:rgba(255,255,255,.82);
  padding:14px 18px;
  font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.2);
  border-radius:0;
}
.btn-ghost:hover{ color:#fff; border-color:var(--brass) }

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
section{ position:relative }
.section{ padding:72px 0 }
@media(min-width:760px){ .section{ padding:108px 0 } }

.section-head{
  text-align:center;
  max-width:760px; margin:0 auto 56px;
}
.section-head h2{
  font-size:clamp(34px, 5.4vw, 56px);
  line-height:1.05;
  margin:18px 0 16px;
  letter-spacing:-.015em;
  color:#fff;
  font-weight:500;
}
.section-head h2 em{
  font-style:italic; color:var(--brass-light);
  font-family:'Cormorant Garamond', serif;
}
.section-head p{
  color:rgba(232,236,245,.7);
  font-size:17px; margin:0 auto; max-width:560px;
}

/* surface variants */
.surface-ivory{
  background:linear-gradient(180deg, var(--ivory) 0%, #ECE5D2 100%);
  color:var(--ink);
}
.surface-ivory h2, .surface-ivory h3, .surface-ivory h4{ color:var(--navy-900) }
.surface-ivory .section-head p{ color:var(--ink-soft) }
.surface-ivory .kicker{ color:var(--brass-deep) }
.surface-ivory .kicker::before, .surface-ivory .kicker.solo::after{ background:var(--brass-deep) }

.surface-deep{
  background:
    radial-gradient(70% 60% at 50% 0%, #122465 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
}

/* atmospheric overlay (subtle grain on dark surfaces) */
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.5; z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:#030A1F;
  color:rgba(255,255,255,.6);
  padding:50px 0 90px;
  font-size:13.5px;
  border-top:1px solid rgba(201,169,106,.15);
}
@media(min-width:760px){ footer{ padding:60px 0 50px } }
.footer-grid{
  display:grid; grid-template-columns:1fr; gap:30px;
  align-items:start;
}
@media(min-width:760px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr; gap:50px } }
.footer-blurb{
  color:rgba(255,255,255,.6);
  font-size:13.5px;
  margin:16px 0 0; max-width:360px; line-height:1.6;
}
.footer-col h4{
  font-family:'Manrope', sans-serif; font-weight:600;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); margin:0 0 14px;
}
.footer-col a{
  display:block; padding:5px 0; color:rgba(255,255,255,.65);
  transition:color .15s ease;
}
.footer-col a:hover{ color:#fff }
.footer-bottom{
  margin-top:38px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; gap:8px;
  font-size:12px; color:rgba(255,255,255,.4);
  text-align:center;
}
@media(min-width:760px){
  .footer-bottom{ flex-direction:row; justify-content:space-between; text-align:left }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:none }
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes scrollHint{
  0%{ transform:translateY(0); opacity:.4 }
  50%{ transform:translateY(6px); opacity:1 }
  100%{ transform:translateY(12px); opacity:0 }
}

/* Staggered load reveal (above-the-fold hero) */
.reveal-on-load{ opacity:0; animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards }
.d-1{ animation-delay:.05s }
.d-2{ animation-delay:.18s }
.d-3{ animation-delay:.32s }
.d-4{ animation-delay:.46s }
.d-5{ animation-delay:.6s }
.d-6{ animation-delay:.74s }
.d-7{ animation-delay:.88s }

/* Scroll-reveal — section-level fallback */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1) }
.reveal.in{ opacity:1; transform:none }

/* Per-element staggered reveal — apply data-stagger to a container,
   children fade up sequentially as the section enters the viewport. */
[data-stagger] > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1);
}
[data-stagger].staggered-in > *{ opacity:1; transform:none }
[data-stagger].staggered-in > *:nth-child(1){ transition-delay:.00s }
[data-stagger].staggered-in > *:nth-child(2){ transition-delay:.08s }
[data-stagger].staggered-in > *:nth-child(3){ transition-delay:.16s }
[data-stagger].staggered-in > *:nth-child(4){ transition-delay:.24s }
[data-stagger].staggered-in > *:nth-child(5){ transition-delay:.32s }
[data-stagger].staggered-in > *:nth-child(6){ transition-delay:.40s }
[data-stagger].staggered-in > *:nth-child(7){ transition-delay:.48s }
[data-stagger].staggered-in > *:nth-child(8){ transition-delay:.56s }
[data-stagger].staggered-in > *:nth-child(9){ transition-delay:.64s }
[data-stagger].staggered-in > *:nth-child(n+10){ transition-delay:.72s }

/* Selection */
::selection{ background:var(--brass); color:var(--navy-950) }

/* ============================================================
   COMPASS LOGO IMAGE (replaces inline SVG)
   ============================================================ */
.brand .logo-mark{
  width:42px; height:42px; flex:0 0 auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
@media(min-width:680px){ .brand .logo-mark{ width:46px; height:46px } }

/* ============================================================
   MOBILE STICKY CTA (for landing only — opt-in via class)
   ============================================================ */
.mobile-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(5,14,41,0) 0%, rgba(5,14,41,.78) 30%, var(--navy-950) 100%);
  display:flex; justify-content:center;
  pointer-events:none;
  transition:transform .35s cubic-bezier(.3,.7,.3,1), opacity .35s ease;
}
.mobile-sticky .btn{
  pointer-events:auto;
  width:100%; max-width:480px;
  min-height:54px; padding:14px 22px; font-size:15px;
}
.mobile-sticky.is-hidden{
  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
}
.mobile-sticky.is-hidden .btn{ pointer-events:none }
@media(min-width:760px){ .mobile-sticky{ display:none } }