/* ================================================================
   ABOUT US PAGE
   Loads after eclipse-main (main.css) and relies on its :root tokens
   (--navy, --gold, --gold-light, --cream, --warm, --border, --muted)
   plus the Libre Baskerville / Inter fonts already enqueued site-wide.
   Mobile-first: base rules target ≤767px, then two min-width layers
   add the 768–1024px (tablet) and ≥1025px (desktop) layouts.
   ================================================================ */

/* ── HERO / ABOUT SLIDER (static text, auto-sliding images beside it) ── */
.about-hero-slider{
  padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,5vw,3rem);
  background:var(--cream);
}
.about-hero-slider-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  align-items:center;
}
.about-hero-slider-content{max-width:760px;text-align:center;}
.about-eyebrow-plain{
  font-family:'Inter',sans-serif;
  font-size:clamp(0.65rem,1.2vw,0.75rem);
  font-weight:600;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:0.75rem;
}
.about-page-title{
  font-family:'Libre Baskerville',serif;
  font-size:clamp(1.8rem,5vw,2.75rem);
  font-weight:700;
  color:var(--navy);
  line-height:1.15;
  margin-bottom:1rem;
}
.about-lead{
  font-family:'Libre Baskerville',serif;
  font-style:normal;
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  line-height:1.7;
  color:var(--navy);
}

/* ── HERO SLIDER MEDIA (auto crossfade, no controls) ── */
.about-hero-slider-media{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:2px;
  background:var(--warm);
}
.about-hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.2s ease;
}
.about-hero-slide.is-active{opacity:1;}
@media(prefers-reduced-motion:reduce){
  .about-hero-slide{transition:none;}
}

/* ── HERO SLIDER NAV BUTTONS ── */
.about-hero-slider-nav{
  position:absolute;
  top:50%;
  z-index:3;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:50%;
  background:#fff;
  color:var(--navy);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.28);
  transition:background 0.2s ease,color 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease;
}
.about-hero-slider-nav svg{width:16px;height:16px;}
.about-hero-slider-nav:hover{background:var(--gold);color:var(--navy);transform:translateY(-50%) scale(1.1);box-shadow:0 6px 18px rgba(0,0,0,0.32);}
.about-hero-slider-nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.about-hero-slider-nav--prev{left:0.6rem;}
.about-hero-slider-nav--next{right:0.6rem;}

/* ── ALTERNATING STORY ROWS ── */
.about-story{
  max-width:1200px;
  margin:0 auto;
  padding:clamp(1rem,4vw,2rem) clamp(1.25rem,5vw,3rem);
}
.about-row{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  align-items:center;
  padding:clamp(2.5rem,6vw,4.5rem) 0;
  border-bottom:1px solid var(--border);
}
.about-story .about-row:last-child{border-bottom:none;}
.about-row-media img{
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
}
.about-row-content h2{
  font-family:'Libre Baskerville',serif;
  font-size:clamp(1.4rem,3.4vw,2rem);
  font-weight:700;
  color:var(--navy);
  line-height:1.25;
  margin-bottom:1rem;
}
.about-row-content p{
  font-size:clamp(0.95rem,1.6vw,1.05rem);
  color:var(--muted);
  line-height:1.8;
}

/* ── FEATURE HIGHLIGHTS ── */
.about-features{
  background:var(--warm);
  padding:clamp(3rem,8vw,5.5rem) clamp(1.25rem,5vw,3rem);
}
.about-features-title{
  max-width:1200px;
  margin:0 auto clamp(2rem,5vw,3rem);
  text-align:center;
  font-family:'Libre Baskerville',serif;
  font-size:clamp(1.3rem,3vw,1.9rem);
  font-weight:700;
  color:var(--navy);
}
.about-features-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
}
.about-feature{
  background:#fff;
  border:1px solid var(--border);
  padding:clamp(1.5rem,3vw,2rem);
  text-align:center;
}
.about-feature-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--navy);
  color:var(--gold-light);
  margin-bottom:1.1rem;
}
.about-feature-icon svg{width:24px;height:24px;}
.about-feature h3{
  font-family:'Libre Baskerville',serif;
  font-size:1.05rem;
  color:var(--navy);
  margin-bottom:0.5rem;
}
.about-feature p{
  font-size:0.85rem;
  color:var(--muted);
  line-height:1.65;
}

/* ── CLOSING CTA BAND ── */
.about-cta{
  background:var(--navy);
  padding:clamp(3.5rem,9vw,6rem) clamp(1.25rem,5vw,3rem);
  text-align:center;
}
.about-cta-inner{max-width:780px;margin:0 auto;}
.about-cta-tagline{
  font-family:'Libre Baskerville',serif;
  font-weight:400;
  font-style:normal;
  font-size:clamp(1.4rem,4vw,2.3rem);
  line-height:1.4;
  color:#fff;
  margin-bottom:2rem;
}
.about-cta-btn{
  display:inline-block;
  padding:0.9rem 2.4rem;
  font-size:0.8rem;
  transition:transform 0.2s ease,background 0.2s ease;
}
.about-cta-btn:hover{transform:translateY(-2px);}

/* ── SCROLL REVEAL (JS toggles .is-visible; see about.js) ── */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.6s ease,transform 0.6s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ── TABLET (768–1024px) ── */
@media(min-width:768px){
  .about-hero-slider-inner{grid-template-columns:1fr 1fr;gap:3rem;}
  .about-hero-slider-content{text-align:left;}
  .about-hero-slider-nav{width:44px;height:44px;}
  .about-hero-slider-nav svg{width:20px;height:20px;}
  .about-hero-slider-nav--prev{left:1rem;}
  .about-hero-slider-nav--next{right:1rem;}
  .about-row{grid-template-columns:1fr 1fr;gap:3rem;}
  .about-row--reverse .about-row-media{order:2;}
  .about-row--reverse .about-row-content{order:1;}
  .about-features-grid{grid-template-columns:repeat(2,1fr);}
}

/* ── DESKTOP (≥1025px) ── */
@media(min-width:1025px){
  .about-hero-slider-inner{gap:4.5rem;}
  .about-hero-slider-nav{width:48px;height:48px;}
  .about-hero-slider-nav svg{width:22px;height:22px;}
  .about-hero-slider-nav--prev{left:1.25rem;}
  .about-hero-slider-nav--next{right:1.25rem;}
  .about-row{gap:4.5rem;}
  .about-features-grid{grid-template-columns:repeat(4,1fr);}
}