html{color-scheme:light only}
:root{
  color-scheme:light only;
  --ink:#161B17;
  --ink-soft:#4A544C;
  --forest:#1B3A29;
  --forest-lift:#2E5C40;
  --sand:#D9A441;
  --sand-deep:#A97B23;
  --paper:#FAF7F0;
  --paper-warm:#F2EDE1;
  --line:#DCD5C4;
  --white:#fff;
  --radius:14px;
  --radius-sm:9px;
  --wrap:1120px;
  --font:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font);font-weight:700;line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,7.2vw,4rem)}
h2{font-size:clamp(1.65rem,5vw,2.6rem)}
h3{font-size:clamp(1.15rem,3vw,1.4rem);letter-spacing:-.01em}
p{margin:0 0 1.1em;max-width:66ch}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
section{padding-block:clamp(52px,9vw,104px)}
.lede{font-size:clamp(1.05rem,2.6vw,1.24rem);color:var(--ink-soft);line-height:1.6}

/* focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--sand);outline-offset:3px;border-radius:4px;
}
.skip{position:absolute;left:-999px;top:0;background:var(--forest);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.94);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:66px}
.hdr-left{display:flex;align-items:center;gap:4px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font);font-weight:700;font-size:1.08rem;letter-spacing:-.02em;color:var(--forest)}
.brand svg{width:30px;height:30px;flex:none}
.brand span small{display:block;font-family:var(--body);font-weight:400;font-size:.66rem;letter-spacing:.01em;color:var(--ink-soft);line-height:1.2}
.nav{display:none;gap:26px;align-items:center}
.nav a{text-decoration:none;font-size:.94rem;color:var(--ink-soft);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--forest);border-bottom-color:var(--sand)}
@media(min-width:900px){.nav{display:flex}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  padding:15px 26px;min-height:52px;border-radius:var(--radius-sm);
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn-main{background:var(--forest);color:#fff}
.btn-main:hover{background:var(--forest-lift)}
.btn-sand{background:var(--sand);color:#2A1F06}
.btn-sand:hover{background:#EBB861}
.btn-line{background:transparent;color:var(--forest);border-color:var(--forest)}
.btn-line:hover{background:var(--forest);color:#fff}
.btn-sm{padding:11px 19px;min-height:44px;font-size:.93rem}
.btn-wide{width:100%}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--forest);color:#F0EFE7;padding-block:clamp(46px,8vw,86px) 0;overflow:hidden}
.hero h1{color:#fff;max-width:15ch}
.hero .lede{color:#C9D6CB;max-width:52ch;font-size:clamp(1.06rem,2.7vw,1.28rem)}
.hero-price{display:inline-flex;align-items:baseline;gap:9px;background:rgba(217,164,65,.14);border:1px solid rgba(217,164,65,.4);color:#F0D9A5;padding:8px 15px;border-radius:100px;font-size:.92rem;margin-bottom:22px}
.hero-price b{font-family:var(--font);font-size:1.05rem;color:var(--sand)}
.hero-cta{display:flex;flex-direction:column;gap:11px;margin-top:28px}
@media(min-width:560px){.hero-cta{flex-direction:row;flex-wrap:wrap}}
.hero-trust{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:11px}
@media(min-width:700px){.hero-trust{grid-template-columns:1fr 1fr}}
.hero-trust li{display:flex;gap:10px;align-items:flex-start;font-size:.97rem;color:#CBDACD}
.hero-trust svg{flex:none;width:19px;height:19px;margin-top:3px;color:var(--sand)}
.ridge{display:block;width:100%;height:clamp(78px,13vw,112px);margin-top:clamp(34px,6vw,58px)}
.ridge path{vector-effect:non-scaling-stroke}
.ridge-flip{transform:scaleY(-1);margin:0 0 clamp(34px,6vw,58px)}

/* ---------- generic blocks ---------- */
.head-block{max-width:62ch;margin-bottom:clamp(30px,4.5vw,50px)}
.grid{display:grid;gap:18px}
@media(min-width:720px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.g3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.tint{background:var(--paper-warm)}
.dark{background:var(--forest);color:#E9EFE9}
.dark h2,.dark h3{color:#fff}
.dark p{color:#C4D3C6}

/* why us */
.why{display:grid;gap:26px}
@media(min-width:720px){.why{grid-template-columns:1fr 1fr;gap:30px 40px}}
.why-item h3{margin-bottom:.35em;display:flex;align-items:center;gap:10px}
.why-item h3 svg{width:22px;height:22px;flex:none;color:var(--sand-deep)}
.why-item p{margin:0;font-size:.99rem;color:var(--ink-soft)}

/* steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:16px}
@media(min-width:800px){.steps{grid-template-columns:repeat(2,1fr)}}
.steps li{counter-increment:s;position:relative;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--sand);border-radius:var(--radius-sm);padding:20px 22px 20px 62px}
.steps li::before{
  content:counter(s);position:absolute;left:20px;top:20px;
  font-family:var(--font);font-weight:700;font-size:1.15rem;color:var(--sand-deep);
}
.steps h3{font-size:1.08rem;margin-bottom:.3em}
.steps p{margin:0;font-size:.96rem;color:var(--ink-soft)}

/* trust bar */
.trust-bar .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center}
.trust-bar li{display:flex;align-items:center;gap:8px;list-style:none;font-size:.92rem;font-weight:600;color:var(--forest)}
.trust-bar svg{flex:none;width:17px;height:17px;color:var(--sand-deep)}

/* includes checklist */
.includes{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:720px){.includes{grid-template-columns:1fr 1fr}}
.includes li{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;font-size:.97rem}
.includes svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--forest-lift)}

/* single-tier pricing block */
.price-block{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(28px,4vw,42px);max-width:560px}
.price-block .cost{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;font-family:var(--font)}
.price-block .cost b{font-size:3.2rem;font-weight:700;letter-spacing:-.03em;color:var(--forest)}
.price-block .cost span{font-size:1.02rem;color:var(--ink-soft);font-family:var(--body)}
.price-block .no-fee{font-size:.92rem;color:var(--sand-deep);font-weight:600;margin:0 0 22px}
.price-block .feats{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.price-block .feats li{display:flex;gap:10px;font-size:.97rem;line-height:1.5;color:var(--ink)}
.price-block .feats svg{flex:none;width:18px;height:18px;margin-top:4px;color:var(--forest-lift)}

/* add-ons list, brief */
.addon-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.addon-list li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);padding:15px 18px;font-size:.95rem}
.addon-list .an{color:var(--ink)}
.addon-list .ap{color:var(--sand-deep);font-weight:700;font-family:var(--font);white-space:nowrap;font-size:.9rem}

/* portfolio grid */
.portfolio-grid{display:grid;gap:22px}
@media(min-width:720px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
.portfolio-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;display:block;color:inherit}
.portfolio-card:hover{border-color:var(--forest)}
.portfolio-shot{aspect-ratio:16/10;background:var(--paper-warm);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.portfolio-body{padding:20px 22px}
.portfolio-body p{margin:0;font-size:.93rem;color:var(--ink-soft)}
.portfolio-body h3{margin-bottom:.25em}
.portfolio-tag{display:inline-block;font-size:.82rem;font-weight:700;color:var(--sand-deep);margin-bottom:8px}

/* example + testimonial on homepage */
.example-wrap{display:grid;gap:26px;align-items:center}
@media(min-width:860px){.example-wrap{grid-template-columns:1.1fr 1fr;gap:44px}}
.example-shot{background:var(--paper-warm);border:1px solid var(--line);border-radius:var(--radius);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.testimonial{border-left:4px solid var(--sand);padding-left:20px}
.testimonial p{font-size:1.08rem;font-style:italic;color:var(--ink)}
.testimonial cite{display:block;font-style:normal;font-weight:700;color:var(--forest);font-size:.95rem;margin-top:6px}
.testimonial cite span{display:block;font-weight:400;color:var(--ink-soft);font-size:.88rem;margin-top:2px}

/* small teaser blocks that link out to a full page */
.teaser{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,4vw,40px);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.teaser-copy{flex:1;min-width:240px}
.teaser-copy h2{margin-bottom:.3em}
.teaser-copy p{margin:0;color:var(--ink-soft)}

/* blog */
.post{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;text-decoration:none;display:block;transition:border-color .15s ease}
.post:hover{border-color:var(--forest)}
.post-meta{font-size:.83rem;color:var(--sand-deep);margin:0 0 8px;font-weight:600}
.post h3{font-size:1.09rem;margin-bottom:.35em}
.post p{margin:0;font-size:.93rem;color:var(--ink-soft)}

/* faq */
.faq{max-width:800px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative;
  font-family:var(--font);font-weight:700;font-size:1.03rem;line-height:1.35;min-height:56px;display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--sand-deep);border-bottom:2.5px solid var(--sand-deep);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq div.a{padding:0 0 20px;color:var(--ink-soft);font-size:.98rem}
.faq div.a p:last-child{margin-bottom:0}

/* form */
.form-grid{display:grid;gap:26px}
@media(min-width:900px){.form-grid{grid-template-columns:1fr 1.15fr;gap:44px}}
label{display:block;font-weight:600;font-size:.93rem;margin-bottom:6px}
input,select,textarea{
  width:100%;font:inherit;font-size:16px;padding:13px 14px;min-height:52px;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--white);color:var(--ink);
}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--forest)}
.field{margin-bottom:16px}
.hint{font-size:.86rem;color:var(--ink-soft);margin:7px 0 0}
.form-side p{font-size:.97rem}
.form-side ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px}
.form-side li{display:flex;gap:10px;font-size:.96rem;color:var(--ink-soft)}
.form-side svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--sand-deep)}
.wa{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:600;color:var(--forest);font-size:.97rem;padding:13px 0;min-height:50px;border-bottom:1px solid var(--line)}
.wa:last-of-type{border-bottom:0}
.wa svg{flex:none}

/* footer */
footer{background:var(--forest);color:#B6C7B9;padding-block:46px 110px;font-size:.93rem}
@media(min-width:880px){footer{padding-bottom:46px}}
footer a{color:#DCE6DD}
.f-grid{display:grid;gap:28px;margin-bottom:30px}
@media(min-width:700px){.f-grid{grid-template-columns:1.4fr 1fr 1fr}}
.f-grid h4{font-family:var(--font);color:#fff;font-size:.98rem;margin:0 0 12px}
.f-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.f-grid a{text-decoration:none}
.f-grid a:hover{text-decoration:underline}
.f-base{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;font-size:.86rem;color:#93A695}

/* sticky mobile bar */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(250,247,240,.97);backdrop-filter:blur(9px);
  border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;gap:10px;align-items:center;
}
.bar p{margin:0;font-size:.84rem;line-height:1.3;color:var(--ink-soft);flex:1}
.bar p b{display:block;font-family:var(--font);color:var(--forest);font-size:.98rem}
@media(min-width:880px){.bar{display:none}}

/* Some mobile browsers force a dark theme on light sites. Hold the palette. */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#161B17;--ink-soft:#4A544C;--paper:#FAF7F0;--paper-warm:#F2EDE1;
    --line:#DCD5C4;--white:#fff;
  }
  body{background:var(--paper);color:var(--ink)}
  .card,.plan,.addon,.case,.post,.steps li{background:var(--white)}
  input,select,textarea{background:var(--white);color:var(--ink)}
  .hdr{background:rgba(250,247,240,.94)}
  .bar{background:rgba(250,247,240,.97)}
  .tint{background:var(--paper-warm)}
  .stats{background:var(--paper-warm)}
}

/* ---------- long-form pages (legal, area) ---------- */
.prose{max-width:74ch}
.prose h2{margin-top:2.2em;font-size:clamp(1.35rem,3.6vw,1.85rem)}
.prose h2:first-of-type{margin-top:0}
.prose h3{margin-top:1.7em;font-size:1.08rem}
.prose ul,.prose ol{padding-left:20px;margin:0 0 1.1em;max-width:70ch}
.prose li{margin-bottom:.5em}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.94rem}
.prose th,.prose td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:700;background:var(--paper-warm)}
.updated{font-size:.9rem;color:var(--ink-soft);border-left:3px solid var(--sand);padding-left:14px;margin-bottom:2.2em}
.page-head{background:var(--forest);color:#fff;padding-block:clamp(40px,7vw,66px) clamp(30px,5vw,48px)}
.page-head h1{font-size:clamp(1.85rem,5.6vw,3rem);max-width:18ch}
.page-head p{color:#C4D3C6;max-width:56ch;margin-bottom:0}
.crumb{font-size:.9rem;color:#9FB2A2;margin-bottom:14px}
.crumb a{color:#C9D6CB}
.callout{background:var(--paper-warm);border:1px solid var(--line);border-left:4px solid var(--sand);border-radius:var(--radius-sm);padding:20px 22px;margin:0 0 1.6em}
.callout p:last-child{margin-bottom:0}

/* ---------- blog listing + posts ---------- */
.blog-grid{display:grid;gap:18px}
@media(min-width:720px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-decoration:none;display:flex;flex-direction:column;height:100%}
.blog-card:hover{border-color:var(--forest)}
.blog-card .cat{font-size:.83rem;color:var(--sand-deep);font-weight:700;margin:0 0 8px}
.blog-card h3{font-size:1.12rem;margin-bottom:.4em}
.blog-card p{margin:0 0 14px;font-size:.95rem;color:var(--ink-soft);flex:1}
.blog-card .rm{font-size:.88rem;font-weight:700;color:var(--forest)}
.post-body{max-width:70ch}
.post-body h2{margin-top:1.8em}
.post-hero{background:var(--forest);color:#fff;padding-block:clamp(38px,6vw,60px) clamp(26px,4vw,40px)}
.post-hero .cat{color:var(--sand);font-weight:700;font-size:.88rem;margin-bottom:10px}
.post-hero h1{max-width:22ch}
.post-meta-row{color:#B9C9BB;font-size:.92rem;margin-top:14px}

/* ---------- cookie consent banner ---------- */
.cookie-bar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:560px;margin-inline:auto;
  background:var(--forest);color:#E9EFE9;border-radius:var(--radius);
  padding:20px 22px;box-shadow:0 16px 40px rgba(0,0,0,.25);
  display:none;
}
.cookie-bar.show{display:block}
.cookie-bar p{margin:0 0 14px;font-size:.9rem;color:#C4D3C6}
.cookie-bar a{color:#fff;text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions .btn{flex:1;min-width:120px}

/* ---------- client acceptance page (private, unlisted) ---------- */
.accept-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,4vw,40px);max-width:560px}
.accept-terms{background:var(--paper-warm);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;max-height:220px;overflow-y:auto;font-size:.88rem;color:var(--ink-soft);margin:18px 0}
.tick-row{display:flex;align-items:flex-start;gap:11px;margin:18px 0 22px}
.tick-row input[type="checkbox"]{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:var(--forest)}
.tick-row label{font-weight:400;font-size:.94rem;margin:0}

/* template marker banner, visible only when the template file is opened directly */
.tpl-note{background:#3a2a06;color:#F0D9A5;border:1px dashed #D9A441;border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:26px;font-size:.92rem}
.tpl-note code{background:rgba(0,0,0,.25);padding:2px 6px;border-radius:4px}

/* ---------- offer / ad landing pages ---------- */
.offer-hdr{border-bottom:1px solid var(--line);padding-block:16px}
.offer-hdr .wrap{display:flex;align-items:center;justify-content:center}
.offer-brand{font-family:var(--font);font-weight:700;font-size:1.05rem;color:var(--forest);letter-spacing:-.02em}
.offer-brand small{display:block;font-family:var(--body);font-weight:400;font-size:.66rem;color:var(--ink-soft);text-align:center}
.reply-promise{
  display:flex;align-items:center;gap:10px;justify-content:center;
  background:var(--paper-warm);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 18px;margin:0 0 18px;font-weight:700;color:var(--forest);font-size:1rem;text-align:center;
}
.reply-promise svg{flex:none;width:20px;height:20px;color:var(--sand-deep)}
.shots-pair{display:grid;gap:16px}
@media(min-width:600px){.shots-pair{grid-template-columns:1fr 1fr}}
.shots-pair .portfolio-card{cursor:default}

/* ---------- mobile hamburger menu ---------- */
.menu-btn{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;padding:0;border:0;background:transparent;cursor:pointer;flex:none;margin-right:2px}
.menu-btn span{display:block;width:21px;height:2.5px;border-radius:2px;background:var(--forest)}
@media(min-width:900px){.menu-btn{display:none}}

.mobile-nav-overlay{position:fixed;inset:0;background:rgba(22,27,23,.5);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s ease}
.mobile-nav-overlay.show{opacity:1;pointer-events:auto}

.mobile-nav{
  position:fixed;top:0;left:0;bottom:0;width:82%;max-width:320px;z-index:95;
  background:var(--paper);box-shadow:10px 0 34px rgba(0,0,0,.18);
  transform:translateX(-100%);transition:transform .25s ease;
  display:flex;flex-direction:column;
  padding:18px 22px calc(20px + env(safe-area-inset-bottom));
}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav-top{display:flex;align-items:center;justify-content:flex-end;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mobile-nav-brand{font-family:var(--font);font-weight:700;color:var(--forest);font-size:1rem;letter-spacing:-.02em}
.mobile-nav-close{background:transparent;border:0;font-size:1.7rem;line-height:1;color:var(--ink-soft);cursor:pointer;padding:2px 6px}
.mobile-nav-links{list-style:none;margin:0;padding:0;display:grid}
.mobile-nav-links a{display:block;padding:15px 2px;font-family:var(--font);font-weight:600;font-size:1.08rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-nav-cta{margin-top:auto;padding-top:22px}
body.nav-open{overflow:hidden}
@media(min-width:900px){.mobile-nav,.mobile-nav-overlay{display:none}}

/* ---------- hotlink (deliberately classic blue, underlined) ---------- */
.hotlink{color:#1550C9;text-decoration:underline;font-weight:600}
.hotlink:hover{color:#0D3A94}

/* real screenshots filling the shot boxes */
.example-shot img,.portfolio-shot img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}