/* ===== Home hero v5: photoreal scene + depth parallax ============== */
.hg-hero--home { --px: 0; --py: 0; --sy: 0; padding: 0; min-height: 100svh; overflow: clip; isolation: isolate; background: #cfd9d6; }
.hg-scene { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; }

/* picture: static fallback, then the WebGL canvas takes over */
.hg-still, .hg-depth { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.hg-still img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: translate3d(calc(var(--px) * -16px), calc(var(--py) * -10px + var(--sy) * .1px), 0) scale(1.06); transition: transform .12s linear; animation: hgKen 30s ease-in-out infinite alternate; }
@keyframes hgKen { from { object-position: 48% 42%; } to { object-position: 54% 36%; } }
.hg-depth { z-index: 1; opacity: 0; transition: opacity .8s ease; display: block; }
.hg-depth.is-live { opacity: 1; }
.hg-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background:
  linear-gradient(180deg, rgba(20, 30, 26, .18) 0%, rgba(20, 30, 26, 0) 30%, rgba(20, 30, 26, 0) 62%, rgba(251, 250, 247, .55) 88%, var(--hg-paper) 100%),
  linear-gradient(90deg, rgba(246, 247, 243, .42) 0%, rgba(246, 247, 243, .18) 34%, transparent 60%); }

/* floating islands (DOM layers over the picture) */
.hg-floaters { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hg-fl { --d: .4; position: absolute; display: block; pointer-events: auto; text-decoration: none; color: var(--hg-ink); will-change: transform;
  transform: translate3d(calc(var(--px) * var(--d) * -120px), calc(var(--py) * var(--d) * -70px + var(--sy) * var(--d) * -1px), 0); transition: opacity .6s, filter .6s; }
.hg-fl img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(10, 24, 18, .35)); transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s; animation: hgBob 9s ease-in-out var(--bobd, 0s) infinite; }
@keyframes hgBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.hg-fl__tag { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); white-space: nowrap; display: grid; gap: 1px; padding: 8px 13px; border-radius: 12px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 14px 34px -16px rgba(18, 36, 26, .5); opacity: 0; transition: opacity .35s, transform .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; text-align: center; }
.hg-fl__tag b { font-family: var(--hg-head); font-weight: var(--hg-head-weight); font-size: .92rem; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.hg-fl__tag b i { font-style: normal; font-family: var(--hg-brush); font-weight: 400; font-size: 1.02rem; color: var(--hg-cinnabar); letter-spacing: .06em; }
.hg-fl__tag small { font-size: .68rem; color: var(--hg-ink-2); letter-spacing: .04em; }
.hg-fl:hover, .hg-fl.is-up { z-index: 20; }
.hg-fl:hover img, .hg-fl.is-up img { transform: scale(1.22) translateY(-8px); filter: drop-shadow(0 50px 60px rgba(10, 24, 18, .5)) brightness(1.05) saturate(1.08); animation-play-state: paused; }
.hg-fl:hover .hg-fl__tag, .hg-fl.is-up .hg-fl__tag { opacity: 1; transform: translate(-50%, 0); }
.hg-floaters:has(.hg-fl:hover) .hg-fl:not(:hover) { opacity: .8; }
/* desktop placement (islands borrowed from the tall render, placed in the wide sky) */
.hg-fl--1 { --d: .5; left: 6%; top: 7%; width: clamp(150px, 15vw, 300px); }
.hg-fl--2 { --d: .36; left: 71%; top: 9%; width: clamp(120px, 12vw, 240px); }
.hg-fl--3 { --d: .22; left: 50%; top: 15%; width: clamp(48px, 5vw, 96px); opacity: .9; }

/* rendered 3-D mountains: taller assets, placed in the sky */
.hg-fl--mt.hg-fl--1 { left: 63% !important; top: 8% !important; width: clamp(200px, 22vw, 400px) !important; }
.hg-fl--mt.hg-fl--2 { left: 8%; top: 8%; width: clamp(110px, 11vw, 220px); }
.hg-fl--mt.hg-fl--3 { left: 84%; top: 14%; width: clamp(80px, 8vw, 160px); }
@media (max-width: 900px) {
  .hg-fl--mt.hg-fl--1 { left: 50% !important; top: 5% !important; width: 48vw !important; }
  .hg-fl--mt.hg-fl--2 { left: 4%; top: 10%; width: 24vw; }
  .hg-fl--mt.hg-fl--3 { display: none; }
}

/* real 3-D layer */
.hg3d { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s ease; }
.hg3d.is-live { opacity: 1; }
.hg3d-labels { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hg3d-tag { position: absolute; left: 0; top: 0; pointer-events: auto; white-space: nowrap; display: grid; gap: 1px; padding: 8px 13px; border-radius: 12px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 14px 34px -16px rgba(18, 36, 26, .5); opacity: 0; transition: opacity .3s; text-decoration: none; color: var(--hg-ink); text-align: center; }
.hg3d-tag.is-on { opacity: 1; }
.hg3d-tag b { font-family: var(--hg-head); font-weight: var(--hg-head-weight); font-size: .92rem; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.hg3d-tag b i { font-style: normal; font-family: var(--hg-brush); font-weight: 400; font-size: 1.02rem; color: var(--hg-cinnabar); letter-spacing: .06em; }
.hg3d-tag small { font-size: .68rem; color: var(--hg-ink-2); letter-spacing: .04em; }

/* grain */
.hg-grain { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* copy */
.hg-hero--home .hg-hero__in { position: relative; z-index: 6; padding-top: clamp(120px, 18vh, 170px); pointer-events: none; }
.hg-hero--home .hg-hero__in a, .hg-hero--home .hg-hero__in button { pointer-events: auto; }
.hg-hero--home .hg-kicker { gap: 12px; margin-bottom: 18px; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.hg-kicker__t { animation: hgFade .8s ease .15s backwards; }
.hg-hero--home h1 { font-family: var(--hg-serif); font-weight: 500; letter-spacing: -.015em; font-size: clamp(3.2rem, 8.6vw, 7.8rem); line-height: .96; max-width: none; margin-left: -.03em; color: #fff; text-shadow: 0 2px 40px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25); }
.hg-w { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hg-w > span { display: inline-block; animation: hgRise 1.1s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
.hg-w--2 > span { animation-delay: .32s; }
.hg-hero--home h1 em { font-style: italic; font-weight: 400; color: #fff; }
.hg-hero--home .hg-lede { margin-top: 24px; max-width: 24rem; color: #fff; font-weight: 500; font-size: clamp(1rem, 1.3vw, 1.16rem); text-shadow: 0 1px 16px rgba(0, 0, 0, .45); animation: hgFade .9s ease .55s backwards; }
.hg-hero--home .hg-ctas { animation: hgFade .9s ease .7s backwards; }
.hg-hero--home .hg-btn { background: #fff; color: var(--hg-ink); }
.hg-hero--home .hg-btn:hover { background: var(--hg-sand-2); color: var(--hg-ink); }
.hg-hero--home .hg-btn--ghost { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .5); }
.hg-hero--home .hg-btn--ghost:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.hg-hero__seal { display: flex; align-items: center; gap: 14px; margin: 32px 0 0; }
.hg-hero__seal .hg-seal { width: 52px; height: 52px; animation: hgStamp .45s cubic-bezier(.2, 1.4, .3, 1) 1.05s backwards; }
.hg-hero__seal .hg-seal__ch { font-size: 16px; }
.hg-hero__hint { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 10px rgba(0, 0, 0, .4); animation: hgFade 1s ease 1.4s backwards; }
@keyframes hgFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hgRise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes hgStamp { from { opacity: 0; transform: rotate(-14deg) scale(1.6); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }

/* vertical side text */
.hg-side { position: absolute; z-index: 6; left: 18px; top: 50%; transform: rotate(180deg) translateY(50%); writing-mode: vertical-rl; font-size: .64rem; letter-spacing: .32em; text-transform: uppercase; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 8px rgba(0, 0, 0, .4); pointer-events: none; white-space: nowrap; }

/* facts columns + explore */
.hg-hero__foot { position: relative; z-index: 6; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-top: 40px; padding-bottom: 42px; }
.hg-facts3 { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 48px; }
.hg-facts3 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hg-ink-2); font-weight: 600; animation: hgFade 1s ease 1.2s backwards; }
.hg-facts3 ul:nth-child(2) { animation-delay: 1.35s; } .hg-facts3 ul:nth-child(3) { animation-delay: 1.5s; }
.hg-explore { font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--hg-ink); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--hg-ink); animation: hgFade 1s ease 1.6s backwards; }
.hg-explore:hover { color: var(--hg-sand); border-color: var(--hg-sand); }

/* mobile: islands glued to the tall picture, labels always on */
@media (max-width: 900px) {
  .hg-still img { object-position: 50% 30%; }
  .hg-floaters { left: 50%; top: 50%; inset: auto; height: 100%; aspect-ratio: 828 / 1108; min-width: 100%; transform: translate(-50%, -50%); }
  .hg-fl--1, .hg-fl--2, .hg-fl--3 { left: var(--mx); top: var(--my); width: var(--mw); opacity: 1; }
  .hg-fl__tag { opacity: 1; transform: translate(-50%, 0); padding: 5px 9px; border-radius: 9px; }
  .hg-fl__tag b { font-size: .72rem; gap: 6px; } .hg-fl__tag b i { font-size: .84rem; } .hg-fl__tag small { display: none; }
  .hg-fl--3 .hg-fl__tag { display: none; }
  .hg-hero--home .hg-hero__in { padding-top: 46vh; }
  .hg-hero--home h1 { font-size: clamp(2.9rem, 13vw, 4.4rem); }
  .hg-hero--home .hg-lede { max-width: 20rem; }
  .hg-hero__hint, .hg-side { display: none; }
  .hg-hero__foot { flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 28px; }
  .hg-facts3 { grid-template-columns: 1fr; gap: 6px; }
  .hg-facts3 ul:nth-child(n+2) { display: none; }
  .hg-veil { background: linear-gradient(180deg, rgba(20, 30, 26, .12) 0%, rgba(20, 30, 26, 0) 25%, rgba(20, 30, 26, .35) 55%, rgba(251, 250, 247, .9) 86%, var(--hg-paper) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hg-fl img { animation: none; }
  .hg-w > span, .hg-lede, .hg-ctas, .hg-kicker__t, .hg-hero__seal .hg-seal, .hg-hero__hint, .hg-facts3 ul, .hg-explore { animation: none; }
}
/* fail-safe: page hidden at start, or 3 s passed → final state */
.hg-static .hg-w > span, .hg-static .hg-lede, .hg-static .hg-ctas, .hg-static .hg-kicker__t, .hg-static .hg-hero__seal .hg-seal, .hg-static .hg-hero__hint, .hg-static .hg-facts3 ul, .hg-static .hg-explore { animation-duration: 0s !important; animation-delay: 0s !important; }