:root {
    color-scheme: dark;
    --white: #f6f4ef;
    --muted: rgba(255,255,255,.75);
    --black: #111111;
}
* { box-sizing: border-box; }
html { margin:0; }
body {
    margin:0; color:var(--white); background:var(--black);
    font-family:Arial,Helvetica,sans-serif;
    -webkit-font-smoothing:antialiased;
}
body.locked {overflow:hidden;}
a {color:inherit;text-decoration:none;}
button,input,textarea {font:inherit;}
button {cursor:pointer;}
[hidden] {display:none!important;}
.site-header {
    position:fixed; top:0; left:0; width:100%; height:90px;
    z-index:100; display:flex; justify-content:space-between;
    align-items:center; padding:0 5vw;
    transition:background .3s;
}
.site-header.scrolled {
    background:linear-gradient(#080808d9,#0808086b);
}
.logo {
    display:flex; align-items:center; gap:10px;
    font-size:23px; font-weight:800;
    letter-spacing:-1.4px; line-height:1;
}
.logo span {font-weight:400;}
.header-actions {display:flex;gap:30px;align-items:center;}
.header-button {
    background:none; border:0; padding:10px 0;
    color:white; font-size:12px; font-weight:700;
    letter-spacing:.15em; text-transform:uppercase;
}
.header-button:hover {opacity:.7;}
.chapter {height:175svh; position:relative;}
.panel {
    position:sticky; top:0;
    height:100svh; width:100%; overflow:hidden;
    background:#161616;
}
.poster,.background-video,.shade {
    position:absolute; inset:0;
    width:100%; height:100%;
}
.poster {object-fit:cover;}
.background-video {object-fit:cover; pointer-events:none;}
.vimeo-frame {
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:max(100vw,177.78svh);
    height:max(100svh,56.25vw);
    border:0;
    pointer-events:none;
}
.shade {
    background:
        linear-gradient(90deg,rgba(0,0,0,.59),rgba(0,0,0,.1) 85%),
        linear-gradient(0deg,rgba(0,0,0,.4),transparent 50%);
}
.copy {
    position:absolute;
    left:8vw; bottom:15vh;
    z-index:2; max-width:960px;
    will-change:transform,opacity;
}
.eyebrow {
    font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.22em;
    margin:0 0 25px;
}
.copy h1,.copy h2 {
    margin:0 0 22px; font-size:clamp(3rem,7.8vw,8.5rem);
    line-height:.96; letter-spacing:-.065em; font-weight:700;
}
.copy .subtitle {
    max-width:610px; font-size:clamp(16px,1.7vw,23px);
    line-height:1.45; color:var(--muted); margin:0 0 35px;
}
.cta {
    display:inline-flex; gap:30px;
    align-items:center; padding:0 0 11px;
    border-bottom:1px solid #fff;
    font-size:12px; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase;
}
.cta:hover {color:#d7b68b;border-color:#d7b68b;}
.chapter-number {
    position:absolute; right:5vw; bottom:6vh;
    z-index:3; font-size:12px; letter-spacing:.22em;
}
.footer {
    min-height:270px; padding:90px 6vw 30px;
    display:flex; justify-content:space-between;
    gap:25px; flex-wrap:wrap; background:#111;
    border-top:1px solid #ffffff22;
}
.footer-links {
    display:flex; gap:24px; flex-wrap:wrap;
    font-size:12px; text-transform:uppercase;
    letter-spacing:.09em;
}
.footer small {color:#999;align-self:end;}
dialog {
    border:1px solid #444; border-radius:0;
    padding:38px; background:#171717; color:#fff;
    width:min(540px,94vw); max-height:92vh; overflow:auto;
}
dialog::backdrop {background:#000c;}
dialog h2 {
    font-size:clamp(28px,4vw,43px); margin:0 0 30px;
    letter-spacing:-.05em;
}
.close {
    position:absolute;right:15px;top:10px;
    background:none;border:0;color:white;
    font-size:28px;
}
form {display:grid;gap:15px;}
form label {font-size:12px;color:#bbb;}
form input,form textarea {
    margin-top:6px; padding:13px; display:block;
    width:100%; border:1px solid #555;
    background:#242424; color:white; border-radius:0;
}
form textarea {min-height:125px;resize:vertical;}
.send {
    padding:15px;background:white;border:0;
    color:#111;font-weight:700;text-transform:uppercase;
}
.send:disabled {opacity:.5;}
#formStatus {min-height:24px;font-size:13px;color:#ddd;}
.trap {position:absolute;left:-10000px;}
@media(max-width:700px) {
    .site-header {height:70px;padding:0 5vw;}
    .logo {font-size:20px;}
    .header-actions {gap:18px;}
    .dropdown {right:5vw;left:5vw;min-width:0;top:62px;}
    .chapter {height:150svh;}
    .copy {left:6vw;right:6vw;bottom:16vh;}
    .copy h1,.copy h2 {font-size:clamp(44px,12vw,74px);}
    .copy .subtitle {font-size:16px;}
    .footer {padding:60px 6vw 28px;}
    .footer-links {gap:17px;}
    dialog {padding:34px 20px;}
}
@media(prefers-reduced-motion:reduce) {
    .chapter {height:100svh;}
    .copy {will-change:auto!important;transform:none!important;opacity:1!important;}
}
  
  /* 45 SOUTH — Scrollytelling v2 */
  
  .logo img {
    width:auto;
    height:42px;
    max-width:190px;
    object-fit:contain;
    display:block;
  }
  
  .story-scroll {
    position:relative;
    isolation:isolate;
    background:#080808;
  }
  
  .story-stage {
    position:sticky;
    top:0;
    height:100svh;
    overflow:hidden;
    background:#080808;
    contain:layout paint;
  }
  
  .story-stage > .panel {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    transform:translate3d(0,100%,0);
    will-change:transform;
    backface-visibility:hidden;
  }
  
  .story-stage > .panel:first-child {
    transform:translate3d(0,0,0);
  }
  
  .story-stage .poster,
  .story-stage .background-video {
    width:100%;
    height:100%;
    object-fit:cover;
  }
  
  .story-stage .vimeo-frame {
    opacity:0;
    transition:opacity .5s ease;
  }
  
  .story-stage .vimeo-frame.is-loaded {
    opacity:1;
  }
  
  .story-stage .shade {
    background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.42),
      rgba(0,0,0,.02) 88%
    ),
    linear-gradient(
      0deg,
      rgba(0,0,0,.32),
      transparent 48%
    );
  }
  
  /* The copy enters and leaves independently of the video. */
  
  .story-stage .copy {
    bottom:17vh;
    max-width:980px;
    opacity:0;
    transform:translate3d(0,70px,0);
    will-change:transform,opacity;
    pointer-events:none;
  }
  
  .story-stage .copy a {
    pointer-events:auto;
  }
  
  .story-stage .eyebrow,
  .story-stage .subtitle,
  .story-stage .cta {
    opacity:0;
    will-change:opacity;
  }
  
  .story-stage .copy h1,
  .story-stage .copy h2 {
    font-size:clamp(3.6rem,8.1vw,9.6rem);
    font-weight:700;
    letter-spacing:-.075em;
    line-height:.94;
    max-width:1050px;
    text-wrap:balance;
  }
  
  .story-stage .subtitle {
    font-size:clamp(16px,1.5vw,21px);
    line-height:1.5;
    max-width:540px;
  }
  
  .story-stage .cta {
    gap:42px;
    font-size:11px;
    letter-spacing:.16em;
    padding-bottom:14px;
  }
  
  .story-stage .chapter-number {
    bottom:5vh;
    opacity:.8;
    font-size:11px;
  }
  
  .site-header {
    height:100px;
    padding:0 5vw;
  }
  
  .site-header.scrolled {
    background:linear-gradient(
      rgba(0,0,0,.34),
      transparent
    );
  }
  
  /* Editorial footer */
  
  .footer-v2 {
    position:relative;
    display:block;
    background:#111112;
    padding:0;
    min-height:auto;
    border:0;
  }
  
  .footer-v2-inner {
    width:min(90%,1600px);
    margin:auto;
  }
  
  .footer-v2-heading {
    padding:125px 0 145px;
  }
  
  .footer-v2-heading h2 {
    font-size:clamp(3.5rem,8vw,10rem);
    line-height:1.02;
    font-weight:700;
    letter-spacing:-.075em;
    margin:30px 0 48px;
    color:#f1f0ed;
  }
  
  .footer-v2-heading h2 em {
    font-family:Georgia,serif;
    font-weight:400;
    letter-spacing:-.065em;
  }
  
  .footer-contact {
    display:inline-flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
    padding:12px 0;
    background:transparent;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.8);
    color:white;
    font-size:12px;
    font-weight:700;
    letter-spacing:.15em;
  }
  
  .footer-contact span {
    font-size:23px;
    font-weight:400;
  }
  
  .footer-v2-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    border-top:1px solid rgba(255,255,255,.18);
    padding:43px 0;
  }
  
  .footer-v2-links {
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
  }
  
  .footer-v2-links a,
  .footer-v2-links button {
    border:0;
    background:none;
    color:#ddd;
    padding:0;
    font-size:10px;
    letter-spacing:.13em;
    font-weight:700;
    cursor:pointer;
  }
  
  .footer-v2-links a:hover,
  .footer-v2-links button:hover {
    color:#d7b68b;
  }
  
  .footer-v2-legal {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:24px 0 36px;
    border-top:1px solid rgba(255,255,255,.12);
    color:#858585;
    font-size:9px;
    letter-spacing:.13em;
  }
  
  /* Mobile */
  
  @media(max-width:700px) {
    .logo img {
      height:33px;
      max-width:155px;
    }
    
    .site-header {
      height:75px;
    }
    
    .story-stage .copy {
      left:6vw;
      right:6vw;
      bottom:19vh;
    }
    
    .story-stage .copy h1,
    .story-stage .copy h2 {
      font-size:clamp(3rem,11vw,5.8rem);
    }
    
    .story-stage .shade {
      background:linear-gradient(
        0deg,
        rgba(0,0,0,.58),
        rgba(0,0,0,.05) 80%
      );
    }
    
    .footer-v2-inner {
      width:88%;
    }
    
    .footer-v2-heading {
      padding:90px 0;
    }
    
    .footer-v2-heading h2 {
      font-size:clamp(3rem,11vw,5rem);
    }
    
    .footer-v2-bottom {
      align-items:flex-start;
      flex-direction:column;
    }
    
    .footer-v2-links {
      gap:22px;
    }
    
    .footer-v2-legal {
      flex-direction:column;
    }
  }
  
  /* Reduced-motion accessibility fallback */
  
  @media(prefers-reduced-motion:reduce) {
    .story-scroll {
      height:auto!important;
    }
    
    .story-stage {
      position:static;
      height:auto;
      overflow:visible;
    }
    
    .story-stage > .panel {
      position:relative;
      height:100svh;
      transform:none!important;
      will-change:auto;
    }
    
    .story-stage .copy {
      opacity:1!important;
      transform:none!important;
    }
    
    .story-stage .eyebrow,
    .story-stage .subtitle,
    .story-stage .cta {
      opacity:1!important;
    }
  }

/* 45 SOUTH — First title is visible on the initial paint. */
.story-stage > .panel:first-child .copy {
  opacity:1;
  transform:translate3d(0,0,0);
}
.story-stage > .panel:first-child :is(.eyebrow,.subtitle,.cta) {opacity:1}
.story-stage > .panel {transition:none}

/* 45 SOUTH — full-frame dissolves and progressive copy. */
.story-stage > .panel {transform:none!important;border:0;outline:0;box-shadow:none}
.story-stage .copy {transition:none}
.story-stage > .panel:first-child .subtitle,
.story-stage > .panel:first-child .cta {opacity:0}
.story-stage .copy .cta {
  display:inline-flex;align-items:center;justify-content:space-between;gap:26px;
  min-height:54px;padding:0 8px 0 22px;border:1px solid rgba(255,255,255,.7);
  border-radius:4px;background:rgba(12,18,22,.34);color:#fff;
  font-size:11px;line-height:1.3;letter-spacing:.1em;text-decoration:none;
}
.story-stage .copy .cta .home-cta-plus {
  display:grid;place-items:center;width:36px;height:36px;border-radius:2px;
  background:#007db9;color:#fff;font:300 28px/1 Arial,sans-serif;
}
.story-stage .copy .cta:hover {background:rgba(0,125,185,.22);border-color:#fff;color:#fff}
.story-stage .copy .cta:focus-visible {outline:2px solid #fff;outline-offset:5px}
@media(prefers-reduced-motion:reduce) {
  .story-stage > .panel {opacity:1!important}
  .story-stage .copy .cta,.story-stage .copy .subtitle {opacity:1!important;transform:none!important}
}

/* STEP 67 — continuous vertical panels, with no cut or dissolve. */
.story-stage > .panel{transform:translate3d(0,var(--scene-y67,100%),0)!important;transition:none!important}
.story-stage > .panel:first-child{--scene-y67:0%}
.home-scroll67{position:absolute;left:50%;bottom:24px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:9px;margin:0;color:#fff;transform:translateX(-50%);font:600 10px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.12em;pointer-events:none;text-shadow:0 1px 8px #0008;will-change:opacity}
.home-scroll67 svg{width:24px;height:34px;overflow:visible}
.home-scroll67__wheel{animation:home-wheel67 1.6s ease-in-out infinite}
@keyframes home-wheel67{0%,100%{transform:translateY(0);opacity:1}65%{transform:translateY(6px);opacity:.2}}
@media(prefers-reduced-motion:reduce){.story-stage > .panel{transform:none!important}.home-scroll67{display:none}.home-scroll67__wheel{animation:none}}

/* STEP 69 — text-free opening, raised hint and overlapping pixel-aligned panels. */
.home-scroll67{bottom:54px}
.story-stage > .panel{inset:-1px 0 auto;height:calc(100% + 2px);border:0!important;outline:0!important;box-shadow:none!important}
.story-stage .poster,.story-stage .background-video,.story-stage .vimeo-frame{border:0;outline:0;box-shadow:none}
.story-stage > .panel:first-child .copy{opacity:0;transform:translate3d(0,150vh,0)}
@media(prefers-reduced-motion:reduce){.story-stage > .panel{inset:auto;height:100svh}.story-stage > .panel:first-child .copy{opacity:1!important;transform:none!important}}

/* STEP 71 - Crop the media edges inside each already overlapping panel. */
.story-stage .poster,.story-stage .background-video{transform:scale(1.035);transform-origin:center;display:block}
.story-stage .vimeo-frame{transform:translate(-50%,-50%) scale(1.035);transform-origin:center;display:block}

.home-media80{position:absolute;inset:0;pointer-events:none}
@media(max-width:700px){.story-stage .chapter-number,.chapter .chapter-number{display:none}}