/* The pale sculpture is the stage; typography sits quietly on its surface. */
header{color:#35362f}.hero{background:#e7e4dd;color:#35362f;min-height:600px}.hero:after{background:none}.hero-copy{inset:46% 7% auto;pointer-events:none}.hero-copy a{pointer-events:auto}.hero .eyebrow{font-size:9px;letter-spacing:2px;margin:0 0 16px}.hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(29px,3.3vw,52px);font-weight:400;letter-spacing:-.045em;line-height:1.15;max-width:720px;margin:0}.hero-bottom{position:absolute;top:calc(54svh - 95px);left:0;right:0;font-size:11px}.hero-bottom>span{font-size:10px}.scroll span{border-color:#35362f50}.vertical{color:#55574b;font-size:8px}.menu-open header{color:#eae9e1}
@media(max-width:700px){.hero-copy{inset:43% 6% auto}.hero h1{font-size:33px;max-width:360px}.hero .eyebrow{font-size:8px;letter-spacing:1.4px}.hero-bottom{top:calc(57svh - 105px)}.hero-bottom>span{max-width:130px}.scroll{font-size:9px;gap:10px}}

/* The artwork stays behind every section, moving from its top to its bottom. */
#landscape{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
body{isolation:isolate;background:#e7e4dd}
.hero{position:relative;overflow:visible;background:transparent}
.hero:after{display:none}
.hero-copy{inset:46% 15% auto 28%}
.hero .eyebrow{display:none}
.hero h1{font-size:clamp(23px,2.1vw,34px);line-height:1.13;max-width:570px}
.hero h1 br{display:none}
.hero-bottom{top:calc(54svh - 70px);left:-27%;right:-10%}
.vision,.explore,.next,footer{background:transparent}
.next{color:var(--ink)}.next em{color:#78816e}.contact{border-color:#35362f50}
.vision h2,.interlude>span,.next h2{font-family:Georgia,'Times New Roman',serif;font-weight:400}
@media(max-width:700px){.hero-copy{inset:46% 8% auto 15%}.hero h1{font-size:27px}.hero-bottom{left:-10%;right:0;top:calc(54svh - 65px)}}
/* Preserve the supplied wordmark and hummingbird as one image. */
.brand{display:inline-flex;align-items:center;line-height:1;letter-spacing:0}
.brand img{display:block;width:260px;height:auto;max-width:100%;filter:drop-shadow(0 1px 1px #32382c90)}
header{align-items:flex-start}
#menuToggle{margin-top:18px}
footer .brand img{width:220px}
@media(max-width:700px){.brand img{width:205px}footer .brand img{width:190px}#menuToggle{margin-top:14px}}

/* Lime wordmark: retain original colors without the previous white-logo shadow. */
.brand img{filter:none}
.menu-open header .brand{background:#e7e4dd;border-radius:3px;padding:5px 10px}

/* A single geometric type family throughout, matching the wordmark's construction. */
:root{--site-font:'Century Gothic','URW Gothic',Futura,sans-serif}
body,button,a,p,span,small,h1,h2,h3,em,.hero h1,.vision h2,.interlude>span,.next h2,dialog{font-family:var(--site-font)}
em{font-style:normal}
h1,h2,h3,.hero h1,.vision h2,.next h2,.interlude>span{letter-spacing:-.035em;font-weight:400}

.hero-bird{position:absolute;right:3%;top:20%;width:min(36vw,520px);height:auto;pointer-events:none;z-index:1;object-fit:contain}
.hero-copy{z-index:2;right:40%;left:15%}
@media(max-width:700px){.hero-bird{width:43vw;right:0;top:24%}.hero-copy{left:7%;right:35%;top:49%}.hero h1{font-size:23px}}
@media(prefers-reduced-motion:reduce){.hero-bird{content:url('assets/hummingbird-green-still.png')}}

/* The user-selected light geometric family, loaded consistently across devices. */
:root{--site-font:'Poppins','Century Gothic',sans-serif}
body,button,a,p,span,small,h1,h2,h3,em,b,strong,.hero h1,.vision h2,.interlude>span,.next h2,dialog{font-family:var(--site-font);font-weight:300}

/* A small animated bird beside the final letter of the header wordmark. */
header .brand{position:relative;overflow:visible}
header .brand .hero-bird{position:absolute;left:88%;right:auto;top:24%;width:44px;max-width:none;height:auto;z-index:1;pointer-events:none;filter:none}
.hero-copy{inset:46% 15% auto 28%}
@media(max-width:700px){header .brand .hero-bird{width:35px;top:24%}.hero-copy{inset:46% 8% auto 15%}.hero h1{font-size:27px}}

header .brand .hero-bird{left:89%;top:12%;width:48px}
@media(max-width:700px){header .brand .hero-bird{width:38px;top:12%}}

/* Small vector hummingbird, visually coordinated with the lime wordmark. */
header .brand .hero-bird{width:43px;left:91%;top:13%;height:43px;object-fit:contain}
@media(max-width:700px){header .brand .hero-bird{width:34px;height:34px;top:13%}}

/* Real green hummingbird, larger and hovering to the left of the first letter. */
header .brand{margin-left:40px}
header .brand .hero-bird{left:-55px;top:6%;width:76px;height:auto;max-width:none}
@media(max-width:700px){header .brand{margin-left:29px}header .brand>img:not(.hero-bird){width:185px}header .brand .hero-bird{left:-43px;top:6%;width:60px;height:auto}}

/* Larger bird, with its visible silhouette directly beside the first t. */
header .brand{margin-left:47px}
header .brand .hero-bird{left:-48px;top:-8%;width:108px;height:auto}
@media(max-width:700px){header .brand{margin-left:36px}header .brand .hero-bird{left:-38px;top:-8%;width:86px;height:auto}}

.film-section{padding:40px 4% 100px}.film-section .section-head{margin-bottom:40px}.film-story{position:relative}.film-stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;background:#17231c;color:#fff;isolation:isolate}.film-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.film-shade{position:absolute;inset:0;background:linear-gradient(90deg,#06120ca6,transparent 85%),linear-gradient(0deg,#06120c80,transparent 40%)}.film-caption{position:absolute;left:6%;top:45%;max-width:650px;transform:translateY(-25%);transition:opacity .5s}.film-caption.changing{opacity:0}.film-caption h2{font-size:clamp(42px,6.5vw,100px);line-height:1.06;margin:24px 0;letter-spacing:-.05em;color:#fff}.film-caption>p:last-child{font-size:15px;line-height:1.7;max-width:360px}.film-bottom{position:absolute;left:6%;right:6%;bottom:30px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:1px}.film-bottom button{border:1px solid #ffffff70;border-radius:30px;padding:10px 18px;background:#17231c55;color:#fff;font-size:11px}.film-steps{position:relative;pointer-events:none;margin-top:-100svh}.film-steps>div{height:95svh;min-height:520px}.design-note{display:flex;justify-content:space-between;gap:40px;padding:70px 4% 0}.design-note>p:last-child{width:520px;max-width:65%;font-size:18px;line-height:1.8;margin:0}
@media(max-width:700px){.film-section{padding:30px 0 70px}.film-section .section-head{margin-inline:6%}.film-caption{left:7%;right:7%;top:50%}.film-caption h2{font-size:45px}.film-stage video{object-position:46% center}.film-shade{background:linear-gradient(0deg,#07150ce6,transparent 95%)}.film-bottom{font-size:8px;gap:10px}.film-bottom button{padding:8px 12px}.design-note{display:block;padding:45px 7% 0}.design-note>p:last-child{max-width:100%;width:auto;font-size:15px;margin-top:20px}}
@media(prefers-reduced-motion:reduce){.film-caption{transition:none}}

/* Compact film card leaves room for the next videos. */
.film-story{width:66%;max-width:880px;margin:0 auto 0 0}
.film-stage{position:relative;top:auto;height:auto;min-height:0;aspect-ratio:16/9}
.film-steps{display:none}
.film-caption{left:6%;right:6%;top:42%;max-width:470px}
.film-caption h2{font-size:clamp(28px,3.5vw,52px);margin:16px 0}
.film-caption>p:last-child{font-size:12px;max-width:300px;line-height:1.5}
.film-caption .eyebrow{font-size:8px}
.film-bottom{bottom:18px;font-size:8px}
.film-bottom>span:last-child{display:none}
.design-note{padding-top:40px}
@media(max-width:700px){.film-story{width:88%;margin-inline:auto}.film-stage{height:auto;min-height:0;aspect-ratio:4/3}.film-caption{left:7%;top:36%}.film-caption h2{font-size:29px;margin:10px 0}.film-caption>p:last-child{font-size:10px;max-width:220px}.film-caption .eyebrow{font-size:7px}.film-bottom{bottom:12px}.film-bottom button{padding:6px 10px;font-size:9px}}

/* Centered landscape showcase, like the supplied reference. */
.film-section{padding:70px 4% 110px}
.film-story{width:70%;max-width:1120px;margin:0 auto}
.film-stage{aspect-ratio:16/9;min-height:0;height:auto}
.film-caption{top:43%;left:5%;right:5%;max-width:90%;transform:translateY(-20%)}
.film-caption h2{font-size:clamp(32px,4vw,68px);line-height:1.08;letter-spacing:-.045em;margin:12px 0}
.film-caption>p:last-child{font-size:clamp(11px,.95vw,14px);max-width:360px}
.film-caption .eyebrow{font-size:8px;letter-spacing:2px}
.film-bottom{left:5%;right:5%;bottom:20px}
.design-note{max-width:1120px;width:70%;margin:0 auto;padding:35px 0 0}
.design-note>p:last-child{font-size:14px;line-height:1.7}
@media(max-width:700px){.film-section{padding:35px 0 70px}.film-story{width:88%}.film-stage{aspect-ratio:16/9}.film-caption{top:37%;left:5%;right:5%}.film-caption h2{font-size:clamp(22px,5.5vw,36px);margin:7px 0}.film-caption h2 br{display:none}.film-caption>p:last-child{font-size:9px;max-width:85%;line-height:1.4;margin:5px 0}.film-caption .eyebrow{font-size:6px;letter-spacing:1px}.film-bottom{bottom:9px;font-size:7px}.film-bottom button{font-size:8px;padding:4px 9px}.design-note{width:86%;padding-top:25px}.design-note>p:last-child{font-size:13px}}

/* Keep the film precisely centered at every breakpoint. */
.film-story{margin-left:auto!important;margin-right:auto!important;float:none;align-self:center}
.film-stage{margin-inline:auto;width:100%}
.film-section>.section-head{width:70%;max-width:1120px;margin-left:auto;margin-right:auto}
@media(max-width:700px){.film-section>.section-head{width:88%;margin-left:auto;margin-right:auto}}

.film-bottom{flex-wrap:wrap}.film-bottom #ambientToggle{margin-left:auto}.film-bottom #ambientToggle[aria-pressed="true"]{border-color:#b4de83;color:#d5eeb5}
@media(max-width:700px){.film-bottom{gap:6px}.film-bottom #ambientToggle{font-size:8px}}

/* More presence for the opening statement, retaining the selected light face. */
.hero-copy{left:20%;right:14%;top:43%}
.hero h1{font-size:clamp(36px,4vw,66px);line-height:1.15;max-width:1000px;letter-spacing:-.045em}
.hero h1 br{display:block}
@media(max-width:700px){.hero-copy{left:10%;right:7%;top:42%}.hero h1{font-size:clamp(32px,7.8vw,44px);line-height:1.16}.hero-bottom{left:0;right:0;top:calc(58svh - 70px)}}

/* Headings must receive pointer input even inside the decorative hero layer. */
.hero-copy h1,h2{pointer-events:auto}

/* Sound belongs to the whole site, independent of the film. */
#ambientToggle{position:fixed;right:25px;bottom:22px;z-index:30;border:1px solid #65715d66;border-radius:24px;padding:10px 16px;background:#e7e4ddef;backdrop-filter:blur(10px);color:#273422;font-family:var(--site-font);font-size:10px;cursor:pointer}
#ambientToggle[aria-pressed="true"]{border-color:#78a94b;background:#e7e4ddef}
@media(max-width:700px){#ambientToggle{right:14px;bottom:12px;padding:8px 12px;font-size:9px}}

/* A slowly travelling stone phoenix behind the full-screen navigation. */
#menu{background:#101110;padding:110px 8% 70px;isolation:isolate;overflow:hidden;color:#ecebe3;--light-x:50%;--light-y:50%;--tail-x:48%;--tail-y:52%;--glow:0}
#menu:not([hidden]){align-items:center;justify-content:center;gap:0}
.menu-scenery{position:absolute;inset:0;z-index:-2;pointer-events:none;background:#101110}
.menu-stone,.menu-light{position:absolute;inset:0;background-image:url('assets/forest-menu.webp');background-size:100% auto;background-repeat:no-repeat;background-position:center top;animation:phoenix-travel 100s linear infinite alternate}
.menu-stone{filter:brightness(.48)}
.menu-light{filter:brightness(2.5) contrast(1.12) sepia(.13);opacity:var(--glow);mask-image:radial-gradient(ellipse 155px 115px at var(--light-x) var(--light-y),#000 0%,#000d 35%,transparent 100%),radial-gradient(ellipse 105px 145px at var(--tail-x) var(--tail-y),#0009,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 155px 115px at var(--light-x) var(--light-y),#000 0%,#000d 35%,transparent 100%),radial-gradient(ellipse 105px 145px at var(--tail-x) var(--tail-y),#0009,transparent 100%)}
#menu:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 25%,#05070565)}
#menu>a{font-size:clamp(28px,4vw,60px);line-height:1.35;letter-spacing:-.045em;border:0;text-align:center;padding:8px 20px;width:auto;transition:color .4s,transform .6s;text-shadow:0 2px 25px #0009}
#menu>a:hover,#menu>a:focus-visible{color:#c4df9f;transform:translateX(5px)}
#menu small{float:none;display:inline-block;margin:0 0 0 16px;font-size:9px;vertical-align:middle;color:#a9b19e}
#menu>p{position:absolute;bottom:40px;margin:0;font-size:8px;letter-spacing:2px;color:#b4b9ac}.menu-label{font-size:9px;letter-spacing:2.5px;margin-bottom:45px;color:#c0c5b4}
.menu-open header .brand{background:none;border-radius:0;padding:0}.menu-open header .brand>img:not(.hero-bird){filter:brightness(0) invert(1)}
@keyframes phoenix-travel{from{background-position:center top}to{background-position:center bottom}}
@media(max-width:700px){.menu-stone,.menu-light{background-size:auto 190%;animation-duration:65s}#menu>a{font-size:35px}.menu-label{font-size:8px;margin-bottom:35px}}
@media(prefers-reduced-motion:reduce){.menu-stone,.menu-light{animation:none}.menu-light{transition:none}}

#menuInk{position:fixed;inset:0;width:100vw;height:100vh;z-index:40;pointer-events:none;visibility:hidden;opacity:1;filter:blur(1px)}
#menuInk.ink-visible{visibility:visible}#menuInk.ink-fade{opacity:0;transition:opacity .85s ease}
#menu .menu-stone{filter:brightness(.34)}
#menu .menu-light{background-image:linear-gradient(125deg,#549d78 0%,#779052 22%,#528ea1 48%,#8c568f 72%,#bc8554 100%),url('assets/forest-menu.webp');background-blend-mode:color;background-size:100% 100%,100% auto;filter:brightness(1.8) contrast(1.15) saturate(1.55)}
#menu>a,.menu-label,#menu>p{transition:opacity .8s,transform .8s,color .4s}
#menu.menu-emerging>a,#menu.menu-emerging .menu-label,#menu.menu-emerging>p{opacity:0;transform:translateY(14px)}
@media(max-width:700px){#menu .menu-light{background-size:100% 100%,auto 190%}}
@media(prefers-reduced-motion:reduce){#menuInk{display:none}#menu>a,.menu-label,#menu>p{transition:none}}

/* Full-bleed stone and aligned luminous relief edges. */
#menu{inset:0;width:100vw;height:100dvh;margin:0;border:0;background:#080a09}
.menu-scenery{inset:0;width:100%;height:100%}
#menu .menu-stone{background-size:cover;background-repeat:no-repeat;filter:brightness(.36)}
#menu .menu-light{background-image:url('assets/forest-menu-contours.png');background-size:cover;background-repeat:no-repeat;background-blend-mode:normal;filter:brightness(1.9) saturate(1.35);mix-blend-mode:screen}
@media(max-width:700px){#menu .menu-stone,#menu .menu-light{background-size:cover;animation-duration:85s}}

/* Fine multicolored glints are confined to the carved edges. */
#menu .menu-light{background-image:url('assets/forest-menu-contours.png');filter:brightness(1.6) saturate(1.5) drop-shadow(0 0 .7px #8f9be177);mask-image:radial-gradient(ellipse 190px 150px at var(--light-x) var(--light-y),#000 0%,#000e 23%,transparent 95%),radial-gradient(ellipse 125px 110px at var(--tail-x) var(--tail-y),#0008,transparent);-webkit-mask-image:radial-gradient(ellipse 190px 150px at var(--light-x) var(--light-y),#000 0%,#000e 23%,transparent 95%),radial-gradient(ellipse 125px 110px at var(--tail-x) var(--tail-y),#0008,transparent)}
#menuInk{filter:blur(.5px)}

/* Travel physically downward; reverse gently at the end without a jump. */
#menu .menu-stone,#menu .menu-light{animation:forest-menu-drift 140s linear infinite alternate;background-size:cover}
@keyframes forest-menu-drift{from{background-position:center bottom}to{background-position:center top}}
@media(prefers-reduced-motion:reduce){#menu .menu-stone,#menu .menu-light{animation:none}}

/* Stronger, closely spaced iridescent ridges for large desktop screens. */
@media(min-width:701px) and (hover:hover){
 #menu .menu-light{background-image:url('assets/forest-menu-contours-desktop.png');filter:brightness(1.9) saturate(1.6) drop-shadow(0 0 1px #8f8cffb0);mask-image:radial-gradient(ellipse 230px 190px at var(--light-x) var(--light-y),#000 0%,#000 35%,#0009 62%,transparent 100%),radial-gradient(ellipse 155px 140px at var(--tail-x) var(--tail-y),#000b,transparent);-webkit-mask-image:radial-gradient(ellipse 230px 190px at var(--light-x) var(--light-y),#000 0%,#000 35%,#0009 62%,transparent 100%),radial-gradient(ellipse 155px 140px at var(--tail-x) var(--tail-y),#000b,transparent)}
}

#menu>a{position:relative;isolation:isolate;overflow:visible}
.menu-link-ink{position:absolute;inset:-40% 0 auto;width:100%;height:180%;z-index:-1;pointer-events:none;opacity:0;filter:drop-shadow(0 0 1px #b8c4ac70)}
@media(prefers-reduced-motion:reduce){.menu-link-ink{display:none}}

#menu>a .menu-link-label{position:relative;z-index:2;pointer-events:none}
#menu>a .menu-link-ink{inset:-60% auto auto -25%;width:150%;height:220%;z-index:0;filter:drop-shadow(0 0 2px #d0dbcf55);mix-blend-mode:normal}

/* Ink reveals aligned carved edges, never an opaque cloudy panel. */
#menu>a .menu-link-ink{filter:brightness(1.7) saturate(1.45);mix-blend-mode:screen}


/* Original butterflies pass in front of the menu without a black rectangle. */
.menu-butterflies{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:5;mix-blend-mode:screen;pointer-events:none}
.menu-link-ink{display:none!important}
@media(max-width:700px){.menu-butterflies{object-fit:cover;object-position:65% center}}
@media(prefers-reduced-motion:reduce){.menu-butterflies{display:none}}

/* Keyed footage has real per-frame transparency; no green/black blend layer. */
#menu .menu-butterflies{display:none}
.menu-butterflies-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:5}
#menu .menu-light{display:none}
.menu-edge-flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;mix-blend-mode:screen;filter:brightness(1.8) saturate(1.6) drop-shadow(0 0 1px #a2a6ff66)}
#menu>a,.menu-label,#menu>p{z-index:2}
@media(prefers-reduced-motion:reduce){.menu-butterflies-frame,.menu-edge-flow{display:none}}

/* No browser tap overlay or image selection on the logo. */
a.brand,a.brand img{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
a.brand img{-webkit-user-drag:none}
a.brand:active{background:transparent}
a.brand:focus:not(:focus-visible){outline:none}
a.brand:focus-visible{outline:1px solid #98c75f;outline-offset:6px}

/* Keep vector edge strokes crisp; diffusion affects only the illumination mask. */
.menu-edge-flow{filter:brightness(1.5) saturate(1.35);image-rendering:auto}

#menu .menu-smoke{display:block;position:relative;width:min(360px,60vw);height:auto;aspect-ratio:16/9;object-fit:contain;margin:12px auto 0;z-index:2;mix-blend-mode:screen;pointer-events:none;flex-shrink:0}
@media(max-width:700px){#menu .menu-smoke{width:min(290px,70vw);margin-top:5px;max-height:18svh}.menu-label{margin-bottom:24px}}
@media(max-height:650px){#menu .menu-smoke{max-height:100px}#menu>a{padding-block:3px}.menu-label{margin-bottom:15px}}

#menu .menu-center-film{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1000px,85vw);height:auto;aspect-ratio:16/9;object-fit:contain;z-index:1;mix-blend-mode:screen;opacity:.65;pointer-events:none}
#menu>a{z-index:3;text-shadow:0 2px 18px #000,0 0 5px #000}
@media(max-width:700px){#menu .menu-center-film{width:125vw;max-width:none;opacity:.5}}

/* Media placement is independent of the centered navigation links. */
#menu .menu-smoke{position:absolute;left:50%;bottom:55px;top:auto;transform:translateX(-50%);width:min(360px,55vw);height:auto;max-height:20svh;margin:0;z-index:2}
#menu .menu-center-film{top:var(--menu-film-y,50%);left:50%;transform:translate(-50%,-50%)}
@media(max-width:700px){#menu .menu-smoke{bottom:70px;width:min(300px,78vw);max-height:18svh}#menu>p{bottom:30px}}
@media(max-height:650px){#menu .menu-smoke{bottom:35px;max-height:16svh}#menu>p{bottom:18px}}

#menu .menu-center-film,#menu .menu-smoke{transition:opacity .25s linear}

/* The replacement plume originates at the bottom edge of the menu. */
#menu .menu-center-film{top:auto!important;bottom:0;left:50%;transform:translateX(-50%);width:min(1280px,100vw);height:auto;max-height:85svh;object-fit:contain;object-position:center bottom;opacity:.9}
@media(max-width:700px){#menu .menu-center-film{width:160vw;max-height:75svh;opacity:.9}}

/* Hide the source clip's hard upper frame boundary with a soft alpha falloff. */
#menu .menu-center-film{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 4%,rgba(0,0,0,.55) 10%,#000 20%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 4%,rgba(0,0,0,.55) 10%,#000 20%,#000 100%)}

/* More visible carved forest while retaining a dark menu. */
#menu .menu-stone{filter:brightness(.58)}

/* Disable Android's rectangular tap highlight on the menu control. */
#menuToggle,#menuToggle *{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#menuToggle,#menuToggle:hover,#menuToggle:active{background:transparent;box-shadow:none}
#menuToggle:focus:not(:focus-visible){outline:none}
