/* Scene backgrounds sit below real content, independently of global subpages. */
.v4-body .v4-home :is(.v4-home-mission,.v4-home-stories,.v4-home-impact,.v4-home-slogan){isolation:isolate}
.v4-body .v4-home [data-scene-background="bouquet"]:not(.v4-home-contact){--home-scene-paper:#fffaf4;background:radial-gradient(ellipse at 85% 0,#ffe8d480,transparent 55%),linear-gradient(150deg,#fffaf4,#fffdfb)}
.v4-body .v4-home [data-scene-background="garden"]:not(.v4-home-contact){--home-scene-paper:#f7fcf8;background:radial-gradient(ellipse at 15% 10%,#fff5de80,transparent 50%),linear-gradient(155deg,#fbfcf5,#f1faf5)}
.v4-body .v4-home [data-scene-background="none"]:not(.v4-home-contact){--home-scene-paper:#fff;background:#fff}
.v4-body .v4-home .v4-home-mission:is([data-scene-background="bouquet"],[data-scene-background="garden"],[data-scene-background="none"])::before{display:none}
/* Continue the preceding mission paper through every open part of the story
   scene, including its header clearance and the space around the moving cards.
   Reflect the default gradient vertically so its lower edge meets the next
   scene's upper edge, without stretching or moving either scene's content. */
.v4-body .v4-home .v4-home-mission + .v4-home-stories {
  --v4-mission-extension:
    radial-gradient(ellipse at 46% 58%,#fffdfaf2 0%,#fffdfa99 36%,transparent 69%),
    radial-gradient(ellipse at 2% 2%,#f8dce2 0%,transparent 48%),
    radial-gradient(ellipse at 100% 92%,#fff0cb 0%,transparent 49%),
    radial-gradient(ellipse at 90% -10%,#fce6db 0%,transparent 50%);
  --v4-mission-paper:#fffaf5;
}
.v4-body .v4-home .v4-home-mission[data-scene-background="bouquet"] + .v4-home-stories {
  --v4-mission-extension:radial-gradient(ellipse at 85% 100%,#ffe8d480,transparent 55%),linear-gradient(30deg,#fffaf4,#fffdfb);
  --v4-mission-paper:#fffaf4;
}
.v4-body .v4-home .v4-home-mission[data-scene-background="garden"] + .v4-home-stories {
  --v4-mission-extension:radial-gradient(ellipse at 15% 90%,#fff5de80,transparent 50%),linear-gradient(25deg,#fbfcf5,#f1faf5);
  --v4-mission-paper:#f7fcf8;
}
.v4-body .v4-home .v4-home-mission[data-scene-background="none"] + .v4-home-stories {
  --v4-mission-extension:linear-gradient(#fff,#fff);
  --v4-mission-paper:#fff;
}
/* A separately chosen story background still takes precedence. */
.v4-body .v4-home .v4-home-mission + .v4-home-stories:is(:not([data-scene-background]),[data-scene-background=""],[data-scene-background="default"]) {
  --home-scene-paper:var(--v4-mission-paper);
  background:var(--v4-mission-extension) var(--v4-mission-paper);
}
.v4-body .v4-home .v4-home-mission + .v4-home-stories:is(:not([data-scene-background]),[data-scene-background=""],[data-scene-background="default"]) > .v4-story-banner {
  background:transparent;
}
.v4-body .v4-home .v4-home-mission + .v4-home-stories:is(:not([data-scene-background]),[data-scene-background=""],[data-scene-background="default"]) > .v4-story-banner::before {
  display:none;
}
@media(min-width:1200px) and (pointer:fine) {
  /* Fade the photograph itself, so the paper underneath stays continuous
     instead of being covered by the banner's old solid-white overlay. */
  .v4-body .v4-home .v4-home-mission + .v4-home-stories:is(:not([data-scene-background]),[data-scene-background=""],[data-scene-background="default"]) > .v4-story-banner:is(:not([data-story-image-layout]),[data-story-image-layout="fade"])::after {
    display:none;
  }
  .v4-body .v4-home .v4-home-mission + .v4-home-stories:is(:not([data-scene-background]),[data-scene-background=""],[data-scene-background="default"]) > .v4-story-banner:is(:not([data-story-image-layout]),[data-story-image-layout="fade"]) > :is(picture,img) {
    -webkit-mask-image:linear-gradient(90deg,transparent 12%,transparent 29%,#000 75%);
    mask-image:linear-gradient(90deg,transparent 12%,transparent 29%,#000 75%);
  }
}
@media(max-width:1199px),(pointer:coarse) {
  /* The supplied photograph fades to white. Reveal the scene paper beneath
     that tail instead, keeping the image and its copy group in place. */
  .v4-body .v4-home .v4-home-mission + .v4-home-stories:is(:not([data-scene-background]),[data-scene-background=""],[data-scene-background="default"]) > .v4-story-banner > picture > img[src="/static/v4/home-stories.webp"],
  .v4-body .v4-home .v4-home-mission + .v4-home-stories:is(:not([data-scene-background]),[data-scene-background=""],[data-scene-background="default"]) > .v4-story-banner > img[src="/static/v4/home-stories.webp"] {
    -webkit-mask-image:linear-gradient(#000 45%,transparent 100%);
    mask-image:linear-gradient(#000 45%,transparent 100%);
  }
}
.v4-body .v4-home-slogan>.v4-home-content-image{position:relative;z-index:1}
.v4-body .v4-home-slogan>.v4-home-decorations{z-index:0}
.v4-body .v4-home .v4-home-slogan[data-scene-background]:not([data-scene-background=""]):not([data-scene-background="default"]){overflow:hidden;position:relative;min-height:240px;padding-block:40px}
.v4-body .v4-home .v4-home-image-button{display:inline-flex;align-items:center;justify-content:center;width:var(--home-button-width,220px);max-width:100%;min-height:48px;line-height:0;vertical-align:middle;border-radius:999px;transition:transform .2s,filter .2s}
.v4-body .v4-home .v4-home-image-button>img{display:block;position:static;width:100%;height:auto;max-height:none;object-fit:contain}
.v4-body .v4-home .v4-home-image-button>img[src$="/home-support-button.png"]{aspect-ratio:4.1;object-fit:cover;object-position:50% 50%}
.v4-body .v4-home a.v4-home-image-button:hover{transform:translateY(-3px);filter:brightness(1.04)}
.v4-body .v4-home a.v4-home-image-button:focus-visible{outline:3px solid #fff;outline-offset:5px}

@media(min-width:1200px) and (pointer:fine){
  /* Keep the closing artwork and garden in proportion to the shallow banner. */
  .v4-body .v4-home .v4-home-content.v4-home-slogan .v4-home-content-image{max-width:min(760px,64vw)}
  /* Keep the landscape continuous at both viewport edges, below the lettering. */
  .v4-body .v4-home-slogan .v4-smile-flower--garden{
    top:calc(var(--flower-y) + clamp(24px,4vh,48px));
  }
  /* Keep text, figures and project links together on ultrawide monitors. */
  html.v4-scene-mode .v4-body .v4-home .v4-home-mission{width:100%;max-width:none;margin:0;padding-inline:max(6vw,calc((100% - 1280px)/2));column-gap:32px}

  /* All four compositions keep the same editable copy and story feed. */
  /* The source flower tile is already pale; retain enough contrast on white. */
  .v4-body .v4-home .v4-story-banner::before{opacity:.8}
  .v4-body .v4-home .v4-story-banner[data-story-image-layout="fade"]::after{background:linear-gradient(90deg,var(--home-scene-paper,#fff) 12%,var(--home-scene-paper,#fff) 29%,transparent 75%)}
  .v4-body .v4-home .v4-story-banner:is([data-story-image-layout="left"],[data-story-image-layout="right"])>picture{width:52%;inset:0 0 0 auto}
  .v4-body .v4-home .v4-story-banner[data-story-image-layout="left"]>picture{inset:0 auto 0 0}
  .v4-body .v4-home .v4-story-banner:is([data-story-image-layout="left"],[data-story-image-layout="right"])::after{display:none}
  .v4-body .v4-home .v4-story-banner:is([data-story-image-layout="left"],[data-story-image-layout="right"])>div{width:38%;max-width:620px;margin:0 0 0 6%;padding:24px 0}
  .v4-body .v4-home .v4-story-banner[data-story-image-layout="left"]>div{margin-left:56%;margin-right:6%}
  .v4-body .v4-home .v4-story-banner[data-story-image-layout="full"]{position:static}
  .v4-body .v4-home .v4-story-banner[data-story-image-layout="full"]>picture{inset:0;width:100%;z-index:-1}
  .v4-body .v4-home .v4-story-banner[data-story-image-layout="full"]::after{inset:0;background:linear-gradient(90deg,#302425b8,transparent 85%);z-index:-1}
  .v4-body .v4-home .v4-story-banner[data-story-image-layout="full"]>div{color:#fff;text-shadow:0 1px 14px #21100c66}
  .v4-body .v4-home .v4-story-banner[data-story-image-layout="full"] .v4-action{--action-color:#fff}
  .v4-body .v4-home .v4-story-banner[data-story-image-layout="full"] .v4-action__icon{background:#fff;color:var(--red,#df0030);text-shadow:none}
  .v4-body .v4-home-stories:has(>[data-story-image-layout="full"])>.v4-home-decorations{z-index:0}
  .v4-body .v4-home-stories:has(>[data-story-image-layout="full"])>.v4-story-track{position:relative;z-index:1}

  /* The map fills the scene. Counts share its lower-left empty area above totals. */
  html.v4-scene-mode .v4-body .v4-home .v4-home-impact{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto auto;gap:12px;align-content:stretch}
  .v4-body .v4-home .v4-home-impact>.v4-home-map{grid-column:1;grid-row:1/-1;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid}
  .v4-body .v4-home .v4-home-impact .v4-map-viewport{grid-column:1;grid-row:1/4;height:auto;min-height:0;aspect-ratio:auto}
  .v4-body .v4-home .v4-home-impact .v4-map-detail{grid-column:1;grid-row:2;position:relative;z-index:2;justify-self:start;align-self:end;display:grid;grid-template-columns:minmax(0,1fr) auto;width:clamp(230px,20vw,280px);min-height:88px;padding:12px 16px;margin-left:4px;gap:4px 10px}
  .v4-body .v4-home-impact .v4-map-detail-region{display:contents}
  .v4-body .v4-home-impact .v4-map-detail-region>strong{grid-column:1;grid-row:1}
  .v4-body .v4-home-impact .v4-map-detail-region>span{grid-column:1/-1;grid-row:2}
  .v4-body .v4-home-impact .v4-map-detail-value{grid-column:2;grid-row:1}
  .v4-body .v4-home .v4-home-impact .v4-map-detail-value>strong{font-size:36px}
  .v4-body .v4-home .v4-home-impact>.v4-impact-side{grid-column:1;grid-row:3;align-self:end;margin:0 0 8px 4px}
  .v4-body .v4-home-impact .v4-map-toolbar{grid-column:1;grid-row:4}
}
@media(min-width:1200px) and (max-aspect-ratio:3/2) and (pointer:fine){
  /* Keep the lower-left group below Tibet on taller desktop viewports. */
  .v4-body .v4-home-impact .v4-impact-metrics p{font-size:14px;line-height:1.4}
  .v4-body .v4-home-impact .v4-impact-metrics strong{font-size:22px;line-height:1.2}
}
@media(max-width:1199px),(pointer:coarse){
  .v4-body .v4-home-slogan .v4-smile-flower--garden{max-width:130vw}
  .v4-body .v4-home .v4-home-image-button{width:min(var(--home-button-width,220px),65vw)}
  .v4-body .v4-home .v4-home-slogan[data-scene-background]:not([data-scene-background=""]):not([data-scene-background="default"]){min-height:210px}
}
@media(prefers-reduced-motion:reduce){.v4-body .v4-home .v4-home-image-button{transition:none}}

@media(max-width:1199px),(pointer:coarse) {
  /* Each snapped scene clears the fixed header, including the story artwork.
     Keep the same stable height in map/contact layouts and older WebViews. */
  .v4-body .v4-home .v4-scene { min-height:var(--v4-scene-height,100vh); }
  .v4-body .v4-home .v4-scene.v4-home-mission { justify-content:center; padding-top:calc(var(--v4-header-height,72px) + 28px); padding-bottom:28px; }
  .v4-body .v4-home .v4-scene.v4-home-stories { padding-top:var(--v4-header-height,72px); }
  .v4-body .v4-home .v4-scene.v4-home-impact,
  .v4-body .v4-home .v4-scene.v4-home-contact { min-height:var(--v4-scene-height,100vh); }
  /* Continue the map's warm paper through the header clearance, then blend
     into the closing slogan. Red belongs to the footer below, not this seam. */
  .v4-body .v4-home .v4-scene.v4-home-contact {
    padding-top:var(--v4-header-height,72px);
    background:linear-gradient(180deg,#fff8f2 0,#fbfcf5 var(--v4-header-height,72px));
  }
  .v4-body .v4-home .v4-home-contact>.v4-home-slogan { margin:0; border:0; }
  .v4-body .v4-home .v4-home-contact>.v4-footer { margin:0; border:0; }
  /* Keep small flowers moving without scaling an entire viewport photograph. */
  .v4-body .v4-home-hero .v4-slide picture img { animation:none; }
  .v4-motion-ready [data-v4-scene] .v4-reveal { opacity:1; transform:none; transition:none; }
  .v4-body .v4-dialog::backdrop,.v4-body .v4-social-dialog::backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; }
}
