/**
 * ABOUT SECTION — the "About" section of index.html: the photo, the
 * short intro text with the highlighted stats pills, and the numbered
 * "how we work" steps (the "PROCESS CARD" section below).
 *
 * This file also contains two sub-sections that index.html does not
 * currently use: "SKILLS GRAPH" (an `#skill-graph` element) and
 * "PROJECTS" (a `.proj-grid` of project cards, prefixed `.pc-`). Neither
 * has any matching markup in index.html right now, so editing them has
 * no visible effect on the live site.
 *
 * EDIT THIS FILE WHEN YOU WANT TO:
 *   - change the About section's 2-column layout (photo + text) —
 *     .about-grid (its mobile single-column version is in the @media
 *     block at the bottom);
 *   - change the small floating stat pills under the photo — .stat;
 *   - change the single floating status badge on the photo's corner
 *     (e.g. "Available for work") — .a-float ("about floating badge"),
 *     with .a-float-val the actual status text (marked "REPLACE:" below);
 *   - change the numbered process steps — .proc-card/.proc-step
 *     (.proc-card is the whole numbered box, .proc-step is one row in
 *     it: a number + title + description).
 *
 * Requires base.css to be linked first.
 */

.about-grid { display: grid; grid-template-columns: 1fr 380px; gap: 72px; align-items: center; }
.about-p { font-size: .92rem; color: var(--text-3); line-height: 1.78; margin-top: 13px; }

.about-slogan { font-family: var(--display); font-size: 1.06rem; font-weight: 600; color: var(--text-2); margin-top: 10px; letter-spacing: -.01em; }
.about-slogan strong { color: var(--accent); font-weight: 700; }

.stats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: 100px;
  padding: 7px 15px; display: flex; align-items: center; gap: 7px;
  font-size: .81rem; color: var(--text-2);
}
.stat strong { color: var(--text); font-weight: 700; }

.photo-wrap { position: relative; }
.photo-frame {
  width: 100%; aspect-ratio: 3/4; background: var(--card);
  border-radius: var(--r-lg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
}
.photo-frame::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(0,255,140,.2) 0%, transparent 45%); pointer-events: none;
}

.a-float {
  position: absolute; bottom: -14px; left: -18px;
  background: var(--bg-3); border: 1px solid var(--border-mid); border-radius: 12px;
  padding: 10px 14px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 16px 36px rgba(0,0,0,.45); min-width: 165px;
}
.a-float-ico { width: 33px; height: 33px; background: var(--accent-dim); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; }
.a-float-lbl { font-size: .66rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
/* REPLACE: your status */
.a-float-val { font-family: var(--display); font-size: .88rem; font-weight: 700; }

/* ══════════════════════════════════════════════════
   SKILLS GRAPH (unused on the current page — see file header)
══════════════════════════════════════════════════ */
.skills-head { text-align: center; margin-bottom: 36px; }
.skills-head .muted { margin: 0 auto; }
.graph-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#skill-graph { display: block; min-width: 580px; cursor: default; }

/* ══════════════════════════════════════════════════
   PROJECTS (unused on the current page — see file header)
   A grid of project cards. `.pc` below is short for "project card";
   `.pc-top`/`.pc-num`/`.pc-ico`/`.pc-title`/`.pc-desc`/`.pc-tech`/
   `.pc-link` are the pieces inside one card, and `.tt` (further down)
   is one small "tech tag" pill inside `.pc-tech`.
══════════════════════════════════════════════════ */
.proj-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; flex-wrap: wrap; gap: 14px; }
.proj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

.pc {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px; display: flex; flex-direction: column; gap: 14px;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pc:hover { background: var(--card-hov); border-color: rgba(0,255,140,.2); transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0,0,0,.28); }
.pc.feat { grid-column: span 2; flex-direction: row; align-items: flex-start; gap: 28px; }
.pc.feat .pc-main { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.pc.feat .pc-vis {
  width: 175px; flex-shrink: 0; align-self: stretch;
  background: var(--accent-dim); border: 1px solid rgba(0,255,140,.2);
  border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2.8rem;
}

.pc-top { display: flex; align-items: center; justify-content: space-between; }
.pc-num { font-family: var(--display); font-size: .7rem; font-weight: 700; color: var(--accent); letter-spacing: .1em; }
.pc-ico { width: 33px; height: 33px; background: var(--accent-dim); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--accent); }
.pc-title { font-family: var(--display); font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.pc-desc { font-size: .85rem; color: var(--text-3); line-height: 1.72; flex: 1; }

.pc-tech { display: flex; flex-wrap: wrap; gap: 5px; }
.tt { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; font-size: .71rem; color: var(--text-3); font-family: 'Fira Code',monospace; }

.pc-link { display: inline-flex; align-items: center; gap: 5px; font-size: .83rem; font-weight: 600; color: var(--accent); transition: gap .2s, opacity .2s; }
.pc-link:hover { gap: 9px; opacity: .8; }

/* ── PROCESS CARD ──────────────────────────────────
   The numbered list of steps (e.g. "1. Discovery", "2. Design"...) shown
   in the About section, explaining how the company works with clients. */
.proc-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 0;
  align-self: start;
}
.proc-step {
  display: flex; gap: 18px; align-items: flex-start; padding: 22px 0;
}
.proc-num {
  font-family: var(--display); font-size: 1.6rem; font-weight: 800;
  color: var(--accent); letter-spacing: -.03em; line-height: 1;
  /* tabular-nums makes every digit render at the same fixed width in
     this font (without it, "01"'s narrower digits made this number a
     few pixels thinner than "02"/"03", shifting the title/description
     text next to it slightly left compared to the other two steps).
     min-width (not a hard width) just guarantees at least this much
     room without clipping or fighting the tabular-nums text's actual
     rendered width. margin-right is the real gap before the title —
     don't remove it, or the wider tabular-nums text can end up sitting
     right up against the title with no visible space. */
  min-width: 32px; flex-shrink: 0; margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.proc-title {
  font-family: var(--display); font-size: .98rem; font-weight: 700;
  color: var(--text); margin-bottom: 6px;
}
.proc-desc { font-size: .84rem; color: var(--text-3); line-height: 1.65; }
.proc-div { height: 1px; background: var(--border); }
@media (max-width: 960px) {
  .proc-card { max-width: 460px; margin: 0 auto; width: 100%; }
}

/* Mobile/small-screen overrides for this section (.about-grid, the photo
   wrapper .photo-wrap, the unused project grid .proj-grid/.pc.feat).
   The 960px block MUST stay physically before the 640px block below: a
   `max-width: 640px` media query is still active at narrower widths, so
   at 640px and below BOTH blocks' rules for the same selector apply, and
   CSS resolves that by letting whichever declaration comes LAST in the
   file win. Reordering these two blocks would silently change which
   set of rules takes effect on narrow phones. */
@media (max-width: 960px) {
  .about-grid { grid-template-columns: 1fr; gap: 52px; }
  .photo-wrap { max-width: 300px; margin: 0 auto; padding-bottom: 24px; }
  .proj-grid { grid-template-columns: repeat(2,1fr); }
  .pc.feat { grid-column: span 2; flex-direction: column; }
  .pc.feat .pc-vis { width: 100%; height: 110px; }
}
@media (max-width: 640px) {
  .proj-grid { grid-template-columns: 1fr; }
  .pc.feat { grid-column: span 1; }
  .photo-wrap { max-width: 260px; }
  .a-float { left: 0; }
}