/* =========================================================
   ABOUT US PAGE — page-specific styles
   Loaded via pages.css_files (comma separated) for slug
   "about-us". All typography below intentionally mirrors the
   exact tokens already used in style.css for the equivalent
   home.php sections, so About Us reads as 100% the same
   design system as the homepage:

     eyebrow        -> matches .about-eyebrow / .safety-eyebrow
                        (700 / 13px / 1.5px letter-spacing)
     section h2     -> matches .about-heading / .safety-heading
                        (800 / 34px / line-height 1.28 / -.3px)
     body paragraph -> matches .about-desc / .safety-desc
                        (400 / 14px / line-height 1.75)
     checklist text -> matches .check-item span / .safety-check-item span
                        (600 / 13px)
     small captions -> matches .feature-text h3/p
                        (h3: 800/11px uppercase, p: 400/10px)
     stat numbers   -> matches .why-stat-number / .why-stat-label
                        (number: 800/26px, label: 500/11px uppercase)

   No values are redefined here — colors/spacing all reuse the
   :root custom properties already declared in style.css.
   ========================================================= */

/* ---------------------------------------------------------
   1) PAGE BANNER (hero-section--inner + breadcrumb)
   --------------------------------------------------------- */
.page-banner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 58vh;
}

/* the banner PNG's own aspect ratio (~3.2:1) is taller than the old
   46vh box (~3.86:1 on most desktop screens), so background-size:cover
   was cropping the top/bottom of the crane hard. Raising min-height
   closes most of that gap; pinning size/position here too so this
   section never silently inherits a different crop from the
   site-wide .hero-background rule. */
.page-banner .hero-background {
  background-size: cover;
  background-position: center center;
}

/* force left alignment regardless of any centered defaults the
   base .hero-container / .hero-section rules apply elsewhere on
   the site — this page's banner must always sit left */
.page-banner .hero-container {
  display: block;
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

.page-banner-inner {
  /* was 40px — the features-card below this section pulls itself
     up by 60px (margin-top:-60px in style.css), which on this
     short 58vh banner was covering the breadcrumb. Bumping this
     to 100px keeps the breadcrumb clear of that overlap zone. */
  padding-bottom: 100px;
  max-width: 680px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.page-banner-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.page-banner-eyebrow-icon {
  width: 22px;
  height: 22px;
  color: var(--green);
  flex-shrink: 0;
}

.page-banner-eyebrow-line {
  width: 64px;
  height: 2px;
  background: var(--green);
}

.page-banner-title {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -1.4px;
  color: var(--white);
  margin: 0 0 12px;
}

.page-banner-title .highlight {
  color: var(--green);
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.breadcrumb-nav a {
  color: var(--white);
  transition: color .2s ease;
}

.breadcrumb-nav a:hover {
  color: var(--green);
}

.breadcrumb-sep {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.breadcrumb-current {
  color: var(--green);
}

/* ---------------------------------------------------------
   2) OUR STORY SECTION — same grid/stretch pattern as
      .about-section in style.css (no fixed heights needed;
      `align-items: stretch` on the grid makes the image match
      the content column's height automatically).
   --------------------------------------------------------- */
.story-section {
  background: var(--white);
  /* top padding removed — it was stacking on .features-section's own
     padding-bottom (54px), producing a ~138px blank gap under the
     features-card. Bottom padding kept: .stats-bar-section right
     after this has 0 top padding of its own, so removing this too
     would make story content butt straight into the stats bar. */
  padding: 84px 0 84px;
}

.story-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}

.story-media {
  display: flex;
  align-items: stretch;
}

.story-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}

.story-content {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green-accent);
}

.story-heading {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1.28;
  letter-spacing: -.3px;
  color: var(--black);
  margin: 14px 0 18px;
}

.story-heading .highlight {
  color: var(--green);
}

.story-desc {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--paragraph-gray);
  margin: 0 0 16px;
}

.story-desc:last-of-type {
  margin-bottom: 0;
}

.story-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 26px;
}

.story-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.story-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(123, 196, 0, 0.1);
  color: var(--green);
  flex-shrink: 0;
}

.story-feature-icon svg {
  width: 22px;
  height: 22px;
}

/* matches .feature-text h3 exactly (800 / 11px / uppercase) */
.story-feature span {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--black);
}

/* ---------------------------------------------------------
   3) STATS BAR — numbers/labels match .why-stat-number /
      .why-stat-label exactly.
   --------------------------------------------------------- */
.stats-bar-section {
  padding: 0 0 84px;
  background: var(--white);
}

/* padded outer wrapper — keeps a consistent 40px gutter at every
   viewport width, same as .story-container / .values-container.
   (previously the banner itself carried max-width+margin:auto with
   no padding, so below 1400px it ran edge-to-edge with no gutter) */
.stats-bar-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.stats-bar {
  width: 100%;
  background: linear-gradient(135deg, #0a2544 0%, var(--hero-navy) 55%, #010e1c 100%);
  border-radius: 16px;
  padding: 30px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 14px 34px rgba(3, 20, 38, 0.22);
}

.stats-item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 0;
  min-width: 0;
}

.stats-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stats-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.8;
}

.stats-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.stats-number {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.3px;
  line-height: 1.15;
  color: var(--green);
}

.stats-label {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
}

.stats-divider {
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
  margin: 0 30px;
}

/* ---------------------------------------------------------
   4) OUR VALUES SECTION — heading matches .gallery-heading
      (centered section), eyebrow/desc match the standard
      about/safety tokens.
   --------------------------------------------------------- */
.values-section {
  background: #F4F6F8;
  padding: 84px 0;
}

.values-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.values-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green-accent);
}

.values-heading {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -.3px;
  color: var(--black);
  margin: 12px 0 14px;
}

.values-heading .highlight {
  color: var(--green);
}

.values-subtext {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--paragraph-gray);
  max-width: 640px;
  margin: 0 auto 46px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}

.value-card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 32px 20px;
  box-shadow: 0 2px 10px rgba(2, 15, 30, 0.04);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.value-card:hover {
  border-color: var(--green);
  box-shadow: var(--card-shadow);
  transform: translateY(-3px);
}

.value-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(123, 196, 0, 0.1);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.value-icon svg {
  width: 26px;
  height: 26px;
}

/* matches .feature-text h3 exactly (800 / 11px / uppercase) */
.value-card h3 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--black);
  margin: 0 0 10px;
}

/* matches .check-item span / .safety-check-item span (13px/600)
   scaled down slightly since card copy runs 2 lines here —
   kept close to .why-text p (11px) for consistency at this size */
.value-card p {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--paragraph-gray);
  margin: 0;
}

/* ---------------------------------------------------------
   4B) HOW IT WORKS — dark navy band, connected flow-line.
   Deliberately styled opposite to Our Values (light cards):
   dark full-bleed section, no card borders, big numbered
   circles sitting on a connecting rail, open layout.
   --------------------------------------------------------- */
.process-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0a2544 0%, var(--hero-navy) 55%, #010e1c 100%);
  padding: 90px 0;
}

/* soft ambient glow, purely decorative */
.process-glow {
  position: absolute;
  top: -120px;
  right: -100px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 196, 0, 0.14) 0%, rgba(123, 196, 0, 0) 70%);
  pointer-events: none;
}

.process-container {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.process-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
}

.process-heading {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -.3px;
  color: var(--white);
  margin: 12px 0 14px;
}

.process-heading .highlight {
  color: var(--green);
}

.process-subtext {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
  max-width: 640px;
  margin: 0 auto 60px;
}

/* premium glass cards: no connecting rail — each step is its
   own elevated card with a corner number badge and a glowing
   icon circle that fills solid green on hover */
.process-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.process-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 46px 26px 32px;
  transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.process-node:hover {
  transform: translateY(-6px);
  border-color: rgba(123, 196, 0, 0.5);
  background: linear-gradient(160deg, rgba(123, 196, 0, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

/* number badge cut into the top-left corner of the card —
   border matches the section background so it reads as inset */
.process-node-num {
  position: absolute;
  top: -17px;
  left: 26px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  color: var(--white);
  background: linear-gradient(135deg, #8ec116, #5c8f00);
  border: 3px solid var(--hero-navy);
  box-shadow: 0 6px 14px rgba(123, 196, 0, 0.4);
}

.process-node-icon-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 22px;
  background: rgba(123, 196, 0, 0.12);
  border: 1px solid rgba(123, 196, 0, 0.35);
  color: var(--green);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.process-node-icon-circle svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke-width: 1.7;
}

.process-node:hover .process-node-icon-circle {
  background: linear-gradient(135deg, #8ec116, #5c8f00);
  border-color: transparent;
  color: var(--white);
  transform: scale(1.08);
  box-shadow: 0 8px 18px rgba(123, 196, 0, 0.35);
}

.process-node-body {
  max-width: 240px;
}

.process-node-body h3 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .1px;
  color: var(--white);
  line-height: 1.35;
  margin: 0 0 10px;
}

.process-node-body p {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* ---------------------------------------------------------
   5) COMMITMENT SECTION — same grid/stretch pattern as
      Our Story / .about-section.
   --------------------------------------------------------- */
.commitment-section {
  background: var(--white);
  padding: 84px 0;
}

.commitment-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}

.commitment-content {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.commitment-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green-accent);
}

.commitment-heading {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1.28;
  letter-spacing: -.3px;
  color: var(--black);
  margin: 14px 0 18px;
}

.commitment-heading .highlight {
  color: var(--green);
}

.commitment-desc {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--paragraph-gray);
  margin: 0 0 26px;
}

.commitment-checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.commitment-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.commitment-check-item .check-icon {
  width: 18px;
  height: 18px;
  color: var(--green);
  flex-shrink: 0;
}

/* matches .check-item span / .safety-check-item span exactly */
.commitment-check-item span {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-dark);
}

.commitment-media {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.commitment-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commitment-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 28, 53, 0.85) 0%, rgba(3, 28, 53, 0.55) 45%, rgba(3, 28, 53, 0.15) 100%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 34px;
}

.commitment-overlay-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.commitment-overlay-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.8;
}

.commitment-overlay-text {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -.2px;
  text-transform: uppercase;
  color: var(--white);
}

.commitment-overlay-text .highlight {
  color: var(--green);
}

/* ---------------------------------------------------------
   5B) OUR JOURNEY — milestones timeline
   --------------------------------------------------------- */
.journey-section {
  background: #F4F6F8;
  padding: 84px 0;
}

.journey-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.journey-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green-accent);
}

.journey-heading {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -.3px;
  color: var(--black);
  margin: 12px 0 14px;
}

.journey-heading .highlight {
  color: var(--green);
}

.journey-subtext {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--paragraph-gray);
  max-width: 640px;
  margin: 0 auto 54px;
}

/* Horizontal 4-up timeline on desktop: a single connecting rail
   runs through all dots, cards sit below each dot. */
.journey-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  text-align: left;
  position: relative;
}

.journey-timeline::before {
  content: '';
  position: absolute;
  top: 7px;
  left: calc(12.5% - 1px);
  right: calc(12.5% - 1px);
  height: 2px;
  background: var(--divider);
}

.journey-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.journey-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid #F4F6F8;
  box-shadow: 0 0 0 2px var(--green);
  margin-bottom: 22px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.journey-card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 24px 22px;
  box-shadow: 0 2px 10px rgba(2, 15, 30, 0.04);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  width: 100%;
}

.journey-card:hover {
  border-color: var(--green);
  box-shadow: var(--card-shadow);
  transform: translateY(-4px);
}

.journey-year {
  display: inline-block;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--hero-navy);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

/* matches .feature-text h3 pattern (800 / uppercase) at 14px
   to read comfortably as a card title rather than a caption */
.journey-card h3 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .1px;
  color: var(--black);
  line-height: 1.35;
  margin: 0 0 10px;
}

.journey-card p {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--paragraph-gray);
  margin: 0;
}

/* ---------------------------------------------------------
   6) CTA BANNER — heading/desc sized to match .why-text /
      .about-cta-text conventions already in use.
   --------------------------------------------------------- */
.about-cta-section {
  padding: 0 0 60px;
  background: var(--white);
}

/* same padded-wrapper fix as .stats-bar-wrap */
.about-cta-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.about-cta-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #0a2544 0%, var(--hero-navy) 55%, #010e1c 100%);
  border-radius: 16px;
  padding: 34px 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  box-shadow: 0 14px 34px rgba(3, 20, 38, 0.22);
}

/* subtle premium accent — soft green glow bleeding in from the
   right edge, sitting behind the buttons */
.about-cta-banner::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(123, 196, 0, 0.16) 0%, rgba(123, 196, 0, 0) 70%);
  transform: translateY(-50%);
  pointer-events: none;
}

.about-cta-left {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.about-cta-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8ec116, #5c8f00);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(123, 196, 0, 0.35);
}

.about-cta-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--white);
}

.about-cta-text h3 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.35;
  color: var(--white);
  margin: 0 0 6px;
}

.about-cta-text p {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.about-cta-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   7) BOTTOM ICON STRIP — matches .feature-text h3/p exactly
      (this is the same trust-strip content used in
      .features-section on home.php).
   --------------------------------------------------------- */
.bottom-strip-section {
  background: var(--white);
  padding: 0 0 84px;
}

.bottom-strip-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 26px 40px;
  border-top: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bottom-strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
}

.bottom-strip-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bottom-strip-icon img {
  width: 20px;
  height: 20px;
}

/* icon-green / icon-blue / icon-yellow already exist in style.css —
   icon-navy is added here since the weighbridge icon needs it and
   no other page defines it yet. */
.icon-navy { background: var(--hero-navy); }

.bottom-strip-item h4 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.3;
  margin: 0 0 5px;
}

.bottom-strip-item p {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--paragraph-gray);
  margin: 0;
}

/* =========================================================
   RESPONSIVE — tablet / mobile
   (fixed heights only appear here, once the grid collapses
   to a single column and `align-items: stretch` no longer
   has a content column to match against.)
   ========================================================= */
@media (max-width: 991px) {
  .page-banner-title { font-size: 42px; }

  .story-container,
  .commitment-container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .story-content,
  .commitment-content { max-width: none; }

  .story-media,
  .commitment-media {
    order: -1;
    height: 340px;
  }

  .story-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .stats-bar-wrap { padding: 0 30px; }

  .stats-bar {
    flex-wrap: wrap;
    gap: 22px 0;
    padding: 26px 30px;
  }

  .stats-item { flex: 1 1 45%; }
  .stats-divider { display: none; }

  .values-container { padding-left: 30px; padding-right: 30px; }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-container { padding-left: 30px; padding-right: 30px; }

  .process-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 22px;
  }

  .process-node-body { max-width: none; }

  .journey-container { padding-left: 30px; padding-right: 30px; }

  .journey-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 20px;
    row-gap: 34px;
  }

  .journey-timeline::before { display: none; }

  .about-cta-wrap { padding: 0 30px; }
  .about-cta-banner { justify-content: center; text-align: center; }
  .about-cta-left { flex-direction: column; text-align: center; }

  .bottom-strip-inner {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 30px;
    padding-right: 30px;
  }
  .bottom-strip-item { flex: 1 1 45%; }
}

@media (max-width: 640px) {
  .page-banner-title { font-size: 32px; }

  .story-container,
  .values-container,
  .commitment-container,
  .process-container,
  .journey-container { padding-left: 18px; padding-right: 18px; }

  .story-media,
  .commitment-media { height: 260px; }

  .story-heading,
  .values-heading,
  .commitment-heading,
  .process-heading,
  .journey-heading { font-size: 26px; }

  .story-features { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr; }

  .process-flow { grid-template-columns: 1fr; gap: 26px; }
  .process-node { padding: 42px 22px 28px; }
  .process-node-icon-circle { width: 60px; height: 60px; }
  .process-node-icon-circle svg { width: 24px; height: 24px; }
  .journey-timeline { grid-template-columns: 1fr; gap: 18px; }

  .stats-bar-wrap { padding: 0 18px; }
  .stats-bar { padding: 22px; }
  .stats-item { flex: 1 1 100%; }

  .commitment-media-overlay { padding: 0 22px; }

  .about-cta-wrap { padding: 0 18px; }
  .about-cta-banner { padding: 26px 22px; }
  .about-cta-buttons { width: 100%; flex-direction: column; }
  .about-cta-buttons .btn { width: 100%; }

  .bottom-strip-inner { padding-left: 18px; padding-right: 18px; }
  .bottom-strip-item { flex: 1 1 100%; }
}

/* Mobile-only commitment elements are invisible above 767px,
   preserving desktop rendering exactly. */
.commitment-mobile-only,
.commitment-mobile-media,
.commitment-mobile-grid,
.journey-mobile-icon,
.commitment-eyebrow-row { display: none; }

/* =========================================================
   ABOUT US — MOBILE (single source of truth)
   Calibrated against the supplied 838–864px @2x design
   references (≈419–432 CSS px). This replaces three earlier,
   overlapping 767px blocks that had started drifting apart
   from each other (duplicate selectors with slightly
   different values) — that drift was the main cause of the
   alignment mismatches. Everything mobile now lives here,
   once, so future edits can't silently get overridden by a
   later duplicate block again. Desktop rules above (and the
   991px/640px tablet rules) are untouched.
   ========================================================= */
@media (max-width: 767px) {

  /* ---------- GLOBAL MOBILE PAGE ---------- */
  /* Previously `.page-banner { display:none !important; }` —
     that hid the whole page title/breadcrumb banner on every
     phone. Restored: it now shows at a mobile-appropriate
     height instead of the desktop 46vh, and the title size is
     already handled by the 991px/640px rules above (56 → 42 → 32px). */
  .page-banner {
    display: flex;
    min-height: 0;
    padding-top: 96px;
  }

  /* global .hero-overlay on mobile only fades top-to-bottom, with
     no horizontal darkening — on desktop the left side is shadowed
     so text sits on a dark backing. Add that same left-side shadow
     here for this page's banner. */
  .page-banner .hero-overlay {
    background:
      linear-gradient(180deg, rgba(2, 15, 30, 0.65) 0%, rgba(2, 15, 30, 0.4) 32%, rgba(2, 15, 30, 0.12) 55%, rgba(2, 15, 30, 0) 70%),
      linear-gradient(90deg, rgba(2, 15, 30, 0.75) 0%, rgba(2, 15, 30, 0.45) 40%, rgba(2, 15, 30, 0) 75%);
  }

  .page-banner-inner {
    padding-bottom: 26px;
    max-width: none;
  }

  .story-section,
  .stats-bar-section,
  .values-section,
  .process-section,
  .commitment-section,
  .journey-section,
  .about-cta-section { width: 100%; }

  .story-container,
  .values-container,
  .process-container,
  .journey-container { box-sizing: border-box; }

  /* ---------- OUR STORY ---------- */
  .story-section {
    padding: 0 0 28px;
    background: #fff;
  }

  .story-container {
    width: 100%;
    max-width: none;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 23px;
  }

  .story-media {
    order: 0;
    width: 100%;
    height: auto;
    display: block;
  }

  .story-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.485 / 1;
    object-fit: cover;
    object-position: center center;
    border-radius: 8px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .10);
  }

  .story-content {
    order: 1;
    width: 100%;
    max-width: none;
    display: block;
  }

  .story-eyebrow,
  .values-eyebrow,
  .process-eyebrow,
  .commitment-eyebrow,
  .journey-eyebrow {
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 1.5px;
    font-weight: 700;
  }

  /* Robust flex-based separator instead of a hard-coded pixel
     offset — a hard-coded `left: 141px` only lines up while the
     text renders at exactly one width; any font-load timing or
     kerning difference pushed the dash out of place. This
     version measures itself regardless of text width. */
  .story-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .story-eyebrow::after {
    content: '';
    display: block;
    width: 34px;
    height: 1px;
    background: #8b8f93;
  }

  .story-heading {
    font-size: 25px;
    line-height: 1.12;
    letter-spacing: -.55px;
    margin: 12px 0 20px;
    max-width: 390px;
  }

  .story-desc {
    font-size: 13.5px;
    line-height: 1.72;
    margin: 0 0 17px;
  }

  .story-desc:last-of-type { margin-bottom: 0; }

  .story-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 28px;
    width: 100%;
  }

  .story-feature {
    min-width: 0;
    align-items: center;
    text-align: center;
    gap: 9px;
    padding: 0 7px;
    position: relative;
  }

  .story-feature:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 66px;
    background: #d4d4d4;
  }

  .story-feature-icon {
    width: 38px;
    height: 38px;
    background: rgba(123, 196, 0, .10);
  }

  .story-feature-icon svg {
    width: 20px;
    height: 20px;
  }

  .story-feature span {
    font-size: 9.4px;
    line-height: 1.38;
    letter-spacing: 0;
    text-align: center;
    /* long single words (e.g. "ENVIRONMENTALLY") weren't wrapping
       inside the narrow 4-col cells and were spilling into the
       next column — this forces them to break instead of overflow */
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* ---------- STATS ---------- */
  .stats-bar-section {
    padding: 0 0 39px;
  }

  .stats-bar-wrap {
    width: 100%;
    max-width: none;
    padding: 0 20px;
  }

  .stats-bar {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
    padding: 18px 18px;
    border-radius: 12px;
    min-height: 145px;
    background: linear-gradient(135deg, #062544 0%, #031c35 56%, #01243d 100%);
    box-shadow: 0 8px 22px rgba(3, 20, 38, .18);
  }

  .stats-bar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 17px;
    bottom: 17px;
    width: 1px;
    background: rgba(255, 255, 255, .16);
    transform: translateX(-50%);
  }

  .stats-bar::after {
    content: '';
    position: absolute;
    left: 17px;
    right: 17px;
    top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, .16);
    transform: translateY(-50%);
  }

  .stats-divider { display: none !important; }

  .stats-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    z-index: 1;
  }

  .stats-icon {
    width: 35px;
    height: 35px;
  }

  .stats-icon svg {
    width: 19px;
    height: 19px;
  }

  .stats-number {
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -.4px;
  }

  .stats-label {
    font-size: 8.6px;
    line-height: 1.28;
    margin-top: 3px;
    letter-spacing: .15px;
  }

  /* ---------- OUR VALUES ---------- */
  .values-section {
    background: #f6f7f9;
    padding: 34px 0 30px;
  }

  .values-container {
    width: 100%;
    max-width: none;
    padding: 0 28px;
  }

  .values-eyebrow,
  .process-eyebrow,
  .journey-eyebrow {
    position: relative;
    padding: 0 38px;
  }

  .values-eyebrow::before,
  .values-eyebrow::after,
  .process-eyebrow::before,
  .process-eyebrow::after,
  .journey-eyebrow::before,
  .journey-eyebrow::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 26px;
    height: 1px;
    background: var(--green);
  }

  .values-eyebrow::before,
  .process-eyebrow::before,
  .journey-eyebrow::before { left: 0; }
  .values-eyebrow::after,
  .process-eyebrow::after,
  .journey-eyebrow::after { right: 0; }

  .values-heading {
    font-size: 27px;
    line-height: 1.18;
    letter-spacing: -.7px;
    margin: 14px 0 20px;
  }

  .values-subtext {
    max-width: 350px;
    font-size: 13.5px;
    line-height: 1.78;
    margin: 0 auto 29px;
  }

  .values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .value-card {
    position: relative;
    min-height: 116px;
    width: 100%;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) 22px;
    align-items: center;
    text-align: left;
    padding: 16px 20px 16px 16px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(2, 15, 30, .05);
  }

  .value-card::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 68px;
    height: 54px;
    background: linear-gradient(135deg, #72b700 0%, #58a100 100%);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
  }

  .value-card::after {
    content: '';
    position: absolute;
    right: 22px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%) rotate(-45deg);
    border-right: 3px solid var(--green);
    border-bottom: 3px solid var(--green);
  }

  .value-icon {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    margin: 0;
    border: 3px solid #fff;
    box-shadow: 0 0 0 5px rgba(123, 196, 0, .08);
    background: #f4fae9;
  }

  .value-icon svg { width: 29px; height: 29px; }

  .value-card h3,
  .value-card p { grid-column: 2; }

  .value-card h3 {
    grid-row: 1;
    align-self: center;
    font-size: 17px;
    line-height: 1.12;
    letter-spacing: -.2px;
    margin: 0 0 7px;
  }

  .value-card p {
    grid-row: 2;
    align-self: start;
    font-size: 12.5px;
    line-height: 1.48;
    margin: 0;
    padding-right: 8px;
  }

  /* ---------- HOW IT WORKS ---------- */
  .process-section {
    padding: 35px 0 30px;
    background: linear-gradient(160deg, #031b30 0%, #031c35 58%, #011322 100%);
  }

  .process-container {
    width: 100%;
    max-width: none;
    padding: 0 18px;
  }

  .process-heading {
    font-size: 31px;
    line-height: 1.12;
    letter-spacing: -.8px;
    margin: 14px 0 19px;
  }

  .process-subtext {
    max-width: 355px;
    font-size: 13.5px;
    line-height: 1.75;
    margin: 0 auto 30px;
  }

  .process-flow {
    display: flex;
    flex-direction: column;
    gap: 13px;
  }

  .process-node {
    position: relative;
    width: 100%;
    min-height: 138px;
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    align-items: center;
    text-align: left;
    padding: 18px 18px 18px 25px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: none;
  }

  .process-node::before {
    content: '';
    position: absolute;
    left: 123px;
    top: 24px;
    bottom: 24px;
    border-left: 1px dashed rgba(255, 255, 255, .25);
  }

  .process-node-num {
    top: 0;
    left: 0;
    width: 42px;
    height: 36px;
    border: 0;
    border-radius: 0 0 14px 0;
    background: linear-gradient(135deg, #8bc300, #63a600);
    box-shadow: none;
    font-size: 20px;
  }

  .process-node-icon-circle {
    grid-column: 1;
    grid-row: 1;
    width: 74px;
    height: 74px;
    margin: 0 auto;
    background: transparent;
    border: 1.5px solid rgba(123, 196, 0, .9);
    box-shadow: 0 0 20px rgba(123, 196, 0, .12);
    position: relative;
    left: -30px;
  }

  .process-node-icon-circle svg {
    width: 36px;
    height: 36px;
  }

  .process-node-body {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    padding-left: 15px;
  }

  .process-node-body h3 {
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 8px;
    letter-spacing: -.25px;
  }

  .process-node-body h3::after {
    content: '';
    display: block;
    width: 27px;
    height: 2px;
    margin-top: 10px;
    background: var(--green);
  }

  .process-node-body p {
    font-size: 12.8px;
    line-height: 1.62;
    color: rgba(255, 255, 255, .72);
  }

  /* ---------- COMMITMENT (mobile-only widget) ---------- */
  .commitment-section {
    background: #011c1d;
    padding: 0 0 28px;
    position: relative;
  }

  .commitment-container {
    width: 100%;
    max-width: none;
    padding: 0;
    display: block;
  }

  .commitment-mobile-only { display: block; padding: 33px 24px 0; }
  .commitment-content,
  .commitment-media { display: none !important; }

  /* eyebrow + small round leaf icon, matches the design reference */
  .commitment-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
  }

  .commitment-eyebrow-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .commitment-eyebrow-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
  }

  .commitment-mobile-only .commitment-eyebrow {
    color: #69b900;
    font-size: 11px;
  }

  .commitment-mobile-only .commitment-heading {
    color: #fff;
    font-size: 31px;
    line-height: 1.08;
    letter-spacing: -.7px;
    margin: 19px 0 22px;
  }

  .commitment-mobile-rule {
    display: block;
    width: 36px;
    height: 2px;
    background: var(--green);
    margin-bottom: 16px;
  }

  .commitment-mobile-only .commitment-desc {
    color: rgba(255, 255, 255, .84);
    font-size: 13.5px;
    line-height: 1.72;
    margin: 0 0 22px;
  }

  .commitment-mobile-media {
    position: relative;
    width: calc(100% + 18px);
    margin-left: -9px;
    margin-right: 0;
    height: 275px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .20);
  }

  .commitment-mobile-media .commitment-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .commitment-mobile-media .commitment-media-overlay {
    padding: 0 18px;
    gap: 13px;
    background: linear-gradient(90deg, rgba(0, 14, 27, .88), rgba(0, 14, 27, .56) 68%, rgba(0, 14, 27, .22));
    align-items: flex-end;
    padding-bottom: 23px;
  }

  .commitment-mobile-media .commitment-overlay-icon {
    width: 48px;
    height: 48px;
  }

  .commitment-mobile-media .commitment-overlay-icon svg { width: 25px; height: 25px; }

  .commitment-mobile-media .commitment-overlay-text {
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: -.15px;
  }

  .commitment-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 26px 0 0;
    width: 100%;
  }

  .commitment-mobile-card {
    position: relative;
    min-height: 123px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7ea;
    border-bottom: 4px solid #119e22;
    padding: 37px 12px 14px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
  }

  .commitment-mobile-card-icon {
    position: absolute;
    top: -23px;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #0aa32a;
    border: 4px solid #fff;
    box-shadow: 0 0 0 2px #0aa32a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .commitment-mobile-card-icon svg { width: 29px; height: 29px; }

  .commitment-mobile-card h3 {
    font-size: 15px;
    line-height: 1.12;
    font-weight: 800;
    color: #07152b;
    margin: 0 0 7px;
  }

  .commitment-card-rule {
    display: block;
    width: 25px;
    height: 2px;
    margin: 0 auto 7px;
    background: #0aa32a;
  }

  .commitment-mobile-card p {
    font-size: 10.5px;
    line-height: 1.42;
    color: #485363;
    margin: 0;
  }

  /* ---------- JOURNEY ---------- */
  .journey-section {
    background: #f7f8fa;
    padding: 34px 0 30px;
  }

  .journey-container {
    width: 100%;
    max-width: none;
    padding: 0 20px 0 28px;
  }

  .journey-heading {
    font-size: 27px;
    line-height: 1.18;
    letter-spacing: -.7px;
    margin: 14px auto 20px;
    max-width: 360px;
  }

  .journey-subtext {
    max-width: 350px;
    font-size: 13.5px;
    line-height: 1.75;
    margin: 0 auto 29px;
  }

  .journey-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    padding-left: 16px;
  }

  .journey-timeline::before {
    display: block;
    top: 18px;
    bottom: 18px;
    left: 0;
    right: auto;
    width: 2px;
    height: auto;
    background: #78b700;
  }

  .journey-item {
    display: block;
    width: 100%;
    text-align: left;
  }

  .journey-dot {
    position: absolute;
    left: -6px;
    top: 28px;
    width: 17px;
    height: 17px;
    margin: 0;
    background: #fff;
    border: 3px solid #78b700;
    box-shadow: 0 0 0 2px #78b700;
  }

  .journey-mobile-icon { display: flex; }

  .journey-card {
    position: relative;
    width: 100%;
    min-height: 130px;
    padding: 16px 18px 16px 95px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(2, 15, 30, .06);
  }

  .journey-year {
    font-size: 12px;
    padding: 5px 13px;
    margin-bottom: 11px;
    border-radius: 20px;
  }

  .journey-mobile-icon {
    position: absolute;
    left: 22px;
    top: 56px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f1f8e7;
    color: #70b600;
    align-items: center;
    justify-content: center;
  }

  .journey-mobile-icon svg { width: 29px; height: 29px; }

  .journey-card h3 {
    font-size: 14px;
    line-height: 1.3;
    margin: 0 0 8px;
  }

  .journey-card p {
    font-size: 12.5px;
    line-height: 1.55;
  }

  /* ---------- CTA ---------- */
  .about-cta-section { padding: 0 0 30px; }
  .about-cta-wrap { max-width: none; padding: 0 18px; }
  .about-cta-banner { padding: 26px 20px; border-radius: 14px; }
  .about-cta-left { flex-direction: column; text-align: center; }
  .about-cta-buttons { width: 100%; flex-direction: column; }
  .about-cta-buttons .btn { width: 100%; }
}