/* ==============================
   PROJECT PAGES (INDEX + DETAIL)
============================== */

.full-bleed{ width:100vw; margin-left: calc(50% - 50vw); }
.section{
  width:min(1180px, 100%);
  margin-inline:auto;
  padding-inline: var(--page-pad, 16px);
}
.prj-section{ margin-top: clamp(18px, 3.5vw, 42px); }
.gold{ color: var(--gold); }


/* HERO (matches service style) */
.prj-hero{
  position: relative;
  min-height: calc(100vh - 92px);
  overflow: hidden;
  display:grid;
  align-items:center;
}
.prj-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.06);
}
.prj-hero-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(212,175,55,.22), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(191,195,201,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.80));
}
.prj-hero-inner{
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin-inline: auto;
  padding: 0 var(--page-pad, 16px);
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: center;
    color: #fff;

}
.prj-hero-left p{
  color: #fff;
}
.prj-hero-actions{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  align-items:center;
}
.prj-hero-actions a{
  color: #fff;
}
.prj-hero-right{
  display:grid;
  justify-items: end;
  align-items: end;
    padding-top: 30vh;

}
.prj-logo{
  width: 100px;
  height: auto;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.55));
  transform: translateZ(0);
}
.prj-hero--detail .breadcrumbs{
  display:flex;
  gap: 8px;
  align-items:center;
  color: rgba(255,255,255,.82);
}
.prj-hero--detail .breadcrumbs a{
  text-decoration:none;
  color: rgba(255,255,255,.88);
}
.prj-hero--detail .breadcrumbs a:hover{ color: var(--gold); }
.crumb{ opacity:.7; }

/* TOOLBAR + FILTER */
.prj-toolbar{
  border-radius: 26px;
  padding: 16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
}
.prj-toolbar-title{
  margin-top: 6px;
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 18px;
}
.prj-tags{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.prj-tag{
  cursor:pointer;
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight: 900;
}
.prj-tag.is-active{
  border-color: rgba(212,175,55,.35);
  color: var(--gold);
  box-shadow: 0 0 22px rgba(212,175,55,.10);
}

/* INDEX GRID (big cards) */
.prj-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.prj-card{
  display:block;
  text-decoration:none;
  color: inherit;
  border-radius: 28px;
  overflow:hidden;
  min-height: clamp(420px, 52vh, 640px);
}
.prj-card-media{
  position: relative;
  height: clamp(260px, 34vh, 420px);
  overflow:hidden;
  border-radius: 22px;
}
.prj-card-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.05);
  transition: transform 900ms cubic-bezier(.2,.9,.2,1), filter 350ms ease;
  filter: saturate(1.06) contrast(1.06);
  will-change: transform;
  border-radius: 22px;
}

.prj-card-content{
  padding: 16px;
}
.prj-card-top{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 12px;
}
.prj-card-title{
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: clamp(18px, 2.2vw, 30px);
}
.prj-card-arrow{ color: var(--gold); font-weight: 950; }
.prj-card-desc{
  margin-top: 10px;
  color: var(--muted);
}
:root[data-theme="light"] .prj-card-desc{ color: rgba(0,0,0,.70); }
.prj-pill{
  margin-top: 12px;
  display:inline-flex;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.35);
  color: var(--gold);
  background: rgba(0,0,0,.16);
  font-weight: 950;
}
.prj-card:hover .prj-card-media img{
  transform: scale(1.12);
  filter: saturate(1.12) contrast(1.12);
}

/* FALLBACK (no cover) */
.prj-card-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.04);
}
.prj-card-letter{
  width: 88px; height: 88px;
  border-radius: 26px;
  display:grid;
  place-items:center;
  font-weight: 950;
  font-size: 40px;
  color: var(--gold);
  border: 1px solid rgba(212,175,55,.30);
  background: rgba(0,0,0,.20);
}

/* DETAIL TOP */
.prj-detail-top{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.prj-highlights{ border-radius: 28px; padding: 18px; }
.deliverables{
  align-items: center;
  text-align: center;
  justify-content: center;
}
.prj-cover{ border-radius: 28px; overflow:hidden; }
.prj-cover-img{
  width:100%;
  height:100%;
  min-height: clamp(420px, 52vh, 640px);
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.06);
  border-radius: 22px;
}

/* STATS */
.prj-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

/* STORY GRID */
.prj-story{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

/* MEDIA */
.prj-media-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
.prj-media-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.prj-media-card{
  border-radius: 22px;
  cursor:pointer;
  text-align:left;
  padding: 0;
}
.prj-media-thumb{
  position: relative;
  overflow:hidden;
  border-radius: 22px;
}
.prj-media-thumb img{
  width:100%;
  min-height: 420px;
  object-fit: cover;
  display:block;
  transform: scale(1.04);
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
}
.prj-media-card:hover .prj-media-thumb img{ transform: scale(1.12); }

.prj-media-play{
  position:absolute;
  left: 14px;
  bottom: 14px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(212,175,55,.35);
  color: var(--gold);
  backdrop-filter: blur(10px);
}
.prj-media-cap{
  padding: 10px 12px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.prj-media-kind{ font-weight: 900; color: rgba(255,255,255,.78); }
.prj-media-idx{ font-weight: 950; color: var(--gold); }

/* TESTIMONIAL */
.prj-quote{
  padding: 18px;
  border-radius: 28px;
}
.prj-quote .quote{
  margin-top: 12px;
  font-size: clamp(18px, 2.1vw, 26px);
  line-height: 1.25;
  color: rgba(255,255,255,.88);
}
:root[data-theme="light"] .prj-quote .quote{ color: rgba(0,0,0,.80); }
.prj-quote .quote-by{
  margin-top: 10px;
  color: var(--silver);
  font-weight: 850;
}

/* CTA */
.prj-cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  border-radius: 28px;
  padding: 18px;
}

/* LIGHTBOX */
.media-lightbox{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 200;
}
.media-lightbox.is-open{ display:block; }

.lb-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.70);
}
.lb-panel{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 92vw);
  border-radius: 28px;
  overflow:hidden;
  padding: 16px;
}
.lb-close{
  position:absolute;
  right: 12px;
  top: 12px;
  z-index: 3;
}
.lb-stage{
  margin-top: 28px;
  border-radius: 22px;
  overflow:hidden;
}
.lb-stage img,
.lb-stage video{
  width:100%;
  height: min(72vh, 720px);
  object-fit: contain;
  background: rgba(0,0,0,.35);
  display:block;
}

/* Responsive */
@media (max-width: 720px){
  .prj-hero-inner{ grid-template-columns: 1fr;   align-items: center;
  text-align: center;
justify-content: center;}
  .prj-hero-right{  justify-items: center; padding-left: 70dvw;
  padding-top: 30px;}
.prj-hero-glow{
    background:  rgba(0,0,0,.8);
}

.prj-hero-actions{
  align-items: center; text-align: center; justify-content: center;
}

  .prj-grid{ grid-template-columns: 1fr; }
  .prj-detail-top{ grid-template-columns: 1fr; }
  .prj-story{ grid-template-columns: 1fr; }
  .prj-media-grid{ grid-template-columns: 1fr; }
  .prj-toolbar{ flex-direction: column; align-items:flex-start; }
  .prj-tags{ justify-content:flex-start; }
  .prj-cta{ flex-direction: column; align-items:center; }
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* =========================
   Team Section (Improved)
   ========================= */

.team-grid{
  margin-top: 18px;
  display: grid;
  gap: 14px;

  /* desktop: 3 columns */
  grid-template-columns: repeat(3, minmax(0, 1fr));

  /* keeps cards aligned nicely if heights differ */
  align-items: stretch;
}

/* responsive */
@media (max-width: 980px){
  .team-grid{ grid-template-columns: 1fr; }
}

/* Card */
.team-card{
  overflow: hidden;
  border-radius: 22px;

  /* structure */
  display: grid;
  grid-template-rows: auto 1fr;

  /* center the overall flow */
  text-align: center;
}

/* Media block */
.team-media{
  padding: 14px 14px 0;
  display: grid;
  justify-items: center;
}

/* Image */
.team-media img{
  width: 100%;
  max-width: 380px;   /* keeps image from becoming huge */
  height: auto;      /* consistent height across cards */
  object-fit: cover;  /* looks more premium than contain */
  display: block;

  border-radius: 18px;
  border: 1px solid var(--stroke);
}



/* Body */
.team-body{
  padding: 16px 16px 18px;

  /* center all content */
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
}

/* Name / role / sub */
.team-name{
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: 22px;
  line-height: 1.15;
}

.team-role{
  font-weight: 900;
  color: var(--gold);
  line-height: 1.2;
}

.team-sub{
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
  max-width: 42ch;
}

/* Quote */
.team-quote{
  margin: 6px 0 0;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);

  /* keeps quote width consistent and centered */
  max-width: 52ch;
}

:root[data-theme="light"] .team-quote{
  color: rgba(0,0,0,.75);
}

/* Meta links (email/phone) */
.team-meta{
  margin-top: 4px;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.team-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  text-decoration: none;
  color: var(--text);
  opacity: .9;

  /* nicer pill style */
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

/* keep icon aligned and stable */
.team-link i{
  width: 18px;
  text-align: center;
}

.team-link:hover{
  opacity: 1;
  color: var(--gold);
  border-color: rgba(212,175,55,.30);
}

/* CTA buttons */
.team-actions{
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  /* center buttons */
  justify-content: center;
}

/* Optional: make buttons same width on mobile for clean layout */
@media (max-width: 520px){
  .team-actions > a{
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================
   PROJECT-PAGES.CSS — LIGHT MODE CLEAN IVORY PATCH
   Add this at the END of project-pages.css
========================================== */

/* 1) Hero: lighter, ivory-friendly overlay + remove heavy logo shadow */
:root[data-theme="light"] .prj-hero-glow{
  background:
    radial-gradient(circle at 18% 22%, rgba(212,175,55,.14), transparent 58%),
    radial-gradient(circle at 80% 70%, rgba(191,195,201,.10), transparent 62%),
    linear-gradient(180deg, rgba(251,246,234,.10), rgba(18,18,18,.42));
}

:root[data-theme="light"] .prj-logo{
  filter: none;
}

/* If your hero text is forced white, make it readable in light mode */
:root[data-theme="light"] .prj-hero-inner{
  color: #121212;
}
:root[data-theme="light"] .prj-hero-left p,
:root[data-theme="light"] .prj-hero-actions a{
  color: rgba(18,18,18,.88);
}
:root[data-theme="light"] .prj-hero--detail .breadcrumbs,
:root[data-theme="light"] .prj-hero--detail .breadcrumbs a{
  color: rgba(18,18,18,.70);
}
:root[data-theme="light"] .prj-hero--detail .breadcrumbs a:hover{
  color: var(--gold);
}

/* 2) Kill “floating” shadows / glass blur in light mode across project UI */
:root[data-theme="light"] .prj-toolbar,
:root[data-theme="light"] .prj-card,
:root[data-theme="light"] .prj-highlights,
:root[data-theme="light"] .prj-cover,
:root[data-theme="light"] .prj-media-card,
:root[data-theme="light"] .prj-quote,
:root[data-theme="light"] .prj-cta,
:root[data-theme="light"] .team-card,
:root[data-theme="light"] .team-quote,
:root[data-theme="light"] .team-link,
:root[data-theme="light"] .lb-panel,
:root[data-theme="light"] .lb-stage{
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3) Clean surfaces: ivory “paper” cards */
:root[data-theme="light"] .prj-toolbar,
:root[data-theme="light"] .prj-card,
:root[data-theme="light"] .prj-highlights,
:root[data-theme="light"] .prj-media-card,
:root[data-theme="light"] .prj-quote,
:root[data-theme="light"] .prj-cta,
:root[data-theme="light"] .team-card{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(18,18,18,.10);
}

/* 4) Tags: less dark/glass, more crisp */
:root[data-theme="light"] .prj-tag{
  background: rgba(18,18,18,.03);
  border-color: rgba(18,18,18,.10);
  color: rgba(18,18,18,.68);
}
:root[data-theme="light"] .prj-tag.is-active{
  background: rgba(212,175,55,.10);
  border-color: rgba(212,175,55,.38);
  color: rgba(212,175,55,.95);
  box-shadow: none;
}

/* 5) Pills: remove dark backing in light mode */
:root[data-theme="light"] .prj-pill{
  background: rgba(212,175,55,.10);
  border-color: rgba(212,175,55,.35);
  color: rgba(212,175,55,.95);
}

/* 6) Fallback cover: no dark slab */
:root[data-theme="light"] .prj-card-fallback{
  background: rgba(18,18,18,.03);
}
:root[data-theme="light"] .prj-card-letter{
  background: rgba(212,175,55,.10);
  border-color: rgba(212,175,55,.30);
}

/* 7) Media play button: ivory version */
:root[data-theme="light"] .prj-media-play{
  background: rgba(255,255,255,.78);
  border-color: rgba(212,175,55,.30);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Media captions: dark text in light mode */
:root[data-theme="light"] .prj-media-kind{
  color: rgba(18,18,18,.70);
}

/* 8) Lightbox: keep backdrop dark, but panel/stage ivory */
:root[data-theme="light"] .lb-panel{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(18,18,18,.10);
}
:root[data-theme="light"] .lb-stage img,
:root[data-theme="light"] .lb-stage video{
  background: rgba(18,18,18,.04);
}

/* 9) Team section: quotes/links clean */
:root[data-theme="light"] .team-quote{
  background: rgba(18,18,18,.03);
  border-color: rgba(18,18,18,.10);
  color: rgba(18,18,18,.75);
}
:root[data-theme="light"] .team-link{
  background: rgba(18,18,18,.03);
  border-color: rgba(18,18,18,.10);
  color: rgba(18,18,18,.82);
}
:root[data-theme="light"] .team-link:hover{
  border-color: rgba(212,175,55,.35);
  color: rgba(212,175,55,.95);
}

/* 10) Mobile hero fix: your mobile glow becomes too dark in light mode */
@media (max-width: 720px){
  :root[data-theme="light"] .prj-hero-glow{
    background:
      radial-gradient(circle at 18% 22%, rgba(212,175,55,.12), transparent 60%),
      linear-gradient(180deg, rgba(251,246,234,.12), rgba(18,18,18,.52));
  }
}