/* =========================================================
   About Us (new) — page-scoped styles
   Brand tokens: #C52031 primary, #A51B29 hover, #FEF2F2 pink-light,
                 #1F2937 secondary, #4B5563 body, #6B7280 muted,
                 #0B1C2B navy (strategic contrast, new)
   ========================================================= */

/* ---------- Responsive forced line-breaks ----------
   Hardcoded <br class="br-md"> are hidden on mobile so titles/subtitles wrap
   naturally, and restored from 768px up where the two-line balance is intended. */
br.br-md { display: none; }
@media (min-width: 768px) { br.br-md { display: inline; } }

/* ---------- Page-wide performance: skip offscreen rendering on heavy variant sections ---------- */
/* `content-visibility: auto` tells the browser not to paint/animate these blocks until
   they approach the viewport — massive CPU/GPU win with many stacked V-variant sections. */
.about_products_v4,
.about_brands_v3,
.about_testimonials,
.about_resources_v3 {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* ---------- Mobile safety: clip any horizontal overflow at the section level ---------- */
/* `overflow-x: clip` prevents stray decorative elements (full-bleed images, scaled watermarks,
   absolute-positioned glows) from creating a horizontal scrollbar without breaking sticky children. */
@media (max-width: 767px) {
  section[class*="about_"] { overflow-x: clip; }
  /* Tighten the legacy .wrapper horizontal padding to match `.my-main-container`'s 1.25rem on
     mobile — keeps spacing consistent with the modern pages that use my-main-container. */
  section[class*="about_"] > .wrapper {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Use `contain: paint layout` on always-animating blocks so their repaints
   don't invalidate siblings. Cheap win for marquees, floating cards, glows. */
.about_brand_v3_marquee {
  contain: paint layout;
}

/* ---------- Page-wide font enforcement ---------- */
/* The global body font is system sans-serif. To keep every heading, eyebrow,
   paragraph, button, link, list-item etc. on this page rendered in Poppins
   (and never mid-render swap to a fallback), apply font-family to all
   descendants of about-us sections. */
section[class*="about_"],
section[class*="about_"] * {
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Shared scroll-reveal utility ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.65s cubic-bezier(0.16, 0.84, 0.44, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }

/* Directional variants — override base translate with horizontal entrance */
.reveal--from-left  { transform: translate3d(-48px, 12px, 0); }
.reveal--from-right { transform: translate3d( 48px, 12px, 0); }
.reveal--from-left.is-visible,
.reveal--from-right.is-visible { transform: translate3d(0, 0, 0); }

/* Zoom-in entrance — scales up from 96% while fading in */
.reveal--zoom {
  transform: translateY(22px) scale(0.96);
  transition: opacity 0.75s ease, transform 0.85s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.reveal--zoom.is-visible { transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--from-left,
  .reveal--from-right,
  .reveal--zoom { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   1) Hero — upward conveyor floats + fixed shadows
   ========================================================= */
section.about_hero {
  position: relative;
  padding-top: 0;
  padding-bottom: 3.5rem;
  background-color: #ffffff;
}
@media (min-width: 768px) {
  section.about_hero { padding-top: 0; padding-bottom: 8.5rem; }
}
@media (min-width: 1024px) {
  section.about_hero { padding-top: 0; padding-bottom: 10rem; }
}

.about_hero > .wrapper {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
@media (min-width: 768px) { .about_hero > .wrapper { min-height: 520px; } }
@media (min-width: 1024px) { .about_hero > .wrapper { min-height: 600px; } }

.about_hero > .wrapper > .section_heading {
  position: relative;
  z-index: 2;
}

/* High-specificity typography overrides (beats style.css) */
.about_hero > .wrapper > .section_heading > span.titel_tag {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
  letter-spacing: 0.14em;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #c52031;
}

.about_hero > .wrapper > .section_heading > h1.titel_name {
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 500;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem;
}

.about_hero > .wrapper > .section_heading > h1.titel_name span {
  color: #c52031;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.about_hero > .wrapper > .section_heading > p.titel_dec {
  font-size: 1.0625rem;
  line-height: 1.625rem;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
  color: #6b7280;
}
@media (min-width: 768px) {
  .about_hero > .wrapper > .section_heading > p.titel_dec {
    font-size: 1.1875rem;
    line-height: 1.75rem;
  }
}

/* Staggered text entrance */
.about_hero .titel_tag,
.about_hero .titel_name,
.about_hero .titel_dec {
  opacity: 0;
  animation: about_fade_up 0.8s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
.about_hero .titel_tag { animation-delay: 0.15s; }
.about_hero .titel_name { animation-delay: 0.3s; }
.about_hero .titel_dec { animation-delay: 0.48s; }

@keyframes about_fade_up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .about_hero .titel_tag,
  .about_hero .titel_name,
  .about_hero .titel_dec { opacity: 1; animation: none; transform: none; }
}

/* =========================================================
   2) Bridge image — absolutely positioned between Section 1 and Section 2
       top: 100% + translateY(-50%) = vertical center on boundary (50/50 split)
   ========================================================= */
.about_bridge_outer {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 3rem);
  max-width: 1088px;
  z-index: 5;
  pointer-events: none;
}
@media (min-width: 768px)  { .about_bridge_outer { width: calc(100% - 8rem); } }
@media (min-width: 1280px) { .about_bridge_outer { width: calc(100% - 12rem); max-width: 1088px; } }

.about_bridge_image {
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(17, 24, 39, 0.25);
  pointer-events: auto;
  line-height: 0;
  transform-origin: center center;
  will-change: transform, border-radius;
  transition: transform 0.1s linear, border-radius 0.3s linear;
}
@media (min-width: 768px) { .about_bridge_image { border-radius: 1.75rem; } }

.about_bridge_image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Hero carousel ---------- */
.about_hero_track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.about_hero_track::-webkit-scrollbar { display: none; }
.about_hero_slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: block;
}
.about_hero_slide img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Arrow buttons sit on top of the carousel; positioned absolute so they overlay the active image */
.about_hero_arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(17, 24, 39, 0.28);
  transform: translateY(-50%);
  transition: background-color 0.2s ease,
              color 0.2s ease,
              box-shadow 0.25s ease;
}
@media (min-width: 768px) {
  .about_hero_arrow { width: 3rem; height: 3rem; }
}
.about_hero_arrow--prev { left: 0.75rem; }
.about_hero_arrow--next { right: 0.75rem; }
@media (min-width: 768px) {
  .about_hero_arrow--prev { left: 1.25rem; }
  .about_hero_arrow--next { right: 1.25rem; }
}
.about_hero_arrow:hover {
  background-color: #c52031;
  color: #ffffff;
  box-shadow: 0 8px 22px -6px rgba(197, 32, 49, 0.45);
}
.about_hero_arrow:focus-visible {
  outline: 3px solid rgba(197, 32, 49, 0.4);
  outline-offset: 3px;
}


/* Section 2 — navy canvas that holds the image's bottom half.
   padding-top creates the navy strip the image's lower half rests on. */
.about_showcase {
  position: relative;
  background-color: #0b1c2b;
  padding: 6rem 0 4.5rem;
}
@media (min-width: 768px)  { .about_showcase { padding: 14rem 0 5.5rem; } }
@media (min-width: 1024px) { .about_showcase { padding: 22rem 0 6.5rem; } }

/* Centered vertical stack: number → statement → sub, sitting well below the bridge image */
.about_showcase_card {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
  padding-top: 2rem;
}
@media (min-width: 768px)  { .about_showcase_card { padding-top: 3rem; } }
@media (min-width: 1024px) { .about_showcase_card { padding-top: 4rem; } }

.about_showcase_number_xl {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(3rem, 9vw, 7.5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin-bottom: 1.75rem;
}
@media (min-width: 1024px) { .about_showcase_number_xl { margin-bottom: 2.25rem; } }

.about_showcase_plus {
  color: #c52031;
  font-weight: 500;
  margin-left: 0.02em;
}

.about_showcase_count {
  display: inline-flex;
  align-items: stretch;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Slot-machine digit reel — each digit is a fixed window revealing one character from a vertical reel.
   Vertical mask gradient fades the top and bottom of the window so the rolling numbers feel like
   they're curving around a drum surface instead of getting hard-cut at the edges. */
.about_showcase_count .count_digit {
  display: inline-block;
  position: relative;
  height: 1em;
  overflow: hidden;
  line-height: 1;
  vertical-align: baseline;
  -webkit-mask-image: linear-gradient(to bottom,
                        transparent 0%,
                        rgba(0, 0, 0, 0.35) 8%,
                        #000 22%,
                        #000 78%,
                        rgba(0, 0, 0, 0.35) 92%,
                        transparent 100%);
          mask-image: linear-gradient(to bottom,
                        transparent 0%,
                        rgba(0, 0, 0, 0.35) 8%,
                        #000 22%,
                        #000 78%,
                        rgba(0, 0, 0, 0.35) 92%,
                        transparent 100%);
}
.about_showcase_count .count_reel {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  will-change: transform;
}
.about_showcase_count .count_d {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
}
.about_showcase_count .count_sep {
  display: inline-block;
  line-height: 1;
}

.about_showcase_statement {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  line-height: 1.3;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.01em;
  margin: 0 auto 1rem;
  max-width: 48rem;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .about_showcase_statement { white-space: normal; }
}
.about_showcase_statement em {
  font-style: normal;
  font-weight: 500;
  color: #ffffff;
}
.about_showcase_hl {
  font-weight: 600;
  color: #c52031;
  letter-spacing: -0.015em;
}

.about_showcase_sub {
  font-size: 0.9375rem;
  line-height: 1.625rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 auto;
  max-width: 42rem;
  letter-spacing: 0.005em;
}
@media (min-width: 768px) {
  .about_showcase_sub { font-size: 1rem; line-height: 1.75rem; }
}

/* =========================================================
   3) Shared section heading
   ========================================================= */
.about_section_head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 2.5rem;
}
@media (min-width: 768px) { .about_section_head { margin-bottom: 3.5rem; } }

.about_eyebrow {
  display: block;
  margin-bottom: 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c52031;
}

.about_section_title {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 500;
  color: #1f2937;
  letter-spacing: -0.015em;
}
@media (min-width: 768px) { .about_section_title { font-size: 2.5rem; } }
@media (min-width: 1280px) { .about_section_title { font-size: 2.75rem; } }

.about_section_dec {
  margin-top: 0.875rem;
  font-size: 1rem;
  line-height: 1.625rem;
  color: #6b7280;
}
@media (min-width: 768px) {
  .about_section_dec { font-size: 1.125rem; line-height: 1.75rem; }
}

/* Gradient bleed only on pink-light section (testimonials) */
.about_testimonials {
  position: relative;
  background-color: #ffffff;
}

/* =========================================================
   4) Our Story — progressive text reveal + sticky image
   ========================================================= */
.about_story {
  padding-top: 5rem;
  padding-bottom: 4rem;
  background-color: #ffffff;
}
@media (min-width: 768px) {
  .about_story { padding-top: 7rem; padding-bottom: 5rem; }
}

.about_story_title {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 500;
  color: #1f2937;
  letter-spacing: -0.015em;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .about_story_title { font-size: 2.5rem; margin-bottom: 3rem; }
}

/* Two-column layout: text left, image right */
.about_story_layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .about_story_layout {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: start;
  }
}

/* The text block — full width, large readable type */
.about_story_text {
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.about_story_text p {
  margin-bottom: 1.4em;
}
.about_story_text p:last-child { margin-bottom: 0; }

/* Words start muted, reveal to full color on scroll */
.about_story_text .word {
  color: rgba(31, 41, 55, 0.15);
  transition: color 0.2s ease;
}

.about_story_text .word.active {
  color: #1f2937;
}

/* Strong words turn red when active */
.about_story_text strong .word.active {
  color: #c52031;
  font-weight: 500;
}
.about_story_text strong .word {
  font-weight: 500;
}

/* Story-em emphasis — keep words in the same font/style as surrounding copy */
.about_story_text em .word.active,
.about_story_text em .word {
  font-style: normal;
}
.about_story_text em {
  font-style: normal;
}

/* Image column — sticky centered vertically in viewport */
.about_story_media {
  border-radius: 1.25rem;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .about_story_media {
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    align-self: start;
    margin-top: 0;
  }
}

.about_story_media img {
  width: 100%;
  height: auto;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .about_story_text .word {
    color: #1f2937;
    transition: none;
  }
  .about_story_text strong .word { color: #c52031; }
}

/* =========================================================
   5) Stats — bridge card (50/50 between Story and Journey)
   ========================================================= */

/* The story section gets extra bottom padding to hold the stats card's top half */
.about_story {
  padding-bottom: 8rem;
}
@media (min-width: 768px) { .about_story { padding-bottom: 12rem; } }
@media (min-width: 1024px) { .about_story { padding-bottom: 14rem; } }


/* =========================================================
   6c) Our Journey — Curved-Connector Chain
   Alternating left/right milestone cards joined by a single SVG curve
   that snakes between them. Pure CSS + a passive traveling pulse.
   Brand colors only.
   ========================================================= */
.about_journey {
  position: relative;
  padding: 4.5rem 0 5rem;
  background-color: #ffffff;
  overflow: hidden;
}
@media (min-width: 768px)  { .about_journey { padding: 5.5rem 0 6rem; } }
@media (min-width: 1024px) { .about_journey { padding: 6rem 0 6.5rem; } }

/* Subtle dotted-grid backdrop */
.about_journey_grid_bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(31, 41, 55, 0.06) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
  opacity: 0.7;
}

.about_journey > .wrapper { position: relative; z-index: 1; }

/* ----- Header ----- */
.about_journey_head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}
.about_journey_label {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c52031;
}
.about_journey_heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #1f2937;
  margin: 0;
}
.about_journey_heading em { color: #c52031; font-style: normal; font-weight: 500; }
.about_journey_lead {
  font-size: 1rem;
  line-height: 1.65;
  color: #4b5563;
  margin: 0;
  max-width: 36rem;
}
.about_journey_lead strong { color: #1f2937; font-weight: 500; }
@media (min-width: 1024px) { .about_journey_lead { font-size: 1.0625rem; } }

/* ----- Chain container (positioned cards over an SVG layer) ----- */
.about_journey_chain {
  position: relative;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  /* aspect-ratio applied via JS from data-aspect (1200 / totalHeight) so the
     SVG and absolute card positions stay in lockstep at any width. */
}
.about_journey_chain_svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.about_journey_chain_path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-width: 3;
  transition: stroke-dashoffset 0.18s linear;
}

.about_journey_chain_traveler {
  filter: drop-shadow(0 0 6px rgba(197, 32, 49, 0.55));
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* ----- Milestone cards ----- */
.about_journey_card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem 1.25rem 1.25rem;
  background-color: #ffffff;
  border: 1px solid rgba(31, 41, 55, 0.08);
  border-radius: 1rem;
  box-shadow: 0 24px 48px -32px rgba(17, 24, 39, 0.18);
  opacity: 0;
  transform: translateY(12px);
  animation: about_journey_card_in 0.55s ease forwards;
  animation-delay: calc(0.55s + var(--i, 0) * 0.18s);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.about_journey_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 60px -28px rgba(197, 32, 49, 0.22);
  border-color: rgba(197, 32, 49, 0.22);
}
@keyframes about_journey_card_in {
  to { opacity: 1; transform: translateY(0); }
}

.about_journey_card_year {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #c52031;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 0.125rem;
}

.about_journey_card_title {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #1f2937;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
}
.about_journey_card_text {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #4b5563;
  margin: 0;
}
@media (min-width: 1024px) {
  .about_journey_card_title { font-size: 1.0625rem; }
  .about_journey_card_text  { font-size: 1.0625rem; }
}

/* Mobile: stack cards full-width centered, hide curved SVG layer */
@media (max-width: 767px) {
  .about_journey_chain {
    aspect-ratio: auto !important;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .about_journey_card {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100%;
  }
  /* Active card (the one closest to viewport center) — red glow so the user knows where they are in the timeline */
  .about_journey_card.is-active {
    border-color: rgba(197, 32, 49, 0.45);
    box-shadow: 0 14px 30px -10px rgba(197, 32, 49, 0.4);
    transform: translateY(-2px);
  }
  .about_journey_chain_svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .about_journey_chain_path {
    stroke-dashoffset: 0;
    animation: none;
  }
  .about_journey_card {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .about_journey_chain_traveler { display: none; }
  .about_journey_card:hover { transform: none; }
}


/* =========================================================
   7) Vision & Mission — side-by-side cards
   ========================================================= */
.about_vm_section {
  background-color: #ffffff;
  padding: 4rem 0;
}
@media (min-width: 768px) { .about_vm_section { padding: 6rem 0; } }
@media (min-width: 1024px) { .about_vm_section { padding: 7rem 0; } }

.about_vm_head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 2.5rem;
}
@media (min-width: 1024px) { .about_vm_head { margin-bottom: 3.5rem; } }

.about_vm_head .about_section_title {
  margin-top: 0.75rem;
}
.about_vm_head .about_section_title span {
  color: #c52031;
  font-weight: inherit;
}

.about_vm_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .about_vm_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (min-width: 1280px) {
  .about_vm_grid { gap: 2rem; }
}

.about_vm_card {
  position: relative;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 1.25rem;
  padding: 2rem 1.75rem;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
@media (min-width: 768px) { .about_vm_card { padding: 2.5rem 2rem; } }
@media (min-width: 1280px) { .about_vm_card { padding: 3rem 2.75rem; border-radius: 1.5rem; } }

.about_vm_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -22px rgba(31, 41, 55, 0.18);
  border-color: rgba(197, 32, 49, 0.35);
}

/* Soft watermark of the card label in the corner */
.about_vm_card_tag {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c52031;
  margin-bottom: 1rem;
}

.about_vm_card_title {
  position: relative;
  z-index: 1;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.875rem, 4.5vw, 2.875rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #1f2937;
  margin: 0 0 1.125rem;
}
.about_vm_card_title em {
  font-style: normal;
  color: #c52031;
  font-weight: 500;
}

.about_vm_card_desc {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
}
@media (min-width: 1024px) {
  .about_vm_card_desc { font-size: 1.0625rem; }
}

/* =========================================================
   8) What We Stand For — 2-col: heading on left, 4 numbered principles on right
   ========================================================= */
.about_stand {
  position: relative;
  background-color: #ffffff;
  padding: 5rem 0;
}
@media (min-width: 768px)  { .about_stand { padding: 6rem 0; } }
@media (min-width: 1024px) { .about_stand { padding: 7rem 0; } }

.about_stand_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .about_stand_grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 5rem;
  }
}

/* Left column — heading + descriptor */
.about_stand_text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1024px) { .about_stand_text { position: sticky; top: 6rem; } }

.about_stand_text .about_eyebrow { color: #c52031; }

.about_stand_heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #1f2937;
  margin: 0.5rem 0 0;
}
.about_stand_heading em {
  color: #c52031;
  font-style: normal;
  font-weight: 500;
}

.about_stand_desc {
  font-size: 1rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
  max-width: 28rem;
}
@media (min-width: 1024px) { .about_stand_desc { font-size: 1.0625rem; } }

/* Right column — 4 numbered principles */
.about_stand_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
@media (min-width: 1024px) { .about_stand_list { gap: 2.25rem; } }

.about_stand_item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px dashed rgba(31, 41, 55, 0.15);
}
@media (min-width: 1024px) { .about_stand_item { gap: 1.5rem; padding-bottom: 2.25rem; } }
.about_stand_item:last-child { border-bottom: 0; padding-bottom: 0; }

.about_stand_item_num {
  font-family: 'Poppins', sans-serif;
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1;
  color: #c52031;
  font-variant-numeric: tabular-nums;
  padding-top: 0.125rem;
}
@media (min-width: 1024px) { .about_stand_item_num { font-size: 2rem; } }

.about_stand_item_body { display: flex; flex-direction: column; gap: 0.5rem; }

.about_stand_item_title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #1f2937;
  margin: 0;
}
@media (min-width: 1024px) { .about_stand_item_title { font-size: 1.5rem; } }

.about_stand_item_text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
}
@media (min-width: 1024px) { .about_stand_item_text { font-size: 1rem; } }

/* =========================================================
   10) Products — 2 big + 3 small grid
   ========================================================= */
.about_products {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: #ffffff;
  isolation: isolate;
}
@media (min-width: 768px) {
  .about_products { padding-top: 7rem; padding-bottom: 7rem; }
}

/* Decor disabled — section keeps a clean white background */
.about_products_decor { display: none; }

/* Italic-red emphasis span in the section title */
.about_products .about_section_title span {
  color: #c52031;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---------- Shared product-card text atoms (name / dot / description) ---------- */
.about_spread_name {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 500;
  color: #1f2937;
  letter-spacing: -0.02em;
  margin: 0;
}
@media (min-width: 768px)  { .about_spread_name { font-size: 2.5rem; } }
@media (min-width: 1024px) { .about_spread_name { font-size: 2.75rem; } }
@media (min-width: 1280px) { .about_spread_name { font-size: 3rem; } }

.about_spread_dec {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #4b5563;
  margin: 0;
  max-width: 32rem;
}
@media (min-width: 768px)  { .about_spread_dec { font-size: 1rem; line-height: 1.75; } }
@media (min-width: 1024px) { .about_spread_dec { font-size: 1.0625rem; line-height: 1.75; } }

/* ---------- Shared small-card text atoms (used by V4 small cards) ---------- */
.about_v2_card_body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
  /* Body fills the height of its grid cell so the CTA can pin to the bottom edge */
  align-self: stretch;
}

.about_v2_card_name {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  line-height: 1.15;
  font-weight: 500;
  color: #1f2937;
  letter-spacing: -0.02em;
  margin: 0;
}
@media (min-width: 1024px) { .about_v2_card_name { font-size: 1.75rem; } }

.about_v2_card_dec {
  font-size: 0.9375rem;
  line-height: 1.625rem;
  color: #4b5563;
  margin: 0;
}
@media (min-width: 1024px) {
  .about_v2_card_dec { font-size: 1rem; line-height: 1.75rem; }
}


/* Grid: 1 col mobile, 6 cols desktop.
   Row 1: POSS + Payroll — each spans 3 cols (2 cards).
   Row 2: Tasks + Invoice + Purchase — each spans 2 cols (3 cards). */
.about_products_v4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: 1rem;
}
@media (min-width: 768px) {
  .about_products_v4 {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    padding: 1.5rem;
  }
  .about_v4_card--big                          { grid-column: span 3; }
  .about_v4_card:not(.about_v4_card--big)      { grid-column: span 2; }
}

/* Shared card chrome — white tile with a soft shadow border at rest, lifts to its product hue on hover */
.about_v4_card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  background-color: #ffffff;
  border: 1px solid rgba(31, 41, 55, 0.14);
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1),
              background-color 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.4s ease;
}
@media (min-width: 768px) { .about_v4_card { padding: 2rem 1.75rem; } }
@media (min-width: 1024px) { .about_v4_card { padding: 2.25rem 2rem; } }

.about_v4_card:hover {
  transform: translateY(-4px);
  border-color: rgba(31, 41, 55, 0.22);
  box-shadow: 0 8px 18px -10px rgba(17, 24, 39, 0.10);
}

/* Per-product hover tints (brand-light pastels) */
.about_v4_card--poss:hover     { background-color: #fefbfc; }
.about_v4_card--invoice:hover  { background-color: #f0f2fc; }
.about_v4_card--payroll:hover  { background-color: #f3f8fc; }
.about_v4_card--purchase:hover { background-color: #faf8f2; }
.about_v4_card--tasks:hover    { background-color: #f6fcf8; }

/* Big card: icon-left + text-right (matches small cards) — white background */
.about_v4_card--big {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 2rem 1.75rem;
}
@media (max-width: 767px) {
  /* Mobile: icon + title in row 1 (side-by-side); description + CTA span full card width in rows 2-3.
     Uses display:contents on the inner wrappers so their children participate directly in the card's grid,
     no HTML restructure needed. */
  .about_v4_card--big,
  .about_v4_card:not(.about_v4_card--big) {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "body  body";
    column-gap: 1rem;
    row-gap: 0.875rem;
    align-items: center;
  }
  .about_v4_card--big > .about_v2_card_icon,
  .about_v4_card:not(.about_v4_card--big) > .about_v2_card_icon {
    grid-area: icon;
    align-self: center;
  }
  .about_v4_card--big > .about_v4_big_text,
  .about_v4_card:not(.about_v4_card--big) > .about_v2_card_body {
    display: contents;
  }
  .about_v4_card--big > .about_v4_big_text > .about_spread_name,
  .about_v4_card:not(.about_v4_card--big) > .about_v2_card_body > .about_v2_card_name {
    grid-area: title;
    align-self: center;
  }
  .about_v4_card--big > .about_v4_big_text > .about_spread_dec,
  .about_v4_card:not(.about_v4_card--big) > .about_v2_card_body > .about_v2_card_dec,
  .about_v4_card--big > .about_v4_big_text > .about_spread_cta,
  .about_v4_card:not(.about_v4_card--big) > .about_v2_card_body > .about_spread_cta {
    grid-column: 1 / -1;
  }
}
@media (min-width: 768px) { .about_v4_card--big { padding: 2.5rem; gap: 1.5rem; } }
@media (min-width: 1024px) { .about_v4_card--big { padding: 3rem; gap: 1.75rem; } }

/* Icon on big cards — naked logo, no tile chrome */
.about_v4_card--big .about_v2_card_icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (min-width: 1024px) {
  .about_v4_card--big .about_v2_card_icon { width: 4rem; height: 4rem; }
}
.about_v4_card--big .about_v2_card_icon picture {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.about_v4_card--big .about_v2_card_icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.about_v4_card--big:hover .about_v2_card_icon {
  transform: rotate(-4deg) scale(1.06);
}

.about_v4_big_text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1024px) { .about_v4_big_text { gap: 1.125rem; } }

/* Bigger product name on featured cards since they're the hero */
.about_v4_card--big .about_spread_name {
  font-size: 2.25rem;
}
@media (min-width: 768px)  { .about_v4_card--big .about_spread_name { font-size: 2.75rem; } }
@media (min-width: 1024px) { .about_v4_card--big .about_spread_name { font-size: 3rem; } }

.about_v4_card--big .about_spread_dec {
  max-width: 36rem;
}

/* Card content order — flex order so HTML order doesn't dictate visual order */
.about_v4_card--big .about_v4_big_text .about_spread_name { order: 1; }
.about_v4_card--big .about_v4_big_text .about_spread_dec  { order: 2; }
.about_v4_card--big .about_v4_big_text .about_spread_cta  { order: 3; }

.about_v4_card:not(.about_v4_card--big) .about_v2_card_body .about_v2_card_name { order: 1; }
.about_v4_card:not(.about_v4_card--big) .about_v2_card_body .about_v2_card_dec  { order: 2; }
.about_v4_card:not(.about_v4_card--big) .about_v2_card_body .about_spread_cta   { order: 3; }

/* V4 CTA — plain red text with arrow (button styling removed) */
.about_v4_card .about_spread_cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.375rem;
  margin-top: 0.5rem;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #c52031;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.about_v4_card .about_spread_cta svg {
  transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.about_v4_card:hover .about_spread_cta svg { transform: translateX(4px); }

/* Small cards: icon-left + text-right layout (reuses V2's .about_v2_card_icon / .about_v2_card_body).
   `align-items: stretch` so the body cell takes full height — paired with `margin-top: auto`
   on the CTA below, every card's "Explore X" button lines up across the row. */
.about_v4_card:not(.about_v4_card--big) {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: stretch;
}
.about_v4_card:not(.about_v4_card--big) .about_spread_cta {
  margin-top: auto;
}
@media (min-width: 768px) { .about_v4_card:not(.about_v4_card--big) { gap: 1.5rem; } }

.about_v4_card:not(.about_v4_card--big) .about_v2_card_icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (min-width: 1024px) {
  .about_v4_card:not(.about_v4_card--big) .about_v2_card_icon { width: 4rem; height: 4rem; }
}
.about_v4_card:not(.about_v4_card--big) .about_v2_card_icon picture {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.about_v4_card:not(.about_v4_card--big) .about_v2_card_icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.about_v4_card:not(.about_v4_card--big):hover .about_v2_card_icon {
  transform: rotate(-4deg) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .about_v4_card:hover,
  .about_v4_card:hover .about_v2_card_icon { transform: none; }
}

/* =========================================================
   11) Founders — asymmetric image-led
   ========================================================= */
.about_founders {
  padding-top: 5.5rem;
  padding-bottom: 8rem;
}
@media (min-width: 768px) {
  .about_founders { padding-top: 8rem; padding-bottom: 12rem; }
}

.about_founders .about_section_title span {
  color: #c52031;
  font-weight: inherit;
}

.about_founder {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
  align-items: center;
  margin-bottom: 3rem;
}
.about_founder:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .about_founder { grid-template-columns: 340px 1fr; gap: 4rem; margin-bottom: 6rem; }
  .about_founder--reverse { grid-template-columns: 1fr 340px; }
  .about_founder--reverse .about_founder_media { order: 2; }
}

.about_founder_media { max-width: 15rem; margin: 0 auto; position: relative; }
@media (min-width: 768px) {
  .about_founder_media { max-width: 20rem; }
}

@media (max-width: 767px) {
  .about_founder_name,
  .about_founder_role { text-align: center; }
  .about_founder_socials { justify-content: center; }
}

.about_founder_media img {
  width: 100%;
  border-radius: 1.25rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 20px 50px -20px rgba(17, 24, 39, 0.18);
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.about_founder:hover .about_founder_media img { transform: scale(1.02); }

.about_founder_name {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: -0.015em;
}
@media (min-width: 768px) {
  .about_founder_name { font-size: 1.875rem; line-height: 2.25rem; }
}

.about_founder_role {
  font-size: 1rem;
  font-weight: 500;
  color: #c52031;
  margin-bottom: 0.75rem;
}

.about_founder_bio {
  font-size: 1rem;
  line-height: 1.75rem;
  color: #4b5563;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .about_founder_bio { font-size: 1.0625rem; line-height: 1.875rem; }
}

.about_founder_quote {
  position: relative;
  border-left: 3px solid #c52031;
  padding: 0.5rem 0 0.5rem 1.25rem;
  font-style: normal;
  font-size: 1.0625rem;
  line-height: 1.75rem;
  color: #1f2937;
}
@media (min-width: 768px) {
  .about_founder_quote { font-size: 1.125rem; line-height: 1.875rem; }
}

.about_founder_socials {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}

.about_founder_social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: #0A66C2;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.25s ease,
              color 0.25s ease,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about_founder_social:hover {
  background-color: #004182;
  color: #ffffff;
  transform: translateY(-2px);
}

/* =========================================================
   12) Testimonials — portrait video cards (YouTube link-outs)
   ========================================================= */
.about_testimonials {
  padding: 4.5rem 0;
  background-color: #ffffff;
}
@media (min-width: 768px)  { .about_testimonials { padding: 6rem 0; } }
@media (min-width: 1024px) { .about_testimonials { padding: 7rem 0; } }

.about_testi_head {
  text-align: center;
  max-width: 56rem;
  margin: 0 auto 3rem;
}
@media (min-width: 1024px) { .about_testi_head { margin-bottom: 4rem; } }

.about_testi_eyebrow {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c52031;
}

.about_testi_heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #1f2937;
  margin: 1rem 0 0.875rem;
}
.about_testi_heading_hl {
  color: #c52031;
}

/* ---------- Video grid: portrait cards, wider on typical desktops ---------- */
.about_testi_grid {
  /* Mobile: horizontal scroll-snap carousel — center-snapped so a peek of the previous and next card shows on both sides */
  display: flex;
  gap: 1rem;
  max-width: 88rem;
  margin: 0 auto;
  /* Horizontal padding = (viewport - card_width) / 2 — keeps the first/last cards visually centered */
  padding: 1rem 3.5rem 2rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.about_testi_grid::-webkit-scrollbar { display: none; }
.about_testi_grid > .about_testi_card {
  flex: 0 0 78vw;
  aspect-ratio: 264 / 469;
  scroll-snap-align: center;
}
@media (min-width: 640px) {
  .about_testi_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
    overflow: visible;
    scroll-snap-type: none;
  }
  .about_testi_grid > .about_testi_card { flex: initial; aspect-ratio: 264 / 469; }
}
@media (min-width: 1024px) {
  .about_testi_grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 1.5rem; }
}
@media (min-width: 1440px) {
  .about_testi_grid { grid-template-columns: repeat(5, 1fr); gap: 1.75rem; padding: 1.75rem; }
}

/* ---------- Card (a <button> — click plays its video inline) ---------- */
.about_testi_card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 264px;
  margin-inline: auto;
  aspect-ratio: 264 / 469;
  border-radius: 1rem;
  overflow: hidden;
  background-color: transparent;
  /* button reset */
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1),
              box-shadow 0.3s ease;
}
@media (min-width: 1024px) { .about_testi_card { border-radius: 1.25rem; } }

.about_testi_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -22px rgba(197, 32, 49, 0.35);
}
.about_testi_card:focus-visible {
  outline: 3px solid rgba(197, 32, 49, 0.4);
  outline-offset: 3px;
}

/* ---------- Inline iframe (created on click) — covers the card ---------- */
.about_testi_iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  border: 0;
}
.about_testi_card.is-playing { cursor: default; transform: none; }
.about_testi_card.is-playing:hover { transform: none; }
.about_testi_card.is-playing .about_testi_thumb,
.about_testi_card.is-playing .about_testi_play,
.about_testi_card.is-playing .about_testi_caption,
.about_testi_card.is-playing::after { display: none; }

.about_testi_thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #111827; /* fills any sub-pixel gap with dark instead of leaking the page bg */
  overflow: hidden;
}
.about_testi_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Slight default zoom crops out any baked-in framing/letterbox bars on YouTube thumbnails */
  transform: scale(1.04);
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.about_testi_card:hover .about_testi_thumb img { transform: scale(1.08); }

/* Dark gradient at bottom for caption legibility */
.about_testi_card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
              rgba(17, 24, 39, 0) 45%,
              rgba(17, 24, 39, 0.75) 100%);
  pointer-events: none;
}

/* Play button overlay (YouTube-style red triangle on white circle) */
.about_testi_play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 3.5rem;
  height: 3.5rem;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 9999px;
  box-shadow: 0 14px 28px -8px rgba(17, 24, 39, 0.35);
  color: #c52031;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.3s ease,
              color 0.3s ease;
}
@media (min-width: 1024px) { .about_testi_play { width: 4.25rem; height: 4.25rem; } }
.about_testi_play svg {
  width: 1.375rem;
  height: 1.375rem;
  margin-left: 3px; /* optical centering of the triangle */
}
@media (min-width: 1024px) { .about_testi_play svg { width: 1.75rem; height: 1.75rem; } }
.about_testi_card:hover .about_testi_play {
  transform: translate(-50%, -50%) scale(1.12);
  background-color: #c52031;
  color: #ffffff;
}

/* Bottom caption — name + context */
.about_testi_caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1rem 1.125rem 1.125rem;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}
@media (min-width: 1024px) { .about_testi_caption { padding: 1.25rem 1.375rem 1.375rem; } }
.about_testi_caption strong {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
@media (min-width: 1024px) { .about_testi_caption strong { font-size: 1.125rem; } }
.about_testi_caption span {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.35;
}

/* ---------- Footer link ---------- */
.about_testi_foot {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
@media (min-width: 1024px) { .about_testi_foot { margin-top: 3rem; } }
.about_testi_foot_link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #c52031;
  background-color: #ffffff;
  border: 1.5px solid #c52031;
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 0.3s ease,
              color 0.3s ease,
              transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.about_testi_foot_link:hover {
  background-color: #c52031;
  color: #ffffff;
  transform: translateY(-2px);
}
.about_testi_foot_link svg {
  transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.about_testi_foot_link:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .about_testi_card:hover,
  .about_testi_card:hover .about_testi_thumb img,
  .about_testi_card:hover .about_testi_play,
  .about_testi_foot_link:hover { transform: none; }
}


/* =========================================================
   13) Brands — shared heading + pill styles (used by Brands V2 converging marquee)
   ========================================================= */

.about_brand_v2_heading {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  font-weight: 500;
  color: #1f2937;
  letter-spacing: -0.02em;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

.about_brand_v2_heading_hl {
  color: #c52031;
  font-style: normal;
  font-weight: 500;
}


.about_brand_v2_item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  height: 4.25rem;
  padding: 0 1.5rem 0 1rem;
  margin-right: 1.25rem;
  background-color: #ffffff;
  border: 1px solid rgba(31, 41, 55, 0.1);
  border-radius: 9999px;
  box-shadow: 0 4px 14px -8px rgba(17, 24, 39, 0.12);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
@media (min-width: 768px) {
  .about_brand_v2_item {
    height: 4.75rem;
    padding: 0 1.75rem 0 1.25rem;
    margin-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .about_brand_v2_item {
    height: 5.25rem;
    padding: 0 2rem 0 1.5rem;
    margin-right: 1.75rem;
  }
}

.about_brand_v2_item img {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  object-fit: contain;
  display: block;
}
@media (min-width: 768px)  { .about_brand_v2_item img { width: 2.25rem; height: 2.25rem; } }
@media (min-width: 1024px) { .about_brand_v2_item img { width: 2.5rem; height: 2.5rem; } }

.about_brand_v2_item span {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #1f2937;
  line-height: 1;
}
@media (min-width: 768px)  { .about_brand_v2_item span { font-size: 1.125rem; } }
@media (min-width: 1024px) { .about_brand_v2_item span { font-size: 1.25rem; } }

.about_brand_v2_item:hover {
  transform: translateY(-3px);
  border-color: rgba(197, 32, 49, 0.35);
  box-shadow: 0 10px 24px -8px rgba(197, 32, 49, 0.25);
}


/* =========================================================
   13b) Brands V2 — Petpooja center, brands converge from both sides
   ========================================================= */
.about_brands_v3 {
  position: relative;
  padding: 5rem 0 6rem;
  background-color: #ffffff;
  overflow: hidden;
}
@media (min-width: 768px) { .about_brands_v3 { padding: 5rem 0 6rem; } }
@media (min-width: 1024px) { .about_brands_v3 { padding: 6rem 0 7rem; } }

.about_brand_v3_head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 3rem;
}
@media (min-width: 768px) { .about_brand_v3_head { margin-bottom: 4rem; } }
.about_brands_v3 .about_eyebrow { color: #c52031; }

/* Scene — 3-column layout (same shape across breakpoints): left marquees | center logo | right marquees */
.about_brand_v3_scene {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0;
}
@media (min-width: 768px) {
  .about_brand_v3_scene { gap: 1rem; padding: 0 1rem; }
}
@media (min-width: 1024px) {
  .about_brand_v3_scene { gap: 2rem; padding: 0 2rem; }
}

/* Center node — Petpooja logo anchor */
.about_brand_v3_center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9rem;
  height: 9rem;
  margin: 0;
  z-index: 3;
}
@media (min-width: 768px) { .about_brand_v3_center { width: 12rem; height: 12rem; } }
@media (min-width: 1024px) { .about_brand_v3_center { width: 14rem; height: 14rem; } }

.about_brand_v3_node {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  padding: 1.125rem;
  background-color: #ffffff;
  border: 1px solid rgba(197, 32, 49, 0.15);
  border-radius: 9999px;
  box-shadow: 0 18px 40px -18px rgba(197, 32, 49, 0.4),
              0 0 0 1px rgba(197, 32, 49, 0.08);
}
@media (min-width: 768px) { .about_brand_v3_node { width: 9rem; height: 9rem; padding: 1.5rem; } }
@media (min-width: 1024px) { .about_brand_v3_node { width: 11rem; height: 11rem; padding: 1.75rem; } }

.about_brand_v3_node img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Static rings around the center — no animation, subtle glow only */
.about_brand_v3_ring {
  position: absolute;
  inset: 12%;
  border-radius: 9999px;
  border: 1.5px solid rgba(197, 32, 49, 0.18);
  pointer-events: none;
  z-index: 1;
}
.about_brand_v3_ring--outer {
  inset: 0;
  border-color: rgba(197, 32, 49, 0.08);
}

/* Side columns — contain the marquee rows */
.about_brand_v3_side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
@media (min-width: 768px) { .about_brand_v3_side { gap: 1.25rem; } }

.about_brand_v3_side--left {
  order: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 78%, transparent 100%);
}
.about_brand_v3_side--right {
  order: 1;
  -webkit-mask-image: linear-gradient(to left,  transparent 0%, #000 14%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to left,  transparent 0%, #000 14%, #000 78%, transparent 100%);
}

/* Marquee row.
   Use `overflow-x: clip; overflow-y: visible` so the horizontal marquee track is hidden
   but pill shadows can extend vertically beyond the row without getting straight-cut. */
.about_brand_v3_marquee {
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  padding: 0.75rem 0;
}

.about_brand_v3_track {
  display: flex;
  width: max-content;
  gap: 1rem;
  will-change: transform;
}
@media (min-width: 768px) { .about_brand_v3_track { gap: 1.25rem; } }

.about_brand_v3_track--right { animation: about_brand_v3_scroll_right 30s linear infinite; }
.about_brand_v3_track--left  { animation: about_brand_v3_scroll_left  30s linear infinite; }

/* Stagger the second row on each side so they don't lockstep */
.about_brand_v3_side .about_brand_v3_marquee:nth-child(2) .about_brand_v3_track {
  animation-duration: 38s;
  animation-delay: -15s;
}

@keyframes about_brand_v3_scroll_right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes about_brand_v3_scroll_left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Slightly smaller brand items on V2 so two rows fit neatly per side */
.about_brand_v3_marquee .about_brand_v2_item {
  height: 2.75rem;
  padding: 0 0.75rem 0 0.625rem;
  margin-right: 0;
  gap: 0.5rem;
}
@media (min-width: 768px)  { .about_brand_v3_marquee .about_brand_v2_item { height: 4rem; padding: 0 1.25rem 0 1rem; gap: 0.75rem; } }
@media (min-width: 1024px) { .about_brand_v3_marquee .about_brand_v2_item { height: 4.5rem; padding: 0 1.5rem 0 1.125rem; } }

.about_brand_v3_marquee .about_brand_v2_item img { width: 1.125rem; height: 1.125rem; }
@media (min-width: 768px)  { .about_brand_v3_marquee .about_brand_v2_item img { width: 1.75rem; height: 1.75rem; } }
@media (min-width: 1024px) { .about_brand_v3_marquee .about_brand_v2_item img { width: 2rem; height: 2rem; } }

.about_brand_v3_marquee .about_brand_v2_item span { font-size: 0.8125rem; }
@media (min-width: 768px)  { .about_brand_v3_marquee .about_brand_v2_item span { font-size: 0.9375rem; } }
@media (min-width: 1024px) { .about_brand_v3_marquee .about_brand_v2_item span { font-size: 1rem; } }


@media (prefers-reduced-motion: reduce) {
  .about_brand_v3_track--left,
  .about_brand_v3_track--right { animation: none; }
  .about_brand_v3_ring { animation: none; opacity: 0.4; }
}


/* =========================================================
   13c) Bills Story V1 — A day in 24 hours (POS + receipt graphic)
   ========================================================= */
/* ---------- Shared billstory base styles (used by V1) ---------- */
.about_billstory {
  position: relative;
  padding: 4.5rem 0;
  background-color: #ffffff;
}
@media (min-width: 768px)  { .about_billstory { padding: 5.5rem 0; } }
@media (min-width: 1024px) { .about_billstory { padding: 6.5rem 0; } }

.about_billstory_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
/* Mobile + tablet: title (content) ALWAYS appears above the image for every
   Bills Story variant, regardless of DOM order or --reverse modifier. */
.about_billstory_grid .about_billstory_content { order: 0; }
.about_billstory_grid .about_billstory_visual  { order: 1; }
@media (min-width: 1024px) {
  .about_billstory_grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 4rem;
  }
  /* Desktop: restore each variant's natural DOM order so V1/V3 read text-left/image-right
     and V2 reads image-left/text-right (via the --reverse modifier). */
  .about_billstory_grid .about_billstory_content,
  .about_billstory_grid .about_billstory_visual { order: 0; }
  .about_billstory_grid--reverse .about_billstory_visual  { order: 1; }
  .about_billstory_grid--reverse .about_billstory_content { order: 2; }
}

.about_billstory_content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about_billstory_eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c52031;
}

.about_billstory_title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.875rem, 4.5vw, 2.875rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #1f2937;
  margin: 0;
}
.about_billstory_title em {
  color: #c52031;
  font-style: normal;
  font-weight: 500;
}

.about_billstory_lead {
  font-size: 1rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
  max-width: 32rem;
}
@media (min-width: 1024px) { .about_billstory_lead { font-size: 1.0625rem; } }

.about_billstory_visual { position: relative; }

/* Image card — used in V1, V2, V3 sections. Image shows at its natural
   aspect ratio, full (no crop). No frame, no radius, no shadow. */
.about_billstory_image {
  display: block;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
}
@media (min-width: 1024px) { .about_billstory_image { max-width: 36rem; } }
.about_billstory_image img {
  width: 100%;
  height: auto;
  display: block;
}



/* =========================================================
   13d) Global — 3+ countries globe + country cards
   ========================================================= */
.about_global {
  position: relative;
  padding: 5rem 0;
  background-color: #ffffff;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px)  { .about_global { padding: 7rem 0; } }
@media (min-width: 1024px) { .about_global { padding: 8rem 0; } }

.about_global_decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.about_global_grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(197, 32, 49, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197, 32, 49, 0.03) 1px, transparent 1px);
  background-size: 3rem 3rem;
  opacity: 0.6;
}

.about_global_head {
  text-align: center;
  max-width: 52rem;
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 2;
}
.about_global_heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #1f2937;
  margin: 0.75rem 0 1rem;
}
.about_global_heading_hl {
  color: #c52031;
  font-style: normal;
  font-weight: 500;
}
.about_global_sub {
  font-size: 1rem;
  line-height: 1.75;
  color: #4b5563;
  margin: 0 auto;
  max-width: 44rem;
}
@media (min-width: 1024px) { .about_global_sub { font-size: 1.0625rem; } }

.about_global_stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
}
@media (min-width: 768px) { .about_global_stage { gap: 1.5rem; } }
@media (min-width: 1024px) { .about_global_stage { gap: 1.75rem; } }

/* ---------- Globe / World map ---------- */
.about_global_globe_wrap {
  position: relative;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
}

.about_global_map {
  display: block;
  width: 100%;
  border-radius: 1.25rem;
  overflow: hidden;
}
.about_global_map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* ---------- Country list (chrome-free: flag + tag + country name only) ---------- */
.about_global_country_list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  /* Mobile: 2-col grid — India (row 1 col 1) + South Africa (row 1 col 2), UAE spans full width centered on row 2 */
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  width: fit-content;
  gap: 1rem 2rem;
}
.about_global_country_item:nth-child(1) { grid-column: 1; grid-row: 1; }
.about_global_country_item:nth-child(2) { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
.about_global_country_item:nth-child(3) { grid-column: 2; grid-row: 1; }
@media (min-width: 768px) {
  .about_global_country_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: auto;
    gap: 3rem;
  }
  .about_global_country_item:nth-child(1),
  .about_global_country_item:nth-child(2),
  .about_global_country_item:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
  }
}
@media (min-width: 1024px) { .about_global_country_list { gap: 4rem; } }

.about_global_country_item {
  display: flex;
  align-items: center;    /* flag stays its natural square size, vertically centered against text */
  gap: 0.625rem;
}

/* Stylized flag pills (3-stripe CSS drawings, no image assets) */
.about_global_flag {
  display: inline-flex;
  flex-direction: column;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  overflow: hidden;
  border: 1px solid rgba(31, 41, 55, 0.1);
  flex-shrink: 0;
}
.about_global_flag span { display: block; flex: 1; }
/* India — saffron / white / green */
.about_global_flag--in span:nth-child(1) { background-color: #ff9933; }
.about_global_flag--in span:nth-child(2) { background-color: #ffffff; position: relative; }
.about_global_flag--in span:nth-child(2)::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  transform: translate(-50%, -50%);
  border: 1px solid #000080;
  border-radius: 9999px;
}
.about_global_flag--in span:nth-child(3) { background-color: #138808; }
/* UAE — red / green / white / black (vertical red bar + horizontal stripes) */
.about_global_flag--ae {
  flex-direction: row;
}
.about_global_flag--ae span:nth-child(1) { flex: 0 0 30%; background-color: #c52031; }
.about_global_flag--ae span:nth-child(2),
.about_global_flag--ae span:nth-child(3),
.about_global_flag--ae span:nth-child(4) {
  position: absolute;
  left: 30%; right: 0;
  height: 33.33%;
}
.about_global_flag--ae { position: relative; }
.about_global_flag--ae span:nth-child(2) { top: 0;     background-color: #138808; }
.about_global_flag--ae span:nth-child(3) { top: 33.33%; background-color: #ffffff; }
.about_global_flag--ae span:nth-child(4) { top: 66.66%; background-color: #111111; }
/* South Africa — simplified horizontal stripes */
.about_global_flag--za span:nth-child(1) { background-color: #007a4d; }
.about_global_flag--za span:nth-child(2) { background-color: #ffffff; }
.about_global_flag--za span:nth-child(3) { background-color: #de3831; }

.about_global_country_tag {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c52031;
}
.about_global_country_name {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.15;
  font-weight: 500;
  color: #1f2937;
  margin: 0.125rem 0 0;
}
@media (min-width: 1024px) { .about_global_country_name { font-size: 1.0625rem; } }


/* =========================================================
   14) Resources — feature + stack
   ========================================================= */
.about_resources_v3 {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
@media (min-width: 768px) {
  .about_resources_v3 { padding-top: 6rem; padding-bottom: 6rem; }
}

.about_res3_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 1024px) {
  .about_res3_grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
  }
}

.about_res3_feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
  padding: 2rem;
  border-radius: 1.25rem;
  background-color: #0b1c2b;
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1),
              box-shadow 0.3s ease;
}
.about_res3_feature::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
@media (min-width: 768px) {
  .about_res3_feature { padding: 2.5rem; }
}
.about_res3_feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -30px rgba(37, 99, 235, 0.55);
}


.about_res3_feature_title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 500;
  color: #ffffff;
  margin: 0;
}
@media (min-width: 768px) { .about_res3_feature_title { font-size: 2.25rem; line-height: 1.2; } }

.about_res3_feature_dec {
  font-size: 1rem;
  line-height: 1.625rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 36rem;
}

.about_res3_feature_cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.875rem 1.25rem;
  align-self: flex-start;
  background-color: #c52031;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 9999px;
  transition: background-color 0.25s ease, transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.about_res3_feature_cta svg {
  transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.about_res3_feature:hover .about_res3_feature_cta { background-color: #a51b29; }
.about_res3_feature:hover .about_res3_feature_cta svg { transform: translateX(4px); }

.about_res3_stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about_res3_row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.25rem;
  background-color: #ffffff;
  border: 1px solid rgba(31, 41, 55, 0.08);
  border-radius: 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease,
              box-shadow 0.3s ease,
              transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1);
}
@media (min-width: 768px) { .about_res3_row { padding: 1.5rem 1.5rem; } }
.about_res3_row:hover {
  border-color: rgba(197, 32, 49, 0.35);
  box-shadow: 0 16px 36px -22px rgba(197, 32, 49, 0.3);
  transform: translateX(4px);
}

.about_res3_row_icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background-color: #fef2f2;
  color: #c52031;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.about_res3_row:hover .about_res3_row_icon {
  background-color: #c52031;
  color: #ffffff;
}

.about_res3_row_content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.about_res3_row_title {
  font-size: 1.0625rem;
  font-weight: 500;
  color: #1f2937;
}
@media (min-width: 768px) { .about_res3_row_title { font-size: 1.125rem; } }
.about_res3_row_dec {
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: #6b7280;
}

.about_res3_row_arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: #fef2f2;
  color: #c52031;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.about_res3_row:hover .about_res3_row_arrow {
  background-color: #c52031;
  color: #ffffff;
  transform: translateX(4px);
}