/* ————————————————————————————————
   SiteXpress — house stylesheet
   Paper, ink, one orange cut. Square corners, hairline rules,
   no shadows, no gradients. See Landing-Aesthetic-Spec.md.
———————————————————————————————— */

/* Brand colours, fonts, --ease and --dur come from assets/tokens.css,
   linked before this sheet. Only site-local variables live here. */
:root {
  /* Mono text on ink; the kit uses it (OG card, dark captions) but the
     spec's palette table does not list it. Flagged in the handover notes. */
  --label-dark: #7C736A;

  --shell: 1200px;
  --text-measure: 660px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

p { margin: 0 0 1em; color: var(--body); text-wrap: pretty; max-width: var(--text-measure); }

h1, h2, h3 { margin: 0 0 0.5em; color: var(--ink); font-weight: 600; text-wrap: pretty; }

h1 { font-size: clamp(44px, 7vw, 84px); letter-spacing: -0.035em; line-height: 1.04; }
h2 { font-size: clamp(34px, 4.5vw, 52px); letter-spacing: -0.03em; line-height: 1.08; }
h3 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.02em; line-height: 1.2; }

a { color: inherit; }

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

.theme-ink :focus-visible {
  outline-color: var(--paper);
}

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

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 96px 0;
}

.section--canvas { background: var(--canvas); }

.theme-ink {
  background: var(--ink);
  color: var(--paper);
}

.theme-ink h1, .theme-ink h2, .theme-ink h3 { color: var(--paper); }
.theme-ink p { color: #B9B1A6; }

/* Mono labels: the factual voice */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 18px;
}

.theme-ink .eyebrow { color: var(--label-dark); }

.lead {
  font-size: clamp(18px, 2vw, 20px);
  letter-spacing: -0.005em;
  line-height: 1.5;
}

.mono-fact {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}

/* ————————————————————————————————
   Buttons
———————————————————————————————— */

.btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  display: inline-block;
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* The hover fill arrives as a 45-degree wipe, echoing the mark's cut */
.btn::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -30%;
  width: 160%;
  transform: translateX(-108%) skewX(-45deg);
  transition: transform 220ms var(--ease);
  z-index: -1;
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateX(0) skewX(-45deg);
}

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

.btn-primary::before { background: var(--cut); }

.btn-primary:hover {
  border-color: var(--cut);
  color: var(--card);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
}

.btn-secondary::before { background: var(--ink); }

.btn-secondary:hover {
  color: var(--paper);
}

/* The live CTA. One per page. */
.btn-accent {
  background: var(--cut);
  border-color: var(--cut);
  color: var(--card);
}

.btn-accent::before { background: var(--ink); }

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

.theme-ink .btn-accent {
  background: var(--cut-light);
  border-color: var(--cut-light);
  color: var(--ink);
}

.theme-ink .btn-accent::before { background: var(--paper); }

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

.theme-ink .btn-secondary {
  border-color: var(--paper);
  color: var(--paper);
}

.theme-ink .btn-secondary::before { background: var(--paper); }

.theme-ink .btn-secondary:hover {
  color: var(--ink);
}

.btn-sm { padding: 10px 16px; font-size: 15px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ————————————————————————————————
   Header
———————————————————————————————— */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

/* Brand lockup: icon + SITE + drawn X + PRESS. The X is always the
   wordmark-x artwork, never a typed letter. Gap 11px; clear space is
   covered by the header padding. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.brand-icon {
  flex: none;
  display: block;
  width: 31px;
  height: 31px;
}

.brand-word {
  display: flex;
  align-items: baseline;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--ink);
}

.brand-x {
  width: 0.835em;
  height: 0.735em;
  margin-bottom: -0.012em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a:not(.btn) {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--cut);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms var(--ease);
}

.nav-links a:not(.btn):hover { color: var(--cut); }

.nav-links a:not(.btn):hover::after { transform: scaleX(1); }

.menu-toggle {
  display: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 8px 14px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .menu-toggle { display: inline-block; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 8px 24px 20px;
  }

  .nav-links.is-open { display: flex; }

  .nav-links a:not(.btn) {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-soft);
  }

  .nav-links .btn { margin-top: 16px; }
}

/* ————————————————————————————————
   Hero
———————————————————————————————— */

.hero {
  padding: 120px 0 104px;
}

/* Any section can host the live field: crosses that shimmer, turn
   toward the pointer, and pulse outward on click */
.field-host {
  position: relative;
  overflow: hidden;
}

.field-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.field-host > .shell { position: relative; }

.hero-inner { position: relative; }

.hero h1 { max-width: 15ch; }

.hero h1 .accent { color: var(--cut); }

/* Word-by-word headline entrance */
.h1-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  animation: wordRise 340ms var(--ease) forwards;
}

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

.hero .lead { margin-top: 8px; }

.hero .btn-row { margin-top: 36px; }

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  list-style: none;
  padding-left: 0;
}

.hero-facts li { display: flex; align-items: baseline; gap: 10px; }

.hero-facts .mono-fact { color: var(--ink); }

.hero-facts .fact-label { color: var(--label); }

@media (max-width: 640px) {
  .hero { padding: 72px 0 64px; }
  .hero-facts { flex-direction: column; gap: 12px; }
}

/* ————————————————————————————————
   Split layout (feature sections)
———————————————————————————————— */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

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

.feature-list {
  list-style: none;
  margin: 28px 0 32px;
  padding: 0;
  max-width: var(--text-measure);
}

.feature-list li {
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  color: var(--body);
  text-wrap: pretty;
}

.feature-list li:last-child { border-bottom: 1px solid var(--rule); }

.theme-ink .feature-list li {
  border-color: var(--rule-dark);
  color: #B9B1A6;
}

/* Fact table: the house pattern for anything enumerable */
.fact-table {
  width: 100%;
  border-collapse: collapse;
}

.fact-table th,
.fact-table td {
  padding: 13px 12px;
  border-top: 1px solid var(--rule);
  text-align: left;
  font-weight: 400;
}

.fact-table tbody tr {
  transition: background-color var(--dur) var(--ease);
}

.fact-table tbody tr:hover { background: var(--card); }

.fact-table tbody tr:hover td { color: var(--cut); }

.fact-table tr:last-child th,
.fact-table tr:last-child td {
  border-bottom: 1px solid var(--rule);
}

.fact-table th {
  color: var(--label);
  font-size: 15px;
  padding-right: 24px;
}

.fact-table td {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  text-align: right;
}

/* ————————————————————————————————
   Browser frame (plain, never tilted)
———————————————————————————————— */

.browser-frame {
  background: var(--card);
  border: 1px solid var(--rule);
}

.theme-ink .browser-frame {
  background: var(--ink);
  border-color: var(--rule-dark);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
}

.theme-ink .browser-bar { border-color: var(--rule-dark); }

.browser-dot {
  width: 8px;
  height: 8px;
  background: var(--rule);
}

.browser-address {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--label);
}

.browser-body { padding: 0; }

/* ————————————————————————————————
   Site-build demo: a page assembling itself inside the frame.
   Plays once on view; click to replay.
———————————————————————————————— */

.site-build { cursor: pointer; }

.site-build .browser-address-text {
  display: inline-block;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: 1.5px solid var(--label);
  vertical-align: bottom;
  box-sizing: content-box;
}

.site-build.is-played .browser-address-text {
  animation:
    addressType 0.6s steps(14, end) 0.2s forwards,
    addressCaret 0.6s step-end 0.2s 3;
}

@keyframes addressType {
  from { width: 0; }
  to { width: 14ch; }
}

@keyframes addressCaret {
  0%, 49% { border-right-color: var(--label); }
  50%, 100% { border-right-color: transparent; }
}

.site-skeleton {
  aspect-ratio: 16 / 10;
  padding: clamp(18px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sk-title,
.sk-sub,
.sk-cta {
  display: block;
  transform: scaleX(0);
  transform-origin: left center;
}

.sk-title { width: 56%; height: 22px; background: var(--ink); }

.sk-sub { width: 74%; height: 12px; background: var(--canvas); }

.sk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
  flex-grow: 1;
}

.sk-grid span {
  background: var(--canvas);
  border: 1px solid var(--rule-soft);
  opacity: 0;
  transform: translateY(10px);
}

.sk-cta { width: 128px; height: 38px; background: var(--cut); margin-top: 8px; }

.site-build.is-played .sk-title { animation: skDraw 320ms var(--ease) 0.9s forwards; }
.site-build.is-played .sk-sub { animation: skDraw 320ms var(--ease) 1.1s forwards; }
.site-build.is-played .sk-grid span:nth-child(1) { animation: skDrop 280ms var(--ease) 1.3s forwards; }
.site-build.is-played .sk-grid span:nth-child(2) { animation: skDrop 280ms var(--ease) 1.45s forwards; }
.site-build.is-played .sk-grid span:nth-child(3) { animation: skDrop 280ms var(--ease) 1.6s forwards; }
.site-build.is-played .sk-cta { animation: skDraw 320ms var(--ease) 1.85s forwards; }

@keyframes skDraw {
  to { transform: scaleX(1); }
}

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

.site-build-caption {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  max-width: none;
}

/* Honest placeholder: a flat canvas block naming what belongs there */
.placeholder-block {
  background: var(--canvas);
  border: 1px solid var(--rule);
  display: flex;
  align-items: flex-end;
  padding: 18px;
}

.placeholder-block .mono-fact { color: var(--label); }

.browser-frame .placeholder-block { border: 0; }

/* ————————————————————————————————
   Email section (ink band)
———————————————————————————————— */

.email-demo {
  border: 1px solid var(--rule-dark);
  padding: 40px 32px 32px;
  cursor: pointer;
}

.email-old {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(15px, 2.4vw, 20px);
  color: var(--label-dark);
  max-width: none;
}

.email-old-text {
  position: relative;
  display: inline-block;
}

.email-old-text::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  height: 1.5px;
  background: var(--paper);
}

.email-demo.is-played .email-old-text::after {
  animation: emailStrike 0.7s var(--ease) forwards;
}

.email-new {
  margin: 10px 0 0;
  max-width: none;
  overflow: hidden;
}

.email-new-text {
  display: inline-block;
  width: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(18px, 3vw, 27px);
  color: var(--cut-light);
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--paper);
  opacity: 0;
  vertical-align: top;
  box-sizing: content-box;
}

.email-demo.is-played .email-new-text {
  opacity: 1;
  animation:
    emailType 1.55s steps(19, end) 0.78s forwards,
    emailCaret 0.72s step-end 0.78s 4;
}

.email-caption {
  margin: 22px 0 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-dark);
  max-width: none;
}

@keyframes emailStrike {
  from { transform: translateY(-50%) scaleX(0); }
  to { transform: translateY(-50%) scaleX(1); }
}

@keyframes emailType {
  from { width: 0; }
  to { width: 20ch; }
}

@keyframes emailCaret {
  0%, 49% { border-right-color: var(--paper); }
  50%, 100% { border-right-color: transparent; }
}

/* ————————————————————————————————
   Packages
———————————————————————————————— */

.tiers-head { max-width: var(--text-measure); }

.tiers-switch {
  display: inline-flex;
  margin: 28px 0 40px;
  border: 1px solid var(--ink);
}

.tiers-switch-btn {
  padding: 11px 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  background: transparent;
  color: var(--ink);
  border: 0;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.tiers-switch-btn + .tiers-switch-btn { border-left: 1px solid var(--ink); }

.tiers-switch-btn.is-active {
  background: var(--ink);
  color: var(--paper);
}

.tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--card);
}

.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border-left: 1px solid var(--rule);
  margin-left: -1px;
}

/* Orange rule sweeps across the top of the card under the pointer */
.tier-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cut);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--ease);
}

.tier-card:hover::before { transform: scaleX(1); }

.tier-card--featured {
  background: var(--paper);
  /* The 45-degree cut, echoing the mark. Once on this page. */
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}

.tier-badge {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cut);
  margin-bottom: 14px;
}

.tier-name {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.tier-price {
  margin: 14px 0 2px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  max-width: none;
}

.tier-price-cents { font-size: 14px; }

.tier-pages {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
  max-width: none;
}

.tier-tagline {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--body);
  min-height: 3em;
}

.tier-features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  flex-grow: 1;
}

.tier-features li {
  padding: 10px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body);
  text-wrap: pretty;
}

.tier-delivery {
  margin: 0 0 18px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: none;
}

.tier-btn { width: 100%; }

.tiers-note {
  margin-top: 28px;
  font-size: 15px;
}

.tiers-note strong { color: var(--ink); font-weight: 600; }

/* Business / Organizations flip: same mechanism as MQMain */
[data-view="org"] { display: none; }

.is-org [data-view="org"] { display: block; }
.is-org [data-view="business"] { display: none; }

ul[data-view] { display: none; }
ul[data-view="business"] { display: block; }
.is-org ul[data-view="org"] { display: block; }
.is-org ul[data-view="business"] { display: none; }

a.tier-btn[data-view] { display: none; }
a.tier-btn[data-view="business"] { display: inline-block; }
.is-org a.tier-btn[data-view="org"] { display: inline-block; }
.is-org a.tier-btn[data-view="business"] { display: none; }

@media (max-width: 1180px) {
  .tiers-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .tier-card { border-top: 1px solid var(--rule); margin-top: -1px; }
}

/* ————————————————————————————————
   Process (day counter)
———————————————————————————————— */

.process-track {
  position: relative;
  height: 2px;
  background: var(--rule);
  margin: 48px 0 36px;
}

.process-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--cut);
}

.process.is-played .process-fill {
  animation: processFill 1.4s var(--ease) 0.3s forwards;
}

@keyframes processFill {
  to { transform: scaleX(1); }
}

/* The hook: a live 24-hour clock in huge tabular mono */
.timer {
  font-family: var(--font-mono);
  font-weight: 500;
  /* 8 tabular chars at ~0.6em each must fit a half-shell column (~544px) */
  font-size: clamp(52px, 7.5vw, 104px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.timer-caption {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  max-width: none;
}

.timer-block .process-track { margin: 28px 0 0; }

/* Compact steps: oversized mono numerals, one line each */
.fp-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px 32px;
  margin: 72px 0 0;
  padding: 0;
}

.fp-step-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(38px, 4.5vw, 54px);
  line-height: 1;
  color: var(--label);
  margin-bottom: 14px;
}

.fp-steps h3 {
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.fp-steps p {
  font-size: 14.5px;
  margin: 0;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.process-steps .day {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 10px;
}

.process-steps h3 { font-size: 18px; letter-spacing: -0.01em; margin-bottom: 6px; }

.process-steps p { font-size: 14.5px; margin: 0; }

@media (max-width: 900px) {
  .process-steps { grid-template-columns: 1fr; gap: 0; }
  .process-steps li { padding: 20px 0; border-top: 1px solid var(--rule); }
  .process-steps li:last-child { border-bottom: 1px solid var(--rule); }
}

/* ————————————————————————————————
   Portfolio
———————————————————————————————— */

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.work-item { text-decoration: none; }

.work-item .placeholder-block { aspect-ratio: 16 / 10; }

.work-item figcaption {
  padding: 14px 0 0;
}

.work-item .work-title {
  display: block;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.work-item .work-meta {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}

/* ————————————————————————————————
   Reviews: signed entries in hairline rows, never cards with stars
———————————————————————————————— */

.reviews-list {
  margin-top: 48px;
  border-top: 1px solid var(--rule);
}

.review {
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
}

.review-stars {
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: 0.24em;
  color: var(--ink);
  max-width: none;
}

.review-stars .mono-fact { margin-left: 10px; letter-spacing: 0.14em; }

/* Carousel: drifts continuously, holds still under the pointer */
.reviews-carousel {
  margin-top: 48px;
  overflow: hidden;
}

.reviews-track {
  display: flex;
  width: max-content;
}

.reviews-track.is-scrolling {
  animation: reviewsScroll 42s linear infinite;
}

.reviews-carousel:hover .reviews-track.is-scrolling,
.reviews-carousel:focus-within .reviews-track.is-scrolling {
  animation-play-state: paused;
}

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

.review-card {
  flex: none;
  width: min(400px, 78vw);
  margin-right: 28px;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 26px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur) var(--ease);
}

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

.review-card .review-stars { margin-bottom: 12px; }

.review-card-quote {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  flex-grow: 1;
  max-width: none;
}

.review-card-name {
  margin: 0 0 8px;
  max-width: none;
}

.review-card .review-links { margin: 0; max-width: none; }

.review-quote {
  margin: 0 0 18px;
  max-width: 780px;
  font-size: clamp(19px, 2.2vw, 24px);
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--ink);
}

.review--pending .review-quote { color: var(--body); }

.review-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 32px;
}

.review-links a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.review-links a:hover {
  color: var(--cut);
  border-color: var(--cut);
}

/* ————————————————————————————————
   Articles: an index of dated rows, like a ledger
———————————————————————————————— */

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

.article-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 12px 32px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}

.article-row h2 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.015em;
}

.article-row p {
  margin: 0;
  font-size: 15.5px;
}

a.article-row {
  text-decoration: none;
  color: inherit;
}

a.article-row:hover h2 { color: var(--cut); }

.article-row h2 { transition: color var(--dur) var(--ease); }

@media (max-width: 760px) {
  .article-row { grid-template-columns: 1fr; gap: 8px; }
}

/* Articles toolbar: search + grid/list switch */
.articles-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 44px;
}

.articles-search {
  flex: 1;
  min-width: 220px;
  max-width: 380px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule);
  padding: 11px 14px;
}

.articles-search:focus {
  outline: none;
  border-color: var(--ink);
  border-left-color: var(--cut);
}

.articles-toolbar .tiers-switch { margin: 0; }

/* Card grid */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 36px;
}

.article-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease);
}

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

.article-card-visual {
  aspect-ratio: 16 / 9;
  background: var(--canvas);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: flex-end;
  padding: 14px;
  overflow: hidden;
}

/* When a real image exists it fills the slot edge to edge */
.article-card-visual--img { padding: 0; }

.article-card-visual--img img,
.article-hero--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-hero--img { padding: 0; overflow: hidden; }

.work-item .work-shot {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule);
}

.article-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  flex: 1;
}

.article-card-body h2 {
  font-size: 20px;
  letter-spacing: -0.015em;
  margin: 0;
  transition: color var(--dur) var(--ease);
}

.article-card:hover h2 { color: var(--cut); }

.article-card-body p {
  font-size: 15px;
  margin: 0;
}

.article-card-more {
  margin-top: auto;
  padding-top: 12px;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}

.articles-more-wrap { margin-top: 44px; }

.articles-empty { margin-top: 36px; }

/* Article page */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 72px;
  align-items: start;
}

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

.article-hero {
  aspect-ratio: 16 / 9;
  background: var(--canvas);
  border: 1px solid var(--rule);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  margin: 28px 0 8px;
}

.article-meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  max-width: none;
}

.article-body { margin-top: 28px; }

.article-body h2 {
  font-size: 24px;
  margin: 40px 0 14px;
}

.article-aside .mono-fact { display: block; margin-bottom: 6px; }

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

.aside-list a {
  display: block;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}

.aside-list h3 {
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 6px 0 6px;
  transition: color var(--dur) var(--ease);
}

.aside-list a:hover h3 { color: var(--cut); }

.aside-list p {
  font-size: 14px;
  margin: 0;
}

/* ————————————————————————————————
   Contact
———————————————————————————————— */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}

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

.contact-block { margin-top: 36px; }

.contact-block .mono-fact { display: block; margin-bottom: 10px; }

.contact-block p, .contact-block a { color: var(--ink); font-size: 16px; }

.contact-block a { text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }

.contact-block a:hover { color: var(--cut); border-color: var(--cut); }

.contact-panel {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 32px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}

.form-field { display: flex; flex-direction: column; }

.form-field--full { grid-column: 1 / -1; }

.form-field label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 8px;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule);
  padding: 12px 14px;
  transition: border-color var(--dur) var(--ease);
}

.form-field textarea { resize: vertical; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--ink);
  border-left-color: var(--cut);
}

.form-submit { grid-column: 1 / -1; justify-self: start; }

.form-honeypot { position: absolute; left: -9999px; }

@media (max-width: 560px) {
  .contact-form { grid-template-columns: 1fr; }
  .contact-panel { padding: 24px 20px; }
}

/* ————————————————————————————————
   CTA band
———————————————————————————————— */

.cta-band .shell {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}

@media (max-width: 900px) {
  .cta-band .shell { grid-template-columns: 1fr; gap: 36px; }
}

.cta-facts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cta-facts li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 0;
  border-top: 1px solid var(--rule-dark);
  font-size: 15px;
  color: #B9B1A6;
}

.cta-facts li:last-child { border-bottom: 1px solid var(--rule-dark); }

.cta-facts .mono-fact { color: var(--paper); text-align: right; }

/* ————————————————————————————————
   Footer
———————————————————————————————— */

.site-footer {
  background: var(--ink);
  color: #B9B1A6;
  padding: 72px 0 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 48px;
}

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

.footer-brand .brand-word { color: var(--paper); }

.footer-tagline {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-dark);
  max-width: none;
}

.footer-nav { display: flex; flex-direction: column; gap: 12px; }

.footer-nav a {
  color: #B9B1A6;
  text-decoration: none;
  font-size: 15px;
  transition: color var(--dur) var(--ease);
}

.footer-nav a:hover { color: var(--paper); }

.footer-contact p {
  color: #B9B1A6;
  font-size: 15px;
  margin: 0 0 10px;
  max-width: none;
}

.footer-contact a { color: var(--paper); text-decoration: none; }

.footer-contact a:hover { color: var(--cut-light); }

.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  font-size: 13.5px;
  color: var(--label-dark);
}

.footer-bottom p { margin: 0; color: var(--label-dark); max-width: none; }

.footer-bottom a { color: inherit; }

.footer-bottom a:hover { color: var(--paper); }

/* ————————————————————————————————
   Entry reveal: 14px fade-and-rise, once
———————————————————————————————— */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered variant: the container observes, its children rise in turn */
.reveal.stagger {
  opacity: 1;
  transform: none;
  transition: none;
}

.stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

.stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

.stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }

/* Process steps land in time with the bar filling above them */
.stagger--slow.is-visible > *:nth-child(1) { transition-delay: 300ms; }
.stagger--slow.is-visible > *:nth-child(2) { transition-delay: 520ms; }
.stagger--slow.is-visible > *:nth-child(3) { transition-delay: 740ms; }
.stagger--slow.is-visible > *:nth-child(4) { transition-delay: 960ms; }
.stagger--slow.is-visible > *:nth-child(5) { transition-delay: 1180ms; }

/* ————————————————————————————————
   Loading screen: the logo holds centre stage over paper while a
   2px bar fills, then flies into its header slot and the page
   reveals. Runs once per session, index only. The whole system is
   inert unless the head script adds .sx-loading to <html>.
———————————————————————————————— */

.loader,
.loader-logo-layer,
.header-rule {
  display: none;
}

html.sx-loading .loader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65'%3E%3Cpath d='M32.5 28v9M28 32.5h9' stroke='%23DCD6CC' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 1;
  transition: opacity 420ms var(--ease);
}

html.sx-loading .loader-meta {
  position: absolute;
  left: 50%;
  top: calc(50% + 82px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transition: opacity 260ms var(--ease);
}

html.sx-loading .loader-track {
  width: 260px;
  height: 2px;
  background: var(--rule);
  position: relative;
}

html.sx-loading .loader-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--cut);
  transition: width 1050ms var(--ease);
}

html.sx-loading.sx-fill .loader-fill { width: 100%; }

html.sx-loading .loader-tagline {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label);
  max-width: none;
}

html.sx-loading .loader-logo-layer {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 61;
  pointer-events: none;
}

html.sx-loading .loader-logo {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 30px);
  transform-origin: left top;
  will-change: transform;
}

html.sx-loading .loader-icon {
  flex: none;
  display: block;
  width: clamp(42px, 10vw, 85px);
  height: clamp(42px, 10vw, 85px);
}

html.sx-loading .loader-word {
  display: flex;
  align-items: baseline;
  font-size: clamp(36px, 8.5vw, 72px);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--ink);
}

/* Flight phase: the overlay lifts while the logo travels */
html.sx-flight .loader { opacity: 0; }
html.sx-flight .loader-meta { opacity: 0; }

/* Done: everything gone, page takes over */
html.sx-done .loader,
html.sx-done .loader-logo-layer { display: none; }

/* While loading, the header logo waits for the flight to land and
   the bottom rule waits to draw */
html.sx-loading .site-header { border-bottom-color: transparent; }
html.sx-loading .site-header .brand { opacity: 0; }
html.sx-loading.sx-done .site-header .brand { opacity: 1; }

html.sx-loading .header-rule {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--ease) 40ms;
}

html.sx-loading.sx-done .header-rule { transform: scaleX(1); }

/* Gated reveals: nav and hero rise once the loader hands over */
html.sx-loading .nav-links,
html.sx-loading .hero .eyebrow,
html.sx-loading .hero .lead,
html.sx-loading .hero .btn-row,
html.sx-loading .hero-facts {
  opacity: 0;
  transform: translateY(14px);
}

html.sx-loading .hero h1 { opacity: 0; }
html.sx-loading.sx-done .hero h1 { opacity: 1; }

html.sx-loading.sx-done .nav-links,
html.sx-loading.sx-done .hero .eyebrow,
html.sx-loading.sx-done .hero .lead,
html.sx-loading.sx-done .hero .btn-row,
html.sx-loading.sx-done .hero-facts {
  opacity: 1;
  transform: none;
  transition:
    opacity 460ms var(--ease) var(--sx-d, 0ms),
    transform 460ms var(--ease) var(--sx-d, 0ms);
}

html.sx-loading.sx-done .nav-links { --sx-d: 120ms; }
html.sx-loading.sx-done .hero .eyebrow { --sx-d: 200ms; }
html.sx-loading.sx-done .hero .lead { --sx-d: 400ms; }
html.sx-loading.sx-done .hero .btn-row { --sx-d: 470ms; }
html.sx-loading.sx-done .hero-facts { --sx-d: 540ms; }

@media (max-width: 640px) {
  html.sx-loading .loader-meta { top: calc(50% + 64px); }
}

/* ————————————————————————————————
   Reduced motion
———————————————————————————————— */

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

  /* The head script never starts the loader under reduced motion;
     this covers a preference change mid-session */
  html.sx-loading .loader,
  html.sx-loading .loader-logo-layer { display: none; }

  html.sx-loading .site-header { border-bottom-color: var(--rule); }

  html.sx-loading .site-header .brand,
  html.sx-loading .nav-links,
  html.sx-loading .hero .eyebrow,
  html.sx-loading .hero h1,
  html.sx-loading .hero .lead,
  html.sx-loading .hero .btn-row,
  html.sx-loading .hero-facts {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal,
  .stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn::before {
    transition: none;
  }

  .tier-card::before,
  .nav-links a:not(.btn)::after {
    transition: none;
  }

  .h1-word {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .site-build .browser-address-text,
  .site-build.is-played .browser-address-text {
    width: 14ch;
    animation: none;
    border-right-color: transparent;
  }

  .site-build .sk-title,
  .site-build .sk-sub,
  .site-build .sk-cta,
  .site-build.is-played .sk-title,
  .site-build.is-played .sk-sub,
  .site-build.is-played .sk-cta {
    transform: scaleX(1);
    animation: none;
  }

  .site-build .sk-grid span,
  .site-build.is-played .sk-grid span {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .reviews-track.is-scrolling { animation: none; }
  .reviews-carousel { overflow-x: auto; }

  .email-demo .email-old-text::after,
  .email-demo.is-played .email-old-text::after {
    animation: none;
    transform: translateY(-50%) scaleX(1);
  }

  .email-demo .email-new-text,
  .email-demo.is-played .email-new-text {
    width: 20ch;
    opacity: 1;
    animation: none;
    border-right-color: transparent;
  }

  .process .process-fill,
  .process.is-played .process-fill {
    animation: none;
    transform: scaleX(1);
  }
}

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .email-new { overflow-x: hidden; }
}