/* V11: personal voice, PDF résumé, richer cases and timed image-to-video showcase. */

/* --- Detailed résumé lives in PDF; the site only presents the file. --- */
















/* --- Project media: still image, then muted video, then next project. --- */
.project-tabs { grid-template-columns: repeat(8, minmax(155px, 1fr)); }
.project-view { grid-template-columns: minmax(0, 1.08fr) minmax(460px, .92fr); min-height: 780px; }
.project-media { min-height: 780px; }
.project-media video,
.project-media > #project-image {
  display: block !important;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity var(--media-transition, 650ms) ease, transform 1.3s ease;
}
.project-media.has-image.phase-image > #project-image { opacity: 1; transform: scale(1); }
.project-media.has-video.phase-video video { opacity: 1; transform: scale(1); }
.project-media .media-fallback {
  display: block !important;
  opacity: 1;
  transition: opacity var(--media-transition, 650ms) ease;
}
.project-media.has-image.phase-image .media-fallback,
.project-media.has-video.phase-video .media-fallback { opacity: 0; }
.project-media.phase-video > #project-image { opacity: 0; }
.project-media.phase-image video { opacity: 0; }
.media-phase-dots {
  position: absolute;
  z-index: 5;
  right: 22px;
  top: 64px;
  display: flex;
  gap: 7px;
}
.media-phase-dots i {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,247,232,.22);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.media-phase-dots i.active {
  background: var(--orange-soft);
  box-shadow: 0 0 12px rgba(234, 145, 67, .72);
  transform: scaleX(1.15);
}
.project-copy { min-width: 0; padding: 44px 38px 34px; }
.project-copy h3 { font-size: clamp(39px, 3.6vw, 60px); }
.project-facts { margin-top: 32px; }
.project-case-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.project-case-grid:not(.has-details) { display: none; }
.project-case-grid article {
  min-height: 160px;
  padding: 21px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(90,144,98,.045));
}
.project-case-grid article[hidden] { display: none; }
.project-case-grid small {
  display: block;
  margin-bottom: 13px;
  color: var(--orange-soft);
  font: 800 10px/1.35 var(--display);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.project-case-grid p { margin: 0; color: var(--cream-soft); font-size: 13px; line-height: 1.62; }
.project-links { margin-top: 24px; padding-top: 0; }

/* --- Trust block: consistent logo plates and text-only fallback. --- */
.logo-belt {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.trust-logo {
  min-height: 205px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 17px;
  border: 0 !important;
  background: linear-gradient(150deg, color-mix(in srgb, var(--surface-2) 94%, transparent), color-mix(in srgb, var(--panel) 90%, transparent));
}
.trust-logo-visual,
.trust-wordmark {
  width: 100%;
  min-height: 82px;
  padding: 14px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.trust-logo-visual img { max-width: 100%; max-height: 56px; object-fit: contain; opacity: 1; filter: none; }
.trust-wordmark {
  color: var(--cream);
  font: 780 clamp(19px, 2vw, 28px)/1.05 var(--display);
  letter-spacing: -.025em;
  text-align: center;
}
.mode-transparent { background: transparent; }
.mode-plate { background: color-mix(in srgb, var(--surface) 74%, transparent); }
.mode-light { background: #fffaf0; }
.mode-dark { background: #0a1b11; }
.mode-mono-light img { filter: grayscale(1) brightness(2.5) contrast(1.2); }
.mode-mono-dark img { filter: grayscale(1) brightness(.35) contrast(1.5); }
.trust-logo-copy { display: grid; gap: 7px; text-align: left; width: 100%; }
.trust-logo-copy strong {
  margin: 0;
  color: var(--cream);
  font: 730 14px/1.2 var(--display);
  letter-spacing: .01em;
  text-align: left;
}
.trust-logo-copy small { color: var(--muted); font-size: 12px; line-height: 1.5; }

@keyframes resume-glint {
  0%, 70% { transform: translateX(-115%); }
  92%, 100% { transform: translateX(115%); }
}

@media (max-width: 1180px) {
  
  
  
  
  .project-view { grid-template-columns: 1fr 1fr; }
  .project-media { min-height: 720px; }
  .project-case-grid { grid-template-columns: 1fr; }
  .project-case-grid article { min-height: 0; }
}

@media (max-width: 900px) {
  
  
  .project-view { grid-template-columns: 1fr; min-height: 0; }
  .project-media { min-height: 560px; border-right: 0; border-bottom: 1px solid var(--line); }
  .project-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  
  
  
  
  
  .project-tabs { grid-template-columns: repeat(8, minmax(142px, 1fr)); }
  .project-media { min-height: 430px; }
  .project-copy { padding: 30px 22px 25px; }
  .project-case-grid { grid-template-columns: 1fr; }
  .project-case-grid article { padding: 19px; }
  .media-phase-dots { right: 16px; top: 58px; }
  .trust-logo { min-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  
  .project-media video,
  .project-media > #project-image,
  .project-media .media-fallback { transition: none; }
}

.trust-reference-note {
  margin-top: 24px; padding: 22px 24px; display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: center;
  border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb,var(--surface-2) 86%,transparent);
}
.trust-reference-note > i { width: 42px; height: 42px; display:grid; place-items:center; border:1px solid var(--orange); border-radius:50%; color:var(--orange); font-style:normal; }
.trust-reference-note strong { color:var(--cream); font:750 18px/1.2 var(--display); }
.trust-reference-note p { margin:6px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
@media(max-width:600px){.trust-reference-note{grid-template-columns:1fr}.trust-reference-note>i{width:38px;height:38px}}