@charset "UTF-8";
/* ==========================================================================
   Edward Hall - Elementor bridge
   Makes classic Elementor containers + widgets render exactly like the
   static design. Loaded after site.css.

   How the page is built in Elementor:
   - Every container uses "Full width" and the design's class names
     (Advanced > CSS Classes), e.g. "section bg-light", "container", "card-grid".
   - Headings/labels: Heading widget. Small labels (subtitle, tag, num, role,
     avatar, price, link-arrow, stat-num) also carry the class "eh-plain" so
     they take their look from the label class instead of heading defaults.
   - Buttons: Button widget with "eh-btn eh-btn--yellow|navy|outline-light"
     (+ "eh-btn--sm").
   - Cover photos: Image widget with class "eh-fill".
   ========================================================================== */

/* ---------- 1. Neutralise Elementor's default spacing inside the page ---------- */
body.eh-site{--kit-widget-spacing:0px}
body.eh-site .elementor .e-con{
  --padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;
  --padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;
  --container-default-padding-top:0px;--container-default-padding-right:0px;
  --container-default-padding-bottom:0px;--container-default-padding-left:0px;
  --container-default-padding-block-start:0px;--container-default-padding-block-end:0px;
  --container-default-padding-inline-start:0px;--container-default-padding-inline-end:0px;
  --gap:0px;--row-gap:0px;--column-gap:0px;
}
body.eh-site .elementor .elementor-element{--widgets-spacing:0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;--kit-widget-spacing:0px}
/* Same specificity as Elementor's own rule (loads later, so wins) but lower
   than the design's label classes, so .subtitle/.num/.avatar keep their margins */
:where(body.eh-site) .elementor-widget:not(:last-child){margin-block-end:0;margin-bottom:0}
body.eh-site :where(.elementor .elementor-widget-container){margin:0;padding:0}
/* Child containers size like normal blocks (design classes still set widths) */
body.eh-site :where(.elementor .e-con){width:auto;--width:auto}

/* ---------- 2. Widget typography resets (low specificity: design rules still win) ---------- */
body.eh-site :where(.elementor-widget-heading) .elementor-heading-title{font-family:var(--font-head);font-weight:700;color:var(--ink);line-height:1.2;margin:0;padding:0}
body.eh-site :where(.elementor-widget-heading.eh-plain) .elementor-heading-title{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;line-height:inherit}
body.eh-site :where(.elementor-widget-heading) .elementor-heading-title a{color:inherit;font:inherit}
body.eh-site :where(.elementor-widget-text-editor){color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit}

/* ---------- 3. Buttons (Button widget + eh-btn classes) ---------- */
body.eh-site .eh-btn .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);font-size:12px;font-weight:600;line-height:1;
  text-transform:uppercase;letter-spacing:.06em;text-decoration:none;
  padding:15px 28px;border:2px solid transparent;border-radius:2px;cursor:pointer;
  background:transparent;color:inherit;box-shadow:none;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
body.eh-site .eh-btn .elementor-button:hover{transform:translateY(-2px)}
body.eh-site .eh-btn.eh-btn--sm .elementor-button{padding:12px 20px}
body.eh-site .eh-btn--yellow .elementor-button{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
body.eh-site .eh-btn--yellow .elementor-button:hover,
body.eh-site .eh-btn--yellow .elementor-button:focus{background:var(--navy);border-color:var(--navy);color:#fff}
body.eh-site .on-dark .eh-btn--yellow .elementor-button:hover,
body.eh-site .on-dark .eh-btn--yellow .elementor-button:focus{background:#fff;border-color:#fff;color:var(--navy)}
body.eh-site .eh-btn--navy .elementor-button{background:var(--navy);border-color:var(--navy);color:#fff}
body.eh-site .eh-btn--navy .elementor-button:hover,
body.eh-site .eh-btn--navy .elementor-button:focus{background:transparent;border-color:var(--navy);color:var(--navy)}
body.eh-site .eh-btn--outline-light .elementor-button{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
body.eh-site .eh-btn--outline-light .elementor-button:hover,
body.eh-site .eh-btn--outline-light .elementor-button:focus{background:#fff;border-color:#fff;color:var(--navy)}
body.eh-site .eh-btn .elementor-button .elementor-button-text{color:inherit}

/* ---------- 4. Flex rows (Elementor containers default to columns) ---------- */
body.eh-site .elementor .btn-row,
body.eh-site .elementor .section-head--row{flex-direction:row}
body.eh-site .elementor .btn-row>.elementor-element,
body.eh-site .elementor .section-head--row>.elementor-element{width:auto;flex:0 1 auto}

/* ---------- 5. Cover images (Image widget with class eh-fill) ---------- */
body.eh-site .elementor .media,
body.eh-site .elementor .work{position:relative;overflow:hidden}
body.eh-site .elementor .elementor-widget-image.eh-fill{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:0}
body.eh-site .elementor .elementor-widget-image.eh-fill .elementor-widget-container,
body.eh-site .elementor .elementor-widget-image.eh-fill a{display:block;height:100%}
body.eh-site .elementor .elementor-widget-image.eh-fill img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0}

/* Service cards: tag over the photo, whole card clickable via the title link */
body.eh-site .elementor .svc-card>.elementor-widget{position:static}
body.eh-site .elementor .media>.elementor-widget.tag{position:absolute;left:0;bottom:0;z-index:1}
body.eh-site .elementor .svc-card .eh-card-title a::after{content:"";position:absolute;inset:0;z-index:1}

/* Elementor's container overlay layer must never block clicks */
body.eh-site .elementor .e-con::before{pointer-events:none}

/* ---------- 6. Container pseudo-element overlays
   (Elementor uses .e-con::before for its own overlay; restore the design's) ---------- */
body.eh-site .elementor .hero::before,
body.eh-site .elementor .split-panel::before,
body.eh-site .elementor .contact-faq::before{opacity:1;mix-blend-mode:normal;width:auto;height:auto;border:0;border-radius:0;transition:none;z-index:-1}
body.eh-site .elementor .hero::before,
body.eh-site .elementor .split-panel::before{inset:0}
body.eh-site .elementor .contact-faq::before{left:0;right:0;bottom:0}
body.eh-site .elementor .media-frame::before{opacity:1;mix-blend-mode:normal;width:auto;height:auto;inset:24px -24px -24px 24px;border:3px solid var(--yellow);border-radius:0;z-index:-1}
body.eh-site .elementor .work::before,
body.eh-site .elementor .work:hover::before{opacity:1;mix-blend-mode:normal;top:auto;bottom:0;left:0;height:4px;border:0;border-radius:0;transition:width .4s ease;z-index:3}
body.eh-site .elementor .work::before{width:0}
body.eh-site .elementor .work:hover::before{width:100%}
body.eh-site .elementor .work::after{z-index:1}
body.eh-site .elementor .work .work-body{z-index:2}
body.eh-site .elementor .work:hover .eh-fill img{transform:scale(1.06)}
body.eh-site .elementor .work .eh-fill img{transition:transform .7s ease}
body.eh-site .elementor .media-frame .media{position:relative}

/* ---------- 7. Text pieces that were raw elements in the static build ---------- */
body.eh-site .stat .stat-num{display:block;font-family:var(--font-head);font-size:30px;font-weight:700;color:var(--ink);line-height:1.1;margin-bottom:10px}
body.eh-site .stat .stat-label{display:block;font-size:12.5px;line-height:1.55;max-width:210px}

body.eh-site .eh-checklist ul{margin-top:22px}
body.eh-site .eh-checklist li{display:flex;gap:12px;align-items:baseline;padding:5px 0;color:var(--ink);font-weight:600;font-size:14px}
body.eh-site .eh-checklist li::before{content:"\2713";color:var(--yellow-600);font-weight:700}

body.eh-site .eh-ticklist ul{margin-top:24px}
body.eh-site .eh-ticklist li{display:flex;gap:14px;align-items:center;padding:9px 0;font-family:var(--font-head);font-weight:600;font-size:14.5px;color:var(--navy)}
body.eh-site .eh-ticklist li::before{content:"\2713";width:26px;height:26px;flex:0 0 26px;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:var(--yellow);font-size:12px}

body.eh-site .split-text{font-size:14.5px}
body.eh-site .info-card .elementor-widget-text-editor{flex:1}
body.eh-site .info-card--wide{margin-top:24px}
body.eh-site .info-card--wide .elementor-widget-text-editor{flex:none}
body.eh-site .section-head.section-head--tight{margin-bottom:34px}
body.eh-site .work-small{font-size:12.5px}
body.eh-site .testi-quote{font-size:13.5px}
body.eh-site .testi--cta .eh-btn{margin-top:20px;align-self:flex-start}
body.eh-site .eh-form-intro{font-size:13.5px;margin-bottom:10px}
body.eh-site .overlap-feature .eh-btn,
body.eh-site .info-card .link-arrow{align-self:flex-start}
body.eh-site .link-arrow a:hover{color:var(--yellow-600)}

/* Placeholder marker inside widgets */
body.eh-site .elementor .ph{background:rgba(246,180,44,.18);outline:1px dashed var(--yellow-600);outline-offset:1px;padding:0 4px;border-radius:2px}

/* ---------- 8. Elementor editor: keep everything visible while editing ---------- */
body.elementor-editor-active .reveal,
body.elementor-editor-preview .reveal{opacity:1!important;transform:none!important}

/* ---------- 9. Header built in Elementor ----------
   Structure: container#siteHeader.site-header > .container >
     .header-top (email heading + Social Icons)  and
     .header-main (logo heading, WordPress Menu widget #primaryNav.nav, .header-actions [button + menu toggle HTML]) */
body.eh-site .elementor .header-top,
body.eh-site .elementor .header-main,
body.eh-site .elementor .header-actions,
body.eh-site .elementor .footer-bottom{flex-direction:row}
body.eh-site .elementor .header-top>.elementor-element,
body.eh-site .elementor .header-main>.elementor-element,
body.eh-site .elementor .header-actions>.elementor-element{width:auto;flex:0 0 auto}
body.eh-site .elementor .footer-bottom>.elementor-element{width:auto;flex:0 1 auto;min-width:0}
body.eh-site .elementor .header-main>.nav{flex:0 1 auto}

/* Logo (Heading widget whose title holds the EH mark + name) */
body.eh-site .logo .elementor-heading-title a,
body.eh-site .logo .elementor-heading-title{display:inline-flex;align-items:center;gap:10px;color:#fff}
body.eh-site .logo .logo-text{line-height:1.15}

/* Email link */
body.eh-site .header-contact a:hover{color:#fff}

/* Social Icons widget -> small yellow squares */
body.eh-site .socials .elementor-social-icons-wrapper{display:flex;gap:8px;margin:0}
body.eh-site .socials .elementor-grid-item{margin:0;padding:0}
body.eh-site .socials .elementor-social-icon{
  --icon-size:11px;--icon-padding:0px;--e-social-icon-icon-color:var(--navy);
  width:26px;height:26px;display:grid;place-items:center;border-radius:2px;
  background:var(--yellow);color:var(--navy);font-size:11px;line-height:1;transition:background .2s;
}
body.eh-site .socials .elementor-social-icon i{color:var(--navy)}
body.eh-site .socials .elementor-social-icon svg{fill:var(--navy);width:11px;height:11px}
body.eh-site .socials .elementor-social-icon:hover{background:#fff;opacity:1}

/* WordPress "Navigation Menu" widget -> design nav */
body.eh-site .nav ul,
body.eh-site .footer-links ul{list-style:none;margin:0;padding:0}
body.eh-site .nav ul.menu{display:flex;align-items:center;gap:30px}
body.eh-site .nav .sub-menu{display:none}
body.eh-site .nav h5,body.eh-site .footer-links h5{display:none}
body.eh-site .nav li a{display:block;font-family:var(--font-head);font-size:13px;font-weight:500;color:rgba(255,255,255,.88);padding:6px 0;transition:color .2s}
body.eh-site .nav li a:hover,
body.eh-site .nav li a[aria-current="page"],
body.eh-site .nav li.current-menu-item>a{color:var(--yellow)}

/* Menu toggle lives in an HTML widget */
body.eh-site .header-actions .elementor-widget-html{line-height:0}

/* Footer menus / lists */
body.eh-site .footer-links li{margin-bottom:9px}
body.eh-site .footer-links li a:hover{color:var(--yellow)}
body.eh-site .footer-grid .logo{margin-bottom:0}
body.eh-site .footer-bottom .legal p{color:rgba(255,255,255,.5)}
body.eh-site .eh-backtop .elementor-heading-title a{color:#fff}
body.eh-site .eh-backtop .elementor-heading-title a:hover{color:var(--yellow)}

/* Logged-in admin bar: keep the overlaid header below it */
body.admin-bar.eh-site .site-header{top:32px}
@media (max-width:782px){ body.admin-bar.eh-site .site-header{top:46px} }
@media (max-width:600px){ body.admin-bar.eh-site .site-header.is-fixed{top:0} }

/* Editing the header/footer template itself: show it on navy so white text is visible */
body.single-elementor-hf.eh-site,
body.single-elementor_library.eh-site{background:var(--navy)}
body.single-elementor-hf.eh-site .site-header,
body.single-elementor_library.eh-site .site-header{position:relative}

@media (max-width:900px){
  body.eh-site .nav ul.menu{flex-direction:column;align-items:stretch;gap:0}
  body.eh-site .nav li a{padding:14px}
  body.eh-site .nav li:not(:last-child) a{border-bottom:1px solid rgba(255,255,255,.07)}
}
@media (max-width:640px){
  body.eh-site .header-actions .eh-btn{display:none}
  body.eh-site .elementor .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- 10. Page title banner (Hello's page title, "Default" page template) ----------
   Pages that show their WordPress title get a navy banner behind the
   transparent header, like the design's page heroes. Once a page has its own
   Elementor hero, switch it to "Elementor Full Width" and hide the title. */
body.eh-site .page-header{
  position:relative;isolation:isolate;background:var(--navy);color:#fff;
  padding:210px 0 110px;margin:0;max-width:none;
}
body.eh-site .page-header::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(31,43,72,.93) 0%,rgba(31,43,72,.8) 55%,rgba(31,43,72,.66) 100%)}
body.eh-site .page-header::after{content:"";display:block;width:60px;height:4px;background:var(--yellow);
  margin:22px 0 0 max(var(--gutter),calc((100% - var(--container))/2))}
body.eh-site .page-header .entry-title{
  width:min(var(--container),100% - 2*var(--gutter));margin:0 auto;padding:0;
  color:#fff;font-family:var(--font-head);font-weight:700;line-height:1.2;
  font-size:clamp(34px,5vw,56px);letter-spacing:-.01em;max-width:none;
}
body.eh-site .site-main{max-width:none;width:100%;margin:0;padding:0}
/* White space between the banner and the footer while a page is still empty */
body.eh-site .page-header + .page-content{background:#fff;min-height:160px}

/* Any page without a hero or title banner: solid navy header, not see-through */
body.eh-site:not(:has(.hero)):not(:has(.page-header)) .site-header{position:relative;background:var(--navy)}
body.eh-site:not(:has(.hero)):not(:has(.page-header)) .site-header.is-fixed{position:fixed}

@media (max-width:900px){ body.eh-site .page-header{padding:160px 0 80px} }
@media (max-width:640px){ body.eh-site .page-header{padding:130px 0 64px} }

/* ---------- 11. "This is me" photo: keep the face in view ---------- */
body.eh-site .elementor .media-frame .elementor-widget-image.eh-fill img{object-position:center 22%}

/* ---------- 12. Fees: approach line instead of a figure ---------- */
body.eh-site .info-card .price.price--text{font-size:21px;line-height:1.25;color:var(--ink)}

/* ---------- 13. Testimonial slider ----------
   .eh-slider > .eh-slider-track > .eh-slide (each: quote text, then .testi-person = photo + name).
   Duplicate an .eh-slide container in Elementor to add a testimonial. Arrows + dots are added by main.js. */
body.eh-site .eh-slider{position:relative}
body.eh-site .elementor .eh-slider-track{
  display:flex;flex-direction:row;flex-wrap:nowrap;gap:24px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;
}
body.eh-site .eh-slider-track::-webkit-scrollbar{display:none}
body.eh-site .elementor .eh-slider-track>.eh-slide{
  flex:0 0 calc((100% - 48px)/3);width:auto;scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  position:relative;background:var(--navy);color:rgba(255,255,255,.8);
  padding:46px 34px 34px;border-bottom:4px solid var(--yellow);
}
body.eh-site .eh-slide::before{
  content:"\201C";position:absolute;top:10px;left:30px;
  font-family:Georgia,serif;font-size:64px;line-height:1;color:var(--yellow);opacity:1;
  width:auto;height:auto;inset:auto;top:12px;left:30px;background:none;border:0;
}
body.eh-site .eh-slide .testi-quote{font-size:15px;line-height:1.75;font-style:italic;color:rgba(255,255,255,.85)}
body.eh-site .elementor .testi-person{flex-direction:row;align-items:center;gap:14px}
body.eh-site .elementor .testi-person>.elementor-element{width:auto;flex:0 0 auto}
body.eh-site .elementor .testi-person .elementor-widget-image img{
  width:54px;height:54px;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 3px var(--yellow);max-width:none;
}
body.eh-site .testi-person .elementor-heading-title{color:#fff;font-size:16px;margin:0}

/* Arrows + dots (created by main.js) */
body.eh-site .eh-slider-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:30px}
body.eh-site .eh-slider-dots{display:flex;gap:8px;flex-wrap:wrap}
body.eh-site .eh-slider-dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:background .2s,width .2s}
body.eh-site .eh-slider-dots button[aria-current="true"]{background:var(--yellow);width:26px;border-radius:5px}
body.eh-site .eh-slider-arrows{display:flex;gap:10px}
body.eh-site .eh-slider-arrows button{
  width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--navy);border-radius:2px;
  background:transparent;color:var(--navy);font-size:18px;line-height:1;cursor:pointer;transition:background .2s,color .2s;
}
body.eh-site .eh-slider-arrows button:hover{background:var(--navy);color:#fff}
body.eh-site .eh-slider-arrows button:disabled{opacity:.35;cursor:default;background:transparent;color:var(--navy)}

@media (max-width:1080px){
  body.eh-site .elementor .eh-slider-track>.eh-slide{flex-basis:calc((100% - 24px)/2)}
}
@media (max-width:640px){
  body.eh-site .elementor .eh-slider-track>.eh-slide{flex-basis:88%}
}

/* ---------- 14. Responsive tweaks for the bridge ---------- */
@media (max-width:640px){
  body.eh-site .elementor .hero .btn-row{flex-direction:column;align-items:stretch}
  body.eh-site .elementor .hero .btn-row>.elementor-element{width:100%}
  body.eh-site .elementor .hero .btn-row .elementor-button{width:100%}
  body.eh-site .stat .stat-num{font-size:24px}
  body.eh-site .elementor .media-frame::before{inset:14px -14px -14px 14px}
}
