/* ---------------------------------------------------------------------------
   proposal.css — /proposals/<slug>-<code> and its questionnaire, generated by
   build/proposals.mjs.

   EVERY NUMBER HERE WAS MEASURED ON THE LIVE SITE (cada.html and about.html at
   1600px, 02/10/2026), not chosen:
     · gutter 6px at the viewport edge; left column ≈30% (471 of 1600px), the
       content starts 8px after it
     · case accordion: #f5f5f5, padding 10px, closed height 40px, 2px between
       items, title 14px / 1.4, body 12px / 1.4
     · nav chips 13px, 26px tall
     · About page: rows with the label on the left and content on the right;
       labels 12px uppercase, intro copy 18px
     · display sizes 66px and 158px (the intro's "DESIGN by FEL")
   So the type scale is 12 · 13 · 14 · 18 · 66 · 158 and nothing in between.

   ONE TYPEFACE: Maxeville Tekst (decision 02/10/2026). Where the site uses
   Construct for 13–14px titles, this uses Tekst in caps at the same size.

   EVERY SECTION IS ONE VIEWPORT (request 02/10/2026): a header bar, rows, and
   the last row (.pp-row-fill) stretches so the frame always closes at the
   bottom edge. Desktop snaps section to section; phones scroll freely.
   --------------------------------------------------------------------------- */

.pp {
  --pp-bg:       var(--c-white);
  --pp-block:    var(--c-white-f5);
  --pp-chip:     var(--c-off-white);
  --pp-chip-hov: var(--c-grey-dbd);
  --pp-ink:      var(--c-black);
  --pp-ink-2:    #555;
  --pp-ink-3:    var(--c-grey-82);
  --pp-solid:    var(--c-near-black);
  --pp-on-solid: var(--c-white);
  --pp-off:      rgba(0, 0, 0, .1);
  --pp-line:     rgba(0, 0, 0, .08);
  --pp-brown:    var(--c-brown);
  --pp-on-brown: var(--c-off-white);
  --pp-p1: #3c93fc;  /* the four phases of the byFel process — the only chroma */
  --pp-p2: #ff9b3e;
  --pp-p3: #aa66dd;
  --pp-p4: #29c98f;

  /* scale, measured */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-18: 18px;
  --fs-66: clamp(40px, 4.15vw, 66px);
  --fs-158: clamp(64px, 9.9vw, 158px);

  /* grid, measured */
  --g: 6px;                       /* viewport gutter */
  --side: calc(30vw - 9px);       /* left column */
  --gap: 8px;                     /* left column → content */
  --pad: 10px;                    /* block padding */
  --top: 76px;                    /* content starts here, under the chip bar */
  --view-h: calc(100svh - var(--top) - var(--g));

  margin: 0;
  background: var(--pp-bg);
  color: var(--pp-ink);
  font-family: 'Maxeville Tekst', 'Maxeville Regular', 'General Sans', sans-serif;
  font-size: var(--fs-12);
  line-height: 1.4;
}
html:has(body.pp) { background: var(--c-white); scroll-behavior: smooth; }

@media all { /* dark only (03/10/2026) — was prefers-color-scheme: dark */
  .pp {
    --pp-bg: var(--c-black);
    --pp-block: var(--c-near-black);
    --pp-chip: var(--c-grey-1a);
    --pp-chip-hov: var(--c-grey-23);
    --pp-ink: var(--c-off-white);
    --pp-ink-2: #a8a8a8;
    --pp-solid: var(--c-off-white);
    --pp-on-solid: var(--c-black);
    --pp-off: rgba(255, 255, 255, .16);
    --pp-line: rgba(255, 255, 255, .1);
  }
  html:has(body.pp) { background: var(--c-black); }
}

.pp *, .pp *::before, .pp *::after { box-sizing: border-box; }
.pp h1, .pp h2, .pp h3 { font-weight: 400; margin: 0; }
.pp p { margin: 0; }
.pp ul { margin: 0; padding: 0; list-style: none; }
.pp a { color: inherit; text-decoration: none; }
.pp :focus-visible { outline: 1px solid var(--pp-ink); outline-offset: 2px; }

/* --- atoms --------------------------------------------------------------- */

.pp-chip {
  display: inline-block; font: inherit; font-size: var(--fs-13); line-height: 16px;  /* 16 + 5 + 5 = the site's 26px chip */
  text-transform: uppercase; letter-spacing: .02em;
  background: var(--pp-chip); color: var(--pp-ink);
  padding: 5px 8px; border: 0; cursor: pointer; white-space: nowrap;
  transition: background var(--m-dur-1) var(--m-ease), color var(--m-dur-1) var(--m-ease);
}
.pp-chip:hover { background: var(--pp-chip-hov); }
.pp-chip.is-on, .pp-chip.is-solid { background: var(--pp-solid); color: var(--pp-on-solid); }
.pp-chip.is-solid:hover { opacity: .85; }
/* TOP BAR CHIPS — the site's three variants, values from framer-runtime.css
   (captured from the live site), not invented:
     LIGHT  rgba(238,238,238,.9) black ink   → hover rgb(253,253,253)
     GLASS  rgba(245,245,245,.2) + frost, white ink → hover rgb(0,0,0)
     DARK   rgb(18,18,18) white ink          → hover rgb(49,49,49)
   Light pages (the cases) use LIGHT for FEL/client and the tags; dark pages
   (the home) use GLASS. The black "here" chip is DARK on both, like the
   project chip on a case and SELECTED WORK on the home. All of them move with
   the site's 400ms curve. (An earlier version pinned LIGHT on dark too —
   wrong: that's not what the home does.) */
.pp-top .pp-chip {
  transition: background-color 400ms cubic-bezier(.44, 0, .56, 1), color 400ms cubic-bezier(.44, 0, .56, 1);
}
.pp-chip.is-glass { background: rgba(238, 238, 238, .9); color: var(--c-black); }
.pp-chip.is-glass:hover { background: rgb(253, 253, 253); }
.pp-chip.is-tag { background: rgba(250, 250, 250, .9); color: var(--c-black); cursor: default; }
.pp-top .pp-chip.is-on { background: rgb(18, 18, 18); color: var(--c-white); }
.pp-top .pp-chip.is-on:hover { background: rgb(49, 49, 49); opacity: 1; }
@media all { /* dark only (03/10/2026) — was prefers-color-scheme: dark */
  .pp-chip.is-glass, .pp-chip.is-tag {
    background: rgba(245, 245, 245, .2); color: var(--c-white);
    backdrop-filter: blur(90px) saturate(160%) brightness(.24);
    -webkit-backdrop-filter: blur(90px) saturate(160%) brightness(.24);
  }
  .pp-chip.is-glass:hover { background: rgb(0, 0, 0); }
}
/* FEL [+] CLIENT: the plus is its own chip, in the black of the "here" chip
   (DARK variant) — the join between studio and client. The version sits
   right after PROJECT PROPOSAL in the same black. */
.pp-top .pp-plus, .pp-top .pp-ver { background: rgb(18, 18, 18); color: var(--c-white); cursor: default; }
.pp-top .pp-chip.is-on.pp-ver:hover { background: rgb(18, 18, 18); }
.pp-chip.is-pending { cursor: default; color: var(--pp-ink-3); }
.pp-chip.is-pending:hover { background: var(--pp-chip); }

.pp-sq {
  width: 7px; height: 7px; flex: none; display: block; background: var(--pp-off);
  transition: background var(--m-dur-acc) var(--m-ease-acc);
}
.pp-lbl { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--pp-ink-3); }
.pp-k { color: var(--pp-ink-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.pp-lead { font-size: var(--fs-18); line-height: 1.3; max-width: 38em; text-wrap: pretty; }
.pp-body { font-size: var(--fs-12); color: var(--pp-ink-2); max-width: 56em; }
.pp-statement { font-size: var(--fs-66); line-height: 1; letter-spacing: -.025em; max-width: 15em; text-wrap: balance; margin-top: auto; }
.pp-hl { font-weight: 400; background: var(--pp-solid); color: var(--pp-on-solid); padding: 0 .2em; }

/* --- left column: chips, index, counter ---------------------------------- */

.pp-top {
  position: fixed; z-index: 30; top: var(--g); left: var(--g); right: var(--g);
  display: grid; grid-template-columns: calc(var(--side) + var(--gap)) auto 1fr; align-items: start;
  pointer-events: none;
}
.pp-top > * { pointer-events: auto; }
/* With one section per viewport the frame always starts at 76px, so the
   strip above it is masked: the tail of the previous section never shows
   behind the chips. */
.pp-top::before {
  content: ''; position: absolute; z-index: -1;
  top: calc(-1 * var(--g)); left: calc(-1 * var(--g)); right: calc(-1 * var(--g));
  height: var(--top); background: transparent;
  backdrop-filter: blur(90px) saturate(160%);
  -webkit-backdrop-filter: blur(90px) saturate(160%);
}
.pp-vers { position: relative; }
.pp-vers summary { list-style: none; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.pp-vers summary::-webkit-details-marker { display: none; }
.pp-top .pp-vers summary.pp-ver { cursor: pointer; transition: background 400ms cubic-bezier(.44,0,.56,1); }
.pp-top .pp-vers summary.pp-ver:hover, .pp-vers[open] summary.pp-ver { background: rgb(49, 49, 49); }
.pp-vers summary i { font-style: normal; font-size: 9px; transition: transform 400ms cubic-bezier(.44,0,.56,1); }
.pp-vers[open] summary i { transform: rotate(180deg); }
.pp-vers-menu { position: absolute; top: calc(100% + 2px); left: 0; z-index: 50; display: flex; flex-direction: column; gap: 2px; min-width: 140px; animation: pp-att-in 300ms cubic-bezier(.44,0,.56,1); }
.pp-vers-menu a { display: grid; grid-template-columns: 28px 1fr; gap: 8px; background: rgb(18, 18, 18); color: var(--c-white); text-decoration: none; }
.pp-vers-menu a:hover { background: rgb(49, 49, 49); }
.pp-vers-menu a.is-here { background: rgba(238, 238, 238, .9); color: #000; }
.pp-vers-menu b { font-weight: 400; }
.pp-vers-menu em { font-style: normal; opacity: .55; }
.pp-top-site, .pp-top-here, .pp-top-tags { display: flex; gap: 2px; align-items: flex-start; }
.pp-top-tags { justify-content: flex-end; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.pp-side {
  position: fixed; z-index: 20;
  top: var(--top); left: var(--g); bottom: var(--g); width: var(--side);
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.pp-toc { display: flex; flex-direction: column; gap: 2px; }
.pp-toc > a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  height: 40px; padding: 0 var(--pad); background: var(--pp-block);
  font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .01em;
}
/* WHAT IS IN VIEW (03/10/2026): the titles live only here, so the index has
   to say clearly where the reader is. The entry on screen is full ink with its
   square lit; everything else is off — grey type, square at 10%. */
.pp-toc > a, .pp-toc-scope { color: var(--pp-ink-3); transition: color var(--m-dur-2) var(--m-ease); }
.pp-toc > a:hover, .pp-scope-l:hover { color: var(--pp-ink); }
.pp-toc > a.is-on, .pp-toc-scope.is-on { color: var(--pp-ink); }
.pp-toc > a:hover .pp-sq { background: var(--pp-ink-3); }
.pp-toc > a.is-on .pp-sq { background: var(--pp-ink); }

/* SCOPE AS ONE ROW (request 02/10/2026). The four phases share a single
   index row that only unfolds once the reader reaches Approach (folded to
   height 0 before; the -2px margin cancels the stack's gap). Under it runs a
   timeline: four equal segments, one per phase, filling in the phase colour
   as it is read (--p, written by proposal.js). The label is the phase name. The letters on the right
   jump to each phase and take its colour once reached. */
.pp-toc-scope {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  height: 0; margin-top: -2px; padding: 0 var(--pad); overflow: hidden;
  background: var(--pp-block); opacity: 0; visibility: hidden;
  font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .01em;
  transition: height var(--m-dur-acc) var(--m-ease-acc), margin var(--m-dur-acc) var(--m-ease-acc),
              opacity var(--m-dur-2) var(--m-ease), visibility 0s linear var(--m-dur-acc);
}
.pp-toc.is-phases .pp-toc-scope {
  height: 40px; margin-top: 0; opacity: 1; visibility: visible;
  transition: height var(--m-dur-acc) var(--m-ease-acc), margin var(--m-dur-acc) var(--m-ease-acc),
              opacity var(--m-dur-3) var(--m-ease) 120ms, visibility 0s;
}
.pp-scope-l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pp-scope-now { display: inline-block; }
.pp-scope-letters { display: flex; gap: 10px; }
.pp-scope-letters a { color: var(--pp-ink-3); transition: color var(--m-dur-acc) var(--m-ease-acc); }
.pp-scope-letters a:hover { color: var(--pp-ink); }
.pp-scope-letters a.is-reached { color: var(--c); }
.pp-scope-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; display: flex; gap: 2px; }
.pp-scope-track i { position: relative; flex: 1 1 0; background: color-mix(in srgb, var(--c) 22%, transparent); }
.pp-scope-track i::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--c);
  transition: width var(--m-dur-acc) var(--m-ease-acc);
}
.pp-burger { display: none; }
.pp-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 4px;
  font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--pp-ink-3);
}
.pp-count { font-variant-numeric: tabular-nums; }
.pp-count b { font-weight: 400; color: var(--pp-ink); }

/* --- content column + viewport sections ---------------------------------- */

.pp-main { margin-left: calc(var(--g) + var(--side) + var(--gap)); padding: var(--top) var(--g) 0 0; }
.pp-view {
  min-height: var(--view-h);
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: var(--g);
  scroll-margin-top: var(--top);
}
.pp-view[hidden] { display: none; }

.pp-bar {
  display: flex; align-items: center; gap: 16px;
  height: 40px; padding: 0 var(--pad); background: var(--pp-block); flex: none;
}
.pp-bar h2 { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .01em; flex: 1; }
.pp-bar-meta { display: flex; align-items: center; gap: 8px; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--pp-ink-3); }
.pp-bar-meta i { width: 7px; height: 7px; display: block; }
.pp-n { font-size: var(--fs-12); color: var(--pp-ink-3); font-variant-numeric: tabular-nums; }
/* On desktop the index on the left names every section; repeating the title
   on top of the content was noise. The bars only come back on phones, where
   the index hides behind MENU. */
@media (min-width: 1200px) { .pp-view > .pp-bar { display: none; } }
.pp-phase-meta { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-12); color: var(--pp-ink-3); text-transform: uppercase; letter-spacing: .04em; }

/* The About row: label | content. */
.pp-row {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: var(--pad);
  padding: var(--pad); background: var(--pp-block);
}
.pp-row-l { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; }
.pp-row-r { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pp-row-fill { flex: 1; }

/* --- hero ---------------------------------------------------------------- */

.pp-hero, .pp-close { justify-content: space-between; padding: var(--pad); background: var(--pp-block); }
.pp-hero-top, .pp-close-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pp-hero .pp-title { align-items: center; text-align: center; }
.pp-title {
  display: flex; flex-direction: column;
  font-size: var(--fs-158); line-height: .86; letter-spacing: -.04em; text-transform: uppercase;
}
.pp-title .dim { color: var(--pp-ink-3); }
.pp-hero .pp-title span { display: block; animation: pp-rise var(--m-dur-curtain) var(--m-ease-exit) both; }
.pp-hero .pp-title span + span { animation-delay: 120ms; }
@keyframes pp-rise { from { transform: translateY(.3em); opacity: 0; } }
.pp-hero-bottom { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pad); align-items: end; }

/* HERO, 03/10/2026: the home's gradient (corredor.css #palco: white at the
   top falling to black), BYFEL + CLIENT on one line a step smaller, and the
   footer copy centred. All type white. */
/* The home's light-to-dark fall, but it reaches black sooner: the title and
   the line under it sit on the dark half, where white reads (03/10). */
.pp-hero { background: linear-gradient(#fff -12%, #6a6a6a 18%, #1c1c1c 42%, #000 70%); }
.pp-hero-center { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.pp-hero-center .pp-title { margin: 0; }
.pp-hero-center .pp-lead { color: #fff; max-width: 34em; }
.pp-hero .pp-title {
  flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 .25em;
  font-size: clamp(48px, 7.4vw, 120px);
}
/* All hero type 100% white. The one place the proposal leaves Tekst:
   BYFEL in Maxeville Construct, the client in Maxeville Regular (03/10). */
.pp-hero .pp-title, .pp-hero .pp-title .dim, .pp-hero-bottom, .pp-hero .pp-meta dt { color: #fff; }
.pp-hero .pp-title > span:first-child { font-family: 'Maxeville Construct', 'Maxeville Regular', sans-serif; }
.pp-hero .pp-title .dim { font-family: 'Maxeville Regular', 'Maxeville Tekst', sans-serif; }
.pp-hero-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; }
.pp-hero-bottom .pp-lead { margin-inline: auto; }
.pp-hero .pp-meta { justify-content: center; }
.pp-meta { display: grid; grid-auto-flow: column; grid-auto-columns: auto; gap: 24px; justify-content: end; margin: 0; }
.pp-meta dt { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--pp-ink-3); }
.pp-meta dd { margin: 4px 0 0; font-size: var(--fs-14); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- overview / who we are ----------------------------------------------- */

.pp-cols { display: grid; gap: 2px; margin-top: auto; }
.pp-cols.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-cols.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-cols > div { background: var(--pp-bg); padding: var(--pad); display: flex; flex-direction: column; gap: 8px; min-height: 140px; }
.pp-cols h3 { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .01em; }
.pp-cols p { color: var(--pp-ink-2); }

.pp-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--pad); margin: 0; }
.pp-pairs dt { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--pp-ink-3); }
.pp-pairs dd { margin: 2px 0 0; font-size: var(--fs-14); }

.pp-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; flex: 1; min-height: 220px; }
.pp-case { display: flex; flex-direction: column; gap: 6px; min-height: 0; margin: 0; }
.pp-case-img { display: block; flex: 1; min-height: 0; overflow: hidden; background: var(--pp-chip); }
.pp-case-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--m-dur-3) var(--m-ease-acc); }
.pp-case:hover .pp-case-img img { transform: scale(1.04); }
.pp-case-name { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .02em; }

/* --- selected work: the /projects list --------------------------------------
   One row per case. Three cards fill the width, 8px apart, at the site's card
   ratio (67/40, from .fel-card); the rest of the row waits off-screen and the
   row runs left while the pointer is on it — like /projects. The list scrolls
   vertically inside the frame. Flat cut at the edges (no fade, house rule).
   On touch and with reduced motion each row is a plain horizontal scroll. */
.pp-row-strip .pp-row-r { min-height: 0; }
.pp-rows-box { flex: 1; min-height: 240px; position: relative; }
.pp-rows {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: auto;
  display: flex; flex-direction: column; gap: 8px;
  container-type: inline-size; scrollbar-width: none;
}
.pp-rows::-webkit-scrollbar { display: none; }
.pp-rows[hidden] { display: none; }
.pp-rows { animation: pp-fade var(--m-dur-2) var(--m-ease); }
@keyframes pp-fade { from { opacity: 0; } }
.pp-prow { position: relative; flex: none; --media-height: clamp(150px, calc((100cqi - 16px) * 3 / 16), 300px); }
.pp-strip { overflow: hidden; }
.pp-strip-track, .pp-strip-copy { display: flex; gap: 8px; }
.pp-strip-track { width: max-content; will-change: transform; animation: pp-run var(--run, 30s) linear infinite paused; }
.pp-strip-copy { padding-left: 8px; }
.pp-prow:hover .pp-strip-track { animation-play-state: running; }
@keyframes pp-run { to { transform: translateX(-50%); } }
.pp-card { margin: 0; flex: none; height: var(--media-height); width: calc(var(--media-height) * var(--media-ratio, 1.777778)); aspect-ratio: var(--media-ratio, 16 / 9); background: transparent; overflow: hidden; }
.pp-card img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.pp-prow-name { position: absolute; left: 6px; bottom: 6px; pointer-events: none; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .pp-strip { overflow-x: auto; scrollbar-width: none; }
  .pp-strip::-webkit-scrollbar { display: none; }
  .pp-strip-track { animation: none; }
  .pp-strip-copy { display: none; }
}

/* Selected work (03/10): the sector chips on top, the list below across the
   whole content width — no label column. */
.pp-sw { display: flex; flex-direction: column; gap: var(--pad); }
.pp-sw .pp-sectors { flex-direction: row; flex-wrap: wrap; }
/* sector chips: the client's sector first */
.pp-row-strip .pp-row-l { display: flex; flex-direction: column; gap: 12px; }
.pp-sectors { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pp-sectors .pp-chip { display: flex; gap: 8px; }
.pp-sectors .pp-chip span { opacity: .5; font-variant-numeric: tabular-nums; }

/* --- approach ------------------------------------------------------------ */

.pp-diamond { display: flex; align-items: center; justify-content: center; }
.pp-diamond { padding: 0; background: var(--pp-block); }  /* same #121212 as the METHOD row */
.pp-diamond svg { display: block; width: 100%; height: 100%; max-height: calc(100svh - 160px); }
.pp-hub { position: relative; min-height: 320px; padding: 0; background: var(--pp-block); }
.pp-hub svg { position: absolute; inset: 40px var(--pad) var(--pad); width: calc(100% - 2 * var(--pad)); height: calc(100% - 40px - var(--pad)); }
.pp-hub-cap { position: absolute; top: var(--pad); left: var(--pad); margin: 0; display: flex; gap: 2px; font-size: var(--fs-13); line-height: 16px; text-transform: uppercase; }
.pp-hub-cap span, .pp-hub-cap b { font-weight: 400; padding: 5px 8px; background: rgb(18,18,18); }
.pp-hub-cap b { transition: opacity 400ms cubic-bezier(.44,0,.56,1); }
.pp-hub-cap b.is-out { opacity: 0; }
/* nodes — Figma GLASS (2091:734): off = border #1f1f1f, text #828282;
   on = border #909090, text white. Glass = sheen + rim light + refraction. */
.pp-hg { fill: url(#pp-hsheen); stroke: #1f1f1f; stroke-width: .66; transition: stroke 600ms cubic-bezier(.44,0,.56,1); }
.pp-hb { fill: url(#pp-hbounce); }
.pp-hr { fill: none; stroke: url(#pp-hrim); stroke-width: .9; opacity: .5; transition: opacity 600ms cubic-bezier(.44,0,.56,1); }
.pp-hn text, .pp-hfel-t { font-family: inherit; font-size: 14px; letter-spacing: .42px; text-anchor: middle; dominant-baseline: central; }
.pp-hn text { fill: #828282; transition: fill 600ms cubic-bezier(.44,0,.56,1); }
.pp-hn.is-on .pp-hg { stroke: #909090; }
.pp-hn.is-on .pp-hr { opacity: 1; }
.pp-hn.is-on text { fill: #fff; }
.pp-hf { fill: rgba(86,57,30,.6); stroke: #909090; stroke-width: .96; stroke-dasharray: 1.4 1.4; }
.pp-hfs { fill: url(#pp-hfsheen); }
.pp-hfel .pp-hr { opacity: .8; }
.pp-hfel-t { fill: #fff; font-size: 16.5px; letter-spacing: 0; }
.pp-hl line { stroke: #909090; stroke-width: .96; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms cubic-bezier(.44,0,.56,1); }
.pp-hl line.is-on { stroke-dashoffset: 0; transition-duration: 900ms; }
.pp-hl:not(.pp-hl-glass) line.is-on { transition-delay: .25s; }   /* FEL → edge → node */
.pp-hl-glass line.pp-hl-in.is-on { transition-delay: .9s; }
.pp-hl-glass line { stroke: #bdbdbd; stroke-width: 2; opacity: .3; }
.pp-dgrid line { stroke: #333; stroke-dasharray: 3 5; }
.pp-dline polygon { stroke: #fff; stroke-width: 1; }
.pp-dline line, .pp-dline rect { fill: none; }
.pp-dline polygon { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--m-ease-acc); }
.pp-diamond[data-mreveal-armed] .pp-dline polygon { stroke-dashoffset: 1; }
.pp-dtop { font: 14px 'Maxeville Tekst', sans-serif; letter-spacing: 1.4px; fill: #8a8a8a; }
.pp-dbox { font: 12px 'Maxeville Tekst', sans-serif; letter-spacing: .3px; fill: #fff; }
.pp-dtext { font: 13px 'Maxeville Tekst', sans-serif; letter-spacing: .2px; }
.pp-dlist { font: 15px 'Maxeville Tekst', sans-serif; fill: #fff; }

/* --- phases: the case accordion, verbatim -------------------------------- */

.pp-view[id^="phase-"] > .pp-row { background: none; padding: 0; gap: 2px; }
.pp-view[id^="phase-"] .pp-row-l {
  background: var(--pp-block); padding: var(--pad);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 24px;
  container-type: inline-size;
}
/* 66 is the cap; the container query only steps down when the column is too
   narrow for "STRATEGY" — the scale stays 66, the column decides. */
.pp-phase-big { font-size: min(var(--fs-158), 60cqi); line-height: .8; letter-spacing: -.04em; }
.pp-accs { gap: 2px; }
.pp-group {
  display: flex; align-items: flex-end;
  height: 32px; padding: 0 var(--pad) 6px calc(40px + var(--pad));
  font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--pp-ink-3);
}
/* Permanent codes (A1…D4): the letter is the phase. Shown in the bar titles,
   the index and the timeline as a coloured letter, never as a second number. */
.pp-letter { display: inline-block; min-width: 1.4em; }
.pp-tag {
  font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em;
  background: var(--pp-solid); color: var(--pp-on-solid); padding: 2px 6px 1px; justify-self: end;
}
.pp-acc.is-removed { background: none; box-shadow: inset 0 0 0 1px var(--pp-block); }
.pp-acc.is-removed .pp-acc-t, .pp-acc.is-removed .pp-k { color: var(--pp-ink-3); text-decoration: line-through; }
.pp-acc.is-removed .pp-tag { background: var(--pp-chip); color: var(--pp-ink-3); }
.pp-acc.is-removed .pp-sq { background: none; }
.pp-acc { background: var(--pp-block); }
.pp-acc summary, .pp-sum {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 40px 1fr auto 7px; gap: 0 var(--pad); align-items: center;
  height: 40px; padding: 0 var(--pad);
}
.pp-sum { cursor: default; }
.pp-acc summary::-webkit-details-marker { display: none; }
.pp-acc-t { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .01em; }
.pp-acc summary:hover .pp-sq { background: var(--pp-ink-3); }
.pp-acc[open] summary .pp-sq { background: var(--pp-ink); }
.pp-dt { overflow: hidden; }
.pp-dt > div { padding: 0 var(--pad) 14px calc(40px + var(--pad)); display: flex; flex-direction: column; gap: 8px; max-width: 64em; color: var(--pp-ink-2); }
.pp-dt > div:has(.pp-dt-grid) { max-width: none; }
/* deliverable + its process image: text left, image right (04/10) */
.pp-dt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; max-width: none; }  /* image under the text (04/10) */
.pp-dt-text { display: flex; flex-direction: column; gap: 8px; max-width: 64em; }
.pp-dt-fig { position: relative; margin: 0; background: var(--pp-chip); max-width: 640px; }
.pp-dt-fig img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }  /* 16:9 (04/10) */
.pp-dt-fig figcaption { position: absolute; left: 6px; top: 6px; }
@media (max-width: 680px) { .pp-dt-grid { grid-template-columns: 1fr; } }
.pp-dt ul { display: flex; flex-direction: column; gap: 2px; }
.pp-dt li::before { content: '•  '; color: var(--pp-ink-3); }
.pp-detail { color: var(--pp-ink); }
.pp-note { color: var(--pp-ink-3); }
/* the accordion column fills the frame down to the bottom edge */
.pp-accs::after { content: ''; flex: 1; background: var(--pp-block); min-height: 40px; }

/* --- timeline ------------------------------------------------------------ */

.pp-gantt { display: flex; flex-direction: column; gap: 2px; padding: 0; background: none; }
.pp-g {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 1fr); gap: var(--pad); align-items: center;
  min-height: 40px; padding: 0 var(--pad); background: var(--pp-block);
}
.pp-g-l { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .01em; }
.pp-g-w { text-align: right; color: var(--pp-ink-3); font-variant-numeric: tabular-nums; }
.pp-g-head .pp-g-l, .pp-g-foot .pp-g-l { font-size: var(--fs-12); letter-spacing: .04em; color: var(--pp-ink-3); }
.pp-g-foot { align-items: center; }
/* the phases share the frame: each row grows, its bar fills the row */
.pp-gantt .pp-g:not(.pp-g-head):not(.pp-g-foot) { flex: 1; align-items: stretch; padding-block: var(--pad); }
.pp-gantt .pp-g:not(.pp-g-head):not(.pp-g-foot) .pp-track { height: auto; background-size: 1px 100%; background-position: 0 0; }
.pp-gantt .pp-g:not(.pp-g-head):not(.pp-g-foot) .pp-gb { align-items: flex-end; padding: 8px; }
.pp-gantt .pp-g:not(.pp-g-head):not(.pp-g-foot) .pp-g-w { align-self: end; }
.pp-ticks { position: relative; height: 14px; color: var(--pp-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.pp-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.pp-track { position: relative; height: 20px; background: linear-gradient(var(--pp-line), var(--pp-line)) 0 50% / 100% 1px no-repeat; }
.pp-gb {
  position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w);
  display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap;
  font-size: var(--fs-12); color: #fff; font-variant-numeric: tabular-nums;
  transform-origin: left center; transition: transform 1.1s var(--m-ease-acc);
}
.pp-gantt[data-mreveal-armed] .pp-gb { transform: scaleX(0); }

/* --- tables (investment, payment) ----------------------------------------
   Columns sit on the page grid: the first column is the 3/10 label column of
   every other row, so SERVICE lines up with OBJECTIVE, TEAM, ESTIMATE… No
   bullets: an optional line is switched with its own chip, under the price. */

.pp-table { display: flex; flex-direction: column; gap: 2px; }
.pp-tr {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 2fr); gap: var(--pad);
  align-items: start; padding: var(--pad); background: var(--pp-block);
}
.pp-th { align-items: center; height: 40px; padding-block: 0; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--pp-ink-3); }
.pp-th > :last-child { text-align: right; justify-self: end; }
label.pp-tr { cursor: pointer; }
.pp-tr input { position: absolute; opacity: 0; pointer-events: none; }
.pp-tr:has(input:focus-visible) { outline: 1px solid var(--pp-ink); outline-offset: -1px; }

.pp-c-name { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .01em; display: flex; flex-direction: column; gap: 4px; }
.pp-c-name small { font-size: var(--fs-12); text-transform: none; letter-spacing: 0; color: var(--pp-ink-2); max-width: 30em; }
.pp-c-name em { font-style: normal; font-size: var(--fs-12); letter-spacing: .04em; color: var(--pp-ink-3); }
.pp-c-inc { display: grid; grid-auto-rows: min-content; gap: 2px var(--pad); padding-top: 1px; }
.pp-c-inc.is-long { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(6, min-content); }
.pp-c-inc li { display: grid; grid-template-columns: 28px 1fr; }
.pp-c-v { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pp-c-amount { font-size: var(--fs-14); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the switch of an optional line: INCLUDED (solid) ↔ ADD (plain) */
.pp-c-toggle { pointer-events: none; }
.pp-c-toggle .off { display: none; }
.pp-tr input:checked ~ .pp-c-v .pp-c-toggle { background: var(--pp-solid); color: var(--pp-on-solid); }
.pp-tr.is-off .pp-c-toggle .on { display: none; }
.pp-tr.is-off .pp-c-toggle .off { display: inline; }
label.pp-tr:hover .pp-c-toggle { opacity: .85; }
.pp-tr.is-off .pp-c-name, .pp-tr.is-off .pp-c-inc { color: var(--pp-ink-3); }
.pp-tr.is-off .pp-c-amount { color: var(--pp-ink-3); text-decoration: line-through; }

/* total: a row like the others, the figure at display size */
.pp-total { align-items: end; padding-top: 24px; }
.pp-total > span:first-child { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--pp-ink-3); }
.pp-total-n { font-size: var(--fs-12); color: var(--pp-ink-3); }
.pp-total b { font-weight: 400; font-size: var(--fs-66); line-height: .85; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: right; justify-self: end; }

.pp-pay .pp-tr { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 4fr) minmax(0, 2fr); }
.pp-pay .pp-pay-h { grid-template-columns: 1fr auto; }
.pp-opts { display: flex; gap: 2px; }
#pp-sched { display: flex; flex-direction: column; gap: 2px; }
.pp-sched-r { align-items: center; height: 40px; padding-block: 0; font-variant-numeric: tabular-nums; }
.pp-sched-r > :first-child { color: var(--pp-ink-3); }
.pp-sched-r > :last-child { text-align: right; font-size: var(--fs-14); }
.pp-pay.pp-row-fill::after { content: ''; flex: 1; background: var(--pp-block); }

/* --- budget scenarios -------------------------------------------------------
   Two (or more) cards above the table, side by side. The active one takes the
   solid ink, like the active chip; its square lights. The table below and the
   payment schedule follow it. */
.pp-scn { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
.pp-scn-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  font: inherit; color: var(--pp-ink); background: var(--pp-block); border: 0; padding: var(--pad);
  min-height: 132px; cursor: pointer;
  transition: background var(--m-dur-2) var(--m-ease), color var(--m-dur-2) var(--m-ease);
}
.pp-scn-card:hover { background: var(--pp-chip); }
.pp-scn-top { display: flex; justify-content: space-between; align-items: center; }
.pp-scn-name { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .01em; }
.pp-scn-note { font-size: var(--fs-12); color: var(--pp-ink-2); max-width: 34em; }
.pp-scn-total { margin-top: auto; font-size: var(--fs-18); font-variant-numeric: tabular-nums; }
.pp-scn-card.is-on { background: var(--pp-solid); color: var(--pp-on-solid); }
.pp-scn-card.is-on .pp-lbl, .pp-scn-card.is-on .pp-scn-note { color: inherit; opacity: .7; }
.pp-scn-card.is-on .pp-sq { background: var(--pp-on-solid); }
.pp-inv[hidden] { display: none; }

/* in the scope: what the active scenario leaves out */
.pp-not { display: none; }
.pp-tags { display: flex; gap: 2px; justify-self: end; }
body[data-scn="a"] .pp-acc[data-in]:not(.is-removed):not([data-in~="a"]) .pp-acc-t,
body[data-scn="a"] .pp-acc[data-in]:not(.is-removed):not([data-in~="a"]) .pp-k { color: var(--pp-ink-3); }
body[data-scn="a"] .pp-acc[data-in]:not(.is-removed):not([data-in~="a"]) .pp-not { display: inline-block; background: var(--pp-chip); color: var(--pp-ink-3); }
body[data-scn="b"] .pp-acc[data-in]:not(.is-removed):not([data-in~="b"]) .pp-acc-t,
body[data-scn="b"] .pp-acc[data-in]:not(.is-removed):not([data-in~="b"]) .pp-k { color: var(--pp-ink-3); }
body[data-scn="b"] .pp-acc[data-in]:not(.is-removed):not([data-in~="b"]) .pp-not { display: inline-block; background: var(--pp-chip); color: var(--pp-ink-3); }
body[data-scn="c"] .pp-acc[data-in]:not(.is-removed):not([data-in~="c"]) .pp-acc-t,
body[data-scn="c"] .pp-acc[data-in]:not(.is-removed):not([data-in~="c"]) .pp-k { color: var(--pp-ink-3); }
body[data-scn="c"] .pp-acc[data-in]:not(.is-removed):not([data-in~="c"]) .pp-not { display: inline-block; background: var(--pp-chip); color: var(--pp-ink-3); }
body[data-scn="d"] .pp-acc[data-in]:not(.is-removed):not([data-in~="d"]) .pp-acc-t,
body[data-scn="d"] .pp-acc[data-in]:not(.is-removed):not([data-in~="d"]) .pp-k { color: var(--pp-ink-3); }
body[data-scn="d"] .pp-acc[data-in]:not(.is-removed):not([data-in~="d"]) .pp-not { display: inline-block; background: var(--pp-chip); color: var(--pp-ink-3); }

/* --- terms --------------------------------------------------------------- */

.pp-list { display: flex; flex-direction: column; gap: 4px; color: var(--pp-ink-2); max-width: 64em; }
.pp-list li { display: grid; grid-template-columns: 16px 1fr; }
.pp-list li::before { content: '•'; color: var(--pp-ink-3); }

/* --- next steps ---------------------------------------------------------- */

.pp-steps { display: flex; flex-direction: column; gap: 2px; }
.pp-step {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 2fr); gap: var(--pad);
  padding: var(--pad); background: var(--pp-block); align-items: start;
}
/* the three steps share what the viewport leaves, in equal parts */
.pp-steps.pp-row-fill .pp-step { flex: 1; }
.pp-step-n { font-size: var(--fs-66); line-height: .85; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pp-step h3 { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .01em; }
.pp-step p { color: var(--pp-ink-2); margin-top: 6px; max-width: 44em; }
.pp-step-a { justify-self: end; }

/* --- closing: the intro curtain's brown ---------------------------------- */

.pp-close { background: var(--pp-brown); color: var(--pp-on-brown); }
.pp-close-top { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.pp-contact { display: flex; gap: 2px; flex-wrap: wrap; }
.pp-contact > * {
  background: rgba(238, 238, 238, .12); padding: 5px 8px 4px;
  font-size: var(--fs-13); text-transform: uppercase; letter-spacing: .02em;
  transition: background var(--m-dur-1) var(--m-ease);
}
.pp-contact a:hover { background: rgba(238, 238, 238, .22); }

/* --- questionnaire ------------------------------------------------------- */

.pp-field .pp-row-l { display: flex; flex-direction: column; gap: 4px; text-transform: none; letter-spacing: 0; }
.pp-field label { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .01em; line-height: 1.3; }
.pp-req { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--pp-ink-3); }
.pp-hint { font-size: var(--fs-12); color: var(--pp-ink-2); }
.pp-field input, .pp-field textarea {
  font: inherit; font-size: var(--fs-14); line-height: 1.4; color: var(--pp-ink);
  background: var(--pp-bg); border: 0; border-radius: 0; padding: 10px; width: 100%; resize: vertical;
  transition: box-shadow var(--m-dur-1) var(--m-ease);
}
.pp-field textarea { min-height: 84px; }
.pp-field input:focus, .pp-field textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--pp-ink); }
.pp-field.is-invalid input, .pp-field.is-invalid textarea { box-shadow: inset 0 0 0 1px #d33; }
.pp-view > .pp-field:last-child { flex: 1; }
/* attachments: talk, images, links */
.pp-att { display: flex; flex-direction: column; gap: 8px; }
.pp-att-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.pp-att-tools button { cursor: pointer; border: 0; font: inherit; }
.pp-att-hint { margin-left: 8px; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--pp-ink-3); }
.pp-rec { display: inline-flex; align-items: center; gap: 6px; }
.pp-rec i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pp-rec.is-on { background: rgba(86,57,30,.9); color: #fff; }
.pp-rec.is-on i { animation: pp-rec 1.1s ease-in-out infinite; }
.pp-rec b { display: inline-flex; align-items: center; gap: 2px; height: 12px; font-weight: 400; }
.pp-rec b s { display: block; width: 2px; height: 100%; background: #fff; transform-origin: center; transform: scaleY(var(--l, .15)); transition: transform 80ms linear; }
@keyframes pp-rec { 50% { opacity: .25; } }
.pp-att-live { margin: 0; min-height: 0; font-size: var(--fs-13); color: var(--pp-ink-3); }
.pp-att-live:empty { display: none; }
.pp-att-linkin[hidden] { display: none; }
.pp-att-linkin { display: grid; grid-template-columns: 2fr 2fr auto; gap: 2px; }
.pp-att-linkin input { font: inherit; font-size: var(--fs-14); color: var(--pp-ink); background: var(--pp-bg); border: 0; padding: 5px 10px; min-width: 0; }
.pp-att-linkin input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--pp-ink); }
.pp-att-linkin button { border: 0; font: inherit; cursor: pointer; }
.pp-att-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px; }
.pp-att-list:empty { display: none; }
.pp-att-item { position: relative; margin: 0; background: var(--pp-bg); min-height: 84px; animation: pp-att-in 400ms cubic-bezier(.44,0,.56,1); }
@keyframes pp-att-in { from { opacity: 0; transform: translateY(6px); } }
.pp-att-item img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pp-att-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: 0; padding: 0; font: inherit; font-size: 12px; line-height: 20px; color: #fff; background: rgba(0,0,0,.6); cursor: pointer; opacity: 0; transition: opacity 400ms cubic-bezier(.44,0,.56,1); }
.pp-att-item:hover .pp-att-x, .pp-att-x:focus-visible { opacity: 1; }
@media (hover: none) { .pp-att-x { opacity: 1; } }
/* voice note: play + waveform + time */
.pp-att-voice { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 10px; }
.pp-att-voice > span { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--pp-ink-3); }
.pp-att-voice div { display: flex; align-items: center; gap: 8px; }
.pp-att-play { flex: none; width: 26px; height: 26px; border: 0; padding: 0; font: inherit; font-size: 10px; color: #000; background: rgba(238,238,238,.9); cursor: pointer; }
.pp-att-wave { flex: 1; display: flex; align-items: center; gap: 1px; height: 26px; }
.pp-att-wave s { flex: 1; background: var(--pp-ink-3); height: calc(var(--h) * 100%); min-height: 2px; transition: background 200ms; }
.pp-att-wave s.is-past { background: var(--pp-ink); }
.pp-att-voice time { font-size: var(--fs-12); color: var(--pp-ink-2); font-variant-numeric: tabular-nums; }
/* link card */
.pp-att-link { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 10px; color: inherit; text-decoration: none; }
.pp-att-link b { font-weight: 400; font-size: var(--fs-13); text-transform: uppercase; display: flex; gap: 6px; align-items: center; }
.pp-att-link b i { font-style: normal; width: 18px; height: 18px; display: grid; place-items: center; font-size: 11px; background: rgba(238,238,238,.9); color: #000; }
.pp-att-link span { font-size: var(--fs-12); color: var(--pp-ink-3); overflow-wrap: anywhere; }
.pp-att-link em { font-style: normal; font-size: var(--fs-13); color: var(--pp-ink-2); }
.pp-att-link:hover b { text-decoration: underline; }
.pp-field.is-drop .pp-row-r { box-shadow: inset 0 0 0 1px var(--pp-ink); }
.pp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pp-send { align-items: flex-start; }
.pp-status { min-height: 1.4em; color: var(--pp-ink-2); }
.pp-status.is-error { color: #d33; }
.pp-send button[disabled] { opacity: .5; cursor: progress; }

/* --- motion.js must not hide the index ----------------------------------- */

html .pp-side[data-site-nav][data-site-nav], html .pp-top[data-site-nav][data-site-nav] { translate: none; opacity: 1; visibility: visible; pointer-events: auto; }

/* --- desktop: one viewport per section, snapped -------------------------- */

@media (min-width: 1200px) and (min-height: 600px) {
  html:has(body.pp) { scroll-snap-type: y mandatory; }
  .pp-view { scroll-snap-align: start; }
}

/* --- below 1000px: index becomes a chip rail, sections flow -------------- */

@media (max-width: 1199.98px) {
  .pp { --side: auto; --top: 0px; }
  .pp-top::before { display: none; }
  .pp-top {
    position: sticky; top: 0; left: auto; right: auto;
    grid-template-columns: auto auto 1fr; gap: 2px;
    padding: calc(var(--g) + env(safe-area-inset-top, 0px)) var(--g) 0; background: transparent;
    backdrop-filter: blur(90px) saturate(160%);
    -webkit-backdrop-filter: blur(90px) saturate(160%);
  }
  .pp-top-tags { display: none; }
  /* the index becomes a menu behind the MENU chip; progress stays hidden */
  .pp-burger { display: inline-block; grid-column: 3; justify-self: end; }
  .pp-burger[aria-expanded="true"] { background: var(--c-near-black); color: var(--c-white); }
  .pp-side {
    position: fixed; z-index: 25; inset: 0; width: auto;
    padding: calc(38px + env(safe-area-inset-top, 0px)) var(--g) var(--g); overflow-y: auto;
    display: none; background: var(--pp-bg);
  }
  body.pp-menu-open { overflow: hidden; }
  body.pp-menu-open .pp-side { display: block; }
  body.pp-menu-open .pp-top { position: fixed; left: 0; right: 0; z-index: 30; }
  .pp-toc-scope { height: 40px; margin-top: 0; opacity: 1; visibility: visible; transition: none; }
  .pp-scope-track { display: none; }
  .pp-scope-letters a, .pp-scope-letters a.is-reached { color: var(--pp-ink); }
  .pp-foot { display: none; }
  .pp-main { margin-left: 0; padding: 0 var(--g); }
  .pp-view { min-height: 0; margin-bottom: 40px; scroll-margin-top: 44px; }
  .pp-hero, .pp-close { min-height: 78svh; }
  /* sections flow here, so the gantt rows stop growing: back to a 20px bar */
  .pp-gantt .pp-g:not(.pp-g-head):not(.pp-g-foot) { flex: none; align-items: center; }
  .pp-gantt .pp-g:not(.pp-g-head):not(.pp-g-foot) .pp-track { height: 20px; background-size: 100% 1px; background-position: 0 50%; }
  .pp-gantt .pp-g:not(.pp-g-head):not(.pp-g-foot) .pp-gb { align-items: center; padding: 0 6px; }
}
@media (max-width: 680px) {
  .pp-row, .pp-step, .pp-g { grid-template-columns: 1fr; }
  .pp-view[id^="phase-"] .pp-row-l { display: none; }
  .pp-hero-bottom { grid-template-columns: 1fr; gap: 20px; }
  .pp-meta { justify-content: start; grid-auto-flow: row; grid-template-columns: repeat(2, auto); }
  .pp-cols.is-3, .pp-cols.is-2, .pp-cases, .pp-pairs { grid-template-columns: 1fr; }
  .pp-rows-box { min-height: 0; }
  .pp-rows { position: static; overflow: visible; }
  .pp-prow { --media-height: clamp(150px, 44cqi, 260px); }
  .pp-sectors { flex-direction: row; flex-wrap: wrap; }
  .pp-cols > div { min-height: 0; }
  .pp-tr { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-c-inc { grid-column: 1 / -1; grid-row: 2; }
  .pp-c-inc.is-long { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .pp-th > :nth-child(2), .pp-total-n { display: none; }
  .pp-scn { grid-auto-flow: row; grid-template-columns: 1fr; }
  .pp-pay .pp-tr { grid-template-columns: 32px 44px 1fr auto; gap: 8px; }
  .pp-pay .pp-pay-h { grid-template-columns: 1fr auto; }
  .pp-step-a { justify-self: start; }
  .pp-g { padding-block: var(--pad); gap: 6px; }
  .pp-g-w, .pp-ticks { display: none; }
  .pp-dt > div { padding-left: var(--pad); }
}

/* --- print --------------------------------------------------------------- */

@media print {
  .pp-top, .pp-side, .pp-opts, .pp-step-a { display: none; }
  .pp-main { margin: 0; padding: 0; }
  .pp-view { min-height: 0; break-inside: avoid-page; }
  .pp-dt { height: auto !important; }
  .pp-acc:not([open]) .pp-dt { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-hero .pp-title span { animation: none; }
  .pp-hl line, .pp-hn circle, .pp-hn text, .pp-hr, .pp-dline polyline, .pp-gb, .pp-sq, .pp-case-img img, .pp-toc-scope, .pp-scope-track i::after { transition: none; }
  html:has(body.pp) { scroll-behavior: auto; }
}

/* the square always sits in the last column, with or without a version tag */
.pp-acc summary .pp-sq, .pp-sum .pp-sq { grid-column: 4; }

/* Same stable navigation glass as the portfolio. */
.pp-top .pp-chip.is-glass,.pp-top .pp-chip.is-tag {
  background: rgba(32,32,32,.85);
  backdrop-filter: blur(90px) saturate(160%) brightness(.15);
  -webkit-backdrop-filter: blur(90px) saturate(160%) brightness(.15);
  transition: color 400ms cubic-bezier(.44,0,.56,1);
}

/* A veil that fades into the page, matching the portfolio case headers. */
.pp-top { isolation: isolate; }
.pp-top::before {
  height: 128px;
  background: transparent;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 18%, rgba(0,0,0,.4) 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 18%, rgba(0,0,0,.4) 52%, transparent 100%);
}
@media (max-width:1199.98px) {
  .pp-top {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .pp-top::before {
    display: block;
    top: 0;
    left: 0;
    right: 0;
    height: calc(128px + env(safe-area-inset-top,0px));
  }
}

/* A departing desktop deck leaves no residual content under the header. */
@media (min-width: 1200px) and (min-height: 600px) {
  .pp-main > .pp-view { opacity: var(--pp-deck-opacity, 1); }
}
@media print {
  .pp-main > .pp-view { opacity: 1 !important; }
}

/* Individually addressable process and terms clauses. */
.pp-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; color: var(--pp-ink-2); }
.pp-review-list > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; scroll-margin-top: calc(var(--top) + 16px); }
.pp-review-code { color: var(--pp-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.pp-review-code:hover { text-decoration: underline; }
.pp-review-list h3 { font-size: var(--fs-12); font-weight: 400; text-transform: uppercase; color: var(--pp-ink); margin: 0 0 6px; }
.pp-review-list p { margin: 0; }
.pp-review-list > li:target { background: var(--pp-chip); }
@media (max-width: 1199.98px) {
  .pp-review-list > li { scroll-margin-top: 84px; }
}

/* Essential proposal: dates beside labels stay readable even on short bars. */
.pp-gantt-compact .pp-g-l small { display: block; margin-top: 8px; font-size: var(--fs-12); text-transform: none; color: var(--pp-ink-2); }
.pp-milestones-compact { gap: 16px; }
.pp-milestones-compact dt { color: var(--pp-ink); }
.pp-gantt-compact .pp-g:not(.pp-g-head):not(.pp-g-foot) .pp-track { height: 24px; align-self: center; }
.pp-gantt-compact .pp-g:not(.pp-g-head):not(.pp-g-foot) .pp-g-w { align-self: center; }



/* Notion-style timeline: grouped rows, a shared date axis and shaded weekends. */
.pp-plan { --plan-label: 190px; --plan-day: 8px; background: var(--pp-block); padding: var(--pad); min-width: 0; }
.pp-plan-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.pp-plan-controls > div { display: flex; gap: 4px; align-items: center; }
.pp-plan button, .pp-plan select { border: 0; padding: 7px 9px; font: inherit; color: var(--pp-ink); background: var(--pp-chip); cursor: pointer; }
.pp-plan button:focus-visible, .pp-plan select:focus-visible, .pp-plan-scroll:focus-visible { outline: 2px solid var(--pp-ink); outline-offset: 2px; }
.pp-plan-scroll { overflow-x: auto; }
.pp-plan-canvas { position: relative; width: calc(var(--plan-label) + var(--days) * var(--plan-day)); min-width: 100%; }
.pp-plan-columns { position: absolute; inset: 0 0 0 var(--plan-label); display: grid; grid-template-columns: repeat(var(--days), var(--plan-day)); pointer-events: none; }
.pp-plan-columns i { border: 0; }
.pp-plan-columns .is-weekend { background: #ffffff08; }
.pp-plan-row { position: relative; display: grid; grid-template-columns: var(--plan-label) calc(var(--days) * var(--plan-day)); min-height: 35px; }
.pp-plan-label { display: flex; align-items: center; position: sticky; left: 0; z-index: 2; padding: 3px 8px; background: #1b1b1b; border-right: 1px solid #ffffff30; box-shadow: 8px 0 12px -8px #000; font-size: var(--fs-12); line-height: 1.2; color: var(--pp-ink-2); }
.pp-plan-label small { display: block; font-size: 10px; line-height: 1.2; margin-top: 2px; color: var(--pp-ink-3); }
.pp-plan-dates { min-height: 52px; }
.pp-plan-dates .pp-plan-label { background: #252525; color: var(--pp-ink); padding-top: 10px; }
.pp-plan-date-track { display: grid; grid-template-columns: repeat(var(--days), var(--plan-day)); }
.pp-plan-date-track time { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; padding-top: 5px; color: var(--pp-ink-2); }
.pp-plan-date-track small { font-size: 9px; color: var(--pp-ink-3); }
.pp-plan-date-track b { font-weight: 400; }
.pp-plan[data-view="quarter"] .pp-plan-date-track time:not(.is-tick) { visibility: hidden; }
.pp-plan[data-view="quarter"] .pp-plan-date-track small { display: none; }
.pp-plan[data-view="quarter"] .pp-plan-date-track time { font-size: 9px; }
.pp-plan-group > summary { cursor: pointer; list-style: none; min-height: 30px; }
.pp-plan-group > summary::-webkit-details-marker { display: none; }
.pp-plan-group-name { padding-block: 7px; color: var(--phase); font-size: var(--fs-12); }
.pp-plan-group-name::before { content: '▾'; margin-right: 7px; }
.pp-plan-group:not([open]) .pp-plan-group-name::before { content: '▸'; }
.pp-plan-list { list-style: none; padding: 0; margin: 0; }
.pp-plan-list .pp-plan-label { padding-left: 20px; }
.pp-plan-track { position: relative; }
.pp-plan-bar, .pp-plan-range { position: absolute; left: calc(var(--at) * var(--plan-day)); width: calc(var(--length) * var(--plan-day)); background: var(--phase); border-radius: 3px; }
.pp-plan-bar { top: 12px; height: 16px; opacity: .8; }
.pp-plan-range { top: 12px; height: 4px; opacity: .45; }
.pp-plan-milestone { position: absolute; left: calc((var(--at) + .5) * var(--plan-day) - 6px); top: 12px; color: var(--phase); font-size: 12px; }
.pp-plan-key { color: var(--pp-ink-3); font-size: 10px; margin: 12px 0 0; }
@media(max-width:650px) { .pp-plan { --plan-label: 150px; } .pp-plan-controls > div { flex-wrap: wrap; } }

.pp-plan-axis { display: flex; flex-direction: column; }
.pp-plan-months { display: grid; grid-template-columns: repeat(var(--days), var(--plan-day)); height: 26px; }
.pp-plan-months > span { padding-top: 5px; min-width: 0; }
.pp-plan-months b { position: sticky; left: var(--plan-label); padding-left: 4px; font-size: var(--fs-12); font-weight: 400; color: var(--pp-ink); }
.pp-plan-date-track time { padding-top: 3px; height: 26px; }
.pp-plan-date-track time span { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; }
.pp-plan[data-view="quarter"] .pp-plan-date-track time.is-today { visibility: visible; }
.pp-plan-date-track time.is-today span { background: #ff766a; color: #111; border-radius: 50%; font-weight: 600; position: relative; z-index: 1; }
.pp-plan-columns i.is-today { background: #ff766a12; }

.pp-plan-dates { border-bottom: 1px solid var(--pp-line); }
.pp-plan-group { border-bottom: 1px solid var(--pp-line); }

/* A–D share a single compact scope view; open details grow in normal flow. */
.pp-phase-stack { gap: 2px; }
.pp-phase { display: flex; flex-direction: column; flex: 1; scroll-margin-top: var(--top); }
.pp-phase > .pp-bar { display: none; }
.pp-phase > .pp-row { background: none; padding: 0; gap: 2px; grid-template-columns: 110px minmax(0, 1fr); }
.pp-phase .pp-row-l { display: flex; flex-direction: column; gap: 14px; justify-content: flex-start; background: var(--pp-block); padding: 16px var(--pad); }
.pp-phase .pp-phase-big { font-size: 72px; line-height: .85; }
.pp-phase .pp-accs { background: var(--pp-block); }
@media (max-width: 1199.98px) {
  .pp-phase { flex: none; }
  .pp-phase > .pp-row { min-height: 122px; }
}
@media (max-width: 680px) {
  .pp-phase > .pp-row { grid-template-columns: 76px minmax(0, 1fr); }
  .pp-phase .pp-row-l { padding: 12px 8px; gap: 12px; }
  .pp-phase .pp-phase-big { font-size: 54px; }
  .pp-phase .pp-phase-meta { font-size: 10px; }
}