/*
 * Reset + base element styles for the brand site.
 */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 var(--space-4);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
    color: var(--color-ink);
}

h1 {
    font-size: var(--font-size-3xl);
}

h2 {
    font-size: var(--font-size-2xl);
}

h3 {
    font-size: var(--font-size-lg);
}

p {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
}

a {
    color: var(--color-primary-dark);
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img,
svg {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-5);
    box-sizing: border-box;
}

/* Visible, clear focus state everywhere (keyboard accessibility). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

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

/* ---- Section rhythm ---- */
/* Sections alternate background layers so pages don't read as a stack
   of identical white cards; combine with .section-band for a tinted
   layer between plain and surface sections. */

.section {
    padding: var(--space-8) 0;
}

.section-header {
    max-width: 640px;
    margin: 0 auto var(--space-6);
    text-align: center;
}

.section-header p {
    margin-bottom: 0;
}

.section-alt {
    background-color: var(--color-surface);
}

.section-band {
    background-color: var(--color-bg-warm);
    background-image:
        radial-gradient(circle at 8% 20%, rgba(193, 115, 79, 0.07), transparent 45%),
        radial-gradient(circle at 92% 80%, rgba(124, 138, 106, 0.08), transparent 45%);
}

/* Compact page-intro header used at the top of interior (non-home) pages
   — gives every page a distinct opening band instead of starting flush
   with plain body background. */
.page-hero {
    padding: var(--space-7) 0 var(--space-6);
    background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-bg) 100%);
}

.page-hero .section-header {
    margin-bottom: 0;
}

/* Brand eyebrow tag — the one small-label treatment reused above the
   hero heading, every section-header, and each interior page's
   page-hero title, so the same brand mark repeats consistently. */
.eyebrow {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background-color: var(--color-accent-soft);
    color: var(--color-primary-dark);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-3);
}