:root {
  --paper: #f4f1e9;
  --paper-deep: #e9e3d7;
  --ink: #121311;
  --muted: #5f6059;
  --line: rgba(18, 19, 17, 0.16);
  --accent: #ff4500;
  --accent-strong: #a92e00;
  --accent-light: #ffe1d6;
  --white: #fffdf8;
  --surface: rgba(255, 253, 248, 0.7);
  --radius-sm: 0.75rem;
  --radius: 1.35rem;
  --radius-lg: 2rem;
  --shadow-sm: 0 10px 30px rgba(18, 19, 17, 0.07);
  --shadow: 0 24px 80px rgba(18, 19, 17, 0.13);
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.2, 0.75, 0.2, 1);
  --shell: min(1220px, calc(100% - 48px));
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.menu-open {
  overflow: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button {
  font: inherit;
  cursor: pointer;
}
.shell {
  width: var(--shell);
  margin-inline: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 8px;
}
.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-top: 12px;
  transition: padding 0.25s ease;
}
.site-header.is-scrolled {
  padding-top: 8px;
}
.nav-shell {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 0 10px 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease;
}
.site-header.is-scrolled .nav-shell {
  background: rgba(244, 241, 233, 0.9);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* The logo file is 1672x941 with the artwork in an 888x291 box at (410, 308).
   These percentages crop the canvas to exactly that box, so the wordmark
   scales with .brand-logo instead of being clipped at narrow widths. */
.brand-logo {
  position: relative;
  width: 144px;
  aspect-ratio: 888 / 291;
  display: block;
  overflow: hidden;
}
.brand-logo img {
  position: absolute;
  width: 188.288%;
  max-width: none;
  height: auto;
  left: -46.171%;
  top: -105.842%;
}
.brand-mark {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--ink);
  font-size: 0.72rem;
  letter-spacing: -0.04em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-nav > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 650;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.site-nav > a:not(.nav-cta) {
  position: relative;
}
.site-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  inset: auto 0 -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s ease;
}
.site-nav > a:hover::after,
.site-nav > a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.site-nav > a:not(.nav-cta):hover {
  background: rgba(18, 19, 17, 0.055);
}
.nav-cta {
  padding: 10px 17px;
  color: var(--white);
  background: var(--ink);
  border-radius: 999px;
}
.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 10px;
  cursor: pointer;
}
.menu-toggle span:not(.sr-only) {
  display: block;
  width: 23px;
  height: 1.5px;
  margin: 5px;
  background: var(--ink);
  transition: transform 0.2s ease;
}

.hero {
  min-height: 780px;
  padding-block: 150px 80px;
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  align-items: center;
  gap: clamp(50px, 8vw, 110px);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.eyebrow span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-light);
}
.hero h1,
.section-heading h2,
.about-copy h2,
.contact-section h2,
.blog-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}
.hero h1 {
  max-width: 760px;
  font-size: clamp(3.7rem, 6.7vw, 6.6rem);
}
.hero h1 em {
  color: var(--accent);
  font-weight: 500;
}
.hero-lede {
  max-width: 640px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 35px;
}
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 750;
  transition:
    transform 0.2s var(--ease-out),
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.button span,
.nav-cta span,
.text-link span,
.contact-email span,
.big-email span {
  transition: transform 0.2s var(--ease-out);
}
.button:hover span,
.nav-cta:hover span,
.text-link:hover span,
.contact-email:hover span,
.big-email:hover span {
  transform: translate(3px, -3px);
}
.button:active {
  transform: scale(0.97);
}
.button-dark {
  color: var(--white);
  background: var(--ink);
  box-shadow: 0 8px 30px rgba(18, 19, 17, 0.16);
}
.button-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(18, 19, 17, 0.22);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.87rem;
  font-weight: 750;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 650px;
  margin: 55px 0 0;
  padding-top: 23px;
  border-top: 1px solid var(--line);
}
.hero-stats div {
  display: grid;
  gap: 3px;
}
.hero-stats dt {
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1;
}
.hero-stats dd {
  max-width: 135px;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}
.hero-visual {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.portrait-frame {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  border-radius: 190px 190px var(--radius) var(--radius);
  background: #191919;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.portrait-frame::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 32%;
  background: linear-gradient(transparent, rgba(18, 19, 17, 0.22));
  pointer-events: none;
}
.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  border-radius: inherit;
  pointer-events: none;
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  object-position: 51% 25%;
}
.availability {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 253, 248, 0.9);
  backdrop-filter: blur(12px);
  font-size: 0.69rem;
  font-weight: 750;
}
.availability span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ea85f;
  box-shadow: 0 0 0 3px rgba(46, 168, 95, 0.16);
}
.portrait-note {
  align-self: flex-end;
  margin: 13px 7px 0;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
  line-height: 1.45;
}

.ticker {
  overflow: hidden;
  color: var(--white);
  background: var(--accent);
  transform: rotate(-1deg) scale(1.01);
}
.ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 30px;
  padding-block: 17px;
  animation: marquee 28s linear infinite;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.ticker-track i {
  color: #ffd0bf;
  font-style: normal;
  font-size: 0.8rem;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.section {
  padding-block: clamp(90px, 12vw, 155px);
}
.section-kicker {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.about-grid {
  display: grid;
  grid-template-columns: 0.42fr 1.28fr 0.8fr;
  align-items: start;
  gap: clamp(30px, 5vw, 80px);
}
.about-copy h2,
.section-heading h2 {
  font-size: clamp(3rem, 5.3vw, 5.3rem);
}
.about-copy p {
  color: var(--muted);
}
.about-copy .large-copy {
  margin: 36px 0 18px;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.55;
}
.inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 34px;
}
.inline-links a {
  font-size: 0.84rem;
  font-weight: 750;
  text-underline-offset: 5px;
}
.experience-card {
  padding: 4px 0 4px 28px;
  border-left: 1px solid var(--line);
}
.experience-card > div {
  padding: 0 0 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--line);
}
.experience-card > div:last-child {
  margin: 0;
  padding: 0;
  border: 0;
}
.experience-card span {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
}
.experience-card h3 {
  margin: 7px 0 2px;
  font-size: 0.98rem;
  line-height: 1.35;
}
.experience-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.77rem;
}

.expertise-section {
  color: var(--white);
  background: var(--ink);
}
.expertise-section .section-kicker,
.expertise-section .section-heading p {
  color: rgba(255, 255, 255, 0.55);
}
.section-heading {
  display: grid;
  gap: 20px;
  margin-bottom: 65px;
}
.section-heading > p {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
}
.section-heading.split {
  grid-template-columns: 1fr 0.38fr;
  align-items: end;
}
.section-heading.split .text-link {
  justify-self: end;
  align-self: end;
}
.service-list {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.service-row {
  display: grid;
  grid-template-columns: 55px 1fr 0.8fr 42px;
  gap: 30px;
  align-items: center;
  padding-block: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.service-number {
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.7rem;
}
.service-row h3 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(1.6rem, 2.7vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}
.service-row p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.87rem;
}
.service-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}
.service-row:hover .service-icon {
  color: var(--ink);
  background: var(--white);
  transform: rotate(45deg);
}

.results-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.875fr 0.875fr;
  gap: 16px;
}
.result-card {
  min-height: 390px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.3);
}
.result-card-featured {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
}
.result-label {
  margin: 0 auto 65px 0 !important;
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.64rem !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.75;
}
.result-card strong {
  font-family: Georgia, serif;
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.06em;
}
.result-card h3 {
  max-width: 300px;
  margin: 15px 0 0;
  font-size: 1.1rem;
  line-height: 1.35;
}
.result-card > p:last-child {
  margin: auto 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}
.result-card-featured > p:last-child {
  color: rgba(255, 255, 255, 0.7);
}

.essays-section {
  background: var(--paper-deep);
}
.essay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.essay-card {
  min-width: 0;
}
.essay-image {
  display: block;
  overflow: hidden;
  aspect-ratio: 1.38;
  border-radius: var(--radius);
  background: #d7d1c6;
}
.essay-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.essay-card:hover .essay-image img {
  transform: scale(1.035);
}
.essay-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.essay-card h3 {
  margin: 12px 0 0;
  font-family: Georgia, serif;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.essay-card h3 a {
  text-decoration: none;
}
.essay-card h3 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.essay-card-text > a {
  min-height: 0;
  aspect-ratio: 1.38;
  display: flex;
  flex-direction: column;
  padding: 25px;
  color: var(--white);
  background: var(--ink);
  border-radius: var(--radius);
  text-decoration: none;
}
.essay-card-text p {
  max-width: 310px;
  margin: auto 0 25px;
  font-family: Georgia, serif;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.18;
}
.essay-index {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.65rem;
}
.round-arrow {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  align-self: flex-end;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}

.contact-section {
  padding-block: clamp(100px, 14vw, 175px);
  color: var(--white);
  background: var(--accent);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: end;
  gap: 80px;
}
.eyebrow.light {
  color: rgba(255, 255, 255, 0.7);
}
.eyebrow.light span {
  background: var(--white);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.15);
}
.contact-section h2 {
  max-width: 820px;
  font-size: clamp(3.7rem, 7vw, 7rem);
}
.contact-actions {
  padding-bottom: 8px;
}
.contact-email {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-actions > p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
}
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 35px;
}
.social-links a {
  font-size: 0.76rem;
  font-weight: 750;
  text-underline-offset: 4px;
}
.site-footer {
  color: rgba(255, 255, 255, 0.6);
  background: var(--ink);
  font-size: 0.7rem;
}
.footer-inner {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.footer-inner a {
  color: var(--white);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal[data-delay="1"] {
  transition-delay: 0.1s;
}
.reveal[data-delay="2"] {
  transition-delay: 0.2s;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Blog */
.blog-hero {
  padding: 170px 0 95px;
  border-bottom: 1px solid var(--line);
}
.blog-hero h1 {
  max-width: 820px;
  font-size: clamp(4rem, 8vw, 8rem);
}
.blog-hero p:last-child {
  max-width: 580px;
  margin: 30px 0 0 auto;
  color: var(--muted);
  font-size: 1.05rem;
}
.blog-list {
  padding-block: 80px 130px;
}
.blog-item {
  display: grid;
  grid-template-columns: 120px 1fr 34px;
  gap: 30px;
  padding-block: 28px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.blog-item:first-child {
  border-top: 1px solid var(--line);
}
.blog-item time,
.blog-item span {
  color: var(--muted);
  font-size: 0.7rem;
}
.blog-item h2 {
  max-width: 850px;
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.blog-item .arrow {
  justify-self: end;
  color: var(--ink);
  font-size: 1rem;
  transition: transform 0.2s;
}
.blog-item:hover .arrow {
  transform: translate(3px, -3px);
}
.blog-cta {
  margin-top: 70px;
  padding: 35px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 30px;
  border-radius: var(--radius);
  background: var(--accent-light);
}
.blog-cta h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  letter-spacing: -0.035em;
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr 0.72fr;
    gap: 45px;
  }
  .hero h1 {
    font-size: clamp(3.4rem, 7.7vw, 5.5rem);
  }
  .portrait-frame,
  .portrait-frame img {
    min-height: 500px;
  }
  .about-grid {
    grid-template-columns: 0.3fr 1fr;
  }
  .about-copy {
    grid-column: 2;
  }
  .experience-card {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 30px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .experience-card > div {
    margin: 0;
    padding: 0 15px 0 0;
    border: 0;
  }
  .results-grid {
    grid-template-columns: 1fr 1fr;
  }
  .result-card-featured {
    grid-column: 1 / -1;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }
  .contact-actions {
    max-width: 520px;
  }
}

@media (max-width: 760px) {
  :root {
    --shell: min(100% - 28px, 1180px);
    --radius: 1rem;
  }
  html {
    scroll-padding-top: 72px;
  }
  .nav-shell {
    min-height: 70px;
  }
  .menu-toggle {
    display: block;
    position: relative;
    z-index: 2;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    transform: translateY(3.25px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-3.25px) rotate(-45deg);
  }
  .site-nav {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 90px 25px 40px;
    color: var(--white);
    background: var(--ink);
    transform: translateY(-102%);
    visibility: hidden;
    transition:
      transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
      visibility 0.35s;
  }
  .site-nav.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  .site-nav > a {
    font-family: Georgia, serif;
    font-size: 2.6rem;
    font-weight: 500;
    letter-spacing: -0.04em;
  }
  .site-nav .nav-cta {
    margin-top: 18px;
    padding: 11px 16px;
    color: var(--ink);
    background: var(--white);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 750;
  }
  .menu-open .menu-toggle span:not(.sr-only) {
    background: var(--white);
  }
  .hero {
    min-height: auto;
    padding-block: 125px 65px;
    grid-template-columns: 1fr;
    gap: 58px;
  }
  .hero h1 {
    font-size: clamp(3.2rem, 15vw, 5rem);
  }
  .hero-lede {
    font-size: 1rem;
  }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }
  .hero-stats {
    gap: 12px;
    margin-top: 42px;
  }
  .hero-stats dt {
    font-size: 1.35rem;
  }
  .hero-stats dd {
    font-size: 0.62rem;
  }
  .hero-visual {
    max-width: 480px;
    margin-inline: auto;
  }
  .portrait-frame,
  .portrait-frame img {
    min-height: 520px;
  }
  .portrait-frame {
    border-radius: 150px 150px var(--radius) var(--radius);
  }
  .section {
    padding-block: 95px;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-copy,
  .experience-card {
    grid-column: auto;
  }
  .about-copy h2,
  .section-heading h2 {
    font-size: clamp(2.8rem, 13vw, 4.4rem);
  }
  .experience-card {
    grid-template-columns: 1fr;
    gap: 23px;
  }
  .section-heading.split {
    grid-template-columns: 1fr;
  }
  .section-heading.split .text-link {
    justify-self: start;
  }
  .service-row {
    grid-template-columns: 35px 1fr 38px;
    gap: 14px;
  }
  .service-row p {
    grid-column: 2 / -1;
  }
  .service-row h3 {
    font-size: 1.65rem;
  }
  .service-icon {
    grid-column: 3;
    grid-row: 1;
  }
  .results-grid,
  .essay-grid {
    grid-template-columns: 1fr;
  }
  .result-card-featured {
    grid-column: auto;
  }
  .result-card {
    min-height: 340px;
  }
  .essay-card {
    margin-bottom: 28px;
  }
  .contact-section h2 {
    font-size: clamp(3.2rem, 14vw, 5rem);
  }
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-block: 28px;
  }
  .footer-inner p {
    margin: 0;
  }
  .blog-hero {
    padding: 140px 0 75px;
  }
  .blog-hero h1 {
    font-size: clamp(3.7rem, 18vw, 6rem);
  }
  .blog-hero p:last-child {
    margin-left: 0;
  }
  .blog-item {
    grid-template-columns: 1fr 24px;
    gap: 10px;
  }
  .blog-item time {
    grid-column: 1;
  }
  .blog-item h2 {
    grid-column: 1;
  }
  .blog-item .arrow {
    grid-column: 2;
    grid-row: 2;
  }
  .blog-cta {
    grid-template-columns: 1fr;
  }
}

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

/* Search-friendly service detail and article author context */
.service-detail-copy {
  border-top: 1px solid rgba(255, 255, 255, 0.17);
}
.service-detail-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(35px, 7vw, 90px);
  margin-top: 24px;
}
.service-detail-intro h2 {
  margin: 0;
  font-size: clamp(2.8rem, 4.8vw, 4.8rem);
  line-height: 1;
  font-weight: 500;
}
.service-detail-intro p,
.service-detail-grid p {
  color: rgba(255, 255, 255, 0.62);
}
.service-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 70px;
  background: rgba(255, 255, 255, 0.17);
}
.service-detail-grid article {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: var(--ink);
}
.service-detail-grid h3 {
  margin: 0 0 18px;
  font-size: 1.7rem;
  font-weight: 500;
}
.service-detail-grid a {
  margin-top: auto;
  color: var(--white);
  text-underline-offset: 5px;
}
.article-author {
  display: grid;
  grid-template-columns: 110px minmax(0, 650px) auto;
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  margin-bottom: 0;
  padding-block: 28px;
  border-block: 1px solid var(--line);
}
.article-author p {
  margin: 0;
  color: var(--muted);
}
.article-author .author-label {
  color: var(--accent-strong);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.article-author h2 {
  margin: 0 0 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 500;
}
.article-author .author-details > p {
  max-width: 620px;
  font-size: 0.76rem;
  line-height: 1.6;
}
.article-author > .text-link {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .service-detail-intro,
  .service-detail-grid {
    grid-template-columns: 1fr;
  }
  .service-detail-grid {
    margin-top: 48px;
  }
  .service-detail-grid article {
    min-height: 270px;
    padding: 24px;
  }
  .article-author {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 24px;
  }
  .article-author > .text-link {
    width: max-content;
  }
}

:focus-visible {
  outline: 3px solid #f2a900;
  outline-offset: 4px;
}
::selection {
  color: var(--white);
  background: var(--accent);
}

/* Shared multi-page navigation */
.site-nav a[aria-current="page"]:not(.nav-cta) {
  color: var(--accent);
}
.dark-page {
  color: var(--white);
  background: var(--ink);
}
.dark-header {
  color: var(--white);
}
.dark-header.is-scrolled {
  color: var(--white);
  background: rgba(18, 19, 17, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
}
.dark-header .brand-mark {
  color: var(--ink);
  background: var(--white);
}
.dark-header .menu-toggle span:not(.sr-only) {
  background: var(--white);
}
.dark-header .site-nav a[aria-current="page"]:not(.nav-cta) {
  color: #ffd0bf;
}
.light-cta {
  color: var(--ink) !important;
  background: var(--white) !important;
}
.light-text {
  color: rgba(255, 255, 255, 0.55);
}

/* About */
.about-hero {
  min-height: 820px;
  padding-block: 145px 80px;
  display: grid;
  grid-template-columns: 1.2fr 0.65fr;
  align-items: center;
  gap: clamp(45px, 9vw, 130px);
}
.about-hero-copy h1,
.work-hero h1,
.services-hero h1,
.contact-intro h1,
.archive-hero h1,
.article-header h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.about-hero-copy h1 {
  font-size: clamp(4rem, 7.3vw, 7.4rem);
}
.about-hero-copy h1 em {
  color: var(--accent);
  font-weight: 500;
}
.about-hero-copy > p:last-child {
  max-width: 520px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 1.1rem;
}
.about-portrait {
  margin: 0;
}
.about-portrait img {
  width: 100%;
  max-height: 610px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 180px 180px var(--radius) var(--radius);
  box-shadow: var(--shadow);
}
.about-portrait figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.7rem;
  text-align: right;
}
.manifesto {
  padding-block: clamp(90px, 12vw, 150px);
  color: var(--white);
  background: var(--accent);
}
.manifesto-grid {
  display: grid;
  grid-template-columns: 0.35fr 1.35fr;
  gap: 70px;
}
.manifesto .section-kicker {
  color: rgba(255, 255, 255, 0.65);
}
.manifesto h2 {
  max-width: 950px;
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.045em;
}
.manifesto-copy {
  max-width: 780px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
  margin: 50px 0 0 auto;
  color: rgba(255, 255, 255, 0.74);
}
.journey .section-heading h2 {
  max-width: 700px;
}
.timeline {
  border-top: 1px solid var(--line);
}
.timeline-item {
  display: grid;
  grid-template-columns: 150px 1fr 100px;
  gap: 35px;
  padding-block: 30px;
  border-bottom: 1px solid var(--line);
}
.timeline-item time,
.timeline-item > span {
  color: var(--muted);
  font-size: 0.72rem;
}
.timeline-item > span {
  text-align: right;
}
.timeline-item h3 {
  margin: 0 0 7px;
  font-family: Georgia, serif;
  font-size: 1.55rem;
  font-weight: 500;
}
.timeline-item p {
  max-width: 670px;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.principles {
  padding-block: 100px;
  color: var(--white);
  background: var(--ink);
}
.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 38px;
  background: rgba(255, 255, 255, 0.15);
}
.principle-grid article {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  padding: 34px;
  background: var(--ink);
}
.principle-grid span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.68rem;
}
.principle-grid h3 {
  margin: auto 0 14px;
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.05;
}
.principle-grid p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.82rem;
}
.page-cta {
  padding-block: clamp(100px, 14vw, 170px);
  text-align: center;
}
.page-cta > p {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.page-cta h2 {
  max-width: 900px;
  margin: 20px auto 35px;
  font-family: Georgia, serif;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

/* Services */
.services-hero {
  min-height: 760px;
  padding-block: 170px 90px;
}
.services-title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 60px;
}
.services-hero h1 {
  max-width: 950px;
  font-size: clamp(4rem, 8vw, 8rem);
}
.services-title > span {
  color: rgba(255, 255, 255, 0.12);
  font-family: Georgia, serif;
  font-size: clamp(7rem, 15vw, 16rem);
  line-height: 0.7;
}
.services-intro {
  max-width: 580px;
  margin: 55px 0 0 auto;
  color: rgba(255, 255, 255, 0.58);
  font-size: 1.05rem;
}
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.17);
  border-left: 1px solid rgba(255, 255, 255, 0.17);
}
.offer-card {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 48px);
  border-right: 1px solid rgba(255, 255, 255, 0.17);
  border-bottom: 1px solid rgba(255, 255, 255, 0.17);
}
.offer-card > span {
  color: #ffb89e;
  font-size: 0.7rem;
}
.offer-card h2 {
  max-width: 460px;
  margin: 55px 0 18px;
  font-family: Georgia, serif;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}
.offer-card > p {
  max-width: 580px;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
}
.offer-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 35px 0 0;
  list-style: none;
}
.offer-card li {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.67rem;
}
.process-section {
  margin-top: 120px;
  padding-block: 120px;
  color: var(--ink);
  background: var(--paper);
}
.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.process-list li {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.process-list span {
  color: var(--accent);
  font-size: 0.68rem;
}
.process-list h3 {
  margin: auto 0 12px;
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
}
.process-list p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.services-cta {
  padding-block: 140px;
  text-align: center;
}
.services-cta p {
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
}
.services-cta h2 {
  max-width: 850px;
  margin: 20px auto 35px;
  font-family: Georgia, serif;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}
.button-light {
  color: var(--ink);
  background: var(--white);
}

/* Work */
.work-hero {
  padding-block: 175px 100px;
  display: grid;
  grid-template-columns: 1fr 0.38fr;
  align-items: end;
  gap: 80px;
}
.work-hero .eyebrow {
  grid-column: 1 / -1;
}
.work-hero h1 {
  max-width: 970px;
  font-size: clamp(4rem, 7.4vw, 7.4rem);
}
.work-hero > p:last-child {
  margin: 0;
  color: var(--muted);
}
.case-stack {
  display: grid;
  gap: 18px;
  padding-bottom: 120px;
}
.case-study {
  min-height: 620px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  grid-template-rows: auto 1fr;
  gap: 40px;
  padding: clamp(28px, 5vw, 60px);
  border-radius: calc(var(--radius) * 1.2);
}
.case-blue {
  color: var(--white);
  background: var(--accent);
}
.case-cream {
  background: #dfd6c7;
}
.case-dark {
  color: var(--white);
  background: var(--ink);
}
.case-top {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.65;
}
.case-number {
  align-self: end;
  font-family: Georgia, serif;
  font-size: clamp(7rem, 17vw, 15rem);
  line-height: 0.7;
  letter-spacing: -0.07em;
}
.case-copy {
  align-self: end;
}
.case-copy h2 {
  max-width: 620px;
  margin: 0 0 24px;
  font-family: Georgia, serif;
  font-size: clamp(2.3rem, 4vw, 4.2rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.case-copy > p {
  max-width: 620px;
  opacity: 0.68;
}
.case-copy ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 38px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid currentColor;
  list-style: none;
  font-size: 0.72rem;
  opacity: 0.75;
}
.capabilities-strip {
  padding-block: 100px;
  background: var(--paper-deep);
}
.capability-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 35px;
}
.capability-cloud span {
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: Georgia, serif;
  font-size: clamp(1.1rem, 2vw, 1.7rem);
}

/* Contact */
.contact-page {
  min-height: 100vh;
  color: var(--white);
  background: var(--accent);
}
.contact-main {
  min-height: calc(100vh - 80px);
  padding-block: 150px 70px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 90px;
}
.contact-intro h1 {
  max-width: 860px;
  font-size: clamp(4.2rem, 8vw, 8.2rem);
}
.contact-intro > p:last-child {
  max-width: 600px;
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.7);
}
.contact-panel {
  padding: 35px;
  color: var(--ink);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(12, 24, 80, 0.24);
}
.contact-panel > p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.big-email {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  font-family: Georgia, serif;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  overflow-wrap: anywhere;
}
.contact-brief {
  padding-block: 32px;
}
.contact-brief h2 {
  margin: 0 0 16px;
  font-size: 0.85rem;
}
.contact-brief ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.8rem;
}
.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-social a {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 750;
}
.contact-footer {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.7rem;
}

/* Blog archive */
.archive-hero {
  min-height: 680px;
  padding-block: 165px 85px;
  display: grid;
  grid-template-columns: 1.2fr 0.5fr;
  align-items: end;
  gap: 80px;
  border-bottom: 1px solid var(--line);
}
.archive-hero h1 {
  max-width: 950px;
  font-size: clamp(4rem, 7.5vw, 7.7rem);
}
.archive-hero > p {
  color: var(--muted);
}
.archive-controls {
  position: sticky;
  top: 77px;
  z-index: 10;
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  align-items: center;
  gap: 25px;
  padding-block: 18px;
  background: rgba(244, 241, 233, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.archive-controls input {
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  font: inherit;
  outline: none;
}
.archive-controls input:focus {
  border-color: var(--accent);
}
.archive-filters {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}
.archive-filters button {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 0.67rem;
}
.archive-filters button[aria-pressed="true"] {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 18px;
  padding-block: 75px 130px;
}
.archive-card[hidden] {
  display: none;
}
.archive-visual {
  min-height: 260px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--white);
  background: var(--ink);
  text-decoration: none;
}
.archive-card:nth-child(3n + 2) .archive-visual {
  background: var(--accent);
}
.archive-card:nth-child(3n + 3) .archive-visual {
  color: var(--ink);
  background: #d8cfbf;
}
.archive-visual img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.archive-card:hover .archive-visual img {
  transform: scale(1.035);
}
.archive-number {
  font-family: Georgia, serif;
  font-size: 6rem;
  opacity: 0.3;
}
.archive-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 17px;
  color: var(--muted);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.archive-card h2 {
  margin: 12px 0 10px;
  font-family: Georgia, serif;
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.archive-card h2 a {
  text-decoration: none;
}
.archive-card > p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.77rem;
}
.archive-read {
  font-size: 0.72rem;
  font-weight: 750;
  text-underline-offset: 4px;
}
.archive-empty {
  min-height: 280px;
  padding-block: 80px;
  font-family: Georgia, serif;
  font-size: 2rem;
}

/* Articles */
.article-header {
  padding-block: 155px 65px;
}
.article-back {
  display: inline-block;
  margin-bottom: 55px;
  color: var(--muted);
  font-size: 0.76rem;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.article-meta > *:not(:last-child)::after {
  content: "·";
  margin-left: 14px;
}
.article-header h1 {
  max-width: 1050px;
  margin-top: 25px;
  font-size: clamp(3.4rem, 7vw, 7rem);
}
.article-header > p {
  max-width: 720px;
  margin: 30px 0 0 auto;
  color: var(--muted);
  font-size: 1.1rem;
}
.article-hero-image {
  width: min(1320px, calc(100% - 28px));
  max-height: 720px;
  margin: 0 auto 90px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-deep);
}
.article-hero-image img {
  width: 100%;
  max-height: 720px;
  object-fit: cover;
}
.article-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  justify-content: center;
  gap: clamp(40px, 8vw, 100px);
  padding-bottom: 120px;
}
.article-toc {
  position: sticky;
  top: 120px;
  align-self: start;
  padding-top: 8px;
}
.article-toc > p {
  margin: 0 0 16px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.article-toc ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-toc a {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  text-decoration: none;
}
.article-toc a:hover {
  color: var(--accent);
}
.article-body {
  min-width: 0;
  color: #2b2c28;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.08rem, 1.55vw, 1.22rem);
  line-height: 1.82;
}
.article-body > :first-child {
  margin-top: 0;
}
.article-body h2,
.article-body h3 {
  scroll-margin-top: 110px;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.article-body h2 {
  margin: 2.6em 0 0.7em;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
}
.article-body h3 {
  margin: 2em 0 0.55em;
  font-size: clamp(1.5rem, 2.7vw, 2.1rem);
  font-weight: 500;
}
.article-body a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.article-body blockquote {
  margin: 2em 0;
  padding: 8px 0 8px 28px;
  border-left: 3px solid var(--accent);
  color: var(--ink);
  font-size: 1.3em;
  line-height: 1.45;
}
.article-body img {
  width: 100%;
  height: auto;
  margin-block: 2em;
  border-radius: 10px;
}
.article-body figure {
  margin: 2.2em 0;
}
.article-body figure img {
  margin: 0;
}
.article-body figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-family: Inter, sans-serif;
  font-size: 0.68rem;
  text-align: center;
}
.article-body li {
  margin-bottom: 0.45em;
}
.article-body pre {
  overflow-x: auto;
  padding: 20px;
  border-radius: 10px;
  color: var(--white);
  background: var(--ink);
  font-size: 0.8rem;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
}
.article-body th,
.article-body td {
  padding: 10px;
  border: 1px solid var(--line);
  text-align: left;
}
.article-related {
  padding-block: 100px;
  background: var(--paper-deep);
}
.article-related h2 {
  margin: 14px 0 40px;
  font-family: Georgia, serif;
  font-size: clamp(2.7rem, 5vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.045em;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.related-card {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.35);
  text-decoration: none;
}
.related-card > span,
.related-card small {
  color: var(--muted);
  font-size: 0.67rem;
}
.related-card h3 {
  margin: auto 0 20px;
  font-family: Georgia, serif;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.1;
}

@media (max-width: 980px) {
  .about-hero {
    grid-template-columns: 1fr 0.65fr;
    gap: 45px;
  }
  .manifesto-grid {
    grid-template-columns: 1fr;
  }
  .manifesto-copy {
    margin-left: 0;
  }
  .services-title > span {
    display: none;
  }
  .services-title {
    grid-template-columns: 1fr;
  }
  .process-list {
    grid-template-columns: 1fr 1fr;
  }
  .work-hero,
  .contact-main,
  .archive-hero {
    grid-template-columns: 1fr;
  }
  .case-study {
    grid-template-columns: 1fr;
  }
  .case-number {
    margin-block: 70px;
  }
  .archive-grid {
    grid-template-columns: 1fr 1fr;
  }
  .article-layout {
    grid-template-columns: 1fr;
    max-width: 800px;
  }
  .article-toc {
    position: static;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
  }
}

@media (max-width: 760px) {
  .dark-header .site-nav {
    background: var(--ink);
  }
  .about-hero {
    min-height: auto;
    padding-block: 135px 75px;
    grid-template-columns: 1fr;
  }
  .about-hero-copy h1 {
    font-size: clamp(3.5rem, 17vw, 5.6rem);
  }
  .about-portrait {
    max-width: 440px;
  }
  .manifesto-copy,
  .principle-grid,
  .offer-grid,
  .process-list,
  .archive-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .timeline-item > span {
    text-align: left;
  }
  .services-hero {
    min-height: auto;
    padding-block: 140px 80px;
  }
  .services-hero h1,
  .work-hero h1,
  .archive-hero h1 {
    font-size: clamp(3.5rem, 16vw, 5.7rem);
  }
  .offer-card {
    min-height: 390px;
  }
  .work-hero {
    padding-block: 140px 80px;
    gap: 30px;
  }
  .case-study {
    min-height: 560px;
  }
  .case-copy ul {
    grid-template-columns: 1fr;
  }
  .contact-main {
    padding-block: 130px 60px;
    gap: 50px;
  }
  .contact-intro h1 {
    font-size: clamp(3.6rem, 16vw, 5.8rem);
  }
  .contact-panel {
    padding: 24px;
  }
  .contact-footer {
    padding-block: 25px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .archive-hero {
    min-height: auto;
    padding-block: 140px 70px;
    gap: 30px;
  }
  .archive-controls {
    position: static;
    grid-template-columns: 1fr;
  }
  .archive-filters {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 3px;
  }
  .archive-filters button {
    flex: 0 0 auto;
  }
  .archive-grid {
    padding-top: 45px;
  }
  .archive-visual,
  .archive-visual img {
    min-height: 230px;
  }
  .article-header {
    padding-block: 135px 55px;
  }
  .article-back {
    margin-bottom: 35px;
  }
  .article-header h1 {
    font-size: clamp(3.1rem, 15vw, 5.3rem);
  }
  .article-header > p {
    margin-left: 0;
  }
  .article-hero-image {
    margin-bottom: 60px;
  }
  .article-layout {
    padding-bottom: 80px;
  }
  .article-body {
    font-size: 1.05rem;
  }
}

/* 2026 UI refinement layer */
body:not(.dark-page):not(.contact-page) {
  background-image:
    radial-gradient(
      circle at 8% 2%,
      rgba(255, 69, 0, 0.065),
      transparent 26rem
    ),
    radial-gradient(
      circle at 94% 34%,
      rgba(214, 151, 24, 0.045),
      transparent 24rem
    );
  background-attachment: fixed;
}

.service-row h3,
.result-card strong,
.essay-card h3,
.essay-card-text p,
.blog-item h2,
.blog-cta h2,
.site-nav > a,
.about-hero-copy h1,
.work-hero h1,
.services-hero h1,
.contact-intro h1,
.archive-hero h1,
.article-header h1,
.manifesto h2,
.timeline-item h3,
.principle-grid h3,
.page-cta h2,
.services-title > span,
.offer-card h2,
.process-list h3,
.services-cta h2,
.case-number,
.case-copy h2,
.capability-cloud span,
.big-email,
.archive-number,
.archive-card h2,
.archive-empty,
.article-related h2,
.related-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
}

.dark-header.is-scrolled {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
}
.dark-header.is-scrolled .nav-shell {
  background: rgba(18, 19, 17, 0.88);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
}
.site-nav a[aria-current="page"]:not(.nav-cta) {
  color: var(--accent-strong);
  background: var(--accent-light);
}
.dark-header .site-nav a[aria-current="page"]:not(.nav-cta) {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}
.dark-header .site-nav > a:not(.nav-cta):hover {
  background: rgba(255, 255, 255, 0.09);
}

.hero {
  position: relative;
}
.hero-copy {
  position: relative;
  z-index: 1;
}
.hero-copy::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  inset: -70px auto auto -90px;
  z-index: -1;
  border: 1px solid rgba(255, 69, 0, 0.16);
  border-radius: 50%;
  box-shadow:
    0 0 0 32px rgba(255, 69, 0, 0.025),
    0 0 0 64px rgba(255, 69, 0, 0.018);
}
.hero-lede,
.about-copy p,
.manifesto-copy,
.services-intro,
.work-hero > p:last-child,
.contact-intro > p:last-child {
  line-height: 1.72;
}
.hero-stats dt,
.result-card strong,
.case-number {
  font-variant-numeric: tabular-nums;
}

.section-kicker,
.eyebrow {
  letter-spacing: 0.15em;
}
.result-card,
.process-list li,
.related-card {
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.result-card-featured {
  background: var(--accent);
}
.essay-image,
.archive-visual {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
.service-row,
.timeline-item {
  transition:
    padding-inline 0.25s var(--ease-out),
    background 0.25s ease;
}
.offer-card {
  transition: background 0.25s ease;
}
.case-study {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.case-study::after {
  content: "";
  position: absolute;
  width: 360px;
  aspect-ratio: 1;
  right: -180px;
  top: -190px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.1;
  box-shadow:
    0 0 0 55px currentColor,
    0 0 0 110px currentColor;
  pointer-events: none;
}
.capability-cloud span {
  background: rgba(255, 255, 255, 0.25);
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.archive-controls {
  border-top: 1px solid var(--line);
}
.archive-search {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: end;
  gap: 14px;
}
.archive-controls input {
  min-height: 46px;
  font-size: 0.9rem;
}
.archive-status {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.68rem;
  white-space: nowrap;
}
.archive-filters button {
  min-height: 44px;
  padding: 9px 14px;
  font-weight: 650;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s var(--ease-out);
}
.archive-card {
  min-width: 0;
}
.archive-card:first-child {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: 30px;
  align-items: end;
}
.archive-card:first-child .archive-visual {
  grid-column: 1;
  grid-row: 1 / 6;
  min-height: 470px;
}
.archive-card:first-child .archive-visual img {
  min-height: 470px;
}
.archive-card:first-child .archive-meta,
.archive-card:first-child h2,
.archive-card:first-child > p,
.archive-card:first-child .archive-read {
  grid-column: 2;
}
.archive-card:first-child h2 {
  font-size: clamp(2rem, 3.4vw, 3.5rem);
}
.archive-card h2 a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.25s var(--ease-out);
}
.archive-card:hover h2 a {
  background-size: 100% 1px;
}
.archive-read {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
}

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  width: var(--reading-progress, 0%);
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255, 69, 0, 0.45);
  transition: width 0.1s linear;
}
.article-header h1 {
  max-width: 980px;
  font-size: clamp(3.2rem, 6.2vw, 6.25rem);
}
.article-header > p {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.7;
}
.article-hero-image {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.article-toc {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 253, 248, 0.52);
}
.article-toc a {
  display: block;
  padding: 2px 0 2px 11px;
  border-left: 2px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.article-toc a[aria-current="true"] {
  color: var(--accent-strong);
  border-color: var(--accent);
}
.article-body {
  font-size: clamp(1.08rem, 1.45vw, 1.2rem);
  line-height: 1.86;
}
.article-body p {
  margin-block: 1.25em;
}
.article-body h2 {
  padding-top: 0.2em;
}
.article-body blockquote {
  padding: 22px 28px;
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-light);
  box-shadow: -4px 0 0 var(--accent);
}
.article-body img {
  box-shadow: var(--shadow-sm);
}
.related-card small {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.contact-panel {
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-lg);
}
.contact-social a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 14px;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.contact-social a:hover {
  color: var(--white);
  background: var(--ink);
}
.contact-brief li + li {
  margin-top: 8px;
}
.footer-inner a,
.contact-footer a,
.social-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (hover: hover) and (pointer: fine) {
  .result-card:not(.result-card-featured):hover,
  .process-list li:hover,
  .related-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 69, 0, 0.35);
    box-shadow: var(--shadow-sm);
  }
  .result-card-featured:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(255, 69, 0, 0.25);
  }
  .service-row:hover,
  .timeline-item:hover {
    padding-inline: 14px;
    background: rgba(255, 255, 255, 0.045);
  }
  .timeline-item:hover {
    background: rgba(255, 255, 255, 0.28);
  }
  .offer-card:hover {
    background: rgba(255, 255, 255, 0.035);
  }
  .archive-card:hover .archive-visual {
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
  }
  .archive-visual {
    transition:
      transform 0.25s var(--ease-out),
      box-shadow 0.25s ease;
  }
  .archive-filters button:hover {
    transform: translateY(-1px);
    border-color: var(--ink);
    color: var(--ink);
  }
  .capability-cloud span:hover {
    background: var(--white);
    border-color: rgba(255, 69, 0, 0.3);
  }
}

@media (max-width: 980px) {
  .archive-card:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  :root {
    --shell: min(100% - 32px, 1220px);
  }
  .site-header {
    padding-top: 7px;
  }
  .nav-shell {
    min-height: 58px;
    padding-inline: 11px;
  }
  .site-nav {
    padding-inline: 24px;
  }
  .site-nav > a {
    min-height: 52px;
    padding-inline: 8px;
    font-size: clamp(2.1rem, 11vw, 3rem);
  }
  .site-nav .nav-cta {
    min-height: 48px;
    padding-inline: 18px;
  }
  .hero {
    padding-top: 118px;
  }
  .hero-copy::before {
    width: 150px;
    height: 150px;
    inset: -35px auto auto -60px;
  }
  .hero h1,
  .about-hero-copy h1,
  .services-hero h1,
  .work-hero h1,
  .archive-hero h1,
  .contact-intro h1,
  .article-header h1 {
    font-size: clamp(3rem, 13vw, 4.7rem);
  }
  .hero-actions .button {
    width: 100%;
  }
  .hero-actions {
    width: 100%;
  }
  .portrait-frame,
  .portrait-frame img {
    min-height: 470px;
  }
  .section-heading {
    margin-bottom: 48px;
  }
  .archive-search {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .archive-status {
    margin: 4px 0 0;
  }
  .archive-filters {
    margin-inline: -16px;
    padding: 12px 16px 5px;
    scrollbar-width: none;
  }
  .archive-filters::-webkit-scrollbar {
    display: none;
  }
  .archive-card:first-child {
    display: block;
  }
  .archive-card:first-child .archive-visual,
  .archive-card:first-child .archive-visual img {
    min-height: 260px;
  }
  .archive-card:first-child h2 {
    font-size: clamp(1.65rem, 8vw, 2.35rem);
  }
  .article-toc {
    padding: 18px;
  }
  .article-body blockquote {
    margin-inline: 0;
    padding: 18px 20px;
  }
  .contact-panel {
    border-radius: var(--radius);
  }
}

/* Orange and white brand application */
.experience-card span,
.process-list span,
.article-body a,
.article-toc a[aria-current="true"] {
  color: var(--accent-strong);
}

.ticker,
.manifesto,
.contact-section,
.contact-page,
.case-blue,
.result-card-featured {
  color: var(--ink);
}
.ticker-track i {
  color: var(--white);
}
.manifesto .section-kicker,
.manifesto-copy,
.contact-section .eyebrow.light,
.contact-section .contact-actions > p,
.contact-page .eyebrow.light,
.contact-intro > p:last-child,
.result-card-featured > p:last-child {
  color: rgba(18, 19, 17, 0.72);
}
.contact-section .eyebrow.light span,
.contact-page .eyebrow.light span {
  background: var(--ink);
  box-shadow: 0 0 0 5px rgba(18, 19, 17, 0.13);
}
.contact-email {
  border-color: rgba(18, 19, 17, 0.34);
}
.case-blue .case-copy > p,
.case-blue .case-top,
.case-blue .case-copy ul {
  opacity: 0.75;
}
.contact-page .dark-header {
  color: var(--ink);
}
.contact-page .dark-header .menu-toggle span:not(.sr-only) {
  background: var(--ink);
}
.contact-page .dark-header.is-scrolled {
  color: var(--white);
}
.contact-footer {
  border-color: rgba(18, 19, 17, 0.25);
}
:focus-visible {
  outline-color: var(--ink);
  box-shadow: 0 0 0 5px rgba(255, 253, 248, 0.88);
}

/* Professional portrait treatment */
.hero-visual {
  position: relative;
  padding: 0 16px 18px 0;
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 52px 0 0 54px;
  border-radius: var(--radius-lg);
  background: var(--accent);
  box-shadow: 0 18px 55px rgba(255, 69, 0, 0.2);
  pointer-events: none;
}
.portrait-frame {
  min-height: 610px;
  border: 8px solid var(--white);
  border-radius: var(--radius-lg);
  outline: 1px solid rgba(18, 19, 17, 0.18);
  box-shadow: 0 28px 80px rgba(18, 19, 17, 0.18);
}
.portrait-frame img {
  min-height: 610px;
  object-position: center 24%;
}
.portrait-note {
  position: relative;
  z-index: 2;
  margin-right: 2px;
}

/* Contact form */
.contact-main {
  gap: clamp(45px, 7vw, 90px);
}
/* Scoped, or this would override the single-column rule at 980px and leave
   the form in a ~170px column on phones. */
@media (min-width: 981px) {
  .contact-main {
    grid-template-columns: 0.84fr 1.16fr;
  }
}
.contact-intro h1 {
  font-size: clamp(3.8rem, 6.5vw, 6.8rem);
}
.contact-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 35px;
}
.contact-trust span {
  padding: 8px 11px;
  border: 1px solid rgba(18, 19, 17, 0.25);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}
.contact-panel {
  padding: clamp(25px, 3.5vw, 42px);
}
.form-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.form-heading p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
}
.form-heading span {
  color: var(--muted);
  font-size: 0.65rem;
}
.contact-form {
  display: grid;
  gap: 22px;
  padding-block: 28px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
}
.contact-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.contact-form label > span {
  color: #34352f;
  font-size: 0.69rem;
  font-weight: 750;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 49px;
  padding: 12px 13px;
  border: 1px solid rgba(18, 19, 17, 0.2);
  border-radius: 10px;
  color: var(--ink);
  background: #fffdfa;
  font: inherit;
  font-size: 0.88rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.contact-form textarea {
  min-height: 145px;
  resize: vertical;
  line-height: 1.55;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #85867e;
  opacity: 1;
}
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover {
  border-color: rgba(18, 19, 17, 0.4);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-light);
  background: var(--white);
}
.form-honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-submit {
  display: flex;
  align-items: center;
  gap: 20px;
}
.form-submit button {
  flex: 0 0 auto;
  border: 0;
}
.form-submit button:disabled {
  cursor: wait;
  opacity: 0.64;
  transform: none;
}
.form-submit > p {
  max-width: 250px;
  margin: 0;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.45;
}
.form-status {
  margin: 0;
  padding: 13px 15px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 650;
}
.form-status[data-state="success"] {
  color: #124c2b;
  background: #dff5e7;
  border: 1px solid #a8ddba;
}
.form-status[data-state="error"] {
  color: #84220b;
  background: #ffebe5;
  border: 1px solid #ffc1ae;
}
.contact-panel .contact-social {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .brand-logo {
    width: 132px;
  }
  .contact-page .site-nav.is-open {
    color: var(--white);
  }
  .hero-visual {
    padding: 0 10px 12px 0;
  }
  .hero-visual::before {
    inset: 38px 0 0 35px;
  }
  .portrait-frame,
  .portrait-frame img {
    min-height: 520px;
  }
  .portrait-frame {
    border-width: 6px;
  }
  .contact-main {
    padding-top: 120px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-heading,
  .form-submit {
    align-items: flex-start;
    flex-direction: column;
  }
  .form-submit button {
    width: 100%;
  }
}

/* Restrained brand balance: warm white first, orange as punctuation */
.ticker {
  color: var(--white);
  background: #bd3300;
  box-shadow: inset 0 3px var(--accent);
}
.ticker-track {
  font-size: 1.35rem;
}
.ticker-track i {
  color: var(--white);
  opacity: 0.78;
}

.manifesto {
  color: var(--ink);
  background: var(--white);
  border-block: 1px solid var(--line);
}
.manifesto .section-kicker {
  color: var(--accent-strong);
}
.manifesto-copy {
  color: var(--muted);
}

.contact-section {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
}
.contact-section::after {
  content: "";
  position: absolute;
  width: 300px;
  aspect-ratio: 1;
  right: -170px;
  bottom: -170px;
  border: 38px solid var(--accent);
  border-radius: 50%;
  opacity: 0.95;
  pointer-events: none;
}
.contact-section .contact-grid {
  position: relative;
  z-index: 1;
}
.contact-section .eyebrow.light {
  color: rgba(255, 255, 255, 0.72);
}
.contact-section .eyebrow.light span {
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(255, 69, 0, 0.2);
}
.contact-section .contact-actions > p {
  color: rgba(255, 255, 255, 0.66);
}
.contact-section .contact-email {
  border-color: rgba(255, 255, 255, 0.35);
}

.contact-page {
  color: var(--white);
  background: var(--ink);
}
.contact-page .dark-header {
  color: var(--white);
}
.contact-page .dark-header .menu-toggle span:not(.sr-only) {
  background: var(--white);
}
.contact-page .eyebrow.light {
  color: rgba(255, 255, 255, 0.72);
}
.contact-page .eyebrow.light span {
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(255, 69, 0, 0.2);
}
.contact-intro > p:last-child {
  color: rgba(255, 255, 255, 0.68);
}
.contact-trust span {
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.24);
}
.contact-footer {
  border-color: rgba(255, 255, 255, 0.2);
}

.case-blue {
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 6px solid var(--accent);
}
.case-blue .case-number {
  color: var(--accent-strong);
}
.case-blue .case-copy > p,
.case-blue .case-top,
.case-blue .case-copy ul {
  opacity: 0.7;
}

.result-card-featured {
  color: var(--white);
  background: #bd3300;
  border-color: transparent;
  border-top: 6px solid var(--accent);
}
.result-card-featured > p:last-child {
  color: rgba(255, 255, 255, 0.78);
}
.result-card-featured .result-label {
  color: var(--white);
}

.archive-card:nth-child(3n + 2) .archive-visual {
  background: #292a27;
}
.archive-number {
  color: var(--accent);
  opacity: 0.9;
}

@media (max-width: 760px) {
  .ticker-track {
    font-size: 1.15rem;
  }
  .contact-section::after {
    width: 210px;
    right: -140px;
    bottom: -140px;
    border-width: 28px;
  }
}

/* Human editorial system: quiet typography, flat surfaces and deliberate spacing */
:root {
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: none;
  --shadow: none;
  --font-display: "Source Serif 4", Georgia, serif;
}

body,
body:not(.dark-page):not(.contact-page) {
  background-image: none;
}
h1,
h2,
h3,
.hero h1,
.section-heading h2,
.about-copy h2,
.contact-section h2,
.about-hero-copy h1,
.work-hero h1,
.services-hero h1,
.contact-intro h1,
.archive-hero h1,
.article-header h1,
.manifesto h2,
.timeline-item h3,
.principle-grid h3,
.page-cta h2,
.offer-card h2,
.process-list h3,
.services-cta h2,
.case-number,
.case-copy h2,
.archive-number,
.archive-card h2,
.article-body,
.article-related h2,
.related-card h3 {
  font-family: var(--font-display);
}

.site-header {
  padding-top: 0;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  padding-top: 0;
  background: rgba(244, 241, 233, 0.97);
  border-bottom-color: var(--line);
}
.site-header.is-scrolled .nav-shell,
.nav-shell {
  min-height: 74px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.site-nav {
  gap: 24px;
}
.site-nav > a {
  min-height: 44px;
  padding: 0;
  border-radius: 0;
  font-size: 0.8rem;
}
.site-nav > a:not(.nav-cta):hover {
  background: transparent;
}
.site-nav > a:not(.nav-cta)::after {
  inset: auto 0 5px;
}
.nav-cta,
.button,
.button-light {
  padding-inline: 18px;
  border-radius: 2px;
  box-shadow: none;
}
.button,
.button *,
.nav-cta *,
.text-link *,
.contact-email *,
.big-email * {
  transition: none;
}
.button:hover,
.button-dark:hover,
.button:active {
  transform: none;
  box-shadow: none;
}
.button:hover span,
.nav-cta:hover span,
.text-link:hover span,
.contact-email:hover span,
.big-email:hover span {
  transform: none;
}
.dark-header.is-scrolled {
  background: rgba(18, 19, 17, 0.97);
}
.site-nav a[aria-current="page"]:not(.nav-cta),
.dark-header .site-nav a[aria-current="page"]:not(.nav-cta) {
  color: var(--accent);
  background: transparent;
}

.eyebrow {
  display: block;
  margin: 0 0 24px;
  padding-left: 12px;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}
.eyebrow span {
  display: none;
}
.eyebrow.light {
  color: rgba(255, 255, 255, 0.7);
}
.section-kicker,
.page-cta > p,
.services-cta p {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.reveal,
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.hero {
  min-height: 720px;
  padding-block: 138px 72px;
  gap: clamp(44px, 7vw, 90px);
}
.hero-copy::before,
.hero-visual::before {
  display: none;
}
.hero-visual {
  padding: 0;
}
.hero h1 {
  max-width: 720px;
  font-size: clamp(3.4rem, 5.8vw, 5.5rem);
  letter-spacing: -0.04em;
}
.hero h1 em,
.about-hero-copy h1 em {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.08em;
}
.hero-lede {
  max-width: 590px;
  font-size: clamp(1rem, 1.3vw, 1.16rem);
}
.portrait-frame {
  min-height: 560px;
  border-radius: 2px;
  box-shadow: none;
}
.portrait-frame::before {
  display: none;
}
.portrait-frame::after {
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(18, 19, 17, 0.12);
}
.availability {
  right: 14px;
  bottom: 14px;
  border-radius: 2px;
  box-shadow: none;
  backdrop-filter: none;
}
.availability span {
  box-shadow: none;
}

.ticker {
  color: var(--ink);
  background: transparent;
  border-block: 1px solid var(--line);
  box-shadow: none;
  transform: none;
}
.ticker-track {
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 18px 24px;
  animation: none;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
}
.ticker-track i {
  color: var(--accent);
  font-size: 0.6rem;
  opacity: 1;
}
.ticker-track [aria-hidden="true"] {
  display: none;
}

.about-copy h2,
.section-heading h2 {
  font-size: clamp(2.8rem, 4.7vw, 4.7rem);
}
.service-row {
  grid-template-columns: 48px 1fr 0.8fr;
}
.service-icon {
  display: none;
}
.service-row h3 {
  font-family: var(--font-display);
  font-weight: 500;
}
.result-card,
.process-list li,
.related-card {
  border-radius: 3px;
  box-shadow: none;
}
.result-card {
  min-height: 360px;
  background: transparent;
}
.result-card-featured {
  color: var(--ink);
  background: var(--white);
  border-color: var(--line);
  border-top: 3px solid var(--accent);
}
.result-card-featured > p:last-child {
  color: var(--muted);
}
.result-card-featured .result-label {
  color: inherit;
}
.result-label {
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
}

.essay-image,
.essay-card-text > a {
  border-radius: 2px;
}
.essay-card:hover .essay-image img,
.archive-card:hover .archive-visual img {
  transform: none;
}
.editorial-cover {
  display: flex;
  flex-direction: column;
  padding: 24px;
  color: var(--ink);
  background: var(--white);
  border-top: 3px solid var(--accent);
  text-decoration: none;
}
.editorial-cover .cover-index {
  color: var(--muted);
  font-size: 0.68rem;
}
.editorial-cover strong {
  max-width: 300px;
  margin: auto 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.editorial-cover small {
  color: var(--muted);
  font-size: 0.68rem;
}
.editorial-cover-dark {
  color: var(--white);
  background: var(--ink);
  border-top-color: var(--accent);
}
.editorial-cover-dark .cover-index,
.editorial-cover-dark small {
  color: rgba(255, 255, 255, 0.6);
}
.essay-card-text > a {
  border-top: 3px solid var(--accent);
}
.round-arrow {
  border-radius: 2px;
}

.contact-section::after,
.contact-page::after,
.hero::before,
.hero::after,
.case-study::after {
  display: none;
}
.contact-section h2 {
  font-size: clamp(3.2rem, 5.7vw, 5.7rem);
}
.contact-panel {
  border-radius: 3px;
  box-shadow: none;
}
.contact-social a,
.contact-trust span {
  padding: 0;
  border: 0;
  border-radius: 0;
}
.contact-social a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-social a:hover {
  color: inherit;
  background: transparent;
}
.contact-trust {
  gap: 9px 16px;
}
.contact-trust span + span::before {
  content: "/";
  margin-right: 16px;
  color: var(--accent);
}

.about-hero-copy h1,
.work-hero h1,
.services-hero h1,
.archive-hero h1 {
  font-size: clamp(3.6rem, 6.4vw, 6.2rem);
}
.about-portrait img {
  border-radius: 2px;
  box-shadow: none;
}
.manifesto {
  border-block: 1px solid var(--line);
}
.manifesto h2 {
  font-size: clamp(2.6rem, 4.6vw, 4.5rem);
}
.principle-grid article {
  min-height: 300px;
}
.page-cta h2,
.services-cta h2 {
  font-size: clamp(2.8rem, 5.2vw, 5rem);
}

.services-hero {
  min-height: 680px;
}
.services-title > span {
  display: none;
}
.services-title {
  grid-template-columns: 1fr;
}
.offer-card {
  min-height: 390px;
}
.offer-card ul {
  display: grid;
  gap: 4px;
}
.offer-card li {
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.62);
}
.offer-card li::before {
  content: "• ";
  color: var(--accent);
}
.process-list {
  gap: 0;
  border-top: 1px solid var(--line);
}
.process-list li {
  min-height: 280px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.process-list li:first-child {
  border-left: 1px solid var(--line);
}

.case-stack {
  gap: 1px;
  background: var(--line);
}
.case-study {
  min-height: 560px;
  border-radius: 0;
}
.case-blue {
  color: var(--ink);
  background: var(--white);
  border-top: 3px solid var(--accent);
}
.case-top {
  text-transform: none;
  letter-spacing: 0;
}
.case-number {
  font-size: clamp(6rem, 14vw, 12rem);
}
.capability-cloud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 30px;
}
.capability-cloud span {
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

/* Scoped, or this reinstates a 600px hero on phones where the content is
   about 330px tall, leaving a large gap under the heading. */
@media (min-width: 761px) {
  .archive-hero {
    min-height: 600px;
  }
}
.archive-controls {
  backdrop-filter: none;
}
.archive-filters {
  gap: 18px;
}
.archive-filters button {
  min-height: 38px;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: 0.72rem;
}
.archive-filters button[aria-pressed="true"] {
  color: var(--ink);
  background: transparent;
  border-bottom-color: var(--accent);
}
.archive-visual {
  border-radius: 2px;
}
.archive-card:first-child {
  grid-column: auto;
  display: block;
}
.archive-card:first-child .archive-visual,
.archive-card:first-child .archive-visual img {
  min-height: 260px;
}
.archive-card:first-child .archive-visual,
.archive-card:first-child .archive-meta,
.archive-card:first-child h2,
.archive-card:first-child > p,
.archive-card:first-child .archive-read {
  grid-column: auto;
  grid-row: auto;
}
.archive-card:first-child h2 {
  font-size: clamp(1.4rem, 2.1vw, 2rem);
}
.archive-card:nth-child(3n + 2) .archive-visual {
  color: var(--white);
  background: #242522;
  border-top: 3px solid var(--accent);
}
.archive-meta,
.article-meta {
  text-transform: none;
  letter-spacing: 0;
}
.article-header h1 {
  font-size: clamp(3.2rem, 6vw, 5.8rem);
}
.article-hero-image {
  border-radius: 2px;
  box-shadow: none;
}
.article-toc {
  padding: 0 0 0 18px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.article-toc > p {
  text-transform: none;
  letter-spacing: 0;
}
.article-body img,
.article-body pre {
  border-radius: 2px;
}
.article-body blockquote {
  padding: 6px 0 6px 24px;
  border: 0;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.reading-progress span {
  box-shadow: none;
}
.related-card {
  min-height: 250px;
  background: transparent;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  border-radius: 2px;
  transition: border-color 0.15s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  box-shadow: none;
}
.form-status {
  border-radius: 2px;
}

@media (hover: hover) {
  .result-card:hover,
  .related-card:hover,
  .case-study:hover,
  .offer-card:hover,
  .archive-card:hover .archive-visual,
  .archive-filters button:hover,
  .capability-cloud span:hover {
    transform: none;
    box-shadow: none;
  }
  .service-row:hover,
  .timeline-item:hover {
    padding-inline: 0;
  }
}

@media (max-width: 760px) {
  :root {
    --shell: min(100% - 40px, 1180px);
  }
  html {
    scroll-padding-top: 74px;
  }
  .site-header,
  .site-header.is-scrolled {
    background: rgba(244, 241, 233, 0.98);
    border-bottom-color: var(--line);
  }
  .dark-header,
  .dark-header.is-scrolled {
    background: var(--ink);
    border-bottom-color: rgba(255, 255, 255, 0.14);
  }
  .nav-shell {
    min-height: 72px;
  }
  .brand-logo {
    width: 126px;
  }
  .site-nav,
  .dark-header .site-nav {
    inset: 72px 0 0;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 28px 20px 44px;
    color: var(--ink);
    background: var(--paper);
  }
  .dark-header .site-nav {
    color: var(--white);
    background: var(--ink);
  }
  .site-nav > a {
    width: 100%;
    min-height: 0;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 1.25rem;
  }
  .dark-header .site-nav > a {
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }
  .site-nav > a::after {
    display: none;
  }
  .site-nav .nav-cta {
    width: auto;
    margin-top: 24px;
    padding: 12px 16px;
    border: 0;
    color: var(--white);
    background: var(--ink);
    font-size: 0.86rem;
  }
  .dark-header .site-nav .nav-cta {
    color: var(--ink);
    background: var(--white);
  }

  .hero {
    min-height: 0;
    padding-block: 120px 64px;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero h1 {
    font-size: clamp(3rem, 13.5vw, 4rem);
  }
  .hero-lede {
    margin-top: 22px;
    font-size: 1rem;
  }
  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
    margin-top: 28px;
  }
  .hero-actions .button {
    width: 100%;
  }
  .hero-stats {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 42px;
    padding: 0;
  }
  .hero-stats div {
    grid-template-columns: 76px 1fr;
    align-items: center;
    padding-block: 15px;
    border-bottom: 1px solid var(--line);
  }
  .hero-stats dd {
    max-width: none;
  }
  .portrait-frame,
  .portrait-frame img {
    min-height: 470px;
  }
  .portrait-note {
    text-align: left;
    align-self: flex-start;
  }
  .ticker-track {
    justify-content: flex-start;
    gap: 8px 12px;
    padding-inline: 20px;
    font-size: 0.75rem;
  }

  .section {
    padding-block: 76px;
  }
  .section-heading {
    margin-bottom: 42px;
  }
  .section-heading.split {
    grid-template-columns: 1fr;
  }
  .section-heading.split .text-link {
    justify-self: start;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-copy,
  .experience-card {
    grid-column: 1;
  }
  .about-copy h2,
  .section-heading h2 {
    font-size: clamp(2.65rem, 12vw, 3.6rem);
  }
  .experience-card {
    grid-template-columns: 1fr;
    padding-top: 24px;
  }
  .experience-card > div {
    padding: 0 0 20px;
    border-bottom: 1px solid var(--line);
  }
  .service-row {
    grid-template-columns: 28px 1fr;
    gap: 10px 16px;
    padding-block: 25px;
  }
  .service-row p {
    grid-column: 2;
  }
  .results-grid,
  .essay-grid {
    grid-template-columns: 1fr;
  }
  .result-card,
  .result-card-featured {
    min-height: 300px;
    grid-column: auto;
    padding: 24px;
  }
  .contact-section {
    padding-block: 78px;
  }
  .contact-section h2 {
    font-size: clamp(2.8rem, 12.5vw, 3.8rem);
  }

  .about-hero,
  .services-hero,
  .work-hero,
  .archive-hero {
    padding-block: 118px 64px;
  }
  .about-hero-copy h1,
  .services-hero h1,
  .work-hero h1,
  .archive-hero h1 {
    font-size: clamp(3rem, 13vw, 4.1rem);
  }
  .about-portrait {
    max-width: none;
  }
  .manifesto,
  .principles,
  .process-section,
  .capabilities-strip {
    padding-block: 76px;
  }
  .manifesto-grid,
  .manifesto-copy {
    gap: 28px;
  }
  .manifesto h2 {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }
  .principle-grid article {
    min-height: 250px;
    padding: 24px;
  }
  .timeline-item {
    padding-block: 24px;
  }
  .page-cta,
  .services-cta {
    padding-block: 82px;
    text-align: left;
  }
  .page-cta h2,
  .services-cta h2 {
    margin-inline: 0;
    font-size: clamp(2.7rem, 12vw, 3.7rem);
  }
  .page-cta .button,
  .services-cta .button {
    width: 100%;
  }

  .offer-grid {
    border-left: 0;
  }
  .offer-card {
    min-height: auto;
    padding: 32px 0;
    border-right: 0;
  }
  .offer-card h2 {
    margin-top: 32px;
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
  .offer-card ul {
    margin-top: 24px;
    padding-top: 0;
  }
  .process-list {
    grid-template-columns: 1fr;
  }
  .process-list li,
  .process-list li:first-child {
    min-height: 220px;
    border: 0;
    border-bottom: 1px solid var(--line);
  }
  .case-study {
    min-height: auto;
    padding: 28px 22px;
  }
  .case-number {
    margin-block: 48px;
    font-size: clamp(5.2rem, 28vw, 8rem);
  }
  .case-copy ul {
    grid-template-columns: 1fr;
  }
  .capability-cloud {
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }

  .contact-main {
    padding-block: 118px 54px;
  }
  .contact-intro h1 {
    font-size: clamp(3rem, 13vw, 4rem);
  }
  .contact-panel {
    padding: 22px 18px;
  }
  .contact-trust span + span::before {
    display: none;
  }
  .contact-trust {
    flex-direction: column;
  }
  .contact-form input,
  .contact-form textarea,
  .archive-controls input {
    font-size: 16px;
  }

  .archive-controls {
    margin-inline: 20px;
    width: auto;
    padding-block: 18px;
  }
  .archive-filters {
    margin-inline: -4px;
    padding: 6px 4px 2px;
  }
  .archive-grid {
    gap: 48px;
  }
  .archive-visual,
  .archive-visual img {
    min-height: 220px;
  }
  .article-header {
    padding-block: 118px 48px;
  }
  .article-header h1 {
    font-size: clamp(2.8rem, 12vw, 3.8rem);
  }
  .article-header > p {
    font-size: 1rem;
  }
  .article-layout {
    gap: 42px;
    padding-bottom: 76px;
  }
  .article-toc {
    padding: 0 0 0 16px;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
  }
  .article-body {
    font-size: 1.05rem;
    line-height: 1.75;
  }
  .article-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .article-related {
    padding-block: 76px;
  }
  .related-card {
    min-height: 220px;
    padding: 22px;
  }
  .footer-inner {
    padding-block: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Landscape About portrait */
.about-hero {
  grid-template-columns: 0.9fr 1.1fr;
}
.about-portrait img {
  width: 100%;
  max-height: none;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 760px) {
  .about-hero {
    grid-template-columns: 1fr;
  }
  .about-portrait img {
    height: clamp(260px, 60vw, 360px);
    max-height: 360px;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 58%;
    border-radius: 20px;
  }
}

/* Scroll motion: 10% viewport trigger, one second, no stagger, runs once */
.motion-enabled .motion-target {
  opacity: 0;
}
.motion-enabled .motion-target.motion-zoom-in {
  animation: scroll-zoom-in 1s linear 0s both;
  will-change: opacity, transform;
}
.motion-enabled .motion-target.motion-complete {
  opacity: 1;
  transform: none;
}

@keyframes scroll-zoom-in {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .motion-target,
  .motion-enabled .motion-target.motion-zoom-in {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Editorial portrait details */
.portrait-meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 16px 2px 0;
}
.portrait-meta .availability {
  position: static;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.93rem;
  font-weight: 400;
  line-height: 1.3;
}
.portrait-meta .availability span {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 5px;
  border-radius: 0;
  color: var(--accent);
  background: transparent;
  font-family: Arial, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.portrait-meta .portrait-note {
  align-self: auto;
  margin: 0;
}

@media (max-width: 480px) {
  .portrait-meta {
    gap: 16px;
  }
  .portrait-meta .availability,
  .portrait-meta .portrait-note {
    font-size: 0.68rem;
  }
}

/* Essay signals and conversation */
.essay-engagement {
  padding-block: clamp(72px, 9vw, 118px);
}
.signal-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 48px;
  padding: clamp(32px, 5vw, 58px) 0;
  border-block: 1px solid var(--ink);
}
.signal-panel h2,
.conversation-heading h2 {
  margin: 7px 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.05em;
}
.signal-panel > div:first-child > p:last-child,
.comment-form-heading p {
  margin: 0;
  color: var(--muted);
}
.signal-action {
  display: grid;
  justify-items: end;
  gap: 11px;
}
.signal-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-width: 196px;
  min-height: 58px;
  padding: 13px 20px;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--white);
  background: var(--ink);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}
.signal-button:hover {
  color: var(--ink);
  background: transparent;
}
.signal-button:active {
  transform: translateY(2px);
}
.signal-button:disabled {
  cursor: wait;
  opacity: 0.72;
}
.signal-button.is-signalled {
  color: var(--ink);
  background: transparent;
}
.signal-mark {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.signal-mark::before,
.signal-mark::after,
.signal-mark i {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.signal-mark::before {
  width: 14px;
  height: 14px;
}
.signal-mark::after {
  width: 4px;
  height: 4px;
  border: 0;
  background: var(--accent);
}
.signal-button.is-signalled .signal-mark {
  animation: signal-ring 650ms ease-out;
}
.signal-count {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}
.signal-count strong {
  color: var(--ink);
  font-size: 0.82rem;
}
.conversation-panel {
  padding-top: clamp(68px, 9vw, 112px);
}
.conversation-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--line);
}
.conversation-heading > p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.7rem;
}
.comment-list {
  max-width: 820px;
  margin-left: auto;
}
.comment-empty {
  margin: 0;
  padding-block: 34px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.comment-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding-block: 30px;
  border-bottom: 1px solid var(--line);
}
.comment-item.is-reply {
  margin-left: 62px;
}
.comment-initial {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-top: 2px solid var(--accent);
  color: var(--ink);
  background: #e9e3d7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
}
.comment-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.comment-meta strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.03rem;
  font-weight: 500;
}
.comment-meta time {
  color: var(--muted);
  font-size: 0.65rem;
}
.comment-item p {
  margin: 9px 0 0;
  white-space: pre-line;
  line-height: 1.75;
}
.comment-form {
  position: relative;
  max-width: 820px;
  margin: 62px 0 0 auto;
  padding: clamp(27px, 4vw, 44px);
  border-top: 4px solid var(--accent);
  background: #ebe6dc;
}
.comment-form-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}
.comment-form-heading h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}
.comment-form-heading p {
  max-width: 260px;
  font-size: 0.68rem;
  text-align: right;
}
.comment-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.comment-form label:not(.comment-trap) {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.comment-form input,
.comment-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(18, 19, 17, 0.34);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  text-transform: none;
}
.comment-form input {
  min-height: 45px;
}
.comment-form textarea {
  resize: vertical;
}
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: none;
}
.comment-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.comment-submit {
  display: flex;
  align-items: center;
  gap: 20px;
}
.comment-submit p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
}

@keyframes signal-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.42);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(255, 69, 0, 0);
  }
}

@media (max-width: 760px) {
  .signal-panel {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 30px;
  }
  .signal-action {
    justify-items: start;
  }
  .conversation-heading,
  .comment-form-heading {
    display: block;
  }
  .conversation-heading > p,
  .comment-form-heading p {
    margin-top: 13px;
    text-align: left;
  }
  .comment-list,
  .comment-form {
    max-width: none;
  }
  .comment-item.is-reply {
    margin-left: 28px;
  }
  .comment-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .comment-submit {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal-button,
  .signal-button.is-signalled .signal-mark {
    transition: none;
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Mobile typography and touch pass

   Secondary styles across the site were set between 0.62rem and 0.72rem, which
   lands at 9-11px on a phone. This lifts them to a legible floor, eases the
   display sizes so headlines stop breaking into one-word lines, and brings
   controls up to a 44px target.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Display type: smaller and a touch looser, so lines hold 3-5 words */
  .hero h1 {
    font-size: clamp(2.5rem, 11vw, 3.4rem);
    line-height: 1.07;
    letter-spacing: -0.035em;
  }
  .about-hero-copy h1,
  .services-hero h1,
  .work-hero h1,
  .archive-hero h1,
  .contact-intro h1,
  .article-header h1,
  .blog-hero h1 {
    font-size: clamp(2.45rem, 10.5vw, 3.3rem);
    line-height: 1.07;
    letter-spacing: -0.035em;
  }
  .about-copy h2,
  .section-heading h2,
  .contact-section h2,
  .manifesto h2,
  .page-cta h2,
  .services-cta h2,
  .article-related h2,
  .signal-panel h2,
  .conversation-heading h2 {
    font-size: clamp(2.05rem, 9.2vw, 2.9rem);
    line-height: 1.1;
  }
  /* Clear the descenders in "repeatable revenue." */
  .hero h1 em,
  .about-hero-copy h1 em {
    text-underline-offset: 0.14em;
    text-decoration-thickness: 0.055em;
  }

  /* Micro labels: eyebrows, kickers, counters */
  .eyebrow,
  .section-kicker,
  .result-label,
  .service-number,
  .experience-card span,
  .principle-grid span,
  .process-list span,
  .offer-card > span,
  .timeline-item > span,
  .timeline-item time,
  .essay-index,
  .cover-index,
  .contact-panel > p,
  .form-heading p,
  .article-author .author-label,
  .availability span,
  .case-top {
    font-size: 0.78rem;
  }

  /* Meta: dates, categories, captions, notes */
  .essay-meta,
  .archive-meta,
  .article-meta,
  .blog-item time,
  .blog-item span,
  .about-portrait figcaption,
  .archive-status,
  .form-heading span,
  .form-submit p,
  .portrait-meta .availability,
  .portrait-meta .portrait-note,
  .essay-image small,
  .related-card small,
  .article-toc > p {
    font-size: 0.8rem;
  }

  /* Secondary body copy and lists */
  .experience-card p,
  .result-card > p:last-child,
  .service-row p,
  .principle-grid p,
  .process-list p,
  .offer-card li,
  .case-copy ul li,
  .contact-actions > p,
  .page-cta > p,
  .article-author .author-details > p {
    font-size: 0.85rem;
    line-height: 1.6;
  }

  .hero-stats dt {
    font-size: 1.55rem;
  }
  .hero-stats dd {
    font-size: 0.8rem;
    line-height: 1.4;
  }
  .site-footer {
    font-size: 0.82rem;
  }

  /* Two text blocks side by side is too tight under the portrait */
  .portrait-meta {
    flex-direction: column;
    gap: 12px;
  }

  /* Controls: 44px minimum target */
  .menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .text-link,
  .inline-links a,
  .article-back,
  .archive-read,
  .social-links a,
  .footer-inner a,
  .contact-social a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
  }
  .archive-filters button {
    min-height: 44px;
    font-size: 0.82rem;
  }
  .article-toc a {
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 0.88rem;
  }
  .signal-button {
    font-size: 0.85rem;
  }
  .contact-form label > span,
  .comment-form label > span {
    font-size: 0.85rem;
  }
  /* 16px keeps iOS from zooming the page when a field takes focus */
  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .comment-form input,
  .comment-form textarea,
  .archive-controls input {
    font-size: 1rem;
  }

  /* These carry higher-specificity or !important sizes further up the file,
     so they have to be matched selector for selector. */
  .portrait-meta .availability span {
    font-size: 0.75rem;
  }
  .editorial-cover .cover-index {
    font-size: 0.78rem;
  }
  .result-label {
    font-size: 0.78rem !important;
  }
  .related-card > span,
  .contact-trust span,
  .signal-count,
  .signal-count span,
  .comment-form-heading p,
  .comment-submit p {
    font-size: 0.8rem;
  }
  .contact-footer,
  .contact-footer a,
  .conversation-heading > p {
    font-size: 0.82rem;
  }
  .archive-card > p {
    font-size: 0.85rem;
    line-height: 1.6;
  }
}

/* ---------------------------------------------------------------------------
   Essay reading layer

   The essay body already resolved to Source Serif 4, but only the upright
   400/500/600 weights were ever downloaded. That left <strong> synthesising a
   fake 700 and every <em> rendering as a mechanical slant of the roman. The
   font link now carries the italic axis, so this layer asks for the weights
   that actually exist and lets the variable optical-size axis do its job.

   The rest is measure and rhythm: 760px at ~19px ran 78-80 characters a line,
   past the point where the eye reliably finds the next line, so the column
   comes in and the leading tightens to match. Body headings were climbing to
   51px inside that column with tracking tuned for the 100px display sizes.
   --------------------------------------------------------------------------- */
.article-layout {
  grid-template-columns: 200px minmax(0, 700px);
}
.article-body {
  font-size: clamp(1.13rem, 1rem + 0.4vw, 1.24rem);
  line-height: 1.76;
  font-optical-sizing: auto;
  letter-spacing: 0.002em;
  text-wrap: pretty;
}
.article-body p {
  margin-block: 1.35em;
}
/* Source Serif 4 ships 600 here, not 700; asking for bold gets a faux weight */
.article-body strong,
.article-body b {
  font-weight: 600;
}

/* Opening paragraph carries the reader in */
.article-body > p:first-of-type {
  color: var(--ink);
  font-size: 1.13em;
  line-height: 1.62;
}

.article-body h2,
.article-body h3 {
  color: var(--ink);
  text-wrap: balance;
}
.article-body h2 {
  /* em here resolves against the heading's own 38px, so this is roughly two
     lines of body copy rather than the four it reads as on paper. */
  margin: 1.95em 0 0.58em;
  padding-top: 0;
  font-size: clamp(1.8rem, 1.35rem + 1.5vw, 2.4rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.013em;
}
.article-body h3 {
  margin: 1.9em 0 0.5em;
  font-size: clamp(1.34rem, 1.15rem + 0.7vw, 1.6rem);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.006em;
}

/* Underlines sat on the descenders and competed with the text */
.article-body a {
  text-decoration-color: rgba(169, 46, 0, 0.32);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.17em;
  transition: text-decoration-color 0.2s ease;
}
.article-body a:hover {
  text-decoration-color: var(--accent-strong);
}

.article-body ul,
.article-body ol {
  margin-block: 1.4em;
  padding-left: 1.3em;
}
.article-body li {
  margin-bottom: 0.5em;
  padding-left: 0.15em;
}
.article-body li::marker {
  color: var(--accent);
}

.article-body blockquote {
  margin: 2.3em 0;
  padding: 0.15em 0 0.15em 1.5rem;
  border-left: 2px solid var(--accent);
  font-size: 1.2em;
  font-style: italic;
  line-height: 1.5;
}
.article-body blockquote > :first-child {
  margin-top: 0;
}
.article-body blockquote > :last-child {
  margin-bottom: 0;
}

.article-body hr {
  width: 90px;
  margin: 3em auto;
  border: 0;
  border-top: 1px solid var(--line);
}

/* The standfirst under the headline is read, not skimmed */
.article-header > p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.55;
}

::selection {
  color: var(--ink);
  background: var(--accent-light);
}

@media (max-width: 980px) {
  .article-layout {
    grid-template-columns: 1fr;
    max-width: 740px;
  }
}

@media (max-width: 760px) {
  .article-body {
    font-size: 1.08rem;
    line-height: 1.72;
    /* Short measure plus a serif leaves a hard rag without this */
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .article-body h2 {
    margin-top: 1.9em;
    font-size: clamp(1.6rem, 6.6vw, 2rem);
  }
  .article-body h3 {
    font-size: clamp(1.26rem, 5.2vw, 1.48rem);
  }
  .article-body blockquote {
    padding-left: 1.1rem;
    font-size: 1.12em;
  }
  .article-header > p {
    font-size: 1.1rem;
  }
}