/* ==========================================================================
   One Click Accessibility (Pojo) — fixes for the first-to-sea theme.

   "Increase text" adds body.pojo-a11y-resize-font-130 … -200 and sets body, p,
   li, label, input, select, textarea, span … to 130%-200% and headings to up
   to 266%, all !important. On this vw-based theme that broke three ways
   (measured on the live home page at 1905px, step 200):
     1. vw display text shrank instead of growing — section heading 115px ->
        85px, "Be the" 154px -> 65px, "Wellness" 307px -> 65px.
     2. text in <a>, <div> and <button> never grew — header button, menu links,
        descriptions, footer links, sticky buttons, cookie buttons.
     3. percentages compounded through nested spans — consent label 17px ->
        2065px, form fields x10, privacy text x4 — page became 6760px wide.
   Every resize rule is gated behind body[class*="pojo-a11y-resize-font-"]; with
   no size chosen (or after Reset) the resize sections change nothing.
   Sizes come from style.css and responsive.css, in their source order.
   ========================================================================== */

/* Section 1: step -> multipliers
     --a11y-scale          text, headings, lists             step 1 +15% ... max +60%
     --a11y-scale-form     inputs, submit, buttons, messages,
                           consent label, cookie buttons      step 1 +30% ... max +75%
     --a11y-scale-toolbar  accessibility toolbar item icon + label  step 1 +3% ... max +20%
                           (kept deliberately smaller than the page text)
   The toolbar's first "increase text" click adds -130 (measured), so -120 is
   never used and has no entry. */
:root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-toolbar: 1; }
body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-toolbar: 1.03; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-toolbar: 1.05; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-toolbar: 1.08; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-toolbar: 1.10; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-toolbar: 1.13; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-toolbar: 1.15; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-toolbar: 1.18; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-toolbar: 1.20; }
/* Phones: gentler curves (text max +38%, forms max +52%) so the stacked layout,
   the 52px sticky buttons and the text laid over photos still fit. */
@media (max-width: 767px) {
    body.pojo-a11y-resize-font-130 { --a11y-scale: 1.10; --a11y-scale-form: 1.20; }
    body.pojo-a11y-resize-font-140 { --a11y-scale: 1.14; --a11y-scale-form: 1.26; }
    body.pojo-a11y-resize-font-150 { --a11y-scale: 1.18; --a11y-scale-form: 1.31; }
    body.pojo-a11y-resize-font-160 { --a11y-scale: 1.22; --a11y-scale-form: 1.36; }
    body.pojo-a11y-resize-font-170 { --a11y-scale: 1.26; --a11y-scale-form: 1.41; }
    body.pojo-a11y-resize-font-180 { --a11y-scale: 1.30; --a11y-scale-form: 1.45; }
    body.pojo-a11y-resize-font-190 { --a11y-scale: 1.34; --a11y-scale-form: 1.49; }
    body.pojo-a11y-resize-font-200 { --a11y-scale: 1.38; --a11y-scale-form: 1.52; }
}

/* Section 2: base pin on <body> (measured baseline 16px). */
html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(16px * var(--a11y-scale)) !important;
}

/* Section 2b: accessibility toolbar. The plugin's span rule doubles both parts
   of each menu item — the icon wrapper and the label. Grow both on the gentler
   toolbar curve instead; the link stays 12.8px, so 1em is that link size. */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a > :is(.pojo-a11y-toolbar-icon, .pojo-a11y-toolbar-text) {
    font-size: calc(1em * var(--a11y-scale-toolbar)) !important;
}

/* Section 3: stop the plugin's percentages compounding inside every content root
   (the theme has no single wrapper, so each top-level block is listed). Elements
   with a theme size get it back, scaled, in Section 5. */
html body[class*="pojo-a11y-resize-font-"] :is(.privacy-wrapper, .site-header, .section-one, .section-two, .section-three, .section-four, .section-five, .site-footer, .footer-modal, .sticky-bottom-buttons, .gold-card-banner, .home-banner, .breadcrums, .description-section, .users-grid, .website-presentation, .login-banner, .login-section, .lightbox) :is(p, li, span, label, blockquote, legend, code, pre, dd, dt, input, select, textarea) {
    font-size: inherit !important;
}

/* Section 3b: headings with no theme size fall back to Bootstrap 5.0.2's scale
   (404 / search / page templates, ACF modal content). */
html body[class*="pojo-a11y-resize-font-"] :is(.privacy-wrapper, .site-header, .section-one, .section-two, .section-three, .section-four, .section-five, .site-footer, .footer-modal, .sticky-bottom-buttons, .gold-card-banner, .home-banner, .breadcrums, .description-section, .users-grid, .website-presentation, .login-banner, .login-section, .lightbox) h1 { font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.privacy-wrapper, .site-header, .section-one, .section-two, .section-three, .section-four, .section-five, .site-footer, .footer-modal, .sticky-bottom-buttons, .gold-card-banner, .home-banner, .breadcrums, .description-section, .users-grid, .website-presentation, .login-banner, .login-section, .lightbox) h2 { font-size: calc((1.325rem + 0.9vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.privacy-wrapper, .site-header, .section-one, .section-two, .section-three, .section-four, .section-five, .site-footer, .footer-modal, .sticky-bottom-buttons, .gold-card-banner, .home-banner, .breadcrums, .description-section, .users-grid, .website-presentation, .login-banner, .login-section, .lightbox) h3 { font-size: calc((1.3rem + 0.6vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.privacy-wrapper, .site-header, .section-one, .section-two, .section-three, .section-four, .section-five, .site-footer, .footer-modal, .sticky-bottom-buttons, .gold-card-banner, .home-banner, .breadcrums, .description-section, .users-grid, .website-presentation, .login-banner, .login-section, .lightbox) h4 { font-size: calc((1.275rem + 0.3vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.privacy-wrapper, .site-header, .section-one, .section-two, .section-three, .section-four, .section-five, .site-footer, .footer-modal, .sticky-bottom-buttons, .gold-card-banner, .home-banner, .breadcrums, .description-section, .users-grid, .website-presentation, .login-banner, .login-section, .lightbox) h5 { font-size: calc(1.25rem * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.privacy-wrapper, .site-header, .section-one, .section-two, .section-three, .section-four, .section-five, .site-footer, .footer-modal, .sticky-bottom-buttons, .gold-card-banner, .home-banner, .breadcrums, .description-section, .users-grid, .website-presentation, .login-banner, .login-section, .lightbox) h6 { font-size: calc(1rem * var(--a11y-scale)) !important; }
@media (min-width: 1200px) {
    html body[class*="pojo-a11y-resize-font-"] :is(.privacy-wrapper, .site-header, .section-one, .section-two, .section-three, .section-four, .section-five, .site-footer, .footer-modal, .sticky-bottom-buttons, .gold-card-banner, .home-banner, .breadcrums, .description-section, .users-grid, .website-presentation, .login-banner, .login-section, .lightbox) h1 { font-size: calc(2.5rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"] :is(.privacy-wrapper, .site-header, .section-one, .section-two, .section-three, .section-four, .section-five, .site-footer, .footer-modal, .sticky-bottom-buttons, .gold-card-banner, .home-banner, .breadcrums, .description-section, .users-grid, .website-presentation, .login-banner, .login-section, .lightbox) h2 { font-size: calc(2rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"] :is(.privacy-wrapper, .site-header, .section-one, .section-two, .section-three, .section-four, .section-five, .site-footer, .footer-modal, .sticky-bottom-buttons, .gold-card-banner, .home-banner, .breadcrums, .description-section, .users-grid, .website-presentation, .login-banner, .login-section, .lightbox) h3 { font-size: calc(1.75rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"] :is(.privacy-wrapper, .site-header, .section-one, .section-two, .section-three, .section-four, .section-five, .site-footer, .footer-modal, .sticky-bottom-buttons, .gold-card-banner, .home-banner, .breadcrums, .description-section, .users-grid, .website-presentation, .login-banner, .login-section, .lightbox) h4 { font-size: calc(1.5rem * var(--a11y-scale)) !important; }
}
/* 404.php sets its heading size inline (style="font-size:30px"). */
html:root body[class*="pojo-a11y-resize-font-"] .description-section.error-content h3 { font-size: calc(30px * var(--a11y-scale)) !important; }
/* lightbox.min.css */
html:root body[class*="pojo-a11y-resize-font-"] .lb-data .lb-caption { font-size: calc(13px * var(--a11y-scale)) !important; }
html:root body[class*="pojo-a11y-resize-font-"] .lb-data .lb-number { font-size: calc(12px * var(--a11y-scale)) !important; }

/* Section 4: messages get a unitless line-height so extra lines don't overlap. */
html:root body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip,
html:root body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output {
    line-height: 1.3 !important;
}

/* Section 4c: cookie consent banner + settings modal (cookie.webzapp.click).
   Both are appended to <body>, outside every content root. */
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) :is(p, li, span, label, a, summary) { font-size: inherit !important; }
html:root body[class*="pojo-a11y-resize-font-"] .cc-root { font-size: calc(14px * var(--a11y-scale)) !important; line-height: 1.5 !important; }
html:root body[class*="pojo-a11y-resize-font-"] .cc-title,
html:root body[class*="pojo-a11y-resize-font-"] .cc-root .cc-title { font-size: calc(16px * var(--a11y-scale-form)) !important; }
html:root body[class*="pojo-a11y-resize-font-"] .cc-body,
html:root body[class*="pojo-a11y-resize-font-"] .cc-root .cc-body { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; }
html:root body[class*="pojo-a11y-resize-font-"] .cc-btn,
html:root body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn { font-size: calc(14px * var(--a11y-scale-form)) !important; }
html:root body[class*="pojo-a11y-resize-font-"] .cc-lang-toggle,
html:root body[class*="pojo-a11y-resize-font-"] .cc-root .cc-lang-toggle { font-size: calc(12px * var(--a11y-scale)) !important; }
html:root body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2 { font-size: calc(18px * var(--a11y-scale)) !important; }
html:root body[class*="pojo-a11y-resize-font-"] .cc-modal-close { font-size: calc(24px * var(--a11y-scale)) !important; }
html:root body[class*="pojo-a11y-resize-font-"] .cc-cat-desc { font-size: calc(13px * var(--a11y-scale)) !important; }
html:root body[class*="pojo-a11y-resize-font-"] .cc-required-badge { font-size: calc(11px * var(--a11y-scale)) !important; }
html:root body[class*="pojo-a11y-resize-font-"] .cc-cookies-list,
html:root body[class*="pojo-a11y-resize-font-"] .cc-cookies-list th,
html:root body[class*="pojo-a11y-resize-font-"] .cc-cookies-list td { font-size: calc(12px * var(--a11y-scale)) !important; }

/* Section 5: every font-size / px-vh-vw line-height rule from the theme,
   multiplied. The theme's !important rules sit on a stronger gate so they keep
   beating its normal ones exactly as they do now. Tiny vw text gets a
   readability floor (messages 14px, legal / consent / disclaimers 12px). */

/* 5a — style.css (all widths) */
html:root body[class*="pojo-a11y-resize-font-"] .global-btn {
    font-size: calc(24px * var(--a11y-scale-form)) !important;
    line-height: calc(28px * var(--a11y-scale-form)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 {
    font-size: calc(1.4vw * var(--a11y-scale)) !important;
    line-height: calc(2.6vh * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content :is(p, li, a) {
    font-size: calc(max(12px, 0.8vw) * var(--a11y-scale)) !important;
    line-height: calc(2.8vh * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .submit-col input {
    font-size: calc(1.5vw * var(--a11y-scale-form)) !important;
    line-height: calc(5vh * var(--a11y-scale-form)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .cf7-col :is(input[type="text"], input[type="tel"]) {
    font-size: calc(1.278vw * var(--a11y-scale-form)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .check-box .wpcf7-list-item-label {
    font-size: calc(max(12px, 0.878vw) * var(--a11y-scale-form)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip {
    font-size: calc(max(14px, 0.7vw) * var(--a11y-scale-form)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output {
    font-size: calc(max(14px, 0.7vw) * var(--a11y-scale-form)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .success-title {
    font-size: calc(2.2vw * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .success-subtitle {
    font-size: calc(1.4vw * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .header-menu a {
    font-size: calc(1.4vw * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .sticky-btn {
    font-size: calc(1.464vw * var(--a11y-scale-form)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] :is(.footer-links a, .footer-link-divider) {
    font-size: calc(max(12px, 0.9vw) * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .footer-disclaimer {
    font-size: calc(max(12px, 0.75vw) * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .footer-modal-close {
    font-size: calc(30px * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .footer-modal-body p {
    font-size: calc(max(14px, 1vw) * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .footer-form-heading {
    font-size: calc(2.635vw * var(--a11y-scale)) !important;
    line-height: calc(6vh * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .section-two-header h2 {
    font-size: calc(6vw * var(--a11y-scale)) !important;
    line-height: calc(12vh * var(--a11y-scale)) !important;
}
/* The script words over each dream row ("Be the", "Standard", "Location") grow
   with the text but stop at 12vw (1.5x): the full 1.6x doesn't fit "Standard"
   beside its photo (measured room 1.54x at 1024-1920px). Flex centring makes a
   word wider than its column spill evenly into both sides, not only towards the
   photo. */
html:root body[class*="pojo-a11y-resize-font-"] .dream-script-text {
    font-size: min(calc(8vw * var(--a11y-scale)), 12vw) !important;
    line-height: 5vh !important;
    display: flex !important;
    justify-content: center !important;
    white-space: nowrap !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .dream-bold-heading {
    font-size: calc(1.5vw * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .dream-description {
    font-size: calc(1.4vw * var(--a11y-scale)) !important;
    line-height: calc(3.5vh * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-main-heading {
    font-size: calc(6.663vw * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-sub-text {
    font-size: calc(1.464vw * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-description {
    font-size: calc(1.464vw * var(--a11y-scale)) !important;
    line-height: calc(4vh * var(--a11y-scale)) !important;
}
/* The faded script word behind each lifestyle row is decoration (opacity 0.2)
   and already 16vw — keep the theme size so it can't swallow the text. */
html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-bg-text {
    font-size: 16vw !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-content-heading {
    font-size: calc(2.5vw * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-content-description {
    font-size: calc(1.4vw * var(--a11y-scale)) !important;
    line-height: calc(4vh * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-icon-list span {
    font-size: calc(1.4vw * var(--a11y-scale)) !important;
    line-height: calc(4vh * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .media-overlay-text {
    font-size: calc(max(12px, 0.9vw) * var(--a11y-scale)) !important;
}
html:root body[class*="pojo-a11y-resize-font-"] .contact-button {
    font-size: calc(1.5vw * var(--a11y-scale-form)) !important;
    line-height: calc(5vh * var(--a11y-scale-form)) !important;
}
/* Header "book a meeting" pill: the scaled 5vh line-height grew faster than the
   text and made the pill taller than the header bar (68px at 1366x657: pill
   46px -> 71px at 200%), so it filled the bar and ran over the gold border.
   Keep the theme's 5vh and grow only as far as the text needs. */
html:root body[class*="pojo-a11y-resize-font-"] .header-contact-number .contact-button {
    line-height: max(5vh, 1.2em) !important;
}

/* 5b — responsive.css (max-width: 767px) */
@media (max-width: 767px) {
    html:root body[class*="pojo-a11y-resize-font-"] .cf7-grid :is(input[type="text"], input[type="tel"], input[type="email"]) {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
        line-height: calc(3vh * var(--a11y-scale-form)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .cf7-grid input::placeholder {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .contact-button {
        font-size: calc(17px * var(--a11y-scale-form)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .check-box label span {
        font-size: calc(12px * var(--a11y-scale-form)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .check-box label span {
        line-height: calc(15px * var(--a11y-scale-form)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .consent-text p {
        font-size: calc(12px * var(--a11y-scale-form)) !important;
        line-height: calc(15px * var(--a11y-scale-form)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip,
    html:root body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .wpcf7-response-output,
    html:root body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .wpcf7 form:is(.invalid, .failed, .aborted, .sent) .wpcf7-response-output {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 {
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: calc(22px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content :is(p, li, a) {
        font-size: calc(12px * var(--a11y-scale)) !important;
        line-height: calc(20px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .sticky-btn {
        font-size: calc(18px * var(--a11y-scale-form)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .footer-form-heading {
        font-size: calc(28px * var(--a11y-scale)) !important;
        line-height: calc(34px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .success-title {
        font-size: calc(24px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .success-subtitle {
        font-size: calc(16px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] :is(.footer-links a, .footer-link-divider, .footer-disclaimer) {
        font-size: calc(12px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .footer-modal-body p {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .footer-modal-close {
        font-size: calc(24px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .submit-col input {
        font-size: calc(18px * var(--a11y-scale-form)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .section-two-header h2 {
        font-size: calc(48px * var(--a11y-scale)) !important;
        line-height: calc(48px * var(--a11y-scale)) !important;
        /* responsive.css caps it at 79%, so larger text wrapped one word per line */
        width: 100% !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .dream-bold-heading {
        font-size: calc(21px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .dream-description {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: calc(23.6px * var(--a11y-scale)) !important;
    }
    /* Script words grow only while they still fit the phone (28vw: "Standard" is
       326px at 102px), never below the theme's 102px — 1.03x at 375px up to
       1.18x at 430px. The letters grow upwards into the photo above (Location
       touched it at 430px), so top padding of 0.75x the growth keeps the gap. */
    html:root body[class*="pojo-a11y-resize-font-"] .dream-script-text {
        font-size: max(102px, min(calc(102px * var(--a11y-scale)), 28vw)) !important;
        line-height: 20px !important;
        display: block !important;
        padding-top: calc((max(102px, min(calc(102px * var(--a11y-scale)), 28vw)) - 102px) * 0.75) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-main-heading {
        font-size: calc(48px * var(--a11y-scale)) !important;
        line-height: calc(44px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-sub-text {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-description {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: 1.6 !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-bg-text {
        font-size: 112px !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] :is(.lifestyle-row:last-of-type, .lifestyle-row:nth-last-of-type(2)) .lifestyle-bg-text {
        font-size: 136px !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-content-heading {
        font-size: calc(36px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-content-description {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: calc(22.07px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .lifestyle-icon-list span {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .header-menu a {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(22.83px * var(--a11y-scale)) !important;
    }
    html:root body[class*="pojo-a11y-resize-font-"] .media-overlay-text {
        font-size: calc(12px * var(--a11y-scale)) !important;
    }
}

/* ==========================================================================
   Section 6: consent checkbox tick in the plugin's colour modes.
   The theme draws the tick as a navy ::after glyph. The plugin repaints the box
   (black in high/negative contrast, white in light background) but cannot reach
   pseudo-elements, so the tick disappears; in light background the white box
   border disappears too. Gated by each mode's own body class.
   ========================================================================== */
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::after {
    color: #fff !important;
}
body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::after {
    color: #ff0 !important;
}
body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"] {
    border-color: #000 !important;
}
body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::after {
    color: #000 !important;
}
body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::after {
    color: #000 !important;
}

/* ==========================================================================
   Section 7: page background in the plugin's colour modes. High contrast's own
   rule targets "body ... body", which never matches, so the theme's light-blue
   body showed between sections. Set all three modes explicitly.
   ========================================================================== */
body.pojo-a11y-high-contrast,
body.pojo-a11y-negative-contrast {
    background: #000 !important;
    background-color: #000 !important;
}
body.pojo-a11y-light-background {
    background: #fff !important;
    background-color: #fff !important;
}

/* ==========================================================================
   Section 8: same design as default in high contrast, negative contrast and
   light background — only the colours change. The plugin boxes every input and
   submit in 1px white and paints the submit magenta.
   ========================================================================== */
body.pojo-a11y-high-contrast { --a11y-fg: #fff; --a11y-accent: #fff; --a11y-accent-fg: #000; }
body.pojo-a11y-negative-contrast { --a11y-fg: #ff0; --a11y-accent: #ff0; --a11y-accent-fg: #000; }
body.pojo-a11y-light-background { --a11y-fg: #000; --a11y-accent: #000; --a11y-accent-fg: #fff; }

/* 8a — underline-only fields, as in style.css */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) .cf7-col :is(input[type="text"], input[type="tel"], input[type="email"]) {
    border: 0 !important;
    border-bottom: 1px solid var(--a11y-fg) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--a11y-fg) !important;
    box-shadow: none !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) .cf7-col input::placeholder {
    color: var(--a11y-fg) !important;
    opacity: 0.8 !important;
}

/* 8c — pill submit button, consent checkbox box */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) .submit-col input.wpcf7-submit {
    border: 0 !important;
    background: var(--a11y-accent) !important;
    color: var(--a11y-accent-fg) !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"] {
    border: 0.1vw solid var(--a11y-fg) !important;
}

/* 8e — other elements the modes restyle */
/* High contrast paints #808080 boxes (light mode #fff) behind transparent logos
   and icons; the extra :not(#…) outweighs light mode's "*:not(#…):not(.…)". */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) img:not(#pojo-a11y-toolbar) {
    background: transparent !important;
}
/* Light background: white artwork vanishes on the white page — header logo,
   menu open/close icons, privacy popup close X, footer logo and phone-number
   image (transparent PNGs, mean luminance 223-255). brightness(0) turns them
   black and keeps their shape. */
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) :is(.header-logo img, .header-menu-toggle img, .privacy-close-btn img, .footer-logo, .footer-number) {
    filter: brightness(0) !important;
}
/* High / negative contrast: navy artwork vanishes on the black page — the
   section-two logo and the "first" script images (luminance 38-56). */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#pojo-a11y-toolbar) :is(.section-two-header img, .dream-script-image img) {
    filter: brightness(0) invert(1) !important;
}
/* The sticky call button's phone icon is a CSS background. High contrast sets
   background-image: none and the other two modes reset the background
   shorthand, so the icon disappeared. Restore it — white on the black modes. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) .call-btn .call-icon {
    background: url('../images/call.png') center / contain no-repeat !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#pojo-a11y-toolbar) .call-btn .call-icon {
    filter: brightness(0) invert(1) !important;
}
/* Video mute/unmute buttons: the modes paint their wrapper div as a solid box. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) .mute-button:not(#pojo-a11y-toolbar) {
    background: transparent !important;
}
/* Carousel dots: high contrast turned each dot into a magenta button with a
   white border around a black dot, and every dot looked the same, so the
   current slide no longer showed. Keep the theme's dots, drawn in the mode's
   text colour, half-strength except the active one. The dots' wrapper spans the
   whole slider (1905px) and all three modes painted it as a solid black/white
   strip across the photo, so it stays transparent too. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) .section-five :is(.owl-dots, .owl-dot) {
    background: transparent !important;
    border: 0 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) .section-five .owl-dot span {
    background: var(--a11y-fg) !important;
    opacity: 0.5;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) .section-five .owl-dot.active span {
    opacity: 1;
}
/* "Book a meeting" pills: the modes repaint their gold background in the page
   colour, so only the text was left. Outline them in the mode's text colour —
   an inset shadow, so the button size and layout don't change. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) :is(.contact-button, .sticky-btn):not(#pojo-a11y-toolbar) {
    box-shadow: inset 0 0 0 2px var(--a11y-fg) !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) .media-overlay-text {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) .footer-modal-body :is(tr, th, td) {
    border-width: 0 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#pojo-a11y-toolbar) .footer-modal-body table {
    border-style: outset !important;
}

/* ==========================================================================
   Section 9: grayscale. The plugin puts filter: grayscale() on <body>, and any
   filter makes that element the containing block for position:fixed children.
   The toolbar, slide-out menu, sticky call buttons, footer modals, privacy popup
   and cookie banner were pinned to the page instead of the screen (sticky
   buttons measured at top 114px normally, 6049px — the end of the page — in
   grayscale). The root element is exempt from that rule, so the filter moves to
   <html>. Browsers without :has() keep the plugin's own body filter.
   ========================================================================== */
@supports selector(html:has(> body)) {
    html:has(> body.pojo-a11y-grayscale) {
        filter: grayscale(100%);
    }
    html body.pojo-a11y-grayscale {
        -webkit-filter: none !important;
        filter: none !important;
    }
}