/* ==========================================================================
   SUPREME HERO SLIDER
   Front end styles. No external fonts, no icon font, no library.

   CHANGING THE COLOURS
   --------------------------------------------------------------------------
   Every colour is set once, in the block directly below. Edit the six values
   there and the whole slider follows. If you would rather not touch this
   file, paste the same block into Appearance > Customize > Additional CSS
   and your version wins, because it loads later.
   ========================================================================== */

.sahs{
  --sahs-green:#005e31;
  --sahs-green-dark:#004624;
  --sahs-navy:#0d2a52;
  --sahs-red:#aa242a;
  --sahs-gold:#ce9737;
  --sahs-dark:#101c14;
  --sahs-light:#f1f5fa;
  --sahs-ink:#132542;

  --sahs-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sahs-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;

  --sahs-wrap:1180px;
  --sahs-pad:20px;
  --sahs-min:clamp(440px,58vh,620px);

  position:relative;
  font-family:var(--sahs-sans);
  overflow:hidden;
  isolation:isolate;
}
.sahs *,.sahs *::before,.sahs *::after{box-sizing:border-box;}
.sahs img{max-width:100%;height:auto;display:block;}
.sahs :focus-visible{outline:3px solid var(--sahs-gold);outline-offset:3px;}

/* --------------------------------------------------------------------------
   Track
   All slides sit side by side. Their common height is the tallest slide, so
   nothing jumps as the slider moves.
   -------------------------------------------------------------------------- */
.sahs-viewport{overflow:hidden;width:100%;}
.sahs-track{
  display:flex;
  width:100%;
  will-change:transform;
  transition:transform .62s cubic-bezier(.4,.02,.2,1);
}
.sahs-slide{
  flex:0 0 100%;
  width:100%;
  min-width:100%;
  position:relative;
  display:flex;
  align-items:center;
  min-height:var(--sahs-min);
  overflow:hidden;
}
.sahs-inner{
  position:relative;
  z-index:3;
  width:100%;
  max-width:var(--sahs-wrap);
  margin:0 auto;
  padding:clamp(46px,6vw,80px) var(--sahs-pad);
  display:grid;
  gap:clamp(28px,4.5vw,58px);
  align-items:center;
}

/* --------------------------------------------------------------------------
   Colour schemes
   -------------------------------------------------------------------------- */
.sahs-theme-green{background:linear-gradient(158deg,#00753d 0%,var(--sahs-green) 48%,#004624 100%);}
.sahs-theme-navy{background:linear-gradient(158deg,#164680 0%,var(--sahs-navy) 48%,#081b33 100%);}
.sahs-theme-red{background:linear-gradient(158deg,#c22a33 0%,var(--sahs-red) 50%,#7e1a1f 100%);}
.sahs-theme-dark{background:linear-gradient(158deg,#1d3326 0%,var(--sahs-dark) 55%,#070d09 100%);}
.sahs-theme-light{background:var(--sahs-light);}

.sahs-slide::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(620px 360px at 88% 6%,rgba(206,151,55,.16),transparent 62%),
    radial-gradient(520px 400px at 3% 96%,rgba(0,0,0,.22),transparent 62%);
}
.sahs-theme-light::after{
  background:radial-gradient(600px 340px at 90% 0%,rgba(0,94,49,.07),transparent 62%);
}
.sahs-layout-overlay::after,.sahs-layout-overlay-center::after{background:none;}

/* text colours */
.sahs-slide{color:rgba(255,255,255,.82);}
.sahs-heading{color:#fff;}
.sahs-theme-light{color:#4d5b70;}
.sahs-theme-light .sahs-heading{color:var(--sahs-ink);}
.sahs-theme-light .sahs-desc{color:#4d5b70;}
.sahs-theme-light .sahs-points li{color:var(--sahs-ink);}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */
.sahs-eyebrow{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);
  padding:7px 15px 7px 8px;
  border-radius:100px;
  margin:0 0 20px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.86);
}
.sahs-theme-light .sahs-eyebrow{
  background:#fff;border-color:#dae3ee;color:#4d5b70;
}
.sahs-eyebrow b{
  background:var(--sahs-gold);color:#3a2a05;
  font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;
}
.sahs-heading{
  font-family:var(--sahs-serif);
  font-size:clamp(29px,5vw,52px);
  line-height:1.1;
  letter-spacing:-.018em;
  font-weight:700;
  margin:0 0 18px;
}
.sahs-heading em{font-style:normal;color:var(--sahs-gold);}
/* gold on red reads muddy, so the red scheme uses a paler highlight */
.sahs-theme-red .sahs-heading em{color:#f6dca8;}
.sahs-theme-light .sahs-heading em{color:#96661a;}
.sahs-desc{
  font-size:clamp(15px,1.65vw,17.5px);
  line-height:1.72;
  margin:0 0 26px;
  max-width:56ch;
}

/* buttons */
.sahs-btns{display:flex;flex-wrap:wrap;gap:12px;}
.sahs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 26px;
  border-radius:9px;border:2px solid transparent;
  font-family:var(--sahs-sans);font-size:15px;font-weight:700;
  text-decoration:none;line-height:1.2;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.sahs-btn svg{width:17px;height:17px;flex:none;}
.sahs-btn-solid{background:#fff;color:var(--sahs-ink);}
.sahs-btn-solid:hover{background:var(--sahs-gold);color:#2a1e04;transform:translateY(-2px);}
.sahs-btn-line{border-color:rgba(255,255,255,.5);color:#fff;}
.sahs-btn-line:hover{background:#fff;color:var(--sahs-ink);border-color:#fff;transform:translateY(-2px);}
.sahs-theme-light .sahs-btn-solid{background:var(--sahs-red);color:#fff;}
.sahs-theme-light .sahs-btn-solid:hover{background:#8d1922;color:#fff;}
.sahs-theme-light .sahs-btn-line{border-color:#dae3ee;color:var(--sahs-ink);}
.sahs-theme-light .sahs-btn-line:hover{background:var(--sahs-ink);color:#fff;border-color:var(--sahs-ink);}

/* tick points */
.sahs-points{
  list-style:none;margin:32px 0 0;padding:26px 0 0;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:10px 26px;
}
.sahs-theme-light .sahs-points{border-top-color:#dae3ee;}
.sahs-points li{
  display:flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;
  color:rgba(255,255,255,.88);
}
.sahs-points svg{width:17px;height:17px;flex:none;color:var(--sahs-gold);}
.sahs-btns + .sahs-points{margin-top:30px;}

/* --------------------------------------------------------------------------
   Photo, frame and seal
   -------------------------------------------------------------------------- */
.sahs-media{position:relative;}
.sahs-frame{
  position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 70px rgba(3,12,26,.42);
  aspect-ratio:4/3.1;background:rgba(0,0,0,.2);
}
.sahs-theme-light .sahs-frame{border-color:#dae3ee;box-shadow:0 24px 56px rgba(13,42,82,.14);}
.sahs-photo{width:100%;height:100%;object-fit:cover;}

.sahs-seal{
  position:absolute;left:-14px;bottom:-16px;z-index:4;
  width:clamp(102px,12.5vw,130px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#154a7f,#08192f 74%);
  border:2px solid var(--sahs-gold);
  box-shadow:0 14px 34px rgba(3,12,26,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:6px;
}
.sahs-seal::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  border:1px dashed rgba(206,151,55,.6);
  animation:sahs-spin 34s linear infinite;
}
.sahs-seal b{font-family:var(--sahs-serif);font-size:clamp(27px,3.4vw,35px);line-height:1;color:var(--sahs-gold);}
.sahs-seal i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;margin-top:3px;}
.sahs-seal small{font-size:8.5px;letter-spacing:.09em;color:#a8bdd6;margin-top:4px;line-height:1.3;}
@keyframes sahs-spin{to{transform:rotate(360deg);}}

/* --------------------------------------------------------------------------
   Layout 1 and 2: split
   -------------------------------------------------------------------------- */
.sahs-layout-split .sahs-inner{grid-template-columns:1.06fr .94fr;}
.sahs-layout-split-left .sahs-inner{grid-template-columns:.94fr 1.06fr;}
.sahs-layout-split-left .sahs-copy{order:2;}
.sahs-layout-split-left .sahs-media{order:1;}
.sahs-layout-split-left .sahs-seal{left:auto;right:-14px;}
.sahs-layout-split.sahs-nophoto .sahs-inner,
.sahs-layout-split-left.sahs-nophoto .sahs-inner{grid-template-columns:1fr;max-width:820px;}

/* --------------------------------------------------------------------------
   Layout 3 and 4: photo background with a dark wash
   -------------------------------------------------------------------------- */
.sahs-layout-overlay,.sahs-layout-overlay-center{background:#0b1410;}
.sahs-bg{position:absolute;inset:0;z-index:0;}
.sahs-bg-img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--sahs-focus,center);
}
.sahs-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,14,10,calc(var(--sahs-overlay,.62) + .16)) 0%,rgba(6,14,10,var(--sahs-overlay,.62)) 46%,rgba(6,14,10,calc(var(--sahs-overlay,.62) * .55)) 100%);
}
.sahs-layout-overlay-center .sahs-shade{
  background:
    radial-gradient(120% 90% at 50% 50%,rgba(6,14,10,calc(var(--sahs-overlay,.62) * .8)) 0%,rgba(6,14,10,calc(var(--sahs-overlay,.62) + .14)) 100%);
}
.sahs-layout-overlay .sahs-inner{grid-template-columns:minmax(0,1fr) minmax(0,.42fr);}
.sahs-layout-overlay .sahs-copy{max-width:640px;}
.sahs-layout-overlay-center .sahs-inner{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  max-width:900px;
}
.sahs-layout-overlay-center .sahs-desc{margin-left:auto;margin-right:auto;}
.sahs-layout-overlay-center .sahs-btns{justify-content:center;}
.sahs-layout-overlay-center .sahs-points{justify-content:center;}

/* --------------------------------------------------------------------------
   Layout 5: feature, no photo
   -------------------------------------------------------------------------- */
.sahs-layout-feature .sahs-inner{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  max-width:880px;
}
.sahs-layout-feature .sahs-heading{font-size:clamp(31px,5.6vw,58px);}
.sahs-layout-feature .sahs-desc{margin-left:auto;margin-right:auto;font-size:clamp(15.5px,1.8vw,18.5px);}
.sahs-layout-feature .sahs-btns{justify-content:center;}
.sahs-layout-feature .sahs-points{justify-content:center;}
.sahs-layout-feature::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(760px,84%);height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--sahs-gold),transparent);
}

/* --------------------------------------------------------------------------
   Arrows, dots, progress
   -------------------------------------------------------------------------- */
.sahs-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:20;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(10,20,15,.32);
  color:#fff;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);
  transition:background .18s ease,border-color .18s ease;
}
.sahs-arrow:hover{background:rgba(10,20,15,.62);border-color:rgba(255,255,255,.5);}
.sahs-arrow svg{width:19px;height:19px;}
.sahs-prev{left:14px;}
.sahs-next{right:14px;}

.sahs-dots{
  position:absolute;left:0;right:0;bottom:20px;z-index:20;
  display:flex;justify-content:center;align-items:center;gap:9px;
}
.sahs-dot{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.38);
  transition:background .2s ease,width .25s ease;
}
.sahs-dot:hover{background:rgba(255,255,255,.7);}
.sahs-dot.is-on{background:var(--sahs-gold);width:26px;border-radius:100px;}

.sahs-progress{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  height:3px;background:rgba(255,255,255,.14);
}
.sahs-progress-bar{
  display:block;height:100%;width:0;
  background:var(--sahs-gold);
}
.sahs-progress-bar.is-running{transition:width linear;}

/* --------------------------------------------------------------------------
   Before the script runs, only the first slide shows. This stops a stack of
   slides flashing on screen if the JavaScript is slow or blocked.
   -------------------------------------------------------------------------- */
.sahs:not(.is-ready) .sahs-slide:not(.is-active){display:none;}
.sahs:not(.is-ready) .sahs-arrow,
.sahs:not(.is-ready) .sahs-dots,
.sahs:not(.is-ready) .sahs-progress{opacity:0;}
.sahs.is-ready .sahs-arrow,
.sahs.is-ready .sahs-dots,
.sahs.is-ready .sahs-progress{opacity:1;transition:opacity .3s ease;}
.sahs.is-dragging .sahs-track{transition:none;}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .sahs{--sahs-min:clamp(420px,62vh,560px);}
  .sahs-layout-split .sahs-inner,
  .sahs-layout-split-left .sahs-inner,
  .sahs-layout-overlay .sahs-inner{grid-template-columns:1fr;}
  .sahs-layout-split .sahs-media,
  .sahs-layout-split-left .sahs-media{order:-1;max-width:520px;width:100%;}
  .sahs-layout-split-left .sahs-copy{order:0;}
  .sahs-frame{aspect-ratio:16/10;}
  .sahs-seal{left:auto;right:-8px;bottom:-16px;}
  .sahs-layout-split-left .sahs-seal{right:-8px;left:auto;}
  .sahs-arrow{width:40px;height:40px;}
  .sahs-prev{left:8px;}
  .sahs-next{right:8px;}
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */
@media(max-width:640px){
  .sahs{--sahs-min:auto;--sahs-pad:18px;}
  .sahs-inner{padding:38px var(--sahs-pad) 54px;}
  .sahs-slide{min-height:0;}
  .sahs-heading{font-size:clamp(26px,7.6vw,34px);}
  .sahs-desc{font-size:15.5px;margin-bottom:22px;}
  .sahs-btns{gap:10px;}
  .sahs-btn{width:100%;}
  .sahs-points{gap:9px 18px;margin-top:26px;padding-top:22px;}
  .sahs-points li{font-size:13.5px;}
  .sahs-eyebrow{font-size:11.5px;padding:6px 12px 6px 7px;}
  .sahs-arrow{display:none;}
  .sahs-dots{bottom:16px;}
  .sahs-seal{width:88px;right:-4px;bottom:-12px;}
  .sahs-seal b{font-size:24px;}
  .sahs-seal small{display:none;}
  .sahs-layout-overlay .sahs-shade,
  .sahs-layout-overlay-center .sahs-shade{
    background:linear-gradient(180deg,rgba(6,14,10,calc(var(--sahs-overlay,.62) * .8)) 0%,rgba(6,14,10,calc(var(--sahs-overlay,.62) + .2)) 100%);
  }
}

/* --------------------------------------------------------------------------
   People who ask their device to reduce motion
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .sahs-track{transition:none;}
  .sahs-seal::before{animation:none;}
  .sahs-progress{display:none;}
  .sahs-btn,.sahs-arrow,.sahs-dot{transition:none;}
}

/* message shown to logged in editors when no slides exist */
.sahs-empty{
  background:#fff8e5;border:1px solid #f0d999;border-left:4px solid #ce9737;
  color:#6b5417;padding:18px 20px;border-radius:6px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.6;
}
