/* ==========================================================================
   Seatown Window & Wash — premium hero
   Self-contained styles (no utility-framework dependency) so the hero can be
   tuned without touching the compiled app stylesheet.
   ========================================================================== */

:root {
  --stw-navy-900: #132736;
  --stw-navy-800: #1a3244;
  --stw-navy-700: #1f3a4f;
  --stw-cream-100: #f4ede0;
  --stw-cream-200: #e8dec9;
  --stw-cream-050: #fbf8f2;
  --stw-gold: #c9b897;
  --stw-gold-soft: #d8c9ab;
  --stw-teal: #1e98a3;
  --stw-teal-light: #5fc3cd;
  --stw-teal-deep: #0f6b78;
}

/* ---------- shell ---------- */

.stw-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--stw-navy-900);
  color: #fff;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

@supports not (min-height: 100svh) {
  .stw-hero { min-height: 100vh; }
}

/* ---------- background video ---------- */

.stw-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--stw-navy-900);
}

/* Fills the hero at any aspect ratio. object-fit: cover crops rather than
   distorts, and applies to the poster frame too, so nothing ever stretches. */
.stw-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  background: var(--stw-navy-900);
}

/* iOS paints a large play glyph over a video it refuses to autoplay
   (Low Power Mode); hide it so only the poster shows through. */
.stw-hero__video::-webkit-media-controls,
.stw-hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* ---------- readability layers ---------- */

/* Cinematic navy grade over the footage. Two stacked layers: a focal pool
   that pushes the darkest point directly behind the headline and buttons, and
   a lighter base wash that holds a legibility floor everywhere else so the
   crew and the house stay readable through it. */
.stw-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* focal pool — centred on the stacked copy, which runs nearly full width here */
    radial-gradient(
      96% 66% at 34% 50%,
      rgba(5, 16, 26, 0.62) 0%,
      rgba(7, 20, 31, 0.44) 38%,
      rgba(8, 22, 34, 0.18) 70%,
      rgba(8, 22, 34, 0) 100%
    ),
    /* base wash — light through the middle, weighted to the nav band and the fold */
    linear-gradient(
      180deg,
      rgba(6, 18, 28, 0.56) 0%,
      rgba(9, 24, 36, 0.34) 22%,
      rgba(9, 24, 36, 0.32) 56%,
      rgba(5, 16, 26, 0.6) 88%,
      rgba(5, 16, 26, 0.7) 100%
    );
}

/* Teal-tinted depth in the lower left + a soft top band for the nav. */
.stw-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 8% 84%, rgba(30, 152, 163, 0.2) 0%, rgba(30, 152, 163, 0) 70%),
    radial-gradient(46% 40% at 88% 16%, rgba(95, 195, 205, 0.11) 0%, rgba(95, 195, 205, 0) 72%),
    linear-gradient(180deg, rgba(9, 22, 33, 0.5) 0%, rgba(9, 22, 33, 0) 26%);
}

/* Fine dotted texture — echoes the sparkle motif used elsewhere on the site. */
.stw-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.26;
  background-image: radial-gradient(rgba(201, 184, 151, 0.22) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* Slow glass glare sweeping across the frame. */
.stw-hero__sheen {
  position: absolute;
  inset: -20% -30%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.07) 47%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.07) 53%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: translate3d(-60%, 0, 0);
  animation: stw-sheen 16s ease-in-out infinite;
}

@keyframes stw-sheen {
  0%,
  62% { transform: translate3d(-60%, 0, 0); }
  100% { transform: translate3d(60%, 0, 0); }
}

/* Blend the hero into the cream section beneath it: a soft shadow that settles
   the footage onto the fold, then the cream hand-off into the next section. */
.stw-hero__fade {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: -1px;
  left: 0;
  height: clamp(96px, 15vh, 200px);
  pointer-events: none;
  background:
    /* cream hand-off (on top, so it wins at the very bottom) */
    linear-gradient(
      180deg,
      rgba(244, 237, 224, 0) 0%,
      rgba(244, 237, 224, 0) 44%,
      rgba(244, 237, 224, 0.42) 70%,
      rgba(244, 237, 224, 0.86) 88%,
      #f4ede0 100%
    ),
    /* bottom shadow */
    linear-gradient(
      180deg,
      rgba(4, 13, 21, 0) 0%,
      rgba(4, 13, 21, 0.3) 40%,
      rgba(4, 13, 21, 0.5) 66%,
      rgba(4, 13, 21, 0.24) 88%,
      rgba(4, 13, 21, 0) 100%
    );
}

/* ---------- floating accents ---------- */

.stw-hero__accents {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.stw-spark {
  position: absolute;
  color: var(--stw-cream-200);
  filter: drop-shadow(0 0 10px rgba(232, 222, 201, 0.45));
  animation: stw-twinkle 7s ease-in-out infinite;
}

.stw-spark svg { display: block; width: 100%; height: 100%; }

.stw-spark--a { top: 17%;   left: 6%;   width: 22px; height: 22px; opacity: 0.5;  animation-delay: 0s; }
.stw-spark--b { top: 30%;   left: 41%;  width: 15px; height: 15px; opacity: 0.42; animation-delay: 1.6s; }
.stw-spark--c { top: 62%;   left: 30%;  width: 12px; height: 12px; opacity: 0.34; animation-delay: 3.1s; }
.stw-spark--d { top: 12%;   right: 27%; width: 26px; height: 26px; opacity: 0.4;  animation-delay: 2.3s; color: var(--stw-gold-soft); }
.stw-spark--e { top: 47%;   right: 9%;  width: 17px; height: 17px; opacity: 0.34; animation-delay: 4.4s; }

@keyframes stw-twinkle {
  0%, 100% { transform: scale(0.82) rotate(0deg);  opacity: 0.16; }
  50%      { transform: scale(1.08) rotate(14deg); opacity: 0.62; }
}

.stw-drop {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.16) 38%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(circle at 62% 74%, rgba(95, 195, 205, 0.34) 0%, rgba(95, 195, 205, 0) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  animation: stw-float 13s ease-in-out infinite;
}

.stw-drop--a { top: 24%; left: 22%; width: 12px; height: 12px; opacity: 0.55; animation-delay: 0s; }
.stw-drop--b { top: 55%; left: 52%; width: 8px;  height: 8px;  opacity: 0.45; animation-delay: 2.8s; }
.stw-drop--c { top: 74%; left: 14%; width: 15px; height: 15px; opacity: 0.4;  animation-delay: 5.2s; }
.stw-drop--d { top: 36%; right: 18%; width: 10px; height: 10px; opacity: 0.4; animation-delay: 1.4s; }
.stw-drop--e { top: 80%; right: 32%; width: 7px;  height: 7px;  opacity: 0.36; animation-delay: 6.6s; }

@keyframes stw-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(4px, -16px, 0); }
}

/* ---------- content ---------- */

.stw-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(6.5rem, 18vw, 9.5rem) 1.5rem clamp(4rem, 12vw, 7rem);
}

.stw-hero__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 42rem;
}

/* logo plate */
.stw-hero__logo {
  display: block;
  width: clamp(112px, 28vw, 150px);
  height: auto;
  padding: 0.55rem 0.7rem;
  border-radius: 16px;
  background: #fbfbfb;
  box-shadow:
    0 18px 40px -22px rgba(6, 18, 27, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* trust badge */
.stw-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.6rem;
  padding: 0.5rem 1.05rem;
  border-radius: 9999px;
  border: 1px solid rgba(201, 184, 151, 0.45);
  background: rgba(19, 39, 54, 0.42);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--stw-cream-100);
  white-space: nowrap;
}

.stw-hero__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--stw-gold);
}

.stw-hero__stars svg { display: block; width: 13px; height: 13px; }

/* Copy variants. The supporting paragraph carries both the full desktop wording
   and the shorter phone wording; the mobile block at the end of this file swaps
   which one shows, so neither breakpoint has to compromise on its own copy
   length. The review badge reads the same at every width, so it needs no
   variants. */
.stw-hero__sub-sm {
  display: none;
}

/* headline */
.stw-hero__rule {
  width: 62px;
  height: 2px;
  margin: 1.5rem 0 1rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--stw-gold) 0%, rgba(201, 184, 151, 0) 100%);
}

.stw-hero__title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.3rem, 7.6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 3px 26px rgba(6, 18, 27, 0.55);
}

/* The headline holds both a desktop and a phone variant. Each variant is a
   wrapper span containing a white first line and a cream second line, so the
   colour rule has to target the inner line specifically - a plain descendant
   selector would tint the wrapper, and with it the first line, as well.

   Both selectors below are (0,1,1). The variant toggles are written as
   `.stw-hero__title > .stw-hero__title-*` (0,2,0) so they outrank them; a bare
   class would lose to these and both variants would render at once. */
.stw-hero__title > span {
  display: block;
}

.stw-hero__title > span > span {
  display: block;
  color: var(--stw-cream-200);
}

.stw-hero__title > .stw-hero__title-sm {
  display: none;
}

.stw-hero__sub {
  margin: 1.4rem 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 2.5vw, 1.16rem);
  line-height: 1.72;
  color: rgba(244, 237, 224, 0.9);
  text-shadow: 0 2px 16px rgba(6, 18, 27, 0.5);
}

/* CTAs */
.stw-hero__cta {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
  margin-top: 1.85rem;
}

.stw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 2rem;
  border-radius: 9999px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease,
    border-color 0.25s ease, color 0.25s ease;
}

.stw-btn svg { display: block; width: 18px; height: 18px; flex: none; }

.stw-btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--stw-cream-050);
  color: var(--stw-navy-900);
  box-shadow:
    0 22px 46px -20px rgba(30, 152, 163, 0.55),
    0 10px 24px -16px rgba(6, 18, 27, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* gold hairline that sweeps on hover — the only gold on the button */
.stw-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, rgba(201, 184, 151, 0) 30%, rgba(201, 184, 151, 0.5) 50%, rgba(201, 184, 151, 0) 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stw-btn--primary > * { position: relative; z-index: 1; }

.stw-btn--primary:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 28px 54px -20px rgba(30, 152, 163, 0.7),
    0 12px 28px -16px rgba(6, 18, 27, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.stw-btn--primary:hover::after { opacity: 1; }

.stw-btn--ghost {
  border: 1px solid rgba(244, 237, 224, 0.42);
  background: rgba(19, 39, 54, 0.34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--stw-cream-100);
}

.stw-btn--ghost svg { color: var(--stw-teal-light); }

.stw-btn--ghost:hover {
  border-color: rgba(95, 195, 205, 0.75);
  background: rgba(30, 152, 163, 0.22);
  transform: translateY(-2px);
}

.stw-btn:focus-visible {
  outline: 2px solid var(--stw-teal-light);
  outline-offset: 3px;
}

/* trust row */
.stw-hero__trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1.25rem;
  width: 100%;
  margin: 1.85rem 0 0;
  padding: 1.05rem 1.15rem;
  list-style: none;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(13, 30, 44, 0.4);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
  box-shadow: 0 24px 50px -34px rgba(0, 0, 0, 0.95);
}

.stw-hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, 0.92);
}

.stw-hero__trust svg {
  display: block;
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--stw-teal-light);
}

/* ---------- tablet and up ---------- */

@media (min-width: 640px) {
  .stw-hero__inner { padding-inline: 2.5rem; }

  .stw-hero__cta {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .stw-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.6rem;
    width: auto;
    padding: 1rem 1.6rem;
  }
}

/* ---------- desktop ---------- */

@media (min-width: 1024px) {
  .stw-hero {
    min-height: 92vh;
  }

  /* Once the copy is confined to the left column, pull the grade off the right
     half of the frame so the crew and the house read clearly there. */
  .stw-hero__scrim {
    background:
      /* focal pool behind the headline and buttons */
      radial-gradient(
        62% 84% at 24% 52%,
        rgba(4, 14, 23, 0.58) 0%,
        rgba(6, 18, 28, 0.4) 42%,
        rgba(8, 22, 34, 0.14) 74%,
        rgba(8, 22, 34, 0) 100%
      ),
      /* left-to-right falloff, holding a light floor across the open side */
      linear-gradient(
        98deg,
        rgba(6, 18, 28, 0.56) 0%,
        rgba(8, 22, 34, 0.44) 26%,
        rgba(10, 26, 39, 0.34) 48%,
        rgba(11, 29, 43, 0.27) 70%,
        rgba(12, 31, 46, 0.24) 100%
      ),
      /* top band for the nav, weight along the bottom edge */
      linear-gradient(
        180deg,
        rgba(5, 16, 26, 0.42) 0%,
        rgba(5, 16, 26, 0.04) 24%,
        rgba(5, 16, 26, 0.06) 60%,
        rgba(4, 14, 23, 0.52) 100%
      );
  }

  .stw-hero__inner {
    padding-top: clamp(8rem, 12vw, 10rem);
    padding-bottom: clamp(6rem, 10vw, 8rem);
  }

  .stw-hero__col { max-width: 40rem; }

  .stw-hero__title { font-size: clamp(3.4rem, 4.6vw, 4.6rem); }
}

/* ---------- mobile hero (<= 768px) ---------- */

/* Breakpoint matches the phone <source> in index.html, so the layout and the
   footage framing switch on exactly the same viewports. Everything here is
   additive and confined to this range: the tablet (>= 640px) and desktop
   (>= 1024px) blocks above are untouched, and because hero.css is only loaded
   by index.html none of it reaches the service pages.

   This block is placed last on purpose. It shares single-class specificity with
   the >= 640px block, so source order is what lets it win across 640-768px.

   Stacking order on a phone is set with flex `order`, not by moving markup, so
   the desktop DOM order - and therefore the desktop layout - is left alone:

     nav (60px)  ->  headline  ->  supporting copy
                 ->  open video area
                 ->  review badge  ->  CTA row  ->  trust grid                 */

@media (max-width: 768px) {
  /* --- top navigation: fixed 60px band --- */

  /* height + zeroed padding-block replace the utility py-6/px-6 on the bar. */
  .stw-nav__bar {
    height: 60px;
    padding: 0 20px;
  }

  .stw-nav__mark {
    font-size: 28px;
    line-height: 1;
  }

  /* The spec's mobile nav is exactly two items: wordmark and Explore. The
     inline link row and the phone pill would otherwise reappear from 640px up
     and land on top of the Explore button. */
  .stw-nav__links,
  .stw-nav__pill {
    display: none;
  }

  /* Explore launcher (injected by service-menu.js) centred in the 60px band:
     (60 - 42) / 2 = 9px. Overridden here rather than in service-menu.css so the
     five service pages keep the sizing they already have. */
  .sw-menu-fab {
    top: 9px;
    right: 20px;
    width: 120px;
    height: 42px;
    padding: 0 14px;
    justify-content: center;
    gap: 6px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }

  .sw-menu-fab .sw-fab-spark {
    width: 15px;
    height: 15px;
  }

  /* --- background --- */

  /* The video itself is untouched: same source, same cover crop, same centring,
     no blur. Readability comes from one bottom-to-top ramp that carries its
     weight under the conversion block and fades out through the middle of the
     frame, so the open area reads as footage rather than as tinted footage. */
  .stw-hero__scrim {
    background: linear-gradient(
      to top,
      rgba(4, 13, 21, 0.92) 0%,
      rgba(5, 16, 26, 0.84) 18%,
      rgba(6, 18, 28, 0.58) 34%,
      rgba(7, 20, 31, 0.26) 48%,
      rgba(8, 22, 34, 0.1) 60%,
      rgba(8, 22, 34, 0.16) 82%,
      rgba(6, 18, 28, 0.4) 100%
    );
  }

  /* The teal glow, dot texture, glare sweep and sparkle/droplet field all come
     off. Hidden rather than removed from the markup so desktop keeps them. */
  .stw-hero__glow,
  .stw-hero__grain,
  .stw-hero__sheen,
  .stw-hero__accents {
    display: none;
  }

  /* --- layout --- */

  /* Stretch the column to the full hero height so the auto margin below has
     room to work with. */
  .stw-hero {
    align-items: stretch;
  }

  .stw-hero__inner {
    display: flex;
    max-width: none;
    /* top clears the 60px nav band and leaves the headline sitting just under
       it; bottom keeps the trust row clear of the cream hand-off in
       .stw-hero__fade */
    padding: 76px 20px 72px;
  }

  .stw-hero__col {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  /* the white logo plate duplicates the nav wordmark on a phone */
  .stw-hero__logo {
    display: none;
  }

  /* Reordered rather than re-nested; see the note at the top of this block. */
  .stw-hero__title { order: 1; }
  .stw-hero__sub   { order: 2; }
  .stw-hero__badge { order: 3; }
  .stw-hero__cta   { order: 4; }
  .stw-hero__trust { order: 5; }

  /* --- headline, directly under the nav --- */

  .stw-hero__rule {
    display: none;
  }

  .stw-hero__title > .stw-hero__title-lg {
    display: none;
  }

  .stw-hero__title > .stw-hero__title-sm {
    display: block;
  }

  .stw-hero__title {
    max-width: 350px;
    margin: 0 0 10px;
    font-size: 38px;
    line-height: 0.98;
    letter-spacing: -1px;
  }

  /* --- supporting copy --- */

  .stw-hero__sub-lg {
    display: none;
  }

  .stw-hero__sub-sm {
    display: inline;
  }

  .stw-hero__sub {
    max-width: 300px;
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
  }

  /* --- review badge, first item of the bottom cluster --- */

  /* This auto margin is what opens the middle of the hero: it absorbs all the
     free vertical space, pinning the badge, CTA row and trust grid to the
     bottom while the headline and supporting copy stay under the nav. */
  .stw-hero__badge {
    margin-top: auto;
    margin-bottom: 12px;
    height: 34px;
    padding: 0 14px;
    gap: 6px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .stw-hero__stars svg {
    width: 11px;
    height: 11px;
  }

  /* --- CTA row: two equal buttons --- */

  .stw-hero__cta {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: none;
    margin-top: 0;
  }

  /* flex-basis 0 with equal grow is what makes the split 50/50 regardless of
     the two labels' natural widths; min-width 0 lets them actually shrink. */
  .stw-hero__cta .stw-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    padding: 0 10px;
    gap: 6px;
    font-size: 13px;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .stw-hero__cta .stw-btn svg {
    width: 15px;
    height: 15px;
  }

  /* --- trust indicators: bare 2 x 2 grid, no card --- */

  .stw-hero__trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    width: 100%;
    max-width: 340px;
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .stw-hero__trust li {
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .stw-hero__trust svg {
    width: 12px;
    height: 12px;
  }
}

/* ---------- motion / contrast preferences ---------- */

/* Narrow phones (<=389px: SE-class 320px and the 360px Android tier).
   The mobile hero above is sized for a 390px viewport; below that the two
   fixed-width CTA labels run past the 20px gutters. This block only trims their
   type and padding to make them fit - the layout, order and proportions are the
   same as the block above. The review pill is short enough to clear the gutters
   unaided, so it keeps its 12px size at every phone width. */
@media (max-width: 389px) {
  .stw-hero__cta .stw-btn {
    padding: 0 6px;
    gap: 4px;
    font-size: 11px;
    letter-spacing: 0;
  }

  .stw-hero__cta .stw-btn svg {
    width: 13px;
    height: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stw-hero__sheen,
  .stw-spark,
  .stw-drop {
    animation: none !important;
  }
  .stw-hero__sheen { display: none; }
  .stw-spark { opacity: 0.35; }
}