/* ==========================================================================
   accessibility.css — One Click Accessibility (Pojo) font-resize fixes
   Theme: ethos-lp (px-based) — alum-designs.co.il
   Every resize rule is gated behind body[class*="pojo-a11y-resize-font-"]:
   with no step selected (or after Reset) nothing in Sections 1–5 applies.
   Section 6 = contrast / grayscale / cookie-banner rules supplied by the client.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Section 1: scale curves.
   --a11y-scale       general content
   --a11y-scale-form  form controls / messages / banner (start small, bigger first jump)
   --a11y-scale-tb    accessibility toolbar items (deliberately a bit smaller)
   Plugin steps: 120 → 200.
   -------------------------------------------------------------------------- */
:root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-tb: 1; }
body.pojo-a11y-resize-font-120 { --a11y-scale: 1.08; --a11y-scale-form: 1.20; --a11y-scale-tb: 1.04; }
body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-tb: 1.08; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-tb: 1.12; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-tb: 1.16; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-tb: 1.20; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-tb: 1.24; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-tb: 1.28; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-tb: 1.32; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-tb: 1.36; }


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


/* --------------------------------------------------------------------------
   Section 3: kill percentage compounding in the page content.
   The theme has no single content wrapper (header/sections/footer are direct
   body children), so the toolbar and cookie banner are excluded per element.
   [class] doubles the attribute to out-specify the plugin's p:not()/li:not().
   -------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"][class] :is(p, li, span, label, blockquote, legend, code, pre, dd, dt):where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) {
    font-size: inherit !important;
}

/* Headings with no theme size of their own: Bootstrap defaults × scale
   (the plugin would otherwise make them 172.9%–266% of their parent). */
html body[class*="pojo-a11y-resize-font-"][class] :is(h1, h2, h3, h4, h5, h6):where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) { font-size: calc(1rem * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] h1:where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) { font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] h3:where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) { font-size: calc((1.3rem + .6vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] h4:where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) { font-size: calc((1.275rem + .3vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] h5:where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) { font-size: calc(1.25rem * var(--a11y-scale)) !important; }
@media (min-width: 1200px) {
    html body[class*="pojo-a11y-resize-font-"][class] h1:where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) { font-size: calc(2.5rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] h3:where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) { font-size: calc(1.75rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] h4:where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) { font-size: calc(1.5rem * var(--a11y-scale)) !important; }
}


/* --------------------------------------------------------------------------
   Section 4: form controls + CF7 messages on --a11y-scale-form.
   Input and submit share ONE explicit height so they stay equal on every
   device; vertical padding is removed and line-height is unitless so the
   text sits centred inside that height.
   -------------------------------------------------------------------------- */

/* generic CF7 fallback (any form not covered below) */
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]), select, textarea) {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 input[type="submit"] {
    font-size: calc(18px * var(--a11y-scale-form)) !important;
    line-height: 1.2 !important;
}

/* footer contact form (the only CF7 form on the site) — theme: input 15px, submit 22px, both 44px tall */
html body[class*="pojo-a11y-resize-font-"][class] .footer-form input:not([type="submit"], [type="hidden"], [type="checkbox"], [type="radio"]) {
    font-size: calc(15px * var(--a11y-scale-form)) !important;
    line-height: 1.2 !important;
    height: calc(44px * var(--a11y-scale-form)) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .footer-form ::placeholder {
    font-size: calc(15px * var(--a11y-scale-form)) !important;
    line-height: 1.2 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .footer-form .form-submit-footr input[type="submit"],
html body[class*="pojo-a11y-resize-font-"][class] .form-submit-footr input {
    font-size: calc(22px * var(--a11y-scale-form)) !important;
    line-height: 1.2 !important;
    height: calc(44px * var(--a11y-scale-form)) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* other theme forms (not on the current pages, mirrored from style.css / responsive.css) */
html body[class*="pojo-a11y-resize-font-"][class] .form-consultation input[type=submit] { font-size: calc(22px * var(--a11y-scale-form)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"][class] .service-search input { font-size: calc(18px * var(--a11y-scale-form)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"][class] .service-search ::placeholder { font-size: calc(18px * var(--a11y-scale-form)) !important; }
@media (max-width: 1000px) {
    html body[class*="pojo-a11y-resize-font-"][class] .section-form-style input[type='submit'] { font-size: calc(24px * var(--a11y-scale-form)) !important; line-height: 1.2 !important; }
}

/* response output — unitless line-height, 14px readability floor */
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 form .wpcf7-response-output {
    font-size: calc(max(14px, 16px) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}

/* validation tip — always ONE line.
   The field's <p> becomes an inline-size container; the tip is capped at
   1/13 of the field width (longest CF7 message = 12.5em), floored at 14px.
   First declaration is the fallback for browsers without container units. */
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 form p { container-type: inline-size; }
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 .wpcf7-not-valid-tip {
    font-size: calc(20px * var(--a11y-scale)) !important;
    font-size: max(14px, min(calc(20px * var(--a11y-scale-form)), 7.6cqi)) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}
@media (max-width: 680px) {
    html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 .wpcf7-not-valid-tip {
        font-size: calc(18px * var(--a11y-scale)) !important;
        font-size: max(14px, min(calc(18px * var(--a11y-scale-form)), 7.6cqi)) !important;
    }
}


/* --------------------------------------------------------------------------
   Section 4b: accessibility toolbar items — smaller growth than the page
   (plugin alone: 12.8px → 25.6px; here 12.8px → 17.4px at step 200).
   -------------------------------------------------------------------------- */
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 span {
    font-size: calc(12.8px * var(--a11y-scale-tb)) !important;
}


/* --------------------------------------------------------------------------
   Section 4c: cookie banner (#cc-banner-root, outside the content).
   Generic inherit first, then pins. Every pin is calc(px * scale).
   .cc-body renders 20px by default (theme "body p" bleeds in) → 16px·form
   so step 130 is already larger than the default.
   -------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) :is(p, li, span, label, a) { font-size: inherit !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-root { font-size: calc(14px * var(--a11y-scale)) !important; line-height: 1.5 !important; }

html body[class*="pojo-a11y-resize-font-"] .cc-title,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-title { font-size: calc(18px * var(--a11y-scale-form)) !important; line-height: 1.3 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-body,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-body { font-size: calc(16px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-btn,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn { font-size: calc(15px * var(--a11y-scale-form)) !important; line-height: 1.3 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-lang-toggle,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-lang-toggle { font-size: calc(12px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-head h2 { font-size: calc(18px * var(--a11y-scale)) !important; line-height: 1.3 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-modal-close,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-close { font-size: calc(24px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-cat-desc,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cat-desc { font-size: calc(13px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-required-badge,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-required-badge { font-size: calc(11px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list td,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list td { font-size: calc(12px * var(--a11y-scale)) !important; }

/* Section 4d: tip positioning — not needed. Every CF7 tip on this site is
   position:static (in flow), no fixed px anchors exist in the theme CSS. */


/* --------------------------------------------------------------------------
   Section 5: every font-size rule from style.css + responsive.css, gated and
   × var(--a11y-scale). px line-heights are scaled too so lines don't overlap.
   Media blocks in the theme's source order: base, 1400, 1200, 1000, 767, 680, 400, 390, 330.
   (.close-lightbox / .lightbox-prev / .lightbox-next are fixed-size icon
   boxes and are intentionally left alone.)
   -------------------------------------------------------------------------- */

/* ---- base ---- */
html body[class*="pojo-a11y-resize-font-"][class] p:where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) { font-size: calc(20px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] h2:where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) { font-size: calc(42px * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"][class] .ethos-nave-bar ul li a { font-size: calc(20px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"][class] .hero-content-wrp h2,
html body[class*="pojo-a11y-resize-font-"][class] .hero-content-wrp h2 span { font-size: calc(60px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .hero-content-wrp h1 { font-size: calc(70px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .hero-content-wrp p { font-size: calc(25px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .site-bttn { font-size: calc(25px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .left-side-heder-btn p { font-size: calc(25px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .artistic-box h2 { font-size: calc(27px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"][class] .artistic-box p { font-size: calc(18px * var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .artistic-count { font-size: calc(48px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .your-project-content h2 { font-size: calc(64px * var(--a11y-scale)) !important; line-height: calc(75px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .your-project-content p { font-size: calc(30px * var(--a11y-scale)) !important; line-height: calc(35px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .your-project-content a { font-size: calc(36px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .our-services-box-wrap h2 { font-size: calc(26px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .our-services-box-wrap p,
html body[class*="pojo-a11y-resize-font-"][class] .ethos-bredcrumb a,
html body[class*="pojo-a11y-resize-font-"][class] .side-buttons p,
html body[class*="pojo-a11y-resize-font-"][class] .content-part-rec h3 { font-size: calc(16px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .ethos-bredcrumb a { line-height: calc(20px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .hero-buttons ul li a { font-size: calc(26px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"][class] .hero-slide h2 { font-size: calc(78px * var(--a11y-scale)) !important; line-height: calc(100px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .section-first-right h2 { font-size: calc(42px * var(--a11y-scale)) !important; line-height: 1.15 !important; }
html body[class*="pojo-a11y-resize-font-"][class] .section-first-right h2 span { font-size: calc(38px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .section-first-right-upper p { font-size: calc(18px * var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .icon-text-section h3 { font-size: calc(21px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"][class] .icon-text-section p { font-size: calc(13px * var(--a11y-scale)) !important; line-height: calc(16px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .form-consultation h2 { font-size: calc(36px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"][class] .galleries-wrap h2,
html body[class*="pojo-a11y-resize-font-"][class] .footer-top h2,
html body[class*="pojo-a11y-resize-font-"][class] .faqs-wrap h2 { font-size: calc(42px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"][class] .galleries-wrap .nav-tabs .nav-link { font-size: calc(22px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .about-contact-wrap h2,
html body[class*="pojo-a11y-resize-font-"][class] .reviews-inner-wrap h2 { font-size: calc(42px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .ethos-aboutus-wrap p,
html body[class*="pojo-a11y-resize-font-"][class] .social-link-wrap .content-copy-wrap h3,
html body[class*="pojo-a11y-resize-font-"][class] .authore-detail h3,
html body[class*="pojo-a11y-resize-font-"][class] .contact-social-title,
html body[class*="pojo-a11y-resize-font-"][class] .faq-redmore { font-size: calc(20px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .reviews-start p,
html body[class*="pojo-a11y-resize-font-"][class] .footer-lower a { font-size: calc(17px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .year-showcase h2 { font-size: calc(32px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .year-showcase p { font-size: calc(24px * var(--a11y-scale)) !important; line-height: calc(34px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .advantages-box h2 { font-size: calc(24px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"][class] .footer-top p { font-size: calc(24px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .footer-lower h2,
html body[class*="pojo-a11y-resize-font-"][class] .social-link-wrap .content-copy-wrap a,
html body[class*="pojo-a11y-resize-font-"][class] .faqs-wrap .accordion-button,
html body[class*="pojo-a11y-resize-font-"][class] .service-page-content p { font-size: calc(18px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .ethos-copyright p,
html body[class*="pojo-a11y-resize-font-"][class] .recommendations-box span { font-size: calc(14px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .faqs-accordion .accordion-body p { font-size: calc(18px * var(--a11y-scale)) !important; line-height: calc(28px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .page-slide h1 { font-size: calc(60px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .specialities p,
html body[class*="pojo-a11y-resize-font-"][class] .search-icon-ser .fa-search { font-size: calc(22px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .why-work-content h2 { font-size: calc(36px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .why-work-content h3 { font-size: calc(25px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .why-work-content p { font-size: calc(15px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .about-revires p { font-size: calc(23px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .redmore-recmendition p { font-size: calc(14px * var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .start-rating-wrap p { font-size: calc(12px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .service-page-content h3 { font-size: calc(35px * var(--a11y-scale)) !important; }

/* ---- (max-width: 1400px) ---- */
@media (max-width: 1400px) {
    html body[class*="pojo-a11y-resize-font-"][class] .left-side-heder-btn p { font-size: calc(20px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .site-bttn { font-size: calc(22px * var(--a11y-scale)) !important; }
}

/* ---- (max-width: 1200px) ---- */
@media (max-width: 1200px) {
    html body[class*="pojo-a11y-resize-font-"][class] .left-side-heder-btn p { font-size: calc(18px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .site-bttn { font-size: calc(20px * var(--a11y-scale)) !important; }
}

/* ---- (max-width: 1000px) ---- */
@media (max-width: 1000px) {
    html body[class*="pojo-a11y-resize-font-"][class] .side-buttons p { font-size: calc(14px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .hero-slide h2 { font-size: calc(44px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .hero-buttons ul li a { font-size: calc(18px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .section-first-right h2 span { font-size: calc(32px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .section-first-right h2 { font-size: calc(36px * var(--a11y-scale)) !important; }
}

/* ---- (max-width: 767px) ---- */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"][class] .hero-content-wrp h2 { font-size: calc(30px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .hero-content-wrp h2 span { font-size: calc(32px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .hero-content-wrp h1 { font-size: calc(36px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .site-bttn { font-size: calc(20px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .hero-content-wrp p { font-size: calc(24px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
}

/* ---- (max-width: 680px) ---- */
@media (max-width: 680px) {
    html body[class*="pojo-a11y-resize-font-"][class] .form-consultation h2 { font-size: calc(30px * var(--a11y-scale)) !important; line-height: calc(36px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .section-first-right-upper p { font-size: calc(16px * var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .galleries-wrap h2 { font-size: calc(42px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
    html body[class*="pojo-a11y-resize-font-"][class] h2:where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) { font-size: calc(30px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] p:where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) { font-size: calc(18px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .your-project-content h2 { font-size: calc(30px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .your-project-content p { font-size: calc(20px * var(--a11y-scale)) !important; line-height: calc(30px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .your-project-content a { font-size: calc(22px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .our-services-box-wrap h2 { font-size: calc(22px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .our-services-box-wrap p { font-size: calc(16px * var(--a11y-scale)) !important; line-height: calc(20px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .reviews-inner-wrap h2 { font-size: calc(30px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .advantages-box h2 { font-size: calc(18px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .galleries-wrap .nav-tabs .nav-link { font-size: calc(14px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .about-contact-wrap p { font-size: calc(18px * var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .year-showcase p { font-size: calc(20px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .about-contact-wrap h2 { font-size: calc(32px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .footer-top h2 { font-size: calc(30px * var(--a11y-scale)) !important; line-height: 1.3 !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .footer-top p { font-size: calc(20px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .inner-wrapper-mobile-static a { font-size: calc(18px * var(--a11y-scale)) !important; }
}

/* ---- (max-width: 400px) ---- */
@media (max-width: 400px) {
    html body[class*="pojo-a11y-resize-font-"][class] .artistic-work-heading h2 { font-size: calc(30px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] p:where(:not(#pojo-a11y-toolbar *, .cc-root *, [id^="cc-"] *, [class^="cc-"] *)) { font-size: calc(18px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .year-showcase p { font-size: calc(18px * var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .your-project-content h2 { font-size: calc(30px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .your-project-content p { font-size: calc(18px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .year-showcase h2 { font-size: calc(26px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .advantages-box h2 { font-size: calc(16px * var(--a11y-scale)) !important; }
}

/* ---- (max-width: 390px) ---- */
@media (max-width: 390px) {
    html body[class*="pojo-a11y-resize-font-"][class] .site-bttn { font-size: calc(20px * var(--a11y-scale)) !important; }
}

/* ---- (max-width: 330px) ---- */
@media (max-width: 330px) {
    html body[class*="pojo-a11y-resize-font-"][class] .site-bttn { font-size: calc(20px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .your-project-content a { font-size: calc(17px * var(--a11y-scale)) !important; }
}


/* ==========================================================================
   Section 6: contrast / grayscale / cookie banner / toolbar — client-supplied.
   NOTE: some of these rules are NOT gated by an accessibility class
   (.cc-slider colour, #cc-floater, toolbar position/toggle size, mobile
   .cc-banner) and intentionally change the default design.
   ========================================================================== */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) select {
    border: 1px solid #000 !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input::placeholder,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea::placeholder {
    color: #000;
}

/* Remove the problematic body filter only during grayscale mode */
body.pojo-a11y-grayscale {
    -webkit-filter: none !important;
    filter: none !important;
    overflow-x: hidden !important;
}

/* Reapply grayscale to the document root */
html:has(body.pojo-a11y-grayscale) {
    -webkit-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important;
}

/* Change toolbar positioning only during grayscale mode */
body.pojo-a11y-grayscale #pojo-a11y-toolbar {
    position: fixed !important;
    z-index: 99999 !important;
}
.cc-slider, body.pojo-a11y-high-contrast .cc-slider, body.pojo-a11y-grayscale .cc-slider,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider{
    background: #ababff !important;
}
body.pojo-a11y-grayscale .wpcf7-not-valid-tip {
  color: #fff;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-btn{
    border: 1px solid #000 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider {
    background: gray !important;
}
body.pojo-a11y-high-contrast .cc-slider {
    background: gray !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider {
    background: gray !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg img{
    background: #000 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-high-contrast .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg img{
    background: transparent !important;
}
body.pojo-a11y-high-contrast .transparent-bg img{
    background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg img{
    background: transparent !important;
}
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #fff;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #fff;
}

body #cc-floater {
    bottom: unset !important;
    top: 12.5vw !important;
    left: 0.2vw !important;
    right: unset !important;
    width: 2.5vw !important;
    height: 2.5vw !important;
    line-height: 2.5vw;
    text-align: center !important;
    z-index: 999 !important;
}
body #cc-floater svg{
    width: 1.5vw !important;
    height: 1.5vw !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
body #pojo-a11y-toolbar{
    z-index: 9999 !important;
    top: 9vw !important;
}
body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
    font-size: 1.5vw !important;
    padding: 0.6vw !important;
}
body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg{
    width: 1.5vw !important;
}

@media(max-width: 767px){
    body #cc-floater{
        bottom: unset !important;
        top: 60vw !important;
        left: 2px !important;
        width: 7.5vw !important;
        height: 7.5vw !important;
        line-height: 7.5vw;
        padding: 4.5vw !important;
    }
    body #cc-floater svg {
        width: 5vw !important;
        height: 5vw !important;
    }
    body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
        font-size: 5.5vw !important;
        padding: 2vw !important;
    }
    body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg {
        width: 5.8vw !important;
    }
    body #pojo-a11y-toolbar {
        top: 48vw !important;
    }

    .cc-banner {
            padding: 16px !important;
    }
    .cc-pos-right {
        left: 50% !important;
        right: unset !important;
        bottom: 10px !important;
        width: 95%;
        transform: translateX(-50%);
    }
    .cc-btn{
        padding: 7px 9px !important;
    }
}

#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a svg {
    padding-right: 0 !important;
    padding-left: 6px !important;
}


/* --------------------------------------------------------------------------
   Section 6b: checkbox / toggle "checked" state must stay visible in every
   mode. The rules above paint the cookie toggles one flat colour, so ON and
   OFF would look identical — restore a distinct ON colour + framed track.
   -------------------------------------------------------------------------- */
/* default + grayscale: dark ON track vs light #ababff OFF track */
html body .cc-toggle input:checked + .cc-slider { background: #3d3dc4 !important; }

/* high contrast + negative contrast (black page): yellow ON, black knob */
html body.pojo-a11y-high-contrast .cc-slider,
html body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider { border: 2px solid #fff !important; }
html body.pojo-a11y-high-contrast .cc-toggle input:checked + .cc-slider,
html body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-toggle input:checked + .cc-slider { background: #fcb225 !important; }
html body.pojo-a11y-high-contrast .cc-toggle input:checked + .cc-slider::before,
html body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-toggle input:checked + .cc-slider::before { background: #000 !important; }

/* light background (white page): black ON track, white knob */
html body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider { border: 2px solid #000 !important; }
html body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-toggle input:checked + .cc-slider { background: #000 !important; }
html body.pojo-a11y-light-background .cc-slider::before { background: #fff !important; box-shadow: 0 0 0 1px #000 !important; }

/* keep the 2px frame from shifting the knob */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .cc-slider { box-sizing: border-box !important; }
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .cc-slider::before { top: 1px !important; }
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background).cc-rtl .cc-slider::before,
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .cc-rtl .cc-slider::before { right: 1px !important; }

/* any real (visible) checkbox: native rendering, high-visibility tick */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) input[type="checkbox"]:not(.cc-toggle input) {
    -webkit-appearance: checkbox !important;
    appearance: auto !important;
    accent-color: #fcb225 !important;
    opacity: 1 !important;
}
html body.pojo-a11y-light-background input[type="checkbox"]:not(.cc-toggle input) { accent-color: #000 !important; }


/* ==========================================================================
   Section 7: contrast-mode visibility fixes (high / negative / light).
   All gated by the plugin's mode classes. ":not(#a11y-x)" is a harmless
   specificity booster (no element has that id) — the plugin's own rules use
   *:not(#pojo-a11y-toolbar), so an ID-level selector is needed to win.
   ========================================================================== */

/* 7.1 page background stays black in high + negative contrast
   (the plugin never recolours <body>/<html> in high contrast → white strips
   showed between sections) */
html:has(body.pojo-a11y-high-contrast),
html:has(body.pojo-a11y-negative-contrast),
html body.pojo-a11y-high-contrast,
html body.pojo-a11y-negative-contrast {
    background: #000 !important;
    background-color: #000 !important;
}
html body.pojo-a11y-high-contrast { color: #fff !important; }

/* 7.2 images: neutral grey backing so both dark (logo) and light (icons)
   transparent PNGs stay visible. Client exceptions .transparent-bg / .black-bg win. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) img:not(#a11y-x):not(.transparent-bg img):not(.black-bg img):not(#pojo-a11y-toolbar img) {
    background: #808080 !important;
    background-color: #808080 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 7.3 background images — the plugin's "background:#000/#fff !important"
   shorthand wipes them. Restore them (URLs mirror template-home.php / style.css)
   and make the inner layout wrappers transparent so the image shows through;
   text elements keep the plugin's solid backing for readability. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .ethos-hero-wrap:not(#a11y-x) {
    background-image: url("/wp-content/uploads/sites/7/2024/12/hero.png") !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .your-projects:not(#a11y-x) {
    background-image: url("../images/BG2.jpg") !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .ethos-footer:not(#a11y-x) {
    background-image: url("../images/footer-image.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: bottom !important;
}
/* about image frame: default = black accent band on the right 48% + white
   (blends into the white page). Mirror that per mode: accent in the
   contrasting colour, the rest transparent so no white/black slab shows. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .about-image-right:not(#a11y-x):not(#a11y-y) {
    background: linear-gradient(to left, #fff 0 48%, transparent 48%) !important;
}
html body.pojo-a11y-light-background .about-image-right:not(#a11y-x):not(#a11y-y) {
    background: linear-gradient(to left, #000 0 48%, transparent 48%) !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.ethos-hero-wrap, .your-projects, .ethos-footer) :is(div, section, form, fieldset, ul, ol, li):not(#a11y-x) {
    background: transparent !important;
}
@media (max-width: 680px) {
    html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .ethos-hero-wrap:not(#a11y-x) {
        background-position: top center !important;
        background-size: cover !important;
        background-position-x: -470px !important;
    }
}
@media (max-width: 400px) {
    html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .your-projects:not(#a11y-x) {
        background-size: cover !important;
    }
}

/* 7.4 slider dots (slick + owl) */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .slick-dots li button:not(#a11y-x),
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .owl-dots .owl-dot span:not(#a11y-x) {
    background: #fff !important;
    border: 2px solid #fff !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .slick-dots li.slick-active button:not(#a11y-x),
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .owl-dots .owl-dot.active span:not(#a11y-x) {
    background: #fcb225 !important;
}
html body.pojo-a11y-light-background .slick-dots li button:not(#a11y-x),
html body.pojo-a11y-light-background .owl-dots .owl-dot span:not(#a11y-x) {
    background: #fff !important;
    border: 2px solid #000 !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
}
html body.pojo-a11y-light-background .slick-dots li.slick-active button:not(#a11y-x),
html body.pojo-a11y-light-background .owl-dots .owl-dot.active span:not(#a11y-x) {
    background: #000 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .owl-dots .owl-dot:not(#a11y-x) {
    background: transparent !important;
    border: 0 !important;
}

/* 7.5 buttons: white border in high/negative, black border in light */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(a.site-bttn, input[type="submit"], .wpcf7-submit, .cc-btn, .btn):not(#a11y-x) {
    border: 2px solid #fff !important;
}
html body.pojo-a11y-light-background :is(a.site-bttn, input[type="submit"], .wpcf7-submit, .cc-btn, .btn):not(#a11y-x):not(#a11y-y) {
    border: 2px solid #000 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) a.hero-button:not(#a11y-x):not(#a11y-y) {
    border-width: 3px !important;
}

/* 7.6 form fields: bottom border only (matches the design), every contrast mode */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="hidden"], [type="image"], [type="range"], [type="color"]), textarea, select):not(#a11y-x):not(#a11y-y) {
    border: 0 !important;
    border-bottom: 1px solid #fff !important;
    border-radius: 0 !important;
}
html body.pojo-a11y-light-background :is(input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="hidden"], [type="image"], [type="range"], [type="color"]), textarea, select):not(#a11y-x):not(#a11y-y) {
    border-bottom-color: #000 !important;
}

/* 7.7 vertical divider line */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .line-spacer:not(#a11y-x) { background: #fff !important; background-color: #fff !important; }
html body.pojo-a11y-light-background .line-spacer:not(#a11y-x):not(#a11y-y) { background: #000 !important; background-color: #000 !important; }

/* 7.8 mobile hamburger (div.hamburger + ::before/::after bars):
   white in high/negative contrast, black in light background */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .hamburger:not(#a11y-x),
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .hamburger:not(#a11y-x)::before,
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .hamburger:not(#a11y-x)::after {
    background: #fff !important;
    background-color: #fff !important;
}
html body.pojo-a11y-light-background .hamburger:not(#a11y-x):not(#a11y-y),
html body.pojo-a11y-light-background .hamburger:not(#a11y-x):not(#a11y-y)::before,
html body.pojo-a11y-light-background .hamburger:not(#a11y-x):not(#a11y-y)::after {
    background: #000 !important;
    background-color: #000 !important;
}

/* 7.9 slider prev/next arrows (slick + owl): the plugin adds a square
   border + solid background to every <button>; the arrow itself is a round
   image on ::before, so drop the square frame (all widths, every contrast mode) */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.slick-prev, .slick-next, .slick-arrow, .owl-prev, .owl-next):not(#a11y-x):not(#a11y-y) {
    border: 0 !important;
    outline-offset: 2px;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 7.10 icons (transparent SVG/PNG with black + yellow strokes): the grey
   #808080 backing from 7.2 keeps black AND yellow strokes readable on a
   black or white page; give icon images a padded, rounded tile so it reads
   as a deliberate badge. Photos (.jpg) are opaque and unaffected. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(img[src$=".svg"], img[src$=".png"]):not(#a11y-x):not(.transparent-bg img):not(.black-bg img):not(#pojo-a11y-toolbar img):not(.authore-avatar img) {
    padding: 6px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

/* 7.11 mobile sticky footer buttons (WhatsApp / phone) + cookie floater:
   white border in high/negative contrast, black border in light background */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.inner-wrapper-mobile-static a, .static-whatsapp, .static-phone, #cc-floater):not(#a11y-x):not(#a11y-y) {
    border: 2px solid #fff !important;
}
html body.pojo-a11y-light-background :is(.inner-wrapper-mobile-static a, .static-whatsapp, .static-phone, #cc-floater):not(#a11y-x):not(#a11y-y) {
    border: 2px solid #000 !important;
}
/* white-on-transparent PNG icons (e.g. whitephone.png) inside those buttons
   keep the grey tile from 7.2/7.10 so they never disappear on a white page */

/* 7.12 accessibility toolbar: no underline on the menu item texts,
   in every state (incl. "links underline" mode, hover, focus, active) */
html body #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
html body #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a *,
html body #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a:is(:hover, :focus, :active, .active),
html body #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a:is(:hover, :focus, :active, .active) *,
html body #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay .pojo-a11y-toolbar-title {
    text-decoration: none !important;
}

/* 7.13 cookie banner — DEFAULT view (no accessibility option selected).
   The theme's "body p { font-size:20px }" (18px ≤680px) leaks into the
   banner's <p class="cc-body">, making the description bigger than the
   16px title. Restore the banner's own sizes: title 16px > body 14px.
   Not gated on purpose; the resize rules in 4c (!important) still take over
   when a font step is selected. */
html body .cc-root .cc-body,
html body .cc-root p {
    font-size: 14px;
    line-height: 1.5;
}
html body .cc-root .cc-title {
    font-size: 16px;
    line-height: 1.3;
}

/* 7.14 sections with a background image (hero / projects / footer):
   the plugin paints every text block with a full-width solid background,
   hiding the image. Shrink those blocks to the text itself (all are
   centred, so margin-inline:auto keeps the layout) and clear the
   backing from the form's wrapper paragraphs. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.ethos-hero-wrap, .your-projects, .ethos-footer) .text-center > :is(h1, h2, h3, h4, h5, h6, p):not(#a11y-x):not(#a11y-y) {
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.ethos-hero-wrap, .your-projects, .ethos-footer) :is(.footer-form p, .wpcf7-form-control-wrap, .screen-reader-response, .wpcf7-response-output:empty):not(#a11y-x):not(#a11y-y) {
    background: transparent !important;
    background-color: transparent !important;
}

/* 7.15 slider dots — extra ring so the (often single) active dot stands out
   clearly against the page in every contrast mode; min size 14px */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .slick-dots li button:not(#a11y-x):not(#a11y-y),
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .owl-dots .owl-dot span:not(#a11y-x):not(#a11y-y) {
    min-width: 14px !important;
    min-height: 14px !important;
    border-radius: 50% !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.slick-dots li.slick-active button, .owl-dots .owl-dot.active span):not(#a11y-x):not(#a11y-y) {
    box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff !important;
}
html body.pojo-a11y-light-background :is(.slick-dots li.slick-active button, .owl-dots .owl-dot.active span):not(#a11y-x):not(#a11y-y) {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000 !important;
}

/* 7.16 CF7 success message: centred text in every state
   (normal view, any font step, any contrast mode) */
html body .wpcf7 form.sent .wpcf7-response-output {
    text-align: center !important;
}

/* 7.17 CF7 success message in light-background mode: the box sits
   transparent over the dark footer photo, so keep its text white
   (the plugin forces #000 on everything in this mode) */
html body.pojo-a11y-light-background .wpcf7 form.sent .wpcf7-response-output:not(#a11y-x):not(#a11y-y),
html body.pojo-a11y-light-background .wpcf7 form.sent .wpcf7-response-output:not(#a11y-x):not(#a11y-y) * {
    color: #fff !important;
}

/* 7.18 cookie floater: always directly below the accessibility button and
   in the same yellow. Toolbar positions: 9vw (desktop), 48vw (≤767px),
   and responsive.css moves it to 77px when the sticky header is active
   (body.kheja-sticky-wrap, ≤680px) — the floater follows each state.
   Toggle button height: 1.5vw + 2×0.6vw (desktop), 5.8vw + 2×2vw (mobile). */
body #cc-floater {
    top: calc(9vw + 2.7vw + 0.6vw) !important;
    background: #fcb225 !important;
    background-color: #fcb225 !important;
    color: #ffffff !important;
}
body #cc-floater:hover,
body #cc-floater:focus {
    background: #fcb225 !important;
    color: #ffffff !important;
}
@media (max-width: 767px) {
    body #cc-floater { top: calc(48vw + 9.8vw + 2vw) !important; }
}
@media (max-width: 680px) {
    body.kheja-sticky-wrap #cc-floater { top: calc(77px + 9.8vw + 2vw) !important; }
}

/* 7.19 hero at larger font steps: the section grows with the text, but the
   background image is not "cover" on desktop, so it tiled/repeated below
   the button. Cover the whole (taller) section and give the button room. */
html body[class*="pojo-a11y-resize-font-"] .ethos-hero-wrap {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    padding-bottom: 40px !important;
}

/* 7.20 footer contact row (phone / email / address) at larger font steps:
   let the text column shrink and wrap (long e-mail) instead of running
   into the next column; columns share the row width on desktop. */
html body[class*="pojo-a11y-resize-font-"] .social-link-wrap { min-width: 0 !important; }
html body[class*="pojo-a11y-resize-font-"] .social-link-wrap .icon-copy-wrap { flex: 0 0 auto !important; }
html body[class*="pojo-a11y-resize-font-"] .social-link-wrap .content-copy-wrap { flex: 1 1 auto !important; min-width: 0 !important; }
html body[class*="pojo-a11y-resize-font-"] .social-link-wrap .content-copy-wrap a {
    display: inline-block !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}
@media (min-width: 768px) {
    html body[class*="pojo-a11y-resize-font-"] .inner-cop-right-wrap > .col-md-3 {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .inner-cop-right-wrap > .col-md-3:not(:has(*)) { display: none !important; }
}

/* 7.21 mobile sticky bar (WhatsApp / phone, ≤680px) at larger font steps:
   - text grows on the gentler toolbar curve so the bar stays compact
   - icons never shrink away (flex-shrink:0) and scale with the text
   - the page gets bottom padding equal to the bar, so the footer logo /
     copyright text scroll clear of it instead of hiding behind it */
@media (max-width: 680px) {
    html body[class*="pojo-a11y-resize-font-"][class] .inner-wrapper-mobile-static a {
        font-size: calc(18px * var(--a11y-scale-tb)) !important;
        line-height: 1.2 !important;
        min-width: 0 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .inner-wrapper-mobile-static a img {
        flex: 0 0 auto !important;
        width: calc(30px * var(--a11y-scale-tb)) !important;
        min-width: calc(30px * var(--a11y-scale-tb)) !important;
        height: auto !important;
    }
    html body[class*="pojo-a11y-resize-font-"] {
        padding-bottom: calc(2 * 18px * var(--a11y-scale-tb) * 1.2 + 30px) !important;
    }
}

/* 7.22 .site-bttn buttons: text always on ONE line at every font step.
   Longest label = 12.4em ("קבלו הצעת מחיר ייחודית עכשיו!"), buttons carry
   60px padding + 6px border inside a ~48px-padded column, so the size is
   capped at (100vw − 120px) / 12.6. Mirrors the theme's breakpoints. */
/* (no 390/330 rules: the theme's 767px "20px !important" wins there) */
html body[class*="pojo-a11y-resize-font-"][class] .site-bttn {
    white-space: nowrap !important;
    max-width: 100% !important;
    font-size: min(calc(25px * var(--a11y-scale)), calc((100vw - 120px) / 12.6)) !important;
}
@media (max-width: 1400px) { html body[class*="pojo-a11y-resize-font-"][class] .site-bttn { font-size: min(calc(22px * var(--a11y-scale)), calc((100vw - 120px) / 12.6)) !important; } }
@media (max-width: 1200px) { html body[class*="pojo-a11y-resize-font-"][class] .site-bttn { font-size: min(calc(20px * var(--a11y-scale)), calc((100vw - 120px) / 12.6)) !important; } }
@media (max-width: 767px)  { html body[class*="pojo-a11y-resize-font-"][class] .site-bttn { font-size: min(calc(20px * var(--a11y-scale)), calc((100vw - 120px) / 12.6)) !important; } }

/* 7.23 reviews slider at larger font steps: responsive.css caps the card
   area at max-height:440px (≤680px), so longer text spilled over the
   icon boxes below. Let it grow with its content. */
html body[class*="pojo-a11y-resize-font-"] .reviews-inner-wrap {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}
html body[class*="pojo-a11y-resize-font-"] .review-slider .slick-list,
html body[class*="pojo-a11y-resize-font-"] .review-slider .slick-track {
    height: auto !important;
    max-height: none !important;
}

/* 7.24 CF7 validation texts: form response message centred, field tips
   right-aligned, in every state; in light-background mode they sit over the dark
   footer photo, so white text on a transparent background */
html body .wpcf7 form .wpcf7-response-output {
    text-align: center !important;
}
/* field-level tips stay on the right (RTL start) */
html body .wpcf7 .wpcf7-not-valid-tip {
    text-align: right !important;
}
html body.pojo-a11y-light-background .wpcf7 form .wpcf7-response-output:not(#a11y-x):not(#a11y-y),
html body.pojo-a11y-light-background .wpcf7 form .wpcf7-response-output:not(#a11y-x):not(#a11y-y) *,
html body.pojo-a11y-light-background .wpcf7 .wpcf7-not-valid-tip:not(#a11y-x):not(#a11y-y) {
    color: #fff !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* 7.25 mobile sticky bar — phone button: "077-8040679" cannot wrap, so at
   larger steps text + icon overflowed the 49% button and the icon slid out.
   Icon capped at 9vw; phone text capped to what fits beside it
   (number = 5.6em bold; button = 49vw minus padding/gap/icon). */
@media (max-width: 680px) {
    html body[class*="pojo-a11y-resize-font-"] .inner-wrapper-mobile-static { --a11y-bar-ico: min(calc(30px * var(--a11y-scale-tb)), 9vw); }
    html body[class*="pojo-a11y-resize-font-"][class] .inner-wrapper-mobile-static a img {
        width: var(--a11y-bar-ico) !important;
        min-width: var(--a11y-bar-ico) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .inner-wrapper-mobile-static .static-phone {
        font-size: min(calc(18px * var(--a11y-scale-tb)), calc((49vw - 23px - var(--a11y-bar-ico)) / 5.7)) !important;
        white-space: nowrap !important;
        gap: 5px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
}

/* 7.26 content buttons (.site-bttn in hero / projects / about): grow with
   the font step AND stay on one line inside their own column.
   The column becomes an inline-size container; the font is capped at
   (column width − padding/border) ÷ label length in em
   (hero 12.4em, others ≤ 11.1em). Side padding is trimmed to 18px while a
   font step is active so there is more room for the text.
   --a11y-btn mirrors the theme's px size per breakpoint. */
html body[class*="pojo-a11y-resize-font-"] :is(.hero-content-wrp, .your-project-content, .about-contact-wrap):has(> .site-bttn) {
    container-type: inline-size;
}
/* the hero column sits in a flex row on mobile — give it a real width so the
   size container does not collapse to 0 */
html body[class*="pojo-a11y-resize-font-"] .ethos-hero-wrap > .main-hero { width: 100% !important; }
html body[class*="pojo-a11y-resize-font-"][class] :is(.hero-content-wrp, .your-project-content, .about-contact-wrap) > .site-bttn {
    --a11y-btn: 25px;
    --a11y-btn-em: 11.3;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-size: max(var(--a11y-btn), min(calc(var(--a11y-btn) * var(--a11y-scale)), calc((100cqi - 46px) / var(--a11y-btn-em)))) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .hero-content-wrp > .hero-button { --a11y-btn-em: 12.6; }
html body[class*="pojo-a11y-resize-font-"][class] .your-project-content > .site-bttn { --a11y-btn: 36px; }
@media (max-width: 1400px) { html body[class*="pojo-a11y-resize-font-"][class] :is(.hero-content-wrp, .about-contact-wrap) > .site-bttn { --a11y-btn: 22px; } }
@media (max-width: 1200px) { html body[class*="pojo-a11y-resize-font-"][class] :is(.hero-content-wrp, .about-contact-wrap) > .site-bttn { --a11y-btn: 20px; } }
/* ≤767px: the theme forces every .site-bttn to 20px !important (its 17px/15px
   rules at 390/330 never win), so 20px is the real base on phones */
@media (max-width: 767px)  { html body[class*="pojo-a11y-resize-font-"][class] :is(.hero-content-wrp, .your-project-content, .about-contact-wrap) > .site-bttn { --a11y-btn: 20px; } }

/* 7.27 no sideways page scroll at large font steps on phones.
   Sources: advantages headings in the 2-column grid, and the submit
   button (theme: width 100% + margin-right 7px). overflow-x:clip (not
   hidden) keeps the sticky header working. */
@media (max-width: 680px) {
    html body[class*="pojo-a11y-resize-font-"] .advantages-wrap .col {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .form-submit-footr input[type=submit] {
        margin-right: 0 !important;
        max-width: 100% !important;
    }
}
html:has(body[class*="pojo-a11y-resize-font-"]),
html body[class*="pojo-a11y-resize-font-"] {
    overflow-x: clip !important;
}

/* 7.28 gallery expand / collapse icons: the clickable area was only
   42×21px. Enlarge the hit area with transparent padding, pulled back with
   an equal negative margin so the icon stays exactly where it was. */
.tab-gallery-wrap-2 .galler-oppner,
.tab-gallery-wrap-2 .galler-closer {
    padding: 10px;
    margin: -10px;
    line-height: 0;
}

/* 7.29 mobile menu (≤1000px), ALL states (normal view too): responsive.css
   pins the open menu at a fixed top:135px, but the header height changes —
   it grows with larger font steps (~175px at 200, menu covered it) and
   shrinks to ~78px when the sticky header kicks in (57px gap). Anchor the menu to
   the header's real bottom edge instead: .ethos-header-wrap is sticky, so it
   is the containing block for an absolutely positioned menu. */
@media (max-width: 1000px) {
    html body .ethos-header-wrap .ethos-nave-bar {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        overflow-y: auto !important;
    }
}

/* 7.30 mobile sticky bar (≤680px) — DEFAULT view too: the fixed WhatsApp /
   phone bar (74px tall when the WhatsApp label wraps to 2 lines) covered the
   footer logo and copyright text because the page had no bottom space.
   Reserve room for it: 2 lines × 27px + 12px link padding + 8px bar padding
   + 10px gap. The font-step rule in 7.21 (!important) still wins while a
   step is active. */
@media (max-width: 680px) {
    html body { padding-bottom: 84px; }
}