/* =====================================================================
   SUPERSCAPES — Custom water features & rockscapes, Jackson MS metro
   Editorial-luxury system on a deep-green palette.
   Forked structurally from the Surplusify build; fully re-skinned and
   upgraded per the taste design guidance (premium fonts, macro
   whitespace, nested "double-bezel" cards, custom cubic-bezier motion,
   tinted shadows, sentence-case voice, semantic structure).
   ===================================================================== */

/* --- Self-hosted fonts (premium; no banned families) --- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-Variable.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* Local fallbacks bundled with the fork (used only if woff2 fails) */
@font-face {
  font-family: 'Calistoga';
  src: url('../fonts/Calistoga-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Brand palette — greens carry structure, orange is accent only */
  --green:          #425140;
  --green-dark:     #2A3826;
  --green-darkest:  #182016;
  --green-deepest:  #0F140D;
  --green-light:    #ADC7A5;
  --orange:         #FF501A;
  --orange-deep:    #E03D0C;

  --dark:           #182016;
  --text:           #2A3826;
  --text-soft:      #5C6B55;
  --text-on-dark:   #EDF0EA;
  --text-on-dark-soft: rgba(237, 240, 234, 0.70);
  --off-white:      #F5F6F3;
  --cream:          #FBFAF6;
  --white:          #FFFFFF;

  --hairline:          rgba(24, 32, 22, 0.10);
  --hairline-strong:   rgba(24, 32, 22, 0.16);
  --hairline-on-dark:  rgba(237, 240, 234, 0.14);
  --surface-on-dark:   rgba(237, 240, 234, 0.05);

  --hero-gradient: linear-gradient(165deg, #2A3826 0%, #182016 58%, #0F140D 100%);

  /* Tinted, soft shadows — green-hued, never harsh black */
  --shadow-sm:     0 2px 10px rgba(24, 32, 22, 0.06);
  --shadow-md:     0 20px 44px -16px rgba(24, 32, 22, 0.20);
  --shadow-lg:     0 44px 90px -28px rgba(24, 32, 22, 0.32);
  --shadow-orange: 0 16px 38px -12px rgba(255, 80, 26, 0.40);

  --radius:      14px;
  --radius-lg:   22px;
  --radius-xl:   34px;
  --radius-pill: 999px;

  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t:      0.5s var(--ease);
  --t-slow: 0.8s var(--ease);

  --container:   1240px;
  --section-pad: clamp(96px, 12vw, 176px);

  --font-display: 'Fraunces', 'Calistoga', Georgia, 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', 'Poppins', system-ui, -apple-system, sans-serif;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
}

/* Fixed film-grain overlay — breaks digital flatness without repaint cost */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { text-decoration: none; color: inherit; transition: color var(--t); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--green-light); color: var(--green-darkest); }

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--dark);
  line-height: 1.08;
  font-weight: 560;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 6.4vw, 5.2rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); }
h3 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); letter-spacing: -0.015em; }
h4 { font-size: clamp(1.05rem, 1.6vw, 1.22rem); font-weight: 600; letter-spacing: -0.01em; }

p { font-size: 1.05rem; color: var(--text-soft); line-height: 1.75; text-wrap: pretty; }

.display-italic { font-style: italic; font-weight: 460; }
.accent-text { color: var(--orange); }

/* --- Layout primitives --- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.section { padding: var(--section-pad) 0; position: relative; }
.section-tight { padding: clamp(64px, 8vw, 110px) 0; position: relative; }
.measure { max-width: 62ch; }

/* Eyebrow tag — precedes major headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
  padding: 7px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  margin-bottom: 22px;
  background: rgba(173, 199, 165, 0.14);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.on-dark .eyebrow,
.dark-band .eyebrow {
  color: var(--green-light);
  border-color: var(--hairline-on-dark);
  background: var(--surface-on-dark);
}

.section-head { max-width: 720px; margin-bottom: clamp(48px, 6vw, 84px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 18px; font-size: 1.12rem; }

/* --- Scroll-reveal (driven by IntersectionObserver in main.js) --- */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
  will-change: transform, opacity;
}
.reveal       { transform: translateY(38px); }
.reveal-left  { transform: translateX(-52px); }
.reveal-right { transform: translateX(52px); }
.reveal-scale { transform: scale(0.93); }
.reveal.active, .reveal-left.active, .reveal-right.active, .reveal-scale.active {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.18s; }
.stagger-3 { transition-delay: 0.28s; }
.stagger-4 { transition-delay: 0.38s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1; filter: none; transform: none; transition: none;
  }
  html { scroll-behavior: auto; }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px 15px 30px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
  position: relative;
}
.btn:active { transform: scale(0.975); }

/* Button-in-button trailing icon */
.btn .btn-ico {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--t-slow), background var(--t);
}
.btn .btn-ico svg { width: 15px; height: 15px; }
.btn:hover .btn-ico { transform: translate(3px, -1px) scale(1.06); }

.btn-primary { background: var(--orange); color: var(--white); box-shadow: var(--shadow-orange); }
.btn-primary .btn-ico { background: rgba(255, 255, 255, 0.18); }
.btn-primary:hover { background: var(--orange-deep); box-shadow: 0 22px 48px -12px rgba(255, 80, 26, 0.5); }

.btn-solid { background: var(--green-darkest); color: var(--text-on-dark); box-shadow: var(--shadow-md); }
.btn-solid .btn-ico { background: rgba(237, 240, 234, 0.12); }
.btn-solid:hover { background: var(--green-dark); }

.btn-light { background: var(--white); color: var(--green-darkest); box-shadow: var(--shadow-md); }
.btn-light .btn-ico { background: rgba(24, 32, 22, 0.08); }
.btn-light:hover { box-shadow: var(--shadow-lg); }

.btn-ghost {
  background: transparent;
  color: inherit;
  padding: 15px 8px;
  gap: 11px;
}
.btn-ghost .btn-ico {
  border: 1px solid currentColor;
  opacity: 0.7;
}
.btn-ghost:hover { color: var(--orange); }
.btn-ghost:hover .btn-ico { opacity: 1; }

.btn-full { width: 100%; justify-content: center; }

/* --- Navigation: detached floating bar (not glued edge-to-edge) --- */
.navbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  padding: 26px 0;
  transition: padding var(--t);
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(20px, 4vw, 34px);
  border-radius: var(--radius-pill);
  transition: background var(--t), box-shadow var(--t), backdrop-filter var(--t), border-color var(--t);
  border: 1px solid transparent;
}
.navbar.scrolled { padding: 14px 0; }
.navbar.scrolled .container {
  background: rgba(251, 250, 246, 0.82);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: var(--hairline);
  box-shadow: var(--shadow-md);
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo-img { height: 38px; width: auto; }
.nav-logo-white { display: block; }
.nav-logo-color { display: none; }
.navbar.scrolled .nav-logo-white { display: none; }
.navbar.scrolled .nav-logo-color { display: block; }

.nav-links { display: flex; align-items: center; gap: 38px; }
.nav-links > li > a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-on-dark-soft);
  position: relative;
}
.nav-links > li > a::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width var(--t);
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--text-on-dark); }
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after { width: 100%; }
.navbar.scrolled .nav-links > li > a { color: var(--text-soft); }
.navbar.scrolled .nav-links > li > a:hover,
.navbar.scrolled .nav-links > li > a.active { color: var(--green-darkest); }

.nav-cta {
  padding: 11px 24px;
  background: var(--orange);
  color: var(--white) !important;
  border-radius: var(--radius-pill);
  font-weight: 600 !important;
  box-shadow: var(--shadow-orange);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--orange-deep); transform: translateY(-2px); }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 30px;
  cursor: pointer;
  z-index: 1001;
  background: none;
  border: none;
}
.menu-toggle span {
  width: 100%; height: 2px;
  background: var(--text-on-dark);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t), background var(--t);
}
.navbar.scrolled .menu-toggle span { background: var(--green-darkest); }
.menu-toggle.open span { background: var(--text-on-dark); }
.menu-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.navbar.menu-open .container {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
body.menu-open { overflow: hidden; }

/* --- Dark band: continuous gradient wrapping hero → positioning → gallery
       (deliberate top section; makes water imagery glow) --- */
.dark-band {
  background: var(--hero-gradient);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}
.dark-band::before {
  content: '';
  position: absolute;
  top: -30%; right: -15%;
  width: 70%; height: 130%;
  background: radial-gradient(ellipse at center, rgba(173, 199, 165, 0.10) 0%, transparent 65%);
  pointer-events: none;
}
.dark-band h1, .dark-band h2, .dark-band h3, .dark-band h4 { color: var(--text-on-dark); }
.dark-band p { color: var(--text-on-dark-soft); }

/* --- Hero (Sensory) --- */
.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 168px 0 clamp(80px, 12vw, 140px);
  position: relative;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-copy { max-width: 620px; }
.hero h1 {
  margin: 22px 0 26px;
  font-weight: 480;
  line-height: 1.02;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1s var(--ease);
}
.hero h1 .accent { color: var(--green-light); font-style: italic; font-weight: 460; }
.hero.in h1 .line > span { transform: translateY(0); }
.hero.in h1 .line-2 > span { transition-delay: 0.12s; }
.hero.in h1 .line-3 > span { transition-delay: 0.24s; }

.hero-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  color: var(--text-on-dark-soft);
  max-width: 36ch;
  margin-bottom: 38px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease) 0.5s, transform 0.9s var(--ease) 0.5s;
}
.hero.in .hero-sub { opacity: 1; transform: none; }
.hero-cta {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease) 0.66s, transform 0.9s var(--ease) 0.66s;
}
.hero.in .hero-cta { opacity: 1; transform: none; }

/* Hero visual — clearly-marked premium placeholder media well */
.hero-visual {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 1.1s var(--ease) 0.3s, transform 1.1s var(--ease) 0.3s;
}
.hero.in .hero-visual { opacity: 1; transform: none; }
.media-well {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 10px;
  background: rgba(237, 240, 234, 0.05);
  border: 1px solid var(--hairline-on-dark);
  box-shadow: var(--shadow-lg), inset 0 1px 1px rgba(255, 255, 255, 0.07);
}
.media-well-inner {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius-xl) - 10px);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(173, 199, 165, 0.22), transparent 55%),
    linear-gradient(160deg, #34442F 0%, #1C2618 70%, #131A10 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-well-inner img,
.media-well-inner video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Animated water-ripple motif so the placeholder still feels alive */
.ripple {
  position: absolute;
  border: 1px solid rgba(173, 199, 165, 0.30);
  border-radius: 50%;
  inset: 50%;
  width: 26px; height: 26px;
  transform: translate(-50%, -50%);
  animation: rippleOut 4.5s var(--ease) infinite;
}
.ripple:nth-child(2) { animation-delay: 1.5s; }
.ripple:nth-child(3) { animation-delay: 3s; }
@keyframes rippleOut {
  0%   { width: 26px; height: 26px; opacity: 0.8; }
  100% { width: 78%; height: 70%; opacity: 0; }
}
.placeholder-tag {
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-light);
  background: rgba(15, 20, 13, 0.62);
  border: 1px solid var(--hairline-on-dark);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  z-index: 3;
}

/* --- Positioning strip --- */
.positioning { text-align: center; }
.positioning .container { max-width: 1000px; }
.positioning p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.32;
  color: var(--text-on-dark);
  font-weight: 420;
  letter-spacing: -0.015em;
}
.positioning strong { color: var(--green-light); font-weight: 560; font-style: italic; }

/* --- Gallery / Transformations --- */
.gallery .section-head { text-align: center; margin-left: auto; margin-right: auto; }

.ba-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--hairline-on-dark);
  background: rgba(237, 240, 234, 0.04);
  box-shadow: var(--shadow-lg);
  margin-bottom: 28px;
  position: relative;
}
.ba-feature .ba-side { position: relative; aspect-ratio: 4 / 3; }
.ba-feature .ba-side + .ba-side { border-left: 1px solid var(--hairline-on-dark); }
.ba-fill {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.ba-fill.before { background: linear-gradient(150deg, #2E3A28, #1A2215); }
.ba-fill.after  { background:
  radial-gradient(circle at 65% 30%, rgba(173,199,165,0.26), transparent 55%),
  linear-gradient(150deg, #3A4B33, #1E2918); }
.ba-fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-label {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-darkest);
  background: var(--green-light);
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  z-index: 2;
}
.ba-fill.after .ba-label { background: var(--orange); color: var(--white); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.gallery-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline-on-dark);
  background:
    radial-gradient(circle at 40% 30%, rgba(173,199,165,0.18), transparent 60%),
    linear-gradient(160deg, #313F2B, #19210F);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  transition: transform var(--t-slow);
}
.gallery-tile:nth-child(2) { aspect-ratio: 1 / 1.18; }
.gallery-tile:nth-child(3) { aspect-ratio: 1 / 0.86; }
.gallery-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery-tile:hover { transform: translateY(-6px); }
.gallery-tile span {
  position: relative;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-light);
  z-index: 2;
}

/* --- Light body sections (consistent warm family — not random darks) --- */
.bg-cream     { background: var(--cream); }
.bg-offwhite  { background: var(--off-white); }

/* Double-bezel card primitive: outer shell + inner core, concentric radii */
.bezel {
  background: rgba(24, 32, 22, 0.035);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: 9px;
}
.bezel-core {
  background: var(--white);
  border-radius: calc(var(--radius-xl) - 9px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
  height: 100%;
}

/* --- Packages --- */
.packages .section-head { text-align: center; margin-left: auto; margin-right: auto; }
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.pkg { display: flex; }
.pkg .bezel { width: 100%; transition: transform var(--t-slow); }
.pkg:hover .bezel { transform: translateY(-8px); }
.pkg-core {
  display: flex;
  flex-direction: column;
  padding: 40px 34px 36px;
  height: 100%;
}
.pkg.featured .bezel {
  background: var(--green-dark);
  border-color: var(--green-dark);
}
.pkg.featured .bezel-core {
  background: var(--white);
}
.pkg-flag {
  align-self: flex-start;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--orange);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.pkg-tier {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
}
.pkg-name {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 540;
  color: var(--green-darkest);
  margin: 6px 0 4px;
}
.pkg-price { font-size: 1.02rem; color: var(--text-soft); margin-bottom: 22px; }
.pkg-price b { color: var(--green-darkest); font-weight: 700; }
.pkg-desc {
  font-size: 1rem;
  color: var(--text-soft);
  line-height: 1.7;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
  min-height: 112px;
}
.pkg-specs { display: flex; flex-direction: column; gap: 13px; margin-bottom: 32px; flex-grow: 1; }
.pkg-specs li {
  display: flex;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.45;
}
.pkg-specs svg { flex-shrink: 0; margin-top: 3px; color: var(--green); width: 16px; height: 16px; }
.pkg .btn { margin-top: auto; }
.pkg-foot {
  text-align: center;
  margin-top: 38px;
  font-size: 1.05rem;
  color: var(--text-soft);
}
.pkg-foot a { color: var(--orange); font-weight: 600; }

/* --- Process timeline --- */
.process-timeline {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}
.process-timeline::before {
  content: '';
  position: absolute;
  top: 12px; bottom: 12px;
  left: 27px;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--hairline-strong) 12%, var(--hairline-strong) 88%, transparent);
}
.tl-step {
  position: relative;
  padding-left: 84px;
  padding-bottom: clamp(40px, 5vw, 64px);
}
.tl-step:last-child { padding-bottom: 0; }
.tl-num {
  position: absolute;
  left: 0; top: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--green);
  z-index: 1;
}
.tl-step.active-step .tl-num { background: var(--green-darkest); color: var(--green-light); border-color: var(--green-darkest); }
.tl-step h3 { margin-bottom: 8px; color: var(--green-darkest); }
.tl-step p { max-width: 56ch; }

/* --- Why Superscapes --- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.why-card { display: flex; }
.why-card .bezel { width: 100%; transition: transform var(--t-slow); }
.why-card:hover .bezel { transform: translateY(-6px); }
.why-core { padding: 36px 34px; height: 100%; }
.why-ico {
  width: 52px; height: 52px;
  border-radius: 15px;
  background: rgba(173, 199, 165, 0.22);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.why-ico svg { width: 24px; height: 24px; }
.why-core h3 { color: var(--green-darkest); margin-bottom: 10px; }

/* --- Testimonials (placeholder) --- */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.testi { display: flex; }
.testi .bezel { width: 100%; }
.testi-core { padding: 34px 30px; display: flex; flex-direction: column; height: 100%; }
.testi-stars { display: flex; gap: 3px; margin-bottom: 18px; color: var(--orange); }
.testi-stars svg { width: 17px; height: 17px; }
.testi-quote {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--green-darkest);
  font-weight: 420;
  margin-bottom: 24px;
  flex-grow: 1;
}
.testi-person { display: flex; align-items: center; gap: 14px; }
.testi-avatar {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--green-light);
  color: var(--green-darkest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
}
.testi-name { font-weight: 600; color: var(--green-darkest); font-size: 0.96rem; }
.testi-loc { font-size: 0.85rem; color: var(--text-soft); }
.placeholder-note {
  display: block;
  text-align: center;
  margin-top: 30px;
  font-size: 0.82rem;
  color: var(--text-soft);
  font-style: italic;
}

/* --- Service area --- */
.service { text-align: center; }
.service .container { max-width: 820px; }
.service-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 36px;
}
.service-pills span {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--green-dark);
  padding: 9px 20px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  background: var(--white);
}

/* --- Final CTA --- */
.final-cta { text-align: center; }
.final-cta .container { max-width: 760px; }
.final-cta h2 { color: var(--text-on-dark); margin-bottom: 18px; }
.final-cta p { color: var(--text-on-dark-soft); font-size: 1.15rem; margin-bottom: 38px; }
.final-cta .hero-cta { justify-content: center; }

/* --- Footer --- */
.footer {
  background: var(--green-deepest);
  color: var(--text-on-dark-soft);
  padding: clamp(64px, 8vw, 96px) 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
  gap: 56px;
  margin-bottom: 56px;
}
.footer-logo { height: 42px; width: auto; margin-bottom: 20px; }
.footer-brand p { color: var(--text-on-dark-soft); font-size: 0.96rem; max-width: 340px; }
.footer h4 {
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.footer-links li { margin-bottom: 13px; }
.footer-links a { color: var(--text-on-dark-soft); font-size: 0.95rem; }
.footer-links a:hover { color: var(--green-light); }
.footer-contact p { font-size: 0.95rem; margin-bottom: 12px; color: var(--text-on-dark-soft); }
.footer-contact a:hover { color: var(--green-light); }
.footer-bottom {
  border-top: 1px solid var(--hairline-on-dark);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(237, 240, 234, 0.5);
}

/* --- Subpage hero --- */
.page-hero {
  padding: clamp(150px, 18vw, 220px) 0 clamp(64px, 8vw, 104px);
  text-align: center;
}
.page-hero h1 { margin-bottom: 18px; }
.page-hero p { color: var(--text-on-dark-soft); font-size: 1.15rem; max-width: 600px; margin: 0 auto; }

/* --- Contact / forms --- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}
.contact-info .bezel,
.contact-form-wrap .bezel { height: 100%; }
.contact-info-core { padding: 40px 36px; }
.contact-info-core h3 { color: var(--green-darkest); margin-bottom: 14px; }
.contact-info-core > p { margin-bottom: 32px; }
.contact-detail { display: flex; gap: 16px; margin-bottom: 26px; }
.contact-detail:last-child { margin-bottom: 0; }
.contact-detail-ico {
  width: 46px; height: 46px;
  min-width: 46px;
  border-radius: 13px;
  background: rgba(173, 199, 165, 0.22);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-detail-ico svg { width: 20px; height: 20px; }
.contact-detail h4 { color: var(--green-darkest); margin-bottom: 3px; }
.contact-detail p { font-size: 0.95rem; margin: 0; }
.contact-detail a { color: var(--green); font-weight: 600; }
.contact-detail a:hover { color: var(--orange); }

.contact-form-core { padding: clamp(28px, 4vw, 44px); }
.contact-form-core h3 { color: var(--green-darkest); margin-bottom: 6px; }
.contact-form-core .form-intro { font-size: 0.96rem; margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--green-darkest);
  margin-bottom: 8px;
}
.form-group label .req { color: var(--orange); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--off-white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #9aa593; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(66, 81, 64, 0.10);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-group select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6B55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.form-hp { position: absolute; left: -9999px; }

/* --- Legal pages --- */
.legal { padding: clamp(120px, 16vw, 180px) 0 var(--section-pad); }
.legal .container { max-width: 820px; }
.legal-flag {
  background: rgba(255, 80, 26, 0.07);
  border: 1px solid rgba(255, 80, 26, 0.25);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 0.92rem;
  color: var(--text);
  margin-bottom: 40px;
}
.legal-flag strong { color: var(--orange-deep); }
.legal h1 { margin-bottom: 10px; }
.legal .updated { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 40px; }
.legal h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 40px 0 14px; }
.legal p, .legal li { font-size: 1rem; color: var(--text-soft); line-height: 1.8; }
.legal ul { padding-left: 22px; margin: 14px 0; }
.legal li { list-style: disc; margin-bottom: 8px; }
.legal a { color: var(--green); font-weight: 600; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { order: -1; max-width: 460px; margin: 0 auto; }
  .hero-copy { max-width: 100%; }
  .hero-sub { max-width: 48ch; }
  .pkg-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .pkg-desc { min-height: 0; }
  .why-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    background: rgba(15, 20, 13, 0.94);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transform: translateX(100%);
    transition: transform 0.55s var(--ease);
    z-index: 999;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links > li > a { font-size: 1.5rem; color: var(--text-on-dark); opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .nav-links.open > li > a { opacity: 1; transform: none; }
  .nav-links.open > li:nth-child(1) > a { transition-delay: 0.12s; }
  .nav-links.open > li:nth-child(2) > a { transition-delay: 0.17s; }
  .nav-links.open > li:nth-child(3) > a { transition-delay: 0.22s; }
  .nav-links.open > li:nth-child(4) > a { transition-delay: 0.27s; }
  .nav-links.open > li:nth-child(5) > a { transition-delay: 0.32s; }
  .navbar.scrolled .nav-links > li > a { color: var(--text-on-dark); }
  .menu-toggle { display: flex; }
  .ba-feature { grid-template-columns: 1fr; }
  .ba-feature .ba-side + .ba-side { border-left: none; border-top: 1px solid var(--hairline-on-dark); }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-tile, .gallery-tile:nth-child(2), .gallery-tile:nth-child(3) { aspect-ratio: 1 / 1; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* =====================================================================
   MULTI-PAGE ADDITIONS — cinematic home, service icons, waterfall band,
   services / packages / process pages. (Taste system continued.)
   ===================================================================== */

/* --- Brand service icon (inline sprite, recolorable) --- */
.svc-ico { display: inline-block; fill: currentColor; }

/* Home: suppress the small navbar logo over the hero (big floating logo
   shows instead); it returns once the navbar goes solid on scroll. */
body.home .navbar:not(.scrolled) .nav-logo { opacity: 0; pointer-events: none; }

/* --- Cinematic home hero --- */
.cine-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--text-on-dark);
}
.cine-bg { position: absolute; inset: 0; z-index: 0; }
.cine-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  animation: kenburns 28s var(--ease) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.12) translate(0, 0); }
  to   { transform: scale(1.22) translate(-2.4%, -2%); }
}
.cine-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,20,13,0.52) 0%, rgba(15,20,13,0.22) 34%, rgba(15,20,13,0.42) 68%, rgba(15,20,13,0.85) 100%);
}
.cine-inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(48px, 7vh, 92px); }

.cine-logo {
  position: absolute;
  top: clamp(92px, 12vh, 148px);
  left: clamp(20px, 4vw, 48px);
  z-index: 3;
  opacity: 0;
  transform: translateY(-14px);
  animation: cineLogoIn 1.1s var(--ease) 0.25s forwards;
}
.cine-logo img {
  height: clamp(46px, 6.4vw, 84px);
  width: auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.5));
}
@keyframes cineLogoIn { to { opacity: 1; transform: none; } }

.cine-slogan {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2.7rem, 7.4vw, 6.2rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  max-width: 15ch;
  margin-bottom: 0;
  color: var(--green-light);
}
.cine-slogan .ln { display: block; overflow: hidden; }
.cine-slogan .ln > span { display: block; transform: translateY(116%); animation: lnUp 1s var(--ease) forwards; }
.cine-slogan .ln-1 > span { animation-delay: 0.55s; }
.cine-slogan .ln-2 > span { animation-delay: 0.70s; }
.cine-slogan strong { font-weight: 600; font-style: italic; color: var(--green-light); }
@keyframes lnUp { to { transform: none; } }

.svc-strip { display: flex; flex-wrap: wrap; gap: clamp(18px, 3.4vw, 52px); }
.svc-strip .svc {
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  opacity: 0; transform: translateY(22px);
  animation: svcIn 0.8s var(--ease) forwards;
}
.svc-strip .svc:nth-child(1) { animation-delay: 1.15s; }
.svc-strip .svc:nth-child(2) { animation-delay: 1.28s; }
.svc-strip .svc:nth-child(3) { animation-delay: 1.41s; }
.svc-strip .svc:nth-child(4) { animation-delay: 1.54s; }
.svc-strip .svc:nth-child(5) { animation-delay: 1.67s; }
.svc-strip .svc-ico {
  width: clamp(40px, 4.2vw, 56px); height: auto;
  color: var(--green-light);
  transition: color var(--t), transform var(--t-slow);
}
.svc-strip .svc:hover .svc-ico { color: var(--orange); transform: translateY(-6px) scale(1.07); }
.svc-strip .svc-label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--text-on-dark);
}
@keyframes svcIn { to { opacity: 1; transform: none; } }

.scroll-cue {
  position: absolute; bottom: 20px; left: 50%;
  z-index: 3; transform: translateX(-50%);
  color: var(--text-on-dark-soft);
  opacity: 0; animation: svcIn 0.8s var(--ease) 2s forwards;
}
.scroll-cue svg { width: 26px; height: 26px; animation: bob 2.4s var(--ease) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* --- Waterfall sensory band (the single video placement) --- */
.wf-band {
  position: relative;
  min-height: 76vh;
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--green-darkest);
  color: var(--text-on-dark);
}
.wf-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.wf-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(15,20,13,0.80) 0%, rgba(15,20,13,0.46) 46%, rgba(15,20,13,0.16) 100%);
}
.wf-inner { position: relative; z-index: 2; }
.wf-inner h2 { color: var(--text-on-dark); max-width: 13ch; }
.wf-inner p { color: var(--text-on-dark-soft); max-width: 44ch; margin-top: 18px; }

/* --- Home: refined CTA + page menu cards --- */
.home-cta { text-align: center; }
.home-cta .container { max-width: 1080px; }
.home-cta .lead { max-width: 600px; margin: 18px auto 0; font-size: 1.15rem; }
.nav-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: clamp(44px, 5vw, 66px);
}
.nav-card { display: flex; text-align: left; }
.nav-card .bezel { width: 100%; transition: transform var(--t-slow); }
.nav-card:hover .bezel { transform: translateY(-7px); }
.nav-card-core {
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 16px; height: 100%;
}
.nav-card .svc-ico { width: 34px; height: auto; color: var(--green); }
.nav-card-name {
  font-family: var(--font-display); font-size: 1.32rem;
  color: var(--green-darkest); font-weight: 560; margin-top: auto;
}
.nav-card-go {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.84rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--orange);
}
.nav-card-go svg { width: 15px; height: 15px; transition: transform var(--t); }
.nav-card:hover .nav-card-go svg { transform: translateX(4px); }

/* --- Services page --- */
.svc-page-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.svc-item { display: flex; }
.svc-item .bezel { width: 100%; transition: transform var(--t-slow); }
.svc-item:hover .bezel { transform: translateY(-6px); }
.svc-item-core { padding: 38px 34px; display: flex; gap: 26px; align-items: flex-start; height: 100%; }
.svc-item .svc-ico { width: 60px; height: auto; color: var(--green); flex-shrink: 0; transition: color var(--t); }
.svc-item:hover .svc-ico { color: var(--orange); }
.svc-item h3 { color: var(--green-darkest); margin-bottom: 9px; }
.svc-item p { font-size: 0.99rem; }

/* --- Active nav link (multi-page) --- */
.nav-links > li > a[aria-current="page"] { color: var(--text-on-dark); }
.nav-links > li > a[aria-current="page"]::after { width: 100%; }
.navbar.scrolled .nav-links > li > a[aria-current="page"] { color: var(--green-darkest); }

@media (max-width: 1024px) {
  .nav-cards { grid-template-columns: 1fr 1fr; }
  .svc-page-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .cine-slogan { font-size: clamp(2.5rem, 12vw, 4rem); }
  .svc-strip { gap: 22px 30px; justify-content: space-between; }
  .svc-strip .svc-label { font-size: 0.7rem; }
  .wf-band { min-height: 64vh; }
  .nav-cards { grid-template-columns: 1fr; }
  .svc-item-core { flex-direction: column; gap: 18px; padding: 30px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .cine-bg img { animation: none; transform: scale(1.05); }
  .cine-slogan .ln > span, .svc-strip .svc, .cine-logo, .scroll-cue { animation: none; opacity: 1; transform: none; }
  .scroll-cue svg { animation: none; }
}

/* =====================================================================
   ONE-PAGER REVISION — morphing brand logo, clean hero, services
   accordion, global eyebrow removal.
   ===================================================================== */

/* Remove the small text pills above section titles, site-wide */
.eyebrow { display: none !important; }

/* New logo sizing — nav (standalone pages) + footer */
.nav-logo-img { height: 30px; }
.footer-logo { height: 34px; }

/* --- Morphing brand logo (home one-pager) --- */
.brand-logo {
  position: fixed;
  left: clamp(20px, 4vw, 48px);
  top: clamp(58px, 13vh, 116px);
  z-index: 1100;
  transform-origin: top left;
  transition: top 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: transform;
  opacity: 0;
  animation: cineLogoIn 1s var(--ease) 0.2s forwards;
}
.brand-logo img {
  display: block;
  height: clamp(104px, 15.5vw, 196px);   /* ~2.5x the previous hero logo */
  width: auto;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5));
}
.navbar.scrolled ~ .brand-logo { top: 15px; transform: scale(0.2); }

/* Home hero: nav links sit aligned to the big logo's vertical middle */
body.home .navbar { padding: 0; }
body.home .navbar .container {
  justify-content: flex-end;
  padding-top: clamp(116px, 21vh, 208px);
  padding-bottom: 16px;
}
body.home .navbar:not(.scrolled) .container {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-color: transparent;
}
body.home .navbar.scrolled .container {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* --- Clean hero (no service strip) --- */
.cine-hero .cine-inner { padding-bottom: clamp(64px, 12vh, 140px); }
.cine-slogan strong { color: var(--green-light); font-weight: 620; font-style: italic; }

/* --- Services expanding accordion --- */
.svc-accordion { background: #3f4d39; }      /* military green — not too dark */
.svc-accordion .section-head h2,
.svc-accordion .section-head p { color: var(--text-on-dark); }
.svc-accordion .section-head p { color: var(--text-on-dark-soft); }
.svc-list { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.svc-bar {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline-on-dark);
  background: #475640;
  height: clamp(92px, 12vh, 118px);
  cursor: pointer;
  transition: height 0.62s var(--ease);
}
.svc-bar:hover, .svc-bar:focus-within, .svc-bar.open { height: clamp(340px, 52vh, 500px); }
.svc-bar:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.svc-bar-bg { position: absolute; inset: 0; z-index: 0; }
.svc-bar-bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity 0.6s var(--ease), transform 1.3s var(--ease);
}
.svc-bar:hover .svc-bar-bg img, .svc-bar:focus-within .svc-bar-bg img, .svc-bar.open .svc-bar-bg img {
  opacity: 1; transform: scale(1);
}
.svc-bar-scrim {
  position: absolute; inset: 0; z-index: 1; opacity: 0;
  background: linear-gradient(90deg, rgba(20,27,18,0.88) 0%, rgba(20,27,18,0.52) 46%, rgba(20,27,18,0.18) 100%);
  transition: opacity 0.5s var(--ease);
}
.svc-bar:hover .svc-bar-scrim, .svc-bar:focus-within .svc-bar-scrim, .svc-bar.open .svc-bar-scrim { opacity: 1; }
.svc-bar-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(20px, 3vw, 38px) clamp(24px, 4vw, 52px);
}
.svc-bar-row { display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); }
.svc-bar .svc-ico { width: clamp(38px, 4.4vw, 54px); height: auto; color: var(--orange); flex-shrink: 0; }
.svc-bar-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 540; letter-spacing: -0.02em;
  color: var(--text-on-dark);
}
.svc-bar-plus {
  margin-left: auto; width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--hairline-on-dark);
  display: flex; align-items: center; justify-content: center;
  color: var(--green-light);
  transition: transform 0.5s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.svc-bar-plus svg { width: 16px; height: 16px; }
.svc-bar:hover .svc-bar-plus, .svc-bar:focus-within .svc-bar-plus, .svc-bar.open .svc-bar-plus {
  transform: rotate(135deg); background: var(--orange); color: #fff; border-color: var(--orange);
}
.svc-bar-detail {
  max-width: 54ch; margin-top: 18px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--ease) 0.08s, transform 0.5s var(--ease) 0.08s;
}
.svc-bar:hover .svc-bar-detail, .svc-bar:focus-within .svc-bar-detail, .svc-bar.open .svc-bar-detail {
  opacity: 1; transform: none;
}
.svc-bar-detail p { color: var(--text-on-dark-soft); font-size: 1.02rem; line-height: 1.7; }
.svc-bar-detail a.svc-bar-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 0.9rem; font-weight: 600; color: var(--orange);
}
.svc-bar-detail a.svc-bar-link svg { width: 15px; height: 15px; transition: transform var(--t); }
.svc-bar-detail a.svc-bar-link:hover svg { transform: translateX(4px); }

@media (max-width: 768px) {
  body.home .navbar .container { padding-top: clamp(92px, 16vh, 140px); }
  .brand-logo img { height: clamp(64px, 19vw, 104px); }
  .navbar.scrolled ~ .brand-logo { transform: scale(0.34); top: 13px; }
  .svc-bar:hover, .svc-bar:focus-within, .svc-bar.open { height: clamp(300px, 62vh, 460px); }
  .svc-bar-name { font-size: clamp(1.35rem, 7vw, 1.9rem); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo { transition: none; animation: none; opacity: 1; }
  .svc-bar, .svc-bar-bg img, .svc-bar-detail, .svc-bar-plus { transition: none; }
}

/* =====================================================================
   REVISION 3 OVERRIDES (cascade-last; supersede earlier rules)
   ===================================================================== */

/* --- Nav: one centered group (logo + menu), never a pill --- */
.navbar { padding: clamp(16px, 3vh, 30px) 0 !important; }
.navbar .container,
body.home .navbar .container,
.navbar.scrolled .container,
body.home .navbar.scrolled .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.4vw, 54px);
  padding-top: 0;
  padding-bottom: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Morphing logo now lives INSIDE the centered nav group */
body.home .brand-logo {
  position: static !important;
  /* transform: none removed in Rev 20 — was blocking entrance slide */
  left: auto; top: auto; z-index: auto;
  /* opacity / animation removed in Rev 20 — entrance handled in Rev 20 block */
  flex: 0 0 auto; display: flex; align-items: center;
}
body.home .brand-logo img {
  height: var(--logo-h, clamp(94px, 11vw, 150px));
  width: auto; display: block;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.42));
  transition: height 0.09s linear;
}
.navbar.scrolled ~ .brand-logo { transform: none !important; }

/* Nav links: orange, no underline, enlarge on hover */
.nav-links > li > a:not(.nav-cta) {
  color: var(--orange) !important;
  font-weight: 600;
  display: inline-block;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-links > li > a:not(.nav-cta)::after { display: none !important; }
.nav-links > li > a:not(.nav-cta):hover { transform: scale(1.16); color: var(--orange-deep); }

/* Free Consultation: arrow + enlarge (arrow enlarges more) */
.nav-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: var(--orange) !important;
  color: #fff !important;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta .btn-ico {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.4s var(--ease);
}
.nav-cta .btn-ico svg { width: 13px; height: 13px; }
.nav-cta:hover { transform: scale(1.07); background: var(--orange-deep) !important; }
.nav-cta:hover .btn-ico { transform: scale(1.45) translateX(2px); }

/* --- Hero slogan: lighter green, no clipping, match heading font --- */
.cine-hero .cine-inner { padding-bottom: clamp(56px, 11vh, 130px); }
.cine-slogan {
  font-family: var(--font-display);
  font-weight: 560;
  font-style: normal;
  color: #C9DCC0;
  line-height: 1.16;
  max-width: 16ch;
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  animation: cineLogoIn 1s var(--ease) 0.3s forwards;
}
.cine-slogan .ln { overflow: visible; padding-bottom: 0.06em; }
.cine-slogan .ln > span { transform: none !important; animation: none !important; display: block; }
.cine-slogan strong { font-weight: 800; font-style: normal; color: #C9DCC0; }

/* --- Services accordion fixes --- */
.svc-accordion .section-head { text-align: center; }
.svc-bar { height: clamp(106px, 13vh, 134px); overflow: hidden; }
.svc-bar:hover, .svc-bar:focus-within, .svc-bar.open { height: clamp(346px, 52vh, 504px); }
.svc-bar-inner { justify-content: center; }
.svc-bar-row { justify-content: center; }
.svc-bar:hover .svc-bar-row,
.svc-bar:focus-within .svc-bar-row,
.svc-bar.open .svc-bar-row { justify-content: flex-start; }
.svc-bar-name { line-height: 1.12; font-size: clamp(1.35rem, 2.4vw, 2.05rem); }
.svc-bar-detail {
  max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; transform: none;
  transition: max-height 0.55s var(--ease), opacity 0.45s var(--ease), margin-top 0.4s var(--ease);
}
.svc-bar:hover .svc-bar-detail,
.svc-bar:focus-within .svc-bar-detail,
.svc-bar.open .svc-bar-detail { max-height: 300px; opacity: 1; margin-top: 18px; transform: none; }
.svc-bar-plus {
  position: absolute; right: clamp(20px, 3vw, 40px); top: 50%;
  margin: 0; transform: translateY(-50%);
  opacity: 0; transition: transform 0.5s var(--ease), opacity 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.svc-bar:hover .svc-bar-plus,
.svc-bar:focus-within .svc-bar-plus,
.svc-bar.open .svc-bar-plus {
  opacity: 1; transform: translateY(-50%) rotate(135deg);
  background: var(--orange); color: #fff; border-color: var(--orange);
}

/* --- 'Sound' section: centered text + square video card --- */
.wf-band {
  position: relative; min-height: auto; overflow: visible;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-darkest);
  padding: var(--section-pad) 0;
}
.wf-grid {
  display: flex; flex-wrap: wrap;
  gap: clamp(28px, 4vw, 60px);
  align-items: center; justify-content: center;
}
.wf-text { width: clamp(280px, 38vw, 440px); }
.wf-text h2 { font-family: var(--font-display); color: var(--text-on-dark); }
.wf-text p { color: var(--text-on-dark-soft); margin-top: 16px; }
.wf-card {
  width: clamp(280px, 38vw, 440px);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--hairline-on-dark);
  box-shadow: var(--shadow-lg);
}
.wf-card video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Footer logo 3x --- */
.footer-logo { height: clamp(80px, 9vw, 104px) !important; }

@media (max-width: 768px) {
  .navbar .container { gap: 16px; justify-content: space-between; }
  body.home .brand-logo img { height: var(--logo-h, clamp(64px, 17vw, 96px)); }
  .nav-links { /* mobile overlay handled earlier */ }
  .wf-text, .wf-card { width: min(92vw, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  .cine-slogan, body.home .brand-logo { animation: none; opacity: 1; transform: none; }
  body.home .brand-logo img { transition: none; }
}

/* =====================================================================
   REVISION 4 OVERRIDES (cascade-last) — nav stays put while only the
   logo scales; CTA one line; slogan smaller; services no-jump.
   ===================================================================== */

/* Navbar: transparent region; empty space must not block clicks */
.navbar { padding: 0 !important; pointer-events: none; }
.navbar .container,
body.home .navbar .container,
.navbar.scrolled .container,
body.home .navbar.scrolled .container {
  position: relative;
  min-height: clamp(96px, 15vh, 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
}
.navbar .nav-links,
.navbar .brand-logo,
.navbar .menu-toggle { pointer-events: auto; }

/* Logo: absolute on the left, scales IN PLACE (transform) so the
   centered nav never moves as it shrinks on scroll */
body.home .brand-logo {
  position: absolute !important;
  left: clamp(20px, 4vw, 52px);
  top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center;
}
body.home .brand-logo img {
  height: clamp(92px, 11vw, 148px) !important;
  width: auto;
  transform-origin: left center;
  transform: scale(var(--logo-scale, 1));
  transition: transform 0.09s linear;
}

/* Nav links: centered cluster, fixed position regardless of logo size */
.navbar .nav-links { margin: 0 auto; }

/* Free Consultation: never wraps; arrow sits at the far right and, on
   hover, its circle grows to ~the pill height and aligns to the edge */
.nav-cta {
  white-space: nowrap;
  padding: 10px 10px 10px 26px !important;
  gap: 14px !important;
  overflow: visible;
}
.nav-cta .btn-ico {
  width: 30px; height: 30px;
  transform-origin: center;
}
.nav-cta:hover { transform: scale(1.05); }
.nav-cta:hover .btn-ico { transform: scale(1.5) translateX(1px); }

/* Hero slogan: smaller */
.cine-slogan { font-size: clamp(2rem, 5vw, 4.4rem) !important; }

/* --- Services: header pinned top-left; never jumps on expand --- */
.svc-bar-inner {
  justify-content: flex-start !important;
  padding-top: clamp(26px, 4.2vh, 42px);
  padding-left: clamp(20px, 2.4vw, 30px);
  padding-right: clamp(56px, 6vw, 76px);
}
.svc-bar-row,
.svc-bar:hover .svc-bar-row,
.svc-bar:focus-within .svc-bar-row,
.svc-bar.open .svc-bar-row { justify-content: flex-start !important; }
.svc-bar-name { line-height: 1.14; }

/* Packages + Sound headings: provably the same display font */
.packages .section-head h2,
.wf-text h2 {
  font-family: var(--font-display) !important;
  font-weight: 560;
  font-style: normal;
}

@media (max-width: 768px) {
  .navbar .container,
  body.home .navbar .container { min-height: 76px; justify-content: flex-end; }
  body.home .brand-logo img { height: clamp(58px, 15vw, 88px) !important; }
  .navbar .menu-toggle { margin-left: auto; }
}

/* =====================================================================
   REVISION 5 OVERRIDES (cascade-last) — 2x drifting logo that morphs
   to the S home-button, one-line slogan, universal arrow buttons.
   ===================================================================== */

/* Kill the hero background zoom */
.cine-bg img { animation: none !important; transform: none !important; }

/* Brand logo: big wordmark floats in + drifts very slowly; on scroll it
   shrinks and crossfades into the S mark (which is the Home button). */
body.home .brand-logo {
  position: absolute !important;
  left: clamp(20px, 4vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  display: block; width: auto; height: auto;
}
body.home .brand-logo .logo-full {
  display: block;
  height: var(--logo-h, clamp(170px, 20vw, 290px)) !important;
  width: auto;
  opacity: calc(1 - var(--logo-p, 0));
  transform: none;
  transform-origin: left center;
  transition: height 0.08s linear, opacity 0.22s linear;
  animation: logoFloatIn 1.4s var(--ease) 0.15s both,
             logoDrift 34s ease-in-out 1.7s infinite alternate;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
}
body.home .brand-logo .logo-mark {
  position: absolute;
  left: 0; top: 50%;
  height: clamp(40px, 5vw, 54px);
  width: auto;
  transform: translateY(-50%);
  opacity: var(--logo-p, 0);
  transition: opacity 0.22s linear;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.42));
}
@keyframes logoFloatIn {
  from { transform: translateX(-190px); }
  to   { transform: translateX(0); }
}
@keyframes logoDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(44px); }
}

/* Slogan: one line */
.cine-slogan {
  white-space: nowrap !important;
  font-size: clamp(1.35rem, 5.2vw, 3.9rem) !important;
  max-width: none !important;
}
.cine-slogan .ln,
.cine-slogan .ln > span { overflow: visible !important; white-space: nowrap; }

/* Nav: slightly more spacing between links */
.navbar .nav-links { gap: clamp(34px, 3.4vw, 56px) !important; }

/* Every pill button: arrow grows to the pill side on hover (like nav-cta) */
.btn { padding-right: 12px; overflow: visible; }
.btn-full { padding-right: 12px; }
.btn .btn-ico {
  width: 32px; height: 32px;
  transform-origin: center;
  transition: transform 0.42s var(--ease) !important;
}
.btn:hover { transform: scale(1.04); }
.btn:hover .btn-ico { transform: scale(1.5) !important; }
.btn:active { transform: scale(0.985); }

@media (max-width: 768px) {
  body.home .brand-logo .logo-full { height: var(--logo-h, clamp(96px, 30vw, 150px)) !important; }
  body.home .brand-logo .logo-mark { height: 34px; }
  .cine-slogan { font-size: clamp(0.85rem, 4.4vw, 1.8rem) !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .brand-logo .logo-full { animation: none !important; }
}

/* =====================================================================
   REVISION 6 OVERRIDES (cascade-last) — two-image logo (UPERSCAPES
   rolls behind the S, S rises into nav), slower far float-in,
   lighter slogan base weight, nav nudged down.
   ===================================================================== */

/* Slogan: base text less bold; "outdoors" stays bold */
.cine-slogan { font-weight: 400 !important; }
.cine-slogan strong { font-weight: 800 !important; }

/* Nav nudged down so links sit at the middle of the settled S */
body.home .navbar { padding-top: 16px !important; }

/* Brand logo = two stacked images on the original canvas */
body.home .brand-logo {
  position: absolute !important;
  left: clamp(20px, 4vw, 56px);
  top: 50%;
  transform: translateY(calc(-50% - var(--logo-p, 0) * 10px));
  display: block;
}
body.home .logo-stack {
  position: relative;
  display: block;
  animation: logoFloatIn 2.4s var(--ease) 0.25s both;
}
body.home .logo-s,
body.home .logo-word {
  height: var(--logo-h, clamp(170px, 20vw, 290px)) !important;
  width: auto;
  transition: height 0.08s linear;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.42));
}
body.home .logo-s {           /* the S — front, stays, becomes the home button */
  display: block;
  position: relative;
  z-index: 2;
}
body.home .logo-word {        /* UPERSCAPES — behind the S; rolls out left on scroll */
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  transform: translateX(calc(var(--logo-p, 0) * -300px));
  opacity: clamp(0, calc(1 - var(--logo-p, 0) * 1.7), 1);
  transition: opacity 0.12s linear;
}
@keyframes logoFloatIn {
  from { transform: translateX(-460px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@media (max-width: 768px) {
  body.home .logo-s,
  body.home .logo-word { height: var(--logo-h, clamp(96px, 30vw, 150px)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .logo-stack { animation: none !important; }
}

/* =====================================================================
   REVISION 7 OVERRIDES (cascade-last) — 2.5x logo, fade-in entrance,
   UPERSCAPES slides into the S (no fade) then S shrinks & rises,
   fixed top gradient overlay framing the nav.
   ===================================================================== */

/* Fixed full-viewport gradient that frames the nav and stays on scroll */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 990;                 /* above page content, below the navbar (1000) */
  pointer-events: none;
  background: url('../images/gradient-overlay.png') center top / 100% 100% no-repeat;
}

/* Brand logo: bigger, fades in, two-image scroll choreography */
body.home .brand-logo {
  position: absolute !important;
  left: clamp(20px, 4vw, 56px);
  top: 50%;
  transform: translateY(calc(-50% - var(--s-rise, 0px)));
}
body.home .logo-stack {
  position: relative;
  display: block;
  overflow: hidden;             /* clips UPERSCAPES as it slides into the S */
  animation: logoFadeIn 1.8s var(--ease) 0.2s both;
}
@keyframes logoFadeIn { from { opacity: 0; } to { opacity: 1; } }
body.home .logo-s,
body.home .logo-word {
  height: var(--logo-h, clamp(300px, 42vw, 560px)) !important;
  width: auto;
  transition: height 0.08s linear;
}
body.home .logo-s {
  display: block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.42));
}
body.home .logo-word {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  opacity: 1 !important;        /* no fade — it disappears INTO the S */
  transform: translateX(calc(var(--word-x, 0) * -100%));
  transition: transform 0.1s linear;
}

@media (max-width: 768px) {
  body.home .logo-s,
  body.home .logo-word { height: var(--logo-h, clamp(150px, 44vw, 320px)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .logo-stack { animation: none !important; }
}

/* =====================================================================
   REVISION 8 OVERRIDES (cascade-last)
   - Nav overlay = pure CSS gradient (no PNG)
   - Hero logo ~2x: anchored top-left so big extends into hero; on
     scroll the S shrinks toward top-left, landing at the nav line.
   ===================================================================== */

/* CSS gradient overlay — #414E3B arch fading to transparent down */
.nav-overlay {
  background:
    radial-gradient(
      ellipse 132% 72% at 50% -8%,
      rgba(65, 78, 59, 0.95) 0%,
      rgba(65, 78, 59, 0.78) 16%,
      rgba(65, 78, 59, 0.40) 36%,
      rgba(65, 78, 59, 0.12) 58%,
      rgba(65, 78, 59, 0.00) 78%
    ) !important;
}

/* Compact 80px nav bar so the settled small-S center (top 14 + 26 = 40)
   matches the centered nav-links (80 / 2 = 40). They share a line. */
body.home .navbar { padding: 0 !important; }
body.home .navbar .container,
body.home .navbar.scrolled .container {
  min-height: 80px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Brand logo anchored top-left; no vertical centering — the big logo
   extends down into the hero; shrinking pulls toward the top-left
   corner so the small S lands precisely at the nav line. */
body.home .brand-logo {
  position: absolute !important;
  left: clamp(20px, 4vw, 56px);
  top: 14px !important;
  /* transform: none removed in Rev 20 — was blocking entrance slide */
  transform-origin: top left;
}
body.home .logo-stack {
  position: relative;
  display: block;
  overflow: hidden;                /* clips UPERSCAPES as it slides into S */
  animation: logoFadeIn 1.8s var(--ease) 0.2s both;
}
body.home .logo-s,
body.home .logo-word {
  height: var(--logo-h, clamp(420px, 56vw, 1000px)) !important;
  width: auto;
  transition: height 0.08s linear;
}
body.home .logo-s {
  display: block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.42));
}
body.home .logo-word {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  opacity: 1 !important;
  transform: translateX(calc(var(--word-x, 0) * -100%));
  transition: transform 0.12s linear;
}

@media (max-width: 768px) {
  body.home .logo-s,
  body.home .logo-word { height: var(--logo-h, clamp(190px, 60vw, 480px)) !important; }
}

/* =====================================================================
   REVISION 9 OVERRIDES (cascade-last) — actually win the cascade.

   Rev 4 had a `body.home .brand-logo img { height: ... !important;
   transform: scale(var(--logo-scale)) }` rule at specificity (0,2,2)
   that was beating every later (0,2,1) rule with the same !important
   flag. That's why the logo was stuck at the old size and not
   animating. Rev 9 uses 4-class chains (0,4,1) so it definitively
   wins over Rev 4's image rule.
   ===================================================================== */

body.home .brand-logo .logo-stack .logo-s,
body.home .brand-logo .logo-stack .logo-word {
  height: var(--logo-h, clamp(420px, 56vw, 1000px)) !important;
  width: auto !important;
  transform-origin: left center !important;
}
body.home .brand-logo .logo-stack .logo-s {
  transform: none !important;
  transition: height 0.08s linear !important;
}
body.home .brand-logo .logo-stack .logo-word {
  transform: translateX(calc(var(--word-x, 0) * -100%)) !important;
  opacity: 1 !important;
  transition: height 0.08s linear, transform 0.12s linear !important;
}

/* Bigger, denser nav gradient — ~50% taller, less transparent */
.nav-overlay {
  background:
    radial-gradient(
      ellipse 130% 108% at 50% -8%,
      rgba(65, 78, 59, 1.00) 0%,
      rgba(65, 78, 59, 0.92) 22%,
      rgba(65, 78, 59, 0.65) 48%,
      rgba(65, 78, 59, 0.28) 72%,
      rgba(65, 78, 59, 0.00) 92%
    ) !important;
}

@media (max-width: 768px) {
  body.home .brand-logo .logo-stack .logo-s,
  body.home .brand-logo .logo-stack .logo-word {
    height: var(--logo-h, clamp(190px, 60vw, 480px)) !important;
  }
}

/* =====================================================================
   REVISION 10 OVERRIDES (cascade-last)
   - Logo: shrunk to a sensible hero size (was ridiculous)
   - Gradient: actual ARCH shape (more circular ellipse) + fades higher
   ===================================================================== */

body.home .brand-logo .logo-stack .logo-s,
body.home .brand-logo .logo-stack .logo-word {
  height: var(--logo-h, clamp(240px, 21vw, 460px)) !important;
}
@media (max-width: 768px) {
  body.home .brand-logo .logo-stack .logo-s,
  body.home .brand-logo .logo-stack .logo-word {
    height: var(--logo-h, clamp(140px, 38vw, 280px)) !important;
  }
}

/* True arch: a more circular ellipse anchored above the viewport so
   the curve at sides is visible and the gradient fades higher up. */
.nav-overlay {
  background:
    radial-gradient(
      ellipse 62% 48% at 50% -8%,
      rgba(65, 78, 59, 1.00) 0%,
      rgba(65, 78, 59, 0.94) 22%,
      rgba(65, 78, 59, 0.60) 55%,
      rgba(65, 78, 59, 0.15) 85%,
      rgba(65, 78, 59, 0.00) 100%
    ) !important;
}

/* =====================================================================
   REVISION 11 OVERRIDES (cascade-last)
   - Fix "box around the S": drop-shadow was on the imgs, getting clipped
     by .logo-stack { overflow: hidden }. Move it to .brand-logo so the
     shadow follows the S's actual alpha shape.
   - Nav bar grows so the (1.5×) small-S vertical center lines up with
     the nav-links horizontally.
   ===================================================================== */

body.home .brand-logo {
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.40));
}
body.home .brand-logo .logo-stack .logo-s,
body.home .brand-logo .logo-stack .logo-word {
  filter: none !important;
}

/* Container tall enough that nav-links center == small S center.
   S top = 14, S height = 75 → S center = 51.5  →  min-height = 103. */
body.home .navbar .container,
body.home .navbar.scrolled .container {
  min-height: 103px !important;
}

/* Rev 12 reverted (it constrained .brand-logo to 75px which made
   .logo-stack { overflow: hidden } clip the big logo to a sliver, and
   it broke the centered nav layout). Will solve the uniform-gap goal
   differently next round. */

/* (Rev 12 "hide brand-logo" temporary screenshot rule removed.) */

/* =====================================================================
   REVISION 13 — single combined logo, fixed-position element animated
   by JS between BIG (hero) and SMALL (nav slot). A `.logo-slot`
   placeholder lives in the nav row to reserve the small position so
   it lands inside the centered flex group with uniform gap.
   ===================================================================== */

/* Brand logo: single element, fixed-positioned, JS-controlled */
body.home .brand-logo {
  display: block !important;
  position: fixed !important;
  top: 110px;                    /* JS overrides on load */
  left: 80px;                    /* JS overrides on load */
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: 1001 !important;
  /* transform: none + animation: none removed in Rev 20 — were blocking the entrance slide. */
  opacity: 1;
  pointer-events: auto;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.42));
}
body.home .brand-logo img {
  display: block !important;
  width: auto !important;
  height: 200px;                 /* JS overrides on load */
  max-width: none !important;
  max-height: none !important;
  filter: none !important;       /* shadow is on parent */
}

/* Invisible placeholder in the nav row sized like the small logo so
   the destination "slot" is a real flex item with the same gap. */
body.home .logo-slot {
  display: block;
  flex-shrink: 0;
  height: 36px;
  width: 120px;                  /* aspect ≈ 3.35 × 36 */
  visibility: hidden;
}

/* Nav row: centered flex group [logo-slot, Services, Packages, Process,
   Contact, CTA] with uniform gap. nav-links promotes its li children. */
body.home .navbar .container,
body.home .navbar.scrolled .container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(34px, 3.4vw, 56px) !important;
  min-height: 80px !important;
  padding-left: clamp(20px, 4vw, 56px) !important;
  padding-right: clamp(20px, 4vw, 56px) !important;
}
body.home .navbar .nav-links {
  display: contents !important;
  margin: 0 !important;
  gap: 0 !important;
}

@media (max-width: 768px) {
  body.home .logo-slot { width: 100px; height: 30px; }
  body.home .navbar .container { justify-content: flex-end !important; gap: 12px !important; }
  body.home .navbar .nav-links { display: flex !important; }
}

/* =====================================================================
   REVISION 14 — smooth one-shot transition between BIG and SMALL.
   JS no longer interpolates every frame; it just toggles between two
   end states. CSS animates the change.
   ===================================================================== */

body.home .brand-logo {
  transition:
    top  0.7s cubic-bezier(0.4, 0, 0.2, 1),
    left 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.home .brand-logo img {
  transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@media (prefers-reduced-motion: reduce) {
  body.home .brand-logo,
  body.home .brand-logo img { transition: none !important; }
}

/* =====================================================================
   REVISION 15 — gradient inverted to a vignette/frame.
   Transparent ellipse sits just below the top of the viewport, so the
   top stays a solid green band (backs the nav nicely) and the sides
   and bottom are framed too. The middle is clear so the hero photo
   reads through.
   ===================================================================== */

.nav-overlay {
  background:
    radial-gradient(
      ellipse 150% 79% at 50% 87%,
      rgba(65, 78, 59, 0)    0%,
      rgba(65, 78, 59, 0)    98%,
      rgba(65, 78, 59, 1.00) 100%
    ) !important;
}

/* =====================================================================
   REVISION 16 — soft blob bleeds at section transitions.
   Each section gets a wide, short radial blob at its top in the section's
   own background color, extending UP into the section above as a fade
   to transparent. Creates a smooth color blend between sections.
   ===================================================================== */

.svc-accordion,
.wf-band,
.packages,
.process,
.footer { position: relative; }

.svc-accordion::before,
.wf-band::before,
.packages::before,
.process::before,
.footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -90px;
  height: 90px;
  pointer-events: none;
  z-index: 1;
}

/* Hero (dark photo) → Services (military green #3f4d39) */
.svc-accordion::before {
  background: radial-gradient(ellipse 90% 100% at 50% 100%,
    rgba(63, 77, 57, 1) 0%, rgba(63, 77, 57, 1) 55%, rgba(63, 77, 57, 0) 90%);
}
/* Services → "There's a sound..." band (var(--green-darkest) #182016) */
.wf-band::before {
  background: radial-gradient(ellipse 90% 100% at 50% 100%,
    rgba(24, 32, 22, 1) 0%, rgba(24, 32, 22, 1) 55%, rgba(24, 32, 22, 0) 90%);
}
/* WF band → Packages (var(--cream) #FBFAF6) */
.packages::before {
  background: radial-gradient(ellipse 90% 100% at 50% 100%,
    rgba(251, 250, 246, 1) 0%, rgba(251, 250, 246, 1) 55%, rgba(251, 250, 246, 0) 90%);
}
/* Packages → Process (var(--off-white) #F5F6F3) */
.process::before {
  background: radial-gradient(ellipse 90% 100% at 50% 100%,
    rgba(245, 246, 243, 1) 0%, rgba(245, 246, 243, 1) 55%, rgba(245, 246, 243, 0) 90%);
}
/* Home-CTA / Process → Footer (var(--green-deepest) #0F140D) */
.footer::before {
  background: radial-gradient(ellipse 90% 100% at 50% 100%,
    rgba(15, 20, 13, 1) 0%, rgba(15, 20, 13, 1) 55%, rgba(15, 20, 13, 0) 90%);
}

/* =====================================================================
   REVISION 17 — slogan: 25 % smaller font + nudged up 40 px + centered
   ===================================================================== */
.cine-slogan {
  font-size: clamp(1rem, 3.9vw, 2.9rem) !important;   /* was clamp(1.35,5.2vw,3.9rem) — ×0.75 */
  transform: translateY(-40px) !important;             /* moved up 40 px */
  text-align: center !important;                       /* centered horizontally */
  max-width: none !important;
}

/* =====================================================================
   REVISION 18 — Free Consultation pill: 40 px total height.
   Pill = 30 px icon + 5 px top + 5 px bottom padding = 40 px.
   On hover the icon scales to 1.333× (30 × 1.333 = 40 px) so the
   circle exactly matches the pill height and aligns with the rounded
   sides — same visual effect as before when pill was 50 and hover
   was 1.5× (50 = 30 × 1.667 ≈ pill).
   ===================================================================== */
.nav-cta {
  padding: 5px 7.5px 5px 26px !important;
}
.nav-cta:hover .btn-ico {
  transform: scale(1.333) translateX(2px) !important;
}

/* =====================================================================
   REVISION 19 — Hero entrance animations.
   1. Big SUPERSCAPES logo: floats in from the right (0.15 s delay).
   2. "Bringing your living space": floats in from the left (0.55 s).
   3. "outdoors.": floats in from the right (0.95 s).
   Uses transform-only animation so JS-controlled top/left aren't affected.
   ===================================================================== */

/* =====================================================================
   REVISION 20 — Hero entrance: fade + slide.
   Logo slides in from RIGHT, "Bringing…" slides in from LEFT,
   "outdoors." slides in from RIGHT. Soft + slow, all in one ease-out.
   Conflicting `transform: none !important` rules from Revs 4/8/13
   were stripped above so these animations actually apply.
   ===================================================================== */

@keyframes heroFadeSlideRight {
  from { opacity: 0; transform: translateX(50vw); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroFadeSlideLeft {
  from { opacity: 0; transform: translateX(-50vw); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroFadeOnly {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.home .brand-logo {
  animation: heroFadeSlideRight 3.0s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both !important;
}
.cine-slogan .slogan-pre {
  display: inline-block;
  animation: heroFadeSlideLeft  2.5s cubic-bezier(0.16, 1, 0.3, 1) 1.20s both !important;
}
.cine-slogan strong {
  display: inline-block;
  animation: heroFadeOnly       2.5s cubic-bezier(0.16, 1, 0.3, 1) 2.20s both !important;
}

@media (prefers-reduced-motion: reduce) {
  body.home .brand-logo,
  .cine-slogan .slogan-pre,
  .cine-slogan strong { animation: none !important; }
}

/* =====================================================================
   REVISION 22 — Package "Get a Quote" pills match the Free Consultation
   nav CTA proportions: 40 px tall total, with the trailing arrow circle
   scaling to the pill's full height (30 × 1.333 = 40) on hover so it
   visually matches the rounded right side of the pill — same mechanics
   as the nav CTA (Rev 18). Each card keeps its own coloring
   (.btn-solid dark green for Bronze/Gold, .btn-primary orange for
   Silver). Applies on both index.html and packages.html since both
   render `.pkg .btn-full` cards.
   ===================================================================== */
.pkg .btn-full {
  padding: 5px 22px !important;
  gap: 10px !important;
  font-size: 0.95rem !important;
}
/* Hover: only the arrow moves — it slides smoothly from its resting
   spot (just to the right of "Get a Quote") to the pill's right edge,
   scaling up to pill height at the same time. The text stays exactly
   where it was. Slide distance is computed per-button in JS (because
   it depends on the pill's actual rendered width) and exposed via the
   `--slide-x` CSS variable. translateX is listed before scale so the
   variable is in real screen pixels, not scaled coordinates. */
.pkg .btn-full .btn-ico {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background var(--t) !important;
}
.pkg .btn-full:hover .btn-ico {
  transform: translateX(var(--slide-x, 60px)) scale(1.333) !important;
}

/* =====================================================================
   REVISION 23 — "Sound" band: FULL-BLEED 50 / 50 split. The grid breaks
   out of the .container max-width and spans the full viewport width,
   so the right-half square video is exactly 50 vw × 50 vw (≈ 960 px on
   a 1920 wide screen — much bigger than the previous container-bound
   ~580 px). The section becomes ~2:1 wide:tall. Left half holds the
   editorial copy: orange accent bar above the H2, large display H2,
   constrained paragraph max-width. Stacks on mobile.
   ===================================================================== */
.wf-band {
  padding: 0 !important;
}
.wf-band > .container.wf-grid {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}
.wf-band .wf-text {
  width: auto !important;
  max-width: none !important;
  padding: clamp(40px, 6vw, 110px) clamp(32px, 6vw, 100px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
}
.wf-band .wf-text > * {
  max-width: 520px;
}
.wf-band .wf-text::before {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.wf-band .wf-text h2 {
  font-size: clamp(1.85rem, 3vw, 2.8rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
}
.wf-band .wf-text p {
  font-size: clamp(1rem, 1.1vw, 1.15rem) !important;
  line-height: 1.6 !important;
  max-width: 46ch !important;
  color: var(--text-on-dark-soft) !important;
  margin-top: clamp(18px, 2vw, 24px) !important;
}
.wf-band .wf-card {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  max-width: none !important;
}
@media (max-width: 768px) {
  .wf-band > .container.wf-grid {
    grid-template-columns: 1fr !important;
  }
  .wf-band .wf-text {
    padding: clamp(40px, 10vw, 80px) clamp(20px, 6vw, 40px) !important;
  }
}

/* =====================================================================
   REVISION 24 — "Sound" band: right column now matches the source
   video's NATIVE aspect ratio (16:9 = 1280×720) instead of being a
   square, and is capped at the source's native 1280 px width on very
   wide screens. This fixes two issues from Rev 23:
     1. The right side of the video was being CROPPED — a 1:1 container
        with `object-fit:cover` on a 16:9 source forced the browser to
        scale to fill height, cropping ~370 px off each side of the
        scaled frame.
     2. The video was being UPSCALED — the 1:1 container at 50 vw was
        960×960 on a 1920 viewport; native 720 was stretched to 960.
   New geometry: right column = `min(1280 px, 65 vw)`. At ≥ 1969 vw the
   column is exactly 1280×720 = native (no scaling at all). At 1920 vw
   it's 1248×702 (≈ 97.5 % of native — imperceptible scaling). On
   narrower screens it scales down (no upscaling). Section height
   auto-tracks the right column's height, so the section is roughly
   as tall as the video's native height on a typical desktop. Left
   column (1fr) takes whatever remains, so the editorial copy gets
   ~640 px wide at 1920 vw — plenty for the heading and paragraph.
   ===================================================================== */
.wf-band > .container.wf-grid {
  grid-template-columns: 1fr min(1280px, 65vw) !important;
}
.wf-band .wf-card {
  aspect-ratio: 16 / 9 !important;
}

/* =====================================================================
   REVISION 25 — "Sound" band: middle-square video crop + section
   transition fix.
   - The video is intentionally CROPPED to its center 720×720 square
     (the largest non-upscaled square crop of the 1280×720 source).
     Right column capped at min(720 px, 50 vw); `aspect-ratio:1/1`
     and `object-fit:cover` (already on the video) deliver the exact
     middle square of the source.
   - Removed the orange accent bar above the H2 (was Rev 23's
     `.wf-text::before`).
   - Reversed the section-boundary blob: Rev 16 placed a DARK-green
     blob extending UP from the top of the sound section into the
     services section, which left a hard line where the video's top
     edge met the sound bg. Now the blob is MILITARY-GREEN (services
     bg) and fades DOWNWARD from the top edge of the sound section,
     overlaying the top of the video and softening that straight edge
     into a gradient from services-green → sound-dark-green. Same
     pseudo-element, just recolored, flipped, and re-anchored to top:0.
   ===================================================================== */
.wf-band > .container.wf-grid {
  grid-template-columns: 1fr min(720px, 50vw) !important;
}
.wf-band .wf-card {
  aspect-ratio: 1 / 1 !important;
}
.wf-band .wf-text::before {
  display: none !important;
}
.wf-band::before {
  top: 0 !important;
  background: radial-gradient(ellipse 90% 100% at 50% 0%,
    rgba(63, 77, 57, 1) 0%,
    rgba(63, 77, 57, 1) 55%,
    rgba(63, 77, 57, 0) 90%) !important;
  z-index: 2 !important;
}

/* =====================================================================
   REVISION 26 — "Sound" band: right half is now EXACTLY half the
   section width (50 vw), and the video covers it by cropping its
   LEFT side as needed. Section height pinned at the source's native
   720 px so there's still no vertical upscaling at any common
   desktop viewport. The video plays at native height; the right
   column is whatever 50 vw works out to — at 1920 vw → 960 wide,
   1440 vw → 720 wide, 1280 vw → 640 wide — and `object-position:
   right center` keeps the right side of the source and trims the
   left to fit.
   ===================================================================== */
.wf-band > .container.wf-grid {
  grid-template-columns: 1fr 1fr !important;
  height: 720px !important;
}
.wf-band .wf-card {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
}
.wf-band .wf-card video {
  object-fit: cover !important;
  object-position: right center !important;
}
@media (max-width: 768px) {
  .wf-band > .container.wf-grid {
    height: auto !important;
  }
}

/* =====================================================================
   REVISION 27 — Vertical "bleed" arch on the LEFT EDGE of the video:
   the wf-band's dark-green section bg pools into the top-left and
   bottom-left corners of the video and arcs away toward transparency
   on the right. Mirrors (rotated 90°) the nav-menu gradient that
   creates corners at the top of the hero, so instead of horizontal
   corners at top-left/top-right, we get vertical corners at top-left/
   bottom-left of the video frame — softening the hard vertical seam
   between the text half and the video half.

   Shape:  ellipse 79% 150% at 87% 50%  (rotated nav-menu shape; center
           sits 87% across to the right, ellipse extends 150% vertically
           so top + bottom corners both land outside the ellipse edge =
           locked solid green).
   Stops:  borrowed from the Rev 16 section-border blob — solid 0%–55%,
           fade 55%–90%, transparent beyond. Inverted (transparent inside,
           solid outside) for this arch direction. Wider, softer fade
           than the nav menu's 88%/100% stops.
   Color:  rgba(24, 32, 22, ...) = #182016 = the wf-band's section bg.

   Stacking: z-index 1 inside wf-band's stacking context — sits BELOW
   the Rev 25 top blob (wf-band::before, z-index 2). For the bottom
   transition (.packages::before, z-index 1 inside .packages' stacking
   context): .packages is later in DOM than .wf-band so its ::before
   paints above this arch via source order at the parent level. Net
   result: this arch sits under BOTH the top and bottom section-
   transition gradients.
   ===================================================================== */
.wf-band .wf-card {
  position: relative !important;
}
.wf-band .wf-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 79% 150% at 87% 50%,
    rgba(24, 32, 22, 0)    0%,
    rgba(24, 32, 22, 0)    55%,
    rgba(24, 32, 22, 1.00) 90%);
  pointer-events: none;
  z-index: 1;
}

/* =====================================================================
   REVISION 28 — Shift the text/video boundary LEFT to compensate for
   the Rev 27 arch overlay. The arch's "solid green" portion takes up
   roughly the leftmost 16% of the video column at the middle Y, so
   the visible video begins ~16% into the column. To put that visible
   start at the section's true horizontal midpoint, the video column
   needs to be a bit wider than 50%.
   1fr 1.5fr → video column gets 60% of section, text gets 40%. At
   1920 vw that's text=768 / video=1152 (boundary at 768 px); the
   arch's solid-green portion then ends at ~952 px from the left,
   essentially at the 50% mark of the viewport. Visual balance reads
   as ~50/50.
   ===================================================================== */
.wf-band > .container.wf-grid {
  grid-template-columns: 1fr 1.8fr !important;
}

/* =====================================================================
   REVISION 29 — Per-card object-position tweaks on the services
   accordion hover-reveal photos. Cards are positional in the DOM:
     1 = Landscapes
     2 = Hardscapes
     3 = Waterscapes
     4 = Colorscapes
     5 = Lightscapes
   - Landscapes (1st): focus on lower half of the source.
   - Colorscapes (4th): focus on bottom-left of the source.
   ===================================================================== */
.svc-bar:nth-child(1) .svc-bar-bg img {
  object-position: center bottom !important;
}
.svc-bar:nth-child(4) .svc-bar-bg img {
  object-position: left bottom !important;
}

/* =====================================================================
   REVISION 30 — Trim the services section by 90 px on top + 90 px on
   bottom (180 px shorter overall) to compensate for the extra height
   added by the inbound + outbound section-transition gradients.
   Base `.section` padding is `clamp(96px, 12vw, 176px)` per side, so
   this resolves to a shrunk range of clamp(6px, 12vw − 90px, 86px).
   The transition gradients (svc-accordion::before above, packages
   ::before below) are positioned relative to their section, so they
   still sit at the section's edges — they just sit at the new edges.
   ===================================================================== */
.svc-accordion.section {
  padding-top: calc(var(--section-pad) - 90px) !important;
  padding-bottom: calc(var(--section-pad) - 90px) !important;
}

/* =====================================================================
   REVISION 31 — Center the wf-text content block horizontally within
   its column (instead of being left-aligned + padded). The content
   already has a max-width of 520 px (Rev 23), so flipping `align-items`
   from the default `stretch` to `center` lets the block sit visually
   centered in the left half of the section. Text inside the block
   stays left-aligned so the H2 + paragraph still read as a left-edge
   editorial column, just nudged inward.
   ===================================================================== */
.wf-band .wf-text {
  align-items: center !important;
}

/* =====================================================================
   REVISION 34 — Shift the wf-text content 60 px to the right by
   adding 60 px to the left padding and subtracting 60 from the right
   padding (max-clamped at 0 so narrow viewports don't go negative).
   Content area total width stays the same — the entire block just
   slides right.
   ===================================================================== */
.wf-band .wf-text {
  padding-left: calc(clamp(32px, 6vw, 100px) + 100px) !important;
  padding-right: max(0px, calc(clamp(32px, 6vw, 100px) - 100px)) !important;
}

/* =====================================================================
   REVISION 35 — "Schedule a Free Consultation" pill in the home-cta
   section gets the same pill mechanics as the "Get a Quote" buttons
   in the packages section (Rev 22 + Rev 27): 40 px tall, content
   centered as a group, arrow slides to the pill's right edge AND
   scales to pill height on hover.
   The pill is given a `min-width: min(360px, 100%)` so there's room
   for the arrow to slide before reaching the right edge — without
   this the arrow's resting position is already flush right and the
   slide effect is invisible. On narrow viewports the min collapses
   to 100% so it doesn't force horizontal overflow.
   JS slide-distance calculation in main.js also extended to match
   this selector (`.home-cta .btn-primary`) alongside `.pkg .btn-full`.
   ===================================================================== */
.home-cta .btn-primary {
  min-width: min(360px, 100%);
  justify-content: center !important;
  padding: 5px 22px !important;
  gap: 10px !important;
  font-size: 0.95rem !important;
}
.home-cta .btn-primary .btn-ico {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background var(--t) !important;
}
.home-cta .btn-primary:hover .btn-ico {
  transform: translateX(var(--slide-x, 60px)) scale(1.333) !important;
}

/* =====================================================================
   REVISION 36 — Center the "Free Consultation" TEXT in its nav pill.
   Rev 18 used asymmetric padding (5px 7.5px 5px 26px) to keep the
   arrow circle flush against the right edge, but that put the visible
   text at ~13 px left of the pill's true horizontal midpoint. For the
   text alone to be centered, padding-left needs to equal
   padding-right + gap + icon-width = 7.5 + 14 + 30 = 51.5 px.
   ===================================================================== */
.nav-cta {
  padding: 5px 7.5px 5px 51.5px !important;
}

/* =====================================================================
   REVISION 37 — Kill the post-hover 1–2 px upward text "jiggle" on
   the nav and home-cta pills.
   Cause: `.btn:hover { transform: scale(1.04) }` (line 1683) creates a
   transient GPU compositor layer for the scale animation. When the
   transition ends the browser destroys that layer and re-rasterizes
   the static (1.04-scaled) state directly — text snaps to a slightly
   different sub-pixel baseline = the visible jiggle.
   Fix: pre-promote both pills to a permanent GPU layer with
   `will-change: transform` so the layer exists in BOTH resting and
   hover states. No mid-animation layer creation/destruction → no
   re-rasterization snap. The pkg .btn-full pills don't show the same
   jiggle because Rev 27 already gave them `position: relative` which
   stabilizes their render context.
   ===================================================================== */
.nav-cta,
.home-cta .btn-primary {
  will-change: transform;
}

/* =====================================================================
   REVISION 38 — Cover photos in the resting (un-hovered) service bars.
   Problem: in their collapsed state the five .svc-bar cards were flat
   green — the services section read as boring before any hover.
   Fix: each bar gets a per-service cover photo (.svc-cover) that fills
   the bar and is masked with a right-leaning "/" diagonal gradient, so
   the photo occupies roughly the right two-thirds and dissolves softly
   into the bar's green over the left third (fuzzy blend, no hard seam).
   The left third — icon + service name — is untouched.
   The mask is a linear-gradient at 108deg: angles >90deg tilt the
   constant-alpha iso-lines into a "/", so the photo's left edge leans
   right (Option A). Transparent (green shows through) on the up-left
   side, opaque (photo) on the down-right side.
   On hover/focus/open the cover fades out and the pre-existing
   full-bar hover image + scrim + detail take over exactly as before.
   The %% stops below are the tunable knobs:
     - first stop  = where the clean-green left zone ends
     - second stop = where the photo becomes fully solid
   Widen the gap between them for a softer blend, narrow it for a
   sharper edge; shift both to move the divider left/right.
   ===================================================================== */
.svc-bar .svc-cover {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s var(--ease);
  -webkit-mask-image: linear-gradient(108deg,
                        rgba(0,0,0,0) 28%, rgba(0,0,0,1) 50%);
          mask-image: linear-gradient(108deg,
                        rgba(0,0,0,0) 28%, rgba(0,0,0,1) 50%);
}
.svc-bar .svc-cover img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* fade the cover out the instant the bar opens so the existing hover
   image (z-index 0) and scrim (z-index 1) read cleanly */
.svc-bar:hover .svc-cover,
.svc-bar:focus-within .svc-cover,
.svc-bar.open .svc-cover { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .svc-bar .svc-cover { transition: none; }
}

/* =====================================================================
   REVISION 39 — Per-card crop (object-position) for the Rev 38 cover
   photos. The resting service bar is short and wide, so object-fit:
   cover crops each cover hard; this picks the focal slice per service.
   Card order is positional: 1 Landscapes · 2 Hardscapes · 3 Waterscapes
   · 4 Colorscapes · 5 Lightscapes (the 5 .svc-bar articles are direct
   children of .svc-list, so :nth-child is reliable — same pattern as
   Rev 29). Values are owner-directed; each pair is "horizontal vertical"
   and is the obvious tuning knob if a crop needs nudging.
   ===================================================================== */
.svc-bar:nth-child(1) .svc-cover img { object-position: left 80%; }    /* Landscapes — bottom-left, just up from the bottom */
.svc-bar:nth-child(2) .svc-cover img { object-position: center center; } /* Hardscapes — dead center */
.svc-bar:nth-child(3) .svc-cover img { object-position: 72% 86%; }     /* Waterscapes — right-of-center, low (not quite the bottom) */
.svc-bar:nth-child(4) .svc-cover img { object-position: center 60%; } /* Colorscapes — centered, just below the middle */
.svc-bar:nth-child(5) .svc-cover img { object-position: center 62%; } /* Lightscapes — centered, a bit below middle */

/* =====================================================================
   REVISION 40 — Double the "Services" and "Our Process" section titles.
   Base h2 is clamp(2.2rem, 4.6vw, 3.7rem); these two section-head
   titles get exactly 2x that across the whole clamp. (The Process
   title's text was also changed "Process" → "Our Process" in
   index.html — markup change, not CSS.)
   ===================================================================== */
.svc-accordion .section-head h2,
.process .section-head h2 {
  font-size: clamp(4.4rem, 9.2vw, 7.4rem) !important;
}

/* =====================================================================
   REVISION 41 — Flip the Hero→Services transition blob: bridge → bowl.
   Rev 16's .svc-accordion::before is a radial blob centered at the
   bottom (at 50% 100%): solid services-green pools along the hero/
   services edge and domes UP into the hero — the green peak lands
   dead-center, right behind the hero's bouncing scroll arrow.
   This re-centers the gradient at the TOP (at 50% 0%) and inverts the
   stops so the center is a transparent dome and the green wraps the
   sides. The green silhouette now arcs DOWN in the middle (a bowl, ∪)
   instead of up (a bridge, ∩): the bouncing arrow sits over the
   transparent dip so no green creeps up behind it, while the soft
   green bleed is kept at the left/right corners. The bottom edge of
   the box stays fully green so it still joins the services section
   cleanly. Same color, same 90 px box position — only the arch flips.
   ===================================================================== */
.svc-accordion::before {
  background: radial-gradient(ellipse 90% 100% at 50% 0%,
    rgba(63, 77, 57, 0) 0%, rgba(63, 77, 57, 0) 55%, rgba(63, 77, 57, 1) 90%);
}

/* =====================================================================
   REVISION 42 — Soften the nav-overlay top band's bottom edge.
   Rev 33 collapsed this gradient's fade band to ~2% radial (transparent
   stop at 98%) to kill a "middle band" — but that left the bottom edge
   of the green top band reading as a hard, crisp line. Owner wants it
   fuzzy, like the section-transition blobs. Those blobs fade over a
   ~31 px band; on this overlay's much larger ellipse (vertical radius
   ≈ 0.79 × viewport height ≈ 850 px) a ~31 px fade works out to ~4 %
   of the radius, so the transparent stop is set at 96 %. (98 % read as
   a hard line, 90 % was too fuzzy — 96 % matches the other borders.)
   Tuning knob: lower the 96 % for a fuzzier edge, raise it for sharper.
   ===================================================================== */
.nav-overlay {
  background:
    radial-gradient(
      ellipse 150% 79% at 50% 87%,
      rgba(65, 78, 59, 0)    0%,
      rgba(65, 78, 59, 0)    96%,
      rgba(65, 78, 59, 1.00) 100%
    ) !important;
}

/* =====================================================================
   REVISION 43 — Raise the whole nav cluster + its gradient by 10 px.
   Owner wants the nav menu links, the small-state Superscapes logo and
   the Free Consultation pill all 10 px higher, with the nav-overlay
   gradient pulled up to match.
   - .navbar .container is a centered flex row (min-height clamp, items
     align-items:center). min-height is the binding constraint here (the
     row is ~40 px of content inside a ~96–150 px box), so adding
     padding-bottom: 20px shifts the centered row up by half that = 10 px.
     That covers the menu links AND the CTA pill (both flex items) AND
     the invisible .logo-slot placeholder. The brand-logo's small state
     is JS-pinned to logo-slot.getBoundingClientRect().top (see main.js),
     so moving the slot up 10 px moves the small logo up 10 px for free —
     no JS change. The big hero-state logo uses its own JS bigTop and is
     untouched. padding-bottom is used rather than a transform so
     .container does NOT become the containing block for the
     position:fixed mobile menu.
   - .nav-overlay is a fixed, full-viewport gradient; translateY(-15px)
     slides the whole thing (incl. the green top band) up 15 px. The
     gap left at the bottom sits in the gradient's transparent zone, so
     it's invisible. (Owner iteration: -10 → -20 → -15 px.)
   ===================================================================== */
.navbar .container,
body.home .navbar .container,
.navbar.scrolled .container,
body.home .navbar.scrolled .container {
  padding-bottom: 20px !important;
}
.nav-overlay {
  transform: translateY(-15px) !important;
}

/* =====================================================================
   REVISION 44 — Trim the "Our Process" section by 90 px at the top.
   Owner found too much space between the bottom of the packages
   section and the start of Our Process. The .process section uses the
   standard .section padding (var(--section-pad) top + bottom); this
   cuts 90 px off the TOP only — same approach as Rev 30 did for the
   services section. Bottom padding is left alone (the complaint was
   the top gap). The Rev 16 transition blob on .process::before is
   positioned relative to the section, so it follows the new top edge.
   ===================================================================== */
.process.section {
  padding-top: calc(var(--section-pad) - 90px) !important;
}

/* =====================================================================
   REVISION 45 — Flip the Home-CTA→Footer transition blob: bridge → bowl.
   Rev 16's .footer::before is a radial blob centered at the bottom
   (at 50% 100%): the deep footer-green pools along the section/footer
   edge and domes UP into the "Let's build the backyard" section above
   (a bridge, ∩). Owner wants it to curve the other way — inward toward
   the footer. Re-centered at the top (at 50% 0%) with the alpha stops
   inverted, so the center is a transparent dome and the footer-green
   wraps the sides: the silhouette now arcs DOWN in the middle (a bowl,
   ∪). Same color, same 90 px box position — only the arch flips.
   Mirrors what Rev 41 did for the Hero→Services blob.
   ===================================================================== */
.footer::before {
  background: radial-gradient(ellipse 90% 100% at 50% 0%,
    rgba(15, 20, 13, 0) 0%, rgba(15, 20, 13, 0) 55%, rgba(15, 20, 13, 1) 90%);
}

/* =====================================================================
   REVISION 46 — Hero slogan entrance: float instead of slide.
   Owner reworked the Rev 20 entrances for the two slogan phrases:
   - "Bringing your living space" (.slogan-pre): was heroFadeSlideLeft
     (slide in from -50vw). Now floats UP — starts ~48 px lower and
     fades in as it rises softly to rest.
   - "outdoors." (strong): was heroFadeOnly (fade only). Now floats in
     from the RIGHT — starts ~80 px right and fades in as it drifts to
     rest, a beat after the first phrase.
   Durations / delays / easing unchanged from Rev 20 (2.5 s, 1.20 s &
   2.20 s delays, same cubic-bezier) — only the keyframes change. The
   logo's heroFadeSlideRight (Rev 20) is untouched.
   NOTE: this block is cascade-after Rev 20's reduced-motion guard, so
   it re-declares that guard below — otherwise these `!important`
   animations would win over Rev 20's `animation: none` by source order.
   ===================================================================== */
@keyframes heroFloatUp {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFloatInRight {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cine-slogan .slogan-pre {
  animation: heroFloatUp      2.5s cubic-bezier(0.16, 1, 0.3, 1) 1.20s both !important;
}
.cine-slogan strong {
  animation: heroFloatInRight 2.5s cubic-bezier(0.16, 1, 0.3, 1) 2.20s both !important;
}
@media (prefers-reduced-motion: reduce) {
  .cine-slogan .slogan-pre,
  .cine-slogan strong { animation: none !important; }
}

/* =====================================================================
   REVISION 47 — Hero scroll-cue: nudge up + float in after "outdoors".
   - Moved the bouncing arrow up: bottom 20px → 70px.
   - Entrance reworked. It was `svcIn` (fade) at a 2s delay, and svcIn
     ended on `transform: none`, which dropped the arrow's
     translateX(-50%) centering. Replaced with `cueFloatUp`: the arrow
     floats up ~40 px while fading in, and every keyframe keeps the
     `translateX(-50%)` so it stays centered (this also fixes the old
     end-of-animation off-center drift).
   - Delay set to 2.7s so it begins 0.5s after the "outdoors." entrance
     starts (Rev 46 `strong` begins at its 2.20s delay) — the arrow
     floats in over the tail of that entrance.
   The infinite `bob` on the child <svg> is untouched — different
   element, unaffected. Re-declares the reduced-motion guard (cascade-
   after the earlier ~line 1225 guard) so motion-reduced users still
   get a static, centered arrow.
   ===================================================================== */
@keyframes cueFloatUp {
  from { opacity: 0; transform: translate(-50%, 40px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.scroll-cue {
  bottom: 70px !important;
  animation: cueFloatUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 2.7s both !important;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue {
    animation: none !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
  }
}

/* =====================================================================
   REVISION 48 — Staged nav entrance, choreographed with the hero.
   Owner wants the nav to animate in as part of the hero load sequence:
     1. nav-overlay gradient floats DOWN into place — 2.7s, in sync
        with the scroll-cue arrow (Rev 47).
     2. +0.3s (3.0s) the four menu links (Services / Packages / Process
        / Contact) float DOWN together.
     3. +0.2s (3.2s) the Free Consultation pill floats in from the RIGHT.
   Implementation notes:
   - The four menu links are the first four <li> of .nav-links; the CTA
     is the last <li>. We animate the <li> flex items, NOT the <a>s, so
     the links' / pill's own :hover transforms stay independent (a
     transform animation with `both` fill on .nav-cta itself would beat
     its :hover scale).
   - The gradient float ends at translateY(-15px) — Rev 43's resting
     position — so the filled end state matches the static rule.
   - Scoped to `body:has(.cine-hero)` so this only runs on the home
     page (which has the hero + arrow). contact.html / packages.html
     share body.home but have no hero, so they keep an instant nav
     rather than a 3s-delayed one.
   - Re-declares the reduced-motion guard for these elements.
   ===================================================================== */
@keyframes navGradientFloatDown {
  from { opacity: 0; transform: translateY(-65px); }
  to   { opacity: 1; transform: translateY(-15px); }
}
@keyframes navLinkFloatDown {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes navCtaFloatInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
body:has(.cine-hero) .nav-overlay {
  animation: navGradientFloatDown 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.7s both !important;
}
body:has(.cine-hero) .nav-links li:not(:last-child) {
  animation: navLinkFloatDown 1.0s cubic-bezier(0.16, 1, 0.3, 1) 3.0s both !important;
}
body:has(.cine-hero) .nav-links li:last-child {
  animation: navCtaFloatInRight 1.0s cubic-bezier(0.16, 1, 0.3, 1) 3.2s both !important;
}
@media (prefers-reduced-motion: reduce) {
  body:has(.cine-hero) .nav-overlay,
  body:has(.cine-hero) .nav-links li:not(:last-child),
  body:has(.cine-hero) .nav-links li:last-child {
    animation: none !important;
  }
}

/* =====================================================================
   REVISION 49 — Reorder the hero entrance choreography.
   Owner swapped the order so the NAV animates in before the slogan.
   New order: big logo → nav gradient → nav menu links → Free
   Consultation pill → "Bringing your living space" → "outdoors." →
   scroll-cue arrow. Every element keeps its own keyframes, duration,
   easing and fill from Revs 46–48 — only `animation-delay` is set
   here (via the longhand, so the rest of each Rev 46–48 `animation`
   shorthand still stands). The big logo (Rev 20, 0.30s) is unchanged
   and stays first.
   Delays (owner-tuned — the nav menu links and the Free Consultation
   pill now share 2.20s and fire together):
       element                         delay
       big logo (Rev 20)               0.30s  (unchanged)
       nav gradient                    1.20s
       nav menu links                  2.20s
       Free Consultation pill          2.20s
       "Bringing your living space"    2.50s
       "outdoors."                     3.00s
       scroll-cue arrow                3.60s
   Selectors match Revs 46–48 exactly so the longhand override wins on
   equal specificity by source order. Reduced motion is unaffected:
   the Rev 46–48 guards still set `animation: none`, which zeroes
   animation-name, so a reassigned delay simply does nothing.
   ===================================================================== */
body:has(.cine-hero) .nav-overlay                   { animation-delay: 1.20s !important; }
body:has(.cine-hero) .nav-links li:not(:last-child) { animation-delay: 2.20s !important; }
body:has(.cine-hero) .nav-links li:last-child       { animation-delay: 2.2s  !important; }
.cine-slogan .slogan-pre                            { animation-delay: 2.5s  !important; }
.cine-slogan strong                                 { animation-delay: 3.00s !important; }
.scroll-cue                                         { animation-delay: 3.6s  !important; }

/* =====================================================================
   REVISION 50 — "There's a sound a backyard" section: staged reveal.
   Owner wants the wf-band to reveal in sequence — video, then title,
   then subtext — once the section scrolls into view.
   Was: .wf-text (title + subtext as ONE block) = reveal-left;
   .wf-card (video) = reveal-right; both 0 delay, firing together.
   Markup changed in index.html: .wf-text is a plain wrapper; .wf-card
   keeps `reveal` (so it's tracked) while the <h2> and <p> each carry
   `reveal-left` so they slide in from the left and are tracked
   individually.
   This Rev:
   - video (.wf-card): forces transform + filter to `none` → a pure
     opacity fade, no slide, no blur.
   - title + subtext (<h2>, <p>): forces filter to `none` (no blur)
     but LEAVES the reveal-left transform intact → fade + slide in
     from the left.
   - transition-delay per element stages them: video 0.65s → title
     1s → subtext 1.25s. Duration stays the reveal default (0.9s).
   Reduced motion unaffected — the ~line 235 guard still sets
   `transition: none`, so these simply appear.
   ===================================================================== */
.wf-band .wf-card {
  transform: none !important;
  filter: none !important;
}
.wf-band .wf-text h2,
.wf-band .wf-text p {
  filter: none !important;
}
.wf-band .wf-card    { transition-delay: 0.65s !important; }
.wf-band .wf-text h2 { transition-delay: 1s    !important; }
.wf-band .wf-text p  { transition-delay: 1.25s !important; }

/* =====================================================================
   REVISION 51 — Services section: staged scroll-reveal.
   Owner wants the services section to reveal in sequence as it scrolls
   into view: "Services" title fades in from the LEFT (0.5s), the
   subtext fades in from the RIGHT (0.75s), then the five service bars
   fade DOWN into place (1s).
   Markup change in index.html: .section-head loses `reveal` (it no
   longer animates as one block); its <h2> gets `reveal-left` and <p>
   gets `reveal-right` so they reveal independently. The five .svc-bar
   articles keep their existing `reveal` class.
   CSS here:
   - Title / subtext: just a transition-delay (0.5s / 0.75s); the
     reveal-left / reveal-right classes already do the slide + fade.
   - Service bars: two fixes.
     (a) `.svc-bar`'s own rule sets `transition: height 0.62s`, which
         CLOBBERS the reveal system's opacity/transform/filter
         transition (so the bars used to pop in with no animation).
         Restored as a combined transition that keeps `height` for the
         hover-expand AND adds opacity/transform/filter for the reveal —
         with the reveal delay applied PER-PROPERTY (1s on opacity/
         transform/filter, 0s on height) so hovering a card is NOT
         delayed by 1s.
     (b) `.reveal` defaults to translateY(38px) = rise UP into place;
         owner wants the bars to drop DOWN, so the pre-reveal
         (`:not(.active)`) transform is flipped to translateY(-38px).
   Reduced motion: a guard re-asserts no transition / no transform on
   the bars (our !important rules would otherwise beat the global
   reveal reduced-motion guard).
   ===================================================================== */
.svc-accordion .section-head h2 { transition-delay: 0.5s  !important; }
.svc-accordion .section-head p  { transition-delay: 0.75s !important; }

.svc-accordion .svc-bar {
  transition:
    height    0.62s var(--ease) 0s,
    opacity   0.9s  var(--ease) 1s,
    transform 0.9s  var(--ease) 1s,
    filter    0.9s  var(--ease) 1s !important;
}
.svc-accordion .svc-bar.reveal:not(.active) {
  transform: translateY(-38px) !important;
}
@media (prefers-reduced-motion: reduce) {
  .svc-accordion .svc-bar,
  .svc-accordion .svc-bar.reveal:not(.active) {
    transition: none !important;
    transform: none !important;
  }
}

/* =====================================================================
   REVISION 52 — Service bars: cascade the last four off the first.
   Owner wants only the Landscapes bar (1st) to reveal on its own
   scroll trigger; the other four bars should then cascade in off the
   Landscapes bar's ENTRY — not each waiting for its own scroll.
   Approach: only the Landscapes bar keeps the `reveal` class, so it's
   the one .svc-bar the IntersectionObserver tracks. Bars 2–5 had
   `reveal` removed in index.html — this Rev gives them their hidden
   start state directly and reveals them with a sibling selector keyed
   on the Landscapes bar's `.active` state, staggered via
   transition-delay. The Rev 51 combined .svc-bar transition still
   applies to all five, so the height-hover stays delay-free.
   Cascade delays, all measured from the moment the Landscapes bar
   gets `.active`:
       Landscapes   1.0s   (Rev 51 — scroll-triggered)
       Hardscapes   1.2s
       Waterscapes  1.4s
       Colorscapes  1.6s
       Lightscapes  1.8s
   transition-delay is a 4-value list matching the Rev 51 transition
   property order (height, opacity, transform, filter) — height stays
   0s so hovering a bar is never delayed.
   ===================================================================== */
/* bars 2–5: hidden start state (they no longer carry `reveal`) */
.svc-list .svc-bar:not(:first-child) {
  opacity: 0;
  transform: translateY(-38px);
  filter: blur(6px);
}
/* …revealed once the Landscapes bar enters the viewport (gets .active) */
.svc-list .svc-bar.reveal.active ~ .svc-bar {
  opacity: 1     !important;
  transform: none !important;
  filter: blur(0) !important;
}
/* cascade stagger off the Landscapes bar's .active moment */
.svc-list .svc-bar:nth-child(2) { transition-delay: 0s, 1.2s, 1.2s, 1.2s !important; }
.svc-list .svc-bar:nth-child(3) { transition-delay: 0s, 1.4s, 1.4s, 1.4s !important; }
.svc-list .svc-bar:nth-child(4) { transition-delay: 0s, 1.6s, 1.6s, 1.6s !important; }
.svc-list .svc-bar:nth-child(5) { transition-delay: 0s, 1.8s, 1.8s, 1.8s !important; }
@media (prefers-reduced-motion: reduce) {
  .svc-list .svc-bar:not(:first-child) {
    opacity: 1     !important;
    transform: none !important;
    filter: none   !important;
  }
}

/* =====================================================================
   REVISION 53 — Center-align the wf-band text.
   Owner wants the "There's a sound a backyard…" title and its
   paragraph center-aligned instead of left-aligned. The .wf-text block
   is already a centered flex column (Rev 31 `align-items: center`);
   this just sets `text-align: center` so the text lines themselves
   center within the H2 and P. Supersedes the "text stays left-aligned"
   note in the Rev 31 comment.
   ===================================================================== */
.wf-band .wf-text {
  text-align: center !important;
}

/* =====================================================================
   REVISION 54 — Water-feature package cards: custom reveal delays.
   Owner wants the three package cards staggered at 0.1 / 0.6 / 1.1s
   instead of the shared .stagger-1/2/3 values (0.08 / 0.18 / 0.28s).
   The cards keep their `reveal` scroll-trigger; this just overrides
   their transition-delay. The .stagger-N classes themselves are left
   alone (the home-cta nav-cards still use them). Reduced motion is
   unaffected — the .reveal guard's `transition: none` makes a delay
   inert.
   ===================================================================== */
.packages .pkg-grid .pkg:nth-child(1) { transition-delay: 0.1s !important; }
.packages .pkg-grid .pkg:nth-child(2) { transition-delay: 0.6s !important; }
.packages .pkg-grid .pkg:nth-child(3) { transition-delay: 1.1s !important; }

/* =====================================================================
   REVISION 55 — Water-feature packages: tier labels out, $ symbols in,
   "Most popular" flag moved on top of the featured card.
   - The "Bronze / Silver / Gold" .pkg-tier labels were removed in
     index.html; .pkg-name (Essentials / Signature / Premium) is now
     each card's heading. (.pkg-tier CSS left in place but now unused.)
   - Prices changed from exact figures to $/$$/$$$ tier symbols
     (markup-only change in index.html).
   - The "Most popular" .pkg-flag was moved out of .pkg-core to be a
     direct child of the featured .pkg, and is restyled here as a badge
     sitting fully ABOVE the card — its bottom edge 12px clear of the
     card's top border (transform translateY(calc(-100% - 12px))).
     .pkg gets `position: relative` as the positioning context; the
     flag keeps its existing orange-pill look, just re-anchored (margin
     dropped). On hover the bezel lifts 8px, so the flag lifts with it.
     The flag also fades in on its own — `opacity: 0` until the
     featured card gets `.active`, then a 2s-delayed opacity transition
     brings it in AFTER the card reveals finish (the last card, Gold,
     ends at its 1.1s delay + 0.9s = 2.0s).
   ===================================================================== */
.pkg { position: relative; }
.pkg .pkg-flag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 12px));
  z-index: 3;
  margin: 0;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.6s var(--ease) 2s;
}
.pkg.featured.active .pkg-flag {
  opacity: 1;
}
.pkg.featured:hover .pkg-flag {
  transform: translate(-50%, calc(-100% - 12px - 8px));
}
@media (prefers-reduced-motion: reduce) {
  .pkg .pkg-flag { opacity: 1; transition: none; }
}

/* =====================================================================
   REVISION 57 — Sit the service-bar icon + name on the card centerline.
   (Rev 56 is reverted — it centered the icon+name left-to-right, the
   wrong axis; their left-to-right placement was already correct.)
   The real issue: the icon+name sit too LOW — they should be on the
   card's centerline. .svc-bar-inner is a `flex-start` column with a
   top padding, which placed the row below true center.
   Fix: zero the inner's top padding and give .svc-bar-row a min-height
   equal to the COLLAPSED bar height (the same clamp the .svc-bar uses).
   The row already centers its content (align-items: center), so the
   icon+name now land on the collapsed bar's vertical centerline.
   Because that min-height is fixed, the icon+name stay at the exact
   same spot when the bar expands on hover (no jump) and the detail
   text flows in below the row.
   ===================================================================== */
.svc-bar-inner {
  padding-top: 0 !important;
}
.svc-bar-row {
  min-height: clamp(106px, 13vh, 134px) !important;
}

/* =====================================================================
   REVISION 58 — Home-CTA section recolored + a second "See some
   examples" button added above the consultation pill.
   - Section recolored to match the Services section: military-green
     bg (#3f4d39), off-white title, soft off-white lead text. (The
     `bg-offwhite` class was removed from the section in index.html.)
   - The two CTAs are now stacked in a centered flex column
     (.cta-buttons) with a 16px gap.
   - New `.btn-outline` button: same 40px height + min-width as the
     consultation pill, same arrow-slide-on-hover mechanics. Fill is
     the section's own green (#3f4d39) so it reads as an outline pill
     defined by its 2px orange border; 3px vertical padding + 2px
     border = the same 40px total height as the borderless orange
     pill. Text + arrow are orange (the owner asked for "dark" text,
     but dark text on the dark-green fill is unreadable — orange keeps
     it legible and matches the border + arrow). The arrow circle is
     near-opaque white (vs the orange pill's 18%) so the orange arrow
     reads against it.
   - main.js: the arrow-slide `--slide-x` measurement selector was
     extended to include `.home-cta .btn-outline`.
   ===================================================================== */
.home-cta {
  background: #3f4d39 !important;
}
.home-cta h2 {
  color: var(--text-on-dark) !important;
}
.home-cta .lead {
  color: var(--text-on-dark-soft) !important;
}
.home-cta .cta-buttons {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.home-cta .btn-outline {
  min-width: min(360px, 100%);
  justify-content: center;
  padding: 3px 22px;
  gap: 10px;
  font-size: 0.95rem;
  background: #3f4d39;
  border: 2px solid var(--orange);
  color: var(--orange);
  will-change: transform;
}
.home-cta .btn-outline .btn-ico {
  background: rgba(255, 255, 255, 0.3);
  color: var(--white);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background var(--t);
}
.home-cta .btn-outline:hover .btn-ico {
  transform: translateX(var(--slide-x, 60px)) scale(1.333) !important;
}

/* =====================================================================
   REVISION 59 — Drop shadow under the Process → Home-CTA edge.
   The Process section (off-white) meets the recolored Home-CTA section
   (green, Rev 58) at a hard, flat edge. This adds a soft shadow just
   below that edge — an inset box-shadow along the TOP inner edge of
   .home-cta — so the Process section reads as sitting above and
   casting onto the green section. The negative spread keeps the shadow
   on the top edge only (off the sides and bottom).
   Shadow strengthened on owner review (was 0 16px 22px -16px / 0.4) —
   a 40%-black inset shadow barely read on the dark-green section.
   ===================================================================== */
.home-cta {
  box-shadow: inset 0 32px 40px -20px rgba(0, 0, 0, 0.8);
}

/* =====================================================================
   REVISION 60 — Home-CTA lead paragraph: keep it on one line.
   The lead copy was shortened (markup change in index.html) and the
   owner wants it to never wrap. Line ~1170's `.home-cta .lead` caps
   the width at 600px, which forced the sentence to wrap; this lifts
   that cap (max-width: none) and adds `white-space: nowrap` so it
   always renders on a single line.
   (Note: on very narrow viewports a single nowrap line can overflow
   the viewport width — flagged to owner.)
   ===================================================================== */
.home-cta .lead {
  max-width: none !important;
  white-space: nowrap !important;
}

/* =====================================================================
   REVISION 61 — "See some examples" button scaled to 75% + moved below
   the consultation pill.
   Order: the HTML in .cta-buttons was reordered (index.html) so the
   "Schedule a Free Consultation" pill is first and "See some examples"
   sits below it.
   Scale: every dimension of the .btn-outline pill is multiplied by
   0.75 — font-size, padding, gap, border-width, min-width, and the
   icon circle + its svg — so the whole button (text included) renders
   at 75% size; total height works out to 30px (was 40px). Done with
   explicit values rather than `transform: scale()` (which would fight
   the hover transforms) or `zoom` (which would desync the JS-measured
   arrow-slide).
   ===================================================================== */
.home-cta .btn-outline {
  min-width: min(270px, 100%);
  padding: 2.25px 16.5px;
  gap: 7.5px;
  font-size: 0.7125rem;
  border-width: 1.5px;
}
.home-cta .btn-outline .btn-ico {
  width: 22.5px;
  height: 22.5px;
}
.home-cta .btn-outline .btn-ico svg {
  width: 11.25px;
  height: 11.25px;
}

/* =====================================================================
   REVISION 63 — packages.html redesign support.
   The standalone Water Feature Packages page (the Facebook-ad landing
   page) was rebuilt to parity with the home page — new nav + brand-
   logo + nav-overlay gradient, a video band, the Rev 55 package cards
   ($ symbols, no tier labels, flag-on-top), and a new 2-up photo
   showcase. Most of it reuses existing classes (.wf-band, .pkg,
   .page-hero, .final-cta, etc.). This block adds the only two things
   not already covered:
   1. .ws-showcase / .ws-grid / .ws-item — the 2-up water-feature photo
      showcase (framed, rounded, soft-shadowed; one column < 768px).
   2. The Rev 35 pill mechanics (40 px tall, centered, arrow slides to
      the pill's right edge on hover) extended to the .page-hero and
      .final-cta primary CTAs so every big CTA pill behaves alike.
      (main.js's --slide-x selector was extended to match.)
   ===================================================================== */
.ws-showcase .ws-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(40px, 5vw, 64px);
}
.ws-showcase .ws-item {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}
.ws-showcase .ws-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .ws-showcase .ws-grid { grid-template-columns: 1fr; }
}

/* Big CTA pills on .page-hero / .final-cta — match the home-cta pill */
.page-hero .btn-primary,
.final-cta .btn-primary {
  min-width: min(360px, 100%);
  justify-content: center !important;
  padding: 5px 22px !important;
  gap: 10px !important;
  font-size: 0.95rem !important;
  will-change: transform;
}
.page-hero .btn-primary .btn-ico,
.final-cta .btn-primary .btn-ico {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background var(--t) !important;
}
.page-hero .btn-primary:hover .btn-ico,
.final-cta .btn-primary:hover .btn-ico {
  transform: translateX(var(--slide-x, 60px)) scale(1.333) !important;
}

/* =====================================================================
   REVISION 64 — packages.html redesign pass 2 (the FB-ad landing page).
   Owner wants the standalone packages page to be a short, sharp,
   professionally designed hook. Page-specific rules are scoped to
   `body.pkg-page` so they touch ONLY packages.html.
   - Hero: centered content + a centered Superscapes wordmark masthead
     so a cold ad visitor sees the brand the moment they land.
   - Video + the two waterscapes photos are combined into ONE section
     (a `dark-band` section so the dusk media glows) as an asymmetric
     bento — video large on the left, the two photos stacked on the
     right; collapses to a single column under 768px.
   - That media section carries NO transition-gradient blobs (owner
     asked for the top/bottom gradients gone): it's a fresh class with
     no ::before, and `.packages::before` — the cream blob that would
     bleed up into its bottom — is suppressed on this page.
   - The standalone Process timeline was dropped to keep the page short
     (the deep process.html still exists; the home page has Process).
   ===================================================================== */

/* Hero — centered, with a Superscapes wordmark masthead */
body.pkg-page .page-hero .container { text-align: center; }
body.pkg-page .pkg-hero-logo {
  display: block;
  height: clamp(54px, 7vw, 84px);
  width: auto;
  margin: 0 auto clamp(22px, 3vw, 34px);
}

/* Combined media section — asymmetric bento (video + 2 photos) */
.pkg-media-grid {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: stretch;
}
.pkg-media-grid figure { margin: 0; }
.pkg-media-tile {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.pkg-media-tile video,
.pkg-media-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pkg-media-video { aspect-ratio: 16 / 9; }
.pkg-media-photos {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 768px) {
  .pkg-media-grid { grid-template-columns: 1fr; }
  .pkg-media-photos { grid-template-rows: none; }
  .pkg-media-photos .pkg-media-tile { aspect-ratio: 3 / 2; }
}

/* No transition-gradient blob bleeding into the media section */
body.pkg-page .packages::before { display: none !important; }

/* =====================================================================
   REVISION 65 — packages.html redesign pass 3 (the FB-ad landing page).
   Owner wants a more polished, more animated standalone page. All rules
   here are body.pkg-page-scoped so they touch ONLY packages.html.
   - The Rev 64 combined "bento" media section is split back into TWO
     sections: a VIDEO section and a separate PHOTOS section (owner:
     don't stack the photos on the video).
   - VIDEO section — a text + video editorial split. The video tile is
     near-square (aspect 6/5) and the <video> uses
     `object-position: left` so only the left ~two-thirds of the 16:9
     source shows; the right third is cropped out (owner direction).
   - PHOTOS section — the two waterscapes photos in alternating
     photo + copy feature rows, carrying promotional copy.
   - Hero — the Superscapes wordmark masthead is doubled in size, and
     the hero gets a staged page-load entrance (logo → headline →
     intro → CTA). The tiny nav brand-logo's entrance animation is
     switched OFF here (owner: it doesn't need animation).
   NOTE: this supersedes the Rev 63 `.ws-showcase` rules and the Rev 64
   `.pkg-media-*` bento rules — those classes are no longer used in
   packages.html (dead CSS, safe to delete in a later cleanup).
   ===================================================================== */

/* --- Hero: doubled masthead logo + staged entrance --- */
body.pkg-page .pkg-hero-logo {
  height: clamp(108px, 14vw, 168px) !important;   /* 2x Rev 64 */
}
@keyframes pkgHeroIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.pkg-page .pkg-hero-logo,
body.pkg-page .page-hero h1,
body.pkg-page .page-hero p,
body.pkg-page .page-hero .pkg-hero-cta {
  animation: pkgHeroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body.pkg-page .pkg-hero-logo           { animation-delay: 0.15s; }
body.pkg-page .page-hero h1            { animation-delay: 0.35s; }
body.pkg-page .page-hero p             { animation-delay: 0.52s; }
body.pkg-page .page-hero .pkg-hero-cta { animation-delay: 0.66s; }

/* The tiny nav brand-logo does NOT animate on this page */
body.pkg-page .brand-logo {
  animation: none !important;
  opacity: 1 !important;
}

/* --- VIDEO section: text + video editorial split --- */
.pkg-video-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
  margin-top: clamp(8px, 1.5vw, 20px);
}
.pkg-video-tile {
  margin: 0;
  aspect-ratio: 6 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.pkg-video-tile video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: left center;   /* show the left ~2/3, crop the right */
  display: block;
}
.pkg-video-copy h2 { color: var(--text-on-dark); font-family: var(--font-display); }
.pkg-video-copy p  { color: var(--text-on-dark-soft); margin-top: 16px; }

/* --- PHOTOS section: alternating photo + copy feature rows --- */
.pkg-photo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}
.pkg-photo-row + .pkg-photo-row { margin-top: clamp(40px, 5.5vw, 80px); }
.pkg-photo-row.flip .pkg-photo-figure { order: 2; }
.pkg-photo-figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.pkg-photo-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pkg-photo-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  letter-spacing: -0.015em;
}
.pkg-photo-copy p { margin-top: 14px; }

@media (max-width: 768px) {
  .pkg-video-grid,
  .pkg-photo-row { grid-template-columns: 1fr; }
  .pkg-photo-row.flip .pkg-photo-figure { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.pkg-page .pkg-hero-logo,
  body.pkg-page .page-hero h1,
  body.pkg-page .page-hero p,
  body.pkg-page .page-hero .pkg-hero-cta { animation: none !important; }
}

/* =====================================================================
   REVISION 66 — packages.html redesign pass 4.
   Owner: bigger hero CTA, linear-gradient section transitions, a 3rd
   photo (hero-dusk compressed → waterscape-3.jpg), and the video + 3
   photos rebuilt as a tight alternating stack of bands. All rules are
   body.pkg-page-scoped (touch only packages.html).
   SUPERSEDES the packages layout rules in Rev 63 (.ws-*), Rev 64
   (.pkg-media-*) and Rev 65 (.pkg-video-* / .pkg-photo-row|figure|copy)
   — those classes are no longer used in packages.html (dead CSS, safe
   to delete in a cleanup pass).
   ===================================================================== */

/* --- Hero CTA: moved down + scaled ~3x (clamped so it still fits mobile) --- */
body.pkg-page .page-hero .pkg-hero-cta { margin-top: clamp(30px, 4vw, 52px); }

/* --- Media bands: video + 3 photos, alternating sides, uniform 6/5 tiles --- */
.pkg-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}
.pkg-band.media-right .pkg-band-tile { order: 2; }
.pkg-band-tile {
  margin: 0;
}
.pkg-band-tile video,
.pkg-band-tile img {
  width: 100%;
  height: auto;
  display: block;
}
.pkg-band-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 96px);
}
.pkg-band-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3vw, 2.8rem);
  letter-spacing: -0.015em;
}
.pkg-band-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  letter-spacing: -0.015em;
}
.pkg-band-copy p { margin-top: 14px; }

/* --- Media sections: compressed padding so the bands sit tight --- */
body.pkg-page .pkg-media-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.pkg-page .pkg-video-section { background: var(--green-darkest); }
body.pkg-page .pkg-video-section .pkg-band-copy h2 { color: var(--text-on-dark); }
body.pkg-page .pkg-video-section .pkg-band-copy p  { color: var(--text-on-dark-soft); }
body.pkg-page .pkg-photos-section { background: #3f4d39; }
body.pkg-page .pkg-photos-section .pkg-band-copy h3 { color: var(--text-on-dark); }
body.pkg-page .pkg-photos-section .pkg-band-copy p  { color: var(--text-on-dark-soft); }

@media (max-width: 768px) {
  .pkg-band { grid-template-columns: 1fr; }
  .pkg-band.media-right .pkg-band-tile { order: 0; }
}

/* =====================================================================
   REVISION 70 — packages.html: video → hero background + photo carousel.
   Owner: make the waterfall video the hero BACKGROUND (hero text layout
   unchanged), drop the standalone video section, and turn the three
   photos into a button-rotated carousel whose copy changes with each
   photo. All body.pkg-page-scoped / packages-only classes.
   This makes the Rev 69 `.pkg-band*` / `.pkg-media-section` /
   `.pkg-video-section` / `.pkg-photos-section` rules dead, on top of
   the already-dead Rev 63/64/65 packages classes — all cleanable in
   one pass later.
   ===================================================================== */

/* --- Hero: waterfall video as the background --- */
body.pkg-page .page-hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
body.pkg-page .pkg-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
body.pkg-page .pkg-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15,20,13,0.52) 0%, rgba(15,20,13,0.68) 100%);
}
body.pkg-page .page-hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* --- Photo carousel --- */
body.pkg-page .pkg-carousel-section { background: #3f4d39; }
body.pkg-page .pkg-carousel-section .section-head h2 { color: var(--text-on-dark); }
.pkg-carousel { position: relative; margin-top: clamp(22px, 3vw, 44px); }
.pkg-carousel-track {
  position: relative;
  height: clamp(420px, 50vw, 600px);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.pkg-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease);
}
.pkg-slide.is-active { opacity: 1; pointer-events: auto; }
.pkg-slide-photo { margin: 0; height: 100%; }
.pkg-slide-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pkg-slide-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 64px);
  background: #36432f;
}
.pkg-slide-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  letter-spacing: -0.015em;
  color: var(--text-on-dark);
}
.pkg-slide-copy p { margin-top: 14px; color: var(--text-on-dark-soft); }

.pkg-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: clamp(22px, 3vw, 38px);
}
.pkg-carousel-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--hairline-on-dark);
  background: transparent;
  color: var(--text-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.pkg-carousel-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  transform: scale(1.06);
}
.pkg-carousel-btn svg { width: 20px; height: 20px; }
.pkg-carousel-dots { display: flex; gap: 10px; }
.pkg-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(237, 240, 234, 0.3);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.pkg-dot.is-active { background: var(--orange); transform: scale(1.25); }

@media (max-width: 768px) {
  .pkg-carousel-track { height: auto; border-radius: 0; }
  .pkg-slide {
    position: relative;
    display: none;
    grid-template-columns: 1fr;
    opacity: 1;
    pointer-events: auto;
  }
  .pkg-slide.is-active { display: grid; }
  .pkg-slide-photo { height: auto; aspect-ratio: 3 / 2; }
}

/* =====================================================================
   REVISION 71 — packages carousel: full-bleed, bigger photos, tighter,
   + a curved gradient at the hero's bottom edge.
   - Carousel section padding cut way down (was too much dead space);
     the "A look at recent water features" heading was removed.
   - The carousel is full-bleed — each slide is photo (50vw) + copy
     (50vw). The 3 photos were re-cropped to 1500x800 (top trimmed off,
     a wide 15:8), so the track height tracks that responsively
     (~26.7vw). No rounded corners on the full-bleed track.
   - .pkg-carousel-section gets a Rev 41-style green "bowl" ::before at
     top:-90px — the same curved gradient the home page has at the
     bottom of its hero.
   ===================================================================== */
body.pkg-page .pkg-carousel-section {
  position: relative;
  padding-top: clamp(24px, 3vw, 48px) !important;
  padding-bottom: clamp(24px, 3vw, 48px) !important;
}
body.pkg-page .pkg-carousel-section::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -90px;
  height: 90px;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 100% at 50% 0%,
    rgba(63, 77, 57, 0) 0%, rgba(63, 77, 57, 0) 55%, rgba(63, 77, 57, 1) 90%);
}
.pkg-carousel { margin-top: 0; }
.pkg-carousel-track {
  height: clamp(300px, 26.7vw, 540px);
  border-radius: 0;
}
@media (max-width: 768px) {
  .pkg-carousel-track { height: auto; }
}

/* =====================================================================
   REVISION 72 — packages carousel rebuilt as a draggable, width-morphing
   "accordion" carousel (Dribbble-style). The 3 cards sit in a horizontal
   flex row; the focused card is wide and shows its copy overlaid on the
   photo, the others compress to narrow slivers. Click-dragging left/right
   morphs every card's width continuously, and releasing snaps to the
   nearest card — the prev/next buttons and dots still drive it too.
   The JS module in main.js writes width / transform / --pkg-a inline per
   frame; this block is the static styling those values animate over.
   Supersedes the old opacity-crossfade slide rules (lines ~3620-3700).
   ===================================================================== */
@property --pkg-a {
  syntax: '<number>';
  inherits: true;   /* Rev 73 fix — must inherit into .pkg-slide-overlay + ::after */
  initial-value: 0;
}

/* clip box — compressed neighbours peek past the edges */
.pkg-carousel {
  position: relative;
  margin-top: 0;
  overflow: hidden;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}
.pkg-carousel.is-dragging { cursor: grabbing; }

/* the flex row JS translates */
.pkg-carousel-track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: auto !important;
  border-radius: 0;
  overflow: visible;
  will-change: transform;
  transition: transform .6s cubic-bezier(.4,.02,.2,1);
}

/* each card */
.pkg-slide {
  --pkg-a: 0;
  position: relative !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 auto;
  width: 240px;                       /* JS overrides immediately */
  height: clamp(420px, 58vw, 560px);
  opacity: 1 !important;
  pointer-events: auto !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #2c3626;
  box-shadow: 0 18px 44px -20px rgba(8, 12, 7, 0.7);
  transition: width .6s cubic-bezier(.4,.02,.2,1),
              --pkg-a .6s cubic-bezier(.4,.02,.2,1);
}
.pkg-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* dim veil — strongest on the compressed cards, clears on focus */
.pkg-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #161d12;
  opacity: calc((1 - var(--pkg-a)) * 0.5);
  pointer-events: none;
}

/* copy overlaid on the photo — reveals as the card widens */
.pkg-slide-overlay {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  width: 680px;                       /* JS overrides to match wide width */
  max-width: none;
  padding: clamp(26px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg,
    rgba(15,20,13,0) 0%, rgba(15,20,13,0.04) 30%,
    rgba(15,20,13,0.55) 66%, rgba(15,20,13,0.9) 100%);
  opacity: var(--pkg-a);
  pointer-events: none;
}
.pkg-slide-overlay h3 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-on-dark);
}
.pkg-slide-overlay p {
  margin-top: 12px;
  max-width: 30em;
  color: var(--text-on-dark-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

.pkg-carousel-nav { margin-top: clamp(20px, 2.5vw, 32px); }

/* neutralise the old two-column slide rules + the mobile collapse */
@media (max-width: 768px) {
  .pkg-carousel-track { height: auto !important; }
  .pkg-slide {
    display: block !important;
    height: clamp(380px, 96vw, 470px);
  }
  .pkg-slide.is-active { display: block !important; }
}

/* =====================================================================
   REVISION 73 — packages carousel: 2 more photos, larger cards, centred
   focus, + the --pkg-a inheritance fix.
   - The carousel now holds 5 photos (waterscapes-4/5.jpg added, cropped
     to the same 1500x800). 5 dots.
   - The focused card is now CENTRED in the clip box (was left-anchored)
     and the carousel opens with the middle card focused — see main.js.
   - Cards scaled up: taller frame here, wider focus width in main.js
     (wide ~62vw / cap 880px).
   - The real bug fix is on @property --pkg-a above: it was inherits:false,
     so the focus weight never reached .pkg-slide-overlay (copy stayed
     invisible) or ::after (dim veil showed on every card incl. the
     focused one). With inherits:true the overlay copy reveals on the
     focused card and the veil only dims the compressed cards.
   ===================================================================== */
.pkg-slide {
  height: clamp(460px, 64vw, 660px) !important;
}
@media (max-width: 768px) {
  .pkg-slide { height: clamp(420px, 104vw, 540px) !important; }
}

/* =====================================================================
   REVISION 74 — packages page: clean hero/carousel seam, tighter
   carousel, smaller nav, section drop-shadows, final-CTA reworked.
   - The Rev 71 curved "bowl" gradient between the hero and the carousel
     section is dropped for a clean straight 1px border.
   - The carousel section moves up: its top padding now equals the gap
     between the carousel photos (18px desktop / 10px mobile, set in
     main.js measure()); bottom padding tightened.
   - Carousel nav (arrows + dots) scaled down ~33%, and the space above
     it (margin-top) and below it (section padding-bottom) tightened.
   - Drop shadows added below the carousel section and below the
     packages ("A clear sense of scope and investment.") section, via
     z-index stacking so each section reads as sitting above the next.
   - Final-CTA: heading reworded (HTML), and a second "See more of our
     Services" outline pill added beside the "Free Consultation" pill —
     stacked, centered. .final-cta .btn-outline gets its own styling
     (the existing .btn-outline rules are scoped to .home-cta) and the
     main.js --slide-x selector was extended to include it.
   ===================================================================== */

/* (1) drop the curved gradient — clean straight seam + 1px border */
body.pkg-page .pkg-carousel-section::before { display: none !important; }

/* (2)(3)(8)(9) carousel section: moved up, tighter, shadowed */
body.pkg-page .pkg-carousel-section {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  padding-top: 18px !important;       /* = the carousel photo gap */
  padding-bottom: 14px !important;
  box-shadow: 0 22px 26px -18px rgba(8, 12, 7, 0.6);
}
@media (max-width: 768px) {
  body.pkg-page .pkg-carousel-section { padding-top: 10px !important; }
}

/* (9) drop shadow below the packages section too */
body.pkg-page .packages {
  position: relative;
  z-index: 1;
  box-shadow: 0 22px 26px -18px rgba(8, 12, 7, 0.45);
}

/* (6) carousel nav (arrows + dots) scaled down ~33% + (7) tighter above */
.pkg-carousel-nav {
  margin-top: 11px !important;
  gap: 13px;
}
.pkg-carousel-btn { width: 32px; height: 32px; }
.pkg-carousel-btn svg { width: 13px; height: 13px; }
.pkg-carousel-dots { gap: 7px; }
.pkg-dot { width: 6px; height: 6px; }

/* final-CTA: stack the two pills, centered (mirrors the home-CTA) */
.final-cta .hero-cta {
  flex-direction: column;
  gap: 16px;
  opacity: 1 !important;
  transform: none !important;
}

/* "See more of our Services" outline pill — .btn-outline is otherwise
   only styled under .home-cta, so the .final-cta variant is defined here */
.final-cta .btn-outline {
  min-width: min(360px, 100%);
  justify-content: center !important;
  padding: 3px 22px !important;
  gap: 10px !important;
  font-size: 0.95rem !important;
  background: transparent !important;
  border: 2px solid var(--orange) !important;
  color: var(--orange) !important;
  will-change: transform;
}
.final-cta .btn-outline .btn-ico {
  background: rgba(255, 255, 255, 0.3);
  color: var(--white);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background var(--t) !important;
}
.final-cta .btn-outline:hover .btn-ico {
  transform: translateX(var(--slide-x, 60px)) scale(1.333) !important;
}

/* =====================================================================
   REVISION 75 — packages: carousel section matched to the final-CTA,
   nav docked onto the photo edge, heavier section shadow, tighter
   final-CTA top.
   - Carousel section background now uses the same --hero-gradient as
     the .dark-band final-CTA section (was a flat #3f4d39).
   - The carousel nav (arrows + dots) is absolutely positioned and
     centred on the bottom edge of the photos — i.e. on the bottom edge
     of the always-centred focused photo. .pkg-carousel switches to
     overflow-x: clip / overflow-y: visible so the nav can straddle that
     edge without being clipped (the horizontal peek is still clipped).
   - Carousel section bottom padding raised to 18px to match its top
     padding (photo edge to section edge, both 18px).
   - The shadow under the carousel section is now the same heavy inset
     shadow used under the home page's Our Process section (Rev 59) —
     realised as an inset shadow on the TOP of the packages section.
   - Final-CTA top padding cut down (was the full base --section-pad,
     ~96-176px) — too much air above the heading.
   ===================================================================== */

/* (1) carousel section bg = the final-CTA's background; (3) bottom
   padding matched to the top; (4) its own outset shadow removed */
body.pkg-page .pkg-carousel-section {
  background: var(--hero-gradient);
  padding-bottom: 18px !important;
  box-shadow: none;
}

/* (2) nav docked onto the photos' bottom edge, centred on the focused
   (always-centred) photo. overflow-x: clip keeps the horizontal peek
   clipped while overflow-y: visible lets the nav straddle the edge. */
.pkg-carousel {
  overflow: visible;
  overflow-x: clip;
}
.pkg-carousel-nav {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  margin: 0 !important;
  z-index: 4;
}

/* (4) heavier shadow under the carousel section — the same inset shadow
   used under the home page's Our Process section (Rev 59), placed on
   the packages section's top edge. Kept alongside the Rev 74 outset
   shadow below the packages section. */
body.pkg-page .packages {
  box-shadow: inset 0 32px 40px -20px rgba(0, 0, 0, 0.8),
              0 22px 26px -18px rgba(8, 12, 7, 0.45);
}

/* (5) final-CTA: trim the excess space above the heading */
body.pkg-page .final-cta {
  padding-top: clamp(40px, 5.5vw, 76px) !important;
}

/* =====================================================================
   REVISION 76 — packages: carousel nav back below the photos, gradient
   flipped, final-CTA top padding nudged up.
   - Rev 75 docked the carousel nav onto the photos' bottom edge, but
     the dots then sat over the drag area and the click vs. drag
     handlers fought. Reverted: the nav is back in normal flow below
     the photos (Rev 74 state — .pkg-carousel overflow: hidden, nav
     margin-top 11px, carousel section padding-bottom 14px).
   - The carousel section keeps the --hero-gradient colours but flipped
     vertically (165deg -> 15deg, which reverses the gradient line) so
     the dark green is at the top and the lighter green at the bottom.
   - Final-CTA top padding nudged up from Rev 75's clamp(40-76px) to
     clamp(56-104px) — a bit more air above the heading, still well
     short of the original base padding.
   ===================================================================== */

/* (1) nav back below the photos — undo the Rev 75 docking */
.pkg-carousel { overflow: hidden; }
.pkg-carousel-nav {
  position: static;
  transform: none;
  margin: 11px 0 0 !important;
}

/* (2) carousel section: same --hero-gradient colours, flipped vertically
   (dark green on top, lighter green at the bottom); (1) bottom padding
   restored to its pre-Rev-75 value */
body.pkg-page .pkg-carousel-section {
  background: linear-gradient(15deg, #2A3826 0%, #182016 58%, #0F140D 100%);
  padding-bottom: 14px !important;
}

/* (3) final-CTA top padding nudged up a little */
body.pkg-page .final-cta {
  padding-top: clamp(56px, 7vw, 104px) !important;
}

/* =====================================================================
   REVISION 77 — packages: "This is what we do." intro band.
   A short promotional text section between the hero and the photo
   carousel — a small-height dark band (#0F140D, continuous with the
   hero above and the carousel section's dark top edge below) carrying
   a centred statement headline + one supporting line.
   ===================================================================== */
.pkg-intro {
  background: #0F140D;
  padding: clamp(48px, 6.5vw, 84px) 0;
  text-align: center;
}
.pkg-intro .container { max-width: 720px; }
.pkg-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-on-dark);
}
.pkg-intro p {
  margin-top: 16px;
  font-size: 1.12rem;
  line-height: 1.66;
  color: var(--text-on-dark-soft);
}

/* =====================================================================
   REVISION 78 — packages: intro copy merged into the carousel section.
   The Rev 77 standalone .pkg-intro band had its own flat #0F140D
   background. The owner wants the intro copy and the photo carousel to
   share ONE section, so the carousel section's gradient sits behind
   both. .pkg-intro is now a centred heading block INSIDE
   .pkg-carousel-section, above the carousel — its standalone background
   and section padding are dropped (background: transparent so the
   gradient shows through); the carousel section's top padding grows to
   give the heading air, and .pkg-intro carries a bottom margin for the
   gap down to the carousel. (.pkg-intro h2 / p styling from Rev 77 is
   unchanged; the Rev 77 `.pkg-intro .container` rule is now dead.)
   ===================================================================== */
.pkg-intro {
  background: transparent;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4.5vw, 60px);
  padding: 0 clamp(20px, 4vw, 48px);
  text-align: center;
}
body.pkg-page .pkg-carousel-section {
  padding-top: clamp(48px, 6vw, 80px) !important;
}
@media (max-width: 768px) {
  body.pkg-page .pkg-carousel-section {
    padding-top: clamp(40px, 9vw, 56px) !important;
  }
}

/* =====================================================================
   REVISION 80 — packages: carousel + packages share one seamless green
   gradient, with a lighter-green highlight blob behind the cards.
   - The carousel section and the packages section are wrapped in a new
     .pkg-green-run div carrying ONE continuous dark-green gradient; both
     sections go transparent, so the gradient runs unbroken from the top
     of the carousel section to the end of the packages section.
   - The Rev 75 inset shadow on the packages top (the "shadow below the
     carousel section") is removed for a seamless join; the outset
     shadow below the packages section is kept.
   - A lighter-green radial blob (.packages::before, z-index:-1 within
     the section's Rev 74 stacking context) is layered in front of the
     dark gradient, behind the package cards, to highlight them.
   - Card frames kept visible on the dark bg: the regular cards' bezel
     border swaps the light-bg --hairline for --hairline-on-dark
     (Option A, owner-approved). The featured card is left untouched —
     its solid --green-dark bezel reads against the darker gradient.
   - section-head heading + lead and the .pkg-foot line recoloured for
     the dark background; the .pkg-foot link stays orange.
   ===================================================================== */
.pkg-green-run {
  background: linear-gradient(180deg,
    #0F140D 0%, #161E12 45%, #232E1C 100%);
}
body.pkg-page .pkg-carousel-section {
  background: transparent;
}
body.pkg-page .packages {
  background: transparent;
  box-shadow: 0 22px 26px -18px rgba(8, 12, 7, 0.45);
}
body.pkg-page .packages::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: min(1180px, 96%);
  height: 86%;
  background: radial-gradient(ellipse 60% 56% at 50% 50%,
    rgba(173, 199, 165, 0.20) 0%,
    rgba(173, 199, 165, 0.09) 42%,
    transparent 72%);
  pointer-events: none;
}
body.pkg-page .pkg:not(.featured) .bezel {
  border-color: var(--hairline-on-dark);
}
body.pkg-page .packages .section-head h2 {
  color: var(--text-on-dark);
}
body.pkg-page .packages .section-head p,
body.pkg-page .pkg-foot {
  color: var(--text-on-dark-soft);
}

/* =====================================================================
   REVISION 81 — packages: highlight blob recoloured + made a true circle.
   The Rev 80 blob behind the package cards is restyled per owner: its
   colour becomes the nav-overlay menu green (rgb(65,78,59)) lifted
   slightly lighter, and the shape is now a real circle — a square box
   (aspect-ratio: 1) + radial-gradient(circle closest-side), fading from
   a solid-ish centre out to transparent at the edge. The page background
   is unchanged; only .packages::before is updated (content / position /
   z-index / left / transform / pointer-events from Rev 80 still hold —
   height is reset to auto so aspect-ratio governs the square).
   ===================================================================== */
body.pkg-page .packages::before {
  width: min(1080px, 94%);
  height: auto;
  aspect-ratio: 1 / 1;
  top: 57%;
  background: radial-gradient(circle closest-side,
    rgba(88, 102, 80, 0.70) 0%,
    rgba(88, 102, 80, 0.34) 46%,
    transparent 80%);
}

/* =====================================================================
   REVISION 82 — packages: highlight circle made much bigger + stronger.
   The Rev 81 circle was about the same width as the 3-card row, so the
   cards covered it and the owner couldn't see it. Now it's sized well
   past the card cluster (box ~118% of the section width) so a clear
   lighter-green halo reads around and between the cards, and the
   centre opacity is raised so it actually registers on the dark bg.
   Only .packages::before is updated.
   ===================================================================== */
body.pkg-page .packages::before {
  width: min(1700px, 118%);
  top: 56%;
  background: radial-gradient(circle closest-side,
    rgba(99, 115, 88, 0.90) 0%,
    rgba(99, 115, 88, 0.55) 32%,
    rgba(99, 115, 88, 0.22) 58%,
    transparent 86%);
}

/* =====================================================================
   REVISION 83 — packages: FIX — the highlight circle never rendered.
   Diagnosis: Rev 64 (line ~3390) suppressed the inherited cream section-
   transition blob on the packages page with
       body.pkg-page .packages::before { display: none !important; }
   When Rev 80 repurposed .packages::before for the green highlight
   circle, that display:none !important was still the winning rule — so
   the circle (Revs 80/81/82) was styled but never drawn. This re-enables
   the pseudo-element. (Specificity is identical to the Rev 64 rule, so
   being later in the file is what makes this win.)
   ===================================================================== */
body.pkg-page .packages::before {
  display: block !important;
}

/* =====================================================================
   REVISION 84 — packages: the final-CTA joins the green run.
   The "Ready to upgrade your outdoor living space?" section is moved
   inside the .pkg-green-run wrapper (HTML) and its dark-band background
   set to transparent, so the single continuous gradient now flows
   unbroken from the top of the carousel section all the way to the
   bottom of the final-CTA. The drop shadow under the packages section
   is removed so nothing interrupts that flow.
   ===================================================================== */
body.pkg-page .final-cta {
  background: transparent;
}
body.pkg-page .packages {
  box-shadow: none;
}

/* =====================================================================
   REVISION 85 — packages: kill the line at the packages / final-CTA seam.
   Diagnosis: the final-CTA is a .dark-band, which carries a decorative
   ::before glow positioned to extend above the section (top: -30%).
   .dark-band also has overflow: hidden, so that glow is clipped flat at
   the final-CTA's top edge — a clipped soft glow leaves a hard edge
   exactly on the section boundary, reading as a divider line. The two
   sections already share one continuous gradient; this glow was the
   only thing drawing at the seam. Suppressed on the packages page.
   ===================================================================== */
body.pkg-page .final-cta::before {
  display: none !important;
}

/* =====================================================================
   REVISION 86 — Service standalone pages (landscapes / hardscapes /
   colorscapes / lightscapes) reuse the packages-page hero + .pkg-green-run
   blueprint with these specifics:
   - Each service page's hero gets an icon + service-name "label" row in
     place of the big Superscapes wordmark. `.svc-hero-label` is
     positioned where `.pkg-hero-logo` sat (centred, same bottom margin),
     so the existing staged-entrance animation works just by extending
     the selector list to include it.
   - The tiny nav brand-logo entry animation is suppressed on every page
     except the cinematic home (`body:has(.cine-hero)`) — so contact,
     packages, and the new service pages all just show the small logo
     immediately, no entry slide/fade. (Rev 65 already did this for
     pkg-page; this is broader to also cover contact.html and any future
     page without a cine-hero.)
   - The home services accordion's `.svc-bar-plus` "+" icon was removed
     from the HTML (each `.svc-bar` now navigates to its own standalone
     page on click); a defensive `display: none` here makes sure no
     cached markup shows it.
   ===================================================================== */

/* Hero icon + service-name label (replaces .pkg-hero-logo on service pages) */
body.pkg-page .svc-hero-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0 auto clamp(22px, 3vw, 34px);
  color: var(--text-on-dark);
}
body.pkg-page .svc-hero-ico {
  width: clamp(54px, 7vw, 84px);
  height: clamp(54px, 7vw, 84px);
  color: var(--orange);
  flex: 0 0 auto;
}
body.pkg-page .svc-hero-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 540;
  letter-spacing: -0.02em;
  line-height: 1;
}
/* Slot the hero label into the same staged-entrance animation as
   .pkg-hero-logo (Rev 63 sets the keyframe + delay schedule). */
body.pkg-page .svc-hero-label {
  animation: pkgHeroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  body.pkg-page .svc-hero-label { animation: none !important; }
}

/* Tiny nav brand-logo: NO entry animation AND no positional transition
   on any page except the cinematic home (per owner: it only ever
   animates on the home page). Base `.brand-logo` rule has both the
   `cineLogoIn` fade-in and a `transition: top/transform 0.6s` for the
   scroll-morph; both are killed on non-cine-hero pages. */
body:not(:has(.cine-hero)) .brand-logo {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
}

/* Defensive — the home services-accordion "+" icon was removed from
   HTML; suppress it via CSS in case any cached markup still has it. */
.svc-bar-plus { display: none !important; }

/* =====================================================================
   REVISION 87 — MOBILE DESIGN (≤ 768px), first comprehensive pass.
   All changes scoped under @media (max-width: 768px). Desktop layout
   unaffected.

   Phases:
   1. Shared system: pill buttons drop their hover-arrow (.btn-ico hidden,
      padding tightened), nav-cta tightened.
   2. Home page:
      - .cine-hero swaps the dusk image bg for a vertical waterfall video
        (new <video class="cine-bg-video-mobile"> in .cine-bg).
      - The "There's a sound a backyard makes..." section (.wf-band) is
        hidden — owner direction.
      - .svc-accordion becomes a vertical stack of tap-to-navigate cards:
        photo + scrim + icon + service name + description always visible,
        no hover toggle, no inner "See more" link (whole card navigates
        via main.js — on mobile any tap goes straight to data-href).
   3. Service-page template (.pkg-page):
      - Hero typography scaled for portrait viewports.
      - packages.html hero swaps its landscape <video> for a portrait
        one — two .pkg-hero-bg elements (--desktop and --mobile) with
        the desktop one display:none on mobile and vice versa.
      - .pkg-slide-overlay text dialled down so it fits a narrow slide.
   4. Contact page form already mobile-friendly post the recent edits
      (Email / Location / Timeline / Contact method already full-width);
      only a very-narrow-viewport rule stacks the still-paired Full
      name + Phone row at ≤ 480px.

   Companion edits (outside this CSS block):
   - main.js: on mobile, .svc-bar click always navigates (no toggle).
   - index.html: <video class="cine-bg-video-mobile"> added inside .cine-bg.
   - packages.html: dual <video> .pkg-hero-bg--desktop / --mobile.
   - video/waterfall_mobile.mp4: portrait 1080×1920 encode of the .mov
     (transpose=2 applied for the iPhone rotation tag), full 15.9s.
   ===================================================================== */

@media (max-width: 768px) {

  /* ----- Phase 1: pill buttons drop the hover arrow on touch ----- */
  .btn .btn-ico,
  .nav-cta .btn-ico {
    display: none !important;
  }
  .nav-cta {
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 0 !important;
  }
  .home-cta .btn-primary,
  .home-cta .btn-outline,
  .page-hero .btn-primary,
  .final-cta .btn-primary,
  .final-cta .btn-outline {
    padding-left: 22px !important;
    padding-right: 22px !important;
    gap: 0 !important;
  }
  .pkg .btn-full {
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 0 !important;
  }

  /* ----- Phase 2: home hero — swap image for vertical waterfall video ----- */
  body.home .cine-bg img { display: none !important; }
  body.home .cine-bg-video-mobile {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  body.home .cine-slogan {
    font-size: clamp(1.9rem, 9vw, 3rem);
  }

  /* ----- Phase 2: hide the "There's a sound..." section on mobile ----- */
  body.home .wf-band { display: none !important; }

  /* ----- Phase 2: home services accordion -> stacked tap-to-navigate cards ----- */
  .svc-list {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
  }
  .svc-bar {
    width: 100%;
    height: clamp(220px, 38vw, 280px) !important;
    cursor: pointer;
    /* Lift effect from desktop hover is removed below — see overrides. */
  }
  /* always show the bg image at its base scale (no hover zoom) */
  .svc-bar .svc-bar-bg img,
  .svc-bar:hover .svc-bar-bg img,
  .svc-bar:focus-within .svc-bar-bg img,
  .svc-bar.open .svc-bar-bg img {
    transform: scale(1) !important;
  }
  /* always show the scrim at full opacity (legibility) */
  .svc-bar .svc-bar-scrim,
  .svc-bar:hover .svc-bar-scrim,
  .svc-bar:focus-within .svc-bar-scrim,
  .svc-bar.open .svc-bar-scrim {
    opacity: 1 !important;
  }
  /* always show the description block (no hover-to-reveal) */
  .svc-bar .svc-bar-detail,
  .svc-bar:hover .svc-bar-detail,
  .svc-bar:focus-within .svc-bar-detail,
  .svc-bar.open .svc-bar-detail {
    max-height: none !important;
    opacity: 1 !important;
    margin-top: 10px !important;
    transform: none !important;
  }
  .svc-bar-detail p {
    font-size: 0.92rem;
    line-height: 1.45;
  }
  /* the inner "See more about X" link is redundant when the whole card
     navigates — hide it on mobile */
  .svc-bar-link { display: none !important; }

  /* ----- Phase 3: service-page template heroes (.pkg-page) ----- */
  body.pkg-page .svc-hero-label {
    gap: clamp(10px, 2.5vw, 16px);
    margin-bottom: clamp(18px, 4vw, 28px);
  }
  body.pkg-page .svc-hero-ico {
    width: clamp(44px, 12vw, 64px);
    height: clamp(44px, 12vw, 64px);
  }
  body.pkg-page .svc-hero-name {
    font-size: clamp(1.6rem, 9vw, 2.4rem);
  }
  body.pkg-page .page-hero h1 {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
    line-height: 1.18;
  }
  body.pkg-page .page-hero p {
    font-size: 0.98rem !important;
  }
  /* pkg-hero-logo on packages.html — keep but slightly smaller */
  body.pkg-page .pkg-hero-logo {
    height: clamp(64px, 16vw, 110px) !important;
  }

  /* ----- Phase 3: packages.html — swap landscape video for portrait ----- */
  body.pkg-page .pkg-hero-bg--desktop { display: none !important; }
  body.pkg-page .pkg-hero-bg--mobile  { display: block !important; }

  /* ----- Phase 3: photo carousel — tighten slide overlay text ----- */
  body.pkg-page .pkg-slide-overlay {
    padding: 16px !important;
  }
  body.pkg-page .pkg-slide-overlay h3 {
    font-size: clamp(1.05rem, 5vw, 1.5rem) !important;
    line-height: 1.12;
  }
  body.pkg-page .pkg-slide-overlay p {
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
    margin-top: 8px !important;
  }
}

/* Sibling rule: the desktop hero video (.pkg-hero-bg--desktop) is the
   default visible one and the mobile one is hidden by default. */
.pkg-hero-bg--mobile { display: none; }

/* Sibling rule: the home cine-bg mobile video is hidden by default;
   the @media block above flips it. */
.cine-bg-video-mobile { display: none; }

/* Stack Full name + Phone too on very narrow viewports (≤ 480px) */
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   REVISION 88 — Mobile pass v2 (owner iteration on Rev 87).
   All changes scoped to @media (max-width: 768px). Desktop unaffected.

   Owner directions this pass:
   1. The .mov video is now a straight (no-rotation) transcode — done
      outside CSS; this rev just keeps the dual-video swap in place.
   2. Big Superscapes logo in the home cine-hero is too big and clips
      the right edge — make it smaller and CENTRED in the hero.
      (Also: main.js scroll-morph is now disabled on mobile so CSS
      governs the brand-logo placement.)
   3. Hamburger lines (.menu-toggle span) recoloured to the brand orange.
   4. .nav-overlay drops the curved-gradient bowl on mobile and becomes
      a solid rectangle behind the top nav.
   5. Services accordion cards on mobile revert to the pre-hover (closed)
      look — small height, no description (.svc-bar-detail hidden), scrim
      muted. (Supersedes Rev 87's "always-open" mobile cards.)
   6. Packages section cards: stop stacking vertically. Make .pkg-grid a
      horizontal scroll-snap carousel — one card centred, neighbours
      peeking on the sides, swipe left/right to rotate. Stagger reveal
      delays zeroed so the cards aren't a 1.1s scroll wait.
   7. Footer compressed for mobile — 2-column grid (brand + contact span
      full width), smaller type, tighter padding, condensed bottom bar.
   ===================================================================== */

@media (max-width: 768px) {

  /* ----- (2) Home brand-logo: smaller + horizontally centred ----- */
  body.home .brand-logo {
    left: 50% !important;
    top: clamp(110px, 18vh, 170px) !important;
    transform: translateX(-50%) !important;
    transform-origin: top center !important;
  }
  body.home .brand-logo img {
    height: clamp(60px, 14vw, 100px) !important;
  }
  body.home .navbar.scrolled ~ .brand-logo {
    top: 14px !important;
    transform: translateX(-50%) scale(0.42) !important;
    transform-origin: top center !important;
  }

  /* ----- (3) Hamburger lines -> brand orange ----- */
  .menu-toggle span,
  .navbar.scrolled .menu-toggle span,
  .navbar.menu-open .menu-toggle span {
    background: var(--orange) !important;
  }

  /* ----- (4) Nav overlay: solid rectangle instead of curved gradient ----- */
  .nav-overlay {
    background: rgb(65, 78, 59) !important;
    inset: 0 0 auto 0 !important;
    height: 64px !important;
    transform: none !important;
  }

  /* ----- (5) Services cards: pre-hover (closed) state, no subtext ----- */
  .svc-bar {
    height: clamp(110px, 18vw, 140px) !important;
    cursor: pointer;
  }
  /* hide the description block entirely on mobile */
  .svc-bar-detail,
  .svc-bar:hover .svc-bar-detail,
  .svc-bar:focus-within .svc-bar-detail,
  .svc-bar.open .svc-bar-detail {
    display: none !important;
  }
  /* hide the inner "See more" link (whole card navigates via JS) */
  .svc-bar-link { display: none !important; }
  /* keep the bg image at its base scale (no hover zoom) */
  .svc-bar .svc-bar-bg img,
  .svc-bar:hover .svc-bar-bg img,
  .svc-bar:focus-within .svc-bar-bg img,
  .svc-bar.open .svc-bar-bg img {
    transform: scale(1) !important;
  }
  /* subtle scrim for text legibility on small cards (pre-hover desktop
     has scrim opacity 0, but small mobile cards need help) */
  .svc-bar .svc-bar-scrim,
  .svc-bar:hover .svc-bar-scrim,
  .svc-bar:focus-within .svc-bar-scrim,
  .svc-bar.open .svc-bar-scrim {
    opacity: 0.5 !important;
  }

  /* ----- (6) Packages section: horizontal scroll-snap carousel ----- */
  .packages .pkg-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    /* break out of the container's max-width so cards can use viewport vw */
    padding: 8px 8vw 16px;
    margin: 0 calc(-1 * clamp(20px, 4vw, 48px));
    scroll-padding-inline: 8vw;
    scrollbar-width: none;
    /* let the featured card's "Most popular" flag visibly clear above */
    align-items: stretch;
  }
  .packages .pkg-grid::-webkit-scrollbar { display: none; }
  .packages .pkg-grid .pkg {
    flex: 0 0 84vw;
    max-width: 84vw;
    scroll-snap-align: center;
    min-width: 0;
  }
  /* stagger reveal delays: zero on mobile so cards aren't a 1.1s wait */
  .packages .pkg-grid .pkg:nth-child(1),
  .packages .pkg-grid .pkg:nth-child(2),
  .packages .pkg-grid .pkg:nth-child(3) {
    transition-delay: 0s !important;
  }
  /* slight tightening of the card interior for the narrower frame */
  .packages .pkg-core {
    padding: 30px 24px 28px !important;
  }
  .packages .pkg-name {
    font-size: 1.7rem !important;
  }

  /* ----- (7) Footer: compressed mobile layout ----- */
  .footer {
    padding: 28px 0 16px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
    margin-bottom: 18px !important;
  }
  .footer-brand {
    grid-column: 1 / -1;
    text-align: center;
  }
  .footer-brand .footer-logo { height: 26px; margin-bottom: 8px; }
  .footer-brand p {
    font-size: 0.84rem;
    max-width: 320px;
    margin: 4px auto 0;
    line-height: 1.6;
  }
  .footer-contact {
    grid-column: 1 / -1;
  }
  .footer-links h4,
  .footer-contact h4 {
    font-size: 0.78rem !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.12em;
  }
  .footer-links ul { margin: 0; padding: 0; }
  .footer-links ul li { font-size: 0.86rem; line-height: 1.7; }
  .footer-contact p {
    font-size: 0.84rem;
    line-height: 1.6;
    margin: 0 0 4px;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 6px;
    font-size: 0.72rem !important;
    text-align: center !important;
    padding-top: 16px !important;
  }
}

/* =====================================================================
   REVISION 89 — Mobile pass v3 (owner iteration on Rev 88).
   All scoped to @media (max-width: 768px). Desktop unaffected.

   Owner directions this pass:
   1. Big home brand-logo: scale UP more, and switch to position:absolute
      so it scrolls away with the hero (was fixed, was staying on
      screen as the user scrolled).
   2. .cine-slogan: scale up more, move up a bit, FORCE a line break so
      "Bringing your living space" is on one line and "outdoors." sits
      on the line below.
   3. Hide .brand-logo when the mobile menu is open (was bleeding
      through behind the menu overlay).
   4. New `.nav-s-home` <a> at the top-left of the nav on mobile — the
      small orange S hexagon (`images/brand/s_nobg-01.png`) — acts as a
      persistent home button while scrolled. Hidden on desktop.
   5. New `.nav-menu-logo` <li> inside `.nav-links` shown only when the
      mobile menu is OPEN — the Superscapes wordmark, a home link.
   6. Hide `.nav-cta` (Free Consultation) in the mobile nav menu.
   7. Hide the cream `.packages::before` transition blob on the home
      page on mobile (between services and water-feature packages).
   8. Hide the photo-carousel left/right arrows on mobile (drag/dots only).
   9. Packages-cards carousel: scale cards down a bit so the two side
      cards are visibly peeking on either side; the centred card gets a
      `.pkg-focused` class via the new main.js observer for a coverflow
      effect (centred card scale 1 / opacity 1; others scale 0.86 /
      opacity 0.7, slight upward shift).
   10. Footer compressed MORE — smaller type, tighter padding.
   ===================================================================== */

/* Defaults (outside the media query) for the new nav elements so they
   are hidden on desktop. */
.nav-s-home { display: none; }
.nav-menu-logo { display: none; }

@media (max-width: 768px) {

  /* ----- (1) Home brand-logo: scaled up, absolute, scrolls with hero ----- */
  body.home .brand-logo {
    position: absolute !important;   /* scrolls away with hero */
    left: 50% !important;
    top: clamp(90px, 14vh, 140px) !important;
    transform: translateX(-50%) !important;
    transform-origin: top center !important;
  }
  body.home .brand-logo img {
    height: clamp(120px, 30vw, 200px) !important;
  }
  /* Scrolled (nav state) — irrelevant once the logo has scrolled off,
     but keep a sane size in case it briefly appears. */
  body.home .navbar.scrolled ~ .brand-logo {
    top: 14px !important;
    transform: translateX(-50%) scale(0.38) !important;
  }

  /* ----- (2) Slogan: bigger, moved up, two lines ----- */
  body.home .cine-slogan {
    font-size: clamp(2.2rem, 11vw, 3.4rem) !important;
    line-height: 1.06 !important;
    transform: translateY(calc(-1 * clamp(12px, 4vh, 36px)));   /* nudge up */
  }
  body.home .cine-slogan .slogan-pre {
    display: block;   /* "outdoors." drops to the next line */
  }

  /* ----- (3) Hide brand-logo when the mobile menu is open ----- */
  body.menu-open .brand-logo {
    display: none !important;
  }

  /* ----- (4) S-logo home button at top-left of the nav ----- */
  .nav-s-home {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    z-index: 1101;
    margin-right: auto;
    pointer-events: auto;
  }
  .nav-s-home img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

  /* ----- (5) Superscapes wordmark inside the open nav menu ----- */
  .nav-links.open .nav-menu-logo {
    display: block !important;
    margin: 8px auto 24px;
    text-align: center;
    opacity: 1;
    transform: none;
  }
  .nav-menu-logo a {
    display: inline-block;
    text-decoration: none;
  }
  .nav-menu-logo img {
    height: 52px;
    width: auto;
    display: block;
  }

  /* ----- (6) Hide Free Consultation pill in the mobile nav menu ----- */
  .nav-links .nav-cta {
    display: none !important;
  }

  /* ----- (7) Hide white packages::before blob (home, between
     services and packages sections) ----- */
  body.home .packages::before {
    display: none !important;
  }

  /* ----- (8) Hide left/right arrows on the photo carousel (drag + dots only) ----- */
  body.pkg-page .pkg-carousel-btn {
    display: none !important;
  }
  /* tighten the nav so the dots sit nicely without the buttons */
  body.pkg-page .pkg-carousel-nav {
    gap: 8px !important;
  }

  /* ----- (9) Packages-cards carousel: side cards visible behind centred card ----- */
  .packages .pkg-grid .pkg {
    flex: 0 0 70vw !important;
    max-width: 70vw !important;
    transform: scale(0.86) translateY(-4px);
    opacity: 0.72;
    transition: transform 0.42s var(--ease, ease), opacity 0.42s var(--ease, ease);
  }
  .packages .pkg-grid .pkg.pkg-focused {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  /* tighten the grid padding to give the side cards more room */
  .packages .pkg-grid {
    padding: 8px 6vw 32px;
    gap: 10px;
  }

  /* ----- (10) Footer compressed further ----- */
  .footer {
    padding: 18px 0 10px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-bottom: 10px !important;
  }
  .footer-brand { grid-column: 1 / -1; text-align: center; }
  .footer-brand .footer-logo { height: 22px !important; margin-bottom: 4px; }
  .footer-brand p {
    font-size: 0.76rem !important;
    max-width: 280px;
    margin: 4px auto 0;
    line-height: 1.5;
  }
  .footer-brand p br { display: none; }
  .footer-contact { grid-column: 1 / -1; text-align: center; }
  .footer-links h4,
  .footer-contact h4 {
    font-size: 0.7rem !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.12em;
  }
  .footer-links ul { margin: 0; padding: 0; }
  .footer-links ul li {
    font-size: 0.78rem !important;
    line-height: 1.55 !important;
  }
  .footer-contact p {
    font-size: 0.78rem !important;
    line-height: 1.55 !important;
    margin: 0 0 2px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 4px;
    font-size: 0.66rem !important;
    text-align: center !important;
    padding-top: 10px !important;
  }
}

/* =====================================================================
   REVISION 90 — Mobile pass v4 (owner iteration on Rev 89).
   All scoped to @media (max-width: 768px). Desktop unaffected.

   Owner directions this pass:
   1. Slogan was slightly too big — scale down 20%, force-centre.
   2. More padding between the services section and the water-feature
      packages section on the home page.
   3. "Most popular" pill is being clipped at the top of the packages
      carousel — add padding-top to .pkg-grid so the flag has room.
   4. Footer: more space between brand subtext and the Explore / Get
      Started / Contact columns.
   5. Footer Explore / Get Started / Contact columns: scaled down more.
   6. Footer subtext "Landscapes, hardscapes…" line removed (HTML, all
      7 pages — done by sed).
   7. Footer Superscapes logo ~3× bigger and centred with proper padding.
   8. Nav-menu logo (inside open mobile menu) bigger + appears
      instantly (the staged-in delay was too slow).
   9. Big home brand-logo could be seen over the nav when scrolling
      back up — nav and nav-overlay z-index lifted above the brand-logo
      (1100) so the nav always paints on top.
   10. On service pages and the water-feature packages page (non-home
       pages on mobile), the Superscapes wordmark was still showing in
       the nav — hidden via `body:not(:has(.cine-hero)) .brand-logo`.
   ===================================================================== */

@media (max-width: 768px) {

  /* ----- (1) Slogan scaled down 20%, centred, fit within viewport ----- */
  body.home .cine-slogan {
    font-size: clamp(1.76rem, 8.8vw, 2.72rem) !important;
    line-height: 1.08 !important;
    max-width: 92vw;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }

  /* ----- (2) More padding between services and packages on home ----- */
  body.home .svc-accordion {
    padding-bottom: clamp(40px, 7vh, 72px) !important;
  }
  body.home .packages {
    padding-top: clamp(56px, 10vh, 96px) !important;
  }

  /* ----- (3) "Most popular" pill room: top padding on .pkg-grid ----- */
  .packages .pkg-grid {
    padding: 44px 6vw 32px !important;
  }

  /* ----- (4) Footer: more space between brand row and columns row ----- */
  .footer-grid {
    row-gap: 28px !important;
    column-gap: 14px !important;
    margin-bottom: 14px !important;
  }

  /* ----- (5) Footer columns scaled down more ----- */
  .footer-links h4,
  .footer-contact h4 {
    font-size: 0.62rem !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.14em;
  }
  .footer-links ul li {
    font-size: 0.72rem !important;
    line-height: 1.55 !important;
  }
  .footer-contact p {
    font-size: 0.72rem !important;
    line-height: 1.55 !important;
    margin: 0 0 2px !important;
  }

  /* ----- (7) Footer logo ~3× bigger, centred, with breathing room ----- */
  .footer-brand .footer-logo {
    height: 66px !important;
    display: block;
    margin: 0 auto 14px !important;
  }
  .footer-brand p {
    font-size: 0.78rem !important;
    max-width: 300px;
    margin: 0 auto !important;
    line-height: 1.5;
  }

  /* ----- (8) Nav-menu logo: bigger + instant on menu open ----- */
  .nav-menu-logo img {
    height: 78px !important;
  }
  .nav-links.open .nav-menu-logo a {
    transition-delay: 0s !important;
    transition-duration: 0.2s !important;
  }
  .nav-links.open .nav-menu-logo {
    margin-top: 4px;
    margin-bottom: 28px;
  }

  /* ----- (9) Nav always on top — lift z-index above brand-logo (1100) ----- */
  .navbar {
    z-index: 1300 !important;
  }
  .nav-overlay {
    z-index: 1200 !important;
  }

  /* ----- (10) Hide brand-logo (wordmark) on non-home pages mobile ----- */
  body:not(:has(.cine-hero)) .brand-logo {
    display: none !important;
  }
}

/* =====================================================================
   REVISION 91 — Mobile pass v5 (owner iteration on Rev 90).
   All scoped to @media (max-width: 768px). Desktop unaffected.

   Owner directions this pass:
   1. "Bringing your living space" still clipped — scale down `.slogan-pre`
      ONLY (keep `<strong>outdoors.</strong>` at the parent size).
   2. Hero entrance order on mobile: big brand-logo first, then
      "Bringing your living space", then "outdoors.", then the nav
      (overlay + S-home + hamburger) all together at the end.
   3. Nav-menu Superscapes wordmark should appear the instant the menu
      opens (Rev 90 set it on the <a>, but the parent `<li>` opacity/
      transform was still staged — now overridden on the li too).
   4. The `.nav-s-home` (orange S top-left) was still visible behind
      the open mobile menu — hide it when the menu is open.
   5. Add a matching green arc gradient at the BOTTOM of the services
      section, flipped vertically (mirror of the top `::before` arc).
   6. Services cards: shorten height by ~33%.
   7. Packages cards mobile carousel: make it an infinite loop (companion
      JS in main.js clones the 3 cards into 3 consecutive copies — 9
      total — and silently re-bases scrollLeft on settle, the same
      pattern used by the photo carousel) and add 3 active-state dots
      below the carousel.
   ===================================================================== */

@media (max-width: 768px) {

  /* ----- (1) Slogan: scale down .slogan-pre only, outdoors stays ----- */
  body.home .cine-slogan .slogan-pre {
    font-size: clamp(1.4rem, 7vw, 2.2rem) !important;
    /* outdoors (.cine-slogan strong) inherits the parent's bigger size */
  }

  /* ----- (2) Hero entrance ordering — big logo -> pre -> outdoors -> nav ----- */
  body.home .brand-logo            { animation-delay: 0.3s !important; }
  body.home .cine-slogan .slogan-pre { animation-delay: 1.2s !important; }
  body.home .cine-slogan strong    { animation-delay: 2.0s !important; }
  body.home .scroll-cue            { animation-delay: 3.4s !important; }

  @keyframes navInMobile {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  body.home .nav-overlay,
  body.home .nav-s-home,
  body.home .menu-toggle {
    opacity: 0;
    animation: navInMobile 0.6s var(--ease, ease) 2.8s forwards;
  }

  /* ----- (3) Nav-menu logo: instant on open (also override the <li>) ----- */
  .nav-links.open .nav-menu-logo,
  .nav-links.open .nav-menu-logo a {
    transition-delay: 0s !important;
    transition-duration: 0.18s !important;
  }

  /* ----- (4) Hide the .nav-s-home when the mobile menu is open ----- */
  body.menu-open .nav-s-home {
    display: none !important;
  }

  /* ----- (5) Services section: matching arc gradient at the BOTTOM ----- */
  .svc-accordion::after {
    content: '';
    position: absolute;
    bottom: -90px;
    left: 0; right: 0;
    height: 90px;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse 90% 100% at 50% 0%,
      rgba(63, 77, 57, 1) 0%,
      rgba(63, 77, 57, 1) 55%,
      rgba(63, 77, 57, 0) 90%);
  }

  /* ----- (6) Services cards: -33% height ----- */
  .svc-bar {
    height: clamp(74px, 12vw, 94px) !important;
  }

  /* ----- (7) Packages carousel dots (JS inserts the element on mobile) ----- */
  .pkg-grid-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 6px 0 0;
    padding: 0 0 6px;
  }
  .pkg-grid-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: rgba(24, 32, 22, 0.22);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, transform 0.3s ease;
  }
  .pkg-grid-dot.is-active {
    background: var(--orange);
    transform: scale(1.3);
  }
}

/* Hidden on desktop — the JS only inserts/uses these on mobile, but
   keep a default so any stray rendering can't show through. */
.pkg-grid-dots { display: none; }

/* =====================================================================
   REVISION 92 — Mobile pass v6 (owner iteration on Rev 91).
   All scoped to @media (max-width: 768px). Desktop unaffected.

   Owner directions this pass:
   1. Services cards (mobile): the icon + name are sitting too low after
      the Rev 91 height cut. Vertically centre the row inside each card.
   2. The services → packages bottom arc was rendered "backwards" — owner
      wants the TRANSPARENT region to be the blob (curving up into
      services) with the GREEN framing it. Inverted the gradient stops.
   3. Packages cards look BLURRY while the centred card scales/transitions
      — `transform: scale()` renders text on a sub-pixel grid in software.
      Force a GPU layer with `translate3d` + `backface-visibility:hidden`
      + `will-change` so the browser composites the card crisply.
   4. The Superscapes wordmark inside the open mobile menu is STILL
      animating in too slowly — wipe its transition entirely (instant
      opacity:1) and shorten the panel's own slide-in duration.
   5. The `.nav-s-home` (orange S) was hidden via `display: none` while
      the menu was open — that left it gone forever from the user's
      perspective after the first menu open. Switched to an `opacity`
      transition so it fades back in cleanly when the menu closes.
   ===================================================================== */

@media (max-width: 768px) {

  /* ----- (1) Services cards: vertically centre the row in the card ----- */
  .svc-bar-inner {
    justify-content: center !important;
  }

  /* ----- (2) Services bottom arc: inverted gradient (transparent blob, green frame) ----- */
  .svc-accordion::after {
    background: radial-gradient(ellipse 90% 100% at 50% 0%,
      rgba(63, 77, 57, 0) 0%,
      rgba(63, 77, 57, 0) 55%,
      rgba(63, 77, 57, 1) 90%) !important;
  }

  /* ----- (3) Packages cards: GPU layer + crisp scale ----- */
  .packages .pkg-grid .pkg {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, -4px, 0) scale(0.86) !important;
  }
  .packages .pkg-grid .pkg.pkg-focused {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  /* ----- (4) Nav-menu Superscapes wordmark: instant, no stagger ----- */
  .nav-links {
    transition-duration: 0.22s !important;   /* faster panel slide */
  }
  .nav-links > li.nav-menu-logo,
  .nav-links > li.nav-menu-logo > a {
    transition: none !important;
  }
  .nav-links.open > li.nav-menu-logo,
  .nav-links.open > li.nav-menu-logo > a {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* ----- (5) Nav-S-home: opacity-based hide (so it returns when menu closes) ----- */
  body.home .nav-s-home {
    transition: opacity 0.25s ease !important;
  }
  body.menu-open .nav-s-home {
    display: flex !important;     /* keep layout slot */
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* =====================================================================
   REVISION 93 — Mobile pass v7 (owner iteration on Rev 92).
   All scoped to @media (max-width: 768px). Desktop unaffected.

   Owner directions this pass:
   1. .svc-bar corners less rounded.
   2. Services-card icon + text were still sitting too high — the
      .svc-bar-inner has `padding: clamp(20px, …, 38px)` top/bottom,
      which on a 74-px-tall mobile card consumes 40 px and pushes the
      ~38 px icon row off-centre. Zeroing the inner's vertical padding
      lets the flex centering use the full card height.
   3. Services bottom arc gradient: rotate 180° — keep the inverted
      stops from Rev 92, switch the anchor from `at 50% 0%` to
      `at 50% 100%`. Green ends up at the SERVICES side (top of the
      arc-box) and corners; the transparent blob opens DOWN into
      packages.
   4. Packages-cards carousel: REMOVE the scale-down + opacity-dim of
      the non-focused cards entirely. The browser's text rendering
      under `transform: scale()` was the source of the blur — even
      with GPU compositing the text was sub-pixel-fuzzy. All cards
      now stay at scale 1, full opacity, no transform transition.
      The active dot still indicates which card is currently centred.
   5. Hero nav entrance: force every animation longhand on
      .nav-overlay / .nav-s-home / .menu-toggle with `!important` so
      no earlier-rev rule (Rev 42/43/47's nav-overlay animation;
      anything else) can slide one of them in at a different time.
      Three elements, identical animation, single 2.8 s delay,
      single 0.6 s fade.
   ===================================================================== */

@media (max-width: 768px) {

  /* ----- (1) Service cards: less rounded ----- */
  .svc-bar {
    border-radius: 10px !important;
  }

  /* ----- (2) Service-card row: properly vertically centred -----
     Kill the inner's vertical padding (was clamp(20px, 3vw, 38px) on
     mobile cards that are only 74-94 px tall) so the flex centering
     can use the full card height. */
  .svc-bar-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    justify-content: center !important;
  }

  /* ----- (3) Services bottom arc: rotated 180° (anchor flipped) ----- */
  .svc-accordion::after {
    background: radial-gradient(ellipse 90% 100% at 50% 100%,
      rgba(63, 77, 57, 0) 0%,
      rgba(63, 77, 57, 0) 55%,
      rgba(63, 77, 57, 1) 90%) !important;
  }

  /* ----- (4) Packages cards: NO scale, NO opacity dim, NO blur ----- */
  .packages .pkg-grid .pkg,
  .packages .pkg-grid .pkg.pkg-focused {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }

  /* ----- (5) Hero nav entrance — force identical timing across all 3 ----- */
  body.home .nav-overlay,
  body.home .nav-s-home,
  body.home .menu-toggle {
    opacity: 0 !important;
    animation-name: navInMobile !important;
    animation-duration: 0.6s !important;
    animation-timing-function: ease !important;
    animation-delay: 2.8s !important;
    animation-fill-mode: forwards !important;
    animation-iteration-count: 1 !important;
  }
}

/* =====================================================================
   REVISION 94 — Mobile pass v8: bug fixes.
   1. `@keyframes navInMobile` was defined INSIDE the Rev 91 mobile
      media query, which some browsers (notably mobile Safari) don't
      resolve when an `animation-name: navInMobile` reference is also
      inside a media query. Net effect: the nav-overlay / S-home /
      menu-toggle were stuck at `opacity: 0` (initial state from my
      rule) and the animation never started — they rendered invisible
      but remained clickable. Re-declared the keyframes at top level
      (this definition wins via cascade order and is always resolved).
   2. The packages cards were STILL blurring during transitions — even
      Rev 93's `transform: none / will-change: auto` overrides weren't
      enough to convince all browsers. Removed the carousel cloning +
      coverflow JS entirely in main.js: the carousel is back to the 3
      original cards, no JS-applied `.pkg-focused`, no clones. The dot
      indicator is preserved. No way for the cards to transform, ever.
   ===================================================================== */

@keyframes navInMobile {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =====================================================================
   REVISION 95 — Mobile nav entrance REMOVED (fix for "invisible nav").
   The Rev 91 / 93 staggered entrance was leaving .nav-overlay,
   .nav-s-home, and .menu-toggle invisible because the rule set
   `opacity: 0 !important` AND per CSS spec, `!important` BEATS
   keyframe animations on the same property — the animation simply
   could NOT bring opacity from 0 to 1, no matter what keyframes were
   declared or where they lived. Elements were stuck opacity 0
   forever, hence "invisible but the spots are still clickable."

   Surgical fix: force the nav trio fully visible on mobile and kill
   any animation on them. The other hero entrance staggering (big
   logo, "Bringing your living space", "outdoors.") is unaffected —
   only the nav-trio entrance is dropped. A staggered nav reveal can
   come back later with a transition + JS class-toggle approach
   (`!important`-safe).

   Also adds text-rendering hints on the packages cards in case the
   perceived blur during scroll-snap is a subpixel-antialiasing
   artifact.
   ===================================================================== */

@media (max-width: 768px) {
  body.home .nav-overlay,
  body.home .nav-s-home,
  body.home .menu-toggle {
    opacity: 1 !important;
    animation: none !important;
    animation-name: none !important;
    animation-fill-mode: none !important;
  }

  .packages .pkg-grid .pkg,
  .packages .pkg-grid .pkg * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
  }
}

/* =====================================================================
   REVISION 96 — Mobile hero slogan repositioned just below centre.
   The .cine-hero is `min-height: 100dvh; display: flex; align-items:
   flex-end`, so the .cine-inner wrapper (which holds the slogan) sits
   at the bottom of the hero. Owner wants both slogan lines moved to
   just below the hero's vertical centre on mobile.

   Approach: on mobile only, flip .cine-hero's `align-items` to
   `flex-start` and push .cine-inner down with `margin-top: 52dvh`
   (top edge of the slogan block at 52% of the hero height — "just
   below the centre"). `padding-bottom` zeroed so the slogan stays
   where it lands. Desktop layout is unaffected.
   ===================================================================== */

@media (max-width: 768px) {
  body.home .cine-hero {
    align-items: flex-start !important;
  }
  body.home .cine-hero .cine-inner {
    margin-top: 52dvh !important;
    padding-bottom: 0 !important;
  }
}

/* =====================================================================
   REVISION 97 — Service-page subtext font size unified (mobile).
   On the 4 service pages (landscapes / hardscapes / colorscapes /
   lightscapes — packages.html EXCLUDED) the mobile hero subtext is
   `0.98rem` (Rev 73 `body.pkg-page .page-hero p`). The owner wants
   the same size applied to:
     - the .pkg-intro paragraph below the hero / above the carousel,
     - the .final-cta paragraph below the carousel.
   Titles (h1 / h2) are untouched.

   Scoping: `body.pkg-page:has(.svc-hero-label)` selects only the 4
   service pages (packages.html has `.pkg-hero-logo` in its hero, not
   `.svc-hero-label`, so it's excluded automatically — no HTML edits
   needed).
   ===================================================================== */

@media (max-width: 768px) {
  body.pkg-page:has(.svc-hero-label) .pkg-intro p,
  body.pkg-page:has(.svc-hero-label) .final-cta p {
    font-size: 0.98rem !important;
  }
}

/* =====================================================================
   REVISION 98 — Service-page hero label scaled up (mobile).
   On the 4 service pages (.svc-hero-label exists), bump the icon + the
   service name up and increase the gap between the label block and the
   h1 ("Living gardens, built for Mississippi…" etc).

   Previous mobile sizes (Rev 73):
     - .svc-hero-ico   width/height: clamp(44px, 12vw, 64px)
     - .svc-hero-name  font-size:    clamp(1.6rem, 9vw, 2.4rem)
     - .svc-hero-label margin-bottom: clamp(18px, 4vw, 28px)

   New (Rev 98):
     - icon            clamp(58px, 15vw, 84px)
     - name            clamp(2rem, 11vw, 3rem)
     - label margin-b  clamp(34px, 7vw, 52px)

   packages.html doesn't have a `.svc-hero-label` so it's unaffected.
   ===================================================================== */

@media (max-width: 768px) {
  body.pkg-page .svc-hero-ico {
    width: clamp(58px, 15vw, 84px) !important;
    height: clamp(58px, 15vw, 84px) !important;
  }
  body.pkg-page .svc-hero-name {
    font-size: clamp(2rem, 11vw, 3rem) !important;
  }
  body.pkg-page .svc-hero-label {
    margin-bottom: clamp(34px, 7vw, 52px) !important;
  }
}

/* =====================================================================
   REVISION 99 — Service-page hero restructured for mobile.
   Mobile only; service pages only (packages.html has no .svc-hero-label
   so it's not affected by any of these rules).

   Owner directions:
   1. The .svc-hero-label switches from `row` to `column` — the icon
      sits ON TOP of the service name text instead of beside it.
   2. The icon scales up ~2× (from Rev 98's `clamp(58, 15vw, 84px)` to
      `clamp(116, 30vw, 168px)`).
   3. The hero height is cut by ~33% — `min-height: 100dvh` → `67dvh`.
   4. Internal padding tightened so the new layout breathes correctly
      in the shorter hero — top padding pulled in (nav-clearance only)
      and bottom padding rebalanced.

   Rev 98's icon-size override is superseded by Rev 99's stronger
   value (latest declaration wins among equally-`!important` rules).
   ===================================================================== */

@media (max-width: 768px) {
  body.pkg-page .page-hero {
    min-height: 67dvh !important;
    padding-top: clamp(90px, 13vh, 130px) !important;
    padding-bottom: clamp(36px, 6vw, 64px) !important;
  }
  body.pkg-page .svc-hero-label {
    flex-direction: column !important;
    gap: clamp(12px, 3vw, 22px) !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.pkg-page .svc-hero-ico {
    width: clamp(116px, 30vw, 168px) !important;
    height: clamp(116px, 30vw, 168px) !important;
  }
}

/* =====================================================================
   REVISION 100 — Service-page carousel ABOVE the intro on mobile.
   Service pages only (scoped via `:has(.svc-hero-label)` — packages.html
   doesn't have it, so it stays exactly as designed).

   Owner directions:
   1. Reorder the `.pkg-carousel-section` so the photo carousel sits
      DIRECTLY UNDER the hero, and the intro block (e.g. "Stonework,
      the slow way" + supporting paragraph) drops BELOW the carousel.
   2. The gap between the hero and the carousel should match the gap
      between the photos inside the carousel (≈ 10 px on mobile, set
      by main.js `measure()` — Rev 74).

   Approach: turn `.pkg-carousel-section` into a flex column on mobile
   and use `order` to swap the two children — carousel `order: 1`,
   intro `order: 2`. Set the section's `padding-top: 10px` so the gap
   between the hero edge and the carousel matches the inter-photo gap.
   Give the intro a comfortable top margin (gap from carousel down to
   the new-position intro) and bottom margin (gap to final-CTA).
   ===================================================================== */

@media (max-width: 768px) {
  body.pkg-page:has(.svc-hero-label) .pkg-carousel-section {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 10px !important;
  }
  body.pkg-page:has(.svc-hero-label) .pkg-carousel-section .pkg-carousel {
    order: 1 !important;
    margin-top: 0 !important;
  }
  body.pkg-page:has(.svc-hero-label) .pkg-carousel-section .pkg-intro {
    order: 2 !important;
    margin-top: clamp(28px, 6vw, 44px) !important;
    margin-bottom: clamp(20px, 4vw, 36px) !important;
  }
}

/* =====================================================================
   REVISION 101 — Home page (index.html) mobile: targeted breathing room.
   Mobile only; only the spots the owner specifically asked for. Everything
   else holds its current Rev-89/90 distances.

   1. Services section top padding bumped (more air above the "Services"
      title text).
   2. Services section bottom padding bumped (more air between bottom of
      Lightscapes card and section bottom). Rev 90 had this at
      `clamp(40, 7vh, 72px)` — Rev 101 brings it up to `clamp(86, 13vh, 126px)`.
   3. Home-CTA section bottom padding bumped (more air between the
      "See some examples" button and the section bottom).
   4. Footer top padding bumped (more air above the footer logo).
   5. Footer logo gets a top margin so it sits further down from the
      footer's top edge.
   ===================================================================== */

@media (max-width: 768px) {
  body.home .svc-accordion {
    padding-top: clamp(120px, 17vh, 160px) !important;
    padding-bottom: clamp(86px, 13vh, 126px) !important;
  }
  body.home .home-cta {
    padding-bottom: clamp(120px, 17vh, 160px) !important;
  }
  body.home .footer {
    padding-top: clamp(96px, 14vw, 140px) !important;
  }
  body.home .footer-brand .footer-logo {
    margin-top: clamp(22px, 4vh, 36px) !important;
  }
}

/* =====================================================================
   REVISION 102 — Rev 101 reinforcement.
   Owner reported that only the services bottom padding actually moved
   after Rev 101; the other three (services top, home-CTA bottom,
   footer top, footer-logo top margin) didn't visibly change. Two
   likely causes: (a) the values weren't big enough to read against
   the existing whitespace, and (b) earlier Rev shorthand rules
   (Rev 89 `.footer { padding: 18px 0 10px !important }`, Rev 90
   `.footer-brand .footer-logo { margin: 0 auto 14px !important }`)
   may have edge-cased the override.

   This Rev:
   - bumps all four values noticeably bigger so the change is
     unmistakable;
   - rewrites the footer + footer-logo overrides as the full SHORTHAND
     `padding` / `margin` (matching the form of the earlier !important
     rules they're overriding, so there's zero ambiguity);
   - tightens specificity on the footer with `body.home footer.footer`.
   ===================================================================== */

@media (max-width: 768px) {
  body.home .svc-accordion {
    padding-top: clamp(170px, 22vh, 230px) !important;
    padding-bottom: clamp(110px, 16vh, 150px) !important;
  }
  body.home .home-cta {
    padding-bottom: clamp(180px, 24vh, 240px) !important;
  }
  body.home footer.footer {
    padding: clamp(140px, 18vw, 200px) 0 clamp(20px, 4vh, 32px) !important;
  }
  body.home footer.footer .footer-brand .footer-logo {
    margin: clamp(44px, 7vh, 66px) auto 14px !important;
  }
}

/* =====================================================================
   REVISION 103 — Brute-force home-CTA bottom + footer-logo top spacing.
   Owner reports Rev 102's values still aren't reading. Switching from
   clamp() (which can land on tiny values depending on viewport math) to
   FIXED PIXEL values that cannot be misinterpreted, and stacking the
   selectors deeper. If this doesn't render after a hard refresh
   (Ctrl+Shift+R / Cmd+Shift+R), the issue is 100% browser cache —
   not CSS.
   ===================================================================== */

@media (max-width: 768px) {
  body.home section.home-cta.section {
    padding-bottom: 260px !important;
  }
  body.home footer.footer {
    padding-top: 220px !important;
  }
  body.home footer.footer .footer-brand .footer-logo {
    margin-top: 80px !important;
  }
}

/* =====================================================================
   REVISION 104 — Owner re-tuning the Rev 103 values.
   - Services top: too much → 80px.
   - Home-CTA top: increase from default → 180px.
   - Home-CTA bottom: Rev 103 260px too much → 110px.
   - Footer top: Rev 103 220px too much → 64px.
   - Footer logo top-margin: kept tighter (40px) to suit the new
     footer padding-top.
   ===================================================================== */

@media (max-width: 768px) {
  body.home .svc-accordion {
    padding-top: 80px !important;
  }
  body.home section.home-cta.section {
    padding-top: 180px !important;
    padding-bottom: 110px !important;
  }
  body.home footer.footer {
    padding-top: 64px !important;
  }
  body.home footer.footer .footer-brand .footer-logo {
    margin-top: 40px !important;
  }
}

/* Rev 105 — micro-tune .home-cta: top -30 px, bottom +40 px. */
@media (max-width: 768px) {
  body.home section.home-cta.section {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
  }
}

/* Rev 106 — increase top spacing of .process section (mobile). */
@media (max-width: 768px) {
  body.home section.process.section {
    padding-top: 130px !important;
  }
}

/* =====================================================================
   REVISION 107 — More mobile spacing tweaks across pages.
   1. Home: more room above the water-feature .packages section.
   2. Home: slightly less below the services accordion (Rev 102 had
      `clamp(110, 16vh, 150px)` — pull it back a touch).
   3. Service pages (.final-cta): more breathing room above AND below.
   4. Packages.html (.final-cta): more breathing room below only.

   Scoping: index.html is `body.home` (NOT `.pkg-page`); the 4 service
   pages are `body.home.pkg-page` and have `.svc-hero-label`;
   packages.html is `body.home.pkg-page` and has `.pkg-hero-logo`
   (no `.svc-hero-label`).
   ===================================================================== */

/* Rev 108 — services intro copy split per breakpoint. */
.svc-intro-mobile { display: none; }
@media (max-width: 768px) {
  .svc-intro-desktop { display: none; }
  .svc-intro-mobile  { display: block; }
}

/* Rev 109 — bold + slightly larger "We tailor the details to you." */
.pkg-tailor {
  font-weight: 700;
  font-size: 1.12em;
}

/* Rev 110 — packages.html only: .pkg-tailor uses the display (title) font. */
body.pkg-page:not(:has(.svc-hero-label)) .pkg-tailor {
  font-family: var(--font-display);
}

/* Rev 111 — universalise the display font on .pkg-tailor (index.html too)
   and scale up. Applies on both desktop and mobile. */
.pkg-tailor {
  font-family: var(--font-display) !important;
  font-size: 1.4em !important;
}

/* Rev 112 — allow .home-cta .lead to wrap on mobile (Rev 60 nowrap was
   clipping the line off the right edge of narrow viewports). */
@media (max-width: 768px) {
  .home-cta .lead {
    white-space: normal !important;
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Rev 113 — more space between .home-cta h2 and .home-cta .lead
   (both desktop + mobile). Was `margin: 18px auto 0` from line 1170. */
.home-cta .lead {
  margin-top: 40px !important;
}

/* Rev 114 — more space between .final-cta h2 and p on all .pkg-page pages
   (packages.html + 4 service pages). Was `margin-bottom: 18px` on h2. */
body.pkg-page .final-cta h2 {
  margin-bottom: 44px !important;
}

/* Rev 115 — more space between the packages-section h2 and its
   supporting paragraph on packages.html. Was `margin-top: 18px` from
   line 213 `.section-head p`. */
body.pkg-page .packages .section-head p {
  margin-top: 44px !important;
}

/* Rev 116 — more space between .pkg-intro h2 and p on packages.html
   (the "This is what we do." block). Was `margin-top: 16px` (Rev 78,
   line 4085). Scoped to packages.html only via the
   `:not(:has(.svc-hero-label))` discriminator. */
body.pkg-page:not(:has(.svc-hero-label)) .pkg-intro p {
  margin-top: 40px !important;
  margin-bottom: 0 !important;
}

/* Rev 117 — staggered entrance for the two .pkg-intro paragraphs on
   packages.html. The h2 keeps the wrapper's existing fade-up reveal
   (`.pkg-intro.reveal` triggered by the IntersectionObserver). p1 and
   p2 are opacity-0 by default and fade in only (no slide), each with
   their own delay so the eye reads h2 → p1 → p2 in sequence. */
body.pkg-page:not(:has(.svc-hero-label)) .pkg-intro .pkg-intro-p1,
body.pkg-page:not(:has(.svc-hero-label)) .pkg-intro .pkg-intro-p2 {
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
body.pkg-page:not(:has(.svc-hero-label)) .pkg-intro.active .pkg-intro-p1 {
  opacity: 1;
  transition-delay: 0.55s;
}
body.pkg-page:not(:has(.svc-hero-label)) .pkg-intro.active .pkg-intro-p2 {
  opacity: 1;
  transition-delay: 1.15s;
}

/* Rev 118 — packages.html mobile: .pkg-intro p font-size matched to
   the hero subtext (0.98rem, Rev 73). */
@media (max-width: 768px) {
  body.pkg-page:not(:has(.svc-hero-label)) .pkg-intro p {
    font-size: 0.98rem !important;
  }
}

/* Rev 119 — mobile: more subtext sized to the hero p (0.98rem).
   - packages.html `.pkg-foot` ("Not seeing something that fits?…").
   - all `.pkg-page` pages `.final-cta p` ("Book a free, no-pressure…"). */
@media (max-width: 768px) {
  body.pkg-page:not(:has(.svc-hero-label)) .pkg-foot {
    font-size: 0.98rem !important;
  }
  body.pkg-page .final-cta p {
    font-size: 0.98rem !important;
  }
}

/* Rev 120 — packages.html tweaks:
   1. Mobile: .packages .section-head p ("These three packages…") sized
      to match the hero subtext (0.98rem).
   2. Mobile: .pkg-tailor scaled down slightly (1.4em → 1.2em).
   3. Both breakpoints: .pkg-tailor text colour set to white on packages.html
      only (not on index.html, which keeps the inherited text colour). */
@media (max-width: 768px) {
  body.pkg-page .packages .section-head p {
    font-size: 0.98rem !important;
  }
  body.pkg-page:not(:has(.svc-hero-label)) .pkg-tailor {
    font-size: 1.2em !important;
  }
}
body.pkg-page:not(:has(.svc-hero-label)) .pkg-tailor {
  color: #fff !important;
}

@media (max-width: 768px) {
  /* (1) Home water-feature packages section: more top */
  body.home:not(.pkg-page) section.packages.section {
    padding-top: 120px !important;
  }
  /* (2) Home services accordion: slightly less bottom */
  body.home .svc-accordion {
    padding-bottom: 86px !important;
  }
  /* (3) Service pages final-CTA: more above + below */
  body.pkg-page:has(.svc-hero-label) section.final-cta.section {
    padding-top: 130px !important;
    padding-bottom: 130px !important;
  }
  /* (4) Packages.html final-CTA: more below only */
  body.pkg-page:not(:has(.svc-hero-label)) section.final-cta.section {
    padding-bottom: 130px !important;
  }
}

/* Rev 121 — more space between .pkg-intro h2 and p on the 4 SERVICE pages
   (landscapes/hardscapes/colorscapes/lightscapes). Default was Rev 78's
   margin-top: 16px. Applies both desktop AND mobile. Scoped via
   `:has(.svc-hero-label)` so packages.html keeps its Rev 116 value
   independently. */
body.pkg-page:has(.svc-hero-label) .pkg-intro p {
  margin-top: 40px !important;
}

/* Rev 122 — DESKTOP only: more space between hero h1 and hero p on
   the 4 service pages. Default was `.page-hero h1 { margin-bottom: 18px }`
   (line 900). */
@media (min-width: 769px) {
  body.pkg-page:has(.svc-hero-label) .page-hero h1 {
    margin-bottom: 36px !important;
  }
}

/* Rev 123 — kill the brand-logo IMG height transition on non-home pages.
   Rev 73 line 4321 disables transition/animation on `.brand-logo` itself
   for non-cine-hero pages, but Rev 14's `body.home .brand-logo img
   { transition: height 0.7s !important }` (line 2074) still applies on
   contact/packages/services (they all carry `body class="home"`). JS
   sets img.height to the small 36 px on load, and the 0.7 s transition
   from the CSS default clamp(104, 15.5vw, 196 px) → 36 px is the visible
   shrink/fly-in the owner saw. Killing the img transition makes the
   small-state render instant on those pages. */
body:not(:has(.cine-hero)) .brand-logo img {
  transition: none !important;
  animation: none !important;
}

/* Rev 124 — fix packages.html mobile .pkg-grid-dots: the inactive dots
   were `rgba(24, 32, 22, 0.22)` (Rev 91), which is near-black at 22%
   opacity. On the dark-green packages-section background, those dots
   are practically invisible. Switching to a light tint so the two
   inactive dots actually read against the dark bg. The active dot stays
   orange + scale(1.3). */
@media (max-width: 768px) {
  .pkg-grid-dot {
    background: rgba(255, 255, 255, 0.40) !important;
  }
  .pkg-grid-dot.is-active {
    background: var(--orange) !important;
  }
}

/* =====================================================================
   REVISION 125 — packages.html only: gradient arc at the TOP of the
   .pkg-carousel-section ("This is what we do") bridging from the hero
   into the section. Same shape + direction as the Rev 92/93 BOTTOM arc
   on .svc-accordion (TRANSPARENT BLOB carving into the section, GREEN
   framing the top edge and corners), just mirrored to the TOP of this
   section (anchor at 50% 0% with the box positioned above the section).

   Rev 74 line 3906 set `body.pkg-page .pkg-carousel-section::before
   { display: none !important }`. We override that here ONLY on packages.html
   (the 4 service pages stay clean). Color = #3f4d39 (the carousel
   section's own background green).
   ===================================================================== */

body.pkg-page:not(:has(.svc-hero-label)) .pkg-carousel-section {
  position: relative;   /* belt-and-suspenders — Rev 74 already sets it */
}
body.pkg-page:not(:has(.svc-hero-label)) .pkg-carousel-section::before {
  content: '';
  display: block !important;
  position: absolute;
  top: -90px;
  left: 0;
  right: 0;
  height: 90px;
  pointer-events: none;
  z-index: 1;
  /* Rev 126 — flipped 180° (anchor 50% 100% → 50% 0%), and color
     corrected to #0F140D (the top of .pkg-green-run's linear gradient,
     which IS the visible bg at the top edge of the section since the
     section itself is `background: transparent`). */
  background: radial-gradient(ellipse 90% 100% at 50% 0%,
    rgba(15, 20, 13, 0) 0%,
    rgba(15, 20, 13, 0) 55%,
    rgba(15, 20, 13, 1) 90%) !important;
}