/* Pop's Plumbing and Drain Cleaning - styles (no build step) */
:root{
  --orange:#F26B1D;      /* main brand orange: buttons, accents, large text */
  --orange-dk:#C4500E;   /* small text on white; bands with white text */
  --orange-xdk:#9E3F09;  /* hover */
  --orange-ink:#B04609;  /* text on light tints: 5.2:1 on #FFF4EC, 4.7:1 on #FFE6D5 (WCAG AA) */
  --tint:#FFF4EC;        /* light orange wash */
  --tint-2:#FFE6D5;
  --ink:#2B2B2B;         /* charcoal: body text only */
  --muted:#555;
  --line:#F1D7C5;
  --white:#fff;
  --radius:12px;
  --shadow:0 2px 10px rgba(60,30,10,.08);
  --max:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--white);padding-bottom:170px}
@media (min-width:860px){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange-dk)}
a:hover{color:var(--orange-xdk)}
:focus-visible{outline:3px solid var(--orange-dk);outline-offset:2px}
h1,h2,h3{line-height:1.2;margin:0 0 .6em;color:var(--ink)}
h1{font-size:clamp(1.9rem,5.2vw,3rem);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3.6vw,2.1rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
ul{padding-left:1.2em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--ink);padding:10px 14px;z-index:100}
.skip:focus{left:10px;top:10px}
.accent{color:var(--orange)}
.eyebrow{display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-dk);margin-bottom:.5em}
.lead{font-size:1.15rem;color:var(--muted)}

/* Announcement banner */
.announce{background:var(--orange-dk);color:var(--white);text-align:center;font-size:.95rem;padding:8px 16px;font-weight:600}
.announce strong{font-weight:800}
.announce a{color:var(--white)}

/* Header */
.site-header{background:var(--white);border-bottom:4px solid var(--orange);position:relative;z-index:20}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.brand img{width:52px;height:52px;flex:none}
.brand-name{font-weight:800;line-height:1.1;font-size:1rem}
.brand-name span{display:block;font-size:.75rem;font-weight:700;color:var(--orange-dk);letter-spacing:.02em}
.hdr-cta{display:flex;align-items:center;gap:16px}
.hdr-phone{display:none;text-align:right;text-decoration:none;color:var(--ink);line-height:1.15}
.hdr-phone small{display:block;font-size:.8rem;font-weight:700;color:var(--orange-dk);text-transform:uppercase;letter-spacing:.06em}
.hdr-phone b{font-size:1.7rem;font-weight:800;color:var(--ink)}
.hdr-phone .roc{display:block;font-size:.78rem;color:var(--muted);font-weight:600}
.hdr-btns{display:flex;gap:8px}
@media (min-width:860px){.hdr-phone{display:block}.brand img{width:64px;height:64px}.brand-name{font-size:1.2rem}.brand-name span{font-size:.8rem}}
.nav{border-top:1px solid var(--line);background:var(--white)}
.nav ul{list-style:none;padding:0 12px;display:flex;gap:2px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;max-width:var(--max);margin:0 auto}
.nav a{display:block;padding:12px;text-decoration:none;color:var(--ink);font-weight:650;font-size:.98rem;border-bottom:3px solid transparent}
.nav a:hover{color:var(--orange-dk)}
.nav a[aria-current="page"]{color:var(--orange-dk);border-bottom-color:var(--orange)}
@media (min-width:860px){.nav ul{justify-content:center}}

/* Buttons (white text on #F26B1D is used only at >=19px bold = WCAG "large text") */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;font-weight:800;font-size:1.2rem;text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1.1;transition:background .15s,color .15s;font-family:inherit}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--orange);color:var(--white)}
.btn-primary:hover{background:var(--orange-dk);color:var(--white)}
.btn-outline{background:var(--white);color:var(--orange-dk);border-color:var(--orange)}
.btn-outline:hover{background:var(--tint);color:var(--orange-xdk)}
.btn-white{background:var(--white);color:var(--orange-dk)}
.btn-white:hover{background:var(--tint);color:var(--orange-xdk)}
.btn-ghost-white{background:transparent;color:var(--white);border-color:var(--white)}
.btn-ghost-white:hover{background:rgba(255,255,255,.14);color:var(--white)}
.btn-sm{min-height:44px;padding:10px 16px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:1.2em 0 .5em}
.roc-line{font-size:.9rem;font-weight:600;color:var(--muted);margin:.4em 0 0}
.roc-line b{color:var(--orange-dk)}

/* Hero */
.hero{background:linear-gradient(180deg,var(--tint) 0%,var(--white) 100%);padding:34px 0 30px}
.hero-grid{display:grid;gap:28px;align-items:center}
@media (min-width:860px){.hero-grid{grid-template-columns:1.25fr .75fr}.hero{padding:56px 0 48px}}
.hero p.lead{color:var(--ink)}
.hero-checks{list-style:none;padding:0;margin:1em 0 0;display:grid;gap:6px}
.hero-checks li{display:flex;gap:8px;align-items:flex-start;font-weight:600}
.hero-checks svg{width:22px;height:22px;flex:none;color:var(--orange);margin-top:2px}
.hero-photo{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:4px solid var(--white);max-width:400px;justify-self:center}
.hero-photo img{aspect-ratio:3/4;object-fit:cover;width:100%}
.hero-photo figcaption{font-size:.85rem;padding:8px 12px;background:var(--white);color:var(--muted)}
.page-hero{background:linear-gradient(180deg,var(--tint) 0%,var(--white) 100%);padding:28px 0 24px;border-bottom:1px solid var(--line)}
.page-hero .lead{max-width:64ch;color:var(--ink)}
.crumbs{font-size:.9rem;margin-bottom:.8em}

/* Trust strip */
.trust{background:var(--white);padding:18px 0;border-bottom:1px solid var(--line)}
.trust ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:760px){.trust ul{grid-template-columns:repeat(5,1fr)}}
.trust li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);font-weight:750;font-size:.98rem;line-height:1.25}
.trust li:last-child{grid-column:1/-1}
@media (min-width:760px){.trust li:last-child{grid-column:auto}}
.trust svg{width:30px;height:30px;color:var(--orange)}
.trust small{display:block;font-weight:600;color:var(--muted);font-size:.82rem}

/* Sections */
.section{padding:48px 0}
.section.alt{background:var(--tint)}
.section-head{max-width:740px;margin-bottom:24px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.two-col{display:grid;gap:28px}
@media (min-width:860px){.two-col{grid-template-columns:1fr 1fr;align-items:start}}
.checklist{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:10px}
.checklist li{position:relative;padding-left:32px}
.checklist li::before{content:"";position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.problem-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
@media (min-width:700px){.problem-list{grid-template-columns:1fr 1fr}}
.problem-list li{background:var(--white);border-left:5px solid var(--orange);border-radius:8px;padding:12px 14px;box-shadow:var(--shadow);font-weight:600}

/* Cards */
.grid{display:grid;gap:18px}
@media (min-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--white);border:1px solid var(--line);border-top:5px solid var(--orange);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card h3{margin-bottom:.4em}
.card p{color:var(--muted);flex:1}
.card .more{font-weight:750;text-decoration:none}
.card .more:hover{text-decoration:underline}
.icon-circle{width:48px;height:48px;border-radius:50%;background:var(--tint);color:var(--orange);display:grid;place-items:center;margin-bottom:10px}
.icon-circle svg{width:26px;height:26px}

/* Specials (coupon cards) */
.specials{display:grid;gap:18px}
@media (min-width:640px){.specials{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.specials{grid-template-columns:repeat(3,1fr)}}
.coupon{position:relative;background:var(--white);border:3px dashed var(--orange);border-radius:16px;padding:22px 20px 18px;text-align:center;display:flex;flex-direction:column;align-items:center}
.coupon-tag{display:inline-block;background:var(--orange-dk);color:var(--white);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px;margin-bottom:10px}
.coupon-amt{font-size:2.6rem;line-height:1;font-weight:900;color:var(--orange-ink);margin:0 0 6px}
.coupon-amt small{font-size:1.2rem;font-weight:800}
.coupon h3{margin:.2em 0 .5em}
.coupon p{color:var(--muted);margin-bottom:.6em}
.coupon .fine{font-size:.82rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px;margin-top:auto}
.coupon .btn{margin:8px 0 6px}
.coupon .roc-line{margin:0 0 8px}
.coupon.always{background:var(--tint)}

/* Steps */
.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:18px}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px 20px;box-shadow:var(--shadow)}
.steps li::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--orange);color:var(--white);font-weight:800;font-size:1.3rem;margin-bottom:10px}
.steps h3{margin-bottom:.3em}
.steps p{margin:0;color:var(--muted)}

/* Gallery */
.gallery{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{margin:0;background:var(--white);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.gallery img{aspect-ratio:3/4;object-fit:cover;width:100%}
.gallery figcaption{font-size:.88rem;padding:8px 10px;color:var(--ink);font-weight:600}

/* Areas */
.area-list{list-style:none;padding:0;margin:0;display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){.area-list{grid-template-columns:repeat(4,1fr)}}
.area-list a{display:flex;align-items:center;gap:8px;padding:14px;border-radius:10px;background:var(--white);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;box-shadow:var(--shadow)}
.area-list a:hover{border-color:var(--orange);color:var(--orange-dk)}
.area-list svg{width:20px;height:20px;color:var(--orange);flex:none}

/* Recommendation links */
.recs{display:grid;gap:16px}
@media (min-width:700px){.recs{grid-template-columns:1fr 1fr}}
.rec{display:flex;gap:14px;align-items:center;padding:20px;border-radius:var(--radius);border:2px solid var(--orange);background:var(--white);text-decoration:none;color:var(--ink)}
.rec:hover{background:var(--tint);color:var(--ink)}
.rec svg{width:40px;height:40px;flex:none;color:var(--orange-dk)}
.rec b{display:block;font-size:1.1rem}
.rec span{color:var(--muted);font-size:.95rem}

/* CTA band */
.cta-band{background:var(--orange-dk);color:var(--white);padding:42px 0;text-align:center}
.cta-band h2{color:var(--white)}
.cta-band p{color:var(--white);max-width:62ch;margin-left:auto;margin-right:auto}
.cta-band .cta-row{justify-content:center}
.cta-band .roc-line,.cta-band .roc-line b{color:var(--white)}
.cta-band a:not(.btn){color:var(--white)}
.cta-inline{margin-top:22px;padding:18px 20px;border-radius:var(--radius);background:var(--white);border:2px solid var(--orange);display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between}
.cta-inline p{margin:0;font-weight:700}
.cta-inline .roc-line{margin:0;flex-basis:100%}

/* Service + area detail sections */
.svc-nav{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.svc-nav a{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--orange);text-decoration:none;font-weight:650;color:var(--orange-dk);background:var(--white);font-size:.95rem}
.svc-nav a:hover{background:var(--tint)}
.detail{padding:44px 0;border-bottom:1px solid var(--line);scroll-margin-top:12px}
.detail.alt{background:var(--tint)}
.detail-grid{display:grid;gap:24px}
@media (min-width:860px){.detail-grid{grid-template-columns:1fr 1fr}.detail-grid.has-photo{grid-template-columns:1.45fr .55fr}}
.detail h3{margin-top:.4em}
.detail-photo{margin:0;border-radius:var(--radius);overflow:hidden;border:4px solid var(--white);box-shadow:var(--shadow);max-width:340px;justify-self:center;align-self:start}
.detail-photo img{aspect-ratio:3/4;object-fit:cover;width:100%}
.detail-photo figcaption{font-size:.85rem;padding:8px 10px;background:var(--white);color:var(--muted)}

/* FAQ */
.faq{max-width:860px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:0 16px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:750;padding:14px 0}
.faq details[open] summary{color:var(--orange-dk)}

/* Tips */
.tip{padding:40px 0;border-bottom:1px solid var(--line);scroll-margin-top:12px}
.tip.alt{background:var(--tint)}
.tip-num{display:inline-block;background:var(--orange-dk);color:var(--white);font-weight:800;border-radius:999px;padding:2px 12px;font-size:.9rem;margin-bottom:8px}
.note{background:var(--white);border-left:5px solid var(--orange);padding:12px 16px;border-radius:8px;margin:1em 0}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;margin:1em 0;background:var(--white)}
th,td{border:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
th{background:var(--tint-2)}
.sources{font-size:.9rem}
.sources li{margin-bottom:4px;word-break:break-word}
.prose{max-width:76ch}

/* Contact */
.contact-cards{display:grid;gap:16px}
@media (min-width:700px){.contact-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.contact-cards{grid-template-columns:repeat(4,1fr)}}
.contact-card{background:var(--white);border:1px solid var(--line);border-top:5px solid var(--orange);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.contact-card h2{font-size:1.15rem;margin-bottom:.3em}
.contact-card .big{font-size:1.35rem;font-weight:800;color:var(--ink);text-decoration:none;word-break:break-word}
.contact-card .big.email{font-size:1rem;color:var(--orange-dk);text-decoration:underline}
.contact-card .btn{margin-top:10px}
form.contact-form{display:grid;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.contact-form label{font-weight:700;display:block;margin-bottom:4px}
.contact-form input,.contact-form textarea{width:100%;font:inherit;padding:12px;border:2px solid #B9A090;border-radius:8px;background:var(--white);color:var(--ink)}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--orange-dk);outline:none;box-shadow:0 0 0 3px rgba(242,107,29,.3)}
.contact-form .hint{font-size:.9rem;color:var(--muted);margin:0}
.form-status{font-weight:700;color:var(--orange-dk);margin:0}

/* Footer */
.site-footer{background:var(--tint);border-top:5px solid var(--orange);padding:40px 0 24px;font-size:.98rem}
.ftr-grid{display:grid;gap:26px}
@media (min-width:700px){.ftr-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.ftr-grid{grid-template-columns:1.3fr 1fr 1fr 1.1fr}}
.site-footer h2{font-size:1rem;margin-bottom:.6em;color:var(--orange-dk);text-transform:uppercase;letter-spacing:.06em}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.site-footer a{color:var(--ink)}
.site-footer a:hover{color:var(--orange-dk)}
.ftr-brand{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-weight:800}
.ftr-brand img{width:56px;height:56px}
.ftr-phone{font-size:1.45rem;font-weight:800;text-decoration:none}
.ftr-roc{display:inline-block;margin-top:6px;font-weight:800;color:var(--orange-dk);background:var(--white);border:1px solid var(--line);padding:4px 10px;border-radius:8px}
.ftr-bottom{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}

/* Sticky mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--orange-dk);padding:8px 12px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 14px rgba(0,0,0,.18)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--white);color:var(--orange-dk);font-weight:800;font-size:1.2rem;min-height:48px;border-radius:999px;text-decoration:none}
.callbar a svg{width:22px;height:22px}
.callbar small{display:block;text-align:center;color:var(--white);font-size:.75rem;font-weight:600;margin-top:3px}
@media (min-width:860px){.callbar{display:none}}

.notfound{text-align:center;padding:60px 0}

/* Booking flow */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.booking{background:var(--white);border:2px solid var(--orange);border-radius:16px;padding:20px;box-shadow:var(--shadow);max-width:860px;margin:0 auto}
@media (min-width:700px){.booking{padding:28px}}
.bk-notice{background:var(--tint);border-left:6px solid var(--orange-dk);padding:12px 16px;border-radius:8px;margin-bottom:16px;font-weight:600}
.bk-progress{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;counter-reset:bk}
.bk-progress li{counter-increment:bk;text-align:center;font-size:.85rem;font-weight:700;color:var(--muted);padding-top:6px;border-top:5px solid var(--line)}
.bk-progress li::before{content:counter(bk) ". "}
.bk-progress li.done{border-top-color:var(--orange);color:var(--ink)}
.bk-progress li.current{border-top-color:var(--orange-dk);color:var(--orange-dk)}
.bk-step h2{font-size:1.4rem;outline:none}
.bk-step fieldset{border:0;padding:0;margin:0 0 14px;min-width:0}
.bk-step legend{font-weight:800;margin-bottom:8px;padding:0}
.bk-options{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:560px){.bk-options{grid-template-columns:1fr 1fr}}
.bk-option{display:flex;align-items:center;gap:10px;padding:14px;border:2px solid var(--line);border-radius:10px;cursor:pointer;font-weight:700;min-height:52px;background:var(--white)}
.bk-option:hover{border-color:var(--orange)}
.bk-option input{width:20px;height:20px;accent-color:var(--orange-dk);flex:none;margin:0}
.bk-option:has(input:checked){border-color:var(--orange-dk);background:var(--tint)}
.bk-option:has(input:focus-visible),.bk-date:has(input:focus-visible){outline:3px solid var(--orange-dk);outline-offset:2px}
.bk-dates{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.bk-date{flex:none;scroll-snap-align:start;cursor:pointer;position:relative}
.bk-date input{position:absolute;opacity:0;width:1px;height:1px}
.bk-date span{display:flex;flex-direction:column;align-items:center;justify-content:center;width:72px;padding:8px 4px;border:2px solid var(--line);border-radius:12px;background:var(--white);line-height:1.15}
.bk-date span b{font-size:1.5rem}
.bk-date small{font-size:.78rem;font-weight:700;color:var(--muted)}
.bk-date:hover span{border-color:var(--orange)}
.bk-date input:checked+span{background:var(--orange-dk);border-color:var(--orange-dk);color:var(--white)}
.bk-date input:checked+span small{color:var(--white)}
.bk-hint{color:var(--muted);margin:0}
.bk-emergency{background:var(--tint);border-radius:10px;padding:12px 14px;font-weight:600;margin:6px 0 14px}
.bk-fields{display:grid;gap:14px}
@media (min-width:600px){.bk-fields{grid-template-columns:1fr 1fr}.bk-fields .full{grid-column:1/-1}}
.bk-fields label{font-weight:700;display:block;margin-bottom:4px}
.bk-fields label .opt{font-weight:500;color:var(--muted)}
.bk-fields input,.bk-fields textarea{width:100%;font:inherit;padding:12px;border:2px solid #B9A090;border-radius:8px;background:var(--white);color:var(--ink)}
.bk-fields input:focus,.bk-fields textarea:focus{border-color:var(--orange-dk);outline:none;box-shadow:0 0 0 3px rgba(242,107,29,.3)}
.bk-fields [aria-invalid="true"]{border-color:#B00020}
.bk-error{color:#B00020;font-weight:700;min-height:1.2em;margin:8px 0}
.bk-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-top:10px}
.bk-nav .btn{font-size:1.2rem}
.bk-review{margin:0 0 14px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.bk-review div{display:grid;grid-template-columns:1fr;gap:2px;padding:10px 14px;border-bottom:1px solid var(--line)}
.bk-review div:last-child{border-bottom:0}
@media (min-width:600px){.bk-review div{grid-template-columns:170px 1fr}}
.bk-review dt{font-weight:800}
.bk-review dd{margin:0;word-break:break-word}
.bk-edit{background:none;border:0;color:var(--orange-dk);text-decoration:underline;font:inherit;font-size:.9rem;cursor:pointer;padding:0 4px}
.bk-confirm{text-align:center}
.bk-confirm .big-check{width:72px;height:72px;border-radius:50%;background:var(--orange);color:var(--white);display:grid;place-items:center;margin:0 auto 12px}
.bk-confirm .big-check svg{width:40px;height:40px}
.hp{position:absolute!important;left:-9999px!important}

/* Floating helper (logo avatar + speech bubble + tap menu) */
.helper{position:fixed;right:16px;bottom:96px;z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
@media (min-width:860px){.helper{bottom:22px}}
.helper-bubble{background:var(--white);border:2px solid var(--orange);border-radius:14px 14px 4px 14px;padding:8px 12px;font-weight:700;font-size:.92rem;box-shadow:var(--shadow);max-width:220px}
.helper-btn{width:64px;height:64px;border-radius:50%;border:3px solid var(--orange);background:var(--white);padding:0;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2);overflow:hidden}
.helper-btn img{width:100%;height:100%}
.helper-menu{background:var(--white);border:2px solid var(--orange);border-radius:14px;box-shadow:var(--shadow);padding:8px;display:grid;gap:6px;min-width:220px}
.helper-menu a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;text-decoration:none;font-weight:800;color:var(--orange-dk)}
.helper-menu a:hover{background:var(--tint)}
.helper-menu a svg{width:20px;height:20px}
.helper-menu small{display:block;text-align:center;color:var(--muted);font-size:.75rem;font-weight:600;padding:2px 4px 4px}
.helper[data-open="true"] .helper-bubble{display:none}

/* Pricing tool */
.price-tool{background:var(--white);border:2px solid var(--orange);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
@media (min-width:700px){.price-tool{padding:26px}}
.price-tool form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.price-tool label{font-weight:800;display:block;margin-bottom:4px;width:100%}
.price-tool input{flex:1 1 220px;font:inherit;font-size:1.1rem;padding:12px 14px;border:2px solid #B9A090;border-radius:999px;min-height:50px}
.price-tool input:focus{border-color:var(--orange-dk);outline:none;box-shadow:0 0 0 3px rgba(242,107,29,.3)}
.price-error{color:#B00020;font-weight:700;margin:8px 0 0;min-height:1em}
.price-results{margin-top:18px;outline:none}
.price-results h3{font-size:1.25rem}
.price-cards{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px}
@media (min-width:640px){.price-cards{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.price-cards{grid-template-columns:1fr 1fr 1fr}}
.price-cards a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-left:5px solid var(--orange);border-radius:10px;text-decoration:none;color:var(--ink);background:var(--white);height:100%}
.price-cards a:hover{background:var(--tint)}
.price-cards span{font-weight:650}
.price-cards b{color:var(--orange-dk);white-space:nowrap}
.price-note{background:var(--tint);border-radius:10px;padding:12px 14px;font-weight:700}
.price-placeholder{background:#FFF0B3;border:2px dashed #8A6D00;border-radius:10px;padding:8px 12px;color:#3D3000}
.price-outside{background:var(--tint);border-radius:12px;padding:16px}
.price-cards b small{display:block;font-size:.75rem;font-weight:600;color:var(--muted);text-align:right}

/* Avatar helper (overrides) */
.helper-bubble{margin:0;cursor:pointer;position:relative}
.helper-bubble::after{content:"";position:absolute;right:26px;bottom:-9px;border:8px solid transparent;border-top-color:var(--orange);border-bottom:0}
.helper-row{display:flex;align-items:flex-end;gap:6px}
.helper-btn{width:72px;height:72px;background:var(--tint)}
.helper-btn .avatar{width:100%;height:100%;display:block}
.helper-mute{width:34px;height:34px;border-radius:50%;border:2px solid var(--orange);background:var(--white);color:var(--orange-dk);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:var(--shadow)}
.helper-mute svg{width:18px;height:18px}
.helper-mute .spk-off{display:none}
.helper.is-muted .helper-mute .spk-on{display:none}
.helper.is-muted .helper-mute .spk-off{display:block}
.avatar .mouth{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
 .helper.is-talking .avatar .mouth{animation:pops-talk .18s ease-in-out infinite alternate}
 .helper.is-talking .helper-bubble{animation:pops-pulse 1s ease-in-out infinite}
}
@keyframes pops-talk{from{transform:scaleY(.35)}to{transform:scaleY(1.9)}}
@keyframes pops-pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,107,29,.45)}50%{box-shadow:0 0 0 7px rgba(242,107,29,0)}}
@media (max-width:859px){.helper-bubble{font-size:.85rem;max-width:180px}.helper-btn{width:62px;height:62px}}

/* Videos */
.videos{display:grid;gap:22px;grid-template-columns:1fr;max-width:820px;margin:0 auto}
@media (min-width:640px){.videos{grid-template-columns:1fr 1fr}}
.video-card{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);max-width:380px;justify-self:center;width:100%}
.video-card video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:var(--tint)}
.video-card figcaption{padding:10px 14px;font-size:.95rem}
.center-text{text-align:center;margin-top:18px}
.music-credit{text-align:center;font-size:.8rem;color:var(--muted)}
.gallery-h{margin-top:30px;text-align:center}

/* fixes */
[hidden]{display:none!important}
.coupon .coupon-amt{color:var(--orange-ink);margin:0 0 6px}
.two-col>*,.detail-grid>*,.hero-grid>*{min-width:0}
.brand picture{flex:none}
@media (max-width:599px){
 .brand img{width:46px;height:46px}
 .brand-name{font-size:.95rem}
 .brand-name span{display:none}
 .hdr-btns .btn{font-size:1rem;padding:8px 14px;min-height:44px}
 .hdr-btns .btn-primary{background:var(--orange-dk)}
 .hdr-btns .btn .lbl-long{display:none}
}
@media (min-width:600px){.hdr-btns .btn .lbl-short{display:none}}
body{overflow-wrap:break-word}a[href^="mailto:"]{overflow-wrap:anywhere}
@media (min-width:860px){.detail-grid{grid-template-columns:1fr}.detail-grid.has-photo{grid-template-columns:1.45fr .55fr}}

/* Price note always wraps; helper stays compact and out of the content column */
.price-note{white-space:normal;overflow-wrap:anywhere;word-break:normal;max-width:100%;box-sizing:border-box}
.price-result,.price-results,[class*="price-out"]{min-width:0;max-width:100%}
.helper-row{position:relative;display:block}
.helper-mute{position:absolute;left:-8px;top:-8px;width:28px;height:28px;z-index:1}
.helper-mute svg{width:15px;height:15px}
@media (min-width:860px){.helper{right:12px;bottom:18px}.helper-btn{width:60px;height:60px}.helper-bubble{max-width:200px}}

/* Specials tags in price results */
.special-tag{display:inline-block;margin:4px 0 0;background:var(--orange-dk);color:#fff;font-style:normal;font-weight:800;font-size:.72rem;letter-spacing:.02em;line-height:1.2;padding:3px 8px;border-radius:999px;white-space:nowrap}
.price-specials{border:2px dashed var(--orange);border-radius:10px;padding:10px 14px;margin:0 0 10px;background:#fff}
.price-specials b{color:var(--orange-dk)}
.price-specials a{font-weight:800;color:var(--orange-dk)}

/* helper: only the avatar, mute button, bubble and menu take taps; the empty box around them lets taps through to page buttons */
.helper{pointer-events:none}
.helper > *{pointer-events:auto}

/* contact fallback (js/contact-fallback.js): shown on desktops/laptops after a Call/Text click; on phones the script binds nothing, tel:/sms: go straight to the native app */
.cfb-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(43,43,43,.55)}
.cfb-dialog{position:relative;width:100%;max-width:420px;background:var(--white);border-top:6px solid var(--orange);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.3);padding:24px 22px 18px;text-align:center}
.cfb-dialog:focus{outline:none}
.cfb-title{font-size:1.3rem;margin:0 0 .4em;color:var(--ink)}
.cfb-num{font-size:2.3rem;line-height:1.1;font-weight:900;letter-spacing:.01em;color:var(--orange);margin:0 0 16px;user-select:all;-webkit-user-select:all}
.cfb-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cfb-actions .btn{font-size:1.05rem;min-width:140px}
.cfb-line{font-size:.88rem;font-weight:600;color:var(--muted);margin:14px 0 0}
.cfb-line span{white-space:nowrap}

/* phones: header Call / Text / Book get their own full-width row under the logo; main nav wraps instead of side-scrolling */
@media (max-width:599px){
 .hdr{flex-wrap:wrap;row-gap:8px}
 .hdr-cta{flex:1 1 100%}
 .hdr-btns{flex:1 1 100%}
 .hdr-btns .btn{flex:1 1 0;min-width:0;padding:8px 10px}
}
@media (max-width:859px){
 .nav ul{flex-wrap:wrap;justify-content:center;overflow-x:visible;white-space:normal;padding:2px 8px;row-gap:0}
 .nav a{padding:7px 9px;font-size:.95rem}
}
.hdr-btns .btn{white-space:nowrap}
@media (min-width:600px) and (max-width:719px){.hdr-btns .btn .lbl-long{display:none}.hdr-btns .btn .lbl-short{display:inline}}
/* booking confirmation: in preview mode (#bk-confirm-preview shown) never show the "request is in" wording */
#bk-confirm-preview:not([hidden]) ~ .bk-if-sent,#bk-confirm-preview:not([hidden]) ~ * .bk-if-sent{display:none}
#bk-confirm-preview[hidden] ~ .bk-if-preview,#bk-confirm-preview[hidden] ~ * .bk-if-preview{display:none}

/* thank-you toast (js/contact-fallback.js): desktop only, brief note after a Call (tel:) click (phones get the native dialer only, no toast); top-center so the phone call bar never covers it; above the .cfb-overlay modal (z 1000) so it isn't dimmed */
.thanks-toast{position:fixed;top:calc(14px + env(safe-area-inset-top));left:50%;z-index:1100;transform:translate(-50%,-12px);max-width:calc(100% - 32px);width:max-content;box-sizing:border-box;background:var(--orange);color:var(--white);border:2px solid var(--white);border-radius:999px;padding:12px 24px;font-weight:800;font-size:1.2rem;line-height:1.3;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.thanks-toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .2s ease,visibility 0s}
@media (prefers-reduced-motion:reduce){.thanks-toast,.thanks-toast.is-on{transition:none;transform:translate(-50%,0)}}

/* ===== Quick wins 2026-10-09 (?v=20261009qw) ===== */
/* Contrast (WCAG AA): inside light-tinted areas, the "dark orange" used for text (eyebrows, links, ROC <b>, footer h2s)
   becomes #B04609. White-on-orange bands (announce bar, call bar, CTA band) are not inside these areas and keep #C4500E. */
.hero,.page-hero,.section.alt,.detail.alt,.tip.alt,.site-footer,.coupon.always,.bk-notice,.bk-emergency,.price-note,.price-outside,th,
.bk-option:has(input:checked){--orange-dk:var(--orange-ink)}

/* Booking preview (online booking not connected yet): clear call / text prompt instead of a dead end */
.bk-soon{background:var(--tint);border:2px solid var(--orange);border-radius:14px;padding:18px 16px;text-align:center;margin:0 0 16px}
.bk-soon h2{margin:.1em 0 .35em}
.bk-soon p{margin:.3em 0}
.bk-soon .cta-row{justify-content:center;margin:12px 0 6px}
.bk-soon .btn{min-height:48px;font-size:1.1rem}

/* Contact form status (Formspree / fallback) */
.form-status.ok{color:#1F6B2E}
.form-status a{font-weight:800}

/* Helper: mute button is a 44x44 tap target everywhere (the visible circle stays ~30px; the rest is transparent padding) */
.helper-mute{width:44px;height:44px;left:-16px;top:-16px;border:0;background:transparent;box-shadow:none}
.helper-mute::before{content:"";position:absolute;inset:7px;border-radius:50%;border:2px solid var(--orange);background:var(--white);box-shadow:var(--shadow);z-index:-1}
.helper-mute svg{position:relative;width:16px;height:16px}

/* Helper on small phones (<=400px wide): collapsed to just the avatar, tucked into the right edge and kept
   12px above the sticky call bar (js/helper.js measures the bar into --pops-callbar-h). No speech bubble;
   the mute button only appears while the helper menu is open (the voice only plays after tapping the helper). */
@media (max-width:400px){
 .helper{right:6px;bottom:calc(var(--pops-callbar-h,96px) + 12px);gap:6px}
 .helper-bubble{display:none!important}
 .helper-btn{width:48px;height:48px;border-width:2px}
 .helper-mute{display:none}
 .helper[data-open="true"] .helper-mute{display:grid;left:-52px;top:2px}
 .helper-menu{min-width:200px}
 .callbar small{font-size:.7rem;line-height:1.3;letter-spacing:0}
}
/* large orange headline text on the light hero tint: #DB5A12 = 3.5:1 on #FFF4EC (WCAG AA large text needs 3:1; #F26B1D was 2.8:1) */
.hero .accent,.page-hero .accent,.section.alt .accent{color:#DB5A12}

/* Yelp (2026-10-11): "Find us on Yelp" footer link + "See us on Yelp" badge. Listing link only, no review requests (Yelp policy).
   #D32323 = 4.8:1 on footer tint #FFF4EC and 5.2:1 on white (WCAG AA); hover #A81C1C. Opens in a new tab. */
.yelp-ico{width:1.1em;height:1.1em;flex:none;vertical-align:-.15em;margin-right:.35em}
.site-footer a.yelp-link{color:#D32323;font-weight:700;display:inline-flex;align-items:center;min-height:24px}
.site-footer a.yelp-link:hover{color:#A81C1C}
.yelp-badge-row{margin:1em 0 0}
.yelp-badge{display:inline-flex;align-items:center;gap:.1em;min-height:44px;padding:8px 16px;border:2px solid #D32323;border-radius:999px;background:var(--white);color:#D32323;font-weight:750;font-size:.98rem;text-decoration:none;line-height:1.2}
.yelp-badge:hover{background:#FDECEC;color:#A81C1C;border-color:#A81C1C}
.yelp-badge:focus-visible{outline:3px solid var(--orange-dk);outline-offset:2px}

/* PRV/backflow reel (2026-10-14): 3 video cards; on 2-column layouts the odd last card spans both columns and stays centered. */
@media (min-width:640px){.videos .video-card:last-child:nth-child(odd){grid-column:1/-1}}
/* Book Online card with QR code (2026-10-27): button -> /book/ (redirect to the online request form); QR for desktop visitors */
.book-qr{display:grid;gap:22px;align-items:center;background:var(--white);border:1px solid var(--line);border-top:5px solid var(--orange);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin:28px auto 0;max-width:860px}
.book-qr h2{margin-bottom:.35em}
.book-qr p{margin:.4em 0}
.book-qr-code{margin:0;text-align:center;display:none}
.book-qr-code img{display:block;width:180px;height:180px;margin:0 auto;border:1px solid var(--line);border-radius:8px;background:var(--white)}
.book-qr-code figcaption{font-size:.9rem;font-weight:650;color:var(--muted);margin-top:6px}
@media (min-width:760px){.book-qr{grid-template-columns:1fr auto;padding:26px 30px}.book-qr-code{display:block}}
