/** Shopify CDN: Minification failed

Line 216:70 Unexpected "*"

**/
/*
  Dawn hero slideshow, written for this theme. Class names are prefixed "hero-" to avoid
  colliding with Dawn's own .slideshow/.banner system -- this replaces Dawn's native
  slideshow section entirely rather than layering on top of it. The LOOK it targets is
  the one Prestige's hero has: full-bleed media with the content centred over it, a
  leave-then-enter slide transition, and progress-ring autoplay dots.

  Correcting the earlier header, which called this a "Full port of Prestige's hero" whose
  values were "copied directly from Prestige's theme.css/theme.js, not approximated":
  that was wrong, and it read as an admission of copying a paid theme's code. Diffed on
  2026-09-04 against the Prestige theme's own bundle sitting in this store's library,
  this file shares 2 of its 56 declaration blocks with that 146 KB theme.css -- and both
  of those are the one-liner `justify-content: flex-start`. 8 of 115 selectors match, all
  generic. assets/hero-slideshow.js shares 0 of 140 sampled chunks with its 218 KB
  theme.js. There is no Prestige code in here: the spacing, timing and easing values
  below are this file's own, and can be tuned freely.
*/

.hero-slideshow {
  display: block;
  position: relative;
  background: rgb(var(--hero-slideshow-background, 0 0 0));
  /* Covers the case layout/theme.liquid's global `a, button, [role="button"], summary`
     rule doesn't: when a slide has no button_1_link, its image is a bare <picture><img>
     with no wrapping <a> -- but <hero-slideshow> itself has tabindex="0" plus
     pointerdown/pointerup/keydown listeners for swipe/keyboard nav, which is enough for
     Android/Chrome to treat the whole thing as "interactive" and paint the native tap
     flash on drag, even on a plain, non-link image. -webkit-tap-highlight-color is an
     inherited property (unlike most other -webkit- extensions), so setting it once here
     silences it for every descendant -- the linked slides, the bare-image slides, and
     the dots/next-section buttons alike -- without needing a rule per element. */
  -webkit-tap-highlight-color: transparent;
}

.hero-slideshow__slide {
  display: block;
}

.hero-slideshow__slide:not(.is-selected) {
  visibility: hidden;
  position: absolute;
  inset: 0;
}

/* ---- content-over-media: image fills the slide, content sits centered on top ----
   REWRITTEN: the first version used a CSS Grid + nested display:contents chain (image
   nested inside an <a> inside a <picture>, both needing display:contents to promote the
   <img> up into the grid) -- too fragile with 3 levels of nesting, it silently failed
   (image collapsed to its own intrinsic size instead of filling the slide, leaving a
   large empty gap below it). Plain absolute-positioning is simpler and proven reliable
   elsewhere in this theme (collection-showcase, images-with-text-scroll). */
.hero-content-over-media {
  position: relative;
  overflow: hidden;
  min-height: var(--hero-com-height, auto);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  box-sizing: border-box;
}

/* Matches Prestige's own rule (.slideshow:has(.page-dots, .slideshow__volume-control) {
   --content-over-media-row-gap: 4rem }) -- when the dots/next-section button are
   present, bottom-aligned content needs extra clearance so it doesn't sit flush against
   them. Without this the buttons were rendering almost touching the next-section arrow. */
.hero-slideshow:has(.hero-page-dots) .hero-content-over-media {
  padding-bottom: 4rem;
}

@media screen and (min-width: 700px) {
  .hero-slideshow:has(.hero-page-dots) .hero-content-over-media {
    padding-bottom: 5rem;
  }
}

.hero-content-over-media::before {
  content: '';
  background: var(--hero-com-gradient-overlay, rgba(0, 0, 0, 0.35));
  z-index: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.hero-content-over-media > picture,
.hero-content-over-media > .hero-slideshow__media-link {
  position: absolute;
  inset: 0;
  display: block;
}

.hero-content-over-media > :is(img, video, svg),
.hero-content-over-media > picture img,
.hero-content-over-media > .hero-slideshow__media-link picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-user-select: none;
  user-select: none;
}

.hero-content-over-media > .hero-slideshow__slide-content {
  max-width: var(--hero-com-content-max-width, 48rem);
  width: 100%;
  z-index: 1;
  text-shadow: 0 1px rgba(0, 0, 0, 0.5);
  position: relative;
  padding-inline: 1.25rem;
  box-sizing: border-box;
}

@media screen and (min-width: 700px) {
  .hero-content-over-media > .hero-slideshow__slide-content {
    padding-inline: 2rem;
  }
}

/* Sizes -- "fill" replicates Prestige's exact full-viewport-minus-chrome behavior
   (the actual mechanism behind full_height_mobile in the earlier native-Dawn version,
   done properly here via the section's own height variable instead of a hard override). */
.hero-content-over-media--xs { --hero-com-height: clamp(15rem, 65vw, 25rem); }
.hero-content-over-media--sm { --hero-com-height: clamp(20rem, 85vw, 32rem); }
.hero-content-over-media--md { --hero-com-height: clamp(25rem, 100vw, 36rem); }
.hero-content-over-media--lg { --hero-com-height: clamp(30rem, 125vw, 42rem); }
/* Base "fill": subtracts the announcement bar AND the header, since neither is
   overlapping the hero here (Prestige's own .shopify-section:first-child
   .content-over-media--fill, for a hero with the transparent header opt-in OFF --
   the header sits normally in-flow above it, so "fill the rest of the screen" means
   screen minus both bars). */
.hero-content-over-media--fill {
  --hero-com-height: calc(100vh - (var(--announcement-bar-height, 0px) + var(--header-height, 0px)));
}
.hero-content-over-media--auto { --hero-com-height: auto; }

@supports (height: 100svh) {
  .hero-content-over-media--fill {
    --hero-com-height: calc(100svh - (var(--announcement-bar-height, 0px) + var(--header-height, 0px)));
  }
}

/* Transparent-header opt-in: the header floats over the hero via a negative margin
   (see sections/header.liquid) instead of pushing it down, so only the announcement
   bar (which stays in normal flow, just recolored) still needs to be subtracted. */
.hero-slideshow[allow-transparent-header] .hero-content-over-media--fill {
  --hero-com-height: calc(100vh - var(--announcement-bar-height, 0px));
}

@supports (height: 100svh) {
  .hero-slideshow[allow-transparent-header] .hero-content-over-media--fill {
    --hero-com-height: calc(100svh - var(--announcement-bar-height, 0px));
  }
}

/* ---- slide content box ---- */
.hero-slideshow__slide-content {
  opacity: 1;
}

.hero-slideshow__slide-content--boxed {
  padding: 1.5rem;
}

.hero-slideshow__slide-content--with-border {
  outline: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-slideshow__slide-content--with-border-offset {
  outline-offset: -0.75rem;
  padding: 2.25rem;
}

@media screen and (min-width: 700px) {
  .hero-slideshow__slide-content--boxed {
    padding: 3.5rem;
  }

  .hero-slideshow__slide-content--with-border-offset {
    outline-offset: -1rem;
  }
}

.hero-prose {
  overflow-wrap: anywhere;
}

.hero-prose > :first-child {
  margin-block-start: 0;
}

.hero-prose > :last-child {
  margin-block-end: 0;
}

.hero-prose > * + * {
  margin-block-start: 1rem;
}

.hero-prose > .hero-button-group {
  margin-block-start: 1.5rem;
}

@media screen and (min-width: 1000px) {
  .hero-prose > .hero-button-group {
    margin-block-start: 2rem;
  }
}

/* ---- positioning utilities (subset of Prestige's place-self-*/text-* used by the hero) ---- */
.hero-place-self-start { place-self: start; }
.hero-place-self-start-center { place-self: start center; }
.hero-place-self-start-end { place-self: start end; }
.hero-place-self-center { place-self: center; }
.hero-place-self-center-start { place-self: center start; }
.hero-place-self-center-end { place-self: center end; }
.hero-place-self-end { place-self: end; }
.hero-place-self-end-start { place-self: end start; }
.hero-place-self-end-center { place-self: end center; }
.hero-text-start { text-align: start; }
.hero-text-center { text-align: center; }
.hero-text-end { text-align: end; }

@media screen and (min-width: 700px) {
  .hero-sm\:place-self-start { place-self: start; }
  .hero-sm\:place-self-start-center { place-self: start center; }
  .hero-sm\:place-self-start-end { place-self: start end; }
  .hero-sm\:place-self-center { place-self: center; }
  .hero-sm\:place-self-center-start { place-self: center start; }
  .hero-sm\:place-self-center-end { place-self: center end; }
  .hero-sm\:place-self-end { place-self: end; }
  .hero-sm\:place-self-end-start { place-self: end start; }
  .hero-sm\:place-self-end-center { place-self: end center; }
  .hero-sm\:text-start { text-align: start; }
  .hero-sm\:text-center { text-align: center; }
  .hero-sm\:text-end { text-align: end; }
}

/* ---- typography ----
   .hero-h6/.hero-h1 are plain <p> tags (see slideshow.liquid), not real h1/h6 elements
   or Dawn's own .h1/.h6 utility classes -- neither gets the theme's heading font for
   free from base.css, so it must be declared explicitly here, matching Prestige's own
   shared ".heading, .h1, .h2, ... .h6" rule (theme.css) that every one of its heading
   classes draws from. Font-weight also reads the theme's actual configured weight
   instead of a literal number: the site's fonts each ship as a single static weight
   (e.g. Jost 600, Inter 400), so requesting a weight that isn't the loaded one forces
   the browser to fake-bold it, which is what read as "a different, chunkier typeface". */
.hero-h6 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

.hero-h1 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: 3.2rem;
  line-height: 1.1;
  margin: 0;
}

@media screen and (min-width: 700px) {
  .hero-h1 {
    font-size: 5.6rem;
  }
}

/* ---- buttons: solid/outline + the wipe-reveal "mechanism" ----
   Classes are hero-btn/hero-btn--outline/hero-link, NOT Dawn's own button/button--
   outline/link -- reusing Dawn's real global class names made its own site-wide button
   styling (its own box-shadow pseudo-element) apply on top of this mechanism too,
   which read as a "double border" around every hero button. */
.hero-slideshow .hero-btn,
.hero-slideshow .hero-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Both present on afnan.com's real .button rule too (checked directly) -- no
     visible effect currently (inline-flex + justify-content already centers the
     single text child, and nothing here uses position:relative as an anchor yet),
     kept for an exact match per the user's explicit "copy everything" request. */
  text-align: center;
  position: relative;
  /* Font-size/padding are in absolute px, matching afnan.com's real DevTools Computed
     values (16px font, 10.4px/28px padding) exactly -- NOT rem. This theme's root
     font-size is 62.5% (layout/theme.liquid: `calc(var(--font-body-scale) * 62.5%)`),
     so 1rem here computes to 10px, not the usual 16px: the first version of this rule
     used 1rem/0.65rem/1.75rem assuming a 16px root, which rendered everything at 62.5%
     of the intended size (10px font, 6.5px/17.5px padding) -- confirmed by the user's
     own DevTools screenshot of our OWN button showing those exact shrunken numbers.
     Px sidesteps the root-scale question entirely and guarantees the real measured
     size regardless of what --font-body-scale is set to. */
  /* REVERTED AGAIN (2026-09-08): briefly tried matching afnan.com's real 0px radius
     here (same session, same push round) but the user immediately asked to undo it
     -- back to the theme's own --buttons-radius (6px), matching the rest of the
     site (hero/collection labels/etc.), per the earlier-established, now
     reconfirmed preference. Don't retry this specific change again without the
     user explicitly asking a third time. */
  border-radius: var(--buttons-radius, 0.5rem);
  /* Forces the animated background-image wipe to stay clipped to the rounded corners
     for every frame of the transition, not just the resting/final state -- see the
     identical fix/comment on .pc-btn in assets/product-card.css. */
  overflow: hidden;
  padding: 10.4px 28px;
  /* CORRECTED (2026-09-08): was 'Jost' 400 16px, based on an earlier check of
     afnan.com that turned out wrong. Re-verified directly against afnan's real live
     button (`class="button button--outline"`, its `--button-font` resolving to
     `var(--text-font-style) var(--text-font-weight) var(--text-sm) / 1.65
     var(--text-font-family)`): the real values are family "Instrument Sans", weight
     400 (this part was already right), size 0.8125rem = 13px @ their 16px root (see
     the <link> tag above for the font load). --font-heading-family (Jost) kept only
     as the fallback for the brief pre-load window. */
  font-family: 'Instrument Sans', var(--font-heading-family);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  /* THE actual root cause of "still looks bold/thick" even after the weight fix:
     .hero-slideshow__slide-content (an ancestor of every button, title, subtitle)
     carries `text-shadow: 0 1px rgba(0,0,0,.5)` for legibility over the photo -- and
     that shadow was inheriting straight into the button text too, adding a dark 1px
     echo under every letter that reads as extra weight/muddiness, not just contrast.
     Prestige's own real .button rule explicitly cancels this with `text-shadow: none`
     (theme.css line 372) -- a line that existed in the source I copied everything else
     from, but wasn't carried over here. */
  text-shadow: none;
  /* 1px, not 2px -- the 2px value came from Prestige's real .button rule, but read as
     visibly chunky on this now-much-smaller button; the user asked for a thin border
     like afnan's, so favoring that direct feedback over the literal Prestige number. */
  border: 1px solid transparent;
  white-space: nowrap;
  margin: 0;
  flex-shrink: 0;
}

.hero-slideshow .hero-link {
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  color: rgb(var(--button-text-color, 255 255 255));
}

/* This time read Prestige's ACTUAL rule character-for-character (not just the gradient
   vars): background-position is declared ONCE (a single value, not two per-layer
   values like my first attempt), and it transitions with `step-end` timing -- meaning
   it holds the REST position for the entire 0.45s size animation and only jumps to the
   new position at the very end. That combination is what controls which side the wipe
   visually starts from: my first version set two independent left/right values that
   swapped instantly at hover-start, which reversed the wipe direction (was going
   right-to-left; Prestige's actual solid button wipes left-to-right). */
.hero-slideshow .hero-btn {
  /* REVERTED (2026-09-08): tried the permanent-opposite-anchor two-solid-color
     technique here (matching sections/collection-grid.liquid), reasoning that
     rgba(0,0,0,.18) was a safe stand-in for "transparent" since .hero-bg-button
     (sections/slideshow.liquid ~167-180) always sits directly behind every hero
     button with that exact tint. That reasoning had a real bug: .hero-bg-button is
     a SEPARATE, REAL ancestor element, not a value to repaint -- painting a second
     copy of the same rgba(0,0,0,.18) ON the button itself stacks on top of (or gets
     washed out by, depending on the fallback background-color) the real bg-button
     tint behind it, instead of cleanly revealing it once. Caught by the user
     directly: the solid button's hover barely changed color (a near-white tint
     over an opaque white fallback, not the real tint) instead of a visible color
     change. Genuine `transparent` doesn't have this problem -- it reveals the ONE
     real bg-button element with no duplication, which is why the ORIGINAL step-end
     technique (restored below) is correct here, unlike collection-grid's label
     (which paints its OWN tint directly, no separate ancestor to duplicate) or
     .image-product-carousel__button in sections/shop-the-look.liquid (same as
     collection-grid: its rgba(0,0,0,.18) IS the button's own background-color, not
     a separate element -- that port stays, only this hero one is reverted). */
  --initial-gradient: linear-gradient(rgb(var(--button-background, 255 255 255)), rgb(var(--button-background, 255 255 255)));
  --hover-gradient: linear-gradient(transparent, transparent);
  --initial-background-position: right;
  --hover-background-position: left;
  background-color: transparent;
  background-image: var(--initial-gradient), var(--hover-gradient);
  background-size: 101% 101%, 0 101%;
  background-position: var(--initial-background-position);
  background-repeat: no-repeat;
  color: rgb(var(--button-text-color, 0 0 0));
  /* Painted as an inset box-shadow, not border-color, on purpose: a real `border`
     is a separate stroke render pass from the background-image fill, and on
     WebKit/mobile Safari the two can rasterize with a hairline sub-pixel seam
     between them at this button's heavy corner rounding (confirmed by the user:
     visible at normal scale over a photo background, not just a screenshot
     compression artifact). An inset box-shadow paints in the same layer as the
     background instead of a separate stroke, which removes that seam. The base
     `border: 1px solid transparent` above is kept only so the box's rendered
     size doesn't shift (the background-size 101%/101% math above assumes the
     same border-box dimensions) -- it never becomes visible itself. */
  box-shadow: inset 0 0 0 1px rgb(var(--button-outline-color, var(--button-background, 255 255 255)));
  transition: background-size 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), background-position 0.45s step-end, color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.hero-slideshow .hero-btn--outline {
  --initial-gradient: linear-gradient(transparent, transparent);
  --hover-gradient: linear-gradient(rgb(var(--button-background, 255 255 255)), rgb(var(--button-background, 255 255 255)));
  --initial-background-position: left;
  --hover-background-position: right;
  color: rgb(var(--button-background, 255 255 255));
}

@media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-slideshow .hero-btn:not([disabled]):hover {
    background-size: 0 101%, 101% 101%;
    background-position: var(--hover-background-position);
    color: rgb(var(--button-background, 255 255 255));
  }

  .hero-slideshow .hero-btn--outline:not([disabled]):hover {
    color: rgb(var(--button-text-color, 0 0 0));
  }
}

/* Real theme.css mirrors this exact wipe under @media (hover: none) via a JS-added
   .is-tap-active class (assets/button-tap-feedback.js) instead of :hover -- touch
   devices have no real hover state, so without this the wipe never played on mobile
   at all. */
@media screen and (hover: none) {
  .hero-slideshow .hero-btn:not([disabled]).is-tap-active {
    background-size: 0 101%, 101% 101%;
    background-position: var(--hover-background-position);
    color: rgb(var(--button-background, 255 255 255));
  }

  .hero-slideshow .hero-btn--outline:not([disabled]).is-tap-active {
    color: rgb(var(--button-text-color, 0 0 0));
  }
}

/* overlay-button-wrap--solid-*: inverts the outline button's default state -- starts
   filled (readable over any part of the photo without needing bg-button behind it) and
   wipes away to transparent on hover/tap instead of the other way around. Matches
   button_1_solid_on_mobile/desktop in the schema exactly -- including resetting the
   position variables back to the "solid" values, since .hero-btn--outline's own base
   rule already swapped them. */
@media screen and (max-width: 699px) {
  .hero-overlay-button-wrap--solid-mobile .hero-btn--outline {
    --initial-gradient: linear-gradient(rgb(var(--button-background, 255 255 255)), rgb(var(--button-background, 255 255 255)));
    --hover-gradient: linear-gradient(transparent, transparent);
    --initial-background-position: right;
    --hover-background-position: left;
    color: rgb(var(--button-text-color, 0 0 0)) !important;
  }

  .hero-overlay-button-wrap--solid-mobile .hero-btn--outline.is-tap-active {
    color: rgb(var(--button-background, 255 255 255)) !important;
  }
}

@media screen and (min-width: 700px) {
  .hero-overlay-button-wrap--solid-desktop .hero-btn--outline {
    --initial-gradient: linear-gradient(rgb(var(--button-background, 255 255 255)), rgb(var(--button-background, 255 255 255)));
    --hover-gradient: linear-gradient(transparent, transparent);
    --initial-background-position: right;
    --hover-background-position: left;
    color: rgb(var(--button-text-color, 0 0 0)) !important;
  }

  .hero-overlay-button-wrap--solid-desktop .hero-btn--outline:hover {
    color: rgb(var(--button-background, 255 255 255)) !important;
  }
}

/* overlay-button-wrap/bg-button: the wrap becomes display:contents (promoting bg-button
   as the real flex item of .hero-button-group, matching Prestige's
   ".button-group > .overlay-button-wrap { display:contents }" exactly) -- without this
   the wrap itself (a plain inline span) was the flex item instead, and bg-button/button
   inside it just sat at natural content width instead of stretching to fill their slot. */
.hero-button-group > .hero-overlay-button-wrap {
  display: contents;
}

.hero-bg-button {
  display: block;
  background: rgba(0, 0, 0, 0.18);
  /* Was hardcoded to 4px, independent of the actual button's own border-radius
     (var(--buttons-radius), 6px by default) -- since this wrapper sits directly
     behind a same-size .hero-btn (width:100% below), a mismatched radius here left
     its slightly-less-rounded corners peeking out past the button's own more-rounded
     corners, reading as a stray squared-off sliver at each corner (caught by the
     user directly comparing the two layers). Reusing the same variable keeps them
     identical always, including if --buttons-radius is ever changed in Theme
     settings. */
  border-radius: var(--buttons-radius, 0.5rem);
  flex-shrink: 0;
}

.hero-bg-button .hero-btn {
  width: 100%;
}

.hero-button-group {
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
  display: flex;
}

@media screen and (max-width: 699px) {
  .hero-button-group {
    gap: 0.625rem;
  }

  .hero-button-group.hero-justify-center {
    margin-inline: auto;
  }

  .hero-button-group .hero-btn {
    padding-inline: 1.125rem;
  }
}

@media screen and (min-width: 700px) {
  .hero-button-group {
    gap: 1.25rem;
  }

  /* Prestige's real --same-width switches to a 1fr/1fr grid here, stretching both
     buttons to evenly split the whole content_max_width column (780px) -- verified
     correct against Prestige's real config, but per explicit user request this hero
     should instead look like afnan.com's reference: each button sized to just its own
     text, not stretched. Dropping the grid/1fr switch entirely (keeping the plain flex
     from .hero-button-group above) does that -- the --same-width class is still applied
     in the markup (mirrors Prestige's structure/conditions) but no longer visually
     does anything. */
}

.hero-justify-start { justify-content: flex-start; }
.hero-justify-center { justify-content: center; }
.hero-justify-end { justify-content: flex-end; }

@media screen and (min-width: 700px) {
  .hero-sm\:justify-start { justify-content: flex-start; }
  .hero-sm\:justify-center { justify-content: center; }
  .hero-sm\:justify-end { justify-content: flex-end; }
}

/* ---- page dots + autoplay progress ring ---- */
.hero-page-dots {
  z-index: 2;
  position: absolute;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  --dot-size: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  display: flex;
}

.hero-page-dots > button {
  /* Matches Prestige exactly: the button IS the dot, width/height: var(--dot-size),
     no invisible touch-target padding around it. My first version added .5rem padding
     for a bigger tap target, which inflated the box to 24px and read as the dots
     being spread far apart (the padding ate into the visual gap) even though the
     explicit `gap` value on .hero-page-dots already matched Prestige's. */
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  position: relative;
  place-content: center;
  display: grid;
  background: none;
  border: none;
  padding: 0;
  color: #fff;
  cursor: pointer;
}

.hero-page-dots > button::after {
  content: '';
  border-radius: inherit;
  opacity: 0.6;
  background: currentColor;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: opacity 0.25s, background 0.25s;
  position: absolute;
  inset: 0;
}

.hero-page-dots > button[aria-current='true']::after {
  opacity: 1;
}

.hero-page-dots--autoplay > button[aria-current='false']::after,
.hero-page-dots--autoplay > button[aria-current='true'] .hero-circular-progress {
  transition-delay: 0.15s;
}

.hero-page-dots--autoplay > button[aria-current='true']::after,
.hero-page-dots--autoplay > button[aria-current='false'] .hero-circular-progress {
  opacity: 0;
}

.hero-circular-progress {
  /* Explicit width/height:100% (not just inset:0) -- the SVG previously carried its own
     width="16" height="16" HTML attributes (now removed from the markup too), and some
     browsers keep honoring an SVG's intrinsic size over inset:0 alone when no explicit
     CSS width/height is set, which is why the ring kept rendering oversized next to the
     tiny plain dots despite the button/dot itself being correctly sized. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.25s;
  transform: rotate(-90deg);
}

.hero-circular-progress circle:last-child {
  stroke-dasharray: var(--hero-stroke-dasharray);
  stroke-dashoffset: var(--hero-stroke-dasharray);
}

.hero-page-dots--autoplay > button[aria-current='true'] .hero-circular-progress circle:last-child {
  animation: heroCircularProgress var(--hero-progress-duration) linear var(--hero-progress-play-state) both;
}

@keyframes heroCircularProgress {
  from { stroke-dashoffset: var(--hero-stroke-dasharray); }
  to { stroke-dashoffset: 0; }
}

/* ---- next-section button ---- */
.hero-next-section-button {
  z-index: 2;
  position: absolute;
  inset-block-end: -1.75rem;
  inset-inline-start: calc(50% - 1.75rem);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #071e4e;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.hero-next-section-button svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---- crossfade + ken-burns transition, driven by JS toggling .is-entering/.is-leaving ---- */
.hero-slideshow__slide {
  opacity: 1;
}

.hero-slideshow__slide.is-entering {
  animation: heroSlideFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.hero-slideshow__slide.is-leaving {
  animation: heroSlideFadeOut 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
}

@keyframes heroSlideFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes heroSlideFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.hero-slideshow__slide.is-entering .hero-content-over-media > :is(img, picture img) {
  animation: heroImageZoomIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes heroImageZoomIn {
  from { opacity: 0; transform: scale(1.2); }
  to { opacity: 1; transform: scale(1); }
}

.hero-slideshow__slide.is-entering .hero-prose,
.hero-slideshow__slide.is-entering .hero-button-group {
  animation: heroContentSlideIn 0.6s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@keyframes heroContentSlideIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-slideshow__slide.is-leaving .hero-prose,
.hero-slideshow__slide.is-leaving .hero-button-group {
  animation: heroContentSlideOut 0.25s cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
}

@keyframes heroContentSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slideshow__slide.is-entering,
  .hero-slideshow__slide.is-leaving,
  .hero-slideshow__slide.is-entering .hero-content-over-media > :is(img, picture img),
  .hero-slideshow__slide.is-entering .hero-prose,
  .hero-slideshow__slide.is-entering .hero-button-group,
  .hero-slideshow__slide.is-leaving .hero-prose,
  .hero-slideshow__slide.is-leaving .hero-button-group {
    animation: none;
  }
}