/* =========================================================
   Sterling Communications — homepage
   Design tokens per handoff: cream/ink/oxblood/brass,
   Fraunces + Libre Franklin, no shadows, no radius (except
   phone frame + avatar), depth from hairlines only.
   ========================================================= */

:root {
  --cream: #F6F2EA;
  --cream-light: #FDFBF6;
  --ink: #2A251D;
  --body: #5C5344;
  --muted: #786D57;   /* 4.56:1 on cream — was #8A7F6C at 3.53:1, below AA */
  --oxblood: #6B1F2A;
  --oxblood-dark: #521722;
  --brass: #B29A5B;
  --brass-hairline: #B29A5B55;
  --card-border: #E4DCCB;
  --inner-hairline: #EEE7D8;
  --stripes: repeating-linear-gradient(45deg, #EDE6D6, #EDE6D6 10px, #E6DECC 10px, #E6DECC 20px);
  --serif: 'Fraunces', serif;
  --sans: 'Libre Franklin', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--oxblood); color: var(--cream); }

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

h1, h2, h3 { font-family: var(--serif); font-optical-sizing: auto; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 56px; }

.brass { color: var(--brass); }
.oxblood { color: var(--oxblood); }
.muted { color: var(--muted); }
.ink { color: var(--ink); }

/* ---------- Type primitives ---------- */

.eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--ink);
}

.h2-balance { text-wrap: balance; max-width: 24ch; }
.h2-balance.narrow { max-width: 14ch; }

.body-lg {
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  max-width: 60ch;
}

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-block;
  padding: 15px 32px;
  background: var(--oxblood);
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 150ms ease, transform 150ms ease;
}
.btn:hover { background: var(--oxblood-dark); color: var(--cream); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-small { padding: 10px 22px; font-size: 13px; }
.btn-large { margin-top: 44px; padding: 16px 36px; font-size: 15px; }

.text-link {
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid #6B1F2A66;
  padding-bottom: 2px;
  transition: color 150ms ease, border-color 150ms ease;
}
.text-link:hover { border-color: var(--oxblood-dark); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--brass-hairline);
  transition: border-color 200ms ease;
}
.site-header.is-scrolled { border-bottom-color: var(--ink); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 28px;
  padding-bottom: 28px;
  transition: padding 250ms ease;
}
.site-header.is-scrolled .header-inner { padding-top: 14px; padding-bottom: 14px; }

.wordmark {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.wordmark:hover { color: var(--ink); }

.main-nav { display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }
.main-nav a {
  color: var(--ink);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--oxblood), var(--oxblood));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color 150ms ease, background-size 200ms ease;
}
.main-nav a:hover { color: var(--oxblood); }
.main-nav a.is-active { color: var(--oxblood); background-size: 100% 1px; }

.header-right { display: flex; align-items: center; gap: 24px; }
.header-phone { font-size: 14px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.header-phone:hover { color: var(--oxblood); }

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--brass-hairline);
  background: var(--cream);
  padding: 8px 24px 24px;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid var(--inner-hairline);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav .mobile-phone { color: var(--oxblood); font-variant-numeric: tabular-nums; }

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

.section { border-top: 1px solid var(--ink); padding: 72px 0 96px; }

.split {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 64px;
}

/* ---------- Hero ---------- */

.hero {
  padding: 110px 0 100px;
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 72px;
  align-items: center;
}

.hero h1 {
  margin: 0;
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 15ch;
}

.hero .eyebrow { margin-bottom: 28px; }

.hero-sub {
  margin: 36px 0 0;
  font-size: 19px;
  line-height: 1.65;
  color: var(--body);
  max-width: 58ch;
}

.hero-ctas { display: flex; align-items: center; gap: 28px; margin-top: 44px; flex-wrap: wrap; }
.home-hero .hero-ctas { margin-top: 34px; }

.pull-quote {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.5;
  font-weight: 400;
  font-style: italic;
  color: var(--body);
}

.approach-quote { margin: 40px 0 20px; max-width: 24ch; }

.brass-mark { width: 40px; height: 1px; background: var(--brass); }

/* ---------- Hero visual: post lifecycle ---------- */

.hero-visual {
  border-left: 1px solid var(--brass-hairline);
  padding-left: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hv-steps {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.hv-step {
  display: flex;
  align-items: baseline;
  gap: 7px;
  transition: color 400ms ease;
}
.hv-step.is-on { color: var(--ink); }
.hv-step.is-on .hv-numeral { color: var(--brass); }
.hv-numeral {
  font-family: var(--serif);
  font-size: 13px;
  color: #C9BEA6;
  text-transform: none;
  letter-spacing: 0;
  transition: color 400ms ease;
}
.hv-rule { flex: 1; height: 1px; background: var(--brass-hairline); }

.hv-card {
  background: var(--cream-light);
  border: 1px solid var(--card-border);
  max-width: 440px;
  transition: opacity 400ms ease;
}
.hv-card.is-resetting { opacity: 0; }

.hv-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--inner-hairline);
}
.avatar-sm { width: 30px; height: 30px; font-size: 13px; flex: none; }
.hv-id { flex: 1; min-width: 0; }

.hv-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color 300ms ease;
}
.hv-status.is-approved { color: var(--oxblood); }
.hv-status.is-live { color: var(--brass); }

.hv-photo {
  aspect-ratio: 16/9;
  background: var(--stripes);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--inner-hairline);
  position: relative;
  overflow: hidden;
}
.chip-hv {
  font-size: 11px;
  position: absolute;
  left: 10px;
  bottom: 10px;
}

/* Demo photography — graded slightly warm to sit in the palette */
.demo-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(0.97) sepia(0.1);
}
.tile { overflow: hidden; position: relative; }
.tile .demo-photo { transition: transform 400ms ease; }
.tile:hover .demo-photo { transform: scale(1.03); }

.hv-body { padding: 14px 16px 16px; }

.hv-caption {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  min-height: 60px;
}

.hv-caret {
  display: inline-block;
  width: 1px;
  height: 13px;
  background: var(--oxblood);
  vertical-align: -2px;
  margin-left: 2px;
  animation: caretBlink 0.9s steps(1) infinite;
}
.hv-caret.is-hidden { display: none; }
@keyframes caretBlink { 50% { opacity: 0; } }

.hv-engage {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 500ms ease;
  font-variant-numeric: tabular-nums;
}
.hv-engage.is-shown { opacity: 1; }

.hv-note { margin: 0; font-size: 13px; color: var(--muted); }

/* Hero entrance animation — pure CSS so content shows even without JS */
.hero-in {
  opacity: 0;
  transform: translateY(16px);
  animation: heroRise 0.8s ease forwards;
}
.hero-in-1 { animation-delay: 0.05s; }
.hero-in-2 { animation-delay: 0.18s; }
.hero-in-3 { animation-delay: 0.34s; }
.hero-in-4 { animation-delay: 0.5s; }
.hero-in-5 { animation-delay: 0.65s; }

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


/* ---------- Sector tabs ---------- */

.sector-tabs {
  display: flex;
  gap: 28px;
  margin: 28px 0 0;
  border-bottom: 1px solid var(--brass-hairline);
}

.sector-tab {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.sector-tab:hover { color: var(--ink); }
.sector-tab.is-active { color: var(--oxblood); border-bottom-color: var(--oxblood); }

.sector-line { margin: 24px 0 0; transition: opacity 250ms ease; }
.sector-line.is-fading { opacity: 0; }

#workHeading { transition: opacity 250ms ease; }
#workHeading.is-fading { opacity: 0; }

#workGrid { transition: opacity 250ms ease; }
#workGrid.is-fading { opacity: 0; }

/* ---------- Featured work ---------- */

.work-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.sample-pill {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid #B29A5B77;
  padding: 6px 14px;
  white-space: nowrap;
}

.work-grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.work-right { display: flex; flex-direction: column; gap: 40px; min-width: 0; }

/* Phone frame */
.phone-frame {
  border: 1.5px solid var(--ink);
  border-radius: 36px;
  padding: 12px;
  background: var(--cream);
}
.phone-screen {
  border-radius: 26px;
  overflow: hidden;
  background: var(--cream-light);
  border: 1px solid var(--card-border);
}
.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.phone-status .dots { letter-spacing: 0.1em; }
.phone-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--inner-hairline);
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--oxblood);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 15px;
}
.handle { margin: 0; font-size: 13px; font-weight: 600; }
.handle-sub { margin: 0; font-size: 11px; color: var(--muted); }
.phone-body { padding: 14px 16px 20px; }
.engagement { margin: 0 0 8px; font-size: 12px; color: var(--muted); letter-spacing: 0.06em; }
.caption-copy { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); }

/* Placeholders */
.placeholder {
  background: var(--stripes);
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder.square { aspect-ratio: 1; }
.placeholder.portrait { aspect-ratio: 4/5; border: 1px solid var(--card-border); }
.chip {
  font-family: monospace;
  font-size: 12px;
  color: var(--muted);
  background: #F6F2EAcc;
  padding: 6px 12px;
}
.chip-sm { font-family: monospace; font-size: 10px; color: var(--muted); text-align: center; }

.demo-caption { margin: 14px 4px 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Instagram grid */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.tile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 200ms ease, border-color 200ms ease;
}
.tile:hover { filter: brightness(0.97); }
.tile-oxblood { background: var(--oxblood); color: #F0E6D6; padding: 14px; text-align: center; }
.tile-oxblood span { font-family: var(--serif); font-size: 14px; line-height: 1.4; font-style: italic; }
.tile-ink { background: var(--ink); color: #F0E6D6; padding: 14px; text-align: center; }
.tile-ink span { font-family: var(--serif); font-size: 13px; line-height: 1.5; }
.tile-card {
  background: var(--cream-light);
  border: 1px solid var(--card-border);
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  text-align: center;
}
.tile-card:hover { border-color: var(--brass); filter: none; }
.tile-title { font-family: var(--serif); font-size: clamp(15px, 1.7vw, 22px); color: var(--ink); }
.tile-tag { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oxblood); }

/* Panels */
.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}
.panel { background: var(--cream-light); border: 1px solid var(--card-border); transition: border-color 200ms ease; }
.panel:hover { border-color: #D5C9AE; }
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--inner-hairline);
}
.panel-title { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.panel-status { font-size: 11px; color: var(--muted); }

.cal-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 18px;
  border-bottom: 1px solid var(--inner-hairline);
}
.cal-row.last { border-bottom: none; }
.cal-day { font-size: 11px; font-weight: 600; color: var(--muted); }
.cal-item { font-size: 13px; }
.cal-tag { font-size: 10px; letter-spacing: 0.08em; color: var(--oxblood); }

.report-grid { display: grid; grid-template-columns: 1fr 1fr; }
.stat-cell { padding: 18px; border-bottom: 1px solid var(--inner-hairline); }
.stat-cell.right-rule { border-right: 1px solid var(--inner-hairline); }
.stat-number { margin: 0; font-family: var(--serif); font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-label { margin: 4px 0 0; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
.chart-cell { grid-column: 1 / -1; padding: 18px; }
.chart-label { margin: 0 0 12px; }

.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 56px; }
.bar {
  flex: 1;
  background: #D8CDB4;
  transition: height 0.9s cubic-bezier(0.25, 0.8, 0.3, 1);
}
.bar-accent { background: var(--oxblood); }
.bar:nth-child(2) { transition-delay: 0.1s; }
.bar:nth-child(3) { transition-delay: 0.2s; }
.bar:nth-child(4) { transition-delay: 0.3s; }

/* ---------- Services ---------- */

.services-heading { margin-bottom: 64px; }

.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); }

.service { padding: 0 32px 8px 32px; border-right: 1px solid var(--brass-hairline); }
.service:first-child { padding-left: 0; }
.service:last-child { padding-right: 0; border-right: none; }

.numeral { margin: 0 0 20px; font-family: var(--serif); font-size: 17px; color: var(--brass); }
.service h3 { margin: 0 0 14px; font-size: 22px; font-weight: 500; }
.service p:last-child { margin: 0; font-size: 14px; line-height: 1.7; color: var(--body); }

/* ---------- Approach ---------- */

.steps { display: flex; flex-direction: column; }
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--brass-hairline);
}
.step:first-child { padding-top: 0; }
.step.last { border-bottom: none; padding-bottom: 0; }
.step-num { font-family: var(--serif); font-size: 20px; color: var(--brass); }
.step h3 { margin: 0 0 10px; font-family: var(--sans); font-size: 17px; font-weight: 600; }
.step p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--body); max-width: 60ch; }

/* ---------- About / team ---------- */

.about-intro { margin-bottom: 64px; }
.about-lede { margin: 0; align-self: end; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

.team-card h3 { margin: 20px 0 4px; font-size: 21px; font-weight: 500; transition: color 150ms ease; }
.team-card:hover h3 { color: var(--oxblood); }
.team-card .placeholder { transition: border-color 200ms ease; }
.team-card:hover .placeholder { border-color: var(--brass); }
.role { margin: 0; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oxblood); }
.bio { margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: var(--body); }

/* ---------- Contact ---------- */

.contact {
  padding: 88px 0 104px;
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: 64px;
}

.contact-heading {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  max-width: 16ch;
  text-wrap: balance;
}

.contact-body { margin: 28px 0 0; max-width: 55ch; }

.contact-rail {
  border-left: 1px solid var(--brass-hairline);
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: center;
}

.rail-label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.rail-value { font-size: 17px; margin: 0; }
.rail-value.ink { color: var(--ink); font-variant-numeric: tabular-nums; }
a.rail-value.ink:hover { color: var(--oxblood); }

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

.site-footer {
  border-top: 1px solid var(--brass-hairline);
  padding: 28px 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  flex-wrap: wrap;
}
/* Match the header mark: it inherited <p>'s 400 and rendered lighter. */
.footer-wordmark { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: 0.01em; }
.footer-line { margin: 0; font-size: 13px; color: var(--muted); }

/* ---------- Scroll reveals (state applied by JS) ---------- */

.reveal-hidden {
  opacity: 0;
  transform: translateY(14px);
}
.reveal-shown {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr 1fr; gap: 48px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .service { padding: 0 32px 8px 0; border-right: none; border-bottom: 1px solid var(--brass-hairline); padding-bottom: 32px; }
  .service:nth-child(odd) { border-right: 1px solid var(--brass-hairline); padding-right: 32px; }
  .service:nth-child(even) { padding-left: 32px; }
  .service:nth-child(3), .service:nth-child(4) { border-bottom: none; padding-bottom: 8px; }
}

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

  .main-nav, .header-phone, .site-header .btn-small { display: none; }
  .menu-toggle { display: block; }

  .hero { grid-template-columns: 1fr; padding: 72px 0 72px; gap: 48px; }
  .hero-visual { border-left: none; border-top: 1px solid var(--brass-hairline); padding-left: 0; padding-top: 40px; }

  .split { grid-template-columns: 1fr; gap: 28px; }
  .section { padding: 56px 0 64px; }

  .work-grid { grid-template-columns: 1fr; }
  .phone-frame { max-width: 380px; }

  .team-grid { grid-template-columns: 1fr; gap: 48px; }
  .team-card .placeholder { max-width: 380px; }

  .contact { grid-template-columns: 1fr; gap: 48px; padding: 64px 0 72px; }
  .contact-rail { border-left: none; border-top: 1px solid var(--brass-hairline); padding-left: 0; padding-top: 32px; }

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

@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
  .service, .service:nth-child(odd), .service:nth-child(even) {
    padding: 0 0 28px 0;
    border-right: none;
    border-bottom: 1px solid var(--brass-hairline);
    margin-bottom: 28px;
  }
  .service:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector-tabs { gap: 18px; flex-wrap: wrap; }
  .sample-pill { white-space: normal; }
  .work-header { margin-bottom: 40px; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-in { animation: none; opacity: 1; transform: none; }
  .hv-caret { display: none; }
  .reveal-hidden { opacity: 1; transform: none; }
  .bar { transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =========================================================
   Inner pages
   ========================================================= */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 24px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--oxblood); }
.crumb-sep { color: var(--brass); }

/* Section-page hero. Deliberately matched to .hero-lite on /software/ so
   the site keeps one voice below the homepage: cream, left-aligned, serif
   at 400, closed with a hairline. Changing this rule restyles all 18
   section pages at once, which is why it is here and not in their markup. */
.page-hero {
  padding: 72px 0 40px;
  border-bottom: 1px solid var(--brass-hairline);
}
/* .section carries its own top rule; next to the hero's closing hairline
   that stacked into a visible double line. */
.page-hero + .section,
.page-hero + .band-deep + .section { border-top: none; }
.page-hero h1 {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.015em;
  max-width: 18ch;
  text-wrap: balance;
}
.page-hero .lede {
  margin: 16px 0 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  max-width: 56ch;
}

.page-cols {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: 72px;
  align-items: start;
}

.side-rail {
  border-left: 1px solid var(--brass-hairline);
  padding-left: 36px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: sticky;
  top: 120px;
}
.rail-block h3 {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.rail-block a { display: block; font-size: 15px; color: var(--ink); padding: 7px 0; border-bottom: 1px solid var(--inner-hairline); }
.rail-block a:last-child { border-bottom: none; }
.rail-block a:hover { color: var(--oxblood); }
.rail-block p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--body); }

.prose h2 { font-size: 30px; margin: 56px 0 20px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 16px; line-height: 1.75; color: var(--body); max-width: 62ch; margin: 0 0 20px; }
.prose strong { color: var(--ink); font-weight: 600; }

.plain-list { list-style: none; margin: 28px 0 0; padding: 0; max-width: 62ch; }
.plain-list li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--inner-hairline);
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}
.plain-list li:last-child { border-bottom: none; }
.plain-list .tick { color: var(--oxblood); flex: none; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--brass-hairline); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 150ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: var(--serif); font-size: 22px; color: var(--brass); flex: none; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { color: var(--oxblood); }
.faq-item p { margin: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--body); max-width: 60ch; }

/* CTA band */
.cta-band { border-top: 1px solid var(--ink); padding: 80px 0 104px; }
.cta-band h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.cta-band p { margin: 24px 0 0; font-size: 17px; line-height: 1.7; color: var(--body); max-width: 55ch; }
.cta-actions { display: flex; align-items: center; gap: 28px; margin-top: 40px; flex-wrap: wrap; }

/* Monogram portraits */
.monogram {
  aspect-ratio: 4/5;
  background: var(--cream-light);
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition: border-color 200ms ease;
}
.monogram span { font-family: var(--serif); font-size: 58px; font-weight: 400; color: var(--brass); letter-spacing: 0.04em; }
.monogram::after { content: ''; width: 32px; height: 1px; background: var(--brass-hairline); }

/* Stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--cream-light);
  border: 1px solid var(--card-border);
  margin: 36px 0 0;
}
.stat-strip > div { padding: 26px 28px; border-right: 1px solid var(--inner-hairline); }
.stat-strip > div:last-child { border-right: none; }
.stat-strip .num { margin: 0; font-family: var(--serif); font-size: 32px; color: var(--ink); }
.stat-strip .lab { margin: 6px 0 0; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }

/* Comment thread graphic */
.thread-row { padding: 16px 18px; border-bottom: 1px solid var(--inner-hairline); }
.thread-row:last-child { border-bottom: none; }
.thread-row.reply { margin-left: 28px; border-left: 1px solid var(--oxblood); border-bottom: none; background: var(--cream-light); }
.thread-name { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.thread-name .thread-time { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 8px; }
.thread-text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--body); }

/* We say / never say */
.voice-cols { display: grid; grid-template-columns: 1fr 1fr; }
.voice-cols > div { padding: 20px 22px; }
.voice-cols > div:first-child { border-right: 1px solid var(--inner-hairline); }
.voice-cols h4 { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.voice-cols .never h4 { color: var(--oxblood); }
.voice-cols ul { list-style: none; margin: 0; padding: 0; }
.voice-cols li { padding: 8px 0; font-size: 13px; line-height: 1.55; color: var(--body); border-bottom: 1px solid var(--inner-hairline); }
.voice-cols li:last-child { border-bottom: none; }

/* Big quote tile */
.quote-tile-lg {
  background: var(--oxblood);
  color: #F0E6D6;
  padding: 44px 40px;
}
.quote-tile-lg p { margin: 0; font-family: var(--serif); font-size: 23px; line-height: 1.5; font-style: italic; }
.quote-tile-lg .attribution { margin: 18px 0 0; font-family: var(--sans); font-size: 12px; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: #D9B8A4; opacity: 0.85; }

/* Numbered flow (3-up) */
.flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; }
.flow-grid > div { padding: 24px 28px 8px 0; border-top: 1px solid var(--brass-hairline); margin-right: 28px; }
.flow-grid > div:last-child { margin-right: 0; }
.flow-grid .numeral { margin-bottom: 14px; }
.flow-grid h3 { margin: 0 0 10px; font-family: var(--sans); font-size: 16px; font-weight: 600; }
.flow-grid p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--body); }

/* Service link cards on hub page */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.hub-card {
  display: block;
  background: var(--cream-light);
  border: 1px solid var(--card-border);
  padding: 36px 36px 32px;
  color: var(--ink);
  transition: border-color 200ms ease;
}
.hub-card:hover { border-color: var(--brass); color: var(--ink); }
.hub-card .numeral { margin: 0 0 18px; }
.hub-card h3 { margin: 0 0 12px; font-size: 24px; font-weight: 500; }
.hub-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--body); }
.hub-card .hub-more { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--oxblood); border-bottom: 1px solid #6B1F2A66; padding-bottom: 2px; }
.hub-card:hover .hub-more { color: var(--oxblood-dark); }

/* Homepage service title links */
.service h3 a { color: var(--ink); }
.service h3 a:hover { color: var(--oxblood); }
.service-more { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--oxblood); border-bottom: 1px solid #6B1F2A66; padding-bottom: 2px; }

.sector-links { margin: 20px 0 0; font-size: 14px; color: var(--muted); }
.sector-links a { font-weight: 500; }
.sector-links .dot { color: var(--brass); margin: 0 10px; }

/* Expanded footer */
.footer-grid {
  display: grid;
  grid-template-columns: 4fr 2fr 2fr 2fr;
  gap: 48px;
  border-top: 1px solid var(--brass-hairline);
  padding: 56px 0 48px;
}
.footer-brand .footer-wordmark { margin: 0 0 14px; font-size: 22px; }
.footer-brand p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 34ch; }
.footer-heading {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-col a { display: block; font-size: 14px; color: var(--ink); padding: 5px 0; }
.footer-col a:hover { color: var(--oxblood); }
.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  border-top: 1px solid var(--inner-hairline);
  padding: 20px 0 44px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}
.footer-base p { margin: 0; }

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

@media (max-width: 900px) {
  .page-cols { grid-template-columns: 1fr; gap: 48px; }
  .side-rail { border-left: none; border-top: 1px solid var(--brass-hairline); padding-left: 0; padding-top: 36px; position: static; }
  .flow-grid { grid-template-columns: 1fr; }
  .flow-grid > div { margin-right: 0; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip > div { border-right: none; border-bottom: 1px solid var(--inner-hairline); }
  .stat-strip > div:last-child { border-bottom: none; }
  .voice-cols { grid-template-columns: 1fr; }
  .voice-cols > div:first-child { border-right: none; border-bottom: 1px solid var(--inner-hairline); }
  .page-hero { padding: 48px 0 32px; }
}

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

/* ---------- Pocket Studio demo (home care) ---------- */

.ps-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 64px;
  align-items: start;
}
.ps-visual { display: flex; flex-direction: column; gap: 20px; }
.ps-phone { max-width: 400px; width: 100%; }

.ps-thread {
  padding: 14px 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 480px;
  overflow: hidden;
  position: relative;
}

.ps-msg {
  max-width: 86%;
  border: 1px solid var(--card-border);
  background: #FFFDF8;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  display: none;
}
@keyframes psMsgIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.ps-msg.is-shown { display: block; animation: psMsgIn 600ms ease both; }
.ps-msg p { margin: 0; }
.ps-out { align-self: flex-end; background: var(--cream); }
.ps-in  { align-self: flex-start; }
.ps-meta {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: right;
}
.ps-photo { width: 100%; margin-bottom: 8px; display: block; }

.ps-typing { padding: 12px 16px; }
.ps-typing.is-shown { display: flex; gap: 5px; }
.ps-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--muted);
  animation: psDot 1.1s infinite ease-in-out;
}
.ps-dot:nth-child(2) { animation-delay: 0.18s; }
.ps-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes psDot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

.ps-consent p { color: var(--ink); }
.ps-tick { color: var(--brass); font-weight: 600; margin-right: 4px; }

.ps-postcard { border: 1px solid var(--card-border); background: var(--cream-light); margin-bottom: 8px; }
.ps-postcard-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid var(--inner-hairline);
}
.ps-brand { font-family: var(--serif); font-size: 12px; font-weight: 600; }
.ps-brandmark {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--oxblood); color: var(--cream);
  font-family: var(--serif); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.ps-postcard img { width: 100%; display: block; }
.ps-postcopy { padding: 9px 10px; font-size: 11.5px; line-height: 1.5; color: var(--ink); }
.ps-draftline { margin: 0 0 8px; }

.ps-actions { display: flex; gap: 8px; }
.ps-btn {
  font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 7px 14px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--cream);
  cursor: default;
  transition: background 300ms ease, color 300ms ease;
}
.ps-btn-quiet { background: transparent; color: var(--ink); }
.ps-btn.is-tapped { background: var(--oxblood); border-color: var(--oxblood); }

.ps-final .ps-meta { text-align: left; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.ps-final .ps-meta.is-live { color: var(--oxblood); }

@media (max-width: 900px) {
  .ps-grid { grid-template-columns: 1fr; gap: 40px; }
  /* Grid items default to min-width:auto, so an unwrappable row inside
     (the Drafted / Approved / Published strip) sets the column's floor and
     pushes the whole page sideways on a phone. */
  .ps-grid > * { min-width: 0; }
  .hv-steps { flex-wrap: wrap; gap: 10px 12px; }
  .ps-phone { max-width: 360px; }
  .ps-thread { height: 440px; }
}

/* Pocket Studio v2: checks, caption caret, platform chips */
.ps-checks .ps-check {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 380ms ease, transform 380ms ease;
  margin: 0 0 6px;
}
.ps-checks .ps-check:last-child { margin-bottom: 0; }
.ps-checks .ps-check.is-shown { opacity: 1; transform: none; }

.ps-caret {
  display: inline-block;
  width: 1px; height: 12px;
  background: var(--ink);
  vertical-align: -2px;
  margin-left: 1px;
  animation: caretBlink 1s step-end infinite;
}
.ps-caret.is-hidden { display: none; }

.ps-platforms { display: flex; gap: 6px; margin-top: 7px; }
.ps-platform {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--card-border);
  color: var(--muted);
  transition: color 300ms ease, border-color 300ms ease;
}
.ps-platform.is-live { color: var(--oxblood); border-color: var(--oxblood); }
.ps-platform.is-live::after { content: " ✓"; }

/* Screenshot/test mode: transitions collapse so mid-animation states render */
.ps-instant .ps-msg.is-shown { animation-duration: 0ms; }

/* Pocket Studio v3: face-blur patch + hashtags */
.ps-imgwrap { position: relative; }
.ps-blur-patch {
  position: absolute;
  left: 15.5%; top: 26.5%;
  width: 15%; height: 27%;
  border-radius: 50%;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}
.ps-hashtags {
  display: block;
  margin-top: 7px;
  color: var(--oxblood);
  font-weight: 500;
  opacity: 0;
  transition: opacity 450ms ease;
}
.ps-hashtags.is-shown { opacity: 1; }
.ps-instant .ps-hashtags { transition-duration: 0ms; }

.ps-buildtag { margin: 0; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Chat bubbles size to their content — the tile-oriented height:100% on
   .demo-photo inflates images past the bubble and over the next message. */
.ps-visual .demo-photo { height: auto; }

/* ── Software pages ─────────────────────────────────────────────────────── */

/* A second action next to .btn, quieter so the primary one still leads. */
.btn-quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--card-border);
}
/* .btn:hover forces cream text for the solid variant. Without re-stating the
   colour here the quiet button's label turned cream on a cream ground and
   disappeared the moment you hovered it. */
.btn-quiet:hover { border-color: var(--oxblood); background: transparent; color: var(--ink); }

/* What the stack costs bought separately, against one subscription. */
.price-compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: 28px;
  font-size: 15px;
}
.price-compare caption {
  caption-side: bottom;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
}
.price-compare th,
.price-compare td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--inner-hairline);
}
.price-compare thead th {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.price-compare td:last-child,
.price-compare tfoot th + td { text-align: right; font-variant-numeric: tabular-nums; }
.price-compare tfoot th { font-weight: 600; }
.price-compare tfoot tr:first-child th,
.price-compare tfoot tr:first-child td { border-top: 1px solid var(--brass-hairline); }

/* The line the whole table exists to make. */
.compare-ours th,
.compare-ours td {
  background: var(--cream-light);
  color: var(--oxblood);
  font-weight: 600;
  border-bottom: none;
}

@media (max-width: 620px) {
  .price-compare { font-size: 14px; }
  .price-compare th, .price-compare td { padding: 11px 10px; }
}

/* ── Live demo: a rota export being scanned ─────────────────────────────── */
.demo-stage {
  background: var(--cream-light);
  border: 1px solid var(--card-border);
  padding: 0;
  overflow: hidden;
}
.demo-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--inner-hairline);
  font-family: var(--sans); font-size: 12px; color: var(--muted);
  letter-spacing: 0.04em;
}
.demo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.demo-scanning { margin-left: auto; font-variant-numeric: tabular-nums; }

.demo-rows { font-family: var(--sans); font-size: 13.5px; }
.demo-row {
  display: grid;
  grid-template-columns: 1fr 92px 116px;
  gap: 12px; align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--inner-hairline);
  opacity: 0.28;
  transition: opacity 260ms ease, background 260ms ease;
}
.demo-row.is-seen { opacity: 1; }
.demo-row.is-gap { background: rgba(140, 30, 40, 0.05); }
.demo-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.demo-who { font-weight: 500; }
.demo-row.is-gap .demo-who { color: var(--oxblood); font-weight: 600; }

.demo-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 16px 18px;
  font-family: var(--sans); font-size: 13px; color: var(--muted);
}
.demo-count {
  font-family: var(--serif); font-size: 30px; line-height: 1;
  color: var(--oxblood); font-variant-numeric: tabular-nums;
}
.demo-action {
  margin-left: auto; opacity: 0;
  transform: translateY(4px);
  transition: opacity 400ms ease, transform 400ms ease;
  font-weight: 600; color: var(--ink);
}
.demo-action.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .demo-row, .demo-action { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 620px) {
  .demo-row { grid-template-columns: 1fr 70px; }
  .demo-cover { display: none; }
}

/* ── Software hero: claim on the left, proof on the right ───────────────── */
.sw-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
  padding: 84px 0 72px;
}
.sw-hero h1 { margin: 14px 0 18px; }
.sw-hero .body-lg { max-width: 46ch; }

.sw-panel {
  background: var(--cream-light);
  border: 1px solid var(--card-border);
  padding: 30px 32px 26px;
}
.sw-panel-head {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 18px; border-bottom: 1px solid var(--inner-hairline);
}
.sw-panel-head .demo-dot { align-self: center; }

.sw-metrics { display: grid; gap: 22px; padding-top: 24px; }
.sw-metric { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: baseline; }
.sw-metric-label {
  font-family: var(--sans); font-size: 13px; color: var(--muted);
}
.sw-metric-value {
  font-family: var(--serif); font-size: 40px; line-height: 1;
  color: var(--oxblood); font-variant-numeric: tabular-nums;
}
.sw-metric-bar {
  grid-column: 1 / -1;
  height: 3px; background: var(--inner-hairline); position: relative; overflow: hidden;
}
.sw-metric-bar span {
  position: absolute; inset: 0 100% 0 0;
  background: var(--brass);
  transition: inset 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sw-metric-bar.is-in span { inset: 0 var(--rest, 35%) 0 0; }

.sw-panel-foot {
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--inner-hairline);
  font-family: var(--sans); font-size: 12px; color: var(--muted);
}

/* ── The full catalogue, compact ────────────────────────────────────────── */
.cat-group {
  scroll-margin-top: 124px; margin-top: 40px; }
.cat-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 12px; margin-bottom: 0;
  border-bottom: 1px solid var(--brass-hairline);
}
.cat-head h3 { margin: 0; font-size: 19px; }
.cat-head span {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.cat-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--inner-hairline);
}
.cat-item {
  padding: 18px 20px;
  border-right: 1px solid var(--inner-hairline);
  border-bottom: 1px solid var(--inner-hairline);
  transition: background 180ms ease;
}
.cat-item:hover { background: var(--cream-light); }
.cat-item b {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 17px; color: var(--ink); margin-bottom: 4px;
}
.cat-item span {
  font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--muted);
}

@media (max-width: 900px) {
  .sw-hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 48px; }
  .cat-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .cat-list { grid-template-columns: 1fr; }
  .sw-metric-value { font-size: 34px; }
}

/* ── Home: one claim, stated in three figures ──────────────────────────── */
.home-hero { padding: 84px 0 64px; }
.home-hero h1 {
  margin: 0;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 26ch;
  text-wrap: balance;
}
.home-hero .eyebrow { margin-bottom: 26px; }
.home-hero .hero-sub { max-width: 60ch; margin-top: 28px; }

.home-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--brass-hairline);
  border-bottom: 1px solid var(--brass-hairline);
  margin-top: 44px;
}
.home-figure {
  padding: 32px 34px;
  border-right: 1px solid var(--inner-hairline);
}
.home-figure:first-child { padding-left: 0; }
.home-figure:last-child { border-right: none; }
.home-figure .fig {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(44px, 4.4vw, 60px);
  line-height: 1;
  color: var(--oxblood);
  font-variant-numeric: tabular-nums;
}
.home-figure .lab {
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
  max-width: 24ch;
}
.home-figures .sw-metric-bar { margin-top: 18px; }
.home-note {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
}

/* ── Home: the four things it takes off the pile ───────────────────────── */
.group-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 36px; }
.group-card {
  padding: 0 30px 6px;
  border-right: 1px solid var(--brass-hairline);
}
.group-card:first-child { padding-left: 0; }
.group-card:last-child { padding-right: 0; border-right: none; }
.group-card .count {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brass);
}
.group-card h3 { margin: 0 0 14px; font-size: 21px; font-weight: 500; }
.group-card h3 a { color: var(--ink); }
.group-card h3 a:hover { color: var(--oxblood); }
.group-card ul { margin: 0; padding: 0; list-style: none; }
.group-card li {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.75;
  color: var(--body);
}

@media (max-width: 900px) {
  .home-hero { padding: 60px 0 48px; }
  .home-figures { grid-template-columns: 1fr; }
  .home-figure { padding: 24px 0; border-right: none; border-bottom: 1px solid var(--inner-hairline); }
  .home-figure:last-child { border-bottom: none; }
  .group-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
  .group-card { padding: 0 24px; }
  .group-card:nth-child(2n) { border-right: none; padding-right: 0; }
  .group-card:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 620px) {
  .group-grid { grid-template-columns: 1fr; }
  .group-card { padding: 0; border-right: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v2 SYSTEM — product-led sections.

   The 19-tool grid read as a catalogue, so the page is rebuilt the way
   software sites are: the interface carries the claim and the copy gets
   out of its way. Two rules hold it together.

   1. Fraunces is reserved for brand moments — the wordmark, the hero, the
      closing line. Section headings are sans at 30-34px. A page of 48px
      serif statements is what made this feel shouty.
   2. One sentence per section. Everything else is a bullet or a number.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Not black. A near-black carrying the same red as the oxblood, so the
     band reads as the brand's own ink rather than a black rectangle. */
  /* A warm dark, not a tinted black. The previous value put GREEN as the
     lowest channel, which is what produced the plum/magenta wash over the
     dark sections. Here blue is lowest and green sits between, so it reads
     as a warm neutral that belongs next to the cream and lets the oxblood
     accent do the colour work on its own. Text contrast is unchanged
     (13.93:1 vs 13.96:1). */
  --ink-deep: #211E1A;
  --ink-deep-2: #2A2622;
  --hairline-deep: #3B362F;
  --on-deep: #F0EAE7;
  --on-deep-muted: #A99D98;
  --accent-deep: #D9909A;
}

/* ── Section headings: sans, tighter, quieter ──────────────────────────── */
.s-head { max-width: 58ch; }
.s-eyebrow {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Brass is reserved for the wordmark dot and hairlines. Gold text on ink
     read as luxury branding rather than software. */
  color: var(--muted);
}
.s-title {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(26px, 2.5vw, 34px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.s-lede {
  margin: 16px 0 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  max-width: 54ch;
}

/* ── Alternating deep-dive: words one side, product the other ──────────── */
.feat {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: center;
  padding: 92px 0;
  border-top: 1px solid var(--brass-hairline);
}
/* Flipping the sides has to flip the column widths too, or the frame lands
   in the narrow column and the second deep-dive renders smaller than the
   other two. */
.feat.is-flipped { grid-template-columns: 7fr 5fr; }
.feat.is-flipped .feat-words { order: 2; }
.feat.is-flipped .feat-visual { order: 1; }

.feat-points { margin: 26px 0 0; padding: 0; list-style: none; }
.feat-points li {
  position: relative;
  padding: 9px 0 9px 22px;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body);
  border-bottom: 1px solid var(--inner-hairline);
}
.feat-points li:last-child { border-bottom: none; }
.feat-points li::before {
  content: "";
  position: absolute; left: 0; top: 17px;
  width: 9px; height: 1px;
  background: var(--card-border);
}
.band-deep .feat-points li::before { background: #524C42; }
.feat-more {
  display: inline-block; margin-top: 22px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  color: var(--oxblood);
  border-bottom: 1px solid #6B1F2A55; padding-bottom: 2px;
}

/* ── The product frame ─────────────────────────────────────────────────── */
.appwin {
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  display: grid;
  grid-template-rows: auto 1fr;
  font-family: var(--sans);
  overflow: hidden;
}
.appwin-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--cream-light);
  border-bottom: 1px solid var(--inner-hairline);
}
.appwin-dot { width: 8px; height: 8px; border-radius: 50%; background: #DED6C4; }
.appwin-url {
  margin-left: 10px;
  font-size: 11px; color: var(--muted); letter-spacing: 0.02em;
  background: #FFF; border: 1px solid var(--inner-hairline);
  padding: 3px 12px; border-radius: 999px;
}
.appwin-body { display: grid; grid-template-columns: 176px 1fr; min-height: 340px; }

.appwin-rail {
  background: var(--cream-light);
  border-right: 1px solid var(--inner-hairline);
  padding: 16px 0;
}
.rail-group {
  margin: 0 14px 6px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.rail-group:not(:first-child) { margin-top: 16px; }
.rail-item {
  display: block; padding: 5px 14px;
  font-size: 12px; color: var(--body); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.rail-item.is-on {
  background: #FFF; color: var(--oxblood); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--oxblood);
}

.appwin-main { padding: 20px 22px; min-width: 0; }
.appwin-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--inner-hairline);
}
.appwin-head .appwin-title {
  margin: 0; font-family: var(--sans);
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.appwin-head .meta { margin-left: auto; font-size: 11px; color: var(--muted); }

/* Status pills inside the frame */
.pill {
  display: inline-block; padding: 2px 9px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  border-radius: 999px; white-space: nowrap;
}
.pill-due    { background: #F7EDEE; color: var(--oxblood); }
.pill-ok     { background: #EFF1EA; color: #5A6B4A; }
.pill-soon   { background: #F7F1E2; color: #8A6D24; }

/* Overview tiles */
.win-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.win-tile { border: 1px solid var(--inner-hairline); padding: 14px 15px; }
.win-tile .n {
  margin: 0; font-family: var(--serif); font-size: 30px; line-height: 1;
  color: var(--oxblood); font-variant-numeric: tabular-nums;
}
.win-tile .t { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }

/* Rows: the shared table look inside every frame */
.win-rows { display: grid; }
.win-row {
  display: grid; align-items: center; gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--inner-hairline);
  font-size: 12.5px; color: var(--body);
}
.win-row:last-child { border-bottom: none; }
.win-row strong { font-weight: 600; color: var(--ink); }
.win-row .num { font-variant-numeric: tabular-nums; color: var(--muted); }
.win-row-3 { grid-template-columns: 1fr auto auto; }
.win-row-4 { grid-template-columns: 1.4fr 1fr auto auto; }

/* Progress bars (Care Certificate) */
.win-bar { height: 4px; background: var(--inner-hairline); width: 84px; position: relative; }
.win-bar i { position: absolute; inset: 0 auto 0 0; background: var(--brass); display: block; }

/* ── Dark band: the frames sit better against ink ──────────────────────── */
.band-deep {
  background: var(--ink-deep);
  color: var(--on-deep);
  margin-top: 0;
  padding: 96px 0;
}
.band-deep .s-title { color: var(--on-deep); }
.band-deep .s-lede { color: var(--on-deep-muted); }
.band-deep .s-eyebrow { color: var(--on-deep-muted); }
.band-deep .feat { border-top-color: var(--hairline-deep); }
.band-deep .feat:first-of-type { border-top: none; padding-top: 0; }
.band-deep .feat-points li { color: var(--on-deep-muted); border-bottom-color: #332F28; }
.band-deep .feat-more { color: var(--accent-deep); border-bottom-color: #D9909A55; }
.band-deep .appwin { border-color: var(--hairline-deep); }

/* ── Three pillars ─────────────────────────────────────────────────────── */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--brass-hairline); margin-top: 44px; }
.pillar { background: var(--cream); padding: 30px 30px 34px; }
.pillar .p-count {
  margin: 0 0 16px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.pillar h3 {
  margin: 0 0 12px; font-family: var(--sans);
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
.pillar p { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--body); }

/* ── Proof rail: three figures, one line, not a whole screen ───────────── */
.proof {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--brass-hairline);
  border-bottom: 1px solid var(--brass-hairline);
}
.proof > div { padding: 24px 28px; border-right: 1px solid var(--inner-hairline); }
.proof > div:first-child { padding-left: 0; }
.proof > div:last-child { border-right: none; }
.proof .pn {
  margin: 0; font-family: var(--serif); font-size: 34px; line-height: 1;
  color: var(--oxblood); font-variant-numeric: tabular-nums;
}
.proof .pl { margin: 8px 0 0; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 26ch; }

@media (max-width: 1000px) {
  .feat, .feat.is-flipped { grid-template-columns: 1fr; gap: 36px; padding: 64px 0; }
  .feat.is-flipped .feat-words { order: 1; }
  .feat.is-flipped .feat-visual { order: 2; }
  .pillars { grid-template-columns: 1fr; }
  .appwin-body { grid-template-columns: 1fr; }
  .appwin-rail { display: none; }
}
@media (max-width: 620px) {
  .proof { grid-template-columns: 1fr; }
  .proof > div { padding: 20px 0; border-right: none; border-bottom: 1px solid var(--inner-hairline); }
  .proof > div:last-child { border-bottom: none; }
  .win-tiles { grid-template-columns: 1fr; }
  .band-deep { padding: 64px 0; }
}

/* ── v2 hero: claim left, the actual product right ─────────────────────── */
.home-hero {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
  /* Room below for the ambient field to breathe rather than be clipped. */
  padding: 76px 0 104px;
}
.home-hero h1 {
  margin: 0;
  font-size: clamp(36px, 3.9vw, 54px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.home-hero .eyebrow { margin-bottom: 22px; }
.home-hero .hero-sub {
  margin-top: 24px;
  font-size: 17.5px;
  max-width: 44ch;
}
.home-hero .hero-ctas { margin-top: 32px; }

/* The frame overhangs the container slightly — it reads as a real window
   rather than a picture pasted into a column. */
.hero-frame { margin-right: -24px; }

.proof-wrap { padding-bottom: 8px; }
.proof-wrap .home-note { margin-top: 14px; }

/* A dark band inside the container has to break out to full width. */
.band-deep {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* The section above already carries 96px of bottom padding — adding more
     here opened a dead gap before the band. */
  margin-top: 0;
}
.band-deep > .container { padding: 0 56px; }

/* The section rule above the price block would double up under the band. */
.band-deep + .section { border-top: none; padding-top: 88px; }

@media (max-width: 1000px) {
  .home-hero { grid-template-columns: 1fr; gap: 40px; padding: 52px 0 56px; }
  .hero-frame { margin-right: 0; }
}
@media (max-width: 720px) {
  .container { padding: 0 24px; }
  .band-deep > .container { padding: 0 24px; }
  .split { grid-template-columns: 1fr; gap: 24px; }
}

/* The rail is taller than most panels, which left a slab of white under the
   content. Anchor a status line to the bottom of the panel instead. */
.appwin-main { display: flex; flex-direction: column; }
.win-foot {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--inner-hairline);
  font-size: 11px; color: var(--muted);
}
.win-foot .r { margin-left: auto; }
.win-foot b { font-weight: 600; color: var(--body); font-variant-numeric: tabular-nums; }
.rail-item { padding: 4px 14px; }

/* Named tools inside a deep-dive list: the name carries, the gloss follows. */
.feat-named li b { color: var(--ink); font-weight: 600; }
.band-deep .feat-named li b { color: var(--on-deep); }

/* The rota demo lives in the dark band now. */
.feat-demo { padding: 0 0 8px; max-width: 860px; }
.feat-demo .s-title { margin-bottom: 26px; }
.band-deep .demo-caption { color: var(--on-deep-muted); }
.band-deep .feat-demo { border-top: 1px solid var(--hairline-deep); padding-top: 80px; margin-top: 80px; }

/* Anchor targets sit under the sticky header.
   The header is sticky (in flow) and its padding shrinks on scroll, so the
   document gets ~28px shorter mid-jump and content slides up under the bar.
   The offset therefore has to cover the SHRUNK header plus that collapse,
   not just the header height. */
:where(.feat, section, div)[id] { scroll-margin-top: 124px; }

/* ── Ambient hero field ────────────────────────────────────────────────── */
.hero-band {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  border-bottom: 1px solid var(--brass-hairline);
}
.hero-band-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}
.ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  /* A soft vignette rather than a directional fade: a one-sided mask hid the
     field exactly where the product window sits, so nothing read. At this
     alpha it carries the whole band and type still sits cleanly on top. */
  -webkit-mask-image: radial-gradient(130% 115% at 50% 45%, #000 30%, #000 62%, transparent 100%);
          mask-image: radial-gradient(130% 115% at 50% 45%, #000 30%, #000 62%, transparent 100%);
}
@media (max-width: 1000px) {
  .hero-band-inner { padding: 0 24px; }
  .ambient { opacity: 0.55; }
}
@media (max-width: 720px) { .hero-band-inner { padding: 0 24px; } }

/* The same field on ink, behind the deep-dives. */
.band-deep { position: relative; }
.band-deep > .container { position: relative; z-index: 1; }
.ambient-deep {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 40%, transparent 100%);
}

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

/* ── Coverage matrix: the software page's hero visual ──────────────────── */
.sw-hero { align-items: center; }
.matrix-wrap { position: relative; }
.matrix {
  display: block;
  width: 100%;
  height: 460px;
}
.matrix-cap {
  margin: 18px 0 0;
  font-family: var(--sans); font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 16px;
}
.matrix-cap span { display: flex; align-items: center; gap: 7px; }
.matrix-cap i {
  width: 9px; height: 9px; display: block; border: 1px solid var(--card-border);
}
.matrix-cap i.filled { background: #D9D0BE; border-color: #D9D0BE; }
.matrix-cap i.gap { background: var(--oxblood); border-color: var(--oxblood); }

@media (max-width: 1000px) { .matrix { height: 300px; } }


/* ── Scroll behaviour ──────────────────────────────────────────────────── */

/* Hidden state is applied BY JS, never by default. Hiding these in CSS
   means one script error blanks every product frame on the page — the same
   trap the [data-reveal] code already avoids. */
.will-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Deep-dive lists arrive a line at a time. */
.feat-points.will-reveal li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.feat-points.will-reveal { opacity: 1; transform: none; }
.feat-points.is-in li { opacity: 1; transform: none; }

/* Frames settle into place rather than appearing. */
.appwin.will-reveal {
  transform: translateY(22px) scale(0.988);
  transform-origin: 50% 30%;
  transition: opacity 760ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.appwin.is-in { opacity: 1; transform: none; }

/* A hairline that tracks how far through the band you are. */
.band-rail {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 2px; background: rgba(240,234,231,0.07); z-index: 2; pointer-events: none;
}
.band-rail span {
  position: absolute; top: 0; left: 0; right: 0; height: 0;
  background: var(--accent-deep);
}

@media (prefers-reduced-motion: reduce) {
  .will-reveal,
  .feat-points.will-reveal li,
  .appwin.will-reveal { opacity: 1; transform: none; transition: none; }
  .band-rail { display: none; }
}

/* ── Cost calculator, second attempt ───────────────────────────────────
   Shaped like the panel that used to sit in the software hero, because
   that was the version people could read at a glance. One control, three
   figures, and the eight sourced line items behind a disclosure. */
.calc2 {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  /* Row 2 absorbs the slack, so the disclosure sits under the readout
     instead of being pushed to the bottom of the taller panel. */
  grid-template-rows: auto 1fr;
  gap: 28px 64px;
  align-items: start;
  margin-top: 44px;
}
.calc2-control { padding-top: 8px; }
.calc2-control label {
  display: block; margin-bottom: 18px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.calc2-control input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; background: var(--card-border); outline-offset: 8px;
}
.calc2-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--oxblood); border: 4px solid var(--cream); cursor: grab;
}
.calc2-control input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--oxblood); border: 4px solid var(--cream); cursor: grab;
}
.calc2-readout {
  margin: 18px 0 0;
  font-family: var(--sans); font-size: 15px; color: var(--body);
}
.calc2-readout b {
  font-family: var(--serif); font-size: 30px; font-weight: 400;
  color: var(--oxblood); font-variant-numeric: tabular-nums; margin-right: 4px;
}
.calc2-readout span { color: var(--muted); }

.calc2-panel { grid-row: span 2; }
.sw-metric.is-save .sw-metric-value { color: var(--ink); }
.calc2-panel .sw-metric-bar span { transition: width 480ms cubic-bezier(0.16, 1, 0.3, 1); }
.calc2-panel .sw-metric-bar.is-in span { inset: auto; position: static; display: block; height: 100%; }

.calc2-detail { grid-column: 1; margin-top: 4px; }
.calc2-detail summary {
  cursor: pointer; list-style: none;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  color: var(--oxblood); padding-bottom: 3px;
  border-bottom: 1px solid #6B1F2A55; display: inline-block;
}
.calc2-detail summary::-webkit-details-marker { display: none; }
.calc2-detail summary::after { content: " ↓"; }
.calc2-detail[open] summary::after { content: " ↑"; }
.calc2-table {
  width: 100%; border-collapse: collapse; margin-top: 22px;
  font-family: var(--sans); font-size: 13.5px;
}
.calc2-table th {
  text-align: left; padding: 0 12px 9px 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--brass-hairline);
}
.calc2-table th:last-child, .calc2-table td:last-child { text-align: right; padding-right: 0; }
.calc2-table td {
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--inner-hairline);
  color: var(--body); vertical-align: baseline;
}
.calc2-table td:last-child { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.calc2-none td { color: var(--muted); }

@media (max-width: 900px) {
  .calc2 { grid-template-columns: 1fr; gap: 32px; }
  .calc2-panel { grid-row: auto; }
  .calc2-detail { grid-column: auto; }
}
@media (max-width: 620px) {
  .calc2-table { font-size: 12.5px; }
  .calc2-table td { padding: 9px 8px 9px 0; }
}

/* ── Dark hero: centred, with the field behind it ──────────────────────── */
.hero-dark {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--ink-deep);
  color: var(--on-deep);
  overflow: hidden;
  isolation: isolate;
}
.hero-dark-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 32px 132px;
  text-align: center;
}
.hero-dark .s-eyebrow { color: var(--on-deep-muted); }
.hero-dark h1 {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--on-deep);
  text-wrap: balance;
}
.hero-dark p.lede {
  margin: 0 auto;
  max-width: 52ch;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.68;
  color: var(--on-deep-muted);
}
.hero-dark .hero-ctas { justify-content: center; margin-top: 40px; }
.hero-dark .btn-quiet {
  color: var(--on-deep);
  border-color: rgba(240,234,231,0.26);
}
.hero-dark .btn-quiet:hover {
  color: var(--on-deep);
  border-color: rgba(240,234,231,0.55);
  background: rgba(240,234,231,0.04);
}
.contour {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 0; pointer-events: none;
  /* Clear through the middle. Centre-weighted lines ran straight through
     the centred copy and read as strike-through. */
  -webkit-mask-image: radial-gradient(ellipse 64% 62% at 50% 50%, transparent 12%, rgba(0,0,0,0.35) 46%, #000 76%);
          mask-image: radial-gradient(ellipse 64% 62% at 50% 50%, transparent 12%, rgba(0,0,0,0.35) 46%, #000 76%);
}

@media (max-width: 720px) {
  .hero-dark-inner { padding: 92px 24px 88px; }
}

/* ── Premium pass on the ink band ──────────────────────────────────────
   Flat white cards on a dark ground read as pasted-in screenshots. Giving
   the frames a warm surface and a light top edge models them as objects
   without resorting to a drop shadow, which the brand does not use. */
.band-deep .appwin,
.hero-dark .appwin {
  background: #FBF8F3;
  border-color: rgba(240,234,231,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 0 rgba(240,234,231,0.06),
    0 24px 60px -30px rgba(0,0,0,0.65);
}
.band-deep .appwin-bar { background: #F5F0E7; }
.band-deep .demo-stage {
  background: #FBF8F3;
  border-color: rgba(240,234,231,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 24px 60px -30px rgba(0,0,0,0.65);
}

/* Tighter optical setting on the big sans headings — the single cheapest
   thing that separates considered software typography from default. */
.s-title { letter-spacing: -0.021em; }
.band-deep .s-title { letter-spacing: -0.023em; }

/* ── Header over a dark hero ──────────────────────────────────────────
   On pages that open on ink, a cream bar sits on top of the hero like a
   slab. The header takes the hero's colour until you scroll, then becomes
   the normal cream bar over cream content. Colour only — no layout change,
   so nothing about the sticky behaviour shifts. */
.site-header.can-overlay {
  transition: background 260ms ease, border-color 260ms ease;
}
.site-header.can-overlay:not(.is-scrolled) {
  background: var(--ink-deep);
  border-bottom-color: transparent;
}
.site-header.can-overlay:not(.is-scrolled) .wordmark,
.site-header.can-overlay:not(.is-scrolled) .main-nav a,
.site-header.can-overlay:not(.is-scrolled) .header-phone,
.site-header.can-overlay:not(.is-scrolled) .menu-toggle {
  color: var(--on-deep);
}
.site-header.can-overlay:not(.is-scrolled) .main-nav a.is-active,
.site-header.can-overlay:not(.is-scrolled) .main-nav a:hover,
.site-header.can-overlay:not(.is-scrolled) .header-phone:hover {
  color: var(--accent-deep);
}
.site-header.can-overlay:not(.is-scrolled) .main-nav a {
  background-image: linear-gradient(var(--accent-deep), var(--accent-deep));
}
.site-header.can-overlay:not(.is-scrolled) .menu-toggle { border-color: rgba(240,234,231,0.3); }
.site-header.can-overlay:not(.is-scrolled) .btn-small {
  background: var(--on-deep);
  color: var(--ink-deep);
}
.site-header.can-overlay:not(.is-scrolled) .btn-small:hover {
  background: #FFF;
  color: var(--ink-deep);
}

/* ── The window that straddles the hero edge ───────────────────────────
   The product frame sits half in the dark hero and half on the cream
   below it. It is the one place the two grounds meet, which makes the
   screen the seam rather than a hard colour change. */
.hero-shelf {
  position: relative;
  z-index: 2;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 56px;
  /* Pull up into the hero by roughly half the frame's height. */
  margin-top: -190px;
}
.hero-shelf .appwin {
  background: #FBF8F3;
  border-color: rgba(36,28,33,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 40px 90px -40px rgba(36,28,33,0.55);
}
/* Give the hero the extra room the overlap borrows back. */
.hero-dark.has-shelf .hero-dark-inner { padding-bottom: 236px; }

@media (max-width: 1000px) {
  .hero-shelf { margin-top: -120px; padding: 0 24px; }
  .hero-dark.has-shelf .hero-dark-inner { padding-bottom: 160px; }
}
@media (max-width: 620px) {
  .hero-shelf { margin-top: -72px; }
  .hero-dark.has-shelf .hero-dark-inner { padding-bottom: 108px; }
}

/* ── Radius, used once and on purpose ─────────────────────────────────
   The brand is hard-cornered and that is not a lesser choice — square
   reads editorial, rounded reads software. The one place the argument
   goes the other way is the product frame: it is a WINDOW, and real
   windows have rounded corners. Rounding it makes it read as a screen
   rather than a picture of one. Everything else stays square. */
.appwin { border-radius: 10px; }
.appwin-bar { border-radius: 10px 10px 0 0; }

/* ── Keyboard focus ────────────────────────────────────────────────────
   There were no focus styles at all. Anything interactive now shows a
   visible ring that works on both grounds. */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
  border-radius: 2px;
}
.band-deep :where(a, button, summary, input, [tabindex]):focus-visible,
.hero-dark :where(a, button, summary, input, [tabindex]):focus-visible,
.site-header.can-overlay:not(.is-scrolled) :where(a, button):focus-visible {
  outline-color: var(--accent-deep);
}
/* Skip-to-content for keyboard and screen-reader users. */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--oxblood); color: var(--cream);
  padding: 10px 18px; font-family: var(--sans); font-size: 14px; font-weight: 600;
  transition: top 160ms ease;
}
.skip-link:focus { top: 16px; color: var(--cream); }

/* ── Software page hero: a section header, not a second front door ────
   Same treatment as the homepage so the brand holds, but tighter, and it
   carries an index into the four groups below. The homepage hero sells;
   this one orients. */
.hero-dark.is-section .hero-dark-inner {
  max-width: 900px;
  padding: 104px 32px 0;
}
.hero-dark.is-section h1 { font-size: clamp(36px, 4.2vw, 56px); }
.hero-dark.is-section p.lede { font-size: 17px; }

.hero-index {
  position: relative;
  z-index: 1;
  max-width: 1060px;
  margin: 72px auto 0;
  padding: 0 32px 96px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
/* Cell borders rather than a background showing through the gaps — the
   gap trick painted the wrapper's padding as a grey slab. */
.hero-index a {
  padding: 26px 22px 30px;
  display: block;
  color: var(--on-deep);
  border-top: 1px solid var(--hairline-deep);
  border-left: 1px solid var(--hairline-deep);
  transition: background 200ms ease;
}
.hero-index a:last-child { border-right: 1px solid var(--hairline-deep); }
.hero-index a:hover { background: var(--ink-deep-2); color: var(--on-deep); }
.hero-index .n {
  display: block; margin-bottom: 12px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-deep-muted);
}
.hero-index .t {
  display: block; font-family: var(--sans); font-size: 16px;
  font-weight: 600; letter-spacing: -0.01em;
}
.hero-index .g {
  display: block; margin-top: 7px;
  font-family: var(--sans); font-size: 12.5px; line-height: 1.5;
  color: var(--on-deep-muted);
}

@media (max-width: 900px) {
  .hero-index { grid-template-columns: repeat(2, 1fr); padding: 0 24px 72px; margin-top: 48px; }
  .hero-index a:nth-child(2n) { border-right: 1px solid var(--hairline-deep); }
  .hero-dark.is-section .hero-dark-inner { padding: 80px 24px 0; }
}
@media (max-width: 560px) {
  .hero-index { grid-template-columns: 1fr; }
  .hero-index a { border-right: 1px solid var(--hairline-deep); }
  .hero-index a:last-child { border-bottom: 1px solid var(--hairline-deep); }
}

/* ── /software/: the reference page, deliberately quiet ───────────────
   The homepage is the grand one. This page is where someone who is
   already interested goes to read, so it is light, dense, left-aligned
   and carries no animation at all. */
.hero-lite {
  padding: 72px 0 0;
  border-bottom: 1px solid var(--brass-hairline);
}
.hero-lite-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  padding-bottom: 40px;
}
.hero-lite h1 {
  margin: 10px 0 16px;
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 18ch;
}
.hero-lite p.lede {
  margin: 0;
  max-width: 56ch;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
}
.hero-lite .hero-ctas { margin-top: 28px; }

/* A quiet index: four links on a rule, not a slab of cards. */
.tool-index {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--inner-hairline);
}
.tool-index a {
  display: block;
  padding: 18px 24px 20px 0;
  color: var(--ink);
  border-right: 1px solid var(--inner-hairline);
}
.tool-index a:last-child { border-right: none; }
.tool-index a:hover .t { color: var(--oxblood); }
.tool-index .n {
  display: block; margin-bottom: 6px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.tool-index .t {
  display: block; font-family: var(--sans); font-size: 15.5px;
  font-weight: 600; letter-spacing: -0.01em;
  transition: color 150ms ease;
}
/* Without this the index reads as four labels rather than four links. */
.tool-index .t::after {
  content: " \2193";
  color: var(--muted);
  font-weight: 400;
  display: inline-block;
  transition: transform 180ms ease, color 150ms ease;
}
.tool-index a:hover .t::after { color: var(--oxblood); transform: translateY(2px); }
/* On /software/ the index jumps down the page, so a down arrow is right.
   Where it links away to other pages, it has to point sideways. */
.tool-index.is-nav .t::after { content: " \2192"; }
.tool-index.is-nav a:hover .t::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .tool-index a:hover .t::after { transform: none; }
}
.tool-index a:not(:first-child) { padding-left: 24px; }

/* Deep-dives on cream for this page: tighter, and the frames get a light
   treatment rather than the ink-band one. */
.feats-lite .feat { padding: 72px 0; }
.feats-lite .feat:first-child { border-top: none; }
.feats-lite .appwin {
  background: #FFFFFF;
  border-color: var(--card-border);
  box-shadow: 0 18px 44px -28px rgba(36,28,33,0.28);
}
.feats-lite .appwin-bar { background: var(--cream-light); }

@media (max-width: 900px) {
  .hero-lite-inner { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .tool-index { grid-template-columns: repeat(2, 1fr); }
  .tool-index a { padding-left: 0 !important; padding-right: 20px; }
  .tool-index a:nth-child(2n) { border-right: none; }
  .tool-index a:nth-child(n+3) { border-top: 1px solid var(--inner-hairline); }
}
@media (max-width: 560px) {
  .tool-index { grid-template-columns: 1fr; }
  .tool-index a { border-right: none; border-top: 1px solid var(--inner-hairline); }
  .tool-index a:first-child { border-top: none; }
}

/* ── FAQ: an accordion, not a search result ──────────────────────────
   These were a bare +/− on a hairline, which is exactly the "People also
   ask" pattern. Now each question is a surface that lifts on hover, the
   marker is a thin rotating cross, and the open answer is held by an
   oxblood rule so you can see at a glance which one you opened. */
.faq-item {
  border-bottom: none;
  border: 1px solid var(--card-border);
  background: var(--cream-light);
  margin-bottom: 10px;
  transition: border-color 200ms ease, background 200ms ease;
}
.faq-item:hover { border-color: #D9CDB4; }
.faq-item[open] { border-color: var(--card-border); background: #FFFFFF; }

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--oxblood); }

/* A thin plus that becomes a minus. Drawn as two 1px bars so its weight
   matches the hairlines rather than the body font — and as two separate
   pseudo-elements, because rotating a single bar just makes a diagonal. */
.faq-item summary { position: relative; padding-right: 58px; }
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  background: var(--oxblood);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
}
.faq-item summary::before {           /* horizontal */
  width: 14px; height: 1px;
  margin-top: -0.5px;
}
.faq-item summary::after {            /* vertical, retracts on open */
  width: 1px; height: 14px;
  margin-top: -7px; margin-right: 6.5px;
}
.faq-item[open] summary::before { transform: rotate(180deg); }
.faq-item[open] summary::after  { transform: scaleY(0); opacity: 0; }

.faq-item p {
  margin: 0;
  padding: 0 24px 22px 25px;
  border-left: 2px solid var(--oxblood);
  margin-left: 24px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  max-width: 62ch;
  animation: faqIn 320ms ease both;
}
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::before,
  .faq-item summary::after { transition: none; }
  .faq-item p { animation: none; }
}

/* The calculator's disclosure gets the same marker language. */
.calc2-detail summary::after { content: " ↓"; transition: transform 220ms ease; display: inline-block; }
.calc2-detail[open] summary::after { content: " ↓"; transform: rotate(180deg); }

/* ── Every page closes on ink ────────────────────────────────────────
   Only the homepage had a dark moment, so the rest of the site read as
   lighter-weight. The closing CTA is now full-bleed ink everywhere —
   one dark beat per page, at the point of asking. */
.cta-band,
.section.contact#contact {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--ink-deep);
  color: var(--on-deep);
  border-top: none;
  padding-top: 92px;
  padding-bottom: 100px;
  /* Keep the content on the container's grid even though the band itself
     runs to the viewport edges. Centring only the first child left every
     other element pinned to the viewport edge instead. */
  padding-inline: max(56px, calc((100vw - 1280px) / 2 + 56px));
}

.cta-band h2,
.cta-band .s-title,
.section.contact#contact .contact-heading { color: var(--on-deep); }
.cta-band p,
.section.contact#contact .contact-body { color: var(--on-deep-muted); }

.cta-band .btn-quiet,
.section.contact#contact .btn-quiet {
  color: var(--on-deep);
  border-color: rgba(240,234,231,0.28);
}
.cta-band .btn-quiet:hover,
.section.contact#contact .btn-quiet:hover {
  color: var(--on-deep);
  border-color: rgba(240,234,231,0.6);
  background: rgba(240,234,231,0.04);
}
.cta-band .text-link,
.section.contact#contact .rail-value,
.section.contact#contact .rail-value.ink {
  color: var(--accent-deep);
  border-bottom-color: rgba(217,144,154,0.45);
}
.section.contact#contact .rail-label { color: var(--on-deep-muted); }
.section.contact#contact .contact-rail { border-left-color: var(--hairline-deep); }
.section.contact#contact .rail-value.ink { color: var(--on-deep); }

@media (max-width: 720px) {
  .cta-band, .section.contact#contact { padding-inline: 24px; }
}

/* ── Product window, refined ─────────────────────────────────────────
   Three changes, all about making it read as the product rather than a
   screenshot of a browser:
     · the fake address bar is gone, so the chrome is just a slim grip
     · depth comes from a layered shadow, not a rule sitting under it
     · a hairline ring inside the edge gives the glass a lit top edge  */
.appwin-bar {
  padding: 0 16px;
  height: 34px;
  align-items: center;
  background: linear-gradient(var(--cream-light), var(--cream-light));
  border-bottom: 1px solid var(--inner-hairline);
}
.appwin-dot { width: 7px; height: 7px; }

/* One shadow language, tuned per ground. */
.hero-shelf .appwin {
  border-color: rgba(36,28,33,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 2px 4px rgba(36,28,33,0.04),
    0 12px 24px -8px rgba(36,28,33,0.14),
    0 48px 96px -44px rgba(36,28,33,0.62);
}
.feats-lite .appwin {
  border-color: var(--card-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 4px rgba(36,28,33,0.03),
    0 10px 22px -10px rgba(36,28,33,0.10),
    0 34px 70px -40px rgba(36,28,33,0.34);
}
.band-deep .appwin {
  border-color: rgba(240,234,231,0.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 6px rgba(0,0,0,0.18),
    0 34px 80px -36px rgba(0,0,0,0.72);
}

/* The hero window sat on top of the next section's top rule, which read as
   a line drawn through it. The shadow does that job now. */
.hero-shelf + .section { border-top: none; }

/* A named tool in a deep-dive list can be a link without shouting. */
.feat-named li b a { color: inherit; border-bottom: 1px solid rgba(107,31,42,0.35); }
.feat-named li b a:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); }
.band-deep .feat-named li b a { border-bottom-color: rgba(217,144,154,0.4); }
.band-deep .feat-named li b a:hover { color: var(--accent-deep); }

/* With the mobile panel open the header must match it, not the hero. */
.site-header.can-overlay.nav-open,
.site-header.can-overlay.nav-open:not(.is-scrolled) {
  background: var(--cream);
  border-bottom-color: var(--brass-hairline);
}
.site-header.can-overlay.nav-open .wordmark,
.site-header.can-overlay.nav-open .main-nav a,
.site-header.can-overlay.nav-open .header-phone,
.site-header.can-overlay.nav-open .menu-toggle { color: var(--ink); }
.site-header.can-overlay.nav-open .menu-toggle { border-color: var(--card-border); }
.site-header.can-overlay.nav-open .btn-small { background: var(--oxblood); color: var(--cream); }

/* ── Enquiry form ─────────────────────────────────────────────────────
   Built to work with JavaScript off: it is a plain POST to /api/enquiry
   and the function redirects back with ?sent=1. The script only upgrades
   it to submit in place. */
.enquiry { border-top: 1px solid var(--brass-hairline); }
.enq { margin-top: 36px; max-width: 760px; }
.enq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}
.enq-field { margin: 0 0 22px; }
.enq-field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.enq-field label span { color: var(--oxblood); }
.enq-field input,
.enq-field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;              /* 16px stops iOS zooming on focus */
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream-light);
  border: 1px solid var(--card-border);
  padding: 13px 15px;
  transition: border-color 160ms ease, background 160ms ease;
}
.enq-field textarea { resize: vertical; min-height: 132px; }
.enq-field input:hover,
.enq-field textarea:hover { border-color: #D9CDB4; }
.enq-field input:focus,
.enq-field textarea:focus {
  outline: none;
  background: #FFF;
  border-color: var(--oxblood);
  box-shadow: 0 0 0 3px rgba(107,31,42,0.10);
}
.enq-field input[aria-invalid="true"],
.enq-field textarea[aria-invalid="true"] { border-color: var(--oxblood); }

/* Only ever seen by a bot. Off-screen rather than display:none, because
   some bots skip hidden fields but follow the tab order. */
.enq-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.enq-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.enq-actions .btn { border: none; cursor: pointer; font-family: var(--sans); }
.enq-actions .btn[disabled] { opacity: 0.55; cursor: default; }
.enq-note { font-family: var(--sans); font-size: 14px; color: var(--muted); }

.enq-status {
  margin: 0 0 26px;
  padding: 16px 18px;
  border: 1px solid var(--card-border);
  background: var(--cream-light);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}
.enq-status.is-good { border-left: 2px solid var(--oxblood); }
.enq-status.is-bad  { border-left: 2px solid var(--oxblood); background: #FBF3F3; color: var(--ink); }

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

/* ── Pricing ──────────────────────────────────────────────────────────
   One plan, so the page's job is not comparison between tiers but
   answering "what do I get and what does it cost" without hedging. */
/* The hero already closes with a hairline; the section rule above adds
   its own padding, which left a dead band before the toggle. */
.page-hero + .section { padding-top: 40px; }
.price-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--card-border);
  background: var(--cream-light);
  border-radius: 999px;
  margin-top: 0;
}
.price-toggle button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  padding: 9px 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: background 180ms ease, color 180ms ease;
}
.price-toggle button[aria-pressed="true"] { background: var(--oxblood); color: var(--cream); }
.price-toggle .save {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: #EFF1EA;
  color: #4F6039;
}
.price-toggle button[aria-pressed="true"] .save { background: rgba(255,255,255,0.16); color: var(--cream); }

.price-card {
  margin-top: 36px;
  border: 1px solid var(--card-border);
  background: var(--cream-light);
  padding: 40px 44px 44px;
  max-width: 720px;
}
.price-figure { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-figure .amount {
  font-family: var(--serif);
  font-size: clamp(54px, 6vw, 76px);
  line-height: 1;
  color: var(--oxblood);
  font-variant-numeric: tabular-nums;
}
.price-figure .per { font-family: var(--sans); font-size: 16px; color: var(--muted); }
.price-was {
  margin: 12px 0 0;
  font-family: var(--sans); font-size: 14px; color: var(--muted); min-height: 1.4em;
}
.price-was s { color: var(--muted); opacity: .75; }
.price-was b { color: var(--body); font-weight: 600; }
.price-note { margin: 26px 0 0; font-family: var(--sans); font-size: 14.5px; line-height: 1.7; color: var(--body); max-width: 52ch; }
.price-actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }

.price-includes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; margin-top: 40px; }
.price-includes ul { margin: 0; padding: 0; list-style: none; }
.price-includes li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-family: var(--sans); font-size: 14.5px; line-height: 1.5; color: var(--body);
  border-bottom: 1px solid var(--inner-hairline);
}
.price-includes li::before {
  content: "";
  position: absolute; left: 2px; top: 16px;
  width: 5px; height: 9px;
  border: solid var(--oxblood); border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}
.price-includes b { color: var(--ink); font-weight: 600; }

@media (max-width: 720px) {
  .price-card { padding: 30px 24px 34px; }
  .price-includes { grid-template-columns: 1fr; gap: 0; }
}

/* ── Enquiry dialog ───────────────────────────────────────────────────
   Native <dialog>: focus trapping, Esc and inertness come for free and
   are better than anything hand-rolled. The links keep their href, so
   with JavaScript off every button still goes to /contact/. */
.enq-dialog {
  border: 1px solid var(--card-border);
  background: var(--cream-light);
  padding: 0;
  width: min(660px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  color: var(--ink);
  box-shadow: 0 40px 90px -40px rgba(36,28,33,0.55);
}
.enq-dialog::backdrop { background: rgba(26,20,23,0.55); }
.enq-dialog-inner { padding: 34px 36px 36px; overflow-y: auto; max-height: calc(100vh - 48px); }
.enq-dialog-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 6px; }
.enq-dialog-head .s-title { font-size: 25px; }
.enq-close {
  margin-left: auto; flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--card-border);
  background: transparent; cursor: pointer;
  position: relative; border-radius: 50%;
  transition: border-color 160ms ease, background 160ms ease;
}
.enq-close:hover { border-color: var(--oxblood); background: #FFF; }
.enq-close::before, .enq-close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 13px; height: 1px; background: var(--ink);
}
.enq-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.enq-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.enq-dialog .enq { margin-top: 22px; max-width: none; }
.enq-dialog .enq-field { margin-bottom: 16px; }
.enq-dialog .enq-field textarea { min-height: 104px; }
.enq-dialog .s-lede { font-size: 15.5px; margin-top: 10px; }

@media (max-width: 620px) {
  .enq-dialog-inner { padding: 26px 22px 28px; }
  .enq-dialog-head .s-title { font-size: 22px; }
}

/* ── Pricing, softened ────────────────────────────────────────────────
   The one page where the hard-cornered editorial look works against us:
   pricing is the most "software product" moment on the site, and a square
   slab reads as a table of terms rather than a plan you pick. Radius is
   confined to this page's own components. */
.price-card {
  border-radius: 18px;
  background: #FFFFFF;
  border-color: #E9E1D3;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 4px rgba(36,28,33,0.03),
    0 14px 30px -14px rgba(36,28,33,0.13),
    0 40px 80px -48px rgba(36,28,33,0.36);
}
.price-toggle {
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(36,28,33,0.05);
}
.price-toggle button[aria-pressed="true"] {
  box-shadow: 0 1px 2px rgba(36,28,33,0.18);
}
.price-includes {
  border-radius: 18px;
  border: 1px solid var(--card-border);
  background: var(--cream-light);
  padding: 12px 32px 16px;
  gap: 0 56px;
}
.price-includes li:last-child { border-bottom: none; }
.price-includes li:nth-last-child(-n+1) { border-bottom: none; }
.price-card .btn { border-radius: 999px; }
.price-card .price-actions .btn { padding: 14px 30px; }

/* The plan's headline figure wants air around it, not a table row. */
.price-figure { align-items: flex-end; gap: 14px; }
.price-figure .per { padding-bottom: 8px; }

@media (max-width: 720px) {
  .price-includes { padding: 6px 22px 10px; gap: 0; }
  .price-card { border-radius: 14px; }
}


/* ── Booking: month grid beside times, Calendly-shaped ────────────────
   One implementation, mounted either inline on /book/ or inside a dialog
   from the header button. */
.bk { --bk-cell: 42px; }
.bk-step { display: none; }
.bk-step.is-on { display: block; }

.bk-split { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start; }

.bk-cal-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.bk-cal-head .month {
  font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink);
  margin: 0; flex: 1;
}
.bk-nav {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--card-border); background: var(--cream-light);
  position: relative; transition: border-color 160ms ease, background 160ms ease;
}
.bk-nav:hover:not(:disabled) { border-color: var(--oxblood); background: #FFF; }
.bk-nav:disabled { opacity: 0.35; cursor: default; }
.bk-nav::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; border: solid var(--ink); border-width: 1.5px 1.5px 0 0;
}
.bk-nav.prev::before { transform: translate(-40%,-50%) rotate(-135deg); }
.bk-nav.next::before { transform: translate(-60%,-50%) rotate(45deg); }

.bk-dow, .bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-dow span {
  text-align: center; font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px;
}
.bk-cell {
  height: var(--bk-cell); border-radius: 10px; border: 1px solid transparent;
  background: transparent; font-family: var(--sans); font-size: 14.5px;
  color: var(--muted); font-variant-numeric: tabular-nums; cursor: default;
}
.bk-cell.is-free {
  color: var(--ink); font-weight: 600; cursor: pointer;
  background: var(--cream-light); border-color: var(--card-border);
}
.bk-cell.is-free:hover { border-color: var(--oxblood); background: #FFF; }
.bk-cell[aria-pressed="true"] { background: var(--oxblood); border-color: var(--oxblood); color: var(--cream); }
.bk-cell.is-today { box-shadow: inset 0 0 0 1px var(--brass); }
.bk-cell:disabled { opacity: 0.4; }

.bk-times-head { margin: 0 0 14px; font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink); }
.bk-times {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 9px; max-height: 330px; overflow-y: auto;
}
.bk-time {
  padding: 11px 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--card-border); background: var(--cream-light);
  font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.bk-time:hover { border-color: var(--oxblood); background: #FFF; }
.bk-hint, .bk-tz { font-family: var(--sans); font-size: 13px; color: var(--muted); }
.bk-tz { margin: 18px 0 0; }
.bk-hint { margin: 0; }

.bk-chosen {
  margin: 0 0 22px; padding: 14px 18px; border-radius: 12px;
  background: var(--cream-light); border: 1px solid var(--card-border);
  font-family: var(--sans); font-size: 15px; color: var(--ink);
}
.bk-chosen b { font-weight: 600; }
.bk-chosen button {
  margin-left: 10px; border: none; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--oxblood);
  border-bottom: 1px solid #6B1F2A55; padding: 0 0 1px;
}
.bk-done { max-width: 620px; }

/* The dialog wrapper for the header button. */
.bk-dialog {
  border: 1px solid var(--card-border); background: var(--cream-light);
  padding: 0; width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); color: var(--ink); border-radius: 18px;
  box-shadow: 0 40px 90px -40px rgba(33,30,26,0.55);
}
.bk-dialog::backdrop { background: rgba(26,23,20,0.55); }
.bk-dialog-inner { padding: 30px 32px 34px; overflow-y: auto; max-height: calc(100vh - 48px); }
.bk-dialog-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.bk-dialog-head .s-title { font-size: 24px; }

@media (max-width: 820px) {
  .bk-split { grid-template-columns: 1fr; gap: 28px; }
  .bk-times { max-height: none; }
  .bk-dialog-inner { padding: 24px 20px 26px; }
}

/* ── /contact/: the calendar leads, the detail sits beside it ─────────
   Previously the page opened with three numbered steps and a contact rail
   and buried the calendar third. Someone arriving to book a call should
   meet the calendar, not a preamble. */
.book-lead { border-top: none; padding-top: 36px; padding-bottom: 56px; }
.book-lead-grid { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 60px; align-items: start; }
.book-rail { border-left: 1px solid var(--brass-hairline); padding-left: 32px; }
.book-rail-block + .book-rail-block { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--inner-hairline); }
.book-rail .rail-label {
  margin: 0 0 12px; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted);
}
.book-rail .rail-value { display: block; font-family: var(--sans); font-size: 15px; margin-bottom: 6px; }
.book-hours { margin: 10px 0 0; font-family: var(--sans); font-size: 14px; color: var(--muted); }
.book-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.book-steps li {
  position: relative; counter-increment: s;
  padding: 0 0 16px 30px;
  font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--body);
}
.book-steps li:last-child { padding-bottom: 0; }
.book-steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--serif); font-size: 14px; color: var(--brass);
}

/* Calendar first and full width of its column, times underneath it. The
   side-by-side month/times split is right in the narrow popup; here there
   is room to let the calendar be the thing you actually see. */
.book-lead-grid .bk-split { grid-template-columns: 1fr; gap: 30px; }
.book-lead-grid .bk { --bk-cell: 62px; }
/* Left to fill the column the cells stretched into wide letterboxes; capped
   so a day reads as a square the way a calendar should. */
.book-lead-grid .bk-split > div:first-child { max-width: 640px; }
.book-lead-grid .bk-cal-head { margin-bottom: 18px; }
.book-lead-grid .bk-cal-head .month { font-size: 19px; }
.book-lead-grid .bk-dow, .book-lead-grid .bk-grid { gap: 6px; }
.book-lead-grid .bk-cell { font-size: 16px; border-radius: 12px; }
.book-lead-grid .bk-dow span { font-size: 11px; padding-bottom: 8px; }
.book-lead-grid .bk-times {
  max-height: none;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  padding-top: 26px; border-top: 1px solid var(--brass-hairline);
}
.book-lead-grid .bk-times-head { font-size: 17px; margin-bottom: 0; padding-top: 26px; border-top: 1px solid var(--brass-hairline); }
.book-lead-grid .bk-times-head + .bk-times { padding-top: 16px; border-top: none; }

@media (max-width: 1080px) {
  .book-lead-grid { grid-template-columns: 1fr; gap: 36px; }
  .book-rail { border-left: none; padding-left: 0; border-top: 1px solid var(--brass-hairline); padding-top: 28px; }
  .book-lead-grid .bk-split { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .book-lead-grid .bk-split { grid-template-columns: 1fr; }
}

/* ── Guides index: cards, not four stacked essays ─────────────────────
   Four headings in a column all look equally important and none of them
   tells you what you are about to read or how long it takes. */
.guide-list { display: grid; gap: 1px; background: var(--brass-hairline); margin-top: 38px; border-top: 1px solid var(--brass-hairline); border-bottom: 1px solid var(--brass-hairline); }
.guide-card {
  display: grid; grid-template-columns: 150px 1fr; gap: 28px;
  background: var(--cream); padding: 26px 4px 28px;
  transition: background 180ms ease;
}
.guide-card:hover { background: var(--cream-light); }
.guide-meta { font-family: var(--sans); }
.guide-topic {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brass);
}
.guide-mins { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.guide-card h2 { margin: 0 0 8px; font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -0.012em; }
.guide-card h2 a { color: var(--ink); }
.guide-card h2 a:hover { color: var(--oxblood); }
.guide-card p { margin: 0; font-family: var(--sans); font-size: 14.5px; line-height: 1.65; color: var(--body); max-width: 62ch; }

@media (max-width: 720px) {
  .guide-card { grid-template-columns: 1fr; gap: 10px; padding: 22px 0 24px; }
  .guide-meta { display: flex; gap: 14px; align-items: baseline; }
  .guide-mins { margin-top: 0; }
}