/* ==========================================================================
   AROZEN CARE — ABOUT PAGE STYLES
   Reuses global tokens/utilities from home.css (:root vars, .container,
   .btn/.btn-primary/.btn-outline/.btn-lg, header/nav, .text-gradient,
   the fadeUpIn/fadeIn keyframes, and the global prefers-reduced-motion
   reset) — this file only adds page-specific rules, same pattern as
   services.css. Mobile-first; desktop switch at 900px, matching the
   breakpoint used across the rest of the site.
   Section map: SECTION 1. About Hero
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION 1 — ABOUT HERO
   Clean, minimal editorial hero. Mobile: a single centered column (copy,
   then image). Desktop (900px+): a standard 2-column split — copy left,
   image right, vertically centered — with the image held in a simple
   rounded/shadowed frame so it reads as part of the layout rather than a
   floating card.
   -------------------------------------------------------------------------- */
.about-hero {
  position: relative;
  overflow: hidden;
  padding-block: 2.5rem 3rem;
  background: var(--color-bg);
}

/* Subtle line/grid texture, masked toward the top-right — same decorative
   language as Home's hero background, positioned differently for a
   visually distinct composition */
.about-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(38, 59, 143, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 59, 143, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 85% 15%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 85% 15%, #000 0%, transparent 72%);
}

.about-hero-inner {
  position: relative;
  z-index: 1;
}

/* Mobile-first: single column, everything centered */
.about-hero-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.about-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  opacity: 0;
  animation: fadeUpIn 0.8s var(--ease) both;
}

.about-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin: 0 0 1rem;
}

/* Small accent line before the eyebrow text — visually distinct from
   Home's pill-badge eyebrow treatment */
.about-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--color-secondary);
  flex-shrink: 0;
}

.about-hero-heading {
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.16;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.about-hero-text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 0 auto 1.75rem;
}

.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

/* --- Image: simple, integrated frame — rounded corners + soft shadow,
   no offset/overlap accent panel. width:100%/height:auto (no forced
   aspect-ratio) keeps the image at its true native proportions, so
   nothing is ever cropped out of the composition. --------------------- */
.about-hero-media {
  width: 100%;
  max-width: 480px;
  opacity: 0;
  animation: fadeIn 1s var(--ease) 0.15s both;
}

.about-hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Fallback shown if the image fails to load */
.about-hero-image.about-hero-image--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  text-align: center;
  padding: 2rem;
}

/* --------------------------------------------------------------------------
   SECTION 1 — RESPONSIVE
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .about-hero-actions {
    flex-wrap: nowrap;
  }
}

/* 900px+ matches the breakpoint used site-wide: switch to the standard
   2-column layout, left-align the copy again, and vertically center the
   image alongside it */
@media (min-width: 900px) {
  .about-hero {
    padding-block: 4rem 4.5rem;
  }

  .about-hero-row {
    flex-direction: row;
    align-items: center;
    gap: 4.5rem;
  }

  .about-hero-copy {
    align-items: flex-start;
    text-align: left;
    flex: 1.05;
  }

  .about-hero-heading,
  .about-hero-text {
    margin-inline: 0;
  }

  .about-hero-heading {
    max-width: 26ch;
    margin-bottom: 1.75rem;
  }

  .about-hero-actions {
    justify-content: flex-start;
  }

  .about-hero-media {
    flex: 0.95;
    max-width: none;
    align-self: center;
  }
}
  /* homepage button ki css ka code  */
@media (max-width: 768px) {
  .about-hero-actions .btn {
    width: 230px;
    min-width: 230px;
    height: 60px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* ABOUT — S2: WHY AROZEN
   Mobile: image first, then fully centered content. Desktop (900px+):
   image left, editorial content right — the DOM order (image, then
   content) already gives this for free in a row layout, no reordering
   needed. Reveal is scroll-triggered (below the fold), toggled by
   about.js adding .is-visible; the universal prefers-reduced-motion
   reset in home.css already covers every transition/animation here. */
.about-why {
  position: relative;
  overflow: hidden;
  padding-block: 3rem;
  background: var(--color-white);
}

/* Very subtle, low-opacity organic shapes — decorative only, blurred and
   clipped by .about-why's overflow:hidden so they can never cause
   horizontal scroll even with their off-edge offsets */
.about-why-shape {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.about-why-shape--1 {
  top: -80px;
  left: -100px;
  width: 320px;
  height: 320px;
  background: var(--color-secondary);
  opacity: 0.08;
}

.about-why-shape--2 {
  bottom: -100px;
  right: -110px;
  width: 360px;
  height: 360px;
  background: var(--color-accent);
  opacity: 0.1;
}

.about-why-inner {
  position: relative;
  z-index: 1;
}

.about-why-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
}

/* --- Image: rounded frame + soft shadow, overflow:hidden so the hover
   zoom stays clipped inside it -------------------------------------- */
.about-why-media {
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.about-why.is-visible .about-why-media {
  opacity: 1;
  transform: translateY(0);
}

.about-why-image {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--ease);
}

/* Subtle hover zoom — clipped by .about-why-media above */
.about-why-media:hover .about-why-image {
  transform: scale(1.06);
}

/* Fallback shown if the image fails to load */
.about-why-image.about-why-image--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  text-align: center;
  padding: 2rem;
}

/* --- Content: centered on mobile, staggered reveal per element ------ */
.about-why-content {
  width: 100%;
  text-align: center;
}

.about-why-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin: 0 0 1rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.about-why.is-visible .about-why-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

/* Small line reveal — grows from 0 width once the section is visible */
.about-why-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--color-secondary);
  flex-shrink: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease) 0.1s;
}

.about-why.is-visible .about-why-eyebrow::before {
  transform: scaleX(1);
}

.about-why-heading {
  max-width: 24ch;
  margin: 0 auto 1.25rem;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease) 0.1s, transform 0.6s var(--ease) 0.1s;
}

.about-why.is-visible .about-why-heading {
  opacity: 1;
  transform: translateY(0);
}

.about-why-text {
  max-width: 56ch;
  margin: 0 auto 1.75rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease) 0.2s, transform 0.6s var(--ease) 0.2s;
}

.about-why.is-visible .about-why-text {
  opacity: 1;
  transform: translateY(0);
}

.about-why-cta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease) 0.3s, transform 0.6s var(--ease) 0.3s, background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

.about-why.is-visible .about-why-cta {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   ABOUT — S2: WHY AROZEN — RESPONSIVE (900px+, matching the breakpoint
   used site-wide)
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .about-why {
    padding-block: 5rem;
  }

  .about-why-row {
    flex-direction: row;
    align-items: center;
    gap: 4.5rem;
  }

  .about-why-media {
    flex: 1;
    max-width: none;
  }

  .about-why-content {
    flex: 1;
    text-align: left;
  }

  .about-why-eyebrow {
    justify-content: flex-start;
  }

  .about-why-heading,
  .about-why-text {
    margin-inline: 0;
  }
}

/* ABOUT — S3: OUR APPROACH
   Mobile: centered heading/content, then the 4 principles stacked
   vertically (icon centered on top, text centered below), connected by
   a single vertical line running behind the icons. Desktop (900px+):
   editorial split — copy left, principles right as an icon-left/text-
   right list, same connecting line shifted to run through the icons'
   left edge. transform:scaleY (not height %) drives the line's reveal —
   height percentages on an absolutely-positioned element with a top
   offset overshoot their container, scaleY on a top:0;bottom:0 element
   doesn't have that problem. */
.about-approach {
  position: relative;
  overflow: hidden;
  padding-block: 3rem;
  background: var(--color-bg);
}

/* Very subtle, low-opacity organic shapes — decorative only, blurred and
   clipped by .about-approach's overflow:hidden so they can never cause
   horizontal scroll even with their off-edge offsets */
.about-approach-shape {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}

.about-approach-shape--1 {
  top: -60px;
  right: -90px;
  width: 300px;
  height: 300px;
  background: var(--color-primary);
  opacity: 0.06;
}

.about-approach-shape--2 {
  bottom: -110px;
  left: -100px;
  width: 340px;
  height: 340px;
  background: var(--color-secondary);
  opacity: 0.08;
}

.about-approach-inner {
  position: relative;
  z-index: 1;
}

.about-approach-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.75rem;
}

/* --- Left: eyebrow, heading, supporting copy — centered on mobile --- */
.about-approach-copy {
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.about-approach.is-visible .about-approach-copy {
  opacity: 1;
  transform: translateY(0);
}

.about-approach-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin: 0 0 1rem;
}

.about-approach-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--color-secondary);
  flex-shrink: 0;
}

.about-approach-heading {
  max-width: 22ch;
  margin: 0 auto 1.25rem;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}

.about-approach-text {
  max-width: 52ch;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}

/* --- Right: 4 connected principles ----------------------------------- */
.about-approach-principles {
  position: relative;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Connecting line: centered under the icons on mobile, drawn in via
   scaleY once the section is visible */
.about-approach-line {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 2px;
  background: linear-gradient(var(--color-secondary), var(--color-accent));
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  transition: transform 1s var(--ease);
}

.about-approach.is-visible .about-approach-line {
  transform: translateX(-50%) scaleY(1);
}

.about-approach-principle {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.about-approach.is-visible .about-approach-principle {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger each principle's reveal */
.about-approach-principle:nth-child(2) { transition-delay: 0.1s; }
.about-approach-principle:nth-child(3) { transition-delay: 0.2s; }
.about-approach-principle:nth-child(4) { transition-delay: 0.3s; }
.about-approach-principle:nth-child(5) { transition-delay: 0.4s; }

/* Opaque badge so it visually "sits on" the connecting line behind it */
.about-approach-principle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.about-approach-principle-icon svg {
  width: 22px;
  height: 22px;
}

.about-approach-principle-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text);
  margin: 0 0 0.3rem;
}

.about-approach-principle-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   ABOUT — S3: OUR APPROACH — RESPONSIVE (900px+, matching the breakpoint
   used site-wide)
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .about-approach {
    padding-block: 5rem;
  }

  .about-approach-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 4.5rem;
  }

  .about-approach-copy {
    flex: 0.85;
    text-align: left;
  }

  .about-approach-eyebrow {
    justify-content: flex-start;
  }

  .about-approach-heading,
  .about-approach-text {
    margin-inline: 0;
  }

  .about-approach-heading {
    max-width: none;
  }

  .about-approach-principles {
    flex: 1.15;
    max-width: none;
    align-items: stretch;
    gap: 2rem;
  }

  /* Line shifts from centered-under-icon to left edge of the icon column */
  .about-approach-line {
    left: 26px;
    transform: scaleY(0);
  }

  .about-approach.is-visible .about-approach-line {
    transform: scaleY(1);
  }

  .about-approach-principle {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1.4rem;
  }

  /* Gentle hover lift, desktop only */
  .about-approach-principle:hover .about-approach-principle-icon {
    transform: translateY(-4px);
    background: var(--color-secondary);
    color: var(--color-white);
  }
}

/* ABOUT — S4: CARE ECOSYSTEM
   Mobile: a vertical connected journey — line running top-to-bottom
   behind numbered markers, everything centered. Desktop (900px+): the
   same 6 steps rotate into a wide horizontal flow, connected by a
   horizontal line at the markers' vertical center. transform:scaleY/
   scaleX (not height/width %) drives the line's reveal on a
   top:0;bottom:0 (mobile) / left:0;right:0 (desktop) element — same
   safe technique used for Section 3's connecting line. */
.about-ecosystem {
  position: relative;
  overflow: hidden;
  padding-block: 3rem;
  background: var(--color-white);
}

/* Very subtle, low-opacity organic shapes — decorative only, blurred and
   clipped by .about-ecosystem's overflow:hidden so they can never cause
   horizontal scroll even with their off-edge offsets */
.about-ecosystem-shape {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.about-ecosystem-shape--1 {
  top: -70px;
  left: -110px;
  width: 320px;
  height: 320px;
  background: var(--color-accent);
  opacity: 0.07;
}

.about-ecosystem-shape--2 {
  bottom: -90px;
  right: -100px;
  width: 340px;
  height: 340px;
  background: var(--color-primary);
  opacity: 0.06;
}

.about-ecosystem-inner {
  position: relative;
  z-index: 1;
}

.about-ecosystem-header {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.about-ecosystem.is-visible .about-ecosystem-header {
  opacity: 1;
  transform: translateY(0);
}

.about-ecosystem-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin: 0 0 1rem;
}

.about-ecosystem-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--color-secondary);
  flex-shrink: 0;
}

.about-ecosystem-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 1rem;
}

.about-ecosystem-text {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
}

/* --- Journey track: vertical + centered on mobile ---------------------- */
.about-ecosystem-track {
  position: relative;
  display: flex;
  justify-content: center;
}

.about-ecosystem-line {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 2px;
  background: linear-gradient(var(--color-secondary), var(--color-accent));
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  transition: transform 1.1s var(--ease);
}

.about-ecosystem.is-visible .about-ecosystem-line {
  transform: translateX(-50%) scaleY(1);
}

.about-ecosystem-steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.about-ecosystem-step {
  width: 100%;
  max-width: 320px;
}

.about-ecosystem-step-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.about-ecosystem-step-inner--link {
  border-radius: var(--radius-md);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.about-ecosystem.is-visible .about-ecosystem-step-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger each step's reveal */
.about-ecosystem-step:nth-child(2) .about-ecosystem-step-inner { transition-delay: 0.08s; }
.about-ecosystem-step:nth-child(3) .about-ecosystem-step-inner { transition-delay: 0.16s; }
.about-ecosystem-step:nth-child(4) .about-ecosystem-step-inner { transition-delay: 0.24s; }
.about-ecosystem-step:nth-child(5) .about-ecosystem-step-inner { transition-delay: 0.32s; }
.about-ecosystem-step:nth-child(6) .about-ecosystem-step-inner { transition-delay: 0.4s; }

/* Opaque numbered marker — sits visually "on" the connecting line */
.about-ecosystem-step-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-secondary);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.about-ecosystem-step-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-text);
  margin: 0;
}

.about-ecosystem-step-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* Linked steps get a gentle hover/focus response on the marker only —
   the rest of the step stays visually calm */
.about-ecosystem-step-inner--link:hover .about-ecosystem-step-marker,
.about-ecosystem-step-inner--link:focus-visible .about-ecosystem-step-marker {
  transform: translateY(-3px);
  background: var(--color-secondary);
  color: var(--color-white);
}

.about-ecosystem-step-inner--link:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   ABOUT — S4: CARE ECOSYSTEM — RESPONSIVE (900px+, matching the
   breakpoint used site-wide)
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .about-ecosystem {
    padding-block: 5rem;
  }

  .about-ecosystem-track {
    align-items: flex-start;
  }

  /* Line rotates from vertical (mobile) to horizontal, running through
     the markers' vertical center; inset ~8% each side to land roughly
     under the first/last marker's own center rather than the track's
     outer edge */
  .about-ecosystem-line {
    top: 20px;
    bottom: auto;
    left: 8%;
    right: 8%;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
    transform: scaleX(0);
    transform-origin: left;
  }

  .about-ecosystem.is-visible .about-ecosystem-line {
    transform: scaleX(1);
  }

  .about-ecosystem-steps {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .about-ecosystem-step {
    flex: 1;
    max-width: none;
  }
}

/* ABOUT — S5: CARE CLOSER TO HOME
   Premium editorial closer — no card, no stats. Mobile: centered text
   and CTAs, then the image below. Desktop (900px+): text/CTA stay left,
   a large image now fills the right side (previously just empty glow),
   with the same soft teal/blue shapes repositioned to sit behind it for
   depth, and the two columns vertically centered as one composition. */
.about-closing {
  position: relative;
  overflow: hidden;
  padding-block: 4rem 4.5rem;
  background: var(--color-bg);
}

/* Soft, slow-drifting teal/blue glow shapes — decorative only, blurred
   and clipped by .about-closing's overflow:hidden so their off-edge
   offsets and drift animation can never cause horizontal scroll */
.about-closing-shape {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: aboutClosingGlow 12s ease-in-out infinite;
}

.about-closing-shape--1 {
  top: -120px;
  right: -140px;
  width: 460px;
  height: 460px;
  background: var(--color-secondary);
  opacity: 0.14;
}

.about-closing-shape--2 {
  bottom: -140px;
  right: 6%;
  width: 340px;
  height: 340px;
  background: var(--color-primary);
  opacity: 0.1;
  animation-delay: -6s;
}

@keyframes aboutClosingGlow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-18px, 16px) scale(1.08); }
}

.about-closing-inner {
  position: relative;
  z-index: 1;
}

.about-closing-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.75rem;
}

.about-closing-content {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.about-closing.is-visible .about-closing-content {
  opacity: 1;
  transform: translateY(0);
}

.about-closing-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin: 0 0 1rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.about-closing.is-visible .about-closing-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.about-closing-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--color-secondary);
  flex-shrink: 0;
}

.about-closing-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4.8vw, 2.6rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 1.25rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease) 0.1s, transform 0.6s var(--ease) 0.1s;
}

.about-closing.is-visible .about-closing-heading {
  opacity: 1;
  transform: translateY(0);
}

.about-closing-text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0 0 2rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease) 0.2s, transform 0.6s var(--ease) 0.2s;
}

.about-closing.is-visible .about-closing-text {
  opacity: 1;
  transform: translateY(0);
}

.about-closing-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease) 0.3s, transform 0.6s var(--ease) 0.3s;
}

.about-closing.is-visible .about-closing-actions {
  opacity: 1;
  transform: translateY(0);
}

/* --- Image: integrated frame (rounded + shadow), not a floating card —
   width:100%/height:auto keeps it at its true native proportions so
   nothing is ever cropped. Reveal is fade + translateY, same language
   as the text; hover-zoom is desktop-only (see 900px+ block). ---------- */
.about-closing-media {
  position: relative;
  width: 100%;
  max-width: 460px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease) 0.15s, transform 0.8s var(--ease) 0.15s;
}

.about-closing.is-visible .about-closing-media {
  opacity: 1;
  transform: translateY(0);
}

.about-closing-media-frame {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.about-closing-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

/* Fallback shown if the image fails to load */
.about-closing-image.about-closing-image--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  max-height: none;
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  text-align: center;
  padding: 2rem;
}

/* Small tasteful floating detail — icon only, no text/stat/claim — a
   gentle bob reuses Home's existing floatBadge keyframe (home.css) */
.about-closing-badge {
  position: absolute;
  bottom: -14px;
  left: -14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-secondary-dark);
  box-shadow: var(--shadow-md);
  animation: floatBadge 4.5s ease-in-out infinite;
}

.about-closing-badge svg {
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   ABOUT — S5: CARE CLOSER TO HOME — RESPONSIVE (600px+ for the CTA row,
   900px+ for the asymmetric text+image layout, matching the breakpoints
   used site-wide)
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .about-closing-actions {
    flex-direction: row;
    justify-content: center;
  }
}

@media (min-width: 900px) {
  .about-closing {
    padding-block: 6rem;
  }

  .about-closing-row {
    flex-direction: row;
    align-items: center;
    gap: 4.5rem;
  }

  .about-closing-content {
    flex: 1;
    margin-inline: 0;
    text-align: left;
  }

  .about-closing-eyebrow {
    justify-content: flex-start;
  }

  .about-closing-actions {
    justify-content: flex-start;
  }

  .about-closing-media {
    flex: 0.95;
    max-width: none;
  }

  .about-closing-image {
    max-height: 480px;
  }

  /* Gentle zoom on hover, desktop only — clipped by the frame above */
  .about-closing-media:hover .about-closing-image {
    transform: scale(1.05);
  }
}

@media (max-width: 768px) {
  .about-closing-actions .btn {
    width: 230px;
    min-width: 230px;
    height: 60px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .about-closing-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}


















/* =========================================================
   AROZEN CARE — FOOTER
   Moved here from an inline <style> block in index.html —
   markup, appearance and behavior are unchanged.
   Self-contained on purpose: every color/spacing/font token used below
   is a local custom property scoped to .site-footer (--f-*), not the
   :root tokens above, and no selector here is a bare element type
   (nav/ul/li/a) or reused from elsewhere in this file (.container,
   .btn, etc.) — so these rules can only ever match inside
   <footer class="site-footer">, and nothing else in this stylesheet can
   accidentally match, override, or be overridden by them.
   Mobile-first: single-column stack, comfortable padding, no fixed
   widths above ~320px so nothing can overflow at Galaxy S8+ (360px).
   Desktop (900px+, the same breakpoint used across the rest of the
   site): a horizontal 4-column grid — Brand, Services, Company,
   Contact — using minmax(0, Nfr) tracks so a long line of text (an
   email address, "Laboratory & Diagnostics") wraps inside its own
   column instead of forcing that column — and the whole grid — wider
   than the footer.
   ========================================================= */
.site-footer {
  --f-primary: #263B8F;
  --f-primary-dark: #161f4a;
  --f-secondary: #5BC7B0;
  --f-secondary-dark: #46a794;
  --f-accent: #F3A58C;
  --f-bg: #F7FAF8;
  --f-text: #171B2D;
  --f-text-light: #eef1fa;
  --f-text-muted: rgba(238, 241, 250, 0.7);
  --f-white: #ffffff;
  --f-border: rgba(255, 255, 255, 0.14);
  --f-font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --f-font-body: 'Inter', 'Segoe UI', sans-serif;
  --f-radius-sm: 10px;
  --f-radius-full: 999px;
  --f-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --f-container-width: 1240px;

  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--f-primary-dark) 0%, #1c2758 55%, var(--f-primary) 100%);
  color: var(--f-text-light);
  font-family: var(--f-font-body);
}

.site-footer,
.site-footer *,
.site-footer *::before,
.site-footer *::after {
  box-sizing: border-box;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

/* Subtle premium glow decoration — low-cost radial gradients, no
   filter/blur (which would create a containing-block trap for any
   fixed-position descendant elsewhere on the page) */
.site-footer-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(91, 199, 176, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(243, 165, 140, 0.12) 0%, transparent 45%);
}

/* Faint line-grid texture, matching the decorative language used in
   the hero/section backgrounds elsewhere on this page */
.site-footer-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(91, 199, 176, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 199, 176, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
}

.site-footer-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--f-container-width);
  margin-inline: auto;
  padding: 3rem 1.25rem 1.5rem;
}

/* --- Column grid: mobile-first single column --------------------------- */
.site-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--f-border);
}

/* FOOTER: soft scroll reveal. min-width:0 is the fix that keeps grid
   columns from blowing out on long content (unrelated to the reveal —
   see file header) and must stay regardless of the animation state. */
.footer-col {
  min-width: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--f-ease), transform 0.6s var(--f-ease);
}

.site-footer.is-visible .footer-col {
  opacity: 1;
  transform: translateY(0);
}

.footer-col:nth-child(1) { transition-delay: 0s; }
.footer-col:nth-child(2) { transition-delay: 0.08s; }
.footer-col:nth-child(3) { transition-delay: 0.16s; }
.footer-col:nth-child(4) { transition-delay: 0.24s; }

/* --- Brand column --------------------------------------------------------
   .footer-logo / .footer-logo-img / .footer-logo-text / .footer-logo-accent
   were previously duplicated here from home.css, which silently
   overrode home.css's footer-logo-img sizing on this page only (since
   about.css loads after home.css). Removed so this page matches every
   other page's footer via the single source of truth in home.css. */
.footer-tagline {
  max-width: 34ch;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--f-text-muted);
  margin: 0 0 1.4rem;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* FOOTER: 44x44 meets the standard minimum touch-target size */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--f-border);
  transition: background-color 0.25s var(--f-ease), border-color 0.25s var(--f-ease), transform 0.25s var(--f-ease), box-shadow 0.25s var(--f-ease);
}

.footer-social-link svg {
  width: 18px;
  height: 18px;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  background: var(--f-secondary);
  border-color: var(--f-secondary);
  color: var(--f-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(91, 199, 176, 0.3);
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--f-secondary);
  outline-offset: 3px;
}

/* --- Link columns (Services / Company) ----------------------------------- */
.footer-col-heading {
  font-family: var(--f-font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--f-white);
  margin: 0 0 1.1rem;
}

.footer-links li + li {
  margin-top: 0.75rem;
}

/* FOOTER: refined link hover — color shift + nudge, plus a thin
   underline that reveals via scaleX (cheap, GPU-friendly) */
.footer-links a {
  position: relative;
  display: inline-block;
  font-size: 0.9rem;
  color: var(--f-text-muted);
  transition: color 0.2s var(--f-ease), padding-left 0.2s var(--f-ease);
}

.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--f-secondary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--f-ease);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--f-secondary);
  padding-left: 0.25rem;
}

.footer-links a:hover::after,
.footer-links a:focus-visible::after {
  transform: scaleX(1);
}

.footer-links a:focus-visible {
  outline: 2px solid var(--f-secondary);
  outline-offset: 3px;
}

/* --- Contact column -------------------------------------------------------- */
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--f-text-muted);
}

.footer-contact li + li {
  margin-top: 0.85rem;
}

/* min-width:0 + overflow-wrap on the text side of each flex row so a
   long value (the email address in particular) wraps inside its
   column instead of forcing the row — and the grid track behind it —
   wider than intended */
.footer-contact a,
.footer-contact li > span {
  min-width: 0;
  overflow-wrap: break-word;
  transition: color 0.2s var(--f-ease);
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: var(--f-secondary);
}

.footer-contact a:focus-visible {
  outline: 2px solid var(--f-secondary);
  outline-offset: 3px;
}

.footer-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--f-secondary);
}

.footer-contact-icon svg {
  width: 16px;
  height: 16px;
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.4rem;
  padding: 0.65rem 1.3rem;
  background: var(--f-secondary);
  color: var(--f-primary-dark);
  font-family: var(--f-font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: var(--f-radius-full);
  transition: background-color 0.25s var(--f-ease), transform 0.25s var(--f-ease), box-shadow 0.25s var(--f-ease);
}

.footer-cta:hover,
.footer-cta:focus-visible {
  background: var(--f-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.footer-cta:focus-visible {
  outline: 2px solid var(--f-white);
  outline-offset: 3px;
}

/* --- Bottom bar: copyright + legal links, and the TechVahni credit ------- */
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.75rem;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--f-ease) 0.3s, transform 0.6s var(--f-ease) 0.3s;
}

.site-footer.is-visible .footer-bottom {
  opacity: 1;
  transform: translateY(0);
}

.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.footer-copyright {
  margin: 0;
  font-size: 0.82rem;
  color: var(--f-text-muted);
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
}

.footer-legal-links a {
  font-size: 0.82rem;
  color: var(--f-text-muted);
  transition: color 0.2s var(--f-ease);
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--f-secondary);
}

.footer-legal-links a:focus-visible {
  outline: 2px solid var(--f-secondary);
  outline-offset: 3px;
}

/* FOOTER: TechVahni credit — a small, professional line, not a second
   brand competing with Arozen Care. Slightly larger than before, still
   sized well below the footer's own heading text. Two restrained
   animations, both unchanged: a small continuous heartbeat on the heart
   icon, and a soft glow that only appears on hover/focus (rather than a
   constant shimmer loop, which would read as distracting for something
   this size that's visible on every page indefinitely). */
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem;
  border-radius: var(--f-radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--f-border);
  font-family: var(--f-font-heading);
  font-size: 0.92rem;
  transition: background-color 0.25s var(--f-ease), border-color 0.25s var(--f-ease), transform 0.25s var(--f-ease), box-shadow 0.25s var(--f-ease);
}

.footer-credit-heart {
  display: inline-block;
  font-size: 1.05rem;
  animation: footerHeartBeat 1.8s ease-in-out infinite;
}

.footer-credit-text {
  color: var(--f-text-muted);
  font-weight: 500;
}

.footer-credit-brand {
  font-weight: 700;
  font-size: 1rem;
  background: linear-gradient(90deg, var(--f-secondary) 0%, var(--f-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glow appears only on hover/focus — kept out of the constant-animation
   path so the credit stays calm at rest */
.footer-credit:hover,
.footer-credit:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--f-secondary);
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(91, 199, 176, 0.35);
}

.footer-credit:focus-visible {
  outline: 2px solid var(--f-secondary);
  outline-offset: 3px;
}

@keyframes footerHeartBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — DESKTOP (900px+, matching the breakpoint used site-wide)
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .site-footer-inner {
    padding: 4.5rem 2rem 2rem;
  }

  .site-footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .footer-tagline {
    max-width: 30ch;
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .footer-legal {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY — reduced motion (self-contained; the global reset near
   the top of this file already covers `*`, so this scoped copy is
   redundant there — it's kept so the footer block stays independently
   correct if it's ever lifted back out on its own)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-footer *,
  .site-footer *::before,
  .site-footer *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}