/* WorkSimpleAi website (built as WhiteSpace Automation, pass six).
   Built 29 September 2026 from the pass six boards and the mobile study of
   29 September. Breakpoint at 900px: above it the 1440 desktop board, below it
   the phone rules. Every word is kept at both widths. */

/* ---------------------------------------------------------------- tokens */
:root {
  --cream: #F8F7F2;
  --cream-2: #F1EEE6;
  --white: #FFFFFF;
  --sage: #E3ECE1;
  --sage-tint: #EEF4ED;
  --charcoal: #26292B;
  --charcoal-2: #1C1F21;
  --near-black: #1C201D;
  --deep-green: #14532D;
  --brand-green: #166534;
  --green: #15803D;
  --green-light: #4ADE80;
  --green-pale: #BBF7D0;
  --ink: #1B1C1A;
  --ink-soft: #4A4B45;
  --ink-mute: #6B6C64;
  --ink-faint: #8D8B80;
  --line: #E1DFD4;
  --line-2: #ECEAE1;
  --line-dark: #3A3F42;
  --amber: #D99A2B;
  --amber-ink: #8A5A10;
  --ok: #16A34A;

  --serif: 'Lora', Georgia, serif;
  --sans: 'Public Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --gutter: 96px;
  --band: 104px;
  --radius: 18px;
}

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

html { scroll-behavior: smooth; }

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

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; margin: 0; }
h1 { font-size: clamp(44px, 5vw, 72px); line-height: 1.06; letter-spacing: -1px; }
h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.1; letter-spacing: -0.7px; }
h3 { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.2; }
p { margin: 0; }
em { font-style: italic; color: var(--brand-green); }
img { max-width: 100%; display: block; }

a { color: var(--brand-green); }
a:hover { color: #1F4A2E; }

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

.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
.stack { display: flex; flex-direction: column; }
.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;
}

.label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px;
  color: var(--ink-mute); text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.label::before { content: ''; width: 26px; height: 2px; background: var(--green); flex-shrink: 0; }
.label--light { color: #9A988D; }
.label--light::before { background: var(--green-light); }

.lede { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 14px 26px; border-radius: 999px;
  font-size: 16px; font-weight: 600; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.btn--primary { background: var(--green); color: #FFFFFF; }
.btn--primary:hover { background: #2C6440; color: #FFFFFF; }
.btn--ghost { border-color: #D6D3C6; color: var(--ink); font-family: var(--mono); font-size: 14px; }
.btn--ghost:hover { border-color: var(--green); color: var(--brand-green); }
.btn--cream { background: var(--cream); color: var(--deep-green); }
.btn--cream:hover { background: #FFFFFF; color: var(--deep-green); }
.btn--light { background: var(--green-light); color: #14261C; }
.btn--light:hover { background: #A8D8B6; color: #14261C; }

/* ------------------------------------------------------------------- nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: var(--near-black);
  transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
.nav__inner { display: flex; align-items: center; gap: 28px; padding-block: 18px; }
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #F3F1E9; margin-right: auto; }
.nav__brand img { height: 32px; width: auto; } /* WorkSimpleAi logo: 32px on desktop, as the logo session advises for the bright green on cream */
.nav__word { font-size: 17px; font-weight: 600; line-height: 1.05; }
.nav__word span { font-weight: 800; }
.nav__sub { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: 2.6px; color: #9A988D; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a { color: #E8E6DD; text-decoration: none; font-size: 15px; }
.nav__links a:hover, .nav__links a[aria-current='page'] { color: var(--green-light); }
.nav__tel { color: #E8E6DD; text-decoration: none; font-family: var(--mono); font-size: 14px; }
.nav__toggle { display: none; }

/* cream state on scroll */
.nav.is-scrolled { background: rgba(248, 247, 242, .94); backdrop-filter: blur(10px); box-shadow: inset 0 -1px 0 var(--line); }
.nav.is-scrolled .nav__brand, .nav.is-scrolled .nav__links a, .nav.is-scrolled .nav__tel { color: var(--ink); }
.nav.is-scrolled .nav__sub { color: var(--ink-mute); }
.nav.is-scrolled .nav__links a:hover, .nav.is-scrolled .nav__links a[aria-current='page'] { color: var(--brand-green); }
.nav.is-scrolled .nav__logo-light { display: none; }
.nav.is-scrolled .nav__logo-dark { display: block; }
.nav__logo-dark { display: none; }
@media (max-width: 760px) { .nav__brand img { height: 26px; } }
.nav.is-scrolled .btn--light { background: var(--green); color: #FFFFFF; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; padding-block: 96px 112px; }
.hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent);
}
.hero__grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(#C3D3C2 1.2px, transparent 1.3px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 72% 26%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 50% at 72% 26%, #000 10%, transparent 72%);
  animation: wsGridPan 24s linear infinite;
}
.hero__glow { position: absolute; border-radius: 50%; }
.hero__glow--a { width: 620px; height: 620px; right: -220px; top: -240px; background: radial-gradient(circle, rgba(21,128,61,.26), rgba(21,128,61,0) 64%); animation: wsDrift1 14s ease-in-out infinite alternate; }
.hero__glow--b { width: 520px; height: 520px; left: -240px; top: 320px; background: radial-gradient(circle, rgba(120,160,138,.20), rgba(120,160,138,0) 64%); animation: wsDrift2 18s ease-in-out infinite alternate; }
.hero__inner { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: start; }
.hero__copy { display: flex; flex-direction: column; gap: 26px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__tagline { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-soft); }
.hero__media { position: relative; }
.hero__photo { width: 100%; height: 420px; object-fit: cover; object-position: 55% 26%; border-radius: var(--radius); }
.hero__card {
  position: relative; margin: -72px 20px 0; background: var(--white);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 11px;
  box-shadow: 0 18px 40px rgba(27,28,26,.14); animation: wsFloat 6s ease-in-out infinite;
}
.hero__card-head, .card-row { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.hero__card-head { justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--ink-mute); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ok); }
.dot--amber { background: var(--amber); }
.card-row span:nth-child(2) { flex-grow: 1; }
.card-row .tagmono { font-family: var(--mono); font-size: 10px; color: var(--brand-green); }
.card-row .tagmono--amber { color: var(--amber-ink); }
.caption { font-size: 11px; color: var(--ink-faint); }

/* ------------------------------------------------------- built for strip */
.builtfor { padding-block: 0 96px; display: flex; flex-direction: column; gap: 30px; }
.builtfor__row { display: flex; align-items: center; gap: 28px; }
.pill {
  flex-shrink: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px;
  color: var(--brand-green); border: 1px solid #C9D9C8; background: var(--sage-tint);
  border-radius: 999px; padding: 8px 14px;
}
.marquee {
  flex-grow: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: wsMarquee 38s linear infinite; }
.marquee__set { display: flex; align-items: center; gap: 40px; padding-right: 40px; }
.marquee__item { display: flex; align-items: center; gap: 40px; }
.marquee__item span:first-child { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2.4vw, 34px); white-space: nowrap; }
.marquee__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.workedwith { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.workedwith__label { font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; color: var(--ink-faint); white-space: nowrap; }
.workedwith__rule { flex-grow: 1; height: 1px; background: var(--line); min-width: 20px; }
.workedwith__logos { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.workedwith__logos img { height: 34px; width: auto; border-radius: 5px; }
.workedwith__logos span { font-weight: 700; font-size: 14px; color: var(--ink-soft); }

/* ----------------------------------------------------------------- cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.card__num { font-family: var(--mono); font-size: 11px; color: var(--brand-green); }
.card p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.minibox {
  background: var(--sage-tint); border: 1px solid #D5E3D3; border-radius: 10px;
  padding: 12px 14px; font-family: var(--mono); font-size: 12.5px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.minibox--plain { background: var(--cream); border-color: var(--line-2); }

/* ------------------------------------------------------- three ways rows */
.ways { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.way {
  display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink); align-items: flex-start;
}
.way:hover { color: var(--ink); }
.way:hover .way__arrow { background: var(--green); color: #FFFFFF; border-color: var(--green); }
.way__num { font-family: var(--mono); font-size: 12px; color: var(--green); padding-top: 10px; flex-shrink: 0; }
.way__body { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.way__title { font-family: var(--serif); font-size: clamp(30px, 2.6vw, 36px); line-height: 1.05; }
.way__kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 1.3px; color: var(--ink-mute); }
.way__desc { font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 54ch; }
.way__meta { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.way__arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #D6D3C6;
  display: flex; align-items: center; justify-content: center; color: var(--brand-green);
  flex-shrink: 0; margin-top: 6px; transition: background .2s, color .2s, border-color .2s;
}

/* ------------------------------------------------------------ dark bands */
.dark { background: var(--charcoal); color: #F3F1E9; }
.dark h2, .dark h3 { color: #F3F1E9; }
.dark p { color: #D7D5CB; }
.dark .label { color: #9A988D; }
.dark .label::before { background: var(--green-light); }
.logbox {
  background: var(--charcoal-2); border: 1px solid var(--line-dark); border-radius: 14px;
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
  font-family: var(--mono); font-size: 13px;
}
.logbox__head { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 1px; color: #9A988D; }
.logbox__rule { height: 1px; background: var(--line-dark); }
.logline { display: flex; align-items: center; gap: 10px; color: #F3F1E9; }

/* -------------------------------------------------------------- step rail */
.steps { position: relative; display: flex; flex-direction: column; gap: 36px; }
.steps::before { content: ''; position: absolute; left: 25px; top: 26px; bottom: 150px; width: 1px; background: #D6D3C6; }
.step { position: relative; display: flex; gap: 22px; }
.step__num {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid #D6D3C6; background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; flex-shrink: 0;
}
.step:first-child .step__num { background: var(--green); border-color: var(--green); color: #FFFFFF; }
.step__body { display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.step__tag {
  align-self: flex-start; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px;
  color: var(--brand-green); background: var(--white); border: 1px solid #C9D9C8;
  border-radius: 999px; padding: 5px 11px;
}
.step__body p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 56ch; }
.step__meta { font-family: var(--mono); font-size: 12px; color: var(--brand-green); }

/* ------------------------------------------------------------ case cards */
.case {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; display: flex; flex-direction: column; gap: 18px;
}
.case__head { display: flex; align-items: center; gap: 12px; }
.case__head img { height: 34px; width: auto; border-radius: 5px; }
.case__kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 1.1px; color: var(--ink-mute); }
.case__stats { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.stat { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); }
.stat:last-child { border-bottom: 0; }
.stat__k { font-size: 15px; color: var(--ink-soft); }
.stat__v { font-family: var(--serif); font-size: 30px; color: var(--brand-green); }
.stat__live { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--brand-green); }

.quote-dark {
  background: var(--deep-green); color: #F3F1E9; border-radius: 14px; padding: 24px;
  font-family: var(--serif); font-size: 18px; line-height: 1.5; margin: 0;
}
.quote-dark cite, .quote-plain cite { font-style: normal; }
.quote-attrib { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #2F4D3B; font-family: var(--sans); }
.quote-attrib img { height: 28px; width: auto; border-radius: 4px; }
.quote-attrib b { font-size: 14px; font-weight: 700; display: block; }
.quote-attrib small { font-size: 13px; color: #D3D8CF; }
.quote-plain {
  margin: 2px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.55; color: #33352F;
}
.quote-plain + .quote-name { font-family: var(--mono); font-size: 10px; letter-spacing: 1.1px; color: var(--ink-mute); }

.smallcases { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.smallcase {
  border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 11px; background: var(--white);
}
.smallcase__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.smallcase__head img { height: 30px; width: auto; border-radius: 5px; }
.status { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .6px; color: var(--brand-green); }
.status--amber { color: var(--amber-ink); }
.smallcase__result { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.smallcase p { font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }

/* ----------------------------------------------------------------- panel */
.panel { background: var(--white); border: 1px solid #D9DFD4; border-radius: 16px; overflow: hidden; }
.panel__head {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 20px;
  border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: 10px;
  letter-spacing: 1.1px; color: var(--ink-mute);
}
.panel__row { padding: 20px; display: flex; gap: 14px; border-top: 1px solid var(--line-2); }
.panel__row:first-of-type { border-top: 0; }
.panel__key { font-family: var(--mono); font-size: 11px; color: var(--brand-green); padding-top: 3px; }
.panel__row b { font-size: 16px; display: block; margin-bottom: 4px; }
.panel__row p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* ------------------------------------------------------------------- faq */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  font-family: var(--serif); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #D6D3C6; color: var(--brand-green);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  font-family: var(--sans); transition: background .2s, color .2s;
}
.faq details[open] summary::after { content: '\2212'; background: var(--green); border-color: var(--green); color: #FFFFFF; }
.faq details > p, .faq details > div { padding: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 70ch; }

/* a fact that still needs a source or a decision */
.todo {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  background: #FFF4D6; border: 1px dashed var(--amber); color: var(--amber-ink);
  border-radius: 4px; padding: 2px 7px; margin-left: 6px; vertical-align: middle;
}
.todo--block { display: block; margin: 8px 0 0; padding: 10px 12px; letter-spacing: .6px; line-height: 1.5; }

/* ------------------------------------------------------------------- cta */
.cta { position: relative; overflow: hidden; background: var(--brand-green); color: #F3F1E9; text-align: center; }
.cta h2 { color: #F3F1E9; }
.cta p { color: #DCE9DF; }
.cta__glow { position: absolute; width: 560px; height: 560px; left: 50%; top: -300px; margin-left: -280px; border-radius: 50%; background: radial-gradient(circle, rgba(74,222,128,.35), rgba(74,222,128,0) 65%); animation: wsDrift2 16s ease-in-out infinite alternate; }
.cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cta__mark { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; position: relative; }
.cta__ring { position: absolute; inset: 0; animation: wsSpin 40s linear infinite; }
.cta__disc { width: 68px; height: 68px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; }
.cta__disc img { width: 30px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.chip { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: #E6EFE8; border: 1px solid rgba(243,241,233,.35); border-radius: 999px; padding: 8px 13px; }
.cta a.plain { color: #F3F1E9; font-family: var(--mono); font-size: 14px; }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--near-black); color: #B6B4A9; font-size: 15px; padding-block: 88px 0; }
.foot a { color: #B6B4A9; text-decoration: none; }
.foot a:hover { color: var(--green-light); }
.foot__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 48px; }
.foot__brand { display: flex; align-items: center; gap: 10px; color: #F3F1E9; text-decoration: none; }
.foot__brand img { height: 30px; width: auto; }
.foot__brand span { font-size: 18px; font-weight: 600; }
.foot__about { display: flex; flex-direction: column; gap: 16px; }
.foot__about p { line-height: 1.6; max-width: 40ch; }
.foot__col { display: flex; flex-direction: column; gap: 11px; }
.foot__h { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; color: #F3F1E9; }
.foot__legal {
  margin-top: 40px; border-top: 1px solid #333833; padding-block: 18px 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; color: var(--ink-faint);
}

/* ------------------------------------------------------------ animations */
@keyframes wsGridPan { from { background-position: 0 0; } to { background-position: 28px 28px; } }
@keyframes wsDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(-90px,70px) scale(1.15); } }
@keyframes wsDrift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(110px,-60px) scale(1.1); } }
@keyframes wsFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes wsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wsSpin { to { transform: rotate(360deg); } }
@keyframes wsPulse { 0% { box-shadow: 0 0 0 0 rgba(63,158,94,.45); } 70% { box-shadow: 0 0 0 9px rgba(63,158,94,0); } 100% { box-shadow: 0 0 0 0 rgba(63,158,94,0); } }
.pulse { animation: wsPulse 2.4s ease-out infinite; }

/* ----------------------------------------------------- phone, under 900 */
@media (max-width: 900px) {
  :root { --gutter: 22px; --band: 60px; }

  body { font-size: 17px; }

  .nav__inner { padding-block: 14px; gap: 12px; }
  .nav__links, .nav__tel { display: none; }
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    padding: 0 16px; border-radius: 999px; border: 0; background: var(--green-light);
    color: #14261C; font-family: var(--sans); font-size: 13.5px; font-weight: 600; cursor: pointer;
  }
  .nav__bars { display: flex; flex-direction: column; gap: 3px; }
  .nav__bars i { width: 14px; height: 1.5px; background: #14261C; display: block; }
  .nav.is-scrolled .nav__toggle { background: var(--green); color: #FFFFFF; }
  .nav.is-scrolled .nav__bars i { background: #FFFFFF; }
  .nav__menu {
    display: none; flex-direction: column; gap: 2px; padding: 8px 0 18px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .nav.is-open .nav__menu { display: flex; }
  .nav__menu a { color: #E8E6DD; text-decoration: none; font-size: 17px; padding: 12px 0; min-height: 44px; display: flex; align-items: center; }
  .nav.is-scrolled .nav__menu { border-top-color: var(--line); }
  .nav.is-scrolled .nav__menu a { color: var(--ink); }

  /* hero inside one phone screen (844px at 390 wide) */
  .hero { padding-block: 32px 36px; }
  .hero__inner { grid-template-columns: 1fr; gap: 18px; }
  .hero__copy { gap: 18px; }
  .hero__actions { flex-direction: column; gap: 12px; }
  .hero__actions .btn { width: 100%; }
  .hero__photo { height: 196px; }
  .hero__card { margin: -64px 14px 0; padding: 14px 16px; gap: 10px; }
  .hero__card-head, .card-row { font-size: 13px; }
  .hero__tagline { font-size: 17px; }

  .builtfor { padding-block: 0 56px; gap: 22px; }
  .builtfor__row { flex-direction: column; align-items: stretch; gap: 18px; }
  .pill { align-self: flex-start; }
  .marquee { margin-inline: calc(var(--gutter) * -1); }
  .marquee__set { gap: 28px; padding-right: 28px; }
  .marquee__item { gap: 28px; padding-left: 22px; }
  .workedwith { align-items: flex-start; flex-direction: column; gap: 14px; }
  .workedwith__rule { width: 100%; }
  .workedwith__logos img { height: 28px; }

  /* stacked cards size to their content, never to a desktop height */
  .grid-3, .smallcases { grid-template-columns: 1fr; gap: 16px; }
  .card, .smallcase, .case { padding: 22px; }
  .case { padding: 24px; }

  .way { gap: 16px; padding: 24px 0; }
  .way__num { padding-top: 8px; }
  .way__arrow { width: 38px; height: 38px; margin-top: 4px; }

  .steps { gap: 32px; }
  .steps::before { left: 21px; }
  .step { gap: 18px; }
  .step__num { width: 44px; height: 44px; font-size: 13px; }

  .stat__v { font-size: 28px; }
  .quote-dark { font-size: 17px; padding: 20px; }
  .foot { padding-block: 40px 0; font-size: 14.5px; }
  .foot__top { grid-template-columns: 1fr 1fr; gap: 22px 20px; }
  .foot__about { grid-column: span 2; }
  .foot__contact { grid-column: span 2; }
  .foot__legal { margin-top: 24px; flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------- layout classes (no inline) */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
.split--faq { grid-template-columns: .85fr 1.15fr; }
.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 44px; }
.sec-head--row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.sec-head--row .sec-head__text { display: flex; flex-direction: column; gap: 16px; }
.band--top0 { padding-top: 8px; }
.white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cream2 { background: var(--cream-2); border-top: 1px solid #E6E2D6; border-bottom: 1px solid #E6E2D6; }
.sage-band { background: var(--sage); }
.case--lead { margin-bottom: 24px; }
.case__title { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -0.7px; }
.case__body { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.cta__band { padding-block: 120px; }
.who { margin-top: 4px; gap: 14px; }
.who__top { display: flex; align-items: center; gap: 12px; }
.who__top img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 55% 26%; flex-shrink: 0; }
.who__top b { display: block; font-size: 16px; }
.who__top small { color: var(--ink-mute); font-size: 14px; }
.inline-live { display: flex; align-items: center; gap: 6px; color: var(--brand-green); }
.dot--fail { background: #E27762; }

/* body sits below the fixed bar */
body { padding-top: 72px; }
html { scroll-padding-top: 88px; }
.nav__inner { min-height: 72px; }

@media (max-width: 900px) {
  body { padding-top: 62px; }
  html { scroll-padding-top: 74px; }
  .nav__inner { min-height: 62px; }
  .nav .btn--light { display: none; }

  .split, .split--even, .split--faq { grid-template-columns: 1fr; gap: 26px; }
  .sec-head, .sec-head--row { margin-bottom: 26px; gap: 13px; }
  .sec-head--row { flex-direction: column; align-items: flex-start; }
  .band--top0 { padding-top: 0; }
  .cta__band { padding-block: 72px 80px; }

  .hero { padding-block: 26px 28px; }
  .hero__photo { height: 150px; }
  .hero__card { margin: -70px 12px 0; }

  .panel__row { padding: 16px 18px; gap: 12px; }
  .panel__head { padding: 12px 18px; }
  .faq summary { padding: 19px 0; }
  .faq details > p, .faq details > div { padding-bottom: 19px; }
  .who { padding: 18px; }
  .who__top img { width: 44px; height: 44px; }
  .card { gap: 10px; }
  .case--lead { margin-bottom: 16px; }
  .logbox { padding: 18px; gap: 10px; font-size: 12.5px; }
  .foot__top { gap: 18px 20px; }
  .foot__about { gap: 12px; }
  .foot__legal { margin-top: 20px; padding-block: 14px 24px; }
}

.col { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 900px) { .col { gap: 13px; } }

/* Steps: a row with a line running across them on desktop, a numbered
   vertical rail on a phone (mobile study, 29 September). */
@media (min-width: 901px) {
  .steps { flex-direction: row; gap: 28px; }
  .steps::before { left: 26px; right: 26px; top: 26px; bottom: auto; width: auto; height: 1px; }
  .step { flex-direction: column; flex: 1 1 0; gap: 18px; }
  .step__body { padding-top: 0; }
  .step__body p { max-width: none; }
}
@media (max-width: 900px) {
  .hero { padding-block: 22px 24px; }
  .hero__photo { height: 136px; }
}

/* brand mark, inline so it takes the nav's colour state */
.nav__mark { color: var(--green-light); flex-shrink: 0; }
.nav.is-scrolled .nav__mark { color: var(--green); }
.foot__mark { color: var(--green-light); flex-shrink: 0; }
.cta__mark-svg { color: var(--green); }
.nav__menu { display: none; }

/* Phone hero photo: tall enough that the face is not hidden behind the card.
   Keeps the floating card from the board, but only just overlapping the edge. */
@media (max-width: 900px) {
  .hero__photo { height: 180px; object-position: 55% 30%; }
  .hero__card { margin: -28px 12px 0; }
}

/* ------------------------------------------- service page: shared pieces */
.hero--centred { padding-block: 104px 0; }
.hero__centre { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.hero__centre h1 { max-width: 16ch; }
.label--centred { justify-content: center; }
.lede--centred { text-align: center; max-width: 62ch; }
.hero__actions--centred { justify-content: center; }
.btn--self { align-self: flex-start; }

.plan-wrap { position: relative; padding-block: 56px 112px; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; box-shadow: 0 18px 40px rgba(27,28,26,.08); }
.plan__head { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px; color: var(--ink-mute); padding-bottom: 18px; }
.plan__row { display: grid; grid-template-columns: minmax(150px, auto) 1fr auto; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line-2); }
.plan__num { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.1px; color: var(--ink-mute); }
.plan__what { font-family: var(--serif); font-size: clamp(18px, 1.6vw, 22px); }
.plan__verdict { font-family: var(--mono); font-size: 10px; letter-spacing: 1.1px; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.plan__verdict--build { background: var(--sage-tint); border: 1px solid #C9D9C8; color: var(--brand-green); }
.plan__verdict--buy { background: #FFF4D6; border: 1px solid #EBD9A6; color: var(--amber-ink); }
.plan__verdict--leave { background: var(--cream); border: 1px solid var(--line); color: var(--ink-mute); }
.plan__foot { border-top: 1px solid var(--line-2); margin-top: 6px; padding-top: 18px; font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.caption--centred { text-align: center; margin-top: 14px; }

.plain-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plain-points li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.plain-points li::before { content: ''; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }

.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.check { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.5; }
.check__box { width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid var(--green); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; background: var(--white); }

.verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.verdict { background: var(--charcoal-2); border: 1px solid var(--line-dark); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.verdict__head { display: flex; flex-direction: column; gap: 10px; }
.verdict__tag { align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; border-radius: 999px; padding: 6px 12px; }
.verdict__tag--build { background: rgba(74,222,128,.18); color: var(--green-light); border: 1px solid rgba(74,222,128,.4); }
.verdict__tag--buy { background: rgba(217,154,43,.16); color: #E6B863; border: 1px solid rgba(217,154,43,.4); }
.verdict__tag--leave { background: rgba(243,241,233,.08); color: #C9C7BC; border: 1px solid rgba(243,241,233,.22); }
.verdict__when { font-size: 15px; color: #B6B4A9; }
.verdict__item { border-top: 1px solid var(--line-dark); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.verdict__who { font-family: var(--mono); font-size: 10px; letter-spacing: 1.1px; color: var(--green-light); }
.verdict__item p, .also p { font-size: 15.5px; line-height: 1.55; color: #D7D5CB; }
.alsos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.also { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line-dark); padding-top: 16px; }

.steps--3 .step { flex: 1 1 0; }

.quote-band { background: var(--deep-green); color: #F3F1E9; }
.quote-band blockquote { margin: 0; text-align: center; font-family: var(--serif); font-size: clamp(21px, 2.1vw, 30px); line-height: 1.45; max-width: 24ch; margin-inline: auto; }
.quote-band blockquote { max-width: 30ch; }
.quote-band__attrib { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; font-family: var(--sans); }
.quote-band__attrib img { height: 34px; width: 34px; object-fit: contain; border-radius: 5px; }
.quote-band__attrib b { display: block; font-size: 15px; font-weight: 700; }
.quote-band__attrib small { font-size: 13px; color: #D3D8CF; }
.quote-band cite { font-style: normal; text-align: left; }

.band--nobottom { padding-bottom: 0; }
.otherways { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.otherway { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.otherway:hover { color: var(--ink); border-color: var(--green); }
.otherway:hover .way__arrow { background: var(--green); color: #FFFFFF; border-color: var(--green); }
.otherway__kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 1.3px; color: var(--ink-mute); }
.otherway__title { font-family: var(--serif); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; }
.otherway__desc { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.otherway .way__arrow { margin-top: 10px; }

@media (max-width: 900px) {
  .hero--centred { padding-block: 26px 0; }
  .hero__centre { gap: 16px; }
  .hero__centre h1 { max-width: none; }
  .plan-wrap { padding-block: 28px 56px; }
  .plan { padding: 20px; }
  .plan__row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
  .plan__verdict { justify-self: start; }
  .verdicts, .alsos, .otherways { grid-template-columns: 1fr; gap: 16px; }
  .alsos { margin-top: 16px; }
  .verdict { padding: 20px; }
  .quote-band blockquote { max-width: none; }
  .quote-band__attrib { margin-top: 22px; }
  .check { font-size: 16px; }
}

/* ---------------------------------------- mid-page call to action strips */
.ctastrip {
  margin-top: 44px; background: var(--sage-tint); border: 1px solid #C9D9C8;
  border-radius: 16px; padding: 24px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.ctastrip p { font-family: var(--serif); font-size: clamp(19px, 1.7vw, 25px); line-height: 1.25; }
.ctastrip small { display: block; font-family: var(--sans); font-size: 14.5px; color: var(--ink-soft); margin-top: 6px; }
.ctastrip .btn { flex-shrink: 0; }
.dark .ctastrip { background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.28); }
.dark .ctastrip p { color: #F3F1E9; }
.dark .ctastrip small { color: #B6B4A9; }

/* ---------------------------------------------------------- contact form */
.cform { display: flex; flex-direction: column; gap: 18px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px; color: var(--ink-mute); text-transform: uppercase; }
.field input, .field textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; min-height: 48px; width: 100%;
}
.field textarea { resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #A8A69B; }
.field input:focus, .field textarea:focus { border-color: var(--green); outline: 2px solid rgba(21,128,61,.25); outline-offset: 1px; }
.cform button { align-self: flex-start; }
.cform__note { font-size: 15px; line-height: 1.55; min-height: 1.4em; }
.cform__note.is-ok { color: var(--brand-green); font-weight: 600; }
.cform__note.is-bad { color: #A3402F; font-weight: 600; }

@media (max-width: 900px) {
  .ctastrip { margin-top: 26px; padding: 20px; flex-direction: column; align-items: stretch; gap: 16px; }
  .ctastrip .btn { width: 100%; }
  .cform__row { grid-template-columns: 1fr; gap: 16px; }
  .cform button { align-self: stretch; }
}

/* ------------------------------------------- Automation page: dark hero */
.hero--dark { background: #1F2224; color: #F3F1E9; padding-block: 104px 96px; }
.hero--dark h1 { color: #F3F1E9; }
.hero--dark .lede--light { color: #C9C7BC; }
.hero__inner--wide { grid-template-columns: 1fr 1fr; gap: 56px; }
.btn--outline { border-color: rgba(243,241,233,.4); color: #F3F1E9; font-family: var(--mono); font-size: 14px; }
.btn--outline:hover { border-color: var(--green-light); color: var(--green-light); }
.inline-live--light { color: var(--green-light); }
.herostat { border-top: 1px solid rgba(243,241,233,.18); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.herostat__label { font-family: var(--mono); font-size: 10px; letter-spacing: 1.3px; color: #9A988D; }
.herostat p { font-size: 17px; color: #D7D5CB; }
.herostat b { font-family: var(--serif); font-size: 30px; color: var(--green-light); }
.herostat__foot { font-family: var(--mono); font-size: 11px; color: #9A988D; }

.pipeline { background: var(--charcoal-2); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.pipeline__head { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 1.1px; color: #9A988D; }
.pipeline__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.pipeline__steps li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line-dark); }
.pipeline__steps li:first-child { border-top: 0; }
.pipeline__n { font-family: var(--mono); font-size: 11px; color: var(--green-light); padding-top: 3px; }
.pipeline__steps b { display: block; font-size: 16px; color: #F3F1E9; }
.pipeline__steps small { font-size: 13.5px; color: #9A988D; }
.pipeline__foot { border-top: 1px solid var(--line-dark); padding-top: 16px; font-size: 14px; color: #B6B4A9; }

/* job list: open and close rows, first one open */
.joblist { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.joblist details { border-bottom: 1px solid var(--line); }
.joblist summary {
  list-style: none; cursor: pointer; padding: 22px 0; display: flex; align-items: center; gap: 18px;
}
.joblist summary::-webkit-details-marker { display: none; }
.joblist__n { font-family: var(--mono); font-size: 12px; color: var(--green); flex-shrink: 0; }
.joblist__t { font-family: var(--serif); font-size: clamp(21px, 2vw, 27px); flex-grow: 1; }
.joblist summary::after {
  content: '+'; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #D6D3C6; color: var(--brand-green);
  display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background .2s, color .2s;
}
.joblist details[open] summary::after { content: '\2212'; background: var(--green); border-color: var(--green); color: #FFFFFF; }
.joblist__body { padding: 0 0 24px 30px; display: flex; flex-direction: column; gap: 16px; }
.joblist__body p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; }
.flow span:not(.flow__arrow) { background: var(--sage-tint); border: 1px solid #C9D9C8; border-radius: 999px; padding: 7px 13px; color: var(--brand-green); }
.flow__arrow { color: var(--ink-faint); }

/* before and after */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.ba__col { border: 1px solid var(--line); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 16px; background: var(--cream); }
.ba__col--after { background: var(--sage-tint); border-color: #C9D9C8; }
.ba__tag { align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; color: var(--ink-mute); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--white); }
.ba__tag--after { color: var(--brand-green); border-color: #C9D9C8; }
.ba__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ba__col li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.ba__mark { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.ba__mark--x { background: #F4E3DF; color: #A3402F; }
.ba__mark--tick { background: #D9EADC; color: var(--brand-green); }

.bigstats { display: flex; gap: 48px; flex-wrap: wrap; padding: 24px 0 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.bigstat b { display: block; font-family: var(--serif); font-size: clamp(34px, 3.4vw, 46px); color: var(--brand-green); line-height: 1.05; }
.bigstat span { font-size: 15px; color: var(--ink-soft); }

.card__logo { height: 32px; width: auto; }
.card__logo--square { height: 32px; width: 32px; object-fit: contain; }
.card__wordmark { font-weight: 800; font-size: 16px; }
.quote-plain--standalone {
  margin-top: 28px; border-top: 0; background: var(--white); border: 1px solid #D9DFD4;
  border-radius: 16px; padding: 26px; font-size: clamp(17px, 1.6vw, 21px);
}
.quote-attrib--light { border-top-color: var(--line); }
.quote-attrib--light small { color: var(--ink-mute); }

@media (max-width: 900px) {
  .hero--dark { padding-block: 28px 44px; }
  .hero__inner--wide { grid-template-columns: 1fr; gap: 26px; }
  .pipeline { padding: 20px; }
  .joblist summary { padding: 18px 0; gap: 14px; }
  .joblist__body { padding: 0 0 18px 26px; }
  .ba { grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
  .ba__col { padding: 20px; }
  .bigstats { gap: 28px; padding: 20px 0 22px; margin-bottom: 20px; }
  .quote-plain--standalone { padding: 20px; margin-top: 18px; }
}

/* ---------------------------------------- Training page: sage mirrored hero */
.hero--sage { background: var(--sage); padding-block: 104px 112px; }
.hero__inner--mirror { grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: center; }
.sessionbox { background: var(--white); border: 1px solid #D9DFD4; border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 18px 40px rgba(27,28,26,.08); }
.sessionbox__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 1.1px; color: var(--ink-mute); }
.pill--sm { padding: 5px 10px; font-size: 9.5px; letter-spacing: 1.1px; }
.sessionbox__task { font-family: var(--serif); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; }
.sessionbox__draft { border-top: 1px solid var(--line-2); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.sessionbox__tag { align-self: flex-start; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.1px; color: var(--brand-green); background: var(--sage-tint); border: 1px solid #C9D9C8; border-radius: 999px; padding: 5px 11px; }
.sessionbox__check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.sessionbox__check .check__box { width: 24px; height: 24px; font-size: 13px; }

/* comparison table */
.compare-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; text-align: left; }
.compare th, .compare td { padding: 18px 20px; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; }
.compare thead th { font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 1.8vw, 25px); border-bottom: 1px solid var(--ink); vertical-align: bottom; }
.compare tbody th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px; color: var(--ink-mute); text-transform: uppercase; white-space: nowrap; width: 160px; }
.compare tbody td { color: var(--ink-soft); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare__start { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.2px; color: var(--brand-green); background: var(--sage-tint); border: 1px solid #C9D9C8; border-radius: 999px; padding: 5px 10px; width: max-content; margin-bottom: 10px; }
.compare b { color: var(--brand-green); }

/* the four-rung ladder */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: end; }
.rung { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.ladder .rung:nth-child(1) { margin-top: 72px; }
.ladder .rung:nth-child(2) { margin-top: 48px; }
.ladder .rung:nth-child(3) { margin-top: 24px; }
.rung--top { background: var(--sage-tint); border-color: #C9D9C8; }
.rung__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px; color: var(--brand-green); }
.rung p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* do and never paste in */
.romans { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.romans li { display: flex; gap: 14px; font-size: 17px; line-height: 1.5; color: #E4E2D8; }
.romans span { font-family: var(--mono); font-size: 12px; color: var(--green-light); flex-shrink: 0; padding-top: 3px; }
.dodont { display: flex; flex-direction: column; gap: 22px; }
.dodont__col { background: var(--charcoal-2); border: 1px solid var(--line-dark); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.dodont__tag { align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; border-radius: 999px; padding: 6px 12px; }
.dodont__tag--do { background: rgba(74,222,128,.18); color: var(--green-light); border: 1px solid rgba(74,222,128,.4); }
.dodont__tag--never { background: rgba(226,119,98,.15); color: #E9A294; border: 1px solid rgba(226,119,98,.4); }
.dodont ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dodont li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: #D7D5CB; }
.dark__note { margin-top: 32px; border-top: 1px solid var(--line-dark); padding-top: 24px; font-size: 16px; line-height: 1.6; color: #B6B4A9; max-width: 72ch; }

.trained__head { display: flex; align-items: center; gap: 12px; }
.badge { width: 34px; height: 34px; border-radius: 9px; background: var(--sage-tint); border: 1px solid #C9D9C8; color: var(--brand-green); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 17px; flex-shrink: 0; }

@media (max-width: 900px) {
  .hero--sage { padding-block: 26px 40px; }
  .hero__inner--mirror { grid-template-columns: 1fr; gap: 24px; }
  .hero--sage .hero__copy { order: -1; }
  .sessionbox { padding: 20px; }
  .ladder { grid-template-columns: 1fr; gap: 14px; }
  .ladder .rung:nth-child(1), .ladder .rung:nth-child(2), .ladder .rung:nth-child(3) { margin-top: 0; }
  .rung { padding: 20px; }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tbody tr { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
  .compare tbody th { width: auto; padding: 0 0 8px; border: 0; }
  .compare tbody td { padding: 6px 0 6px 18px; border: 0; position: relative; }
  .compare tbody td::before { content: ''; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
  .compare-td-label { font-family: var(--mono); font-size: 10px; letter-spacing: 1.1px; color: var(--ink-mute); display: block; }
  .dodont__col { padding: 18px; }
  .dark__note { margin-top: 22px; padding-top: 18px; }
}

/* ------------------------------------------------ About page: portrait hero */
.hero--about { padding-block: 88px 104px; }
.hero__inner--about { grid-template-columns: .82fr 1.18fr; gap: 56px; align-items: center; }
.portrait { position: relative; }
.portrait img { width: 100%; height: 480px; object-fit: cover; object-position: 55% 24%; border-radius: var(--radius); }
.portrait__chip {
  position: absolute; left: 20px; bottom: 20px; background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: 0 14px 30px rgba(27,28,26,.14);
}
.portrait__label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.2px; color: var(--ink-mute); }
.portrait__place { font-size: 15px; font-weight: 700; }
.pullquote {
  margin: 0; border-left: 3px solid var(--green); padding-left: 20px;
  font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.45; color: var(--ink);
}

.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pathstep { position: relative; padding-top: 26px; border-top: 2px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.pathstep::before { content: ''; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
.pathstep__n { font-family: var(--mono); font-size: 11px; color: var(--brand-green); }
.pathstep p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

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

.logline--row { justify-content: space-between; gap: 14px; }
.tagmono--light { color: var(--green-light); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; }
.logline--row .tagmono--amber { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: #E6B863; }

.worklist { margin-bottom: 44px; }
.worklist:last-of-type { margin-bottom: 0; }
.worklist__h {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px; color: var(--brand-green);
  text-transform: uppercase; padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: 0;
}
.worklist__items { margin: 0; display: flex; flex-direction: column; }
.worklist__items > div { display: grid; grid-template-columns: minmax(200px, .8fr) 1.2fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.worklist__items dt { font-family: var(--serif); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; }
.worklist__items dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

.otherways--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .hero--about { padding-block: 26px 40px; }
  .hero__inner--about { grid-template-columns: 1fr; gap: 24px; }
  .hero--about .hero__copy { order: -1; }
  .portrait img { height: 260px; }
  .pullquote { padding-left: 16px; }
  .path { grid-template-columns: 1fr; gap: 20px; }
  .grid-4 { grid-template-columns: 1fr; gap: 16px; }
  .worklist { margin-bottom: 28px; }
  .worklist__items > div { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .otherways--3 { grid-template-columns: 1fr; }
}

.hero--404 { padding-block: 120px 72px; }
@media (max-width: 900px) { .hero--404 { padding-block: 40px 32px; } }

/* ----------------------------------------- accessibility fixes, 29 Sep 2026
   From tools/check-a11y.mjs: three text colours sat under 4.5:1, the skip link
   could not be seen when focused, and several standalone links were under the
   44px tap target. */
:root {
  --ink-mute: #63645C;
  --ink-faint: #6A6B62;
}
.sr-only:focus, .sr-only:focus-visible {
  position: fixed; left: 16px; top: 16px; z-index: 100;
  width: auto; height: auto; margin: 0; clip: auto; white-space: normal;
  background: var(--near-black); color: #F3F1E9; padding: 14px 20px;
  border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav__links a { padding-block: 10px; }
.nav__tel { min-height: 44px; display: inline-flex; align-items: center; }
.nav__brand { min-height: 44px; }
.foot__brand, .foot__col a, .foot__about > a { min-height: 44px; display: inline-flex; align-items: center; }
.cta a.plain { min-height: 44px; display: inline-flex; align-items: center; }
.case > a, .col > a:not(.btn), .sec-head--row a, .worklist a { min-height: 44px; display: inline-flex; align-items: center; }
.foot__legal { color: #A5A399; }
.nav__links { gap: 18px; }
.nav__links a { padding-inline: 5px; }

/* ======================================================================
   MOTION, 29 September 2026.
   The pass six boards carry 21 animations; the first build of this site
   carried 7, and all of them were ambient background motion. On a phone the
   page is about 40 per cent longer than on desktop, so the same few
   animations spread thinner and the page reads as dead. The boards loop on a
   timer because a board cannot scroll. A real page should fire as you reach
   each section, which is what both reference sites do.
   ====================================================================== */

/* the missing keyframes, from the boards */
@keyframes wsDraw { from { stroke-dashoffset: 360; } to { stroke-dashoffset: 0; } }
@keyframes wsRowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wsType { 0%, 8% { width: 0; } 40%, 85% { width: 9ch; } 100% { width: 9ch; } }
@keyframes wsCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes wsStall { 0% { width: 0; } 35%, 100% { width: 38%; } }
@keyframes wsShimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@keyframes wsLog { 0% { opacity: 0; transform: translateX(-6px); } 12% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes wsLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wsLineY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes wsFlow { to { stroke-dashoffset: -400; } }
@keyframes wsPulseAmber {
  0% { box-shadow: 0 0 0 0 rgba(217,154,43,.5); }
  70% { box-shadow: 0 0 0 9px rgba(217,154,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,154,43,0); }
}
@keyframes wsStepOn {
  0% { background: #FFFFFF; color: var(--ink); border-color: #D6D3C6; }
  100% { background: var(--green); color: #FFFFFF; border-color: var(--green); }
}

/* --- the scroll reveal ------------------------------------------------
   Only hides things once the script has confirmed it is running, so the
   page is fully readable if the script never loads. */
/* the reveal targets, hidden in CSS so nothing flashes in before the script runs */
html.js .col,
html.js .hero__copy,
html.js .hero__media,
html.js .hero__centre,
html.js .sec-head,
html.js .card,
html.js .way,
html.js .rung,
html.js .verdict,
html.js .also,
html.js .otherway,
html.js .ba__col,
html.js .worklist,
html.js .ctastrip,
html.js .case,
html.js .smallcase,
html.js .pathstep,
html.js .quote-dark,
html.js .quote-band blockquote,
html.js .cform,
html.js .logbox,
html.js .pipeline,
html.js .plan,
html.js .checks,
html.js .ladder,
html.js .steps,
html.js .compare-wrap,
html.js .panel,
html.js .faq,
html.js .who,
html.js .bigstats,
html.js .builtfor__row,
html.js .workedwith,
html.js .joblist,
html.js .dodont,
html.js .romans,
html.js .quote-plain--standalone,
html.js .herostat,
html.js .numband__stat,
html.js .portrait,
html.js .stage__head {
  opacity: 0; transform: translateY(16px);
}
html.js .col.is-in,
html.js .hero__copy.is-in,
html.js .hero__media.is-in,
html.js .hero__centre.is-in,
html.js .sec-head.is-in,
html.js .card.is-in,
html.js .way.is-in,
html.js .rung.is-in,
html.js .verdict.is-in,
html.js .also.is-in,
html.js .otherway.is-in,
html.js .ba__col.is-in,
html.js .worklist.is-in,
html.js .ctastrip.is-in,
html.js .case.is-in,
html.js .smallcase.is-in,
html.js .pathstep.is-in,
html.js .quote-dark.is-in,
html.js .quote-band blockquote.is-in,
html.js .cform.is-in,
html.js .logbox.is-in,
html.js .pipeline.is-in,
html.js .plan.is-in,
html.js .checks.is-in,
html.js .ladder.is-in,
html.js .steps.is-in,
html.js .compare-wrap.is-in,
html.js .panel.is-in,
html.js .faq.is-in,
html.js .who.is-in,
html.js .bigstats.is-in,
html.js .builtfor__row.is-in,
html.js .workedwith.is-in,
html.js .joblist.is-in,
html.js .dodont.is-in,
html.js .romans.is-in,
html.js .quote-plain--standalone.is-in,
html.js .herostat.is-in,
html.js .numband__stat.is-in,
html.js .portrait.is-in,
html.js .stage__head.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}

/* --- foreground motion, fired when its section arrives ---------------- */

/* the underline drawing itself under the last word of the Home headline */
.underline { position: relative; display: inline-block; font-style: italic; color: var(--brand-green); }
.underline svg { position: absolute; left: 0; bottom: -0.12em; width: 100%; height: 0.22em; overflow: visible; }
.underline path { stroke-dasharray: 360; stroke-dashoffset: 360; }
html.js .is-in .underline path, html:not(.js) .underline path { animation: wsDraw 1.1s ease-out .35s forwards; }

/* invoice rows sliding into the hero card */
html.js .hero__card .card-row { opacity: 0; }
html.js .hero__media.is-in .card-row { animation: wsRowIn .5s ease-out both; }
.hero__media.is-in .card-row:nth-of-type(1) { animation-delay: .5s; }
.hero__media.is-in .card-row:nth-of-type(2) { animation-delay: .9s; }
.hero__media.is-in .card-row:nth-of-type(3) { animation-delay: 1.3s; }

/* the number typing itself in the first problem card */
.minibox--type span:last-child { display: inline-block; overflow: hidden; white-space: nowrap; position: relative; }
.card.is-in .minibox--type span:last-child { animation: wsType 5s steps(9) .4s infinite; }
.minibox--type span:last-child::after {
  content: ''; position: absolute; right: -3px; top: 12%; width: 2px; height: 76%;
  background: var(--green);
}
.card.is-in .minibox--type span:last-child::after { animation: wsCaret 1s step-end infinite; }

/* a bar that stalls, and a shimmer that goes nowhere */
.minibox--stall { position: relative; overflow: hidden; }
.minibox--stall::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--amber); }
.card.is-in .minibox--stall::after { animation: wsStall 4.5s ease-out infinite alternate; }
.minibox--shimmer { position: relative; overflow: hidden; }
.minibox--shimmer::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform: translateX(-120%);
}
.card.is-in .minibox--shimmer::after { animation: wsShimmer 3.4s ease-in-out 1s infinite; }

/* the check log filling in line by line */
html.js .logbox .logline { opacity: 0; }
html.js .logbox.is-in .logline { animation: wsLog 6s ease-out both infinite; }
.logbox.is-in .logline:nth-of-type(1) { animation-delay: .4s; }
.logbox.is-in .logline:nth-of-type(2) { animation-delay: 1.4s; }
.logbox.is-in .logline:nth-of-type(3) { animation-delay: 2.4s; }
.logbox.is-in .logline:nth-of-type(4) { animation-delay: 3.4s; }

/* the progress line travelling across the steps, numbers lighting up in turn */
.steps::before { transform-origin: left center; }
html.js .steps.is-in::before { animation: wsLine 2.6s ease-out .2s both; }
.steps.is-in .step:nth-child(2) .step__num { animation: wsStepOn .5s ease-out .9s both; }
.steps.is-in .step:nth-child(3) .step__num { animation: wsStepOn .5s ease-out 1.5s both; }
.steps.is-in .step:nth-child(4) .step__num { animation: wsStepOn .5s ease-out 2.1s both; }

/* the pipeline filling in, on the Automation page */
html.js .pipeline .pipeline__steps li { opacity: 0; }
html.js .pipeline.is-in .pipeline__steps li { animation: wsRowIn .5s ease-out both; }
.pipeline.is-in .pipeline__steps li:nth-child(1) { animation-delay: .3s; }
.pipeline.is-in .pipeline__steps li:nth-child(2) { animation-delay: .7s; }
.pipeline.is-in .pipeline__steps li:nth-child(3) { animation-delay: 1.1s; }
.pipeline.is-in .pipeline__steps li:nth-child(4) { animation-delay: 1.5s; }

/* the amber dot, which was the one dot not pulsing */
.dot--amber { animation: wsPulseAmber 2.4s ease-out 1.2s infinite; }

/* the tick boxes on the Consulting checklist landing one after another */
html.js .checks .check__box { opacity: 0; }
html.js .checks.is-in .check__box { animation: wsRowIn .45s ease-out both; }
.checks.is-in .check:nth-child(1) .check__box { animation-delay: .25s; }
.checks.is-in .check:nth-child(2) .check__box { animation-delay: .45s; }
.checks.is-in .check:nth-child(3) .check__box { animation-delay: .65s; }
.checks.is-in .check:nth-child(4) .check__box { animation-delay: .85s; }
.checks.is-in .check:nth-child(5) .check__box { animation-delay: 1.05s; }

/* the ladder rungs stepping up */
html.js .ladder .rung { opacity: 0; }
html.js .ladder.is-in .rung { animation: wsRowIn .55s ease-out both; }
.ladder.is-in .rung:nth-child(1) { animation-delay: .1s; }
.ladder.is-in .rung:nth-child(2) { animation-delay: .3s; }
.ladder.is-in .rung:nth-child(3) { animation-delay: .5s; }
.ladder.is-in .rung:nth-child(4) { animation-delay: .7s; }

/* A visitor who has asked for less motion gets no animations at all, so
   anything that only an animation brings into view is shown here instead
   (found 30 September 2026: the check log lines, the Consulting tick boxes
   and the Training ladder stayed invisible with reduced motion on). */
@media (prefers-reduced-motion: reduce) {
  html.js .logbox .logline,
  html.js .hero__card .card-row,
  html.js .pipeline .pipeline__steps li,
  html.js .checks .check__box,
  html.js .ladder .rung { opacity: 1; }
  .underline path { stroke-dashoffset: 0; }
}

/* Nothing above runs for a visitor who has asked for less motion. The rule at
   the end of this file switches every animation and transition off, and the
   .rise elements are shown by the script instead. */

/* The sage Training hero had no ambient motion of its own, so the top of that
   page sat still. Same treatment as the other heroes, without extra markup. */
.hero--sage { position: relative; overflow: hidden; }
.hero--sage::before, .hero--sage::after { content: ''; position: absolute; pointer-events: none; border-radius: 50%; }
.hero--sage::before {
  width: 560px; height: 560px; right: -200px; top: -220px;
  background: radial-gradient(circle, rgba(21,128,61,.22), rgba(21,128,61,0) 64%);
  animation: wsDrift1 16s ease-in-out infinite alternate;
}
.hero--sage::after {
  width: 460px; height: 460px; left: -200px; bottom: -200px;
  background: radial-gradient(circle, rgba(120,160,138,.18), rgba(120,160,138,0) 64%);
  animation: wsDrift2 20s ease-in-out infinite alternate;
}
.hero--sage > .wrap { position: relative; }

/* The 44px rule added for tap targets re-showed the phone number in the bar on
   a phone, where it wrapped onto a second line. It belongs to desktop only;
   on a phone the number is in the menu. */
@media (max-width: 900px) {
  .nav__tel { display: none; }
}

/* ------------------------------------------------ review notes, 30 Sep 2026
   The amber markers (unsourced facts, unwritten answers) stay out of the way
   until they are asked for, so the design can be judged on its own. A small
   button shows them; "?review" on the address shows them from the start.
   The button disappears on its own once no markers are left on a page. */
html.js .todo { display: none; }
html.js.show-notes .todo { display: inline-block; }
html.js.show-notes .todo--block { display: block; }
html.js:not(.show-notes) .faq details > div:has(> .todo:only-child)::before {
  content: 'Answer being written.'; font-style: italic; color: var(--ink-mute);
}
.notes-pill {
  position: fixed; left: 16px; bottom: 16px; z-index: 70;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px dashed var(--amber); background: #FFF4D6; color: var(--amber-ink);
  font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 24px rgba(27,28,26,.14);
}
.notes-pill:hover { background: #FFEDC2; }
@media (max-width: 900px) {
  .notes-pill { left: 12px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); font-size: 12.5px; padding: 0 14px; }
}
@media print { .notes-pill { display: none; } }
.notes-pill__short { display: none; }
@media (max-width: 900px) {
  .notes-pill { left: auto; right: 12px; }
  .notes-pill__long { display: none; }
  .notes-pill__short { display: inline; }
}

/* ------------------------------------------ WorkSimpleAi, 13 October 2026
   Who I help: one card per industry near the top of Home, and a wordmark for
   clients with no logo file. Below 900px the cards stack in one column. */
.ind { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ind__card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 24px 24px 22px; background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; text-decoration: none; color: var(--ink);
  transition: border-color .2s;
}
.ind__card:hover { color: var(--ink); border-color: var(--green); }
.ind__card:hover .way__arrow { background: var(--green); color: #FFFFFF; border-color: var(--green); }
.ind__card .way__arrow { position: absolute; top: 16px; right: 16px; margin-top: 0; }
.ind__name { font-family: var(--serif); font-size: 25px; line-height: 1.15; padding-right: 56px; }
.ind__desc { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.smallcase__word { font-weight: 700; font-size: 16px; color: var(--ink); }
@media (max-width: 900px) {
  .ind { grid-template-columns: 1fr; gap: 12px; }
  .ind__card { padding: 20px 20px 18px; }
  .ind__name { font-size: 22px; }
}

/* Websites and Leads hero: today's enquiries, as an illustration */
.leads {
  margin: 0; background: var(--white); border: 1px solid #D9DFD4; border-radius: 18px;
  overflow: hidden; box-shadow: 0 30px 60px -32px rgba(28,32,29,.28);
}
.leads__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 12px; letter-spacing: 1.1px; color: var(--ink-mute);
}
.leads__row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 18px 22px; border-top: 1px solid var(--line-2);
}
.leads__head + .leads__row { border-top: 0; }
.leads__row b { display: block; font-size: 17px; color: var(--ink); }
.leads__row small { display: block; font-size: 14px; color: var(--ink-mute); margin-top: 3px; }
.leads__tag {
  flex-shrink: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .8px; white-space: nowrap;
  color: var(--brand-green); background: var(--sage-tint); border: 1px solid #D5E3D3;
  border-radius: 999px; padding: 6px 11px;
}
.leads__tag--amber { color: var(--amber-ink); background: #FBF3E4; border-color: #EED9B5; }
.card .plain-points li { font-size: 16px; }
@media (max-width: 900px) {
  .leads__head, .leads__row { padding-inline: 16px; }
  .leads__row b { font-size: 16px; }
  .leads__tag { font-size: 11px; padding: 5px 9px; }
}

/* Nav on mid-size screens (901 to 1340px): six links no longer fit beside the
   phone number, so the phone number and the Contact link step out (both stay in
   the footer and the closing call) and the bar tightens. Nothing wraps. */
.nav__brand { flex-shrink: 0; }
.nav__links a, .nav__tel, .nav .btn { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1340px) {
  .nav__inner.wrap { padding-inline: 32px; gap: 20px; }
  .nav__brand img { height: 28px; }
  .nav__links { gap: 16px; }
  .nav__links a { font-size: 14px; }
  .nav__tel, .nav__links a[href="index.html#contact"] { display: none; }
}

/* Home hero: an AI assistant's day, matching the headline line by line.
   At rest (and for visitors who ask for less motion) it shows the finished
   day. While on screen it runs a 12 second loop: each row works, then lands,
   one after another, and the "needs you" box lights up last. */
.day {
  margin: 0; position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: 22px; padding: 22px 22px 18px;
  box-shadow: 0 40px 80px -30px rgba(27,28,26,.28), 0 1px 0 rgba(27,28,26,.03);
  animation: wsFloat 7s ease-in-out infinite;
}
.day__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; color: var(--ink-mute);
  padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
}
.day__live { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-green); white-space: nowrap; }
.day__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(22,163,74,.16); }
.day__row {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 8px; border-radius: 10px;
}
.day__row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-2); }
.day__t b { display: block; font-size: 16.5px; color: var(--ink); }
.day__t small { display: block; font-size: 14px; color: var(--ink-mute); margin-top: 3px; }
.day__tag { display: inline-grid; justify-items: end; flex-shrink: 0; }
.day__wait, .day__done {
  grid-area: 1 / 1; font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; white-space: nowrap;
  border-radius: 999px; padding: 6px 11px; border: 1px solid;
}
.day__wait { color: var(--amber-ink); background: #FBF3E4; border-color: #EED9B5; opacity: 0; }
.day__done { color: var(--brand-green); background: var(--sage-tint); border-color: #D5E3D3; }
.day__you {
  display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 14px;
  background: var(--sage-tint); border: 1px solid #C9D9C8;
}
.day__avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--white); border: 1px solid #C9D9C8;
  color: var(--brand-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.day__who { display: flex; flex-direction: column; gap: 2px; }
.day__who b { font-size: 15px; color: var(--ink); }
.day__who small { font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
.v3 .day__cap { margin-top: 14px; text-align: right; }

.day__list { position: relative; }
.day__k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--brand-green); margin-bottom: 4px; }
.day__scan {
  position: absolute; left: -6px; right: -6px; top: 0; height: 2px; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(22,163,74,0), #16A34A 18%, #16A34A 82%, rgba(22,163,74,0));
  box-shadow: 0 0 14px 2px rgba(22,163,74,.35);
}
.day.is-live .day__dot { animation: dayPulse 1.6s ease-in-out infinite; }
.day.is-live .day__scan { animation: dayScan 10s linear infinite; }
.day.is-live .day__row--1 .day__wait { animation: dayWait1 10s linear infinite; }
.day.is-live .day__row--1 .day__done { animation: dayDone1 10s ease-out infinite; }
.day.is-live .day__row--2 .day__wait { animation: dayWait2 10s linear infinite; }
.day.is-live .day__row--2 .day__done { animation: dayDone2 10s ease-out infinite; }
.day.is-live .day__row--3 .day__wait { animation: dayWait3 10s linear infinite; }
.day.is-live .day__row--3 .day__done { animation: dayDone3 10s ease-out infinite; }
.day.is-live .day__row--4 .day__wait { animation: dayWait4 10s linear infinite; }
.day.is-live .day__row--4 .day__done { animation: dayDone4 10s ease-out infinite; }
.day.is-live .day__row--5 .day__wait { animation: dayWait5 10s linear infinite; }
.day.is-live .day__row--5 .day__done { animation: dayDone5 10s ease-out infinite; }
.day.is-live .day__row--1 { animation: dayRow1 10s ease-out infinite; }
.day.is-live .day__row--2 { animation: dayRow2 10s ease-out infinite; }
.day.is-live .day__row--3 { animation: dayRow3 10s ease-out infinite; }
.day.is-live .day__row--4 { animation: dayRow4 10s ease-out infinite; }
.day.is-live .day__row--5 { animation: dayRow5 10s ease-out infinite; }
.day.is-live .day__you { animation: dayYou 10s ease-out infinite; }

/* The scan line sweeps the list from 2% to 70% of the loop; each row works
   while the line crosses it and lands as the line leaves it. */
@keyframes dayPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,.18); } 50% { box-shadow: 0 0 0 7px rgba(22,163,74,.06); } }
@keyframes dayScan { 0%, 2% { top: 0; opacity: 0; } 3% { opacity: 1; } 70% { top: 100%; opacity: 1; } 72%, 100% { top: 100%; opacity: 0; } }
@keyframes dayWait1 { 0%, 2% { opacity: 0; } 3%, 14.5% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes dayDone1 { 0%, 15% { opacity: 0; transform: scale(.85); } 17%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dayWait2 { 0%, 15.6% { opacity: 0; } 16.6%, 28% { opacity: 1; } 29.5%, 100% { opacity: 0; } }
@keyframes dayDone2 { 0%, 29% { opacity: 0; transform: scale(.85); } 31%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dayWait3 { 0%, 29.2% { opacity: 0; } 30.2%, 41.6% { opacity: 1; } 43%, 100% { opacity: 0; } }
@keyframes dayDone3 { 0%, 42.6% { opacity: 0; transform: scale(.85); } 44.6%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dayWait4 { 0%, 42.8% { opacity: 0; } 43.8%, 55.2% { opacity: 1; } 56.6%, 100% { opacity: 0; } }
@keyframes dayDone4 { 0%, 56.2% { opacity: 0; transform: scale(.85); } 58.2%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dayWait5 { 0%, 56.4% { opacity: 0; } 57.4%, 68.8% { opacity: 1; } 70.2%, 100% { opacity: 0; } }
@keyframes dayDone5 { 0%, 69.8% { opacity: 0; transform: scale(.85); } 71.8%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dayRow1 { 0%, 15% { background: transparent; } 17% { background: var(--sage-tint); } 24%, 100% { background: transparent; } }
@keyframes dayRow2 { 0%, 29% { background: transparent; } 31% { background: var(--sage-tint); } 38%, 100% { background: transparent; } }
@keyframes dayRow3 { 0%, 42.6% { background: transparent; } 44.6% { background: var(--sage-tint); } 51.6%, 100% { background: transparent; } }
@keyframes dayRow4 { 0%, 56.2% { background: transparent; } 58.2% { background: var(--sage-tint); } 65.2%, 100% { background: transparent; } }
@keyframes dayRow5 { 0%, 69.8% { background: transparent; } 71.8% { background: var(--sage-tint); } 78.8%, 100% { background: transparent; } }
@keyframes dayYou {
  0%, 74% { opacity: .45; background: var(--sage-tint); border-color: #C9D9C8; box-shadow: none; }
  77%, 89% { opacity: 1; background: #FFF8E6; border-color: #EBD9A6; box-shadow: 0 0 0 5px rgba(217,154,43,.16); }
  92%, 96% { opacity: 1; background: var(--sage-tint); border-color: #C9D9C8; box-shadow: none; }
  100% { opacity: .45; }
}
@media (max-width: 900px) {
  .day { padding: 18px 16px 14px; border-radius: 18px; animation: none; }
  .day__head { font-size: 11px; }
  .day__row { padding: 11px 6px; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 0; align-items: center; }
  .day__t { display: contents; }
  .day__k { font-size: 10px; grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .day__tag { grid-column: 2; grid-row: 1; }
  .day__t b { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
  .day__t small { grid-column: 1 / -1; grid-row: 3; }
  .day__t b { font-size: 16px; }
  .day__t small { font-size: 13.5px; }
  .day__wait, .day__done { font-size: 11px; padding: 5px 9px; }
  .v3 .day__cap { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .day { animation: none; } }

/* "Work slips through the cracks": warmer problem cards. A soft amber edge and
   mini box for the problem, a line icon, and a sage strip at the foot showing
   what AI does about it. Light touches only; the cards stay mostly white. */
.probs .prob {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF9F3 100%);
  box-shadow: 0 22px 44px -32px rgba(27,28,26,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.probs .prob::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: #7FA08C;
}
@media (hover: hover) { .probs .prob:hover { transform: translateY(-3px); box-shadow: 0 28px 50px -30px rgba(27,28,26,.32); } }
.probs .minibox { position: relative; overflow: hidden; background: #EEF2EF; border-color: #D6DFD9; color: #45574D; }
.probs .minibox::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: #7FA08C; transform: none;
}
/* All three cards share one effect: a slow timer bar that fills the box from
   left to right, the time each of these jobs sits waiting. Staggered so they
   don't move in step. */
.probs .card.is-in .minibox::after { animation: probStall 5.5s ease-out infinite; }
.probs .card:nth-child(2).is-in .minibox::after { animation-delay: .7s; }
.probs .card:nth-child(3).is-in .minibox::after { animation-delay: 1.4s; }
@keyframes probStall { 0% { width: 0; opacity: 1; } 80% { width: 100%; opacity: 1; } 92%, 100% { width: 100%; opacity: 0; } }
.prob__top { display: flex; align-items: center; gap: 12px; }
.prob__icon {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #EEF2EF; border: 1px solid #D6DFD9; color: #45574D;
}
.probs .card .prob__fix {
  margin-top: auto; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 12px; background: var(--sage-tint); border: 1px solid #D5E3D3;
  font-size: 15px; line-height: 1.5; color: var(--ink);
}
.prob__fix b { color: var(--brand-green); }
.prob__tick {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; background: var(--green); color: #FFFFFF;
}
@media (prefers-reduced-motion: reduce) { .probs .prob { transition: none; } }
@media (max-width: 900px) { .probs .card .prob__fix { margin-top: 4px; font-size: 14.5px; } }

/* Client marks for NPTA Canada and Tri City Group (13 October 2026): a small
   square tile beside the name, wherever the name appears. */
.ww { display: inline-flex; align-items: center; gap: 8px; }
.workedwith__logos .ww img { height: 30px; width: 30px; object-fit: cover; border-radius: 6px; }
.smallcase__brand { display: inline-flex; align-items: center; gap: 10px; }
.smallcase__head .smallcase__brand img { height: 30px; width: 30px; object-fit: cover; border-radius: 6px; }
.smallcase__who { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.card__brand { display: inline-flex; align-items: center; gap: 10px; }
.card__brand img { height: 32px; width: 32px; object-fit: cover; border-radius: 6px; }
.also__brand { display: flex; align-items: center; gap: 10px; }
.also__brand img { height: 28px; width: 28px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.badge--logo { padding: 0; overflow: hidden; background: var(--white); }
.badge--logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------- WorkSimpleAi, 13 October 2026, late
   Three services: Lead Generation, AI Automation and AI Consulting, written
   mainly for trades and realtors, with room for every other local business. */

/* Home hero card: the example-day switch for trades, realtors or any business.
   Hidden until the script runs, because only the script can switch the day. */
.day__pick { display: none; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 0 6px; }
html.js .day__pick { display: flex; }
.day__pick-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-right: 2px; }
.day__opt {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--ink-soft);
  background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; min-height: 44px;
  cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.day__opt:hover { border-color: var(--green); color: var(--brand-green); }
.day__opt[aria-pressed="true"] { background: var(--sage-tint); border-color: #C9D9C8; color: var(--brand-green); }
.day__opt:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 900px) {
  .day__pick { gap: 6px; padding: 12px 0 4px; }
  .day__pick-label { flex-basis: 100%; margin: 0 0 2px; }
  .day__opt { font-size: 13.5px; padding: 0 14px; }
}

/* Home "Who I help": trades and realtors as the two large cards, every other
   local business in one wide card beneath them. */
.ind--lead { grid-template-columns: 1fr 1fr; }
.ind__card--big { padding: 30px 30px 28px; gap: 10px; }
.ind__card--big .ind__name { font-size: clamp(26px, 2.3vw, 31px); }
.ind__card--big .ind__desc { font-size: 16.5px; max-width: 46ch; }
.ind__card--wide { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 24px; padding: 22px 80px 22px 30px; }
.ind__card--wide .ind__name { flex-shrink: 0; padding-right: 0; }
.ind__card--wide .way__arrow { top: 50%; transform: translateY(-50%); }
@media (max-width: 900px) {
  .ind--lead { grid-template-columns: 1fr; }
  .ind__card--big { padding: 22px 20px 20px; }
  .ind__card--big .ind__name { font-size: 24px; }
  .ind__card--wide { flex-direction: column; gap: 8px; padding: 20px 20px 18px; }
  .ind__card--wide .ind__name { padding-right: 56px; }
  .ind__card--wide .way__arrow { top: 16px; transform: none; }
}

/* Lead Generation: the jobs in four steps, each step on the left and its
   jobs on the right; one column below 900px. */
.stages { display: flex; flex-direction: column; gap: 48px; }
.stage { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 48px; align-items: start; }
.stage__head { padding-top: 18px; }
.stage__n { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--brand-green); margin-bottom: 10px; }
.stage__t { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; margin-bottom: 8px; }
.stage__d { font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.joblist__more { margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 900px) {
  .stages { gap: 36px; }
  .stage { grid-template-columns: 1fr; gap: 14px; }
  .stage__head { padding-top: 0; }
}

/* AI Consulting: the team section, moved from the old Training page. The
   practice task sits beside the copy, and the comparison runs beneath. */
.team { align-items: center; }
.team__compare { margin-top: 56px; }
@media (max-width: 900px) { .team__compare { margin-top: 36px; } }