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

html {
    color-scheme: light dark;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-1);
    line-height: var(--line-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

img {
    height: auto;
}

a {
    color: var(--color-link);
    text-decoration-thickness: var(--link-underline-thickness);
    text-underline-offset: var(--link-underline-offset);
}

a:hover {
    color: var(--color-link-hover);
}

:focus-visible {
    outline: var(--focus-outline);
    box-shadow: var(--focus-ring);
    border-radius: 2px;
}

[hidden] {
    display: none !important;
}

/* -------------------- Text -------------------- */

.c-text > * {
    margin: 0 0 var(--space-4);
}

.c-text > :last-child {
    margin: 0;
}

/* -------------------- Typography -------------------- */
.t-kicker {
    text-transform: var(--kicker-case);
    letter-spacing: var(--kicker-tracking);
    font-weight: var(--kicker-weight);
    color: var(--color-text-muted);
}

.t-hero {
    font-size: var(--font-size-8);
    line-height: var(--line-compact);
    font-weight: var(--weight-bold);
    max-width: var(--hero-maxw);
}

.t-title {
    font-size: var(--font-size-6);
    line-height: var(--line-compact);
    font-weight: var(--weight-semibold);
}

.t-subtitle {
    font-size: var(--font-size-4);
    color: var(--color-text-muted);
}

.t-lead {
    font-size: var(--font-size-2);
    color: var(--color-text);
    line-height: var(--line-loose);
}

.t-body {
    font-size: var(--font-size-1);
}

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

.t-caption,
.t-overline {
    font-size: var(--font-size-00);
    color: var(--color-text-muted);
}

.t-quote {
    font-size: var(--font-size-3);
    line-height: var(--line-loose);
    font-style: italic;
}

.t-code,
code,
pre {
    font-family: var(--font-mono);
    font-size: 0.95em;
}

pre {
    padding: var(--space-4);
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-md);
    overflow: auto;
}

/* -------------------- Layout -------------------- */
.l-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.l-container--narrow {
    max-width: var(--container-narrow);
}

.l-container--wide {
    max-width: var(--container-wide);
}

.l-container--fluid {
    max-width: none;
}

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

.l-section--tight {
    padding-block: calc(var(--section-pad-y) * 0.5);
}

.l-section--loose {
    padding-block: calc(var(--section-pad-y) * 1.5);
}

.l-band {
    background: var(--band-bg);
}

.l-stack {
    gap: var(--space-5);
    display: flex;
    flex-flow: column;
}

.l-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

.l-switcher {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .l-switcher {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.l-sidebar {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 64rem) {
    .l-sidebar {
        grid-template-columns: 280px 1fr;
    }
}

.l-split {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

@media (min-width: 64rem) {
    .l-split {
        grid-template-columns: 1fr 1fr;
    }
}

.l-grid {
    display: grid;
    gap: var(--space-6);
}

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

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

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

.l-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.l-grid--gap-sm {
    gap: var(--space-4);
}

.l-grid--gap-md {
    gap: var(--space-5);
}

.l-grid--gap-lg {
    gap: var(--space-7);
}

/* -------------------- Header / Nav -------------------- */
.c-header {
    position: relative;
    z-index: var(--z-sticky);
    background: var(--color-bg);
    border-bottom: var(--border);
}

.c-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-4);
}

.c-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-decoration: none;
}

.c-nav {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.c-nav a {
    color: var(--color-text);
    text-decoration: none;
}

.c-nav a[aria-current="page"],
.is-current>a {
    color: var(--color-link);
}

.c-breadcrumbs {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-0);
}

.c-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.c-pagination {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.c-tabs {
    display: flex;
    gap: var(--space-2);
    border-bottom: var(--border);
}

.c-tabs [role="tab"] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--color-text-muted);
}

.c-tabs [aria-selected="true"] {
    color: var(--color-text);
    border: var(--border);
    border-bottom: none;
    background: var(--color-surface);
}

/* -------------------- Buttons -------------------- */
.c-btn, a.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    border-radius: var(--btn-radius);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    text-decoration: none;
    font-weight: var(--weight-medium);
    transition: transform var(--dur-fast) var(--easing-standard), background var(--dur-fast) var(--easing-standard), opacity var(--dur-fast);
    min-height: 2.5rem;
}

.c-btn:hover, a.c-btn:hover {
    background: var(--btn-bg-hover);
}

.c-btn:active, a.c-btn:active {
    transform: translateY(1px);
}

.c-btn.is-loading, a.c-btn.is-loading {
    pointer-events: none;
    opacity: var(--opacity-disabled);
}

.c-btn.is-disabled, a.c-btn.is-disabled,
.c-btn:disabled, a.c-btn:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

.c-btn--secondary, a.c-btn--secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: var(--border);
}

.c-btn--tertiary, a.c-btn--tertiary {
    background: transparent;
    color: var(--color-text);
    border: var(--border);
}

.c-btn--ghost, a.c-btn--ghost {
    background: transparent;
    color: var(--color-text);
    border: none;
}

.c-btn--destructive, a.c-btn--destructive {
    background: var(--color-danger);
    color: var(--color-danger-contrast);
}

.c-btn--link, a.c-btn--link {
    background: transparent;
    color: var(--color-link);
    border: none;
    padding: 0;
    min-height: auto;
}

.c-btn--sm, a.c-btn--sm {
    padding: var(--size-sm-pad-y) var(--size-sm-pad-x);
    min-height: var(--size-sm-height);
    font-size: var(--font-size-0);
}

.c-btn--lg, a.c-btn--lg {
    padding: var(--size-lg-pad-y) var(--size-lg-pad-x);
    min-height: var(--size-lg-height);
    font-size: var(--font-size-2);
}

.c-btn--icon, a.c-btn--icon {
    width: var(--size-lg-height);
    min-width: var(--size-lg-height);
    aspect-ratio: 1 / 1;
    padding: 0;
}

/* -------------------- Forms -------------------- */
.c-field {
    display: grid;
    gap: var(--space-2);
}

.c-field+.c-field {
    margin-top: var(--space-4);
}

.c-field label {
    font-weight: var(--weight-medium);
}

.c-hint {
    color: var(--input-placeholder);
    font-size: var(--font-size-0);
}

.c-error {
    color: var(--color-danger);
    font-size: var(--font-size-0);
}

.c-input,
.c-textarea,
.c-select {
    width: 100%;
    background: var(--input-bg);
    color: var(--input-text);
    border: var(--input-border);
    border-radius: var(--input-radius);
    padding: var(--input-pad-y) var(--input-pad-x);
    min-height: var(--input-height);
}

.c-textarea {
    min-height: calc(var(--input-height) * 2);
    resize: vertical;
}

.c-select {
    appearance: none;
    background-image: none;
}

.c-input::placeholder,
.c-textarea::placeholder {
    color: var(--input-placeholder);
}

.c-input:focus,
.c-textarea:focus,
.c-select:focus {
    outline: none;
    border: var(--input-border-focus);
    box-shadow: var(--focus-ring);
}

.c-checkbox,
.c-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.c-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.c-form-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Invalid / states */
.is-invalid .c-input,
.is-invalid .c-textarea,
.is-invalid .c-select {
    border-color: var(--color-danger);
}

.is-required label::after {
    content: " *";
    color: var(--color-danger);
}

/* -------------------- Content / Marketing -------------------- */
.c-hero {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--section-pad-y);
}

.c-hero--center {
    text-align: center;
    justify-items: center;
}

.c-hero--split {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 64rem) {
    .c-hero--split {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: center;
    }
}

.c-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.c-feature-list {
    display: grid;
    gap: var(--space-6);
}

.c-feature-list__item {
    display: grid;
    gap: var(--space-2);
}

.c-benefit-list {
    display: grid;
    gap: var(--space-5);
}

.c-stats {
    display: grid;
    gap: var(--space-6);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

.c-logos {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    align-items: center;
    opacity: 0.9;
}

.c-testimonial {
    display: grid;
    gap: var(--space-3);
    font-size: var(--font-size-2);
    line-height: var(--line-loose);
}

.c-pricing {
    display: grid;
    gap: var(--space-6);
}

.c-pricing__grid {
    display: grid;
    gap: var(--space-6);
}

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

.c-faq {
    display: grid;
    gap: var(--space-3);
}

.c-announcement,
.c-banner {
    background: var(--tint-info-bg);
    border: 1px solid var(--tint-info-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

/* -------------------- Data display -------------------- */
.c-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-pad);
}

.c-card--outlined {
    box-shadow: none;
}

.c-card--elevated {
    box-shadow: var(--shadow-md);
}

.c-card--hover {
    transition: box-shadow var(--dur-base) var(--easing-standard), transform var(--dur-base) var(--easing-standard);
}

.c-card--hover:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.c-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-0);
}

.c-table th,
.c-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border);
    text-align: left;
}

.c-table--striped tbody tr:nth-child(odd) {
    background: var(--color-surface);
}

.c-table--compact th,
.c-table--compact td {
    padding: var(--space-2) var(--space-3);
}

.c-table--bordered {
    border: var(--border);
}

.c-table--bordered th,
.c-table--bordered td {
    border-right: var(--border);
}

.c-table--bordered tr:last-child td {
    border-bottom: none;
}

.c-badge,
.c-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    border-radius: var(--tag-radius);
    padding: var(--tag-pad-y) var(--tag-pad-x);
    font-size: var(--font-size-00);
    line-height: 1;
    border: var(--border);
    background: var(--color-surface);
    color: var(--color-text);
}

.c-badge--neutral {
    background: var(--color-surface);
}

.c-badge--info {
    background: var(--tint-info-bg);
    border-color: var(--tint-info-border);
}

.c-badge--success {
    background: var(--tint-success-bg);
    border-color: var(--tint-success-border);
}

.c-badge--warning {
    background: var(--tint-warning-bg);
    border-color: var(--tint-warning-border);
}

.c-badge--danger {
    background: var(--tint-danger-bg);
    border-color: var(--tint-danger-border);
}

.c-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-surface);
    border: var(--border);
}

.c-media-object {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
}

/* -------------------- Feedback -------------------- */
.c-alert {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border);
    background: var(--color-surface);
}

.c-alert--info {
    background: var(--tint-info-bg);
    border-color: var(--tint-info-border);
}

.c-alert--success {
    background: var(--tint-success-bg);
    border-color: var(--tint-success-border);
}

.c-alert--warning {
    background: var(--tint-warning-bg);
    border-color: var(--tint-warning-border);
}

.c-alert--danger {
    background: var(--tint-danger-bg);
    border-color: var(--tint-danger-border);
}

.c-progress {
    width: 100%;
    height: 8px;
    background: var(--color-surface);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.c-progress__bar {
    height: 100%;
    background: var(--color-primary);
}

.c-spinner {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    animation: spin var(--dur-slow) linear infinite;
}

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

.c-skeleton {
    background: linear-gradient(90deg, var(--color-surface), var(--color-elevated), var(--color-surface));
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.c-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-6);
}

/* -------------------- Overlays & Menus -------------------- */
.c-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: var(--z-overlay);
}

.c-modal {
    position: fixed;
    inset: auto 0 0 0;
    margin: auto;
    max-width: 42rem;
    background: var(--color-elevated);
    border-radius: var(--radius-lg);
    border: var(--border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
    z-index: var(--z-modal);
}

.c-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(420px, 90vw);
    background: var(--color-elevated);
    border-left: var(--border);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-overlay);
}

.c-dropdown {
    position: absolute;
    min-width: 12rem;
    background: var(--color-elevated);
    border: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    padding: var(--space-2);
}

.c-tooltip {
    position: absolute;
    padding: var(--space-2) var(--space-3);
    background: var(--color-text);
    color: var(--grey-0);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-00);
}

/* -------------------- Media -------------------- */
.c-figure {
    margin: 0;
}

.c-figcaption {
    color: var(--color-text-muted);
    font-size: var(--font-size-0);
    margin-top: var(--space-2);
}

.c-image {
    display: block;
    border-radius: var(--radius-md);
}

.c-video {
    position: relative;
}

.c-video>iframe,
.c-video>video {
    width: 100%;
    height: auto;
    display: block;
}

.c-gallery {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

/* -------------------- Search & Filters -------------------- */
.c-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
}

.c-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.c-breadcrumb-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-0);
}

/* -------------------- Footer & Legal -------------------- */
.c-footer {
    background: var(--color-surface);
    border-top: var(--border);
    padding-block: var(--space-6);
}

.c-footer--columns .c-footer__grid {
    display: grid;
    gap: var(--space-6);
}

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

.c-legal {
    color: var(--color-text-muted);
    font-size: var(--font-size-0);
}

.c-cookie {
    position: fixed;
    inset: auto var(--space-4) var(--space-4) var(--space-4);
    max-width: 32rem;
    background: var(--color-elevated);
    border: var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-toast);
}

/* -------------------- Utilities -------------------- */
/* spacing (limited scale) */
.u-m-0 {
    margin: 0 !important;
}

.u-mx-0 {
    margin-inline: 0 !important;
}

.u-my-0 {
    margin-block: 0 !important;
}

.u-p-0 {
    padding: 0 !important;
}

.u-px-0 {
    padding-inline: 0 !important;
}

.u-py-0 {
    padding-block: 0 !important;
}

.u-m-xs {
    margin: var(--space-1) !important;
}

.u-m-sm {
    margin: var(--space-2) !important;
}

.u-m-md {
    margin: var(--space-4) !important;
}

.u-m-lg {
    margin: var(--space-6) !important;
}

.u-m-xl {
    margin: var(--space-8) !important;
}

.u-p-xs {
    padding: var(--space-1) !important;
}

.u-p-sm {
    padding: var(--space-2) !important;
}

.u-p-md {
    padding: var(--space-4) !important;
}

.u-p-lg {
    padding: var(--space-6) !important;
}

.u-p-xl {
    padding: var(--space-8) !important;
}

.u-mx-sm {
    margin-inline: var(--space-2) !important;
}

.u-my-sm {
    margin-block: var(--space-2) !important;
}

.u-mx-md {
    margin-inline: var(--space-4) !important;
}

.u-my-md {
    margin-block: var(--space-4) !important;
}

.u-mx-lg {
    margin-inline: var(--space-6) !important;
}

.u-my-lg {
    margin-block: var(--space-6) !important;
}

.u-px-sm {
    padding-inline: var(--space-2) !important;
}

.u-py-sm {
    padding-block: var(--space-2) !important;
}

.u-px-md {
    padding-inline: var(--space-4) !important;
}

.u-py-md {
    padding-block: var(--space-4) !important;
}

.u-px-lg {
    padding-inline: var(--space-6) !important;
}

.u-py-lg {
    padding-block: var(--space-6) !important;
}

/* text & alignment */
.u-text-left {
    text-align: left !important;
}

.u-text-center {
    text-align: center !important;
}

.u-text-right {
    text-align: right !important;
}

.u-weight-regular {
    font-weight: var(--weight-regular) !important;
}

.u-weight-medium {
    font-weight: var(--weight-medium) !important;
}

.u-weight-bold {
    font-weight: var(--weight-bold) !important;
}

.u-nowrap {
    white-space: nowrap !important;
}

.u-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* display & flex/grid helpers */
.u-flex {
    display: flex !important;
}

.u-inline {
    display: inline-block !important;
}

.u-grid {
    display: grid !important;
}

.u-wrap {
    flex-wrap: wrap !important;
}

.u-gap-sm {
    gap: var(--space-3) !important;
}

.u-gap-md {
    gap: var(--space-4) !important;
}

.u-gap-lg {
    gap: var(--space-6) !important;
}

.u-items-center {
    align-items: center !important;
}

.u-justify-start {
    justify-content: flex-start !important;
}

.u-justify-center {
    justify-content: center !important;
}

.u-justify-between {
    justify-content: space-between !important;
}

.u-justify-end {
    justify-content: flex-end !important;
}

/* sizing */
.u-w-100 {
    width: 100% !important;
}

.u-w-auto {
    width: auto !important;
}

.u-maxw-sm {
    max-width: 24rem !important;
}

.u-maxw-md {
    max-width: 36rem !important;
}

.u-maxw-lg {
    max-width: 48rem !important;
}

.u-h-100 {
    height: 100% !important;
}

.u-h-auto {
    height: auto !important;
}

/* visibility & a11y */
.u-hidden {
    display: none !important;
}

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

.c-skiplink {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.c-skiplink:focus {
    position: static;
    width: auto;
    height: auto;
    padding: var(--space-2) var(--space-3);
    background: var(--color-elevated);
    border: var(--border);
    border-radius: var(--radius-sm);
}

/* borders, radius, elevation */
.u-border {
    border: var(--border) !important;
}

.u-radius-sm {
    border-radius: var(--radius-sm) !important;
}

.u-radius-md {
    border-radius: var(--radius-md) !important;
}

.u-radius-lg {
    border-radius: var(--radius-lg) !important;
}

.u-radius-pill {
    border-radius: var(--radius-pill) !important;
}

.u-shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.u-shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.u-shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* color helpers (limited) */
.u-bg-primary {
    background: var(--color-primary) !important;
    color: var(--color-primary-contrast) !important;
}

.u-bg-surface {
    background: var(--color-surface) !important;
}

.u-bg-elevated {
    background: var(--color-elevated) !important;
}

.u-text-muted {
    color: var(--color-text-muted) !important;
}

/* -------------------- States -------------------- */

/*
.is-active {}

.is-open {}
*/

.is-selected {
    outline: var(--focus-outline);
}

.is-loading {
    cursor: progress;
}

.is-disabled {
    pointer-events: none;
    opacity: var(--opacity-disabled);
}

/* -------------------- Toast (example) -------------------- */
.c-toast {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    display: grid;
    gap: var(--space-2);
    background: var(--color-elevated);
    border: var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-toast);
}

/* Basic inline image */
.c-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--image-radius);
    border: var(--image-border);
    box-shadow: var(--image-shadow);
    background: var(--image-placeholder-bg);
    filter: saturate(var(--image-saturation)) contrast(var(--image-contrast));
}

/* Framed image with enforced ratio (use with <div class="c-imgbox u-aspect-16-9"><img ...></div>) */
.c-imgbox {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--image-radius);
    border: var(--image-border);
    box-shadow: var(--image-shadow);
    background: var(--image-placeholder-bg);
    margin: 0;
}

.c-imgbox>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--image-object-fit);
    object-position: var(--image-object-position);
}

/* Fit variants */
.c-imgbox--contain>img {
    object-fit: contain;
}

.c-imgbox--cover>img {
    object-fit: cover;
}

/* Soft loading (no fancy effects) */
.c-img--lazy,
.c-imgbox img.c-img--lazy {
    opacity: 0;
    transition: opacity var(--dur-slow) var(--easing-standard);
}

.c-img--lazy.is-loaded,
.c-imgbox img.c-img--lazy.is-loaded {
    opacity: 1;
}

/* Figure & caption */
.c-figure {
    margin: 0;
}

.c-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--image-radius);
}

.c-figcaption {
    color: var(--color-text-muted);
    font-size: var(--font-size-0);
    margin-top: var(--space-2);
}

/* Edge-to-edge option inside containers */
.c-figure--bleed {
    margin-inline: calc(var(--space-4) * -1);
}

/* Background image sections (image as decoration/backdrop) */
.c-bg {
    position: relative;
    background-size: var(--bg-image-size);
    background-position: var(--bg-image-position);
    background-repeat: var(--bg-image-repeat);
    min-height: var(--section-image-min-h);
}

.c-bg--hero {
    min-height: var(--hero-image-min-h);
}

.c-bg__content {
    position: relative;
    z-index: 1;
}

/* Neutral tint for readability on top of photos */
.c-bg--tint::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgb(var(--overlay-rgb) / var(--bg-overlay-opacity));
    pointer-events: none;
}

/* Bottom gradient to lift text */
.c-bg--gradient::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(6rem, 22vh, 14rem);
    z-index: 0;
    background: linear-gradient(to top, rgb(var(--overlay-rgb) / var(--bg-gradient-opacity)), rgb(0 0 0 / 0));
    pointer-events: none;
}

/* Background positioning utilities */
.u-bg-center {
    background-position: center !important;
}

.u-bg-top {
    background-position: top !important;
}

.u-bg-bottom {
    background-position: bottom !important;
}

.u-bg-left {
    background-position: left !important;
}

.u-bg-right {
    background-position: right !important;
}

.u-bg-cover {
    background-size: cover !important;
}

.u-bg-contain {
    background-size: contain !important;
}

.u-bg-no-repeat {
    background-repeat: no-repeat !important;
}

/* Object-fit & position utilities for <img> inside ratio boxes */
.u-object-cover {
    object-fit: cover !important;
}

.u-object-contain {
    object-fit: contain !important;
}

.u-object-top {
    object-position: top !important;
}

.u-object-bottom {
    object-position: bottom !important;
}

.u-object-left {
    object-position: left !important;
}

.u-object-right {
    object-position: right !important;
}

.u-object-center {
    object-position: center !important;
}

/* Aspect-ratio utilities (apply to wrappers like .c-imgbox or any block) */
.u-aspect-1-1 {
    aspect-ratio: var(--ratio-1-1) !important;
}

.u-aspect-4-3 {
    aspect-ratio: var(--ratio-4-3) !important;
}

.u-aspect-3-2 {
    aspect-ratio: var(--ratio-3-2) !important;
}

.u-aspect-16-9 {
    aspect-ratio: var(--ratio-16-9) !important;
}

.u-aspect-21-9 {
    aspect-ratio: var(--ratio-21-9) !important;
}

/* Simple gallery (images can be plain .c-img or .c-imgbox) */
.c-gallery {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.c-gallery img,
.c-gallery .c-imgbox {
    width: 100%;
}

/* Media with overlayed content (image as background but semantic img is allowed inside) */
.c-media-cover {
    position: relative;
    display: grid;
    align-content: end;
    padding: var(--space-6);
    min-height: var(--section-image-min-h);
    border-radius: var(--image-radius);
    overflow: hidden;
    background: var(--image-placeholder-bg);
    box-shadow: var(--image-shadow);
}

.c-media-cover::before {
    /* tint */
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(var(--overlay-rgb) / var(--bg-overlay-opacity));
    z-index: 0;
}

.c-media-cover::after {
    /* bottom gradient */
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: clamp(6rem, 22vh, 14rem);
    background: linear-gradient(to top, rgb(var(--overlay-rgb) / var(--bg-gradient-opacity)), rgb(0 0 0 / 0));
    z-index: 0;
}

.c-media-cover>* {
    position: relative;
    z-index: 1;
}

/* Optional: hard shapes */
.c-img--rounded {
    border-radius: var(--image-radius);
}

.c-img--circle {
    border-radius: 50%;
}

/* Gap-owned containers: neutralize default block margins on children so UA margins (e.g., p/ul) don't compound with `gap`. */
.l-stack>*,
.u-stack>*,
.c-fieldgroup>*,
.l-cluster>*,
.l-switcher>*,
.l-sidebar>*,
.l-split>*,
.l-grid>* {
    margin-block: 0;
}

/* Opt-out: allow a child to keep its own vertical margins when needed */
:where(.allow-block-margins) {
    margin-block: revert;
}