:root{
  --bone:#FBF8F3; --cream:#F3EDE3; --sand:#EAE1D3;
  --ink:#16241D; --ink-70:rgba(22,36,29,.70); --ink-55:rgba(22,36,29,.55);
  --ink-12:rgba(22,36,29,.12); --ink-08:rgba(22,36,29,.08);
  --forest:#1E3A2F; --forest-deep:#14281F;
  --sage:#6E8B76; --sage-soft:#B9CBBB; --sage-mist:#DFE8E0;
  --clay:#C0714E; --blush:#EFD9CE;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(22,36,29,.06),0 4px 14px rgba(22,36,29,.05);
  --shadow-md:0 2px 6px rgba(22,36,29,.06),0 18px 44px rgba(22,36,29,.09);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;

  /* Fraunces fuses fi, ff, ffi and similar into swashy ligatures that read as a
     rendering fault at heading sizes rather than as a flourish. Inherited from
     body so every serif element is covered, including any added later. */
  font-variant-ligatures:none;
}
svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--clay); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

h1,h2{
  font-family:var(--serif); font-weight:400;
  /* SOFT and WONK are inert: the Google Fonts URL requests only ital, opsz and
     wght, so the served file carries no other axes. Kept at safe values so the
     headings do not turn wonky if those axes are ever added to the request. */
  font-variation-settings:"SOFT" 20,"WONK" 0;
  letter-spacing:-.015em; line-height:1.1; margin:0 0 .5em; color:var(--forest-deep);
}
h1{font-size:clamp(2.5rem,5.6vw,4.4rem)}
h1 em{font-style:italic; color:var(--sage)}
h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.page{
  position:relative; overflow:hidden; z-index:0;
  padding:clamp(2.5rem,6vw,4.5rem) 0 0;
}
/* The line drawn sprig running down both edges of the page, mirrored on the left
   so the two lean towards each other. z-index -1 keeps them behind all content,
   pointer-events none keeps them out of the way of clicks. */
.page::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:url("../sprig-flip.svg"), url("../sprig.svg");
  background-repeat:no-repeat, no-repeat;
  opacity:.16;
  /* Width is set in pixels rather than viewport height, so the sprig can be sized
     to the margin beside the 1080px text column and pulled in to fill it. */
  background-size:150px auto, 150px auto;
  background-position:left -52px top 15vh, right -52px top 44vh;
}
@media (min-width:1400px){
  /* Wider screens leave a wider margin, so more of each sprig can show. */
  .page::after{
    background-size:196px auto, 196px auto;
    background-position:left -28px top 14vh, right -28px top 43vh;
  }
}
@media (max-width:1180px){
  /* The margin narrows faster than the artwork, so ease them back out. */
  .page::after{
    background-size:128px auto, 128px auto;
    background-position:left -74px top 16vh, right -74px top 46vh;
  }
}
@media (max-width:900px){
  /* Not enough clear margin at this width for two, so only the left one stays. */
  .page::after{
    background-image:url("../sprig-flip.svg");
    background-size:120px auto;
    background-position:left -58px top 20vh;
    opacity:.11;
  }
}
.page::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 620px at 82% 4%, rgba(185,203,187,.45), transparent 62%),
    radial-gradient(760px 560px at 8% 34%, rgba(239,217,206,.55), transparent 60%);
}
/* Wider page, but prose never stretches with it. Long lines are harder to read,
   so the extra width goes to structure: the belief pairs, the founder row and the
   form columns. Running text stays near 66 characters. */
.wrap{position:relative; width:min(100% - 3rem, 1080px); margin-inline:auto}
.wrap--form{position:relative; width:min(100% - 3rem, 780px); margin-inline:auto}
/* Waitlist intro centres like every other section. The form itself stays left
   aligned, since centred labels above input boxes are hard to scan. */
#waitlist{text-align:center}
#waitlist > p{max-width:52ch; margin-inline:auto}
#waitlist .card{text-align:left}
.measure{max-width:56ch}

/* ---------- Masthead ---------- */
.brand{display:flex; align-items:center; justify-content:center; gap:.75rem; text-decoration:none}
.brand-mark{width:clamp(44px,5.5vw,80px); height:auto; display:block}
.brand-name{
  /* Sized so the wordmark spans the nav row beneath it, from Home across to the
     Join the waitlist button. */
  font-family:var(--serif); font-size:clamp(2.05rem,5.8vw,5.2rem);
  letter-spacing:-.026em; color:var(--forest-deep); line-height:1;
}
.brand-name span{color:var(--sage)}

.badge{
  display:inline-flex; align-items:center; gap:.55rem;
  margin:2.25rem 0 1.75rem;
  padding:.45rem 1rem .45rem .55rem;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.8); border:1px solid var(--ink-08);
  font-size:.78rem; font-weight:500; color:var(--ink-70);
  box-shadow:var(--shadow-sm);
}
.badge b{
  background:var(--forest); color:#fff; border-radius:var(--r-pill);
  padding:.2rem .65rem; font-size:.7rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}

.cta{
  display:inline-flex;align-items:center;gap:.55rem;
  margin-top:2rem;padding:1rem 2rem;
  border-radius:var(--r-pill);background:var(--forest);color:#fff;
  font-size:.97rem;font-weight:600;text-decoration:none;white-space:nowrap;
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);
}
.cta:hover{transform:translateY(-2px);background:var(--forest-deep);box-shadow:var(--shadow-md)}
.cta svg{width:17px;height:17px}

.hero{text-align:center}
.lede{font-size:clamp(1.05rem,1.8vw,1.22rem); color:var(--ink-70); max-width:34em; margin-inline:auto}

/* ---------- Yarrow illustration ---------- */
.bloom{
  width:min(360px,70vw); margin:clamp(2.25rem,5vw,3.25rem) auto clamp(1.5rem,4vw,2.5rem);
  animation:rise 1.1s var(--ease) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Service chips ---------- */
.chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
  margin:2.25rem 0 0; padding:0; list-style:none;
}
.chip{
  font-size:.82rem; font-weight:500; color:var(--ink-70);
  padding:.45rem .95rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.75); border:1px solid var(--ink-08);
}
.chip b{color:var(--forest-deep); font-weight:600}

/* Sections space themselves now that the divider rules are gone. */
.story,
#waitlist{margin-top:clamp(3rem,7vw,4.5rem)}

/* ---------- Statement ---------- */
.statement{margin:clamp(4rem,9vw,6.5rem) auto;text-align:center}
.statement p{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.28; letter-spacing:-.015em;
  color:var(--forest-deep); max-width:19ch; margin-inline:auto;
}
.statement em{font-style:italic; color:var(--sage)}

/* ---------- Stats band ---------- */
.stats{
  border-top:1px solid var(--ink-08); border-bottom:1px solid var(--ink-08);
  background:rgba(255,255,255,.45); margin:clamp(3.5rem,8vw,5.5rem) 0;
}
.stats-inner{
  width:min(100% - 3rem,1140px); margin-inline:auto;
  display:grid; grid-template-columns:repeat(5,1fr);
}
.stat{padding:2.4rem .9rem; text-align:center; border-left:1px solid var(--ink-08)}
.stat:first-child{border-left:0}
.stat-n{
  font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.1;
  color:var(--forest-deep); letter-spacing:-.01em;
}
.stat-l{
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-55); margin-top:.8rem; line-height:1.5;
}
@media(max-width:980px){
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(-n+2){border-top:0}
  .stat{border-top:1px solid var(--ink-08)}
  .stat:nth-child(odd){border-left:0}
}
@media(max-width:560px){
  .stats-inner{grid-template-columns:1fr}
  .stat{border-left:0; border-top:1px solid var(--ink-08); padding:1.9rem 1rem}
  .stat:first-child{border-top:0}
}

/* ---------- Story ---------- */
/* One treatment for every section label, so Our mission, Who we are and Join the
   list all read as the same object and the page keeps a single rhythm. */
.eyebrow,
.story > p.eyebrow,
.story > p.byline{
  display:inline-block;
  font-family:var(--sans);
  font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--forest-deep); background:var(--sage-mist);
  padding:.52rem 1.1rem; border-radius:var(--r-pill);
  margin:0 0 1.5rem;
}
.story p{color:var(--ink-70)}
/* Headings centre, but running text stays left aligned inside a centred column.
   Centred body copy gives the eye no consistent left edge to return to. */
.story{text-align:center}
.story > p{max-width:56ch;margin-inline:auto;text-align:left}
/* The opening line is short enough that centring reads as a statement rather
   than as a paragraph, so it is the one exception. */
.story > .lede-story{max-width:52ch;margin-inline:auto;text-align:center}
.beliefs{text-align:left}
.beliefs{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 3rem;margin:2.25rem 0 0}
.beliefs p{margin-bottom:1.6rem}
@media(max-width:780px){.beliefs{grid-template-columns:1fr;gap:0}}
/* Same pill as the others, just with more air above it since it opens a new block. */
.story > p.byline{max-width:none; text-align:center; margin:3.5rem 0 1.75rem}
/* ---------- Founders ---------- */
/* Centred stacks rather than left aligned rows, so the pair reads as part of the
   same centred rhythm as every other section. */
/* Flex rather than a fixed two column grid, so a single founder centres instead
   of sitting in the left column. */
.founders{
  display:flex; flex-wrap:wrap; justify-content:center; gap:3rem 4rem;
  margin:2.25rem auto 3rem; max-width:800px;
}
.founder{flex:0 1 330px}
.founder{text-align:center}
.founder-photo{
  position:relative; width:104px; height:104px; margin:0 auto 1.15rem;
  border-radius:50%; overflow:hidden;
  background:linear-gradient(150deg,var(--sage-mist),var(--blush));
  border:1px solid var(--ink-08);
  display:grid; place-items:center;
  font-family:var(--serif); font-size:2.1rem; color:var(--forest);
}
/* The portrait is a background layer, not an <img>, on purpose. A missing file
   renders as nothing at all, so the circle falls back to the initial. An <img>
   with a broken src draws a small broken icon even with an empty alt. Set the
   file per person with style="--portrait:url('../name.jpg')". The ../ is needed
   because a relative url() inside a custom property resolves against this
   stylesheet in assets/, not against the HTML page. Portraits live in deploy/
   next to logo.png. */
.founder-photo::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background-image:var(--portrait,none);
  background-size:cover; background-position:center top;
}
.founder-name{
  font-family:var(--serif); font-weight:500; font-size:1.3rem;
  color:var(--forest-deep); line-height:1.2; letter-spacing:-.01em;
}
.founder-role{
  font-size:.7rem; color:var(--sage); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; margin-top:.45rem;
}
.founder-bio{
  font-size:.94rem; line-height:1.62; color:var(--ink-70);
  margin:1.1rem auto 0; max-width:34ch;
}
/* The botanical name carries the section, so it gets display treatment rather
   than sitting inline as a parenthetical. */
.story > p.latin{
  font-family:var(--serif); font-size:clamp(1.5rem,3.2vw,2.05rem); font-style:italic;
  color:var(--sage); letter-spacing:-.01em; line-height:1.2;
  max-width:none; text-align:center; margin:0 0 1.4rem;
}
.story > p.story-close{
  max-width:46ch; margin-inline:auto; text-align:center;
  font-size:1.05rem; color:var(--ink-70);
}
.lede-story{font-size:1.1rem;color:var(--ink-70);margin-bottom:1.9rem}
.story p b{color:var(--forest-deep);font-weight:650}
.story .pull{
  font-family:var(--serif); font-size:clamp(1.25rem,2.6vw,1.65rem); line-height:1.4;
  color:var(--forest-deep); margin:2.75rem auto; max-width:38ch;
  text-align:center;
}

/* ---------- Form ---------- */
.card{
  background:#fff; border:1px solid var(--ink-08); border-radius:var(--r-lg);
  padding:clamp(1.6rem,4vw,2.5rem); box-shadow:var(--shadow-md);
}
.field{margin-bottom:1.1rem}
label{display:block; font-size:.88rem; font-weight:600; color:var(--forest-deep); margin-bottom:.4rem}
.input{
  width:100%; padding:.85rem 1rem;
  border:1px solid var(--ink-12); border-radius:var(--r-sm);
  background:#fff; font-family:var(--sans); font-size:.97rem; color:var(--ink);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input:focus{outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(110,139,118,.16)}
textarea.input{min-height:96px; resize:vertical}
select.input{
  appearance:none; padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316241D' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:15px;
}
/* Safari renders date inputs shorter than text inputs unless told otherwise. */
input[type="date"].input{appearance:none; min-height:3.05rem}
input[type="date"].input::-webkit-date-and-time-value{text-align:left}

/* Column gap only. Vertical rhythm comes from each field's own margin, so the
   spacing stays identical whether the pair sits side by side or stacks. */
.row{display:grid; grid-template-columns:1fr 1fr; gap:0 1rem}
.row-street{display:grid; grid-template-columns:2.2fr 1fr; gap:0 1rem}
.row-city{display:grid; grid-template-columns:1.5fr 1.1fr .8fr; gap:0 1rem}
@media (max-width:560px){
  .row, .row-street, .row-city{grid-template-columns:1fr}
}

.group-label{
  font-size:.73rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sage); margin:1.9rem 0 .9rem;
}
.group-label:first-child{margin-top:0}
.why{font-size:.8rem; color:var(--ink-55); margin:-.35rem 0 1rem; line-height:1.5}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; margin-top:.5rem; padding:.95rem 1.7rem;
  border:1px solid transparent; border-radius:var(--r-pill);
  background:var(--forest); color:#fff;
  font-size:.95rem; font-weight:600; cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover:not(:disabled){transform:translateY(-2px); background:var(--forest-deep); box-shadow:var(--shadow-md)}
.btn:disabled{opacity:.6; cursor:progress; transform:none}

.note{font-size:.82rem; color:var(--ink-55); margin-top:1rem; text-align:center}
.msg{
  margin-top:1.1rem; padding:.85rem 1.1rem; border-radius:var(--r-sm);
  font-size:.88rem; line-height:1.5; display:none;
}
.msg.is-shown{display:block}
.msg--error{background:#FBEDE8; border:1px solid #E4C3B6; color:#8C3F26}
.msg--setup{background:var(--cream); border:1px solid var(--ink-12); color:var(--ink-70)}

.done{display:none; text-align:center}
.done.is-shown{display:block; animation:rise .5s var(--ease) both}
.done-mark{
  width:56px; height:56px; margin:0 auto 1.25rem; border-radius:50%;
  background:var(--sage-mist); display:grid; place-items:center; color:var(--forest);
}
.done-mark svg{width:28px;height:28px}

/* ---------- Footer ---------- */
.foot{
  margin-top:clamp(3.5rem,7vw,5rem); padding:2.5rem 0 3rem;
  border-top:1px solid var(--ink-08); text-align:center;
}
.foot p{font-size:.79rem; line-height:1.65; color:var(--ink-55); max-width:60ch; margin-inline:auto}
.foot .sig{font-size:.82rem; color:var(--ink-70); margin-bottom:1rem}

/* ---------- Site navigation ---------- */
/* Added when the single page became five. The header is the only chrome shared
   by every page, so it carries the wordmark, the section links and the one
   action we care about. */
/* Centred stack: wordmark on its own line, then the links and the action beneath.
   The page is centred throughout, so a left aligned header fought it. */
.site-nav{
  position:relative; z-index:5;
  width:min(100% - 3rem, 1080px); margin:0 auto 1.5rem;
  display:flex; flex-direction:column; align-items:center; gap:1.5rem;
}
.site-nav .brand{justify-content:center}
.nav-row{display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap}
/* wrap:wrap matters. Without it the row is nowrap, the five items shrink below
   their natural width and the labels break mid phrase: "Who / We / Are". */
.nav-links{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.35rem; list-style:none; margin:0; padding:0;
}
.nav-links a{
  display:inline-block; padding:.5rem .85rem; border-radius:var(--r-pill);
  font-size:.88rem; font-weight:500; color:var(--ink-70); text-decoration:none;
  white-space:nowrap;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.nav-links a:hover{background:rgba(22,36,29,.05); color:var(--forest-deep)}
.nav-links a[aria-current="page"]{background:var(--sage-mist); color:var(--forest-deep); font-weight:600}
.nav-cta{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem 1.25rem; border-radius:var(--r-pill);
  background:var(--forest); color:#fff;
  font-size:.85rem; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:transform .2s var(--ease), background-color .2s var(--ease);
}
.nav-cta:hover{transform:translateY(-1px); background:var(--forest-deep)}
@media (max-width:620px){
  .nav-row{gap:.35rem}
  .nav-links a{padding:.45rem .65rem; font-size:.82rem}
  .nav-cta{width:100%; justify-content:center; margin-top:.5rem}
}

/* Site wide status line, sits under the nav on every page. */
.status-bar{position:relative; z-index:2; text-align:center}
.status-bar .badge{margin:0 0 clamp(1.75rem,4vw,2.75rem)}

/* ---------- Page shell for interior pages ---------- */
.page-body{padding-bottom:clamp(3rem,7vw,5rem)}
.page-body .story{margin-top:clamp(2rem,5vw,3.25rem)}

/* Closing call to action, repeated at the foot of every page. */
.tail{
  text-align:center; margin:clamp(3rem,7vw,4.5rem) auto 0;
  width:min(100% - 3rem, 640px);
}
.tail h2{font-size:clamp(1.5rem,3vw,2rem); margin-bottom:.6rem}
.tail p{color:var(--ink-70); max-width:46ch; margin:0 auto 1.75rem}