/* Stillwater Clinic — quiet Japanese modernism
   Rice paper · charcoal · moss · muted clay · indigo */
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;600&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    --paper: #F4F0E6;
    --paper-deep: #EBE5D6;
    --paper-hi: #FBF8F1;
    --ink: #24241E;
    --ink-soft: #57554A;
    --moss: #5A6B4F;
    --moss-deep: #46543E;
    --clay: #B0785A;
    --clay-soft: #C9A284;
    --indigo: #3E4C63;
    --indigo-soft: #5C6B82;
    --hairline: #D7D0BD;
    --charcoal: #23231D;
    --paper-on-dark: #E8E2D2;
    --error: #9C3B2E;
    --focus: #3E4C63;
    --font-sans: 'Mulish', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-serif: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
    --maxw: 1180px;
    --gutter: clamp(20px, 4vw, 40px);
    --space: clamp(64px, 9vw, 120px);
    --radius: 2px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--moss-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

::selection { background: var(--clay-soft); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 12px; top: 12px; z-index: 100;
    background: var(--charcoal); color: var(--paper-on-dark);
    padding: 10px 16px; font-size: 14px; text-decoration: none;
    transform: translateY(-160%);
    transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); color: var(--paper-on-dark); }

/* ---------- Layout primitives ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.section { padding: var(--space) 0; position: relative; }
.section--tight { padding: calc(var(--space) * .6) 0; }

.hairline-top { border-top: 1px solid var(--hairline); }
.hairline-bottom { border-bottom: 1px solid var(--hairline); }

.grid { display: grid; gap: clamp(24px, 3vw, 40px); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

@media (min-width: 768px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Typography ---------- */
.kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 600; margin: 0 0 14px;
}
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--clay); }

.display {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
    font-size: clamp(34px, 5.6vw, 62px);
}
.display--small { font-size: clamp(26px, 3.6vw, 40px); }

h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.25; color: var(--ink); }
h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 14px; }
h3 { font-size: clamp(19px, 2.2vw, 24px); margin: 0 0 8px; }
h4 { font-size: 17px; letter-spacing: .01em; }

.lede { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.75; color: var(--ink); font-weight: 300; }
.muted { color: var(--ink-soft); }
.serif { font-family: var(--font-serif); }

p { margin: 0 0 16px; }
.measure { max-width: 62ch; }

/* Care note — small editorial annotation with clay rule */
.care-note {
    position: relative;
    padding-left: 18px;
    margin: 22px 0 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 46ch;
}
.care-note::before {
    content: ""; position: absolute; left: 0; top: .2em; bottom: .2em;
    width: 3px; background: var(--clay);
}
.care-note strong { font-style: normal; color: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    background: var(--charcoal); color: var(--paper-on-dark);
    border: 1px solid var(--charcoal);
    border-radius: var(--radius);
    font-family: var(--font-sans); font-size: 14px; font-weight: 600;
    letter-spacing: .02em; text-decoration: none;
    cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--moss-deep); border-color: var(--moss-deep); color: var(--paper-on-dark); }
.btn:active { transform: translateY(1px); }
.btn--ghost {
    background: transparent; color: var(--ink);
    border-color: var(--hairline);
}
.btn--ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn--clay { background: var(--clay); border-color: var(--clay); color: var(--paper-hi); }
.btn--clay:hover { background: var(--clay); border-color: var(--clay); color: var(--paper-hi); filter: brightness(.94); }
.btn--sm { padding: 8px 14px; font-size: 13px; }

/* ---------- Panels / list rows ---------- */
.panel {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--paper-hi);
    padding: clamp(20px, 3vw, 30px);
}
.panel--flat { background: transparent; }

.row-link {
    display: block; text-decoration: none; color: inherit;
    border-top: 1px solid var(--hairline);
    padding: 20px 4px 18px;
    transition: transform .2s ease, background .2s ease;
}
.row-link:last-child { border-bottom: 1px solid var(--hairline); }
.row-link:hover { transform: translateX(6px); background: var(--paper-hi); }
.row-link .row-title { font-family: var(--font-serif); font-size: 20px; margin: 0 0 4px; }
.row-link .row-meta { font-size: 13px; color: var(--ink-soft); letter-spacing: .02em; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(244, 240, 230, .98);
    border-bottom: 1px solid var(--hairline);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; padding: 14px 0;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 34px; height: 34px; color: var(--moss-deep); flex: none; }
.brand-name { font-family: var(--font-serif); font-size: 19px; letter-spacing: .01em; line-height: 1.1; }
.brand-name small { display: block; font-family: var(--font-sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }

.main-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.main-nav a {
    display: inline-block; padding: 8px 10px; font-size: 14px;
    text-decoration: none; color: var(--ink); border-radius: 2px;
}
.main-nav a:hover { color: var(--moss-deep); background: var(--paper-deep); }
.nav-cta { margin-left: 8px; }
.nav-cta .btn {
    background: var(--charcoal);
    border-color: var(--charcoal);
    color: var(--paper-on-dark);
}
.nav-cta .btn:hover {
    background: var(--moss-deep);
    border-color: var(--moss-deep);
    color: var(--paper-on-dark);
}

.nav-toggle {
    display: none; background: none; border: 1px solid var(--hairline);
    border-radius: var(--radius); padding: 8px 10px; cursor: pointer;
    font-size: 13px; color: var(--ink); line-height: 1;
}

@media (max-width: 959px) {
    .nav-toggle { display: inline-flex; align-items: center; gap: 8px; }
    .main-nav {
        display: none;
        position: absolute; left: 0; right: 0; top: 100%;
        background: var(--paper-hi); border-bottom: 1px solid var(--hairline);
        padding: 12px var(--gutter) 20px;
        box-shadow: 0 18px 30px -24px rgba(36, 36, 30, .35);
    }
    .main-nav.open { display: block; }
    .main-nav ul { flex-direction: column; gap: 2px; }
    .main-nav a { display: block; padding: 12px 10px; font-size: 16px; }
    .nav-cta { margin: 10px 0 0; }
}

/* ---------- Hero (low, wide composition) ---------- */
.hero { padding-top: calc(var(--space) * .7); }
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 64px);
}
.hero-statement .display { max-width: 17ch; }
.hero-note { margin-top: 26px; }
.hero-index { align-self: end; }
.hero-image {
    margin-top: clamp(32px, 5vw, 64px);
    height: clamp(260px, 34vw, 430px);
    overflow: hidden;
    border-radius: var(--radius);
    position: relative;
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.hero-image::after {
    content: ""; position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px rgba(36, 36, 30, .08);
    border-radius: var(--radius);
}

@media (min-width: 900px) {
    .hero-grid { grid-template-columns: 7fr 3fr; }
    .hero-grid .hero-index { grid-column: 3; grid-row: 1; padding-top: 8px; }
}

/* ---------- Service index (narrow) ---------- */
.index-list { list-style: none; margin: 0; padding: 0; }
.index-list li { border-bottom: 1px solid var(--hairline); }
.index-list li:first-child { border-top: 1px solid var(--hairline); }
.index-list a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 13px 2px; text-decoration: none; color: var(--ink);
    font-size: 15px;
}
.index-list a .idx { font-family: var(--font-serif); font-size: 13px; color: var(--clay); font-variant-numeric: tabular-nums; }
.index-list a:hover { color: var(--moss-deep); }

/* ---------- Matcher ---------- */
.matcher {
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: clamp(24px, 4vw, 44px) 0;
}
.matcher-fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.matcher-legend {
    font-family: var(--font-serif); font-size: 17px; margin-bottom: 10px;
    display: block; padding: 0;
}
.matcher-options { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    position: relative; display: inline-flex;
}
.chip input {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0;
}
.chip span {
    display: inline-block; padding: 8px 14px; font-size: 13.5px;
    border: 1px solid var(--hairline); border-radius: 999px;
    background: transparent; color: var(--ink); cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip input:checked + span { background: var(--charcoal); border-color: var(--charcoal); color: var(--paper-on-dark); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip input:disabled + span { opacity: .45; cursor: not-allowed; }

.matcher-results { margin-top: 8px; }
.matcher-empty { padding: 18px 0; color: var(--ink-soft); }
.matcher-note { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink-soft); max-width: 60ch; }

.result-row { border-top: 1px solid var(--hairline); padding: 18px 2px; }
.result-row:last-child { border-bottom: 1px solid var(--hairline); }
.result-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.result-head h3 { margin: 0; }
.result-head .tag { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo-soft); }
.result-row p { margin: 6px 0 10px; font-size: 15px; max-width: 70ch; }
.result-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 14px; }
.result-actions .muted { font-size: 13px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 18px; }
@media (min-width: 768px) { .form-row.two { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }
.field .hint { font-size: 12.5px; color: var(--ink-soft); }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 11px 12px;
    background: var(--paper-hi);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    font-family: var(--font-sans); font-size: 15px; color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--indigo);
    box-shadow: 0 0 0 3px rgba(62, 76, 99, .14);
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--error); }
.field .error-msg { display: none; font-size: 12.5px; color: var(--error); }
.field.invalid .error-msg { display: block; }

.form-status { display: none; padding: 14px 16px; border-radius: var(--radius); font-size: 14.5px; }
.form-status.ok { display: block; background: var(--paper-deep); border: 1px solid var(--moss); color: var(--moss-deep); }
.form-status.err { display: block; background: #F3E3DE; border: 1px solid var(--error); color: var(--error); }

/* ---------- Selects (custom chevron; native arrow no longer touches the edge) ---------- */
.field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2357544A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
}
.field select::-ms-expand { display: none; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item:first-of-type { border-top: 1px solid var(--hairline); }
.faq-item summary {
    list-style: none; cursor: pointer;
    padding: 18px 34px 18px 2px; position: relative;
    font-family: var(--font-serif); font-size: 18px; line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+"; position: absolute; right: 4px; top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-sans); font-weight: 400; color: var(--clay); font-size: 22px;
    transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item .faq-answer { padding: 0 4px 20px; max-width: 68ch; }
.faq-item .faq-answer p { margin: 0; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
    position: relative; padding: 0 0 26px 30px; border-left: 1px solid var(--hairline);
    margin-left: 6px;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
    content: ""; position: absolute; left: -5px; top: 4px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--paper); border: 2px solid var(--clay);
}
.timeline .step-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--indigo-soft); font-weight: 600; }
.timeline h3 { margin: 4px 0 6px; font-size: 19px; }

/* ---------- Fees table ---------- */
.fee-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fee-table th, .fee-table td { text-align: left; padding: 13px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.fee-table th { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.fee-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: var(--paper-on-dark); margin-top: var(--space); }
.footer-grid {
    display: grid; gap: clamp(28px, 4vw, 56px);
    padding: calc(var(--space) * .8) 0 calc(var(--space) * .5);
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 5fr 3fr 4fr; } }
.site-footer a { color: var(--paper-on-dark); opacity: .82; }
.site-footer a:hover { opacity: 1; color: var(--paper-on-dark); }
.site-footer h4 { color: var(--paper-on-dark); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-sans); font-weight: 600; margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.footer-brand { font-family: var(--font-serif); font-size: 24px; margin-bottom: 12px; }
.footer-bottom {
    border-top: 1px solid rgba(232, 226, 210, .16);
    padding: 18px 0 26px; font-size: 13px; opacity: .72;
    display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
}
.footer-emergency {
    margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(232, 226, 210, .22);
    font-size: 13.5px; max-width: 46ch;
}

/* ---------- Misc editorial ---------- */
.stat-row { display: flex; gap: clamp(20px, 4vw, 56px); flex-wrap: wrap; }
.stat { border-left: 1px solid var(--hairline); padding-left: 16px; }
.stat .num { font-family: var(--font-serif); font-size: clamp(28px, 3vw, 38px); line-height: 1.1; color: var(--moss-deep); }
.stat .cap { font-size: 13px; color: var(--ink-soft); max-width: 22ch; }

.rule-clay { width: 56px; height: 3px; background: var(--clay); border: 0; margin: 22px 0; }

.practitioner-card { border-top: 1px solid var(--hairline); padding: 20px 2px; display: grid; gap: 10px; }
.practitioner-card .portrait { border-radius: var(--radius); overflow: hidden; margin-bottom: 6px; }
.practitioner-card .portrait img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.practitioner-card h3 { margin-bottom: 2px; }
.practitioner-card .role { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo-soft); font-weight: 600; }

.breadcrumb { font-size: 13px; color: var(--ink-soft); margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--ink); }

.sidebar-note {
    border: 1px solid var(--hairline); border-radius: var(--radius);
    padding: clamp(18px, 2.5vw, 26px);
    background: var(--paper-hi);
}
.sidebar-note h3 { font-size: 18px; }

.emergency-band {
    display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: baseline;
    border: 1px solid var(--clay); border-left: 4px solid var(--clay);
    padding: 16px 18px; border-radius: var(--radius);
    background: var(--paper-hi);
}
.emergency-band .label { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; color: var(--clay); }

.figure-row { display: grid; gap: 20px; }
@media (min-width: 768px) { .figure-row { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.figure-caption { font-size: 13px; color: var(--ink-soft); margin-top: 8px; }

/* Line drawing mark */
.line-mark { width: 44px; height: 44px; color: var(--clay); flex: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}