/* jamiegerrard.com main stylesheet. Single file, no preprocessor. */

/* ─── FONTS ─── */
@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/source-serif-4-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/source-serif-4-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/source-serif-4-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── TOKENS ─── */
:root {
  --charcoal: #232323;
  --gold: #E5C776;
  --gold-strong: #A6862B;
  --gold-tint: #F2E8C5;

  --gold-soft: rgba(229, 199, 118, 0.6);

  /* Tinted zones override this to --gold-strong. See ZONE PADDING. */
  --accent-line: var(--gold);
  --grey-50: #FAFAF8;
  --grey-100: #ECECEA;
  --grey-150: #E0E0DD;
  --white: #ffffff;
  --rule: rgba(35, 35, 35, 0.10);
  --rule-strong: rgba(35, 35, 35, 0.18);
  --text-body: #333333;
  --text-mute: #555555;
  --label: #555555;
  --error: #B23A2E;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --max-width: 1100px;
  --gutter: 40px;

  --col-meta: 320px;

  --col-gap: 60px;
  /* Read by main.js initNavScrollState. Flips to 66px at 600px, so keep the
     RESPONSIVE value and the JS fallback in step. */
  --nav-height: 76px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.2s;
  --t-med: 0.25s;
  --charcoal-gradient:
    radial-gradient(ellipse 1000px 700px at 18% 22%, rgba(229, 199, 118, 0.10) 0%, transparent 60%),
    linear-gradient(135deg, #2d2d2d 0%, #232323 50%, #1a1a1a 100%);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── BASE TYPOGRAPHY ─── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 4px);
}
body {
  font-family: 'Roboto', sans-serif;
  background: var(--white);
  color: var(--charcoal);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
ul { list-style: none; }
button { font-family: inherit; }

/* ─── CONTAINER ─── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ─── SKIP LINK ─── */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 1000;
  background: var(--charcoal);
  color: var(--gold);
  padding: 12px 20px;
  border-radius: 4px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus {
  top: 16px;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ─── NAV ─── */
/* main.js initNavScrollState toggles .is-scrolled. */
.nav {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) ease;
}
.nav.is-scrolled {
  border-bottom-color: var(--rule);
}

/* Opt-in per page via the bodyClass front matter field. */
body.has-static-nav .nav {
  position: static;
}

/* Companion to the rule above, and must change with it. scroll-padding
   belongs to html, so the body class is reached through :has(). Without this
   the pages with a static nav still reserve space for a sticky one. */
@supports selector(:has(*)) {
  html:has(body.has-static-nav) { scroll-padding-top: 0; }
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: opacity var(--t-fast) ease;
}
@media (hover: hover) {
  .nav-brand:hover { opacity: 0.82; }
}
.nav-logo {
  display: block;
  width: 48px;
  height: 48px;
}
.nav-logo svg { display: block; width: 100%; height: 100%; }

.nav-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.nav-wordmark {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.005em;
  line-height: 1;
}

.nav-descriptor {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-mute);
  line-height: 1;
  letter-spacing: 0;
}
.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  align-items: center;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a {
  color: var(--charcoal);
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  position: relative;
  padding: 6px 0;
  transition: color var(--t-fast) ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s ease;
}
@media (hover: hover) {
  .nav-links a:hover::after { transform: scaleX(1); }
}
.nav-links a.is-current { font-weight: 700; }

.nav-links a.is-current::after {
  transform: scaleX(1);
  height: 2.5px;
}

.nav .nav-cta-link {
  background: var(--charcoal);
  color: var(--gold);
  height: 32px;
  padding: 10px 22px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
  line-height: 1;
  display: inline-block;
}
.nav .nav-cta-link::after { display: none !important; }
@media (hover: hover) {
  .nav .nav-cta-link:hover {
    background: var(--gold);
    color: var(--charcoal);
  }
}

.nav .nav-cta-link.is-current {
  background: var(--gold);
  color: var(--charcoal);
}
@media (hover: hover) {
  .nav .nav-cta-link.is-current:hover {
    background: var(--gold-strong);
    color: var(--white);
  }
}

.nav-menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  cursor: pointer;
  color: var(--charcoal);
  font-family: inherit;

  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
@media (hover: hover) {
  .nav-menu-btn:hover {
    border-color: var(--charcoal);
    background: var(--grey-50);
  }
}
.nav-menu-btn svg { display: block; width: 18px; height: 18px; }

.nav-menu-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--charcoal);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity var(--t-fast) ease, visibility 0s linear var(--t-fast);
}
.nav-menu-panel.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-fast) ease, visibility 0s linear 0s;
}
.nav-menu-panel-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 28px 40px;
}
.nav-menu-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-menu-panel-eyebrow {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-fast) ease;
}
@media (hover: hover) {
  .nav-menu-panel-eyebrow:hover {
    text-decoration-color: rgba(255, 255, 255, 0.85);
  }
}
.nav-menu-panel-eyebrow:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.nav-menu-close {
  background: none;
  border: none;
  color: var(--gold);
  padding: 8px;
  margin-right: -8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--t-fast) ease;
}
.nav-menu-close svg {
  width: 24px;
  height: 24px;
  display: block;
}
@media (hover: hover) {
  .nav-menu-close:hover { opacity: 0.7; }
}
.nav-menu-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.nav-menu-panel-nav {
  margin-top: 56px;
}
.nav-menu-panel-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-menu-panel-nav a {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  display: block;
  padding: 20px 4px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease;
}
.nav-menu-panel-nav a:active {
  background: rgba(255, 255, 255, 0.04);
}
.nav-menu-panel-nav a.is-current {
  color: rgba(229, 199, 118, 0.5);
}
.nav-menu-panel-nav a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
body.menu-open { overflow: hidden; }

/* ─── FOOTER ─── */
.footer {
  background: var(--white);
  padding: 20px 0 32px;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.footer p {
  font-size: 14px;
  color: var(--text-mute);
  letter-spacing: 0.01em;
}

.footer-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 5px;
  row-gap: 6px;
}
.footer a {
  color: var(--text-mute);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
@media (hover: hover) {
  .footer a:hover { color: var(--charcoal); }
}
.footer-sep {
  color: var(--text-mute);
  margin: 0 4px;
}

/* ─── CONTACT BOX ─── */
.zone-contact {
  background: var(--white);
  padding: 16px 0 32px;
}
.contact-box {
  position: relative;
  background: var(--charcoal-gradient);
  border-radius: 6px;
  padding: 56px 60px 56px 60px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: center;
  overflow: hidden;
}
.contact-box::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  z-index: 0;
}
.contact-mark {
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 260px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.contact-mark svg { width: 100%; height: auto; display: block; }
.contact-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
.contact-photo .placeholder-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contact-content {
  position: relative;
  z-index: 1;
}

/* Narrower than the 560px .section-body carries, so the closing sentence
   splits more evenly across its two lines. Wide layout only: the box goes
   single column at 900px and the copy rewraps there. */
@media (min-width: 901px) {
  .contact-content .section-body { max-width: 500px; }
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-block;
  padding: 10px 22px;
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background var(--t-fast) ease,
              color var(--t-fast) ease,
              border-color var(--t-fast) ease;
  text-transform: uppercase;
}
.btn-dark {
  background: var(--charcoal);
  color: var(--white);
  border-color: var(--charcoal);
}
@media (hover: hover) {
  .btn-dark:hover { background: transparent; color: var(--charcoal); }
}
.btn-ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
@media (hover: hover) {
  .btn-ghost:hover { background: var(--charcoal); color: var(--white); }
}
.btn-gold {
  background: var(--gold);
  color: var(--charcoal);
  border-color: var(--gold);
}
@media (hover: hover) {
  .btn-gold:hover {
    background: var(--white);
    color: var(--charcoal);
    border-color: var(--white);
  }
}

/* The base .btn-gold hover goes to white, which disappears on a light
   surface. The consent banner is the only such consumer. */
.btn-gold.on-light { border-color: var(--gold-strong); }
@media (hover: hover) {
  .btn-gold.on-light:hover {
    background: var(--charcoal);
    color: var(--gold);
    border-color: var(--charcoal);
  }
}
.btn-ghost-light {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
@media (hover: hover) {
  .btn-ghost-light:hover { background: var(--white); color: var(--charcoal); }
}
.btn-sm { padding: 9px 20px; font-size: 13px; }

/* ─── HERO ─── */
/* Do not wrap the hero in .reveal; it runs its own heroFadeIn. */
.hero {
  background: var(--white);
  padding: 16px 0 32px;
}
.hero-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 6px;
  overflow: hidden;
  animation: heroFadeIn 700ms var(--ease-out) both;
}
.hero-card.has-image {
  grid-template-columns: 6fr 5fr;
}
.hero-text {
  position: relative;
  background: var(--charcoal-gradient);
  padding: 60px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero-card.has-image .hero-text {
  padding: 56px 52px;
}
.hero-text::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  z-index: 0;
}
.hero-text > * { position: relative; z-index: 1; }

/* z-index 0 puts the mark behind .hero-text > * at z-index 1. */
.hero-mark {
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 260px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.hero-mark svg { width: 100%; height: auto; display: block; }
.hero-card.has-image .hero-mark { display: none; }

.hero-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* align-self and justify-self are required: a grid item with aspect-ratio
   treats normal alignment as start, not stretch. */
.hero-card.has-image .hero-image {
  aspect-ratio: 1;
  align-self: stretch;
  justify-self: stretch;
}
.hero-image picture {
  position: absolute;
  inset: 0;
  display: block;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-eyebrow { margin-bottom: 14px; }
.hero-eyebrow .sep {
  margin: 0 8px;
  opacity: 0.5;
}
.hero-headline {
  color: var(--gold);
  margin-bottom: 28px;
  max-width: 820px;
}

@media (min-width: 901px) {
  .hero-card.is-home .hero-headline { max-width: 32ch; }
  .hero-card.is-services .hero-headline { max-width: 30ch; }
}
.hero-body p {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 14px;
  max-width: 620px;
}
.hero-body p:last-of-type { margin-bottom: 0; }

.hero-card.has-image .hero-body p { max-width: 400px; }
.hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 36px;
  flex-wrap: wrap;
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── TYPE SCALE ─── */
.hero-headline,
.card-left .hero-headline,
.plain-heading,
.topic-header-title,
.featured-writing-title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.section-heading,
.body-heading,
.body-main h2,
.form-success-heading {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.body-main h3,
.approach-title,
.service-card .service-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.case-card-title,
.writing-title-list,
.services-list .service-name,
.body-callout .callout-heading {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.sidebar-entry-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* ─── SECTION HEADING ─── */
/* Sitewide tier. Scope classes carry margin and ::before only. */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--label);
}
.eyebrow.on-dark { color: rgba(255, 255, 255, 0.85); }

.section-label { margin-bottom: 12px; }

.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 3px;
  margin-bottom: 12px;
  background-image:
    linear-gradient(var(--accent-line), var(--accent-line)),
    linear-gradient(var(--accent-line), var(--accent-line));
  background-size: 3px 3px, 21px 1px;
  background-position: 0 0, 3px center;
  background-repeat: no-repeat;
}
.section-label.on-dark::before { display: none; }
.section-heading {
  color: var(--charcoal);
  margin-bottom: 22px;
  max-width: 720px;
}
.section-heading.on-dark { color: var(--white); }

/* Sitewide tier. .body-main p is in the selector because markdown emits
   unclassed <p>. */
.body-copy {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 20px;
}
.body-copy.on-dark { color: rgba(255, 255, 255, 0.85); }
.body-copy:last-child { margin-bottom: 0; }

.body-main p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 24px;
}
.body-main p:last-child { margin-bottom: 0; }

/* Hover fades text-decoration-color to transparent rather than setting
   text-decoration: none, so the transition still runs. */
.body-main p a,
.body-main li a {
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--charcoal);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-fast) ease;
}
@media (hover: hover) {
  .body-main p a:hover,
  .body-main li a:hover { text-decoration-color: transparent; }
}

.section-body { max-width: 560px; }

.two-col .section-body { max-width: 700px; }

/* ─── LOGO GRID ─── */
/* One mechanism, three parts that must change together: the border draws the
   whole outer edge, the 1px gaps draw the lattice, and background-clip keeps
   the container background out of the border box so the two do not double.
   Splitting the border across container and cells breaks the corner radius. */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  background-clip: padding-box;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.logo-cell {
  background: var(--white);
  aspect-ratio: 5 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.logo-cell img {
  max-width: 70%;
  max-height: 60%;
  object-fit: contain;
  display: block;
}

/* Paired with .logos-toggle and main.js initLogosToggle. gap must match
   .logo-grid: this is a grid item, so its gaps show the parent background. */
.logo-grid-extras {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease-out;
}
.logo-grid.is-expanded .logo-grid-extras {
  max-height: 1200px;
}

/* ─── REDUCED MOTION ─── */
/* main.js checks prefersReducedMotion() too. This is the CSS half. */
@media (prefers-reduced-motion: reduce) {
  .logo-grid-extras { transition: none; }
}

.no-js .logo-grid-extras { max-height: none; }
.no-js .logos-toggle {
  display: none;
}

.logos-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 4px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--charcoal);
  letter-spacing: -0.005em;
  transition: color var(--t-fast) ease;
}

.logos-toggle .logos-toggle-label {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.logos-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}
.logos-toggle-chevron {
  display: inline-flex;
  align-items: center;
  transition: transform 200ms ease-out;
}
.logos-toggle-chevron svg {
  width: 14px;
  height: 14px;
  display: block;
}
.logos-toggle[aria-expanded="true"] .logos-toggle-chevron {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .logos-toggle-chevron { transition: none; }
}

/* ─── TESTIMONIALS GRID ─── */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ─── TESTIMONIAL V2 ─── */
.testimonial-v2 {
  display: flex;
  flex-direction: column;
  background: var(--grey-50);
  border-radius: 4px;
  padding: 32px 36px;
  max-width: 780px;
  margin: 32px 0 0;
}
.testimonial-v2.is-inline {
  background: transparent;
  border-radius: 0;
  padding: 12px 0 4px;
  max-width: 720px;
}

.testimonial-v2.has-rule {
  border-left: 3px solid var(--gold);
  padding-left: 44px;
}

.testimonial-v2-icon {
  display: block;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 600;
  line-height: 0.7;
  margin-bottom: 10px;
}
.testimonial-v2-quote {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--charcoal);
  font-weight: 400;
  font-style: normal;
  margin: 0 0 22px;
}
.testimonial-v2-attribution {
  border-top: 1px solid var(--rule);
  padding-top: 18px;

  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-style: normal;
}

.testimonial-v2-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--charcoal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.testimonial-v2-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.testimonial-v2-person {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.testimonial-v2-name {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: 0.01em;
}
.testimonial-v2-role {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: var(--text-mute);
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.testimonial-v2-logo {
  flex-shrink: 0;
  color: var(--charcoal);
  opacity: 0.75;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
}
.testimonial-v2-logo svg { display: block; max-height: 32px; width: auto; }

/* ─── CASE CARD ─── */
.case-card {
  background: var(--grey-50);
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background var(--t-med) ease,
              transform var(--t-med) ease,
              border-color var(--t-med) ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

@media (hover: hover) {
  .case-card:hover, .service-card:hover {
    background: var(--white);
    border-color: var(--rule-strong);
    transform: translateY(-2px);
  }
}
.case-card-image {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.case-card-image picture {
  position: absolute;
  inset: 0;
  display: block;
}
.case-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The grey surface belongs to the placeholder state, never behind a real
   image. Sitting behind a photo it survives the image's anti-aliased bottom
   edge wherever the container height lands on a fractional device pixel, and
   paints a hairline of #E0E0DD across the seam. Measured on /writing/ and on
   the project heroes at 320 and 430; clean at 390, where the seam is whole. */
.hero-image:has(.placeholder-label),
.featured-writing-image:has(.placeholder-label),
.case-card-image:has(.placeholder-label) { background: var(--grey-150); }

/* Projects with heroImage render a thumbnail; the label covers the rest. */
.case-card-image .placeholder-label {
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}
.case-card-content {
  padding: 24px 28px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.case-card-eyebrow { margin-bottom: 10px; }
.case-card-title {
  color: var(--charcoal);
  margin-bottom: 10px;
}
.case-card-summary {
  font-size: 16px;
  color: var(--text-mute);
  line-height: 1.7;
  margin-bottom: 20px;
}

.case-card-content > :last-child { margin-bottom: 0; }

/* ─── ICON SLIDE UTILITY ─── */
/* Fires from a:hover or button:hover on an ancestor. */
.icon-slide { transition: transform 0.25s ease; }
@media (hover: hover) {
  a:hover .icon-slide,
  button:hover .icon-slide { transform: translateX(3px); }
}

/* ─── WRITING ENTRY ─── */
.writing-list {
  margin: 0;
}
.writing-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-strong);
  text-decoration: none;
  color: inherit;
}

/* Two selectors, one per variant. Dropping either leaves that variant with a
   trailing rule under its last row. */
.writing-list > .writing-item:last-child,
.writing-item-wrap:last-child > .writing-item {
  border-bottom: 0;
  padding-bottom: 0;
}
@media (hover: hover) {
  .writing-item:hover .writing-title-list {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
}

.writing-icon {
  flex-shrink: 0;
  color: var(--text-mute);
  margin-top: 4px;
  display: flex;
}
.writing-icon svg {
  width: 16px;
  height: 16px;
}
.writing-entry {
  flex: 1;
  min-width: 0;
}
.writing-title-list {
  color: var(--charcoal);
  margin-bottom: 4px;
}

.writing-date {
  font-size: 15px;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.writing-date .sep {
  color: var(--text-mute);
  margin: 0 8px;
}
.writing-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 720px;
}

.writing-list.is-index {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
}

.writing-index.is-topic .writing-list.is-index { border-top: 0; }
.writing-index.is-topic .writing-item-wrap:first-child > .writing-item {
  padding-top: 0;
}

.writing-item-wrap { list-style: none; }
.writing-item-wrap[hidden] { display: none; }
.writing-list.is-index .writing-item {
  padding: 28px 0;
  position: relative;
}
.writing-link {
  color: inherit;
  text-decoration: none;
}
.writing-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* z-index 1 paints above the .writing-link::before overlay. pointer-events
   none is what passes clicks back through to it. */
.writing-list.is-index .writing-date,
.writing-list.is-index .writing-desc {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

@media (hover: hover) {
  .writing-list.is-index .writing-item:hover .writing-link {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
  .writing-list.is-index .writing-item:hover .writing-title-list {
    text-decoration: none;
  }
  .writing-list.is-index .writing-item:hover .icon-slide {
    transform: translateX(3px);
  }
}

/* ─── PILL ─── */
.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  line-height: 1;
}
.pill.is-latest {
  background: var(--gold-tint);
  color: var(--charcoal);
}

/* ─── TOPIC HEADER ─── */
/* position and overflow serve the ::after noise layer. */
.topic-header {
  position: relative;
  background: var(--charcoal-gradient);
  padding: 40px 0;
  margin-bottom: 24px;
  overflow: hidden;
}
.topic-header::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  z-index: 0;
}
.topic-header > .container { position: relative; z-index: 1; }
.topic-header-eyebrow {
  margin-bottom: 14px;
}
.topic-header-title {
  color: var(--gold);
  margin: 0 0 28px;
}
.topic-header-body {
  max-width: 640px;
  margin: 0;
}

/* ─── FEATURED WRITING ─── */
/* Two consumers: the /writing/ flagship card and the post hero.
   background-clip: padding-box keeps the gradient off the transparent border
   so the image stays flush to the card edge. */
.featured-writing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--charcoal-gradient);
  background-clip: padding-box;
  border-radius: 4px;
  border: 1px solid transparent;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-med) ease,
              border-color var(--t-med) ease;
}

/* The index card is an anchor and the post hero is not, so the hover belongs
   on a.featured-writing rather than on the shared .case-card rule. */
@media (hover: hover) {
  a.featured-writing:hover .featured-writing-title {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
}

/* Scoped to the consumer: the card has no next sibling on post pages. */
.writing-index .featured-writing { margin-bottom: 40px; }

/* align-self on the block, not a flex column: a flex column stretches
   .pill.is-latest to full width. */
.featured-writing-content {
  min-width: 0;
  align-self: center;
  padding: 40px 44px;
}
/* Gold on charcoal, the same pairing .hero-headline uses. */
.featured-writing-title {
  color: var(--gold);
  margin: 16px 0 12px;
}
/* Scoped to the index card. The post hero puts the same line above the
   headline and takes .eyebrow, so it must not inherit these. */
.writing-index .featured-writing-meta {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 16px;
}
.featured-writing-meta .sep { color: rgba(255, 255, 255, 0.72); margin: 0 8px; }
.featured-writing-desc {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  max-width: 540px;
}

.featured-writing-byline {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 16px;
}
/* .sep has no base rule in this file. Each consumer sets its own spacing. */
.featured-writing-byline .sep { margin: 0 8px; }
.featured-writing-byline a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-fast) ease;
}
@media (hover: hover) {
  .featured-writing-byline a:hover { text-decoration-color: currentColor; }
}

/* ─── FEATURED WRITING, POST HERO SCOPE ─── */
/* Higher specificity than the @900 rule below, so it holds at every
   breakpoint. The 16px it cancels serves .pill.is-latest on the index card,
   which the post hero does not have. */
.hero .featured-writing-title { margin-top: 0; }

.hero .featured-writing-desc { margin-top: 12px; }

/* align-self and justify-self stretch are required: a grid item with
   aspect-ratio treats normal alignment as start. */
.featured-writing-image {
  aspect-ratio: 3 / 2;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.featured-writing-image picture {
  position: absolute;
  inset: 0;
  display: block;
}
.featured-writing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-image .placeholder-label,
.featured-writing-image .placeholder-label {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.7;
}

/* ─── HOMEPAGE WRITING GRID ─── */
.writing-home-grid {
  display: grid;
  grid-template-columns: 1fr var(--col-meta);
  column-gap: var(--col-gap);
  align-items: start;
}
.writing-home-main { min-width: 0; }

.writing-home-main .writing-list {
  border-top: 1px solid var(--rule);
}
.writing-home-rail-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 500;

  margin: 0 0 16px;
}
.writing-home-rail .sidebar-list {
  border-top: 1px solid var(--rule);
}

/* ─── TOPICS LIST ─── */
.topics-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.topics-item {
  border-bottom: 1px solid var(--rule);
}

.topics-item:last-child { border-bottom: 0; }
.topics-link {
  display: block;
  padding: 12px 0 12px 12px;
  font-size: 15px;

  line-height: 22px;
  color: var(--text-mute);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

@media (hover: hover) {
  a.topics-link:hover {
    color: var(--charcoal);
    background: var(--gold-tint);
  }
}

/* ─── BODY GRID ─── */
.body-grid {
  display: grid;
  grid-template-columns: 1fr var(--col-meta);
  gap: var(--col-gap);
  align-items: start;
}
.body-main,
.writing-main { min-width: 0; }
.body-heading,
.body-main h2 {
  color: var(--charcoal);
  margin-top: 0;
  margin-bottom: 22px;
}
.body-main > .body-heading:not(:first-child),
.body-main > h2:not(:first-child) { margin-top: 56px; }

.body-main h3 {
  color: var(--charcoal);
  margin: 0 0 14px;
}
.body-main > h3:not(:first-child) { margin-top: 40px; }

.body-list,
.body-main ul:not([class]),
.body-main ol:not([class]) {
  padding-left: 22px;
  margin: 0 0 22px;
  color: var(--text-body);
}
.body-list,
.body-main ul:not([class]) { list-style: disc; }
.body-main ol:not([class]) { list-style: decimal; }
.body-list li,
.body-main ul:not([class]) li,
.body-main ol:not([class]) li {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 6px;
}

.body-main .body-list li,
.body-main ul:not([class]) li,
.body-main ol:not([class]) li { font-size: 18px; }
.body-list li:last-child,
.body-main ul:not([class]) li:last-child,
.body-main ol:not([class]) li:last-child { margin-bottom: 0; }

@media (hover: hover) {
}

/* ─── META BLOCK ─── */
.body-meta {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: 100px;
}

/* ─── ARTICLE RAIL ─── */
.meta-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ─── CTA ROW ─── */
.cta-row {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* ─── ZONE PADDING ─── */
.zone-about        { background: var(--white);   padding: 16px 0 56px; }
.zone-services     { background: var(--grey-50); padding: 64px 0 56px; }
.zone-projects     { background: var(--white);   padding: 64px 0 56px; }
.zone-writing      { background: var(--grey-50); padding: 56px 0; }
.zone-logos        { background: var(--white);   padding: 56px 0 20px; }
.zone-projects-testimonials { background: var(--white); padding: 56px 0; }

.zone-services,
.zone-writing,
.zone-approach { --accent-line: var(--gold-strong); }

.has-rule-bottom { border-bottom: 1px solid var(--grey-100); }

/* Must stay below .body-heading: ties on specificity, wins on source order. */
.has-heading-gap {
  margin-bottom: 27px;
}

section:has(+ .zone-contact) { padding-bottom: 20px; }
.zone-services-detail { background: var(--white); padding: 16px 0 64px; }
.zone-approach     { background: var(--grey-50); padding: 64px 0; }
.zone-case-studies { background: var(--white);   padding: 16px 0 64px; }
.about-body        { background: var(--white);   padding: 16px 0 64px; }
.writing-index     { background: var(--white);   padding: 16px 0 32px; }

.article-body      { background: var(--white);   padding: 16px 0 64px; }

/* ─── ZONE HEADERS ─── */
.section-header { margin-bottom: 22px; max-width: 720px; }

.logos-body {
  max-width: 540px;
}

/* ─── HOMEPAGE ABOUT TEASER ─── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: center;
}
.about-photo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-photo img {
  width: 320px;
  height: 320px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* ─── HOMEPAGE SERVICES TEASER ─── */
.services-block {
  display: grid;
  grid-template-columns: 1fr 320px;
  column-gap: 48px;
  align-items: stretch;
  margin-top: 8px;
}
.services-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 36px;
}

.services-list .service-name {
  color: var(--charcoal);
  margin-bottom: 8px;
}
.service-desc {
  font-size: 16px;
  color: var(--text-mute);
  line-height: 1.55;
  text-wrap: pretty;
}
.services-cta { grid-column: 1; margin-top: 40px; }

/* ─── RETAINER CALLOUT ─── */
.retainer-callout {
  border-left: 3px solid var(--gold);
  padding: 6px 0 6px 28px;
  margin-top: 32px;
  max-width: none;
}
.retainer-callout-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label);
  font-weight: 500;
  margin-bottom: 14px;
}
.retainer-callout-headline {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-bottom: 14px;
}

.retainer-callout-headline-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 14px;
}
.retainer-callout-headline-row .retainer-callout-headline { margin-bottom: 0; }

.availability-pill {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  border: 1px solid var(--gold-strong);
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1;
  white-space: nowrap;
}

.retainer-callout-body p { max-width: 620px; }
.retainer-callout-cta { margin-top: 22px; }

.retainer-callout-grid {
  display: grid;
  grid-template-columns: 1fr 330px;
  column-gap: 38px;
  align-items: start;
}

.retainer-facts {
  border-left: 1px solid var(--rule);
  padding-left: 38px;
}

.retainer-callout.is-teaser {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 28px 28px 24px;
  margin-top: 0;
  max-width: none;
}
.retainer-callout.is-teaser .retainer-label {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-bottom: 16px;
}
.retainer-callout.is-teaser .retainer-desc {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.6;
}

.retainer-callout.is-teaser .retainer-desc + .retainer-desc { margin-top: 10px; }

.retainer-callout.is-teaser .service-bullets {
  margin-top: 14px;
  margin-bottom: 14px;
}

.retainer-callout.is-teaser .retainer-cta {
  align-self: flex-start;
  margin-top: auto;
  margin-block-start: 24px;
}

.retainer-cta { text-transform: none; letter-spacing: 0; font-size: 15px; }
.retainer-cta .arrow {
  display: inline-block;
  transition: transform 0.25s ease;
  font-weight: 400;
  margin-left: 4px;
}
@media (hover: hover) {
  .retainer-cta:hover .arrow { transform: translateX(3px); }
}

/* ─── PROJECT GRID ─── */
.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.projects-cta { margin-top: 40px; }

/* ─── SERVICES DETAIL ─── */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.service-card {
  background: var(--grey-50);
  border-radius: 4px;
  padding: 32px 32px 28px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.service-icon {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--gold-strong);
  margin-bottom: 20px;
}
.service-icon svg { display: block; width: 100%; height: 100%; }

.services-list .service-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
}
.service-card .service-name {
  color: var(--charcoal);
  margin-bottom: 10px;
}
.service-framing {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-body);
  line-height: 1.55;
  margin-bottom: 18px;
}
.service-bullets { padding: 0; margin-bottom: 22px; list-style: none; }
.service-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 10px;
  text-wrap: pretty;
}
.service-bullets li:last-child { margin-bottom: 0; }
.service-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 5px;
  background: var(--gold-strong);
  border-radius: 50%;
}

.service-bullets.has-checks li { padding-left: 26px; }
.service-bullets.has-checks li::before { display: none; }
.service-bullets.has-checks svg {
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  color: var(--gold-strong);
}
.service-cta-label {
  margin-top: auto;
  padding-top: 16px;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}
.service-cta-label .arrow {
  display: inline-block;
  transition: transform 0.25s ease;
  font-weight: 400;
  margin-left: 4px;
}
@media (hover: hover) {
  .service-card:hover .service-cta-label { text-decoration-color: var(--gold-strong); }
  .service-card:hover .service-cta-label .arrow { transform: translateX(3px); }
}

/* ─── APPROACH GRID ─── */
.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* nth-child modifiers are wrapped in :where() so the @900 rule overrides
   them without a specificity bump. */
.approach-item {
  padding-bottom: 44px;
  border-bottom: 1px solid var(--rule);
}
.approach-item:where(:nth-child(odd)) {
  padding-right: 56px;
  border-right: 1px solid var(--rule);
}
.approach-item:where(:nth-child(even)) { padding-left: 56px; }
.approach-item:where(:nth-child(n+3)) {
  padding-top: 44px;
  padding-bottom: 0;
  border-bottom: 0;
}
.approach-item p { max-width: 440px; }
.approach-icon {
  display: block;
  color: var(--gold-strong);
  margin-bottom: 18px;
  line-height: 0;
}
.approach-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}
.approach-title {
  color: var(--charcoal);
  margin-bottom: 10px;
}

.approach-cta { margin-top: 40px; }

/* ─── CASE STUDIES GRID ─── */
.case-studies-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.case-studies-cta { margin-top: 40px; }

/* ─── ABOUT BODY ─── */
.body-grid.is-about .body-meta {
  position: static;
  top: auto;
  display: block;
  gap: 0;
}
.body-grid.is-about .meta-block {
  margin-bottom: 44px;
}
.body-grid.is-about .meta-block:last-child { margin-bottom: 0; }

/* The quote stops being :last-child once the CTA row follows it, so the
   44px from .body-main .testimonial-v2 comes back. */
.body-grid.is-about .testimonial-v2 { margin-bottom: 0; }
.about-testimonial-cta { margin-top: 28px; }

/* ─── ABOUT META SIDEBAR ─── */
.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.sidebar-list li { list-style: none; }
.sidebar-link-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
}

@media (hover: hover) {
  a.sidebar-link-row:hover .sidebar-entry-title {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
}
.sidebar-list > :last-child .sidebar-link-row { border-bottom: none; }
.sidebar-icon {
  flex-shrink: 0;
  color: var(--text-mute);
  margin-top: 2px;
  display: flex;
}
.sidebar-icon svg {
  width: 14px;
  height: 14px;
}

.sidebar-icon:empty { width: 14px; }
.sidebar-entry {
  min-width: 0;
  flex: 1;
}
.sidebar-entry-title {
  color: var(--charcoal);
  margin-bottom: 4px;
}
.sidebar-entry-meta {
  font-size: 15px;
  color: var(--text-mute);
  line-height: 1.4;
}
.sidebar-entry-meta .sep {
  color: var(--text-mute);
  margin: 0 8px;
}

.sidebar-entry-aux {
  font-size: 15px;
  color: var(--text-mute);
  margin-top: 2px;
  display: block;
}

.sidebar-entry-count {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-mute);
}

.sidebar-link-row.is-current .sidebar-entry-title {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ─── CONTACT PAGE SCAFFOLD ─── */
.contact-zone {
  background: var(--white);
  padding: 16px 0 32px;
}
.contact-card {
  position: relative;
  background: var(--grey-50);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 56px 56px 56px;
}
.card-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}

.card-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.card-left { min-width: 0; }

.hero-photo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.hero-photo .placeholder-label {
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-photo img {
  width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.photo-identity { margin-top: 16px; }

.photo-bio {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin-bottom: 14px;
}
.photo-location {
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.5;
  margin-bottom: 8px;
}

.photo-testimonial {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  position: relative;
}
.photo-testimonial::before {
  content: '\201C';
  position: absolute;
  top: 22px;
  left: -4px;
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  pointer-events: none;
}
.photo-testimonial-quote {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.6;
  margin-top: 28px;
  margin-bottom: 16px;
  font-style: normal;
}
/* The circle is .testimonial-v2-avatar reused, with .is-sm as its size
   modifier. */
.photo-testimonial-attribution {
  font-style: normal;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-v2-avatar.is-sm {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.photo-testimonial-person {
  min-width: 0;
  flex: 1;
}

.photo-testimonial-name {
  display: block;
  font-size: 15px;
  color: var(--charcoal);
  font-weight: 500;
}
.photo-testimonial-role {
  display: block;
  font-size: 14px;
  color: var(--text-mute);
}

.card-left .hero-eyebrow {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-left .hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 3px;
  background-image:
    linear-gradient(var(--accent-line), var(--accent-line)),
    linear-gradient(var(--accent-line), var(--accent-line));
  background-size: 3px 3px, 21px 1px;
  background-position: 0 0, 3px center;
  background-repeat: no-repeat;
}
.card-left .hero-headline {
  color: var(--charcoal);
  margin-bottom: 22px;
  max-width: 540px;
}

.card-left .hero-bio p { max-width: 540px; }

.card-left .contact-form { margin-top: 40px; }

/* ─── REVEAL ANIMATION ─── */
/* main.js initReveal adds .is-visible; under reduced motion it adds it
   unconditionally so nothing stays hidden. */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms var(--ease-out),
              transform 600ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── CONTACT FORM ─── */
.form-field {
  margin-bottom: 32px;
  position: relative;
}
.form-field:last-of-type { margin-bottom: 0; }

/* Deliberately off the .eyebrow tier at 13px. Contact only. */
.field-label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
  font-weight: 500;
  margin-bottom: 12px;
}

.field-label .optional {
  font-weight: 400;
  text-transform: none;
  color: var(--text-mute);
  margin-left: 8px;
}

.field-help {
  font-size: 15px;
  color: var(--text-mute);
  line-height: 1.5;
  margin: 0 0 10px;
}

.field-input,
.field-textarea {
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 14px 16px;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field-textarea {
  min-height: 160px;
  resize: vertical;
  font-family: 'Roboto', sans-serif;
}
.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--text-mute);
}
.field-input:focus-visible,
.field-textarea:focus-visible {
  outline: none;
  border-color: var(--charcoal);
  box-shadow: 0 0 0 3px rgba(35, 35, 35, 0.06);
}

.field-input.is-error,
.field-textarea.is-error {
  box-shadow: inset 3px 0 0 0 var(--error);
  border-color: var(--error);
}
.field-input.is-error:focus-visible,
.field-textarea.is-error:focus-visible {
  box-shadow: inset 3px 0 0 0 var(--error), 0 0 0 3px rgba(35, 35, 35, 0.06);
}
.field-error {
  display: none;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--error);
  line-height: 1.5;
}
.field-error.is-shown { display: flex; }
.field-error-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--error);
}
.field-error-icon svg { width: 100%; height: 100%; }

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-banner {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 22px;
  padding: 14px 16px;
  border-left: 3px solid var(--charcoal);
  background: rgba(35, 35, 35, 0.04);
  border-radius: 0 4px 4px 0;
  color: var(--charcoal);
  font-size: 14px;
  line-height: 1.5;
}
.form-banner.is-shown { display: flex; }
.form-banner-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.form-banner-icon svg { width: 100%; height: 100%; }
.form-banner p { margin: 0; }

.custom-select {
  position: relative;
}
.select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 14px 16px;
  line-height: 1.5;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.select-trigger:focus-visible {
  outline: none;
  border-color: var(--charcoal);
  box-shadow: 0 0 0 3px rgba(35, 35, 35, 0.06);
}
.select-trigger-label.is-placeholder {
  color: var(--text-mute);
}
.select-chevron {
  display: inline-flex;
  width: 12px;
  height: 12px;
  margin-left: 12px;
  color: var(--text-mute);
  transition: transform 0.15s ease;
  transform-origin: center;
  transform: translateY(-1px);
}
.select-chevron svg { width: 100%; height: 100%; }
.custom-select.is-open .select-trigger {
  border-color: var(--charcoal);
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.custom-select.is-open .select-trigger:focus-visible { box-shadow: none; }
.custom-select.is-open .select-chevron {
  transform: translateY(-1px) rotate(180deg);
}
.select-listbox {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: -1px 0 0 0;
  padding: 6px 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--charcoal);
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 8px 24px rgba(35, 35, 35, 0.08);

  max-height: 400px;
  overflow-y: auto;
  z-index: 10;
}
.select-listbox[hidden] { display: none; }

/* Every declaration undoes one in the base rule. Change them together or
   the flipped seam doubles its 1px border. */
.custom-select.is-flipped .select-listbox {
  top: auto;
  bottom: 100%;
  margin: 0 0 -1px 0;
  border-top: 1px solid var(--charcoal);
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 0 -8px 24px rgba(35, 35, 35, 0.08);
}
.custom-select.is-open.is-flipped .select-trigger {
  border-bottom-color: var(--charcoal);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-color: transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select-option {
  padding: 14px 16px;
  font-size: 15px;
  color: var(--charcoal);
  line-height: 1.5;
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease;
}
.select-option-name {
  display: block;
  font-weight: 500;
}

.select-option-desc {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--text-mute);
}
@media (hover: hover) {
  .select-option:hover { background: var(--grey-50); }
}
.select-option.is-active { background: var(--grey-50); }

/* Must sit after .is-active so a row that is both shows as selected. */
.select-option[aria-selected="true"] { background: var(--gold-tint); }
.select-option[aria-selected="true"] .select-option-name { font-weight: 600; }

@media (hover: hover) {
  .select-option[aria-selected="true"]:hover { background: var(--gold-soft); }
}
.select-option-check {
  position: absolute;
  right: 16px;
  top: 16px;
  display: none;
  color: var(--gold-strong);
  line-height: 0;
}
.select-option[aria-selected="true"] .select-option-check { display: block; }

.form-submit-row { margin-top: 20px; }
.form-submit-btn {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
}
.form-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (hover: hover) {
  .form-submit-btn:disabled:hover {
    background: var(--charcoal);
    color: var(--white);
    border-color: var(--charcoal);
  }
}
.form-privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.5;
}
.form-privacy svg {
  flex-shrink: 0;
  color: var(--text-mute);
}

.form-success {
  display: none;
  padding: 4px 0;
}
.form-success.is-shown { display: block; }
.contact-form.is-hidden { display: none; }
.form-success-heading {
  color: var(--charcoal);
  margin: 0 0 12px;
}
.form-success-body {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.65;
  margin: 0 0 10px;
  max-width: 560px;
}
.form-success-body:last-child { margin-bottom: 0; }
.form-success-body a {
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}
@media (hover: hover) {
  .form-success-body a:hover { text-decoration-color: var(--gold); }
}

/* ─── ARTICLE ELEMENTS ─── */
.body-callout {
  background: var(--grey-50);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  padding: 24px 28px;
  margin: 40px 0 32px;
}
.body-main > .body-callout:first-child { margin-top: 0; }

/* The .body-main arm clears .body-main ul:not([class]) li at (0,2,2). Ties
   on specificity, wins on source order. */
.body-main .body-callout > :last-child { margin-bottom: 0; }
.body-main .body-callout ul li { margin-bottom: 14px; }
.body-callout .callout-heading {
  color: var(--charcoal);
  margin: 0 0 10px;
}

.body-main figure {
  margin: 40px 0;
}
.body-main figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.body-main figcaption {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.5;
  margin-top: 12px;
}
.body-main figcaption a {
  color: var(--text-mute);
  text-decoration: underline;
  text-decoration-color: var(--text-mute);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-fast) ease;
}
@media (hover: hover) {
  .body-main figcaption a:hover { text-decoration-color: transparent; }
}

/* display block kills the inline baseline gap; text-decoration none stops
   the UA underline rendering as a stray rule under the image. */
.body-main figure a {
  display: block;
  text-decoration: none;
  border-radius: 6px;
}
.body-main figure a:focus-visible { outline-offset: 4px; }

.body-main figure.is-inset .figure-box {
  background: var(--gold-tint);
  border-radius: 6px;
  padding: 40px;
}
.body-main figure.is-inset img {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 6px;
}

.body-main figure.is-inset.is-diagram .figure-box {
  background: var(--grey-50);
  border: 1px solid var(--rule);
  padding: 20px;
}

.body-main table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
}
.body-main thead th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-strong);
  text-align: left;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.body-main tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-body);
}
.body-main tbody tr:last-child td { border-bottom: 0; }

.body-main .testimonial-v2 { margin: 44px 0; }

.body-main .testimonial-v2:last-child { margin-bottom: 0; }

/* ─── PLAIN PAGE ─── */
/* Narrow centred column. Three consumers: 404, site map, privacy. */
.plain-page {
  background: var(--white);
  padding: 64px 0 96px;
}
.plain-content {
  max-width: 640px;
  margin: 0 auto;
}
.plain-eyebrow,
.plain-heading,
.plain-lead { text-align: center; }
.plain-eyebrow { margin: 0 0 12px; }
.plain-heading {
  color: var(--charcoal);
  margin: 0 0 20px;
}
.plain-lead {
  font-size: 17px;
  color: var(--text-body);
  line-height: 1.65;
  margin: 0 0 44px;
}
.plain-page .topics-list { margin: 0; }
.plain-block + .plain-block { margin-top: 40px; }

.plain-content .body-main { margin-top: 44px; }
/* The .body-main arm clears .body-main p at (0,1,1), which is what drops the
   size to the meta tier. */
.body-main .body-updated {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 16px;
  color: var(--text-mute);
}

/* ─── CONSENT BANNER ─── */
.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  background: var(--white);
  color: var(--charcoal);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 20px 24px;
  max-width: 720px;
  margin: 0 auto;
}
.consent-banner[hidden] { display: none; }
.consent-banner-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.consent-banner-content {
  flex: 1 1 320px;
  min-width: 0;
}
.consent-banner-heading {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 0 6px;
  letter-spacing: 0;
}
.consent-banner-body {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.55;
  margin: 0;
}
.consent-banner-body a {
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-fast) ease;
}
@media (hover: hover) {
  .consent-banner-body a:hover { text-decoration-color: var(--charcoal); }
}
.consent-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.footer-consent-trigger {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(35, 35, 35, 0.25);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
@media (hover: hover) {
  .footer-consent-trigger:hover {
    text-decoration-color: var(--charcoal);
  }
}

/* ─── FOCUS-VISIBLE ─── */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
  border-radius: 2px;
}
.nav .nav-cta-link:focus-visible,
.hero-card a:focus-visible,
.hero-card button:focus-visible,
.contact-box a:focus-visible,
.contact-box button:focus-visible {
  outline-color: var(--gold);
}

/* Takes focus from the footer trigger but is not a control, so no ring of
   its own. Its two buttons carry the sitewide one. */
.consent-banner:focus { outline: none; }

/* Projects the focus ring off the invisible overlay onto the row. Without
   :has(), the native ring on the overlay is the fallback. */
@supports selector(:has(*)) {
  .writing-list.is-index .writing-link:focus-visible { outline: none; }
  .writing-list.is-index .writing-item:has(.writing-link:focus-visible) {
    outline: 2px solid var(--charcoal);
    outline-offset: 2px;
    border-radius: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu-panel { transition: none; }
  .hero-card { animation: none; }
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── RESPONSIVE ─── */
/* Below 360 the nav brand sits at its 105px min-content and .nav-right needs
   209px, which is 314px of content in a 280px box. Flex items do not shrink
   past min-content, so the row pushes the page 15px wide and fails WCAG 1.4.10
   Reflow at the 320px floor. Dropping the label leaves the icon, which the
   button's aria-label already describes, and frees about 48px. */
@media (max-width: 360px) {
  .nav-menu-label { display: none; }
}

@media (max-width: 900px) {
  .hero-headline,
  .card-left .hero-headline,
  .plain-heading,
  .topic-header-title,
  .featured-writing-title { font-size: 32px; }
  .section-heading,
  .body-heading,
  .body-main h2,
  .form-success-heading { font-size: 26px; }
  .case-card-title,
  .writing-title-list,
  .services-list .service-name,
  .body-callout .callout-heading { font-size: 19px; }

  :root { --gutter: 28px; }

  .nav-links { gap: 22px; }
  .nav-links a { font-size: 14px; }
  .nav-logo { width: 44px; height: 44px; }
  .nav-wordmark { font-size: 15px; }
  .nav-descriptor { font-size: 14px; }

  .hero { padding: 12px 0 24px; }
  .hero-card.has-image { grid-template-columns: 1fr; }

  .hero-card.has-image .hero-image { order: -1; }
  .hero-text { padding: 56px 40px; }
  .hero-card.has-image .hero-text { padding: 44px 36px; }
  .hero-body p { font-size: 16px; }

  .hero-mark { width: 200px; }
  .hero-card.has-image .hero-mark { display: block; }

  .zone-contact { padding: 12px 0 24px; }
  .contact-box {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 32px;
  }
  .contact-photo { max-width: 160px; }
  .contact-mark { width: 200px; }

  .logo-grid { grid-template-columns: repeat(3, 1fr); }

  .testimonials-grid { grid-template-columns: 1fr; gap: 20px; }

  .testimonial-v2 { padding: 28px 32px; }
  .testimonial-v2.has-rule { padding-left: 40px; }

  .case-card-content { padding: 22px 24px 24px; }

  .writing-item { padding: 20px 0; }
  .writing-list.is-index .writing-item { padding: 24px 0; }

  .featured-writing { grid-template-columns: 1fr; }
  .featured-writing-content { padding: 32px; }
  .writing-index .featured-writing { margin-bottom: 32px; }
  .featured-writing-title { margin-top: 12px; }
  .featured-writing-image { order: -1; }

  .topic-header { padding: 32px 0; margin-bottom: 20px; }

  .body-grid { grid-template-columns: 1fr; gap: 48px; }
  .body-meta { position: static; top: auto; }

  .body-heading { margin-bottom: 18px; }
  .body-main > .body-heading:not(:first-child) { margin-top: 44px; }

  .zone-about { padding: 12px 0 48px; }
  .two-col { grid-template-columns: 1fr; gap: 48px; }

  .about-photo { display: block; }
  .about-photo picture { display: block; }
  .about-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .zone-services { padding: 64px 0; }
  .services-block { grid-template-columns: 1fr; gap: 36px; column-gap: 0; }
  .services-list { gap: 24px 32px; }
  .services-cta { margin-top: 0; }

  .retainer-callout-grid { grid-template-columns: 1fr; }
  .retainer-facts {
    border-left: 0;
    padding-left: 0;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
  }

  .retainer-callout.is-teaser { padding: 24px 26px 22px; }
  .retainer-callout.is-teaser .retainer-label { font-size: 18px; }

  .zone-projects { padding: 56px 0; }
  .project-grid { grid-template-columns: 1fr; }
  .zone-projects-testimonials { padding: 48px 0; }

  .zone-writing { padding: 36px 0 40px; }

  .writing-home-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .writing-home-rail-label { margin-top: 0; }

  .article-body { padding: 12px 0 48px; }

  .zone-logos { padding: 48px 0 16px; }

  section:has(+ .zone-contact) { padding-bottom: 16px; }

  .zone-services-detail { padding: 12px 0 48px; }
  .services-grid { grid-template-columns: 1fr; }

  .zone-approach { padding: 48px 0; }

  .approach-grid { grid-template-columns: 1fr; }
  .approach-item {
    padding: 44px 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .approach-item:first-child { padding-top: 0; }
  .approach-item:last-child { padding-bottom: 0; border-bottom: 0; }

  .zone-case-studies { padding: 12px 0 48px; }
  .case-studies-grid { grid-template-columns: 1fr; gap: 24px; }
  .case-studies-cta { margin-top: 32px; }

  .writing-index { padding: 12px 0 32px; }

  .about-body { padding: 12px 0 24px; }
  .body-grid.is-about .meta-block { margin-bottom: 36px; }

  .contact-zone { padding: 12px 0 24px; }
  .contact-card { padding: 40px 36px; }

  .card-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .card-left { order: 1; }
  .card-right {
    order: 2;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--rule);
  }
  .card-left .contact-form { margin-top: 32px; }

  .hero-photo { display: block; }
  .hero-photo picture { display: block; }
  .hero-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .body-callout { padding: 22px 24px; }

  .plain-page { padding: 48px 0 72px; }

  .consent-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 18px 20px;
  }
}
@media (max-width: 600px) {
  .hero-headline,
  .card-left .hero-headline,
  .plain-heading,
  .topic-header-title,
  .featured-writing-title { font-size: 26px; }
  .section-heading,
  .body-heading,
  .body-main h2,
  .form-success-heading { font-size: 24px; }
  .body-main h3,
  .approach-title,
  .service-card .service-name { font-size: 20px; }
  .case-card-title,
  .writing-title-list,
  .services-list .service-name,
  .body-callout .callout-heading { font-size: 18px; }

  :root {
    --gutter: 20px;
    --nav-height: 66px;
  }

  .nav-brand { gap: 10px; }
  .nav-logo { width: 40px; height: 40px; }

  .nav-wordmark { display: block; font-size: 16px; }

  .nav-descriptor { display: none; }

  .nav-links { display: none; }
  .nav-menu-btn { display: inline-flex; }
  .nav-right { gap: 8px; }
  .nav .nav-cta-link { padding: 10px 20px; }
  .nav-menu-panel-inner { padding: 16px 20px 32px; }

  .hero { padding: 8px 0 16px; }
  .hero-text { padding: 42px 28px; }
  .hero-card.has-image .hero-text { padding: 36px 24px; }
  .hero-body p { font-size: 15px; }

  .btn { padding: 9px 20px; }

  .zone-contact { padding: 12px 0 16px; }
  .contact-box { padding: 32px 24px; }
  .contact-photo { max-width: 140px; }

  .logo-grid { grid-template-columns: repeat(2, 1fr); }

  .testimonial-v2 { padding: 24px 24px; }
  .testimonial-v2.has-rule { padding-left: 32px; }
  .testimonial-v2-attribution { gap: 12px; }
  .testimonial-v2-avatar { width: 36px; height: 36px; font-size: 12px; }
  .testimonial-v2-role { white-space: normal; overflow: visible; text-overflow: unset; }
  .testimonial-v2-logo { font-size: 13px; }
  .case-studies-cta { margin-top: 28px; }

  .case-card-content { padding: 20px 22px 22px; }

  .writing-item { padding: 18px 0; gap: 12px; }
  .writing-list.is-index .writing-item { padding: 20px 0; gap: 12px; }

  .writing-desc { font-size: 15px; }

  .body-main figure.is-inset .figure-box { padding: 24px; }

  .featured-writing-content { padding: 24px; }
  .writing-index .featured-writing { margin-bottom: 24px; }
  .featured-writing-desc { font-size: 15px; }

  .topic-header { padding: 28px 0; margin-bottom: 16px; }

  .body-heading { margin-bottom: 16px; }
  .body-main > .body-heading:not(:first-child) { margin-top: 36px; }

  .zone-about { padding: 8px 0 40px; }
  .zone-services { padding: 48px 0; }
  .services-list { grid-template-columns: 1fr; gap: 22px; }

  .service-desc { font-size: 15px; }
  .retainer-callout.is-teaser .retainer-label { font-size: 17px; }

  .zone-projects { padding: 40px 0; }
  .zone-projects-testimonials { padding: 36px 0; }

  .zone-writing { padding: 32px 0 36px; }

  .article-body { padding: 8px 0 40px; }

  .zone-logos { padding: 40px 0 16px; }

  .zone-services-detail { padding: 8px 0 40px; }
  .service-card { padding: 26px 24px 24px; }

  .zone-approach { padding: 40px 0; }

  .zone-case-studies { padding: 8px 0 40px; }

  .writing-index { padding: 8px 0 32px; }

  .about-body { padding: 8px 0 20px; }

  .contact-zone { padding: 8px 0 16px; }
  .contact-card { padding: 32px 24px; }
  .card-left .hero-eyebrow { margin-bottom: 16px; }
  .card-left .hero-headline { margin-bottom: 18px; }

  .field-input,
  .field-textarea,
  .select-trigger { padding: 14px 14px; }
  .field-textarea { min-height: 140px; }

  .field-input,
  .field-textarea { font-size: 16px; }

  .body-callout { padding: 20px 22px; margin: 32px 0 24px; }
  .body-callout .callout-heading { margin-bottom: 8px; }

  .plain-page { padding: 36px 0 56px; }
  .plain-lead { font-size: 15px; }
  .plain-block + .plain-block { margin-top: 32px; }

  .consent-banner {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 16px 18px;
  }
  .consent-banner-inner {
    gap: 16px;
    align-items: stretch;
  }
  .consent-banner-actions {
    flex-direction: row;
    justify-content: flex-end;
  }
  .consent-banner-body { font-size: 13px; }
}