/* Hallmark · shape: Sunrise strip · genre: editorial · theme: custom · job: book · idea: "Afiya means well-being: the Milwaukee lakefront sunrise colour fills the word as you read" · vibe: "confident, warm, community-rooted Milwaukee"
 * surface: absolute white (brief mandates true white grounds) · paper: oklch(100% 0 0) · accent: oklch(81% 0.17 78) · display: Sora · body: Public Sans · hero: photo leads, deep teal panel with headline, sentence, Call and Email · nav: wordmark, four links, Call pill · footer: deep teal with wordmark, address and menu · imagery: AI-generated lakefront and office photographs · signature: saffron fills the huge word Afiya bottom to top on scroll, its meaning underneath
 * axes: light/grotesk-heavy/chromatic-amber · posture: confident · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · waive 7b · tokens.css:11 and base.css:4 --color-paper oklch(100% 0 0) · true white page ground is required by the Fankaar therapist brief */
/* Hallmark · waive 22 · tokens.css --color-paper oklch(100% 0 0) · same: brief mandates true white grounds */
/* Hallmark · waive 38iii · .h1__b second hero line in saffron at lighter weight · the brief asks for a lighter-weight coloured second line, set on its own line, once */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, section rhythm leans on tint and teal bands so type size steps carry the variety */
@import url("./tokens.css");
@import url("./base.css");

:root { --container: 1280px; }
body { font-size: 1.0625rem; }
.skip { position: absolute; left: var(--space-md); top: -80px; background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); z-index: var(--z-modal); }
.skip:focus { top: var(--space-sm); }

/* buttons: one pill style */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); text-decoration: none; white-space: nowrap; border: 2px solid var(--color-accent); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn:hover { transform: translateY(-2px); background: var(--color-on-teal); border-color: var(--color-on-teal); }
.btn:active { transform: translateY(0); }
.btn--sm { min-height: 44px; padding: 0 var(--space-lg); }
.btn--ghost { background: transparent; color: var(--color-on-teal); border-color: var(--color-on-teal-2); }
.btn--ghost:hover { background: var(--color-on-teal); color: var(--color-teal); }
.btn--line { background: transparent; color: var(--color-ink); border-color: var(--color-teal); }
.btn--line:hover { background: var(--color-teal); color: var(--color-on-teal); border-color: var(--color-teal); }
.link { text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: var(--color-teal-2); display: inline-block; padding-block: var(--space-xs); }
.link:hover { text-decoration-color: var(--color-accent); }

/* header */
.hdr { background: var(--color-teal); color: var(--color-on-teal); position: sticky; top: 0; z-index: var(--z-sticky-nav); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 68px; }
.hdr nav ul { display: none; list-style: none; margin: 0; padding: 0; gap: var(--space-xl); }
.hdr nav a { text-decoration: none; font-size: var(--text-md); display: inline-flex; align-items: center; min-height: 44px; }
.hdr nav a:hover { color: var(--color-accent); }
.mark { display: inline-flex; flex-direction: column; font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: -0.03em; text-decoration: none; margin: 0; }
.mark__sub { font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem; letter-spacing: 0; margin-top: var(--space-2xs); color: var(--color-on-teal-2); }
.mark--lg { font-size: 2.5rem; }
.mark--lg .mark__sub { font-size: 0.9375rem; }
.hdr :focus-visible, .hero :focus-visible, .afiya :focus-visible, .ftr :focus-visible { outline-color: var(--color-accent); }

/* hero: photo leads on phones */
.hero { background: var(--color-teal); color: var(--color-on-teal); padding-bottom: var(--space-xl); }
.hero__grid { display: grid; gap: var(--space-lg); }
.hero__photo { margin: 0 calc(var(--gutter) * -1); aspect-ratio: 16 / 9; overflow: hidden; max-height: 230px; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.h1 { font-size: clamp(2.875rem, 5.6vw, 5rem); line-height: 1; letter-spacing: var(--tracking-display); font-weight: 800; }
.h1__a, .h1__b { display: block; }
.h1__b { font-weight: 600; color: var(--color-accent); }
.hero__lede { font-size: var(--text-lead); line-height: 1.45; color: var(--color-on-teal-2); margin-top: var(--space-md); max-width: 30ch; }
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

/* sections */
.sec { padding-block: var(--section-gap); }
.sec--tint { background: var(--color-paper-2); }
.h2 { font-size: var(--text-section); line-height: 1.08; letter-spacing: -0.025em; font-weight: 800; color: var(--color-teal); }
.h2--sm { font-size: var(--text-3xl); line-height: 1.1; }
.lead { font-size: var(--text-lead); color: var(--color-ink-2); line-height: 1.5; }

.support { display: grid; gap: var(--space-xl); }
.support__head { display: grid; gap: var(--space-md); align-content: start; }
.forms { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--color-teal); }
.forms li { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); display: grid; gap: var(--space-xs); }
.forms h3, .steps h3 { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--color-teal); }
.forms p, .steps p { color: var(--color-ink-2); }

.help { display: grid; gap: var(--space-xl); }
.topics { list-style: none; margin: 0; padding: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.875rem, 5.4vw, 3.75rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--color-teal); }
.topics li { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); transition: color var(--dur-short) var(--ease-out); }
.topics li:first-child { border-top: 2px solid var(--color-teal); }
.topics li:hover { color: var(--color-teal-2); }

/* signature: Afiya */
.afiya { background: var(--color-teal); color: var(--color-on-teal); padding-block: var(--section-gap); overflow: clip; }
.afiya__grid { display: grid; gap: var(--space-2xl); }
.afiya__word { display: grid; margin: 0; max-width: none !important; font-family: var(--font-display); font-weight: 800; font-size: min(calc((100vw - 2 * var(--gutter)) / 2.5), 27rem); line-height: 0.95; letter-spacing: -0.045em; padding-bottom: 0.08em; }
.afiya__base, .afiya__fill { grid-area: 1 / 1; display: block; }
.afiya__base { color: var(--color-teal-3); }
.afiya__fill { color: var(--color-accent); }
.afiya__mean { font-size: var(--text-lead); max-width: 34ch !important; color: var(--color-on-teal-2); margin-top: var(--space-md); }
.afiya__mean strong { color: var(--color-on-teal); font-family: var(--font-display); font-weight: 600; }
.afiya__body { display: grid; gap: var(--space-xl); align-items: center; }
.photo { margin: 0; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.afiya__text { display: grid; gap: var(--space-md); align-content: center; }
.afiya__text .h2 { color: var(--color-on-teal); }
.afiya__text p { color: var(--color-on-teal-2); font-size: var(--text-lead); }

.begin { display: grid; gap: var(--space-xl); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); counter-reset: s; }
.steps li { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: 2px solid var(--color-accent); }

.visit { display: grid; gap: var(--space-xl); align-items: center; }
.visit__copy { display: grid; gap: var(--space-sm); justify-items: start; }
.visit address, .ftr address { font-style: normal; font-size: var(--text-lg); line-height: 1.5; }
.visit .hero__acts { margin-top: var(--space-xs); }
.crisis { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }

.ftr { background: var(--color-teal); color: var(--color-on-teal); padding-top: var(--section-gap-s); }
.ftr__grid { display: grid; gap: var(--space-xl); }
.ftr address { color: var(--color-on-teal-2); margin-top: var(--space-lg); font-size: var(--text-md); }
.ftr a { text-decoration: none; display: inline-block; padding-block: var(--space-2xs); }
.ftr a:hover { color: var(--color-accent); }
.ftr nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.ftr nav a { min-height: 44px; display: inline-flex; align-items: center; }
.ftr__note { margin-top: var(--space-2xl); padding-block: var(--space-lg) var(--space-xl); border-top: 1px solid var(--color-teal-2); font-size: var(--text-sm); color: var(--color-on-teal-2); max-width: none !important; }

@media (min-width: 48rem) {
  .hdr nav ul { display: flex; }
  .support { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .support__head { grid-column: 1 / 6; }
  .forms { grid-column: 7 / 13; }
  .help { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .help__title { grid-column: 1 / 4; }
  .topics { grid-column: 5 / 13; }
  .afiya__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .afiya__body .photo { grid-column: 1 / 8; }
  .afiya__text { grid-column: 9 / 13; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .ftr__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .ftr__grid > div { grid-column: 1 / 8; }
  .ftr__grid > nav { grid-column: 9 / 13; }
}
@media (min-width: 64rem) {
  .visit { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .visit__photo { grid-column: 1 / 7; aspect-ratio: 4 / 5; }
  .visit__copy { grid-column: 8 / 13; }
  .hero { padding-block: var(--space-2xl); }
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
  .hero__copy { grid-column: 1 / 7; grid-row: 1; }
  .hero__photo { grid-column: 7 / 13; grid-row: 1; margin: 0; aspect-ratio: auto; max-height: none; height: min(700px, calc(100svh - 190px)); min-height: 480px; border-radius: var(--radius-card); }
  .hero__photo img { object-position: 38% 50%; }
}
@media (max-width: 40rem) {
  .hero__acts .btn { flex: 1 1 auto; }
  .hdr nav { display: none; }
}