/* ==========================================================================
   KPI brand stylesheet — scoped to .kpi
   Consumes the Kadence global palette via var(--global-palette1..9); hex are
   fallbacks. Loaded on the front end and in the block editor. Page content is
   native Gutenberg blocks wrapped in a Group with class "kpi".
   ========================================================================== */

/* Self-hosted Fira Sans (replaces Adobe Typekit "Agenda"; close humanist-sans match,
   OFL-licensed, no third-party render-blocking font CSS). font-display:swap so text
   paints immediately. Weights: 400 body, 500/600 headings, 700/800 bold. */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/themes/kpi-kadence/assets/fonts/fira-sans-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/themes/kpi-kadence/assets/fonts/fira-sans-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/wp-content/themes/kpi-kadence/assets/fonts/fira-sans-500-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/wp-content/themes/kpi-kadence/assets/fonts/fira-sans-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/wp-content/themes/kpi-kadence/assets/fonts/fira-sans-600-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/wp-content/themes/kpi-kadence/assets/fonts/fira-sans-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/wp-content/themes/kpi-kadence/assets/fonts/fira-sans-700-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/wp-content/themes/kpi-kadence/assets/fonts/fira-sans-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/wp-content/themes/kpi-kadence/assets/fonts/fira-sans-800-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/wp-content/themes/kpi-kadence/assets/fonts/fira-sans-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Backstop: apply Fira Sans site-wide even if Kadence's dynamic typography lags a re-seed. */
body, .kpi, .kpi h1, .kpi h2, .kpi h3, .kpi h4, .kpi h5, .kpi h6,
.site-title, .entry-title, .entry-hero-container-inner .page-title{
  font-family:'Fira Sans', helvetica, arial, sans-serif;
}

:root{
  --kpi-amber: var(--global-palette1, #FF7F11);
  --kpi-mint:  var(--global-palette2, #A2E3C4);
  --kpi-pine:  var(--global-palette3, #2E3830);
  --kpi-dark:  var(--global-palette4, #200116);
  --kpi-pine-2:var(--global-palette5, #3A463D);
  --kpi-ink:   var(--global-palette6, #586459);
  --kpi-cream: var(--global-palette7, #F0F7F4);
  --kpi-off:   var(--global-palette8, #FCFFFC);
  --kpi-white: var(--global-palette9, #FFFFFF);
  --kpi-violet:var(--global-palette10, #9B287B);
  --kpi-amber-text:#AE5300;   /* WCAG-safe amber for small text on light */
  --kpi-blue:#0B66B8;
  --kpi-on-dark:#E4EAE6;      /* comfortable text on pine/dark */
  --kpi-cordovan:#984447;
  --kpi-light-orange:#FADAB7;
  /* THE LINE TOKEN. Every border, rule and divider uses this and nothing else.
     It existed and was documented as "visible on white and on cream" -- and then the
     cards, tables and lists all bordered themselves with --kpi-cream instead, which IS
     the background colour, so the lines were invisible by construction. Strengthened
     from #D7E0DA, which was still too faint to read as an edge. */
  --kpi-line:#C4D1C8;
  --kpi-line-soft:#DCE5DF;  /* only for rules INSIDE an already-bordered container */
}

/* ---- containers & rhythm -------------------------------------------------- */
.kpi{ color:var(--kpi-dark); overflow-x:clip; }
.kpi .wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
.kpi .wrap.narrow{ max-width:860px; }
.kpi > .hero,.kpi > .trip,.kpi > .reframe,.kpi > .loop,.kpi > .problems,
.kpi > .diag,.kpi > .diff,.kpi > .eos,.kpi > .testi,.kpi > .industries,
.kpi > .osbridge,.kpi > .faq,.kpi > .final,.kpi > .team{ width:100%; }
.kpi .reframe,.kpi .loop,.kpi .problems,.kpi .diff,.kpi .eos,
.kpi .industries,.kpi .faq,.kpi .val,.kpi .team{ padding:84px 0; }
.kpi .diag,.kpi .final{ padding:78px 0; }
/* .testi was missing from every padding rule, so the quote sat jammed against the bands
   above and below it. A pull quote needs air or it reads as a caption. */
.kpi .testi{ padding:76px 0 72px; }
.kpi h1,.kpi h2,.kpi h3,.kpi h4{ color:var(--kpi-pine); letter-spacing:-.01em; }
/* WIDOWS. One or two words wrapping alone onto a new line reads as unfinished, and it was
   happening all over the page. `balance` evens the lines of a short block (headings);
   `pretty` only protects the last line (body), which is what you want in long copy. */
.kpi :is(h1,h2,h3,h4){ text-wrap:balance; }
.kpi :is(p,li,figcaption,summary){ text-wrap:pretty; }
.kpi p{ line-height:1.75; }
.kpi a{ color:var(--kpi-violet); }
.kpi a:hover{ color:var(--kpi-amber-text); }

/* eyebrow / kicker / lede */
/* The eyebrow is a LABEL on the heading, not a separate paragraph, so it sits
   tight to it. Most of the old gap came from the heading's inherited top margin,
   not the eyebrow's bottom margin -- so reset both. */
.kpi .kpi-eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:.8rem; color:var(--kpi-amber-text); margin:0 0 6px; }
.kpi .kpi-eyebrow + :is(h1,h2,h3,h4){ margin-top:0; }
.kpi .kpi-eyebrow.is-light{ color:var(--kpi-mint); }
.kpi .lede{ font-size:1.18rem; color:var(--kpi-ink); }
.kpi .kpi-muted{ color:var(--kpi-ink); }

/* tone helpers */
.kpi .kpi-dark{ background:var(--kpi-pine); color:var(--kpi-on-dark); }
.kpi .kpi-dark :is(h1,h2,h3,h4){ color:#fff; }
.kpi .kpi-dark .lede,.kpi .kpi-dark p{ color:var(--kpi-on-dark); }
.kpi .kpi-mint{ background:var(--kpi-mint); color:var(--kpi-pine); }
.kpi .kpi-mint :is(h1,h2,h3,h4){ color:var(--kpi-pine); }
.kpi .kpi-cream{ background:var(--kpi-cream); }
.kpi .kpi-violet{ background:var(--kpi-violet); color:#fff; }
/* 🔴 The violet band had NO heading override, so `.kpi h1..h4{color:pine}` won and the
   heading rendered PINE ON VIOLET while the body copy was white. Nearly unreadable, and
   it looked like a mistake because it was one. Every tone needs its own heading rule. */
.kpi .kpi-violet :is(h1,h2,h3,h4){ color:#fff; }
.kpi .kpi-violet :is(p,.lede,.kpi-muted){ color:#fff; }
.kpi .kpi-violet .lede{ opacity:.92; }
.kpi .kpi-violet a:not(.wp-block-button__link){ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.kpi .kpi-violet a:hover{ color:var(--kpi-light-orange); }

/* section head (centered) */
.kpi .sec-head{ text-align:center; max-width:760px; margin:0 auto 52px; }
.kpi .sec-head .lede{ margin-top:14px; }
.kpi .h-section{ font-size:2.5rem; line-height:1.15; }
@media(max-width:640px){ .kpi .h-section{ font-size:2rem; } }

/* buttons */
/* text-decoration is !important so KPI buttons never inherit the post-content link underline
   (.entry-content a has higher specificity than .kpi .wp-block-button__link on single posts,
   which showed up when the Final CTA pattern was placed inside blog posts). */
.kpi .wp-block-button__link{ font-weight:700; border-radius:8px; padding:15px 30px; text-decoration:none !important; }
.kpi .kpi-btn-primary .wp-block-button__link{ background:var(--kpi-amber); color:var(--kpi-pine); }
.kpi .kpi-btn-primary .wp-block-button__link:hover{ background:var(--kpi-mint); color:var(--kpi-pine); }
.kpi .kpi-btn-secondary .wp-block-button__link{ background:var(--kpi-blue); color:#fff; }
.kpi .kpi-btn-secondary .wp-block-button__link:hover{ background:var(--kpi-amber); color:var(--kpi-pine); }
.kpi .kpi-btn-ghost .wp-block-button__link{ background:var(--kpi-pine); color:#fff; }
.kpi .kpi-btn-ghost .wp-block-button__link:hover{ background:var(--kpi-amber); color:var(--kpi-pine); }
/* On a dark band a 10%-white fill just reads as a grey slab sitting next to the real
   button. An outline reads as deliberately secondary. */
.kpi .kpi-dark .kpi-btn-ghost .wp-block-button__link{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.45); }
.kpi .kpi-dark .kpi-btn-ghost .wp-block-button__link:hover{ background:var(--kpi-amber); color:var(--kpi-pine); box-shadow:inset 0 0 0 2px var(--kpi-amber); }
/* --------------------------------------------------------------------------
 * Global default button: a plain button block (no KPI variant class) renders as the
 * KPI PRIMARY button ANYWHERE, including blog post content, which is not inside a .kpi
 * wrapper and would otherwise show the post-content link styles (underline + link colour)
 * and Kadence's default radius. Buttons carrying an explicit variant
 * (.kpi-btn-primary/secondary/ghost) are excluded and keep their own look, and explicit
 * editor colour choices (.has-background / .has-text-color) are respected.
 * -------------------------------------------------------------------------- */
.wp-block-button:not(.kpi-btn-primary):not(.kpi-btn-secondary):not(.kpi-btn-ghost) > .wp-block-button__link{
  font-weight:700; border-radius:8px !important; padding:15px 30px; border:none; text-decoration:none !important;
}
.wp-block-button:not(.kpi-btn-primary):not(.kpi-btn-secondary):not(.kpi-btn-ghost) > .wp-block-button__link:not(.has-background){
  background:var(--kpi-amber);
}
.wp-block-button:not(.kpi-btn-primary):not(.kpi-btn-secondary):not(.kpi-btn-ghost) > .wp-block-button__link:not(.has-background):hover{
  background:var(--kpi-mint);
}
.wp-block-button:not(.kpi-btn-primary):not(.kpi-btn-secondary):not(.kpi-btn-ghost) > .wp-block-button__link:not(.has-text-color){
  color:var(--kpi-pine) !important;
}

.kpi .dl{ text-decoration:none; }
.kpi .dl:hover{ text-decoration:underline; }

/* cards / pills */
.kpi .kpi-card{ background:#fff; border:1px solid var(--kpi-line); border-radius:14px; padding:30px 28px;
  box-shadow:0 1px 2px rgba(46,56,48,.05), 0 10px 24px -14px rgba(46,56,48,.22); }
.kpi .kpi-card.is-accent{ border-top:4px solid var(--kpi-amber); }
.kpi .kpi-pill{ display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--kpi-violet); background:var(--kpi-cream); padding:5px 12px; border-radius:20px; margin:14px 0 0; }

/* ---- hero ----------------------------------------------------------------- */
.kpi .hero{ padding:92px 0 96px; }
.kpi .hero .wrap{ max-width:920px; }
/* Cap the hero headline to a consistent measure so titles wrap into balanced 2-3 line
   blocks aligned with the lede, instead of long ones running the full section width and
   short ones breaking at random spots. text-wrap:balance evens the line lengths. */
.kpi .h-display{ font-size:3.35rem; line-height:1.1; color:#fff; max-width:860px; text-wrap:balance; }
@media(max-width:640px){ .kpi .h-display{ font-size:2.3rem; } }
.kpi .h-display .accent{ color:var(--kpi-mint); }
.kpi .hero .lede{ color:var(--kpi-on-dark); margin:24px 0 14px; max-width:760px; }
.kpi .hero .kicker{ color:var(--kpi-mint); font-weight:600; margin:0 0 30px; }
.kpi .hero .wp-block-buttons{ gap:16px; }

/* Sections butt up against each other: any block margin between them shows as a
   white sliver of page background between two colour bands.
   NOTE: Kadence wraps a group's children in .wp-block-group__inner-container, so
   the sections are NOT direct children of .kpi -- selecting .kpi > section misses
   them entirely. Target the sections themselves. */
.kpi section{ margin-top:0; margin-bottom:0; }
.kpi .wp-block-group__inner-container > section{ margin-top:0; margin-bottom:0; }

/* ---- trust strip ---------------------------------------------------------- */
.kpi .trip{ padding:26px 0; }
.kpi .trip .wrap{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; text-align:center; }
.kpi .trip-num{ font-size:1.6rem; font-weight:700; color:var(--kpi-pine); margin:0; }
.kpi .trip-txt{ color:var(--kpi-pine); font-weight:600; margin:0; max-width:760px; }

/* ---- pricing band --------------------------------------------------------
   The price was a bare number dropped into a mint bar with no treatment. It is now
   a deliberate price card.
   NOTE: .trip .wrap is already display:flex and Kadence nests TWO
   .wp-block-group__inner-container wrappers here, which squeezed the card to 584px
   and forced the row to wrap. So this stops fighting the flex row and centres the
   card instead. */
.kpi .trip.pricing{ padding:66px 0 70px; }
.kpi .trip.pricing .wrap{ display:block; }
.kpi .trip.pricing .wrap > .wp-block-group__inner-container{
  display:block; max-width:760px; margin:0 auto; text-align:center;
  background:#fff; border-radius:18px; border-top:4px solid var(--kpi-amber);
  box-shadow:0 18px 44px rgba(46,56,48,.14); padding:40px 46px;
}
.kpi .trip.pricing .trip-num{
  font-size:2.7rem; line-height:1.05; font-weight:700; color:var(--kpi-pine);
  margin:0 0 12px; padding:0; border:none; white-space:nowrap;
}
.kpi .trip.pricing .trip-txt{
  margin:0 auto; max-width:580px; color:var(--kpi-ink); font-weight:500;
  font-size:1.04rem; line-height:1.65; text-align:center;
}
@media(max-width:720px){
  .kpi .trip.pricing{ padding:46px 0 50px; }
  .kpi .trip.pricing .wrap > .wp-block-group__inner-container{ padding:30px 24px; }
  .kpi .trip.pricing .trip-num{ font-size:2.1rem; }
}

/* ---- reframe -------------------------------------------------------------- */
.kpi .reframe .wrap{ text-align:center; }
.kpi .reframe .h-section{ font-size:2.7rem; }
.kpi .reframe .nope{ color:var(--kpi-amber-text); }
.kpi .reframe p:not(.kpi-eyebrow){ font-size:1.2rem; color:var(--kpi-pine); margin-top:20px; }

/* ---- the loop ------------------------------------------------------------- */
.kpi .loop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:900px){ .kpi .loop-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .kpi .loop-grid{ grid-template-columns:1fr; } }
.kpi .loopstep .stage{ font-weight:700; color:var(--kpi-amber-text); font-size:.82rem; letter-spacing:.12em; margin:0; }
.kpi .loopstep :is(h3,h4){ font-size:1.3rem; margin:8px 0 10px; }
.kpi .loop-note{ text-align:center; margin-top:34px; font-size:1.18rem; font-weight:600; color:var(--kpi-pine); }
.kpi .loop-note span{ color:var(--kpi-amber-text); }
/* Service links inside the What We Do framework cards: one tidy stack directly under the
   copy. NOT bottom-pinned per line -- that split multi-link cards apart and left holes. */
.kpi .loopstep .svc-links{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.kpi .loopstep .svc-links li{ margin:0; padding:0; }
.kpi .loopstep .svc-links a{ display:inline-block; font-weight:600; font-size:.98rem; color:var(--kpi-cordovan); text-decoration:none; }
.kpi .loopstep .svc-links a::after{ content:" \2192"; color:var(--kpi-amber-text); font-weight:700; }
.kpi .loopstep .svc-links a:hover{ color:var(--kpi-violet); text-decoration:underline; }

/* ---- problem cards -------------------------------------------------------- */
.kpi .card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:900px){ .kpi .card-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .kpi .card-grid{ grid-template-columns:1fr; } }
.kpi .pcard .quote{ font-size:1.24rem; font-weight:600; color:var(--kpi-pine); line-height:1.3; margin:0 0 10px; }
.kpi .pcard .quote::before{ content:"\201C"; color:var(--kpi-amber); font-size:1.3em; line-height:0; vertical-align:-.25em; margin-right:2px; }
.kpi .pcard .fix{ display:inline-block; margin-top:16px; font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--kpi-violet); }

/* ---- diagnostic band ------------------------------------------------------ */
.kpi .diag-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center; }
@media(max-width:820px){ .kpi .diag-grid{ grid-template-columns:1fr; } }
.kpi .diag .h-section{ font-size:2.6rem; }
.kpi .diag .lede{ color:var(--kpi-pine); margin:16px 0 24px; }
.kpi .diag .fine{ font-size:.96rem; color:var(--kpi-pine); opacity:.8; margin-top:16px; }
.kpi .d-card{ border-radius:16px; box-shadow:0 16px 40px rgba(46,56,48,.12); }
.kpi .d-head{ font-size:.95rem; text-transform:uppercase; letter-spacing:.08em; color:var(--kpi-violet); font-weight:700; margin:0 0 12px; }
.kpi .d-list{ list-style:none; margin:0; padding:0; }
.kpi .d-list li{ padding:12px 0 12px 30px; position:relative; border-bottom:1px solid var(--kpi-line); color:var(--kpi-pine); }
.kpi .d-list li:last-child{ border-bottom:none; }
.kpi .d-list li::before{ content:"\2713"; position:absolute; left:0; top:12px; color:var(--kpi-amber); font-weight:700; }

/* ---- the difference (dark, 2 col) ---------------------------------------- */
.kpi .compare{ gap:24px; max-width:920px; margin:0 auto; }
.kpi .col{ border-radius:14px; padding:32px 30px; }
.kpi .col.them{ background:rgba(255,255,255,.07); }
.kpi .col.them h3{ color:var(--kpi-on-dark); }
.kpi .col.us{ background:var(--kpi-mint); }
.kpi .col.us h3{ color:var(--kpi-pine); }
.kpi .col ul{ list-style:none; margin:16px 0 0; padding:0; }
.kpi .col li{ padding:9px 0 9px 30px; position:relative; font-size:1.04rem; }
.kpi .col.them li{ color:var(--kpi-on-dark); }
.kpi .col.them li::before{ content:"\2715"; position:absolute; left:0; color:#D97A7A; font-weight:700; }
.kpi .col.us li{ color:var(--kpi-pine); }
.kpi .col.us li::before{ content:"\2713"; position:absolute; left:0; color:var(--kpi-violet); font-weight:700; }

/* ---- EOS ------------------------------------------------------------------ */
.kpi .eos-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
@media(max-width:820px){ .kpi .eos-grid{ grid-template-columns:1fr; } }
.kpi .eos .h-section{ font-size:2.3rem; }
.kpi .eos-badge{ background:var(--kpi-pine); border-radius:16px; padding:44px; text-align:center; }
.kpi .eos-badge .mark{ font-size:3.4rem; font-weight:700; color:var(--kpi-mint); line-height:1; margin:0; }
.kpi .eos-badge p{ color:var(--kpi-on-dark); margin-top:14px; }

/* ---- testimonial ---------------------------------------------------------- */
.kpi .testi .wrap{ text-align:center; }
.kpi .kpi-quote{ border:none; margin:0; }
.kpi .kpi-quote p{ font-size:1.6rem; font-weight:600; line-height:1.4; color:#fff; max-width:900px; margin-left:auto; margin-right:auto; }
.kpi .kpi-quote cite{ display:block; margin-top:26px; font-style:normal; font-weight:700; font-size:.95rem; letter-spacing:.02em; color:var(--kpi-light-orange); }

/* ---- industries ----------------------------------------------------------- */
.kpi .ind-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:820px){ .kpi .ind-grid{ grid-template-columns:1fr; } }
.kpi .icard{ border-left:5px solid var(--kpi-mint); }
.kpi .icard :is(h3,h4){ font-size:1.3rem; margin:0 0 10px; }

/* ---- KPI OS aside --------------------------------------------------------- */
.kpi .osbridge{ padding:56px 0; }
.kpi .osbridge .wrap{ text-align:center; }
.kpi .os-eye{ color:var(--kpi-violet); }
.kpi .os-h{ font-size:1.72rem; color:var(--kpi-pine); }
.kpi .osbridge p{ font-size:1.1rem; margin-top:14px; }

/* ---- FAQ (native details) ------------------------------------------------- */
/* 🔴 The divider was `1px solid var(--kpi-line)` and the FAQ section's own background is
   ALSO cream, so the line was invisible and the questions read as a flat list. Use a real
   rule, and close the top of the first row so the group reads as a bounded block. */
.kpi .kpi-faq{ border-bottom:1px solid var(--kpi-line); padding:22px 4px; transition:background .15s ease; }
.kpi .kpi-faq:first-of-type{ border-top:1px solid var(--kpi-line); }
.kpi .kpi-faq:hover{ background:rgba(46,56,48,.03); }
.kpi .kpi-faq[open]{ background:rgba(46,56,48,.03); }
.kpi .kpi-faq summary{ font-weight:600; font-size:1.16rem; color:var(--kpi-pine); cursor:pointer; list-style:none; position:relative; padding-right:36px; }
.kpi .kpi-faq summary::-webkit-details-marker{ display:none; }
.kpi .kpi-faq summary::after{ content:"+"; position:absolute; right:0; top:-2px; color:var(--kpi-amber-text); font-size:1.6rem; font-weight:700; }
.kpi .kpi-faq[open] summary::after{ content:"\2212"; }
.kpi .kpi-faq p{ color:var(--kpi-ink); margin-top:12px; }

/* ---- proofline: the contextual link out to /results/ and the other orphans ----
   A quiet closing sentence, NOT another banner. It sits between the page and the CTA, so
   it must not compete with it. Its whole job is to be an editorial body link -- the kind
   that actually carries signal, unlike a nav or footer link that appears on every page. */
.kpi .proofline{ padding:44px 0 52px; text-align:center; }
.kpi .proofline-p{ color:var(--kpi-ink); font-size:1.02rem; margin:0; }
.kpi .proofline-p a{ font-weight:700; color:var(--kpi-violet); text-decoration:none;
  border-bottom:2px solid var(--kpi-violet); padding-bottom:1px; }
.kpi .proofline-p a:hover{ color:var(--kpi-amber-text); border-bottom-color:var(--kpi-amber-text); }
/* On a light band it reads fine; after a violet osbridge it needs the page ground back. */
.kpi .proofline{ background:var(--kpi-off, #FCFFFC); }

/* ---- final CTA ------------------------------------------------------------ */
.kpi .final .wrap{ text-align:center; }
.kpi .final .h-section{ color:#fff; }
.kpi .final .lede{ margin:20px auto 30px; max-width:620px; }
.kpi .final .wp-block-buttons{ justify-content:center; }
.kpi .reframe .wp-block-buttons,.kpi .osbridge .wp-block-buttons{ justify-content:center; }

/* ---- 🔴 KADENCE SOMETIMES NESTS *TWO* INNER-CONTAINERS -----------------------
   Every grid rule below targets `.owner > .wp-block-group__inner-container`. When Kadence
   emits a second wrapper inside the first, that selector lands on a container whose ONLY
   child is the other wrapper. The grid then lays out ONE item across N tracks: everything
   crams into column 1 and the remaining columns are dead whitespace. That is exactly what
   Jeff spotted on /about/ and /fractional-integrator/, and a sweep found it on /partners/,
   /scorecard-workshop/ and /start/ too.

   `display:contents` dissolves the redundant wrapper so its children become direct grid
   items of the grid above. One line, and it works for EVERY grid owner regardless of that
   grid's own column template -- which hand-patching ten selectors would not.
   Safe here: these are bare layout divs with no semantic role to remove from the a11y tree.

   ⚠️ Any NEW grid class must be added to this list, or it will silently break the same way. */
.kpi :is(.bio-grid,.card-grid,.contact-grid,.diag-grid,.eos-grid,.ind-grid,.loop-grid,
         .res-grid,.val-grid,.embed-wrap)
  > .wp-block-group__inner-container
  > .wp-block-group__inner-container:only-child{ display:contents; }

/* ---- Kadence wraps a group's inner blocks in .wp-block-group__inner-container, so the grid
   must live on that wrapper (the cards are one level deeper than the class). -- */
.kpi .loop-grid,.kpi .card-grid,.kpi .ind-grid,.kpi .diag-grid,.kpi .eos-grid{ display:block; }
.kpi .loop-grid > .wp-block-group__inner-container{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.kpi .card-grid > .wp-block-group__inner-container{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* ---- grids fit the number of cards they actually hold ----------------------
   Jeff's rule: a row is either full, or the odd count is centred. Never a hole.
   A 3-column grid holding 2 cards, or a 2-column grid holding 3, leaves a gap on the
   right and reads as broken.

   Let CSS COUNT the cards rather than tagging each page with a modifier class -- a class
   someone must remember to add is a class someone will forget. `:has(> :nth-child(N):last-child)`
   matches a container whose Nth child is also its last, i.e. that holds exactly N. */
/* ⚠️ These count-based rules use :has(), whose specificity (it inherits the argument's)
   OUTRANKS the single-column mobile overrides below. A media query adds no specificity, so
   an un-gated :has() rule wins at EVERY width and the grid never collapses on a phone (that
   is exactly what stranded the 3-card "How it works" row at 3-up on mobile). Each rule is
   therefore gated to min-width AT its own collapse breakpoint, so below it the plain mobile
   1-col rule is the most specific one that applies. */
@media(min-width:601px){
  .kpi .card-grid.two > .wp-block-group__inner-container,
  .kpi .card-grid > .wp-block-group__inner-container:has(> :nth-child(2):last-child){
    grid-template-columns:repeat(2,1fr); max-width:860px; margin:0 auto; }
}
/* .res-grid is 2-up by default (the 4-card chain is a 2x2). Exactly 3 cards -> 3-up. */
@media(min-width:701px){
  .kpi .res-grid > .wp-block-group__inner-container:has(> :nth-child(3):last-child){
    grid-template-columns:repeat(3,1fr); }
}
/* loop-grid is 4-up by default (the chain has 4 steps). Exactly 3 cards (e.g. the "How it
   works" row) -> 3-up and centred, so they do not sit left with an empty 4th column. */
@media(min-width:561px){
  .kpi .loop-grid > .wp-block-group__inner-container:has(> :nth-child(3):last-child){
    grid-template-columns:repeat(3,1fr); max-width:1000px; margin:0 auto; }
}
/* (Card height + CTA baseline are handled once, structurally, in the uniform-cards block
   below. Do not add per-class pins here: that is what kept rotting.) */
.kpi .ind-grid > .wp-block-group__inner-container{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.kpi .diag-grid > .wp-block-group__inner-container{ display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center; }
.kpi .eos-grid > .wp-block-group__inner-container{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.kpi .trip .wrap > .wp-block-group__inner-container{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
@media(max-width:900px){ .kpi .loop-grid > .wp-block-group__inner-container,.kpi .card-grid > .wp-block-group__inner-container{ grid-template-columns:1fr 1fr; } }
@media(max-width:820px){ .kpi .diag-grid > .wp-block-group__inner-container,.kpi .eos-grid > .wp-block-group__inner-container,.kpi .ind-grid > .wp-block-group__inner-container{ grid-template-columns:1fr; } }
@media(max-width:600px){ .kpi .card-grid > .wp-block-group__inner-container{ grid-template-columns:1fr; } }
@media(max-width:560px){ .kpi .loop-grid > .wp-block-group__inner-container{ grid-template-columns:1fr; } }

/* ---- uniform cards: equal height + pills/CTAs pinned to a shared baseline -- */
/* Cards in a row must be the same height and their CTAs must sit on ONE horizontal line.
   This kept breaking because the pin was written per-CLASS (.loopstep .kpi-pill,
   .pcard .fix, .rcard .dl), so any card whose trailing element used a different class was
   silently left unpinned and its link floated wherever the copy happened to end.
   .rcard .dl was worse than unpinned: .dl is the <a> INSIDE a <p>, so it is not the flex
   child at all and margin-top:auto on it did precisely nothing.

   So: pin STRUCTURALLY, on the trailing element of the card.

   ⚠️ But NOT every trailing element. `margin-top:auto` puts the free space ABOVE the
   element, so blanket-pinning the last child would shove the closing PARAGRAPH of a
   link-less card to the bottom and tear a hole in the middle of the copy. Pin only when
   the trailing element is an ACTION: a button row, a pill, a label, or a paragraph that
   actually contains a link. */
.kpi .kpi-card{ display:flex; height:100%; }
.kpi .kpi-card > .wp-block-group__inner-container{ display:flex; flex-direction:column; flex:1 1 auto; width:100%; }
.kpi .kpi-card > .wp-block-group__inner-container > :last-child:is(.wp-block-buttons,.kpi-pill,.fix){ margin-top:auto; align-self:flex-start; }
.kpi .kpi-card > .wp-block-group__inner-container > p:last-child:has(a){ margin-top:auto; padding-top:18px; margin-bottom:0; }

/* ---- header primary-nav CTA button (Kadence menu item .kpi-nav-cta) ------- */
.kpi-nav-cta > a{ background:var(--kpi-amber,#FF7F11); color:var(--kpi-pine,#2E3830)!important; border-radius:8px!important; padding:9px 20px!important; font-weight:700; }
.kpi-nav-cta > a:hover{ background:var(--kpi-mint,#A2E3C4)!important; color:var(--kpi-pine,#2E3830)!important; }

/* logo image already includes the wordmark: hide the redundant header title */
.site-branding .site-title{ display:none; }

/* ---- inner-page helpers (COO / Integrator / About) ----------------------- */
.kpi .val-grid > .wp-block-group__inner-container{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:900px){ .kpi .val-grid > .wp-block-group__inner-container{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .kpi .val-grid > .wp-block-group__inner-container{ grid-template-columns:1fr; } }
.kpi .vs .kpi-card.is-kpi{ background:var(--kpi-mint); border-color:var(--kpi-mint); }
.kpi .vs .kpi-card h3{ font-size:1.3rem; margin-bottom:14px; }
.kpi .vs .kpi-card ul{ list-style:none; margin:0; padding:0; }
.kpi .vs .kpi-card li{ padding:8px 0 8px 26px; position:relative; color:var(--kpi-ink); }
.kpi .vs .kpi-card.is-kpi li{ color:var(--kpi-pine); }
.kpi .vs .kpi-card li::before{ content:"\2013"; position:absolute; left:0; color:var(--kpi-ink); }
.kpi .vs .kpi-card.is-kpi li::before{ content:"\2713"; color:var(--kpi-violet); font-weight:700; }
.kpi .pricing .h-section{ color:var(--kpi-pine); }
.kpi .val .kpi-card :is(h3,h4){ color:var(--kpi-violet); font-size:1.15rem; margin-bottom:8px; }
.kpi .bio-grid > .wp-block-group__inner-container{ display:grid; grid-template-columns:.9fr 1.6fr; gap:44px; align-items:center; }
@media(max-width:820px){ .kpi .bio-grid > .wp-block-group__inner-container{ grid-template-columns:1fr; } }
.kpi .contact-grid > .wp-block-group__inner-container{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media(max-width:820px){ .kpi .contact-grid > .wp-block-group__inner-container{ grid-template-columns:1fr; } }

/* ---- final CTA (synced pattern) -------------------------------------------
   The CTA used to be pine, the same colour as the footer, so the conversion moment
   dissolved straight into it. It is now a MINT band: the brightest thing on the
   page, and unmistakably separate from the dark footer below it. */
.kpi .final.kpi-mint{ padding:86px 0 90px; }
.kpi .final.kpi-mint .h-section{ color:var(--kpi-pine); }
.kpi .final.kpi-mint .lede{ color:var(--kpi-pine); opacity:.85; }
.kpi .final.kpi-mint .wp-block-buttons{ gap:14px; margin-top:30px; }
/* ghost button needs to read on mint, not on pine */
.kpi .final.kpi-mint .kpi-btn-ghost .wp-block-button__link{ background:var(--kpi-pine); color:#fff; }
.kpi .final.kpi-mint .kpi-btn-ghost .wp-block-button__link:hover{ background:var(--kpi-amber); color:var(--kpi-pine); }

/* On any MINT band the primary's default hover (-> mint) would dissolve into the band.
   Send it to pine instead so the hover stays visible. Applies to every kpi-mint section
   (final and diag), not just partners. */
.kpi .kpi-mint .kpi-btn-primary .wp-block-button__link:hover{ background:var(--kpi-pine); color:#fff; }

/* ==========================================================================
   ORPHAN PAGE REBUILDS — embeds, download/offer pages, thank-yous, legal.
   ========================================================================== */

/* ---- booking / form embeds (hydrated from data-src by kpi-embed.js) ------ */
.kpi .kpi-embed{
  background:#fff; border:1px solid var(--kpi-line); border-radius:14px;
  overflow:hidden; min-height:520px; position:relative;
}
.kpi .kpi-embed:not(.is-loaded)::after{
  content:"Loading…"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; color:var(--kpi-ink); font-size:.95rem;
}
.kpi .kpi-embed iframe{ display:block; width:100%; border:0; }
.kpi .embed-wrap > .wp-block-group__inner-container{
  display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:start;
}
@media(max-width:900px){ .kpi .embed-wrap > .wp-block-group__inner-container{ grid-template-columns:1fr; } }

/* ---- offer / download pages --------------------------------------------- */
.kpi .offer .wrap{ max-width:820px; }
.kpi .offer .lede{ font-size:1.2rem; }
.kpi .dl-card{
  background:#fff; border:1px solid var(--kpi-line); border-top:4px solid var(--kpi-amber);
  border-radius:16px; padding:38px 36px; box-shadow:0 14px 34px rgba(46,56,48,.08);
  text-align:center;
}
.kpi .dl-card h2{ font-size:1.6rem; margin:0 0 12px; }
.kpi .dl-card p{ color:var(--kpi-ink); margin:0 0 24px; }
.kpi .dl-card .wp-block-buttons{ justify-content:center; }
.kpi .dl-note{ text-align:center; color:var(--kpi-ink); font-size:.95rem; margin-top:18px; }

/* what you get: a simple checked list */
.kpi .gets{ list-style:none; margin:26px 0 0; padding:0; }
.kpi .gets li{ padding:11px 0 11px 32px; position:relative; color:var(--kpi-pine); border-bottom:1px solid var(--kpi-line); }
.kpi .gets li:last-child{ border-bottom:none; }
.kpi .gets li::before{ content:"\2713"; position:absolute; left:0; top:11px; color:var(--kpi-amber); font-weight:700; }
.kpi .kpi-mint .gets li,.kpi .kpi-dark .gets li{ border-bottom-color:rgba(46,56,48,.12); }
.kpi .kpi-dark .gets li{ color:var(--kpi-on-dark); border-bottom-color:rgba(226,234,230,.16); }

/* ---- checklist grid (readiness / process lists) ------------------------- */
.kpi .kpi-check{ list-style:none; margin:34px auto 6px; padding:0; max-width:780px;
  display:grid; grid-template-columns:1fr 1fr; gap:18px 46px; text-align:left; }
@media(max-width:640px){ .kpi .kpi-check{ grid-template-columns:1fr; max-width:500px; } }
.kpi .kpi-check li{ position:relative; padding:2px 0 2px 42px; color:var(--kpi-pine);
  font-size:1.06rem; line-height:1.45; min-height:28px; display:flex; align-items:center; }
.kpi .kpi-check li::before{ content:"\2713"; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:27px; height:27px; border-radius:50%; background:var(--kpi-mint); color:var(--kpi-pine);
  display:flex; align-items:center; justify-content:center; font-size:.86rem; font-weight:800; }
.kpi .kpi-dark .kpi-check li{ color:var(--kpi-on-dark); }

/* ---- partner resource cards --------------------------------------------- */
.kpi .res-grid > .wp-block-group__inner-container{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media(max-width:700px){ .kpi .res-grid > .wp-block-group__inner-container{ grid-template-columns:1fr; } }
.kpi .rcard{ display:flex; height:100%; }
.kpi .rcard > .wp-block-group__inner-container{ display:flex; flex-direction:column; flex:1; }
.kpi .rcard :is(h3,h4){ font-size:1.12rem; margin:0 0 8px; }
/* .dl is the <a> INSIDE a <p>, so it is NOT the flex child: margin-top:auto here did
   nothing at all, which is why these links never lined up. The baseline is now pinned on
   the wrapping <p> in the uniform-cards block. Style only, here. */
.kpi .rcard .dl{ font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--kpi-amber-text); text-decoration:none; }
.kpi .rcard .dl:hover{ color:var(--kpi-violet); }

/* ---- thank-you pages ----------------------------------------------------- */
.kpi .ty{ padding:96px 0; }
.kpi .ty .wrap{ max-width:720px; text-align:center; }
.kpi .ty .tick{
  width:66px; height:66px; margin:0 auto 24px; border-radius:50%;
  background:var(--kpi-mint); color:var(--kpi-pine);
  display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700;
}
.kpi .ty .lede{ margin:16px auto 30px; }
.kpi .ty .wp-block-buttons{ justify-content:center; }

/* ---- legal pages: restyled, never reworded ------------------------------- */
.kpi .legal{ padding:64px 0 88px; }
.kpi .legal .wrap{ max-width:820px; }
.kpi .legal p,.kpi .legal li{ color:var(--kpi-dark); line-height:1.8; }
.kpi .legal :is(h2,h3,h4){ margin-top:1.8em; }
.kpi .legal h2{ font-size:1.7rem; }
.kpi .legal h3{ font-size:1.28rem; }
.kpi .legal a{ color:var(--kpi-violet); text-decoration:underline; text-underline-offset:3px; }
.kpi .legal :is(ul,ol){ padding-left:1.3em; }
.kpi .legal li{ margin-bottom:.5em; }
.kpi .legal li::marker{ color:var(--kpi-amber); }
.kpi .legal table{ width:100%; border-collapse:collapse; margin:1.4em 0; }
.kpi .legal :is(td,th){ border:1px solid var(--kpi-line); padding:10px 12px; text-align:left; }

/* the calculator plugin's form (Calculated Fields Form), made to sit inside the brand.
   Its own markup: .cff-form / .fform / .cff-form-title / .cff-form-description */
.kpi .calc{ background:#fff; border:1px solid var(--kpi-line); border-radius:16px; padding:34px 32px; }
@media(max-width:560px){ .kpi .calc{ padding:24px 18px; } }
.kpi .calc .cff-form-title{ color:var(--kpi-pine); font-size:1.55rem; font-weight:600; margin:0 0 6px; }
.kpi .calc .cff-form-description{ color:var(--kpi-ink); font-size:1rem; margin:0 0 26px; }
.kpi .calc .fform label{ color:var(--kpi-pine); }
.kpi .calc .fform input[type="text"],
.kpi .calc .fform input[type="email"],
.kpi .calc .fform input[type="number"]{
  border:1px solid var(--kpi-ash,#B3BFB8); border-radius:8px; padding:11px 13px; color:var(--kpi-dark);
}
.kpi .calc .fform input[type="text"]:focus,
.kpi .calc .fform input[type="email"]:focus{ outline:2px solid var(--kpi-amber); outline-offset:1px; }
/* the plugin ships its own submit styling; the brand's primary action is amber on pine */
.kpi .calc input[type="submit"],
.kpi .calc button[type="submit"],
.kpi .calc .cff-button-field{
  background:var(--kpi-amber)!important; color:var(--kpi-pine)!important;
  border:0!important; border-radius:8px!important; padding:14px 30px!important;
  font-weight:700!important; cursor:pointer;
}
.kpi .calc input[type="submit"]:hover,
.kpi .calc button[type="submit"]:hover,
.kpi .calc .cff-button-field:hover{ background:var(--kpi-mint)!important; color:var(--kpi-pine)!important; }

/* ==========================================================================
   BLOG — archive (/blog/) + single post.
   Post content is NOT inside the .kpi wrapper (it comes from the editor), so
   these rules target Kadence's own classes. Layout/columns stay Kadence's;
   we own the skin.
   ========================================================================== */

/* ---- hero (shared by the archive and single posts) ----------------------- */
.post-archive-hero-section .entry-hero-container-inner,
.post-hero-section .entry-hero-container-inner{ background:var(--kpi-pine); }
.post-archive-hero-section .page-title,
.post-hero-section .entry-title{ color:#fff; letter-spacing:-.01em; }
.post-archive-hero-section .archive-description{ max-width:720px; margin:14px auto 0; }
.post-archive-hero-section .archive-description p{ color:var(--kpi-on-dark); font-size:1.14rem; line-height:1.65; margin:0; }
.post-hero-section .entry-taxonomies a{ color:var(--kpi-mint); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; }
.post-hero-section .entry-meta{ color:var(--kpi-on-dark); }
/* left-align the archive hero title to match the .h-display page heroes */
.post-archive-hero-section .entry-header,
.post-archive-hero-section .entry-header.title-align-center{ text-align:left; }
.post-archive-hero-section .entry-header .page-title{ line-height:1.1; margin-left:0; margin-right:auto; max-width:860px; text-wrap:balance; }
.post-archive-hero-section .archive-description{ margin-left:0; }
.post-archive-hero-section .page-title .accent{ color:var(--kpi-mint); }
/* match the .kpi .hero: an eyebrow above the H1, and top-aligned 92px padding instead of
   Kadence's vertical-centering (which put the H1 higher than every other page's hero) */
.post-archive-hero-section .entry-hero-container-inner{ min-height:0 !important; padding:69px 0 96px !important; display:block !important; }
.post-archive-hero-section .entry-header .page-title::before{ content:"Written from the work"; display:block; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--kpi-mint); margin:0 0 10px; }

/* ---- archive: "browse by topic" + category nav ---------------------------
   The lede moved INTO the dark hero (see .archive-description above), so this block
   is just the subheader and the chips, sitting tight above the grid. */
.kpi-archive-intro{ max-width:1180px; margin:-56px auto 0; padding:16px 28px 4px; text-align:center; }
.kpi-browse{
  font-size:1.05rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--kpi-ink); margin:0 0 18px;
}
.kpi-cat-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.kpi-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px; text-decoration:none;
  background:#fff; border:1px solid var(--kpi-line);
  color:var(--kpi-pine); font-weight:600; font-size:.92rem;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.kpi-chip .n{
  font-size:.76rem; font-weight:700; color:var(--kpi-ink);
  background:var(--kpi-cream); border-radius:999px; padding:2px 7px; min-width:22px; text-align:center;
}
.kpi-chip:hover{ border-color:var(--kpi-mint); background:var(--kpi-cream); color:var(--kpi-pine); }
.kpi-chip.is-active{ background:var(--kpi-pine); border-color:var(--kpi-pine); color:#fff; }
.kpi-chip.is-active .n{ background:rgba(255,255,255,.16); color:#fff; }
@media(max-width:640px){
  .kpi-archive-intro{ padding:30px 20px 4px; }
  .kpi-cat-nav{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; }
  .kpi-chip{ white-space:nowrap; }
}

/* ---- archive: card grid on a cream page --------------------------------- */
.post-archive{ padding-top:8px; }
/* NOTE: Kadence renders .post-thumbnail as a SIBLING of .entry-content-wrap
   (both children of article.loop-entry), so the card must be a flex COLUMN or
   the image lands beside the text instead of above it. */
.loop-entry.type-post{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--kpi-line); border-radius:14px;
  overflow:hidden; box-shadow:0 2px 0 rgba(46,56,48,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.loop-entry.type-post:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(46,56,48,.12); border-color:var(--kpi-mint); }
/* padding lives on the wrapper so the image stays flush to the card's top corners */
.loop-entry.type-post > .entry-content-wrap{
  display:flex; flex-direction:column; flex:1 1 auto; width:100%; padding:24px 26px 26px;
}

/* Square thumbnails. Kadence's ratio is HEIGHT-to-WIDTH, so the old "3-2" was
   150% padding-bottom -- a TALL portrait crop. That is what made these look
   stretched. Seeded as "1-1" now; the 4-column grid puts the square near 250x250. */
.loop-entry.type-post .post-thumbnail{ margin:0; border-bottom:1px solid var(--kpi-line); }
.loop-entry.type-post .post-thumbnail img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.loop-entry.type-post:hover .post-thumbnail img{ transform:scale(1.04); }

.loop-entry.type-post .entry-taxonomies{ margin-top:0; }
.loop-entry.type-post .entry-taxonomies a{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--kpi-violet); text-decoration:none;
}
.loop-entry.type-post .entry-taxonomies a:hover{ color:var(--kpi-amber-text); }
.loop-entry.type-post .entry-title{ margin:10px 0 0; }
.loop-entry.type-post .entry-title a{ color:var(--kpi-pine); text-decoration:none; }
.loop-entry.type-post .entry-title a:hover{ color:var(--kpi-amber-text); }
.loop-entry.type-post .entry-meta{ margin-top:8px; font-size:.85rem; color:var(--kpi-ink); }
.loop-entry.type-post .entry-summary{ margin-top:12px; }
.loop-entry.type-post .entry-summary p{ color:var(--kpi-ink); font-size:.98rem; line-height:1.65; margin:0; }

/* Read-more pinned to a shared baseline so a row of cards lines up.
   NOTE: the read-more (.entry-actions) is nested INSIDE .entry-footer, and it is
   .entry-footer that is the direct child of the flex column. margin-top:auto on
   .entry-actions therefore did nothing -- it has to go on the footer. */
.loop-entry.type-post .entry-footer{ margin-top:auto; padding-top:20px; }
.loop-entry.type-post .entry-actions{ margin-top:0; }
.loop-entry.type-post .post-more-link,
.loop-entry.type-post .entry-actions a{
  display:inline-block; font-weight:700; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--kpi-amber-text); text-decoration:none;
}
/* no ::after arrow here -- Kadence already renders one in the read-more link,
   and adding ours produced a double arrow ("Read the post -> ->"). */
.loop-entry.type-post .entry-actions a:hover{ color:var(--kpi-violet); }

/* pagination */
.post-archive .pagination .page-numbers{ color:var(--kpi-pine); border-radius:8px; }
.post-archive .pagination .page-numbers.current{ background:var(--kpi-pine); color:#fff; }
.post-archive .pagination a.page-numbers:hover{ background:var(--kpi-mint); color:var(--kpi-pine); }

/* ---- single post: readable measure, branded typography ------------------ */
.single-post .entry-content-wrap .post-thumbnail{ border-radius:14px; overflow:hidden; margin-bottom:8px; }
.single-post .entry-content{ font-size:1.12rem; line-height:1.8; color:var(--kpi-dark); }
.single-post .entry-content > * + *{ margin-top:1.35em; }
.single-post .entry-content :is(h2,h3,h4){ color:var(--kpi-pine); letter-spacing:-.01em; }
.single-post .entry-content h2{ font-size:1.95rem; margin-top:2em; }
.single-post .entry-content h3{ font-size:1.45rem; margin-top:1.6em; }
.single-post .entry-content a{ color:var(--kpi-violet); text-decoration:underline; text-underline-offset:3px; }
.single-post .entry-content a:hover{ color:var(--kpi-amber-text); }
.single-post .entry-content :is(ul,ol){ padding-left:1.3em; }
.single-post .entry-content li{ margin-bottom:.6em; }
.single-post .entry-content li::marker{ color:var(--kpi-amber); }
.single-post .entry-content img{ border-radius:12px; }
.single-post .entry-content blockquote{
  border-left:4px solid var(--kpi-amber); background:var(--kpi-cream);
  margin:2em 0; padding:22px 26px; border-radius:0 12px 12px 0;
}
.single-post .entry-content blockquote p{ font-size:1.2rem; font-weight:600; color:var(--kpi-pine); margin:0; }

/* ---- the SERVICE LINK: the spoke pointing back up at its hub -------------------
   Sits between the article and the Performance Score CTA. Deliberately QUIET -- a bordered
   aside, not a second banner -- because it is a link to the next page, not a request for a
   commitment, and two loud CTAs in a row cancel each other out.
   Scoped to .single-post .entry-content for the same reason as the CTA below: the generic
   post-content rules (a -> violet + underline) out-specify a bare class. */
.single-post .entry-content .kpi-service-link{
  margin:52px 0 0; padding:26px 28px; border-radius:14px;
  background:var(--kpi-cream); border-left:4px solid var(--kpi-amber);
}
.single-post .entry-content .kpi-service-link__eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:.74rem;
  color:var(--kpi-amber-text); margin:0 0 8px;
}
.single-post .entry-content .kpi-service-link__body{
  color:var(--kpi-pine); margin:0; font-size:1.02rem; line-height:1.6;
}
.single-post .entry-content .kpi-service-link__action{ margin:14px 0 0; }
.single-post .entry-content .kpi-service-link__action a{
  font-weight:700; color:var(--kpi-violet); text-decoration:none;
  border-bottom:2px solid var(--kpi-violet); padding-bottom:1px;
}
.single-post .entry-content .kpi-service-link__action a:hover{
  color:var(--kpi-amber-text); border-bottom-color:var(--kpi-amber-text);
}

/* End-of-post CTA (appended via the_content, so it lives INSIDE .entry-content).
   These selectors are scoped to .single-post .entry-content on purpose: the
   generic post-content rules above (h2 -> pine, a -> violet+underline) are more
   specific than a bare .kpi-post-cta__* class and would otherwise paint the
   heading pine-on-pine and re-underline the button. */
.single-post .entry-content .kpi-post-cta{
  margin:56px 0 0; padding:40px 38px; border-radius:16px;
  background:var(--kpi-pine); text-align:center;
}
.single-post .entry-content .kpi-post-cta__eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:.78rem;
  color:var(--kpi-mint); margin:0 0 12px;
}
.single-post .entry-content .kpi-post-cta__title{
  color:#fff; font-size:1.75rem; line-height:1.25; margin:0;
}
.single-post .entry-content .kpi-post-cta__body{
  color:var(--kpi-on-dark); margin:14px auto 26px; max-width:520px; font-size:1.05rem;
}
.single-post .entry-content .kpi-post-cta__action{ margin:14px 0 0; }
.single-post .entry-content .kpi-post-cta__btn{
  display:inline-block; background:var(--kpi-amber); color:var(--kpi-pine);
  font-weight:700; padding:15px 30px; border-radius:8px; text-decoration:none;
}
.single-post .entry-content .kpi-post-cta__btn:hover{ background:var(--kpi-mint); color:var(--kpi-pine); }
@media(max-width:560px){
  .single-post .entry-content .kpi-post-cta{ padding:32px 24px; }
  .single-post .entry-content .kpi-post-cta__title{ font-size:1.45rem; }
}

/* post navigation + related posts reuse the card skin */
.single-post .post-navigation a{ color:var(--kpi-violet); text-decoration:none; font-weight:600; }
.single-post .post-navigation a:hover{ color:var(--kpi-amber-text); }
.entry-related .entry-related-title{ color:var(--kpi-pine); }
.entry-related .loop-entry{ background:#fff; border:1px solid var(--kpi-line); border-radius:14px; overflow:hidden; }
.entry-related .loop-entry .entry-title a{ color:var(--kpi-pine); text-decoration:none; }
.entry-related .loop-entry .entry-title a:hover{ color:var(--kpi-amber-text); }

/* ---- dark footer -------------------------------------------------------- */
.site-footer,.site-middle-footer-wrap,.site-bottom-footer-wrap{ background:var(--kpi-pine); }
.site-footer, .site-footer p, .site-footer li, .site-footer a{ color:var(--kpi-on-dark); }
.site-footer h5,.site-footer .widget-title,.site-footer h2,.site-footer h3,.site-footer h4{ color:#fff; }
.site-footer a:hover{ color:var(--kpi-mint); }
.site-bottom-footer-wrap{ border-top:1px solid rgba(226,234,230,.14); }
/* Footer CTA button (the Performance Score). The .kpi-btn-* rules are scoped to .kpi page
   content, which the footer is not inside, so style the footer button here directly. */
.site-footer .kpi-footer-cta{ margin-top:14px; }
/* Match the header nav CTA exactly: amber bg, white bold text, 8px radius, compact padding. */
.site-footer .kpi-footer-cta .wp-block-button__link{ display:inline-block; background:var(--kpi-amber); color:#fff; font-weight:700; border-radius:8px; padding:9px 20px; }
.site-footer .kpi-footer-cta .wp-block-button__link:hover{ background:var(--kpi-mint); color:var(--kpi-pine); }

/* ==========================================================================
   AEO — answer capsules + comparison tables.
   The capsule is the 40-60 word, self-contained answer directly under a question
   heading. It is styled to read as the lead, because that is exactly what an
   answer engine lifts.
   ========================================================================== */
.kpi .answer{
  font-size:1.2rem; line-height:1.65; color:var(--kpi-pine); font-weight:500;
  border-left:4px solid var(--kpi-amber); padding-left:20px; margin:0 0 18px;
}
.kpi .sec-head .answer{ border-left:none; padding-left:0; margin:14px auto 0; max-width:760px; }
.kpi .kpi-dark .answer,.kpi .kpi-violet .answer{ color:var(--kpi-on-dark); }
.kpi .kpi-mint .answer{ color:var(--kpi-pine); }
@media(max-width:640px){ .kpi .answer{ font-size:1.08rem; padding-left:14px; } }

/* comparison tables — a format answer engines lift and cite */
.kpi .kpi-table{ margin:0 0 8px; overflow-x:auto; }
.kpi .kpi-table table{
  width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border:1px solid var(--kpi-line); border-radius:14px; overflow:hidden;
}
/* every cell gets the SAME rule, including the row-header column, so the grid is
   continuous and the table has a real bottom edge */
.kpi .kpi-table :is(th,td){ border-right:1px solid var(--kpi-line); border-bottom:1px solid var(--kpi-line); }
.kpi .kpi-table :is(th,td):last-child{ border-right:none; }
.kpi .kpi-table tbody tr:last-child :is(th,td){ border-bottom:none; }
.kpi .kpi-table thead th{
  background:var(--kpi-pine); color:#fff; text-align:left; font-weight:700;
  font-size:.92rem; padding:16px 18px; letter-spacing:.02em;
}
.kpi .kpi-table thead th:last-child{ background:var(--kpi-violet); }
.kpi .kpi-table tbody th[scope="row"]{
  text-align:left; font-weight:700; color:var(--kpi-pine); background:var(--kpi-cream);
  padding:14px 18px; white-space:nowrap;
}
/* room under the table before the section ends */
.kpi .vs{ padding:84px 0 96px; }
.kpi .kpi-table td{ padding:14px 18px; color:var(--kpi-ink); vertical-align:top; }
.kpi .kpi-table tbody tr td:last-child{ color:var(--kpi-pine); font-weight:600; background:rgba(162,227,196,.16); }

@media(max-width:760px){ .kpi .kpi-table td,.kpi .kpi-table th{ font-size:.9rem; padding:11px 12px; } }

/* ==========================================================================
   AUTHOR BOX (E-E-A-T) — named author with a real bio on every post, linked to
   the author page. Appended inside .entry-content, so these selectors have to be
   scoped like the other post-content rules or the generic h2/a rules win.
   ========================================================================== */
.single-post .entry-content .kpi-author-box{
  display:flex; gap:22px; align-items:flex-start;
  margin:56px 0 0; padding:28px 30px;
  background:var(--kpi-cream); border-radius:16px; border-left:4px solid var(--kpi-amber);
}
.single-post .entry-content .kpi-author-box > *{ margin-top:0; }
.single-post .entry-content img.kpi-author-photo{
  width:96px; height:96px; border-radius:50%; object-fit:cover; flex:0 0 96px; margin:0;
}
.single-post .entry-content .kpi-author-body{ flex:1; }
.single-post .entry-content .kpi-author-kicker{
  margin:0; font-size:.74rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--kpi-amber-text);
}
.single-post .entry-content .kpi-author-name{ margin:4px 0 10px; font-size:1.26rem; font-weight:700; line-height:1.2; }
.single-post .entry-content .kpi-author-name a{ color:var(--kpi-pine); text-decoration:none; }
.single-post .entry-content .kpi-author-name a:hover{ color:var(--kpi-amber-text); }
.single-post .entry-content .kpi-author-bio{ margin:0; font-size:1rem; line-height:1.65; color:var(--kpi-ink); }
.single-post .entry-content .kpi-author-more{ margin:12px 0 0; font-size:.84rem; font-weight:700; }
.single-post .entry-content .kpi-author-more a{ color:var(--kpi-violet); text-decoration:none; }
.single-post .entry-content .kpi-author-more a:hover{ color:var(--kpi-amber-text); }
@media(max-width:560px){
  .single-post .entry-content .kpi-author-box{ flex-direction:column; gap:16px; padding:24px 22px; }
}

/* ---- author page ---------------------------------------------------------
   Built on core wp:columns, NOT the custom .bio-grid: Kadence nests a second
   .wp-block-group__inner-container inside a group, which collapsed that grid into a
   single column and left half the page empty. */
.kpi .bio{ padding:74px 0 84px; }
.kpi .bio-cols{ gap:48px; align-items:flex-start; }
.kpi .bio-card{ padding:30px 28px; }
.kpi .kpi-headshot{ margin:0 0 18px; }
.kpi .kpi-headshot img{ width:132px; height:132px; border-radius:50%; object-fit:cover; display:block; }
.kpi .bio-name{ font-size:1.35rem; margin:0 0 4px; }
.kpi .bio-role{ color:var(--kpi-amber-text); font-weight:700; font-size:.9rem; margin:0 0 16px; }
.kpi .bio-roles{ list-style:none; margin:0 0 18px; padding:0; border-top:1px solid var(--kpi-line); }
.kpi .bio-roles li{
  padding:11px 0; border-bottom:1px solid var(--kpi-line);
  color:var(--kpi-ink); font-size:.95rem; line-height:1.45;
}
.kpi .bio-link{ margin:0; font-weight:700; font-size:.9rem; }
.kpi .bio-link a{ color:var(--kpi-violet); text-decoration:none; }
.kpi .bio-link a:hover{ color:var(--kpi-amber-text); }
.kpi .bio h3{ margin-top:1.8em; }
@media(max-width:781px){
  .kpi .bio{ padding:48px 0 56px; }
}

/* ---- monogram avatar (profile bio card, until a real headshot is supplied) --- */
.kpi .bio-monogram{ width:132px; height:132px; border-radius:50%; margin:0 0 18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--kpi-pine); color:var(--kpi-mint); font-weight:700; font-size:2.7rem; letter-spacing:.02em; }

/* ---- the team (About page) ------------------------------------------------- */
.kpi .team-intro{ margin-bottom:32px; }
.kpi .team-grid{ display:block; }
.kpi .team-grid > .wp-block-group__inner-container{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.kpi .team-card{ display:flex; height:100%; background:#fff; border:1px solid var(--kpi-line); border-radius:14px; padding:28px 22px; text-align:center; }
.kpi .team-card > .wp-block-group__inner-container{ display:flex; flex-direction:column; flex:1 1 auto; width:100%; }
.kpi .team-avatar{ width:104px; height:104px; border-radius:50%; margin:0 auto 16px; object-fit:cover; }
.kpi .team-avatar.is-mono{ display:flex; align-items:center; justify-content:center;
  background:var(--kpi-pine); color:var(--kpi-mint); font-weight:700; font-size:2rem; letter-spacing:.02em; }
.kpi .team-card h3{ font-size:1.16rem; margin:0 0 3px; }
.kpi .team-card .team-role{ color:var(--kpi-amber-text); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px; }
.kpi .team-card .team-bio{ color:var(--kpi-ink); font-size:.97rem; line-height:1.6; margin:0 0 12px; }
.kpi .team-card .team-more{ font-weight:700; font-size:.9rem; margin:0; }
.kpi .team-card .team-more a{ color:var(--kpi-violet); text-decoration:none; }
.kpi .team-card .team-more a:hover{ color:var(--kpi-amber-text); }
@media(max-width:640px){ .kpi .team-grid > .wp-block-group__inner-container{ grid-template-columns:1fr; } }
/* advisor line, folded into the team section instead of an orphan band */
.kpi .team-advisors{ text-align:center; max-width:660px; margin:44px auto 0; color:var(--kpi-ink); font-size:1.02rem; line-height:1.6; }
.kpi .team-advisors a{ font-weight:700; color:var(--kpi-violet); text-decoration:none; white-space:nowrap; }
.kpi .team-advisors a:hover{ color:var(--kpi-amber-text); }

/* "Read the full story" link on the Results case-study cards */
.kpi .cs-more a{ font-weight:700; font-size:.92rem; color:var(--kpi-cordovan); text-decoration:none; }
.kpi .cs-more a:hover{ color:var(--kpi-violet); text-decoration:underline; }

/* ---- feature photography (authentic custom shots) -------------------------- */
.kpi .photo-feature{ padding:30px 0; }
.kpi .photo-feature-img{ margin:0; }
.kpi .photo-feature-img img{ width:100%; border-radius:16px; display:block; box-shadow:0 18px 40px rgba(32,1,22,.12); }
.kpi .photo-cap{ text-align:center; color:var(--kpi-ink); font-size:.95rem; margin-top:14px; }


/* Third-party trademark attribution / non-affiliation notice (inc/legal.php). */
.kpi-legal{max-width:var(--kpi-wrap,1180px);margin:0 auto;padding:1.75rem 1.5rem 2.5rem;}
.kpi-legal p{margin:0;font-size:.8rem;line-height:1.6;color:var(--kpi-xanadu,#6B7A72);}
.kpi-legal a{color:inherit;text-decoration:underline;}
.single-post .kpi-legal,.page .kpi-legal{border-top:1px solid var(--kpi-ash,#B3BFB8);margin-top:2rem;padding-top:1.25rem;}

/* ---- booking modal (assets/kpi-booking.js) --------------------------------
   A "Book a call" button opens the GHL calendar in a lightbox. The iframe is built only on
   open, so it is free at page load. */
.kpi-book-modal{ position:fixed; inset:0; z-index:9999; display:none; }
.kpi-book-modal.is-open{ display:block; }
.kpi-book-backdrop{ position:absolute; inset:0; background:rgba(32,1,22,.55); backdrop-filter:blur(2px); }
.kpi-book-panel{
  position:relative; z-index:1; width:min(920px,94vw); height:min(760px,92vh);
  margin:4vh auto 0; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.4); display:flex; flex-direction:column;
}
.kpi-book-close{
  position:absolute; top:8px; right:12px; z-index:2; border:none; background:transparent;
  font-size:2rem; line-height:1; color:#586459; cursor:pointer; padding:4px 10px;
}
.kpi-book-close:hover{ color:#2E3830; }
/* The frame scrolls; GHL's form_embed.js grows the iframe to its content height, so we do
   NOT force height:100% (that would clip the taller form step). A min-height keeps it
   usable in the moment before the resizer runs. */
.kpi-book-frame{ flex:1 1 auto; position:relative; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.kpi-book-frame iframe{ width:100%; min-height:420px; border:0; display:block; }
.kpi-book-spin{
  position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px;
  border:3px solid #E0E8E3; border-top-color:#FF7F11; border-radius:50%;
  animation:kpi-book-spin .8s linear infinite;
}
@keyframes kpi-book-spin{ to{ transform:rotate(360deg); } }
@media(max-width:600px){
  .kpi-book-panel{ width:100vw; height:100vh; margin:0; border-radius:0; }
}

/* ---- Deal Risk Check: interactive self-scoring buy-side front door ---- */
.drc{ max-width:820px; margin-inline:auto; }
.drc-q{ padding:22px 0; border-top:1px solid var(--kpi-line-soft,#E3EAE5); }
.drc-q:first-of-type{ border-top:0; padding-top:0; }
.drc-q-eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--kpi-xanadu,#7E8D85); margin:0 0 4px; }
.drc-q h3{ font-size:1.18rem; line-height:1.3; margin:0 0 6px; color:var(--kpi-pine,#2E3830); }
.drc-q-hint{ margin:0 0 14px; color:var(--kpi-ink,#3d463f); font-size:.95rem; line-height:1.6; }
.drc-opts{ display:flex; gap:10px; flex-wrap:wrap; }
.drc-opt{ flex:1 1 auto; min-width:130px; cursor:pointer; font:inherit; font-weight:700; font-size:.9rem; padding:11px 14px; border-radius:12px; border:2px solid var(--kpi-line,#D6DED8); background:var(--kpi-white,#fff); color:var(--kpi-pine,#2E3830); transition:border-color .12s ease,background .12s ease,color .12s ease; text-align:center; }
.drc-opt:hover{ border-color:var(--kpi-pine,#2E3830); }
.drc-opt:focus-visible{ outline:3px solid var(--kpi-amber,#FF7F11); outline-offset:2px; }
.drc-opt[data-v="0"].is-sel{ background:var(--kpi-mint,#A2E3C4); border-color:var(--kpi-mint,#A2E3C4); color:var(--kpi-pine,#2E3830); }
.drc-opt[data-v="1"].is-sel{ background:var(--kpi-light-orange,#FADAB7); border-color:var(--kpi-amber,#FF7F11); color:var(--kpi-amber-text,#AE5300); }
.drc-opt[data-v="2"].is-sel{ background:var(--kpi-cordovan,#984447); border-color:var(--kpi-cordovan,#984447); color:#fff; }
.drc-actions{ margin-top:28px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.drc-see{ cursor:pointer; font:inherit; font-weight:800; font-size:1rem; padding:13px 26px; border-radius:14px; border:0; background:var(--kpi-amber,#FF7F11); color:var(--kpi-pine,#2E3830); transition:opacity .15s ease; }
.drc-see[disabled]{ opacity:.4; cursor:not-allowed; }
.drc-progress{ margin:0; color:var(--kpi-xanadu,#7E8D85); font-size:.88rem; font-weight:600; }
.drc-result{ margin-top:34px; padding:30px; border-radius:18px; background:var(--kpi-cream,#F0F7F4); border:1px solid var(--kpi-line-soft,#E3EAE5); }
.drc-result-title{ margin:0 0 8px; font-size:1.5rem; line-height:1.25; color:var(--kpi-pine,#2E3830); }
.drc-result-body{ margin:0 0 22px; color:var(--kpi-ink,#3d463f); line-height:1.7; }
.drc-form .drc-field{ margin:0 0 14px; }
.drc-form label{ display:block; font-weight:700; font-size:.85rem; color:var(--kpi-pine,#2E3830); margin:0 0 5px; }
.drc-form input,.drc-form textarea{ width:100%; font:inherit; padding:11px 14px; border-radius:12px; border:2px solid var(--kpi-line,#D6DED8); background:var(--kpi-white,#fff); color:var(--kpi-pine,#2E3830); }
.drc-form input:focus,.drc-form textarea:focus{ outline:0; border-color:var(--kpi-amber,#FF7F11); }
.drc-form textarea{ min-height:70px; resize:vertical; }
/* beat the form plugin's button[type="submit"] default (more specific than a bare .class),
   same reason the .calc submit rule below uses !important */
.kpi .drc-submit{ cursor:pointer; font:inherit; font-weight:800; font-size:1rem; padding:13px 26px; border-radius:14px; border:0!important; background-color:#FF7F11!important; background-image:none!important; color:#2E3830!important; }
.kpi .drc-submit:hover{ background-color:#A2E3C4!important; color:#2E3830!important; }
.kpi .drc-submit[disabled]{ opacity:.6; cursor:default; }
.drc-status{ margin:10px 0 0; color:var(--kpi-cordovan,#984447); font-size:.9rem; font-weight:600; }
.drc-fineprint{ margin:12px 0 0; font-size:.82rem; color:var(--kpi-xanadu,#7E8D85); }
@media(max-width:560px){ .drc-opt{ min-width:0; flex:1 1 100%; } }

/* ==========================================================================
   PINE HEADER — dark #masthead so it merges into the hero. !important beats
   Kadence's dynamic header CSS. The white logo swap is in functions.php.
   ========================================================================== */
#masthead, #mobile-header,
#masthead .site-header-upper-wrap, #masthead .site-main-header-wrap, #masthead .site-header-row-container-inner,
#mobile-header .site-header-upper-wrap, #mobile-header .site-main-header-wrap{ background:var(--kpi-pine,#2E3830) !important; }
#masthead{ box-shadow:0 6px 20px -6px rgba(46,56,48,.38); }
/* Header logo is a real <img>: the site Custom Logo is set to the white wordmark for the
   pine header (the light assessment header uses the dark version via kpi_logo_dark). The img
   carries alt text and keeps its width/height attributes, so it reserves space (no CLS). */
#masthead .brand.has-logo-image .custom-logo{ width:190px !important; height:auto !important; max-width:none !important; }
/* nav: off-white, a touch larger, Magic Mint on hover + active */
#masthead .main-navigation .menu > li > a{ color:var(--kpi-off,#fcfffc) !important; font-size:18px !important; }
#masthead .main-navigation .menu > li > a:hover,
#masthead .main-navigation .menu > li.current-menu-item > a,
#masthead .main-navigation .menu > li.current-menu-ancestor > a{ color:var(--kpi-mint,#A2E3C4) !important; }
/* the CTA button keeps white text (amber bg) everywhere, even on its own page and on hover,
   so the current-menu mint rule above does not tint it on /value-snapshot/ */
#masthead .main-navigation .menu > li.kpi-nav-cta > a,
#masthead .main-navigation .menu > li.kpi-nav-cta.current-menu-item > a,
#masthead .main-navigation .menu > li.kpi-nav-cta > a:hover{ color:#ffffff !important; }
#masthead .dropdown-nav-toggle{ color:var(--kpi-off,#fcfffc) !important; }
/* mobile hamburger icon white */
#mobile-header .menu-toggle-open, #mobile-header .menu-toggle-open .kadence-svg-iconset,
#mobile-header .mobile-toggle-open-container .menu-toggle{ color:var(--kpi-off,#fcfffc) !important; }
/* dropdown panel stays a clean white card with dark links */
#masthead .sub-menu{ background:#fff !important; box-shadow:0 18px 40px -22px rgba(46,56,48,.5); }
#masthead .sub-menu li a{ color:var(--kpi-pine,#2E3830) !important; }
#masthead .sub-menu li a:hover,
#masthead .sub-menu li a:focus,
#masthead .sub-menu li.current-menu-item > a{ background:var(--kpi-mint,#A2E3C4) !important; color:var(--kpi-pine,#2E3830) !important; }
/* mobile: larger hamburger icon (scales with font-size) and larger drawer menu + submenu text */
#mobile-toggle .menu-toggle-icon, .menu-toggle-open .menu-toggle-icon{ font-size:27px !important; }
#mobile-drawer .menu li a{ font-size:18px !important; }
#mobile-drawer .menu .sub-menu li a{ font-size:17px !important; }

/* Bio page: the auto-generated list of an author's posts ([kpi_author_posts]). */
.kpi-author-posts{ list-style:none; margin:1.25rem 0 0; padding:0; }
.kpi-author-posts li{ display:flex; justify-content:space-between; align-items:baseline; gap:1.25rem;
  padding:.7rem 0; border-bottom:1px solid var(--kpi-ash,#B3BFB8); }
.kpi-author-posts li a{ font-weight:600; text-decoration:none; color:var(--kpi-pine,#2E3830); }
.kpi-author-posts li a:hover{ color:var(--kpi-cordovan,#984447); text-decoration:underline; }
.kpi-ap-date{ flex:0 0 auto; font-size:.82rem; color:var(--kpi-xanadu,#7E8D85); white-space:nowrap; }