:root {
  --cream: #F5F2ED;        /* Warm Stone */
  --cream-dark: #EDE7DE;
  --white: #FFFFFF;
  --ink: #454342;          /* Warm Graphite */
  --ink-soft: #454342;
  --ink-muted-brand: #7A756F;
  --muted: #6B6A68;        /* Light Graphite */
  --teal: #8F292D;         /* Deep Cherry - links, kicker */
  --green: #454342;        /* Warm Graphite - headings, structure */
  --deep: #2E2426;         /* dark field */
  --jade: #B33A3A;
  --sage: #D9C5B2;         /* Stone Taupe */
  --sage-deep: #C0A78E;
  --rust: #B33A3A;         /* Cherry */
  --rust-dark: #8F292D;    /* Deep Cherry */
  --soft-cherry: #D79A96;
  --border: #E5DCD0;
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow: 0 18px 50px rgba(69, 67, 66, .10);
  --radius: 1.25rem;
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1rem/1.62 var(--font-body); }
img, svg { display: block; max-width: 100%; }
a { color: var(--teal); text-underline-offset: .2em; }
a:hover { color: var(--rust-dark); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: -6rem; background: var(--green); color: white; padding: .75rem 1rem; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.container { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }
.narrow { width: min(calc(100% - 2rem), 760px); margin-inline: auto; }
.section { padding: clamp(1.75rem, 3vw, 2.75rem) 0; }
.section-sm { padding: 1.4rem 0; }
.surface { background: var(--white); }
.sage-surface { background: var(--sage); }
.dark-surface { background: var(--deep); color: var(--cream); }
.dark-surface h1, .dark-surface h2, .dark-surface h3, .dark-surface a { color: var(--cream); }
.eyebrow { margin: 0 0 1rem; color: var(--rust-dark); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }
h1, h2, h3 { color: var(--green); font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 .7rem; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.65rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
p { margin: 0 0 1.25rem; }
.lead { color: var(--ink-soft); font-size: clamp(1.04rem, 1.6vw, 1.15rem); line-height: 1.6; max-width: 68ch; }
.kicker { color: var(--teal); font-size: 1.05rem; font-weight: 600; }
.section-heading { max-width: 760px; margin-bottom: clamp(.9rem, 2vw, 1.5rem); }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(245, 242, 237, .94); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; color: var(--green); }
.brand-word { font: 600 1.38rem/1 var(--font-display); }
.brand-ray { color: var(--rust); }
.brand-sub { margin-top: .32rem; font: 600 .56rem/1 var(--font-body); letter-spacing: .24em; }
.menu-toggle { width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 50%; background: var(--white); color: var(--green); }
.site-nav { display: none; position: absolute; inset: 76px 0 auto; padding: 1rem; background: var(--cream); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.site-nav.open { display: grid; }
.site-nav a { min-height: 44px; display: flex; align-items: center; padding: .5rem .75rem; color: var(--green); text-decoration: none; font-weight: 600; }
/* :not(.button) - the current-page highlight was also recolouring the header
   CTA when you were on /book, putting deep cherry text on a cherry fill. */
.site-nav a[aria-current="page"]:not(.button) { color: var(--rust-dark); }
.button, button.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .5rem; border: 2px solid var(--rust); border-radius: 999px; padding: .72rem 1.15rem; background: var(--rust); color: var(--white); font-weight: 700; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--rust-dark); color: var(--white); border-color: var(--rust-dark); }
.button.secondary { background: transparent; color: var(--rust); border-color: var(--rust); }
.button.secondary:hover { background: var(--white); color: var(--rust-dark); border-color: var(--rust-dark); }
.text-link { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; }
.hero { padding: clamp(2.25rem, 5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
.hero-copy { max-width: 720px; }
.hero-copy .lead { margin-top: 1.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: 2rem; }
.location { display: inline-flex; gap: .55rem; align-items: center; margin-top: 1.5rem; color: var(--muted); font-weight: 600; }
.location::before { content: ""; width: .72rem; height: .72rem; border-radius: 50% 50% 50% 0; background: var(--rust); transform: rotate(-45deg); }
.workflow-art { position: relative; min-height: 390px; border-radius: 2rem; background: var(--sage); padding: 2rem; box-shadow: var(--shadow); overflow: hidden; }
.workflow-art::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.5); right: -70px; top: -70px; }
.art-label { position: relative; z-index: 1; font-weight: 700; color: var(--teal); }
.paper { position: absolute; background: var(--white); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; box-shadow: 0 12px 25px rgba(69,67,66,.09); }
.paper::before, .paper::after { content: ""; display: block; height: 7px; background: var(--cream-dark); border-radius: 999px; margin-bottom: .65rem; }
.paper::after { width: 65%; }
.paper.one { width: 170px; height: 125px; left: 12%; top: 25%; transform: rotate(-7deg); }
.paper.two { width: 190px; height: 135px; left: 26%; top: 43%; transform: rotate(6deg); }
.result-card { position: absolute; right: 8%; bottom: 11%; width: min(240px, 58%); padding: 1.25rem; border-radius: 1rem; background: var(--green); color: var(--cream); box-shadow: var(--shadow); }
.result-card strong { display: block; font: 500 1.5rem/1.2 var(--font-display); margin-bottom: .5rem; }
.result-card span { color: #D9C5B2; }
.motion-enabled .hero-sequence .paper.one { animation: paper-one-settle 1.15s cubic-bezier(.2,.75,.25,1) .12s both; }
.motion-enabled .hero-sequence .paper.two { animation: paper-two-settle 1.15s cubic-bezier(.2,.75,.25,1) .28s both; }
.motion-enabled .hero-sequence .result-card { animation: review-card-arrive .72s cubic-bezier(.2,.9,.3,1) 1.05s both; }
.motion-enabled .hero-sequence .art-label { animation: soft-arrive .55s ease-out .05s both; }
@keyframes paper-one-settle { from { opacity: 0; transform: translate(-42px, 34px) rotate(-18deg); } to { opacity: 1; transform: rotate(-7deg); } }
@keyframes paper-two-settle { from { opacity: 0; transform: translate(48px, 48px) rotate(17deg); } to { opacity: 1; transform: rotate(6deg); } }
@keyframes review-card-arrive { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes soft-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.trust-grid, .cards, .footer-grid, .split, .steps { display: grid; gap: .9rem; }

.guide-promo, .guide-signup {
  margin-top: clamp(1.25rem, 2.6vw, 2rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 34px rgba(69, 67, 66, .07);
}
.guide-promo { display: grid; gap: 1.25rem; align-items: center; }
.guide-promo > div, .guide-signup-copy { max-width: 66ch; }
.guide-promo .eyebrow, .guide-signup .eyebrow { margin-bottom: .55rem; }
.guide-promo h3, .guide-signup h3 { font-size: clamp(1.45rem, 2.8vw, 2rem); }
.guide-promo p:last-child, .guide-signup-copy p:last-child { margin-bottom: 0; }
.guide-promo .button { justify-self: start; }
.guide-signup { display: grid; gap: 1.5rem; align-items: start; }
.guide-signup form { min-width: 0; }
.guide-signup .form-note { margin-top: .85rem; }
.guide-signup .form-grid.two { grid-template-columns: 1fr; }
.sage-surface .guide-signup { background: rgba(255, 255, 255, .92); }

.infographic-preview {
  width: min(100%, 420px);
  margin: 2rem auto 0;
}
.infographic-preview img { display: block; width: 100%; height: auto; border-radius: .75rem; }

.guide-learning { margin-top: 1.5rem; }
.guide-learning-title { margin-bottom: .65rem; font-weight: 700; }
.guide-benefits { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.guide-benefits li + li { margin-top: .45rem; }
.guide-form-block { margin-top: 0; padding-top: 0; border-top: 0; }
.guide-form-block h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); }

.trust-item { padding: 1.25rem 0; border-top: 1px solid var(--border); }
.trust-item strong { display: block; color: var(--green); }
.card { padding: clamp(1.2rem, 2.4vw, 1.65rem); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.card.sage { background: var(--sage); border-color: transparent; }
.card .number { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--rust); color: white; font-weight: 700; margin-bottom: 1rem; }
.card ul, .check-list, .plain-list { padding-left: 1.25rem; }
.card li, .check-list li, .plain-list li { margin-bottom: .55rem; }
.problem-grid .card { min-height: 100%; }
.audit-box { display: grid; gap: 2rem; padding: clamp(1.5rem, 5vw, 4rem); border-radius: 1.75rem; background: var(--green); color: var(--cream); }
.audit-box h2, .audit-box h3 { color: var(--cream); }
.audit-box .eyebrow { color: #E9B5B1; }

.path { counter-reset: step; }
.path article { position: relative; padding: 0 0 2rem 4.5rem; }
.path article::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -.25rem; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--rust); color: white; font-weight: 700; }
.path article:not(:last-child)::after { content: ""; position: absolute; left: 1.45rem; top: 3rem; bottom: 0; width: 2px; background: var(--border); }
.guardrails { display: grid; gap: 1.5rem; }
.guardrails section { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius); }
.guardrails .will { background: var(--sage); }
.guardrails .wont { background: var(--cream-dark); }
.portrait-wrap { position: relative; }
.portrait { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 1.5rem; filter: saturate(.86); }
.portrait-square { height: auto; aspect-ratio: 1 / 1; object-position: center; }
.asset-note { display: inline-block; margin-top: .75rem; color: var(--muted); font-size: .78rem; }
.quote-card { border-left: 4px solid var(--rust); padding-left: 1.5rem; }
.page-hero { padding: clamp(1.75rem, 3.2vw, 3rem) 0 1.75rem; }
.page-hero h1 { max-width: 950px; font-size: clamp(2.25rem, 4.8vw, 3.8rem); }
.service-card { position: relative; display: flex; flex-direction: column; }
.service-card .button { margin-top: auto; align-self: flex-start; }
.tag { display: inline-flex; align-items: center; width: fit-content; padding: .3rem .65rem; border-radius: 999px; background: var(--sage); color: var(--teal); font-size: .8rem; font-weight: 700; }
.method-step { border-top: 3px solid var(--sage-deep); }
.method-step.active { border-top-color: var(--rust); }
.method-step small { display: block; color: var(--rust-dark); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.method-progress { position: relative; margin: 0 0 2.5rem; padding-top: 2.8rem; }
.method-progress::before, .method-progress-fill { content: ""; position: absolute; left: 5%; right: 5%; top: 1.15rem; height: 3px; border-radius: 999px; }
.method-progress::before { background: rgba(69,67,66,.18); }
.method-progress-fill { right: auto; width: 0; background: var(--rust); }
.motion-enabled .method-progress.is-visible .method-progress-fill { animation: method-line-fill 1.35s ease-out forwards; }
.method-progress ol { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; margin: 0; padding: 0; list-style: none; text-align: center; }
.method-progress li { position: relative; color: var(--teal); font-size: clamp(.67rem, 1.5vw, .86rem); font-weight: 700; }
.method-progress li::before { content: ""; position: absolute; left: 50%; top: -2.25rem; width: 1rem; height: 1rem; border: 3px solid var(--sage-surface, var(--sage)); border-radius: 50%; background: var(--sage-deep); transform: translateX(-50%); box-shadow: 0 0 0 2px var(--teal); }
.motion-enabled .method-progress.is-visible li::before { animation: method-node-on .32s ease-out both; animation-delay: calc(.2s + var(--node-index) * .24s); }
@keyframes method-line-fill { to { width: 90%; } }
@keyframes method-node-on { from { background: var(--sage-deep); transform: translateX(-50%) scale(.72); } to { background: var(--rust); transform: translateX(-50%) scale(1); } }
.workflow-demo { display: grid; gap: 1.5rem; }
.workflow-tabs { display: flex; flex-wrap: wrap; gap: .6rem; }
.workflow-tab { min-height: 46px; padding: .65rem 1rem; border: 1px solid var(--sage-deep); border-radius: 999px; background: transparent; color: var(--green); font-weight: 700; cursor: pointer; }
.workflow-tab[aria-selected="true"] { border-color: var(--rust); background: var(--rust); color: var(--white); }
.workflow-panel { padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--border); border-radius: 1.5rem; background: var(--cream); box-shadow: var(--shadow); }
.workflow-panel[hidden] { display: none; }
.workflow-panel h3 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.flow-steps { display: grid; gap: .85rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.flow-step { position: relative; min-height: 9rem; padding: 1.2rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--white); }
.flow-step:not(:last-child)::after { content: "↓"; position: absolute; z-index: 2; left: 50%; bottom: -1.45rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--rust); color: white; font-weight: 700; transform: translateX(-50%); }
.flow-step-number { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .75rem; border-radius: 50%; background: var(--sage); color: var(--green); font-weight: 700; }
.flow-step strong { display: block; color: var(--green); margin-bottom: .35rem; }
.flow-step small { display: block; color: var(--muted); line-height: 1.5; }
.workflow-panel.is-active .flow-step { animation: flow-step-in .5s ease-out both; animation-delay: calc(var(--flow-index) * .12s); }
@keyframes flow-step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.motion-enabled .reveal-item { opacity: 0; transform: translateY(16px); transition: opacity .55s ease-out, transform .55s ease-out; transition-delay: var(--reveal-delay, 0ms); }
.motion-enabled .reveal-item.is-visible { opacity: 1; transform: translateY(0); }
.industry { border-top: 1px solid var(--border); padding: 2rem 0; }
.industry h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.timeline article { position: relative; min-height: 4rem; padding: 0 0 2.5rem 6rem; }
.timeline article:not(:last-child)::after { content: ""; position: absolute; z-index: -1; left: 2.2rem; top: 3.7rem; bottom: 0; width: 2px; background: var(--sage-deep); }
.career-logo { position: absolute; left: 0; top: 0; width: 4.5rem; height: 3.5rem; display: grid; place-items: center; padding: .65rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--white); box-shadow: 0 8px 20px rgba(69,67,66,.07); }
.career-logo img { width: 100%; max-height: 2.1rem; object-fit: contain; }
.career-logo.jenniray { background: var(--green); border-color: var(--green); }
.education-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.education-item { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--cream); }
.education-logo { width: 4.5rem; height: 3.75rem; display: grid; place-items: center; padding: .55rem; border-radius: .75rem; background: var(--white); }
.education-logo img { width: 100%; max-height: 2.6rem; object-fit: contain; }
.education-item strong { display: block; color: var(--green); line-height: 1.35; }
.education-item span:last-child { display: block; margin-top: .25rem; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.faq-list details { border-top: 1px solid var(--border); }
.faq-list details:last-child { border-bottom: 1px solid var(--border); }
.faq-list summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; color: var(--green); font: 500 1.2rem/1.35 var(--font-display); }
.faq-list summary::after { content: "+"; color: var(--rust); font: 500 1.6rem/1 var(--font-body); }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details > div { padding: 0 0 1.5rem; max-width: 75ch; }
.form-grid { display: grid; gap: 1rem; }
label { display: block; color: var(--green); font-weight: 700; }
input, select, textarea { width: 100%; min-height: 48px; margin-top: .35rem; border: 1px solid var(--sage-deep); border-radius: .7rem; padding: .75rem; background: var(--white); color: var(--ink); }
textarea { min-height: 150px; resize: vertical; }
.form-note, .fine-print { color: var(--muted); font-size: .88rem; }
.form-status { min-height: 1.7rem; margin: .5rem 0; color: var(--teal); font-weight: 600; }
.logo-grid { display: grid; gap: 1rem; }
.logo-option { background: white; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.logo-canvas { min-height: 190px; display: grid; place-items: center; padding: 2rem; background: var(--sage); }
.logo-copy { padding: 1.5rem; }
.wordmark-demo { display: inline-flex; flex-direction: column; color: var(--green); line-height: 1; }
.wordmark-demo > span { font: 500 2rem/1 var(--font-display); }
.wordmark-demo .brand-ray { color: var(--rust); }
.wordmark-demo small { margin-top: .5rem; letter-spacing: .28em; font-weight: 700; }
.brand-footer { padding: 3.5rem 0 6rem; background: var(--deep); color: #D9C5B2; }
.brand-footer h2, .brand-footer h3, .brand-footer a { color: var(--cream); }
.footer-links { display: grid; gap: .4rem; }
.footer-links a { min-height: 40px; display: flex; align-items: center; width: fit-content; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .85rem; }
.mobile-book { position: fixed; z-index: 45; left: 1rem; right: 1rem; bottom: 1rem; box-shadow: 0 8px 25px rgba(69,67,66,.28); }
.notice { padding: 1rem 1.25rem; border-radius: .8rem; background: #F8EEEC; border-left: 4px solid var(--rust); }

@media (min-width: 720px) {
  .cards.two, .split, .guardrails, .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.three, .trust-grid, .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-promo { grid-template-columns: minmax(0, 1fr) auto; }
  .guide-signup { grid-template-columns: minmax(0, 1fr) minmax(18rem, .9fr); gap: 2rem; }
  .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-signup .form-grid.two { grid-template-columns: 1fr; }
  .audit-box { grid-template-columns: 1.1fr .9fr; }
  .timeline article { padding-left: 8rem; }
  .timeline article:not(:last-child)::after { left: 3.05rem; top: 4.2rem; }
  .career-logo { width: 6.25rem; height: 4rem; padding: .55rem; }
  .career-logo img { max-height: 2.4rem; }
  .flow-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .flow-step:not(:last-child)::after { content: "→"; left: auto; right: -1.55rem; top: 50%; bottom: auto; transform: translateY(-50%); }
}

@media (min-width: 1040px) {
  .menu-toggle { display: none; }
  .site-nav { display: flex; position: static; align-items: center; gap: .1rem; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .site-nav a { padding-inline: .62rem; font-size: .88rem; }
  .site-nav .button { margin-left: .4rem; color: white; min-height: 44px; padding-inline: 1rem; }
  .mobile-book { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); }
  .problem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal-item { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-header, .mobile-book { display: none; }
  body { background: white; }
}

/* ---- Added 2026-08-14: credential logo strip + level ladder ---- */
.logo-strip { padding: 2.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--cream-dark); }
.logo-strip > .container > p { text-align: center; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 1.5rem; }
.logo-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: center; }
.logo-chip { width: 7rem; height: 3.6rem; display: grid; place-items: center; padding: .7rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--white); box-shadow: 0 8px 20px rgba(69,67,66,.07); }
.logo-chip img { width: 100%; max-height: 2.2rem; object-fit: contain; }
.ladder { display: grid; gap: .7rem; margin: 2rem 0 0; padding: 0; }
.ladder li { list-style: none; display: grid; grid-template-columns: 2.6rem 1fr; gap: 1.1rem; align-items: start; padding: 1.05rem 1.35rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.ladder li b { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--sage); color: var(--green); font-weight: 700; }
.ladder li:last-child b { background: var(--rust); color: #fff; }
.ladder strong { display: block; color: var(--green); font-family: var(--font-display); font-size: 1.15rem; }
.ladder small { display: block; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; margin-top: .15rem; }

/* compact logo row for the Jennifer credential block */
.logo-row.compact { justify-content: flex-start; gap: .55rem; margin: 1.5rem 0 1.75rem; }
.logo-row.compact .logo-chip { width: 5.1rem; height: 2.85rem; padding: .45rem; }
.logo-row.compact .logo-chip img { max-height: 1.55rem; }

/* eyebrow + heading inside cards (paired homepage boxes) */
.card .eyebrow { margin-bottom: .5rem; }
.card h3 { margin-bottom: .85rem; }
.cards.two .card { display: flex; flex-direction: column; }

/* card body copy: larger and slightly heavier so it competes with the headings */
.card p:not(.eyebrow) { font-size: 1.08rem; line-height: 1.65; }
.cards.two .card p:not(.eyebrow) { font-size: 1.14rem; font-weight: 500; color: var(--ink); }


/* eyebrow labels: brighter coral, larger, heavier so they read first */
/* Cherry at this small size needs the deeper value to clear AA on stone and taupe;
   these two rules were overriding the accessible --rust-dark set further up.
   Corrected 2026-08-25: white 6.02, cream 5.45, sage 4.86. Dark surfaces keep
   their own lighter salmon further down. */
.eyebrow { color: var(--rust-dark); font-weight: 700; font-size: .88rem; letter-spacing: .1em; }
.card .eyebrow { font-size: .92rem; color: var(--rust-dark); }

/* last step in a path shouldn't carry trailing padding */
.path article:last-child { padding-bottom: 0; }
/* tighter section rhythm where two blocks belong together */
.section.tight { padding-top: clamp(1.25rem, 2.5vw, 2rem); padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.section.tight-bottom { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.section.tight-top { padding-top: clamp(1.25rem, 2.5vw, 2rem); }

/* tighten the hand-off between hero and the first section */
.hero { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.location { margin-bottom: 0; }
.hero-copy .actions { margin-top: 1.5rem; }

/* --- Booking form: time-window choices + spam honeypot (2026-08-20) --- */
.choice-group { border: 0; padding: 0; margin: 0; }
.choice-group legend { padding: 0; color: var(--green); font-weight: 700; }
.choice-group .choice {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: .5rem .5rem 0 0; padding: .5rem .85rem;
  border: 1px solid var(--sage-deep); border-radius: 999px;
  background: var(--white); font-weight: 500; cursor: pointer;
}
.choice-group .choice input[type="checkbox"] {
  width: auto; min-height: 0; margin: 0; padding: 0; accent-color: var(--teal);
}
.choice-group .choice:has(input:checked) { border-color: var(--green); background: var(--sage); }
.choice-group .choice:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Readiness self-check quiz (2026-08-21) --- */
.quiz-q { border: 0; padding: 0; margin: 0 0 2rem; }
.quiz-q legend {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: 0; margin-bottom: .85rem; color: var(--green);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.35;
}
.quiz-num {
  display: grid; place-items: center; flex: none;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%; background: var(--rust); color: #fff;
  font-family: var(--font-body); font-size: .9rem; font-weight: 700;
  vertical-align: .05em;
}
.quiz-opts { display: grid; gap: .5rem; }
.quiz-opt {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 1rem;
  border: 1px solid var(--sage-deep); border-radius: .8rem;
  background: var(--white); color: var(--ink);
  font-weight: 400; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.quiz-opt:hover { border-color: var(--teal); }
.quiz-opt input[type="radio"] {
  width: auto; min-height: 0; margin: .35rem 0 0; padding: 0;
  accent-color: var(--teal); flex: none;
}
.quiz-opt:has(input:checked) { border-color: var(--green); background: var(--sage); font-weight: 500; }
.quiz-opt:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; }

.quiz-result {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); box-shadow: var(--shadow);
}
.quiz-result:focus { outline: none; }
.quiz-result h2 { margin-top: .25rem; }
.quiz-score { margin: 0 0 1.5rem; font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--teal); }
.quiz-score-total { font-family: var(--font-body); font-size: 1rem; color: var(--muted); font-weight: 500; }

.pair-scores { display: grid; gap: .9rem; margin: 0 0 1.75rem; }
.pair { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: .75rem; }
.pair-name { color: var(--green); font-weight: 700; font-size: .9rem; }
.pair-track { display: block; height: .5rem; border-radius: 999px; background: var(--cream-dark); overflow: hidden; }
.pair-fill { display: block; height: 100%; border-radius: 999px; background: var(--jade); }
.pair.is-high .pair-fill { background: var(--jade); }
.pair.is-mid  .pair-fill { background: var(--soft-cherry); }
.pair.is-low  .pair-fill { background: var(--sage-deep); }
.pair-value { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }

.fix-list { margin: 0 0 1.75rem; padding: 1.5rem; border-radius: .9rem; background: var(--cream); }
.fix-list h3 { margin-top: 0; font-size: 1.1rem; }
.fix-list > p { margin-top: 0; }

.steps { margin: 1.5rem 0 1.25rem; padding: 0; list-style: none; counter-reset: none; }
.step { display: grid; grid-template-columns: 2.1rem 1fr; gap: .9rem; padding-bottom: 1.4rem; position: relative; }
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::after {
  content: ""; position: absolute; left: 1rem; top: 2.4rem; bottom: .35rem;
  width: 2px; background: var(--border);
}
.step-num {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; background: var(--sage-deep); color: var(--green);
  font-weight: 700; font-size: .95rem; position: relative; z-index: 1;
}
.step.is-start .step-num { background: var(--rust); color: #fff; }
.step.is-done .step-num { background: var(--jade); color: #fff; }
.step-body p { margin: 0; }
.step-body > p:first-child { margin-top: 0; }
.step-flag {
  display: inline-block; margin-bottom: .4rem; padding: .12rem .55rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.step-flag.start { background: var(--rust); color: #fff; }
.step-flag.done { background: var(--sage); color: var(--teal); }
.step.is-done .step-body p { color: var(--ink-soft); }

.folder-tree {
  margin: .85rem 0; padding: .85rem 1rem; list-style: none;
  border-left: 3px solid var(--sage-deep); background: var(--white);
  border-radius: 0 .5rem .5rem 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .85rem; line-height: 1.9;
}
.folder-tree li::before { content: "\1F4C1  "; }

.result-cta { margin: 0 0 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.result-cta p:first-child { margin-top: 0; }

.scorecard-block { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.scorecard-block h3 { margin-top: 0; }

.link-button {
  border: 0; padding: 0; background: none; color: var(--teal);
  font-size: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.link-button:hover { color: var(--rust-dark); }

@media (max-width: 480px) {
  .pair { grid-template-columns: 1fr auto; }
  .pair-track { grid-column: 1 / -1; }
}

/* The readiness page routes people itself - a sticky "book a call" bar would
   contradict the "not ready yet" result sitting right above it. */
body[data-page="readiness"] .mobile-book,
body[data-page="guide"] .mobile-book { display: none; }

/* --- Homepage: the two-path choice at the foot of the page (2026-08-21) --- */
.choice-cards { display: grid; gap: 1.25rem; }
.choice-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.35rem, 2.5vw, 1.75rem) clamp(1.5rem, 3.5vw, 2.25rem);
  background: rgba(245, 242, 237, .07);
  border: 1px solid rgba(217, 197, 178, .5); border-radius: var(--radius);
  color: var(--cream);
}
/* E1: both cards carry equal weight - .primary is no longer a louder variant. */
.choice-card h3 { margin-top: 0; color: var(--cream); font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.choice-card p { color: #DCCBBA; }
.choice-card .button { margin-top: auto; }

/* Buttons on any dark field: cherry fill, soft-cherry hairline ring. The ring is
   what keeps the button edge readable - cherry alone against #2E2426 is 2.57:1. */
.dark-surface .button, .audit-box .button, .button.secondary-light {
  background: var(--rust); color: var(--white); border-color: var(--soft-cherry);
}
.dark-surface .button:hover, .audit-box .button:hover, .button.secondary-light:hover {
  background: var(--rust-dark); color: var(--white); border-color: #E9B5B1;
}
.dark-surface .section-heading h2 { color: var(--cream); }
.dark-surface .section-heading .eyebrow { color: #E9B5B1; }

@media (min-width: 800px) {
  .choice-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-cards.three > :last-child { grid-column: 1 / -1; }
}

@media (min-width: 1040px) {
  .choice-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choice-cards.three > :last-child { grid-column: auto; }
  .guide-signup .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the nav gained an eighth item - reclaim a little horizontal room */
@media (min-width: 1040px) {
  .site-nav a { padding-inline: .5rem; }
}

/* --- Pinned header + slimmer footer (2026-08-21) --------------------------
   The header already carried `position: sticky`, but it was wrapped in a
   container exactly its own height, so it had no room to travel and scrolled
   away. The wrapper has to be the sticky element. -------------------------- */
[data-site-header] { position: sticky; top: 0; z-index: 50; }
html { scroll-padding-top: 5.5rem; }   /* so #anchors clear the pinned header */

.nav-wrap { min-height: 68px; transition: min-height .18s ease; }
[data-site-header].is-scrolled .nav-wrap { min-height: 54px; }
[data-site-header].is-scrolled .site-header { box-shadow: 0 6px 20px rgba(69,67,66,.07); }
.site-nav { inset: 68px 0 auto; }
[data-site-header].is-scrolled .site-nav { inset: 54px 0 auto; }
@media (prefers-reduced-motion: reduce) { .nav-wrap { transition: none; } }

/* Footer: was 915px tall. Three columns on desktop, tighter link rows, and the
   deep bottom padding only where the sticky mobile CTA actually needs clearing. */
.brand-footer { padding: 2.5rem 0 6rem; }
.footer-links { gap: .15rem; }
/* Direct children only so inline links keep their own treatment. */
.footer-links > a { min-height: 36px; display: flex; align-items: center; width: fit-content; }
.footer-links a { min-height: 0; display: inline; }
.footer-links h3 { margin: 0 0 .35rem; font-size: 1rem; }
.brand-footer .footer-grid > div > p { margin: .5rem 0; }
.footer-bottom { margin-top: 1.75rem; padding-top: 1.25rem; }

@media (min-width: 1040px) {
  .brand-footer { padding: 2.5rem 0 2.5rem; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1.3fr; gap: 2.5rem; }
  .footer-links > a { min-height: 30px; }
}

/* On phones the Explore list was seven full-width rows - over 250px of footer.
   Two columns halves it. :has() picks out the link list from the prose block,
   which shares the same class. */
@media (max-width: 700px) {
  .brand-footer { padding: 2rem 0 5.5rem; }
  .brand-footer .footer-grid { gap: 1.75rem; }
}

/* --- Footer, second pass: nav links removed, so it can get much shorter ---
   The pinned header carries navigation now; the footer only needs identity,
   the two-businesses note, and the legal line. */
.brand-footer { padding: 1.75rem 0 5rem; }
.brand-footer .brand { transform: scale(.92); transform-origin: left center; }
.brand-footer .footer-grid > div > p { margin: .5rem 0; font-size: .95rem; }
.footer-bottom {
  margin-top: 1.25rem; padding-top: 1rem;
  align-items: baseline; row-gap: .35rem;
}
.footer-sep { opacity: .45; padding: 0 .15rem; }
.footer-links h3 { margin-bottom: .25rem; }

@media (min-width: 1040px) {
  .brand-footer { padding: 1.75rem 0 1.75rem; }
  .footer-grid { grid-template-columns: 1.6fr 1fr; gap: 3rem; }
}
@media (max-width: 700px) {
  .brand-footer { padding: 1.5rem 0 5rem; }
  .brand-footer .footer-grid { gap: 1.25rem; }
}
/* .footer-links is a grid inside a stretched grid cell, so its rows were being
   pulled apart to fill the taller column. Pin the content to the top. */
.footer-links { align-content: start; }

/* The final CTA and the footer are the same dark green, so the padding where
   they meet reads as one large empty band rather than a separation. Close it. */
.section.dark-surface { padding-bottom: 1.25rem; }
.section.dark-surface .fine-print:last-child { margin-bottom: 0; }
.brand-footer { padding-top: 1rem; }
@media (min-width: 1040px) { .brand-footer { padding-top: 1rem; padding-bottom: 1.5rem; } }

/* --- Slim footer: booking, readiness, privacy, terms (2026-08-21) ---------
   Those pages either have the visitor mid-task or are the legal text itself,
   so they carry one line rather than the full footer. The privacy link stays
   on every one of them, which is the point. */
.brand-footer.slim { padding: 1rem 0 5rem; }
.brand-footer.slim .footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 1040px) { .brand-footer.slim { padding: 1rem 0; } }

/* The sticky "Book a fit call" bar is redundant on the booking page itself. */
body[data-page="book"] .mobile-book { display: none; }

/* The closing CTA heading is short; the 760px cap was forcing it onto two lines
   and costing vertical space on a section that is mostly whitespace anyway. */
.dark-surface .section-heading { max-width: none; }
.dark-surface .section-heading h2 { font-size: clamp(1.9rem, 4.2vw, 3.35rem); }


/* --- Density pass (2026-08-22) -------------------------------------------
   The site held ~3,500 words across 27 screens: 8-11px of page height per
   word, against 4-6 for a comfortable marketing page. The base rules above
   were edited rather than overridden here, so the tuned variants (.tight,
   .dark-surface, .brand-footer) keep their relationship to them. */
.hero { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.hero-copy .actions { margin-top: 1.15rem; }
.timeline article { padding-bottom: 1rem; }
.path article { padding-bottom: 1.4rem; }
.quote-card { padding: clamp(1.2rem, 2.6vw, 1.9rem); }
.faq-list details { padding-block: .1rem; }

/* --- Readiness page density (2026-08-22) ---------------------------------
   The check is the one page people are asked to work through in a single
   sitting, so its rhythm is tighter than the sitewide default. Scoped to the
   page so nothing else moves. The h1 is capped well below the sitewide hero
   size: it is a question on a form, not a headline. */
body[data-page="readiness"] .page-hero { padding: clamp(1.1rem, 2.2vw, 1.9rem) 0 .9rem; }
body[data-page="readiness"] .page-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); max-width: 22ch; }
body[data-page="readiness"] .page-hero .lead { margin-bottom: 0; }
body[data-page="readiness"] .quiz-q { margin-bottom: 1.4rem; }
body[data-page="readiness"] .quiz-q legend { margin-bottom: .6rem; font-size: clamp(1.08rem, 1.9vw, 1.28rem); }
body[data-page="readiness"] .quiz-opt { padding: .6rem .85rem; }
body[data-page="readiness"] .quiz-opts { gap: .4rem; }
body[data-page="readiness"] .quiz-result { padding: clamp(1.2rem, 3vw, 2rem); }
body[data-page="readiness"] .pair-scores { gap: .7rem; margin-bottom: 1.35rem; }
body[data-page="readiness"] .fix-list { margin-bottom: 1.35rem; padding: 1.1rem 1.2rem; }
body[data-page="readiness"] .steps { margin: 1rem 0 .5rem; }
body[data-page="readiness"] .step { padding-bottom: 1rem; }
body[data-page="readiness"] .result-cta { margin-bottom: 0; padding-top: 1.1rem; }
body[data-page="readiness"] .scorecard-block { margin-top: 1.35rem; padding-top: 1.35rem; }

/* The guide page is a single ask. Same tightening, no quiz. */
body[data-page="guide"] .page-hero { padding: clamp(1.1rem, 2.2vw, 1.9rem) 0 .9rem; }
body[data-page="guide"] .page-hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
body[data-page="guide"] .scorecard-block { margin-top: 1.75rem; padding-top: 1.5rem; }

/* --- Homepage bio: portrait sized to the text beside it (2026-08-22) ------
   The section ran 805px tall because a 4/5 portrait in a 50/50 split rendered
   728px, while the text column next to it is only 425px of actual content. A
   340px column puts the photo at 340x425, so the two sides match and the
   section lands at its floor (~502px). Going narrower buys nothing: below
   425px the text is what sets the height, and you just add white space beside
   a smaller photo. Below 720px the split stacks and this does not apply. */
@media (min-width: 720px) {
  .split.bio-split { grid-template-columns: 340px minmax(0, 1fr); gap: 2.25rem; align-items: center; }
}

/* Reveal-on-scroll can't see elements inside a closed <details>: they have no
   box, so the IntersectionObserver never fires and they stay at opacity 0 even
   after the visitor opens the accordion. Anything inside an accordion opts out
   of the animation. Caught when the automation ladder moved into the FAQ. */
.motion-enabled details .reveal-item { opacity: 1; transform: none; }

/* Industry accordion titles in coral, so an open panel keeps its heading
   distinct from the body copy underneath it. --rust-dark rather than --rust:
   at 19px/500 this is normal-size text, and --rust on cream is 4.16:1, under
   the 4.5:1 minimum. --rust-dark reads the same and lands at 5.4:1. Scoped to
   this page; the FAQ summaries stay green unless she asks. */
body[data-page="utah"] .faq-list summary { color: var(--rust-dark); }

/* --- Wasatch behind the service-area copy (2026-08-23) -------------------
   Three things make this read as a photograph rather than a gradient wipe.

   1. The base. `.surface` is WHITE, and against the cream sections either side
      that made the uncovered half look like a white box with a picture fading
      into it. Overridden to cream here, which is also nearly the colour of the
      sky in the photo, so covered and uncovered areas meet invisibly.

   2. multiply, not a plain overlay: the pale sky leaves the cream almost
      untouched while the ridges darken, so the band keeps its warmth. An early
      version used saturate(.4) and the whole thing went cold grey.

   3. Extra bottom padding, so the ridgeline has a band of its own below the
      copy instead of cutting through the paragraph. A horizontal mask was tried
      first and failed contrast on desktop (body copy 3.49:1) because the ridges
      still crossed the text on the right.

   Measured at 390/600/760/900/1280/1440: the small coral eyebrow is the worst
   case everywhere at 5.21-5.26, with the heading and body well clear,
   against a 4.5 minimum. The small coral eyebrow is the binding constraint.
   If the image, the mask or the opacity change, RE-MEASURE. Screenshot the
   section twice, once normally and once with visibility:hidden on the text,
   and sample the darkest background pixel inside each text box from the second
   shot; measuring the first just finds the glyphs. Decorative, so it is a
   background rather than an <img> and needs no alt text. */
body[data-page="utah"] .service-area {
  position: relative; overflow: hidden;
  background: var(--cream);   /* the industry section above is .surface (white),
                                 so these two no longer blend into each other */
  padding-bottom: clamp(7rem, 8vw, 8rem);   /* the ridgeline's own band */
}
body[data-page="utah"] .service-area::before {
  content: ""; position: absolute; inset: 0;
  background: url(/assets/wasatch.jpg) center bottom / cover;
  filter: saturate(.8); opacity: .85; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.25) 40%, #000 78%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.25) 40%, #000 78%);
}
body[data-page="utah"] .service-area > * { position: relative; z-index: 1; }

/* About: the "why the background matters" split pairs a tall four-line heading
   with two short paragraphs. Stretched to the top the right column looked
   stranded; centring it against the heading balances the two. */
body[data-page="about"] .sage-surface .split { align-items: center; }

/* --- Closing CTA as a row, not a stack (2026-08-23) ----------------------
   The stacked version ran 242px for one sentence and a button. Laid out
   horizontally the copy sits beside the button instead of above it, and the
   heading drops from 42px to about 32px because it no longer has to carry the
   section on its own. Wraps back to a stack below 720px, where a row would
   squeeze both halves. */
.cta-row .container {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: clamp(1.1rem, 2.6vw, 2.5rem);
}
.cta-row .container > div { flex: 1 1 26rem; }
.cta-row h2 { margin: 0 0 .4rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cta-row p { margin: 0; max-width: 60ch; }
.cta-row .button { flex: none; }
.section.dark-surface.cta-row { padding-top: clamp(1.5rem, 2.6vw, 2.1rem); padding-bottom: clamp(1.5rem, 2.6vw, 2.1rem); }

/* 44px is the smallest comfortable tap target; below that this stops being
   a button on a phone. */
.button.small { min-height: 44px; padding: .55rem 1.05rem; font-size: .95rem; }

/* ---- Added 2026-08-24: homepage credibility strip inside the dark close.
       White knockout marks, no chips. The source colour PNGs were converted to
       cream-on-transparent and stored in assets/career/white/. Per-logo heights
       are set inline on each img because the source lockups differ in shape:
       IBM and BILL are wordmarks, American Express is a solid box, and
       Swire Coca-Cola is a two-line lockup that needs more height to read. ---- */
.cred-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto 160px; column-gap: .9rem; row-gap: 1.3rem; align-items: center; margin: 0 0 clamp(2rem, 3.5vw, 2.75rem); padding: 0 0 clamp(1.75rem, 3vw, 2.25rem); border-bottom: 1px solid rgba(217, 197, 178, .24); }
.cred-portrait { grid-column: 3; grid-row: 1 / span 2; display: block; width: 160px; height: 175px; overflow: hidden; justify-self: end; border: 1px solid rgba(217, 197, 178, .62); border-radius: 1rem; background: var(--cream-dark); }
.cred-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: saturate(.82); }
.cred-strip p { grid-column: 1; color: #DCCBBA; margin: 0; max-width: 66ch; }
.cred-strip p strong { color: var(--cream); }
.cred-strip .cred-row { display: contents; }
.cred-strip .marks { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.3rem; }
.cred-strip .marks img { width: auto; opacity: .9; }
.cred-strip .text-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; color: #E4D5C4; }
@media (max-width: 700px) {
  .cred-strip { grid-template-columns: minmax(0, 1fr) 92px; column-gap: 1rem; row-gap: 1rem; }
  .cred-portrait { grid-column: 2; grid-row: 1; width: 92px; height: 108px; border-radius: .8rem; }
  .cred-strip .cred-row { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
}

/* ---- Added 2026-08-24: homepage "what happens next" compressed to a sequence ---- */
.seq-block { text-align: center; }
.seq-block .eyebrow { margin-bottom: .5rem; }
.step-seq { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .55rem 1.1rem; margin: 1.5rem 0 1.35rem; padding: 0; }
.step-seq li { display: flex; align-items: center; gap: .6rem; }
.step-seq li b { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sage); color: var(--green); font-size: .9rem; font-weight: 700; }
.step-seq li span { font-family: var(--font-display); font-size: 1.15rem; color: var(--green); font-weight: 600; }
.step-seq li:not(:last-child)::after { content: "\2192"; color: var(--sage-deep); font-size: 1.2rem; margin-left: .55rem; }
.seq-note { color: var(--ink-soft); margin: 0 auto; max-width: 52ch; }
.seq-note .text-link { display: inline-block; margin-top: .9rem; }
.hero-payoff { display: block; margin-top: .65rem; color: var(--green); font-weight: 700; }
.revenue-band { padding: clamp(1.65rem, 3.5vw, 2.5rem) 0; background: var(--sage); }
.revenue-band p { margin: 0; color: var(--deep); font: 600 clamp(1.45rem, 3vw, 2.15rem)/1.25 var(--font-display); text-align: center; text-wrap: balance; }
@media (max-width: 560px) {
  .seq-block { text-align: left; }
  .step-seq { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .step-seq li:not(:last-child)::after { content: none; }
  .seq-note { margin: 0; }
}

/* ---- Added 2026-08-24, simplified 2026-08-25: About page career marks.
       Replaces the seven-entry .timeline, which read as a LinkedIn feed, and
       then the capability-group table that replaced it. One row of ink
       monochrome marks between hairline rules; the closing sentence carries the
       meaning. Heights are set per logo because the source lockups differ in
       shape. .timeline, .career-logo, .education-list, .education-item and
       .education-logo are now unused. ---- */
.career-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 3.6rem; margin: .5rem 0 1.8rem; padding: 1.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.career-marks img { width: auto; opacity: .72; }
.capabilities-note { max-width: 62ch; margin: 0 0 1.4rem; }
.edu-line { margin: 0; color: var(--muted); font-size: .95rem; max-width: 70ch; }
.edu-line strong { color: var(--ink-soft); }

/* ---- Added 2026-08-25: About page "What I believe" closing line.
       Given its own weight because it is the strongest sentence on the page
       and should not read as the tail of a paragraph. ---- */
.belief-close { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.4; color: var(--rust-dark); margin: 1.5rem 0 0; }

/* ---- Added 2026-08-25: Who I help industry rows.
       The pain line moved out of the panel and into the clickable row, so a
       visitor reads four industries with a reason attached before opening
       anything. Scoped to this page so the FAQ accordion is untouched. ---- */
body[data-page="utah"] .faq-list summary { align-items: flex-start; min-height: 0; padding: 1.05rem 0; }
body[data-page="utah"] .faq-list summary::after { line-height: 1.35; }
.ind-label { display: grid; gap: .22rem; }
.ind-name { font: 500 1.2rem/1.35 var(--font-display); color: var(--rust-dark); }
.ind-pain { font: 400 1rem/1.5 var(--font-body); color: var(--ink-soft); }
.not-listed { margin-top: 1.6rem; }
.not-listed p { max-width: 62ch; margin: 0 0 .6rem; font-size: .95rem; color: var(--ink-soft); }
.not-listed p strong { color: var(--green); }
.not-listed .fine-print { margin: 0; }

/* ---- Added 2026-08-25: booking form caution line.
       Was a boxed .notice, which read as an alarm on the highest-trust page on
       the site. Same information, stated once, at fine-print weight. ---- */
.form-caution { margin: 1.5rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.6; max-width: 56ch; }

/* --- Palette swap 2026-08-26 -------------------------------------------- */
.dark-surface .fine-print { color: #D9C5B2; }
.dark-surface .fine-print a { color: #F5F2ED; }

/* Light Graphite captions clear AA on stone and white but not on Stone Taupe
   (3.24:1). On the taupe panels they step up to Warm Graphite. */
.sage-surface .form-caution, .sage-surface .form-note,
.sage-surface .fine-print, .sage-surface .edu-line { color: var(--ink-soft); }

/* --- Card headings in Deep Cherry (2026-08-26) ---------------------------
   Gives each page a scan layer: h2 stays graphite as page structure, an h3
   inside a card is an item and takes the accent. Deep Cherry rather than
   Cherry because two of these sit on taupe cards, where Cherry is 3.51:1.
   Cards that already carry a cherry eyebrow keep graphite so the two do not
   stack. */
.card h3 { color: var(--rust-dark); }
.card .eyebrow + h3 { color: var(--green); }