/* ============================================================
   Outrankco — Inner page styles (v10 — B2B SaaS direction)
   Loaded after components.css on every non-home page.
   STRICT 6-color palette + Open Sans only.
   Editorial fingerprints (chapter-num spine, asymmetric grids,
   broken-column treatments) PURGED 2026-05-14.
   ============================================================ */

/* ============================================================
   SECTION-HEAD — inherited from home.css pattern (DRY).
   Inner pages reuse the same single-column eyebrow + H2 + intro
   block as the homepage.
   ============================================================ */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 720px;
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}
.section-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 0;
}
.section--dark .section-eyebrow,
.section--dark-sub .section-eyebrow { color: var(--c-accent); }
.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-heading);
  line-height: 1.1;
  margin: 0;
  color: var(--c-deep);
  max-width: 22ch;
}
.section-head--center .section-title { max-width: none; }
.section--dark .section-title,
.section--dark-sub .section-title { color: var(--c-white); }
.section-intro {
  margin: 4px 0 0 0;
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--c-soft);
  max-width: 56ch;
}

/* ============================================================
   PAGE HERO — short dark hero (replaces editorial-grid version)
   Single column, no 88px running-number rail.
   ============================================================ */
.page-hero {
  background: var(--c-primary);
  color: var(--c-white);
  padding-block: clamp(56px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(136, 169, 195, 0.85) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.04;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 14px 0;
}
.page-hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-heading);
  line-height: 1.05;
  margin: 0;
  color: var(--c-white);
  max-width: 22ch;
}
.page-hero__lede {
  margin-top: 18px;
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--c-soft);
  max-width: 60ch;
}
.breadcrumb {
  margin-top: 24px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-soft);
}
.breadcrumb a { color: var(--c-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-accent); }
.breadcrumb__sep { margin: 0 8px; opacity: 0.6; }

/* ============================================================
   PROSE — long-form copy block
   ============================================================ */
.prose {
  max-width: 70ch;
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--c-deep);
}
.prose > p { margin: 0 0 16px 0; }
.prose h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-heading);
  line-height: 1.15;
  margin: 48px 0 16px 0;
  color: var(--c-deep);
}
.prose h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: 32px 0 12px 0;
  color: var(--c-deep);
}
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 16px 0; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--c-deep); font-weight: var(--fw-bold); }
.prose blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--c-accent);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  font-style: normal;
  color: var(--c-deep);
  line-height: 1.55;
}
.prose a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--c-accent); }

/* ============================================================
   2-COL PROSE — used on detail pages for intro lede + body
   ============================================================ */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.two-col--wide-left { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.two-col__lead {
  font-size: clamp(1.25rem, 1vw + 0.75rem, 1.5rem);
  font-weight: var(--fw-light);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--c-deep);
}
.section--dark .two-col__lead,
.section--dark-sub .two-col__lead { color: var(--c-white); }
@media (max-width: 960px) {
  .two-col, .two-col--wide-left { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   FEATURE CARDS — 3-up grid (replaces editorial feature-list)
   Same DNA as home .service-card: subtle border, hover lift.
   ============================================================ */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.feature-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  transition:
    transform 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out),
    border-color 200ms var(--ease-out);
}
.section--alt .feature-card { background: var(--c-bg); }
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 55, 94, 0.08);
  border-color: var(--c-primary);
}
.feature-card__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0;
}
.feature-card__name {
  font-size: clamp(1.0625rem, 0.4vw + 0.9rem, 1.25rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
  margin: 0;
  color: var(--c-deep);
}
.feature-card__desc {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--c-soft);
  margin: 0;
}
.feature-card__list {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.feature-card__list li {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--c-deep);
  padding-left: 18px;
  position: relative;
}
.feature-card__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-accent);
  font-weight: var(--fw-bold);
}

/* ============================================================
   PROCESS GRID — 4-up clean cards (replaces editorial timeline)
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.process-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  border-top: 3px solid var(--c-accent);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.section--alt .process-step { background: var(--c-bg); }
.process-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 55, 94, 0.08);
}
.process-step__num {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-soft);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.process-step__name {
  font-size: clamp(1.0625rem, 0.4vw + 0.9rem, 1.25rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
  margin: 0;
  color: var(--c-deep);
}
.process-step__desc {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--c-soft);
  margin: 0;
}
@media (max-width: 960px) {
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   STAT BAND — 3 or 4-up stat callouts (dark section)
   ============================================================ */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.stat-band--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-item {
  border-top: 2px solid var(--c-accent);
  padding-top: 18px;
}
.stat-num {
  font-size: clamp(2rem, 2.4vw + 0.5rem, 2.75rem);
  font-weight: var(--fw-extra);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-white);
  margin: 0 0 10px 0;
  font-variant-numeric: tabular-nums;
}
.section--light .stat-num,
.section--alt .stat-num { color: var(--c-deep); }
.stat-label {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.4;
  color: var(--c-soft);
  margin: 0;
  max-width: 32ch;
}
@media (max-width: 960px) { .stat-band, .stat-band--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stat-band, .stat-band--3 { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   TEAM CARDS — 4-up grid (clean, no editorial border)
   ============================================================ */
.team-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.team-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.section--alt .team-card { background: var(--c-bg); }
.team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 55, 94, 0.08);
  border-color: var(--c-primary);
}
.team-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(136, 169, 195, 0.16);
  border: 1px solid rgba(136, 169, 195, 0.32);
  display: grid;
  place-items: center;
  color: var(--c-primary);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.team-card__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--c-deep);
}
.team-card__role {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0;
}
.team-card__bio {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--c-soft);
  margin: 0;
}
@media (max-width: 960px) { .team-cards, .team-cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-cards, .team-cards--3 { grid-template-columns: 1fr; } }

/* ============================================================
   CASE CARDS — 3-up grid (clean cards, no editorial 4-col row)
   ============================================================ */
.case-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.case-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
  position: relative;
}
.section--alt .case-card { background: var(--c-bg); }
.case-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 55, 94, 0.08);
  border-color: var(--c-primary);
}
.case-card__industry {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0;
}
.case-card__title {
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
  margin: 0;
  color: var(--c-deep);
}
.case-card__result {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--c-soft);
  margin: 0;
}
.case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.case-card__tag {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-soft);
  border: 1px solid rgba(136, 169, 195, 0.32);
  padding: 4px 10px;
}
.case-card__cta {
  margin-top: auto;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-soft);
  transition: color 200ms var(--ease-out);
}
.case-card:hover .case-card__cta { color: var(--c-primary); }
@media (max-width: 960px) { .case-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .case-cards { grid-template-columns: 1fr; } }
/* Breathing room between the cards grid and a following centered CTA. */
.case-cards + .section-head--center,
.feature-cards + .section-head--center,
.two-col + .section-head--center { margin-top: clamp(2rem, 3vw, 2.5rem); }

/* Featured case-study row (case-studies hub Section 1) */
.case-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
}
.case-featured__main {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(28px, 3vw, 40px);
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  border-top: 4px solid var(--c-primary);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.case-featured__main:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(23, 55, 94, 0.08); }
.case-featured__stat {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 3vw, 40px);
  background: var(--c-primary);
  color: var(--c-white);
  gap: 12px;
}
.case-featured__stat .stat-num { color: var(--c-white); font-size: clamp(2.5rem, 4vw + 0.5rem, 3.75rem); margin: 0; }
.case-featured__stat .stat-label { color: var(--c-white); }
@media (max-width: 960px) { .case-featured { grid-template-columns: 1fr; } }

/* ============================================================
   REVIEW CARDS — 3-up grid (clean, no column-count drift)
   ============================================================ */
.review-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.section--alt .review-card { background: var(--c-bg); }
.review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 55, 94, 0.08);
  border-color: var(--c-primary);
}
.review-card__stars { color: var(--c-accent); letter-spacing: 0.1em; font-size: 14px; }
.review-card__text {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--c-deep);
  margin: 0;
}
.review-card__author {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--c-deep);
  margin: 4px 0 0 0;
}
.review-card__meta {
  font-size: var(--fs-caption);
  color: var(--c-soft);
  margin: 0;
  letter-spacing: 0.02em;
}
@media (max-width: 960px) { .review-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .review-cards { grid-template-columns: 1fr; } }

/* Featured reviews — large card pair stacked on top of wall */
.review-featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.review-featured .review-card {
  padding: clamp(28px, 3vw, 40px);
  border-top: 3px solid var(--c-accent);
}
.review-featured .review-card__text {
  font-size: var(--fs-lead);
  line-height: 1.55;
}
@media (max-width: 768px) { .review-featured { grid-template-columns: 1fr; } }

/* ============================================================
   BLOG CARDS (index) — 3-up clean grid, no thumbnails
   ============================================================ */
.blog-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.blog-cards-grid .blog-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  text-decoration: none;
  color: inherit;
  border-top: none;
  padding-top: 24px;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.section--alt .blog-cards-grid .blog-card { background: var(--c-bg); }
.blog-cards-grid .blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 55, 94, 0.08);
  border-color: var(--c-primary);
}
.blog-cards-grid .blog-card__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0;
}
.blog-cards-grid .blog-card__title {
  font-size: clamp(1rem, 0.4vw + 0.875rem, 1.1875rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
  margin: 0;
  color: var(--c-deep);
}
.blog-cards-grid .blog-card__date {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-soft);
  font-variant-numeric: tabular-nums;
}
.blog-cards-grid .blog-card__excerpt {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--c-soft);
  margin: 0;
}
.blog-cards-grid .blog-card__cta {
  margin-top: auto;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-soft);
  transition: color 200ms var(--ease-out);
}
.blog-cards-grid .blog-card:hover .blog-card__cta { color: var(--c-primary); }
@media (max-width: 960px) { .blog-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-cards-grid { grid-template-columns: 1fr; } }

/* Category pill rail */
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.category-pill {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-deep);
  border: 1px solid rgba(136, 169, 195, 0.32);
  padding: 10px 18px;
  text-decoration: none;
  transition: all 180ms var(--ease-out);
}
.category-pill:hover {
  background: var(--c-primary);
  color: var(--c-white);
  border-color: var(--c-primary);
}

/* ============================================================
   BLOG POST ARTICLE — clean single column, no marginalia
   ============================================================ */
.article-body {
  max-width: 720px;
  margin-inline: auto;
  font-size: 1.0625rem;
  font-weight: var(--fw-light);
  line-height: 1.75;
  color: var(--c-deep);
}
.article-body > p { margin: 0 0 20px 0; }
.article-body h2 {
  font-size: clamp(1.375rem, 1vw + 0.875rem, 1.75rem);
  font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-heading);
  line-height: 1.2;
  margin: 48px 0 16px 0;
  color: var(--c-deep);
}
.article-body h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: 32px 0 12px 0;
  color: var(--c-deep);
}
.article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 20px 0; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--c-deep); font-weight: var(--fw-bold); }
.article-body blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--c-accent);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  font-style: normal;
  color: var(--c-deep);
  line-height: 1.55;
}
.article-body a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--c-accent); }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 20px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-soft);
}
.article-meta__sep { opacity: 0.5; }

/* ============================================================
   SERVICE INDEX — supporting services list (2-up rows)
   ============================================================ */
.service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.service-list__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.section--alt .service-list__item { background: var(--c-bg); }
.service-list__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 55, 94, 0.08);
  border-color: var(--c-primary);
}
.service-list__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0;
}
.service-list__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--c-deep);
}
.service-list__desc {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--c-soft);
  margin: 0;
}
@media (max-width: 600px) { .service-list { grid-template-columns: 1fr; } }

/* ============================================================
   FEATURED TESTIMONIAL (single centered card — for service detail)
   ============================================================ */
.tm-featured-card {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 3vw, 40px);
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  border-top: 4px solid var(--c-accent);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.section--dark .tm-featured-card,
.section--dark-sub .tm-featured-card {
  background: var(--c-support);
  border-color: rgba(255, 255, 255, 0.08);
  border-top-color: var(--c-accent);
}
.tm-featured-card .stars {
  color: var(--c-accent);
  font-size: 14px;
  letter-spacing: 0.1em;
}
.tm-featured-card blockquote {
  margin: 0;
  font-size: clamp(1.0625rem, 0.6vw + 0.875rem, 1.25rem);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  letter-spacing: var(--tracking-tight);
  color: var(--c-deep);
}
.section--dark .tm-featured-card blockquote,
.section--dark-sub .tm-featured-card blockquote { color: var(--c-white); }
.tm-author { display: flex; align-items: center; gap: 14px; }
.tm-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(136, 169, 195, 0.16);
  border: 1px solid rgba(136, 169, 195, 0.32);
  display: grid; place-items: center;
  font-weight: var(--fw-bold);
  font-size: 0.875rem;
  color: var(--c-primary);
}
.section--dark .tm-avatar { color: var(--c-white); }
.tm-name { font-size: var(--fs-small); font-weight: var(--fw-bold); margin: 0; color: var(--c-deep); }
.section--dark .tm-name { color: var(--c-white); }
.tm-role { font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--c-soft); margin: 2px 0 0 0; letter-spacing: 0.02em; }

/* ============================================================
   LINK CARDS (404, navigation hubs)
   ============================================================ */
.link-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.link-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.section--alt .link-card { background: var(--c-bg); }
.link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 55, 94, 0.08);
  border-color: var(--c-primary);
}
.link-card__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(136, 169, 195, 0.10);
  border: 1px dashed rgba(136, 169, 195, 0.32);
  color: var(--c-soft);
  font-size: 0.5rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-align: center;
  padding: 4px;
  word-break: break-all;
  margin-bottom: 4px;
}
.link-card__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--c-deep);
}
.link-card__desc {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--c-soft);
  margin: 0;
}
.link-card__cta {
  margin-top: 4px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
}
@media (max-width: 960px) { .link-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .link-cards { grid-template-columns: 1fr; } }

/* ============================================================
   BRAND LOGO WALL — real logos (used on brands.html)
   ============================================================ */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
}
.logo-wall__item {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  padding: 16px;
  transition: border-color 200ms var(--ease-out);
}
.section--alt .logo-wall__item { background: var(--c-bg); }
.logo-wall__item:hover { border-color: var(--c-primary); }
.logo-wall__item img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.logo-wall__item:hover img { filter: grayscale(0%); opacity: 1; }
.logo-wall__item--placeholder {
  color: var(--c-soft);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-align: center;
}
@media (max-width: 960px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   FAQ ACCORDION — clean (hairline only, no boxes)
   ============================================================ */
.faq-list { border-top: 1px solid rgba(136, 169, 195, 0.32); max-width: 880px; }
.faq-item { border-bottom: 1px solid rgba(136, 169, 195, 0.32); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 24px 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  font-family: var(--font-family);
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.1875rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--c-deep);
  line-height: 1.35;
}
.faq-q:hover { color: var(--c-primary); }
.faq-toggle {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 1px solid var(--c-support);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: var(--fw-light);
  font-size: 1.25rem;
  line-height: 1;
  transition: all 200ms var(--ease-out);
}
.faq-item[open] .faq-toggle { background: var(--c-accent); border-color: var(--c-accent); transform: rotate(45deg); }
.faq-a {
  padding: 0 0 28px 0;
  max-width: 72ch;
}
.faq-a p {
  margin: 0 0 12px 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--c-soft);
}

/* ============================================================
   FINAL CTA — light surface, 2-col (same DNA as home)
   ============================================================ */
.final-cta { background: var(--c-bg); }
.final-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.final-cta__headline {
  font-size: clamp(1.875rem, 2.4vw + 0.5rem, 2.5rem);
  font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  margin: 0 0 14px 0;
  color: var(--c-deep);
}
.final-cta__headline .accent { color: var(--c-accent); }
.final-cta__sub {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--c-soft);
  margin: 0 0 22px 0;
  max-width: 50ch;
}
.final-cta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.final-cta__side {
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  border-top: 4px solid var(--c-primary);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.final-cta__side h3 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--c-deep);
}
.final-cta__side ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.final-cta__side li {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--c-deep);
  padding-left: 18px;
  position: relative;
}
.final-cta__side li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-accent);
  font-weight: var(--fw-bold);
}
@media (max-width: 960px) { .final-cta__inner { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   CONTACT — form + NAP 2-col
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.contact-nap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-nap__block {
  display: flex; flex-direction: column; gap: 4px;
}
.contact-nap__label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0;
}
.contact-nap__value {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  color: var(--c-deep);
  margin: 0;
}
.contact-nap__value a { color: var(--c-deep); text-decoration: none; }
.contact-nap__value a:hover { color: var(--c-primary); }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.cta-form {
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  border-top: 4px solid var(--c-primary);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cta-form .btn-primary { width: 100%; margin-top: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label {
  display: block;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--c-deep);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--c-bg);
  border: 1px solid rgba(136, 169, 195, 0.32);
  padding: 13px 14px;
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--c-deep);
  border-radius: 0;
  transition: border-color 180ms var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-color: var(--c-primary);
}
.field textarea { resize: vertical; min-height: 100px; }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-caption);
  color: var(--c-soft);
  font-weight: var(--fw-regular);
  line-height: 1.5;
}
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

/* ============================================================
   MAP PLACEHOLDER
   ============================================================ */
.map-slot {
  width: 100%;
  aspect-ratio: 21 / 9;
  background: rgba(136, 169, 195, 0.10);
  border: 1px dashed rgba(136, 169, 195, 0.32);
  display: grid;
  place-items: center;
  color: var(--c-soft);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ============================================================
   PRICING TIER CARDS (services-web-design)
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.section--alt .pricing-card { background: var(--c-bg); }
.pricing-card--featured { border-top: 4px solid var(--c-accent); }
.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 55, 94, 0.08);
  border-color: var(--c-primary);
}
.pricing-card__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0;
}
.pricing-card__name {
  font-size: clamp(1.125rem, 0.6vw + 0.875rem, 1.375rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--c-deep);
}
.pricing-card__price {
  font-size: clamp(1.5rem, 1.5vw + 0.5rem, 1.875rem);
  font-weight: var(--fw-extra);
  letter-spacing: -0.02em;
  color: var(--c-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.pricing-card__desc {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--c-soft);
  margin: 0;
}
.pricing-card ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.pricing-card li {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--c-deep);
  padding-left: 18px;
  position: relative;
}
.pricing-card li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-accent);
  font-weight: var(--fw-bold);
}
@media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SEARCH FORM (search.html)
   ============================================================ */
.search-form {
  display: flex;
  gap: 12px;
  max-width: 640px;
  margin-inline: auto;
}
.search-form input {
  flex: 1;
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  padding: 14px 18px;
  font-family: var(--font-family);
  font-size: var(--fs-lead);
  color: var(--c-deep);
  border-radius: 0;
}
.search-form input:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.search-form button {
  background: var(--c-primary);
  color: var(--c-white);
  border: none;
  padding: 14px 24px;
  font-family: var(--font-family);
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.empty-state {
  padding: 64px 0;
  text-align: center;
  color: var(--c-soft);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  max-width: 540px;
  margin-inline: auto;
}

/* ============================================================
   STARS UTILITY
   ============================================================ */
.stars { color: var(--c-accent); letter-spacing: 0.1em; font-size: 14px; }
.text-muted { color: var(--c-soft); }
.accent-text { color: var(--c-accent); }

/* ============================================================
   PREVIEW INDEX (reviewer hub)
   ============================================================ */
.preview-hub {
  background: var(--c-bg);
  min-height: 70vh;
  padding-block: clamp(56px, 7vw, 96px);
}
.preview-hub__note {
  margin: 24px 0 40px 0;
  padding: 14px 18px;
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  border-left: 3px solid var(--c-accent);
  font-size: var(--fs-small);
  color: var(--c-deep);
  max-width: 64ch;
}
.preview-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 960px) { .preview-hub__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .preview-hub__grid { grid-template-columns: 1fr; } }
.preview-hub__card {
  background: var(--c-white);
  border: 1px solid rgba(136, 169, 195, 0.32);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.preview-hub__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 55, 94, 0.08);
  border-color: var(--c-primary);
}
.preview-hub__slug {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.preview-hub__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--c-deep);
}
.preview-hub__desc {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  color: var(--c-soft);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   RESPONSIVE — universal
   ============================================================ */
@media (max-width: 960px) {
  .feature-cards { grid-template-columns: repeat(2, 1fr); }
  .feature-cards--2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .feature-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   SINGLE POST — sidebar with recent posts
   ============================================================ */
.post-layout { gap: 48px; grid-template-columns: minmax(0, 1.69fr) minmax(0, 0.7fr); }
.post-sidebar { position: sticky; top: 100px; }
.post-sidebar__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  color: var(--c-deep);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(136, 169, 195, 0.32);
}
.recent-posts-list { list-style: none; margin: 0; padding: 0; }
.recent-posts-list__item { margin: 0; }
.recent-posts-list__link {
  display: block;
  text-decoration: none;
  color: var(--c-deep);
  padding: 14px 0;
  border-bottom: 1px solid rgba(136, 169, 195, 0.2);
  transition: color 150ms ease;
}
.recent-posts-list__link:hover { color: var(--c-primary); }
.recent-posts-list__title {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  margin-bottom: 6px;
}
.recent-posts-list__date {
  display: block;
  font-size: var(--fs-caption);
  color: var(--c-soft);
}
@media (max-width: 960px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { position: static; margin-top: 32px; }
}