/* =========================================================
= ABOUT PAGE (scoped)
  1) Short hero (index style)
  2) One continuous middle stack (About / Mission & Vision / History)
  3) Dark CTA (index hero vibe)
  4) Responsive & motion
========================================================= */


/* =========================================================
= 1) HERO — INDEX STYLE, SHORTER (header left / verse right)
========================================================= */
.about-hero{
  position:relative;
  min-height:clamp(62vh,72vh,78vh);
  display:flex; align-items:center;
  overflow:hidden;
  padding:clamp(80px,14vh,120px) 0;
}
.about-hero .about-hero-bg{
  position:absolute; inset:0; z-index:-2;
  background:#000 center/cover no-repeat;
  background-image:var(--about-hero-image, url('/images/hero-about.jpg'));
  transform:scale(1.02);
}
.about-hero::before{ /* dark navy overlay */
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(12,18,28,.92);
}
.about-hero::after{ /* dots + vignettes */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0),
    radial-gradient(120% 120% at 15% 40%, rgba(0,0,0,.20), transparent 60%),
    radial-gradient(120% 120% at 85% 60%, rgba(0,0,0,.25), transparent 65%);
  background-size:20px 20px, 100% 100%, 100% 100%;
  background-repeat:repeat, no-repeat, no-repeat;
  background-position:0 0, center, center;
}

/* layout */
.about-hero .hero-grid{
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(24px,6vw,64px); align-items:center; width:100%;
}
.about-hero .hero-content{
  color:#fff; text-align:left; padding:0 !important; /* override any global hero padding */
}
.about-hero .section-tagline{
  display:inline-block; font-size:.9rem; letter-spacing:.1em; text-transform:uppercase;
  color:#dbeafe; font-weight:600; margin-bottom:16px;
}
.about-hero h1{
  margin:0 0 16px; font-size:clamp(36px,5vw,60px);
  font-weight:700; line-height:1.2; letter-spacing:-2px;
}
.about-hero .highlight-text{ color:var(--accent); }

/* verse card (right) */
.about-hero .hero-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; border-radius:20px;
  padding:clamp(20px,3vw,28px) !important;
  backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.about-hero .hero-card blockquote{ margin:0 0 10px; font-size:clamp(18px,2.2vw,22px); line-height:1.6; }
.about-hero .hero-card cite{
  display:block; margin-top:6px; font-style:normal; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; opacity:.9;
}

@media (max-width:900px){
  .about-hero .hero-grid{ grid-template-columns:1fr; }
  .about-hero .hero-card{ order:2; }
}

/* About Intro container paddings (tighter than global) */
.about-stack .about-intro.container{
  padding-left:0 !important; padding-right:0 !important; padding-top:100px;
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
}
@media (max-width:800px){
  .about-stack .about-intro.container{ padding-left:12px !important; padding-right:12px !important; }
}


/* =========================================================
= 2) MIDDLE STACK — CONTINUOUS SECTION (About / M&V / History)
========================================================= */
/* Explicitly cancel any global full-bleed for About page stack */
.about-stack.section.alt{
  margin-left:0; margin-right:0; /* override site-wide full-bleed */
  border-radius:40px;
  box-shadow:0 1px 0 var(--line);
  background:var(--surface);
  padding:0; overflow:hidden; position:relative;
  margin-top:-40px; /* tuck under hero curve */ z-index:10;
}

/* gentle background blobs */
.about-stack.section.alt::before,
.about-stack.section.alt::after{
  content:""; position:absolute; pointer-events:none; z-index:0;
}
.about-stack.section.alt::before{
  width:480px; height:480px; left:-160px; top:-160px;
  background:rgba(10,53,91,.04);
  border-radius:40% 60% 70% 30% / 40% 40% 60% 60%;
  transform:rotate(-12deg);
}
.about-stack.section.alt::after{
  width:560px; height:560px; right:-200px; bottom:-220px;
  background:rgba(10,53,91,.03);
  border-radius:70% 30% 30% 70% / 60% 70% 30% 40%;
  transform:rotate(10deg);
}

/* inner blocks & headings */
.about-stack .stack-block{ position:relative; z-index:1; padding:clamp(48px,6vw,64px) 0; }
.about-stack h2{ margin:0 0 10px; font-size:clamp(32px,4vw,48px); letter-spacing:-1px; color:var(--ink); }
.about-stack h2 span{ color:var(--accent); }
.about-stack .pill{ margin-bottom:10px; }

/* 2a) About Intro body */
.about-stack .about-intro .prose{ color:var(--muted); font-size:18px; line-height:1.8; }

/* 2b) Mission & Vision cards */
.about-stack .mission-vision .section-header-compact{ margin-bottom:22px; }
.about-stack .mission-vision .section-header-compact h2{
  margin:6px 0 0; font-size:clamp(28px,3.6vw,40px); letter-spacing:-.6px;
}
.mv-grid{
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(28px,6vw,64px); align-items:stretch;
}
.mv-card{
  position:relative; padding:clamp(18px,2.4vw,28px);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(#fff,#fff) padding-box,
    radial-gradient(120% 140% at 0% 0%, rgba(10,53,91,.10), transparent 60%) border-box;
  border:1px solid transparent; box-shadow:var(--shadow);
  color:var(--ink); display:flex; flex-direction:column; gap:10px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.mv-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.12); }
.mv-card h3{ margin:0 0 6px; font-size:clamp(18px,2.4vw,22px); letter-spacing:-.2px; position:relative; }
.mv-card h3::after{
  content:""; position:absolute; left:0; bottom:-8px; width:40px; height:3px; border-radius:2px;
  background:var(--accent); opacity:.2;
}
.mv-card p{ margin:8px 0 0; color:var(--muted); line-height:1.8; }

/* 2c) History (timeline + stacked media) */
.history-grid{
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(28px,6vw,64px); align-items:center; padding-bottom:80px;
}

/* simple vertical timeline */
.history-copy p{
  position:relative; padding-left:26px; margin:0 0 14px 0;
  color:var(--muted); line-height:1.8;
}
.history-copy p::before{
  content:""; position:absolute; left:8px; top:.55em; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 2px rgba(10,53,91,.18);
}
.history-copy p + p{ margin-top:10px; }
.history-copy p + p::after{
  content:""; position:absolute; left:11.5px; top:-22px; bottom:calc(100% - 10px);
  width:2px; background:var(--line);
}

/* stacked photos */
.stack-media{ position:relative; min-height:360px; }
.stack-media img{
  display:block; width:70%; height:auto; object-fit:cover;
  border-radius:18px; box-shadow:0 18px 36px rgba(0,0,0,.14);
}
.stack-media img.base{ position:relative; z-index:1; margin-left:auto; }
.stack-media img.float{
  position:absolute; left:-6%; bottom:-8%; width:58%; z-index:2;
  border:6px solid #fff; transform:rotate(-2.5deg);
}

/* hairline to meet CTA */
.about-stack .history{ position:relative; }
.about-stack .history::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line);
}

/* gentle pull-up before CTA */
.about-stack{ margin-bottom:-28px; }
.about-stack::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:24px;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 100%); opacity:.25;
}


/* =========================================================
= 3) DARK CTA — INDEX HERO VIBE
========================================================= */
.dark-cta{
  position:relative; overflow:hidden; color:#fff;
  padding:clamp(80px,14vh,120px) 0; text-align:center;
}
.dark-cta .dark-cta-bg{
  position:absolute; inset:0; z-index:-2;
  background:#000 center/cover no-repeat;
  background-image:var(--cta-image, url('/images/hero-about.jpg'));
  transform:scale(1.02);
}
.dark-cta::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(12,18,28,.92); }
.dark-cta::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0),
    radial-gradient(120% 120% at 15% 40%, rgba(0,0,0,.20), transparent 60%),
    radial-gradient(120% 120% at 85% 60%, rgba(0,0,0,.25), transparent 65%);
  background-size:20px 20px, 100% 100%, 100% 100%;
  background-repeat:repeat, no-repeat, no-repeat;
  background-position:0 0, center, center;
}
.dark-cta h2{
  margin:0 0 10px; font-size:clamp(32px,4vw,48px);
  font-weight:700; letter-spacing:-1px;
}
.dark-cta h2 span{ color:var(--accent); }
.dark-cta .lead{
  margin:0 auto 16px; max-width:65ch;
  color:rgba(255,255,255,.9); font-size:18px; line-height:1.7;
}
.dark-cta .cta-info{ margin:6px auto 18px; opacity:.9; font-size:15px; }
.dark-cta .cta-info .divider{ margin:0 10px; opacity:.6; }
.dark-cta .button-group{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.dark-cta .btn.secondary{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.7); }
.dark-cta .btn.secondary:hover{ background:#fff; color:#111; border-color:#fff; }


/* =========================================================
= 4) RESPONSIVE & MOTION
========================================================= */
@media (max-width:1100px){
  .mv-grid, .history-grid{ grid-template-columns:1fr; }
  .stack-media{ min-height:0; margin-top:10px; }
  .stack-media img{ width:100%; }
  .stack-media img.base{ margin-left:0; }
  .stack-media img.float{
    position:static; width:100%; transform:none; border-width:4px; margin-top:12px;
  }
}
@media (prefers-reduced-motion:reduce){
  .mv-card{ transition:none !important; }
}

/* ===== About page: larger side padding (gutters) ===== */
.about-page{
  /* keep same content width, add bigger gutters */
  --about-maxw: 1280px;
  --about-pad: clamp(28px, 7vw, 64px);
}

.about-page .container{
  max-width: var(--about-maxw);
  margin-inline: auto;
  padding-inline: var(--about-pad) !important;
}

/* make sure the intro block also uses the bigger gutters */
.about-page .about-stack .about-intro.container{
  padding-left: var(--about-pad) !important;
  padding-right: var(--about-pad) !important;
}

/* a touch more on very small phones */
@media (max-width: 420px){
  .about-page{ --about-pad: max(32px, 8vw); }
}

/* keep a comfy gutter on large desktops, too */
@media (min-width: 1400px){
  .about-page{ --about-pad: 72px; }
}

/* ===== About → History images: fit & balance ===== */
.about-page .stack-media{
  /* consistent visual ratio + smoother paint */
  --stack-ar: 16 / 10;
  --stack-radius: 18px;
  --stack-shadow: 0 18px 36px rgba(0,0,0,.14);
  position: relative;
  min-height: clamp(320px, 36vw, 520px);
}

.about-page .stack-media img{
  display: block;
  aspect-ratio: var(--stack-ar);
  width: 68%;
  height: auto;
  object-fit: cover;
  object-position: center 55%;
  border-radius: var(--stack-radius);
  box-shadow: var(--stack-shadow);
}

/* Base image (right) */
.about-page .stack-media img.base{
  position: relative;
  z-index: 1;
  margin-left: auto;                 /* pushes to the right */
  width: min(640px, 68%);
}

/* Floating image (overlapped bottom-left) */
.about-page .stack-media img.float{
  position: absolute;
  z-index: 2;
  left: clamp(0px, 1vw, 14px);       /* no more negative clipping */
  bottom: clamp(-22px, -2vw, -36px); /* tasteful overlap */
  width: min(520px, 52%);
  border: 6px solid #fff;
  transform: rotate(-1.2deg);
  object-position: center 50%;
}

/* Give the image cluster a bit of breathing room from the copy */
.about-page .history-grid{
  align-items: center;
}

/* Tablet & down: stack cleanly, full-width images, no rotation */
@media (max-width: 1100px){
  .about-page .stack-media{
    min-height: 0;
    margin-top: 10px;
  }
  .about-page .stack-media img{
    width: 100%;
    aspect-ratio: 4 / 3;            /* friendlier on phones */
    border-radius: 16px;
  }
  .about-page .stack-media img.base{
    margin-left: 0;
  }
  .about-page .stack-media img.float{
    position: static;
    width: 100%;
    border-width: 4px;
    transform: none;
    margin-top: 12px;
  }
}

/* Small phones: a touch tighter radius & safer crop */
@media (max-width: 420px){
  .about-page .stack-media img{
    aspect-ratio: 3 / 2;
    border-radius: 14px;
  }
}

.about-page .stack-media img.base{
  position: relative;
  z-index: 1;
  margin-left: auto;
  width: min(640px, 68%);
  display: block;
  object-fit: cover;
  object-position: center 55%;
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(0,0,0,.14);
}

.about-page .stack-media img.float{
  position: absolute;
  z-index: 2;
  left: clamp(6px, 2vw, 20px);
  bottom: 0;                               /* keep it inside the box */
  width: min(520px, 54%);
  border: 6px solid #fff;
  transform: rotate(-1deg);
  display: block;
  object-fit: cover;
  object-position: center 50%;
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(0,0,0,.14);
}

/* Mobile: clean stack, no overlap = no clipping */
@media (max-width: 1100px){
  .about-page .stack-media{ min-height: 0; padding-bottom: 0; }
  .about-page .stack-media img{ width: 100%; border-radius: 16px; }
  .about-page .stack-media img.base{ margin-left: 0; }
  .about-page .stack-media img.float{
    position: static;
    width: 100%;
    border-width: 4px;
    transform: none;
    margin-top: 12px;
  }
}

/* remove the tiny overlap that pulled CTA up (caused tight bottom) */
.about-page .about-stack{
  margin-bottom: 0 !important;
}

/* (Mobile stays cleanly stacked; no overlap, no clipping) */
@media (max-width: 1100px){
  .about-page .history-grid{ padding-bottom: clamp(48px, 8vw, 72px); }
  .about-page .stack-media { padding-bottom: 0; }
  .about-page .stack-media img.float{ position: static; margin-top: 12px; }
}

/* ===== Desktop repair: History collage ===== */
@media (min-width: 1025px){
  /* give the section extra interior room so the float can overlap safely */

  /* reserve space inside the media frame so the negative-bottom float
     doesn't collide with the rounded container edge */
  .about-page .stack-media{
    min-height: 420px;
    padding-bottom: 12%;
  }

  /* restore the intended overlap/angle for desktop */
  .about-page .stack-media img.float{
    bottom: -8%;           /* back to the original overlap */
    left: -6%;
    width: 58%;
    transform: rotate(-2.5deg);
    border-width: 6px;
    position: absolute;    /* ensure it stays layered */
  }
}

/* Hide the second/history float image on mobile */
@media (max-width: 900px){
  .about-page .stack-media img.float{ 
    display: none !important;
  }
  /* tighten the media wrapper since we're showing only one image */
  .about-page .stack-media{
    min-height: 0;
    padding-bottom: 0;
  }
  .about-page .stack-media img.base{
    width: 100%;
    margin-left: 0;
  }
}

/* ===== About → fix white under the rounded corners (desktop) ===== */
@media (min-width: 1000px){
  /* Stop overlapping the CTA */
  .about-stack{ 
    margin-bottom: 0 !important;
  }
  /* Remove the bottom fade that accentuates the overlap */
  .about-stack::after{
    content: none !important;
  }
}

/* Ensure the CTA starts immediately after the stack */
.dark-cta{
  margin-top: 0 !important;
}
/* About — remove rounded corners on small screens only */
@media (max-width: 768px){
  .about-stack.section.alt{
    border-radius: 0 !important;
  }
  /* hide the decorative blobs + bottom fade so edges look clean */
  .about-stack.section.alt::before,
  .about-stack.section.alt::after{
    display: none !important;
  }
}
/* About – stronger tuck on desktop so the curve hides the page bg */
@media (min-width: 900px){
  /* Pull the next section (CTA) up under the rounded corners */
  .about-stack.section.alt{
    margin-bottom: -72px;     /* was -28px / -40px; increase overlap */
  }
  /* Extend the little fade so it matches the new overlap depth */
  .about-stack.section.alt::after{
    height: 72px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 100%);
    opacity: .35;
  }

  /* Make sure the CTA sits *behind* the rounded section visually */
  .final-cta.dark-cta{
    position: relative;
    z-index: 0;                /* .about-stack already has z-index:10 */
  }
}
/* Mobile: keep the flat edge we added earlier */
@media (max-width: 899px){
  .about-stack.section.alt{ border-radius: 0; }
}

/* Desktop: remove the bottom hairline + stronger underlap */
@media (min-width: 900px){
  .about-stack .history::after{ display: none !important; }  /* hide the 1px divider */
  .about-stack.section.alt{ margin-bottom: -96px; }           /* pull over CTA more */
  .final-cta.dark-cta{ position: relative; z-index: 0; }      /* stays behind the curve */
}
/* Move the divider to the TOP (so nothing shows under the radius) */
.about-stack.section.alt{
  box-shadow: inset 0 1px 0 var(--line) !important;
}

/* Give the curve extra overlap on desktop so it fully covers the CTA */
@media (min-width: 900px){
  .about-stack.section.alt{
    margin-bottom: -120px !important;   /* stronger tuck */
  }
  .final-cta.dark-cta{
    position: relative;
    z-index: 0;                          /* stays visually behind the stack */
    margin-top: 0 !important;
  }
}
/* CTA: push content down on desktop to clear the overlapped curve */
@media (min-width: 900px){
  .final-cta.dark-cta{
    padding-top: calc(clamp(80px, 14vh, 120px) + 96px) !important; /* bump if needed */
    margin-top: 0 !important;   /* keep it snug under the rounded stack */
  }
}