:root{--ink:#12131a;--ink2:#2a2c38;--paper:#f5f0e6;--paper2:#ebe3d3;--line:#d9cfbb;--accent:#ff5a2c;--accent-d:#e2461a;--moss:#1f3b33;--moss2:#2d5247;--lime:#d7f36b;--muted:#5d5f6b;--r:18px;--max:1180px;
--fd:"Fraunces",Georgia,serif;--fb:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--fd);font-weight:600;line-height:1.05;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(34px,5vw,58px)}h3{font-size:24px;letter-spacing:-.01em}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);margin-bottom:18px}
.eyebrow:before{content:"";width:22px;height:2px;background:currentColor}
.lead{font-size:20px;color:var(--muted);max-width:620px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;transition:transform .15s,background .15s,color .15s;cursor:pointer;font-family:var(--fb)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-d)}
.btn-ghost{border-color:currentColor;background:transparent}
.btn-dark{background:var(--ink);color:#fff}
.arrow{transition:transform .15s}.btn:hover .arrow{transform:translateX(4px)}
/* header */
header.top{position:sticky;top:0;z-index:50;background:rgba(245,240,230,.88);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
header.top.scrolled{border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--fd);font-weight:700;font-size:23px;letter-spacing:-.02em}
.logo-mark{width:34px;height:34px;flex:none}
.logo b{color:var(--accent);font-weight:700}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-weight:600;font-size:15px;color:var(--ink2)}.nav ul a:hover{color:var(--accent-d)}
.nav .btn{padding:11px 20px;font-size:15px}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;color:var(--ink)}
@media(max-width:900px){.nav ul,.nav .btn{display:none}.menu-btn{display:block}
 .nav.open ul{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:var(--paper);padding:20px 24px 28px;gap:18px;border-bottom:1px solid var(--line)}
 .nav.open ul a{font-size:20px}}
/* hero */
.hero{padding:70px 0 90px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(46px,7vw,88px);font-weight:600}
.hero h1 em{font-style:italic;color:var(--accent);font-weight:500}
.hero .lead{margin:26px 0 34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-notes{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;padding:0;list-style:none;font-size:15px;font-weight:600;color:var(--ink2)}
.hero-notes li{display:flex;gap:8px;align-items:center}.hero-notes svg{color:var(--moss2)}
.stack{position:relative;height:520px}
.frame{position:absolute;background:#fff;border-radius:14px;box-shadow:0 30px 60px -20px rgba(18,19,26,.35),0 0 0 1px rgba(18,19,26,.06);overflow:hidden}
.frame .bar{height:26px;background:#f1ece2;display:flex;align-items:center;gap:6px;padding:0 12px}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:#d6ccb8}
.frame .bar span{margin-left:10px;font-size:11px;color:#8a8577;font-weight:600}
.f1{width:78%;top:0;right:0;transform:rotate(2deg)}
.f2{width:66%;top:180px;left:0;transform:rotate(-3deg);z-index:2}
.f3{width:48%;top:330px;right:4%;z-index:3;transform:rotate(1.5deg)}
.hero-tag{position:absolute;z-index:4;left:6%;top:70px;background:var(--lime);color:var(--ink);font-weight:800;font-size:14px;padding:10px 16px;border-radius:999px;transform:rotate(-6deg);box-shadow:0 10px 20px -8px rgba(0,0,0,.3)}
@media(max-width:900px){.hero{padding:40px 0 60px}.hero-grid{grid-template-columns:1fr;gap:40px}.stack{height:360px}.f2{top:120px}.f3{top:220px}}
/* marquee of trades */
.trades{background:var(--ink);color:var(--paper);padding:18px 0;overflow:hidden;white-space:nowrap}
.trades-track{display:inline-flex;gap:40px;animation:scroll 40s linear infinite;font-family:var(--fd);font-size:24px;font-style:italic}
.trades-track span:nth-child(even){color:var(--accent);font-style:normal}
@keyframes scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.trades-track{animation:none}html{scroll-behavior:auto}}
section{padding:110px 0}
@media(max-width:700px){section{padding:76px 0}}
.head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:56px;flex-wrap:wrap}
.head .lead{margin:0}
/* problem */
.ps{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{border-radius:var(--r);padding:38px}
.ps .bad{background:var(--paper2);border:1px solid var(--line)}
.ps .good{background:var(--moss);color:#eef3ea}
.ps h3{margin-bottom:20px}
.ps ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ps li{display:flex;gap:12px;align-items:flex-start}
.ps li svg{flex:none;margin-top:4px}
.ps .bad svg{color:#b5452a}.ps .good svg{color:var(--lime)}
.label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;opacity:.75}
@media(max-width:800px){.ps{grid-template-columns:1fr}.card{padding:28px}}
/* included */
.inc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.inc div{background:var(--paper);padding:30px 26px}
.inc .ic{width:46px;height:46px;border-radius:12px;background:var(--ink);color:var(--lime);display:grid;place-items:center;margin-bottom:18px}
.inc h3{font-size:20px;margin-bottom:8px;font-family:var(--fb);font-weight:800;letter-spacing:-.01em}
.inc p{margin:0;color:var(--muted);font-size:15.5px}
@media(max-width:1000px){.inc{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.inc{grid-template-columns:1fr}}
/* work */
#work{background:var(--ink);color:var(--paper)}
#work .lead{color:#b8b4a8}#work .eyebrow{color:var(--lime)}
.grid-work{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.w{display:block;text-decoration:none;border-radius:var(--r);overflow:hidden;background:#1c1d26;border:1px solid #2b2d38;transition:transform .2s,border-color .2s}
.w:hover{transform:translateY(-4px);border-color:var(--accent)}
.w .shot{aspect-ratio:16/10;overflow:hidden;background:#2a2b33}
.w img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.w:hover img{transform:scale(1.03)}
.w .meta{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px}
.w h3{font-size:22px}.w p{margin:4px 0 0;color:#a9a597;font-size:14.5px}
.pill{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--lime);color:var(--ink);white-space:nowrap}
.w .go{width:42px;height:42px;border-radius:50%;border:1px solid #3a3c48;display:grid;place-items:center;flex:none}
.w:hover .go{background:var(--accent);border-color:var(--accent)}
.w.big{grid-column:span 2}.w.big .shot{aspect-ratio:21/9}
.note{margin-top:36px;color:#a9a597;font-size:15px;max-width:760px}
@media(max-width:760px){.grid-work{grid-template-columns:1fr}.w.big{grid-column:auto}.w.big .shot{aspect-ratio:16/10}}
/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.step{position:relative;padding:30px 24px 28px;border-top:3px solid var(--ink)}
.step:before{counter-increment:s;content:"0" counter(s);font-family:var(--fd);font-size:58px;font-weight:500;font-style:italic;color:var(--accent);line-height:1;display:block;margin-bottom:18px}
.step h3{font-size:22px;margin-bottom:10px}.step p{margin:0;color:var(--muted);font-size:15.5px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}@media(max-width:560px){.steps{grid-template-columns:1fr}}
/* plans */
#plans{background:var(--paper2)}
.plans{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:22px;align-items:stretch}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:36px 32px;display:flex;flex-direction:column}
.plan.main{background:var(--ink);color:var(--paper);border-color:var(--ink);position:relative}
.plan .tag{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);margin-bottom:14px}
.plan.main .tag{color:var(--lime)}
.plan h3{font-size:32px;margin-bottom:12px}
.plan>p{margin:0 0 22px;color:var(--muted)}.plan.main>p{color:#bdb9ad}
.plan ul{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:11px;font-size:15.5px}
.plan li{display:flex;gap:10px}.plan li svg{flex:none;margin-top:4px;color:var(--moss2)}.plan.main li svg{color:var(--lime)}
.plan .btn{margin-top:auto;justify-content:center}
@media(max-width:960px){.plans{grid-template-columns:1fr}}
/* faq */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}
details{border-bottom:1px solid var(--line);padding:6px 0}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-weight:700;font-size:19px}
summary::-webkit-details-marker{display:none}
summary .pm{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;flex:none;transition:transform .2s,background .2s}
details[open] summary .pm{transform:rotate(45deg);background:var(--ink);color:var(--paper)}
details p{margin:0 0 22px;color:var(--muted);max-width:640px}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr;gap:20px}}
/* contact */
#contact{background:var(--accent);color:#fff}
#contact .eyebrow{color:var(--ink)}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:start}
#contact h2{font-size:clamp(40px,6vw,72px)}
#contact .lead{color:#ffe7dd;margin:22px 0 34px}
.direct{display:grid;gap:12px}
.direct a{display:flex;align-items:center;gap:14px;text-decoration:none;font-weight:700;font-size:18px;background:rgba(255,255,255,.12);padding:16px 20px;border-radius:14px;transition:background .15s}
.direct a:hover{background:rgba(255,255,255,.22)}
.direct small{display:block;font-weight:600;font-size:13px;opacity:.8}
form.f{background:var(--paper);color:var(--ink);border-radius:24px;padding:36px;box-shadow:0 30px 60px -25px rgba(0,0,0,.4)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{margin-bottom:16px}
.fld label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fffdf8;color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,90,44,.25)}
.fld textarea{min-height:110px;resize:vertical}
.hp{position:absolute;left:-9999px}
form.f .btn{width:100%;justify-content:center;font-size:17px}
.fine{font-size:13px;color:var(--muted);margin:14px 0 0;text-align:center}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px}}@media(max-width:560px){.row{grid-template-columns:1fr;gap:0}form.f{padding:24px}}
/* footer */
footer{background:var(--ink);color:#b8b4a8;padding:64px 0 34px;font-size:15px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:48px}
footer .logo{color:var(--paper);margin-bottom:14px}
footer h4{color:var(--paper);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
footer a{text-decoration:none}footer a:hover{color:var(--paper)}
.legal{border-top:1px solid #2b2d38;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px}
@media(max-width:760px){.foot{grid-template-columns:1fr}}
/* simple pages */
.page{padding:70px 0 100px}.page .wrap{max-width:780px}
.page h1{font-size:clamp(40px,6vw,64px);margin-bottom:12px}
.page h2{font-size:28px;margin:40px 0 10px}.page p,.page li{color:var(--ink2)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
footer .logo-mark rect{fill:#2a2c38}