/* Red Leaf website. Every value comes from the brand book (projects/Red Leaf/brand/).
   Layout: full-bleed bands in brand proportion: red owns the hero and the closing ask,
   paper and mist carry the reading, ink carries the proof. */
:root {
  --paper: #FFFFFF;
  --mist: #F1F0EE;
  --line: #DCDAD6;
  --ink: #16181D;
  --slate: #50545C;
  --red: #CE1126;
  --red-deep: #A30D1F;
  --on-red-2: #FFE5E8;
  --on-ink-2: #B9BCC2;
  --display: "Familjen Grotesk", "Arial Narrow", Arial, sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wrap: 1160px;
  --gut: clamp(20px, 5vw, 40px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; scrollbar-color: var(--line) var(--mist); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; caret-color: var(--red); }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.028em; line-height: 1.03; text-wrap: balance; margin: 0; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }
.num { font-variant-numeric: tabular-nums; }
.dot { color: var(--red); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section { padding-block: clamp(64px, 10vw, 120px); }
.h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); max-width: 20ch; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--slate); max-width: 58ch; margin-top: 18px; }
.mist { background: var(--mist); }
.ink { background: var(--ink); color: var(--paper); }
.ink .lede { color: var(--on-ink-2); }
.redband { background: var(--red); color: var(--paper); }
.redband .lede { color: var(--on-red-2); }
.redband .dot, .hero .dot { color: var(--ink); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 10px; font: 600 16px/1 var(--body); text-decoration: none; cursor: pointer; border: 0; transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease); }
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-red { background: var(--red); color: var(--paper); }
.btn-red:hover { background: var(--red-deep); }
.btn-white { background: var(--paper); color: var(--red); }
.btn-white:hover { background: var(--on-red-2); }
.btn-line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-line:hover { box-shadow: inset 0 0 0 2.5px currentColor; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #000; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: .32em; font: 700 22px/1 var(--display); letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
.logo svg { width: 1.05em; height: 1.05em; color: var(--red); }

/* Nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.btn) { font-size: 15px; font-weight: 500; color: var(--slate); text-decoration: none; }
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* Hero */
.hero { background: var(--red); color: var(--paper); padding-block: clamp(56px, 8vw, 96px) clamp(64px, 9vw, 112px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 6vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 5.2rem); line-height: .98; letter-spacing: -0.035em; max-width: 13ch; }
.hero .sub { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--on-red-2); max-width: 46ch; margin-top: 26px; }
.hero .sub strong { color: var(--paper); font-weight: 600; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.terms { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 15px; color: var(--on-red-2); }
.terms span { display: inline-flex; align-items: center; gap: 8px; }
.terms svg { width: 16px; height: 16px; color: var(--paper); }

/* The lead path: a sample lead moving through the system */
.path { position: relative; display: grid; gap: 12px; padding-left: 30px; }
.path::before { content: ""; position: absolute; left: 9px; top: var(--line-top, 23px); height: var(--line-h, calc(100% - 46px)); width: 2px; background: color-mix(in srgb, var(--paper) 35%, transparent); }
.path::after { /* the lead, travelling once from click to booking */
  content: ""; position: absolute; left: 4px; top: var(--start, 17px); width: 12px; height: 12px; border-radius: 50%; background: var(--paper);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--paper) 30%, transparent);
  animation: travel 3.2s var(--ease) .5s 1 both;
}
@keyframes travel { from { top: var(--start, 17px); } to { top: var(--end, calc(100% - 29px)); } }
.step-card { position: relative; background: var(--paper); color: var(--ink); border-radius: 14px; padding: 12px 14px; box-shadow: 0 18px 34px -24px rgba(22, 24, 29, .55); display: grid; gap: 6px; }
.step-card::before { content: ""; position: absolute; left: -26px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--paper); }
.step-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.step-top b { font: 700 14.5px/1.2 var(--display); letter-spacing: -0.01em; }
.step-top time { font: 500 12px/1 var(--mono); color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.step-body { font-size: 13.5px; line-height: 1.45; color: var(--slate); }
.search { display: flex; align-items: center; gap: 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); padding: 6px 12px; font-size: 13px; color: var(--ink); }
.search svg { width: 14px; height: 14px; color: var(--slate); }
.result { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.result b { color: var(--ink); font-weight: 600; }
.site-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; }
.site-row img { width: 54px; height: 70px; object-fit: cover; object-position: top; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.bubble { background: var(--mist); border-radius: 12px 12px 12px 4px; padding: 8px 11px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.bubble.out { background: var(--ink); color: var(--paper); border-radius: 12px 12px 4px 12px; }
.booked { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.booked .when { font: 600 14px/1.3 var(--body); color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--body); padding: 6px 10px; border-radius: 999px; color: var(--paper); background: var(--ink); white-space: nowrap; }
.pill svg { width: 12px; height: 12px; }
.rating { display: inline-flex; align-items: center; gap: 4px; }
.star { width: 12px; height: 12px; color: var(--ink); }
.sample-strip { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; background: var(--ink); color: var(--on-ink-2); border-radius: 10px; padding: 9px 14px; margin-bottom: 14px; font: 400 13.5px/1.4 var(--body); }
.sample-strip b { color: var(--paper); font-weight: 600; }

/* About */
.about-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.photo { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; background: var(--mist); }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.photo figcaption { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border-radius: 999px; padding: 8px 14px 8px 10px; font: 600 14px/1 var(--body); box-shadow: 0 10px 24px -14px rgba(22, 24, 29, .5); }
.photo figcaption svg { width: 18px; height: 18px; color: var(--red); }
.about-copy p + p { margin-top: 16px; }
.about-copy .big { font: 600 clamp(1.3rem, 2.4vw, 1.75rem)/1.3 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.about-copy p { color: var(--slate); font-size: 1.08rem; max-width: 56ch; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.fact { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; font-weight: 500; }
.fact svg { width: 16px; height: 16px; color: var(--red); }
/* About, reworked: one paragraph, three true numbers, the plain photo caption. */
.ab-photo img { filter: saturate(.82) contrast(1.02); }
.ab-copy .ab-lede { margin-top: 22px; }
.ab-lede strong { color: var(--ink); font-weight: 600; }
.ab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 0 0; border-top: 2px solid var(--ink); max-width: 600px; }
.ab-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 16px 18px 4px 0; }
.ab-stats div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.ab-stats dd { margin: 0; font: 700 clamp(2.2rem, 4vw, 3rem)/1 var(--display); letter-spacing: -0.04em; color: var(--ink); }
.ab-stats dt { font-size: .9rem; line-height: 1.35; color: var(--slate); }
.ab-where { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 26px 0 0; padding: 0; font-size: .98rem; font-weight: 500; color: var(--ink); }
.ab-where li { display: inline-flex; align-items: center; gap: 8px; }
.ab-where svg { width: 16px; height: 16px; color: var(--red); }
.ab-copy .ab-mail { margin-top: 18px; font-size: 1rem; }
.ab-mail a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ab-mail a:hover { color: var(--red); }
/* Email links inside ledes: ink with a red underline on paper, paper on a red field */
.lede a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lede a:hover { color: var(--red); }
.redband .lede a, .redband .lede a:hover { color: var(--paper); text-decoration-color: currentColor; }
@media (max-width: 560px) {
  .ab-stats div { padding-right: 10px; }
  .ab-stats div + div { padding-left: 12px; }
}

/* Problem */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.issues { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.issues li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.issues svg { width: 22px; height: 22px; color: var(--red); margin-top: 2px; grid-row: span 2; }
.issues b { font: 700 1.15rem/1.3 var(--display); letter-spacing: -0.01em; }
.issues span { color: var(--slate); font-size: .98rem; }
.stat { margin-top: 34px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 24px 26px; background: var(--red); color: var(--paper); border-radius: 16px; }
.stat b { font: 700 clamp(2.6rem, 5vw, 3.6rem)/1 var(--display); color: var(--paper); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat p { font-size: .98rem; color: var(--on-red-2); }
.stat small { display: block; margin-top: 6px; font: 400 13px/1.4 var(--body); color: var(--on-red-2); }

/* How it works: a real sequence, so it is numbered */
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.steps li { position: relative; padding: 26px 24px 0 0; border-top: 2px solid var(--line); counter-increment: s; display: grid; gap: 8px; align-content: start; }
.steps li::before { content: counter(s); position: absolute; top: -17px; left: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 2px var(--red); color: var(--red); font: 700 15px/1 var(--display); }
.steps li.free::before { background: var(--red); color: var(--paper); }
.steps h3 { font-size: 1.3rem; margin-top: 10px; }
.steps p { color: var(--slate); font-size: .98rem; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: 44px; }
.price-card { background: var(--paper); color: var(--ink); border-radius: 20px; padding: clamp(26px, 4vw, 40px); display: grid; gap: 14px; }
.price { display: flex; align-items: flex-start; font: 700 clamp(4rem, 9vw, 5.6rem)/.9 var(--display); letter-spacing: -0.05em; }
.price sup { font-size: .38em; margin: .18em .04em 0 0; letter-spacing: 0; }
.price small { font: 500 1rem/1 var(--body); color: var(--slate); letter-spacing: 0; align-self: flex-end; margin: 0 0 .5em .4em; }
.price-card .terms-list { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; color: var(--slate); }
.price-card .btn { width: 100%; margin-top: 6px; }
.included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.included li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); }
.included svg { width: 18px; height: 18px; color: var(--red); margin-top: 3px; }
.included b { display: block; font-weight: 600; color: var(--paper); }
.included span { display: block; font-size: .93rem; color: var(--on-ink-2); }
.next-up { margin-top: 30px; font-size: .98rem; color: var(--on-ink-2); max-width: 64ch; }
.next-up b { color: var(--paper); }

/* Compare */
.table-wrap { overflow-x: auto; margin-top: 40px; }
.compare { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; }
.compare th, .compare td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; }
.compare thead th { font: 700 1.05rem/1.2 var(--display); letter-spacing: -0.01em; border-bottom: 2px solid var(--ink); }
.compare tbody th { font-weight: 600; color: var(--slate); width: 22%; }
.compare td { color: var(--slate); }
.compare .us { background: var(--mist); color: var(--ink); font-weight: 600; }
.compare thead .us { color: var(--red); box-shadow: inset 0 3px 0 var(--red); }

.rule-top { border-top: 1px solid var(--line); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-list { border-top: 2px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 700 1.12rem/1.35 var(--display); letter-spacing: -0.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--red); }
.faq-list summary svg { width: 22px; height: 22px; flex: none; color: var(--red); transition: transform .3s var(--ease); }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list details p { padding: 0 40px 22px 0; color: var(--slate); }

/* Closing ask */
.ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.ask-grid h2 { font-size: clamp(2.3rem, 5.4vw, 3.8rem); max-width: 14ch; }
.form { background: var(--paper); color: var(--ink); border-radius: 18px; padding: clamp(22px, 4vw, 34px); display: grid; gap: 16px; box-shadow: 0 34px 60px -36px rgba(22, 24, 29, .6); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 7px; font-size: 14.5px; font-weight: 600; align-content: end; }
.form label .hint { font-weight: 400; color: var(--slate); }
.form input, .form textarea, .form select { width: 100%; min-height: 50px; padding: 12px 14px; font: 400 16px/1.4 var(--body); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; transition: border-color .2s, box-shadow .2s; }
.form textarea { min-height: 110px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: #6B7078; }
.form input:hover, .form textarea:hover, .form select:hover { border-color: var(--slate); }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent); }
.form .btn { width: 100%; }
.form .fine { font-size: 13.5px; color: var(--slate); }
.honey { position: absolute; left: -9999px; }
.promise { display: grid; gap: 14px; margin-top: 28px; list-style: none; padding: 0; }
.promise li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--on-red-2); }
.promise svg { width: 18px; height: 18px; color: var(--paper); margin-top: 3px; }
.promise b { color: var(--paper); font-weight: 600; }

/* Other-audience band and footer */
.crossover { padding-block: 40px; }
.crossover .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; }
.crossover p { font: 600 clamp(1.2rem, 2.4vw, 1.6rem)/1.25 var(--display); letter-spacing: -0.02em; max-width: 40ch; }
.crossover p span { color: var(--on-ink-2); font-weight: 500; }
.crossover .btn { color: var(--paper); }
footer { padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); font-size: 14.5px; color: var(--slate); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; }
.foot-brand { display: grid; gap: 6px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }

/* Agencies: the sample Health Check report */
.report { background: var(--paper); color: var(--ink); border-radius: 18px; padding: clamp(18px, 3vw, 26px); box-shadow: 0 34px 60px -36px rgba(0, 0, 0, .7); display: grid; gap: 14px; }
.report-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.report-top b { display: block; font: 700 1.05rem/1.25 var(--display); }
.report-top span { display: block; font-size: 13px; color: var(--slate); }
.score { text-align: right; }
.score b { font: 700 2rem/1 var(--display); color: var(--red); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.score span { font: 500 11.5px/1.3 var(--mono); }
.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.findings li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.4; padding: 9px 10px; border-radius: 10px; background: var(--mist); }
.findings b { font-weight: 600; }
.sev { font: 600 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 5px 7px; border-radius: 6px; white-space: nowrap; margin-top: 1px; }
.sev.high { background: var(--red); color: var(--paper); }
.sev.med { background: var(--ink); color: var(--paper); }
.sev.low { background: var(--paper); color: var(--slate); box-shadow: inset 0 0 0 1px var(--line); }
.report-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 400 13px/1.4 var(--body); color: var(--slate); padding-top: 4px; }
.report-top span { line-height: 1.4; }
.hero.paper-hero { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.hero.paper-hero .sub, .hero.paper-hero .terms { color: var(--slate); }
.hero.paper-hero .sub strong { color: var(--ink); }
.hero.paper-hero .dot { color: var(--red); }
.hero.paper-hero .terms svg { color: var(--red); }
.red-panel { background: var(--red); border-radius: 22px; padding: clamp(16px, 3vw, 28px); }
.sprints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 40px; border-bottom: 1px solid var(--line); }
.sprint { padding: 22px 0; display: grid; gap: 6px; align-content: start; border-top: 1px solid var(--line); }
.sprint h3 { font-size: 1.2rem; }
.sprint p { color: var(--slate); font-size: .96rem; }
.ways { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.ways li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-content: start; gap: 4px 12px; padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); }
.ways svg { width: 18px; height: 18px; color: var(--red); margin-top: 4px; grid-row: span 2; }
.ways b { font: 700 1.08rem/1.3 var(--display); }
.ways span { color: var(--on-ink-2); font-size: .97rem; }
/* How I work (hub): three promises in three columns, door-scale titles, no icons */
.hw { list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(28px, 4vw, 56px); }
.hw li { display: grid; align-content: start; gap: 12px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--paper) 28%, transparent); }
.hw h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--paper); text-wrap: balance; }
.hw p { color: var(--on-ink-2); font-size: 1.04rem; max-width: 36ch; }
@media (max-width: 860px) { .hw { grid-template-columns: minmax(0, 1fr); } }
.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; color: var(--slate); }
.checks svg { width: 18px; height: 18px; color: var(--red); margin-top: 3px; }
.checks b { color: var(--ink); font-weight: 600; }

/* Home hero: night field, a kinetic headline over a still, faintly alive background */
:root { --night: #0B0D10; --night-deep: #06080C; --night-line: rgba(236, 238, 242, .10); --speck: rgb(203, 213, 225); }
.nav.dark { background: var(--night); border-bottom-color: var(--night-line); }
.nav.dark .logo { color: var(--paper); }
.nav.dark .nav-links a:not(.btn) { color: var(--on-ink-2); }
.nav.dark .nav-links a:not(.btn):hover { color: var(--paper); }
.hero.dark-hero { background: var(--night); color: var(--paper); }
.hero.dark-hero .sub { color: var(--on-ink-2); }
.hero.dark-hero .sub strong { color: var(--paper); }
.hero.dark-hero .dot { color: var(--red); }
.hero.dark-hero .btn-line { color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(236, 238, 242, .35); }
.hero.dark-hero .btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--paper); }

/* The headline: one red line rotates through what the system does */
.hero-c { position: relative; isolation: isolate; padding-block: clamp(80px, 12vw, 150px) clamp(72px, 10vw, 128px);
  background: radial-gradient(ellipse 70% 65% at 0% 0%, rgba(30, 52, 92, .55), transparent 65%),
              radial-gradient(ellipse 60% 60% at 100% 100%, rgba(30, 52, 92, .40), transparent 65%), var(--night-deep); }
.hero-c > .wrap { position: relative; z-index: 1; }
.hero-c h1 { font-size: clamp(2.8rem, 7.4vw, 6.4rem); max-width: none; line-height: 1; letter-spacing: -0.04em; }
.rot { display: block; height: 1.08em; overflow: hidden; color: var(--red); }
.rot-track { display: flex; flex-direction: column; animation: rot 12.5s cubic-bezier(.7, 0, .2, 1) infinite; }
.rot-track span { display: block; height: 1.08em; white-space: nowrap; }
@keyframes rot {
  0%, 16% { transform: translateY(0); } 20%, 36% { transform: translateY(-1.08em); } 40%, 56% { transform: translateY(-2.16em); }
  60%, 76% { transform: translateY(-3.24em); } 80%, 96% { transform: translateY(-4.32em); } 100% { transform: translateY(-5.4em); }
}
.c-row { display: grid; grid-template-columns: minmax(0, 1.1fr) auto; gap: 28px 64px; align-items: end; margin-top: clamp(32px, 4vw, 48px); }
.c-row .sub, .c-row .ctas { margin-top: 0; }

/* The background: cool navy washes, dashed thirds, corner squares, breathing crossings and wandering specks.
   No red glow and no dense grid (both belong to other work). The only red is the four corner dots. */
.hb, .hb-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hb i { position: absolute; display: block; }
.hb-v1, .hb-v2 { top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(236, 238, 242, .07); }
.hb-v1 { left: 18%; } .hb-v2 { right: 18%; }
.hb-h1, .hb-h2 { left: 0; right: 0; height: 0; border-top: 1px dashed rgba(236, 238, 242, .07); }
.hb-h1 { top: 20%; } .hb-h2 { bottom: 20%; }
.hb-corner { width: 38px; height: 38px; border: 1px solid rgba(236, 238, 242, .16); }
.hb-corner::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.hb-tl { top: 28px; left: 28px; } .hb-tl::after { top: -3px; left: -3px; }
.hb-tr { top: 28px; right: 28px; } .hb-tr::after { top: -3px; right: -3px; }
.hb-bl { bottom: 28px; left: 28px; } .hb-bl::after { bottom: -3px; left: -3px; }
.hb-br { bottom: 28px; right: 28px; } .hb-br::after { bottom: -3px; right: -3px; }
.hb-pulse { width: 4px; height: 4px; border-radius: 50%; background: var(--speck); translate: -50% -50%; opacity: .1; animation: hb-pulse 3s ease-in-out infinite; }
.hb-q1 { left: 18%; top: 20%; } .hb-q2 { left: 82%; top: 20%; animation-delay: .2s; }
.hb-q3 { left: 18%; top: 80%; animation-delay: .4s; } .hb-q4 { left: 82%; top: 80%; animation-delay: .6s; }
@keyframes hb-pulse { 0%, 100% { opacity: .1; transform: scale(1); } 50% { opacity: .3; transform: scale(1.1); } }
/* Specks wander a small zig-zag and flicker, each on its own clock so they never move together. */
.hb-mote { width: 2px; height: 2px; border-radius: 50%; background: var(--speck); opacity: .2; animation: hb-float 4s ease-in-out infinite; }
.hb-m1 { left: 15%; top: 25%; animation-delay: -.5s; } .hb-m2 { left: 85%; top: 60%; animation-delay: -1.7s; animation-duration: 4.6s; }
.hb-m3 { left: 10%; top: 40%; animation-delay: -2.9s; animation-duration: 5.2s; } .hb-m4 { left: 90%; top: 75%; animation-delay: -1.1s; }
.hb-m5 { left: 72%; top: 30%; animation-delay: -3.4s; animation-duration: 4.6s; } .hb-m6 { left: 34%; top: 88%; animation-delay: -.8s; animation-duration: 5.2s; }
.hb-m7 { left: 62%; top: 12%; animation-delay: -2.2s; } .hb-m8 { left: 80%; top: 46%; animation-delay: -4.1s; animation-duration: 5.2s; }
@keyframes hb-float {
  0%, 100% { transform: translate(0, 0); opacity: .2; }
  25% { transform: translate(5px, -10px); opacity: .6; }
  50% { transform: translate(-3px, -5px); opacity: .4; }
  75% { transform: translate(7px, -15px); opacity: .8; }
}
.hb-light { background: radial-gradient(460px circle at var(--mx, 70%) var(--my, 35%), rgba(170, 190, 220, .07), transparent 70%); }
@media (max-width: 980px) { .c-row { grid-template-columns: minmax(0, 1fr); } }
/* The longest phrase is about 7.5em wide and must stay on one line, so small phones size the headline to the screen. */
@media (max-width: 560px) { .hero-c h1 { font-size: min(2.8rem, calc((100vw - 40px) / 7.7)); } }
@media (max-width: 760px) { .hb .hb-corner { display: none; } .hb-v1 { left: 6%; } .hb-v2 { right: 6%; } .hb-q1, .hb-q3 { left: 6%; } .hb-q2, .hb-q4 { left: 94%; } }
@media (prefers-reduced-motion: reduce) { .rot-track, .hb-pulse, .hb-mote { animation: none; } .hb-mote { opacity: .4; } .hb-pulse { opacity: .2; } }

/* What I build: the main door (lead systems, with a sample), one row (agencies), one closing line (custom work) */
.wb { --wb-pad: clamp(24px, 4.5vw, 56px); --wb-cols: minmax(0, 1.05fr) minmax(0, .95fr); --wb-gap: clamp(28px, 5vw, 64px); display: grid; margin-top: 40px; }
.wb h3 { letter-spacing: -0.03em; }
.wb-meta { font-size: .95rem; font-weight: 600; color: var(--ink); }
.wb-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--red); white-space: nowrap; }
.wb-go svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }

.wb-main { display: grid; grid-template-columns: var(--wb-cols); gap: var(--wb-gap); align-items: center;
  background: var(--mist); border-radius: 22px; padding: var(--wb-pad); }
.wb-copy { display: grid; gap: 16px; justify-items: start; }
.wb-main h3 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.02; }
.wb-copy > p:not(.wb-meta) { color: var(--slate); max-width: 50ch; font-size: 1.06rem; }
.wb-copy > p strong { color: var(--ink); font-weight: 600; }
.wb-copy .btn { margin-top: 8px; }

.wb-proof { margin: 0; background: var(--paper); border-radius: 14px; padding: 12px; }
.wb-proof .sample-strip { margin-bottom: 4px; }
.wb-log { list-style: none; margin: 0; padding: 6px 8px 2px; }
.wb-log li { position: relative; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 13px 0 13px 22px; border-bottom: 1px solid var(--line); font-size: .98rem; color: var(--ink); }
.wb-log li:last-child { border-bottom: 0; }
.wb-log li::before { content: ""; position: absolute; left: 3px; top: calc(13px + .8em - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.wb-log li.wb-done::before { background: var(--red); }
.wb-log time { font: 500 12.5px/1 var(--mono); color: var(--slate); white-space: nowrap; }
.wb-log b { font-weight: 700; }

.wb-row, .wb-else { text-decoration: none; color: inherit; border-radius: 22px; padding-inline: var(--wb-pad); transition: background-color .25s; }
.wb-row { display: grid; grid-template-columns: var(--wb-cols); gap: 12px var(--wb-gap); padding-block: clamp(28px, 3.6vw, 44px); margin-top: 12px; position: relative; }
.wb-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transition: opacity .25s; }
.wb-row h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.05; transition: color .2s; }
.wb-row-body { display: grid; gap: 12px; justify-items: start; }
.wb-row-body > p:first-child { color: var(--slate); max-width: 56ch; }
.wb-else { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 32px; padding-block: 24px; color: var(--slate); font-size: 1.06rem; }
.wb-else b { color: var(--ink); font-weight: 600; margin-right: 4px; }
@media (hover: hover) {
  .wb-row:hover, .wb-else:hover { background: var(--mist); }
  .wb-row:hover::after { opacity: 0; }
  .wb-row:hover h3 { color: var(--red); }
  .wb-row:hover .wb-go svg, .wb-else:hover .wb-go svg { transform: translateX(4px); }
}
@media (max-width: 980px) {
  .wb-main, .wb-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .wb-log li { grid-template-columns: 4.2rem minmax(0, 1fr); gap: 10px; padding-left: 18px; font-size: .94rem; }
  .wb-log li::before { left: 1px; }
}
@media (prefers-reduced-motion: reduce) { .wb-row, .wb-else, .wb-row h3, .wb-go svg { transition: none; } }

/* Lead systems: the two ways in */
.doors-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.door-panel { background: var(--mist); border-radius: 20px; padding: clamp(24px, 3.5vw, 36px); display: grid; gap: 14px; align-content: start; }
.door-icon { width: 32px; height: 32px; color: var(--red); }
.door-panel h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.door-panel p { color: var(--slate); }
.door-panel .checks { margin: 0; }
.door-panel .btn { justify-self: start; margin-top: 8px; }

/* Form radio choices */
.choices { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.choices legend { font-size: 14.5px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.choices label { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 400; transition: border-color .2s, background-color .2s; }
.choices label:hover { border-color: var(--slate); }
.choices label:has(input:checked) { border-color: var(--red); background: color-mix(in srgb, var(--red) 6%, var(--paper)); }
.choices input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--red); }
.choices span { font-size: 15px; color: var(--slate); }
.choices b { display: block; color: var(--ink); font-weight: 600; }

/* Thanks page */
.thanks { min-height: calc(100vh - 69px); display: grid; align-items: center; }
.thanks .wrap { width: 100%; }
.thanks h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); max-width: 14ch; }

@media (max-width: 980px) {
  .hero-grid, .about-grid, .split, .price-grid, .faq-grid, .ask-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .sprints { grid-template-columns: minmax(0, 1fr); }
  .doors-2 { grid-template-columns: minmax(0, 1fr); }
  .photo { max-width: 420px; }
}
@media (max-width: 760px) {
  .nav-links a:not(.btn) { display: none; }
  .included, .ways { grid-template-columns: minmax(0, 1fr); }
  .form .row { grid-template-columns: minmax(0, 1fr); }
  .ctas .btn { width: 100%; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .stat { grid-template-columns: minmax(0, 1fr); }
  .faq-list details p { padding-right: 0; }
}
.nav .btn .short { display: none; }
@media (max-width: 420px) {
  .nav .btn .long { display: none; }
  .nav .btn .short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .path::after { animation: none; top: var(--end, calc(100% - 29px)); }
  .btn, .btn svg, .faq-list summary svg, .choices label { transition: none; }
}