/* About — page-specific layout and set pieces only. Every reusable component lives in base.css.
   Set pieces: the name story (Pert·inence + imm·ediacy = Pertimm) and the kinetic principles list.
   The "Since 1997" badge (.media-badge), the lit people cards (.person--lit) and the monograms
   (.monogram) are base components, placed here. */

/* ---------------------------------------------------------------- Hero */
.about-hero__media { position: relative; }
.about-hero__photo img { object-position: 50% 42%; }

/* "Since 1997": a .media-badge (base.css) laid over the image, overlapping the text column */
.about-since { left: calc(-1 * clamp(1.5rem, .5rem + 3vw, 4rem)); bottom: calc(2.4rem + clamp(1rem, .5rem + 1.5vw, 2rem)); }
@media (min-width: 900px) and (max-width: 1199px) {
  .about-since { left: -1.75rem; bottom: calc(2.4rem + .9rem); max-width: calc(100% + 1rem); }
}
@media (max-width: 899px) {
  .about-hero__photo { aspect-ratio: 3 / 2; }
  .about-hero__photo img { object-position: 50% 42%; }
  .about-since { left: .75rem; bottom: calc(2.4rem + .75rem); }
}
@media (max-width: 559px) {
  .about-hero__photo { aspect-ratio: 1; }
  .about-hero__photo img { object-position: 50% 40%; }
}
@media (max-width: 479px) {
  .about-hero .page-hero__actions { --cluster-gap: .6rem; }
  .about-hero .page-hero__actions .btn { flex: 1 1 auto; padding-inline: 1rem; }
}

/* ------------------------------------------------------------ About us */
.about-us__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-m); padding-bottom: var(--space-2xl); }
.about-us__eyebrow { grid-column: 1 / span 3; align-self: start; margin-top: .95em; }
.about-us__statement {
  grid-column: 4 / -1;
  font-size: clamp(1.75rem, 1.05rem + 2.6vw, 3.75rem); line-height: 1.08; letter-spacing: -.038em; font-weight: 460; color: var(--fg);
  max-width: 25ch; text-wrap: balance;
}
.about-us__statement em { font-weight: 330; letter-spacing: -.02em; }

.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.value { position: relative; display: grid; gap: .7rem; align-content: start; padding: var(--space-l) clamp(1rem, .4rem + 1.6vw, 2rem) .25rem; }
.value::before { content: ""; position: absolute; left: 0; top: -1px; width: 2.5rem; height: 1px; background: var(--spectrum); transition: width var(--dur-4) var(--ease-out); }
.value:hover::before { width: 100%; }
.value + .value { border-left: 1px solid var(--line); }
.value:first-child { padding-left: 0; }
.value + .value::before { left: -1px; }
.value__glyph { width: 3rem; height: 3rem; color: var(--fg-2); margin-bottom: .6rem; transition: color var(--dur-2); }
.value:hover .value__glyph { color: var(--fg); }
.value__title { font-size: var(--step-2); letter-spacing: -.024em; line-height: 1.12; }
.value__text { color: var(--fg-2); max-width: 30ch; }
@media (max-width: 899px) {
  .about-us__eyebrow, .about-us__statement { grid-column: 1 / -1; }
  .about-us__eyebrow { margin-top: 0; }
}
@media (max-width: 1079px) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-l); }
  .value:nth-child(3) { border-left: 0; padding-left: 0; }
  .value:nth-child(n+3) { border-top: 1px solid var(--line); }
  .value:nth-child(3)::before { left: 0; }
}
@media (max-width: 559px) {
  .values { grid-template-columns: 1fr; row-gap: 0; }
  .value, .value:nth-child(3), .value + .value { border-left: 0; padding: var(--space-m) 0; }
  .value + .value { border-top: 1px solid var(--line); }
  .value + .value::before { left: 0; }
  .value__glyph { width: 2.6rem; height: 2.6rem; margin-bottom: .25rem; }
}

/* -------------------------------------------------------------- People */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 1.4rem + 1.8vw, 3.25rem) clamp(1rem, .5rem + 1.5vw, 2rem); }
@media (max-width: 1079px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Portrait cards: .person.person--lit, monograms: .monogram (both base.css) */

/* ------------------------------------------------------------ At a glance */
.about-glance__title { font-size: var(--step-1); font-weight: 540; letter-spacing: -.012em; color: var(--fg); margin-bottom: 1.25rem; }
.about-stats .stat { padding-top: 2rem; }
.about-stats .stat__value { font-size: clamp(3.25rem, 1.8rem + 5vw, 7rem); }
.about-stats .stat__unit { font-weight: 300; margin-left: .02em; }
@media (min-width: 720px) and (max-width: 1079px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .about-stats .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .about-stats .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------- Mission */
.about-mission__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); margin-bottom: var(--space-2xl); }
.about-mission__intro { grid-column: 1 / span 6; display: grid; gap: var(--space-s); align-content: start; }
.about-mission__title { font-size: var(--step-4); line-height: .98; letter-spacing: var(--track-h2); font-weight: 530; max-width: 13ch; }
.about-mission__title em { font-weight: 330; }
.about-mission__copy { grid-column: 8 / -1; align-self: end; display: grid; gap: 1rem; color: var(--fg-2); max-width: 44ch; }
.about-mission__copy .body-l { color: var(--fg); }
@media (max-width: 899px) { .about-mission__intro, .about-mission__copy { grid-column: 1 / -1; } }

/* Name story — PERT(inence) + IMM(ediacy) = Pertimm.
   Defaults are the finished composition (no JS, reduced motion). about.js adds
   .is-live and drives --d (dim the rest), --m (merge), --t (travel light), --g (underline). */
.namestory { --cut: 28px; --d: 1; --m: 1; --t: 0; --g: 1; padding: clamp(1.75rem, 1rem + 3.4vw, 4.5rem); }
.namestory__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--space-2xl); align-items: center; }
.namestory__visual { container-type: inline-size; min-width: 0; }
.namestory__stage {
  position: relative;
  display: grid; grid-template-columns: .5em auto; justify-content: start; align-items: baseline; column-gap: .1em;
  font-size: 13.2cqi; line-height: 1.04; letter-spacing: -.052em; font-weight: 520; font-stretch: 100%;
  color: #f0edf7;
}
.namestory__op { font-size: .55em; font-weight: 260; color: #8b90a7; text-align: left; line-height: 1; letter-spacing: 0; }
.namestory__op--eq { opacity: calc(.2 + var(--m) * .8); color: #c8b8ff; }
.namestory__word { justify-self: start; white-space: nowrap; }
.namestory__lit {
  display: inline-block; color: #fff;
  text-shadow: 0 0 .3em rgb(166 140 255 / calc(var(--d) * .6)), 0 0 .9em rgb(228 156 242 / calc(var(--d) * .28));
}
.namestory.is-live .namestory__lit { opacity: calc(1 - var(--m) * .3); }
/* "immediacy" is indented by the exact width of "Pert", so each lit fragment sits
   straight above its place in "Pertimm" and drops without crossing other letters */
.namestory__indent { display: inline-block; visibility: hidden; }
.namestory__rest { color: #8b90a7; opacity: calc(1 - var(--d) * .62); }
.namestory__result { position: relative; }
.namestory__result::after {
  content: ""; position: absolute; left: .02em; right: .04em; bottom: .02em; height: 2px;
  background: var(--spectrum); box-shadow: 0 0 14px rgb(166 140 255 / .7);
  transform: scaleX(var(--g)); transform-origin: 0 50%; opacity: var(--g);
}
.namestory__to {
  display: inline-block; color: #fff;
  transform: translate3d(calc(var(--fx, 0px) * (1 - var(--m))), calc(var(--fy, 0px) * (1 - var(--m))), 0);
  text-shadow: 0 0 .25em rgb(200 184 255 / calc(.35 + var(--t) * .5)), 0 0 .8em rgb(228 156 242 / calc(.12 + var(--t) * .4));
  will-change: transform;
}
.namestory.is-measuring .namestory__to { transform: none !important; }
.namestory__caption { margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: var(--step--2); color: var(--fg-3); }
.namestory__caption span { color: var(--fg-2); font-style: italic; font-family: var(--font-serif); font-size: 1.1em; }
.namestory__copy { display: grid; gap: 1rem; align-content: center; color: var(--fg-2); }
.namestory__eyebrow { font-size: var(--step--1); font-weight: 540; color: var(--fg-3); }
.namestory__title { font-size: var(--step-3); line-height: 1.06; letter-spacing: var(--track-h3); }
.namestory__title em { font-weight: 340; }
.namestory__key { color: var(--fg); background: linear-gradient(90deg, var(--orchid), var(--iris), var(--glacier)) 0 100% / 100% 1px no-repeat; padding-bottom: .05em; }
@media (max-width: 1199px) {
  .namestory__grid { grid-template-columns: 1fr; }
  .namestory__stage { font-size: min(13.2cqi, 7.25rem); }
  .namestory__copy { max-width: 62ch; }
}
@media (max-width: 559px) {
  .namestory { padding: 1.5rem 1.25rem 1.75rem; }
}

/* --------------------------------------------------------- Commitments */
.about-commit__intro { display: grid; gap: .6rem; justify-items: start; }
.commitment { gap: .9rem; }
.commitment__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.commitment__num {
  font-size: var(--step-3); font-weight: 250; font-stretch: 118%; line-height: .9; letter-spacing: -.04em;
  background: var(--text-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.commitment .card__text { max-width: 38ch; }

/* ---------------------------------------------------------- Principles */
/* Kinetic list: the row nearest the reading line widens (Mona Sans width axis),
   gains weight and lights its rule. Static and even under reduced motion / no JS. */
.principles { border-top: 1px solid var(--line-2); container-type: inline-size; }
.principle {
  --k: 1;
  position: relative; display: grid;
  grid-template-columns: clamp(3rem, 1.8rem + 3.2vw, 6.25rem) minmax(0, 1fr) minmax(0, 22rem);
  column-gap: var(--space-l); align-items: center;
  padding-block: clamp(1.1rem, .7rem + 1.4vw, 2.1rem);
  border-bottom: 1px solid var(--line);
}
.principle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--spectrum); box-shadow: 0 0 10px rgb(166 140 255 / .5);
  transform: scaleX(0); transform-origin: 0 50%;
}
.principle__num {
  align-self: center; width: fit-content;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.75rem); font-weight: 250; font-stretch: 118%; line-height: 1; letter-spacing: -.04em;
  background: var(--text-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.principle__word {
  font-size: min(8.4cqi, 7.5rem); line-height: .96; letter-spacing: -.05em;
  font-weight: 540; font-stretch: 100%; white-space: nowrap; color: var(--fg);
}
.principle__text { color: var(--fg-2); font-size: var(--step-1); line-height: 1.45; max-width: 30ch; }

.principles.is-live .principle__word {
  font-stretch: calc(84% + var(--k) * 30%);
  font-weight: calc(300 + var(--k) * 330);
  color: var(--fg-3);
  transition: color var(--dur-2) var(--ease-out);
}
.principles.is-live .principle::after { transform: scaleX(var(--k)); }
.principles.is-live .principle.is-active .principle__word { color: var(--fg); }
.principles.is-live .principle__text { transition: color var(--dur-2); }
.principles.is-live .principle:not(.is-active) .principle__text { color: var(--fg-3); }

/* Below 1200px the description moves under the word, which then gets the full width */
@media (max-width: 1199px) {
  .principle { grid-template-columns: clamp(2.5rem, 1.6rem + 3vw, 5rem) minmax(0, 1fr); row-gap: .5rem; column-gap: clamp(.9rem, .5rem + 1.5vw, 1.75rem); align-items: baseline; }
  .principle__text { grid-column: 2; max-width: 44ch; }
  .principle__word { font-size: min(11.5cqi, 7rem); }
}
@media (max-width: 639px) {
  .principle__word { font-size: 13.5cqi; }
  .principle__text { font-size: var(--step-0); }
}

/* ----------------------------------------------------------- Ecosystem */
.about-eco__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--space-m); align-items: center; }
.about-eco__copy { grid-column: 1 / span 5; display: grid; gap: var(--space-s); justify-items: start; color: var(--fg-2); }
.about-eco__title { font-size: var(--step-3); line-height: 1.06; letter-spacing: var(--track-h3); max-width: 16ch; }
.about-eco__title em { font-weight: 340; }
.about-eco__copy p:not(.eyebrow) { max-width: 44ch; }
.about-eco__logos { grid-column: 6 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-l) var(--space-l); align-items: flex-end; }
.about-eco__label { font-size: var(--step--2); color: var(--fg-3); margin-bottom: .7rem; max-width: 26ch; line-height: 1.4; }
.about-eco__row > li { min-width: 8.5rem; min-height: 7.25rem; }
.about-eco__row > .about-eco__frenchtech { --partner-h: 5.25rem; padding-inline: 2rem; position: relative; }
.about-eco__frenchtech::after {   /* the badge catches the light */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgb(166 140 255 / .45), 0 18px 50px -24px rgb(166 140 255 / .7);
}
@media (max-width: 1199px) {
  .about-eco__copy, .about-eco__logos { grid-column: 1 / -1; }
  .about-eco__logos { justify-content: flex-start; }
}
@media (max-width: 519px) {
  .about-eco__row > li { min-width: 0; flex: 1 1 6.5rem; padding: .8rem 1rem; min-height: 6rem; }
  .about-eco__group:not(.about-eco__group--lead) { width: 100%; }
  .about-eco__row img { max-width: 100%; --partner-h: 3.4rem; }
}