/* ==========================================================================
   FIRMKIT
   One stylesheet. Custom properties for tokens. No framework.
   Copper on ink. Left aligned. Hairlines, not cards.
   ========================================================================== */

/* Self-hosted latin subsets. Generated by tools/fetch-fonts.mjs.
   Do not hand-edit. Re-run the script to refresh. */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surface ramp: near-black olive up to raised panels */
  --ink:        #0B0C0A;
  --surface:    #141611;
  --raised:     #1C1F19;
  --line:       #2A2E26;
  --line-soft:  #1F2320;

  /* Text */
  --paper:      #E7E4D8;
  --muted:      #9A9586;
  /* Fine print. Must clear AA on all three surfaces, not just on ink, because
     it is used inside raised panels too. #6F6B60 was 3.69:1 on ink and failed.
     #837F72 passed on ink but dropped to 4.16:1 on --raised and still failed.
     This value measures 5.59:1 on ink, 5.19:1 on surface, 4.75:1 on raised. */
  --dim:        #8D8979;

  /* Copper. Three values, and the reason matters.
     --accent      brand copper. Rules, marks, large display type only.
                   On ink it measures 4.49:1, which misses AA for body text.
     --accent-ui   interactive fills. Ink text on it measures 5.04:1, passes AA.
     --accent-text small copper text on ink. Measures 5.81:1, passes AA.
     Do not use --accent for small text or for a button fill with ink text. */
  --accent:      #C45A1A;
  --accent-ui:   #D2601C;
  --accent-text: #E06A22;
  --good:        #7C9A5A;

  /* Type stacks. Fallbacks are metrically close to keep shift small. */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Scale */
  --t-display: clamp(2.75rem, 8.4vw, 6.5rem);
  --t-h1:      clamp(2.25rem, 6vw, 4.25rem);
  --t-h2:      clamp(1.875rem, 4vw, 2.75rem);
  --t-h3:      clamp(1.25rem, 2.2vw, 1.625rem);
  --t-lead:    clamp(1.125rem, 1.8vw, 1.375rem);
  --t-body:    1.125rem;
  --t-small:   0.9375rem;
  --t-label:   0.75rem;

  /* Layout */
  --max:     1280px;
  --content: 1120px;
  --gutter:  clamp(1.25rem, 5vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 7.5rem);
  --rule:    1px solid var(--line);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.5s;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
svg { fill: currentColor; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent-ui);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--content { max-width: calc(var(--content) + (var(--gutter) * 2)); }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.62); }
.section + .section { border-top: var(--rule); }

.measure     { max-width: 62ch; }
.measure-sm  { max-width: 46ch; }

/* --------------------------------------------------------------------------
   4. Type utilities
   -------------------------------------------------------------------------- */

.label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

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

.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.h1 { font-size: var(--t-h1); line-height: 0.98; letter-spacing: -0.028em; }
.h2 { font-size: var(--t-h2); line-height: 1.02; }
.h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.015em; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--paper);
}

.muted { color: var(--muted); }
.small { font-size: var(--t-small); line-height: 1.55; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Numerals used as the icon system. No icon pack anywhere on this site. */
.numeral {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

/* Section heading block: mono label, hairline, serif heading */
.head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head .label { margin-bottom: 1.25rem; }
.head .label::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--line);
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   5. Links and buttons
   -------------------------------------------------------------------------- */

/* Copper underline drawn from the left */
.link {
  position: relative;
  display: inline-block;
  color: var(--paper);
  padding-bottom: 2px;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent-ui);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.link:hover::after,
.link:focus-visible::after { transform: scaleX(1); }

.link--muted { color: var(--muted); }
.link--muted:hover { color: var(--paper); }

.btn {
  --btn-bg: var(--accent-ui);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.28s var(--ease), border-color 0.28s var(--ease);
  white-space: nowrap;
}

.btn__arrow { transition: transform 0.28s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Primary: copper fill, ink text */
.btn--primary {
  background: var(--btn-bg);
  color: var(--ink);
  font-weight: 600;
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--ease);
  z-index: -1;
}
.btn--primary:hover::before,
.btn--primary:focus-visible::before { transform: scaleX(1); }

/* Ghost: hairline box, copper fills from the left, text flips to ink */
.btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--line);
}
.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-ui);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--ease);
  z-index: -1;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--ink);
  border-color: var(--accent-ui);
}
.btn--ghost:hover::before,
.btn--ghost:focus-visible::before { transform: scaleX(1); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
}

/* --------------------------------------------------------------------------
   6. Top bar
   -------------------------------------------------------------------------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 12, 10, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--rule);
}

.bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.5rem, 3vw, 1.5rem);
  min-height: 62px;
  min-width: 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
}
.wordmark__mark { width: 20px; height: 20px; flex: none; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.4vw, 2rem);
  min-width: 0;
  flex-wrap: nowrap;
}

.nav__link {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.24s var(--ease);
}
.nav__link:hover { color: var(--paper); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent-ui);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--paper); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); }

.bar__cta { display: none; }

@media (min-width: 900px) {
  .bar__cta { display: inline-flex; }
}

/* Small screens: four links in a compact row, no hamburger. A menu button
   for four links is theatre. The nav scrolls rather than pushing the page
   wide if a font ever renders larger than expected. */
@media (max-width: 899px) {
  .bar__inner { min-height: 56px; }
  .nav {
    gap: clamp(0.7rem, 3.4vw, 1.25rem);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav__link { font-size: 0.6875rem; letter-spacing: 0.1em; white-space: nowrap; }
}

@media (max-width: 420px) {
  .wordmark { font-size: 0.8125rem; letter-spacing: 0.13em; gap: 0.45rem; }
  .wordmark__mark { width: 17px; height: 17px; }
  .nav { gap: 0.7rem; }
  .nav__link { font-size: 0.65rem; letter-spacing: 0.07em; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
  min-height: min(88svh, 820px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 90% at 12% 8%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 12% 8%, #000 0%, transparent 72%);
}

.hero__inner { position: relative; width: 100%; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  max-width: 260px;
}

.hero__title { max-width: 16ch; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.hero__title .accent { color: var(--accent); }

.hero__sub {
  max-width: 44ch;
  color: var(--muted);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
/* Emphasis by colour, not weight. IBM Plex Sans 500 is not shipped, and a
   synthesised bold on a 400 face looks worse than this does. */
.hero__sub strong { color: var(--paper); font-weight: 400; }

/* --------------------------------------------------------------------------
   8. Kit strip: 01 SITE / 02 MAPS / 03 CRM / 04 BACKEND
   -------------------------------------------------------------------------- */

.strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: var(--rule);
  border-left: var(--rule);
}

@media (min-width: 780px) {
  .strip { grid-template-columns: repeat(4, 1fr); }
}

.strip__cell {
  border-right: var(--rule);
  border-bottom: var(--rule);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.4vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
  transition: background-color 0.3s var(--ease);
}
.strip__cell:hover { background: var(--surface); }
.strip__cell::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.34s var(--ease);
}
.strip__cell:hover::before { transform: scaleY(1); }

.strip__name {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  letter-spacing: -0.01em;
}
.strip__desc { font-size: var(--t-small); color: var(--muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   9. Editorial blocks
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .split--aside { grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr); }
}

/* The problem block. Big serif, hairline left rule, copper stat marks. */
.problem__stack {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.4vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  border-left: 2px solid var(--accent);
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
}
.problem__stack p + p { margin-top: 0.85em; }
.problem__stack .dim { color: var(--muted); }

.stat-list { display: grid; gap: 0; border-top: var(--rule); }
.stat {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  padding-block: 1.35rem;
  border-bottom: var(--rule);
}
.stat__n {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 500;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat__t { font-size: var(--t-small); color: var(--muted); line-height: 1.5; }
.stat__t cite { display: block; font-style: normal; color: var(--dim); margin-top: 0.35em; font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   10. Numbered kit list
   -------------------------------------------------------------------------- */

.kit { display: grid; gap: 0; border-top: var(--rule); }
@media (min-width: 860px) {
  .kit { grid-template-columns: repeat(3, 1fr); border-left: var(--rule); }
}

.kit__item {
  border-bottom: var(--rule);
  padding: clamp(1.75rem, 3.4vw, 2.5rem) 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
@media (min-width: 860px) {
  .kit__item {
    border-right: var(--rule);
    padding-inline: clamp(1.5rem, 2.6vw, 2.25rem);
  }
}

.kit__title { font-size: var(--t-h3); }
.kit__body { font-size: var(--t-small); color: var(--muted); line-height: 1.6; }

.spec-list { display: grid; gap: 0.55rem; margin-top: 0.35rem; }
.spec-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.5;
}
.spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.spec-list--out li::before { background: var(--line); }
.spec-list--out li { color: var(--dim); }

/* --------------------------------------------------------------------------
   11. Panels and framed art
   -------------------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: var(--rule);
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  border-radius: 2px;
}
.panel--raised { background: var(--raised); }

/* Viewfinder corner brackets */
.framed { position: relative; }
.framed::before,
.framed::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--accent);
  pointer-events: none;
}
.framed::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.framed::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.art {
  width: 100%;
  display: block;
  background: var(--surface);
  border: var(--rule);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   12. Proof strip
   -------------------------------------------------------------------------- */

.proof {
  display: grid;
  gap: 0;
  border-top: var(--rule);
}
@media (min-width: 820px) { .proof { grid-template-columns: repeat(3, 1fr); } }

.proof__item {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
@media (min-width: 820px) {
  .proof__item { padding-inline: clamp(1.25rem, 2.4vw, 2rem); border-right: var(--rule); }
  .proof__item:first-child { padding-left: 0; }
  .proof__item:last-child { border-right: 0; padding-right: 0; }
}
.proof__lede { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.15; }
.proof__body { font-size: var(--t-small); color: var(--muted); line-height: 1.55; }

/* --------------------------------------------------------------------------
   13. Chips
   -------------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: var(--rule);
  border-radius: 2px;
  padding: 0.6rem 0.95rem;
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease);
}
a.chip:hover { color: var(--paper); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: var(--rule); }

.faq__item { border-bottom: var(--rule); }

.faq__q {
  width: 100%;
  background: none;
  border: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 2.2vw, 1.5rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-align: left;
  padding: 1.5rem 3rem 1.5rem 0;
  cursor: pointer;
  position: relative;
  display: block;
  transition: color 0.24s var(--ease);
}
.faq__q:hover { color: var(--accent-text); }

.faq__q::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.3s var(--ease);
}
.faq__q[aria-expanded="true"]::after { transform: rotate(-135deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p {
  color: var(--muted);
  font-size: var(--t-small);
  max-width: 66ch;
  padding-bottom: 1.6rem;
  padding-right: 2rem;
}

/* --------------------------------------------------------------------------
   15. Pricing
   -------------------------------------------------------------------------- */

.tiers { display: grid; gap: clamp(1.25rem, 2.6vw, 2rem); }
@media (min-width: 880px) { .tiers { grid-template-columns: repeat(2, 1fr); } }

.tier {
  border: var(--rule);
  border-radius: 2px;
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--surface);
}
.tier--feature { background: var(--raised); border-color: #3A3E33; }

/* Tiers stretch to equal height, so pin both CTAs to the bottom edge rather
   than letting the shorter card's button float in the middle of its own space. */
.tier > .btn:last-child { margin-top: auto; justify-content: center; }

.tier__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
}
.tier__amount {
  font-size: clamp(2.5rem, 5.2vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tier__per { font-size: var(--t-small); color: var(--muted); letter-spacing: 0.04em; }

.tier__terms {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.tier__divider { height: 1px; background: var(--line); }

/* --------------------------------------------------------------------------
   16. Work cards
   -------------------------------------------------------------------------- */

.cards { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: var(--rule);
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s var(--ease);
}
.card:hover { border-color: #3A3E33; }

.card__art { border-bottom: var(--rule); background: var(--ink); }
.card__body { padding: clamp(1.25rem, 2.6vw, 1.75rem); display: flex; flex-direction: column; gap: 0.8rem; flex: 1; }
.card__title { font-size: var(--t-h3); }
.card__meta {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.card__body p { font-size: var(--t-small); color: var(--muted); }

.tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent-ui);
  padding: 0.3rem 0.55rem;
  border-radius: 2px;
}
.tag--quiet { background: transparent; color: var(--muted); border: var(--rule); }

/* --------------------------------------------------------------------------
   17. Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 1.4rem; }

.field { display: grid; gap: 0.55rem; }

.field > label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field .req { color: var(--accent-text); }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 0.9rem 1rem;
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

.field textarea { min-height: 128px; resize: vertical; line-height: 1.5; }

.field input::placeholder,
.field textarea::placeholder { color: var(--dim); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-ui);
  box-shadow: 0 0 0 3px rgba(210, 96, 28, 0.18);
}

.field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) center, calc(100% - 1rem) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
  cursor: pointer;
}
.field select option { background: var(--surface); color: var(--paper); }

.field__hint { font-size: 0.8125rem; color: var(--dim); }

.field-row { display: grid; gap: 1.4rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: repeat(2, 1fr); } }

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__note { font-size: var(--t-small); color: var(--muted); }

.form__status {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  background: var(--surface);
}
.form__status[data-state="ok"] { border-left-color: var(--good); }
.form__status[data-state="err"] { border-left-color: #C1503C; }

/* --------------------------------------------------------------------------
   18. Closing CTA
   -------------------------------------------------------------------------- */

.close-cta {
  text-align: center;
  padding-block: clamp(5rem, 12vw, 9.5rem);
  border-top: var(--rule);
  position: relative;
  overflow: hidden;
}
.close-cta__title {
  font-size: var(--t-display);
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin-bottom: clamp(1.25rem, 2.6vw, 1.75rem);
}
.close-cta__sub {
  color: var(--muted);
  max-width: 40ch;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
}
.close-cta .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.foot { border-top: var(--rule); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }

.foot__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.foot__mark { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.foot__addr { font-style: normal; font-size: var(--t-small); color: var(--muted); line-height: 1.7; }

.foot__col { display: flex; flex-direction: column; gap: 0.75rem; }
.foot__col .label { margin-bottom: 0.35rem; }
.foot__col a { font-size: var(--t-small); color: var(--muted); }
.foot__col a:hover { color: var(--paper); }

.foot__base {
  border-top: var(--rule);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
}
.foot__fine {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--dim);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   20. Contact channel: shows only when a number is configured in firmkit.js
   -------------------------------------------------------------------------- */

[data-phone-slot] { display: none; }
[data-phone-slot].is-live { display: inline-flex; }
.foot__col [data-phone-slot].is-live { display: block; }

/* --------------------------------------------------------------------------
   21. Motion
   -------------------------------------------------------------------------- */

.rise {
  opacity: 0;
  transform: translateY(14px);
}

.js-ready .rise {
  animation: rise var(--dur) var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* Without JS nothing should be invisible, and the 4s safety net in firmkit.js
   forces .is-in onto anything the animation never reached. */
.no-js .rise { opacity: 1; transform: none; }
.rise.is-in { opacity: 1; transform: none; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* Reveal-on-scroll for sections below the fold */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */

.stack   { display: grid; gap: 1.25rem; }
.stack-sm{ display: grid; gap: 0.75rem; }
.stack-lg{ display: grid; gap: clamp(1.75rem, 3.4vw, 2.5rem); }
.mt-lg   { margin-top: clamp(2rem, 4vw, 3rem); }
.mt-md   { margin-top: clamp(1.25rem, 2.6vw, 2rem); }
.rule    { height: 1px; background: var(--line); border: 0; margin: 0; }
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   23. PHOTOGRAPHY
   Gabe supplies the photography. Until a file exists, the slot renders as a
   labelled shot brief rather than a grey box, so the site doubles as the shot
   list. Every slot has a locked aspect ratio, so CLS stays at zero whether the
   photo is there or not.
   ========================================================================== */

.photo {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface);
  border: var(--rule);
  border-radius: 2px;
  aspect-ratio: var(--ar, 3 / 2);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Desaturated, warm graded. The brief says never stock, never candy. */
  filter: saturate(0.72) contrast(1.06) brightness(0.94) sepia(0.08);
  transition: filter 0.6s var(--ease), transform 0.9s var(--ease);
}

.photo:hover img { filter: saturate(0.86) contrast(1.04) brightness(1); }

/* Warm ink wash so any photo sits in the palette instead of fighting it */
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,12,10,0.10) 0%, rgba(11,12,10,0.52) 100%);
  pointer-events: none;
}

.photo--tall  { --ar: 4 / 5; }
.photo--wide  { --ar: 16 / 9; }
.photo--square{ --ar: 1 / 1; }
.photo--hero  { --ar: 21 / 9; }

/* The empty state. This is a brief, not a placeholder. */
.photo__brief {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 11px,
      var(--line-soft) 11px 12px
    ),
    var(--surface);
}

.photo__brief-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.photo__brief-text {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--muted);
  max-width: 34ch;
}

.photo__brief-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  text-transform: uppercase;
}

/* Corner ticks so an empty slot still reads as deliberate */
.photo__brief::before,
.photo__brief::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--accent);
  opacity: 0.55;
}
.photo__brief::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.photo__brief::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.photo-grid { display: grid; gap: clamp(0.75rem, 1.6vw, 1.25rem); }
@media (min-width: 700px)  { .photo-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .photo-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .photo-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.photo-cap {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-top: 0.7rem;
  text-transform: uppercase;
}

/* ==========================================================================
   24. SCROLL-DRIVEN ANIMATION
   Native CSS scroll timelines. No library, no scroll listener, no jank: these
   run on the compositor. Where the browser does not support them the existing
   IntersectionObserver reveal handles it, so nothing is ever invisible.
   ========================================================================== */

/* RULE FOR THIS WHOLE SECTION: a scroll timeline never controls the opacity or
   the clip of anything containing words. Scroll-driven animation is still a
   young feature and the failure mode of getting it wrong is unreadable copy.
   So everything here is transform-only, and worst case an element is merely
   offset rather than gone. Actual reveal stays on the IntersectionObserver
   path in section 21, which is proven and has a 4-second safety net. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    .sd-rise {
      animation: sdRise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    @keyframes sdRise {
      from { transform: translateY(34px); }
      to   { transform: none; }
    }

    /* Lines of a headline arriving one after another, by transform only */
    .sd-line {
      animation: sdLine linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 22%;
    }
    @keyframes sdLine {
      from { transform: translateY(0.42em) scaleY(0.985); }
      to   { transform: none; }
    }

    /* A rule that draws itself across as the section arrives */
    .sd-draw {
      transform-origin: left;
      animation: sdDraw linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 34%;
    }
    @keyframes sdDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* Slow drift on a photo, tied to scroll rather than to a timer */
    .sd-drift img {
      animation: sdDrift linear both;
      animation-timeline: view();
      animation-range: cover;
      will-change: transform;
    }
    @keyframes sdDrift {
      from { transform: scale(1.14) translateY(-2.2%); }
      to   { transform: scale(1.14) translateY(2.2%); }
    }

    /* Counters and stat rows staggered off one timeline */
    .sd-stagger > * {
      animation: sdRise linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 30%;
    }

    /* Progress bar for the sticky scene */
    .scene__progress-fill {
      transform-origin: left;
      animation: sdDraw linear both;
      animation-timeline: view(--scene);
      animation-range: contain 0% contain 100%;
    }
  }
}

/* ==========================================================================
   25. THE 3D KIT
   Four planes in real 3D space that assemble as the section scrolls. CSS
   transforms only: no WebGL, no canvas, no library. The whole thing is markup
   and about 60 lines of CSS, which is the argument the page is making.
   ========================================================================== */

.rig {
  position: relative;
  perspective: 1500px;
  perspective-origin: 50% 42%;
  min-height: clamp(360px, 52vw, 620px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.rig__stage {
  position: relative;
  width: min(460px, 78vw);
  height: min(300px, 52vw);
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-38deg);
}

.layer {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  border: 1px solid var(--line);
  background: rgba(20, 22, 17, 0.9);
  border-radius: 2px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5);
  /* Resting position: fully exploded. Scroll brings them home. */
  transform: translateZ(var(--z, 0px));
}

.layer--1 { --z: 30px;  border-color: #3A3E33; }
.layer--2 { --z: 130px; }
.layer--3 { --z: 230px; }
.layer--4 { --z: 330px; border-color: var(--accent); }

.layer__grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 38px 38px;
}

/* Type inside a 3D transform is always going to be the weakest part of the
   object, so these stay short, sit clear of the plane edge, and the legend
   underneath carries the real labelling for anyone who cannot read them. */
.layer__tag {
  position: absolute;
  top: 14px;
  left: 20px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
}
.layer--4 .layer__tag { color: var(--accent-text); }

/* Wireframe content drawn on each plane */
.layer__mark { position: absolute; background: var(--line); border-radius: 1px; }
.layer--4 .layer__mark { background: rgba(196, 90, 26, 0.65); }

/* A copper stem connecting the planes, so the stack reads as one object */
.rig__spine {
  position: absolute;
  left: 50%; top: 50%;
  width: 1px;
  height: 340px;
  background: linear-gradient(to top, transparent, var(--accent) 30%, transparent);
  transform: translate(-50%, -50%) rotateX(90deg);
  opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rig__stage {
      animation: rigTurn linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 70%;
    }
    @keyframes rigTurn {
      from { transform: rotateX(70deg) rotateZ(-52deg) scale(0.86); }
      to   { transform: rotateX(48deg) rotateZ(-24deg) scale(1); }
    }

    .layer {
      animation: layerHome linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 62%;
    }
    @keyframes layerHome {
      /* Floors at 0.55 rather than 0: if this animation never advances, the
         object is dimmer but every layer and its label are still readable. */
      from { transform: translateZ(calc(var(--z) * 2.4)); opacity: 0.55; }
      to   { transform: translateZ(var(--z)); opacity: 1; }
    }
  }
}

/* Small screens: keep the object, lose the depth budget */
@media (max-width: 620px) {
  .rig__stage { transform: rotateX(56deg) rotateZ(-32deg) scale(0.86); }
  .layer--1 { --z: 20px; }
  .layer--2 { --z: 84px; }
  .layer--3 { --z: 148px; }
  .layer--4 { --z: 212px; }
}

.rig__legend {
  display: grid;
  gap: 0;
  border-top: var(--rule);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 780px) { .rig__legend { grid-template-columns: repeat(4, 1fr); border-left: var(--rule); } }

.rig__legend li {
  border-bottom: var(--rule);
  padding: 1.1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
@media (min-width: 780px) { .rig__legend li { border-right: var(--rule); padding-inline: 1.1rem; } }

/* ==========================================================================
   26. STICKY SCENE
   One pinned frame the copy advances through. No scroll hijacking: the page
   scrolls at its normal speed and the frame simply stays put while it does.
   ========================================================================== */

.scene { position: relative; view-timeline-name: --scene; }

.scene__pin {
  position: sticky;
  top: clamp(70px, 12vh, 120px);
  z-index: 1;
}

.scene__progress {
  height: 2px;
  background: var(--line);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
}
.scene__progress-fill { height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.no-js .scene__progress-fill { transform: scaleX(1); }

.scene__steps { display: grid; gap: clamp(4rem, 22vh, 12rem); padding-block: clamp(2rem, 8vh, 5rem); }

.scene__step { max-width: 46ch; }
.scene__step .numeral { display: block; margin-bottom: 0.9rem; }

/* ==========================================================================
   27. MARQUEE
   Town list. Pure CSS, duplicated content is aria-hidden so it is announced
   once. Pauses on hover and stops entirely under reduced motion.
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  border-block: var(--rule);
  padding-block: 1.1rem;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
}
.marquee__item::after { content: ""; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }

@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ==========================================================================
   28. LOCAL PAGE FURNITURE
   ========================================================================== */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--paper); }
.crumbs span[aria-hidden] { color: var(--line); }

/* The SERP evidence block. This is what stops these being doorway pages. */
.evidence {
  border: var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  background: var(--surface);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.evidence__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.evidence__date {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.evidence__rows { display: grid; gap: 0; border-top: var(--rule); }
.evidence__row {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding-block: 0.95rem;
  border-bottom: var(--rule);
}
@media (min-width: 700px) { .evidence__row { grid-template-columns: minmax(9rem, 12rem) 1fr; align-items: baseline; } }
.evidence__k {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.evidence__v { font-size: var(--t-small); color: var(--muted); line-height: 1.55; }
.evidence__v strong { color: var(--paper); font-weight: 400; }

.verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  border-radius: 2px;
  border: 1px solid;
}
.verdict--open      { color: var(--good);        border-color: rgba(124,154,90,0.5); }
.verdict--mixed     { color: var(--accent-text); border-color: rgba(224,106,34,0.5); }
.verdict--hard      { color: #C1503C;            border-color: rgba(193,80,60,0.5); }
.verdict::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Sibling town links */
.siblings { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ==========================================================================
   29. SERVICE INDEX
   ========================================================================== */

.svc-list { display: grid; gap: 0; border-top: var(--rule); }

.svc {
  display: grid;
  gap: 0.6rem 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: var(--rule);
  align-items: start;
  transition: background-color 0.3s var(--ease);
  position: relative;
}
@media (min-width: 860px) {
  .svc { grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.46fr) minmax(0, 0.2fr); }
}
.svc:hover { background: var(--surface); }

.svc__name { font-family: var(--font-display); font-size: var(--t-h3); letter-spacing: -0.015em; }
.svc__desc { font-size: var(--t-small); color: var(--muted); line-height: 1.6; }
.svc__price {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.svc__price small { display: block; color: var(--dim); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.3rem; }
.svc__tagline {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.35rem;
  display: block;
}