/* ============================================================================
   POOOL UI — about.css (Layer 4: page styles for POOOL About.html)
   Page-specific only: about hero + collage, mission split, story timeline,
   principles grid, team grid. Everything reusable lives in components.css —
   do not restyle components here.
   ============================================================================ */

/* ── About hero ───────────────────────────────────────────────────────── */
.abt-hero { padding: 84px 0 28px; position: relative; overflow: hidden; }
.abt-hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.abt-hero h1 { font-size: clamp(36px, 4.8vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; color: var(--fg-heading-2); margin: 18px 0 16px; max-width: 15ch; }
.abt-hero h1 .hl { color: var(--brand-blue); }
.abt-hero__p { font-size: 18px; color: var(--fg-secondary); line-height: 1.6; margin: 0 0 26px; max-width: 46ch; }
.abt-hero__facts { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; color: var(--fg-muted); }
.abt-hero__facts b { color: var(--fg-heading-2); font-weight: 800; margin-right: 5px; }

/* Collage: villa photo + commodity inset + floating yield chip */
.abt-collage { position: relative; min-height: 340px; }
.abt-collage__main { width: 100%; height: 360px; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-property-hover); display: block; }
.abt-collage__small { position: absolute; left: -26px; bottom: -24px; width: 150px; height: 116px; object-fit: cover; border-radius: 18px; border: 5px solid #fff; box-shadow: 0 14px 36px rgba(0,0,0,.16); }
.abt-collage__chip { position: absolute; top: 22px; right: -14px; display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: var(--radius-pill); box-shadow: 0 8px 26px rgba(0,0,0,.14); padding: 9px 14px; font-size: 13px; font-weight: 700; color: var(--fg-heading-2); animation: abtFloat 5s ease-in-out infinite; }
.abt-collage__chip .dot-mint { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green-neon); display: inline-block; }
@keyframes abtFloat { 50% { transform: translateY(-8px); } }

/* ── Mission split ────────────────────────────────────────────────────── */
.abt-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.abt-mission .s-title { margin-top: 14px; }
.abt-mission p { font-size: 16.5px; line-height: 1.65; color: var(--fg-secondary); margin: 0 0 18px; }
.abt-mission p:last-child { margin-bottom: 0; }

/* ── Story timeline ───────────────────────────────────────────────────── */
.abt-tl { position: relative; max-width: 820px; margin: 0 auto; display: grid; gap: 18px; }
.abt-tl::before { content: ''; position: absolute; left: 118px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--brand-blue), var(--brand-green-neon)); opacity: .25; border-radius: 2px; }
.abt-tl__row { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 46px; align-items: start; }
.abt-tl__row::before { content: ''; position: absolute; left: 113px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-green-neon); border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,255,.18); }
.abt-tl__year { font-size: 13px; font-weight: 800; color: var(--brand-blue); text-align: right; padding-top: 22px; white-space: nowrap; }
.abt-tl__card { background: #fff; border-radius: 20px; box-shadow: var(--shadow-property); padding: 22px 24px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.abt-tl__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-property-hover); }
.abt-tl__card h3 { font-size: 17px; font-weight: 800; color: var(--fg-heading-2); margin: 0 0 8px; letter-spacing: -.01em; }
.abt-tl__card p { font-size: 15px; line-height: 1.6; color: var(--fg-secondary); margin: 0; }

/* ── Principles grid ──────────────────────────────────────────────────── */
.abt-principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.abt-principle { background: #fff; border-radius: 20px; box-shadow: var(--shadow-property); padding: 26px 26px 28px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.abt-principle:hover { transform: translateY(-6px); box-shadow: var(--shadow-property-hover); }
.abt-principle__ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: var(--brand-blue); color: var(--brand-green-mint); margin-bottom: 16px; }
.abt-principle__ic svg { width: 22px; height: 22px; }
.abt-principle h3 { font-size: 18px; font-weight: 800; color: var(--fg-heading-2); margin: 0 0 8px; letter-spacing: -.01em; }
.abt-principle p { font-size: 15px; line-height: 1.6; color: var(--fg-secondary); margin: 0; }

/* ── Team grid ────────────────────────────────────────────────────────── */
.abt-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.abt-tcard { background: #fff; border-radius: 20px; box-shadow: var(--shadow-property); padding: 26px; text-align: center; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.abt-tcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-property-hover); }
.abt-ava { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; font-size: 19px; font-weight: 800; letter-spacing: .02em; margin-bottom: 14px; background: var(--brand-blue); color: var(--brand-green-mint); }
.abt-tcard:nth-child(3n+2) .abt-ava { background: var(--brand-green-mint); color: var(--brand-blue); }
.abt-tcard:nth-child(3n) .abt-ava { background: var(--brand-dark-blue); color: var(--brand-green-mint); }
.abt-tcard__n { font-size: 16.5px; font-weight: 800; color: var(--fg-heading-2); }
.abt-tcard__r { font-size: 13.5px; font-weight: 700; color: var(--brand-blue); margin-top: 3px; }
.abt-tcard__d { font-size: 13.5px; color: var(--fg-muted); margin-top: 7px; }
.abt-hiring { text-align: center; font-size: 14.5px; color: var(--fg-muted); margin: 34px 0 0; }
.abt-hiring a { color: var(--brand-blue); font-weight: 700; text-decoration: none; }
.abt-hiring a:hover { text-decoration: underline; }

/* ── Background rhythm: hero (glow) → mission (white) → stats (halo)
     → story (tint) → principles (white) → team (tint) → CTA → footer ──── */
.abt-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(640px 320px at 8% 0%, rgba(0,0,255,.06), transparent 70%),
  radial-gradient(720px 380px at 94% 6%, rgba(3,255,136,.09), transparent 70%); }
#story, #team { background: linear-gradient(180deg, rgba(247,248,252,0) 0%, #F7F8FC 110px, #F7F8FC calc(100% - 110px), rgba(247,248,252,0) 100%); }
.statwrap { position: relative; }
.statwrap::before { content: ''; position: absolute; inset: -70px 0; background: radial-gradient(52% 72% at 50% 50%, rgba(0,0,255,.05), transparent 72%); pointer-events: none; }
.statwrap .sband { z-index: 1; }

/* ── Motion & responsive ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .abt-collage__chip { animation: none; }
}
@media (max-width: 980px) {
  .abt-team { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .abt-hero__grid, .abt-mission { grid-template-columns: 1fr; gap: 36px; }
  .abt-collage { margin-left: 26px; margin-right: 14px; }
}
@media (max-width: 720px) {
  .abt-hero { padding-top: 56px; }
  .abt-principles { grid-template-columns: 1fr; }
  .abt-team { grid-template-columns: 1fr; }
  .abt-tl::before, .abt-tl__row::before { display: none; }
  .abt-tl__row { grid-template-columns: 1fr; gap: 8px; }
  .abt-tl__year { text-align: left; padding-top: 0; }
}

/* Card grammar: transparent border for forced-colors (see components.css). */
.abt-tcard { border: 1px solid transparent; }