/* ==========================================================================
   About Us page - story blocks (image / text two-column sections)
   Shared hero lives in style.css (.page-hero).
   ========================================================================== */

/* Dark stage that continues the hero background (waves overflow from .page-hero
   stay visible behind the content, as in the original) */
.page--about .page{background:#0f1415;}
.story{
  position:relative;
  margin-top:250px;
  background:#0f1415;
}

/* ---------- Story block (one two-column section) ---------- */
.story-block{
  position:relative;
  z-index:5;
  padding:0 20px 50px;
  margin-bottom:10rem;
  overflow:visible;
}
.story-block:first-child{padding-top:0;}
.story-block:last-child{margin-bottom:0;padding-bottom:230px;}

/* decorative right glow (right-yellow-shadow.png) */
.story-block__glow{
  position:absolute;
  top:-25%;
  right:1px;
  width:25%;
  height:auto;
  z-index:0;
  pointer-events:none;
  user-select:none;
}

.story-block__container{
  position:relative;
  z-index:1;
  max-width:72rem;
  margin:0 auto;
}
.story-block__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  align-items:center;
}

/* media */
.story-block__media{position:relative;}
.story-block__frame{
  aspect-ratio:3 / 4;
  overflow:hidden;
  border-radius:2px;
  background:rgba(255,255,255,.04);
}
.story-block__image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* content */
.story-block__content{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.story-block__heading{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.story-block__eyebrow{
  color:rgba(255,255,255,.85);
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.story-block__title{
  margin:0;
  color:#fff;
  font-family:var(--font-display-bold);
  font-size:1.875rem;
  font-weight:400;
  line-height:1.1;
}
.story-block__text{
  display:flex;
  flex-direction:column;
  gap:1rem;
  color:rgba(255,255,255,.75);
  font-size:15px;
  line-height:1.625;
}
.story-block__paragraph{margin:0;}
.story-block__strong{
  margin:0;
  color:#fff;
  font-weight:600;
}

/* actions: original "Learn More" is a centred Bricks button */
.story-block__actions{
  display:flex;
  justify-content:center;
}
.story-block__actions .btn{
  margin:1rem;
  padding:1rem 2rem;
  border-radius:10px;
  font-family:var(--font-display-bold);
  font-size:14px;
  letter-spacing:.5px;
  background:var(--accent);
  color:#fff;
  transition:all .3s ease-in-out;
}
.story-block__actions .btn:hover{
  background:#fff;
  color:var(--accent);
  transform:none;
}
.story-block__actions .btn:active{
  filter:brightness(.98);
  box-shadow:0 14px 34px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 26px rgba(239,104,0,.18);
}
.story-block__actions .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(0,0,0,.55), 0 0 0 5px #f5a469, 0 22px 60px rgba(0,0,0,.42);
}

/* ---------- Responsive ---------- */
@media (min-width:768px){
  .story-block__title{font-size:2.25rem;}
}
@media (min-width:1024px){
  .story-block__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:4rem;
  }
  .story-block__title{font-size:3rem;}
}
@media (max-width:991px){
  .story-block{margin-bottom:5rem;}
  .story{margin-top:120px;}
  .story-block:last-child{padding-bottom:120px;}
  .story-block__glow{width:30%;}
}
@media (max-width:767px){
  .story-block__frame{max-width:420px;margin:0 auto;}
  .story-block__media{width:100%;}
}