/* ---------- SHARED WRAP ---------- */
.wrap{
  max-width: 860px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ---------- CASE HERO ---------- */
.case-hero{
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 48px 0;
  text-align: center;
}
.eyebrow{
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.case-title{
  font-family: 'Kadwa', serif;
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.15;
  margin: 0 0 18px;
}
.case-subtitle{
  font-size: 18px;
  line-height: 1.6;
  color: #C6C3B9;
  max-width: 620px;
  margin: 0 auto 36px;
}

.case-meta{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}
.meta-pill{
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 13px;
  color: var(--ink-dim);
}
.meta-pill b{ color: var(--ink); font-weight: 500; }
/* Opt-in company logo: sized under the pill's line box so the pill height is unchanged. */
.meta-pill.has-logo{ display: inline-flex; align-items: center; gap: 8px; }
.meta-pill .meta-logo{ height: 14px; width: auto; display: block; flex: none; }

/* ---------- HERO MEDIA / PLACEHOLDERS ---------- */
.media{
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  position: relative;
}
/* Real images in .media boxes — pointer-events:none passes clicks through to the
   .lightbox-trigger parent */
.media img{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.media .fill{
  position: absolute; inset: 0;
  background: linear-gradient(150deg, #201F1B, #0F0F0D);
}
.media .tag{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  padding: 24px;
  transition: opacity .3s ease;
}
.hero-media{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px 64px;
}
.hero-media .media{ aspect-ratio: 16/9; }

/* Opt-in for heroes that hold real artwork rather than a placeholder box: the
   image carries itself, so drop the card frame and let it fill the hero measure.
   Rounded corners stay (inherited from .media) so it still reads as site furniture.
   Placeholder heroes must NOT use this — the frame is their only visual. */
.hero-media.unframed .media{
  aspect-ratio: auto;
  padding: 0;
  background: none;
  border: 0;
}
.hero-media.unframed .media img{ height: auto; object-fit: initial; }

/* ---------- LIGHTBOX TRIGGER (hover affordance) ---------- */
.lightbox-trigger{ cursor: pointer; transition: transform .4s ease, border-color .4s ease; }
.lightbox-trigger:hover{ transform: translateY(-4px); border-color: rgba(244,242,237,0.22); }
.lightbox-trigger:hover .fill{ filter: grayscale(0.6) brightness(0.75); }
.lightbox-trigger:hover .tag{ opacity: 0.35; }

.view-btn{
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.3);
  pointer-events: none;
  z-index: 2;
}
.view-btn svg{
  width: 20px; height: 20px;
  stroke: var(--ink-on-accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lightbox-trigger:hover .view-btn{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---------- LIGHTBOX MODAL ---------- */
.lightbox-overlay{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10,10,10,0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.lightbox-overlay.is-open{ opacity: 1; pointer-events: auto; }

.lightbox-box{
  position: relative;
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-media{
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  position: relative;
}
.lightbox-track{
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .4s cubic-bezier(.3,.8,.4,1);
}
.lightbox-slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}
.lightbox-slide .fill{
  position: absolute; inset: 0;
  background: linear-gradient(150deg, #201F1B, #0F0F0D);
}
.lightbox-slide img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.lightbox-slide .tag{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  padding: 24px;
}

.lightbox-caption{
  margin-top: 22px;
  text-align: center;
  max-width: 640px;
  transition: opacity .2s ease;
}
.lightbox-caption.is-fading{ opacity: 0; }
.lightbox-title{
  font-family: 'Kadwa', serif;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 8px;
}
.lightbox-desc{
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-dim);
}
.lightbox-counter{
  margin-top: 14px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
}

.lightbox-close{
  position: fixed;
  top: 24px;
  right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(20,20,17,0.7);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 101;
  transition: border-color .2s ease, transform .2s ease;
}
.lightbox-close:hover{ border-color: var(--accent); transform: scale(1.08); }
.lightbox-close svg{
  width: 18px; height: 18px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.lightbox-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(20,20,17,0.7);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 101;
  transition: border-color .2s ease, transform .2s ease;
}
.lightbox-arrow svg{
  width: 18px; height: 18px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lightbox-prev{ left: -64px; }
.lightbox-next{ right: -64px; }
.lightbox-arrow:hover{ border-color: var(--accent); transform: translateY(-50%) scale(1.08); }
.lightbox-arrow[hidden]{ display: none; }

@media (max-width: 960px){
  .lightbox-prev{ left: 8px; }
  .lightbox-next{ right: 8px; }
}

/* ---------- SECTION CARD ---------- */
.section{
  max-width: 860px;
  margin: 0 auto;
  padding: 0 48px 40px;
  /* Clears the sticky nav pill when the chapter rail jumps to a section */
  scroll-margin-top: 96px;
}
.section-label{
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 44px;
}
.card h2{
  font-family: 'Kadwa', serif;
  font-weight: 500;
  font-size: 26px;
  margin: 0 0 18px;
}
.card h3{
  font-family: 'Kadwa', serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--accent);
  margin: 28px 0 10px;
}
.card h3:first-of-type{ margin-top: 0; }
.card p{
  font-size: 16px;
  line-height: 1.75;
  color: #C6C3B9;
  margin: 0 0 18px;
}
.card p:last-child{ margin-bottom: 0; }
/* em is a lead-in label here, not stress emphasis: upright, semibold, full-ink
   against the dimmer body copy. List items need it as much as paragraphs do —
   .card ul sets its own #C6C3B9, so without the li selector an <em> opening a
   bullet fell back to plain browser italic and lost the label treatment. */
.card p em,
.card li em{ font-style: normal; font-weight: 600; color: var(--ink); }
.card ul{
  margin: 0 0 18px;
  padding-left: 20px;
  color: #C6C3B9;
  font-size: 16px;
  line-height: 1.75;
}
.card ul:last-child{ margin-bottom: 0; }

/* ---------- STAT ROW ---------- */
.stat-row{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0 0;
}
.stat{
  flex: 1 1 140px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-align: center;
}
.stat-num{
  font-family: 'Kadwa', serif;
  font-size: 30px;
  color: var(--accent);
}
.stat-label{
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 6px;
}

/* ---------- GRID (principle-style: icon/number left, text right) ---------- */
.grid-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.grid-item{
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 34px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 26px;
  align-items: start;
}
.grid-num{
  font-family: 'Kadwa', serif;
  font-size: 28px;
  color: var(--accent);
  text-align: center;
}
.grid-item h3{
  font-family: 'Kadwa', serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 8px;
}
.grid-item p{
  font-size: 15px;
  line-height: 1.7;
  color: #C6C3B9;
  margin: 0;
}

/* ---------- QUOTES ---------- */
.quote-item{
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 32px;
}
.quote-item p{
  font-family: 'Kadwa', serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 10px;
  font-weight: 400;
}
.quote-item .quote-attr{
  font-size: 13px;
  color: var(--accent);
}

/* ---------- FLOW STEPS ---------- */
.flow-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.flow-step{
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 18px;
  text-align: center;
  /* Cells stretch to the tallest label in the row, so top-aligned content leaves
     dead space under the shorter ones. Which cards mismatch changes with the
     column count, so centre rather than pin a height. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flow-step .n{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-on-accent);
  font-family: 'Kadwa', serif;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.flow-step .t{
  font-size: 14px;
  color: var(--ink);
}

/* ---------- SHOT GALLERY ---------- */
.shot-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.shot{ display: block; }
.shot .media{ aspect-ratio: 4/3; }
.shot-title{
  font-family: 'Kadwa', serif;
  font-size: 16px;
  margin: 16px 0 6px;
}
.shot-caption{
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.6;
}

/* ---------- NEXT PROJECT ---------- */
.next-project{
  max-width: 860px;
  margin: 40px auto 0;
  padding: 0 48px;
}
.next-card{
  display: block;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 48px 44px;
  text-align: center;
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.next-card:hover,
.next-card:focus-visible{
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
}
.next-card:focus-visible .next-title{ color: var(--accent); }
.next-card:focus-visible{ outline: none; }
.next-label{
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 10px;
}
.next-title{
  font-family: 'Kadwa', serif;
  font-size: 28px;
  transition: color .3s ease;
}
.next-card:hover .next-title{ color: var(--accent); }
.next-arrow{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  margin-top: 0;
  overflow: hidden;
  color: var(--accent);
  opacity: 0;
  transform: translate(-6px, 4px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.3), height .3s ease, margin-top .3s ease;
}
.next-arrow svg{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.next-card:hover .next-arrow,
.next-card:focus-visible .next-arrow{
  height: 22px;
  margin-top: 16px;
  opacity: 1;
  transform: translate(0, 0);
}
.back-to-top{
  display: block;
  text-align: center;
  margin: 28px auto 0;
  font-size: 14px;
  color: var(--ink-dim);
}
.back-to-top:hover{ color: var(--ink); }

/* ---------- CHAPTER TABLE OF CONTENTS ----------
   Markup is generated by js/toc.js from data-chapter attributes.
   z-index 45 sits deliberately BELOW the nav pill (50), the mobile menu (55)
   and the lightbox (100), so any of those correctly covers the rail. */
.toc{
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
}
.toc-btn{ display: none; }

.toc-rail{
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border: 1px solid transparent;
  border-radius: 18px;
  transition: background .3s ease, border-color .3s ease;
}
/* Expands to labels on hover or keyboard focus, in the same translucent
   idiom as .navpill — so it reads as chrome even where it overlaps content. */
.toc:hover .toc-rail,
.toc:focus-within .toc-rail{
  background: rgba(20,20,17,0.72);
  backdrop-filter: blur(14px);
  border-color: var(--line);
}

.toc-item{
  display: flex;
  align-items: center;
  gap: 12px;
}
.toc-tick{
  flex: 0 0 auto;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-dim);
  opacity: 0.45;
  transition: width .3s cubic-bezier(.3,.8,.4,1), background-color .3s ease, opacity .3s ease;
}
.toc-item:hover .toc-tick{ opacity: 0.9; width: 24px; }
.toc-item[aria-current="true"] .toc-tick{
  width: 30px;
  background: var(--accent);
  opacity: 1;
}
.toc-label{
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
}
.toc:hover .toc-label,
.toc:focus-within .toc-label{ opacity: 1; transform: none; }
.toc-item:hover .toc-label{ color: var(--ink); }
.toc-item[aria-current="true"] .toc-label{ color: var(--ink); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px){
  .navbar{ display: none; }
  .mobile-menu-btn{ display: flex; }
  .mobile-menu{ display: flex; }

  /* Mirrors .mobile-menu-btn on the opposite corner — that button is
     top:20px right:20px, so the two never collide. */
  .toc{ top: 20px; left: 20px; transform: none; }
  .toc-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(20,20,17,0.55);
    backdrop-filter: blur(10px);
    cursor: pointer;
    padding: 0;
  }
  .toc-btn svg{
    width: 19px; height: 19px;
    stroke: var(--ink);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
  }
  .toc-btn svg circle{ fill: var(--ink); stroke: none; }

  .toc-rail{
    position: absolute;
    top: 54px;
    left: 0;
    min-width: 208px;
    padding: 14px 18px;
    gap: 16px;
    background: rgba(20,20,17,0.94);
    backdrop-filter: blur(14px);
    border-color: var(--line);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .toc.is-open .toc-rail{ opacity: 1; pointer-events: auto; transform: none; }
  /* Labels are always readable inside the panel; the tick is just the marker */
  .toc-label{ opacity: 1; transform: none; font-size: 14px; }
  .toc-tick{ width: 12px; }
  .toc-item[aria-current="true"] .toc-tick{ width: 20px; }

  .section{ scroll-margin-top: 80px; }

  .case-hero{ padding: 96px 24px 0; }
  .hero-media{ padding: 0 24px 48px; }
  .section{ padding: 0 24px 32px; }
  .card{ padding: 30px 26px; }
  .grid-item{ grid-template-columns: 1fr; text-align: left; }
  .grid-num{ text-align: left; }
  .flow-steps{ grid-template-columns: 1fr 1fr; }
  .shot-grid{ grid-template-columns: 1fr; }
  .next-project{ padding: 0 24px; }
  .next-card{ padding: 36px 26px; }
}