/* ============================================================
   ANNIKA DETAILING — single-file site
   Palette: warm birch paper, warm ink, lake blue (CTAs only),
   rust (hand-drawn marks only), pine + sand + sun (illustration).
   Type: Bricolage Grotesque (display) / Atkinson Hyperlegible (body)
         / Caveat (handwritten annotations).
   ============================================================ */
:root{
  --paper:#FAF6ED;
  --paper2:#F1E9D9;
  --paper3:#E9DFC9;
  --ink:#221A12;
  --ink2:#5C4F40;
  --line:#D8CCB4;
  --lake:#135F7C;
  --lake-deep:#0E4A61;
  --lake-tint:#C4DCE2;
  --rust:#AE5127;
  --rust-deep:#8F3F1B;
  --pine:#47664B;
  --sand:#E7D5AB;
  --sun:#E3B14C;
  --night:#201810;
  --night2:#2B2115;
  --cream-on-night:#F6EEDD;
  --disp:"Bricolage Grotesque","Trebuchet MS",Verdana,sans-serif;
  --body:"Atkinson Hyperlegible",Verdana,Geneva,sans-serif;
  --hand:"Caveat","Segoe Print","Comic Sans MS",cursive;
  --radius:16px;
  --wrap:1120px;
  --barH:70px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}
body{
  font-family:var(--body);
  background:var(--paper) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/><feColorMatrix values="0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.18 0 0 0 0.028 0"/></filter><rect width="180" height="180" filter="url(%23n)"/></svg>');
  color:var(--ink);
  font-size:16.5px;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--lake)}
a:hover{color:var(--lake-deep)}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}
.nowrap{white-space:nowrap}

h1,h2,h3{font-family:var(--disp);line-height:1.06;text-wrap:balance;letter-spacing:-0.01em}
h1{font-weight:800;font-size:clamp(2.45rem,7.4vw,4.4rem)}
h2{font-weight:750;font-size:clamp(1.75rem,4.4vw,2.7rem)}
h3{font-weight:700;font-size:1.22rem;line-height:1.2}
p{max-width:62ch}
strong{font-weight:700}

.kicker{
  font-family:var(--hand);font-weight:600;color:var(--rust);
  font-size:1.45rem;line-height:1;display:block;margin-bottom:.5rem;
  transform:rotate(-1.2deg);transform-origin:left bottom;
}
.lede{font-size:1.06rem;color:var(--ink2);margin-top:.9rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--disp);font-weight:700;font-size:1.02rem;letter-spacing:.01em;
  min-height:54px;padding:.7rem 1.35rem;border-radius:999px;
  text-decoration:none;border:2px solid transparent;
  transition:transform .12s ease,background .15s ease,color .15s ease,border-color .15s ease;
}
.btn:active{transform:scale(.985)}
.btn svg{flex:0 0 auto}
.btn-call{background:var(--lake);color:#fff;border-color:var(--lake)}
.btn-call:hover{background:var(--lake-deep);border-color:var(--lake-deep);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-night{background:var(--sun);color:var(--night);border-color:var(--sun)}
.btn-night:hover{background:#EFC46A;border-color:#EFC46A;color:var(--night)}
.btn-ghost-night{background:transparent;color:var(--cream-on-night);border-color:var(--cream-on-night)}
.btn-ghost-night:hover{background:var(--cream-on-night);color:var(--night)}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px}
.wordmark{
  font-family:var(--disp);font-weight:750;font-size:1.22rem;letter-spacing:-.015em;
  color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.32rem;
}
.wordmark .spark{color:var(--rust);display:inline-flex}
.hdr-right{display:flex;align-items:center;gap:1rem}
.hdr-tel{
  font-family:var(--disp);font-weight:700;color:var(--ink);text-decoration:none;
  display:none;align-items:center;gap:.45rem;font-size:1.02rem;
}
.hdr-tel:hover{color:var(--lake)}
.hdr .btn{min-height:44px;padding:.45rem 1.1rem;font-size:.95rem}
@media (min-width:820px){ .hdr-tel{display:inline-flex} }

/* ---------- sticky mobile call bar ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.callbar .btn{min-height:52px;font-size:.98rem;padding:.5rem .6rem}
@media (min-width:820px){ .callbar{display:none} }
@media (max-width:819.9px){ body{padding-bottom:calc(var(--barH) + env(safe-area-inset-bottom))} }

/* ---------- hero ---------- */
.hero{min-height:calc(100vh - 56px);min-height:calc(100svh - 56px);display:flex;align-items:center}
@media (max-width:819.9px){
  .hero{min-height:calc(100svh - 56px - var(--barH))}
}
.hero-in{
  display:grid;gap:2rem;align-items:center;width:100%;
  padding:1.6rem 0 2.2rem;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.16em;
  color:var(--ink2);text-transform:uppercase;
}
.eyebrow .spark{color:var(--rust)}
.hero h1{margin:.65rem 0 .9rem;max-width:13ch}
.hero-sub{font-size:1.09rem;color:var(--ink2);max-width:46ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.35rem 0 1rem}
@media (max-width:520px){ .cta-row{flex-direction:column;align-items:stretch} .cta-row .btn{width:100%} }
.promise{
  display:flex;gap:.55rem;align-items:flex-start;
  font-size:.95rem;color:var(--ink2);max-width:46ch;
}
.promise svg{flex:0 0 auto;margin-top:.15rem;color:var(--rust)}
.hero-art{display:none}
@media (min-width:900px){
  .hero-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .hero-art{display:block}
}
@media (max-width:899.9px) and (min-height:790px){
  .hero-art{display:block;max-width:340px;margin:0 auto}
}
.hero-art svg{width:100%;height:auto}

/* ---------- sections ---------- */
.sec{padding:4.2rem 0}
.sec-tight{padding:3.2rem 0}
.sec-alt{background:var(--paper2)}
.sec-head{max-width:640px;margin-bottom:2.2rem}
.squig{display:block;width:min(260px,60%);height:14px;color:var(--line);margin:0 auto}
.squig-wrap{padding:.2rem 0;text-align:center}

/* ---------- how it works ---------- */
.steps{display:grid;gap:1.4rem}
@media (min-width:760px){ .steps{grid-template-columns:repeat(3,1fr);gap:2rem} }
.step{position:relative;padding-left:0}
.step-n{
  font-family:var(--hand);font-weight:700;font-size:2.1rem;color:var(--rust);
  line-height:1;display:inline-block;transform:rotate(-4deg);
}
.step h3{margin:.35rem 0 .45rem}
.step p{font-size:.99rem;color:var(--ink2)}
.step p a{font-weight:700}

/* ---------- packages ---------- */
.cards{display:grid;gap:1.2rem;align-items:stretch}
@media (min-width:900px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{
  position:relative;background:var(--paper);border:2px solid var(--ink);
  border-radius:var(--radius);padding:1.5rem 1.4rem 1.4rem;
  display:flex;flex-direction:column;gap:.85rem;
  box-shadow:4px 4px 0 0 var(--paper3);
}
.sec-alt .card{background:var(--paper)}
.card-kind{
  font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink2);
}
.card h3{font-size:1.5rem}
.price-row{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.price{font-family:var(--disp);font-weight:800;font-size:2rem;letter-spacing:-.02em}
.price .from{font-family:var(--body);font-weight:400;font-size:.85rem;color:var(--ink2);letter-spacing:0;margin-left:.4rem}
.dur{font-size:.9rem;color:var(--ink2)}
.inc{list-style:none;display:flex;flex-direction:column;gap:.44rem;font-size:.96rem}
.inc li{display:flex;gap:.5rem;align-items:flex-start}
.inc svg{flex:0 0 auto;margin-top:.28rem;color:var(--pine)}
.card-note{font-size:.9rem;color:var(--ink2);margin-top:auto;padding-top:.4rem}
.badge{
  position:absolute;top:-16px;right:14px;
  font-family:var(--hand);font-weight:700;font-size:1.18rem;line-height:1;
  color:var(--paper);background:var(--rust);padding:.42rem .8rem .5rem;
  border-radius:999px;transform:rotate(2.5deg);
  box-shadow:2px 2px 0 0 var(--paper3);
}
.card-featured{border-color:var(--rust);box-shadow:5px 5px 0 0 var(--rust)}
.revival{
  margin-top:1.6rem;background:var(--night);color:var(--cream-on-night);
  border-radius:var(--radius);padding:1.7rem 1.5rem;
  display:grid;gap:1.2rem;position:relative;overflow:hidden;
}
@media (min-width:860px){ .revival{grid-template-columns:1.4fr 1fr;align-items:center;padding:2rem 2.2rem} }
.revival h3{font-size:1.5rem;color:var(--cream-on-night)}
.revival .card-kind{color:#B9AB93}
.revival p{color:#CBBFA8;font-size:.98rem}
.revival .price{color:var(--sun);font-size:1.6rem}
.revival-list{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.2rem}
.revival-list li{
  font-size:.86rem;border:1.5px solid #4A3D2B;border-radius:999px;
  padding:.28rem .75rem;color:#D8CDB6;
}
.addons{margin-top:1.6rem}
.addons-title{font-family:var(--disp);font-weight:700;font-size:.98rem;margin-bottom:.6rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{
  font-size:.9rem;background:var(--paper);border:1.5px solid var(--line);
  border-radius:999px;padding:.34rem .85rem;color:var(--ink);
}
.addons p{font-size:.9rem;color:var(--ink2);margin-top:.7rem}
.size-note{font-size:.93rem;color:var(--ink2);max-width:56ch;margin-top:1rem}

/* ---------- before / after ---------- */
.ba-grid{display:grid;gap:2rem;align-items:start}
@media (min-width:960px){ .ba-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem} }
.ba{
  position:relative;border:2px solid var(--ink);border-radius:var(--radius);
  overflow:hidden;background:var(--paper2);
  box-shadow:5px 5px 0 0 var(--paper3);
}
.ba-frame{position:relative;aspect-ratio:4/3;touch-action:pan-y}
.ba-layer{position:absolute;inset:0}
.ba-layer svg,.ba-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-layer img{display:none}
.ba-layer.has-photo img{display:block}
.ba-layer.has-photo svg{display:none}
.ba-after{clip-path:inset(0 0 0 var(--cut,50%))}
.ba-divider{
  position:absolute;top:0;bottom:0;left:var(--cut,50%);width:0;
  border-left:3px solid var(--paper);pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.35));
}
.ba-thumb{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;gap:2px;
  color:var(--ink);pointer-events:none;
}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;
  /* The frame handles pointers itself (see site.js), because a native range
     only follows a touch that lands on its own invisible thumb. This input
     stays for the keyboard and for screen readers, so it must not sit in
     front of the frame and swallow the press. */
  pointer-events:none;
}
.ba-frame{cursor:ew-resize}
.ba-frame:focus-within{outline:3px solid var(--rust);outline-offset:-3px}
.ba-tag{
  position:absolute;top:12px;z-index:3;
  font-family:var(--disp);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  padding:.3rem .7rem;border-radius:999px;pointer-events:none;
}
.ba-tag-before{left:12px;background:var(--ink);color:var(--paper)}
.ba-tag-after{right:12px;background:var(--lake);color:#fff}
.ba-cap{
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:.8rem 1rem;font-size:.88rem;color:var(--ink2);
  border-top:2px solid var(--ink);background:var(--paper);
}
.ba-cap .hint{font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.06em;color:var(--ink2);white-space:nowrap}
.ba .cap-photo{display:none}
.ba.has-photo .cap-photo{display:inline}
.ba.has-photo .cap-illo{display:none}
.ba-note{
  font-family:var(--hand);font-weight:600;font-size:1.3rem;color:var(--rust);
  transform:rotate(-1.4deg);margin-top:1rem;display:inline-block;
}

/* ---------- service area ---------- */
.area-grid{display:grid;gap:2.4rem;align-items:center}
@media (min-width:960px){ .area-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem} }
.map-panel svg{width:100%;height:auto;display:block}
.towns{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 1.2rem}
.towns li{
  font-family:var(--disp);font-weight:600;font-size:.93rem;
  background:var(--paper2);border:1.5px solid var(--line);border-radius:999px;
  padding:.36rem .9rem;
}
.towns li.home{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.outside{
  font-family:var(--hand);font-weight:600;font-size:1.5rem;color:var(--rust);
  transform:rotate(-1deg);display:inline-block;line-height:1.25;max-width:22ch;
}

/* ---------- winter ---------- */
.winter-grid{display:grid;gap:1.4rem;margin-top:.6rem}
@media (min-width:820px){ .winter-grid{grid-template-columns:repeat(3,1fr);gap:2rem} }
.wint{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);padding:1.35rem 1.25rem}
.wint svg{color:var(--lake);margin-bottom:.7rem}
.wint h3{font-size:1.12rem;margin-bottom:.45rem}
.wint p{font-size:.96rem;color:var(--ink2)}

/* ---------- about ---------- */
.about-grid{display:grid;gap:2.5rem;align-items:start}
@media (min-width:900px){ .about-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:4rem} }
.about-copy p{margin-bottom:1.05rem;font-size:1.05rem}
.about-copy p:first-of-type{font-size:1.18rem;font-weight:700;line-height:1.5}
.sig{font-family:var(--hand);font-weight:700;font-size:2rem;color:var(--rust);transform:rotate(-2deg);display:inline-block;margin-top:.3rem}
.portrait{position:relative;max-width:340px;margin:0 auto}
.portrait .slot{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;border-radius:var(--radius)}
.portrait svg{position:absolute;inset:0;width:100%;height:100%}
.portrait.has-photo img{display:block}
.portrait.has-photo svg{display:none}
.portrait figcaption{font-size:.85rem;color:var(--ink2);margin-top:.6rem;text-align:center}

/* ---------- faq ---------- */
.faq{max-width:720px}
.faq details{border-bottom:1.5px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  font-family:var(--disp);font-weight:700;font-size:1.07rem;padding:1.05rem 0;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .tog{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;
  transition:transform .18s ease;
}
.faq details[open] summary .tog{transform:rotate(45deg);background:var(--rust);border-color:var(--rust);color:var(--paper)}
.faq details p{padding:0 0 1.15rem;color:var(--ink2);font-size:.99rem}
.faq details p+p{margin-top:-0.4rem}

/* ---------- closing band ---------- */
.night{background:var(--night);color:var(--cream-on-night)}
.night .kicker{color:var(--sun)}
.night-in{padding:4.5rem 0 4rem;text-align:center}
.bigtel{
  display:inline-block;font-family:var(--disp);font-weight:800;
  font-size:clamp(2.5rem,9.5vw,6rem);letter-spacing:-.02em;line-height:1.05;
  color:var(--cream-on-night);text-decoration:none;margin:.6rem 0 .4rem;
  font-variant-numeric:tabular-nums;
}
.bigtel:hover{color:var(--sun)}
.night-sub{color:#B9AB93;font-size:1.02rem;max-width:44ch;margin:0 auto}
.night .cta-row{justify-content:center;margin-top:1.6rem}

/* ---------- footer ---------- */
.foot{background:var(--night);color:#B9AB93;border-top:1px solid #3A2E1E}
.foot-in{padding:1.8rem 0 2rem;display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:center;justify-content:space-between;font-size:.9rem}
.foot a{color:#D8CDB6;text-decoration:none}
.foot a:hover{color:var(--sun)}
.foot .wordmark{color:var(--cream-on-night);font-size:1.05rem}
.foot-towns{max-width:52ch}

/* ---------- reveal on scroll ---------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none} }

/* ---------- helpers & enable-later components ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.night-line{
  font-family:var(--disp);font-weight:700;font-size:clamp(1.25rem,3vw,1.65rem);
  line-height:1.35;color:var(--cream-on-night);max-width:none;
}
.faq summary .tog{font-family:var(--body);font-weight:700;font-size:1.05rem;line-height:1}
/* gallery strip (section ships commented out; styles ready) */
.gal{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){ .gal{grid-template-columns:repeat(4,1fr)} }
.gal .slot{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--paper2);border:1.5px solid var(--line);margin:0}
.gal img{width:100%;height:100%;object-fit:cover;display:none}
.gal .has-photo img{display:block}

/* ---------- print ---------- */
@media print{ .callbar,.hdr .btn{display:none} }

/* ============================================================
   Round 2 additions: nav, page headers, quote builder, logo,
   seasonal note, visit timeline, twinkle motion, footer nav.
   ============================================================ */

/* ---------- desktop nav ---------- */
.nav{display:none;gap:1.5rem;align-items:center}
.nav a{
  font-family:var(--disp);font-weight:600;font-size:.97rem;color:var(--ink);
  text-decoration:none;padding:.3rem 0;border-bottom:2.5px solid transparent;
}
.nav a:hover{color:var(--lake);border-bottom-color:var(--line)}
.nav a[aria-current="page"]{color:var(--rust);border-bottom-color:var(--rust)}
@media (min-width:1020px){ .nav{display:flex} }
.wordmark>svg:first-child{flex:0 0 auto}

/* ---------- page headers (subpages) ---------- */
.page-head{padding:3.6rem 0 .4rem}
.page-head h1{font-size:clamp(2.1rem,5.5vw,3.3rem);max-width:18ch}
.page-head .lede{max-width:56ch}

/* ---------- inline "more" links ---------- */
.more{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--disp);font-weight:700;font-size:1rem;
  color:var(--lake);text-decoration:none;margin-top:1.2rem;
  border-bottom:2px solid var(--lake-tint);padding-bottom:.1rem;
}
.more:hover{color:var(--lake-deep);border-bottom-color:var(--lake)}

/* ---------- seasonal note ---------- */
.season-note{
  font-family:var(--hand);font-weight:600;font-size:1.4rem;line-height:1.25;
  color:var(--rust);display:inline-block;transform:rotate(-1.2deg);margin-top:.9rem;
}

/* ---------- quote builder ---------- */
.qb{
  margin-top:3rem;background:var(--paper);border:2px solid var(--ink);
  border-radius:var(--radius);padding:1.7rem 1.4rem 1.6rem;
  box-shadow:5px 5px 0 0 var(--paper3);
}
@media (min-width:860px){ .qb{padding:2.2rem 2.4rem} }
.qb-head{margin-bottom:1.4rem;max-width:56ch}
.qb-head h3{font-size:1.45rem}
.qb-head p{color:var(--ink2);font-size:.98rem;margin-top:.4rem}
.qb fieldset{border:0;margin:0 0 1.15rem}
.qb legend{
  font-family:var(--disp);font-weight:700;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink2);margin-bottom:.55rem;padding:0;
}
.qb-opts{display:flex;flex-wrap:wrap;gap:.5rem}
.qb-opts label{
  position:relative;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--disp);font-weight:600;font-size:.95rem;
  border:1.5px solid var(--line);border-radius:999px;padding:.5rem 1rem;
  cursor:pointer;background:var(--paper);color:var(--ink);
  transition:background .12s ease,border-color .12s ease,color .12s ease;
  min-height:44px;
}
.qb-opts label:hover{border-color:var(--ink)}
.qb-opts label:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--paper)}
.qb-opts label:has(input:focus-visible){outline:3px solid var(--rust);outline-offset:2px}
.qb-opts input{position:absolute;opacity:0;pointer-events:none}
.qb-opts .p{font-family:var(--body);font-weight:400;font-size:.85rem;opacity:.75}

.legend-soft{
  font-family:var(--body);font-weight:400;font-size:.76rem;letter-spacing:0;
  text-transform:none;opacity:.8;
}

/* the running total */
.qb-out{
  margin:.2rem 0 1rem;padding:1rem 1.1rem;border-radius:var(--radius);
  background:var(--paper3);border:1.5px solid var(--line);
}
.qb-est{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.qb-est-lab{
  font-family:var(--disp);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2);
}
.qb-num{font-family:var(--disp);font-weight:800;font-size:2.35rem;letter-spacing:-.025em;line-height:1}
.qb-break{
  margin-top:.5rem;font-size:.86rem;color:var(--ink2);
  display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;
}
.qb-bit{
  font-family:var(--disp);font-weight:700;font-size:.78rem;
  background:var(--paper);border:1.5px solid var(--line);border-radius:999px;
  padding:.14rem .55rem;color:var(--ink);
}
.qb-bit-plain{font-weight:400;font-family:var(--body);border-style:dashed;color:var(--ink2)}
.qb-note{font-size:.9rem;color:var(--ink2);margin-bottom:1.1rem;max-width:56ch}
.qb-note strong{color:var(--ink);font-family:var(--disp)}
.qb .cta-row{margin:0}

/* ---------- visit timeline (about page) ---------- */
.visit{list-style:none;max-width:640px;display:flex;flex-direction:column;gap:1.35rem;counter-reset:v}
.visit li{position:relative;padding-left:3.1rem;counter-increment:v}
.visit li::before{
  content:counter(v) ".";position:absolute;left:0;top:-.35rem;
  font-family:var(--hand);font-weight:700;font-size:1.9rem;color:var(--rust);
  transform:rotate(-4deg);
}
.visit h3{font-size:1.1rem;margin-bottom:.25rem}
.visit p{font-size:.97rem;color:var(--ink2)}

/* ---------- guarantee block (about page) ---------- */
.deal{
  background:var(--paper);border:2px solid var(--rust);border-radius:var(--radius);
  padding:1.5rem 1.5rem;max-width:640px;margin-top:2.4rem;
  box-shadow:5px 5px 0 0 var(--paper3);
}
.deal h3{color:var(--rust-deep);margin-bottom:.45rem}
.deal p{font-size:1rem}

/* ---------- add-on detail list (services page) ---------- */
.addon-list{display:grid;gap:1rem;margin-top:.6rem}
@media (min-width:820px){ .addon-list{grid-template-columns:repeat(2,1fr);gap:1.2rem} }
.addon{background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:1.1rem 1.15rem}
.sec-alt .addon{background:var(--paper)}
.addon h3{font-size:1.05rem;margin-bottom:.3rem}
.addon p{font-size:.94rem;color:var(--ink2)}
.addon .tagp{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:.9rem}

/* ---------- footer nav + badge ---------- */
.foot-badge{flex:0 0 auto;display:block}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;font-size:.92rem}
.foot-nav a{font-family:var(--disp);font-weight:600}
.foot-in{align-items:flex-start}
.foot-col{display:flex;flex-direction:column;gap:.7rem}

/* ---------- sparkle twinkle ---------- */
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.tw{transform-box:fill-box;transform-origin:center;animation:twinkle 2.8s ease-in-out infinite}
.tw2{animation-delay:.9s}
.tw3{animation-delay:1.8s}

/* ---------- desktop fallback toast for tel:/sms: ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:80;
  background:var(--night);color:var(--cream-on-night);
  padding:1rem 1.15rem;border-radius:14px;
  box-shadow:0 10px 30px rgba(20,12,4,.35);
  max-width:min(440px,calc(100vw - 24px));font-size:.96rem;
}
.toast-msg{margin-bottom:.65rem;max-width:none}
.toast-msg b{font-family:var(--disp);white-space:nowrap}
.toast-row{display:flex;gap:.5rem;flex-wrap:wrap}
.btn-mini{
  font-family:var(--disp);font-weight:700;font-size:.86rem;border-radius:999px;
  padding:.45rem .95rem;border:2px solid var(--sun);background:var(--sun);
  color:var(--night);cursor:pointer;
}
.btn-mini:hover{background:#EFC46A;border-color:#EFC46A}
.btn-mini.ghost{background:transparent;color:var(--cream-on-night);border-color:#5A4A33}
.btn-mini.ghost:hover{border-color:var(--cream-on-night)}

/* ---------- single flat price card ---------- */
.price-hero{display:flex;justify-content:center}
.bigprice{max-width:760px;width:100%;padding-top:1.9rem}
.bigprice-top{display:flex;flex-direction:column;gap:.15rem}
.price-xl{font-size:clamp(3.2rem,10vw,4.6rem);line-height:1}
.bigprice .dur{font-size:.95rem}
.inc-2{display:grid;gap:.5rem}
@media (min-width:700px){ .inc-2{grid-template-columns:repeat(2,1fr);gap:.55rem 1.6rem} }
.bigprice .card-note{
  font-family:var(--hand);font-weight:600;font-size:1.35rem;color:var(--rust);
  transform:rotate(-1deg);transform-origin:left center;
}

/* keep the honest-part notes aligned under the centered price card */
#prices .addons,
#prices .more{max-width:760px;margin-left:auto;margin-right:auto}
#prices .addons{display:block}
#prices .more{display:block;width:fit-content;margin-top:1.3rem}

/* ---------- service area extras ---------- */
.area-note{font-size:.97rem;color:var(--ink2);margin-bottom:1rem;max-width:38ch}
.spots{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.3rem;max-width:42ch}
.spots li{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem;color:var(--ink)}
.spots li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.55rem;border-radius:50%;background:var(--rust)}
.area-grid{align-items:center}

/* ---------- the "text her" page ---------- */
.reach{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){ .reach{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem} }
.reach-label{
  font-family:var(--disp);font-weight:600;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink2);margin-bottom:.2rem;
}
.reach-tel{
  display:inline-block;font-family:var(--disp);font-weight:800;
  font-size:clamp(2.4rem,8vw,3.9rem);letter-spacing:-.02em;line-height:1.05;
  color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;
  margin-bottom:.4rem;
}
.reach-tel:hover{color:var(--lake)}
.reach .cta-row{margin:.9rem 0 1rem}
.reach-note{font-size:.95rem;color:var(--ink2);max-width:46ch}
.reach-qr{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.qr-card{
  background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);
  padding:1.1rem;box-shadow:5px 5px 0 0 var(--paper3);line-height:0;
}
.qr{width:clamp(160px,44vw,208px);height:auto;display:block;shape-rendering:crispEdges}
.qr-cap{font-size:.92rem;color:var(--ink2);text-align:center;max-width:34ch}
.qr-cap strong{color:var(--ink);font-family:var(--disp)}

/* two codes side by side: one books a time, one opens a text */
.qr-pair{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;width:100%}
.qr-one{display:flex;flex-direction:column;align-items:center;gap:.7rem;flex:1 1 150px;max-width:220px}
.qr-one .qr-card{padding:.8rem}
.qr-one .qr{width:100%;max-width:150px}
.qr-book{border-color:var(--lake)}
.qr-foot{font-size:.9rem;color:var(--ink2);text-align:center;max-width:36ch}
.reach-book{
  margin-top:1.6rem;padding-top:1.4rem;border-top:2px solid var(--line);max-width:46ch;
}
.reach-book p{font-size:.95rem;color:var(--ink2);margin-bottom:.9rem}
.reach-book .reach-label{margin-bottom:.3rem}
@keyframes qrpulse{0%,100%{box-shadow:5px 5px 0 0 var(--paper3)}35%{box-shadow:0 0 0 7px var(--lake-tint)}}
.qr-card.flash{animation:qrpulse 1.5s ease-in-out 2}
.reach-foot{
  font-family:var(--hand);font-weight:600;font-size:1.3rem;color:var(--rust);
  transform:rotate(-1deg);display:inline-block;margin-top:1.4rem;
}
.qb-copy{cursor:pointer;font-family:var(--disp)}

/* ---------- fixes after adding the contact page ---------- */
/* nav gained a 6th item — give it room before it shows */
@media (min-width:1020px) and (max-width:1139.9px){ .nav{display:none} }
@media (min-width:1140px){ .nav{display:flex;gap:1.15rem} }

/* "what to send" reads as three across on wide screens, not a narrow column */
@media (min-width:860px){
  #whattosend .visit{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:2rem;max-width:none;
  }
  #whattosend .visit li{padding-left:2.6rem}
}

/* footer: keep badge + two columns on one row instead of wrapping the nav down */
@media (min-width:760px){
  .foot-in{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr);gap:1.5rem 2.5rem;align-items:start}
}
/* the composer sits in the same beige block as "what to send" — don't double the gap */
#whattosend + #quote-sec{padding-top:.25rem}

/* ---------- badge in the closing band ---------- */
.night-badge{display:block;margin:0 auto 1.5rem;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
@media (max-width:520px){ .night-badge{width:100px;height:100px;margin-bottom:1.2rem} }

/* ============================================================
   MOBILE PASS
   Findings from a device audit at 320–430px, landscape, and on
   iPhone SE / 12 / 14 Pro Max / Pixel 5 / Galaxy S9+.
   ============================================================ */

/* --- 1. touch targets: everything tappable reaches ~44px --- */
html{-webkit-tap-highlight-color:rgba(174,81,39,.18)}

.wordmark{padding:.4rem 0}

/* inline phone / text / email links inside prose: vertical padding grows the
   hit area without changing the line box, so paragraphs don't reflow */
p a[href^="tel:"], p a[href^="sms:"], p a[href^="mailto:"],
li a[href^="tel:"], li a[href^="sms:"], li a[href^="mailto:"],
.faq details p a{padding-block:.68rem}

/* "more →" links: pad the box to a real tap target, and hang the underline off
   the text itself so it stays put instead of drifting with the padding */
.more{
  padding:.55rem 0;border-bottom:0;
  text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:5px;text-decoration-color:var(--lake-tint);
}
.more:hover{text-decoration-color:var(--lake)}

.bigtel{padding:.35rem .6rem}
.reach-tel{padding:.3rem .5rem;margin-left:-.5rem}

.foot-nav a{display:inline-block;padding:.62rem 0}
.foot-col p a{padding-block:.68rem}

/* --- 2. small phones (320–360px): keep the hero on one screen --- */
@media (max-width:360px){
  body{font-size:16px}
  .hero h1{font-size:1.98rem;max-width:none;margin:.45rem 0 .58rem}
  .hero-sub{font-size:.95rem;line-height:1.36}
  .hero-in{padding:.35rem 0 .45rem}
  .hero .cta-row{margin:.75rem 0 .45rem;gap:.42rem}
  .hero .btn{min-height:47px}
  .hero .promise{font-size:.86rem;line-height:1.36}
  .hero .eyebrow+h1{margin-top:.45rem}
  .hero .btn{min-height:50px;font-size:.96rem;padding:.6rem 1rem}
  .eyebrow{font-size:.7rem;letter-spacing:.12em}
  .promise{font-size:.89rem}
  .wrap{padding-inline:16px}
  /* keep the sticky bar one line tall: if it wraps it grows past --barH and
     starts covering the bottom of the page */
  .callbar{gap:8px;padding-inline:8px}
  .callbar .btn{font-size:.86rem;gap:.35rem;padding:.5rem .35rem;white-space:nowrap;min-height:50px}
  .callbar .btn svg{width:16px;height:16px}
  .card{padding:1.25rem 1.1rem 1.2rem}
  .price-xl{font-size:3rem}
  .badge{font-size:1.05rem;padding:.36rem .65rem .44rem}
}

/* --- 3. landscape phones: short viewport, don't bury the buttons --- */
@media (orientation:landscape) and (max-height:520px){
  .hero{min-height:0}
  .hero-in{padding:.5rem 0 .7rem;gap:.8rem}
  .hero h1{font-size:clamp(1.6rem,3.9vw,2.1rem);margin:.35rem 0 .45rem;max-width:none}
  .hero-sub{font-size:.96rem;line-height:1.4;max-width:62ch}
  .hero .cta-row{margin:.7rem 0 .5rem}
  .hero .btn{min-height:46px}
  .hero .promise{font-size:.88rem}
  .eyebrow{font-size:.7rem}
  .hero-art{display:none}
  .sec{padding:2.6rem 0}
  .night-in{padding:3rem 0 2.6rem}
  .night-badge{width:84px;height:84px;margin-bottom:1rem}
}

/* --- 4. nothing smaller than 15px on a phone --- */
@media (max-width:819.9px){
  .ba-cap,.qr-cap,.card-note,.foot-in,.addon p,.step p,.wint p{font-size:.95rem}
  .ba-cap .hint{font-size:.82rem}
}

/* ---------- hero with three calls to action ----------
   The hero has to fit one screen on a phone (see README, "Mobile"), and a
   third button stacked into its own row costs about 56px it doesn't have.
   Below 560px the phone number keeps its own full-width row, and the two
   other buttons share the row underneath. Labels wrap inside a button rather
   than overflow it, so the smallest phones get taller buttons, not a
   horizontal scrollbar. */
@media (max-width:559.9px){
  .hero .cta-row{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:.5rem}
  .hero .cta-row>.btn:first-child{flex:1 0 100%}
  .hero .cta-row>.btn:not(:first-child){
    flex:1 1 0;min-width:0;padding-inline:.65rem;justify-content:center;
    text-align:center;white-space:normal;line-height:1.15;
  }
}

/* Short phones (a 375x600 viewport is an SE with a toolbar open): the hero
   still has to clear the call bar, so tighten its spacing rather than let it
   push the trust line under the fold. */
@media (max-width:819.9px) and (max-height:700px){
  .hero-in{padding:.9rem 0 1.2rem}
  .hero h1{margin:.4rem 0 .6rem;font-size:clamp(2.1rem,6.9vw,3rem)}
  .hero-sub{font-size:1.02rem}
  .hero .cta-row{margin:1rem 0 .8rem}
}

/* Inline links inside running prose: give them the same vertical padding the
   FAQ and footer links get, so a thumb has something to land on. 40px is the
   practical ceiling for a link sitting inside a line of text. */
.step p a,.card-note a,.visit p a,.reach-note a,.qb-note a{padding-block:.68rem}

/* the line under the price card */
.adds-note{font-size:.95rem;color:var(--ink2);margin-top:1rem;max-width:52ch}
.adds-note a{font-weight:700;padding-block:.68rem}

/* ---------- the number, inline ----------
   Shown when the page is inside a frame that can't hand off to a messaging
   app. It never replaces the link, it appears beside it, so a phone that can
   open Messages does that and nobody ever sees this. */
/* [hidden] must beat this, or the panel covers the page: a class selector
   outranks the browser's own rule for the attribute. */
[hidden]{display:none !important}
.sheet{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:700px){ .sheet{align-items:center} }
.sheet-back{position:absolute;inset:0;background:rgba(34,26,18,.55);backdrop-filter:blur(2px)}
.sheet-card{
  position:relative;width:min(420px,100%);
  background:var(--paper);border:2px solid var(--ink);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:1.6rem 1.3rem calc(1.5rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 40px rgba(34,26,18,.3);
  animation:sheetup .22s ease-out;
  max-height:92vh;overflow-y:auto;
}
@media (min-width:700px){ .sheet-card{border-radius:var(--radius);padding-bottom:1.5rem} }
@media (prefers-reduced-motion:reduce){ .sheet-card{animation:none} }
@keyframes sheetup{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.sheet-x{
  position:absolute;top:.5rem;right:.75rem;width:44px;height:44px;
  background:none;border:0;font-size:1.7rem;line-height:1;color:var(--ink2);cursor:pointer;
}
.sheet-x:hover{color:var(--ink)}
.sheet-lab{
  font-family:var(--disp);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2);padding-right:2.5rem;
}
.sheet-tel{
  display:block;font-family:var(--disp);font-weight:800;
  font-size:clamp(1.9rem,8.5vw,2.5rem);letter-spacing:-.025em;
  color:var(--ink);text-decoration:none;margin:.2rem 0 .5rem;
  font-variant-numeric:tabular-nums;
}
.sheet-note{font-size:.92rem;color:var(--ink2);margin-bottom:1rem}
.sheet .cta-row{margin:0 0 1.1rem}
.sheet-qr{padding:.7rem;align-self:center;margin:0 auto;width:max-content}
.sheet-qr .qr{width:min(152px,40vw)}