/* MILESTONE TITLE CROP START */
/* Hide the internal 'life Our Milestones' title inside the PNG only */
.graphic-crop{
  overflow: hidden;
}

.graphic-crop img{
  object-fit: cover;
  object-position: center 92%;
  transform: scale(1.1);
}
/* MILESTONE TITLE CROP END */


/* ECOSYSTEM TRIANGLE START */
.ecosystem-triangle{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "top top"
    "left right";
  gap: 18px 22px;
  margin-top: 14px;
}

.eco-card{
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.eco-top{ grid-area: top; justify-self: center; width: min(720px, 100%); }
.eco-left{ grid-area: left; }
.eco-right{ grid-area: right; }

.eco-head{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}

.eco-ico{
  font-size: 1.25rem;
  line-height: 1;
}

.eco-card h3{
  margin:0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
}

.eco-card p{
  margin: 0;
  color: rgba(15,23,42,0.78);
  line-height: 1.55;
  font-size: 1.02rem;
}

/* Decorative connecting lines */
.eco-lines{
  position:absolute;
  inset: 0;
  pointer-events:none;
}

.eco-line{
  position:absolute;
  height: 2px;
  background: rgba(11, 91, 211, 0.16);
  border-radius: 2px;
}

/* top -> left */
.eco-line.l1{
  left: 22%;
  top: 45%;
  width: 34%;
  transform: rotate(22deg);
  transform-origin: left center;
}

/* top -> right */
.eco-line.l2{
  right: 22%;
  top: 45%;
  width: 34%;
  transform: rotate(-22deg);
  transform-origin: right center;
}

/* left -> right */
.eco-line.l3{
  left: 18%;
  bottom: 14%;
  width: 64%;
}

@media (max-width: 900px){
  .eco-lines{ display:none; }
}

@media (max-width: 768px){
  .ecosystem-triangle{
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "left"
      "right";
  }
  .eco-top{ justify-self: stretch; width: 100%; }
}
/* ECOSYSTEM TRIANGLE END */


/* MILESTONE V2 START */
.milestone-crop{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #ffffff;
}

/* Crop out the original header area inside the image */
.milestone-crop img{
  display:block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center 92%;
  transform: scale(1.12);
}

.milestone-title{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 10px 28px rgba(15,23,42,0.10);
  backdrop-filter: blur(8px);
  font-weight: 800;
  color:#0f172a;
  letter-spacing: .2px;
}

@media (max-width: 900px){
  .milestone-crop img{ height: 280px; }
}
/* MILESTONE V2 END */


/* ECO ICON V2 START */
.eco-card h3{
  margin:0 0 10px 0;
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 800;
  color:#0f172a;
}

.eco-card h3 .eco-icon{
  color:#0b5bd3;
  flex:0 0 auto;
}

.eco-card h3 span{
  display:inline-block;
}
/* ECO ICON V2 END */

/* ECOSYSTEM ICONS START */
.eco-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.eco-icon{color:#0b5bd3;flex:0 0 auto;}
/* ECOSYSTEM ICONS END */

/* MILESTONE GRAPHIC OVERLAY START */
/* New milestone image already has clean header removed; show it naturally */
.graphic-crop{
  position: relative;
  overflow: hidden;
}
.graphic-crop img{
  object-fit: contain;
  object-position: center;
  transform: none;
}
/* Keep overlay title if present */
/* MILESTONE GRAPHIC OVERLAY END */

.journey-visual { margin-top: 32px; }

/* OUR JOURNEY (IMAGE-BASED) */
.journey-figure{
  margin: 0;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
}

.journey-figure img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

@media (max-width: 768px){
  .journey-visual{ margin-top: 18px; }
  .journey-figure{ padding: 10px; }
}

/* WHY SECTION TYPOGRAPHY */
/* The "Why" copy is intentionally longer; tighten typography for readability across breakpoints. */
.why-panel p{
  font-size: clamp(0.98rem, 0.35vw + 0.92rem, 1.06rem);
  line-height: 1.7;
  /* Let the copy align with the panel edge on wide screens. */
  max-width: 100%;
}

.why-panel p + p{
  margin-top: 12px;
}


/* =========================================================
   ABOUT PAGE TYPOGRAPHY NORMALIZATION (Option A)
   Goal: unify type scale + rhythm across Journey / Offers / Serve
   without changing global/homepage styles.
   ========================================================= */

.about-page .card.catalogue-feature .card-title{
  font-size: clamp(28px, 3.0vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--text-heading);
}

.about-page .card.catalogue-feature .card-text{
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: var(--lh-relaxed);
  color: rgba(0,0,0,.66);
  margin-top: var(--space-3);
  max-width: none;
}

/* Unify inner card body text + bullets with the same base size */
.about-page #offers .offer-list,
.about-page #offers .offer-note,
.about-page #offers .serve-card p{
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: var(--lh-relaxed);
}

/* Slightly stronger notes (was too faint vs other body copy) */
.about-page #offers .offer-note{
  color: rgba(0,0,0,.64);
}

/* Keep section vertical rhythm consistent */
.about-page #journey .milestones,
.about-page #offers .offers-grid,
.about-page #offers .serve-grid{
  margin-top: var(--space-7);
}


/* FORCE SINGLE LINE FOR INDIVIDUAL CLIENTS (DESKTOP) */
.about-page .serve-single-line{
  display:inline-block;
  white-space:nowrap;
}
@media (max-width: 768px){
  .about-page .serve-single-line{
    white-space:normal;
  }
}

/* Ensure Offers/Clients card titles match Our Journey title scale */
.about-page #offers .card.catalogue-feature .card-title{
  font-size: clamp(28px, 3.0vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* FINAL ALIGNMENT: Offers & Clients titles match Our Journey exactly */
.about-page #journey .card-title,
.about-page #offers .card-title{
  font-size: clamp(28px, 3.0vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}



/* Journey dot color variant: safe (desktop + mobile) */
#journey .milestone-dot{
  background: radial-gradient(90px 60px at 30% 30%, rgba(255,255,255,.14), rgba(255,255,255,0)),
              linear-gradient(180deg, var(--t10-navy) 0%, #071C33 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.26);
}
#journey .milestone-dot svg{ opacity: .95; }
#journey .milestone-year{ opacity: .95; }


/* Why section spacing rebalance (Approach steps removed to avoid duplication) */
#why.why-ops{
  padding-top: clamp(44px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 68px);
}


.why-ops-head{
    text-align: center;
  }
}


#why .why-ops-title{
    display: inline-block;
    white-space: nowrap;
    letter-spacing: -0.015em;
    max-width: 100%;
  }
}


/* About Us headline single-line + true centered (align breakpoint with desktop nav) */
@media (min-width: 981px){
  /* Let the headline center against the full container width */
  #why .why-ops-head{
    max-width: none;
  }
  #why .why-ops-title{
    display: inline-block;
    white-space: nowrap;
    letter-spacing: -0.015em;
  }
  /* Keep subtitle readable while remaining centered */
  #why .why-ops-subtitle{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* About hero image clean (no-border) */
.about-hero-media.hero-art-frame{
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 24px;
  overflow: hidden;
}

.about-hero-media.hero-art-frame img.hero-art{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}