/* ============================================================
   Juxtapose — Case Study / Project Page styles (self-contained)
   Dark theme, cohesive with the Bridge homepage.
   Loads after styles.css and provides all project-page classes.
   ============================================================ */

:root{
  --cs-bg:#0A0C0D;
  --cs-bg2:#13181B;
  --cs-ink:#E9EDEF;
  --cs-dim:#8A97A0;
  --cs-steel:#9FB8C4;
  --cs-steel-2:#C6DCE6;
  --cs-line:rgba(233,237,239,.10);
  --cs-line-2:rgba(233,237,239,.20);
  --cs-maxw:1180px;
  --cs-gut:clamp(20px,4vw,56px);
  --cs-e:cubic-bezier(.16,1,.3,1);
}

/* ---- base / overrides over Bridge styles.css ---- */
body{
  background:var(--cs-bg);
  color:var(--cs-ink);
  font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  margin:0;
  line-height:1.5;
}
.container{max-width:var(--cs-maxw);margin:0 auto;padding:0 var(--cs-gut)}
img{display:block;max-width:100%}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--cs-ink);color:var(--cs-bg);padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.skip-link:focus{left:0}

/* ---- header / nav ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,12,13,.82);backdrop-filter:blur(12px);border-bottom:.5px solid var(--cs-line)}
.site-header .nav-wrap{display:flex;align-items:center;justify-content:space-between;max-width:var(--cs-maxw);margin:0 auto;padding:18px var(--cs-gut)}
.site-header .logo{text-decoration:none}
.site-header .logo{display:inline-flex;align-items:center}
.site-header .logo-mark{display:inline-block;width:150px;height:23px;background:url(/images/juxtapose-logo.png) left center/contain no-repeat;text-indent:-9999px;overflow:hidden;white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:30px}
.site-nav a{text-decoration:none;color:var(--cs-dim);font-size:14px;letter-spacing:.02em;transition:color .3s var(--cs-e)}
.site-nav a:hover{color:var(--cs-ink)}
.site-nav a.nav-cta{color:var(--cs-ink);border:1px solid var(--cs-line-2);border-radius:100px;padding:9px 20px}
.site-nav a.nav-cta:hover{background:var(--cs-ink);color:var(--cs-bg);border-color:var(--cs-ink)}
.nav-toggle{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--cs-ink)}
.mobile-nav{display:none;flex-direction:column;gap:6px;padding:8px var(--cs-gut) 18px;border-bottom:.5px solid var(--cs-line)}
.mobile-nav a{color:var(--cs-ink);text-decoration:none;padding:10px 0;font-size:18px;border-bottom:.5px solid var(--cs-line)}

/* ---- breadcrumb ---- */
.breadcrumb{padding:28px 0 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:12px;letter-spacing:.04em;color:var(--cs-dim);font-family:'IBM Plex Mono',ui-monospace,monospace}
.breadcrumb li{display:flex;gap:8px;align-items:center}
.breadcrumb li:not(:last-child)::after{content:'/';color:var(--cs-line-2)}
.breadcrumb a{color:var(--cs-dim);text-decoration:none}
.breadcrumb a:hover{color:var(--cs-steel-2)}
.breadcrumb [aria-current=page]{color:var(--cs-ink)}

/* ---- project header ---- */
.project-header{padding:clamp(36px,6vw,72px) 0 clamp(28px,4vw,44px)}
.project-eyebrow{display:inline-block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cs-steel);margin-bottom:18px}
.project-title{font-weight:600;font-size:clamp(34px,5.6vw,68px);line-height:1.04;letter-spacing:-.02em;margin:0;max-width:18ch}
.project-deck{margin:24px 0 0;max-width:62ch;color:var(--cs-dim);font-size:clamp(16px,1.5vw,20px);line-height:1.6}
.project-deck strong{color:var(--cs-ink);font-weight:500}

/* ---- hero (photo heroes on older pages; graphic heroes use inline styles) ---- */
.project-hero-section{padding:clamp(8px,2vw,20px) 0 clamp(36px,5vw,64px)}
.project-hero-image{margin:0;border-radius:12px;overflow:hidden;border:.5px solid var(--cs-line)}
.project-hero-image picture,.project-hero-image img{display:block;width:100%}
.project-hero-image img{aspect-ratio:16/8;object-fit:cover}

/* ---- facts ---- */
.facts-section{padding:clamp(28px,4vw,52px) 0;border-top:.5px solid var(--cs-line)}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;background:var(--cs-line);border:.5px solid var(--cs-line);border-radius:12px;overflow:hidden}
.fact-item{background:var(--cs-bg);padding:22px 24px}
.fact-label{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cs-dim);margin:0 0 8px}
.fact-value{font-size:15px;line-height:1.45;color:var(--cs-ink);margin:0;font-weight:400}

/* ---- narrative ---- */
.narrative-section{padding:clamp(40px,6vw,80px) 0;border-top:.5px solid var(--cs-line)}
.narrative{max-width:68ch;margin:0 auto;display:flex;flex-direction:column;gap:clamp(28px,4vw,44px)}
.narrative-block{margin:0}
.narrative-heading{font-weight:500;font-size:clamp(13px,1.2vw,14px);letter-spacing:.04em;text-transform:uppercase;color:var(--cs-steel);margin:0 0 12px;font-family:'IBM Plex Mono',ui-monospace,monospace}
.narrative-block p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:#C4CDD2;max-width:65ch}
.narrative-block p strong{color:var(--cs-ink);font-weight:500}
.narrative-block [lang=hi]{color:var(--cs-steel-2);font-style:normal}

/* ---- gallery (6-col grid; span-3 = half) ---- */
.gallery-section{padding:clamp(20px,3vw,40px) 0 clamp(48px,7vw,96px);border-top:.5px solid var(--cs-line)}
.gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,20px)}
.gallery-item{margin:0;grid-column:span 6}
.gallery-item.span-2{grid-column:span 2}
.gallery-item.span-3{grid-column:span 3}
.gallery-item.span-4{grid-column:span 4}
.gallery-item.span-6{grid-column:span 6}
.gallery-item picture,.gallery-item img{display:block;width:100%}
.gallery-item img{aspect-ratio:3/2;object-fit:cover;border-radius:10px;border:.5px solid var(--cs-line);background:var(--cs-bg2)}
.gallery-item figcaption{margin-top:.6rem;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cs-dim)}

/* ---- capabilities used ---- */
.cap-used-section{padding:clamp(28px,4vw,48px) 0;border-top:.5px solid var(--cs-line)}
.cap-used-section .eyebrow{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-dim);margin-bottom:16px}
.cap-used-list{display:flex;flex-wrap:wrap;gap:10px}
.cap-pill{border:1px solid var(--cs-line-2);border-radius:100px;padding:8px 18px;font-size:14px;color:var(--cs-steel-2)}

/* ---- next project ---- */
.next-project{padding:clamp(20px,3vw,40px) 0 clamp(40px,6vw,80px);border-top:.5px solid var(--cs-line)}
.next-project-link{display:flex;align-items:center;justify-content:space-between;gap:24px;text-decoration:none;border:.5px solid var(--cs-line-2);border-radius:14px;padding:clamp(26px,3.4vw,40px);transition:border-color .4s var(--cs-e),background .4s var(--cs-e)}
.next-project-link:hover{border-color:var(--cs-steel);background:var(--cs-bg2)}
.next-project-text .label{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-dim);margin-bottom:10px}
.next-project-text .title{font-size:clamp(22px,3vw,34px);font-weight:600;letter-spacing:-.01em;color:var(--cs-ink)}
.next-project-text .meta{margin-top:8px;font-size:14px;color:var(--cs-dim)}
.next-arrow{font-size:28px;color:var(--cs-steel);flex-shrink:0}

/* ---- CTA ---- */
.cta-section{padding:clamp(48px,7vw,100px) 0;border-top:.5px solid var(--cs-line)}
.cta-block{max-width:760px}
.cta-headline{font-weight:600;font-size:clamp(30px,4.6vw,56px);line-height:1.06;letter-spacing:-.02em;margin:0}
.cta-sub{margin:20px 0 0;max-width:54ch;color:var(--cs-dim);font-size:clamp(16px,1.4vw,19px);line-height:1.6}
.cta-contacts{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.cta-link{text-decoration:none;border:.5px solid var(--cs-line-2);border-radius:12px;padding:18px 22px;min-width:220px;transition:border-color .4s var(--cs-e),background .4s var(--cs-e)}
.cta-link:hover{border-color:var(--cs-steel);background:var(--cs-bg2)}
.cta-link-label{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cs-dim);margin-bottom:8px}
.cta-link-value{color:var(--cs-ink);font-size:16px}

/* ---- footer ---- */
.site-footer{border-top:.5px solid var(--cs-line);padding:clamp(48px,6vw,80px) 0 40px;background:var(--cs-bg)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:clamp(28px,4vw,56px);max-width:var(--cs-maxw);margin:0 auto;padding:0 var(--cs-gut)}
.footer-logo{font-weight:700;letter-spacing:.14em;font-size:15px;color:var(--cs-ink);margin-bottom:18px}
.footer-address{font-style:normal;display:flex;flex-direction:column;gap:4px;color:var(--cs-dim);font-size:13px;line-height:1.5}
.footer-phone a{color:var(--cs-steel-2);text-decoration:none}
.footer-h{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-dim);margin-bottom:16px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-col ul a{color:var(--cs-ink);text-decoration:none;font-size:14px}
.footer-col ul a:hover{color:var(--cs-steel-2)}
.footer-col li{color:var(--cs-dim);font-size:14px}
.footer-cities{color:var(--cs-dim);font-size:12px;line-height:1.7;margin:0}
.footer-fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:var(--cs-maxw);margin:40px auto 0;padding:24px var(--cs-gut) 0;border-top:.5px solid var(--cs-line);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;color:var(--cs-dim)}

/* ---- responsive ---- */
@media(max-width:860px){
  .facts-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .site-nav{display:none}
  .nav-toggle{display:flex}
  .gallery-item.span-2,.gallery-item.span-3,.gallery-item.span-4,.gallery-item.span-6{grid-column:span 6}
  .gallery-grid{grid-template-columns:1fr;gap:14px}
  .facts-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .next-project-link{flex-direction:column;align-items:flex-start;gap:16px}
  .cta-link{min-width:0;width:100%}
}