/* ============================================================
   Pools by Jiffy — homepage styles
   Skin: pools-by-jiffy (overrides tokens.css core default)
   Source of truth: foundations/skins/pools-by-jiffy.md
   Bones: view specs in views/ + global-areas.md
   ============================================================ */

[data-skin="pools-by-jiffy"] {
  /* dark grounds */
  --dark-base: #003049;
  --dark-deep: #001f31;
  --dark-elevated: #0a4260;
  /* text on light */
  --ink: #003049;
  --body-muted: #4a4f54;
  --fineprint: #7d8790;
  /* surfaces and seams */
  --surface: #ffffff;
  --surface-cream: #FDF0D5;
  --surface-antique: #FBF5E7;
  --surface-sky: #EAF3F9;
  --hairline: #e6e3da;
  --hairline-cream: #eadfc6;
  --card-border: #e4e0d5;
  /* accents */
  --accent: #C1121F;
  --accent-deep: #780000;
  --accent-2: #669BBC;
  --accent-on-dark: #FDF0D5;
  --accent-soft: #f3d6d4;
  --accent-tint: #dbe8f0;
  --star-gold: #e8a33d;
  --state-error: #dd6420;
  --scrim-rgb: 0, 26, 40;
  /* type */
  --display-face: 'Roboto Serif', Georgia, serif;
  --body-face: 'Open Sans', Helvetica, Arial, sans-serif;
  --heading-weight: 400;
  --heading-tracking: -0.01em;
  --heading-line: 1.1;
  --h1-size: clamp(60px, 6.6vw, 96px);
  --h2-size: clamp(38px, 3.8vw, 56px);
  --body-size: 17px;
  --body-line: 1.6;
  --eyebrow-weight: 700;
  --eyebrow-tracking: 0.18em;
  --eyebrow-size: 18px;
  /* buttons */
  --btn-fill: var(--accent);
  --btn-label: #FDF0D5;
  --radius-button: 6px;
  --btn-pad-y: 13px;
  --btn-pad-x: 26px;
  --btn-hover-fill: var(--dark-base);
  --btn-hover-label: #ffffff;
  --btn-hover-lift: -2px;
  --focus-ring: 2px solid var(--accent-2);
  /* shape + elevation */
  --radius-card: 10px;
  --radius-media: 12px;
  --radius-chip: 100px;
  --shadow-card: 0 16px 34px rgba(0, 48, 73, 0.13), 0 4px 9px rgba(0, 48, 73, 0.07);
  --card-hover-lift: -6px;
  /* motion */
  --reveal-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --marquee-duration-a: 32s;
  --marquee-duration-b: 44s;
}

/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body-face);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--body-muted);
  background: var(--surface);
  min-width: 1240px;
}
h1, h2 {
  font-family: var(--display-face);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-line);
  color: var(--ink);
  font-variation-settings: 'opsz' 72;
  text-wrap: balance;
}
h3 {
  font-family: var(--display-face);
  font-weight: 600;
  font-optical-sizing: auto;
  color: var(--ink);
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--ink); }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.rail { width: min(1320px, 100% - 112px); margin-inline: auto; }

.eyebrow {
  font-family: var(--body-face);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: #003049;
}
.eyebrow--dark { color: var(--accent-on-dark); }
/* Static (non-interactive) frosted pill around the hero eyebrow */
.eyebrow--pill {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; width: fit-content; white-space: nowrap;
  padding: 6px 15px; border-radius: var(--radius-button);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px) saturate(1.04); -webkit-backdrop-filter: blur(4px) saturate(1.04);
  box-shadow: 0 6px 20px rgba(var(--scrim-rgb), 0.12);
}
.eyebrow--pill .eyebrow-loop { height: 1.5em; width: auto; flex: none; }
/* Near-invisible glass plates under hero headers (About-hero treatment, site-wide).
   .chero-media lives here too so every photo hero shares the same media anatomy. */
.chero-media { position: absolute; inset: 0; }
.chero-media image-slot { position: absolute; inset: 0; }
.chero-glass--head .eyebrow { white-space: nowrap; }
.chero-glass { width: fit-content; border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.13); border-top-color: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(4px) saturate(1.04); -webkit-backdrop-filter: blur(4px) saturate(1.04);
  box-shadow: 0 14px 34px rgba(0, 22, 35, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.chero-glass--head { padding: 12px 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.014) 0%, rgba(255, 255, 255, 0.005) 55%, rgba(0, 22, 35, 0.012) 100%);
  border-color: rgba(255, 255, 255, 0.09); border-top-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 26px rgba(0, 22, 35, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.chero-glass--sub { padding: 26px 36px 30px; max-width: 680px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.004) 55%, rgba(0, 22, 35, 0.01) 100%);
  border-color: rgba(255, 255, 255, 0.07); border-top-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 26px rgba(0, 22, 35, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
/* Homepage hero: plate replaces the bare h1/sub margins */
.hero .chero-glass--sub { margin-top: 20px; }
.hero .chero-glass--sub h1 { margin: 0 0 14px; }
.hl { font-style: italic; color: var(--accent-2); }
.hero h1 .hl { color: #ffffff; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body-face); font-size: 15px; font-weight: 600; line-height: 1;
  border-radius: var(--radius-button);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn--primary { background: var(--btn-fill); color: var(--btn-label); position: relative; overflow: hidden; }
.btn--primary::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 34%; transform: skewX(-22deg) translateX(0); background: linear-gradient(90deg, rgba(253, 240, 213, 0) 0%, rgba(253, 240, 213, 0.38) 50%, rgba(253, 240, 213, 0) 100%); animation: btn-sheen 4.8s ease-in-out infinite; pointer-events: none; }
@keyframes btn-sheen { 0%, 62% { transform: skewX(-22deg) translateX(0); } 86%, 100% { transform: skewX(-22deg) translateX(480%); } }
.btn--primary:hover::after { animation-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) { .btn--primary::after { animation: none; display: none; } }
.btn--primary:hover {
  background: var(--btn-hover-fill); color: var(--btn-hover-label);
  transform: translateY(var(--btn-hover-lift));
  box-shadow: 0 12px 24px rgba(0, 31, 49, 0.28);
}
.btn--ghost { border: 1px solid rgba(253, 240, 213, 0.55); color: #FDF0D5; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(4px); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(253, 240, 213, 0.9); color: #ffffff; transform: translateY(var(--btn-hover-lift)); box-shadow: 0 12px 24px rgba(0, 18, 32, 0.25); }
.btn--outline { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--surface-cream); transform: translateY(var(--btn-hover-lift)); box-shadow: 0 12px 24px rgba(0, 31, 49, 0.14); }

/* arrow text-link (split-feature) */
.arrow-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-2); border-bottom: 2px solid var(--accent-tint);
  padding-bottom: 6px; transition: gap .3s ease, border-color .3s ease, color .3s ease;
}
.arrow-link:hover { gap: 18px; border-color: var(--accent-2); color: var(--ink); }

/* ---------- header / nav (always-solid white) ---------- */
.sq-nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface); border-bottom: 1px solid var(--hairline);
}
.sq-nav .rail { height: 104px; display: flex; align-items: center; gap: 40px; }
.wordmark { display: inline-flex; align-items: center; }
.wordmark img { display: block; height: 90px; width: auto; }
.nav-links { display: flex; gap: 32px; margin-left: auto; }
.nav-links a {
  position: relative; padding: 6px 0;
  font-size: 14.5px; font-weight: 600; color: rgba(0, 48, 73, 0.85);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .28s ease;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after { transform: scaleX(1); animation: navbeat 1.1s ease .3s 2; }
@keyframes navbeat { 0%, 100% { transform: scaleX(1); } 45% { transform: scaleX(0.86); } }
.nav-phone { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; flex: none; }
.nav-cta { display: flex; align-items: center; gap: 24px; flex: none; }
.nav-phone i { color: var(--accent-2); font-size: 14px; }
.nav-phone:hover { color: var(--accent-2); }
.sq-nav .btn { padding: 11px 22px; }

/* ---------- hero (hero-quote) ---------- */
.hero { position: relative; height: 820px; background: var(--dark-base); }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media image-slot { position: absolute; inset: 0; }
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 56% at 55% 11%, rgba(var(--scrim-rgb), 0.52) 0%, rgba(var(--scrim-rgb), 0.22) 45%, transparent 72%),
    linear-gradient(96deg, rgba(var(--scrim-rgb), 0.70) 0%, rgba(var(--scrim-rgb), 0.50) 30%, rgba(var(--scrim-rgb), 0.26) 50%, rgba(var(--scrim-rgb), 0.05) 72%, rgba(var(--scrim-rgb), 0) 100%),
    linear-gradient(180deg, rgba(var(--scrim-rgb), 0.26) 0%, rgba(var(--scrim-rgb), 0) 30%, rgba(var(--scrim-rgb), 0) 58%, rgba(var(--scrim-rgb), 0.50) 100%);
}
/* Bright, joyful lifestyle shot — lift it, don't crush it. Legibility comes from a
   soft left/bottom scrim plus a subtle text glow, not from darkening the whole photo.
   The radial layer above tames just the blown-out sun flare, not the whole frame. */
.hero-media image-slot::part(image) { filter: saturate(1.06) contrast(1.05); }
.hero-inner {
  position: relative; height: 100%; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-inner a { pointer-events: auto; }
.hero h1 { font-size: var(--h1-size); color: var(--surface-cream); max-width: 820px; margin: 22px 0 26px; text-shadow: 0 2px 22px rgba(var(--scrim-rgb), 0.4); }
.hero-sub { max-width: 560px; font-size: 18.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.96); text-shadow: 0 1px 2px rgba(var(--scrim-rgb), 0.55), 0 2px 16px rgba(var(--scrim-rgb), 0.6); }
.hero-ctas { display: flex; gap: 16px; margin-top: 38px; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(253, 240, 213, 0.75);
}
.scroll-cue:hover { color: var(--surface-cream); }
.scroll-cue i { font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue i { animation: cue-bob 2.2s ease-in-out infinite; }
  @keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
}

/* ---------- intro-statement (copy left, photo right) ---------- */
.intro { padding: 108px 0 96px; background: var(--surface); }
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  column-gap: clamp(44px, 5vw, 80px);
  align-items: center;
}
.intro-copy { align-self: start; }
.intro-head { font-size: var(--h2-size); margin: 14px 0 22px; }
.intro-copy p { font-size: 19px; line-height: 1.62; max-width: none; }
.intro-media {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: var(--radius-media); overflow: hidden; box-shadow: var(--shadow-card);
}
/* Zoom in on Mike (portrait source) — modest scale + slight downward bias so his
   face and the level in his hands both stay in frame. */
.intro-media image-slot::part(image) { transform: translate(-50%, -56%) scale(1.18) !important; }

/* Founder feature: red statement, Mike layered on an offset accent panel with an
   overlapping owner tag. Bold pass — same copy + photo bones, richer composition. */
.intro-head--accent { color: var(--accent); font-size: clamp(44px, 4.7vw, 66px); line-height: 1.04; }
.intro-media image-slot { position: absolute; inset: 0; }
.intro-media-wrap { position: relative; transition: transform .5s var(--reveal-ease); }
.intro-media-wrap::before {
  content: ''; position: absolute; z-index: 0;
  right: -24px; bottom: -24px; width: 60%; height: 66%;
  border-radius: var(--radius-media); background: var(--accent-2); opacity: 0.16;
}
.intro-media-wrap .intro-media { position: relative; z-index: 1; transition: box-shadow .5s var(--reveal-ease); }
.intro-media-wrap:hover { transform: translateY(-6px); }
.intro-media-wrap:hover .intro-media { box-shadow: 0 24px 46px rgba(0, 31, 49, 0.24); }
.founder-tag {
  position: absolute; left: -30px; top: 26px; z-index: 3;
  display: grid; gap: 10px;
  background: var(--dark-base); padding: 18px 22px; border-radius: 12px; max-width: 320px;
  box-shadow: 0 20px 44px rgba(var(--scrim-rgb), 0.4);
}
.founder-quote {
  font-family: var(--body-face);
  font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--surface-cream);
}
.founder-attr { font-weight: 700; color: var(--surface-cream); }
.chip-row { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
/* Editorial credential strip — hairline-divided facts under the intro copy. */
.cred-row {
  display: grid; margin-top: 34px;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 4px 26px;
  box-shadow: 0 22px 48px -26px rgba(11,31,59,.30), 0 3px 8px -3px rgba(11,31,59,.10);
}
.cred {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  padding: 20px 0; border-top: 1px solid var(--hairline);
}
.cred:first-child { border-top: none; }
.cred-ic {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--accent-tint); color: var(--dark-base);
  display: grid; place-items: center; font-size: 18px;
  transition: background .28s ease, color .28s ease, transform .28s ease;
}
.cred:hover .cred-ic { background: var(--accent); color: var(--surface-cream); transform: translateY(-2px); }
.intro-cta { display: flex; align-items: center; gap: 16px; margin-top: 52px; flex-wrap: wrap; }
.intro-cta-lead { font-family: var(--display-face); font-variation-settings: 'opsz' 72; letter-spacing: var(--heading-tracking); font-size: 20px; font-weight: var(--heading-weight); color: var(--ink); }
.intro-cta .btn i { font-size: 13px; transition: transform .25s ease; }
.intro-cta .btn:hover i { transform: translateX(4px); }
.cred-k {
  font-family: var(--display-face); font-variation-settings: 'opsz' 72;
  font-size: 21px; font-weight: 400; color: var(--accent); line-height: 1.2;
}
.cred-v { font-size: 14.5px; color: var(--body-muted); margin-top: 3px; line-height: 1.45; font-weight: 500; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent-tint); color: var(--ink);
  border-radius: var(--radius-chip); padding: 11px 20px;
  font-size: 13.5px; font-weight: 600;
}
.chip i { color: var(--ink); font-size: 13px; }

/* super-light-blue wave: top edge of the doors section */
.section-wave { width: 100%; margin: 44px 0 -1px; line-height: 0; }
.section-wave svg { display: block; width: 100%; height: 46px; }
.section-wave path { fill: var(--surface-sky); stroke: none; }
/* navy→cream variant: sits flush on the navy composite section, wave reveals cream below */
.section-wave--to-cream { margin: 0; background: var(--dark-base); }
.section-wave--to-cream path { fill: var(--surface-antique); }
/* section-to-section wave seams: container bg = section above, path fill = section below */
.section-wave--sky-navy { margin: 0; background: var(--surface-sky); }
.section-wave--sky-navy path { fill: var(--dark-base); }
.section-wave--antique-navy { margin: 0; background: var(--dark-base); position: relative; overflow: hidden; }
.section-wave--antique-navy path { fill: var(--surface-antique); }
.section-wave--navy-white { margin: 0; background: var(--dark-base); }
.section-wave--navy-white path { fill: var(--surface); }
.section-wave--navy-cream { margin: 0; background: var(--dark-base); }
.section-wave--navy-cream path { fill: var(--surface-cream); }
.section-wave--base-deep { margin: 0; background: var(--dark-base); }
.section-wave--base-deep path { fill: var(--dark-deep); }
.section-wave--navy-deep { margin: 0; background: var(--dark-deep); }
.section-wave--navy-deep path { fill: var(--dark-base); }
.section-wave--deep-white { margin: 0; background: var(--dark-deep); }
.section-wave--deep-white path { fill: var(--surface); }
.section-wave--cream-navy { margin: -1px 0 0; background: var(--dark-base); position: relative; overflow: hidden; }
.section-wave--cream-navy path { fill: var(--surface-cream); }
.section-wave--deep-cream { margin: 0; background: var(--dark-deep); }
.section-wave--deep-cream path { fill: var(--surface-cream); }
.section-wave--white-cream { margin: 0; background: var(--surface); }
.section-wave--white-cream path { fill: var(--surface-cream); }
.section-wave--white-navy { margin: 0; background: var(--dark-base); position: relative; overflow: hidden; }
.section-wave--white-navy path { fill: var(--surface); }
.section-wave--white-navy::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(78% 220% at 14% 120%, rgba(102, 155, 188, 0.18), transparent 60%), radial-gradient(66% 200% at 104% 140%, rgba(102, 155, 188, 0.12), transparent 56%); }
.section-wave--white-navy svg { position: relative; z-index: 1; }
/* carry the belief/CTA steel glow into the navy region of the seam so tone is continuous */
.section-wave--antique-navy::before, .section-wave--cream-navy::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(78% 220% at 14% 120%, rgba(102, 155, 188, 0.18), transparent 60%),
    radial-gradient(66% 200% at 104% 140%, rgba(102, 155, 188, 0.12), transparent 56%);
}
.section-wave--antique-navy svg, .section-wave--cream-navy svg { position: relative; z-index: 1; }

/* ---------- interactive-banners (three doors) ---------- */
.doors { padding: 40px 0 130px; background: var(--surface-sky); }
.doors-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 40px; max-width: none; }
.doors-head h2 { font-size: var(--h2-size); margin-top: 16px; white-space: nowrap; }
.doors-head h2 .nb { white-space: nowrap; }
.doors-head p { max-width: none; white-space: nowrap; margin-top: 16px; font-family: var(--display-face); font-variation-settings: 'opsz' 72; letter-spacing: var(--heading-tracking); font-size: 30px; font-weight: var(--heading-weight); line-height: 1.15; color: var(--ink); }
.doors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.door { position: relative; height: 440px; border-radius: var(--radius-media); overflow: hidden; background: var(--dark-elevated); }
.door image-slot { position: absolute; inset: 0; transition: transform .8s ease; }
.door:hover image-slot { transform: scale(1.06); }
.door-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0) 42%, rgba(var(--scrim-rgb), 0.30) 66%, rgba(var(--scrim-rgb), 0.82) 100%);
}
.door-copy { position: absolute; left: 30px; right: 30px; bottom: 26px; z-index: 2; pointer-events: none; }
.door-copy a { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; }
.door-title {
  font-family: var(--display-face); font-optical-sizing: auto;
  font-size: 27px; font-weight: 600; color: #ffffff; line-height: 1.15;
}
.door-title i { font-size: 15px; color: var(--surface-cream); transition: transform .3s ease; }
.door-copy a:hover .door-title i { transform: translateX(6px); }
.door-cap { margin-top: 8px; font-size: 14.5px; color: rgba(255, 255, 255, 0.85); }

/* ---------- split-feature ---------- */
.split { padding: 112px 0; background: var(--surface); }
.split--cream { background: var(--surface-cream); border-top: 1px solid var(--hairline-cream); }
/* Saltwater split: lighter antique-white ground (scoped; leaves --surface-cream alone). */
.split--flip.split--cream { background: var(--surface-antique); border-top: none; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split-media {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--radius-media); overflow: hidden; box-shadow: var(--shadow-card);
}
.split-media image-slot { position: absolute; inset: 0; }
/* Product/spec diagram (white-bg, numbered layers) — present as a clean white panel,
   contained so nothing crops, with breathing room instead of a photo cover-crop. */
.split-media--diagram {
  background: #ffffff; border: 1px solid var(--card-border);
  aspect-ratio: 1500 / 1145;
}
.split-media--diagram image-slot { inset: 14px; }
/* Force this slot's frame white with !important + higher specificity so it beats the
   global navy ::part(frame) rule that sits later in the file. That source-order win
   was the navy L bleeding through the contained artwork's letterbox. */
[data-skin="pools-by-jiffy"] .split-media--diagram image-slot::part(frame) { background: #ffffff !important; }

/* ---------- YouTube card (click-to-play, composite split) ---------- */
.video-facade { cursor: pointer; overflow: hidden; }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Elevated navy media card: 16:9 thumb + YouTube watch-row beneath. */
.yt-card {
  position: relative; z-index: 1;
  background: var(--dark-elevated);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 62px rgba(0, 12, 20, 0.5), 0 8px 20px rgba(0, 12, 20, 0.34);
  transition: transform .5s var(--reveal-ease), box-shadow .5s var(--reveal-ease);
}
.yt-card:hover { transform: translateY(-4px); box-shadow: 0 40px 76px rgba(0, 12, 20, 0.56), 0 10px 24px rgba(0, 12, 20, 0.4); }
.yt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.yt-grad {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 46%, rgba(0,0,0,0.30) 100%);
  transition: background .3s ease;
}
.yt-thumb:hover .yt-grad { background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.40) 100%); }

/* Authentic YouTube play button — red rounded shell + white triangle. */
.yt-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 90px; height: 63px; padding: 0; border: 0; cursor: pointer;
  background: none; display: grid; place-items: center;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.42));
  transition: transform .28s var(--reveal-ease);
}
.yt-play svg { width: 100%; height: 100%; display: block; }
.yt-play-shell { fill: #ff0000; transition: fill .25s ease; }
.yt-play-tri { fill: #fff; }
.yt-thumb:hover .yt-play { transform: translate(-50%, -50%) scale(1.08); }
.yt-thumb:hover .yt-play-shell { fill: #ff2323; }

.yt-meta { display: flex; align-items: center; gap: 14px; padding: 15px 20px 16px; }
.yt-mark {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%; background: #ff0000;
}
.yt-mark i { color: #fff; font-size: 19px; }
.yt-meta-tx { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.yt-title { font-family: var(--body-face); font-weight: 700; font-size: 15.5px; line-height: 1.3; color: var(--surface-cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.yt-sub { font-family: var(--body-face); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: rgba(253, 240, 213, 0.6); }
.yt-ext { margin-left: auto; font-size: 15px; color: rgba(253, 240, 213, 0.48); transition: color .25s ease; }
.yt-card:hover .yt-ext { color: var(--accent-2); }
@media (prefers-reduced-motion: no-preference) {
  .yt-play::after {
    content: ''; position: absolute; inset: -10px; border-radius: 22px;
    border: 2px solid rgba(255, 0, 0, 0.5); animation: vpulse 2.6s ease-out infinite;
  }
  @keyframes vpulse {
    0% { transform: scale(0.9); opacity: 0.65; }
    70% { opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
  }
}

/* ---------- composite section: cinematic asymmetric feature ---------- */
/* Larger video biased left, offset steel-blue accent panel behind it for depth,
   tighter copy column. Only this split — the saltwater split stays a standard 50/50. */
.split-grid--feature { grid-template-columns: 0.84fr 1.16fr; column-gap: clamp(52px, 5vw, 92px); align-items: center; }
.split-grid--feature .split-copy { order: 1; }
.split-grid--feature .split-media-wrap { order: 2; }
.split-media-wrap { position: relative; }
.split-media-wrap::before {
  content: ''; position: absolute; z-index: 0;
  right: -26px; bottom: -26px; width: 64%; height: 74%;
  border-radius: var(--radius-media);
  background: var(--accent-2); opacity: 0.16;
}
.split-media-wrap .split-media { position: relative; z-index: 1; }
.split-grid--feature .split-copy h2 { font-size: clamp(40px, 4.2vw, 58px); }
/* Red section headers (principal decision) — light grounds only; the CTA band's
   headline stays cream because it sits on navy (red-on-navy is unreadable). */
.split-copy h2, .process-head h2, .finalcta h2 { color: var(--accent); }
/* Three-door header: red headline + navy eyebrow (matches other section heads) */
.doors-head h2 { color: var(--accent); }
.doors-head h2 .art { color: var(--accent); }
.doors-head h2 .nn { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.doors-head .eyebrow { color: #003049; }
.intro-copy .eyebrow { color: #003049; }

/* Composite feature reversed out on navy (principal request). Headline stays cream
   — red-on-navy is unreadable (same rule as the CTA band). Body warms to muted cream. */
.split--navy { background: var(--dark-base); }
.split--navy .split-copy h2 { color: var(--surface-cream); }
.split--navy .split-copy p { color: rgba(253, 240, 213, 0.82); }
.split--navy .pullbox {
  background: rgba(255, 255, 255, 0.055); border-left: 3px solid var(--accent);
  box-shadow: none; color: var(--surface-cream);
}
.split--navy .arrow-link {
  color: var(--accent-on-dark); position: relative;
  border-bottom: none; padding-bottom: 6px;
}
.split--navy .arrow-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--accent-2); transform: scaleX(0); transform-origin: left;
  transition: transform .28s ease;
}
/* Composite copy column, elevated: editorial lead paragraph + steel-blue guarantee seal. */
.split--navy .split-copy p.lead {
  font-size: 22px; line-height: 1.55; color: rgba(253, 240, 213, 0.94);
  margin-bottom: 22px;
}
.split--navy .pullbox--seal {
  display: flex; align-items: flex-start; gap: 18px;
  background: linear-gradient(180deg, rgba(102,155,188,0.12), rgba(102,155,188,0.05));
  border-left: 3px solid var(--accent-2);
  border-radius: 0 12px 12px 0; box-shadow: none;
  padding: 22px 26px; margin: 30px 0 8px;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.split--navy .pullbox--seal:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 18, 32, 0.45);
  background: var(--surface-cream);
}
/* reverse out to navy-on-cream as it lifts */
.split--navy .pullbox--seal:hover .pullbox-ico { color: var(--ink); }
.split--navy .pullbox--seal:hover .pullbox-kick { color: var(--accent); }
.split--navy .pullbox--seal:hover .pullbox-body { color: var(--ink); }
.split--navy .pullbox-ico {
  color: var(--accent-2); font-size: 27px; line-height: 1; margin-top: 4px; flex: none;
}
.split--navy .pullbox-body {
  font-family: var(--display-face); font-optical-sizing: auto;
  font-size: 19px; font-weight: 500; line-height: 1.45; color: var(--surface-cream);
}
.split--navy .pullbox-kick {
  display: block; font-family: var(--body-face);
  font-size: var(--eyebrow-size); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-on-dark); margin-bottom: 7px;
}
.split--navy .arrow-link:hover { color: #fff; }
.split--navy .arrow-link:hover::after { transform: scaleX(1); animation: navbeat 1.1s ease .3s 2; }
/* Latham loop mark in place of the arrow — spins a full loop on hover */
.arrow-link .latham-loop {
  width: 1.7em; height: 1.7em; flex: none; margin-left: -2px;
  transition: transform .7s cubic-bezier(.34,1.3,.5,1);
}
.split--navy .arrow-link:hover .latham-loop { transform: rotate(360deg); }
/* Light-ground arrow-link loop spin (saltwater feature) — matches the navy composite link */
.arrow-link:hover .latham-loop { transform: rotate(360deg); }
/* Saltwater feature link in navy (not red) */
.split--flip .arrow-link, .split--flip .arrow-link:hover { color: var(--ink); }
.split--navy .split-media-wrap::before { background: var(--accent-2); opacity: 0.32; }
/* Latham authorized-builder co-brand lockup (white reversed mark on navy), above the video. */
.cobrand {
  display: flex; align-items: center; gap: 22px;
  margin-bottom: 22px;
}
.cobrand-label {
  font-family: var(--body-face); font-size: 20px; font-weight: 700;
  line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(253, 240, 213, 0.95);
  padding-left: 22px; border-left: 1px solid rgba(253, 240, 213, 0.2);
}
.cobrand-logo {
  height: 72px; width: auto; display: block; opacity: 0.96;
}

.split--flip .split-media { order: 2; }
/* Saltwater split — elevated gallery framing (styling only, same 50/50 bones) */
.split--flip .split-grid { grid-template-columns: 1.04fr 0.96fr; gap: clamp(56px, 6vw, 100px); }
.split--flip .split-media { box-shadow: 24px 24px 0 rgba(102, 155, 188, 0.18), var(--shadow-card); }
.split--flip .split-media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); pointer-events: none; z-index: 2; }
.split--flip .split-copy > p:first-of-type { font-size: 20px; line-height: 1.6; color: var(--ink); }
.split--flip .split-copy h2 { margin-top: 4px; }
.split-copy h2 { font-size: var(--h2-size); margin: 18px 0 24px; }
.split-copy p { margin-bottom: 18px; }
.pullbox {
  background: var(--surface); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; box-shadow: 0 4px 14px rgba(0, 48, 73, 0.06);
  padding: 20px 24px; margin: 26px 0 6px;
  font-family: var(--display-face); font-optical-sizing: auto;
  font-size: 19px; font-weight: 500; line-height: 1.45; color: var(--ink);
}
.split .arrow-link { margin-top: 16px; }

/* ---------- belief-band ---------- */
.belief { background: var(--dark-base); padding: 132px 0; text-align: center; }
.belief-rail { max-width: 1080px; margin-inline: auto; padding-inline: 56px; }
.belief blockquote {
  position: relative;
  font-family: var(--display-face); font-variation-settings: 'opsz' 72;
  font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking);
  font-size: clamp(40px, 3.9vw, 56px); line-height: 1.22;
  color: var(--surface-cream); margin: 30px 0 34px; text-wrap: balance;
}
.belief-hl { color: #ffffff; font-style: italic; }
.belief-attr { display: inline-flex; align-items: center; gap: 16px; text-align: left; margin-top: 8px; }
.belief-ava { width: 58px; height: 58px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(253, 240, 213, 0.35); }
.belief-ava image-slot { display: block; width: 100%; height: 100%; }
.belief-attr-tx { display: flex; flex-direction: column; gap: 5px; }
.belief-attr-tx b { font-family: var(--display-face); font-variation-settings: 'opsz' 72; font-style: italic; font-size: 27px; font-weight: 400; color: var(--surface-cream); line-height: 1.15; }
.belief-attr-tx span { font-size: 14.5px; font-weight: 600; color: rgba(253, 240, 213, 0.66); white-space: nowrap; }
/* Feature layout (Monk-style): left-aligned quote, Mike cutout anchored to the band's bottom-right */
.belief { padding: 104px 0 116px; }
.belief-rail--feature { text-align: left; max-width: 1220px; }
.belief-card { display: grid; grid-template-columns: 1.12fr 0.88fr; align-items: stretch; position: relative; background: linear-gradient(140deg, #0d5075 0%, #003049 58%, #00243a 100%); border: 1px solid rgba(102, 155, 188, 0.30); border-radius: 22px; overflow: hidden; box-shadow: 0 42px 90px rgba(0, 8, 16, 0.55); transition: transform .5s var(--reveal-ease), box-shadow .5s var(--reveal-ease); }
.belief-card:hover { transform: translateY(-6px); box-shadow: 0 54px 110px rgba(0, 8, 16, 0.62); }
.belief-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(90% 130% at 0% 0%, rgba(102, 155, 188, 0.18), transparent 55%); }
.belief-copy { position: relative; z-index: 2; padding: 58px 30px 58px 58px; display: flex; flex-direction: column; justify-content: center; }
.belief-rail--feature blockquote { font-size: clamp(34px, 3.1vw, 46px); margin: 22px 0 30px; }
.belief-photo { position: relative; min-height: 510px; }
.belief-photo image-slot { position: absolute; inset: 0; }

/* ---------- process-steps (teaser density) ---------- */
.process { padding: 120px 0 112px; background: var(--surface); }
.process-head { max-width: 660px; }
.process-head h2 { font-size: var(--h2-size); margin: 18px 0 20px; }
.process-grid { display: grid; grid-template-columns: 1.05fr 0.9fr; gap: 84px; margin-top: 60px; align-items: stretch; }
.step { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 26px; padding-bottom: 40px; }
.step::before {
  content: ''; position: absolute; left: 25px; top: 56px; bottom: 4px;
  width: 2px; background: var(--accent-tint);
}
.step:has(+ .process-cta) { padding-bottom: 0; }
.step:has(+ .process-cta)::before { display: none; }
.node {
  width: 52px; height: 52px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--card-border);
  font-family: var(--display-face); font-optical-sizing: auto;
  font-size: 17px; font-weight: 600; color: var(--fineprint);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.step--first .node { border: 2px solid var(--accent); color: var(--accent); }
.step:hover .node { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.node span { display: block; transform: rotate(45deg); }
.step h3 { font-size: 22px; margin: 4px 0 8px; }
.step p { font-size: 16px; max-width: 480px; }
.process-cta { margin-top: 44px; margin-left: 78px; }
.process-media {
  position: relative; border-radius: var(--radius-media); overflow: hidden;
  box-shadow: var(--shadow-card); min-height: 100%;
}
.process-media image-slot { position: absolute; inset: 0; }

/* ---------- midpage-image-band ---------- */
.midband { background: var(--surface); padding: 72px 0 64px; }
.midband-frame {
  position: relative; aspect-ratio: 24 / 9;
  border-radius: var(--radius-media); overflow: hidden; box-shadow: var(--shadow-card);
}
.midband-frame image-slot { position: absolute; inset: 0; }

/* ---------- logo-marquee ---------- */
.marquee {
  padding: 80px 0 88px;
  background: var(--surface-cream);
  border-top: 1px solid var(--hairline-cream); border-bottom: 1px solid var(--hairline-cream);
}
.mq-head { display: flex; align-items: center; gap: 28px; margin-bottom: 46px; }
.mq-head .eyebrow { white-space: nowrap; font-size: 19px; }
.mq-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #d9c9a4); }
.mq-line--rev { background: linear-gradient(90deg, #d9c9a4, transparent); }
.mq-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.mq-viewport + .mq-viewport { margin-top: 18px; }
.mq-track { display: flex; gap: 14px; width: max-content; padding: 4px 0; animation: mq-left var(--marquee-duration-a) linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq-left { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
}
.cred-item {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 30px 18px 20px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--card-border);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.cred-item:hover { border-color: var(--accent-2); box-shadow: 0 10px 24px rgba(0, 48, 73, 0.1); transform: translateY(-3px); }
.cred-item-ic {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--surface-cream); font-size: 17px;
  transition: background .28s ease, color .28s ease;
}
.cred-item:hover .cred-item-ic { background: var(--accent-2); color: #ffffff; }
.cred-item-tx { display: flex; flex-direction: column; gap: 3px; }
.cred-item-tx b {
  font-family: var(--display-face); font-optical-sizing: auto;
  font-size: 18px; font-weight: 500; color: var(--ink); white-space: nowrap; line-height: 1.15;
}
.cred-item-tx span {
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--fineprint); white-space: nowrap;
}

/* ---------- on-page CTA band ---------- */
.ctaband { background: var(--dark-base); padding: 116px 0 124px; text-align: left; }
.ctaband-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }
.ctaband-col { max-width: 640px; }
.ctaband h2 { font-size: clamp(38px, 3.6vw, 52px); color: var(--surface-cream); margin: 20px 0 24px; }
.ctaband p { color: rgba(255, 255, 255, 0.78); font-size: 17.5px; max-width: 680px; }
.ctaband-btns { display: flex; gap: 16px; margin-top: 36px; }
.leadform { padding: 0; }
.leadform-fields { display: flex; flex-direction: column; gap: 20px; }
.leadform-fields[hidden] { display: none; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lf-field { display: flex; flex-direction: column; gap: 8px; }
.lf-field label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-on-dark); }
.lf-input { position: relative; }
.lf-input > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; color: rgba(0, 48, 73, 0.45); pointer-events: none; }
.lf-input input, .lf-input select { width: 100%; height: 52px; border-radius: var(--radius-button); border: 1px solid rgba(0, 48, 73, 0.25); background: var(--surface-cream); color: #003049; font-family: var(--body-face); font-size: 16px; padding: 0 18px 0 42px; outline: none; appearance: none; transition: border-color .2s ease, box-shadow .2s ease; }
.lf-input select { cursor: pointer; }
.lf-input.lf-input--select::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; color: rgba(0, 48, 73, 0.45); position: absolute; right: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.lf-input input:focus, .lf-input select:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(102, 155, 188, 0.45); }
.lf-submit { width: 100%; justify-content: center; gap: 10px; margin-top: 2px; height: 54px; }
.lf-note { font-size: 13.5px; color: rgba(255, 255, 255, 0.55); text-align: center; margin: 0; }
.leadform-done { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 48px 0; color: var(--surface-cream); font-size: 17px; }
.leadform-done i { font-size: 40px; color: var(--accent-on-dark); }
.leadform-done[hidden] { display: none; }

/* ---------- final CTA (slim) ---------- */
.finalcta { background: var(--surface); padding: 92px 0 100px; text-align: center; }
.finalcta h2 { font-size: 38px; margin-bottom: 14px; }
.finalcta p { font-size: 16px; margin-bottom: 30px; }

/* ---------- footer ---------- */
.footer { background: var(--dark-deep); color: rgba(255, 255, 255, 0.7); padding-top: 84px; }
.footer a { color: rgba(255, 255, 255, 0.78); }
.footer a:hover { color: #ffffff; }
.f-grid { display: grid; grid-template-columns: 1.5fr 0.9fr 1.2fr 1.1fr; gap: 56px; padding-bottom: 64px; }
.f-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-on-dark); margin-bottom: 20px;
}
.f-logo-card {
  width: 340px; background: #ffffff; border-radius: var(--radius-card);
  padding: 14px; margin-bottom: 22px;
}
.f-logo-card image-slot { display: block; width: 312px; height: 126px; }
.f-blurb { font-size: 15px; line-height: 1.65; max-width: 340px; color: rgba(255, 255, 255, 0.4); }
.f-credit { margin-top: 22px; font-size: 13px; color: rgba(255, 255, 255, 0.4); }
.f-links { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.f-contact { list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.f-contact li { display: flex; align-items: baseline; gap: 12px; }
.f-contact i { color: var(--accent-on-dark); font-size: 13px; width: 16px; text-align: center; }
.f-social { display: flex; gap: 10px; margin-top: 24px; }
.f-social a {
  width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px;
  display: grid; place-items: center; font-size: 14px; color: rgba(255, 255, 255, 0.75);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.f-social a:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.lic-row {
  display: flex; justify-content: space-between; gap: 18px; padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 14.5px;
}
.lic-row b { font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.lic-note { margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.4); }
.f-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.f-bottom .rail { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 26px; }
.f-copy { font-size: 13.5px; color: rgba(255, 255, 255, 0.4); }
.f-tagline {
  font-family: var(--display-face); font-optical-sizing: auto; font-style: italic;
  font-size: 15.5px; color: var(--surface-cream);
}
.f-legal { display: flex; gap: 20px; font-size: 13.5px; }
.f-legal a { color: rgba(255, 255, 255, 0.45); }

/* ---------- motion: scroll reveals + hero stagger ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion [data-reveal] {
    opacity: 0; transform: translateY(26px);
    transition: opacity .8s var(--reveal-ease), transform .8s var(--reveal-ease);
    transition-delay: var(--rvd, 0s);
  }
  html.js-motion [data-reveal].rv-in { opacity: 1; transform: none; }
  html.js-motion [data-st] {
    animation: pbj-rise .8s var(--reveal-ease) both;
    animation-delay: calc(0.1s + var(--st, 0) * 0.08s);
  }
  @keyframes pbj-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
}

/* ============================================================
   Richness pass (skin layer only) — on-brand photo placeholders,
   confident type, depth on navy grounds. Carlos's bones unchanged.
   ============================================================ */

/* Empty photo slots read as intentional navy "photo windows" instead of
   dead gray boxes, until the real Latham / Photos JPG shots drop in.
   image-slot exposes ::part hooks, so this is pure styling — no component edit. */
[data-skin="pools-by-jiffy"] image-slot::part(frame) {
  background:
    radial-gradient(125% 95% at 80% 6%, rgba(102, 155, 188, 0.32), transparent 56%),
    radial-gradient(95% 85% at 8% 104%, rgba(0, 31, 49, 0.55), transparent 60%),
    linear-gradient(158deg, #0b4a6b 0%, #003049 54%, #001d2e 100%);
}
[data-skin="pools-by-jiffy"] image-slot::part(empty) { color: rgba(253, 240, 213, 0.74); }
[data-skin="pools-by-jiffy"] image-slot::part(ring) {
  border-color: rgba(253, 240, 213, 0.24); border-width: 1px;
}
/* Footer mascot sits on a cream card — keep that one slot light. */
.f-logo-card image-slot::part(frame) { background: #ffffff; }
.f-logo-card image-slot::part(empty) { color: rgba(0, 48, 73, 0.62); }
.f-logo-card image-slot::part(ring) { border-color: rgba(0, 48, 73, 0.20); }

/* Confident hero headline at brief scale (Roboto Serif, 72pt+). */
.hero h1 { line-height: 1.01; letter-spacing: -0.022em; max-width: 940px; }

/* Depth on the flat navy bands so they don't read as solid slabs. */
.belief, .ctaband { position: relative; }
.ctaband { overflow: hidden; }
.belief::before, .ctaband::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(78% 120% at 14% -8%, rgba(102, 155, 188, 0.18), transparent 56%),
    radial-gradient(66% 104% at 104% 108%, rgba(102, 155, 188, 0.12), transparent 52%);
}
.belief-rail, .ctaband-grid { position: relative; z-index: 1; }

/* Doors gain a little lift + presence. */
.door { height: 468px; transition: transform .5s var(--reveal-ease), box-shadow .5s var(--reveal-ease); }
.door:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(0, 31, 49, 0.22); }

/* ---------- deliverables-doc: low-maintenance benefits (Kirkpatrick DNA) ---------- */
.deliv { padding: 116px 0 124px; background: var(--surface-antique); }
.deliv-grid { display: grid; grid-template-columns: 1fr 1.04fr; gap: clamp(64px, 6vw, 100px); align-items: stretch; }
.deliv-copy h2 { font-size: var(--h2-size); color: var(--accent); margin: 16px 0 22px; }
.deliv-intro { font-size: 19px; line-height: 1.62; }
.deliv-list { margin-top: 34px; background: #ffffff; border: 1px solid var(--hairline); border-radius: 16px; padding: 4px 26px; box-shadow: 0 22px 48px -26px rgba(11,31,59,.30), 0 3px 8px -3px rgba(11,31,59,.10); }
.dl-item { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--hairline); }
.dl-item:first-child { border-top: none; }
.dl-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); color: #003049; font-size: 18px; transition: background .28s ease, color .28s ease, transform .28s ease; }
.dl-item:hover .dl-ic { background: var(--accent); color: var(--surface-cream); transform: translateY(-2px); }
.dl-k { font-family: var(--display-face); font-variation-settings: 'opsz' 72; font-size: 20px; font-weight: 400; color: var(--accent); line-height: 1.2; }
.dl-v { font-size: 14.5px; color: var(--body-muted); margin-top: 3px; line-height: 1.45; font-weight: 500; }
.deliv-note { margin-top: 30px; background: var(--surface-sky); border-radius: 10px; padding: 18px 22px; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.deliv-note a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.deliv-side { display: flex; flex-direction: column; gap: 30px; height: 100%; }
.deliv-photo { position: relative; flex: 1; min-height: 380px; transition: transform .5s var(--reveal-ease); }
.deliv-photo:hover { transform: translateY(-6px); }
.deliv-photo:hover image-slot { box-shadow: 0 24px 46px rgba(0, 31, 49, 0.24); }
.deliv-photo::before { content: ''; position: absolute; inset: 0; transform: translate(16px, 16px); border-radius: var(--radius-media); background: var(--accent-tint); }
.deliv-photo image-slot { position: absolute; inset: 0; border-radius: var(--radius-media); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow .5s var(--reveal-ease); }
.deliv-cta { display: flex; align-items: center; gap: 28px; background: var(--surface-sky); border-radius: var(--radius-card); padding: 26px 30px; transition: transform .3s ease, box-shadow .3s ease; }
.deliv-cta:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 31, 49, 0.14); }
.deliv-cta-k { font-family: var(--display-face); font-variation-settings: 'opsz' 72; font-size: 23px; color: var(--ink); line-height: 1.2; margin-bottom: 6px; }
.deliv-cta-p { font-size: 14.5px; line-height: 1.5; color: var(--body-muted); }
.deliv-cta .btn { flex: none; }

/* ---------- process teaser on navy: 4 icon-chip cards + callout bar ---------- */
.process--navy { background: #001f31; padding: 116px 0 116px; position: relative; }
.process--navy .rail { position: relative; z-index: 1; }
.process--navy .eyebrow { color: var(--accent-on-dark); }
.process--navy .process-head { max-width: none; }
.process--navy .process-head h2 { color: var(--surface-cream); white-space: nowrap; }
.process--navy .process-head p { color: rgba(253, 240, 213, 0.78); font-size: 18px; }
.process-split { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: stretch; }
.process-photo { position: relative; min-height: 520px; transition: transform .35s ease; }
.process-photo::before { content: ''; position: absolute; inset: 0; transform: translate(-14px, 14px); border-radius: var(--radius-media); background: rgba(253, 240, 213, 0.16); transition: transform .35s ease, background .35s ease; }
.process-photo:hover { transform: translateY(-6px); }
.process-photo:hover::before { transform: translate(-14px, 20px); background: rgba(253, 240, 213, 0.24); }
.process-photo image-slot { position: absolute; inset: 0; box-shadow: var(--shadow-card); border-radius: var(--radius-media); }
.pstep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 36px; }
.pstep { position: relative; overflow: hidden; background: var(--surface-cream); border: 1px solid rgba(253, 240, 213, 0.3); border-radius: var(--radius-card); padding: 26px 26px 24px; transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.pstep-wm { position: absolute; top: 14px; right: 16px; width: 58px; height: 58px; pointer-events: none; background-color: rgba(102, 155, 188, 0.22); -webkit-mask: url('uploads/latham-loop-navy.png') center / contain no-repeat; mask: url('uploads/latham-loop-navy.png') center / contain no-repeat; transition: background-color .3s ease; }
.pstep:hover .pstep-wm { background-color: rgba(253, 240, 213, 0.2); }
.pstep-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-right: 64px; }
.pstep:hover { transform: translateY(-6px); border-color: rgba(102, 155, 188, 0.55); background: var(--dark-elevated); box-shadow: 0 18px 40px rgba(0, 12, 20, 0.4); }
.pstep-ic { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #ffffff; font-size: 19px; transition: background .28s ease, color .28s ease, transform .28s ease; }
.pstep:hover .pstep-ic { background: var(--accent-2); color: #ffffff; transform: translateY(-2px); }
.pstep h3 { font-size: 21px; color: #003049; margin: 0; transition: color .3s ease; }
.pstep p { font-size: 14.5px; line-height: 1.55; color: rgba(0, 48, 73, 0.78); margin: 0; transition: color .3s ease; }
.pstep:hover h3 { color: var(--surface-cream); }
.pstep:hover p { color: rgba(253, 240, 213, 0.78); }
a.pstep { display: block; text-decoration: none; }
.pcallout { margin-top: 78px; display: flex; align-items: center; gap: 20px; border: 1px solid rgba(102, 155, 188, 0.35); border-radius: 12px; padding: 24px 28px; background: rgba(102, 155, 188, 0.08); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.pcallout:hover { transform: translateY(-4px); border-color: rgba(102, 155, 188, 0.55); box-shadow: 0 14px 32px rgba(0, 12, 20, 0.35); }
.pcallout-ic { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-cream); color: #003049; font-size: 17px; }
.pcallout p { flex: 1; margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(253, 240, 213, 0.85); }
.pcallout .btn { flex: none; }
.process--navy .btn--primary:hover { background: var(--dark-elevated); box-shadow: 0 12px 24px rgba(0, 12, 20, 0.5), 0 0 0 1px rgba(102, 155, 188, 0.45); }

/* Gentle hero parallax target (JS-driven; reduced-motion safe). */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner { will-change: transform, opacity; }
}

/* ---------- GA final CTA: copy left, phone rising from the bottom (approved on Financing 8-2) ---------- */
.ctaband:has(.ctaband-grid2) { position: relative; overflow: hidden; padding: 150px 0 0; }
.ctaband-grid2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: end; position: relative; z-index: 1; }
.ctaband-copy2 { text-align: left; padding-bottom: 48px; }
.ctaband-copy2 h2 { margin: 26px 0 28px; }
.ctaband-copy2 p { font-size: 20px; max-width: 620px; line-height: 1.75; margin: 0; }
.ctaband-copy2 .ctaband-btns { margin-top: 40px; }
.cta-phone-col { display: flex; justify-content: center; }
.cta-phone { width: 340px; height: 530px; background: #10222f; border: 10px solid #0a1a24; border-bottom: 0; border-radius: 44px 44px 0 0; box-shadow: 0 -20px 60px rgba(0, 12, 20, 0.5), 0 0 0 1px rgba(253, 240, 213, 0.1); transform: rotate(-3deg) translateY(32px); transform-origin: bottom center; position: relative; transition: transform .4s ease; }
.ctaband-grid2:hover .cta-phone { transform: rotate(-1.5deg) translateY(24px); }
.cta-phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 110px; height: 22px; background: #0a1a24; border-radius: 12px; z-index: 2; }
.cta-phone-screen { position: absolute; inset: 0; border-radius: 34px 34px 0 0; overflow: hidden; background: #F2F6F9; display: flex; flex-direction: column; }
.sms-head { display: flex; align-items: center; gap: 12px; padding: 44px 20px 14px; background: #ffffff; border-bottom: 1px solid rgba(0, 48, 73, 0.1); }
.sms-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--dark-base); color: var(--surface-cream); display: grid; place-items: center; font-family: var(--display-face); font-variation-settings: 'opsz' 72; font-size: 18px; }
.sms-head b { display: block; font-size: 14.5px; color: var(--dark-base); }
.sms-head i { display: block; font-style: normal; font-size: 11.5px; color: var(--body-muted); }
.sms-thread { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; }
.sms { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.5; }
.sms--in { align-self: flex-start; background: #ffffff; color: var(--ink); border: 1px solid rgba(0, 48, 73, 0.1); border-bottom-left-radius: 5px; box-shadow: 0 2px 6px rgba(0, 31, 49, 0.06); }
.sms--out { align-self: flex-end; background: var(--dark-base); color: #ffffff; border-bottom-right-radius: 5px; }
.ctaband .section-wave--cream-navy { position: absolute; top: -1px; left: 0; right: 0; z-index: 2; margin: 0; background: transparent; line-height: 0; pointer-events: none; }
.ctaband .section-wave--cream-navy::before { content: none; }
.section-wave--cream-navy svg { display: block; width: 100%; height: 60px; }
.section-wave--cream-navy path { fill: var(--surface-cream); }
@media (max-width: 760px) {
  .ctaband-grid2 { grid-template-columns: 1fr; gap: 48px; }
  .ctaband-copy2 { padding-bottom: 0; }
  .cta-phone { width: 300px; height: 420px; }
}