/*
Theme Name: Reputation Riot
Theme URI: https://reputationriot.com/
Description: Bespoke, dependency-free theme for Reputation Riot. Pure HTML + CSS, no page builder, no plugins. Warm linen ground, serif display type, image-led editorial layout. This stylesheet is the single source of truth: WordPress core block/global styles are dequeued in functions.php so nothing bleeds in. Built for speed and WCAG 2.1 AAA.
Author: Reputation Riot
Version: 2.5.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: palmetto
*/

/* ==========================================================================
   0. Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -moz-text-size-adjust: 100%; }
ul, ol { list-style: none; }
img, svg, video, iframe { display: block; max-width: 100%; height: auto; }
img:is([sizes=auto i],[sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   1. Tokens
   Warm linen ground with a deep olive accent. Every text pair below is checked
   against --paper: ink 14.8:1, ink-soft 8.1:1, accent 7.9:1 (all AAA).
   The serif display face is the thing that separates this site visually from
   every other site we run, and it costs zero font requests.
   ========================================================================== */
:root {
  --paper: #f4f1ea;         /* warm linen */
  --paper-2: #ebe6dc;       /* deeper linen, alternating sections */
  --surface: #fffdf9;       /* lifted card surface */
  --ink: #211d1b;           /* warm near-black, 14.8:1 on --paper */
  --ink-soft: #4d4741;      /* 8.1:1 on --paper */
  --ink-line: #211d1b;
  --line: #ddd6c9;
  --line-2: #c6bdac;
  --accent: #3c4f2b;        /* deep olive; AAA on all three grounds: paper 7.9, paper-2 7.2, surface 8.8 */
  --accent-deep: #2c3a20;
  --accent-lift: #a8bf8c;   /* accent for dark grounds */
  --footer-bg: #211d1b;
  --footer-ink: #f4f1ea;
  --footer-soft: #b5ada3;

  /* Serif display + system sans body. No web fonts, no external requests. */
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-sans: "Helvetica Neue", "Helvetica", "Arial", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-serif: var(--font-display);

  --container: 1240px;
  --measure: 68ch;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --section-y: clamp(4rem, 9vw, 8.5rem);

  --r-sm: 10px;
  --r: 18px;
  --r-lg: 30px;
  --r-pill: 999px;

  --dur: .35s;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.62;
  letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: #fff; }
strong, b { font-weight: 700; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.site-footer :focus-visible, .cta-band :focus-visible, .section--dark :focus-visible { outline-color: var(--accent-lift); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--ink); color: #fff; padding: .8rem 1.25rem; font-weight: 600; border-radius: var(--r-pill);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   3. Typography
   Display sizes use the serif; UI and body stay on the sans.
   ========================================================================== */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h4, h5 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
h1 { font-size: clamp(2.6rem, 1.5rem + 3.9vw, 5.25rem); line-height: 0.99; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.95rem, 1.3rem + 2.3vw, 3.35rem); line-height: 1.05; letter-spacing: -0.024em; }
h3 { font-size: clamp(1.35rem, 1.1rem + 0.95vw, 1.85rem); line-height: 1.15; letter-spacing: -0.016em; }
h4 { font-size: 1.05rem; }
p { max-width: var(--measure); }

.lead {
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  line-height: 1.5; letter-spacing: -0.008em;
  color: var(--ink-soft); font-weight: 400; max-width: 46ch;
}
.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; font-style: italic; }

/* Eyebrow: sentence case, quiet, sans. Sits above a serif headline. */
.eyebrow {
  display: inline-block; font-family: var(--font-sans);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem; max-width: none;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: 1480px; }
.section { padding-block: var(--section-y); }
.section--sunk { background: var(--paper-2); }
.section--hairline { border-top: 1px solid var(--line); }
.center { text-align: center; }
.center p, .center .lead { margin-inline: auto; }
.stack > * + * { margin-top: 1.35rem; }
.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.u-measure { max-width: 44rem; }
.u-measure-46 { max-width: 46rem; }
.u-measure-wide { max-width: 52rem; }
.u-mt-sm { margin-top: 1.5rem; }
.u-mt { margin-top: 2rem; }
.u-mt-lg { margin-top: clamp(2rem, 4vw, 3rem); }
.u-mt-xl { margin-top: clamp(2.5rem, 5vw, 4rem); }
.u-flush-top { padding-top: 0; }

/* ==========================================================================
   5. Buttons & link CTAs
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3.25rem; padding: 0.9rem 1.9rem; border: 1.5px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.006em; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.btn::after, button.btn.has-arrow::after { content: "\2192"; font-weight: 400; transition: transform var(--dur) var(--ease); }
a.btn:hover::after { transform: translateX(5px); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent); color: #fff; }
.btn--lg { min-height: 3.9rem; padding: 1.15rem 2.35rem; font-size: 1.05rem; }

.btn--ghost {
  min-height: 44px; padding: 0.5rem 0; border: 0; border-radius: 0; background: transparent; color: var(--ink);
  position: relative; gap: 0.5em;
}
.btn--ghost::before { content: ""; position: absolute; left: 0; right: 1.5em; bottom: 0.35rem; height: 1.5px; background: currentColor; transform: scaleX(1); transform-origin: left; transition: transform var(--dur) var(--ease); }
.btn--ghost:hover::before { transform: scaleX(0); transform-origin: right; }
.btn--ghost:hover { color: var(--accent); }
.section--dark .btn--ghost { color: #fff; }

.arrow-link { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 600; color: var(--accent); }
.arrow-link::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.arrow-link:hover::after { transform: translateX(5px); }

/* An inline CTA that came across from the old page builder. */
.cta-inline { margin-block: 1.75rem; max-width: none; }

/* ==========================================================================
   6. Header / navigation
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.15) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--ink); }
.brand__mark { width: 1.9rem; height: 1.9rem; flex: none; }
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.nav__list { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.25rem); }
.nav__list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; letter-spacing: -0.008em; position: relative; }
.nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease); }
.nav__list a:hover::after, .nav__list .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }
.nav__list .current-menu-item > a { font-weight: 700; }
.nav .btn { min-height: 2.85rem; padding: 0.6rem 1.4rem; }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; min-width: 44px; padding: 0.5rem 1rem;
    background: transparent; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); font-weight: 600; cursor: pointer;
  }
  .nav {
    position: fixed; inset: 5rem 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 0.5rem var(--gutter) 2rem;
    transform: translateY(-120%); visibility: hidden; transition: transform var(--dur) var(--ease);
  }
  .nav.is-open { transform: translateY(0); visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__list a { padding-block: 0.6rem; }
  .nav__list a::after { display: none; }
  .nav .btn { margin-top: 1.25rem; align-self: flex-start; }
}

/* ==========================================================================
   7. Hero
   ========================================================================== */
.hero { padding-block: clamp(3rem, 7vw, 7rem) clamp(2.5rem, 5vw, 5rem); }
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: 1.4fr 0.6fr; align-items: end; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; align-items: start; } }
.hero h1 { margin-bottom: 0.4em; }
.hero .lead { margin-bottom: 2.5rem; max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.hero__aside { border-top: 1.5px solid var(--ink-line); padding-top: 1.75rem; }
.hero__aside h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem); line-height: 1.18; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 1.75rem; }
.hero__aside p { display: none; }
.hero__stat { display: flex; gap: 1.1rem; align-items: baseline; padding-block: 1rem; border-top: 1px solid var(--line); }
.hero__stat:first-of-type { border-top: 0; padding-top: 0; }
.hero__stat b { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1; min-width: 9ch; flex-shrink: 0; color: var(--accent); }
.hero__stat span { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.35; }

/* Full-bleed hero image, generous radius. */
.hero-media { margin-top: clamp(2.5rem, 5vw, 4rem); border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); }
.hero-media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 720px) { .hero-media img { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   8. Alternating image/text rows (the main storytelling device)
   ========================================================================== */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.showcase + .showcase { border-top: 1px solid var(--line); }
.showcase__media { border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); }
.showcase__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform .7s var(--ease); }
.showcase:hover .showcase__media img { transform: scale(1.03); }
.showcase__body h2 { margin-bottom: 0.5em; }
.showcase__body p { color: var(--ink-soft); }
.showcase__body .arrow-link { margin-top: 1.5rem; }
.showcase--flip .showcase__media { order: 2; }
@media (max-width: 860px) {
  .showcase { grid-template-columns: 1fr; gap: 1.75rem; }
  .showcase--flip .showcase__media { order: 0; }
}

/* ==========================================================================
   9. Cards + surfaces
   ========================================================================== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2.1rem); }
.card__icon { width: 2.2rem; height: 2.2rem; color: var(--accent); margin-bottom: 1.35rem; }
.card__icon svg { width: 2.2rem; height: 2.2rem; }
.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--ink-soft); }
.card ul { color: var(--ink-soft); }
.card ul li { position: relative; padding-left: 1.2rem; margin-bottom: 0.55rem; }
.card ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.5rem; height: 1.5px; background: var(--accent); }
.audience .card--dark { background: var(--ink); color: var(--footer-ink); border-color: var(--ink); }
.audience .card--dark h3 { color: #fff; }

/* Big number treatment, used sparingly and only for real figures. */
.figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.figure-row > div { border-top: 1.5px solid var(--ink-line); padding-top: 1.25rem; }
.figure-row b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--accent); margin-bottom: 0.4rem; }
.figure-row span { color: var(--ink-soft); font-size: 0.98rem; }

/* ==========================================================================
   10. Form
   ========================================================================== */
.quote__grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); grid-template-columns: 0.85fr 1.15fr; align-items: start; }
@media (max-width: 960px) { .quote__grid { grid-template-columns: 1fr; } }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 2.75rem); }
.form-card > h2, .form-card > h3 { margin-bottom: 1.75rem; }
.form-row { margin-bottom: 1.75rem; }
.form-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field-label { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.6rem; color: var(--ink); }
.field-label .req { color: var(--accent); margin-left: 0.15em; }
.input, .textarea {
  width: 100%; border: 1.5px solid var(--line-2); background: var(--paper); border-radius: var(--r-sm);
  padding: 0.85rem 1rem; font-size: 1.0625rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: #6d665f; }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #8e1414; }
.checkbox-row { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 1.75rem; }
.checkbox-row input[type="checkbox"] { flex: none; width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; accent-color: var(--accent); }
.checkbox-row label { color: var(--ink-soft); font-size: 0.96rem; }
.checkbox-row a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.16em; }
.error-msg { display: none; color: #8e1414; font-weight: 600; font-size: 0.92rem; margin-top: 0.5rem; }
.error-msg::before { content: "\26A0  "; }
.quote__aside h1, .quote__aside h2 { margin-bottom: 0.75rem; }
.contact-line { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; font-weight: 700; font-size: 1.25rem; }
.contact-line svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--accent); }
.contact-line a { color: var(--accent); }
.assurance { margin-top: 2rem; }
.assurance li { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 1.1rem; color: var(--ink-soft); }
.assurance svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: 0.25rem; color: var(--accent); }

/* ==========================================================================
   11. Blog list + single article
   ========================================================================== */
.page-head { padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { max-width: 18ch; }
.page-head .lead { max-width: 50ch; margin-top: 1.5rem; }

.post-list { display: grid; gap: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.post-card { display: flex; flex-direction: column; position: relative; }
.post-card__media { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 1.35rem; background: var(--paper-2); border-radius: var(--r); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.post-card__meta { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); }
.post-card__title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.12; letter-spacing: -0.018em; }
.post-card__title a { display: inline; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card__title a:hover { color: var(--accent); }
.post-card p { color: var(--ink-soft); font-size: 0.99rem; }
.post-card__more { margin-top: auto; padding-top: 0.6rem; color: var(--accent); font-weight: 600; font-size: 0.95rem; }

/* Lead story: first card on the blog index gets the full width. */
.post-list--featured > .post-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.post-list--featured > .post-card:first-child .post-card__media { aspect-ratio: 16 / 10; margin-bottom: 0; border-radius: var(--r-lg); }
.post-list--featured > .post-card:first-child .post-card__title { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); }
@media (max-width: 860px) { .post-list--featured > .post-card:first-child { grid-template-columns: 1fr; } }

.article { max-width: 46rem; margin-inline: auto; padding-block: clamp(2.5rem, 5vw, 4rem); }
.article > .page-head { padding-top: 0; }
.article__meta { margin-top: 1rem; font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.75rem; }
.article__hero { margin: 2.25rem 0 2.75rem; border-radius: var(--r-lg); overflow: hidden; }
.article__hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article__body { font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.26rem); line-height: 1.72; }
.article__body > * { max-width: var(--measure); margin-inline: auto; }

/* ==========================================================================
   12. Gutenberg / content baseline (core block CSS is dequeued)
   ========================================================================== */
.article__body p { margin-block: 1.3em; }
.article__body h2 { font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem); margin-block: 1.7em 0.5em; line-height: 1.08; }
.article__body h3 { font-size: clamp(1.3rem, 1.15rem + 0.75vw, 1.65rem); margin-block: 1.5em 0.45em; line-height: 1.18; }
.article__body h4 { font-size: 1.08rem; margin-block: 1.5em 0.4em; }
.article__body ul, .article__body ol { margin-block: 1.3em; padding-left: 0; }
.article__body ol { padding-left: 1.4em; list-style: decimal; }
.article__body ul li, .article__body ol li { margin-bottom: 0.6em; padding-left: 1.6rem; position: relative; }
.article__body ol li { padding-left: 0.4rem; }
.article__body ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.7rem; height: 2px; background: var(--accent); }
.article__body li::marker { color: var(--accent); }
.article__body a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.16em; font-weight: 600; }
.article__body a:hover { text-decoration-thickness: 0.14em; }
.article__body strong { font-weight: 700; }

.wp-block-image, .article__body figure { margin-block: 2.25em; max-width: 100%; }
.wp-block-image img, .article__body figure img { width: 100%; height: auto; border-radius: var(--r); }
.wp-block-image figcaption, figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.7rem; text-align: center; }

.wp-block-quote, .article__body blockquote {
  margin-block: 2.5em; padding: 0 0 0 1.75rem; border-left: 2.5px solid var(--accent);
  font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.25;
  letter-spacing: -0.018em; font-weight: 400; max-width: var(--measure);
}
.wp-block-quote p, .article__body blockquote p { max-width: none; margin-block: 0.3em; }
.wp-block-quote cite { display: block; margin-top: 0.8rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 400; font-style: normal; color: var(--ink-soft); letter-spacing: 0; }

.wp-block-table, .article__body table { width: 100%; border-collapse: collapse; margin-block: 2em; font-size: 0.98rem; display: block; overflow-x: auto; }
.wp-block-table td, .wp-block-table th, .article__body th, .article__body td { border: 1px solid var(--line-2); padding: 0.8rem 1rem; text-align: left; }
.wp-block-table th, .article__body th { font-weight: 700; background: var(--paper-2); }

.wp-block-preformatted, .article__body pre { margin-block: 2em; padding: 1.25rem 1.5rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm); overflow-x: auto; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; }

.wp-block-embed, .article__body .wp-block-embed { margin-block: 2.25em; }
.wp-block-embed__wrapper { position: relative; }
.wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--r); }

.aligncenter { margin-inline: auto; text-align: center; }
.alignright { float: right; margin: 0.5em 0 1em 1.5em; }
.alignleft { float: left; margin: 0.5em 1.5em 1em 0; }

/* --------------------------------------------------------------------------
   Accordions. 245 <details> blocks came across from the old page builder, so
   this is a primary content component here, not an afterthought.
   -------------------------------------------------------------------------- */
details {
  border-bottom: 1px solid var(--line-2);
  max-width: var(--measure); margin-inline: auto;
}
details:first-of-type { border-top: 1px solid var(--line-2); }
details > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  list-style: none; cursor: pointer;
  padding: 1.35rem 0; min-height: 44px;
  font-family: var(--font-sans); font-weight: 600; font-size: 1.06rem; line-height: 1.4;
  letter-spacing: -0.008em; color: var(--ink);
  transition: color var(--dur) var(--ease);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }
details > summary::after {
  content: ""; flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.25rem;
  background:
    linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}
details[open] > summary::after { transform: rotate(45deg); }
details > summary:hover { color: var(--accent); }
details > *:not(summary) { padding-bottom: 0.4rem; color: var(--ink-soft); }
details > p { margin-block: 0 1.1rem; max-width: none; }
details[open] > summary { color: var(--accent); }

/* CTA block at the foot of single posts and service pages */
.post-cta { margin-top: 4rem; padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); max-width: 46rem; margin-inline: auto; }
.post-cta h2 { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem); margin-bottom: 0.6rem; }
.post-cta p { color: var(--ink-soft); margin-bottom: 1.5rem; }

/* Mid-article service CTA */
.mid-cta { background: var(--ink); color: var(--footer-ink); border: 0; border-radius: var(--r-lg); padding: clamp(1.6rem, 3.5vw, 2.25rem); margin: 3rem auto; max-width: var(--measure); }
.mid-cta__label { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-lift); font-weight: 700; margin: 0 0 0.6rem; max-width: none; }
.mid-cta__title { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 0.5rem; max-width: none; color: #fff; }
.mid-cta__text { color: var(--footer-soft); margin: 0 0 1.4rem; max-width: none; font-size: 1rem; }
.mid-cta .btn--primary { background: var(--paper); color: var(--ink); }
.mid-cta .btn--primary:hover { background: var(--accent-lift); color: var(--ink); }
.mid-cta--media { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: center; }
.mid-cta--media .mid-cta__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
@media (max-width: 34rem) {
  .mid-cta--media { grid-template-columns: 1fr; }
  .mid-cta--media .mid-cta__media img { aspect-ratio: 16 / 9; }
}

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 4rem; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.6rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-weight: 600; }
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Table of contents */
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.6rem; margin: 0 auto 2.75rem; max-width: var(--measure); }
.toc__title { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-bottom: 0.8rem; }
.toc__list { list-style: none; margin: 0; padding: 0; }
.toc__list li { margin: 0.42rem 0; line-height: 1.35; }
.toc__list a { color: var(--ink); border-bottom: 1px solid transparent; }
.toc__list a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.toc__sub { padding-left: 1.25rem; }
.toc__sub a { color: var(--ink-soft); font-size: 0.95rem; }

/* Post tags */
.post-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: var(--measure); margin: 2.75rem auto 0; }
.post-tags a { font-size: 0.85rem; padding: 0.45rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--ink-soft); }
.post-tags a:hover { border-color: var(--accent); color: var(--accent); }

/* Related articles */
.related { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.related__title { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.related .post-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.related .post-card__title { font-size: 1.25rem; }

/* ==========================================================================
   13. Interior pages
   ========================================================================== */
.page-intro { padding-block: clamp(3rem, 6vw, 6rem) clamp(2rem, 4vw, 3.5rem); }
.page-intro h1 { max-width: 18ch; margin-bottom: 0.45em; }
.page-intro .lead { max-width: 48ch; }
.page-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }

.feature-list { margin: 0; }
.feature-item { display: grid; grid-template-columns: minmax(11rem, 20rem) 1fr; gap: clamp(0.75rem, 4vw, 3.5rem); padding: clamp(1.6rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.feature-item:first-child { border-top: 1.5px solid var(--ink-line); }
.feature-item h3 { margin: 0; }
.feature-item p { margin: 0; color: var(--ink-soft); max-width: 58ch; }
.feature-item p + p { margin-top: 0.8em; }
@media (max-width: 720px) { .feature-item { grid-template-columns: 1fr; gap: 0.5rem; } }

.source-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.source-grid li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 5rem; display: flex; align-items: center; padding: 1.1rem 1.4rem; font-weight: 600; letter-spacing: -0.01em; }
.source-note { color: var(--ink-soft); margin-top: 1.5rem; max-width: 60ch; }

.checklist { display: grid; gap: 1.15rem; max-width: 46rem; }
.checklist li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.9rem; align-items: start; }
.checklist svg { width: 1.3rem; height: 1.3rem; margin-top: 0.25rem; color: var(--accent); }
.checklist b { font-weight: 700; }
.checklist span { color: var(--ink-soft); }

/* Dark call-to-action band */
.cta-band { background: var(--ink); color: var(--footer-ink); border-radius: var(--r-lg); }
.section.cta-band { padding-block: clamp(3rem, 5.5vw, 5.5rem); margin-inline: var(--gutter); }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: var(--footer-soft); max-width: 50ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
.cta-band .btn--primary { background: var(--paper); color: var(--ink); }
.cta-band .btn--primary:hover { background: var(--accent-lift); color: var(--ink); }
.cta-band .btn--ghost { color: #fff; }
.cta-band .btn--ghost::before { background: #fff; }
.cta-band .btn--ghost:hover { color: var(--accent-lift); }
.cta-band.center .actions { justify-content: center; }

.contact-details { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.contact-details li { display: grid; gap: 0.15rem; }
.contact-details .k { font-size: 0.76rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); }
.contact-details .v { font-size: 1.15rem; font-weight: 600; }
.contact-details a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.16em; }

.legal .article__body h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); }
.legal .article__body { font-size: 1.06rem; line-height: 1.68; }
.legal .updated { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 2rem; }

/* Service index */
.service-group + .service-group { margin-top: clamp(3rem, 6vw, 4.5rem); }
.service-group__title { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.4rem); margin-bottom: 1.6rem; padding-bottom: 0.9rem; border-bottom: 1.5px solid var(--ink-line); }
.service-group__title a:hover { color: var(--accent); }
.service-list { display: grid; gap: 0 clamp(1.25rem, 2.5vw, 2.25rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.service-item { position: relative; }
.service-item a { display: block; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: 0.99rem; }
.service-item a:hover { color: var(--accent); }

.service-hero { margin-bottom: clamp(2rem, 4vw, 3rem); border-radius: var(--r-lg); overflow: hidden; }
.service-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* Service page body sits on the wider article measure */
.service-page { max-width: 52rem; }

.nap-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.6rem; }
.nap-card h3 { margin-bottom: 0.5rem; font-size: 1.15rem; }
.nap-card address { font-style: normal; color: var(--ink-soft); line-height: 1.7; }
.nap-card a { color: var(--accent); font-weight: 600; }

/* ==========================================================================
   14. Footer
   ========================================================================== */
.site-footer { background: var(--footer-bg); color: var(--footer-soft); padding-block: clamp(4rem, 7vw, 6rem) 2.25rem; margin-top: clamp(3rem, 6vw, 6rem); }
.site-footer a { color: var(--footer-ink); }
.site-footer a:hover { color: var(--accent-lift); }
.footer-grid { display: grid; gap: 2.75rem; grid-template-columns: 1.7fr 1fr 1fr; margin-bottom: 3.5rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: -0.03em; margin-bottom: 1.2rem; }
.footer-col h4 { color: #fff; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1.25rem; font-weight: 700; }
.footer-col li { margin-bottom: 0.8rem; }
.footer-col p { color: var(--footer-soft); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.16); padding-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; font-size: 0.86rem; }
.footer-nap { font-style: normal; display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 1.1rem; }
.footer-nap a { font-weight: 700; }
.footer-social { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.footer-social a { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; }

/* ==========================================================================
   15. Motion
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__grid > *, .card, .post-card, .form-card, .quote__aside, .page-head > *, .showcase, .section > .container > .stack {
      animation: rr-reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 20%;
    }
  }
}
@keyframes rr-reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.anchor-offset { scroll-margin-top: 7rem; }

.article__updated { max-width: var(--measure); margin: 2.75rem auto 0; padding-top: 1.2rem; border-top: 1px solid var(--line-2); font-size: 0.85rem; letter-spacing: 0.02em; color: var(--ink-soft); }

/* ==========================================================================
   16. Service pages
   Applied to all ~47 of them. The stored content is decomposed by
   palmetto_service_parts() and re-laid out, so these classes are the real
   structure of a service page rather than wrappers around a blob of content.
   ========================================================================== */

/* Lede: headline and offer on the left, the page's own first image on the right. */
.service-lede { padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.5rem); }
.service-lede__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.service-lede__body h1 { margin-bottom: 0.35em; }
.service-lede__lead p {
  font-family: var(--font-sans);
  font-size: clamp(1.12rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.5; letter-spacing: -0.008em; color: var(--ink-soft);
  max-width: 46ch; margin-block: 0.9em;
}
.service-lede__lead p:first-child { margin-top: 0; }
.service-lede__note { margin-top: 1.4rem; font-size: 0.92rem; color: var(--ink-soft); }
.service-lede__media { border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); }
.service-lede__media img,
.service-lede__media figure { margin: 0; }
.service-lede__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
/* Much of the library is 2:3 portrait collage. Cropping those to landscape
   throws the image away, so portrait leads get a portrait frame. */
.service-lede__media--portrait img { aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
  .service-lede__grid { grid-template-columns: 1fr; gap: 2rem; }
  .service-lede__media { order: -1; }
  .service-lede__media img { aspect-ratio: 16 / 9; }
  .service-lede__media--portrait img { aspect-ratio: 3 / 2; }
}

/* Body sits on a slightly wider measure than a blog post: these pages carry
   image grids and step lists, not just prose. */
.service-page { max-width: 54rem; padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.service-page .article__body > h2:first-child { margin-top: 0; }

/* FAQ band. 245 accordions came across from the page builder; on a service page
   they are pulled out of the body and collected here. */
.faq-band__grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.faq-band__aside h2 { margin-bottom: 0.2em; }
.faq-band__aside p { color: var(--ink-soft); }
.faq-band__list > details { max-width: none; margin-inline: 0; }
.faq-band__list > details:first-of-type { border-top: 1px solid var(--line-2); }
@media (max-width: 860px) { .faq-band__grid { grid-template-columns: 1fr; gap: 1.75rem; } }
@media (min-width: 861px) { .faq-band__aside { position: sticky; top: 7rem; } }

/* Service index: grouped cards rather than a bare list. */
.service-index__intro { max-width: 52rem; }
.service-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.service-card {
  position: relative; display: flex; flex-direction: column; gap: 0.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.35rem 1.45rem; min-height: 100%;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.service-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.service-card h3 { font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.012em; }
.service-card a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.service-card p { font-size: 0.93rem; color: var(--ink-soft); margin: 0; }
.service-card__more { margin-top: auto; padding-top: 0.5rem; color: var(--accent); font-weight: 600; font-size: 0.9rem; }

/* ==========================================================================
   17. Footer contact block + social icons
   ========================================================================== */

.footer-blurb { color: var(--footer-soft); max-width: 38ch; margin-bottom: 1.75rem; }

/* Address and phone read as one contact block, separated from the blurb above
   and the social row below. */
.footer-contact { padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.16); margin-bottom: 1.75rem; }
.footer-nap { font-style: normal; display: block; color: var(--footer-soft); line-height: 1.6; margin: 0 0 0.85rem; }
.footer-phone {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.02em;
  color: var(--footer-ink);
  border-bottom: 1.5px solid transparent; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-phone:hover { color: var(--accent-lift); border-bottom-color: var(--accent-lift); }

/* Social: 44px round tap targets, glyph inherits the link colour so contrast is
   the link's contrast - #f4f1ea on #211d1b is 14.8:1, hover #a8bf8c is 8.4:1.
   The icon is aria-hidden; the accessible name lives on the link. */
.footer-social { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.38); color: var(--footer-ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.footer-social a:hover,
.footer-social a:focus-visible { color: var(--accent-lift); border-color: var(--accent-lift); background: rgba(255,255,255,.06); }
.social-icon { width: 20px; height: 20px; display: block; }
/* Text fallback if a platform has no glyph. */
.footer-social a:not(.footer-social__icon) { width: auto; padding-inline: 1rem; font-size: 0.9rem; }

/* ==========================================================================
   18. Embeds in content (maps, video, oEmbed)
   Raw iframes came across from the page builder. The global reset sets
   height:auto, which collapses an iframe that relies on a height attribute,
   so they need an explicit frame.
   ========================================================================== */
.article__body iframe {
  width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 18rem;
  border: 0; border-radius: var(--r); display: block;
  margin-block: 2.25em; background: var(--paper-2);
}
.page-head__lead p {
  font-family: var(--font-sans);
  font-size: clamp(1.12rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.5; letter-spacing: -0.008em; color: var(--ink-soft);
  max-width: 52ch; margin-block: 0.9em;
}
.page-head__lead { margin-top: 1.25rem; }

/* ==========================================================================
   19. Rebuilt body components (palmetto_rebuild_body)
   The page builder left long runs of [image][heading][text] and numbered
   [heading][text]. Stacked full-width they read badly, so they are grouped
   into a grid and a step list.
   ========================================================================== */

/* Platform logo sets: up to 29 small square marks. Compact, quiet, scannable. */
.logo-grid {
  display: grid; gap: clamp(0.75rem, 1.5vw, 1.1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  margin-block: 2.5em; max-width: none;
}
.logo-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.15rem 0.9rem;
}
.logo-tile__mark { display: block; width: 2.75rem; height: 2.75rem; }
.logo-tile__mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; margin: 0; }
.logo-tile h3 { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.008em; margin: 0; }
.logo-tile p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; max-width: none; }

/* Larger art in the same [image][heading][text] shape becomes cards. */
.tile-grid {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  margin-block: 2.5em; max-width: none;
}
.tile { display: flex; flex-direction: column; gap: 0.65rem; }
.tile__media { display: block; border-radius: var(--r); overflow: hidden; background: var(--paper-2); }
.tile__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; margin: 0; }
.tile h3 { font-size: 1.15rem; margin: 0; }
.tile p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; max-width: none; }

/* Numbered process steps, counter supplied by the list. */
.steps { counter-reset: step; margin-block: 2.5em; padding: 0; max-width: none; display: grid; gap: 0; }
.step {
  counter-increment: step; position: relative;
  display: grid; grid-template-columns: 3.25rem 1fr; gap: 0 1.25rem;
  padding: 1.6rem 0; border-top: 1px solid var(--line); margin: 0;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--accent);
  padding-top: 0.1rem;
}
.step h3 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.step p { margin: 0 0 0.6rem; color: var(--ink-soft); max-width: 60ch; }
.step p:last-child { margin-bottom: 0; }
.step > *:not(::before) { grid-column: 2; }
@media (max-width: 560px) {
  .step { grid-template-columns: 2.5rem 1fr; gap: 0 0.9rem; }
  .step::before { font-size: 1.5rem; }
}

/* Images that sat between numbered steps stay with their step, sized modestly
   so they do not overpower the list. */
.step figure { margin-block: 0.9rem 0; max-width: 22rem; }
.step figure img { border-radius: var(--r-sm); }
.step ul, .step ol { margin-block: 0.6rem; }

/* Loose content images are mostly 2:3 portrait collages. At article width one
   renders about 1100px tall and dominates the page, so cap by HEIGHT and let
   width follow: a landscape image inside the measure never reaches the cap and
   is unaffected. Component images (logo tiles, tiles, hero) set their own size
   and win on specificity. */
.article__body figure img,
.article__body > p img {
  display: block; margin-inline: auto;
  width: auto; height: auto;
  max-width: 100%; max-height: 32rem;
  border-radius: var(--r);
}
.article__body > p img { margin-block: 1.5rem; }
.article__body figure { text-align: center; }

/* "Part of <service>" up-link: a platform page pointing back to the service it
   belongs to. Deliberately one link, not a wall of sibling links. */
.parent-link {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3.5vw, 2.5rem); max-width: 46rem;
}
.parent-link h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-bottom: 0.5rem; }
.parent-link p { color: var(--ink-soft); max-width: 52ch; }

/* Definition grid: runs of [heading][text] that are a list of things, not a
   sequence of sections. Two columns so a run of 13 does not become 13 screens. */
.def-grid {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin-block: 2.5em; max-width: none; padding: 0;
}
.def { padding-top: 1.1rem; border-top: 1.5px solid var(--ink-line); margin: 0; }
.def h3 { font-size: 1.15rem; margin: 0 0 0.45rem; }
.def p { color: var(--ink-soft); font-size: 0.98rem; margin: 0 0 0.6rem; max-width: 46ch; }
.def p:last-child { margin-bottom: 0; }

/* Some definition cards carry a linked article thumbnail. */
.def p img, .def a img { width: 100%; height: auto; border-radius: var(--r-sm); margin-block: 0.55rem; }
.def a { color: var(--accent); font-weight: 600; }

/* ==========================================================================
   20. Service page components (v2.5)
   The middle of a service page is composed from these rather than printed as
   stored prose. Reference: a product page - blueprint of what you get, a
   statement, how it runs, a comparison table.
   ========================================================================== */

/* Inline UI icons. */
.ui-icon { width: 1.6rem; height: 1.6rem; color: var(--accent); flex: none; }

/* "What you get": icon + label + line. Six items, so it breaks the rule of
   three naturally and matches the number of things actually done. */
.icon-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  padding: 0; margin: 0;
}
.icon-item { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1.2rem; border-top: 1.5px solid var(--ink-line); }
.icon-item h3 { font-size: 1.12rem; margin: 0; }
.icon-item p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; max-width: 40ch; }

/* Statement band: heading left, the page's own prose right. */
.statement { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.statement__head h2 { margin-top: 0.2rem; }
.statement__body { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.22rem); }
.statement__body > *:first-child { margin-top: 0; }
@media (max-width: 860px) { .statement { grid-template-columns: 1fr; gap: 1.5rem; } }

/* An alternating row with no image still needs to read deliberately. */
.showcase--solo { grid-template-columns: 1fr; max-width: 52rem; }
.showcase__body .article__body > *:first-child { margin-top: 0; }
.showcase__body .article__body { font-size: 1.05rem; }
.showcase__body .article__body > * { margin-inline: 0; }

/* Numbered process. Distinct from .steps (which comes from page content). */
.process { counter-reset: proc; display: grid; gap: 0; padding: 0; margin: 0; }
.process__step {
  counter-increment: proc; display: grid; grid-template-columns: 4.5rem 1fr;
  gap: 0 clamp(1rem, 2.5vw, 2rem); padding: clamp(1.4rem, 3vw, 2.1rem) 0;
  border-top: 1px solid var(--line); margin: 0;
}
.process__step:last-child { border-bottom: 1px solid var(--line); }
.process__step::before {
  content: counter(proc, decimal-leading-zero);
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--accent);
  grid-row: 1 / span 2; padding-top: 0.2rem;
}
.process__step h3 { grid-column: 2; margin: 0 0 0.4rem; font-size: 1.3rem; }
.process__step p { grid-column: 2; margin: 0; color: var(--ink-soft); max-width: 62ch; }
@media (max-width: 560px) {
  .process__step { grid-template-columns: 3rem 1fr; }
  .process__step::before { font-size: 1.25rem; }
}

/* Comparison table. Scrolls inside its own wrapper, never the page. */
.table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; min-width: 40rem; margin: 0; display: table; }
.compare th, .compare td { padding: 1rem 1.15rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; background: var(--paper-2); }
.compare tbody th { font-weight: 700; width: 11rem; color: var(--ink); }
.compare td { color: var(--ink-soft); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }

/* A section whose content is a grid gets the full column, not the reading
   measure, so a 29-tile logo grid is not crushed into a half-width slot. */
.block-wide { max-width: none; }
.block-wide > * { max-width: none; margin-inline: 0; }
.block-wide > p { max-width: var(--measure); }

/* ==========================================================================
   21. Component lists inside article bodies
   .icon-grid / .def-grid / .logo-grid / .service-cards / .steps / .process are
   <ul>/<ol>, so the article body's bullet rule was drawing a stray dash before
   every card heading and indenting them. Components own their own layout.
   ========================================================================== */
.article__body .icon-grid > li,
.article__body .def-grid > li,
.article__body .logo-grid > li,
.article__body .tile-grid > li,
.article__body .service-cards > li,
.article__body .steps > li,
.article__body .process > li {
  padding-left: 0;
}
/* Only lists that do NOT draw their own ::before. .steps and .process use it for
   their counters, and .verdict__list uses it for the tick and cross, so killing
   the content there removed the numbers and overlapped the marks. */
.article__body .icon-grid > li::before,
.article__body .def-grid > li::before,
.article__body .logo-grid > li::before,
.article__body .tile-grid > li::before,
.article__body .service-cards > li::before {
  content: none;
}

/* ==========================================================================
   22. Verdict columns
   Two lists, not a comparison table: the rows never corresponded, so a table
   implied a relationship that was not there. Marks are drawn in CSS (a tick and
   a cross), so shape carries the meaning and not colour alone.
   ========================================================================== */
.verdict-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem); margin-block: 2.5em; max-width: none; padding: 0;
}
.verdict {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem); margin: 0;
}
.verdict--yes { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.verdict--yes::before,
.verdict--no::before {
  content: ""; display: block; width: 2.5rem; height: 3px; border-radius: 2px; margin-bottom: 1.1rem;
}
.verdict--yes::before { background: var(--accent); }
.verdict--no::before { background: var(--line-2); }
.verdict h3 { font-size: 1.2rem; margin: 0 0 1rem; }
.verdict__list { display: grid; gap: 0.75rem; margin: 0; padding: 0; max-width: none; }
.verdict__list li {
  position: relative; padding-left: 2.1rem !important; margin: 0; line-height: 1.45;
  font-size: 0.99rem; color: var(--ink-soft); max-width: none;
}
/* tick */
.verdict--yes .verdict__list li::before {
  content: ""; position: absolute; left: 0.45rem; top: 0.32em;
  width: 0.45rem; height: 0.85rem;
  border: solid var(--accent); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
/* cross */
.verdict--no .verdict__list li::before,
.verdict--no .verdict__list li::after {
  content: ""; position: absolute; left: 0.2rem; top: 0.62em;
  width: 0.9rem; height: 2.5px; background: var(--ink-soft); border-radius: 2px;
}
.verdict--no .verdict__list li::before { transform: rotate(45deg); }
.verdict--no .verdict__list li::after { transform: rotate(-45deg); }

/* A note under the pair, tied to the columns rather than floating. */
.verdict-note { margin-top: 0.5rem; color: var(--ink-soft); }

/* ==========================================================================
   23. Stored-section bands (.entry)
   Page bodies are stored as a sequence of <section> elements. The alternating
   ground, the reading measure and the wide treatment for grids are all done
   here, so nothing has to be parsed at render time to lay a page out.
   ========================================================================== */
/* Same geometry as .container, so a section's content lines up exactly with the
   hero above it. .container resolves to (100% - container)/2 + gutter; a grid
   whose tracks total the container width lands one gutter to the left of that,
   which is what made every heading sit off from the hero.
   Nothing is centred per element: text is left-aligned and simply wraps at the
   reading measure, components run out to the container edge. */
.entry > section {
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  padding-block: clamp(2.75rem, 6vw, 5rem);
  border-top: 1px solid transparent;
  /* match the reading typography the old .article__body used */
  font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.26rem);
  line-height: 1.72;
}
.entry > section:nth-of-type(even) {
  background: var(--paper-2);
  border-top-color: var(--line);
  border-bottom: 1px solid var(--line);
}

/* Prose wraps at the reading measure, left-aligned. Never margin-inline: auto
   here: centring a narrow box inside a wide one is exactly the drift above. */
.entry > section > * {
  max-width: var(--measure);
  margin-inline: 0;
  padding-inline: 0;
}
.entry > section > h2 {
  max-width: 26ch;
  margin-bottom: 0.7em;
  font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem);
  line-height: 1.08;
}
.entry > section > p { margin-block: 1.25em; }
.entry > section > ul:not([class]),
.entry > section > ol:not([class]) { margin-block: 1.25em; }

/* Components run from that same left edge out to the container edge. */
.entry > section > .verdict-cols,
.entry > section > .icon-grid,
.entry > section > .def-grid,
.entry > section > .tile-grid,
.entry > section > .logo-grid,
.entry > section > .process,
.entry > section > .steps,
.entry > section > .table-wrap,
.entry > section > figure {
  max-width: none;
}

/* Legal pages: tighter, no alternating grounds, one continuous read. */
.legal .entry > section { padding-block: 0 0 1.5rem; background: none; border: 0; }
.legal .entry > section:first-of-type { padding-top: 1.5rem; }
.legal .entry > section > h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); margin-top: 2em; }

/* Page header for non-service pages. */
.page > .page-head { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 2.5vw, 2rem); }


/* Embeds and media inside stored sections. The old rules targeted
   .article__body, which these pages no longer use. */
.entry iframe {
  width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 18rem;
  border: 0; border-radius: var(--r); display: block;
  margin-block: 1.5rem; background: var(--paper-2);
}
.entry > section > p:has(iframe) { max-width: none; }
.entry figure img, .entry > section > p > img { border-radius: var(--r); }

/* Headings and links inside stored sections. */
.entry > section > h3 { font-size: clamp(1.3rem, 1.15rem + 0.75vw, 1.65rem); margin-block: 1.5em 0.45em; }
.entry > section > h4 { font-size: 1.08rem; margin-block: 1.4em 0.4em; }
.entry > section > .eyebrow { margin-bottom: 0.6rem; }
.entry a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.16em; font-weight: 600; }
.entry a:hover { text-decoration-thickness: 0.14em; }
.entry > section > ul:not([class]) li,
.entry > section > ol:not([class]) li { margin-bottom: 0.6em; padding-left: 1.6rem; position: relative; }
.entry > section > ol:not([class]) { padding-left: 1.4em; list-style: decimal; }
.entry > section > ol:not([class]) li { padding-left: 0.4rem; }
.entry > section > ul:not([class]) li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 0.7rem; height: 2px; background: var(--accent);
}
.entry > section > blockquote {
  border-left: 2.5px solid var(--accent); padding-left: 1.75rem;
  font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.25; margin-block: 1.5em;
}

/* ---------------------------------------------------------------------------
   Listicle: ORM umbrella essay, grouped by problem (Reputation Riot).
   Image system: logo only next to the named pick in each group. Runners up
   are text with no logo. One screenshot per group, on the pick.

   The wrapper is neutralized first: .article__body > * is a child selector
   and would otherwise stop at it.
   ------------------------------------------------------------------------- */
.article__body > .listicle { max-width: none; margin-inline: 0; }
.listicle > * { max-width: var(--measure); margin-inline: auto; }

/* The thesis headings carry the argument, so they take the display face. */
.listicle h2 {
  font-family: var(--font-display);
  border-bottom: 1.5px solid var(--ink-line);
  padding-bottom: 0.5rem; margin-block: 2.4em 0.8em;
}

/* Runners up are text. Only the named pick gets a logo and a surface card,
   which is what makes the pick legible at a glance inside a long essay. */
.listicle .listicle__logo { display: none; }
.listicle .listicle__name { margin-block: 1.8em 0.4em; }
.listicle .listicle__name--pick {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--r-sm); padding: 0.7rem 0.95rem;
}
.listicle .listicle__name--pick .listicle__logo {
  display: inline-block; height: 26px; width: auto; flex: none;
}

.listicle .listicle__shot { display: none; }
.listicle .listicle__shot--pick {
  display: block; margin-block: 1rem 1.6rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}

.listicle .listicle__table { max-width: none; font-size: 0.95rem; }
.listicle .listicle__table th { background: var(--paper-2); }