/* ==========================================================================
   Knot Labs — site stylesheet
   No framework, no build step. Edit this file directly.

   Palette and type are inherited from the pitch kit (pitch-kit/assets/kit.css)
   so that a PDF sent after a site visit looks like the same company.

   Sections in order:
     1. tokens          2. reset & base      3. layout
     4. typography      5. buttons & links   6. header / nav
     7. hero            8. cards & panels    9. data display
    10. product mocks  11. charts           12. process & timeline
    13. footer         14. motion           15. responsive
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */

:root {
  /* brand — identical values to the pitch kit */
  --cream:        #fbf7ef;
  --cream-deep:   #f4ecdd;
  --cream-line:   #e6dbc6;
  --ink:          #2c2a26;
  --ink-soft:     #5f594e;
  /* The kit's faint ink is #8b8375. On screen that is 3.5:1 on cream, and it
     carries every price in the tables, so it is darkened here to clear AA.
     Print does not have the same problem, which is why the kit keeps its value. */
  --ink-faint:    #6f685c;
  --accent:       #9a6b3f;
  /* Same colour family, dark enough for 11px type on any of the creams. */
  --accent-ink:   #895a32;
  --accent-soft:  #c79a68;
  --teal:         #3f6f6a;
  --plum:         #6b4a63;
  --good:         #4b7a52;
  --warn:         #b07b2c;
  --bad:          #a4503f;
  --card:         #ffffff;

  /* derived surfaces */
  --ink-deep:     #23211e;
  --on-dark:      #f3ece0;
  --on-dark-soft: #b3aa9a;
  --on-dark-line: #423e37;

  --serif: "Libre Baskerville", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow-sm: 0 1px 2px rgba(60,48,30,.05), 0 2px 6px rgba(60,48,30,.04);
  --shadow:    0 1px 2px rgba(60,48,30,.05), 0 10px 30px rgba(60,48,30,.07);
  --shadow-lg: 0 2px 4px rgba(60,48,30,.05), 0 24px 60px rgba(60,48,30,.11);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --gut: clamp(20px, 5vw, 64px);   /* page side padding */
  --maxw: 1240px;
  --narrow: 760px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------- 2. reset and base */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;              /* clears the sticky header on anchors */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

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

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--ink);
  color: var(--on-dark);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
}
.skip:focus { left: 16px; }

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

/* ---------------------------------------------------------------- 3. layout */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gut);
}
.wrap.narrow { max-width: calc(var(--narrow) + var(--gut) * 2); }

section { position: relative; }

.band { padding-block: clamp(48px, 6.4vw, 86px); }
.band.tight { padding-block: clamp(36px, 4.4vw, 58px); }

.band.alt   { background: var(--cream-deep); }
.band.paper { background: var(--card); }

.band.dark {
  background: var(--ink-deep);
  color: var(--on-dark);
}
.band.dark h1, .band.dark h2, .band.dark h3 { color: var(--on-dark); }
.band.dark .eyebrow { color: var(--accent-soft); }
.band.dark .lede, .band.dark p { color: var(--on-dark-soft); }
.band.dark strong, .band.dark b { color: var(--on-dark); }
.band.dark hr, .band.dark .rule { background: var(--on-dark-line); }

/* hairline divider between bands of the same colour */
.rule {
  height: 1px;
  background: var(--cream-line);
  border: 0;
  margin: 0;
}

.grid { display: grid; gap: clamp(16px, 2.2vw, 26px); }

/* Grid and flex children default to min-width:auto, so one wide table or one
   nowrap string inside a column stretches the whole track past the viewport.
   Everything here is allowed to shrink; anything that genuinely cannot is
   wrapped in .scroll-x instead. */
.grid > *, .split > *, .hero-grid > * { min-width: 0; }

.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }

/* asymmetric editorial splits */
.split      { display: grid; grid-template-columns: 1fr 1fr;      gap: clamp(24px, 4vw, 60px); align-items: center; }
.split.wide-left  { grid-template-columns: 1.25fr .75fr; }
.split.wide-right { grid-template-columns: .8fr 1.2fr; }
.split.top  { align-items: start; }

.stack > * + * { margin-top: 14px; }

/* ------------------------------------------------------------ 4. typography */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.008em;
}

h1 { font-size: clamp(38px, 6.2vw, 74px); line-height: 1.04; }
h2 { font-size: clamp(29px, 3.9vw, 46px);  line-height: 1.12; }
h3 { font-size: clamp(19px, 1.7vw, 23px);  line-height: 1.28; }
h4 { font-size: 17px; line-height: 1.35; }
/* For headings whose level is set by document structure but whose size is set
   by where they sit -- a card subhead that must not skip a level. */
h2.h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.28; }
h3.h4 { font-size: 17px; line-height: 1.35; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 16px;
  display: block;
}

.lede {
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 62ch;
}

.small { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.tiny  { font-size: 13px;  line-height: 1.5;  color: var(--ink-faint); }
.mono  { font-family: var(--mono); }

.measure { max-width: 66ch; }

/* a serif pull-quote used to carry the brand voice */
.quote {
  font-family: var(--serif);
  font-size: clamp(21px, 2.5vw, 31px);
  line-height: 1.38;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: clamp(18px, 2.5vw, 32px);
  margin: 0;
}
.band.dark .quote { color: var(--on-dark); border-left-color: var(--accent-soft); }
.quote cite {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 18px;
}
.band.dark .quote cite { color: var(--on-dark-soft); }

/* section heading block */
.head { max-width: 780px; margin-bottom: clamp(26px, 3.2vw, 44px); }
.head.center { margin-inline: auto; text-align: center; }
.head h2 + .lede { margin-top: 18px; }

/* lists */
ul.ticks { list-style: none; margin: 0; padding: 0; }
ul.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
ul.ticks li::before {
  content: "";
  position: absolute;
  left: 4px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-soft);
}
ul.ticks li strong { color: var(--ink); font-weight: 500; }
.band.dark ul.ticks li { color: var(--on-dark-soft); }
.band.dark ul.ticks li strong { color: var(--on-dark); }

ul.crosses li::before {
  background: none;
  content: "×";
  color: var(--bad);
  font-size: 15px;
  line-height: 1;
  top: .35em; left: 3px;
  width: auto; height: auto;
}

/* ------------------------------------------------------- 5. buttons & links */

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
.band.dark a { color: var(--accent-soft); }
.band.dark a:hover { color: #fff; }

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  padding: 13px 26px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background .22s var(--ease), color .22s var(--ease);
  white-space: nowrap;
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn:active { transform: translateY(0); }
.btn .arw { transition: transform .22s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.btn.ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--cream-line);
}
.btn.ghost:hover { --btn-bd: var(--ink); }

.btn.accent { --btn-bg: var(--accent); --btn-bd: var(--accent); --btn-fg: #fff; }

.band.dark .btn        { --btn-bg: var(--cream); --btn-fg: var(--ink);     --btn-bd: var(--cream); }
.band.dark .btn.ghost  { --btn-bg: transparent;  --btn-fg: var(--on-dark); --btn-bd: var(--on-dark-line); }
.band.dark .btn.ghost:hover { --btn-bd: var(--on-dark); }

.btn.sm { padding: 9px 18px; font-size: 14px; }

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

/* text link with an animated underline */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s var(--ease), color .2s var(--ease);
}
.tlink:hover { background-size: 100% 1px; color: var(--ink); }
.band.dark .tlink:hover { color: #fff; }

/* ------------------------------------------------------------ 6. header/nav */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 239, .82);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.pinned {
  border-bottom-color: var(--cream-line);
  background: rgba(251, 247, 239, .94);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
  transition: height .3s var(--ease);
}
.site-header.pinned .nav { height: 62px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand img { width: 26px; height: 26px; }
.brand .wm {
  font-family: var(--serif);
  font-size: 19.5px;
  letter-spacing: .005em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.4vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: block;
  position: relative;
  padding: 8px 10px;
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color .2s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }

.burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--cream-line);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--ink);
  position: relative;
  transition: background .2s var(--ease);
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px; height: 1.5px;
  background: var(--ink);
  transition: transform .28s var(--ease);
}
.burger span::before { top: -5px; }
.burger span::after  { top: 5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--cream-line);
  background: var(--cream);
  padding: 10px var(--gut) 24px;
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; margin: 0 0 16px; padding: 0; }
.mobile-menu ul a {
  display: block;
  padding: 13px 2px;
  font-size: 18px;
  font-family: var(--serif);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cream-line);
}
.mobile-menu ul a[aria-current="page"] { color: var(--accent); }
.mobile-menu .btn { width: 100%; }

/* ----------------------------------------------------------------- 7. hero */

.hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 84px); position: relative; overflow: hidden; }

/* very soft radial warmth behind the hero — pure CSS, no image weight */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(58% 50% at 78% 18%, rgba(199,154,104,.20), transparent 68%),
    radial-gradient(46% 44% at 12% 8%,  rgba(63,111,106,.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: clamp(18px, 2vw, 26px); font-size: clamp(18px, 1.65vw, 22px); }
.hero .btn-row { margin-top: clamp(26px, 3vw, 38px); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.hero-note {
  margin-top: 26px;
  display: flex;
  align-items: flex-start;          /* keeps the dot on line one when the note wraps */
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-faint);
  font-family: var(--mono);
}
.hero-note .dot { margin-right: 0; margin-top: 7px; }

/* strip of proof numbers under the hero.
   Outer cells take the page gutter so the first number lines up with the
   headline above it; inner cells keep the tighter rhythm. */
.proofbar {
  --cell-x: clamp(14px, 2vw, 26px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: var(--maxw);
  margin-inline: auto;
  background: var(--cream-line);
  border-block: 1px solid var(--cream-line);
}
.proofbar > div {
  background: var(--cream);
  padding: clamp(18px, 2.4vw, 30px) var(--cell-x);
}
.proofbar > div:first-child { padding-left: var(--gut); }
.proofbar > div:last-child { padding-right: var(--gut); }
.proofbar .v {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  color: var(--accent);
}
.proofbar .k {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ------------------------------------------------------- 8. cards & panels */

.card {
  background: var(--card);
  border: 1px solid var(--cream-line);
  border-radius: var(--r);
  padding: clamp(20px, 2.3vw, 30px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.card.lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #dbcdb1;
}
.card .num {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .15em;
  color: var(--accent);
  text-transform: uppercase;
}
.card h3 { margin: 12px 0 9px; }
.card p { font-size: 15.5px; color: var(--ink-soft); margin: 0; }
/* most cards hold a single paragraph; where they hold two, they need the gap */
.card p + p { margin-top: 12px; }

a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { color: inherit; }

.band.dark .card {
  background: #2a2823;
  border-color: var(--on-dark-line);
}
.band.dark .card p { color: var(--on-dark-soft); }
.band.dark .card .num { color: var(--accent-soft); }

.panel {
  background: var(--cream-deep);
  border: 1px solid var(--cream-line);
  border-radius: var(--r);
  padding: clamp(20px, 2.3vw, 30px);
}
.band.alt .panel { background: var(--card); }
.band.dark .panel { background: #2a2823; border-color: var(--on-dark-line); }

.panel.accent {
  background: #f7efe0;
  border-color: #e7d5b4;
}

/* numbered feature card with a hairline top rule that draws in on hover */
.fcard { position: relative; overflow: hidden; }
.fcard::after {
  content: "";
  position: absolute;
  left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.fcard:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------- 9. data display */

.stat { }
.stat .v {
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1;
  color: var(--accent);
}
.stat .v.teal { color: var(--teal); }
.stat .v.good { color: var(--good); }
.stat .v.ink  { color: var(--ink); }
.stat .k {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.band.dark .stat .v { color: var(--accent-soft); }
.band.dark .stat .k { color: var(--on-dark-soft); }

/* before → after pairs */
.delta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.1;
}
/* A word phrase like "an evening" must break beside the arrow, never inside. */
.delta .from, .delta .to { white-space: nowrap; }
.delta .from { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.delta .to   { color: var(--good); }
.delta .ar   { color: var(--accent); font-family: var(--sans); font-size: .7em; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
table.data th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--ink-faint);
}
table.data td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--cream-line);
  color: var(--ink-soft);
  vertical-align: top;
}
table.data td:last-child, table.data th:last-child { padding-right: 0; }
table.data td strong { color: var(--ink); font-weight: 500; }
table.data .num { text-align: right; font-family: var(--mono); font-size: 14px; white-space: nowrap; }
/* per-row enquiry link: same treatment as a figure column on desktop, a full
   width button once the table restacks as cards */
table.data td.ask { text-align: right; font-family: var(--mono); font-size: 14px; white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
.band.dark table.data td { color: var(--on-dark-soft); border-bottom-color: var(--on-dark-line); }
.band.dark table.data td strong { color: var(--on-dark); }
.band.dark table.data th { color: var(--on-dark-soft); border-bottom-color: var(--on-dark-soft); }

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cream-deep);
  color: var(--ink-soft);
  white-space: nowrap;
}
.pill.g { background: #e8f0e6; color: var(--good); }
.pill.w { background: #f8efdd; color: var(--warn); }
.pill.r { background: #f7e8e4; color: var(--bad); }
.pill.a { background: #f4e9dc; color: var(--accent-ink); }
/* quiet outline variant — legible on cream and on cream-deep alike, so a row
   marker inside a table reads as a note rather than an alarm */
.pill.o { background: transparent; box-shadow: inset 0 0 0 1px var(--cream-line); color: var(--ink-faint); }

/* a row of pills used as fake toolbar buttons inside a mock */
.pillrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* record list beside a detail panel, inside a mock — stacks on small screens */
.mock-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 680px) { .mock-split { grid-template-columns: 1fr; } }

.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--good);
  margin-right: 7px;
  vertical-align: middle;
  flex: none;
}
.dot.w { background: var(--warn); }
.dot.r { background: var(--bad); }
.dot.pulse { animation: pulse 2.4s var(--ease) infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(75,122,82,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(75,122,82,0); }
}

/* key/value definition rows */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 20px; font-size: 15px; }
.kv dt { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
.kv dd { margin: 0; color: var(--ink-soft); }
.band.dark .kv dd { color: var(--on-dark-soft); }

/* --------------------------------------------------------- 10. product mocks */

/* browser chrome wrapper */
.mock {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.mock .bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--cream-deep);
  border-bottom: 1px solid var(--cream-line);
  padding: 9px 12px;
}
.mock .bar i { width: 8px; height: 8px; border-radius: 50%; background: #d8c8ab; }
.mock .bar .url {
  flex: 1;
  min-width: 0;                     /* lets the ellipsis actually engage */
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  padding: 4px 12px;
  margin-left: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mock .body { padding: 14px; }

/* app frame with a sidebar */
.app { display: grid; grid-template-columns: 116px 1fr; }
.app .side { background: #f9f5ec; border-right: 1px solid var(--cream-line); padding: 12px 10px; }
.app .side .logo { font-family: var(--serif); font-size: 12px; color: var(--accent); margin-bottom: 12px; }
.app .side .nv { font-size: 11.5px; color: var(--ink-faint); }
.app .side .nv div { padding: 5px 7px; border-radius: 6px; margin-bottom: 2px; }
.app .side .nv div.on { background: #fff; color: var(--ink); border: 1px solid var(--cream-line); }
.app .main { padding: 14px 15px; min-width: 0; }
.app .hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 12px; }
.app .hd .t { font-weight: 500; font-size: 14px; }
.app .hd .s { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }

/* KPI tiles inside a mock */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.tiles.t3 { grid-template-columns: repeat(3, 1fr); }
.tile {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: 9px;
  padding: 9px 10px;
}
.tile .v { font-family: var(--serif); font-size: 19px; line-height: 1; }
.tile .k { font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }
.tile.a .v { color: var(--accent); }
.tile.t .v { color: var(--teal); }
.tile.g .v { color: var(--good); }
.tile.r .v { color: var(--bad); }
.tile.w .v { color: var(--warn); }

/* compact table inside a mock */
table.mini { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.mini th {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-faint);
  font-weight: 400;
  padding: 0 7px 5px 0;
  border-bottom: 1px solid var(--ink-faint);
}
table.mini td {
  padding: 6px 7px 6px 0;
  border-bottom: 1px solid var(--cream-line);
  color: var(--ink-soft);
}
table.mini td:last-child, table.mini th:last-child { padding-right: 0; }
table.mini tr:last-child td { border-bottom: 0; }

/* email mock */
.mail { border: 1px solid var(--cream-line); border-radius: 10px; overflow: hidden; background: #fff; }
.mail .mh { background: var(--cream-deep); border-bottom: 1px solid var(--cream-line); padding: 9px 12px; }
.mail .mh .subj { font-weight: 500; font-size: 13px; }
.mail .mh .meta { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin-top: 3px; }
.mail .mb { padding: 12px; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
/* Block, not inline-block: the button belongs on its own line under the body
   copy, not wedged mid-sentence wherever the text happens to wrap. */
.mail .cta {
  display: block;
  width: fit-content;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  padding: 6px 13px;
  border-radius: 6px;
  margin-top: 12px;
}

/* chat mock */
.chat { display: flex; flex-direction: column; gap: 10px; }
.bub { max-width: 88%; border-radius: 13px; padding: 10px 13px; font-size: 13.5px; line-height: 1.5; }
.bub.me { align-self: flex-end; background: var(--cream-deep); border: 1px solid var(--cream-line); border-bottom-right-radius: 4px; }
.bub.ai { align-self: flex-start; background: #fff; border: 1px solid var(--cream-line); border-bottom-left-radius: 4px; }
.cites { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cite {
  font-family: var(--mono);
  font-size: 10px;
  background: #f2f6f5;
  border: 1px solid #d6e3e1;
  color: var(--teal);
  border-radius: 5px;
  padding: 2px 7px;
}

.mock-cap {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
}
.band.dark .mock-cap { color: var(--on-dark-soft); }

/* --------------------------------------------------------------- 11. charts */

.chart { width: 100%; }
.chart text { font-family: var(--mono); font-size: 9px; fill: var(--ink-faint); }
.chart .axis { stroke: var(--cream-line); stroke-width: 1; }
.chart .grid-l { stroke: var(--cream-line); stroke-width: 1; stroke-dasharray: 2 4; }
.band.dark .chart .axis, .band.dark .chart .grid-l { stroke: var(--on-dark-line); }
.band.dark .chart text { fill: var(--on-dark-soft); }

.chart .ln { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chart .ln.actual   { stroke: var(--accent); }
.chart .ln.forecast { stroke: var(--bad); stroke-dasharray: 5 4; }
.chart .band-fill   { fill: var(--accent-soft); opacity: .22; }
.chart .bar         { fill: var(--accent); }

/* the range an item learned for itself, and the reading that breaks out of it */
.chart .band-normal   { fill: var(--good); opacity: .1; }
.chart .bound         { stroke: var(--good); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.chart .flag-halo     { fill: var(--bad); opacity: .18; }
.chart .flag          { fill: var(--bad); }
.chart .flag-lead     { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 2 3; }
.chart text.flag-note { fill: var(--bad); }
.band.dark .chart .band-normal { opacity: .2; }
.chart .bar.soft    { fill: var(--accent-soft); }
.chart .bar.teal    { fill: var(--teal); }
.chart .bar.good    { fill: var(--good); }

/* flow diagrams (sources → platform → outputs) */
.diagram { width: 100%; }
.diagram rect { fill: var(--card); stroke: var(--cream-line); stroke-width: 1; }
.diagram rect.hub { fill: var(--ink); stroke: var(--ink); }
.diagram rect.out { fill: #f7efe0; stroke: #e7d5b4; }
.diagram text { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-soft); }
.diagram text.on-hub { fill: var(--cream); }
.diagram text.lbl { fill: var(--accent); font-size: 8.5px; letter-spacing: .1em; }
.diagram path.link { fill: none; stroke: var(--accent-soft); stroke-width: 1.4; }
.diagram path.link.dash { stroke-dasharray: 4 3; }
.band.dark .diagram rect { fill: #2a2823; stroke: var(--on-dark-line); }
.band.dark .diagram text { fill: var(--on-dark-soft); }

/* legend */
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 3px; border-radius: 2px; background: var(--accent); flex: none; }
.legend i.dash { background: repeating-linear-gradient(90deg, var(--bad) 0 4px, transparent 4px 7px); }
.legend i.fill { height: 9px; background: var(--accent-soft); opacity: .5; border-radius: 2px; }
.legend i.fill.good { background: var(--good); opacity: .35; }
.band.dark .legend { color: var(--on-dark-soft); }

/* horizontal comparison bars, laid out in HTML rather than SVG */
.hbars { display: grid; gap: 14px; }
.hbar .lb { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; gap: 12px; }
.hbar .lb b { font-weight: 500; color: var(--ink); }
.hbar .lb span { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.hbar .track { height: 9px; background: var(--cream-line); border-radius: 999px; overflow: hidden; }
.hbar .fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 1.1s var(--ease);
}
/* Only collapse the bar when script can grow it again. */
.js .hbar .fill { width: 0; }
.hbar .fill.soft { background: var(--accent-soft); }
.hbar .fill.bad  { background: var(--bad); }
.hbar .fill.teal { background: var(--teal); }
.hbar .fill.good { background: var(--good); }
.band.dark .hbar .track { background: var(--on-dark-line); }
.band.dark .hbar .lb b { color: var(--on-dark); }

/* donut ring */
.ring { display: flex; align-items: center; gap: 18px; }
.ring svg { flex: none; }
.ring .rl { font-size: 14px; color: var(--ink-soft); }
.ring .rl div { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ring .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ---------------------------------------------------- 12. process & timeline */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.step {
  position: relative;
  padding: 26px 24px 26px 0;
  border-top: 2px solid var(--cream-line);
}
.step + .step { padding-left: 24px; }
.step::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transition: width .8s var(--ease);
}
.js .step::before { width: 0; }
.js .step.in::before { width: 100%; }
.step .n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--accent);
  text-transform: uppercase;
}
.step h3 { margin: 12px 0 8px; font-size: 20px; }
.step p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.band.dark .step { border-top-color: var(--on-dark-line); }
.band.dark .step p { color: var(--on-dark-soft); }

/* vertical timeline for the escalation ladder */
.ladder { list-style: none; margin: 0; padding: 0; position: relative; }
.ladder::before {
  content: "";
  position: absolute;
  left: 7px; top: 10px; bottom: 10px;
  width: 1px;
  background: var(--cream-line);
}
.ladder li {
  position: relative;
  padding: 0 0 22px 34px;
  font-size: 15px;
  color: var(--ink-soft);
}
.ladder li:last-child { padding-bottom: 0; }
.ladder li::before {
  content: "";
  position: absolute;
  left: 3px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--accent-soft);
}
.ladder li.end::before { background: var(--good); border-color: var(--good); }
.ladder .d {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 3px;
}
.ladder b { color: var(--ink); font-weight: 500; }
.band.dark .ladder::before { background: var(--on-dark-line); }
.band.dark .ladder li { color: var(--on-dark-soft); }
.band.dark .ladder li::before { background: var(--ink-deep); }
.band.dark .ladder b { color: var(--on-dark); }

/* accordion */
.acc { border-top: 1px solid var(--cream-line); }
.acc details { border-bottom: 1px solid var(--cream-line); }
.acc summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.35;
  color: var(--ink);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--ease);
}
.acc details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.acc .ab { padding: 0 0 24px; max-width: 72ch; }
.acc .ab.wide { max-width: none; }
.acc .ab p { font-size: 15.5px; color: var(--ink-soft); }

/* fit check — one short block per package, two columns, inside an accordion so
   the page does not grow by a screenful for people who already know their row */
.fitgrid { gap: clamp(16px, 2vw, 22px) clamp(24px, 4vw, 56px); }
.fitgrid h4, .fitgrid h3.h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.fitgrid ul.ticks li { margin-bottom: 5px; font-size: 15px; }

/* logo / capability strip */
.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.strip span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--cream-line);
  border-radius: 999px;
  padding: 7px 15px;
  background: var(--card);
}
.band.dark .strip span { background: transparent; border-color: var(--on-dark-line); color: var(--on-dark-soft); }

/* price header used on the packages page */
.price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.price b {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
  font-weight: 400;
}

/* form */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7px;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--cream-line);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(154,107,63,.13);
}
.field .hint { font-size: 13px; color: var(--ink-faint); margin-top: 6px; }

/* Shown in place of the form once the visitor's mail client has been handed the
   enquiry. The copy box is the escape hatch for anyone with no mail client. */
.sent-copy {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--cream-line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}
.sent-copy:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(154,107,63,.13); }

/* ---------------------------------------------------------------- 13. footer */

.site-footer {
  background: var(--ink-deep);
  color: var(--on-dark-soft);
  padding-block: clamp(48px, 6vw, 76px) 34px;
  font-size: 15px;
}
.site-footer a { color: var(--on-dark-soft); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-grid {
  display: grid;
  /* Three columns, not four. The brand column takes the slack so the two link
     columns sit against the right edge rather than stranding it. */
  grid-template-columns: 3.4fr 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--on-dark-line);
}
.foot-grid h4, .foot-grid h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--on-dark);
  font-weight: 400;
  margin-bottom: 16px;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 10px; }
.foot-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.foot-brand img { width: 26px; height: 26px; }
.foot-brand .wm { font-family: var(--serif); font-size: 20px; color: var(--on-dark); }
.foot-note { max-width: 40ch; line-height: 1.6; }
.foot-base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 13px;
  color: #7d7668;
}

/* big call to action band */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .lede { margin: 20px auto 0; text-align: center; }
.cta-band .btn-row { justify-content: center; margin-top: 32px; }

/* ---------------------------------------------------------------- 14. motion */

/* Everything below is gated on .js. Without scripting nothing is ever hidden,
   because nothing would be able to un-hide it. */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: none; }

/* stagger children */
.js .reveal-group > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal-group.in > * { opacity: 1; transform: none; }
.reveal-group.in > *:nth-child(1) { transition-delay: .00s; }
.reveal-group.in > *:nth-child(2) { transition-delay: .07s; }
.reveal-group.in > *:nth-child(3) { transition-delay: .14s; }
.reveal-group.in > *:nth-child(4) { transition-delay: .21s; }
.reveal-group.in > *:nth-child(5) { transition-delay: .28s; }
.reveal-group.in > *:nth-child(6) { transition-delay: .35s; }
.reveal-group.in > *:nth-child(7) { transition-delay: .42s; }
.reveal-group.in > *:nth-child(8) { transition-delay: .49s; }

/* SVG line that draws itself in */
.js .draw {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.5s var(--ease);
}
.js .in .draw, .js .draw.in { stroke-dashoffset: 0; }

/* SVG bar that grows from the baseline */
.js .grow { transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--ease); }
.js .in .grow { transform: scaleY(1); }
.in .grow:nth-of-type(2) { transition-delay: .06s; }
.in .grow:nth-of-type(3) { transition-delay: .12s; }
.in .grow:nth-of-type(4) { transition-delay: .18s; }
.in .grow:nth-of-type(5) { transition-delay: .24s; }
.in .grow:nth-of-type(6) { transition-delay: .30s; }

/* area fill fades in behind a drawn line */
.js .fade-in { opacity: 0; transition: opacity 1s var(--ease) .4s; }
.js .in .fade-in { opacity: .22; }

/* the knot mark drawing itself on the hero */
@keyframes knot-draw {
  from { stroke-dashoffset: 90; }
  to   { stroke-dashoffset: 0; }
}

/* cross-document transitions where the browser supports them */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal, .js .reveal-group > * { opacity: 1; transform: none; }
  .js .draw { stroke-dashoffset: 0; }
  .js .grow { transform: scaleY(1); }
  .js .fade-in { opacity: .22; }
  .js .step::before { width: 100%; }
}

/* ------------------------------------------------------------ 15. responsive */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 20ch; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step + .step { padding-left: 0; }
  .steps .step:nth-child(2) { padding-left: 24px; }
  .steps .step:nth-child(4) { padding-left: 24px; }
  /* The footer keeps its three columns to 680px. Two columns would leave the
     third block orphaned on a row of its own. */
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav-cta .btn { display: none; }
  .split, .split.wide-left, .split.wide-right { grid-template-columns: 1fr; }
  .proofbar { grid-template-columns: repeat(2, 1fr); }
  .proofbar > div:nth-child(odd) { padding-left: var(--gut); padding-right: var(--cell-x); }
  .proofbar > div:nth-child(even) { padding-left: var(--cell-x); padding-right: var(--gut); }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  /* A button label long enough to be useful is wider than a phone once the
     pill padding is added, and nowrap pushed it off the right edge. */
  .btn { white-space: normal; max-width: 100%; }
  .g2, .g3, .g4, .g6 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .steps { grid-template-columns: 1fr; }
  .steps .step { padding-left: 0 !important; }
  .app { grid-template-columns: 1fr; }
  .app .side { display: none; }
  .app .hd { flex-wrap: wrap; gap: 2px 12px; }
  .app .hd .s { white-space: normal; }
  .tiles, .tiles.t3 { grid-template-columns: repeat(2, 1fr); }
  .kv { grid-template-columns: 1fr; gap: 3px 0; }
  .kv dd { margin-bottom: 12px; }
  .foot-grid { grid-template-columns: 1fr; }
  .ring { flex-direction: column; align-items: flex-start; }
  /* SVG text scales with the chart, so a 9px label inside a viewBox that is now
     half as wide renders nearer 6px. Bump it back to something readable. */
  .chart text { font-size: 13px; }
  .chart text[style*="font-size:8.5px"] { font-size: 12px; }
  .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* A five-column price table cannot be made to work at 350px. Sideways
     scrolling hid roughly a third of it -- prices truncated mid-figure and the
     per-row enquiry link sat off the right edge entirely -- so each row becomes
     its own card instead, with the column heading carried on the cell as
     data-label. Nothing is dropped: the description that used to be hidden on
     small screens is the most useful thing on the row. */
  table.data { font-size: 14.5px; min-width: 0; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  /* The column headings come back on every cell as data-label, so the real
     header row is dropped rather than hidden -- a 1px-clipped thead still lays
     its cells out past the viewport. */
  table.data thead { display: none; }
  table.data tr {
    border: 1px solid var(--cream-line);
    border-radius: var(--r);
    background: var(--card);
    padding: 16px 18px;
    margin-bottom: 14px;
  }
  table.data tr:last-child { margin-bottom: 0; }
  table.data td, table.data tr:last-child td { padding: 0; border-bottom: 0; }
  table.data td + td {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--cream-line);
  }
  table.data td[data-label]::before {
    content: attr(data-label);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  /* short values sit beside their label; long prose sits under it */
  table.data td.num {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    text-align: right;
    white-space: normal;
    font-size: 15px;
  }
  table.data td.desc { display: block; }
  table.data td.desc::before { display: block; margin-bottom: 4px; }
  table.data td.pkg { padding-top: 0; }
  table.data td.pkg::before { display: none; }
  table.data td.pkg strong { font-size: 17px; }

  /* the per-package enquiry link, which used to be ~300px off-screen */
  table.data td.ask { text-align: left; display: flex; flex-wrap: wrap; gap: 8px; }
  table.data td.ask::before { display: none; }
  table.data td.ask a.pkg-contact {
    display: inline-flex;
    flex: 1 1 calc(50% - 4px);
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .06em;
    text-decoration: none;
  }
  table.data td.ask a.pkg-contact[data-channel="whatsapp"] {
    border-color: #25d366;
    color: #1a9e4b;
  }
  table.data td.ask a:not(.pkg-contact) {
    display: inline-flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    margin: 0;
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .06em;
    text-decoration: none;
  }

  .pkg-contact-row .pkg-contact {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
    margin: 0;
    font-size: 13px;
  }

  .band.dark table.data tr { background: transparent; border-color: var(--on-dark-line); }
  .band.dark table.data td + td { border-top-color: var(--on-dark-line); }
}

/* ---------------------------------------------------------------- contact FABs */

.contact-fabs {
  position: fixed;
  right: clamp(16px, 3vw, 24px);
  bottom: clamp(16px, 3vw, 24px);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.email-fab,
.wa-fab {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.email-fab {
  background: var(--accent);
}
.wa-fab {
  background: #25d366;
}
.email-fab:hover,
.wa-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
  color: #fff;
}
td.ask .pkg-contact,
.pkg-contact-row .pkg-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  margin: 3px 6px 3px 0;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-decoration: none;
}
td.ask .pkg-contact[data-channel="whatsapp"],
.pkg-contact-row .pkg-contact[data-channel="whatsapp"] {
  border-color: #25d366;
  color: #1a9e4b;
}
.pkg-contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
@media print { .contact-fabs { display: none !important; } }

/* ---------------------------------------------------------------- printing */

@media print {
  .site-header, .site-footer, .burger, .mobile-menu, .btn-row { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .band { padding-block: 18px; }
  .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; }
  .card, .mock { box-shadow: none; }
}