/* AFTER CUT V4.3.4 — SAFE GEOMETRY PATCH
   Loaded last. No JS refactor. It only normalizes geometry and requested polish. */
:root{
  --stable-bg:#080909;
  --stable-card-h:clamp(390px,35vw,595px);
}
html,body,.projects,.about,.contact{background:var(--stable-bg)!important;}
/* The framed hero reveals exactly the same surface as Showcases. */
.hero,.hero-sticky{background:var(--stable-bg)!important;}
.motion-lab .hero-sticky{background-color:var(--stable-bg)!important;}

/* Hero copy: remove prototype label, preserve white name + orange punctuation. */
.hero-copy>.micro{display:none!important;}
.hero-copy h1,.hero-copy h1 *{color:#fff!important;}
.hero-copy h1 .hero-dot{color:var(--accent)!important;}
.hero-copy .role{font-size:clamp(12px,1.05vw,16px)!important;line-height:1.35;letter-spacing:.045em;color:#d6dcde!important;margin-top:-6px;}

/* Play actions are icons, not text capsules. Accessibility text remains sr-only. */
.film-trigger{width:48px!important;height:48px!important;min-height:48px!important;padding:0!important;margin-top:34px!important;border:0!important;border-radius:50%!important;background:transparent!important;display:grid!important;place-items:center!important;gap:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.film-trigger .play-circle{width:44px!important;height:44px!important;min-width:44px!important;border:1px solid rgba(255,255,255,.30)!important;background:rgba(8,9,9,.28)!important;}
.film-trigger:hover,.film-trigger:focus-visible{transform:none!important;background:transparent!important;border-color:transparent!important;}
.film-trigger:hover .play-circle,.film-trigger:focus-visible .play-circle{background:var(--accent)!important;color:#080909!important;}
.case-copy .film-trigger{background:transparent!important;}

/* SHOWCASES: one source of truth for geometry. */
.showcase-rail{align-items:stretch!important;grid-auto-rows:var(--stable-card-h);}
.showcase-rail>li,.showcase-cell{height:var(--stable-card-h)!important;align-self:stretch!important;}
.project-card,.js .showcase-cell>.project-card,.project-card[aria-expanded=true]{height:100%!important;min-height:0!important;max-height:none!important;width:100%!important;display:block!important;}
.project-card .card-surface{inset:0!important;width:100%!important;height:100%!important;border-radius:var(--card-radius)!important;}
.project-card .card-visual{inset:1px!important;width:auto!important;height:auto!important;border-radius:calc(var(--card-radius) - 2px)!important;}
.project-card .card-visual picture{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;}
.project-card .card-visual img{width:106%!important;height:106%!important;}
/* Keep the contour itself aligned. Only the image/meta may move on hover. */
.motion-lab .project-card.is-pointed .card-surface,
body[data-motion="soft"].motion-lab .project-card.is-pointed .card-surface{transform:none!important;box-shadow:inset 0 0 0 1px var(--accent)!important;}
.motion-lab .project-card.is-pointed .card-image{transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(1.055)!important;}

/* Keep all section surfaces visually continuous. */
.projects,.about,.contact{border-top:0!important;border-bottom:0!important;}
.project-stage{border-top-color:rgba(255,255,255,.07)!important;}

/* Clients / agencies wall. Remote logos fall back to text if unavailable. */
.client-logo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 34px;align-items:center;margin-top:24px}
.client-mark{min-height:50px;display:flex;align-items:center;justify-content:flex-start;min-width:0;color:#eef0ef}
.client-mark img{display:block;max-width:min(145px,100%);max-height:36px;width:auto;height:auto;object-fit:contain;object-position:left center;filter:grayscale(1) brightness(0) invert(1);opacity:.82;transition:opacity .25s ease}
.client-mark:hover img{opacity:1}
.client-wordmark{font-size:11px;font-weight:650;letter-spacing:.035em;line-height:1.08;text-transform:uppercase;color:#e7e9e8}
.client-wordmark small{display:block;margin-top:5px;font-size:7px;font-weight:450;letter-spacing:.11em;color:#879398}

@media(max-width:1100px) and (min-width:761px){
  :root{--stable-card-h:470px}
  .client-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:760px){
  :root{--stable-card-h:clamp(242px,76vw,360px)}
  .showcase-rail{grid-auto-rows:unset!important;align-items:stretch!important;}
  .showcase-rail>li,.showcase-cell{height:var(--stable-card-h)!important;}
  .project-card .card-visual img,.project-card:hover .card-visual img{inset:0!important;width:100%!important;height:100%!important;object-position:var(--image-focus,50% 50%)!important;transform:none!important;}
  .motion-lab .project-card.is-pointed .card-surface{transform:none!important;}
  .client-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px;}
  .client-mark{min-height:42px}.client-mark img{max-height:28px;max-width:118px}.client-wordmark{font-size:10px}
  .hero-copy .role{font-size:12px!important;}
}

/* V4.3.5 — CARD ALIGNMENT HOTFIX
   The Motion Lab used to apply a persistent per-card Y offset/scale after reveal.
   That created a few pixels of visible misalignment between outlines.
   Entrance animation stays on .card-surface; the card boxes themselves remain rigid. */
.motion-lab .showcase-cell,
body[data-motion="soft"].motion-lab .showcase-cell,
body[data-motion="off"].motion-lab .showcase-cell{
  --ml-card-y:0px !important;
  --ml-card-scale:1 !important;
  transform:none !important;
}

/* One rigid row geometry on desktop/tablet. */
@media (min-width:761px){
  .showcase-rail{
    grid-template-rows:var(--stable-card-h) !important;
    grid-auto-rows:var(--stable-card-h) !important;
    align-items:start !important;
  }
  .showcase-cell,
  .showcase-rail>li,
  .project-card,
  .project-card .card-surface{
    box-sizing:border-box !important;
    height:var(--stable-card-h) !important;
    min-height:var(--stable-card-h) !important;
    max-height:var(--stable-card-h) !important;
  }
  .showcase-cell{align-self:start !important;}
}