/* Projects listing and project case study pages */
:root {
  --pj-blue: #0088fd;
  --pj-ink: #0b0f1a;
  --pj-text: #222;
  --pj-muted: #666;
  --pj-line: #e6e8ee;
  --pj-radius: 18px;
  --pj-gutter: 10%;
}

.pj-page .main1Small { height: 4.5em; }
.pj-page { color: var(--pj-text); }

.pj-label {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  color: var(--pj-blue);
  font-size: .74em;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pj-label .pj-num {
  color: #fff;
  background: var(--pj-blue);
  border-radius: 999px;
  min-width: 2.2em;
  height: 2.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9em;
  letter-spacing: 0;
}
.pj-heading { margin-bottom: 1.8em; }
.pj-heading h2 {
  font-size: clamp(1.5em, 2.4vw, 2.1em);
  font-weight: 800;
  line-height: 1.2;
  margin-top: .4em;
}
.pj-loc {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  color: var(--pj-blue);
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pj-loc svg { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }

/* ---------- Listing ---------- */
.pj-intro {
  padding: 6em var(--pj-gutter) 1.5em;
  text-align: center;
}
.pj-intro h1 {
  font-size: clamp(1.8em, 3.2vw, 2.7em);
  font-weight: 800;
  line-height: 1.15;
  margin: .4em auto .5em;
  max-width: 18em;
}
.pj-intro p {
  color: var(--pj-muted);
  line-height: 1.75;
  max-width: 46em;
  margin: 0 auto;
}
.pj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2.2em;
  padding: 2em var(--pj-gutter) 6em;
}
.pj-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--pj-radius);
  overflow: hidden;
  background: #fff;
  color: inherit;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s;
}
.pj-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(0, 0, 0, .14); }
.pj-card:focus-visible { outline: 3px solid var(--pj-blue); outline-offset: 3px; }
.pj-card .pj-media { aspect-ratio: 16 / 10; overflow: hidden; background: #0e1624; }
.pj-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.pj-card:hover img { transform: scale(1.05); }
.pj-card .pj-body { padding: 1.5em 1.6em 1.7em; display: flex; flex-direction: column; flex: 1; }
.pj-card h2 { font-size: 1.25em; font-weight: 800; line-height: 1.3; margin: .5em 0 .6em; }
.pj-card p { color: var(--pj-muted); line-height: 1.65; font-size: .95em; margin-bottom: 1.2em; }
.pj-tags { display: flex; flex-wrap: wrap; gap: .45em; margin-bottom: 1.4em; margin-top: auto; }
.pj-tag {
  font-size: .7em;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .4em .8em;
  border: 1px solid #dfe3ea;
  border-radius: 999px;
  color: #444;
}
.pj-more { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; font-size: .9em; color: #000; }
.pj-more svg { width: 1.1em; height: 1.1em; fill: currentColor; transition: transform .3s; }
.pj-card:hover .pj-more svg { transform: translateX(4px); }

/* ---------- Project page: hero ---------- */
.pj-hero {
  position: relative;
  height: 74vh;
  min-height: 440px;
  max-height: 860px;
  overflow: hidden;
  background: #000;
}
.pj-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }
.pj-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, 0) 75%);
}
.pj-hero-text {
  position: absolute;
  left: var(--pj-gutter);
  right: var(--pj-gutter);
  bottom: 3.2em;
  z-index: 2;
  color: #fff;
}
.pj-hero-text .pj-loc { color: #fff; opacity: .92; margin-bottom: .6em; }
.pj-hero h1 {
  font-size: clamp(1.7em, 3.6vw, 3.1em);
  font-weight: 800;
  line-height: 1.12;
  max-width: 19em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.pj-crumbs { font-size: .8em; font-weight: 600; margin-bottom: 1.2em; opacity: .85; display: flex; flex-wrap: wrap; gap: .5em; }
.pj-crumbs a { color: #fff; }
.pj-crumbs a:hover { text-decoration: underline; }
.pj-crumbs span[aria-current] { opacity: .75; }

/* ---------- At a glance ---------- */
.pj-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.6em 2.2em;
  padding: 3em var(--pj-gutter);
  border-bottom: 1px solid var(--pj-line);
}
.pj-fact dt {
  font-size: .7em;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a8f9c;
  margin-bottom: .45em;
}
.pj-fact dd { font-weight: 600; line-height: 1.5; font-size: .95em; margin: 0; }

/* ---------- Lede ---------- */
.pj-lede { padding: 4em var(--pj-gutter) 1em; }
.pj-lede p {
  font-size: clamp(1.1em, 1.5vw, 1.3em);
  line-height: 1.75;
  max-width: 44em;
  font-weight: 500;
}
.pj-lede p::first-letter { color: var(--pj-blue); }

/* ---------- Before and after ---------- */
.pj-ba { padding: 3.5em var(--pj-gutter) 2em; }
.pj-ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; }
.pj-ba figure { position: relative; margin: 0; border-radius: var(--pj-radius); overflow: hidden; aspect-ratio: 16 / 10; background: #0e1624; }
.pj-ba a { display: block; width: 100%; height: 100%; }
.pj-ba img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.pj-ba figure:hover img { transform: scale(1.04); }
.pj-ba figcaption {
  position: absolute;
  top: 1em;
  left: 1em;
  padding: .55em 1em;
  border-radius: 999px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: .72em;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
}
.pj-ba .after figcaption { background: var(--pj-blue); }
.pj-ba-text { color: var(--pj-text); line-height: 1.75; max-width: 52em; margin-top: 1.6em; }

/* ---------- Narrative sections ---------- */
.pj-section {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 4em;
  align-items: center;
  padding: 3.2em var(--pj-gutter);
}
.pj-section.flip figure { order: 2; }
.pj-section figure { margin: 0; border-radius: var(--pj-radius); overflow: hidden; background: #0e1624; }
.pj-section figure a { display: block; }
.pj-section img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.pj-section figure:hover img { transform: scale(1.04); }
.pj-section h2 { font-size: clamp(1.4em, 2.1vw, 1.9em); font-weight: 800; line-height: 1.2; margin: .6em 0 .8em; }
.pj-section p { line-height: 1.75; margin-bottom: 1em; }
.pj-section p:last-child { margin-bottom: 0; }

/* ---------- Result ---------- */
.pj-result { padding: 3em var(--pj-gutter) 2em; max-width: 60em; }
.pj-result p { line-height: 1.75; margin-bottom: 1em; }

/* ---------- Gallery ---------- */
.pj-gallery { padding: 3em var(--pj-gutter) 4em; }
.pj-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.pj-gallery-grid a {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  background: #0e1624;
}
.pj-gallery-grid a:first-child { grid-column: span 2; grid-row: span 2; }
.pj-gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.pj-gallery-grid a:hover img { transform: scale(1.06); }
.pj-gallery-grid span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2em 1em .9em;
  color: #fff;
  font-size: .78em;
  font-weight: 600;
  line-height: 1.4;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.pj-gallery-grid a:hover span, .pj-gallery-grid a:focus-visible span { opacity: 1; transform: none; }

/* ---------- Share ---------- */
.pj-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6em;
  padding: 1.8em var(--pj-gutter);
  border-top: 1px solid var(--pj-line);
  border-bottom: 1px solid var(--pj-line);
}
.pj-share-label { font-size: .74em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-right: .8em; color: var(--pj-ink); }
.pj-share a, .pj-share button {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .6em 1.05em;
  border: 1px solid #d9dde5;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-family: inherit;
  font-size: .84em;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s ease;
}
.pj-share a:hover, .pj-share button:hover { background: #000; border-color: #000; color: #fff; }
.pj-share svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.pj-share .pj-copy.done { background: var(--pj-blue); border-color: var(--pj-blue); color: #fff; }

/* ---------- Call to action ---------- */
.pj-cta {
  padding: 4.5em var(--pj-gutter);
  background: radial-gradient(900px 400px at 50% -120px, rgba(0, 136, 253, .28), transparent), var(--pj-ink);
  color: #fff;
  text-align: center;
}
.pj-cta h2 { font-size: clamp(1.5em, 2.6vw, 2.2em); font-weight: 800; margin-bottom: .5em; }
.pj-cta p { color: rgba(255, 255, 255, .78); line-height: 1.7; max-width: 40em; margin: 0 auto 1.8em; }
.pj-cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .8em; }
.pj-cta-links a {
  display: inline-block;
  padding: .9em 1.8em;
  border: 2px solid #fff;
  background: #fff;
  color: #000;
  font-weight: 800;
  text-transform: uppercase;
  font-size: .8em;
  letter-spacing: .08em;
  transition: all .3s ease;
}
.pj-cta-links a:hover { background: var(--pj-blue); border-color: var(--pj-blue); color: #fff; }
.pj-cta-links a.ghost { background: transparent; color: #fff; }
.pj-cta-links a.ghost:hover { background: #fff; color: #000; border-color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --pj-gutter: 6%; }
  .pj-section { gap: 2.5em; }
}
@media (max-width: 900px) {
  .pj-hero { height: 60vh; min-height: 380px; }
  .pj-hero-text { bottom: 2em; }
  .pj-section { grid-template-columns: 1fr; gap: 1.6em; padding: 2.4em var(--pj-gutter); }
  .pj-section.flip figure { order: 0; }
  .pj-ba-grid { grid-template-columns: 1fr; }
  .pj-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .pj-gallery-grid a:first-child { grid-column: span 2; grid-row: auto; }
  .pj-gallery-grid span { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  :root { --pj-gutter: 16px; }
  .pj-intro { padding-top: 4em; }
  .pj-grid { grid-template-columns: 1fr; gap: 1.5em; }
  .pj-hero { height: 56vh; min-height: 340px; }
  .pj-hero h1 { font-size: 1.55em; }
  .pj-crumbs { display: none; }
  .pj-facts { grid-template-columns: 1fr 1fr; gap: 1.2em; padding: 2em var(--pj-gutter); }
  .pj-lede { padding-top: 2.5em; }
  .pj-share { gap: .5em; }
  .pj-share-label { width: 100%; margin-bottom: .3em; }
  .pj-share a, .pj-share button { font-size: .8em; padding: .55em .9em; }
  .pj-cta-links a { width: 100%; }
}