/* ============================================================
   PALADIO — About page (builds on styles.css tokens)
   ============================================================ */

/* hero — full-bleed video with overlaid headline */
.about-hero {
  position:relative; overflow:hidden;
  min-height:clamp(640px, 94vh, 1040px);
  display:flex; align-items:flex-end;
  padding-top:150px; padding-bottom:clamp(56px,9vh,116px);
  background:var(--dark);
}
.about-hero .ah-bg {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 44%;
  transform:scale(1.28);            /* closeup */
  will-change:transform;
}
.about-hero .ah-scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(11,12,14,.60) 0%,
      rgba(11,12,14,.12) 24%,
      rgba(11,12,14,.08) 48%,
      rgba(11,12,14,.55) 78%,
      rgba(11,12,14,.93) 100%);
}
.about-hero .ah-inner { position:relative; z-index:2; width:100%; }
.about-hero .eyebrow { color:var(--dark-ink-300); }
.about-hero .eyebrow::before { background:var(--accent-on-dark, #9d8bff); }
.about-hero h1 { max-width:16ch; margin-top:22px; color:var(--on-dark); text-shadow:0 2px 40px rgba(0,0,0,.35); }
.about-hero h1 .it { font-style:italic; font-weight:500; color:var(--dark-ink-300); }
.about-hero .lead { margin-top:26px; max-width:46ch; color:var(--dark-ink-300); }

/* nav over dark hero (about page) — light text until scrolled */
.nav.over-dark:not(.scrolled) .pnav-mid a,
.nav.over-dark:not(.scrolled) .brand-wm { color:var(--on-dark); }
.nav.over-dark:not(.scrolled) .pnav-mid a:hover { color:#fff; }
.nav.over-dark:not(.scrolled) .pnav-back { color:rgba(242,240,234,.72); }
.nav.over-dark:not(.scrolled) .pnav-back:hover { color:#fff; }
.nav.over-dark:not(.scrolled) .btn-primary { background:var(--on-dark); color:var(--ink); }
.nav.over-dark:not(.scrolled) .btn-primary:hover { background:var(--accent); color:#fff; }

/* narrative */
.narrative { border-top:1px solid var(--line); }
.narr-grid { display:grid; grid-template-columns: 0.8fr 1.2fr; gap:clamp(32px,6vw,90px); align-items:start; }
@media (max-width:860px){ .narr-grid{grid-template-columns:1fr; gap:28px} }
.narr-grid .nk { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500); padding-top:8px; }
.narr-body p { font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.4; letter-spacing:-0.015em; color:var(--ink-800); text-wrap:pretty; }
.narr-body p + p { margin-top:24px; color:var(--ink-700); }
.narr-body strong { font-weight:600; color:var(--ink); }

/* mission */
.mission { background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; }
.mission .eyebrow { justify-content:center; margin-bottom:26px; }
.mission h2 { font-size:clamp(2.2rem,5vw,4.2rem); letter-spacing:-0.04em; line-height:1.0; max-width:18ch; margin-inline:auto; }
.mission h2 .it { font-style:italic; font-weight:500; color:var(--ink-700); }

/* extended credentials (dark) */
.creds { background:var(--dark); color:var(--on-dark); }
.creds .ch { font-size:clamp(1.4rem,2.6vw,2.2rem); font-weight:500; letter-spacing:-0.025em; line-height:1.18; max-width:30ch; }
.creds .ch .it { color:var(--dark-ink-300); }
.creds-grid { margin-top:clamp(40px,5vh,60px); display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--dark-line); border-radius:18px; overflow:hidden; }
@media (max-width:900px){ .creds-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .creds-grid{grid-template-columns:repeat(2,1fr)} }
.cred {
  padding:clamp(22px,2.4vw,30px);
  border-right:1px solid var(--dark-line-soft);
  display:grid; grid-template-rows:auto auto 1fr; min-height:300px;
  background:rgba(242,240,234,.015);
}
.cred:last-child { border-right:none; }
@media (max-width:900px){
  .creds-grid .cred:nth-child(3n){border-right:none}
  .creds-grid .cred{border-bottom:1px solid var(--dark-line-soft)}
}
@media (max-width:560px){
  .creds-grid .cred:nth-child(3n){border-right:1px solid var(--dark-line-soft)}
  .creds-grid .cred:nth-child(2n){border-right:none}
}
.cred.is-cert { border:1px solid color-mix(in srgb, var(--accent) 45%, var(--dark-line)); background:linear-gradient(180deg,var(--accent-soft),transparent); }
.cred .clabel { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dark-ink-500); }
.cred .cval { margin-top:clamp(48px,6.5vw,96px); font-size:clamp(3rem,5vw,4.6rem); font-weight:600; letter-spacing:-0.05em; line-height:0.86; color:var(--accent-on-dark); }
.cred .cval .plus { color:var(--dark-ink-300); }
.cred.is-cert .cval { font-size:clamp(2.2rem,3.4vw,3rem); color:var(--on-dark); align-self:start; }
.cred.is-cert .cval b { color:var(--accent-on-dark); font-weight:600; display:block; font-size:0.62em; letter-spacing:0; }
.cred .cfoot { align-self:end; margin-top:24px; }
.cred .cft { font-size:16px; font-weight:600; letter-spacing:-0.02em; color:var(--on-dark); }
.cred .cfd { font-size:13px; color:var(--dark-ink-500); margin-top:6px; line-height:1.35; font-family:var(--mono); }

/* team */
.team .sec-head { text-align:center; margin-inline:auto; }
.team .sec-head .eyebrow { justify-content:center; }
.team-grid { margin-top:clamp(44px,6vh,72px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); max-width:1040px; margin-inline:auto; }
@media (max-width:820px){ .team-grid{grid-template-columns:1fr; max-width:420px} }
.member { display:flex; flex-direction:column; }
.member .photo { position:relative; aspect-ratio:1/1.12; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(160deg,var(--paper-2),var(--accent-soft)); }
.member .photo img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(0.12) contrast(1.02); }
.member .photo .ph-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:clamp(2.4rem,5vw,3.6rem); font-weight:600; letter-spacing:-0.04em; color:var(--accent); background:linear-gradient(160deg,var(--paper-2),var(--accent-soft-2)); }
.member .mname { font-size:clamp(1.25rem,1.8vw,1.55rem); font-weight:600; letter-spacing:-0.025em; margin-top:22px; }
.member .mrole { font-family:var(--mono); font-size:13px; letter-spacing:.03em; color:var(--ink-500); margin-top:8px; }
.member .mtag { display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:100px; padding:6px 12px; align-self:flex-start; background:var(--accent-soft); }
.member .mtag i { width:7px; height:7px; border-radius:50%; background:var(--accent); }

/* differentiators */
.diffs { border-top:1px solid var(--line); }
.diffs .sec-head { max-width:60ch; }
.diffs .sec-head .eyebrow { margin-bottom:22px; }
.diffs .sec-head h2 { margin-bottom:18px; }
.diff-grid { margin-top:clamp(40px,5vh,60px); display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:820px){ .diff-grid{grid-template-columns:1fr} }
.diff-card {
  --dc: var(--accent);
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:20px; background:var(--surface);
  padding:clamp(28px,3vw,40px); display:flex; flex-direction:column;
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.diff-card:hover { border-color:color-mix(in srgb, var(--dc) 40%, var(--line)); transform:translateY(-3px); box-shadow:0 34px 70px -54px rgba(23,20,14,.5); }
.diff-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--dc); opacity:.85; }
.diff-card .dnum { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500); }
.diff-card .dnum i { width:9px; height:9px; border-radius:3px; background:var(--dc); flex:none; }
.diff-card .dtitle { font-size:clamp(1.45rem,2.2vw,2rem); font-weight:600; letter-spacing:-0.03em; margin-top:18px; line-height:1.04; }
.diff-card ul { list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.diff-card li { position:relative; padding-left:26px; font-size:clamp(1rem,1.15vw,1.12rem); line-height:1.4; color:var(--ink-700); letter-spacing:-0.01em; text-wrap:pretty; }
.diff-card li::before { content:""; position:absolute; left:3px; top:0.6em; width:7px; height:7px; border-radius:2px; background:var(--dc); }