:root{--cream:#FBF3E2;--green:#173F38;--green2:#1f4a42;--mustard:#DDB15A;--lime:#B5D334;--red:#E4572E;--ink:#173F38;
--serif:"Fraunces",Georgia,serif;--sans:"Work Sans",system-ui,sans-serif;--ease-out:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:400 1.0625rem/1.6 var(--sans);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--cream);padding:.5rem 1rem;z-index:20}.skip:focus{left:1rem;top:1rem}
section{scroll-margin-top:80px}
.grain{position:relative}
.hero,.cam,.talk,.nav{background-color:var(--green);color:var(--cream);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:.75rem clamp(1rem,4vw,3rem);border-bottom:1px solid rgba(251,243,226,.12)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:700 1.25rem var(--serif)}
.brand img{width:40px}
.nav ul{display:flex;gap:clamp(.75rem,2.5vw,2rem);list-style:none;margin:0;padding:0;align-items:center}
.nav a{text-decoration:none;font-size:.95rem}.nav a:hover{color:var(--lime)}
.pill{background:var(--cream);color:var(--green)!important;padding:.5rem 1rem;border-radius:8px;font-weight:600}
.pill:hover{background:var(--mustard)}
.label{font:600 .78rem var(--sans);letter-spacing:.28em;text-transform:uppercase;margin:0 0 1rem}
.hero{padding:clamp(3rem,8vw,6.5rem) clamp(1rem,5vw,4rem) clamp(4rem,9vw,7rem);overflow:hidden}
.hero-in{max-width:1100px;margin:0 auto}
.hero .label{color:var(--mustard)}
.hero h1{margin:0 0 2rem;max-width:760px}
.wordmark{width:100%}
.q{font:700 clamp(1.9rem,4.6vw,3.4rem)/1.1 var(--serif);font-variation-settings:"SOFT" 100;margin:0}
.answer{font:600 clamp(1.25rem,2.6vw,1.8rem)/1.25 var(--serif);color:var(--red);margin:.4rem 0 1.5rem;filter:brightness(1.15)}
.lede{max-width:40rem;margin:0 0 .75rem;opacity:.92}
.meta{font-size:.95rem;color:var(--mustard);margin:0 0 2rem}
.btn{display:inline-flex;gap:.5rem;align-items:center;background:var(--red);color:#fff;text-decoration:none;font-weight:600;padding:.85rem 1.4rem;border-radius:8px;transition:transform .16s var(--ease-out),background .2s ease}
.btn:hover{background:#cf4720}.btn:active{transform:scale(.97)}
.wrap{max-width:1100px;margin:0 auto;padding:clamp(3.5rem,8vw,6rem) clamp(1rem,5vw,3rem)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(1.5rem,5vw,5rem)}
h2{font:700 clamp(1.7rem,3.6vw,2.6rem)/1.1 var(--serif);font-variation-settings:"SOFT" 100;margin:0 0 1.5rem}
.prose p{margin:0 0 1.1rem;max-width:38rem}
.ai{border-bottom:1px solid rgba(23,63,56,.15)}
.how{background:var(--mustard)}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:3rem 1fr;padding:1rem 0;border-top:1px solid rgba(23,63,56,.35);font-size:1.15rem}
.steps li:last-child{border-bottom:1px solid rgba(23,63,56,.35)}
.steps span{font:700 1rem var(--serif);color:var(--green);padding-top:.2rem}
.work .label{color:var(--red)}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:0;border-top:1px solid rgba(23,63,56,.15);border-left:1px solid rgba(23,63,56,.15)}
.grid li{aspect-ratio:1;display:grid;place-items:center;padding:clamp(1rem,2.5vw,1.75rem);background:#fff;border-right:1px solid rgba(23,63,56,.15);border-bottom:1px solid rgba(23,63,56,.15)}
.grid img{max-height:100%;width:auto;object-fit:contain}
.cam h2{color:var(--mustard)}
.pk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--green)}
.pk article{padding:1.75rem 1.5rem 1.5rem 0}
.pk article+article{padding-left:1.5rem;border-left:1px solid rgba(23,63,56,.2)}
.pk h3{font:700 1.5rem var(--serif);margin:0}
.price{font:800 2.4rem/1 var(--serif);margin:.5rem 0 1rem}.price small{font:500 .9rem var(--sans);letter-spacing:.1em}
.pk ul{padding-left:1.1rem;margin:1rem 0 0}.pk li{margin:.35rem 0}
.feature .tag{font:600 .72rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 .5rem}
.pk article:not(.feature){padding-top:calc(1.75rem + 1.6rem)}
.fine{font-size:.92rem;margin:2rem 0 1.5rem;opacity:.8}
.faq{border-top:1px solid rgba(23,63,56,.15)}
details{border-bottom:1px solid rgba(23,63,56,.2);padding:.9rem 0}
summary{cursor:pointer;font:600 1.15rem var(--serif);list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";color:var(--red);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
summary::-webkit-details-marker{display:none}
details p{margin:.6rem 0 0;max-width:38rem}
.talk{text-align:left}.talk .wrap{max-width:760px}
.talk h2{color:var(--cream);font-size:clamp(2rem,5vw,3.4rem)}
.talk p{opacity:.92;margin:0 0 2rem}
.talk .mail{margin-top:1.5rem}.talk .mail a{color:var(--mustard)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:2rem clamp(1rem,5vw,3rem);font-size:.9rem}
.foot p{margin:0}
@media (max-width:820px){
 .two{grid-template-columns:1fr;gap:.5rem}
 .pk{grid-template-columns:1fr}
 .pk article,.pk article+article,.pk article:not(.feature){padding:1.5rem 0;border-left:0;border-bottom:1px solid rgba(23,63,56,.2)}
 .nav li:not(:last-child){display:none}
 .brand span{display:none}
 h2{font-weight:600}
 .grid{grid-template-columns:repeat(2,1fr)}
}
.grid li{container-type:inline-size;overflow:hidden}
.grid img{max-width:82%;max-height:72cqw;width:auto;height:auto}
.hero{position:relative}
.hero::after{content:"";position:absolute;right:-6vw;top:12%;width:min(46vw,640px);aspect-ratio:212/176;background:var(--lime);-webkit-mask:url(/img/monogram.svg) center/contain no-repeat;mask:url(/img/monogram.svg) center/contain no-repeat;opacity:.9;pointer-events:none}
.hero-in{position:relative;z-index:1}
@media (max-width:1000px){.hero::after{display:none}}
.hero h1{max-width:min(640px,100%)}
.hero::after{width:min(36vw,500px);right:-3vw;top:16%}
.grid img{max-width:86%;max-height:78cqw}
.wink{display:block;font:italic 500 .55em/1.3 var(--serif);opacity:.7;margin-top:.4rem}