/* ============================================================
   base.css — Custom properties, reset, typography, layout
   ============================================================ */

:root {
  --bg:       #F8F6F1;
  --surface:  #FFFFFF;
  --ink:      #0F0F0F;
  --ink-2:    #3A3A3A;
  --ink-3:    #7A7A7A;
  --rule:     #E2E0DA;
  --accent:   #7B2FFF;
  --accent-2: #F0E8FF;
  --positive: #0D7A4E;
  --f-display:'Fraunces', Georgia, serif;
  --f-body:   'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px;
  --shadow-md: 0 4px 20px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--f-body); background: var(--bg); color: var(--ink); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }

/* ── Typography ── */
.d1 { font-family: var(--f-display); font-size: clamp(2.75rem,5.5vw,5rem); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; }
.d2 { font-family: var(--f-display); font-size: clamp(1.875rem,3vw,3rem); font-weight: 400; line-height: 1.1; letter-spacing: -.015em; }
.d3 { font-family: var(--f-display); font-size: clamp(1.375rem,2vw,1.875rem); font-weight: 400; line-height: 1.2; letter-spacing: -.01em; }
.h4 { font-family: var(--f-body); font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.body-lg { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.body-md { font-size: .9rem; line-height: 1.65; color: var(--ink-2); }
.body-sm { font-size: .8125rem; line-height: 1.6; color: var(--ink-3); }
.label  { font-size: 1rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
em.s    { font-style: italic; }

/* ── Layout utilities ── */
.wrap   { max-width: 1180px; margin: 0 auto; padding: 0 5%; }
.sect   { padding: 88px 0; }
.sect-sm{ padding: 56px 0; }
.g2 { display: grid; grid-template-columns: 1fr 1fr;          gap: 3rem;    align-items: center; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr);    gap: 1.25rem; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr);    gap: 1.5rem; }
.rule-line { border: none; border-top: 1px solid var(--rule); }
.mt2{margin-top:1rem} .mt3{margin-top:1.5rem} .mt4{margin-top:2rem}
.mt6{margin-top:3rem} .mt8{margin-top:4rem}

/* ── Scroll reveal ── */
.rev { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.rev.in { opacity: 1; transform: none; }

/* ── Hero entrance animations ── */
@keyframes fsu { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
.a1{animation:fsu .5s ease both}
.a2{animation:fsu .5s .1s ease both}
.a3{animation:fsu .5s .2s ease both}
.a4{animation:fsu .5s .3s ease both}

/* ── Responsive grid breakdowns ── */
@media(max-width:960px){
  .g2{ grid-template-columns:1fr; gap:2rem }
  .g3{ grid-template-columns:1fr 1fr }
  .g4{ grid-template-columns:1fr 1fr }
}
@media(max-width:640px){
  .d1{ font-size:2.4rem }
  .d2{ font-size:1.75rem }
  .g3{ grid-template-columns:1fr }
  .g4{ grid-template-columns:1fr 1fr }
  .sect  { padding:60px 0 }
  .sect-sm{ padding:44px 0 }
}