/* Signpost Studio: heritage fingerpost look. Cream sign-paint, signpost green, mustard. */
:root{
  --paper:#f3eee2; --paper-2:#ebe4d3; --ink:#17201b; --green:#1f4d3a; --green-2:#2c6a50; --mustard:#e2a72e;
  --line:rgba(23,32,27,.14); --muted:rgba(23,32,27,.68);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 "Schibsted Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.35;mix-blend-mode:multiply;
  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%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
.wrap{width:min(1140px,100% - 32px);margin-inline:auto}
h1,h2,h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;line-height:1.02;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(2.3rem,5vw,3.6rem)}
h3{font-size:1.5rem;line-height:1.15}
em{font-style:italic;color:var(--green)}
.eyebrow{margin:0 0 .9rem;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.muted{color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.6rem;border-radius:6px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);font:600 16px/1 "Schibsted Grotesk",sans-serif;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--mustard)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-small{min-height:40px;padding:0 1rem;font-size:14.5px}

.head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:2rem;min-height:70px}
.logo{display:flex;align-items:center;gap:.55rem;margin-right:auto;text-decoration:none;font:400 1.55rem/1 "Instrument Serif",serif}
.logo-mark{width:30px;height:30px;fill:var(--green)}
.nav{display:flex;gap:1.6rem}
.nav a{text-decoration:none;font-size:15px;font-weight:500;color:var(--muted)}
.nav a:hover{color:var(--ink)}

/* hero */
.hero{padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem)}
.hero-row{display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(3.2rem,8.5vw,6.6rem);margin-bottom:1.4rem}
.lede{font-size:clamp(1.08rem,1.7vw,1.28rem);max-width:36rem;margin:0 0 2rem;color:var(--muted)}
.lede strong{color:var(--ink);font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-points{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-size:15px;font-weight:600}
.hero-points li::before{content:"✓";margin-right:.45rem;color:var(--green)}
.hero-copy>*{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}.hero-copy>*:nth-child(4){animation-delay:.24s}.hero-copy>*:nth-child(5){animation-delay:.32s}

/* fingerpost */
.post{position:relative;height:440px;max-width:360px;width:100%;justify-self:center}
.pole{position:absolute;left:50%;top:22px;bottom:18px;width:16px;margin-left:-8px;border-radius:3px;background:linear-gradient(90deg,#e9e2d0,#fffaf0 40%,#d6ccb5)}
.finial{position:absolute;left:50%;top:6px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:var(--mustard);box-shadow:inset -4px -4px 0 rgba(0,0,0,.12)}
.ground{position:absolute;left:18%;right:18%;bottom:6px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(23,32,27,.25),transparent)}
.arm{position:absolute;height:56px;display:flex;align-items:center;padding:0 1.4rem;background:#fffaf0;color:var(--ink);font:400 1.6rem/1 "Instrument Serif",serif;white-space:nowrap;box-shadow:0 10px 20px -12px rgba(0,0,0,.35);border:2px solid var(--ink)}
.arm span{position:relative}
.arm-r{left:calc(50% - 10px);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%);padding-right:2.4rem;border-right:0;transform-origin:left center}
.arm-l{right:calc(50% - 10px);clip-path:polygon(26px 0,100% 0,100% 100%,26px 100%,0 50%);padding-left:2.4rem;border-left:0;transform-origin:right center}
.a1{top:56px;background:var(--green);color:#fffaf0;border-color:var(--green);animation:swing-r 1s .3s cubic-bezier(.2,.8,.2,1) both}
.a2{top:142px;animation:swing-l 1s .5s cubic-bezier(.2,.8,.2,1) both}
.a3{top:228px;background:var(--mustard);border-color:var(--mustard);animation:swing-r 1s .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes swing-r{from{opacity:0;transform:rotate(-16deg) scaleX(.6)}to{opacity:1;transform:none}}
@keyframes swing-l{from{opacity:0;transform:rotate(16deg) scaleX(.6)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.strip{background:var(--green);color:#f3eee2;padding:2.4rem 0}
.strip p{margin:0;max-width:52rem;font:400 clamp(1.5rem,3vw,2.2rem)/1.25 "Instrument Serif",serif}
.strip em{color:var(--mustard)}

.section{padding:clamp(4rem,8vw,6.5rem) 0}
.sec-head{max-width:44rem;margin-bottom:2.6rem}
.sec-head .muted{margin:.8rem 0 0}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.steps li{padding:1.6rem 1.4rem;border-top:3px solid var(--ink);background:var(--paper-2)}
.steps .n{display:block;font:400 3rem/1 "Instrument Serif",serif;color:var(--green);margin-bottom:.6rem}
.steps h3{margin-bottom:.5rem}
.steps p{margin:0;font-size:15.5px;color:var(--muted)}

.what{background:#fbf8f0;border-block:1px solid var(--line)}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.features article{padding:1.8rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.features h3{margin-bottom:.45rem}
.features h3::before{content:"";display:block;width:26px;height:4px;margin-bottom:1rem;background:var(--mustard)}
.features p{margin:0;color:var(--muted);font-size:15.5px}

.burned{background:var(--ink);color:var(--paper)}
.burned .eyebrow{color:var(--mustard)}
.burned .muted{color:rgba(243,238,226,.7)}
.burned-row{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.ticks li{padding:1.1rem 1.2rem 1.1rem 3.2rem;position:relative;background:rgba(243,238,226,.06);border:1px solid rgba(243,238,226,.14);border-radius:8px;color:rgba(243,238,226,.8);font-size:15.5px}
.ticks li::before{content:"✓";position:absolute;left:1.1rem;top:1rem;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mustard);color:var(--ink);font-weight:700;font-size:13px}
.ticks b{color:#fffaf0;display:block}

.examples{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.ex{display:block;text-decoration:none;background:#fffaf0;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.ex:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(0,0,0,.4)}
.ex-shot{position:relative;height:190px;background:var(--c2);padding:18px;display:flex;flex-direction:column;gap:9px}
.ex-bar{height:8px;width:40%;border-radius:4px;background:var(--c1)}
.ex-h{height:18px;width:80%;border-radius:3px;background:var(--c3);margin-top:10px}
.ex-h.short{width:55%;margin-top:0}
.ex-btn{height:22px;width:34%;border-radius:4px;background:var(--c1);margin-top:6px}
.ex-cards{display:flex;gap:6px;margin-top:auto}
.ex-cards i{flex:1;height:34px;border-radius:4px;background:color-mix(in srgb,var(--c3) 85%,transparent)}
.ex-body{padding:1.2rem 1.3rem 1.4rem}
.ex-kind{margin:0 0 .3rem;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ex-go{display:inline-block;margin-top:.7rem;font-weight:600;font-size:15px;color:var(--green)}

.local{background:var(--paper-2)}
.local-row{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center}
.local p{color:var(--muted);max-width:36rem}
.areas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.areas li{padding:.5rem .9rem;border:1.5px solid var(--ink);border-radius:999px;font-weight:600;font-size:14.5px;background:var(--paper)}

.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start}
.qs details{border-bottom:1px solid var(--line);padding:1.1rem 0}
.qs details:first-child{border-top:1px solid var(--line)}
.qs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font:400 1.45rem/1.2 "Instrument Serif",serif}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";font-family:"Schibsted Grotesk",sans-serif;font-size:1.4rem;color:var(--green);transition:transform .2s}
.qs details[open] summary::after{transform:rotate(45deg)}
.qs p{margin:.7rem 0 0;color:var(--muted)}

.contact{background:var(--green);color:var(--paper)}
.contact .eyebrow{color:var(--mustard)}
.contact-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}
.contact-row>div>p{color:rgba(243,238,226,.8);max-width:28rem}
.direct a{font:400 1.6rem/1.5 "Instrument Serif",serif;color:#fffaf0}
.form{background:var(--paper);color:var(--ink);padding:clamp(1.3rem,3vw,2rem);border-radius:10px;display:grid;gap:.9rem;box-shadow:10px 10px 0 var(--mustard)}
.form label{display:grid;gap:.3rem;font-size:13.5px;font-weight:600}
.form input,.form textarea{width:100%;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:6px;background:#fffaf0;font:inherit;font-size:16px;font-weight:400;color:var(--ink)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(31,77,58,.18)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.hp{position:absolute;left:-9999px}
.small{margin:0;font-size:13px;color:var(--muted)}

.foot{padding:2rem 0;font-size:14px;color:var(--muted)}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.foot-logo{margin:0;font-size:1.25rem;color:var(--ink)}
.foot-logo .logo-mark{width:22px;height:22px}

/* simple pages (privacy, thanks) */
.page{padding:clamp(3rem,7vw,5rem) 0}
.page .wrap{max-width:760px}
.page h1{font-size:clamp(2.6rem,6vw,4rem);margin-bottom:1rem}
.page h2{font-size:1.8rem;margin:2.2rem 0 .6rem}
.page p,.page li{color:var(--muted)}

@media (max-width:920px){
  .nav{display:none}
  .hero-row,.burned-row,.local-row,.faq-wrap,.contact-row{grid-template-columns:1fr}
  .post{height:330px;transform:scale(.85);margin-top:-1rem}
  .steps{grid-template-columns:1fr 1fr}
  .features,.examples{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .steps,.features,.examples,.two{grid-template-columns:1fr}
  .cta-row .btn{width:100%}
  .post{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}