/* Type comes from the site tokens (Cormorant Garamond throughout). */

html.home-savannah,
.home-savannah body { overflow-x: clip; }

@media (max-width: 940px) {
  /* The shared mobile .services rule permits overflow. Contain its scaled
     backdrop so it cannot paint a strip over the preceding Savannah image. */
  .home-savannah .services--static {
    overflow: hidden;
    overflow: clip;
  }
}

.home-savannah .home-explainer.scroll-section {
  --savannah-ivory: #f5efe3;
  --savannah-espresso: #231a10;
  --savannah-bronze: #8c6240;
  --savannah-display: var(--font-display);
  --savannah-body: var(--font-body);
  position: relative;
  isolation: isolate;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  color: var(--savannah-espresso);
  background: var(--savannah-ivory);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.home-savannah .savannah__intro {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 56% minmax(0, 1fr);
  grid-template-rows: minmax(min-content, 1fr) auto;
  row-gap: 32px;
  align-items: start;
  min-height: 100svh;
  width: 100%;
  padding: clamp(116px, 14svh, 156px) clamp(32px, 4.5vw, 88px) clamp(36px, 5svh, 56px);
  background: var(--savannah-ivory);
}

.home-savannah .savannah__picture {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  margin: 0;
  overflow: hidden;
}

.home-savannah .savannah__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: 50% 52%;
}

.home-savannah .savannah__intro::after {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: clamp(240px, 36svh, 380px);
  content: "";
  background: linear-gradient(transparent, rgba(35, 26, 16, 0.48) 48%, rgba(35, 26, 16, 0.78));
  pointer-events: none;
}

.home-savannah .savannah__heading-block {
  position: relative;
  isolation: isolate;
  grid-column: 2;
  width: 100%;
  max-width: 680px;
  min-width: 0;
  justify-self: end;
}

.home-savannah .savannah__heading-block::before {
  position: absolute;
  z-index: -1;
  inset: -28px -24px -36px;
  content: "";
  background: radial-gradient(ellipse at 58% 40%, rgba(245,239,227,0.2), rgba(245,239,227,0) 75%);
  pointer-events: none;
}

.home-savannah .savannah__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 var(--space-eyebrow);
  color: var(--savannah-bronze);
  font: var(--weight-label) var(--text-label)/var(--leading-label) var(--savannah-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.home-savannah .savannah__eyebrow::after {
  content: "";
  flex: 0 0 36px;
  width: 36px;
  height: 1px;
  background: currentColor;
}

.home-savannah .savannah__heading {
  margin: 0;
  font-family: var(--savannah-display);
  font-weight: 400;
  font-size: clamp(3.25rem, 3.75vw, 4.25rem);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: pretty;
  overflow-wrap: break-word;
  color: var(--savannah-espresso);
}

.home-savannah .savannah__accent { color: var(--savannah-bronze); }

.home-savannah .savannah__copy {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: min(100%, 620px);
  justify-self: start;
  margin: 0;
  padding: 0;
  background: transparent;
}

.home-savannah .savannah__copy p {
  margin: 0;
  color: var(--savannah-ivory);
  font-family: var(--savannah-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: 0;
  overflow-wrap: break-word;
}

/* Reuse the existing shared header, menu behaviour and exact sunrise PNG. */
.home-savannah .home-header-v3 .inquire-link,
.home-savannah .home-header-v3 .header-nav a,
.home-savannah .home-header-v3 .home-mobile-menu-toggle {
  font-family: var(--font-body);
  font-size: min(0.8125rem, 14px);
  font-weight: 500;
  letter-spacing: 0.12em;
}

/* The shared glass header now owns its hero-only clear material. Keep the
   older explainer treatment only for pages that have not adopted it. */
html.home-savannah.savannah-header-transparent:not([data-header-material="glass"]) .site-header.home-header-v3:not(.nav-overlay-active) {
  color: #231a10;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.home-savannah.savannah-header-transparent .home-header-v3:not(.nav-overlay-active) .header-nav a,
html.home-savannah.savannah-header-transparent .home-header-v3:not(.nav-overlay-active) .home-mobile-menu-toggle { color: #231a10; }

/* Compact header matches every other page: Menu left, Enquire right. */
@media (max-width: 1200px) {
  .home-savannah .home-header-v3 .home-mobile-menu-toggle { grid-column: 1; justify-self: start; }
  .home-savannah .home-header-v3 .inquire-link { grid-column: 2; justify-self: end; }
}

@media (min-width: 821px) and (max-width: 1199px) {
  .home-savannah .savannah__intro { padding-top: 112px; }
  .home-savannah .savannah__heading { font-size: clamp(2.5rem, 3.9vw, 3.25rem); }
}

@media (max-width: 1100px) and (orientation: portrait) {
  /* Phones and portrait tablets: the photograph is the backdrop for the whole
     chapter, so it is in view while reading. The copy sits over the sky and
     the padding below it reserves the lower part of the 1:2 export for the
     tree and giraffe, so the text and the tree never meet. */
  .home-savannah .savannah__intro {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    row-gap: 28px;
    min-height: 100svh;
    padding: 116px clamp(24px, 5vw, 48px) clamp(420px, 48svh, 500px);
    overflow: clip;
  }
  /* The photograph keeps its natural size (never scaled up with a long
     chapter) and sits on the chapter's floor; its top fades into the ivory. */
  .home-savannah .savannah__picture {
    inset: auto 0 0;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%);
    mask-image: linear-gradient(to bottom, transparent, #000 24%);
  }
  .home-savannah .savannah__photo {
    height: auto;
    object-fit: fill;
  }
  .home-savannah .savannah__heading-block {
    grid-column: 1;
    justify-self: center;
    max-width: 740px;
  }
  .home-savannah .savannah__heading { font-size: var(--text-heading-2); }
  .home-savannah .savannah__photo { object-position: 45% bottom; }
  .home-savannah .savannah__intro::after { background: none; }
  .home-savannah .savannah__copy {
    width: 100%;
    max-width: 740px;
    justify-self: center;
  }
  .home-savannah .savannah__copy p { color: var(--savannah-espresso); }
}

/* Portrait tablets keep a full-screen chapter, with the landscape photograph
   anchored to its floor. A minimum (not fixed) height lets enlarged text grow
   naturally without clipping the copy or bringing the next section into view. */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  .home-savannah .savannah__intro {
    min-height: 100svh;
    padding-bottom: 480px;
  }
}

@media (max-width: 700px) {
  .home-savannah .savannah__intro {
    padding-top: 100px;
    padding-inline: 24px;
    row-gap: 20px;
  }
  .home-savannah .savannah__heading { font-size: var(--text-heading-2); }
  .home-savannah .savannah__eyebrow {
    gap: 14px;
    margin-bottom: var(--space-eyebrow);
  }
  .home-savannah .savannah__eyebrow::after { flex-basis: 32px; }
  .home-savannah .savannah__copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 0;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  /* Let the copy use the photograph's light sky instead of reserving another
     half-screen below it. The 1:2 image's tree occupies its bottom quarter:
     keep that area plus a little breathing room clear, and grow for long text. */
  .home-savannah .savannah__intro {
    grid-template-rows: auto minmax(min-content, 1fr);
    align-content: stretch;
    padding-bottom: calc(50vw + 40px);
  }
  .home-savannah .savannah__copy {
    align-self: end;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  .home-savannah .savannah__intro { padding-top: 102px; padding-bottom: 28px; }
  .home-savannah .savannah__heading { font-size: clamp(2rem, 3.5vw, 3.25rem); }
}

/* Larger text gets an opaque local reading surface rather than a dark
   photograph showing through long lines. Normal-size sky stays untouched. */
.home-savannah .savannah__intro.has-long-heading .savannah__heading-block::before {
  background: radial-gradient(ellipse at 55% 45%, rgba(245,239,227,0.97) 40%, rgba(245,239,227,0) 74%);
}

@media (max-width: 1100px) and (orientation: portrait) {
  .home-savannah .savannah__intro.has-long-copy .savannah__copy::before {
    position: absolute;
    z-index: -1;
    inset: -24px -24px -32px;
    content: "";
    background: linear-gradient(rgba(245,239,227,0), rgba(245,239,227,0.96) 18%, rgba(245,239,227,0.96) 85%, rgba(245,239,227,0));
    pointer-events: none;
  }
}