:root {
  color-scheme: light;
  --paper: #f3e6c8;
  --forest: #123c32;
  --cobalt: #0756a6;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; background: var(--paper); }
body { color: var(--forest); font-family: system-ui, sans-serif; }
img { display: block; }

.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--paper);
}

/* One shared cover-sized artboard keeps the registered layers aligned without stretching. */
.hero__scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100vh * 1672 / 941);
  height: 100vh;
  min-width: 100%;
  min-height: calc(100vw * 941 / 1672);
  width: calc(100svh * 1672 / 941);
  height: 100svh;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.hero__plane, .hero__foreground, .hero__fox-over-copy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__plane { object-fit: fill; }
.hero__day-plane, .hero__night-plane { transition: opacity 480ms ease; }
.hero__night-plane { opacity: 0; }
[data-theme="night"] .hero__night-plane { opacity: 1; }
[data-theme="night"] .hero__day-plane { opacity: 0; }
.hero__sky { z-index: 0; }
.hero__landscape {
  z-index: 1;
  transform-origin: 18% 58%;
  transform: translate(calc(var(--landscape-responsive-x, 0%) + var(--landscape-x, 0%)), var(--landscape-y, 0%)) scale(var(--landscape-scale, 1));
}
/* Native 96px crop: the rest of the approved landscape is never duplicated here. */
.hero__landscape-edge {
  z-index: 2;
  left: auto;
  width: 5.741626794%;
  transform: translateY(var(--landscape-y, 0%));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 37.5%);
  mask-image: linear-gradient(to right, transparent, #000 37.5%);
}
[data-theme="night"] .hero__landscape.hero__night-plane,
[data-theme="night"] .hero__landscape-edge {
  filter: brightness(0.68) saturate(0.88);
}
.hero__foreground { z-index: 2; }
.hero__behind { z-index: 0; }
.hero__fox { z-index: 1; }
.hero__front { z-index: 2; }

/* Composite the split alpha edges at their native resolution, then scale once. */
.hero__composite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  visibility: hidden;
}
.hero__foreground.is-composited .hero__composite { visibility: visible; }
.hero__foreground.is-composited .hero__plane { visibility: hidden; }
.hero__composite { transition: opacity 480ms ease; }
.hero__composite--night { opacity: 0; }
[data-theme="night"] .hero__composite--day { opacity: 0; }
[data-theme="night"] .hero__composite--night { opacity: 1; }
[data-theme="night"] .hero__foreground:not(.is-composited) .hero__fox { visibility: hidden; }

/* The transparent video is drawn inside the registered foreground canvas. */
.hero__video-source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.hero__sleep-source { display: none !important; }

.site-header {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: clamp(20px, 2vw, 32px);
}

.site-header__brand {
  position: relative;
  isolation: isolate;
  display: inline-block;
  width: clamp(135px, 11vw, 179px);
}
.site-header__brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px -16px;
  background: var(--paper);
  clip-path: polygon(1% 4%, 98% 0, 100% 96%, 0 100%);
}
.site-header__brand img { width: 100%; height: auto; }
.site-header__brand:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 8px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reframe existing planes on narrow screens; never separate the fox from its overlap masks. */
@media (max-width: 1100px) and (max-aspect-ratio: 3/2) {
  .hero__landscape { --landscape-responsive-x: 5%; }
  .hero__foreground, .hero__fox-over-copy { transform: translateX(-8%); }
}

@media (max-width: 900px) and (orientation: portrait) {
  .hero__landscape { --landscape-responsive-x: 20%; }
  .hero__foreground, .hero__fox-over-copy { transform: translateX(-22%); }
}

@media (max-width: 600px) and (orientation: portrait) {
  .hero__landscape { --landscape-responsive-x: 24%; }
  .hero__foreground, .hero__fox-over-copy { transform: translateX(-30%); }
  .site-header { padding: 22px 20px; }
  .site-header__brand { width: 135px; }
}

/* Direct access to the approved art-direction overview. */
.site-header__art { color: var(--forest); background: var(--paper); text-decoration: none; font-size: 13px; padding: 10px 16px; border: 1px solid #123c3240; }
.site-header__art:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 5px; }
.site-header__actions { display: flex; gap: 12px; align-items: center; }
.theme-switch { display: flex; padding: 3px; border: 1px solid #123c3260; border-radius: 999px; background: var(--paper); }
.theme-switch button { border: 0; border-radius: 999px; background: transparent; color: var(--forest); padding: 8px 15px; font: inherit; font-size: 13px; line-height: 1.4; }
.theme-switch button[aria-pressed="true"] { background: var(--forest); color: var(--paper); }
.theme-switch button:disabled { opacity: .45; }
.theme-switch button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
[data-theme="night"] { color-scheme: dark; }
[data-theme="night"] .hero { background: var(--cobalt); }
@media (max-width: 450px) {
  .site-header__brand { width: 105px; }
  .site-header__actions { gap: 7px; }
  .site-header__art { padding: 9px 10px; }
  .theme-switch button { padding: 8px 10px; }
  .site-header { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__day-plane, .hero__night-plane, .hero__composite { transition: none; }
}

/* Swap registered scene layers behind the closed painted canopy. */
html.is-leaf-transitioning .hero__day-plane,
html.is-leaf-transitioning .hero__night-plane,
html.is-leaf-transitioning .hero__composite { transition: none; }

/* Only the moving daytime fox crosses the headline and CTA. */
.hero__fox-over-copy {
  z-index: 5;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 480ms ease;
}
.hero__fox-over-copy[data-visible="true"] { visibility: visible; }
[data-theme="night"] .hero__fox-over-copy { opacity: 0; }

/* A live transparent fox layer between the original foliage masks. */
.hero__sleep-video-source{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hero__sleep-scene{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none;visibility:hidden;opacity:0;transition:opacity 480ms ease}
.hero__sleep-layer{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;filter:brightness(.68) saturate(.88)}
.hero__sleep-behind{z-index:0}
.hero__sleep-front{z-index:2}
.hero__sleep-video{position:absolute;z-index:1;display:block;max-width:none;object-fit:fill;pointer-events:none}
[data-theme="night"] .has-sleep-video .hero__sleep-scene{visibility:visible;opacity:1}
[data-theme="night"] .hero__foreground.has-sleep-video .hero__composite--night{display:none;visibility:hidden}
[data-theme="night"] .hero__composite--day,[data-theme="night"] .hero__fox-over-copy{display:none!important}
@media(prefers-reduced-motion:reduce){.hero__sleep-scene{display:none;transition:none}[data-theme="night"] .hero__foreground.has-sleep-video .hero__composite--night{display:block;visibility:visible}}