@font-face {
  font-family: "P22 Kaz Pro";
  src: local("P22 Kaz Pro"), local("P22KazPro");
  font-display: swap;
}

:root {
  --forest: #173c2a;
  --forest-2: #24523a;
  --moss: #56734a;
  --sage: #a8b693;
  --cream: #fbf5e8;
  --parchment: #efe4c9;
  --gold: #d9a64a;
  --amber: #f1ca6d;
  --brown: #563a25;
  --ink: #263428;
  --white: #fffdf7;
  --display: "P22 Kaz Pro", "Cormorant Garamond", Georgia, serif;
  --body: "Cormorant Garamond", Georgia, serif;
  --shadow: 0 20px 60px rgba(20, 45, 28, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }

.skip-link {
  position: fixed; left: 1rem; top: -5rem; z-index: 1000;
  background: var(--white); color: var(--forest); padding: .7rem 1rem; border-radius: 99px;
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: absolute; inset: 0 0 auto; z-index: 20;
  padding: 1rem clamp(1rem, 4vw, 4rem);
}
.nav-shell {
  max-width: 1320px; margin: 0 auto; min-height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: .6rem .7rem .6rem 1.2rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(17, 48, 32, .70);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.brand { width: min(310px, 36vw); height: 44px; overflow: hidden; display:flex; align-items:center; }
.brand img { width: 100%; transform: scale(1.04); }
.site-nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.8rem); }
.site-nav a { text-decoration: none; color: var(--white); font-weight: 700; font-size: .96rem; letter-spacing: .02em; }
.site-nav a:hover { color: var(--amber); }
.nav-cta { border: 1px solid rgba(255,255,255,.35); padding: .65rem 1rem; border-radius: 999px; }
.menu-toggle { display:none; border:0; background:none; width:46px; height:46px; padding:10px; }
.menu-toggle span { display:block; height:2px; background:#fff; margin:6px 0; }

.hero { min-height: 890px; position: relative; overflow: hidden; display:flex; align-items:flex-end; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,24,14,.16) 12%, rgba(7,24,14,.25) 45%, rgba(7,24,14,.92) 100%); }
.hero-content { position:relative; z-index:2; max-width: 980px; padding: 0 clamp(1.4rem, 6vw, 7rem) 6.8rem; color: var(--white); }
.eyebrow { margin:0 0 .9rem; text-transform:uppercase; letter-spacing:.19em; font-size:.78rem; font-weight:700; }
.eyebrow.dark { color: var(--moss); }
.hero h1, .section h2 { font-family: var(--display); font-weight: 600; line-height:.95; letter-spacing: -.025em; margin:0; }
.hero h1 { font-size: clamp(3.5rem, 7vw, 7.2rem); text-shadow: 0 5px 24px rgba(0,0,0,.28); }
.hero h1 em { color: var(--amber); font-weight:600; }
.hero-copy { max-width:700px; font-size:clamp(1.1rem, 2vw, 1.42rem); margin:1.5rem 0 2rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.9rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:.75rem 1.35rem; border-radius:999px; border:0; text-decoration:none; font-weight:700; cursor:pointer; transition:.2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--gold); color:#2f2618; box-shadow:0 10px 25px rgba(217,166,74,.25); }
.button-ghost { border:1px solid rgba(255,255,255,.5); color:white; background:rgba(255,255,255,.08); }
.button-light { background:var(--white); color:var(--forest); }
.scroll-cue { position:absolute; z-index:2; right:3rem; bottom:3rem; width:38px; height:58px; border:1px solid rgba(255,255,255,.45); border-radius:30px; }
.scroll-cue span { position:absolute; width:5px; height:5px; border-radius:50%; background:white; top:12px; left:16px; animation:scroll 1.7s infinite; }
@keyframes scroll { 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 100%{opacity:0;transform:translateY(24px)} }

.section { padding: clamp(5rem, 9vw, 9rem) clamp(1.3rem, 6vw, 7rem); }
.intro { text-align:center; position:relative; background: radial-gradient(circle at top, #fffdf7 0, var(--cream) 62%); }
.leaf-kicker { font-family:var(--display); color:var(--moss); font-style:italic; font-size:1.3rem; }
.section h2 { font-size:clamp(2.8rem, 5vw, 5.3rem); color:var(--forest); }
.section-lede { max-width:800px; margin:1.4rem auto 3.5rem; font-size:1.3rem; }
.pillars { max-width:1220px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; text-align:left; }
.pillar { background:rgba(255,255,255,.75); border:1px solid #e8ddc5; border-radius:26px; padding:2rem; box-shadow:var(--shadow); }
.pillar .icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--forest); color:var(--amber); font-size:1.4rem; }
.pillar h3 { font-family:var(--display); font-size:1.8rem; line-height:1.05; color:var(--forest); margin:1rem 0 .7rem; }
.pillar p { margin:0; }

.friends-heading { max-width:900px; margin:clamp(5rem,8vw,8rem) auto 2.4rem; scroll-margin-top:110px; }
.friends-heading > p:last-child { max-width:760px; margin:1.1rem auto 0; font-size:1.18rem; }
.friends-heading h2 { font-size:clamp(2.6rem,4.6vw,4.8rem); }
.friends-grid { max-width:1320px; margin:0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem; text-align:left; }
.friend-card { background:rgba(255,255,255,.82); border:1px solid #e5d9bf; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); transition:transform .22s ease, box-shadow .22s ease; }
.friend-card:hover { transform:translateY(-5px); box-shadow:0 28px 70px rgba(20,45,28,.22); }
.friend-card img { width:100%; aspect-ratio:1/1; object-fit:cover; background:#fcf8ee; }
.friend-card div { padding:1.35rem 1.35rem 1.55rem; }
.friend-card span { display:block; color:var(--moss); text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; font-weight:700; }
.friend-card h3 { margin:.25rem 0 .55rem; font-family:var(--display); font-size:2rem; line-height:1; color:var(--forest); }
.friend-card p { margin:0; font-size:1rem; line-height:1.42; }

.rooti-feature { background: var(--parchment); }
.rooti-card { max-width:1160px; margin:auto; display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:clamp(2rem,6vw,6rem); }
.rooti-portrait-wrap { position:relative; max-width:420px; margin:auto; }
.rooti-portrait { border-radius:50%; border:14px solid rgba(255,255,255,.6); box-shadow:var(--shadow); position:relative; z-index:2; }
.pulse { position:absolute; inset:8%; border:2px solid rgba(36,82,58,.18); border-radius:50%; animation:pulse 3s infinite; }
.pulse-two { animation-delay:1.5s; }
@keyframes pulse { from{transform:scale(.98);opacity:.8} to{transform:scale(1.35);opacity:0} }
.rooti-copy h2 { font-size:clamp(2.5rem,4.5vw,4.6rem); }
.rooti-copy > p { font-size:1.2rem; }
blockquote { margin:1.7rem 0 0; padding:1.3rem 1.5rem; border-left:4px solid var(--gold); font-family:var(--display); font-size:1.45rem; font-style:italic; color:var(--forest); background:rgba(255,255,255,.35); }

.book { max-width:1300px; margin:auto; display:grid; grid-template-columns: .9fr 1.1fr; gap:clamp(3rem,7vw,7rem); align-items:center; }
.book-art { display:grid; place-items:center; perspective:1200px; }
.book-cover-frame { width:min(460px, 88vw); margin:0; position:relative; transform:rotateY(8deg) rotateZ(-2deg); filter:drop-shadow(0 35px 70px rgba(20,45,28,.28)); }
.book-cover-frame::before { content:""; position:absolute; inset:14px -14px -14px 14px; background:#c7a269; border-radius:16px 28px 28px 16px; z-index:0; }
.book-cover-image { position:relative; z-index:1; width:100%; border-radius:12px 24px 24px 12px; overflow:hidden; border:2px solid rgba(86,58,37,.18); }
.book-copy h2 { font-size:clamp(3rem,5vw,5.6rem); }
.large-copy { font-size:1.35rem; color:var(--forest); }
.check-list { padding:0; margin:1.6rem 0 2rem; list-style:none; }
.check-list li { margin:.55rem 0; padding-left:1.7rem; position:relative; }
.check-list li:before { content:"✦"; position:absolute; left:0; color:var(--gold); }

.pathway { background:radial-gradient(circle at 50% 0%, #28583e 0, var(--forest) 42%, #102f21 100%); color:var(--white); position:relative; overflow:hidden; }
.pathway::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 78%); pointer-events:none; }
.pathway > * { position:relative; z-index:1; }
.pathway h2 { color:var(--white); max-width:760px; }
.pathway .eyebrow { color:var(--amber); }
.section-heading { max-width:920px; margin-bottom:3rem; }
.pathway-intro { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,7vw,7rem); align-items:end; margin-bottom:3.2rem; }
.pathway-intro .section-heading { margin:0; }
.pathway-lede { max-width:620px; margin:0 0 .45rem; color:#dce8dc; font-size:1.18rem; line-height:1.7; }
.path-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; background:none; border:0; }
.path-step { position:relative; overflow:hidden; background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.16); border-radius:26px; padding:1.6rem; min-height:360px; display:flex; flex-direction:column; box-shadow:0 20px 50px rgba(0,0,0,.14); transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.path-step::after { content:""; position:absolute; width:150px; height:150px; border-radius:50%; right:-65px; bottom:-70px; background:radial-gradient(circle,rgba(241,202,109,.15),transparent 70%); }
.path-step:hover { transform:translateY(-5px); border-color:rgba(241,202,109,.55); background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05)); }
.path-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:rgba(241,202,109,.12); border:1px solid rgba(241,202,109,.34); color:var(--amber); font-family:var(--display); font-size:1.9rem; margin-bottom:1.2rem; }
.path-number { color:var(--amber); font-size:.75rem; letter-spacing:.18em; font-weight:700; }
.path-step h3 { font-family:var(--display); font-size:2.35rem; margin:.65rem 0 .55rem; color:var(--white); }
.path-question { margin:0; color:#f5f1e7; font-size:1.08rem; line-height:1.45; }
.path-practice { margin-top:auto; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.14); color:#cfe0d3; font-size:.93rem; line-height:1.55; }
.path-practice strong { color:var(--amber); font-weight:700; }
.pathway-footer { display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:2.4rem; color:#dce8dc; text-align:center; }
.pathway-footer p { margin:0; font-family:var(--display); font-size:1.25rem; }
.pathway-heart { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--amber); border:1px solid rgba(241,202,109,.4); }

.join { padding-top:0; background:var(--forest); }
.join-panel { max-width:1180px; margin:auto; text-align:center; color:var(--white); background:linear-gradient(135deg,#3f6b45,#244d35); border:1px solid rgba(255,255,255,.18); border-radius:32px; padding:clamp(3rem,7vw,6rem); box-shadow:0 24px 80px rgba(0,0,0,.23); }
.join-panel h2 { color:var(--white); }
.join-panel > p:not(.eyebrow):not(.form-note) { max-width:730px; margin:1rem auto 2rem; font-size:1.2rem; }
.signup-form { display:flex; gap:.7rem; max-width:650px; margin:auto; }
.signup-form input { flex:1; min-width:0; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:.85rem 1.2rem; background:rgba(255,255,255,.12); color:white; outline:none; }
.signup-form input::placeholder { color:rgba(255,255,255,.72); }
.signup-form input:focus { border-color:var(--amber); box-shadow:0 0 0 4px rgba(241,202,109,.15); }
.form-note { font-size:.9rem; opacity:.78; }

.site-footer { background:#102b1e; color:#dce8dc; padding:3rem clamp(1.3rem,6vw,7rem); display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:end; }
.footer-brand img { width:290px; height:60px; object-fit:cover; object-position:left center; }
.footer-brand p { margin:.4rem 0 0; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:1rem 1.4rem; }
.footer-links a { text-decoration:none; }
.footer-links a:hover { color:var(--amber); }
.copyright { grid-column:1/-1; border-top:1px solid rgba(255,255,255,.12); padding-top:1.4rem; margin:0; font-size:.9rem; opacity:.72; }
.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: 980px) {
  .site-header { position:fixed; padding:.7rem; }
  .nav-shell { border-radius:28px; padding:.45rem .6rem .45rem 1rem; }
  .brand { width:230px; }
  .menu-toggle { display:block; }
  .site-nav { position:absolute; top:76px; left:.7rem; right:.7rem; display:none; flex-direction:column; align-items:stretch; padding:1.1rem; border-radius:24px; background:rgba(17,48,32,.96); }
  .site-nav.open { display:flex; }
  .site-nav a { padding:.65rem .4rem; }
  .hero { min-height:780px; }
  .pillars { grid-template-columns:1fr; }
  .friends-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rooti-card, .book { grid-template-columns:1fr; }
  .rooti-copy { text-align:center; }
  blockquote { text-align:left; }
  .pathway-intro { grid-template-columns:1fr; gap:1.2rem; }
  .path-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 620px) {
  body { font-size:17px; }
  .brand { width:190px; }
  .hero {
    min-height:auto;
    display:block;
    padding-top:82px;
    background:var(--forest);
  }
  .hero-image {
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center top;
    border-radius:0 0 28px 28px;
  }
  .hero-shade { display:none; }
  .hero-content {
    max-width:none;
    padding:2rem 1.15rem 3.5rem;
  }
  .hero h1 { font-size:3.2rem; }
  .hero-copy { font-size:1.08rem; margin:1.2rem 0 1.7rem; }
  .scroll-cue { display:none; }
  .hero-actions .button { width:100%; }
  .section { padding:4.8rem 1.15rem; }
  .friends-grid { grid-template-columns:1fr; }
  .friend-card { display:grid; grid-template-columns:135px 1fr; align-items:center; }
  .friend-card img { height:100%; aspect-ratio:auto; }
  .friend-card h3 { font-size:1.7rem; }
  .path-grid { grid-template-columns:1fr; }
  .path-step { min-height:0; }
  .pathway-lede { font-size:1.05rem; }
  .pathway-footer { align-items:flex-start; }
  .signup-form { flex-direction:column; }
  .site-footer { grid-template-columns:1fr; text-align:center; }
  .footer-brand img { margin:auto; }
  .footer-links { justify-content:center; }
}