/* page/about.css — page-scoped styling for about.html only.
   Composes tokens + classes from components/styles.css and home/home-flagship.css
   (R-04/R-05) — no shared file is edited to make this page work. Loads LAST.
   .feat-mast / .feat-mast__* is shared with page/features.css's masthead pattern;
   duplicated here (not imported) since each page file is self-contained per R-11. */

/* ---------------- Masthead ---------------- */
.feat-mast { padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(32px, 5vw, 56px); }
.feat-mast__inner { max-width: var(--content); text-align: center; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.feat-mast .kicker { justify-content: center; }
.feat-mast__title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(32px, 5vw, 52px); line-height: 1.08; color: var(--primary);
  margin: 10px 0 18px; text-wrap: balance;
}
.feat-mast__sub { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: var(--text); max-width: 62ch; margin: 0 auto; }
.feat-mast__cta { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* ---------------- Team photo band ---------------- */
.about-photo {
  border-radius: var(--r-frame); overflow: hidden; aspect-ratio: 16 / 7.5;
  background: var(--surface-2, #f4f1f3);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .about-photo { aspect-ratio: 4 / 5; } }

/* ---------------- Our story: alternating two-column editorial rows ----------------
   A distinct rhythm from the checklist/bento patterns used elsewhere (R-13) — plain
   heading + paragraph pairs that flip sides, echoing the live page's own layout. */
.story { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px); }
.story__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.story__row--reverse .story__head { order: 2; }
.story__row--reverse .story__body { order: 1; }
.story__head {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; color: var(--primary); margin: 0;
}
.story__body { font-size: 15.5px; line-height: 1.7; color: var(--text); margin: 0; }

@media (max-width: 760px) {
  .story__row, .story__row--reverse { grid-template-columns: 1fr; }
  .story__row--reverse .story__head, .story__row--reverse .story__body { order: initial; }
}

/* ---------------- Founder quote: portrait + pull-quote ----------------
   Reuses .quote__text/.quote__name/.quote__role typography from home-flagship.css
   (the testimonials carousel) so the voice reads identically site-wide; the layout
   itself (large photo beside the quote, no avatar/carousel chrome) is page-specific. */
.founder-quote { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.founder-quote__media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-2, #f4f1f3); }
.founder-quote__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-quote__content .quote__text { font-size: clamp(18px, 2vw, 22px); margin-bottom: 20px; }
.founder-quote__content .quote__name { margin: 0; }
.founder-quote__content .quote__role { margin: 2px 0 0; }

@media (max-width: 760px) {
  .founder-quote { grid-template-columns: 1fr; }
  .founder-quote__media { aspect-ratio: 16 / 10; max-width: 360px; }
}

/* ---------------- Meet the team ---------------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 22px; }
.team-card { display: flex; flex-direction: column; }
.team-card__photo {
  border-radius: var(--r-card); overflow: hidden; aspect-ratio: 1 / 1;
  background: var(--surface-2, #f4f1f3); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--primary); margin: 14px 0 2px; }
.team-card__role { font-size: 13px; line-height: 1.4; color: var(--text); margin: 0 0 8px; }
.team-card__social {
  width: 30px; height: 30px; border-radius: var(--r-pill); flex: none;
  margin-top: auto; /* bottom-align icons across a row when a role wraps to two lines */
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); border: 1px solid var(--line); transition: color 0.15s ease, border-color 0.15s ease;
}
.team-card__social svg { width: 15px; height: 15px; }
.team-card__social:hover, .team-card__social:focus-visible { color: var(--primary); border-color: var(--primary); }

@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } }

@media (prefers-reduced-motion: reduce) {
  .feat-mast__title, .feat-mast__sub, .team-card__social { transition: none; }
}

/* .why-block replaces home-spotlight.css .spot-block, which this page does not load */
.why-block { margin-top: var(--sec-block-gap); }

/* ============================================================
   WHY NOW · continuous carousel — page-scoped
   The shared cards.js treatment 06 still renders its five urgency cards into
   [data-strip]; this layer re-reads that strip as a marquee TRACK inside the
   .why-marq rail, and the enhancer in page/about.js clones the card set once so
   a translateX(0 -> -50%) keyframe loops seamlessly. Same pattern as
   components/logo-marquee.css. components/cards.* is never touched.

   Spacing moves off flex `gap` onto a per-card margin-right: with a flex gap,
   half the duplicated track is one set plus HALF a gap, so the wrap would jump
   ~9px every loop. Per-card margin makes -50% land exactly one set on.
   ============================================================ */
.why-marq {
  --wm-gap: 18px;
  --wm-duration: 38s;
  /* fade width in px, not %: the rail is only ~342px at 390, where a
     percentage fade would wash a fifth off each side of a 320px card */
  --wm-fade: 72px;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--wm-fade), #000 calc(100% - var(--wm-fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--wm-fade), #000 calc(100% - var(--wm-fade)), transparent 100%);
}

/* the shared strip becomes the TRACK — no scrolling, natural width */
.why-marq .cds-strip {
  overflow: visible;
  width: max-content;
  gap: 0;
  /* vertical room so --shadow-card / --shadow-hover and the -3px hover lift
     live INSIDE the rail's overflow:hidden instead of being sliced */
  padding: 10px 0 26px;
  will-change: transform;
  animation: wm-scroll var(--wm-duration) linear infinite;
}
.why-marq .cds-strip__card { margin-right: var(--wm-gap); }

/* Narrow viewports: the component card is a fixed 320px, which on a ~342px rail
   is wider than what's left after the edge fades — no card would ever be fully
   readable as it passed. Trim it so a whole card always fits inside the unfaded
   window. (Scoped to the carousel; the component's strip elsewhere keeps 320px.) */
@media (max-width: 720px) {
  .why-marq { --wm-fade: 24px; --wm-gap: 14px; }
  .why-marq .cds-strip__card { flex-basis: min(272px, 76vw); padding: 22px; }
}

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

/* pause on hover (fine pointer), and whenever a card inside has focus */
@media (hover: hover) and (pointer: fine) {
  .why-marq:hover .cds-strip { animation-play-state: paused; }
}
.why-marq:focus-within .cds-strip { animation-play-state: paused; }
/* perf: freeze while the rail is scrolled off-screen (IntersectionObserver in
   page/about.js) — same treatment as the hero marquees above */
.why-marq.is-idle .cds-strip { animation-play-state: paused; }

/* ---- No-motion fallback: a laid-out grid, NOT a scroll strip ----
   Reworked 2026-09-02 (directed). This used to hand the rail back to the
   component's scroll-snap strip — overflow-x:auto + scroll-snap — which is
   what a reduced-motion visitor actually saw: five cards behind a horizontal
   scroll with no arrows, no visible scrollbar and no hint that four more
   existed past the edge fade. That is the "horizontal scroll" reported on
   this section; the carousel itself was running correctly for everyone else.

   R-06 rules out simply forcing the marquee on here — an endlessly
   auto-scrolling track is exactly the ambient drift the rule exists to
   suppress, and it is the one pattern that can make a vestibular-sensitive
   visitor unable to read a page. But R-06 also asks the no-motion path to
   still COMMUNICATE, and a hidden-affordance scroller does not. So the
   fallback now wraps every card into view at once: nothing moves, nothing
   scrolls sideways, and all five urgency cards are readable. The edge mask
   comes off too — a fade that is not hiding travelling content just dims
   the first and last card for no reason.

   Two triggers, same result: the media query, and the [data-wm-static] flag
   page/about.js sets when the clone step could not run. The declarations are
   spelled twice because CSS cannot add an attribute from inside a media
   query — keep the two blocks in step. */
.why-marq[data-wm-static] {
  overflow: visible;
  -webkit-mask-image: none;
          mask-image: none;
}
.why-marq[data-wm-static] .cds-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--wm-gap);
  width: auto;
  overflow-x: visible;
  scroll-snap-type: none;
  padding: 6px 0 8px;
  will-change: auto;
  animation: none !important;
  transform: none !important;
}
.why-marq[data-wm-static] .cds-strip__card {
  flex: initial;
  margin-right: 0;
  scroll-snap-align: none;
}
/* the duplicate set exists only to make the loop seamless — in a grid it
   would just print every card twice */
.why-marq[data-wm-static] .cds-strip > [data-wm-clone] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .why-marq {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .why-marq .cds-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: var(--wm-gap);
    width: auto;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 6px 0 8px;
    will-change: auto;
    animation: none !important;
    transform: none !important;
  }
  .why-marq .cds-strip__card { flex: initial; margin-right: 0; scroll-snap-align: none; }
  .why-marq .cds-strip > [data-wm-clone] { display: none; }
}