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

/* Design tokens — DESIGN.md */
:root {
  --canvas: #faf9f5;
  --surface-soft: #f5f0e8;
  --surface-card: #efe9de;
  --surface-cream-strong: #e8e0d2;
  --surface-dark: #181715;
  --surface-dark-elevated: #252320;
  --surface-dark-soft: #1f1e1b;
  --primary: #cc785c;
  --primary-active: #a9583e;
  --primary-disabled: #e6dfd8;
  --ink: #141413;
  --body-strong: #252523;
  --body: #3d3d3a;
  --muted: #6c6a64;
  --muted-soft: #8e8b82;
  --hairline: #e6dfd8;
  --hairline-soft: #ebe6df;
  --on-primary: #ffffff;
  --on-dark: #faf9f5;
  --on-dark-soft: #a09d96;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:16px;
  color:var(--body);
  background:var(--canvas);
  line-height:1.55;
}

a{color:inherit}

.container{width:min(1180px,calc(100% - 40px));margin:0 auto}

/* ── NAVIGATION ─────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--canvas);
  border-bottom:1px solid var(--hairline);
}

.nav-wrap{
  height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;font-weight:600;color:var(--ink);
}

.brand-mark{
  width:36px;height:36px;
  display:grid;place-items:center;
  background:var(--primary);color:var(--on-primary);
  border-radius:var(--radius-md);
  font-size:11px;font-weight:700;letter-spacing:.05em;
}

.brand-text{font-size:15px;white-space:nowrap;font-weight:600;color:var(--ink)}

.site-nav{display:flex;gap:2px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

.site-nav a{
  font-size:14px;font-weight:500;
  text-decoration:none;color:var(--muted);
  transition:color .15s;
  padding:6px 10px;border-radius:var(--radius-md);
}

.site-nav a:hover,.site-nav a.active{color:var(--ink)}

.nav-cta{
  background:var(--primary)!important;
  color:var(--on-primary)!important;
  border-radius:var(--radius-md)!important;
  padding:8px 16px!important;
}

.nav-cta:hover{background:var(--primary-active)!important;color:var(--on-primary)!important}

.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;color:var(--ink)}

h1,h2{
  font-family:'Cormorant Garamond','Tiempos Headline',Georgia,serif;
  font-weight:500;
}

h1{font-size:clamp(36px,5.5vw,64px);line-height:1.05;letter-spacing:-.02em}
h2{font-size:clamp(26px,3.5vw,48px);line-height:1.1;letter-spacing:-.02em}

h3{
  font-family:Inter,sans-serif;font-size:18px;
  font-weight:500;line-height:1.4;letter-spacing:0;
}

h4{
  font-family:Inter,sans-serif;font-size:16px;
  font-weight:500;line-height:1.4;letter-spacing:0;
}

.eyebrow,.kicker{
  font-family:Inter,sans-serif;font-size:12px;
  font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted);
  margin-bottom:12px;display:block;
}

.lead{
  font-size:18px;line-height:1.55;
  color:var(--body);max-width:840px;margin-top:14px;
}

.muted{color:var(--muted)}

/* ── HERO ────────────────────────────────────────────────── */
.hero{
  background:var(--canvas);
  border-bottom:1px solid var(--hairline);
}

.hero-inner{padding:96px 0 80px}

.hero-subtitle{
  font-size:clamp(16px,1.6vw,20px);
  color:var(--body);max-width:680px;
  margin:18px 0 0;line-height:1.55;
}

.hero-actions{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 20px;
  border-radius:var(--radius-md);
  text-decoration:none;
  font-family:Inter,sans-serif;font-weight:500;font-size:14px;
  border:0;cursor:pointer;
  transition:background .15s;
  line-height:1;white-space:nowrap;
}

.btn.primary,.btn.dynamic{
  background:var(--primary);color:var(--on-primary);
}

.btn.primary:hover,.btn.dynamic:hover{background:var(--primary-active)}

.btn.secondary{
  background:var(--canvas);color:var(--ink);
  border:1px solid var(--hairline);
}

.btn.secondary:hover{background:var(--surface-card)}

/* ── SECTIONS ────────────────────────────────────────────── */
.section{padding:96px 0;border-bottom:1px solid var(--hairline-soft)}
.section.compact{padding:64px 0}
.section-head{max-width:840px;margin-bottom:40px}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}

/* ── GRIDS ───────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ── CARDS ───────────────────────────────────────────────── */
.card,.program-card,.opportunity-card{
  background:var(--surface-card);
  border-radius:var(--radius-lg);
  padding:32px;
  min-height:200px;
}

.panel{
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:32px;
}

.card-kicker,.program-kicker,.opportunity-kicker{
  font-family:Inter,sans-serif;
  font-size:12px;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;display:block;
}

.card p,.program-card p,.opportunity-card p{
  color:var(--body);margin:10px 0 0;font-size:15px;
}

/* ── HIGHLIGHT BOX ───────────────────────────────────────── */
.highlight-box{
  background:var(--surface-card);
  border-radius:var(--radius-lg);
  padding:32px;
}

/* Dark CTA band (cta-band-dark pattern) */
.highlight-box.main{
  background:var(--surface-dark);
  border-radius:var(--radius-lg);
  padding:64px;
}

.highlight-box.main h2{color:var(--on-dark)}
.highlight-box.main .kicker{color:var(--on-dark-soft)}
.highlight-box.main .lead{color:var(--on-dark);opacity:.85}
.highlight-box.main .muted{color:var(--on-dark-soft)}

/* Secondary button on dark surface */
.highlight-box.main .btn.secondary{
  background:var(--surface-dark-elevated);
  color:var(--on-dark);
  border-color:transparent;
}

.highlight-box.main .btn.secondary:hover{background:#2e2c29}

/* ── OPPORTUNITY STRIP ───────────────────────────────────── */
.opportunity-strip{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;margin-top:20px;
}

.opportunity-item{
  padding:20px;border-radius:var(--radius-md);
  background:var(--canvas);border:1px solid var(--hairline);
}

.opportunity-item strong{
  color:var(--ink);display:block;
  margin-bottom:6px;font-size:15px;font-weight:500;
}

/* ── CHECK LIST ──────────────────────────────────────────── */
.check-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}

.check-list li{position:relative;padding-left:22px;color:var(--body)}

.check-list li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:8px;height:8px;border-radius:50%;background:var(--primary);
}

/* ── PAGE HERO ───────────────────────────────────────────── */
.page-hero{
  padding:80px 0 64px;
  border-bottom:1px solid var(--hairline);
  background:var(--canvas);
}

.page-hero h1{font-size:clamp(28px,4.5vw,56px)}

.breadcrumb{
  font-family:Inter,sans-serif;font-size:12px;
  font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:16px;
}

/* ── FORM ────────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field.full{grid-column:1/-1}

label{font-size:13px;color:var(--ink);font-weight:500}

input,select,textarea{
  width:100%;min-height:40px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  padding:10px 14px;
  background:var(--canvas);color:var(--ink);
  font-family:Inter,sans-serif;font-size:14px;
  transition:border-color .15s,box-shadow .15s;
  appearance:auto;
}

input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(204,120,92,.15);
}

textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted-soft)}

.form-note{color:var(--muted);font-size:14px;margin-top:16px}

.notice{
  border-left:3px solid var(--primary);
  padding:16px 18px;
  background:var(--surface-soft);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--body);font-size:14px;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer{
  background:var(--surface-dark);
  color:var(--on-dark-soft);
  padding:64px 0 32px;
}

.footer-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:48px}

.footer-grid h2{
  font-family:'Cormorant Garamond',serif;
  font-size:28px;font-weight:500;
  color:var(--on-dark);margin-bottom:14px;
}

.footer-grid h3{
  font-family:Inter,sans-serif;
  font-size:15px;font-weight:500;
  color:var(--on-dark);margin-bottom:12px;
}

.footer-grid p{
  color:var(--on-dark-soft);font-size:14px;
  line-height:1.65;margin:0 0 10px;
}

.footer-grid a{color:var(--on-dark-soft);text-decoration:none}
.footer-grid a:hover{color:var(--on-dark)}

.footer-bottom{
  color:var(--muted-soft);font-size:13px;
  padding-top:32px;margin-top:48px;
  border-top:1px solid rgba(250,249,245,.1);
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1020px){
  .site-nav{
    position:fixed;left:20px;right:20px;top:72px;
    flex-direction:column;align-items:flex-start;
    padding:20px;gap:4px;
    background:var(--canvas);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    display:none;
    box-shadow:0 8px 24px rgba(20,20,19,.12);
    z-index:49;
  }
  .nav-open .site-nav{display:flex}
  .nav-toggle{display:block}
}

@media(max-width:900px){
  .grid-2,.grid-3,.grid-4,
  .form-grid,.footer-grid,.opportunity-strip{
    grid-template-columns:1fr;
  }
  .section{padding:64px 0}
  .section.compact{padding:48px 0}
  .hero-inner{padding:64px 0 48px}
  .highlight-box.main{padding:40px 24px}
  .form-field.full{grid-column:auto}
}