/*
 * NEPTUNE — Home Assessment Landing Page + Thank You Page
 * Shared stylesheet for /assessment/ and /assessment/thank-you/
 * Mobile-first. Poppins throughout. Calm, premium, minimal.
 */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --navy:        #0B1E3D;
  --navy-soft:   #16305A;
  --navy-deep:   #070f1e;
  --blue:        #1A5FA8;
  --blue-hover:  #17548F;
  --blue-pale:   #EAF1F9;
  --copper:      #B87333;
  --success:     #2A8A50;
  --success-pale:#E7F4EC;

  --white:       #FFFFFF;
  --off-white:   #F6F8FA;
  --card:        #F6F8FA;
  --card-tint:   #EEF1F5;
  --placeholder: #E7ECF1;
  --placeholder-ink: #7C8CA0;
  --border:      #E2E7EE;

  --text:        #0B1E3D;
  --text-2:      #4B5A70;
  --text-3:      #8492A3;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-full: 999px;

  --w-max:  1120px;
  --w-text: 640px;

  --shadow-sm: 0 1px 2px rgba(11,30,61,.05), 0 1px 4px rgba(11,30,61,.04);
  --shadow-md: 0 8px 28px rgba(11,30,61,.08);
  --shadow-lg: 0 16px 48px rgba(11,30,61,.12);

  --ease: .2s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }
input, select { font-family: var(--font); }
ul, ol { list-style: none; }

.container       { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--s-5); }
.container-text  { width: 100%; max-width: var(--w-text); margin-inline: auto; padding-inline: var(--s-5); }

.section     { padding-block: var(--s-12); }
.section-sm  { padding-block: var(--s-10); }
.section-off { background: var(--off-white); }

.eyebrow {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: var(--s-3);
}
.eyebrow-copper { color: var(--copper); }

h1, h2, h3, h4 { color: var(--navy); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 6vw, 2.9rem); line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); line-height: 1.2; }
h3 { font-size: 1.1rem; line-height: 1.35; }
h4 { font-size: .95rem; line-height: 1.4; }

.section-head { max-width: var(--w-text); margin: 0 auto var(--s-10); text-align: center; }
.section-head p { font-size: 1.02rem; color: var(--text-2); line-height: 1.7; margin-top: var(--s-3); }

p { color: var(--text-2); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font); font-size: 1rem; font-weight: 600;
  padding: 16px 30px; border-radius: var(--r-sm);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease);
  text-align: center;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover  { background: var(--blue-hover); }
.btn-primary:active { transform: scale(.99); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }

.btn-outline { background: transparent; color: var(--navy); border-color: var(--border); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

.btn-full { width: 100%; }

.btn-text {
  background: none; border: none; padding: 8px 0;
  font-size: .9rem; font-weight: 600; color: var(--text-3);
}
.btn-text:hover { color: var(--text-2); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.site-header .logo img { height: 26px; width: auto; }
.site-header .header-phone {
  display: flex; align-items: center; gap: 7px;
  font-size: .875rem; font-weight: 600; color: var(--navy);
}
.site-header .header-phone svg { color: var(--blue); flex-shrink: 0; }

/* ============================================================
   HERO — STATIC (text-only, home page)
   ============================================================ */
.hero-static { padding-block: var(--s-12) var(--s-8); text-align: center; }
.hero-static .hero-copy { max-width: 640px; margin: 0 auto; }
.hero-static h1 { margin-bottom: var(--s-5); text-wrap: balance; }
.hero-static .hero-sub {
  font-size: 1.05rem; line-height: 1.75;
  max-width: 560px; margin: 0 auto;
}
.marquee-track.marquee-track--fast { animation-duration: 8s; }

/* ============================================================
   HERO — BACKGROUND PHOTO (photo runs behind copy + gallery both)
   ============================================================ */
/* Deep, near-neutral navy — scoped to this hero only (not the shared --navy token) so the copper accent
   pops the way a true dark canvas lets an accent color pop, without recoloring buttons/footer/etc. site-wide */
.hero-photo { position: relative; overflow: hidden; background: var(--navy-deep); }
.hero-photo-upper { position: relative; overflow: hidden; }
.hero-photo-media { position: absolute; inset: 0; z-index: 0; }
.hero-photo-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-photo-overlay {
  position: absolute; inset: 0;
  /* Last stop matches .hero-photo's own flat background exactly, so the seam into the solid arrow zone is invisible instead of a color jump */
  background: linear-gradient(180deg, rgba(7,15,30,.82) 0%, rgba(7,15,30,.9) 55%, var(--navy-deep) 100%);
}
.hero-photo-content {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 720px; margin: 0 auto;
  padding-block: var(--s-8) 0;
  display: flex; flex-direction: column; align-items: center;
}
.hero-photo-content .hero-badge.hero-badge-copper { color: var(--copper); border-color: rgba(184,115,51,.5); background: rgba(184,115,51,.14); }
.hero-photo-content h1 {
  color: #fff; margin-bottom: var(--s-4); text-wrap: balance;
  font-size: clamp(1.5rem, 6.5vw, 2.9rem);
  text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.hero-photo-content .hero-sub {
  font-size: .95rem; color: rgba(255,255,255,.92); line-height: 1.65;
  max-width: 600px; margin: 0 auto;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.hero-quiet-link {
  display: block;
  font-size: .82rem; font-weight: 500;
  color: rgba(255,255,255,.55);
  margin-top: var(--s-4);
  text-decoration: underline; text-underline-offset: 3px;
}
.hero-quiet-link:hover { color: rgba(255,255,255,.85); }
.hero-quiet-link--static {
  text-align: center; text-decoration: none; cursor: default;
  margin-top: var(--s-3);
}
.hero-photo-gallery {
  position: relative; z-index: 3;
  margin-top: var(--s-6);
  padding-bottom: var(--s-8);
}

/* Arrow gets generous room to breathe, sitting on flat solid navy (.hero-photo's own background) */
.hero-arrow-spacer {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  padding-block: var(--s-8);
}
.hero-scroll-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 76px;
  border: 2px solid rgba(184,115,51,.75);
  border-radius: var(--r-full);
  background: rgba(11,30,61,.4);
  color: var(--copper);
  animation: arrow-bounce 1.7s ease-in-out infinite;
  transition: border-color var(--ease), background var(--ease);
}
.hero-scroll-arrow svg { width: 24px; height: 24px; }
.hero-scroll-arrow:hover { background: rgba(184,115,51,.14); }

@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* Mobile only: a touch more room around headline/subheadline/gallery, trimmed elsewhere
   so the arrow at least starts to peek into view on load (not full visibility — just enough
   of a hint that there's more below) */
@media (max-width: 767px) {
  .hero-photo-content h1 { margin-bottom: var(--s-5); }
  .hero-photo-gallery { margin-top: var(--s-8); padding-bottom: var(--s-3); }
  .hero-photo-gallery .marquee-item { width: 145px; }
  .hero-arrow-spacer { padding-block: var(--s-3); }
}

/* Nested assessment section sits on .hero-photo's flat navy — no background of its own */
.hero-photo .assessment {
  position: relative; z-index: 4;
  background: transparent;
  padding-block: var(--s-8) var(--s-4);
}

@media (min-width: 768px) {
  .hero-photo-content { padding-block: var(--s-16) 0; max-width: 1100px; }
  .hero-photo-content h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
  .hero-photo-content .hero-sub { font-size: 1.05rem; max-width: 900px; }
  .hero-photo-gallery { margin-top: var(--s-8); padding-bottom: var(--s-10); }
  .hero-arrow-spacer { padding-block: var(--s-12); }
  .hero-scroll-arrow { width: 64px; height: 88px; }
  .hero-scroll-arrow svg { width: 28px; height: 28px; }
}

@media (min-width: 768px) {
  .hero-static { padding-block: var(--s-16) var(--s-10); }
  .hero-static .hero-copy { max-width: 1100px; text-align: center; }
  .hero-static .hero-sub { max-width: 900px; }
}

/* ============================================================
   HERO — MOBILE: BACKGROUND VIDEO / DESKTOP: SPLIT
   ============================================================ */
.hero-video { position: relative; overflow: hidden; }
.hero-inner {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  padding-block: var(--s-16) var(--s-12);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; background: var(--navy); }
.hero-bg-video {
  position: absolute; inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  object-fit: cover; object-position: center 30%;
  display: block;
}
.hero-bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,30,61,.55) 0%, rgba(11,30,61,.68) 55%, rgba(11,30,61,.82) 100%);
}
.hero-copy {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 600px; margin: 0 auto;
  padding-inline: var(--s-5);
}
.hero-badge {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  padding: 8px 18px;
  border-radius: var(--r-full);
  margin-bottom: var(--s-5);
}
.hero-video h1 { color: #fff; margin-bottom: var(--s-5); text-wrap: balance; }
.hero-accent { color: var(--copper); }
.hero-video .hero-sub {
  font-size: 1.05rem; color: rgba(255,255,255,.85); line-height: 1.75;
  max-width: 560px; margin: 0 auto;
}

@media (min-width: 768px) {
  .hero-inner {
    display: grid; grid-template-columns: auto auto;
    justify-content: center;
    align-items: stretch;
    gap: var(--s-8);
    min-height: 500px;
    max-width: var(--w-max);
    margin-inline: auto;
    padding: var(--s-12) var(--s-8);
  }
  .hero-bg {
    position: relative; inset: auto;
    order: 2;
    align-self: stretch;
    width: auto;
    aspect-ratio: 3/4;
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .hero-bg-video { object-position: center; }
  .hero-bg-overlay { display: none; }
  .hero-copy {
    order: 1;
    text-align: left;
    max-width: 480px; margin: 0;
    padding: 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  .hero-badge {
    color: var(--blue);
    background: var(--blue-pale);
    border-color: transparent;
  }
  .hero-video h1 { color: var(--navy); }
  .hero-video .hero-sub { color: var(--text-2); margin: 0; }
}

/* ============================================================
   PLACEHOLDER PHOTO TILES
   ============================================================ */
.placeholder {
  background: var(--placeholder);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.placeholder-inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding: var(--s-6);
  text-align: center;
}
.placeholder-inner svg { color: var(--placeholder-ink); flex-shrink: 0; }
.placeholder-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--placeholder-ink);
  line-height: 1.5;
  max-width: 220px;
}
.placeholder-hero { aspect-ratio: 4/3; }
.placeholder-gallery { aspect-ratio: 3/4; }

.gallery-photo-frame {
  aspect-ratio: 3/4;
  border-radius: var(--r-md);
  overflow: hidden;
}
.gallery-photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.gallery-caption {
  display: block;
  text-align: center;
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
  margin-top: var(--s-2);
}

/* ============================================================
   OFFER BANNER — SCROLLING MARQUEE
   ============================================================ */
.offer-banner { background: var(--navy); padding-block: 12px; }
.offer-banner-viewport {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.offer-banner-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee-scroll 20s linear infinite;
}
.offer-banner-track span {
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.offer-banner-track span strong { color: var(--copper); font-weight: 700; }

/* ============================================================
   WATCH-FIRST DIRECTIVE BAR + VSL FRAME
   Scoped to /melbourne — one accent-colour directive bar sitting
   directly above the VSL, matching the proven "click below to
   watch first" pattern. Copper (existing accent) instead of a new
   colour, so the black/white/one-accent look stays consistent with
   the rest of the site rather than introducing a second accent.
   ============================================================ */
.watch-first-bar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  max-width: 720px; margin: var(--s-6) auto var(--s-5);
  background: var(--copper);
  color: #fff;
  font-size: .85rem; font-weight: 700; letter-spacing: .01em;
  text-align: center;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(184,115,51,.35);
}
.watch-first-bar svg { flex-shrink: 0; }

.vsl-frame {
  position: relative; z-index: 3;
  max-width: 720px; margin: 0 auto var(--s-5);
  display: flex; flex-direction: column;
  border-radius: var(--r-lg); overflow: hidden;
  border: 2px solid var(--copper);
  box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(184,115,51,.2);
  background: var(--navy);
}
/* Video + its overlay buttons live in their own aspect-ratio box, separate
   from the control bar below -- the bar is now added on, not overlapping
   the picture. */
.vsl-video-wrap { position: relative; aspect-ratio: 16/9; }
.vsl-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }

.vsl-toggle-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 76px; border-radius: 14px;
  background: rgba(77,166,255,.55); border: none;
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 4; transition: background .15s ease, transform .15s ease, opacity .3s ease;
}
.vsl-toggle-play:hover { background: rgba(77,166,255,.75); transform: translate(-50%, -50%) scale(1.04); }
/* Disappears once actually playing (barActive-gated, so this only fires
   after a real press, not during the muted ambient autoplay). Reappears
   whenever genuinely paused. */
.vsl-frame.is-playing .vsl-toggle-play { opacity: 0; pointer-events: none; }

.vsl-toggle-mute {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.4);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 4;
}
.vsl-toggle-mute:hover { background: rgba(0,0,0,.65); }
.vsl-toggle-mute { transition: opacity .25s ease; }
.vsl-toggle-mute.is-hidden { opacity: 0; pointer-events: none; }

/* Bottom control bar -- play/pause, elapsed time, seekable progress, mute,
   settings, fullscreen. Solid accent-coloured bar with a white track/handle,
   matching the reference player's layout but in the page's own colour
   (--accent) rather than a fixed brand colour. */
.vsl-controlbar {
  position: relative; z-index: 4;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--accent, #4DA6FF);
}
.vsl-bar-btn {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 0;
  background: transparent; border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; opacity: .95;
}
.vsl-bar-btn:hover { opacity: 1; }
.vsl-time {
  flex-shrink: 0; color: #fff; font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums; min-width: 32px;
}
.vsl-seek {
  flex: 1 1 auto; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.4); cursor: pointer; position: relative;
}
.vsl-seek-fill {
  height: 100%; width: 0%; border-radius: 3px;
  background: #fff;
}
.vsl-seek-handle {
  position: absolute; top: 50%; left: 0%;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  pointer-events: none;
}

.vsl-volume-wrap { position: relative; flex-shrink: 0; }
.vsl-volume-menu {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  background: var(--navy, #0B1E3D);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm);
  padding: 10px 8px;
  height: 90px; width: 34px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.vsl-volume-menu[hidden] { display: none; }
.vsl-volume-menu input[type="range"] {
  writing-mode: vertical-lr; direction: rtl;
  width: 4px; height: 100%;
  accent-color: var(--accent, #4DA6FF);
  cursor: pointer;
}

.vsl-settings-wrap { position: relative; flex-shrink: 0; }
.vsl-settings-menu {
  position: absolute; bottom: calc(100% + 10px); right: -8px;
  background: var(--navy, #0B1E3D);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm); padding: 8px 0;
  min-width: 84px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
}
/* The [hidden] attribute needs this spelled out -- otherwise this rule's
   own `display: flex` above overrides the browser's default [hidden]
   behaviour and the menu never actually hides. */
.vsl-settings-menu[hidden] { display: none; }
.vsl-settings-label {
  color: rgba(255,255,255,.5); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 14px 6px;
}
.vsl-speed-opt {
  background: transparent; border: none; color: #fff;
  font-size: .85rem; text-align: left; padding: 7px 14px;
  cursor: pointer;
}
.vsl-speed-opt:hover { background: rgba(255,255,255,.08); }
.vsl-speed-opt.is-active { color: var(--accent, #4DA6FF); font-weight: 700; }

@media (min-width: 768px) {
  .watch-first-bar { font-size: 1.05rem; padding: 16px 26px; margin-top: var(--s-8); }
}

/* One consistent action colour on this page -- a lighter, brighter blue
   for stronger contrast against the near-black background than copper or
   the site's default (darker) blue gave. Scoped to .page-melbourne so
   /experts and the rest of the site are untouched. */
.page-melbourne { --accent: #4DA6FF; }
.page-melbourne .btn-primary { background: var(--accent); color: #05131F; }
.page-melbourne .btn-primary:hover { background: #7CC0FF; }
.page-melbourne .choice-pill:has(input:checked) { border-color: var(--accent); background: rgba(77,166,255,.12); }
.page-melbourne .choice-pill:has(input:checked)::before { border-color: var(--accent); background: var(--accent); }
.page-melbourne .form-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(77,166,255,.18); }
.page-melbourne .hero-accent { color: var(--accent); }
.page-melbourne .hero-scroll-arrow { border-color: rgba(77,166,255,.75); color: var(--accent); }
.page-melbourne .hero-scroll-arrow:hover { background: rgba(77,166,255,.14); }
/* Bar sits flush against the video, no gap -- reads as one connected
   unit (bar as the video's "header strip"), matching Brandon's reference
   rather than two separate floating elements. */
.page-melbourne .watch-first-bar {
  background: var(--accent); color: #05131F; box-shadow: 0 8px 24px rgba(77,166,255,.35);
  margin-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.page-melbourne .vsl-frame {
  border-color: var(--accent); box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(77,166,255,.25);
  border-radius: 0 0 var(--r-lg) var(--r-lg); border-top: none;
}
.page-melbourne .next-step-word { text-decoration-color: var(--accent); }
.page-melbourne .eyebrow { color: var(--accent); }

/* Gallery marquee slowed slightly -- 8s felt too fast/blurry with only
   7 photos in the loop. */
.page-melbourne .marquee-track--fast { animation-duration: 14s; }

/* Tightest reasonable gap between the "Next Step" heading and the form
   card below it. */
.page-melbourne .hero-photo .assessment-head { margin-bottom: var(--s-2); }
@media (max-width: 767px) {
  .page-melbourne .hero-photo .assessment-head { margin-bottom: var(--s-4); }
}

/* Why Neptune -- checklist instead of a wall of text, button sits right
   under it with no dead gap (uses --success, the site's existing green
   token, for the checkmarks -- distinct from the light-blue action
   colour, since these are proof points, not click targets). */
.page-melbourne #why-neptune .section-head { margin-bottom: var(--s-8); }
.page-melbourne .why-list {
  max-width: var(--w-text); margin: 0 auto var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.page-melbourne .why-list li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: 1.02rem; line-height: 1.55; color: rgba(255,255,255,.9);
  text-align: left;
}
.page-melbourne .why-list svg { flex-shrink: 0; margin-top: 2px; color: var(--success); }
.page-melbourne .why-neptune-btn { display: flex; width: fit-content; margin: 0 auto; }

/* Using 6.jpg (vertical shot, unit centred) -- holds up across the taller
   hero+arrow+form span without the blur the landscape photo had. Media
   spans the full .hero-photo section (everything ABOVE the "Melbourne's
   Own" gallery, which keeps its own normal background untouched -- not
   made transparent this time, avoiding the earlier contrast bug).
   Gradient pushed later so the photo stays visible right up near the
   bottom of the form, only reaching solid navy at ~92% -- as close to
   the Melbourne's Own boundary as still leaves the form legible. */
.page-melbourne .hero-photo-overlay {
  background: linear-gradient(180deg, rgba(7,15,30,.82) 0%, rgba(7,15,30,.86) 20%, rgba(7,15,30,.91) 45%, rgba(7,15,30,.96) 65%, rgba(7,15,30,.98) 80%, var(--navy-deep) 92%, var(--navy-deep) 100%);
}

/* Mobile: the hero+arrow+form container is far taller relative to width
   here than on desktop, so stretching the photo across all of it forces
   an extreme scale-up -- the visible crop ends up showing almost nothing
   recognisable (mostly sky, unit never appears). Capping the photo's
   height keeps it looking like an actual photo; below that it falls back
   to .hero-photo's own flat navy background, which matches the gradient's
   end colour exactly, so there's still no visible seam. */
@media (max-width: 767px) {
  .page-melbourne .hero-photo-media { bottom: auto; height: 640px; }
  /* The desktop gradient's percentage stops were tuned for a much taller
     span -- reused as-is against this short 640px height, the darkening
     compresses into a tiny space and the whole thing reads as near-black.
     Recalibrated here: photo stays clearly visible through most of it,
     only darkening toward the very bottom where it hands off to the flat
     navy fallback. */
  .page-melbourne .hero-photo-overlay {
    background: linear-gradient(180deg, rgba(7,15,30,.4) 0%, rgba(7,15,30,.55) 50%, rgba(7,15,30,.85) 80%, var(--navy-deep) 100%);
  }
}

/* ============================================================
   ASSESSMENT FORM
   ============================================================ */
.assessment { padding-block: var(--s-8) var(--s-5); background: var(--off-white); }
/* Process section follows directly after the form -- trim its own top padding
   (normally shared/larger via .section) so the gap into it isn't oversized. */
#process { padding-top: var(--s-6); }
@media (min-width: 768px) {
  #process { padding-top: var(--s-8); }
}
.ghl-survey-wrap { min-height: 220px; }
.ghl-survey-wrap iframe { display: block; width: 100%; min-height: 220px; }
.assessment-card {
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--s-8) var(--s-5) var(--s-3);
  max-width: 560px;
  margin: 0 auto;
}
/* Form stands alone, no card chrome -- just the GHL widget's own white surface on the dark backdrop */
.assessment-card--form-only {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 680px;
}
.assessment-head { text-align: center; margin-bottom: var(--s-8); }
/* On this page the heading sits directly on the dark hero backdrop, not a white card -- needs white text + shadow like the rest of the hero copy */
.hero-photo .assessment-head {
  max-width: 640px; margin-inline: auto; margin-bottom: var(--s-6);
}
@media (min-width: 768px) {
  .hero-photo .assessment-head { margin-bottom: var(--s-4); }
}
.hero-photo .assessment-head .next-step-heading {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.next-step-heading {
  display: block;
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  letter-spacing: -.01em;
}
.next-step-word { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 4px; }
.assessment-head h2 { margin-bottom: var(--s-3); }
.assessment-head p { font-size: .95rem; line-height: 1.65; }

.progress-track { display: flex; gap: 6px; margin-bottom: var(--s-2); }
.progress-track span {
  height: 4px; flex: 1; border-radius: 2px;
  background: var(--border); transition: background .25s ease;
}
.progress-track span.done { background: var(--blue); }
.progress-label {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: var(--s-8);
}

.step { display: none; }
.step.active { display: block; animation: fadeIn .3s ease; }
.step-question {
  font-size: 1.05rem; font-weight: 600; color: var(--navy);
  margin-bottom: var(--s-5); line-height: 1.4;
}

.choice-list { display: flex; flex-direction: column; gap: var(--s-3); }
.choice-pill {
  display: flex; align-items: center; gap: var(--s-3);
  position: relative;
  padding: 17px 20px 17px 52px;
  border: 2px solid var(--navy); border-radius: var(--r-sm);
  font-size: .98rem; font-weight: 500; color: var(--text);
  cursor: pointer; transition: border-color var(--ease), background var(--ease);
  min-height: 56px;
}
.choice-pill input { position: absolute; opacity: 0; }
.choice-pill::before {
  content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--border); background: #fff;
  transition: border-color var(--ease), background var(--ease);
}
.choice-pill:has(input:checked) { border-color: var(--blue); background: var(--blue-pale); }
.choice-pill:has(input:checked)::before {
  border-color: var(--blue); background: var(--blue);
  box-shadow: inset 0 0 0 4px #fff;
}

.form-field { margin-bottom: var(--s-4); }
.form-field label {
  display: block; font-size: .8rem; font-weight: 600; color: var(--text-2);
  margin-bottom: var(--s-2);
}
.form-field input {
  width: 100%; padding: 15px 16px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-size: 1rem; color: var(--text); background: var(--white);
  outline: none; -webkit-appearance: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form-field input::placeholder { color: var(--text-3); }
.form-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-pale); }

.step-actions { margin-top: var(--s-6); }
.step-actions .btn-text { margin-bottom: var(--s-3); }

.form-note {
  font-size: 12px; color: var(--text-3); text-align: center;
  margin-top: var(--s-5); line-height: 1.6;
}

.call-us-link {
  display: block; text-align: center;
  font-size: .88rem; font-weight: 600; color: var(--text-3);
  margin-top: var(--s-5);
}
.call-us-link:hover { color: var(--blue); }

.state-panel { display: none; text-align: center; padding: var(--s-4) 0; }
.state-panel.active { display: block; animation: fadeIn .3s ease; }
.state-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--off-white); color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s-5);
}
.state-panel h3 { margin-bottom: var(--s-3); }
.state-panel p { font-size: .95rem; line-height: 1.65; margin-bottom: var(--s-2); }
.state-panel .btn { margin-top: var(--s-5); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.timeline {
  display: flex; flex-direction: column; gap: var(--s-8);
  max-width: 640px; margin: 0 auto;
}
.timeline-step { display: flex; gap: var(--s-5); }
.timeline-icon {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--blue); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--white);
}
.timeline-body h3 { margin-bottom: var(--s-2); }
.timeline-body p { font-size: .92rem; line-height: 1.65; }
.timeline-body p + p { margin-top: 4px; }

.timeline-photo {
  max-width: 480px; margin: var(--s-10) auto 0;
  aspect-ratio: 1/1;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.timeline-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  display: block;
}

/* ============================================================
   WHY NEPTUNE — CREDENTIAL CARDS
   ============================================================ */
.credential-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
.credential-card {
  background: var(--card-tint); border-radius: var(--r-lg);
  padding: var(--s-8) var(--s-6); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.credential-card .cred-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--blue-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  margin-bottom: var(--s-1);
}
.credential-card h3 { font-size: 1rem; }
.credential-card p { font-size: .87rem; line-height: 1.6; }

/* ============================================================
   BETTER WATER THROUGHOUT YOUR HOME — BENEFIT CARDS
   ============================================================ */
.benefit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
}
.benefit-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s-6) var(--s-5); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
}
.benefit-card .benefit-icon {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--blue-pale); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-1);
}
.benefit-card h3 { font-size: .95rem; }
.benefit-card p { font-size: .85rem; line-height: 1.55; }
/* .benefit-card is a white card floating on .section-dark — its own text must never inherit the dark-section white-text override */
.section-dark .benefit-card p { color: var(--text-2); }

/* ============================================================
   GALLERY — CAROUSEL (mobile) / GRID (desktop)
   ============================================================ */
.gallery-scroll {
  display: flex; gap: var(--s-4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s-2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-scroll::-webkit-scrollbar { display: none; }
.gallery-scroll .placeholder-gallery,
.gallery-scroll .gallery-photo {
  flex: 0 0 78%; scroll-snap-align: center;
}
.gallery-grid { display: none; }

/* ============================================================
   MELBOURNE INSTALLS — AUTO-SCROLLING MARQUEE
   ============================================================ */
.installs-marquee { padding-block: var(--s-10); }
.installs-marquee .section-head { margin-bottom: var(--s-8); }
/* "100+ Melbourne Families Already Sorted" wraps awkwardly at the default
   640px section-head width -- give it room on desktop to sit on one line,
   leave it wrapping on mobile where there's no space for that anyway. */
@media (min-width: 768px) {
  .installs-marquee .section-head { max-width: none; }
  .installs-marquee .section-head h2 { white-space: nowrap; }
  #benefits .section-head { max-width: none; }
  #benefits .section-head h2 { white-space: nowrap; }
}
#more-installs { padding-block: var(--s-12); }
.marquee-viewport {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--s-4);
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}
.installs-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { flex: 0 0 auto; width: 180px; }
.marquee-photo {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.marquee-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marquee-caption {
  display: block;
  text-align: center;
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
  margin-top: var(--s-2);
  white-space: normal;
  overflow-wrap: break-word;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   VIDEO SHOWCASE
   ============================================================ */
.video-showcase { text-align: center; }
.video-frame {
  max-width: 380px; margin: 0 auto;
  aspect-ratio: 9/16;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--navy);
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-caption {
  max-width: var(--w-text); margin: var(--s-5) auto 0;
  font-size: .9rem; color: var(--text-3);
}

/* ============================================================
   CUSTOMER STORIES (empty placeholders)
   ============================================================ */
.story-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
.story-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden;
}
.story-photo {
  aspect-ratio: 16/10;
  background: var(--placeholder);
  display: flex; align-items: center; justify-content: center;
}
.story-photo svg { color: var(--placeholder-ink); }
.story-body { padding: var(--s-5); }
.story-quote {
  font-size: .92rem; color: var(--text-3); font-style: italic; line-height: 1.65;
  margin-bottom: var(--s-4);
}
.story-meta { display: flex; flex-direction: column; gap: 2px; }
.story-name { font-size: .85rem; font-weight: 600; color: var(--text-3); }
.story-suburb { font-size: .8rem; color: var(--text-3); }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-panel {
  max-width: 720px; margin: 0 auto;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--s-6) var(--s-5);
}
.faq-list { max-width: var(--w-text); margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0;
  font-size: .98rem; font-weight: 600; color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon {
  flex-shrink: 0; color: var(--blue); transition: transform var(--ease);
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item .faq-answer {
  font-size: .9rem; color: var(--text-2); line-height: 1.7;
  padding: 0 0 var(--s-5);
}

/* ============================================================
   CLOSING PHOTO
   ============================================================ */
.section-sm.closing-photo { padding-block: var(--s-6); }
.closing-photo-frame {
  max-width: 720px; margin: 0 auto;
  aspect-ratio: 16/10;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.closing-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta { text-align: center; }
.final-cta h2 { margin-bottom: var(--s-3); }
.final-cta p { max-width: 460px; margin: 0 auto var(--s-8); font-size: 1rem; line-height: 1.7; }

/* ============================================================
   MID-PAGE CTA — lighter-weight than final-cta, just a nudge
   ============================================================ */
.mid-cta { text-align: center; }
.mid-cta-text { font-size: 1.05rem; font-weight: 600; color: #fff; margin-bottom: var(--s-5); }

/* ============================================================
   SECTION — DARK (extends the hero's canvas through Process +
   Recent Installs, and bookends with a dark Final CTA, while FAQ/
   benefits/closing-photo stay light for readability in between)
   ============================================================ */
.section-off.section-dark { background: var(--navy-deep); }
.section-dark { background: var(--navy-deep); }
.section-dark .eyebrow { color: var(--copper); }
.section-dark h2 { color: #fff; }
.section-dark p { color: rgba(255,255,255,.75); }
.section-dark .timeline-icon {
  border-color: rgba(184,115,51,.6);
  color: var(--copper);
  background: rgba(255,255,255,.06);
}
.section-dark .timeline-body h3 { color: #fff; }
.section-dark .timeline-body p { color: rgba(255,255,255,.75); }
.section-dark .marquee-caption { color: rgba(255,255,255,.72); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--navy); padding-block: var(--s-10) var(--s-6); }
.footer-top {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-6);
  text-align: center; padding-bottom: var(--s-6);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: var(--s-5);
}
.footer-logo img { height: 24px; width: auto; }
.footer-contact { display: flex; flex-direction: column; gap: var(--s-2); align-items: center; }
.footer-contact a { font-size: .88rem; color: rgba(255,255,255,.65); transition: color var(--ease); }
.footer-contact a:hover { color: #fff; }
.footer-legal {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.footer-legal-links { display: flex; gap: var(--s-5); }
.footer-legal-links a { font-size: .8rem; color: rgba(255,255,255,.45); }
.footer-legal-links a:hover { color: rgba(255,255,255,.75); }
.footer-copy { font-size: .75rem; color: rgba(255,255,255,.3); text-align: center; }

/* ============================================================
   THANK YOU PAGE — SUCCESS HERO
   ============================================================ */
.success-hero { text-align: center; padding-block: var(--s-16) var(--s-4); background: var(--navy-deep); }
/* Thank-you page only -- .success-hero is unique to it, so this sibling selector
   can't match anything on /experts or home, which reuse .installs-marquee's own
   default padding untouched */
.success-hero + .installs-marquee { padding-top: var(--s-4); }
.success-hero + .installs-marquee .section-head { margin-bottom: var(--s-5); }
.success-icon-lg {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--success-pale); color: var(--success);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s-6);
}
.success-hero h1 { margin-bottom: var(--s-5); color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.success-hero .lede {
  max-width: 560px; margin: 0 auto; font-size: 1.02rem; line-height: 1.75; color: rgba(255,255,255,.85);
}
.success-hero .lede p + p { margin-top: var(--s-4); }

/* Light variant -- melbourne/thank-you uses this instead of the dark
   navy default, to match the melbourne page's overall lighter feel. */
.success-hero--light { background: #fff; padding-top: var(--s-6); }
.success-hero--light h1 { color: var(--text); text-shadow: none; }
.success-hero--light .lede { color: var(--text-2); }
.success-hero--light .success-icon-lg { margin-bottom: var(--s-2); }

/* ============================================================
   NEXT-STEPS TIMELINE (thank you page)
   ============================================================ */
.next-steps { max-width: 380px; margin: 0 auto; }
.ns-item { display: flex; gap: var(--s-4); position: relative; }
.ns-item .ns-line {
  position: absolute; left: 15px; top: 32px; bottom: -32px; width: 1.5px;
  background: var(--border);
}
.ns-item:last-child .ns-line { display: none; }
.ns-dot {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border); background: var(--white); color: var(--text-3);
  z-index: 1;
}
.ns-item.done .ns-dot { background: var(--success); border-color: var(--success); color: #fff; }
.ns-item.done .ns-line { background: var(--success); }
.ns-label {
  padding-bottom: var(--s-8); padding-top: 3px;
  font-size: .95rem; font-weight: 600; color: var(--navy);
}
.ns-item.done .ns-label { color: var(--text-3); font-weight: 500; }

/* ============================================================
   INFO CARD (Expect Our Call)
   ============================================================ */
.info-card {
  max-width: var(--w-text); margin: 0 auto;
  background: var(--off-white); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s-6);
  display: flex; gap: var(--s-4); align-items: flex-start;
}
.info-card .info-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--blue); color: var(--blue);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.info-card h3 { margin-bottom: var(--s-2); font-size: .98rem; }
.info-card p { font-size: .88rem; line-height: 1.65; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeIn .5s ease both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   TABLET / DESKTOP — 768px+
   ============================================================ */
@media (min-width: 768px) {
  .container       { padding-inline: var(--s-8); }
  .container-text  { padding-inline: var(--s-8); }
  .section     { padding-block: var(--s-16); }
  .section-sm  { padding-block: var(--s-12); }

  .site-header .container { height: 76px; }
  .site-header .logo img { height: 30px; }

  .hero { padding-block: var(--s-12) var(--s-10); }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--s-12); text-align: left; }
  .hero-copy { text-align: left; }
  .hero-photo { max-width: 100%; margin: 0; }
  .hero-sub { margin: 0; }
  .hero-media { margin-top: 0; }

  .credential-grid { grid-template-columns: repeat(4, 1fr); }
  .benefit-grid { grid-template-columns: repeat(4, 1fr); }
  .story-grid { grid-template-columns: repeat(3, 1fr); }

  .gallery-scroll { display: none; }
  .gallery-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5);
  }

  .marquee-item { width: 230px; }

  #more-installs { padding-block: var(--s-16); }

  .video-frame { max-width: 280px; }

  .timeline { max-width: 760px; }
  .timeline-step { align-items: flex-start; }

  .btn-full { width: auto; min-width: 260px; }

  .footer-top { flex-direction: row; justify-content: space-between; text-align: left; }
  .footer-contact { flex-direction: row; gap: var(--s-6); align-items: center; }
  .footer-legal { flex-direction: row; justify-content: space-between; width: 100%; }
}

@media (min-width: 1024px) {
  .assessment-card { padding: var(--s-10); }
}