/* pw53.css - Purewash location pages. Everything that used to live in the
   embeds' post-pw50 style blocks, in the same cascade order, plus the wash menu
   overrides and the find-us caustics background. Loads AFTER pw50. */
/* ---- find us: small map, content column --------------------------------- */
/* The map is deliberately undersized. 300px doing one job, which is confirming
the shape of the corner you turn into, and the margins carry the section.
Uses the site's own .wrap so the left edge lines up with the section below. */
/* Flat dark band. The photo carry, its veil and the diagonal scrim all went with
the wash menu below it; the section is being relaid out. */
.locstrip { position: relative; padding: 82px 0; background: #0d2731; }
/* It reveals through its inner grid (.frv), so the section-level .srv fade is off. */
.locstrip.srv { opacity: 1; transform: none; }
.locstrip .lsgrid { position: relative; z-index: 2; display: grid; grid-template-columns: auto 300px; gap: 70px; align-items: center; justify-content: space-between; }
.locstrip .lslab { font-family: var(--font-head); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: #9adcff; margin: 0 0 6px; }
.locstrip .lsaddr { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: #fff; margin: 0; text-shadow: 0 1px 22px #081b248c; }
.locstrip .lsmeta { color: #e4f3fcc7; font-size: 0.94rem; line-height: 1.6; margin: 16px 0 0; }
.locstrip .lsgo { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; text-decoration: none; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 0.94rem; border-bottom: 1.5px solid #ffffffa6; padding-bottom: 3px; transition: color .2s ease, border-color .2s ease; }
.locstrip .lsgo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.locstrip .lsgo:hover { color: #9adcff; border-color: #9adcff; }
.locstrip .lsgo:hover svg { transform: translateX(3px); }
/* ll= renders a bare map: no place card, no marker, just a small "Open in Maps"
chip top-left. The iframe is pulled up 54px to crop that chip away and the pin
is offset half that so it lands back on true centre. */
.locstrip .lsmap { position: relative; height: 300px; border-radius: 12px; overflow: hidden; background: #e4ebee; box-shadow: 0 0 0 1px #ffffff4d, 0 30px 56px -24px #000000bf; }
.locstrip .lsmap iframe { position: absolute; left: 0; top: -54px; width: 100%; height: calc(100% + 54px); border: 0; pointer-events: none; }
/* the pin does not pulse: nothing about it is live, so the ring was decoration */
.locstrip .lspin { position: absolute; left: 50%; top: calc(50% + 27px); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #1878b8; box-shadow: 0 0 0 3.5px #fff; pointer-events: none; }
.locstrip.srv .frv { opacity: 0; }
.locstrip.srv.in .frv { animation: pw-rise .65s cubic-bezier(.2,.7,.3,1) both; }
@media (max-width: 900px) {
.locstrip { padding: 58px 0; }
.locstrip .lsgrid { grid-template-columns: 1fr; gap: 34px; }
.locstrip .lsmap { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
.locstrip.srv .frv { opacity: 1 !important; animation: none !important; }
.locstrip .lsgo, .locstrip .lsgo svg, .pillbtn svg:last-child { transition: none; }
}
/* round-3: eyebrows, nav marker, selection, map glass, phone icon */
.eyeb { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.eyeb b { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #1878b8; }
.eyeb i { display: block; width: 44px; height: 2px; background: linear-gradient(90deg, #3fb2ec, rgba(63,178,236,0)); }
.nav ul a.cur { color: #1878b8; font-weight: 700; position: relative; }
.nav ul a.cur::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #1878b8, #3fb2ec); }
::selection { background: #1878b8; color: #fff; }
/* find-us: the home reviews section's water caustics, mirrored - on the home page
the wash options band sits ABOVE the caustics and the tint goes solid at the TOP;
here the caustics band sits above the wash options, so the tint goes solid at the
BOTTOM instead, landing exactly on #0f2f3d - the colour pw50's #packages gradient
starts from - so the two sections read as one continuous surface. */
.locstrip { overflow: hidden; }
/* the caustics in the source photo live in its top ~28%; a full-cover crop samples
the dark middle and shows almost nothing. 330% height anchored to the top zooms
that ripple zone so it fills the whole band. */
.locstrip .lsbg { position: absolute; left: 0; top: 0; width: 100%; height: 330%; object-fit: cover; object-position: 50% 0%; filter: saturate(0.9) hue-rotate(-10deg) brightness(1.25); }
.locstrip .lstint { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,
  rgba(13,39,49,0.35) 0%, rgba(13,39,49,0.12) 22%, rgba(13,39,49,0.10) 55%,
  rgba(15,47,61,0.55) 72%, rgba(15,47,61,0.88) 86%,
  #0f2f3d 94%, #0f2f3d 100%); }
/* white copy sits over near-bare caustics now, so it carries its own shadow */
.locstrip .lslab, .locstrip .lsmeta, .locstrip .lsgo { text-shadow: 0 1px 14px rgba(8,27,36,0.65); }
/* guards against a subpixel seam line, same as the home page's revs join */
#packages { margin-top: -1px; }
/* the find-us + wash-menu slab rounds like the home page's packages band: the same
--r-big (24px) corners, top pair on the caustics band, bottom pair on the menu.
.locstrip's overflow:hidden clips the caustics photo to the curve. */
.locstrip { border-radius: var(--r-big) var(--r-big) 0 0; }
#packages { border-radius: 0 0 var(--r-big) var(--r-big); }
/* the wash menu is part of the continuous dark slab, so the section itself never
fades (the section-level .srv fade flashed the page's white ground through it);
only the content rises, the same trick the find-us band uses with .frv */
#packages.srv { opacity: 1; transform: none; }
#packages.srv .wrap { opacity: 0; }
#packages.srv.in .wrap { animation: pw-rise .65s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
#packages.srv .wrap { opacity: 1 !important; animation: none !important; }
}
/* polish round 1: pin chip, open pill, rule sheen, star pops, eyebrow wipes, step hover, copy chip */
.sub-hero .openpill { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px;
font-size: 0.78rem; font-weight: 700; color: #17694a; background: rgba(53,194,106,0.1);
border: 1px solid rgba(53,194,106,0.4); border-radius: 999px; padding: 5px 12px; vertical-align: middle; }
.sub-hero .openpill .odot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #35c26a; }
.sub-hero .openpill .odot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #21a35a; animation: pw-dotpulse 2s ease-out infinite; }
.sub-hero .openpill.shut { color: #5a707a; background: rgba(122,138,146,0.1); border-color: rgba(122,138,146,0.4); }
.sub-hero .openpill.shut .odot { background: #9aa7ae; }
.sub-hero .openpill.shut .odot::after { display: none; }
.sub-hero .rating .st i { display: inline-block; font-style: normal; opacity: 0;
animation: pw-starpop .4s cubic-bezier(.34,1.56,.64,1) forwards; }
.sub-hero .rating .st i:nth-child(1) { animation-delay: .85s; }
.sub-hero .rating .st i:nth-child(2) { animation-delay: .97s; }
.sub-hero .rating .st i:nth-child(3) { animation-delay: 1.09s; }
.sub-hero .rating .st i:nth-child(4) { animation-delay: 1.21s; }
.sub-hero .rating .st i:nth-child(5) { animation-delay: 1.33s; }
.srv .eyeb i { width: 0; }
.srv.in .eyeb i { animation: pw-eyewipe .8s cubic-bezier(.2,.7,.3,1) .1s forwards; }
@keyframes pw-eyewipe { to { width: 44px; } }
/* polish round 2: call number reveal, aligned review cards */
/* mobile views: tuned hero, photo-topped steps card, full-width actions, sticky call bar */
.mbar { display: none; }
@media (max-width: 640px) {
.sub-hero .rating { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; column-gap: 7px; font-size: 0.88rem; }
.sub-hero .rating .st { flex: none; white-space: nowrap; }
.sub-hero .openpill { margin-left: 0; }
.sub-hero .cta-row { flex-direction: column; }
.sub-hero .cta-row .pillbtn { width: 100%; justify-content: center; }
body { padding-bottom: 74px; }
.mbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; display: flex; gap: 8px;
background: rgba(13,39,49,0.9); border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px; padding: 7px; box-shadow: 0 18px 40px -18px rgba(13,39,49,0.65);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mbar a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-weight: 700; font-size: 0.92rem; border-radius: 999px; padding: 13px 0; text-decoration: none; }
.mbar a svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mbar .mb-call { color: #fff; background: linear-gradient(120deg, #1878b8, #3fb2ec); }
.mbar .mb-dir { color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
}
/* the visit strip is a full section here: heading, the 1-4 graphic, and a photo */
/* Visual layer: entrance, ambient motion and hover states */
.sub-hero h1 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 5vw, 4.3rem); line-height: 0.99; letter-spacing: 0.005em; color: #17333d; margin: 0 0 18px; }
.sub-hero h1 .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.sub-hero h1 .ln i { display: block; font-style: normal; transform: translateY(112%); animation: pw-lineup .7s cubic-bezier(.2,.7,.3,1) forwards; }
.sub-hero h1 .ln:nth-child(2) i { animation-delay: .13s; }
@keyframes pw-lineup { to { transform: translateY(0); } }
.sub-hero h1 .hlw { background: linear-gradient(100deg, #1878b8 10%, #3fb2ec 55%, #7fd0f7 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub-hero .lede, .sub-hero .cta-row, .sub-hero .rating { animation: pw-rise .65s cubic-bezier(.2,.7,.3,1) both; }
.sub-hero .lede { animation-delay: .45s; }
.sub-hero .cta-row { animation-delay: .57s; }
.sub-hero .rating { animation-delay: .69s; }
@keyframes pw-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* also-on-620: written on the photo, matching the Find Us map treatment */
.xlink .stage { position: relative; display: block; border-radius: var(--r-big); overflow: hidden; min-height: 400px;
box-shadow: 0 16px 34px -22px rgba(13,39,49,0.35); text-decoration: none; }
.xlink .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.xlink .stage:hover img { transform: scale(1.045); }
.xlink .stage::after { content: ""; position: absolute; inset: 0;
background: linear-gradient(75deg, rgba(8,27,36,0.88) 0%, rgba(8,27,36,0.55) 34%, rgba(8,27,36,0.05) 65%); }
.xlink .info { position: absolute; z-index: 2; left: 38px; bottom: 34px; color: #fff; }
.xlink .kick { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #9adcff; margin-bottom: 8px; }
.xlink .big { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; color: #fff; margin-bottom: 6px; }
.xlink .sub1 { font-size: 0.92rem; font-weight: 600; color: rgba(255,255,255,0.75); margin-bottom: 16px; }
.xlink .go { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; color: #fff;
border: 1.5px solid rgba(255,255,255,0.55); border-radius: 999px; padding: 10px 18px; transition: background .3s ease, transform .3s ease; }
.xlink .stage:hover .go { background: rgba(255,255,255,0.14); transform: translateX(4px); }
.xlink.srv .stage .info { opacity: 0; }
.xlink.srv.in .stage .info { animation: pw-rise .6s cubic-bezier(.2,.7,.3,1) .25s both; }
@media (max-width: 960px) {
.xlink .stage { min-height: 440px; }
.xlink .stage::after { background: linear-gradient(0deg, rgba(8,27,36,0.92) 0%, rgba(8,27,36,0.55) 48%, rgba(8,27,36,0.05) 78%); }
.xlink .info { left: 22px; right: 22px; bottom: 24px; }
}
/* round-2 visual layer: headline rule, glass photo edges, live dot, chip hovers, band hairline, star pops */
@keyframes pw-dotpulse { 0% { transform: scale(.5); opacity: .9; } 70%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes pw-starpop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.sub-hero .cta-row .pillbtn.accent { position: relative; overflow: hidden; }
.sub-hero .cta-row .pillbtn.accent::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 34px;
background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.45), rgba(255,255,255,0));
transform: skewX(-18deg); left: -60px; animation: pw-sheen 5.5s ease-in-out infinite; pointer-events: none; }
@keyframes pw-sheen { 0%, 78% { left: -60px; } 92%, 100% { left: 115%; } }
.srv { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.srv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.sub-hero h1 .ln i { transform: none; }
.sub-hero h1 .ln i, .sub-hero .lede, .sub-hero .cta-row, .sub-hero .rating { animation: none; }
.xlink .stage img, .xlink .go { transition: none; }
.xlink.srv .stage .info { opacity: 1 !important; animation: none !important; }
.sub-hero .cta-row .pillbtn.accent::before { animation: none; }
.sub-hero .rating .st i { opacity: 1 !important; animation: none !important; }
.srv .eyeb i { width: 44px !important; animation: none !important; }
.sub-hero .openpill .odot::after { display: none; }
.srv { opacity: 1; transform: none; transition: none; }
}
/* ---- guarantee + reviews: fills the old wash-menu slot ------------------- */
.gsec { padding: 96px 0 0; }
.gsec .ggrid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 64px; align-items: center; }
.gleft { display: grid; grid-template-columns: 172px 1fr; gap: 38px; align-items: center; }
.glogo { width: 172px; height: auto; display: block; }
.gchip { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 8px 16px 8px 13px; border-radius: 999px;
background: linear-gradient(180deg, #3fb2ec21, #3fb2ec0d); border: 1px solid #3fb2ec52;
box-shadow: 0 1px 0 #ffffffe6 inset, 0 14px 34px -20px #1878b88c;
font-family: var(--font-head); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #1878b8; }
/* the same spark that twinkles in the home page goal chip; keyframes are local
because pw50's copy may sit inside a media query */
.gchip .spk { width: 16px; height: 16px; flex: none; fill: #3fb2ec; animation: gtw 3.4s ease-in-out infinite; }
@keyframes gtw { 0%, 100% { opacity: .55; transform: scale(.86) rotate(0deg); } 50% { opacity: 1; transform: scale(1.08) rotate(18deg); } }
.gleft h2 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.02em; color: #17333d;
font-size: clamp(1.5rem, 2.1vw, 2.05rem); line-height: 1.14; margin-bottom: 14px; }
.gleft h2 .pc { background: linear-gradient(100deg, #1878b8 10%, #3fb2ec 55%, #7fd0f7 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gleft p { font-size: 1.02rem; line-height: 1.7; color: #5a707a; max-width: 40ch; }
.gleft .lk { color: #1878b8; font-weight: 700; white-space: nowrap; border-bottom: 2px solid #3fb2ec73; padding-bottom: 1px; }
.gcar { position: relative; }
.cwin { overflow: hidden; border-radius: var(--r-big); background: #fff; border: 1px solid #12333e14; box-shadow: 0 16px 34px -22px #0d273159; }
.ctrack { display: flex; transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.cslide { flex: 0 0 100%; min-width: 0; position: relative; padding: 32px 38px 30px; min-height: 300px; }
.cname { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: 1.08rem; color: #17333d; }
.cname .vb { width: 18px; height: 18px; flex: none; }
.cmeta { font-size: 0.86rem; color: #7e939c; margin-top: 3px; }
.cst { color: #d99a2b; font-size: 1.42rem; letter-spacing: 4px; line-height: 1; margin: 16px 0 12px; }
.cpull { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: #17333d; margin-bottom: 9px; }
.cbody { font-size: 0.95rem; line-height: 1.65; color: #5a707a; }
.cslide .gm { position: absolute; top: 30px; right: 34px; width: 21px; height: 21px; }
.cbtn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%;
border: 0; cursor: pointer; background: #fff; box-shadow: 0 6px 22px -6px #0d2731a6, 0 0 0 1px #12333e0f;
display: flex; align-items: center; justify-content: center; }
.cbtn svg { width: 16px; height: 16px; stroke: #17333d; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cbtn.cprev { left: -22px; } .cbtn.cnext { right: -22px; }
@media (max-width: 960px) {
.gsec { padding-top: 72px; }
.gsec .ggrid { grid-template-columns: 1fr; gap: 44px; }
.gleft { grid-template-columns: 128px 1fr; gap: 26px; }
.glogo { width: 128px; }
}
@media (max-width: 640px) {
.gleft { grid-template-columns: 1fr; gap: 18px; }
.cslide { padding: 26px 24px; min-height: 0; }
.cslide .gm { top: 24px; right: 22px; }
.cbtn { width: 38px; height: 38px; }
.cbtn.cprev { left: -8px; } .cbtn.cnext { right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
.ctrack { transition: none; }
.gchip .spk { animation: none; }
}
/* how-it-works: bubble steps + prep photo */
.flow.flow-bs { background: #fff; padding: 88px 0 96px; }
.flow-bs .head { text-align: center; margin-bottom: 60px; }
.flow-bs .fh { font-family: "Figtree", sans-serif; font-weight: 800; letter-spacing: -0.02em; color: #17333d; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; margin: 0 0 12px; }
.flow-bs .fh em { font-style: normal; font-weight: inherit; color: #1878b8; }
.flow-bs .fsub { color: #5a707a; font-size: 1.04rem; line-height: 1.65; max-width: 54ch; margin: 0 auto; }
.flow-bs .grid { display: grid; grid-template-columns: 0.98fr 1.02fr; gap: 74px; align-items: center; }
.flow-bs .photo { border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(13,39,49,0.5); position: relative; }
.flow-bs .photo img { width: 100%; height: 520px; object-fit: cover; transition: transform .8s ease; }
.flow-bs .photo:hover img { transform: scale(1.04); }
.flow-bs .photo::after { content: ""; position: absolute; inset: 0; border-radius: 26px; pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 1px 0 rgba(255,255,255,0.5); }
.flow.flow-bs .steps { display: block; position: relative; width: auto; padding: 0; gap: 0; }
.flow.flow-bs .steps::before { content: ""; position: absolute; left: 30px; right: auto; top: 54px; bottom: 54px; width: 2px; height: auto;
background: repeating-linear-gradient(180deg, #b5d7e8 0 7px, transparent 7px 14px); background-size: 2px 14px;
transform-origin: top; transform: scaleY(0); }
.flow.flow-bs.srv.in .steps::before { animation: bs-linedraw 1.1s cubic-bezier(.2,.7,.3,1) .5s forwards, bs-dashflow .8s linear .5s infinite; }
@keyframes bs-linedraw { to { transform: scaleY(1); } }
@keyframes bs-dashflow { to { background-position: 0 14px; } }
.flow-bs .bstep { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 0 0 44px; }
.flow-bs .bstep:last-child { padding-bottom: 0; }
.flow-bs .slab { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #1878b8; margin-bottom: 10px; }
.flow-bs .bbub { position: relative; width: 64px; height: 64px; }
.flow-bs .bbub::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.flow-bs .bbub img { position: relative; width: 64px; height: 64px; filter: drop-shadow(0 10px 18px rgba(24,120,184,0.35)); }
.flow-bs .bbub b { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Figtree", sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1; color: #0b2430; }
.flow-bs .bstep h3 { font-family: "Figtree", sans-serif; font-weight: 800; font-size: 1.02rem; letter-spacing: 0.08em; text-transform: uppercase; color: #17333d; margin: 0 0 8px; }
.flow-bs .bstep p { color: #5a707a; font-size: 0.93rem; line-height: 1.65; max-width: 44ch; margin: 0; }
.flow.flow-bs.srv:not(.in) .head, .flow.flow-bs.srv:not(.in) .photo, .flow.flow-bs.srv:not(.in) .bstep { opacity: 0; }
.flow.flow-bs.srv.in .head { animation: pw-rise .65s cubic-bezier(.2,.7,.3,1) both; }
.flow.flow-bs.srv.in .photo { animation: pw-rise .7s cubic-bezier(.2,.7,.3,1) .15s both; }
.flow.flow-bs.srv.in .bstep { animation: pw-rise .6s cubic-bezier(.2,.7,.3,1) backwards; }
.flow.flow-bs.srv.in .bstep:nth-child(1) { animation-delay: .15s; }
.flow.flow-bs.srv.in .bstep:nth-child(2) { animation-delay: .3s; }
.flow.flow-bs.srv.in .bstep:nth-child(3) { animation-delay: .45s; }
.flow.flow-bs.srv.in .bbub { animation: bs-bubpop .55s cubic-bezier(.34,1.56,.64,1) backwards, bs-bubbob 5.5s ease-in-out infinite; }
.flow.flow-bs.srv.in .bstep:nth-child(1) .bbub { animation-delay: .35s, 1s; }
.flow.flow-bs.srv.in .bstep:nth-child(2) .bbub { animation-delay: .55s, 1.8s; }
.flow.flow-bs.srv.in .bstep:nth-child(3) .bbub { animation-delay: .75s, 2.6s; }
@keyframes bs-bubpop { from { opacity: 0; transform: scale(.3); } }
@keyframes bs-bubbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 880px) {
.flow.flow-bs { padding: 64px 0 72px; }
.flow-bs .grid { grid-template-columns: 1fr; gap: 44px; }
.flow-bs .photo img { height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
.flow.flow-bs.srv .head, .flow.flow-bs.srv .photo, .flow.flow-bs.srv .bstep { opacity: 1 !important; animation: none !important; }
.flow.flow-bs.srv .steps::before { transform: scaleY(1) !important; animation: none !important; }
.flow.flow-bs.srv .bbub { animation: none !important; }
}
/* ============================================================================
LOCATION HERO: photograph behind the type, section below dissolving up into it.
The old hero was a light panel with two photo cards beside the copy. The facility
shot is now the background, so the tall sign photo and the location chip are gone;
the rating line and the live Open now state are kept, because they are the page's
only social proof.
The handoff: .flow-bs rises into the photo and meets it on a crisp edge, with the
photograph running at full strength right up to the shelf. The shelf runs FULL
WIDTH rather than inset: body.pg-sub is #f4f8fa, not white, so an inset would open
a pale gutter down both sides of the whole section. Full width also matches the
packages section on the home page. Its two 24px corner notches are not filled by
its own background, so the photograph shows through them, which reads as intended
now that nothing around them is washed out. */
:root { --lochero-peek: 128px; --lochero-nav: 78px; }
.sub-hero { position: relative; overflow: hidden; background: #0b2430;
display: flex; align-items: center;
/* The sticky nav reserves 78px of flow above this section, which showed as a white
band. Pulling the section back up by that amount puts the photograph behind the
nav so it reaches the very top of the page. Height and top padding both grow by
the same 78px, so the composition itself is unchanged.
pw50 also puts padding:104px 0 on every section; this one owns its box. */
margin-top: calc(var(--lochero-nav) * -1);
height: calc(660px + var(--lochero-nav));
padding: calc(40px + var(--lochero-nav)) 0 calc(var(--lochero-peek) + 60px); }
.sub-hero .shbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
z-index: 0;
transform: scale(1.07); animation: sh-settle 9s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes sh-settle { to { transform: scale(1); } }
.sub-hero .shveil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(112% 76% at 50% 38%, rgba(6,26,35,0.60) 0%, rgba(6,26,35,0.34) 54%, rgba(6,26,35,0.10) 100%),
linear-gradient(180deg, rgba(6,26,35,0.34) 0%, rgba(6,26,35,0.06) 46%, rgba(6,26,35,0.20) 100%); }
.sub-hero .shpos { position: relative; z-index: 3; text-align: center; }
.sub-hero .openpill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
color: #dff1fb; background: rgba(255,255,255,0.14); border: 0; border-radius: 999px;
padding: 7px 15px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.sub-hero h1 { color: #fff; text-align: center; font-size: clamp(2.1rem, 4.4vw, 3.7rem);
text-shadow: 0 2px 30px rgba(8,27,36,0.3); }
/* the gradient fill was tuned for dark type on a light panel; over the photo it goes muddy */
.sub-hero h1 .hlw { background: none; -webkit-background-clip: border-box; background-clip: border-box;
-webkit-text-fill-color: currentColor; color: #9adcff; }
.sub-hero .lede { color: rgba(226,242,251,0.9); margin: 16px auto 0; max-width: 48ch; text-align: center; }
.sub-hero .cta-row { justify-content: center; margin-top: 26px; }
.sub-hero .pillbtn.ghost { color: #fff; border-color: rgba(255,255,255,0.5);
background: rgba(8,30,40,0.28); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.sub-hero .pillbtn.ghost:hover { background: rgba(8,30,40,0.44); }
.sub-hero .pillbtn.ghost svg { stroke: #fff; }
.sub-hero .rating { justify-content: center; color: rgba(226,242,251,0.88); margin-top: 20px; }
/* pw50 sets .rating b to #17333d for light panels; that is invisible over the photo */
.sub-hero .rating b { color: #fff; }
/* the closed state was styled grey-on-white for the old light hero; over the photo it
needs to stay legible */
.sub-hero .openpill.shut { color: #d3e0e7; background: rgba(255,255,255,0.13); border: 0; }
.flow.flow-bs { position: relative; z-index: 4; margin-top: calc(var(--lochero-peek) * -1);
border-radius: var(--r-big) var(--r-big) 0 0; padding-top: 80px; }
/* The grab handle a phone puts at the bottom of its screen, borrowed. A short
pill sitting just under the top edge of the rising section, centred, so the
shelf reads as something you could pull up. Neutral rather than brand blue:
it is an affordance, not an accent. */
.flow.flow-bs::before { content: ""; position: absolute; left: 50%; top: 13px;
transform: translateX(-50%); width: 132px; height: 5px; border-radius: 999px;
background: rgba(18,51,62,0.18); }
@media (max-width: 860px) {
:root { --lochero-peek: 92px; }
/* stacked CTAs make the content taller than any fixed height, so let it grow */
.sub-hero { height: auto; padding: calc(92px + var(--lochero-nav)) 0 calc(var(--lochero-peek) + 52px); }
.flow.flow-bs { padding-top: 62px; }
.flow.flow-bs::before { width: 104px; top: 11px; }
}
@media (prefers-reduced-motion: reduce) {
.sub-hero .shbg { animation: none; transform: none; }
}
/* ---- the wash menu, lifted from the home page ---------------------------- */
/* Nearly all of this section's styling (23k of it) already lives in pw50.css,
which every page loads, so only the home embed's own overrides travel here.
The promo badge is not ported: see the note in the markup. */
.tier { transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease; }
.tier:hover { transform: translateY(-5px); box-shadow: 0 26px 46px -20px rgba(0,0,0,0.5); }
.tier.hl:hover { box-shadow: 0 0 0 1px rgba(63,178,236,0.35), 0 30px 78px -24px rgba(63,178,236,0.55), 0 26px 46px -20px rgba(13,39,49,0.65); }
.tier:hover, .tier:focus-within { z-index: 40; }
.tier:last-child .jt::after { top: auto; bottom: calc(100% + 9px); left: auto; right: -10px; transform: translate(0, 4px); }
.tier:last-child .jt:hover::after, .tier:last-child .jt:focus::after, .tier:last-child .jt:focus-visible::after { transform: translate(0, 0); }
/* Nested on the home page. Lifting these out by class name lost that context, so
the hover was dead at every width and the tooltip flipped below 1440. */
#packages.in .checks path, #packages:not(.srv) .checks path { animation: pw-draw .5s cubic-bezier(.2,.7,.3,1) forwards; }
@media (prefers-reduced-motion: reduce) {
.tier, .goal-chip, .pillbtn svg:last-child { transition: none; }
.tier:hover, .goal-chip:hover { transform: none; }
}
@media (min-width: 1440px) {
.tier:last-child .jt::after { top: 50%; bottom: auto; left: calc(100% + 12px); right: auto; transform: translate(-6px, -50%); }
.tier:last-child .jt:hover::after, .tier:last-child .jt:focus::after, .tier:last-child .jt:focus-visible::after { transform: translate(0, -50%); }
}
.toggle span:not(.on):hover { color: #fff; background: rgba(255,255,255,0.12); }
#packages .goal-line { margin: 42px 0 0; }
.goal-chip { transition: transform .3s ease; }
.goal-chip:hover { transform: translateY(-3px); }
#packages .goal-chip { color: #fff; background: linear-gradient(180deg, rgba(63,178,236,0.18) 0%, rgba(63,178,236,0.07) 100%); border-color: rgba(63,178,236,0.45); box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 14px 34px -20px rgba(0,0,0,0.6); }
#packages .goal-chip b { color: #9adcff; }
/* Between 641 and 960 the four cards never drop to two across, so the grid sits
at its 853px min-content width and the page scrolls sideways. The live home
page does this too. Something in pw50.css holds the 4-up track list with
!important, so overriding it needs the same weight. Above 960 and at 640 and
below, pw50 is left alone. */
@media (min-width: 641px) and (max-width: 960px) {
#packages .tier-grid { grid-template-columns: 1fr 1fr !important; }
}