/* Content Amplified: hover frame, hero grade, focus, reduced motion */

/* catalog tiles: image scales inside a clipping frame */
.ca-frame .elementor-widget-container,.ca-frame a{display:block;overflow:hidden}
.ca-frame img{display:block;width:100%;transition:transform 700ms cubic-bezier(.2,.6,.2,1)}
.ca-frame a:hover img,.ca-frame a:focus-visible img{transform:scale(1.045)}

/* chrome */
a,.elementor-button,.hfe-menu-item{transition:color 220ms ease,background-color 220ms ease,border-color 220ms ease}
a:focus-visible,.elementor-button:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #C2A15D;outline-offset:3px}
html{scroll-behavior:smooth}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important}
  .elementor-invisible{visibility:visible !important;opacity:1 !important;transform:none !important}
  .ca-frame a:hover img,.ca-frame a:focus-visible img{transform:none}
}

/* action links: arrow slides, brass rule draws in */
.ca-arrow{position:relative}
.ca-arrow span{display:inline-block;transition:transform 320ms cubic-bezier(.2,.6,.2,1)}
.ca-arrow:hover span,.ca-arrow:focus-visible span{transform:translateX(6px)}
.ca-arrow::after{content:'';position:absolute;left:0;bottom:-7px;height:1px;width:0;background:#C2A15D;transition:width 420ms cubic-bezier(.2,.6,.2,1)}
.ca-arrow:hover::after,.ca-arrow:focus-visible::after{width:100%}

/* the tile reacts as one object */
.ca-proj .elementor-widget-heading a{transition:color 240ms ease}
.ca-proj:hover .elementor-widget-heading a{color:#C2A15D}

@media (prefers-reduced-motion: reduce){
  .ca-arrow span,.ca-arrow::after{transition:none}
  .ca-arrow:hover span{transform:none}
}

/* Failsafe: entrance animations hide the element until Elementor's observer reveals it.
   If that never fires (observer error, odd browser, aborted script), the content would be
   invisible forever. This forces it visible after 2.5s no matter what. */
@keyframes ca-reveal-failsafe{to{visibility:visible;opacity:1}}
.elementor-invisible{animation:ca-reveal-failsafe 0s linear 2.5s forwards}

@media (prefers-reduced-motion: reduce){
  .elementor-invisible{animation:none;visibility:visible !important;opacity:1 !important}
}

/* featured loop: lead item carries the weight, the rest stack beside it */
@media (min-width:1025px){
  .ca-loop .elementor-grid{grid-template-columns:repeat(3,1fr)}
  .ca-loop .elementor-grid > *:first-child{grid-column:span 2;grid-row:span 2}
  .ca-loop .elementor-grid > *:first-child .ca-frame img{height:520px}
  .ca-loop .elementor-grid > *:first-child h3{font-size:40px}
}


/* divisions index. NOTE: Elementor 4.x does not render _css_classes on containers,
   so these hang off the section's element id and structural selectors instead. */
#divisions > .e-con{position:relative;transition:padding-left 420ms cubic-bezier(.2,.6,.2,1)}
#divisions > .e-con:hover{padding-left:16px}
#divisions > .e-con .elementor-widget-heading a{transition:color 260ms ease}
#divisions > .e-con:hover .elementor-widget-heading a{color:#C2A15D}
.ca-div-thumb{position:absolute;right:170px;top:50%;opacity:0;pointer-events:none;z-index:2;
  transform:translateY(-50%) scale(.94);
  transition:opacity 400ms ease,transform 480ms cubic-bezier(.2,.6,.2,1)}
#divisions > .e-con:hover .ca-div-thumb{opacity:1;transform:translateY(-50%) scale(1)}
@media (max-width:1024px){.ca-div-thumb{display:none}}
@media (prefers-reduced-motion: reduce){
  #divisions > .e-con,.ca-div-thumb{transition:none}
  #divisions > .e-con:hover{padding-left:0}
  #divisions > .e-con:hover .ca-div-thumb{opacity:0}
}

/* Header nav crowding: the toggle only offers 768 or 1025, so 11 items collide with the
   logo between 1025 and 1200. Tighten type and padding across that band only. */
@media (min-width:1025px) and (max-width:1200px){
  .ehf-header .hfe-nav-menu a.hfe-menu-item{font-size:9px !important;letter-spacing:.8px !important;
    padding-left:6px !important;padding-right:6px !important}
  .ehf-header .elementor-widget-image img{width:132px !important}
}
@media (min-width:1201px) and (max-width:1340px){
  .ehf-header .hfe-nav-menu a.hfe-menu-item{padding-left:10px !important;padding-right:10px !important}
}
/* never let the nav wrap to a second line */
.ehf-header .hfe-nav-menu{flex-wrap:nowrap}