/* =========================================
   Work page (clean)
   ========================================= */

/* ---- Page band & hero ---- */
.slab-hero{
  background:#fff;
  padding:clamp(48px,8vw,96px) 0;
  border-top:1px solid var(--rule,#eaeaea);
}
.slab-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  align-items:start;
  column-gap:clamp(24px,4vw,64px);
  grid-template-columns:1fr;           /* mobile stack */
  padding-left:clamp(16px,4vw,48px);
  padding-right:clamp(16px,4vw,48px);
}
@media (min-width:960px){
  .slab-grid{ grid-template-columns:1fr 1fr; }
}

/* Hero headline (mixed case like home) */
.slab-heading{
  margin:0;
  font-family:'Barlow',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--ink,#022351);
  text-align:left;
  font-size:clamp(3.2rem,7.2vw,6rem);
}
/* If headline uses <span> lines, keep them inert on this page */
.slab-heading span{
  display:block;
  transform:none !important;
  opacity:1 !important;
  animation:none !important;
}
.slab-heading span::after{ content:none !important; }

/* Body copy to match home rhythm */
.slab-copy{
  max-width:58ch;
  color:#30475e;
  font-family:'Barlow',system-ui,sans-serif;
  font-size:1.125rem;
  line-height:1.7;
  text-align:left;
}
.slab-copy p{ margin:0 0 1rem; }

/* ---- Section header (“Stuff I’m Proud Of.”) ---- */
.work-section-intro{
  max-width:1200px;
  margin:120px auto 48px;
  width:90%;
  padding-left:clamp(16px,4vw,48px);
  padding-right:clamp(16px,4vw,48px);
  text-align:left;
}
.work-section-heading{
  font-family:'Barlow',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.1;
  color:var(--ink);
  font-size:clamp(2rem,4vw,3rem);
  margin:0;
}

/* ---- Work grid & optional canvas ---- */
.work-grid{
  max-width:1200px;
  margin:0 auto;
  padding-left:clamp(16px,4vw,48px);
  padding-right:clamp(16px,4vw,48px);
  padding-top:32px;
  padding-bottom:64px;
  display:grid;
  gap:2rem;
  grid-template-columns:1fr;
  position:relative;
  isolation:isolate;                  /* for full-bleed pseudo bg */
}
/* Optional full-bleed light grey behind the grid. Comment out if not wanted. */
.work-grid::before{
  content:"";
  position:absolute; z-index:-1;
  top:0; bottom:0;
  left:50%; right:50%;
  margin-left:-50vw;  margin-right:-50vw;
  background:#f7f7f7;
}
@media (min-width:768px){
  .work-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---- Cards (static captions, light lift on hover) ---- */
.work-item{ 
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.work-item:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.work-item a{
  display:flex; flex-direction:column; height:100%; text-decoration:none;
}
.work-item picture, .work-item img{
  display:block; width:100%; height:auto; border-radius:10px 10px 0 0;
}

/* Always-visible caption area */
.work-overlay{
  position:static;
  background:#fff; color:#0f2a41;
  padding:1.25rem 1.5rem 1.75rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.work-overlay h2{
  font-family:'Barlow',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.01em;
  font-size:clamp(1.2rem,1.8vw,1.5rem);
  margin:0;
}
.work-overlay p{
  margin:0;
  font-size:1rem; line-height:1.5; color:#163a57;
}

/* Tag pills + CTA */
.work-tags{
  display:flex; flex-wrap:wrap; gap:6px 10px;
  list-style:none; padding:0; margin:.25rem 0 .25rem;
}
.work-tags li{
  font-size:.8rem; font-weight:600;
  color:#0f2a41; background:#f3f6f9;
  padding:4px 10px; border-radius:999px;
}
.work-cta{
  margin-top:.5rem; font-weight:700; font-size:.9rem; color:#0f2a41; opacity:.7;
}

/* ---- Hard kill any residual hero-stack motion on Work page ---- */
.work-landing .hero-stack span{
  animation:none !important;
  transform:none !important;
  opacity:1 !important;
}
.work-landing .hero-stack span::after{ content:none !important; }

/* Ensure Work hero is static even if homepage CSS leaks in */
.work-landing .slab-heading span {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
/* Work / About stacked hero text */
.hero-stack-work {
  line-height: 0.88; /* slightly tighter */
}
/* ——— HERO STACK: force the correct size & spacing, no animation ——— */

/* Base: big, stacked, bold */
.slab-heading.hero-stack {
  font-family: 'Barlow', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2.8rem, 6.2vw, 6rem) !important;
  letter-spacing: -0.02em;
  color: var(--ink, #022351);
  line-height: 1;               /* baseline; line-height set on spans below */
  margin: 0;
}

/* Each word blocks onto its own line */
.slab-heading.hero-stack span {
  display: block;
}

/* Variant: Work / About = slightly tighter */
.slab-heading.hero-stack.hero-stack-work span {
  line-height: 0.88;
}

/* Variant: Home = slightly looser */
.slab-heading.hero-stack.hero-stack-home span {
  line-height: 1.10;
}

/* Kill any old animation/transition leftovers */
.slab-heading.hero-stack span::before,
.slab-heading.hero-stack span::after {
  content: none !important;
  animation: none !important;
  transition: none !important;
}

/* Mobile tune-up */
@media (max-width: 640px) {
  .slab-heading.hero-stack {
    font-size: clamp(2rem, 8vw, 3.4rem) !important;
  }
  .slab-heading.hero-stack.hero-stack-work span { line-height: 0.95; }
}