/*
Theme Name: Ausability
Theme URI: https://ausability.com.au
Description: Child theme of Hello Elementor for Ausability. Carries the brand tokens, the 8pt fluid spacing system and the accessibility CSS, so that none of it depends on an Elementor Pro licence being active.
Author: The Business Boost
Author URI: https://thebusinessboost.com
Template: hello-elementor
Version: 1.3.6
Text Domain: ausability
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root{
  --s-1:8px;  --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px;
  --s-6:48px; --s-7:64px; --s-8:80px; --s-9:96px; --s-10:128px;
  --radius-soft:40px;
}

/* ==========================================================================
   2. Text resize control
   All typography is set in rem, so changing the root size scales the site.
   ========================================================================== */
html{ font-size:16px; }
html[data-type-scale="2"]{ font-size:18px; }
html[data-type-scale="3"]{ font-size:20px; }

/* ==========================================================================
   3. High contrast mode
   Overrides Elementor's global colour variables.
   ========================================================================== */
html[data-contrast="high"]{
  --e-global-color-primary:#000000;   /* Navy    */
  --e-global-color-secondary:#000000; /* Ink     */
  --e-global-color-text:#000000;      /* Body    */
  --e-global-color-accent:#B30F36;    /* Crimson */
  --e-global-color-ausdeep:#000000;
  --e-global-color-aussand:#FFFFFF;
  --e-global-color-auspapr:#FFFFFF;
  --e-global-color-ausmutd:#000000;
}
html[data-contrast="high"] img{ filter:contrast(1.15); }

/* ==========================================================================
   4. Focus. Never remove these on this site.
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--e-global-color-accent, #DD1745);
  outline-offset:2px;
}
a[href^="tel:"]{ white-space:nowrap; }

/* ==========================================================================
   5. Fluid spacing system, 8pt
   Clamp middle terms are DERIVED for a 360px to 1280px viewport range against
   the min and max either side. If you edit a min or max, regenerate:
     slope = (maxpx - minpx) / 920
     vw    = slope * 100
     rem   = (minpx - slope * 360) / 16
   rem padding scales with the text-resize control on purpose.
   ========================================================================== */
:root{
  --pad-side-min:1rem;  --pad-side-max:6rem;
  --sec-xxl-min:4rem;   --sec-xxl-max:8rem;
  --sec-xl-min:3rem;    --sec-xl-max:6rem;
  --sec-l-min:2.5rem;   --sec-l-max:5rem;
  --sec-m-min:2rem;     --sec-m-max:4rem;
  --sec-s-min:1.5rem;   --sec-s-max:3rem;
  --sec-xs-min:1rem;    --sec-xs-max:2rem;
  --sec-xxs-min:1rem;   --sec-xxs-max:1.5rem;
  --sec-hero-height:51.5rem;
  --sec-offset-header:7rem;
  --sec-narrow:78rem;
  --sec-narrow-xs:45rem;
  --pad-side:clamp(var(--pad-side-min), 8.696vw - 0.957rem, var(--pad-side-max));
}
.section-xxl{padding-block:clamp(var(--sec-xxl-min),6.957vw + 2.435rem,var(--sec-xxl-max))}
.section-xl{padding-block:clamp(var(--sec-xl-min),5.217vw + 1.826rem,var(--sec-xl-max))}
.section-l{padding-block:clamp(var(--sec-l-min),4.348vw + 1.522rem,var(--sec-l-max))}
.section-m{padding-block:clamp(var(--sec-m-min),3.478vw + 1.217rem,var(--sec-m-max))}
.section-s{padding-block:clamp(var(--sec-s-min),2.609vw + 0.913rem,var(--sec-s-max))}
.section-xs{padding-block:clamp(var(--sec-xs-min),1.739vw + 0.609rem,var(--sec-xs-max))}
.section-xxs{padding-block:clamp(var(--sec-xxs-min),0.870vw + 0.804rem,var(--sec-xxs-max))}

/* !important is required. Elementor writes per-element padding at higher
   specificity than a single class, so without it these rules do nothing. */
.section-xxl,.section-xl,.section-l,.section-m,
.section-s,.section-xs,.section-xxs,.section-sides{padding-inline:var(--pad-side)!important}

.section-hero{min-height:var(--sec-hero-height)}
.section-hero > .e-con-inner{justify-content:center}
.section-full > .e-con-inner{max-width:100%}
.section-bleed{padding-inline:0!important}
.section-narrow > .e-con-inner{max-width:var(--sec-narrow)}
.section-narrow-xs > .e-con-inner{max-width:var(--sec-narrow-xs)}
.section-offset{padding-top:var(--sec-offset-header)!important}

/* ==========================================================================
   6. Areas of the home table
   Lives here rather than inline so it can be reused on any page.
   ========================================================================== */
.aus-areas{width:100%;border-collapse:collapse;border:0;table-layout:fixed;font-family:Archivo,system-ui,sans-serif}
.aus-areas caption.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.aus-areas thead th{background:var(--e-global-color-primary,#2E2A6E);color:#fff;text-align:left;font-size:1rem;line-height:1.5rem;font-weight:700;padding:1.5rem 2rem}
.aus-areas tbody th{text-align:left;color:var(--e-global-color-primary,#2E2A6E);font-size:1.5rem;line-height:2rem;font-weight:700;padding:2rem;vertical-align:top;width:26%}
.aus-areas tbody td{color:var(--e-global-color-text,#4C4560);font-size:1.125rem;line-height:2rem;padding:2rem;vertical-align:top}
.aus-areas tbody td:first-of-type{width:42%}
.aus-areas tbody tr:nth-child(odd){background:#fff}
.aus-areas tbody tr:nth-child(even){background:var(--e-global-color-aussand,#F4EEE7)}
.aus-areas th,.aus-areas td{border:0!important;box-shadow:none!important}
.aus-areas tr{border:0!important}
@media(max-width:767px){
  .aus-areas,.aus-areas thead,.aus-areas tbody,.aus-areas tr,.aus-areas th,.aus-areas td{display:block;width:auto}
  .aus-areas thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .aus-areas tbody tr{margin-bottom:1.5rem;padding:0.5rem 0}
  .aus-areas tbody th,.aus-areas tbody td{width:auto;padding:1rem 1.5rem}
  .aus-areas tbody td::before{content:attr(data-label);display:block;font-size:.875rem;font-weight:700;color:var(--e-global-color-primary,#2E2A6E);margin-bottom:.25rem}
}
/* 6b. Mobile card fix (25 Sep 2026).
   Hello Elementor paints a grey stripe on every cell, and the desktop
   td:first-of-type{width:42%} out-ranks the plain td rule above, so on a phone
   "The work" was squeezed into a 42% column beside an empty white block.
   Cells go transparent so the row carries the colour, and each row becomes a
   sand card on the white section. */
.aus-areas tbody th,.aus-areas tbody td{background-color:transparent!important}
@media(max-width:767px){
  .aus-areas tbody td:first-of-type{width:auto}
  .aus-areas tbody tr,.aus-areas tbody tr:nth-child(odd),.aus-areas tbody tr:nth-child(even){background:#F7F1EA;border-radius:.75rem;overflow:hidden;margin-bottom:1rem;padding:0}
  .aus-areas tbody tr:last-child{margin-bottom:0}
  .aus-areas tbody th{font-size:1.25rem;line-height:1.75rem;padding:1.5rem 1.5rem .25rem}
  .aus-areas tbody td{font-size:1rem;line-height:1.625rem;padding:.75rem 1.5rem 0}
  .aus-areas tbody td:last-child{padding-bottom:1.5rem}
}

/* ==========================================================================
   7. Sticky header scroll state
   Elementor adds .elementor-sticky--effects to the sticky wrapper once the
   page scrolls past the effects offset. Everything below hangs off that.

   Resting:  floating white pill, 96px tall, inset by the fluid side padding.
   Scrolled: full width, square corners, 72px tall, hairline rule underneath.

   Timing matches the PDC build: 0.4s ease-in-out.
   ========================================================================== */
.elementor-location-header .e-con.elementor-sticky{
  transition:padding .4s ease-in-out;
}
.elementor-location-header .e-con.elementor-sticky > .e-con{
  transition:min-height .4s ease-in-out, border-radius .4s ease-in-out,
             padding .4s ease-in-out, box-shadow .4s ease-in-out,
             border-bottom-color .4s ease-in-out;
  border-bottom:2px solid transparent;
}
.elementor-location-header .elementor-widget-image img{
  transition:width .4s ease-in-out;
}

/* Scrolled state. Four classes so it beats Elementor's per-element rules
   without needing !important on everything. */
.elementor-location-header .elementor-element.e-con.elementor-sticky--effects{
  padding:0 !important;
}
.elementor-location-header .elementor-element.e-con.elementor-sticky--effects > .e-con{
  min-height:4.5rem;
  border-radius:0;
  border-bottom-color:rgba(46,42,110,.15);
  padding-inline:var(--pad-side) !important;
  box-shadow:0 1px 12px rgba(20,18,45,.06);
}
.elementor-location-header .elementor-sticky--effects .elementor-widget-image img{
  width:12rem !important;
}

/* 7b. Mobile header (25 Sep 2026).
   At phone width the logo widget was a fixed share of the bar while the
   image inside overflowed it, the hidden dropdown <nav> sat in the flow and
   took 150px, and the phone pill ran off the right edge. Now: logo left,
   phone as a 44px icon button, navy menu button on the far right, and the
   dropdown drops as a card under the bar instead of taking up room in it.
   The phone link keeps its spaced-digit aria-label, so hiding the visible
   number costs screen reader users nothing. */
@media(max-width:767px){
  .elementor-location-header .elementor-element.e-con.elementor-sticky{padding:.75rem 1rem 0 !important}
  .elementor-location-header .elementor-element.e-con.elementor-sticky--effects{padding:0 !important}
  .elementor-location-header .elementor-element.e-con.elementor-sticky > .e-con,
  .elementor-location-header .elementor-element.e-con.elementor-sticky--effects > .e-con{min-height:4rem;padding:0 .625rem 0 1.25rem !important;gap:.5rem;flex-wrap:nowrap;align-items:center;position:relative}
  .elementor-location-header .elementor-element.e-con.elementor-sticky--effects > .e-con{padding-left:1rem !important}
  .elementor-location-header .elementor-widget-image{width:auto !important;max-width:none !important;flex:0 1 auto !important;margin-right:auto !important}
  /* Resting logo size comes from the header template's own mobile Image
     width, so it can be changed in Elementor. Only the scrolled size is set here. */
  .elementor-location-header .elementor-widget-image img{max-width:100%;height:auto}
  .elementor-location-header .elementor-sticky--effects .elementor-widget-image img{width:10.5rem !important}
  .elementor-location-header .elementor-widget-heading{order:2 !important;width:auto !important;flex:0 0 auto !important}
  .elementor-location-header .elementor-widget-nav-menu{order:3 !important;width:auto !important;flex:0 0 auto !important;position:static !important}
  .elementor-location-header a[href^="tel:"]{font-size:0 !important;width:2.75rem;height:2.75rem;padding:0 !important;display:flex !important;align-items:center;justify-content:center;border-radius:999px;box-sizing:border-box}
  .elementor-location-header a[href^="tel:"]::before{font-size:1.125rem !important;margin:0 !important;line-height:1}
  .elementor-location-header .elementor-menu-toggle{width:2.75rem;height:2.75rem;padding:0 !important;border-radius:999px !important;background-color:var(--e-global-color-primary,#2E2A6E) !important;color:#fff !important;display:flex !important;align-items:center;justify-content:center}
  .elementor-location-header .elementor-menu-toggle svg{fill:#fff !important;width:1.25rem !important;height:1.25rem !important}
  .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container{position:absolute !important;left:0;right:0;top:calc(100% + .5rem);width:auto !important;margin:0 !important;background:#fff;border-radius:1rem;box-shadow:0 12px 32px rgba(20,18,45,.16);overflow:hidden;z-index:100}
}

/* 7c. Tablet header, 768 to 1024px (25 Sep 2026).
   Same cure as mobile, but the phone keeps its number because there is room.
   Logo left, phone pill and a 48px navy menu button grouped on the right,
   dropdown as a 20rem card under the button. The max-height rule stops
   Elementor's measured inline max-height clipping the open menu to one item
   now the dropdown is absolutely positioned (applies to mobile too). */
@media(min-width:768px) and (max-width:1024px){
  .elementor-location-header .elementor-element.e-con.elementor-sticky > .e-con,
  .elementor-location-header .elementor-element.e-con.elementor-sticky--effects > .e-con{flex-wrap:nowrap;align-items:center;gap:.75rem;position:relative;padding-right:1rem !important}
  .elementor-location-header .elementor-widget-image{width:auto !important;max-width:none !important;flex:0 1 auto !important;margin-right:auto !important}
  .elementor-location-header .elementor-widget-heading{order:2 !important;width:auto !important;flex:0 0 auto !important}
  .elementor-location-header .elementor-widget-nav-menu{order:3 !important;width:auto !important;flex:0 0 auto !important;position:static !important}
  .elementor-location-header .elementor-menu-toggle{width:3rem;height:3rem;padding:0 !important;border-radius:999px !important;background-color:var(--e-global-color-primary,#2E2A6E) !important;color:#fff !important;display:flex !important;align-items:center;justify-content:center}
  .elementor-location-header .elementor-menu-toggle svg{fill:#fff !important;width:1.375rem !important;height:1.375rem !important}
  .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container{position:absolute !important;left:auto;right:0;top:calc(100% + .5rem);width:20rem !important;margin:0 !important;background:#fff;border-radius:1rem;box-shadow:0 12px 32px rgba(20,18,45,.16);overflow:hidden;z-index:100}
}
@media(max-width:1024px){
  .elementor-location-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container{max-height:calc(100vh - 8rem) !important;overflow-y:auto}
}

/* Someone who has asked for less motion gets the end state, not the animation. */
@media (prefers-reduced-motion: reduce){
  .elementor-location-header .e-con.elementor-sticky,
  .elementor-location-header .e-con.elementor-sticky > .e-con,
  .elementor-location-header .elementor-widget-image img{
    transition:none !important;
  }
}

/* 7e. Small laptops, 1025 to 1365px (30 Sep 2026).
   With the larger logo Ian asked for, the full menu wrapped "Contact" onto a
   second line below about 1366px. In this range the logo may shrink (never
   below 13rem), the phone pill and menu may not, the menu never wraps, and
   menu type steps down from 20px to 17px with tighter item padding. */
@media(min-width:1025px) and (max-width:1365px){
  .elementor-location-header .elementor-widget-image{flex-shrink:1 !important;min-width:13rem}
  .elementor-location-header .elementor-widget-image img{width:100%;height:auto}
  .elementor-location-header .elementor-widget-heading{flex-shrink:0 !important;width:auto !important;max-width:none !important}
  .elementor-location-header .elementor-widget-nav-menu{flex-shrink:0 !important}
  .elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu{flex-wrap:nowrap !important}
  .elementor-location-header .elementor-nav-menu--main .elementor-item{font-size:1.0625rem !important;padding-left:.625rem !important;padding-right:.625rem !important;white-space:nowrap}
}

/* 7e (cont). At 1025 to 1150px the phone pill still ran off the bar, so the
   bar's side padding comes in and the menu steps down again to 16px. */
@media(min-width:1025px) and (max-width:1150px){
  .elementor-location-header .elementor-element.e-con.elementor-sticky > .e-con{padding-left:1.5rem !important;padding-right:1.5rem !important;gap:1rem}
  .elementor-location-header .elementor-widget-image{min-width:12rem}
  .elementor-location-header .elementor-nav-menu--main .elementor-item{font-size:1rem !important;padding-left:.5rem !important;padding-right:.5rem !important}
}

/* 7d. Header phone icon (30 Sep 2026).
   The template drew the icon with the text character U+260E, which iOS
   swaps for its red colour emoji and sits off-centre in the round button.
   Replaced with a line icon drawn as a mask, so it takes the link colour
   (navy, white on hover) and centres exactly. Sized in rem so the mobile
   font-size:0 trick on the link does not shrink it. */
.elementor-location-header a[href^="tel:"]::before{
  content:"" !important;display:block;flex:0 0 auto;
  width:1.125rem;height:1.125rem;font-size:0 !important;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}
html[data-contrast="high"] .elementor-location-header a[href^="tel:"]::before{background-color:#fff}

/* ==========================================================================
   8. Display controls
   The text size and high contrast rail. This is the site's point of
   difference, so it is built natively rather than with an overlay plugin.
   Markup is printed by the child theme in wp_footer, behaviour in a11y.js.
   ========================================================================== */
.aus-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.aus-a11y{
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:9999;display:flex;flex-direction:column;
  box-shadow:0 4px 24px rgba(20,18,45,.18);
  border-radius:.5rem 0 0 .5rem;overflow:hidden;
}
.aus-a11y__btn{
  appearance:none;-webkit-appearance:none;
  width:3.5rem;min-height:3.5rem;                 /* 56px, well over the 44px minimum */
  display:flex;align-items:center;justify-content:center;
  border:0;margin:0;padding:0;cursor:pointer;
  background:#fff;color:var(--e-global-color-primary,#2E2A6E);
  font-family:Archivo,system-ui,sans-serif;font-weight:700;line-height:1;
  border-bottom:1px solid rgba(46,42,110,.12);
  transition:background-color .15s ease, color .15s ease;
}
.aus-a11y__btn:last-child{border-bottom:0}
.aus-a11y__a1{font-size:.875rem}
.aus-a11y__a2{font-size:1.125rem}
.aus-a11y__a3{font-size:1.5rem}
.aus-a11y__btn:hover{background:var(--e-global-color-aussand,#F4EEE7)}
.aus-a11y__btn[aria-pressed="true"]{
  background:var(--e-global-color-primary,#2E2A6E);color:#fff;
}
.aus-a11y__contrast{background:var(--e-global-color-accent,#DD1745)}
.aus-a11y__contrast .aus-a11y__half{
  width:1.5rem;height:1.5rem;border-radius:50%;
  background:linear-gradient(90deg,#fff 50%,rgba(255,255,255,.25) 50%);
  border:2px solid #fff;box-sizing:border-box;display:block;
}
.aus-a11y__contrast[aria-pressed="true"]{background:var(--e-global-color-secondary,#16141F)}

/* The rail scales with the text size control, so keep it off the content
   on narrow screens by dropping it to a bar along the bottom. */
@media (max-width:767px){
  .aus-a11y{
    top:auto;bottom:0;right:0;left:0;transform:none;
    flex-direction:row;border-radius:0;
    box-shadow:0 -2px 16px rgba(20,18,45,.18);
  }
  .aus-a11y__btn{flex:1 1 0;border-bottom:0;border-right:1px solid rgba(46,42,110,.12)}
  .aus-a11y__btn:last-child{border-right:0}
  /* stop the bar covering the end of the page */
  body{padding-bottom:3.5rem}
}

@media (prefers-reduced-motion: reduce){
  .aus-a11y__btn{transition:none}
}

/* In high contrast mode the rail itself has to stay legible. */
html[data-contrast="high"] .aus-a11y__btn{background:#fff;color:#000;border-color:#000}
html[data-contrast="high"] .aus-a11y__btn[aria-pressed="true"]{background:#000;color:#fff}
html[data-contrast="high"] .aus-a11y__contrast{background:#000}

/* ==========================================================================
   9. High contrast mode, applied
   Overriding the Elementor global colour variables is not enough on its own:
   the page was built with literal hex values, so Elementor writes those
   straight into its generated CSS and the variables never get consulted.
   These rules force the palette instead.

   The model is the conventional one: white ground, black text, black borders,
   one accent reserved for links and focus. Everything clears 7:1.
   ========================================================================== */
html[data-contrast="high"]{
  --aus-hc-link:#A30E31;   /* 7.9:1 on white, clears AAA */
}

/* Grounds */
html[data-contrast="high"] body,
html[data-contrast="high"] [data-elementor-type] .e-con,
html[data-contrast="high"] [data-elementor-type] .e-con-inner,
html[data-contrast="high"] .aus-areas tbody tr,
html[data-contrast="high"] .aus-areas tbody tr:nth-child(even){
  background-color:#fff !important;
  background-image:none !important;
}

/* Text */
html[data-contrast="high"] [data-elementor-type] .e-con,
html[data-contrast="high"] .elementor-heading-title,
html[data-contrast="high"] .elementor-widget-text-editor,
html[data-contrast="high"] .elementor-widget-text-editor p,
html[data-contrast="high"] .elementor-icon-list-text,
html[data-contrast="high"] .aus-areas th,
html[data-contrast="high"] .aus-areas td,
html[data-contrast="high"] p, html[data-contrast="high"] li,
html[data-contrast="high"] h1, html[data-contrast="high"] h2,
html[data-contrast="high"] h3, html[data-contrast="high"] h4{
  color:#000 !important;
}

/* Links stay distinguishable by more than colour */
html[data-contrast="high"] [data-elementor-type] a,
html[data-contrast="high"] .elementor-heading-title a{
  color:var(--aus-hc-link) !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
}

/* Buttons and pills read as controls, not decoration */
html[data-contrast="high"] .elementor-button,
html[data-contrast="high"] [data-elementor-type] a[href^="/contact"],
html[data-contrast="high"] [data-elementor-type] a[href^="tel:"]{
  background:#000 !important;color:#fff !important;
  border:2px solid #000 !important;text-decoration:none !important;
}

/* The table needs its structure back once the zebra striping is gone */
html[data-contrast="high"] .aus-areas thead th{
  background:#000 !important;color:#fff !important;
}
html[data-contrast="high"] .aus-areas th,
html[data-contrast="high"] .aus-areas td{
  border:1px solid #000 !important;
}

/* Header keeps its shape but gains a hard edge */
html[data-contrast="high"] .elementor-location-header .e-con > .e-con{
  border:2px solid #000 !important;
}

/* Photographs stay, but the hero scrims are removed so the text underneath
   is on a solid ground rather than a gradient over an image. */
html[data-contrast="high"] [data-elementor-type="wp-page"] > .e-con:first-child > img,
html[data-contrast="high"] [data-elementor-type="wp-page"] > .e-con:first-child::before,
html[data-contrast="high"] [data-elementor-type="wp-page"] > .e-con:first-child::after{
  display:none !important;
}
html[data-contrast="high"] [data-elementor-type="wp-page"] > .e-con:first-child{
  background-image:none !important;min-height:0 !important;
}