/* Testimonial experience: intentionally scoped to prevent shared-site overrides. */
.testimonial-page{
  --ink:#091522;
  --navy:#0d2236;
  --gold:#b78c50;
  --cream:#f7f4ed;
  background:var(--cream);
  color:var(--ink);
  font-family:Inter,sans-serif;
  overflow-x:hidden
}
.testimonial-page h1,.testimonial-page h2{
  font-family:"Playfair Display",serif
}
.testimonial-page .navbar{
  z-index:1050
}
.testimonial-hero{
  min-height:calc(100vh - 82px);
  background:radial-gradient(circle at 75% 30%,#264a68 0,#102b43 38%,var(--ink) 75%);
  color:#fff;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden
}
.testimonial-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 25%,rgba(183,140,80,.12) 50%,transparent 75%);
  background-size:220% 100%;
  animation:lightSweep 12s linear infinite
}
.testimonial-hero-inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8rem 0 7rem
}
.testimonial-copy{
  max-width:680px
}
.eyebrow{
  color:var(--gold);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:1.2rem
}
.testimonial-copy h1{
  font-size:80px;
  line-height:.94;
  margin:0 0 2rem;
  font-weight:700;
  letter-spacing:-.04em
}
.testimonial-copy h1 em,.section-heading h2 em,.cta-inner h2 em{
  color:var(--gold);
  font-style:normal
}
.hero-intro{
  font-size:1.08rem;
  line-height:1.8;
  max-width:500px;
  color:#ccdae4;
  margin-bottom:2rem
}
.testimonial-cta{
  border:1px solid var(--gold);
  border-radius:99px;
  color:#fff;
  background:var(--gold);
  padding:.9rem 1.35rem;
  font-weight:700;
  transition:transform .25s,box-shadow .25s
}
.testimonial-cta:hover{
  color:#fff; 
  background: transparent; 
  border-color: var(--gold); 
  transform:translateY(-4px);
  box-shadow:0 12px 25px #0005
}
.testimonial-cta span{
  margin-left:1rem;
  font-size:1.2rem
}
.hero-stat{
  width:180px;
  height:180px;
  border:1px solid #b78c5080;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:rotate(8deg);
  background:#07152288;
  box-shadow:0 0 0 16px #b78c5010,0 0 60px #0005;
  position:relative;
  isolation:isolate
}
.hero-stat:before,.hero-stat:after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid #b78c50a8;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  animation:statRipple 4.5s ease-out infinite
}
.hero-stat:after{
  animation-delay:2.25s
}
.hero-stat>*{
  position:relative;
  z-index:1
}
.stat-number{
  font-family:"Playfair Display";
  font-size:3.4rem;
  line-height:1
}
.stat-stars{
  color:var(--gold);
  letter-spacing:.16em;
  font-size:.8rem;
  margin:.4rem 0
}
.stat-label{
  color:#c7d4db;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  text-align:center
}
.hero-orbit{
  position:absolute;
  border:1px solid #b78c5038;
  border-radius:50%;
  pointer-events:none
}
.orbit-one{
  width:58vw;
  height:58vw;
  right:-24vw;
  top:-17vw;
  animation:spin 35s linear infinite
}
.orbit-two{
  width:34vw;
  height:34vw;
  right:8vw;
  bottom:-20vw;
  animation:spin 20s linear infinite reverse
}
.scroll-cue{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#adbdc8
}
.scroll-cue span{
  display:block;
  height:38px;
  width:1px;
  background:var(--gold);
  margin:0 auto .65rem;
  animation:scrollLine 1.7s ease-in-out infinite
}
.btn.testimonial-cta-2:hover{
  color:#fff; 
  background: #102b43; 
  border-color: var(--gold); 
  transform:translateY(-4px);
  box-shadow:0 12px 25px #0005
}
.btn.testimonial-cta-2{
  border:1px solid var(--gold);
  border-radius:99px;
  color:#fff;
  background:var(--gold);
  padding:.9rem 1.35rem;
  font-weight:700;
  transition:transform
}
.stories-section{
  padding:10rem 0 8rem;
  background:var(--cream);
  position:relative;
  isolation:isolate;
  overflow:hidden
}
.stories-light-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:#000;
  opacity:1;
  pointer-events:none;
  transition:opacity 1.2s ease
}
.stories-section.is-lit .stories-light-overlay{
  opacity:0
}
.tug-light{
  position:absolute;
  right:clamp(1.5rem,8vw,8rem);
  top:1rem;
  z-index:4;
  width:115px;
  height:260px;
  text-align:center;
  color:#fff
}
.tug-light__label{
  display:block;
  color:#b78c50;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.4;
  text-transform:uppercase;
  opacity:0;
  transition:opacity .6s
}
.tug-light__cord{
  position:absolute;
  top:40px;
  left:50%;
  width:2px;
  height:var(--cord-length,74px);
  margin:0;
  background:#777;
  box-shadow:0 0 5px #fff3;
  transform:rotate(var(--cord-angle,0deg));
  transform-origin:top center;
  transition:transform .08s ease-out,height .08s ease-out
}
.tug-light__handle{
  position:absolute;
  top:108px;
  left:50%;
  display:block;
  width:78px;
  height:108px;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  cursor:grab;
  touch-action:none;
  transform:translate(-50%,0);
  transition:transform .12s ease-out
}
.tug-light__handle:active{
  cursor:grabbing
}
.tug-light__handle svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible
}
.tug-light__bulb-glow{
  fill:#ffd875;
  opacity:.2;
  filter:blur(8px);
  transition:opacity .7s
}
.tug-light__bulb{
  fill:#4b4b4b;
  stroke:#b6b6b6;
  stroke-width:1.2;
  transition:fill .7s,stroke .7s
}
.tug-light__cap{
  fill:#3a3a3a;
  stroke:#8c8c8c;
  stroke-width:1
}
.tug-light__filament{
  fill:none;
  stroke:#aaa;
  stroke-width:2;
  stroke-linecap:round
}
.tug-light__hint{
  display:block;
  color:#8e8e8e;
  font-size:1rem;
  line-height:1;
  opacity:0;
  animation:tugHint 1.4s ease-in-out infinite
}
.stories-section.is-lit .tug-light__bulb-glow{
  opacity:1
}
.stories-section.is-lit .tug-light__bulb{
  fill:#fff1ae;
  stroke:#fff7d2;
  filter:drop-shadow(0 0 12px #ffd45c)
}
.stories-section.is-lit .tug-light__cap{
  fill:#81724c
}
.stories-section.is-lit .tug-light__filament{
  stroke:#fff
}
.stories-section.is-lit .tug-light__hint,.stories-section.is-lit .tug-light__label{
  color:#b78c50;
  opacity:1
}
.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:5.5rem;
  gap:3rem
}
.section-heading h2{
  font-size:clamp(2.5rem,5vw,5rem);
  line-height:1;
  margin:0
}
.section-heading>p:last-child{
  max-width:220px;
  color:#6c7072;
  font-size:.86rem;
  line-height:1.7;
  margin:0
}
.story-stage{
  height:620px;
  position:relative;
  perspective:1400px;
  touch-action:none;
  margin:0 auto;
  max-width:1080px
}
.orbit-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:430px;
  height:430px;
  border:1px solid #b78c5055;
  border-radius:50%;
  transform:translate(-50%,-50%) rotateX(68deg);
  box-shadow:0 0 0 28px #b78c5008,0 0 0 70px #b78c5005;
  transition:transform .5s ease
}
.orbit-ring:after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
  top:-4px;
  left:50%;
  box-shadow:0 0 20px 4px #b78c50
}
.ring-label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:.62rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#9d8a6c;
  white-space:nowrap
}
.story-card{
  position:absolute;
  width:300px;
  min-height:255px;
  padding:1.75rem;
  background:#fff;
  border:1px solid #e7ddcd;
  border-radius:4px;
  box-shadow:0 22px 38px #102b4317;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .3s,opacity .6s;
  cursor:pointer;
  transform-style:preserve-3d
}
.story-card:hover,.story-card:focus{
  box-shadow:0 30px 45px #102b4330;
  z-index:5;
  outline:2px solid var(--gold);
  outline-offset:5px
}
.card-top{
  display:flex;
  justify-content:space-between;
  color:var(--gold);
  font-size:.7rem;
  font-weight:700
}
.card-index{
  letter-spacing:.1em
}
.card-mark{
  font-size:1.4rem
}
.quote{
  font-family:"Playfair Display";
  font-size:1.2rem;
  line-height:1.45;
  margin:1.7rem 0 1.6rem;
  color:var(--navy)
}
.card-author{
  display:flex;
  align-items:center;
  gap:.7rem
}
.card-author strong,.card-author small{
  display:block
}
.card-author strong{
  font-size:.78rem
}
.card-author small{
  font-size:.65rem;
  color:#8a8e90;
  margin-top:.2rem
}
.avatar{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:50%;
  overflow:hidden;
  background:#e9e2d3
}
.avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.stage-controls{
  display:flex;
  justify-content:center;
  gap:.7rem;
  margin-top:1rem
}
.stage-control{
  border:1px solid #cdbb9f;
  background:transparent;
  border-radius:99px;
  padding:.65rem 1.1rem;
  color:var(--navy);
  font-size:.72rem;
  cursor:pointer
}
.stage-control:hover,.stage-control:focus{
  background:var(--navy);
  color:#fff
}
.stage-play{
  min-width:110px
}
.trust-strip{
  background:var(--navy);
  color:#fff;
  padding:5rem 0
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr) 1.5fr;
  gap:2rem;
  align-items:center
}
.trust-item{
  border-left:1px solid #b78c5066;
  padding-left:1.4rem
}
.trust-item strong{
  display:block;
  font:700 2rem "Playfair Display";
  color:var(--gold)
}
.trust-item span{
  font-size:.72rem;
  color:#b9c7d1;
  text-transform:uppercase;
  letter-spacing:.1em
}
.trust-quote{
  border-left:1px solid var(--gold);
  padding-left:2rem;
  display:flex;
  gap:1rem;
  align-items:center
}
.trust-quote span{
  font:5rem "Playfair Display";
  color:var(--gold);
  line-height:.6
}
.trust-quote p{
  font:1.2rem "Playfair Display";
  margin:0
}
.testimonial-cta-section{
  padding:9rem 0;
  text-align:center;
  background:linear-gradient(135deg,#f7f4ed,#e9e2d3)
}
.cta-inner h2{
  font-size:clamp(2.8rem,6vw,6rem);
  line-height:.98;
  margin:0 0 2.5rem
}
.story-dialog{
  position:fixed;
  inset:0;
  z-index:2000;
  background:#071522cc;
  display:grid;
  place-items:center;
  padding:1.2rem
}
.story-dialog[hidden]{
  display:none
}
.dialog-panel{
  position:relative;
  max-width:560px;
  background:var(--cream);
  padding:3.5rem;
  box-shadow:0 30px 80px #0006
}
.dialog-close{
  position:absolute;
  right:1rem;
  top:.8rem;
  background:none;
  border:0;
  font-size:2rem;
  color:var(--navy);
  cursor:pointer
}
.dialog-panel h2{
  font-size:3rem;
  margin:.3rem 0
}
.dialog-role{
  color:var(--gold);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.12em
}
.dialog-full{
  line-height:1.8;
  color:#4f565b;
  margin:1.5rem 0
}
.dialog-link{
  font-weight:700;
  color:var(--navy);
  text-decoration:none
}
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease,transform .8s ease
}
.reveal.is-visible{
  opacity:1;
  transform:none
}
@keyframes lightSweep{
  to
  {
    background-position:-220% 0
  }
}
@keyframes spin{
  to
  {
    transform:rotate(360deg)
  }
}
@keyframes scrollLine{
  50%
  {
    opacity:.35;
    transform:scaleY(.55);
    transform-origin:top
  }
}
@keyframes statRipple{
  0%
  {
    opacity:.75;
    transform:scale(1)
  }
  100%
  {
    opacity:0;
    transform:scale(1.45)
  }
}
@keyframes tugHint{
  50%
  {
    transform:translateY(4px);
    opacity:.45
  }
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important
  }
}
@media (max-width:991.98px){
  .testimonial-hero-inner{
    padding:6rem 0 7rem
  }
  .hero-stat{
    width:140px;
    height:140px;
    flex-shrink:0
  }
  .stat-number{
    font-size:2.7rem
  }
  .navbar-nav{
    align-items:stretch!important
  }
  .story-stage{
    height:740px
  }
  .story-card{
    width:245px
  }
  .card-a{
    left:2%
  }
  .card-b{
    right:2%
  }
  .card-c{
    left:7%
  }
  .card-d{
    right:7%
  }
  .trust-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .trust-quote{
    grid-column:span 2
  }
}
@media (max-width:600px){
  .testimonial-hero{
    min-height:calc(100vh - 72px)
  }
  .testimonial-hero-inner{
    display:block;
    padding:5rem 0 6rem
  }
  .testimonial-copy h1{
    font-size:clamp(3rem,15vw,5rem)
  }
  .hero-stat{
    margin:3rem auto 0
  }
  .section-heading{
    display:block;
    margin-bottom:2rem
  }
  .section-heading h2{
    font-size:2.7rem
  }
  .section-heading>p:last-child{
    margin-top:1.2rem
  }
  .stories-section{
    padding:6rem 0 4rem
  }
  .story-stage{
    height:830px;
    perspective:900px
  }
  .orbit-ring{
    width:250px;
    height:250px
  }
  .ring-label{
    top:38%
  }
  .story-card{
    width:min(86vw,300px);
    min-height:220px
  }
  .card-a{
    left:4%;
    top:4%
  }
  .card-b{
    right:4%;
    top:26%
  }
  .card-c{
    left:4%;
    bottom:26%
  }
  .card-d{
    right:4%;
    bottom:4%}
    .trust-grid{
      grid-template-columns:1fr 1fr;
      gap:2rem 1rem
    }
    .trust-item strong{
      font-size:1.45rem
    }
    .trust-item span{
      font-size:.58rem
    }
    .trust-quote{
      grid-column:span 2;
      padding-top:1.5rem
    }
    .dialog-panel{
      padding:2.5rem 1.5rem
    }
    .dialog-panel h2{
      font-size:2.3rem
    }
  }
.testimonial-page .hero-stat:before,.testimonial-page .hero-stat:after{
  animation-duration:4.5s!important;
  animation-iteration-count:infinite!important
}
.testimonial-page .tp-floating-action__icon::after{
  animation-duration:1.8s!important;
  animation-iteration-count:infinite!important
}
/* Editorial journey layout: the archive reads like a book moving through production. */
.stories-section .story-stage{
  height:auto;
  max-width:1180px;
  margin:0;
  padding:2.5rem;
  display:grid;
  grid-template-columns:1.05fr repeat(3,1fr);
  grid-template-rows:auto auto auto;
  gap:1rem;
  align-items:start;
  overflow:visible;
  perspective:none;
  touch-action:auto;
  background:var(--navy);
  border-radius:2px;
  box-shadow:0 28px 70px #102b4322;
}
.journey-intro{
  grid-column:1 / 2;
  grid-row:1 / span 3;
  padding:1rem 1.5rem 2rem 0;
  color:#fff
}
.journey-kicker{
  display:block;
  color:var(--gold);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:1.25rem
}
.journey-title{
  font:700 clamp(1.6rem,2.4vw,2.35rem)/1.08 "Playfair Display",serif;margin:0 0 1rem
}
.journey-copy{
  color:#b9c7d1;
  font-size:.82rem;
  line-height:1.75;
  margin:0
}
.journey-phases{
  grid-column:2 / -1;
  grid-row:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  align-items:start;
  align-self:start;
  padding:0 0 1.2rem
}
.journey-phase{
  border-top:1px solid #b9c7d155;
  padding-top:.8rem;
  color:#8fa2b0;
  font-size:.65rem;
  letter-spacing:.1em;
  text-transform:uppercase
}
.journey-phase b{
  color:var(--gold);
  font-size:.72rem;
  margin-right:.45rem
}
.journey-phase.is-current{
  color:#fff;
  border-color:var(--gold)
}
.stories-section .story-card{
  position:relative;
  left:auto;
  top:auto;
  width:auto;
  min-height:245px;
  padding:1.5rem;
  opacity:1;
  transform:none;
  filter:none;
  cursor:pointer;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.stories-section .story-card:hover,.stories-section .story-card:focus,.stories-section .story-card.is-featured{
  transform:translateY(-8px);
  border-color:var(--gold);
  box-shadow:0 24px 35px #0004;
  outline:0;
}
.stories-section .story-card.is-featured{
  background:#fffaf1
}
.stories-section .story-card:nth-of-type(3){
  grid-column:2
}
.stories-section .story-card:nth-of-type(4){
  grid-column:3
}
.stories-section .story-card:nth-of-type(5){
  grid-column:4
}
.stories-section .story-card:nth-of-type(6){
  grid-column:2
}
.stories-section .story-card:nth-of-type(7){
  grid-column:3
}
.stories-section .story-card:nth-of-type(8){
  grid-column:4
}
.stories-section .story-card:nth-of-type(9){
  grid-column:2
}
.stories-section .story-card:nth-of-type(10){
  grid-column:3
}
.stories-section .story-card:nth-of-type(3) .card-mark,
.stories-section .story-card:nth-of-type(6) .card-mark{
  color:#8b6c43
}
.stories-section .story-card:nth-of-type(4) .card-mark,
.stories-section .story-card:nth-of-type(7) .card-mark{
  color:#6e8b82
}
.stories-section .story-card:nth-of-type(5) .card-mark,
.stories-section .story-card:nth-of-type(8) .card-mark,
.stories-section .story-card:nth-of-type(9) .card-mark,
.stories-section .story-card:nth-of-type(10) .card-mark{
  color:#536f89
}
.stories-section .story-card:nth-of-type(3),
.stories-section .story-card:nth-of-type(6),
.stories-section .story-card:nth-of-type(9){
  border-top:3px solid #b78c50
}
.stories-section .story-card:nth-of-type(4),
.stories-section .story-card:nth-of-type(7),
.stories-section .story-card:nth-of-type(10){
  border-top:3px solid #6e8b82
}
.stories-section .story-card:nth-of-type(5),
.stories-section .story-card:nth-of-type(8){
  border-top:3px solid #536f89
}
.stories-section .story-card:nth-of-type(3){
  grid-row:2 / span 2;
  min-height:310px
}
.stories-section .story-card:nth-of-type(3) .quote{
  font-size:1.45rem;
  margin-top:2.5rem
}
.stories-section .story-card:nth-of-type(3) .avatar{
  width:50px;
  height:50px;
  flex-basis:50px
}
.stories-section .story-card:nth-of-type(3) .card-author{
  margin-top:2.5rem
}
@media (max-width:991.98px){
  .stories-section .story-stage{
    grid-template-columns:repeat(2,1fr);
    padding:1.5rem
  }
  .journey-intro{
    grid-column:1 / -1;
    padding:0 0 1rem
  }
  .journey-phases{
    grid-column:1 / -1
  }
  .stories-section .story-card:nth-of-type(n){
    grid-column:auto;
    grid-row:auto;
    min-height:235px
  }
  .stories-section .story-card:nth-of-type(3) .quote{
    font-size:1.2rem;
    margin-top:1.7rem
  }
  .stories-section .story-card:nth-of-type(3) .card-author{
    margin-top:1.6rem
  }
}
@media (max-width:600px){
  .stories-section .story-stage{
    display:block;
    padding:1.25rem
  }
  .journey-intro{
    padding:0 0 1.5rem
  }
  .journey-phases{
    display:flex;
    overflow:auto;
    gap:1.25rem;
    padding:0 0 1.5rem
  }
  .journey-phase{
    min-width:145px
  }
  .stories-section .story-card{
    margin-top:1rem;
    min-height:220px
  }
}

/* Give the archive more room to breathe while keeping the interactive orbit intact. */
.stories-section > .container{
  max-width:1180px
}
.section-heading{
  column-gap:4rem
}
.section-heading h2{
  max-width:760px
}
.story-stage{
  height:700px;
  margin:0 -1rem;
  perspective:1750px
}
.story-card{
  width:230px;
  min-height:220px;
  padding:1.5rem 1.4rem;
  border-radius:14px
}
.card-top{
  margin-bottom:.2rem
}
.quote{
  margin:1.25rem 0 1.45rem;
  font-size:1.08rem;
  line-height:1.4
}
.stage-controls{
  margin-top:.75rem
}
.stage-control{
  padding:.7rem 1.25rem
}
.avatar{
  flex:0 0 42px
}
.avatar img{
  background:linear-gradient(145deg,#f7f4ed,#d8c2a2)
}

@media (max-width:991.98px){
  .story-stage{
    height:760px;
    margin:0
  }
  .story-card{
    width:225px;
    padding:1.4rem 1.25rem
  }
}

@media (max-width:767.98px){
  .stories-section{
    padding-left:1rem;
    padding-right:1rem
  }
  .section-heading{
    column-gap:0
  }
  .story-stage{
    height:820px;
    margin:0 -0.5rem
  }
  .story-card{
    width:min(76vw,225px);
    padding:1.3rem 1.15rem
  }
  .quote{
    font-size:1rem;
    line-height:1.35
  }
}

/* The bulb is fixed; only the hanging cord is a pull target. */
.tug-light__handle{
  top:0;
  pointer-events:none;
  transform:translate(-50%,0)!important
}
.tug-light__cord{
  top:104px;
  left:50%;
  width:24px;
  height:var(--cord-length,74px);
  margin-left:-12px;
  background:linear-gradient(90deg,transparent 0 11px,#777 11px 13px,transparent 13px);
  box-shadow:none;
  transform:translate(var(--cord-x,0px),var(--cord-y,0px)) rotate(var(--cord-angle,0deg));
  transform-origin:50% 0;
  transition:transform .08s ease-out,height .08s ease-out;
  cursor:grab
}
.tug-light__cord:after{
  content:"";
  position:absolute;
  left:8px;
  bottom:-8px;
  width:8px;
  height:12px;
  border-radius:50%;
  background:#777
}
.tug-light__cord:active{
  cursor:grabbing
}
.tug-light.is-pulling .tug-light__cord{
  height:var(--cord-length,74px)
}

/* CodePen toggle geometry: fixed bulb, draggable cord hit area. */
.tug-light{
  width:145px;
  height:355px;
  right:clamp(1rem,6vw,6rem);
  top:1rem
}
.cord-instruction{
  position:absolute;
  top:68%;
  left:-6.8rem;
  display:flex;
  align-items:center;
  gap:.45rem;
  color:#b78c50;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  animation:cordInstruction 1.8s ease-in-out infinite;
  transition:opacity .6s ease
}
.cord-instruction b{
  font-size:1rem;
  font-weight:400;
  line-height:1
}
.stories-section.is-lit .cord-instruction{
  opacity:0;
  animation:none
}
.toggle-scene{
  --on:0;
  --cord:hsl(0,0%,60%);
  --stroke:hsl(0,0%,60%);
  --shine:hsla(0,0%,75%);
  --cap:hsl(0,0%,40%);
  --filament:hsl(45,0%,25%);
  display:block;
  width:145px;
  height:353px;
  overflow:visible!important;
  position:relative
}
.toggle-scene__cord{
  display:none;
  fill:none;
  stroke:var(--cord);
  stroke-width:6;
  stroke-linecap:square
}
.toggle-scene__dummy-cord{
  fill:none;
  stroke:var(--cord);
  stroke-width:6;
  pointer-events:none
}
.toggle-scene__cord-end{
  fill:var(--cord);
  stroke:var(--cord)
}
.toggle-scene__hit-spot{
  cursor:grab;
  pointer-events:all
}
.toggle-scene__hit-spot:focus{
  outline:none
}
.bulb__bulb{
  fill:hsla(180,80%,80%,.1);
  stroke:var(--stroke);
  stroke-width:5
}
.bulb__cap{
  fill:var(--cap);
  stroke:var(--stroke);
  stroke-width:4.677
}
.bulb__filament{
  fill:none;
  stroke:var(--filament);
  stroke-linecap:round;
  stroke-width:5
}
.bulb__shine{
  fill:none;
  stroke:var(--shine);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:12
}
.bulb__flash{
  display:none
}
.stories-section.is-lit .toggle-scene{
  --on:1
}
.stories-section.is-lit .toggle-scene__dummy-cord{
  display:none
}
.stories-section.is-lit .toggle-scene__cord:nth-child(2){
  display:block
}
.stories-section.is-lit .bulb__bulb{
  fill:hsla(45,80%,80%,.5)
}
.stories-section.is-lit .bulb__flash{
  display:block;stroke:#f8d97b
}
.stories-section.is-lit .toggle-scene__dummy-cord,.stories-section.is-lit .toggle-scene__cord-end{
  stroke:#202020;
  fill:#202020
}

/* Keep the light clear of the heading and cards at tablet and phone widths. */
.toggle-scene__hit-spot{
  touch-action:none
}
@media (max-width:991.98px){
  .tug-light{
    width:120px;
    height:293px;
    right:1rem;
    top:.5rem
  }
  .toggle-scene{
    width:120px;
    height:291px
  }
  .cord-instruction{
    left:-5.5rem;
    font-size:.56rem
  }
  .stories-section{
    padding-top:9rem
  }
}
@media (max-width:600px){
  .tug-light{
    width:94px;
    height:230px;
    right:.35rem;
    top:.35rem
  }
  .toggle-scene{
    width:94px;
    height:228px
  }
  .cord-instruction{
    top:69%;
    left:-4.8rem;
    font-size:.5rem;
    letter-spacing:.04em
  }
  .stories-section{
    padding-top:8.5rem
  }
  .section-heading{
    padding-right:0
  }
}
@keyframes cordInstruction{
  50%
  {
    transform:translateX(4px);
    opacity:.65
  }
}