:root{
  color-scheme:light;
  --paper:#FFFFFF; --cream:#F2F8E4; --cream2:#E2EFC8; --ink:#22271F; --ink2:#3A4137; --muted:#6B7266; --dim:#9AA095;
  --forest:#22352A; --forest2:#2B4133; --green:#3F5C3B; --lime:#A8D26D; --limeSoft:#EEF5DF; --sky:#DCEBF0;
  --amber:#B8780F; --amberSoft:#FBEFD6;
  --line:rgba(34,53,42,.12); --line2:rgba(34,53,42,.07);
  --glass:rgba(255,255,255,.55); --glassStrong:rgba(255,255,255,.72); --glassLine:rgba(255,255,255,.85);
  --glassShadow:0 12px 40px rgba(34,53,42,.10), inset 0 1px 0 rgba(255,255,255,.9);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --display:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --wrap:1140px; --pad:clamp(1rem,4vw,2rem); --r:18px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#fff}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);position:relative}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.08;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.2rem,4.5vw,3.7rem);font-weight:600;letter-spacing:-.045em;line-height:1.08}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.35rem)}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.lede{color:var(--muted);font-size:clamp(1rem,1.15vw,1.08rem);max-width:56ch;line-height:1.6}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.glass{background:var(--glass);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--glassLine);box-shadow:var(--glassShadow)}
.tabular{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.3rem;border-radius:999px;font-weight:600;font-size:.92rem;text-decoration:none;border:1px solid transparent;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s;cursor:pointer;font-family:var(--sans);line-height:1.2}
.btn.dark{background:var(--forest);color:#fff}
.btn.dark:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(34,53,42,.28)}
.btn.glassb{background:var(--glass);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-color:var(--glassLine);color:var(--forest);box-shadow:var(--glassShadow)}
.btn.glassb:hover{background:var(--glassStrong);transform:translateY(-2px);box-shadow:0 12px 28px rgba(34,53,42,.14),inset 0 1px 0 rgba(255,255,255,.9)}
.btn.sage{background:#1F4A31;color:#fff}
.btn.sage:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(31,74,49,.3);background:#26573A}
.btn.lime{background:var(--lime);color:var(--forest)}
.btn.lime:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(168,210,109,.45)}
.btn.sm{padding:.55rem 1rem;font-size:.85rem}
.tlink{font-weight:600;font-size:.92rem;text-decoration:none;color:var(--green);display:inline-flex;align-items:center;gap:.3rem}
.tlink:hover{text-decoration:underline}

/* nav */
.nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + .8rem);z-index:30;margin-top:.8rem;pointer-events:none}
.nav .wrap{display:flex;justify-content:center}
.navbar{pointer-events:auto;display:flex;align-items:center;gap:1.2rem;padding:.45rem .5rem .45rem 1.1rem;border-radius:999px;width:100%;max-width:var(--wrap)}
.logo{font-family:var(--display);font-weight:700;letter-spacing:.1em;font-size:1rem;text-decoration:none}
.nav .links{display:flex;gap:1.3rem;font-size:.88rem;color:var(--ink2);margin-left:.4rem}
.nav .links a{text-decoration:none;opacity:.8}
.nav .links a:hover{opacity:1}
.nav .right{margin-left:auto;display:flex;gap:.4rem;align-items:center}
@media (max-width:860px){.nav .links{display:none}}

/* hero */
.flow{background:linear-gradient(180deg,rgba(255,255,255,0) 86%,#FFFFFF 100%),linear-gradient(180deg,rgba(171,217,99,.9) 0%,rgba(171,217,99,0) 22%),linear-gradient(212deg,#ABD963 0%,#C6E57C 16%,#EDF1B4 36%,#F8F7E3 50%,#FFFFFF 72%);background-color:#FFFFFF}
.hero{position:relative;margin-top:-4.2rem;min-height:clamp(620px,92vh,900px);display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:transparent}
.heroimg{display:none}
.herofade{display:none}
.herotext{text-align:center;display:grid;justify-items:center;gap:1.6rem;padding-top:clamp(8.5rem,21vh,13rem);max-width:1040px;margin-inline:auto}
.herotext h1{text-wrap:initial}
.hero h1{color:#0E3A1F}
.herotext .lede{text-align:center;max-width:60ch;color:var(--ink2);line-height:1.65}
.ctas{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:center;align-items:center}
.js .herotext>*{animation:rise 1s var(--ease) both}
.js .herotext>*:nth-child(2){animation-delay:.1s}.js .herotext>*:nth-child(3){animation-delay:.2s}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem}
.ticks li{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.92rem;color:var(--ink2)}
.ticks .ic{width:17px;height:17px;color:var(--green)}
.js .herotext>*:nth-child(4){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* capability marquee (kept: approved). Sits at the foot of the hero, gliding over the hills. */
.marq{margin-top:auto;padding-block:clamp(2.5rem,7vh,4.5rem) clamp(2.4rem,6vh,3.8rem);overflow:hidden;position:relative}
.marq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marq .track{display:flex;gap:.7rem;width:max-content;animation:slide 48s linear infinite}
.marq:hover .track{animation-play-state:paused}
.chip{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1rem .6rem .8rem;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--forest);white-space:nowrap}
.chip .ic{width:16px;height:16px;color:var(--green)}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections: alternating light bands */
section{padding-block:clamp(3.5rem,9vh,6.5rem);background:var(--paper)}
section.cream{background:var(--cream)}
.shead{display:grid;gap:.7rem;justify-items:center;text-align:center;max-width:720px;margin:0 auto clamp(1.8rem,5vh,3rem)}
.shead .lede{text-align:center}
.shead.left{justify-items:start;text-align:left;margin-inline:0}
.shead.left .lede{text-align:left}

#problem{background:transparent}
/* bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:.9rem}
.tile{border-radius:var(--r);padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:hidden;min-height:170px;background:var(--cream);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tile:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(34,53,42,.12)}
.tile .ico{width:38px;height:38px;border-radius:50%;background:var(--limeSoft);color:var(--green);display:grid;place-items:center}
.tile .big{font-family:var(--display);font-weight:600;font-size:2.3rem;letter-spacing:-.04em;line-height:1;color:var(--forest);font-variant-numeric:tabular-nums}
.tile h3{margin-top:auto;font-size:1.05rem;line-height:1.3;max-width:22ch}
.tile p{color:var(--muted);font-size:.9rem;max-width:34ch}
.tile.photo{grid-column:2/4;grid-row:1/3;min-height:356px;color:#fff;padding:1.5rem;background:url(img/tile.jpg) center/cover no-repeat}
.tile.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,53,42,.42) 0%,rgba(34,53,42,.14) 40%,rgba(34,53,42,.78) 100%)}
.tile.photo>*{position:relative}
.tile.photo .big{color:#fff}
.tile.photo h3{color:#fff;font-size:clamp(1.25rem,1.9vw,1.6rem);max-width:24ch}
.tile.photo p{color:rgba(255,255,255,.9);max-width:44ch}
.tile.photo .ico{background:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(8px)}
.tile.photo .btn{align-self:flex-start;margin-top:.6rem}
.tile.dark{background:var(--forest);color:#fff}
.tile.dark h3{color:#fff}
.tile.dark p{color:rgba(255,255,255,.72)}
.tile.dark .big{color:var(--lime)}
.tile.dark .ico{background:rgba(255,255,255,.1);color:var(--lime)}
.tile.tall{grid-row:1/3;min-height:356px;justify-content:center;align-items:center;text-align:center;background:var(--paper);border:1px solid var(--line2)}
.tile.tall .word{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.2vw,2.6rem);letter-spacing:-.04em;color:var(--forest)}
.tile.tall h3{margin-top:.3rem;font-size:1.05rem;max-width:18ch;text-align:center}
.tile.tall p{text-align:center;max-width:30ch}
.gauge{position:relative;width:168px;height:168px;display:grid;place-items:center;margin-bottom:.4rem}
.gauge svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:11;stroke-linecap:round}
.gauge .trk{stroke:var(--cream2)}
.gauge .arc{stroke:#B1D17A;animation:draw 1.6s var(--ease) both}
.gauge .word{position:relative;font-size:1.9rem}
.gkey{display:inline-flex;align-items:center;gap:.45rem;margin-top:.5rem;font-size:.8rem;color:var(--muted)}
.gkey i{width:10px;height:10px;border-radius:50%;background:#B1D17A}
@keyframes draw{from{stroke-dashoffset:389.6}}
@media (max-width:860px){
  .bento{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);scrollbar-width:none}
  .bento::-webkit-scrollbar{display:none}
  .tile{flex:0 0 78%;scroll-snap-align:start;min-height:220px}
  .tile.photo,.tile.tall{min-height:260px}
}

/* services */
.caps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.cap{border-radius:var(--r);padding:1.4rem 1.3rem 1.3rem;background:var(--cream);display:flex;flex-direction:column;gap:.55rem;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.cap:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(34,53,42,.12)}
.cap .ico{width:38px;height:38px;border-radius:50%;background:var(--limeSoft);color:var(--green);display:grid;place-items:center;margin-bottom:.35rem}
.cap h3{font-size:1.1rem}
.cap p{color:var(--muted);font-size:.92rem;line-height:1.5}
.cap .mt{margin-top:auto;padding-top:.8rem;display:flex;gap:.45rem;align-items:flex-start;font-size:.8rem;color:var(--ink2)}
.cap .mt .ic{width:15px;height:15px;color:var(--green);margin-top:.1rem}
.also{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;font-size:.9rem;color:var(--muted)}
.also a{color:var(--green);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(63,92,59,.35)}
.also a:hover{border-bottom-color:var(--green)}
@media (max-width:860px){
  .caps{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);scrollbar-width:none}
  .caps::-webkit-scrollbar{display:none}
  .cap{flex:0 0 78%;scroll-snap-align:start}
}

/* review demo */
.review{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:1rem;align-items:start}
.pane{border-radius:var(--r);overflow:hidden;background:var(--paper);border:1px solid var(--line2);box-shadow:0 20px 50px rgba(34,53,42,.06)}
.pane .bar{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border-bottom:1px solid var(--line2);font-size:.8rem;color:var(--muted);background:var(--cream)}
.pane .bar .dot{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.pane .bar .dot.on{background:var(--green);box-shadow:0 0 8px var(--lime);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.35}}
.pane .bar .st{margin-left:auto;font-weight:600;color:var(--ink2)}
.ad{position:relative;padding:1.4rem 1.4rem 1.2rem}
.adhead{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.adhead .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#C9D9B1,#4E7A3A)}
.adhead b{display:block;font-size:.92rem}
.adhead span{font-size:.78rem;color:var(--muted)}
.adtext{font-size:1.05rem;line-height:1.7}
.adtext .f{position:relative;border-radius:4px;padding:0 .15em;transition:background .4s,color .4s;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.adtext .f.hit{background:var(--amberSoft);color:var(--amber);box-shadow:inset 0 -1.5px 0 var(--amber)}
.adtext.fixed{color:var(--green);display:none}
.ad.showfix .adtext.orig{display:none}.ad.showfix .adtext.fixed{display:block}
.scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:0;pointer-events:none;box-shadow:0 0 16px var(--lime)}
.scan.run{animation:scan 1.5s var(--ease) forwards}
@keyframes scan{0%{opacity:1;top:0}100%{opacity:0;top:100%}}
.adfoot{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center;padding:1rem 1.4rem;border-top:1px solid var(--line2);font-size:.82rem;color:var(--muted)}
.sw{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--ink)}
.sw input{accent-color:var(--green)}
.log{padding:.6rem .5rem;display:grid;gap:.3rem;min-height:300px}
.entry{display:grid;grid-template-columns:auto 1fr;gap:.7rem;padding:.75rem .8rem;border-radius:12px;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.entry.in{opacity:1;transform:none}
.entry .ic{color:var(--amber);margin-top:.1rem}
.entry b{display:block;font-size:.92rem;font-weight:600;margin-bottom:.15rem}
.entry .rule{font-size:.78rem;color:var(--muted);display:block;margin-bottom:.35rem}
.entry .fix{font-size:.86rem;color:var(--muted)}
.entry .fix em{font-style:normal;color:var(--green);font-weight:600}
.entry .caret{display:inline-block;width:.5em;height:1em;background:var(--green);vertical-align:-.15em;animation:blink .8s infinite}
.sum{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.2rem;border-top:1px solid var(--line2);font-size:.82rem;color:var(--muted);opacity:0;transition:opacity .5s;background:var(--cream)}
.sum.in{opacity:1}
.sum b{color:var(--green);font-weight:600}
.sum .ic{color:var(--green);width:16px;height:16px}
.fine{font-size:.78rem;color:var(--dim);margin-top:1rem;text-align:center}
@media (max-width:860px){.review{grid-template-columns:1fr}.log{min-height:0}}

/* tables */
.tblwrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line2);background:var(--paper)}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.tbl th,.tbl td{text-align:left;padding:.95rem 1.1rem;border-bottom:1px solid var(--line2);vertical-align:top}
.tbl th{font-size:.8rem;color:var(--muted);font-weight:600;background:var(--cream)}
.tbl tr:last-child td{border-bottom:0}
.tbl td b{font-weight:600}
.tbl td .sub{display:block;font-size:.82rem;color:var(--muted)}
.tbl tr.hot td{background:var(--limeSoft)}
.tbl td.num{font-weight:700;font-variant-numeric:tabular-nums;color:var(--forest);white-space:nowrap}
.tbl a{text-decoration:none;font-weight:600;color:var(--green)}

/* CTA */
.cta{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(4rem,10vh,7rem);background:var(--paper)}
.cta .bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(35deg,#ABD963 0%,#C6E57C 22%,#EDF1B4 46%,#FFFFFF 74%)}
.cta .veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--paper) 0%,rgba(255,255,255,.15) 30%,rgba(255,255,255,.15) 70%,var(--paper) 100%)}
.ctacard{border-radius:24px;padding:clamp(1.6rem,4vw,2.8rem);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:1.5rem;align-items:center;max-width:940px;margin-inline:auto}
.ctacard .ctas{justify-content:flex-end}
@media (max-width:860px){.ctacard{grid-template-columns:1fr}.ctacard .ctas{justify-content:flex-start}}
footer{padding-block:1.5rem 3rem;font-size:.8rem;color:var(--dim);background:var(--paper)}
footer .wrap{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between}

/* inner page header */
.phead{position:relative;margin-top:-4.2rem;min-height:clamp(480px,64vh,640px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding-bottom:clamp(2rem,5vh,3.5rem);background:linear-gradient(180deg,rgba(171,217,99,.9) 0%,rgba(171,217,99,0) 34%),linear-gradient(215deg,#ABD963 0%,#C6E57C 22%,#EDF1B4 46%,#F8F7E3 60%,#FFFFFF 74%);background-color:#FFFFFF}
.phead h1{color:#0E3A1F}
.phead .heroimg{background-position:center 65%}
.phead .herofade{background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,.6) 62%,var(--paper) 100%)}
.crumb{font-size:.82rem;color:var(--muted);display:flex;gap:.5rem;margin-bottom:1rem}
.crumb a{text-decoration:none}
.pheadgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:2rem;align-items:end}
.pheadgrid h1{font-size:clamp(2rem,4vw,3.3rem)}
.glance{border-radius:var(--r);padding:.4rem 1.2rem}
.glance table{width:100%;border-collapse:collapse;font-size:.9rem}
.glance td{padding:.7rem 0;border-bottom:1px solid var(--line2);vertical-align:top}
.glance tr:last-child td{border-bottom:0}
.glance td:first-child{color:var(--muted);width:42%}
.glance td:last-child{font-weight:600}
@media (max-width:860px){.pheadgrid{grid-template-columns:1fr}}

/* problems: icon + short text, two columns */
.probs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2.5rem}
.prob{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.prob .ico{width:44px;height:44px;border-radius:50%;background:var(--limeSoft);color:var(--green);display:grid;place-items:center}
.prob b{display:block;font-weight:600;font-size:1.1rem;letter-spacing:-.01em;margin-bottom:.2rem}
.prob p{color:var(--muted);font-size:.92rem;max-width:40ch}
@media (max-width:760px){.probs{grid-template-columns:1fr}}

/* faq */
.faq{max-width:800px;margin-inline:auto;display:grid;gap:.4rem}
.faq details{border-radius:14px;padding:.2rem 1.2rem;background:var(--paper);border:1px solid var(--line2)}
.faq summary{cursor:pointer;font-weight:600;padding:.9rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-weight:600}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted);padding-bottom:1rem;font-size:.95rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
  .marq .track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

/* process: four steps joined by one line */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;position:relative}
.steps::before{content:"";position:absolute;top:22px;left:22px;right:calc((100% - 4.5rem)/4 - 22px);height:1px;background:rgba(34,53,42,.22)}
.step{display:grid;gap:.45rem;align-content:start;position:relative}
.step .ico{width:44px;height:44px;border-radius:50%;background:var(--forest);color:var(--lime);display:grid;place-items:center;box-shadow:0 0 0 8px var(--cream);margin-bottom:.6rem}
.step h3{font-size:1.2rem}
.step p{color:var(--muted);font-size:.92rem;line-height:1.5;max-width:30ch}
@media (max-width:760px){
  .steps{grid-template-columns:1fr;gap:1.6rem}
  .steps::before{top:22px;bottom:22px;left:22px;right:auto;width:1px;height:auto}
  .step{grid-template-columns:auto 1fr;column-gap:1rem}
  .step .ico{grid-row:1/3;margin-bottom:0}
  .step p{max-width:none}
}

#privacy .probs{max-width:940px;margin-inline:auto}

/* capabilities as two wide cards */
.caps.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:940px;margin-inline:auto}
.caps.two .cap{padding:1.8rem 1.7rem 1.6rem}
.caps.two .cap h3{font-size:clamp(1.25rem,1.8vw,1.5rem)}
.caps.two .cap p{font-size:1rem;max-width:44ch}
.caps.two .cap .mt{font-size:.88rem}
.caps.two+.also{max-width:940px;margin-inline:auto}
@media (max-width:860px){
  .caps.two{display:grid;grid-template-columns:1fr;overflow:visible;margin-inline:0;padding-inline:0;padding-bottom:0}
}

/* process, Heidi-style: four titles with one line each, no icons. The current stage is dark, the others grey,
   and a thin underline fills beneath the current one as you scroll. Desktop pins the section; phones keep a list. */
#process .steps{column-gap:0;row-gap:0}
#process .steps::before{display:none}
#process .step{display:block;position:relative;text-align:center;padding:0 1.2rem 1.5rem;border-bottom:1.5px solid var(--line)}
#process .step::after{content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:2px;background:var(--forest);transform:scaleX(var(--s,0));transform-origin:left}
#process .step h3{font-size:clamp(1.2rem,1.6vw,1.45rem);margin-bottom:.5rem;transition:color .5s var(--ease)}
#process .step p{margin:0 auto;max-width:25ch;font-size:.93rem;transition:color .5s var(--ease)}
.js #process:not(.still) .step h3,.js #process:not(.still) .step p{color:var(--dim)}
.js #process:not(.still) .step.now h3{color:var(--ink)}
.js #process:not(.still) .step.now p{color:var(--muted)}
#process.pinned{height:calc(100vh + 240vh);padding-block:0}
#process.pinned .pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:4.5rem;padding-bottom:1.5rem}
#process.pinned .step{cursor:pointer}
.gets{display:none}
#process.still .gets{display:grid;justify-items:center;gap:.3rem;margin:.8rem 0 0;padding:0;list-style:none}
.gets li,.stagelist li{display:flex;align-items:center;gap:.45rem;font-size:.92rem;color:var(--ink2);line-height:1.35}
.gets li::before,.stagelist li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--lime)}
.stage{margin-top:clamp(2.2rem,6vh,3.5rem);display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;min-height:4.2rem}
.stagelabel{font-size:.9rem;color:var(--muted)}
.stagelist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.8rem}
.stage.swap .stagelabel,.stage.swap .stagelist{animation:rise .55s var(--ease) both}
.stage.swap .stagelist{animation-delay:.06s}
@media (max-width:760px){
  #process .step{text-align:left;padding:.15rem 0 1.6rem 1.2rem;border-bottom:0;border-left:1.5px solid var(--line)}
  #process .step::after{left:-1.5px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:scaleY(var(--s,0));transform-origin:top}
  #process .step p{margin:0;max-width:none}
  #process.still .gets{justify-items:start}
}
/* tinted bands echo the hero: the same lime, faint, strongest top-right and fading to pale lime-white */
section.cream{background:linear-gradient(212deg,#E2F0C2 0%,#EDF5D6 30%,#F4F9E8 65%,#F7FAEF 100%)}
#process.pinned{background:#F7FAEF}
#process.pinned .pin{background:linear-gradient(212deg,#E2F0C2 0%,#EDF5D6 30%,#F4F9E8 65%,#F7FAEF 100%)}
/* hero clouds canvas: sits behind the hero content, over the flow gradient; fades in once drawing starts */
.hero .sky{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease)}
.hero .sky.on{opacity:1}
/* moving background canvases (hero clouds, capabilities silk): behind the section's content, fade in once drawing */
.hero .sky,.shaderbg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease)}
.hero .sky.on,.shaderbg.on{opacity:1}
/* capabilities sits on a lime silk band; the still version (phones, reduced motion) is the same colours with grain */
section.silk{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(212deg,#C6E57C 0%,#DDEEA6 28%,#EDF1B4 52%,#F7FAEF 100%)}
section.silk::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.35;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .55 0 0 0 0 .45 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
section.silk .shead h2{color:#0E3A1F}
section.silk .shead .lede{color:var(--ink2)}
section.silk .cap{background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.85);box-shadow:0 18px 44px rgba(34,53,42,.10),inset 0 1px 0 rgba(255,255,255,.9)}
section.silk .cap .ico{background:#fff}
/* capabilities band blends into its neighbours: white above, the process section's lime below (still version too) */
section.silk{padding-block:clamp(5.5rem,13vh,8.5rem)}
section.silk::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#FFFFFF 0%,rgba(255,255,255,0) 28%,rgba(240,247,221,0) 74%,#F0F7DD 100%)}
section.silk:has(.shaderbg.on)::after{display:none}

/* tighter rhythm between sections (2026-10-01): about a third less padding and a shorter heading gap */
section{padding-block:clamp(2.75rem,6.5vh,4.5rem)}
.shead{margin-bottom:clamp(1.5rem,4vh,2.4rem)}
section.silk{padding-block:clamp(3.5rem,8vh,5rem)}
section.silk::after{background:linear-gradient(180deg,#FFFFFF 0%,rgba(255,255,255,0) 20%,rgba(240,247,221,0) 80%,#F0F7DD 100%)}
.cta{padding-block:clamp(3rem,7vh,5rem)}
/* process while pinned: content sits just under the menu, not centred in a full screen, and a spacer after it
   gives the scroll distance. The gradient is fixed to the screen so it stays put while the stages change. */
#process.pinned{height:auto;padding-block:0;background:linear-gradient(212deg,#E2F0C2 0%,#EDF5D6 30%,#F4F9E8 65%,#F7FAEF 100%)}
#process.pinned .pin{height:auto;display:block;background:none;padding-top:clamp(5.5rem,11vh,6.5rem);padding-bottom:clamp(2.5rem,6vh,4rem)}
#process.pinned::after{content:"";display:block;height:200vh}
/* section rhythm, settled between the original and the tight version: roughly 130px between sections on a laptop */
section{padding-block:clamp(3.25rem,7.5vh,5.25rem)}
.shead{margin-bottom:clamp(1.7rem,4.5vh,2.8rem)}
section.silk{padding-block:clamp(4.5rem,10vh,6.5rem)}
.cta{padding-block:clamp(3.5rem,8.5vh,6rem)}
#process.pinned .pin{padding-top:clamp(6rem,13vh,7.5rem);padding-bottom:clamp(3rem,8vh,5rem)}
/* capabilities cards: contents centred to line up with the centred heading */
section.silk .cap{align-items:center;text-align:center}
section.silk .cap p{margin-inline:auto}
section.silk .cap .mt{justify-content:center;text-align:left}
/* the process section starts from exactly the colours the capabilities band ends on, then eases into its own gradient,
   so there is no visible line between them at any screen size */
#process{position:relative;isolation:isolate}
#process::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(120px,18vh,200px);z-index:-1;pointer-events:none;background:linear-gradient(90deg,#F0F7DD,#E2F0C2);-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}

/* ---- clients: rounded grainy green panel, sector tabs, sliding cards with the centre one in focus ---- */
.wrap.wide{max-width:1280px}
.cpanel{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;padding:clamp(2.6rem,6vh,4rem) 0 clamp(1.8rem,4vh,2.6rem);
  background:radial-gradient(60% 70% at 85% 5%,#D6E9A0 0%,rgba(214,233,160,0) 60%),radial-gradient(55% 60% at 15% 80%,#628C46 0%,rgba(98,140,70,0) 70%),radial-gradient(50% 60% at 55% 45%,#A8D26D 0%,rgba(168,210,109,0) 70%),#2E4A33}
.cpanel::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.5;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.cpanel .shaderbg{border-radius:inherit}
.cpanel .shead{padding-inline:var(--pad)}
.cpanel .shead h2{color:#fff}
.cpanel .shead .lede{color:rgba(255,255,255,.82)}
.ctabs{display:flex;gap:.25rem;width:max-content;max-width:calc(100% - 2*var(--pad));margin:0 auto clamp(1.6rem,4vh,2.4rem);padding:.3rem;border-radius:999px;overflow-x:auto;scrollbar-width:none;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ctabs::-webkit-scrollbar{display:none}
.ctab{flex:none;border:0;background:none;color:rgba(255,255,255,.88);font:500 .9rem/1 var(--sans);padding:.62rem 1rem;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .3s,color .3s}
.ctab:hover{color:#fff}
.ctab[aria-selected="true"]{background:#fff;color:var(--ink)}
.ctab:focus-visible,.cbtn:focus-visible,.cdot:focus-visible{outline:2px solid #fff;outline-offset:2px}
.carousel{overflow:hidden;touch-action:pan-y;cursor:grab;padding-block:.6rem 1rem}
.carousel:active{cursor:grabbing}
.ctrack{display:flex;gap:1.1rem;width:max-content;transition:transform .65s var(--ease);will-change:transform}
.ccard{width:min(380px,78vw);flex:none;display:flex;flex-direction:column;gap:1rem;padding:1.5rem 1.5rem 1.4rem;border-radius:20px;background:rgba(255,255,255,.95);box-shadow:0 24px 50px rgba(14,40,24,.28);text-align:left;
  opacity:.5;transform:scale(.93);transition:opacity .5s var(--ease),transform .6s var(--ease);user-select:none}
.ccard.on{opacity:1;transform:none}
.ccard:not(.on){cursor:pointer}
.ccard h3{font-size:1.35rem;color:var(--ink)}
.ccard .who,.ccard .rl{margin:0;display:grid;gap:.3rem;font-size:.95rem;color:var(--ink2);line-height:1.45}
.ccard .who span,.ccard .rl>span{font-size:.78rem;color:var(--muted)}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.rules li{display:flex;align-items:center;gap:.55rem;font-size:.93rem;color:var(--ink2)}
.rules li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--limeSoft)}
.ccard .tlink{margin-top:auto;padding-top:.2rem;font-size:.9rem}
.cnav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.4rem}
.cbtn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .25s}
.cbtn:hover{background:rgba(255,255,255,.28)}
.cbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cdots{display:flex;gap:.45rem}
.cdot{width:7px;height:7px;padding:0;border-radius:99px;border:0;background:rgba(255,255,255,.45);cursor:pointer;transition:width .35s var(--ease),background .3s}
.cdot.on{width:22px;background:#fff}
@media (max-width:760px){
  #clients .wrap.wide{padding-inline:.6rem}
  .cpanel{border-radius:22px}
  .ctab{font-size:.85rem;padding:.55rem .85rem}
}
/* looping row: every card sits at the centre line and is shifted left or right by the script */
.ctrack{position:relative;display:block;width:100%;transition:none;transform:none!important}
.ccard{position:absolute;left:50%;top:0;transition:opacity .5s var(--ease),transform .6s var(--ease)}
/* card contents centred to match the centred heading */
.ccard{text-align:center;align-items:center}
.ccard .who,.ccard .rl{justify-items:center}
.rules{justify-items:center}
/* clients panel condensed so it fits on one laptop screen under the menu */
section#clients{padding-block:clamp(1.5rem,4vh,2.5rem)}
.cpanel{padding:clamp(1.6rem,3.6vh,2.4rem) 0 clamp(1.1rem,2.6vh,1.6rem)}
.cpanel .shead{margin-bottom:clamp(.9rem,2.2vh,1.3rem);gap:.4rem;max-width:760px}
.cpanel .shead .lede{max-width:62ch}
.ctabs{margin-bottom:clamp(.9rem,2.4vh,1.4rem)}
.carousel{padding-block:.3rem .6rem}
.ccard{padding:1.15rem 1.3rem 1.1rem;gap:.65rem}
.ccard h3{font-size:1.2rem}
.ccard .who,.ccard .rl{gap:.15rem;font-size:.92rem}
.rules{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem .9rem}
.rules li{font-size:.88rem}
.ccard .tlink{padding:0}
.cnav{margin-top:.1rem}
.cbtn{width:36px;height:36px}
.cpanel .shead{max-width:900px}.cpanel .shead .lede{max-width:72ch;text-wrap:balance}
/* clients panel: a little more breathing room (about 630px tall), still one screen on a 768px-tall laptop */
.cpanel{padding:clamp(2.2rem,4.8vh,3rem) 0 clamp(1.6rem,3.4vh,2.1rem)}
.cpanel .shead{margin-bottom:clamp(1.2rem,2.8vh,1.7rem)}
.ctabs{margin-bottom:clamp(1.3rem,3vh,1.8rem)}
.carousel{padding-block:.5rem 1rem}
.ccard{padding:1.45rem 1.5rem 1.35rem;gap:.8rem}
.ccard h3{font-size:1.28rem}
.cnav{margin-top:.5rem}
.cpanel{padding:clamp(2.4rem,5.8vh,3.5rem) 0 clamp(1.8rem,4.2vh,2.5rem)}
/* logo: tighter letter spacing */
.logo{letter-spacing:.02em}

/* ---- calculator: sliders and tool toggles on the band, the yearly figure in a white card on the right ---- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(1.5rem,3.2vw,2.75rem);align-items:start;max-width:1080px;margin-inline:auto}
.cin{display:grid;gap:1.15rem}
.sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem}
.sl{display:grid;gap:.3rem}
.slhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.slhead label{font-weight:600;font-size:.92rem;color:var(--ink)}
.slhead output{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-.02em;color:var(--forest);font-variant-numeric:tabular-nums;white-space:nowrap}
.slnote{font-size:.78rem;color:var(--muted)}
.rng{--f:.5;--at:calc(11px + (100% - 22px) * var(--f));-webkit-appearance:none;appearance:none;width:100%;height:26px;margin:0;background:transparent;cursor:pointer}
.rng::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,#1F4A31 0,#1F4A31 var(--at),rgba(34,53,42,.14) var(--at))}
.rng::-moz-range-track{height:6px;border-radius:99px;background:rgba(34,53,42,.14)}
.rng::-moz-range-progress{height:6px;border-radius:99px;background:#1F4A31}
.rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;border:2px solid #1F4A31;box-shadow:0 4px 12px rgba(34,53,42,.22);transition:transform .2s var(--ease)}
.rng::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #1F4A31;box-shadow:0 4px 12px rgba(34,53,42,.22)}
.rng:active::-webkit-slider-thumb{transform:scale(1.12)}
.rng:focus-visible{outline:none}
.rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(63,92,59,.25),0 4px 12px rgba(34,53,42,.22)}
.rng:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px rgba(63,92,59,.25)}
.toolhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.35rem}
.toolhead span:first-child{font-weight:600;font-size:.92rem}
.tcount{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem}
.tool{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:.15rem;padding:.8rem .5rem .7rem;border-radius:14px;border:1px solid rgba(34,53,42,.1);background:rgba(255,255,255,.5);font:inherit;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .25s,border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.tool:hover{background:rgba(255,255,255,.85);transform:translateY(-1px)}
.tool .ic{width:20px;height:20px;color:var(--dim);margin-bottom:.25rem;transition:color .25s}
.tool b{font-weight:600;font-size:.84rem;line-height:1.25;color:var(--ink2);text-wrap:balance}
.tool .tx{font-size:.72rem;line-height:1.3;color:var(--dim)}
.tool::after{content:"";position:absolute;top:.5rem;right:.5rem;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(34,53,42,.2);background:#fff center/10px no-repeat;transition:background-color .25s,border-color .25s}
.tool[aria-pressed="true"]{background:#fff;border-color:#1F4A31;box-shadow:0 8px 22px rgba(34,53,42,.10)}
.tool[aria-pressed="true"] .ic{color:var(--green)}
.tool[aria-pressed="true"] b{color:var(--ink)}
.tool[aria-pressed="true"] .tx{color:var(--muted)}
.tool[aria-pressed="true"]::after{background-color:#1F4A31;border-color:#1F4A31;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E")}
.tool .fly{position:absolute;left:50%;top:-.35rem;z-index:2;font:600 .78rem/1 var(--sans);color:#1F4A31;background:#fff;padding:.3rem .5rem;border-radius:99px;box-shadow:0 6px 16px rgba(34,53,42,.16);pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums;animation:fly 1.1s var(--ease) forwards}
.tool .fly.neg{color:var(--muted)}
@keyframes fly{0%{opacity:0;transform:translate(-50%,6px)}20%{opacity:1;transform:translate(-50%,-6px)}75%{opacity:1;transform:translate(-50%,-10px)}100%{opacity:0;transform:translate(-50%,-18px)}}
.scope{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.85rem;color:var(--ink2);margin-top:.15rem}
.scope .ic{width:16px;height:16px;color:var(--green)}
.cout{position:sticky;top:6rem;display:grid;gap:1rem;padding:1.7rem 1.5rem 1.5rem;border-radius:22px;text-align:center;background:rgba(255,255,255,.8);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 60px rgba(34,53,42,.12),inset 0 1px 0 #fff}
.cnum{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.2rem .45rem}
.cnum .oTotal{font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,4.4vw,3.5rem);letter-spacing:-.045em;line-height:1;color:#0E3A1F;font-variant-numeric:tabular-nums}
.cnum .per{font-size:1rem;font-weight:500;color:var(--muted)}
.csent{font-size:.92rem;line-height:1.5;color:var(--ink2);max-width:30ch;margin-inline:auto}
.cfacts{display:grid;grid-template-columns:1fr 1fr;padding-block:.85rem;border-block:1px solid var(--line2)}
.cfacts div{display:grid;gap:.1rem}
.cfacts div+div{border-left:1px solid var(--line2)}
.cfacts b{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.03em;line-height:1.1;color:var(--forest);font-variant-numeric:tabular-nums}
.cfacts span{font-size:.8rem;color:var(--muted)}
.split{display:flex;gap:2px;height:10px;border-radius:99px;overflow:hidden;background:var(--cream2)}
.split i{display:block;height:100%;transition:width .5s var(--ease)}
.srep{background:#B1D17A}
.stool{background:#1F4A31}
.skey{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.86rem;color:var(--ink2);text-align:left}
.skey li{display:flex;align-items:center;gap:.5rem}
.skey li i{flex:none;width:9px;height:9px;border-radius:50%}
.skey b{margin-left:auto;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cout .btn{justify-content:center;margin-top:.2rem}
.how{max-width:720px;margin:1.8rem auto 0;text-align:center}
.how summary{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;font-weight:600;font-size:.88rem;color:var(--green)}
.how summary::-webkit-details-marker{display:none}
.how summary::after{content:"+"}
.how[open] summary::after{content:"\2212"}
.how p{margin-top:.7rem;font-size:.86rem;line-height:1.6;color:var(--muted)}
#calculator .fine{margin-top:.5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cbarm{display:none}
@media (max-width:860px){
  .calc{grid-template-columns:1fr}
  .cout{position:static}
  .sliders{grid-template-columns:1fr;gap:1.2rem}
  .tools{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .scope{justify-content:flex-start;align-items:flex-start;text-align:left}
  .scope .ic{margin-top:.15rem}
  /* phones: the figure rides along under the menu while they move sliders and tick tools */
  .cbarm{display:flex;position:sticky;top:calc(env(safe-area-inset-top,0px) + 4.4rem);z-index:20;align-items:baseline;justify-content:center;gap:.45rem;padding:.65rem 1rem;border-radius:16px;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(34,53,42,.12);font-size:.85rem;color:var(--muted)}
  .cbarm>b{font-family:var(--display);font-weight:600;font-size:1.45rem;letter-spacing:-.03em;color:#0E3A1F;font-variant-numeric:tabular-nums}
  .cbarm i{width:1px;height:1em;background:var(--line);align-self:center;margin-inline:.2rem}
  .cbarm span b{color:var(--ink);font-variant-numeric:tabular-nums}
}
#calculator .shead .lede{text-wrap:balance}

/* clients panel (2026-10-01): a soft-focus flower photo replaces the green gradient. A dark teal scrim, heaviest behind
   the heading, keeps the white text readable; film grain sits on top, and the photo drifts very slowly. */
.cpanel{background:#16485A}
.cphoto{position:absolute;inset:-2%;z-index:-3;background:url(img/clients.jpg) 50% 38%/cover no-repeat;transform-origin:55% 40%}
.js .cphoto{animation:cdrift 38s ease-in-out infinite alternate}
@keyframes cdrift{from{transform:scale(1)}to{transform:scale(1.07) translate(-1.2%,.8%)}}
.cscrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(75% 48% at 50% 10%,rgba(5,32,42,.62) 0%,rgba(5,32,42,0) 100%),
  linear-gradient(180deg,rgba(5,32,42,.5) 0%,rgba(5,32,42,.22) 42%,rgba(5,32,42,.24) 70%,rgba(5,32,42,.55) 100%)}
.cpanel::before{z-index:-1;opacity:.6;mix-blend-mode:overlay;background-size:180px 180px}
.cpanel .shead h2,.cpanel .shead .lede{text-shadow:0 1px 20px rgba(5,32,42,.35)}
.ccard{box-shadow:0 24px 50px rgba(5,32,42,.3)}
@media (prefers-reduced-motion:reduce){.js .cphoto{animation:none!important}}
.cpanel::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
/* let the centre card's shadow fade out below the row instead of being cut off; clip sideways only */
.carousel{overflow:hidden;overflow-x:clip;overflow-y:visible}
/* problem photo tile (2026-10-01): a windswept sky in place of the green hills, recoloured to the clients panel's teal.
   The scrim darkens only where the copy sits (top left for the number, bottom left for the heading and button),
   so her yellow jacket on the right stays bright; the same monochrome grain as the clients panel sits on top. */
.tile.photo{isolation:isolate;background:#2F7F97 url(img/problem.jpg) 50% 50%/cover no-repeat}
.tile.photo::before{z-index:0;background:radial-gradient(125% 95% at 0% 100%,rgba(5,32,42,.8) 0%,rgba(5,32,42,.38) 45%,rgba(5,32,42,0) 75%),linear-gradient(180deg,rgba(5,32,42,.42) 0%,rgba(5,32,42,0) 38%)}
.tile.photo::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px}
.tile.photo>*{z-index:1}
@media (max-width:860px){.tile.photo{background-position:72% 50%}}

/* ---- process as four stage tiles (2026-10-01), after Heidi's story cards. Each stage has its own surface: lime
   gradient, forest with a line drawing, teal (photo to come) and pale yellow with a chart. Contents are centred to
   match the centred heading. ---- */
.ptiles{list-style:none;margin:0 auto;padding:0;display:flex;gap:.9rem;max-width:1140px}
.ptile{--fg:#0E3A1F;--fg2:rgba(14,58,31,.74);--track:rgba(14,58,31,.16);--grain:.3;position:relative;isolation:isolate;overflow:hidden;flex:1 1 0;min-width:0;
  height:clamp(340px,calc(100vh - 21rem),440px);border-radius:22px;padding:1.6rem 1.4rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:.65rem;text-align:center;
  color:var(--fg);box-shadow:0 18px 40px rgba(34,53,42,.10);transition:flex-grow .75s var(--ease),box-shadow .5s var(--ease)}
.ptile::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px}
.ptile h3{color:var(--fg);font-size:clamp(1.75rem,2.3vw,2.25rem);letter-spacing:-.045em;line-height:1;white-space:nowrap}
.ptile .pd{color:var(--fg2);font-size:.93rem;line-height:1.5;max-width:30ch}
.pmid{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.pgfx{width:100%;max-width:280px;max-height:100%;overflow:visible}
.pg{display:grid;gap:.4rem;justify-items:center}
.pg>span{font-size:.78rem;color:var(--fg2)}
.pg ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;justify-items:center}
.pg li{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;line-height:1.3;color:var(--fg)}
.pg li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55}
.pbar{display:none}
/* surfaces */
.t-strategy{background:linear-gradient(212deg,#A2D458 0%,#BFE277 30%,#E3EEA6 70%,#F3F5D2 100%)}
.t-build{--fg:#fff;--fg2:rgba(255,255,255,.78);--track:rgba(255,255,255,.22);--grain:.22;background:radial-gradient(90% 70% at 85% 0%,#2E6A45 0%,rgba(46,106,69,0) 70%),#1F4A31}
.t-deploy{--fg:#fff;--fg2:rgba(255,255,255,.86);--track:rgba(255,255,255,.28);--grain:.55;background:radial-gradient(80% 60% at 78% 12%,#6BB8CC 0%,rgba(107,184,204,0) 65%),radial-gradient(80% 70% at 15% 95%,#0E3C4C 0%,rgba(14,60,76,0) 70%),#2A7891}
.t-monitor{background:linear-gradient(200deg,#EEF0AE 0%,#F5F4CB 55%,#FAF8E3 100%)}
/* drawings: the line replays whenever its stage becomes current */
.pgfx .ln{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.t-build .ln{stroke:#B1D17A}
.t-build .nd{fill:#1F4A31;stroke:#B1D17A;stroke-width:2.5}
.t-build .ok{fill:#B1D17A}
.t-build .tk{fill:none;stroke:#1F4A31;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.t-monitor .ln{stroke:#1F4A31;stroke-width:3}
.t-monitor .tg{fill:none;stroke:rgba(31,74,49,.35);stroke-width:1.5;stroke-dasharray:5 6}
.t-monitor .end{fill:#1F4A31}
#process.pinned .ptile.now .ln{animation:drawln 1.3s var(--ease) both}
@keyframes drawln{from{stroke-dashoffset:1}}
/* pinned: the current tile widens and shows its description and what you get; the others stay narrow */
#process.pinned .ptile{cursor:pointer}
#process.pinned .ptile.now{flex-grow:2.1;cursor:default;box-shadow:0 26px 60px rgba(34,53,42,.18)}
#process.pinned .ptile .pd{width:30ch;max-width:none}
#process.pinned .ptile .pg{width:300px}
.ptile .pd,.ptile .pg{transition:opacity .45s var(--ease) .25s,visibility 0s}
#process.pinned .ptile:not(.now) .pd,#process.pinned .ptile:not(.now) .pg{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
#process.pinned .pbar{display:block;position:absolute;left:1.4rem;right:1.4rem;bottom:.85rem;height:2px;border-radius:2px;background:var(--track);opacity:0;transition:opacity .3s}
#process.pinned .pbar::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--fg);transform:scaleX(var(--s,0));transform-origin:left}
#process.pinned .ptile.now .pbar{opacity:1}
/* phones: a swipe row with dots, every tile at full size */
.pdots{display:none;justify-content:center;gap:.4rem;margin-top:1rem}
.pdots i{width:7px;height:7px;border-radius:99px;background:rgba(34,53,42,.25);transition:width .35s var(--ease),background .3s}
.pdots i.on{width:22px;background:var(--forest)}
@media (max-width:860px){
  .ptiles{overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);padding-bottom:.4rem;gap:.75rem;scrollbar-width:none}
  .ptiles::-webkit-scrollbar{display:none}
  .ptile{flex:0 0 80%;height:430px;scroll-snap-align:center}
  .pdots{display:flex}
}
#process.pinned .ptile{padding-bottom:2.1rem}
/* stage tiles carry photos (2026-10-01): hills, forest, beach and flowers, each graded towards its tile colour.
   A veil at the top and foot keeps the text readable (light veil under dark text, dark veil under white text). */
.t-strategy{background:#B5D97E url(img/p-strategy.jpg) 50% 50%/cover no-repeat}
.t-build{background:#1F4A31 url(img/p-build.jpg) 50% 40%/cover no-repeat}
.t-deploy{background:#2A8AA3 url(img/p-deploy.jpg) 50% 50%/cover no-repeat}
.t-monitor{background:#EEF0AE url(img/p-monitor.jpg) 50% 50%/cover no-repeat}
.ptile{--grain:.42}
.ptile::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--veil) 0%,transparent 38%,transparent 58%,var(--veil) 100%)}
.t-strategy,.t-monitor{--veil:rgba(248,250,236,.72)}
.t-build{--veil:rgba(8,26,17,.62)}
.t-deploy{--veil:rgba(5,32,42,.6);--grain:.5}
.t-build h3,.t-deploy h3,.t-build .pd,.t-deploy .pd,.t-build .pg,.t-deploy .pg{text-shadow:0 1px 14px rgba(0,0,0,.25)}
.ptile::before{background:linear-gradient(180deg,var(--veil) 0%,var(--veil) 16%,transparent 50%,transparent 56%,var(--veil) 100%)}
.t-strategy,.t-monitor{--veil:rgba(248,250,236,.8)}
.t-build{--veil:rgba(8,26,17,.68)}
.t-deploy{--veil:rgba(5,32,42,.66)}
.t-strategy h3,.t-monitor h3,.t-strategy .pd,.t-monitor .pd,.t-strategy .pg,.t-monitor .pg{text-shadow:0 0 14px rgba(250,251,238,.7)}
/* Monitor in a deeper, more saturated yellow (2026-10-01); its veil and text glow are tinted to match */
.t-monitor{background-color:#E4C935;--veil:rgba(253,246,196,.74)}
.t-monitor h3,.t-monitor .pd,.t-monitor .pg{text-shadow:0 0 14px rgba(253,246,196,.75)}
.t-monitor{background-color:#D9B81E;--veil:rgba(250,238,160,.6)}
.t-monitor h3,.t-monitor .pd,.t-monitor .pg{text-shadow:0 0 14px rgba(250,238,160,.8)}

/* stage tiles, heavier treatment (2026-10-01): each photo sits on its own layer so it can be desaturated; over it a
   two-corner wash in the tile's colour, then the text veils, then a heavy high-contrast grain */
.ptiles .ptile{background-image:none}
.pimg{position:absolute;inset:0;z-index:-2;background:50% 50%/cover no-repeat;filter:saturate(.5) contrast(.95)}
.t-strategy .pimg{background-image:url(img/p-strategy.jpg)}
.t-build .pimg{background-image:url(img/p-build.jpg);background-position:50% 40%}
.t-deploy .pimg{background-image:url(img/p-deploy.jpg)}
.t-monitor .pimg{background-image:url(img/p-monitor.jpg)}
.ptile.t-strategy::before{background:linear-gradient(180deg,var(--veil) 0%,var(--veil) 16%,transparent 50%,transparent 56%,var(--veil) 100%),radial-gradient(115% 80% at 100% 0%,rgba(150,205,78,.62) 0%,rgba(150,205,78,0) 68%),radial-gradient(115% 80% at 0% 100%,rgba(244,248,226,.6) 0%,rgba(244,248,226,0) 68%)}
.ptile.t-build::before{background:linear-gradient(180deg,var(--veil) 0%,var(--veil) 16%,transparent 50%,transparent 56%,var(--veil) 100%),radial-gradient(115% 80% at 100% 0%,rgba(70,128,88,.6) 0%,rgba(70,128,88,0) 68%),radial-gradient(115% 80% at 0% 100%,rgba(8,26,17,.7) 0%,rgba(8,26,17,0) 68%)}
.ptile.t-deploy::before{background:linear-gradient(180deg,var(--veil) 0%,var(--veil) 16%,transparent 50%,transparent 56%,var(--veil) 100%),radial-gradient(115% 80% at 100% 0%,rgba(107,184,204,.6) 0%,rgba(107,184,204,0) 68%),radial-gradient(115% 80% at 0% 100%,rgba(6,40,52,.7) 0%,rgba(6,40,52,0) 68%)}
.ptile.t-monitor::before{background:linear-gradient(180deg,var(--veil) 0%,var(--veil) 16%,transparent 50%,transparent 56%,var(--veil) 100%),radial-gradient(115% 80% at 100% 0%,rgba(222,182,24,.62) 0%,rgba(222,182,24,0) 68%),radial-gradient(115% 80% at 0% 100%,rgba(250,236,150,.6) 0%,rgba(250,236,150,0) 68%)}
.ptiles .ptile::after{mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.1' intercept='-.55'/%3E%3CfeFuncG type='linear' slope='2.1' intercept='-.55'/%3E%3CfeFuncB type='linear' slope='2.1' intercept='-.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E") 0 0/200px 200px}
.t-strategy,.t-monitor{--grain:.7}
.t-build{--grain:.75}
.t-deploy{--grain:.8}
.t-strategy{--veil:rgba(244,248,226,.62)}
.ptile.t-strategy::before{background:linear-gradient(180deg,var(--veil) 0%,var(--veil) 14%,transparent 46%,transparent 58%,var(--veil) 100%),radial-gradient(120% 85% at 100% 0%,rgba(150,205,78,.78) 0%,rgba(150,205,78,0) 70%),radial-gradient(120% 85% at 0% 100%,rgba(198,229,124,.6) 0%,rgba(198,229,124,0) 70%)}
.t-strategy,.t-monitor{--grain:.82}

/* stage tiles: blurred photos (baked in, so widening tiles don't re-blur every frame) and a coarser grain at full strength */
.t-strategy .pimg{background-image:url(img/pb-strategy.jpg)}
.t-build .pimg{background-image:url(img/pb-build.jpg)}
.t-deploy .pimg{background-image:url(img/pb-deploy.jpg)}
.t-monitor .pimg{background-image:url(img/pb-monitor.jpg)}
.ptiles .ptile::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.5' intercept='-.75'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='-.75'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='-.75'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E") 0 0/220px 220px}
.t-strategy,.t-monitor,.t-build,.t-deploy{--grain:1}

/* stage tiles, middle ground (2026-10-01): half the blur of v29 and a medium grain. Strategy, Build and Deploy are
   back to full colour with a little extra; Monitor stays muted. */
.t-strategy .pimg{background-image:url(img/pm-strategy.jpg)}
.t-build .pimg{background-image:url(img/pm-build.jpg)}
.t-deploy .pimg{background-image:url(img/pm-deploy.jpg)}
.t-monitor .pimg{background-image:url(img/pm-monitor.jpg)}
.t-strategy .pimg,.t-build .pimg,.t-deploy .pimg{filter:saturate(1.15)}
.t-monitor .pimg{filter:saturate(.5) contrast(.95)}
.ptiles .ptile::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.3' intercept='-.65'/%3E%3CfeFuncG type='linear' slope='2.3' intercept='-.65'/%3E%3CfeFuncB type='linear' slope='2.3' intercept='-.65'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E") 0 0/200px 200px}
.t-strategy,.t-monitor,.t-build,.t-deploy{--grain:.88}

/* stage tiles (2026-10-01): lightly softened photos so the scenes read, and drawings on all four tiles.
   Strategy: a path finding its way to a target. Deploy: one source fanning out into three systems. */
.t-strategy .pimg{background-image:url(img/pl-strategy.jpg)}
.t-build .pimg{background-image:url(img/pl-build.jpg)}
.t-deploy .pimg{background-image:url(img/pl-deploy.jpg)}
.t-monitor .pimg{background-image:url(img/pl-monitor.jpg)}
.t-strategy .ln{stroke:#1F4A31}
.t-strategy .ring{stroke-width:1.6;opacity:.5}
.t-strategy .ring2{stroke-width:2}
.t-strategy .st{fill:none;stroke:#1F4A31;stroke-width:2.5}
.t-strategy .dot{fill:#1F4A31}
.t-deploy .ln{stroke:#E8F6F8}
.t-deploy .sys{fill:rgba(255,255,255,.16);stroke:#E8F6F8;stroke-width:2}
.t-deploy .src{fill:#B1D17A}
#process.pinned .ptile.now .ln.d1{animation-delay:.18s}
#process.pinned .ptile.now .ln.d2{animation-delay:.36s}
/* Monitor: the flower photo's dark patches were swallowing the dark text, so the photo is lifted and flattened and
   the warm veil is stronger and runs further down behind the description and up behind the list */
.t-monitor .pimg{filter:saturate(.5) contrast(.8) brightness(1.14)}
.t-monitor{--veil:rgba(251,241,176,.86)}
.ptile.t-monitor::before{background:linear-gradient(180deg,var(--veil) 0%,var(--veil) 24%,rgba(251,241,176,0) 54%,rgba(251,241,176,0) 58%,var(--veil) 86%,var(--veil) 100%),radial-gradient(115% 80% at 100% 0%,rgba(222,182,24,.5) 0%,rgba(222,182,24,0) 68%),radial-gradient(115% 80% at 0% 100%,rgba(250,236,150,.6) 0%,rgba(250,236,150,0) 68%)}
.t-monitor h3,.t-monitor .pd,.t-monitor .pg{text-shadow:0 0 10px rgba(251,241,176,.95),0 0 22px rgba(251,241,176,.7)}
.t-monitor .pd{color:rgba(14,58,31,.88)}
/* drawings replay on a persistent .draw class rather than on .now, so leaving a stage never cancels mid-draw */
#process.pinned .ptile.now .ln{animation:none}
#process.pinned .ptile.draw .ln{animation:drawln 1.3s var(--ease) both}
#process.pinned .ptile.draw .ln.d1{animation-delay:.18s}
#process.pinned .ptile.draw .ln.d2{animation-delay:.36s}
/* stage drawings, one set of rules for all four (2026-10-03): every drawing is drawn at the same size in every tile,
   open or narrow, so lines keep the same length and weight across the row; main lines 3.5 units (about 2.5px at
   170px), secondary strokes 2.4, in each tile's highest-contrast colour. The narrow tiles' hidden description and
   list leave the layout, so every drawing sits in the middle of its tile instead of being squeezed out. */
.pgfx{width:min(100%,170px);max-width:none}
.pgfx .ln{stroke-width:3.5}
.t-strategy .ring{stroke-width:2.4;opacity:.55}
.t-strategy .ring2{stroke-width:2.4;opacity:.85}
.t-strategy .st{stroke-width:3}
.t-build .ln{stroke:#C6E57C}
.t-build .nd{stroke:#C6E57C;stroke-width:3}
.t-build .ok{fill:#C6E57C}
.t-build .tk{stroke-width:3}
.t-deploy .sys{stroke-width:2.4}
.t-monitor .ln{stroke-width:3.5}
.t-monitor .tg{stroke:rgba(31,74,49,.5);stroke-width:2}
#process.pinned .ptile:not(.now) .pd,#process.pinned .ptile:not(.now) .pg{position:absolute;left:1.4rem;right:1.4rem;bottom:1.5rem}
/* a soft glow in the tile's own light or dark tone lifts each drawing off the busy parts of its photo */
.t-strategy .pgfx{filter:drop-shadow(0 0 5px rgba(244,248,226,.95))}
.t-monitor .pgfx{filter:drop-shadow(0 0 5px rgba(251,241,176,.95)) drop-shadow(0 0 2px rgba(251,241,176,.9))}
.t-build .pgfx{filter:drop-shadow(0 0 6px rgba(9,30,17,.65))}
.t-deploy .pgfx{filter:drop-shadow(0 0 6px rgba(5,32,42,.55))}
/* hero gradient with teal (2026-10-01): lime top right and the same light yellow through the middle, then a soft teal
   (a pale cousin of the clients and Deploy teal) towards the bottom left before it fades to white */
.flow{background:linear-gradient(180deg,rgba(255,255,255,0) 86%,#FFFFFF 100%),linear-gradient(180deg,rgba(171,217,99,.9) 0%,rgba(171,217,99,0) 22%),linear-gradient(212deg,#ABD963 0%,#C6E57C 16%,#EDF1B4 34%,#EEF3D2 43%,#CDEAE3 55%,#ACDBDC 67%,#D6EEEF 82%,#FFFFFF 96%);background-color:#FFFFFF}
/* teal shuffled through the tinted sections (2026-10-01), so the page runs green, light yellow and teal in turn:
   hero lime > yellow > teal; capabilities silk teal > lime > yellow; process lime > yellow > teal;
   calculator teal > yellow > lime; closing band teal > yellow > lime. Clients and privacy stay white. */
section.silk{background:linear-gradient(212deg,#A6D6D8 0%,#C6E57C 32%,#EDF1B4 58%,#F7FAEF 100%)}
#process,#process.pinned{background:linear-gradient(212deg,#E2F0C2 0%,#EEF4D2 28%,#DDEFE6 60%,#C6E5E3 100%)}
#calculator{background:linear-gradient(212deg,#C6E5E3 0%,#DCEFE8 28%,#F1F4D5 62%,#E4F0C4 100%)}
.cta .bg{background:linear-gradient(35deg,#A6D8DA 0%,#C9E8E2 20%,#EDF1B4 45%,#D2E89A 68%,#C6E57C 82%,#EAF4D2 100%)}
/* while process is pinned the gradient sits on the full-screen pinned frame, so the lime > yellow > teal sweep is
   all on screen instead of being stretched over the scroll distance; the blend strip from the silk band stays on top */
#process.pinned{background:#E6F1DA}
#process.pinned .pin{min-height:100vh;background:linear-gradient(212deg,#E2F0C2 0%,#EEF4D2 28%,#DDEFE6 60%,#C6E5E3 100%)}
#process::before{z-index:1}
#process .pin>.wrap{position:relative;z-index:2}

/* capabilities band on his motion-blurred foliage photo (2026-10-01), replacing the silk shader: a forest scrim,
   heaviest behind the heading, keeps the now-white heading readable; heavy grain sits over everything */
section.silk{background:#2F5A34 url(img/solve.jpg) 50% 50%/cover no-repeat}
section.silk::after,section.silk:has(.shaderbg.on)::after{display:block;z-index:-2;background:linear-gradient(180deg,rgba(9,30,17,.62) 0%,rgba(9,30,17,.3) 38%,rgba(9,30,17,.12) 60%,rgba(9,30,17,.3) 100%)}
section.silk::before{z-index:-1;opacity:.9;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.3' intercept='-.65'/%3E%3CfeFuncG type='linear' slope='2.3' intercept='-.65'/%3E%3CfeFuncB type='linear' slope='2.3' intercept='-.65'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E") 0 0/200px 200px}
section.silk .shead h2{color:#fff;text-shadow:0 2px 24px rgba(9,30,17,.35)}
section.silk .shead .lede{color:rgba(255,255,255,.9);text-shadow:0 1px 16px rgba(9,30,17,.4)}
section.silk .cap{background:rgba(255,255,255,.8)}
section.silk::after,section.silk:has(.shaderbg.on)::after{background:radial-gradient(55% 32% at 50% 20%,rgba(9,30,17,.52) 0%,rgba(9,30,17,0) 100%),linear-gradient(180deg,rgba(9,30,17,.62) 0%,rgba(9,30,17,.3) 38%,rgba(9,30,17,.12) 60%,rgba(9,30,17,.3) 100%)}
/* process: a booking button under the tiles (2026-10-01); tiles a little shorter so the pinned frame still fits */
.pcta{display:flex;justify-content:center;margin-top:clamp(1.2rem,3vh,1.8rem)}
.ptile{height:clamp(320px,calc(100vh - 25.5rem),440px)}
@media (max-width:860px){.ptile{height:430px}}
/* process button: longer and set further below the tiles; tiles give up a little more height so it still fits */
.pcta{margin-top:clamp(2rem,5.5vh,3rem)}
.pcta .btn{min-width:min(340px,100%);justify-content:center;padding:.95rem 2.6rem}
.ptile{height:clamp(320px,calc(100vh - 27rem),440px)}
@media (max-width:860px){.ptile{height:430px}}

/* ---- calculator, compact (2026-10-01): one frosted card. Chunky sliders with a lime-to-teal fill and tap chips on
   the left; a dark grainy panel on the right where the yearly figure rolls in like an odometer ---- */
.kcard{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:.7rem;padding:.7rem;border-radius:30px;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 30px 70px rgba(34,53,42,.12)}
.kin{display:grid;gap:1.3rem;padding:1.4rem 1.5rem 1.1rem;align-content:start}
.ksl{display:grid;gap:.4rem}
.kslh{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.kslh label{font-weight:600;font-size:.95rem;color:var(--ink)}
.kslh label span{font-weight:500;font-size:.78rem;color:var(--muted);margin-left:.45rem}
.kslh output{font-family:var(--display);font-weight:600;font-size:1.55rem;letter-spacing:-.03em;line-height:1;color:#0E3A1F;font-variant-numeric:tabular-nums;white-space:nowrap}
.krng{--f:.5;--at:calc(13px + (100% - 26px) * var(--f));-webkit-appearance:none;appearance:none;width:100%;height:30px;margin:0;background:transparent;cursor:pointer}
.krng::-webkit-slider-runnable-track{height:12px;border-radius:99px;background:linear-gradient(90deg,#A8D26D 0,#3E9AAE var(--at),rgba(34,53,42,.1) var(--at))}
.krng::-moz-range-track{height:12px;border-radius:99px;background:rgba(34,53,42,.1)}
.krng::-moz-range-progress{height:12px;border-radius:99px;background:linear-gradient(90deg,#A8D26D,#3E9AAE)}
.krng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-7px;border-radius:50%;background:#fff;border:3px solid #0E3A1F;box-shadow:0 6px 16px rgba(14,58,31,.25);transition:transform .2s var(--ease)}
.krng::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #0E3A1F;box-shadow:0 6px 16px rgba(14,58,31,.25)}
.krng:hover::-webkit-slider-thumb{transform:scale(1.08)}
.krng:active::-webkit-slider-thumb{transform:scale(1.18)}
.krng:focus-visible{outline:none}
.krng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(62,154,174,.25),0 6px 16px rgba(14,58,31,.25)}
.krng:focus-visible::-moz-range-thumb{box-shadow:0 0 0 6px rgba(62,154,174,.25)}
.kth{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.65rem;font-weight:600;font-size:.95rem}
.kth span+span{font-weight:500;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.kchips{display:flex;flex-wrap:wrap;gap:.45rem}
.kchip{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.52rem .85rem .52rem .7rem;border-radius:12px;border:1px solid rgba(34,53,42,.12);background:#fff;
  font:500 .86rem/1.1 var(--sans);color:var(--ink2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.kchip b{font-weight:500}
.kchip .ic{width:16px;height:16px;color:var(--dim);transition:color .25s}
.kchip:hover{border-color:rgba(34,53,42,.3);box-shadow:0 4px 12px rgba(34,53,42,.08)}
.kchip[aria-pressed="true"]{background:#1F4A31;border-color:#1F4A31;color:#fff}
.kchip[aria-pressed="true"] .ic{color:#B1D17A}
.kchip.pop{animation:kpop .36s var(--ease)}
@keyframes kpop{40%{transform:scale(1.08)}70%{transform:scale(.97)}}
.kchip .fly{position:absolute;left:50%;top:-.5rem;z-index:2;font:600 .76rem/1 var(--sans);color:#1F4A31;background:#fff;padding:.3rem .5rem;border-radius:8px;box-shadow:0 6px 16px rgba(34,53,42,.16);pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums;animation:fly 1.1s var(--ease) forwards}
.kchip .fly.neg{color:var(--muted)}
.kscope{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--muted)}
.kscope .ic{width:14px;height:14px;color:var(--green);flex:none}
.kout{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;padding:1.7rem 1.5rem 1.3rem;display:flex;flex-direction:column;gap:.9rem;text-align:center;color:#fff;
  background:radial-gradient(90% 60% at 100% 0%,#2F6B47 0%,rgba(47,107,71,0) 70%),radial-gradient(85% 60% at 0% 100%,#0F4A57 0%,rgba(15,74,87,0) 72%),#173D29}
.kout::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.3' intercept='-.65'/%3E%3CfeFuncG type='linear' slope='2.3' intercept='-.65'/%3E%3CfeFuncB type='linear' slope='2.3' intercept='-.65'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E") 0 0/200px 200px}
.klbl{font-size:.9rem;color:rgba(255,255,255,.72)}
.knum{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.2rem .45rem}
.odo{display:inline-flex;font-family:var(--display);font-weight:600;font-size:clamp(2.8rem,4.6vw,3.8rem);letter-spacing:-.04em;line-height:1;color:#C6E57C;font-variant-numeric:tabular-nums}
.od{display:inline-block;height:1em;overflow:hidden}
.ods{display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ods i{display:block;height:1em;line-height:1em;font-style:normal}
.kper{font-size:1rem;color:rgba(255,255,255,.7)}
.kfacts{font-size:.9rem;color:rgba(255,255,255,.78)}
.kfacts b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.ksplit{display:flex;gap:3px;height:10px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.12)}
.ksplit i{display:block;height:100%;transition:width .6s var(--ease)}
.krep{background:#C6E57C}
.ktool{background:#6BC4D2}
.kkey{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.84rem;color:rgba(255,255,255,.8);text-align:left}
.kkey li{display:flex;align-items:center;gap:.5rem}
.kkey li i{flex:none;width:9px;height:9px;border-radius:50%}
.kkey b{margin-left:auto;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.btn.kbtn{background:#fff;color:#0E3A1F;justify-content:center;margin-top:.15rem}
.btn.kbtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.khow{font-size:.78rem;color:rgba(255,255,255,.62)}
.khow summary{cursor:pointer;list-style:none}
.khow summary::-webkit-details-marker{display:none}
.khow summary:hover{color:#fff}
.khow p{margin-top:.6rem;text-align:left;line-height:1.55}
.kbar{display:none}
@media (prefers-reduced-motion:reduce){.ods{transition:none}}
@media (max-width:860px){
  .kcard{grid-template-columns:1fr;border-radius:24px}
  .kin{padding:1.1rem 1rem .9rem}
  .kbar{display:flex;position:sticky;top:calc(env(safe-area-inset-top,0px) + 4.4rem);z-index:20;align-items:baseline;justify-content:center;gap:.45rem;padding:.65rem 1rem;border-radius:16px;
    background:#173D29;color:rgba(255,255,255,.75);box-shadow:0 10px 30px rgba(14,40,24,.25);font-size:.85rem}
  .kbar>b{font-family:var(--display);font-weight:600;font-size:1.45rem;letter-spacing:-.03em;color:#C6E57C;font-variant-numeric:tabular-nums}
  .kbar i{width:1px;height:1em;background:rgba(255,255,255,.25);align-self:center;margin-inline:.2rem}
  .kbar span b{color:#fff;font-variant-numeric:tabular-nums}
}
/* clients slideshow: while it is running the current dot fills from left to right over the 4.5s until the next card */
.cdot{position:relative;overflow:hidden}
.cpanel.auto .cdot.on{background:rgba(255,255,255,.4)}
.cpanel.auto .cdot.on::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;transform-origin:left;animation:cfill 4.5s linear forwards}
@keyframes cfill{from{transform:scaleX(0)}}
/* clients slideshow sped up to 3s a card */
.cpanel.auto .cdot.on::after{animation-duration:3s}

/* calculator, calmer (2026-10-01): no decorative gradients. Flat section colour, solid slider fill, flat dark panel
   with grain only. Tool chips are smaller glass pills: faint when off, bright white glass with a tick when on. */
#calculator{background:#EDF4E0}
.kcard{background:rgba(255,255,255,.42)}
.krng::-webkit-slider-runnable-track{background:linear-gradient(90deg,#1F4A31 var(--at),rgba(34,53,42,.12) var(--at))}
.krng::-moz-range-progress{background:#1F4A31}
.kout{background:#173D29}
.kchips{gap:.4rem}
.kchip{gap:.38rem;padding:.36rem .72rem .36rem .58rem;border-radius:999px;font-size:.8rem;color:#6B7266;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.22));border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(34,53,42,.05),0 1px 3px rgba(34,53,42,.06);
  backdrop-filter:blur(10px) saturate(1.5);-webkit-backdrop-filter:blur(10px) saturate(1.5)}
.kchip .ic{width:14px;height:14px;color:#9AA095}
.kchip:hover{border-color:rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(34,53,42,.08)}
.kchip[aria-pressed="true"]{color:#0E3A1F;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.82));border-color:rgba(14,58,31,.16);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(34,53,42,.06),0 4px 14px rgba(34,53,42,.12)}
.kchip[aria-pressed="true"] .ic{color:#0E3A1F}
.kchip[aria-pressed="true"]::after{content:"";width:12px;height:12px;margin-left:.05rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3A1F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center/contain no-repeat}
.kchip b{font-weight:500}
.kchip[aria-pressed="true"] b{font-weight:600}
/* the dark result panel keeps its gradient: a lighter forest glow top right and a teal glow bottom left */
.kout{background:radial-gradient(90% 60% at 100% 0%,#2F6B47 0%,rgba(47,107,71,0) 70%),radial-gradient(85% 60% at 0% 100%,#0F4A57 0%,rgba(15,74,87,0) 72%),#173D29}
/* type scale pass (2026-10-01): section headings up to about 46px on a laptop (30px on phones) so they sit a clear
   step below the 59px hero and above everything inside the section; the heading block is wider so long headings
   stay on two lines. Process tile names step down to about 28px. Calculator chips get slightly larger text and,
   on touch screens, a 40px minimum height for tapping. */
h2{font-size:clamp(1.9rem,3.3vw,2.9rem)}
.shead{max-width:880px}
.ptile h3{font-size:clamp(1.5rem,1.95vw,1.8rem)}
.kchip{font-size:.85rem}
@media (max-width:860px),(pointer:coarse){.kchip{min-height:40px;padding-inline:.62rem .9rem}}

/* ---- nav, Orchid-style (2026-10-01): a transparent bar over the hero that turns frosted white once you scroll.
   Wordmark left, text links beside it (an open dropdown's link sits in a soft grey chip), a light and a dark
   button on the right. Dropdowns open a wide white panel of cards: icon, title, one-line description. ---- */
.nav{position:sticky;top:0;z-index:40;margin-top:0;pointer-events:auto;padding-top:env(safe-area-inset-top,0px);transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s}
.nav.scrolled,.nav.open{background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 rgba(34,53,42,.06)}
.nav .wrap{display:block}
.nbar{display:flex;align-items:center;gap:1.6rem;height:64px}
.nbar .logo{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:.02em;text-decoration:none;color:#0E3A1F;display:inline-flex;align-items:center;gap:.5rem}
.nlinks{display:flex;align-items:center;gap:.25rem}
.nlink{display:inline-flex;align-items:center;gap:.3rem;padding:.48rem .8rem;border-radius:10px;border:0;background:none;font:500 .9rem/1 var(--sans);color:var(--ink2);text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.nlink:hover{background:rgba(34,53,42,.06);color:var(--ink)}
.nlink[aria-expanded="true"]{background:rgba(34,53,42,.08);color:var(--ink)}
.nlink .chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.nlink[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nright{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.nbtn{display:inline-flex;align-items:center;padding:.55rem 1rem;border-radius:999px;font:600 .86rem/1.1 var(--sans);text-decoration:none;white-space:nowrap;transition:background .2s,transform .2s var(--ease),box-shadow .2s}
.nbtn.light{background:rgba(34,53,42,.07);color:var(--ink)}
.nbtn.light:hover{background:rgba(34,53,42,.12)}
.nbtn.dark{background:#0E3A1F;color:#fff}
.nbtn.dark:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(14,58,31,.25)}
/* dropdown panel */
.npanel{position:absolute;left:var(--pad);right:var(--pad);top:calc(100% - 4px);max-width:calc(var(--wrap) - 2*var(--pad));margin-inline:auto;padding:1.2rem;border-radius:22px;background:#fff;
  box-shadow:0 30px 80px rgba(14,40,24,.16),0 2px 6px rgba(14,40,24,.05);border:1px solid rgba(34,53,42,.06);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s var(--ease),transform .28s var(--ease),visibility 0s .28s}
.npanel.show{opacity:1;visibility:visible;transform:none;transition:opacity .22s var(--ease),transform .28s var(--ease),visibility 0s}
.npanel .ptitle{display:block;font-size:.82rem;color:var(--muted);margin:0 0 .8rem .3rem}
.ngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.ncard{display:flex;flex-direction:column;gap:.35rem;min-height:132px;padding:1.05rem 1.15rem 1rem;border-radius:16px;background:#F4F6F2;text-decoration:none;color:inherit;transition:background .2s,transform .25s var(--ease)}
.ncard:hover,.ncard:focus-visible{background:#ECF2E4}
.ncard .ic{width:20px;height:20px;color:#5E665A;margin-bottom:auto}
.ncard b{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.02em;color:var(--ink);margin-top:1.4rem}
.ncard span{font-size:.84rem;line-height:1.45;color:var(--muted)}
/* phones: a menu button opens a full-height sheet with the same groups as lists */
.nmenu{display:none;margin-left:.25rem;width:40px;height:40px;border-radius:12px;border:0;background:rgba(34,53,42,.07);color:var(--ink);cursor:pointer;place-items:center}
.nmenu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:960px){
  .nlinks,.nright .nbtn.light{display:none}
  .nmenu{display:grid}
  .npanel{display:none}
}
.nsheet{position:fixed;inset:0;z-index:60;background:#fff;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + .8rem) 16px calc(env(safe-area-inset-bottom,0px) + 2rem);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.nsheet.show{opacity:1;visibility:visible;transition:opacity .25s,visibility 0s}
.nsheet .shead2{display:flex;align-items:center;justify-content:space-between;height:56px}
.nsheet h4{margin:1.4rem 0 .6rem;font:600 .82rem/1 var(--sans);color:var(--muted)}
.nsheet .ncard{min-height:0;margin-bottom:.5rem}
.nsheet .ncard b{margin-top:.2rem}
.nsheet .ncard .ic{margin-bottom:0}
.nsheet .sbtns{display:grid;gap:.5rem;margin-top:1.6rem}
.nsheet .sbtns .nbtn{justify-content:center;padding:.9rem 1rem}
body.nolock{overflow:hidden}
/* nav refinements: sticky under the safe area, panel spans the content width, 4-up card grids, a dark "not sure" card,
   phone sheet links; the hero and the cannabis page header tuck up under the 64px bar */
.nav{top:env(safe-area-inset-top,0px);padding-top:0}
.npanel{left:var(--pad);right:var(--pad);max-width:none;margin:0;top:calc(100% - 2px)}
.ngrid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ncard[aria-current="page"]{background:#E4EFD6}
.ncard.go{background:#173D29}
.ncard.go .ic{color:#B1D17A}
.ncard.go b{color:#fff}
.ncard.go span{color:#C6E57C;font-weight:600}
.ncard.go:hover{background:#1F4A31}
.hero,.phead{margin-top:-64px}
.nsheet .logo{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:.02em;color:#0E3A1F;text-decoration:none}
.nsheet .nmenu{display:grid}
.nsheet .ngrid{grid-template-columns:1fr;gap:.5rem}
.nsheet .ncard{margin:0}
.slink{display:block;padding:.85rem 0;border-bottom:1px solid var(--line2);font:500 1.05rem/1.3 var(--sans);color:var(--ink);text-decoration:none}
body.navlock{overflow:hidden}
@media (max-width:1180px){.nright .nbtn.light{display:none}}
/* nav dropdown cards carry only the sekhn.com label and an icon, so they are shorter */
.ncard{min-height:104px}
.ncard b{margin-top:1rem}
/* nav dropdown, sleeker (2026-10-01): a compact liquid-glass menu that hangs under its own trigger instead of a full-width
   white slab. Rows carry the homepage's lime-circle icon and a plain label; hover lights a row up as a small glass
   highlight. The bar's own frosting moves to ::before, because a backdrop-filter on the bar would stop the dropdown
   (its child) from blurring the page behind it. */
.nav.scrolled,.nav.open{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);
  background:rgba(255,255,255,.62);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 1px 0 rgba(34,53,42,.06)}
.nav.scrolled::before,.nav.open::before{opacity:1}
.ndd{position:relative}
.ndd .npanel{left:-.45rem;right:auto;top:calc(100% + 10px);width:max-content;max-width:none;margin:0;padding:.4rem;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.5));border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7);
  box-shadow:0 22px 56px rgba(14,40,24,.16),0 2px 6px rgba(14,40,24,.05),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4);
  transform:translateY(-6px) scale(.985);transform-origin:top left}
.ndd .npanel.show{transform:none}
.ndd .ngrid{display:grid;gap:2px}
.ndd .ngrid.g1{grid-template-columns:minmax(290px,auto)}
.ndd .ngrid.g2{grid-template-columns:repeat(2,minmax(250px,auto))}
.ndd .ncard,.nsheet .ncard{flex-direction:row;align-items:center;gap:.7rem;min-height:0;padding:.45rem .9rem .45rem .45rem;border-radius:13px;background:transparent;white-space:nowrap;
  transition:background .2s,box-shadow .2s}
.ndd .ncard:hover,.ndd .ncard:focus-visible,.ndd .ncard[aria-current="page"]{background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 #fff,0 2px 10px rgba(34,53,42,.07)}
.ndd .ncard b,.nsheet .ncard b{margin:0;font-family:var(--sans);font-weight:500;font-size:.9rem;letter-spacing:0;color:var(--ink)}
.ndd .ncard .ic,.nsheet .ncard .ic{width:30px;height:30px;padding:7px;margin:0;border-radius:50%;background:#EEF5DF;color:#3F5C3B;flex:none;box-sizing:border-box;overflow:visible}
.nsheet .ncard{padding:.55rem .4rem;white-space:normal}
.nsheet .ngrid{gap:2px}
/* nav dropdown rows are text only (no icons) */
.ndd .ncard{padding:.6rem .95rem}
.nsheet .ncard{padding:.7rem .4rem}
/* nav (2026-10-01): links centred in the bar between the wordmark and the call button; the audit button is gone;
   dropdown rows light up in a soft green on hover instead of white */
.nbar{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem}
.nbar .logo{justify-self:start}
.nlinks{justify-self:center}
.nright{justify-self:end;margin-left:0}
.ndd .ncard:hover,.ndd .ncard:focus-visible,.ndd .ncard[aria-current="page"],.nsheet .ncard:hover{background:rgba(168,210,109,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.ndd .ncard:hover b,.ndd .ncard:focus-visible b,.ndd .ncard[aria-current="page"] b{color:#0E3A1F}
/* process: longer stage descriptions (Rytasha's copy) get a wider line in the open tile so the drawing keeps its room */
#process.pinned .ptile .pd{width:36ch;font-size:.9rem}
/* the open stage tile is tighter, and on screens under 800px tall it gives the drawing's room to the longer copy
   (the narrow tiles still show their drawings) */
#process.pinned .ptile.now{gap:.45rem;padding-top:1.3rem}
@media (max-height:800px){#process.pinned .ptile.now .pmid{visibility:hidden}}
#process.pinned .ptile .pg{width:330px}
.pg li{text-wrap:balance}

/* capabilities sub-services (2026-10-01): each card lists its services as a centred index of words separated by small
   dots. One is lit at a time: dark text with a lime highlighter swept in behind it, and its one-line explainer (with an
   icon) shows in a fixed slot underneath. The cards are a little wider so each index wraps onto about three lines. */
.caps.two{max-width:1080px;gap:1rem}
.caps.two .cap{padding:2rem 1.9rem 1.7rem}
.subs{list-style:none;margin:1.1rem 0 0;padding:1.05rem 0 0;border-top:1px solid rgba(34,53,42,.1);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem 1.15rem;width:100%}
.subs li{position:relative;display:flex}
/* the dots sit in the gap without taking width, so every line stays truly centred; the script hides the dot on the
   first item of each wrapped line */
.subs li::before{content:"";position:absolute;left:calc(-.575rem - 2px);top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:rgba(34,53,42,.22)}
.subs li.ls::before{display:none}
.subs button{appearance:none;border:0;margin:0;padding:.08em .22em;border-radius:3px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  font:600 clamp(1rem,1.25vw,1.12rem)/1.25 var(--display);letter-spacing:-.025em;color:#7A8175;
  background:linear-gradient(#C6E57C,#C6E57C) no-repeat 0 92%/0% 46%;transition:color .3s,background-size .55s var(--ease)}
.subs button:hover{color:var(--ink)}
.subs button[aria-pressed="true"]{color:#0E3A1F;background-size:100% 46%}
.subs button:focus-visible{outline-offset:2px}
.subcap{display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:2.6rem;margin-top:auto;padding-top:1rem;font-size:.93rem;line-height:1.4;color:var(--ink2);
  transition:opacity .18s,transform .18s var(--ease)}
.subcap.out{opacity:0;transform:translateY(4px)}
.subcap .sico{width:28px;height:28px;border-radius:50%;background:#EEF5DF;color:#3F5C3B;display:grid;place-items:center;flex:none}
.subcap .sico .ic{width:15px;height:15px}
section.silk .cap .mt{margin-top:.35rem;padding-top:.5rem}
@media (max-width:860px){
  .caps.two .cap{padding:1.6rem 1.15rem 1.4rem}
  .subs{column-gap:.85rem}
  .subs li::before{left:calc(-.425rem - 2px)}
  .subcap{min-height:3.3rem;text-align:left}
}
@media (prefers-reduced-motion:reduce){.subs button,.subcap{transition:none}}
/* explainer line: icon and text flow together and two-line explainers break evenly, so the icon stays by the first
   word and no single word is left on its own line */
.subcap .sline{display:block;max-width:100%;text-align:center;text-wrap:balance}
.subcap .sico{display:inline-grid;vertical-align:middle;margin:-.2rem .5rem 0 0}
@media (max-width:860px){.subcap{text-align:center}}

/* data and privacy: the lede runs the full width so it sits on one line wherever the screen allows */
#privacy .shead{max-width:none}
#privacy .shead .lede{max-width:none}
/* process "What you get" (2026-10-01): Build now has four longer items. The dot flows with the text, so an item that
   wraps stays centred with its dot by the first word; the list is a little wider so short items stay on one line; and
   on screens under 800px tall the open tile's copy is tighter so all four fit above the progress bar */
.pg li{display:block;text-align:center}
.pg li::before{display:inline-block;vertical-align:middle;margin:-.15em .45rem 0 0}
#process.pinned .ptile .pg{width:100%;max-width:370px}
@media (max-height:800px){
  #process.pinned .ptile.now .pd{width:44ch;font-size:.86rem;line-height:1.45}
  #process.pinned .ptile.now .pg{gap:.3rem}
  #process.pinned .ptile.now .pg ul{gap:.22rem}
  #process.pinned .ptile.now .pg li{font-size:.85rem;line-height:1.25}
}
/* when the process section doesn't pin on a desktop (window under 680px tall, or reduced motion) the four tiles sit side
   by side fully open, so they grow to fit their copy instead of cutting it off */
@media (min-width:861px){#process:not(.pinned) .ptile{height:auto;min-height:clamp(320px,calc(100vh - 27rem),440px)}}

/* ---- closing landscape (2026-10-01), after Heidi's footer but shorter than a full screen: a grainy teal sky, blurred
   hills in the V3 lime, olive and forest greens with a band of mist, the big SEKHN wordmark sinking into the front hill,
   the call to action above it and the footer line on the grass. Hills drift very slowly; still with reduced motion. ---- */
.land{position:relative;isolation:isolate;overflow:hidden;display:grid;padding:0;font-size:1rem;grid-template-rows:auto auto 1fr auto;min-height:clamp(600px,84vh,740px);color:#fff;background:#1B4A5E}
.lsky{position:absolute;inset:0;z-index:0;background:radial-gradient(60% 50% at 78% 30%,rgba(120,180,190,.35) 0%,rgba(120,180,190,0) 100%),linear-gradient(180deg,#183F52 0%,#1F5269 38%,#3D7D90 64%,#8DBDBD 84%,#B9D5C6 100%)}
.lhills{position:absolute;left:-4%;width:108%;pointer-events:none}
.lback{z-index:1;bottom:0;height:100%}
.lfront{z-index:3;bottom:0;height:clamp(250px,44%,330px)}
.js .lback{animation:ldrift 46s ease-in-out infinite alternate}
.js .lfront{animation:ldrift 38s ease-in-out infinite alternate-reverse}
@keyframes ldrift{from{transform:translateX(-1.6%)}to{transform:translateX(1.6%)}}
.land::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.7;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px}
.land::before{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(18,40,24,0) 0%,rgba(18,40,24,.38) 100%)}
.land .lcta{position:relative;z-index:4;width:100%;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:.9rem;text-align:center;padding-top:clamp(3.5rem,9vh,5.5rem)}
.lcta h2{color:#fff;text-shadow:0 2px 24px rgba(10,35,48,.3)}
.lcta .lede{color:rgba(255,255,255,.84);text-align:center;text-wrap:balance}
.lcta .ctas{margin-top:.6rem}
.btn.lbtn{background:#E3F08C;color:#0E3A1F}
.btn.lbtn:hover{transform:translateY(-2px);background:#ECF6A2;box-shadow:0 12px 28px rgba(10,35,48,.3)}
.btn.lglass{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.btn.lglass:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}
.lword{position:relative;z-index:2;align-self:end;justify-self:center;margin-bottom:clamp(-.5rem,-1vh,0rem);font-family:var(--display);font-weight:700;font-size:clamp(5.5rem,21vw,18.5rem);line-height:.8;letter-spacing:-.015em;color:#fff;
  text-shadow:0 10px 60px rgba(10,35,48,.18);user-select:none}
.land .lfoot{position:relative;z-index:4;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem 2rem;padding-block:1.4rem 1.6rem;font-size:.82rem;color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(10,30,20,.35)}
.lfoot a{color:#fff;text-decoration:none}
.lfoot a:hover{text-decoration:underline}
.lright{display:flex;align-items:center;gap:1rem}
.lright a{display:grid;place-items:center;width:30px;height:30px}
.lright svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){
  .land{min-height:600px}
  .lword{font-size:24vw}
  .lfront{height:230px}
  .land .lfoot{flex-direction:column;align-items:flex-start;gap:.5rem}
}
@media (prefers-reduced-motion:reduce){.js .lback,.js .lfront{animation:none}}
/* footer layout (2026-10-01): the call to action, smaller and left-aligned, with her tagline and email under it on the
   left; the sitemap on the right; no wordmark. Below them the hills open out as scenery, then the footer line on the
   grass. The back hills are held to the lower part of the block so they never sit behind the text. */
.land{grid-template-rows:auto minmax(clamp(170px,19vw,290px),1fr) auto;min-height:0}
.lback{height:62%}
.land .ltop{position:relative;z-index:4;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem clamp(3rem,6vw,6rem);align-items:start;padding-top:clamp(3.5rem,8vh,5rem)}
.lleft{display:grid;gap:.8rem;justify-items:start;max-width:440px}
.lleft h2{font-size:clamp(1.6rem,2.4vw,2.15rem);color:#fff;text-shadow:0 2px 24px rgba(10,35,48,.3)}
.lleft .lede{font-size:.97rem;color:rgba(255,255,255,.84);text-align:left;max-width:42ch}
.lleft .ctas{justify-content:flex-start;gap:.6rem;margin-top:.4rem}
.labout{display:grid;gap:.7rem;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.2);width:100%}
.labout p{font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.86);max-width:36ch}
.labout a{color:#fff;text-decoration:none;font-size:.92rem}
.labout a:hover{text-decoration:underline;text-underline-offset:3px}
.lmap{display:grid;grid-template-columns:repeat(3,auto);gap:1.6rem clamp(2rem,3.6vw,3.4rem);padding-top:.5rem}
.lmap h3{font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:0;color:rgba(255,255,255,.6);margin-bottom:.8rem}
.lmap ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.lmap a{color:rgba(255,255,255,.92);text-decoration:none;font-size:.9rem;line-height:1.35;white-space:nowrap}
.lmap a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* smaller laptops: the two sides share the width and the links may wrap */
@media (max-width:1180px){
  .land .ltop{grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr)}
  .lmap{grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,.7fr)}
  .lmap a{white-space:normal}
}
/* tablets and phones: everything stacks, the sitemap in two columns */
@media (max-width:860px){
  .land .ltop{grid-template-columns:1fr;gap:2.4rem}
  .lleft{max-width:none}
  .lmap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lmap .lind{grid-row:span 2}
}
/* the front hill scales with the wordmark, so the same share of the letters sinks into it at every width */
.lfront{height:clamp(190px,22vw,330px)}
@media (max-width:860px){.lfront{height:230px}}
/* the footer line always takes the bottom row, on the grass, with the open hills above it */
.land .ltop{grid-row:1}
.land .lfoot{grid-row:3}
/* footer, compact (2026-10-01): the whole block fits on one screen under the menu. The open grass row (--S) scales
   with the window height, and both hill layers are sized from it, so the hills fill that row and the mist never rises
   behind the text. Tighter top padding, a one-line heading, smaller buttons and a slimmer footer line. */
.land{--S:clamp(64px,calc(15vh - 36px),160px);grid-template-rows:auto var(--S) auto}
.lback{height:calc((var(--S) + 60px) * 2.1)}
.lfront{height:calc((var(--S) + 90px) * 1.18)}
.land .ltop{padding-top:clamp(2rem,5.5vh,3.4rem);gap:2rem clamp(2.5rem,4vw,4rem)}
.lleft{gap:.65rem;max-width:460px}
.lleft h2{font-size:clamp(1.5rem,2vw,1.85rem)}
.lleft .lede{font-size:.93rem}
.lleft .ctas{margin-top:.25rem;gap:.5rem}
.lleft .btn{padding:.62rem 1.1rem;font-size:.86rem}
.labout{margin-top:.9rem;padding-top:.9rem;gap:.45rem}
.labout p{font-size:.9rem;line-height:1.55;max-width:40ch}
.lmap{gap:1.4rem clamp(1.6rem,2.6vw,2.6rem);padding-top:.3rem}
.lmap ul{gap:.4rem}
.lmap h3{margin-bottom:.65rem}
.land .lfoot{padding-block:.9rem 1.1rem}
@media (max-width:860px){
  .land{--S:110px}
  .lback{height:360px}
  .lfront{height:230px}
}

/* closing footer: wider than the page column, so the call to action sits further left and the sitemap further right */
.land .wrap.ltop,.land .wrap.lfoot{max-width:1400px}