/* Sprint 01: header, hero and the first hand-off into selected work. */
.cherry-signal .site-header{
  height:96px;
  border-bottom-color:rgba(74,51,51,.13);
  background:var(--bone);
}
.cherry-signal .site-header:after{content:none}
.cherry-signal .site-header__inner{height:100%;gap:clamp(24px,4vw,68px)}
.cherry-signal .wordmark{gap:11px}
.cherry-signal .nav__list{gap:clamp(26px,3vw,52px)}
.cherry-signal .site-header__cta{min-height:48px;padding-inline:22px}
.cherry-signal .site-header.is-stuck{
  height:72px;
  background:rgba(243,240,233,.86);
  border-bottom-color:rgba(74,51,51,.09);
  box-shadow:0 10px 35px rgba(52,27,31,.035);
}
.cherry-signal .site-header:not(.is-stuck) .site-header__cta{
  border-color:rgba(255,255,255,.58);
}

.cherry-signal .cd-hero{
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-inline:var(--gutter);
  min-height:clamp(820px,56.28vw,941px);
  padding-top:clamp(142px,10vw,176px);
  padding-bottom:clamp(64px,5vw,84px);
  overflow:clip;
  isolation:isolate;
}
.cherry-signal .cd-hero__meta{margin-bottom:clamp(18px,1.3vw,24px)}
.cherry-signal .cd-hero__title{
  width:51%;
  font-size:clamp(66px,6.15vw,104px);
  line-height:.98;
  letter-spacing:-.069em;
}
.cherry-signal .cd-hero__title>.reveal-line:nth-child(2){margin-left:0}
.cherry-signal .cd-hero__base{margin-top:clamp(16px,1.2vw,22px)}
.cherry-signal .cd-hero__copy{width:min(36%,460px)}
.cherry-signal .cd-hero__copy>p{
  max-width:36ch;
  margin-bottom:28px;
  color:#625a55;
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.75;
}
.cherry-signal .cd-hero__actions{flex-direction:row;align-items:center;gap:clamp(20px,2.8vw,44px)}
.cherry-signal .cd-hero__actions>.btn{min-height:52px;padding-inline:21px}
.cherry-signal .cd-hero__actions>.btn{min-width:274px;justify-content:space-between}
.cherry-signal .cd-hero__actions>.cd-text-link{white-space:nowrap}

.cherry-signal .signal-studio{
  position:absolute;
  inset:0 auto auto 50%;
  width:100vw;
  height:100%;
  margin-left:-50vw;
  aspect-ratio:auto;
  z-index:1;
  pointer-events:none;
  perspective:2200px;
  filter:none;
}
.cherry-signal .signal-studio:before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0 0 0 75.5vw;
  width:auto;
  background:
    repeating-linear-gradient(90deg,transparent 0 13px,rgba(255,255,255,.045) 13px 15px,rgba(0,0,0,.16) 15px 18px) right/8.5% 100% no-repeat,
    linear-gradient(90deg,#5a1521 0%,#260d12 68%,#12090b 100%);
}
/* One stationary wall behind both the transparent header and the scene.
   Keep it outside the animated/resized figure so its edge never shifts. */
@media (min-width:701px){
  .cherry-signal .cd-hero:before{
    content:"";
    position:absolute;
    inset:0 0 0 75.5%;
    z-index:0;
    background:
      repeating-linear-gradient(90deg,transparent 0 13px,rgba(255,255,255,.045) 13px 15px,rgba(0,0,0,.16) 15px 18px) right/8.5% 100% no-repeat,
      linear-gradient(90deg,#5a1521 0%,#260d12 68%,#12090b 100%);
    pointer-events:none;
  }
  .cherry-signal .site-header:not(.is-stuck){
    background:transparent;
    border-bottom-color:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .cherry-signal .site-header:not(.is-stuck):before{
    content:"";
    display:block;
    inset:auto 24.5% -1px 0;
    height:1px;
    background:rgba(74,51,51,.13);
  }
  .cherry-signal .signal-studio:before,
  .cherry-signal .signal-studio:after{display:none}
}
.cherry-signal .signal-studio:after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:0;
  background:radial-gradient(ellipse 44% 42% at var(--light-x,64%) var(--light-y,58%),rgba(176,28,45,.34),transparent 70%);
  mix-blend-mode:multiply;
  pointer-events:none;
}
.signal-studio__object{
  --depth-y:0deg;
  --scene-x:0px;
  --scene-y:115px;
  position:absolute;
  inset:0 0 auto auto;
  width:78%;
  height:calc(100% - 115px);
  aspect-ratio:auto;
  transform:translate3d(calc(var(--scene-x) + var(--depth-shift-x,0px)),calc(var(--scene-y) + var(--depth-shift-y,0px)),0) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y));
  transform-origin:68% 52%;
  will-change:transform;
  clip-path:none;
  mask-image:none;
  -webkit-mask-image:none;
  transition:transform .85s cubic-bezier(.2,.7,.2,1);
}
.signal-studio__object:before,.signal-studio__object:after{content:none}
.cherry-signal .signal-studio__photo{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center top;
}
.signal-studio__screen,.signal-studio__light{display:none!important}
.signal-studio figcaption,.signal-hero-note,.hero-copy-label{display:none!important}

/* The existing signal SVG remains the technical anchor, but this sprint exposes
   only its first quiet arc and clips it before the projects themselves. */
.signal-thread{height:calc(var(--signal-hero-end, 980px) + 2px)}
.signal-thread__track{opacity:.07}
.signal-thread__active{opacity:.38}

@media (min-width:1500px){
  .cherry-signal .cd-hero__title{width:55%}
}
@media (max-width:1100px) and (min-width:701px){
  .cherry-signal .cd-hero{min-height:830px;padding-top:140px}
  .cherry-signal .cd-hero__title{width:67%;font-size:7.7vw}
  .cherry-signal .signal-studio{inset:0 auto auto 50%;width:112vw;margin-left:-56vw}
  .signal-studio__object{--scene-x:0px;--scene-y:90px;width:82%;height:calc(100% - 90px)}
  .cherry-signal .cd-hero__copy{width:34%}
}
@media (max-width:700px){
  .cherry-signal .site-header{height:76px}
  .cherry-signal .site-header.is-stuck{height:64px}
  .cherry-signal .site-header:after{display:none}
  .cherry-signal .cd-hero{min-height:0;padding-top:116px;padding-bottom:58px}
  .cherry-signal .cd-hero__title{width:100%;font-size:11.4vw;line-height:1.03}
  .cherry-signal .cd-hero__base{margin-top:28px;gap:34px}
  .cherry-signal .cd-hero__copy{width:100%}
  .cherry-signal .cd-hero__actions{flex-direction:column;align-items:flex-start;gap:8px}
  .cherry-signal .signal-studio{
    position:relative;
    inset:auto;
    width:calc(100% + 2 * var(--gutter));
    height:auto;
    aspect-ratio:1672/941;
    margin-inline:calc(-1 * var(--gutter));
    filter:drop-shadow(0 20px 25px rgba(37,12,18,.12));
  }
  .cherry-signal .signal-studio:before{width:25%}
  .cherry-signal .signal-studio:after{display:none}
  .cherry-signal .signal-studio__photo{height:auto;object-fit:contain}
  .signal-studio__object{position:relative;inset:auto;--depth-y:0deg;--scene-x:0px;--scene-y:0px;width:100%;height:auto;clip-path:none;mask-image:none;-webkit-mask-image:none;will-change:auto}
  .signal-thread{height:calc(var(--signal-hero-end, 900px) + 2px)}
}

@media (prefers-reduced-motion:no-preference){
  .cd-entry .cherry-signal .cd-hero__meta{animation:hero-copy-in .5s .4s both}
  .cd-entry .cherry-signal [data-title-line]{animation:hero-title-in .5s .4s cubic-bezier(.16,1,.3,1) both}
  .cd-entry .cherry-signal .reveal-line:nth-child(2) [data-title-line]{animation-delay:.5s}
  .cd-entry .cherry-signal .cd-hero__copy{animation:hero-copy-in .6s .72s both}
  .cd-entry .cherry-signal .signal-studio{animation:hero-scene-in .6s .7s cubic-bezier(.16,1,.3,1) both}
  .cd-entry .cherry-signal .signal-studio:after{animation:hero-light-on .8s 1.2s ease-out both}
}
@keyframes hero-title-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes hero-copy-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hero-scene-in{from{opacity:0;transform:translateX(58px) scale(.97)}to{opacity:1;transform:none}}
@keyframes hero-light-on{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .signal-studio__object{will-change:auto}
}