/* ==========================================================================
   Bloom design v8 - "Cinematic"
   Additive re-skin layer, loaded AFTER style.css when the design cookie = v8.
   Every rule is scoped under body.theme-v9 so nothing leaks into other themes.

   Feel: a calm video-background hero, then a tight, purposeful set of sections.
   Two sections use a real photograph as a full-bleed background with a readable
   navy overlay (the client's request); the rest place imagery cleanly, either as
   resource/team cards or as an image-beside-text band that stacks image-above-text
   on mobile.

   ACCESSIBILITY (this audience is neurodiverse, so motion + sensory load must be
   user-controllable):
   - The hero background video only animates for users who have NOT asked for
     reduced motion, and only while quiet mode is off. Otherwise the still poster
     shows and contrast is preserved.
   - In quiet mode the full-bleed photo backgrounds drop to a flat, calm navy so
     the view is genuinely low-sensory.
   - All overlaid white text keeps a strong navy overlay for AA contrast.
   No !important is used here, so the base body.quiet rules and the global
   prefers-reduced-motion reset always win where they apply.
   ========================================================================== */

/* --- Tokens: gentle cool palette on top of the base brand ----------------- */
body.theme-v9 {
  --navy:#2C4472;   --navy-dark:#213762;  --navy-soft:#EAEEF6;
  --teal:#4F9DAA;   --green:#7FA45E;  --purple:#8B72B0;  --coral:#DB817D;
  --ink:#26324A;    --muted:#57647B;
  --cream:#F7F9FC;
  --line:rgba(44,68,114,0.11);
  --shadow:0 16px 40px rgba(33,55,98,0.12), 0 4px 12px rgba(33,55,98,0.05);
  --shadow-sm:0 6px 18px rgba(33,55,98,0.07);
  --radius:20px;
  background:linear-gradient(180deg, #F8FAFD 0%, #F1F5FA 100%);
}

/* Slightly airier headings for the calm, editorial feel */
body.theme-v9 h1 { letter-spacing:-0.015em; }

/* ==========================================================================
   1. The video hero
   ========================================================================== */
body.theme-v9 .v8-hero {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:clamp(520px, 78vh, 720px);
  padding:5rem 1.5rem;
  color:#fff;
  /* Poster is the CSS background-image on the hero, so it shows whenever the
     <video> is hidden (reduced motion / quiet mode / video fails to load). */
  background:#1a2740 url("../video/hero-bg-poster.jpg") center/cover no-repeat;
}

/* The background video sits over the poster and under the overlay. */
body.theme-v9 .v8-hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  pointer-events:none;
  border:0;
}

/* Overlay gradient: darkens video OR poster so white text stays WCAG AA. */
body.theme-v9 .v8-hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(16,24,44,0.60) 0%,
      rgba(18,28,50,0.66) 45%,
      rgba(22,34,62,0.82) 100%),
    radial-gradient(120% 90% at 20% 30%, rgba(16,24,44,0.24) 0%, rgba(16,24,44,0) 60%);
}

/* Hero content */
body.theme-v9 .v8-hero-inner {
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Brand lockup: Bloom + blue YP, legible on the dark hero */
body.theme-v9 .v8-brand-lockup {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-head);
  font-weight:600;
  font-size:1.6rem;
  color:#fff;
  margin-bottom:1.3rem;
  letter-spacing:-0.01em;
}
body.theme-v9 .v8-yp { color:#93B6F0; margin-left:1px; } /* light blue YP */

body.theme-v9 .v8-eyebrow {
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.76rem;
  font-weight:800;
  color:rgba(255,255,255,0.9);
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.24);
  border-radius:999px;
  padding:.4rem 1rem;
  margin-bottom:1.1rem;
}

body.theme-v9 .v8-hero h1 {
  color:#fff;
  font-size:clamp(2.2rem, 5.2vw, 3.5rem);
  max-width:18ch;
  margin:0 0 1rem;
  text-shadow:0 2px 20px rgba(10,16,32,0.45);
}
body.theme-v9 .v8-lead {
  color:rgba(255,255,255,0.94);
  font-size:1.18rem;
  line-height:1.68;
  max-width:58ch;
  margin:0 auto 1.9rem;
  text-shadow:0 1px 14px rgba(10,16,32,0.4);
}

/* One prominent CTA, plus a quiet secondary text link */
body.theme-v9 .v8-hero-cta {
  display:flex;
  flex-wrap:wrap;
  gap:1rem 1.4rem;
  align-items:center;
  justify-content:center;
}
body.theme-v9 .v8-cta {
  background:#fff;
  color:var(--navy-dark);
  border-color:#fff;
  box-shadow:0 14px 30px rgba(10,16,32,0.35);
  padding:.95rem 1.9rem;
  font-size:1.02rem;
}
body.theme-v9 .v8-cta:hover {
  background:#EAF0FB;
  color:var(--navy-dark);
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(10,16,32,0.42);
}
body.theme-v9 .v8-hero-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.4rem .2rem;
  color:#fff;
  font-weight:700;
  font-size:.98rem;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,0.5);
}
body.theme-v9 .v8-hero-link:hover { text-decoration-color:#fff; }

/* Trust line under the CTA */
body.theme-v9 .v8-trust {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin:1.9rem 0 0;
  color:rgba(255,255,255,0.9);
  font-size:.95rem;
  font-weight:600;
  text-shadow:0 1px 12px rgba(10,16,32,0.4);
}
body.theme-v9 .v8-trust svg {
  width:18px; height:18px; flex-shrink:0;
  stroke:#93B6F0; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --- Accessibility fallbacks: hide the video, keep the poster still ------- */
body.theme-v9.quiet .v8-hero-video { display:none; }
body.theme-v9.quiet .v8-hero::after {
  background:linear-gradient(180deg, rgba(40,54,82,0.74) 0%, rgba(40,54,82,0.82) 100%);
}

/* ==========================================================================
   2. Full-bleed photo sections (image AS the section background)
   Used for the Reassurance band and the final call to action. A real photo
   with a strong navy overlay so white text stays comfortably readable.
   ========================================================================== */
body.theme-v9 .v8-photo {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  background-color:#17233f;
  background-size:cover;
  background-repeat:no-repeat;
  padding:clamp(3.4rem, 8vw, 6rem) 0;
}
body.theme-v9 .v8-photo::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
body.theme-v9 .v8-photo > .wrap { position:relative; z-index:1; }

/* Reassurance: mother and child walking. On desktop the full image width shows,
   so the text column sits on the RIGHT (dark overlay) leaving the mother and
   child clearly visible on the left. */
body.theme-v9 .v8-photo--reassure {
  background-image:url("../images/photos/reassurance-photo.jpg");
  background-position:center;
}
body.theme-v9 .v8-photo--reassure .v8-photo-inner { margin-left:auto; }
body.theme-v9 .v8-photo--reassure::after {
  background:
    linear-gradient(90deg,
      rgba(16,26,48,0.28) 0%,
      rgba(18,30,54,0.50) 40%,
      rgba(20,32,58,0.82) 70%,
      rgba(22,34,60,0.92) 100%),
    linear-gradient(180deg, rgba(16,26,48,0.30) 0%, rgba(16,26,48,0) 45%);
}

/* Final CTA: diverse group of young people. Centre-weighted, uniform overlay. */
body.theme-v9 .v8-photo--cta {
  background-image:url("../images/photos/hero-children.jpg");
  background-position:center 32%;
}
body.theme-v9 .v8-photo--cta::after {
  background:
    linear-gradient(180deg, rgba(18,28,52,0.80) 0%, rgba(20,32,58,0.88) 100%),
    radial-gradient(120% 100% at 50% 40%, rgba(16,24,44,0.30) 0%, rgba(16,24,44,0) 62%);
}

/* Content column inside a photo section */
body.theme-v9 .v8-photo-inner { max-width:640px; }
body.theme-v9 .v8-photo--cta .v8-photo-inner { max-width:640px; margin:0 auto; text-align:center; }

body.theme-v9 .v8-photo h2 {
  color:#fff;
  margin:0 0 1rem;
  text-shadow:0 2px 18px rgba(10,16,32,0.45);
}
body.theme-v9 .v8-photo-lead {
  color:rgba(255,255,255,0.94);
  font-size:1.14rem;
  line-height:1.7;
  max-width:54ch;
  margin:0 0 1.6rem;
  text-shadow:0 1px 12px rgba(10,16,32,0.4);
}
body.theme-v9 .v8-photo--cta .v8-photo-lead { margin-left:auto; margin-right:auto; }

/* Reassurance checklist, on the dark photo */
body.theme-v9 .v8-check {
  list-style:none;
  margin:0 0 1.9rem;
  padding:0;
  display:grid;
  gap:.7rem;
}
body.theme-v9 .v8-check li {
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  font-weight:600;
  color:rgba(255,255,255,0.95);
  line-height:1.5;
  text-shadow:0 1px 10px rgba(10,16,32,0.45);
}
body.theme-v9 .v8-check-tick {
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:50%;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.32);
  display:flex; align-items:center; justify-content:center;
  margin-top:.05rem;
}
body.theme-v9 .v8-check-tick svg {
  width:15px; height:15px;
  stroke:#bfe0ff; fill:none; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}

body.theme-v9 .v8-photo-cta { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
body.theme-v9 .v8-photo--cta .v8-photo-cta { justify-content:center; }

/* Quiet mode: drop the photograph to a flat, calm navy (low sensory load). */
body.theme-v9.quiet .v8-photo { background-image:none; background-color:#3C4C68; }
body.theme-v9.quiet .v8-photo::after {
  background:linear-gradient(180deg, rgba(44,60,90,0.20) 0%, rgba(44,60,90,0.20) 100%);
}
/* The base quiet rules force .btn-primary to a dark navy background (!important).
   The on-photo CTA normally uses navy text on white, which would then be
   dark-on-dark, so give it white text (and a matching flat border) in quiet mode
   to keep it readable and calm. */
body.theme-v9.quiet .v8-cta { color:#fff; border-color:#3C4C68; }

/* ==========================================================================
   3. Image-beside-text band (Meet the team intro)
   Image first in the DOM so it stacks ABOVE the text on mobile.
   ========================================================================== */
body.theme-v9 .v8-beside {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.8rem, 4vw, 3.4rem);
  align-items:center;
}
body.theme-v9 .v8-beside-media {
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
body.theme-v9 .v8-beside-media img {
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
}
body.theme-v9 .v8-beside-text h2 { margin-bottom:.6rem; }
body.theme-v9 .v8-beside-text .lead { margin-bottom:1.5rem; }

/* ==========================================================================
   4. Calm supporting sections (reuse shared classes, gently re-skinned)
   ========================================================================== */
body.theme-v9 .eyebrow { color:var(--navy); }
/* Distinct hues so consecutive sections clearly alternate (they were all
   near-identical pale blue before). Kept soft for the calm, low-sensory feel. */
body.theme-v9 .bg-cream   { background:#FFFFFF; }
body.theme-v9 .bg-sage    { background:linear-gradient(180deg, #E7F1E4 0%, #F0F7EC 100%); }  /* soft green */
body.theme-v9 .bg-peach   { background:linear-gradient(180deg, #FBEAE6 0%, #FCF2EE 100%); }  /* soft peach */
body.theme-v9 .bg-lavender{ background:linear-gradient(180deg, #ECE4F6 0%, #F4EEFB 100%); }  /* soft lavender */

body.theme-v9 .card,
body.theme-v9 .card-soft,
body.theme-v9 .why-card,
body.theme-v9 .coming-soon { border-radius:var(--radius); }

/* Offer split layout for "available now" + "coming soon" */
body.theme-v9 .offer-split { gap:2.4rem; }

/* Behaviour line: a calm, centred statement to close the "why" band */
body.theme-v9 .behaviour-line { color:var(--navy); }

/* ==========================================================================
   5. Responsive
   ========================================================================== */
@media (max-width:820px){
  body.theme-v9 .v8-beside { grid-template-columns:1fr; gap:1.6rem; }
  body.theme-v9 .v8-beside-media img { aspect-ratio:16 / 10; }
}

@media (max-width:640px){
  body.theme-v9 .v8-hero { min-height:clamp(440px, 70vh, 560px); padding:3.2rem 1.25rem; }
  body.theme-v9 .v8-lead { font-size:1.06rem; }
  body.theme-v9 .v8-brand-lockup { font-size:1.35rem; }
  body.theme-v9 .v8-hero-cta { flex-direction:column; gap:.9rem; width:100%; }
  body.theme-v9 .v8-hero-cta .v8-cta { width:100%; max-width:340px; }
  body.theme-v9 .v8-trust { font-size:.86rem; line-height:1.4; }

  body.theme-v9 .v8-photo { padding:2.8rem 0; }
  body.theme-v9 .v8-photo-lead { font-size:1.05rem; }
  /* Mobile: text is full-width over the photo, so switch to a strong, even
     vertical overlay for readability and show the mother and child. */
  body.theme-v9 .v8-photo--reassure { background-position:32% center; }
  body.theme-v9 .v8-photo--reassure .v8-photo-inner { margin-left:0; max-width:none; }
  body.theme-v9 .v8-photo--reassure::after {
    background:linear-gradient(180deg,
      rgba(16,26,48,0.66) 0%,
      rgba(18,28,50,0.76) 55%,
      rgba(20,32,58,0.88) 100%);
  }
  body.theme-v9 .v8-photo-cta .btn,
  body.theme-v9 .v8-photo-cta .v8-cta { width:100%; max-width:360px; }
}

/* Team intro: family photo AS the section background (client request) */
body.theme-v9 .v8-photo--team { background-image:url("../images/photos/cat-family.jpg"); background-position:center 35%; }
body.theme-v9 .v8-photo--team::after { background:linear-gradient(180deg, rgba(22,34,62,0.74) 0%, rgba(22,34,62,0.84) 100%); }
body.theme-v9 .v8-photo--team .v8-photo-inner { text-align:center; max-width:60ch; margin:0 auto; }
body.theme-v9 .v8-photo--team .v8-photo-cta { justify-content:center; display:flex; }

/* ==========================================================================
   v9 addition: a gentle illustrated moment, placed just after the video hero.
   Same Cinematic design as v8 in every other respect; this is the one change.
   Reuses the framed + captioned family illustration Chris liked from Editorial.
   ========================================================================== */
body.theme-v9 { --hair:#DCE3F0; }

body.theme-v9 .v9-illus-sec {
  background:linear-gradient(180deg,#FFFFFF 0%, #F3F6FC 100%);
  text-align:center;
}
/* Block-level so it always sits ABOVE the framed image. When it was
   inline-block it flowed beside the image on wide screens (fine on mobile
   where the image is full width, broken on laptop). */
body.theme-v9 .v9-illus-eyebrow {
  display:block;
  text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:800;
  color:var(--teal); margin-bottom:1.2rem;
}
body.theme-v9 .v9-illus-sec .ed-figure { display:block; }
body.theme-v9 .ed-figure { text-align:center; margin:0 auto; }
body.theme-v9 .ed-hero-figure { position:relative; display:inline-block; }
body.theme-v9 .ed-frame {
  position:relative; background:#fff;
  border:1px solid var(--hair); border-radius:var(--radius);
  padding:1.3rem; max-width:460px; margin:0 auto;
  box-shadow:var(--shadow-sm);
}
/* faint offset second rule, purely decorative */
body.theme-v9 .ed-frame::before {
  content:""; position:absolute; inset:12px 12px -14px -14px;
  border:1px solid var(--hair); border-radius:var(--radius); z-index:-1;
}
body.theme-v9 .ed-frame img { display:block; width:100%; height:auto; border-radius:14px; }
body.theme-v9 .ed-figure figcaption {
  margin:1.1rem auto 0; font-family:var(--font-head); font-style:italic; color:var(--muted);
  font-size:1.06rem; line-height:1.45; max-width:38ch;
}

@media (max-width:640px) {
  body.theme-v9 .ed-frame { padding:1rem; max-width:360px; }
}

/* ==========================================================================
   Reassurance section experiments (v9 only, for Chris to compare live).
   A: illustration as the section background.  B: illustration left, text right.
   Shared: a small discreet dev label, and a reusable ticked list.
   ========================================================================== */
body.theme-v9 .v9-exp-label {
  position:absolute; top:10px; left:14px; z-index:5;
  font:700 11px/1 Arial, sans-serif; letter-spacing:.03em; text-transform:uppercase;
  color:#fff; background:rgba(44,68,114,.72); padding:5px 9px; border-radius:999px;
}
body.theme-v9 .v9-reassure-list {
  list-style:none; padding:0; margin:1.3rem 0 1.7rem; display:grid; gap:.7rem;
}
body.theme-v9 .v9-reassure-list li { display:flex; gap:.6rem; align-items:flex-start; line-height:1.5; }
body.theme-v9 .v9-tick {
  flex:0 0 22px; width:22px; height:22px; border-radius:999px; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--teal); color:#fff;
}
body.theme-v9 .v9-tick svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* ---- Experiment A: illustration as the background -------------------------- */
body.theme-v9 .v9-reassure-bg {
  position:relative; overflow:hidden; color:var(--ink);
  background-color:#EDF1F8;
  padding:clamp(3rem,7vw,5.5rem) 0;
}
/* the illustration bleeds in from the right */
body.theme-v9 .v9-reassure-bg::after {
  content:""; position:absolute; top:0; right:0; bottom:0; width:54%; z-index:0;
  background:url("../images/illustration-family.svg") center right / cover no-repeat;
}
/* fade its left edge into the pale ground so the text stays crisp */
body.theme-v9 .v9-reassure-bg::before {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, #EDF1F8 0%, #EDF1F8 34%, rgba(237,241,248,0) 62%);
}
body.theme-v9 .v9-reassure-bg .wrap { position:relative; z-index:2; }
body.theme-v9 .v9-reassure-inner { max-width:540px; }

/* ---- Reassurance: illustration left, text right (bg comes from .bg-peach) -- */
body.theme-v9 .v9-reassure-split { position:relative; }
body.theme-v9 .v9-split-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:2.8rem; align-items:center; }
body.theme-v9 .v9-split-figure { margin:0; }
body.theme-v9 .v9-split-figure .ed-frame { max-width:none; }
body.theme-v9 .v9-split-figure figcaption {
  margin-top:1rem; text-align:center; font-family:var(--font-head); font-style:italic;
  color:var(--muted); font-size:1.02rem; line-height:1.45; max-width:38ch;
  margin-left:auto; margin-right:auto;
}

@media (max-width:760px){
  /* A: illustration becomes a faint full background behind readable text */
  body.theme-v9 .v9-reassure-bg::after { width:100%; opacity:.5; background-position:center bottom; }
  body.theme-v9 .v9-reassure-bg::before { background:linear-gradient(180deg, rgba(237,241,248,.92) 0%, rgba(237,241,248,.86) 55%, rgba(237,241,248,.55) 100%); }
  body.theme-v9 .v9-reassure-inner { max-width:none; }
  /* B: single column, image first (it is first in the DOM) */
  body.theme-v9 .v9-split-grid { grid-template-columns:1fr; gap:1.6rem; }
}

/* Hero brand lockup as the colourful wordmark on a clean white chip (the hero
   is dark, so the navy parts of the logo need a light backing to stay legible). */
/* White wordmark straight on the dark hero, no box, with a soft shadow for legibility. */
body.theme-v9 .v8-brand-lockup--img { background:none; padding:0; box-shadow:none; }
body.theme-v9 .v8-brand-img {
  display:block; height:48px; width:auto;
  filter:drop-shadow(0 2px 12px rgba(10,16,32,0.55));
}
@media (max-width:560px){ body.theme-v9 .v8-brand-img { height:38px; } }