:root {
  --purple-deep: #4c1d95;
  --purple: #7c3aed;
  --purple-bright: #a855f7;
  --lavender: #c4b5fd;
  --lavender-soft: #ede9fe;
  --yellow: #fcd34d;
  --bg: #1a0f2e;
  --surface: #2d1b4e;
  --text: #f3e8ff;
  --text-dim: #c4b5fd;
  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { width: 100%; overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- HERO VIDEO ---------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;      /* locked to "small" viewport — hero won't resize as
                          the mobile toolbar hides/shows during scroll */
  overflow: hidden;
  background: #000;
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.hero.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(26, 15, 46, 0.3) 80%,
    rgba(26, 15, 46, 0.6) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* ---------- TOP PILL (glassy lavender nav) ---------- */
.top-pill {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.5rem 0.65rem 0.5rem 1rem;
  background: rgba(221, 214, 254, 0.32);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(196, 181, 253, 0.55);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.18),
              inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: translate(-50%, -130%);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.top-pill.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.pill-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.pill-brand img {
  height: 46px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(124, 58, 237, 0.3));
}
.pill-brand:hover img { transform: scale(1.05); }

.pill-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin: 0;
  padding: 0;
}

.pill-links a {
  color: #1a1a1a;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.08rem;
  letter-spacing: 0.3px;
  padding: 0.3rem 0;
  position: relative;
  transition: color 0.25s ease;
}
.pill-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pill-links a:hover { color: var(--purple); }
.pill-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Services dropdown */
.pill-dropdown {
  position: relative;
}

.pill-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #1a1a1a;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.08rem;
  letter-spacing: 0.3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0;
  position: relative;
  transition: color 0.25s ease;
}
.pill-dropdown-trigger::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pill-dropdown-caret {
  width: 11px;
  height: 7px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pill-dropdown:hover .pill-dropdown-trigger,
.pill-dropdown.is-open .pill-dropdown-trigger {
  color: var(--purple);
}
.pill-dropdown:hover .pill-dropdown-trigger::after,
.pill-dropdown.is-open .pill-dropdown-trigger::after {
  transform: scaleX(1);
  transform-origin: left;
}
.pill-dropdown:hover .pill-dropdown-caret,
.pill-dropdown.is-open .pill-dropdown-caret {
  transform: rotate(180deg);
}

.pill-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 50%;
  margin: 0;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 180px;
  list-style: none;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(196, 181, 253, 0.55);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(124, 58, 237, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.25s ease,
              transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0s linear 0.25s;
  z-index: 110;
}

.pill-dropdown:hover .pill-dropdown-menu,
.pill-dropdown:focus-within .pill-dropdown-menu,
.pill-dropdown.is-open .pill-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.25s ease,
              transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0s;
}

.pill-dropdown-menu a {
  display: block;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.08rem;
  color: #1a1a1a;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.pill-dropdown-menu a:hover {
  background: rgba(196, 181, 253, 0.35);
  color: var(--purple);
}
.pill-dropdown-menu a::after { content: none; } /* don't double-underline */

.pill-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(196, 181, 253, 0.55);
  color: var(--purple);
  transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.pill-phone:hover {
  background: var(--purple-bright);
  color: #fff;
  transform: scale(1.08);
}

/* ---------- MOBILE HAMBURGER + MENU OVERLAY ----------
   Hidden by default — surfaced at tablet portrait and below. */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 150;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(196, 181, 253, 0.55);
  color: var(--purple-deep);
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 10px 26px rgba(124, 58, 237, 0.18);
  transition: background 0.25s ease, transform 0.25s ease;
}
.mobile-menu-toggle:hover { background: rgba(255, 255, 255, 0.95); transform: scale(1.05); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: none;
  flex-direction: column;
  align-items: center;
  /* flex-start + auto margins on the list (not center) so that when the
     menu is taller than the viewport (mobile landscape with the services
     expanded) it scrolls from the top instead of clipping both ends */
  justify-content: flex-start;
  gap: 1.5rem;
  background: rgba(196, 181, 253, 0.5);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 4rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;      /* swipes scroll the menu, not the page behind */
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open { display: flex; }

.mobile-menu-close {
  /* sticky (not fixed): the overlay's backdrop-filter makes it the
     containing block, so fixed would scroll away with the content */
  position: sticky;
  top: 1.5rem;
  align-self: flex-end;
  margin: -2.5rem -0.5rem -48px 0;   /* sit at 1.5rem from the corner without pushing the list down */
  z-index: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.6);
  color: var(--purple-deep);
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
}
.mobile-menu-close:hover { background: rgba(255, 255, 255, 0.85); }

.mobile-menu-list {
  list-style: none;
  margin: auto 0;                    /* centers when short, tops-out when scrolling */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.mobile-menu-list a {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--purple-deep);
  text-decoration: none;
  letter-spacing: 0.3px;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease;
}
.mobile-menu-list a:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--purple);
}

/* Services toggle (mobile) */
.mobile-menu-services { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.mobile-menu-services-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--purple-deep);
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.25s ease, color 0.25s ease;
}
.mobile-menu-services-toggle:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--purple);
}
.mobile-menu-caret {
  width: 14px;
  height: 9px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mobile-menu-services.is-open .mobile-menu-caret { transform: rotate(180deg); }

.mobile-menu-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.25s ease;
}
.mobile-menu-services.is-open .mobile-menu-sub {
  max-height: 220px;
  opacity: 1;
}
.mobile-menu-sub a {
  font-size: 1.35rem;
  padding: 0.35rem 1.1rem;
  color: var(--purple);
}

/* ---------- HERO STAGE (after video) ---------- */
.hero-scroll-wrap {
  position: relative;
  width: 100%;
  height: 200vh; /* hero pins for 100vh while icons fan out */
  height: 200svh;
}

.hero-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  background-color: #ffffff;
  background-image: url('aline_leaning_official/hero/hero-bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  padding-top: 100px; /* clear navbar */
}

/* Hero background video — desktop + laptop tiers only (≥ 1200 px).
   Hidden at every tier by default; the @media (min-width: 1200px) rule
   below opts desktop and laptop in. The video sits ON TOP of the still
   hero-bg.jpg — when it fades out (.is-faded), the still image is
   revealed underneath, then JS pauses the video to free bandwidth. */
.hero-bg-video {
  display: none;
}
@media (min-width: 1200px) {
  .hero-bg-video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.7s ease;
  }
  .hero-bg-video.is-faded { opacity: 0; }
  .hero-bg-video.is-stopped { display: none; }
}

.hero-text {
  padding: 0 2rem 1rem 5rem;
  max-width: 720px;
  justify-self: start;
  align-self: center;
  margin-top: -5.5rem;
  width: 100%;
  position: relative;
  z-index: 2;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-text .hero-h2 {
  margin-left: 0;
  margin-right: 0;
}

.hero-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(135deg, var(--purple-bright) 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-right: 0.3em;
  padding-bottom: 0.12em;
  position: relative;
  display: inline-block;
}

.has-sparkles {
  position: relative;
}

.sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity;
  animation: sparkleFlash 0.8s ease-in-out infinite;
}

@keyframes sparkleFlash {
  0%   { opacity: 0; transform: scale(0) rotate(75deg); }
  50%  { opacity: 1; transform: scale(var(--sparkle-scale, 1)) rotate(120deg); }
  100% { opacity: 0; transform: scale(0) rotate(150deg); }
}

.hero-logo {
  position: absolute;
  top: 0.75rem;      /* sits clear of the top pill nav */
  right: 1.5rem;
  width: clamp(130px, 14vw, 230px);
  height: auto;
  display: block;
  z-index: 4;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.95s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.95s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-stage.is-revealed .hero-logo {
  transition-delay: 0s;
  opacity: 1;
  transform: translateY(0);
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.9rem);
  line-height: 1.15;
  font-weight: 700;
  color: #0f0f14;
  letter-spacing: -1.5px;
  margin: 0 0 1.3rem;
}
/* ----- City swap carousel (cycles through service areas) ----- */
.hero-h1 .city-swap {
  position: relative;
  display: inline-grid;
  vertical-align: top;
  overflow: hidden;
  /* Reserve enough padding so the italic glyph overhang has gradient to clip */
  padding: 0.12em 0.95em 0.55em 0;
  margin-right: -0.05em;
}

.hero-h1 .city-word {
  grid-column: 1;
  grid-row: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(120%);
  will-change: transform, opacity;
  background: linear-gradient(135deg, var(--purple-bright) 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  /* Extend so the background-clip:text gradient covers the italic overhang */
  padding-right: 0.25em;
}

@keyframes cityIn {
  0%   { opacity: 0; transform: translateY(120%); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes cityOut {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-120%); }
}

.hero-h1 .city-word.is-entering {
  animation: cityIn 0.7s cubic-bezier(0.5, 0.0, 0.1, 1) forwards;
}
.hero-h1 .city-word.is-leaving {
  animation: cityOut 0.7s cubic-bezier(0.5, 0.0, 0.1, 1) forwards;
}

.hero-h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: #3a3a44;
  margin: 0 0 2.2rem;
  line-height: 1.55;
  max-width: 520px;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.hero-quote-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 2.1rem;
  background: rgba(221, 214, 254, 0.42);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  color: var(--purple-deep);
  text-decoration: none;
  border: 1px solid rgba(196, 181, 253, 0.6);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.5px;
  box-shadow: 0 12px 32px rgba(124, 58, 237, 0.18),
              inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* ----- Book Now button: pearl-pill + sweep-shine ----- */
.hero-book-btn {
  position: relative;
  display: inline-block;
  border-radius: 999px;
  background-color: #6d28d9;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  box-shadow:
    inset 0  0.3rem 0.9rem rgba(255, 255, 255, 0.30),
    inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.40),
    inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.45),
    0    0.9rem  0.9rem -0.6rem rgba(46, 16, 101, 0.55);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s ease;
}

.hero-book-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.85rem;
  border-radius: inherit;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.3px;
  overflow: hidden;
}

/* Pearl-style glassy highlight at the top */
.hero-book-inner::before {
  content: "";
  position: absolute;
  left: -15%;
  right: -15%;
  top: -100%;
  bottom: 35%;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.20);
  transition: transform 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

/* Pearl-style inner top sheen */
.hero-book-inner::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 8%;
  bottom: 55%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0) 80%);
  transition: transform 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

/* Diagonal sweep shine */
.hero-book-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 62%,
    transparent 100%);
  transform: translateX(-120%);
  transition: transform 0.95s cubic-bezier(0.3, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

.hero-book-btn:hover .hero-book-sweep {
  transform: translateX(120%);
}

.hero-book-btn:hover {
  transform: translateY(-6px) scale(1.08);
  box-shadow:
    inset 0  0.3rem 0.5rem rgba(255, 255, 255, 0.40),
    inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.45),
    inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.55),
    0    1.4rem  1.7rem -0.6rem rgba(46, 16, 101, 0.65);
}

.hero-book-btn:hover .hero-book-inner::before {
  transform: translateY(-6%);
}

.hero-book-btn:hover .hero-book-inner::after {
  opacity: 0.55;
  transform: translateY(6%);
}

.hero-book-btn:active {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    inset 0  0.3rem 0.5rem rgba(255, 255, 255, 0.45),
    inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.55),
    inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.45),
    0    0.8rem  1rem -0.5rem rgba(46, 16, 101, 0.55);
}

.hero-book-star {
  width: 22px;
  height: 22px;
  fill: #ffffff;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.hero-book-text {
  position: relative;
  z-index: 2;
}
.hero-quote-cta:hover {
  transform: translateY(-6px) scale(1.05);
  background: rgba(221, 214, 254, 0.6);
  box-shadow: 0 26px 50px rgba(124, 58, 237, 0.35),
              inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.hero-quote-cta:active {
  transform: translateY(-2px) scale(1.02);
}
.hero-quote-arrow {
  transition: transform 0.3s ease;
  display: inline-block;
}
.hero-quote-cta:hover .hero-quote-arrow {
  transform: translateX(4px);
}

/* Big gradient phone number at the bottom of the left column */
.hero-phone-big {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -1px;
  text-decoration: none;
  background: linear-gradient(135deg, var(--purple-bright) 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-right: 0.18em;
  margin-top: 0.3rem;
  transition: transform 0.3s ease;
}
.hero-phone-big:hover { transform: translateX(3px); }

/* Sweep-fade in animations — triggered when .is-revealed is added */
.hero-h1,
.hero-h2,
.hero-quote-cta,
.hero-book-btn,
.hero-phone-big {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.95s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.95s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-stage.is-revealed .hero-h1          { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.hero-stage.is-revealed .hero-h2          { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
.hero-stage.is-revealed .hero-quote-cta   { transition-delay: 0.65s; opacity: 1; transform: translateY(0); }
.hero-stage.is-revealed .hero-book-btn    { transition-delay: 0.80s; opacity: 1; transform: translateY(0); }
.hero-stage.is-revealed .hero-phone-big   { transition-delay: 1.00s; opacity: 1; transform: translateY(0); }

/* Right side: video + book-your-cleaning button below */
.hero-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0;
  width: 100%;
  height: 100%;
}

.hero-video-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}


.hero-stage.is-revealed .hero-video-wrap {
  transition-delay: 0.35s;
  opacity: 1;
  transform: translateX(0);
}

.hero-stage.is-revealed .hero-video-wrap {
  transition-delay: 0.35s;
  opacity: 1;
  transform: translateX(0);
}

.hero-side-video {
  width: 100%;
  max-width: 815px;
  max-height: 90vh;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  background: transparent;
  position: relative;
  z-index: 2;
}

/* ----- Hero CTA: "Book your cleaning" (below the video on the right) ----- */
.hero-cta {
  position: relative;
  display: block;
  width: 320px;
  max-width: 80%;
  margin-top: 1.5rem;
  padding: 1rem 2rem;
  text-decoration: none;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(20px);
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-stage.is-revealed .hero-cta {
  transition-delay: 1.1s;
  opacity: 1;
  transform: translateY(0);
}

.hero-cta-shape {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 50%, #ddd6fe 100%);
  border-radius: 999px;
  opacity: 0;
  box-shadow:
    0 25px 60px rgba(196, 181, 253, 0.45),
    inset 0 0 0 2px rgba(255, 255, 255, 0.5),
    inset 0 -10px 30px rgba(124, 58, 237, 0.15);
  transition: opacity 0.4s ease,
              top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              bottom 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.hero-cta:hover .hero-cta-shape {
  opacity: 1;
  top: 1.4rem;
  right: 2.2rem;
  bottom: 1.4rem;
  left: 2.2rem;
}

.hero-cta-img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 15px 30px rgba(76, 29, 149, 0.45));
  transform-origin: center;
  transition: filter 0.4s ease, transform 0.4s ease;
  animation: ctaPulse 2.2s ease-in-out infinite;
}

.hero-cta:hover .hero-cta-img {
  animation: none;
  transform: scale(1);
  filter: drop-shadow(0 20px 38px rgba(76, 29, 149, 0.6));
}

@keyframes ctaPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 15px 30px rgba(76, 29, 149, 0.45));
  }
  50% {
    transform: scale(1.06);
    filter: drop-shadow(0 22px 45px rgba(196, 181, 253, 0.75))
            drop-shadow(0 0 18px rgba(196, 181, 253, 0.4));
  }
}

/* ---------- SHOWCASE (cards + alpha girl) ---------- */
/* ---------- HERO ICONS (hexagon fanning out on scroll) ---------- */
.hero-icons {
  --radius: 0px;
  --scale: 1;
  --fade: 0;
  position: absolute;
  top: 48%;
  left: 68%;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-icon {
  position: absolute;
  top: 0;
  left: 0;
  width:  calc(clamp(56px, 5.5vw, 90px) * var(--scale, 1));
  height: calc(clamp(56px, 5.5vw, 90px) * var(--scale, 1));
  opacity: var(--fade);
  transform:
    translate(-50%, -50%)
    translate(
      calc(cos(var(--angle, 0deg)) * var(--radius)),
      calc(sin(var(--angle, 0deg)) * var(--radius))
    );
  cursor: pointer;
  pointer-events: auto;
  will-change: width, height, transform, opacity;
}

.hero-icon::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(221, 214, 254, 0.48) 0%, rgba(196, 181, 253, 0.32) 100%);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 14px 32px rgba(124, 58, 237, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  z-index: 0;
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.hero-icon:hover::before {
  background: linear-gradient(135deg, rgba(237, 233, 254, 0.68) 0%, rgba(196, 181, 253, 0.55) 100%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 46px 10px rgba(196, 181, 253, 0.7),
    0 22px 52px rgba(124, 58, 237, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.hero-icon img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  z-index: 1;
  filter: drop-shadow(0 10px 24px rgba(76, 29, 149, 0.35));
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.35s ease;
}

.hero-icon:hover img {
  filter: drop-shadow(0 20px 34px rgba(76, 29, 149, 0.6));
}

.hero-icon:nth-child(1) { --angle:  -90deg; z-index: 10; } /* Star — north / front */
.hero-icon:nth-child(2) { --angle:  -30deg; }
.hero-icon:nth-child(3) { --angle:   30deg; }
.hero-icon:nth-child(4) { --angle:   90deg; }
.hero-icon:nth-child(5) { --angle:  150deg; }
.hero-icon:nth-child(6) { --angle:  210deg; }

/* ---------- ZOOM PARALLAX ---------- */
.zoom-parallax {
  position: relative;
  width: 100%;
  height: 300vh;
  background: #ffffff;
}

.zoom-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}

.zoom-whiteout {
  --veil-alpha: 0;
  --veil-blur: 0px;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--veil-alpha));
  backdrop-filter: blur(var(--veil-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--veil-blur)) saturate(1.4);
  pointer-events: none;
  z-index: 99;
}

.zoom-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoom-inner {
  --scale: 1;
  --bw: 25; /* base width in vw */
  --bh: 25; /* base height in vh */
  --bt: 0;  /* base top offset in vh */
  --bl: 0;  /* base left offset in vw */
  position: relative;
  width:  calc(var(--bw) * 1vw * var(--scale));
  height: calc(var(--bh) * 1vh * var(--scale));
  top:    calc(var(--bt) * 1vh * var(--scale));
  left:   calc(var(--bl) * 1vw * var(--scale));
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(76, 29, 149, 0.18);
}

.zoom-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zoom-text {
  --text-scale: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  display: flex;
  align-items: baseline;
  gap: calc(0.35em + 0.55em * (var(--text-scale) - 1));
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: calc(clamp(2.5rem, 6.5vw, 5.5rem) * var(--text-scale));
  font-weight: 700;
  color: #0f0f14;
  letter-spacing: calc(-1.5px + 14px * (var(--text-scale) - 1));
  line-height: 1;
}

.zoom-text span {
  display: inline-block;
  opacity: 0;
  filter: blur(20px) brightness(0.6);
  transform: translateY(20px) scale(0.95) rotateX(-15deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: filter, transform, opacity;
}

.zoom-text-accent {
  background: linear-gradient(135deg, var(--purple-bright) 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  /* Extend the box so the background-clip:text gradient covers the
     italic overhang on the right AND the descender on the bottom. */
  padding: 0 0.25em 0.22em 0;
  margin: 0 -0.12em -0.22em 0;
}


.zoom-frame--1 .zoom-inner { --bw: 35; --bh: 30; --bt: -30;   --bl:   5; }
.zoom-frame--2 .zoom-inner { --bw: 20; --bh: 45; --bt: -10;   --bl: -25; }
.zoom-frame--3 .zoom-inner { --bw: 25; --bh: 25; --bt:   0;   --bl:  27.5; }
.zoom-frame--4 .zoom-inner { --bw: 20; --bh: 25; --bt:  27.5; --bl:   5; }
.zoom-frame--5 .zoom-inner { --bw: 30; --bh: 25; --bt:  27.5; --bl: -22.5; }
.zoom-frame--6 .zoom-inner { --bw: 15; --bh: 15; --bt:  22.5; --bl:  25; }

.showcase {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 540px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.22), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(168, 85, 247, 0.15), transparent 55%),
    var(--bg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.showcase-card {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
  height: 100%;
  opacity: 0;
  transition: opacity 0.55s ease,
              transform 0.95s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.showcase-card--left  { transform: translateX(50%); }
.showcase-card--right { transform: translateX(-50%); }

.showcase.is-visible .showcase-card {
  opacity: 0.75;
  transform: translateX(0);
}

.showcase.is-visible .showcase-card--left  { transition-delay: 0.15s, 0.15s; }
.showcase.is-visible .showcase-card--right { transition-delay: 0.15s, 0.15s; }

/* Hovered card becomes fully visible; non-hovered stays at 25% */
.showcase.is-visible .showcase-card:hover { opacity: 1; }

.showcase-image {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.5s ease;
  will-change: transform;
}

.showcase-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 15, 46, 0.25) 0%,
    rgba(26, 15, 46, 0.55) 100%
  );
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.showcase-card:hover .showcase-image {
  transform: scale(1.08);
  filter: brightness(1.1) saturate(1.15);
}

/* Parallax: image shifts toward the center on hover (away from the edge) */
.showcase-card--left:hover .showcase-image {
  transform: scale(1.08) translateX(24px);
}
.showcase-card--right:hover .showcase-image {
  transform: scale(1.08) translateX(-24px);
}

.showcase-card:hover::after {
  opacity: 0;
}

.showcase-title-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Opus-style paged showcase — hidden everywhere by default;
   only the mobile-portrait media query unhides it. */
.opus-stage { display: none; }

/* Mobile-portrait hero swaps "Get a Free Quote" → "Free Quote";
   parallax strip is hidden by default at every tier above 480 px. */
.hero-quote-text-mobile { display: none; }
.hero-parallax { display: none; }

/* V3 (glass) variant elements — hidden everywhere by default;
   only surface inside .hero-stage.hero-mode-v3 (mobile portrait).
   The full-hero .hero-v3-glass overlay was removed; the glass texture
   now lives only on the .hero-v3-quote button itself. */
/* V3 (glass) elements are hidden globally. The show rules ONLY live
   inside @media (max-width: 480px) below, so even if the .hero-mode-v3
   class persists when the viewport changes (e.g., rotate to landscape)
   none of the v3 surfaces leak into other tiers. */
.hero-v3-glass,
.hero-v3-quote,
.hero-v3-cards { display: none !important; }

/* Free Quote button gradient sweep — declared globally so the
   animation is always in scope when the mobile-portrait styles
   apply it. */
@keyframes heroV3Glow {
  0%   { background-position: 14% 0%; }
  50%  { background-position: 87% 100%; }
  100% { background-position: 14% 0%; }
}

/* "Aline Bubble" color font — the brand bubble artwork as real glyphs
   (A C E G I L N + space, upper/lowercase). Chromium/Firefox take the
   COLRv1 flavor, Safari/iOS takes the OT-SVG flavor; browsers with
   neither skip both sources and fall through to the next font-family,
   so ALWAYS list a fallback after "Aline Bubble". */
@font-face {
  font-family: "Aline Bubble";
  src: url("aline_leaning_official/fonts/AlineBubble-COLR.woff2") format("woff2") tech(color-COLRv1),
       url("aline_leaning_official/fonts/AlineBubble-SVG.woff2") format("woff2") tech(color-SVG);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.showcase-card:hover .showcase-title-wrapper {
  transform: translate(-50%, -50%) scale(1.35);
}

.showcase-title {
  font-family: var(--font-display);
  font-size: 4.5vw;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 0.9;
  margin: 0;
  white-space: nowrap;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: color 0.5s ease, text-shadow 0.5s ease;
}

.showcase-card:hover .showcase-title {
  background: linear-gradient(135deg, var(--purple-bright) 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}

/* Hidden source video — used only by canvas */
.girl-src {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  top: 0;
  left: 0;
}

.girl-canvas {
  --parallax-y: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + var(--parallax-y)));
  z-index: 10;
  height: 95%;
  width: auto;
  max-width: 60%;
  pointer-events: none;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.showcase.is-visible .girl-canvas {
  transition-delay: 0.35s;
  opacity: 1;
}

/* ---------- GALLERY: Willem-style word reveal → 3D carousel ---------- */
.gallery {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1rem;
}

.gallery-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Phase 1: headline with split reveal box --- */
.gallery-headline {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 12rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -3px;
  color: #0f0f14;
  white-space: nowrap;
  position: relative;
  z-index: 5;
}

.gallery-word {
  display: inline-flex;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.2em;          /* room for descenders (g, y) clipped by overflow */
  margin-bottom: -0.2em;          /* keep the visual baseline unchanged */
  transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1);
  will-change: transform;
}

.gallery-letter {
  display: inline-block;
  /* 130% pushes the letter fully below the .gallery-word's padding-box
     (which is line-height + 0.2em padding-bottom for descender clearance). */
  transform: translateY(130%);
  transition: transform 1.1s cubic-bezier(0.7, 0, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 0.05s);
  will-change: transform;
}

.gallery-headline.is-revealed .gallery-letter {
  transform: translateY(0);
}

/* tiny optical spread once the box is open */
.gallery-headline.is-split .gallery-word--start { transform: translateX(-0.04em); }
.gallery-headline.is-split .gallery-word--end   { transform: translateX(0.04em); }

.gallery-reveal-box {
  position: relative;
  width: 0;
  height: 0.92em;
  overflow: hidden;
  border-radius: 6px;
  flex-shrink: 0;
  transition: width 1.2s cubic-bezier(0.7, 0, 0.2, 1),
              height 1.2s cubic-bezier(0.7, 0, 0.2, 1),
              transform 1.2s cubic-bezier(0.7, 0, 0.2, 1),
              border-radius 1s ease,
              opacity 0.5s ease;
  will-change: width, height, transform;
}

.gallery-headline.is-split .gallery-reveal-box {
  width: 1.8em;
}

.gallery-reveal-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Stack order so image 1 sits on top, then 2, 3, 4 underneath in numbered order */
.gallery-reveal-img--1 { z-index: 4; }
.gallery-reveal-img--2 { z-index: 3; }
.gallery-reveal-img--3 { z-index: 2; }
.gallery-reveal-img--4 { z-index: 1; }

.gallery-reveal-img.is-hidden { opacity: 0; }

/* Expansion phase: words sweep off-screen, reveal-box grows to carousel slide size */
.gallery-headline.is-expanded .gallery-word--start {
  transform: translateX(-100vw);
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.gallery-headline.is-expanded .gallery-word--end {
  transform: translateX(100vw);
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.gallery-headline.is-expanded .gallery-reveal-box {
  width: min(40vw, 460px);
  height: min(56vh, 520px);
  border-radius: 22px;
  box-shadow: 0 25px 60px rgba(46, 16, 101, 0.25);
}

/* Hand-off: fade the reveal-box AND drop the whole headline out of the pointer pipeline
   so the carousel slide underneath can receive hover/move events. */
.gallery-headline.is-handed-off {
  pointer-events: none;
}
.gallery-headline.is-handed-off .gallery-reveal-box {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* --- Phase 2: carousel --- */
.gallery-carousel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
  z-index: 3;
}

.gallery-carousel.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.gallery-carousel-track {
  position: relative;
  width: 100%;
  height: min(60vh, 560px);
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(40vw, 460px);
  height: min(56vh, 520px);
  transform-origin: center center;
  transform:
    translate(-50%, -50%)
    translateX(var(--slide-x, 0))
    scale(var(--slide-scale, 0.7))
    rotateY(var(--slide-rotate, 0deg));
  opacity: var(--slide-opacity, 0);
  filter: blur(var(--slide-blur, 4px));
  z-index: var(--slide-z, 1);
  visibility: var(--slide-visibility, hidden);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.6s ease,
              filter 0.6s ease;
  border-radius: 22px;
  overflow: hidden;
  cursor: ew-resize;
  background: #f5f3ff;
  box-shadow: 0 25px 60px rgba(46, 16, 101, 0.25);
}

.gallery-slide.is-no-dirty { cursor: default; }

.gallery-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.gallery-slide-clean {
  z-index: 2;
  clip-path: inset(0 0 0 var(--reveal, 0%));
}

.gallery-slide-dirty {
  z-index: 1;
}

.gallery-slide-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.85);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  left: var(--reveal, 0%);
  transform: translateX(-1px);
}

.gallery-slide-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Always show the slider faintly on the centered slide so the user knows it's interactive */
.gallery-slide.is-center:not(.is-no-dirty) .gallery-slide-divider {
  opacity: 0.55;
}
.gallery-slide.is-center:not(.is-no-dirty):hover .gallery-slide-divider {
  opacity: 1;
}

.gallery-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(124, 58, 237, 0.25);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  color: var(--purple-deep);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  z-index: 30;
  transition: transform 0.25s ease, background 0.25s ease;
  box-shadow: 0 8px 20px rgba(46, 16, 101, 0.15);
}

.gallery-carousel-btn:hover {
  transform: translateY(-50%) scale(1.08);
  background: rgba(255, 255, 255, 1);
}

.gallery-carousel-btn--prev { left: 1.5rem; }
.gallery-carousel-btn--next { right: 1.5rem; }

/* ---------- VAN BANNER ---------- */
.van-banner {
  width: 100%;
  background: #ffffff;
  padding: 2rem 2rem 4rem;
  display: flex;
  justify-content: center;
}

.van-banner-img {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
}

/* ---------- TESTIMONIALS ---------- */
.testimonials {
  background: #f8f7fb;
  padding: 6rem 1rem 7rem;
  position: relative;
  overflow: hidden;
}

.testimonials-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.testimonials-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 3.5rem;
}

.testimonials-badge {
  display: inline-block;
  border: 1px solid rgba(124, 58, 237, 0.25);
  background: rgba(221, 214, 254, 0.35);
  color: var(--purple-deep);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.845rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.testimonials-title {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 4vw, 3.325rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  color: #0f0f14;
  margin: 1.25rem 0 0.75rem;
  line-height: 1.05;
}

.testimonials-sub {
  color: #555562;
  font-size: 1.175rem;
  line-height: 1.55;
  margin: 0;
}

.testimonials-grid {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  max-height: 740px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.testimonials-col {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 360px;
}

.testimonials-col--md { display: none; }
.testimonials-col--lg { display: none; }

@media (min-width: 760px) {
  .testimonials-col--md { display: block; }
}
@media (min-width: 1024px) {
  .testimonials-col--lg { display: block; }
}

.testimonials-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: testimonialScroll var(--scroll-duration, 34s) linear infinite;
  will-change: transform;
}

@keyframes testimonialScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.testimonials-track:hover {
  animation-play-state: paused;
}

.testimonial-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  padding: 1.75rem 1.65rem;
  box-shadow: 0 4px 12px rgba(46, 16, 101, 0.05);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease;
  cursor: default;
}

.testimonial-card:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 25px 50px -12px rgba(76, 29, 149, 0.18),
              0 10px 20px -5px rgba(0, 0, 0, 0.06);
}

.testimonial-text {
  margin: 0;
  color: #4a4a55;
  line-height: 1.55;
  font-size: 1.105rem;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.3rem;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-bright) 0%, #c4b5fd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.075rem;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.25);
}

.testimonial-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.testimonial-name {
  font-style: normal;
  font-weight: 600;
  font-size: 1.105rem;
  color: #111118;
  line-height: 1.2;
}

.testimonial-role {
  font-size: 0.945rem;
  color: #6f6f7a;
  margin-top: 2px;
}

/* ---------- ABOUT (parallax slide-in from opposite sides) ---------- */
.about {
  position: relative;
  width: 100%;
  background: #ffffff;
  padding: 6rem 1.5rem 7rem;
  overflow: hidden;
}

.about-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
}

@media (max-width: 800px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Two-layer wrappers: outer handles entrance (slow transition), inner handles
   scroll-tied parallax (no transition — snaps every rAF tick). Splitting them
   prevents the transitions from fighting each other and removes jitter. */

.about-image-wrap,
.about-copy {
  position: relative;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.about-image-wrap { transform: translate3d(-60px, 0, 0); }
.about-copy       { transform: translate3d(60px, 0, 0); transition-delay: 0.15s; }

.about.is-visible .about-image-wrap,
.about.is-visible .about-copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Inner parallax layer — instant transform, no transition */
.about-image-parallax,
.about-copy-parallax {
  --parallax: 0px;
  display: block;
  transform: translate3d(var(--parallax), 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Image cell: the parallax inner is absolute so the image doesn't drive the
   row height — the text block does. The image then fills whatever height
   the text gives the row. */
.about-image-wrap     { position: relative; }
.about-image-parallax {
  position: absolute;
  inset: 0;
}

.about-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(76, 29, 149, 0.18);
}

@media (max-width: 800px) {
  /* On mobile (single column) the image needs its own height back. */
  .about-image-wrap     { aspect-ratio: 4 / 3; }
  .about-image-parallax { position: relative; inset: auto; height: 100%; }
}

.about-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--purple-bright);
  margin-bottom: 1.1rem;
}

.about-title {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 4.2vw, 3.325rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.05;
  color: #0f0f14;
  margin: 0 0 1.4rem;
}
.about-title span {
  background: linear-gradient(135deg, var(--purple-bright) 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  padding-right: 0.12em;
}

.about-text {
  color: #4a4358;
  font-size: 1.175rem;
  line-height: 1.6;
  margin: 0;
}

/* ---------- CONTACT ---------- */
.contact {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(196, 181, 253, 0.35), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(221, 214, 254, 0.45), transparent 55%),
    #f5f3ff;
  padding: 5rem 2rem 3rem;
  overflow: hidden;
}

.contact-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.contact-title {
  font-family: var(--font-display);
  font-size: clamp(2.525rem, 5vw, 3.725rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 1rem;
  color: #1a0f2e;
  letter-spacing: -1px;
}
.contact-title span {
  background: linear-gradient(135deg, var(--purple-bright) 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  /* Extend the box so the gradient covers the italic overhang on the right */
  padding-right: 0.2em;
  margin-right: -0.08em;
}

.contact-sub {
  text-align: center;
  color: #4a4358;
  font-size: 1.175rem;
  line-height: 1.5;
  max-width: 520px;
  margin: 0 auto 3.5rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.contact-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(196, 181, 253, 0.45);
  border-radius: 18px;
  padding: 1.8rem 1.5rem;
  text-align: center;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease,
              background 0.3s ease,
              box-shadow 0.4s ease;
}

.contact-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 58, 237, 0.5);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 50px rgba(124, 58, 237, 0.18);
}

.contact-label {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.905rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--purple-bright);
  margin-bottom: 0.85rem;
}

.contact-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.225rem;
  line-height: 1.4;
  color: #1a0f2e;
  margin: 0 0 0.5rem;
}

.contact-meta {
  font-size: 0.975rem;
  color: #6b6478;
  margin: 0;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(196, 181, 253, 0.45);
  border-radius: 22px;
  padding: 2.2rem;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 20px 60px rgba(124, 58, 237, 0.10);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(196, 181, 253, 0.45);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  color: #1a0f2e;
  font-family: var(--font-body);
  font-size: 1.125rem;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
  appearance: none;
  -webkit-appearance: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(124, 58, 237, 0.45);
}

.contact-form select {
  cursor: pointer;
  color: rgba(124, 58, 237, 0.7);
  /* Custom lavender chevron (since appearance:none removed the native one) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 12px 8px;
  padding-right: 2.6rem;
}
.contact-form select:valid { color: #1a0f2e; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--purple-bright);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.3);
}

.contact-form textarea {
  grid-column: 1 / -1;
  resize: vertical;
  min-height: 110px;
  font-family: var(--font-body);
}

.contact-form button {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--purple-bright), var(--purple));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 1rem 2.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  justify-self: start;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(124, 58, 237, 0.45);
}

/* ---------- ESTIMATOR (multi-step quote tool in contact section) ---------- */
.contact-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0 2rem;
  color: var(--purple-deep);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}
.contact-divider::before,
.contact-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(124, 58, 237, 0.25);
}

.estimator-wrap {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(196, 181, 253, 0.45);
  border-radius: 22px;
  padding: 1.75rem;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 20px 60px rgba(124, 58, 237, 0.10);
  text-align: left;
}

.est-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.est-header-left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.est-header-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #ddd6fe;
  color: #6d28d9;
  display: grid;
  place-items: center;
  font-size: 17px;
}
.est-header-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: #1a0f2e;
}
.est-step-counter {
  margin: 0;
  font-size: 0.945rem;
  color: #6b6478;
}

.est-progress-bar {
  height: 4px;
  background: rgba(196, 181, 253, 0.35);
  border-radius: 2px;
  overflow: hidden;
}
.est-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple-bright), var(--purple));
  transition: width 0.3s ease;
}

.est-content {
  background: #ffffff;
  border: 1px solid rgba(196, 181, 253, 0.4);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 1rem;
  min-height: 320px;
}

.est-step-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.325rem;
  font-weight: 600;
  color: #1a0f2e;
}
.est-step-sub {
  margin: 0 0 1rem;
  font-size: 1.045rem;
  color: #6b6478;
}

.est-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.est-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; }
.est-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; }
.est-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }

.est-card {
  background: #ffffff;
  border: 1px solid rgba(196, 181, 253, 0.5);
  border-radius: 12px;
  padding: 0.85rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3rem;
  min-height: 92px;
  font-family: var(--font-body);
}
.est-card:hover {
  border-color: rgba(124, 58, 237, 0.55);
  background: #faf8ff;
  transform: translateY(-1px);
}
.est-card i {
  font-size: 24px;
  color: #6b6478;
}
.est-card.selected {
  border: 2px solid var(--purple);
  background: #f3eeff;
  padding: calc(0.85rem - 1px) calc(0.6rem - 1px);
}
.est-card.selected i,
.est-card.selected .est-card-label,
.est-card.selected .est-card-sub {
  color: var(--purple-deep);
}
.est-card-label {
  font-family: var(--font-display);
  font-size: 1.045rem;
  font-weight: 500;
  color: #1a0f2e;
}
.est-card-sub {
  font-size: 0.865rem;
  color: #6b6478;
}

.est-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}
/* Skip sits next to Continue on the right (auto margin pushes it
   away from the Back button on the left). */
#skip-btn {
  margin-left: auto;
  margin-right: 0.5rem;
}
.est-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.045rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.55rem 1.15rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.est-nav-btn--ghost {
  background: transparent;
  border: 1px solid rgba(196, 181, 253, 0.5);
  color: var(--purple-deep);
}
.est-nav-btn--ghost:hover {
  background: #f5f3ff;
  border-color: var(--purple);
}
.est-nav-btn--primary {
  background: linear-gradient(135deg, var(--purple-bright), var(--purple));
  border: 1px solid transparent;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.25);
}
.est-nav-btn--primary:hover { transform: translateY(-1px); }
/* Disabled state — shown when the current step hasn't been answered */
.est-nav-btn--primary:disabled,
.est-nav-btn--primary[aria-disabled="true"] {
  background: #e5e1f5;
  color: #b8b3c9;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Estimator inputs (contact step) */
.estimator-wrap input,
.estimator-wrap textarea {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(196, 181, 253, 0.45);
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  color: #1a0f2e;
  font-family: var(--font-body);
  font-size: 1.125rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.estimator-wrap input:focus,
.estimator-wrap textarea:focus {
  border-color: var(--purple-bright);
  box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.3);
}

/* Attention pulse when the "Other" reveal input first appears */
@keyframes estInputGlow {
  0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);   border-color: rgba(196, 181, 253, 0.45); }
  50%  { box-shadow: 0 0 0 8px rgba(167, 139, 250, 0.55); border-color: var(--purple-bright); }
  100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);   border-color: rgba(196, 181, 253, 0.45); }
}
.estimator-wrap input.is-glow {
  animation: estInputGlow 0.85s ease-in-out 2;
}

/* Required-field error feedback (shake + red ring) */
@keyframes estInputShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}
.estimator-wrap input.is-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
  animation: estInputShake 0.45s ease;
}

.est-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--purple-bright), var(--purple));
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 0.95rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.est-submit-btn:hover { transform: translateY(-1px); }

.est-thank {
  text-align: center;
  padding: 2rem 1rem;
}
.est-thank-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #dcfce7;
  color: #047857;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 28px;
}
.est-thank-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.525rem;
  font-weight: 600;
  color: #1a0f2e;
}
.est-thank-body {
  margin: 0 0 1.2rem;
  font-size: 1.075rem;
  color: #6b6478;
  line-height: 1.6;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.est-thank-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.945rem;
  color: #6b6478;
  background: #f5f3ff;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
}

@media (max-width: 640px) {
  .est-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .est-grid-3 { grid-template-columns: 1fr 1fr; }
  .est-grid-5 { grid-template-columns: repeat(3, 1fr); }
}

.powered-by {
  text-align: center;
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: #8b85a0;
  letter-spacing: 0.4px;
  display: block;
}

.powered-by-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #8b85a0;
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
}
.powered-by-link span {
  color: var(--purple);
  font-weight: 600;
  transition: color 0.25s ease;
}
.powered-by-link:hover {
  color: var(--purple-deep);
  transform: translateY(-1px);
}
.powered-by-link:hover span {
  color: var(--purple-bright);
}

.powered-by-logo {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

.subpage-footer .powered-by {
  margin-top: 0.4rem;
}

.contact-footer {
  text-align: center;
  color: #6b6478;
  font-size: 0.975rem;
  margin: 3rem 0 0;
  letter-spacing: 0.5px;
}

.contact-mascot {
  position: absolute;
  right: 1.5rem;
  bottom: 0;
  width: 22%;
  max-width: 320px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 20px 35px rgba(76, 29, 149, 0.45));
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .hero-text { padding: 1rem 2rem 1rem 2.5rem; }
  .hero-media { padding: 1rem 2rem 1rem 1rem; }
}

@media (max-width: 800px) {
  .top-pill {
    gap: 1.1rem;
    padding: 0.4rem 0.5rem 0.4rem 0.8rem;
    width: calc(100% - 1.5rem);
    max-width: 480px;
    justify-content: space-between;
  }
  .pill-brand img { height: 38px; }
  .pill-links { gap: 1rem; }
  .pill-links a { font-size: 0.85rem; }
  .pill-phone { width: 34px; height: 34px; }

  .hero-stage {
    grid-template-columns: 1fr;
    padding-top: 110px;
    gap: 1.5rem;
  }
  .hero-text {
    padding: 1rem 1.5rem;
    justify-self: stretch;
    text-align: center;
  }
  .hero-h2 { margin-left: auto; margin-right: auto; }
  .hero-media { padding: 0 1.5rem 2rem; }
  .hero-side-video { transform: scale(1); }

  .showcase { height: 70vh; min-height: 460px; }
  .showcase-title { font-size: 9vw; }
  .girl-canvas { height: 60%; max-width: 80%; }

  .contact { padding: 4rem 1.25rem 2rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 1rem; }
  .contact-form { grid-template-columns: 1fr; padding: 1.5rem; }
  .contact-mascot { width: 38%; max-width: 200px; right: 0.5rem; opacity: 0.85; }
}

/* Mobile portrait — lift the contact mascot off the bottom edge */
@media (max-width: 480px) {
  .contact-mascot { bottom: 4rem; }
}

@media (max-width: 500px) {
  .pill-links { gap: 0.75rem; }
  .pill-links a { font-size: 0.8rem; }
  .pill-brand img { height: 32px; }
}


/* ============================================================ */
/* ---------- SUBPAGES (residential.html / commercial.html) ---------- */

body.subpage {
  background: #ffffff;
  color: #1a0f2e;
}

.subpage-nav {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 1.4rem 0.5rem 0.65rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(196, 181, 253, 0.55);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.18),
              inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transform: translateX(-50%);
}

.subpage-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.subpage-brand-link img {
  height: 46px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(124, 58, 237, 0.3));
  transition: transform 0.3s ease;
}
.subpage-brand-link:hover img { transform: scale(1.05); }

.subpage-back {
  color: var(--purple-deep);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.25s ease, transform 0.25s ease;
}
.subpage-back:hover {
  color: var(--purple-bright);
  transform: translateX(-2px);
}

/* Full-width banner with image + overlay */
.subpage-banner {
  position: relative;
  width: 100%;
  height: clamp(55vh, 60vw, 85vh);
  overflow: hidden;
}

.subpage-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.subpage-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.18) 0%,
    transparent 35%,
    rgba(0, 0, 0, 0.55) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem clamp(1.5rem, 6vw, 5rem) 4rem;
  color: #ffffff;
}

.subpage-banner-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.975rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1rem;
}

.subpage-banner-overlay h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1;
  margin: 0;
  color: #ffffff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
.subpage-banner-overlay h1 span {
  background: linear-gradient(135deg, #ddd6fe 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  padding-right: 0.18em;
  text-shadow: none;            /* h1's dark shadow was leaking through */
  /* Outline only the outer silhouette (drop-shadow respects alpha, so the
     inner counters of "p", "g", "d", "o" don't get a ring inside them). */
  filter:
    drop-shadow( 1.5px  0    0 rgba(255, 255, 255, 0.55))
    drop-shadow(-1.5px  0    0 rgba(255, 255, 255, 0.55))
    drop-shadow( 0    1.5px  0 rgba(255, 255, 255, 0.55))
    drop-shadow( 0   -1.5px  0 rgba(255, 255, 255, 0.55));
}

.subpage-banner-sub {
  margin: 1.2rem 0 0;
  font-size: 1.225rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  max-width: 560px;
}

/* Services section with neon cards */
.services-section {
  background: #f8f7fb;
  padding: 6rem 1.5rem 7rem;
}

.services-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 4rem;
}
.services-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 4.5vw, 3.425rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  color: #1a0f2e;
  margin: 0 0 0.8rem;
  line-height: 1.05;
}
.services-header h2 span {
  background: linear-gradient(135deg, var(--purple-bright) 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  padding-right: 0.18em;
}
.services-header p {
  color: #4a4358;
  font-size: 1.175rem;
  line-height: 1.55;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 3rem 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.subpage-footer {
  background: #ffffff;
  text-align: center;
  padding: 2.5rem 1rem 3rem;
  color: #6b6478;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

/* ---------- NEON SERVICE CARDS ---------- */
.ux-parent {
  width: 100%;
  max-width: 360px;
  height: 320px;
  margin: 0 auto;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  filter: drop-shadow(0 22px 40px rgba(76, 29, 149, 0.22));
}

.ux-card {
  position: relative;
  height: 100%;
  border-radius: 40px;
  background: var(--ux-grad);
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.55s ease;
  box-shadow:
    rgba(76, 29, 149, 0) 40px 50px 25px -40px,
    rgba(76, 29, 149, 0.28) 0 25px 25px -5px;
}

.ux-parent:hover .ux-card {
  transform: rotate3d(1, 1, 0, 18deg);
  box-shadow:
    rgba(76, 29, 149, 0.45) 28px 48px 28px -38px,
    rgba(196, 181, 253, 0.4) 0 0 60px -10px,
    rgba(76, 29, 149, 0.18) 0 25px 35px 0;
}

/* Lavender theme variants */
.ux-parent--lavender {
  --ux-grad: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 50%, #7c3aed 100%);
  --ux-title: #ffffff;
  --ux-body: rgba(255, 255, 255, 0.92);
  --ux-cta: #ffffff;
  --ux-orbit: rgba(237, 233, 254, 0.32);
  --ux-fill: #5b21b6;
}

.ux-parent--lilac {
  --ux-grad: linear-gradient(145deg, #f5f3ff 0%, #ddd6fe 40%, #a78bfa 100%);
  --ux-title: #4c1d95;
  --ux-body: rgba(76, 29, 149, 0.85);
  --ux-cta: #6d28d9;
  --ux-orbit: rgba(196, 181, 253, 0.5);
  --ux-fill: #6d28d9;
}

.ux-parent--royal {
  --ux-grad: linear-gradient(160deg, #4c1d95 0%, #7c3aed 50%, #a78bfa 100%);
  --ux-title: #f5f3ff;
  --ux-body: rgba(243, 232, 255, 0.86);
  --ux-cta: #ddd6fe;
  --ux-orbit: rgba(167, 139, 250, 0.4);
  --ux-fill: #ddd6fe;
}

/* Additional themes (used by the v3 hero carousel — neon-cards palette) */
.ux-parent--mint {
  --ux-grad: linear-gradient(135deg, rgb(0, 255, 214) 0%, rgb(8, 226, 96) 100%);
  --ux-title: #00894d;
  --ux-body: rgba(0, 137, 78, 0.82);
  --ux-cta: #00894d;
  --ux-orbit: rgba(0, 249, 203, 0.22);
  --ux-fill: #00894d;
}
.ux-parent--solar {
  --ux-grad: linear-gradient(135deg, #fbbf24 0%, #f97316 45%, #dc2626 100%);
  --ux-title: #7c2d12;
  --ux-body: rgba(124, 45, 18, 0.88);
  --ux-cta: #7c2d12;
  --ux-orbit: rgba(254, 243, 199, 0.4);
  --ux-fill: #9a3412;
}
.ux-parent--lemon {
  --ux-grad: linear-gradient(135deg, #fde047 0%, #fbbf24 50%, #f59e0b 100%);
  --ux-title: #78350f;
  --ux-body: rgba(120, 53, 15, 0.88);
  --ux-cta: #78350f;
  --ux-orbit: rgba(254, 249, 195, 0.45);
  --ux-fill: #92400e;
}
.ux-parent--sky {
  --ux-grad: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 50%, #38bdf8 100%);
  --ux-title: #0c4a6e;
  --ux-body: rgba(12, 74, 110, 0.85);
  --ux-cta: #0c4a6e;
  --ux-orbit: rgba(186, 230, 253, 0.45);
  --ux-fill: #075985;
}
.ux-parent--rose {
  --ux-grad: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 50%, #ec4899 100%);
  --ux-title: #831843;
  --ux-body: rgba(131, 24, 67, 0.86);
  --ux-cta: #831843;
  --ux-orbit: rgba(251, 207, 232, 0.45);
  --ux-fill: #9d174d;
}
.ux-parent--leaf {
  --ux-grad: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 50%, #86efac 100%);
  --ux-title: #166534;
  --ux-body: rgba(22, 101, 52, 0.86);
  --ux-cta: #166534;
  --ux-orbit: rgba(220, 252, 231, 0.5);
  --ux-fill: #15803d;
}
.ux-parent--ocean {
  --ux-grad: linear-gradient(155deg, #22d3ee 0%, #0284c7 50%, #1e3a8a 100%);
  --ux-title: #f0f9ff;
  --ux-body: rgba(240, 249, 255, 0.88);
  --ux-cta: #f0f9ff;
  --ux-orbit: rgba(125, 211, 252, 0.35);
  --ux-fill: #f0f9ff;
}
.ux-parent--prism {
  --ux-grad: conic-gradient(from 200deg at 65% 35%, #67e8f9, #a5b4fc, #f9a8d4, #fde047, #67e8f9);
  --ux-title: #1e1b4b;
  --ux-body: rgba(30, 27, 75, 0.86);
  --ux-cta: #1e1b4b;
  --ux-orbit: rgba(255, 255, 255, 0.4);
  --ux-fill: #312e81;
}
.ux-parent--ocean .ux-glass,
.ux-parent--prism .ux-glass {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.45) 100%);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Glass overlay */
.ux-glass {
  transform-style: preserve-3d;
  position: absolute;
  inset: 8px;
  border-radius: 36px;
  border-top-right-radius: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.65) 100%);
  transform: translate3d(0, 0, 25px);
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  transition: all 0.5s ease-in-out;
  pointer-events: none;
}

.ux-parent--royal .ux-glass {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.4) 100%);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Orbit circles */
.ux-logo {
  position: absolute;
  right: 0;
  top: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 2;
}

.ux-circle {
  display: block;
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  top: 0;
  right: 0;
  background: var(--ux-orbit);
  box-shadow: rgba(100, 100, 111, 0.25) -10px 10px 24px 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.5s ease-in-out;
}

.ux-circle:nth-child(1) { width: 160px; transform: translate3d(0, 0, 20px); top: 8px;  right: 8px;  }
.ux-circle:nth-child(2) { width: 130px; transform: translate3d(0, 0, 40px); top: 10px; right: 10px; transition-delay: 0.05s; }
.ux-circle:nth-child(3) { width: 100px; transform: translate3d(0, 0, 60px); top: 17px; right: 17px; transition-delay: 0.10s; }
.ux-circle:nth-child(4) { width: 75px;  transform: translate3d(0, 0, 80px); top: 22px; right: 22px; transition-delay: 0.15s; }
.ux-circle:nth-child(5) {
  width: 48px; transform: translate3d(0, 0, 100px); top: 28px; right: 28px;
  display: grid; place-content: center; transition-delay: 0.20s;
}
.ux-circle:nth-child(5) svg { width: 22px; fill: #fff; }

.ux-parent:hover .ux-circle:nth-child(2) { transform: translate3d(0, 0, 60px);  }
.ux-parent:hover .ux-circle:nth-child(3) { transform: translate3d(0, 0, 80px);  }
.ux-parent:hover .ux-circle:nth-child(4) { transform: translate3d(0, 0, 100px); }
.ux-parent:hover .ux-circle:nth-child(5) { transform: translate3d(0, 0, 120px); }

.ux-content {
  padding: 105px 3.5rem 0 1.85rem;
  transform: translate3d(0, 0, 26px);
  position: relative;
  z-index: 3;
}

.ux-title {
  display: block;
  color: var(--ux-title);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.475rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Card-title responsive swap (hidden by default on desktop/laptop) */
.title-full  { display: inline; }
.title-short { display: none; }

.ux-text {
  display: block;
  margin-top: 0.95rem;
  color: var(--ux-body);
  font-size: 1.055rem;
  line-height: 1.5;
  font-weight: 500;
}

.ux-bottom {
  padding: 10px 12px;
  transform-style: preserve-3d;
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transform: translate3d(0, 0, 26px);
  z-index: 4;
}

.ux-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.ux-more:hover { transform: translate3d(0, 0, 10px); }

.ux-more-btn {
  background: none;
  border: none;
  color: var(--ux-cta);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.925rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-decoration: none;
}

.ux-more svg {
  fill: none;
  stroke: var(--ux-cta);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  max-height: 16px;
  width: 18px;
}

@media (max-width: 800px) {
  .subpage-nav { gap: 1rem; padding: 0.4rem 1rem 0.4rem 0.6rem; }
  .subpage-brand-link img { height: 38px; }
  .subpage-banner-overlay { padding: 3rem 1.5rem 2.5rem; }
}


/* ============================================================
   RESPONSIVE BREAKPOINT QUEUE
   ------------------------------------------------------------
   Cascade order: largest → smallest. Each tier only overrides
   what's needed; rules cascade down so a smaller tier never has
   to repeat what a larger tier already set.

     Desktop base    ≥ 1601 px  — no media query (top of file)
     Laptop         ≤ 1600 px  — MacBook Pro 14" (1512), 13"/15" laptops,
                                  iPad Pro 12.9" landscape (1366)
     Tablet land.   ≤ 1199 px  — iPad Pro 11" landscape (1194),
                                  iPad Pro 10.5" landscape (1112),
                                  iPad Air landscape (1180), iPad 10.2"/Mini landscape
     Tablet port.   ≤ 1024 px  — iPad Pro 12.9" portrait (1024),
                                  iPad Pro 11"/10.5" portrait (834),
                                  iPad Air / iPad / iPad Mini portrait
     Mobile land.   width ≤ 950 px AND height ≤ 500 px
                                — combined query reliably separates
                                  phone-landscape from small-tablet-portrait
                                  by height (phones are short in landscape,
                                  tablets in portrait have height ~1024+)
     Mobile port.   ≤  480 px  — phones upright
   ============================================================ */

/* ----- Laptop (≤ 1600 px) ----- */
@media (max-width: 1600px) {
  .hero-text { padding-left: 3rem; }   /* nudge the hero copy a touch left */
}

/* ----- Tablet landscape (≤ 1199 px) ----- */
@media (max-width: 1199px) {
  .hero-cta-row { flex-wrap: nowrap; }       /* keep "Get a Free Quote" + "Book Now" side by side */
  .hero-quote-cta,
  .hero-book-inner { white-space: nowrap; }  /* never split button labels onto 2 lines */

  /* Nudge the hexagon icons a touch right so they sit further into the open space */
  .hero-icons { left: 73.25%; }

  /* Tablet-landscape gets its own hero background variant */
  .hero-stage {
    background-image: url('aline_leaning_official/hero/hero-bg-tablet-2.jpg');
    background-position: 60% center;
  }

  /* Tighten the H2 line-height so it reads more compact (font-size unchanged) */
  .hero-h2 { line-height: 1.3; }

  /* Subpage banner image — shift the residential photo right at this tier */
  .subpage-banner-img { object-position: 45% center; }

  /* Shorter card title at tablet landscape */
  .title-full  { display: none; }
  .title-short { display: inline; }
}

/* ----- Tablet portrait only (481–1024 px): shrink the .hero-video
   element to 85 % of viewport height (kept full-width). With
   object-fit: cover unchanged, the source video is scaled less to
   cover this shorter element — so more horizontal frame is visible
   before cropping, while top + bottom 7.5 % becomes #000 letterbox.
   Sides keep filling the viewport width edge-to-edge. ----- */
@media (min-width: 481px) and (max-width: 1024px) {
  .hero-video {
    height: 85%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    /* object-fit: cover is inherited from the base rule */
  }
}

/* ----- Tablet portrait (≤ 1024 px) ----- */
@media (max-width: 1024px) {
  /* Background image at the bottom of the hero, full width */
  .hero-stage {
    grid-template-columns: 1fr;
    background-image: url('aline_leaning_official/hero/hero-bg-tablet-portrait-2.png');
    background-position: center bottom;
    background-size: 100% auto;
    padding-top: 6rem;
  }

  .hero-icons { display: none; }

  /* Hero pins for 100vh of scroll (200vh wrap) on desktop to feed the icon
     animation. Since the icons are hidden here, collapse that extra scroll. */
  .hero-scroll-wrap { height: 100vh; height: 100svh; }

  /* Stack the residential / commercial cards vertically and hide the girl */
  .showcase {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .showcase-card {
    aspect-ratio: 3 / 2;
    height: auto;
  }
  /* Cards enter from below instead of left/right when stacked */
  .showcase-card--left,
  .showcase-card--right { transform: translateY(40px); }
  .showcase.is-visible .showcase-card--left,
  .showcase.is-visible .showcase-card--right { transform: translateY(0); }
  .girl-canvas { display: none; }

  /* When a card is selected (hover/tap), outline its title with a 50% white halo
     around the outer silhouette only (drop-shadow respects letter counters). */
  .showcase-card:hover .showcase-title,
  .showcase-card:focus-within .showcase-title {
    filter:
      drop-shadow( 1.5px  0    0 rgba(255, 255, 255, 0.5))
      drop-shadow(-1.5px  0    0 rgba(255, 255, 255, 0.5))
      drop-shadow( 0    1.5px  0 rgba(255, 255, 255, 0.5))
      drop-shadow( 0   -1.5px  0 rgba(255, 255, 255, 0.5));
  }

  /* "Gallery" — give the right-side word ("lery") extra padding so the italic
     "y" tail isn't clipped by the overflow:hidden boundary. */
  .gallery-word--end {
    padding-right: 0.25em;
  }

  /* Headers higher (sit just below the logo, not vertically centered) */
  .hero-text {
    justify-self: center;
    align-self: start;
    margin-top: 0;
    padding: 2rem 1.5rem 0;
    max-width: 700px;
    text-align: center;
    align-items: center;
  }
  .hero-h2 { max-width: 100%; }

  /* +10 px on the entire H1 (covers "Aline Cleaning", "Best House…", and the city words) */
  .hero-h1 { font-size: calc(clamp(2.2rem, 4.5vw, 3.9rem) + 10px); }


  /* Swap the top pill for a hamburger menu */
  .top-pill { display: none !important; }
  .mobile-menu-toggle { display: inline-flex; }

  /* Hero logo back in the top-left corner at its original (desktop) size */
  .hero-logo {
    left: 1.25rem;
    right: auto;
    top: 1rem;
    width: clamp(130px, 14vw, 230px);
    transform: translateY(20px);
  }
  .hero-stage.is-revealed .hero-logo {
    transform: translateY(0);
  }
}

/* ----- Tablet portrait only: lift hero contents (placed AFTER the
   ≤1024 block so it overrides the padding/background/text rules
   defined there). ----- */
@media (min-width: 481px) and (max-width: 1024px) {
  .hero-stage {
    padding-top: 3.5rem;            /* between 6rem (default) and 1.25rem (prev) */
    background-position: center 87%;
  }
  .hero-text {
    padding-top: 1rem;
    margin-top: -0.5rem;
  }
}

/* ----- Mobile landscape (width ≤ 950 px AND height ≤ 500 px) ----- */
@media (max-width: 950px) and (max-height: 500px) {
  /* No room for the bottom image at this height — drop it */
  .hero-stage {
    background-image: none;
    padding-top: 3.5rem;
    padding-bottom: 1rem;
  }

  /* Headings sit higher (top-anchored) with tight padding */
  .hero-text {
    align-self: start;
    padding: 0 1.5rem;
    margin-top: 0;
  }

  /* H1 bumped +10 px (covers "Aline Cleaning", "Best House…", and the cities) */
  .hero-h1 {
    font-size: calc(clamp(1.4rem, 3vw, 2rem) + 10px);
    margin-bottom: 0.7rem;
    line-height: 1.08;
  }
  .hero-h2 {
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 0.9rem;
  }
  .hero-cta-row { margin-bottom: 0.9rem; gap: 0.5rem; }
  .hero-quote-cta { padding: 0.55rem 1.1rem; font-size: 14px; }
  .hero-book-inner { padding: 0.55rem 1.1rem; font-size: 14px; }
  .hero-phone-big {
    font-size: clamp(1.4rem, 4vw, 2rem);
    margin-top: 0;
  }

  /* Logo + hamburger smaller, hugging the corners */
  .hero-logo {
    width: clamp(90px, 11vw, 130px);
    top: 0.5rem;
    left: 0.75rem;
  }
  .mobile-menu-toggle {
    top: 0.5rem;
    right: 0.75rem;
    width: 42px;
    height: 42px;
  }

  /* Subpage banner — drop the heading lower (tighten bottom padding)
     and layer a left→right dark fade so the heading reads cleanly */
  .subpage-banner-overlay {
    padding: 3rem clamp(1.5rem, 6vw, 5rem) 1rem;
    background:
      linear-gradient(90deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.25) 45%,
        transparent 75%),
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.18) 0%,
        transparent 35%,
        rgba(0, 0, 0, 0.55) 100%);
  }
}

/* ----- Mobile portrait (≤ 480 px) ----- */
@media (max-width: 480px) {
  /* Show the full 16:9 frame (contain) and then scale up 50 %. Sides
     may clip past the viewport; gaps top/bottom shrink but remain. */
  .hero-video {
    object-fit: contain;
    transform: scale(2.156);
    transform-origin: center center;
  }

  /* Hero stage — tighten everything for the narrow portrait viewport.
     Inherited tablet-portrait sizing (H1 at calc(2.2rem + 10px) ≈ 45 px)
     is too large at 390 px wide and overflows. */
  .hero-stage {
    padding-top: 5rem;               /* drops the headings lower */
    padding-bottom: 6rem;            /* lifts the CTA cluster + phone higher */
    background-color: #ddd6fe;       /* lavender safety net behind the image */
    background-image: url('aline_leaning_official/hero/hero-bg-mobile-portrait-lavender.jpg');
    background-repeat: no-repeat;
    background-position: center calc(100% + 5vh);
    background-size: 100% auto;
  }
  /* Mobile-portrait hero — pare down: H1 + slogan + Quote CTA only. */
  .hero-book-btn,
  .hero-phone-big {
    display: none;
  }
  .hero-quote-text-default { display: none; }
  .hero-quote-text-mobile  { display: inline; }
  .hero-quote-arrow        { display: none; }

  /* Parallax cleaning-icon strip — covers lower half of the hero, behind
     the text/CTA (z-index 1) but above the bg image (z 0). 4 layers, each
     scrolling horizontally at a different speed/scale/opacity to fake depth. */
  .hero-parallax {
    display: block;
    position: absolute;
    top: 58%;                         /* nudged further down toward the lower portion */
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
  }
  .hero-parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 200%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    animation: heroParallaxScroll linear infinite;
    will-change: transform;
  }
  .hero-parallax-layer img {
    display: block;
    flex-shrink: 0;
    user-select: none;
    pointer-events: none;
    /* Subtle pulse: scales 0.97 ↔ 1.05 + bobs ±6 px vertically for depth */
    animation: heroParallaxPulse 4.5s ease-in-out infinite;
    will-change: transform;
  }
  /* Stagger pulses so the icons don't breathe in sync — uses nth-child to
     vary the delay across the 8 images per layer. */
  .hero-parallax-layer img:nth-child(1) { animation-delay:  0s;   }
  .hero-parallax-layer img:nth-child(2) { animation-delay: -0.7s; }
  .hero-parallax-layer img:nth-child(3) { animation-delay: -1.4s; }
  .hero-parallax-layer img:nth-child(4) { animation-delay: -2.1s; }
  .hero-parallax-layer img:nth-child(5) { animation-delay: -2.8s; }
  .hero-parallax-layer img:nth-child(6) { animation-delay: -3.5s; }
  .hero-parallax-layer img:nth-child(7) { animation-delay: -4.2s; }
  .hero-parallax-layer img:nth-child(8) { animation-delay: -0.35s;}

  @keyframes heroParallaxScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @keyframes heroParallaxPulse {
    0%, 100% { transform: translateY(0)    scale(1);    }
    50%      { transform: translateY(-6px) scale(1.06); }
  }
  /* Layer 1 — closest: biggest, fastest, fully opaque */
  .hero-parallax-layer--1 {
    animation-duration: 28s;
    top: 60%;
  }
  .hero-parallax-layer--1 img { width: 90px; opacity: 1; }
  /* Layer 2 */
  .hero-parallax-layer--2 {
    animation-duration: 45s;
    top: 28%;
    animation-direction: reverse;
  }
  .hero-parallax-layer--2 img { width: 64px; opacity: 0.8; }
  /* Layer 3 */
  .hero-parallax-layer--3 {
    animation-duration: 65s;
    top: 78%;
  }
  .hero-parallax-layer--3 img { width: 48px; opacity: 0.6; }
  /* Layer 4 — farthest: smallest, slowest, faintest */
  .hero-parallax-layer--4 {
    animation-duration: 90s;
    top: 12%;
    animation-direction: reverse;
  }
  .hero-parallax-layer--4 img { width: 34px; opacity: 0.45; }

  /* 50 % white outline on "Aline Cleaning" + each city word
     (drop-shadow respects alpha so letter counters aren't ringed). */
  .hero-h1 .hero-brand,
  .hero-h1 .city-word {
    filter:
      drop-shadow( 1.5px  0    0 rgba(255, 255, 255, 0.5))
      drop-shadow(-1.5px  0    0 rgba(255, 255, 255, 0.5))
      drop-shadow( 0    1.5px  0 rgba(255, 255, 255, 0.5))
      drop-shadow( 0   -1.5px  0 rgba(255, 255, 255, 0.5));
  }

  /* ====================================================================
     V3 — GLASS variant
     • bg: hero-bg-mobile-portrait-glass.jpg
     • "Aline Cleaning" as real text in the "Aline Bubble" color font (stacked lockup)
     • "Best House Cleaning Services in" black, no outline
     • cities lavender gradient, no outline
     • centered glow-border Free Quote button
     • diagonal mini-carousel of residential/commercial cards at the bottom
     • glassy gradient mask overlay for a "cooler" finish
     ==================================================================== */
  .hero-stage.hero-mode-v3 {
    background-image: none;
    padding-top: 3rem;               /* bubble logo + headings lifted up */
  }

  /* Glass view: brand wordmark as REAL TEXT in the "Aline Bubble" color
     font — two stacked lines (ALINE / CLEANING), the "—" hidden. The
     glyphs carry their own artwork colors, so the desktop gradient-text
     treatment is neutralized. Sparkles (.has-sparkles) still attach via
     the existing JS so stars float across the wordmark. */
  .hero-stage.hero-mode-v3 .hero-brand {
    display: block;
    line-height: 1.02;
    margin-bottom: -1.9rem;          /* pull "Best House…" up toward the lockup */
    background: none;
    -webkit-text-fill-color: initial;
    color: #7c5bb5;                  /* only visible if the font fails to load */
    filter: none;
  }
  .hero-stage.hero-mode-v3 .brand-word {
    display: block;
    font-family: "Aline Bubble", var(--font-display);
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.12em;
    filter: none;
  }
  .hero-stage.hero-mode-v3 .brand-word--1 { font-size: clamp(3.2rem, 24vw, 6rem); }
  .hero-stage.hero-mode-v3 .brand-word--2 {
    font-size: clamp(1.8rem, 13.5vw, 3.4rem);
    margin-top: -0.34em;             /* CLEANING hugs ALINE (glyphs carry built-in headroom) */
  }
  .hero-stage.hero-mode-v3 .brand-dash { display: none; }

  /* Hide parallax + default CTA + phone (we use the v3 glow button instead) */
  .hero-stage.hero-mode-v3 .hero-parallax,
  .hero-stage.hero-mode-v3 .hero-cta-row,
  .hero-stage.hero-mode-v3 .hero-phone-big {
    display: none;
  }
  /* Plain H1 text → black, cities → gradient kept, no white outline */
  .hero-stage.hero-mode-v3 .hero-h1 { color: #0f0f14; }
  .hero-stage.hero-mode-v3 .hero-h1 .city-word { filter: none; }

  /* Show the v3 surfaces — only inside this @media block so they
     never leak to mobile-landscape / tablet / desktop. */
  .hero-stage.hero-mode-v3 .hero-v3-quote,
  .hero-stage.hero-mode-v3 .hero-v3-cards { display: flex !important; }

  /* ---------- V3 glassy gradient mask (top-to-bottom translucent sheen) */
  .hero-v3-glass {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.25) 35%,
        rgba(221, 214, 254, 0.12) 65%,
        rgba(124, 58, 237, 0.18) 100%);
    backdrop-filter: blur(2px) saturate(140%);
    -webkit-backdrop-filter: blur(2px) saturate(140%);
  }

  /* ---------- V3 Free Quote glow button (centered horizontally, slightly below midline) ---------- */
  .hero-v3-quote {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 200px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: transparent;
    border-radius: 6px;
    overflow: visible;
  }
  /* Animated gradient border via clipped pseudo-element */
  .hero-v3-quote::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    padding: 3px;
    background: linear-gradient(120deg, var(--purple), var(--purple-bright), #f9a8d4, var(--purple));
    background-size: 400% 400%;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: heroV3Glow 3s ease-in-out infinite;
  }
  .hero-v3-quote span {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: uppercase;
    /* Explicit background-image (not shorthand) so nothing resets the gradient */
    background-image: linear-gradient(120deg, var(--purple), var(--purple-bright), #f9a8d4, var(--purple));
    background-size: 400% 400%;
    background-position: 14% 0%;
    background-repeat: no-repeat;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: heroV3Glow 3s ease-in-out infinite;
    will-change: background-position;
  }

  /* ---------- V3 diagonal mini-carousel: 5 service cards auto-rotating ----------
     Each card reads three CSS vars set by JS:
       --active : offset from current card / total count (e.g. -0.4 … +0.4)
       --zIndex : stacking order (highest = front-most)
       --items  : total count (= 5)
     The transform places cards along a diagonal axis around the centered
     active card. The active card sits at (0, 0, 0); neighbors translate
     and rotate proportionally. */
  .hero-v3-cards {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4vh;
    height: 38vh;
    z-index: 4;
    pointer-events: none;
    --items: 5;
  }
  /* Each .hero-v3-card hosts a real .ux-parent / .ux-card from the
     subpages — same gradient, circles, glass, title, body, CTA — just
     resized for the mobile carousel slot. The carousel transform is
     applied to .hero-v3-card; the visual styling is the .ux-card itself. */
  .hero-v3-card {
    --x: calc(var(--active, 0) * 280%);
    --y: calc(var(--active, 0) * 60%);
    --rot: calc(var(--active, 0) * 70deg);
    --opacity: calc(var(--zIndex, 1) / var(--items) * 3 - 2);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64vw;
    height: 26vh;                    /* shorter cards */
    margin: -13vh 0 0 -32vw;
    transform-origin: 0% 100%;
    transform: translate(var(--x), var(--y)) rotate(var(--rot));
    opacity: var(--opacity);
    transition: transform 0.9s cubic-bezier(0, 0.02, 0, 1),
                opacity   0.9s cubic-bezier(0, 0.02, 0, 1);
    z-index: var(--zIndex, 1);
    pointer-events: auto;
  }
  /* Inner .ux-parent fills the card slot (override the base's fixed sizes) */
  .hero-stage.hero-mode-v3 .hero-v3-card .ux-parent {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .hero-stage.hero-mode-v3 .hero-v3-card .ux-card {
    border-radius: 26px;
  }
  /* Shrink the orbit circle stack to suit the smaller card */
  .hero-stage.hero-mode-v3 .ux-circle:nth-child(1) { width: 110px; top: 6px; right: 6px; }
  .hero-stage.hero-mode-v3 .ux-circle:nth-child(2) { width: 90px;  top: 8px; right: 8px; }
  .hero-stage.hero-mode-v3 .ux-circle:nth-child(3) { width: 70px;  top: 13px; right: 13px; }
  .hero-stage.hero-mode-v3 .ux-circle:nth-child(4) { width: 52px;  top: 18px; right: 18px; }
  .hero-stage.hero-mode-v3 .ux-circle:nth-child(5) { width: 36px;  top: 22px; right: 22px; }
  .hero-stage.hero-mode-v3 .ux-circle:nth-child(5) svg { width: 16px; }
  /* Tighten content padding + type for the smaller card */
  .hero-stage.hero-mode-v3 .ux-content {
    padding: 80px 1.3rem 0 1.1rem;
  }
  /* Each line bumped +2 px from the previous values (≈ +0.125rem) */
  .hero-stage.hero-mode-v3 .ux-title { font-size: 1.225rem; }
  .hero-stage.hero-mode-v3 .ux-text  { font-size: 0.945rem; margin-top: 0.55rem; line-height: 1.4; }
  .hero-stage.hero-mode-v3 .ux-bottom { padding: 8px 10px; }
  /* Preserve the orb-glass inside curve at the top-right. The shorthand
     `border-radius: 22px` had been wiping out the base's
     `border-top-right-radius: 100%`, so the swooping curve was missing. */
  .hero-stage.hero-mode-v3 .ux-glass {
    inset: 6px;
    border-radius: 22px;
    border-top-right-radius: 100%;
  }
  /* Disable the 3-D tilt on hover in mobile portrait (carousel does the rotation) */
  .hero-stage.hero-mode-v3 .ux-parent:hover .ux-card { transform: none; }

  /* Spotlight pose — applied to the centered card via .is-spotlit (set
     by JS once the rotation transition settles). Mirrors the subpage
     hover state: 3-D tilt + halo + orbit circles separate. JS removes
     the class before the next rotation so the card flattens out. */
  .hero-stage.hero-mode-v3 .hero-v3-card.is-spotlit .ux-card {
    transform: rotate3d(1, 1, 0, 18deg);
    box-shadow:
      rgba(76, 29, 149, 0.45) 28px 48px 28px -38px,
      rgba(196, 181, 253, 0.4) 0 0 60px -10px,
      rgba(76, 29, 149, 0.18) 0 25px 35px 0;
  }
  .hero-stage.hero-mode-v3 .hero-v3-card.is-spotlit .ux-circle:nth-child(2) { transform: translate3d(0, 0, 60px);  }
  .hero-stage.hero-mode-v3 .hero-v3-card.is-spotlit .ux-circle:nth-child(3) { transform: translate3d(0, 0, 80px);  }
  .hero-stage.hero-mode-v3 .hero-v3-card.is-spotlit .ux-circle:nth-child(4) { transform: translate3d(0, 0, 100px); }
  .hero-stage.hero-mode-v3 .hero-v3-card.is-spotlit .ux-circle:nth-child(5) { transform: translate3d(0, 0, 120px); }
  .hero-text {
    padding: 0 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;           /* fill the stage so we can push CTAs to the bottom */
  }
  /* Headings stay at the top of the flex column; the auto margin on the
     CTA row absorbs the remaining space and shoves it (plus the phone)
     down to the bottom. */
  .hero-cta-row { margin-top: auto; }
  .hero-h1 {
    font-size: calc(clamp(1.4rem, 6.4vw, 1.85rem) + 10px);
    line-height: 1.12;
    margin-bottom: 0.05rem;         /* slogan hugs the city line */
    color: var(--purple-deep);      /* plain H1 text ("Best House Cleaning…") becomes dark purple;
                                       the gradient spans (Aline Cleaning, cities) are unaffected
                                       because they use background-clip:text + transparent fill */
  }
  /* Trim the italic right-pad so the city words sit visually centered,
     but keep enough room to host the italic overhang of "Hills" / etc. */
  .hero-h1 .city-swap {
    padding-right: 0.35em;
    margin-right: 0;
  }
  .hero-h1 .city-word {
    padding-right: 0.2em;
  }
  /* Belt-and-suspenders: ensure the text block itself is centered in
     the hero-stage's single column. */
  .hero-text {
    margin-left: auto;
    margin-right: auto;
  }
  /* Slogan — one small block under the city line; must clear the
     absolutely-positioned Free Quote button (top: 56%) below it. */
  .hero-h2 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    margin: 0 auto;
    max-width: 88%;
    color: rgba(35, 30, 55, 0.78);
  }
  /* Stack the two CTAs vertically — "Book Now" sits below "Get a Free Quote" */
  .hero-cta-row {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;         /* phone moves up closer to the buttons */
  }
  .hero-quote-cta,
  .hero-book-inner {
    padding: 0.6rem 1.1rem;
    font-size: 24px;
  }
  .hero-phone-big {
    font-size: calc(clamp(1.3rem, 5vw, 1.7rem) + 10px);
  }
  .hero-logo {
    width: clamp(80px, 22vw, 110px);
    top: 0.75rem;
    left: 0.85rem;
  }
  .mobile-menu-toggle {
    top: 0.75rem;
    right: 0.85rem;
    width: 40px;
    height: 40px;
  }

  /* ----- Subpage banner — stack image + text instead of overlapping. -----
     Image scales down to fit viewport width (its own aspect ratio).
     The whole overlay (eyebrow + H1 + sub) drops below the image as a
     normal-flow block with dark text on the page background. */
  .subpage-banner {
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .subpage-banner-img {
    width: 100%;
    height: auto;
    object-fit: initial;
    object-position: initial;
  }
  .subpage-banner-overlay {
    position: static;
    inset: auto;
    background: none;
    padding: 1.5rem 1.25rem 2rem;
    color: #1a0f2e;
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .subpage-banner-eyebrow {
    color: var(--purple-bright);
    margin-bottom: 1.75rem;          /* more breathing room before the H1 */
  }
  .subpage-banner-overlay h1 {
    color: #1a0f2e;
    text-shadow: none;
    font-size: clamp(2rem, 8vw, 2.75rem);
    text-align: center;
    align-self: stretch;
  }
  .subpage-banner-overlay h1 span {
    filter: none;        /* drop the white outline — text sits on a light bg now */
  }
  /* Match the services-header paragraph style */
  .subpage-banner-sub {
    color: #4a4358;
    font-family: var(--font-body);
    font-size: 1.175rem;
    line-height: 1.55;
    max-width: 100%;
    text-align: center;
    align-self: stretch;
  }

  /* Sticky hamburger replaces the subpage top bar */
  .subpage-nav { display: none; }
  .mobile-menu-toggle {
    display: inline-flex;
    top: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
  }

  /* Match the "Pick your Plan" section's top padding to the overlay's
     image-to-eyebrow spacing (so the gaps read as the same). */
  .services-section { padding-top: 1.5rem; }

  /* Collage zoom text — stack words vertically so each sits on its own line.
     The base layout is a single-line flex row with white-space: nowrap. */
  .zoom-text {
    flex-direction: column;
    align-items: center;
    white-space: normal;
    gap: 0.15em;
    line-height: 1.05;
    font-size: calc(clamp(2.5rem, 12vw, 4rem) * var(--text-scale));
  }

  /* Showcase cards — swap photos for the isometric room renders.
     The base markup uses inline `style="background-image:..."`, so the
     override needs !important to win. */
  .showcase-card--left .showcase-image {
    background-image: url('aline_leaning_official/showcase/residential-mobile.jpg') !important;
  }
  .showcase-card--right .showcase-image {
    background-image: url('aline_leaning_official/showcase/commercial-mobile.jpg') !important;
  }
  /* Both cards split a single viewport — 50vh each */
  .showcase-card {
    aspect-ratio: auto;
    height: 50vh;
    min-height: 50vh;
  }
}

/* ============================================================
   Showcase Opus paged stage — applies at BOTH mobile portrait
   AND tablet portrait so the new transition design covers ≤1024 px.
   Cards are hidden; the .opus-stage paged transition runs instead.
   ============================================================ */
@media (max-width: 1024px) {
  .showcase {
    grid-template-columns: 1fr;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .showcase-card { display: none; }

  .opus-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(to left bottom, #f2e3c6 0%, #a7a1a5 100%);
    overflow: hidden;
  }
  .opus-app {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .opus-bgimg {
    position: absolute;
    inset: 0;
    left: -2.5%;
    width: 105%;
    transition: transform 3.5s 770ms;
  }
  .opus-bgimg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .opus-bgimg-image--1 {
    background-image: url('aline_leaning_official/showcase/residential-mobile.jpg');
  }
  .opus-bgimg-image--2 {
    background-image: url('aline_leaning_official/showcase/commercial-mobile.jpg');
    opacity: 0;
    transition: opacity 900ms ease 700ms;
    will-change: opacity;
  }

  /* Foreground masks — translucent white glass: 50 % white tint +
     backdrop blur, clipped to the slide-specific curve via the SVG
     clipPaths defined in the markup. */
  .opus-clip-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .opus-img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50vh;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
    transition: transform 2s cubic-bezier(0.6, 0.13, 0.31, 1.02);
    background: #ffffff;
  }
  .opus-img-top    { top: 0;    transform: translate3d(0, -100%, 0); }
  .opus-img-bottom { bottom: 0; transform: translate3d(0,  100%, 0); }

  /* Apply each piece's clip-path */
  .opus-img--1.opus-img-top    { clip-path: url(#opusClip1Top); }
  .opus-img--1.opus-img-bottom { clip-path: url(#opusClip1Bottom); }
  .opus-img--2.opus-img-top    { clip-path: url(#opusClip2Top); }
  .opus-img--2.opus-img-bottom { clip-path: url(#opusClip2Bottom); }

  /* Slide 1 pieces in view during .initial (and slide back out on .active) */
  .opus-app.initial .opus-img--1.opus-img-top    { transform: translate3d(0, 0, 0); }
  .opus-app.initial .opus-img--1.opus-img-bottom { transform: translate3d(0, 0, 0); }
  .opus-app.active  .opus-img--1.opus-img-top    { transform: translate3d(0, -100%, 0); }
  .opus-app.active  .opus-img--1.opus-img-bottom { transform: translate3d(0,  100%, 0); }

  /* Slide 2 pieces hidden until .active, then slide in vertically */
  .opus-app.active  .opus-img--2.opus-img-top    { transform: translate3d(0, 0, 0); }
  .opus-app.active  .opus-img--2.opus-img-bottom { transform: translate3d(0, 0, 0); }
  /* Dark overlay so the white text reads */

  /* Text stacks — always above the masks (z-index 5 > mask z-index 2). */
  .opus-text {
    position: absolute;
    font-family: var(--font-display);
    color: #1a0f2e;
    z-index: 5;
    user-select: none;
  }
  /* Slide 1 — the text block spans the full stage so the explore button
     can be pinned to the bottom-right (away from the upper-left title
     group). Lines 2–4 flow naturally from top-left via padding. */
  .opus-text--1 {
    inset: 0;
    padding: 12% 1.5rem;      /* upper text dropped lower in the stage */
    text-align: left;
  }
  .opus-text--1 .opus-text-line--1 {
    position: absolute;
    bottom: 22%;              /* matches slide 2's effective height (it gets an extra -25px translate in active state) */
    right: 1.5rem;
    margin-top: 0;
  }
  /* Slide 2 — mirror of slide 1's layout: upper-right title group +
     explore button pinned to the bottom-LEFT. */
  .opus-text--2 {
    inset: 0;
    padding: 12% 1.5rem;
    text-align: right;
  }
  .opus-text--2 .opus-text-line--1 {
    position: absolute;
    bottom: 18%;
    left: 1.5rem;
    margin-top: 0;
  }
  .opus-text-line {
    will-change: transform, opacity;
    transition: transform 1500ms 400ms, opacity 750ms 500ms;
  }
  /* Title line — lavender gradient (clipped to text). The padding-right
     gives the italic overhang of the trailing "l" room so it doesn't
     get cut by the background-clip:text bounding box. */
  .opus-text-line--4 {
    font-size: 13vw;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 0.95;
    background: linear-gradient(135deg, var(--purple-bright) 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
    padding-right: 0.2em;
  }
  .opus-text-line--3 {
    margin-top: 0.4rem;
    font-size: 5.5vw;
    font-weight: 500;
    color: #1a0f2e;
  }
  .opus-text-line--2 {
    margin-top: 0.4rem;
    font-size: 3.4vw;
    font-weight: 600;
    color: #1a0f2e;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .opus-text-line--1 {
    margin-top: 1.2rem;
  }
  .opus-text-line--1 a {
    display: inline-block;
    color: #1a0f2e;
    text-decoration: none;
    font-size: 3.8vw;
    font-weight: 600;
    padding: 0.55rem 1.3rem;
    border: 1.5px solid rgba(26, 15, 46, 0.55);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
  }

  /* Initial state — text 1 starts off-screen up + invisible */
  .opus-text--1 .opus-text-line {
    transform: translate3d(0, -80px, 0);
    opacity: 0;
  }
  /* Text 2 hidden initially — layout (upper-right + bottom-left button)
     is set in the main .opus-text--2 rule above; only state-related
     overrides go here. */
  .opus-text--2 {
    z-index: -1;
    transition: z-index 1500ms;
  }
  .opus-text--2 .opus-text-line { opacity: 0; }

  /* Stagger per line (--i: 1..4 set via :nth-child) */
  .opus-text-line--4 { transition-delay: 0ms; }
  .opus-text-line--3 { transition-delay: 100ms; }
  .opus-text-line--2 { transition-delay: 200ms; }
  .opus-text-line--1 { transition-delay: 300ms; }

  /* Entry phase (.initial added by JS): text-1 settles in */
  .opus-app.initial .opus-text--1 .opus-text-line {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1500ms cubic-bezier(0.6, 0.13, 0.31, 1.02),
                opacity 700ms ease;
  }
  .opus-app.initial .opus-text--1 .opus-text-line--4 { transition-delay: 1400ms; }
  .opus-app.initial .opus-text--1 .opus-text-line--3 { transition-delay: 1500ms; }
  .opus-app.initial .opus-text--1 .opus-text-line--2 { transition-delay: 1600ms; }
  .opus-app.initial .opus-text--1 .opus-text-line--1 { transition-delay: 1700ms; }

  /* Active phase (.active toggled by JS): bg scale + image swap + text swap */
  .opus-app.active .opus-bgimg {
    transform: translate3d(10px, 0, 0) scale(1.05);
    transition: transform 5s 850ms ease-in-out;
  }
  .opus-app.active .opus-bgimg-image--2 {
    opacity: 1;
    transition: opacity 900ms ease 1100ms;
  }
  .opus-app.active .opus-text--1 {
    z-index: -1;
    transition: z-index 0ms 1500ms;
  }
  .opus-app.active .opus-text--1 .opus-text-line {
    transform: translate3d(0, -125px, 0);
    opacity: 0;
    transition: transform 1500ms cubic-bezier(0.6, 0.13, 0.31, 1.02),
                opacity 400ms ease;
  }
  .opus-app.active .opus-text--2 { z-index: 5; }
  .opus-app.active .opus-text--2 .opus-text-line {
    transform: translate3d(0, -25px, 0);
    opacity: 1;
    transition: transform 2500ms cubic-bezier(0.6, 0.13, 0.31, 1.02),
                opacity 1300ms ease;
  }
  .opus-app.active .opus-text--2 .opus-text-line--4 { transition-delay: 1100ms; }
  .opus-app.active .opus-text--2 .opus-text-line--3 { transition-delay: 1175ms; }
  .opus-app.active .opus-text--2 .opus-text-line--2 { transition-delay: 1250ms; }
  .opus-app.active .opus-text--2 .opus-text-line--1 { transition-delay: 1325ms; }

  /* Pagination dots (right side) */
  .opus-pages {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
  }
  .opus-pages-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .opus-pages-item {
    position: relative;
    margin-bottom: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    cursor: pointer;
  }
  .opus-pages-item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transition: 500ms;
  }
  .opus-pages-item--active::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* ----- Tablet portrait only: lift the Opus residential / commercial
   headings + subheadings (top text padding 12 % → 6 %). Mobile
   portrait keeps the 12 % inherited from the ≤1024 block. ----- */
@media (min-width: 481px) and (max-width: 1024px) {
  .opus-text--1,
  .opus-text--2 {
    padding-top: 6%;
  }
}

/* ----- Tablet landscape only (1025–1199 px): scale the hero
   background image 115 % and shift it 10 % to the left
   (background-position: 60 % → 50 %). ----- */
@media (min-width: 1025px) and (max-width: 1199px) {
  .hero-stage {
    background-size: 145% auto;
    background-position: 70% center; /* +10pp from baseline 60% — image content visually shifts left */
  }
}

/* Back to mobile-portrait-only styles (gallery vertical arrangement etc.) */
@media (max-width: 480px) {
  /* ----- Gallery — vertical letter arrangement (Gal stacked above the
     reveal-box, lery below), with the two "l"s rotating flat into a
     partial frame on split. The final expanded carousel sizing matches
     the current desktop tier (wider slide → more image width visible). ----- */
  .gallery-headline {
    flex-direction: column;
    font-size: clamp(3rem, 18vw, 6rem);
    line-height: 0.9;
    gap: 0;
  }
  /* Letters fully invisible until .is-revealed is applied — opacity
     fades in synced with the translateY pop. */
  .gallery-letter {
    opacity: 0;
    transition: transform 1.1s cubic-bezier(0.7, 0, 0.2, 1),
                opacity 0.45s ease;
  }
  .gallery-headline.is-revealed .gallery-letter {
    opacity: 1;
  }
  /* Letters stack vertically inside each word — one letter per line */
  .gallery-word--start,
  .gallery-word--end {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding-right: 0;
    line-height: 0.95;
  }
  /* Allow overflow once we're past the initial reveal so the rotated
     "l"s aren't clipped */
  .gallery-headline.is-split .gallery-word,
  .gallery-headline.is-expanded .gallery-word {
    overflow: visible;
  }
  /* Split phase: Gal lifts up, lery drops down (vertical instead of horizontal) */
  .gallery-headline.is-split .gallery-word--start { transform: translateY(-0.25em); }
  .gallery-headline.is-split .gallery-word--end   { transform: translateY(0.25em); }
  /* Reveal-box grows into a square between the two words */
  .gallery-headline.is-split .gallery-reveal-box {
    width: 4.5em;
    height: 4.5em;
  }
  /* The two "l"s drop flat (90° rotation) → partial frame around the box */
  .gallery-headline.is-split .gallery-word--start .gallery-letter:last-child,
  .gallery-headline.is-split .gallery-word--end .gallery-letter:first-child {
    transform: rotate(90deg);
    transition: transform 1.1s cubic-bezier(0.7, 0, 0.2, 1);
    transform-origin: center center;
  }
  /* Expand phase: words sweep off vertically; reveal-box / carousel
     take the wider current sizing so the image gets more horizontal
     real estate when it lands. */
  .gallery-headline.is-expanded .gallery-word--start {
    transform: translateY(-100vh);
  }
  .gallery-headline.is-expanded .gallery-word--end {
    transform: translateY(100vh);
  }
  .gallery-headline.is-expanded .gallery-reveal-box {
    width: min(90vw, 480px);
    height: min(50vh, 460px);
  }
  .gallery-slide {
    width: min(88vw, 460px);
    height: min(50vh, 460px);
  }
  .gallery-carousel-track {
    height: min(56vh, 480px);
  }
  /* Tighten the section ONLY once the carousel becomes visible
     (the headline phase keeps full padding so the letters / split
     have breathing room). Padding animates smoothly; min-height
     snaps at the end so the white space below the carousel collapses. */
  .gallery {
    transition: padding 0.7s ease;
  }
}

/* ============================================================
   Gallery section: carousel-visible collapse + gradient title +
   subtitle — applies at BOTH tablet portrait AND mobile portrait
   so the title "Gallery" and "Hover over or tap…" subtitle now
   appear on tablet portrait too.
   ============================================================ */
@media (max-width: 1024px) {
  .gallery {
    transition: padding 0.7s ease;
  }
  .gallery:has(.gallery-carousel.is-visible) {
    flex-direction: column;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    min-height: auto;
  }
  .gallery:has(.gallery-carousel.is-visible) .gallery-stage {
    min-height: 0;
    height: min(56vh, 480px);
    margin-top: 3rem;                 /* more space between subtitle and carousel */
  }
  .gallery:has(.gallery-carousel.is-visible) .gallery-headline {
    display: none;
  }
  .gallery:has(.gallery-carousel.is-visible) + .van-banner {
    padding-top: 6rem;                /* more space between carousel and van */
  }

  /* Gradient "Gallery" title — italic, lavender→light gradient, big */
  .gallery:has(.gallery-carousel.is-visible) .gallery-title-top {
    display: block;
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-display);
    font-size: 13vw;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -2px;
    line-height: 1.15;
    background: linear-gradient(135deg, var(--purple-bright) 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding: 0 0.2em 0.2em 0;
    opacity: 0;
    animation: gallery-top-fade 0.6s ease 0.2s forwards;
  }
  .gallery:has(.gallery-carousel.is-visible) .gallery-subtitle-top {
    display: block;
    margin: 0.4rem auto 0.5rem;
    max-width: 92%;
    text-align: center;
    font-family: var(--font-display);
    font-size: 5.5vw;
    font-weight: 500;
    line-height: 1.2;
    color: #1a0f2e;
    opacity: 0;
    animation: gallery-top-fade 0.6s ease 0.45s forwards;
  }
  @keyframes gallery-top-fade {
    to { opacity: 1; }
  }
}

/* ============================================================
   Gallery title + subtitle at desktop / laptop / tablet landscape.
   At ≥1025 px the gallery section keeps its flex-row layout, so
   the title + subtitle render absolutely-positioned at the top
   instead of flowing above the carousel. Sized with clamp() so
   the title doesn't blow up at desktop widths.
   ============================================================ */
@media (min-width: 1025px) {
  /* Push the carousel further down so there's clear space below the
     title + subtitle (which are absolutely positioned at top: 3 rem). */
  .gallery:has(.gallery-carousel.is-visible) {
    padding-top: 13rem;
  }
  /* Carousel holders 25 % bigger so more of each image is exposed */
  .gallery-carousel-track {
    height: min(75vh, 700px);
  }
  .gallery-slide {
    width: min(50vw, 575px);
    height: min(70vh, 650px);
  }
  .gallery-headline.is-expanded .gallery-reveal-box {
    width: min(50vw, 575px);
    height: min(70vh, 650px);
  }

  .gallery:has(.gallery-carousel.is-visible) .gallery-title-top {
    display: block;
    position: absolute;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    margin: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 800;
    font-style: italic;
    letter-spacing: -2px;
    line-height: 1.15;
    background: linear-gradient(135deg, var(--purple-bright) 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding: 0 0.2em 0.2em 0;
    opacity: 0;
    animation: gallery-top-fade-d 0.6s ease 0.2s forwards;
    pointer-events: none;
  }
  .gallery:has(.gallery-carousel.is-visible) .gallery-subtitle-top {
    display: block;
    position: absolute;
    top: calc(3rem + clamp(3rem, 6vw, 5.5rem) * 1.15 + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    margin: 0;
    max-width: 90%;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.6vw, 1.7rem);
    font-weight: 500;
    line-height: 1.25;
    color: #1a0f2e;
    opacity: 0;
    animation: gallery-top-fade-d 0.6s ease 0.45s forwards;
    pointer-events: none;
  }
  @keyframes gallery-top-fade-d {
    to { opacity: 1; }
  }
}

/* ----- Tablet portrait only: wider carousel frames so more of each
   image is exposed (more horizontal real estate at 481–1024 px). ----- */
@media (min-width: 481px) and (max-width: 1024px) {
  .gallery-slide {
    width: min(80vw, 700px);
    height: min(55vh, 540px);
  }
  .gallery-carousel-track {
    height: min(60vh, 580px);
  }
  .gallery-headline.is-expanded .gallery-reveal-box {
    width: min(82vw, 720px);
    height: min(55vh, 540px);
  }
  /* Stage needs to be tall enough to host the wider carousel */
  .gallery:has(.gallery-carousel.is-visible) .gallery-stage {
    height: min(60vh, 580px);
  }
}

/* Hidden at every other tier AND during the gallery intro phase */
.gallery-title-top,
.gallery-subtitle-top { display: none; }

/* =====================================================================
   SERVICE SUBPAGES + GROUPED SERVICES MENU
   ===================================================================== */

/* --- Desktop pill dropdown: two labeled groups (Residential / Commercial) --- */
.pill-dropdown-menu--groups {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 440px;
  padding: 0.85rem 0.9rem;
}
.pill-dropdown-group { min-width: 200px; }
.pill-dropdown-group > a {
  display: block;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--purple-deep);
  padding: 0.45rem 0.9rem 0.3rem;
}
.pill-dropdown-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* --- Mobile menu: grouped services (flat list, headers link to the hubs) --- */
.mobile-menu-sub .mobile-menu-group a {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-deep);
  margin-top: 0.3rem;
}
.mobile-menu-sub .mobile-menu-svc a { font-size: 1.18rem; }
.mobile-menu-services.is-open .mobile-menu-sub { max-height: 480px; }

/* --- Service page: breadcrumbs --- */
.svc-crumbs {
  max-width: 1120px;
  margin: 1.5rem auto 0;
  padding: 0 clamp(1.2rem, 4vw, 2rem);
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: #6b6b76;
}
.svc-crumbs a { color: var(--purple); text-decoration: none; }
.svc-crumbs a:hover { text-decoration: underline; }

/* --- Service page: intro prose --- */
.svc-copy {
  max-width: 780px;
  margin: 0 auto;
  padding: 2.4rem clamp(1.2rem, 4vw, 2rem) 0;
  font-family: var(--font-body);
  color: #3a3a44;
}
.svc-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0 0 1rem;
  color: var(--purple-deep);
}
.svc-copy p { line-height: 1.65; margin: 0 0 1.05rem; font-size: 1.03rem; }

/* --- Service page: FAQ --- */
.svc-faq {
  max-width: 780px;
  margin: 0 auto;
  padding: 1.4rem clamp(1.2rem, 4vw, 2rem) 0;
}
.svc-faq h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  color: var(--purple-deep);
  margin: 0 0 0.9rem;
}
.svc-faq details {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(196, 181, 253, 0.5);
  border-radius: 14px;
  padding: 0.95rem 1.15rem;
  margin-bottom: 0.7rem;
}
.svc-faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--purple-deep);
  font-size: 1.02rem;
}
.svc-faq p {
  margin: 0.7rem 0 0;
  line-height: 1.6;
  color: #3a3a44;
  font-family: var(--font-body);
}

/* --- Service page: CTA band + related links --- */
.svc-cta { text-align: center; padding: 2.6rem 1.2rem 0.6rem; }
.svc-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--purple), var(--purple-bright));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.svc-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(124, 58, 237, 0.45); }
.svc-cta-tel {
  display: block;
  margin-top: 0.85rem;
  color: var(--purple);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}
.svc-related {
  max-width: 780px;
  margin: 0 auto;
  padding: 1.6rem clamp(1.2rem, 4vw, 2rem) 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #6b6b76;
  text-align: center;
}
.svc-related a { color: var(--purple); text-decoration: none; white-space: nowrap; }
.svc-related a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .svc-copy { padding-top: 1.9rem; }
  .svc-cta-btn { font-size: 1rem; padding: 0.85rem 2rem; }
}

/* Four-up variant for the "Explore Other Services" grid on service pages */
.services-grid--four {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1290px;
  gap: 2.2rem 1.6rem;
}