.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px; border-radius: 999px; text-decoration: none; font-weight: 800; border: 2px solid transparent; transition: transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s cubic-bezier(.34,1.56,.64,1),filter .2s; }

.btn-primary { position: relative; overflow: hidden; background: var(--orange); color: var(--black); }

.btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--shadow-hover); }

.btn-primary:after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent); transform: skewX(-20deg); transition: left .6s ease; }

.btn-primary:hover:after { left: 130%; }

.btn-dark { background: var(--black); color: #fff; }

.btn-light { background: #fff; color: var(--black); border-color: #ddd; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); background: rgba(61,180,176,.12); border-radius: 999px; padding: 8px 16px; margin-bottom: 18px; }

.eyebrow:before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }

/* Badges (.eyebrow/.section-label) lose contrast on the shared grey/taupe
   panel background (--surface-dark/-2, used by .statement/.cta/.premium-panel/
   .compare-card.dark/.audience-card:nth-child(3)/.footer) — their default teal
   text and faint teal tint were tuned for white backgrounds. Lift the pill onto
   a bright backing and switch to the orange accent already used elsewhere on
   these panels (checklist bullets, .compare-card.dark .link) for guaranteed
   readability, instead of one-off inline color overrides per instance. */
.statement .eyebrow, .statement .section-label, .cta .eyebrow, .cta .section-label, .premium-panel .eyebrow, .premium-panel .section-label, .compare-card.dark .eyebrow, .compare-card.dark .section-label, .audience-card:nth-child(3) .eyebrow, .audience-card:nth-child(3) .section-label, .footer .eyebrow, .footer .section-label { color: var(--orange); background: rgba(255,255,255,.55); }

.accent { color: var(--orange); }

.badge { position: absolute; left: -30px; bottom: 30px; background: #fff; border-radius: 20px; padding: 18px 22px; box-shadow: var(--shadow-lg); max-width: 260px; font-weight: 800; }

.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }

.card { border: 1px solid var(--line); border-radius: var(--r); padding: 28px; background: #fff; box-shadow: var(--shadow-sm); }

.card strong.kicker { color: var(--teal); text-transform: uppercase; font-size: .82rem; letter-spacing: .08em; }

.card .link { display: inline-block; margin-top: 12px; color: var(--black); font-weight: 900; text-decoration: none; }

.card.featured { background: var(--black); color: #fff; border-color: var(--black); }

.card.featured p { color: #ddd; }

.card.featured .link { color: var(--orange); }

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

.step { padding: 26px; border-top: 5px solid var(--orange); background: #fff; }

.step span { font-size: 3rem; font-weight: 900; color: var(--teal); }

.cta { background: linear-gradient(135deg,var(--surface-dark) 0%,var(--surface-dark-2) 100%); color: var(--black); border-radius: 34px; padding: 48px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }

.cta p { color: var(--muted-on-dark); max-width: 700px; }

/* Without this, the button is a shrinkable flex item and gets squeezed
   below its content size whenever the row layout is active (>900px),
   wrapping its label onto two lines with almost no visible padding. */
.cta .btn { flex-shrink: 0; }

.checklist { list-style: none; padding: 0; }

.checklist li { padding: 8px 0 8px 28px; position: relative; }

.checklist li:before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 900; }

.text-link { display: inline-flex; align-items: center; color: var(--black); font-weight: 850; text-decoration: none; padding: 14px 4px; }

.text-link:hover { color: var(--teal); }

.float-card { position: absolute; right: -22px; bottom: 35px; background: var(--surface-dark); color: var(--black); padding: 20px 24px; min-width: 260px; box-shadow: var(--shadow-lg); }

.float-card span { font-size: .72rem; letter-spacing: .16em; color: var(--orange); }

.float-card strong { display: block; margin-top: 5px; }

.path-card { min-height: 330px; padding: 38px; border-radius: var(--radius-lg); background: var(--charcoal); color: #fff; text-decoration: none; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s cubic-bezier(.34,1.56,.64,1); }

.path-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-hover); }

.path-card span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }

.path-card h3 { font-size: clamp(2rem,3vw,3.2rem); line-height: 1.05; margin: 35px 0 14px; }

.path-card p { max-width: 540px; color: inherit; opacity: .82; }

.path-card b { margin-top: auto; display: inline-block; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }

.path-card:hover b { transform: translateX(4px); }

.image-note { position: absolute; left: -28px; bottom: -28px; background: var(--teal); padding: 20px 24px; font-size: 1.1rem; }

.mini-proof { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }

.mini-proof span { border: 1px solid rgba(41,41,41,.18); border-radius: 999px; padding: 9px 13px; font-size: .88rem; font-weight: 700; }

.testimonial-placeholders { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

.testimonial-placeholders>div { border: 1px dashed #bbb; padding: 30px; min-height: 170px; display: flex; flex-direction: column; justify-content: center; }

.testimonial-placeholders small { display: block; margin-top: 8px; color: #777; }

.premium-cta h2 { font-size: clamp(2.2rem,4vw,4.2rem); max-width: 800px; }

.premium-cta { border-radius: var(--radius-lg); }

.path-card { overflow: hidden; position: relative; }

.path-card:after { content: ""; position: absolute; width: 150px; height: 150px; border: 1px solid currentColor; border-radius: 50%; right: -70px; top: -70px; opacity: .14; }

.proofbar { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 34px; padding-top: 24px; border-top: 1px solid #deded9; }

.proofbar>div { display: flex; align-items: center; gap: 10px; min-width: 0; }

.proofbar>div+div { border-left: 1px solid #deded9; padding-left: 28px; }

.proofbar b { font-family: 'Outfit', sans-serif; font-size: 2rem; line-height: 1; flex: 0 0 auto; }

.proofbar span { font-size: .82rem; line-height: 1.25; color: #5b5b57; max-width: 130px; }

.subhero-chip { position: absolute; left: -24px; bottom: 28px; background: var(--surface-dark); color: var(--black); padding: 17px 22px; box-shadow: var(--shadow-lg); font-weight: 800; }

.subhero-chip small { display: block; color: var(--orange); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 3px; }

.value-card { background: #fff; padding: 36px; min-height: 300px; }

.value-card span { font-size: .76rem; letter-spacing: .13em; color: var(--teal); font-weight: 900; text-transform: uppercase; }

.value-card h3 { font-size: 2rem; line-height: 1.08; margin-top: 42px; }

.value-card p { color: #555; }

.premium-panel { background: linear-gradient(135deg,var(--surface-dark) 0%,var(--surface-dark-2) 100%); color: var(--black); padding: 48px; border-radius: var(--radius-lg); }

.premium-panel p { color: var(--muted-on-dark); }

.premium-panel .checklist li:before { color: var(--orange); }

.compare-card { padding: 38px; border-radius: var(--radius-lg); background: #fff; border: 1px solid #e3e3de; }

.compare-card.dark { background: linear-gradient(135deg,var(--surface-dark) 0%,var(--surface-dark-2) 100%); color: var(--black); border-color: var(--surface-dark); }

.compare-card.dark p { color: var(--muted-on-dark); }

.compare-card h3 { font-size: 2.25rem; }

.process-step { padding: 32px; border-top: 5px solid var(--orange); background: #fff; min-height: 240px; }

.process-step b { font-family: 'Outfit', sans-serif; font-size: 3.2rem; color: var(--teal); }

.process-step h3 { margin-top: 22px; }

.audience-card { padding: 34px; border-radius: var(--radius-lg); min-height: 330px; display: flex; flex-direction: column; background: #fff; }

.audience-card:nth-child(1) { background: var(--orange); }

.audience-card:nth-child(2) { background: var(--teal); }

.audience-card:nth-child(3) { background: linear-gradient(135deg,var(--surface-dark) 0%,var(--surface-dark-2) 100%); color: var(--black); }

.audience-card:nth-child(3) p { color: var(--muted-on-dark); }

.audience-card span { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 900; }

.audience-card h3 { font-size: 2.2rem; line-height: 1.04; margin: 38px 0 15px; }

.audience-card .link { margin-top: auto; color: inherit; font-weight: 900; text-decoration: none; }

.contact-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

.contact-card { padding: 30px; background: #fff; border: 1px solid #e2e2dd; border-radius: var(--radius-lg); }

.form-card { background: #fff; border: 1px solid #e2e2dd; border-radius: var(--radius-lg); padding: 38px; box-shadow: var(--shadow-sm); }

.form-card input, .form-card select, .form-card textarea { width: 100%; padding: 15px 16px; border: 1px solid #d7d7d1; border-radius: 12px; background: #fbfbf9; font: inherit; color: var(--charcoal); outline: none; }

.form-card input:focus, .form-card select:focus, .form-card textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(61,180,176,.1); }

.form-card textarea { min-height: 150px; resize: vertical; }

.form-card label { display: block; font-weight: 800; margin-bottom: 7px; }

.sub-cta { padding: 0 0 86px; }

.sub-cta .cta { border-radius: var(--radius-lg); }

/* Prevent grid/flex content from forcing overflow */
.hero-grid>*, .subhero-grid>*, .split>*, .content-grid>*, .intro-band .wrap>*, .trust-grid>*, .path-grid>*, .value-grid>*, .compare-grid>*, .process-row>*, .audience-grid>*, .contact-cards>*, .form-grid>* { min-width: 0; }

/* Headline line separation */
.hero h1 .accent, .premium-hero h1 .accent, .subhero h1 .accent { display: block; margin-top: .08em; }

.badge { left: 18px; bottom: 18px; max-width: calc(100% - 36px); }

.float-card { right: 18px; bottom: 18px; max-width: calc(100% - 36px); }

.subhero-chip { left: 18px; bottom: 18px; max-width: calc(100% - 36px); }

.image-note { left: 18px; bottom: 18px; max-width: calc(100% - 36px); }

/* Cards and content blocks */
.cards { gap: 26px; }

.card { padding: 32px; }

.card p, .feature p, .value-card p, .compare-card p, .process-step p, .audience-card p, .contact-card p { line-height: 1.68; }

.path-card { padding: 42px; min-height: 350px; }

.path-card h3 { line-height: 1.12; margin: 38px 0 18px; }

.path-card p { line-height: 1.65; margin-bottom: 22px; }

.value-card { padding: 40px; min-height: 315px; }

.value-card h3 { line-height: 1.15; margin-top: 38px; margin-bottom: 16px; }

.compare-card { padding: 42px; }

.compare-card h3 { line-height: 1.14; margin-bottom: 16px; }

.process-step { padding: 36px; min-height: 255px; }

.process-step h3 { line-height: 1.15; margin-top: 24px; margin-bottom: 14px; }

.audience-card { padding: 38px; min-height: 350px; }

.audience-card h3 { line-height: 1.13; margin: 36px 0 18px; }

.contact-cards { gap: 24px; }

.contact-card { padding: 34px; }

.form-card { padding: 42px; }

.form-card label { line-height: 1.35; margin-bottom: 9px; }

.form-card input, .form-card select, .form-card textarea { line-height: 1.4; }

.premium-panel { padding: 54px; }

.premium-panel h2 { line-height: 1.1; }

.premium-panel p { line-height: 1.68; }

.cta { padding: 54px; gap: 40px; }

.cta h2 { line-height: 1.08; margin-bottom: 18px; }

.cta p { line-height: 1.65; margin-bottom: 0; }

.sub-cta { padding-bottom: 96px; }

.subhero h1 .accent { display: block; margin-top: .08em; }

.section-intro h2, .editorial-split h2, .cta h2 { line-height: 1.08; }

.people-section .portrait-panel { position: relative; min-width: 0; }

.portrait-panel img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: center top; border-radius: 24px; }

.portrait-caption { margin-top: 18px; display: flex; flex-direction: column; gap: 4px; }

.portrait-caption span { opacity: .7; }

.testimonial-card { background: #fff; border: 1px solid #e2e2dd; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }

.testimonial-card p { font-style: italic; line-height: 1.65; margin-bottom: 18px; }

.testimonial-card small { display: block; color: #666; font-weight: 700; }

.btn-stack { gap: 12px; }

.btn-full { width: 100%; justify-content: center; text-align: center; }

/* Missing layout rules (cards were collapsing to default sizing) */
.testimonial-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; align-items: start; }

.path-card-small { min-height: 240px; padding: 30px; }

.path-card-small h3 { font-size: clamp(1.4rem,1.8vw,1.9rem); margin: 22px 0 10px; }

.path-card-small p { font-size: .95rem; margin-bottom: 14px; }

.path-card-medium { min-height: 290px; padding: 36px; }

.path-card-medium h3 { font-size: clamp(1.7rem,2.4vw,2.5rem); margin: 26px 0 12px; }

.path-card-medium p { font-size: 1.02rem; margin-bottom: 16px; }

.btn-mint { background: var(--mint); color: var(--charcoal); }

.btn-stack { display: flex; flex-direction: column; }

/* Unified hover feedback for every button variant (was only on .btn-primary) */
.btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--shadow-hover); filter: brightness(1.06); }

.btn:active { transform: translateY(0); box-shadow: none; filter: brightness(.97); }

.audience-card .link { display: inline-flex; align-items: center; transition: transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s; }

.audience-card .link:hover { transform: translateX(4px); opacity: .8; }

.compare-card { display: flex; flex-direction: column; min-height: 280px; }

.compare-card .link { display: inline-flex; align-items: center; margin-top: auto; padding-top: 18px; color: var(--charcoal); font-weight: 900; text-decoration: none; transition: transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s; }

.compare-card.dark .link { color: var(--orange); }

.compare-card .link:hover { transform: translateX(4px); opacity: .8; }

/* Scroll-reveal used by script.js (IntersectionObserver adds .is-visible) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1); }

.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-group>* { opacity: 0; transform: translateY(28px); transition: opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1); }

.reveal-group.is-visible>* { opacity: 1; transform: translateY(0); }

.reveal-group.is-visible>*:nth-child(2) { transition-delay: .08s; }

.reveal-group.is-visible>*:nth-child(3) { transition-delay: .16s; }

.reveal-group.is-visible>*:nth-child(4) { transition-delay: .24s; }

/* Parallax hero image — JS sets transform on scroll via [data-parallax];
   the baseline scale gives it room to move without exposing empty edges. */
[data-parallax] { transform: scale(1.12); will-change: transform; }

/* Photographic images get a soft zoom on hover — the hero image is excluded
   here (it already animates via the parallax script) so the two effects
   never fight over the same transform. */
.subhero-media img, .image-stack img, .split img, .portrait-panel img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }

.subhero-media img:hover, .image-stack img:hover, .split img:hover, .portrait-panel img:hover { transform: scale(1.05); }

.fit-card-no { background: #fff; border: 1px solid #e2e2dd; border-radius: var(--radius-lg); padding: 48px; }

.fit-card-no .checklist li:before { content: '–'; color: #aaa; font-weight: 700; }

.fit-card-no .checklist li { color: #5b5b57; }