/* Singapore Towel Supplier — child theme styles
   Build marker: STS-BUILD-014
   ALL rules are scoped under .sts */

/* ==========================================================================
   SINGAPORE TOWEL SUPPLIER — homepage
   ALL styles scoped under .sts   |   Build marker: STS-BUILD-004
   MOBILE FIRST. Base = phone. Wider layouts added with min-width only.
   Breakpoints: 600 / 900 / 1200
   ========================================================================== */

.sts *,
.sts *::before,
.sts *::after { box-sizing: border-box; }

body { margin: 0; }

.sts {
  --sts-navy:      #0a1f3c;
  --sts-navy-2:    #12305e;
  --sts-navy-3:    #081831;
  --sts-gold:      #d8a961;
  --sts-gold-dk:   #b98d47;
  --sts-peri:      #7382bc;
  --sts-cream:     #eee8e3;
  --sts-cream-2:   #f6f3f0;
  --sts-white:     #ffffff;
  --sts-ink:       #16233a;
  --sts-muted:     #5c6880;
  --sts-line:      rgba(10,31,60,.10);

  --sts-max:       1240px;
  --sts-pad:       20px;
  --sts-sec:       64px;

  --sts-ease:      cubic-bezier(.22,.61,.36,1);
  --sts-ease-out:  cubic-bezier(.16,1,.3,1);

  margin: 0;
  padding: 0;
  background: var(--sts-cream-2);
  color: var(--sts-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sts img { max-width: 100%; display: block; }
.sts a { color: inherit; }

.sts .sts-wrap {
  width: 100%;
  max-width: var(--sts-max);
  margin: 0 auto;
  padding-left: var(--sts-pad);
  padding-right: var(--sts-pad);
}

/* ---------- Type ---------- */
.sts h1, .sts h2, .sts h3, .sts h4 {
  font-family: 'Montserrat', sans-serif;
  color: var(--sts-navy);
  margin: 0;
  line-height: 1.14;
  letter-spacing: -0.018em;
}
.sts h1 { font-size: clamp(2.05rem, 1.35rem + 3.4vw, 4.1rem); font-weight: 800; }
.sts h2 { font-size: clamp(1.65rem, 1.25rem + 1.9vw, 2.65rem); font-weight: 700; }
.sts h3 { font-size: clamp(1.12rem, 1.03rem + 0.45vw, 1.35rem); font-weight: 700; }
.sts h4 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }

.sts .sts-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sts-gold-dk);
  margin: 0 0 12px;
}
.sts .sts-section--navy .sts-eyebrow,
.sts .sts-hero .sts-eyebrow { color: var(--sts-gold); }

.sts .sts-lede {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.16rem);
  color: var(--sts-muted);
  margin: 14px 0 0;
}
.sts .sts-section--navy .sts-lede { color: rgba(255,255,255,.74); }

/* ==========================================================================
   ICON SYSTEM
   Inline SVG, stroke-based, 1.6 weight. Gold stroke on a navy disc.
   Every icon animates on hover of its parent card via .sts-ico.
   ========================================================================== */
.sts .sts-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  background: var(--sts-navy);
  color: var(--sts-gold);
  transition: background-color .45s var(--sts-ease), transform .45s var(--sts-ease);
}
.sts .sts-ico svg { width: 26px; height: 26px; display: block; overflow: visible; }
.sts .sts-ico svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* The gold ring that draws itself on hover */
.sts .sts-ico::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--sts-gold);
  opacity: 0;
  transform: scale(.82);
  transition: opacity .45s var(--sts-ease), transform .45s var(--sts-ease-out);
}

.sts .sts-ico--light { background: rgba(255,255,255,.08); }

/* Per-icon motion, keyed to what the icon depicts */
.sts .sts-ico [data-spin]   { transform-origin: center; transition: transform .8s var(--sts-ease); }
.sts .sts-ico [data-drop]   { transition: transform .55s var(--sts-ease), opacity .55s var(--sts-ease); }
.sts .sts-ico [data-lift]   { transition: transform .5s var(--sts-ease-out); }
.sts .sts-ico [data-draw]   {
  stroke-dasharray: 42;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .7s var(--sts-ease);
}

/* ==========================================================================
   SIGNATURE: the dobby band
   ========================================================================== */
.sts .sts-band {
  display: block;
  width: 64px;
  height: 11px;
  margin: 0 0 18px;
  background-image:
    linear-gradient(var(--sts-gold), var(--sts-gold)),
    linear-gradient(var(--sts-gold), var(--sts-gold)),
    linear-gradient(var(--sts-gold), var(--sts-gold));
  background-repeat: no-repeat;
  background-size: 100% 3px, 68% 2px, 100% 2px;
  background-position: 0 0, 0 5px, 0 9px;
  transition: background-size 1.1s var(--sts-ease-out) .15s;
}
/* Only start collapsed when JS is confirmed to be running. */
.sts-js .sts .sts-band { background-size: 0 3px, 0 2px, 0 2px; }
.sts .sts-band--center { margin-left: auto; margin-right: auto; }
/* The band weaves itself in when its section scrolls into view */
.sts-js .sts .is-in .sts-band,
.sts-js .sts .sts-band.is-in { background-size: 100% 3px, 68% 2px, 100% 2px; }

/* ==========================================================================
   SECTION DIVIDERS
   One motif, reused: a shallow asymmetric bevel — the diagonal of a folded
   towel corner — with the gold dobby thread running along the fold line.
   The shape is drawn in the colour of the section BELOW it and pulled up over
   the section above, so each divider is a single element with no seams.
   Angle is shallow (about 2.2 degrees) so it reads as a considered cut rather
   than a decorative zigzag.
   ========================================================================== */
.sts .sts-divider {
  position: relative;
  display: block;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}
.sts .sts-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}
.sts .sts-divider svg .sts-divider__fill { stroke: none; }
/* The gold thread that traces the fold */
.sts .sts-divider svg .sts-divider__thread {
  fill: none;
  stroke: var(--sts-gold);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.sts .sts-divider svg .sts-divider__thread--thin {
  stroke-width: 1;
  opacity: .5;
}

/* Fill variants — always the colour of the section BELOW */
.sts .sts-divider--to-cream  .sts-divider__fill { fill: var(--sts-cream-2); }
.sts .sts-divider--to-white  .sts-divider__fill { fill: var(--sts-white); }
.sts .sts-divider--to-navy   .sts-divider__fill { fill: var(--sts-navy); }
.sts .sts-divider--to-peri   .sts-divider__fill { fill: var(--sts-peri); }

/* Background variants — the colour of the section ABOVE. The bevel's upper
   half is transparent, so without this it shows the page background instead
   of the preceding section and you get a visible band. */
.sts .sts-divider--from-cream { background: var(--sts-cream-2); }
.sts .sts-divider--from-white { background: var(--sts-white); }
.sts .sts-divider--from-navy  { background: var(--sts-navy); }
.sts .sts-divider--from-navy2 { background: var(--sts-navy-2); }
.sts .sts-divider--from-peri  { background: var(--sts-peri); }

/* Mirrored variant so consecutive dividers alternate direction instead of
   marching the same way down the page */
.sts .sts-divider--flip svg { transform: scaleX(-1); }

@media (min-width: 600px) { .sts .sts-divider { height: 62px; } }
@media (min-width: 900px) { .sts .sts-divider { height: 84px; } }

/* A divider already contributes 46–84px of vertical space, so a section that
   directly follows one needs less padding of its own — otherwise the page
   grows a dead gap at every seam. */
/* Each shortcode emits its divider then its section INSIDE the same wrapper,
   so they are siblings and `+` still applies. But when a divider ends one
   wrapper and the section starts the next, adjacency breaks — hence the
   wrapper-level rule too. Without this the page grows a dead gap at each seam.
   The `.sts-content` form matches the WordPress structure; the plain form
   matches the standalone HTML preview. */
.sts .sts-divider + .sts-section,
.sts .sts-divider + .sts-cta,
.sts-content > .sts-divider + .sts-section,
.sts-content > .sts-divider + .sts-cta { padding-top: calc(var(--sts-sec) * 0.55); }
.sts .sts-divider + .sts-footer,
.sts-content > .sts-divider + .sts-footer { padding-top: calc(var(--sts-sec) * 0.5); }

.sts .sts-seam {
  height: 6px;
  background-image: repeating-linear-gradient(90deg, var(--sts-gold) 0 18px, rgba(216,169,97,.32) 18px 30px);
}

/* ==========================================================================
   BUTTONS — with a sweeping fill on hover
   ========================================================================== */
.sts .sts-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  width: 100%;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 2px;
  border: 2px solid transparent;
  cursor: pointer;
  z-index: 0;
  transition: color .35s var(--sts-ease), border-color .35s var(--sts-ease), transform .35s var(--sts-ease), box-shadow .35s var(--sts-ease);
}
.sts .sts-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform .45s var(--sts-ease-out);
}
.sts .sts-btn__arrow { transition: transform .35s var(--sts-ease); }
.sts .sts-btn:hover .sts-btn__arrow { transform: translateX(5px); }
.sts .sts-btn + .sts-btn { margin-top: 12px; }

.sts .sts-btn--gold { background: var(--sts-gold); color: var(--sts-navy); border-color: var(--sts-gold); }
.sts .sts-btn--gold::before { background: var(--sts-navy); }
.sts .sts-btn--gold:hover { color: var(--sts-gold); border-color: var(--sts-navy); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(10,31,60,.24); }
.sts .sts-btn--gold:hover::before { transform: translateY(0); }

.sts .sts-btn--ghost { color: var(--sts-white); border-color: rgba(255,255,255,.42); }
.sts .sts-btn--ghost::before { background: var(--sts-white); }
.sts .sts-btn--ghost:hover { color: var(--sts-navy); border-color: var(--sts-white); transform: translateY(-2px); }
.sts .sts-btn--ghost:hover::before { transform: translateY(0); }

.sts .sts-btn--navy { background: var(--sts-navy); color: var(--sts-white); border-color: var(--sts-navy); }
.sts .sts-btn--navy::before { background: var(--sts-gold); }
.sts .sts-btn--navy:hover { color: var(--sts-navy); border-color: var(--sts-gold); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(10,31,60,.28); }
.sts .sts-btn--navy:hover::before { transform: translateY(0); }

.sts .sts-btn:focus-visible { outline: 3px solid var(--sts-peri); outline-offset: 3px; }

@media (min-width: 600px) {
  .sts .sts-btn { width: auto; }
  .sts .sts-btn + .sts-btn { margin-top: 0; margin-left: 12px; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.sts .sts-topbar { display: none; }

.sts .sts-header {
  background: var(--sts-white);
  border-bottom: 1px solid var(--sts-line);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow .4s var(--sts-ease), padding .4s var(--sts-ease);
}
.sts .sts-header.is-stuck { box-shadow: 0 8px 26px rgba(10,31,60,.10); }
.sts .sts-header .sts-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.sts .sts-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.sts .sts-logo__mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  background: var(--sts-navy);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  transition: transform .5s var(--sts-ease-out);
}
.sts .sts-logo__mark::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 50%;
  transform: translateY(-50%);
  height: 11px;
  background-image:
    linear-gradient(var(--sts-gold), var(--sts-gold)),
    linear-gradient(var(--sts-gold), var(--sts-gold)),
    linear-gradient(var(--sts-gold), var(--sts-gold));
  background-repeat: no-repeat;
  background-size: 100% 3px, 68% 2px, 100% 2px;
  background-position: 0 0, 0 5px, 0 9px;
}
/* Light sweeps across the mark on hover */
.sts .sts-logo__mark::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--sts-ease);
}
.sts .sts-logo:hover .sts-logo__mark::before { left: 120%; }

.sts .sts-logo__text { font-family: 'Montserrat', sans-serif; line-height: 1.1; }
.sts .sts-logo__name { display: block; font-size: 0.88rem; font-weight: 800; letter-spacing: 0.015em; text-transform: uppercase; color: var(--sts-navy); }
.sts .sts-logo__sub { display: block; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sts-gold-dk); margin-top: 3px; }

.sts .sts-nav-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px;
  background: var(--sts-navy);
  color: var(--sts-white);
  border: 0; border-radius: 3px;
  padding: 0 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
}
.sts .sts-nav-toggle__bars {
  display: block; width: 16px; height: 9px;
  background-image:
    linear-gradient(var(--sts-gold), var(--sts-gold)),
    linear-gradient(var(--sts-gold), var(--sts-gold)),
    linear-gradient(var(--sts-gold), var(--sts-gold));
  background-repeat: no-repeat;
  background-size: 100% 2px, 68% 2px, 100% 2px;
  background-position: 0 0, 0 4px, 0 8px;
  transition: background-size .35s var(--sts-ease);
}
.sts .sts-nav-toggle[aria-expanded="true"] .sts-nav-toggle__bars { background-size: 68% 2px, 100% 2px, 68% 2px; }
.sts .sts-nav-toggle:focus-visible { outline: 3px solid var(--sts-peri); outline-offset: 2px; }

.sts .sts-nav {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--sts-white);
  border-top: 1px solid var(--sts-line);
  box-shadow: 0 18px 34px rgba(10,31,60,.14);
}
.sts .sts-nav.is-open { display: block; }
.sts .sts-nav ul { list-style: none; margin: 0; padding: 4px 20px 18px; }
.sts .sts-nav li { border-bottom: 1px solid var(--sts-line); opacity: 0; transform: translateX(-10px); }
.sts .sts-nav.is-open li { animation: sts-navin .45s var(--sts-ease-out) forwards; }
.sts .sts-nav.is-open li:nth-child(1) { animation-delay: .04s; }
.sts .sts-nav.is-open li:nth-child(2) { animation-delay: .09s; }
.sts .sts-nav.is-open li:nth-child(3) { animation-delay: .14s; }
.sts .sts-nav.is-open li:nth-child(4) { animation-delay: .19s; }
.sts .sts-nav.is-open li:nth-child(5) { animation-delay: .24s; }
.sts .sts-nav li:last-child { border-bottom: 0; }
.sts .sts-nav a {
  display: block; padding: 15px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem; font-weight: 600;
  text-decoration: none; color: var(--sts-navy);
}
.sts .sts-nav a.is-current { color: var(--sts-gold-dk); }
.sts .sts-nav__cta { padding: 0 20px 20px; }

@keyframes sts-navin { to { opacity: 1; transform: none; } }

@media (min-width: 900px) {
  .sts .sts-topbar { display: block; background: var(--sts-navy); color: rgba(255,255,255,.8); font-size: 0.83rem; }
  .sts .sts-topbar .sts-wrap { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding-top: 9px; padding-bottom: 9px; }
  .sts .sts-topbar__right { display: flex; gap: 26px; }
  .sts .sts-topbar a { text-decoration: none; transition: color .25s var(--sts-ease); }
  .sts .sts-topbar a:hover { color: var(--sts-gold); }
  .sts .sts-topbar strong { color: var(--sts-gold); font-weight: 600; }
  .sts .sts-topbar__item { display: inline-flex; align-items: center; gap: 8px; }
  .sts .sts-topbar__item svg {
    width: 15px; height: 15px; flex: 0 0 15px;
    color: var(--sts-gold);
    overflow: visible;
    transition: transform .4s var(--sts-ease-out);
  }
  .sts .sts-topbar__item svg * {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .sts .sts-topbar__item:hover svg { transform: translateY(-2px); }

  .sts .sts-header .sts-wrap { padding-top: 16px; padding-bottom: 16px; }
  .sts .sts-logo__mark { width: 46px; height: 46px; flex-basis: 46px; }
  .sts .sts-logo__name { font-size: 1rem; }
  .sts .sts-logo__sub { font-size: 0.6rem; }

  .sts .sts-nav-toggle { display: none; }
  .sts .sts-nav {
    display: flex; align-items: center; gap: 26px;
    position: static; background: none; border: 0; box-shadow: none;
  }
  .sts .sts-nav ul { display: flex; align-items: center; gap: 26px; padding: 0; }
  .sts .sts-nav li { border-bottom: 0; opacity: 1; transform: none; animation: none; }
  .sts .sts-nav a {
    position: relative;
    padding: 5px 0;
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    transition: color .25s var(--sts-ease);
  }
  /* Underline wipes in from the left */
  .sts .sts-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--sts-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--sts-ease-out);
  }
  .sts .sts-nav a:hover { color: var(--sts-gold-dk); }
  .sts .sts-nav a:hover::after,
  .sts .sts-nav a.is-current::after { transform: scaleX(1); }
  .sts .sts-nav a.is-current { color: var(--sts-gold-dk); }
  .sts .sts-nav__cta { padding: 0; }
  .sts .sts-nav__cta .sts-btn { min-height: 46px; padding: 12px 22px; font-size: 0.74rem; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.sts .sts-hero { background: var(--sts-navy); color: var(--sts-white); position: relative; }

.sts .sts-hero__media { position: relative; overflow: hidden; }
.sts .sts-hero__media img {
  width: 100%;
  height: 58vw;
  max-height: 380px;
  object-fit: cover;
  transform: scale(1.08);
  animation: sts-heroin 1.8s var(--sts-ease-out) forwards;
}
@keyframes sts-heroin { to { transform: scale(1); } }
.sts .sts-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,31,60,.18) 0%, rgba(10,31,60,.72) 78%, var(--sts-navy) 100%);
}

.sts .sts-hero__body { position: relative; padding-top: 34px; padding-bottom: 48px; }
.sts .sts-hero h1 { color: var(--sts-white); margin-bottom: 16px; }
.sts .sts-hero__kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--sts-gold);
  margin: 0 0 16px;
}
.sts .sts-hero__lede { font-size: clamp(1rem, 0.95rem + 0.45vw, 1.22rem); color: rgba(255,255,255,.85); margin: 0 0 28px; font-weight: 300; }
.sts .sts-hero__actions { display: flex; flex-direction: column; }

/* Staged entrance on page load */
.sts .sts-stage { opacity: 0; transform: translateY(22px); animation: sts-stagein .9s var(--sts-ease-out) forwards; }
.sts .sts-stage--1 { animation-delay: .15s; }
.sts .sts-stage--2 { animation-delay: .28s; }
.sts .sts-stage--3 { animation-delay: .41s; }
.sts .sts-stage--4 { animation-delay: .54s; }
@keyframes sts-stagein { to { opacity: 1; transform: none; } }

@media (min-width: 600px) { .sts .sts-hero__actions { flex-direction: row; flex-wrap: wrap; } }

@media (min-width: 900px) {
  .sts .sts-hero { overflow: hidden; }
  .sts .sts-hero__media { position: absolute; inset: 0; }
  .sts .sts-hero__media img { height: 100%; max-height: none; }
  .sts .sts-hero__media::after { background: linear-gradient(100deg, rgba(10,31,60,.96) 0%, rgba(10,31,60,.9) 44%, rgba(10,31,60,.28) 100%); }
  .sts .sts-hero__body { padding-top: 110px; padding-bottom: 110px; }
  .sts .sts-hero__inner { max-width: 640px; }
  .sts .sts-hero__lede { max-width: 540px; margin-bottom: 34px; }
}
@media (min-width: 1200px) { .sts .sts-hero__body { padding-top: 136px; padding-bottom: 136px; } }

/* ---------- Facts strip with icons ---------- */
.sts .sts-facts { background: var(--sts-navy-2); position: relative; }
.sts .sts-facts .sts-wrap { padding-top: 4px; padding-bottom: 4px; }
.sts .sts-facts__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.13);
}
.sts .sts-facts__item:first-child { border-top: 0; }
.sts .sts-facts__label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--sts-gold);
  margin-bottom: 4px;
}
.sts .sts-facts__value { display: block; color: rgba(255,255,255,.9); font-size: 0.93rem; line-height: 1.5; }

@media (hover: hover) {
  .sts .sts-facts__item:hover .sts-ico { background: var(--sts-gold); color: var(--sts-navy); transform: translateY(-3px); }
  .sts .sts-facts__item:hover .sts-ico::after { opacity: 1; transform: scale(1); }
  .sts .sts-facts__item:hover [data-spin] { transform: rotate(180deg); }
  .sts .sts-facts__item:hover [data-lift] { transform: translateY(-3px); }
  .sts .sts-facts__item:hover [data-drop] { transform: translateY(3px); }
}

@media (min-width: 900px) {
  .sts .sts-facts .sts-wrap { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 0; padding-bottom: 0; }
  .sts .sts-facts__item { padding: 30px; border-top: 0; border-left: 1px solid rgba(255,255,255,.13); }
  .sts .sts-facts__item:first-child { border-left: 0; padding-left: 0; }
  .sts .sts-facts__item:last-child { padding-right: 0; }
}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.sts .sts-section { padding-top: var(--sts-sec); padding-bottom: var(--sts-sec); }
.sts .sts-section--cream { background: var(--sts-cream-2); }
.sts .sts-section--white { background: var(--sts-white); }
.sts .sts-section--navy { background: var(--sts-navy); color: rgba(255,255,255,.84); }
.sts .sts-section--navy h2, .sts .sts-section--navy h3 { color: var(--sts-white); }

.sts .sts-head { margin-bottom: 34px; }
.sts .sts-head--center { text-align: center; }
.sts .sts-head--center .sts-lede { margin-left: auto; margin-right: auto; }

@media (min-width: 600px) { .sts { --sts-sec: 78px; } .sts .sts-head { margin-bottom: 44px; } }
@media (min-width: 900px) {
  .sts { --sts-pad: 32px; --sts-sec: 104px; }
  .sts .sts-head { max-width: 640px; margin-bottom: 56px; }
  .sts .sts-head--center { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   RANGE CARDS
   ========================================================================== */
.sts .sts-range { display: grid; grid-template-columns: 1fr; gap: 22px; }

.sts .sts-card {
  position: relative;
  background: var(--sts-white);
  border: 1px solid var(--sts-line);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .5s var(--sts-ease-out), box-shadow .5s var(--sts-ease), border-color .5s var(--sts-ease);
}
/* Gold rule that wipes across the top edge on hover */
.sts .sts-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sts-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--sts-ease-out);
  z-index: 3;
}

.sts .sts-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sts-cream); }
.sts .sts-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--sts-ease-out); }
.sts .sts-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,31,60,0) 45%, rgba(10,31,60,.45) 100%);
  opacity: 0;
  transition: opacity .5s var(--sts-ease);
}

/* The disc straddles the image/body seam. It must live in the BODY, not the
   media box — .sts-card__media has overflow:hidden for the image zoom, which
   would crop the overhang. */
.sts .sts-card__ico {
  position: absolute;
  left: 20px; top: -27px;
  z-index: 4;
  box-shadow: 0 10px 24px rgba(10,31,60,.22);
}

.sts .sts-card__body { position: relative; padding: 40px 22px 26px; flex: 1 1 auto; }
.sts .sts-card__body h3 { margin-bottom: 12px; }
.sts .sts-card ul { list-style: none; margin: 0; padding: 0; }
.sts .sts-card li {
  position: relative;
  padding-left: 22px;
  font-size: 0.95rem;
  color: var(--sts-muted);
  margin-bottom: 8px;
}
.sts .sts-card li:last-child { margin-bottom: 0; }
.sts .sts-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 11px; height: 2px;
  background: var(--sts-gold);
  transform-origin: left;
  transition: transform .45s var(--sts-ease-out);
}

@media (hover: hover) {
  .sts .sts-card:hover { transform: translateY(-8px); box-shadow: 0 26px 52px rgba(10,31,60,.15); border-color: rgba(216,169,97,.45); }
  .sts .sts-card:hover::before { transform: scaleX(1); }
  .sts .sts-card:hover .sts-card__media img { transform: scale(1.07); }
  .sts .sts-card:hover .sts-card__media::after { opacity: 1; }
  .sts .sts-card:hover li::before { transform: scaleX(1.5); }
  .sts .sts-card:hover .sts-ico { background: var(--sts-gold); color: var(--sts-navy); }
  .sts .sts-card:hover .sts-ico::after { opacity: 1; transform: scale(1); }
  .sts .sts-card:hover [data-spin] { transform: rotate(180deg); }
  .sts .sts-card:hover [data-lift] { transform: translateY(-3px); }
  .sts .sts-card:hover [data-drop] { transform: translateY(3px); }
  .sts .sts-card:hover [data-draw] { stroke-dashoffset: 42; }
}

@media (min-width: 600px) { .sts .sts-range { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
@media (min-width: 900px) {
  .sts .sts-range { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .sts .sts-card__body { padding: 46px 28px 32px; }
  .sts .sts-card__ico { left: 26px; }
}

/* ==========================================================================
   PROMISE — icon + number, four stated guarantees
   ========================================================================== */
.sts .sts-promise { display: grid; grid-template-columns: 1fr; gap: 34px; }

.sts .sts-promise__list { list-style: none; margin: 0; padding: 0; counter-reset: sts-promise; }
.sts .sts-promise__list li {
  counter-increment: sts-promise;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 20px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.13);
  font-size: 0.95rem;
}
.sts .sts-promise__list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.sts .sts-promise__num {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sts-gold);
  display: block;
  margin-bottom: 5px;
}
.sts .sts-promise__num::before { content: counter(sts-promise, decimal-leading-zero) " — "; }
.sts .sts-promise__list strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.02rem; font-weight: 700;
  color: var(--sts-white);
  margin-bottom: 4px;
}

@media (hover: hover) {
  .sts .sts-promise__list li:hover .sts-ico { background: var(--sts-gold); color: var(--sts-navy); transform: translateY(-3px); }
  .sts .sts-promise__list li:hover .sts-ico::after { opacity: 1; transform: scale(1); }
  .sts .sts-promise__list li:hover [data-spin] { transform: rotate(180deg); }
  .sts .sts-promise__list li:hover [data-lift] { transform: translateY(-3px); }
  .sts .sts-promise__list li:hover [data-drop] { transform: translateY(3px); }
  .sts .sts-promise__list li:hover [data-draw] { stroke-dashoffset: 42; }
}

.sts .sts-promise__aside {
  position: relative;
  background: var(--sts-navy-2);
  border-left: 3px solid var(--sts-gold);
  padding: 28px 24px;
  border-radius: 2px;
  overflow: hidden;
}
.sts .sts-promise__aside h3 { margin-bottom: 12px; }
.sts .sts-promise__aside p { margin: 0 0 22px; color: rgba(255,255,255,.8); font-size: 0.95rem; }

@media (min-width: 900px) {
  .sts .sts-promise { grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start; }
  .sts .sts-promise__aside { padding: 40px 36px; }
}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
/* Mobile: horizontal snap carousel.
   NOTE: the reveal sits on THIS container, never on the individual cards —
   off-screen cards inside a scroller never intersect the viewport, so a
   per-card reveal leaves cards 2 and 3 stuck at opacity 0 and the strip
   looks like it will not swipe. */
.sts .sts-quotes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--sts-pad);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  padding-bottom: 14px;
  margin-left: calc(var(--sts-pad) * -1);
  margin-right: calc(var(--sts-pad) * -1);
  padding-left: var(--sts-pad);
  padding-right: var(--sts-pad);
  scrollbar-width: none;
}
.sts .sts-quotes::-webkit-scrollbar { display: none; }

.sts .sts-quote {
  position: relative;
  scroll-snap-align: start;
  background: var(--sts-white);
  border: 1px solid var(--sts-line);
  border-radius: 3px;
  padding: 30px 24px 26px;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .5s var(--sts-ease-out), box-shadow .5s var(--sts-ease), border-color .5s var(--sts-ease);
}
.sts .sts-quote::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sts-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--sts-ease-out);
}
.sts .sts-quote__mark {
  position: absolute;
  top: 14px; right: 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--sts-gold);
  opacity: .16;
  transition: opacity .5s var(--sts-ease), transform .5s var(--sts-ease-out);
}
.sts .sts-quote__stars { display: flex; gap: 4px; margin-bottom: 14px; }
.sts .sts-quote__stars svg { width: 16px; height: 16px; fill: var(--sts-gold); }
.sts .sts-quote p { margin: 0 0 20px; font-size: 0.97rem; flex: 1 1 auto; position: relative; z-index: 1; }
.sts .sts-quote__by {
  border-top: 1px solid var(--sts-line);
  padding-top: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem; font-weight: 700;
  color: var(--sts-navy);
}
.sts .sts-quote__role {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem; font-weight: 400;
  color: var(--sts-muted);
  margin-top: 2px;
}

@media (hover: hover) {
  .sts .sts-quote:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(10,31,60,.13); border-color: rgba(216,169,97,.45); }
  .sts .sts-quote:hover::before { transform: scaleX(1); }
  .sts .sts-quote:hover .sts-quote__mark { opacity: .3; transform: translateY(-3px); }
}

.sts .sts-swipehint {
  text-align: center;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sts-muted);
  margin: 8px 0 0;
}

@media (min-width: 700px) {
  .sts .sts-quotes {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    gap: 24px;
    margin-left: 0; margin-right: 0; padding: 0;
  }
  .sts .sts-quote { padding: 34px 28px 30px; }
  .sts .sts-swipehint { display: none; }
}

/* ==========================================================================
   RENTAL CTA
   ========================================================================== */
.sts .sts-cta {
  position: relative;
  background: var(--sts-peri);
  text-align: center;
  /* Tighter than a standard section. This band is a single centred message,
     not a content section — full section padding on top of the divider above
     it left a slab of empty colour before the copy started. */
  padding-top: calc(var(--sts-sec) * 0.62);
  padding-bottom: calc(var(--sts-sec) * 0.62);
  overflow: hidden;
}
/* The divider is the section's own top edge, so no extra padding after it. */
.sts .sts-divider + .sts-cta,
.sts-content > .sts-divider + .sts-cta { padding-top: calc(var(--sts-sec) * 0.5); }
.sts .sts-cta__media {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Overlay does two jobs: hold the periwinkle brand colour, and mute the photo
   enough that it reads as texture. At .93 a high-detail towel close-up still
   showed every loop, which muddied the panel and cut the contrast under white
   text. Pushed up, with a darker centre so the headline always sits on the
   deepest part of the wash. */
/* Same idea as the hero — a wash that is opaque where the text sits and
   thins out where it does not — but CENTRED rather than run left-to-right,
   because this section is centre-aligned. The photo stays fully visible at
   the edges and disappears under the headline. */
.sts .sts-cta__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* Opaque only directly behind the copy, then falls away fast so the photo
       reads clearly across most of the band. */
    radial-gradient(
      58% 74% at 50% 50%,
      rgba(103,118,178,.93) 0%,
      rgba(103,118,178,.82) 45%,
      rgba(103,118,178,.42) 75%,
      rgba(103,118,178,.14) 100%
    ),
    /* Light brand tint across the whole panel so it still belongs to the
       design rather than looking like a bare photograph. */
    linear-gradient(180deg, rgba(115,130,188,.30) 0%, rgba(88,102,157,.40) 100%);
}

/* On phones the copy spans nearly the full width, so the opaque core has to
   widen or the text lands on the thin outer edge of the wash. */
@media (max-width: 700px) {
  .sts .sts-cta__media::after {
    background:
      radial-gradient(
        112% 68% at 50% 50%,
        rgba(103,118,178,.94) 0%,
        rgba(103,118,178,.88) 58%,
        rgba(103,118,178,.55) 100%
      ),
      linear-gradient(180deg, rgba(115,130,188,.32) 0%, rgba(88,102,157,.44) 100%);
  }
}

/* Text sits on the wash regardless — a stray light patch in a client's photo
   must never make the headline hard to read. */
.sts .sts-cta h2,
.sts .sts-cta p { text-shadow: 0 1px 18px rgba(10,31,60,.28); }
.sts .sts-cta .sts-wrap { position: relative; z-index: 2; }
.sts .sts-cta h2 { color: var(--sts-white); margin-bottom: 14px; }
.sts .sts-cta p {
  color: rgba(255,255,255,.93);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
  max-width: 620px;
  margin: 0 auto 28px;
}
.sts .sts-cta .sts-ico { background: rgba(255,255,255,.16); color: var(--sts-white); margin-bottom: 16px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.sts .sts-contact { display: grid; grid-template-columns: 1fr; gap: 34px; }

.sts .sts-contact__details { list-style: none; margin: 22px 0 0; padding: 0; }
/* ALIGNMENT — no magic numbers.
   The row is a 2-column x 2-row grid:
     row 1 = disc | label + first value line   -> align-items:center on this
                                                  row centres the disc on that
                                                  cluster EXACTLY, whatever the
                                                  font metrics are.
     row 2 = (empty) | any remaining lines     -> the address overflow lines,
                                                  which must NOT affect where
                                                  the disc sits.
   Earlier versions used padding-top to nudge the text. That is a magic number
   tuned to one font size and it drifts the moment line-height changes. */
.sts .sts-contact__details li {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--sts-line);
}
.sts .sts-contact__details .sts-ico {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}
.sts .sts-contact__cluster {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
}
.sts .sts-contact__more {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}
.sts .sts-contact__details li:last-child { border-bottom: 0; }
.sts .sts-contact__details .sts-contact__label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--sts-gold-dk);
  margin-bottom: 3px;
}
.sts .sts-contact__details a { text-decoration: none; color: var(--sts-navy); font-weight: 600; word-break: break-word; transition: color .25s var(--sts-ease); }
.sts .sts-contact__details a:hover { color: var(--sts-peri); }

@media (hover: hover) {
  /* Contact rows keep the navy disc on hover. A full gold fill made the
     hovered item look like a broken/odd state next to its neighbours —
     the ring and a small lift are enough of a response here. */
  .sts .sts-contact__details li:hover .sts-ico { transform: translateY(-3px); }
  .sts .sts-contact__details li:hover .sts-ico::after { opacity: 1; transform: scale(1); }
  .sts .sts-contact__details li:hover [data-lift] { transform: translateY(-3px); }
  .sts .sts-contact__details li:hover [data-drop] { transform: translateY(3px); }
  .sts .sts-contact__details li:hover [data-spin] { transform: rotate(180deg); }
}

/* Keyboard parity: tabbing to a link inside a row gives the same response
   as hover, so keyboard users get the same affordance. */
.sts .sts-contact__details li:focus-within .sts-ico { transform: translateY(-3px); }
.sts .sts-contact__details li:focus-within .sts-ico::after { opacity: 1; transform: scale(1); }

/* Touch devices: suppress the ring entirely. Without this, iOS holds the last
   tapped element in :hover until you tap elsewhere, leaving one disc stuck in
   a highlighted state that looks like a rendering fault. */
@media (hover: none) {
  .sts .sts-ico::after { opacity: 0 !important; transform: scale(.82) !important; }
}

/* ==========================================================================
   FAQ — mirrors the FAQPage schema. Answer-first phrasing so AI assistants
   and featured snippets can lift a complete answer from a single paragraph.
   ========================================================================== */
.sts .sts-faq { border-top: 1px solid var(--sts-line); }
.sts .sts-faq__item { border-bottom: 1px solid var(--sts-line); }
.sts .sts-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 22px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--sts-navy);
  transition: color .3s var(--sts-ease);
}
.sts .sts-faq__q:hover { color: var(--sts-gold-dk); }
.sts .sts-faq__q:focus-visible { outline: 3px solid var(--sts-peri); outline-offset: 3px; }
.sts .sts-faq__sign { position: relative; flex: 0 0 20px; width: 20px; height: 20px; }
.sts .sts-faq__sign::before,
.sts .sts-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 20px; height: 2px;
  background: var(--sts-gold);
  transition: transform .4s var(--sts-ease-out);
}
.sts .sts-faq__sign::after { transform: rotate(90deg); }
.sts .sts-faq__q[aria-expanded="true"] .sts-faq__sign::after { transform: rotate(0deg); }
.sts .sts-faq__a { overflow: hidden; max-height: 0; transition: max-height .5s var(--sts-ease); }
.sts .sts-faq__a p { margin: 0; padding: 0 0 22px; color: var(--sts-muted); max-width: 62ch; }
.sts .sts-faq__item.is-open .sts-faq__a { max-height: 340px; }

.sts .sts-formbox {
  background: var(--sts-white);
  border: 1px solid var(--sts-line);
  border-top: 4px solid var(--sts-gold);
  border-radius: 3px;
  padding: 28px 22px;
}
.sts .sts-formbox h3 { margin-bottom: 6px; }
.sts .sts-formbox > p { color: var(--sts-muted); margin: 0 0 20px; font-size: 0.95rem; }
.sts .sts-formslot {
  border: 1px dashed rgba(10,31,60,.28);
  border-radius: 3px;
  padding: 22px 18px;
  color: var(--sts-muted);
  font-size: 0.9rem;
}
.sts .sts-formslot strong { display: block; font-family: 'Montserrat', sans-serif; color: var(--sts-navy); margin-bottom: 8px; }

@media (min-width: 900px) {
  .sts .sts-contact { grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
  .sts .sts-formbox { padding: 38px 34px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.sts .sts-footer { background: var(--sts-navy); color: rgba(255,255,255,.72); padding-top: 48px; font-size: 0.94rem; }
.sts .sts-footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 36px; }
.sts .sts-footer h4 { color: var(--sts-white); margin-bottom: 16px; }
.sts .sts-footer ul { list-style: none; margin: 0; padding: 0; }
.sts .sts-footer li { margin-bottom: 9px; }
.sts .sts-footer a { text-decoration: none; word-break: break-word; transition: color .25s var(--sts-ease), padding-left .3s var(--sts-ease); }
.sts .sts-footer a:hover { color: var(--sts-gold); }
.sts .sts-footer__links a:hover { padding-left: 6px; }
.sts .sts-footer .sts-logo__name { color: var(--sts-white); }
.sts .sts-footer .sts-logo__sub { color: var(--sts-gold); }
.sts .sts-footer__about p { margin: 16px 0 0; max-width: 340px; }

.sts .sts-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 13px;
}
.sts .sts-footer__contact svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 3px;
  color: var(--sts-gold);
  overflow: visible;
  transition: transform .4s var(--sts-ease-out);
}
.sts .sts-footer__contact svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@media (hover: hover) {
  .sts .sts-footer__contact li:hover svg { transform: translateY(-2px); }
}

.sts .sts-footer__bar {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 18px; padding-bottom: 20px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 0.84rem;
  color: rgba(255,255,255,.6);
}
/* Legal-line links read as TEXT, not links. The copyright and the developer
   credit are attribution, not navigation — gold made them compete with the
   footer's real links directly above. They inherit the bar's muted colour and
   only warm slightly on hover, so they are still discoverable without
   advertising themselves. */
.sts .sts-footer__bar a,
.sts .sts-footer__legal-link {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--sts-ease);
}
.sts .sts-footer__bar a:hover,
.sts .sts-footer__legal-link:hover { color: rgba(255,255,255,.9); }
.sts .sts-footer__bar a:focus-visible,
.sts .sts-footer__legal-link:focus-visible {
  outline: 2px solid var(--sts-gold);
  outline-offset: 3px;
}

@media (min-width: 600px) { .sts .sts-footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (min-width: 900px) {
  .sts .sts-footer { padding-top: 68px; }
  .sts .sts-footer__grid { grid-template-columns: 1.5fr 1fr 1.2fr; gap: 46px; padding-bottom: 46px; }
  .sts .sts-footer__bar { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
}

/* ==========================================================================
   MOBILE CALL BAR
   ========================================================================== */
.sts .sts-callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--sts-navy);
  border-top: 2px solid var(--sts-gold);
  box-shadow: 0 -8px 22px rgba(10,31,60,.2);
  transform: translateY(100%);
  transition: transform .5s var(--sts-ease-out);
}
.sts .sts-callbar.is-in { transform: none; }
.sts .sts-callbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; color: var(--sts-white);
}
.sts .sts-callbar a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sts .sts-callbar a + a { background: var(--sts-gold); color: var(--sts-navy); }
.sts .sts-callbar-spacer { height: 56px; }

@media (min-width: 900px) {
  .sts .sts-callbar, .sts .sts-callbar-spacer { display: none; }
}

/* ==========================================================================
   SCROLL REVEAL — with stagger
   ========================================================================== */
/* PROGRESSIVE ENHANCEMENT — content is visible by DEFAULT.
   The hidden state only applies once JS has confirmed it is running by adding
   .sts-js to <html>. Previously the hidden state was unconditional, so any JS
   failure left whole sections invisible — a coloured band with nothing in it.
   Animation is a nice-to-have; never let it gate the content. */
.sts .sts-reveal { opacity: 1; transform: none; }

.sts-js .sts .sts-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--sts-ease-out), transform .8s var(--sts-ease-out);
}
.sts-js .sts .sts-reveal.is-in { opacity: 1; transform: none; }
.sts-js .sts .sts-reveal[data-delay="1"] { transition-delay: .1s; }
.sts-js .sts .sts-reveal[data-delay="2"] { transition-delay: .2s; }
.sts-js .sts .sts-reveal[data-delay="3"] { transition-delay: .3s; }
.sts-js .sts .sts-reveal[data-delay="4"] { transition-delay: .4s; }

/* ==========================================================================
   REDUCED MOTION — everything above degrades to a static, complete page
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sts *,
  .sts *::before,
  .sts *::after {
    animation-duration: .001ms !important;
    animation-delay: .001ms !important;
    transition-duration: .001ms !important;
    transition-delay: .001ms !important;
    scroll-behavior: auto !important;
  }
  .sts .sts-reveal,
  .sts .sts-stage { opacity: 1; transform: none; }
  .sts .sts-band { background-size: 100% 3px, 68% 2px, 100% 2px; }
  .sts .sts-callbar { transform: none; }
  .sts .sts-hero__media img { transform: none; }
}

/* ==========================================================================
   WORDPRESS / ASTRA INTEGRATION — appended for the child theme.
   Not present in the static HTML preview, which had no parent theme wrapping
   the markup.
   ========================================================================== */

/* FULL BLEED — works at ANY nesting depth.
   The earlier version only matched sections that were DIRECT children of the
   wrapper, so the moment the block editor nested the shortcode inside a Group
   or a paragraph container, the selector missed and the hero sat in a narrow
   column with white gutters.

   `margin-left: calc(50% - 50vw)` measures from the element's own position, so
   it escapes any number of ancestors without needing to know about them. The
   .sts wrapper has overflow-x:hidden, so 100vw can never cause sideways scroll.

   The layout module also forces Astra to page-builder/full-width on any page
   containing these shortcodes, so no per-page setup is needed — this CSS is
   the belt to that braces. */
.sts-content > .sts-hero,
.sts-content > .sts-facts,
.sts-content > .sts-section,
.sts-content > .sts-cta,
.sts-content > .sts-divider,
.sts-content .sts-hero,
.sts-content .sts-facts,
.sts-content > * > .sts-section,
.sts-content > * > .sts-cta,
.sts-content > * > .sts-divider {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Strip the container Astra and the editor put around the content, whatever
   they call it, on pages flagged by the layout module. */
/* Strip the container Astra wraps the content in.
   NEVER use a bare element selector like `article` here. This design uses
   <article> for the range cards and the comparison columns, so a bare
   `article` rule with !important stripped their own padding and stretched
   them to full width. Target Astra's own container classes only, and exclude
   anything inside our design scope as a second line of defence. */
.sts-fullbleed .site-content .ast-container:not(.sts *),
.sts-fullbleed .site-content #primary,
.sts-fullbleed .site-content > .ast-container > .entry-content,
.sts-fullbleed .site-content .ast-article-single:not(.sts *),
.sts-fullbleed .site-content > article,
.sts-fullbleed .site-content #primary > article {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Belt and braces: nothing inside the design scope may be reset by the
   container rules above. */
.sts-fullbleed .sts article,
.sts-fullbleed .sts .sts-card,
.sts-fullbleed .sts .sts-cmp {
  max-width: none;
  width: auto;
}
.sts-fullbleed .site-content { padding-top: 0 !important; padding-bottom: 0 !important; }
.sts-fullbleed .entry-header,
.sts-fullbleed .ast-single-post-order,
.sts-fullbleed .entry-content > .wp-block-group__inner-container > p:empty { display: none !important; }
.sts-fullbleed #content > .ast-container { padding: 0 !important; max-width: 100% !important; }

/* The editor sometimes leaves an empty paragraph between shortcode blocks. */
.sts-content > p:empty,
.sts-fullbleed .entry-content > p:empty { display: none !important; }

/* Astra's own page title / breadcrumb area above the content. */
.sts-fullbleed .ast-archive-description,
.sts-fullbleed .ast-breadcrumbs-wrapper { display: none !important; }

/* Astra's editor/base styles otherwise re-style our lists and headings. */
/* These resets are scoped INSIDE .sts on purpose — they undo Astra's list
   styling for our own components only, never the client's page content. */
.sts .sts-card ul,
.sts .sts-promise__list,
.sts .sts-contact__details,
.sts .sts-footer ul,
.sts .sts-nav ul,
.sts .sts-quotes {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
.sts .sts-nav ul li,
.sts .sts-footer ul li,
.sts .sts-contact__details li,
.sts .sts-card li,
.sts .sts-promise__list li { list-style: none !important; }
.sts .sts-promise__list li::marker,
.sts .sts-contact__details li::marker,
.sts .sts-card li::marker { content: none; }

/* wpautop wraps testimonial and FAQ body copy in <p> — match the design. */
.sts .sts-quote p:last-of-type { margin-bottom: 20px; }
.sts .sts-faq__a p:last-child { padding-bottom: 22px; }

/* Astra sometimes forces its own heading colours inside the content area.
   Force the font stack, never the colour — blanket colour overrides destroy
   the design's own palette. */
.sts h1, .sts h2, .sts h3, .sts h4 { font-family: 'Montserrat', sans-serif !important; }
.sts, .sts p, .sts li, .sts a { font-family: 'Inter', sans-serif; }

/* Keep the fixed mobile call bar above Astra's scroll-to-top button. */
.sts .sts-callbar { z-index: 999; }

/* Safety net: give every sprite reference an explicit box so that even if the
   sprite loads late, an icon can never balloon to the SVG default 300x150. */
/* Safety net for ICON references only. It must NOT match the divider SVGs,
   which are intentionally sized by their parent and carry no width/height —
   catching them collapsed every divider to 1em and left a flat coloured band
   with no diagonal. Scope by parent, never by a bare svg selector. */
.sts .sts-ico svg:not([width]):not([height]),
.sts .sts-quote__stars svg:not([width]):not([height]),
.sts .sts-footer__contact svg:not([width]):not([height]),
.sts .sts-topbar__item svg:not([width]):not([height]),
.sts .sts-callbar a svg:not([width]):not([height]) { width: 1em; height: 1em; }

/* Dividers own their box explicitly so nothing can shrink them. */
.sts .sts-divider svg { width: 100% !important; height: 100% !important; display: block; }
.sts .sts-ico svg { width: 26px; height: 26px; }
.sts .sts-quote__stars svg { width: 16px; height: 16px; }
.sts .sts-footer__contact svg { width: 17px; height: 17px; }
.sts .sts-topbar__item svg { width: 15px; height: 15px; }
.sts .sts-callbar a svg { width: 16px; height: 16px; }
.sts .sts-btn__arrow { width: 15px; height: 15px; }

/* The bare page template: no container of any kind. */
.sts-bare,
.sts-bare .site-main { width: 100%; max-width: 100%; padding: 0; margin: 0; }

/* ==========================================================================
   STORY — About-style body copy, optional side image
   ========================================================================== */
.sts .sts-story { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
/* Cap the heading too. Left unbounded it ran the full 1240px and set a much
   longer measure than the body underneath, which read as two different
   columns rather than one block of copy. */
.sts .sts-story h2 { max-width: 20ch; }
.sts .sts-story__body { margin-top: 22px; }
.sts .sts-story__body p {
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.14rem);
  color: var(--sts-muted);
  margin: 0 0 18px;
  max-width: 62ch;
}
.sts .sts-story__body p:last-child { margin-bottom: 0; }
.sts .sts-story__media {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--sts-line);
}
.sts .sts-story__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
/* Gold hem along the top edge, tying the image back to the dobby motif. */
.sts .sts-story__media::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sts-gold);
  z-index: 2;
}

@media (min-width: 900px) {
  .sts .sts-story { grid-template-columns: 1.15fr 1fr; gap: 64px; }
  .sts .sts-story h2 { max-width: 16ch; }

  /* Solo (no image): run the copy in two columns instead of one long ragged
     line across the full width, which is what made the section look empty on
     the right. */
  .sts .sts-story--solo { grid-template-columns: 1fr; }
  .sts .sts-story--solo .sts-story__body {
    columns: 2;
    column-gap: 56px;
  }
  .sts .sts-story--solo .sts-story__body p {
    max-width: none;
    break-inside: avoid;
  }
  .sts .sts-story--solo h2 { max-width: 24ch; }
}

/* ==========================================================================
   FLUENT FORMS — match the site design.
   Scoped to the form box so it cannot leak into other plugins' forms.
   ========================================================================== */
.sts .sts-formbox .fluentform .ff-el-group { margin-bottom: 18px; }

.sts .sts-formbox .fluentform label,
.sts .sts-formbox .ff-el-input--label label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sts-navy) !important;
  margin-bottom: 7px;
}
.sts .sts-formbox .ff-el-is-required.asterisk-right label:after,
.sts .sts-formbox .ff_t_c label:after { color: var(--sts-gold-dk) !important; }

.sts .sts-formbox .fluentform input[type="text"],
.sts .sts-formbox .fluentform input[type="email"],
.sts .sts-formbox .fluentform input[type="tel"],
.sts .sts-formbox .fluentform input[type="number"],
.sts .sts-formbox .fluentform input[type="date"],
.sts .sts-formbox .fluentform select,
.sts .sts-formbox .fluentform textarea {
  width: 100%;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.97rem !important;
  color: var(--sts-ink) !important;
  background: var(--sts-cream-2) !important;
  border: 1px solid rgba(10,31,60,.16) !important;
  border-radius: 2px !important;
  padding: 13px 15px !important;
  min-height: 50px;
  box-shadow: none !important;
  transition: border-color .25s var(--sts-ease), background-color .25s var(--sts-ease), box-shadow .25s var(--sts-ease);
}
.sts .sts-formbox .fluentform textarea { min-height: 130px; line-height: 1.6; }

.sts .sts-formbox .fluentform input:focus,
.sts .sts-formbox .fluentform select:focus,
.sts .sts-formbox .fluentform textarea:focus {
  background: var(--sts-white) !important;
  border-color: var(--sts-gold) !important;
  box-shadow: 0 0 0 3px rgba(216,169,97,.22) !important;
  outline: none !important;
}
.sts .sts-formbox .fluentform ::placeholder { color: #93a0b5 !important; opacity: 1; }

/* Checkboxes and radios — gold marker, comfortable hit area. */
.sts .sts-formbox .fluentform .ff-el-form-check { margin-bottom: 9px; }
.sts .sts-formbox .fluentform .ff-el-form-check-label { display: flex; align-items: flex-start; gap: 10px; }
.sts .sts-formbox .fluentform .ff-el-form-check-label span,
.sts .sts-formbox .fluentform .ff-el-form-check label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--sts-ink) !important;
}
.sts .sts-formbox .fluentform input[type="checkbox"],
.sts .sts-formbox .fluentform input[type="radio"] {
  width: 18px; height: 18px;
  min-height: 0;
  margin-top: 2px;
  accent-color: var(--sts-gold-dk);
  flex: 0 0 18px;
}

/* Submit — reuse the site's gold button, including the sweeping fill. */
.sts .sts-formbox .fluentform .ff-btn-submit,
.sts .sts-formbox .fluentform button[type="submit"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  width: 100%;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 14px 30px !important;
  border-radius: 2px !important;
  background: var(--sts-gold) !important;
  color: var(--sts-navy) !important;
  border: 2px solid var(--sts-gold) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .3s var(--sts-ease), color .3s var(--sts-ease), transform .3s var(--sts-ease), box-shadow .3s var(--sts-ease);
}
.sts .sts-formbox .fluentform .ff-btn-submit:hover,
.sts .sts-formbox .fluentform button[type="submit"]:hover {
  background: var(--sts-navy) !important;
  color: var(--sts-gold) !important;
  border-color: var(--sts-navy) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(10,31,60,.24);
}

@media (min-width: 600px) {
  .sts .sts-formbox .fluentform .ff-btn-submit,
  .sts .sts-formbox .fluentform button[type="submit"] { width: auto; }
}

/* Validation + success messaging in the site palette, not plugin blue. */
.sts .sts-formbox .fluentform .error,
.sts .sts-formbox .fluentform .text-danger,
.sts .sts-formbox .fluentform .ff-el-is-error .error-text {
  font-size: 0.86rem !important;
  color: #b3261e !important;
}
.sts .sts-formbox .fluentform .ff-el-is-error input,
.sts .sts-formbox .fluentform .ff-el-is-error select,
.sts .sts-formbox .fluentform .ff-el-is-error textarea {
  border-color: #b3261e !important;
}
.sts .sts-formbox .ff-message-success {
  background: var(--sts-cream-2) !important;
  border: 1px solid var(--sts-gold) !important;
  border-left: 3px solid var(--sts-gold) !important;
  border-radius: 2px !important;
  color: var(--sts-ink) !important;
  padding: 18px 20px !important;
}

/* Two-up rows (First / Last name) keep the design's gutter. */
.sts .sts-formbox .fluentform .ff-t-cell { padding-left: 8px; padding-right: 8px; }
.sts .sts-formbox .fluentform .ff-t-container { margin-left: -8px; margin-right: -8px; }

/* ==========================================================================
   SUB-PAGE HERO — deliberately NOT the homepage hero.
   About a third of the height, smaller type, breadcrumb instead of a kicker,
   no buttons. Its job is orientation, not persuasion.
   ========================================================================== */
.sts .sts-phero {
  position: relative;
  background: var(--sts-navy);
  color: var(--sts-white);
  overflow: hidden;
}
/* NO hem here. The section that follows always opens with a bevel divider, so
   a dashed band along this edge stacked a dotted line directly above a
   diagonal — two competing seams within a few pixels of each other. */
.sts .sts-phero__media { position: absolute; inset: 0; }
.sts .sts-phero__media img { width: 100%; height: 100%; object-fit: cover; }
.sts .sts-phero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,31,60,.95) 0%, rgba(10,31,60,.86) 55%, rgba(10,31,60,.55) 100%);
}
/* Without a photo, a soft diagonal wash keeps the band from reading as a flat
   slab. A rotated solid block was drawing a hard visible edge down the middle
   of the hero — a gradient carries the same idea with no seam. */
.sts .sts-phero:not(.sts-phero--image)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(104deg, rgba(255,255,255,0) 52%, rgba(255,255,255,.045) 52%),
    radial-gradient(120% 150% at 88% 0%, rgba(115,130,188,.30) 0%, rgba(10,31,60,0) 60%);
}
.sts .sts-phero .sts-wrap {
  position: relative;
  z-index: 2;
  padding-top: 44px;
  padding-bottom: 48px;
}
.sts .sts-phero__inner { max-width: 720px; }
.sts .sts-phero h1 {
  color: var(--sts-white);
  /* Tops out well below the homepage h1 (4.1rem) — a sub-page must not
     compete with the landing page for weight. */
  font-size: clamp(1.85rem, 1.3rem + 2.2vw, 3rem);
  margin: 0;
}
.sts .sts-phero__lede {
  font-size: clamp(0.98rem, 0.94rem + 0.3vw, 1.12rem);
  font-weight: 300;
  color: rgba(255,255,255,.85);
  margin: 14px 0 0;
  max-width: 56ch;
}
.sts .sts-phero__crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: 16px;
}
.sts .sts-phero__crumbs a { text-decoration: none; color: var(--sts-gold); }
.sts .sts-phero__crumbs a:hover { text-decoration: underline; }
.sts .sts-phero .sts-band { margin-bottom: 16px; }

@media (min-width: 600px) {
  .sts .sts-phero .sts-wrap { padding-top: 60px; padding-bottom: 66px; }
}
@media (min-width: 900px) {
  .sts .sts-phero .sts-wrap { padding-top: 84px; padding-bottom: 92px; }
}

/* ==========================================================================
   VALUES — principles, on navy.
   NOT cards. Every other navy section on this site — the highlights strip
   under the hero, the guarantees list — is icon + text separated by hairlines
   with no container. Boxed cards floating on navy read as a component
   borrowed from a different template, so this follows the established
   pattern instead.
   ========================================================================== */
.sts .sts-values { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 8px; }

.sts .sts-value {
  padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,.13);
}
.sts .sts-value:first-child { border-top: 0; }

.sts .sts-value h3 {
  color: var(--sts-white);
  margin: 20px 0 10px;
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.sts .sts-value p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 0.93rem;
  line-height: 1.7;
  max-width: 34ch;
}
/* Same disc size as the highlights strip, so the two navy sections read as
   the same system rather than two different ones. */
.sts .sts-value .sts-ico { width: 50px; height: 50px; flex: 0 0 50px; }
.sts .sts-value .sts-ico svg { width: 24px; height: 24px; }

@media (hover: hover) {
  .sts .sts-value:hover .sts-ico { background: var(--sts-gold); color: var(--sts-navy); transform: translateY(-3px); }
  .sts .sts-value:hover .sts-ico::after { opacity: 1; transform: scale(1); }
  .sts .sts-value:hover [data-spin] { transform: rotate(180deg); }
  .sts .sts-value:hover [data-lift] { transform: translateY(-3px); }
  .sts .sts-value:hover [data-drop] { transform: translateY(3px); }
  .sts .sts-value:hover [data-draw] { stroke-dashoffset: 42; }
}

@media (min-width: 700px) {
  .sts .sts-values { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
  .sts .sts-value { padding: 30px 0; }
  /* Two per row means the first TWO sit at the top with no rule above. */
  .sts .sts-value:nth-child(2) { border-top: 0; }
}

@media (min-width: 1100px) {
  /* Real gutters. The rule sits in the MIDDLE of the gap rather than hard
     against the text — column-gap alone left copy touching the hairline,
     which is what made this read as cramped rather than considered. */
  .sts .sts-values { grid-template-columns: repeat(4, 1fr); column-gap: 64px; }
  .sts .sts-value {
    position: relative;
    padding: 0;
    border-top: 0;
    border-left: 0;
  }
  .sts .sts-value::before {
    content: "";
    position: absolute;
    top: 4px; bottom: 4px;
    left: -32px;
    width: 1px;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.16) 18%,
      rgba(255,255,255,.16) 82%,
      rgba(255,255,255,0) 100%
    );
  }
  .sts .sts-value:first-child::before { display: none; }
  .sts .sts-value p { max-width: none; }

  /* Titles wrap to one or two lines depending on length, so pin the block to
     a shared height. Without it the body copy starts at a different baseline
     in each column and the row loses its horizontal line. */
  .sts .sts-value h3 { min-height: 2.7em; display: flex; align-items: flex-end; }
}

/* The section carries its own breathing room — a values row this sparse needs
   more air above and below than a dense one, or it reads as an afterthought
   floating in the middle of the band. */
.sts .sts-section--navy .sts-values { padding-top: 6px; }

@media (min-width: 900px) {
  .sts .sts-section--navy .sts-values { padding-top: 14px; }
}

/* ==========================================================================
   FLAT DIVIDER — used wherever a section carries a background image.
   The bevel fills its lower half with the next section's solid colour, which
   against a photo becomes a band the image cannot reach into: the picture
   stops short of the edge instead of running full width. A straight gold
   hairline keeps the seam without blocking the image.
   ========================================================================== */
.sts .sts-divider--flat {
  height: 4px;
  min-height: 4px;
  overflow: visible;
  background-image:
    linear-gradient(var(--sts-gold), var(--sts-gold)),
    linear-gradient(rgba(216,169,97,.45), rgba(216,169,97,.45));
  background-repeat: no-repeat;
  background-size: 100% 2px, 100% 1px;
  background-position: 0 0, 0 3px;
}
/* Height overrides from the bevel breakpoints must not apply here. */
@media (min-width: 600px) { .sts .sts-divider--flat { height: 4px; } }
@media (min-width: 900px) { .sts .sts-divider--flat { height: 4px; } }

/* A flat edge contributes almost no height, so the section after it keeps its
   normal padding rather than the reduced amount the bevel earns. */
.sts .sts-divider--flat + .sts-section,
.sts .sts-divider--flat + .sts-cta,
.sts-content > .sts-divider--flat + .sts-section,
.sts-content > .sts-divider--flat + .sts-cta { padding-top: var(--sts-sec); }
.sts .sts-divider--flat + .sts-footer,
.sts-content > .sts-divider--flat + .sts-footer { padding-top: calc(var(--sts-sec) * 0.75); }

/* ==========================================================================
   SPECS — towel sizes and weights, grouped.
   A price-list style block: the client's own content is a plain nested list,
   so the design's job is to make it scannable rather than decorate it.
   ========================================================================== */
.sts .sts-specs { display: grid; grid-template-columns: 1fr; gap: 40px; }

.sts .sts-specs__group-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--sts-navy);
  font-size: 1.12rem;
}
.sts .sts-specs__ico { width: 44px; height: 44px; flex: 0 0 44px; }
.sts .sts-specs__ico svg { width: 21px; height: 21px; }

.sts .sts-specs__list { list-style: none; margin: 0; padding: 0; }

.sts .sts-spec {
  padding: 16px 0;
  border-bottom: 1px solid var(--sts-line);
}
.sts .sts-spec:last-child { border-bottom: 0; }

.sts .sts-spec__name {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--sts-navy);
  line-height: 1.4;
}
/* Size sits under the name on its own line — running them together made the
   two hardest-working pieces of information compete. */
.sts .sts-spec__size {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.93rem;
  color: var(--sts-muted);
  margin-top: 3px;
}

.sts .sts-spec__weights {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Weights as chips, not bullets: they are options to choose between, and a
   bulleted sub-list buried them. */
.sts .sts-spec__weights li {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--sts-navy);
  background: var(--sts-white);
  border: 1px solid rgba(10,31,60,.14);
  border-left: 3px solid var(--sts-gold);
  border-radius: 2px;
  padding: 6px 12px;
  white-space: nowrap;
}

@media (min-width: 800px) {
  .sts .sts-specs { grid-template-columns: repeat(2, 1fr); gap: 48px 56px; }
}
@media (min-width: 1100px) {
  .sts .sts-specs { gap: 56px 72px; }
  .sts .sts-specs__group-title { font-size: 1.2rem; }
}

/* ==========================================================================
   COMPARE — two options weighed side by side (rent vs buy).
   Column 1 is visually favoured: gold hem, white card, slight lift. The client
   sells both, but rental is the service they want people to consider first,
   and a comparison with no recommendation just hands the decision back.
   ========================================================================== */
/* Each card is its own height. Stretching them to match forced the shorter
   column to absorb the difference as dead space under its last point — three
   points cannot fill the height of four, so the gap has to go somewhere.
   Tops align, bottoms differ, which reads as honest rather than broken. */
.sts .sts-compare { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }

.sts .sts-cmp {
  position: relative;
  background: var(--sts-white);
  border: 1px solid var(--sts-line);
  border-top: 3px solid rgba(10,31,60,.22);
  border-radius: 3px;
  padding: 30px 26px 22px;
  transition: transform .5s var(--sts-ease-out), box-shadow .5s var(--sts-ease), border-color .5s var(--sts-ease);
}
.sts .sts-cmp--feature {
  border-top-color: var(--sts-gold);
  box-shadow: 0 18px 40px rgba(10,31,60,.10);
}

.sts .sts-cmp__head { margin-bottom: 20px; }
.sts .sts-cmp__head h3 { margin: 16px 0 8px; font-size: 1.22rem; }
/* Pin the intro block so both columns' first tick starts on the same line —
   one lede wrapping to two lines otherwise offsets the entire list. */
.sts .sts-cmp__lede { margin: 0; color: var(--sts-muted); font-size: 0.95rem; line-height: 1.6; }

.sts .sts-cmp__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sts-line);
}
.sts .sts-cmp__list li {
  display: flex;
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid var(--sts-line);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--sts-muted);
}
.sts .sts-cmp__list li:last-child { border-bottom: 0; }
.sts .sts-cmp__list strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.97rem;
  color: var(--sts-navy);
  margin-bottom: 3px;
}

/* Tick drawn in CSS — no extra icon needed for a repeated list marker. */
.sts .sts-cmp__tick {
  position: relative;
  flex: 0 0 20px;
  width: 20px; height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(10,31,60,.07);
}
.sts .sts-cmp--feature .sts-cmp__tick { background: rgba(216,169,97,.22); }
.sts .sts-cmp__tick::before,
.sts .sts-cmp__tick::after {
  content: "";
  position: absolute;
  background: var(--sts-navy);
  border-radius: 1px;
}
.sts .sts-cmp--feature .sts-cmp__tick::before,
.sts .sts-cmp--feature .sts-cmp__tick::after { background: var(--sts-gold-dk); }
.sts .sts-cmp__tick::before { width: 2px; height: 6px;  left: 6px;  top: 9px;  transform: rotate(-45deg); }
.sts .sts-cmp__tick::after  { width: 2px; height: 10px; left: 11px; top: 5px;  transform: rotate(35deg); }

@media (hover: hover) {
  .sts .sts-cmp:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(10,31,60,.14); }
  .sts .sts-cmp:hover .sts-ico { background: var(--sts-gold); color: var(--sts-navy); }
  .sts .sts-cmp:hover .sts-ico::after { opacity: 1; transform: scale(1); }
  .sts .sts-cmp:hover [data-spin] { transform: rotate(180deg); }
  .sts .sts-cmp:hover [data-lift] { transform: translateY(-3px); }
  .sts .sts-cmp:hover [data-drop] { transform: translateY(3px); }
}

@media (min-width: 900px) {
  .sts .sts-compare { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .sts .sts-cmp { padding: 36px 32px 26px; }
  /* Both cards sit on the same baseline. Lifting only the featured one left
     the two heads misaligned, which read as a layout fault rather than
     emphasis — the gold hem and shadow carry that job on their own. */
  .sts .sts-cmp__lede { min-height: 3.2em; }
}

/* ==========================================================================
   NAVIGATION — mobile panel + sub-menus (overrides the earlier nav rules)

   WHY FIXED, NOT ABSOLUTE: the header lives inside a .sts wrapper carrying
   `overflow-x: hidden`. A box with overflow-x hidden computes overflow-y to
   auto, so an absolutely-positioned dropdown hanging below a short header box
   gets CLIPPED — the panel opened, you just could not see it. Fixed
   positioning is relative to the viewport and escapes that entirely.
   ========================================================================== */
@media (max-width: 899px) {

  .sts .sts-nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(88vw, 380px);
    max-width: 100%;
    background: var(--sts-navy);
    border: 0;
    box-shadow: -18px 0 48px rgba(10,31,60,.34);
    padding: 78px 0 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
    transform: translateX(102%);
    visibility: hidden;
    transition: transform .42s var(--sts-ease-out), visibility 0s linear .42s;
  }
  .sts .sts-nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform .42s var(--sts-ease-out), visibility 0s;
  }

  /* Dim the page behind the panel. */
  .sts .sts-nav::before {
    content: "";
    position: fixed;
    inset: 0;
    right: min(88vw, 380px);
    background: rgba(6,18,36,.5);
    opacity: 0;
    transition: opacity .42s var(--sts-ease);
    pointer-events: none;
  }
  .sts .sts-nav.is-open::before { opacity: 1; }

  .sts .sts-nav ul { display: block; list-style: none; margin: 0; padding: 0; }
  .sts .sts-nav li { border-bottom: 1px solid rgba(255,255,255,.12); opacity: 1; transform: none; animation: none; }
  .sts .sts-nav > ul > li:last-child { border-bottom: 0; }

  .sts .sts-nav a {
    display: block;
    padding: 16px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sts-white);
    text-decoration: none;
    border-bottom: 0;
  }
  .sts .sts-nav a:hover,
  .sts .sts-nav a.is-current { color: var(--sts-gold); }

  /* Sub-menus: indented, on a slightly lighter panel, always reachable. */
  .sts .sts-nav .sub-menu {
    background: rgba(255,255,255,.05);
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .sts .sts-nav .sub-menu a {
    padding-left: 44px;
    font-size: 0.94rem;
    font-weight: 500;
    color: rgba(255,255,255,.84);
    position: relative;
  }
  .sts .sts-nav .sub-menu a::before {
    content: "";
    position: absolute;
    left: 24px; top: 50%;
    width: 10px; height: 2px;
    background: var(--sts-gold);
    transform: translateY(-50%);
  }

  .sts .sts-nav__cta { padding: 20px 24px 0; }
  .sts .sts-nav__cta .sts-btn { width: 100%; }

  /* The toggle must sit above the panel so Close is always tappable. */
  .sts .sts-nav-toggle { position: relative; z-index: 1001; }

  /* Stop the page scrolling behind an open panel. */
  .sts-nav-open, .sts-nav-open body { overflow: hidden; }
}

/* ---------- Desktop dropdowns ---------- */
@media (min-width: 900px) {
  .sts .sts-nav li { position: relative; }

  .sts .sts-nav .sub-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: -18px;
    min-width: 232px;
    display: block;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: var(--sts-white);
    border: 1px solid var(--sts-line);
    border-top: 3px solid var(--sts-gold);
    border-radius: 3px;
    box-shadow: 0 20px 44px rgba(10,31,60,.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .28s var(--sts-ease), transform .28s var(--sts-ease-out), visibility 0s linear .28s;
    z-index: 60;
  }
  /* Bridge the gap so the pointer can travel from item to panel. */
  .sts .sts-nav .menu-item-has-children::after {
    content: "";
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: 16px;
  }
  .sts .sts-nav li:hover > .sub-menu,
  .sts .sts-nav li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .28s var(--sts-ease), transform .28s var(--sts-ease-out), visibility 0s;
  }

  .sts .sts-nav .sub-menu li { border: 0; }
  .sts .sts-nav .sub-menu a {
    display: block;
    padding: 10px 20px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--sts-navy);
    white-space: nowrap;
    border-bottom: 0;
    transition: background-color .2s var(--sts-ease), color .2s var(--sts-ease), padding-left .25s var(--sts-ease);
  }
  .sts .sts-nav .sub-menu a::after { display: none; }
  .sts .sts-nav .sub-menu a:hover,
  .sts .sts-nav .sub-menu a.is-current {
    background: var(--sts-cream-2);
    color: var(--sts-gold-dk);
    padding-left: 25px;
  }

  /* Caret on parents that actually have children. */
  .sts .sts-nav .menu-item-has-children > a { padding-right: 16px; }
  .sts .sts-nav .menu-item-has-children > a::before {
    content: "";
    position: absolute;
    right: 0; top: 50%;
    width: 6px; height: 6px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
    transition: transform .25s var(--sts-ease);
  }
  .sts .sts-nav .menu-item-has-children:hover > a::before { transform: rotate(225deg); margin-top: -1px; }
}

/* ==========================================================================
   HEADER CLIPPING FIX
   `.sts` sets overflow-x:hidden (it stops full-bleed sections causing sideways
   scroll). But a box with overflow-x hidden computes overflow-y to auto, which
   CLIPS — so the desktop dropdown and the mobile panel were both sliced off at
   the header's bottom edge. The header wrapper contains no full-bleed section,
   so it does not need the guard and can overflow freely.
   ========================================================================== */
.sts.sts-headerwrap { overflow: visible; }
.sts.sts-headerwrap .sts-header { overflow: visible; }
.sts.sts-headerwrap .sts-header .sts-wrap { overflow: visible; }

/* The header must also outrank sections further down the page, which paint
   later in DOM order. */
.sts.sts-headerwrap { position: relative; z-index: 200; }
.sts .sts-header { z-index: 200; }

/* The mobile panel must clear the fixed call bar (z-index 60) and Astra's
   scroll-to-top. Its wrapper is a stacking context at 200, so these values
   are relative to that. */
@media (max-width: 899px) {
  .sts .sts-nav { z-index: 20; }
  .sts .sts-nav-toggle { z-index: 21; }
}

/* Sub-page hero eyebrow — matches the homepage hero kicker, sized down to sit
   under the smaller sub-page headline without competing with it. */
.sts .sts-phero__kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sts-gold);
  margin: 0 0 12px;
}

/* Call bar column count follows how many buttons are actually set — clearing
   one label should leave the other spanning the full width, not sitting in a
   half-empty bar. */
.sts .sts-callbar--1up { grid-template-columns: 1fr; }
.sts .sts-callbar--2up { grid-template-columns: 1fr 1fr; }