/* ============================================================
   NextAffinity v2 — editorial build
   Navy Ink #373643 · Affinity Green #18CB96
   ============================================================ */

:root{
  --ink:#373643;
  --ink-soft:#5a5964;
  --ink-mute:#8b8a94;
  --green:#18cb96;
  --green-deep:#0e9e75;
  --green-dark:#0a4634;
  --mint:#e9fbf4;
  --cloud:#f6f6f8;
  --line:#e3e3e8;
  --line-dark:rgba(255,255,255,.16);
  --paper:#ffffff;

  --step:clamp(1.4rem,4vw,3.4rem);
  --wrap:1160px;
  --ease:cubic-bezier(.25,.85,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:17px;line-height:1.75;
  color:var(--ink-soft);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Outfit',sans-serif;
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.04;
  margin:0;
}
p{margin:0;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--green);color:var(--green-dark);}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}

/* ---------- type helpers ---------- */

.kicker{
  font-family:'Outfit',sans-serif;
  font-size:13px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--green-deep);
}
.on-dark .kicker{color:var(--green);}

.h-hero{font-size:clamp(2.9rem,7vw,5.4rem);margin-top:1.3rem;}
.h-big{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-top:1.1rem;}
.l2{display:block;padding-left:var(--step);}
.l3{display:block;padding-left:calc(var(--step)*2);}

.hl{
  background-image:linear-gradient(var(--green),var(--green));
  background-repeat:no-repeat;
  background-size:100% .16em;
  background-position:0 92%;
  padding:0 .06em;
}
.on-dark h2,.on-dark h3{color:#fff;}

.lede{font-size:19px;max-width:56ch;margin-top:1.7rem;}
.on-dark .lede{color:rgba(255,255,255,.72);}

/* ---------- nav ---------- */

.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.nav.scrolled{border-bottom-color:var(--line);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:80px;gap:2rem;}
.nav-logo img{height:26px;width:auto;image-rendering:-webkit-optimize-contrast;}
.nav-links{display:flex;gap:2.2rem;align-items:baseline;}
.nav-links a{
  font-size:15.5px;font-weight:500;color:var(--ink-soft);
  transition:color .2s var(--ease);
}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{
  color:var(--ink);
  border-bottom:2px solid var(--green);
  padding-bottom:2px;
}
.nav-go{
  font-family:'Outfit',sans-serif;font-weight:600;font-size:15.5px;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:.5rem;
}
.nav-go .aw{transition:transform .2s var(--ease);}
.nav-go:hover .aw{transform:translate(2px,-2px);}
.nav-go:hover{color:var(--green-deep);}

.burger{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:10px;
  flex-direction:column;justify-content:center;gap:5px;
}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.25s var(--ease);}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.m-menu{display:none;background:#fff;border-top:1px solid var(--line);}
.m-menu.open{display:block;}
.m-menu a{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.05rem 28px;border-bottom:1px solid var(--line);
  font-family:'Outfit',sans-serif;font-weight:500;font-size:18px;color:var(--ink);
}

/* ---------- hero ---------- */

.hero{position:relative;padding:6rem 0 5rem;overflow:hidden;}
.hero-mark{
  position:absolute;right:-120px;top:70px;
  width:min(430px,36vw);opacity:1;pointer-events:none;
}
.hero .wrap{position:relative;}

/* ---------- stage (homepage hero) ---------- */

.stage{
  position:relative;overflow:hidden;
  padding:6rem 0 5.4rem;
  background:linear-gradient(180deg,#f2fcf8 0%,#f8fefb 42%,#ffffff 100%);
  border-bottom:1px solid var(--line);
}
.stage::before,.stage::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
.stage::before{
  width:760px;height:760px;top:-380px;left:-260px;
  background:radial-gradient(circle,rgba(24,203,150,.20) 0%,rgba(24,203,150,0) 68%);
}
.stage::after{
  width:640px;height:640px;bottom:-360px;right:-200px;
  background:radial-gradient(circle,rgba(24,203,150,.16) 0%,rgba(24,203,150,0) 68%);
}
.stage-in{position:relative;}
.stage-mark{
  width:38px;height:auto;margin:0 auto 1.4rem;
  animation:markIn .8s var(--ease) both;
}
@keyframes markIn{from{opacity:0;transform:translateY(-8px) scale(.9);}to{opacity:1;transform:none;}}
.stage-in{max-width:940px;margin:0 auto;text-align:center;}
.stage h1{
  font-size:clamp(2.15rem,4.6vw,3.35rem);
  line-height:1.12;
  margin-top:1.5rem;
  letter-spacing:-.035em;
}
.stage > .wrap > p,.stage-in > p{
  font-size:19px;line-height:1.65;
  color:var(--ink-soft);
  max-width:50ch;margin:1.6rem auto 0;
}
.stage-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-top:2.6rem;}
.cta{
  font-family:'Outfit',sans-serif;font-weight:600;font-size:16.5px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:.95rem 2rem;border-radius:999px;
  border:1.5px solid var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.cta:focus-visible{outline:3px solid var(--green-deep);outline-offset:3px;}
.cta-solid{background:var(--ink);color:#fff;}
.cta-solid:hover{background:var(--green-deep);border-color:var(--green-deep);}
.cta-line{background:transparent;color:var(--ink);}
.cta-line:hover{background:#fff;border-color:var(--green-deep);color:var(--green-deep);}

.stage-bar{
  list-style:none;margin:3.4rem 0 0;padding:0;
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:.7rem 2.2rem;
}
.stage-bar li{
  display:flex;align-items:center;gap:.5rem;
  font-size:14.5px;font-weight:500;color:var(--green-dark);
  background:rgba(24,203,150,.13);
  padding:.42rem 1rem .42rem .85rem;
  border-radius:999px;
}
.stage-bar li::before{
  content:"";width:7px;height:7px;flex:none;
  background:var(--green-deep);border-radius:2px;transform:rotate(45deg);
}
.stage-in > *{animation:riseIn .85s var(--ease) both;}
.stage-in .kicker{animation-delay:.06s;}
.stage-in h1{animation-delay:.13s;}
.stage-in > p{animation-delay:.2s;}
.stage-cta{animation-delay:.27s;}
.stage-bar{animation-delay:.34s;}
@keyframes riseIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.stage h1 .hl{
  background-size:0 .16em;
  animation:drawHl .7s var(--ease) .75s forwards;
}
@keyframes drawHl{to{background-size:100% .16em;}}

@media (max-width:780px){
  .stage{padding:3.4rem 0 3.4rem;}
  .stage::before{width:460px;height:460px;top:-250px;left:-180px;}
  .stage::after{display:none;}
  .stage-mark{width:32px;margin-bottom:1.1rem;}
  .stage-in > p{font-size:17px;}
  .stage-cta{gap:.7rem;}
  .cta{padding:.9rem 1.7rem;font-size:16px;}
  .stage-bar{gap:.5rem;margin-top:2.4rem;}
  .stage-bar li{font-size:13.5px;padding:.36rem .85rem .36rem .7rem;}
}

/* ---------- index rows (big directional links) ---------- */

.rows{margin-top:3.6rem;border-top:1px solid var(--line);}
.row-link{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:1.7rem 0;
  border-bottom:1px solid var(--line);
  font-family:'Outfit',sans-serif;font-weight:600;
  font-size:clamp(1.45rem,3vw,2.15rem);
  color:var(--ink);letter-spacing:-.02em;
  transition:padding-left .28s var(--ease),color .2s var(--ease);
}
.row-link small{
  font-family:'Inter',sans-serif;font-weight:400;font-size:15px;
  color:var(--ink-mute);letter-spacing:0;
  flex:1;text-align:left;padding-left:1rem;
}
.row-link .aw{
  font-family:'Inter',sans-serif;
  color:var(--green-deep);
  transition:transform .28s var(--ease);
}
.row-link:hover{padding-left:1.1rem;color:var(--green-deep);}
.row-link:hover .aw{transform:translate(4px,-4px);}
.on-dark .rows{border-color:var(--line-dark);}
.on-dark .row-link{border-color:var(--line-dark);color:#fff;}
.on-dark .row-link:hover{color:var(--green);}

/* ---------- sections ---------- */

.sec{padding:6.5rem 0;}
.sec-navy{background:var(--ink);color:rgba(255,255,255,.72);}
.sec-mint{background:var(--mint);}
.sec-cloud{background:var(--cloud);}
.sec-head{max-width:66ch;}

/* ---------- triptych (numbered arguments) ---------- */

.trip{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2.6rem;margin-top:4rem;
}
.trip-item{border-top:1px solid var(--line-dark);padding-top:1.6rem;}
.sec:not(.on-dark) .trip-item{border-color:var(--line);}
.trip-item .no{
  font-family:'Outfit',sans-serif;font-weight:700;
  font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px var(--green);
}
.trip-item h3{font-size:19.5px;margin:1.2rem 0 .6rem;}
.trip-item p{font-size:15.5px;line-height:1.7;}
.on-dark .trip-item p{color:rgba(255,255,255,.62);}

/* ---------- split panels ---------- */

.split{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:3.8rem;}
.panel{
  border-radius:26px;padding:3rem 2.7rem 2.7rem;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.panel-ink{background:var(--ink);}
.panel-mint{background:var(--mint);margin-top:var(--step);}
.panel h3{font-size:clamp(1.55rem,2.4vw,2rem);}
.panel-ink h3{color:#fff;}
.panel .intro{margin-top:1rem;font-size:16px;}
.panel-ink .intro{color:rgba(255,255,255,.68);}
.panel-mint .intro{color:var(--ink-soft);}

.ledger{margin:2rem 0 2.4rem;}
.ledger div{
  padding:.85rem 0;
  border-top:1px solid var(--line-dark);
  font-size:15.5px;line-height:1.55;
}
.panel-mint .ledger div{border-color:rgba(55,54,67,.14);color:var(--ink);}
.panel-ink .ledger div{color:rgba(255,255,255,.86);}
.ledger b{font-weight:600;font-family:'Outfit',sans-serif;}
.panel-ink .ledger b{color:#fff;}

.panel-go{
  margin-top:auto;align-self:flex-start;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:16.5px;
  display:inline-flex;align-items:center;gap:.55rem;
  padding-bottom:3px;border-bottom:2px solid var(--green);
  transition:gap .25s var(--ease);
}
.panel-ink .panel-go{color:#fff;}
.panel-mint .panel-go{color:var(--ink);}
.panel-go:hover{gap:.95rem;}
.panel-mark{
  position:absolute;right:-56px;bottom:-66px;width:220px;
  pointer-events:none;
}

/* ---------- staggered steps ---------- */

.steps{margin-top:4.2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;}
.steps.four{grid-template-columns:repeat(4,1fr);}
.stepp{padding-top:1.5rem;border-top:2px solid var(--ink);}
.stepp:nth-child(2){margin-top:2.6rem;}
.stepp:nth-child(3){margin-top:5.2rem;}
.stepp:nth-child(4){margin-top:7.8rem;}
.stepp .no{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:15px;
  color:var(--green-deep);letter-spacing:.08em;
}
.stepp h3{font-size:20px;margin:.7rem 0 .55rem;}
.stepp p{font-size:15.5px;line-height:1.68;}

/* ---------- statement ---------- */

.statement{
  font-family:'Outfit',sans-serif;font-weight:600;
  font-size:clamp(1.7rem,3.6vw,2.9rem);
  line-height:1.22;letter-spacing:-.025em;
  color:var(--ink);max-width:24ch;
}
.statement .g{color:var(--green-deep);}
.duo{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;
  margin-top:3.6rem;max-width:960px;
}
.duo h4{font-size:17px;margin-bottom:.6rem;}
.duo h4::before{
  content:"";display:inline-block;width:10px;height:10px;
  background:var(--green);border-radius:3px;
  transform:rotate(45deg);margin-right:.7rem;
}
.duo p{font-size:15.5px;line-height:1.7;}

/* ---------- article (about) ---------- */

.article{max-width:66ch;}
.article p{margin-top:1.4rem;font-size:17.5px;}
.article p:first-of-type{margin-top:2.2rem;font-size:20px;color:var(--ink);}

/* ---------- contact ---------- */

.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:4.5rem;align-items:start;margin-top:3.6rem;}
.c-item{padding:1.4rem 0;border-top:1px solid var(--line);}
.c-item .lab{
  font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);
}
.c-item .val{font-family:'Outfit',sans-serif;font-weight:600;font-size:19px;color:var(--ink);margin-top:.3rem;}
.c-item a.val:hover{color:var(--green-deep);}

form{display:flex;flex-direction:column;gap:1.3rem;}
.field label{
  display:block;font-family:'Outfit',sans-serif;font-weight:600;
  font-size:14.5px;color:var(--ink);margin-bottom:.45rem;
}
.field input,.field select,.field textarea{
  width:100%;
  font-family:'Inter',sans-serif;font-size:16px;color:var(--ink);
  background:var(--cloud);
  border:1.5px solid transparent;border-radius:14px;
  padding:.9rem 1.1rem;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.field textarea{min-height:150px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:#fff;border-color:var(--green);
}
.side-pick{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.side-pick label{position:relative;display:block;}
.side-pick input{position:absolute;left:0;top:0;opacity:0;pointer-events:none;}
.side-pick span{
  display:block;text-align:center;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;
  padding:.95rem;border-radius:14px;
  border:1.5px solid var(--line);color:var(--ink-soft);
  cursor:pointer;transition:.2s var(--ease);
}
.side-pick input:checked + span{
  background:var(--mint);border-color:var(--green);color:var(--green-dark);
}
.side-pick input:focus-visible + span{outline:3px solid var(--green-deep);outline-offset:2px;}

.submit{
  font-family:'Outfit',sans-serif;font-weight:600;font-size:17px;
  background:var(--ink);color:#fff;
  border:0;border-radius:999px;
  padding:1.05rem 2rem;cursor:pointer;
  align-self:flex-start;
  display:inline-flex;gap:.6rem;align-items:center;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.submit:hover{background:var(--green-deep);transform:translateY(-2px);}
.submit:focus-visible{outline:3px solid var(--green-deep);outline-offset:3px;}

/* ---------- footer ---------- */

.foot{background:var(--ink);color:rgba(255,255,255,.6);padding:4.4rem 0 2rem;font-size:15px;}
.foot-top{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;flex-wrap:wrap;
  padding-bottom:2.6rem;border-bottom:1px solid var(--line-dark);
}
.foot-top img{height:28px;}
.foot-top .big{
  font-family:'Outfit',sans-serif;font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.8rem);color:#fff;letter-spacing:-.02em;
}
.foot-cols{display:flex;gap:4rem;flex-wrap:wrap;padding:2.4rem 0;}
.foot-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.foot-cols a:hover{color:var(--green);}
.foot-base{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
  padding-top:1.8rem;border-top:1px solid var(--line-dark);
  font-size:13.5px;color:rgba(255,255,255,.42);
}

/* ---------- reveal ---------- */

.rv{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease);}
.rv.in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
  .rv{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* ---------- responsive ---------- */

@media (max-width:1020px){
  .trip{grid-template-columns:1fr;gap:0;}
  .trip-item{padding:1.6rem 0;}
  .split{grid-template-columns:1fr;}
  .panel-mint{margin-top:0;}
  .steps,.steps.four{grid-template-columns:1fr 1fr;}
  .stepp:nth-child(n){margin-top:0;}
  .contact-grid{grid-template-columns:1fr;gap:3rem;}
  .hero-mark{opacity:.16;}
}
@media (max-width:780px){
  .nav-links,.nav-go{display:none;}
  .burger{display:flex;}
  .steps,.steps.four{grid-template-columns:1fr;}
  .duo{grid-template-columns:1fr;gap:2rem;}
  .l2,.l3{padding-left:0;}
  .sec{padding:4.4rem 0;}
  .hero{padding:4rem 0 3.6rem;}
  .hero-mark{display:none;}
  .row-link small{display:none;}
  .panel{padding:2.2rem 1.7rem;}
  .foot-cols{gap:2.4rem;}
}