/*
Theme Name: Stucci
Theme URI: https://stuccimarketing.com/
Author: Stucci Marketing Group
Author URI: https://stuccimarketing.com/
Description: Custom hand-built theme for Stucci Marketing Group — Design System v2, Light Enterprise. Space Grotesk display, Inter body, copper accent on white surfaces, near-black footer plane.
Version: 1.3.3
Requires at least: 6.2
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: stucci
*/

/* ============================================================
   TOKENS — Stucci Design System v2 (Light Enterprise)
   Ported 1:1 from the source index.css. Copper is THE accent.
   ============================================================ */
:root {
  --stucci-base: #FFFFFF;
  --stucci-surface: #F7F8FA;
  --stucci-surface-2: #EFF2F5;
  --stucci-accent: #A85A2E;
  --stucci-accent-hover: #8A4622;
  --stucci-accent-active: #7A3D1E;
  --stucci-steel: #55677A;
  --stucci-text: #111827;
  /* Body muted — 5.97:1 on white, passes AA for normal text. */
  --stucci-text-muted: #5B6472;
  /* Small UI muted — nav links, metadata. 9.0:1 on white. */
  --stucci-text-muted-strong: #3F4A57;
  /* Footer ground — near-black so the page ends on a distinct plane. */
  --stucci-footer: #0B0F14;
  /* Copper lightened for use ON the footer ground (6.86:1). Text only. */
  --stucci-accent-on-dark: #D08A55;
  --stucci-text-on-dark: #9AA5B1;        /* 7.7:1 on footer ground */
  --stucci-text-on-dark-dim: #7E8A97;    /* 5.47:1 — copyright tier */
  --stucci-border: #E2E6EA;
  --stucci-border-hover: #C7CED6;
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --wrap: 80rem;         /* 1280px content column */
  --wrap-narrow: 48rem;  /* 768px reading column */
  --wrap-mid: 64rem;
  --header-h: 5rem;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--stucci-text);
  background-color: var(--stucci-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--stucci-text);
}
p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; }
a { color: var(--stucci-accent); text-decoration: none; }
a:hover { color: var(--stucci-accent-hover); }
::selection { background: rgba(168, 90, 46, 0.22); color: #111827; }

/* Copper focus ring as structure — :focus-visible so keyboard users get it
   without ringing every mouse click. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--stucci-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--stucci-accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9375rem;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  color: #fff;
}

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; word-wrap: normal !important;
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
.wrap-narrow { max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: 1.25rem; }
.wrap-mid { max-width: var(--wrap-mid); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 1024px) {
  .wrap, .wrap-narrow, .wrap-mid { padding-inline: 2rem; }
}

/* Section rhythm — 72px mobile / 120px desktop for the standard section;
   tight and generous keep their relationship to it. */
.section { padding-block: 4.5rem; }
.section-tight { padding-block: 3rem; }
.section-generous { padding-block: 5.5rem; }
@media (min-width: 1024px) {
  .section { padding-block: 7.5rem; }
  .section-tight { padding-block: 5rem; }
  .section-generous { padding-block: 9rem; }
}
.band-surface { background: var(--stucci-surface); border-top: 1px solid var(--stucci-border); }
.band-line { border-top: 1px solid var(--stucci-border); }

/* ============================================================
   TYPE SCALE — ds-* classes carried over from the source system
   ============================================================ */
.ds-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.ds-h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; line-height: 1.15; text-transform: none; }
.ds-h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.2; text-transform: none; }
.ds-body-lg { font-family: var(--font-body); font-weight: 400; font-size: 1.0625rem; line-height: 1.65; }
.ds-body { font-family: var(--font-body); font-weight: 400; font-size: 0.9375rem; line-height: 1.65; }
.ds-caption {
  font-family: var(--font-body); font-weight: 500; font-size: 0.6875rem;
  line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase;
}
@media (min-width: 1024px) {
  .ds-h1 { font-size: 4rem; letter-spacing: -0.038em; }
  .ds-h2 { font-size: 2.375rem; letter-spacing: -0.025em; }
  .ds-h3 { font-size: 2rem; }
  .ds-h4 { font-size: 1.375rem; }
  .ds-body-lg { font-size: 1.25rem; }
  .ds-body { font-size: 1.0625rem; }
  .ds-caption { font-size: 0.75rem; }
}
.text-muted { color: var(--stucci-text-muted); }
.text-accent { color: var(--stucci-accent); }

/* Eyebrow with the copper hairline above it — copper doing structural work. */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stucci-accent);
  margin: 0 0 1.25rem;
}
.eyebrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  margin-bottom: 0.875rem;
  background: var(--stucci-accent);
}
.eyebrow--bare::before { display: none; }
.eyebrow--center { text-align: center; }
.eyebrow--center::before { margin-inline: auto; }

/* Stat number — accent, flat, no gradient. */
.ds-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--stucci-accent);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) { .ds-stat { font-size: 3.75rem; } }

/* ============================================================
   BUTTONS — flat, no gradient, no glow. Hover is a fill change.
   ============================================================ */
.btn-solid,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.2;
}
.btn-solid {
  background: var(--stucci-accent);
  color: #FFFFFF;
  padding: 0.9375rem 2rem;
  border: none;
  transition: background-color 0.2s ease;
}
.btn-solid:hover { background: var(--stucci-accent-hover); color: #FFFFFF; }
.btn-solid:active { background: var(--stucci-accent-active); }
.btn-outline {
  background: transparent;
  color: var(--stucci-text);
  padding: 0.875rem 2rem;
  border: 1px solid var(--stucci-border-hover);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.btn-outline:hover {
  border-color: var(--stucci-accent);
  color: var(--stucci-accent);
  background: rgba(168, 90, 46, 0.04);
}
.btn-solid .icon, .btn-outline .icon { width: 1rem; height: 1rem; }
/* Inverse button for copper/dark bands */
.btn-inverse {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  background: #FFFFFF; color: var(--stucci-text);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 1.125rem 2.5rem; font-size: 1.0625rem;
  border: none; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.14), 0 20px 44px rgba(0,0,0,0.22);
  transition: background-color 0.2s ease;
}
.btn-inverse:hover { background: var(--stucci-surface); color: var(--stucci-text); }
.btn-row { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .btn-row { flex-direction: row; align-items: center; gap: 1rem; } }

/* ============================================================
   CARDS — flat on white, defined by the rule, not elevation.
   ============================================================ */
.card {
  background: #FFFFFF;
  border: 1px solid var(--stucci-border);
  border-radius: var(--radius-sm);
  padding: 2rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
@media (min-width: 1024px) { .card { padding: 2.75rem; } }
.card:hover { border-color: var(--stucci-accent); background: var(--stucci-surface); }
.card--tight { padding: 1.5rem; }
@media (min-width: 1024px) { .card--tight { padding: 1.75rem; } }

/* Hairline grid — 1px gaps over a border-colored background read as rules
   between cells; the grid needs no per-cell borders, radii or shadows. */
.hairline-grid {
  display: grid;
  gap: 1px;
  background: var(--stucci-border);
  border: 1px solid var(--stucci-border);
}
.hairline-grid > * { background: #FFFFFF; }
.hairline-grid--2 { grid-template-columns: 1fr; }
.hairline-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .hairline-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .hairline-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .hairline-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: var(--stucci-border);
  box-shadow: 0 1px 0 rgba(201, 100, 43, 0.12);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 1.5rem;
}
.brand-lockup { display: flex; flex-direction: column; text-decoration: none; line-height: 1.05; }
.brand-lockup__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--stucci-text);
}
.brand-lockup__tagline {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stucci-steel);
  margin-top: 0.2rem;
}
.brand-lockup:hover .brand-lockup__name { color: var(--stucci-accent); }
.brand-lockup .custom-logo { max-height: 3rem; width: auto; display: block; }

.site-nav { display: none; align-items: center; gap: 1.5rem; }
.site-nav ul { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--stucci-text-muted-strong);
  transition: color 0.2s ease;
}
.site-nav a:hover { color: var(--stucci-text); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a { color: var(--stucci-accent); }
.site-nav .btn-solid { font-size: 0.875rem; padding: 0.625rem 1.5rem; color: #fff; }
@media (min-width: 900px) { .site-nav { display: flex; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: transparent; border: none; cursor: pointer;
  color: var(--stucci-text); padding: 0;
}
.nav-toggle svg { width: 1.375rem; height: 1.375rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  flex-direction: column;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav__bar {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding-inline: 1.25rem;
  border-bottom: 1px solid var(--stucci-border);
  flex-shrink: 0;
}
.mobile-nav__list { flex: 1; overflow-y: auto; padding: 2rem 1.25rem; margin: 0; list-style: none; }
.mobile-nav__list a {
  display: block;
  padding: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--stucci-text-muted-strong);
  border-radius: var(--radius-sm);
}
.mobile-nav__list a:hover { background: var(--stucci-surface); color: var(--stucci-text); }
.mobile-nav__list .current-menu-item > a,
.mobile-nav__list .current_page_item > a {
  background: rgba(168, 90, 46, 0.1);
  color: var(--stucci-accent);
  border: 1px solid rgba(168, 90, 46, 0.25);
}
.mobile-nav__cta { flex-shrink: 0; padding: 1rem 1.25rem 2rem; border-top: 1px solid var(--stucci-border); }
.mobile-nav__cta .btn-solid { width: 100%; font-size: 1rem; padding: 1rem; }
body.nav-open { overflow: hidden; }

.site-main { padding-top: var(--header-h); }

/* ============================================================
   FOOTER — near-black plane under a copper hairline
   ============================================================ */
.site-footer { background: var(--stucci-footer); }
.site-footer__hairline { height: 2px; width: 100%; background: var(--stucci-accent); }
.site-footer a { color: var(--stucci-text-on-dark); }
.site-footer a:hover { color: var(--stucci-accent-on-dark); }
.site-footer__mast {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 3rem;
}
@media (min-width: 1024px) { .site-footer__mast { padding-block: 4rem; } }
.site-footer__mast-inner { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) {
  .site-footer__mast-inner { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.site-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1;
}
.site-footer__wordmark small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--stucci-text-on-dark-dim);
  margin-top: 0.5rem;
}
.site-footer__mission { color: var(--stucci-text-on-dark); font-size: 0.875rem; max-width: 28rem; margin: 0; }
@media (min-width: 1024px) { .site-footer__mission { text-align: right; } }
.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block: 3rem;
}
@media (min-width: 640px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__cols { grid-template-columns: repeat(4, 1fr); padding-block: 4rem; } }
.site-footer__col h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 1.25rem;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.site-footer__col a { font-size: 0.875rem; transition: color 0.2s ease; }
.site-footer__col .sub { display: block; color: var(--stucci-text-on-dark-dim); font-size: 0.75rem; margin-top: 0.125rem; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.footer-badges a {
  font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.25rem 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: var(--stucci-text-on-dark);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-badges a:hover { border-color: var(--stucci-accent-on-dark); color: var(--stucci-accent-on-dark); }
.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1.5rem;
}
.site-footer__legal-inner {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center;
}
@media (min-width: 640px) { .site-footer__legal-inner { flex-direction: row; justify-content: space-between; } }
.site-footer__legal p { margin: 0; font-size: 0.75rem; color: var(--stucci-text-on-dark-dim); }
.site-footer__legal-links { display: flex; gap: 1rem; }
.site-footer__legal-links a { font-size: 0.75rem; }

/* ============================================================
   HOME — hero, trust marks, disciplines, process, founder, CTA
   ============================================================ */
.home-hero { position: relative; background: #FFFFFF; overflow: hidden; }
.home-hero__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .home-hero__grid { grid-template-columns: 7fr 5fr; min-height: calc(100vh - var(--header-h)); }
}
.home-hero__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem 1.25rem 2.5rem;
  position: relative; z-index: 2;
}
@media (min-width: 1024px) { .home-hero__copy { padding: 5rem 4rem; } }
@media (min-width: 1280px) { .home-hero__copy { padding: 5rem 6rem; } }
.home-hero__copy .ds-body-lg { color: var(--stucci-text-muted); max-width: 36rem; margin-bottom: 2rem; }
.home-hero__copy .ds-body-lg a { color: var(--stucci-text); font-weight: 600; }
.home-hero__copy .ds-body-lg a:hover { color: var(--stucci-accent); text-decoration: underline; }
.hero-accent { position: relative; display: inline-block; color: var(--stucci-accent); }
.hero-accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.2rem;
  height: 3px; background: rgba(168, 90, 46, 0.7); border-radius: 999px;
}
.home-hero__media { position: relative; display: flex; align-items: center; padding: 0 1.25rem 3.5rem; }
@media (min-width: 1024px) { .home-hero__media { padding: 0; } }
.home-hero__frame { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.home-hero__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.home-hero__frame .tint-a { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.55); mix-blend-mode: multiply; }
.home-hero__frame .tint-b { position: absolute; inset: 0; background: var(--stucci-accent); mix-blend-mode: color; opacity: 0.4; }
.home-hero__frame .tint-c { position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 255, 255, 0.6), transparent 45%); }
.home-hero__frame .hairline { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--stucci-accent); }
/* Precision corner brackets — the recurring "operator" motif. */
.corner-bracket { display: none; position: absolute; width: 2.5rem; height: 2.5rem; z-index: 3; pointer-events: none; }
@media (min-width: 1024px) {
  .corner-bracket { display: block; }
  .corner-bracket--tl { top: 2rem; left: 2rem; border-top: 2px solid rgba(168, 90, 46, 0.4); border-left: 2px solid rgba(168, 90, 46, 0.4); }
  .corner-bracket--br { bottom: 2rem; right: 2rem; border-bottom: 2px solid rgba(168, 90, 46, 0.4); border-right: 2px solid rgba(168, 90, 46, 0.4); }
}

/* Trust marks — hairline separated band, not cards. */
.trust-marks { border-block: 1px solid var(--stucci-border); background: #FFFFFF; }
.trust-marks__row { display: flex; flex-direction: column; }
.trust-marks__row > * { border-bottom: 1px solid var(--stucci-border); padding-block: 1.25rem; }
.trust-marks__row > *:last-child { border-bottom: none; }
@media (min-width: 640px) {
  .trust-marks__row { flex-direction: row; align-items: stretch; }
  .trust-marks__row > * { border-bottom: none; border-right: 1px solid var(--stucci-border); padding: 1.5rem 2rem; }
  .trust-marks__row > *:first-child { padding-left: 0; }
  .trust-marks__row > *:last-child { border-right: none; margin-left: auto; padding-right: 0; display: flex; align-items: center; }
}
.trust-mark { display: flex; align-items: baseline; gap: 0.75rem; }
.trust-mark b {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  color: var(--stucci-accent); letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.trust-mark span, .trust-marks__loc {
  color: var(--stucci-text-muted-strong); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}

/* Discipline 2x2 editorial grid */
.discipline-cell { display: flex; height: 100%; flex-direction: column; padding: 1.75rem; transition: background-color 0.25s ease; }
@media (min-width: 1024px) { .discipline-cell { padding: 2.5rem; } }
.discipline-cell:hover { background: var(--stucci-surface); }
.discipline-cell__head { display: flex; align-items: flex-start; gap: 1.25rem; }
.discipline-cell__num {
  font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  letter-spacing: -0.02em; line-height: 1; color: var(--stucci-accent); flex-shrink: 0;
}
.discipline-cell h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.2; margin-bottom: 0.75rem; }
.discipline-cell h3 a { color: var(--stucci-text); }
.discipline-cell h3 a:hover { color: var(--stucci-accent); }
.discipline-cell p { color: var(--stucci-text-muted); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.25rem; }
.discipline-cell ul {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.375rem 1rem;
}
.discipline-cell ul a {
  font-size: 0.8125rem; color: var(--stucci-text-muted);
  border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease;
}
.discipline-cell ul a:hover { color: var(--stucci-text); border-bottom-color: var(--stucci-accent); }
.discipline-cell__stat {
  margin-top: auto; display: inline-flex; align-items: center; gap: 0.375rem;
  color: var(--stucci-accent); font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; width: fit-content;
}
.discipline-cell__stat svg { width: 0.875rem; height: 0.875rem; transition: transform 0.2s ease; }
.discipline-cell:hover .discipline-cell__stat svg { transform: translateX(0.25rem); }

/* Package strip — slim band, deliberately secondary to the grid above. */
.package-strip {
  margin-top: 1px;
  display: flex; flex-direction: column; gap: 1rem;
  border: 1px solid var(--stucci-border); border-top: 0;
  background: var(--stucci-surface);
  padding: 1.25rem 1.75rem;
}
@media (min-width: 640px) { .package-strip { flex-direction: row; align-items: center; justify-content: space-between; } }
.package-strip b { display: block; color: var(--stucci-accent); font-size: 0.875rem; margin-bottom: 0.25rem; }
.package-strip p { margin: 0; color: var(--stucci-text-muted); font-size: 0.75rem; line-height: 1.6; }
.package-strip .btn-outline { font-size: 0.8125rem; padding: 0.6875rem 1.5rem; flex-shrink: 0; }

/* Process timeline */
.process-grid { position: relative; display: grid; gap: 3rem; }
@media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.process-step { position: relative; padding-left: 4.25rem; }
@media (min-width: 1024px) { .process-step { padding-left: 0; padding-top: 5.5rem; } }
.process-step__num {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  background: var(--stucci-surface);
  border: 2px solid var(--stucci-accent);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(168, 90, 46, 0.2);
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem;
  color: var(--stucci-accent); line-height: 1;
}
@media (min-width: 1024px) { .process-step__num { width: 4rem; height: 4rem; font-size: 1.5rem; } }
.process-step .eyebrow { margin-bottom: 0.5rem; }
.process-step .eyebrow::before { display: none; }
.process-step h3 { font-size: 1.375rem; font-weight: 500; margin-bottom: 0.5rem; }
.process-step p { color: var(--stucci-text-muted); font-size: 0.9375rem; }
.process-step__deliverable {
  display: inline-block; margin-top: 0.75rem;
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.25rem 0.625rem; border-radius: 999px;
  background: rgba(168, 90, 46, 0.08); color: var(--stucci-accent);
  border: 1px solid rgba(168, 90, 46, 0.2);
}
.process-rule { display: none; }
@media (min-width: 1024px) {
  .process-rule { display: block; position: absolute; left: 0; right: 0; top: 2rem; height: 1px; background: var(--stucci-border); }
}

/* Founder block */
.founder { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .founder { grid-template-columns: 1fr 1fr; min-height: 37.5rem; } }
.founder__media { position: relative; overflow: hidden; min-height: 55vh; order: 2; margin-top: 2rem; }
@media (min-width: 1024px) { .founder__media { order: 1; min-height: 37.5rem; margin-top: 0; } }
.founder__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.founder__media .tint { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.4); mix-blend-mode: multiply; }
.founder__media .fade { position: absolute; inset: 0; background: linear-gradient(to top, #FFFFFF, rgba(255, 255, 255, 0.2) 40%, transparent); }
@media (min-width: 1024px) {
  .founder__media .fade { background: linear-gradient(to right, transparent 60%, #FFFFFF); }
}
.founder__caption { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.5rem; }
@media (min-width: 1024px) { .founder__caption { left: 2rem; bottom: 2rem; } }
.founder__caption .role { color: rgba(17, 24, 39, 0.7); margin-bottom: 0.25rem; }
.founder__caption .name { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--stucci-text); margin: 0 0 0.25rem; line-height: 1; }
.founder__caption .creds { color: var(--stucci-accent); margin: 0; }
.founder__copy { order: 1; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1024px) { .founder__copy { order: 2; padding-inline: 3rem; } }
.cred-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  margin-bottom: 1.5rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--stucci-border);
}
@media (min-width: 1024px) { .cred-strip { gap: 1.5rem; } }
.cred-strip > div { border-left: 2px solid var(--stucci-accent); padding-left: 1rem; }
@media (min-width: 1024px) { .cred-strip > div { padding-left: 1.25rem; } }
.cred-strip b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1; margin-bottom: 0.375rem;
  color: var(--stucci-text);
}
@media (min-width: 1024px) { .cred-strip b { font-size: 1.875rem; } }
.cred-strip .cred-title {
  display: block; color: var(--stucci-text); font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem;
}
.cred-strip .cred-detail { display: block; color: var(--stucci-text-muted); font-size: 0.6875rem; line-height: 1.4; }

blockquote.pull-quote {
  margin: 0 0 1.5rem; padding-left: 1.25rem;
  border-left: 2px solid var(--stucci-accent);
}
@media (min-width: 1024px) { blockquote.pull-quote { padding-left: 1.5rem; margin-block: 2rem; } }
blockquote.pull-quote p {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.125rem; line-height: 1.35; color: var(--stucci-text); margin-bottom: 0.5rem;
}
@media (min-width: 1024px) { blockquote.pull-quote p { font-size: 1.5rem; } }
blockquote.pull-quote footer, blockquote.pull-quote cite {
  font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--stucci-steel);
}

/* Copper CTA band */
.cta-band { background: var(--stucci-accent); }
.cta-band__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2rem; }
.cta-band h2 {
  font-family: var(--font-display); font-weight: 700; color: #FFFFFF;
  line-height: 1.0; text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(2.25rem, 5vw, 3.75rem); margin-bottom: 1.25rem;
}
.cta-band .lead { color: rgba(255, 255, 255, 0.8); max-width: 40rem; margin-inline: auto; }
.cta-band .fine { color: rgba(255, 255, 255, 0.6); margin: 0; }

/* Dark CTA panel (service pages) */
.cta-panel {
  position: relative; overflow: hidden;
  background: var(--stucci-text);
  border-radius: var(--radius-md);
  padding: 3rem 1.5rem; text-align: center;
}
@media (min-width: 1024px) { .cta-panel { padding: 3rem; } }
.cta-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255, 255, 255, 0.07) 14px, rgba(255, 255, 255, 0.07) 15px);
}
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 { color: #FFFFFF; }
.cta-panel .lead { color: rgba(255, 255, 255, 0.7); max-width: 40rem; margin-inline: auto; margin-bottom: 2rem; }
.cta-panel .fine { color: rgba(255, 255, 255, 0.5); font-size: 0.875rem; margin-top: 1.5rem; margin-bottom: 0; }
.cta-panel .btn-row { justify-content: center; }
.cta-panel .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: transparent; color: #FFFFFF; font-weight: 600; font-size: 0.9375rem;
  padding: 0.8125rem 1.75rem; border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm); text-decoration: none;
  transition: border-color 0.2s ease;
}
.cta-panel .btn-ghost:hover { border-color: rgba(255, 255, 255, 0.5); color: #FFFFFF; }

/* ============================================================
   SERVICE LANDING SECTIONS (svc-*) — style the structured page
   content that the importer carries as plain semantic HTML.
   ============================================================ */
.svc-hero { position: relative; overflow: hidden; padding-block: 3rem; }
@media (min-width: 1024px) { .svc-hero { padding-block: 5rem; } }
.svc-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(168, 90, 46, 0.09) 14px, rgba(168, 90, 46, 0.09) 15px);
}
.svc-hero > .wrap { position: relative; z-index: 1; }
.svc-hero__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .svc-hero__grid { grid-template-columns: 1fr 1fr; } }
.svc-hero__grid--single { max-width: 52rem; }
@media (min-width: 1024px) { .svc-hero__grid--single { grid-template-columns: 1fr; } }
.svc-hero .btn-row .icon, .svc-ticks .icon { width: 1rem; height: 1rem; }
.svc-hero .btn-row svg, .contact-sheet .label svg, .svc-ticks svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn-solid svg, .btn-outline svg, .btn-ghost svg, .btn-inverse svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.svc-hero h1 { margin-bottom: 1.5rem; }
.svc-hero h1 .accent { color: var(--stucci-accent); }
.svc-hero .positioning { color: var(--stucci-text-muted); margin-bottom: 2rem; }
.svc-ticks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.svc-ticks li { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--stucci-steel); font-size: 0.875rem; font-weight: 500; }
.svc-ticks svg { width: 1rem; height: 1rem; color: var(--stucci-accent); flex-shrink: 0; }
.svc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.svc-stats > div {
  background: #FFFFFF; border: 1px solid var(--stucci-border);
  border-radius: var(--radius-sm); padding: 1.5rem; text-align: center;
  transition: border-color 0.25s ease;
}
.svc-stats > div:hover { border-color: var(--stucci-accent); }
.svc-stats > div:first-child {
  background: rgba(255, 255, 255, 0.92); border-color: rgba(17, 24, 39, 0.1);
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.1);
}
.svc-stats b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1;
  color: var(--stucci-accent); margin-bottom: 0.375rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) { .svc-stats b { font-size: 2.25rem; } }
.svc-stats span { color: var(--stucci-text-muted); font-size: 0.875rem; }

.svc-section { padding-block: 3rem; }
@media (min-width: 1024px) { .svc-section { padding-block: 5rem; } }
.svc-section--surface { background: var(--stucci-surface); border-top: 1px solid var(--stucci-border); }
.svc-section--generous { padding-block: 4.5rem; }
@media (min-width: 1024px) { .svc-section--generous { padding-block: 7.5rem; } }
.svc-head { text-align: center; max-width: 44rem; margin: 0 auto 3.5rem; }
.svc-head .eyebrow::before { margin-inline: auto; }
.svc-head .sub { color: var(--stucci-text-muted); }

/* Dark hero variant (the Services hub) */
.svc-hero--dark { background: var(--stucci-text); }
.svc-hero--dark::before {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(168, 90, 46, 0.10) 14px, rgba(168, 90, 46, 0.10) 15px);
}
.svc-hero--dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 80% 20%, rgba(168, 90, 46, 0.18), transparent 55%);
}
.svc-hero--dark h1 { color: #FFFFFF; }
.svc-hero--dark h1 .accent { color: var(--stucci-accent-on-dark); }
.svc-hero--dark .positioning { color: rgba(255, 255, 255, 0.7); }
.svc-hero--dark .eyebrow { color: var(--stucci-accent-on-dark); }
.svc-hero--dark .eyebrow::before { background: var(--stucci-accent-on-dark); }
.svc-hero--dark .btn-outline { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.3); }
.svc-hero--dark .btn-outline:hover { border-color: var(--stucci-accent-on-dark); color: var(--stucci-accent-on-dark); background: transparent; }

.svc-why { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .svc-why { grid-template-columns: repeat(3, 1fr); } }
.svc-why > div { text-align: center; }
.svc-why h3 { font-size: 1.0625rem; font-weight: 500; margin-bottom: 0.75rem; }
@media (min-width: 1024px) { .svc-why h3 { font-size: 1.375rem; } }
.svc-why p { color: var(--stucci-text-muted); font-size: 0.9375rem; margin: 0; }
.svc-why .svc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-md);
  background: rgba(168, 90, 46, 0.1); margin-bottom: 1.25rem;
}
.svc-icon svg { width: 1.75rem; height: 1.75rem; color: var(--stucci-accent); }
/* Copper index numeral — the same numbering language the discipline grid
   uses, in place of decorative icon circles. */
.svc-why__num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1;
  color: var(--stucci-accent); margin-bottom: 1rem;
}

/* Chip row (keynote topics, tag-like labels) */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin: 0 0 2rem; padding: 0; list-style: none; }
.chip-row li {
  padding: 0.5rem 1rem; background: var(--stucci-surface-2);
  border: 1px solid var(--stucci-border); border-radius: 999px;
  color: var(--stucci-text-muted); font-size: 0.875rem; font-weight: 600;
}

/* Fact list — bordered rows with a copper tick, used on About */
.fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.fact-list li {
  background: #FFFFFF; border: 1px solid var(--stucci-border);
  border-left: 2px solid var(--stucci-accent);
  border-radius: var(--radius-sm); padding: 1.25rem 1.5rem;
}
.fact-list b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--stucci-text); margin-bottom: 0.25rem; }
.fact-list span { color: var(--stucci-text-muted); font-size: 0.9375rem; }

/* Included / capabilities: first item featured & asymmetric — breaks the
   uniform 3-card grid pattern. */
.svc-included { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .svc-included { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-included { grid-template-columns: repeat(3, 1fr); } }
.svc-included > div {
  background: #FFFFFF; border: 1px solid var(--stucci-border);
  border-radius: var(--radius-sm); padding: 1.5rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.svc-included > div:hover { border-color: var(--stucci-accent); }
.svc-included > div:first-child {
  border: 2px solid rgba(168, 90, 46, 0.25);
  border-radius: var(--radius-md);
  background: var(--stucci-surface);
  box-shadow: 0 2px 4px rgba(17, 24, 39, 0.05), 0 16px 40px rgba(17, 24, 39, 0.09);
  padding: 2rem;
  display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 768px) { .svc-included > div:first-child { grid-column: span 2; } }
@media (min-width: 1024px) { .svc-included > div:first-child { grid-row: span 2; } }
.svc-included h3 { font-size: 1.0625rem; font-weight: 500; margin-bottom: 0.5rem; }
.svc-included > div:first-child h3 { font-size: 1.375rem; }
@media (min-width: 1024px) { .svc-included > div:first-child h3 { font-size: 1.75rem; } }
.svc-included p { color: var(--stucci-text-muted); font-size: 0.9375rem; margin: 0; }

/* Process — bold numerals on charcoal tiles */
.svc-process { position: relative; display: grid; gap: 2rem; }
@media (min-width: 768px) { .svc-process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-process { grid-template-columns: repeat(4, 1fr); } }
.svc-process > div { text-align: center; }
@media (min-width: 1024px) { .svc-process > div { text-align: left; } }
.svc-process .step-num {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; margin: 0 auto 1.25rem;
  background: var(--stucci-text); border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #FFFFFF;
}
@media (min-width: 1024px) { .svc-process .step-num { margin-inline: 0; } }
.svc-process .step-num::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(168, 90, 46, 0.55), transparent);
}
.svc-process .step-num span { position: relative; z-index: 1; }
.svc-process h3 { font-size: 1.0625rem; font-weight: 500; margin-bottom: 0.5rem; }
@media (min-width: 1024px) { .svc-process h3 { font-size: 1.375rem; } }
.svc-process p { color: var(--stucci-text-muted); font-size: 0.9375rem; margin: 0; }

/* Proof block — the Romika metrics (social page only, by design) */
.svc-proof { border-left: 4px solid var(--stucci-accent); background: #FFFFFF; border-radius: var(--radius-sm); padding: 2rem; border-top: 1px solid var(--stucci-border); border-right: 1px solid var(--stucci-border); border-bottom: 1px solid var(--stucci-border); }
@media (min-width: 1024px) { .svc-proof { padding: 2.75rem; } }
.svc-proof__client { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; margin-bottom: 0.25rem; }
.svc-proof__context { color: var(--stucci-text-muted); font-size: 0.875rem; margin-bottom: 1.75rem; }
.svc-proof__metrics { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.75rem; }
@media (min-width: 640px) { .svc-proof__metrics { grid-template-columns: repeat(3, 1fr); } }
.svc-proof__metrics b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 2rem; letter-spacing: -0.03em; line-height: 1;
  color: var(--stucci-accent); margin-bottom: 0.375rem; font-variant-numeric: tabular-nums;
}
.svc-proof__metrics span { color: var(--stucci-text-muted); font-size: 0.8125rem; }
.svc-proof__source { color: var(--stucci-steel); font-size: 0.75rem; margin: 0; }
.svc-proof blockquote { margin: 0 0 1rem; padding: 0; border: 0; }
.svc-proof blockquote p { font-style: italic; color: var(--stucci-text-muted); font-size: 1rem; }

/* FAQ — native details/summary, no JS required. */
.svc-faq { display: grid; gap: 0.75rem; max-width: 48rem; margin-inline: auto; }
.svc-faq details {
  background: #FFFFFF; border: 1px solid var(--stucci-border);
  border-radius: var(--radius-sm); overflow: hidden;
  transition: border-color 0.25s ease;
}
.svc-faq details[open] { border-left: 3px solid var(--stucci-accent); }
.svc-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer; list-style: none;
  padding: 1.25rem;
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  color: var(--stucci-text);
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after {
  content: ""; flex-shrink: 0; width: 0.625rem; height: 0.625rem;
  border-right: 2px solid var(--stucci-steel); border-bottom: 2px solid var(--stucci-steel);
  transform: rotate(45deg); transition: transform 0.2s ease; margin-right: 0.25rem;
}
.svc-faq details[open] summary::after { transform: rotate(-135deg); border-color: var(--stucci-accent); }
.svc-faq details > p, .svc-faq details > div {
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0;
  border-top: 1px solid var(--stucci-border);
  color: var(--stucci-text-muted); font-size: 0.9375rem; line-height: 1.65;
}

/* Related links strip */
.svc-related { text-align: center; padding-block: 1rem 0.5rem; }
.svc-related .label { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stucci-steel); margin-bottom: 0.75rem; }
.svc-related ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }
.svc-related a {
  color: var(--stucci-text-muted); font-size: 0.875rem; font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--stucci-border);
  text-underline-offset: 4px; transition: color 0.2s ease;
}
.svc-related a:hover { color: var(--stucci-accent); }

/* Pricing tiers (used where a page carries package pricing) */
.svc-tiers { display: grid; gap: 2rem; max-width: 64rem; margin-inline: auto; }
@media (min-width: 768px) { .svc-tiers--2 { grid-template-columns: repeat(2, 1fr); } .svc-tiers--3 { grid-template-columns: repeat(3, 1fr); } }
.svc-tier { position: relative; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--stucci-border); border-radius: var(--radius-sm); padding: 2rem; }
.svc-tier--popular { border: 2px solid var(--stucci-accent); }
.svc-tier__badge {
  position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  background: var(--stucci-accent); color: #FFFFFF;
  font-size: 0.8125rem; font-weight: 600; padding: 0.25rem 1rem; border-radius: 999px;
}
.svc-tier h3 { font-size: 1.375rem; font-weight: 500; margin-bottom: 0.25rem; }
.svc-tier .tier-desc { color: var(--stucci-steel); font-size: 0.875rem; margin-bottom: 1rem; }
.svc-tier .tier-price { font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; letter-spacing: -0.03em; color: var(--stucci-accent); line-height: 1; }
.svc-tier ul { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: grid; gap: 0.75rem; flex: 1; }
.svc-tier li { display: flex; align-items: flex-start; gap: 0.625rem; color: var(--stucci-text-muted); font-size: 0.875rem; }
.svc-tier li svg { width: 1rem; height: 1rem; margin-top: 0.125rem; flex-shrink: 0; color: var(--stucci-accent); }
/* Starter program card — the ds-card border-left-copper treatment. */
.svc-tier--starter { border-left: 4px solid var(--stucci-accent); }
/* Nested quote card inside the starter program */
.quote-card {
  background: #FFFFFF; border: 1px solid var(--stucci-border);
  border-radius: var(--radius-sm); padding: 1.75rem; text-align: center;
  margin-top: 1.5rem;
}
.quote-card > svg { width: 2rem; height: 2rem; color: var(--stucci-accent); display: block; margin: 0 auto 0.75rem; }
.quote-card .quote-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--stucci-text); margin: 0 0 0.25rem; }
.quote-card .quote-card__sub { color: var(--stucci-text-muted); font-size: 0.875rem; margin: 0 0 1.25rem; }
.quote-card .btn-solid, .quote-card .btn-outline { width: 100%; margin-bottom: 0.75rem; }
.quote-card .btn-solid:last-child, .quote-card .btn-outline:last-child { margin-bottom: 0; }

/* Trust badge grid — the "Why Work With Us" chips */
.badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .badge-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .badge-grid { grid-template-columns: repeat(6, 1fr); gap: 1rem; } }
.badge-grid > div {
  background: #FFFFFF; border: 1px solid var(--stucci-border);
  border-radius: var(--radius-sm); padding: 1.25rem 1rem; text-align: center;
  transition: border-color 0.25s ease;
}
.badge-grid > div:hover { border-color: var(--stucci-accent); }
.badge-grid svg { width: 1.5rem; height: 1.5rem; color: var(--stucci-accent); display: block; margin: 0 auto 0.75rem; }
.badge-grid b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; color: var(--stucci-text); margin-bottom: 0.25rem; }
.badge-grid span { color: var(--stucci-steel); font-size: 0.6875rem; }

/* ============================================================
   BLOG / ARCHIVES
   ============================================================ */
.page-hero { padding-block: 3rem 2.5rem; }
@media (min-width: 1024px) { .page-hero { padding-block: 5rem 3.5rem; } }
.page-hero .lead { color: var(--stucci-text-muted); max-width: 40rem; }
.page-hero--center { text-align: center; }
.page-hero--center .eyebrow::before { margin-inline: auto; }
.page-hero--center .lead { margin-inline: auto; }

.post-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card {
  display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid var(--stucci-border);
  border-radius: var(--radius-sm); overflow: hidden;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.post-card:hover { border-color: var(--stucci-accent); }
.post-card__media { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: var(--stucci-surface-2); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.post-card__cat {
  align-self: flex-start; font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--stucci-accent);
  margin-bottom: 0.625rem;
}
.post-card h2, .post-card h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem;
  line-height: 1.3; margin-bottom: 0.5rem; text-transform: none; letter-spacing: -0.01em;
}
.post-card h2 a, .post-card h3 a { color: var(--stucci-text); }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--stucci-accent); }
.post-card__excerpt { color: var(--stucci-text-muted); font-size: 0.875rem; line-height: 1.55; margin-bottom: 1rem; flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: 0.75rem; color: var(--stucci-steel); font-size: 0.75rem; margin-top: auto; }

.pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding-inline: 0.75rem;
  border: 1px solid var(--stucci-border); border-radius: var(--radius-sm);
  color: var(--stucci-text-muted-strong); font-size: 0.875rem; font-weight: 600;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.pagination .page-numbers:hover { border-color: var(--stucci-accent); color: var(--stucci-accent); }
.pagination .page-numbers.current { background: var(--stucci-accent); border-color: var(--stucci-accent); color: #FFFFFF; }
.pagination .page-numbers.dots { border: none; }

/* Single post */
.entry-header { padding-block: 3rem 2rem; }
@media (min-width: 1024px) { .entry-header { padding-block: 4.5rem 2.5rem; } }
.entry-header .entry-title { text-transform: none; letter-spacing: -0.02em; font-size: 2rem; line-height: 1.1; font-weight: 700; }
@media (min-width: 1024px) { .entry-header .entry-title { font-size: 3rem; } }
.entry-header .subtitle { color: var(--stucci-text-muted); font-size: 1.125rem; margin-top: 0.5rem; }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; color: var(--stucci-steel); font-size: 0.8125rem; margin-top: 1.25rem; }
.entry-meta a { color: var(--stucci-accent); font-weight: 600; }
.entry-featured { margin-bottom: 2.5rem; }
.entry-featured img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--stucci-border); }

.breadcrumbs { font-size: 0.75rem; color: var(--stucci-steel); padding-top: 1.5rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.375rem; color: var(--stucci-border-hover); }
.breadcrumbs a { color: var(--stucci-steel); }
.breadcrumbs a:hover { color: var(--stucci-accent); }

/* Long-form typography — posts + generic pages */
.entry-content { font-size: 1.0625rem; line-height: 1.75; color: #2A3441; }
.entry-content > * { max-width: var(--wrap-narrow); margin-left: auto; margin-right: auto; }
.entry-content h2 { font-size: 1.5rem; margin: 2.5rem auto 1rem; text-transform: none; letter-spacing: -0.015em; }
@media (min-width: 1024px) { .entry-content h2 { font-size: 1.875rem; } }
.entry-content h3 { font-size: 1.25rem; margin: 2rem auto 0.75rem; }
@media (min-width: 1024px) { .entry-content h3 { font-size: 1.5rem; } }
.entry-content h4 { font-size: 1.0625rem; margin: 1.75rem auto 0.625rem; }
.entry-content p { margin-bottom: 1.25rem; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(168, 90, 46, 0.4); }
.entry-content a:hover { text-decoration-color: var(--stucci-accent); }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.entry-content li { margin-bottom: 0.5rem; }
.entry-content li::marker { color: var(--stucci-accent); }
.entry-content blockquote {
  border-left: 2px solid var(--stucci-accent);
  padding-left: 1.25rem; margin: 2rem auto;
  font-family: var(--font-display); font-weight: 500; font-size: 1.25rem;
  line-height: 1.4; color: var(--stucci-text);
}
.entry-content blockquote p { margin-bottom: 0.5rem; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content hr { border: none; border-top: 1px solid var(--stucci-border); margin: 2.5rem auto; }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.9375rem; }
.entry-content th, .entry-content td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--stucci-border); }
.entry-content th { font-family: var(--font-display); font-weight: 600; color: var(--stucci-text); }
.entry-content pre { background: var(--stucci-surface); border: 1px solid var(--stucci-border); border-radius: var(--radius-sm); padding: 1.25rem; overflow-x: auto; font-size: 0.875rem; }
.entry-content code { background: var(--stucci-surface-2); border-radius: 0.1875rem; padding: 0.125rem 0.375rem; font-size: 0.875em; }
.entry-content pre code { background: none; padding: 0; }
/* Full-bleed sections authored inside content escape the reading column */
.entry-content > section, .entry-content > .alignfull { max-width: none; }

/* Wide-template pages: content sections manage their own width via .wrap */
.page-sections .entry-content > * { max-width: none; margin-left: 0; margin-right: 0; }

/* Post navigation */
.post-nav { display: grid; gap: 1px; background: var(--stucci-border); border: 1px solid var(--stucci-border); margin-top: 3.5rem; }
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a { display: block; background: #FFFFFF; padding: 1.5rem; transition: background-color 0.2s ease; }
.post-nav a:hover { background: var(--stucci-surface); }
.post-nav .dir { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stucci-steel); margin-bottom: 0.375rem; }
.post-nav .title { font-family: var(--font-display); font-weight: 500; color: var(--stucci-text); font-size: 0.9375rem; line-height: 1.35; }
.post-nav .post-nav__next { text-align: right; }

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.portfolio-filter a {
  font-size: 0.8125rem; font-weight: 600; padding: 0.5rem 1rem;
  border: 1px solid var(--stucci-border); border-radius: var(--radius-sm);
  color: var(--stucci-text-muted-strong);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.portfolio-filter a:hover { border-color: var(--stucci-accent); color: var(--stucci-accent); }
.portfolio-filter a.is-active { background: var(--stucci-accent); border-color: var(--stucci-accent); color: #FFFFFF; }

.portfolio-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }
.portfolio-card {
  display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid var(--stucci-border);
  border-radius: var(--radius-sm); overflow: hidden;
  transition: border-color 0.25s ease;
}
.portfolio-card:hover { border-color: var(--stucci-accent); }
.portfolio-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--stucci-surface-2); }
.portfolio-card__media img, .portfolio-card__media video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.portfolio-card:hover .portfolio-card__media img { transform: scale(1.04); }
.portfolio-card__media .placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 2.5rem;
  color: var(--stucci-border-hover); letter-spacing: -0.02em;
}
.portfolio-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.portfolio-card__svc { align-self: flex-start; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stucci-accent); margin-bottom: 0.5rem; }
.portfolio-card h2, .portfolio-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; text-transform: none; margin-bottom: 0.375rem; }
.portfolio-card h2 a, .portfolio-card h3 a { color: var(--stucci-text); }
.portfolio-card h2 a:hover, .portfolio-card h3 a:hover { color: var(--stucci-accent); }
.portfolio-card__metric { color: var(--stucci-text-muted); font-size: 0.8125rem; margin: 0; }

.portfolio-single__meta {
  display: grid; gap: 1px; background: var(--stucci-border);
  border: 1px solid var(--stucci-border); margin-bottom: 2.5rem;
}
@media (min-width: 640px) { .portfolio-single__meta { grid-template-columns: repeat(3, 1fr); } }
.portfolio-single__meta > div { background: #FFFFFF; padding: 1.25rem 1.5rem; }
.portfolio-single__meta .label {
  display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stucci-steel); margin-bottom: 0.375rem;
}
.portfolio-single__meta .value { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: var(--stucci-text); }
.portfolio-single__media { margin-bottom: 2.5rem; }
.portfolio-single__media img, .portfolio-single__media video { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--stucci-border); }

/* ============================================================
   CONTACT SHEET (styled content on /contact and /book-strategy)
   ============================================================ */
.contact-sheet { display: grid; gap: 1px; background: var(--stucci-border); border: 1px solid var(--stucci-border); border-radius: var(--radius-sm); margin-bottom: 3rem; }
@media (min-width: 640px) { .contact-sheet { grid-template-columns: repeat(3, 1fr); } }
.contact-sheet a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  min-height: 7rem; padding: 1.5rem; background: #FFFFFF;
  transition: background-color 0.2s ease;
}
.contact-sheet a:hover { background: var(--stucci-surface); }
.contact-sheet .label {
  display: inline-flex; align-items: center; gap: 0.625rem;
  color: var(--stucci-steel); font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.contact-sheet .label svg { width: 1rem; height: 1rem; color: var(--stucci-accent); }
.contact-sheet .value { font-family: var(--font-display); font-weight: 600; color: var(--stucci-text); font-size: 1rem; line-height: 1.35; }
.contact-sheet a:hover .value { color: var(--stucci-accent); }

.social-row { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.social-row a span { display: block; }
.social-row .net { color: var(--stucci-text-muted); font-size: 0.875rem; font-weight: 500; transition: color 0.2s ease; }
.social-row .handle { color: var(--stucci-steel); font-size: 0.75rem; }
.social-row a:hover .net { color: var(--stucci-accent); }

/* ============================================================
   FORMS (native + common form plugins inherit these)
   ============================================================ */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], select, textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  color: var(--stucci-text); background: var(--stucci-surface-2);
  border: 1px solid var(--stucci-border); border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--stucci-accent); background: #FFFFFF; outline: none; }
::placeholder { color: var(--stucci-steel); opacity: 1; }
label { font-size: 0.875rem; font-weight: 500; color: var(--stucci-text-muted); }
button[type="submit"], input[type="submit"], .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--stucci-accent); color: #FFFFFF;
  font-family: var(--font-body); font-weight: 700; font-size: 0.9375rem;
  padding: 0.9375rem 2rem; border: none; border-radius: var(--radius-sm);
  cursor: pointer; transition: background-color 0.2s ease;
}
button[type="submit"]:hover, input[type="submit"]:hover, .wp-block-button__link:hover { background: var(--stucci-accent-hover); color: #FFFFFF; }

/* ============================================================
   GUTENBERG ALIGNMENT SUPPORT
   ============================================================ */
.alignwide { max-width: var(--wrap); margin-inline: auto; }
.alignfull { max-width: none; width: 100%; }
.aligncenter { display: block; margin-inline: auto; text-align: center; }
.alignleft { float: left; margin: 0.5rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption { font-size: 0.8125rem; color: var(--stucci-steel); margin-top: 0.5rem; }
.sticky {} .gallery-caption {} .bypostauthor {}

/* ============================================================
   MOTION — scroll reveal, gated on prefers-reduced-motion.
   Elements only hide when JS confirms it will reveal them
   (html.js), so no content can be stranded invisible.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.js .reveal.is-visible { opacity: 1; transform: none; }
  html.js .reveal[data-reveal-delay="1"] { transition-delay: 0.08s; }
  html.js .reveal[data-reveal-delay="2"] { transition-delay: 0.16s; }
  html.js .reveal[data-reveal-delay="3"] { transition-delay: 0.24s; }
  .card, .post-card, .portfolio-card, .svc-included > div, .svc-stats > div { will-change: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print */
@media print {
  .site-header, .site-footer, .mobile-nav, .skip-link { display: none; }
  .site-main { padding-top: 0; }
}

/* ============================================================
   v1.0.1 — Header offset + image crop fixes (2026-09-29)
   ============================================================ */

/* Keep the fixed header below the WP admin bar when logged in */
body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* Hero portrait: the source photo is a tall 473x1024 portrait; the 4:5
   frame cropped it to face-only. A taller, narrower frame shows the
   head-and-shoulders composition without the zoomed-in look. */
.home-hero__media { justify-content: center; }
.home-hero__frame {
  aspect-ratio: 11 / 20;
  max-width: 26rem;
  margin-inline: auto;
}

/* Founder section portrait: same treatment */
.founder__media {
  aspect-ratio: 11 / 20;
  min-height: 0 !important;
  max-width: 26rem;
  width: 100%;
  margin-inline: auto;
}

/* Portfolio thumbnails: logos and banner graphics were getting cut off
   by the cover crop — show the whole image on the neutral surface */
.portfolio-card__media img { object-fit: contain; padding: 0.875rem; }
.portfolio-card__media video { object-fit: contain; }

/* ============================================================
   v1.1.0 — Hero rebuild: The Growth System panel
   ============================================================ */

/* The photo column is gone; the media column now carries a layered
   system panel on a blueprint grid. */
.home-hero__media { padding: 3rem 1.25rem 3.5rem; }
@media (min-width: 1024px) { .home-hero__media { padding: 3rem 3rem 3rem 0; } }

.hero-system { position: relative; width: 100%; max-width: 30rem; margin-inline: auto; }

.hero-system__panel {
  position: relative;
  background:
    linear-gradient(rgba(226, 230, 234, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 230, 234, 0.55) 1px, transparent 1px),
    linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  border: 1px solid var(--stucci-border);
  border-top: 3px solid var(--stucci-accent);
  padding: 2rem 2rem 1.5rem;
  box-shadow: 0 24px 48px -24px rgba(11, 15, 20, 0.18);
}
.hero-system__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stucci-steel);
  margin-bottom: 1.5rem;
}
.hero-system__rail { list-style: none; margin: 0; padding: 0; position: relative; }
.hero-system__rail::before {
  content: "";
  position: absolute;
  left: 5px; top: 14px; bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, var(--stucci-accent), rgba(168, 90, 46, 0.25));
}
.hero-system__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.8125rem 0 0.8125rem 1.75rem;
}
.hero-system__step + .hero-system__step { border-top: 1px dashed var(--stucci-border); }
.hero-system__dot {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--stucci-accent);
}
.hero-system__icon { color: var(--stucci-accent); display: inline-flex; }
.hero-system__icon .icon { width: 1.375rem; height: 1.375rem; }
.hero-system__label { display: flex; flex-direction: column; line-height: 1.3; }
.hero-system__label b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--stucci-text);
}
.hero-system__label i { font-style: normal; font-size: 0.8125rem; color: var(--stucci-text-muted); }
.hero-system__foot {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--stucci-border);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stucci-accent);
}

/* Floating proof cards */
.hero-system__card {
  position: absolute;
  background: #FFFFFF;
  border: 1px solid var(--stucci-border);
  box-shadow: 0 16px 32px -16px rgba(11, 15, 20, 0.22);
  padding: 1rem 1.25rem;
  max-width: 15rem;
}
.hero-system__card--metric {
  top: -1.75rem; right: -1rem;
  border-left: 3px solid var(--stucci-accent);
  display: flex; flex-direction: column; gap: 0.125rem;
}
.hero-system__card--metric b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--stucci-accent);
  line-height: 1.1;
}
.hero-system__card--metric span { font-size: 0.8125rem; font-weight: 600; color: var(--stucci-text); }
.hero-system__card--metric i { font-style: normal; font-size: 0.6875rem; color: var(--stucci-steel); }
.hero-system__card--badge {
  bottom: -1.5rem; left: -1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
  max-width: 17rem;
}
.hero-system__badge-icon { color: var(--stucci-accent); display: inline-flex; flex-shrink: 0; }
.hero-system__badge-icon .icon { width: 1.5rem; height: 1.5rem; }
.hero-system__card--badge b { display: block; font-size: 0.8125rem; color: var(--stucci-text); line-height: 1.3; }
.hero-system__card--badge i { font-style: normal; font-size: 0.6875rem; color: var(--stucci-steel); }

@media (max-width: 1023px) {
  .hero-system__card--metric { top: -1.5rem; right: 0; }
  .hero-system__card--badge { bottom: -1.25rem; left: 0; }
}

/* Motion: staggered entrance + a slow float on the proof cards */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-system__step { opacity: 0; transform: translateY(14px); animation: heroStep 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  html.js .hero-system__step:nth-child(1) { animation-delay: 0.25s; }
  html.js .hero-system__step:nth-child(2) { animation-delay: 0.4s; }
  html.js .hero-system__step:nth-child(3) { animation-delay: 0.55s; }
  html.js .hero-system__step:nth-child(4) { animation-delay: 0.7s; }
  html.js .hero-system__card { opacity: 0; animation: heroCard 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  html.js .hero-system__card--metric { animation-delay: 0.9s; }
  html.js .hero-system__card--badge { animation-delay: 1.05s; }
  .hero-system__card--metric { will-change: transform; }
  html.js .hero-system__card--metric.is-settled { animation: heroFloat 6s ease-in-out 1.8s infinite; }
}
@keyframes heroStep { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes heroCard { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ════════════════════════════════════════════════════════════
   v1.3.0 — PREMIUM PASS (2026-09-29)
   Depth, hierarchy, layout variety and motion. Every animation
   lives inside prefers-reduced-motion: no-preference and is
   transform/opacity only — nothing here can shift layout.
   Brand tokens are unchanged; copper stays the single accent.
   ════════════════════════════════════════════════════════════ */

/* ── A. Added tokens: a directional shadow scale + one easing ── */
:root {
  /* Soft, low-opacity, biased downward. Tinted with the footer
     near-black rather than pure black so it sits in the palette. */
  --shadow-xs: 0 1px 2px rgba(11, 15, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(11, 15, 20, 0.04), 0 2px 8px -3px rgba(11, 15, 20, 0.07);
  --shadow-md: 0 2px 4px rgba(11, 15, 20, 0.04), 0 14px 28px -14px rgba(11, 15, 20, 0.13);
  --shadow-lg: 0 3px 6px rgba(11, 15, 20, 0.05), 0 30px 60px -30px rgba(11, 15, 20, 0.20);
  --shadow-copper: 0 2px 4px rgba(168, 90, 46, 0.10), 0 14px 30px -14px rgba(168, 90, 46, 0.24);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  /* Blueprint hairline grid — the hero panel's language, reused. */
  --blueprint: linear-gradient(rgba(226, 230, 234, 0.5) 1px, transparent 1px),
               linear-gradient(90deg, rgba(226, 230, 234, 0.5) 1px, transparent 1px);
  /* Lets <details> transition to an auto height where supported. */
  interpolate-size: allow-keywords;
}

/* ── B. Motion system ──────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* Refined reveal: smaller travel, longer settle, quintic out. */
  html.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.62s var(--ease-out-quint),
      transform 0.62s var(--ease-out-quint);
  }
  html.js .reveal.is-visible { opacity: 1; transform: none; }

  /* Six stagger steps at 70ms — finer than the old 4 x 80ms. */
  html.js .reveal[data-reveal-delay="1"] { transition-delay: 0.07s; }
  html.js .reveal[data-reveal-delay="2"] { transition-delay: 0.14s; }
  html.js .reveal[data-reveal-delay="3"] { transition-delay: 0.21s; }
  html.js .reveal[data-reveal-delay="4"] { transition-delay: 0.28s; }
  html.js .reveal[data-reveal-delay="5"] { transition-delay: 0.35s; }

  /* Card-type reveals settle from a 1.5% under-scale as well. */
  html.js .post-card.reveal,
  html.js .portfolio-card.reveal,
  html.js .card.reveal {
    transform: translateY(14px) scale(0.985);
    transform-origin: 50% 100%;
  }
  html.js .post-card.reveal.is-visible,
  html.js .portfolio-card.reveal.is-visible,
  html.js .card.reveal.is-visible { transform: none; }

  /* Rule variant: a hairline that draws instead of fading. */
  html.js .reveal--rule {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s var(--ease-out-quint) 0.1s;
  }
  html.js .reveal--rule.is-visible { transform: none; }

  /* Section-entry accent: the copper eyebrow hairline draws in. */
  html.js .reveal .eyebrow::before,
  html.js .reveal.eyebrow::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.56s var(--ease-out-quint) 0.12s;
  }
  html.js .reveal.is-visible .eyebrow::before,
  html.js .reveal.eyebrow.is-visible::before { transform: none; }
  html.js .reveal .eyebrow--center::before { transform-origin: center; }
}

/* ── C. Depth, material and hover intent ───────────────────── */

/* Base card: it now has a resting elevation, not just a rule. */
.card {
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.3s var(--ease-out-quint),
    background-color 0.3s var(--ease-out-quint),
    box-shadow 0.3s var(--ease-out-quint),
    transform 0.3s var(--ease-out-quint);
}
.card:hover { box-shadow: var(--shadow-md); }

/* Hairline-grid cells: a copper top edge wipes in on hover. The
   grid itself keeps its 1px-gap construction — no per-cell border. */
.hairline-grid > * { position: relative; }
.hairline-grid > *::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--stucci-accent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hairline-grid > *::before { transition: transform 0.45s var(--ease-out-quint); }
}
.hairline-grid > *:hover::before,
.hairline-grid > *:focus-within::before { transform: none; }

/* Buttons: resting elevation + a real press. */
.btn-solid {
  box-shadow: var(--shadow-xs);
  transition:
    background-color 0.22s ease,
    box-shadow 0.22s var(--ease-out-quint),
    transform 0.14s var(--ease-out-quint);
}
.btn-solid:hover { box-shadow: var(--shadow-copper); }
.btn-outline {
  transition:
    border-color 0.22s ease,
    color 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.22s var(--ease-out-quint),
    transform 0.14s var(--ease-out-quint);
}
.btn-outline:hover { box-shadow: var(--shadow-sm); }
.btn-inverse {
  /* Was a blunt 0 20px 44px rgba(0,0,0,.22) — now directional. */
  box-shadow: 0 2px 4px rgba(11, 15, 20, 0.12), 0 22px 44px -18px rgba(11, 15, 20, 0.36);
  transition:
    background-color 0.22s ease,
    box-shadow 0.28s var(--ease-out-quint),
    transform 0.14s var(--ease-out-quint);
}
.btn-inverse:hover { box-shadow: 0 3px 6px rgba(11, 15, 20, 0.14), 0 30px 56px -20px rgba(11, 15, 20, 0.42); }
@media (prefers-reduced-motion: no-preference) {
  .btn-solid:active,
  .btn-outline:active,
  .btn-inverse:active,
  button[type="submit"]:active,
  input[type="submit"]:active { transform: translateY(1px); }
  .btn-solid:active { box-shadow: var(--shadow-xs); }
  .btn-inverse:active { box-shadow: 0 1px 2px rgba(11, 15, 20, 0.16); }
}
button[type="submit"], input[type="submit"], .wp-block-button__link {
  box-shadow: var(--shadow-xs);
  transition: background-color 0.22s ease, box-shadow 0.22s var(--ease-out-quint), transform 0.14s var(--ease-out-quint);
}

/* Copper underline-draw for links that carry no persistent rule. */
.site-nav a:not(.btn-solid),
.site-footer__col a,
.social-row a .net,
.discipline-cell ul a,
.post-card h2 a, .post-card h3 a,
.portfolio-card h2 a, .portfolio-card h3 a,
.post-nav .title,
.svc-related a {
  background-image: linear-gradient(var(--stucci-accent), var(--stucci-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
}
@media (prefers-reduced-motion: no-preference) {
  .site-nav a:not(.btn-solid),
  .site-footer__col a,
  .social-row a .net,
  .discipline-cell ul a,
  .post-card h2 a, .post-card h3 a,
  .portfolio-card h2 a, .portfolio-card h3 a,
  .post-nav .title,
  .svc-related a { transition: background-size 0.4s var(--ease-out-quint), color 0.2s ease; }
}
.site-nav a:not(.btn-solid):hover,
.site-footer__col a:hover,
.social-row a:hover .net,
.discipline-cell ul a:hover,
.post-card h2 a:hover, .post-card h3 a:hover,
.portfolio-card h2 a:hover, .portfolio-card h3 a:hover,
.post-nav a:hover .title,
.svc-related a:hover { background-size: 100% 1px; }
/* On the dark footer the draw uses the on-dark copper. */
.site-footer__col a { background-image: linear-gradient(var(--stucci-accent-on-dark), var(--stucci-accent-on-dark)); }
/* The capability list already had a border-bottom; the draw replaces it. */
.discipline-cell ul a { border-bottom: 0; padding-bottom: 1px; }
/* svc-related kept its own underline — swap to the draw cleanly. */
.svc-related a { text-decoration: none; }

/* Icon baseline discipline — one stroke weight, one optical size. */
.icon { flex-shrink: 0; }
.btn-solid .icon, .btn-outline .icon, .btn-ghost .icon, .btn-inverse .icon { width: 1.0625rem; height: 1.0625rem; }
@media (prefers-reduced-motion: no-preference) {
  .btn-solid .icon, .btn-inverse .icon { transition: transform 0.35s var(--ease-out-quint); }
  .btn-solid:hover .icon, .btn-inverse:hover .icon { transform: translateX(0.1875rem); }
}

/* Shared section-header rhythm — replaces the ad-hoc inline margins. */
.section-head { margin-bottom: 3rem; }
.section-head--wide { max-width: 46rem; }
.section-head--center { text-align: center; margin-inline: auto; max-width: 44rem; }
.section-head--center .eyebrow::before { margin-inline: auto; }
.section-head .lead { color: var(--stucci-text-muted); max-width: 42rem; }
.section-head--center .lead { margin-inline: auto; }
.section-head h2 { margin-bottom: 1.125rem; }
@media (min-width: 1024px) {
  .section-head { margin-bottom: 4.5rem; }
  .section-head h2 { margin-bottom: 1.375rem; }
}

/* ── D. Header: smoother sticky transition + scroll progress ── */
.site-header {
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  transition:
    background-color 0.42s var(--ease-out-quint),
    border-color 0.42s var(--ease-out-quint),
    box-shadow 0.42s var(--ease-out-quint),
    backdrop-filter 0.42s var(--ease-out-quint),
    -webkit-backdrop-filter 0.42s var(--ease-out-quint);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  /* Was a hard 1px copper line pretending to be a shadow. */
  box-shadow: 0 1px 2px rgba(11, 15, 20, 0.04), 0 10px 24px -14px rgba(11, 15, 20, 0.18);
}
/* Copper scroll-progress hairline on the header's bottom edge.
   Transform-driven, so it never triggers layout or paint of the bar. */
.site-header__progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--stucci-accent);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  pointer-events: none;
  opacity: 0;
}
.site-header.is-scrolled .site-header__progress { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .site-header__progress { transition: opacity 0.42s var(--ease-out-quint); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header__progress { display: none; }
}
.site-nav .btn-solid { box-shadow: none; }
.site-nav .btn-solid:hover { box-shadow: var(--shadow-copper); }

/* ── E. Hero: tighter display leading, led hierarchy, parallax ─ */
.home-hero__copy .eyebrow { margin-bottom: 1.625rem; }
.home-hero .ds-h1 { margin-bottom: 1.25rem; }
@media (min-width: 1024px) {
  .home-hero .ds-h1 { line-height: 0.98; margin-bottom: 1.5rem; }
}
@media (min-width: 1280px) {
  .home-hero .ds-h1 { line-height: 0.96; letter-spacing: -0.042em; }
}
.home-hero__copy .ds-body-lg { max-width: 34rem; }
.hero-accent::after { height: 4px; bottom: -0.28rem; }
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-accent::after {
    transform: scaleX(0);
    transform-origin: left center;
    animation: heroUnderline 0.75s var(--ease-out-quint) 0.55s forwards;
  }
}
@keyframes heroUnderline { to { transform: none; } }
/* Corner brackets: the only parallax on the site, capped in JS. */
.corner-bracket { opacity: 0; }
@media (min-width: 1024px) {
  .corner-bracket { opacity: 1; will-change: transform; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  html.js .corner-bracket { opacity: 0; animation: bracketIn 0.9s var(--ease-out-quint) 0.35s forwards; }
}
@keyframes bracketIn { to { opacity: 1; } }
/* A soft plane behind the hero so the panel reads as layered. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60rem 40rem at 78% 42%, rgba(168, 90, 46, 0.045), transparent 70%);
  z-index: 0;
}
.home-hero__grid { position: relative; z-index: 1; }
.hero-system__panel { box-shadow: var(--shadow-lg); }

/* ── F. Trust marks: count-up, hover, optical weight ────────── */
.trust-marks { background: linear-gradient(180deg, #FFFFFF 0%, var(--stucci-surface) 100%); }
.trust-mark b { font-size: 1.75rem; }
@media (min-width: 1024px) { .trust-mark b { font-size: 2rem; } }
.trust-marks__row > * {
  transition: background-color 0.3s var(--ease-out-quint);
}
@media (min-width: 640px) {
  .trust-marks__row > *:not(:last-child):hover { background: rgba(168, 90, 46, 0.035); }
}
/* Count-up targets are pinned to their final width before counting,
   so the digit change can never move anything around it. */
.count-up { font-variant-numeric: tabular-nums; }

/* ── G. Disciplines: bracketed numerals, arrow easing ───────── */
.discipline-cell__num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: 0.375rem 0.5rem 0.5rem;
  border-top: 2px solid rgba(168, 90, 46, 0.35);
  border-left: 2px solid rgba(168, 90, 46, 0.35);
  font-size: 1.75rem;
}
@media (min-width: 1024px) { .discipline-cell__num { font-size: 2rem; } }
.discipline-cell__num { background-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .discipline-cell__num { transition: background-color 0.4s var(--ease-out-quint), border-color 0.4s var(--ease-out-quint); }
  .discipline-cell__stat svg { transition: transform 0.35s var(--ease-out-quint); }
  .discipline-cell:hover .discipline-cell__stat svg { transform: translateX(0.3125rem); }
}
.discipline-cell:hover .discipline-cell__num,
.discipline-cell:focus-within .discipline-cell__num {
  border-color: var(--stucci-accent);
  background-color: rgba(168, 90, 46, 0.07);
}
.discipline-cell h3 { letter-spacing: -0.015em; }
.discipline-cell p { max-width: 34rem; }

/* Package strip: a deliberate secondary band, not a leftover row. */
.package-strip {
  border-left: 3px solid var(--stucci-accent);
  box-shadow: var(--shadow-xs);
  transition: background-color 0.3s var(--ease-out-quint), box-shadow 0.3s var(--ease-out-quint);
}
.package-strip:hover { background: #FFFFFF; box-shadow: var(--shadow-sm); }

/* ── H. Process: the rule draws, the numerals gain material ─── */
.process-step__num {
  background:
    var(--blueprint),
    linear-gradient(180deg, #FFFFFF 0%, var(--stucci-surface) 100%);
  background-size: 14px 14px, 14px 14px, 100% 100%;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-width: 2px;
}
.process-step__deliverable { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.process-step h3 { letter-spacing: -0.01em; }
@media (min-width: 1024px) {
  .process-rule { background: linear-gradient(90deg, var(--stucci-accent), rgba(168, 90, 46, 0.18) 70%, var(--stucci-border)); height: 2px; }
}

/* ── I. Founder: layered media frame, optical pull-quote ────── */
.founder__media { box-shadow: var(--shadow-lg); border: 1px solid var(--stucci-border); }
.founder__caption { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75); }
.cred-strip > div { transition: border-color 0.3s var(--ease-out-quint); }
.cred-strip > div:hover { border-left-color: var(--stucci-accent-hover); }
blockquote.pull-quote { position: relative; }
blockquote.pull-quote p { text-indent: -0.36em; }
@media (min-width: 1024px) { blockquote.pull-quote p { line-height: 1.3; } }

/* ── J. Latest articles: a feature row, not three equal cards ─ */
.post-card { box-shadow: var(--shadow-xs); }
.post-card,
.portfolio-card {
  transition:
    border-color 0.3s var(--ease-out-quint),
    box-shadow 0.3s var(--ease-out-quint),
    transform 0.3s var(--ease-out-quint);
}
.post-card:hover, .portfolio-card:hover { box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: no-preference) {
  .post-card:hover, .portfolio-card:hover, .card:hover { transform: translateY(-3px); }
  .post-card__media img { transition: transform 0.7s var(--ease-out-quint); }
  .post-card:hover .post-card__media img { transform: scale(1.04); }
  .portfolio-card__media img, .portfolio-card__media video { transition: transform 0.7s var(--ease-out-quint); }
  .portfolio-card:hover .portfolio-card__media img { transform: scale(1.03); }
}
.post-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 15, 20, 0.14));
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .post-card__media::after { transition: opacity 0.5s var(--ease-out-quint); }
}
.post-card:hover .post-card__media::after { opacity: 1; }

/* Feature row: first article leads, the rest support. */
@media (min-width: 1024px) {
  .post-grid--feature { grid-template-columns: 2fr 1fr; align-items: start; }
  .post-grid--feature > .post-card:first-child { grid-row: span 2; }
  .post-grid--feature > .post-card:first-child .post-card__media { aspect-ratio: 16 / 9; }
  .post-grid--feature > .post-card:first-child .post-card__body { padding: 2rem 2rem 1.75rem; }
  .post-grid--feature > .post-card:first-child h2,
  .post-grid--feature > .post-card:first-child h3 { font-size: 1.625rem; line-height: 1.2; }
  .post-grid--feature > .post-card:first-child .post-card__excerpt { font-size: 1rem; line-height: 1.6; }
  /* Supporting cards drop their media and read as a compact list. */
  .post-grid--feature > .post-card:not(:first-child) .post-card__media { display: none; }
  .post-grid--feature > .post-card:not(:first-child) .post-card__body { padding: 1.5rem; }
  .post-grid--feature > .post-card:not(:first-child) .post-card__excerpt { display: none; }
  .post-grid--feature > .post-card:not(:first-child) h2,
  .post-grid--feature > .post-card:not(:first-child) h3 { font-size: 1.125rem; }
}

/* ── K. CTA band: texture, plane, top hairline ──────────────── */
.cta-band { position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.cta-band::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255, 255, 255, 0.055) 14px, rgba(255, 255, 255, 0.055) 15px);
}
.cta-band::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50rem 28rem at 50% 0%, rgba(255, 255, 255, 0.14), transparent 70%);
}
.cta-band > .wrap { position: relative; z-index: 1; }
.cta-band h2 { text-wrap: balance; }

/* ── L. FAQ disclosure: animate open and closed ─────────────── */
.svc-faq details { box-shadow: var(--shadow-xs); }
.svc-faq details:hover { border-color: var(--stucci-border-hover); }
.svc-faq details[open] { box-shadow: var(--shadow-sm); }
.svc-faq summary { transition: color 0.2s ease; }
.svc-faq summary:hover { color: var(--stucci-accent); }
@media (prefers-reduced-motion: no-preference) {
  .svc-faq summary::after { transition: transform 0.35s var(--ease-out-quint), border-color 0.35s ease; }
  /* Fallback for engines without ::details-content: fade the panel in. */
  .svc-faq details[open] > p,
  .svc-faq details[open] > div { animation: faqReveal 0.36s var(--ease-out-quint); }
  /* Modern path: a true height transition both ways. */
  @supports selector(::details-content) {
    .svc-faq details::details-content {
      block-size: 0;
      overflow: clip;
      opacity: 0;
      transition:
        block-size 0.34s var(--ease-out-quint),
        opacity 0.28s var(--ease-out-quint),
        content-visibility 0.34s allow-discrete;
    }
    .svc-faq details[open]::details-content { block-size: auto; opacity: 1; }
    .svc-faq details[open] > p,
    .svc-faq details[open] > div { animation: none; }
  }
}
@keyframes faqReveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ── M. Long-form reading typography ────────────────────────── */
.entry-content { text-wrap: pretty; }
.entry-content > p:first-of-type { font-size: 1.1875rem; line-height: 1.7; color: var(--stucci-text-muted); }
@media (min-width: 1024px) { .entry-content > p:first-of-type { font-size: 1.3125rem; } }
.entry-content > h2 {
  position: relative;
  padding-top: 1.125rem;
  margin-top: 3rem;
  text-wrap: balance;
}
.entry-content > h2::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2px;
  background: var(--stucci-accent);
}
.entry-content > h3 { text-wrap: balance; }
.entry-content > h3::before {
  content: "";
  display: inline-block;
  width: 0.75rem; height: 2px;
  vertical-align: 0.28em;
  margin-right: 0.625rem;
  background: var(--stucci-accent);
}
.entry-content .btn-solid, .entry-content .btn-outline,
.entry-content .btn-ghost, .entry-content .btn-inverse,
.entry-content .svc-ticks a, .entry-content .chip-row a { text-decoration: none; }
.entry-content a { text-decoration-thickness: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .entry-content a { transition: color 0.2s ease, text-decoration-color 0.25s ease, text-decoration-thickness 0.2s ease; }
}
.entry-content a:hover { text-decoration-thickness: 2px; }
/* Lists: copper rules and tabular numerals instead of browser marks. */
.entry-content > ul:not([class]), .entry-content > ul.wp-block-list { list-style: none; padding-left: 0; }
.entry-content > ul:not([class]) > li, .entry-content > ul.wp-block-list > li { position: relative; padding-left: 1.5rem; }
.entry-content > ul:not([class]) > li::before, .entry-content > ul.wp-block-list > li::before {
  content: "";
  position: absolute; left: 0; top: 0.72em;
  width: 0.625rem; height: 2px;
  background: var(--stucci-accent);
}
.entry-content > ol:not([class]), .entry-content > ol.wp-block-list { list-style: none; counter-reset: sc; padding-left: 0; }
.entry-content > ol:not([class]) > li, .entry-content > ol.wp-block-list > li { position: relative; counter-increment: sc; padding-left: 2rem; }
.entry-content > ol:not([class]) > li::before, .entry-content > ol.wp-block-list > li::before {
  content: counter(sc) ".";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--stucci-accent);
}
.entry-content li > ul, .entry-content li > ol { margin-top: 0.5rem; margin-bottom: 0; }
/* Blockquote: a layered surface with a hanging copper mark. */
.entry-content > blockquote, .entry-content > figure.wp-block-quote blockquote {
  position: relative;
  background: var(--stucci-surface);
  border-left: 3px solid var(--stucci-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.75rem 1.75rem 1.5rem 2.75rem;
  box-shadow: var(--shadow-xs);
  font-size: 1.1875rem;
}
@media (min-width: 1024px) { .entry-content > blockquote { font-size: 1.375rem; padding-left: 3.25rem; } }
.entry-content > blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0.875rem; top: 0.25rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.75rem; line-height: 1;
  color: rgba(168, 90, 46, 0.35);
}
@media (min-width: 1024px) { .entry-content > blockquote::before { left: 1.125rem; } }
.entry-content > blockquote cite,
.entry-content > blockquote footer {
  display: block;
  font-family: var(--font-body); font-style: normal; font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--stucci-steel);
  margin-top: 0.75rem;
}
/* Tables: header rule, zebra rows, tabular figures. */
.entry-content > table, .entry-content > figure table {
  border: 1px solid var(--stucci-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-xs);
}
.entry-content > table thead th, .entry-content > figure table thead th {
  background: var(--stucci-surface-2);
  border-bottom: 2px solid var(--stucci-border-hover);
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--stucci-text-muted-strong);
}
.entry-content > table tbody tr:nth-child(even), .entry-content > figure table tbody tr:nth-child(even) { background: var(--stucci-surface); }
.entry-content > table tbody tr:last-child td, .entry-content > figure table tbody tr:last-child td { border-bottom: 0; }
.entry-content > table th, .entry-content > table td, .entry-content > figure table th, .entry-content > figure table td { padding: 0.8125rem 1rem; }
.entry-content figure { margin-inline: auto; }
.entry-content > img, .entry-content > p > img, .entry-content > figure img { box-shadow: var(--shadow-sm); }
.entry-content > pre { box-shadow: inset 0 1px 2px rgba(11, 15, 20, 0.05); line-height: 1.6; }
.entry-content code { border: 1px solid var(--stucci-border); color: var(--stucci-text); }
.entry-content pre code { border: 0; }
.entry-content > hr {
  border-top: 0;
  height: 2px;
  width: 3rem;
  background: var(--stucci-accent);
  margin-block: 3rem;
}
.entry-header .entry-title { text-wrap: balance; }
@media (min-width: 1024px) { .entry-header .entry-title { line-height: 1.04; letter-spacing: -0.028em; } }
.entry-header .subtitle { max-width: 40rem; }
.entry-featured img { box-shadow: var(--shadow-md); }
.post-nav a { transition: background-color 0.25s var(--ease-out-quint); }

/* ── N. Portfolio: the metric is the point of a case study ──── */
.page-hero { position: relative; }
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: 1.125rem;
}
.page-hero__title--sentence { text-transform: none; font-size: clamp(1.875rem, 4.4vw, 2.75rem); letter-spacing: -0.024em; }
.page-hero .lead { max-width: 42rem; }

.portfolio-filter a {
  position: relative;
  background-image: linear-gradient(rgba(168, 90, 46, 0.08), rgba(168, 90, 46, 0.08));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .portfolio-filter a { transition: border-color 0.25s ease, color 0.25s ease, background-size 0.35s var(--ease-out-quint); }
}
.portfolio-filter a:hover { background-size: 100% 100%; }
.portfolio-filter a.is-active { background-image: none; }

/* Single case study: the Impact cell leads. */
.portfolio-single__meta { box-shadow: var(--shadow-sm); }
.portfolio-single__meta > div { transition: background-color 0.3s var(--ease-out-quint); }
.portfolio-single__meta > div:hover { background: var(--stucci-surface); }
.portfolio-single__meta .is-metric {
  background:
    var(--blueprint),
    linear-gradient(180deg, #FFFFFF 0%, var(--stucci-surface) 100%);
  background-size: 22px 22px, 22px 22px, 100% 100%;
  border-top: 3px solid var(--stucci-accent);
  padding-block: 1.5rem;
}
.portfolio-single__meta .is-metric .value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--stucci-accent);
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
@media (min-width: 1024px) { .portfolio-single__meta .is-metric .value { font-size: 2.375rem; } }
@media (max-width: 639px) { .portfolio-single__meta .is-metric { order: -1; } }
.portfolio-single__media img, .portfolio-single__media video { box-shadow: var(--shadow-md); }
.portfolio-card__media { background: linear-gradient(180deg, var(--stucci-surface) 0%, var(--stucci-surface-2) 100%); }
.portfolio-card__metric { font-weight: 600; color: var(--stucci-text-muted-strong); }

/* ── O. Service pages: depth on the existing structures ─────── */
.svc-stats > div {
  box-shadow: var(--shadow-xs);
  transition: border-color 0.3s var(--ease-out-quint), box-shadow 0.3s var(--ease-out-quint), transform 0.3s var(--ease-out-quint);
}
.svc-stats > div:hover { box-shadow: var(--shadow-sm); }
.svc-stats > div:first-child { box-shadow: var(--shadow-md); }
.svc-included > div { box-shadow: var(--shadow-xs); transition: border-color 0.3s var(--ease-out-quint), background-color 0.3s var(--ease-out-quint), box-shadow 0.3s var(--ease-out-quint), transform 0.3s var(--ease-out-quint); }
.svc-included > div:hover { box-shadow: var(--shadow-sm); }
.svc-included > div:first-child:hover { box-shadow: var(--shadow-lg); }
.badge-grid > div { box-shadow: var(--shadow-xs); transition: border-color 0.3s var(--ease-out-quint), box-shadow 0.3s var(--ease-out-quint), transform 0.3s var(--ease-out-quint); }
.badge-grid > div:hover { box-shadow: var(--shadow-sm); }
.svc-tier { box-shadow: var(--shadow-sm); }
.svc-tier--popular { box-shadow: var(--shadow-md); }
.fact-list li { box-shadow: var(--shadow-xs); transition: border-color 0.3s var(--ease-out-quint), box-shadow 0.3s var(--ease-out-quint), transform 0.3s var(--ease-out-quint); }
.fact-list li:hover { border-color: var(--stucci-border-hover); box-shadow: var(--shadow-sm); }
.contact-sheet { box-shadow: var(--shadow-sm); }
.svc-proof { box-shadow: var(--shadow-sm); }
.chip-row li { transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease; }
.chip-row li:hover { border-color: var(--stucci-border-hover); color: var(--stucci-text); background: #FFFFFF; }
.quote-card { box-shadow: var(--shadow-sm); }
.svc-process .step-num { box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: no-preference) {
  .svc-stats > div:hover,
  .svc-included > div:hover,
  .badge-grid > div:hover,
  .fact-list li:hover { transform: translateY(-3px); }
}
.svc-head h2 { text-wrap: balance; }
.svc-hero h1 { text-wrap: balance; }
@media (min-width: 1024px) { .svc-hero h1 { line-height: 0.99; } }

/* ── P. Responsive guards — nothing may overflow ────────────── */
html { overflow-x: clip; }
@media (max-width: 419px) {
  .hero-system__card--metric { top: -1.25rem; right: 0; max-width: 13rem; padding: 0.8125rem 1rem; }
  .hero-system__card--badge { bottom: -1rem; left: 0; max-width: 15rem; padding: 0.8125rem 1rem; }
  .hero-system__card--metric b { font-size: 1.5rem; }
  .hero-system__panel { padding: 1.75rem 1.5rem 1.25rem; }
  .ds-h1 { font-size: 2rem; }
  .cta-band h2 { font-size: 2rem; }
  .discipline-cell { padding: 1.5rem; }
  .entry-content blockquote { padding: 1.5rem 1.25rem 1.25rem 2.25rem; font-size: 1.0625rem; }
  .trust-mark b { font-size: 1.5rem; }
}
@media (max-width: 767px) {
  .section-head { margin-bottom: 2.5rem; }
  .entry-content > table { display: block; overflow-x: auto; }
}

/* ============================================================
   v1.3.1 — Embedded form + scheduler surfaces
   ============================================================ */
.stucci-form { margin-block: 1.5rem; }
.stucci-form .wpforms-container { margin: 0; }
.stucci-form .wpforms-form input[type="text"],
.stucci-form .wpforms-form input[type="email"],
.stucci-form .wpforms-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--stucci-text);
  background: #FFFFFF;
  border: 1px solid var(--stucci-border);
  border-radius: 0;
  padding: 0.75rem 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.stucci-form .wpforms-form input[type="text"]:focus,
.stucci-form .wpforms-form input[type="email"]:focus,
.stucci-form .wpforms-form textarea:focus {
  outline: none;
  border-color: var(--stucci-accent);
  box-shadow: 0 0 0 3px rgba(168, 90, 46, 0.12);
}
.stucci-form .wpforms-form label.wpforms-field-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stucci-text);
  margin-bottom: 0.4375rem;
}
.stucci-form .wpforms-form .wpforms-field-sublabel { color: var(--stucci-steel); font-size: 0.75rem; }
.stucci-form .wpforms-form button[type="submit"] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  background: var(--stucci-accent);
  border: 0;
  border-radius: 0;
  padding: 0.8125rem 1.75rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.stucci-form .wpforms-form button[type="submit"]:hover { background: var(--stucci-accent-hover); }
.stucci-form .wpforms-form button[type="submit"]:active { background: var(--stucci-accent-active); transform: translateY(1px); }
.stucci-form .wpforms-form .wpforms-required-label { color: var(--stucci-accent); }
.stucci-form--fallback p { color: var(--stucci-text-muted); }
.stucci-scheduler { margin-block: 1.5rem; }
.stucci-scheduler iframe { width: 100%; min-height: 40rem; border: 1px solid var(--stucci-border); }

/* ============================================================
   v1.3.2 — Plugin surface brand alignment (WPForms + scheduler)
   WPForms 8.x styles its fields/buttons from CSS custom properties
   set on the container, so set those rather than fight specificity.
   ============================================================ */
.stucci-form .wpforms-container,
.stucci-form .wpforms-container-full {
  --wpforms-field-border-radius: 0px;
  --wpforms-field-border-color: var(--stucci-border);
  --wpforms-field-text-color: var(--stucci-text);
  --wpforms-field-background-color: #FFFFFF;
  --wpforms-label-color: var(--stucci-text);
  --wpforms-label-sublabel-color: var(--stucci-steel);
  --wpforms-label-error-color: #B42318;
  --wpforms-button-border-radius: 0px;
  --wpforms-button-background-color: #A85A2E;
  --wpforms-button-text-color: #FFFFFF;
  --wpforms-page-break-color: #A85A2E;
}
/* Hover/active aren't variable-driven in every build — pin them directly. */
.stucci-form .wpforms-container button[type="submit"]:hover,
.stucci-form .wpforms-container .wpforms-submit:hover {
  background-color: #8A4622 !important;
}
.stucci-form .wpforms-container button[type="submit"]:active,
.stucci-form .wpforms-container .wpforms-submit:active {
  background-color: #7A3D1E !important;
}
.stucci-form .wpforms-container button[type="submit"]:focus-visible,
.stucci-form .wpforms-container .wpforms-submit:focus-visible {
  outline: 2px solid var(--stucci-accent);
  outline-offset: 3px;
}

/* Simply Schedule Appointments — pull its accent to copper and flatten
   the default rounded/blue look so it reads as part of the site. */
.stucci-scheduler .ssa-btn-primary,
.stucci-scheduler button.ssa-btn-primary,
.stucci-scheduler .ssa-button-primary {
  background-color: var(--stucci-accent) !important;
  border-color: var(--stucci-accent) !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
  font-family: var(--font-display);
  font-weight: 600;
}
.stucci-scheduler .ssa-btn-primary:hover,
.stucci-scheduler button.ssa-btn-primary:hover,
.stucci-scheduler .ssa-button-primary:hover {
  background-color: var(--stucci-accent-hover) !important;
  border-color: var(--stucci-accent-hover) !important;
}
.stucci-scheduler .ssa-time-slot:hover,
.stucci-scheduler .ssa-day-available:hover {
  border-color: var(--stucci-accent) !important;
}
.stucci-scheduler a { color: var(--stucci-accent); }

/* ============================================================
   v1.3.2 — Mobile fix: hero proof cards must not overlap the
   Growth System panel's footer line. Below the two-column
   breakpoint they stack in normal flow beneath the panel.
   ============================================================ */
@media (max-width: 1023px) {
  .hero-system { padding-bottom: 0; }
  .hero-system__card {
    position: static;
    max-width: none;
    width: 100%;
    margin-top: 0.75rem;
    box-shadow: var(--shadow-sm, 0 8px 20px -12px rgba(11, 15, 20, 0.18));
  }
  .hero-system__card--metric { border-left: 3px solid var(--stucci-accent); }
  .hero-system__card--badge { align-items: flex-start; }
  /* the float animation is only sensible on the absolutely-placed card */
  /* Disable the float on mobile, but keep the card visible: cancelling the
     animation also cancels its "forwards" fill, so opacity must be pinned. */
  .hero-system__card--metric.is-settled { animation: none !important; opacity: 1 !important; }
  html.js .hero-system__card { opacity: 1; }
}