/* The practical routes use the same silver, mint and warm paper vocabulary as
   the homepage. Shared controls live here; page-specific layouts stay local. */
:root { --journey-radius: 12px; --journey-control-radius: 999px;
  --journey-header-height: 89px; --journey-section-nav-height: 0px; }
html:has(.section-nav) { --journey-section-nav-height: 76px; }
html { scroll-padding-top: calc(var(--journey-header-height) + var(--journey-section-nav-height) + 24px); }
.site-header { position: sticky; top: 0; max-width: none; min-height: 84px;
  padding: 20px max(5vw, calc((100vw - 1296px) / 2)); border-bottom-color: #99ddcf26; }
.site-header .brand { font-size: 16px; letter-spacing: .19em; }
.site-header .brand img { width: 40px; height: 44px; }
.site-header nav { gap: 24px; }
.hero { padding-block: clamp(48px, 7vw, 88px); gap: 48px; }
.hero::after { opacity: .5; }
.hero h1 { max-width: 20ch; text-wrap: balance; }
.hero .lead { max-width: 48ch; color: #cbdad7; }
.hero-note { border-color: #99ddcf5c; font-size: 15px; }
.hero-note strong { color: var(--light); }
h2, h3 { text-wrap: balance; }
.section { border-radius: var(--journey-radius); border-color: #99ddcf38;
  background: linear-gradient(135deg, #fff4, #ffffff00 58%), var(--paper); }
.section-heading { gap: 36px; }
.section-heading > p { max-width: 48ch; }
.card, .package, .brief-form, .brief-review, .project-preview { border-radius: var(--journey-radius); }
.card { background: #ffffff55; }
.button { min-height: 48px; border-radius: var(--journey-control-radius);
  line-height: 1.25; gap: 16px; padding: 14px 22px; }
.button.secondary { border-color: currentColor; }
.button:focus-visible, .brief-form input:focus-visible, .brief-form select:focus-visible,
.brief-form textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.hero .button:focus-visible, .cta .button:focus-visible { outline-color: var(--mint); }
.button:active { transform: translateY(1px); }
.brief-form input, .brief-form select, .brief-form textarea { border-radius: 6px; min-height: 48px; }
.brief-form label { line-height: 1.5; }
.brief-progress { border-radius: var(--journey-control-radius); overflow: hidden; }
.brief-review { padding: clamp(24px, 4vw, 40px); border-top: 3px solid var(--green); }
.brief-review h2 { margin-top: 0; }
.brief-review .actions { gap: 12px; }
.project-evidence { margin-block: 12px 44px; }
.project-evidence .project-preview { overflow: hidden; border-color: #99ddcf4d; }
.project-outcome { border-top: 1px solid #99ddcf38; padding-top: 36px; }
.project-outcome > div > p { max-width: 48ch; }
.project-story .project-steps { gap: 32px; }
.section-nav { top: var(--journey-header-height); gap: 12px 24px; }
.section-nav a { font-size: 12px; letter-spacing: .045em; }
.cta { gap: 36px; }
.cta > div > p { max-width: 48ch; }
@media (max-width: 900px) {
  .hero { gap: 28px; }
  .site-header { padding-inline: 5vw; }
  .site-header nav { gap: 16px; }
}
@media (max-width: 600px) {
  :root { --journey-header-height: 117px; }
  html:has(.section-nav) { --journey-section-nav-height: 77px; }
  .site-header { padding: 14px 6vw 10px; gap: 8px 16px; }
  .site-header .brand { font-size: 14px; }
  .site-header .brand img { width: 32px; height: 36px; }
  .site-header nav { width: 100%; justify-content: space-between; gap: 8px; font-size: 12px; }
  .hero { padding: 40px 0 36px; }
  .hero h1 { font-size: clamp(38px, 10.3vw, 48px); line-height: 1.08; }
  .hero .lead { font-size: 17px; }
  .section-heading { gap: 12px; }
  .button { font-size: 14px; padding-inline: 20px; }
  .brief-review .button { min-height: 48px; }
  .cta { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) { .button:active { transform: none; } }
@media print { .site-header { position: static; } }