/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 10 2026 | 11:40:16 */
/* Homepage hero slider (hp-slider). No plugin. Digital Mountain, Nov 2026.
   Replaces the old LayerSlider banner (slider #6). Markup: native Enfold textblocks in the
   homepage hero section (custom classes hp-slider / hp-h1 / hp-slide hp-slide-N).
   Delete this entry plus the matching JS entry to roll back. */

/* Stack the H1 and the three slides in one grid so the hero height never jumps (no CLS) */
#top .hp-slider .entry-content-wrapper{display:grid;grid-template-columns:minmax(0,1fr);align-content:center}
#top .hp-slider .entry-content-wrapper > *{grid-column:1}
#top .hp-slider .entry-content-wrapper > :has(.hp-h1){grid-row:1}
#top .hp-slider .entry-content-wrapper > :has(.hp-slide){grid-row:2}
#top .hp-slider .hp-slide{transition:opacity .7s ease,visibility .7s ease}

/* Before JS runs, only slide 1 shows; after JS, .is-active decides */
#top .hp-slider .hp-slide:not(.hp-slide-1){opacity:0;visibility:hidden}
#top .hp-slider.hp-js .hp-slide{opacity:0;visibility:hidden}
#top .hp-slider.hp-js .hp-slide.is-active{opacity:1;visibility:visible}
/* Stacked slides must not block clicks on the visible slide's button */
#top .hp-slider .entry-content-wrapper > :has(.hp-slide){pointer-events:none}
#top .hp-slider .hp-slide-1,#top .hp-slider.hp-js .hp-slide.is-active{pointer-events:auto}
#top .hp-slider.hp-js .hp-slide:not(.is-active){pointer-events:none}

/* Fixed H1, set as the gold line above the rotating headline */
#top .hp-slider .hp-h1 h1{font-size:18px!important;line-height:1.4!important;font-weight:700!important;letter-spacing:.08em;color:#C9A06A!important;margin:0 0 14px!important;text-transform:none}

/* Rotating headline, text and button */
#top .hp-slider .hp-slide h2{color:#fff!important;font-size:clamp(32px,4.2vw,54px)!important;line-height:1.1!important;font-weight:900!important;margin:0 0 18px!important}
#top .hp-slider .hp-slide p{color:#DBE6F0!important;font-size:18.5px!important;line-height:1.65!important;margin:0 0 26px!important;letter-spacing:0!important;font-weight:400!important;text-transform:none!important}
#top .hp-slider .hp-slide p.hp-cta{margin:0!important}
#top .hp-slider .hp-slide a.hp-btn{display:inline-block;background:#C9A06A;color:#00213D!important;border-radius:8px;padding:14px 26px;font-size:16px;font-weight:700;text-decoration:none!important;line-height:1.3;transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease}
#top .hp-slider .hp-slide a.hp-btn:hover,#top .hp-slider .hp-slide a.hp-btn:focus-visible{background:#E3C08F;color:#00213D!important;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25)}

/* Background layers for slides 2 and 3 (added by JS after page load, so LCP stays on slide 1) */
#top .hp-slider .hp-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:50% 50%;opacity:0;transition:opacity .9s ease;pointer-events:none}
#top .hp-slider .hp-bg.is-active{opacity:1}

/* Controls: centred glass pill at the bottom of the hero (prev, progress dots, next, pause; WCAG 2.2.2) */
#top .hp-slider.pk-hero .container{padding-bottom:80px!important}
#top .hp-slider .hp-controls{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;background:rgba(0,33,61,.55);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
#top .hp-slider .hp-ctl{width:34px;height:34px;border-radius:50%;border:0;padding:0;background:transparent;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background-color .25s ease,color .25s ease}
#top .hp-slider .hp-ctl svg{width:16px;height:16px;display:block}
#top .hp-slider .hp-ctl:hover{background:rgba(201,160,106,.22);color:#E3C08F}
#top .hp-slider .hp-dots{display:flex;align-items:center;gap:8px;padding:0 6px}
#top .hp-slider .hp-dot{position:relative;overflow:hidden;width:28px;height:5px;border:0;border-radius:3px;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:width .35s ease,background-color .25s ease}
#top .hp-slider .hp-dot:hover{background:rgba(255,255,255,.55)}
#top .hp-slider .hp-dot[aria-current="true"]{width:56px;background:rgba(255,255,255,.3)}
#top .hp-slider .hp-dot i{position:absolute;inset:0;width:0;background:#C9A06A;border-radius:3px}
#top .hp-slider .hp-dot[aria-current="true"] i{width:100%}
#top .hp-slider.hp-playing .hp-dot[aria-current="true"] i{width:0;animation:hpFill var(--hp-delay,7s) linear forwards}
#top .hp-slider.hp-hold .hp-dot[aria-current="true"] i{animation-play-state:paused}
@keyframes hpFill{from{width:0}to{width:100%}}
#top .hp-slider .hp-ctl:focus-visible,#top .hp-slider .hp-dot:focus-visible{outline:2px solid #E3C08F;outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  #top .hp-slider .hp-slide,#top .hp-slider .hp-bg,#top .hp-slider .hp-dot{transition:none}
}
@media only screen and (max-width:767px){
  #top .hp-slider .hp-slide h2{font-size:32px!important}
  #top .hp-slider .hp-slide p{font-size:17px!important}
  #top .hp-slider.pk-hero .container{padding-bottom:96px!important}
}