:root{--vp-color-brand:#204869;--vp-color-brand-deep:#16334b;--vp-color-brand-contrast:#ffffff;--vp-color-accent:#00a0df;--vp-color-accent-contrast:#0f1c26;--vp-color-cta:#567d00;--vp-color-cta-contrast:#ffffff;--vp-color-text:#1e2a35;--vp-color-muted:#5b6b78;--vp-color-bg:#f2f7fa;--vp-color-surface:#ffffff;--vp-color-border:#c9d6df;--vp-color-error:#c62828;--vp-radius:6px;--vp-font-body:Roboto, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;--vp-font-heading:'Roboto Condensed', Roboto, 'Arial Narrow', Arial, sans-serif}
/* Walk-in shower page styles (page authors). Brand colours come from page.yaml theme.tokens: read them with
   var(--vp-color-*), never define them here. The platform components (header, form, disclosure, footer) are locked. */
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--vp-font-body);color:var(--vp-color-text);background:var(--vp-color-bg);line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
a{color:var(--vp-color-brand)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* Hero */
.hero{position:relative;overflow:hidden;padding:40px 0 56px}
.hero-photo{position:absolute;inset:0;background:var(--vp-color-bg)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.72)}
.hero .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.hero h1{font-family:var(--vp-font-heading);font-weight:800;color:var(--vp-color-brand);font-size:clamp(30px,4.6vw,50px);line-height:1.06;text-align:center;max-width:15em;margin:0 0 26px;letter-spacing:-.3px;text-wrap:balance}

/* Form card (the form and disclosure inside are platform components) */
.card{width:100%;max-width:470px;background:var(--vp-color-surface);border-top:5px solid #82bc00;border-radius:6px;box-shadow:0 10px 30px rgba(22,51,75,.18);padding:22px 22px 24px}

/* Buttons */
.cta{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:700;font-size:18px;color:#fff;background:var(--vp-color-cta);border:0;border-radius:30px;padding:14px 28px;min-height:52px;cursor:pointer;transition:background .15s}
.cta:hover{background:#4e7300}

/* How it works */
.how{background:var(--vp-color-surface);border-bottom:1px solid var(--vp-color-border);padding:26px 0}
.how-steps{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:760px}
.how-steps li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-weight:500;font-size:15px}
.num{width:36px;height:36px;border-radius:50%;border:2px solid var(--vp-color-accent);color:#0077a8;display:grid;place-items:center;font-weight:700}
@media (max-width:560px){.how-steps{grid-template-columns:1fr;gap:12px}.how-steps li{flex-direction:row;text-align:left}}

/* Intro */
.intro{padding:56px 0}
.intro .wrap{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center;max-width:900px}
.intro-img{width:260px;height:260px;border-radius:50%;object-fit:cover;object-position:center 35%;background:var(--vp-color-border);border:6px solid var(--vp-color-surface);box-shadow:0 0 0 2px var(--vp-color-accent)}
.intro h2,.faq h2{font-family:var(--vp-font-heading);font-weight:800;color:var(--vp-color-brand);font-size:30px;line-height:1.1;margin:0 0 12px}
.intro p{margin:0 0 20px;max-width:34em}
@media (max-width:720px){.intro .wrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px}.intro-img{width:200px;height:200px}}

/* FAQ */
.faq{padding:8px 0 56px}
.faq .wrap{max-width:760px}
.faq details{background:var(--vp-color-surface);border:1px solid var(--vp-color-border);border-radius:6px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700;padding:16px 18px;list-style-position:inside}
.faq details p{margin:0;padding:0 18px 16px}

/* Sticky mobile CTA: the platform sets html.vp-form-away while the form is scrolled out of view (and not finished) */
.sticky{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--vp-color-surface);border-top:1px solid var(--vp-color-border);transform:translateY(110%);transition:transform .25s;z-index:20}
.sticky .cta{width:100%}
.vp-form-away .sticky{transform:none}
@media (min-width:901px){.sticky{display:none}}

@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}