/* ============================================================
   work.css — "Our Latest Works" grid + project detail pages
   ============================================================ */

/* ---------- latest works grid ---------- */
.latestworks {
  padding: clamp(80px, 10vw, 160px) 24px clamp(80px, 10vw, 140px);
  border-top: 1px solid rgba(244,239,229,.10);
}
.latestworks__head {
  max-width: 1280px;
  margin: 0 auto clamp(56px, 7vw, 96px);
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.latestworks__eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  opacity: .6;
}
.latestworks__title {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 900; font-stretch: 125%;
  font-size: clamp(60px, 9vw, 160px);
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--paper);
  text-wrap: balance;
}

.lw__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 28px;
}
@media (max-width: 980px) { .lw__grid { grid-template-columns: 1fr 1fr; gap: 28px 22px; } }
@media (max-width: 640px) { .lw__grid { grid-template-columns: 1fr; } }
.lw__grid--two { grid-template-columns: 1fr 1fr; max-width: 1080px; gap: 36px 32px; }
.lw__grid--quad { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
.lw__grid--one { grid-template-columns: minmax(0, 720px); justify-content: center; max-width: 1080px; }
@media (max-width: 640px) { .lw__grid--one { grid-template-columns: 1fr; } }

.lw__tile {
  display: flex; flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: var(--paper);
  transition: transform .45s var(--eo);
}
.lw__tile:hover { transform: translateY(-3px); }

.lw__thumb {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  overflow: hidden;
  background: #131312;
  border: 1px solid rgba(244,239,229,.08);
  transition: border-color .35s var(--eo);
}
.lw__thumb .ph,
.lw__thumb .reel__media { position: absolute; inset: 0; border-radius: 0; }
.lw__thumb .reel__media--img { background-size: cover; background-position: center; }
.lw__tile:hover .lw__thumb { border-color: rgba(244,239,229,.22); }

.lw__meta {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 18px;
  padding: 4px 4px 0;
}
.lw__textblock { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.lw__name {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(14px, 1.15vw, 18px);
  letter-spacing: .04em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--paper);
}
.lw__date {
  font-size: 10px;
  letter-spacing: .16em;
  opacity: .55;
}
.lw__arrow {
  font-family: var(--f-mono);
  font-size: 20px;
  line-height: 1;
  opacity: .55;
  transition: transform .35s var(--eo), opacity .35s var(--eo), color .35s var(--eo);
}
.lw__tile:hover .lw__arrow {
  transform: translateX(6px);
  opacity: 1;
  color: var(--orange);
}

/* ============================================================
   PROJECT DETAIL PAGE — card-rich editorial
   ============================================================ */

.proj { padding: 110px 24px 0; }

.proj__topbar {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  padding-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 880px) { .proj__topbar { grid-template-columns: 1fr; } }

.proj__head { display: flex; flex-direction: column; gap: 18px; }
.proj__crumb {
  font-size: 10px; letter-spacing: .16em;
  opacity: .55;
}
.proj__crumb a { transition: opacity .3s var(--eo); }
.proj__crumb a:hover { opacity: 1; color: var(--orange); }
.proj__crumb span { color: var(--paper); font-weight: 700; opacity: 1; }

.proj__date {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .18em;
  opacity: .7;
  text-transform: uppercase;
}
.proj__date::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral);
  animation: livePulse 1.6s var(--eo) infinite;
}
.proj__title {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 900; font-stretch: 125%;
  font-size: clamp(48px, 6.4vw, 112px);
  line-height: .88;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--paper);
}
.proj__title .bigtitle__r { color: var(--orange); font-size: .22em; vertical-align: super; opacity: .65; }
.proj__lede {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  opacity: .8;
  max-width: 52ch;
}
.proj__tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.proj__tag {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .16em;
}
.proj__tag--orange { background: var(--orange); color: var(--ink); }
.proj__tag--coral  { background: var(--coral); color: var(--paper); }
.proj__tag--ghost  { border: 1px solid rgba(244,239,229,.25); color: var(--paper); opacity: .85; }

/* Spec card */
.proj__speccard {
  background: #131312;
  border: 1px solid rgba(244,239,229,.12);
  border-radius: 22px;
  padding: 22px 24px;
  display: flex; flex-direction: column;
  gap: 0;
  position: relative;
  align-self: end;
}
.proj__speccard-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(244,239,229,.14);
  font-size: 10px; letter-spacing: .16em;
  opacity: .65;
}
.proj__specrow {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(244,239,229,.10);
}
.proj__specrow:last-of-type { border-bottom: 0; }
.proj__speck {
  font-size: 10px; letter-spacing: .16em;
  opacity: .55;
  text-transform: uppercase;
  font-family: var(--f-mono);
}
.proj__specv {
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(15px, 1.2vw, 20px);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--paper);
  line-height: 1.1;
}
.proj__speccard-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid rgba(244,239,229,.14);
  font-size: 10px; letter-spacing: .16em;
  opacity: .7;
}
.proj__speccard-foot .barcode { flex: 1; opacity: .55; }

/* HERO image card */
.proj__hero {
  max-width: 1280px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: #131312;
  border: 1px solid rgba(244,239,229,.1);
}
.proj__hero .ph { position: absolute; inset: 0; border-radius: 0; }
.proj__hero .reel__media { position: absolute; inset: 0; border-radius: 0; }
.proj__hero .reel__media--img { background-size: cover; background-position: center; }
.proj__hero-tag {
  position: absolute; top: 18px; left: 18px;
  z-index: 2;
  background: rgba(14,14,13,.85);
  border: 1px solid rgba(244,239,229,.18);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 10px; letter-spacing: .18em;
}

/* SECTION CARD (the new card-wrapped blocks) */
.proj__sectioncard {
  max-width: 1280px;
  margin: 0 auto clamp(24px, 3vw, 36px);
  background: #131312;
  border: 1px solid rgba(244,239,229,.12);
  border-radius: 22px;
  padding: 36px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  position: relative;
  transition: border-color .35s var(--eo);
}
.proj__sectioncard:hover { border-color: rgba(244,239,229,.22); }
.proj__sectioncard--wide { grid-template-columns: 280px 1fr; }
@media (max-width: 880px) {
  .proj__sectioncard,
  .proj__sectioncard--wide { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
}

.proj__sectionhead {
  display: flex; flex-direction: column;
  gap: 12px;
  position: relative;
  padding-right: 18px;
}
.proj__sectionhead::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 1px;
  background: rgba(244,239,229,.12);
}
@media (max-width: 880px) {
  .proj__sectionhead { padding-right: 0; padding-bottom: 14px; border-bottom: 1px solid rgba(244,239,229,.12); }
  .proj__sectionhead::after { display: none; }
}

.proj__sectionno {
  font-size: 10px; letter-spacing: .2em;
  opacity: .55;
}
.proj__block-h {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.proj__block-h--lg { font-size: clamp(26px, 2.6vw, 40px); }
.proj__sectioncard--orange .proj__block-h { color: var(--orange); }
.proj__sectioncard--coral  .proj__block-h { color: var(--coral); }
.proj__sectioncard--wide   .proj__block-h { color: var(--paper); }

.proj__sectionbody {
  display: flex; flex-direction: column;
  gap: 14px;
}
.proj__sectionbody p {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.65;
  opacity: .82;
  max-width: 72ch;
}
.proj__sectionbody--cols {
  column-count: 2;
  column-gap: 32px;
  display: block;
}
.proj__sectionbody--cols p { break-inside: avoid; margin-bottom: 14px; max-width: none; }
@media (max-width: 880px) { .proj__sectionbody--cols { column-count: 1; } }

.proj__sectionfoot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(244,239,229,.12);
  font-size: 10px; letter-spacing: .16em;
  opacity: .6;
}
.proj__sectionfoot--wide { justify-content: space-between; }

/* TWO-UP image row */
.proj__duo {
  max-width: 1280px;
  margin: 0 auto clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 720px) { .proj__duo { grid-template-columns: 1fr; } }
.proj__duo-cell {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #131312;
  border: 1px solid rgba(244,239,229,.1);
  margin: 0;
  display: flex; flex-direction: column;
}
.proj__duo-cell > .ph {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.proj__cap {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-size: 13px;
  border-top: 1px solid rgba(244,239,229,.10);
}
.proj__cap .mono { opacity: .55; font-size: 10px; letter-spacing: .16em; }

/* VIDEO frame */
.proj__video {
  max-width: 1280px;
  margin: 0 auto clamp(24px, 3vw, 36px);
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: #0e0e0d;
  border: 1px solid rgba(244,239,229,.12);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(229,164,89,.12), transparent 60%),
    repeating-linear-gradient(135deg, rgba(244,239,229,.04) 0 12px, transparent 12px 24px);
}
.proj__video iframe,
.proj__video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.proj__video::after {
  content: "▸";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 80px;
  color: rgba(244,239,229,.55);
  pointer-events: none;
  text-shadow: 0 6px 30px rgba(0,0,0,.5);
}
.proj__video.has-source::after { display: none; }
.proj__video-tag {
  position: absolute; bottom: 18px; left: 18px;
  z-index: 2;
  background: rgba(14,14,13,.88);
  border: 1px solid rgba(244,239,229,.18);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 10px; letter-spacing: .18em;
}

/* video source credit (e.g. YouTube link under embed) */
.proj__source {
  max-width: 1280px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 14px 18px;
  display: flex; align-items: center;
  gap: 18px;
  border: 1px solid rgba(244,239,229,.14);
  border-radius: 8px;
  background: rgba(244,239,229,.03);
}
.proj__source-lbl {
  font-size: 10px; letter-spacing: .22em;
  opacity: .55;
  padding-right: 18px;
  border-right: 1px solid rgba(244,239,229,.14);
}
.proj__source-link {
  display: inline-flex; align-items: center;
  gap: 10px;
  font-size: 11px; letter-spacing: .14em;
  color: var(--paper);
  text-decoration: none;
  transition: opacity .25s var(--eo);
}
.proj__source-link:hover { opacity: .7; }
.proj__source-icon { color: #ff0033; flex: none; }
.proj__source-arrow { opacity: .55; font-size: 12px; }

/* foot nav */
.proj__nav {
  max-width: 1280px;
  margin: clamp(40px, 5vw, 72px) auto 0;
  padding: 28px 0 80px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(244,239,229,.12);
  gap: 24px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .18em;
}
.proj__nav a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 1px solid rgba(244,239,229,.22);
  border-radius: 999px;
  transition: background .3s var(--eo), color .3s var(--eo), border-color .3s var(--eo), gap .3s var(--eo);
}
.proj__nav a:hover {
  background: var(--orange); color: var(--ink); border-color: var(--orange);
  gap: 14px;
}


/* ============================================================
   BENTO GRID — varied card sizes for project detail page
   ============================================================ */

.bento {
  max-width: 1280px;
  margin: 0 auto clamp(20px, 2.5vw, 32px);
  display: grid;
  gap: 18px;
}

.bento--01 { grid-template-columns: 1.2fr 1.4fr 1fr; }
.bento--02 { grid-template-columns: 1fr 1.5fr; }
.bento--03 { grid-template-columns: 1.5fr 1fr; }
.bento--04 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) {
  .bento--01, .bento--02, .bento--03, .bento--04 { grid-template-columns: 1fr; }
}

.bento > article {
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  transition: transform .4s var(--eo), border-color .35s var(--eo);
}
.bento > article:hover { transform: translateY(-3px); }

.bento__pull {
  background: #131312;
  border: 1px solid rgba(244,239,229,.12);
  padding: 32px;
  justify-content: space-between;
  gap: 18px;
}
.bento__lbl { font-size: 10px; letter-spacing: .18em; opacity: .55; }
.bento__quote {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 700; font-stretch: 110%;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.1; letter-spacing: -.02em;
  color: var(--paper);
}
.bento__quote em { color: var(--orange); font-style: italic; font-weight: 600; }
.bento__attr { font-size: 10px; letter-spacing: .16em; opacity: .55; align-self: flex-end; }

.bento__imgcard {
  aspect-ratio: 4 / 3;
  background: #131312;
  border: 1px solid rgba(244,239,229,.1);
}
.bento__imgcard--orange { background: #2a200d; }
.bento__imgcard > .ph { position: absolute; inset: 0; border-radius: 0; }
.bento__imgcap {
  position: absolute; bottom: 12px; left: 12px;
  z-index: 2;
  background: rgba(14,14,13,.85);
  border: 1px solid rgba(244,239,229,.18);
  color: var(--paper);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10px; letter-spacing: .16em;
}

.bento__numcard {
  background: var(--orange);
  color: var(--ink);
  padding: 26px;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(14,14,13,.1);
}
.bento__numbig {
  font-family: var(--f-disp);
  font-weight: 900; font-stretch: 125%;
  font-size: clamp(72px, 8vw, 130px);
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--ink);
}
.bento__numlbl { font-size: 11px; letter-spacing: .18em; line-height: 1.4; opacity: .85; }
.bento__numrow {
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: .14em;
  padding-top: 14px;
  border-top: 1.5px solid var(--ink);
}

.bento__textcard {
  background: #131312;
  border: 1px solid rgba(244,239,229,.12);
  padding: 32px;
  gap: 14px;
  justify-content: center;
}
.bento__textcard--coral {
  background: var(--coral);
  color: var(--paper);
  border-color: transparent;
}
.bento__textcard--coral .bento__lbl { opacity: .85; color: var(--paper); }
.bento__textcard--coral p { opacity: .92; }
.bento__textcard--coral .bento__chips span { background: rgba(14,14,13,.4); color: var(--paper); border-color: rgba(244,239,229,.2); }
.bento__h {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.bento__textcard p {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  opacity: .82;
  max-width: 50ch;
}
.bento__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bento__chips span {
  padding: 6px 12px;
  border: 1px solid rgba(244,239,229,.18);
  border-radius: 999px;
  font-size: 9px; letter-spacing: .16em;
  opacity: .85;
}

.bento__bigimg {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 22px;
  overflow: hidden;
  background: #131312;
  border: 1px solid rgba(244,239,229,.1);
}
.bento__bigimg > .ph { position: absolute; inset: 0; border-radius: 0; }
.bento__bigimg-tag {
  position: absolute; bottom: 14px; left: 14px;
  z-index: 2;
  background: rgba(14,14,13,.85);
  border: 1px solid rgba(244,239,229,.18);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 10px; letter-spacing: .18em;
}
.bento__bigimg--alt { aspect-ratio: 5 / 4; }

.bento__gallery {
  max-width: 100%;
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  padding: 24px 0;
  position: relative;
}
.bento__gallery-lbl {
  display: block;
  padding: 0 24px 14px;
  max-width: 1280px;
  margin: 0 auto;
  font-size: 10px; letter-spacing: .18em; opacity: .55;
}
.bento__gallery-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 24px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.bento__gallery-track::-webkit-scrollbar { height: 6px; }
.bento__gallery-track::-webkit-scrollbar-track { background: rgba(244,239,229,.06); border-radius: 6px; }
.bento__gallery-track::-webkit-scrollbar-thumb { background: rgba(244,239,229,.2); border-radius: 6px; }
.bento__gallery-cell {
  flex: 0 0 320px;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: #131312;
  border: 1px solid rgba(244,239,229,.1);
  scroll-snap-align: start;
  transition: border-color .3s var(--eo);
}
.bento__gallery-cell:hover { border-color: rgba(244,239,229,.3); }
.bento__gallery-cell > .ph { position: absolute; inset: 0; border-radius: 0; }
.bento__gallery-cell > .mono {
  position: absolute; bottom: 10px; left: 10px;
  z-index: 2;
  background: rgba(14,14,13,.85);
  color: var(--paper);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 9px; letter-spacing: .16em;
  border: 1px solid rgba(244,239,229,.18);
}

.bento__poster {
  max-width: 1280px;
  margin: 0 auto clamp(20px, 2.5vw, 32px);
  padding: clamp(60px, 7vw, 100px) 48px;
  background:
    radial-gradient(circle at 20% 30%, rgba(229,164,89,.15), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(229,89,71,.12), transparent 60%),
    #131312;
  border: 1px solid rgba(244,239,229,.14);
  border-radius: 22px;
  display: flex; flex-direction: column;
  gap: 28px;
  position: relative;
  overflow: hidden;
}
.bento__poster-lbl { font-size: 10px; letter-spacing: .18em; opacity: .55; }
.bento__poster-h {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 900; font-stretch: 125%;
  font-size: clamp(40px, 6vw, 100px);
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.bento__poster-em {
  color: var(--orange);
  font-style: italic;
  font-weight: 700;
  font-family: var(--f-disp);
}

.bento__metacard {
  padding: 28px;
  gap: 14px;
  min-height: 220px;
  border-radius: 22px;
  color: var(--ink);
  justify-content: space-between;
}
.bento__metacard--orange { background: var(--orange); }
.bento__metacard--coral  { background: var(--coral); color: var(--paper); }
.bento__metacard--sage   { background: var(--sage); }
.bento__metacard-no { font-size: 11px; letter-spacing: .2em; opacity: .65; }
.bento__metacard h3 {
  margin: 6px 0 0;
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.bento__metacard p { margin: 0; font-size: 14px; line-height: 1.5; max-width: 30ch; }

.bento__strip {
  max-width: 1280px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(244,239,229,.12);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(244,239,229,.12);
}
@media (max-width: 700px) { .bento__strip { grid-template-columns: 1fr 1fr; } }
.bento__stripcell {
  background: #131312;
  padding: 24px 22px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.bento__strip-num {
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--paper);
}
.bento__strip-lbl { font-size: 10px; letter-spacing: .18em; opacity: .55; }


/* ============================================================
   PROCESS STRIP — minimal "how we made it" 3-step grid
   ============================================================ */
.proj__process {
  max-width: 1280px;
  margin: 0 auto clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 36px;
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid rgba(244,239,229,.12);
}
@media (max-width: 880px) { .proj__process { grid-template-columns: 1fr; gap: 24px; } }
.proj__process-head { display: flex; flex-direction: column; gap: 14px; align-self: start; position: sticky; top: 100px; }
@media (max-width: 880px) { .proj__process-head { position: static; } }
.proj__process-lbl { font-size: 10px; letter-spacing: .18em; opacity: .55; }
.proj__process-h {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1; letter-spacing: -.025em;
  text-transform: uppercase;
}
.proj__process-grid {
  display: flex; flex-direction: column;
  gap: 14px;
}
.proj__step {
  border-radius: 20px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 24px;
  align-items: center;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  cursor: default;
  isolation: isolate;
  opacity: 0;
  transform: translateY(14px);
  animation: stepIn 0.7s cubic-bezier(.22,.61,.36,1) forwards;
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1), box-shadow 0.5s var(--eo);
}
.proj__step:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.4);
}
.proj__step > * { position: relative; z-index: 2; }

.proj__step--orange { background: var(--orange); animation-delay: 0s; }
.proj__step--coral  { background: var(--coral); color: var(--paper); animation-delay: 0.12s; }
.proj__step--sage   { background: var(--sage); animation-delay: 0.24s; }

@keyframes stepIn {
  to { opacity: 1; transform: translateY(0); }
}

.proj__step-no {
  font-family: var(--f-disp);
  font-weight: 900; font-stretch: 125%;
  font-size: clamp(56px, 5.5vw, 88px);
  line-height: 0.9;
  letter-spacing: -.05em;
  color: var(--ink);
  opacity: .85;
}
.proj__step--coral .proj__step-no { color: var(--paper); }

.proj__step-body { display: flex; flex-direction: column; gap: 8px; }
.proj__step h3 {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -.015em;
  line-height: 1.05;
}
.proj__step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  max-width: 60ch;
  opacity: 0.88;
}

.proj__step-arrow {
  font-family: var(--f-mono);
  font-size: 22px; line-height: 1;
  color: currentColor;
  opacity: 0.45;
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1), opacity 0.45s var(--eo);
}
.proj__step:hover .proj__step-arrow { transform: translateX(4px); opacity: 0.9; }

@media (max-width: 720px) {
  .proj__step { grid-template-columns: 64px 1fr; padding: 22px 24px; gap: 16px; }
  .proj__step-arrow { display: none; }
}