/* Self-hosted fonts — drop woff2 files into /fonts/ (see fonts/README.txt) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-600.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/cormorant-garamond-700.woff2') format('woff2')}
/* Inter as variable font covers all weights including 650/750 */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter.woff2') format('woff2')}

:root{
  --crimson:#B11135;--crimson-dark:#8C0E2A;--gray:#6b6e73;
  --ink:#14171c;--ink-2:#2a2f38;--paper:#ffffff;--mist:#f5f6f8;
  --quantum:#3aa0ff;--quantum-deep:#0b1f3a;--cyan:#77dff2;--green:#1d7a44;--maxw:1200px;
  /* spacing scale */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-9:36px;--space-10:40px;--space-11:44px;--space-12:48px;--space-13:52px;--space-14:56px;--space-15:60px;--space-16:64px;--space-20:80px;
  /* semantic/functional spacing */
  --gap-sm:var(--space-4);--gap:var(--space-6);--gap-lg:var(--space-10);--section-gap:52px;--space-section:52px;--space-block:clamp(56px,7vw,104px);--space-card-pad:28px;--space-card-gap:18px;--space-list-gap:10px;--space-stack-sm:8px;--space-stack-md:12px;--space-stack-lg:16px;--space-stack-xl:20px;
  /* borders, radius, elevation, motion */
  --line:rgba(0,0,0,.09);
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-pill:100px;
  --shadow:0 24px 50px -40px rgba(0,0,0,.35);
  --dur-fast:.2s;--dur-base:.25s;--ease-standard:cubic-bezier(.2,.7,.2,1);
  /* type scale */
  --fs-hero:clamp(3.6rem,8vw,7.3rem);--fs-display-lg:clamp(2.4rem,4.7vw,4.1rem);
  --fs-display:clamp(1.9rem,3.6vw,2.8rem);--fs-display-sm:clamp(1.75rem,3.3vw,2.5rem);
  --fs-subhead:clamp(1.5rem,2.6vw,1.95rem);--fs-heading:1.5rem;
  --fs-body-lg:1.125rem;--fs-body:1rem;--fs-caption:0.875rem;--fs-label:0.75rem;
  /* responsive breakpoints — reference only; CSS can't use var() in @media, so media queries use the literal px (1024/768/480) */
  --bp-lg:1024px;--bp-md:768px;--bp-sm:480px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;padding-top:88px}
body.nav-open{overflow:hidden}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.14;letter-spacing:.2px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-size:var(--fs-label);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson);margin-bottom:var(--space-3)}
.eyebrow--light{color:#fff}
.eyebrow--cyan{color:var(--cyan)}
.mist{background:var(--mist)}
section.block{padding:var(--space-block) 0}
/* Vertical rhythm when a section stacks more than one .wrap container */
section > .wrap + .wrap{margin-top:var(--section-gap)}
/* Flow: predictable vertical rhythm between stacked elements (buttons, text, etc.) */
.flow > * + *{margin-top:var(--flow-space,var(--space-6))}
section.dark{background:#0a1119;color:#fff}
section.dark .eyebrow{color:var(--cyan)}
.block--center{text-align:center}
.section-head{max-width:760px;margin-bottom:var(--section-gap)}
.section-head h2{font-size:var(--fs-display);margin:var(--space-2) 0 var(--space-3)}
.section-head p{color:var(--ink-2);font-size:var(--fs-body);font-weight:300}
.btn{display:inline-block;background:var(--crimson);color:#fff;padding:var(--space-3) var(--space-5);border-radius:var(--r-pill);font-size:var(--fs-label);font-weight:600;letter-spacing:.02em;transition:var(--dur-base);border:1px solid var(--crimson);cursor:pointer}
.btn:hover{background:var(--crimson-dark);border-color:var(--crimson-dark)}
.reveal{opacity:0;transform:translateY(26px);transition:.8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:480px){
  .wrap{padding:0 20px}
}