@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Sora:wght@200;300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root {
  --bg-deep:       #050506;
  --bg:            #0a0a0c;
  --bg-raised:     #0f1012;
  --bg-card:       #121315;
  --bg-card-hover: #17181b;
  --surface:       #1b1c1f;
  --border:        #1f2024;
  --border-mid:    #2a2b30;
  --border-hover:  #38393f;
  --text:          #eae9e3;
  --text-sub:      #9c9ca0;
  --text-dim:      #606065;
  --text-faint:    #3e3e43;
  --gold:          #c9a55c;
  --gold-light:    #dfc07a;
  --gold-dim:      rgba(201,165,92,0.12);
  --gold-glow:     rgba(201,165,92,0.06);
  --blue:          #6aadcf;
  --blue-dim:      rgba(106,173,207,0.10);
  --green:         #6acf8a;
  --red:           #cf6a6a;
  --serif:         'Cormorant Garamond', 'Georgia', serif;
  --sans:          'Sora', sans-serif;
  --mono:          'Fira Code', monospace;
  --ease:          cubic-bezier(.22,.61,.36,1);
  --ease-bounce:   cubic-bezier(.34,1.56,.64,1);
  --max-w:         1120px;
  --radius:        12px;
  --radius-lg:     18px;
}

/* ═══════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
::selection{background:var(--gold);color:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
hr{border:none;height:1px;background:var(--border);margin:48px 0}

/* ═══════════════════════════════════════════════
   GRAIN + VIGNETTE
   ═══════════════════════════════════════════════ */
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}
body::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 50%, rgba(5,5,6,0.45) 100%);
}

/* ═══════════════════════════════════════════════
   PAGE TRANSITION
   ═══════════════════════════════════════════════ */
.page-curtain{
  position:fixed;inset:0;z-index:10000;pointer-events:none;
  background:var(--bg-deep);
  animation:curtainLift .55s .05s var(--ease) forwards;
}
@keyframes curtainLift{to{opacity:0}}

/* ═══════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════ */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(24px,4vw,56px);
  background:rgba(10,10,12,.78);
  backdrop-filter:blur(28px) saturate(1.5);
  border-bottom:1px solid var(--border);
  transition:box-shadow .35s, border-color .35s;
}
.topnav.scrolled{box-shadow:0 6px 44px rgba(0,0,0,.5);border-color:var(--border-mid)}

.topnav-brand{
  font-family:var(--serif);font-size:1.55rem;font-weight:600;
  letter-spacing:-.02em;
}
.topnav-brand mark{
  background:none;color:var(--gold);
}

.topnav-menu{list-style:none;display:flex;align-items:center;gap:6px}

.topnav-menu a{
  font-size:.78rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-sub);padding:8px 15px;border-radius:6px;
  transition:color .25s, background .25s;position:relative;
}
.topnav-menu a:hover{color:var(--text);background:var(--gold-glow)}
.topnav-menu a[aria-current="page"]{color:var(--gold);background:var(--gold-dim)}

.topnav-menu .cta-link{
  margin-left:12px;padding:9px 24px;
  background:var(--gold);color:var(--bg-deep);font-weight:600;border-radius:6px;
  transition:background .25s, transform .25s, box-shadow .25s;
}
.topnav-menu .cta-link:hover{
  background:var(--gold-light);transform:translateY(-1px);
  box-shadow:0 6px 24px var(--gold-dim);
}

/* hamburger */
.burger{display:none;background:0;border:0;padding:6px;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:1.5px;background:var(--text);border-radius:2px;transition:all .3s}

/* mobile overlay */
.mob-overlay{
  display:none;position:fixed;inset:0;z-index:999;
  background:rgba(5,5,6,.96);backdrop-filter:blur(32px);
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.mob-overlay.open{display:flex}
.mob-overlay a{
  font-family:var(--serif);font-size:2.2rem;font-weight:400;
  color:var(--text-sub);padding:10px 28px;transition:color .3s;
}
.mob-overlay a:hover,.mob-overlay a[aria-current="page"]{color:var(--gold)}
.mob-close{position:absolute;top:18px;right:24px;background:0;border:0;color:var(--text);font-size:2.2rem;padding:8px}

/* ═══════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════ */
.pg-header{
  padding:clamp(120px,16vh,160px) clamp(24px,4vw,56px) 56px;
  max-width:var(--max-w);margin:0 auto;width:100%;
  position:relative;overflow:hidden;
}

.pg-header::before{
  content:'';position:absolute;top:-180px;right:-140px;
  width:500px;height:500px;
  background:radial-gradient(circle,var(--gold-dim) 0%,transparent 70%);
  pointer-events:none;
}

.pg-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.68rem;color:var(--gold);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;
  opacity:0;animation:riseIn .7s .15s forwards;
}
.pg-eyebrow::before{content:'';width:26px;height:1px;background:var(--gold)}

.pg-h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.6rem,5.5vw,4.4rem);
  line-height:1.1;letter-spacing:-.025em;margin-bottom:18px;
  opacity:0;animation:riseIn .7s .3s forwards;
}
.pg-h1 em{font-style:italic;color:var(--gold)}

.pg-lead{
  font-size:1.06rem;color:var(--text-sub);line-height:1.75;max-width:540px;
  opacity:0;animation:riseIn .7s .45s forwards;
}

/* ═══════════════════════════════════════════════
   MAIN CONTENT WRAPPER
   ═══════════════════════════════════════════════ */
.pg-body{
  flex:1;padding:0 clamp(24px,4vw,56px) 120px;
  max-width:var(--max-w);margin:0 auto;width:100%;
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.site-foot{
  margin-top:auto;border-top:1px solid var(--border);
  padding:44px clamp(24px,4vw,56px);
}
.foot-inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
}
.foot-copy{font-size:.78rem;color:var(--text-dim)}
.foot-copy mark{background:none;color:var(--gold)}

.foot-links{display:flex;gap:28px}
.foot-links a{font-size:.78rem;color:var(--text-dim);transition:color .3s}
.foot-links a:hover{color:var(--gold)}

/* ═══════════════════════════════════════════════
   SHARED COMPONENTS
   ═══════════════════════════════════════════════ */

/* -- card -- */
.crd{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:all .45s var(--ease);
}
.crd:hover{
  border-color:var(--border-hover);background:var(--bg-card-hover);
  transform:translateY(-5px);
  box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 0 1px var(--gold-dim);
}

/* -- buttons -- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:.86rem;
  padding:14px 30px;border-radius:8px;border:none;
  transition:all .3s var(--ease);letter-spacing:.015em;
}
.btn-gold{background:var(--gold);color:var(--bg-deep)}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 8px 28px var(--gold-dim)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

/* -- section sub-headings -- */
.sub-h{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.6rem,3vw,2.2rem);
  line-height:1.15;letter-spacing:-.015em;margin-bottom:14px;
}
.sub-h em{font-style:italic;color:var(--gold)}

.sub-lead{color:var(--text-sub);font-size:.94rem;line-height:1.7;margin-bottom:44px}

/* ═══════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════ */
@keyframes riseIn{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.reveal{opacity:0;transform:translateY(26px);transition:all .75s var(--ease)}
.reveal.vis{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media(max-width:900px){
  .topnav-menu{display:none}
  .burger{display:flex}
  .foot-inner{flex-direction:column;align-items:flex-start}
}