/** Shopify CDN: Minification failed

Line 399:0 Expected "}" to go with "{"

**/
/* ═══════════════════════════════════════════════════════════
   CTX Hero Slider — Stylesheet
   File: assets/ctx-hero-slider.css
   ═══════════════════════════════════════════════════════════ */

/* ── Scoped reset — override Dawn globals safely ── */
.ctx-hero,
.ctx-hero *,
.ctx-hero *::before,
.ctx-hero *::after {
  box-sizing: border-box;
}

/* ══════════════════════════════════════════
   HERO WRAPPER
══════════════════════════════════════════ */
.ctx-hero {
  position: relative;
  width: 100%;
  height: var(--ctx-hero-height, 100vh);
  min-height: var(--ctx-hero-min-height, 560px);
  overflow: hidden;
  background: #0a0a0a;
}

/* ══════════════════════════════════════════
   SLIDES CONTAINER
══════════════════════════════════════════ */
.ctx-hero__slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Individual slide ── */
.ctx-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Visibility controlled by opacity only — NOT display:none
     so content is always in the DOM and layout is stable */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--ctx-transition, 800ms) ease,
    visibility var(--ctx-transition, 800ms) ease;
  pointer-events: none;
}

/* Active slide: fully visible and interactive */
.ctx-hero__slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ── CRITICAL: Override any Dawn global that hides aria-hidden children ──
   Dawn's base.css sometimes applies display:none or visibility:hidden
   to [aria-hidden="true"] descendants. We use .ctx-hero__slide directly
   so aria-hidden on the slide wrapper never hides its children in CSS. */
.ctx-hero__slide [aria-hidden="true"] {
  /* Keep decorative aria-hidden elements visible in layout */
}

/* ══════════════════════════════════════════
   SLIDE MEDIA (background layer)
══════════════════════════════════════════ */
.ctx-hero__slide-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.ctx-hero__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.ctx-hero__slide-placeholder {
  width: 100%;
  height: 100%;
  display: block;
}

/* ══════════════════════════════════════════
   OVERLAY (z-index 2, above media)
══════════════════════════════════════════ */
.ctx-hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.ctx-hero__overlay-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ══════════════════════════════════════════
   SLIDE CONTENT (z-index 3, above overlay)
   Lives INSIDE each .ctx-hero__slide so it
   transitions together with the image
══════════════════════════════════════════ */
.ctx-hero__slide-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex !important;   /* override any Dawn display:none on children */
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /*
    Strip reserved at the top for the fixed header, measured at runtime in
    ctx-hero-slider.js. Falls back to 0 so the hero is never dependent on the
    script having run.
  */
  padding-top: var(--ctx-hero-top-clear, 0px);
}

/*
  Auto margins rather than relying on the parent's align-items: center.

  Both centre the copy when there is spare room, but align-items lets an
  oversized block overflow equally in both directions - which is what pushed a
  three-line headline up under the nav on short screens. Auto margins collapse
  to zero once the space runs out, so the copy settles against the reserved
  strip and stops there.

  Only the block axis is set here; left/right stay auto from .ctx-container's
  own `margin: 0 auto`, which is what keeps the hero copy horizontally centred.
*/
.ctx-hero__slide-content > .ctx-container {
  margin-top: auto;
  margin-bottom: auto;
}

/* Container */
.ctx-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.ctx-hero--full .ctx-container {
  padding: 0 40px;
  max-width: 100%;
}
@media (max-width: 1280px) {
  .ctx-container{
    padding: 0 30px;
  }
}

/* ══════════════════════════════════════════
   TEXT BLOCK
══════════════════════════════════════════ */
.ctx-hero__text {
  display: flex !important;
  flex-direction: column;
  max-width: 640px;
  align-items: flex-start;
}

/* Desktop alignment */
.ctx-hero__text--left   { text-align: left;   align-items: flex-start; }
.ctx-hero__text--center { text-align: center; align-items: center;     }
.ctx-hero__text--right  { text-align: right;  align-items: flex-end;   }

/* Shift container justify when text is centered/right */
.ctx-hero__slide-content:has(.ctx-hero__text--center) { justify-content: center; }
.ctx-hero__slide-content:has(.ctx-hero__text--right)  { justify-content: flex-end; }

/* ── Headline ── */
.ctx-hero__headline,.ctx-hero__headline--desktop {
  font-family: var(--ctx-font-display, 'Anton', sans-serif);
  font-size: var(--ctx-heading-desktop, 72px);
  font-weight: 400;
  color: var(--ctx-heading-color, #ffffff);
  line-height: 82px;
  text-transform: uppercase;
  margin: 0 0 20px 0;
  padding: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.ctx-hero__headline--mobile  { 
  font-family: Anton;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px;
  color: var(--ctx-heading-color, #ffffff);
 }
/* Mobile/desktop headline span toggling */
.ctx-hero__headline--desktop { display: block; }
.ctx-hero__headline--mobile  { display: none;  }

/* ── Subtext ── */
.ctx-hero__sub {
  display: block !important;
  font-family: var(--ctx-font-body, 'Satoshi', sans-serif);
  font-size: 18px;
  font-weight: 400;
  /* Was rgba(255,255,255,.82) with no shadow, which disappeared against the
     lighter, busier parts of the hero photos - the dark overlay is a diagonal
     gradient and does not reach the middle of the frame on narrow screens.
     Opaque white plus the same shadow treatment the headline already uses, so
     the copy holds up over any image rather than relying on the overlay. */
  color: var(--ctx-sub-color, #ffffff);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.45);
  line-height: 1.55;
  margin: 0 0 36px 0;
  padding: 0;
  max-width: 340px;
}

/* ── CTA Button ── */
.ctx-hero__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(102deg, var(--ctx-red, #DE0E14) 34.98%, #f0ecec 120.01%);
  color: var(--ctx-btn-text, #ffffff) !important;
  text-decoration: none !important;
  font-family: var(--ctx-font-body, 'Satoshi', sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  padding: 5px 4px 5px 16px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.ctx-hero__cta:hover,
.ctx-hero__cta:focus {
  background: linear-gradient(92deg, var(--ctx-red, #DE0E14) 79.39%, #f0ecec 130.8%);
  transform: translateY(-1px);
  color: var(--ctx-btn-text, #ffffff) !important;
  text-decoration: none !important;
}


.ctx-hero__cta-arrow svg{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #ffffff2e;
    border-radius: 12px;
    width: 46px;
    height: 46px;
    color: #fff;
}

/* ══════════════════════════════════════════
   PAGINATION DOTS
══════════════════════════════════════════ */
.ctx-hero__dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.20);
    padding: 7px 10px;
    border-radius: 40px;
}

.ctx-hero__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.3s ease, width 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
}

.ctx-hero__dot.active {
  background: #ffffff;
  width: 22px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════
   TABLET ≤ 1024px
══════════════════════════════════════════ */
@media screen and (max-width: 1024px) {
  .ctx-container {
    padding: 0 48px;
  }
  .ctx-hero__headline {
    font-size: clamp(40px, 5.5vw, 64px);
  }
}

/* ══════════════════════════════════════════
   MOBILE ≤ 768px
══════════════════════════════════════════ */
@media screen and (max-width: 768px) {

  .ctx-hero {
    height: 100svh;
    min-height: var(--ctx-hero-min-height, 560px);
  }

  /* Center content on mobile */
  .ctx-hero__slide-content {
    align-items: center !important;
    justify-content: center !important;
  }

  .ctx-container {
    padding: 0 24px;
  }

  /* Switch to mobile headline */
  .ctx-hero__headline--desktop { display: none;  }
  .ctx-hero__headline--mobile  { display: block; margin: 0;}

  .ctx-hero__headline {
    font-size: var(--ctx-heading-mobile, 44px);
    /* 400, NOT 800. Anton ships a single weight — 400 — and asking for 800
       does not embolden it, it drops it: the browser finds no matching face and
       renders the sans-serif fallback instead. That is why the mobile hero was
       the one place the headline came out wide and light while every other
       heading on the site was Anton. Anton is a display face; 400 is already
       heavy, and there is no bolder cut to reach for. */
    font-weight: 400;
    text-transform: none;
    letter-spacing: -0.5px;
    line-height: 1.0;
    margin-bottom: 12px;
  }

  /* Mobile text alignment overrides */
  .ctx-hero__text--mobile-left   { text-align: left;   align-items: flex-start; max-width: 100%; }
  .ctx-hero__text--mobile-center { text-align: center; align-items: center;     max-width: 100%; }
  .ctx-hero__text--mobile-right  { text-align: right;  align-items: flex-end;   max-width: 100%; }

  .ctx-hero__slide-content:has(.ctx-hero__text--mobile-center) { justify-content: center !important; }
  .ctx-hero__slide-content:has(.ctx-hero__text--mobile-right)  { justify-content: flex-end !important; }

  .ctx-hero__sub {
    max-width: 280px;
    margin-bottom: 24px;
  }

  .ctx-hero__cta   { font-size: 15px; }
  .ctx-hero__dots  { bottom: 20px; }

/* ══════════════════════════════════════════
   SMALL MOBILE ≤ 480px
══════════════════════════════════════════ */
@media screen and (max-width: 480px) {
  .ctx-hero__headline { font-size: clamp(30px, 10vw, 42px); }
  .ctx-hero__sub      { font-size: 16px; max-width: 340px; }
  .ctx-container      { padding: 0 20px; }
}

/* ══════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ctx-hero__slide     { transition: none; }
  .ctx-hero__dot       { transition: none; }
  .ctx-hero__cta:hover { transform: none; }
}