/** Shopify CDN: Minification failed

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

**/
/* Home: Hero (BEM: .home-hero) — Figma: Component 8, 1440x840

   Desktop composition, measured from Figma:
     - the photo is the backmost layer: a 593x831 box at Left 470, Top 91
     - "Frame 1" is a 781x840 frosted panel over its left portion
       (fill #999898 @ 20%, CSS backdrop blur 39.2 = Figma blur 78.4)
     - "Frame 2" is the content stack: 626 wide, Left 80, Top 270, gap 32
       (270 top + 300 content + 270 bottom => vertically centred)
     - "big Logo" is a 840x200 wordmark rotated -90deg at Left 1227, Top 0,
       opacity 14% => a 200px vertical band flush to the right edge

   Mobile — Figma "Home Mob" Component 10, 375x770 (the 65px nav bar sits on
   top of it; here the pink header bar is in flow, so the hero is 770 - 65):
     - "Frame 2": 326 fixed, Top 87, Left 24, gap 32, centred copy;
       heading 42/50, button fills the 326 width
     - photo 375x523 at Top 355, cropped by the section's bottom edge
     - The Figma "reveal me" frosted band / click-to-reveal was removed at
       the client's request: the photos are always visible and cross-fade
       on their own (section-home-hero.js)
     - "big Logo" sits behind the photo, so it never shows */

.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--home-hero-bg, var(--home-color-primary));
  overflow: hidden;
}

/* Mobile: copy first, photo below (Figma "Home Mob") */
.home-hero__content {
  position: relative;
  z-index: 2;
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 22px 25px 0 24px; /* Top 87 / Left 24 / 326 wide, below the 65px header bar */
  color: var(--home-color-white);
  text-align: center;
}

.home-hero__content .home-heading {
  width: 100%;
  font-size: 34px;
  line-height: 1.1905;
  text-align: center;
}

.home-hero__text {
  width: 100%;
  color: var(--home-color-white);
}

.home-hero__content .home-btn {
  width: 100%;
}

.home-hero__media {
  position: relative;
  order: 2;
  width: 100%;
  height: 415px; /* 770 - 355: the photo is cut by the section edge */
  margin-top: 23px; /* 355 - (87 + 245) */
  overflow: hidden;
}

.home-hero__image,
.home-hero__image.placeholder-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 470px;
}

/* Slideshow (section-home-hero.js): the photos are stacked and
   cross-dissolve over 900ms. */
.home-hero__photo {
  position: absolute;
  inset: 0;
}

.home-hero__slide {
  opacity: 0;
  object-position: top center; /* taller photos crop at the feet, not the head */
  transition: opacity 900ms cubic-bezier(0.45, 0, 0.55, 1);
}

.home-hero__slide.is-active {
  opacity: 1;
}

/* Per-photo placement, matched pixel for pixel to the Figma prototype frames
   at 1440: each photo is bottom-aligned (dy lowers it) with its own height,
   and its centre sits dx from image 1's. Unitless desktop px, scaled by
   --home-hero-slide-u per layout. */
.home-hero__slide:nth-child(1) { --home-hero-slide-h: 749; --home-hero-slide-dx: 0;   --home-hero-slide-dy: 0; }
.home-hero__slide:nth-child(2) { --home-hero-slide-h: 748; --home-hero-slide-dx: -38; --home-hero-slide-dy: -2; }
.home-hero__slide:nth-child(3) { --home-hero-slide-h: 758; --home-hero-slide-dx: -30; --home-hero-slide-dy: 10; }
.home-hero__slide:nth-child(4) { --home-hero-slide-h: 769; --home-hero-slide-dx: -82; --home-hero-slide-dy: 0; }

/* Mobile/tablet, matched to the Figma "Home Mob" prototype's revealed
   frame: the photo sits 0.884x smaller about the top centre of its box,
   each photo nudged by its own offset (mobile px at 375, pre-scale). */
@media screen and (max-width: 989px) {
  .home-hero__slide {
    --home-hero-slide-mu: calc(var(--home-hero-slide-u) * 593 / 375);
  }

  .home-hero__slide:nth-child(1) { --home-hero-slide-mx: -2.7; --home-hero-slide-my: -32.6; }
  .home-hero__slide:nth-child(2) { --home-hero-slide-mx: 23.5; --home-hero-slide-my: -7.2; }
  .home-hero__slide:nth-child(3) { --home-hero-slide-mx: 5.4;  --home-hero-slide-my: -16.3; }
  .home-hero__slide:nth-child(4) { --home-hero-slide-mx: 50.6; --home-hero-slide-my: -7.2; }

  .home-hero .home-hero__slide {
    translate: calc(var(--home-hero-slide-mx, 0) * var(--home-hero-slide-mu)) calc(var(--home-hero-slide-my, 0) * var(--home-hero-slide-mu));
  }

  /* The photos rise above the box into the 23px gap under the
     button (Figma keeps the hair there), so clip only the sides and bottom:
     overflow: hidden would cut the heads off flat at the box's top edge. */
  .home-hero__media {
    overflow: visible;
    clip-path: inset(-100px 0 0 0);
  }

  .home-hero__photo {
    z-index: 1;
    transform-origin: 50% 0;
    transform: scale(0.884);
  }

  /* Figma shows the logo as a faint horizontal outline along the
     bottom edge, behind the photo (840x200 artwork laid on its side). */
  .home-hero .home-hero__wordmark {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    height: calc(100vw * 200 / 840);
    font-size: calc(100vw * 200 / 840);
    line-height: 1;
    text-align: center;
  }

  .home-hero .home-hero__wordmark--image .home-hero__wordmark-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100vw * 200 / 840);
    height: 100vw;
    max-width: none;
    max-height: none;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
}

@media screen and (min-width: 768px) {
  .home-hero__image {
    width: 593px;
    left: 50%;
    transform: translateX(-40%);
    object-fit: contain;
    height: auto;
    display: block;
    bottom: 0;
  }
}

/* Mobile/tablet sequence photos keep the desktop proportions between them,
   scaled so image 1 renders exactly as before: full width on phones
   (593 desktop px -> 100vw), natural desktop size on tablets. */
@media screen and (max-width: 989px) {
  .home-hero__slide {
    --home-hero-slide-u: calc(100vw / 593);
    --home-hero-slide-c: 0px;
    top: calc((749 - var(--home-hero-slide-h, 749)) * var(--home-hero-slide-u));
    bottom: auto;
    left: calc(50% + var(--home-hero-slide-c) + var(--home-hero-slide-dx, 0) * var(--home-hero-slide-u));
    width: auto;
    height: calc(var(--home-hero-slide-h, 749) * var(--home-hero-slide-u));
    transform: translateX(-50%);
    object-fit: contain;
  }
}

@media screen and (min-width: 768px) and (max-width: 989px) {
  .home-hero__slide {
    --home-hero-slide-u: 1px;
    --home-hero-slide-c: 59.3px; /* the old translateX(-40%) centre */
  }
}

/* Phones: the photos are cutouts whose files end in a flat edge at the
   bottom. Figma's artwork runs further down, so it is cropped by
   the section edge; ours would stop short and show a straight cut. Each
   photo grows by its own factor about its top centre (the head stays where
   Figma has it) so at 375 its bottom passes the 415px box by 2px, and on
   narrower phones it is lowered just enough to do the same. The 0.884 is
   the shared .home-hero__photo scale the offsets sit inside. */
@media screen and (max-width: 767px) {
  .home-hero__slide:nth-child(1) { --home-hero-slide-k: 1.065; }
  .home-hero__slide:nth-child(2) { --home-hero-slide-k: 1.012; }
  .home-hero__slide:nth-child(3) { --home-hero-slide-k: 1.03; }
  .home-hero__slide:nth-child(4) { --home-hero-slide-k: 1.011; }

  .home-hero__slide {
    transform-origin: 0 0; /* with translateX(-50%): scales about the top centre */
  }

  .home-hero .home-hero__slide {
    scale: var(--home-hero-slide-k, 1);
    translate:
      calc(var(--home-hero-slide-mx, 0) * var(--home-hero-slide-mu))
      max(
        calc(var(--home-hero-slide-my, 0) * var(--home-hero-slide-mu)),
        calc(417px / 0.884 - (749 - var(--home-hero-slide-h, 749) + var(--home-hero-slide-k, 1) * var(--home-hero-slide-h, 749)) * var(--home-hero-slide-u))
      );
  }
}

/* The giant wordmark: the right-edge band on desktop, a horizontal outline
   behind the photo on mobile (see the mobile block above). */
.home-hero__wordmark {
  display: none;
  font-family: var(--home-font-heading);
  font-weight: 700;
  color: var(--home-color-white, #fff);
  opacity: var(--home-hero-wordmark-opacity, 0.14);
  white-space: nowrap;
  pointer-events: none;
}

.home-hero__wordmark-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media screen and (min-width: 990px) {
  .home-hero {
    display: block;
    min-height: 840px;
  }

  /* Photo: backmost, full bleed across the whole section. */
  .home-hero__media {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
  }

  .home-hero__image.placeholder-svg {
    height: 100%;
  }

  /* Figma photo box: 593x831 at Left 470 / Top 91, so its last 82px run off
     the section bottom. Centred at 766.5 / 1440 to track the full-bleed hero.
     The photo rests at the prototype's revealed frame, 235px right of
     Left 470, clear of the frosted panel. */
  .home-hero__image {
    bottom: 0;
    left: 50%;
    transform: translateX(calc(-41% + 235px));
    width: 593px;
    height: auto;
    object-fit: contain;
    object-position: top;
    top: auto;
  }

  /* Sequence photos: each prototype frame places its photo individually.
     Measured from the recording at 1440 — every photo is bottom-aligned to
     the section edge and starts at the frosted panel's edge (Left 781), with
     its own height; width follows the photo's aspect ratio. Anchored to the
     panel edge (54.2361%) so they keep clear of the glass at any width:
     image 1's centre is 781 - 1 + 296.5 = panel edge + 295.5px. */
  .home-hero__slide {
    top: auto;
    bottom: calc(var(--home-hero-slide-dy, 0) * -1px);
    left: calc(54.2361% + 295.5px + var(--home-hero-slide-dx, 0) * 1px);
    width: auto;
    height: calc(var(--home-hero-slide-h, 749) * 1px);
    transform: translateX(-50%);
  }

  /* Frosted panel over the left 781px — Figma "Frame 1". */
  .home-hero__content {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 54.2361%; /* 781 / 1440 */
    min-width: 0;
    min-height: 840px;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    padding: 0 0 0 80px;
    text-align: left;
    background-color: rgba(153, 152, 152, 0.2);
    backdrop-filter: blur(39.2px);
    -webkit-backdrop-filter: blur(39.2px);
  }

  /* Figma "Frame 2" is 626 wide; the heading text box is 646 and is allowed
     to overrun it (80 + 646 = 726, still inside the 781 panel). Up to 1440
     the heading and copy scale with the panel; from 1441 they are fixed at
     646 / 480 (see the block below). */
  .home-hero__content .home-heading {
    width: 93.165%;
    max-width: 100%;
    font-size: 64px;
    line-height: 1.0556; /* hero instance overrides the 103px "H1 80" style */
    text-align: left;
  }

  .home-hero__text {
    width: 69.224%;
    max-width: none;
  }

  .home-hero__content .home-btn {
    width: auto;
  }

  /* Figma "big Logo": an 840x200 wordmark rotated -90deg, flush to the right
     edge and spanning the full section height, at 14% opacity. Rotating about
     the centre and pulling it right by (840-200)/2 lands the rotated box on
     the last 200px of the section. It sits behind the photo. */
  .home-hero__wordmark {
    position: absolute;
    right: -320px;
    top: 50%;
    z-index: 0;
    width: 840px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 200px;
    line-height: 1;
    transform: translateY(-50%) rotate(-90deg);
  }

  /* Uploaded logo image: rotated like the text by default; with rotation
     off, an already-vertical image fills the same 200px right-edge band. */
  .home-hero__wordmark--image {
    box-sizing: border-box;
  }

  .home-hero__wordmark--image:not(.home-hero__wordmark--rotated) {
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    transform: none;
  }

  /* Above the logo, still below the frosted content panel (z-index 2). */
  .home-hero__photo {
    z-index: 1;
  }

@media screen and (min-width: 1441px) {
  .home-hero__content .home-heading {
    width: 646px;
  }

  .home-hero__text {
    width: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__slide {
    transition-duration: 0s;
  }
}