/* Project detail page (src/pages/projects/[slug].astro). */
.pd-hero .a-kicker a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--pa-line-strong); }
.pd-hero h1 { font: 800 clamp(40px, 6vw, 84px)/1 "Inter Tight", var(--pa-font-ui); letter-spacing: -.04em; margin: 14px 0 0; color: #eef4f4; max-width: 12ch; }
.pd-hero .p-lead { max-width: 46ch; }
.pd-meta { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 28px; margin: 26px 0 0; justify-content: start; }
.pd-meta dt { font: 500 var(--pa-fs-xs) var(--pa-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pa-ink-3); }
.pd-meta dd { margin: 4px 0 0; font-size: 14.5px; color: var(--pa-ink); }
.pd-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.pd-stack em { font: 500 12px var(--pa-font-mono); font-style: normal; padding: 5px 10px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--ac) 40%, transparent); color: var(--pa-ink-2); }
.pd-hero .p-ctas { margin-top: 28px; }
.pd-pending { margin-top: 16px; font: 500 12.5px var(--pa-font-mono); color: #fbbb83; }

/* browser frame */
.pd-frame { border-radius: 14px; overflow: hidden; background: #0f1414; border: 1px solid var(--pa-line-strong);
  box-shadow: 0 50px 100px -40px #000, 0 0 120px -40px color-mix(in oklch, var(--ac) 60%, transparent); }
.pd-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: #1b2122; border-bottom: 1px solid var(--pa-line); }
.pd-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a4446; }
.pd-bar span { margin: 0 auto; padding: 4px 18px; border-radius: 6px; background: #121718; font: 500 11.5px var(--pa-font-mono); color: var(--pa-ink-3); }
.pd-shot { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.pd-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* cover: straightens while it scrolls in; the full-length capture scrolls inside */
.pd-cover { padding: 40px 0 0; perspective: 1800px; }
.pd-cover-frame { width: min(1180px, calc(100vw - 64px)); margin: 0 auto; transform-origin: 50% 100%; will-change: transform; }
.pd-cover.tall { height: 260vh; }
.pd-cover.tall .pd-cover-pin { position: sticky; top: 90px; }
.pd-cover.tall .pd-shot img { height: auto; bottom: auto; will-change: transform; }

.pd-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 96px 0 40px; border-bottom: 1px solid var(--pa-line); }
.pd-fact b { display: block; font: 800 clamp(40px, 5vw, 64px)/1 "Inter Tight", var(--pa-font-ui); letter-spacing: -.04em; color: #eef4f4; }
.pd-fact span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--pa-ink-3); max-width: 22ch; }

/* PIPOO steps next to a sticky frame */
.pd-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding: 110px 0 40px; }
.pd-steps > .a-kicker { margin-bottom: 20px; }
.pd-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .5s var(--pa-ease); }
.pd-step.on { opacity: 1; }
.pd-step-k { display: flex; align-items: center; gap: 12px; font: 600 13px var(--pa-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pa-ink-3); }
.pd-step-k b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font: 800 22px "Inter Tight", var(--pa-font-ui); letter-spacing: 0;
  color: var(--ac); background: color-mix(in oklch, var(--ac) 14%, transparent); border: 1px solid color-mix(in oklch, var(--ac) 40%, transparent); }
.pd-step.on .pd-step-k { color: var(--pa-ink); }
.pd-step p { margin: 18px 0 0; font: 600 clamp(20px, 2vw, 27px)/1.4 var(--pa-font-ui); letter-spacing: -.01em; color: #eef4f4; }
.pd-step-img { display: none; }
.pd-sticky { position: sticky; top: calc(50vh - 260px); align-self: start; }
.pd-swap img { opacity: 0; transform: scale(1.04); transition: opacity .6s var(--pa-ease), transform 1.2s var(--pa-ease); }
.pd-swap img.on { opacity: 1; transform: none; }
.pd-cap { margin: 14px 0 0; font: 500 12.5px var(--pa-font-mono); color: var(--pa-ink-3); }

/* brand kit */
.pd-brand { padding: 110px 0 20px; }
.pd-brand h2, .pd-mobile h2 { font: 800 clamp(28px, 3.4vw, 44px)/1.1 "Inter Tight", var(--pa-font-ui); letter-spacing: -.03em; margin: 8px 0 28px; color: #eef4f4; }
.pd-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pd-logo { display: grid; place-items: center; aspect-ratio: 16 / 8; border-radius: 16px; border: 1px solid var(--pa-line); }
.pd-logo.dark { background: #23150d; } .pd-logo.light { background: #e9e1d6; }
.pd-logo img { width: 42%; }
.pd-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 16px; }
.pd-sw span { display: block; aspect-ratio: 1; border-radius: 14px; background: var(--c); border: 1px solid var(--pa-line); }
.pd-sw b { display: block; margin-top: 10px; font-size: 13.5px; color: var(--pa-ink); }
.pd-sw code { font: 500 12px var(--pa-font-mono); color: var(--pa-ink-3); }
.pd-photos { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin-top: 16px; }
.pd-photos img { width: 100%; height: 340px; object-fit: cover; border-radius: 16px; }

/* phones */
.pd-mobile { padding: 110px 0 20px; }
.pd-phones { display: flex; justify-content: center; gap: 4vw; margin-top: 24px; }
.pd-phone { width: min(260px, 26vw); aspect-ratio: 390 / 844; border-radius: 38px; padding: 10px; background: #0d1112; border: 1px solid var(--pa-line-strong);
  box-shadow: 0 40px 80px -30px #000; will-change: transform; }
.pd-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 28px; }

/* gallery */
.pd-gallery { padding: 110px 0 0; }
.pd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.pd-grid figure { margin: 0; }
.pd-zoom { all: unset; cursor: zoom-in; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--pa-line); background: #fff; aspect-ratio: 16 / 10; }
.pd-zoom img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--pa-ease); }
.pd-zoom:hover img { transform: scale(1.04); }
.pd-grid figcaption { margin-top: 10px; font-size: 13.5px; color: var(--pa-ink-3); }
.pd-dlg { padding: 0; border: 0; background: transparent; max-width: 92vw; max-height: 90vh; }
.pd-dlg::backdrop { background: color-mix(in srgb, #0a0e0f 86%, transparent); backdrop-filter: blur(8px); }
.pd-dlg img { display: block; max-width: 92vw; max-height: 88vh; border-radius: 12px; }
.pd-dlg button { all: unset; cursor: pointer; position: fixed; top: 20px; right: 24px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--pa-surface); color: var(--pa-ink); }

/* next */
.pd-next-a { display: grid; gap: 10px; color: inherit; text-decoration: none; max-width: 640px; }
.pd-next-n { font: 800 72px/1 "Inter Tight", var(--pa-font-ui); color: var(--ac); letter-spacing: -.04em; }
.pd-next-a strong { font: 800 clamp(32px, 4.4vw, 58px)/1.05 "Inter Tight", var(--pa-font-ui); letter-spacing: -.035em; color: #eef4f4; }
.pd-next-line { color: var(--pa-ink-2); font-size: 17px; line-height: 1.55; }
.pd-next-a .pa-btn { justify-self: start; margin-top: 8px; }

@media (max-width: 860px) {
  .pd-meta { grid-template-columns: 1fr 1fr; }
  .pd-cover-frame { width: calc(100vw - 32px); }
  .pd-cover.tall { height: 170vh; }
  .pd-facts { grid-template-columns: 1fr 1fr; padding-top: 64px; }
  .pd-story { grid-template-columns: 1fr; gap: 0; padding-top: 72px; }
  .pd-step { min-height: 0; opacity: 1; padding: 22px 0; }
  .pd-step-img { display: block; margin-top: 16px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid var(--pa-line); }
  .pd-sticky { display: none; }
  .pd-swatches { grid-template-columns: repeat(3, 1fr); }
  .pd-logos, .pd-photos { grid-template-columns: 1fr; } .pd-photos img { height: 220px; }
  .pd-phones { gap: 10px; } .pd-phone { border-radius: 22px; padding: 5px; } .pd-phone img { border-radius: 17px; }
  .pd-grid { grid-template-columns: 1fr; }
}
/* portrait captures (Pie Agent sidebar screens): show the whole screen on a dark mat instead of cropping */
.pd-swap img.portrait, .pd-zoom.portrait img, .pd-step-img.portrait { object-fit: contain; object-position: center; background: #151b1c; }
.pd-zoom.portrait { background: #151b1c; }

/* feature groups (Sale OS): title + list on the left, real screens on the right */
.pd-feats { padding: 110px 0 20px; display: grid; gap: 56px; }
.pd-feat { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; padding-top: 28px; border-top: 1px solid var(--pa-line); }
.pd-feat-h h3 { margin: 0; font: 800 clamp(24px, 2.4vw, 32px)/1.15 "Inter Tight", var(--pa-font-ui); letter-spacing: -.02em; color: #eef4f4; }
.pd-feat-h ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.pd-feat-h li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--pa-ink-2); }
.pd-feat-h li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ac); flex: none; }
.pd-feat-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pd-feat-shots figure { margin: 0; }
.pd-feat-shots figure:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.pd-feat-shots figcaption { margin-top: 8px; font-size: 13px; color: var(--pa-ink-3); }
@media (max-width: 860px) { .pd-feat { grid-template-columns: 1fr; gap: 18px; } .pd-feat-shots { grid-template-columns: 1fr; } }