/* Hallmark · shape: Poster · genre: modern-minimal · theme: Coral adapted · job: book · draw: baa0a3
 * hero: Full-bleed poster · nav: edge-aligned · footer: index columns · imagery: hero photo behind display type · signature: $400K viewport-width figure over doctor photo
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P_pass H_pass E_pass S_pass R_pass V_pass · weakest: none */
@import url("./tokens.css");
@import url("./base.css");

/* ── Nav ── */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: oklch(99% 0.003 180 / 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block-end: 1px solid var(--color-rule); }
.nav::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--color-accent-2), var(--color-accent), oklch(72% 0.12 200)); }
.nav .container { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.nav-wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-ink); text-decoration: none; display: flex; align-items: center; gap: var(--space-sm); }
.nav-wordmark img { height: 32px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); }
.nav-links a { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.nav-links a:hover { color: var(--color-ink); }
.nav-links .nav-action { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; background: oklch(48% 0.14 175); color: #fff; text-decoration: none; cursor: pointer; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short); }
.nav-links .nav-action:hover { transform: translateY(-1px); opacity: 0.9; }
.nav-phone { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-decoration: none; border-inline-start: 1px solid var(--color-rule); padding-inline-start: var(--space-lg); white-space: nowrap; }

/* ── Hero: full-bleed poster ── */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; background: var(--color-board); clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); margin-block-end: -4vw; padding-block-end: 6vw; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { position: absolute; top: 0; right: -15%; width: 80%; height: 100%; object-fit: cover; object-position: center center; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, oklch(20% 0.04 230) 0%, oklch(20% 0.04 230 / 0.95) 30%, oklch(20% 0.04 230 / 0.5) 50%, transparent 65%); }
.hero .container { position: relative; z-index: 1; max-width: 44%; margin-inline-start: var(--gutter); margin-inline-end: auto; padding-inline: 0; }
.hero-figure { font-family: var(--font-display); font-weight: 600; font-size: clamp(5rem, 12vw, 11rem); line-height: 0.85; letter-spacing: -0.05em; color: var(--color-accent); }
.hero-figure-sub { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: var(--tracking-display); line-height: 1.2; color: var(--color-board-type); margin-block-start: var(--space-sm); }
.hero-body { font-size: var(--text-lead); line-height: 1.5; color: oklch(75% 0.006 180); max-width: 40ch; margin-block-start: var(--space-md); }
.hero-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; margin-block-start: var(--space-lg); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-xl); border: 0; border-radius: var(--radius-stock); font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; text-decoration: none; cursor: pointer; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-accent); color: var(--color-board); }
.btn--primary:hover { transform: translateY(-1px); opacity: 0.9; }
.btn--ghost { background: transparent; color: var(--color-board-type); border: 1px solid oklch(50% 0.01 180); }
.btn--ghost:hover { transform: translateY(-1px); border-color: var(--color-board-type); }
.btn--accent { background: var(--color-accent-2); color: #fff; }
.btn--accent:hover { transform: translateY(-1px); opacity: 0.9; }

/* ── Page header (dark, shared across sub-pages) ── */
.pg-hero { background: var(--color-board); color: var(--color-board-type); padding-block: var(--space-3xl) calc(var(--space-2xl) + 3vw); clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); margin-block-end: -2vw; text-align: center; }
.pg-hero h1 { font-size: var(--text-display-s); color: var(--color-board-type); margin-inline: auto; }
.pg-hero p { color: oklch(70% 0.006 180); font-size: var(--text-lead); max-width: 48ch; margin-inline: auto; margin-block-start: var(--space-sm); }
.pg-hero .accent { color: var(--color-accent); }

/* ── Proof: horizontal strip ── */
.proof { padding-block: var(--space-2xl) var(--space-xl); background: linear-gradient(180deg, var(--color-paper-2), var(--color-paper)); border-block-end: 1px solid var(--color-rule); }
.proof .container { display: flex; justify-content: center; gap: var(--space-3xl); }
.proof-item { display: flex; align-items: baseline; gap: var(--space-sm); }
.proof-num { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); letter-spacing: -0.03em; color: var(--color-accent-2); line-height: 1; }
.proof-unit { font-size: 0.7em; }
.proof-label { font-size: var(--text-sm); color: var(--color-muted); max-width: 18ch; line-height: 1.3; }

/* ── How: numbered with rule ── */
.how { padding-block: var(--space-2xl); background: var(--color-paper-2); }
.how h2 { margin-block-end: var(--space-xl); }
.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.how-step { padding: var(--space-lg); border-inline-start: 1px solid var(--color-rule); }
.how-step:first-child { border-inline-start: 0; padding-inline-start: 0; }
.how-num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); color: var(--color-accent); margin-block-end: var(--space-sm); line-height: 1; }
.how-step h3 { font-size: var(--text-title); max-width: 22ch; margin-block-end: var(--space-xs); }
.how-step:hover .how-num { color: var(--color-accent); transition: color 0.3s; }
.how-step p { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.55; }

/* ── Photo break ── */
.bleed { padding: 0; }
.bleed-photo { width: 100%; aspect-ratio: 21 / 8; overflow: hidden; }
.bleed-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ── Verticals: tight list ── */
.verticals { padding-block: var(--space-2xl); }
.verticals h2 { margin-block-end: var(--space-xs); }
.verticals .lead { margin-block-end: var(--space-lg); }
.vert-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--color-rule); border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
a.vert-item { text-decoration: none; color: inherit; }
.vert-item { padding: var(--space-lg); background: var(--color-paper); transition: background var(--dur-short) var(--ease-out); display: flex; flex-direction: column; }
.vert-item:hover { background: var(--color-paper-2); }
.vert-item:hover .vert-aov { color: var(--color-accent); transition: color 0.3s; }
.vert-item:hover h3 { color: var(--color-accent-2); transition: color 0.3s; }
.vert-item h3 { font-size: var(--text-title); margin-block-end: var(--space-2xs); }
.vert-item p { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.45; }
.vert-aov { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--color-accent-2); margin-block-start: auto; padding-block-start: var(--space-md); letter-spacing: -0.03em; }
.vert-aov-label { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Board ── */
.board { padding-block: calc(var(--space-2xl) + 4vw) var(--space-2xl); background: var(--color-board); color: var(--color-board-type); clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); margin-block-start: -2vw; }
.board .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xl); }
.board h2 { color: var(--color-board-type); font-size: var(--text-section); max-width: 20ch; flex-shrink: 0; }
.board-right { display: flex; flex-direction: column; gap: var(--space-md); align-items: center; }
.board .btn--primary { box-shadow: none; }
.hipaa-line { font-size: var(--text-sm); color: oklch(60% 0.006 180); }
.hipaa-line strong { color: var(--color-board-type); }

/* ── Split ── */
.split { padding-block: var(--space-2xl); }
.split .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.split-photo { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; }
.split-photo img { width: 100%; height: 100%; object-fit: cover; }
.split-text { display: flex; flex-direction: column; gap: var(--space-sm); }
.split-text h2 { font-size: var(--text-section); }
.split-text p { color: var(--color-muted); line-height: 1.55; }

/* ── Footer ── */
.footer { padding-block: var(--space-xl) var(--space-lg); border-block-start: 1px solid var(--color-rule); }
.footer .container { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--gap-columns); }
.footer-brand { display: flex; flex-direction: column; gap: var(--space-xs); }
.footer-brand img { height: 28px; width: auto; }
.footer-brand p { font-size: var(--text-sm); color: var(--color-muted); max-width: 28ch; }
.footer-col h4 { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; margin-block-end: var(--space-sm); color: var(--color-ink); }
.footer-col a { display: block; font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; padding-block: 2px; transition: color var(--dur-short) var(--ease-out); }
.footer-col a:hover { color: var(--color-ink); }
.footer-bottom { grid-column: 1 / -1; margin-block-start: var(--space-lg); padding-block-start: var(--space-md); border-block-start: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }

/* ── Blog article ── */
.blog-article { padding-block: var(--space-lg) var(--space-2xl); }
.blog-article .container { max-width: 52rem; }
.blog-article-header { margin-block-end: var(--space-xl); }
.blog-article-header h1 { font-size: var(--text-display-s); }
.blog-article-meta { font-size: var(--text-sm); color: var(--color-muted); margin-block-start: var(--space-xs); display: flex; gap: var(--space-md); }
.blog-hero { margin-block-end: var(--space-xl); }
.blog-hero h2 { font-size: var(--text-section); margin-block-end: var(--space-sm); }
.blog-hero .bh-subtitle { font-size: var(--text-lead); color: var(--color-muted); }
.blog-hero .bh-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block: var(--space-sm); }
.bh-badge { display: inline-block; font-size: var(--text-xs); font-weight: 600; color: var(--color-accent-2); text-transform: uppercase; letter-spacing: 0.06em; }
.bh-tag { font-size: var(--text-xs); color: var(--color-muted); padding: 2px var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.bh-tag.accent { border-color: var(--color-accent); color: var(--color-accent-2); }
.blog-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-block: var(--space-md); }
.bhs-card { padding: var(--space-sm); background: var(--color-paper-2); border-radius: var(--radius-card); text-align: center; }
.bhs-num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--color-accent-2); }
.bhs-label { font-size: var(--text-xs); color: var(--color-muted); }
.blog-hero-img { width: 100%; border-radius: var(--radius-card); margin-block-start: var(--space-md); }
.blog-article h2 { font-size: var(--text-section); margin-block: var(--space-xl) var(--space-sm); }
.blog-article h3 { font-size: var(--text-title); margin-block: var(--space-lg) var(--space-xs); }
.blog-article p { margin-block-end: var(--space-sm); }
.blog-article ul, .blog-article ol { margin-block: var(--space-xs) var(--space-sm); padding-inline-start: var(--space-lg); }
.blog-article li { margin-block-end: var(--space-2xs); }
.blog-article blockquote { padding-inline-start: var(--space-md); margin-block: var(--space-md); color: var(--color-muted); font-style: italic; }
.blog-back-link { display: inline-block; font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; margin-block-end: var(--space-md); }
.blog-back-link:hover { color: var(--color-ink); }
.blog-cta { padding-block: var(--space-2xl); text-align: center; background: var(--color-paper-2); }
.blog-cta h2 { margin-inline: auto; margin-block-end: var(--space-sm); }
.blog-cta p { color: var(--color-muted); margin-inline: auto; margin-block-end: var(--space-lg); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--space-lg); }
.blog-card { padding: var(--space-lg); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.blog-card-tag { font-size: var(--text-xs); font-weight: 600; color: var(--color-accent-2); text-transform: uppercase; letter-spacing: 0.06em; }
.blog-card h2 { font-size: var(--text-title); margin-block: var(--space-xs) var(--space-2xs); }
.blog-card h2 a { text-decoration: none; }
.blog-card h2 a:hover { color: var(--color-accent-2); }
.blog-card-excerpt { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.45; }
@media (max-width: 40rem) { .blog-hero-stats { grid-template-columns: 1fr; } }

/* ── Entrance animations ── */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.hero-figure, .hero-figure-sub, .hero-body, .hero-actions { animation: rise 0.6s var(--ease-out) both; }
.hero-figure { animation-delay: 0.1s; }
.hero-figure-sub { animation-delay: 0.25s; }
.hero-body { animation-delay: 0.4s; }
.hero-actions { animation-delay: 0.55s; }

/* ── Responsive ── */
@media (max-width: 60rem) {
  .hero { min-height: 60vh; }
  .hero .container { max-width: 70%; }
  .proof .container { flex-wrap: wrap; gap: var(--space-xl); }
  .how-steps { grid-template-columns: 1fr; gap: 0; }
  .how-step { border-inline-start: 0; border-block-start: 1px solid var(--color-rule); padding-inline-start: 0; padding-block-start: var(--space-lg); margin-block-start: var(--space-lg); }
  .how-step:first-child { border-block-start: 0; margin-block-start: 0; padding-block-start: 0; }
  .vert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board .container { flex-direction: column; align-items: flex-start; }
  .split .container { grid-template-columns: 1fr; }
  .split-photo { order: -1; }
  .footer .container { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
  .nav-phone { display: none; }
}
@media (max-width: 40rem) {
  .hero .container { max-width: 90%; }
  .hero-figure { font-size: clamp(4rem, 18vw, 7rem); }
  .proof .container { flex-direction: column; gap: var(--space-md); align-items: flex-start; }
  .vert-grid { grid-template-columns: 1fr; }
  .footer .container { grid-template-columns: 1fr; }
  .nav-links a:not(.nav-action):not(.nav-phone) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-figure, .hero-figure-sub, .hero-body, .hero-actions { animation: none; }
}