/* Native document flow: the five stages remain visible while the page scrolls. */
.timber-journey{--world-bg:#f6f4ee;--world-ink:#223126;--world-muted:#626e58;--world-accent:#657e51;position:relative;background:var(--world-bg);color:var(--world-ink)}
.timber-stage{position:relative;isolation:isolate}
.timber-panel{--panel-inset:7vw;position:relative;padding:clamp(70px,8vw,120px) var(--panel-inset);background:var(--world-bg);color:var(--world-ink)}
/* Solid, local palettes travel with the document instead of changing on a timer. */
.timber-origin{--world-bg:#2c4334;--world-ink:#f7f3e8;--world-muted:#d3dfcd;--world-accent:#cedba9}
.timber-treatment{--world-bg:#ede3d0;--world-ink:#293d30;--world-muted:#4e5b45;--world-accent:#506438}
.timber-selection{--world-bg:#afc097;--world-ink:#253a2b;--world-muted:#354b34;--world-accent:#344b27}
.timber-forest{--world-bg:#193b32;--world-ink:#f2f3e7;--world-muted:#d0ded3;--world-accent:#cedda8}
.timber-project{--world-bg:#cfb28b;--world-ink:#303a28;--world-muted:#42472f;--world-accent:#414623}
.timber-opening{--world-bg:#f6f4ee;--world-ink:#223126;--world-muted:#626e58;--world-accent:#657e51;display:flex;flex-direction:column;justify-content:space-between;min-height:82svh;padding:38px 5vw 70px;background:var(--world-bg);color:var(--world-ink)}
.timber-meta{position:relative;z-index:4;display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.075em;line-height:1.6}
.timber-meta span:last-child{text-align:right}
.timber-title{position:relative;z-index:4;font-size:11.9vw;line-height:1;letter-spacing:-.065em;margin:65px 0 55px}
.timber-title span{display:block}
.timber-title span:last-child{text-align:right}
.timber-title em{color:var(--world-accent);font-style:normal}
.timber-opening-bottom{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:25px}
.timber-opening-bottom p{font-family:Georgia,serif;font-size:24px;line-height:1.35;color:var(--world-ink)}
.timber-opening-bottom>span{font-size:12px;line-height:1.65;text-align:right;color:var(--world-muted);letter-spacing:.08em}
.timber-journey .button{background:var(--world-ink);color:var(--world-bg)}
.timber-journey .text-link{color:var(--world-ink);border-color:var(--world-accent)}
.timber-panel.has-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:8vw;padding-bottom:0;overflow:clip}
.timber-copy{position:relative;z-index:4;grid-row:1;grid-column:2;min-width:0;padding-bottom:clamp(54px,6vw,88px)}
.timber-copy.copy-left{grid-column:1}
.timber-copy h2{font-size:clamp(38px,4.4vw,72px);line-height:1.06;margin:22px 0 25px;letter-spacing:-.05em}
.timber-copy h2 em{color:var(--world-accent)}
.timber-copy p{font-size:16px;line-height:1.8;max-width:450px;color:var(--world-muted);margin-top:16px}
.timber-copy .text-link,.timber-copy .button{margin-top:25px}
.timber-copy .eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--world-accent)}
.timber-copy .eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.timber-media{position:relative;z-index:2;grid-row:1;grid-column:1;align-self:end;min-width:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.timber-media.media-right{grid-column:2}
.timber-image{display:block}
.media-photo{width:calc(100% + var(--panel-inset))}
.media-photo.media-left{margin-left:calc(-1 * var(--panel-inset))}
.media-photo.media-right{margin-right:calc(-1 * var(--panel-inset))}
.media-photo .timber-image{width:100%;aspect-ratio:16/11;overflow:hidden}
.media-photo img{width:100%;height:100%;object-fit:cover;object-position:center;transform:translate3d(0,var(--photo-drift,0%),0) scale(1.08)}
.media-photo .forest-photo{aspect-ratio:4/5}
.forest-photo img{object-position:center 48%}
.timber-panel.timber-forest{padding-top:0}
.timber-forest .timber-copy{padding-top:clamp(70px,8vw,120px)}
/* Every image meets the next section at an opaque edge, with no gradient mask. */
.media-cutout{height:min(690px,65vw);overflow:clip}
/* The original PNG margins are clipped by the frame, without changing the photos. */
.media-cutout .timber-image{position:absolute;bottom:-10%;left:50%;height:110%;width:auto;aspect-ratio:var(--portrait-ratio);max-width:none;overflow:hidden;transform:translateX(-50%)}
.media-cutout img{position:absolute;max-width:none;width:var(--portrait-width);height:auto;left:var(--portrait-left);top:var(--portrait-top)}
.origin-portrait{--portrait-ratio:766/1517;--portrait-width:178.1984%;--portrait-left:-46.2141%;--portrait-top:-35.0033%}
.treatment-portrait{--portrait-ratio:880/1492;--portrait-width:155.1136%;--portrait-left:-31.8182%;--portrait-top:-37.2654%}
/* Only the decorative leaves stay with the viewport; no content is pinned. */
.leaf-layer{position:sticky;top:0;height:100svh;margin-bottom:-100svh;pointer-events:none;overflow:clip;z-index:3}
.eucalyptus-leaf{position:absolute;width:clamp(140px,20vw,300px);height:auto;object-fit:contain;filter:saturate(.5) brightness(.9);will-change:transform}
.leaf-one{left:-9vw;top:5%;opacity:.78}
.leaf-two{right:-10vw;top:55%;width:clamp(175px,26vw,380px);opacity:.85}
.leaf-three{left:36%;bottom:-12vw;width:clamp(130px,18vw,270px);opacity:.6}
@media(min-width:700px) and (max-width:1000px){
  .timber-panel.has-media{--panel-inset:6vw;column-gap:6vw}
  .timber-copy h2{font-size:clamp(34px,4.5vw,46px)}
  .timber-copy p{line-height:1.65}
  .media-cutout{height:57vw}
}
@media(max-width:699px){
  .timber-opening{min-height:75svh;padding:30px 7vw 50px}
  .timber-meta{font-size:10px;letter-spacing:.01em;gap:16px}
  .timber-meta span:first-child{max-width:55%}
  .timber-meta span:last-child{max-width:40%}
  .timber-title{font-size:12.2vw;line-height:1.12;margin:50px -2vw 40px}
  .timber-title span:last-child{margin-top:12px}
  .timber-opening-bottom{flex-wrap:wrap;gap:22px}
  .timber-opening-bottom p{font-size:22px;width:100%}
  .timber-opening-bottom p br{display:none}
  .timber-opening-bottom>span{display:none}
  .timber-opening-bottom .button{font-size:14px;padding:13px 18px;min-height:48px}
  .timber-panel.has-media{display:flex;flex-direction:column;align-items:stretch;padding:58px var(--panel-inset) 0;gap:30px}
  .timber-copy,.timber-forest .timber-copy{padding-top:0;padding-bottom:0}
  .timber-copy h2{font-size:clamp(30px,8.6vw,42px);line-height:1.08;margin:15px 0 18px}
  .timber-copy p{font-size:16px;line-height:1.65;max-width:100%;margin-top:12px}
  .timber-copy .text-link,.timber-copy .button{font-size:14px;margin-top:20px}
  .timber-copy .eyebrow{font-size:12px}
  .timber-media{width:100%}
  .timber-media.media-photo{width:100vw;align-self:center;margin-left:0;margin-right:0}
  .media-photo .timber-image{aspect-ratio:3/2}
  .media-photo .forest-photo{aspect-ratio:4/5;max-width:none}
  .timber-panel.timber-origin,.timber-panel.timber-treatment{min-height:100svh;min-height:100dvh;padding-top:42px;padding-bottom:0;gap:20px}
  .timber-media.media-cutout{flex:none;align-self:center;width:100vw;height:min(132vw,680px);margin-top:auto;overflow:clip}
  .media-cutout .timber-image{height:115%;bottom:-15%;max-width:none}
  .origin-portrait{--portrait-ratio:1012/1584;--portrait-width:134.8814%;--portrait-left:-14.7233%;--portrait-top:-29.2929%}
  .leaf-layer{height:100dvh;margin-bottom:-100dvh;opacity:.8}
  .leaf-one{width:150px;left:-100px;top:28%}
  .leaf-two{width:175px;right:-112px;top:66%}
  .leaf-three{width:140px;left:12%;bottom:-115px}
}
@media(prefers-reduced-motion:reduce){
  .leaf-layer{display:none}
  .eucalyptus-leaf,.media-photo img{transform:none!important;will-change:auto}
}