/* ==========================================================================
   Project Will — design system
   Bricolage Grotesque / Inter / Roboto Mono on a warm near-white canvas.
   Hierarchy comes from type scale and background contrast, not shadows.

   Scopes: default = Project Will (deep green + yellow)
           .t-custodian = Custodian (deeper forest + parchment)
   ========================================================================== */

:root {
    /* Canvas & ink */
    --bg:          #fcfaf5;
    --ink:         #1a3300;
    --ink-soft:    #3d4a30;   /* secondary body copy */
    --muted:       #5f6b58;   /* mono labels — darkened from the reference
                                 so nothing on the site is lighter than #666 */
    --on-ink:      #fcfaf5;

    /* Rules */
    --line:        #b6b6b6;
    --line-soft:   #e2ded2;
    --line-ink:    var(--ink);

    /* Accents */
    --hl:          #ffe95c;   /* highlight / <mark> / badges */
    --mint:        #a8e5e5;
    --leaf:        #d5f5c2;
    --bloom:       #f6d0ff;
    --seal:        #8a6a2f;

    /* Type */
    --font-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
    --font-body:    Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Display headline clamp — 34px floor keeps 380px viewports intact */
    --display-lg: clamp(34px, 6.2vw, 76px);
    --display-md: clamp(32px, 5.2vw, 60px);
    --display-sm: clamp(30px, 4.2vw, 48px);

    /* Rhythm */
    --gutter:  clamp(16px, 3vw, 32px);
    --section: clamp(56px, 8vw, 120px);
    --container: 1200px;

    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 16px;
}

/* Custodian sits in the same system with its own note. */
.t-custodian {
    --ink:      #12301F;
    --ink-soft: #2f4433;
    --muted:    #5b6a5d;
    --hl:       #e4dcc4;   /* parchment */
    --leaf:     #eef2e8;
    --mint:     #dfe7e2;
    --bloom:    #e4dcc4;
    --seal:     #8a6a2f;

    /* Older audience: hold display type inside 34–64px. */
    --display-lg: clamp(34px, 5.4vw, 64px);
    --display-md: clamp(32px, 4.6vw, 54px);
    --display-sm: clamp(30px, 3.8vw, 44px);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;          /* floor for the whole site */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration: none; }
a:hover { opacity: 0.65; }

button { font: inherit; color: inherit; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--hl); color: var(--ink); }

mark {
    background: var(--hl);
    color: var(--ink);
    padding: 0 0.1em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
    border-radius: 3px;
}

.pw-skip {
    position: absolute; left: -9999px;
    background: var(--ink); color: var(--on-ink);
    padding: 14px 20px; border-radius: var(--r-sm); z-index: 200;
}
.pw-skip:focus { left: 16px; top: 16px; opacity: 1; }

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

/* ==========================================================================
   Layout
   ========================================================================== */

.pw-page { background: var(--bg); min-height: 100vh; padding-top: 20px; }

.pw-container {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.pw-section { padding-top: var(--section); }
.pw-section--tight { padding-top: clamp(36px, 5vw, 64px); }

.pw-stack     { display: flex; flex-direction: column; gap: 16px; }
.pw-stack--lg { gap: 24px; }
.pw-row       { display: flex; flex-wrap: wrap; gap: 12px; }
.pw-row--between { justify-content: space-between; align-items: baseline; }

.pw-grid   { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pw-grid--sm { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pw-grid--md { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pw-grid--lg { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(20px, 2.6vw, 36px); }

.pw-split {
    display: grid; gap: clamp(24px, 3vw, 48px);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.pw-split--end { align-items: end; }

/* ==========================================================================
   Type
   ========================================================================== */

.pw-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.pw-display {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--display-lg);
    line-height: 1.02;
    letter-spacing: 0.03em;
    text-wrap: balance;
}
.pw-display--md { font-size: var(--display-md); }
.pw-display--sm { font-size: var(--display-sm); }

.pw-h2 {
    font-size: clamp(27px, 3.4vw, 40px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

.pw-h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.pw-h4 { font-size: 19px; font-weight: 600; }

.pw-lead   { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; text-wrap: pretty; max-width: 58ch; }
.pw-body   { font-size: 17px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.pw-body--ink { color: var(--ink); }
.pw-note   { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.pw-measure { max-width: 62ch; }

/* Long-form prose (blog, guides, legal) */
.pw-prose { max-width: 68ch; font-size: 18px; line-height: 1.65; }
.pw-prose > * + * { margin-top: 1.1em; }
.pw-prose h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; letter-spacing: -0.02em; margin-top: 1.8em; line-height: 1.2; }
.pw-prose h3 { font-size: 21px; font-weight: 600; margin-top: 1.5em; }
.pw-prose p, .pw-prose li { color: var(--ink-soft); }
.pw-prose ul, .pw-prose ol { padding-left: 1.2em; }
.pw-prose ul { list-style: disc; }
.pw-prose ol { list-style: decimal; }
.pw-prose li + li { margin-top: 0.5em; }
.pw-prose a { border-bottom: 1px solid var(--ink); }
.pw-prose strong { font-weight: 600; color: var(--ink); }
.pw-prose blockquote {
    border-left: 3px solid var(--ink);
    padding: 4px 0 4px 20px;
    font-size: 20px;
    color: var(--ink);
}

/* ==========================================================================
   Buttons & badges
   ========================================================================== */

.pw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px;
    padding: 16px 30px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: 16px; font-weight: 500; line-height: 1.2;
    cursor: pointer; text-align: center;
    background: var(--ink); color: var(--on-ink);
}
.pw-btn:hover { opacity: 0.86; }

.pw-btn--ghost   { background: transparent; color: var(--ink); border-color: var(--ink); }
.pw-btn--accent  { background: var(--mint);  color: var(--ink); }
.pw-btn--hl      { background: var(--hl);    color: var(--ink); }
.pw-btn--light   { background: var(--bg);    color: var(--ink); }
.pw-btn--sm      { padding: 12px 20px; font-size: 15px; }
.pw-btn--block   { width: 100%; }

.pw-link {
    display: inline-block;
    font-size: 15px; font-weight: 600;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    background: none; border-left: 0; border-right: 0; border-top: 0;
    cursor: pointer;
}

.pw-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--hl); color: var(--ink);
    border-radius: 9999px;
    padding: 7px 15px;
    font-size: 13px; font-weight: 500;
}
.pw-badge__dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--ink); }
.pw-badge--quiet { background: transparent; border: 1px solid var(--line); }

.pw-price {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    font-size: clamp(40px, 5vw, 60px);
}

/* ==========================================================================
   Cards, stats, quotes
   ========================================================================== */

.pw-card {
    border: 1px solid var(--ink);
    border-radius: var(--r-md);
    padding: 26px;
    display: flex; flex-direction: column; gap: 12px;
}
.pw-card--leaf  { background: var(--leaf);  border-color: transparent; }
.pw-card--mint  { background: var(--mint);  border-color: transparent; }
.pw-card--hl    { background: var(--hl);    border-color: transparent; }
.pw-card--bloom { background: var(--bloom); border-color: transparent; }
.pw-card--lg    { padding: clamp(24px, 3vw, 36px); gap: 16px; }
.pw-card--quiet { border-color: var(--line); }
/* Filled cards drop the dimmed body colour so contrast stays true. */
.pw-card--leaf .pw-body, .pw-card--mint .pw-body,
.pw-card--hl .pw-body,   .pw-card--bloom .pw-body { color: var(--ink); }
.pw-card--leaf .pw-eyebrow, .pw-card--mint .pw-eyebrow,
.pw-card--hl .pw-eyebrow,   .pw-card--bloom .pw-eyebrow { color: var(--ink-soft); }

.pw-stat { border: 1px solid var(--ink); border-radius: var(--r-md); padding: 24px; }
.pw-stat--fill { background: var(--leaf); border-color: transparent; }
.pw-stat__num {
    font-family: var(--font-display); font-weight: 800;
    font-size: 40px; line-height: 1; letter-spacing: 0.02em;
}
.pw-stat__label { font-size: 15px; padding-top: 10px; color: var(--ink-soft); }
.pw-stat--fill .pw-stat__label { color: var(--ink); }

.pw-quote {
    border-radius: var(--r-md);
    padding: 28px;
    display: flex; flex-direction: column; gap: 20px; justify-content: space-between;
    border: 1px solid var(--ink);
}
.pw-quote--hl { background: var(--hl); border-color: transparent; }
.pw-quote__text { font-size: 20px; line-height: 1.35; font-weight: 500; text-wrap: pretty; }
.pw-quote__by { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
.pw-quote--hl .pw-quote__by { color: var(--ink); }

/* Hairline list — the workhorse for feature and spec rows */
.pw-list { display: flex; flex-direction: column; font-size: 17px; }
.pw-list > li,
.pw-list > .pw-list__row {
    border-top: 1px solid var(--line);
    padding: 15px 0;
    display: flex; gap: 16px; align-items: baseline;
}
.pw-list > li:last-child,
.pw-list > .pw-list__row:last-child { border-bottom: 1px solid var(--line); }
.pw-list__n { font-family: var(--font-mono); font-size: 13px; color: var(--muted); min-width: 28px; flex: 0 0 auto; }
.pw-list__k { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.pw-list__v { margin-left: auto; font-weight: 600; text-align: right; }

/* Numbered step grid */
.pw-steps { display: flex; flex-wrap: wrap; border-top: 1px solid var(--ink); }
.pw-step {
    flex: 1 1 210px; min-width: 0;
    border-bottom: 1px solid var(--line);
    padding: 26px 24px 26px 0;
}
.pw-step__n { font-family: var(--font-display); font-weight: 800; font-size: 32px; letter-spacing: 0.03em; line-height: 1; }
.pw-step h3 { padding-top: 14px; }
.pw-step p  { padding-top: 8px; }

/* Dark panel — one per page, used as the closing call */
.pw-panel {
    background: var(--ink); color: var(--on-ink);
    border-radius: var(--r-lg);
    padding: clamp(28px, 5vw, 64px);
    display: grid; gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: center;
}
.pw-panel .pw-eyebrow { color: var(--hl); }
.pw-panel .pw-body,
.pw-panel p { color: rgba(252, 250, 245, 0.88); }
.pw-panel a:not(.pw-btn) { color: var(--on-ink); border-bottom: 1px solid rgba(252,250,245,0.5); }
.pw-panel .pw-btn { background: var(--on-ink); color: var(--ink); }
.pw-panel .pw-btn--ghost { background: transparent; color: var(--on-ink); border-color: rgba(252,250,245,0.6); }

/* Media placeholder — hatched, never stock photography */
.pw-media {
    background: repeating-linear-gradient(135deg, #f1f1f1 0 10px, #e8e6df 10px 20px);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; text-align: center;
    font-family: var(--font-mono); font-size: 12px; color: #666666;
}
.pw-media--wide { aspect-ratio: 16 / 9; }
.pw-media--box  { aspect-ratio: 4 / 3; }
.pw-media img { border-radius: var(--r-md); }

/* Hero logo — transparent PNG, so it sits straight on the canvas with no
   plate behind it. Height-driven because the mark is portrait. */
.pw-herologo {
    height: clamp(92px, 12vw, 148px);
    width: auto;
    margin-inline: auto;
}

.pw-figure { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
/* A square or portrait figure would otherwise fill the whole column. */
.pw-figure--cap { max-width: 620px; margin-inline: auto; }

/* ==========================================================================
   Header
   ========================================================================== */

.pw-header { position: sticky; top: 16px; z-index: 60; padding: 0 clamp(14px, 3vw, 32px); }

.pw-header__bar {
    max-width: var(--container); margin: 0 auto;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 10px 14px;
    display: flex; align-items: center; gap: clamp(10px, 1.6vw, 24px);
    box-shadow: rgba(255, 235, 90, 0.10) 0 24px 60px 0, rgba(0, 0, 0, 0.04) 0 1px 2px 0;
}
.t-custodian .pw-header__bar { box-shadow: rgba(26, 51, 0, 0.06) 0 24px 60px 0, rgba(0,0,0,0.04) 0 1px 2px 0; }

.pw-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pw-brand__mark {
    width: 34px; height: 34px; background: var(--hl); border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.02em;
    color: var(--ink); flex: 0 0 auto;
}
.pw-brand__name { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.pw-brand__sub {
    font-family: var(--font-mono); font-size: 11px; color: var(--muted);
    border-left: 1px solid var(--line); padding-left: 10px; white-space: nowrap;
}

.pw-nav { flex: 1 1 auto; display: flex; justify-content: center; gap: clamp(8px, 1.4vw, 20px); }
.pw-nav a {
    font-size: 15px; font-weight: 500; color: var(--ink-soft);
    padding: 10px 2px; white-space: nowrap;
}
.pw-nav a:hover { color: var(--ink); opacity: 1; }
.pw-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.pw-header__cta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.pw-header__phone {
    font-family: var(--font-mono); font-size: 13px;
    border: 1px solid var(--ink); border-radius: var(--r-sm);
    padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center;
}
.pw-header__cta .pw-btn { padding: 11px 18px; font-size: 15px; }

.pw-burger {
    display: none;
    width: 44px; height: 44px; flex: 0 0 auto;
    background: none; border: 1px solid var(--ink); border-radius: var(--r-sm);
    cursor: pointer; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 18px;
}

.pw-mobilenav { display: none; }

@media (max-width: 1040px) {
    .pw-nav, .pw-header__cta { display: none; }
    .pw-burger { display: inline-flex; margin-left: auto; }
    .pw-mobilenav {
        display: block;
        max-width: var(--container); margin: 8px auto 0;
        background: var(--bg); border: 1px solid var(--line);
        border-radius: var(--r-lg); padding: 10px 14px 16px;
    }
    .pw-mobilenav[hidden] { display: none; }
    .pw-mobilenav a {
        display: block; padding: 14px 4px; font-size: 17px; font-weight: 500;
        border-bottom: 1px solid var(--line-soft);
    }
    .pw-mobilenav .pw-btn { margin-top: 14px; width: 100%; }
    .pw-mobilenav__phone { border-bottom: 0 !important; font-family: var(--font-mono); }
}

@media (max-width: 420px) {
    .pw-brand__sub { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.pw-footer { padding-top: var(--section); padding-bottom: 40px; }
.pw-footer__inner {
    border-top: 1px solid var(--ink);
    padding-top: 36px;
    display: grid; gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.pw-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.pw-footer__col a { color: var(--ink-soft); }
.pw-footer__col a:hover { color: var(--ink); opacity: 1; }
.pw-footer__legal {
    display: flex; flex-wrap: wrap; gap: 20px;
    padding-top: 28px; margin-top: 32px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.pw-footer__legal .pw-footer__copy { margin-left: auto; }
.pw-footer__disclaimer {
    padding-top: 16px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 80ch;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.pw-form { display: flex; flex-direction: column; gap: 18px; }
.pw-field { display: flex; flex-direction: column; gap: 7px; flex: 1 1 200px; min-width: 0; }
.pw-field label { font-size: 15px; font-weight: 600; }
.pw-field__hint { font-size: 14px; color: var(--muted); }

.pw-input, .pw-select, .pw-textarea {
    width: 100%;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 14px; min-height: 48px;
    font-size: 17px; font-family: var(--font-body);
    background: var(--bg); color: var(--ink);
}
.pw-textarea { resize: vertical; min-height: 120px; }
.pw-input:focus, .pw-select:focus, .pw-textarea:focus { border-color: var(--ink); }
.pw-input[aria-invalid="true"], .pw-select[aria-invalid="true"], .pw-textarea[aria-invalid="true"] {
    border-color: #8f2a1c; border-width: 2px;
}

.pw-error { color: #8f2a1c; font-size: 14px; font-weight: 500; }
.pw-error[hidden] { display: none; }

.pw-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.pw-consent input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--ink); }
.pw-consent a { border-bottom: 1px solid var(--ink); color: var(--ink); }

.pw-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-chip {
    border: 1px solid var(--ink); border-radius: 9999px;
    padding: 11px 18px; min-height: 44px;
    font-size: 15px; cursor: pointer; background: transparent;
}
.pw-chip[aria-pressed="true"] { background: var(--hl); font-weight: 600; }

/* Honeypot — off-screen, not display:none, so bots still fill it */
.pw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pw-formstate { border-radius: var(--r-md); padding: 22px; border: 1px solid var(--ink); }
.pw-formstate[hidden] { display: none; }
.pw-formstate--ok   { background: var(--leaf); border-color: transparent; }
.pw-formstate--fail { background: #fbeae7; border-color: #8f2a1c; }
.pw-formstate h3 { margin-bottom: 8px; }

/* ==========================================================================
   FAQ (native disclosure — no JS)
   ========================================================================== */

.pw-faq { display: flex; flex-direction: column; }
.pw-faq details { border-top: 1px solid var(--line); }
.pw-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.pw-faq summary {
    list-style: none; cursor: pointer;
    padding: 20px 40px 20px 0; position: relative;
    font-size: 18px; font-weight: 600; line-height: 1.4;
    min-height: 44px;
}
.pw-faq summary::-webkit-details-marker { display: none; }
.pw-faq summary::after {
    content: "+"; position: absolute; right: 4px; top: 18px;
    font-family: var(--font-mono); font-size: 22px; color: var(--muted);
}
.pw-faq details[open] summary::after { content: "\2013"; }
.pw-faq__a { padding: 0 0 22px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 72ch; }
.pw-faq__a > * + * { margin-top: 0.9em; }
.pw-faq__a a { border-bottom: 1px solid var(--ink); color: var(--ink); }

/* ==========================================================================
   Utilities
   ========================================================================== */

.pw-hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.pw-hr--ink { border-top-color: var(--ink); }
.pw-center { text-align: center; }
.pw-center .pw-lead, .pw-center .pw-display { margin-left: auto; margin-right: auto; }
.pw-mono { font-family: var(--font-mono); }
.pw-muted { color: var(--muted); }
.pw-fill { flex: 1 1 0; min-width: 0; }
.pw-seal { color: var(--seal); }
.pw-nowrap { white-space: nowrap; }
.pw-pt-sm { padding-top: 16px; }
.pw-pt-md { padding-top: 28px; }
.pw-pt-lg { padding-top: clamp(32px, 4vw, 56px); }

/* ==========================================================================
   Motion — one orchestrated moment on load, nothing else
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .pw-reveal > * {
        opacity: 0;
        transform: translateY(14px);
        animation: pw-rise 0.6s cubic-bezier(0.22, 0.8, 0.3, 1) forwards;
    }
    .pw-reveal > *:nth-child(1) { animation-delay: 0.04s; }
    .pw-reveal > *:nth-child(2) { animation-delay: 0.12s; }
    .pw-reveal > *:nth-child(3) { animation-delay: 0.20s; }
    .pw-reveal > *:nth-child(4) { animation-delay: 0.28s; }
    .pw-reveal > *:nth-child(5) { animation-delay: 0.36s; }
    .pw-reveal > *:nth-child(n+6) { animation-delay: 0.44s; }
}

@keyframes pw-rise {
    to { opacity: 1; transform: none; }
}

@media print {
    .pw-header, .pw-mobilenav, .pw-footer, .pw-btn { display: none !important; }
    body { font-size: 12pt; }
}

/* ==========================================================================
   Members directory
   ========================================================================== */

.pw-dirbar {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
    justify-content: space-between;
}
.pw-dirbar .pw-input { max-width: 460px; }

.pw-dirgrid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.pw-dircard {
    text-align: left; cursor: pointer; background: var(--bg);
    font: inherit; color: inherit; gap: 10px;
}
.pw-dircard:hover { background: var(--leaf); border-color: transparent; opacity: 1; }
.pw-dircard__logo {
    width: 56px; height: 56px; border-radius: var(--r-sm);
    background: var(--leaf); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 18px;
}
.pw-dircard__logo img { width: 100%; height: 100%; object-fit: contain; }
.pw-dircard .pw-link { pointer-events: none; }

.pw-dirskeleton { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pw-dirskeleton > div {
    border: 1px solid var(--line); border-radius: var(--r-md);
    height: 190px; background: var(--line-soft); opacity: 0.5;
}

/* Modal */
.pw-dirmodal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pw-dirmodal[hidden] { display: none; }
.pw-dirmodal__backdrop { position: absolute; inset: 0; background: rgba(26, 51, 0, 0.45); border: 0; padding: 0; cursor: pointer; }
.pw-dirmodal__panel {
    position: relative; z-index: 1;
    background: var(--bg); border: 1px solid var(--ink); border-radius: var(--r-lg);
    width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
    padding: clamp(22px, 3vw, 34px);
}
.pw-dirmodal__close {
    position: absolute; top: 12px; right: 12px;
    width: 44px; height: 44px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--bg); cursor: pointer;
    font-family: var(--font-mono); font-size: 20px; line-height: 1;
}
.pw-dirmodal__header { display: flex; gap: 16px; align-items: center; padding-right: 44px; }
.pw-dirmodal__logo {
    width: 68px; height: 68px; flex: 0 0 auto; border-radius: var(--r-sm);
    background: var(--leaf); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 22px;
}
.pw-dirmodal__logo img { width: 100%; height: 100%; object-fit: contain; }
.pw-dirmodal__details { margin-top: 22px; }
.pw-dirmodal__details .pw-list__v { font-weight: 500; }
.pw-dirmodal__actions { margin-top: 22px; }
body.modal-open { overflow: hidden; }

/* ==========================================================================
   Tables — wide content scrolls inside its own container
   ========================================================================== */

.pw-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.pw-table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 520px; }
.pw-table th, .pw-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.pw-table thead th {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted); font-weight: 500;
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.pw-table tbody tr:last-child td { border-bottom: 0; }
.pw-table .price, .pw-table td.price { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.pw-prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.pw-prose th, .pw-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }

/* ==========================================================================
   Custodian — record card and price blocks

   The record is deliberately NOT certificate-shaped. Two certificate-like
   documents in one pack invites confusion, and a client presenting the
   Custodian one at a probate registry would reflect badly on us. So: landscape
   proportions, a single hairline border, no seal device, no inner rule, body
   type rather than display type, and the canvas colour rather than a paper
   tint. It should read as a well-made record card, not a diploma.
   ========================================================================== */

.cu-record {
    background: var(--bg);
    border: 1px solid var(--ink);
    border-radius: var(--r-md);
    padding: 22px 24px 20px;
    max-width: 560px;
}
.cu-record__top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-bottom: 15px; border-bottom: 1px solid var(--line);
}
.cu-record__brand {
    font-family: var(--font-mono); font-weight: 500;
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}
.cu-record__chip {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--line); border-radius: 4px; padding: 5px 9px;
    white-space: nowrap;
}
.cu-record__title { font-size: 18px; font-weight: 600; padding: 16px 0 2px; line-height: 1.3; }
.cu-record__rows { display: flex; flex-direction: column; padding-top: 12px; }
.cu-record__row {
    display: flex; justify-content: space-between; gap: 16px;
    border-top: 1px solid var(--line-soft); padding: 10px 0; font-size: 15px;
}
.cu-record__row:first-child { border-top: 0; }
.cu-record__k {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted);
}
.cu-record__v { font-family: var(--font-mono); font-weight: 500; text-align: right; }
.cu-record__foot {
    margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
    font-size: 13px; line-height: 1.5; color: var(--muted);
}

.cu-pricecard {
    border: 1px solid var(--ink); border-radius: var(--r-md);
    padding: clamp(24px, 3vw, 34px);
    display: flex; flex-direction: column; gap: 16px;
}
.cu-pricecard--fill { background: var(--leaf); border-color: transparent; }
.cu-pricecard__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cu-pricecard__price .pw-price { font-size: clamp(38px, 4.4vw, 54px); }
.cu-pricecard__per { font-family: var(--font-mono); font-size: 14px; color: var(--muted); }

/* Compliance callout — the plain-English promises that must not read as fine print */
.cu-promise {
    border-left: 3px solid var(--ink);
    padding: 6px 0 6px 22px;
    font-size: 18px; line-height: 1.55;
    max-width: 66ch;
}
.cu-promise p + p { margin-top: 0.85em; }