@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap');

:root{
  --ink:#172725;
  --copy:#435350;
  --muted:#72807d;
  --sage:#6c9a8f;
  --sage-dark:#4f7d72;
  --paper:#fbfcfa;
  --cream:#fbfcfa;
  --charcoal:#172725;
  --black:#111816;
  --line:#e7ebe8;
}

*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}
body{margin:0;min-width:320px;background:var(--paper)}
a{color:inherit}

.site-header{
  height:74px;
  padding:0 clamp(24px,4vw,68px);
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:30px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:3;
}
.wordmark{
  width:max-content;
  color:var(--sage-dark);
  font:600 clamp(25px,2.3vw,36px)/1 'Manrope',sans-serif;
  letter-spacing:-.045em;
  text-decoration:none;
}
.site-header nav{display:flex;align-items:center;gap:clamp(24px,3.5vw,58px)}
.site-header nav a{color:#53615f;font-size:15px;text-decoration:none;white-space:nowrap;transition:color .2s ease}
.site-header nav a:hover{color:var(--sage-dark)}
.header-cta{justify-self:end;color:var(--sage-dark);font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding:9px 0}

.hero{
  position:relative;
  min-height:620px;
  height:min(68vw,700px);
  overflow:hidden;
  isolation:isolate;
  background:#f7faf8;
}
.hero-image{position:absolute;inset:0;z-index:-2}
.hero-image img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.hero:after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(251,252,250,.99) 0%,rgba(251,252,250,.96) 24%,rgba(251,252,250,.64) 41%,rgba(251,252,250,.08) 62%,transparent 78%);
}
.hero-copy{
  width:min(620px,46vw);
  position:absolute;
  left:clamp(28px,6.4vw,105px);
  top:50%;
  transform:translateY(-48%);
}
.eyebrow{margin:0 0 19px;color:var(--sage-dark);font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.hero h1{
  margin:0;
  color:var(--ink);
  font:500 clamp(55px,5.25vw,86px)/.99 'Manrope',sans-serif;
  letter-spacing:-.058em;
}
.hero h1 span{color:var(--sage-dark)}
.hero h1 strong,.hero h1 span{display:block}.hero h1 strong{color:var(--ink);font-size:1.4em;font-weight:600;letter-spacing:-.07em;line-height:.9;margin-bottom:.18em}
.hero-intro{max-width:500px;margin:25px 0 27px;color:var(--copy);font-size:clamp(16px,1.25vw,20px);line-height:1.55}
.primary-cta{
  display:inline-flex;
  min-width:288px;
  min-height:58px;
  padding:0 24px;
  align-items:center;
  justify-content:space-between;
  gap:50px;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg,var(--sage),#7faf9f);
  box-shadow:0 14px 34px rgba(79,125,114,.22);
  font-size:17px;
  font-weight:600;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.primary-cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(79,125,114,.3)}
.primary-cta:focus-visible,.header-cta:focus-visible,.site-header nav a:focus-visible{outline:3px solid rgba(108,154,143,.45);outline-offset:4px}
.proof{display:flex;flex-wrap:wrap;gap:16px 25px;margin-top:24px;color:#62706d;font-size:12px}
.proof span{display:flex;align-items:center;gap:8px}
.proof span:before{content:'✓';display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--sage);border-radius:50%;color:var(--sage-dark);font-size:11px;font-weight:700}

.value-band{
  padding:31px clamp(28px,7vw,118px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,5vw,86px);
  border-block:1px solid var(--line);
  background:#fff;
}
.value-band article{display:grid;grid-template-columns:52px 1fr;align-items:start;gap:17px}
.value-band article>span{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#f1f5f2;color:var(--sage-dark);font:700 12px 'Manrope',sans-serif}
.value-band strong{display:block;margin:2px 0 6px;font:600 15px/1.3 'Manrope',sans-serif}
.value-band p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.closing-line{padding:31px 24px 35px;display:grid;justify-items:center;gap:5px;text-align:center;background:linear-gradient(#fbfcfa,#f5f8f5)}
.closing-line strong{font:600 21px 'Manrope',sans-serif;letter-spacing:-.025em}
.closing-line span{color:var(--muted);font-size:15px}

@media(max-width:980px){
  .site-header{grid-template-columns:1fr auto}.site-header nav{display:none}
  .hero{min-height:660px;height:calc(100svh - 88px)}
  .hero-image img{object-position:63% center}
  .hero:after{background:linear-gradient(90deg,rgba(251,252,250,.99),rgba(251,252,250,.88) 38%,rgba(251,252,250,.18) 69%,transparent)}
  .hero-copy{width:min(570px,60vw)}
  .value-band{gap:26px;padding-inline:32px}
}

@media(max-width:680px){
  .site-header{position:absolute;z-index:4;top:0;left:0;right:0;height:92px;padding:calc(18px + env(safe-area-inset-top)) 24px 12px;background:linear-gradient(180deg,rgba(255,255,255,.72),transparent);border:0}.wordmark{font-size:32px;color:#4f7d72}.header-cta{font-size:12px}
  .hero{height:auto;min-height:calc(100svh - 72px);display:flex;flex-direction:column;align-items:stretch;padding:0}
  .hero-image img{object-position:71% center}
  .hero:after{display:none;opacity:0;background:none}
  .hero-copy{position:relative;left:auto;top:auto;transform:none;width:100%;background:var(--paper)}
  .eyebrow{margin-bottom:12px}
  .hero h1{font-size:clamp(44px,13.5vw,67px)}
  .hero-intro{margin:17px 0 21px;font-size:16px}
  .primary-cta{width:100%;min-width:0}
  .proof{gap:10px 16px;margin-top:18px}
  .value-band{grid-template-columns:1fr;padding:27px 20px;gap:23px}
  .value-band article{grid-template-columns:45px 1fr}.value-band article>span{width:45px;height:45px}
  .closing-line{padding-block:27px}
}

@media(prefers-reduced-motion:reduce){.primary-cta{transition:none}}

/* Focused overlay layout: the home and buying message share one frame. */
.wordmark{font-size:clamp(34px,3vw,47px)}
.hero{height:calc(100svh - 74px);min-height:640px;display:block;background:#eef3f0}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-image{position:absolute;inset:0;z-index:0}
.hero-image img{object-position:center 52%}
.hero:after{display:block;background:linear-gradient(90deg,rgba(251,252,250,.62) 0%,rgba(251,252,250,.38) 22%,rgba(251,252,250,.14) 40%,rgba(251,252,250,.02) 56%,transparent 70%)}
.hero-copy{position:absolute;left:23%;top:50%;transform:translate(-50%,-50%);width:min(720px,42vw);padding:0;text-align:center}
.hero h1{font-size:clamp(66px,6.4vw,104px);max-width:920px}
.hero-intro{max-width:650px;margin:27px 0 29px;font-size:clamp(17px,1.35vw,22px)}
.primary-cta{min-width:330px}
.proof{justify-content:center;font-size:13px}

@media(max-width:680px){
  .hero{display:flex;flex-direction:column;height:auto;min-height:100svh;padding:0;overflow:visible;background:var(--paper)}
  .hero-media{position:relative;inset:auto;z-index:0;flex:1 1 52svh;width:100%;min-height:46svh;height:52svh}
  .hero-image{position:absolute;inset:0;z-index:0}
  .hero-image img{height:140%;object-position:center 62%;transform:translateY(-30%)}
  .hero:after{display:none;opacity:0;background:none}
  .hero-copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;transform:none;padding:28px 22px max(32px,calc(20px + env(safe-area-inset-bottom)));background:var(--paper);text-align:left;z-index:1}
  .hero h1{font-size:clamp(42px,11.5vw,56px);line-height:1.01;color:var(--charcoal);text-shadow:none}
  .hero h1 strong{color:var(--black)}
  .hero h1 span{color:var(--sage-dark)}
  .hero-intro{max-width:355px;margin:15px 0 18px;font-size:14px;line-height:1.48;text-shadow:none}
  .primary-cta{min-width:0;width:100%}
  .proof{justify-content:flex-start;gap:9px 14px;margin-top:14px;font-size:11px}
  .proof span:before{width:16px;height:16px;font-size:9px}
}

@media(min-width:681px){
  .site-header{padding-inline:clamp(24px,4vw,68px)}
  .hero-image img{object-position:center bottom;transform:scale(1.1);transform-origin:center bottom}
  .hero:after{background:linear-gradient(90deg,rgba(251,252,250,.34) 0%,rgba(251,252,250,.16) 20%,rgba(251,252,250,.04) 34%,transparent 48%)}
  .hero-copy{left:22%;top:53%;width:min(760px,43vw)}
  .hero h1{font-size:clamp(74px,6.8vw,112px)}
  .hero-intro{max-width:680px;font-size:clamp(18px,1.45vw,23px)}
  .hero-intro{margin-left:auto;margin-right:auto}
  .primary-cta{min-width:520px;min-height:88px;padding-inline:32px;border-radius:18px;font-size:27px;box-shadow:0 18px 44px rgba(79,125,114,.28)}
  .primary-cta{margin-inline:auto}
  .proof{gap:14px 22px;margin-top:19px;font-size:12px}
}