/* ============================================================
   Components — header, navigation, buttons, tags, hero,
   panels, cards, forms, alerts, footer, image treatments.
   ============================================================ */

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: transparent;
    transition:
        background var(--duration-fast) ease,
        box-shadow var(--duration-fast) ease;
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 5rem;
    transition: min-height var(--duration-fast) ease;
}

.site-header.is-scrolled {
    background: rgb(240 237 230 / 0.94);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 var(--color-border);
}

.site-header.is-scrolled .site-header__inner {
    min-height: 4rem;
}

.site-header__brand {
    font-weight: var(--weight-bold);
    font-size: 1.3rem;
    letter-spacing: var(--tracking-tight);
    margin-right: auto;
}

/* Light header treatment while over the dark hero */
.site-header--overlay:not(.is-scrolled) {
    color: var(--color-surface);
}

.site-header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
}

.site-header__toggle span {
    display: block;
    width: 1.4rem;
    height: 2px;
    background: currentColor;
    transition: transform var(--duration-fast) ease, opacity var(--duration-fast) ease;
}

.site-header__toggle[aria-expanded="true"] span:first-child {
    transform: translateY(4px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

/* ------------------------------------------------------------
   Navigation — animated underline (desktop), slide-in drawer
   with expandable groups (mobile, see responsive.css)
   ------------------------------------------------------------ */

.site-nav__list {
    display: flex;
    gap: var(--space-3);
}

.site-nav__row {
    display: flex;
    align-items: center;
}

.site-nav__link {
    position: relative;
    display: inline-block;
    padding-block: 0.55rem;
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
}

.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.2rem;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-fast) var(--ease-out);
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Submenus and the drawer CTA exist for the mobile drawer only */
.site-nav__subtoggle,
.site-nav__sub,
.site-nav__cta {
    display: none;
}

/* ------------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------------ */

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: var(--text-tiny);
    margin-bottom: var(--space-2);
}

.breadcrumbs li { display: flex; align-items: center; gap: 0.35rem; }

.breadcrumbs li + li::before {
    content: "/";
    opacity: 0.45;
}

.breadcrumbs a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--duration-fast) ease;
}

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

.breadcrumbs [aria-current] { opacity: 0.7; }

.breadcrumbs--dark { color: var(--color-stone); }

/* ------------------------------------------------------------
   Buttons — pill system
   ------------------------------------------------------------ */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.8rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    line-height: 1;
    border: 1px solid transparent;
    transition:
        background var(--duration-fast) ease,
        color var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        transform var(--duration-fast) ease;
}

.btn:active { transform: scale(0.98); }

/* Primary — dark pill */
.btn--dark,
.btn--primary {
    background: var(--color-ink);
    color: var(--color-surface);
}

.btn--dark:hover,
.btn--primary:hover { background: var(--color-ink-soft); }

/* Light pill (on dark surfaces) */
.btn--light {
    background: var(--color-surface);
    color: var(--color-ink);
}

.btn--light:hover { background: var(--color-bg); }

/* Sage accent pill (reference CTA) */
.btn--sage {
    background: var(--color-sage);
    color: var(--color-ink);
}

.btn--sage:hover { background: var(--color-sage-soft); }

/* Outlined pill */
.btn--outline,
.btn--ghost {
    background: transparent;
    color: inherit;
    border-color: currentColor;
}

.btn--outline:hover,
.btn--ghost:hover {
    background: var(--color-ink);
    color: var(--color-surface);
    border-color: var(--color-ink);
}

.btn--small { padding: 0.55rem 1.15rem; }

/* Arrow inside buttons/links nudges on hover */
.btn .arrow,
.text-link .arrow {
    display: inline-block;
    transition: transform var(--duration-fast) var(--ease-out);
}

.btn:hover .arrow,
.text-link:hover .arrow { transform: translateX(4px); }

/* Disabled */
.btn:disabled,
.btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* Loading — spinner replaces label opacity */
.btn.is-loading {
    color: transparent;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid rgb(255 255 255 / 0.35);
    border-top-color: var(--color-surface);
    animation: btn-spin 0.7s linear infinite;
}

.btn--light.is-loading::after,
.btn--sage.is-loading::after,
.btn--outline.is-loading::after {
    border-color: rgb(23 22 16 / 0.25);
    border-top-color: var(--color-ink);
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Subtle text link with arrow */
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-fast) ease;
}

.text-link:hover { border-bottom-color: currentColor; }

/* Icon button — circular */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.btn-icon:hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-surface);
}

.btn-icon--dark {
    background: transparent;
    border-color: rgb(255 255 255 / 0.3);
    color: var(--color-surface);
}

.btn-icon--dark:hover {
    background: var(--color-surface);
    color: var(--color-ink);
    border-color: var(--color-surface);
}

/* ------------------------------------------------------------
   Tags
   ------------------------------------------------------------ */

.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.95rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-tiny);
    font-weight: var(--weight-semibold);
    background: var(--color-sage-soft);
    color: var(--color-ink);
}

.tag--neutral { background: var(--color-beige); }
.tag--dark    { background: var(--color-ink); color: var(--color-surface); }
.tag--outline { background: transparent; border: 1px solid var(--color-border); }

/* Square chip variant (small radius) */
.chip {
    display: inline-flex;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-tiny);
    font-weight: var(--weight-medium);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
}

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

.hero {
    position: relative;
    min-height: min(92vh, 56rem);
    display: flex;
    align-items: flex-end;
    color: var(--color-surface);
    overflow: hidden;
    /* Header sits over the hero */
    margin-top: -5rem;
}

.hero__media {
    position: absolute;
    inset: -8% 0;           /* headroom for parallax drift */
    z-index: 0;
    background-size: cover;
    /* Focal point overridable per image: style="--focal: 65% 30%" */
    background-position: var(--focal, center 35%);
    will-change: transform;
    /* --parallax-y is written by main.js on scroll. Composing it here
       rather than as an inline transform lets the load-in zoom below
       animate the scale without the two fighting each other. */
    transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1);
    animation: hero-zoom-in 1.2s var(--ease-reveal) backwards;
}

/* Settle from slightly overscaled — the image appears to come to rest
   as the page loads. Subtle on purpose: 4% over 1.2s reads as depth
   without the visitor waiting on a still-moving background. */
@keyframes hero-zoom-in {
    from { transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.04); }
    to   { transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1); }
}

/* ---------- Hero copy entrance ----------
   Each child of .hero__content arrives in sequence on page load, so
   the first thing a visitor sees on every page is a composed cascade
   rather than a static block.

   The whole cascade is finished inside half a second. The headline in
   particular starts almost immediately — it is the thing a visitor
   came to read, and delaying it is what makes a site feel slow. */

.hero__content > * {
    animation: hero-rise var(--duration-reveal) var(--ease-reveal) backwards;
}

.hero__content > :nth-child(1) { animation-delay: 0.08s; }
.hero__content > :nth-child(2) { animation-delay: 0.21s; }
.hero__content > :nth-child(3) { animation-delay: 0.34s; }
.hero__content > :nth-child(4) { animation-delay: 0.47s; }
.hero__content > :nth-child(5) { animation-delay: 0.6s; }
.hero__content > :nth-child(n+6) { animation-delay: 0.73s; }

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 1.5rem, 0);
        filter: blur(var(--reveal-blur));
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

.hero__media--placeholder {
    background: linear-gradient(160deg, var(--color-hero-top) 0%, var(--color-ink) 65%);
}

.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-hero);
}

.hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: var(--space-7) var(--space-7);
}

.hero__heading { margin-block: var(--space-2) var(--space-4); max-width: 14ch; }

.hero__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Compact hero for inner pages */
.hero--page {
    min-height: 24rem;
    align-items: flex-end;
}

/* ------------------------------------------------------------
   Panels
   ------------------------------------------------------------ */

.panel {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: clamp(var(--space-4), 4.5vw, var(--space-5));
    box-shadow: var(--shadow-panel);
}

.panel__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;   /* intentional asymmetry */
    gap: var(--space-4);
    align-items: start;
}

.panel__body p { margin-bottom: var(--space-3); }

/* Dark image-backed feature panel */
.feature-panel {
    position: relative;
    background-color: var(--color-ink-soft);
    background-size: cover;
    background-position: center;
    color: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: clamp(var(--space-4), 6vw, var(--space-6));
    overflow: hidden;
}

.feature-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-panel);
}

.feature-panel > * { position: relative; }

.feature-panel__content { max-width: 34rem; }
.feature-panel__content h2 { margin-bottom: var(--space-2); }
.feature-panel__content p { color: var(--color-stone); margin-bottom: var(--space-3); }

/* ------------------------------------------------------------
   Image treatments
   ------------------------------------------------------------ */

.img-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-placeholder {
    background: linear-gradient(150deg, var(--color-beige), var(--color-beige-deep));
    width: 100%;
    height: 100%;
}

/* Gentle zoom on hover (cards, gallery) */
.img-zoom img,
.img-zoom .img-placeholder {
    transition: transform var(--duration) var(--ease-out);
}

.img-zoom:hover img,
.img-zoom:hover .img-placeholder { transform: scale(1.045); }

/* Mask reveal — image wipes upward as it enters the viewport */
[data-mask] {
    clip-path: inset(12% 0 0 0 round var(--radius-lg));
    opacity: 0;
    transition:
        clip-path var(--duration-slow) var(--ease-out),
        opacity var(--duration) var(--ease-out);
}

[data-mask].is-visible {
    clip-path: inset(0 0 0 0 round var(--radius-lg));
    opacity: 1;
}

.no-observer [data-mask] {
    clip-path: none;
    opacity: 1;
}

/* ------------------------------------------------------------
   Cards — shared base
   ------------------------------------------------------------ */

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
}

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

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

a.card:hover {
    transform: translateY(-0.3rem);
    box-shadow: var(--shadow-card-hover);
}

.card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.card__media img,
.card__media .img-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration) var(--ease-out);
}

a.card:hover .card__media img,
a.card:hover .card__media .img-placeholder { transform: scale(1.045); }

.card__tag {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 1;
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: var(--space-3);
    flex: 1;
}

.card__subtitle {
    font-size: var(--text-tiny);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-muted);
}

.card__title {
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
}

.card__excerpt {
    font-size: var(--text-small);
    color: var(--color-muted);
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: var(--text-small);
    color: var(--color-muted);
}

.card__footer {
    margin-top: auto;
    padding-top: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.card__price {
    font-weight: var(--weight-bold);
    font-size: 1.05rem;
}

.card__price small {
    display: block;
    font-size: var(--text-tiny);
    font-weight: var(--weight-medium);
    color: var(--color-muted);
}

/* --- Variants ------------------------------------------------ */

/* Home design card: spec row + price-from footer (base covers it) */
.card--design .card__media { aspect-ratio: 3 / 2; }

/* House & land card: location subtitle + price emphasis */
.card--package .card__title { font-size: 1.2rem; }

/* Display home card: open-hours line */
.card__hours {
    font-size: var(--text-small);
    color: var(--color-sage-deep);
    font-weight: var(--weight-medium);
}

/* Gallery card: pure image, caption on hover */
.card--gallery .card__media { aspect-ratio: 1 / 1; }

.card--gallery .card__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-3) var(--space-2) var(--space-2);
    background: linear-gradient(transparent, rgb(23 22 16 / 0.6));
    color: var(--color-surface);
    font-size: var(--text-small);
    opacity: 0;
    transition: opacity var(--duration-fast) ease;
}

.card--gallery:hover .card__caption { opacity: 1; }

/* Editorial article card: flat, hairline, roomier text */
.card--article {
    box-shadow: none;
    border: 1px solid var(--color-border);
}

.card--article .card__media { aspect-ratio: 16 / 10; }
.card--article .card__title { font-size: 1.25rem; }

/* Dark promotional card (reference: "grow your brand" block) */
.card--promo {
    background-color: var(--color-ink);
    background-size: cover;
    background-position: center;
    color: var(--color-surface);
    border-radius: var(--radius-xl);
    justify-content: flex-end;
    min-height: 20rem;
}

.card--promo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-panel);
}

.card--promo .card__body {
    position: relative;
    padding: var(--space-4);
    gap: var(--space-2);
}

.card--promo .card__title {
    font-size: var(--text-h3);
}

.card--promo .card__excerpt { color: var(--color-stone); }

/* Testimonial card */
.card--testimonial {
    padding: var(--space-4);
    gap: var(--space-3);
    box-shadow: none;
    border: 1px solid var(--color-border);
}

.card--testimonial .card__quote {
    font-size: 1.1rem;
    line-height: 1.55;
    font-weight: var(--weight-medium);
    letter-spacing: -0.01em;
}

.card--testimonial .card__quote::before { content: "\201C"; }
.card--testimonial .card__quote::after  { content: "\201D"; }

.card__attribution {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: var(--text-small);
}

.card__attribution .name { font-weight: var(--weight-semibold); }
.card__attribution .place { color: var(--color-muted); }

.card__stars {
    color: var(--color-sage-deep);
    letter-spacing: 0.15em;
    font-size: var(--text-small);
}

/* Resource download card: horizontal, thumb + text + action */
.card--resource {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    box-shadow: none;
    border: 1px solid var(--color-border);
}

.card--resource .card__thumb {
    flex: 0 0 4.5rem;
    height: 5.5rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-beige);
}

.card--resource .card__body { padding: 0; }

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

.form-field { margin-bottom: var(--space-3); }

.form-field__label {
    display: block;
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    margin-bottom: 0.5rem;
}

.form-field__input {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.15rem;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.form-field__input:focus {
    outline: none;
    border-color: var(--color-ink);
    box-shadow: 0 0 0 3px rgb(23 22 16 / 0.08);
}

.form-field__input::placeholder { color: var(--color-stone); }

.form-field__textarea { resize: vertical; min-height: 8rem; }

.form-field__hint {
    font-size: var(--text-tiny);
    color: var(--color-muted);
    margin-top: 0.35rem;
}

.form-field__error {
    color: var(--color-error);
    font-size: var(--text-small);
    margin-top: 0.4rem;
}

.has-error .form-field__input { border-color: var(--color-error); }

/* Inline newsletter pill form (footer) */
.pill-form {
    display: flex;
    background: var(--color-surface);
    border-radius: var(--radius-pill);
    padding: 0.3rem;
    max-width: 22rem;
}

.pill-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0.5rem 1rem;
    font-size: var(--text-small);
    color: var(--color-ink);
}

.pill-form input:focus { outline: none; }

/* Accessible error summary above forms */
.error-summary {
    border: 2px solid var(--color-error);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-error-tint);
}

.error-summary__title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.error-summary ul { padding-left: 1rem; list-style: disc; }

.error-summary a {
    color: var(--color-error);
    font-size: var(--text-small);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ------------------------------------------------------------
   Alerts
   ------------------------------------------------------------ */

.alert {
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-small);
    margin-bottom: var(--space-3);
}

.alert--success { background: var(--color-success-bg); color: var(--color-success); }
.alert--error   { background: var(--color-error-bg); color: var(--color-error); }

/* ------------------------------------------------------------
   Footer — premium dark
   ------------------------------------------------------------ */

.site-footer {
    background: var(--color-ink);
    color: var(--color-bg);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-block: var(--space-6) var(--space-4);
    margin-top: var(--space-6);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 4fr 2fr 2fr 2fr;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgb(240 237 230 / 0.14);
}

.site-footer__wordmark {
    font-size: 1.5rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-2);
}

.site-footer__tagline {
    color: var(--color-stone);
    max-width: 24rem;
    margin-bottom: var(--space-3);
}

.site-footer__col h3 {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-stone);
    margin-bottom: var(--space-2);
}

.site-footer__col a {
    display: block;
    padding-block: 0.32rem;
    font-size: var(--text-small);
    transition: color var(--duration-fast) ease;
}

.site-footer__col a:hover { color: var(--color-sage); }

.site-footer__social {
    display: flex;
    gap: 0.6rem;
}

.site-footer__areas {
    padding-block: var(--space-3);
    border-bottom: 1px solid rgb(240 237 230 / 0.14);
}

.site-footer__areas h3 {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-stone);
    margin-bottom: var(--space-1);
}

.site-footer__area-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
}

.site-footer__area-links a {
    font-size: var(--text-small);
    transition: color var(--duration-fast) ease;
}

.site-footer__area-links a:hover { color: var(--color-sage); }

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding-top: var(--space-3);
    font-size: var(--text-tiny);
    color: var(--color-stone);
}

.site-footer__legal { display: flex; gap: var(--space-3); }
.site-footer__legal a:hover { color: var(--color-sage); }

/* ------------------------------------------------------------
   Error pages
   ------------------------------------------------------------ */

.error-page { text-align: center; }

.error-page__code {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-muted);
    margin-bottom: var(--space-2);
}

.error-page__heading { margin-bottom: var(--space-2); }

.error-page__body {
    margin-inline: auto;
    color: var(--color-muted);
    margin-bottom: var(--space-4);
}

.error-page__actions {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
}