:root{
  --cream:#F5EFE1;
  --cream-deep:#EDE4D0;
  --forest:#2C4133;
  --forest-soft:#3C5644;
  --terracotta:#B0573A;
  --gold:#C2993F;
  --ink:#28332a;
  --line:rgba(44,65,51,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px}

/* ---------- header ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:26px 0 10px}
.wordmark{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.34em;color:var(--forest)}
.wordmark b{color:var(--terracotta);font-weight:500}
.topnav{display:flex;gap:26px}
.topnav a{color:var(--forest);opacity:.66;text-decoration:none;transition:opacity .25s}
.topnav a:hover{opacity:1}

/* ---------- hero ---------- */
.hero{position:relative;text-align:center;padding:50px 0 80px}
.glow{position:absolute;top:4%;left:50%;transform:translateX(-50%);width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(194,153,63,.26) 0%,rgba(176,87,58,.08) 44%,transparent 68%);z-index:0;pointer-events:none}
.portal{position:relative;z-index:2;width:104px;height:124px;margin:0 auto 28px;display:block}
.eyebrow{position:relative;z-index:2;color:var(--terracotta);margin-bottom:22px}
.hero h1{position:relative;z-index:2;font-size:clamp(2.6rem,6.5vw,4.6rem);font-weight:500;line-height:1.05;letter-spacing:-.01em;max-width:16ch;margin:0 auto;color:var(--forest)}
.hero h1 em{font-style:italic;color:var(--terracotta)}
.lede{position:relative;z-index:2;font-size:clamp(1.12rem,2.3vw,1.45rem);color:var(--forest-soft);max-width:40ch;margin:26px auto 0}
.verbs{position:relative;z-index:2;margin-top:30px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.verbs span{font-family:'DM Mono',monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);border:1px solid var(--line);border-radius:2px;padding:7px 13px}

/* ---------- sections ---------- */
section{padding:80px 0}
.head{display:flex;align-items:baseline;gap:16px;margin-bottom:42px}
.head .num{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--gold);letter-spacing:.18em;padding-top:6px}
.head h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:500;color:var(--forest);line-height:1.05}
.head .note{margin-left:auto;color:var(--forest-soft);max-width:30ch;font-size:1.05rem;opacity:.82;align-self:flex-end}

/* ---------- four functions ---------- */
.functions{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.fn{background:var(--cream);padding:30px 24px 34px;transition:background .3s}
.fn:hover{background:var(--cream-deep)}
.fn .ic{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.16em;color:var(--gold)}
.fn h3{font-size:1.55rem;font-weight:600;color:var(--forest);margin:10px 0 8px}
.fn p{font-size:1.02rem;color:var(--forest-soft);line-height:1.45}

/* ---------- the journey ---------- */
.journey{background:var(--cream-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{position:relative;margin-top:8px}
.steps::before{content:"";position:absolute;left:23px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--gold),var(--terracotta))}
.step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:24px;padding:18px 0;align-items:start}
.step .dot{position:relative;z-index:2;width:48px;height:48px;border-radius:50%;background:var(--cream);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:.9rem;color:var(--forest)}
.step h4{font-size:1.5rem;font-weight:600;color:var(--forest);line-height:1.1}
.step p{font-size:1.08rem;color:var(--forest-soft);line-height:1.45;margin-top:4px}
.step:last-child .dot{background:var(--terracotta);border-color:var(--terracotta);color:#fff}

/* ---------- honesty / who ---------- */
.who{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.who .big{font-size:clamp(1.6rem,3.4vw,2.2rem);font-style:italic;color:var(--forest);line-height:1.22}
.who .big em{color:var(--terracotta);font-style:italic}
.who p{font-size:1.12rem;color:var(--forest-soft);line-height:1.5}
.who p + p{margin-top:16px}

/* ---------- closing ---------- */
.closing{background:var(--forest);color:var(--cream);text-align:center;padding:96px 0}
.closing .mono{color:var(--gold)}
.closing h2{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:500;line-height:1.08;max-width:16ch;margin:16px auto 0}
.closing h2 em{font-style:italic;color:var(--gold)}
.closing p{color:rgba(245,239,225,.72);max-width:42ch;margin:24px auto 0;font-size:1.18rem}
.cta{display:inline-block;margin-top:40px;font-family:'DM Mono',monospace;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--forest);background:var(--gold);padding:17px 34px;border-radius:2px;text-decoration:none;transition:transform .25s,background .25s}
.cta:hover{transform:translateY(-2px);background:var(--cream)}

footer{padding:38px 0;text-align:center}
footer .mono{color:var(--forest);opacity:.5;line-height:2}
footer .mono a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
footer .mono a:hover{color:var(--terracotta)}
footer .dot2{color:var(--terracotta);margin:0 8px}

.fade{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease}
.fade.in{opacity:1;transform:none}
.grow{transform-origin:50% 100%;animation:grow 6s ease-in-out infinite}
@keyframes grow{0%,100%{transform:scaleY(.98)}50%{transform:scaleY(1.02)}}

@media (max-width:860px){.functions{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  body{font-size:18px}
  .topnav{display:none}
  .head{flex-wrap:wrap}.head .note{margin-left:0;flex-basis:100%}
  .who{grid-template-columns:1fr;gap:24px}
}
@media (max-width:520px){.functions{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.fade{transition:none;opacity:1;transform:none}.grow{animation:none}html{scroll-behavior:auto}}