/* Work / case studies — Phase 4
   Same ink / paper / accent system. More editorial than the service pages. */

html:has(.work){
  scroll-behavior:smooth;
  overflow-x:clip;
}

.work{ overflow-x:clip; }

.work-wrap{
  width:min(var(--container), 100%);
  margin-inline:auto;
  padding-left:max(var(--page-gutter, 1.25rem), env(safe-area-inset-left, 0px));
  padding-right:max(var(--page-gutter, 1.25rem), env(safe-area-inset-right, 0px));
}

.work-block{ padding:clamp(3.25rem, 7.5vw, 6.5rem) 0; }

.work-block + .work-block{ border-top:1px solid var(--line); }

.work .muted{ color:var(--muted); }

.work .btns{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

/* Index hero */

.work-hero{
  padding:clamp(3.25rem, 7.5vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}

.work-hero h1{
  margin:.45rem 0 .9rem;
  font-size:clamp(2.6rem, 8vw, 6.6rem);
  line-height:.9;
  letter-spacing:-.045em;
  max-width:12ch;
  text-wrap:pretty;
}

.work-hero__lead{
  max-width:34rem;
  margin:0;
  color:var(--muted);
  font-size:1.08rem;
}

.work-hero__count{
  margin-top:2.2rem;
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* Index features */

.work-feature{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:2.5rem 3.5rem;
  align-items:center;
  padding:4.5rem 0;
  border-top:1px solid var(--line);
}

.work-feature--reverse{ direction:rtl; }
.work-feature--reverse > *{ direction:ltr; }

.work-feature--wide{
  grid-template-columns:1fr;
  gap:2rem;
}

.work-feature--wide .work-feature__copy{
  display:grid;
  grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
  gap:1.5rem 3rem;
  align-items:end;
}

.work-feature--phone{
  grid-template-columns:minmax(0, 1.05fr) minmax(220px, .7fr);
}

.work-feature--landing{
  grid-template-columns:1fr;
  text-align:left;
}

.work-feature__num{
  display:block;
  margin-bottom:.7rem;
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
}

.work-feature h2{
  margin:.4rem 0 .7rem;
  font-size:clamp(2.6rem, 5.4vw, 4.6rem);
  line-height:.92;
  letter-spacing:-.04em;
}

.work-feature__type{
  margin:.15rem 0 1rem;
  color:var(--muted);
  font-size:.95rem;
}

.work-feature p{
  max-width:34rem;
  margin:0 0 1.5rem;
  color:var(--muted);
}

.work-feature .device-stage{
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.work-feature .device-stage__glow{ display:none; }

.work-feature .device-frame{
  width:100%;
  min-height:0;
  box-shadow:0 28px 70px rgba(0,0,0,.48), 0 0 0 1px rgba(255,250,242,.06);
}

.work-feature .demo-frame{
  height:clamp(240px, 48vw, 460px);
  min-height:0;
}

.work-feature--phone .device-frame{
  max-width:280px;
  margin-inline:auto;
  border-radius:28px;
}

.work-feature--phone .device-chrome{ display:none; }

.work-feature--phone .demo-frame{
  height:clamp(280px, 70vw, 520px);
  min-height:0;
}

.work-feature__copy a.work-feature__hit{
  color:inherit;
  text-decoration:none;
}

.work-feature__copy a.work-feature__hit:hover h2{ color:var(--accent); }

/* Case study hero */

.case-hero{
  padding:5.5rem 0 3.5rem;
}

.case-hero__top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem 1.1rem;
  margin-bottom:1.4rem;
}

.case-hero__num{
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
}

.case-hero h1{
  margin:0 0 1rem;
  font-size:clamp(2.5rem, 7.5vw, 6.2rem);
  line-height:.9;
  letter-spacing:-.045em;
  max-width:12ch;
  text-wrap:pretty;
}

.case-hero__sub{
  max-width:32rem;
  margin:0 0 1.8rem;
  color:var(--muted);
  font-size:1.08rem;
}

.case-overview{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.5rem 2.5rem;
  padding:2rem 0 0;
  border-top:1px solid var(--line);
}

.case-overview h2{
  margin:0 0 .4rem;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.case-overview p,
.case-overview a{
  margin:0;
  color:var(--paper);
  text-decoration:none;
  font-size:1.05rem;
}

.case-overview a:hover{ color:var(--accent-2); }

/* Preview */

.case-preview .device-stage{
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.case-preview .device-stage__glow{ display:none; }

.case-preview .device-frame{
  width:100%;
  box-shadow:0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,250,242,.06);
}

.case-preview .demo-frame{
  height:clamp(260px, 52vw, 560px);
  min-height:0;
}

.case-preview .apple-seg{ margin:1.1rem auto 0; }

/* Copy sections */

.work .text-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:1.4rem;
  color:var(--paper);
  text-decoration:none;
  font-size:.95rem;
  font-weight:600;
}

.work .text-link:hover{ color:var(--accent-2); }

.case-split{
  display:grid;
  grid-template-columns:minmax(0, .75fr) minmax(0, 1.25fr);
  gap:2rem 4rem;
  align-items:start;
}

.case-split--tight{ margin-bottom:2rem; }

.case-split h2,
.case-head h2{
  margin:.4rem 0 0;
}

.case-split p,
.case-prose{
  max-width:38rem;
  margin:.85rem 0 0;
  color:var(--muted);
  font-size:1.05rem;
}

.case-features{
  list-style:none;
  margin:0;
  padding:0;
}

.case-features li{
  padding:1.35rem 0;
  border-bottom:1px solid var(--line);
}

.case-features li:first-child{ border-top:1px solid var(--line); }

.case-features strong{
  display:block;
  font-family:var(--display);
  font-size:1.7rem;
  font-weight:400;
  letter-spacing:-.03em;
}

.case-features span{
  display:block;
  margin-top:.3rem;
  color:var(--muted);
}

.case-close{
  padding:clamp(4rem, 8vw, 7.5rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.case-close h2{
  margin:.4rem 0 .7rem;
  font-size:clamp(2.8rem, 7vw, 5.4rem);
  line-height:.94;
  letter-spacing:-.04em;
}

.case-close p{
  max-width:32rem;
  margin:0 0 1.8rem;
  color:var(--muted);
  font-size:1.08rem;
}

.case-next{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  padding-top:2.4rem;
  border-top:1px solid var(--line);
}

.case-next a{
  color:var(--paper);
  text-decoration:none;
}

.case-next span{
  display:block;
  margin-bottom:.35rem;
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.case-next strong{
  font-family:var(--display);
  font-size:clamp(1.6rem, 3vw, 2.3rem);
  font-weight:400;
  letter-spacing:-.03em;
}

.case-next a:hover strong{ color:var(--accent); }

.case-next__prev{ text-align:left; }
.case-next__next{ text-align:right; margin-left:auto; }

.work-feature .device-frame,
.case-preview .device-frame,
.work-feature h2,
.case-hero h1{
  transition:transform var(--motion-slow, .46s) var(--ease), color var(--motion-fast, .18s) var(--ease);
}

@media(hover:hover) and (pointer:fine){
  .work-feature:hover .device-frame{
    transform:translateY(-4px);
  }
}

.work-feature .apple-seg,
.case-preview .apple-seg,
.work-feature iframe,
.case-preview iframe{
  pointer-events:auto;
}

.work-feature .apple-seg,
.case-preview .apple-seg button:focus-visible,
.work a:focus-visible,
.case-next a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media(max-width:959px){
  .work-feature,
  .work-feature--phone,
  .work-feature--wide .work-feature__copy,
  .case-split,
  .case-overview{
    grid-template-columns:1fr;
  }

  .work-feature--reverse{ direction:ltr; }
}

@media(max-width:800px){
  .work-hero,
  .work-block,
  .case-hero{ padding-top:clamp(2.6rem, 6vw, 4.2rem); }

  .work-feature{ padding:clamp(2.2rem, 5vw, 3.2rem) 0; }

  .case-next{ display:grid; }
  .case-next__next{ text-align:left; margin-left:0; }
}

@media(max-width:430px){
  .work-hero h1,
  .case-hero h1{
    font-size:clamp(2.35rem, 14vw, 3.3rem);
  }
}

@media(prefers-reduced-motion:reduce){
  html:has(.work){ scroll-behavior:auto; }

  .work-feature .device-frame,
  .case-preview .device-frame,
  .work-feature h2,
  .case-hero h1{
    transform:none !important;
    transition:none !important;
  }
}