/* Layout: black editorial site with one acid-green accent. Real work is the visual.
   Colour roles (each colour means one thing, so visitors learn it fast):
   - acid green fill = action. ONLY the "book a free audit" buttons are filled green,
                       so they are the brightest solid shape on every screen. Keep it that way.
   - green text      = emphasis in headlines, labels and live statuses (never a filled shape)
   - pale green      = information: checks, dots, bars, selected options
   - red             = errors only
   Variable names are kept from earlier versions: --paper is the page, --ink is the text,
   --cta is the green, --sand is the pale info green. */
:root{
  color-scheme:dark;
  --paper:#0A0A0A;
  --sheet:#141414;
  --sheet-2:#1B1B1B;
  --ink:#F5F5F5;
  --muted:#A3A3A3;
  --line:#262626;
  --sand:#D9F99D;
  --sand-wash:rgba(217,249,157,.12);
  --cta:#C4FF3D;         /* dark text on it 6.2:1 */
  --cta-hover:#D7FF7A;
  --cta-ink:#0A0A0A;
  --cta-wash:rgba(196,255,61,.16);
  --ok:#C4FF3D;
  --ok-wash:rgba(196,255,61,.14);
  --f:"Figtree", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--f);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;margin:0}
.band{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.inner{max-width:1160px;margin:0 auto}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
a:focus-visible,summary:focus-visible,.scroll:focus-visible{outline:2px solid var(--sand);outline-offset:3px;border-radius:2px}

/* nav */
.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:transparent;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:21;background:var(--paper)}
.top .inner{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:14px}
.name{font-weight:700;font-size:17px;letter-spacing:-.01em;text-decoration:none}
.menu{display:flex;gap:26px;font-size:15.5px}
.menu a{text-decoration:none;color:var(--muted)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink)}
.menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.button{display:inline-block;background:var(--cta);color:var(--cta-ink);text-decoration:none;font-weight:600;font-size:16px;padding:13px 22px;border-radius:6px;white-space:nowrap}
.button:hover{background:var(--cta-hover)}
.button.small{font-size:14.5px;padding:9px 16px}
.button.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.button.line:hover{background:var(--sheet)}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* hero */
.hero{overflow-x:clip}
.hero .inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:64px 80px}
.hero h1{font-size:clamp(40px,5.6vw,70px);line-height:1.02;font-weight:700;letter-spacing:-.035em}
.hero .copy{display:flex;flex-direction:column;gap:26px;min-width:0}
.lede{font-size:clamp(18px,1.8vw,20px);color:var(--muted);max-width:46ch}
.proofs{position:relative;height:clamp(380px,46vw,560px);min-width:0}
.proof{position:absolute;top:0;width:44%;aspect-ratio:3/5;max-width:100%;background:var(--sheet);border-radius:3px;overflow:hidden;
  box-shadow:0 1px 1px rgba(0,0,0,.08), 0 10px 24px -8px rgba(0,0,0,.22), 0 40px 60px -30px rgba(0,0,0,.25);
  transform-origin:50% 100%;transition:transform 900ms cubic-bezier(.2,.8,.2,1), left 900ms cubic-bezier(.2,.8,.2,1)}
.proof img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.p1{left:0;top:7%;transform:rotate(-7deg)}
.p2{left:19%;top:1%;transform:rotate(-2deg);z-index:2}
.p3{left:38%;top:4%;transform:rotate(3deg);z-index:3}
.p4{left:56%;top:10%;transform:rotate(8deg);z-index:4}
.stack .proof{transform:rotate(0deg)}
.stack .p1,.stack .p2,.stack .p3,.stack .p4{left:28%}
@media (prefers-reduced-motion: reduce){.proof{transition:none}}

.tools .inner{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap;padding-block:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tools p{font-size:15px;color:var(--muted)}
.tools ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;flex-wrap:wrap;font-weight:600;font-size:17px;color:var(--ink)}

/* sections */
.sec .inner{padding-block:96px;display:flex;flex-direction:column;gap:44px}
.sec + .sec .inner{border-top:1px solid var(--line)}
.sec h2{font-size:clamp(30px,3.8vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.05;max-width:20ch}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end}
.intro p{color:var(--muted);max-width:46ch}
.more{font-weight:600;font-size:16.5px;color:var(--sand);text-underline-offset:4px}

/* what I automate */
.areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 48px}
.area{display:flex;flex-direction:column;gap:18px;min-width:0}
.area h3{font-size:24px;font-weight:600;letter-spacing:-.015em}
.area p{color:var(--muted);font-size:17px;max-width:48ch}
.ui{background:var(--sheet);border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.06), 0 18px 36px -24px rgba(0,0,0,.3);padding:8px 0;font-size:15px}
.ui-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:11px 18px}
.ui-row + .ui-row{border-top:1px solid var(--line)}
.ui-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-row small{display:block;color:var(--muted);font-size:13.5px}
.st{font-size:13.5px;font-weight:600;padding:2px 9px;border-radius:4px;white-space:nowrap}
.st.ok{color:var(--ok);background:var(--ok-wash)}
.st.you{color:var(--ink);background:rgba(255,255,255,.08)}
.chat{display:flex;flex-direction:column;gap:10px;padding:14px 18px}
.msg{max-width:84%;padding:9px 13px;border-radius:12px;font-size:15px;line-height:1.4}
.msg.in{background:var(--sheet-2);align-self:flex-start;border-bottom-left-radius:3px}
.msg.out{background:var(--ink);color:var(--paper);align-self:flex-end;border-bottom-right-radius:3px}
.note{font-size:13.5px;color:var(--muted);padding:0 18px 6px}

/* results teaser */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.fig{padding:26px 24px 8px 0;display:flex;flex-direction:column;gap:6px}
.fig + .fig{padding-left:24px;border-left:1px solid var(--line)}
.fig b{font-size:clamp(36px,4.4vw,54px);font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.fig span{color:var(--muted);font-size:16px;max-width:30ch}

/* services */
.acc{border-top:1px solid var(--ink)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:24px;font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:-.02em}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{flex:none;font-style:normal;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);font-size:18px;font-weight:400;color:var(--muted);transition:transform .25s ease}
.acc details[open] summary i{transform:rotate(45deg)}
.acc .body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding:0 0 28px}
.acc .body p{color:var(--muted);max-width:48ch}
.acc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:16.5px}
.acc li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sand);margin-right:10px;vertical-align:middle}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:s}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:2px solid var(--ink)}
.steps li::before{content:counter(s);font-size:15px;font-weight:600;color:var(--sand)}
.steps h3{font-size:22px;font-weight:600}
.steps p{font-size:16.5px;color:var(--muted)}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.price{background:var(--sheet);border-radius:8px;padding:32px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.price.dark{background:var(--ink);color:var(--paper)}
.price h3{font-size:20px;font-weight:600}
.price .amt{font-size:clamp(34px,4vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1}
.price .amt small{font-size:16px;font-weight:500;letter-spacing:0;opacity:.7}
.price p{color:var(--muted);font-size:16.5px}
.price.dark p{color:#B4BDCB}
.price ul{margin:4px 0 0;padding:0 0 0 18px;font-size:16.5px;display:flex;flex-direction:column;gap:4px}
.fine{font-size:15px;color:var(--muted)}

/* closing */
.close{background:var(--ink);color:var(--paper)}
.close .inner{padding-block:96px;display:flex;flex-direction:column;gap:22px}
.close h2{font-size:clamp(36px,5.4vw,68px);font-weight:700;letter-spacing:-.035em;line-height:1;max-width:16ch}
.close p{color:#B4BDCB;max-width:48ch;font-size:19px}
.close .button{align-self:flex-start}
footer .inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:26px 34px;font-size:14.5px;color:var(--muted)}
footer a{text-decoration:none}
footer nav{display:flex;gap:20px;flex-wrap:wrap}

/* portfolio page */
.page-head .inner{padding-block:72px 40px;display:flex;flex-direction:column;gap:20px}
.page-head h1{font-size:clamp(44px,7vw,88px);font-weight:700;letter-spacing:-.04em;line-height:.98}
.shots{display:flex;flex-direction:column;gap:40px}
.shot{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px;align-items:center}
.shot figcaption{display:flex;flex-direction:column;gap:4px}
.shot figcaption b{font-size:21px;font-weight:600}
.shot figcaption span{font-size:16px;color:var(--muted)}
.shot img{display:block;width:100%;height:auto;background:#fff;border-radius:6px;box-shadow:0 1px 1px rgba(0,0,0,.08), 0 14px 30px -18px rgba(0,0,0,.3)}
.src{font-size:14.5px;color:var(--muted);max-width:70ch}
.mails{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start}
.mail{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.subj{font-size:15px;line-height:1.35;min-height:2.7em}
.subj span{color:var(--muted)}
.scroll{height:540px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;background:var(--sheet);border-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,.08), 0 14px 30px -18px rgba(0,0,0,.3)}
.scroll img{display:block;width:100%;height:auto}
.mail figcaption{font-size:15.5px;color:var(--muted)}
.mail figcaption b{color:var(--ink);font-weight:600}
.mail figcaption em{font-style:normal;font-size:14px;box-shadow:inset 0 0 0 1px var(--line);padding:1px 7px;border-radius:4px;margin-left:6px}

@media (max-width:960px){
  .menu{display:none}
  .hero .inner{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:44px 64px}
  .proofs{height:min(96vw,520px)}
  .intro{grid-template-columns:minmax(0,1fr);gap:16px}
  .areas{grid-template-columns:minmax(0,1fr);gap:56px}
  .mails{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:minmax(0,1fr);gap:24px}
  .acc .body{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media (max-width:680px){
  body{font-size:17px}
  .sec .inner{padding-block:64px;gap:32px}
  .figs{grid-template-columns:minmax(0,1fr)}
  .fig,.fig + .fig{padding:20px 0;border-left:0}
  .fig + .fig{border-top:1px solid var(--line)}
  .prices{grid-template-columns:minmax(0,1fr)}
  .price{padding:26px}
  .mails{grid-template-columns:minmax(0,1fr)}
  .scroll{height:460px}
  .shot{grid-template-columns:minmax(0,1fr);gap:12px}
  .close .inner{padding-block:64px}
}

/* placeholders still to fill in */
.todo{background:#FFE58A;color:#3A2E00;padding:0 4px;border-radius:3px;font-weight:500}

/* footer (full) */
.foot{border-top:1px solid var(--line)}
.foot .inner{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;padding-block:56px 28px}
.foot h3{font-size:15px;font-weight:600;margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15.5px;color:var(--muted)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot .about-line{color:var(--muted);font-size:15.5px;max-width:34ch;margin-top:10px}
.legal-line .inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px 34px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

/* faq */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding-block:20px;font-size:19px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;font-style:normal;color:var(--muted);font-weight:400;transition:transform .2s ease}
.faq details[open] summary i{transform:rotate(45deg)}
.faq p{color:var(--muted);padding-bottom:22px;max-width:64ch}

/* contact page */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.dl{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.dl div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding-block:16px;border-bottom:1px solid var(--line)}
.dl dt{color:var(--muted);font-size:16px}
.dl dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.book{background:var(--sheet);border-radius:8px;padding:32px;display:flex;flex-direction:column;gap:16px;box-shadow:0 1px 1px rgba(0,0,0,.06), 0 18px 36px -24px rgba(0,0,0,.3)}
.book h2{font-size:28px}
.book ul{margin:0;padding-left:18px;color:var(--muted);display:flex;flex-direction:column;gap:6px;font-size:16.5px}
.copy-btn{font:inherit;font-size:14px;font-weight:600;color:var(--sand);background:none;border:0;padding:0;margin-left:10px;cursor:pointer}

/* about page */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px;align-items:start}
.photo{aspect-ratio:4/5;max-width:100%;border-radius:8px;background:repeating-linear-gradient(135deg,#141414 0 12px,#181818 12px 24px);display:grid;place-items:center;text-align:center;padding:20px;color:var(--muted);font-size:15px}
.prose{display:flex;flex-direction:column;gap:18px;max-width:62ch}
.prose p{color:var(--muted)}
.prose p b{color:var(--ink);font-weight:600}

/* legal pages */
.legal{max-width:720px;display:flex;flex-direction:column;gap:14px}
.legal h2{font-size:24px;font-weight:600;letter-spacing:-.01em;margin-top:22px}
.legal p,.legal li{color:var(--muted);font-size:17px}
.legal ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal .warn{background:var(--sheet);border-left:3px solid #E0B300;padding:14px 18px;color:var(--ink);font-size:16px}

@media (max-width:960px){
  .foot .inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid,.about-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .photo{max-width:360px}
}
@media (max-width:560px){
  .foot .inner{grid-template-columns:minmax(0,1fr)}
  .dl div{grid-template-columns:minmax(0,1fr);gap:2px}
  .book{padding:24px}
}

.price-group{font-size:19px;font-weight:600;margin-bottom:-24px}
.prices.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.prices.three{grid-template-columns:minmax(0,1fr)}}
@media (max-width:680px){.price-group{margin-bottom:-14px}}

/* ---------- effects ---------- */
.top{transition:box-shadow .3s ease, border-color .3s ease;border-bottom-color:transparent}
.top.scrolled{border-bottom-color:var(--line);box-shadow:0 8px 24px -18px rgba(0,0,0,.35)}

/* headline words */
.fx h1.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.fx h1.split .w > span{display:inline-block;animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}

/* hero proofs: lift on hover, follow the mouse */
.proof{transform:translateY(var(--lift,0px)) rotate(var(--r,0deg))}
.p1{--r:-7deg}.p2{--r:-2deg}.p3{--r:3deg}.p4{--r:8deg}
.proofs{--mx:0;--my:0}
.proofs.ready{transform:translate3d(calc(var(--mx) * -18px), calc(var(--my) * -12px), 0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.proofs.ready .proof{transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;cursor:default}
.proofs.ready .proof:hover{--lift:-18px;z-index:6;box-shadow:0 1px 1px rgba(0,0,0,.08), 0 30px 50px -18px rgba(0,0,0,.4)}

/* tools marquee */
.tools.marquee .inner{overflow:hidden;flex-wrap:nowrap}
.tools.marquee p{flex:none}
.tools.marquee ul{flex-wrap:nowrap;width:max-content;animation:slide 26s linear infinite;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tools.marquee ul li{white-space:nowrap}
.tools.marquee:hover ul{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-33.333%)}}
@media (max-width:680px){.tools.marquee .inner{flex-direction:column;gap:12px}}

/* reveal on scroll */
.fx .rv{opacity:0;transform:translateY(28px)}
.fx .rv.in{opacity:1;transform:none;transition:opacity .8s ease var(--d,0ms), transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}

/* widgets */
.fx .chat.pending .msg{opacity:0;transform:translateY(8px) scale(.98)}
.fx .chat.pending .msg.show{opacity:1;transform:none;transition:opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1)}
.fx .ui.pending .st{opacity:.25;transform:scale(.92)}
.fx .ui.pending .st.on{opacity:1;transform:none;transition:opacity .3s ease, transform .35s cubic-bezier(.3,1.6,.5,1)}
.st.ok{position:relative}
.area:hover .ui{transform:translateY(-4px);box-shadow:0 1px 1px rgba(0,0,0,.06), 0 28px 44px -24px rgba(0,0,0,.38)}
.ui{transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease}

/* buttons and links */
.button{transition:background .2s ease, transform .2s ease, box-shadow .2s ease}
.button:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(196,255,61,.65)}
.button:active{transform:translateY(0)}
.more,.foot a,.menu a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s ease, color .2s ease}
.more{text-decoration:none}
.more:hover,.foot a:hover,.menu a:hover{background-size:100% 1px;text-decoration:none}
.menu a[aria-current="page"]{text-decoration:none;background-size:100% 1px}

/* cards */
.price,.step,.shot img,.scroll{transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease}
.price:hover{transform:translateY(-6px);box-shadow:0 1px 1px rgba(0,0,0,.06), 0 26px 44px -26px rgba(0,0,0,.4)}
.mail:hover .scroll{transform:translateY(-6px);box-shadow:0 1px 1px rgba(0,0,0,.08), 0 30px 46px -24px rgba(0,0,0,.42)}
.shot:hover img{transform:scale(1.012)}
.acc summary,.faq summary{transition:color .2s ease}
.acc summary:hover,.faq summary:hover{color:var(--sand)}

/* dark closing block: slow drifting light */
.close{position:relative;overflow:hidden}
.close::before{content:"";position:absolute;width:640px;height:640px;right:-200px;top:-260px;border-radius:50%;background:radial-gradient(closest-side, rgba(196,255,61,.3), rgba(196,255,61,0));animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
.close .inner{position:relative}
@keyframes drift{to{transform:translate(-220px,160px)}}

@media (prefers-reduced-motion: reduce){
  .close::before,.tools.marquee ul{animation:none}
  .proofs.ready,.proofs.ready .proof,.button,.price,.ui,.scroll,.shot img{transition:none}
}

/* tools strip, larger wordmarks */
.tools .inner{padding-block:30px}
.tools p{font-size:15px}
.tools.marquee ul{gap:0;animation-duration:32s}
.tools.marquee ul li{display:flex;align-items:center;gap:14px;padding-inline:28px;font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--muted);transition:color .2s ease}
.tools.marquee ul li::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--line);transform:rotate(45deg)}
.tools.marquee ul li:hover{color:var(--ink)}

/* logo images in the tools strip (for when you add logo files) */
.tools ul li img{display:block;height:26px;width:auto}
.tools.marquee ul li:has(img)::before{display:none}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:stretch}
.calc-in{display:flex;flex-direction:column;gap:32px;padding:32px;background:var(--sheet);border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.field{display:flex;flex-direction:column;gap:12px;border:0;margin:0;padding:0;min-width:0}
.field > label,.field legend{font-weight:600;font-size:17px;padding:0;margin-bottom:12px}
fieldset.field legend{margin-bottom:12px}
.field output{font-size:clamp(36px,4vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--sand) var(--p,10%),var(--line) var(--p,10%));outline-offset:6px;cursor:pointer}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--sheet);border:2px solid var(--sand);box-shadow:0 2px 6px rgba(0,0,0,.25)}
input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--sheet);border:2px solid var(--sand);box-shadow:0 2px 6px rgba(0,0,0,.25)}
input[type="range"]:focus-visible{outline:2px solid var(--sand)}
.range-ends{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;font-size:16px;transition:box-shadow .2s ease, background .2s ease}
.opt + .opt{margin-top:8px}
.opt input{accent-color:var(--sand);margin-top:4px;flex:none}
.opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--sand);background:var(--sand-wash)}
.calc-out{background:var(--ink);color:var(--paper);border-radius:8px;padding:32px;display:flex;flex-direction:column;gap:10px}
.calc-label{color:#B4BDCB;font-size:16px}
.calc-big{font-size:clamp(34px,4.4vw,54px);font-weight:700;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--sand)}
.calc-year{font-size:18px;font-weight:500}
.calc-note{font-size:14px;color:#8C96A6;max-width:52ch}

/* lead forms */
.lead{display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-top:22px;border-top:1px solid rgba(245,247,250,.16)}
.book .lead{border-top:0;padding-top:0;margin-top:4px}
.lead-title{font-weight:600;font-size:18px;margin-bottom:4px}
.lead-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.lead input:not([type="hidden"]),.lead textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:6px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);min-width:0}
.lead textarea{resize:vertical}
.calc-out .lead input{border-color:transparent}
.lead input:focus-visible,.lead textarea:focus-visible{outline:2px solid var(--sand);outline-offset:1px}
.lead .button{align-self:flex-start;border:0;cursor:pointer;margin-top:4px}
.lead .button:disabled{opacity:.6;cursor:wait}
.form-msg{font-size:15.5px;padding:12px 14px;border-radius:6px}
.form-msg.ok{background:var(--ok-wash);color:var(--ok)}
.form-msg.err{background:rgba(248,113,113,.12);color:#FCA5A5}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* mobile call-to-action bar */
.mobile-cta{display:none}
@media (max-width:680px){
  .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));background:rgba(10,10,10,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .mobile-cta.show{transform:none}
  .mobile-cta .button{flex:1;text-align:center}
  .foot{padding-bottom:72px}
}

@media (max-width:960px){.calc{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.calc-in,.calc-out{padding:24px}.lead-row{grid-template-columns:minmax(0,1fr)}}
.field > label.opt{font-weight:400;font-size:16px;margin-bottom:0}

/* ---------- two pillars ---------- */
.pillar{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:48px;padding-top:36px;border-top:2px solid var(--ink)}
.pillar + .pillar{margin-top:24px}
.pillar-head{display:flex;flex-direction:column;gap:10px;position:sticky;top:96px;align-self:start}
.pillar-head h3{font-size:clamp(26px,2.8vw,34px);font-weight:700;letter-spacing:-.03em}
.pillar-head p{color:var(--muted);font-size:17px}
.pillar .areas{gap:48px 40px}

/* hero automation feed */
.feed{position:absolute;left:-4%;bottom:2%;z-index:7;width:min(330px,72%);background:var(--sheet);border-radius:10px;padding:14px 16px 8px;
  box-shadow:0 1px 1px rgba(0,0,0,.08), 0 24px 44px -20px rgba(0,0,0,.45)}
.feed-head{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ok);margin-bottom:6px}
.live{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(196,255,61,.5);animation:pulse 2s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(196,255,61,0)}100%{box-shadow:0 0 0 0 rgba(196,255,61,0)}}
.feed ul{list-style:none;margin:0;padding:0}
.feed li{display:flex;flex-direction:column;padding:8px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.35}
.feed li:first-child{border-top:0}
.feed li b{font-size:12.5px;font-weight:600;color:var(--muted)}
.feed li.enter{animation:feedIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes feedIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.live{animation:none}}

/* calculator tabs */
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--sheet);border-radius:8px;align-self:flex-start;box-shadow:0 1px 1px rgba(0,0,0,.06);margin-bottom:-20px}
.tabs button{font:inherit;font-size:16px;font-weight:600;border:0;background:transparent;color:var(--muted);padding:10px 18px;border-radius:6px;cursor:pointer;transition:background .2s ease,color .2s ease}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.tabs button:focus-visible{outline:2px solid var(--sand);outline-offset:2px}
.panel{display:flex;flex-direction:column;gap:32px}

/* four price cards */
.prices.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.kind{font-size:13.5px;font-weight:600;color:var(--sand)}
.price.dark .kind{color:var(--sand)}
@media (max-width:1100px){.prices.four{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (max-width:960px){
  .pillar{grid-template-columns:minmax(0,1fr);gap:28px}
  .pillar-head{position:static}
  .feed{left:0;bottom:-2%}
}
@media (max-width:680px){
  .prices.four{grid-template-columns:minmax(0,1fr)}
  .tabs{margin-bottom:-10px}
  .tabs button{padding:10px 14px;font-size:15px}
  .feed{width:78%}
}

[hidden]{display:none!important}

/* results: numbers, not adjectives */
.proofs-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.pr{display:flex;flex-direction:column;gap:10px;padding:28px 28px 8px 0}
.pr + .pr{padding-left:28px;border-left:1px solid var(--line)}
.pr-num{font-size:clamp(40px,4.6vw,60px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.pr h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.pr p{color:var(--muted);font-size:16.5px}
.pr-meta{font-size:14px;color:var(--muted);margin-top:auto;padding-top:8px}
@media (max-width:860px){
  .proofs-list{grid-template-columns:minmax(0,1fr)}
  .pr,.pr + .pr{padding:24px 0;border-left:0}
  .pr + .pr{border-top:1px solid var(--line)}
}

/* case studies page */
.cases .inner{gap:0}
.case{display:flex;flex-direction:column;gap:28px;padding-block:56px;border-top:2px solid var(--ink)}
.case:first-child{padding-top:40px}
.case-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:baseline}
.case-head h2{font-size:clamp(30px,3.6vw,44px)}
.case-lead{font-size:clamp(19px,2vw,22px);font-weight:500;letter-spacing:-.01em;max-width:40ch}
.case-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;background:var(--sheet);border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.case-figs div{padding:22px 24px;display:flex;flex-direction:column;gap:6px}
.case-figs div + div{border-left:1px solid var(--line)}
.case-figs dt{font-size:14.5px;color:var(--muted)}
.case-figs dd{margin:0;font-size:clamp(26px,2.8vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.case-figs dd small{display:block;font-size:13.5px;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:4px}
.case-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.case-body h3{font-size:15px;font-weight:600;margin-bottom:4px}
.case-body p{color:var(--muted);font-size:16.5px}
.case-shot{margin:0;display:flex;flex-direction:column;gap:8px}
.case-shot img{display:block;width:100%;height:auto;border-radius:6px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.08), 0 14px 30px -18px rgba(0,0,0,.3)}
.case-shot figcaption{font-size:14px;color:var(--muted)}
@media (max-width:860px){
  .case-head{grid-template-columns:minmax(0,1fr);gap:10px}
  .case-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-figs div:nth-child(3){border-left:0}
  .case-figs div:nth-child(n+3){border-top:1px solid var(--line)}
  .case-body{grid-template-columns:minmax(0,1fr);gap:16px}
}

/* market stats */
.market .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;max-width:none;width:auto}
.market .stat{background:var(--sheet);border-radius:8px;padding:28px;display:flex;flex-direction:column;gap:12px;border:0;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.market .stat + .stat{border-left:0}
.market .stat b{font-size:clamp(40px,4.6vw,58px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--sand);font-variant-numeric:tabular-nums}
.market .stat p{color:var(--ink);font-size:17px}
.market .stat a{margin-top:auto;font-size:14px;color:var(--muted);text-underline-offset:3px}
@media (max-width:860px){.market .stats{grid-template-columns:minmax(0,1fr)}}

/* how it's built */
.build{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.b-card{background:var(--sheet);border-radius:10px;padding:14px 14px 28px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 1px rgba(0,0,0,.06);transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease}
.b-card:hover{transform:translateY(-4px);box-shadow:0 1px 1px rgba(0,0,0,.06), 0 26px 44px -26px rgba(0,0,0,.4)}
.b-card > h3,.b-card > p{padding-inline:14px}
.b-card > h3{font-size:22px;font-weight:600;letter-spacing:-.015em;margin-top:10px}
.b-card > p{color:var(--muted);font-size:16.5px;max-width:52ch}
.b-ui{background:var(--paper);border-radius:8px;padding:6px 0 10px;min-height:236px;display:flex;flex-direction:column}
.b-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px 8px;font-size:14px;font-weight:600}
.b-msg{margin:8px 16px;max-width:none;font-size:15px}
.checks{list-style:none;margin:6px 0 0;padding:0 16px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.checks li{display:flex;gap:10px;align-items:baseline}
.checks li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--sand-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23EBC3A4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;transform:translateY(3px)}
.b-ui .ui-row{padding:9px 16px}
.b-ui .ui-row + .ui-row{border-top:1px solid var(--line)}
.dot-on{width:9px;height:9px;border-radius:50%;background:var(--sand);box-shadow:0 0 0 4px var(--sand-wash)}
.bar-mini{width:110px;height:6px;background:var(--line);border-radius:3px;position:relative;overflow:hidden}
.bar-mini i{position:absolute;inset:0 auto 0 0;background:var(--sand);border-radius:3px;transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.fx .b-card.rv .bar-mini i{transform:scaleX(0)}
.fx .b-card.rv.in .bar-mini i{transform:scaleX(1);transition-delay:.4s}
@media (max-width:860px){.build{grid-template-columns:minmax(0,1fr)}.b-ui{min-height:0}}

/* availability pill */
.avail{align-self:flex-start;display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);background:var(--sheet);border-radius:999px;padding:10px 20px 10px 12px;
  box-shadow:inset 0 0 0 1px var(--line), 0 10px 24px -16px rgba(0,0,0,.35);transition:box-shadow .25s ease, transform .25s ease}
.avail:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--sand), 0 14px 28px -16px rgba(0,0,0,.4)}
.avail > span:last-child{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.avail b{font-size:15px;font-weight:600}
.avail small{font-size:13.5px;color:var(--muted)}
.avail-dot{flex:none;width:28px;height:28px;border-radius:50%;background:var(--cta-wash);display:grid;place-items:center;position:relative}
.avail-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--cta);animation:availPulse 2.2s ease-out infinite}
@keyframes availPulse{0%{box-shadow:0 0 0 0 rgba(196,255,61,.55)}70%{box-shadow:0 0 0 9px rgba(196,255,61,0)}100%{box-shadow:0 0 0 0 rgba(196,255,61,0)}}
@media (prefers-reduced-motion: reduce){.avail-dot::after{animation:none}}
@media (max-width:560px){.avail{border-radius:16px}}

/* four mails in one row */
.mails{grid-template-columns:repeat(4,minmax(0,1fr))}
.p1{left:2%}.p2{left:27%;top:2%}.p4{left:52%;top:8%}
@media (max-width:960px){.mails{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.mails{grid-template-columns:minmax(0,1fr)}}

/* ---------- polish pass ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:6px;text-decoration:none;font-weight:600}
.skip:focus{top:calc(12px + env(safe-area-inset-top, 0px))}
.top-actions{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:42px;height:42px;border:0;border-radius:8px;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu-btn:focus-visible{outline:2px solid var(--sand)}
.m-menu{display:none}
@media (max-width:960px){
  .menu-btn{display:flex}
  .m-menu{display:block;position:fixed;inset:calc(64px + env(safe-area-inset-top, 0px)) 0 auto 0;z-index:19;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 20px 40px -24px rgba(0,0,0,.4);
    padding:8px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px));transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s ease, transform .25s ease, visibility .25s}
  .m-menu.open{opacity:1;transform:none;visibility:visible}
  .m-menu a{display:block;padding:14px 4px;font-size:20px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
  .m-menu a:last-child{border-bottom:0}
}
/* comfortable tap targets */
.foot ul a{display:inline-block;padding-block:4px}
.more{display:inline-block;padding-block:6px}
.pr-meta,.case-shot figcaption{line-height:1.5}
/* sharper focus states everywhere */
:focus-visible{outline-color:var(--sand)}

.or{font-size:15px;color:var(--muted);margin-top:6px}
.dl dd a{text-underline-offset:3px}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.quote{margin:0;background:var(--sheet);border-radius:10px;padding:30px 28px 26px;display:flex;flex-direction:column;gap:24px;box-shadow:0 1px 1px rgba(0,0,0,.06);position:relative}
.quote::before{content:"“";position:absolute;top:6px;right:22px;font-size:84px;line-height:1;font-weight:700;color:var(--sand-wash)}
.quote blockquote{margin:0}
.quote blockquote p{font-size:18px;line-height:1.55;letter-spacing:-.005em;position:relative}
.quote figcaption{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.q-av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:700;font-size:15px}
.quote figcaption > span:last-child{display:flex;flex-direction:column;line-height:1.3}
.quote figcaption b{font-weight:600;font-size:15.5px}
.quote figcaption small{color:var(--muted);font-size:14px}
.case-quote{margin:0;padding:6px 0 6px 22px;border-left:3px solid var(--sand);max-width:70ch}
.case-quote p{font-size:clamp(18px,1.8vw,21px);line-height:1.5;font-weight:500;letter-spacing:-.01em}
.case-quote footer{margin-top:8px;font-size:14.5px;color:var(--muted)}
@media (max-width:960px){.quotes{grid-template-columns:minmax(0,1fr)}}

/* logo */
.name img{display:block;height:28px;width:auto}
.foot .name img{height:30px}
@media (max-width:560px){.name img{height:24px}}

.field > label.opt{padding:12px 14px}

/* =====================================================================
   Dark redesign: floating nav, dusk hero with envelope, email reel, the loop
   ===================================================================== */
body{background:var(--paper);color:var(--ink)}
::selection{background:var(--cta);color:var(--cta-ink)}
.hl{color:var(--cta-hover)}
.eyebrow{font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cta-hover)}

/* softer structural lines on dark */
.acc,.faq,.dl,.proofs-list,.figs{border-top-color:rgba(255,255,255,.2)}
.steps li,.pillar,.case{border-top-color:rgba(255,255,255,.2)}

/* cards need an edge on dark, shadows alone disappear */
.ui,.price,.quote,.market .stat,.b-card,.calc-in,.case-figs,.book,.feed,.tabs{box-shadow:inset 0 0 0 1px var(--line), 0 24px 48px -32px rgba(0,0,0,.9)}
.b-ui{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.area:hover .ui,.price:hover,.b-card:hover{box-shadow:inset 0 0 0 1px #363636, 0 30px 56px -30px rgba(0,0,0,.95)}
.opt{box-shadow:inset 0 0 0 1px var(--line)}
.opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--sand)}
input[type="range"]{background:linear-gradient(90deg,var(--sand) var(--p,10%),var(--line) var(--p,10%))}
.lead input:not([type="hidden"]),.lead textarea{background:var(--paper);border-color:var(--line);color:var(--ink)}
.lead input::placeholder,.lead textarea::placeholder{color:#7A7A7A}
.calc-out .lead input{border-color:var(--line)}
.calc-out{background:linear-gradient(160deg,#141A0D,var(--sheet) 55%);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(196,255,61,.28)}
.calc-big{background:linear-gradient(90deg,#EAFFB0,var(--cta-hover));-webkit-background-clip:text;background-clip:text;color:transparent}
.price.dark{background:var(--sheet-2)}
.quote::before{color:rgba(196,255,61,.22)}
.market .stat b{color:var(--ink)}
.shot img{box-shadow:0 0 0 1px var(--line)}
.scroll{box-shadow:0 0 0 1px var(--line), 0 30px 50px -30px rgba(0,0,0,.9)}
.legal .warn{border-left-color:var(--cta)}
.todo{background:#5A4300;color:#FFE58A}

/* floating pill navigation */
.top{top:calc(10px + env(safe-area-inset-top, 0px));background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:10px}
.top.scrolled{box-shadow:none;border:0}
.top .inner{max-width:1080px;padding:8px 8px 8px 20px;border-radius:999px;
  background:linear-gradient(90deg,rgba(196,255,61,.22),rgba(20,20,20,.78) 32%);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px -24px rgba(0,0,0,.9)}
.top .button.small{border-radius:999px;padding:10px 18px}
.menu a{color:#CFCFCF}
.menu a:hover,.menu a[aria-current="page"]{color:#fff}
.button{border-radius:999px;font-weight:700}
.button.line{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.button.line:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
@media (max-width:960px){
  .m-menu{inset:calc(84px + env(safe-area-inset-top, 0px)) 12px auto 12px;border-radius:20px;background:rgba(20,20,20,.97);border:1px solid var(--line)}
  .m-menu a{border-bottom-color:var(--line)}
  .top .inner{padding-left:16px}
}

/* dusk hero */
.hero{position:relative;overflow:hidden;margin-top:-76px;padding-top:76px;isolation:isolate}
.sky{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 72%, rgba(196,255,61,.26), rgba(110,160,30,.12) 45%, rgba(10,10,10,0) 75%),
    radial-gradient(90% 60% at 50% 100%, rgba(70,110,20,.38), rgba(10,10,10,0) 70%),
    linear-gradient(180deg,#0F0F0F 0%,#131A0C 55%,#18220E 78%,#0A0A0A 100%)}
.sky::before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;display:block}
.hero .inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;padding-block:72px 0}
.hero h1{font-size:clamp(42px,6.6vw,84px);line-height:1.0;font-weight:700;letter-spacing:-.035em;max-width:15ch}
.hero h1 .hl,.hero h1 .w.hl > span{background:linear-gradient(90deg,#EAFFB0,var(--cta) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{color:#D4D4D4;max-width:52ch;margin-inline:auto}
.hero .actions{justify-content:center}
.hero .avail{align-self:center;background:rgba(20,20,20,.7);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:left}
.hero .avail:hover{box-shadow:inset 0 0 0 1px rgba(196,255,61,.6)}

/* envelope with an email sliding out */
.scene{position:relative;width:100%;max-width:980px;height:clamp(330px,40vw,430px);margin-top:28px}
.env{position:absolute;left:50%;bottom:0;width:min(440px,86vw);aspect-ratio:1.45;transform:translateX(-50%);filter:drop-shadow(0 40px 50px rgba(0,0,0,.55))}
.env-back{position:absolute;inset:0;border-radius:10px;background:linear-gradient(180deg,#1E2316,#15180F)}
.env-letter{position:absolute;left:7%;right:7%;bottom:12%;height:150%;border-radius:6px;overflow:hidden;background:#fff;
  transform:translateY(46%);box-shadow:0 -10px 30px -10px rgba(0,0,0,.4)}
.env-letter img{display:block;width:100%;height:auto}
.env-front{position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(180deg,#2A3120,#1C2115);
  clip-path:polygon(0 30%,50% 64%,100% 30%,100% 100%,0 100%)}
.env-front::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%)}
.env-seal{position:absolute;left:50%;top:58%;width:44px;height:44px;margin-left:-22px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 30%,#363636,#121212);box-shadow:0 6px 14px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1);display:grid;place-items:center}
.env-seal img{width:22px;height:auto;opacity:.95}

.scene .feed{left:auto;right:0;bottom:16%;width:300px;text-align:left;background:rgba(20,20,20,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.scene .feed li{border-top-color:var(--line)}
.scene .note-card{position:absolute;left:0;bottom:30%;width:250px;text-align:left;padding:16px 18px;border-radius:12px;background:rgba(20,20,20,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line), 0 24px 48px -28px rgba(0,0,0,.9)}
.note-card small{display:block;font-size:13px;color:var(--muted)}
.note-card b{display:block;font-size:30px;letter-spacing:-.03em;line-height:1.1;margin:2px 0}
.note-card span{font-size:13.5px;color:var(--ok);font-weight:600}
@media (max-width:960px){
  .scene .feed,.scene .note-card{display:none}
}

/* tools strip */
.tools .inner{justify-content:center;border:0;padding-block:40px 18px}
.tools p{color:var(--muted)}
.tools.marquee ul li{color:#8A8A8A}
.tools.marquee ul li:hover{color:var(--ink)}
.tools.marquee ul li::before{background:#363636}

/* email reel: tilted strip of real emails */
.reel{overflow:hidden;padding-block:56px 40px}
.reel .head{max-width:1160px;margin:0 auto 34px;display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.reel h2{font-size:clamp(30px,3.8vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.05;max-width:18ch;margin-top:8px}
.reel-stage{perspective:1600px;margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px)))}
.reel-track{display:flex;gap:28px;width:max-content;padding-block:30px 60px;transform:rotateX(14deg) rotateZ(-4deg);transform-style:preserve-3d}
.reel-track.run{animation:reel 60s linear infinite}
.reel:hover .reel-track.run{animation-play-state:paused}
@keyframes reel{to{transform:rotateX(14deg) rotateZ(-4deg) translateX(-50%)}}
.reel-card{flex:none;width:clamp(180px,20vw,250px);aspect-ratio:3/5;border-radius:10px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 40px 60px -30px rgba(0,0,0,.95);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.reel-card:nth-child(even){transform:translateY(34px)}
.reel-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.reel-card:hover{transform:translateY(-10px) scale(1.03)}
.reel-card:nth-child(even):hover{transform:translateY(24px) scale(1.03)}

/* the loop: four phases */
.loop .inner{align-items:center;text-align:center}
.loop-icon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:var(--sheet);box-shadow:inset 0 0 0 1px rgba(196,255,61,.4), 0 0 40px -6px rgba(196,255,61,.5)}
.loop-icon svg{width:28px;height:28px}
.fx .loop-icon svg{animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loop h2{max-width:16ch;margin-inline:auto}
.loop .sub{color:var(--muted);max-width:52ch;margin-top:-22px}
.phases{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;text-align:left;position:relative;counter-reset:ph}
.phases::before{content:"";position:absolute;left:6%;right:6%;top:39px;height:1px;background:linear-gradient(90deg,rgba(196,255,61,0),rgba(196,255,61,.6),rgba(196,255,61,0))}
.phase{counter-increment:ph;position:relative;background:linear-gradient(180deg,var(--sheet-2),var(--sheet));border-radius:14px;padding:20px 20px 24px;display:flex;flex-direction:column;gap:10px;
  box-shadow:inset 0 0 0 1px var(--line), inset 0 2px 0 0 rgba(196,255,61,.7);transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease}
.phase:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px #363636, inset 0 2px 0 0 var(--cta), 0 30px 50px -30px rgba(196,255,61,.45)}
.ph-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ph-num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--cta-ink);background:radial-gradient(circle at 35% 30%,#EAFFB0,var(--cta))}
.ph-num::before{content:counter(ph)}
.ph-tag{font-size:12.5px;font-weight:600;color:var(--muted);padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line)}
.phase h3{font-size:21px;font-weight:700;letter-spacing:-.015em}
.phase p{color:var(--muted);font-size:16px}
.ph-back{font-size:14px;color:var(--cta-hover);font-weight:600;margin-top:auto;padding-top:4px}
@media (max-width:960px){.phases{grid-template-columns:repeat(2,minmax(0,1fr))}.phases::before{display:none}}
@media (max-width:560px){.phases{grid-template-columns:minmax(0,1fr)}}

/* who builds it: photo strip */
.me{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.me .prose h2{font-size:clamp(30px,3.8vw,46px)}
.photo{position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(160deg,#131A0C,#121212);color:var(--cta-hover);
  font-size:clamp(96px,14vw,160px);font-weight:700;letter-spacing:-.04em;box-shadow:inset 0 0 0 1px var(--line), 0 40px 70px -40px rgba(196,255,61,.45)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.me{grid-template-columns:minmax(0,1fr);gap:32px}.me .photo{max-width:360px}}

/* closing card: email collage + call to action */
.close{background:var(--paper);color:var(--ink)}
.close::before{opacity:.9}
.close .inner{padding-block:96px}
.close-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#141A0D,var(--sheet) 60%);
  box-shadow:inset 0 0 0 1px rgba(196,255,61,.25), 0 50px 90px -50px rgba(0,0,0,1)}
.collage{position:relative;min-height:420px;background:#0F0F0F;overflow:hidden}
.collage img{position:absolute;width:46%;border-radius:8px;box-shadow:0 24px 40px -18px rgba(0,0,0,.9)}
.collage img:nth-child(1){left:4%;top:8%;transform:rotate(-6deg)}
.collage img:nth-child(2){left:50%;top:-4%;transform:rotate(4deg)}
.collage img:nth-child(3){left:12%;top:52%;transform:rotate(3deg)}
.collage img:nth-child(4){left:56%;top:46%;transform:rotate(-4deg)}
.close-body{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;gap:20px;justify-content:center}
.close-body h2{font-size:clamp(32px,4.4vw,56px);max-width:14ch}
.close-body p{color:#CFCFCF;font-size:18px}
.close-body .checks{padding:0;color:#DADADA}
.close-body .button{align-self:flex-start}
@media (max-width:860px){.close-card{grid-template-columns:minmax(0,1fr)}.collage{min-height:300px}}

/* page heads on other pages get a little dusk too */
.page-head{position:relative;background:radial-gradient(70% 120% at 50% -10%, rgba(196,255,61,.22), rgba(10,10,10,0) 70%)}
.page-head .inner{padding-top:120px}
.foot{border-top-color:var(--line)}
.legal-line .inner{border-top-color:var(--line)}

/* wireframe to send (work page) */
.w2s{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:28px;align-items:start;max-width:820px}
.w2s .arrow{align-self:center;color:var(--cta-hover);font-size:28px}
.w2s figure{margin:0;display:flex;flex-direction:column;gap:12px}
.w2s figcaption{font-size:15.5px;color:var(--muted)}
.w2s figcaption b{color:var(--ink)}
@media (max-width:680px){.w2s{grid-template-columns:minmax(0,1fr)}.w2s .arrow{transform:rotate(90deg);justify-self:center}}

/* three mails on the work page */
.mails{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.mails{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.mails{grid-template-columns:minmax(0,1fr)}}

@media (max-width:680px){
  .hero .inner{padding-block:48px 0}
  .scene{height:300px;margin-top:12px}
  .close .inner{padding-block:64px}
}
@media (prefers-reduced-motion: reduce){
  .reel-track.run,.fx .loop-icon svg{animation:none}
  .reel-stage{overflow-x:auto}
}

/* fixes after review */
.tools .inner{flex-direction:column;align-items:center;gap:18px}
.tools.marquee .inner{width:100%}
.tools.marquee ul{max-width:none}
.collage img{aspect-ratio:3/4;height:auto;object-fit:cover;object-position:top;background:#fff}
.hero .inner{padding-top:48px;gap:22px}
.hero h1{font-size:clamp(40px,6vw,76px)}
.scene{margin-top:16px}
/* reel: tilt lives on the stage, the track only slides */
.reel-stage{perspective:none;transform:perspective(1600px) rotateX(14deg) rotateZ(-4deg)}
.reel-track{transform:none}
@keyframes reel{to{transform:translateX(-50%)}}
@media (max-width:680px){
  .reel{padding-block:32px 8px}
  .reel .head{margin-bottom:8px}
  .reel-stage{transform:perspective(1200px) rotateX(8deg) rotateZ(-3deg)}
  .reel-track{gap:18px;padding-block:20px 50px}
  .reel-card{width:170px}
  .reel-card:nth-child(even){transform:translateY(22px)}
}

/* black and acid green: graphite envelope with a green rim */
.env-back,.env-front{box-shadow:inset 0 0 0 1px rgba(196,255,61,.35)}
.env{filter:drop-shadow(0 40px 60px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(196,255,61,.18))}
.env-seal{background:radial-gradient(circle at 35% 30%,#D7FF7A,#C4FF3D);box-shadow:0 0 24px rgba(196,255,61,.55)}
.photo{color:var(--cta)}
.button:hover{color:var(--cta-ink)}

/* collage with three emails */
.collage img:nth-child(1){left:5%;top:9%;transform:rotate(-6deg)}
.collage img:nth-child(2){left:50%;top:-3%;transform:rotate(4deg)}
.collage img:nth-child(3){left:30%;top:46%;transform:rotate(-2deg);z-index:2}

/* ---------- envelope that really opens ----------
   Order on load: the seal breaks, the flap folds open backwards, the campaign
   slides out and then scrolls through itself. Click the email to read it in full.
   Without .fx (reduced motion) everything simply shows in the open state. */
.scene{height:clamp(440px,46vw,560px)}
.env-back{z-index:0}
.env-flap{position:absolute;inset:0;z-index:1;border-radius:10px 10px 0 0;transform-origin:50% 0;
  transform:perspective(900px) rotateX(180deg);
  background:linear-gradient(180deg,#232A18,#171B10);
  clip-path:polygon(0 0,100% 0,100% 30%,50% 68%,0 30%)}
.env-letter{z-index:2;bottom:12%;height:150%;padding:0;border:0;cursor:zoom-in;font:inherit;
  transform:translateY(6%);transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease}
.env-letter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 3%;margin:0}
.env-front{z-index:3}
.env-seal{z-index:5;transform:scale(0);opacity:0}
.env:hover .env-letter{transform:translateY(2%)}
.env-letter:focus-visible{outline:2px solid var(--cta);outline-offset:4px}
.env-hint{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;font-size:13.5px;color:var(--muted);pointer-events:none}

.fx .env-seal{animation:sealBreak .7s .25s cubic-bezier(.3,1.5,.5,1) both}
.fx .env-flap{animation:flapOpen .9s .7s cubic-bezier(.5,0,.3,1) both}
.fx .env-letter{animation:letterOut 1.2s 1.45s cubic-bezier(.2,.8,.2,1) both}
.fx .env-letter img{animation:campaign 16s 3.2s ease-in-out infinite alternate}
.fx .env-hint{animation:fadeIn .6s 2.8s both}
@keyframes sealBreak{0%{transform:scale(1);opacity:1}40%{transform:scale(1.18);opacity:1}100%{transform:scale(0) rotate(40deg);opacity:0}}
/* z-index flips halfway, so the closed flap covers the email and the open flap sits behind it */
@keyframes flapOpen{
  0%{transform:perspective(900px) rotateX(0deg);z-index:4;background:linear-gradient(180deg,#2E3622,#1E2316)}
  49%{z-index:4}
  50%{z-index:1}
  100%{transform:perspective(900px) rotateX(180deg);z-index:1}}
@keyframes letterOut{from{transform:translateY(100%)}to{transform:translateY(6%)}}
@keyframes campaign{0%,12%{object-position:50% 3%}88%,100%{object-position:50% 100%}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.env:hover .env-letter img{animation-play-state:paused}
@media (max-width:680px){.scene{height:420px}}

/* full campaign in a dialog */
.mail-modal{border:0;padding:0;background:transparent;max-width:min(560px,92vw);width:100%;color:var(--ink);overflow:visible}
.mail-modal::backdrop{background:rgba(5,6,4,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mail-modal[open]{animation:modalIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.mail-modal .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.mail-modal .bar p{font-size:15px;color:var(--muted)}
.mail-modal .bar b{color:var(--ink);font-weight:600}
.modal-close{flex:none;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:var(--sheet-2);color:var(--ink);font-size:22px;line-height:1;box-shadow:inset 0 0 0 1px var(--line)}
.modal-close:hover{box-shadow:inset 0 0 0 1px var(--cta)}
.mail-modal .scroll{height:min(78vh,900px);border-radius:10px;background:#fff}
.mail-modal .actions{margin-top:14px;justify-content:space-between;align-items:center}
@media (prefers-reduced-motion: reduce){.mail-modal[open]{animation:none}}

/* language switch */
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:700;letter-spacing:.04em}
.lang a,.lang span{display:grid;place-items:center;min-width:34px;height:30px;padding:0 8px;border-radius:999px;text-decoration:none;color:var(--muted)}
.lang a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.lang [aria-current]{color:var(--cta-ink);background:var(--ink)}
@media (max-width:380px){.lang a,.lang span{min-width:30px;padding:0 6px}}
@media (max-width:560px){
  .top .inner{padding:6px 6px 6px 14px;gap:8px}
  .top-actions{gap:6px}
  .top .button.small{padding:9px 13px;font-size:13.5px}
  .lang a,.lang span{min-width:28px;height:28px;padding:0 6px;font-size:12px}
  .menu-btn{width:38px;height:38px}
}
.m-menu .lang.in-menu{display:none}
@media (max-width:400px){
  .top .lang{display:none}
  .m-menu .lang.in-menu{display:inline-flex;margin-top:14px;font-size:14px}
  .m-menu .lang.in-menu a,.m-menu .lang.in-menu span{min-width:44px;height:40px;padding:0 12px;border-bottom:0;font-size:14px}
}
@media (max-width:960px){.m-menu{background:#141414}}