:root{--p:#F6F1E8;--i:#16130F;--m:#6B6359;--a:#E8552D;--h:#E2D9CB;--e:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{background:var(--p);color:var(--i);font:400 18px/28px "Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;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)' opacity='.6'/%3E%3C/svg%3E")}
a{color:inherit}img{display:block;max-width:100%;height:auto}
.w{max-width:1180px;margin:0 auto;padding:0 32px}.row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--i);color:var(--p);padding:8px 14px;border-radius:999px}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(232,85,45,.35);border-radius:999px}
.lbl{font:600 12px/16px "Inter Tight";text-transform:uppercase;letter-spacing:.12em;color:var(--a);margin-bottom:16px}
.muted,.note{color:var(--m)}.note{font-size:15px;margin-top:16px;text-align:center}
.brand{font:600 22px "Fraunces",serif;text-decoration:none;letter-spacing:-.01em}.brand em{font-style:normal;color:var(--a)}
.top{position:sticky;top:0;z-index:40;background:rgba(246,241,232,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--h)}.top .row{height:68px}
.top nav{display:flex;gap:28px;align-items:center;font-size:15px}.top nav a{text-decoration:none;color:var(--m)}.top nav a:hover{color:var(--i)}.top nav .pill{color:#fff}
.pill{display:inline-flex;align-items:center;justify-content:center;background:var(--a);color:#fff;text-decoration:none;font:600 16px "Inter Tight";padding:16px 28px;border-radius:999px;transition:background .18s ease-out,transform .18s ease-out;will-change:transform}
.pill:hover{background:#CF4520}.pill.sm{padding:9px 16px;font-size:14px}
.pill.line{background:transparent;color:var(--i);border:1px solid var(--i)}.pill.line:hover{background:var(--i);color:var(--p)}
.ghost{font-weight:500;text-decoration:none;border-bottom:1px solid var(--h);padding:4px 0;transition:border-color .18s}.ghost:hover{border-color:var(--i)}.ghost.inv{border-color:#4a433b}.ghost.inv:hover{border-color:var(--p)}
.ctas{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:36px}
/* hero */
.hero{padding:72px 0 88px}.hero-g{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
h1.kin{font:600 clamp(48px,7.4vw,96px)/.98 "Fraunces",serif;letter-spacing:-.025em;margin-bottom:28px}
.kin span{display:inline-block;opacity:0;transform:translateY(.45em);animation:up .7s var(--e) forwards}
.kin span:nth-child(2){animation-delay:.07s}.kin span:nth-child(3){animation-delay:.14s}.kin span:nth-child(4){animation-delay:.21s}.kin span:nth-child(5){animation-delay:.28s}.kin span:nth-child(6){animation-delay:.35s}
.kin .acc{color:var(--a);font-style:italic}
@keyframes up{to{opacity:1;transform:none}}
.sub{font:500 22px/30px "Inter Tight";margin-bottom:10px}
.hero-t .sub,.hero-t .muted,.hero-t .ctas{opacity:0;animation:up .7s var(--e) .45s forwards}
.devices{position:relative;aspect-ratio:1/.82;perspective:1600px;opacity:0;animation:up .9s var(--e) .25s forwards}
.laptop{position:absolute;left:0;top:6%;width:92%;transform:rotateY(-9deg) rotateX(5deg) var(--tilt,translateZ(0));transform-origin:left center;transition:transform .2s linear}
.scr{background:var(--i);border-radius:14px 14px 4px 4px;padding:2.2%;box-shadow:0 1px 0 var(--h),0 40px 60px -30px rgba(22,19,15,.45)}
.scr img{border-radius:4px;aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%}
.base{height:14px;margin:0 -5%;background:#d9d0c2;border-radius:0 0 14px 14px;border-top:1px solid #c9bfb0}
.phone{position:absolute;right:0;bottom:2%;width:28%;aspect-ratio:9/19;background:var(--i);border-radius:28px;padding:7px;box-shadow:0 30px 50px -20px rgba(22,19,15,.5);transform:rotate(4deg)}
.pscr{width:100%;height:100%;border-radius:22px;overflow:hidden;background:var(--p)}.pscr img{width:auto;height:100%;max-width:none;object-fit:cover;object-position:8% top}
.tag{position:absolute;left:0;bottom:0;font:600 12px "Inter Tight";letter-spacing:.12em;text-transform:uppercase;background:var(--p);border:1px solid var(--h);padding:7px 12px;border-radius:999px}
/* marquee */
.marquee{border-block:1px solid var(--h);overflow:hidden;padding:22px 0}
.track{display:flex;gap:56px;width:max-content;animation:mq 38s linear infinite}
.track span{font:500 clamp(28px,4vw,44px)/1 "Fraunces",serif;color:var(--m);white-space:nowrap;display:flex;align-items:center;gap:56px}
.track span:after{content:"";width:10px;height:10px;border-radius:50%;background:var(--a)}
@keyframes mq{to{transform:translateX(-50%)}}
/* sections */
.sec{padding:120px 0}.head{display:grid;grid-template-columns:140px 1fr;gap:24px;margin-bottom:56px;align-items:start}
.num{font:500 96px/.8 "Fraunces",serif;color:transparent;-webkit-text-stroke:1px #c8bcaa;letter-spacing:-.04em}
h2{font:600 clamp(34px,4.6vw,56px)/1.05 "Fraunces",serif;letter-spacing:-.02em;max-width:16em}.head .muted{margin-top:16px}
h3{font:600 24px/30px "Fraunces",serif;letter-spacing:-.01em}
/* before after */
.ba{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--h);box-shadow:0 1px 0 var(--h),0 24px 48px -24px rgba(22,19,15,.25);aspect-ratio:16/10;user-select:none;touch-action:pan-y;background:#fff}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--p);background:#F6F1E8;pointer-events:none}
.knob{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--a);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px -6px rgba(22,19,15,.4)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba:has(.ba-range:focus-visible) .knob{box-shadow:0 0 0 4px rgba(232,85,45,.35)}
.bl{position:absolute;bottom:16px;font:600 12px "Inter Tight";letter-spacing:.12em;text-transform:uppercase;background:rgba(22,19,15,.82);color:var(--p);padding:6px 12px;border-radius:999px;pointer-events:none}.bl.l{left:16px}.bl.r{right:16px}
/* stacked work */
.stack{display:grid;gap:28px}
.card{position:sticky;top:96px;display:grid;grid-template-columns:.7fr 1.3fr;gap:32px;align-items:center;background:#fff;border:1px solid var(--h);border-radius:14px;padding:32px;box-shadow:0 1px 0 var(--h),0 12px 32px -16px rgba(22,19,15,.18);transform-origin:top center}
.card:nth-child(2){top:116px}.card:nth-child(3){top:136px}.card:nth-child(4){top:156px}
.card img{border-radius:8px;border:1px solid var(--h);aspect-ratio:16/10;object-fit:cover;object-position:top}
.card p{color:var(--m);margin-top:6px}.ex{display:inline-block;font:600 12px "Inter Tight";letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--c);padding:5px 11px;border-radius:999px;margin-bottom:18px}
/* tiles */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tile{border-top:1px solid var(--i);padding-top:24px}.tile b{font:600 48px/1 "Fraunces",serif;color:var(--a);display:block;margin-bottom:20px}.tile p{color:var(--m);margin-top:10px;font-size:16px;line-height:25px}
/* how */
.ink{background:var(--i);color:var(--p)}.ink .num{-webkit-text-stroke-color:#4a433b}
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:64px}.sticky{position:sticky;top:120px;align-self:start}.sticky .num{display:block;margin-bottom:32px}
.steps{list-style:none}.steps li{display:grid;grid-template-columns:96px 1fr;gap:24px;padding:40px 0;border-top:1px solid #3a342d}.steps li:last-child{border-bottom:1px solid #3a342d}
.steps span{font:600 72px/.9 "Fraunces",serif;color:var(--a)}.steps p{color:#bfb5a6;margin-top:10px}
/* pricing */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tier{position:relative;background:#fff;border:1px solid var(--h);border-radius:14px;padding:44px;display:flex;flex-direction:column;transition:transform .25s var(--e),box-shadow .25s}
.tier:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(22,19,15,.35)}
.tier.rec{background:var(--i);color:var(--p);border-color:var(--i)}
.badge{position:absolute;top:24px;right:24px;background:var(--a);color:#fff;font:600 12px "Inter Tight";letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.price{font:600 80px/1 "Fraunces",serif;letter-spacing:-.03em;margin:24px 0 6px}.once{font-size:15px;color:var(--m)}.rec .once{color:#bfb5a6}
.tier ul{list-style:none;margin:32px 0 40px;flex:1}.tier li{padding:13px 0;border-top:1px solid var(--h);font-size:16px;color:var(--m)}.rec li{border-color:#3a342d;color:#cfc6b8}.tier li b{font-weight:500;color:var(--i)}.rec li b{color:var(--p)}
.tier li:last-child{font-weight:500}.rec .pill:focus-visible,.final .pill:focus-visible{box-shadow:0 0 0 3px rgba(232,85,45,.55)}
/* faq */
.faq{border-top:1px solid var(--i)}details{border-bottom:1px solid var(--h)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:26px 4px;font:600 22px/30px "Fraunces",serif;border-radius:0}
summary::-webkit-details-marker{display:none}summary:after{content:"+";font:400 28px "Inter Tight";color:var(--a);transition:transform .18s ease-out}
details[open] summary:after{transform:rotate(45deg)}details p{color:var(--m);padding:0 4px 28px;max-width:40em}
/* final */
.final{background:var(--a);color:#fff;padding:120px 0;text-align:left}.final .lbl{color:#fff;opacity:.85}
.big{font:600 clamp(44px,8vw,112px)/.95 "Fraunces",serif;letter-spacing:-.03em;max-width:10em}.final .sub{margin-top:24px}
.final .pill{background:var(--i)}.final .pill:hover{background:#000}.final .ghost{border-color:rgba(255,255,255,.5)}.final .ghost:hover{border-color:#fff}
footer{padding:36px 0;font-size:15px;color:var(--m);border-top:1px solid var(--h)}footer .row{flex-wrap:wrap}
/* cursor preview */
.cursor{position:fixed;left:0;top:0;width:280px;border-radius:10px;overflow:hidden;pointer-events:none;z-index:45;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .2s,transform .2s;box-shadow:0 20px 40px -16px rgba(22,19,15,.45)}
.cursor.on{opacity:1}
/* reveal */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--e),transform .8s var(--e)}.js .rv.in{opacity:1;transform:none}
@media (max-width:900px){
.hero{padding:40px 0 56px}.hero-g{grid-template-columns:1fr;gap:40px}.top nav a:not(.pill){display:none}
.sec{padding:80px 0}.head{grid-template-columns:1fr;gap:8px;margin-bottom:36px}.num{font-size:64px}
.card{grid-template-columns:1fr;padding:20px;gap:18px;top:84px}.card:nth-child(2){top:96px}.card:nth-child(3){top:108px}.card:nth-child(4){top:120px}.ex{margin-bottom:10px}
.g3,.tiers,.split{grid-template-columns:1fr}.split{gap:24px}.sticky{position:static}
.steps li{grid-template-columns:56px 1fr;gap:16px;padding:28px 0}.steps span{font-size:48px}
.tier{padding:32px 24px}.price{font-size:64px}.final{padding:88px 0}.cursor{display:none}
}
@media (max-width:480px){.w{padding:0 20px}.ctas{gap:20px}.ctas .pill{width:100%}.sub{font-size:20px}.knob{width:44px;height:44px;margin:-22px 0 0 -22px}footer .row{flex-direction:column;align-items:flex-start;gap:6px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.kin span,.hero-t .sub,.hero-t .muted,.hero-t .ctas,.devices{opacity:1;transform:none}.js .rv{opacity:1;transform:none}.track{flex-wrap:wrap;width:auto}html{scroll-behavior:auto}.laptop{--tilt:translateZ(0)!important}}