/* Little Moments Health Care
   Palette is sage and moss with damson and honey accents: the colors of a
   living room, not a clinic. No blue (the "light it up blue" campaign is
   contested by autistic adults) and no primary-color children's palette. */

:root {
    --paper: #eef1ea;
    --paper-raised: #f8faf5;
    --ink: #21261e;
    --ink-soft: #4e574a;
    --moss: #3e5641;
    --moss-deep: #2c3d2e;
    --damson: #6e4557;
    --honey: #cf9a3f;
    --rule: #d3d9cc;

    --display: "Fraunces", Georgia, "Times New Roman", serif;
    --body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

    --shell: 68rem;
    --gap: 1.5rem;
    --section-y: clamp(3.5rem, 8vw, 6.5rem);

    --radius: 0.75rem;
    --shadow: 0 1px 2px rgba(33, 38, 30, 0.04), 0 8px 24px -12px rgba(33, 38, 30, 0.18);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

a {
    color: var(--moss-deep);
    text-decoration-color: var(--rule);
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration-color: currentColor;
}

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

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

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gap);
}

.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    background: var(--paper-raised);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
}

/* Small caps utility label. Used for eyebrows and field hints. */
.eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--moss);
    margin: 0;
}

/* ---------- Masthead ---------- */

.masthead {
    border-bottom: 1px solid var(--rule);
}

.masthead-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.25rem;
}

.wordmark {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--display);
    font-size: 1.375rem;
    color: var(--ink);
    text-decoration: none;
}

.wordmark-mark {
    color: var(--honey);
    font-size: 1.5rem;
    line-height: 1;
}

.wordmark-sub {
    display: block;
    font-family: var(--body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.nav {
    display: flex;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: 500;
}

.nav a {
    color: var(--ink-soft);
    text-decoration: none;
    padding-block: 0.25rem;
    border-bottom: 2px solid transparent;
}

.nav a:hover {
    color: var(--ink);
}

.nav a[aria-current="page"] {
    color: var(--ink);
    border-bottom-color: var(--honey);
}

/* ---------- Sections ---------- */

.section {
    padding-block: var(--section-y);
}

.section-tint {
    background: var(--paper-raised);
    border-block: 1px solid var(--rule);
}

.section-head {
    max-width: 44rem;
    margin-bottom: 3rem;
}

.section-head h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin-top: 0.75rem;
}

.section-head p {
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: 1.125rem;
}

/* ---------- Hero ---------- */

.hero {
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
}

@media (min-width: 62rem) {
    .hero-grid {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin-top: 1rem;
}

.hero h1 em {
    font-style: italic;
    color: var(--damson);
}

.hero-lede {
    margin-top: 1.5rem;
    max-width: 34rem;
    font-size: 1.1875rem;
    color: var(--ink-soft);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.25rem;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.95rem 1.5rem;
    border-radius: 999px;
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--moss);
    border-color: var(--moss);
    color: var(--paper-raised);
}

.btn-primary:hover {
    background: var(--moss-deep);
    border-color: var(--moss-deep);
}

.btn-quiet {
    background: transparent;
    border-color: var(--rule);
    color: var(--ink);
}

.btn-quiet:hover {
    border-color: var(--moss);
}

/* ---------- Signature: the moments ledger ----------
   The one loud element on the page. Everything else stays quiet.
   These are illustrative examples of the kind of moment the work is built
   around, not records of real clients. Each one is a child exercising choice
   or self-advocacy, which is the whole point of assent-based practice.
   Note the absence of checkboxes: a checked box reads as a compliance chart. */

.ledger {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.ledger-head {
    display: block;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.ledger-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ledger-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: baseline;
    padding-block: 1.05rem;
    border-bottom: 1px dashed var(--rule);
    font-family: var(--display);
    font-size: 1.0625rem;
    line-height: 1.45;
}

.ledger-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ledger-list li::before {
    content: "\2022";
    color: var(--honey);
    font-size: 1.25rem;
    line-height: 1;
}

.ledger-note {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

/* Staggered arrival. The page has no JavaScript, so the delay is set inline
   with --i on each item. */
.reveal {
    animation: rise 0.55s cubic-bezier(0.22, 0.68, 0.35, 1) backwards;
    animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        animation: none;
    }
}

/* ---------- Card grids ---------- */

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 48rem) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card {
    border-top: 3px solid var(--moss);
    padding-top: 1.5rem;
}

.card h3 {
    font-size: 1.375rem;
}

.card p {
    margin-top: 0.85rem;
    color: var(--ink-soft);
}

/* ---------- Steps ----------
   Numbered because getting started genuinely is a sequence: the order tells a
   family what happens next. Numbering is not used anywhere else on the site. */

.steps {
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 48rem) {
    .steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

.steps li {
    counter-increment: step;
}

.steps li::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    font-family: var(--display);
    font-size: 1.75rem;
    color: var(--honey);
    margin-bottom: 0.65rem;
}

.steps h3 {
    font-size: 1.1875rem;
}

.steps p {
    margin-top: 0.65rem;
    color: var(--ink-soft);
    font-size: 0.9875rem;
}

/* ---------- Prose ---------- */

.prose {
    max-width: 42rem;
}

.prose > * + * {
    margin-top: 1.35rem;
}

.prose h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-top: 3rem;
}

.prose h3 {
    font-size: 1.25rem;
    margin-top: 2.25rem;
}

.prose ul {
    padding-left: 1.15rem;
    color: var(--ink-soft);
}

.prose li + li {
    margin-top: 0.6rem;
}

.prose-lede {
    font-size: 1.25rem;
    color: var(--ink-soft);
}

.prose-updated {
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.page-head {
    padding-block: clamp(3rem, 6vw, 4.5rem) 0;
}

.page-head h1 {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    margin-top: 0.75rem;
}

/* ---------- Pull quote ---------- */

.pull {
    border-left: 3px solid var(--damson);
    padding-left: 1.5rem;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    line-height: 1.35;
}

/* ---------- Call to action band ---------- */

.band {
    background: var(--moss-deep);
    color: var(--paper);
}

.band-inner {
    padding-block: var(--section-y);
    text-align: center;
}

.band h2 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: var(--paper-raised);
}

.band p {
    margin: 1.25rem auto 0;
    max-width: 34rem;
    color: #c9d2c2;
}

.band .btn {
    margin-top: 2.25rem;
    background: var(--honey);
    border-color: var(--honey);
    color: var(--ink);
}

.band .btn:hover {
    background: #dcab55;
    border-color: #dcab55;
}

.band :focus-visible {
    outline-color: var(--paper);
}

/* ---------- Forms ---------- */

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
}

@media (min-width: 58rem) {
    .form-grid {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

.field + .field {
    margin-top: 1.5rem;
}

.field label {
    display: block;
    font-weight: 700;
    font-size: 0.9375rem;
}

.field-hint {
    display: block;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--ink-soft);
    margin-top: 0.25rem;
}

.field input,
.field textarea {
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.8rem 0.9rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 0.5rem;
}

.field textarea {
    min-height: 9rem;
    resize: vertical;
}

.field input:hover,
.field textarea:hover {
    border-color: var(--moss);
}

.field-error input,
.field-error textarea {
    border-color: var(--damson);
}

.error {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--damson);
}

/* Honeypot. Hidden from people, reachable by bots. Not display:none, which
   some bots check for. */
.trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-actions {
    margin-top: 2rem;
}

.notice {
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    margin-bottom: 2.5rem;
}

.notice h2 {
    font-size: 1.375rem;
}

.notice p {
    margin-top: 0.6rem;
    color: var(--ink-soft);
}

.notice-good {
    border-left: 4px solid var(--moss);
}

.notice-bad {
    border-left: 4px solid var(--damson);
}

/* The boundary notice on the contact form. It has to be impossible to miss:
   the site stays out of HIPAA scope only if people do not type health
   information into it. */
.guardrail {
    border: 1px solid var(--honey);
    background: rgba(207, 154, 63, 0.09);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2.5rem;
}

.guardrail p + p {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

.aside {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2rem);
}

.aside h2 {
    font-size: 1.25rem;
}

.aside dl {
    margin: 1.5rem 0 0;
}

.aside dt {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--moss);
}

.aside dd {
    margin: 0.35rem 0 1.5rem;
    font-size: 1.0625rem;
}

.aside dd:last-child {
    margin-bottom: 0;
}

/* ---------- Footer ---------- */

.footer {
    background: var(--paper-raised);
    border-top: 1px solid var(--rule);
    padding-top: var(--section-y);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 48rem) {
    .footer-inner {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

.footer-name {
    font-family: var(--display);
    font-size: 1.25rem;
}

.footer-line {
    margin-top: 0.5rem;
    color: var(--ink-soft);
    max-width: 22rem;
}

.footer-head {
    font-family: var(--body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--moss);
}

.footer-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.footer-list li + li {
    margin-top: 0.6rem;
}

.footer-fine {
    margin-top: var(--section-y);
    padding-block: 1.75rem;
    border-top: 1px solid var(--rule);
    font-size: 0.8125rem;
    color: var(--ink-soft);
    display: grid;
    gap: 0.5rem;
}

@media (min-width: 48rem) {
    .footer-fine {
        grid-template-columns: auto 1fr;
        gap: 2.5rem;
    }
}