/* ── 2. RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Reduced motion: kill keyframe motion and smooth scrolling site-wide, but
   keep (short) transitions — fades and colour changes aid comprehension.
   Movement-specific overrides live in base/motion.css. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, textarea { font: inherit; }
svg { display: block; }

/* html stays dark so an overscroll bounce past the footer matches it */
html { height: 100%; background: var(--night); overscroll-behavior-y: none; }
body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    font-size: 17px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overscroll-behavior-y: none;
}

/* Sticky footer: on pages whose content is shorter than the viewport
   (single team member, single news item, cookie policy...) #main-content
   grows to fill the remaining space so the footer always sits flush at
   the bottom of the screen instead of leaving a band of white page
   background showing underneath it. */
#main-content { flex: 1 0 auto; background: var(--paper); }
.site-footer { flex-shrink: 0; }

h1, h2, h3 { font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 1.6rem + 2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { color: var(--ink-soft); }

.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link {
    position: fixed; top: -60px; left: 12px; z-index: 10000;
    background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: var(--radius-sm);
    transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; position: absolute !important; width: auto; height: auto; clip: auto; }

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

/* ── 3. LAYOUT UTILITIES ──────────────────────────────────── */
.section-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.section-inner--tight { max-width: 980px; }
.section-inner--narrow { max-width: var(--container-narrow); }

/* Compensate for the fixed header on every page except the home page,
   where the hero sits at y:0 underneath the transparent header instead.
   --header-h is measured live by JS (see initHeaderScroll), so this works
   the same at any screen size without needing a separate mobile constant. */
#main-content { padding-top: var(--header-h); }
body.arz-home #main-content { padding-top: 0; }

.eyebrow {
    position: relative;
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--blue-600);
    margin-bottom: .9rem;
    padding-bottom: .65rem;
}
.eyebrow::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px;
    background: currentColor; opacity: .55;
}
.eyebrow--on-dark { color: var(--blue-300); }
.eyebrow--muted { color: var(--ink-faint); opacity: .7; }
.eyebrow--muted::after { background: var(--ink-faint); opacity: .4; }
.hero .eyebrow::after { content: none; }
.hero .eyebrow { padding-bottom: 0; }

.section-head { margin-bottom: 2.6rem; max-width: 640px; }
.section-head--center { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-top: .2rem; }

.section-cta { margin-top: 2.6rem; text-align: center; }

.empty-state {
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    padding: 2.6rem;
    text-align: center;
    color: var(--ink-faint);
    background: var(--fog);
}

.back-link { display: inline-block; margin-top: 2.4rem; color: var(--blue-700); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
    .back-link:hover { text-decoration: underline; }
}
.back-link--top { display: block; margin-top: 0; margin-bottom: 1.6rem; }

.tag-link {
    display: inline-block; margin: .2rem .3rem .2rem 0; padding: .3rem .7rem;
    background: var(--blue-50); border: 1px solid var(--line); border-radius: var(--radius-pill);
    font-size: .85rem; color: var(--blue-700);
}

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .85rem 1.6rem;
    border-radius: var(--radius-pill);
    font-weight: 600; font-size: .95rem;
    transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
    border: 1px solid transparent;
    white-space: nowrap;
}
/* Trailing arrow that nudges forward on hover (markup: <span class="btn__arrow">) */
.btn__arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.btn--primary {
    background-color: var(--blue-600);
    color: #fff;
    box-shadow: var(--shadow-accent);
}
.btn--primary .btn__arrow { color: var(--blue-200); }
/* Buttons never move or scale: transforming a button moves (and, while it
   animates, blurs) its label. Hover and press are colour, border and
   shadow only; just the little arrow nudges. */
@media (hover: hover) and (pointer: fine) {
    .btn--primary:hover {
        background-color: var(--blue-700);
        box-shadow: 0 16px 30px -12px rgba(59,99,199,.55);
    }
    .btn:hover .btn__arrow { transform: translateX(3px); }
}
.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
    .btn--ghost:hover { border-color: var(--ink); background: var(--blue-50); }
}
.btn--outline { border-color: var(--blue-600); color: var(--blue-700); }
@media (hover: hover) and (pointer: fine) {
    .btn--outline:hover {
        background-color: var(--blue-600);
        border-color: var(--blue-600); color: #fff;
        box-shadow: var(--shadow-accent);
    }
}
.btn--on-dark { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
    .btn--on-dark:hover { background: var(--blue-100); box-shadow: var(--shadow-sm); }
}
.btn--sm { padding: .6rem 1.2rem; font-size: .85rem; }
.btn--narrow { padding-left: .95rem; padding-right: .95rem; }
/* Press feedback: every button confirms the click (a deeper shade) */
.btn:active { box-shadow: none; }
.btn--primary:active, .btn--outline:active { background-color: var(--blue-900); border-color: var(--blue-900); color: #fff; }
.btn--ghost:active { background: var(--blue-100); }
.btn--on-dark:active { background: var(--blue-200); }