/* ============================================================================
   Homepage hero — the native .sk-hero block at every width      (2026-09-28)

   Loaded from index.tpl right after home-premium.css, homepage only. Restyles
   the server-rendered .sk-hero block (modules/ps_imageslider/views/templates/
   hook/slider.tpl), which REPLACES the 1920x720 artwork at every width:
     < 768px    card: photo on top, full bleed; words underneath
     768-991    split card: words left, photo on a pink-tint panel right
     >= 992     full-width band, content on the page column (section 9)
   Outside hero mode (a slide with no block in slider.tpl's map) none of this
   applies and the artwork shows as before.

   Owner, 2026-09-28: the phone hero "doesn't look good… looks broken on some
   devices", change the look. What was actually wrong:
     - The headline rendered at 13px, body size. theme.css's "Mobile Hero Fix"
       sets `#home-slider .carousel p { font-size: 13px !important }` at
       (1,1,1); home-premium.css's `#index .sk-hero__title` is (1,1,0), so with
       both !important the theme rule won. Same for the supporting line.
     - The photo bands (img/home-mobile/slide-N-photo.webp) were cut with a
       sliver of the artwork's "1978" watermark and, on slide 3, a ghost strip
       down the left edge. Recut as img/home-hero/slide-N.webp (16:10) —
       new names, so Cloudflare's 7-day copies of the old files never apply.
     - 768-991px showed the desktop artwork shrunk to ~720x250, where its small
       print is ~6px. Tablets now get the card too, as a split layout.

   Direction: the same family as "Where Quality Speaks" (.sk-wqs) — white
   panel, one pink hairline, pink eyebrow, one Playfair headline, Inter for the
   rest. Pink + white only: the gold rule, gold stat bars and gold swipe are gone.

   Specificity: every selector starts `#index #home-slider` (2 ids), which
   out-ranks theme.css (1 id, !important) once this side is !important too, and
   out-ranks home-premium.css's `#index .sk-hero…` (1 id) outright. Where
   home-premium.css already uses the long `.sk-hero-mode .carousel-item
   .sk-has-hero` selector, the same selector is repeated here (later file wins).

   theme.css also zeroes margin-bottom / padding-bottom on `#home-slider *`
   with !important, so vertical spacing below is written as margin-TOP, and the
   few bottom values that matter carry !important.
   ========================================================================== */

/* ---------- 0. Every width: the slides are the native block ----------
   home-premium.css only stacks the slides below 768px (a max-width: 767.98px
   block), so it is restated here for every width: every slide in one grid
   cell, the frame as tall as the tallest slide, and the change is a pure
   opacity crossfade. */
#index #home-slider.sk-hero-mode .carousel-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

#index #home-slider.sk-hero-mode .carousel-item.sk-has-hero {
  grid-area: 1 / 1;
  position: relative !important;
  inset: auto !important;
  float: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  justify-content: normal !important;
  align-content: normal !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  transform: none !important;
  transition: opacity 700ms cubic-bezier(.4, 0, .2, 1) !important;
}

#index #home-slider.sk-hero-mode .carousel-item.sk-has-hero:not(.active) {
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

#index #home-slider.sk-hero-mode .carousel-item.sk-has-hero.active {
  opacity: 1;
  z-index: 1;
}

/* The 1920x720 artwork is replaced by the native block at every width. */
#index #home-slider.sk-hero-mode .carousel-item.sk-has-hero picture,
#index #home-slider.sk-hero-mode .carousel-item.sk-has-hero img {
  display: none !important;
}

#index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .carousel-link,
#index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .carousel-content {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit;
  text-decoration: none;
}

/* Undo home-premium.css's visually-hidden block (it was the desktop hero's
   text alternative while the artwork showed). */
#index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
  clip: auto;
  white-space: normal;
  text-align: left;
}

/* The corner "1978" and the pink-to-gold top rule are retired. */
#index #home-slider.sk-hero-mode .sk-hero::before,
#index #home-slider.sk-hero-mode .sk-hero::after {
  content: none;
  display: none;
}

@media (max-width: 991.98px) {

  /* ---------- 1. Frame: one white panel with a pink hairline ---------- */

  #index #home-slider.sk-hero-mode .carousel.slide {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--sk-pink-line, #f0dce8);
    border-radius: 16px !important;
    background: #fff;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  /* ---------- 2. The card (phones + tablets) ---------- */

  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Bottom room is for the dots, which sit on the card. */
    padding: 0 1.125rem 3.25rem !important;
    background: #fff;
  }

  /* ---------- 3. Photo ---------- */

  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero__shot {
    order: -1;
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-height: none;
    aspect-ratio: 16 / 10;
    /* Full bleed: out through the card's side padding. */
    margin: 0 -1.125rem 1.25rem !important;
    border-radius: 0;
    border-bottom: 1px solid var(--sk-pink-line, #f0dce8);
    box-shadow: none;
    background-color: var(--sk-pink-tint, #fef0f7);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #index #home-slider.sk-hero-mode .sk-hero--s1 .sk-hero__shot { background-image: url("../img/home-hero/slide-1.webp"); }
  #index #home-slider.sk-hero-mode .sk-hero--s2 .sk-hero__shot { background-image: url("../img/home-hero/slide-2.webp"); }
  #index #home-slider.sk-hero-mode .sk-hero--s3 .sk-hero__shot { background-image: url("../img/home-hero/slide-3.webp"); }

  /* ---------- 4. Words ----------
     All three slides share the height of the tallest (they are stacked in one
     grid cell). The words of a shorter slide are centred in the space under the
     photo — auto margins above the eyebrow and below the last block — instead of
     leaving all of the difference as an empty band above the dots. Measured
     before this: 30px above the dots on slide 3, up to 100px on slide 1. */
  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero__eyebrow {
    margin-top: auto;
  }

  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero__stats,
  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero__rows {
    margin-bottom: auto !important;
  }

  /* Same component as the pink eyebrow on the demo card further down: a short
     rule, then tracked capitals. No pill, no shadow. */
  #index #home-slider.sk-hero-mode .sk-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .6rem;
    margin: 0;
    padding: 0 !important;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--sk-pink, #d50075);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  #index #home-slider.sk-hero-mode .sk-hero__eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  /* (2,3,0) + !important: beats theme.css's 13px `#home-slider .carousel p`. */
  #index #home-slider.sk-hero-mode .carousel .sk-hero__title {
    margin: .55rem 0 0 !important;
    color: var(--sk-ink, #1a0010);
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem) !important;
    font-weight: 600;
    font-variant-numeric: lining-nums;
    line-height: 1.14 !important;
    letter-spacing: -.015em;
    text-wrap: balance;
  }

  #index #home-slider.sk-hero-mode .carousel .sk-hero__title em {
    font-style: italic;
    color: var(--sk-pink, #d50075);
    background: none;
  }

  #index #home-slider.sk-hero-mode .carousel .sk-hero__copy {
    max-width: 42ch;
    margin: .6rem 0 0 !important;
    color: var(--sk-ink-soft, #5c4453);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .9375rem !important;
    line-height: 1.6 !important;
  }

  /* ---------- 5. Slide 1: three figures in one row ---------- */

  #index #home-slider.sk-hero-mode .sk-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 1.1rem 0 0;
    padding: .9rem 0 0 !important;
    border-top: 1px solid var(--sk-pink-line, #f0dce8);
    list-style: none;
  }

  #index #home-slider.sk-hero-mode .sk-hero__stats li {
    min-width: 0;
    padding: 0 .75rem !important;
    border: 0;
    border-left: 1px solid var(--sk-pink-line, #f0dce8);
  }

  #index #home-slider.sk-hero-mode .sk-hero__stats li:first-child {
    padding-left: 0 !important;
    border-left: 0;
  }

  #index #home-slider.sk-hero-mode .sk-hero__stats b {
    display: block;
    color: var(--sk-pink, #d50075);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.1;
  }

  #index #home-slider.sk-hero-mode .sk-hero__stats span {
    display: block;
    margin-top: .3rem;
    color: var(--sk-ink-mute, #7d6473);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* ---------- 6. Slides 2 + 3: a ticked list, hairlines between ----------
     Every slide's detail block (figures, list, or label + list) opens with the
     same hairline at the same distance below the copy, so the three slides
     share one structure. */

  #index #home-slider.sk-hero-mode .sk-hero__rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 1.1rem 0 0;
    padding: 0 !important;
    border-top: 1px solid var(--sk-pink-line, #f0dce8);
    list-style: none;
  }

  /* Slide 3's awarding body, printed once above its awards (slider.tpl
     'rowsLabel'). Same voice as the figure labels on slide 1. */
  #index #home-slider.sk-hero-mode .sk-hero__label {
    display: block;
    margin: 1.1rem 0 0;
    padding: .9rem 0 0 !important;
    border-top: 1px solid var(--sk-pink-line, #f0dce8);
    color: var(--sk-ink-mute, #7d6473);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  #index #home-slider.sk-hero-mode .sk-hero__label + .sk-hero__rows {
    margin-top: .15rem;
    border-top: 0;
  }

  #index #home-slider.sk-hero-mode .sk-hero__rows li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-width: 0;
    padding: .6rem 0 !important;
    border: 0;
    border-radius: 0;
    background: none;
  }

  #index #home-slider.sk-hero-mode .sk-hero__rows li + li {
    border-top: 1px solid var(--sk-pink-line, #f0dce8);
  }

  #index #home-slider.sk-hero-mode .sk-hero__rows svg {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 11px;
    height: 11px;
    margin-top: 1px;
    padding: 4px !important;
    border-radius: 50%;
    background: var(--sk-pink, #d50075);
    color: #fff;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #index #home-slider.sk-hero-mode .sk-hero__rows b {
    display: block;
    color: var(--sk-ink, #1a0010);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
  }

  #index #home-slider.sk-hero-mode .sk-hero__rows span {
    display: block;
    margin-top: .1rem;
    color: var(--sk-ink-mute, #7d6473);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .6875rem;
    line-height: 1.35;
    letter-spacing: 0;
  }

  /* Slide 2's four short points read as a 2 x 2 block. */
  #index #home-slider.sk-hero-mode .sk-hero--s2 .sk-hero__rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }

  #index #home-slider.sk-hero-mode .sk-hero--s2 .sk-hero__rows li + li {
    border-top: 0;
  }

  #index #home-slider.sk-hero-mode .sk-hero--s2 .sk-hero__rows li:nth-child(n + 3) {
    border-top: 1px solid var(--sk-pink-line, #f0dce8);
  }

  #index #home-slider.sk-hero-mode .sk-hero--s2 .sk-hero__rows li {
    gap: .55rem;
  }

  /* ---------- 7. Dots: on the card, pink only ---------- */

  #index #home-slider.sk-hero-mode .carousel-indicators {
    position: absolute !important;
    inset-inline: 0;
    bottom: 18px !important;
    width: fit-content;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 8px !important;
    background: none;
    box-shadow: none;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    z-index: 3;
  }

  #index #home-slider.sk-hero-mode .carousel-indicators button {
    width: 20px !important;
    background: var(--sk-pink-line, #f0dce8) !important;
  }

  #index #home-slider.sk-hero-mode .carousel-indicators button.active {
    width: 36px !important;
    background: var(--sk-pink, #d50075) !important;
  }

  /* Arrows sat over the words at card width; swipe and the dots remain. */
  #index #home-slider.sk-hero-mode .carousel-control-prev,
  #index #home-slider.sk-hero-mode .carousel-control-next {
    display: none !important;
  }

  /* Tap feedback: the whole card is the link. */
  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .carousel-link:active .sk-hero {
    transform: none;
    background: #fffafd;
  }

  /* Keyboard focus on the card (home-premium.css only did this below 768px). */
  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .carousel-link:focus-visible {
    outline: none;
  }

  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .carousel-link:focus-visible .sk-hero {
    outline: 3px solid var(--sk-pink, #d50075);
    outline-offset: -3px;
  }

  /* The photo is last in the markup but first on screen: it settles in first,
     not after the words (home-premium.css staggers children by DOM order). */
  #index #home-slider.sk-hero-mode .carousel-item.active .sk-hero > .sk-hero__shot {
    animation-delay: 0ms;
  }
}

/* ---------- 8. Tablets: words left, photo on a tinted panel right ----------
   The card is 696px wide at every tablet width (the 720px container). The
   photographs are landscape, so in a half-width column they can never fill a
   ~420px-tall card: the right half is a full-height pink-tint panel (flush to
   the card's top, right and bottom edges) with the photo contained in it,
   instead of a small framed picture floating in white. */
@media (min-width: 768px) and (max-width: 991.98px) {
  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    /* flexible | eyebrow | title | copy | detail | detail | flexible:
       the words sit on the card's centre line on every slide (the same rule as
       the auto margins on phones), and the photo panel spans all seven rows. */
    grid-template-rows: 1fr repeat(5, auto) 1fr;
    column-gap: 2rem;
    align-items: start;
    padding: 1.75rem 0 3.25rem 2rem !important;
  }

  #index #home-slider.sk-hero-mode .sk-hero > * {
    grid-column: 1;
  }

  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero__eyebrow {
    grid-row: 2;
    justify-self: start;
    margin-top: 0;
  }

  #index #home-slider.sk-hero-mode .sk-hero__title { grid-row: 3; }
  #index #home-slider.sk-hero-mode .sk-hero__copy { grid-row: 4; }

  #index #home-slider.sk-hero-mode .sk-hero__stats,
  #index #home-slider.sk-hero-mode .sk-hero__label,
  #index #home-slider.sk-hero-mode .sk-hero__rows {
    grid-row: 5;
  }

  #index #home-slider.sk-hero-mode .sk-hero__label + .sk-hero__rows {
    grid-row: 6;
  }

  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero__shot {
    order: 0;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    box-sizing: border-box;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    margin: -1.75rem 0 -3.25rem 0 !important;
    padding: 1rem !important;
    border: 0;
    border-left: 1px solid var(--sk-pink-line, #f0dce8);
    border-radius: 0;
    background-color: var(--sk-pink-tint, #fef0f7);
    background-origin: content-box;
    background-size: contain;
  }

  /* Dots under the words, not under the photo. */
  #index #home-slider.sk-hero-mode .carousel-indicators {
    inset-inline: auto;
    left: 2rem !important;
    right: auto !important;
    bottom: 22px !important;
    margin: 0 !important;
  }
}

/* ---------- 9. Desktop (>= 992px): a full-width band, content on the column ----------
   Owner, 2026-09-28 (desktop screenshot): the banner "can be a little big and
   professional". It was the 1920x720 artwork fitted to the 1296px column: 486px
   tall, its supporting line and stat labels baked in at ~9-11px, and nothing
   about its size could change without cropping the words out of the picture.

   Now the band runs edge to edge (the page's own pattern — "New products" and
   the trust band are full-width bands too) and its CONTENT sits on the same
   column as every other section: the words start on the column's left edge,
   the photograph ends on its right edge, the dots and arrows sit on those two
   edges. `calc((100% - var(--sk-wrap)) / 2 + var(--sk-gutter))` is the column
   edge measured from the band (home-align-premium.css sets --sk-wrap per
   breakpoint). Real text: a 42-58px headline, 17px copy, 32px figures.

   Photographs: img/home-hero/slide-N-wide.webp, cut from the original uploads.
   Slides 1-2 are machines cut out on the artwork's pink wash, so their edges
   fade into the band (mask) and the machines stand on it as in the artwork;
   slide 3 is a photo collage, shown framed. */
@media (min-width: 992px) {
  #index #home-slider.sk-hero-mode {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #index #home-slider.sk-hero-mode .carousel.slide {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-bottom: 1px solid var(--sk-pink-line, #f0dce8);
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    /* White on the words' side, the artwork's pink wash behind the machines. */
    background:
      radial-gradient(52% 85% at 76% 52%, #fde6f0 0%, rgba(253, 230, 240, 0) 72%),
      linear-gradient(100deg, #fff 0%, #fff 34%, #fdf3f8 62%, #fcecf4 100%);
  }

  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    /* flexible | eyebrow | title | copy | detail | detail | flexible */
    grid-template-rows: 1fr repeat(5, auto) 1fr;
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
    min-height: clamp(470px, 30vw + 110px, 620px);
    padding-block: clamp(2.75rem, 4.2vw, 4rem) clamp(4.5rem, 5.6vw, 5.5rem) !important;
    padding-inline: calc((100% - var(--sk-wrap)) / 2 + var(--sk-gutter)) !important;
    background: none;
    cursor: pointer;
  }

  #index #home-slider.sk-hero-mode .sk-hero > * {
    grid-column: 1;
  }

  #index #home-slider.sk-hero-mode .sk-hero__eyebrow {
    grid-row: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: 0 !important;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--sk-pink, #d50075);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  #index #home-slider.sk-hero-mode .sk-hero__eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  #index #home-slider.sk-hero-mode .carousel .sk-hero__title {
    grid-row: 3;
    max-width: 14ch;
    margin: 1rem 0 0 !important;
    color: var(--sk-ink, #1a0010);
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(2.625rem, 1.25rem + 2.2vw, 3.625rem) !important;
    font-weight: 600;
    font-variant-numeric: lining-nums;
    line-height: 1.08 !important;
    letter-spacing: -.02em;
    text-wrap: balance;
  }

  #index #home-slider.sk-hero-mode .carousel .sk-hero__title em {
    font-style: italic;
    color: var(--sk-pink, #d50075);
    background: none;
  }

  #index #home-slider.sk-hero-mode .carousel .sk-hero__copy {
    grid-row: 4;
    max-width: 40ch;
    margin: 1.1rem 0 0 !important;
    color: var(--sk-ink-soft, #5c4453);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
  }

  /* Slide 1: three figures */
  #index #home-slider.sk-hero-mode .sk-hero__stats {
    grid-row: 5;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 0;
    margin: 1.9rem 0 0;
    padding: 1.4rem 0 0 !important;
    border-top: 1px solid var(--sk-pink-line, #f0dce8);
    list-style: none;
  }

  #index #home-slider.sk-hero-mode .sk-hero__stats li {
    min-width: 0;
    padding: 0 2rem !important;
    border: 0;
    border-left: 1px solid var(--sk-pink-line, #f0dce8);
  }

  #index #home-slider.sk-hero-mode .sk-hero__stats li:first-child {
    padding-left: 0 !important;
    border-left: 0;
  }

  #index #home-slider.sk-hero-mode .sk-hero__stats b {
    display: block;
    color: var(--sk-pink, #d50075);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.05;
  }

  #index #home-slider.sk-hero-mode .sk-hero__stats span {
    display: block;
    margin-top: .45rem;
    color: var(--sk-ink-mute, #7d6473);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Slides 2 + 3: ticked lists */
  #index #home-slider.sk-hero-mode .sk-hero__label {
    grid-row: 5;
    display: block;
    margin: 1.9rem 0 0;
    padding: 1.4rem 0 0 !important;
    border-top: 1px solid var(--sk-pink-line, #f0dce8);
    color: var(--sk-ink-mute, #7d6473);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  #index #home-slider.sk-hero-mode .sk-hero__rows {
    grid-row: 5;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 30rem;
    margin: 1.9rem 0 0;
    padding: 0 !important;
    border-top: 1px solid var(--sk-pink-line, #f0dce8);
    list-style: none;
  }

  #index #home-slider.sk-hero-mode .sk-hero__label + .sk-hero__rows {
    grid-row: 6;
    margin-top: .35rem;
    border-top: 0;
  }

  #index #home-slider.sk-hero-mode .sk-hero__rows li {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    min-width: 0;
    padding: .8rem 0 !important;
    border: 0;
    border-radius: 0;
    background: none;
  }

  #index #home-slider.sk-hero-mode .sk-hero__rows li + li {
    border-top: 1px solid var(--sk-pink-line, #f0dce8);
  }

  #index #home-slider.sk-hero-mode .sk-hero__rows svg {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 12px;
    height: 12px;
    margin-top: 2px;
    padding: 5px !important;
    border-radius: 50%;
    background: var(--sk-pink, #d50075);
    color: #fff;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #index #home-slider.sk-hero-mode .sk-hero__rows b {
    display: block;
    color: var(--sk-ink, #1a0010);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
  }

  #index #home-slider.sk-hero-mode .sk-hero__rows span {
    display: block;
    margin-top: .15rem;
    color: var(--sk-ink-mute, #7d6473);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .8125rem;
    line-height: 1.4;
  }

  #index #home-slider.sk-hero-mode .sk-hero--s2 .sk-hero__rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  #index #home-slider.sk-hero-mode .sk-hero--s2 .sk-hero__rows li + li {
    border-top: 0;
  }

  #index #home-slider.sk-hero-mode .sk-hero--s2 .sk-hero__rows li:nth-child(n + 3) {
    border-top: 1px solid var(--sk-pink-line, #f0dce8);
  }

  /* The photograph: right column, on the column's right edge. */
  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero__shot {
    display: block;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1140 / 720;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* Fade the artwork's own pink wash into the band on every side. The crop
       is x 850-1920 of the 1920x720 upload (left of 850 is the artwork's
       baked-in headline) plus a 70px left margin stretched from its plain
       edge column, so the 7% left fade ends just before the first machine.
       The right edge is where the upload itself ends (machines ~20px in), so
       that fade is only the last 4%. A flat-colour margin left a visible seam;
       stretching the RIGHT edge drew streaks from the machines' rails. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 7%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 7%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-composite: intersect;
  }

  #index #home-slider.sk-hero-mode .sk-hero--s1 .sk-hero__shot { background-image: url("../img/home-hero/slide-1-wide.webp"); }
  #index #home-slider.sk-hero-mode .sk-hero--s2 .sk-hero__shot { background-image: url("../img/home-hero/slide-2-wide.webp"); }

  /* The award collage is photographs, not a cut-out: framed, not faded. */
  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero--s3 .sk-hero__shot {
    width: 94%;
    aspect-ratio: 1052 / 678;
    border: 1px solid var(--sk-pink-line, #f0dce8);
    border-radius: 16px;
    background-image: url("../img/home-hero/slide-3-wide.webp");
    box-shadow: 0 24px 60px -30px rgba(213, 0, 117, .35);
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* ---- Controls on the column: dots bottom-left, arrows bottom-right ---- */
  #index #home-slider.sk-hero-mode .carousel-indicators {
    position: absolute !important;
    inset-inline: auto;
    left: calc((100% - var(--sk-wrap)) / 2 + var(--sk-gutter)) !important;
    right: auto !important;
    bottom: clamp(1.75rem, 2.4vw, 2.25rem) !important;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    justify-content: flex-start;
    background: none;
    box-shadow: none;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    z-index: 3;
  }

  #index #home-slider.sk-hero-mode .carousel-indicators button {
    width: 24px !important;
    background: var(--sk-pink-line, #f0dce8) !important;
  }

  #index #home-slider.sk-hero-mode .carousel-indicators button.active {
    width: 44px !important;
    background: var(--sk-pink, #d50075) !important;
  }

  #index #home-slider.sk-hero-mode .carousel-control-prev,
  #index #home-slider.sk-hero-mode .carousel-control-next {
    top: auto !important;
    bottom: clamp(1.1rem, 1.8vw, 1.6rem) !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    transform: none !important;
    opacity: 1 !important;
    border: 1px solid var(--sk-pink-line, #f0dce8) !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(26, 0, 16, .07) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #index #home-slider.sk-hero-mode .carousel-control-next {
    right: calc((100% - var(--sk-wrap)) / 2 + var(--sk-gutter)) !important;
  }

  #index #home-slider.sk-hero-mode .carousel-control-prev {
    right: calc((100% - var(--sk-wrap)) / 2 + var(--sk-gutter) + 54px) !important;
  }

  #index #home-slider.sk-hero-mode .carousel-control-prev-icon,
  #index #home-slider.sk-hero-mode .carousel-control-next-icon {
    filter: brightness(0) saturate(100%) invert(12%) sepia(90%) saturate(6000%) hue-rotate(318deg) brightness(88%) !important;
  }

  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .carousel-link:focus-visible {
    outline: none;
  }

  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .carousel-link:focus-visible .sk-hero {
    outline: 3px solid var(--sk-pink, #d50075);
    outline-offset: -3px;
  }

  /* Entrance: the words rise in, the photograph settles. */
  #index #home-slider.sk-hero-mode .carousel-item.active .sk-hero > * {
    animation: sk-hero-desk-in 700ms cubic-bezier(.16, 1, .3, 1) both;
  }

  #index #home-slider.sk-hero-mode .carousel-item.active .sk-hero > .sk-hero__title { animation-delay: 60ms; }
  #index #home-slider.sk-hero-mode .carousel-item.active .sk-hero > .sk-hero__copy { animation-delay: 120ms; }
  #index #home-slider.sk-hero-mode .carousel-item.active .sk-hero > .sk-hero__stats,
  #index #home-slider.sk-hero-mode .carousel-item.active .sk-hero > .sk-hero__label,
  #index #home-slider.sk-hero-mode .carousel-item.active .sk-hero > .sk-hero__rows { animation-delay: 180ms; }

  #index #home-slider.sk-hero-mode .carousel-item.active .sk-hero > .sk-hero__shot {
    animation: sk-hero-desk-settle 1100ms cubic-bezier(.16, 1, .3, 1) both;
  }
}

/* From 1200px the photograph takes more of the column (was 6 of 11 parts):
   at the 1296px column the machines come out ~750px wide, larger than the old
   artwork showed them (722px), with the words still on a ~500px measure. */
@media (min-width: 1200px) {
  #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero {
    grid-template-columns: minmax(0, 4.4fr) minmax(0, 6.6fr);
    column-gap: clamp(2rem, 3vw, 3.25rem);
  }
}

@media (min-width: 992px) and (hover: hover) {
  #index #home-slider.sk-hero-mode .carousel-control-prev:hover,
  #index #home-slider.sk-hero-mode .carousel-control-next:hover {
    transform: none !important;
    border-color: var(--sk-pink, #d50075) !important;
    background: var(--sk-pink, #d50075) !important;
  }

  #index #home-slider.sk-hero-mode .carousel-control-prev:hover .carousel-control-prev-icon,
  #index #home-slider.sk-hero-mode .carousel-control-next:hover .carousel-control-next-icon {
    filter: brightness(0) invert(1) !important;
  }
}

@keyframes sk-hero-desk-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes sk-hero-desk-settle {
  from { opacity: 0; transform: translateX(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 10. Speed: slides 2 and 3 wait for slide 1's photograph ----------
   (2026-09-28) Both hidden slides used to fetch their photographs (138KB on a
   phone) during first load, competing with slide 1 — the page's largest paint.
   Until html.sk-hero-rest is set they have no background image; index.tpl adds
   the class from the slide-1 preload's onload (and on window load as a safety
   net). The carousel first advances 4s after it starts, so they are in by then.
   Gated on .sk-js: with JavaScript off nothing is held back. */
.sk-js:not(.sk-hero-rest) #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero--s2 .sk-hero__shot,
.sk-js:not(.sk-hero-rest) #index #home-slider.sk-hero-mode .carousel-item.sk-has-hero .sk-hero--s3 .sk-hero__shot {
  background-image: none !important;
}

/* ---------- 11. Speed: the first slide is on screen at first paint ----------
   (2026-09-28) Every slide's words and photograph rise in from opacity 0.
   On the FIRST view that tied the page's largest paint to the main thread: a
   phone busy running the 1MB script bundle showed an empty hero until ~5s even
   though the photograph had arrived at 1.6s (measured; LCP 2.7s without it).
   So the entrance is kept for slide changes only. home-premium.js §7 adds
   .sk-cycled on the carousel's first `slid` event, i.e. after slide 1 has
   stopped being active, so it never replays on the slide that is leaving. */
#index #home-slider.sk-hero-mode:not(.sk-cycled) .carousel-item.active .sk-hero > * {
  animation: none !important;
}