.home { --paper:#f0efe8; --charcoal:#20221b; --orange:#e8502a; background:var(--paper); color:var(--charcoal) }
html.lenis { scroll-behavior:auto }
.home main > section { padding:0 }
.home h1,.home h2,.home h3,.home p,.home figure { margin:0 }
.home a { color:inherit }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; transform:translateY(-150%); background:var(--orange); color:#fff!important; padding:10px 16px }
.skip-link:focus { transform:translateY(0) }
.site-header { position:absolute; z-index:50; top:0; left:0; width:100%; min-height:88px; padding:18px clamp(20px,2.4vw,38px); display:flex; align-items:flex-start; justify-content:space-between; gap:20px }
.site-logo { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--charcoal)!important; font-size:31px; font-weight:800; letter-spacing:-.075em; line-height:1 }
.site-logo svg { width:31px; height:29px; color:var(--orange) }
.header-actions { display:flex; align-items:center; gap:clamp(12px,1.5vw,24px) }
.language-switch { display:flex; align-items:center; gap:4px }
.language-switch button { appearance:none; border:0; border-bottom:2px solid transparent; background:transparent; min-height:46px; min-width:30px; padding:2px 0 0; color:#777a70; font:800 11px var(--sans); cursor:pointer; transition:color 180ms ease,border-color 180ms ease }
.language-switch button:hover { color:var(--charcoal) }
.language-switch button[aria-pressed='true'] { border-bottom-color:var(--orange); color:var(--charcoal) }
.header-login { display:inline-flex; align-items:center; justify-content:space-between; gap:10px; flex:none; width:160px; min-height:46px; border-bottom:1px solid #20221b55; color:var(--charcoal)!important; font-size:11px; font-weight:800; text-decoration:none; white-space:nowrap; transition:border-color 180ms ease,color 180ms ease }
.header-login:hover { border-bottom-color:var(--orange); color:var(--orange)!important }
.header-login span:last-child { font-size:18px; font-weight:500 }
.login-short { display:none }
.header-cta { display:inline-flex; align-items:center; justify-content:space-between; flex:none; width:180px; gap:12px; min-height:46px; background:var(--orange); color:#171514!important; padding:0 15px; font-size:12px; font-weight:800; white-space:nowrap; text-decoration:none }
.header-cta span { font-size:18px; font-weight:500 }
.site-menu { position:relative }
.site-menu summary { list-style:none; display:flex; align-items:center; justify-content:center; gap:14px; min-width:75px; min-height:46px; padding:0 13px; border:1px solid var(--charcoal); background:transparent; color:var(--charcoal); cursor:pointer; font-size:11px; font-weight:800; transition:background-color 180ms ease,color 180ms ease }
.site-menu summary:hover,.site-menu[open] summary { background:var(--charcoal); color:#fff }
.site-menu summary::-webkit-details-marker { display:none }
.menu-bars { display:grid; gap:5px; width:16px }
.menu-bars i { display:block; height:2px; background:currentColor }
.menu-bars i:last-child { width:10px; justify-self:end }
.menu-panel { position:absolute; top:calc(100% + 7px); right:0; width:min(320px,calc(100vw - 40px)); padding:15px; background:var(--charcoal); color:#fff; box-shadow:0 20px 40px #20221b25 }
.menu-panel a { display:block; padding:10px 12px; font-size:22px; line-height:1.15; font-weight:800; letter-spacing:-.04em; text-decoration:none }
.menu-panel a:hover { color:var(--orange) }
.menu-panel a[aria-current='page'] { color:var(--orange) }
.home a:focus-visible,.home button:focus-visible,.home summary:focus-visible { outline:3px solid var(--orange); outline-offset:3px }
.hero { position:relative; min-height:100dvh; overflow:hidden; background:var(--paper) }
.hero-field { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none }
.hero-field span { position:absolute; top:17%; left:50%; transform:translateX(-50%); color:#deded5; font-size:clamp(190px,33vw,570px); font-weight:800; line-height:1; letter-spacing:-.105em; opacity:.84 }
.hero-field svg { position:absolute; top:8%; left:72%; transform:translateX(-50%) rotate(-10deg); width:clamp(190px,24vw,380px); color:var(--orange); filter:drop-shadow(26px 24px 0 #20221b); animation:symbol-in 850ms cubic-bezier(.2,.8,.2,1) both }
.hero-content { position:relative; min-height:100dvh; display:flex; align-items:flex-end; padding:110px clamp(22px,3.2vw,52px) clamp(34px,4vw,62px) }
.hero-copy { width:100% }
.hero h1 { max-width:1250px; font-size:clamp(65px,10.2vw,168px); font-weight:800; letter-spacing:-.09em; line-height:.88; text-wrap:initial }
.hero-line { display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em }
.hero-line > span { display:block; white-space:nowrap }
.hero h1 em { color:var(--orange); font-style:normal }
.hero-copy p { max-width:34ch; margin-top:clamp(24px,3vw,40px); font-size:clamp(16px,1.5vw,20px); font-weight:600; line-height:1.35 }
.hero-link { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; margin-top:20px; min-height:54px; background:var(--charcoal); color:#fff!important; padding:0 18px; font-size:13px; font-weight:800; text-decoration:none }
.hero-link span { font-size:20px; font-weight:500 }
.kinetic-strip { height:clamp(88px,9vw,142px); display:flex; align-items:center; overflow:hidden; background:var(--orange); color:var(--charcoal) }
.kinetic-track { display:flex; width:max-content; white-space:nowrap; font-size:clamp(43px,5.5vw,88px); font-weight:800; line-height:1; letter-spacing:-.075em }
.kinetic-track > span { flex:none; padding-right:.6em }
.kinetic-track b { display:inline-block; padding:0 .2em; font-size:.5em; vertical-align:.13em; font-weight:800 }
.manifesto { position:relative; background:var(--charcoal); color:var(--paper); overflow:hidden }
.manifesto::before { content:""; position:absolute; width:min(62vw,900px); aspect-ratio:1; right:-22%; top:-35%; background:var(--orange); border-radius:50%; opacity:.13 }
.manifesto-inner { position:relative; max-width:1600px; margin:auto; padding:clamp(95px,12vw,180px) clamp(22px,5vw,80px) clamp(115px,14vw,210px) }
.manifesto h2 { font-size:clamp(45px,7.3vw,120px); font-weight:800; letter-spacing:-.08em; line-height:1.03 }
.manifesto h2 .accent { color:var(--orange) }
.motion-line { display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em }
.motion-line > span { display:block }
.manifesto p { max-width:36ch; margin:clamp(45px,7vw,100px) 0 0 auto; font-size:clamp(17px,1.6vw,22px); font-weight:600; line-height:1.45 }
.story { background:var(--paper); padding:clamp(90px,10vw,150px) clamp(22px,4.6vw,74px) clamp(90px,11vw,160px)!important }
.story-heading { max-width:1450px; margin:0 auto }
.story-heading h2 { font-size:clamp(60px,10.5vw,160px); font-weight:800; letter-spacing:-.095em; line-height:.89 }
.story-heading p { max-width:30ch; margin:24px 0 0 auto; font-size:clamp(17px,1.5vw,22px); font-weight:600; line-height:1.4 }
.story-grid { max-width:1450px; margin:clamp(65px,10vw,150px) auto 0; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:auto auto auto; row-gap:clamp(70px,10vw,160px) }
.story-image { position:relative; overflow:hidden; background:#cccac1 }
.story-image img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.06); transition:transform 500ms cubic-bezier(.2,.8,.2,1) }
.story-image picture,.member-image picture { display:contents } /* <picture> only picks the file; the img still sizes against its frame */
.story-image:hover img { transform:scale(1.035) }
.story-image-main { grid-column:1/8; grid-row:1/3; aspect-ratio:.92 }
.story-image-main img { object-position:54% center }
.story-text { align-self:center }
.story-text-one { grid-column:9/13; grid-row:1 }
.story-text-two { grid-column:1/5; grid-row:3 }
.story-text h3 { font-size:clamp(31px,3.6vw,58px); font-weight:800; letter-spacing:-.07em; line-height:1.06 }
.story-text p { max-width:30ch; margin-top:22px; font-size:clamp(15px,1.3vw,19px); line-height:1.5; font-weight:600 }
.story-image-detail { grid-column:9/13; grid-row:2; aspect-ratio:1.05; transform:translateY(5%) }
.story-image-class { grid-column:6/13; grid-row:3; aspect-ratio:1.3 }
.member-section { position:relative; min-height:850px; display:flex; align-items:flex-end; overflow:hidden; background:var(--orange); color:#171514 }
.member-image { position:absolute; top:8%; right:0; bottom:0; width:50%; overflow:hidden }
.member-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.72) contrast(1.12) }
.member-copy { position:relative; z-index:1; width:100%; padding:clamp(75px,7vw,120px) clamp(22px,4.6vw,74px) }
.member-copy h2 { font-size:clamp(65px,8vw,130px); font-weight:800; letter-spacing:-.09em; line-height:.94 }
.member-copy h2 span { color:#fff }
.member-copy p { max-width:36ch; margin-top:32px; font-size:clamp(17px,1.5vw,22px); font-weight:700; line-height:1.4 }
.member-copy a { display:inline-flex; align-items:center; gap:25px; margin-top:25px; min-height:52px; padding:0 18px; background:var(--charcoal); color:#fff!important; font-size:13px; font-weight:800; text-decoration:none }
.member-copy a span { font-size:20px; font-weight:500 }
body.scroll-motion .hero-field { opacity:var(--hero-field-opacity,1); transform:translate3d(0,var(--hero-field-y,0px),0) scale(var(--hero-field-scale,1)) }
body.scroll-motion .hero-content { opacity:var(--hero-copy-opacity,1); transform:translate3d(0,var(--hero-copy-y,0px),0) }
body.scroll-motion .story-image { translate:0 var(--photo-shift,0px) }
body.scroll-motion .manifesto::before { transform:translate3d(0,var(--manifesto-shift,0px),0) }
.final-cta { display:flex; align-items:center; justify-content:center; min-height:670px; padding:80px clamp(22px,4.6vw,74px)!important; background:var(--paper); text-align:center }
.final-copy h2 { font-size:clamp(50px,8.7vw,140px); font-weight:800; letter-spacing:-.09em; line-height:.98 }
.final-copy h2 span { color:var(--orange) }
.final-copy a { display:inline-flex; align-items:center; gap:42px; min-height:58px; margin-top:46px; padding:0 22px; background:var(--orange); color:#171514!important; font-size:14px; font-weight:800; text-decoration:none }
.final-copy a span { font-size:22px; font-weight:500 }
.home-footer { display:flex; align-items:center; flex-wrap:wrap; gap:35px; min-height:140px; padding:34px clamp(22px,4.6vw,74px); background:var(--charcoal); color:var(--paper) }
.footer-logo { font-size:34px; font-weight:800; letter-spacing:-.08em; line-height:1; text-decoration:none }
.home-footer nav { display:flex; flex-wrap:wrap; gap:14px 30px; margin-left:auto }
.home-footer nav a { font-size:13px; font-weight:700; text-decoration:none }
.home-footer nav a:hover { color:var(--orange) }
.home-footer small { color:#aaa99f; font-size:11px }
@keyframes symbol-in { from { opacity:0; transform:translate(-50%,25px) rotate(-14deg) scale(.92) } to { opacity:1; transform:translate(-50%,0) rotate(-10deg) scale(1) } }
@keyframes rise-in { from { opacity:0; transform:translateY(28px) } to { opacity:1; transform:translateY(0) } }
@media(max-width:900px) { .hero-field span { top:23%; font-size:37vw } .hero-field svg { top:16%; width:37vw } .hero h1 { font-size:clamp(60px,10vw,100px) } .manifesto h2 { font-size:clamp(52px,7.5vw,80px) } .member-section { min-height:720px } .member-image { width:54% } }
@media(max-width:680px) {
  .site-header { min-height:70px; padding:14px 18px } .site-logo { font-size:25px } .site-logo svg { width:25px; height:23px } .header-actions { gap:10px }
  .language-switch button { min-height:44px; min-width:26px; font-size:10px }
  .header-login { width:65px; min-height:44px; gap:4px; font-size:10px }
  .login-long { display:none } .login-short { display:inline }
  .header-cta { display:none!important }
  .site-menu summary { min-width:44px; min-height:44px; padding:0 12px } .menu-word { display:none }
  .hero-content { padding:100px 18px 37px; min-height:100dvh } .hero-field span { top:26%; font-size:42vw } .hero-field svg { top:24%; left:50%; width:42vw; filter:drop-shadow(13px 12px 0 #20221b) }
  .hero h1 { font-size:clamp(49px,11.8vw,78px); letter-spacing:-.085em } .hero-copy p { min-height:65px; margin-top:27px; max-width:28ch; font-size:16px } .hero-link { margin-top:18px; min-height:48px }
  .manifesto-inner { padding:100px 20px 105px } .manifesto h2 { font-size:clamp(41px,9vw,66px) } .manifesto p { margin:55px 0 0 auto; max-width:30ch; font-size:17px }
  .story { padding:100px 18px 110px!important } .story-heading h2 { font-size:clamp(51px,11.5vw,82px) } .story-heading p { margin:22px 0 0; font-size:17px }
  .story-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:45px 0; margin-top:55px } .story-image-main { grid-column:1/7; grid-row:1; aspect-ratio:.9 }
  .story-text-one { grid-column:1/6; grid-row:2 } .story-image-detail { grid-column:3/7; grid-row:3; transform:none } .story-text-two { grid-column:1/6; grid-row:4 } .story-image-class { grid-column:1/7; grid-row:5; aspect-ratio:1.12 }
  .story-text h3 { font-size:36px } .story-text p { margin-top:14px; font-size:16px }
  .member-section { display:block; min-height:0 } .member-image { position:relative; top:auto; right:auto; bottom:auto; width:100%; height:330px } .member-copy { padding:52px 18px 85px }
  .member-copy h2 { font-size:clamp(57px,11.5vw,82px) } .member-copy p { max-width:28ch; font-size:17px }
  .final-cta { min-height:500px; padding:90px 18px!important } .final-copy h2 { font-size:clamp(51px,10.5vw,74px) } .final-copy a { margin-top:35px }
  .home-footer { gap:25px; padding:42px 18px } .home-footer nav { width:100%; order:3; margin-left:0 } .home-footer small { margin-left:auto }
}
@media(max-width:390px) { .hero h1 { font-size:11.4vw } .hero-field span { top:30% } .hero-field svg { top:28% } .manifesto h2 { font-size:9.1vw } }
@media(max-width:680px) { .story-heading.lang-en h2 { font-size:clamp(44px,10.5vw,72px) } .member-copy.lang-en h2 { font-size:clamp(51px,10.5vw,75px) } }
@media(max-width:350px) { .site-logo span { display:none } }
@media(prefers-reduced-motion:reduce) { .hero-field svg,.hero-line > span,.hero-field > span,.hero-copy p,.hero-copy .hero-link { animation:none!important } .story-image img { transition:none } }

/* The reference's movement is tied to the page story: type enters in sequence,
   photographs uncover as they arrive, and the hero recedes as the next scene enters. */
@media(prefers-reduced-motion:no-preference) {
  .kinetic-track { animation:strip-move 25s linear infinite }
  .hero-field > span { animation:watermark-drift 10s ease-in-out infinite }
  .hero-line > span { animation:rise-in 900ms cubic-bezier(.16,1,.3,1) backwards }
  .hero-line:nth-child(2) > span { animation-delay:160ms }
  .hero-copy p { animation:rise-in 800ms 390ms cubic-bezier(.16,1,.3,1) backwards }
  .hero-copy .hero-link { animation:rise-in 800ms 500ms cubic-bezier(.16,1,.3,1) backwards }
  .site-menu[open] .menu-panel { animation:menu-in 260ms cubic-bezier(.16,1,.3,1) both }
  .menu-bars i { transition:transform 260ms cubic-bezier(.16,1,.3,1),width 260ms cubic-bezier(.16,1,.3,1) }
  .site-menu[open] .menu-bars i:first-child { transform:translateY(3.5px) rotate(45deg) }
  .site-menu[open] .menu-bars i:last-child { width:16px; transform:translateY(-3.5px) rotate(-45deg) }
  .header-cta,.hero-link,.member-copy a,.final-copy a { transition:transform 260ms cubic-bezier(.16,1,.3,1) }
  .header-cta:hover,.hero-link:hover,.member-copy a:hover,.final-copy a:hover { transform:translateY(-3px) }

  html.motion-ready .manifesto .motion-line > span { transform:translateY(112%); transition:transform 920ms cubic-bezier(.16,1,.3,1) }
  html.motion-ready .manifesto.is-visible .motion-line > span { transform:translateY(0) }
  html.motion-ready .manifesto .motion-line:nth-child(2) > span { transition-delay:100ms }
  html.motion-ready .manifesto .motion-line:nth-child(3) > span { transition-delay:200ms }
  html.motion-ready .manifesto .motion-line:nth-child(4) > span { transition-delay:300ms }
  html.motion-ready .manifesto p { opacity:0; transform:translateY(30px); transition:opacity 700ms 430ms ease,transform 800ms 430ms cubic-bezier(.16,1,.3,1) }
  html.motion-ready .manifesto.is-visible p { opacity:1; transform:translateY(0) }

  html.motion-ready .story-heading h2,html.motion-ready .story-heading p { opacity:0; transform:translateY(50px); transition:opacity 700ms ease,transform 900ms cubic-bezier(.16,1,.3,1) }
  html.motion-ready .story-heading p { transition-delay:130ms }
  html.motion-ready .story-heading.is-visible h2,html.motion-ready .story-heading.is-visible p { opacity:1; transform:translateY(0) }
  html.motion-ready .story-text { opacity:0; transform:translateY(55px); transition:opacity 650ms ease,transform 900ms cubic-bezier(.16,1,.3,1) }
  html.motion-ready .story-text.is-visible { opacity:1; transform:translateY(0) }

  html.motion-ready .story-image::after,html.motion-ready .member-image::after { content:""; position:absolute; z-index:2; inset:0; background:var(--orange); transform:translateY(0); transition:transform 1050ms cubic-bezier(.77,0,.18,1); pointer-events:none }
  html.motion-ready .story-image.is-visible::after,html.motion-ready .member-image.is-visible::after { transform:translateY(101%) }
  html.motion-ready .story-image img { transform:scale(1.1); transition:transform 1450ms cubic-bezier(.16,1,.3,1) }
  html.motion-ready .story-image.is-visible img { transform:scale(1) }
  html.motion-ready .story-image:hover img { transform:scale(1.035) }

  html.motion-ready .member-copy h2,html.motion-ready .member-copy p,html.motion-ready .member-copy a { opacity:0; transform:translateY(55px); transition:opacity 700ms ease,transform 900ms cubic-bezier(.16,1,.3,1) }
  html.motion-ready .member-copy p { transition-delay:130ms }
  html.motion-ready .member-copy a { transition-delay:250ms }
  html.motion-ready .member-copy.is-visible h2,html.motion-ready .member-copy.is-visible p,html.motion-ready .member-copy.is-visible a { opacity:1; transform:translateY(0) }
  html.motion-ready .member-copy.is-visible a:hover { transform:translateY(-3px) }

  html.motion-ready .final-copy h2,html.motion-ready .final-copy a { opacity:0; transform:translateY(55px); transition:opacity 700ms ease,transform 900ms cubic-bezier(.16,1,.3,1) }
  html.motion-ready .final-copy a { transition-delay:170ms }
  html.motion-ready .final-copy.is-visible h2,html.motion-ready .final-copy.is-visible a { opacity:1; transform:translateY(0) }
  html.motion-ready .final-copy.is-visible a:hover { transform:translateY(-3px) }
}
@keyframes strip-move { to { transform:translateX(-50%) } }
@keyframes menu-in { from { opacity:0; transform:translateY(-9px) } to { opacity:1; transform:translateY(0) } }
@keyframes watermark-drift { 0%,100% { transform:translate(-50%,0) } 50% { transform:translate(-50%,-16px) } }
@keyframes hero-field-out { from { opacity:1; transform:translateY(0) scale(1) } to { opacity:.12; transform:translateY(-18vh) scale(.78) } }
@keyframes hero-copy-out { from { opacity:1; transform:translateY(0) } to { opacity:0; transform:translateY(-12vh) } }
@keyframes photo-pan { from { transform:translateY(-4%) scale(1.11) } to { transform:translateY(4%) scale(1.11) } }
@media(prefers-reduced-motion:no-preference) {
  @supports(animation-timeline:view()) {
    .hero { view-timeline-name:--hero; view-timeline-axis:block }
    body:not(.scroll-motion) .hero-field { animation:hero-field-out linear both; animation-timeline:--hero; animation-range:exit 0% exit 100% }
    body:not(.scroll-motion) .hero-content { animation:hero-copy-out linear both; animation-timeline:--hero; animation-range:exit 0% exit 100% }
    body:not(.scroll-motion) .story-image,body:not(.scroll-motion) .member-image { view-timeline-name:--photo; view-timeline-axis:block }
    body:not(.scroll-motion) .story-image img,body:not(.scroll-motion) .member-image img { animation:photo-pan linear both; animation-timeline:--photo; animation-range:entry 0% exit 100% }
  }
}