/* ═══════════════════════════════════════════
   DEEMKEND · Project page layout
═══════════════════════════════════════════ */

/* ── Project hero ─────────────────────────── */
.p-hero {
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) 72px;
  border-bottom:1px solid var(--glass-b);
  overflow:hidden;
}
.p-hero-num {
  position:absolute; top:170px; right:var(--pad);
  font-family:var(--fm); font-size:11px; letter-spacing:.18em; color:var(--muted);
  opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease) .28s, transform .8s var(--ease) .28s;
}
.p-hero-eyebrow {
  font-family:var(--fm); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted2); margin-bottom:28px;
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.p-hero-title {
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:clamp(72px,13vw,200px); line-height:.88;
  opacity:0; transform:translateY(28px);
  transition:opacity .95s var(--ease) .08s, transform .95s var(--ease) .08s;
}
.p-hero-title span { display:block; }
.p-hero-title .sub {
  color:var(--amber); font-size:0.44em; font-style:normal;
  font-family:var(--fm); letter-spacing:.08em; margin-top:12px;
}
.p-hero-bottom {
  margin-top:52px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  opacity:0; transform:translateY(18px);
  transition:opacity .85s var(--ease) .18s, transform .85s var(--ease) .18s;
}
body.ready .p-hero-num,
body.ready .p-hero-eyebrow,
body.ready .p-hero-title,
body.ready .p-hero-bottom { opacity:1; transform:none; }

.p-hero-desc {
  font-size:14px; font-weight:400; color:var(--muted2);
  line-height:1.8; max-width:360px;
}
.p-live-link {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fm); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt);
  padding:14px 28px; border-radius:100px;
  border:1px solid var(--glass-b);
  transition:background .25s, border-color .25s, color .25s; flex-shrink:0;
}
.p-live-link:hover {
  background:var(--amber-a); border-color:var(--amber); color:var(--amber);
}

/* ── Info bar ────────────────────────────── */
.p-info {
  position:relative; z-index:1;
  padding:40px var(--pad);
  display:flex;
  border-bottom:1px solid var(--glass-b);
}
.p-info-item {
  flex:1; padding:0 32px;
  border-right:1px solid var(--glass-b);
}
.p-info-item:first-child { padding-left:0; }
.p-info-item:last-child  { border-right:none; }
.p-info-label {
  font-family:var(--fm); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted2); margin-bottom:8px;
}
.p-info-val { font-size:14px; font-weight:400; color:var(--txt); }

/* ── Metric chips (optional, for case-study results) ── */
.p-metrics {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1px;
  background:var(--glass-b);
  border:1px solid var(--glass-b);
  border-radius:18px;
  overflow:hidden;
  margin:48px var(--pad);
}
.p-metric {
  padding:32px 28px;
  background:var(--bg);
  display:flex; flex-direction:column; gap:8px;
}
.p-metric-num {
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:clamp(36px, 4.5vw, 64px);
  line-height:.95; color:var(--amber);
  letter-spacing:-.015em;
}
.p-metric-num sup {
  font-family:var(--fm); font-style:normal;
  font-size:.3em; letter-spacing:.06em;
  color:var(--muted2);
  margin-left:6px;
  vertical-align:top;
  font-weight:400;
}
.p-metric-label {
  font-family:var(--fm); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted2);
}
.p-metric-note {
  font-size:12px; color:var(--muted2); line-height:1.55;
  margin-top:6px;
}

/* ── Share button in p-hero ── */
.p-share {
  position:absolute;
  top:110px; right:var(--pad);
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px;
  border-radius:100px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--glass-b);
  font-family:var(--fm); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted2);
  cursor:none;
  transition:background .25s, border-color .25s, color .25s;
}
.p-share::before {
  content:'↗'; font-family:var(--fd); font-style:italic; font-size:13px;
  line-height:1;
}
.p-share:hover {
  background:rgba(196,138,40,0.08);
  border-color:rgba(196,138,40,0.4);
  color:var(--amber);
}
@media (max-width:780px) {
  .p-metrics { margin:32px var(--pad); grid-template-columns:1fr 1fr; }
  .p-metric { padding:22px 18px; }
  .p-metric-num { font-size:clamp(28px, 8vw, 44px); }
  .p-share { top:96px; right:var(--pad); padding:8px 14px; font-size:9px; }
}

/* ── Section ─────────────────────────────── */
.p-sec {
  position:relative; z-index:1;
  padding:100px var(--pad);
  border-bottom:1px solid var(--glass-b);
}
.p-sec-lbl { margin-bottom:20px; }
.p-sec-body {
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;
}
.p-sec-title {
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:clamp(32px,4vw,58px); color:var(--txt); line-height:1.08;
}
.p-sec-title .a { color:var(--amber); }
.p-sec-text { font-size:14px; font-weight:400; color:var(--muted2); line-height:1.85; }
.p-sec-text p + p { margin-top:18px; }
.p-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:28px; }
.p-tag {
  padding:6px 14px; border-radius:100px;
  font-family:var(--fm); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid var(--glass-b); color:var(--muted2);
}
.p-tag.active {
  border-color:var(--amber); color:var(--amber); background:var(--amber-a);
}

/* ── Mockups ─────────────────────────────── */
.p-visuals {
  position:relative; z-index:1;
  padding:0 var(--pad) 100px;
  display:flex; flex-direction:column; gap:24px;
}
.p-mockup {
  width:100%; border-radius:20px; overflow:hidden;
  border:1px solid var(--glass-b);
  background:#070706;
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.7),
             inset 0 1px 0 rgba(255,255,255,0.04);
}
.p-mockup.tall   { aspect-ratio:16/8.5; }
.p-mockup.short  { aspect-ratio:16/5.5; }
.p-mockup.square { aspect-ratio:1; }
.p-mockup-row {
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.p-mockup-row .p-mockup { aspect-ratio:4/3; }
.p-mockup-row.thirds { grid-template-columns:repeat(3,1fr); }
.p-mockup-row.thirds .p-mockup { aspect-ratio:3/4; }

/* ── Process ─────────────────────────────── */
.p-process {
  position:relative; z-index:1;
  padding:100px var(--pad);
  border-top:1px solid var(--glass-b);
  border-bottom:1px solid var(--glass-b);
}
.p-process-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  margin-top:48px;
  border:1px solid var(--glass-b); border-radius:18px; overflow:hidden;
}
.p-step {
  padding:36px 32px;
  background:var(--glass);
  backdrop-filter:blur(10px);
  border-right:1px solid var(--glass-b);
  transition:background .25s;
}
.p-step:last-child { border-right:none; }
.p-step:hover { background:rgba(240,237,230,0.07); }
.p-step-n {
  font-family:var(--fm); font-size:10px; color:var(--amber);
  letter-spacing:.14em; margin-bottom:16px;
}
.p-step-name {
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:22px; color:var(--txt); margin-bottom:10px; line-height:1.15;
}
.p-step-desc {
  font-size:13px; font-weight:400; color:var(--muted2); line-height:1.65;
}

/* ── Features grid ───────────────────────── */
.p-feats {
  position:relative; z-index:1;
  padding:100px var(--pad);
  border-bottom:1px solid var(--glass-b);
}
.p-feats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:48px;
  border-top:1px solid var(--glass-b);
}
.p-feat {
  padding:32px 28px;
  border-right:1px solid var(--glass-b);
  border-bottom:1px solid var(--glass-b);
  transition:background .25s;
  position:relative;
}
.p-feat:nth-child(4n) { border-right:none; }
.p-feat:hover { background:rgba(240,237,230,0.04); }
.p-feat-n {
  font-family:var(--fm); font-size:10px; color:var(--amber);
  letter-spacing:.14em; margin-bottom:14px;
}
.p-feat-t {
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:20px; color:var(--txt); margin-bottom:8px; line-height:1.15;
}
.p-feat-d {
  font-size:12px; font-weight:400; color:var(--muted2); line-height:1.65;
}

/* ── Under-the-hood ──────────────────────── */
.p-under {
  position:relative; z-index:1;
  padding:100px var(--pad);
  border-bottom:1px solid var(--glass-b);
}
.p-under-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  margin-top:40px;
  border:1px solid var(--glass-b); border-radius:18px; overflow:hidden;
}
.p-under-item {
  padding:32px 28px;
  background:var(--glass);
  backdrop-filter:blur(10px);
  border-right:1px solid var(--glass-b);
  border-bottom:1px solid var(--glass-b);
  transition:background .25s;
}
.p-under-item:hover { background:rgba(240,237,230,0.07); }
.p-under-item:nth-child(3n) { border-right:none; }
.p-under-item:nth-last-child(-n+3):not(:nth-last-child(-n+0)) { border-bottom:none; }
.p-under-n {
  font-family:var(--fm); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber); margin-bottom:14px;
}
.p-under-d {
  font-size:13px; font-weight:400; color:var(--muted2); line-height:1.65;
}

@media (max-width:780px) {
  .p-under-grid { grid-template-columns:1fr 1fr; }
  .p-under-item:nth-child(3n) { border-right:1px solid var(--glass-b); }
  .p-under-item:nth-child(2n) { border-right:none; }
}

/* ── Next project ────────────────────────── */
.p-next {
  position:relative; z-index:1;
  padding:80px var(--pad) 100px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.p-next-label {
  font-family:var(--fm); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted2); margin-bottom:12px;
}
.p-next-name {
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:clamp(40px,6vw,90px); color:var(--txt); line-height:1;
  transition:color .2s;
}
.p-next-link:hover .p-next-name { color:var(--amber); }
.p-next-link { text-decoration:none; }
.p-next-arrow {
  width:72px; height:72px; border-radius:50%;
  border:1px solid var(--glass-b);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:24px; color:var(--muted2);
  transition:background .25s, border-color .25s, color .25s, transform .3s var(--ease);
}
.p-next-link:hover .p-next-arrow {
  background:var(--amber-a); border-color:var(--amber); color:var(--amber);
  transform:rotate(45deg);
}

@media (max-width:780px) {
  /* Hero */
  .p-hero { padding:0 var(--pad) 48px; }
  .p-hero-num { top:90px; font-size:9.5px; }
  .p-hero-eyebrow { font-size:9px; margin-bottom:18px; }
  .p-hero-title { font-size:clamp(48px, 16vw, 100px); }
  .p-hero-title .sub { font-size:.5em; margin-top:8px; }
  .p-hero-bottom { flex-direction:column; align-items:flex-start; gap:24px; margin-top:32px; }
  .p-hero-desc { font-size:13px; max-width:100%; line-height:1.7; }
  .p-live-link { font-size:9.5px; padding:11px 22px; }

  /* Info bar */
  .p-info { flex-wrap:wrap; gap:18px 0; padding:24px var(--pad); }
  .p-info-item {
    flex:1 0 45%;
    padding:0 !important;
    border-right:none;
  }
  .p-info-label { font-size:8.5px; margin-bottom:6px; }
  .p-info-val { font-size:13px; }

  /* Section */
  .p-sec { padding:60px var(--pad); }
  .p-sec-body { grid-template-columns:1fr; gap:28px; }
  .p-sec-title { font-size:clamp(30px, 9vw, 52px); }
  .p-sec-text { font-size:13px; line-height:1.75; }
  .p-tag { padding:5px 11px; font-size:8.5px; }

  /* Visuals — keep aspect ratios but tighten gaps */
  .p-visuals { padding:0 var(--pad) 60px; gap:18px; }
  .p-mockup { border-radius:14px; }
  .p-mockup.tall { aspect-ratio:16/10; }
  .p-mockup.short { aspect-ratio:16/6; }
  .p-mockup-row { grid-template-columns:1fr; gap:18px; }
  .p-mockup-row .p-mockup { aspect-ratio:4/3; }
  .p-mockup-row.thirds { grid-template-columns:1fr; }
  .p-mockup-row.thirds .p-mockup { aspect-ratio:4/3; }

  /* Features grid → 2 cols on mobile, 1 col on tiny */
  .p-feats { padding:60px var(--pad); }
  .p-feats-grid { grid-template-columns:1fr 1fr; margin-top:32px; }
  .p-feat { padding:24px 18px; }
  .p-feat:nth-child(4n) { border-right:1px solid var(--glass-b); }
  .p-feat:nth-child(2n) { border-right:none; }
  .p-feat-t { font-size:17px; margin-bottom:6px; }
  .p-feat-d { font-size:11.5px; line-height:1.6; }

  /* Under-the-hood → 2 cols on mobile, 1 col on tiny */
  .p-under { padding:60px var(--pad); }
  .p-under-item { padding:24px 18px; }
  .p-under-n { font-size:9px; margin-bottom:10px; }
  .p-under-d { font-size:11.5px; line-height:1.6; }

  /* Process */
  .p-process { padding:60px var(--pad); }
  .p-process-grid { grid-template-columns:1fr; margin-top:32px; }
  .p-step { padding:28px 22px; border-right:none; border-bottom:1px solid var(--glass-b); }
  .p-step:last-child { border-bottom:none; }
  .p-step-name { font-size:18px; }
  .p-step-desc { font-size:12px; line-height:1.65; }

  /* Next project */
  .p-next { flex-direction:column; align-items:flex-start; gap:24px; padding:48px var(--pad) 60px; }
  .p-next-name { font-size:clamp(36px, 11vw, 64px); }
  .p-next-arrow { width:56px; height:56px; font-size:20px; }
}

@media (max-width:480px) {
  .p-feats-grid,
  .p-under-grid { grid-template-columns:1fr; }
  .p-feat,
  .p-under-item {
    border-right:none !important;
    border-bottom:1px solid var(--glass-b);
  }
  .p-feat:last-child,
  .p-under-item:last-child { border-bottom:none; }
}


/* ════════════════════════════════════════════════════════════
   RELATED CASES — internal cross-link block
   ═══════════════════════════════════════════════════════════ */
.p-related {
  position:relative; z-index:1;
  padding:120px var(--pad) 80px;
  border-top:1px solid var(--glass-b);
  background:var(--bg);
}
.p-related-title {
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:clamp(36px, 5vw, 72px); line-height:1.05;
  color:var(--txt);
  margin:18px 0 56px;
  letter-spacing:-.02em;
}
.p-related-title .a { color:var(--amber); }
.p-related-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.rc-card {
  display:flex; flex-direction:column;
  border:1px solid var(--glass-b);
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,0.018);
  transition:transform .35s var(--ease), border-color .25s, background .25s;
}
.rc-card:hover {
  transform:translateY(-4px);
  border-color:rgba(196,138,40,0.4);
  background:rgba(196,138,40,0.04);
}
.rc-shot {
  width:100%;
  aspect-ratio:16/9.4;
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
  filter:saturate(.95) brightness(.85);
  transition:filter .35s;
}
.rc-card:hover .rc-shot { filter:saturate(1.1) brightness(1); }
.rc-meta {
  padding:20px 22px 26px;
  display:flex; flex-direction:column; gap:8px;
}
.rc-kind {
  font-family:var(--fm); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted2);
}
.rc-name {
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:clamp(28px, 3vw, 44px); line-height:1.05;
  color:var(--txt);
  transition:color .25s;
}
.rc-card:hover .rc-name { color:var(--amber); }

@media (max-width:780px) {
  .p-related { padding:64px var(--pad) 56px; }
  .p-related-title { font-size:clamp(28px, 8vw, 40px); margin-bottom:32px; }
  .p-related-grid { grid-template-columns:1fr; gap:12px; }
  .rc-meta { padding:16px 18px 22px; }
  .rc-name { font-size:24px; }
}