/* Outpost Studio · direction C "Poster" · final */
@font-face{font-family:"Syne";src:url(fonts/syne.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{
/* primitives */
--sand-500:#D9B86A;--sand-300:#E8D3A0;--sand-100:#F5ECD6;--navy-900:#141F2B;--navy-800:#1C2A3A;--navy-600:#2E4157;--navy-300:#9AA9B8;
--paper:#FAFAF7;--stone-200:#E4E2DA;--slate-600:#55606C;--rust-600:#8F3F22;
/* semantic */
--c-bg:var(--paper);--c-ink:var(--navy-800);--c-muted:var(--slate-600);--c-rule:var(--stone-200);
--c-poster:var(--sand-500);--c-poster-ink:var(--navy-800);
--c-inverse:var(--navy-800);--c-inverse-ink:var(--paper);--c-inverse-muted:var(--navy-300);
--c-action:var(--navy-800);--c-action-ink:var(--sand-500);--c-action-inverse:var(--sand-500);--c-focus:var(--rust-600);
/* type: Manrope = text/UI, Syne = display only (>= step 4) */
--display:"Syne",sans-serif;--text:"Manrope",sans-serif;
--step--1:.875rem;--step-0:1.0625rem;--step-1:1.25rem;--step-2:1.563rem;--step-3:clamp(1.75rem,1.4rem + 1.2vw,2.441rem);
--step-4:clamp(2.5rem,1.6rem + 3.4vw,4.5rem);--step-5:clamp(2.6rem,.4rem + 8.8vw,9.25rem);
/* space */
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
--m:clamp(20px,4vw,56px);--max:1328px}
*{box-sizing:border-box;margin:0}
button{font:inherit}
html{scroll-behavior:smooth}body{background:var(--c-bg);color:var(--c-ink);font:500 var(--step-0)/1.6 var(--text);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}a{color:inherit}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:3px}
::selection{background:var(--c-ink);color:var(--c-poster)}
.skip{position:absolute;left:-999px;top:8px;z-index:20;background:var(--c-ink);color:var(--c-poster);padding:12px 16px}.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5)}
.display{font:800 var(--step-5)/.84 var(--display);letter-spacing:-.05em}
h2.big{font:800 var(--step-4)/.92 var(--display);letter-spacing:-.04em}
h3{font:800 var(--step-2)/1.2 var(--text);letter-spacing:-.015em}
p{max-width:62ch;text-wrap:pretty}
.lede{font-size:var(--step-1);line-height:1.5}
.muted{color:var(--c-muted)}
.num{font-variant-numeric:tabular-nums lining-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;background:var(--c-action);color:var(--c-action-ink);font:800 1rem/1 var(--text);text-decoration:none;border:0;cursor:pointer;transition:transform .12s,background-color .2s}
.btn:hover{background:var(--navy-600)}.btn:active{transform:translateY(2px)}
.btn.inv{background:var(--c-action-inverse);color:var(--c-ink)}.btn.inv:hover{background:var(--sand-300)}
.btn.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}.btn.line:hover{background:var(--c-ink);color:var(--c-poster)}
.ul{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.ul:hover{text-decoration-thickness:4px}
.tag{display:inline-block;font:700 var(--step--1)/1 var(--text);padding:7px 10px;border:1.5px solid currentColor}
/* header + mobile menu */
.top{background:var(--c-poster);position:relative;z-index:10}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:var(--s-5)}
.brand{display:flex;align-items:center;gap:12px;font:800 1.0625rem/1 var(--text);text-decoration:none;white-space:nowrap}.brand img{width:36px;height:36px}
.top nav ul{display:flex;gap:var(--s-6);list-style:none;padding:0;font-weight:700}.top nav a{text-decoration:none}.top nav a:hover{text-decoration:underline;text-underline-offset:5px}
.menu-btn{display:none}
/* hero */
.hero{background:var(--c-poster);color:var(--c-poster-ink);overflow:hidden;padding:var(--s-8) 0 var(--s-9)}
.hero .display{margin-left:-.04em}
.hero .display span{display:block}.hero .display .r{text-align:right}
.hero .row{margin-top:var(--s-8);border-top:3px solid var(--c-ink);padding-top:var(--s-6)}
.hero .row{grid-template-rows:auto 1fr}
.hero .pains{grid-column:1/8}
.hero .pains p+p{margin-top:var(--s-4)}
.hero .pains b{font-weight:800}
.hero .act{grid-column:1/8;align-self:start;align-items:flex-start;display:flex;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-6)}
.offer{grid-column:9/13;grid-row:1/3;background:var(--c-ink);color:var(--c-inverse-ink);padding:var(--s-6);align-self:start}
.offer h2{font:800 var(--step-1)/1.25 var(--text);color:var(--c-poster);margin-bottom:var(--s-4)}
.offer ul{list-style:none;padding:0}.offer li{padding:var(--s-3) 0;border-top:1px solid var(--navy-600)}
.offer li b{display:block;font-weight:800;font-size:var(--step-0)}
.offer li span{color:var(--c-inverse-muted);font-size:var(--step--1)}
.offer .from{margin-top:var(--s-4);padding-top:var(--s-4);border-top:3px solid var(--c-poster);font-size:var(--step--1);color:var(--c-inverse-muted)}
.offer .from b{color:var(--c-inverse-ink);font-size:var(--step-1)}
/* sections */
section{padding:var(--s-10) 0}
.shead{align-items:end;margin-bottom:var(--s-8)}.shead h2{grid-column:1/8}.shead p{grid-column:9/13;color:var(--c-muted)}
/* services */
.pain{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5);border-top:3px solid var(--c-ink);padding:var(--s-7) 0 var(--s-8)}
.pain .q{grid-column:1/6}
.pain .q .k{font:800 var(--step--1) var(--text);color:var(--rust-600);display:block;margin-bottom:var(--s-3)}
.pain .q h3{font-size:var(--step-3);line-height:1.12;letter-spacing:-.025em;margin-bottom:var(--s-4)}
.pain .tiers{grid-column:7/13}
.tier{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2) var(--s-5);padding:var(--s-5) 0;border-bottom:1px solid var(--c-rule)}
.tier:first-child{padding-top:0}
.tier b{font:800 var(--step-1) var(--text)}
.tier .inc{grid-column:1;color:var(--c-muted)}
.tier .pr{grid-row:1/3;grid-column:2;text-align:right;font:800 var(--step-3)/1 var(--text);letter-spacing:-.03em}
.tier .pr small{display:block;font:600 var(--step--1)/1.4 var(--text);letter-spacing:0;color:var(--c-muted);margin-top:var(--s-2)}
.also{margin-top:var(--s-6);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5);background:var(--sand-100);padding:var(--s-7)}
.also h3{grid-column:1/-1;margin-bottom:var(--s-2)}
.also .svc{grid-column:span 6}
.also .svc h4{font:800 var(--step-1) var(--text);margin-bottom:var(--s-2)}
.also .svc p{color:var(--c-muted);margin-bottom:var(--s-3)}
.also .line2{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;border-top:1px solid #DDCFA9}
.also .line2 span:last-child{font-weight:800}
.svc-foot{margin-top:var(--s-7);display:flex;gap:var(--s-5);align-items:center;flex-wrap:wrap;color:var(--c-muted)}
/* styles we build */
.styles{background:var(--c-inverse);color:var(--c-inverse-ink)}
.styles .shead p{color:var(--c-inverse-muted)}
.cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-8) var(--s-5)}
.card{display:block}
.card:nth-child(1){grid-column:1/8}.card:nth-child(2){grid-column:8/13;align-self:end}.card:nth-child(3){grid-column:1/6}.card:nth-child(4){grid-column:6/13}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.card .fr{overflow:hidden;border:2px solid var(--navy-600)}

.card .meta{display:flex;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-4);align-items:center}
.card .tag{color:var(--c-poster)}
.card .ff{font-size:var(--step--1);color:var(--c-inverse-muted)}
.card h3{margin-top:var(--s-3);font-size:var(--step-2)}
.card p{color:var(--c-inverse-muted);margin-top:var(--s-2)}
.tcard{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5);background:var(--c-poster);color:var(--c-ink);padding:var(--s-7)}
.tcard header{grid-column:1/5}.tcard header .tag{margin-bottom:var(--s-5)}.tcard header p{margin-top:var(--s-3)}
.tcard .pair{grid-column:5/13;display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--paper)}
.tcard .pair div{padding:var(--s-6)}.tcard .pair div+div{border-left:2px solid var(--c-ink)}
.tcard .lang{font:800 var(--step--1) var(--text);color:var(--rust-600);display:block;margin-bottom:var(--s-3)}
.tcard .pair p{font-size:var(--step-0)}.tcard .pair p b{display:block;font-size:var(--step-1);line-height:1.3;margin-bottom:var(--s-3)}
.tcard .note{grid-column:5/13;font-size:var(--step--1)}
/* steps */
.steps ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);counter-reset:s}
.steps li{counter-increment:s;border-top:3px solid var(--c-ink);padding-top:var(--s-5)}
.steps li::before{content:counter(s);display:block;font:800 var(--step-4)/1 var(--display);margin-bottom:var(--s-4)}
.steps h3{margin-bottom:var(--s-3)}.steps p{color:var(--c-muted)}
/* terms */
.terms{background:var(--sand-100)}
.terms .cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5)}
.terms .col{grid-column:span 6;background:var(--paper);padding:var(--s-7)}
.terms h3{margin-bottom:var(--s-4)}
.terms ul{list-style:none;padding:0}.terms li{padding:var(--s-3) 0 var(--s-3) var(--s-6);border-top:1px solid var(--c-rule);position:relative}
.terms li::before{content:"";position:absolute;left:0;top:22px;width:14px;height:3px;background:var(--c-ink)}
/* about + faq */
.about .who{grid-column:1/5;align-self:start;position:sticky;top:var(--s-6)}
.about .who h2{font-size:var(--step-3);font-family:var(--text);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:var(--s-5) 0 var(--s-4)}
.about .who img{width:64px;height:64px}
.about .faq{grid-column:6/13}
.faq h2{font:800 var(--step-3)/1.1 var(--text);letter-spacing:-.025em;margin-bottom:var(--s-5)}
details{border-top:2px solid var(--c-ink)}details:last-of-type{border-bottom:2px solid var(--c-ink)}
summary{list-style:none;cursor:pointer;padding:var(--s-5) var(--s-8) var(--s-5) 0;font:800 var(--step-1)/1.3 var(--text);position:relative;min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font:800 1.8rem/1 var(--text);transition:transform .2s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 var(--s-8) var(--s-5) 0;color:var(--c-muted)}
/* contact */
.contact{background:var(--c-poster)}
.contact .display{font-size:clamp(3rem,1rem + 7vw,8.5rem)}
.contact .row{margin-top:var(--s-7);border-top:3px solid var(--c-ink);padding-top:var(--s-6);align-items:start}
.contact .row p{grid-column:1/7}

.contact .act{grid-column:1/7;margin-top:var(--s-5)}
/* footer */
footer{background:var(--c-inverse);color:var(--c-inverse-muted);padding:var(--s-8) 0 var(--s-6);font-size:var(--step--1)}
footer .brand{color:var(--c-inverse-ink);grid-column:1/4}
footer .col{grid-column:span 3}footer .col b{display:block;color:var(--c-inverse-ink);margin-bottom:var(--s-2);font-weight:800}
footer address{font-style:normal}
footer .legal{grid-column:1/-1;border-top:1px solid var(--navy-600);margin-top:var(--s-7);padding-top:var(--s-5);display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap}
footer a{color:var(--c-inverse-ink)}
@media (max-width:900px){
 .grid,.pain,.also,.cards,.tcard,.terms .cols{grid-template-columns:minmax(0,1fr)}
 .grid>*,.pain>*,.also>*,.cards>*,.tcard>*,.terms .cols>*,footer .grid>*{grid-column:1/-1!important;grid-row:auto!important}
 .top nav{display:none}
 .menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 16px;background:var(--c-ink);color:var(--c-poster);font:800 1rem var(--text);border:0}
 .menu-btn i{width:18px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}.menu-btn i::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
 .top.open nav{display:block;position:absolute;left:0;right:0;top:84px;background:var(--c-ink);color:var(--c-inverse-ink);padding:var(--s-4) var(--m) var(--s-6)}
 .top.open nav ul{flex-direction:column;gap:0}.top.open nav li a{display:block;padding:var(--s-4) 0;border-bottom:1px solid var(--navy-600);font:800 1.5rem var(--text)}
 .top.open nav .btn{margin-top:var(--s-5);width:100%;background:var(--c-action-inverse);color:var(--c-ink)}
 .top .hdr-cta{display:none}
 section{padding:var(--s-9) 0}.hero{padding:var(--s-6) 0 var(--s-8)}
 .hero .display{font-size:10vw}.hero .display span{white-space:nowrap}
 .hero .offer{order:3}.hero .act{margin-top:var(--s-5)}
 .hero .row{margin-top:var(--s-6)}.offer{margin-top:var(--s-6)}
 .shead{margin-bottom:var(--s-6)}.shead p{margin-top:var(--s-4)}
 .tcard .pair{grid-template-columns:1fr}.tcard .pair div+div{border-left:0;border-top:2px solid var(--c-ink)}.tcard{padding:var(--s-5)}
 .steps ol{grid-template-columns:1fr}
 .terms .col{padding:var(--s-5)}
 .also{padding:var(--s-5)}
 .about .who{position:static}.about .faq{margin-top:var(--s-7)}
 
 .contact .display{font-size:var(--step-5)}
}
@media (min-width:901px){.top nav .btn{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* preview build additions */
.styles .note-s{margin-top:var(--s-4);color:var(--c-inverse-muted)}
html:not(.js) .top nav{display:block}
@media(max-width:900px){html:not(.js) .menu-btn{display:none}html:not(.js) .top nav{display:block;width:100%}html:not(.js) .top .wrap{flex-wrap:wrap}html:not(.js) .top nav ul{flex-wrap:wrap;gap:4px 16px}html:not(.js) .top nav .btn{display:none}}
@media(max-width:900px){html:not(.js) .top .wrap{height:auto;padding-block:12px}}
/* From the blog */
.blogs .shead p a{color:var(--c-ink);font-weight:700;text-underline-offset:4px}
.posts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);border-top:3px solid var(--c-ink)}
.posts a{display:flex;flex-direction:column;gap:var(--s-3);height:100%;padding:var(--s-6) 0 var(--s-4);text-decoration:none;color:var(--c-ink)}
.posts h3{font:800 var(--step-1)/1.2 var(--text)}
.posts p{color:var(--c-muted);font-size:var(--step--1);line-height:1.55}
.posts .more{margin-top:auto;font-weight:800;font-size:var(--step--1)}
.posts a:hover h3{text-decoration:underline;text-underline-offset:5px}
@media(max-width:900px){.posts{grid-template-columns:minmax(0,1fr);gap:0}.posts li+li{border-top:1px solid var(--c-rule)}}

.brand{min-height:44px}
@media(max-width:900px){footer a[href^="mailto:"]{display:inline-block;padding-block:10px}}