/* ============ self-hosted fonts ============
   Self-hosted deliberately: a render-blocking third-party stylesheet is a single point
   of failure for first paint. Measured — with the Google Fonts <link>, Lighthouse could
   not record any paint at all (NO_FCP, 4 runs). Local files removed that entirely. */
@font-face{font-family:"Baloo 2";src:url(/fonts/baloo-2-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* one variable file covers 400-700: 30KB, vs 91KB for the three static weights */
@font-face{font-family:"Nunito Sans";src:url(/fonts/nunito-sans-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

/* ============ tokens ============
   The design system IS his badge, taken apart: a soft peach circle, a heavy black
   keyline, flat un-blurred fills, no gradient. So every card, button and badge here is
   a rounded shape with an ink keyline and a flat ink offset shadow. Orange becomes a
   fill INSIDE those keylines instead of a full-bleed flood, which is both the
   brand-true reading and the fix for the contrast failures on his current site.
   Palette sampled from his own logo file; every ratio below computed, not assumed.

   REJECTED PAIRS — do not reintroduce:
     peach offset shadow on cream   1.16:1  invisible, use --ink
     --orange as body text on cream 3.42:1  fails AA, use --burnt
     --orange focus ring on --ink   2.96:1  fails, use --peach on dark surfaces */
:root{
  --cream:#FFF7EE;        /* dominant surface */
  --paper:#FFFFFF;        /* card + lift-band fill */
  --peach:#FFE3CC;        /* accent surface, and the focus ring on dark */
  --badge-peach:#F8A870;  /* the badge circle's own colour — ink text only, 8.65:1 */
  --orange:#F26722;       /* his real brand orange. Interactive fills only, ink label 5.38:1 */
  --orange-hi:#FF7A3C;   /* hover brightens: ink label 6.47:1. A darker hover measured 4.41:1 and failed */
  --burnt:#A8390B;        /* the only orange allowed as text/line art on light, 6.08:1 */
  --ink:#2A1A0C;          /* one ink: text, every keyline, every offset shadow, dark band */
  --ink-soft:#6E5240;     /* secondary text on light, 6.72:1 on cream */
  --sand:#E8D3C2;         /* secondary text on the dark band, 11.61:1 */
  --key:3px;              /* keyline weight */
  --shadow:5px 5px 0 var(--ink);      /* flat, un-blurred — the badge has no soft shadow */
  --shadow-lift:8px 8px 0 var(--ink);
  --r:18px;
  --r-lg:26px;
  --wrap:1180px;
  --display:"Baloo 2",system-ui,sans-serif;
  --body:"Nunito Sans",system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* anchors must not land under the sticky header, and focus must not land under the mobile bar */
html{scroll-padding-top:7rem}
@media(max-width:899px){html{scroll-padding-top:5.5rem;scroll-padding-bottom:6rem}}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:clamp(1rem,.97rem + .18vw,1.09rem);line-height:1.65;
  overflow-x:hidden;
}
/* never split a word mid-character — the exact defect on the current site */
h1,h2,h3,h4,.plan h3,.chip,.btn{overflow-wrap:normal;word-break:normal;hyphens:none}
h1,h2,h3,h4{font-family:var(--display);line-height:1.05;margin:0;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(1.75rem,1.25rem + 2.2vw,2.9rem)}
h2 + p,h2 + .lede,h2 + .comm-list,h3 + p{margin-top:1.05rem}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem)}
p{margin:0 0 1rem}
a{color:var(--burnt);text-decoration-thickness:2px;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
/* smooth scroll only for wayfinding in the desktop nav — a CTA tap should land instantly */
@media(min-width:900px){html:has(nav.main a:active){scroll-behavior:smooth}}
section{padding-block:clamp(3rem,7vw,5.5rem)}
.eyebrow{font-family:var(--body);font-weight:700;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--burnt);margin:0 0 .85rem}
.lede{font-size:clamp(1.05rem,1rem + .35vw,1.22rem);color:var(--ink-soft);max-width:62ch}
.center{text-align:center;margin-inline:auto}
:where(a,button,summary,input):focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
/* details has overflow:hidden, which would clip an outset ring — draw this one inset */
summary:focus-visible{outline-offset:-4px}
/* on ink surfaces an ink ring is invisible (2.96:1) — peach measures 13.67:1 */
.proof :where(a,button):focus-visible,.gate :where(a,button):focus-visible,
footer :where(a,button):focus-visible{outline-color:var(--peach)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--paper);padding:.7rem 1rem;border-radius:10px;box-shadow:var(--shadow)}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-size:1.02rem;line-height:1;
  padding:1rem 1.55rem;border-radius:999px;border:var(--key) solid var(--ink);
  text-decoration:none;cursor:pointer;
  transition:transform .14s ease,background-color .14s ease,box-shadow .14s ease;
}
/* ink label on his real orange = 5.38:1. White-on-orange would have failed. */
.btn-primary{background:var(--orange);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-primary:hover{background:var(--orange-hi);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-ghost{background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-ghost:hover{background:var(--peach);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-onDark{background:var(--badge-peach);color:var(--ink);border-color:var(--badge-peach)}
.btn-onDark:hover{background:var(--peach);border-color:var(--peach);transform:translate(2px,2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* ============ header ============ */
header{
  position:sticky;top:0;z-index:40;background:rgba(255,247,238,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ink);
}
.bar{display:flex;align-items:center;gap:1.2rem;padding-block:.7rem}
.logo{flex:0 0 auto}
.logo img{width:clamp(150px,17vw,215px)}
nav.main{margin-left:auto;display:none;gap:1.5rem}
nav.main a{font-weight:700;font-size:.95rem;color:var(--ink);text-decoration:none}
nav.main a:hover{color:var(--orange);text-decoration:underline}
.head-cta{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.head-tel{
  display:none;font-family:var(--display);font-size:1.15rem;color:var(--ink);text-decoration:none;
  padding:.4rem .6rem;border-radius:10px;
}
.head-tel:hover{color:var(--orange)}
.head-cta .btn{padding:.8rem 1.15rem;font-size:.95rem}
@media(min-width:900px){nav.main{display:flex}.head-cta{margin-left:1.5rem}.head-tel{display:inline-block}}
.head-sms{font-size:1rem}
/* keep exactly one set of CTAs on screen at a time on phones */
@media(max-width:899px){.head-quote{display:none}}

/* ============ hero ============ */
.hero{padding-block:clamp(2rem,5vw,4rem) clamp(2.5rem,6vw,4.5rem);position:relative}
.hero-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media(min-width:920px){.hero-grid{grid-template-columns:1.05fr .95fr}}
h1{font-size:clamp(2.15rem,1.5rem + 2.9vw,3.45rem)}
h1 .accent{color:var(--burnt)}
.rating{
  display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  background:var(--paper);border:var(--key) solid var(--ink);border-radius:999px;
  padding:.5rem 1rem;margin-bottom:1.4rem;box-shadow:var(--shadow);
  font-size:.93rem;font-weight:600;
}
.stars{color:var(--burnt);letter-spacing:.06em;font-size:1.05rem}
.rating b{font-family:var(--display);font-size:1.1rem}
.hero p.lede{margin-block:1.1rem 1.4rem}
.pricenote{
  display:inline-block;background:var(--peach);border-radius:14px;
  padding:.7rem 1.05rem;font-weight:600;font-size:.97rem;margin-bottom:1.5rem;
}
.pricenote b{font-family:var(--display)}
.hero-micro{font-size:.92rem;color:var(--ink-soft);margin-top:1.1rem}
.hero-art{position:relative}
.hero-art img{
  border-radius:var(--r-lg);border:var(--key) solid var(--ink);box-shadow:var(--shadow-lift);
  aspect-ratio:16/11;object-fit:cover;object-position:50% 42%;
}
.hero-tag{
  position:absolute;bottom:-14px;left:-6px;background:var(--ink);color:var(--cream);
  font-family:var(--display);font-size:.95rem;padding:.65rem 1.05rem;border-radius:999px;
  box-shadow:var(--shadow-lift);
}
@media(max-width:560px){.hero-tag{position:static;display:inline-block;margin-top:1rem}}

/* ============ proof chips ============ */
.proof{background:var(--ink);color:var(--cream);padding-block:clamp(1.6rem,3vw,2.2rem)}
.proof ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem 2rem;grid-template-columns:1fr}
@media(min-width:640px){.proof ul{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.proof ul{grid-template-columns:repeat(4,1fr)}}
.proof li{display:flex;gap:.7rem;align-items:flex-start;font-weight:600;font-size:.98rem;line-height:1.4}
.proof .tick{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--badge-peach);color:var(--ink);display:grid;place-items:center;font-size:.8rem;font-weight:800;margin-top:1px}

/* ============ steps ============ */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,3vw,2.2rem);margin-top:2.5rem;grid-template-columns:1fr}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--paper);border:var(--key) solid var(--ink);border-radius:var(--r);padding:1.6rem 1.5rem;box-shadow:var(--shadow)}
.step .num{
  font-family:var(--display);font-size:1.15rem;width:44px;height:44px;border-radius:50%;
  background:var(--badge-peach);color:var(--ink);border:2px solid var(--ink);display:grid;place-items:center;margin-bottom:1rem;
}
.step h3{margin-bottom:.5rem}
.step p{margin:0;color:var(--ink-soft);font-size:.98rem}

/* ============ plans ============ */
.plans{display:grid;gap:1.2rem;margin-top:2.5rem;grid-template-columns:1fr}
@media(min-width:620px){.plans{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.plans{grid-template-columns:repeat(4,1fr)}}
.plan{
  background:var(--paper);border:var(--key) solid var(--ink);border-radius:var(--r);
  padding:1.5rem 1.35rem;display:flex;flex-direction:column;gap:.6rem;
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--burnt)}
.plan.featured{border-color:var(--orange);position:relative}
/* real element, not CSS content: a user-visible claim must live in the HTML where the
   copy deck can audit it (and CSS-injected text is invisible to some assistive tech) */
.plan-flag{
  position:absolute;top:-15px;left:1rem;
  background:var(--orange);color:var(--ink);border:2px solid var(--ink);
  font-family:var(--display);font-size:.74rem;padding:.28rem .7rem;border-radius:999px;
}
.plan .freq{font-size:.84rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--burnt)}
.plan p{font-size:.95rem;color:var(--ink-soft);margin:0;flex:1}
.plan .btn{margin-top:.7rem;width:100%;padding:.85rem 1rem;font-size:.95rem}
.plans-note{margin-top:1.6rem;font-size:.96rem;color:var(--ink-soft);max-width:72ch}
.plans-note b{color:var(--ink)}

/* ============ gate promise (dark anchor) ============ */
.gate{background:var(--ink);color:#fff}
.gate h2{color:var(--cream)}
.gate .eyebrow{color:var(--peach)}
.gate-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media(min-width:880px){.gate-grid{grid-template-columns:1.1fr .9fr}}
.gate p{color:var(--sand);max-width:58ch}
.gate-photo{border-radius:var(--r-lg);border:var(--key) solid var(--badge-peach);aspect-ratio:4/3;object-fit:cover}
.photo-note{
  margin-top:.9rem;font-size:.82rem;color:var(--peach);background:rgba(248,168,112,.16);
  border:1px dashed rgba(248,168,112,.55);border-radius:12px;padding:.6rem .8rem;
}

/* ============ owner ============ */
.owner-grid{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center}
@media(min-width:800px){.owner-grid{grid-template-columns:.8fr 1.2fr}}
.owner-photo{border-radius:var(--r-lg);border:var(--key) solid var(--ink);box-shadow:var(--shadow-lift);aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.sig{font-family:var(--display);font-size:1.1rem;color:var(--burnt);margin-top:.3rem}

/* ============ reviews ============ */
.reviews{background:var(--peach)}
.rev-grid{display:grid;gap:1.2rem;margin-top:2.4rem;grid-template-columns:1fr}
@media(min-width:760px){.rev-grid{grid-template-columns:repeat(3,1fr)}}
.rev{background:var(--paper);border:var(--key) solid var(--ink);border-radius:var(--r);padding:1.5rem 1.4rem;box-shadow:var(--shadow);display:flex;flex-direction:column}
.rev .stars{font-size:1rem;margin-bottom:.7rem}
.rev blockquote{margin:0 0 1.1rem;font-size:.98rem;line-height:1.6;flex:1}
.rev cite{font-style:normal;font-weight:700;font-size:.95rem}
.rev .town{display:block;font-weight:400;font-size:.87rem;color:var(--ink-soft);margin-top:.15rem}
.rev-src{margin-top:1.8rem;font-size:.92rem;color:var(--ink-soft)}

/* ============ towns ============ */
.towns{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.8rem;padding:0;list-style:none}
.towns li{
  background:var(--paper);border:var(--key) solid var(--ink);border-radius:999px;
  padding:.55rem 1.05rem;font-weight:600;font-size:.95rem;
}

/* ============ service area + map ============ */
.area-grid{display:grid;gap:clamp(2rem,4vw,3rem);align-items:start}
@media(min-width:900px){.area-grid{grid-template-columns:1.05fr .95fr}}
.map-frame{
  border:var(--key) solid var(--ink);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-lift);aspect-ratio:4/3;background:var(--peach);
}
.map-frame iframe{width:100%;height:100%;border:0;display:block}
.map-note{margin-top:.85rem;font-size:.88rem;color:var(--ink-soft);max-width:46ch}

/* ============ commercial ============ */
.commercial{background:var(--peach)}
.comm-grid{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center}
@media(min-width:880px){.comm-grid{grid-template-columns:1.05fr .95fr}}
.comm-list{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:grid;gap:.6rem}
.comm-list li{display:flex;gap:.6rem;font-weight:600;font-size:.98rem}
.comm-list .tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--burnt);color:var(--cream);display:grid;place-items:center;font-size:.72rem;font-weight:800;margin-top:2px}
.comm-photo{border-radius:var(--r-lg);border:var(--key) solid var(--ink);box-shadow:var(--shadow-lift);aspect-ratio:4/3;object-fit:cover}

/* ============ form ============ */
.quote{background:var(--paper)}
.form-shell{
  /* Jobber renders its form at a modest natural width, so a full-bleed frame reads as a
     giant empty box. Constrain and centre it instead. */
  margin:2rem auto 0;max-width:980px;background:var(--cream);border:var(--key) solid var(--ink);
  border-radius:var(--r-lg);padding:clamp(.6rem,2vw,1.4rem);box-shadow:var(--shadow);
}
.form-shell iframe{width:100%;min-height:900px;border:0;border-radius:var(--r);background:var(--paper)}
.or-text{margin-top:1.4rem;font-weight:600}

/* ============ faq ============ */
.faq-list{margin-top:2.2rem;display:grid;gap:.8rem}
details{background:var(--paper);border:var(--key) solid var(--ink);border-radius:var(--r);overflow:hidden}
details[open]{border-color:var(--burnt)}
summary{
  cursor:pointer;list-style:none;padding:1.15rem 1.4rem;font-family:var(--display);
  font-size:1.05rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;color:var(--orange);flex:0 0 auto;line-height:1}
details[open] summary::after{content:"–"}
details .ans{padding:0 1.4rem 1.3rem;color:var(--ink-soft);font-size:.98rem;margin:0}

/* ============ footer ============ */
footer{background:var(--ink);color:var(--sand);padding-block:clamp(2.5rem,5vw,3.5rem) 6.5rem}
footer a{color:var(--peach)}
.foot-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.2fr .9fr .9fr}}
footer h3{font-size:1.05rem;color:var(--cream);margin-bottom:.8rem}
footer img.flogo{width:190px;margin-bottom:1rem}
.foot-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;font-size:.96rem}
.foot-note{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(232,211,194,.22);font-size:.85rem;color:#C9B6A6}
.demo-flag{background:rgba(248,168,112,.16);border:1px dashed rgba(248,168,112,.5);border-radius:12px;padding:.85rem 1rem;margin-top:1.2rem;font-size:.85rem;color:var(--peach)}

/* ============ mobile sticky bar ============ */
.mobile-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;gap:.5rem;
  padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom,0px));
  padding-left:calc(.7rem + env(safe-area-inset-left,0px));
  padding-right:calc(.7rem + env(safe-area-inset-right,0px));
  background:rgba(255,247,238,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--ink);box-shadow:0 -6px 20px rgba(42,26,12,.16);
  transition:transform .28s ease;
}
.mobile-bar .btn{flex:1;padding:.85rem .5rem;font-size:.92rem;box-shadow:none}
/* JS hides it until you scroll past the hero, so first paint isn't three stacked CTAs.
   No JS → no class → the bar simply stays visible and functional. */
.mobile-bar.tucked{transform:translateY(115%)}
@media(min-width:900px){.mobile-bar{display:none}footer{padding-bottom:clamp(2.5rem,5vw,3.5rem)}}

/* ============ motion — opt-IN, and hidden is the EXPLICIT state ============
   Visible is the default in CSS. JS must actively add .pre to hide something, and
   removing .pre is what reveals it. So every failure mode (no JS, error mid-script,
   reduced motion, a missed scroll event) fails to VISIBLE, never to invisible. */
html.anim .reveal.pre,html.anim .reveal.was-pre{transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
html.anim .reveal.pre{opacity:0;transform:translateY(14px)}
@media(prefers-reduced-motion:reduce){
  html.anim .reveal.pre{opacity:1;transform:none}
  .reveal{transition:none}
  html{scroll-behavior:auto}
  .btn,.plan{transition:none}
}