@font-face {
    font-family: Outfit;
    src: url("../fonts/outfit-variable.ttf") format("truetype");
    font-weight: 100 900;
    font-display: swap;
}
:root {
    --pine: #192e29;
    --evergreen: #294a40;
    --bone: #f5f1e8;
    --slate: #475852;
    --copper: #945b3a;
    --glow: #e3b18b;
}
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    color: var(--slate);
    background: var(--bone);
    font: 400 1rem/1.6 Outfit, "Segoe UI", sans-serif;
}
.wrap { width: min(86%, 76rem); margin-inline: auto; }
a { color: inherit; text-underline-offset: .3em; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.skip { position: absolute; z-index: 20; background: var(--bone); padding: .6rem 1rem; transform: translateY(-110%); }
.skip:focus { transform: none; }
.site-header, .site-footer { background: var(--pine); color: var(--bone); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-size: 1.95rem; letter-spacing: -.045em; line-height: 1; }
.mark { width: 2.6rem; color: var(--glow); }
.brand small { display: block; margin-top: .3rem; font-size: .58rem; letter-spacing: .23em; text-transform: uppercase; }
.hero { position: relative; isolation: isolate; color: var(--bone); background: var(--evergreen); }
.landscape { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; z-index: -2; }
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(16,36,31,.94) 0%, rgba(20,40,34,.84) 28%, rgba(23,41,36,.48) 52%, transparent 80%);
}

.eyebrow { display: flex; align-items: center; gap: .8rem; margin: 0; font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .19em; }
.eyebrow i { width: 2.4rem; height: 2px; background: var(--copper); }
.hero .eyebrow i { background: var(--glow); }
h1, h2, .intro { text-wrap: balance; font-weight: 400; }
h1 { margin: 1.5rem 0 1.25rem; max-width: 11ch; font-size: clamp(3.35rem, 5.9vw, 6.1rem); line-height: 1.02; letter-spacing: -.045em; }
.story { padding-block: clamp(4.5rem, 8vw, 8rem); }
.story-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 7vw, 7rem); }
h2 { margin: 1rem 0 0; color: var(--evergreen); font-size: clamp(2.8rem, 4.6vw, 4.8rem); letter-spacing: -.05em; line-height: 1.05; }
.story-copy { max-width: 35rem; font-size: 1.125rem; }
.story-copy p { margin: 0 0 1.15rem; }
.story-copy p:last-child { margin-bottom: 0; }
.story-copy .intro { margin-bottom: 1.6rem; font-size: clamp(1.75rem, 2.7vw, 2.6rem); line-height: 1.2; letter-spacing: -.03em; color: var(--evergreen); }
.footer-inner { padding-block: 1rem; font-size: .88rem; }
@media (max-width: 44rem) {
    .hero::before { background: linear-gradient(90deg, rgba(16,36,31,.92), rgba(16,36,31,.62) 65%, rgba(16,36,31,.18)); }
    .story-grid { grid-template-columns: 1fr; }
    .brand { font-size: 1.7rem; }
}

.hero-inner { padding-block: clamp(4rem, 6vw, 6rem); }
.hero-lede { margin: 0; max-width: 34ch; font-size: clamp(1.12rem, 1.55vw, 1.45rem); line-height: 1.45; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.35rem; margin-top: 2rem; }
.band { padding-block: clamp(3.8rem, 6vw, 6.25rem); }
.band .eyebrow { color: var(--copper); }
.role { color: var(--copper); font-size: 1.18rem; margin-block: .65rem; }
h3 { margin: 0; color: var(--evergreen); font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 500; line-height: 1.2; letter-spacing: -.03em; }
.story { color: #e2e4d8; background: var(--evergreen); }
.story h2, .story .intro { color: var(--bone); }
.story .eyebrow { color: var(--glow); }
.story .eyebrow i { background: var(--glow); }
.reason-grid, .path-grid { display: grid; gap: clamp(1.25rem, 3vw, 3rem); margin-top: 2.7rem; }
.reason-grid { grid-template-columns: repeat(3, 1fr); }
.reason-grid article { border-top: 1px solid #c9c6b7; padding-top: 1.1rem; }
.number { display: block; margin-bottom: 1.3rem; color: var(--copper); font-size: .8rem; letter-spacing: .12em; }
.reason-grid p, .path p, .steps p { margin: .8rem 0 0; max-width: 53ch; }
.appointments { background: #e7e9df; }
.path-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.path { display: flex; flex-direction: column; align-items: start; background: var(--bone); padding: clamp(1.4rem, 3.2vw, 3rem); border-top: 3px solid var(--evergreen); }
.path .pending { margin-top: auto; padding-top: 1.3rem; font-size: .95rem; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.55rem 3.3rem; }
.steps li::before { content: counter(step, decimal-leading-zero) / ""; position: absolute; left: 0; top: .1em; border: 1px solid #bdad9a; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; color: #855438; font-size: .85rem; }
.prep { background: #ebe6d9; padding: clamp(1.25rem, 3.2vw, 3rem); display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; margin-top: 2rem; }
.prep h3 { margin-top: .8rem; }
.faq { background: #eceee7; }
.questions { border-top: 1px solid #aeb8ac; }
details { border-bottom: 1px solid #aeb8ac; }
summary { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 1.2rem 0; cursor: pointer; font-size: 1.15rem; font-weight: 500; color: var(--evergreen); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+" / ""; color: var(--copper); }
details[open] summary::after { content: "−" / ""; }
details p { margin: 0 0 1.25rem; }
@media (max-width: 44rem) {
    .path-grid, .reason-grid, .prep { grid-template-columns: 1fr; }
    .prep { gap: 1rem; }
    .hero-inner { padding-block: 3.8rem; }
    .reason-grid article { padding-bottom: .5rem; }
}

/* Site navigation and shared link vocabulary. See BRAND-GUIDE.md. */
[hidden] { display: none !important; }
:where(section, main, .prep)[id] { scroll-margin-top: 6.5rem; }
.site-header { position: relative; z-index: 10; border-bottom: 1px solid #486056; }
.site-header.enhanced { position: sticky; top: 0; }
.header-inner {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    min-height: 5.4rem;
    gap: clamp(1.4rem, 4vw, 4rem);
}
.brand { justify-self: start; min-height: 44px; }
.brand .mark { width: 2.9rem; height: 2.9rem; padding: .3rem; border: 1px solid #738477; border-radius: 50%; }
.brand:hover .mark { border-color: var(--glow); }
.practice-nav { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 2rem); }
.practice-nav a {
    position: relative; display: inline-flex; align-items: center;
    min-height: 44px; padding: .4rem .45rem; text-decoration: none;
    color: var(--bone); font-size: 1rem; line-height: 1.35; white-space: nowrap;
}
.practice-nav a::after {
    content: ""; position: absolute; left: .45rem; right: .45rem; bottom: .25rem;
    height: 2px; background: var(--glow); transform: scaleX(0); transform-origin: left;
}
.practice-nav a:is(:hover, :focus-visible, [aria-current])::after { transform: scaleX(1); }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 44px; min-width: 44px; padding: .4rem; border: 0; background: transparent; color: var(--bone);
    cursor: pointer; font: inherit;
}
.nav-toggle svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav-toggle[aria-expanded="true"] { color: var(--glow); background: var(--evergreen); border-radius: .35rem; }
.arrow { display: inline-block; position: relative; flex: none; width: .94rem; height: .94rem; }
.arrow::before, .arrow::after { content: ""; position: absolute; }
.arrow::before { top: calc(50% - .75px); left: 0; width: 92%; border-top: 1.5px solid currentColor; }
.arrow::after { width: 50%; height: 50%; top: 25%; right: 4%; border-top: 1.5px solid; border-right: 1.5px solid; transform: rotate(45deg); }
.arrow.out { transform: rotate(-45deg); }
.arrow.down { transform: rotate(90deg); }
.arrow.up { transform: rotate(-90deg); }
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 1.15rem;
    min-height: 46px; padding: .72rem 1.05rem; background: var(--evergreen);
    border: 1px solid var(--evergreen); border-radius: .42rem; text-decoration: none;
    color: var(--bone); font-weight: 500; line-height: 1.3;
}
.button:hover { background: var(--pine); }
.button.light, .button.nav-care { background: var(--bone); border-color: var(--bone); color: var(--pine); }
.button.light:hover, .button.nav-care:hover { background: #e4ddcd; border-color: #e4ddcd; }
.button.outline { color: var(--evergreen); background: transparent; }
.button.outline:hover { background: #e4e8dc; }
.button.nav-care { justify-self: end; }
.nav-care[aria-current] { box-shadow: inset 0 -3px var(--copper); }
.text-link {
    display: inline-flex; gap: .55rem; align-items: center; min-height: 44px;
    padding: .4rem 0; color: var(--evergreen); font-weight: 500;
    text-decoration: underline; text-underline-offset: .26em; text-decoration-color: var(--copper);
}
.text-link .arrow { width: .78rem; height: .78rem; color: var(--copper); }
.text-link:hover { text-decoration-thickness: 2px; }
.text-link.on-dark, .text-link.footer-top { color: var(--bone); text-decoration-color: var(--glow); }
.on-dark .arrow, .footer-top .arrow { color: var(--glow); }
a:focus-visible, .nav-toggle:focus-visible, summary:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
:is(.site-header,.site-footer,.hero) :focus-visible { outline-color: var(--glow); }
.path { border: 1px solid #b8c4b9; border-top: 3px solid var(--evergreen); border-radius: .5rem; }
.path .button { margin-top: auto; }
.path:has(.button) p { padding-bottom: 1.5rem; }
.questions summary::after {
    flex: none; display: grid; place-items: center; width: 1.55rem; height: 1.55rem;
    border: 1px solid #b6baac; border-radius: 50%; line-height: 1;
}
.questions details[open] summary::after { color: var(--bone); background: var(--evergreen); border-color: var(--evergreen); }
.questions summary:hover { text-decoration: underline; text-underline-offset: .22em; }
@media (prefers-reduced-motion: no-preference) {
    .button, .brand .mark { transition: background-color .16s, border-color .16s; }
    .practice-nav a::after { transition: transform .16s ease-out; }
    .text-link .arrow, .button .arrow { transition: translate .16s ease-out; }
    :is(.text-link,.button):hover .arrow.out { translate: 2px -2px; }
    :is(.text-link,.button):hover .arrow.down { translate: 0 2px; }
}
@media (max-width: 54rem) {
    .header-inner { grid-template-columns: 1fr auto auto; gap: .8rem; min-height: 4.5rem; }
    .nav-care { grid-row: 1; grid-column: 3; }
    .brand { grid-column: 1; grid-row: 1; }
    .brand .mark { width: 2.35rem; height: 2.35rem; }
    .practice-nav { grid-row: 2; grid-column: 1 / -1; flex-wrap: wrap; padding-bottom: .6rem; }
    .enhanced .practice-nav {
        position: absolute; inset: 100% 0 auto; display: grid; gap: 0;
        padding: .5rem 4% 1rem; background: var(--pine); border-block: 1px solid #486056;
        box-shadow: 0 .8rem 1rem #192e291f; max-height: 65vh; overflow: auto;
    }
    .enhanced .practice-nav a { justify-content: space-between; padding: .75rem .4rem; }
    .enhanced .practice-nav a + a { border-top: 1px solid #40554b; }
    .enhanced .practice-nav a::after { right: auto; width: 1.5rem; }
    .nav-toggle { grid-column: 2; grid-row: 1; }
    .button.nav-care { gap: .55rem; padding: .55rem .75rem; min-height: 44px; }
    :where(section, main, .prep)[id] { scroll-margin-top: 5.4rem; }
}
@media (max-width: 24rem) {
    .header-inner { gap: .25rem; width: 94%; }
    .nav-toggle span { display: none; }
    .brand { gap: .4rem; font-size: 1.5rem; }
    .button.nav-care { font-size: .92rem; }
}