/* Native Elementor widget styling.
   _css_classes lands on the widget WRAPPER (.elementor-element), so each rule
   reaches through to the widget's inner element. */

.z-label .elementor-heading-title{
  font-family:Montserrat,sans-serif!important;font-weight:500!important;font-size:11px!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--z-accent-soft)!important;
  display:flex;align-items:center;gap:8px;margin:0;}
.z-label .elementor-heading-title::before{content:"";width:7px;height:7px;background:var(--z-accent);flex:none;}

.z-display .elementor-heading-title{
  font-family:Archivo,Impact,sans-serif!important;font-weight:900!important;
  text-transform:uppercase!important;letter-spacing:-.025em;margin:0;line-height:.95;}
.z-accent .elementor-heading-title{color:var(--z-accent)!important;}

.z-copy p{margin:0;color:var(--z-muted);}
.z-copy a{color:var(--z-accent);}
.z-lead p{color:#E8E8E0;font-size:16px;max-width:38rem;}

.z-center{text-align:center;}
.z-center .elementor-heading-title,.z-center p{margin-left:auto;margin-right:auto;}
.z-center .z-label .elementor-heading-title{justify-content:center;}

/* Column grids. Elementor containers are flex; these carry the responsive collapse. */
.z-cols{width:100%;}
@media(max-width:1023px){
  .z-cols-3>.e-con,.z-cols-3>.elementor-element,
  .z-cols-2>.e-con,.z-cols-2>.elementor-element{width:100%!important;}
}

/* Cards */
.z-cell{border-radius:var(--z-r-md);}
.z-iconbox .elementor-icon{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--z-line);border-radius:var(--z-r-sm);color:var(--z-accent);
  transition:background .5s var(--z-ease),color .5s var(--z-ease),border-color .5s var(--z-ease);}
.z-svc:hover .z-iconbox .elementor-icon{background:var(--z-accent);color:var(--z-bg);border-color:var(--z-accent);}
.z-iconbox .elementor-icon-box-title{margin-bottom:14px!important;}
.z-iconbox .elementor-icon-box-wrapper{text-align:left;}

/* Buttons: filled only, never transparent over photography. */
.z-btn .elementor-button{
  border-radius:var(--z-pill)!important;font-family:Montserrat,sans-serif!important;font-weight:600!important;
  font-size:12px!important;letter-spacing:.12em!important;text-transform:uppercase!important;
  padding:16px 28px!important;transition:background .45s var(--z-ease),color .45s var(--z-ease);}
.z-btn-primary .elementor-button{background:var(--z-accent)!important;color:var(--z-bg)!important;
  box-shadow:0 10px 30px -12px rgba(255,107,26,.45);}
.z-btn-primary .elementor-button:hover{background:var(--z-accent-soft)!important;color:var(--z-bg)!important;}
.z-btn-ghost .elementor-button{background:var(--z-surface)!important;color:var(--z-ink)!important;
  border:1px solid var(--z-line)!important;}
.z-btn-ghost .elementor-button:hover{border-color:var(--z-accent)!important;color:var(--z-accent-soft)!important;}

/* Images */
.z-imgw img{display:block;width:100%;border-radius:var(--z-r-md);}
.z-portrait img{aspect-ratio:4/5;object-fit:cover;}
.z-case-img img,.z-jimg img{aspect-ratio:4/5;object-fit:cover;}
.z-jimg img{aspect-ratio:16/10;}
.z-cta-frame img{aspect-ratio:3/4;object-fit:cover;border:1px solid var(--z-line);}
.z-cta-cell:nth-child(2) .z-cta-frame img{aspect-ratio:3/5;}
.z-cta-cell:nth-child(2){transform:translateY(24px);}

/* Facts row in the CTA */
.z-fact .elementor-heading-title{font-size:14px!important;line-height:1.25!important;}

/* Equipment rows */
.z-kitrow .z-copy p{text-align:right;color:#E8E8E0;font-size:14px;}
.z-kitrow{justify-content:space-between;}

/* Packages */
.z-packlist .elementor-icon-list-icon i,.z-packlist .elementor-icon-list-icon svg{font-size:6px;}
.z-pack.is-featured{background:linear-gradient(to bottom,var(--z-accent-deep),var(--z-bg))!important;}
.z-packfoot{width:100%;}
.z-packfoot .z-btn .elementor-button{padding:10px 18px!important;font-size:11px!important;}

/* Mission: word by word brighten handled by the reveal class */
.z-mission .elementor-heading-title{line-height:1.02;max-width:72rem;}

/* Services CTA strip */
@media(min-width:640px){
  .z-svc-cta{flex-direction:row!important;align-items:center!important;justify-content:space-between;}
}

/* Bio and request heroes */
.z-biohero,.z-reqhero{position:relative;}
.z-biohero::after,.z-reqhero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--z-bg),transparent 55%);}
.z-biohero>*,.z-reqhero>*{position:relative;z-index:1;}

/* Elementor resets that fight the design */
.elementor-widget-heading .elementor-heading-title{color:inherit;}
.elementor-widget:not(:last-child){margin-bottom:0;}
.e-con,.e-con-inner{--container-default-padding-top:0;--container-default-padding-bottom:0;}

/* ---------------------------------------------------------------------------
   Pin enforcement.
   .z-pin__stage is declared early in the inline token sheet, but .z-deck,
   .z-rail and .z-tl each declare position:relative later at equal specificity,
   which silently won and left every pinned section unstuck. That is what made
   the sections scroll away and leave an empty black wrapper behind them.
   These rules are last-loaded and more specific, so they settle it.
--------------------------------------------------------------------------- */
.z-pin{position:relative;}
.z-pin > .z-pin__stage,
.z-pin > .z-pin__stage.z-deck,
.z-pin > .z-pin__stage.z-rail,
.z-pin > .z-pin__stage.z-tl{
  position:-webkit-sticky!important;
  position:sticky!important;
  top:0!important;
  height:100svh;
  overflow:hidden;
}
/* Nothing between the pin wrapper and the scroll root may clip or scroll,
   or sticky silently stops working. */
.elementor-widget-shortcode,
.elementor-widget-shortcode > .elementor-widget-container,
.e-con, .e-con-inner, .e-con > .e-con-inner{overflow:visible!important;}

@media (prefers-reduced-motion: reduce){
  .z-pin{height:auto!important;}
  .z-pin > .z-pin__stage{position:static!important;height:auto!important;}
}

/* ------------------------------------------------------- header / footer
   Both are native widget trees now, so the styling lives here rather than
   inside an HTML blob. */
.z-header{position:relative;z-index:500;}
/* HFE puts ehf-header / ehf-footer as classes on the BODY element, so a bare
   .ehf-header selector matches the body. Doing that with position:fixed set the
   body to fixed, collapsed the document height and made the whole page
   unscrollable. Always target the real header element. */
header#masthead, header.site-header{position:fixed!important;inset-inline:0;top:0;z-index:500;
  background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);
  transition:background .6s var(--z-ease),border-color .6s var(--z-ease);
  border-bottom:1px solid transparent;}
header#masthead.z-nav--solid, header.site-header.z-nav--solid{
  background:rgba(11,11,10,.88)!important;backdrop-filter:blur(16px);
  border-bottom-color:var(--z-line);}
body.ehf-header, body.ehf-footer{position:static!important;}
.z-brand-word .elementor-heading-title{letter-spacing:-.02em;}
/* no ::after: the title already ends in a period */
.z-nav-links .elementor-icon-list-items{gap:4px;}
.z-nav-links .elementor-icon-list-item a{padding:8px 14px;}
.z-nav-links .elementor-icon-list-icon{display:none!important;}
@media(max-width:767px){.z-nav-links{display:none!important;}}
.z-header-cta .elementor-button{box-shadow:0 10px 30px -12px rgba(255,107,26,.45);}

.z-foot-head .elementor-heading-title{max-width:22ch;}
.z-foot-links .elementor-icon-list-item a{transition:color .3s var(--z-ease);}
.z-foot-links .elementor-icon-list-icon{opacity:.9;}
.z-social .elementor-social-icon{background:transparent!important;border:1px solid var(--z-line);
  transition:border-color .4s var(--z-ease),color .4s var(--z-ease);}
.z-social .elementor-social-icon:hover{border-color:var(--z-accent);color:var(--z-accent)!important;}
.z-foot-base{width:100%;}
.z-wordmark{overflow:hidden;pointer-events:none;user-select:none;}
.z-wordmark .elementor-heading-title{white-space:nowrap;transform:translateY(20%);letter-spacing:-.04em;}
@media(max-width:1023px){
  .z-foot-grid>.e-con,.z-foot-grid>.elementor-element{width:100%!important;}
}

/* Brand mark: the small ember square that sits before the wordmark in the
   approved template. */
.z-brand-word .elementor-heading-title{display:inline-flex;align-items:center;gap:12px;}
.z-brand-word .elementor-heading-title::before{content:"";width:10px;height:10px;
  background:var(--z-accent);flex:none;display:block;}

/* ---------------------------------------------------- filterable gallery
   Essential Addons ships a light theme; this puts it on the palette. */
.z-gal .eael-filter-gallery-control ul{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;
  padding:0;margin:0 0 28px;list-style:none;border:0;}
.z-gal .eael-filter-gallery-control ul li{margin:0;}
.z-gal .eael-filter-gallery-control ul li a{display:inline-block;border-radius:var(--z-pill);
  border:1px solid var(--z-line);background:transparent;color:var(--z-muted);
  padding:8px 18px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  transition:all .4s var(--z-ease);}
.z-gal .eael-filter-gallery-control ul li a:hover{border-color:rgba(255,255,251,.4);color:var(--z-ink);}
.z-gal .eael-filter-gallery-control ul li a.active,
.z-gal .eael-filter-gallery-control ul li.active a{background:var(--z-accent);border-color:var(--z-accent);color:var(--z-bg);}

.z-gal .eael-gallery-grid-item{border-radius:var(--z-r-md);overflow:hidden;border:1px solid var(--z-line);
  background:var(--z-surface);}
.z-gal .gallery-item-caption-wrap{background:linear-gradient(to top,rgba(11,11,10,.92),rgba(11,11,10,0))!important;}
.z-gal .fg-item-title,.z-gal .eael-gallery-grid-item .fg-item-title{
  font-family:Archivo,sans-serif!important;font-weight:900!important;text-transform:uppercase!important;
  font-size:16px!important;color:var(--z-ink)!important;letter-spacing:-.01em;}
.z-gal .fg-item-content,.z-gal .eael-gallery-grid-item .fg-item-content p{
  font-family:Montserrat,sans-serif!important;font-size:11px!important;letter-spacing:.08em;
  text-transform:uppercase;color:var(--z-muted)!important;}
.z-gal .eael-gallery-grid-item img{object-fit:cover;width:100%;height:100%;}
.z-gal .eael-gallery-load-more{border-radius:var(--z-pill)!important;background:var(--z-accent)!important;
  color:var(--z-bg)!important;font-family:Montserrat,sans-serif!important;font-weight:600!important;
  font-size:12px!important;letter-spacing:.12em!important;text-transform:uppercase!important;
  padding:16px 28px!important;border:0!important;margin-top:32px;}
.z-gal .eael-gallery-load-more:hover{background:var(--z-accent-soft)!important;}
.z-gal .eael-filterable-gallery-item-wrap{padding:6px;}

/* =====================================================================
   FIXES
   ===================================================================== */

/* 1. Double buttons.
   _css_classes lands on the Elementor widget WRAPPER, so the bare .z-btn and
   .z-btn-primary rules in the token sheet were painting a full pill on the
   wrapper AND on the inner anchor: two nested pills, two hover targets, double
   the size. Neutralise the wrapper; only the inner anchor is the button. */
.elementor-widget-button.z-btn,
.elementor-widget-button.z-btn-primary,
.elementor-widget-button.z-btn-ghost{
  background:none!important;background-image:none!important;box-shadow:none!important;
  padding:0!important;border:0!important;border-radius:0!important;
  display:block!important;gap:0!important;}
.elementor-widget-button .elementor-button-wrapper{display:inline-block;}

/* 2. Buttons were oversized across the board. */
.z-btn,
.z-btn .elementor-button,
.elementor-widget-button.z-btn .elementor-button{
  padding:12px 22px!important;font-size:11px!important;letter-spacing:.1em!important;}
.z-hero__cta .z-btn{padding:11px 20px!important;font-size:11px!important;}
.z-packfoot .z-btn .elementor-button{padding:9px 16px!important;font-size:10px!important;}
.z-header-cta .elementor-button{padding:10px 18px!important;font-size:10px!important;}

/* 3. CTA band: frames and facts stay in a row at every width above phone.
      The generic .z-cols-3 collapse was stacking them from 1023px down. */
.z-cta .z-cols > .e-con,
.z-cta .z-cols > .elementor-element{flex:1 1 0!important;width:auto!important;min-width:0;}
@media(max-width:1023px){
  .z-cta .z-cols-3 > .e-con,
  .z-cta .z-cols-3 > .elementor-element{width:auto!important;flex:1 1 0!important;}
}
@media(max-width:479px){
  .z-cta .z-cols-3 > .e-con,
  .z-cta .z-cols-3 > .elementor-element{width:100%!important;flex:1 1 100%!important;}
}
.z-cta-right .z-cols{align-items:flex-start;}

/* 4. CTA frames get real motion. Driven by the parallax pass in the motion JS. */
.z-cta-frame{overflow:hidden;border-radius:var(--z-r-sm);}
.z-cta-frame img{will-change:transform;transition:none;}

/* 5. Hero pins and sits on solid black, so the sections that follow scroll
      over it rather than the page showing through behind. */
.z-hero{position:sticky!important;top:0;z-index:0;background:#0B0B0A!important;}
.z-marquee,.z-deck,.z-pin,.z-rail{position:relative;z-index:1;}
.z-pin{background:#0B0B0A;}

/* 6. Services: number sits opposite the icon. */
.z-svc-num .elementor-heading-title{font-family:Montserrat,sans-serif!important;font-weight:500!important;
  font-size:11px!important;letter-spacing:.12em!important;color:var(--z-dim)!important;}
.z-svc-top{width:100%;}
.z-svc-rule{flex:1;height:1px;background:var(--z-line);}
/* ---------------------------------------------------------------------------
   Column widths.
   Elementor's per container width setting was not producing side by side
   columns, so the split is enforced here on our own grid classes instead.
--------------------------------------------------------------------------- */
.z-cols{display:flex;flex-wrap:wrap;}
.z-cols-2 > .e-con{flex:1 1 calc(50% - 40px);min-width:0;width:auto;}
.z-cols-3 > .e-con{flex:1 1 calc(33.333% - 20px);min-width:0;width:auto;}
@media(max-width:1023px){
  .z-cols-2 > .e-con{flex:1 1 100%;}
  .z-cols-3 > .e-con{flex:1 1 100%;}
  .z-cta .z-cols-3 > .e-con{flex:1 1 0;}
}
@media(max-width:479px){
  .z-cta .z-cols-3 > .e-con{flex:1 1 100%;}
}

/* Services CTA strip: copy on the left, action on the right. Previously the
   five loose widgets were laid out as five columns, which squeezed the
   headline to one word per line and the paragraph to a sliver. */
.z-svc-cta{display:flex;flex-direction:column;gap:24px;align-items:flex-start;}
.z-svc-cta-text{flex:1 1 auto;min-width:0;}
.z-svc-cta-btn{flex:0 0 auto;}
.z-svc-cta-text .elementor-heading-title{max-width:30ch;}
.z-svc-cta-text .z-copy p{max-width:60ch;}
@media(min-width:768px){
  .z-svc-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:40px;}
}

/* About split: keep the portrait beside the copy. */
.z-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;}

/* ---------------------------------------------------------------------------
   Split colour headings.
   The accent half of every display headline, matching the React build.
--------------------------------------------------------------------------- */
.z-display .elementor-heading-title .z-hl,
.elementor-heading-title .z-hl{color:var(--z-accent);}

/* Abbey Road callout in the About section. */
.z-abbey{align-items:center;}
.z-abbey-num .elementor-heading-title{margin:0;line-height:1;}
.z-abbey-copy p{margin:0;color:#E8E8E0;}
.z-abbey-copy strong{color:var(--z-ink);font-weight:600;}

/* ---------------------------------------------------------------------------
   Sitewide fade in.
   The hidden state is only ever added by JS (.z-fade), so a script failure
   leaves the page fully visible rather than blank.
--------------------------------------------------------------------------- */
.z-fade{opacity:0;transform:translateY(26px);}
.z-fade.z-in{opacity:1;transform:none;
  transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);}
@media (prefers-reduced-motion: reduce){
  .z-fade{opacity:1!important;transform:none!important;transition:none!important;}
}

/* Brand wordmark: square marker, then the word. The trailing period is part
   of the heading text, so it must not be duplicated by a pseudo element. */
.z-brand-word .elementor-heading-title{display:inline-flex;align-items:center;gap:10px;}
.z-brand-word .elementor-heading-title::before{content:'';width:10px;height:10px;background:var(--z-accent);flex:none;display:block;}

/* Double square marker.
   The base .z-label rule in the token sheet draws a square via ::before, and it
   matches the Elementor widget WRAPPER. The newer rule draws another on the
   inner heading. Keep the inner one, suppress the wrapper's. Same trap as the
   double button: bare token classes also match widget wrappers. */
.elementor-widget.z-label::before{content:none!important;display:none!important;}
.elementor-widget.z-label{display:block!important;gap:0!important;}

/* ---------------------------------------------------------------------------
   Forminator grid.
   Every field landed in a single non wrapping flex row, so all 13 squeezed to
   about 67px wide. The forminator-col-6 / col-12 classes are correct, they just
   needed the row to wrap and the columns to claim their share.
--------------------------------------------------------------------------- */
.forminator-ui.forminator-custom-form .forminator-row{
  display:flex!important;flex-wrap:wrap!important;
  column-gap:20px;row-gap:22px;margin:0 0 22px;}
.forminator-ui.forminator-custom-form .forminator-col{
  flex:0 0 100%;max-width:100%;min-width:0;padding:0!important;}
.forminator-ui.forminator-custom-form .forminator-col-12{flex:0 0 100%;max-width:100%;}
.forminator-ui.forminator-custom-form .forminator-col-6{
  flex:0 0 calc(50% - 10px);max-width:calc(50% - 10px);}
@media(max-width:640px){
  .forminator-ui.forminator-custom-form .forminator-col-6{flex:0 0 100%;max-width:100%;}
}
.forminator-ui.forminator-custom-form .forminator-field{width:100%;}
/* checkbox group reads as a list, not a row of slivers */
.forminator-ui.forminator-custom-form .forminator-field-checkbox .forminator-checkbox{
  display:flex;align-items:center;gap:10px;margin:0 0 10px;}

/* Essential Addons filter chips: the active one must read ember, not white. */
.z-gal .eael-filter-gallery-control li a.active,
.z-gal .eael-filter-gallery-control li.active a,
.z-gal .eael-filter-gallery-control li a.control.active,
.z-gal .eael-filter-gallery-control .active > a,
.z-gal .eael-filter-gallery-control a.active{
  background:var(--z-accent)!important;border-color:var(--z-accent)!important;
  color:var(--z-bg)!important;}

/* Forminator grid override.
   The plugin's own grid sets flex-basis:0 at a higher specificity, so the
   column widths need !important to win. */
.forminator-ui.forminator-custom-form .forminator-row > .forminator-col{
  flex-grow:0!important;flex-shrink:0!important;flex-basis:100%!important;max-width:100%!important;}
.forminator-ui.forminator-custom-form .forminator-row > .forminator-col-6{
  flex-basis:calc(50% - 10px)!important;max-width:calc(50% - 10px)!important;}
@media(max-width:640px){
  .forminator-ui.forminator-custom-form .forminator-row > .forminator-col-6{
    flex-basis:100%!important;max-width:100%!important;}
}

/* EA filter chips are LI elements, not anchors. The earlier rules targeted
   'li a' and matched nothing, leaving the plugin's default grey pill. */
.z-gal .eael-filter-gallery-control ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 28px;padding:0;}
.z-gal .eael-filter-gallery-control ul li.control{
  background:transparent!important;border:1px solid var(--z-line)!important;
  color:var(--z-muted)!important;border-radius:var(--z-pill)!important;
  padding:8px 18px!important;margin:0!important;cursor:pointer;
  font-family:Montserrat,sans-serif!important;font-size:11px!important;font-weight:500!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;
  transition:background .4s var(--z-ease),color .4s var(--z-ease),border-color .4s var(--z-ease);}
.z-gal .eael-filter-gallery-control ul li.control:hover{
  border-color:rgba(255,255,251,.4)!important;color:var(--z-ink)!important;}
.z-gal .eael-filter-gallery-control ul li.control.active{
  background:var(--z-accent)!important;border-color:var(--z-accent)!important;color:var(--z-bg)!important;}

/* Container width floor.
   Turning .z-cols into a flex row let a boxed container shrink wrap to its own
   padding: the section resolved to 40px, its inner track to 0, and every image
   inside rendered at 0x0. Elementor containers must claim their full line. */
.elementor .e-con-boxed{width:100%;}
.elementor .e-con-boxed > .e-con-inner{width:100%;flex:1 1 auto;min-width:0;}
.z-cols{width:100%;min-width:0;}
.z-cell{min-width:0;}
.z-imgw img{min-width:1px;}