/* =============================================================================
   Base — reset, typography, and the accessibility floor
============================================================================= */

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

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

/* ---------------------------------------------------------------------------
   Headings
   The display face is set tight and dark; body copy stays generous. The gap
   between the two is what makes the hierarchy readable at a glance.
--------------------------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); font-weight: 600; line-height: var(--leading-snug); }
h4 { font-size: var(--step-1); font-weight: 600; line-height: var(--leading-snug); }

p { text-wrap: pretty; }

p + p { margin-top: var(--space-4); }

strong { font-weight: 600; }

/* Reading measure for long-form prose. */
.prose { max-width: var(--container-text); }
.prose p + h3 { margin-top: var(--space-7); }
.prose h3 + p { margin-top: var(--space-3); }
.prose ul { margin-top: var(--space-4); }

/* ---------------------------------------------------------------------------
   Links
--------------------------------------------------------------------------- */

a {
    color: inherit;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
    transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease);
}

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

.prose a {
    color: var(--copper-700);
    text-decoration-color: rgb(168 95 46 / 0.4);
}

/* ---------------------------------------------------------------------------
   Focus — visible, on every interactive element, in both grounds
--------------------------------------------------------------------------- */

:focus { outline: none; }

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

.on-dark :focus-visible { outline-color: var(--copper-300); }

/* Skip link — the first thing a keyboard or screen-reader user meets. */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: var(--space-4);
    z-index: 200;
    padding: var(--space-3) var(--space-5);
    background: var(--slate-900);
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius);
    transform: translateY(-160%);
    transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   Lists
--------------------------------------------------------------------------- */

ul, ol { padding-left: 1.15em; }
li + li { margin-top: var(--space-2); }

.list-plain { list-style: none; padding: 0; }
.list-plain li + li { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Utilities
--------------------------------------------------------------------------- */

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }

.lead {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--slate-700);
}

.on-dark .lead { color: var(--stone-300); }

/* ---------------------------------------------------------------------------
   Missing-information marker

   Deliberately loud. If a placeholder survives to production, it is because
   someone chose to ignore it, not because they failed to notice it.
--------------------------------------------------------------------------- */

.placeholder {
    display: inline;
    padding: 0.1em 0.4em;
    background: rgb(192 116 60 / 0.14);
    border-bottom: 2px dashed var(--copper-600);
    color: var(--copper-700);
    font-family: var(--font-body);
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.01em;

    /* These labels are long. Left unbreakable they push the page wider than
       the phone screen, which is exactly the bug they are meant to prevent. */
    white-space: normal;
    overflow-wrap: break-word;
}

.on-dark .placeholder {
    background: rgb(217 148 92 / 0.18);
    border-bottom-color: var(--copper-300);
    color: var(--copper-300);
}

/* ---------------------------------------------------------------------------
   Motion
   Everything below is decorative easing; a visitor who asks for less motion
   gets the page with none of it.
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* Scroll-triggered reveal.
   Scoped to .js, which is set by a one-line script in <head>. Without
   JavaScript — or if main.js fails to load — nothing is ever hidden. Content
   that only exists once a script has run is content that can disappear. */
.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   Print — a visitor printing a service page should get something usable
--------------------------------------------------------------------------- */

@media print {
    .site-header, .mobile-bar, .cta-final, .quote-form, .site-footer nav { display: none; }
    body { background: #fff; color: #000; font-size: 11pt; }
    a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}