/* ========================================================================
   Heaven Sent landing — desktop structure (Phase 1)
   Page-specific only. Do not import into other site pages.
   ======================================================================== */

/* ----- Heaven Sent header treatment ----- */
body.hs-landing-site .header {
  background: #fdfaf4 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body.hs-landing-site .header::after {
  display: none !important;
  content: none !important;
}

body.hs-landing-site .header__logo {
  position: relative;
  display: inline-block;
  line-height: 0;
}

body.hs-landing-site .header__logo img {
  display: block;
  width: auto;
  height: auto;
  opacity: 0;
}

body.hs-landing-site .header__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #3d6b4d;
  -webkit-mask: url("../images/Logos/CORNER-LOGO-transparent.png") left center / contain no-repeat;
  mask: url("../images/Logos/CORNER-LOGO-transparent.png") left center / contain no-repeat;
  pointer-events: none;
}

body.hs-landing-site .menu__link {
  color: #355f45 !important;
}

body.hs-landing-site .menu__link:hover,
body.hs-landing-site .menu__link:focus-visible {
  color: #683ba5 !important;
}

body.hs-landing-site .actions-header__button {
  color: #355f45 !important;
  border-color: rgba(53, 95, 69, 0.45) !important;
  background: rgba(255, 253, 248, 0.68) !important;
}

body.hs-landing-site .icon-menu span,
body.hs-landing-site .icon-menu::before,
body.hs-landing-site .icon-menu::after {
  background-color: #355f45 !important;
}

/* ----- Page canvas ----- */
main.page.gh-tier-page.heaven-sent-page.hs-landing {
  --hs-cream: #fdfbf7;
  --hs-cream-deep: #f3ebe0;
  --hs-panel: #fdfbf7;
  --hs-forest: #285f3d;
  --hs-forest-mid: #3d7650;
  --hs-sage: #648b69;
  --hs-plum: #683ba5;
  --hs-body: #3a3f3a;
  --hs-body-soft: #4f554f;
  --hs-border: #d1c7b7;
  --hs-border-soft: rgba(209, 199, 183, 0.85);
  --hs-shadow:
    0 9px 24px rgba(126, 91, 59, 0.14),
    0 2px 6px rgba(126, 91, 59, 0.09);
  --hs-shell: min(1480px, calc(100vw - 56px));
  --hs-gap: 1.75rem;
  background-color: var(--hs-cream) !important;
  background-image:
    linear-gradient(rgba(253, 251, 247, 0.76), rgba(253, 251, 247, 0.76)),
    url("../images/Home%20Page/Home-Parchment.png") !important;
  background-repeat: repeat-y, repeat-y !important;
  background-position: center top, center top !important;
  background-size: 100% auto, 100% auto !important;
  width: 100%;
  overflow-x: clip;
}

main.page.heaven-sent-page.hs-landing::before,
main.page.heaven-sent-page.hs-landing::after {
  display: none !important;
  content: none !important;
}

.hs-landing-page {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0 0 2.5rem;
  color: var(--hs-body);
  font-family: "Cormorant Garamond", Baskerville, Georgia, serif;
  background: transparent;
}

/* Shared shell for bordered content sections */
.hs-landing-shell {
  width: var(--hs-shell);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--hs-gap);
}

/* Temporary artwork placeholders (Phase 1) */
.hs-landing-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 1px dashed rgba(140, 112, 82, 0.28);
  border-radius: 10px;
  background: rgba(255, 252, 246, 0.55);
  color: rgba(90, 125, 98, 0.55);
  font-family: "Cormorant Garamond", Baskerville, Georgia, serif;
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.04em;
  text-align: center;
}

.hs-landing-placeholder--icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border-style: solid;
  border-color: rgba(90, 125, 98, 0.28);
  background: rgba(90, 125, 98, 0.06);
  font-size: 0;
}

.hs-landing-placeholder--floral,
.hs-landing-placeholder--wings,
.hs-landing-placeholder--ink,
.hs-landing-placeholder--memorial {
  min-height: 100%;
}

/* ----- Flourish ----- */
.hs-landing-flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0.35rem auto 0.55rem;
  max-width: 12rem;
  color: var(--hs-sage);
}

.hs-landing-flourish__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90, 125, 98, 0.5), transparent);
}

.hs-landing-flourish__heart {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  color: #7f9278;
  line-height: 1;
}

.hs-landing-flourish__heart::before {
  content: "♥";
  display: block;
  font-size: 1.08rem;
  line-height: 1;
}

.hs-landing-flourish--botanical {
  width: min(10rem, 70%);
  max-width: none;
  gap: 0;
  color: var(--hs-sage);
}

.hs-landing-flourish--botanical svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Hero divider: thin botanical stems with outward leaf-chevrons and a
   three-dot tip flanking a solid heart, matching the approved sample. */
.hs-landing-hero .hs-landing-flourish--hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: min(14.5rem, 78vw);
  max-width: none;
  margin: 0.55rem auto 0.78rem;
  color: #58765c;
}

.hs-landing-hero .hs-landing-flourish__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hs-landing-emphasis {
  font-style: italic;
  font-weight: 500;
  color: var(--hs-plum) !important;
}

/* ----- 1. Full-width hero ----- */
.hs-landing-hero {
  position: relative;
  width: 100%;
  min-height: 50vw;
  box-sizing: border-box;
  text-align: center;
  padding: calc(11rem + 165px) 1.75rem 2.75rem;
  margin: 0 0 var(--hs-gap);
  overflow: hidden;
  background: transparent;
}

/* The hero's cream plate lives on this layer rather than on the section itself
   so its lower edge can fade to fully transparent. The page parchment on `main`
   is painted continuously behind the hero, so the transition below becomes
   parchment-to-parchment and no seam can appear at any viewport width. Fading a
   background-color is impossible, which is why this is a separate layer. */
.hs-landing-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: var(--hs-cream);
  background-image:
    linear-gradient(rgba(253, 250, 244, 0.04), rgba(253, 250, 244, 0.04)),
    url("../images/Heaven Sent/Beloved_Lite.png");
  background-position: center top, center 115px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.82) 73%,
    rgba(0, 0, 0, 0.45) 86%,
    rgba(0, 0, 0, 0.14) 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.82) 73%,
    rgba(0, 0, 0, 0.45) 86%,
    rgba(0, 0, 0, 0.14) 95%,
    transparent 100%
  );
  pointer-events: none;
}

.hs-landing-hero__beloved {
  position: absolute;
  z-index: 1;
  top: calc(115px + 1.35vw);
  left: 50%;
  display: block;
  width: 100%;
  margin: 0;
  color: rgba(126, 103, 78, 0.14);
  font-family: "Cormorant Garamond", Baskerville, Georgia, serif;
  font-size: 12.6vw;
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: 0.245em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(calc(-50% + 0.55vw)) scaleX(1.18);
  transform-origin: center top;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hs-landing-hero__decor {
  display: none;
}

.hs-landing-hero__decor--left {
  left: max(1.25rem, calc((100vw - 1480px) / 2 + 0.5rem));
}

.hs-landing-hero__decor--right {
  right: max(1.25rem, calc((100vw - 1480px) / 2 + 0.5rem));
}

.hs-landing-hero__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  -webkit-user-drag: none;
  /* Soft feather into cream parchment on all sides */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.hs-landing-hero__decor--left .hs-landing-hero__art {
  object-position: left center;
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, #000 58%, transparent 96%),
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(to right, #000 0%, #000 58%, transparent 96%),
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.hs-landing-hero__decor--right .hs-landing-hero__art {
  object-position: right center;
  -webkit-mask-image:
    linear-gradient(to left, #000 0%, #000 55%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 88%, transparent 100%);
  mask-image:
    linear-gradient(to left, #000 0%, #000 55%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 88%, transparent 100%);
}

.hs-landing-hero__inner {
  position: relative;
  z-index: 2;
  width: min(42rem, 92%);
  margin: 0 auto;
  padding: 1.25rem 0 0.5rem;
}

.hs-landing-hero__org {
  margin: 0 0 calc(0.4rem + 10px);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--hs-forest-mid);
}

.hs-landing-hero__title {
  margin: 0;
  font-family: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(4.4rem, 8.25vw, 6.325rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--hs-forest);
}

.hs-landing-hero__subtitle {
  margin: calc(0.2rem + 10px) 0 0.55rem;
  font-family: "Cormorant Garamond", Baskerville, Georgia, serif;
  font-size: clamp(1.32rem, 2.2vw, 1.595rem);
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.45;
  color: var(--hs-forest);
  text-shadow:
    0 0 1px rgba(253, 250, 244, 0.9),
    0 0 8px rgba(253, 250, 244, 0.35);
}

.hs-landing-hero__tagline {
  margin: 0;
  font-family: "Cormorant Garamond", Baskerville, Georgia, serif;
  font-size: clamp(1.28rem, 2.08vw, 1.5rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.5;
  color: #5e3196;
  text-shadow:
    0 0 1px rgba(253, 250, 244, 0.9),
    0 0 8px rgba(253, 250, 244, 0.35);
}

/* ----- Shared bordered panels ----- */
.hs-landing-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 2rem 2.35rem;
  background: var(--hs-panel);
  border: 1px solid var(--hs-border);
  border-radius: 14px;
  box-shadow: var(--hs-shadow);
  box-sizing: border-box;
}

.hs-landing-panel h2 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.45rem, 2.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--hs-forest);
}

.hs-landing-panel p {
  margin: 0 0 0.9rem;
  font-size: 1.08rem;
  line-height: 1.78;
  color: var(--hs-body);
}

.hs-landing-panel p:last-child {
  margin-bottom: 0;
}

/* ----- 2. Every Child Matters ----- */
.hs-landing-intro {
  display: grid;
  grid-template-columns: minmax(12rem, 15.5rem) minmax(0, 1fr);
  gap: 2rem 2.5rem;
  align-items: center;
  padding: 2.15rem 2.75rem;
  border-top-color: transparent;
}

.hs-landing-intro__emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.hs-landing-intro__text::after {
  content: "";
  display: block;
  clear: both;
}

/* Left-edge floral artwork: a soft, page-level layer that begins beside the
   BELOVED watermark and continues behind the hero into the first section.
   Keep this above the hero background without blending into its watermark. */
.hs-landing-left-art {
  position: absolute;
  z-index: 1;
  top: calc(clamp(5.5rem, 9vw, 8rem) + 75px);
  left: -75px;
  width: clamp(38rem, 58vw, 68rem);
  height: clamp(58rem, 88vw, 88rem);
  background: none;
  pointer-events: none;
  /* Distance from this layer's top down to where the first content panel starts.
     The hero is 50vw tall and the panel sits one gap below it, so the bouquet can
     be told to finish dissolving exactly at that edge rather than being sliced by
     it — at any viewport width. On narrow desktops, where hero content rather than
     min-height sets the height, this resolves short, which only starts the fade a
     little early. */
  --hs-fade-end: calc(50vw + var(--hs-gap) - (clamp(5.5rem, 9vw, 8rem) + 75px));
}

.hs-landing-left-art__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
  background: none;
  /* The PNG now carries real alpha and its own vintage grade, so the artwork
     needs no blend mode or colour filter; only a light bottom fade so the
     trailing stems settle into the parchment. */
  mix-blend-mode: normal;
  filter: none;
  opacity: 0.95;
  user-select: none;
  -webkit-user-drag: none;
  /* The bouquet and ribbon stay at full strength. Only the narrow strip directly
     above the first panel fades, so the panel's edge does not slice the artwork.
     Keeping this on the artwork itself (rather than a band drawn over it) means
     the flowers also stop out in the page margin, instead of reappearing at full
     strength beside the panel. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(var(--hs-fade-end) - 110px),
    rgba(0, 0, 0, 0.58) calc(var(--hs-fade-end) - 68px),
    rgba(0, 0, 0, 0.22) calc(var(--hs-fade-end) - 30px),
    transparent var(--hs-fade-end)
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(var(--hs-fade-end) - 110px),
    rgba(0, 0, 0, 0.58) calc(var(--hs-fade-end) - 68px),
    rgba(0, 0, 0, 0.22) calc(var(--hs-fade-end) - 30px),
    transparent var(--hs-fade-end)
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Ribbon-only copy of the left arrangement. It shares the base art's exact
   geometry so it registers pixel-for-pixel, but sits after the content shell
   so the satin tail reads as draped over the first two panels. */
.hs-landing-left-ribbon {
  position: absolute;
  z-index: 20;
  top: calc(clamp(5.5rem, 9vw, 8rem) + 75px);
  left: -75px;
  width: clamp(38rem, 58vw, 68rem);
  height: clamp(58rem, 88vw, 88rem);
  pointer-events: none;
}

.hs-landing-left-ribbon__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
  opacity: 0.95;
  filter: drop-shadow(0 3px 4px rgba(91, 65, 42, 0.14));
  user-select: none;
  -webkit-user-drag: none;
}

/* Right-edge memorial artwork: starts in the hero and bleeds down across
   the first content box, pinned to the page's right border. */
.hs-landing-right-art {
  position: absolute;
  z-index: 3;
  top: calc(clamp(6rem, 11vw, 10rem) + 50px);
  right: 0;
  width: clamp(40rem, 70vw, 72rem);
  height: clamp(46rem, 80vw, 70rem);
  pointer-events: none;
}

.hs-landing-right-art__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right top;
  /* Uses the re-based plate (see scripts/hs_right_dehaze.py): the original art's
     white point sat near 224 against a 252 parchment, so its dense baby's breath
     read as a dusty grey mass. The tone lift is baked into the PNG rather than
     done here, because CSS brightness would raise the stems along with it and
     flatten the drawing. Opacity can therefore sit higher, keeping the linework
     and candle glow crisp while the mid-tones match the page. */
  opacity: 0.92;
  filter: saturate(0.96);
  -webkit-mask-image:
    linear-gradient(to left, #000 0%, #000 74%, rgba(0, 0, 0, 0.6) 86%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 68%, rgba(0, 0, 0, 0.66) 82%, rgba(0, 0, 0, 0.3) 92%, transparent 100%);
  mask-image:
    linear-gradient(to left, #000 0%, #000 74%, rgba(0, 0, 0, 0.6) 86%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 68%, rgba(0, 0, 0, 0.66) 82%, rgba(0, 0, 0, 0.3) 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Invisible shape that lets the intro copy curve around the artwork. */
.hs-landing-intro__wrap-spacer {
  float: right;
  width: clamp(11rem, 23vw, 19rem);
  height: clamp(8rem, 15vw, 12.5rem);
  margin: 0 -1.25rem 0.5rem 1.35rem;
  shape-outside: ellipse(54% 52% at 74% 38%);
  shape-margin: 0.95rem;
  pointer-events: none;
}

.hs-landing-seal {
  display: block;
  width: 15.5rem;
  height: auto;
  margin: 0;
  filter: none;
  mix-blend-mode: multiply;
}

.hs-landing-intro__text h2 {
  margin-bottom: 0.75rem;
}

.hs-landing-intro__text .hs-landing-emphasis {
  margin-top: 0.35rem;
  font-size: 1.12rem;
}

/* ----- 3. Why Infant Loss Is Different ----- */
.hs-landing-different {
  padding: 2rem 2.5rem 2.25rem;
}

.hs-landing-different__header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.hs-landing-different__header h2 {
  margin-bottom: 0.35rem;
}

.hs-landing-different__body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 0.95fr);
  gap: 1.5rem 2rem;
  align-items: center;
}

.hs-landing-different__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: start;
}

.hs-landing-different__col {
  padding: 0 1.35rem;
  text-align: center;
}

.hs-landing-different__col + .hs-landing-different__col {
  border-left: 1px dashed rgba(209, 199, 183, 0.95);
}

.hs-landing-different__col-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  margin: 0 auto 0.65rem;
  color: var(--hs-sage);
}

.hs-landing-different__col-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hs-landing-different__col h3 {
  margin: 0 0 0.65rem;
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--hs-forest);
}

.hs-landing-different__col p {
  font-size: 1.02rem;
  line-height: 1.72;
  margin-bottom: 0.7rem;
}

.hs-landing-wings {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 27rem;
  padding: 0.25rem;
}

.hs-landing-wings__image {
  display: block;
  width: 108%;
  max-width: none;
  height: 100%;
  min-height: 26rem;
  margin-inline: -4%;
  object-fit: contain;
  object-position: center;
  filter: sepia(0.12) saturate(0.9) contrast(0.97);
}

.hs-landing-wings__heart {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 27%;
  color: #7f9278;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 1px rgba(70, 89, 65, 0.16));
}

/* ----- 4. Resource tiles — true 5 × 2 ----- */
.hs-landing-tiles {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}

.hs-landing-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.hs-landing-tiles__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  gap: 0.85rem 0.75rem;
}

.hs-landing-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 100%;
  padding: 1.1rem 0.85rem 0.95rem;
  text-decoration: none;
  color: inherit;
  background: var(--hs-panel);
  border: 1px solid var(--hs-border-soft);
  border-radius: 12px;
  box-shadow: var(--hs-shadow);
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hs-landing-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(140, 112, 82, 0.42);
  box-shadow: 0 10px 28px rgba(74, 58, 48, 0.1);
}

.hs-landing-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  margin-bottom: 0.55rem;
  color: var(--hs-sage);
}

.hs-landing-tile__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hs-landing-tile__icon .hs-icon-fill,
.hs-icon-fill {
  fill: currentColor;
  stroke: none;
}

.hs-landing-tile__title {
  margin: 0 0 0.45rem;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hs-plum);
}

.hs-landing-tile__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--hs-body-soft);
}

.hs-landing-tile__flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.4rem;
  height: 0.9rem;
  margin: auto auto 0;
  padding-top: 0.75rem;
  color: var(--hs-sage);
}

.hs-landing-tile__flourish svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

#track-selections {
  scroll-margin-top: 7rem;
}

/* ----- 5. Poem / quote / bonnet row ----- */
.hs-landing-reflection {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
  gap: 1.25rem 1.5rem;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding-right: clamp(13rem, 27vw, 26rem);
  overflow: visible;
}

.hs-landing-poem-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1.35rem 1.5rem clamp(8.5rem, 10vw, 11rem);
  background: var(--hs-panel);
  border: 1px solid var(--hs-border);
  border-radius: 14px;
  box-shadow: var(--hs-shadow);
  box-sizing: border-box;
}

/* The quill composition is independent of the poem card, mirroring the
   bonnet at the opposite page edge. */
.hs-landing-quill {
  position: absolute;
  z-index: 8;
  bottom: calc((var(--hs-gap) * -1.25) - 50px);
  left: calc(((100vw - 100%) / -2) - clamp(3rem, 4vw, 5rem));
  width: clamp(18rem, 24vw, 23rem);
  pointer-events: none;
}

.hs-landing-quill__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left bottom;
  /* Match the soft, warm register of the surrounding memorial artwork while
     retaining enough definition for the glass and feather. Keep this free of
     drop shadows so no horizontal gray baseline appears beneath the artwork. */
  filter:
    saturate(0.84)
    contrast(0.88)
    brightness(1.025);
  /* The feather may rise over the tile above; dissolve only its upper edge so
     the tile copy remains readable while the bottle stays fully present. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.28) 12%,
    rgba(0, 0, 0, 0.78) 25%,
    #000 38%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.28) 12%,
    rgba(0, 0, 0, 0.78) 25%,
    #000 38%,
    #000 100%
  );
  user-select: none;
  -webkit-user-drag: none;
}

.hs-landing-poem-card h2 {
  margin: 0 0 0.55rem;
  font-size: 1.22rem;
  text-align: center;
  color: var(--hs-forest);
}

.hs-landing-poem-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--hs-body-soft);
}

.hs-landing-poem-card a {
  display: inline-block;
  margin-top: 0.85rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--hs-forest);
  text-decoration: none;
}

.hs-landing-poem-card a:hover {
  text-decoration: underline;
}

.hs-landing-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1.75rem;
}

.hs-landing-quote__mark {
  display: block;
  font-family: "Cormorant Garamond", Baskerville, Georgia, serif;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--hs-sage);
  opacity: 0.7;
}

.hs-landing-quote__mark--open {
  margin-bottom: 0.15rem;
}

.hs-landing-quote__mark--close {
  margin-top: 0.15rem;
  line-height: 1;
}

.hs-landing-quote blockquote {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.72;
  color: var(--hs-plum);
}

.hs-landing-quote__flourish {
  margin: 0.85rem auto 0;
}

/* Memorial keepsake floats free of any box and pins to the page's right edge.
   Anchored to the row's bottom so the arrangement appears to rest on the
   support box below, with the baby's breath rising past the tiles. */
.hs-landing-bonnet {
  position: absolute;
  z-index: 4;
  bottom: calc(var(--hs-gap) * -2);
  right: calc((100vw - 100%) / -2);
  width: clamp(24.75rem, 40.5vw, 37.5rem);
  max-width: min(37.5rem, 52vw);
  pointer-events: none;
}

.hs-landing-bonnet__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: right bottom;
  filter: none;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 12%,
    #000 30%,
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 12%,
    #000 30%,
    #000 100%
  );
  user-select: none;
  -webkit-user-drag: none;
}

/* Match the page's light cream-washed parchment inside every content box. */
.hs-landing-panel,
.hs-landing-tile,
.hs-landing-poem-card {
  background-color: var(--hs-cream);
  background-image:
    linear-gradient(rgba(253, 251, 247, 0.76), rgba(253, 251, 247, 0.76)),
    url("../images/Home%20Page/Home-Parchment.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: var(--hs-shadow);
}

/* ----- 6. Final support section ----- */
.hs-landing-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 1.75rem 2.5rem;
  align-items: center;
  padding: 1.85rem 2.5rem;
}

.hs-landing-cta__message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: start;
}

.hs-landing-cta__heart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: 0.15rem;
  color: var(--hs-sage);
}

.hs-landing-cta__heart svg {
  width: 100%;
  height: 100%;
}

.hs-landing-cta__text h2 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--hs-forest);
}

.hs-landing-cta__text p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--hs-body);
}

.hs-landing-cta__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.hs-landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hs-landing-btn--outline {
  border: 1.5px solid var(--hs-forest-mid);
  background: #fffefb;
  color: var(--hs-forest) !important;
  box-shadow: 0 2px 8px rgba(74, 58, 48, 0.05);
}

.hs-landing-btn--outline:hover {
  background: #fff;
  transform: translateY(-1px);
}

.hs-landing-btn--solid {
  border: 1.5px solid var(--hs-forest);
  background: var(--hs-forest-mid);
  color: #fffefb !important;
  box-shadow: 0 4px 14px rgba(63, 92, 71, 0.22);
}

.hs-landing-btn--solid:hover {
  background: var(--hs-forest);
  transform: translateY(-1px);
}

/* ----- 7. Finding-style editorial footer in Heaven Sent green ----- */
body.hs-landing-site .footer.hs-landing-footer {
  margin-top: 0;
  padding: 1.35rem 0 1.45rem !important;
  border-top: 0;
  background: linear-gradient(180deg, #456f52 0%, #31583f 100%) !important;
}

body.hs-landing-site .footer.hs-landing-footer::before {
  display: none !important;
  content: none !important;
}

body.hs-landing-site .footer.hs-landing-footer .gh-home-footer__container {
  width: min(100% - 2.5rem, 72rem);
  margin-inline: auto;
}

body.hs-landing-site .footer.hs-landing-footer .gh-home-footer__logo img {
  width: auto;
  max-height: 2.95rem;
  opacity: 0.94;
  filter: brightness(0) invert(1);
}

body.hs-landing-site .footer.hs-landing-footer .gh-home-footer__legal a,
body.hs-landing-site .footer.hs-landing-footer .gh-home-footer__legal-sep,
body.hs-landing-site .footer.hs-landing-footer .gh-home-footer__tagline,
body.hs-landing-site .footer.hs-landing-footer .gh-home-footer__copyright {
  color: rgba(255, 250, 242, 0.9) !important;
}

body.hs-landing-site .footer.hs-landing-footer .gh-home-footer__legal a:hover,
body.hs-landing-site .footer.hs-landing-footer .gh-home-footer__legal a:focus-visible {
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

body.hs-landing-site .footer.hs-landing-footer .gh-site-support-btn--sent {
  color: #31583f !important;
  border: 1px solid rgba(255, 250, 242, 0.82) !important;
  background: rgba(255, 250, 242, 0.96) !important;
  box-shadow: none !important;
}

body.hs-landing-site .footer.hs-landing-footer .gh-site-support-btn--harbor {
  color: rgba(255, 250, 242, 0.96) !important;
  border: 1px solid rgba(255, 250, 242, 0.58) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.hs-landing-site .footer.hs-landing-footer .gh-site-support-btn:hover {
  transform: translateY(-1px);
  border-color: #fff !important;
}

/* Hide any leftover legacy HS hero scene markup if present */
main.page.heaven-sent-page.hs-landing .hs-page,
main.page.heaven-sent-page.hs-landing .heaven-sent-hero-scene {
  display: none !important;
}

/* Desktop nav: keep hamburger hidden at site desktop breakpoint */
@media (min-width: 1200px) {
  body.hs-landing-site .icon-menu {
    display: none !important;
  }
}

/* ========================================================================
   20260729 mobile-stable-r1 — Heaven Sent phone/tablet composition
   The Phase 1 desktop grid remains unchanged above 1024px.
   ======================================================================== */
@media (max-width: 1024px) {
  main.page.gh-tier-page.heaven-sent-page.hs-landing {
    --hs-shell: min(100% - 2.5rem, 56rem);
    --hs-gap: clamp(1.25rem, 3vw, 1.75rem);
    min-width: 0;
    overflow-x: clip;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-height: clamp(24rem, 54vw, 31rem);
    height: auto;
    margin-top: 0;
    padding: calc(clamp(2.75rem, 6vw, 4rem) + 217px) clamp(1.2rem, 4vw, 2rem) clamp(3.25rem, 7vw, 4.5rem);
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero::before {
    background-position: center top, center 87px;
    background-size: 100% auto;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero__beloved {
    top: calc(87px + 1.35vw);
    font-size: 12.6vw;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-right-art {
    top: calc(clamp(5rem, 14vw, 8.5rem) + 50px);
    width: clamp(26rem, 64vw, 40rem);
    height: clamp(30rem, 74vw, 46rem);
    opacity: 0.9;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-left-art {
    top: calc(clamp(5rem, 12vw, 7rem) + 75px);
    width: clamp(25rem, 56vw, 36rem);
    height: clamp(38rem, 78vw, 52rem);
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-left-ribbon {
    top: calc(clamp(5rem, 12vw, 7rem) + 75px);
    width: clamp(25rem, 56vw, 36rem);
    height: clamp(38rem, 78vw, 52rem);
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-left-art__img {
    opacity: 0.82;
    /* The hero uses a different height formula here, so the desktop panel-anchored
       fade does not apply; this proportional ramp lands at the same place. */
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 36%,
      rgba(0, 0, 0, 0.58) 42%,
      rgba(0, 0, 0, 0.22) 46%,
      transparent 50%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 36%,
      rgba(0, 0, 0, 0.58) 42%,
      rgba(0, 0, 0, 0.22) 46%,
      transparent 50%
    );
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-left-ribbon__img {
    opacity: 0.82;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero__inner {
    width: min(100%, 42rem);
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero__title {
    max-width: 100%;
    font-size: clamp(4.125rem, 11vw, 5.885rem);
    line-height: 1;
    overflow-wrap: normal;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-shell,
  .footer.hs-landing-footer .hs-landing-footer__inner {
    width: var(--hs-shell);
    max-width: 100%;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-panel {
    min-width: 0;
    max-width: 100%;
    padding: clamp(1.5rem, 4vw, 2.25rem);
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    text-align: center;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-intro__emblem {
    width: 100%;
    margin: 0 auto;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-intro__wrap-spacer {
    display: none;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-seal {
    width: clamp(11rem, 30vw, 14.5rem);
    max-width: 100%;
    margin-inline: auto;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-intro__text {
    width: 100%;
    min-width: 0;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-different__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-different__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-different__col {
    min-width: 0;
    padding: 0 0 1.25rem;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-different__col + .hs-landing-different__col {
    border-left: 0;
    border-top: 1px dashed rgba(209, 199, 183, 0.95);
    padding-top: 1.25rem;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-wings,
  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-wings__image {
    width: 100%;
    min-height: clamp(17rem, 44vw, 24rem);
    max-width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-tiles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 1rem;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-tile {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: 1.2rem 1rem;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-tile__title,
  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-tile__text {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-reflection {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding-right: 0;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-poem-card,
  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-quote {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-poem-card {
    padding: 1.5rem 1.35rem;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-quill {
    position: relative;
    bottom: auto;
    left: auto;
    z-index: 8;
    width: min(18rem, 78%);
    margin: 0 0 0.15rem 0;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-bonnet {
    position: relative;
    bottom: auto;
    right: auto;
    width: min(22.5rem, 86%);
    max-width: 22.5rem;
    margin: 0.35rem 0 0 auto;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-bonnet__img {
    -webkit-mask-image: none;
    mask-image: none;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-cta__actions {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  main.page.gh-tier-page.heaven-sent-page.hs-landing {
    --hs-shell: min(100% - 1.75rem, 36rem);
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-left-art,
  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-left-ribbon,
  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-right-art {
    display: none;
  }

  /*
   * Mobile hero is a separate composition: centered title over cream, then a
   * large right-anchored vignette that begins just under the divider and fills
   * the lower two-thirds with a soft top fade — never a hard rectangular crop.
   */
  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero {
    min-height: min(100svh, 52rem);
    padding: calc(clamp(1.85rem, 6vw, 2.5rem) + 158px) 1rem 0;
    overflow: hidden;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero::before {
    background-position: center top, center 63px;
    background-size: cover;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero__beloved {
    top: calc(63px + 3.1vw);
    font-size: 13.8vw;
    letter-spacing: 0.2em;
    transform: translateX(calc(-50% + 0.35vw)) scaleX(1.12);
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero__inner {
    position: relative;
    z-index: 2;
    padding-bottom: 0;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero__decor--right {
    position: absolute;
    z-index: 1;
    top: auto;
    right: 0;
    bottom: -1rem;
    left: 0;
    display: block;
    width: 100%;
    height: 68%;
    opacity: 1;
    overflow: hidden;
    pointer-events: none;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero__decor--right .hs-landing-hero__art {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    /* Scene sits lower-left on the transparent canvas */
    object-position: 22% 78%;
    transform: scale(1.35);
    transform-origin: 30% 100%;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.35) 10%,
      #000 22%,
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.35) 10%,
      #000 22%,
      #000 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero__org {
    font-size: clamp(1.05rem, 4.6vw, 1.18rem);
    line-height: 1.45;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero__title {
    font-size: clamp(3.685rem, 18.7vw, 4.95rem);
    line-height: 0.98;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero__subtitle {
    font-size: clamp(1.188rem, 5.5vw, 1.43rem);
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-hero__tagline {
    font-size: clamp(1.1rem, 5.28vw, 1.32rem);
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-panel {
    padding: 1.5rem clamp(1rem, 5vw, 1.4rem);
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-panel p {
    font-size: 1rem;
    line-height: 1.68;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-tiles__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-tile {
    min-height: 0;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-cta__message {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    text-align: center;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-cta__heart {
    margin: 0 auto;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-cta__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.7rem;
  }

  main.page.gh-tier-page.heaven-sent-page.hs-landing .hs-landing-btn {
    width: 100%;
    max-width: 100%;
    min-height: 3rem;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }

  .footer.hs-landing-footer .hs-landing-footer__inner {
    flex-direction: column;
    gap: 0.65rem;
    padding-inline: 0;
  }

  .footer.hs-landing-footer .hs-landing-footer__copy {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .footer.hs-landing-footer .hs-landing-footer__flourish {
    position: static;
    transform: none;
  }
}