/* ============================================================
   09 · WHO'S BUILDING IT
   Short intro + a smaller portrait side by side, then six
   "what you get with me" cards, the two skill sets as chips,
   the concept gap as a pull quote, and one call to action.
   Replaces the old tall portrait + wall of paragraphs.
   ============================================================ */

.me-head{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:center;}
.me-head .me-me{grid-column:2;grid-row:1;}
.me-head .me-intro{grid-column:1;grid-row:1;}
.me-intro h2{max-width:15ch;}
.me-big{font-size:clamp(19px,2.2vw,24px);line-height:1.4;font-weight:600;color:var(--ink);margin:6px 0 16px;max-width:36ch;}
.me-intro p:not(.me-big):not(.eyebrow){font-size:17.5px;line-height:1.6;color:var(--mute-dark);max-width:56ch;}

.me-me{position:relative;margin:0;}
.me-me img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;border-radius:3px;}
.me-me::after{content:"";position:absolute;inset:12px -12px -12px 12px;border:2px solid var(--flame);z-index:-1;border-radius:3px;}
.me-me figcaption{position:absolute;left:-14px;bottom:-16px;max-width:92%;background:var(--flame);color:var(--ink);
  font-weight:800;font-size:13.5px;line-height:1.3;padding:9px 14px;letter-spacing:-.01em;}

/* six cards */
.me-grid{list-style:none;padding:0;margin:70px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.me-grid li{position:relative;background:#fffdf8;border:1px solid rgba(10,10,12,.12);border-radius:4px;padding:24px 22px 22px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.me-grid li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--flame);border-radius:4px 0 0 4px;
  transform:scaleY(.25);transform-origin:top;transition:transform .35s ease;}
.me-grid li:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,10,12,.08);border-color:rgba(255,59,31,.35);}
.me-grid li:hover::before{transform:scaleY(1);}
.me-ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;margin-bottom:14px;
  background:var(--ink);color:var(--amber);font-size:19px;line-height:1;}
.me-grid h3{font-size:19px;line-height:1.2;font-weight:800;letter-spacing:-.015em;margin:0 0 8px;color:var(--ink);}
.me-grid h3 em{font-style:normal;color:var(--flame);}
.me-grid p{font-size:15.5px;line-height:1.55;color:var(--mute-dark);margin:0;}
.me-grid p strong{color:var(--ink);}

/* skill sets */
.me-kit{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;}
.me-kit > div{background:var(--ink);color:var(--paper);border-radius:4px;padding:22px;}
.me-kit h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--amber);margin:0 0 14px;}
.me-chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;}
.me-chips li{font-size:14px;font-weight:700;padding:7px 12px;border-radius:99px;border:1px solid rgba(246,243,237,.28);}
.me-chips--tech li{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;
  border-color:rgba(255,176,32,.45);color:#ffe2a6;}

/* concept gap pull quote */
.me-gap{margin:56px 0 0;padding:4px 0 4px 26px;border-left:4px solid var(--flame);max-width:62ch;}
.me-gap p{margin:0;font-size:clamp(19px,2vw,23px);line-height:1.45;color:var(--ink);font-weight:500;}
.me-gap strong{color:var(--flame);}

.me-foot{display:flex;align-items:center;gap:30px;margin-top:40px;flex-wrap:wrap;}
.me-foot p{flex:1 1 420px;margin:0;font-size:16.5px;line-height:1.55;color:var(--mute-dark);}
.me-foot strong{color:var(--ink);}

@media (max-width:980px){ .me-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){
  .me-head{display:flow-root;}
  .me-me{float:right;width:112px;margin:4px 4px 14px 18px;}
  .me-me figcaption{display:none;}
  .me-me::after{inset:7px -7px -7px 7px;}
  .me-grid{grid-template-columns:minmax(0,1fr);margin-top:44px;gap:12px;}
  .me-kit{grid-template-columns:minmax(0,1fr);}
  .me-grid li{padding:20px 18px;}
}
@media (prefers-reduced-motion:reduce){ .me-grid li,.me-grid li::before{transition:none;} }