.about-hero .hero-trail {
  gap: 10px;
}

.about-hero .hero-trail > span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid rgba(246, 197, 21, 0.24);
  border-radius: 999px;
  background: rgba(9, 35, 64, 0.68);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.about-page .page-section {
  padding-block: clamp(48px, 7vw, 88px);
}

.about-page .story-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(30px, 6vw, 76px);
}

.about-page .story-visual {
  min-height: 0;
  padding: 0 0 20px 20px;
}

.about-page .story-visual::before {
  position: absolute;
  inset: 20px 20px 0 0;
  border: 1px solid #e8d6b5;
  border-radius: 24px;
  content: "";
}

.about-page .story-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: clamp(340px, 39vw, 500px);
  border: 1px solid rgba(16, 42, 67, 0.1);
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(16, 42, 67, 0.16);
}

.about-page .story-seal {
  z-index: 2;
  left: auto;
  right: auto;
  inset-inline-start: 0;
  bottom: 0;
  width: auto;
  height: auto;
  min-width: 168px;
  min-height: 76px;
  padding: 13px 20px;
  border: 1px solid rgba(246, 197, 21, 0.38);
  border-radius: 16px;
  background: var(--industrial-navy);
  box-shadow: 0 12px 28px rgba(16, 42, 67, 0.2);
  font-size: 13px;
  line-height: 1.8;
}

.about-page .story-seal strong {
  color: var(--industrial-yellow);
  font-size: 16px;
}

.about-eyebrow {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border: 1px solid #ead8b7;
  border-radius: 999px;
  background: #fffaf0;
  color: #8c672f;
  font-size: 13px;
  font-weight: 800;
}

.about-eyebrow::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--industrial-yellow);
  content: "";
}

.about-page .story-copy h2 {
  margin: 16px 0 18px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.55;
}

.about-page .story-copy p {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 2.15;
}

.about-page .story-copy .article-link {
  display: inline-flex;
  min-height: 46px;
  margin-top: 10px;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border: 1px solid #e7d4af;
  border-radius: 12px;
  background: #fffaf0;
  color: var(--industrial-navy);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.about-page .story-copy .article-link:hover,
.about-page .story-copy .article-link:focus-visible {
  border-color: var(--industrial-yellow);
  background: #fff3c4;
  color: var(--industrial-navy);
}

.about-page .about-values-section {
  border-block: 1px solid #e8e4dc;
  background: linear-gradient(180deg, #f8f7f3, #f2f5f6);
}

.about-page .section-title {
  margin-bottom: 30px;
}

.about-page .section-title h2 {
  color: var(--industrial-navy);
  font-size: clamp(26px, 3vw, 36px);
}

.about-page .value-card {
  height: 100%;
  min-height: 220px;
  padding: 24px;
  border: 1px solid var(--industrial-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(16, 42, 67, 0.06);
}

.about-page .value-icon {
  border: 1px solid #efdfbd;
  background: #fff8e7;
  color: #a98236;
}

.about-page .value-card h3 {
  color: var(--industrial-navy);
  font-size: 17px;
}

.about-page .value-card p {
  font-size: 14px;
  line-height: 2;
}

.about-page .timeline {
  padding-right: 32px;
}

.about-page .timeline::before {
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--industrial-yellow), #dfE5e9 85%);
}

.about-page .timeline-item {
  margin-bottom: 18px;
  padding: 22px 24px;
  border-color: var(--industrial-line);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(16, 42, 67, 0.05);
}

.about-page .timeline-item::before {
  border-color: var(--industrial-bg);
  background: var(--industrial-yellow);
}

.about-page .timeline-item small {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff7df;
  color: #8c672f;
  font-size: 13px;
  font-weight: 800;
}

.about-page .timeline-item h3 {
  color: var(--industrial-navy);
  font-size: 17px;
}

.about-page .timeline-item p {
  font-size: 14px;
}

.about-page .page-cta {
  padding-top: 10px;
}

.about-page .cta-box {
  border: 1px solid rgba(246, 197, 21, 0.25);
  background: linear-gradient(120deg, #102a43, #173b61);
}

.about-page .cta-box a {
  min-height: 48px;
  border: 1px solid var(--industrial-yellow);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
}

@media (max-width: 767px) {
  .about-page .story-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .about-page .story-visual {
    padding: 0 0 15px 15px;
  }

  .about-page .story-visual::before {
    inset: 15px 15px 0 0;
    border-radius: 18px;
  }

  .about-page .story-visual img {
    height: min(78vw, 390px);
    border-radius: 17px;
  }

  .about-page .story-seal {
    min-width: 142px;
    min-height: 66px;
    padding: 9px 14px;
    border-radius: 13px;
    font-size: 12px;
  }

  .about-page .value-card {
    min-height: 0;
  }

  .about-page .timeline {
    padding-right: 25px;
  }

  .about-page .timeline-item {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .story-copy .article-link {
    transition: none;
  }
}

.about-page {
  --about-ink: #122f49;
  --about-accent: #a9791d;
  --about-accent-bright: #f3c64b;
  --about-canvas: #f4f6f7;
  --about-surface: #fff;
  --about-line: #dce4e8;
  --about-muted: #5e7180;
  background: var(--about-canvas);
}

.about-page > .page-section > .container,
.about-page > .page-cta > .container {
  width: min(calc(100% - 48px), 1360px);
  max-width: 1360px;
}

.about-page .page-section {
  padding-block: clamp(56px, 7vw, 88px);
}

.about-page .about-intro-section {
  background: linear-gradient(135deg, #fbf8ef 0%, #f4f6f7 72%);
}

.about-page .story-grid {
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
}

.about-page .story-visual::before {
  border-color: rgba(169, 121, 29, 0.34);
  background: linear-gradient(145deg, #f1e5c8, #e9eff1);
}

.about-page .story-visual img {
  box-shadow: 0 24px 54px rgba(18, 47, 73, 0.16);
}

.about-page .story-seal {
  border-color: rgba(243, 198, 75, 0.58);
  background: linear-gradient(145deg, #122f49, #204b68);
  box-shadow: 0 14px 30px rgba(18, 47, 73, 0.22);
}

.about-page .story-copy {
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgba(220, 228, 232, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 40px rgba(18, 47, 73, 0.07);
}

.about-page .story-copy h2,
.about-page .section-title h2 {
  color: var(--about-ink);
  letter-spacing: -0.025em;
}

.about-page .story-copy .article-link {
  border-color: #e7d7b2;
  background: #fff9e9;
  color: var(--about-ink);
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.about-page .story-copy .article-link:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: var(--about-accent);
  background: #fff1c8;
}

.about-page .about-values-section {
  border-block: 1px solid #e9e2d3;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(243, 198, 75, 0.13), transparent 34%),
    linear-gradient(145deg, #fbf8ef, #f2f5f6);
}

.about-page .about-values-section .section-title h2 {
  color: var(--about-ink);
}

.about-page .value-card {
  min-height: 230px;
  border-color: #e4e8e9;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(18, 47, 73, 0.06);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.about-page .value-card:hover {
  transform: translateY(-4px);
  border-color: #e3c878;
  box-shadow: 0 18px 38px rgba(18, 47, 73, 0.1);
}

.about-page .value-icon {
  border-color: #ecdcae;
  background: #fff8e6;
  color: var(--about-accent);
}

.about-page .value-card h3,
.about-page .timeline-item h3 {
  color: var(--about-ink);
}

.about-page .about-journey-section {
  background: linear-gradient(180deg, #f4f6f7, #fbfaf6);
}

.about-page .timeline::before {
  background: linear-gradient(var(--about-accent-bright), #d9e1e5 88%);
}

.about-page .timeline-item {
  border-color: var(--about-line);
  background: #fff;
  box-shadow: 0 12px 30px rgba(18, 47, 73, 0.065);
}

.about-page .timeline-item::before {
  background: var(--about-accent-bright);
  box-shadow: 0 0 0 1px #d5b454;
}

.about-page .timeline-item small {
  border: 1px solid #eadcb9;
  background: #fff9e9;
  color: #805d1d;
}

body.inner-page .about-page .page-cta {
  padding: clamp(36px, 5vw, 64px) 0;
  border-top: 1px solid #e0e7e9;
}

.about-page .cta-box {
  border: 1px solid rgba(243, 198, 75, 0.42);
  border-radius: 24px;
  background: linear-gradient(120deg, #122f49, #204b68);
  box-shadow: 0 20px 48px rgba(18, 47, 73, 0.17);
}

.about-page .cta-box a {
  border-color: #f3c64b;
  background: #f3c64b;
  color: #122f49;
  transition: transform 180ms ease, background-color 180ms ease;
}

.about-page .cta-box a:hover {
  transform: translateY(-2px);
  background: #ffda68;
}

@media (max-width: 767px) {
  .about-page > .page-section > .container,
  .about-page > .page-cta > .container {
    width: calc(100% - 24px);
  }

  .about-page .story-copy {
    padding: 22px 18px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .story-copy .article-link,
  .about-page .value-card,
  .about-page .cta-box a {
    transition: none;
  }

  .about-page .story-copy .article-link:is(:hover, :focus-visible),
  .about-page .value-card:hover,
  .about-page .cta-box a:hover {
    transform: none;
  }
}

.about-hero {
  --about-ink: #102a43;
  --about-accent: #f2bd3f;
  --about-muted: #c7d3dc;
}

.about-hero::before {
  background:
    linear-gradient(90deg, rgba(8, 28, 45, 0.18), rgba(8, 28, 45, 0.96) 72%),
    linear-gradient(0deg, rgba(9, 31, 49, 0.48), transparent 72%);
}

.about-hero .page-kicker,
.about-hero h1 em {
  color: var(--about-accent) !important;
}

.about-hero .page-kicker {
  border-color: rgba(242, 189, 63, 0.34);
  background: rgba(12, 43, 65, 0.62);
}

.about-hero .hero-trail > span {
  border-color: rgba(242, 189, 63, 0.32);
  background: rgba(12, 43, 65, 0.72);
  color: #f4f7f9;
}

.about-page {
  --about-ink: #102a43;
  --about-accent: #c3912e;
  --about-accent-bright: #f2bd3f;
  --about-canvas: #f1f5f6;
  --about-line: #d8e2e7;
  --about-muted: #64798a;
  color: var(--about-ink);
}

.about-page .about-intro-section {
  background: linear-gradient(135deg, #fbfaf6, #f1f5f6);
}

.about-page .story-visual::before {
  border-color: rgba(195, 145, 46, 0.48);
  background: #e6edf0;
}

.about-page .story-visual img {
  border-color: #d4dfe4;
  box-shadow: 0 22px 50px rgba(16, 42, 67, 0.18);
}

.about-page .story-seal {
  border-color: rgba(242, 189, 63, 0.62);
  background: linear-gradient(135deg, #102a43, #1d4564);
}

.about-page .story-seal strong {
  color: #ffd45a;
}

.about-page .about-eyebrow {
  border-color: #ead6a8;
  background: #fff8e7;
  color: #76571f;
}

.about-page .about-eyebrow::before {
  background: var(--about-accent);
  box-shadow: 0 0 0 3px rgba(195, 145, 46, 0.14);
}

.about-page .story-copy h2,
.about-page .section-title h2,
.about-page .timeline-item h3 {
  color: var(--about-ink);
}

.about-page .about-intro-section .story-copy p,
.about-page .about-journey-section .timeline-item p {
  color: #586d7b !important;
}

.about-page .story-copy .article-link {
  border-color: #e6d3a9;
}

.about-page .story-copy .article-link:is(:hover, :focus-visible) {
  background: #f9edcf;
}

.about-page .about-values-section {
  border-block: 1px solid #25445b;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(242, 189, 63, 0.1), transparent 35%),
    linear-gradient(135deg, #102a43, #183b56);
}

body.inner-page .about-page .about-values-section > .container {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-page .about-values-section .section-title h2 {
  color: #fff;
}

.about-page .value-card {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 14px 32px rgba(4, 17, 30, 0.16);
}

.about-page .value-icon {
  border-color: rgba(242, 189, 63, 0.48);
  background: rgba(242, 189, 63, 0.13);
  color: #ffd45a;
}

.about-page .value-card h3 {
  color: #fff;
}

.about-page .about-journey-section {
  background: linear-gradient(180deg, #f1f5f6, #f8f9f8);
}

body.inner-page .about-page .page-cta {
  padding: clamp(32px, 5vw, 64px) 0;
  border-top: 1px solid #e0e6e8;
}

.about-page .timeline::before {
  background: linear-gradient(var(--about-accent), #cbd7dd 90%);
}

.about-page .timeline-item {
  background: var(--about-surface);
  box-shadow: 0 10px 26px rgba(16, 42, 67, 0.07);
}

.about-page .timeline-item::before {
  box-shadow: 0 0 0 1px #c3912e;
}

.about-page .timeline-item small {
  border: 1px solid #ecdbb7;
  background: #fff8e8;
  color: #76571f;
}

.about-page .cta-box {
  border-color: rgba(242, 189, 63, 0.4);
  background: linear-gradient(120deg, #102a43, #1b4563);
  box-shadow: 0 20px 48px rgba(16, 42, 67, 0.2);
}

.about-page .cta-box p {
  color: #d5e0e7;
}

.about-page .cta-box a {
  border-color: #ffd45a;
  background: #f2bd3f;
  color: #102a43;
}

.about-hero {
  --about-accent: #f3c64b;
}

.about-hero::before {
  background:
    linear-gradient(90deg, rgba(7, 23, 39, 0.16), rgba(9, 32, 51, 0.94) 72%),
    linear-gradient(0deg, rgba(9, 31, 49, 0.42), transparent 72%);
}

.about-page .story-copy p,
.about-page .value-card p,
.about-page .timeline-item p {
  color: var(--about-muted) !important;
}

.about-page .about-values-section {
  border-block-color: #e9e2d3;
}

.about-page .about-values-section .section-title > span,
.about-page .about-journey-section .section-title > span {
  color: var(--about-accent) !important;
}

.about-page .value-card {
  background: rgba(255, 255, 255, 0.94);
}

.about-page .value-card h3 {
  color: var(--about-ink);
}

body.inner-page .about-page .page-cta {
  border-top-color: #e0e7e9;
  background: #fbfaf6 !important;
}

.about-page .cta-box {
  border-color: rgba(243, 198, 75, 0.42);
}

.about-page .cta-box a:is(:hover, :focus-visible) {
  border-color: #ffe08a !important;
  background: #ffe08a !important;
  color: #122f49 !important;
  box-shadow: 0 10px 24px rgba(4, 20, 34, 0.28);
}

.about-page :is(.about-values-section, .about-journey-section) .section-title > .about-section-kicker {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px 12px;
  border: 1px solid #ead9ae;
  border-radius: 999px;
  background: #fff8e7;
  color: #805d1d !important;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.5;
}

.about-page :is(.about-values-section, .about-journey-section) .section-title > .about-section-kicker::before {
  width: 14px;
  height: 1px;
  background: currentColor;
  content: "";
}