/*
 * about.css — Bunker Box About Page Styles
 * Page-specific styles for about.html only.
 * Depends on: styles.css (must be loaded first)
 */


/* ============================================================
   ACTIVE NAV LINK — about page
   ============================================================ */

.nav-link.active {
  color: var(--color-gold);
}

.nav-link.active::after {
  width: 100%;
}


/* ============================================================
   SECTION 1 — ABOUT HERO
   ============================================================ */

.about-hero {
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--nav-height);
  text-align: center;
  position: relative;
}

.about-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 40px;
}

.about-hero-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.7rem, 6.3vw, 7.5rem);
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--color-white);
  margin: 24px 0;
  line-height: 1.05;
  text-transform: none !important;
  text-align: center;
  width: 100%;
  font-feature-settings: "kern" 1, "liga" 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/*
 * Splitting.js .char spans — start invisible, GSAP reveals them.
 * display: inline-block is required for transform animations.
 */
.about-hero-headline .char {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}

.about-hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: var(--color-white-80);
  line-height: 1.6;
  text-align: center;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero section tag */
.about-hero .section-tag {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 4.62px;
  color: #ffffff !important;
  opacity: 1 !important;
  text-transform: uppercase;
}

.about-hero .section-tag::before,
.about-hero .section-tag::after {
  background: #c9a84c !important;
  opacity: 1 !important;
  height: 1px;
  width: 40px;
}


/* ============================================================
   SECTION 2 — WHAT WE DO
   ============================================================ */

.what-we-do {
  background: var(--color-charcoal);
  padding: 120px 40px;
}

.what-we-do-inner {
  max-width: 900px;
  margin: 0 auto;
}

/*
 * Override gold-card's default 40px padding.
 * Preserve hover transitions from the base .gold-card rule.
 */
.wwd-content {
  text-align: center;
  padding: 60px;
}

.wwd-content .section-tag {
  margin-bottom: 24px;
  justify-content: center;
}

.what-we-do .section-tag {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 4.62px;
  color: #c9a84c !important;
  opacity: 1 !important;
  text-transform: uppercase;
}

.what-we-do .section-tag::before,
.what-we-do .section-tag::after {
  background: #c9a84c !important;
  opacity: 1 !important;
  height: 1px;
  width: 40px;
}

.wwd-content .section-divider {
  margin: 24px auto 48px;
}

.wwd-statement {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.3px;
  color: var(--color-white-80);
  line-height: 1.9;
  margin-bottom: 24px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  /* GSAP ScrollTrigger animates these in — start hidden */
  opacity: 0;
  will-change: transform, opacity;
}

/* GSAP fallback — if GSAP unavailable, reveal after short delay */
@keyframes wwdFadeIn {
  to { opacity: 1; transform: none; }
}

.no-gsap .wwd-statement {
  animation: wwdFadeIn 0.6s ease forwards;
}

.no-gsap .wwd-statement:nth-child(2) {
  animation-delay: 0.2s;
}

/* Signature plaque detail */
.wwd-plaque-line {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid rgba(201, 168, 76, 0.3);
  text-align: left;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.wwd-plaque-icon {
  color: var(--color-gold);
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 4px;
  line-height: 1.7; /* align with first line of text */
}

/*
 * Cinzel does not have a true italic variant in the Google Fonts
 * loading spec used on this project (wght only, no italic axis).
 * We achieve the "premium signature" feel through gold color,
 * generous letter-spacing, and lighter font-weight instead of
 * font-style: italic (which would trigger a synthesized slant
 * that looks wrong at display sizes).
 */
.wwd-plaque-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: var(--color-gold);
  line-height: 1.7;
}


/* ============================================================
   SECTION 3 — THREE PILLARS
   ============================================================ */

.three-pillars {
  padding: 120px 40px;
}

.three-pillars-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.three-pillars .section-tag {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 4.62px;
  color: #ffffff !important;
  opacity: 1 !important;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.three-pillars .section-tag::before,
.three-pillars .section-tag::after {
  background: #c9a84c !important;
  opacity: 1 !important;
  height: 1px;
  width: 40px;
}

.three-pillars .section-headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(2.3rem, 4vw, 4rem);
  letter-spacing: -0.3px;
  text-transform: none !important;
  margin-bottom: 0;
}

/* Cards grid — stretch so all cards are equal height */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
  align-items: stretch;
}

.pillars-grid > * {
  min-width: 0;
}

.pillar-card {
  text-align: center;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gold-card hover transitions (transform + box-shadow) are inherited */
}

.pillar-icon {
  font-size: 2rem;
  color: var(--color-gold);
  margin-bottom: 24px;
  display: block;
  line-height: 1;
  /*
   * ◈ (U+25C8) renders correctly in all modern browsers.
   * If it shows as a box, the fallback is handled by the
   * ::before pseudo element approach in about.js at runtime.
   */
}

.pillar-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: none !important;
  color: var(--color-white);
  margin-bottom: 16px;
}

.pillar-card .section-divider {
  margin: 16px auto 24px;
}

.pillar-desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.3px;
  color: var(--color-white-80);
  line-height: 1.8;
  text-align: center;
  /* Fills remaining card height — pushes nothing, just fills space cleanly */
  flex: 1;
}


/* ============================================================
   SECTION 4 — LOCATION
   ============================================================ */

.location-section {
  background: var(--color-charcoal);
  padding: 120px 40px;
  text-align: center;
  border-top: var(--gold-border);
  border-bottom: var(--gold-border);
}

.location-inner {
  max-width: 700px;
  margin: 0 auto;
}

.location-inner .section-tag {
  margin-bottom: 24px;
  justify-content: center;
}

.location-section .section-tag {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 4.62px;
  color: #c9a84c !important;
  opacity: 1 !important;
  text-transform: uppercase;
}

.location-section .section-tag::before,
.location-section .section-tag::after {
  background: #c9a84c !important;
  opacity: 1 !important;
  height: 1px;
  width: 40px;
}

.location-inner .section-divider {
  margin: 0 auto 0;
}

.location-statement {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: none;
  color: var(--color-white);
  margin-top: 24px;
  line-height: 1.4;
}

.location-sub {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--color-white-60);
  text-transform: uppercase;
  margin-top: 16px;
}

/* Margin-top applied via class to avoid inline style */
.location-cta {
  margin-top: 48px;
}


/* ============================================================
   FINAL CTA — self-contained (no dependency on home.css)
   ============================================================ */

.final-cta {
  padding: 160px 40px;
  text-align: center;
}

.final-cta-inner {
  max-width: 800px;
  margin: 0 auto;
}

.final-cta .section-tag {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 4.62px;
  color: #ffffff !important;
  opacity: 1 !important;
  margin-bottom: 24px;
}

.final-cta .section-tag::before,
.final-cta .section-tag::after {
  background: #c9a84c !important;
  opacity: 1 !important;
  height: 1px;
  width: 40px;
}

.final-cta-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.9rem, 5.2vw, 5.8rem);
  font-weight: 500;
  letter-spacing: -0.3px;
  text-transform: none;
  color: var(--color-white);
  margin-bottom: 24px;
  line-height: 1.2;
}

.final-cta-sub {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: var(--color-white-80);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.7;
}

.final-cta .final-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 12px;
}

.final-cta .final-cta-phone {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 3rem;
  letter-spacing: 4px;
  color: #ffffff;
  border-bottom: 1.5px solid #c9a84c;
  padding-bottom: 4px;
  transition: color 0.3s ease;
  text-align: center;
  display: block;
}

.final-cta .final-cta-phone:hover {
  color: #c9a84c;
}

/* Arrow helper — shared across CTA buttons on this page */
.cta-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-button:hover .cta-arrow,
.cta-button-ghost:hover .cta-arrow {
  transform: translateX(6px);
}


/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */

@media (max-width: 1024px) {
  .what-we-do {
    padding: 100px 28px;
  }

  .three-pillars {
    padding: 100px 28px;
  }

  .location-section {
    padding: 100px 28px;
  }

  .final-cta {
    padding: 120px 28px;
  }

  .pillars-grid {
    gap: 24px;
  }

  .pillar-card {
    padding: 40px 28px;
  }
}


/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */

@media (max-width: 768px) {
  /* About hero */
  .about-hero {
    min-height: 50vh;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* What we do */
  .what-we-do {
    padding: 80px 20px;
  }

  .wwd-content {
    padding: 40px 24px;
  }

  .wwd-plaque-line {
    flex-direction: column;
    gap: 10px;
  }

  /* Three pillars — single column, capped width and centered */
  .three-pillars {
    padding: 80px 20px;
  }

  .pillars-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Location */
  .location-section {
    padding: 80px 20px;
  }

  /* Final CTA */
  .final-cta {
    padding: 100px 20px;
  }

  .final-cta-actions {
    flex-direction: column;
    gap: 24px;
  }

  .final-cta-phone {
    font-size: 1.1rem;
  }
}


/* ============================================================
   RESPONSIVE — 375px
   ============================================================ */

@media (max-width: 375px) {
  /* About hero */
  .about-hero-content {
    padding: 0 16px;
  }

  .about-hero-headline {
    font-size: clamp(2rem, 8vw, 2.5rem);
    letter-spacing: 2px;
  }

  /* What we do */
  .wwd-content {
    padding: 32px 16px;
  }

  .what-we-do {
    padding: 64px 16px;
  }

  /* Three pillars */
  .three-pillars {
    padding: 80px 20px;
  }

  .pillar-card {
    padding: 32px 24px;
  }

  /* Location — tighten letter-spacing to prevent overflow */
  .location-statement {
    letter-spacing: 1px;
  }

  .location-sub {
    letter-spacing: 1px;
    font-size: 0.9rem;
  }

  .location-section {
    padding: 80px 16px;
  }

  .location-cta {
    font-size: 10px;
    padding: 14px 18px;
    letter-spacing: 1.5px;
    gap: 8px;
  }

  /* Final CTA */
  .final-cta {
    padding: 80px 16px;
  }

  .final-cta-actions .cta-button {
    font-size: 10px;
    padding: 14px 18px;
    letter-spacing: 1.5px;
    gap: 8px;
  }
}


/* ============================================================
   VISIBILITY SAFETY OVERRIDE
   ============================================================ */

.section-tag,
.section-headline,
.section-subheadline,
.build-card,
.step,
.pillar-card {
  opacity: 1 !important;
  transform: none !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}