.copy-frame{
  --copy-transition-duration: .65s;
  --copy-transition-ease: cubic-bezier(.33,1,.68,1);
}

.copy-stack{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.copy-frame__content{
  position:relative;
  transition: height var(--copy-transition-duration) var(--copy-transition-ease);
  min-height:16rem;
  margin-left:auto;
  max-width:min(520px, 100%);
}

.copy-frame__content.is-animating{ overflow:hidden; }

.copy-pane{
  opacity:0;
  transform: translateY(12px);
  transition: opacity var(--copy-transition-duration) var(--copy-transition-ease), transform var(--copy-transition-duration) var(--copy-transition-ease);
}

.copy-pane.is-active,
.copy-pane.is-visible{
  opacity:1;
  transform:none;
}

.copy-pane.is-enter,
.copy-pane.is-exit{
  position:absolute;
  inset:0;
  width:100%;
}

.copy-pane.is-exit{
  opacity:0;
  transform: translateY(-16px);
}

.copy-frame[data-copy-transition="active"] .copy-pane.is-enter > :where(.eyebrow, h1, .lede, p, ul, ol, dl, .cta-row, .microcopy){
  clip-path: inset(0 0 100% 0);
  animation: copy-pane-reveal var(--copy-transition-duration) var(--copy-transition-ease) forwards;
}

.copy-frame[data-copy-transition="active"] .copy-pane.is-enter :where(h1, .lede, p, .bullet-list li, .service-list dt, .service-list dd, .details-list dt, .details-list dd, .microcopy){
  position:relative;
  overflow:hidden;
}

.copy-frame[data-copy-transition="active"] .copy-pane.is-enter :where(h1, .lede, p, .bullet-list li, .service-list dt, .service-list dd, .details-list dt, .details-list dd, .microcopy)::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(120deg, rgba(250,249,246,.45), rgba(250,249,246,0) 65%);
  transform: translateX(-120%);
  opacity:0;
  animation: copy-pane-sheen var(--copy-transition-duration) var(--copy-transition-ease) forwards;
}

@keyframes copy-pane-reveal{
  0%{
    clip-path: inset(0 0 100% 0);
    opacity:0;
  }
  100%{
    clip-path: inset(0 0 0 0);
    opacity:1;
  }
}

@keyframes copy-pane-sheen{
  0%{
    transform: translateX(-120%);
    opacity:0;
  }
  45%{ opacity:.35; }
  100%{
    transform: translateX(120%);
    opacity:0;
  }
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.75rem;
  opacity:.7;
}

.copy-stack h1{
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing:.04em;
  margin:0;
}

.copy-stack .lede{
  font-size:1.2rem;
  max-width:36ch;
  color: rgba(250,249,246,.95);
}

.service-list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:1rem;
  margin:1rem 0 0;
}

.service-list div{ border-top:1px solid rgba(250,249,246,.2); padding-top:.75rem; }
.service-list dt{ font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:.85rem; }
.service-list dd{ margin:0; opacity:.8; font-size:.9rem; }

.details-list{ margin-top:1rem; }
.details-list div{ border-top:1px solid rgba(250,249,246,.15); padding-top:.75rem; }
.details-list dt{ font-size:.75rem; text-transform:uppercase; letter-spacing:.2em; opacity:.65; }
.details-list dd{ font-size:1rem; margin:.25rem 0 0; }

.bullet-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  font-size:.95rem;
}

.bullet-list li{
  position:relative;
  padding-left:1.25rem;
}

.bullet-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:.6em;
  width:.45rem;
  height:.45rem;
  border-radius:999px;
  background: var(--copper);
}

.cta-row{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:1rem;
}

.btn{
  text-transform:uppercase;
  letter-spacing:.1em;
  border-radius:999px;
  padding:.85rem 1.65rem;
  border:1px solid transparent;
  text-decoration:none;
  color: var(--bone);
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
}

.btn.primary{
  background: linear-gradient(135deg, #6e2a0b, #c06632);
  border-color: rgba(192,102,50,.8);
  box-shadow: 0 10px 25px rgba(0,0,0,.45);
}

.btn.secondary{
  border-color: rgba(250,249,246,.35);
  background: transparent;
}

.btn:hover{ border-color: var(--copper); }

.microcopy{
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.65;
}

.copy-frame:focus-visible{
  outline:2px solid var(--bone);
  outline-offset:6px;
}

.embed iframe{
  width:100%;
  min-height:420px;
  border:0;
  border-radius:1.25rem;
  background: rgba(5,5,5,.85);
  box-shadow: inset 0 0 0 1px rgba(250,249,246,.08);
}

.stage-modal[hidden]{ display:none; }

.stage-modal{
  position:fixed;
  inset:0;
  background: rgba(6,5,4,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  z-index:20;
  opacity:0;
  visibility:hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.stage-modal.is-visible{
  opacity:1;
  visibility:visible;
}

.stage-modal__dialog{
  position:relative;
  width:min(540px, 92vw);
  max-height:90vh;
  overflow:auto;
  background: rgba(12,12,12,.95);
  border-radius:2rem;
  border:1px solid rgba(250,249,246,.12);
  padding:2rem;
  box-shadow: 0 25px 80px rgba(0,0,0,.65);
}

.stage-modal__close{
  position:absolute;
  top:1rem;
  right:1rem;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(250,249,246,.25);
  background: transparent;
  color: var(--bone);
  font-size:1.35rem;
  cursor:pointer;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:1.5rem;
}

.contact-form label{
  display:flex;
  flex-direction:column;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  gap:.45rem;
}

.contact-form input,
.contact-form textarea{
  border-radius:.85rem;
  border:1px solid rgba(250,249,246,.25);
  background: rgba(0,0,0,.25);
  color: var(--bone);
  padding:.85rem 1rem;
  font:inherit;
}

.contact-form textarea{ resize:vertical; }

.contact-form .thanks{ font-size:1rem; }

@media (max-width: 900px){
  .story-stage{
    width:min(92vw, 560px);
    aspect-ratio:auto;
    min-height:82vh;
  }
  .portrait-frame{
    justify-self:center;
    width:min(320px, 70vw);
    height:min(420px, 60vh);
    margin-bottom:1.5rem;
  }
  .copy-frame{
    justify-self:center;
    width:100%;
  }
  .service-list{ grid-template-columns:1fr; }
  .stage-modal__dialog{ padding:1.5rem; }
  .story-controls{ flex-wrap:wrap; }
}