/* PAGE 3 — WHAT WE DO — owner-review composition.
   Page-local only. PAGE 1 / PAGE 2 remain regression-locked and untouched. */

.delivery-story{
  display:flex;
  flex-direction:column;
  min-height:100%;
  background:radial-gradient(circle at 50% 42%,rgba(253,196,31,.11),transparent 34%),#111;
}

.delivery-story-stage{
  flex:1 1 auto;
  min-height:0;
  width:100%;
}

/* The former static WordPress-site panel sat behind the orbit and created visual noise.
   PAGE 3 review uses the six delivery cards alone. */
.delivery-story .delivery-site{
  display:none!important;
}

/* One coherent orbit: the active card is the near/top point of the circle.
   Every other card stays below it and travels progressively around the rear arc. */
.delivery-story .delivery-orbit-card{
  right:auto;
  bottom:auto;
  opacity:1;
  background:#1d1d1d;
  transform-origin:center center;
  will-change:left,top,transform,filter;
  transition:
    left .66s cubic-bezier(.22,.78,.18,1),
    top .66s cubic-bezier(.22,.78,.18,1),
    transform .66s cubic-bezier(.22,.78,.18,1),
    filter .42s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

/* Increasing position numbers travel clockwise: top -> right -> bottom -> left -> top. */
.delivery-story .delivery-orbit-card.pos0{
  left:50%;
  top:28%;
  z-index:10;
  transform:translate(-50%,-50%) scale(1);
  filter:brightness(1);
}
.delivery-story .delivery-orbit-card.pos1{
  left:75%;
  top:51%;
  z-index:8;
  transform:translate(-50%,-50%) rotate(3deg) scale(.66);
  filter:brightness(.90);
}
.delivery-story .delivery-orbit-card.pos2{
  left:70%;
  top:67%;
  z-index:6;
  transform:translate(-50%,-50%) rotate(-4deg) scale(.58);
  filter:brightness(.76);
}
.delivery-story .delivery-orbit-card.pos3{
  left:50%;
  top:76%;
  z-index:5;
  transform:translate(-50%,-50%) scale(.54);
  filter:brightness(.66);
}
.delivery-story .delivery-orbit-card.pos4{
  left:30%;
  top:67%;
  z-index:6;
  transform:translate(-50%,-50%) rotate(4deg) scale(.58);
  filter:brightness(.76);
}
.delivery-story .delivery-orbit-card.pos5{
  left:25%;
  top:51%;
  z-index:8;
  transform:translate(-50%,-50%) rotate(-3deg) scale(.66);
  filter:brightness(.90);
}

.delivery-story-controls{
  position:relative;
  z-index:14;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 40px;
  align-items:center;
  gap:14px;
  width:100%;
  margin-top:18px;
}
.delivery-story-next{
  min-height:54px;
  padding:0 21px;
  font:900 13px/1 Inter,system-ui,sans-serif;
}
.delivery-story-counter{
  min-width:0;
  color:#b2b2ac;
  font:800 11px/1.3 Inter,system-ui,sans-serif;
  letter-spacing:.085em;
  text-transform:uppercase;
}
.delivery-story-hint{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  margin:0;
  justify-self:end;
  color:var(--story-yellow);
}
.delivery-story-hint svg{
  display:block;
  width:36px;
  height:30px;
  overflow:visible;
}

@media(min-width:901px){
  .delivery-story{
    padding:clamp(30px,3.4vw,46px);
  }
  .delivery-story-stage{
    min-height:560px;
  }
  .delivery-story .delivery-orbit-card{
    width:76%;
    max-width:none;
    min-height:188px;
    padding:24px 27px 25px;
    border-radius:20px;
  }
  .delivery-story .delivery-orbit-card b{
    width:38px;
    height:38px;
    border-radius:11px;
    font-size:12px;
  }
  .delivery-story .delivery-orbit-card strong{
    margin-top:13px;
    font:850 20px/1.16 Inter,system-ui,sans-serif;
    letter-spacing:-.018em;
  }
  .delivery-story .delivery-orbit-card p{
    margin-top:9px;
    color:#c0c0ba;
    font:520 13px/1.48 Inter,system-ui,sans-serif;
  }
}

@media(max-width:900px){
  .delivery-story{
    min-height:460px;
  }
  .delivery-story-stage{
    min-height:410px;
  }
  .delivery-story .delivery-orbit-card{
    width:min(80vw,calc(100% - 24px));
    max-width:none;
    min-height:170px;
    padding:20px 22px 22px;
    background:#1d1d1d;
    opacity:1;
  }
  .delivery-story .delivery-orbit-card.pos0{
    left:50%;
    top:29%;
    z-index:10;
    transform:translate(-50%,-50%) scale(1);
    filter:brightness(1);
  }
  .delivery-story .delivery-orbit-card.pos0 b{
    width:42px;
    height:42px;
    border-radius:12px;
    font-size:13px;
  }
  .delivery-story .delivery-orbit-card.pos0 strong{
    margin-top:14px;
    font:850 21px/1.16 Inter,system-ui,sans-serif;
    letter-spacing:-.018em;
  }
  .delivery-story .delivery-orbit-card.pos0 p{
    margin-top:10px;
    color:#c6c6c0;
    font:520 14px/1.45 Inter,system-ui,sans-serif;
  }
  .delivery-story .delivery-orbit-card.pos1{
    left:72%;
    top:56%;
    z-index:8;
    transform:translate(-50%,-50%) rotate(3deg) scale(.78);
    filter:brightness(.90);
  }
  .delivery-story .delivery-orbit-card.pos2{
    left:67%;
    top:71%;
    z-index:6;
    transform:translate(-50%,-50%) rotate(-4deg) scale(.69);
    filter:brightness(.78);
  }
  .delivery-story .delivery-orbit-card.pos3{
    left:50%;
    top:79%;
    z-index:5;
    transform:translate(-50%,-50%) scale(.63);
    filter:brightness(.69);
  }
  .delivery-story .delivery-orbit-card.pos4{
    left:33%;
    top:71%;
    z-index:6;
    transform:translate(-50%,-50%) rotate(4deg) scale(.69);
    filter:brightness(.78);
  }
  .delivery-story .delivery-orbit-card.pos5{
    left:28%;
    top:56%;
    z-index:8;
    transform:translate(-50%,-50%) rotate(-3deg) scale(.78);
    filter:brightness(.90);
  }
  .delivery-story-controls{
    grid-template-columns:auto minmax(0,1fr) 36px;
    gap:11px;
    margin-top:14px;
  }
  .delivery-story-next{
    min-height:50px;
    padding:0 17px;
    font-size:12px;
  }
  .delivery-story-counter{
    font-size:10px;
    line-height:1.3;
    letter-spacing:.07em;
  }
  .delivery-story-hint{
    width:36px;
    height:36px;
  }
  .delivery-story-hint svg{
    width:33px;
    height:28px;
  }
}

@media(max-width:600px){
  .delivery-story-stage{
    min-height:410px;
  }
  .delivery-story .delivery-orbit-card.pos0{
    min-height:174px;
    padding:20px 20px 22px;
  }
  .delivery-story .delivery-orbit-card.pos0 b{
    width:44px;
    height:44px;
    font-size:13.5px;
  }
  .delivery-story .delivery-orbit-card.pos0 strong{
    font-size:20px;
    line-height:1.16;
  }
  .delivery-story .delivery-orbit-card.pos0 p{
    font-size:13.5px;
    line-height:1.46;
  }
  .delivery-story-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .delivery-story-next{
    min-height:52px;
    padding:0 17px;
    font-size:12px;
  }
  .delivery-story-counter{
    display:none;
  }
  .delivery-story-hint{
    flex:0 0 38px;
    width:38px;
    height:38px;
  }
  .delivery-story-hint svg{
    width:34px;
    height:29px;
  }
}

@media(prefers-reduced-motion:reduce){
  .delivery-story .delivery-orbit-card{
    transition:none;
  }
}