/* ═══════════════════════════════════════════════
   TRITON Results Page — Page-Specific Styles
   Global design system: ../global.css
   ═══════════════════════════════════════════════ */


/* ════════════════════════════════════════════════
   HERO — Image Background (no video on this page)
   ════════════════════════════════════════════════ */
.results-hero .hero-vid{
  background:url('../../media/images/Customers/Tanks/kris_eric_tank.jpg') center/cover no-repeat;
}
.results-hero .hero-vid::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:rgba(1,24,39,.55);mix-blend-mode:multiply
}
.results-hero .hero-vid::after{
  content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,
    rgba(1,24,39,.6) 0%,
    rgba(1,24,39,.2) 25%,
    rgba(1,24,39,.15) 50%,
    rgba(1,24,39,.92) 100%
  )
}
.results-hero .hero-t{
  font-size:clamp(3rem,7vw,6.5rem);max-width:16ch
}
.results-hero .hero-ct{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  padding:0 5vw 12vh
}
.results-hero .hero-ey{justify-content:center}
.results-hero .hero-sub{text-align:center;max-width:58ch}
.results-hero .hero-scroll-label{color:var(--aq)}


/* ════════════════════════════════════════════════
   DEFINITION-FIRST — GEO intro block
   ════════════════════════════════════════════════ */
.results-intro{
  padding:clamp(3rem,6vw,5rem) 0 0;
  position:relative
}
.results-intro-text{
  max-width:80ch;
  font-size:clamp(1.1rem,1.3vw,1.25rem);
  line-height:1.8;
  color:rgba(255,255,255,.72)
}


/* ════════════════════════════════════════════════
   FEATURED STORIES — Full-width story cards
   ════════════════════════════════════════════════ */
.featured-stories{
  background:linear-gradient(180deg,var(--bp) 0%,rgba(3,47,79,.35) 50%,var(--bp) 100%)
}

.story-card{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(2.5rem,5vw,5rem);
  align-items:center;
  margin-bottom:clamp(5rem,10vw,8rem)
}
.story-card:last-child{margin-bottom:0}

/* Alternate layout — image on right */
.story-card:nth-child(even){direction:rtl}
.story-card:nth-child(even) > *{direction:ltr}

.story-img{
  position:relative;overflow:hidden;
  aspect-ratio:4/3
}
.story-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.16,1,.3,1)
}
.story-card:hover .story-img img{transform:scale(1.04)}
.story-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 60%,rgba(1,24,39,.5));
  pointer-events:none
}

.story-content{display:flex;flex-direction:column;gap:1rem}

.story-summary{
  font-family:var(--h);font-weight:900;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--aq);
  display:flex;align-items:center;gap:.8rem
}
.story-summary::before{
  content:'';width:32px;height:2px;background:var(--aq);flex-shrink:0
}

.story-name{
  font-family:var(--h);font-weight:900;
  font-size:clamp(1.6rem,2.5vw,2.2rem);
  text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.1
}

.story-quote{
  font-size:clamp(1.1rem,1.3vw,1.25rem);
  line-height:1.75;
  color:rgba(255,255,255,.82);
  position:relative;
  padding-left:1.8rem;
  border-left:2px solid rgba(133,255,199,.2)
}

.story-journey{display:grid;gap:.6rem;margin-top:.5rem}
.story-phase{display:flex;align-items:flex-start;gap:.8rem;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.68)}
.story-phase-label{
  font-family:var(--h);font-weight:900;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--aq);flex-shrink:0;width:5.5rem;
  padding-top:.2rem
}


/* ════════════════════════════════════════════════
   STATS — Big counter numbers (static layout)
   ════════════════════════════════════════════════ */
.results-stats{
  background:linear-gradient(135deg,rgba(0,100,102,.2) 0%,var(--bp) 70%);
  border-top:1px solid rgba(133,255,199,.06);
  border-bottom:1px solid rgba(133,255,199,.06)
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  text-align:center
}
.stat-block .num-lg{margin-bottom:.4rem}


/* ════════════════════════════════════════════════
   TESTIMONIAL GRID — Compact cards
   ════════════════════════════════════════════════ */
.results-grid-section{
  background:linear-gradient(180deg,var(--bp) 0%,rgba(3,47,79,.25) 100%)
}

.results-testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem
}

.grid-testi{
  background:rgba(3,47,79,.5);
  border:1px solid rgba(133,255,199,.1);
  overflow:hidden;
  transition:all .4s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column
}
.grid-testi:hover{
  border-color:rgba(133,255,199,.25);
  transform:translateY(-5px)
}

.grid-testi-img{
  height:220px;overflow:hidden;position:relative
}
.grid-testi-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1)
}
.grid-testi:hover .grid-testi-img img{transform:scale(1.05)}
.grid-testi-img::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:50%;
  background:linear-gradient(transparent,rgba(3,47,79,.6));
  pointer-events:none
}

.grid-testi-body{
  padding:1.5rem 1.8rem 2rem;
  flex:1;display:flex;flex-direction:column
}
.grid-testi-badge{
  font-family:var(--h);font-weight:900;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--aq);margin-bottom:.6rem
}
.grid-testi-name{
  font-family:var(--h);font-weight:900;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:.03em;
  margin-bottom:.8rem
}
.grid-testi-quote{
  font-size:1.05rem;line-height:1.7;
  color:rgba(255,255,255,.75);flex:1
}

/* Placeholder fills the image slot in grid testimonials */
.grid-testi-ph{height:100%;min-height:0}


/* ════════════════════════════════════════════════
   OUTCOME SUMMARY — 4 results cards
   ════════════════════════════════════════════════ */
.outcome-section{
  background:linear-gradient(180deg,var(--bp) 0%,rgba(0,100,102,.12) 50%,var(--bp) 100%)
}
.outcome-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem
}
.outcome-item{
  padding:clamp(2rem,3vw,2.8rem);
  background:rgba(1,24,39,.6);
  border:1px solid rgba(133,255,199,.1);
  transition:all .4s;
  display:flex;gap:1.5rem;align-items:flex-start
}
.outcome-item:hover{
  border-color:rgba(133,255,199,.25);
  transform:translateY(-3px)
}
.outcome-icon{
  flex-shrink:0;width:56px;height:56px;
  background:rgba(133,255,199,.08);
  border:1px solid rgba(133,255,199,.15);
  display:grid;place-items:center
}
.outcome-icon i{font-size:1.4rem;color:var(--aq)}
.outcome-content h3{
  font-family:var(--h);font-weight:900;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:.6rem
}
.outcome-content p{
  font-size:1.05rem;line-height:1.7;
  color:rgba(255,255,255,.72)
}


/* ════════════════════════════════════════════════
   COMMUNITY INVITE STRIP — Ehsan's Live Sessions
   Full-width marine strip between grid and outcomes
   ════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════
   FAQ — Marine background variation
   ════════════════════════════════════════════════ */
.results-faq{
  background:linear-gradient(180deg,var(--bp) 0%,rgba(3,47,79,.5) 50%,var(--bp) 100%)
}


/* ════════════════════════════════════════════════
   MULTI-PATH CTA
   ════════════════════════════════════════════════ */
.results-cta{
  background:
    radial-gradient(ellipse at 30% 80%,rgba(0,100,102,.3),transparent 60%),
    radial-gradient(ellipse at 70% 20%,rgba(3,47,79,.5),transparent 50%),
    var(--bp)
}


/* ════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤1024px)
   ════════════════════════════════════════════════ */
@media(max-width:1024px){
  .story-card{grid-template-columns:1fr}
  .story-card:nth-child(even){direction:ltr}

  .stats-grid{grid-template-columns:1fr 1fr}

  .results-testi-grid{grid-template-columns:1fr 1fr}
}


/* ════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤768px)
   ════════════════════════════════════════════════ */
@media(max-width:768px){
  .results-hero .hero-t{font-size:clamp(2.4rem,9vw,3.5rem)}
  .results-hero .hero-ct{padding:0 6vw 8vh}
  .results-hero .hero-ey{justify-content:flex-start}

  .story-img{aspect-ratio:16/9}

  .stats-grid{grid-template-columns:1fr 1fr;gap:1.5rem}

  .results-testi-grid{grid-template-columns:1fr}

  .outcome-grid{grid-template-columns:1fr}
  .outcome-item{flex-direction:column;gap:1rem}
}


/* ════════════════════════════════════════════════
   RESPONSIVE — Small mobile (≤480px)
   ════════════════════════════════════════════════ */
@media(max-width:480px){
  .results-hero .hero-t{font-size:clamp(2rem,8vw,2.6rem)}

  .story-phase{flex-direction:column;gap:.3rem}
  .story-phase-label{width:auto}
}