/* ============================================================
   MEET ZONEARY — long-form story page
   Reuses the site design system from ../css/styles.css (tokens,
   nav, buttons, eyebrow, reveal, footer, atmosphere, .grad, app-window).
   All page-specific classes are prefixed .ab-
   ============================================================ */

/* ---- HERO ---- */
.ab-hero{position:relative;overflow:hidden;isolation:isolate;text-align:center;
  padding:clamp(88px,19vh,210px) 0 clamp(56px,11vh,132px)}
.ab-hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 58% 46% at 50% 2%, rgba(0,150,255,.15), transparent 68%),
    radial-gradient(ellipse 48% 40% at 50% 100%, rgba(123,97,255,.09), transparent 70%);
  opacity:0;animation:abFade 1.4s var(--ease) .1s forwards}
@keyframes abFade{to{opacity:1}}
.ab-hero .eyebrow{margin-bottom:26px}
.ab-hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(46px,8.5vw,112px);letter-spacing:-.035em;line-height:.96;
  background:linear-gradient(180deg,#ffffff 28%,#c6d0de 88%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  /* "Meet Zoneary" — the y descender needs headroom; negative margin keeps geometry (see --ink-safe) */
  padding-bottom:var(--ink-safe);margin-bottom:calc(24px - var(--ink-safe))}
.ab-hero .ab-sub{max-width:700px;margin:0 auto;color:var(--muted);font-size:clamp(16px,1.55vw,21px);line-height:1.62}
.ab-scroll{margin-top:clamp(38px,6vh,58px);font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);display:inline-flex;flex-direction:column;align-items:center;gap:12px}
.ab-scroll svg{width:16px;height:16px;stroke:var(--faint);animation:abBob 2.4s ease-in-out infinite}
@keyframes abBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---- SECTION RHYTHM (slow, generous) ---- */
.ab-sec{padding:clamp(66px,12vh,148px) 0;position:relative}
.ab-sec.tight{padding:clamp(48px,8vh,96px) 0}
.ab-inner{max-width:760px;margin:0 auto}
.ab-wide{max-width:1120px;margin:0 auto}
.ab-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);
  margin-bottom:24px;display:flex;align-items:center;gap:13px}
.ab-kicker::before{content:'';width:30px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}
.ab-sec h2{font-family:var(--disp);font-weight:600;font-size:clamp(28px,4.2vw,48px);letter-spacing:-.02em;line-height:1.07;margin-bottom:28px}
.ab-sec h2 .grad{color:transparent;background:linear-gradient(116deg,#fff 24%,var(--cyan) 82%);-webkit-background-clip:text;background-clip:text}

/* ---- STORY PROSE ---- */
.ab-story p{color:var(--steel);font-size:clamp(16px,1.35vw,19px);line-height:1.74;margin-bottom:22px}
.ab-story p b{color:var(--ink);font-weight:600}
.ab-story p:last-child{margin-bottom:0}

/* respected platforms */
.ab-names{display:flex;flex-wrap:wrap;gap:10px 12px;margin:4px 0 28px}
.ab-names span{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:6px 13px;background:var(--glass)}

/* pull quote */
.ab-quote{margin:clamp(38px,5vw,56px) 0;padding:4px 0 4px 30px;border-left:2px solid var(--cyan);
  font-family:var(--disp);font-weight:500;font-size:clamp(22px,3.1vw,34px);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}

/* divider */
.ab-divider{max-width:1120px;height:1px;margin:0 auto;background:var(--line-2)}

/* ---- PHILOSOPHY — fine dividers, not cards ---- */
.ab-beliefs{border-top:1px solid var(--line-2);margin-top:8px}
.ab-belief{display:grid;grid-template-columns:230px 1fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--line-2);align-items:baseline}
.ab-belief h3{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.ab-belief p{color:var(--muted);font-size:15.5px;line-height:1.66}
.ab-belief .unknown{color:var(--cyan);font-family:var(--mono);font-style:normal}
@media(max-width:700px){.ab-belief{grid-template-columns:1fr;gap:8px;padding:22px 0}}

/* ---- PRODUCTS ---- */
.ab-products{display:flex;flex-direction:column;gap:14px;margin-bottom:30px}
.ab-prod{display:grid;grid-template-columns:54px 1fr auto;gap:22px;align-items:center;
  border:1px solid var(--line-2);border-radius:16px;background:var(--panel);padding:22px 26px;transition:transform .3s var(--ease),border-color .3s}
.ab-prod:hover{border-color:var(--line);transform:translateY(-2px)}
.ab-prod .ico{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line);overflow:hidden}
.ab-prod .ico img{height:32px;width:auto}
.ab-prod.wt .ico{background:linear-gradient(160deg,rgba(0,150,255,.18),transparent);border-color:rgba(0,150,255,.3)}
.ab-prod.pg .ico{background:linear-gradient(160deg,rgba(123,97,255,.18),transparent);border-color:rgba(123,97,255,.3)}
.ab-prod.sn .ico{background:linear-gradient(160deg,rgba(0,230,118,.18),transparent);border-color:rgba(0,230,118,.3)}
.ab-prod .txt b{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.01em;display:block}
.ab-prod .txt .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block;margin-top:3px}
.ab-prod .txt p{color:var(--muted);font-size:14px;line-height:1.55;margin-top:9px;max-width:560px}
.ab-prod .go{font-family:var(--disp);font-weight:600;font-size:13.5px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.ab-prod.wt .go{color:var(--cyan)}.ab-prod.pg .go{color:var(--violet-soft)}.ab-prod.sn .go{color:var(--sn)}
.ab-prod .go svg{width:14px;height:14px}
.ab-prod-note{font-family:var(--disp);font-weight:500;font-size:clamp(16px,1.6vw,20px);line-height:1.5;color:var(--steel);text-align:center;max-width:820px;margin:0 auto}
.ab-prod-note b.wt{color:var(--cyan);font-weight:600}.ab-prod-note b.pg{color:var(--violet-soft);font-weight:600}.ab-prod-note b.sn{color:var(--sn);font-weight:600}
@media(max-width:640px){.ab-prod{grid-template-columns:44px 1fr;padding:20px}.ab-prod .ico{width:44px;height:44px}.ab-prod .go{display:none}}

/* ---- HARDWARE PHOTOGRAPHY ---- */
.ab-hw-shot{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:16px;
  background:var(--bg-2);transition:transform .3s var(--ease),border-color .3s}
.ab-hw-shot:hover{transform:translateY(-3px);border-color:var(--line)}
.ab-hw-shot img{width:100%;height:100%;object-fit:cover;display:block}
.ab-hw-shot figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 16px 13px;
  font-size:12.5px;line-height:1.45;color:var(--steel);
  background:linear-gradient(0deg,rgba(8,10,17,.94) 22%,rgba(8,10,17,.55) 62%,transparent)}

/* ---- HARDWARE GALLERY ---- */
.ab-hardware{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;grid-auto-rows:200px}
.hw-a{grid-column:span 4;grid-row:span 2}
.hw-b{grid-column:span 2}
.hw-c{grid-column:span 2}
.hw-d{grid-column:span 3}
.hw-e{grid-column:span 3}
@media(max-width:900px){.ab-hardware{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
  /* two rows so the bench shot keeps its label and the storage the caption names */
  .hw-a{grid-column:span 2;grid-row:span 2}.hw-b,.hw-c,.hw-d,.hw-e{grid-column:span 1}}
@media(max-width:560px){.ab-hardware{grid-template-columns:1fr}
  .hw-a,.hw-b,.hw-c,.hw-d,.hw-e{grid-column:span 1}.hw-a{grid-row:span 1}}

/* ---- QA TEAM ---- */
.ab-qa{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ab-qa-card{border:1px solid var(--line-2);border-radius:20px;background:var(--panel);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),border-color .3s}
.ab-qa-card:hover{transform:translateY(-5px);border-color:var(--line)}
.ab-qa-photo{aspect-ratio:1/1;overflow:hidden;background:var(--bg-2);border-bottom:1px solid var(--line-2)}
.ab-qa-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* joint field-exercise photo (Finn + Sola) */
.ab-qa-collab{margin-top:20px;border:1px solid var(--line-2);border-radius:20px;overflow:hidden;background:var(--panel)}
.ab-qa-collab img{width:100%;height:auto;display:block}
.ab-qa-collab figcaption{padding:16px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--muted);border-top:1px solid var(--line-2);line-height:1.55}
.ab-qa-collab figcaption b{color:var(--ink);font-weight:500}
.ab-qa-body{padding:24px 24px 26px}
.ab-qa-mark{line-height:0;flex:none}
.ab-qa-mark svg{width:32px;height:32px;display:block}
.ab-qa-body h3{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:.03em;margin:0 0 4px}
.ab-qa-role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.ab-qa-body .lab{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);display:block;margin:20px 0 9px}
.ab-qa-body ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ab-qa-body li{font-size:14px;color:var(--muted);line-height:1.5;padding-left:17px;position:relative}
.ab-qa-body li::before{content:'';position:absolute;left:1px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.ab-qa-skill{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);font-size:14px;color:var(--steel);line-height:1.5}
.ab-qa-skill b{color:var(--ink);font-weight:600}
@media(max-width:820px){.ab-qa{grid-template-columns:1fr;max-width:460px;margin:0 auto}}


/* ---- tier labels inside the team section ---- */
.ab-tier{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);display:flex;align-items:center;gap:14px;margin:0 0 18px}
.ab-tier::after{content:'';flex:1;height:1px;background:var(--line-2)}
.ab-labs + .ab-tier,.ab-lead + .ab-tier{margin-top:clamp(38px,5vw,58px)}

/* ---- human leadership — one level above the Labs cards ---- */
.ab-lead{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px;
  background:radial-gradient(ellipse 60% 130% at 8% 0%, rgba(0,150,255,.11), transparent 58%), var(--panel);
  display:grid;grid-template-columns:minmax(240px,.85fr) 1.15fr;gap:clamp(24px,3.4vw,48px);
  align-items:start;padding:clamp(28px,3vw,38px) clamp(26px,3vw,36px);
  margin-bottom:clamp(38px,5vw,58px)}
.ab-lead .bar{position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--cyan),var(--blue) 62%,transparent)}
.ab-lead h3{font-family:var(--disp);font-weight:700;font-size:clamp(24px,2.6vw,30px);
  letter-spacing:.035em;color:var(--ink);margin-bottom:6px}
.ab-lead-role{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--cyan);margin-bottom:16px}
.ab-lead-tags{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel);line-height:1.8}
.ab-lead-bio{color:var(--muted);font-size:15.5px;line-height:1.72}
/* .ab-lead is a 2-column grid, so a card carrying both a bio and a closing line
   must wrap them - a third in-flow child would land in column 1 of a new row.
   (.bar is absolutely positioned, so it never takes a cell.) */
.ab-lead-body{display:flex;flex-direction:column;gap:clamp(14px,1.5vw,18px)}
/* closing line under a biography. Display face at 16px against 15.5px body text:
   marginally larger on paper, but the accent rule and the weight change are what
   separate it - it reads as a closing remark, not a second paragraph. */
.ab-lead-quote{font-family:var(--disp);font-weight:500;font-size:16px;line-height:1.45;
  letter-spacing:-.008em;color:var(--steel);border-left:2px solid var(--cyan);
  padding-left:15px;text-wrap:balance}
@media(max-width:820px){.ab-lead{grid-template-columns:1fr;gap:20px}}

/* ---- ZONEARY LABS — compact profile cards, siblings of .principle ---- */
.ab-labs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ab-lab{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:16px;
  background:var(--panel);padding:26px 24px 24px;display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s}
.ab-lab:hover{border-color:var(--line);transform:translateY(-3px)}
.ab-lab::before{content:'';position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent 72%)}
.ab-lab h3{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.035em;
  color:var(--ink);margin-bottom:5px}
.ab-lab-role{font-size:14px;color:var(--muted);line-height:1.45;margin-bottom:16px}
.ab-lab-tags{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cyan);line-height:1.7;padding-bottom:15px;border-bottom:1px solid var(--line-2);
  margin-bottom:15px}
.ab-lab-quote{font-size:14px;color:var(--steel);line-height:1.6;font-style:italic}
.ab-labs-note{max-width:760px;margin:clamp(28px,3.5vw,40px) auto 0;text-align:center;
  font-size:14.5px;line-height:1.7;color:var(--faint)}
@media(max-width:1000px){.ab-labs{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ab-labs{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* ---- HOW WE BUILD — timeline ---- */
.ab-timeline{position:relative;max-width:620px;margin:8px auto 0;padding-left:36px}
.ab-timeline::before{content:'';position:absolute;left:6px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,var(--cyan),rgba(0,212,255,.08))}
.ab-tl{position:relative;padding:0 0 30px}
.ab-tl:last-child{padding-bottom:0}
.ab-tl::before{content:'';position:absolute;left:-36px;top:3px;width:13px;height:13px;border-radius:50%;
  background:var(--bg);border:2px solid var(--cyan);box-shadow:0 0 14px -2px rgba(0,212,255,.6)}
.ab-tl h3{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.01em;margin-bottom:5px}
.ab-tl p{color:var(--muted);font-size:15px;line-height:1.6}
.ab-realstack{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(38px,5vw,54px)}
.ab-realstack span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--steel);
  border:1px solid var(--line);border-radius:100px;padding:7px 15px;background:var(--glass)}

/* ---- LOOKING FORWARD ---- */
.ab-forward .ab-story{text-align:center;max-width:720px;margin:0 auto}
.ab-directions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px}
.ab-directions span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;padding:8px 14px}

/* ---- JOIN US ---- */
.ab-join{text-align:center;max-width:820px;margin:0 auto}
.ab-join h2{font-size:clamp(32px,5.4vw,64px);letter-spacing:-.03em;margin-bottom:18px}
.ab-join p{color:var(--muted);font-size:clamp(16px,1.4vw,19px);line-height:1.6;max-width:560px;margin:0 auto}
.ab-join-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.ab-sign{margin-top:clamp(40px,6vh,64px);font-family:var(--mono);font-style:italic;color:var(--steel);font-size:15px;line-height:1.6}
.ab-sign span{color:var(--cyan);font-style:normal}

/* section background bands (subtle alternation, matches site --bg-2 bands) */
.ab-band{background:radial-gradient(ellipse 80% 130% at 50% 0%, rgba(0,120,255,.045), transparent 60%);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}