/* ============================================================
   PORTFOLIO — VARIANT 02
   Cases-first, dense composition. Reuses tokens & components
   from styles.css; this file only adds v2 layout.
   ============================================================ */

/* ---- logo ---- */
.nav__logo{height:70px;width:auto;display:block}
.footer__logo{height:60px;width:auto;display:block}
.footer__logo--sm{height:26px;width:auto;display:block;opacity:.92}

/* ---- compact split hero ---- */
.v2hero__chapter{font-family:var(--f-script);font-size:clamp(22px,2.8vw,32px);color:var(--brown);line-height:1;margin-top:12px}
.v2hero{position:relative;background:var(--cream);border-bottom:1px solid var(--ink-line);padding:clamp(26px,3.4vw,44px) clamp(20px,5vw,64px) clamp(34px,4vw,52px)}
.v2hero__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.18fr);gap:clamp(26px,4vw,60px);align-items:center}
.v2hero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.v2hero__eyebrow .dot{width:7px;height:7px;background:var(--rose);border-radius:50%}
.v2hero__eyebrow span{font-family:var(--f-text);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.v2hero__script{font-family:var(--f-script);font-size:clamp(24px,3vw,34px);color:var(--brown);line-height:1;transform:rotate(-3deg);margin:0 0 -.1em 2px}
.v2hero__wm{font-family:var(--f-display);font-weight:600;font-size:clamp(52px,8.4vw,108px);line-height:.84;letter-spacing:.005em;color:var(--ink);margin:0}
.v2hero__lead{max-width:430px;font-family:var(--f-text);font-weight:400;font-size:clamp(14px,1.5vw,16px);line-height:1.6;color:var(--body);margin:20px 0 24px}
.v2hero__lead b{font-weight:600;color:var(--ink)}
.v2hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.v2hero__stats{display:flex;gap:clamp(20px,3vw,40px);margin-top:clamp(24px,3vw,34px);padding-top:22px;border-top:1px solid var(--ink-line);flex-wrap:wrap}
.v2hero__stats .s b{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(26px,3vw,38px);line-height:1;color:var(--ink)}
.v2hero__stats .s b .sm{color:var(--rose);font-size:.6em}
.v2hero__stats .s span{display:block;margin-top:7px;font-family:var(--f-text);font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}

/* hero collage — immediate work on screen 1 */
.v2collage{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;min-height:clamp(330px,40vw,470px)}
.v2shot{position:relative;overflow:hidden;border:1px solid var(--ink-line);background:#1a2226;cursor:pointer;padding:0;font:inherit;display:block}
.v2shot:nth-child(1){grid-row:1 / span 2}
.v2shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.v2shot:hover img{transform:scale(1.05)}
.v2shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,42,47,0) 50%,rgba(33,42,47,.5));opacity:.85;transition:opacity .25s}
.v2shot:hover::after{opacity:1}
.v2shot__tag{position:absolute;left:12px;bottom:11px;z-index:2;font-family:var(--f-script);font-size:19px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.v2shot__n{position:absolute;top:10px;right:12px;z-index:2;font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.85)}

/* ---- cases bento (centerpiece) ---- */
.v2cases{background:var(--cream-2)}
.v2cases__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 28px;flex-wrap:wrap;margin-bottom:26px}
.v2cases__head .sec-head{margin-bottom:0}
.v2cases__lead{flex-basis:100%;max-width:680px;font-family:var(--f-text);font-size:14.5px;line-height:1.65;color:var(--body);margin:-8px 0 4px}
.v2bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15vw,196px);gap:14px;grid-auto-flow:dense}
.vcase{position:relative;overflow:hidden;border:1px solid var(--ink-line);background:#1a2226 center/cover no-repeat;cursor:pointer;padding:0;font:inherit;color:#fff;text-align:left;display:block;transition:transform .28s var(--ease),box-shadow .28s var(--ease),opacity .35s var(--ease)}
.vcase::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,27,0) 38%,rgba(20,24,27,.82));transition:opacity .28s}
.vcase:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(33,42,47,.26)}
.vcase:hover::after{background:linear-gradient(180deg,rgba(20,24,27,.05) 30%,rgba(20,24,27,.9))}
.vcase--big{grid-column:span 2;grid-row:span 2}
.vcase--wide{grid-column:span 2}
.vcase--tall{grid-row:span 2}
.vcase__cat{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--f-text);font-weight:600;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgba(237,231,221,.92);padding:5px 10px}
.vcase__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 16px 15px;display:flex;flex-direction:column}
.vcase__script{font-family:var(--f-script);font-size:18px;color:var(--rose);line-height:1;margin-bottom:3px}
.vcase__title{font-family:var(--f-display);font-weight:600;font-size:clamp(17px,1.6vw,21px);letter-spacing:.01em;line-height:1.04;text-transform:uppercase}
.vcase--big .vcase__title{font-size:clamp(24px,2.6vw,34px)}
.vcase--big .vcase__script{font-size:23px}
.vcase__meta{font-family:var(--f-text);font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:9px;display:flex;align-items:center;gap:8px}
.vcase__meta::after{content:"→";color:var(--rose);font-size:13px;opacity:0;transform:translateX(-5px);transition:.25s var(--ease)}
.vcase:hover .vcase__meta::after{opacity:1;transform:translateX(0)}
.vcase.is-hidden{display:none}
/* when a specific category is active, drop spans → clean uniform grid (no holes) */
.v2bento.is-filtered .vcase{grid-column:auto;grid-row:auto}

/* ---- condensed services ---- */
.v2services{background:var(--cream)}
.v2svc{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,60px)}
.v2svc__item{display:flex;gap:18px;align-items:baseline;padding:22px 2px;border-top:1px solid var(--ink-line);transition:padding-left .25s var(--ease)}
.v2svc__item:hover{padding-left:10px}
.v2svc__item .n{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--rose);min-width:30px}
.v2svc__item .tx h3{font-family:var(--f-display);font-weight:600;font-size:clamp(19px,2vw,24px);margin:0 0 5px;text-transform:uppercase;line-height:1.05;color:var(--ink)}
.v2svc__item .tx p{font-family:var(--f-text);font-size:13px;line-height:1.55;margin:0;color:var(--body)}
.v2dirs{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.v2dirs .lbl{font-family:var(--f-text);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-right:4px}
.v2dirs .tag{font-family:var(--f-text);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--ink-line-2);padding:8px 15px}

/* ---- v2 responsive ---- */
@media (max-width:980px){
  .v2hero__grid{grid-template-columns:1fr;gap:30px}
  .v2collage{min-height:clamp(300px,60vw,420px)}
  .v2bento{grid-template-columns:repeat(3,1fr)}
  .v2svc{grid-template-columns:1fr}
}
@media (max-width:680px){
  .v2bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(140px,32vw)}
  .vcase--big{grid-column:span 2;grid-row:span 2}
  .vcase--wide{grid-column:span 2}
  .vcase--tall{grid-row:span 1}
}
@media (max-width:440px){
  .v2collage{grid-template-columns:1fr 1fr}
  .v2hero__wm{font-size:clamp(46px,15vw,64px)}
  .v2bento{grid-template-columns:1fr 1fr;grid-auto-rows:140px}
  .vcase--big{grid-column:span 2;grid-row:span 1}
}