.story-voyage{
  position:fixed;
  z-index:16;
  left:18px;
  top:22vh;
  height:56vh;
  width:18px;
  pointer-events:none
}
.story-voyage-line{
  position:absolute;
  left:8px;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(255,255,255,.18)
}
.story-voyage-line:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:calc(var(--story,0) * 100%);
  background:#741330
}
.story-voyage-dot{
  position:absolute;
  left:4px;
  top:calc(var(--story,0) * 100%);
  width:9px;
  height:9px;
  border-radius:50%;
  background:#741330;
  transform:translateY(-50%);
  box-shadow:0 0 0 6px rgba(116,19,48,.18)
}
.story-voyage-word{
  position:absolute;
  left:22px;
  top:50%;
  font:500 10px/1 var(--mono);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl
}
.site-header.is-light ~ .story-voyage-word,
html:has(.site-header.is-light) .story-voyage-word{color:rgba(23,19,21,.4)}
html:has(.site-header.is-light) .story-voyage-line{background:rgba(0,0,0,.12)}

.story-chapters{
  position:fixed;
  z-index:16;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px
}
.story-chapters a{
  display:flex;
  align-items:center;
  gap:10px;
  font:500 10px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  opacity:.7
}
.story-chapters a b{font:500 10px var(--mono)}
.story-chapters a span{display:none}
.story-chapters a.is-on,
.story-chapters a:hover{
  color:#fff;
  opacity:1
}
html:has(.site-header.is-light) .story-chapters a{color:rgba(23,19,21,.4)}
html:has(.site-header.is-light) .story-chapters a.is-on,
html:has(.site-header.is-light) .story-chapters a:hover{color:var(--burgundy)}

.story-skip{
  position:fixed;
  z-index:16;
  right:22px;
  bottom:96px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background:#fff;
  color:#000;
  font:500 11px var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)
}
.story-skip.is-on{opacity:1;pointer-events:auto;transform:none}
.story-skip span{font-size:16px}

.story-hero{
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(220px,.7fr);
  align-items:end;
  gap:clamp(24px,5vw,72px);
  padding:160px 7vw 80px;
  overflow:visible;
  position:relative
}
.story-hero-glow{
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at 72% 42%,#8b4a55 0,#510e22 22%,#160d10 52%,#000 76%);
  filter:blur(28px);
  opacity:.9;
  pointer-events:none
}
.story-hero-copy{position:relative;z-index:2;padding-bottom:8vh}
.story-hero h1{
  font:500 clamp(56px,9vw,148px)/.82 var(--serif);
  letter-spacing:-.07em;
  margin:22px 0 28px;
  max-width:14ch
}
.story-hero h1 em{font-style:italic;font-weight:500;color:var(--accent-soft)}
.story-hero-lead{max-width:38ch;color:#ddd1d4;font-size:18px}
.story-hero-photo{
  position:relative;
  z-index:2;
  width:min(100%,400px);
  justify-self:end;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:clamp(28px,5.5vw,72px) 0 clamp(28px,5.5vw,72px) 0;
  background:#1a1013
}
.story-hero-photo img{
  width:100%;
  height:120%;
  object-fit:cover;
  object-position:50% 16%;
  display:block
}
.story-scroll{
  position:absolute;
  left:7vw;
  bottom:28px;
  z-index:3;
  margin:0;
  display:flex;
  align-items:center;
  gap:12px;
  font:500 10px var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#c6b9bc
}
.story-scroll i{
  width:1px;
  height:42px;
  background:linear-gradient(#741330,#fff0);
  animation:story-drip 1.6s ease-in-out infinite
}

.story-pin{position:relative}
.story-pin-sticky{
  position:sticky;
  top:0;
  height:100dvh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:96px 7vw 48px;
  overflow:hidden
}
.story-pin-fit{
  width:100%;
  max-height:100%;
  transform-origin:center center
}

.story-tension{
  position:relative;
  min-height:42vh;
  display:grid;
  place-items:center
}
.story-tension p{
  grid-area:1/1;
  margin:0;
  font:500 clamp(40px,7vw,104px)/.95 var(--serif);
  letter-spacing:-.06em;
  text-align:center;
  max-width:16ch;
  opacity:0;
  transform:translateY(28px) scale(.96);
  filter:blur(8px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .7s ease
}
.story-tension p.is-on{
  opacity:1;
  transform:none;
  filter:none
}
.story-tension p span{color:var(--accent);font-style:italic}

.story-meet{padding:140px 0}
.story-meet-grid{
  display:grid;
  grid-template-columns:minmax(240px,.9fr) minmax(0,1.1fr);
  gap:clamp(36px,7vw,100px);
  align-items:center
}
.story-meet-photo{
  position:relative;
  top:auto;
  margin:0;
  max-height:min(72vh,640px);
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:clamp(28px,5.5vw,72px) 0 clamp(28px,5.5vw,72px) 0;
  background:#1a1013
}
.story-meet-photo img{
  width:100%;
  height:115%;
  object-fit:cover;
  object-position:50% 14%;
  display:block
}
.story-meet-photo small{
  position:absolute;
  left:22px;
  bottom:22px;
  font:500 10px/1.4 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff
}
.story-meet-copy h2{
  font:500 clamp(52px,7vw,110px)/.88 var(--serif);
  letter-spacing:-.065em;
  margin:18px 0 28px
}
.story-meet-copy h2 span{color:var(--accent);font-style:italic}
.story-meet-copy p{color:#5c5556;font-size:18px;max-width:42ch}

#work .story-pin-sticky{
  justify-content:flex-start;
  padding-bottom:72px
}
.story-work{
  margin-top:36px;
  overflow:hidden
}
.story-work-track{
  display:flex;
  flex-direction:column;
  will-change:transform
}
.story-work a{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid var(--line);
  color:#fff
}
.story-work a:last-child{border-bottom:1px solid var(--line);padding-bottom:22px}
.story-work .num{font:500 11px var(--mono);color:#e7c4cb}
.story-work h3{
  margin:0;
  font:500 clamp(24px,3.2vw,42px)/.95 var(--serif);
  letter-spacing:-.05em
}
.story-work p{
  margin:6px 0 0;
  max-width:46ch;
  color:#c8babe;
  font-size:14px;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity .45s ease,max-height .5s cubic-bezier(.16,1,.3,1)
}
.story-work a.is-on p{opacity:1;max-height:72px}
.story-work .arrow{font-size:22px;opacity:.5}
.story-work a.is-on{color:#fff}
.story-work a.is-on h3{font-style:italic}

.story-method-mark{
  position:absolute;
  right:4vw;
  top:18%;
  margin:0;
  font:500 clamp(120px,22vw,280px)/.8 var(--serif);
  letter-spacing:-.1em;
  color:rgba(255,255,255,.06);
  pointer-events:none
}
.story-method{margin-top:28px;min-height:22vh}
.story-method article{
  display:none;
  max-width:640px;
  margin-bottom:0
}
.story-method article.is-on{display:block;animation:story-rise .45s cubic-bezier(.16,1,.3,1)}
.story-method h3{
  font:500 clamp(40px,6vw,84px)/.9 var(--serif);
  letter-spacing:-.06em;
  margin:0 0 16px
}
.story-method p{color:#c6b9bc;font-size:18px}
.story-method .story-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.story-method .story-tags span{
  border:1px solid var(--line);
  padding:9px 13px;
  font:500 10px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase
}

.story-proof-head{margin-bottom:36px}
.story-proof-head h2,
.story-why h2,
[data-story-work-title],
[data-story-method-title]{
  font:500 clamp(40px,5.6vw,84px)/.88 var(--serif);
  letter-spacing:-.065em;
  margin:12px 0 0
}
.story-proof-head h2 span,
[data-story-work-title] span,
[data-story-method-title] span,
.story-why h2 em{color:var(--accent);font-style:italic;font-weight:500}
.section-burgundy [data-story-work-title] span,
.story-why h2 em{color:var(--accent-soft)}

.story-rail{
  display:flex;
  gap:12px;
  width:max-content;
  padding:0 7vw;
  will-change:transform
}
.story-rail-frame{
  overflow:hidden;
  width:100vw;
  margin-left:calc(50% - 50vw)
}
.story-rail a{
  flex:0 0 min(42vw,300px);
  aspect-ratio:4/5;
  max-height:min(46vh,380px);
  scroll-snap-align:start;
  position:relative;
  overflow:hidden;
  border-radius:clamp(24px,3vw,48px) 0 clamp(24px,3vw,48px) 0;
  background:#1a1013;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:28px;
  opacity:.42;
  transition:opacity .45s ease
}
.story-rail a.is-on{opacity:1}
.story-rail img{
  position:absolute;
  inset:0;
  width:100%;
  height:115%;
  object-fit:cover;
  display:block
}
.story-rail a:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(10,6,8,.78),transparent 52%)
}
.story-rail span,.story-rail strong{position:relative;z-index:1}
.story-rail span{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#e7c4cb}
.story-rail strong{display:block;margin-top:10px;font:500 clamp(32px,4vw,52px)/.9 var(--serif);letter-spacing:-.05em}

.story-why-list{margin-top:28px;display:flex;flex-direction:column;gap:0}
.story-why-list div{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:18px;
  padding:14px 0;
  border-top:1px solid var(--line);
  opacity:.32;
  transform:translateX(-10px);
  transition:opacity .4s ease,transform .45s cubic-bezier(.16,1,.3,1)
}
.story-why-list div.is-on{opacity:1;transform:none}
.story-why-list b{font:500 11px var(--mono);color:#e7c4cb}
.story-why-list span{font:500 clamp(22px,3vw,34px)/1.2 var(--serif);letter-spacing:-.03em}

#connect{scroll-margin-top:96px}

.story-progress,.story-beat{display:none}

@keyframes story-drip{
  0%,100%{transform:scaleY(.4);opacity:.4}
  50%{transform:scaleY(1);opacity:1}
}
@keyframes story-rise{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

@media(max-width:980px){
  .story-voyage,.story-chapters{display:none}
  .story-hero{
    grid-template-columns:1fr;
    align-content:space-between;
    min-height:100svh;
    padding:128px 24px 72px;
    gap:28px
  }
  .story-hero-copy{padding-bottom:0}
  .story-hero-photo{width:min(72vw,320px);max-height:38vh;justify-self:end}
  .story-skip{display:none}
}

@media(max-width:800px){
  .story-progress{
    display:block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:21;
    height:2px;
    pointer-events:none
  }
  .story-progress i{
    display:block;
    height:100%;
    width:calc(var(--story,0) * 100%);
    background:#741330
  }
  .story-beat{
    display:block;
    position:fixed;
    left:18px;
    bottom:max(18px,env(safe-area-inset-bottom));
    z-index:16;
    margin:0;
    font:500 10px/1 var(--mono);
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,.42);
    pointer-events:none
  }
  html:has(.site-header.is-light) .story-beat{color:rgba(23,19,21,.38)}

  .story-hero-glow{display:none !important}
  .story-hero{
    min-height:100svh;
    min-height:100dvh;
    padding:118px 20px 80px;
    gap:22px
  }
  .story-hero h1{font-size:clamp(42px,13vw,68px);margin:14px 0 16px}
  .story-hero-lead{font-size:16px;max-width:28ch}
  .story-hero-photo{width:min(64vw,260px);max-height:34vh;border-radius:36px 0 36px 0}
  .story-scroll{left:20px;bottom:max(48px,calc(env(safe-area-inset-bottom) + 36px))}

  #tension .story-pin-sticky,
  #method .story-pin-sticky,
  #proof .story-pin-sticky{
    position:sticky;
    top:0;
    height:100svh;
    height:100dvh;
    min-height:100svh;
    overflow:hidden;
    justify-content:center;
    padding:112px 20px 48px
  }
  #proof .story-pin-sticky{
    justify-content:flex-start;
    padding:100px 0 36px
  }
  #work .story-pin,
  #promise .story-pin{height:auto !important}
  #work .story-pin-sticky,
  #promise .story-pin-sticky{
    position:relative;
    height:auto;
    min-height:0;
    overflow:visible;
    justify-content:flex-start;
    padding:96px 20px 72px
  }
  .story-pin-fit{transform:none !important;max-height:none}

  .story-tension{
    min-height:38vh;
    display:grid;
    place-items:center start
  }
  .story-tension p{
    grid-area:1/1;
    text-align:left;
    font-size:clamp(36px,11vw,54px);
    max-width:12ch
  }

  .story-meet{padding:88px 0}
  .story-meet-grid{grid-template-columns:1fr;gap:28px}
  .story-meet-photo{
    position:relative;
    top:auto;
    max-height:46vh;
    width:min(84%,340px)
  }
  html.js .story-meet-copy,
  html.js .story-meet-photo{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)
  }
  html.js .story-meet.is-in .story-meet-copy,
  html.js .story-meet.is-in .story-meet-photo{opacity:1;transform:none}
  html.js .story-meet.is-in .story-meet-copy{transition-delay:.08s}
  .story-meet-copy h2{font-size:clamp(40px,12vw,64px)}
  .story-meet-copy p{font-size:16px}

  #work .story-chapter-head,
  #promise .story-chapter-head{
    position:sticky;
    top:58px;
    z-index:3;
    padding:12px 0 16px;
    margin:0 0 8px;
    background:linear-gradient(to bottom,var(--burgundy) 76%,transparent)
  }
  .story-work{overflow:visible;margin-top:12px}
  .story-work-track{transform:none !important}
  .story-work a{
    grid-template-columns:40px minmax(0,1fr) auto;
    gap:12px;
    padding:18px 0;
    opacity:.34;
    transition:opacity .4s ease
  }
  .story-work a.is-on{opacity:1}
  .story-work h3{font-size:clamp(26px,8vw,38px)}
  .story-work a p{font-size:14px}
  .story-work a.is-on p{max-height:8em}

  .story-method-mark{
    display:block;
    top:14%;
    right:12px;
    font-size:clamp(96px,28vw,180px);
    color:rgba(255,255,255,.07)
  }
  .story-method{min-height:0;margin-top:20px}
  .story-method article{display:none}
  .story-method article.is-on{display:block}
  .story-method h3{font-size:clamp(36px,11vw,52px)}
  .story-method p{font-size:16px}

  .story-proof-head h2,
  .story-why h2,
  [data-story-work-title],
  [data-story-method-title]{font-size:clamp(36px,11vw,56px)}
  .story-proof-head{padding:0 20px;margin-bottom:22px}
  .story-rail-frame{
    overflow:hidden;
    width:100vw;
    margin-left:0;
    padding:0
  }
  .story-rail{padding:0 20px;gap:12px}
  .story-rail a{
    flex-basis:min(78vw,320px);
    max-height:min(48vh,400px)
  }

  .story-why-list{margin-top:12px}
  .story-why-list div{
    grid-template-columns:40px minmax(0,1fr);
    gap:12px;
    padding:18px 0
  }
  .story-why-list span{font-size:clamp(20px,5.8vw,28px)}

  .story-skip{display:none}
  #connect{padding-bottom:28px}
  body[data-page="story"] .faq{padding-bottom:120px}
}

@media(prefers-reduced-motion:reduce){
  .story-tension p,
  .story-work p,
  .story-why-list div,
  .story-skip,
  .story-scroll i{transition:none;animation:none}
  .story-pin{height:auto !important}
  .story-pin-sticky{position:relative;height:auto;min-height:0;overflow:visible}
  .story-pin-fit,.story-rail,.story-work-track{transform:none !important}
  .story-tension p{opacity:1;transform:none;filter:none;position:relative}
  .story-work{overflow:visible}
  .story-work a p{opacity:1;max-height:none}
  .story-method article{display:block;animation:none;margin-bottom:32px}
  .story-rail a{opacity:1}
  .story-why-list div{opacity:1;transform:none}
  html.js .story-meet-copy,
  html.js .story-meet-photo{
    opacity:1 !important;
    transform:none !important;
    transition:none !important
  }
}