:root {
  --white: #fff;
  --cream: #fbf7ef;
  --soft: #f6efe3;
  --gold: #c58b16;
  --gold-dark: #9b690c;
  --gold-light: #df970d;
  --black: #11100d;
  --dark: #17110a;
  --text: #151515;
  --muted: #60636b;
  --line: #eadfce;
  --primary: #c58b16;
  --primary-light: #df970d;
  --neutral-light: #fbf7ef;
  --neutral-bg: #f6efe3;
  --text-dark: #151515;
  --text-muted: #60636b;
  --border-light: rgba(197, 139, 22, .15);
  --border-gold: rgba(197, 139, 22, .3);
  --glass: rgba(197, 139, 22, .05);
  --glass-border: rgba(197, 139, 22, .18);
  --navy: #fff;
  --navy-dark: #f6efe3;
  --grey: #60636b;
  --font-display: 'Inter', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  --font-serif: 'Inter', Arial, sans-serif;
  --font-mono: 'Inter', Arial, sans-serif;
  --sidebar-w: 0px;
}

body.about-page {
  min-height: 100vh;
  border: 0;
  background: var(--cream);
  color: var(--text);
  font-family: 'Inter', Arial, sans-serif;
  line-height: 1.65;
}

.about-page .topbar {
  background: var(--soft);
  border-bottom-color: rgba(197, 139, 22, .3);
}

.about-page nav {
  background: rgba(251, 247, 239, .96);
  border-bottom-color: rgba(197, 139, 22, .3);
}

.about-page .logo-name {
  color: var(--text);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.about-page .logo-tag {
  color: var(--gold);
}

.about-page .nav-links a,
.about-page .nav-dropdown > a {
  color: var(--text);
}

.about-page .nav-links a:hover,
.about-page .nav-dropdown > a:hover {
  color: var(--gold);
  background: rgba(197, 139, 22, .08);
}

.about-page .btn-outline,
.about-page .btn-gold {
  border-radius: 8px;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
}

.about-page .btn-outline {
  color: var(--gold-dark);
}

.about-page .btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #fff;
}

.about-page .phone-cta {
  border-radius: 8px;
  color: #fff;
  font-family: 'Inter', Arial, sans-serif;
}

.about-page .social-links a {
  border-color: rgba(197, 139, 22, .3);
  color: var(--gold);
}

.about-page .dropdown-menu,
.about-page .mobile-menu {
  background: var(--white);
  border-color: rgba(197, 139, 22, .25);
}

.about-page .nested-menu {
  background: var(--white);
  border-left-color: var(--gold);
}

.about-page .nested-menu a {
  color: var(--text);
}

.about-page .page-hero {
  padding: 104px 24px 76px;
  background: linear-gradient(180deg, var(--soft), var(--cream));
  text-align: left;
}

.about-page .page-hero::before {
  background-image:
    linear-gradient(rgba(197, 139, 22, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197, 139, 22, .055) 1px, transparent 1px);
}

.about-page .page-hero > * {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.about-page .breadcrumb {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1.4px;
  margin-bottom: 22px;
}

.about-page .breadcrumb a,
.about-page .page-title em,
.about-page .content-heading em {
  color: var(--gold);
}

.about-page .page-title {
  max-width: 900px;
  margin-bottom: 16px;
  color: var(--text);
  font-family: 'Inter', Arial, sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.06;
}

.about-page .page-title em,
.about-page .content-heading em {
  font-style: italic;
}

.about-page .page-intro {
  max-width: 700px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.about-page .about-story,
.about-page .about-page-content {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 72px 24px;
}

.about-page .about-story {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 56px;
}

.about-page .about-visual {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  box-shadow: 0 20px 50px rgba(29, 21, 10, .1);
}

.about-page .about-visual::after {
  background: linear-gradient(180deg, transparent 55%, rgba(17, 16, 13, .16));
}

.about-page .about-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-page .content-heading {
  color: var(--text);
  font-family: 'Inter', Arial, sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
}

.about-page .content-body {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.company-stats,
.values-grid,
.leaders-grid,
.expertise-grid {
  display: grid;
  gap: 16px;
}

.company-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 32px;
}

.company-stats > div,
.values-grid > div,
.leaders-grid > div,
.expertise-grid > div {
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--white);
}

.company-stats > div {
  padding: 22px;
  text-align: center;
}

.company-stats > div > div:first-child {
  color: var(--gold);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
}

.company-stats > div > div:last-child {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 40px;
}

.mission-grid > div:not(.values-panel) {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.mission-grid > div > img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 24px;
}

.values-panel,
.expertise-panel {
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  text-align: center;
}

.values-panel .content-heading,
.expertise-panel .content-heading {
  margin-bottom: 24px;
}

.values-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.values-grid > div,
.expertise-grid > div {
  padding: 24px;
  background: var(--white);
}

.values-grid h3,
.expertise-grid h3,
.leaders-grid h3 {
  color: var(--text);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 8px;
}

.values-grid p,
.expertise-grid p,
.leaders-grid p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.about-page .page-section-intro {
  max-width: 700px;
  margin: 0 auto 36px;
  text-align: center;
}

.leaders-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leaders-grid > div {
  padding: 32px;
  text-align: left;
}

.leaders-grid .leader-avatar {
  width: 96px;
  height: 96px;
  margin: 0 0 20px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  object-fit: contain;
}

.leaders-grid .leader-role {
  display: block;
  margin-bottom: 14px;
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.expertise-panel {
  margin-top: 40px;
}

.expertise-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: left;
}

.expertise-grid .expertise-icon {
  display: block;
  margin-bottom: 12px;
  font-size: 28px;
}

.about-page .mega-footer {
  background: linear-gradient(135deg, #120d07, #2a1b08);
  border-top-color: rgba(197, 139, 22, .2);
  color: rgba(255, 255, 255, .75);
}

.about-page .mega-footer h3,
.about-page .mega-footer h4 {
  color: #fff;
}

.about-page .mega-footer .mf-top-left p,
.about-page .mega-footer .mf-links li a,
.about-page .mega-footer .mf-areas,
.about-page .mega-footer .mfc-text,
.about-page .mega-footer .mf-nav-links a {
  color: rgba(255, 255, 255, .72);
}

.about-page .mega-footer .mf-input-wrap {
  background: rgba(255, 255, 255, .06);
}

.about-page .mega-footer .mf-input-wrap input {
  color: #fff;
}

.about-page .mega-footer .mf-bottom,
.about-page .mega-footer .mf-legal a {
  color: rgba(255, 255, 255, .48);
}

@media (max-width: 900px) {
  .about-page .about-story,
  .mission-grid {
    grid-template-columns: 1fr;
  }

  .about-page .about-story {
    gap: 32px;
  }

  .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expertise-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .about-page .nav-links,
  .about-page .nav-ctas {
    display: none;
  }

  .about-page .hamburger {
    display: flex;
  }
}

@media (max-width: 640px) {
  .about-page .topbar-right {
    width: 100%;
    justify-content: flex-end;
  }

  .about-page .social-links {
    display: none;
  }

  .about-page .phone-cta {
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 12px;
  }

  .about-page .page-hero {
    padding: 72px 20px 52px;
  }

  .about-page .breadcrumb {
    flex-wrap: nowrap;
    font-size: 9px;
    letter-spacing: 1px;
    gap: 5px;
  }

  .about-page .page-title {
    font-size: clamp(34px, 10vw, 48px);
  }

  .about-page .page-intro {
    font-size: 15px;
  }

  .about-page .about-story,
  .about-page .about-page-content {
    padding: 44px 20px;
  }

  .company-stats,
  .values-grid,
  .leaders-grid {
    grid-template-columns: 1fr;
  }

  .values-panel,
  .expertise-panel {
    padding: 24px 18px;
  }

  .leaders-grid > div {
    padding: 24px;
  }
}