/* PwsWeb — marketing site styling. Deliberately light/hand-built (no Divi).
   Brand system per the Pristine Water Systems 2024 Brand Identity Guidelines. */

/* Raleway (H2/H3) — self-hosted variable font, latin subset. Helvetica (H1) and
   Arial (body) are system faces per the guidelines. */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/raleway-var-latin.woff2') format('woff2');
}

:root {
    /* Primary palette */
    --pws-cyan: #22B1E7;        /* Process Cyan — graphics/accents ONLY, never text */
    --pws-yinmn: #38548D;       /* YInMn Blue — headings/links on white */
    --pws-celestial: #2B9ED4;   /* Celestial Blue — type > 24px only, or graphics */
    --pws-violet: #191746;      /* Russian Violet — H1 + dark grounds */
    /* Secondary palette */
    --pws-gold: #DF9726;        /* Harvest Gold — CTA buttons (black text) */
    --pws-pistachio: #98CB81;   /* CTA hover */
    --pws-azure: #EBF6F8;       /* pale highlight-block background */
    --pws-mint: #CEEEED;        /* pale highlight-block background */
    --pws-silver: #BCBCBC;

    /* Roles — existing names remapped to the brand so the whole site follows */
    --pws-blue: #38548D;        /* YInMn */
    --pws-blue-dark: #191746;   /* Russian Violet */
    --pws-ink: #191A1F;         /* body = near-black, per guidelines */
    --pws-muted: #64769A;       /* desaturated YInMn for meta */
    --pws-line: #DCE7EE;
    --pws-bg-tint: #EBF6F8;     /* Azure */

    /* Type roles */
    --pws-f-head: "Helvetica Neue", Helvetica, Arial, sans-serif;         /* H1 */
    --pws-f-sub:  "Raleway", Calibri, "Segoe UI", system-ui, sans-serif;  /* H2 / H3 */
    --pws-f-body: Arial, Tahoma, "Helvetica Neue", Helvetica, sans-serif; /* body */
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--pws-f-body);
    color: var(--pws-ink); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: var(--pws-blue); }
/* No explicit heading colour here — inherit, so headings on the blue hero/CTA stay
   white while headings on white read near-black (a brand-approved H1/H2 colour). */
h1 { font-family: var(--pws-f-head); line-height: 1.08; font-weight: 700; letter-spacing: -.01em; }
h2, h3 { font-family: var(--pws-f-sub); line-height: 1.22; font-weight: 600; }
h2 { font-size: 1.9rem; margin: 0 0 .6em; }
p { margin: 0 0 1.1em; }

.pws-container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
/* Only set vertical padding here — a `padding` shorthand would reset the
   container's horizontal padding to 0 (Section applies both classes to one
   element), which made content run flush to the screen edge on mobile. */
.pws-section { padding-top: 58px; padding-bottom: 58px; }
.pws-section--tint { background: var(--pws-bg-tint); }
.pws-lead { font-size: 1.15rem; line-height: 1.7; color: #374151; }
.pws-muted { color: var(--pws-muted); }

/* Layout helpers */
.pws-center { text-align: center; }
.pws-measure { max-width: 820px; margin-left: auto; margin-right: auto; }
.pws-readmore { display: inline-block; margin-top: 12px; color: var(--pws-blue); font-weight: 600; }
.pws-btn--outline { background: transparent; border: 2px solid var(--pws-blue); color: var(--pws-blue);
    text-decoration: none; display: inline-flex; align-items: center; }
.pws-btn--outline:hover { background: var(--pws-blue); color: #fff; }

/* Header */
.pws-topbar { background: var(--pws-blue); color: #fff; font-size: .9rem; }
.pws-topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 6px 20px; }
.pws-topbar a { color: #fff; text-decoration: none; }
.pws-social { display: inline-flex; width: 24px; height: 24px; border: 1px solid #fff; border-radius: 50%;
    align-items: center; justify-content: center; font-weight: 700; text-decoration: none; color: #fff; }

/* Header search */
.pws-topbar-right { display: flex; align-items: center; gap: 12px; }
.pws-search { display: flex; align-items: center; }
.pws-search input { border: 0; border-radius: 4px 0 0 4px; padding: 0 10px; font-size: .85rem; height: 28px; width: 150px; }
.pws-search button { border: 0; background: #fff; border-radius: 0 4px 4px 0; height: 28px; padding: 0 9px; cursor: pointer; line-height: 1; }
@media (max-width: 620px) { .pws-topbar .pws-search { display: none; } }

/* Search results page */
.pws-search--page { display: flex; max-width: 520px; margin-bottom: 28px; }
.pws-search--page input { flex: 1; height: 44px; border: 1px solid #cbd5e1; border-radius: 8px 0 0 8px; padding: 0 14px; font-size: 1rem; }
.pws-search--page button { height: 44px; border-radius: 0 8px 8px 0; }
.pws-search-results { display: grid; gap: 14px; }
.pws-search-result { display: block; padding: 16px 18px; border: 1px solid var(--pws-line); border-radius: 10px; text-decoration: none; color: inherit; background: #fff; }
.pws-search-result:hover { box-shadow: 0 6px 18px rgba(15,23,42,.08); border-color: var(--pws-blue); }
.pws-search-result h3 { margin: 0 0 4px; color: var(--pws-blue); }
.pws-search-kind { margin: 0 0 4px; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pws-muted); }
.pws-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; gap: 16px; flex-wrap: wrap; }
.pws-brand { text-decoration: none; display: inline-flex; align-items: center; }
.pws-brand img { display: block; height: 58px; width: auto; }
.pws-menu { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.pws-menu > a, .pws-dropbtn { text-decoration: none; color: var(--pws-ink); font-weight: 600; font-size: .95rem; }
.pws-menu > a:hover, .pws-dropbtn:hover { color: var(--pws-blue); }

/* Compact operator lookup in the header (parity with the live site's finder) */
.pws-lookup-compact { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pws-lookup-compact-label { font-size: .82rem; font-weight: 600; color: var(--pws-blue-dark); white-space: nowrap; }
.pws-lookup-compact .pws-input { width: auto; padding: 6px 9px; font-size: .85rem; }
.pws-lookup-compact input.pws-input { width: 92px; }
.pws-lookup-compact select.pws-input { max-width: 150px; }
.pws-lookup-compact .pws-btn { padding: 6px 14px; font-size: .85rem; }
@media (max-width: 1040px) { .pws-lookup-compact { margin-left: 0; } }

/* Dropdown menus (CSS hover — SSR-friendly, no JS) */
.pws-dropdown { position: relative; }
.pws-dropbtn { background: none; border: none; font-family: inherit; cursor: pointer; padding: 4px 0; display: inline-flex; align-items: center; gap: 4px; }
.pws-dropcontent { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 250px;
    box-shadow: 0 10px 30px rgba(15,23,42,.14); border-radius: 8px; z-index: 30; padding: 8px 0; border: 1px solid var(--pws-line); }
.pws-dropdown:hover .pws-dropcontent, .pws-dropdown:focus-within .pws-dropcontent { display: block; }
.pws-dropcontent a { display: block; padding: 9px 18px; white-space: nowrap; text-decoration: none; color: var(--pws-ink); font-weight: 500; font-size: .92rem; }
.pws-dropcontent a:hover { background: var(--pws-bg-tint); color: var(--pws-blue); }

/* Mobile navigation — hamburger reveals a vertical menu (CSS-only, no JS) */
.pws-nav-toggle { display: none; }
.pws-nav-burger { display: none; }
@media (max-width: 900px) {
    .pws-nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
        margin-left: auto; padding: 10px; cursor: pointer; }
    .pws-nav-burger span { display: block; width: 26px; height: 3px; background: var(--pws-blue-dark); border-radius: 2px; }
    .pws-menu { display: none; flex-direction: column; align-items: stretch; width: 100%; gap: 0; margin-top: 6px; }
    .pws-nav-toggle:checked ~ .pws-menu { display: flex; }
    .pws-menu > a, .pws-dropbtn { display: block; width: 100%; text-align: left; padding: 13px 4px;
        font-size: 1rem; border-top: 1px solid var(--pws-line); }
    .pws-dropdown { position: static; width: 100%; }
    .pws-dropcontent { position: static; display: none; box-shadow: none; border: 0; border-radius: 0;
        min-width: 0; padding: 0 0 8px 18px; }
    .pws-dropdown:focus-within > .pws-dropcontent { display: block; }
    .pws-dropcontent a { padding: 9px 4px; }
}
@media (max-width: 700px) {
    .pws-hero h1, .pws-hero .pws-hero-title { font-size: 1.7rem; }
    .pws-hero { padding: 40px 0; }
    .pws-hero--image { min-height: 340px; }
    h2 { font-size: 1.5rem; }
}

/* Hero */
.pws-hero { background: linear-gradient(135deg, var(--pws-blue) 0%, var(--pws-blue-dark) 100%); color: #fff; padding: 56px 0; }
.pws-hero h1, .pws-hero .pws-hero-title { margin: 0 0 12px; font-size: 2.3rem; font-weight: 700; line-height: 1.15; }
/* Kicker: the search heading above the visual title (careers vacancy pages). */
.pws-hero h1.pws-hero-kicker { margin: 0 0 6px; font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #cfe6ff; text-shadow: none; }
.pws-hero .pws-lead { color: #eaf2fb; }

/* Photographic heros — the image reads bright; a left-weighted scrim (set inline
   per image) keeps the heading legible while the photo shows through on the right.
   Text-shadow is the safety net over the lighter part of the image. */
.pws-hero--image, .pws-hero--region {
    background-size: cover; background-position: center; background-repeat: no-repeat;
    padding: 0; display: flex; align-items: center;
}
/* The flex hero shrink-wrapped .pws-container to its longest line and then
   centred that block, so the text's left edge wandered page to page (short
   vacancy subtitles sat 300px in). Full width restores the normal container. */
.pws-hero--image .pws-container, .pws-hero--region .pws-container { width: 100%; }
.pws-hero--image { min-height: 480px; }
.pws-hero--region { min-height: 340px; }
.pws-hero--image h1, .pws-hero--region h1 { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.pws-hero--image .pws-lead, .pws-hero--region .pws-lead { text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.pws-hero--region h1, .pws-hero--region .pws-hero-title { font-size: 2rem; }
.pws-hero--region h1.pws-hero-kicker { font-size: .9rem; }
.pws-hero--image .pws-hero-title, .pws-hero--region .pws-hero-title { text-shadow: 0 2px 14px rgba(0,0,0,.45); }

@media (max-width: 700px) {
    .pws-hero--image { min-height: 380px; }
    .pws-hero--region { min-height: 280px; }
}

/* Imported (WordPress) content — normalise into clean, consistent prose */
.pws-imported { font-size: 1.02rem; line-height: 1.7; color: var(--pws-ink, #1f2937); }
.pws-imported p { margin: 0 0 1em; }
/* Images sit on their own line, centred, and are size-capped so a stray full-res
   photo can't blow out the layout (imported bodies carried no sizing context). */
.pws-imported img, .pws-prose img {
    display: block; clear: both; max-width: 100%; width: auto; height: auto;
    max-height: 460px; margin: 22px auto; border-radius: 8px;
}
/* Headings match the native pages (the page title already renders in the hero). */
.pws-imported h2 { font-size: 1.55rem; line-height: 1.25; margin: 1.6em 0 .5em; color: var(--pws-blue); }
.pws-imported h3 { font-size: 1.2rem; line-height: 1.3; margin: 1.4em 0 .4em; }
.pws-imported h4 { font-size: 1.05rem; margin: 1.2em 0 .4em; }
.pws-imported h2:first-child, .pws-imported h3:first-child { margin-top: 0; }
.pws-imported ul, .pws-imported ol { padding-left: 1.2em; margin: 0 0 1em; }
.pws-imported li { margin: 6px 0; }
.pws-imported a { color: var(--pws-blue); }
/* Mobile-safety scoped to .pws-prose so it covers BOTH imported pages and
   articles (ArticleView uses .pws-prose without .pws-imported): nothing in a
   prose body may exceed the viewport width. */
.pws-prose { overflow-wrap: break-word; word-wrap: break-word; }
.pws-prose img, .pws-prose iframe, .pws-prose video,
.pws-prose embed, .pws-prose object { max-width: 100%; }
/* Raw YouTube embeds carried fixed width/height (e.g. 1080x810) — make responsive. */
.pws-prose iframe[src*="youtube"], .pws-prose iframe[src*="youtu.be"] {
    width: 100%; max-width: 720px; height: auto; aspect-ratio: 16 / 9;
    display: block; margin: 22px auto; border: 0; border-radius: 8px;
}
.pws-prose table { border-collapse: collapse; width: 100%; max-width: 100%; margin: 16px 0; }
.pws-prose td, .pws-prose th { border: 1px solid var(--pws-line); padding: 8px 12px; text-align: left; vertical-align: top; }
/* Wide multi-column tables (some carried fixed pixel widths ~865px) scroll
   horizontally on small screens instead of forcing the page to overflow. */
@media (max-width: 640px) {
    .pws-prose table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* Benefit tick cells (were the ElegantIcons 'Z' glyph before cleanup). */
.pws-imported td.pws-check { color: #1a8a3c; font-weight: 700; text-align: center; width: 2.6em; font-size: 1.15rem; }
/* Divi blurb converted to a simple centred feature block. */
.pws-imported .pws-blurb { max-width: 560px; margin: 22px auto; text-align: center; }
.pws-imported .pws-blurb img { margin: 0 auto 12px; }
/* Responsive 16:9 video (converted from Divi video modules). */
.pws-imported .pws-video { position: relative; width: 100%; max-width: 720px; margin: 22px auto; padding-top: 0; }
.pws-imported .pws-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px; }
/* Photo gallery — runs of consecutive images become a uniform responsive grid of
   thumbnails (click-through to the full image is preserved via the <a> links). */
.pws-imported .pws-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 24px 0; }
.pws-imported .pws-gallery a { display: block; margin: 0; overflow: hidden; border-radius: 8px; cursor: zoom-in; }
.pws-imported .pws-gallery img { margin: 0; width: 100%; height: 200px; max-height: none; object-fit: cover; border-radius: 8px; display: block; cursor: zoom-in; transition: transform .2s ease; }
.pws-imported .pws-gallery a:hover img, .pws-imported .pws-gallery img:hover { transform: scale(1.05); }
@media (max-width: 560px) { .pws-imported .pws-gallery { grid-template-columns: repeat(2, 1fr); } .pws-imported .pws-gallery img { height: 150px; } }
/* Gallery lightbox overlay (pws.js) */
.pws-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
    padding: 24px; background: rgba(15, 23, 42, .92); }
.pws-lightbox.is-open { display: flex; }
.pws-lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 12px 48px rgba(0, 0, 0, .5); }
.pws-lightbox-close { position: absolute; top: 14px; right: 22px; background: none; border: 0; color: #fff;
    font-size: 2.6rem; line-height: 1; cursor: pointer; padding: 4px 12px; }
.pws-lightbox-close:hover { opacity: .8; }

/* Cards */
.pws-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pws-card { display: block; padding: 22px; border: 1px solid var(--pws-line); border-radius: 12px;
    text-decoration: none; color: inherit; background: #fff; transition: box-shadow .15s; }
.pws-card:hover { box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.pws-card h3 { margin: 0 0 8px; color: var(--pws-blue); }

/* Tank volume calculator */
.pws-calc { cursor: default; }
.pws-calc:hover { box-shadow: none; }
.pws-calc label { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 0; }
.pws-calc label .pws-input { margin-top: 5px; font-weight: 400; }
.pws-calc-out { margin-top: 16px; font-size: 1.05rem; padding-top: 12px; border-top: 1px solid var(--pws-line); }
.pws-calc-out strong { color: var(--pws-blue); }

/* Region layout */
.pws-region-grid { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; }
.pws-region-main { min-width: 0; }
.pws-region-main .pws-prose { max-width: none; }
.pws-region-form { position: sticky; top: 20px; }
@media (max-width: 860px) { .pws-region-form { position: static; } }

/* Region service-area map (per-franchisee image, natural aspect) */
.pws-region-map img { max-width: 100%; width: 100%; height: auto; border-radius: 12px; display: block; border: 1px solid var(--pws-line); }

/* Region page — vertical full-width sections (matches the live layout) */
.pws-form-narrow { max-width: 720px; margin: 0 auto; }
.pws-owner--feature { gap: 32px; margin-bottom: 0; }
.pws-owner--feature .pws-owner-photo { width: 340px; max-width: 42%; }
.pws-owner--feature .pws-owner-bio { margin-top: 12px; }

.pws-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pws-feature { text-align: center; }
.pws-feature img { width: 100%; height: 190px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; }
.pws-feature h3 { margin: 0 0 6px; color: var(--pws-blue); }
.pws-feature p { color: #4b5563; }

.pws-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.pws-video { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(15,23,42,.12); }
.pws-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pws-video--single { max-width: 760px; margin: 0 auto; }

/* Testimonials */
.pws-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pws-testimonial { margin: 0; padding: 24px; background: #fff; border: 1px solid var(--pws-line); border-radius: 12px; border-top: 4px solid var(--pws-blue); }
.pws-testimonial p { font-style: italic; color: #374151; }
.pws-testimonial cite { display: block; margin-top: 12px; font-style: normal; font-weight: 600; font-size: .9rem; color: var(--pws-blue-dark); }
@media (max-width: 860px) { .pws-testimonials { grid-template-columns: 1fr; } }

.pws-areas-map { display: grid; grid-template-columns: 1fr 460px; gap: 36px; align-items: start; }

@media (max-width: 860px) {
    .pws-features, .pws-videos, .pws-areas-map { grid-template-columns: 1fr; }
    .pws-owner--feature { flex-direction: column; align-items: flex-start; }
    .pws-owner--feature .pws-owner-photo { width: 100%; max-width: 360px; }
}

/* Service-area suburb list — all suburbs, in columns (like the live page) */
.pws-suburbs { columns: 3; column-gap: 28px; list-style: none; padding: 0; margin: 10px 0 6px; }
.pws-suburbs li { padding: 3px 0; break-inside: avoid; color: var(--pws-ink); font-size: .95rem; }
.pws-suburbs li::before { content: "•"; color: var(--pws-blue); margin-right: 8px; }
@media (max-width: 700px) { .pws-suburbs { columns: 2; } }
.pws-hero-services { color: #eaf2fb; font-size: 1.05rem; font-weight: 500; margin: 0; }

/* Franchise-owner card */
.pws-owner { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 20px; }
.pws-owner-photo { width: 300px; max-width: 46%; height: auto; border-radius: 12px; flex: 0 0 auto; box-shadow: 0 6px 18px rgba(15,23,42,.12); }
.pws-owner-head { padding-top: 6px; }
.pws-owner-head h2 { margin: 0 0 2px; }
.pws-owner-desig { margin: 0 0 6px; color: var(--pws-muted); font-weight: 600; }
.pws-owner-contact { margin: 0; font-weight: 600; }
.pws-owner-contact a { text-decoration: none; }
.pws-owner-contact span { margin: 0 8px; color: var(--pws-line); }
.pws-owner-bio { max-width: none; }
.pws-owner-bio p { margin: 0 0 .9em; }
.pws-reviews { margin-top: 8px; }
@media (max-width: 560px) { .pws-owner { flex-direction: column; align-items: flex-start; } }
.pws-faq { border-bottom: 1px solid var(--pws-line); padding: 10px 0; }
.pws-faq summary { cursor: pointer; font-weight: 600; }

/* FAQ accordion page (imported content transformed to <details>) */
.pws-faq-page { max-width: 860px; }
.pws-faq-page h2 { margin: 1.6em 0 .4em; color: var(--pws-blue-dark); font-size: 1.4rem; }
.pws-faq-page details { border: 1px solid var(--pws-line); border-radius: 10px; margin: 10px 0; background: #fff; }
.pws-faq-page summary { cursor: pointer; font-weight: 600; padding: 14px 18px; list-style: none; position: relative; }
.pws-faq-page summary::-webkit-details-marker { display: none; }
.pws-faq-page summary::after { content: "+"; position: absolute; right: 18px; color: var(--pws-blue); font-weight: 700; }
.pws-faq-page details[open] summary::after { content: "–"; }
.pws-faq-page details[open] summary { border-bottom: 1px solid var(--pws-line); }
.pws-faq-body { padding: 14px 18px; }
.pws-faq-body p:last-child { margin-bottom: 0; }

/* Lookup + enquiry widgets */
.pws-lookup, .pws-enquiry { background: #fff; border: 1px solid var(--pws-line); border-radius: 12px; padding: 22px; }
.pws-lookup h3, .pws-enquiry h3 { margin-top: 0; }
.pws-lookup-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pws-input { padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 1rem; width: 100%; }
.pws-lookup-row .pws-input { flex: 1 1 120px; }
.pws-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pws-span2 { grid-column: 1 / -1; }
.pws-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.pws-btn { padding: 10px 22px; border: none; border-radius: 8px; font-family: var(--pws-f-sub); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .12s ease, transform .12s ease; }
.pws-btn:active { transform: translateY(1px); }
/* CTA = Harvest Gold with black text; Pistachio on hover (per brand guidelines). */
.pws-btn--primary { background: var(--pws-gold); color: #141414; }
.pws-btn--primary:hover { background: var(--pws-pistachio); color: #141414; }
.pws-btn--primary:disabled { opacity: .6; cursor: default; }
.pws-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.pws-thankyou { background: linear-gradient(135deg, var(--pws-blue) 0%, var(--pws-blue-dark) 100%);
    color: #fff; border-radius: 12px; padding: 32px 28px; text-align: center; }
.pws-thankyou h3 { margin: 0 0 8px; font-size: 1.5rem; }

/* Footer */
.pws-footer { background: #0f2544; color: #cbd5e1; margin-top: 40px; }
.pws-footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; padding: 40px 20px; }
.pws-footer a { display: block; color: #cbd5e1; text-decoration: none; padding: 3px 0; }
.pws-footer a:hover { color: #fff; }
.pws-footer h4 { color: #fff; margin: 0 0 10px; }
.pws-footer-logo { background: #fff; padding: 8px 12px; border-radius: 8px; height: 76px; width: auto; margin-bottom: 12px; }
.pws-muted-light { color: #9db6d6; }
.pws-footer-legal { border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; padding: 14px 0; }
.pws-footer-legal a { display: inline; }

/* CTA band */
.pws-cta { background: linear-gradient(135deg, var(--pws-blue) 0%, var(--pws-blue-dark) 100%); color: #fff; }
.pws-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 20px; flex-wrap: wrap; }
.pws-cta h2 { margin: 0 0 6px; }
.pws-cta p { margin: 0; color: #eaf2fb; }
.pws-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pws-btn--light { background: #fff; color: var(--pws-blue-dark); text-decoration: none; display: inline-flex; align-items: center; }
.pws-btn--primary { text-decoration: none; display: inline-flex; align-items: center; }

/* Prose */
.pws-prose { max-width: 760px; }
.pws-prose h2 { margin-top: 1.6em; }
.pws-prose ul { padding-left: 1.2em; }
.pws-prose li { margin: 6px 0; }

/* Region list (service areas) */
.pws-arealist { columns: 3; column-gap: 24px; }
.pws-arealist a { display: block; padding: 4px 0; text-decoration: none; }

/* Service areas — state tabs + card grid (matches the live page) */
.pws-state-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.pws-state-tab { padding: 8px 22px; border: 1px solid var(--pws-line); border-radius: 999px; text-decoration: none;
    color: var(--pws-blue-dark); font-weight: 600; background: #fff; transition: background .15s, color .15s; }
.pws-state-tab:hover { background: var(--pws-blue); color: #fff; border-color: var(--pws-blue); }
.pws-state-block { margin-bottom: 40px; scroll-margin-top: 90px; }
.pws-state-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; border-bottom: 2px solid var(--pws-line); padding-bottom: 8px; }
.pws-state-head h2 { margin: 0; }
.pws-area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pws-area-card { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border: 1px solid var(--pws-line);
    border-radius: 10px; background: #fff; text-decoration: none; color: var(--pws-ink); font-weight: 500; transition: box-shadow .15s, border-color .15s; }
.pws-area-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,.08); border-color: var(--pws-blue); }
.pws-pin { color: var(--pws-blue); flex: 0 0 auto; }
@media (max-width: 860px) { .pws-area-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pws-area-grid { grid-template-columns: 1fr; } }

/* Franchise-sales layer (/franchise-opportunities) */
.pws-territory-card { flex-wrap: wrap; }
.pws-territory-badge { margin-left: auto; font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: #475569; white-space: nowrap; }
.pws-territory-badge.is-available { background: #e7f6ec; color: #15803d; }
.pws-territory-badge.is-page { margin-left: 0; font-size: .8rem; padding: 4px 12px; }
.pws-locality-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pws-locality-chip { padding: 5px 12px; border: 1px solid var(--pws-line); border-radius: 999px;
    background: #fff; font-size: .85rem; color: var(--pws-ink); }
.pws-plain-link { color: inherit; text-decoration: none; }
.pws-plain-link:hover { color: var(--pws-blue); }
.pws-app-showcase { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 44px; align-items: start; }
.pws-phone-frame { width: 300px; border: 10px solid #101828; border-radius: 42px; overflow: hidden;
    background: #101828; box-shadow: 0 18px 40px rgba(15,23,42,.25); }
.pws-phone-frame img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) {
    .pws-app-showcase { grid-template-columns: 1fr; }
    .pws-phone-frame { margin: 0 auto; }
}

/* Articles */
.pws-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pws-article-card { display: flex; flex-direction: column; border: 1px solid var(--pws-line); border-radius: 12px;
    overflow: hidden; text-decoration: none; color: inherit; background: #fff; transition: box-shadow .15s; }
.pws-article-card:hover { box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.pws-article-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pws-bg-tint, #eef2f6); }
.pws-article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.pws-article-card:hover .pws-article-thumb img { transform: scale(1.04); }
.pws-article-body { display: block; padding: 18px 20px 22px; }
.pws-article-meta { display: block; color: var(--pws-muted); font-size: .85rem; }
.pws-article-card h3 { margin: 6px 0 8px; color: var(--pws-blue); font-size: 1.15rem; line-height: 1.3; }
.pws-article-excerpt { display: block; color: var(--pws-ink, #334155); font-size: .95rem; line-height: 1.55; }

@media (max-width: 860px) {
    .pws-cards, .pws-region-grid, .pws-footer-inner, .pws-grid, .pws-articles { grid-template-columns: 1fr; }
    .pws-arealist { columns: 1; }
}

/* ============================================================================
   Brand system (Phase 1) — components from the 2024 Brand Identity Guidelines
   ========================================================================== */

/* Eyebrow label — YInMn text with a Process-Cyan graphic dot (cyan = graphics only) */
.pws-eyebrow { font-family: var(--pws-f-sub); font-size: .8rem; font-weight: 600; color: var(--pws-yinmn);
    display: inline-flex; align-items: center; gap: 8px; letter-spacing: .02em; }
.pws-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--pws-cyan); flex: 0 0 8px; }

/* Section headings read brand-blue on light grounds */
.pws-section > h2 { color: var(--pws-yinmn); }

/* Azure / Mint highlight blocks — pale background, black/YInMn text */
.pws-callout { border-radius: 14px; padding: 18px 22px; border: 1px solid var(--pws-line); margin: 22px 0; }
.pws-callout--azure { background: var(--pws-azure); }
.pws-callout--mint  { background: var(--pws-mint); }
.pws-callout .pws-callout-lab { font-family: var(--pws-f-sub); font-weight: 700; font-size: .92rem; color: var(--pws-yinmn); }
.pws-callout h4 { font-family: var(--pws-f-sub); font-weight: 600; margin: .35em 0 .5em; font-size: 1.05rem; color: var(--pws-ink); }
.pws-callout p, .pws-callout li { color: var(--pws-ink); }
.pws-callout p:last-child { margin-bottom: 0; }
.pws-callout ul { margin: .2em 0 0; padding-left: 1.1em; }

/* Signature layered wave divider */
.pws-wave { display: block; width: 100%; height: 56px; }
.pws-wave--flip { transform: rotate(180deg); }

/* ===== Article template ===== */
/* Byline is scoped so it never collides with the listing-card's .pws-article-meta */
.pws-article-byline { font-family: var(--pws-f-sub); font-size: .9rem; color: var(--pws-muted);
    margin: 0; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.pws-article-byline .sep { color: var(--pws-silver); }

/* Editorial hero — photographic (article has a featured image) or branded gradient */
.pws-ahero { color: #fff; padding: 60px 0 52px; }
.pws-ahero--brand { background: linear-gradient(135deg, var(--pws-violet) 0%, var(--pws-yinmn) 100%); }
.pws-ahero--photo { background-size: cover; background-position: center;
    min-height: 420px; display: flex; align-items: flex-end; padding: 0 0 46px; }
.pws-ahero-inner { max-width: 800px; }
.pws-ahero-kicker { display: inline-block; font-family: var(--pws-f-sub); font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; font-size: .72rem; color: #bfe3f5;
    text-decoration: none; margin-bottom: 14px; }
.pws-ahero-kicker:hover { color: #fff; }
.pws-ahero h1 { margin: 0 0 16px; font-family: var(--pws-f-head); font-size: 2.5rem; line-height: 1.12;
    text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.pws-article-byline--hero { color: #dbe7f5; }
.pws-article-byline--hero .sep { color: #7f9bc4; }

/* Layout: single centred column, or content + sticky TOC on wide screens */
.pws-article-layout { max-width: 760px; margin: 0 auto; }
.pws-article-layout.has-toc { max-width: 1030px; display: grid;
    grid-template-columns: minmax(0, 760px) 220px; gap: 48px; align-items: start; justify-content: center; }
.pws-article-layout.has-toc .pws-article { order: 1; }
.pws-toc { order: 2; position: sticky; top: 96px; }
.pws-toc-box { border-left: 3px solid var(--pws-mint); padding-left: 16px; }
.pws-toc-box summary { list-style: none; cursor: pointer; font-family: var(--pws-f-sub); font-weight: 700;
    font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--pws-yinmn); }
.pws-toc-box summary::-webkit-details-marker { display: none; }
.pws-toc nav ol { list-style: none; margin: 12px 0 0; padding: 0; }
.pws-toc li { margin: 9px 0; line-height: 1.35; }
.pws-toc li.lvl-3 { padding-left: 14px; }
.pws-toc a { font-family: var(--pws-f-sub); font-size: .86rem; color: var(--pws-muted); text-decoration: none; }
.pws-toc a:hover { color: var(--pws-celestial); }

/* Prose rhythm — reaches paragraphs however deeply the imported markup nests them */
html { scroll-behavior: smooth; }
.pws-prose.pws-article { font-size: 1.05rem; line-height: 1.75; color: var(--pws-ink); }
.pws-prose.pws-article p { margin: 0 0 1.2em; }
.pws-prose.pws-article h2, .pws-prose.pws-article h3, .pws-prose.pws-article h4 {
    font-family: var(--pws-f-sub); color: var(--pws-yinmn); line-height: 1.25; scroll-margin-top: 92px; }
.pws-prose.pws-article h2 { font-size: 1.7rem; margin: 1.9em 0 .5em; }
.pws-prose.pws-article h3 { font-size: 1.4rem; margin: 1.7em 0 .4em; }
.pws-prose.pws-article h4 { font-size: 1.22rem; margin: 1.7em 0 .4em; } /* imported sections use h4 */
.pws-prose.pws-article ul { list-style: none; padding-left: 1.5em; margin: 0 0 1.2em; }
.pws-prose.pws-article ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.pws-prose.pws-article li { margin: .45em 0; }
.pws-prose.pws-article ul > li { position: relative; }
.pws-prose.pws-article ul > li::before { content: ""; position: absolute; left: -1.2em; top: .62em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--pws-celestial); }
.pws-prose.pws-article img { border-radius: 14px; box-shadow: 0 10px 30px rgba(15,23,42,.10); margin: 1.6em 0; }
.pws-prose.pws-article figcaption { font-family: var(--pws-f-sub); font-size: .85rem;
    color: var(--pws-muted); text-align: center; margin-top: 8px; }
/* standfirst / lead — high specificity so it wins over the generic paragraph rule */
.pws-prose.pws-article p.pws-standfirst { font-family: var(--pws-f-sub); font-size: 1.3rem; line-height: 1.5;
    color: var(--pws-yinmn); margin: 0 0 1.1em; }
.pws-prose.pws-article p.pws-standfirst strong { font-weight: 600; }
/* pull-quote — styling ready for any blockquote (and future authored quotes) */
.pws-prose.pws-article blockquote { margin: 1.7em 0; padding: 4px 0 4px 26px; border-left: 4px solid var(--pws-mint);
    font-family: var(--pws-f-sub); font-size: 1.4rem; line-height: 1.45; color: var(--pws-yinmn); }

.pws-article-cta { margin: 34px 0 0; padding: 22px 24px; background: var(--pws-azure); border-radius: 14px;
    border: 1px solid var(--pws-line); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.pws-article-cta h3 { margin: 0; color: var(--pws-ink); font-size: 1.15rem; }
.pws-article-back { display: inline-block; margin-top: 24px; font-family: var(--pws-f-sub); font-weight: 600; }

@media (max-width: 900px) {
    .pws-article-layout.has-toc { display: block; max-width: 760px; }
    .pws-toc { position: static; margin: 0 0 26px; }
    .pws-toc-box { border-left: 0; padding: 14px 18px; background: var(--pws-azure); border-radius: 12px; }
}
@media (max-width: 640px) {
    .pws-ahero { padding: 42px 0 38px; }
    .pws-ahero--photo { min-height: 320px; padding: 0 0 34px; }
    .pws-ahero h1 { font-size: 1.85rem; }
}

/* Related articles */
.pws-related h2 { color: var(--pws-yinmn); }

/* ===== Water Glossary ===== */
.pws-glossary-intro { margin-bottom: 22px; }
.pws-glossary-filter { width: 100%; max-width: 420px; margin-top: 14px; padding: 12px 16px;
    font-family: var(--pws-f-body); font-size: 1rem; color: var(--pws-ink);
    border: 1px solid var(--pws-line); border-radius: 999px; background: #fff; }
.pws-glossary-filter:focus { outline: none; border-color: var(--pws-celestial);
    box-shadow: 0 0 0 3px rgba(43,158,212,.16); }

/* Sticky A–Z jump nav */
.pws-glossary-az { position: sticky; top: 72px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px;
    margin: 0 0 30px; padding: 10px 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
    border: 1px solid var(--pws-line); border-radius: 12px; }
.pws-glossary-az a, .pws-glossary-az span { display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; font-family: var(--pws-f-sub); font-weight: 700; font-size: .85rem; }
.pws-glossary-az a { color: var(--pws-yinmn); text-decoration: none; }
.pws-glossary-az a:hover { background: var(--pws-azure); color: var(--pws-celestial); }
.pws-glossary-az span { color: var(--pws-silver); }

.pws-glossary-group { margin: 0 0 34px; scroll-margin-top: 132px; }
.pws-glossary-letter { margin: 0 0 12px; font-family: var(--pws-f-head); font-size: 1.6rem;
    color: var(--pws-celestial); border-bottom: 2px solid var(--pws-mint); padding-bottom: 6px; }
.pws-glossary dl { margin: 0; }
.pws-glossary-term { padding: 16px 0; border-bottom: 1px solid var(--pws-line); }
.pws-glossary-term dt { font-family: var(--pws-f-sub); font-weight: 700; font-size: 1.12rem; color: var(--pws-yinmn); }
.pws-glossary-term dd { margin: 5px 0 0; line-height: 1.65; color: var(--pws-ink); max-width: 68ch; }
.pws-glossary-empty { color: var(--pws-muted); font-style: italic; padding: 10px 0; }

@media (max-width: 640px) {
    .pws-glossary-az { top: 60px; }
    .pws-glossary-az a, .pws-glossary-az span { width: 26px; height: 26px; font-size: .8rem; }
}

/* ============================================================================
   Homepage (Phase 2) — confident hero, icon cards, how-it-works
   ========================================================================== */

/* Hero call-to-action + trust stats (over the photographic hero) */
.pws-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pws-btn--hero-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.75);
    text-decoration: none; display: inline-flex; align-items: center; }
.pws-btn--hero-ghost:hover { background: rgba(255,255,255,.22); }
.pws-hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 30px; margin: 30px 0 0; padding: 0; }
.pws-hero-trust li { color: #eaf2fb; font-family: var(--pws-f-sub); font-size: .88rem; }
.pws-hero-trust strong { color: #fff; font-family: var(--pws-f-head); font-size: 1.55rem; display: block; line-height: 1;
    margin-bottom: 4px; }

/* Icon cards — an icon tile at the top of each product / fact card */
.pws-card-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 12px;
    background: var(--pws-azure); margin-bottom: 14px; }
.pws-card-icon svg { width: 27px; height: 27px; stroke: var(--pws-cyan); fill: none; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round; }
.pws-card { transition: box-shadow .15s ease, transform .15s ease; }
.pws-card:hover { transform: translateY(-3px); }

/* How it works — a real 3-step sequence */
.pws-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 20px; }
.pws-step { text-align: center; }
.pws-step-n { width: 46px; height: 46px; border-radius: 50%; background: var(--pws-cyan); color: #fff;
    font-family: var(--pws-f-head); font-weight: 700; font-size: 1.25rem; display: inline-grid; place-items: center;
    margin-bottom: 14px; }
.pws-step h3 { margin: .2em 0 .35em; color: var(--pws-yinmn); }
.pws-step p { color: var(--pws-muted); margin: 0; }
@media (max-width: 760px) { .pws-steps { grid-template-columns: 1fr; gap: 22px; } }

/* Brand wave flush under the photographic hero */
.pws-hero + .pws-wave { margin-top: -1px; display: block; }

/* ===== Feature rows — alternating image ↔ text for product/service pages ===== */
.pws-imported .pws-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin: 34px 0; }
.pws-imported .pws-feature-row--flip .fr-media { order: 2; }
.pws-imported .pws-feature-row .fr-media { margin: 0; }
.pws-imported .pws-feature-row .fr-media img { width: 100%; height: auto; max-height: none; margin: 0;
    border-radius: 14px; border: 1px solid var(--pws-line); box-shadow: var(--shadow-sm, 0 8px 18px -12px rgba(25,23,70,.16)); }
.pws-imported .pws-feature-row .fr-text > :first-child { margin-top: 0; }
.pws-imported .pws-feature-row .fr-text h2, .pws-imported .pws-feature-row .fr-text h3 { color: var(--pws-yinmn); }
@media (max-width: 760px) {
    .pws-imported .pws-feature-row { grid-template-columns: 1fr; gap: 18px; }
    .pws-imported .pws-feature-row--flip .fr-media { order: 0; }
}

/* ============================================================================
   Motion (Phase 3) — tasteful, reduced-motion aware
   ========================================================================== */

/* Scroll-reveal: JS adds .pws-reveal only to below-the-fold blocks (so no-JS and
   above-the-fold content is never hidden), then .is-in when they scroll into view. */
.pws-reveal { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
.pws-reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }

/* Reading-progress bar on article pages */
.pws-readbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1200;
    background: linear-gradient(90deg, var(--pws-cyan), var(--pws-celestial)); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .pws-reveal, .pws-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Careers */
.pws-vacancy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.pws-vacancy-card { display: block; border: 1px solid var(--pws-line); border-radius: 12px; background: #fff; padding: 18px 20px;
    text-decoration: none; color: var(--pws-ink); transition: box-shadow .15s, border-color .15s; }
.pws-vacancy-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,.08); border-color: var(--pws-blue); }
.pws-vacancy-card h3 { margin: 10px 0 4px; color: var(--pws-blue); }
.pws-vacancy-card p { margin: 8px 0; color: #4b5563; }
.pws-file label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: #4b5563; }