/* ============================================================
   agenticseo.solutions — editorial design system
   ------------------------------------------------------------
   Ported from the React/Babel template in
   `seoagent-cloud-template-reworked/` and adapted for the
   existing static multi-page site. Class names match the
   template where possible so the visual language is identical,
   plus small additions for the static pages (about, services,
   blog hub, single post, contact) that the original
   single-page prototype did not need to cover.

   Why we kept the template's tokens (--paper, --ink, --accent,
   etc.) instead of mapping them onto the previous OKLCH yellow
   palette: the new look is fundamentally different (warm paper
   + sienna + serif typography) and the page copy expects those
   tokens. Trying to alias them into the old --background /
   --foreground variables would have produced a muddier result
   without saving any code.
   ============================================================ */

:root {
  /* Variation A — light editorial (default). Mirrors the
     template's "paper" mode so the design reads identically. */
  --paper: #f1ece2;
  --paper-2: #ebe5d7;
  --ink: #16140e;
  --ink-2: #3a352a;
  --ink-3: #6b6452;
  --rule: rgba(22, 20, 14, 0.16);
  --rule-soft: rgba(22, 20, 14, 0.08);
  --accent: oklch(0.56 0.13 38);          /* sienna */
  --accent-ink: #ffffff;
  --highlight: rgba(22, 20, 14, 0.06);

  /* Parallax multiplier — assets/parallax.js reads this so we
     can disable or scale all parallax effects from one place
     (also useful for prefers-reduced-motion users below). */
  --parallax-mul: 1;
}

[data-variant="dark"] {
  /* Variation B — ink mode. Optional; toggle via the small
     theme switch in partials/nav.html. Keeping the dark map
     because the template ships it and the user may want to
     enable it later without re-deriving the palette. */
  --paper: #0e0d0a;
  --paper-2: #16140f;
  --ink: #ece6d6;
  --ink-2: #c4bda9;
  --ink-3: #7c7665;
  --rule: rgba(236, 230, 214, 0.18);
  --rule-soft: rgba(236, 230, 214, 0.08);
  --accent: oklch(0.82 0.13 90);          /* antique gold */
  --accent-ink: #16140f;
  --highlight: rgba(236, 230, 214, 0.05);
}

/* Respect users who asked their OS for less motion. We do not
   remove parallax entirely (the layout still works without it)
   but we stop the scroll-driven translation. */
@media (prefers-reduced-motion: reduce) {
  :root { --parallax-mul: 0; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  /* Newsreader is the editorial body face; Source Serif 4 is
     kept as a fallback for environments that fail to load the
     Google font (matches the template). */
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-feature-settings: "kern", "liga", "onum";
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Long transitions so flipping the theme toggle does not
     strobe — the template uses 600ms here. */
  transition: background 600ms ease, color 600ms ease;
}

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

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

/* Accessible visually-hidden helper kept from the previous
   build so existing `.sr-only` markup (e.g. on the services
   page) still works. */
.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;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.serif-display {
  font-family: "Instrument Serif", "Newsreader", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.95;
}

/* ============================================================
   Layout primitives
   ============================================================ */

.page {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

.shell {
  /* Same max-width / horizontal padding as the template so
     section rhythm matches across pages. */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
  position: relative;
}

@media (max-width: 720px) {
  .shell { padding: 0 24px; }
}

.divider {
  height: 1px;
  background: var(--rule);
  width: 100%;
}

/* ============================================================
   Top bar (nav)
   ------------------------------------------------------------
   Class names match partials/nav.html. The template used a
   <header class="topbar"> + <nav class="nav-links">; we use
   the same so the look is identical.
   ============================================================ */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 22px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* color-mix gives us a translucent paper without baking in
     an alpha hex so theme switches still tint correctly. */
  background: color-mix(in oklab, var(--paper) 78%, transparent);
  border-bottom: 1px solid var(--rule-soft);
}

@media (max-width: 720px) {
  .topbar { padding: 16px 24px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  /* Decorative circular brand glyph from the template. We keep
     it (rather than dropping the logo image) because it scales
     better at small sizes and avoids the previous logo.png
     bitmap. The original logo.png still lives in /assets/ for
     OG/share images. */
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--paper);
}
.brand-mark::before {
  content: "";
  position: absolute;
  width: 2px; height: 28px; left: 11px; top: -2px;
  background: var(--accent);
  transform: rotate(38deg);
  transform-origin: center;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1;
  color: var(--ink);
  text-transform: none;
}

.wordmark-main {
  font-family: var(--display);
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: .92;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.wordmark-sub {
  margin-top: 3px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
}

.wordmark--footer .wordmark-main { color: var(--paper); }
.wordmark--footer .wordmark-sub { color: var(--accent); }

/* Raster logo (nav + footer) — cropped from brand artwork, tinted to site ink/paper. */
.site-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

.site-logo__img {
  display: block;
  width: auto;
  height: 38px;
  max-width: min(240px, 46vw);
  object-fit: contain;
}

.site-logo--footer .site-logo__img {
  height: 44px;
  max-width: min(280px, 72vw);
}

.brand-name {
  font-family: "Instrument Serif", serif;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.brand-name b { font-weight: 400; }
.brand-name .dot { color: var(--accent); }

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  position: relative;
  padding: 4px 0;
  color: var(--ink-2);
  transition: color 200ms;
}

.nav-link:hover { color: var(--ink); }

.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 1px;
  background: var(--accent);
  transition: right 220ms ease;
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after { right: 0; }

.nav-cta {
  border: 1px solid var(--ink);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  font-family: "Instrument Serif", serif;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: background 220ms, color 220ms;
}

.nav-cta:hover { background: var(--ink); color: var(--paper); }

/* Tiny theme switch in the top bar. Optional; the markup is in
   partials/nav.html and the toggling lives in assets/site.js
   so users (and the brand) can preview the dark mode without
   us shipping the full template Tweaks panel. */
.theme-toggle {
  appearance: none;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: border-color 200ms, color 200ms, background 200ms;
}
.theme-toggle:hover { border-color: var(--ink); color: var(--ink); }

@media (max-width: 720px) {
  /* Legacy editorial template only. Shared nav (.topbar.top) uses
     the 900px mobile drawer defined later in this file. */
  .topbar:not(.top) .nav-links .nav-link { display: none; }
}

/* Push content below the fixed topbar. We do this on a wrapper
   instead of body so we can keep different paddings per page
   (the home hero handles its own top space). */
.page-shift { padding-top: 88px; }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  padding: 180px 0 140px;
  overflow: hidden;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-3);
  margin-bottom: 48px;
}

.hero-eyebrow .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero-title {
  font-size: clamp(56px, 11vw, 156px);
  margin: 0;
  position: relative;
}

.hero-title .line {
  display: block;
  position: relative;
  will-change: transform;
}

.hero-title .em {
  font-style: italic;
  color: var(--accent);
}

.hero-title .ampersand {
  font-style: italic;
  font-weight: 300;
  opacity: 0.6;
  margin: 0 0.08em;
}

.hero-lede {
  max-width: 560px;
  margin-top: 56px;
  font-size: 22px;
  color: var(--ink-2);
  line-height: 1.45;
  font-weight: 350;
}

.hero-meta {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
}

.hero-meta-item .k { color: var(--ink-3); margin-bottom: 6px; }
.hero-meta-item .v {
  color: var(--ink);
  font-family: "Instrument Serif", serif;
  font-size: 28px;
  line-height: 1;
}
.hero-meta-item .v sup { font-size: 14px; vertical-align: super; color: var(--accent); }

/* CTA row under the hero meta — replaces the template's
   in-page anchor since our nav is multi-page. */
.hero-actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 14px 22px;
  font-family: "Instrument Serif", serif;
  font-size: 18px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  transition: background 220ms, color 220ms, transform 220ms;
  cursor: pointer;
}

.btn:hover { background: var(--ink); color: var(--paper); }
.btn .arrow { transition: transform 220ms ease; }
.btn:hover .arrow { transform: translateX(4px); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Dot grid + glyph parallax layers from the template. The
   `--px` var is set per element by assets/parallax.js. */
.parallax-grid {
  position: absolute;
  inset: -10% -5%;
  z-index: -1;
  background-image: radial-gradient(var(--rule) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.7;
  will-change: transform;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
  transform: translate3d(0, var(--px, 0), 0);
}

.parallax-glyphs {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.glyph {
  position: absolute;
  font-family: "Instrument Serif", serif;
  color: var(--ink);
  opacity: 0.08;
  font-size: 220px;
  line-height: 1;
  user-select: none;
  will-change: transform;
  transform: translate3d(0, var(--px, 0), 0);
}

.hero-orb {
  position: absolute;
  right: -160px;
  top: 120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  z-index: -1;
  will-change: transform;
  transform: translate3d(0, var(--px, 0), 0);
}

.hero-orb::after {
  content: "";
  position: absolute;
  inset: 60px;
  border-radius: 50%;
  border: 1px solid var(--rule-soft);
}

.hero-orb::before {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  top: 50%; left: -4px;
  transform: translateY(-50%);
}

/* ============================================================
   Section header
   ============================================================ */

.section {
  position: relative;
  padding: 140px 0;
}

.section--compact { padding: 100px 0; }

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 80px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}

.section-title {
  font-family: "Instrument Serif", serif;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 0.98;
  margin: 0;
  letter-spacing: -0.01em;
}

.section-title .em { font-style: italic; color: var(--accent); }

/* ============================================================
   Page hero (used by /about/, /services/, /get-in-touch/,
   /blog/, /blog/<slug>/). Mirrors the editorial section-head
   but without the column split — pages already have their own
   focus.
   ============================================================ */

.page-hero {
  padding: 56px 0 24px;
}

.page-hero__eyebrow {
  color: var(--ink-3);
  margin-bottom: 16px;
}

.page-hero__title {
  font-family: "Instrument Serif", serif;
  font-size: clamp(48px, 9vw, 120px);
  line-height: 0.98;
  margin: 0;
  letter-spacing: -0.01em;
}

.page-hero__title .em { font-style: italic; color: var(--accent); }

.page-hero__lede {
  max-width: 640px;
  margin-top: 24px;
  font-size: 21px;
  color: var(--ink-2);
}

.page-hero__divider {
  margin: 56px 0 0;
  border: 0;
  height: 1px;
  background: var(--rule);
}

/* ============================================================
   About
   ============================================================ */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
}

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  overflow: hidden;
  border-radius: 2px;
  will-change: transform;
}

/* When a real photograph is provided we let it fill the
   portrait frame; the diagonal stripes only render when no
   <img> child is present (used as a printed-paper texture on
   home and the optional empty state). */
.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 18px,
    var(--rule-soft) 18px,
    var(--rule-soft) 19px
  );
}

.portrait-label {
  position: absolute;
  bottom: 18px; left: 18px;
  color: var(--ink-3);
  /* Sit above the photo if one is provided. */
  z-index: 2;
  background: color-mix(in oklab, var(--paper) 75%, transparent);
  padding: 4px 8px;
  border-radius: 2px;
}

.portrait-caption {
  margin-top: 14px;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.about-body p {
  font-size: 21px;
  line-height: 1.5;
  margin: 0 0 24px;
  color: var(--ink-2);
  text-wrap: pretty;
}

.about-body p:first-child {
  font-size: 28px;
  color: var(--ink);
  line-height: 1.35;
}

.about-body p:first-child::first-letter {
  font-family: "Instrument Serif", serif;
  font-size: 84px;
  line-height: 0.85;
  float: left;
  margin: 6px 12px 0 -4px;
  color: var(--accent);
}

.expertise {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.expertise-cell {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}

.expertise-cell.label {
  color: var(--ink-3);
}

.expertise-cell:nth-child(odd) { padding-right: 24px; }

/* ============================================================
   Featured case study / workflow
   ============================================================ */

.case-study {
  position: relative;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 100px 0;
  overflow: hidden;
}

.case-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper-2);
  overflow: hidden;
}

.case-bg-graphic {
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(circle at 80% 30%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, var(--highlight) 0%, transparent 50%);
  will-change: transform;
  transform: translate3d(0, var(--px, 0), 0);
}

.case-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}

@media (max-width: 860px) {
  .case-grid { grid-template-columns: 1fr; }
}

.case-tag {
  color: var(--accent);
  margin-bottom: 24px;
}

.case-title {
  font-family: "Instrument Serif", serif;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

.case-title .em { font-style: italic; }

.case-deck {
  font-size: 20px;
  color: var(--ink-2);
  margin: 0 0 40px;
  max-width: 540px;
}

.case-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.metric .v {
  font-family: "Instrument Serif", serif;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.metric .v .unit { font-size: 0.5em; color: var(--ink-3); margin-left: 4px; }

.metric .k {
  color: var(--ink-3);
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}

.case-link .arrow {
  transition: transform 240ms ease;
}

.case-link:hover .arrow { transform: translateX(6px); }

/* The pure-CSS/SVG figure container reused from the template
   (rendered inline on the home page). */
.case-figure {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 28px;
  border-radius: 2px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.case-figure__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.case-figure__legend {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.case-figure__legend strong {
  display: block;
  color: var(--ink);
  font-family: "Instrument Serif", serif;
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* ============================================================
   Post / service grid (used on /, /services/, /blog/)
   ============================================================ */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px 32px;
}

.post {
  grid-column: span 4;
  position: relative;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  transition: border-color 220ms;
}

.post:hover { border-color: var(--ink); }

.post > a,
.post .post-link {
  display: block;
  color: inherit;
}

.post.featured {
  grid-column: span 12;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  padding-bottom: 40px;
  margin-bottom: 24px;
  align-items: center;
}

.post.featured .post-link {
  display: contents;
}

.post.featured .post-image {
  aspect-ratio: 16 / 11;
  order: 2;
}

.post.featured .post-title { font-size: clamp(32px, 4vw, 52px); }
.post.featured .post-dek { display: block; }

.post.wide {
  grid-column: span 8;
}

.post.wide .post-image { aspect-ratio: 16 / 9; }

.post.tall {
  grid-column: span 4;
  grid-row: span 2;
}

.post.tall .post-image { aspect-ratio: 3 / 4; }

@media (max-width: 860px) {
  .post, .post.wide, .post.tall { grid-column: span 12; grid-row: auto; }
  .post.featured { grid-template-columns: 1fr; }
  .post.featured .post-image { order: 0; }
}

.post-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 20px;
}

.post-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-image-inner {
  position: absolute;
  inset: -10%;
  background: repeating-linear-gradient(
    var(--bg-angle, 45deg),
    var(--paper-2) 0,
    var(--paper-2) 22px,
    var(--rule-soft) 22px,
    var(--rule-soft) 23px
  );
  will-change: transform;
  transform: translate3d(0, var(--px, 0), 0);
}

.post-image-tag {
  position: absolute;
  top: 14px; left: 14px;
  color: var(--ink-3);
  background: var(--paper);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.post-title {
  font-family: "Instrument Serif", serif;
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.post-title .em { font-style: italic; }

.post-dek {
  font-size: 16px;
  color: var(--ink-2);
  display: none;
  margin: 0 0 16px;
  line-height: 1.5;
}

.post.wide .post-dek { display: block; }

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.read-arrow {
  display: inline-block;
  transition: transform 220ms ease;
}

.post:hover .read-arrow { transform: translateX(4px); }

.service-index-grid,
.latest-writing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}

.service-index-grid .post,
.latest-writing-grid .post {
  grid-column: auto;
  grid-row: auto;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: color-mix(in oklab, var(--card) 86%, var(--paper));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.service-index-grid .post:hover,
.latest-writing-grid .post:hover {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--rule));
}

.service-index-grid .post-link,
.latest-writing-grid .post-link {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 26px;
}

.latest-writing-grid .post-link { padding: 0; }
.latest-writing-grid .post-image { margin: 0; border-radius: 0; }
.latest-writing-grid .post-meta,
.latest-writing-grid .post-title,
.latest-writing-grid .post-dek,
.latest-writing-grid .post-footer { margin-left: 24px; margin-right: 24px; }
.latest-writing-grid .post-meta { margin-top: 22px; }
.latest-writing-grid .post-footer { margin-top: auto; padding: 18px 0 24px; }

.service-index-grid .post-title,
.latest-writing-grid .post-title { font-size: clamp(26px, 2.2vw, 34px); }
.service-index-grid .post-dek,
.latest-writing-grid .post-dek { display: block; }
.service-index-grid .post-footer { margin-top: auto; padding-top: 28px; }

@media (max-width: 980px) {
  .service-index-grid,
  .latest-writing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .service-index-grid,
  .latest-writing-grid { grid-template-columns: 1fr; }
}

.about-simple .page-hero { padding-bottom: 54px; }

.about-hero .page-hero__title {
  margin-bottom: clamp(32px, 5vw, 48px);
}

.about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.about-hero__label {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.about-hero__bio .about-body p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}

.about-hero__bio .about-body p:last-child {
  margin-bottom: 0;
}

.about-hero__bio .about-body p a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}

.about-hero__bio .about-body p a:hover,
.about-hero__bio .about-body p a:focus-visible {
  color: var(--accent);
}

.about-credentials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.about-credentials__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

.about-credentials__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.about-credentials__mark {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
}

.about-hero__linkedin-row {
  margin-top: clamp(8px, 2vw, 16px);
  display: flex;
  justify-content: flex-start;
}

.about-linkedin--row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 50%;
  max-width: 100%;
  padding: 18px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 16px 32px -18px rgba(95, 167, 157, .85);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.about-linkedin--row .about-linkedin__icon {
  color: #fff;
}

.about-linkedin--row:hover,
.about-linkedin--row:focus-visible {
  /* Slightly lighter teal on hover — default stays at --accent. */
  background: color-mix(in oklab, var(--accent) 82%, white);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 20px 36px -16px rgba(95, 167, 157, .75);
}

@media (max-width: 860px) {
  .about-hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.about-intro-panel {
  max-width: 860px;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--rule);
  border-radius: 24px;
  background: color-mix(in oklab, var(--card) 78%, var(--paper));
  box-shadow: var(--shadow);
}

/* About story: open editorial block — no card chrome on the paper background. */
.about-story {
  max-width: 760px;
}

.about-story__lead {
  margin: 0 0 28px;
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
}

.about-story .about-body--narrow p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
}

.about-story .about-body--narrow p a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}

.about-story .about-body--narrow p a:hover,
.about-story .about-body--narrow p a:focus-visible {
  color: var(--accent);
}

.about-socials { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 16px; }

.about-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.about-linkedin__icon {
  flex-shrink: 0;
  color: #0a66c2;
}

.about-linkedin:hover,
.about-linkedin:focus-visible {
  border-color: color-mix(in oklab, #0a66c2 45%, var(--rule));
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -22px rgba(10, 102, 194, .55);
}

.about-testimonials { background: var(--paper-2); border-top: 1px solid var(--rule); }
.about-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 34px;
  text-align: left;
}

.about-testimonial-grid .quote-card {
  min-height: 100%;
  padding: 32px;
}

.about-testimonial-grid .quote-card p {
  font-size: 18px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .about-testimonial-grid { grid-template-columns: 1fr; }
}

/* Launch polish: shared nav, breadcrumbs, service details. */
.topbar {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 50;
  display: block;
  padding: 0;
  background: rgba(246, 241, 233, .86);
  border-bottom: 1px solid #ece3d4;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topbar .nav {
  width: 100%;
}

.topbar .nav-cta {
  font-family: var(--font);
  text-transform: uppercase;
}

.page-hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 4.7vw, 62px);
  line-height: 1.06;
  letter-spacing: -.5px;
}

.breadcrumb {
  flex-wrap: wrap;
  row-gap: 6px;
}

.breadcrumb__link,
.breadcrumb__current,
.breadcrumb__sep {
  display: inline-flex;
  align-items: center;
}

.breadcrumb__link {
  color: color-mix(in oklab, var(--ink) 72%, var(--muted));
  transition: color .2s ease;
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
  color: var(--accent-dark);
}

.breadcrumb__sep {
  color: color-mix(in oklab, var(--muted) 55%, transparent);
  letter-spacing: 0;
}

.breadcrumb__current {
  color: var(--accent);
}

/* Breadcrumb nav replaces the old § mono eyebrow on page heroes. */
.page-hero__eyebrow.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-hero__eyebrow.breadcrumb::before {
  display: none;
}

.page-hero--compact {
  padding-bottom: 12px;
}

.page-hero--compact .page-hero__divider {
  display: none;
}

.related-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.related-service-card {
  position: relative;
  min-height: 190px;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: color-mix(in oklab, var(--card) 88%, var(--paper));
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.related-service-card::after {
  content: "";
  position: absolute;
  inset: auto -40px -55px auto;
  width: 135px;
  height: 135px;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--rule));
  border-radius: 50%;
  opacity: .55;
}

.related-service-card:hover,
.related-service-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 55%, var(--rule));
  box-shadow: 0 24px 45px -30px rgba(37,56,79,.45);
}

.related-service-card__kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.related-service-card strong {
  font-family: var(--display);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
}

.related-service-card span:not(.related-service-card__kicker) {
  color: var(--muted);
  line-height: 1.5;
}

.related-service-card em {
  margin-top: auto;
  color: var(--accent);
  font-style: normal;
  font-size: 22px;
}

@media (max-width: 980px) {
  .related-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .related-services-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Outcomes (social-style list)
   ============================================================ */

.social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.social-row {
  display: grid;
  grid-template-columns: 80px 1fr 200px 100px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: padding 320ms ease;
}

.social-row:hover {
  padding-left: 24px;
}

.social-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  z-index: -1;
  transform: translateX(-101%);
  transition: transform 420ms cubic-bezier(0.7, 0, 0.2, 1);
}

.social-row:hover::before { transform: translateX(0); }

.social-row:hover * { color: var(--accent-ink) !important; }

.social-num { color: var(--ink-3); }

.social-name {
  font-family: "Instrument Serif", serif;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.social-handle {
  color: var(--ink-3);
  text-align: left;
}

.social-arrow {
  text-align: right;
  font-family: "Instrument Serif", serif;
  font-size: 24px;
  transition: transform 320ms ease;
}

.social-row:hover .social-arrow { transform: translateX(8px); }

@media (max-width: 720px) {
  .social-row { grid-template-columns: 40px 1fr 40px; }
  .social-handle { display: none; }
}

/* ============================================================
   Quote / contact
   ============================================================ */

.quote {
  position: relative;
  padding: 160px 0 200px;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  overflow: hidden;
}

.quote-bg-letter {
  position: absolute;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  color: var(--ink);
  opacity: 0.05;
  font-size: 60vw;
  line-height: 0.8;
  top: -10%;
  right: -8%;
  user-select: none;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, var(--px, 0), 0);
}

.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
}

@media (max-width: 1080px) {
  .quote-grid { grid-template-columns: 1fr; gap: 48px; }
}

.quote-hed {
  font-family: "Instrument Serif", serif;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.96;
  margin: 0 0 32px;
  letter-spacing: -0.015em;
}

.quote-hed .em { font-style: italic; color: var(--accent); }

.quote-sub {
  color: var(--ink-2);
  font-size: 19px;
  max-width: 380px;
  margin: 0 0 40px;
}

.quote-contact {
  display: grid;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.quote-contact-item {
  display: flex;
  justify-content: space-between;
  color: var(--ink-2);
  gap: 16px;
}

.quote-contact-item .k { color: var(--ink-3); }

/* Form — drives the get-in-touch page. Class names mirror the
   template so styling stays consistent if we later swap in the
   richer React form. The honeypot field uses the same selector
   we used previously (.contact-form__honeypot) so existing
   spam handling does not regress. */
.form {
  display: grid;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 40px;
}

.field {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}

.field:last-of-type { border-bottom: none; }

.field label {
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
}

.field label .req { color: var(--accent); }

.field input,
.field textarea,
.field select {
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: "Instrument Serif", serif;
  font-size: 22px;
  padding: 4px 0;
  outline: none;
  width: 100%;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-3);
  font-style: italic;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-bottom-color: var(--accent);
}

.field textarea {
  resize: vertical;
  min-height: 120px;
  font-family: "Newsreader", serif;
  font-size: 18px;
}

/* Honeypot — visually hidden but still in the DOM so
   FormSubmit can detect spam bots that fill every field. */
.contact-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit {
  margin-top: 24px;
  padding: 22px 28px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  font-family: "Instrument Serif", serif;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 220ms, transform 220ms;
}

.submit:hover { background: var(--accent); color: var(--accent-ink); }

.submit .arrow { transition: transform 220ms ease; }
.submit:hover .arrow { transform: translateX(6px); }

.success-banner {
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--ink);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  display: flex;
  align-items: center;
  gap: 14px;
}

.success-banner[hidden] {
  display: none !important;
}

.success-banner .check {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-family: "Instrument Serif", serif;
  font-size: 16px;
  flex-shrink: 0;
}

/* ============================================================
   Footer
   ------------------------------------------------------------
   We use a richer 3-column footer instead of the template's
   1-line variant — the static site needs to surface navigation
   and brand info that the React prototype handled with anchor
   links inside its single page.
   ============================================================ */

.footer {
  padding: 64px 0 40px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  background: var(--paper);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Phones: stay 2×2 (never stack to one column — keeps the footer shorter). */
@media (max-width: 680px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px;
  }

  .footer {
    padding: 48px 0 28px;
  }

  .footer__summary {
    font-size: 14px;
    line-height: 1.5;
    max-width: none;
  }

  /* Center brand mark, column titles, links, and legal row on phones. */
  .footer__brand,
  .footer__col {
    text-align: center;
  }

  .footer__brand .site-logo {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .footer__socials {
    justify-content: center;
  }

  .footer__bottom {
    margin-top: 32px;
    padding-top: 18px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }

  .footer__legal {
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer__col h3 {
    margin-bottom: 10px;
  }

  .footer__col a {
    padding: 2px 0;
    font-size: 14px;
  }
}

.footer__brand .brand { margin-bottom: 16px; }

.footer__summary {
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 320px;
  font-size: 16px;
}

.footer__socials {
  display: flex;
  gap: 8px;
}

.footer__socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  font-family: "Instrument Serif", serif;
  font-style: italic;
  transition: border-color 200ms, color 200ms, background 200ms;
}

.footer__socials a:hover {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}

.footer__col h3 {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
  font-weight: 500;
}

.footer__col a {
  display: block;
  padding: 4px 0;
  color: var(--ink-2);
  transition: color 200ms;
}

.footer__col a:hover { color: var(--ink); }

.footer__bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--ink-3);
}

.footer__legal {
  display: flex;
  gap: 16px;
}

.footer__legal a { color: var(--ink-3); }
.footer__legal a:hover { color: var(--ink); }

/* ============================================================
   Status / Ghost feed states
   ------------------------------------------------------------
   The Ghost fetcher writes friendly errors here; we want them
   readable without being loud. Class names match the markup in
   index.html and blog/index.html so the existing JS keeps
   working.
   ============================================================ */

.ghost-status {
  color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 1.2em;
  margin: 0;
}

.ghost-status:empty { display: none; }

/* ============================================================
   Single blog post (content typography)
   ============================================================ */

.post-article {
  max-width: 760px;
  margin: 0 auto;
}

.post-article .post-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 32px;
}

.post-article h1 {
  font-family: "Instrument Serif", serif;
  font-size: clamp(40px, 7vw, 80px);
  line-height: 1;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.feature-image {
  width: 100%;
  border-radius: 2px;
  margin: 32px 0;
  display: block;
}

.content {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
}

.content p { margin: 0 0 1.2em; }

.content h2, .content h3, .content h4 {
  font-family: "Instrument Serif", serif;
  letter-spacing: -0.005em;
  margin: 2em 0 0.6em;
}

.content h2 { font-size: 36px; line-height: 1.1; }
.content h3 { font-size: 26px; line-height: 1.15; }
.content h4 { font-size: 22px; line-height: 1.2; }

.content a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 50%, transparent);
  transition: border-color 200ms;
}
.content a:hover { border-bottom-color: var(--accent); }

.content blockquote {
  margin: 1.6em 0;
  padding: 0.4em 1.2em;
  border-left: 2px solid var(--accent);
  color: var(--ink-2);
  font-style: italic;
}

.content code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85em;
  background: var(--paper-2);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

.content pre {
  background: var(--paper-2);
  padding: 16px 20px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 14px;
}

.content pre code {
  background: transparent;
  padding: 0;
}

.content img {
  margin: 1.6em auto;
  border-radius: 2px;
}

/* Related articles widget at the bottom of single blog posts. */
.related-posts {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
}

.related-posts__head {
  margin-bottom: 36px;
  text-align: center;
}

.related-posts__kicker {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.related-posts__title {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--ink);
}

.related-posts__grid {
  margin-bottom: 32px;
}

.related-posts__all {
  margin: 0;
  text-align: center;
}

@media (max-width: 680px) {
  .related-posts {
    margin-top: 56px;
    padding-top: 36px;
  }

  .related-posts__head {
    margin-bottom: 28px;
  }
}

.tags {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags .tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status {
  color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 1.2em;
  text-align: center;
  margin: 56px 0;
}

.status:empty { display: none; }

/* ============================================================
   Compatibility shims
   ------------------------------------------------------------
   A few legacy class names are still referenced by ancillary
   pages or fallback markup (e.g. the offline blog cards in
   blog/index.html, the "blog-card" Ghost renderer hook). We
   keep minimal styles for them so the page still renders if
   somehow JS is unavailable. We can remove these once the
   markup is fully migrated, but for now we want zero risk to
   the offline state.
   ============================================================ */

.blog-card {
  border-bottom: 1px solid var(--rule);
  padding: 24px 0;
}

.blog-card h2 {
  font-family: "Instrument Serif", serif;
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 8px;
}

.blog-card__meta {
  color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.blog-card__tag {
  display: inline-block;
  margin-top: 6px;
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   Mode-B (modernist) tweaks layered on top — optional alternate
   layout from the template. Activate with data-layout="b" on
   <html>. Kept because the template ships it; harmless if
   unused.
   ============================================================ */

[data-layout="b"] .hero { padding: 220px 0 100px; }

[data-layout="b"] .hero-title {
  text-align: center;
  font-size: clamp(64px, 14vw, 200px);
}

[data-layout="b"] .hero-lede {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

[data-layout="b"] .hero-meta {
  margin-top: 100px;
  border-top: 1px solid var(--rule);
  padding-top: 32px;
}

[data-layout="b"] .hero-orb { display: none; }

[data-layout="b"] .section-head {
  grid-template-columns: 1fr;
  text-align: center;
  gap: 12px;
}

[data-layout="b"] .section-title {
  font-size: clamp(48px, 8vw, 120px);
}


/* ============================================================
   Homepage design rollout overrides
   ------------------------------------------------------------
   The homepage reference uses a warm paper background, teal
   accent, DM Serif Display headings, and Mulish body text. These
   overrides roll that design language across the older static
   pages without changing the Ghost DOM hooks.
   ============================================================ */
:root {
  --accent: #5fa79d;
  --accent-dark: #4f9189;
  --accent-ink: #ffffff;
  --paper: #f6f1e9;
  --paper-2: #efe7da;
  --ink: #25384f;
  --ink-2: #3f4d61;
  --ink-3: #6a7481;
  --muted: #5b6675;
  --soft: #847b6c;
  --rule: #ddd2bf;
  --rule-soft: rgba(37, 56, 79, 0.10);
  --card: #ffffff;
  --shadow: 0 18px 36px -22px rgba(37, 56, 79, .30);
  --font: Mulish, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "DM Serif Display", Georgia, serif;
}


[data-variant="dark"] {
  --paper: #162130;
  --paper-2: #1e2b3c;
  --ink: #f6f1e9;
  --ink-2: #d9d0bf;
  --ink-3: #b6aa96;
  --rule: rgba(246, 241, 233, .18);
  --rule-soft: rgba(246, 241, 233, .10);
  --card: #1b2738;
  --accent: #7fc6bd;
  --accent-dark: #5fa79d;
}

html, body {
  font-family: Mulish, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  background:
    radial-gradient(circle at 15% 0%, rgba(95,167,157,.10), transparent 34rem),
    radial-gradient(circle at 90% 10%, rgba(221,210,191,.45), transparent 30rem),
    var(--paper);
  color: var(--ink);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "JetBrains Mono", monospace;
  font-weight: 800;
  letter-spacing: .08em;
}

.serif-display,
.page-hero__title,
.section-title,
.case-title,
.quote-hed,
.post-title,
.social-name,
.post-article h1,
.content h2,
.content h3,
.content h4,
.brand-name,
.btn,
.nav-cta,
.submit,
.case-figure__legend strong,
.social-arrow,
.blog-card h2 {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
}

.shell { max-width: 1180px; padding: 0 32px; }
@media (max-width: 720px) { .shell { padding: 0 22px; } }

.topbar {
  position: sticky;
  padding: 16px 32px;
  max-width: none;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  border-bottom: 1px solid #ece3d4;
  box-shadow: 0 10px 32px -30px rgba(37,56,79,.55);
}

.brand-mark {
  width: 34px;
  height: 34px;
  background: var(--accent);
  box-shadow: 0 10px 22px -14px rgba(95,167,157,.9);
}
.brand-mark::after { inset: 10px; background: #fff; opacity: .92; }
.brand-mark::before { background: var(--ink); height: 38px; left: 16px; opacity: .35; }
.brand-name { font-size: 23px; color: var(--ink); }
.brand-name .dot { color: var(--accent); }

.primary-nav { display: block; }
.nav-links { gap: 26px; }
.nav-link {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .08em;
}
.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--ink); }
.nav-link::after { height: 2px; bottom: -5px; background: var(--accent); }
.nav-cta {
  border: 0;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 22px -12px rgba(95,167,157,.9);
  font-family: Mulish, sans-serif;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 11px 18px;
}
.nav-cta:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); }
.theme-toggle { border-color: var(--rule); background: rgba(255,255,255,.22); }

.mobile-nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: color-mix(in oklab, var(--paper) 80%, white 20%);
  color: var(--ink);
  padding: 9px 13px;
  cursor: pointer;
}
.mobile-nav-toggle__icon,
.mobile-nav-toggle__icon::before,
.mobile-nav-toggle__icon::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .22s ease, opacity .22s ease;
}
.mobile-nav-toggle__icon { position: relative; }
.mobile-nav-toggle__icon::before,
.mobile-nav-toggle__icon::after { content: ""; position: absolute; left: 0; }
.mobile-nav-toggle__icon::before { top: -6px; }
.mobile-nav-toggle__icon::after { top: 6px; }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon { transform: rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon::before { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon::after { transform: rotate(-90deg) translateX(6px); }

.page-shift { padding-top: 0; }
.page-hero {
  position: relative;
  padding: clamp(54px, 7vw, 92px) 0 36px;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  right: -160px;
  top: 20px;
  width: 430px;
  height: 430px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  opacity: .65;
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0 -20vw auto;
  height: 100%;
  background-image: radial-gradient(rgba(37,56,79,.09) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 50% 20%, black 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, black 20%, transparent 72%);
  z-index: -1;
}
.page-hero__eyebrow:not(.breadcrumb),
.case-tag,
.post-image-tag,
.ghost-status,
.status { color: var(--accent); }
.page-hero__title {
  font-size: clamp(42px, 8vw, 98px);
  line-height: 1.06;
  color: var(--ink);
}
.page-hero__title .em,
.section-title .em,
.case-title .em,
.quote-hed .em { color: var(--accent); font-style: normal; }
.page-hero__lede,
.about-body p,
.case-deck,
.quote-sub,
.content { color: var(--muted); }
.page-hero__divider,
.divider { background: var(--rule); }
.section { padding: clamp(74px, 9vw, 120px) 0; }
.section--compact { padding: clamp(58px, 7vw, 92px) 0; }
.section-head { border-bottom-color: var(--rule); }
.section-title { line-height: 1.08; color: var(--ink); }

.post,
.form,
.case-figure,
.portrait,
.feature-image,
.content pre,
.content code {
  border-radius: 14px;
}
.post {
  background: color-mix(in oklab, var(--card) 64%, transparent);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding: 18px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.post:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent) 55%, var(--rule)); box-shadow: 0 24px 45px -30px rgba(37,56,79,.45); }
.post.featured { padding: 22px; }
.post-image { border-radius: 12px; background: var(--paper-2); }
.post-image-inner {
  background:
    radial-gradient(circle at 78% 18%, rgba(95,167,157,.34), transparent 30%),
    repeating-linear-gradient(var(--bg-angle,45deg), #efe7da 0, #efe7da 20px, rgba(95,167,157,.13) 20px, rgba(95,167,157,.13) 22px);
}
.post-image-tag { background: rgba(255,255,255,.75); color: var(--ink); }
.post-title { color: var(--ink); }
.post-dek { color: var(--muted); }
.post-footer { color: var(--accent-dark); }

.expertise { border-top-color: var(--rule); }
.expertise-cell { border-bottom-color: var(--rule); }
.case-study,
.quote { background: var(--paper-2); border-color: var(--rule); }
.case-bg { background: var(--paper-2); }
.case-bg-graphic {
  background:
    radial-gradient(circle at 78% 28%, rgba(95,167,157,.24), transparent 38%),
    radial-gradient(circle at 18% 78%, rgba(255,255,255,.42), transparent 46%);
}
.btn,
.submit {
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-family: Mulish, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.btn:hover,
.submit:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn--primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.case-link { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 800; }
.field input,
.field textarea,
.field select { font-family: Mulish, sans-serif; color: var(--ink); }

.footer { background: var(--ink); color: #fff; border-top: 0; }
.footer .brand-name,
.footer__summary,
.footer__col a,
.footer__bottom,
.footer__bottom p,
.footer__legal,
.footer__legal a { color: #fff; }
.footer .brand-mark { background: var(--accent); }
.footer__col h3 { color: rgba(255, 255, 255, 0.72); }
.footer__col a:hover,
.footer__legal a:hover { color: var(--accent); }
.footer__bottom {
  border-top-color: rgba(255, 255, 255, 0.16);
}
.footer__bottom p { margin: 0; }
.footer__legal { gap: 12px; }
.footer__socials a { color: #fff; border-color: rgba(255,255,255,.2); }

@media (max-width: 960px) {
  .topbar { padding: 14px 22px; }
  .mobile-nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed;
    top: 67px;
    left: 16px;
    right: 16px;
    display: block;
    padding: 18px;
    border: 1px solid var(--rule);
    border-radius: 18px;
    background: color-mix(in oklab, var(--paper) 96%, white 4%);
    box-shadow: 0 24px 55px -28px rgba(37,56,79,.55);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
  }
  .primary-nav[data-open="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-links { display: grid; gap: 8px; }
  .nav-links li { width: 100%; }
  .nav-link,
  .nav-cta,
  .theme-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
  }
  .nav-link { padding: 12px 6px; font-size: 13px; }
  .nav-link::after { display: none; }
  .nav-cta { justify-content: center; margin-top: 8px; }
  .theme-toggle { justify-content: center; border-radius: 8px; }
  html.nav-open body { overflow: hidden; }
}

@media (max-width: 720px) {
  .brand-name { font-size: 20px; }
  .page-hero::before { width: 260px; height: 260px; right: -120px; }
  .section-head { margin-bottom: 40px; padding-bottom: 20px; }
  .about-body p:first-child { font-size: 22px; }
  .about-body p:first-child::first-letter { font-size: inherit; float: none; margin: 0; color: inherit; }
  .expertise { grid-template-columns: 1fr; }
  .expertise-cell:nth-child(odd) { padding-right: 0; padding-bottom: 4px; border-bottom: 0; }
  .expertise-cell.label + .expertise-cell { padding-top: 0; }
  .case-metrics { grid-template-columns: 1fr; }
  .post.featured { display: block; }
  .post.featured .post-link { display: block; }
  .quote { padding: 86px 0; }
  .form { padding: 24px; }
}

/* ============================================================
   Homepage parity refinements: nav, services submenu, no dark UI
   ============================================================ */
.brand-logo { display: block; height: 38px; width: auto; }
.brand-link { gap: 0; }
.brand-link .brand-mark,
.brand-link .brand-name { display: none; }

.nav-links { align-items: center; }
.nav-item { position: relative; list-style: none; }
.nav-item--has-menu { display: flex; align-items: center; }
.nav-link--services::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.nav-submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  z-index: 80;
  width: 278px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: color-mix(in oklab, var(--paper) 97%, white 3%);
  box-shadow: 0 24px 55px -28px rgba(37,56,79,.55);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.nav-item--has-menu:hover .nav-submenu,
.nav-item--has-menu:focus-within .nav-submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-submenu a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--ink);
  font-family: Mulish, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.nav-submenu a:hover,
.nav-submenu a:focus-visible {
  background: #fff;
  color: var(--accent-dark);
}
.theme-toggle,
[data-theme-toggle] { display: none !important; }

.mobile-nav-toggle {
  width: 42px;
  height: 42px;
  justify-content: center;
  padding: 0;
}
.mobile-nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.page-hero {
  padding-top: clamp(58px, 7vw, 96px);
  background:
    radial-gradient(circle at 82% 18%, rgba(95,167,157,.15), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 58%);
}
.page-hero__eyebrow:not(.breadcrumb) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Mulish, sans-serif;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.page-hero__eyebrow:not(.breadcrumb)::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}
.page-hero__title { font-family: var(--display); font-weight: 400; letter-spacing: -.5px; }
.page-hero__lede { font-family: Mulish, sans-serif; font-weight: 500; line-height: 1.6; }
.section-title,
.case-title,
.quote-hed,
.post-title { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; }
.section-head { gap: clamp(26px, 4vw, 56px); }
.case-study,
.quote,
.post,
.form,
.figure-card {
  box-shadow: var(--shadow);
}

@media (max-width: 960px) {
  .brand-logo { height: 32px; }
  .nav-links .nav-link { display: flex; }
  .nav-item--has-menu { display: grid; width: 100%; }
  .nav-link--services::after { margin-left: auto; }
  .nav-submenu {
    position: static;
    width: auto;
    margin: 0 0 6px 12px;
    padding: 4px 0 4px 10px;
    border: 0;
    border-left: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .nav-submenu a {
    min-height: 34px;
    padding: 7px 10px;
    color: var(--muted);
    font-size: 11px;
  }
  .primary-nav[data-open="true"] .nav-submenu { display: grid; }
}

/* ============================================================
   Canonical homepage navbar for every page
   ============================================================ */
#site-nav { position: sticky; top: 0; z-index: 80; }
#site-nav .top,
.topbar.top {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(246,241,233,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #ece3d4;
  box-shadow: none;
  padding: 0;
  max-width: none;
}
#site-nav .nav,
.topbar.top .nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}
#site-nav .logo img,
.topbar.top .logo img { height: 38px; width: auto; display: block; }
#site-nav .nav-spacer,
.topbar.top .nav-spacer { flex: 1; }
#site-nav .nav-links,
.topbar.top .nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: Mulish, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .2px;
}
#site-nav .nav-links a,
.topbar.top .nav-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
#site-nav .nav-links a[aria-current="page"],
#site-nav .nav-links a:hover,
.topbar.top .nav-links a[aria-current="page"],
.topbar.top .nav-links a:hover { color: var(--ink); }
#site-nav .nav-link::after,
.topbar.top .nav-link::after { display: none; }
#site-nav .nav-cta,
.topbar.top .nav-cta {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 10px 22px -12px rgba(95,167,157,.9);
  font-family: Mulish, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .4px;
  line-height: 1;
  padding: 11px 18px;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
#site-nav .nav-cta:hover,
.topbar.top .nav-cta:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); }

#site-nav .service-menu,
.topbar.top .service-menu { position: relative; display: flex; align-items: center; }
#site-nav .service-menu::after,
.topbar.top .service-menu::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 100%;
  width: 278px;
  height: 18px;
  display: none;
}
#site-nav .service-menu:hover::after,
#site-nav .service-menu:focus-within::after,
.topbar.top .service-menu:hover::after,
.topbar.top .service-menu:focus-within::after { display: block; }
#site-nav .service-menu > a::after,
.topbar.top .service-menu > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
#site-nav .service-submenu,
.topbar.top .service-submenu,
#site-nav .nav-submenu,
.topbar.top .nav-submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  z-index: 90;
  width: 278px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: rgba(246,241,233,.98);
  box-shadow: 0 24px 55px -28px rgba(37,56,79,.55);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#site-nav .service-menu:hover .service-submenu,
#site-nav .service-menu:focus-within .service-submenu,
.topbar.top .service-menu:hover .service-submenu,
.topbar.top .service-menu:focus-within .service-submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#site-nav .service-submenu a,
.topbar.top .service-submenu a,
#site-nav .nav-submenu a,
.topbar.top .nav-submenu a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}
#site-nav .service-submenu a:hover,
#site-nav .service-submenu a:focus-visible,
.topbar.top .service-submenu a:hover,
.topbar.top .service-submenu a:focus-visible { background: #fff; color: var(--accent-dark); }

#site-nav .mobile-menu,
.topbar.top .mobile-menu {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  color: var(--ink);
  cursor: pointer;
}
#site-nav .mobile-menu-icon,
#site-nav .mobile-menu-icon::before,
#site-nav .mobile-menu-icon::after,
.topbar.top .mobile-menu-icon,
.topbar.top .mobile-menu-icon::before,
.topbar.top .mobile-menu-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: transform .22s ease, opacity .22s ease;
}
#site-nav .mobile-menu-icon,
.topbar.top .mobile-menu-icon { position: relative; }
#site-nav .mobile-menu-icon::before,
#site-nav .mobile-menu-icon::after,
.topbar.top .mobile-menu-icon::before,
.topbar.top .mobile-menu-icon::after { content: ""; position: absolute; left: 0; }
#site-nav .mobile-menu-icon::before,
.topbar.top .mobile-menu-icon::before { top: -6px; }
#site-nav .mobile-menu-icon::after,
.topbar.top .mobile-menu-icon::after { top: 6px; }
#site-nav .mobile-menu[aria-expanded="true"] .mobile-menu-icon,
.topbar.top .mobile-menu[aria-expanded="true"] .mobile-menu-icon { transform: rotate(45deg); }
#site-nav .mobile-menu[aria-expanded="true"] .mobile-menu-icon::before,
.topbar.top .mobile-menu[aria-expanded="true"] .mobile-menu-icon::before { opacity: 0; }
#site-nav .mobile-menu[aria-expanded="true"] .mobile-menu-icon::after,
.topbar.top .mobile-menu[aria-expanded="true"] .mobile-menu-icon::after { transform: rotate(-90deg) translateX(6px); }

@media (max-width: 900px) {
  #site-nav .nav,
  .topbar.top .nav { position: relative; padding: 13px 22px; gap: 16px; }
  #site-nav .logo img,
  .topbar.top .logo img { height: 32px; }
  #site-nav .mobile-menu,
  .topbar.top .mobile-menu { display: inline-flex; }
  #site-nav .nav-links,
  .topbar.top .nav-links {
    position: absolute;
    left: 22px;
    right: 22px;
    top: calc(100% + 10px);
    display: grid;
    gap: 4px;
    background: rgba(246,241,233,.98);
    border: 1px solid var(--rule);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 16px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
  }
  #site-nav .nav-links[data-open="true"],
  .topbar.top .nav-links[data-open="true"],
  #site-nav .nav-links.open,
  .topbar.top .nav-links.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  #site-nav .nav-links a,
  .topbar.top .nav-links a { padding: 12px 6px; }
  #site-nav .service-menu,
  .topbar.top .service-menu { display: grid; align-items: stretch; }
  #site-nav .service-menu::after,
  .topbar.top .service-menu::after { display: none !important; }
  #site-nav .service-submenu,
  .topbar.top .service-submenu,
  #site-nav .nav-submenu,
  .topbar.top .nav-submenu {
    position: static;
    width: auto;
    margin: 2px 0 6px 12px;
    padding: 6px;
    border: 0;
    border-left: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  #site-nav .service-submenu a,
  .topbar.top .service-submenu a { min-height: 34px; padding: 9px 10px; color: var(--muted); }
  #site-nav .nav-cta,
  .topbar.top .nav-cta { white-space: nowrap; }
}
/* ============================================================
   Shared navbar component hardening (single source: partials/nav.html)
   ============================================================ */
#site-nav .topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: block !important;
  width: 100%;
  background: rgba(246,241,233,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #ece3d4;
  box-shadow: none;
  padding: 0;
}
#site-nav .nav {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}
#site-nav .logo,
#site-nav .brand-link { display: inline-flex; align-items: center; flex: 0 0 auto; }
#site-nav .logo img { display: block; height: 38px; width: auto; max-width: none; }
#site-nav .nav-spacer { flex: 1 1 auto; }
#site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: Mulish, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .2px;
}
#site-nav .nav-item { position: relative; margin: 0; padding: 0; list-style: none; }
#site-nav .nav-link,
#site-nav .nav-links .nav-link {
  display: inline-flex !important;
  align-items: center;
  padding: 4px 0;
  color: var(--muted);
  line-height: 1.2;
  text-decoration: none;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
#site-nav .nav-link:hover,
#site-nav .nav-link:focus-visible,
#site-nav .nav-link[aria-current="page"] { color: var(--ink); }
#site-nav .nav-link::after { display: none !important; }
#site-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 10px 22px -12px rgba(95,167,157,.9);
  font-family: Mulish, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .4px;
  line-height: 1;
  padding: 11px 18px;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
#site-nav .nav-cta:hover,
#site-nav .nav-cta:focus-visible { background: var(--accent-dark); color: #fff; transform: translateY(-1px); }

#site-nav .service-menu { display: flex; align-items: center; }
#site-nav .service-menu::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 100%;
  width: 278px;
  height: 12px;
  display: none;
}
#site-nav .service-menu:hover::after,
#site-nav .service-menu:focus-within::after { display: block; }
#site-nav .service-menu > .nav-link::before {
  content: "";
  order: 2;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
#site-nav .service-submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: -18px;
  z-index: 120;
  width: 278px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: rgba(246,241,233,.98);
  box-shadow: 0 24px 55px -28px rgba(37,56,79,.55);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#site-nav .service-menu:hover .service-submenu,
#site-nav .service-menu:focus-within .service-submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#site-nav .service-submenu a {
  display: flex !important;
  align-items: center;
  min-height: 38px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}
#site-nav .service-submenu a:hover,
#site-nav .service-submenu a:focus-visible { background: #fff; color: var(--accent-dark); }

#site-nav .mobile-menu {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  color: var(--ink);
  cursor: pointer;
}
#site-nav .mobile-menu-icon,
#site-nav .mobile-menu-icon::before,
#site-nav .mobile-menu-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: transform .22s ease, opacity .22s ease;
}
#site-nav .mobile-menu-icon { position: relative; }
#site-nav .mobile-menu-icon::before,
#site-nav .mobile-menu-icon::after { content: ""; position: absolute; left: 0; }
#site-nav .mobile-menu-icon::before { top: -6px; }
#site-nav .mobile-menu-icon::after { top: 6px; }
#site-nav .mobile-menu[aria-expanded="true"] .mobile-menu-icon { transform: rotate(45deg); }
#site-nav .mobile-menu[aria-expanded="true"] .mobile-menu-icon::before { opacity: 0; }
#site-nav .mobile-menu[aria-expanded="true"] .mobile-menu-icon::after { transform: rotate(-90deg) translateX(6px); }

@media (max-width: 900px) {
  #site-nav .nav { position: relative; padding: 13px 22px; gap: 16px; }
  #site-nav .logo img { height: 32px; }
  #site-nav .mobile-menu { display: inline-flex; }
  #site-nav .nav-links {
    position: absolute;
    left: 22px;
    right: 22px;
    top: calc(100% + 10px);
    display: grid;
    gap: 4px;
    background: rgba(246,241,233,.98);
    border: 1px solid var(--rule);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 16px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
  }
  #site-nav .nav-links[data-open="true"],
  #site-nav .nav-links.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  #site-nav .nav-links .nav-link,
  #site-nav .nav-links a { display: flex !important; min-height: 42px; padding: 10px 6px; }
  #site-nav .service-menu { display: grid; align-items: stretch; }
  #site-nav .service-menu::after { display: none !important; }
  #site-nav .service-menu > .nav-link::before { margin-left: auto; }
  #site-nav .service-submenu {
    position: static;
    width: auto;
    margin: 2px 0 6px 12px;
    padding: 6px;
    border: 0;
    border-left: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  #site-nav .service-submenu a { min-height: 34px; padding: 8px 10px; color: var(--muted); }
  #site-nav .nav-item--cta { margin-top: 8px; }
  #site-nav .nav-cta {
    width: 100%;
    min-height: 44px;
    white-space: nowrap;
  }
  html.nav-open body { overflow: hidden; }
}

@media (max-width: 520px) {
  #site-nav .nav { gap: 12px; }
  #site-nav .nav-cta { padding: 10px 12px; font-size: 11.5px; }
}

/* ============================================================
   Motion layer: parallax, reveals, pointer depth
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform-origin: left center;
  transform: scaleX(var(--scroll-progress, 0));
  background: linear-gradient(90deg, var(--accent), #9cccc5, var(--accent-dark));
  box-shadow: 0 0 18px rgba(95,167,157,.45);
}

.fx-orb {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(.2px);
  will-change: transform;
  transform: translate3d(var(--px-x, 0), var(--px-y, var(--px, 0)), 0);
}

.fx-orb--hero-a {
  width: clamp(140px, 18vw, 260px);
  height: clamp(140px, 18vw, 260px);
  right: 5vw;
  top: 8%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.88), rgba(95,167,157,.17) 46%, transparent 72%);
  border: 1px solid rgba(95,167,157,.22);
}

.fx-orb--hero-b {
  width: clamp(170px, 22vw, 320px);
  height: clamp(170px, 22vw, 320px);
  left: -9vw;
  bottom: -9vw;
  background: repeating-linear-gradient(45deg, rgba(95,167,157,.10) 0 12px, rgba(221,210,191,.28) 12px 14px, transparent 14px 28px);
  border: 1px solid rgba(221,210,191,.55);
  opacity: .9;
}

[data-parallax] {
  --px-x: 0px;
  --px-y: var(--px, 0px);
}

.homepage-ambient,
.body-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .8;
  background:
    radial-gradient(circle at calc(12% + var(--ambient-x, 0px)) 18%, rgba(95,167,157,.10), transparent 24rem),
    radial-gradient(circle at calc(90% - var(--ambient-x, 0px)) 8%, rgba(255,255,255,.42), transparent 22rem),
    linear-gradient(115deg, transparent 0 46%, rgba(221,210,191,.16) 46% 47%, transparent 47%);
}

.js-effects .fx-reveal {
  /* Keep content readable in full-page screenshots and slow devices;
     the effect is a polish pass, never a content gate. */
  opacity: .88;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity .72s ease var(--reveal-delay, 0ms),
    transform .72s cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0ms),
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
  will-change: opacity, transform;
}

.js-effects .fx-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.js-effects [data-parallax].fx-reveal {
  transform: translate3d(var(--px-x, 0), calc(var(--px-y, var(--px, 0px)) + 20px), 0);
}

.js-effects [data-parallax].fx-reveal.is-visible {
  transform: translate3d(var(--px-x, 0), var(--px-y, var(--px, 0px)), 0);
}

.fx-tilt {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(0);
  position: relative;
  overflow: hidden;
}

.fx-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(255,255,255,.42), transparent 38%);
  transition: opacity .22s ease;
  z-index: 1;
}

.fx-tilt:hover::after { opacity: .75; }
.fx-tilt > * { position: relative; z-index: 2; }

.service-card.fx-tilt:hover,
.post.fx-tilt:hover,
.quote-card.fx-tilt:hover,
.figure-card.fx-tilt:hover,
.number-card.fx-tilt:hover {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
}

.hero-visual[data-parallax],
.cube[data-parallax],
.figure-card[data-parallax] {
  will-change: transform;
  transform: translate3d(var(--px-x, 0), var(--px-y, var(--px, 0)), 0);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .fx-orb,
  [data-parallax],
  .hero-visual[data-parallax],
  .cube[data-parallax],
  .figure-card[data-parallax] {
    transform: none !important;
  }
  .js-effects .fx-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .fx-tilt,
  .fx-tilt:hover,
  .service-card.fx-tilt:hover,
  .post.fx-tilt:hover,
  .quote-card.fx-tilt:hover,
  .figure-card.fx-tilt:hover,
  .number-card.fx-tilt:hover {
    transform: none !important;
  }
  .fx-tilt::after { display: none; }
}


/* ============================================================
   Canonical homepage styles extracted from index.html
   ------------------------------------------------------------
   The homepage is the reference design for this site. Keeping
   its rules in the shared stylesheet makes the visual language
   reusable across /services/, /get-in-touch/, and
   future pages instead of hiding the canonical system inline.
   ============================================================ */
:root{--accent:#5fa79d;--accent-dark:#4f9189;--paper:#f6f1e9;--paper-2:#efe7da;--ink:#25384f;--muted:#5b6675;--soft:#847b6c;--rule:#ddd2bf;--card:#fff;--shadow:0 18px 36px -22px rgba(37,56,79,.3);--font:Mulish,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--display:"DM Serif Display",Georgia,serif}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}::selection{background:var(--accent);color:#fff}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.shell{max-width:1180px;margin:0 auto;padding:0 32px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.top{position:sticky;top:0;z-index:50;background:rgba(246,241,233,.86);backdrop-filter:blur(10px);border-bottom:1px solid #ece3d4}.nav{max-width:1180px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;gap:28px}.logo img{height:38px;width:auto}.nav-spacer{flex:1}.nav-links{display:flex;align-items:center;gap:26px;font-size:13.5px;font-weight:800;letter-spacing:.2px}.nav-links a{color:var(--muted);transition:.2s}.nav-links a[aria-current],.nav-links a:hover{color:var(--ink)}.nav-cta,.btn-primary{background:var(--accent);color:#fff;border-radius:8px;box-shadow:0 10px 22px -12px rgba(95,167,157,.9);font-size:12.5px;font-weight:900;letter-spacing:.4px;padding:11px 18px;transition:.2s}.nav-cta:hover,.btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px)}.hero{position:relative;padding:70px 0 90px;overflow:hidden}.hero .shell{display:flex;align-items:center;gap:40px;flex-wrap:wrap}.hero-copy{flex:1 1 440px;position:relative;z-index:2}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:2px;color:var(--accent);margin-bottom:22px;text-transform:uppercase}.eyebrow:before{content:"";width:26px;height:2px;background:var(--accent);display:inline-block}.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,4.7vw,62px);line-height:1.06;letter-spacing:-.5px;margin:0 0 22px}.accent{color:var(--accent)}.hero p{font-size:18px;line-height:1.6;color:var(--muted);max-width:460px;margin:0 0 34px;font-weight:500}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid #c9bca7;border-radius:9px;padding:15px 26px;font-size:13px;font-weight:900;letter-spacing:.5px;transition:.2s}.btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}.btn-primary{border:0;padding:15px 26px}.hero-visual{flex:1 1 420px;position:relative;z-index:1;display:flex;justify-content:center}.section{padding:84px 0}.section.alt{background:var(--paper-2)}.split{border-top:1px solid var(--rule);padding-top:54px;display:flex;gap:56px;flex-wrap:wrap;align-items:flex-start}.split-copy{flex:1 1 440px}.label{font-size:12px;letter-spacing:1.5px;color:var(--accent);text-transform:uppercase;margin-bottom:22px}.section h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.14;letter-spacing:-.3px;margin:0 0 28px}.profile-pill{display:inline-flex;font-size:13px;font-weight:700;letter-spacing:.3px;color:var(--muted);border:1px solid #d8cdb9;border-radius:8px;padding:11px 16px;background:rgba(255,255,255,.5)}.figure-card{flex:1 1 380px;margin:0;border:1px solid var(--rule);border-radius:14px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.figure-top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #ece4d6;background:#faf6ee}.figure-top span:first-child{font-size:12px;letter-spacing:1px;font-weight:700}.figure-top span:last-child{font-size:11px;letter-spacing:1px;color:#a59b8a}.figure-body{padding:26px 24px 28px}.figure-body h3{font-weight:900;font-size:18px;margin:0 0 14px}.figure-body p{margin:0;font-size:15px;line-height:1.65;color:var(--muted);font-weight:500}.dark-band{background:var(--ink);padding:92px 0;color:#fff}.dark-band h2{color:#fff}.dark-band p{color:#aeb9c6}.manifesto{display:flex;gap:56px;flex-wrap:wrap;align-items:flex-start;margin-bottom:60px}.manifesto h2,.manifesto p{flex:1 1 380px}.manifesto p{font-size:17px;line-height:1.7;max-width:540px;margin:6px 0 0;font-weight:500}.number-grid{display:flex;gap:32px;flex-wrap:wrap}.number-card{flex:1 1 260px;padding-top:26px;border-top:2px solid var(--accent)}.number{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:38px;color:var(--accent);line-height:1;margin-bottom:18px}.number-card div:last-child{font-size:18px;font-weight:800;line-height:1.4;color:#fff;max-width:270px}.center{text-align:center}.kicker{font-size:12px;font-weight:900;letter-spacing:2.4px;color:var(--accent);text-transform:uppercase}.services h2,.why h2,.testimonials h2{font-family:var(--font);font-weight:900;font-size:clamp(26px,3.4vw,40px);letter-spacing:.3px}.cards{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}.service-card{flex:1 1 300px;max-width:350px;background:#fff;border:1px solid #ece4d6;border-radius:16px;padding:32px 28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;transition:.25s}.service-card:hover{transform:translateY(-7px);box-shadow:0 28px 46px -22px rgba(37,56,79,.38)}.icon{width:56px;height:56px;border-radius:14px;background:#f4ede1;display:flex;align-items:center;justify-content:center}.service-card h3{font-size:19px;margin:4px 0 0;font-weight:900}.service-card p{margin:0;font-size:14.5px;color:var(--muted);font-weight:700;line-height:1.5}.why-grid{display:flex;flex-wrap:wrap;justify-content:center}.why-item{flex:1 1 240px;max-width:320px;padding:8px 36px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.why-line{width:1px;background:var(--rule);align-self:stretch;margin:6px 0}.why-title{font-weight:900;font-size:17px}.why-item p{margin:0;font-size:14px;color:var(--soft);font-weight:700;line-height:1.5}.testimonial-wrap{max-width:860px;margin:0 auto;text-align:center}.carousel{overflow:hidden}.track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}.slide{flex:0 0 100%;padding:6px}.quote-card{background:#fff;border:1px solid #ece4d6;border-radius:20px;padding:48px 50px;box-shadow:0 22px 44px -26px rgba(37,56,79,.32);text-align:left}.quote-mark{font-family:var(--display);font-size:64px;line-height:.5;color:var(--accent);height:30px}.quote-card p{font-size:21px;line-height:1.55;color:#3a4a5e;font-weight:700;margin:0 0 30px}.person{display:flex;align-items:center;gap:14px}.avatar{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}.person strong{font-size:15px}.person span{font-size:13.5px;color:var(--soft);font-weight:700}.controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}.ctrl{width:42px;height:42px;border-radius:50%;border:1.5px solid #d3c7b3;background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}.dots{display:flex;gap:10px}.dot{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:#d3c7b3;cursor:pointer}.dot.active{background:var(--accent)}.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.post{background:#fff;border:1px solid #ece4d6;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;min-height:100%;transition:.25s}.post:hover{transform:translateY(-6px);box-shadow:0 28px 46px -22px rgba(37,56,79,.38)}.post-link{display:flex;flex-direction:column;min-height:100%;padding:0}.post-image{height:160px;background:#f4ede1;position:relative;overflow:hidden}.post-image-tag{position:absolute;top:14px;left:14px;z-index:2;background:rgba(255,255,255,.82);border:1px solid #e8ddca;border-radius:999px;padding:6px 10px;font-size:11px;color:var(--accent);font-weight:800}.post-image-inner{position:absolute;inset:0;background:linear-gradient(var(--bg-angle,55deg),rgba(95,167,157,.18),rgba(226,135,109,.12)),repeating-linear-gradient(135deg,rgba(37,56,79,.08) 0 1px,transparent 1px 10px)}.post-meta{display:flex;justify-content:space-between;gap:12px;padding:22px 24px 0;font-size:11px;letter-spacing:1px;color:var(--accent);text-transform:uppercase;font-weight:800}.post-title{font-family:var(--display);font-size:30px;line-height:1.1;font-weight:400;margin:16px 24px 10px;color:var(--ink)}.post-dek{margin:0 24px 24px;color:var(--muted);font-size:15px;line-height:1.55;font-weight:600}.post-footer{margin:auto 24px 24px;padding-top:18px;border-top:1px solid #ece4d6;display:flex;justify-content:space-between;color:var(--accent);font-size:13px;font-weight:900}.ghost-status{min-height:1.4em;color:#a35b45;font-size:14px;font-weight:700;text-align:center}.cta-grid{display:flex;gap:50px;align-items:center;flex-wrap:wrap}.cta-copy{flex:1 1 420px}.mini-form{max-width:440px;display:flex;flex-direction:column;gap:14px}.mini-form input{background:#fff;border:1.5px solid #e3d9c8;border-radius:9px;padding:14px 16px;font-size:15px;font-family:var(--font);color:var(--ink);font-weight:700}.mini-form input:focus{outline:none;border-color:var(--accent)}.submit{align-self:flex-start;background:var(--accent);color:#fff;border:0;font-size:13px;font-weight:900;letter-spacing:.6px;padding:14px 34px;border-radius:9px;cursor:pointer}.cube{flex:1 1 320px;display:flex;justify-content:center}.footer{border-top:1px solid #e2d8c6;padding:60px 0 0}.footer-grid{display:flex;gap:48px;flex-wrap:wrap}.footer-brand{flex:2 1 300px;min-width:260px}.footer-brand img{height:36px;margin-bottom:16px}.footer p,.footer a{font-size:14px;color:var(--soft);font-weight:700;line-height:1.6}.foot-col{flex:1 1 140px}.foot-title{font-size:12px;font-weight:900;letter-spacing:1.6px;color:var(--accent);margin-bottom:16px}.foot-list{display:flex;flex-direction:column;gap:11px}.socials{display:flex;gap:10px}.socials a{width:34px;height:34px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center}.copy{margin-top:48px;border-top:1px solid #e2d8c6;padding:22px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:#9a917f;font-size:13px;font-weight:700}@media(max-width:900px){.nav-links{display:none}.blog-grid{grid-template-columns:1fr}.why-line{display:none}.quote-card{padding:34px 28px}}@media(max-width:640px){.shell,.nav{padding-left:22px;padding-right:22px}.hero{padding-top:46px}.hero h1{font-size:42px}.section{padding:62px 0}.dark-band{padding:68px 0}.quote-card p{font-size:18px}.nav-cta{display:none}}

    .mobile-menu{display:none;border:1px solid var(--rule);border-radius:999px;background:rgba(255,255,255,.45);color:var(--ink);font-size:12px;font-weight:900;letter-spacing:.08em;padding:10px 14px;cursor:pointer}@media(max-width:900px){.nav{position:relative}.mobile-menu{display:inline-flex}.nav-links{position:absolute;left:24px;right:24px;top:calc(100% + 10px);display:grid;gap:4px;background:rgba(246,241,233,.98);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow);padding:16px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.22s}.nav-links.open{opacity:1;transform:translateY(0);pointer-events:auto}.nav-links a{padding:12px 6px}.nav-cta{white-space:nowrap}}@media(max-width:680px){.nav{padding:13px 22px}.logo img{height:32px}.shell{padding:0 22px}.hero{padding:48px 0 68px}.hero .shell{gap:22px}.hero-visual{flex-basis:100%}.hero-actions,.controls{width:100%}.btn,.btn-primary{justify-content:center}.dark-band,.section{padding:64px 0}.cards,.why-grid,.footer-grid,.cta-grid{grid-template-columns:1fr}.why-line{display:none}.track{display:flex}.slide{min-width:100%}.footer .copy{flex-direction:column;align-items:flex-start}.mini-form input,.submit{width:100%}}

    /* Final launch overrides: keep subpage H1 scale aligned with the homepage hero. */
    .page-hero__title{font-family:var(--display);font-weight:400;font-size:clamp(36px,4.7vw,62px);line-height:1.06;letter-spacing:-.5px;color:var(--ink)}

    /* Nav refinement: service submenu + icon-only hamburger, matching shared pages */
    .mobile-menu{width:42px;height:42px;align-items:center;justify-content:center;padding:0}.mobile-menu-icon,.mobile-menu-icon:before,.mobile-menu-icon:after{display:block;width:18px;height:2px;background:var(--ink);border-radius:999px;transition:transform .22s ease,opacity .22s ease}.mobile-menu-icon{position:relative}.mobile-menu-icon:before,.mobile-menu-icon:after{content:"";position:absolute;left:0}.mobile-menu-icon:before{top:-6px}.mobile-menu-icon:after{top:6px}.mobile-menu[aria-expanded="true"] .mobile-menu-icon{transform:rotate(45deg)}.mobile-menu[aria-expanded="true"] .mobile-menu-icon:before{opacity:0}.mobile-menu[aria-expanded="true"] .mobile-menu-icon:after{transform:rotate(-90deg) translateX(6px)}.service-menu{position:relative}.service-menu:after{content:"";position:absolute;left:-18px;top:100%;width:260px;height:16px;display:none}.service-menu:hover:after,.service-menu:focus-within:after{display:block}.service-menu>a:after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}.service-submenu{position:absolute;top:calc(100% + 10px);left:-18px;width:260px;padding:12px;background:rgba(246,241,233,.98);border:1px solid var(--rule);border-radius:16px;box-shadow:0 24px 55px -28px rgba(37,56,79,.55);opacity:0;transform:translateY(-8px);pointer-events:none;transition:.2s;z-index:70}.service-menu:hover .service-submenu,.service-menu:focus-within .service-submenu{opacity:1;transform:translateY(0);pointer-events:auto}.service-submenu a{display:flex!important;padding:11px 12px!important;border-radius:10px;color:var(--ink);font-size:12px;letter-spacing:.04em}.service-submenu a:hover{background:#fff;color:var(--accent-dark)}@media(max-width:900px){.service-menu{display:grid}.service-menu>a{padding:12px 6px}.service-submenu{position:static;width:auto;margin:2px 0 6px 12px;padding:6px;border:0;background:transparent;box-shadow:none;opacity:1;transform:none;pointer-events:auto}.service-submenu a{padding:9px 10px!important;color:var(--muted)}}

/* Profile pill: one row on desktop, two balanced rows on mobile (no orphan wrap). */
.profile-pill {
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.profile-pill__row {
  white-space: nowrap;
}

.profile-pill__sep {
  color: var(--soft);
  font-weight: 700;
}

@media (max-width: 680px) {
  .profile-pill {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    letter-spacing: .2px;
    padding: 10px 14px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .profile-pill__sep {
    display: none;
  }
}

/* Footer legal row: smaller than shared .mono (11px / weight 800). */
.footer__bottom,
.footer__bottom p.mono,
.footer__legal.mono,
.footer__legal.mono a {
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 680px) {
  /* Homepage + subpages: center icons, titles, and section intros on phones. */
  .hero-copy,
  .split-copy,
  .manifesto,
  .manifesto h2,
  .manifesto p,
  .number-card,
  .testimonial-wrap,
  .testimonial-wrap .label,
  .testimonial-wrap h2,
  .cta-copy,
  .page-hero,
  .page-hero__title,
  .page-hero__lede,
  .section-head,
  .section-head .section-title,
  .about-hero__label {
    text-align: center;
  }

  .breadcrumb {
    justify-content: center;
  }

  .page-hero__lede,
  .hero p,
  .cta-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-actions {
    justify-content: center;
    width: 100%;
  }

  /* Dark-band stat cards: flex children need align-items, not just text-align. */
  .number-grid {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
  }

  .number-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 320px);
    margin-inline: auto;
    text-align: center;
  }

  .number-card .number {
    margin-inline: auto;
  }

  .number-card div:last-child {
    margin-inline: auto;
    max-width: 280px;
  }

  .service-card,
  .related-service-card {
    align-items: center;
    text-align: center;
  }

  .service-card .icon {
    margin-inline: auto;
  }

  .figure-card,
  .figure-card .figure-body {
    text-align: center;
  }

  .figure-top {
    justify-content: center;
    gap: 14px;
  }

  .about-hero__linkedin-row {
    justify-content: center;
  }

  .about-linkedin--row {
    justify-content: center;
    width: min(100%, 320px);
  }

  .about-credentials__item {
    text-align: center;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .expertise-cell.label {
    text-align: center;
  }

  .about-socials {
    justify-content: center;
  }

  .mini-form {
    margin-inline: auto;
  }

  .submit {
    align-self: center;
  }

  .cube {
    margin-inline: auto;
  }
}