/* 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; }

/* ------------------------------------------- the menu button, under 1100 */
/* With the full service names, the menu and the "Book a free call" button need
   about 1,005px side by side, so the Menu button takes over up to 1,100px,
   leaving room for wider fonts. The rest of the page still switches to the
   phone layout at 900px. */
@media (max-width: 1100px) {
  .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 var(--gutter) 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); }
}

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

  body { font-size: 17px; }

  /* 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; }
/* The business card page (/card, 27 October 2026), made to match the printed
   card: charcoal with the green chevron at the right edge and the card's heavy
   sans headline. Phone first, since nearly everyone arrives by scanning the QR
   code. The text keeps clear of the chevron at every width. */
.cardhero { position: relative; overflow: hidden; background: var(--charcoal-2); color: #F3F1E9; }
.cardhero { padding-block: 64px 72px; }
.cardhero__chev { position: absolute; top: -1px; right: -1px; width: calc(clamp(42px, 11vw, 240px) + 1px); height: calc(100% + 2px); }
.cardhero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-right: max(var(--gutter), calc(clamp(42px, 11vw, 240px) + 18px)); }
.cardhero .label { color: #B9B7AD; }
.cardhero .label::before { background: var(--green-light); }
.cardhero__title { margin: 0; font-family: var(--sans); font-weight: 800; letter-spacing: -.025em; color: #FAFAF8; text-wrap: balance; }
.cardhero__title { font-size: clamp(38px, 6.2vw, 88px); line-height: 1.02; }
.cardhero__title span { color: var(--green-light); }
.cardhero__title span { display: block; }
.cardhero__lede { margin: 0; max-width: 36em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: #D7D5CB; }
.cardhero__note { margin: 0; font-size: 15px; color: #B9B7AD; }
.cardhero__note a { color: #F3F1E9; }
.cardbtns { display: flex; flex-wrap: wrap; gap: 12px; }
.cardhero .byline__text, .v3 .cardhero .byline__text { color: #C9C7BC; font-size: 17px; max-width: 30em; }
.v3 .cardhero .byline b { color: #FAFAF8; }
.v3 .cardhero .byline__pic { box-shadow: 0 0 0 3px var(--charcoal-2), 0 0 0 4px #4A4F52; }
/* Card page review (Liam, 28 October). The charcoal top fills the first screen
   under the menu, so the page opens on it alone; the content sits in the middle
   top to bottom. The line beside the photo is plain sans, not italic. Rows of
   "Book a free meeting" and "Call or text" after the five things and after the
   steps, so there is always a way to reach Liam near at hand. */
.cardhero { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); }
.cardhero > .cardhero__inner { width: 100%; }
/* the card's arrow (Liam, 28 October: on a tall phone screen the full-height
   arrow was stretched into a near-straight line). It now keeps the card's own
   shape at every size: drawn at its true proportions as wide as the strip, in
   the middle top to bottom, and above and below it the strip carries on
   straight in the same green, dark green and cream. The strip is never wider
   than 0.3 of the screen's height, so the arrow always fits top to bottom. */
.cardhero { --chev-w: min(clamp(42px, 17vw, 240px), calc((100vh - 72px) * .3)); --chev-gap: 18px; }
@supports (height: 100svh) { .cardhero { --chev-w: min(clamp(42px, 17vw, 240px), calc((100svh - 72px) * .3)); } }
.cardhero__chev--fit { width: calc(var(--chev-w) + 1px); background: linear-gradient(to right, #22C55E 0 8.333%, #15803D 8.333% 23.333%, #F8F7F2 23.333%); }
.cardhero > .cardhero__inner { padding-right: max(var(--gutter), calc(var(--chev-w) + var(--chev-gap))); }
@media (max-width: 600px) { .cardhero { --chev-w: clamp(44px, 14vw, 56px); --chev-gap: 12px; } }
.cardhero .byline__text, .v3 .cardhero .byline__text { font-family: var(--sans); font-style: normal; font-size: 15.5px; line-height: 1.4; gap: 2px; max-width: 19em; }
.v3 .cardhero .byline b { font-size: 18px; }
/* the photo sits at the top, like a business card (28 October 2026): photo,
   name, title, so his face is on the first screen on every phone */
.v3 .cardhero .cardhero__me { margin: 0 0 4px; gap: 14px; }
.v3 .cardhero .cardhero__me .byline__pic { width: 84px; height: 100px; border-radius: 12px; }
.cardhero__me small { font-size: 14px; color: #9C9A90; }
@media (max-width: 600px) {
  .v3 .cardhero .cardhero__me .byline__pic { width: 68px; height: 80px; border-radius: 10px; }
  .cardhero .cardhero__me .byline__text { font-size: 14.5px; }
  .v3 .cardhero .cardhero__me b { font-size: 17px; }
}
.cardcta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(32px, 4vw, 48px); text-align: center; }
.cardcta__lead { margin: 0; font-family: var(--serif); font-size: clamp(21px, 1.9vw, 26px); line-height: 1.3; color: var(--ink); }
.cardcta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cardcta .btn { gap: 10px; box-shadow: 0 8px 16px -10px rgba(27,28,26,.45); }
@media (max-width: 900px) { .cardhero { min-height: calc(100vh - 62px); min-height: calc(100svh - 62px); } }
@media (max-width: 600px) {
  .cardcta__btns { flex-direction: column; align-self: stretch; }
  .cardcta .btn { width: 100%; }
}
/* More air in the charcoal top, and bigger words on a laptop (Liam, 28 October:
   the photo, the lines beside it and "See how it works" sat too close, with
   empty space around). The gaps grow with the screen's height. */
.cardhero > .cardhero__inner { gap: clamp(22px, 3vh, 36px); }
.cardhero__how { margin-top: clamp(0px, 1vh, 12px); }
@media (min-width: 901px) {
  .v3 .cardhero .cardhero__me { margin-bottom: clamp(4px, 1.6vh, 18px); gap: 18px; }
  .v3 .cardhero .cardhero__me .byline__pic { width: 100px; height: 120px; border-radius: 14px; }
  .cardhero .cardhero__me .byline__text, .v3 .cardhero .cardhero__me .byline__text { font-size: 17.5px; gap: 4px; }
  .v3 .cardhero .cardhero__me b { font-size: 21px; }
  .cardhero__me small { font-size: 15.5px; }
  .cardhero__lede { font-size: clamp(18px, 1.55vw, 23px); max-width: 38em; text-wrap: pretty; }
  .cardhero .cardbtns .btn { min-height: 58px; padding: 16px 32px; font-size: 17.5px; }
  .cardhero__note { font-size: 16.5px; }
  .cardhero__how { font-size: 18px; }
}
/* See how it works on a wide screen (1280px and up; below that the words get too
   squeezed beside the card): the words and buttons on the left, the
   example card on the right, instead of one narrow column with space either side */
@media (min-width: 1280px) {
  section.cardhow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); grid-template-areas: "head demo" "cta demo"; column-gap: clamp(48px, 6vw, 112px); row-gap: 8px; align-items: center; }
  .cardhow .cardhow__head { grid-area: head; align-self: end; align-items: flex-start; max-width: 540px; margin: 0; text-align: left; }
  .cardhow .cardhow__head .label { justify-content: flex-start; }
  .cardhow__head .lede { font-size: clamp(18px, 1.4vw, 21px); }
  .cardhow .cardhow__demo { grid-area: demo; }
  .cardhow .cardcta { grid-area: cta; align-self: start; align-items: flex-start; margin-top: 18px; text-align: left; }
  .cardhow .cardcta__btns { justify-content: flex-start; }
}

/* Card page, short version (28 October 2026, after a Perplexity search): the
   charcoal top, one example of how it works, real work and a review, then the
   calendar and links on to the full site. */
/* "See how it works" at the foot of the charcoal top */
.cardhero__how { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--green-light); text-decoration: none; }
.cardhero__how svg { transition: transform .25s; }
.cardhero__how:hover svg { transform: translateY(3px); }
/* see how it works: Home's example card, centred, with a booking row under it */
.cardhow { display: flex; flex-direction: column; align-items: center; }
.cardhow__head { align-items: center; max-width: 640px; margin-inline: auto; text-align: center; }
.cardhow__head .label { justify-content: center; }
.cardhow__head .lede { text-wrap: pretty; }
/* phones and tablets: the heading in two even lines, "What your personalized /
   setup could look like."; on a phone the size shrinks just enough for the first
   half to fit. The wide-screen layout keeps its own breaks */
@media (max-width: 1279px) { .cardhow__title > span { display: block; } }
@media (max-width: 600px) { .cardhow__title { font-size: min(34px, calc((100vw - 2 * var(--gutter)) / 11)); } }
.cardhow__demo { width: 100%; max-width: 560px; }
/* real work: three clients, a logo and one line each, then the review */
.cardwork { display: flex; flex-direction: column; gap: 56px; }
.cardwork__head { margin-bottom: 0; }
.cardwork__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cardwork__item { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--cream); border: 1px solid var(--line); border-radius: 16px; }
.cardwork__logo { display: flex; align-items: center; height: 44px; }
.cardwork__logo img { width: auto; height: 100%; max-width: 160px; object-fit: contain; object-position: left center; border-radius: 6px; }
.cardwork__text { display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.cardwork__text b { font-size: 17px; line-height: 1.35; color: var(--ink); }
/* a real review from a plumber, centred */
.cardquote { margin: 0 auto; max-width: 780px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.cardquote__stars { color: var(--amber); }
.cardquote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(23px, 2.4vw, 32px); line-height: 1.4; color: var(--ink); text-wrap: balance; }
.cardquote figcaption { display: flex; align-items: center; gap: 12px; text-align: left; }
.cardquote figcaption img { height: 34px; width: auto; border-radius: 5px; }
.cardquote figcaption span { display: flex; flex-direction: column; font-size: 14px; line-height: 1.4; color: var(--ink-mute); }
.cardquote figcaption b { font-size: 15px; color: var(--ink); }
.cardquote .textlink { min-height: 44px; display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .cardhero__how svg { transition: none; } }
@media (max-width: 900px) {
  .cardwork { gap: 40px; }
  .cardwork__list { grid-template-columns: 1fr; gap: 12px; }
  .cardwork__item { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px; }
  .cardwork__logo { flex: none; width: 72px; height: auto; padding-top: 3px; }
  .cardwork__logo img { width: 100%; height: auto; max-width: none; }
}
@media (max-width: 600px) {
  .cardhero { padding-block: 44px 52px; }
  .cardbtns { flex-direction: column; align-self: stretch; }
  .cardbtns .btn { width: 100%; }
}

/* the booking calendar (27 October 2026; inside the Get in touch box since 28
   October): Calendly loads into the white box in the background (site.js),
   with a waiting line behind it */
.calbox { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.calbox__frame { position: relative; height: 700px; }
.calbox__frame iframe { position: relative; z-index: 1; display: block; }
.calbox__wait { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--ink-mute); }
html:not(.js) .calbox { display: none; }
@media (max-width: 600px) {
  .calbox { margin-inline: -8px; border-radius: 14px; }
  .calbox__frame { height: 860px; }
}

/* dark buttons (Call/text) and the full-width send button under the form */
.btn--dark { background: var(--charcoal); color: #FFFFFF; }
.btn--dark:hover { background: #3A3F42; color: #FFFFFF; }
.cform .cform__send { align-self: stretch; min-height: 54px; font-size: 17px; gap: 10px; }
@media (max-width: 380px) { .hero--home .herobtns .btn { font-size: 14px; } }

/* Get in touch (Home, 28 October 2026): the closing band holds one white
   box with three tabs across its top: book a meeting, send a message, call or
   text. "Pick how to reach me" sits above the tabs, with the same nudging arrow
   as "Pick your business" in the hero. Each tab looks like a folder tab with a
   round mark at its end, filled with a tick on the open one, so it reads as
   "choose one". The open tab is white and joins the box; the others are
   darker cream and lighten on hover. On a phone the tabs stay side by side,
   icon over name, mark in the corner. The band is a slightly quieter green
   than the brand green (Liam, 28 October: "a bit bold", then "just a bit more
   vibrant" than the first try, #27523A). Without JavaScript
   there are no tabs and all three show. */
.cta.touch { background: #1F5C36; }
.touch .cta__glow { opacity: .6; }
.touch h2 .touch__em { color: #86EFAC; }
/* .cta__band.touch__inner: stronger than the site's general .cta__band padding (120 px) */
.touch__inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cta__band.touch__inner { padding-block: 88px 80px; }
.touch__head { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.touch .cta__mark, .touch .cta__ring { width: 76px; height: 76px; }
.touch .cta__disc { width: 56px; height: 56px; }
.touch .cta__mark-svg { width: 28px; height: 28px; }
.touch .touch__label { color: #CFE2D4; justify-content: center; }
.touch .touch__label::before { background: var(--green-light); }
.touch .touch__lede { color: #DCE9DF; text-align: center; max-width: 52ch; }
.touch__card { width: 100%; max-width: 1040px; background: var(--white); border-radius: 22px; overflow: hidden; text-align: left; color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0,0,0,.55); }
.touch__card p { color: var(--ink-soft); }
.touch__card h3 { color: var(--ink); }
.touch__card .touch__pick { display: none; align-items: center; gap: 8px; margin: 0; padding: 16px 24px 12px; background: var(--cream-2); font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-green); }
html.js .touch__card .touch__pick { display: flex; }
.touch__pick-arrow { display: inline-flex; color: var(--green); transform: rotate(90deg); }
.touch.is-live:not(.is-used) .touch__pick-arrow { animation: dayArrowY 1.1s ease-in-out .6s 6; }
.touch__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-inline: 16px; background: var(--cream-2); border-bottom: 1px solid var(--line); }
.touch__tab {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; margin-bottom: -1px; padding: 14px 18px 14px 20px;
  border: 1px solid #DAD5C6; border-bottom-color: var(--line); border-radius: 14px 14px 0 0; background: #E9E5D9;
  font: inherit; color: var(--ink-soft); text-align: left; cursor: pointer; transition: background .2s, border-color .2s;
}
.touch__radio { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; border: 2px solid #ADA898; border-radius: 50%; background: var(--white); transition: border-color .2s, background .2s; }
.touch__tab:hover .touch__radio { border-color: var(--green); }
.touch__tab[aria-selected="true"] .touch__radio { border-color: var(--green); background: var(--green); }
.touch__tab[aria-selected="true"] .touch__radio::after { content: ''; width: 5px; height: 10px; border: solid #FFFFFF; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.touch__tab svg { flex: none; width: 24px; height: 24px; color: var(--ink-mute); transition: color .2s; }
.touch__tabtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.touch__tabtext b { font-size: 16.5px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.touch__tabtext small { font-size: 13.5px; line-height: 1.35; color: var(--ink-mute); }
.touch__tab:hover { background: #F6F4EE; border-color: #C9C3B1; border-bottom-color: var(--line); }
.touch__tab:hover svg { color: var(--brand-green); }
.touch__tab[aria-selected="true"] { background: var(--white); border-color: var(--line); border-bottom-color: var(--white); box-shadow: inset 0 3px 0 var(--green); cursor: default; }
.touch__tab[aria-selected="true"] svg { color: var(--green); }
.touch__tab:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.touch__panel { padding: clamp(24px, 3vw, 40px); }
.touch__panel[hidden] { display: none; }
/* where the buttons and #contact land: the logo circle 20 px under the menu
   (Liam, 28 October); site.js sets each panel's distance below it */
.touch__head { scroll-margin-top: 20px; }
html.js .touch__panel { scroll-margin-top: var(--touch-off, 440px); }
.touch__ph { display: none; }
.touch__intro { font-size: 16.5px; line-height: 1.6; }
.touch__intro b { color: var(--ink); }
.touch__card .touch__small { font-size: 14.5px; line-height: 1.6; color: var(--ink-mute); }
.touch__small a { color: var(--brand-green); }
/* book: the calendar runs edge to edge inside the box */
.touch__panel--book { display: flex; flex-direction: column; gap: 14px; padding: 26px 0 22px; }
.touch__panel--book .touch__intro, .touch__panel--book .touch__small { padding-inline: clamp(24px, 3vw, 40px); }
.touch .calbox { border: 0; border-radius: 0; margin: 0; }
.touch .calbox__fail p { color: var(--ink-soft); }
/* message: a few words on the left, the form on the right */
.touch__panel--message { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); grid-template-rows: auto 1fr; grid-template-areas: "side form" "mail form"; column-gap: clamp(28px, 4vw, 56px); row-gap: 24px; align-items: start; }
.touch__msgside { grid-area: side; }
.touch__panel--message .cform { grid-area: form; }
.touch__panel--message .touch__mail { grid-area: mail; }
.touch__msgside { display: flex; flex-direction: column; gap: 20px; padding-top: 6px; }
.touch__panel--message .touch__intro { font-family: var(--serif); font-size: clamp(21px, 1.9vw, 25px); line-height: 1.35; color: var(--ink); }
.touch .cform .field input, .touch .cform .field textarea { background: #FBFAF6; }
.touch .cform .cform__note:empty { min-height: 0; margin-top: -18px; }
/* "Or email liam@...": an envelope and the address in green, big enough to
   notice, in the message tab and the call or text tab */
.touch__card .touch__mail { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink); }
.touch__mail svg { flex: none; color: var(--green); }
.touch__mail a { color: var(--brand-green); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.touch__mail a:hover { text-decoration-thickness: 2px; }
.touch__panel--message .touch__mail { padding-top: 20px; border-top: 1px solid var(--line); }
.touch__panel--call .touch__mail { margin-top: 6px; padding: 12px 20px; border-radius: 999px; background: var(--sage-tint); }
.field__opt { font-weight: 400; color: var(--ink-mute); }
/* call or text: the number, big, with call, text and save buttons */
.touch__panel--call { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-block: clamp(40px, 5vw, 64px); text-align: center; }
.touch__num { font-family: var(--serif); font-size: clamp(38px, 5vw, 58px); line-height: 1.1; letter-spacing: -0.5px; }
.touch__num a { color: var(--ink); text-decoration: none; }
.touch__num a:hover { color: var(--brand-green); }
.touch__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block: 6px 4px; }
/* before the script has chosen a tab, only the first shows; without
   JavaScript there are no tabs, and each part has its own heading */
html.js .touch:not(.is-ready) .touch__panel--book, html.js .touch:not(.is-ready) .touch__panel--call { display: none; }
html.js .touch[data-open="book"]:not(.is-ready) .touch__panel--message { display: none; }
html.js .touch[data-open="book"]:not(.is-ready) .touch__panel--book { display: flex; }
html:not(.js) .touch__tabs { display: none; }
@media (prefers-reduced-motion: reduce) { .touch.is-live:not(.is-used) .touch__pick-arrow { animation: none; } .touch__tab, .touch__radio { transition: none; } }
html:not(.js) .touch__ph { display: block; font-size: 24px; padding-inline: clamp(24px, 3vw, 40px); }
html:not(.js) .touch__panel--message { grid-template-rows: auto auto 1fr; grid-template-areas: "head head" "side form" "mail form"; }
html:not(.js) .touch__panel--message .touch__ph { grid-area: head; padding-inline: 0; }
html:not(.js) .touch__panel--call .touch__ph { padding-inline: 0; }
html:not(.js) .touch__panel + .touch__panel { border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .touch__panel--message { grid-template-columns: 1fr; grid-template-areas: "side" "form" "mail"; row-gap: 20px; }
  html:not(.js) .touch__panel--message { grid-template-rows: none; grid-template-areas: "head" "side" "form" "mail"; }
  .touch__tab { padding: 14px 14px 14px 16px; gap: 10px; }
}
@media (max-width: 600px) {
  /* shorter on a phone (Liam, 28 October), so the heading, the tabs and the
     start of the open tab fit on one screen: smaller mark, tighter gaps,
     slimmer tabs, and the form's words and fields closer together */
  .touch__inner { gap: 22px; }
  .cta__band.touch__inner { padding-block: 52px 48px; }
  .touch__head { gap: 14px; }
  .touch .cta__mark, .touch .cta__ring { width: 64px; height: 64px; }
  .touch .cta__disc { width: 48px; height: 48px; }
  .touch .cta__mark-svg { width: 24px; height: 24px; }
  .touch__card { width: calc(100% + 16px); margin-inline: -8px; border-radius: 16px; }
  .touch__card .touch__pick { padding: 11px 16px 7px; font-size: 11.5px; }
  .touch__tabs { gap: 6px; padding-inline: 8px; }
  .touch__tab { flex-direction: column; justify-content: flex-start; gap: 4px; min-height: 70px; padding: 10px 6px 8px; border-radius: 12px 12px 0 0; text-align: center; }
  .touch__tab svg { width: 20px; height: 20px; }
  .touch__radio { position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; }
  .touch__tab[aria-selected="true"] .touch__radio::after { width: 4px; height: 8px; border-width: 0 2px 2px 0; }
  .touch__tabtext small { display: none; }
  .touch__tabtext b { font-size: 13.5px; line-height: 1.2; }
  .touch__panel { padding: 20px 16px; }
  .touch__msgside { gap: 12px; padding-top: 0; }
  .touch__panel--message .touch__intro { font-size: 19px; }
  .touch .plain-points { gap: 6px; }
  .touch .plain-points li { font-size: 15px; line-height: 1.5; }
  .touch .plain-points li::before { top: 8px; }
  .touch .cform { gap: 14px; }
  .touch .cform__row { gap: 14px; }
  .touch .cform .cform__note:empty { margin-top: -14px; }
  .touch__card .touch__mail { font-size: 16px; gap: 8px; }
  .touch__mail span { text-align: left; }
  .touch__panel--call .touch__mail { padding: 10px 14px; font-size: 15px; }
  .touch__panel--book { padding: 20px 0 18px; }
  .touch__panel--book .touch__intro, .touch__panel--book .touch__small { padding-inline: 16px; }
}

/* Home hero (27 October 2026): three ways to reach Liam, small, just above
   his photo: Book a free meeting, Call/text, Email me. On a phone: booking
   across the width, then the other two side by side. */
.btn--sm { min-height: 44px; padding: 10px 16px; font-size: 15px; gap: 8px; }
.btn--sm svg { width: 16px; height: 16px; flex: none; }
.hero--home .herobtns { gap: 10px; }
.hero--home .herobtns .btn { box-shadow: 0 8px 16px -10px rgba(27,28,26,.45); }
@media (max-width: 600px) {
  .hero--home .hero__actions.herobtns { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .hero--home .herobtns .btn { width: 100%; padding-inline: 12px; gap: 6px; white-space: nowrap; }
  .hero--home .herobtns .btn:first-child { grid-column: 1 / -1; }
}

/* when Calendly can't load (blocked, offline, or a preview window), the
   calendar box says so and offers the plain link, instead of waiting forever */
.calbox__fail { display: none; }
.calbox.is-failed .calbox__frame { display: none; }
.calbox.is-failed .calbox__fail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 200px; padding: 28px 20px; text-align: center; }
.calbox__fail p, .cta .calbox__fail p { margin: 0; font-size: 16px; color: var(--ink-soft); }

/* the problem line that opens each client card on Home */
.smallcase .smallcase__problem, .v3 #work .smallcase .smallcase__problem { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink-mute); margin: 0; }

/* the link to Liam's Google reviews: five stars, no count (a count goes stale) */
.greviews { align-self: flex-start; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 44px; font-weight: 600; text-decoration: none; }
.greviews__stars { flex: none; color: #B7791F; }
.greviews__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.greviews:hover .greviews__text { text-decoration-thickness: 2px; }
.greviews__arrow { transition: transform .25s; }
.greviews:hover .greviews__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .greviews__arrow { transition: none; } }
.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; align-self: flex-start; object-fit: contain; }
.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 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 (timing in "The proof and check logs" below) */
html.js .logbox .logline { opacity: 0; }

/* 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; }
}

.card .plain-points li { font-size: 16px; }

/* Nav on mid-size screens (1101 to 1439px; under that the Menu button takes
   over): the full service names no longer fit beside the phone number, so the
   phone number steps out (it stays in the footer and the closing call) and the
   bar tightens. The desktop bar has no Contact link since 24 Oct 2026: "Book a
   free call" sits beside it, and Contact stays in the phone menu and footer.
   Nothing wraps. */
.nav__brand { flex-shrink: 0; }
.nav__links a, .nav__tel, .nav .btn { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1439px) {
  .nav__inner.wrap { padding-inline: 32px; gap: 20px; }
  .nav__menu.wrap { padding-inline: 32px; }
  .nav__brand img { height: 28px; }
  .nav__links { gap: 16px; }
  .nav__links a { font-size: 14px; }
  .nav__tel { 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 realtors, trades or any business,
   drawn as a tab bar so it reads as something to click. The tabs not showing
   pulse gently a few times when the card first comes into view, until someone
   uses the switch (never with reduced motion). 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 12px; padding: 14px 0 6px; }
html.js .day__pick { display: flex; }
.day__pick-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-green); }
/* the arrow beside the label points at the tabs: right on a wide screen, down
   on a phone, where the tabs sit under the label. It nudges toward them a few
   times when the card comes into view, until someone picks a business. */
.day__pick-arrow { display: inline-flex; color: var(--green); }
.day.is-live:not(.is-used) .day__pick-arrow { animation: dayArrowX 1.1s ease-in-out .6s 6; }
@keyframes dayArrowX { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }
@keyframes dayArrowY { 0%, 100% { transform: rotate(90deg); } 50% { transform: rotate(90deg) translateX(4px); } }
.day__tabs { display: inline-flex; gap: 4px; padding: 4px; background: #F1EFE7; border: 1px solid var(--line); border-radius: 999px; }
.day__opt {
  font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1; color: var(--ink-soft);
  background: transparent; border: 0; border-radius: 999px; padding: 0 16px; min-height: 44px;
  cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s;
}
.day__opt:hover { background: var(--white); color: var(--brand-green); }
.day__opt[aria-pressed="true"] { background: var(--brand-green); color: #FFFFFF; box-shadow: 0 2px 8px rgba(22,101,52,.28); }
.day__opt:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.day.is-live:not(.is-used) .day__opt[aria-pressed="false"] { animation: dayNudge 1.8s ease-in-out 1.2s 3; }
.day.is-live:not(.is-used) .day__opt[aria-pressed="false"] ~ .day__opt[aria-pressed="false"] { animation-delay: 1.5s; }
@keyframes dayNudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); background-color: transparent; }
  40% { box-shadow: 0 0 0 4px rgba(22,163,74,.22); background-color: #FFFFFF; }
}
@media (max-width: 900px) {
  .day__pick { padding: 12px 0 4px; }
  .day__pick-label { flex-basis: 100%; }
  .day__pick-arrow { transform: rotate(90deg); }
  .day.is-live:not(.is-used) .day__pick-arrow { animation-name: dayArrowY; }
  .day__tabs { display: flex; width: 100%; }
  .day__opt { flex: 1 1 auto; padding: 0 10px; font-size: 13.5px; }
}

/* A little more air between the two lines of the Home headline. */
.h1-break { display: block; height: .22em; }

/* 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; } }

/* Framework Build Group and SunCraft Cabinets logos (13 October 2026, late).
   SunCraft's mark is wide, so it keeps its shape instead of the square crop;
   its white background melts into the cream row. */
.v3 .workedwith__logos .ww img.is-wide { width: auto; height: 20px; object-fit: contain; border-radius: 0; mix-blend-mode: multiply; }
.ownbiz { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ownbiz__item {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.ownbiz__item img { height: 20px; width: auto; }
.ownbiz__item img.ownbiz__sq { height: 28px; margin: -4px -2px; }

/* Home "Who I help" as a grid of smaller cards (13 October 2026, late): three
   across, two across on a tablet, one on a phone; "any local business" spans
   the full width at the end. */
.ind--grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ind--grid .ind__card { padding: 20px 22px 18px; gap: 6px; }
.ind--grid .ind__name { font-size: 21px; padding-right: 44px; }
.ind--grid .ind__desc { font-size: 15px; line-height: 1.5; }
.ind--grid .ind__card .way__arrow { width: 34px; height: 34px; top: 14px; right: 14px; }
.ind--grid .ind__card--wide { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 20px; padding-right: 72px; }
.ind--grid .ind__card--wide .ind__name { flex-shrink: 0; padding-right: 0; }
.ind--grid .ind__card--wide .way__arrow { top: 50%; transform: translateY(-50%); }
@media (max-width: 900px) {
  .ind--grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 600px) {
  .ind--grid { grid-template-columns: 1fr; gap: 10px; }
  .ind--grid .ind__card { padding: 16px 18px 15px; }
  .ind--grid .ind__name { font-size: 19px; }
  .ind--grid .ind__card--wide { flex-direction: column; gap: 6px; padding-right: 18px; }
  .ind--grid .ind__card--wide .ind__name { padding-right: 44px; }
  .ind--grid .ind__card--wide .way__arrow { top: 14px; transform: none; }
}

/* Four industries across on a wide screen, two by two below 1100px. */
.ind--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .ind--four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ind--four { grid-template-columns: 1fr; } }

/* "Worked with": every client shows its name beside its logo, and hovering
   anywhere on the item, name included, brings the logo into colour. */
.v3 .workedwith__logos .ww img.is-boxed { height: 26px; border-radius: 4px; mix-blend-mode: normal; }
.v3 .workedwith__logos .ww { transition: color .3s; }
.v3 .workedwith__logos .ww:hover { color: var(--ink); }
.v3 .workedwith__logos .ww:hover img { filter: none; opacity: 1; }

/* "Worked with" as a tidy grid: the logos sit in one fixed-width slot so the
   names line up; four across on a wide screen, two on a tablet or phone. */
.v3 .workedwith__logos { flex-basis: 100%; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 16px 40px; }
.v3 .workedwith__logos .ww { gap: 12px; }
.v3 .workedwith__logos .ww img,
.v3 .workedwith__logos .ww img.is-square,
.v3 .workedwith__logos .ww img.is-wide,
.v3 .workedwith__logos .ww img.is-boxed { width: 52px; height: 28px; object-fit: contain; object-position: left center; flex-shrink: 0; }
@media (max-width: 900px) {
  .v3 .workedwith__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; width: 100%; }
  .v3 .workedwith__logos .ww { gap: 10px; font-size: 13.5px; line-height: 1.3; }
  .v3 .workedwith__logos .ww img,
  .v3 .workedwith__logos .ww img.is-square,
  .v3 .workedwith__logos .ww img.is-wide,
  .v3 .workedwith__logos .ww img.is-boxed { width: 44px; height: 24px; }
}

/* Home edits, 13 October 2026 (late, second round) ------------------------ */

/* more room between "Any local business" and "Worked with" */
.builtfor .workedwith { margin-top: 26px; }
@media (max-width: 900px) { .builtfor .workedwith { margin-top: 16px; } }

/* "Book a free call instead" reads as a button at a glance: a white pill with
   a green border, a calendar icon and a soft shadow, filling green on hover */
.btn--call {
  background: var(--white); border: 2px solid var(--brand-green); color: var(--brand-green);
  font-weight: 700; gap: 10px; box-shadow: 0 8px 18px -10px rgba(22,101,52,.55);
}
.btn--call:hover { background: var(--brand-green); color: #FFFFFF; border-color: var(--brand-green); }

/* phones: a "Swipe for more" hint under each sideways row, and a quick nudge
   of the cards when the row first comes into view (never with reduced motion) */
@media (max-width: 900px) {
  .v3 .swipe.is-nudge > * { animation: swipeNudge 1.2s ease-in-out .5s 2; }
}
@keyframes swipeArrow { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }
@keyframes swipeNudge { 0%, 100% { transform: none; } 45% { transform: translateX(-34px); } }

/* phones: a smaller, tidier footer with Services, Company and Contact as three
   columns in one row */
@media (max-width: 600px) {
  .foot { padding-block: 32px 0; font-size: 13.5px; }
  .foot__top { grid-template-columns: minmax(0, .95fr) minmax(0, .95fr) minmax(0, 1.25fr); gap: 28px 10px; }
  .foot__about { grid-column: 1 / -1; gap: 6px; }
  .foot__about p { font-size: 13.5px; line-height: 1.5; }
  .foot__brand img { height: 26px; }
  .foot__contact { grid-column: auto; }
  .foot__col { gap: 0; }
  .v3 .foot__h { font-size: 10.5px; margin-bottom: 4px; }
  .foot__col a { line-height: 1.3; }
  .foot__contact > span:last-of-type { padding-top: 10px; line-height: 1.4; }
  .foot__contact > .foot__map { padding-top: 10px; }
  .foot__legal { margin-top: 18px; padding-block: 12px 20px; }
}

/* Footer on tablets and desktops too: the brand and its line on top, then
   Services, Company and Contact as three columns in one row (phones have their
   own sizes above). */
@media (min-width: 601px) {
  .foot__top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 48px; }
  .foot__about { grid-column: 1 / -1; }
  .foot__contact { grid-column: auto; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .foot__top { gap: 38px 24px; }
}


/* Breathing room, 13 October 2026 (evening). The top of Home (hero, "Who I
   help", "Worked with", "Sound familiar") shares one background, so it needs
   real gaps to read as separate parts; they were about a third of the rest of
   the page. Tablets also get their own wider margins and section spacing
   instead of the phone's, and slightly smaller cards. */
.builtfor { padding-bottom: 124px; }
.builtfor .workedwith { margin-top: 52px; }
@media (max-width: 900px) {
  .v3 .hero.hero--home { padding-bottom: 64px; }
  .builtfor { padding-bottom: 88px; }
  .builtfor .workedwith { margin-top: 36px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  :root { --gutter: 40px; --band: 80px; }
  .v3 .hero.hero--home { padding-bottom: 76px; }
  .builtfor { padding-bottom: 104px; }
  .builtfor .workedwith { margin-top: 44px; }
  .ind--grid { gap: 14px; }
  .ind--grid .ind__card { padding: 18px 20px 16px; }
  .ind--grid .ind__name { font-size: 19px; }
  .ind--grid .ind__desc { font-size: 14.5px; }
  .ind--grid .ind__card .way__arrow { width: 32px; height: 32px; top: 13px; right: 13px; }
  .ind--grid .ind__card--wide .way__arrow { top: 50%; }
  .v3 .swipe.swipe > * { flex-basis: 62%; }
}
/* phones: "Worked with" as one tidy column, so no name breaks onto two lines */
@media (max-width: 600px) {
  .v3 .workedwith__logos { grid-template-columns: 1fr; gap: 12px; }
  .v3 .workedwith__logos .ww { font-size: 14px; }
}

/* Service pages, shorter (13 October 2026, evening): the two big "other ways"
   cards become one slim line of links at the foot of the closing section. */
.cta__more {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 26px;
  margin-top: 18px; padding-top: 22px; border-top: 1px solid rgba(243,241,233,.22);
  width: min(100%, 560px);
}
.cta__more-label { flex-basis: 100%; text-align: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #CFE2D4; }
.cta__more a {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  color: #F3F1E9; font-weight: 600; font-size: 15.5px; text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .25s;
}
.cta__more a:hover { color: var(--green-pale); }
.cta__more a span { transition: transform .25s; }
.cta__more a:hover span { transform: translateX(4px); }

/* Lead Generation jobs say what runs on its own (13 October 2026, evening):
   a small tag in each row, green with a spark for AI and automatic work,
   plain for set-up work. Beside the title on wide screens, under it on phones. */
.joblist summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 18px; }
.joblist__tag {
  display: inline-flex; align-items: center; gap: 6px; justify-self: end; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--brand-green); background: var(--sage-tint); border: 1px solid #C9D9C8;
  border-radius: 999px; padding: 5px 11px;
}
.joblist__tag svg { flex-shrink: 0; color: var(--green); }
.joblist__tag--setup { color: var(--ink-mute); background: transparent; border-color: var(--line); }
@media (max-width: 700px) {
  .joblist summary { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 8px; align-items: baseline; }
  .joblist summary .joblist__n { grid-row: 1; grid-column: 1; }
  .joblist summary .joblist__t { grid-row: 1; grid-column: 2; }
  .joblist summary::after { grid-row: 1; grid-column: 3; }
  .joblist__tag { grid-row: 2; grid-column: 2; justify-self: start; font-size: 10px; padding: 4px 10px; }
}

/* The proof and check logs fill in line by line once, then stay. They used to
   restart every 6 seconds, so each line blinked out and back in. */
html.js .logbox.is-in .logline { animation: wsLog .7s ease-out both; }
html.js .logbox.is-in .logline:nth-child(n of .logline) { animation-delay: .3s; }
html.js .logbox.is-in .logline:nth-child(2 of .logline) { animation-delay: .8s; }
html.js .logbox.is-in .logline:nth-child(3 of .logline) { animation-delay: 1.3s; }
html.js .logbox.is-in .logline:nth-child(4 of .logline) { animation-delay: 1.8s; }
html.js .logbox.is-in .logline:nth-child(5 of .logline) { animation-delay: 2.3s; }
@keyframes wsLog { 0% { opacity: 0; transform: translateX(-6px); } 100% { opacity: 1; transform: none; } }

/* Home hero on phones and tablets (13 October 2026, late, second try): natural,
   even spacing, a little roomier than before. The top of the AI assistant card
   peeks in at the bottom of the first screen as a hint, and stays still until
   enough of it is in view (see the loop observer in js/site.js). */
@media (max-width: 900px) {
  .v3 .hero.hero--home .hero__copy { gap: 22px; }
  .v3 .hero.hero--home .hero__inner { gap: 30px; }
}
/* tablets: a larger headline and the buttons side by side, so the taller
   screen reads as one deliberate opening rather than gaps */
@media (min-width: 601px) and (max-width: 900px) {
  .v3 .hero.hero--home h1 { font-size: clamp(54px, 8.8vw, 76px); }
  .hero--home .lede { font-size: 21px; line-height: 1.6; max-width: 34em; }
  .hero--home .hero__actions { flex-direction: row; }
  .hero--home .hero__actions .btn { width: auto; }
  /* the photo line sits about three quarters of the way down the first
     screen and the AI assistant card further below: a little more room above
     the headline, the photo at its desktop size, and gaps that grow with the
     screen height up to a limit (Liam LeBlanc, 13 October 2026, late) */
  .v3 .hero.hero--home { padding-top: 40px; }
  .hero--home .hero__copy > .lede,
  .hero--home .hero__copy > .hero__actions,
  .hero--home .hero__copy > .byline { margin-top: clamp(0px, calc(4.5vh - 18px), 34px); margin-top: clamp(0px, calc(4.5svh - 18px), 34px); }
  .v3 .hero--home .byline__pic { width: 104px; height: 124px; border-radius: 14px; }
  .v3 .hero--home .byline__text { font-size: 19px; }
  .v3 .hero--home .byline b { font-size: 17px; }
  .v3 .hero.hero--home .hero__inner { gap: 44px; }
}

/* Lead Generation hero (13 October 2026, late): one lead, start to finish, as
   a text conversation on a phone. The script plays it message by message and
   ticks the checklist beside it; without the script, or with less motion, the
   whole conversation shows at rest. */
.chatdemo { container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.chatdemo__pick { display: none; gap: 4px; padding: 4px; border-radius: 999px; background: #ECEAE2; border: 1px solid var(--line); }
html.js .chatdemo__pick { display: inline-flex; }
.chatdemo__opt {
  min-height: 44px; min-width: 112px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-soft); font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  transition: background .25s, color .25s;
}
.chatdemo__opt[aria-pressed="true"] { background: var(--brand-green); color: #FFFFFF; box-shadow: 0 6px 14px -8px rgba(22,101,52,.7); }
.chatdemo__opt:not([aria-pressed="true"]):hover { color: var(--ink); }
.chatdemo__stage { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
@container (min-width: 560px) {
  .chatdemo__stage { flex-direction: row; justify-content: center; gap: 34px; }
  .chatdemo__steps { width: 200px; flex-shrink: 0; }
}
.chatdemo .caption { align-self: center; }

.phone {
  position: relative; width: min(330px, 100%); flex-shrink: 0; padding: 10px; border-radius: 44px;
  background: #1C1E1D; box-shadow: 0 40px 70px -34px rgba(28,32,29,.55), inset 0 0 0 1px rgba(255,255,255,.08);
}
.phone__island { position: absolute; z-index: 2; top: 20px; left: 50%; width: 86px; height: 24px; margin-left: -43px; border-radius: 999px; background: #1C1E1D; }
.chat__convo { display: flex; flex-direction: column; border-radius: 35px; overflow: hidden; background: #F4F3EE; }
.chat__convo[hidden] { display: none; }
.chat__bar {
  display: flex; align-items: center; gap: 10px; padding: 50px 16px 12px;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.chat__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--sage-tint); color: var(--brand-green); font-size: 12.5px; font-weight: 700; letter-spacing: .5px;
}
.chat__who { flex-grow: 1; min-width: 0; line-height: 1.25; }
.chat__who b { display: block; font-size: 14.5px; color: var(--ink); }
.chat__who small { display: block; font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__ai {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 4px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--brand-green); background: var(--sage-tint); border: 1px solid #C9D9C8;
}
.chat__ai svg { color: var(--green); }
.chat__screen { position: relative; }
.chat__feed { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 18px; }

.msg { margin: 0; }
.msg__bubble { margin: 0; padding: 9px 13px; border-radius: 18px; font-size: 13.5px; line-height: 1.42; max-width: 86%; }
.msg--in .msg__bubble { background: var(--white); border: 1px solid #E4E2D8; color: var(--ink); border-bottom-left-radius: 6px; }
.msg--out { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.msg--out .msg__bubble { background: var(--green); color: #FFFFFF; border-bottom-right-radius: 6px; }
.msg__by { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--brand-green); }
.msg__by svg { color: var(--green); }
.msg--sys { align-self: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-mute); padding-top: 4px; }
.msg--missed, .msg--note {
  align-self: center; display: inline-flex; align-items: center; gap: 7px; max-width: 92%;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; line-height: 1.35;
}
.msg--missed { color: var(--amber-ink); background: #FBF3E4; border: 1px solid #EED9B5; }
.msg--note { color: var(--brand-green); background: var(--sage-tint); border: 1px solid #C9D9C8; }
.msg--missed svg, .msg--note svg { flex-shrink: 0; }
.msg--note svg { color: var(--green); }
.msg--card {
  align-self: flex-end; display: flex; align-items: center; gap: 10px; width: 82%;
  padding: 10px 12px; border-radius: 14px; background: var(--white); border: 1px solid #D5E3D3;
  box-shadow: 0 8px 18px -12px rgba(22,101,52,.45);
}
.msg__cal { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--green); color: #FFFFFF; }
.msg--card b { display: block; font-size: 13px; color: var(--ink); }
.msg--card small { display: block; font-size: 11.5px; color: var(--ink-mute); line-height: 1.35; }
.msg__pics { display: flex; gap: 6px; margin-top: 8px; }
.msg__pic { width: 52px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #DCE7DA; color: #6D8A6F; }
.msg--typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 11px 13px; border-radius: 18px; border-bottom-right-radius: 6px; background: #D9E9DD; }
.msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-green); animation: chatDot 1s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }

/* playing: a fixed screen that keeps the newest message in view */
.chatdemo.is-anim .chat__screen { height: 420px; overflow: hidden; }
.chatdemo.is-anim .chat__feed { transition: transform .5s ease, opacity .4s; }
.chatdemo.is-anim .chat__feed > .msg:not(.msg--typing) { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.chatdemo.is-anim .chat__feed > .msg.is-on { opacity: 1; transform: none; }
.chatdemo.is-anim .chat__convo.is-out .chat__feed { opacity: 0; }

/* the checklist beside the phone */
.chatdemo__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.chatdemo__steps li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 600; color: var(--ink-mute); transition: color .3s; }
.chatdemo__tick {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #D6D3C6; color: transparent; background: var(--white); transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.chatdemo__steps li.is-on { color: var(--ink); }
.chatdemo__steps li.is-on .chatdemo__tick { background: var(--green); border-color: var(--green); color: #FFFFFF; transform: scale(1.06); }
@container (max-width: 559px) {
  .chatdemo__steps { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
  .chatdemo__steps li { font-size: 13px; gap: 7px; }
  .chatdemo__tick { width: 20px; height: 20px; }
  .chatdemo__tick svg { width: 10px; height: 10px; }
}
@media (max-width: 600px) {
  .chatdemo.is-anim .chat__screen { height: 400px; }
  .chatdemo__opt { min-width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .msg--typing i { animation: none; }
}

/* Lead Generation "What I set up" on phones (13 October 2026, late): each of
   the four steps is its own soft panel with a green step badge, and the jobs
   inside it sit a size smaller, so a new step never reads like another job.
   Tablets and desktops keep the side-by-side layout. */
@media (max-width: 600px) {
  .stages { gap: 16px; }
  .stage { gap: 10px; padding: 20px 16px 4px; border-radius: 20px; background: var(--cream); border: 1px solid var(--line); }
  .stage__n {
    display: inline-flex; align-self: flex-start; margin-bottom: 12px; padding: 5px 11px; border-radius: 999px;
    background: var(--brand-green); color: #FFFFFF; font-size: 10.5px; letter-spacing: .12em;
  }
  .stage__t { font-size: 27px; }
  .stage .joblist { border-top: 1px solid #D6D3C6; }
  .stage .joblist details:last-child { border-bottom: 0; }
  .stage .joblist summary { padding: 15px 0; }
  .stage .joblist__t { font-size: 18.5px; line-height: 1.3; }
  .stage .joblist summary::after { width: 32px; height: 32px; font-size: 18px; background: var(--white); }
  .stage .joblist details[open] summary::after { background: var(--green); }
  .stage .joblist__body { padding-left: 24px; }
}

/* three story buttons above the phone: a little tighter so they fit a phone */
.chatdemo__opt { min-width: 96px; padding: 0 16px; }
@media (max-width: 600px) {
  .chatdemo__opt { min-width: 0; padding: 0 14px; font-size: 14px; }
}

/* AI Automation "Reliable by design" (13 October 2026, late): the four checks
   behind "correct, or flagged for a person", as a row of small panels under
   the copy and the check log. Four across on a wide screen, two on a tablet,
   one on a phone. */
.relyset { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.relyset__item {
  display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 24px; border-radius: 16px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(243,241,233,.14);
}
.relyset__n { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--green-light); }
.relyset__item b { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.2; color: #F3F1E9; }
.relyset__item span:last-child { font-size: 15px; line-height: 1.55; color: #C9C7BC; }
@media (max-width: 1100px) { .relyset { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .relyset { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .relyset__item { padding: 18px 18px 20px; }
  .relyset__item b { font-size: 19px; }
}

/* Swipe rows: the bar under each row (13 October 2026, late). Dots and
   "1 of 3" on the left, back and next buttons on the right; the next button
   is filled green so the eye goes to it. Only where the row scrolls sideways. */
.swipe-bar { display: none; }
@media (max-width: 900px) {
  .v3 .swipe-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
  .v3 .swipe-bar.is-off { display: none; }
  .v3 .swipe-bar .swipe-dots { display: flex; margin-top: 0; }
  .swipe-bar__where { display: flex; align-items: center; gap: 12px; }
  .swipe-bar__count { font-family: var(--mono); font-size: 12px; letter-spacing: .6px; color: var(--ink-mute); }
  .swipe-bar__btns { display: flex; gap: 10px; }
  .swipe-btn {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; border: 1px solid #D6D3C6; background: var(--white); color: var(--brand-green);
    transition: background .2s, color .2s, border-color .2s, opacity .2s, transform .15s;
  }
  .swipe-btn--next { background: var(--green); border-color: var(--green); color: #FFFFFF; box-shadow: 0 8px 16px -10px rgba(22,101,52,.8); }
  .swipe-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
  .swipe-btn--next:disabled { background: var(--white); border-color: #D6D3C6; color: var(--brand-green); }
  .swipe-btn:not(:disabled):active { transform: scale(.93); }
  .v3 .dark .swipe-bar__count { color: #C9C7BC; }
  .v3 .dark .swipe-btn { background: transparent; border-color: rgba(243,241,233,.3); color: #F3F1E9; }
  .v3 .dark .swipe-btn--next { background: var(--green-light); border-color: var(--green-light); color: #14261C; }
  .v3 .dark .swipe-btn--next:disabled { background: transparent; border-color: rgba(243,241,233,.3); color: #F3F1E9; }
  .v3 .dark .swipe-dots i { background: rgba(243,241,233,.28); }
  .v3 .dark .swipe-dots i.is-on { background: var(--green-light); }
}

/* "Worked with" on touch screens: no mouse to hover, so the logos light up
   one by one as the row scrolls into view (js/site.js). */
.v3 .workedwith__logos .ww.is-lit { color: var(--ink); }
.v3 .workedwith__logos .ww.is-lit img { filter: none; opacity: 1; }

/* AI Automation "What I automate": each row says it opens, with a "See how"
   pill that turns into "Close" (Liam LeBlanc, 13 October 2026). */
.joblist--how summary::after {
  content: 'See how +'; width: auto; height: 38px; padding: 0 15px; border-radius: 999px; white-space: nowrap;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: .1px;
}
.joblist--how details[open] summary::after { content: 'Close \2212'; }
.joblist--how summary:hover::after { border-color: var(--green); }
.joblist--how details:not([open]) summary:hover::after { background: var(--sage-tint); }
@media (max-width: 600px) {
  .joblist--how summary::after { height: 34px; padding: 0 12px; font-size: 12.5px; }
}

/* AI Consulting "three ways to start" (13 October 2026, late): the free call,
   the owner session and the team workshop as three compact cards, replacing a
   table that lost its column names on phones. Three across, stacked below
   900px. */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tier { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--cream); }
.tier--start { background: var(--sage-tint); border-color: #C9D9C8; }
.tier__tag {
  align-self: flex-start; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.2px; color: var(--brand-green);
  background: var(--white); border: 1px solid #C9D9C8; border-radius: 999px; padding: 5px 10px; margin-bottom: 2px;
}
.tier__name { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; }
.tier__len { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--brand-green); white-space: nowrap; }
.tier__who { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.tier p:last-child { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; gap: 10px; }
  .tier { padding: 16px 18px 18px; gap: 6px; }
  .tier__name { font-size: 21px; }
}

/* Phones, more room (15 October 2026, Liam LeBlanc: "on mobile it looks very
   tight ... I just need a bit more space"): a little more side margin, more
   space between sections, under each section heading, between paragraphs and
   between stacked cards. */
@media (max-width: 600px) {
  :root { --gutter: 24px; --band: 80px; }
  .v3 .sec-head, .v3 .sec-head--row { margin-bottom: 36px; gap: 16px; }
  .col { gap: 18px; }
  .v3 .dark.reliable .band { padding-block: 88px; }
  .cta__band { padding-block: 88px 96px; }
  .v3 .grid-3:not(.swipe), .v3 .smallcases:not(.swipe), .v3 .tiers { gap: 18px; }
  .v3 .card:not(.swipe > *) { padding: 24px; }

  /* Selected work on Home: every swipe card fits on an iPhone screen (they
     share the height of the tallest, Tri City with its long quote), and the
     Everbloom feature is more compact */
  .v3 #work .smallcase { padding: 22px 20px; gap: 12px; }
  .v3 #work .smallcase p { font-size: 15px; }
  .v3 #work .outcome { font-size: 19px; }
  .v3 #work .quote-plain { font-size: 15px; line-height: 1.55; }
  .v3 #work .feature { padding: 24px 20px; gap: 22px; margin-bottom: 32px; }
  .v3 #work .bignum { font-size: 84px; margin: 20px 0 8px; }
  .v3 #work .feature .quote-dark { font-size: 16px; padding: 20px 18px; }
}

/* National Personal Training Academy's full logo (from NPTA, 23 October 2026;
   Jesse Benson's written OK, 19 October) in the cards with room for it; the
   small square slots keep NPTA's "N" mark beside the full name */
.smallcase__brand img.logo-npta, .card__brand img.logo-npta { height: 28px; width: auto; max-width: 100%; object-fit: contain; border-radius: 0; }

/* ------------------------------------------ WorkSimpleAi, 26 October 2026
   Who I help: "Any local business" is a contact card with a real button,
   so it reads as something to click. */
.ind--grid .ind__card--cta { background: var(--sage-tint); border-color: #CFE0CC; align-items: center; padding-right: 22px; }
.ind--grid .ind__card--cta .ind__desc { flex: 1; }
.ind__card--cta .ind__btn { flex-shrink: 0; min-height: 44px; padding: 10px 22px; }
.ind__card--cta:hover .ind__btn { background: #2C6440; }
@media (max-width: 600px) {
  .ind--grid .ind__card--cta { align-items: flex-start; padding-right: 18px; }
  .ind--grid .ind__card--cta .ind__name { padding-right: 0; }
  .ind__card--cta .ind__btn { margin-top: 8px; align-self: stretch; }
}

/* How every job goes: the How I work steps, slimmed and moved under What I do
   on the white band (26 October 2026). No paragraphs, so the rail is shorter. */
.howstrip { display: flex; flex-direction: column; gap: 28px; }
.howstrip .steps--slim .step__body { gap: 8px; }
.howstrip .steps--slim h3 { font-size: 22px; }
.howstrip .ctastrip { margin-top: 12px; }
@media (max-width: 900px) {
  .howstrip { gap: 22px; }
  .howstrip .steps--slim { gap: 26px; }
  .howstrip .steps--slim::before { bottom: 100px; }
  .howstrip .steps--slim h3 { font-size: 20px; }
}

/* ------------------------------------------ WorkSimpleAi, 26 October 2026
   Proof strip right under the hero: the "Worked with" logos, bigger and in
   full colour, with the Google reviews link on the same line as the label. */
.proofstrip { padding-block: 8px 76px; }
.v3 .workedwith--big { gap: 18px 22px; }
.v3 .workedwith--big .workedwith__label { color: var(--ink-mute); }
.v3 .workedwith--big .greviews--strip { align-self: center; color: var(--ink); font-size: 15px; }
.v3 .workedwith--big .workedwith__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; gap: 30px 32px; margin-top: 6px; }
.v3 .workedwith--big .workedwith__logos .ww { gap: 14px; font-size: 15px; line-height: 1.3; color: var(--ink-soft); }
.v3 .workedwith--big .workedwith__logos .ww img,
.v3 .workedwith--big .workedwith__logos .ww img.is-square,
.v3 .workedwith--big .workedwith__logos .ww img.is-wide,
.v3 .workedwith--big .workedwith__logos .ww img.is-boxed { width: 84px; height: 44px; filter: none; opacity: 1; }
@media (max-width: 900px) {
  .proofstrip { padding-bottom: 52px; }
  .v3 .workedwith--big .workedwith__logos { order: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; margin-top: 4px; }
  .v3 .workedwith--big .greviews--strip { order: 2; align-self: flex-start; }
  .v3 .workedwith--big .workedwith__logos .ww { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; }
  .v3 .workedwith--big .workedwith__logos .ww img,
  .v3 .workedwith--big .workedwith__logos .ww img.is-square,
  .v3 .workedwith--big .workedwith__logos .ww img.is-wide,
  .v3 .workedwith--big .workedwith__logos .ww img.is-boxed { width: 76px; height: 40px; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .v3 .workedwith--big .workedwith__logos .ww { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 600px) {
  .v3 .workedwith--big .workedwith__logos { gap: 22px 14px; }
  .v3 .workedwith--big .workedwith__logos .ww img,
  .v3 .workedwith--big .workedwith__logos .ww img.is-square,
  .v3 .workedwith--big .workedwith__logos .ww img.is-wide,
  .v3 .workedwith--big .workedwith__logos .ww img.is-boxed { width: 68px; height: 36px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .v3 .workedwith--big .workedwith__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------ WorkSimpleAi, 26 October 2026
   What I build, trimmed: a short head with a link to the consulting page, the
   two common fixes as cards side by side, and how every job goes in one row
   at every width, so Home reads shorter. */
.whatido { display: flex; flex-direction: column; gap: 36px; }
.whatido__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; }
.whatido__head .sec-head { margin-bottom: 0; }
.textlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; color: var(--brand-green); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.textlink:hover { color: var(--brand-green); text-decoration-thickness: 2px; }
@media (min-width: 901px) {
  .v3 .ways--two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 0; }
  .v3 .ways--two .way { padding: 28px 30px; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
  .v3 .ways--two .way__title { font-size: clamp(26px, 2.2vw, 32px); }
}
.whatido .howstrip { gap: 22px; padding-top: 12px; }
.whatido .howstrip .ctastrip { margin-top: 10px; }
.howstrip .steps--row .step__body { gap: 6px; }
.howstrip .steps--row h3 { font-size: 21px; }
@media (max-width: 900px) {
  .whatido { gap: 26px; }
  .howstrip .steps--row { flex-direction: row; gap: 10px; }
  .howstrip .steps--row::before { left: 18px; right: 18px; top: 18px; bottom: auto; width: auto; height: 1px; transform-origin: left center; }
  html.js .howstrip .steps--row.is-in::before { animation-name: wsLine; }
  .howstrip .steps--row .step { flex-direction: column; flex: 1 1 0; min-width: 0; gap: 10px; }
  .howstrip .steps--row .step__num { width: 36px; height: 36px; font-size: 12px; }
  .howstrip .steps--row .step__body { padding-top: 0; gap: 4px; }
  .howstrip .steps--row h3 { font-size: 15.5px; line-height: 1.2; }
  .howstrip .steps--row .step__meta { font-size: 11.5px; line-height: 1.4; }
}
.step__short { display: none; }
@media (max-width: 600px) {
  .howstrip .steps--row .step__long { display: none; }
  .howstrip .steps--row .step__short { display: inline; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .v3 .ways--two.swipe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; overflow: visible; margin-inline: 0; padding: 0; }
  .v3 .ways--two.swipe > * { flex: none; }
  .v3 .ways--two.swipe.is-nudge > * { animation: none; }
}

/* ------------------------------------------ WorkSimpleAi, 26 October 2026
   A shorter footer: brand and its line beside the three columns on a laptop,
   links stacked with no extra space between them (each is still a 44px tap
   target), and the address doubling as the Google Maps link (no pin since
   27 October 2026). */
.foot { padding-block: 64px 0; }
.foot__col { gap: 0; }
.foot__about { gap: 12px; }
.foot__about p { max-width: 34ch; }
.foot .foot__map { gap: 8px; align-items: flex-start; padding-block: 11px; line-height: 1.45; }
.foot__legal { margin-top: 28px; padding-block: 16px 24px; }
@media (min-width: 1100px) {
  .foot__top { grid-template-columns: 1.5fr 1fr .8fr 1.3fr; gap: 0 40px; }
  .foot__about { grid-column: auto; }
}
@media (min-width: 601px) and (max-width: 1099px) {
  .foot { padding-top: 52px; }
  .foot__top { gap: 26px 28px; }
}
@media (max-width: 600px) {
  .foot { padding-top: 28px; }
  .foot__top { gap: 20px 10px; }
  .foot .foot__map { padding-block: 8px; }
  .foot__legal { margin-top: 16px; padding-block: 12px 18px; }
}
.foot__contact > span.foot__h:last-of-type { padding-top: 0; }

/* "If it's not sure, it asks you first." stays on one line at every width:
   the size follows the screen width, up to 64px (Liam LeBlanc, 26 October 2026). */
.v3 .reliable h2.words--big { white-space: nowrap; font-size: min(5.9vw, 64px); }

/* The Everbloom feature on Home, a bit smaller (Liam LeBlanc, 26 October 2026). */
.v3 #work .feature { padding: 36px 40px; gap: 44px; }
.v3 #work .bignum { font-size: clamp(88px, 8.4vw, 126px); margin: 24px 0 10px; }
.v3 #work .bignum__cap { font-size: clamp(20px, 1.7vw, 25px); }
.v3 #work .feature__stats { margin-top: 26px; padding-top: 20px; }
.v3 #work .feature__story { gap: 18px; padding-top: 0; }
.v3 #work .feature__story h3 { font-size: clamp(22px, 1.9vw, 28px); }
.v3 #work .feature .quote-dark { font-size: 16.5px; padding: 24px 26px; }
@media (max-width: 900px) {
  .v3 #work .feature { padding: 22px 20px; gap: 18px; }
  .v3 #work .bignum { font-size: 72px; margin: 16px 0 6px; }
  .v3 #work .feature .quote-dark { font-size: 15.5px; padding: 18px; }
}

/* ------------------------------------------ WorkSimpleAi, 26 October 2026
   Sound familiar?: each problem card links to the page for its fix. */
.probs .card .prob__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: -4px;
  font-weight: 600; font-size: 15px; color: var(--brand-green);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.probs .card .prob__link:hover { text-decoration-thickness: 2px; }
.builtfor:has(+ .probsband), .builtfor { padding-bottom: 96px; }
@media (max-width: 900px) { .builtfor { padding-bottom: 64px; } }
.whatido .howstrip .sec-head { margin-bottom: 4px; }
.probs .card .prob__link { display: inline-block; align-self: flex-start; padding-block: 12px; line-height: 1.4; min-height: 0; }

/* Sound familiar? with five problems (26 October 2026): slightly smaller cards,
   three across with a sixth "Not on the list?" tile, swiping on phones. */
.v3 .probs--five { gap: 18px; }
.v3 .probs--five .card { padding: 22px; gap: 10px; }
.probs--five .card h3 { font-size: clamp(20px, 1.6vw, 23px); }
.probs--five .card p { font-size: 15px; line-height: 1.55; }
.probs--five .card .prob__fix { font-size: 14px; padding: 10px 12px; }
.probs--five .minibox { font-size: 11.5px; padding: 10px 12px; }
.probs--five .prob__icon { width: 34px; height: 34px; border-radius: 10px; }
.probs .card:nth-child(4).is-in .minibox::after { animation-delay: 2.1s; }
.probs .card:nth-child(5).is-in .minibox::after { animation-delay: 2.8s; }
.probs .probcta { justify-content: center; align-items: flex-start; background: var(--sage-tint); border-color: #C9D9C8; }
.probs .probcta .probcta__h { font-family: var(--serif); font-size: clamp(21px, 1.8vw, 25px); line-height: 1.2; color: var(--ink); }
.probs .probcta .btn { margin-top: 8px; }
@media (min-width: 901px) and (max-width: 1199px) {
  .v3 .probs--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------ WorkSimpleAi, 26 October 2026
   Who I help on a charcoal band: the industry cards turn dark and quiet, the
   "Any local business" card keeps its green button. */
.whoband .builtfor { padding-block: 92px; }
.whoband .ind__card { background: rgba(243,241,233,.04); border-color: rgba(243,241,233,.14); color: #F3F1E9; }
.whoband .ind__card:hover { color: #F3F1E9; border-color: var(--green-light); }
.whoband .ind__name { color: #F3F1E9; }
.whoband .ind__desc { color: #B6B4A9; }
.whoband .ind__card .way__arrow { background: transparent; border-color: rgba(243,241,233,.28); color: var(--green-light); }
.whoband .ind__card:hover .way__arrow { background: var(--green-light); border-color: var(--green-light); color: #14261C; }
.whoband .ind--grid .ind__card--cta { background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.30); }
@media (max-width: 900px) { .whoband .builtfor { padding-block: 60px; } }

/* Sound familiar? as a paged row (26 October 2026): three cards at a time on a
   laptop or tablet, two on a phone, with back and next buttons that move a
   whole page. Smaller, quieter cards. */
.probsec { padding-top: var(--band); }
.v3 .pager {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0 6px; margin: 0;
}
.v3 .pager::-webkit-scrollbar { display: none; }
.v3 .pager > * { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; min-width: 0; }
.v3 .probs--five .card { padding: 20px; gap: 9px; border-radius: 14px; }
.v3 .probs--five .prob { box-shadow: none; }
.probs--five .card h3 { font-size: clamp(19px, 1.5vw, 22px); }
.probs--five .card p { font-size: 14.5px; line-height: 1.55; }
.probs--five .card .prob__fix { font-size: 13.5px; padding: 9px 11px; }
.probs--five .minibox { font-size: 11px; padding: 9px 11px; }
.probs--five .prob__icon { width: 32px; height: 32px; }
.probs--five .card .prob__link { font-size: 14px; padding-block: 12px 4px; }
.v3 .swipe-bar--pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.v3 .swipe-bar--pager.is-off { display: none; }
.v3 .swipe-bar--pager .swipe-dots { display: flex; gap: 8px; margin-top: 0; }
.v3 .swipe-bar--pager .swipe-dots i { width: 7px; height: 7px; border-radius: 999px; background: #D6D3C6; transition: background .3s; }
.v3 .swipe-bar--pager .swipe-dots i.is-on { background: var(--green); }
.swipe-bar--pager .swipe-bar__where { display: flex; align-items: center; gap: 12px; }
.swipe-bar--pager .swipe-bar__count { font-family: var(--mono); font-size: 12px; letter-spacing: .6px; color: var(--ink-mute); }
.swipe-bar--pager .swipe-bar__btns { display: flex; gap: 10px; }
.swipe-bar--pager .swipe-btn {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1px solid #D6D3C6; background: var(--white); color: var(--brand-green);
  transition: background .2s, color .2s, border-color .2s, opacity .2s, transform .15s;
}
.swipe-bar--pager .swipe-btn--next { background: var(--green); border-color: var(--green); color: #FFFFFF; box-shadow: 0 8px 16px -10px rgba(22,101,52,.8); }
.swipe-bar--pager .swipe-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.swipe-bar--pager .swipe-btn--next:disabled { background: var(--white); border-color: #D6D3C6; color: var(--brand-green); }
@media (max-width: 900px) {
  .v3 .pager { margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 6px; scroll-padding-inline: var(--gutter); gap: 12px; }
  .v3 .pager.pager > * { flex-basis: calc((100% - 24px) / 3); }
  .v3 .pager.is-nudge > * { animation: none; }
}
@media (max-width: 600px) {
  .v3 .pager.pager > * { flex-basis: calc((100% - 12px) / 2); }
  .v3 .probs--five .card { padding: 14px; gap: 8px; }
  .probs--five .minibox, .probs--five .card > p:not(.prob__fix):not(.probcta__h) { display: none; }
  .probs--five .card h3 { font-size: 17px; line-height: 1.2; }
  .probs--five .card .prob__fix { font-size: 12.5px; padding: 8px 9px; gap: 7px; }
  .probs--five .prob__tick { width: 17px; height: 17px; }
  .probs--five .card .prob__link { font-size: 13px; }
  .probs .probcta .probcta__h { font-size: 18px; }
  .probs .probcta .btn { width: 100%; padding-inline: 12px; font-size: 15px; }
}
@media (max-width: 600px) {
  .probs--five .prob__tick { display: none; }
  .probs--five .card .prob__fix b { display: block; }
}
@media (max-width: 900px) { .probs--five .minibox { display: none; } }
.probs--five .card .prob__link { padding-block: 14px; margin-block: -2px -10px; }

/* AI Consulting hero: Book a free call and See real examples stay side by side
   on every screen, Book a free call on the left (Liam LeBlanc, 26 October 2026). */
.hero__actions--centred { flex-direction: row; flex-wrap: nowrap; }
.hero__actions--centred .btn { width: auto; }
@media (max-width: 600px) {
  .hero__actions--centred { gap: 10px; width: 100%; }
  .hero__actions--centred .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 15px; text-align: center; }
  .hero__actions--centred .btn--ghost { font-size: 13px; }
}
/* a two-sentence heading with a set break shows one sentence per line */
.hero__centre h1:has(.h1-break) { max-width: none; }
/* the pointer to the Lead Generation page under What I automate, a little
   bigger so people after lead automation find it (26 October 2026) */
.joblist__more { font-size: 17.5px; color: var(--ink); }
.joblist__more a { font-weight: 600; }
@media (max-width: 600px) { .joblist__more { font-size: 16.5px; } }

/* What I automate in two groups, "The paperwork" and "The work itself"
   (26 October 2026) */
.joblist__group {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--brand-green); padding: 22px 0 10px; border-bottom: 1px solid var(--line);
}
.joblist__group:first-child { padding-top: 16px; }

/* Lead page phone: labelled as an example, like the card on Home (26 October 2026) */
.chatdemo__eg {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
}
.chatdemo__egtag { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-green); }

/* Home (26 October 2026): the small label is the page's H1, so Google reads the
   service and the city; the big line is a paragraph styled exactly as before. */
.v3 .hero.hero--home h1.label {
  font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: .12em;
}
.hero__title { font-family: var(--serif); font-weight: 500; margin: 0; font-size: clamp(44px, 5vw, 72px); line-height: 1.06; letter-spacing: -1px; }
.v3 .hero .hero__title { font-size: clamp(40px, 5vw, 72px); line-height: 1.05; letter-spacing: -1px; }
@media (min-width: 601px) and (max-width: 900px) {
  .v3 .hero.hero--home .hero__title { font-size: clamp(54px, 8.8vw, 76px); }
}

/* AI Consulting (26 October 2026): the team training folded into "You get a
   partner, not a quick fix." as a strip of two sessions under it */
.band.split:has(+ .teamstrip) { padding-bottom: 44px; }
.teamstrip { display: flex; flex-direction: column; gap: 18px; padding-bottom: var(--band); }
.v3 .tiers.tiers--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.teamstrip__note { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); max-width: 70ch; }
@media (max-width: 600px) { .v3 .tiers.tiers--two { grid-template-columns: 1fr; } }

/* Service pages (26 October 2026): the small label is each page's H1, naming the
   service and the city for Google; the big slogan is a paragraph styled as before. */
.v3 .hero h1.label { font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: .12em; }
.v3 .hero h1.label--light { color: #9A988D; }
.hero__centre h1.label { max-width: none; }
.hero--dark .hero__title { color: #F3F1E9; }
.hero__centre .hero__title { max-width: 16ch; }
.hero__centre .hero__title:has(.h1-break) { max-width: none; }
@media (max-width: 900px) { .hero__centre .hero__title { max-width: none; } }

/* ------------------------------------------ WorkSimpleAi, 27 October 2026
   How every job goes, centred: the heading and each step sit in the middle,
   so the four circles are evenly spaced with the same room at both ends. The
   line runs from the 01 circle to the 04 circle (an eighth of the row, less
   the gaps, in from each side) at an even speed, and lights each circle as it
   reaches it: 02 at a third, 03 at two thirds, 04 at the end. NPTA's card
   ends like the others: a rule, then the client's name in the same bold
   line, though it has no quote. */
.howstrip .sec-head { align-items: center; text-align: center; }
.howstrip .sec-head .label { justify-content: center; }
.howstrip .steps--row .step,
.howstrip .steps--row .step__body { align-items: center; text-align: center; }
@media (min-width: 901px) {
  .howstrip .steps--row::before { left: calc((100% - 3 * 28px) / 8); right: calc((100% - 3 * 28px) / 8); }
}
@media (max-width: 900px) {
  .howstrip .steps--row::before { left: calc((100% - 3 * 10px) / 8); right: calc((100% - 3 * 10px) / 8); }
}
html.js .howstrip .steps--row.is-in::before { animation: wsLine 1.8s linear .3s both; }
.v3 .smallcase__who { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* AI Consulting, In plain words (27 October 2026): on a laptop the heading
   sits alone on the first row, and the checklist starts beside the body text
   a little lower than its first line, so the two never read as one. */
@media (min-width: 901px) {
  .split--plain { grid-template-areas: "head ." "body checks"; row-gap: 18px; }
  .split--plain .split__head { grid-area: head; }
  .split--plain .split__body { grid-area: body; }
  .split--plain .checks { grid-area: checks; margin-top: 16px; }
}
@media (max-width: 900px) {
  .split--plain { row-gap: 13px; }
  .split--plain .checks { margin-top: 13px; }
}
@media (max-width: 600px) {
  .split--plain { row-gap: 18px; }
  .split--plain .checks { margin-top: 8px; }
}