/* Southern Softwash: the shared system. Montagu Slab speaks, Proza Libre explains.
   The field is a washed white; the ink is the logo's outline; the water is the logo's cyan. */
@font-face{font-family:"Montagu Slab";src:url(/assets/fonts/montagu-slab-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Proza Libre";src:url(/assets/fonts/proza-libre-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Proza Libre";src:url(/assets/fonts/proza-libre-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  font-size:clamp(1rem,0.95rem + 0.22vw,1.125rem);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  --section-y:clamp(4rem,2.8rem + 5vw,8.5rem);
  --edge:clamp(1rem,0.6rem + 1.6vw,2.5rem);
  --measure:62ch;--shell:min(100% - 2*var(--edge),84rem);
  --wash:#ffffff;--wash-deep:#eef4f3;--mist:#ecfafc;--ink:#221a1a;--ink-2:#2e2524;--ink-muted:#564d4b;
  --on-ink:#f5f8f7;--on-ink-muted:#cdc5c2;
  --water:#03c8e4;--water-ink:#0b6873;--lime:#62df0e;--grime:#2c3528;
  --line:color-mix(in srgb,var(--ink) 13%,transparent);--line-ink:rgba(245,248,247,0.16);
  --r-sm:8px;--r-md:14px;--r-lg:22px;--r-pill:999px;
  --ease-expressive:cubic-bezier(0.16,1,0.30,1);--dur-cinematic:640ms;--stagger:75ms;
  --display:"Montagu Slab",Rockwell,"Roboto Slab",serif;
  --text:"Proza Libre","Gill Sans",sans-serif;
  --bar-h:76px;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + 16px)}
body{min-height:100svh;background:var(--wash);color:var(--ink);font-family:var(--text);line-height:1.55;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--water-ink);outline-offset:3px;border-radius:4px}
.ink :focus-visible{outline-color:var(--water)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shell{width:var(--shell);margin-inline:auto}
.holds-arrivals{overflow-x:clip}

/* type */
.d1,.d2,.d3{font-family:var(--display);font-weight:700;letter-spacing:-0.015em;text-wrap:balance}
.d1{font-variation-settings:"opsz" 144;font-size:clamp(2.6rem,1.5rem + 4.8vw,6rem);line-height:0.96}
.d2{font-variation-settings:"opsz" 96;font-size:clamp(2.1rem,1.4rem + 3vw,4.25rem);line-height:1}
.d3{font-variation-settings:"opsz" 40;font-size:clamp(1.4rem,1.15rem + 0.9vw,2rem);line-height:1.1}
.lede{font-size:clamp(1.05rem,1rem + 0.3vw,1.25rem);line-height:1.5;color:var(--ink-muted);max-width:52ch;margin-inline:auto}
.ink .lede{color:var(--on-ink-muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 24px;
  border-radius:var(--r-pill);font:600 1rem/1.1 var(--text);text-decoration:none;text-align:center;border:0;cursor:pointer;
  transition:transform 220ms var(--ease-expressive),background 220ms,color 220ms,box-shadow 220ms}
.btn:active{transform:scale(0.98)}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn-ink{background:var(--ink);color:var(--on-ink);border:2.5px solid var(--ink);box-shadow:0 4px 0 #000}
.btn-ink:hover{background:#3d3130}
.btn-water{background-color:#22c9ee;background-image:linear-gradient(to bottom,#3fdcf7 0 52%,#0cb8e8 52% 100%);color:var(--ink);border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.btn-water:hover{background-image:linear-gradient(to bottom,#62e4fa 0 52%,#1cc3ef 52% 100%)}
.btn-ink:active,.btn-water:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.ink .btn-water{border-color:var(--on-ink);box-shadow:0 4px 0 var(--on-ink)}
.fan{width:22px;height:19px;flex:0 0 auto;overflow:visible}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn-ghost:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.link{color:var(--water-ink);font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:3px}
.ink .link{color:var(--water)}
/* a link that stands on its own line is a full tap target */
.svc-copy .link,.wg-town .link,.chorus-src .link,.ledger-src .link,.liveline a,.head .lede .link{display:inline-flex;align-items:center;min-height:48px}

/* THE BAR: fresh glass, beaded like a window we just washed. Water fills it as you read, the phone
   sprays it full, and the water swells under the menu item you point at. site.js runs the water. */
.bar{position:sticky;top:0;z-index:60;padding:calc(10px + env(safe-area-inset-top)) var(--edge) 0;pointer-events:none}
.bar-in{pointer-events:auto;position:relative;isolation:isolate;overflow:hidden;width:min(100%,84rem);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:64px;padding:6px 6px 6px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,0.7);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border:1.5px solid rgba(255,255,255,0.95);box-shadow:0 8px 26px rgba(34,26,26,0.14),0 0 0 1px rgba(34,26,26,0.07),inset 0 1px 0 #fff;transition:box-shadow 300ms}
.bar.scrolled .bar-in{box-shadow:0 10px 30px rgba(34,26,26,0.2),0 0 0 1px rgba(34,26,26,0.09),inset 0 1px 0 #fff}
.bar .tank{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.bar .bead{position:absolute;z-index:1;border-radius:50%;pointer-events:none;width:var(--d);height:var(--d);left:var(--x);top:var(--y);
  background:radial-gradient(circle at 34% 28%,#fff 0 16%,rgba(255,255,255,0.35) 30%,rgba(120,200,215,0.35) 64%,rgba(34,26,26,0.32) 100%);
  box-shadow:0 2px 2px rgba(34,26,26,0.25),inset 0 -1px 1px rgba(255,255,255,0.8);transition:transform 900ms cubic-bezier(0.55,0,1,0.45),opacity 900ms}
.bar.shed .bead{transform:translateY(48px);opacity:0}
.brand{position:relative;z-index:2;display:flex;align-items:center;flex:0 0 auto}
.brand img{height:44px;width:auto}
.nav{display:none}
.bar-acts{position:relative;z-index:2;display:flex;align-items:center;gap:var(--space-2)}
.bar .btn{min-height:48px;padding:10px 18px;font-size:0.95rem}
.bar .btn-water{display:none}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-pill);
  border:1px solid rgba(34,26,26,0.14);background:rgba(255,255,255,0.65);color:var(--ink);cursor:pointer}
.menu-btn svg{width:20px;height:20px}
/* the call: a red knob with the handset in it; the wheel rim turns under the pointer and the handset rings now and then */
.phone-knob{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:4px 18px 4px 4px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);
  font-weight:600;text-decoration:none;white-space:nowrap;box-shadow:0 4px 0 #000;transition:transform 200ms,box-shadow 200ms}
.phone-knob:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.knob{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%,#ff6a6e,#e3262d 58%,#a8101a);border:2.5px solid var(--on-ink)}
.knob .rim{position:absolute;inset:2px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,0.75) 0 5deg,transparent 5deg 60deg);
  -webkit-mask:radial-gradient(circle,transparent 0 62%,#000 63% 100%);mask:radial-gradient(circle,transparent 0 62%,#000 63% 100%);transition:transform 800ms cubic-bezier(0.34,1.56,0.64,1)}
.knob .rim::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,0.75)}
.phone-knob:hover .rim,.phone-knob:focus-visible .rim{transform:rotate(240deg)}
.handset{position:relative;z-index:1;width:21px;height:21px;fill:#fff;transform-origin:50% 60%;animation:ring 7s ease-in-out 3s infinite}
.phone-knob:hover .handset{animation:ring-now 600ms ease-in-out}
@keyframes ring{0%,6%,100%{transform:rotate(0)}1%{transform:rotate(-16deg)}2%{transform:rotate(14deg)}3%{transform:rotate(-12deg)}4%{transform:rotate(10deg)}5%{transform:rotate(-6deg)}}
@keyframes ring-now{0%,100%{transform:rotate(0)}20%{transform:rotate(-16deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(6deg)}}
.phone-knob .long{display:none}
.sheet{display:none;pointer-events:auto;width:min(100%,84rem);margin:8px auto 0;padding:var(--space-2) var(--space-3) var(--space-4);text-align:center;border-radius:24px;
  background:rgba(255,255,255,0.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1.5px solid #fff;box-shadow:0 14px 34px rgba(34,26,26,0.18)}
.sheet.open{display:grid;gap:2px}
.sheet a{display:flex;align-items:center;justify-content:center;min-height:52px;font-weight:600;text-decoration:none;border-radius:var(--r-sm)}
.sheet a:hover{background:var(--wash-deep)}
@media (min-width:1000px){
  .menu-btn,.sheet,.sheet.open{display:none}
  .nav{position:relative;z-index:2;display:flex;gap:2px;align-items:center}
  .nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;font-weight:600;text-decoration:none;border-radius:var(--r-pill);transition:background 200ms}
  .nav a:hover,.nav a[aria-current="page"]{background:rgba(255,255,255,0.72)}
  .bar .btn-water{display:inline-flex}
  .brand img{height:48px}
}
@media (min-width:1240px){.phone-knob .short{display:none}.phone-knob .long{display:inline}}

/* arrivals: the copy lands once, quietly */
.rise{opacity:0;transform:translateY(22px);animation:rise var(--dur-cinematic) var(--ease-expressive) forwards}
.rise.s1{animation-delay:calc(var(--stagger)*1)}
.rise.s2{animation-delay:calc(var(--stagger)*2)}
.rise.s3{animation-delay:calc(var(--stagger)*3)}
.rise.s4{animation-delay:calc(var(--stagger)*4)}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity 700ms var(--ease-expressive),transform 700ms var(--ease-expressive)}
.reveal.in{opacity:1;transform:none}

/* THE STICKER WORD: one word per headline wears the logo's lettering, a two-tone water fill
   with a hard waterline, die-cut in a thick outline (ink on paper, white on ink). The outline
   layer is generated content, so the word is read and indexed once. */
.stk{position:relative;display:inline-block;isolation:isolate;white-space:nowrap;padding:0 0.04em;color:transparent;--top:#3fdcf7;--bot:#0a9fd9;--edge:var(--ink)}
.stk::before,.stk::after{content:attr(data-t);content:attr(data-t) / "";position:absolute;inset:0;padding:0 0.04em;white-space:nowrap}
.stk::before{z-index:0;color:var(--edge);-webkit-text-stroke:0.17em var(--edge)}
.stk::after{z-index:1;background:linear-gradient(to bottom,var(--top) 0 53%,var(--bot) 53% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.stk.lime{--top:#8af51f;--bot:#38b52a}
.ink .stk{--edge:var(--on-ink)}
.stk.pop{animation:pop 700ms 480ms cubic-bezier(0.34,1.56,0.64,1) both}
@keyframes pop{from{opacity:0;transform:scale(0.55) rotate(-7deg)}to{opacity:1;transform:none}}

/* DIE-CUT: photos, the ticket, and the map wear the logo's thick ink outline and a hard shadow,
   like stickers pressed onto a white page. On ink they turn white-edged with a water shadow. */
.die{border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink)}
.ink .die{border-color:var(--on-ink);box-shadow:6px 6px 0 var(--water)}
.tilt-l{--tilt:-1.6deg;transform:rotate(var(--tilt))}.tilt-r{--tilt:1.4deg;transform:rotate(var(--tilt))}.tilt-s{--tilt:-0.7deg;transform:rotate(var(--tilt))}

/* his real Best of the Wiregrass badges (Dothan Eagle, 2022 to 2024), cut from his own artwork and
   stacked like stickers on the corner of the work; they fan out under the pointer */
picture{display:contents}
.awards{position:absolute;z-index:6;width:calc(var(--s,126px) * 1.8);height:calc(var(--s,126px) * 1.08)}
.awards img{position:absolute;top:0;width:var(--s,126px);height:auto;filter:drop-shadow(2px 3px 0 rgba(34,26,26,0.45));
  transition:transform 450ms cubic-bezier(0.34,1.56,0.64,1)}
.hero-seal .awards,.ph-seal .awards{--s:clamp(74px,21vw,94px);position:relative;z-index:1;margin-inline:auto}
@media (min-width:1000px){.hero-seal .awards,.ph-seal .awards{--s:clamp(92px,6.6vw,112px)}}
.awards img:nth-child(1){left:0;top:9%;transform:rotate(-13deg)}
.awards img:nth-child(2){left:22%;top:4%;transform:rotate(-3deg)}
.awards img:nth-child(3){left:44.4%;top:0;transform:rotate(9deg)}
.awards:hover img:nth-child(1){transform:rotate(-19deg) translate(-14%,6%)}
.awards:hover img:nth-child(2){transform:rotate(-3deg) translateY(-6%)}
.awards:hover img:nth-child(3){transform:rotate(15deg) translate(14%,-2%)}

/* the mascot: cartoon Josh, cut from his own banner art */
.mascot{position:absolute;z-index:5;pointer-events:none;width:var(--m,120px);height:auto;filter:drop-shadow(3px 4px 0 rgba(34,26,26,0.18))}
.mascot.wave{animation:sway 4.8s ease-in-out infinite;transform-origin:50% 100%}
@keyframes sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}

/* soap bubbles: they drift up, and they pop when tapped */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.bubble{position:absolute;bottom:-90px;left:var(--x);width:var(--d);height:var(--d);border-radius:50%;pointer-events:auto;cursor:pointer;border:0;padding:0;
  background:
    radial-gradient(circle at 30% 28%,rgba(255,255,255,0.95) 0 7%,rgba(255,255,255,0) 17%),
    radial-gradient(circle at 70% 76%,rgba(255,255,255,0.7) 0 4%,rgba(255,255,255,0) 10%),
    radial-gradient(circle,rgba(255,255,255,0) 56%,rgba(3,200,228,0.22) 68%,rgba(98,223,14,0.2) 78%,rgba(255,110,190,0.16) 88%,rgba(3,200,228,0.5) 97%,rgba(3,200,228,0) 100%);
  animation:rise-b var(--t) linear var(--delay) infinite;will-change:transform}
.bubble::after{content:"";position:absolute;inset:0;border-radius:50%;animation:wob calc(var(--t) / 5) ease-in-out infinite alternate;
  box-shadow:inset 0 0 0 1px rgba(3,200,228,0.28)}
@keyframes rise-b{0%{transform:translate(0,0)}25%{transform:translate(18px,-28svh)}50%{transform:translate(-14px,-56svh)}75%{transform:translate(16px,-84svh)}100%{transform:translate(0,-112svh)}}
@keyframes wob{to{transform:scale(1.06,0.95)}}
.bubble.popped{animation:none;pointer-events:none}
.bubble.popped{transition:transform 220ms ease-out,opacity 220ms ease-out;opacity:0}
.drop{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--water);border:1.5px solid var(--ink);pointer-events:none;z-index:7;
  animation:fly 520ms cubic-bezier(0.2,0.7,0.3,1) forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) scale(0.4);opacity:0}}

/* where the page meets an ink section, the edge is a water line with a few drops */
.ink.section{position:relative}
.ink.section::before,.ink.section::after{content:"";position:absolute;left:0;right:0;height:40px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40'%3E%3Cpath fill='%23221a1a' d='M0 40V26c20 0 30-12 50-10s30 14 50 12 30-16 50-14 30 14 50 12c15-1 25-4 40-2v16z'/%3E%3Ccircle fill='%23221a1a' cx='62' cy='7' r='3.2'/%3E%3Ccircle fill='%23221a1a' cx='164' cy='5' r='2.5'/%3E%3Ccircle fill='%23221a1a' cx='120' cy='11' r='1.7'/%3E%3C/svg%3E") repeat-x 0 100%/240px 40px}
.ink.section::before{top:-39px}
.ink.section::after{bottom:-39px;transform:scaleY(-1)}

/* the wash panel (canvas): after photo is the real <img>, before is painted on top */
.wash-frame{position:relative;overflow:hidden;background:var(--grime);touch-action:pan-y;--pos-x:50%;--pos-y:50%}
.wash-frame img,.wash-frame canvas{position:absolute;inset:0;width:100%;height:100%}
.wash-frame img{object-fit:cover;object-position:var(--pos-x) var(--pos-y)}
.wash-frame canvas{display:block}
.wash-frame .mist{pointer-events:none}
.tag{position:absolute;left:12px;top:12px;z-index:3;padding:6px 12px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--ink) 74%,transparent);color:var(--on-ink);font:600 0.8rem/1.2 var(--text);transition:opacity 400ms}
.chip{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;border-radius:var(--r-pill);
  border:0;background:color-mix(in srgb,var(--wash) 92%,transparent);color:var(--ink);font:600 0.9rem/1 var(--text);
  cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chip svg{width:16px;height:16px}
.chip[hidden]{display:none}
.wash-tools{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;gap:8px;transform:rotate(calc(-1 * var(--tilt,0deg)))}

/* the scroll wash: the before photo is masked away as the section scrolls through */
.scrub{position:relative;overflow:hidden;background:var(--grime);aspect-ratio:var(--ar,3/4);--p:0}
.scrub img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.scrub .b{-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--p)*122% - 22%),#000 calc(var(--p)*122%));
  mask-image:linear-gradient(to bottom,transparent calc(var(--p)*122% - 22%),#000 calc(var(--p)*122%))}
.scrub .spray{position:absolute;left:-5%;right:-5%;height:22%;top:calc(var(--p)*122% - 26%);pointer-events:none;
  opacity:calc(min(var(--p),1 - var(--p))*5);
  background:
    radial-gradient(circle at 23% 61%,rgba(255,255,255,0.32) 0 1px,transparent 1.6px) 0 0/37px 29px,
    radial-gradient(circle at 71% 34%,rgba(230,251,255,0.26) 0 1px,transparent 1.5px) 0 0/23px 19px,
    radial-gradient(circle at 48% 82%,rgba(255,255,255,0.22) 0 0.8px,transparent 1.3px) 0 0/53px 41px,
    linear-gradient(to bottom,rgba(255,255,255,0),rgba(224,248,255,0.22) 58%,rgba(255,255,255,0.62) 86%,rgba(255,255,255,0));
  mix-blend-mode:screen;animation:drift 1.3s linear infinite}
@keyframes drift{to{background-position:37px 29px,-23px 19px,53px -41px,0 0}}
.scrub .tag{transition:background 300ms}
.scrub.clean .tag,.tag.clean{background:var(--lime);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}

/* sections */
.section{padding-block:var(--section-y)}
.ink{background:var(--ink);color:var(--on-ink)}
.mistbg{background:var(--mist)}
.head{display:grid;gap:var(--space-4);justify-items:center;text-align:center;margin-bottom:clamp(2rem,1.4rem + 2.5vw,4rem)}

/* footer: centered, spread evenly. On the phone: the two ways to reach us first, then services and towns
   side by side, the company links as one row, the Facebook badge, the fine print. */
footer{padding:var(--space-8) var(--edge) calc(var(--space-7) + env(safe-area-inset-bottom));text-align:center;color:var(--ink-muted);font-size:0.95rem;border-top:1px solid var(--line)}
.foot{width:var(--shell);margin-inline:auto;display:grid;gap:var(--space-6);justify-items:center}
.foot-logo img{height:68px;width:auto}
.foot-reach{display:grid;gap:var(--space-3);justify-items:center;width:100%}
.foot-reach .acts{flex-direction:column;align-items:stretch;width:100%;max-width:20rem}
.foot-reach .btn{white-space:nowrap}
.foot-sub{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}
.foot-sub a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:3px}
.foot-hours{margin-top:-6px}
.foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-4);width:100%;max-width:30rem;padding-top:var(--space-5);border-top:1.5px solid var(--ink)}
.foot-col{display:grid;gap:0;justify-items:center;align-content:start}
.foot-col strong{color:var(--ink);font-weight:600;margin-bottom:var(--space-1)}
.foot-col a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;color:var(--ink)}
.foot-col a:hover{color:var(--water-ink)}
.foot-co{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px;max-width:19rem;margin-inline:auto;padding-top:var(--space-4);border-top:1px solid var(--line)}
.foot-co strong{flex-basis:100%;margin-bottom:0}
.social{display:flex;gap:var(--space-3);justify-content:center;padding:var(--space-3) 0}
.fine{display:grid;gap:6px;justify-items:center}
.fine a{color:var(--ink-muted);text-decoration:none}
.fine-links{display:flex;gap:var(--space-4);justify-content:center}
.fine-links a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:760px){
  .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));max-width:60rem}
  .foot-reach .acts{flex-direction:row;justify-content:center;max-width:none}
  .foot-co{grid-column:auto;display:grid;gap:0;max-width:none;margin:0;padding-top:0;border-top:0;justify-items:center;align-content:start}
  .foot-co strong{margin-bottom:var(--space-1)}
}

/* THE FACEBOOK BADGE: the logo's two-tone sticker. It arrives under a film of grime, a spray wipes it clean
   when it comes into view, then it drips and sends out a ripple every few seconds; a tap splashes. */
.fb-badge{position:relative;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;isolation:isolate;color:#fff;
  background:linear-gradient(to bottom,#4c9bff 0 53%,#1877f2 53% 100%);border:3px solid var(--ink);box-shadow:4px 5px 0 var(--ink);
  transition:transform 400ms cubic-bezier(0.34,1.56,0.64,1),box-shadow 200ms}
.fb-badge svg{position:relative;z-index:2;width:40px;height:40px;filter:drop-shadow(0 2px 0 rgba(34,26,26,0.35))}
.fb-badge:hover{transform:rotate(-8deg) scale(1.08)}
.fb-badge:active{transform:translateY(3px);box-shadow:2px 2px 0 var(--ink)}
.fb-ring{position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--water);opacity:0;pointer-events:none;animation:fb-ripple 3.4s ease-out 1.6s infinite}
@keyframes fb-ripple{0%{transform:scale(1);opacity:0.75}70%,100%{transform:scale(1.7);opacity:0}}
.fb-film,.fb-spray{display:none}
.grime-on .fb-film{display:block;position:absolute;inset:0;border-radius:50%;z-index:3;pointer-events:none;
  background:url(/assets/img/grime.webp) center/140px,rgba(64,72,52,0.55);background-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(100deg,transparent 40%,#000 60%);mask-image:linear-gradient(100deg,transparent 40%,#000 60%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:100% 0;mask-position:100% 0}
.grime-on .fb-badge.washed .fb-film{animation:fb-wipe 1.1s var(--ease-expressive) forwards}
@keyframes fb-wipe{to{-webkit-mask-position:0 0;mask-position:0 0}}
.grime-on .fb-spray{display:block;position:absolute;top:-8%;bottom:-8%;width:34%;left:-40%;z-index:4;border-radius:50%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(226,248,255,0.9) 60%,rgba(255,255,255,0))}
.grime-on .fb-badge.washed .fb-spray{animation:fb-spray 1.1s var(--ease-expressive) forwards}
@keyframes fb-spray{0%{left:-40%;opacity:1}90%{opacity:1}100%{left:110%;opacity:0}}
.fb-drip{position:absolute;bottom:2px;width:9px;height:12px;z-index:1;pointer-events:none;opacity:0;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;background:var(--water);border:1.5px solid var(--ink);animation:fb-drip 3.8s ease-in infinite}
.fb-drip:nth-last-child(3){left:30%;animation-delay:2.2s}
.fb-drip:nth-last-child(2){left:52%;animation-delay:3.4s}
.fb-drip:nth-last-child(1){left:66%;animation-delay:4.9s}
@keyframes fb-drip{0%{transform:translateY(0) scale(0.3);opacity:0}12%{transform:translateY(4px) scale(1);opacity:1}38%{transform:translateY(34px) scale(0.9);opacity:0}100%{opacity:0}}
.follow .fb-badge{margin-top:var(--space-3)}

.g28-mark{position:relative;display:inline-block;height:.92em;aspect-ratio:1919/623;vertical-align:-.2em}
.g28-mark i{position:absolute;inset:0;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.g28-l{--m:url(/assets/brand/gray28-letters.svg);background:currentColor}
.g28-n{--m:url(/assets/brand/gray28-28.svg);background:#7a7a7a}

/* shared: action rows, review stars, the live dot */
.acts{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}
.proof a{display:inline-flex;align-items:center;gap:10px;min-height:48px;text-decoration:none;color:var(--ink)}
.proof a:hover span{text-decoration:underline}
.stars{display:inline-flex;gap:2px}
.stars svg{width:18px;height:18px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--lime);display:inline-block;box-shadow:0 0 0 0 rgba(98,223,14,0.6);animation:pulse 2.4s ease-out infinite;flex:0 0 auto}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(98,223,14,0)}100%{box-shadow:0 0 0 0 rgba(98,223,14,0)}}

/* customer words */
.chorus{display:grid;gap:0;margin-top:clamp(2.5rem,1.5rem + 3vw,4.5rem);border-top:2px solid var(--ink)}
.chorus blockquote{padding:var(--space-6) var(--space-4);border-bottom:1px solid var(--line);text-align:center;display:grid;gap:var(--space-3);justify-items:center}
.chorus p{font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 36;font-size:clamp(1.25rem,1.05rem + 0.8vw,1.75rem);line-height:1.2;max-width:28ch}
.chorus cite{font-style:normal;font-size:0.92rem;color:var(--ink-muted)}
.chorus-src{margin-top:var(--space-5);text-align:center;font-size:0.95rem;color:var(--ink-muted)}
@media (min-width:860px){.chorus{grid-template-columns:repeat(2,minmax(0,1fr))}.chorus blockquote:nth-child(odd){border-right:1px solid var(--line)}}

/* the wiregrass map: rings, pins, and the dispatch line */
.wg-map{position:relative;aspect-ratio:965/1000;width:min(100%,600px);margin-inline:auto;border-radius:var(--r-lg);
  background:radial-gradient(120% 90% at 45% 70%,#e9f5f4 0,#dfeeed 55%,#d5e7e6 100%);border:1px solid var(--line);overflow:hidden}
.wg-map svg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-4px,-50%);display:flex;align-items:center;gap:6px;
  font:600 0.78rem/1 var(--text);color:var(--ink-muted);white-space:nowrap;pointer-events:none}
.pin i{width:8px;height:8px;border-radius:50%;background:var(--ink-muted);flex:0 0 auto}
.pin[data-side="left"]{flex-direction:row-reverse;transform:translate(calc(-100% + 4px),-50%)}
.pin[data-side="below"]{flex-direction:column;gap:3px;transform:translate(-50%,-4px)}
.wg-ring{position:absolute;font:600 0.68rem/1 var(--text);color:color-mix(in srgb,var(--water-ink) 70%,transparent);transform:translate(-50%,-50%)}
.pin span{order:0}
button.pin{pointer-events:auto;cursor:pointer;border:0;background:none;min-height:48px;min-width:48px;padding:0 6px;border-radius:999px;color:var(--ink);font-size:0.86rem;transform:translate(-13px,-50%)}
button.pin[data-side="left"]{transform:translate(calc(-100% + 13px),-50%)}
button.pin[data-side="below"]{justify-content:flex-start;transform:translate(-50%,-7px)}
button.pin i{width:14px;height:14px;background:var(--water);box-shadow:0 0 0 4px rgba(3,200,228,0.22)}
button.pin[aria-pressed="true"] i{background:var(--ink);box-shadow:0 0 0 5px rgba(3,200,228,0.55),0 0 0 12px rgba(3,200,228,0.18);animation:ping 1.8s ease-out infinite}
@keyframes ping{60%{box-shadow:0 0 0 5px rgba(3,200,228,0.55),0 0 0 18px rgba(3,200,228,0)}}
.wg-state{position:absolute;font:600 0.75rem/1 var(--text);letter-spacing:0.08em;color:color-mix(in srgb,var(--ink) 38%,transparent)}

/* a strip of job photos */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:18px;padding:8px 10px 14px 4px;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;padding-bottom:6px}
.strip figure{margin:0;scroll-snap-align:center}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--wash-deep);border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink)}
.strip figure:nth-child(odd) img{transform:rotate(-1.2deg)}.strip figure:nth-child(even) img{transform:rotate(1deg)}
.strip figcaption{margin-top:6px;font-size:0.85rem;color:var(--ink-muted)}

/* facts on ink */
.facts{width:100%;border-top:1.5px solid var(--on-ink);text-align:center}
.facts div{display:grid;gap:4px;padding:var(--space-4) 0;border-bottom:1px solid var(--line-ink)}
.facts dt{font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 36;font-size:1.2rem}
.facts dd{margin:0;color:var(--on-ink-muted)}
@media (min-width:1000px){.facts div{grid-template-columns:11rem 1fr;text-align:left;align-items:baseline;gap:var(--space-5)}}

/* the job ticket: price my wash */
.price-grid{display:grid;gap:var(--space-6)}
.steps{display:grid;gap:var(--space-6)}
.step{border:0;padding:0;display:grid;gap:var(--space-3);justify-items:center;text-align:center}
.step legend{font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 36;font-size:1.3rem;margin-bottom:var(--space-3);padding:0;width:100%;text-align:center}
.opts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 20px;border-radius:var(--r-pill);
  background:var(--wash);border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent);font-weight:600;transition:background 200ms,border-color 200ms,transform 200ms}
.opt input:checked + span{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.opt input:focus-visible + span{outline:3px solid var(--water-ink);outline-offset:3px}
.opt input:active + span{transform:scale(0.97)}
.sel{min-height:52px;padding:12px 44px 12px 18px;border-radius:var(--r-pill);border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent);
  background:var(--wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221a1a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/18px;
  font:600 1rem var(--text);color:var(--ink);appearance:none;-webkit-appearance:none;text-align:center;min-width:16rem}
.quote{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--ink);color:var(--on-ink);padding:var(--space-6) var(--space-5);
  display:grid;gap:var(--space-4);justify-items:center;text-align:center;isolation:isolate}
.quote .water{position:absolute;left:-10%;right:-10%;bottom:0;height:var(--fill,0%);z-index:-1;transition:height 900ms var(--ease-expressive);
  background:linear-gradient(to bottom,rgba(3,200,228,0.32),rgba(3,200,228,0.12))}
.quote .water::before{content:"";position:absolute;left:0;right:0;top:-14px;height:16px;
  background:radial-gradient(14px 10px at 14px 16px,rgba(3,200,228,0.32) 98%,transparent) 0 0/28px 16px repeat-x;animation:wave 3s linear infinite}
@keyframes wave{to{background-position:28px 0}}
.quote::before,.quote::after{content:"";position:absolute;top:104px;width:26px;height:26px;border-radius:50%;background:var(--mist);z-index:1}
.quote::before{left:-13px}.quote::after{right:-13px}
.tk-head{width:calc(100% + 2*var(--space-5));margin:calc(-1*var(--space-6)) calc(-1*var(--space-5)) 0;padding:var(--space-5) var(--space-5) var(--space-5);
  border-bottom:2px dashed rgba(245,248,247,0.22);display:grid;gap:2px;justify-items:center;min-height:117px;align-content:center}
.tk-brand{font-size:0.8rem;letter-spacing:0.04em;color:var(--water)}
.quote h3{font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 72;font-size:1.7rem;line-height:1}
.quote ul{list-style:none;padding:0;display:grid;gap:0;width:100%;max-width:22rem;text-align:left}
.quote li{display:flex;justify-content:space-between;gap:var(--space-4);padding:10px 0;border-bottom:1px solid rgba(245,248,247,0.12)}
.quote li span{color:var(--on-ink-muted)}
.quote li b{font-weight:600;text-align:right}
.quote .amount{font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 144;font-size:clamp(2.2rem,1.8rem + 2vw,3.2rem);line-height:1}
.quote .wait{font-size:0.9rem;color:var(--on-ink-muted);max-width:30ch}
.quote .pending{display:inline-block;margin-top:2px;padding:6px 12px;border-radius:var(--r-pill);border:1px dashed rgba(245,248,247,0.45);font-size:0.82rem}
.quote .acts .btn{min-width:12rem}
.ticket-wrap{position:relative}
.ticket-mascot{display:none}
#price{position:relative;overflow:hidden}
#price .shell{position:relative;z-index:2}
@media (min-width:1000px){
  .ticket-mascot{display:block;--m:118px;right:-44px;top:-196px;z-index:3}
  .ticket-wrap{position:sticky;top:calc(var(--bar-h) + 150px)}
  .price-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:clamp(2rem,5vw,5rem)}
  .quote{position:relative}
}
#price .shell{pointer-events:none}
#price .shell :is(a,button,label,input,select){pointer-events:auto}

/* questions */
.faq{max-width:48rem;margin-inline:auto;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--space-4);min-height:64px;padding:var(--space-4) var(--space-2);
  font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 36;font-size:clamp(1.08rem,1rem + 0.35vw,1.3rem);text-align:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex:0 0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform 250ms}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq .ans{padding:0 var(--space-4) var(--space-5);color:var(--ink-muted);text-align:center;max-width:56ch;margin-inline:auto}

/* the estimate form */
.est form{max-width:40rem;margin-inline:auto;display:grid;gap:var(--space-5);text-align:center}
.est label{display:grid;gap:var(--space-2);font-weight:600}
.est input,.est textarea,.est select{width:100%;padding:12px var(--space-4);min-height:52px;border:1px solid #4a3f3d;border-radius:var(--r-sm);
  background:var(--ink-2);color:var(--on-ink);font:inherit;text-align:center}
.est select{appearance:none;-webkit-appearance:none}
.est textarea{resize:vertical}
.est .two{display:grid;gap:var(--space-5)}
@media (min-width:700px){.est .two{grid-template-columns:1fr 1fr}}
.est fieldset{border:0;padding:0;display:grid;gap:var(--space-3);justify-items:center}
.est legend{font-weight:600;margin-bottom:var(--space-3);width:100%;text-align:center}
.est .opt span{background:transparent;color:var(--on-ink);border-color:#5a4f4d}
.est .opt input:checked + span{background:var(--water);color:var(--ink);border-color:var(--water)}
.est .opt input:focus-visible + span{outline-color:var(--water)}
.est .hint{font-size:0.88rem;color:var(--on-ink-muted)}
.cf-turnstile{width:0;height:0;overflow:hidden}
.est .send{justify-self:center;min-width:14rem}
.est .send[disabled]{opacity:0.6;cursor:progress}
.form-note{min-height:1.5em;margin:0;color:var(--on-ink-muted)}
.form-fallback{margin:0;color:var(--on-ink)}
.form-fallback a{color:var(--water);font-weight:600}

/* the alert moment (notification law; restyled in this build's tokens) */
#alertMoment{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:color-mix(in srgb,var(--wash) 96%,transparent);backdrop-filter:blur(14px);
  padding:calc(var(--space-5) + env(safe-area-inset-top)) var(--edge) calc(var(--space-5) + env(safe-area-inset-bottom))}
#alertMoment.on{display:flex}
#alertMoment.on > *{opacity:0;transform:translateY(24px);animation:rise 550ms var(--ease-expressive) forwards}
#alertMoment.on > *:nth-child(2){animation-delay:80ms}
#alertMoment.on > *:nth-child(3){animation-delay:160ms}
#alertMoment.on > *:nth-child(4){animation-delay:240ms}
#alertMoment .am-mark{height:56px;width:56px;margin-bottom:var(--space-5);border-radius:14px}
#alertMoment .am-title{font-family:var(--display);font-size:clamp(1.9rem,7vw,3.05rem);font-weight:700;line-height:1.05;max-width:16ch;margin-inline:auto;text-wrap:balance}
#alertMoment .am-body{margin-top:var(--space-4);color:var(--ink-muted);max-width:var(--measure);margin-inline:auto;font-size:1.125rem}
#alertMoment .am-acts{margin-top:var(--space-6);display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}
#alertMoment .am-go{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 28px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font-weight:600;text-decoration:none}
#alertMoment .am-close{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 28px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--wash-deep);color:var(--ink);font:600 1rem var(--text);cursor:pointer}
/* the install offer: phones and tablets only, centered under the estimate form */
#installBtn{display:none}
@media (max-width:999px) and (pointer:coarse){
  #installBtn.offer{display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;max-width:100%;min-height:48px;margin:var(--space-6) auto 0;
    padding:10px 22px;border:2px solid var(--on-ink);border-radius:var(--r-pill);background:transparent;color:var(--on-ink);font:600 1rem/1.25 var(--text);text-align:center;cursor:pointer}
  #installBtn svg{width:22px;height:22px;flex:none}
  #installBtn .i-share,#installBtn.hint .i-add{display:none}
  #installBtn.hint .i-share{display:block}
  #installBtn.hint{font-size:0.92rem;white-space:nowrap}
}

/* THE PAGE GETS WASHED: each section arrives under a film of mildew and the wash line,
   held just below the middle of the screen, clears it as you read. Once washed, it stays clean.
   site.js turns it on (grime-on) and moves the line; reduced motion and no script stay clean. */
.grime{position:relative;isolation:isolate;overflow:clip;--front:-400px}
.grime-on .grime::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0.55;
  background:url(/assets/img/grime.webp) 0 0/512px 512px;
  -webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--front) - 160px),#000 calc(var(--front) + 70px));
  mask-image:linear-gradient(to bottom,transparent calc(var(--front) - 160px),#000 calc(var(--front) + 70px))}
.grime-on .grime::after{content:"";position:absolute;left:0;right:0;top:calc(var(--front) - 150px);height:220px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(214,246,252,0.55) 62%,rgba(255,255,255,0.9) 80%,rgba(255,255,255,0));mix-blend-mode:normal}
.grime-on .grime.washed::before,.grime-on .grime.washed::after{display:none}

/* a glint passes over the headline once, like water catching the light */
.sheen{--c:var(--ink);--glint:#7fe6f5;background:linear-gradient(105deg,var(--c) 0 40%,var(--glint) 50%,var(--c) 60% 100%) 115% 0/260% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:glint 1.5s 1.3s var(--ease-expressive) forwards}
@keyframes glint{to{background-position:-15% 0}}

/* the word that gets washed out of a headline */
.strike{position:relative;display:inline-block;color:rgb(34 26 26 / calc(1 - var(--w,0) * 0.6))}
.strike::after{content:"";position:absolute;left:-3%;top:54%;height:0.1em;width:calc(var(--w,0) * 106%);border-radius:6px;
  background:linear-gradient(90deg,var(--water),#7fe6f5);box-shadow:0 0 18px rgba(3,200,228,0.6)}
@media (prefers-reduced-motion:reduce){.fb-ring,.fb-drip{animation:none;display:none}.fb-badge{transition:none}.sheen{animation:none;background:none;color:var(--c)}.strike{--w:1}.stk.pop{animation:none}.bubbles{display:none}.mascot.wave{animation:none}.awards img{transition:none}.handset{animation:none}.bar .bead,.knob .rim{transition:none}}

@media (prefers-reduced-motion:reduce){
  .rise,.rise.s1,.rise.s2,.rise.s3,.rise.s4{animation:none;animation-delay:0s;opacity:1;transform:none}
  .reveal{opacity:1;transform:none;transition:none}
  .scrub .spray{animation:none;display:none}
  .btn{transition:none}
  #alertMoment.on > *,#alertMoment.on > *:nth-child(2),#alertMoment.on > *:nth-child(3),#alertMoment.on > *:nth-child(4){animation:none;animation-delay:0s;opacity:1;transform:none}
}