/*
 * The Quiet Protocol casebook (/proof and /proof/[slug]).
 * World: a set of record drawings. Every case is drawn twice, as found
 * (redline) and as built (blueline). Provenance is carried by line form.
 * Scoped under .pf so nothing leaks into shared site chrome.
 */

@font-face {
    font-family: "PF Archivo";
    src: url("/fonts/proof/archivo-var-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PF Source Serif";
    src: url("/fonts/proof/source-serif-4-var-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PF Source Serif";
    src: url("/fonts/proof/source-serif-4-var-italic-latin.woff2") format("woff2");
    font-weight: 400 600;
    font-style: italic;
    font-display: swap;
}

.pf {
    --pf-film: #e4e6e0;
    --pf-film-deep: #d6d9d1;
    --pf-sheet: #f2f3ef;
    --pf-carbon: #121314;
    --pf-carbon-2: #1b1d1e;
    --pf-carbon-3: #26292a;
    --pf-ink: #121314;
    --pf-ink-2: #373c3f;
    --pf-ink-3: #555b5e;
    --pf-rule: rgba(18, 19, 20, 0.16);
    --pf-rule-strong: rgba(18, 19, 20, 0.42);
    --pf-red: #a82c17;
    --pf-blue: #1c47c0;
    --pf-gold: #8a6a2f;
    --pf-on-dark: #eceee9;
    --pf-on-dark-2: #b3b8b4;
    --pf-on-dark-3: #8f9591;
    --pf-rule-dark: rgba(236, 238, 233, 0.16);
    --pf-red-dark: #ff7d61;
    --pf-blue-dark: #8aa8ff;
    --pf-gold-dark: #d9b874;
    --pf-display: "PF Archivo", var(--font-sans), system-ui, sans-serif;
    --pf-read: "PF Source Serif", "Iowan Old Style", Georgia, serif;
    --pf-gutter: clamp(1.25rem, 4.2vw, 3.75rem);
    --pf-ease: cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;
    overflow-x: clip;
    background: var(--pf-film);
    color: var(--pf-ink);
    font-family: var(--pf-read);
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
}

.pf ::selection { background: rgba(28, 71, 192, 0.22); color: inherit; }
.pf .pf-dark ::selection, .pf-dark ::selection { background: rgba(138, 168, 255, 0.3); }

.pf a:focus-visible, .pf button:focus-visible, .pf summary:focus-visible, .pf input:focus-visible {
    outline: 2px solid var(--pf-blue);
    outline-offset: 3px;
}
.pf .pf-dark a:focus-visible, .pf .pf-dark button:focus-visible, .pf .pf-dark summary:focus-visible, .pf .pf-dark input:focus-visible {
    outline-color: var(--pf-blue-dark);
}

/* ------------------------------------------------------------------ grounds */

.pf-section { position: relative; padding: clamp(4.5rem, 10vw, 9.5rem) var(--pf-gutter); }
.pf-section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.pf-wrap { max-width: 86rem; margin-inline: auto; }
.pf-wrap--read { max-width: 72rem; margin-inline: auto; }

.pf-film { background: var(--pf-film); color: var(--pf-ink); }
.pf-film-deep { background: var(--pf-film-deep); color: var(--pf-ink); }
.pf-dark { background: var(--pf-carbon); color: var(--pf-on-dark); }
.pf-dark-2 { background: var(--pf-carbon-2); color: var(--pf-on-dark); }

.pf-grid-paper {
    background-image:
        linear-gradient(rgba(18, 19, 20, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 19, 20, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: -1px -1px;
}
.pf-dark.pf-grid-paper, .pf-dark .pf-grid-paper {
    background-image:
        linear-gradient(rgba(236, 238, 233, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 238, 233, 0.045) 1px, transparent 1px);
}

/* ------------------------------------------------------------------ type */

.pf-display, .pf-h1, .pf-h2, .pf-h3, .pf-h4, .pf-label, .pf-num, .pf-btn, .pf-cell dt {
    font-family: var(--pf-display);
}

.pf-h1 {
    font-size: clamp(3rem, 7.4vw, 6rem);
    font-stretch: 112%;
    font-weight: 780;
    line-height: 0.9;
    letter-spacing: -0.038em;
    text-wrap: balance;
}
.pf-h2 {
    font-size: clamp(2.2rem, 4.9vw, 4.4rem);
    font-stretch: 108%;
    font-weight: 740;
    line-height: 0.94;
    letter-spacing: -0.032em;
    text-wrap: balance;
}
.pf-h3 {
    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
    font-stretch: 102%;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.pf-h4 {
    font-size: 1.12rem;
    font-stretch: 96%;
    font-weight: 680;
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.pf-label {
    font-size: 0.74rem;
    font-stretch: 78%;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--pf-ink-3);
}
.pf-dark .pf-label, .pf-dark-2 .pf-label { color: var(--pf-on-dark-3); }
.pf-num {
    font-stretch: 92%;
    font-weight: 720;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.03em;
}

.pf-lede {
    font-family: var(--pf-read);
    font-size: clamp(1.28rem, 1.9vw, 1.62rem);
    line-height: 1.42;
    color: var(--pf-ink-2);
    max-width: 38ch;
    text-wrap: pretty;
}
.pf-dark .pf-lede, .pf-dark-2 .pf-lede { color: var(--pf-on-dark-2); }

.pf-read {
    font-size: clamp(1.08rem, 1.3vw, 1.2rem);
    line-height: 1.66;
    color: var(--pf-ink-2);
    max-width: 64ch;
    text-wrap: pretty;
}
.pf-read + .pf-read { margin-top: 1.1em; }
.pf-dark .pf-read, .pf-dark-2 .pf-read { color: var(--pf-on-dark-2); }
.pf-small { font-size: 0.95rem; line-height: 1.6; color: var(--pf-ink-3); }
.pf-dark .pf-small, .pf-dark-2 .pf-small { color: var(--pf-on-dark-3); }
.pf-sans { font-family: var(--pf-display); font-stretch: 96%; }

.pf-red { color: var(--pf-red); }
.pf-blue { color: var(--pf-blue); }
.pf-dark .pf-red, .pf-dark-2 .pf-red { color: var(--pf-red-dark); }
.pf-dark .pf-blue, .pf-dark-2 .pf-blue { color: var(--pf-blue-dark); }

.pf a.pf-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: currentColor;
    transition: color 0.2s ease;
}
.pf a.pf-link:hover { color: var(--pf-blue); }
.pf-dark a.pf-link:hover, .pf-dark-2 a.pf-link:hover { color: var(--pf-blue-dark); }

/* ------------------------------------------------------------------ controls */

.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 3.35rem;
    padding: 0 1.45rem;
    border: 1px solid var(--pf-ink);
    background: var(--pf-ink);
    color: var(--pf-sheet);
    font-size: 0.98rem;
    font-stretch: 100%;
    font-weight: 620;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.pf-btn:hover { background: var(--pf-blue); border-color: var(--pf-blue); color: #fff; }
.pf-btn svg { transition: transform 0.35s var(--pf-ease); }
.pf-btn:hover svg { transform: translateX(3px); }
.pf .pf-btn--ghost, .pf .pf-btn--ghost:where(button) {
    background: transparent !important;
    color: var(--pf-ink) !important;
    border: 1px solid var(--pf-rule-strong) !important;
}
.pf .pf-btn--ghost:hover { border-color: var(--pf-ink) !important; background: rgba(18, 19, 20, 0.05) !important; }
.pf-dark .pf-btn, .pf-dark-2 .pf-btn { background: var(--pf-on-dark); border-color: var(--pf-on-dark); color: var(--pf-ink); }
.pf-dark .pf-btn:hover, .pf-dark-2 .pf-btn:hover { background: var(--pf-gold-dark); border-color: var(--pf-gold-dark); color: var(--pf-ink); }
.pf .pf-dark .pf-btn--ghost, .pf .pf-dark-2 .pf-btn--ghost {
    background: transparent !important;
    color: var(--pf-on-dark) !important;
    border-color: rgba(236, 238, 233, 0.34) !important;
}
.pf .pf-dark .pf-btn--ghost:hover { border-color: var(--pf-on-dark) !important; background: rgba(236, 238, 233, 0.06) !important; }

/* ------------------------------------------------------------------ provenance marks */

.pf-mark { flex: none; fill: none; stroke: currentColor; stroke-width: 2; overflow: visible; }
.pf-mark rect { fill: none; }
.pf-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--pf-display);
    font-size: 0.74rem;
    font-stretch: 78%;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--pf-ink-2);
}
.pf-dark .pf-tag, .pf-dark-2 .pf-tag { color: var(--pf-on-dark-2); }
.pf-tag--measured .pf-mark, .pf-tag--inspectable .pf-mark { color: var(--pf-blue); }
.pf-tag--representative .pf-mark, .pf-tag--modeled .pf-mark, .pf-tag--described .pf-mark { color: var(--pf-ink-2); }
.pf-tag--client-words .pf-mark { color: var(--pf-gold); }
.pf-dark .pf-tag--measured .pf-mark, .pf-dark .pf-tag--inspectable .pf-mark { color: var(--pf-blue-dark); }
.pf-dark .pf-tag--representative .pf-mark, .pf-dark .pf-tag--modeled .pf-mark, .pf-dark .pf-tag--described .pf-mark { color: var(--pf-on-dark-2); }
.pf-dark .pf-tag--client-words .pf-mark { color: var(--pf-gold-dark); }

/* ------------------------------------------------------------------ title blocks */

.pf-cells {
    display: grid;
    grid-template-columns: repeat(var(--pf-cells, 4), minmax(0, 1fr));
    border-top: 1px solid var(--pf-rule-strong);
    margin: 0;
}
.pf-cell {
    padding: 0.8rem 1rem 0.9rem 0;
    border-bottom: 1px solid var(--pf-rule);
    min-width: 0;
}
.pf-cell + .pf-cell { padding-left: 1rem; border-left: 1px solid var(--pf-rule); }
.pf-cell dt { font-size: 0.7rem; font-stretch: 78%; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--pf-ink-3); }
.pf-cell dd { margin: 0.35rem 0 0; font-family: var(--pf-display); font-stretch: 96%; font-size: 0.98rem; line-height: 1.35; color: var(--pf-ink); }
.pf-dark .pf-cells, .pf-dark-2 .pf-cells { border-top-color: rgba(236, 238, 233, 0.4); }
.pf-dark .pf-cell, .pf-dark-2 .pf-cell { border-color: var(--pf-rule-dark); }
.pf-dark .pf-cell dt, .pf-dark-2 .pf-cell dt { color: var(--pf-on-dark-3); }
.pf-dark .pf-cell dd, .pf-dark-2 .pf-cell dd { color: var(--pf-on-dark); }

@media (max-width: 760px) {
    .pf-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-cell:nth-child(odd) { padding-left: 0; border-left: 0; }
    .pf-cell:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--pf-rule); }
    .pf-dark .pf-cell:nth-child(even) { border-left-color: var(--pf-rule-dark); }
}

/* ------------------------------------------------------------------ delta */

.pf-delta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.55em; font-family: var(--pf-display); }
.pf-delta__from {
    color: var(--pf-red);
    text-decoration: line-through;
    text-decoration-thickness: 0.06em;
    text-decoration-color: var(--pf-red);
    font-weight: 500;
}
.pf-delta__to { color: var(--pf-blue); font-weight: 760; }
.pf-delta__arrow { color: var(--pf-ink-3); font-weight: 300; font-stretch: 70%; }
.pf-dark .pf-delta__from, .pf-dark-2 .pf-delta__from { color: var(--pf-red-dark); text-decoration-color: var(--pf-red-dark); }
.pf-dark .pf-delta__to, .pf-dark-2 .pf-delta__to { color: var(--pf-blue-dark); }
.pf-dark .pf-delta__arrow, .pf-dark-2 .pf-delta__arrow { color: var(--pf-on-dark-3); }

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

.pf-hero {
    position: relative;
    padding: clamp(3rem, 7vw, 6.5rem) var(--pf-gutter) clamp(4rem, 8vw, 7rem);
    min-height: min(58rem, calc(100svh - 6rem));
    display: flex;
    align-items: center;
}
.pf-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: center;
    width: 100%;
}
.pf-hero__deck { margin-top: 2rem; }
.pf-hero__actions { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pf-hero__count { margin-top: 3rem; max-width: 34rem; }

.pf-stack { position: relative; aspect-ratio: 1 / 1.02; width: 100%; max-width: 44rem; margin-left: auto; }
.pf-stack__plate, .pf-stack__sheet {
    position: absolute;
    background: var(--pf-sheet);
    border: 1px solid rgba(18, 19, 20, 0.14);
    box-shadow: 0 2px 3px rgba(18, 19, 20, 0.05), 0 28px 60px -30px rgba(18, 19, 20, 0.45);
}
.pf-stack__plate {
    inset: 0 18% 38% 0;
    padding: 0.7rem 0.7rem 2.4rem;
    transform: rotate(-4.5deg);
    background: #fbfbf8;
}
.pf-stack__plate img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.82) contrast(1.02); }
.pf-stack__plate figcaption { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.75rem; }
.pf-stack__sheet--back { inset: 30% 0 16% 22%; transform: rotate(3deg); }
.pf-stack__sheet--front { inset: 44% 6% 0 4%; transform: rotate(-1deg); }
.pf-sheet-body { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(0.9rem, 1.6vw, 1.35rem); }
.pf-sheet-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-bottom: 0.65rem; border-bottom: 1px solid var(--pf-rule); }
.pf-sheet-foot { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding-top: 0.65rem; border-top: 1px solid var(--pf-rule); }
.pf-sheet-figure { display: flex; flex-direction: column; justify-content: center; min-height: 0; gap: 0.5rem; }
.pf-sheet-big { font-size: clamp(1.9rem, 3.7vw, 3.35rem); line-height: 0.92; }
.pf-sheet-big .pf-delta__arrow { font-size: 0.7em; }

@media (max-width: 1023px) {
    .pf-hero { min-height: 0; }
    .pf-hero__grid { grid-template-columns: 1fr; }
    .pf-stack { max-width: 40rem; margin: 0 auto; }
}
@media (max-width: 640px) {
    .pf-stack { aspect-ratio: 1 / 1.05; }
    .pf-stack__plate { inset: 0 8% 44% 0; }
    .pf-stack__sheet--back { display: none; }
    .pf-stack__sheet--front { inset: 40% 0 0 3%; }
    .pf-sheet-big { font-size: clamp(1.9rem, 9vw, 2.6rem); }
}

/* ------------------------------------------------------------------ legend */

.pf-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--pf-rule-strong); }
.pf-legend__item { padding: 1.1rem 1.1rem 1.25rem 0; }
.pf-legend__item + .pf-legend__item { padding-left: 1.1rem; border-left: 1px solid var(--pf-rule); }
.pf-legend__item p { margin-top: 0.55rem; font-size: 0.92rem; line-height: 1.45; color: var(--pf-ink-3); }
@media (max-width: 1100px) {
    .pf-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pf-legend__item:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
    .pf-legend__item { border-bottom: 1px solid var(--pf-rule); }
}
@media (max-width: 640px) {
    .pf-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-legend__item:nth-child(3n + 1) { padding-left: 1.1rem; border-left: 1px solid var(--pf-rule); }
    .pf-legend__item:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ------------------------------------------------------------------ chapter heads */

.pf-chapter-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.pf-chapter-head .pf-read { max-width: 46ch; }
@media (max-width: 900px) { .pf-chapter-head { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ verified register */

.pf-feature {
    margin-top: clamp(3rem, 6vw, 5rem);
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    border-top: 1px solid rgba(236, 238, 233, 0.4);
    border-bottom: 1px solid var(--pf-rule-dark);
}
.pf-feature__main { padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.75rem) 0; border-right: 1px solid var(--pf-rule-dark); }
.pf-feature__side { padding: clamp(1.5rem, 3vw, 2.75rem) 0 clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 3rem); display: flex; flex-direction: column; gap: 1.25rem; }
.pf-feature__big { margin-top: 1.6rem; font-size: clamp(2.7rem, 5.8vw, 5.4rem); line-height: 0.9; }
.pf-feature__big .pf-delta__arrow { font-size: 0.5em; }
.pf-feature__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pf-carbon-3); }
.pf-feature__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
    .pf-feature { grid-template-columns: 1fr; }
    .pf-feature__main { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--pf-rule-dark); }
    .pf-feature__side { padding-left: 0; }
}

.pf-index { margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid rgba(236, 238, 233, 0.4); }
.pf-index__head, .pf-record > summary {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.25fr) 2.25rem;
    gap: 1.5rem;
    align-items: center;
}
.pf-index__head { padding: 0.8rem 0; border-bottom: 1px solid var(--pf-rule-dark); }
.pf-record { border-bottom: 1px solid var(--pf-rule-dark); scroll-margin-top: 8rem; }
.pf-record > summary { list-style: none; cursor: pointer; padding: 1.5rem 0; transition: background-color 0.25s ease; }
.pf-record > summary::-webkit-details-marker { display: none; }
.pf-record > summary:hover { background: rgba(236, 238, 233, 0.03); }
.pf-record__no { font-size: 1.6rem; color: var(--pf-on-dark-3); }
.pf-record__trade { font-size: 1.28rem; line-height: 1.12; color: var(--pf-on-dark); }
.pf-record__found { font-size: 1rem; line-height: 1.45; color: var(--pf-on-dark-2); }
.pf-record__found::before { content: ""; display: inline-block; width: 1.4rem; height: 2px; background: var(--pf-red-dark); vertical-align: 0.3em; margin-right: 0.6rem; }
.pf-record__change { display: grid; gap: 0.4rem; }
.pf-record__metric { font-size: 1.35rem; line-height: 1; }
.pf-record__toggle { justify-self: end; width: 2.25rem; height: 2.25rem; border: 1px solid var(--pf-rule-dark); display: grid; place-items: center; color: var(--pf-on-dark-2); transition: transform 0.4s var(--pf-ease), border-color 0.2s ease; }
.pf-record[open] .pf-record__toggle { transform: rotate(45deg); border-color: var(--pf-on-dark-2); }
.pf-record__body { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; padding: 0.25rem 0 2.5rem; }
.pf-record__body > :first-child { grid-column: 2 / span 1; }
.pf-record__photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--pf-carbon-3); margin-bottom: 0.9rem; }
.pf-record__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.2); }
.pf-list { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.pf-list li { position: relative; padding-left: 1.6rem; font-size: 1rem; line-height: 1.5; color: var(--pf-on-dark-2); }
.pf-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 1rem; height: 2px; background: currentColor; }
.pf-list--found li::before { background: var(--pf-red-dark); }
.pf-list--built li::before { background: var(--pf-blue-dark); }
.pf-film .pf-list li, .pf-film-deep .pf-list li { color: var(--pf-ink-2); }
.pf-film .pf-list--found li::before, .pf-film-deep .pf-list--found li::before { background: var(--pf-red); }
.pf-film .pf-list--built li::before, .pf-film-deep .pf-list--built li::before { background: var(--pf-blue); }
.pf-outcomes { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.pf-outcomes li { display: grid; gap: 0.35rem; font-size: 1rem; line-height: 1.45; color: var(--pf-on-dark); }

@media (max-width: 1023px) {
    .pf-index__head { display: none; }
    .pf-record > summary { grid-template-columns: 3rem minmax(0, 1fr) 2.25rem; grid-template-areas: "no trade toggle" "no change change" "no found found"; gap: 0.7rem 1rem; align-items: start; }
    .pf-record__no { grid-area: no; font-size: 1.25rem; }
    .pf-record__trade { grid-area: trade; }
    .pf-record__found { grid-area: found; font-size: 0.95rem; }
    .pf-record__change { grid-area: change; }
    .pf-record__toggle { grid-area: toggle; }
    .pf-record__body { grid-template-columns: 1fr; padding-left: 4rem; }
    .pf-record__body > :first-child { grid-column: auto; }
}
@media (max-width: 520px) {
    .pf-record__body { padding-left: 0; }
}

/* ------------------------------------------------------------------ case volumes */

.pf-volumes { margin-top: clamp(3.5rem, 7vw, 6rem); display: grid; gap: clamp(4.5rem, 9vw, 8.5rem); }
.pf-volume { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); align-items: end; }
.pf-volume__media { position: relative; overflow: hidden; background: var(--pf-carbon-2); }
.pf-volume__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--pf-ease); }
.pf-volume:hover .pf-volume__media img { transform: scale(1.025); }
.pf-volume__media figcaption { position: absolute; left: 0.9rem; bottom: 0.75rem; color: rgba(255, 255, 255, 0.82); font-family: var(--pf-display); font-size: 0.68rem; font-stretch: 78%; letter-spacing: 0.07em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
.pf-volume__text { display: grid; gap: 1.15rem; align-content: end; }
.pf-volume__title a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.6s var(--pf-ease); }
.pf-volume:hover .pf-volume__title a, .pf-volume__title a:focus-visible { background-size: 100% 2px; }
.pf-volume__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--pf-rule-strong); }
.pf-volume__pair > div { padding: 0.8rem 1rem 0.8rem 0; }
.pf-volume__pair > div + div { padding-left: 1rem; border-left: 1px solid var(--pf-rule); }
.pf-volume__pair p { margin-top: 0.3rem; font-family: var(--pf-display); font-stretch: 96%; font-size: 1.02rem; line-height: 1.3; }
.pf-volume__rate { font-size: clamp(2.4rem, 4.8vw, 4.2rem); line-height: 0.9; }
.pf-volume__rate .pf-delta__arrow { font-size: 0.55em; }
.pf-volume__go { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--pf-display); font-stretch: 96%; font-weight: 640; font-size: 1rem; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.2rem; width: max-content; }
.pf-volume__go svg { transition: transform 0.35s var(--pf-ease); }
.pf-volume__go:hover svg { transform: translateX(4px); }

.pf-volume--feature .pf-volume__media { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.pf-volume--feature .pf-volume__text { grid-column: 1 / span 7; }
.pf-volume--feature .pf-volume__aside { grid-column: 8 / -1; display: grid; gap: 1rem; align-content: end; }
.pf-volume--left .pf-volume__media { grid-column: 1 / span 7; aspect-ratio: 4 / 3; }
.pf-volume--left .pf-volume__text { grid-column: 8 / -1; }
.pf-volume--right .pf-volume__media { grid-column: 6 / -1; grid-row: 1; aspect-ratio: 16 / 10; }
.pf-volume--right .pf-volume__text { grid-column: 1 / span 5; grid-row: 1; }
.pf-volume--quote { background: var(--pf-carbon); color: var(--pf-on-dark); padding: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pf-volume--quote .pf-volume__text { grid-column: 1 / span 7; }
.pf-volume--quote .pf-volume__media { grid-column: 9 / -1; aspect-ratio: 3 / 4; }
.pf-volume__quote { font-family: var(--pf-read); font-style: italic; font-weight: 420; font-size: clamp(1.9rem, 3.9vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.pf-volume--quote .pf-volume__pair { border-top-color: rgba(236, 238, 233, 0.4); }
.pf-volume--quote .pf-volume__pair > div + div { border-left-color: var(--pf-rule-dark); }
.pf-volume--field .pf-volume__text { grid-column: 1 / span 5; }
.pf-volume--field .pf-volume__figure { grid-column: 6 / span 4; }
.pf-volume--field .pf-volume__media { grid-column: 10 / -1; aspect-ratio: 3 / 4; }

@media (max-width: 900px) {
    .pf-volume { grid-template-columns: 1fr; align-items: start; }
    .pf-volume > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .pf-volume--feature .pf-volume__media { aspect-ratio: 4 / 3; }
    .pf-volume--right .pf-volume__media { order: -1; }
    .pf-volume--quote .pf-volume__media { aspect-ratio: 16 / 10; order: 2; }
    .pf-volume--field .pf-volume__media { aspect-ratio: 16 / 9; order: -1; }
}

/* ------------------------------------------------------------------ figures and charts */

.pf-figure { margin: 0; }
.pf-figure figcaption { margin-top: 0.9rem; font-size: 0.93rem; line-height: 1.5; color: var(--pf-ink-3); max-width: 60ch; }
.pf-dark .pf-figure figcaption, .pf-dark-2 .pf-figure figcaption { color: var(--pf-on-dark-3); }
.pf-chart { display: block; width: 100%; height: auto; overflow: visible; }
.pf-chart text { font-family: var(--pf-display); font-stretch: 86%; fill: var(--pf-ink-3); }
.pf-dark .pf-chart text, .pf-dark-2 .pf-chart text { fill: var(--pf-on-dark-3); }
.pf-chart .t-strong { fill: var(--pf-ink); font-weight: 650; }
.pf-dark .pf-chart .t-strong, .pf-dark-2 .pf-chart .t-strong { fill: var(--pf-on-dark); }
.pf-chart .t-found { fill: var(--pf-red); font-weight: 650; }
.pf-chart .t-built { fill: var(--pf-blue); font-weight: 700; }
.pf-dark .pf-chart .t-found, .pf-dark-2 .pf-chart .t-found { fill: var(--pf-red-dark); }
.pf-dark .pf-chart .t-built, .pf-dark-2 .pf-chart .t-built { fill: var(--pf-blue-dark); }
.pf-chart .g-rule { stroke: var(--pf-rule); stroke-width: 1; }
.pf-chart .g-rule-strong { stroke: var(--pf-rule-strong); stroke-width: 1; }
.pf-dark .pf-chart .g-rule, .pf-dark-2 .pf-chart .g-rule { stroke: var(--pf-rule-dark); }
.pf-dark .pf-chart .g-rule-strong, .pf-dark-2 .pf-chart .g-rule-strong { stroke: rgba(236, 238, 233, 0.4); }
.pf-chart .s-found { stroke: var(--pf-red); fill: none; }
.pf-chart .s-built { stroke: var(--pf-blue); fill: none; }
.pf-chart .s-ink { stroke: var(--pf-ink); fill: none; }
.pf-chart .f-found { fill: var(--pf-red); }
.pf-chart .f-built { fill: var(--pf-blue); }
.pf-chart .f-built-soft { fill: rgba(28, 71, 192, 0.14); }
.pf-chart .f-found-soft { fill: rgba(181, 49, 27, 0.1); }
.pf-chart .f-sheet { fill: var(--pf-sheet); }
.pf-chart .f-ink { fill: var(--pf-ink); }
.pf-dark .pf-chart .s-found, .pf-dark-2 .pf-chart .s-found { stroke: var(--pf-red-dark); }
.pf-dark .pf-chart .s-built, .pf-dark-2 .pf-chart .s-built { stroke: var(--pf-blue-dark); }
.pf-dark .pf-chart .s-ink, .pf-dark-2 .pf-chart .s-ink { stroke: var(--pf-on-dark); }
.pf-dark .pf-chart .f-found, .pf-dark-2 .pf-chart .f-found { fill: var(--pf-red-dark); }
.pf-dark .pf-chart .f-built, .pf-dark-2 .pf-chart .f-built { fill: var(--pf-blue-dark); }
.pf-dark .pf-chart .f-built-soft, .pf-dark-2 .pf-chart .f-built-soft { fill: rgba(138, 168, 255, 0.16); }
.pf-dark .pf-chart .f-found-soft, .pf-dark-2 .pf-chart .f-found-soft { fill: rgba(255, 125, 97, 0.12); }
.pf-dark .pf-chart .f-sheet, .pf-dark-2 .pf-chart .f-sheet { fill: var(--pf-carbon-2); }
.pf-dark .pf-chart .f-ink, .pf-dark-2 .pf-chart .f-ink { fill: var(--pf-on-dark); }

.pf-only-narrow { display: none; }
@media (max-width: 700px) {
    .pf-only-wide { display: none; }
    .pf-only-narrow { display: block; }
}

/* Stage ledger (a table, always) */
.pf-ledger { width: 100%; border-collapse: collapse; font-family: var(--pf-display); font-stretch: 94%; }
.pf-ledger caption { caption-side: bottom; text-align: left; padding-top: 0.9rem; font-family: var(--pf-read); font-stretch: 100%; font-size: 0.93rem; line-height: 1.5; color: var(--pf-ink-3); }
.pf-ledger th, .pf-ledger td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--pf-rule); vertical-align: top; }
.pf-ledger thead th { border-bottom: 1px solid var(--pf-rule-strong); font-size: 0.72rem; font-stretch: 78%; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--pf-ink-3); }
.pf-ledger thead th span { display: block; margin-top: 0.2rem; text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 450; }
.pf-ledger tbody th { font-weight: 560; font-size: 1rem; color: var(--pf-ink); width: 30%; }
.pf-ledger td { width: calc(70% / var(--pf-cols, 3)); }
.pf-ledger__count { font-size: 1.35rem; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--pf-ink); }
.pf-ledger__bar { position: relative; display: block; height: 6px; margin: 0.45rem 0 0.35rem; background: rgba(18, 19, 20, 0.08); }
.pf-ledger__bar i { position: absolute; inset: 0 auto 0 0; background: var(--pf-blue); transform-origin: left; }
.pf-ledger td.is-found .pf-ledger__bar i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pf-red); }
.pf-ledger__rate { font-size: 0.82rem; color: var(--pf-ink-3); font-variant-numeric: tabular-nums; }
.pf-ledger td.is-friction .pf-ledger__rate { color: var(--pf-red); font-weight: 650; }
.pf-ledger td.is-friction.is-built .pf-ledger__rate { color: var(--pf-blue); }
.pf-ledger tfoot th, .pf-ledger tfoot td { border-bottom: 0; border-top: 1px solid var(--pf-rule-strong); padding-top: 1rem; }
.pf-ledger tfoot td { font-size: 1.8rem; font-weight: 740; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pf-ledger tfoot td.is-found { color: var(--pf-red); }
.pf-ledger tfoot td.is-built { color: var(--pf-blue); }
.pf-ledger tfoot th { font-size: 0.72rem; font-stretch: 78%; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--pf-ink-3); }
@media (max-width: 700px) {
    .pf-ledger, .pf-ledger tbody, .pf-ledger tfoot { display: block; }
    .pf-ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .pf-ledger tr { display: grid; grid-template-columns: repeat(var(--pf-cols, 3), minmax(0, 1fr)); column-gap: 0.8rem; border-bottom: 1px solid var(--pf-rule); padding: 0.75rem 0; }
    .pf-ledger tbody th, .pf-ledger tfoot th { grid-column: 1 / -1; width: auto; border: 0; padding: 0 0 0.35rem; }
    .pf-ledger td { width: auto; border: 0; padding: 0; }
    .pf-ledger td::before { content: attr(data-horizon); display: block; font-size: 0.66rem; font-stretch: 78%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pf-ink-3); margin-bottom: 0.15rem; }
    .pf-ledger__count { font-size: 1.1rem; }
    .pf-ledger tfoot tr { border-bottom: 0; border-top: 1px solid var(--pf-rule-strong); }
    .pf-ledger tfoot td { font-size: 1.35rem; }
    .pf-ledger caption { display: block; }
}

/* ------------------------------------------------------------------ as found / as built */

.pf-compare { display: grid; gap: 1.1rem; }
.pf-compare__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem 1.5rem; }
.pf-compare__switch { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--pf-rule-strong); }
.pf-compare__switch button {
    display: inline-flex; align-items: center; gap: 0.55rem;
    min-height: 2.9rem; padding: 0 1.1rem;
    font-family: var(--pf-display); font-stretch: 86%; font-weight: 620; font-size: 0.86rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--pf-ink-2); background: transparent; border: 0; cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.pf-compare__switch button + button { border-left: 1px solid var(--pf-rule-strong); }
.pf-compare__switch button[aria-pressed="true"][data-side="found"] { background: var(--pf-red); color: #fff; }
.pf-compare__switch button[aria-pressed="true"][data-side="built"] { background: var(--pf-blue); color: #fff; }
.pf-compare__range { flex: 1 1 14rem; max-width: 22rem; display: flex; align-items: center; gap: 0.75rem; }
.pf-compare__range input { flex: 1; accent-color: var(--pf-blue); height: 2rem; cursor: ew-resize; }
.pf-compare__stage { position: relative; display: grid; background: var(--pf-sheet); border: 1px solid rgba(18, 19, 20, 0.14); box-shadow: 0 28px 60px -40px rgba(18, 19, 20, 0.5); }
.pf-compare__layer { grid-area: 1 / 1; padding: clamp(0.75rem, 2vw, 1.5rem); }
.pf-compare__layer--built { background: var(--pf-sheet); clip-path: inset(0 0 0 var(--pf-wipe, 100%)); transition: clip-path 0.9s var(--pf-ease); }
.pf-compare.is-dragging .pf-compare__layer--built { transition: none; }
.pf-compare__seam { position: absolute; top: 0; bottom: 0; left: var(--pf-wipe, 100%); width: 2px; margin-left: -1px; background: var(--pf-blue); transition: left 0.9s var(--pf-ease), opacity 0.3s ease; pointer-events: none; }
.pf-compare.is-dragging .pf-compare__seam { transition: none; }
.pf-compare__seam[data-edge="true"] { opacity: 0; }
.pf-compare__captions { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.pf-compare__captions p { font-size: 0.98rem; line-height: 1.5; color: var(--pf-ink-2); transition: opacity 0.4s ease; }
.pf-compare__captions p[data-dim="true"] { opacity: 0.45; }
@media (max-width: 640px) {
    .pf-compare__captions { grid-template-columns: 1fr; gap: 0.6rem; }
    .pf-compare__range { max-width: none; }
}

/* drawing internals */
.pf-dw { display: block; width: 100%; height: auto; }
.pf-dw text { font-family: var(--pf-display); font-stretch: 84%; font-size: 15px; fill: var(--pf-ink); }
.pf-dw .t-small { font-size: 12.5px; fill: var(--pf-ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
.pf-dw .t-found { fill: var(--pf-red); font-weight: 650; }
.pf-dw .t-built { fill: var(--pf-blue); font-weight: 650; }
.pf-dw .ink { stroke: var(--pf-ink); fill: none; stroke-width: 1.5; }
.pf-dw .ink-soft { stroke: var(--pf-ink-3); fill: none; stroke-width: 1; }
.pf-dw .rule { stroke: var(--pf-rule); fill: none; stroke-width: 1; }
.pf-dw .box { fill: var(--pf-sheet); stroke: var(--pf-ink); stroke-width: 1.5; }
.pf-dw .found { stroke: var(--pf-red); fill: none; stroke-width: 2; }
.pf-dw .built { stroke: var(--pf-blue); fill: none; stroke-width: 2.25; }
.pf-dw .found-fill { fill: rgba(181, 49, 27, 0.12); stroke: var(--pf-red); stroke-width: 1.5; }
.pf-dw .built-fill { fill: rgba(28, 71, 192, 0.12); stroke: var(--pf-blue); stroke-width: 1.5; }
.pf-dw .built-solid { fill: var(--pf-blue); }
.pf-dw .found-solid { fill: var(--pf-red); }
.pf-dw .dash { stroke-dasharray: 5 4; }

/* ------------------------------------------------------------------ causal cascade */

.pf-cascade { display: grid; grid-template-columns: repeat(var(--pf-tiers, 4), minmax(0, 1fr)); border-top: 1px solid rgba(236, 238, 233, 0.4); }
.pf-cascade__tier { position: relative; padding: 1.1rem 1.4rem 0 0; }
.pf-cascade__tier + .pf-cascade__tier { padding-left: 1.4rem; border-left: 1px solid var(--pf-rule-dark); }
.pf-cascade__tier h3 { display: flex; align-items: center; gap: 0.6rem; }
.pf-cascade__tier h3 svg { color: var(--pf-blue-dark); }
.pf-cascade__steps { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 1.3rem; counter-reset: none; }
.pf-cascade__steps li { position: relative; padding-top: 0.9rem; border-top: 1px solid var(--pf-rule-dark); font-size: 1.08rem; line-height: 1.5; color: var(--pf-on-dark); }
.pf-cascade__steps li span { display: block; margin-bottom: 0.35rem; font-family: var(--pf-display); font-stretch: 78%; font-size: 0.74rem; letter-spacing: 0.07em; color: var(--pf-on-dark-3); }
.pf-cascade__arrow { position: absolute; top: 1.2rem; right: -0.55rem; width: 1.1rem; height: 1.1rem; color: var(--pf-blue-dark); background: var(--pf-carbon); z-index: 1; }
@media (max-width: 900px) {
    .pf-cascade { grid-template-columns: 1fr; }
    .pf-cascade__tier { padding: 1.1rem 0 1.6rem 1.6rem; border-left: 2px solid var(--pf-blue-dark); }
    .pf-cascade__tier + .pf-cascade__tier { padding-left: 1.6rem; border-left: 2px solid var(--pf-blue-dark); }
    .pf-cascade__arrow { display: none; }
}

/* ------------------------------------------------------------------ schedule table */

.pf-schedule { width: 100%; border-collapse: collapse; }
.pf-schedule th, .pf-schedule td { text-align: left; vertical-align: top; padding: 1.05rem 1.25rem 1.05rem 0; border-bottom: 1px solid var(--pf-rule); }
.pf-schedule thead th { font-family: var(--pf-display); font-stretch: 78%; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--pf-ink-3); border-bottom: 1px solid var(--pf-rule-strong); }
.pf-schedule tbody th { width: 4.5rem; font-family: var(--pf-display); font-stretch: 90%; font-weight: 700; font-size: 1.1rem; color: var(--pf-blue); font-variant-numeric: tabular-nums; }
.pf-schedule td { font-size: 1.08rem; line-height: 1.5; color: var(--pf-ink); }

/* ------------------------------------------------------------------ long-form case layout */

.pf-longform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pf-margin-note { position: sticky; top: 8rem; padding-top: 1rem; border-top: 2px solid var(--pf-red); }
.pf-margin-note p.pf-note-text { margin-top: 0.8rem; font-family: var(--pf-read); font-style: italic; font-size: 1.12rem; line-height: 1.5; color: var(--pf-ink-2); }
@media (max-width: 900px) {
    .pf-longform { grid-template-columns: 1fr; }
    .pf-margin-note { position: static; }
}
.pf-dropcap::first-letter { float: left; font-family: var(--pf-display); font-stretch: 112%; font-weight: 780; font-size: 4.4em; line-height: 0.8; margin: 0.08em 0.1em 0 0; color: var(--pf-ink); }

.pf-hero-case { position: relative; }
.pf-case-photo { position: relative; overflow: hidden; background: var(--pf-carbon-2); }
.pf-case-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-case-photo figcaption { position: absolute; left: 1rem; bottom: 0.85rem; color: rgba(255, 255, 255, 0.84); font-family: var(--pf-display); font-size: 0.68rem; font-stretch: 78%; letter-spacing: 0.07em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.pf-back { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--pf-display); font-stretch: 90%; font-size: 0.95rem; font-weight: 580; color: inherit; text-decoration: none; opacity: 0.8; }
.pf-back:hover { opacity: 1; }

.pf-hero-bleed { position: relative; min-height: min(52rem, calc(100svh - 6rem)); display: flex; align-items: flex-end; color: #fff; background: var(--pf-carbon); }
.pf-hero-bleed__img { position: absolute; inset: 0; }
.pf-hero-bleed__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-hero-bleed__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 19, 20, 0.55) 0%, rgba(18, 19, 20, 0.12) 32%, rgba(18, 19, 20, 0.55) 62%, rgba(18, 19, 20, 0.94) 100%); }
.pf-hero-bleed__content { position: relative; width: 100%; padding: clamp(6rem, 12vw, 10rem) var(--pf-gutter) clamp(2.5rem, 5vw, 4rem); }

.pf-hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(54rem, calc(100svh - 6rem)); }
.pf-hero-split__text { padding: clamp(3rem, 6vw, 6rem) var(--pf-gutter); display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; }
.pf-hero-split__media { position: relative; min-height: 22rem; }
.pf-hero-split__media > * { position: absolute; inset: 0; height: 100%; }
@media (max-width: 900px) {
    .pf-hero-split { grid-template-columns: 1fr; min-height: 0; }
    .pf-hero-split__media { aspect-ratio: 4 / 3; min-height: 0; order: -1; }
}

.pf-statement { font-family: var(--pf-read); font-size: clamp(1.7rem, 3.3vw, 2.9rem); line-height: 1.16; letter-spacing: -0.012em; text-wrap: balance; max-width: 30ch; }
.pf-statement em { font-style: italic; }

.pf-effects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--pf-rule-strong); }
.pf-effects > div { padding: 1.2rem 1.5rem 0 0; }
.pf-effects > div + div { padding-left: 1.5rem; border-left: 1px solid var(--pf-rule); }
@media (max-width: 900px) {
    .pf-effects { grid-template-columns: 1fr; }
    .pf-effects > div, .pf-effects > div + div { padding: 1.2rem 0; border-left: 0; border-bottom: 1px solid var(--pf-rule); }
}

.pf-limits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); }
.pf-limits > div { border-top: 2px solid var(--pf-blue-dark); padding-top: 1.2rem; }
.pf-limits > div + div { border-top-color: var(--pf-red-dark); }
@media (max-width: 800px) { .pf-limits { grid-template-columns: 1fr; gap: 2.5rem; } }

.pf-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; text-decoration: none; color: inherit; }
.pf-next__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--pf-carbon-2); }
.pf-next__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--pf-ease); }
.pf-next:hover .pf-next__media img { transform: scale(1.03); }
.pf-next:hover .pf-h2 { color: var(--pf-blue); }
.pf-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--pf-rule-strong); margin-top: clamp(3rem, 6vw, 5rem); }
.pf-shelf a { padding: 1rem 1rem 1.2rem 0; color: inherit; text-decoration: none; display: grid; gap: 0.35rem; }
.pf-shelf a + a { padding-left: 1rem; border-left: 1px solid var(--pf-rule); }
.pf-shelf a[aria-current="page"] { color: var(--pf-blue); }
.pf-shelf a:hover .pf-h4 { color: var(--pf-blue); }
@media (max-width: 900px) {
    .pf-next { grid-template-columns: 1fr; }
    .pf-shelf { grid-template-columns: 1fr; }
    .pf-shelf a, .pf-shelf a + a { padding: 0.9rem 0; border-left: 0; border-bottom: 1px solid var(--pf-rule); }
}

/* ------------------------------------------------------------------ model reference */

.pf-model { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); border-top: 1px solid rgba(236, 238, 233, 0.4); }
.pf-model > dt, .pf-model > dd { margin: 0; padding: 1.6rem 0; border-bottom: 1px solid var(--pf-rule-dark); }
.pf-model > dt { padding-right: 2rem; }
.pf-model > dt .pf-h4 { color: var(--pf-on-dark); }
.pf-model > dd { min-width: 0; }
.pf-model__assumptions { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px; background: var(--pf-rule-dark); border: 1px solid var(--pf-rule-dark); }
.pf-model__assumptions div { background: var(--pf-carbon); padding: 1rem 1.1rem; }
.pf-model__assumptions strong { display: block; margin-top: 0.3rem; font-family: var(--pf-display); font-stretch: 92%; font-weight: 720; font-size: 1.6rem; letter-spacing: -0.02em; color: var(--pf-on-dark); font-variant-numeric: tabular-nums; }
.pf-formula { font-family: var(--pf-display); font-stretch: 92%; font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.45; color: var(--pf-on-dark); }
.pf-formula var { font-style: normal; color: var(--pf-blue-dark); }
@media (max-width: 800px) {
    .pf-model { grid-template-columns: 1fr; }
    .pf-model > dt { padding-bottom: 0; border-bottom: 0; }
    .pf-model > dd { padding-top: 0.8rem; }
}

.pf-hours { display: grid; gap: 1.4rem; }
.pf-hours__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.pf-hours__bar { height: 14px; background: rgba(236, 238, 233, 0.07); position: relative; }
.pf-film .pf-hours__bar, .pf-film-deep .pf-hours__bar { background: rgba(18, 19, 20, 0.07); }
.pf-hours__bar i { position: absolute; inset: 0 auto 0 0; transform-origin: left; }
.pf-hours__bar i.is-found { box-shadow: inset 0 0 0 1.5px var(--pf-red-dark); }
.pf-hours__bar i.is-built { background: var(--pf-blue-dark); }
.pf-film .pf-hours__bar i.is-found, .pf-film-deep .pf-hours__bar i.is-found { box-shadow: inset 0 0 0 1.5px var(--pf-red); }
.pf-film .pf-hours__bar i.is-built, .pf-film-deep .pf-hours__bar i.is-built { background: var(--pf-blue); }
.pf-hours__value { font-size: 1.25rem; min-width: 7.5rem; text-align: right; }
@media (max-width: 560px) {
    .pf-hours__row { grid-template-columns: 1fr auto; }
    .pf-hours__bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ------------------------------------------------------------------ field notes, client words, checks */

.pf-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--pf-rule-strong); }
.pf-notes article { padding: 1.4rem 1.6rem 0 0; }
.pf-notes article + article { padding-left: 1.6rem; border-left: 1px solid var(--pf-rule); }
@media (max-width: 960px) {
    .pf-notes { grid-template-columns: 1fr; }
    .pf-notes article, .pf-notes article + article { padding: 1.5rem 0; border-left: 0; border-bottom: 1px solid var(--pf-rule); }
}

.pf-quote-lead { font-family: var(--pf-read); font-weight: 420; font-size: clamp(2.1rem, 5vw, 4.6rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; max-width: 22ch; }
.pf-quote-lead::before { content: "\201C"; margin-left: -0.45em; color: var(--pf-gold); }
.pf-quote-lead::after { content: "\201D"; color: var(--pf-gold); }
.pf-voices { display: grid; gap: 0; border-top: 1px solid var(--pf-rule-strong); }
.pf-voices__row { display: grid; grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); padding: 2rem 0; border-bottom: 1px solid var(--pf-rule); }
.pf-voices__quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.6rem 2.4rem; }
.pf-voices__quotes blockquote { margin: 0; font-family: var(--pf-read); font-size: 1.22rem; line-height: 1.45; color: var(--pf-ink); text-wrap: pretty; }
.pf-voices__quotes cite { display: block; margin-top: 0.55rem; font-style: normal; }
@media (max-width: 800px) { .pf-voices__row { grid-template-columns: 1fr; } }

.pf-checks { border-top: 1px solid var(--pf-rule-strong); }
.pf-check { display: grid; grid-template-columns: 3.5rem minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 1.5rem; align-items: start; padding: 1.6rem 0; border-bottom: 1px solid var(--pf-rule); }
.pf-check__no { font-size: 1.35rem; color: var(--pf-blue); }
.pf-check a.pf-check__go { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--pf-display); font-stretch: 94%; font-weight: 640; font-size: 0.98rem; color: var(--pf-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.15rem; white-space: nowrap; }
.pf-check a.pf-check__go:hover { color: var(--pf-blue); }
@media (max-width: 900px) {
    .pf-check { grid-template-columns: 2.5rem minmax(0, 1fr); }
    .pf-check > :nth-child(3), .pf-check > :nth-child(4) { grid-column: 2; }
}

.pf-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); border-top: 1px solid var(--pf-rule-strong); }
.pf-faq article { padding: 1.6rem 0; border-bottom: 1px solid var(--pf-rule); }
@media (max-width: 860px) { .pf-faq { grid-template-columns: 1fr; } }

.pf-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); }
.pf-key article { padding: 1.3rem 0; border-top: 1px solid var(--pf-rule); }
@media (max-width: 960px) { .pf-key { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pf-key { grid-template-columns: 1fr; } }

.pf-close { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.pf-close__sheet { position: relative; background: var(--pf-sheet); color: var(--pf-ink); border: 1px solid rgba(18, 19, 20, 0.14); transform: rotate(-1.5deg); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.pf-close__sheet img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(0.85); }
@media (max-width: 900px) { .pf-close { grid-template-columns: 1fr; } .pf-close__sheet { transform: none; } }

/* ------------------------------------------------------------------ motion (only after JS opts in, never for reduced motion) */

.pf-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pf-grow { transform-box: fill-box; transform-origin: left center; }

@media (prefers-reduced-motion: no-preference) {
    .pf-motion [data-pf-reveal] .pf-draw { transition: stroke-dashoffset 1.6s var(--pf-ease) 0.15s; }
    .pf-motion [data-pf-reveal]:not(.is-in) .pf-draw { stroke-dashoffset: 1; }
    .pf-motion [data-pf-reveal] .pf-grow { transition: transform 1.3s var(--pf-ease) 0.1s; }
    .pf-motion [data-pf-reveal]:not(.is-in) .pf-grow { transform: scaleX(0.001); }
    .pf-motion [data-pf-reveal] .pf-rise { transition: transform 1.1s var(--pf-ease), opacity 1.1s var(--pf-ease); }
    .pf-motion [data-pf-reveal]:not(.is-in) .pf-rise { transform: translateY(14px); opacity: 0.001; }
    .pf-motion [data-pf-reveal] .pf-dots circle { transition: opacity 0.5s ease; transition-delay: calc(var(--i, 0) * 4ms); }
    .pf-motion [data-pf-reveal]:not(.is-in) .pf-dots circle.is-built { opacity: 0.12; }

    .pf-motion [data-pf-reveal] .pf-grow-html { transition: transform 1.3s var(--pf-ease) 0.1s; }
    .pf-motion [data-pf-reveal]:not(.is-in) .pf-grow-html { transform: scaleX(0.001); }
}

.pf-grow-html { transform-origin: left center; }
.pf-instant .pf-draw, .pf-instant .pf-grow, .pf-instant .pf-grow-html, .pf-instant .pf-rise, .pf-instant circle { transition: none !important; }

/* ------------------------------------------------------------------ case interiors: measurement forms */

.pf-chapters { display: grid; grid-template-columns: repeat(var(--pf-cols, 3), minmax(0, 1fr)); border-top: 1px solid var(--pf-rule-strong); }
.pf-chapters > article { padding: 1.4rem 1.6rem 0 0; }
.pf-chapters > article + article { padding-left: 1.6rem; border-left: 1px solid var(--pf-rule); }
.pf-stagebars { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.95rem; }
.pf-stagebars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 1rem; align-items: baseline; font-family: var(--pf-display); font-stretch: 94%; font-size: 0.96rem; line-height: 1.3; color: var(--pf-ink-2); }
.pf-stagebars .pf-num { font-size: 1.1rem; color: var(--pf-ink); }
.pf-stagebars .pf-hours__bar { grid-column: 1 / -1; height: 8px; }
.pf-chapter-rate { font-size: clamp(3.2rem, 6.4vw, 5.4rem); line-height: 0.88; margin-top: 1.2rem; }
@media (max-width: 900px) {
    .pf-chapters { grid-template-columns: 1fr; }
    .pf-chapters > article, .pf-chapters > article + article { padding: 1.5rem 0 2.2rem; border-left: 0; border-bottom: 1px solid var(--pf-rule); }
}

.pf-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); }
.pf-secondary > article { padding: 1.6rem 0 2.4rem; border-top: 1px solid var(--pf-rule-strong); display: grid; gap: 1rem; align-content: start; }
.pf-secondary__delta { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 0.98; }
.pf-secondary__delta--long { font-family: var(--pf-read); font-size: 1.22rem; line-height: 1.45; }
.pf-secondary__delta--long .pf-delta__from, .pf-secondary__delta--long .pf-delta__to { font-family: var(--pf-read); }
@media (max-width: 860px) { .pf-secondary { grid-template-columns: 1fr; } }

.pf-dotrow { display: grid; grid-template-columns: repeat(var(--pf-cols, 2), minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pf-dotrow > article { display: grid; gap: 1rem; align-content: start; }
@media (max-width: 800px) { .pf-dotrow { grid-template-columns: 1fr; } }

.pf-case-drawing { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pf-case-drawing .pf-compare { max-width: 44rem; }
@media (max-width: 960px) { .pf-case-drawing { grid-template-columns: 1fr; } }

.pf-quote-hero { font-family: var(--pf-read); font-style: italic; font-weight: 400; font-size: clamp(2.3rem, 5.6vw, 5.2rem); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; max-width: 20ch; }
.pf-overall { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 2.5rem; align-items: end; padding-top: 1.6rem; border-top: 1px solid var(--pf-rule-strong); }
.pf-overall .pf-delta { font-size: clamp(3rem, 7vw, 6.2rem); line-height: 0.86; }
.pf-overall .pf-delta__arrow { font-size: 0.5em; }
@media (max-width: 760px) { .pf-overall { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    .pf *, .pf *::before, .pf *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------------ shared-class guards and small layouts */

.pf .pf-btn { border-radius: 0; box-shadow: none; text-transform: none; letter-spacing: -0.005em; font-family: var(--pf-display); font-stretch: 100%; font-size: 0.98rem; font-weight: 620; min-height: 3.35rem; padding: 0 1.45rem; }
.pf .pf-btn:not(.pf-btn--ghost) { background: var(--pf-ink); color: var(--pf-sheet); border: 1px solid var(--pf-ink); }
.pf .pf-btn:not(.pf-btn--ghost):hover { background: var(--pf-blue); border-color: var(--pf-blue); color: #fff; }
.pf .pf-dark .pf-btn:not(.pf-btn--ghost) { background: var(--pf-on-dark); color: var(--pf-ink); border-color: var(--pf-on-dark); }
.pf .pf-dark .pf-btn:not(.pf-btn--ghost):hover { background: var(--pf-gold-dark); border-color: var(--pf-gold-dark); color: var(--pf-ink); }

.pf-navrow { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.pf-hero-tb { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
@media (max-width: 900px) { .pf-hero-tb { grid-template-columns: 1fr; } }
.pf-hero-bleed__nav { position: absolute; top: clamp(1.5rem, 3vw, 2.5rem); left: var(--pf-gutter); right: var(--pf-gutter); z-index: 1; }
.pf-hero-bleed .pf-h1 { color: #fff; }
.pf-hero-bleed .pf-lede { color: #dfe2de; }
.pf-voices__quotes figure { margin: 0; }
.pf-voices__quotes figcaption { margin-top: 0.55rem; }
/* a light paper sheet placed on a carbon chapter keeps the film palette */
.pf .pf-dark .pf-close__sheet .pf-cells { border-top-color: var(--pf-rule-strong); }
.pf .pf-dark .pf-close__sheet .pf-cell { border-color: var(--pf-rule); }
.pf .pf-dark .pf-close__sheet .pf-cell dt { color: var(--pf-ink-3); }
.pf .pf-dark .pf-close__sheet .pf-cell dd { color: var(--pf-ink); }
.pf .pf-dark .pf-close__sheet .pf-red { color: var(--pf-red); }

/* ------------------------------------------------------------------ flagship case studies */

.pf-paper { position: relative; background: var(--pf-sheet); color: var(--pf-ink); border: 1px solid rgba(18, 19, 20, 0.14); box-shadow: 0 2px 3px rgba(18, 19, 20, 0.05), 0 28px 60px -34px rgba(18, 19, 20, 0.45); padding: clamp(1.1rem, 2.4vw, 2rem); }
.pf-paper--tilt { padding: 0.7rem; transform: rotate(1.5deg); }
.pf-paper .pf-list li { color: var(--pf-ink-2); }
.pf-paper .pf-list--built li::before { background: var(--pf-blue); }

.pf-flag-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.pf-flag-hero__media { position: relative; max-width: 30rem; justify-self: end; width: 100%; }
.pf-flag-hero__tag { position: absolute; left: -2.5rem; bottom: 2.5rem; width: 15rem; padding: 0.4rem 1rem 0.2rem; transform: rotate(-2deg); }
@media (max-width: 900px) {
    .pf-flag-hero { grid-template-columns: 1fr; }
    .pf-flag-hero__media { justify-self: start; max-width: 26rem; }
    .pf-flag-hero__tag { left: auto; right: -0.5rem; bottom: -1.5rem; }
}

.pf-statement--xl { font-size: clamp(2rem, 4.4vw, 3.9rem); max-width: 26ch; line-height: 1.1; }

.pf-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.pf-list--numbered { counter-reset: pf-n; }
.pf-list--numbered li { counter-increment: pf-n; padding-left: 2.2rem; font-size: 1.08rem; }
.pf-list--numbered li::before { content: counter(pf-n, decimal-leading-zero); background: none; width: auto; height: auto; top: 0.1em; font-family: var(--pf-display); font-stretch: 90%; font-weight: 700; font-size: 0.9rem; color: var(--pf-blue); }
.pf-dark .pf-list--numbered li::before { color: var(--pf-blue-dark); }
@media (max-width: 700px) { .pf-list--two { grid-template-columns: 1fr; } }

.pf-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--pf-steps, 7), minmax(0, 1fr)); }
.pf-rail li, .pf-lifecycle li { position: relative; padding: 2.2rem 0.8rem 0 0; display: grid; gap: 0.5rem; align-content: start; }
.pf-rail li::before, .pf-lifecycle li::before { content: ""; position: absolute; left: 0; right: 0; top: 0.55rem; height: 2px; background: var(--pf-blue); }
.pf-rail li:last-child::before, .pf-lifecycle li:last-child::before { right: 50%; }
.pf-rail li.is-open::before { background: repeating-linear-gradient(90deg, var(--pf-blue) 0 6px, transparent 6px 11px); right: 0; }
.pf-rail__mark { position: absolute; top: 0; left: 0; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--pf-sheet); border: 2.5px solid var(--pf-blue); }
.pf-rail .pf-h4, .pf-lifecycle .pf-h4 { font-size: 1.02rem; }
@media (max-width: 900px) {
    .pf-rail { grid-template-columns: 1fr; }
    .pf-rail li { padding: 0 0 1.4rem 2.2rem; }
    .pf-rail li::before { left: 0.55rem; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
    .pf-rail li:last-child::before { bottom: 50%; right: auto; }
    .pf-rail li.is-open::before { background: repeating-linear-gradient(180deg, var(--pf-blue) 0 6px, transparent 6px 11px); bottom: 0; }
}

.pf-phase { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 900px) { .pf-phase { grid-template-columns: 1fr; } }

.pf-notes--six { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.4rem; }
@media (min-width: 961px) { .pf-notes--six article:nth-child(3n + 1) { padding-left: 0; border-left: 0; } }
@media (max-width: 960px) { .pf-notes--six { grid-template-columns: 1fr; row-gap: 0; } }

.pf-related { display: grid; border-top: 1px solid var(--pf-rule-dark); }
.pf-related a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--pf-rule-dark); color: inherit; text-decoration: none; }
.pf-related a .pf-small { grid-column: 1; }
.pf-related a svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; transition: transform 0.35s var(--pf-ease); }
.pf-related a:hover .pf-h4 { color: var(--pf-blue-dark); }
.pf-related a:hover svg { transform: translateX(4px); }

.pf-moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--pf-rule-strong); }
.pf-moment { padding: 1.6rem 2rem 0 0; }
.pf-moment + .pf-moment { padding-left: 2rem; border-left: 1px solid var(--pf-rule); }
.pf-moment__value { font-size: clamp(4rem, 8.5vw, 7.6rem); line-height: 0.85; color: var(--pf-blue); }
.pf-hours__row--compact { grid-template-columns: 3.4rem minmax(0, 1fr); }
@media (max-width: 900px) {
    .pf-moments { grid-template-columns: 1fr; }
    .pf-moment, .pf-moment + .pf-moment { padding: 1.6rem 0 2.2rem; border-left: 0; border-bottom: 1px solid var(--pf-rule); }
}

.pf-inline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; font-family: var(--pf-display); font-stretch: 92%; font-size: 1rem; color: var(--pf-ink-2); }
.pf-inline-list li { padding-right: 1rem; margin-right: 1rem; border-right: 1px solid var(--pf-rule-strong); line-height: 1.3; }
.pf-inline-list li:last-child { border-right: 0; }

.pf-scroll { overflow-x: auto; padding-bottom: 0.6rem; }
.pf-lifecycle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--pf-steps, 11), minmax(6.5rem, 1fr)); min-width: 72rem; }
.pf-lifecycle li.has-metric .pf-rail__mark { background: var(--pf-blue); }
.pf-lifecycle__metric { display: grid; gap: 0.2rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--pf-rule-strong); }
.pf-lifecycle__metric strong { font-size: 2rem; line-height: 1; color: var(--pf-blue); }

.pf-workstreams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
.pf-workstreams article { padding: 1.4rem 0 2.2rem; border-top: 1px solid var(--pf-rule-strong); }
@media (max-width: 960px) { .pf-workstreams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pf-workstreams { grid-template-columns: 1fr; } }

.pf-loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid rgba(236, 238, 233, 0.4); }
.pf-loop li { position: relative; padding: 1.2rem 1.5rem 0 0; display: grid; gap: 0.4rem; align-content: start; }
.pf-loop__arrow { position: absolute; right: 0.3rem; top: 1.5rem; color: var(--pf-blue-dark); }
.pf-loop__return { color: var(--pf-blue-dark) !important; }
@media (max-width: 900px) {
    .pf-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-loop__arrow { display: none; }
}

.pf-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem clamp(1.5rem, 3vw, 3rem); }
.pf-kpis > div { border-top: 1px solid var(--pf-rule-dark); padding-top: 1rem; }
@media (max-width: 900px) { .pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pf-kpis { grid-template-columns: 1fr; } }

.pf-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
@media (max-width: 900px) { .pf-split { grid-template-columns: 1fr; } }

.pf-progression { display: flex; flex-wrap: wrap; gap: 0.4rem 0; font-size: 0.98rem; font-weight: 600; color: var(--pf-ink-2); }
.pf-progression > span { display: inline-flex; align-items: center; white-space: nowrap; }
.pf-progression__arrow { display: inline-block; margin: 0 0.55rem; color: var(--pf-blue); }
.pf-volume__metrics { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(236, 238, 233, 0.4); }
.pf-volume__metrics > div { padding: 0.9rem 1rem 0 0; }
.pf-volume__metrics > div + div { padding-left: 1rem; border-left: 1px solid var(--pf-rule-dark); }
.pf-volume__metrics dd { margin: 0.4rem 0 0; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 0.9; color: var(--pf-blue-dark); }
@media (max-width: 560px) {
    .pf-volume__metrics { grid-template-columns: 1fr; }
    .pf-volume__metrics > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--pf-rule-dark); }
    .pf-volume__metrics > div { padding: 0.8rem 0; }
}

/* ------------------------------------------------------------------ Western CPA measures */

.pf-measures { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--pf-rule-strong); }
.pf-measure { padding: 1.4rem 1.4rem 0 0; display: grid; gap: 0.7rem; align-content: start; }
.pf-measure + .pf-measure { padding-left: 1.4rem; border-left: 1px solid var(--pf-rule); }
.pf-measure__figure { width: 100%; max-width: 10rem; height: auto; margin-bottom: 0.6rem; }
.pf-measure__value { font-size: clamp(3rem, 5vw, 4.6rem); line-height: 0.86; color: var(--pf-blue); }
@media (max-width: 1100px) {
    .pf-measures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pf-measure { padding-bottom: 2rem; border-bottom: 1px solid var(--pf-rule); }
    .pf-measure:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
    .pf-measures { grid-template-columns: 1fr; }
    .pf-measure, .pf-measure + .pf-measure, .pf-measure:nth-child(3n + 1) { padding: 1.4rem 0 1.8rem; border-left: 0; }
}

.pf-schedule--dark thead th { color: var(--pf-on-dark-3); border-bottom-color: rgba(236, 238, 233, 0.4); }
.pf-schedule--dark th, .pf-schedule--dark td { border-bottom-color: var(--pf-rule-dark); }
.pf-schedule--dark tbody th { color: var(--pf-blue-dark); }
.pf-schedule--dark td { color: var(--pf-on-dark); }

.pf-overall-delta { margin-top: 1.6rem; font-size: clamp(3rem, 6.4vw, 5.6rem); line-height: 0.9; }
.pf-overall-delta .pf-delta__arrow { font-size: 0.5em; }

.pf-opfacts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--pf-rule-strong); }
.pf-opfacts > div { padding: 1.2rem 1.4rem 0 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.6rem; }
.pf-opfacts > div + div { padding-left: 1.4rem; border-left: 1px solid var(--pf-rule); }
.pf-opfacts dd { margin: 0; font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 0.9; color: var(--pf-blue); }
@media (max-width: 900px) {
    .pf-opfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-opfacts > div { padding-bottom: 1.6rem; border-bottom: 1px solid var(--pf-rule); }
    .pf-opfacts > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
    .pf-opfacts { grid-template-columns: 1fr; }
    .pf-opfacts > div, .pf-opfacts > div + div { padding-left: 0; border-left: 0; }
}

.pf-volume--feature .pf-volume__metrics { border-top-color: var(--pf-rule-strong); }
.pf-volume--feature .pf-volume__metrics > div + div { border-left-color: var(--pf-rule); }
.pf-volume--feature .pf-volume__metrics dd { color: var(--pf-blue); }
.pf-flag-hero__tag .pf-delta { font-size: 1.15rem; }

.pf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }