/* ============================================================
   PROJECT CASE STUDY — design tokens
   ============================================================ */
:root {
  --pc-bg:           #061226;
  --pc-surface:      #0d2147;
  --pc-accent:       #6fa8ff;
  --pc-accent-light: #7da4fb;
  --pc-text:         #ffffff;
  --pc-secondary:    rgba(255,255,255,0.8);
  --pc-muted:        rgba(255,255,255,0.55);
  --pc-faint:        rgba(255,255,255,0.2);
  --pc-divider:      rgba(255,255,255,0.06);
  --pc-border:       rgba(255,255,255,0.07);
  --pc-pad:          64px;

  /* TRIAL: solid panel bg so particles don't show through the text boxes.
     To cancel, swap this back to: rgba(255,255,255,0.045) */
  --pc-panel-bg:     #111d30;
}

body {
  background: var(--pc-bg);
  font-family: 'Outfit', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ============================================================
   SITE HEADER override — match design padding
   ============================================================ */
.site-header {
  padding: 28px var(--pc-pad) 76px;
}
@media (max-width: 640px), (max-height: 700px) {
  .site-header { padding: 20px 24px 100px; }
  .nav-contact__email { font-size: 14px; }
  .nav-contact__phone { font-size: 13px; }
}

/* ============================================================
   SCROLLSPY — right dots
   ============================================================ */
#scrollspy-right {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 20px;
  z-index: 100;
}
.spy-item {
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-end; cursor: pointer;
  transition: background 0.25s, padding 0.25s;
}
.spy-label {
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
  text-align: right; white-space: nowrap;
}
.spy-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
  flex-shrink: 0;
}
.spy-item.active {
  background: rgba(111,168,255,0.12); border-radius: 20px;
  padding: 5px 12px 5px 14px;
}
.spy-item.active .spy-label { color: #ffffff; font-weight: 700; }
.spy-item.active .spy-dot {
  width: 10px; height: 10px;
  background: #6fa8ff;
  box-shadow: 0 0 0 4px rgba(111,168,255,0.25);
  transform: none;
}

/* ============================================================
   STICKY TOP NAV (alternate nav style)
   ============================================================ */
#sticky-top-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,18,38,0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 0 var(--pc-pad);
  display: none; gap: 36px; align-items: center; justify-content: center;
  height: 48px;
}
.sticky-link {
  font-size: 12px; color: rgba(255,255,255,0.35);
  letter-spacing: 0.06em; cursor: pointer;
  transition: color 0.2s; text-decoration: none;
  white-space: nowrap; padding: 0;
  background: none; border: none;
  font-family: 'Outfit', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.sticky-link:hover { color: rgba(255,255,255,0.7); }
.sticky-link.active { color: #fff; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.pc-breadcrumb {
  /* Left padding = var(--pc-pad) + the hero title's own border+padding
     offset (4px border + 22px padding-left), so "Projects" lines up with
     the title's text rather than its accent bar. Kept in sync with the
     title's mobile offset (3px + 14px) in the responsive block below. */
  padding: 0 var(--pc-pad) 5px calc(var(--pc-pad) + 26px);
  font-size: 14px; color: var(--pc-muted);
  display: flex; align-items: center; justify-content: space-between;
  gap: 0px; flex-wrap: wrap;
}
.pc-breadcrumb a { color: var(--pc-muted); text-decoration: none; }
.pc-breadcrumb a:hover { color: var(--pc-text); }

/* ============================================================
   HERO — three variants
   ============================================================ */
.pc-hero { padding: 0 var(--pc-pad) 20px; position: relative; }

/* Shared hero title */
.pc-hero__eyebrow {
  font-size: 12px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3); text-transform: uppercase; margin-bottom: 16px;
}
.pc-hero__title {
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: -0.02em; line-height: 1.05;
  margin: 0 0 20px; color: var(--pc-text);
  border-left: 4px solid var(--pc-accent);
  padding-left: 22px;
}

/* Full variant */
.pc-hero--full .pc-hero__title { font-weight: 600; }
.pc-hero__tagline {
  font-size: 18px; font-weight: 300;
  color: rgba(255,255,255,0.5); margin: 0 0 40px; max-width: 600px;
}
.pc-hero__meta-row { display: flex; gap: 64px; }
.pc-hero__meta-label {
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pc-accent); margin-bottom: 6px;
}
.pc-hero__meta-value { font-size: 15px; font-weight: 400; color: rgba(255,255,255,0.85); }

/* Compact variant */
.pc-hero--compact .pc-hero__title { font-weight: 600; margin-bottom: 32px; }

/* Minimal variant */
.pc-hero--minimal .pc-hero__title {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
}
.pc-hero__meta-inline {
  font-size: 13px; color: rgba(255,255,255,0.62);
  display: flex; gap: 24px; align-items: center;
}
.pc-hero__meta-inline .sep { opacity: 0.3; }
.pc-hero__visit {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--pc-text); text-decoration: none;
  background: transparent;
  border: 1.5px solid var(--pc-accent);
  padding: 13px 32px; border-radius: 100px;
  transition: color 0.2s ease, background 0.2s ease;
}
.pc-hero__visit-arrow { display: inline-block; transition: transform 0.2s ease; }
@media (hover: hover) {
  .pc-hero__visit:hover { background: rgba(111,168,255,0.16); }
  .pc-hero__visit:hover .pc-hero__visit-arrow { transform: translateX(3px); }
}
.pc-hero__visit:active { background: rgba(111,168,255,0.16); }

/* Variant visibility helpers */
.pc-hero { display: none; }
.pc-hero.is-active {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
}
.pc-hero.is-active .pc-hero__title { margin: 0; }

/* ============================================================
   HERO IMAGE
   ============================================================ */
.pc-hero-img {
  padding: 32px var(--pc-pad) 40px;
}
.pc-hero-img__frame {
  border-radius: 10px; overflow: hidden;
}
.pc-hero-img__frame img {
  width: 100%; height: auto; display: block;
}

/* Portrait source photo (e.g. a phone-app screenshot) used as the hero
   image: width:100%/height:auto above stretches it to an enormous height
   on desktop since there's no cap there (only the 1024px/640px breakpoints
   constrain height). Give it its own fixed height + cover crop at every
   breakpoint instead. */
.pc-hero-img__frame--portrait-source { height: 480px; }
.pc-hero-img__frame--portrait-source img {
  height: 100%; object-fit: cover; object-position: center;
}

/* ============================================================
   IMPACT METRICS
   ============================================================ */
.pc-impact {
  padding: 80px var(--pc-pad);
}
.pc-impact__label {
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pc-text);
}
.pc-impact__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 40px; margin-top: 40px;
}
.pc-impact__number {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 300; letter-spacing: -0.02em; line-height: 1;
  color: var(--pc-text);
}
.pc-impact__number.is-accent { color: var(--pc-accent); }
.pc-impact__desc {
  font-size: 13px; color: rgba(255,255,255,0.4);
  margin-top: 8px; line-height: 1.5;
}

/* ============================================================
   DIVIDER — panels now provide section separation
   ============================================================ */
.pc-divider {
  display: none;
}

/* ============================================================
   SECTION SHARED
   ============================================================ */
#sec-problem, #sec-solution, #sec-process, #sec-design, #sec-gallery {
  background: var(--pc-panel-bg);
  border-radius: 16px;
  margin: 0 var(--pc-pad) 24px;
  padding: 40px 44px;
}

/* Scroll reveal: components.js marks each section .reveal-pending up
   front, then swaps it for .in-view the first time it crosses into the
   viewport (IntersectionObserver, one-shot). No .reveal-pending class
   ever appears without JS, so a JS-less load just shows everything. */
[id^="sec-"], .pc-philosophy {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[id^="sec-"].reveal-pending, .pc-philosophy.reveal-pending {
  opacity: 0;
  transform: translateY(28px);
}
@media (prefers-reduced-motion: reduce) {
  [id^="sec-"].reveal-pending, .pc-philosophy.reveal-pending { opacity: 1; transform: none; }
}

.sec-num, .section-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--pc-accent);
}
.sec-num { margin: 0 0 14px; }
.section-tag { text-transform: uppercase; margin-bottom: 14px; }
.section-tag::before { content: "\2014\00A0"; }
.section-title {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.15; margin: 0 0 20px; color: var(--pc-text);
}
.body-text {
  font-size: 16px; font-weight: 400;
  line-height: 1.75; color: var(--pc-secondary); margin: 0;
}
.screen-frame {
  border-radius: 10px; overflow: hidden;
}
.screen-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.img-caption {
  font-size: 12px; color: rgba(255,255,255,0.68);
  letter-spacing: 0.04em; margin-top: 12px;
}

/* ============================================================
   01 PROBLEM — four layout variants
   ============================================================ */

/* Layout: split */
.prob-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: start;
}
.prob-split .body-text { padding-top: 32px; }

/* Layout: image-right */
.prob-image-right {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}

/* Layout: image-left */
.prob-image-left {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}

/* Layout: stacked */
.prob-stacked .section-title { max-width: 720px; }
.prob-stacked .body-text { max-width: 640px; margin-bottom: 40px; }
.prob-stacked .screen-frame { height: 320px; }

/* Problem layout visibility */
.prob-layout { display: none; }
.prob-layout.is-active { display: block; }
.prob-image-right,
.prob-image-left { display: none; }
.prob-image-right.is-active,
.prob-image-left.is-active { display: grid; }
.prob-split.is-active { display: grid; }

/* ============================================================
   02 SOLUTION
   ============================================================ */
#sec-solution .right-col { margin-top: 20px; }
.pc-pill-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.pc-pill {
  font-size: 12px; padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 100px;
  color: rgba(255,255,255,0.5);
}
.pc-solution-img {
  padding: 0 var(--pc-pad) 24px;
}
.pc-solution-img .screen-frame { height: 340px; }
.pc-solution-img .screen-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

/* La Moka Caffe Solution image: same source shown twice, CSS-toggled by
   breakpoint rather than reordered, since desktop and mobile want it in
   two structurally different spots (centered above the grid vs. inline
   between two of the grid's text cells) — a single reordered element
   can't satisfy both placements. */
.lmc-solution-img { max-width: 560px; margin: 0 auto; }
.lmc-solution-img .screen-frame { height: 320px; }
.lmc-solution-img--mobile { display: none; }
@media (max-width: 640px) {
  .lmc-solution-img--desktop { display: none; }
  .lmc-solution-img--mobile { display: block; max-width: none; margin: 0; }
}

/* ============================================================
   03 PROCESS
   ============================================================ */
.pc-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px; margin-top: 40px;
}
.pc-step {
  border-top: 1px solid rgba(74,124,248,0.4); padding-top: 16px;
}
.pc-step__num {
  font-size: 11px; color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em; margin-bottom: 8px;
}
.pc-step__label {
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); line-height: 1.4;
}

/* ============================================================
   04 SECTION DESIGN
   ============================================================ */
.pc-design-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-top: 40px;
}
.pc-design-cell {}
.pc-design-cell .screen-frame { height: 220px; }
.pc-design-cell .screen-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

/* Two horizontal images side by side, centered, with text below */
.pc-duo-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.pc-design-cell__title {
  font-size: 13px; font-weight: 600;
  color: var(--pc-text); margin: 16px 0 4px;
}

/* Loose gallery: no frame, no border — images sit at their natural size */
.pc-gallery-heading {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pc-muted); margin-bottom: 20px;
}
.pc-gallery-grid {
  display: flex; flex-wrap: wrap; gap: 28px; justify-content: center;
}
.pc-gallery-grid--desktop .pc-gallery-item { width: calc(50% - 14px); }
.pc-gallery-grid--mobile .pc-gallery-item { width: calc(25% - 21px); }
.pc-gallery-item img, .pc-gallery-item video {
  display: block; width: 100%; border-radius: 6px;
  object-fit: cover; object-position: top;
}
.pc-gallery-grid--desktop .pc-gallery-item img,
.pc-gallery-grid--desktop .pc-gallery-item video { height: 340px; }
/* Mobile-screenshot gallery: these are tall phone screenshots, not
   landscape shots, so cropping to a short fixed height like the desktop
   grid cuts most of the screen off. Use contain so the full screenshot
   always shows, letterboxed on the page background if needed. */
.pc-gallery-grid--mobile .pc-gallery-item img,
.pc-gallery-grid--mobile .pc-gallery-item video { height: 480px; object-fit: contain; }
.pc-gallery-item { position: relative; }
.pc-gallery-item video { cursor: pointer; background: #000; }
.pc-gallery-item__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.pc-gallery-item__play::after {
  content: ''; border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff; margin-left: 4px;
}
.pc-gallery-item.is-playing .pc-gallery-item__play { opacity: 0; }
.pc-gallery-item__label {
  margin-top: 10px; font-size: 12px; color: var(--pc-muted);
  text-align: center;
}

/* ============================================================
   PHILOSOPHY DEPTH CARD
   ============================================================ */
.pc-philosophy { padding: 80px var(--pc-pad); }
.pc-philosophy__card {
  background: var(--pc-surface);
  border: 1px solid rgba(74,124,248,0.22); border-radius: 12px;
  padding: 56px var(--pc-pad); position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.pc-philosophy__highlight {
  position: absolute; top: -1px; left: var(--pc-pad); right: var(--pc-pad);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(74,124,248,0.55), transparent);
}
.pc-philosophy__label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 20px;
}
.pc-philosophy__body {
  font-size: clamp(20px, 2.2vw, 28px); font-weight: 400;
  color: rgba(255,255,255,0.9); line-height: 1.55;
  margin: 0; letter-spacing: -0.01em; max-width: 820px;
}
.pc-philosophy__body em { color: var(--pc-accent-light); font-style: normal; }

/* ============================================================
   BOTTOM NAVIGATION
   ============================================================ */
.pc-bottom-nav {
  padding: 32px var(--pc-pad) 100px;
  display: flex; align-items: center; justify-content: space-between;
}
.pc-bottom-nav a {
  font-size: 18px; font-weight: 500; color: rgba(255,255,255,0.75);
  text-decoration: none; transition: color 0.2s;
}
.pc-bottom-nav a:hover { color: var(--pc-text); }
.pc-bottom-nav__next { color: var(--pc-accent-light); font-weight: 600; }
.pc-bottom-nav__next:hover { color: var(--pc-text); }

/* ============================================================
   PLACEHOLDER — asset not supplied yet (mirrors .project-card__image)
   ============================================================ */
.pc-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(111,168,255,0.14) 0%, rgba(111,168,255,0.03) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--pc-muted); font-size: 13px; letter-spacing: 0.04em;
  text-align: center; padding: 12px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  :root { --pc-pad: 40px; }
  .pc-hero-img__frame { height: 60vh; }
  .pc-impact__grid { grid-template-columns: repeat(2, 1fr); }
  #sec-problem, #sec-solution, #sec-process, #sec-design, #sec-gallery { padding: 32px; }
  .pc-steps { grid-template-columns: repeat(2, 1fr); }
  .prob-split,
  .prob-image-right,
  .prob-image-left { grid-template-columns: 1fr; gap: 32px; }
  /* prob-image-left's DOM order is image-then-text (so the image lands
     on the left on desktop); stacked on mobile that put the image above
     the text. Swap the visual order only, so text always reads first on
     mobile regardless of which side the image sits on at desktop width. */
  .prob-image-left > *:first-child { order: 2; }
  .prob-image-left > *:last-child { order: 1; }
  .pc-gallery-grid--mobile .pc-gallery-item { width: calc(50% - 14px); }
}

@media (max-width: 640px) {
  :root { --pc-pad: 24px; }
  #scrollspy-right { display: none; }
  .pc-breadcrumb { display: none; }
  #sticky-top-nav {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 40px;
  }
  #sticky-top-nav::-webkit-scrollbar { display: none; }
  .sticky-link { flex-shrink: 0; font-size: 15px; font-weight: 600; }

  /* Title + Visit Website on one line: shrink both so they fit side by
     side instead of the title's own width forcing a wrap onto two rows.
     Tagline/meta-row (full hero variant only) still get their own row via
     flex-basis: 100%, which forces a flex-wrap break regardless of how
     much space is left on the title+button's line.
     flex-basis: 0% (not auto) on the title matters for long titles: with
     auto, the flex algorithm decides whether to wrap based on the title's
     full unwrapped (max-content) width, so a long title reads as "doesn't
     fit" and pushes the whole button down to its own row. Basis 0 makes
     the title always shrink to whatever space is left after the button,
     so a long title wraps onto 2+ lines in place while the button stays
     put on the right, vertically centered against however tall that
     wrapped title ends up being. */
  .pc-hero.is-active { align-items: center; gap: 10px 12px; }
  .pc-hero__title { font-size: 22px; min-width: 0; flex: 1 1 0%; border-left-width: 3px; padding-left: 14px; }
  .pc-breadcrumb { padding-left: calc(var(--pc-pad) + 17px); }
  .pc-hero__visit { flex-shrink: 0; font-size: 12px; padding: 8px 16px; gap: 6px; }
  .pc-hero__tagline { flex-basis: 100%; margin: 0; font-size: 14px; }
  .pc-hero__meta-row { flex-basis: 100%; gap: 32px; }

  .pc-hero-img { padding: 24px var(--pc-pad) 40px; }
  .pc-hero-img__frame { height: 240px; border-radius: 10px; }
  .pc-hero-img__frame img,
  .screen-frame img { object-fit: cover; object-position: top; }
  .screen-frame { height: 220px !important; }
  .pc-impact__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  #sec-problem, #sec-solution, #sec-process, #sec-design, #sec-gallery { padding: 24px; border-radius: 12px; }
  .pc-steps { grid-template-columns: 1fr; }
  .pc-design-grid { grid-template-columns: 1fr; }
  /* UX/UI Process built as image-pair / caption-pair / extra-text-pair
     (three stacked .pc-design-grid rows, wrapped in .pc-process-triptych):
     read text, then images, then text on mobile instead of images-first.
     Scoped to that wrapper (opt-in) rather than #sec-process as a whole,
     since most Process sections mix a single grid with plain text blocks
     where this reordering would do more harm than good. Desktop keeps
     the original order. */
  .pc-process-triptych {
    display: flex;
    flex-direction: column;
  }
  .pc-process-triptych > .pc-design-grid:nth-of-type(1) { order: 2; }
  .pc-process-triptych > .pc-design-grid:nth-of-type(2) { order: 3; }
  .pc-process-triptych > .pc-design-grid:nth-of-type(3) { order: 1; }

  /* Mobile-only reorder, opt-in: two stacked .pc-design-grid rows
     (images row, then text row) swap so text reads first and the
     images land after it. Desktop is untouched — no flex/order applied
     outside this breakpoint, so the grids just render in DOM order. */
  .pc-text-first-mobile { display: flex; flex-direction: column; }
  .pc-text-first-mobile > .pc-design-grid:nth-of-type(1) { order: 2; }
  .pc-text-first-mobile > .pc-design-grid:nth-of-type(2) { order: 1; }

  /* Mobile-only reorder, opt-in: three stacked .pc-design-grid rows
     (images, text, text) become text / images / text, landing the
     images in the middle instead of leading. Desktop untouched. */
  .pc-image-mid-mobile { display: flex; flex-direction: column; }
  .pc-image-mid-mobile > .pc-design-grid:nth-of-type(1) { order: 2; }
  .pc-image-mid-mobile > .pc-design-grid:nth-of-type(2) { order: 1; }
  .pc-image-mid-mobile > .pc-design-grid:nth-of-type(3) { order: 3; }

  .pc-duo-grid { grid-template-columns: 1fr; gap: 20px; }
  .pc-gallery-grid--desktop { gap: 20px; }
  .pc-gallery-grid--desktop .pc-gallery-item { width: 100%; }
  .pc-gallery-grid--desktop .pc-gallery-item img { height: 220px; }
  .pc-gallery-grid--mobile { gap: 20px; }
  .pc-gallery-grid--mobile .pc-gallery-item { width: calc(50% - 10px); }
  .pc-gallery-grid--mobile .pc-gallery-item img,
  .pc-gallery-grid--mobile .pc-gallery-item video { height: 260px; }
  .prob-split,
  .prob-image-right,
  .prob-image-left { grid-template-columns: 1fr; }
  .pc-philosophy__card { padding: 40px 28px; }

  .pc-bottom-nav {
    gap: 12px;
    padding: 4px var(--pc-pad) 64px;
  }
  .pc-bottom-nav a {
    font-size: 16px;
  }
  /* "Back to Projects" stays on one line — it's short and identical on
     every page. "Next Project: ..." is left free to wrap instead of
     truncating, so the full title is always readable; with the row's
     default center alignment, its extra line naturally sits higher
     than the single-line "Back to Projects" beside it, rather than
     both fighting for the same baseline. */
  .pc-bottom-nav a:first-child { flex-shrink: 0; white-space: nowrap; }
  .pc-bottom-nav__next { min-width: 0; text-align: right; }
}

/* ============================================================
   IMAGE LIGHTBOX — click-to-zoom for content images
   ============================================================ */
.pc-lightbox-zoomable { cursor: zoom-in; }
body.pc-lightbox-open { overflow: hidden; }
.pc-lightbox {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(3,9,20,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease;
}
.pc-lightbox.is-open { opacity: 1; visibility: visible; }
.pc-lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: zoom-out;
}
.pc-lightbox__close {
  position: absolute; top: 24px; right: 28px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
  transition: background 0.2s ease;
}
.pc-lightbox__close:hover { background: rgba(255,255,255,0.16); }
@media (max-width: 640px) {
  .pc-lightbox { padding: 20px; }
  .pc-lightbox__close { top: 16px; right: 16px; width: 36px; height: 36px; font-size: 16px; }
}