/* ══════════════════════════════════════════
   about.css — about page only
   ══════════════════════════════════════════ */

/* ── HERO ── */

.about-hero{
  position: relative;
  background: var(--ocean);
  min-height: 50vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.about-hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.about-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;

  background: linear-gradient(
    150deg,
    rgba(11,61,107,0.88) 0%,
    rgba(11,61,107,0.45) 55%,
    rgba(26,111,168,0.55) 100%
  );
}

/* content */

.about-hero-content{
  position: relative;
  z-index:2;

  max-width:1080px;
  margin:0 auto;
  padding:80px 40px;
  width:100%;
}

/* top tag */

.about-hero-tag{
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--sunset);
  margin-bottom:10px;
  font-weight:600;
}

/* title */

.about-hero h1{
  font-size: clamp(2.3rem,5vw,3.8rem);
  font-weight:800;
  color:#fff;

  line-height:1.05;
  letter-spacing:-0.4px;

  margin-bottom:14px;
  max-width:640px;
}

.about-hero h1 em{
  font-style:italic;
  color:var(--sunset);
}

/* subtitle */

.about-hero-sub{
  color:rgba(255,255,255,0.82);
  font-size:15px;
  line-height:1.6;
  max-width:540px;
}

/* mobile */

@media (max-width:768px){

  .about-hero{
    min-height:46vh;
  }

  .about-hero-content{
    padding:60px 20px;
  }

  .about-hero h1{
    line-height:1.08;
  }

}

    /* ── ABOUT PAGE SECTION STYLES ── */

    /* ── OUR STORY ── */
    #story { background: #fff; }
    .story-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .story-img-wrap {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
    }
    .story-img-wrap img {
      width: 100%;
      height: 420px;
      object-fit: cover;
      display: block;
      border-radius: 18px;
    }
    /* floating stat badge */
    .story-badge {
      position: absolute;
      bottom: 24px; left: 24px;
      background: rgba(255,255,255,0.96);
      border-radius: 14px;
      padding: 14px 20px;
      box-shadow: 0 12px 40px rgba(11,61,107,0.18);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .story-badge-num {
      font-family: 'Poppins', sans-serif;
      font-size: 2rem; font-weight: 800;
      color: var(--sunset); line-height: 1;
    }
    .story-badge-label {
      font-size: 12px; color: var(--text-muted); letter-spacing: 0.3px;
    }
    .story-text h2 { margin-bottom: 16px; }
    .story-text p {
      font-size: 15px; color: var(--text-muted);
      line-height: 1.9; margin-bottom: 18px;
    }
    .story-text p:last-child { margin-bottom: 0; }
    .story-text strong { color: var(--ocean); font-weight: 600; }

    @media (max-width: 860px) {
      .story-grid { grid-template-columns: 1fr; gap: 36px; }
      .story-img-wrap img { height: 300px; }
    }

    /* ── WHY US ── */
    #why { background: var(--sand); }
    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 8px;
    }
    .why-card {
      background: #fff;
      border-radius: 16px;
      padding: 32px 28px;
      border: 1px solid rgba(11,61,107,0.07);
      box-shadow: 0 8px 32px rgba(11,61,107,0.07);
      transition: transform .2s ease, box-shadow .2s ease;
      opacity: 0;
      transform: translateY(16px);
    }

    /* Reveal transitions (replaces JS inline styles) */
.why-card{
  transition: opacity .45s ease, transform .45s ease, box-shadow .2s ease;
  transform: translateY(14px); /* match old JS translateY(14px) */
}

@media (prefers-reduced-motion: reduce) {
  .why-card,
  .area-fact {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* Stagger delays (replaces JS transition-delay) */
.rev-d0{ transition-delay: 0ms; }
.rev-d1{ transition-delay: 80ms; }
.rev-d2{ transition-delay: 160ms; }

/* Make sure hover still feels snappy */
.why-card:hover{
  transition-delay: 0ms;
}

    .why-card.is-in {
      opacity: 1;
      transform: translateY(0);
    }
    .why-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 48px rgba(11,61,107,0.11);
    }
    .why-icon {
      font-size: 2.2rem;
      margin-bottom: 16px;
      display: block;
    }
    .why-card h3 {
      font-size: 1.15rem; color: var(--ocean);
      margin-bottom: 10px; font-weight: 700;
    }
    .why-card p {
      font-size: 14px; color: var(--text-muted); line-height: 1.75;
    }

    @media (max-width: 860px) {
      .why-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px) {
      .why-grid { grid-template-columns: 1fr; }
    }

    /* ── THE AREA ── */
    #area {
      background: var(--ocean);
      position: relative;
      overflow: hidden;
    }
    #area::before {
      content: "";
      position: absolute; inset: 0;
      background:
        radial-gradient(900px 600px at 10% 20%, rgba(247,127,58,0.08), transparent 55%),
        radial-gradient(700px 500px at 90% 80%, rgba(63,169,216,0.10), transparent 55%);
      pointer-events: none;
    }
    #area .container { position: relative; z-index: 1; }
    #area .section-tag { color: var(--sunset); }
    #area .section-title { color: #fff; }
    #area .section-lead { color: rgba(255,255,255,0.75); }

    .area-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: start;
    }
    .area-text p {
      font-size: 15px; color: rgba(255,255,255,0.80);
      line-height: 1.9; margin-bottom: 18px;
    }
    .area-text p strong { color: #fff; }
    .area-facts {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .area-fact {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 14px;
      padding: 20px 22px;
      display: flex;
      gap: 16px;
      align-items: flex-start;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .4s ease, transform .4s ease;
    }

    .area-fact.rev-d0{ transition-delay: 0ms; }
.area-fact.rev-d1{ transition-delay: 80ms; }
.area-fact.rev-d2{ transition-delay: 160ms; }

    .area-fact.is-in { opacity: 1; transform: translateY(0); }
    .area-fact-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
    .area-fact h4 {
      font-family: 'Poppins', sans-serif;
      font-size: 0.95rem; font-weight: 700;
      color: #fff; margin-bottom: 4px;
    }
    .area-fact p {
      font-size: 13px; color: rgba(255,255,255,0.68); line-height: 1.6;
    }

    @media (max-width: 860px) {
      .area-grid { grid-template-columns: 1fr; gap: 32px; }
    }


    /* ── FAQ ── */
    #faq { background: var(--foam); }
    /* ── CTA BAND ── */
    #cta-band {
      background: linear-gradient(135deg, var(--ocean) 0%, var(--ocean-mid) 100%);
      padding: 80px 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    #cta-band::before {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(800px 500px at 60% 50%, rgba(247,127,58,0.12), transparent 60%);
      pointer-events: none;
    }
    #cta-band .container { position: relative; z-index: 1; }
    #cta-band h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800; color: #fff; margin-bottom: 14px;
    }
    #cta-band h2 em { font-style: italic; color: var(--sunset); }
    #cta-band p {
      color: rgba(255,255,255,0.80); font-size: 16px;
      line-height: 1.7; max-width: 500px; margin: 0 auto 36px;
    }
    .cta-btns {
      display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    }
    .btn-primary {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 12px; padding: 16px 32px; border-radius: 14px;
      font-size: 14px; font-weight: 700; letter-spacing: .2px;
      text-decoration: none; color: #fff;
      background: linear-gradient(90deg, #f77f3a 0%, #e05c12 60%, #c44a0a 100%);
      box-shadow: 0 14px 34px rgba(247,127,58,0.30);
      transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
    }
    .btn-primary:hover {
      transform: translateY(-2px); filter: brightness(1.03);
      box-shadow: 0 20px 44px rgba(247,127,58,0.40);
    }
    .btn-ghost-light {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 16px 28px; border-radius: 14px;
      text-decoration: none; color: #fff;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.28);
      font-size: 14px; font-weight: 500;
      transition: background .18s ease, border-color .18s ease, transform .18s ease;
    }
    .btn-ghost-light:hover {
      background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.45);
      transform: translateY(-2px);
    }

    @media (max-width: 560px) {
      #cta-band { padding: 60px 20px; }
      .cta-btns { flex-direction: column; align-items: stretch; }
      .btn-primary, .btn-ghost-light { justify-content: center; }
    }