/* ==========================================================================
   RESUME v3 — Hero · Stats · Real-logo marquee · Client wall (sticky filter) · Contact
   Type v3 scale from site.css tokens. Filter bar: site.css §16.
   ========================================================================== */

/* ---------- 2. Stats ---------- */
.rstats{padding-block:clamp(var(--s6),6vw,var(--s10))}
.rstats__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr}
.stat{padding-block:var(--s3);border-top:1px solid var(--white)}
.stat:first-child{border-top:0;padding-top:0}
/* BRAND OVERRIDE (Brand Book §13 "Persian Display: Heavy"): v2 set these numerals Light 300 per brief — display numerals are now Heavy. */
.stat__n{font-family:var(--f-fa);font-weight:800;font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.1;color:var(--blue);font-variant-numeric:tabular-nums}
.stat__l{margin-top:var(--s1);font-size:var(--t-body);font-weight:400;line-height:1.7;color:var(--midnight);max-width:26ch}
@media (min-width:640px){
  .rstats__grid{grid-template-columns:repeat(2,1fr)}
  .stat{padding:var(--s3) var(--s3) var(--s3) 0}
  .stat:nth-child(-n+2){border-top:0;padding-top:0}
  .stat:nth-child(2n){border-inline-start:1px solid var(--white);padding-inline-start:var(--s3)}
}
@media (min-width:1024px){
  .rstats__grid{grid-template-columns:repeat(4,1fr)}
  .stat,.stat:nth-child(-n+2){border-top:0;padding-block:0}
  .stat + .stat{border-inline-start:1px solid var(--white);padding-inline-start:var(--s4)}
}

/* ---------- 3. Marquee — real client logos; hover the area = both rows pause; drag = scrub. No buttons. ---------- */
.mq{overflow:hidden}
.mq__head{margin-bottom:clamp(var(--s4),4vw,var(--s6))}
.mq__h{font-size:var(--t-h2);font-weight:400;line-height:1.3;color:var(--midnight)}
.mq__rows{display:grid;gap:clamp(var(--s2),2vw,var(--s3))}
.mq__row{position:relative;isolation:isolate;direction:ltr;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;border-block:1px solid var(--mist);padding-block:var(--s3)}
.mq__row + .mq__row{border-top:0}
/* v5 colour focus: logos are full colour; a masked backdrop-filter layer desaturates + softens them towards the
   sides, so the centre of each row is always in colour and colour fades out gradually to the edges.
   Pure CSS (no per-frame JS), follows the animation and drag automatically. Flat — no decorative gradient fill:
   the gradient is only an alpha mask (Brand Book: "no decorative gradients"). */
.mq__row::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1);background:rgba(255,255,255,.5);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 8%,transparent 38%,transparent 62%,#000 92%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0%,#000 8%,transparent 38%,transparent 62%,#000 92%,#000 100%)}
.mq__row.is-drag{cursor:grabbing}
.mq__track{display:flex;width:max-content;direction:ltr;animation:mqL var(--dur,30s) linear infinite;will-change:transform}
.mq__row[data-dir="right"] .mq__track{animation-name:mqR}
.mq.is-paused .mq__track{animation-play-state:paused}
@keyframes mqL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mqR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.mq__set{display:flex;list-style:none;padding:0;margin:0}
.mq__logo{flex:none;padding-inline:clamp(14px,2vw,28px);display:grid;place-items:center}
.mq__logo img{width:48px;height:48px;border-radius:12px;outline:1px solid var(--mist);outline-offset:-1px;pointer-events:none;transition:transform .45s var(--e-out)}
@media (hover:hover){.mq__logo:hover img{transform:scale(1.06)}}
@media (hover:none){.mq__logo.is-live img{animation:livePop .6s var(--e-spark)}}
@keyframes livePop{50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){
  .mq__row::after{display:none}            /* static, natively scrollable rows → plain full-colour logos */
  .mq__track{animation:none}
  .mq__row{overflow-x:auto;cursor:auto}
  .mq__set[aria-hidden="true"]{display:none}
}

/* ---------- 4. Client wall: logo + name only — informational, NOT clickable ---------- */
.rprojects{padding-bottom:var(--section)}
.rprojects .sec-head{margin-bottom:var(--s3)}
.rintros:has(.rintro:not([hidden])){padding-top:var(--s5)}
.rintro{display:grid;gap:var(--s1);max-width:760px}
.rintro:not([hidden]){animation:fIn .5s var(--e-out) both}
.rintro__head{display:flex;align-items:baseline;gap:var(--s2)}
.rintro__num{font-family:var(--f-lat);font-weight:500;font-size:var(--t-h2);line-height:1;color:var(--blue)}
.rintro h2{font-size:var(--t-h2);font-weight:600;line-height:1.3;color:var(--midnight)}
.rintro__p{font-size:var(--t-body);line-height:1.8;color:var(--deep);max-width:64ch}

.rgrid{list-style:none;margin:0;padding:var(--s5) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rcard{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:148px;padding:20px 14px;
  border:1px solid var(--mist);border-radius:var(--radius);background:var(--white);text-align:center;cursor:pointer;
  scroll-margin-top:calc(var(--hdr) + 90px);transition:border-color .35s var(--e-out),background .35s var(--e-out)}
.rcard[hidden]{display:none}
/* v5: whole card opens the lightbox via the stretched button (keyboard: Tab + Enter/Space) */
.rcard__open{all:unset;cursor:pointer;display:inline}
.rcard__open::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.rcard__open:focus-visible::after{outline:2px solid var(--blue);outline-offset:3px}
.rcard__more{display:none}
.rcard__logo{display:block;width:56px;height:56px;border-radius:14px;overflow:hidden;outline:1px solid var(--mist);outline-offset:-1px}
.rcard__logo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.75;transition:filter .35s var(--e-out),opacity .35s var(--e-out),transform .45s var(--e-out)}
.rcard__n{font-size:var(--t-small);font-weight:500;line-height:1.6;color:var(--midnight);overflow-wrap:anywhere;max-width:22ch}
/* v25 (user): no-logo cards look like every other card (the mist tint / bigger name are gone); a logo placeholder fills
   the logo slot — grey like the greyscale logos, Electric Blue on hover / live like a logo getting its colour. */
.rcard__logo--ph{display:grid;place-items:center;background:var(--white);color:var(--deep);opacity:.55;transition:color .35s var(--e-out),opacity .35s var(--e-out)}
.rcard__logo--ph svg{width:26px;height:26px}
.rlb__logo--ph{display:grid;place-items:center;color:var(--blue)}
.rlb__logo--ph svg{width:30px;height:30px}
.rcard:target{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:3px}
@media (hover:hover){
  .rcard:hover{border-color:var(--blue)}
  .rcard:hover .rcard__logo img{filter:none;opacity:1;transform:scale(1.05)}
  .rcard:hover .rcard__logo--ph{color:var(--blue);opacity:1}
}
@media (hover:none){
  .rcard.is-live{border-color:var(--blue)}
  .rcard.is-live .rcard__logo img{filter:none;opacity:1;animation:livePop .6s var(--e-spark)}
  .rcard.is-live .rcard__logo--ph{color:var(--blue);opacity:1}
}
.rmore{margin-top:var(--s6);display:flex;justify-content:center}
@media (min-width:640px){.rgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.rgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.rcard{min-height:164px}}
@media (min-width:1440px){.rgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.rintro:not([hidden]){animation:none}}

/* ============ v5 — Resume lightbox (same content as the portfolio .pcase card) ============ */
.rlb{padding:0;border:0;background:transparent;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 48px);overflow:visible;color:var(--midnight)}
.rlb::backdrop{background:rgba(0,7,36,.62)}                       /* Midnight, flat */
.rlb__card{position:relative;display:grid;gap:14px;padding:clamp(24px,4vw,40px);padding-top:clamp(28px,4vw,44px);background:var(--white);border-radius:var(--radius-lg);
  max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain}
.rlb__x{position:absolute;top:14px;left:14px;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--mist);border-radius:50%;background:var(--white);color:var(--midnight);cursor:pointer;transition:background .25s var(--e-out),color .25s var(--e-out)}
.rlb__x svg{width:18px;height:18px}
.rlb__head{display:flex;align-items:center;gap:16px;padding-left:44px}
.rlb__logo{flex:none;width:64px;height:64px;border-radius:16px;overflow:hidden;outline:1px solid var(--mist);outline-offset:-1px}
.rlb__logo img{width:100%;height:100%;object-fit:cover}
.rlb__tag{font-size:var(--t-micro);color:var(--blue);line-height:1.6}
.rlb__n{font-size:var(--t-h3);font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.rlb__role{font-size:var(--t-small);line-height:1.7;color:var(--deep);padding-top:12px;border-top:1px solid var(--mist)}
.rlb__p{font-size:var(--t-body);line-height:1.8}
.rlb__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.rlb__b{font:inherit;font-size:var(--t-small);font-weight:500;padding:9px 18px;border:1px solid var(--mist);border-radius:999px;background:var(--white);color:var(--midnight);cursor:pointer;transition:border-color .25s var(--e-out),color .25s var(--e-out)}
.rlb__b:disabled{opacity:.4;cursor:default}
.rlb__pos{font-size:var(--t-micro);color:var(--deep)}
.rlb__x:focus-visible,.rlb__b:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (hover:hover){.rlb__x:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}.rlb__b:not(:disabled):hover{border-color:var(--blue);color:var(--blue)}}
@media (prefers-reduced-motion:no-preference){
  .rlb[open] .rlb__card{animation:rlbIn .45s var(--e-out)}
  .rlb[open]::backdrop{animation:rlbFade .3s var(--e-out)}
  .rlb.is-closing .rlb__card{animation:rlbOut .2s var(--e-shift) forwards}
  .rlb.is-closing::backdrop{animation:rlbFade .2s reverse forwards}
  .rlb__card.is-swap{animation:rlbSwap .35s var(--e-out)}
}
@keyframes rlbIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes rlbOut{to{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes rlbFade{from{opacity:0}to{opacity:1}}
@keyframes rlbSwap{from{opacity:.2;transform:translateX(-10px)}to{opacity:1;transform:none}}