/* Self-hosted fonts (site-config.json > branding.font_files). Files live in the
   child theme's fonts/ folder. */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/wp-content/themes/cleanandbreezy-child/fonts/bricolage-grotesque-latin-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/wp-content/themes/cleanandbreezy-child/fonts/figtree-latin-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Figtree';
    font-style: italic;
    font-weight: 300 900;
    font-display: swap;
    src: url('/wp-content/themes/cleanandbreezy-child/fonts/figtree-latin-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Antonio';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('/wp-content/themes/cleanandbreezy-child/fonts/antonio-latin-normal.woff2') format('woff2');
}

/* Team 218 Divi 5 starter kit 1.2.0: companion CSS.
   Variable IDs are deterministic, identical on every site built from this kit.
   Divi only prints variables a module uses, so every var() here carries the
   real value as its fallback.
   Paste into the child theme's PREFIX-global.css. */

/* Visible keyboard focus on every interactive element (WCAG 2.4.7) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--gcid-ldprp0aa8t, #2f5d50);
    outline-offset: 2px;
}

/* Skip link (printed by the a11y PHP snippet): hidden until focused (WCAG 2.4.1) */
.t218-skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 100000;
    padding: 0.75rem 1.25rem; background: #ffffff; color: #111111;
    font-weight: 700; text-decoration: underline;
}
.t218-skip-link:focus { top: 1rem; }
#main-content h1[tabindex="-1"] { scroll-margin-top: 120px; }

/* FAQ / toggle titles: the a11y script puts a real <button> inside each title
   (WCAG 2.1.1). Make it look exactly like the title text. */
.et_pb_toggle_title .t218-toggle-btn {
    all: unset; display: block; width: 100%; cursor: pointer; font: inherit; color: inherit;
    letter-spacing: inherit; line-height: inherit; text-align: left;
}
.et_pb_toggle_title .t218-toggle-btn:focus-visible {
    outline: 3px solid var(--gcid-ldprp0aa8t, #2f5d50); outline-offset: 4px;
}

/* Links inside running text are underlined, so they don't rely on color
   alone (WCAG 1.4.1). Button-style links are left alone. */
.et_pb_text_inner :is(p, li, dd, td, blockquote) a:not([class*="btn"]):not([class*="button"]) {
    text-decoration: underline; text-underline-offset: 2px;
}

/* Focus ring on the kit's dark sections: the brand focus color can be too dark
   to see there (WCAG 2.4.7). */
.preset--module--divi-section--0vhq4x8b4b :focus-visible { outline-color: #ffffff; }

/* Mobile menu: in the header row the menu module shrinks to its hamburger, and
   Divi sizes the dropdown to the module (44px wide). Position it against the
   header column instead, so it spans the content width under the header. */
@media (max-width: 980px) {
    .et_pb_menu, .et_pb_menu .et_pb_menu_inner_container, .et_pb_menu .et_pb_menu__wrap,
    .et_pb_menu .et_mobile_nav_menu, .et_pb_menu .mobile_nav { position: static; }
    .et_pb_menu .et_mobile_nav_menu .et_mobile_menu {
        left: 0; right: 0; width: auto; top: 100%; box-sizing: border-box;
    }
}

/* Divi menu dropdowns open on keyboard focus, not only on hover (WCAG 2.1.1) */
.et-menu li:focus-within > .sub-menu { visibility: visible; opacity: 1; display: block; }

/* Divi Contact Form hides its <label>s with display:none, leaving only the
   placeholder, which vanishes on typing (WCAG 3.3.2). Show them. */
.et_pb_contact_form .et_pb_contact_form_label {
    display: block !important; margin-bottom: 0.35rem; font-weight: 600;
}
/* Field edges need 3:1 against the page (WCAG 1.4.11); Divi's grey fill is ~1.2:1 */
.et_pb_contact_form .input {
    border: 1px solid var(--gcid-gxwx6n5ox5, #767676) !important;
}

/* Readable line length for long-form text */
.t218-readable { max-width: var(--gvid-5b5q77c0bj, 720px); }

/* Respect reduced-motion preferences for Divi animations and scroll effects */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* layout_style "soft": firmer headings, no tracking, rounded FAQ items */
body h1, body h2, body h3, body h4, body h5, body h6,
body .et_pb_module_header, body .et_pb_toggle_title {
    font-weight: 600; letter-spacing: normal;
}
body .et_pb_button { font-weight: 600; }
body .et_pb_toggle {
    background: var(--gcid-zcs6cufm6t, #ffffff); border: 0;
    border-radius: var(--gvid-szrlicvn94, 20px);
}
body .et_pb_toggle_close { background: var(--gcid-zcs6cufm6t, #ffffff); }
/* Divi puts an image module's radius on the module, not the picture: pass it down */
body .et_pb_image .et_pb_image_wrap, body .et_pb_image img { border-radius: inherit; }

/* Site CSS from Divi5/rinse/rinse.css (site-config.json > branding.extra_css) */
/* Clean and Breezy "Fresh Rinse" design (canvas: https://claude.ai/artifact/PavqEp5NdPa7eq6BwNN4MR).
   Classes are used by the custom layouts in Divi5/rinse/ (built by build.py). */

/* Color tokens (panel audit 2026-10-17, A21). Change a color here, not in the rules below.
   Dark Green and Paw Print follow Divi's Variable Manager (printed by the child theme). */
:root {
    --cnb-white: #FFFFFF;
    --cnb-ground: #F7F8F4;
    --cnb-aqua: #E2F0EC;
    --cnb-charcoal: #1F2420;
    --cnb-evergreen: #2F5D50;
    --cnb-sage: #5E6455;
    --cnb-border: #DDE3DC;
    --cnb-rule-light: #EEF1EC;
    --cnb-on-dark-muted: #C9D6CF;
    --cnb-dark-tile: #2E352F;
    --cnb-field-border: #767676;
    --cnb-placeholder: #9AA393;
    --cnb-dark-green: var(--gcid-wldqm8su27, #1C3737);
    --cnb-paw: var(--gcid-ala41zmw3n, #E7C394);
}

/* Page ground; sections without their own background show it */
body, #page-container, #main-content { background: var(--cnb-ground); }
.et_pb_section { background-color: transparent; }

/* Headings: heavier and slightly tighter than the soft defaults */
body h1, body h2, body .et_pb_heading h1.et_pb_module_header, body .et_pb_heading h2.et_pb_module_header {
    font-weight: 800; letter-spacing: -0.015em; line-height: 1.08;
}
body h3, body h4 { font-weight: 600; letter-spacing: normal; }

/* Visually hidden text for screen readers (e.g. "opens in a new tab") */
.cnb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Buttons as links (independent of the Divi button presets) */
.cnb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 0; padding: 0; }
.cnb-btn {
    display: inline-block; padding: 14px 26px; border-radius: 10px; font-weight: 700;
    text-decoration: none !important; line-height: 1.3; border: 2px solid transparent;
}
.cnb-btn--book { background: var(--cnb-evergreen); color: var(--cnb-white) !important; }
.cnb-btn--book:hover { background: var(--cnb-charcoal); }
.cnb-btn--dark { background: var(--cnb-charcoal); color: var(--cnb-white) !important; }
.cnb-btn--dark:hover { background: var(--cnb-evergreen); }
.cnb-btn--outline { background: var(--cnb-white); color: var(--cnb-charcoal) !important; border-color: var(--cnb-charcoal); }
.cnb-btn--outline:hover { background: var(--cnb-charcoal); color: var(--cnb-white) !important; }
.cnb-btn--block { display: block; text-align: center; }
/* Second button on a dark section (page heroes): see-through with a light border */
.cnb-btn--ghost { background: transparent; color: var(--cnb-white) !important; border-color: var(--cnb-aqua); }
.cnb-btn--ghost:hover { background: var(--cnb-aqua); color: var(--cnb-charcoal) !important; }

/* Announcement strip (new ownership, 2026-10) */
.cnb-announce { margin: 0; text-align: center; font-size: 15px; color: var(--cnb-charcoal); }
.cnb-announce a { font-weight: 700; color: var(--cnb-charcoal) !important; text-decoration: underline; }
.cnb-newowner { max-width: 46rem; }
.cnb-newowner ul { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

/* Top bar and header */
.cnb-topbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 14px; }
.cnb-topbar a { color: var(--cnb-white) !important; font-weight: 700; text-decoration: none; }
.cnb-tb-short { display: none; }
@media (max-width: 600px) {
    .cnb-topbar { flex-wrap: nowrap; font-size: 13px; gap: 12px; white-space: nowrap; }
    .cnb-tb-long, .cnb-tb-call { display: none; }
    .cnb-tb-short { display: inline; overflow: hidden; text-overflow: ellipsis; }
}
.cnb-header-book { margin: 0; }
/* Jump links land below the sticky top bar + header (45 + 128px desktop, 42 + 81px phones, measured
   2026-10-18) */
[id], #main-content h1[tabindex="-1"] { scroll-margin-top: 190px; }
@media (max-width: 600px) { [id], #main-content h1[tabindex="-1"] { scroll-margin-top: 140px; } }

/* Header logo size in our own head CSS. Divi sets it too, but after a cache purge Divi's module CSS can
   arrive after the page is revealed, and the 288px logo flashed at full size on the first visit. */
.et-l--header .et_pb_image .et_pb_image_wrap img { max-height: 96px; width: auto; }

/* Phones: logo, menu and Book button on one row, so the sticky header stays short */
.cnb-bk-short { display: none; }
@media (max-width: 359px) {
    .cnb-bk-long { display: none; }
    .cnb-bk-short { display: inline; }
}
@media (max-width: 600px) {
    /* beats Divi's .et_pb_image_0_tb_header .et_pb_image_wrap img (max-height 96px) */
    .et-l--header .et_pb_image .et_pb_image_wrap img { max-height: 56px; width: auto; }
    .et-l--header .et_pb_column { flex-wrap: nowrap !important; column-gap: 10px !important; }
    .et-l--header .cnb-header-book .cnb-btn { white-space: nowrap; }
    .et-l--header .cnb-header-book .cnb-btn { padding: 10px 14px; font-size: 15px; }
    /* Hamburger at the far right, where phone users look for it */
    .et-l--header .et_pb_menu { order: 3; margin-left: 8px !important; }
    .et-l--header .et_pb_text:has(.cnb-header-book) { margin-left: auto; }
}

/* Sticky header: Divi adds .et_pb_sticky while it is stuck to the top */
.et-l--header .et_pb_section.et_pb_sticky { box-shadow: 0 2px 14px rgba(31, 36, 32, 0.10); }

/* Hero */
.cnb-tagline { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 1.5rem; color: var(--cnb-sage); margin: 0; }
.cnb-lead { font-size: 1.19rem; max-width: 34rem; }
.cnb-gift { font-weight: 700; }
.et-l--post .et_pb_section_0 .et_pb_image img { box-shadow: 24px 24px 0 var(--cnb-aqua); }
/* Transparent illustration in a hero (privacy shield): no photo frame, shown at a modest size */
.cnb-hero-art { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
.cnb-award {
    position: relative; z-index: 2; display: flex; gap: 12px; align-items: center;
    max-width: 290px; margin: -64px 0 0 -16px; padding: 14px 18px; background: var(--cnb-white);
    border-radius: 16px; box-shadow: 0 10px 30px rgba(31, 36, 32, 0.14); font-size: 14px; line-height: 1.35;
}
.cnb-award-mark { font-family: 'Antonio', sans-serif; font-weight: 700; font-size: 30px; color: var(--cnb-evergreen); line-height: 1; }

/* Feature trio */
.cnb-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 32px; }
.cnb-features > div { border-top: 3px solid var(--cnb-evergreen); padding-top: 20px; }
.cnb-features h3 { margin: 0 0 8px; }
.cnb-features p { margin: 0; }

/* Service cards */
.cnb-intro { color: var(--cnb-sage); max-width: 30rem; }
.cnb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.cnb-card {
    position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; background: var(--cnb-white);
    border: 1px solid var(--cnb-border); border-radius: 18px;
}
.cnb-card h3 a { color: var(--cnb-charcoal) !important; text-decoration: none; }
.cnb-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.cnb-card:hover, .cnb-card:focus-within { border-color: var(--cnb-evergreen); }
.cnb-card:hover .cnb-more { text-decoration: underline; }
.cnb-card--aqua { background: var(--cnb-aqua); border-color: var(--cnb-aqua); }
.cnb-card h3 { margin: 0; }
.cnb-card p { margin: 0; font-size: 16px; }
.cnb-more { margin-top: auto; font-weight: 700; color: var(--cnb-evergreen); font-size: 15px; }

/* Prices */
.cnb-price { font-family: 'Antonio', sans-serif; font-weight: 700; line-height: 1; color: var(--cnb-evergreen); }
.cnb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cnb-tile { background: var(--cnb-white); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.cnb-tile .cnb-price { font-size: 44px; }
.cnb-tile small { font-size: 14px; color: var(--cnb-sage); }
.cnb-tile--dark { background: var(--cnb-charcoal); color: var(--cnb-white); grid-column: span 2; }
.cnb-tile--dark .cnb-price { color: var(--cnb-aqua); }
.cnb-tile--dark small { color: var(--cnb-on-dark-muted); }

/* Reviews */
.cnb-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.cnb-reviews figure {
    margin: 0; padding: 28px; background: var(--cnb-white); border: 1px solid var(--cnb-border); border-radius: 18px;
    display: flex; flex-direction: column; gap: 14px;
}
.cnb-reviews blockquote { margin: 0; padding: 0; border: 0; font-size: 18px; font-style: normal; }
.cnb-reviews figcaption { font-weight: 700; color: var(--cnb-sage); }

/* Service area and visit */
.cnb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 !important; list-style: none; }
.cnb-chips li { background: var(--cnb-aqua); border-radius: 999px; padding: 6px 14px; font-size: 15px; font-weight: 500; }
.cnb-visit { background: var(--cnb-ground); border-radius: 18px; padding: 28px; }
.cnb-visit h3 { margin: 0 0 10px; }
.cnb-visit p { margin: 0 0 12px; }

/* Self-service page */
.cnb-facts { margin: 0; padding: 22px 24px !important; list-style: none; background: var(--cnb-white); border: 1px solid var(--cnb-border); border-radius: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.cnb-packages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cnb-package { padding: 32px; border-radius: 20px; background: var(--cnb-white); border: 1px solid var(--cnb-border); display: flex; flex-direction: column; gap: 18px; }
.cnb-package h3 { margin: 0; }
.cnb-package p { margin: 0; font-size: 16px; }
.cnb-package--dark { background: var(--cnb-charcoal); border-color: var(--cnb-charcoal); color: var(--cnb-aqua); }
.cnb-package--dark h3, .cnb-package--dark strong { color: var(--cnb-white); }
.cnb-sizes { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; text-align: center; }
.cnb-sizes div { background: var(--cnb-ground); border-radius: 12px; padding: 12px 6px; }
.cnb-package--dark .cnb-sizes div { background: var(--cnb-dark-tile); }
.cnb-sizes dt { font-size: 13px; font-weight: 700; color: var(--cnb-sage); }
.cnb-package--dark .cnb-sizes dt { color: var(--cnb-on-dark-muted); }
.cnb-sizes dd { margin: 0; font-size: 34px; }
.cnb-package--dark .cnb-price { color: var(--cnb-aqua); }
.cnb-addons { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 16px; color: var(--cnb-sage); margin-top: 20px; }
.cnb-addons strong { color: var(--cnb-charcoal); }
.cnb-steps { margin: 0; padding: 0 !important; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; }
.cnb-steps li { display: flex; flex-direction: column; gap: 8px; }
.cnb-steps h3 { margin: 0; }
.cnb-steps p { margin: 0; font-size: 16px; }
.cnb-step-num { font-family: 'Antonio', sans-serif; font-weight: 700; font-size: 56px; line-height: 1; color: var(--cnb-evergreen); }
.cnb-tips { margin-top: 32px; background: var(--cnb-aqua); border-radius: 18px; padding: 28px; }
.cnb-tips h3 { margin: 0 0 10px; }
.cnb-tips ul { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 6px 32px; font-size: 16px; }
.cnb-suds { background: var(--cnb-charcoal); color: var(--cnb-aqua); border-radius: 28px; padding: 48px 40px; display: flex; flex-wrap: wrap; gap: 40px 56px; scroll-margin-top: 120px; }
.cnb-suds > div { flex: 1 1 360px; min-width: 0; }
.cnb-suds h2 { color: var(--cnb-white) !important; margin: 0 0 14px; }
.cnb-suds ul { font-size: 16px; }
.cnb-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cnb-plan { background: var(--cnb-white); color: var(--cnb-charcoal); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.cnb-plan .cnb-price { font-size: 48px; }
.cnb-plan .cnb-price small { font-size: 20px; }
.cnb-note { font-size: 15px; color: var(--cnb-on-dark-muted); margin-top: 14px; }

/* Grooming page */
.cnb-includes { margin: 0; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
.et_pb_text .cnb-includes li { list-style: none !important; background: var(--cnb-ground); border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.cnb-package--dark .cnb-includes li { background: var(--cnb-dark-tile); color: var(--cnb-aqua); }
.cnb-pricelists { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cnb-pricelist { background: var(--cnb-white); border: 1px solid var(--cnb-border); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.cnb-pricelist h3 { margin: 0; }
.cnb-pricelist dl { margin: 0; display: flex; flex-direction: column; }
.cnb-pricelist dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--cnb-rule-light); }
.cnb-pricelist dl div:last-child { border-bottom: 0; }
.cnb-pricelist dt { font-size: 15px; }
.cnb-pricelist dd { margin: 0; font-size: 24px; white-space: nowrap; }
.cnb-pricelist dd small { font-family: 'Figtree', sans-serif; font-size: 12px; font-weight: 500; color: var(--cnb-sage); margin-right: 4px; }
.cnb-pricelist p { margin: 0; font-size: 14px; color: var(--cnb-sage); }
.cnb-extras { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cnb-extra { background: var(--cnb-white); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.cnb-extra-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; line-height: 1.3; }
.cnb-extra-top .cnb-price { font-size: 24px; white-space: nowrap; }
.cnb-extra p { margin: 0; font-size: 15px; color: var(--cnb-sage); }
.cnb-callout { background: var(--cnb-white); border-radius: 18px; padding: 28px; }
.cnb-callout h3 { margin: 0 0 8px; }
.cnb-callout p { margin: 0 0 12px; }

/* About page */
.cnb-years { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0 !important; }
.et_pb_text .cnb-years li { list-style: none !important; font-family: 'Antonio', sans-serif; font-weight: 700; font-size: 34px; line-height: 1; color: var(--cnb-evergreen); background: var(--cnb-white); border-radius: 14px; padding: 14px 16px; }
.cnb-placeholder { border: 2px dashed var(--cnb-placeholder); border-radius: 18px; padding: 28px; color: var(--cnb-sage); background: var(--cnb-white); }
.cnb-hiring { background: var(--cnb-charcoal); color: var(--cnb-aqua); border-radius: 28px; padding: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.cnb-hiring > div { flex: 1 1 420px; min-width: 0; }
.et_pb_text .et_pb_text_inner .cnb-hiring h2 { color: var(--cnb-white) !important; margin: 0 0 10px; }
.cnb-hiring p { margin: 0; }

.cnb-quote { margin: 20px 0 0; padding: 18px 22px; border: 0; border-left: 0; background: var(--cnb-aqua); border-radius: 16px;
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 1.25rem; font-style: normal; line-height: 1.35; }
.cnb-quote cite { display: block; margin-top: 8px; font-family: 'Figtree', sans-serif; font-size: 15px; font-style: normal; font-weight: 700; color: var(--cnb-sage); }

/* Gravity Forms (form 1 on Contact): match the design. The Orbital theme reads these
   variables; its own inline style block sets them per form, hence !important. */
.cnb-form .gform_wrapper.gform-theme {
    --gf-color-primary: var(--cnb-evergreen) !important;
    --gf-color-primary-rgb: 47, 93, 80 !important;
    --gf-color-primary-contrast: var(--cnb-white) !important;
    --gf-color-primary-darker: var(--cnb-charcoal) !important;
    --gf-color-primary-lighter: var(--cnb-aqua) !important;
    --gf-ctrl-border-color: var(--cnb-field-border) !important;
    --gf-radius: 10px !important;
    --gf-ctrl-label-color-primary: var(--cnb-charcoal) !important;
}
.cnb-form .gform_wrapper .gfield_label, .cnb-form .gform_wrapper legend.gfield_label { font-weight: 700; font-size: 15px; color: var(--cnb-charcoal); }
.cnb-form .gform_wrapper input[type="text"], .cnb-form .gform_wrapper input[type="email"],
.cnb-form .gform_wrapper input[type="tel"], .cnb-form .gform_wrapper textarea, .cnb-form .gform_wrapper select {
    border: 1px solid var(--cnb-field-border); border-radius: 10px; padding: 12px 14px; font-size: 16px; background: var(--cnb-white); color: var(--cnb-charcoal);
}
.cnb-form .gform_wrapper input:focus, .cnb-form .gform_wrapper textarea:focus { outline: 3px solid var(--cnb-evergreen); outline-offset: 1px; }
.cnb-form .gform_wrapper .gform_footer input[type="submit"], .cnb-form .gform_wrapper .gform_button {
    background: var(--cnb-evergreen); color: var(--cnb-white); border: 0; border-radius: 10px; padding: 14px 28px; font-weight: 700; font-size: 16px; cursor: pointer;
}
.cnb-form .gform_wrapper .gform_button:hover { background: var(--cnb-charcoal); }
.cnb-visit h3 + p { margin-top: 0; }
.cnb-visit h3:not(:first-child) { margin-top: 18px; }

/* Policies and Suds Club */
.cnb-policy { max-width: 46rem; }
.cnb-policy ul { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.cnb-policy p { margin: 0 0 12px; }
.cnb-join { margin: 0 0 8px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }

/* Card grids: fixed column counts per screen size, so no card is left alone in a row */
@media (min-width: 600px) {
    .cnb-pricelists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cnb-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cnb-extras > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 700px) {
    .cnb-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cnb-packages > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
    .cnb-packages { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .cnb-packages > :last-child:nth-child(odd) { grid-column: auto; }
    .cnb-packages--stack { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
    .cnb-pricelists { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cnb-extras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cnb-extras > :last-child:nth-child(odd) { grid-column: auto; }
}
.cnb-packages--stack { grid-template-columns: minmax(0, 1fr) !important; }
.cnb-packages--stack > * { grid-column: auto !important; }

/* Photos placed in text modules */
.cnb-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 28px; }
.cnb-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.cnb-gallery figure { margin: 0; }
.cnb-gallery figcaption { margin-top: 10px; font-size: 15px; color: var(--cnb-sage); }
@media (max-width: 480px) { .cnb-gallery { gap: 12px; } .cnb-gallery figcaption { font-size: 14px; } }

/* Paw-print divider between page sections (decorative only). Fill is the Variable Manager
   color 'Paw Print' (#E7C394 fallback); the outline is 'Dark Green' (#1C3737 fallback), so the paws
   read on light sections (outline) and on Dark Green ones (fill). Both colors come from
   branding.extra_colors in site-config. */
.et-l--post .et_pb_section + .et_pb_section { position: relative; overflow: visible; }
.et-l--post .et_pb_section + .et_pb_section::before,
.et-l--post .et_pb_section + .et_pb_section::after {
    content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    width: 104px; height: 28px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cellipse cx='12' cy='16.2' rx='5.2' ry='4.4'/%3E%3Cellipse cx='5.2' cy='10.2' rx='2.3' ry='2.9' transform='rotate(-20 5.2 10.2)'/%3E%3Cellipse cx='9.6' cy='5.8' rx='2.3' ry='2.9' transform='rotate(-8 9.6 5.8)'/%3E%3Cellipse cx='14.4' cy='5.8' rx='2.3' ry='2.9' transform='rotate(8 14.4 5.8)'/%3E%3Cellipse cx='18.8' cy='10.2' rx='2.3' ry='2.9' transform='rotate(20 18.8 10.2)'/%3E%3C/svg%3E") 0 0 / 28px 28px space;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cellipse cx='12' cy='16.2' rx='5.2' ry='4.4'/%3E%3Cellipse cx='5.2' cy='10.2' rx='2.3' ry='2.9' transform='rotate(-20 5.2 10.2)'/%3E%3Cellipse cx='9.6' cy='5.8' rx='2.3' ry='2.9' transform='rotate(-8 9.6 5.8)'/%3E%3Cellipse cx='14.4' cy='5.8' rx='2.3' ry='2.9' transform='rotate(8 14.4 5.8)'/%3E%3Cellipse cx='18.8' cy='10.2' rx='2.3' ry='2.9' transform='rotate(20 18.8 10.2)'/%3E%3C/svg%3E") 0 0 / 28px 28px space;
    z-index: 3; pointer-events: none;
}
.et-l--post .et_pb_section + .et_pb_section::before { background-color: var(--cnb-paw); }
.et-l--post .et_pb_section + .et_pb_section::after {
    background-color: var(--cnb-dark-green); z-index: 4;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cellipse cx='12' cy='16.2' rx='5.2' ry='4.4'/%3E%3Cellipse cx='5.2' cy='10.2' rx='2.3' ry='2.9' transform='rotate(-20 5.2 10.2)'/%3E%3Cellipse cx='9.6' cy='5.8' rx='2.3' ry='2.9' transform='rotate(-8 9.6 5.8)'/%3E%3Cellipse cx='14.4' cy='5.8' rx='2.3' ry='2.9' transform='rotate(8 14.4 5.8)'/%3E%3Cellipse cx='18.8' cy='10.2' rx='2.3' ry='2.9' transform='rotate(20 18.8 10.2)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cellipse cx='12' cy='16.2' rx='5.2' ry='4.4'/%3E%3Cellipse cx='5.2' cy='10.2' rx='2.3' ry='2.9' transform='rotate(-20 5.2 10.2)'/%3E%3Cellipse cx='9.6' cy='5.8' rx='2.3' ry='2.9' transform='rotate(-8 9.6 5.8)'/%3E%3Cellipse cx='14.4' cy='5.8' rx='2.3' ry='2.9' transform='rotate(8 14.4 5.8)'/%3E%3Cellipse cx='18.8' cy='10.2' rx='2.3' ry='2.9' transform='rotate(20 18.8 10.2)'/%3E%3C/svg%3E");
}
@media (max-width: 600px) {
    .et-l--post .et_pb_section + .et_pb_section::before,
    .et-l--post .et_pb_section + .et_pb_section::after { top: -11px; width: 82px; height: 22px; -webkit-mask-size: 22px 22px; mask-size: 22px 22px; }
}

/* Home v2 */
.cnb-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.cnb-hero-cta .cnb-btn { padding: 16px 30px; font-size: 18px; }
.cnb-rating { display: inline-flex; align-items: center; gap: 10px; color: var(--cnb-charcoal) !important; text-decoration: none !important; line-height: 1.3; font-size: 15px; }
.cnb-rating strong { font-size: 18px; }
.cnb-rating:hover span:last-child { text-decoration: underline; }
.cnb-stars { color: var(--cnb-evergreen); letter-spacing: 2px; font-size: 18px; }
.cnb-walkin { margin: 0; font-size: 16px; color: var(--cnb-sage); }
.cnb-walkin a { font-weight: 700; }
.cnb-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 32px; margin-bottom: 8px; }
.cnb-sec-head h2 { margin: 0; }
.cnb-sec-head a { font-weight: 700; }
.cnb-reviews--home figure { background: var(--cnb-ground); border-color: var(--cnb-ground); }
.cnb-reviews--home { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
@media (min-width: 1000px) { .cnb-cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 999px) { .cnb-cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cnb-groom-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cnb-groom-strip .cnb-photo { border-radius: 20px; }
.cnb-groom-strip .cnb-photo:nth-child(2) { margin-top: 32px; }
.cnb-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cnb-duo .cnb-photo { border-radius: 20px; }
.cnb-duo .cnb-photo:nth-child(2) { margin-top: 36px; }
.cnb-steps--cards li { background: var(--cnb-white); border: 1px solid var(--cnb-border); border-radius: 18px; padding: 26px; }
.et_pb_text .et_pb_text_inner h2.cnb-on-dark { color: var(--cnb-white) !important; margin: 0 0 12px; }
/* Home hero on charcoal (same treatment as the grooming gallery band) */
.cnb-tagline--dark { color: var(--cnb-aqua); }
/* Home hero tagline is an H2 (first H2 on the page). Divi's text preset styles h2 with higher
   specificity than .cnb-tagline, so restate the tagline look at that weight. */
.et_pb_text .et_pb_text_inner h2.cnb-tagline { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
    font-size: 1.5rem; line-height: 1.3; letter-spacing: normal; margin: 0; color: var(--cnb-sage) !important; }
.et_pb_text .et_pb_text_inner h2.cnb-tagline--dark { color: var(--cnb-aqua) !important; }
.cnb-hero-cta--dark .cnb-rating { color: var(--cnb-white) !important; }
.cnb-hero-cta--dark .cnb-stars { color: var(--cnb-aqua); }
.cnb-walkin--dark { color: var(--cnb-aqua); }
.cnb-walkin--dark a { color: var(--cnb-white) !important; }
/* The outline button's charcoal hover would vanish into a charcoal section */
.et_pb_section:has(.cnb-on-dark, .cnb-hero-cta--dark, .cnb-btn--ghost) .cnb-btn--outline:hover {
    background: var(--cnb-aqua); color: var(--cnb-charcoal) !important; border-color: var(--cnb-aqua);
}
.cnb-on-dark-link { color: var(--cnb-aqua) !important; font-weight: 700; display: inline-block; margin-top: 14px; }
@media (max-width: 600px) {
    .cnb-groom-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .cnb-groom-strip .cnb-photo:nth-child(2), .cnb-duo .cnb-photo:nth-child(2) { margin-top: 20px; }
    .cnb-hero-cta .cnb-btn { padding: 14px 24px; font-size: 17px; }
}

/* Focus ring on dark areas: the evergreen ring is 2.1:1 on charcoal (WCAG 2.4.7) */
.cnb-topbar :focus-visible, .et-l--footer :focus-visible, .cnb-suds :focus-visible, .cnb-hiring :focus-visible,
.cnb-package--dark :focus-visible, .et_pb_section:has(.cnb-on-dark) :focus-visible,
.et_pb_section:has(.cnb-hero-cta--dark, .cnb-btn--ghost) :focus-visible {
    outline: 3px solid var(--cnb-aqua); outline-offset: 2px;
}

/* Rating and review next to the grooming prices */
.cnb-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 28px 0 16px;
    padding: 22px 26px; background: var(--cnb-white); border: 1px solid var(--cnb-border); border-radius: 18px; }
.cnb-proof figure { margin: 0; flex: 1 1 320px; }
.cnb-proof blockquote { margin: 0 0 6px; padding: 0; border: 0; font-style: normal; font-size: 17px; }
.cnb-proof figcaption { font-weight: 700; color: var(--cnb-sage); }

/* Groom times and team */
.cnb-time { font-size: 15px; font-weight: 700; color: var(--cnb-evergreen); }
.cnb-package--dark .cnb-time { color: var(--cnb-aqua); }
.cnb-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; margin-bottom: 16px; }
.cnb-member { background: var(--cnb-white); border: 1px solid var(--cnb-border); border-radius: 18px; padding: 24px; }
.cnb-member h3 { margin: 0; }
.cnb-member .cnb-role { margin: 2px 0 10px; font-weight: 700; color: var(--cnb-sage); font-size: 15px; }
.cnb-member p { margin: 0; font-size: 16px; }

/* Footer */
.cnb-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 48px; color: var(--cnb-on-dark-muted); }
.cnb-footer > * { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.cnb-footer > :first-child { flex-basis: 280px; }
.cnb-footer a { color: var(--cnb-white) !important; }
.cnb-sister { font-size: 14px; color: var(--cnb-on-dark-muted); }
.cnb-sister a { text-decoration: underline; }
.cnb-wordmark { font-family: 'Antonio', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: 0.04em; color: var(--cnb-white); }
.cnb-copy { font-size: 13px; color: var(--cnb-on-dark-muted); margin-top: 24px; }
.cnb-badges { display: flex; flex-wrap: wrap; gap: 16px; margin: 32px 0 0; padding: 0 !important; }
.et_pb_text .cnb-badges li { list-style: none !important; background: var(--cnb-white); border-radius: 12px; padding: 8px; display: flex; align-items: center; }
.cnb-badges img { display: block; height: 120px; width: auto; }
.cnb-badges a { display: block; border-radius: 8px; }
/* Badges sit on white cards inside the dark footer: the light dark-area ring vanishes on white (1.17:1),
   so badge links get a Dark Green ring (WCAG 2.4.7; panel audit 2026-10-17) */
.et-l--footer .cnb-badges a:focus-visible { outline: 3px solid var(--cnb-dark-green); outline-offset: 2px; }
/* Divi animates every property on menu links (.et-menu a { transition: all .4s }), so the focus ring faded in.
   Animate colors only. */
.et-l--header .et-menu a { transition-property: color, background-color, opacity; }

/* Headings on dark boxes. Divi's text preset colors headings with !important at
   (.preset--module--divi-text--… .et_pb_text_inner h2), so these need more weight. */
.et_pb_text .et_pb_text_inner .cnb-suds h2,
.et_pb_text .et_pb_text_inner .cnb-package--dark h3,
.et_pb_text .et_pb_text_inner .cnb-package--dark strong { color: var(--cnb-white) !important; }

/* Divi's text module puts bullets on every li; these lists are styled, not bulleted */
.et_pb_text .cnb-chips li, .et_pb_text .cnb-facts li, .et_pb_text .cnb-steps li { list-style: none !important; }
/* Self-Service wash rules strip under the hero: four columns, evergreen rule on the left of each */
.cnb-facts--strip { background: transparent; border: 0; padding: 0 !important; border-radius: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 28px; font-size: 15px; }
.et_pb_text .cnb-facts--strip li { padding: 0 0 0 14px !important; margin: 0 !important; border-left: 3px solid var(--cnb-evergreen); }
@media (max-width: 980px) { .cnb-facts--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cnb-facts--strip { grid-template-columns: minmax(0, 1fr); } }
/* The strip belongs to the hero: no paw divider between them */
.et-l--post .et_pb_section:has(.cnb-facts--strip)::before, .et-l--post .et_pb_section:has(.cnb-facts--strip)::after { display: none; }
.et_pb_text .cnb-chips li::before, .et_pb_text .cnb-facts li::before, .et_pb_text .cnb-steps li::before { content: none !important; }

@media (max-width: 640px) {
    .cnb-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cnb-tiles, .cnb-plans { grid-template-columns: 1fr; }
    .cnb-tile--dark { grid-column: auto; }
    .cnb-award { margin: -48px 0 0 0; }
    .cnb-suds { padding: 32px 22px; }
    .cnb-badges img { height: 96px; }
}

/* Contact hero: phone and address on the first screen (panel audit 2026-10-17, A11) */
.cnb-hero-contact { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--cnb-aqua); }
.cnb-hero-contact a { color: var(--cnb-white) !important; font-weight: 700; }

/* Phones: one-line news bar (A13) */
.cnb-news-short { display: none; }
@media (max-width: 600px) {
    .cnb-news-long { display: none; }
    .cnb-news-short { display: inline; }
    .cnb-announce { font-size: 14px; }
}
@media (max-width: 374px) {
    .cnb-announce { font-size: 13px; }
}

/* Self-Service on phones: the wash rules strip comes right after the hero buttons (A12).
   The hero photo (510px, about 37 KB) is skipped on phones; the rules are what decide a visit. */
@media (max-width: 600px) {
    /* the whole photo column, so its empty column and gap don't push the strip down */
    .et-l--post .et_pb_section_0 .et_pb_column:has(> .et_pb_image img[src*="self-service-wash-room"]) { display: none; }
}