/* Logo-inspired cinematic hero. The photographs below remain the real project work. */
.cinematic-hero {
  position: relative;
  height: 100svh;
  padding: 0;
  background: #233627;
}
.cinematic-hero.has-tree-motion { height: 230svh; }
.tree-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #233627;
}
.tree-scene, .tree-wide, .tree-close, .tree-shade, .tree-fog { position: absolute; inset: 0; }
.tree-scene { z-index: -2; overflow: hidden; }
.tree-wide { display: block; transform-origin: 50% 72%; }
.tree-wide-picture { display: block; width: 100%; height: 100%; }
/* Reuse the loaded hero artwork, masking out the stationary tree and landscape.
   Only this shallow sky strip is composited; no video, filters or frame loop. */
.tree-cloud-sky {
  display: none; position: absolute; top: 0; left: 0; width: 100%; height: 0;
  overflow: hidden; pointer-events: none; contain: layout paint;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}
.cloud-motion-ready .tree-cloud-sky { display: block; }
.tree-cloud-drift {
  --cloud-travel: 6%;
  --cloud-scale: 1.16;
  position: absolute; inset: 0; background-repeat: no-repeat;
  animation: tree-cloud-drift 48s linear -6s infinite alternate;
  animation-play-state: paused; transform-origin: center top;
}
.clouds-running .tree-cloud-drift { animation-play-state: running; }
@keyframes tree-cloud-drift {
  from { transform: translate3d(calc(0% - var(--cloud-travel)), 0, 0) scaleX(var(--cloud-scale)); }
  to { transform: translate3d(var(--cloud-travel), 0, 0) scaleX(var(--cloud-scale)); }
}
/* Soft mist wisps travel across the existing valley fog. Keep the tree and
   hills stationary: moving another copy of the photo also moved the hills. */
.tree-landscape-mist {
  display: none; position: absolute; left: 0; width: 100%; height: 0;
  overflow: hidden; pointer-events: none;
}
.fog-motion-ready .tree-landscape-mist { display: block; }
.tree-mist-mask {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 var(--fog-left-feather), transparent var(--fog-left), transparent var(--fog-right), #000 var(--fog-right-feather));
  mask-image: linear-gradient(to right, #000 var(--fog-left-feather), transparent var(--fog-left), transparent var(--fog-right), #000 var(--fog-right-feather));
}
.tree-fog-wisp {
  position: absolute; inset: 0; pointer-events: none;
  /* The wisps feather themselves vertically. A second outer mask used to
     erase most of their already faint edges on the narrow phone fog band. */
  background-image:
    radial-gradient(ellipse 22% 42% at 18% 43%, rgba(255, 248, 228, .98) 12%, rgba(249, 242, 224, .72) 38%, transparent 80%),
    radial-gradient(ellipse 16% 28% at 43% 66%, rgba(251, 245, 227, .9) 10%, rgba(246, 241, 225, .48) 42%, transparent 78%),
    radial-gradient(ellipse 27% 36% at 78% 34%, rgba(244, 243, 230, .96) 12%, rgba(240, 240, 226, .65) 40%, transparent 80%);
  background-repeat: no-repeat;
  transform-origin: center; opacity: 0;
  animation: tree-fog-drift 8s linear infinite;
  animation-play-state: paused;
}
.tree-fog-wisp--second { animation-delay: -4s; }
.clouds-running .tree-fog-wisp { animation-play-state: running; }
@keyframes tree-fog-drift {
  0% { opacity: 0; transform: translate3d(-18%, 0, 0) scaleX(1.4); }
  18%, 72% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(18%, 0, 0) scaleX(1.4); }
}
@media (max-width: 600px) {
  /* Constant movement is visible within seconds on a narrow phone screen. */
  .tree-cloud-drift { --cloud-travel: 10%; --cloud-scale: 1.24; animation-duration: 36s; }
  .tree-fog-wisp { animation-duration: 6.5s; }
  .tree-fog-wisp--second { animation-delay: -3.25s; }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-hero .tree-cloud-sky,
  .cinematic-hero .tree-landscape-mist { display: none !important; }
  .cinematic-hero .tree-cloud-drift,
  .cinematic-hero .tree-fog-wisp { animation: none; }
}
.tree-wide img, .tree-close {
  display: block;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
.tree-close { opacity: 0; transform-origin: 50% 72%; }
.has-tree-motion .tree-wide, .has-tree-motion .tree-close { will-change: transform, opacity; backface-visibility: hidden; }
.has-tree-motion .tree-fog, .has-tree-motion .tree-copy, .has-tree-motion .tree-signpost { will-change: transform, opacity; }
.tree-shade {
  z-index: -1;
  background: linear-gradient(90deg, rgba(12,28,18,.53), transparent 52%),
    linear-gradient(180deg, rgba(13,27,21,.40), transparent 28%, transparent 66%, rgba(11,26,17,.6));
}
.tree-fog {
  z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 18%, rgba(224,228,210,.48) 50%, rgba(230,230,215,.35) 74%, transparent);
}
.tree-copy {
  position: absolute; bottom: 16%; left: 6.4%;
  width: min(35%, 490px); color: #f7f5ec;
}
.tree-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .19em; text-transform: uppercase;
  margin-bottom: 20px; color: #e4e8d6;
}
.tree-copy h1 {
  font-family: 'Playfair Display', Georgia, serif; font-size: clamp(46px, 5.3vw, 80px);
  font-weight: 700; line-height: 1.06; letter-spacing: -.045em;
  margin: 0 0 22px;
}
.tree-copy h1 span { display: block; }
.tree-intro { font-size: 14px; line-height: 1.65; max-width: 310px; color: #f1f2e8; margin-bottom: 26px; }
.tree-cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 26px;
  background: #f3efdf; color: #243a29; border: 1px solid #f3efdf; border-radius: 4px;
  padding: 14px 19px; text-decoration: none; font-size: 12px; font-weight: 600;
  transition: background .2s, transform .2s;
}
.tree-cta:hover { background: #fffdf5; transform: translateY(-2px); }
.tree-cta svg { width: 16px; height: 16px; }
.tree-scroll {
  position: absolute; bottom: 29px; left: 6.4%; display: flex; align-items: center; gap: 12px;
  color: #f3f5e9; font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
}
.tree-scroll svg { width: 14px; height: 24px; }
.tree-details { position: absolute; bottom: 31px; right: 6.4%; color: #e2e7d8; text-align: right; }
.tree-details a { font-size: 10px; letter-spacing: .08em; color: inherit; text-decoration: none; }
.tree-details a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tree-progress { width: 110px; height: 1px; background: rgba(244,245,230,.3); margin: 12px 0 0 auto; }
.tree-progress span { display: block; width: 100%; height: 100%; background: #f3f5e9; transform: scaleX(0); transform-origin: left; }
.tree-signpost {
  position: absolute; left: 50%; top: 53%; width: min(34vw, 460px);
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 30px;
  transform: translate(-50%, -50%); opacity: 0; visibility: hidden;
  transform-origin: center; z-index: 2;
}
.signpost-kicker {
  color: #fff5dc; font-size: 10px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; text-shadow: 0 2px 10px #102017; margin-bottom: 6px;
}
.tree-sign {
  --sign-angle: -8deg; --sign-offset: 20px;
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 4; container-type: inline-size; color: #213126; text-decoration: none;
  transform: translateX(var(--sign-offset)) rotate(var(--sign-angle));
  filter: drop-shadow(0 9px 5px rgba(12,15,8,.55));
  transition: transform .22s ease, filter .22s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Crop the artwork's transparent padding so a taller plank provides real text space. */
.tree-sign-art { position: absolute; left: 0; top: -27%; width: 100%; height: 160%; object-fit: fill; pointer-events: none; }
.tree-sign--left .tree-sign-art { transform: scaleX(-1); }
.tree-sign--about { width: 78%; aspect-ratio: 3.7; --sign-angle: 9deg; --sign-offset: -36px; }
.tree-sign--reviews { width: 90%; --sign-angle: -4deg; --sign-offset: 38px; }
.tree-sign--services { width: 105%; --sign-angle: 6deg; --sign-offset: -16px; }
.tree-sign--work { width: 88%; --sign-angle: -7deg; --sign-offset: 24px; }
.tree-sign-type { position: relative; display: block; width: 74%; flex-shrink: 0; text-align: center; margin: 0 16% 3px 10%; text-shadow: 0 1px 0 rgba(255,236,192,.52); }
.tree-sign--left .tree-sign-type { margin-right: 10%; margin-left: 16%; }
.tree-sign-title { display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(28px,14.5cqw,68px); letter-spacing: -.045em; line-height: .98; white-space: nowrap; }
.tree-sign-caption { display: block; color: #162b1d; font-size: clamp(14px,3.6cqw,17px); font-weight: 700; line-height: 1.2; letter-spacing: .01em; text-transform: none; margin-top: 5px; white-space: nowrap; }
@media (hover: hover) {
  .tree-sign:hover { transform: translateX(var(--sign-offset)) translateY(-3px) rotate(var(--sign-angle)) scale(1.025); filter: brightness(1.08) drop-shadow(0 12px 7px rgba(12,15,8,.55)); }
}
.tree-sign:focus-visible { outline: 2px solid #fff3b7; outline-offset: 5px; border-radius: 5px; filter: brightness(1.1) drop-shadow(0 8px 6px #102017); }
.tree-sign:active { transform: translateX(var(--sign-offset)) rotate(var(--sign-angle)) scale(.985); }
.tree-menu-fallback { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 28px; background: #1b4332; padding: 20px 24px; }
.tree-menu-fallback a { color: #f3efdf; font-size: 14px; text-underline-offset: 4px; padding: 5px; }
.cinematic-hero.has-sign-menu + .tree-menu-fallback { display: none; }
nav { padding: 20px 3.5%; background: transparent; }
nav.scrolled { background: rgba(24,46,32,.96); }
.nav-logo img { width: 42px; height: 42px; border-radius: 50%; padding: 0; }
.nav-logo-name { font-size: 15px; }
.nav-logo-sub { font-size: 8px; margin-top: 5px; letter-spacing: .13em; }
.nav-links { gap: 22px; }
.nav-links a { font-size: 11px; }
.nav-cta { background: #f3efdf !important; color: #243a29 !important; border-radius: 4px; font-weight: 600 !important; padding: 12px 16px; }
button.hamburger { border: 0; background: transparent; padding: 10px; }
:is(.tree-cta, .tree-scroll, .tree-details a, .nav-links a, .hamburger):focus-visible { outline: 2px solid #fff8c8; outline-offset: 6px; }
#about, #services, #gallery, #reviews, #consult, #transformations { scroll-margin-top: 86px; }
.reviews-carousel-wrap { position: relative; }
@media (max-width: 900px) {
  nav { padding: 16px 5%; }
  .tree-copy { left: 6%; width: 44%; }
  .tree-copy h1 { font-size: 53px; }
  .tree-signpost { width: min(52vw, 430px); }
}
@media (max-width: 600px) {
  .cinematic-hero.has-tree-motion { height: 215svh; }
  .tree-wide { transform-origin: 50% 65%; }
  .tree-shade { background: linear-gradient(180deg, rgba(13,27,21,.43), transparent 23%, transparent 54%, rgba(9,26,15,.83)); }
  .tree-copy { left: 7%; bottom: 85px; width: 86%; text-align: center; }
  .tree-eyebrow { font-size: 8px; margin-bottom: 11px; }
  .tree-copy h1 { font-size: clamp(36px, 10.8vw, 48px); letter-spacing: -.04em; margin-bottom: 13px; }
  .tree-intro { margin: 0 auto 19px; font-size: 12px; max-width: 260px; }
  .tree-cta { padding: 12px 17px; font-size: 11px; }
  .tree-scroll { left: 7%; bottom: 22px; font-size: 8px; gap: 8px; }
  .tree-details { right: 7%; bottom: 22px; }
  .tree-details a { font-size: 8px; }
  .tree-progress { width: 70px; }
  .nav-logo-name { font-size: 14px; }
  .nav-logo img { width: 37px; height: 37px; }
  .tree-signpost { top: 51%; width: min(81vw, 340px); gap: 24px; }
  .signpost-kicker { font-size: 8px; margin-bottom: 4px; }
  .tree-sign { --sign-offset: 12px; }
  .tree-sign--about { --sign-offset: -16px; }
  .tree-sign--reviews { --sign-offset: 12px; }
  .tree-sign--services { --sign-offset: -6px; }
  .tree-sign--work { --sign-offset: 8px; }
  .tree-sign-caption { font-size: clamp(12px,4.2cqw,14px); margin-top: 4px; }
}
@media (max-height: 600px) and (min-width: 601px) {
  .tree-copy { bottom: 18%; }
  .tree-copy h1 { font-size: 42px; margin-bottom: 12px; }
  .tree-eyebrow { margin-bottom: 10px; }
  .tree-intro { font-size: 12px; margin-bottom: 14px; }
  .tree-signpost { width: 315px; gap: 21px; top: 54%; }
  .signpost-kicker { margin-bottom: 3px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cinematic-hero.has-tree-motion { height: 100svh; }
  .tree-wide { transform: none !important; }
  .tree-close, .tree-fog, .tree-progress { display: none; }
  .tree-copy, .tree-scroll { opacity: 1 !important; transform: none !important; }
  .tree-cta { transition: none; }
  .rc-track { animation: none; }
  .reviews-carousel-inner { overflow-x: auto; }
  .tree-signpost { display: none; }
  .tree-sign { transition: none; }
}

/* A sign opens a sideways journey without duplicating the page's content. */
.tree-scene { transition: translate 1s cubic-bezier(.22,.7,.2,1); }
.destination-open .tree-scene { translate: calc(var(--pan) * 34vw) 0; }
.destination-open .tree-signpost { opacity: 0 !important; transition: opacity .4s; }
.landscape-dialog { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100svh; max-height: none; border: 0; padding: 88px 6vw 30px; overflow: hidden; background: transparent; color: #f6f2e5; }
.landscape-dialog::backdrop { background: transparent; }
.destination-landscape { position: absolute; z-index: -2; inset: -5% -35%; background: url('/assets/tree-landscape.webp') center / cover no-repeat; opacity: 0; transform: scale(1.25) translateX(0); transition: transform 1.2s cubic-bezier(.22,.7,.2,1), opacity .75s; }
.is-arrived .destination-landscape { opacity: 1; transform: scale(1.25) translateX(calc(var(--pan) * 21%)); }
.destination-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,rgba(10,24,16,.35),rgba(10,24,16,.15)); opacity: 0; transition: opacity .8s; }
.is-arrived .destination-shade { opacity: 1; }
.destination-toolbar { position: absolute; top: 22px; left: 6vw; right: 6vw; display: flex; align-items: center; justify-content: space-between; gap: 20px; opacity: 0; transition: opacity .5s; }
.is-arrived .destination-toolbar { opacity: 1; }
.tree-return { padding: 12px 18px; min-height: 44px; border: 1px solid #f1ecda80; border-radius: 6px; background: #152c22e6; color: #fff5de; font: 600 14px 'Inter', sans-serif; cursor: pointer; }
.tree-return:focus-visible { outline: 3px solid #fbe9b5; outline-offset: 4px; }
.destination-name { color: #fff5de; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 8px #102017; }
.destination-panel { width: min(900px,78vw); max-height: calc(100svh - 118px); overflow: auto; overscroll-behavior: contain; scrollbar-color: #b2bba3 #20382c; border: 1px solid #eee7cf38; border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.025)), rgba(12,32,23,.52); box-shadow: 0 22px 70px #06150d44, inset 0 1px 0 #ffffff38; -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%); opacity: 0; transform: translateX(calc(var(--pan) * -65px)); transition: opacity .7s .2s, transform .9s .12s; }
.landscape-dialog[data-direction='right'] .destination-panel { margin-left: auto; }
.is-arrived .destination-panel { opacity: 1; transform: translateX(0); }
.landscape-dialog .destination-panel > section { background: transparent !important; padding: 36px !important; color: #f6f2e5; }
.landscape-dialog .section-title { color: #fff4df !important; font-size: clamp(30px,3vw,44px); }
.landscape-dialog .section-label { color: #cddabb !important; }
.landscape-dialog .section-sub, .landscape-dialog .check-list li { color: #e4e9dc !important; }
.landscape-dialog .about-grid { grid-template-columns: .8fr 1.2fr; gap: 30px; align-items: start; }
.landscape-dialog .about-img-wrap img { height: 330px; }
.landscape-dialog .about-badge { right: -10px; bottom: -12px; padding: 15px; }
.landscape-dialog .about-text { padding: 0; }
.landscape-dialog .about-cta, .landscape-dialog .thumbtack-btn { background: #efe8d5; color: #193326; }
.landscape-dialog .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 26px; }
.landscape-dialog .svc, .landscape-dialog .rev { background: #f2eedf; color: #1b3025; }
.landscape-dialog .reviews-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.landscape-dialog .gallery-masonry { grid-auto-rows: 190px; }
.landscape-dialog .consult-form { padding: 24px; }
.landscape-dialog .form-group label { color: #f0f0e7; }
.landscape-dialog .form-group input::placeholder, .landscape-dialog .form-group textarea::placeholder { color: #c1c9bd; }
@media (max-width: 600px) {
 .landscape-dialog { padding: 82px 4vw 20px; }
 .destination-toolbar { left: 4vw; right: 4vw; top: 20px; }
 .destination-name { font-size: 10px; letter-spacing: .04em; }
 .destination-panel { width: 100%; max-height: calc(100svh - 102px); }
 .landscape-dialog .destination-panel > section { padding: 24px 20px !important; }
 .landscape-dialog .about-grid, .landscape-dialog .services-grid, .landscape-dialog .reviews-grid { grid-template-columns: 1fr; }
 .landscape-dialog .about-img-wrap { order: 2; margin: 8px 10px 20px 0; }
 .landscape-dialog .about-img-wrap img { height: 240px; }
 .landscape-dialog .gallery-masonry { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
 .landscape-dialog .consult-form { padding: 16px; }
 .landscape-dialog .form-row { grid-template-columns: 1fr; }
 .landscape-dialog .form-group input, .landscape-dialog .form-group select, .landscape-dialog .form-group textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
 .tree-scene, .destination-landscape, .destination-shade, .destination-toolbar, .destination-panel { transition: none; }
 .destination-open .tree-scene { translate: none; }
}

/* Keep the complete sign stack in the usable height of a landscape phone. */
@media (orientation: landscape) and (max-height: 600px) {
  nav { padding-top: 8px; padding-bottom: 8px; }
  .nav-logo img { width: 34px; height: 34px; }
  .nav-logo-name { font-size: 14px; }
  .nav-logo-sub { margin-top: 3px; }
  .tree-signpost { top: calc(50% + 27px); width: min(280px, calc((100svh - 100px) * .65)); gap: clamp(6px, 2svh, 12px); }
  .signpost-kicker { display: none; }
  .tree-sign { --sign-offset: 8px; }
  .tree-sign--about { --sign-offset: -12px; }
  .tree-sign--reviews { --sign-offset: 12px; }
  .tree-sign--services { --sign-offset: -6px; }
  .tree-sign--work { --sign-offset: 8px; }
  .tree-sign-title { font-size: clamp(18px, 14.5cqw, 40px); }
  .tree-sign-caption { font-size: clamp(6px, 3.8cqw, 11px); margin-top: 2px; }
}

/* Section content is opened through scenic navigation, not stacked below the tree. */
.scenic-only #page-sections { display: none; }

/* Landscape Lights: decorative fixture and reversible night scene. */
.tree-sign--lighting { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; width: 105%; --sign-angle: -5deg; --sign-offset: -12px; }
.tree-sign--lighting .tree-sign-title { font-size: clamp(20px, 8.3cqw, 40px); letter-spacing: -.035em; }
.tree-uplight { position: absolute; left: 94%; bottom: -45px; width: 78px; height: 117px; pointer-events: none; }
.tree-uplight img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 4px #0009); }
.uplight-beam { position: absolute; bottom: 62%; right: 55%; width: 230px; height: 125px; transform-origin: right bottom; transform: rotate(14deg); background: linear-gradient(225deg,#ffdf9244,transparent 75%); clip-path: polygon(100% 100%,0 0,65% 0); filter: blur(8px); opacity: .25; transition: opacity 1s; }
.tree-scene { transition: filter 1.2s, translate 1s cubic-bezier(.22,.61,.36,1); }
.destination-landscape { transition: transform 1.2s cubic-bezier(.22,.7,.2,1), opacity .75s, filter 1.2s; }
.landscape-dialog[open] .destination-landscape { will-change: transform, opacity; }
.tree-night .tree-scene, .tree-night .destination-landscape { filter: brightness(.29) saturate(.65) hue-rotate(12deg); }
.tree-night .tree-sign-art { filter: brightness(.85) sepia(.16) drop-shadow(0 0 12px #ffc56355); }
.tree-night .tree-sign--lighting .tree-sign-art { filter: brightness(1.2) drop-shadow(0 0 22px #ffc563aa); }
.tree-night .uplight-beam { opacity: 1; background: linear-gradient(225deg,#ffe4a9dd,transparent 90%); }
.tree-night .tree-uplight img { filter: drop-shadow(0 0 12px #ffd37799); }
@media (max-width:600px) { .tree-uplight { left: 84%; bottom: -32px; width: 60px; height: 90px; } }
@media (orientation:landscape) and (max-height:600px) { .tree-uplight { left: 99%; bottom: -15px; width: 44px; height: 66px; } .tree-sign--lighting .tree-sign-title { font-size: 8.3cqw; } }
@media (prefers-reduced-motion:reduce) { .tree-scene, .destination-landscape, .uplight-beam { transition: none; } }

/* Full-screen night garden destination. */
.lighting-destination .destination-landscape { inset: 0; background-image: url('/assets/lighting-garden.webp'); background-position: center; filter: none; transform: translateX(18%) scale(1.05); transition: opacity 1.2s, transform 1.6s cubic-bezier(.22,.61,.36,1); }
.lighting-destination.is-arrived .destination-landscape { transform: translateX(0) scale(1); }
.lighting-destination .destination-shade { background: linear-gradient(180deg,#020b1833,transparent 30%,transparent 65%,#020b1877); }
.lighting-destination .destination-panel { position: absolute; left: 6vw; bottom: 28px; width: auto; max-width: 440px; margin: 0 !important; background: #0b201b66; }
.lighting-destination .destination-panel > section { padding: 20px 26px !important; }
.lighting-destination h2 { font-size: 30px; margin: 4px 0 8px; }
.lighting-destination p { margin: 0 0 8px; font-size: 13px; }
.lighting-destination small { font-size: 10px; opacity: .75; }
@media(max-width:600px) { .lighting-destination .destination-panel { left: 4vw; right: 4vw; bottom: 18px; } .lighting-destination h2 { font-size: 25px; } }
@media(prefers-reduced-motion:reduce) { .lighting-destination .destination-landscape { transition: none; transform: none; } }

/* Color controls remain beside Night mode and wrap on narrow screens. */
.lighting-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.lighting-controls button { min-height: 44px; padding: 7px 10px; border: 1px solid #ffffff66; border-radius: 6px; background: #071711b8; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.lighting-controls .lighting-warm { margin: 0; font-size: 11px; letter-spacing: .08em; color: #ffe1a5; }
.lighting-controls [data-light-color="blue"] { color: #a9d6ff; }
.lighting-controls [data-light-color="purple"] { color: #e1baff; }
.lighting-controls [data-light-color="red"] { color: #ffb7b7; }
.lighting-controls button[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; background: #ffffff25; }
.lighting-controls button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.lighting-destination[data-light-color="blue"] .destination-landscape { filter: url('#garden-blue'); }
.lighting-destination[data-light-color="purple"] .destination-landscape { filter: url('#garden-purple'); }
.lighting-destination[data-light-color="red"] .destination-landscape { filter: url('#garden-red'); }

/* Occasional meteors live inside the garden layer, behind every control. */
.night-shooting-stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: none; }
.lighting-destination.is-arrived .night-shooting-stars { display: block; }
.night-shooting-star {
  position: absolute; width: 0; height: 0; opacity: 0;
  animation: night-shooting-star var(--star-duration, 1300ms) linear both;
  will-change: transform, opacity;
}
.night-shooting-star::before {
  content: ''; position: absolute; right: 0; top: -.75px;
  width: var(--star-tail, 65px); height: 1.5px; border-radius: 50%;
  background: linear-gradient(90deg, transparent, #badbff55 45%, #e4f2ffcc 90%, #fff);
  transform: rotate(var(--star-angle)); transform-origin: right center;
}
.night-shooting-star::after {
  content: ''; position: absolute; left: -1.5px; top: -1.5px;
  width: 3px; height: 3px; border-radius: 50%; background: #eff7ff;
  box-shadow: 0 0 6px 1px #c8e5ff99;
}
@keyframes night-shooting-star {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  12% { opacity: .85; }
  70% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(var(--star-x), var(--star-y), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .night-shooting-stars { display: none !important; }
  .night-shooting-star { animation: none; }
}

/* Brand sits over the landscape; the persistent header is reserved for actions. */
#navbar { justify-content:center; gap:18px; padding:10px 24px; background:rgba(18,47,34,.48); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
#navbar .nav-links { display:flex; justify-content:center; align-items:center; gap:12px; }
#navbar .nav-links a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 15px; border:0; border-radius:6px; white-space:nowrap; }
#navbar .hamburger { display:flex; flex-shrink:0; min-height:44px; width:44px; justify-content:center; }
.tree-masthead { position:absolute; top:100px; left:5%; width:90%; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.tree-brand { margin:0; color:#fff9e9; font-family:'Playfair Display',Georgia,serif; font-size:clamp(30px,4.6vw,66px); font-weight:700; line-height:1.15; letter-spacing:-.03em; text-shadow:0 2px 14px #102b22,0 1px 3px #102b22; pointer-events:none; }
.tree-special { display:flex; align-items:center; justify-content:center; gap:24px; max-width:100%; padding:14px 18px 14px 22px; border-radius:12px; background:rgba(20,49,34,.92); box-shadow:0 8px 28px rgba(9,26,17,.18); color:#fff9e9; }
.tree-special-copy { min-width:0; text-align:left; }
.tree-special-title { margin:0; color:#ffd3a4; font-size:clamp(17px,1.6vw,22px); font-weight:700; line-height:1.25; }
.tree-special-prompt { display:flex; align-items:center; gap:12px; margin:7px 0 0; font-size:12px; line-height:1.4; }
.tree-special-prompt svg { width:42px; height:18px; flex-shrink:0; }
.tree-special-button { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-height:48px; padding:12px 22px; border-radius:7px; background:#f4a261; color:#173b29; text-decoration:none; font-size:14px; font-weight:800; line-height:1.4; transition:background .2s; }
.tree-special-button:hover { background:#ffbb84; }
.tree-special-button:focus-visible { outline:3px solid #fff3b7; outline-offset:5px; }
@media(max-width:600px) {
 #navbar { padding:6px; gap:3px; }
 #navbar .nav-links { gap:3px; flex:1; }
 #navbar .nav-links li { flex:1; }
 #navbar .nav-links a { font-size:10px; padding:7px 5px; }
 #navbar .hamburger { width:36px; padding:7px; }
 .tree-masthead { top:88px; left:4%; width:92%; gap:13px; }
 .tree-brand { font-size:clamp(26px,7.4vw,40px); }
 .tree-special { gap:14px; padding:12px 14px; }
 .tree-special-title { font-size:17px; }
 .tree-special-prompt { gap:8px; margin-top:6px; font-size:11px; }
 .tree-special-prompt svg { width:30px; }
 .tree-special-button { min-height:46px; padding:11px 15px; font-size:13px; }
}
@media(orientation:landscape) and (max-height:600px) {
 .tree-masthead { top:76px; gap:10px; }
 .tree-brand { font-size:30px; }
 .tree-special { padding:9px 14px; gap:18px; }
 .tree-special-title { font-size:16px; }
 .tree-special-prompt { font-size:10px; margin-top:3px; }
 .tree-special-button { min-height:44px; padding:10px 16px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .tree-special-button { transition:none; } }

#navbar .nav-links a:not(.nav-cta):hover { background:rgba(255,255,255,.09); color:#fff9e9; }