:root{color-scheme:dark;--cream:#fff8e7;--gold:#e9d5a6;--green:#112e25}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#040b0a}
body{display:grid;place-items:center;font-family:Arial,Helvetica,sans-serif}
[hidden]{display:none!important}
.billboard{position:relative;width:min(100vw,177.77778vh);height:min(100vh,56.25vw);aspect-ratio:16/9;container-type:size;isolation:isolate;overflow:hidden;background:#324f3a;color:var(--cream);--font-scale:1;--overlay:.35;--accent:#D9BB74}
.scene-world{position:absolute;inset:-3%;overflow:hidden}
.world-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:saturate(1.055) contrast(1.065);
  transform:scale(1.055) translate3d(0,0,0);
  will-change:opacity;
  transition:opacity 1s;
}

.billboard[data-scene="hero"] .world-image,
.billboard[data-scene="education_zones_a"] .world-image,
.billboard[data-scene="education_zones_b"] .world-image,
.billboard[data-scene="route"] .world-image,
.billboard[data-scene="facilities"] .world-image,
.billboard[data-scene="conservation"] .world-image{
  transform:scale(1.055) translate3d(0,0,0);
}
.illumination{pointer-events:none;position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,245,211,.09) 0%,transparent 38%,rgba(20,33,21,.12) 100%);mix-blend-mode:soft-light}
.readability-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(4,23,19,calc(.69 + var(--overlay) * .40)) 0%,rgba(5,24,20,.58) 27%,rgba(7,26,20,0) 67%),linear-gradient(90deg,rgba(4,20,17,.25),transparent 58%),linear-gradient(180deg,rgba(6,23,19,.34) 0%,transparent 25%)}
/* Three original assets, three visually equal logo heights; no surrounding white cards. */
.identity{position:absolute;left:4.8%;right:4.8%;top:4.8%;display:flex;justify-content:space-between;align-items:flex-start;gap:2%;z-index:5}
.logo-lockup{display:flex;align-items:flex-start;gap:clamp(12px,1.3cqw,22px)}
.logo-item{display:flex;align-items:flex-start;justify-content:center;flex-shrink:0;height:clamp(34px,4.15cqw,78px)}
.logo-item img{display:block;height:100%;width:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.38))}
.location-tag{display:flex;align-items:center;gap:14px;padding-top:0;text-align:right;letter-spacing:.24em;font-size:clamp(11px,1.15cqw,21px);font-weight:650;text-shadow:0 2px 15px rgba(0,0,0,.75)}
.location-tag small{font-size:.44em;display:block;margin-top:10px;letter-spacing:.18em;font-weight:550}
.location-line{display:block;background:var(--accent);height:2px;width:clamp(12px,2.8cqw,56px)}
.narrative{position:absolute;left:6%;right:5%;bottom:15%;z-index:3;min-height:25%;text-shadow:0 2px 22px rgba(0,0,0,.5)}
.scene{position:absolute;left:0;bottom:0;width:100%;max-height:100%;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .65s ease,transform .65s ease}
.scene.active{opacity:1;transform:translateY(0);pointer-events:auto}
.scene-kicker{font-size:clamp(11px,1cqw,19px);letter-spacing:.24em;font-weight:bold;color:#f4e1b8;margin:0 0 1.6cqw;display:flex;gap:1.1cqw;align-items:center}
.scene-kicker:before{content:"";width:clamp(20px,3cqw,56px);height:2px;background:var(--accent)}
.title{margin:0 0 1.3cqw;font-weight:400;max-width:14ch;line-height:.94;letter-spacing:-.03em;font-size:clamp(43px,calc(6.4cqw * var(--font-scale)),118px);font-family:Georgia,"Times New Roman",serif;text-wrap:balance}
.title-secondary{font-size:clamp(34px,calc(4.6cqw * var(--font-scale)),88px);max-width:20ch}
.subtitle{max-width:60%;font-size:clamp(14px,calc(1.26cqw * var(--font-scale)),25px);line-height:1.46;letter-spacing:.012em;margin:0;color:#fff9ea}
.scene-meta{display:flex;gap:1cqw;align-items:center;font-size:clamp(11px,.9cqw,18px);font-weight:650;letter-spacing:.045em;margin-top:1.8cqw;color:#f5e9cd}
.scene-meta p{margin:0}
.accent-rail{background:var(--accent);width:clamp(18px,2.5cqw,44px);height:2px;flex:none}
.feature-stack{position:relative;max-width:60%;min-height:clamp(120px,13.5cqw,260px)}
.feature{position:absolute;left:0;bottom:0;max-width:100%;opacity:0;transform:translateY(14px);transition:opacity .65s,transform .65s}
.feature.visible{opacity:1;transform:translateY(0)}
.feature-index{color:#eddaa5;font:500 clamp(18px,2.2cqw,40px) Georgia,serif}
.feature-title{margin:.45cqw 0 .65cqw;font:400 clamp(24px,3.3cqw,63px)/1.1 Georgia,serif}
.feature-description{margin:0;max-width:57ch;font-size:clamp(13px,1.2cqw,23px);line-height:1.4}
.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75cqw 1.7cqw;max-width:90%;margin-top:2cqw}
.info-item{display:flex;align-items:baseline;gap:1.1cqw;padding:.8cqw 0;border-top:1px solid rgba(255,255,255,.42);font-size:clamp(13px,1.1cqw,22px);line-height:1.3}
.info-item b{font:400 clamp(15px,1.5cqw,30px) Georgia,serif;color:#e9d5a6;flex:none}
.info-item p{margin:0}
.disclaimer{font-size:clamp(9px,.65cqw,14px);letter-spacing:.12em;margin:1cqw 0 0}
.benefit-grid{display:grid;grid-template-columns:repeat(2,max-content);column-gap:3cqw;row-gap:1.1cqw;margin-top:2.2cqw;font-size:clamp(12px,1.12cqw,22px)}
.benefit-grid p{margin:0;padding-left:1.1cqw;border-left:2px solid var(--accent)}
.footer{position:absolute;left:5%;right:5%;bottom:6%;z-index:5;display:flex;gap:3%;align-items:center;font-size:clamp(9px,.7cqw,15px);font-weight:500;letter-spacing:.19em;color:#f3f2dd}
.footer-signature{display:none}.footer-signature b{font-weight:750}
.timeline{margin-left:auto;width:clamp(70px,12cqw,210px);height:2px;background:rgba(249,242,211,.4);overflow:hidden}
.bar{width:0%;height:100%;background:var(--accent)}
.footer-scene{font-variant-numeric:tabular-nums;white-space:nowrap}
.connection-status{position:absolute;right:5%;top:18%;z-index:10;font-size:clamp(12px,1cqw,18px);background:rgba(18,35,28,.83);padding:.7cqw 1cqw;border-radius:8px}
.idle-scene{position:absolute;left:6%;bottom:16%;font:400 5cqw Georgia,serif;text-shadow:0 3px 18px #000}
@media(max-width:700px){.identity{left:4%;right:4%;top:4%}.logo-lockup{gap:7px}.logo-item{height:clamp(19px,5cqw,29px)}.location-tag{font-size:clamp(8px,1.6cqw,13px)}.location-tag small{margin-top:4px}.location-line{display:none}.narrative{left:6%;right:5%;bottom:15%}.title{font-size:clamp(18px,6.5cqw,44px)}.title-secondary{font-size:4.6cqw}.subtitle{max-width:85%}.feature-stack{max-width:85%}.feature-title{font-size:3.5cqw}.feature-description{font-size:1.4cqw}.info-grid{max-width:100%}.info-item{font-size:1.3cqw}.footer-signature{max-width:56%;white-space:normal}}
@media(prefers-reduced-motion:reduce){.world-image,.scene,.feature{transition:none!important}}


/* BEGIN MOVING CLOUD PATCH v2 -- Cloud texture over upper soft canopy ONLY. */
.cloud-banks {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2; /* Remains behind logo and headings. */
  isolation: isolate;
}
.cloud-bank {
  position: absolute;
  display: block;
  top: 0;
  left: -3%;
  width: 106%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: url('./awan-tekstur.webp') center / 100% 100% no-repeat;
  transform-origin: center;
  will-change: transform;
}
.cloud-bank--near {
  opacity: .87;
  animation: naturalCloudNear 18s ease-in-out infinite alternate;
}
.cloud-bank--far {
  opacity: .32;
  filter: blur(2px);
  animation: naturalCloudFar 24s ease-in-out infinite alternate-reverse;
}
@keyframes naturalCloudNear {
  from { transform: translate3d(-3%, 0, 0); }
  to   { transform: translate3d(6%, -1%, 0); }
}
@keyframes naturalCloudFar {
  from { transform: translate3d(4%, -2%, 0) scaleY(.92); }
  to   { transform: translate3d(-5%, 1%, 0) scaleY(.92); }
}
@media (prefers-reduced-motion: reduce) {
  .cloud-bank { animation: none !important; }
}
/* END MOVING CLOUD PATCH v2 */

/* BEGIN EDELWEIS UPPER CLOUDS V3 */
/* Real textured cloud deck from the top edge downward. All site text and logos stay above it. */
.atmosphere-clouds-v3 {
  position: absolute;
  inset: 0 0 auto 0;
  height: 32%;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
  isolation: isolate;
}
.atmosphere-clouds-v3 .cloud-deck-v3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10%;
  width: 120%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.atmosphere-clouds-v3 .cloud-deck-v3-near {
  background-image: url('../brand/cloud-deck-v3-near.webp');
  opacity: .92;
  animation: edelweisCloudsV3Near 16s ease-in-out infinite alternate;
}
.atmosphere-clouds-v3 .cloud-deck-v3-far {
  background-image: url('../brand/cloud-deck-v3-far.webp');
  opacity: .65;
  animation: edelweisCloudsV3Far 21s ease-in-out infinite alternate-reverse;
}
@keyframes edelweisCloudsV3Near {
  from { transform: translate3d(-4.5%,0,0); }
  to { transform: translate3d(4.5%,-1%,0); }
}
@keyframes edelweisCloudsV3Far {
  from { transform: translate3d(4%,0,0); }
  to { transform: translate3d(-4%,1%,0); }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere-clouds-v3 .cloud-deck-v3 { animation: none !important; }
}
/* END EDELWEIS UPPER CLOUDS V3 */

/* EDELWEIS CLOUD 14% PATCH -- keep original cloud-texture vertical scale */
/* Disable the obsolete V2 clouds so layers cannot stack. */
.cloud-banks { display: none !important; }
/* Red-line boundary is about 14% below the top of the billboard. */
.atmosphere-clouds-v3 {
  height: 14% !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,.85) 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,.85) 84%, transparent 100%);
}
/* 32 / 14 = 2.285714; crop original 32%-high clouds rather than compressing them. */
.atmosphere-clouds-v3 .cloud-deck-v3 {
  bottom: auto !important;
  height: 228.5714286% !important;
}
/* END EDELWEIS CLOUD 14% PATCH */

/* EDELWEIS LAYOUT REFINEMENT V1 - START */
/* Hide the old map warning without modifying CMS content or HTML templates. */
.billboard .disclaimer { display: none !important; }

/* Keep the content frames symmetrical: same 6% left/right spacing. */
.billboard[data-scene="route"] .narrative,
.billboard[data-scene="facilities"] .narrative,
.billboard[data-scene="conservation"] .narrative { right: 6%; }

/* Education: feature numbers and captions follow the large heading directly. */
.billboard .scene[data-scene="education_zones_a"] .feature,
.billboard .scene[data-scene="education_zones_b"] .feature {
  top: 0;
  bottom: auto;
}

/* Route: 3 balanced columns from the 6% left edge to 6% right edge. */
.billboard .route-grid {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2cqw;
  margin-top: 1.15cqw;
}
.billboard .route-grid .info-item {
  min-width: 0;
  gap: .7cqw;
  padding: .7cqw 0;
}
.billboard .route-grid .info-item p { min-width: 0; overflow-wrap: break-word; }

/* Facilities: 4 short columns, 2 rows. 07 and 08 occupy the right-most column. */
.billboard .facility-grid {
  width: 100%;
  max-width: none;
  grid-template-columns: 1.2fr .88fr 1fr 1.32fr;
  column-gap: 1.5cqw;
  row-gap: .35cqw;
  margin-top: 1.15cqw;
}
.billboard .facility-grid .info-item {
  min-width: 0;
  gap: .65cqw;
  padding: .65cqw 0;
  font-size: clamp(11px, .99cqw, 19px);
}
.billboard .facility-grid .info-item p { min-width: 0; overflow-wrap: break-word; }
.billboard .facility-grid .info-item:nth-child(1) { grid-column: 1; grid-row: 1; }
.billboard .facility-grid .info-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.billboard .facility-grid .info-item:nth-child(3) { grid-column: 3; grid-row: 1; }
.billboard .facility-grid .info-item:nth-child(4) { grid-column: 1; grid-row: 2; }
.billboard .facility-grid .info-item:nth-child(5) { grid-column: 2; grid-row: 2; }
.billboard .facility-grid .info-item:nth-child(6) { grid-column: 3; grid-row: 2; }
.billboard .facility-grid .info-item:nth-child(7) { grid-column: 4; grid-row: 1; }
.billboard .facility-grid .info-item:nth-child(8) { grid-column: 4; grid-row: 2; }

/* Conservation: all four benefit statements on one balanced line. */
.billboard .benefit-grid {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 1.45cqw;
  row-gap: .75cqw;
  margin-top: 1.55cqw;
  font-size: clamp(11px, 1.05cqw, 20px);
  align-items: start;
}
.billboard .benefit-grid p {
  min-width: 0;
  overflow-wrap: normal;
  white-space: normal;
  padding-left: .75cqw;
}
.billboard .benefit-grid p:last-child { justify-self: end; }

/* At narrow widths, preserve legibility instead of overlapping. */
@media (max-width: 900px) {
  .billboard .facility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2cqw;
  }
  .billboard .facility-grid .info-item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .billboard .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billboard .benefit-grid p:last-child { justify-self: start; }
}
/* EDELWEIS LAYOUT REFINEMENT V1 - END */

/* EDELWEIS FINAL LINE AND SPACING PATCH - START */
/* The horizontal lines under the last row match the thin dividers above. */
.billboard .route-grid .info-item:nth-child(n+4) {
  border-bottom: 1px solid rgba(255, 255, 255, .42);
  padding-bottom: .78cqw;
}
/* Facilities are visually arranged 01/02/03/07 on row one,
   04/05/06/08 on row two by the previous layout patch. */
.billboard .facility-grid .info-item:nth-child(4),
.billboard .facility-grid .info-item:nth-child(5),
.billboard .facility-grid .info-item:nth-child(6),
.billboard .facility-grid .info-item:nth-child(8) {
  border-bottom: 1px solid rgba(255, 255, 255, .42);
  padding-bottom: .70cqw;
}
/* Conservation: the four items stay in order on a single row.
   Spacing is around half of the previous first-to-second gap. */
.billboard .benefit-grid {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 7cqw;
  width: max-content;
  max-width: 100%;
}
.billboard .benefit-grid > p {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  justify-self: auto;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .billboard .benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1cqw 2cqw;
    width: 100%;
  }
  .billboard .benefit-grid > p { white-space: normal; }
  /* On narrow screens, 4-column facilities become 2 columns in source order. */
  .billboard .facility-grid .info-item:nth-child(4),
  .billboard .facility-grid .info-item:nth-child(5),
  .billboard .facility-grid .info-item:nth-child(6) {
    border-bottom: 0;
  }
  .billboard .facility-grid .info-item:nth-child(7) {
    border-bottom: 1px solid rgba(255, 255, 255, .42);
  }
}
/* EDELWEIS FINAL LINE AND SPACING PATCH - END */

/* EDELWEIS BILLBOARD MEDIA V5: staged photographs blend with no abrupt src flash. */
.billboard .scene-world .world-image-stage-v5 {
  z-index: 1;
  opacity: 1;
  pointer-events: none;
  transition: opacity 1150ms ease-in-out !important;
}
.billboard .atmosphere-clouds-v3 {
  transition: opacity 1050ms ease-in-out !important;
}
.billboard[data-media-clouds-v5="off"] .atmosphere-clouds-v3,
.billboard[data-media-clouds-v5="off"] .cloud-banks {
  opacity: 0 !important;
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .billboard .scene-world .world-image-stage-v5,
  .billboard .atmosphere-clouds-v3 { transition-duration: 0ms !important; }
}

/* EDELWEIS_WORLD_CROSSFADE_V6 — preload then blend; no instantaneous src swap. */
.billboard .scene-world > .world-image,
.billboard .scene-world > .world-image-crossfade-v6 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.055) contrast(1.065);
  transform: scale(1.055) translate3d(0,0,0);
  backface-visibility: hidden;
  will-change: opacity;
}
.billboard .scene-world > .world-image-crossfade-v6 {
  pointer-events: none;
  opacity: 0;
  transition: opacity 1800ms cubic-bezier(.45,0,.2,1);
}
/* Keep both layers stationary and identical during scene changes. */
.billboard .scene-world > .world-image { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .billboard .scene-world > .world-image-crossfade-v6 { transition-duration: 0ms !important; }
}

/* EDELWEIS_EXTRA_LIVE_V10: opt-in scenes. No CSS modification of scenes 01–06. */
.billboard .scene.extra-scene-v10 {
  max-height:none;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:2.2cqw;
  align-items:end;
}
.billboard .extra-scene-v10 .extra-v10-copy{min-width:0;}
.billboard .extra-scene-v10 .extra-v10-heading{
  font:400 clamp(33px,calc(4.2cqw * var(--font-scale)),79px)/1.04 Georgia,'Times New Roman',serif;
  margin:0 0 1.1cqw;letter-spacing:-.025em;overflow-wrap:break-word;
}
.billboard .extra-scene-v10 .extra-v10-description{
  font-size:clamp(14px,calc(1.24cqw * var(--font-scale)),25px);
  max-width:52ch;line-height:1.43;margin:0;overflow-wrap:break-word;white-space:pre-wrap;
}
.billboard .extra-scene-v10 .extra-v10-ordering{margin-top:1.6cqw;border-left:2px solid var(--accent);padding-left:1cqw;}
.billboard .extra-scene-v10 .extra-v10-ordering small{display:block;color:var(--accent);font-size:clamp(10px,.69cqw,15px);font-weight:750;letter-spacing:.19em;}
.billboard .extra-scene-v10 .extra-v10-ordering p{font-size:clamp(13px,1.0cqw,22px);white-space:pre-wrap;line-height:1.35;margin:.45cqw 0 0;overflow-wrap:anywhere;}
.billboard .extra-v10-gallery{position:relative;min-width:0;display:flex;justify-content:flex-end;align-items:flex-end;padding:0 0 .4cqw;gap:.3cqw;}
.billboard .extra-v10-gallery .extra-v10-product{
  display:block;max-width:none;width:32%;height:clamp(105px,17cqw,315px);object-fit:cover;
  border:3px solid rgba(249,249,236,.93);border-radius:clamp(5px,.55cqw,12px);
  background:#dfe6d7;box-shadow:0 9px 23px #0b19167d;transform:rotate(-4deg);
}
.billboard .extra-v10-gallery .extra-v10-product:nth-child(2){transform:translateY(-.7cqw) rotate(2.5deg);}
.billboard .extra-v10-gallery .extra-v10-product:nth-child(3){transform:rotate(5deg);}
.billboard .extra-v10-gallery.count-1 .extra-v10-product{width:55%;}
.billboard .extra-v10-gallery.count-2 .extra-v10-product{width:43%;}
.billboard .extra-scene-v10[data-scene="extra_thanks"] .extra-v10-copy,
.billboard .extra-scene-v10[data-scene="extra_announcement"] .extra-v10-copy {grid-column:1 / -1;max-width:76%;}
@media(max-width:700px){
  .billboard .extra-v10-gallery .extra-v10-product{height:16cqw;border-width:1px;}
  .billboard .extra-scene-v10 .extra-v10-heading{font-size:3.6cqw;}
  .billboard .extra-scene-v10 .extra-v10-description{font-size:1.4cqw;}
  .billboard .extra-scene-v10 .extra-v10-ordering p{font-size:1.25cqw;}
}

/* EDELWEIS_LEGIBILITY_V11_BEGIN
   Restore an opaque, reliable foreground readability layer, without touching
   source images, clouds, photo crossfade or scene scheduling.
   A separate RGBA overlay preserves the existing CMS --overlay control.
*/
.billboard > .scene-world {
  z-index: 0 !important;
}
.billboard > .illumination,
.billboard > .grain {
  z-index: 1;
}
.billboard > .readability-shade {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(to top,
      rgba(2, 17, 13, .75) 0%,
      rgba(2, 17, 13, .70) 17%,
      rgba(2, 17, 13, .55) 32%,
      rgba(2, 17, 13, .28) 51%,
      rgba(2, 17, 13, .07) 66%,
      rgba(2, 17, 13, 0) 79%),
    linear-gradient(to top,
      rgba(2, 17, 13, var(--overlay, .35)) 0%,
      rgba(2, 17, 13, .09) 42%,
      transparent 70%),
    linear-gradient(to right,
      rgba(3, 16, 13, .20),
      transparent 78%) !important;
}
.billboard > .narrative {
  z-index: 3 !important;
}
.billboard > .identity,
.billboard > .footer {
  z-index: 5 !important;
}
/* EDELWEIS_LEGIBILITY_V11_END */