/* ============================================================
   COXINHA EXPRESS — About page styles (extends styles.css)
   ============================================================ */

.nav-links a.current { color: var(--fg); background: var(--cx-glass-hi); }

/* ---- header ---- */
.about-head { position: relative; padding: 170px 0 40px; overflow: hidden; }
.about-head .bokeh.ah1 { width: 500px; height: 500px; left: -150px; top: -70px; background: radial-gradient(circle, var(--cx-orange), transparent 65%); }
.about-head .bokeh.ah2 { width: 460px; height: 460px; right: -120px; top: -10px; background: radial-gradient(circle, var(--cx-emerald), transparent 65%); }
.about-head .wrap { position: relative; z-index: 2; }
.about-head h1 { font-size: clamp(46px, 8.4vw, 108px); letter-spacing: -0.035em; line-height: 0.9; margin-top: 20px; max-width: 16ch; }
.about-head h1 .accent { background: linear-gradient(100deg, var(--cx-lead), var(--cx-lead-3) 55%, var(--cx-lead-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about-head .lede { margin-top: 24px; max-width: 560px; color: var(--fg-2); font-size: 19px; line-height: 1.6; }

/* ---- origin story (two-column editorial) ---- */
.story-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: center; }
@media (max-width: 940px){ .story-grid { grid-template-columns: 1fr; gap: 36px; } }
.story-copy .lead-quote { font-family: var(--cx-display); font-weight: 600; font-size: clamp(24px,2.6vw,34px); line-height: 1.18; letter-spacing: -0.02em; }
.story-copy .lead-quote em { font-style: normal; color: var(--cx-lead); }
.story-copy p { color: var(--fg-2); font-size: 16px; line-height: 1.7; margin-top: 18px; }
.story-copy p + p { margin-top: 14px; }

/* founders portrait stack */
.portrait { position: relative; aspect-ratio: 4/5; }
.portrait .ph { position: absolute; border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--cx-glass-border);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9); background: var(--cx-bg-2); }
.portrait .ph img { width: 100%; height: 100%; object-fit: cover; }
.portrait .ph.p1 { left: 0; top: 0; width: 62%; height: 70%; z-index: 2; }
.portrait .ph.p2 { right: 0; bottom: 0; width: 58%; height: 66%; z-index: 3; }
.portrait .pglow { position: absolute; inset: 10% 8%; border-radius: 50%; filter: blur(60px);
  background: radial-gradient(circle, color-mix(in srgb, var(--cx-lead) 40%, transparent), transparent 65%); opacity: calc(0.7*var(--cx-glow)); z-index: 1; }
.portrait .cap { position: absolute; left: 4%; bottom: 2%; z-index: 4; background: rgba(12,12,16,0.8); border: 1px solid var(--cx-glass-border);
  backdrop-filter: blur(12px); border-radius: var(--r-pill); padding: 8px 15px; font-size: 12.5px; }
.portrait .cap b { color: var(--fg); font-weight: 600; }
.portrait .cap span { color: var(--fg-3); }

/* ---- timeline ---- */
.timeline { position: relative; margin-top: 20px; padding-left: 4px; }
.tl-item { position: relative; padding: 0 0 44px 42px; border-left: 1px solid var(--cx-hairline); }
.tl-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.tl-item::before { content: ""; position: absolute; left: -7px; top: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--cx-lead); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-lead) 18%, transparent), 0 0 16px var(--cx-lead); }
.tl-item .yr { font-family: var(--cx-display); font-weight: 700; font-size: 15px; color: var(--cx-lead-3); letter-spacing: 0.02em; }
.tl-item h3 { font-size: 21px; margin-top: 6px; }
.tl-item p { color: var(--fg-2); font-size: 15px; margin-top: 8px; max-width: 540px; line-height: 1.6; }

/* ---- values cards ---- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 940px){ .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .values { grid-template-columns: 1fr; } }
.value { position: relative; overflow: hidden; padding: 28px; border-radius: var(--r-xl); background: var(--cx-bg-2); border: 1px solid var(--cx-hairline);
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .5s; }
.value:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--vc) 45%, transparent); }
.value .vglow { position: absolute; top: -40%; right: -20%; width: 70%; height: 70%; border-radius: 50%; filter: blur(44px);
  opacity: calc(0.4*var(--cx-glow)); background: radial-gradient(circle, var(--vc), transparent 66%); transition: opacity .5s; }
.value:hover .vglow { opacity: calc(0.7*var(--cx-glow)); }
.value .vi { position: relative; z-index: 2; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: var(--vc);
  background: color-mix(in srgb, var(--vc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--vc) 36%, transparent); }
.value .vi svg { width: 23px; height: 23px; }
.value h3 { position: relative; z-index: 2; font-size: 19px; margin-top: 20px; }
.value p { position: relative; z-index: 2; color: var(--fg-2); font-size: 14px; margin-top: 9px; line-height: 1.55; }

/* ---- team ---- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px){ .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .team-grid { grid-template-columns: 1fr; } }
.member { }
.member .mph { position: relative; aspect-ratio: 1/1; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--cx-hairline);
  background: var(--cx-bg-2); }
.member .mph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.member:hover .mph img { transform: scale(1.05); }
.member .mph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.5)); }
.member .nm { font-family: var(--cx-display); font-weight: 600; font-size: 17px; margin-top: 14px; }
.member .rl { color: var(--cx-lead); font-size: 13px; margin-top: 3px; }
.member .bio { color: var(--fg-3); font-size: 13px; margin-top: 7px; line-height: 1.5; }

/* ---- photo strip (placeholder tiles, swap real photos later) ---- */
.photo-strip { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 200px 200px; gap: 16px; }
@media (max-width: 820px){ .photo-strip { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px 180px; } }
@media (max-width: 520px){ .photo-strip { grid-template-columns: 1fr; grid-template-rows: repeat(4, 180px); } }
.ptile { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--cx-glass-border);
  background: var(--cx-bg-2); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; }
.ptile.big { grid-row: span 2; }
@media (max-width: 820px){ .ptile.big { grid-row: span 1; } }
.ptile .pl { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-2); }
.ptile .pl svg { width: 15px; height: 15px; opacity: 0.7; }
.ptile .pn { position: relative; z-index: 2; font-family: var(--cx-display); font-weight: 600; font-size: 16px; margin-top: 4px; }
.ptile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,0.42)); }
.ptile.t1 { background: radial-gradient(130% 130% at 28% 18%, rgba(233,162,59,0.5), rgba(233,162,59,0) 60%), var(--cx-bg-2); }
.ptile.t2 { background: radial-gradient(130% 130% at 70% 20%, rgba(0,200,120,0.42), rgba(0,200,120,0) 60%), var(--cx-bg-2); }
.ptile.t3 { background: radial-gradient(130% 130% at 30% 80%, rgba(255,122,26,0.42), rgba(255,122,26,0) 60%), var(--cx-bg-2); }
.ptile.t4 { background: radial-gradient(130% 130% at 70% 70%, rgba(43,108,219,0.45), rgba(43,108,219,0) 60%), var(--cx-bg-2); }

/* ---- stats band ---- */
.about-stats { display: flex; gap: 50px; flex-wrap: wrap; justify-content: space-between; padding: 40px 0; border-block: 1px solid var(--cx-hairline); }
.about-stats .s { flex: 1 1 160px; }
.about-stats .n { font-family: var(--cx-display); font-weight: 700; font-size: clamp(38px,4.6vw,58px); letter-spacing: -0.02em; }
.about-stats .n b { background: linear-gradient(120deg, var(--cx-lead), var(--cx-lead-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about-stats .l { color: var(--fg-3); font-size: 13.5px; margin-top: 6px; }