/* ==================================================================
   Guided — video hero  (LOCAL PREVIEW ONLY)

   Scope is deliberately limited to the hero and the header sitting on
   it. Every other section is left exactly as authored.

   Layering:  video (0) → dark scrim (1) → header + copy (3)
   ================================================================== */

section[style*="hero-bg.png"] {
  background-image: none !important;
  background-color: #14120F !important;
  position: relative !important;
}

/* ---------- the video ---------- */
.gs-herovid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* subject sits right of centre; bias the crop to keep her framed */
  object-position: 64% center;
  z-index: 0;
  display: block;
}

/* the original cream left-to-right fade is replaced by the dark scrim */
section[style*="hero-bg.png"] > div[style*="position: absolute"] { display: none !important; }

/* ---------- dark scrim ----------
   Weight along the top so the navigation reads, heavier on the left
   behind the copy, lighter across her face. */
section[style*="hero-bg.png"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 18%, rgba(0,0,0,0) 34%),
    linear-gradient(to top,    rgba(0,0,0,0.46) 0%, rgba(0,0,0,0) 42%),
    linear-gradient(to right,  rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.56) 38%, rgba(0,0,0,0.30) 68%, rgba(0,0,0,0.20) 100%);
}

/* the hero was pulled up under the header, so restore its top padding */
@media (min-width: 1025px) {
  section[style*="hero-bg.png"] {
    padding-top: calc(120px + var(--gs-hero-hdr, 0px)) !important;
  }
}

/* ---------- hero copy ---------- */
section[style*="hero-bg.png"] > div[style*="z-index: 1"] {
  position: relative !important;
  z-index: 3 !important;
}
section[style*="hero-bg.png"] h1,
section[style*="hero-bg.png"] p { color: #FFFFFF !important; }
section[style*="hero-bg.png"] span[style*="letter-spacing: 0.14em"] {
  color: rgba(255,255,255,0.78) !important;
}
section[style*="hero-bg.png"] a[style*="border-radius: 999px"] {
  background: #FFFFFF !important;
  color: #111111 !important;
}

/* ==================================================================
   HEADER ON THE VIDEO — no white bar
   ================================================================== */
header {
  position: relative !important;
  z-index: 5 !important;
  background: transparent !important;
  border-bottom: 0 !important;
  margin-bottom: calc(-1 * var(--gs-hero-hdr, 0px)) !important;
}

header a, header span, header nav a { color: #FFFFFF !important; }
header span[style*="letter-spacing: 0.22em"] { color: rgba(255,255,255,0.72) !important; }
header nav a:hover { color: rgba(255,255,255,0.72) !important; }
.gs-burger span { background: #FFFFFF !important; }

/* the open mobile menu needs a solid field */
header.gs-open {
  background: rgba(12,10,8,0.96) !important;
  margin-bottom: 0 !important;
}
header.gs-open .gs-navpanel a {
  color: #FFFFFF !important;
  border-top-color: rgba(255,255,255,0.14) !important;
}
header.gs-open .gs-navpanel a.gs-navpanel-cta { color: #74CE9C !important; }

/* ---------- MOBILE ----------
   Copy sits over the video rather than stacked beneath it, since white
   type needs the dark field behind it. */
@media (max-width: 1024px) {
  section[style*="hero-bg.png"]::before { display: none !important; }

  section[style*="hero-bg.png"] {
    display: flex !important;
    align-items: flex-end !important;
    min-height: 78vh !important;
    padding: 120px 22px 40px !important;
  }

  .gs-herovid {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    object-position: 60% center !important;
  }

  section[style*="hero-bg.png"]::after {
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.22) 22%, rgba(0,0,0,0) 40%),
      linear-gradient(to top,    rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.30) 46%, rgba(0,0,0,0.10) 100%);
  }

  section[style*="hero-bg.png"] h1 { font-size: 33px !important; line-height: 1.12 !important; }
  section[style*="hero-bg.png"] p  { font-size: 15.5px !important; line-height: 1.55 !important; max-width: 30ch !important; }
  section[style*="hero-bg.png"] > div[style*="z-index: 1"] > div { gap: 14px !important; }
}

@media (max-width: 640px) {
  section[style*="hero-bg.png"] {
    min-height: 76vh !important;
    padding: 110px 18px 34px !important;
  }
}

/* ==================================================================
   DESKTOP HERO — photograph instead of the video

   The image is bright and white, so the dark scrim and white type are
   dropped here and the copy goes to ink. Mobile keeps the video and
   its dark treatment, untouched.
   ================================================================== */
@media (min-width: 1025px) {

  section[style*="hero-bg.png"] {
    background-color: #FFFFFF !important;
    background-image: url("assets/hero-desktop.jpg") !important;
    background-size: cover !important;
    background-position: center 28% !important;
    background-repeat: no-repeat !important;
    min-height: 660px !important;
  }

  /* the video is mobile-only now */
  .gs-herovid { display: none !important; }

  /* a soft white wash on the left so the copy holds, image stays bright */
  section[style*="hero-bg.png"]::after {
    background: linear-gradient(to right,
      rgba(255,255,255,0.94) 0%,
      rgba(255,255,255,0.86) 26%,
      rgba(255,255,255,0.55) 44%,
      rgba(255,255,255,0.12) 60%,
      rgba(255,255,255,0) 72%) !important;
  }

  /* copy inverts to ink, and sits left against the open white space */
  section[style*="hero-bg.png"] h1[style],
  section[style*="hero-bg.png"] p[style] {
    color: #1D1D1F !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  section[style*="hero-bg.png"] h1[style] { max-width: 13ch !important; }
  section[style*="hero-bg.png"] p[style]  { max-width: 34ch !important; color: #6E6E73 !important; }
  section[style*="hero-bg.png"] span[style*="letter-spacing: 0.14em"] {
    color: #0071E3 !important;
    text-align: left !important;
  }
  section[style*="hero-bg.png"] > div,
  section[style*="hero-bg.png"] > div > div {
    justify-items: start !important;
    text-align: left !important;
    margin: 0 !important;
  }
  section[style*="hero-bg.png"] a[style*="border-radius: 999px"] {
    background: #0071E3 !important;
    color: #FFFFFF !important;
  }

  /* the header sits on white now, so it goes dark */
  header a, header span, header nav a { color: #1D1D1F !important; }
  header span[style*="letter-spacing: 0.22em"] { color: #6E6E73 !important; }
  header { background: transparent !important; }
}

/* ==================================================================
   MOBILE HERO — portrait photograph instead of the video

   The portrait frame keeps its white space at the top, so the copy
   moves to the top and goes to ink. The dark scrim and white type are
   dropped here as well.
   ================================================================== */
@media (max-width: 1024px) {

  section[style*="hero-bg.png"] {
    background-color: #FFFFFF !important;
    background-image: url("assets/hero-mobile.jpg") !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    align-items: flex-start !important;
    min-height: 92vh !important;
    padding: 104px 22px 40px !important;
  }

  .gs-herovid { display: none !important; }

  /* light wash from the top so the copy holds over the white space */
  section[style*="hero-bg.png"]::after {
    background: linear-gradient(to bottom,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.80) 34%,
      rgba(255,255,255,0.30) 52%,
      rgba(255,255,255,0) 66%) !important;
  }

  section[style*="hero-bg.png"] h1[style] { color: #1D1D1F !important; }
  section[style*="hero-bg.png"] p[style]  { color: #6E6E73 !important; }
  section[style*="hero-bg.png"] span[style*="letter-spacing: 0.14em"] {
    color: #0071E3 !important;
  }
  section[style*="hero-bg.png"] a[style*="border-radius: 999px"] {
    background: #0071E3 !important;
    color: #FFFFFF !important;
  }

  /* header sits on white now */
  header a, header span, header nav a { color: #1D1D1F !important; }
  header span[style*="letter-spacing: 0.22em"] { color: #6E6E73 !important; }
  .gs-burger span { background: #1D1D1F !important; }
  header.gs-open { background: #FFFFFF !important; }
  header.gs-open .gs-navpanel a {
    color: #1D1D1F !important;
    border-top-color: #E7E1D4 !important;
  }
  header.gs-open .gs-navpanel a.gs-navpanel-cta { color: #0071E3 !important; }
}

@media (max-width: 640px) {
  section[style*="hero-bg.png"] {
    min-height: 90vh !important;
    padding: 96px 18px 34px !important;
  }
}

/* ==================================================================
   MOBILE HERO — copy in the clean white band, photo below it

   Previously the paragraph landed on the children's faces and the
   button cut across the girl. The copy block is now pinned to the top
   white area, the wash is carried further down behind it, and the
   photograph is anchored to the bottom so the subjects sit clear.
   ================================================================== */
@media (max-width: 1024px) {

  section[style*="hero-bg.png"] {
    background-position: center bottom !important;
    background-size: 118% auto !important;    /* subjects a touch larger */
    min-height: 104vh !important;
    padding: 92px 22px 0 !important;
    align-items: flex-start !important;
  }

  /* solid at the top, releasing before the faces start */
  section[style*="hero-bg.png"]::after {
    background: linear-gradient(to bottom,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.97) 38%,
      rgba(255,255,255,0.82) 48%,
      rgba(255,255,255,0.20) 57%,
      rgba(255,255,255,0) 64%) !important;
  }

  /* tighter block so everything, button included, clears the photo */
  section[style*="hero-bg.png"] > div[style*="z-index: 1"] > div {
    gap: 10px !important;
  }
  section[style*="hero-bg.png"] h1[style] {
    font-size: 34px !important;
    line-height: 1.1 !important;
    max-width: 15ch !important;
    margin: 0 auto !important;
  }
  section[style*="hero-bg.png"] p[style] {
    font-size: 16px !important;
    line-height: 1.5 !important;
    max-width: 34ch !important;
    margin: 12px auto 0 !important;
  }
  /* the action stays inside the white band rather than over the subject */
  section[style*="hero-bg.png"] a[style*="border-radius: 999px"] {
    width: auto !important;
    margin: 18px auto 0 !important;
    padding: 13px 30px !important;
  }
}

/* ==================================================================
   MOBILE HERO — breathing room
   The copy was starting too near the top and the lines sat too tight
   against each other. More air above, and more between each element.
   ================================================================== */
@media (max-width: 1024px) {
  section[style*="hero-bg.png"] {
    padding-top: 140px !important;
  }
  section[style*="hero-bg.png"] > div[style*="z-index: 1"] > div {
    gap: 0 !important;
  }
  section[style*="hero-bg.png"] span[style*="letter-spacing: 0.14em"] {
    margin-bottom: 22px !important;
  }
  section[style*="hero-bg.png"] h1[style] {
    margin: 0 auto !important;
    line-height: 1.14 !important;
  }
  section[style*="hero-bg.png"] p[style] {
    margin: 26px auto 0 !important;
  }
  section[style*="hero-bg.png"] a[style*="border-radius: 999px"] {
    margin: 34px auto 0 !important;
  }
}

@media (max-width: 640px) {
  section[style*="hero-bg.png"] { padding-top: 124px !important; }
}

/* ==================================================================
   MOBILE HERO — headline · photograph · body copy

   Nothing sits on top of the picture any more. The headline reads on
   white, the photograph runs full-bleed at full strength, and the body
   copy and action follow underneath it.
   ================================================================== */
@media (max-width: 1024px) {

  section[style*="hero-bg.png"] {
    display: block !important;
    background-image: none !important;
    background-color: #FFFFFF !important;
    min-height: 0 !important;
    padding: 120px 22px 48px !important;
  }

  /* no scrim, no background photo, no video */
  section[style*="hero-bg.png"]::after  { display: none !important; }
  section[style*="hero-bg.png"]::before { display: none !important; }
  .gs-herovid { display: none !important; }

  .gs-heroimg {
    display: block;
    width: calc(100% + 44px);
    margin: 30px -22px 34px;
    aspect-ratio: 1100 / 1740;
    background-image: url("assets/hero-mobile.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }

  section[style*="hero-bg.png"] p[style]  { margin: 0 auto !important; }
  section[style*="hero-bg.png"] a[style*="border-radius: 999px"] {
    margin: 28px auto 0 !important;
  }
}

@media (max-width: 640px) {
  section[style*="hero-bg.png"] { padding: 108px 18px 44px !important; }
  .gs-heroimg { width: calc(100% + 36px); margin: 26px -18px 30px; }
}

/* ==================================================================
   MOBILE HERO — copy over the picture, picture pushed down

   The photograph's own top is empty white, so the section is given
   enough height for the copy and the image is anchored to the BOTTOM.
   The copy then sits on that white — over the image, no white bar,
   and clear of every child's head. Only a whisper of gradient.
   ================================================================== */
@media (max-width: 1024px) {

  /* the announcement bar goes — matched by its own inline styles only,
     never a structural selector (body > div:first-child is the page
     wrapper and hiding it blanks the entire site). */
  div[style*="padding: 10px 40px"][style*="background: rgb(17, 17, 17)"] {
    display: none !important;
  }

  section[style*="hero-bg.png"] {
    display: block !important;
    background-color: #FFFFFF !important;
    background-image: url("assets/hero-mobile.jpg") !important;
    background-size: 100% auto !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    min-height: 0 !important;
    /* reserve exactly the image's height beneath the copy */
    padding: 96px 22px calc(100vw * 1.582) !important;
  }

  /* the inserted block is no longer needed */
  .gs-heroimg { display: none !important; }
  .gs-herovid { display: none !important; }

  /* a whisper, not a wash — the picture keeps its brightness */
  section[style*="hero-bg.png"]::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 46% !important;
    z-index: 1 !important;
    background: linear-gradient(to bottom,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.22) 55%,
      rgba(255,255,255,0) 100%) !important;
  }
  section[style*="hero-bg.png"]::before { display: none !important; }

  section[style*="hero-bg.png"] a[style*="border-radius: 999px"] {
    margin: 30px auto 0 !important;
  }
}

@media (max-width: 640px) {
  section[style*="hero-bg.png"] {
    padding: 84px 18px calc(100vw * 1.582) !important;
  }
}

/* ==================================================================
   MOBILE HERO — final structure

     header over the picture
     picture fills the hero, heads visible at the top
     gradient at the BOTTOM
     copy + button sit in that gradient, in white

   No white block anywhere.
   ================================================================== */
@media (max-width: 1024px) {

  div[style*="padding: 10px 40px"][style*="background: rgb(17, 17, 17)"] {
    display: none !important;
  }

  section[style*="hero-bg.png"] {
    display: flex !important;
    align-items: flex-end !important;      /* copy sits at the bottom */
    background-color: #EDEDEF !important;
    background-image: url("assets/hero-mobile.jpg") !important;
    background-size: cover !important;
    background-position: center top !important;   /* keep every head in frame */
    background-repeat: no-repeat !important;
    min-height: 92vh !important;
    padding: 0 22px 46px !important;
  }

  .gs-heroimg, .gs-herovid { display: none !important; }
  section[style*="hero-bg.png"]::before { display: none !important; }

  /* gradient at the bottom only — the picture stays clean above it */
  section[style*="hero-bg.png"]::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 1 !important;
    background: linear-gradient(to top,
      rgba(0,0,0,0.86) 0%,
      rgba(0,0,0,0.72) 18%,
      rgba(0,0,0,0.42) 34%,
      rgba(0,0,0,0.10) 48%,
      rgba(0,0,0,0) 58%) !important;
  }

  /* copy in white, over the gradient */
  section[style*="hero-bg.png"] h1[style] {
    color: #FFFFFF !important;
    font-size: 34px !important;
    line-height: 1.12 !important;
    margin: 0 auto !important;
  }
  section[style*="hero-bg.png"] p[style] {
    color: rgba(255,255,255,0.86) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    max-width: 34ch !important;
    margin: 16px auto 0 !important;
  }
  section[style*="hero-bg.png"] span[style*="letter-spacing: 0.14em"] {
    color: rgba(255,255,255,0.80) !important;
    margin-bottom: 14px !important;
  }
  section[style*="hero-bg.png"] a[style*="border-radius: 999px"] {
    background: #FFFFFF !important;
    color: #1D1D1F !important;
    margin: 26px auto 0 !important;
  }

  /* header sits on the pale top of the picture, so it stays dark */
  header a, header span, header nav a { color: #1D1D1F !important; }
  header span[style*="letter-spacing: 0.22em"] { color: #6E6E73 !important; }
  .gs-burger span { background: #1D1D1F !important; }
  header { background: transparent !important; }
}

@media (max-width: 640px) {
  section[style*="hero-bg.png"] {
    min-height: 90vh !important;
    padding: 0 18px 40px !important;
  }
}

/* ==================================================================
   DESKTOP HERO — same treatment as mobile

   Copy centred over the photograph in white, sitting in a gradient at
   the bottom. Replaces the earlier left-aligned dark-on-white version.
   ================================================================== */
@media (min-width: 1025px) {

  section[style*="hero-bg.png"] {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    background-color: #EDEDEF !important;
    background-image: url("assets/hero-desktop.jpg") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    min-height: 86vh !important;
    padding: 0 40px 74px !important;
  }

  .gs-herovid, .gs-heroimg { display: none !important; }
  section[style*="hero-bg.png"]::before { display: none !important; }

  /* gradient at the bottom only */
  section[style*="hero-bg.png"]::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 1 !important;
    background: linear-gradient(to top,
      rgba(0,0,0,0.84) 0%,
      rgba(0,0,0,0.68) 16%,
      rgba(0,0,0,0.38) 32%,
      rgba(0,0,0,0.08) 48%,
      rgba(0,0,0,0) 60%) !important;
  }

  /* centred, white */
  section[style*="hero-bg.png"] > div,
  section[style*="hero-bg.png"] > div > div {
    justify-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 900px !important;
  }
  section[style*="hero-bg.png"] h1[style] {
    color: #FFFFFF !important;
    text-align: center !important;
    max-width: 18ch !important;
    margin: 0 auto !important;
  }
  section[style*="hero-bg.png"] p[style] {
    color: rgba(255,255,255,0.88) !important;
    text-align: center !important;
    max-width: 52ch !important;
    margin: 20px auto 0 !important;
  }
  section[style*="hero-bg.png"] a[style*="border-radius: 999px"] {
    background: #FFFFFF !important;
    color: #1D1D1F !important;
    margin: 30px auto 0 !important;
  }

  /* header sits on the pale top of the picture */
  header a, header span, header nav a { color: #1D1D1F !important; }
  header span[style*="letter-spacing: 0.22em"] { color: #6E6E73 !important; }
  header { background: transparent !important; }
}