:root {
  --bg: #17171A;
  --panel: #202024;
  --text: #F2F1EE;
  --text-muted: #8A8A8E;
  --accent: #FF6B2C;
  --accent-hover: #C4501C;

  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Bricolage Grotesque", var(--font-body);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  font-size: 17.5px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 150ms ease;
}

a:hover {
  color: var(--accent-hover);
}

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

.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 700px) {
  .wrap {
    padding: 0 40px;
  }
}

/* ---------- Nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--bg);
  border-bottom: 1px solid rgba(242, 241, 238, 0.06);
}

.monogram {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
  border: 1px solid var(--text-muted);
  height: 38px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: border-color 150ms ease, color 150ms ease;
}

.mark-x {
  color: var(--accent);
}

.mark-tld {
  color: var(--text-muted);
}

.monogram:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.nav-index {
  list-style: none;
  display: flex;
  gap: 22px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.nav-index a {
  color: var(--text-muted);
}


.nav-index a:hover {
  color: var(--text);
}

.nav-index .num {
  color: var(--text-muted);
  margin-right: 0.35em;
}

/* ---------- Homepage ----------
   Hero: copy on the left, a live showcase of example local business sites on the right.
   Sections below use a title rail and a content column. */

body.home,
body.inner {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='33'%3E%3Cpath d='M3.5 0v7M0 3.5h7' stroke='%238A8A8E' stroke-opacity='.16'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 56px;
  min-height: calc(100svh - 78px);
  padding-block: 32px 72px;
  scroll-margin-top: 110px;
}

/* Soft accent glow behind the showcase */
.hero::before {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  width: 55%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(255, 107, 44, 0.16), transparent);
  pointer-events: none;
  z-index: -1;
}

.hero-copy {
  display: grid;
  gap: 26px;
  justify-items: start;
  min-width: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 107, 44, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  50% { box-shadow: 0 0 0 8px rgba(255, 107, 44, 0); }
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 4.6vw, 4.9rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* Cycling word: the highlight block swaps its word with a quick drop */
.cycle .hl {
  transition: transform 260ms ease, opacity 260ms ease;
}

.cycle .hl.is-out {
  opacity: 0;
  transform: rotate(-1.5deg) translateY(0.25em);
}

.lede {
  color: var(--text);
  opacity: 0.82;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1.5;
  max-width: 40ch;
}

/* ---------- Showcase (example sites in a browser and phone) ---------- */

.showcase {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  aspect-ratio: 16 / 11.5;
  max-width: 100%;
  perspective: 1400px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.showcase.is-ready {
  opacity: 1;
  transform: none;
}

.device {
  position: absolute;
  overflow: hidden;
  background: #0d0d10;
  border: 1px solid rgba(242, 241, 238, 0.14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
  transform-style: preserve-3d;
  transition: transform 200ms linear;
}

.browser {
  inset: 0 12% 8% 0;
  border-radius: 10px;
  transform: rotateX(var(--rx)) rotateY(calc(var(--ry) - 6deg));
}

.phone {
  right: 0;
  bottom: 0;
  width: 26%;
  aspect-ratio: 9 / 18.5;
  border-radius: 22px;
  border-width: 5px;
  border-color: #2a2a2f;
  transform: rotateX(var(--rx)) rotateY(calc(var(--ry) - 10deg)) translateZ(60px);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: #1c1c20;
  border-bottom: 1px solid rgba(242, 241, 238, 0.08);
}

.browser-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a3a40;
}

.browser-bar i:nth-child(1) { background: #ff5f57; }
.browser-bar i:nth-child(2) { background: #febc2e; }
.browser-bar i:nth-child(3) { background: #28c840; }

.browser-url {
  margin-inline: auto;
  padding: 3px 14px;
  border-radius: 6px;
  background: #111114;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}

.screen {
  position: absolute;
  inset: 30px 0 0;
  container-type: inline-size;
}

.phone .screen {
  inset: 0;
}

.showcase-label {
  position: absolute;
  left: 0;
  bottom: -2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.showcase-label b {
  font-weight: 500;
  color: var(--text);
}

/* A mini site, sized in container units so it scales with its device */
.m-site {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 4cqi;
  padding: 3.4cqi 4.2cqi 4.2cqi;
  background: var(--m-bg);
  color: var(--m-fg);
  font-family: var(--font-body);
  opacity: 0;
  transition: opacity 500ms ease;
}

.m-site.is-on {
  opacity: 1;
  z-index: 1;
}

.m-site > *,
.m-copy > *,
.m-cards > * {
  opacity: 0;
  transform: translateY(2.5cqi);
}

.m-site.is-on > *,
.m-site.is-on .m-copy > *,
.m-site.is-on .m-cards > * {
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease var(--d, 0s), transform 600ms cubic-bezier(0.2, 0.9, 0.3, 1.2) var(--d, 0s);
}

.m-site.is-on > .m-hero,
.m-site.is-on > .m-cards {
  transition: none;
}

.m-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 2.6cqi;
}

.m-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.2cqi;
}

.m-links {
  display: flex;
  gap: 3.2cqi;
  opacity: 0.75;
}

.m-burger {
  width: 7cqi;
  height: 4cqi;
  background: linear-gradient(var(--m-fg) 0 0) top / 100% 18% no-repeat, linear-gradient(var(--m-fg) 0 0) center / 100% 18% no-repeat, linear-gradient(var(--m-fg) 0 0) bottom / 100% 18% no-repeat;
}

.m-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4cqi;
  align-items: center;
  min-height: 0;
}

.m-copy {
  display: grid;
  gap: 2.4cqi;
  justify-items: start;
}

.m-copy h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6cqi;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.m-copy p {
  font-size: 2.5cqi;
  line-height: 1.4;
  opacity: 0.75;
}

.m-btn {
  padding: 1.6cqi 3cqi;
  border-radius: 1.2cqi;
  background: var(--m-accent);
  color: var(--m-bg);
  font-size: 2.4cqi;
  font-weight: 600;
}

.m-art {
  position: relative;
  height: 100%;
  min-height: 20cqi;
  border-radius: 2cqi;
  overflow: hidden;
}

.m-art span {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -40%;
  height: 75%;
  border-radius: 50%;
  opacity: 0.85;
}

.m-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4cqi;
}

.m-card {
  display: grid;
  gap: 1.4cqi;
  padding: 2.4cqi;
  border-radius: 1.6cqi;
  background: var(--m-soft);
  font-size: 2.3cqi;
}

.m-card i {
  width: 5cqi;
  height: 5cqi;
  border-radius: 1.2cqi;
}

.m-card span {
  height: 1cqi;
  width: 70%;
  border-radius: 1cqi;
  background: var(--m-fg);
  opacity: 0.18;
}

/* --- Odonata Ink (dark): mono type, live ASCII dragonfly, numbered style list --- */
.m-dragon {
  font-family: var(--font-mono);
  background:
    radial-gradient(60% 70% at 78% 45%, rgba(61, 214, 198, 0.16), transparent 70%),
    var(--m-bg);
}

.m-dragon .m-logo {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 2.6cqi;
}

.m-dragon .m-logo::before {
  content: "◆ ";
  color: var(--m-accent);
}

.m-dragon .m-hero {
  grid-template-columns: 1fr 1.1fr;
}

.m-dragon .m-copy h3 {
  font-family: "Bricolage Grotesque", var(--font-body);
  font-weight: 500;
  font-size: 5.6cqi;
  letter-spacing: -0.03em;
}

.m-dragon .m-copy p {
  font-size: 2.2cqi;
}

.m-dragon .m-btn {
  background: transparent;
  color: var(--m-accent);
  border: 0.25cqi solid var(--m-accent);
  border-radius: 0;
  font-weight: 500;
}

/* Canvas sized from its font-size: 41 mono columns (0.6em each) by 16 lines (1.15em) */
.m-ascii {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.62cqi;
  width: calc(41 * 0.6em);
  aspect-ratio: 24.6 / 18.4;
  max-width: 100%;
  color: var(--m-accent);
  justify-self: center;
}

.m-rows {
  display: grid;
  border-top: 0.2cqi solid rgba(233, 236, 234, 0.14);
}

.m-row {
  display: grid;
  grid-template-columns: 6cqi 1fr auto;
  align-items: center;
  padding: 1.5cqi 0;
  border-bottom: 0.2cqi solid rgba(233, 236, 234, 0.14);
  font-size: 2.2cqi;
}

.m-row span {
  color: var(--m-accent);
}

.m-row b {
  font-weight: 400;
}

.m-row i {
  font-style: normal;
  opacity: 0.6;
}

/* --- Kaze Bonsai (mid-tone): centred, calm, rising sun and swaying tree --- */
.m-zen {
  text-align: center;
  font-family: "Bricolage Grotesque", var(--font-body);
}

.m-zen .m-nav {
  font-family: var(--font-body);
}

.m-zen .m-logo {
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 2.6cqi;
}

.m-zen .m-hero {
  grid-template-columns: 1fr 1fr;
  text-align: left;
}

.m-zen .m-copy h3 {
  font-weight: 500;
  font-size: 6.2cqi;
  letter-spacing: -0.03em;
}

.m-zen .m-btn {
  background: var(--m-fg);
  color: var(--m-bg);
  border-radius: 99cqi;
}

.m-bonsai {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 0;
}

.m-bonsai-art {
  width: 100%;
  height: 100%;
  max-height: 40cqi;
  overflow: visible;
}

.m-bonsai-art .sun { fill: #E9D8B4; opacity: 0.55; }
.m-bonsai-art .trunk { fill: none; stroke: #3B2A1E; stroke-width: 5; stroke-linecap: round; }
.m-bonsai-art .pad ellipse { fill: #2F4A2A; }
.m-bonsai-art .pad ellipse + ellipse { fill: #3F6237; }
.m-bonsai-art .pot { fill: #A4502C; }
.m-bonsai-art .pot-rim { fill: #7E3B1F; }
.m-bonsai-art .leaf { fill: #3F6237; }

.m-bonsai-art .tree {
  transform-origin: 100px 150px;
  animation: bonsai-sway 6s ease-in-out infinite;
}

.m-bonsai-art .pad {
  transform-box: fill-box;
  transform-origin: center;
  animation: pad-breathe 4s ease-in-out infinite;
}

.m-bonsai-art .p2 { animation-delay: -1.3s; }
.m-bonsai-art .p3 { animation-delay: -2.6s; }

.m-bonsai-art .leaf {
  animation: leaf-fall 5s linear infinite;
  opacity: 0;
}

.m-bonsai-art .l2 { animation-delay: -1.7s; }
.m-bonsai-art .l3 { animation-delay: -3.4s; }

@keyframes bonsai-sway {
  50% { transform: rotate(1.6deg); }
}

@keyframes pad-breathe {
  50% { transform: scale(1.04) translateY(-1px); }
}

@keyframes leaf-fall {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-22px, 80px) rotate(90deg); opacity: 0; }
}

.m-pills {
  display: flex;
  justify-content: center;
  gap: 2cqi;
}

.m-pill {
  padding: 1.2cqi 3cqi;
  border: 0.25cqi solid rgba(29, 38, 25, 0.45);
  border-radius: 99cqi;
  font-family: var(--font-body);
  font-size: 2.2cqi;
}

/* In the browser, keep each site's signature art clear of the phone that overlaps its right edge */
.browser .m-dragon .m-ascii,
.browser .m-zen .m-bonsai {
  margin-right: 14cqi;
}

.browser .m-zen .m-bonsai-art {
  max-height: 34cqi;
}

.browser .m-dragon .m-hero {
  grid-template-columns: 1.25fr 1fr;
}

.browser .m-dragon .m-copy h3 {
  font-size: 5cqi;
}

.browser .m-dragon .m-ascii {
  font-size: 1.45cqi;
  margin-right: 12cqi;
}

/* Bakery: slightly tighter copy so the cards never overlap the button */
.browser .m-site:not(.m-dragon):not(.m-zen) .m-copy h3 {
  font-size: 5.2cqi;
}

.browser .m-site:not(.m-dragon):not(.m-zen) .m-copy {
  gap: 1.8cqi;
}

.browser .m-site:not(.m-dragon):not(.m-zen) .m-art {
  max-height: 30cqi;
}

/* Phone layout of the same site */
.phone .m-site {
  gap: 6cqi;
  padding: 10cqi 7cqi 7cqi;
}

.phone .m-nav { font-size: 6cqi; }
.phone .m-logo { font-size: 6.4cqi; }
.phone .m-hero { grid-template-columns: 1fr; gap: 6cqi; align-content: start; }
.phone .m-copy { gap: 4cqi; }
.phone .m-copy h3 { font-size: 11cqi; }
.phone .m-copy p { font-size: 5.4cqi; }
.phone .m-btn { font-size: 5.2cqi; padding: 3.4cqi 6cqi; border-radius: 3cqi; }
.phone .m-art { min-height: 34cqi; border-radius: 4cqi; }
.phone .m-cards { grid-template-columns: 1fr; }
.phone .m-card { font-size: 5cqi; padding: 5cqi; border-radius: 3.4cqi; gap: 3cqi; }
.phone .m-card i { width: 9cqi; height: 9cqi; border-radius: 2.4cqi; }
.phone .m-card span { height: 2cqi; }
.phone .m-dragon .m-hero,
.phone .m-zen .m-hero { grid-template-columns: 1fr; }
.phone .m-dragon .m-copy h3 { font-size: 10cqi; }
.phone .m-dragon .m-logo,
.phone .m-zen .m-logo { font-size: 5.4cqi; }
.phone .m-ascii { font-size: 3.1cqi; justify-self: center; }
.phone .m-row { grid-template-columns: 11cqi 1fr auto; font-size: 5cqi; padding: 3cqi 0; }
.phone .m-zen .m-copy h3 { font-size: 11cqi; }
.phone .m-bonsai-art { max-height: 62cqi; }
.phone .m-pill { font-size: 4.6cqi; padding: 2.4cqi 5cqi; }
.phone .m-pills { gap: 3cqi; }

/* ---------- Highlight block ---------- */

.nowrap {
  white-space: nowrap;
}

.hl {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 0.05em 0.28em;
  border-radius: 2px;
  transform: rotate(-1.5deg);
  text-shadow: none;
}

/* ---------- Sections ---------- */

.section {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 48px;
  padding-block: 112px;
  border-top: 1px solid rgba(242, 241, 238, 0.08);
  scroll-margin-top: 90px;
}

.section-body {
  display: grid;
  gap: 32px;
  justify-items: start;
  max-width: 52rem;
  min-width: 0;
}

.section-body > .lead,
.section-body > .body {
  max-width: 44rem;
}

.section-body .steps,
.section-body .facts,
.section-body .contact {
  width: 100%;
}

.section-title {
  display: flex;
  align-items: baseline;
  align-self: start;
  gap: 16px;
  position: sticky;
  top: 96px;
}

.section-title .num {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

.section-title .hl {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.lead {
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  line-height: 1.4;
  text-wrap: pretty;
}

.body {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.78;
  max-width: 48ch;
}

/* Build: the four steps, each with a hairline and a mono number */
.steps {
  list-style: none;
  display: grid;
  gap: 0;
}

.steps li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid rgba(242, 241, 238, 0.12);
}

.steps li:last-child {
  border-bottom: 1px solid rgba(242, 241, 238, 0.12);
}

/* Step numbers stay quiet so they don't compete with the orange section numbers */
.step-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0.7;
  padding-top: 0.3em;
}

.steps strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.steps p {
  font-size: 1.05rem;
  line-height: 1.5;
  opacity: 0.78;
}

/* About: three short facts */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(242, 241, 238, 0.12);
}

.facts dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.facts dd {
  font-size: 1.05rem;
}

/* Contact */
.contact {
  display: grid;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(242, 241, 238, 0.12);
}

.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.email {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* Open source: a quieter closing block after Contact */
/* ---------- Gauges ---------- */

.gauges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.gauge {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  padding: 24px 12px 20px;
  background: rgba(32, 32, 36, 0.6);
  border: 1px solid rgba(242, 241, 238, 0.08);
  border-radius: 6px;
}

.gauge-ring {
  position: relative;
  width: min(120px, 100%);
  aspect-ratio: 1;
}

.gauge-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gauge-ring circle {
  fill: none;
  stroke-width: 8;
}

.gauge-ring .track {
  stroke: rgba(242, 241, 238, 0.08);
}

.gauge-ring .value {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 1400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gauge-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.2rem;
  font-variant-numeric: tabular-nums;
}

.gauge figcaption {
  display: grid;
  gap: 6px;
  width: 100%;
}

.gauge strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
}

/* How the score gets there: cycles through techniques */
.ticker {
  display: block;
  min-height: 2.6em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  transition: opacity 240ms ease, transform 240ms ease;
}

.ticker::before {
  content: "+ ";
  color: var(--text-muted);
}

.ticker.is-out {
  opacity: 0;
  transform: translateY(-4px);
}

.gauge-note {
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 44rem;
}

.gauge-note a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.source-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.button,
.source-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 12px 18px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  text-shadow: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.button:hover,
.source-link:hover {
  background: var(--accent);
  color: var(--bg);
}

.button span,
.source-link span {
  transition: transform 150ms ease;
}

.button:hover span,
.source-link:hover span {
  transform: translateX(3px);
}

.button {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
}

.button-quiet {
  border-color: rgba(242, 241, 238, 0.25);
  color: var(--text);
}

.hero-actions,
.section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Inner pages ---------- */

/* Registration-mark grid background (shared with the homepage rule above) */
body.inner {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='33'%3E%3Cpath d='M3.5 0v7M0 3.5h7' stroke='%238A8A8E' stroke-opacity='.16'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 20;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 4px;
}

.skip-link:focus {
  top: 12px;
  color: var(--bg);
}

.nav-index a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.page {
  display: grid;
  gap: 72px;
  padding-block: 64px 112px;
}

.page-header {
  display: grid;
  gap: 24px;
  justify-items: start;
  max-width: 48rem;
}

.page-header h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 6.5vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.prose {
  display: grid;
  gap: 18px;
  max-width: 46rem;
  font-size: 1.1rem;
  line-height: 1.65;
}

.prose h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.2;
  margin-top: 28px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.updated {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.ticks {
  list-style: none;
  display: grid;
  gap: 10px;
}

.ticks li {
  position: relative;
  padding-left: 1.6em;
}

.ticks li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Services: price tiers */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.tier {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: 16px;
  padding: 28px;
  background: rgba(32, 32, 36, 0.72);
  border: 1px solid rgba(242, 241, 238, 0.1);
  border-radius: 4px;
}

.tier-main {
  border-color: var(--accent);
}

.tier h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
}

.price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.tier .ticks {
  align-content: start;
  font-size: 0.98rem;
  color: var(--text);
}

/* How it works */
.steps-page {
  max-width: 52rem;
}

.steps-page strong {
  font-size: 1.5rem;
}

/* Projects */
.project {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(242, 241, 238, 0.12);
}

.project-meta {
  display: grid;
  gap: 8px;
  align-content: start;
}

.project-meta h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.1;
}

.project-type {
  color: var(--text-muted);
}

.project-body {
  display: grid;
  gap: 24px;
  justify-items: start;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 44rem;
}

.project-body .facts {
  width: 100%;
}

.project-empty .project-meta h2 {
  color: var(--text-muted);
}

.facts-page {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 52rem;
}

/* Contact form */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

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

.field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.field-wide {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.95rem;
}

.optional {
  color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: rgba(32, 32, 36, 0.9);
  border: 1px solid rgba(242, 241, 238, 0.16);
  border-radius: 4px;
  padding: 12px 14px;
}

.field textarea {
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.form-actions {
  display: grid;
  gap: 12px;
  justify-items: start;
}

/* Honeypot field: off-screen for people, still filled in by spam bots */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 0.95rem;
  border: 1px solid rgba(242, 241, 238, 0.16);
}

.form-status.is-ok {
  border-color: rgba(40, 200, 64, 0.6);
}

.form-status.is-error {
  border-color: var(--accent);
}

.form-status a {
  text-decoration: underline;
}

.button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.form-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.contact-side {
  display: grid;
  gap: 32px;
  font-size: 1.05rem;
  line-height: 1.55;
}

.contact-side .label {
  display: block;
  margin-bottom: 8px;
}

.contact-side .email {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
}

.next {
  padding-left: 1.2em;
  display: grid;
  gap: 8px;
}

.next li::marker {
  color: var(--accent);
  font-family: var(--font-mono);
}

/* Note that replies come from the Gmail inbox */
.reply-note {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 44ch;
  margin-top: 12px;
}

.reply-note strong {
  color: var(--text);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Closing call to action on inner pages */
.page-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 32px;
  border-top: 1px solid rgba(242, 241, 238, 0.12);
}

.page-cta p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}

@media (max-width: 899px) {
  .tiers,
  .contact-grid,
  .project {
    grid-template-columns: 1fr;
  }

  .project,
  .contact-grid {
    gap: 24px;
  }

  .facts-page {
    grid-template-columns: 1fr 1fr;
  }
}

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

  .page {
    gap: 56px;
    padding-block: 40px 80px;
  }
}

/* ---------- Page features ----------
   Each inner page has its own informative graphic: tier wireframes and a comparison table
   (Services), a payment-marked timeline (Process), a live screenshot and an empty browser
   (Projects), a location card and principle tiles (About), a live status card (Contact),
   and an at-a-glance summary with contents (policies). */

.ico {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.block {
  display: grid;
  gap: 24px;
}

.block-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.15;
}

.note {
  font-size: 0.92rem;
  color: var(--text-muted);
}

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips li,
.chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border: 1px solid rgba(242, 241, 238, 0.18);
  border-radius: 99px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Services: wireframe art on each tier */
.tier-art {
  width: 120px;
  height: 72px;
}

.tier-art .pg { fill: var(--panel); stroke: rgba(242, 241, 238, 0.28); }
.tier-art .pg.mid { opacity: 0.8; }
.tier-art .pg.back { opacity: 0.55; }
.tier-art .blk { fill: rgba(242, 241, 238, 0.18); }
.tier-art .acc { fill: var(--accent); }
.tier-art .dash { fill: none; stroke: rgba(242, 241, 238, 0.4); stroke-dasharray: 4 3; }
.tier-art .stamp { fill: none; stroke: var(--accent); }
.tier-art .stamp-t { fill: var(--accent); font: 500 9px var(--font-mono); letter-spacing: 0.18em; text-anchor: middle; }

.price-from {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.features li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  border: 1px solid rgba(242, 241, 238, 0.1);
  border-radius: 4px;
}

.features .ico,
.principles .ico {
  color: var(--accent);
  margin-bottom: 4px;
}

.features strong,
.principles strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
}

.features span,
.principles span {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.care {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 32px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: linear-gradient(120deg, rgba(255, 107, 44, 0.12), transparent 60%);
}

.care .label {
  display: block;
  margin-bottom: 8px;
}

.care p {
  font-size: 1.1rem;
  line-height: 1.55;
}

.table-wrap {
  overflow-x: auto;
}

.compare {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 1rem;
}

.compare th,
.compare td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(242, 241, 238, 0.1);
}

.compare thead th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.compare tbody th {
  font-weight: 500;
}

.compare td {
  color: var(--text-muted);
}

.compare td.yes {
  color: var(--text);
}

.compare td .ico {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  color: var(--accent);
}

/* Process: timeline with payment markers */
.timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 7px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(255, 107, 44, 0.15));
}

.timeline li {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  padding-top: 34px;
}

.tl-node {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
}

.timeline strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
}

.timeline p {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.timeline .chip {
  justify-self: start;
  margin-top: 4px;
}

.chip.free {
  border-color: rgba(40, 200, 64, 0.5);
  color: #7fdc8f;
}

.chip.pay {
  border-color: var(--accent);
  color: var(--accent);
}

.pair {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
}

.panel-block {
  display: grid;
  gap: 20px;
  align-content: start;
  padding: 28px;
  border: 1px solid rgba(242, 241, 238, 0.1);
  border-radius: 4px;
  background: rgba(32, 32, 36, 0.5);
}

.checkboxes {
  list-style: none;
  display: grid;
  gap: 12px;
}

.checkboxes li {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.checkboxes li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--text-muted);
  border-radius: 2px;
  transform: translateY(1px);
}

.timing dl {
  display: grid;
  gap: 16px;
}

.timing dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.timing dd {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.2rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.checklist-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}

.checklist-grid li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(242, 241, 238, 0.08);
}

.checklist-grid .ico {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

/* Projects */
.project-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid rgba(242, 241, 238, 0.12);
}

.project-shot {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(242, 241, 238, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transition: transform 200ms ease;
}

.project-shot:hover {
  transform: translateY(-3px);
}

.project-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.project-info {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.project-info h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.1;
}

.project-info p {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.ghost-browser {
  aspect-ratio: 16 / 8;
  border: 1.5px dashed rgba(242, 241, 238, 0.25);
  border-radius: 8px;
  display: grid;
  grid-template-rows: auto 1fr;
}

.ghost-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1.5px dashed rgba(242, 241, 238, 0.18);
}

.ghost-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(242, 241, 238, 0.3);
}

.ghost-bar span {
  margin-inline: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.ghost-body {
  display: grid;
  gap: 12px;
  align-content: center;
  padding: 0 14%;
}

.ghost-body span {
  height: 12px;
  border-radius: 6px;
  background: rgba(242, 241, 238, 0.07);
}

.ghost-body span:nth-child(1) { width: 70%; height: 22px; }
.ghost-body span:nth-child(2) { width: 90%; }
.ghost-body span:nth-child(3) { width: 40%; height: 28px; background: rgba(255, 107, 44, 0.2); }

/* About */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.about-intro > p {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 52ch;
}

.place {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(242, 241, 238, 0.1);
  border-radius: 4px;
  background: radial-gradient(circle at 30px 50%, rgba(255, 107, 44, 0.18), transparent 120px);
}

.place-pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--accent);
}

.place-pin::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: ping 2.4s ease-out infinite;
}

@keyframes ping {
  from { transform: scale(0.6); opacity: 0.8; }
  to { transform: scale(1.6); opacity: 0; }
}

.place strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
}

.place span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.principles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.principles li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 24px;
  border-top: 2px solid var(--accent);
  background: rgba(32, 32, 36, 0.5);
}

.principles a {
  text-decoration: underline;
}

/* Contact: live status */
.status-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(40, 200, 64, 0.35);
  border-radius: 4px;
  background: rgba(40, 200, 64, 0.06);
}

.status-card strong {
  display: block;
  font-weight: 500;
}

.status-card span {
  font-size: 0.92rem;
  color: var(--text-muted);
}

.status-card time {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.status-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #28c840;
  box-shadow: 0 0 0 4px rgba(40, 200, 64, 0.18);
  animation: pulse-green 2.4s ease-in-out infinite;
}

@keyframes pulse-green {
  50% { box-shadow: 0 0 0 8px rgba(40, 200, 64, 0); }
}

/* Policies: at a glance + contents */
.glance {
  display: grid;
  gap: 14px;
  padding: 24px 28px;
  border: 1px solid rgba(242, 241, 238, 0.12);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: rgba(32, 32, 36, 0.6);
}

.glance ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.glance li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 1.02rem;
}

.glance .ico {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.legal-layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.toc {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 12px;
}

.toc ol {
  list-style: none;
  display: grid;
  gap: 2px;
  border-left: 1px solid rgba(242, 241, 238, 0.12);
}

.toc a {
  display: block;
  padding: 6px 0 6px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.toc a:hover,
.toc a:focus-visible {
  color: var(--text);
  border-left-color: var(--accent);
}

.prose h2[id] {
  scroll-margin-top: 100px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-block: 8px;
}

.split-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 24px;
  border-radius: 4px;
  border: 1px solid rgba(242, 241, 238, 0.12);
}

.split-card h2 {
  margin-top: 0 !important;
  font-size: 1.3rem !important;
}

.split-card ul {
  list-style: none;
  display: grid;
  gap: 12px;
  font-size: 1rem;
}

.split-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.split-card .ico {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.split-card.yes { border-top: 2px solid #28c840; }
.split-card.yes .ico { color: #28c840; }
.split-card.no { border-top: 2px solid var(--accent); }
.split-card.no .ico { color: var(--accent); }

@media (max-width: 1099px) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .timeline::before { display: none; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .care,
  .pair,
  .project-card,
  .about-intro,
  .legal-layout,
  .split { grid-template-columns: 1fr; }

  .project-card,
  .care { gap: 24px; }

  .toc { position: static; }

  .checklist-grid { grid-template-columns: 1fr; }

  /* Vertical timeline on small screens */
  .timeline { grid-template-columns: 1fr; gap: 0; }

  .timeline li {
    padding: 0 0 28px 36px;
  }

  .timeline li::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: rgba(255, 107, 44, 0.35);
  }

  .timeline li:last-child::before { display: none; }
}

@media (max-width: 600px) {
  .features { grid-template-columns: 1fr 1fr; }
  .principles { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .caret,
  .place-pin::after,
  .status-dot { animation: none; }
}

/* ---------- Rail progress line ----------
   On the homepage, a vertical line runs down the title rail through the 01–04 section numbers
   and fills orange as you scroll. Each number sits on the line and turns orange once reached.
   Only shown with the rail layout (900px and up). Positioned by assets/js/progress.js. */

.home main {
  position: relative;
}

.rail-line {
  position: absolute;
  z-index: 0;
  width: 2px;
  margin-left: -1px;
  background: rgba(242, 241, 238, 0.1);
  pointer-events: none;
}

.rail-fill {
  position: absolute;
  inset: 0 0 auto;
  height: 0;
  background: var(--accent);
}

.home .section-title .num {
  position: relative;
  z-index: 1;
  padding: 6px 0;
  background: var(--bg);
  color: var(--text-muted);
  transition: color 250ms ease;
}

.home .section-title .num.is-on {
  color: var(--accent);
}

@media (max-width: 899px) {
  .rail-line {
    display: none;
  }

  .home .section-title .num {
    color: var(--accent);
    background: none;
    padding: 0;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg);
  border-top: 1px solid rgba(242, 241, 238, 0.08);
  padding: 56px 0 48px;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 32px;
}

.footer-grid ul {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.footer-grid a {
  color: var(--text);
}

.footer-grid a:hover {
  color: var(--accent);
}

.footer-brand,
.footer-meta {
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: start;
}

.footer-meta .label {
  margin-bottom: 2px;
}

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

  .footer-brand,
  .footer-meta {
    grid-column: 1 / -1;
  }
}

/* ---------- Responsive ---------- */

/* Below 900px: the showcase sits under the hero copy, sections stack, gauges go two-up. */
@media (max-width: 899px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 40px;
    padding-block: 32px 64px;
  }

  .section {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 72px;
  }

  .section-title {
    position: static;
  }

  .gauges {
    grid-template-columns: 1fr 1fr;
  }

  .facts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  /* One compact row so the sticky bar doesn't eat a third of the screen */
  .site-nav {
    gap: 12px;
    padding: 10px 16px;
    background: rgba(23, 23, 26, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(242, 241, 238, 0.06);
  }

  .monogram {
    flex-shrink: 0;
    height: 34px;
    padding: 0 10px;
    font-size: 0.85rem;
  }

  .mark-tld {
    display: none;
  }

  /* Five links don't fit beside the logo on a phone: give them their own full-width row */
  .site-nav {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .nav-index {
    width: 100%;
    justify-content: space-between;
    gap: 0;
    font-size: 0.78rem;
  }


  .nav-index::-webkit-scrollbar {
    display: none;
  }

  .nav-index a {
    display: block;
    padding: 10px 5px;
    white-space: nowrap;
  }

  .nav-index .num {
    display: none;
  }

  .wrap {
    padding: 0 16px;
  }

  .hero-copy {
    gap: 18px;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

}

@media print {
  .showcase {
    display: none;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .eyebrow::before {
    animation: none;
  }

  .showcase {
    opacity: 1;
    transform: none;
  }

  .m-bonsai-art * {
    animation: none !important;
  }

  * {
    transition-duration: 0.001ms !important;
  }
}