/* =========================================================
   AZOTH — base, layout and components
   ========================================================= */

/* ---------------------------------------------------------------
   Reset
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, figure, table { margin: 0; }
img { max-width: 100%; display: block; }
table { border-collapse: collapse; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

html { -webkit-text-size-adjust: 100%; }

/* Blueprint rooms and the in-page links are jumps down the same
   document, so glide rather than teleport — but only for visitors who
   have not asked for less movement. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--ink);
  color: var(--text-on-ink);
  min-height: 100svh;
}

/* Visible keyboard focus everywhere — never removed, only restyled. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Off-screen until it takes focus — the first Tab on the page should
   jump a keyboard or screen-reader user past the fixed seal and
   straight into the content. */
.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-seal-press);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-on-wax);
  background-color: var(--wax);
  border: 1px solid var(--gilt);
  transform: translateY(-200%);
}

/* :focus, not :focus-visible — a skip link must appear for any keyboard
   focus, and :focus-visible is at the browser's discretion. */
.skip-link:focus {
  transform: translateY(0);
}

.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;
}

/* ---------------------------------------------------------------
   Section rhythm — one rule owns section padding so it never has
   to fight element-level margins for specificity.
   --------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--section-py);
  padding-inline: var(--section-px);
}

.section__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

.ink-ground {
  background-color: var(--ink);
  color: var(--text-on-ink);
}

.parchment-ground {
  background-color: var(--parchment);
  color: var(--text-on-parchment);
}

.wax-ground {
  background-color: var(--wax);
  color: var(--text-on-wax);
}

/* Paper grain — tiled SVG noise, low opacity, ink ground only. */
.ink-ground::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-grain);
  background-image: url('../assets/grain.svg');
  background-repeat: repeat;
  background-size: 180px 180px;
  pointer-events: none;
}

.ink-ground > * {
  position: relative;
  z-index: var(--z-content);
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition-property: background-color, border-color, transform;
  transition-duration: var(--duration-micro);
  transition-timing-function: var(--ease-weighted);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    transform: translateY(-2px);
  }
}

.button:active {
  transform: translateY(0);
}

.button--wax {
  background-color: var(--wax);
  color: var(--text-on-wax);
  border-color: var(--wax-bright);
}

.button--wax:hover {
  background-color: var(--wax-bright);
}

.button--wax:active {
  background-color: var(--wax-deep);
}

/* Mobile conversion rail: the next step stays visible while scrolling. */
.quick-contact {
  display: none;
}

@media (max-width: 63.99em) {
  .quick-contact {
    position: fixed;
    z-index: 20;
    right: var(--space-4);
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: 3.25rem;
    padding: .7rem 1rem .7rem 1.15rem;
    color: var(--parchment);
    background: var(--wax);
    border: 1px solid var(--gilt);
    box-shadow: 0 10px 26px rgba(23, 18, 15, .28);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .quick-contact:hover,
  .quick-contact:focus-visible {
    color: var(--ink);
    background: var(--gilt);
  }
}

/* ---------------------------------------------------------------
   Scroll progress — a thin ruled line, like a bookmark ribbon
   tracking how far through the ledger the visitor has read.
   --------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--gilt);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: var(--z-seal-mark);
  pointer-events: none;
}

/* ---------------------------------------------------------------
   Seal mark — small fixed brand mark, persists while scrolling.
   --------------------------------------------------------------- */
.seal-mark {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-seal-mark);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 3px;
  border-radius: 50%;
  /* A parchment coin behind the seal — without it, the wax-red mark
     disappears against the wax-ground sections (Case I, The Work,
     The Teardown), which share the exact same red. */
  background-color: var(--parchment);
  box-shadow: 0 4px 14px rgba(23, 18, 15, 0.45);
  transition: transform var(--duration-micro) var(--ease-weighted);
}

.seal-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

@media (hover: hover) and (pointer: fine) {
  .seal-mark:hover {
    transform: scale(1.08);
  }
}

.seal-mark:active {
  transform: scale(0.96);
}

@media (min-width: 48em) {
  .seal-mark {
    top: var(--space-5);
    left: var(--space-5);
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* ---------------------------------------------------------------
   Seal press — intro gate
   A native <dialog>, opened via showModal() so the browser
   handles focus-trapping and top-layer stacking for us. The seal
   drops in and settles on its own; entering the site is a
   deliberate act — the visitor presses the seal itself. Runs once
   per session. Without JS the dialog is simply never opened, so a
   no-script visitor lands straight on the real page instead of
   getting stuck behind it.
   --------------------------------------------------------------- */
.seal-press {
  position: fixed;
  inset: 0;
  z-index: var(--z-seal-press);
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background-color: var(--parchment);
  color: var(--text-on-parchment);
}

.seal-press[open] {
  display: grid;
  place-items: center;
}

html.seal-press-skip .seal-press {
  display: none;
}

.seal-press__trigger {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4);
}

.seal-press__trigger:disabled {
  cursor: default;
}

.seal-press__stage {
  position: relative;
  display: block;
  width: min(52vw, 320px);
  aspect-ratio: 1;
  transition-property: filter, transform;
  transition-duration: var(--duration-micro);
  transition-timing-function: var(--ease-weighted);
}

.seal-press__trigger:focus-visible .seal-press__stage {
  filter: brightness(1.08);
}

@media (hover: hover) and (pointer: fine) {
  .seal-press__trigger:hover .seal-press__stage {
    filter: brightness(1.08);
    transform: scale(1.03);
  }
}

.seal-press__trigger:active .seal-press__stage {
  transform: scale(0.97);
}

.seal-press__seal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 34px rgba(23, 18, 15, 0.45));
  transform-origin: 50% 30%;
  animation: seal-press-drop 1.5s var(--ease-weighted) both;
}

.seal-press__registration,
.seal-press__crosshair,
.seal-press__imprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.seal-press__registration {
  inset: 9%;
  opacity: 0;
  animation: seal-registration-in 700ms var(--ease-weighted) 80ms both;
}

.seal-press__registration i {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--gilt);
  border-style: solid;
  opacity: .7;
}

.seal-press__registration i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.seal-press__registration i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.seal-press__registration i:nth-child(3) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.seal-press__registration i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }

.seal-press__crosshair::before,
.seal-press__crosshair::after {
  content: '';
  position: absolute;
  background-color: var(--gilt);
  opacity: 0;
  animation: seal-crosshair-in 500ms var(--ease-weighted) 260ms both;
}

.seal-press__crosshair::before { top: 50%; left: 3%; width: 94%; height: 1px; }
.seal-press__crosshair::after { top: 3%; left: 50%; width: 1px; height: 94%; }

.seal-press__imprint {
  inset: 31%;
  border: 1px solid var(--wax);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.72);
  animation: seal-imprint-in 520ms var(--ease-weighted) 850ms both;
}

.seal-press__seal.is-tapped {
  animation: seal-press-tap 320ms var(--ease-weighted) both;
}

.seal-press__spatter {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.seal-press__spatter span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--wax);
  opacity: 0;
}

.seal-press__spatter.is-tapped span {
  animation: seal-press-spatter 350ms var(--ease-weighted) both;
}

.seal-press__spatter span:nth-child(1) { --tx: -58px; --ty: 30px; }
.seal-press__spatter span:nth-child(2) { --tx: 46px;  --ty: 42px; animation-delay: 20ms; }
.seal-press__spatter span:nth-child(3) { --tx: -34px; --ty: 54px; animation-delay: 40ms; width: 4px; height: 4px; }
.seal-press__spatter span:nth-child(4) { --tx: 62px;  --ty: 14px; animation-delay: 10ms; width: 4px; height: 4px; }
.seal-press__spatter span:nth-child(5) { --tx: -14px; --ty: 60px; animation-delay: 50ms; }
.seal-press__spatter span:nth-child(6) { --tx: 20px;  --ty: 58px; animation-delay: 30ms; width: 3px; height: 3px; }

.seal-press__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-parchment-dim);
  opacity: 0;
  animation: seal-press-caption-in var(--duration-reveal) var(--ease-weighted) 1.1s both;
}

.seal-press__caption b {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

.seal-press__caption span {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.seal-press__trigger:hover .seal-press__caption,
.seal-press__trigger:focus-visible .seal-press__caption {
  color: var(--text-on-parchment);
}

.seal-press.is-leaving {
  animation: seal-press-fade var(--duration-reveal-slow) var(--ease-weighted) forwards;
}

/* The press does not dissolve — it becomes the page transition. */
.seal-press.is-leaving::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  background-color: var(--wax);
  clip-path: circle(0 at 50% 44%);
  animation: seal-press-wipe 620ms var(--ease-weighted) both;
  pointer-events: none;
}

@keyframes seal-press-drop {
  0%   { transform: translateY(-160%) scale(1, 1); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(0%) scale(1, 1); }
  58%  { transform: translateY(0%) scale(1.06, 0.9); }
  70%  { transform: translateY(0%) scale(0.99, 1.02); }
  88%  { transform: translateY(0%) scale(1, 1); }
  100% { transform: translateY(0%) scale(1, 1); }
}

@keyframes seal-registration-in {
  from { opacity: 0; transform: scale(.88); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes seal-crosshair-in {
  from { opacity: 0; }
  to { opacity: .22; }
}

@keyframes seal-imprint-in {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: .44; transform: scale(1); }
}

@keyframes seal-press-tap {
  0%   { transform: scale(1, 1); }
  45%  { transform: scale(1.07, 0.89); }
  100% { transform: scale(1, 1); }
}

@keyframes seal-press-spatter {
  0%   { transform: translate(0, 0) scale(0); opacity: 0; }
  35%  { opacity: 0.8; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; }
}

@keyframes seal-press-caption-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes seal-press-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes seal-press-wipe {
  0%   { clip-path: circle(0 at 50% 44%); }
  100% { clip-path: circle(125% at 50% 44%); }
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
/* Deliberately short of a full screen so the first line of the page
   below is visible under it — a full-height hero reads as the whole
   page to someone who does not think to scroll. */
.hero {
  min-height: 84svh;
  display: flex;
  align-items: center;
}

.hero__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-variation-settings: 'opsz' 144, 'WONK' 1, 'SOFT' 0;
  max-width: 18ch;
  color: var(--text-on-ink);
}

/* Word-mask reveal — each word rises up through a clipped slit, like
   paper pulling through a press. Only applied once hero-reveal.js has
   split the text; plain text (no-JS, or the skip path) stays visible
   by default, so nothing here can leave the headline permanently
   hidden. */
.hero__word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.hero__word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--duration-reveal-slow) var(--ease-weighted);
  transition-delay: calc(var(--i, 0) * 40ms);
}

.hero__headline.is-revealed .hero__word {
  transform: translateY(0);
}

.hero__lede {
  margin-top: var(--space-6);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  max-width: 42ch;
  color: var(--text-on-ink-dim);
}

.hero .button {
  margin-top: var(--space-7);
}

@media (min-width: 64em) {
  .hero__lede { margin-top: var(--space-7); }
}

/* ---------------------------------------------------------------
   Proof ledger
   --------------------------------------------------------------- */
.proof-ledger__headline {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-parchment-dim);
  border-block: 1px solid var(--gilt-dim);
  padding-block: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.proof-ledger__headline .sep {
  color: var(--gilt);
}

.ledger-scroll {
  margin-top: var(--space-7);
  overflow-x: auto;
}

.ledger-table {
  width: 100%;
  min-width: 30rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

.ledger-table tr {
  border-bottom: 1px solid rgba(91, 102, 112, 0.3);
}

.ledger-table tr:first-child {
  border-top: 1px solid var(--gilt-dim);
}

.ledger-table td {
  padding-block: var(--space-4);
  padding-inline-end: var(--space-4);
  white-space: nowrap;
  vertical-align: baseline;
}

.ledger-table__name {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  font-variation-settings: 'opsz' 40, 'WONK' 0, 'SOFT' 0;
  letter-spacing: 0;
  width: 100%;
}

.ledger-table__place {
  color: var(--text-on-parchment-dim);
}

.ledger-table__rating {
  font-size: var(--fs-mono-lg);
  font-weight: 600;
  text-align: right;
}

.ledger-table__count {
  color: var(--text-on-parchment-dim);
  text-align: right;
}

[data-count-to] {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 48em) {
  .ledger-table__name { font-size: 1.75rem; }
}

/* On a phone the 30rem minimum forced these tables into a sideways
   swipe, which cut the proof figures and the contact details in half —
   the two things on the page that must never be half-visible. Below
   that width the rows stack instead, and nothing scrolls sideways. */
@media (max-width: 47.999em) {
  .ledger-scroll {
    overflow-x: visible;
  }

  .ledger-table,
  .ledger-table tbody,
  .ledger-table tr,
  .ledger-table td {
    display: block;
    width: auto;
    min-width: 0;
  }

  .ledger-table tr {
    padding-block: var(--space-4);
  }

  .ledger-table td {
    padding-block: 0;
    padding-inline-end: 0;
    white-space: normal;
  }

  .ledger-table__name {
    font-size: 1.375rem;
    line-height: var(--lh-heading);
  }

  .ledger-table__place {
    font-size: var(--fs-small);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }

  /* Rating and count read as one line — "5.0 — 14 reviews" — rather
     than two right-aligned columns with nothing to align against. */
  .ledger-table__rating,
  .ledger-table__count {
    display: inline-block;
    margin-top: var(--space-2);
    text-align: left;
  }

  .ledger-table__rating {
    margin-inline-end: var(--space-3);
  }

  .contact-table__value {
    margin-top: var(--space-1);
    font-size: var(--fs-mono);
  }
}

/* ---------------------------------------------------------------
   Shared utilities — measure, section titles, reveal-on-scroll
   --------------------------------------------------------------- */
.measure {
  max-width: var(--measure);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  font-variation-settings: 'opsz' 100, 'WONK' 1, 'SOFT' 0;
  text-wrap: balance;
}

.prose {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.prose p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.placeholder {
  color: var(--gilt);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition-property: opacity, transform;
  transition-duration: var(--duration-reveal);
  transition-timing-function: var(--ease-weighted);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}

[data-reveal].is-in-view {
  opacity: 1;
  transform: none;
}


/* ---------------------------------------------------------------
   Case studies
   --------------------------------------------------------------- */
.case-study {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.case-study__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.case-study__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  opacity: 0.75;
}

.case-study__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  font-variation-settings: 'opsz' 100, 'WONK' 1, 'SOFT' 0;
  text-wrap: balance;
}

.case-study__dek {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  opacity: 0.85;
}

.case-study__intro,
.case-study__closing {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.case-plate {
  margin: 0;
  max-width: 22rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  padding: var(--space-3);
}

.case-plate img {
  width: 100%;
  height: auto;
}

.case-plate figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gilt);
}

.case-study__proof {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.case-study__proof .sep {
  color: var(--gilt);
  margin-inline: var(--space-3);
}

/* Gilt sits at only 2.35:1 on parchment. It is fine as a rule or a
   border, but not as a glyph someone has to see — so separators on
   paper grounds drop to the body colour instead. */
.parchment-ground .case-study__proof .sep,
.parchment-ground .proof-ledger__headline .sep {
  color: var(--text-on-parchment-dim);
}

.case-study__proof a,
.ledger-table__name a,
.contact-table__value a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gilt);
  text-underline-offset: 3px;
  transition: color var(--duration-micro) var(--ease-weighted);
}

.case-study__proof a:hover,
.ledger-table__name a:hover,
.contact-table__value a:hover {
  color: var(--gilt);
}

.sigil-slot {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  border: 1px dashed currentColor;
  opacity: 0.55;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sigil-slot__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Transmutation on scroll — a before plate the after plate wipes
   over, left to right, once the pair scrolls into view.
   --------------------------------------------------------------- */
.transmute {
  position: relative;
  display: grid;
}

/* The handle is centred on the panel's right edge, so half of it (18px)
   sits outside the panel by design. On a narrow screen that pushed the
   document ~2px wider than the viewport and gave the whole page a
   horizontal wobble. `clip` on the scroll container below stops that
   without turning anything into a scroll container itself. */
.transmute__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 36px;
  margin-left: -18px;
  z-index: 2;
  cursor: ew-resize;
  touch-action: none;
  opacity: 0;
  transition: opacity var(--duration-reveal-fast) var(--ease-weighted);
}

.transmute__handle.is-ready {
  opacity: 1;
}

.transmute__handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: var(--gilt);
  transform: translateX(-50%);
}

.transmute__handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--gilt);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 10px rgba(23, 18, 15, 0.4);
  transition: transform var(--duration-micro) var(--ease-weighted);
}

.transmute.is-dragging .transmute__handle::after {
  transform: translate(-50%, -50%) scale(1.1);
}

.transmute__handle:focus-visible::after {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.transmute__panel {
  grid-area: 1 / 1;
  padding: var(--space-6) var(--space-5);
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.transmute__panel--before {
  opacity: 0.65;
}

.transmute__panel--after {
  border-left: 2px solid var(--gilt);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--duration-reveal-slow) var(--ease-weighted);
}

.wax-ground .transmute__panel--after {
  background-color: var(--wax);
}

.ink-ground .transmute__panel--after {
  background-color: var(--ink);
}

.transmute.is-in-view .transmute__panel--after {
  clip-path: inset(0 0 0 0);
}

.transmute__label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gilt);
  margin-bottom: var(--space-3);
}

.transmute__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------
   The work — two ruled ledger columns, no icons
   --------------------------------------------------------------- */
.work-intro {
  margin-top: var(--space-5);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  opacity: 0.9;
}

/* ---------------------------------------------------------------
   The plates — plain-language explanations of each service, set as
   ruled plates in an illustrated book rather than a card grid.
   Written for an owner who has never bought any of this before.
   --------------------------------------------------------------- *//* Business translator — turns the service list into a decision tool. */
.business-switcher {
  margin-block: var(--space-8) var(--space-9);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, var(--ink) 74%, var(--wax));
  position: relative;
  overflow: hidden;
}

.business-switcher::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(176,141,73,.35) 11px 12px);
}

.business-switcher > * { position: relative; z-index: 1; }

.business-switcher__topline,
.business-switcher__tabs,
.business-switcher__signals {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.business-switcher__topline {
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.business-switcher__eyebrow,
.business-switcher__note {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.business-switcher__eyebrow { color: var(--gilt); }
.business-switcher__note { color: var(--text-on-ink-dim); }

.business-switcher__tabs {
  flex-wrap: wrap;
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  padding-bottom: var(--space-3);
}

.business-switcher__tab {
  min-height: 2.75rem;
  padding: .55rem .8rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  color: var(--text-on-ink-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-align: left;
  transition: color var(--duration-reveal-fast) var(--ease-weighted),
              background-color var(--duration-reveal-fast) var(--ease-weighted),
              border-color var(--duration-reveal-fast) var(--ease-weighted);
}

.business-switcher__tab:hover,
.business-switcher__tab.is-active {
  color: var(--ink);
  background-color: var(--gilt);
  border-color: var(--gilt);
}

.business-switcher__panel {
  padding-top: var(--space-5);
  animation: switcher-panel-in var(--duration-reveal-fast) var(--ease-weighted) both;
}

.business-switcher__title {
  max-width: 48ch;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  line-height: 1.12;
}

.business-switcher__title b { color: var(--gilt); font-weight: 500; }

.business-switcher__signals {
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.business-switcher__signals span {
  padding: .42rem .62rem;
  border: 1px dashed color-mix(in srgb, var(--gilt) 65%, transparent);
  color: var(--text-on-ink-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

.business-switcher__result {
  max-width: 62ch;
  margin-top: var(--space-5);
  color: var(--text-on-ink-dim);
}

@keyframes switcher-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .business-switcher__panel { animation: none; }
}

@media (max-width: 40em) {
  .business-switcher { padding: var(--space-4); }
  .business-switcher__topline { align-items: flex-start; flex-direction: column; }
  .business-switcher__tab { flex: 1 1 calc(50% - var(--space-2)); }
}
.plate__fig {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: block;
}
@media (max-width: 63.99em) {
  .case-study {
    gap: var(--space-4);
  }

  .case-study__intro,
  .case-study__closing {
    font-size: var(--fs-body);
  }

  .survey {
    margin-top: var(--space-7);
  }

  .survey__q {
    padding-block: var(--space-3);
  }
}

.plate__fig svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gilt);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}.plate__title {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  font-variation-settings: 'opsz' 40, 'WONK' 0, 'SOFT' 0;
}

.plate__what,
.plate__why {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.plate__why {
  opacity: 0.88;
}

.plate__what b,
.plate__why b {
  font-weight: 600;
  color: var(--gilt);
}

@media (min-width: 48em) {
  .plate {
    gap: var(--space-7);
    padding-block: var(--space-7);
  }

  .plate__fig {
    width: 84px;
    height: 84px;
  }
}

/* ---------------------------------------------------------------
   The route
   The five stops of the engagement. The rail itself is gone — each
   stop is now a dossier entry — but the text and the evidence that
   branches off two of them still live here.
   --------------------------------------------------------------- */

.route__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  opacity: 0.85;
}

/* A branch off the route — real evidence for a stop that has some,
   rather than every stop getting a matching row (only III and V
   currently have real assets to show). */
.route__branch {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
}

.route__branch-label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gilt);
}

.route__logos {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-3);
}

.route__logos img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.route__branch--stamp {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.route__stamp {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--gilt);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-mono-lg);
  color: var(--gilt);
}

.route__branch--stamp .route__branch-label {
  margin-top: 0;
}

.work-columns__eyebrow {
  margin-top: var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gilt);
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  padding-bottom: var(--space-3);
}

.work-columns {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 48em) {
  .work-columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }

  .work-column:last-child {
    border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    padding-inline-start: var(--space-9);
  }
}

.work-column__title {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gilt);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.work-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

.work-list li {
  padding-block: var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/* ---------------------------------------------------------------
   Button variant for use on a wax ground
   --------------------------------------------------------------- */
.button--parchment {
  background-color: var(--parchment);
  color: var(--text-on-parchment);
  border-color: var(--parchment);
}

.button--parchment:hover {
  background-color: var(--parchment-raised);
}

.button--parchment:active {
  filter: brightness(0.95);
}

/* ---------------------------------------------------------------
   The survey — a self-audit set as a site survey sheet. Runs
   entirely in the browser: nothing is transmitted, and the visitor
   chooses whether to hand the result over at the end.
   --------------------------------------------------------------- */
.survey {
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.survey__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gilt);
}

.survey__title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  font-variation-settings: 'opsz' 40, 'WONK' 0, 'SOFT' 0;
}

.survey__lede {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  opacity: 0.88;
}

.survey__list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  counter-reset: survey;
}

.survey__q {
  counter-increment: survey;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  transition: opacity var(--duration-micro) var(--ease-weighted);
}

.survey__q.is-answered {
  opacity: 0.62;
}

.survey__ask {
  flex: 1 1 20rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.survey__ask::before {
  content: counter(survey) '. ';
  font-family: var(--font-mono);
  color: var(--gilt);
}

.survey__answers {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.survey__opt {
  position: relative;
  cursor: pointer;
}

/* The radio stays in the layout and keyboard order — it is only
   visually replaced by its label, so focus and arrow-key navigation
   keep working exactly as a native radio group should. */
.survey__opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.survey__opt span {
  display: block;
  /* Vertical padding is set to clear a 44px touch target on phones,
     which is where most of these answers get tapped. */
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  transition: background-color var(--duration-micro) var(--ease-weighted),
              border-color var(--duration-micro) var(--ease-weighted),
              color var(--duration-micro) var(--ease-weighted);
}

@media (hover: hover) and (pointer: fine) {
  .survey__opt:hover span {
    border-color: currentColor;
  }
}

.survey__opt input:checked + span {
  background-color: var(--parchment);
  border-color: var(--parchment);
  color: var(--text-on-parchment);
}

.survey__opt input:focus-visible + span {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.survey__progress {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  opacity: 0.8;
}

.survey__result {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--gilt);
}

.survey__result.is-fresh {
  animation: survey-in var(--duration-reveal) var(--ease-weighted) both;
}

@keyframes survey-in {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
  to   { opacity: 1; transform: none; }
}

.survey__score {
  font-family: var(--font-mono);
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gilt);
}

.survey__score-of {
  font-size: 1.25rem;
  margin-left: var(--space-2);
  opacity: 0.7;
}

.survey__verdict {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  font-variation-settings: 'opsz' 40, 'WONK' 1, 'SOFT' 0;
  text-wrap: balance;
}

.survey__detail {
  margin-top: var(--space-3);
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.survey__gaps {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

.survey__gaps li {
  padding-block: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.survey__gaps li::before {
  content: '— ';
  color: var(--gilt);
}

.survey__result .button {
  margin-top: var(--space-6);
}

.survey__note {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  line-height: 1.5;
  max-width: 44ch;
  opacity: 0.75;
}

/* ---------------------------------------------------------------
   Growth map — the three-answer lead flow. Set as a ruled intake
   form on the parchment ground, not a marketing card. Runs entirely
   in the browser; the visitor sends it themselves over WhatsApp.
   --------------------------------------------------------------- */
.growth {
  margin-top: var(--space-7);
  padding: var(--space-6);
  border: 1px solid var(--gilt-dim);
  max-width: 44rem;
}

.growth__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-parchment-dim);
}

.growth__title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  font-variation-settings: 'opsz' 40, 'WONK' 1, 'SOFT' 0;
  text-wrap: balance;
}

.growth__lede {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.growth__steps {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}

.growth__step {
  padding-block: var(--space-4);
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.growth__label {
  display: block;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.growth__num {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  color: var(--gilt-dim);
  margin-inline-end: var(--space-2);
}

/* Ruled like a line on a form rather than a boxed web input. */
.growth__input {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 0;
  transition: border-color var(--duration-micro) var(--ease-weighted);
}

.growth__input::placeholder {
  color: color-mix(in srgb, currentColor 40%, transparent);
}

.growth__input:focus {
  outline: none;
  border-bottom-color: var(--gilt);
}

.growth__input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.growth__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.growth__opt {
  position: relative;
  cursor: pointer;
}

/* The radio keeps its place in the tab order and arrow-key group; only
   its appearance is replaced by the label beside it. */
.growth__opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.growth__opt span {
  display: block;
  /* Sized to clear a 44px touch target, since most of these are tapped. */
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  transition: background-color var(--duration-micro) var(--ease-weighted),
              border-color var(--duration-micro) var(--ease-weighted),
              color var(--duration-micro) var(--ease-weighted);
}

@media (hover: hover) and (pointer: fine) {
  .growth__opt:hover span {
    border-color: currentColor;
  }
}

.growth__opt input:checked + span {
  background-color: var(--wax);
  border-color: var(--wax);
  color: var(--text-on-wax);
}

.growth__opt input:focus-visible + span {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.growth__status {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-parchment-dim);
}

.growth__send {
  margin-top: var(--space-3);
}

/* Dimmed rather than removed: the visitor can still see where this is
   going before they have filled anything in. */
.growth__send[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.growth__note {
  margin-top: var(--space-4);
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-on-parchment-dim);
}

@media (max-width: 30em) {
  .growth {
    padding: var(--space-5) var(--space-4);
  }
}

/* ---------------------------------------------------------------
   Contact
   --------------------------------------------------------------- */
.contact-table {
  min-width: 0;
}

/* ---------------------------------------------------------------
   Language switch
   --------------------------------------------------------------- */
.lang-switch {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.lang-switch [aria-current] {
  color: var(--gilt);
}

.lang-switch a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gilt-dim);
  text-underline-offset: 3px;
  transition: color var(--duration-micro) var(--ease-weighted);
}

.lang-switch a:hover {
  color: var(--gilt);
}

/* One language switch, every width. */
.lang-switch--inline {
  margin-bottom: var(--space-5);
}

/* The before/after handle's 18px overhang would otherwise widen the
   document past the viewport. `clip` (not `hidden`) avoids creating a
   scroll container, so sticky and fixed elements are unaffected. */
main {
  overflow-x: clip;
}

#top > section {
  scroll-margin-top: var(--space-4);
}

/* ---------------------------------------------------------------
   Dossier — a ruled index of entries that open in place.
   This is what replaced the long scroll: every case study, service
   and process step is one line on a ledger until it is asked for.
   Built on native <details>, so it works with no JS at all, keyboard
   support and screen-reader semantics come free, and search engines
   still read the closed content.
   --------------------------------------------------------------- */
.dossier {
  border-top: var(--hairline) solid color-mix(in srgb, currentColor 22%, transparent);
}

.dossier__entry {
  border-bottom: var(--hairline) solid color-mix(in srgb, currentColor 22%, transparent);
}

.dossier__summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none; /* Firefox */
  transition: color var(--duration-micro) var(--ease-weighted);
}

/* Safari and older Chrome draw their own triangle without this. */
.dossier__summary::-webkit-details-marker {
  display: none;
}

.dossier__summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.dossier__title {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.15;
  font-variation-settings: 'opsz' 40, 'WONK' 1, 'SOFT' 0;
}

.dossier__num {
  min-width: 2.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  color: var(--gilt);
}

.dossier__note {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  opacity: 0.62;
}

/* The open/closed mark. A pseudo-element rather than markup so the
   <summary> can hold nothing but its heading, which is what the HTML
   spec actually allows. */
.dossier__summary::after {
  content: '';
  position: relative;
  top: -0.15em;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-image:
    linear-gradient(to right, currentColor 0 100%),
    linear-gradient(to right, currentColor 0 100%);
  background-size: 14px 1px, 1px 14px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform var(--duration-reveal) var(--ease-weighted);
}

.dossier__entry[open] > .dossier__summary::after {
  transform: rotate(135deg);
}

@media (hover: hover) and (pointer: fine) {
  .dossier__summary:hover {
    color: var(--gilt);
  }
}

.dossier__body {
  padding-bottom: var(--space-6);
}

.dossier__body > *:first-child {
  margin-top: 0;
}

/* Open animates, close does not — animating a <details> shut needs JS
   to hold it open through the transition, and the jump back to one
   line reads fine without it. */
@media (prefers-reduced-motion: no-preference) {
  .dossier__entry[open] > .dossier__body {
    animation: dossier-open var(--duration-reveal-slow) var(--ease-weighted) both;
  }
}

@keyframes dossier-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.dossier-lede {
  margin-bottom: var(--space-6);
}

/* Service entries put the drawn figure beside the text once there is
   room for it. The route's detail bodies just need the old text
   styles, not the absolute marker geometry of a list item. */
.route-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------
   Site foot — the one place on the page that stays plain: who this
   is, how to reach them, and the way back up.
   --------------------------------------------------------------- */
.site-foot {
  padding: var(--space-7) var(--section-px);
  background-color: var(--ink);
  color: var(--text-on-ink);
  border-top: var(--hairline) solid var(--gilt-dim);
}

.site-foot__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
}

.site-foot__mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  font-variation-settings: 'opsz' 40, 'WONK' 1, 'SOFT' 0;
}

.site-foot__line {
  flex: 1;
  font-size: var(--fs-small);
  opacity: 0.7;
}

.site-foot__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.site-foot__links a {
  text-decoration: none;
  border-bottom: 1px solid var(--gilt-dim);
  padding-bottom: 2px;
  transition: color var(--duration-micro) var(--ease-weighted);
}

@media (hover: hover) and (pointer: fine) {
  .site-foot__links a:hover {
    color: var(--gilt);
  }
}

/* The mobile contact rail sits over the bottom-right corner. */
@media (max-width: 63.99em) {
  .site-foot {
    padding-bottom: calc(var(--space-9) + env(safe-area-inset-bottom));
  }
}

/* Work we have done for less time than the rest sits under its own
   heading, and reads a shade quieter than the proven list above it —
   the page's whole argument is that the two are not the same thing. */
.dossier--new .dossier__name {
  opacity: 0.9;
}

.dossier--new .dossier__summary::after {
  opacity: 0.7;
}

/* ---------------------------------------------------------------
   The maker's mark. The site opens by asking the visitor to press
   the seal; it closes by showing the seal pressed — the page signed
   the way the studio signs everything else it builds.
   --------------------------------------------------------------- */
.site-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--content-max);
  margin: 0 auto var(--space-7);
  padding-bottom: var(--space-7);
  text-align: center;
  border-bottom: var(--hairline) solid color-mix(in srgb, var(--gilt) 25%, transparent);
}

.site-seal img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  transition: transform var(--duration-reveal) var(--ease-weighted);
}

@media (hover: hover) and (pointer: fine) {
  .site-seal:hover img {
    transform: rotate(-8deg) scale(1.06);
  }
}

.site-seal__line {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gilt);
}

.site-seal__place {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  opacity: 0.55;
}

/* ---------------------------------------------------------------
   Service plates — annotated technical drawings, not icons.
   Each one shows the thing the customer actually sees: the search
   result, the menu card, the chat. A shop owner who does not know
   what a "Business Profile" is knows what that panel looks like,
   because they have looked at one on their own phone.
   --------------------------------------------------------------- */
/* 28rem puts the 10px side notes at about 14px on screen. The narrow
   two-column range (tablets) steps down to 21rem to leave the words room. */
.plate-figure {
  flex-shrink: 0;
  width: 100%;
  max-width: 28rem;
}

.plate-figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* One vocabulary across every drawing, so sixteen plates read as one
   set rather than sixteen clip-art choices. */
.f-paper  { fill: var(--parchment); }
.f-ink    { fill: var(--ink); }
.f-raised { fill: var(--ink-raised); }
.f-wax    { fill: var(--wax); }
.f-gilt   { fill: var(--gilt); }
.f-none   { fill: none; }

.f-line {
  fill: none;
  stroke: var(--gilt);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.f-line--thin  { stroke-width: 0.75; opacity: 0.75; }
.f-line--dash  { stroke-dasharray: 3 3; opacity: 0.7; }
.f-line--paper { stroke: var(--parchment); }
.f-line--dim   { stroke: var(--parchment); opacity: 0.35; }

.f-text {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.06em;
  fill: var(--parchment);
}

.f-text--gilt { fill: var(--gilt); }
.f-text--ink  { fill: var(--ink); }
.f-text--dim  { fill: var(--parchment); opacity: 0.55; }
.f-text--lg   { font-size: 9.5px; }
.f-text--xs   { font-size: 6px; }

/* Side notes: a plain sentence beside the drawing and a gilt arrow to
   the part it explains. Body face, not mono — these are meant to be read
   by someone who has never seen the thing being drawn. */
.f-note       { font-family: var(--font-body); font-size: 10px; font-weight: 500; fill: var(--parchment); }
.f-note--gilt { fill: var(--gilt); }
.f-note--dim  { opacity: 0.62; }
.f-arrow      { fill: none; stroke: var(--gilt); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }

/* Lines drawn on a parchment panel need an ink stroke, not a gilt one. */
.f-line--onink   { stroke: var(--ink); opacity: 0.4; }
.f-line--paperdim { stroke: var(--parchment); opacity: 0.6; }

/* The drawing sits beside the words once there is room, above them
   when there is not. */
.plate-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .plate-detail {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-7);
  }

  .plate-detail .plate__text {
    flex: 1;
    /* --measure is 68ch, which against the body face resolves close to
       780px here — far past a comfortable line. Cap it absolutely too. */
    max-width: min(var(--measure), 34rem);
  }

  .plate-detail .plate-figure { max-width: 21rem; }
}

@media (min-width: 64em) {
  .plate-detail .plate-figure { max-width: 28rem; }
}

/* ---------------------------------------------------------------
   Top menu — the page is long, so the way around it is always one
   tap away. On phones it folds behind "Menu" and tucks away while
   reading down; scrolling up brings it back (js/site-nav.js).
   --------------------------------------------------------------- */
html {
  scroll-padding-top: 4.75rem;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45;
  color: var(--text-on-ink);
  transition: transform var(--duration-reveal) var(--ease-weighted);
}

.site-nav--hidden {
  transform: translateY(-100%);
}

.site-nav__bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 3.75rem;
  padding: var(--space-2) var(--section-px);
  background-color: rgba(23, 18, 15, 0.96);
  border-bottom: 1px solid rgba(176, 141, 73, 0.3);
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  font-variation-settings: 'opsz' 40, 'WONK' 1, 'SOFT' 0;
}

.site-nav__brand img {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.site-nav__links,
.site-nav__lang,
.site-nav__cta {
  display: none;
}

.site-nav__links a,
.site-nav__menu-links a {
  color: inherit;
  text-decoration: none;
}

.site-nav__toggle {
  margin-left: auto;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-ink);
  background: transparent;
  border: 1px solid rgba(176, 141, 73, 0.6);
  cursor: pointer;
}

.site-nav__toggle:focus-visible,
.site-nav__links a:focus-visible,
.site-nav__brand:focus-visible,
.finder__choice:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.site-nav__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-height: calc(100svh - 3.75rem);
  overflow-y: auto;
  padding: var(--space-4) var(--section-px) var(--space-6);
  background-color: var(--ink);
  border-bottom: 1px solid rgba(176, 141, 73, 0.3);
}

.site-nav__menu[hidden] {
  display: none;
}

.site-nav__menu-links {
  display: flex;
  flex-direction: column;
}

.site-nav__menu-links a {
  padding-block: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.2;
  border-bottom: 1px solid rgba(237, 230, 216, 0.14);
}

.site-nav__menu-cta {
  justify-content: center;
}

@media (min-width: 64em) {
  .site-nav__links {
    display: flex;
    gap: var(--space-6);
    margin-left: auto;
  }

  .site-nav__links a {
    padding-block: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-on-ink-dim);
    border-bottom: 1px solid transparent;
    transition: color var(--duration-micro) var(--ease-weighted), border-color var(--duration-micro) var(--ease-weighted);
  }

  .site-nav__links a:hover,
  .site-nav__links a[aria-current] {
    color: var(--text-on-ink);
    border-bottom-color: var(--gilt);
  }

  .site-nav__lang {
    display: flex;
    margin-left: var(--space-3);
    padding-left: var(--space-5);
    border-left: 1px solid rgba(176, 141, 73, 0.3);
  }

  .site-nav__cta {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-on-wax);
    background-color: var(--wax);
    border: 1px solid var(--wax-bright);
  }

  .site-nav__cta:hover {
    background-color: var(--wax-bright);
  }

  .site-nav__toggle,
  .site-nav__menu {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav {
    transition: none;
  }
}

/* The hero sits under the bar, so its top padding makes room for it. */
.hero {
  padding-block-start: calc(var(--section-py) + 3.75rem);
}

/* ---------------------------------------------------------------
   Finder — "What do you need?" on the first screen. Each choice
   jumps to its service and opens it, so nobody has to scroll the
   whole list to find the one thing they came for.
   --------------------------------------------------------------- */
.finder {
  margin-top: var(--space-7);
  max-width: 52rem;
}

.finder__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gilt);
}

.finder__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-5);
  border-top: 1px solid rgba(176, 141, 73, 0.45);
}

.finder__list li {
  border-bottom: 1px solid rgba(237, 230, 216, 0.16);
}

.finder__choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding-block: var(--space-3);
  color: var(--text-on-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.15;
  font-variation-settings: 'opsz' 40, 'WONK' 1, 'SOFT' 0;
  transition: color var(--duration-micro) var(--ease-weighted);
}

.finder__arrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--gilt);
  transition: transform var(--duration-micro) var(--ease-weighted);
}

@media (hover: hover) and (pointer: fine) {
  .finder__choice:hover {
    color: var(--gilt);
  }

  .finder__choice:hover .finder__arrow {
    transform: translateY(3px);
  }
}

.finder__more {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-on-ink-dim);
}

.finder__more a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gilt-dim);
  text-underline-offset: 3px;
}

@media (min-width: 48em) {
  .finder__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* One service list now; the "newer for us" note explains itself here. */
.work-note {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  opacity: 0.8;
}

/* Contact: the ways to reach us come first, the growth map folds under them. */
#contact .ledger-scroll {
  margin-top: var(--space-6);
}

.contact-growth {
  margin-top: var(--space-7);
}

.contact-growth .growth {
  margin-top: 0;
}

/* A case study with its real logo: a solid ink coin instead of the dashed placeholder. */
.sigil-slot--logo {
  border: 1px solid rgba(176, 141, 73, 0.55);
  background-color: var(--ink);
  opacity: 1;
  overflow: hidden;
}

.sigil-slot--logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}