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

/*
 * Light / Dark Theme System V1 — smooths color-token changes when the user
 * actively toggles [data-theme] (assets/js/theme-init.js sets the attribute
 * before first paint; assets/js/main.js flips it on click). Deliberately
 * the lowest possible specificity: any selector with its own transition
 * (`.button`, nav links, cards, etc.) already wins the cascade and keeps
 * its existing hover timing completely untouched — this rule only ever
 * fills in for elements that don't declare one of their own. It never
 * animates on first page load: a CSS transition only plays when a
 * rendered element's computed value changes, and initial paint has
 * nothing to transition from. prefers-reduced-motion is already handled by
 * the sitewide `*, *::before, *::after { transition-duration: 0.01ms
 * !important; }` catch-all further down in assets/css/responsive.css.
 */
*,
*::before,
*::after {
    transition:
        background-color var(--motion-base) var(--motion-ease),
        color var(--motion-base) var(--motion-ease),
        border-color var(--motion-base) var(--motion-ease);
}

html {
    color-scheme: dark;
    font-size: 100%;
    text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
p,
ul,
ol,
address {
    margin: 0;
}

ul[class],
ol[class] {
    padding: 0;
    list-style: none;
}

body {
    min-width: 20rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

main {
    display: block;
}

h1,
h2,
h3 {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-wrap: balance;
}

h1 {
    max-width: 18ch;
    font-size: var(--font-size-3xl);
    letter-spacing: -0.035em;
}

h2 {
    font-size: var(--font-size-2xl);
    letter-spacing: -0.025em;
}

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

p {
    max-width: 68ch;
}

a {
    color: inherit;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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

address {
    font-style: normal;
}

::selection {
    background-color: var(--color-accent);
    color: var(--color-text-on-primary);
}

.container {
    width: min(
        calc(100% - (2 * var(--container-gutter))),
        var(--container-max-width)
    );
    margin-inline: auto;
}

.site-main {
    flex: 1;
    padding-block: var(--section-space);
}

.site-main > p {
    margin-top: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

.button {
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--transition-fast) var(--ease-standard),
        border-color var(--transition-fast) var(--ease-standard),
        color var(--transition-fast) var(--ease-standard),
        transform var(--transition-fast) var(--ease-standard),
        box-shadow var(--transition-fast) var(--ease-standard);
}

.button--primary {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-button);
    color: var(--color-text-on-primary);
}

.button--secondary {
    border-color: var(--color-border-strong);
    background-color: transparent;
    color: var(--color-text);
}

.button:active {
    transform: translateY(1px);
}

.button[aria-disabled="true"],
.button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: calc(var(--z-header) + 1);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--color-accent);
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transform: translateY(calc(-100% - var(--space-6)));
    transition: transform var(--transition-fast) var(--ease-standard);
}

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

.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;
}

:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-focus);
    outline-offset: var(--focus-outline-offset);
}

/*
 * Header / Corporate Navigation V1 — slim utility bar above the sticky main
 * header. Deliberately NOT sticky/fixed: it scrolls away with the page so
 * the sticky .site-header below keeps its existing top:0 offset and no
 * page content, hero spacing or anchor scrolling needs to account for it.
 */
.topbar {
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
}

.topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: var(--space-1);
    column-gap: var(--space-4);
    padding-block: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.topbar__message {
    margin: 0;
}

.topbar__contact-list {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.topbar__contact-link {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast) var(--ease-standard);
}

.topbar__contact-link:hover,
.topbar__contact-link:focus-visible {
    color: var(--color-accent);
}

/* Mobile keeps the short sentence + phone only — email already exists on
   the Contact page and footer; re-shown from 48rem up in responsive.css. */
.topbar__contact-link--email {
    display: none;
}

/*
 * Top Bar Social Links V1. .topbar__right groups the contact links and the
 * social icons so both sit together on the bar's right side, opposite
 * .topbar__message.
 */
.topbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.topbar__social-list {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.topbar__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    margin: calc(var(--space-1) * -1);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    opacity: 0.8;
    transition:
        color var(--transition-fast) var(--ease-standard),
        opacity var(--transition-fast) var(--ease-standard),
        transform var(--transition-fast) var(--ease-standard);
}

.topbar__social-link svg {
    display: block;
    width: 18px;
    height: 18px;
}

.topbar__social-link:hover,
.topbar__social-link:focus-visible {
    color: var(--color-accent);
    opacity: 1;
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .topbar__social-link {
        transition: none;
    }

    .topbar__social-link:hover,
    .topbar__social-link:focus-visible {
        transform: none;
    }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-header-background);
    box-shadow: var(--shadow-header);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}

.site-header__inner {
    min-height: var(--header-height);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-4);
}

.site-brand {
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-text);
    text-decoration: none;
}

/*
 * Header/Footer Logo Scale Fix V1 — height-based scaling only; width is
 * always auto so the real asset's aspect ratio is never distorted.
 * max-width stays a generous safety cap (well above what any of the
 * target heights below actually need at the logo's real 1.4:1 ratio), not
 * a binding constraint. See responsive.css for the 48rem/64rem step-ups.
 */
.site-brand__logo {
    display: block;
    width: auto;
    max-width: 11rem;
    max-height: 2.5rem;
    object-fit: contain;
}

/*
 * Per-theme variants (see includes/header.php) share the base rule above
 * for sizing; only visibility differs. DARK is the unscoped default here
 * too (matches assets/css/variables.css's own dark-is-default convention)
 * so the light-colored "light" variant shows with no [data-theme]
 * attribute at all (the no-JS fallback), and [data-theme="light"] swaps
 * to the dark-colored "dark" variant.
 */
.site-brand__logo--variant-dark {
    display: none;
}

[data-theme="light"] .site-brand__logo--variant-light {
    display: none;
}

[data-theme="light"] .site-brand__logo--variant-dark {
    display: block;
}

.site-brand__fallback {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.035em;
}

.site-navigation-toggle {
    display: none;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    margin-left: auto;
    padding: 0;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-background-secondary);
    color: var(--color-text);
    cursor: pointer;
}

.js .site-navigation-toggle {
    display: grid;
}

.site-navigation-toggle__icon {
    position: relative;
    width: 1.25rem;
    height: 0.875rem;
}

.site-navigation-toggle__icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: var(--radius-pill);
    background-color: currentColor;
    transform-origin: center;
    transition:
        inset var(--transition-fast) var(--ease-standard),
        opacity var(--transition-fast) var(--ease-standard),
        transform var(--transition-fast) var(--ease-standard);
}

.site-navigation-toggle__icon span:nth-child(1) {
    top: 0;
}

.site-navigation-toggle__icon span:nth-child(2) {
    top: calc(50% - 1px);
}

.site-navigation-toggle__icon span:nth-child(3) {
    bottom: 0;
}

.site-navigation-toggle[aria-expanded="true"] .site-navigation-toggle__icon span:nth-child(1) {
    top: calc(50% - 1px);
    transform: rotate(45deg);
}

.site-navigation-toggle[aria-expanded="true"] .site-navigation-toggle__icon span:nth-child(2) {
    opacity: 0;
}

.site-navigation-toggle[aria-expanded="true"] .site-navigation-toggle__icon span:nth-child(3) {
    bottom: calc(50% - 1px);
    transform: rotate(-45deg);
}

.site-navigation {
    width: 100%;
    max-height: calc(100dvh - var(--header-height));
    padding-block: var(--space-4) var(--space-5);
    overflow-y: auto;
    border-top: 1px solid var(--color-border);
    overscroll-behavior: contain;
}

/*
 * Animated mobile-menu open/close. visibility switches after the opacity
 * transition on close (so closed links leave the tab order only once
 * they're no longer visible) and immediately on open — a standard
 * accessible pattern for animating display-none-like show/hide.
 */
.js .site-navigation {
    overflow: hidden;
    max-height: 0;
    padding-block: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        max-height var(--motion-base) var(--motion-ease),
        opacity var(--motion-fast) var(--motion-ease),
        padding-block var(--motion-base) var(--motion-ease),
        visibility 0s linear var(--motion-base);
}

.js .site-navigation.is-open {
    max-height: calc(100dvh - var(--header-height));
    padding-block: var(--space-4) var(--space-5);
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    transition:
        max-height var(--motion-base) var(--motion-ease),
        opacity var(--motion-fast) var(--motion-ease),
        padding-block var(--motion-base) var(--motion-ease),
        visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
    .js .site-navigation {
        transition: none;
    }
}

.site-navigation__list {
    display: grid;
    gap: var(--space-1);
}

.site-navigation__link {
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition:
        background-color var(--transition-fast) var(--ease-standard),
        color var(--transition-fast) var(--ease-standard);
}

.site-navigation__link[aria-current="page"] {
    background-color: var(--color-accent-soft);
    color: var(--color-text);
}

/*
 * Corporate dropdown (Header / Corporate Navigation V1). Mobile-first: below
 * this sits as an inline expand/collapse group inside the vertical mobile
 * list, reusing the same visibility-hidden-when-closed pattern as
 * .js .site-navigation above (so collapsed links leave the tab order).
 * Desktop turns it into a floating panel — see the 64rem override in
 * responsive.css. Both breakpoints are driven by the same
 * [data-dropdown-trigger][aria-expanded] state set by assets/js/main.js.
 */
.site-navigation__item--dropdown {
    display: grid;
}

.site-navigation__dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--touch-target-min);
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.site-navigation__dropdown-trigger.is-active {
    background-color: var(--color-accent-soft);
    color: var(--color-text);
}

.site-navigation__dropdown-icon {
    width: 0.625rem;
    height: 0.625rem;
    flex-shrink: 0;
    transition: transform var(--motion-fast) var(--motion-ease);
}

[data-dropdown-trigger][aria-expanded="true"] .site-navigation__dropdown-icon {
    transform: rotate(180deg);
}

.site-navigation__dropdown-menu {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    overflow: hidden;
    max-height: 0;
    padding-inline-start: var(--space-4);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition:
        max-height var(--motion-base) var(--motion-ease),
        opacity var(--motion-fast) var(--motion-ease),
        visibility 0s linear var(--motion-base);
}

[data-dropdown-trigger][aria-expanded="true"] ~ .site-navigation__dropdown-menu {
    max-height: 12rem;
    opacity: 1;
    visibility: visible;
    transition:
        max-height var(--motion-base) var(--motion-ease),
        opacity var(--motion-fast) var(--motion-ease),
        visibility 0s linear 0s;
}

.site-navigation__dropdown-link {
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition:
        background-color var(--transition-fast) var(--ease-standard),
        color var(--transition-fast) var(--ease-standard);
}

.site-navigation__dropdown-link[aria-current="page"] {
    background-color: var(--color-accent-soft);
    color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
    .site-navigation__dropdown-menu,
    .site-navigation__dropdown-icon {
        transition: none;
        transform: none;
    }
}

.site-navigation__actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/*
 * Three columns only once the theme toggle actually renders (`.js` — see
 * .theme-toggle above). Without JS the toggle stays display:none, so the
 * grid must stay 2 columns or the CTA button would land in an `auto`
 * column instead of the flexible one and lose its full-width fill.
 */
.js .site-navigation__actions {
    grid-template-columns: auto auto minmax(0, 1fr);
}

.language-control {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition:
        background-color var(--transition-fast) var(--ease-standard),
        border-color var(--transition-fast) var(--ease-standard),
        color var(--transition-fast) var(--ease-standard);
}

.language-control[aria-current="page"] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/*
 * Light / Dark Theme System V1 toggle — square icon button matching
 * .language-control's sizing/border language. Hidden until assets/js/
 * main.js confirms JS is available (same `.js`-gated pattern already used
 * for .site-navigation-toggle above): with no JS, assets/js/theme-init.js
 * never runs either, so there is no working toggle to show — the page
 * still renders correctly in the DARK default per :root's unscoped
 * values. Both icons are always in the DOM; only one is ever visible,
 * chosen purely by the [data-theme] attribute so the correct icon shows
 * immediately on first paint with no icon-swap flash.
 */
.theme-toggle {
    display: none;
    width: var(--touch-target-min);
    min-width: var(--touch-target-min);
    height: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: 0;
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--color-text);
    cursor: pointer;
    transition:
        background-color var(--transition-fast) var(--ease-standard),
        border-color var(--transition-fast) var(--ease-standard),
        color var(--transition-fast) var(--ease-standard);
}

.js .theme-toggle {
    display: grid;
}

.theme-toggle__icon {
    width: 1.125rem;
    height: 1.125rem;
}

[data-theme="dark"] .theme-toggle__icon--moon,
[data-theme="light"] .theme-toggle__icon--sun {
    display: none;
}

.site-navigation__cta {
    width: 100%;
}

.site-footer {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
    color: var(--color-text-muted);
}

.site-footer__grid {
    display: grid;
    gap: var(--space-5);
    padding-block: var(--space-8);
    grid-template-areas:
        "brand"
        "nav"
        "contact";
}

.site-footer__brand-col {
    grid-area: brand;
    display: grid;
    gap: var(--space-1);
}

.site-footer__nav {
    grid-area: nav;
}

.site-footer__contact {
    grid-area: contact;
    max-width: 22rem;
}

.site-footer__brand {
    display: inline-flex;
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
    text-decoration: none;
}

/*
 * Header/Footer Logo Scale Fix V1 — real logo, larger than the header
 * treatment since the footer has no navigation row to stay compact
 * against. Height-based scaling only, width always auto — see
 * .site-brand__logo above for the same convention. Text-wordmark fallback
 * (rendered instead of this <img> when no real asset is configured — see
 * includes/footer.php) keeps using .site-footer__brand's own font
 * styling above, unchanged.
 */
.site-footer__brand-logo {
    display: block;
    width: auto;
    max-width: 14rem;
    max-height: 3.5rem;
    object-fit: contain;
}

.site-footer__brand-logo--variant-dark {
    display: none;
}

[data-theme="light"] .site-footer__brand-logo--variant-light {
    display: none;
}

[data-theme="light"] .site-footer__brand-logo--variant-dark {
    display: block;
}

.site-footer__relationship {
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.site-footer__address {
    font-style: normal;
}

.site-footer__contact-list {
    display: grid;
    gap: var(--space-3);
}

.site-footer__contact-list li {
    display: grid;
    gap: 0.15rem;
    font-size: var(--font-size-sm);
}

.site-footer__contact-label {
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-footer__contact-list a {
    width: fit-content;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-standard);
}

.site-footer__heading {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-footer__nav-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1) var(--space-4);
}

.site-footer__nav-list a {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target-min);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-standard);
}

.site-footer__nav-list a[aria-current="page"] {
    color: var(--color-accent);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    padding-block: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
}

.site-footer__bottom p {
    margin: 0;
}

.home-main {
    flex: 1;
}

.home-hero {
    padding-block: var(--space-12) var(--space-10);
    border-bottom: 1px solid var(--color-border);
}

.home-hero__inner {
    display: grid;
    gap: var(--space-8);
}

.home-hero__eyebrow {
    margin-bottom: var(--space-3);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-hero__heading {
    max-width: 24ch;
    margin-bottom: var(--space-5);
}

.home-hero__text {
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.home-hero__visual {
    aspect-ratio: 1 / 1;
    max-width: 24rem;
    margin-inline: auto;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.home-hero__visual-svg {
    width: 100%;
    height: 100%;
}

/*
 * Homepage Hero Media Architecture V1 (+ Viewport/Scroll-Indicator Polish
 * V2, + Embedded Reference Marquee V1) — full-width, near-first-viewport
 * media hero, active only while a hero image exists (see
 * includes/pages/home.php / config/content/site-images.php); the entire
 * split-column .home-hero__inner/.home-hero__visual structure above is
 * the fallback and stays completely untouched when the image is missing.
 *
 * Layering:
 *   .home-hero__media (z-index 1, position:absolute, inset:0) ->
 *   .home-hero__overlay (z-index 2, same) ->
 *   .home-hero__content (z-index 3) -> .home-hero__scroll (z-index 4) ->
 *   .home-hero__references (z-index 4).
 * The section itself is a column flexbox; .home-hero__content, the
 * scroll indicator and .home-hero__references are all NORMAL FLEX ITEMS
 * (not absolutely positioned) stacked in that DOM order — only
 * media/overlay are absolutely positioned behind them. .home-hero__content
 * is flex:1 (with its own internal align-items:center) so it fills
 * whatever vertical space is left above the scroll indicator + reference
 * band, keeping the copy roughly centered in the remaining space while
 * the reference band naturally sits pinned at the very bottom — the
 * section can still grow taller than min-height if any of these three
 * need more room than the viewport-driven height provides, so nothing
 * is ever clipped. .home-hero__content reuses .container for its width/
 * position (auto margins), so its left edge lines up with every other
 * section's content — "the site's normal gutter" — while .home-hero__copy
 * (a plain child, not .container) caps the actual text measure at
 * desktop only (see responsive.css).
 *
 * min-height uses --combined-header-height (assets/css/variables.css) —
 * the real topbar + main header height added together — so the hero
 * fills exactly the first viewport below them, not 100svh outright.
 */
.home-hero--media {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-block: 0;
    min-height: calc(100svh - var(--combined-header-height));
}

.home-hero__media {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/*
 * Shared selector so a future <video autoplay muted loop playsinline
 * preload="metadata" poster="..."> can replace the <img> here with zero
 * CSS changes — position/object-fit/object-position all come from this
 * one rule for either element. No video today; see the task brief.
 */
.home-hero__media > img,
.home-hero__media > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 75% center;
}

/*
 * Theme-Specific Homepage Hero V1 — only rendered when BOTH dark/light
 * files exist (see includes/pages/home.php); otherwise a single plain
 * <img> matches the shared ".home-hero__media > img" rule above and
 * these never apply. DARK is the unscoped default here too (matches
 * assets/css/variables.css's own dark-is-default convention, and
 * includes/header.php's identical --variant-light/--variant-dark
 * pattern for the logo), so the dark file shows with no [data-theme]
 * attribute at all. Compound class selectors (not a single class) are
 * used so these reliably beat the shared "> img" rule's specificity
 * regardless of source order.
 */
.home-hero__media-image.home-hero__media-image--light {
    display: none;
}

[data-theme="light"] .home-hero__media-image.home-hero__media-image--dark {
    display: none;
}

[data-theme="light"] .home-hero__media-image.home-hero__media-image--light {
    display: block;
}

/*
 * Site-Wide Static/Editorial Dark + Light Image Variants V1 — the
 * generalized version of the .home-hero__media-image--* rules above, for
 * every OTHER static editorial slot (home-about, about-main,
 * about-operations, sustainability-operations, solutions-main — see
 * config/content/site-images.php's render_theme_image()). One shared
 * rule set here covers all of them: each slot's own container class
 * (e.g. .about-editorial__visual img) still supplies its
 * sizing/object-fit; these classes only ever control which of the two
 * stacked <img> elements is visible. Only rendered when BOTH dark/light
 * files exist for a given slot — a single-variant or missing slot uses
 * its normal single <img>/fallback path and never carries these classes.
 * Same DARK-is-default convention and same "compound class beats a
 * container's own descendant selector" reasoning as the hero rules above.
 */
.theme-image.theme-image--light {
    display: none;
}

[data-theme="light"] .theme-image.theme-image--dark {
    display: none;
}

[data-theme="light"] .theme-image.theme-image--light {
    display: block;
}

.home-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(7, 17, 31, 0.92) 0%,
        rgba(7, 17, 31, 0.74) 38%,
        rgba(7, 17, 31, 0.30) 68%,
        rgba(7, 17, 31, 0.14) 100%
    );
}

.home-hero--media .home-hero__content {
    position: relative;
    z-index: 3;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    padding-bottom: var(--space-12);
    /*
     * Hero Alignment Polish V1 — an EXTRA inset on top of .container's own
     * gutter (never double-applied: this is additive padding inside the
     * already-positioned container box, border-box sizing keeps the box's
     * own edges exactly where .container put them). Zero on mobile per
     * the task brief — normal container gutter only; see responsive.css
     * for the tablet/desktop step-ups.
     */
    padding-inline-start: 0;
}

.home-hero__copy {
    text-align: left;
}

/*
 * The hero's image + gradient stay visually dark regardless of site theme
 * (see --home-hero-media-* tokens in variables.css, deliberately NOT
 * overridden under [data-theme="light"] — same convention as
 * --color-scrim/--color-media-overlay), so the copy sitting on top must
 * use fixed, always-legible colors here instead of the normal
 * theme-reactive --color-text/--color-accent tokens.
 */
.home-hero--media .home-hero__eyebrow {
    color: var(--home-hero-media-accent);
}

.home-hero--media .home-hero__heading {
    color: var(--home-hero-media-text);
}

.home-hero--media .home-hero__text {
    color: var(--home-hero-media-text-muted);
}

.home-hero--media .home-hero__actions .button--secondary {
    border-color: var(--home-hero-media-border);
    color: var(--home-hero-media-text);
}

/*
 * Scroll Indicator V1 — a real, focusable anchor (never a decorative
 * div), sitting above media/overlay/content. Sized to
 * --touch-target-min for a real tap target even though the icon itself
 * is small. Keyboard focus uses the sitewide :focus-visible rule above —
 * no custom outline needed here.
 *
 * Embedded Reference Marquee V1 — now a normal flex item (sibling of
 * .home-hero__content and .home-hero__references, in that DOM order)
 * instead of being absolutely pinned to the section's own bottom edge,
 * since the reference band now occupies that space. align-self:center
 * keeps it horizontally centered without affecting its siblings; it
 * naturally lands in the gap between the copy and the reference band,
 * never overlapping either.
 */
.home-hero__scroll {
    position: relative;
    z-index: 4;
    align-self: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    margin-block: var(--space-2);
    border-radius: var(--radius-pill);
    color: var(--home-hero-media-text);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-standard);
}

.home-hero__scroll:hover,
.home-hero__scroll:focus-visible {
    color: var(--home-hero-media-accent);
}

.home-hero__scroll-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    animation: home-hero-scroll-hint 1.8s ease-in-out infinite;
}

.home-hero__scroll-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/*
 * Subtle "chevron nudges down and fades" loop — never a large bounce.
 * Disabled under reduced motion below; the indicator itself stays
 * visible and clickable either way.
 */
@keyframes home-hero-scroll-hint {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.55;
    }

    50% {
        transform: translateY(6px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero__scroll-icon {
        animation: none;
    }
}

/*
 * Embedded Reference Marquee V1 — the reference logo carousel moved
 * inside the hero (see includes/pages/home.php), replacing the old
 * standalone .home-references section. Kept deliberately restrained: a
 * thin top border + a translucent dark glass tint (never opaque) so the
 * hero image keeps reading through behind it, no large heading — just
 * the small label reusing the section's own already-approved eyebrow
 * copy ("REFERANSLAR"/"REFERENCES" — see config/content/home.php's
 * home['references']['eyebrow'], the heading/text fields it used to
 * carry are gone since nothing renders them any more) — then straight
 * into the existing, UNCHANGED .reference-marquee/.reference-logo
 * markup and engine (continuous scroll, decorative duplicate group,
 * hover-pause, reduced-motion static fallback — all untouched, see
 * their own rules below/above). Reference tiles here get their own
 * color override just below since the hero stays visually dark in both
 * themes — the tiles' normal --color-surface/--color-border tokens
 * would invert to near-white in light mode and look out of place here.
 */
.home-hero__references {
    position: relative;
    z-index: 4;
    padding-block: var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--home-hero-media-border);
    background-color: rgba(7, 17, 31, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.home-hero__references-label {
    margin: 0;
    padding-inline: var(--container-gutter);
    color: var(--home-hero-media-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.home-hero__references .reference-marquee {
    margin-top: var(--space-2);
}

.home-hero__references .reference-logo {
    border-color: var(--home-hero-media-border);
    background-color: rgba(245, 249, 255, 0.08);
}

.home-hero__references .reference-logo__fallback {
    color: var(--home-hero-media-text-muted);
}

.home-capabilities {
    padding-block: var(--space-8);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
}

/*
 * Scroll Indicator V1 target (#home-next-section, see
 * includes/pages/home.php .home-hero__scroll) — offsets the native anchor
 * jump by the sticky main header's height so the header (which stays
 * pinned at top:0 once scrolled) doesn't cover this section's own
 * heading; the topbar isn't sticky, so it's excluded from this offset.
 */
#home-next-section {
    scroll-margin-top: var(--header-height);
}

.home-capabilities__list {
    display: grid;
    gap: var(--space-5);
}

.home-capabilities__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-block: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.home-capabilities__item:first-child {
    border-top: 0;
    padding-top: 0;
}

.home-capabilities__marker {
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.home-capabilities__label {
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.home-section {
    padding-block: var(--section-space);
}

.home-section__label {
    margin-bottom: var(--space-3);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-section__heading {
    max-width: 28ch;
}

.home-about__content {
    max-width: var(--content-max-width);
}

.home-about__paragraph {
    margin-top: var(--space-4);
    color: var(--color-text-muted);
}

.home-about__content .button {
    margin-top: var(--space-6);
}

.home-about__visual {
    display: none;
}

/*
 * Site-Wide Real Image Slot Rollout V1 — when a real home-about photo is
 * configured (see includes/pages/home.php / config/content/site-images.php),
 * it must stack cleanly above/below the copy on mobile instead of staying
 * hidden like the text-mark fallback above. Desktop sizing/positioning is
 * handled by the .home-about__grid/.home-about__visual overrides in
 * responsive.css, same as the text-mark state.
 */
.home-about__visual--photo {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.home-about__visual--photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-products {
    background-color: var(--color-background-secondary);
}

/*
 * Homepage Product Card Grid V1 — replaces the old thin row-list with a
 * visual card grid (see includes/pages/home.php); 5 cards at 3 columns
 * naturally wrap to a 3-then-2 layout at desktop with no spanning hack
 * needed. Card chrome (border/radius/surface/hover lift) deliberately
 * mirrors .project-card's own treatment for visual-language consistency
 * — see that class for the reference implementation.
 */
.home-products__grid {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.home-product-card {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    overflow: hidden;
    transition:
        border-color var(--transition-normal) var(--ease-standard),
        transform var(--transition-normal) var(--ease-standard);
}

.home-product-card__link {
    display: flex;
    height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

/* Native :focus-visible already outlines the full card (the link's box IS
   the card's box); this adds the same branded accent used on hover. */
.home-product-card:has(.home-product-card__link:focus-visible) {
    border-color: var(--color-accent);
}

.home-product-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-background);
}

.home-product-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal) var(--ease-standard);
}

.home-product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-5);
}

.home-product-card__name {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
}

/*
 * Text Length Control — reuses each product's already-approved one-line
 * positioning tagline (products_content()'s 'position' field) as the
 * description, so every card is naturally similar in length already;
 * the line-clamp is a safety net, not the primary control.
 */
.home-product-card__description {
    flex: 1;
    margin-bottom: var(--space-4);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.home-product-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.home-product-card__arrow {
    transition: transform var(--transition-fast) var(--ease-standard);
}

.home-projects__text {
    margin-top: var(--space-3);
    max-width: var(--content-max-width);
    color: var(--color-text-muted);
}

/*
 * Homepage Project Card Grid + Quick-View Modal V1 — replaces the old
 * text-only tile grid with compact visual cards that open the exact same
 * shared quick-view modal the Projects page uses (see
 * includes/pages/home.php and includes/components/project-quick-view-
 * modal.php). .project-card__visual and .project-card__hitarea are the
 * SAME classes assets/js/main.js already queries for the Projects page's
 * own cards — reusing them here is what lets that script drive these
 * cards too with zero JS changes; .home-project-card only supplies this
 * section's own compact chrome (border/radius/surface, smaller body,
 * 16:9 thumbnail instead of the Projects page's wider 2:1/3:1) around
 * those shared parts.
 */
.home-projects__grid {
    display: grid;
    gap: var(--space-5);
    margin-block: var(--space-8);
}

.home-project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    overflow: hidden;
    transition:
        border-color var(--transition-normal) var(--ease-standard),
        transform var(--transition-normal) var(--ease-standard);
}

/* Native :focus-visible already outlines the full card (the hitarea
   button's box IS the card's box); this adds the same branded accent
   used on hover — same pattern as .project-card's own equivalent rule. */
.home-project-card:has(.project-card__hitarea:focus-visible) {
    border-color: var(--color-accent);
}

.home-project-card .project-card__visual {
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--color-border);
}

.home-project-card .project-card__visual img,
.home-project-card .project-card__visual svg {
    transition: transform var(--transition-normal) var(--ease-standard);
}

.home-project-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-4);
}

.home-project-card__name {
    margin-bottom: var(--space-1);
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
}

.home-project-card__summary {
    margin-bottom: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.home-project-card__arrow {
    align-self: flex-end;
    margin-top: auto;
    padding-top: var(--space-2);
    color: var(--color-border-strong);
    font-size: var(--font-size-lg);
    transition:
        color var(--transition-fast) var(--ease-standard),
        transform var(--transition-fast) var(--ease-standard);
}

/*
 * Homepage Reference Logo Carousel V1 (see includes/pages/home.php,
 * now embedded inside .home-hero__references — see that class's own doc
 * comment above for the Embedded Reference Marquee V1 change). A
 * continuous CSS-only marquee — no JS animation loop, no third-party
 * carousel library. The track holds the same reference list twice back to
 * back (group A real + accessible, group B aria-hidden="true" and purely
 * decorative — see home_render_reference_group()); animating exactly
 * -50% of the track's width makes group B seamlessly take group A's
 * starting position, so the loop never visibly resets. Entrance uses the
 * same subtle .reveal as every other section; the marquee's own
 * continuous motion is the "strong" movement here, so nothing else in
 * this section should animate aggressively alongside it.
 */
.reference-marquee {
    margin-top: var(--space-8);
}

.reference-marquee__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}

.reference-marquee__track {
    display: flex;
    width: max-content;
}

.reference-marquee__group {
    display: flex;
    flex-shrink: 0;
    gap: var(--space-3);
    padding-inline-end: var(--space-3);
}

/* Mobile-first: a smaller, tighter tile by default (see responsive.css for
   the 180-220px desktop size this scales up to). */
.reference-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 9rem;
    height: 4.5rem;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}

.reference-logo__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.reference-logo__fallback {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
    text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
    /* Mobile-first: a slower, touch-safe cycle by default — see
       responsive.css for the shorter desktop duration (content is wider
       there, so the same visual speed needs less time per cycle). */
    .reference-marquee__track {
        animation: reference-marquee-scroll 40s linear infinite;
    }

    /* Non-interactive per V1 (no approved per-logo destination — see the
       task brief), but focus-within is included defensively in case a
       future logo becomes a real link; harmless no-op until then. */
    .reference-marquee__viewport:hover .reference-marquee__track,
    .reference-marquee__viewport:focus-within .reference-marquee__track {
        animation-play-state: paused;
    }
}

@keyframes reference-marquee-scroll {
    to {
        transform: translateX(-50%);
    }
}

/*
 * prefers-reduced-motion: reduce — never hide the references, show them as
 * a static wrapping list instead (see the task brief). The decorative
 * duplicate group is unnecessary once nothing is scrolling, so it is
 * dropped entirely rather than left to wrap alongside the real one.
 */
@media (prefers-reduced-motion: reduce) {
    .reference-marquee__viewport {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .reference-marquee__track {
        flex-wrap: wrap;
        width: auto;
    }

    .reference-marquee__group[aria-hidden="true"] {
        display: none;
    }
}

.home-faq {
    padding-block: clamp(3rem, 6vw, 5rem);
    background-color: var(--color-background-secondary);
}

.home-faq__container {
    max-width: 50rem;
}

.home-faq__list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.home-faq__item {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.home-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    list-style: none;
    cursor: pointer;
}

.home-faq__question::-webkit-details-marker {
    display: none;
}

.home-faq__question::after {
    content: "+";
    flex-shrink: 0;
    color: var(--color-accent);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    transition: transform var(--transition-fast) var(--ease-standard);
}

.home-faq__item[open] .home-faq__question::after {
    transform: rotate(45deg);
}

.home-faq__answer {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
}

.home-final-cta {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.home-final-cta__inner {
    max-width: 64rem;
    margin-inline: auto;
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-elevated);
}

.home-final-cta__text {
    max-width: 34rem;
    margin-top: var(--space-3);
    color: var(--color-text-muted);
}

.home-final-cta__button {
    width: 100%;
    margin-top: var(--space-6);
}

/*
 * Restrained internal-page hero. Deliberately smaller than the homepage
 * hero (.home-hero): single CTA, no two-column visual, reduced heading size.
 */
.page-hero {
    padding-block: var(--space-10) var(--space-8);
    border-bottom: 1px solid var(--color-border);
}

.page-hero__eyebrow {
    margin-bottom: var(--space-3);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-hero__heading {
    max-width: 22ch;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-2xl);
}

.page-hero__text {
    max-width: var(--content-max-width);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

.page-hero__cta {
    margin-top: var(--space-6);
}

/*
 * Admin + Blog System V1 — public blog listing/detail. Mobile-first single
 * column; 2/3-column overrides live in responsive.css alongside the rest
 * of the breakpoint system.
 */
.blog-empty {
    padding: var(--space-10) 0;
    color: var(--color-text-muted);
    text-align: center;
}

.projects-empty {
    padding: var(--space-10) 0;
    margin-top: var(--space-8);
    color: var(--color-text-muted);
    text-align: center;
}

.blog-grid {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.blog-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    overflow: hidden;
    transition:
        border-color var(--transition-normal) var(--ease-standard),
        transform var(--transition-normal) var(--ease-standard);
}

.blog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.blog-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-background-secondary);
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal) var(--ease-standard);
}

.blog-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
}

.blog-card__badge {
    align-self: flex-start;
    padding: 0.2em 0.65em;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.blog-card__badge--news {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
}

.blog-card__title {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.blog-card__excerpt {
    flex: 1;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.blog-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.blog-card__cta {
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
}

.blog-card__fallback-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/*
 * Homepage "latest" preview (see includes/pages/home.php). Reuses
 * .blog-grid/.blog-card as-is — same card design, same 1/2/3-column
 * breakpoints — only the section intro/CTA header here is new.
 */
.home-latest__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
}

.home-latest__intro {
    max-width: 40rem;
}

.home-latest__text {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
}

.home-latest__cta {
    flex-shrink: 0;
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.home-latest__cta:hover,
.home-latest__cta:focus-visible {
    text-decoration: underline;
}

/*
 * Blog Detail V2 — editorial layout. Two shell widths deliberately kept
 * distinct (see the task brief): .blog-detail__shell (~1100px) for the
 * intro and for media/gallery, which benefit from the wider stage, and
 * the narrower .blog-detail__text-column (~780px) nested inside it just
 * for the prose itself, so body copy keeps a readable line length instead
 * of stretching edge-to-edge. Reuses .product-media__image/__image-frame/
 * __video-trigger etc. (assets/css/global.css's product-media block) as-is
 * for gallery/video card styling — only the frame needed a button reset
 * (below) since a gallery image is now a clickable trigger, not a static
 * <span>.
 */
.blog-detail__shell {
    max-width: 68.75rem;
    margin-inline: auto;
}

.blog-detail__media-shell {
    max-width: 71.875rem;
    margin-inline: auto;
}

.blog-detail__header {
    padding-block: var(--space-10) var(--space-8);
    border-bottom: 1px solid var(--color-border);
}

.blog-detail__date {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.blog-detail__title {
    max-width: 30ch;
    margin-bottom: var(--space-4);
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
}

.blog-detail__excerpt {
    max-width: var(--content-max-width);
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

.blog-detail__media {
    margin-top: var(--space-8);
}

.blog-detail__media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.blog-detail__text-column {
    max-width: 48.75rem;
    margin-inline: auto;
}

.blog-detail__prose p {
    margin: 0 0 var(--space-5);
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: 1.75;
}

.blog-detail__prose p:last-child {
    margin-bottom: 0;
}

.blog-detail__prose a {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
}

.blog-detail__prose strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.blog-detail__gallery-section {
    margin-top: var(--space-12);
    padding-top: var(--space-10);
    border-top: 1px solid var(--color-border);
}

.blog-gallery,
.blog-videos {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.blog-gallery + .blog-videos {
    margin-top: var(--space-8);
}

/*
 * .product-media__image-frame is normally a plain <span> (see the product
 * media showcase above); the blog gallery renders it as a real <button>
 * instead so each thumbnail is a focusable, clickable lightbox trigger —
 * this resets only the button-specific defaults, everything else
 * (aspect-ratio, image sizing, the corner accent) is inherited unchanged.
 */
button.product-media__image-frame {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.blog-detail__back {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.blog-detail__back a {
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.blog-detail__back a:hover,
.blog-detail__back a:focus-visible {
    text-decoration: underline;
}

/*
 * Single shared image lightbox (see assets/js/main.js's gallery-lightbox
 * IIFE) — mirrors .video-modal's structure/behavior exactly: fixed
 * overlay, [hidden] to fully remove it, a scrim backdrop, Escape/backdrop/
 * close-button dismissal, body scroll lock while open.
 */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-header) + 10);
    display: grid;
    padding: var(--space-4);
    place-items: center;
}

.gallery-lightbox[hidden] {
    display: none;
}

.gallery-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--color-scrim);
}

.gallery-lightbox__dialog {
    position: relative;
    width: 100%;
    max-width: 56rem;
}

.gallery-lightbox__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 1;
    display: grid;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    place-items: center;
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-media-overlay-strong);
    color: var(--color-text);
    cursor: pointer;
    transition:
        border-color var(--transition-fast) var(--ease-standard),
        color var(--transition-fast) var(--ease-standard);
}

.gallery-lightbox__image {
    display: block;
    width: 100%;
    max-height: 80vh;
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-background);
    object-fit: contain;
}

.gallery-lightbox__caption {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-top: 0;
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.gallery-lightbox__caption[hidden] {
    display: none;
}

body.gallery-lightbox-open {
    overflow: hidden;
}

/*
 * Editorial product-story sections. Alternating desktop layout is applied
 * via .product-story--reverse (CSS `order` only — DOM order always stays
 * text-then-visual so mobile reading order and screen readers are
 * unaffected by the visual swap).
 */
.product-story {
    padding-block: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.product-story:first-of-type {
    border-top: 0;
}

.product-story:nth-of-type(even) {
    background-color: var(--color-background-secondary);
}

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

.product-story__index {
    color: var(--color-border-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.product-story__name {
    margin-top: var(--space-2);
    font-size: var(--font-size-xl);
}

.product-story__position {
    margin-top: var(--space-2);
    color: var(--color-accent);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.product-story__capabilities {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.product-story__capabilities li {
    position: relative;
    padding-left: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.product-story__capabilities li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.3rem;
    height: 0.3rem;
    background-color: var(--color-accent);
}

.product-story__action {
    margin-top: var(--space-5);
}

.product-story__visual {
    aspect-ratio: 4 / 3;
    max-height: 12rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.product-story__visual-svg {
    width: 100%;
    height: 100%;
}

/*
 * Reusable product-detail template sections (see
 * includes/pages/product-detail.php). Shared by every AREaiONX product
 * detail page as each is migrated, not only CORE.
 */
.breadcrumb {
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: 0.02em;
}

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

.breadcrumb__list li:not(:last-child)::after {
    content: "/";
    color: var(--color-border-strong);
}

.breadcrumb__list a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-standard);
}

.breadcrumb__list [aria-current="page"] {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    opacity: 0.8;
}

.product-detail-hero {
    padding-block: var(--space-8) var(--space-8);
    border-bottom: 1px solid var(--color-border);
}

.product-detail-hero__inner {
    display: grid;
    gap: var(--space-8);
}

/*
 * Certificates Page V1 hero has no visual (see includes/pages/certificates.php)
 * — this modifier keeps .product-detail-hero__content at full width instead
 * of leaving an empty second grid column at the two-column breakpoint (see
 * responsive.css).
 */
.product-detail-hero__inner--text-only .product-detail-hero__content {
    max-width: var(--content-max-width);
}

.product-detail-hero__eyebrow {
    margin-bottom: var(--space-3);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-detail-hero__heading {
    max-width: 20ch;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-2xl);
}

.product-detail-hero__text {
    max-width: var(--content-max-width);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

.product-detail-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.product-detail-hero__visual {
    width: 100%;
    max-width: 26rem;
    height: clamp(220px, 45vw, 280px);
    margin-inline: auto;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}

.product-detail-hero__visual-svg {
    width: 100%;
    height: 100%;
}

.product-detail-summary {
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
}

.product-detail-summary__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.product-summary-card {
    position: relative;
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
}

.product-summary-card__index {
    color: var(--color-accent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.product-summary-card__value {
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
}

.product-summary-card__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-detail-overview {
    padding-block: var(--section-space);
}

.product-detail-overview__heading {
    max-width: 28ch;
}

.product-detail-overview__content {
    display: grid;
    max-width: var(--content-max-width);
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.product-detail-overview__content p {
    color: var(--color-text-muted);
}

.product-detail-modules {
    padding-block: var(--section-space);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
}

.product-detail-modules__heading {
    max-width: 28ch;
}

.product-detail-modules__list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

/*
 * Optional category grouping for products with more modules than fit in
 * one undifferentiated list (see includes/pages/product-detail.php). CORE
 * uses the flat .product-detail-modules__list above unchanged; a product
 * whose data supplies 'modules.categories' gets this wrapper instead, each
 * category holding its own instance of the same card list/grid.
 */
.product-detail-modules__categories {
    margin-top: var(--space-8);
}

.product-detail-modules__category + .product-detail-modules__category {
    margin-top: var(--space-10);
}

.product-detail-modules__category-heading {
    margin-bottom: var(--space-5);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-detail-modules__category .product-detail-modules__list {
    margin-top: 0;
}

.product-module-card {
    position: relative;
    overflow: hidden;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    transition:
        transform var(--transition-normal) var(--ease-standard),
        border-color var(--transition-normal) var(--ease-standard),
        box-shadow var(--transition-normal) var(--ease-standard);
}

.product-module-card__index {
    display: block;
    margin-bottom: var(--space-3);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    transition: color var(--transition-normal) var(--ease-standard);
}

.product-module-card__name {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.product-module-card__description {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.product-module-card__corner {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-right: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border-strong);
    transition:
        width var(--transition-normal) var(--ease-standard),
        height var(--transition-normal) var(--ease-standard),
        border-color var(--transition-normal) var(--ease-standard);
}

.product-detail-audience {
    padding-block: var(--section-space);
    border-top: 1px solid var(--color-border);
}

.product-detail-audience__heading {
    max-width: 28ch;
}

.product-detail-audience__list,
.product-detail-features__list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/*
 * .product-feature-card shares this exact visual system (see
 * includes/pages/product-detail.php: aiWeigh's Key Features section reuses
 * the same index/name/marker sub-classes as the audience cards below) —
 * one card recipe, two semantic names for two different sections.
 */
.product-audience-card,
.product-feature-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    transition:
        border-color var(--transition-fast) var(--ease-standard),
        background-color var(--transition-fast) var(--ease-standard);
}

.product-audience-card__index {
    color: var(--color-accent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.product-audience-card__name {
    flex: 1;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.product-audience-card__marker {
    flex-shrink: 0;
    color: var(--color-border-strong);
    font-size: var(--font-size-lg);
    transition: color var(--transition-fast) var(--ease-standard);
}

/*
 * Optional compact index/name/marker list for products with a set of short
 * highlights that don't need full descriptions (see
 * includes/pages/product-detail.php — currently used by aiWeigh's Key
 * Features). Renders nothing for products that don't supply
 * 'key_features'. Card visuals are shared with .product-audience-card
 * above.
 */
.product-detail-features {
    padding-block: var(--section-space);
    border-top: 1px solid var(--color-border);
}

.product-detail-features__heading {
    max-width: 28ch;
}

/*
 * Optional restrained editorial benefits list (see
 * includes/pages/product-detail.php — currently used by aiWeigh's
 * Advantages section). Deliberately plain text rows, not cards — this
 * section is meant to read as conservative, qualitative benefit
 * statements rather than technical specifications. Renders nothing for
 * products that don't supply 'advantages'.
 */
.product-detail-advantages {
    padding-block: var(--section-space);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
}

.product-detail-advantages__heading {
    max-width: 28ch;
}

.product-detail-advantages__list {
    display: grid;
    max-width: var(--content-max-width);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.product-detail-advantages__item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    color: var(--color-text-muted);
}

.product-detail-advantages__marker {
    flex-shrink: 0;
    width: 0.35rem;
    height: 0.35rem;
    margin-top: 0.55em;
    background-color: var(--color-accent);
}

/*
 * Reusable product-media showcase (see includes/pages/product-detail.php).
 * Shared by every AREaiONX product detail page once each supplies real
 * video/image data — see /docs/CONTENT-RULES.md. Renders nothing when a
 * product has no approved media yet.
 */
.product-media {
    padding-block: var(--section-space);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
}

.product-media__heading {
    max-width: 28ch;
}

.product-media__description {
    max-width: var(--content-max-width);
    margin-top: var(--space-4);
    color: var(--color-text-muted);
}

.product-media__video-card {
    margin-top: var(--space-8);
}

.product-media__video-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-normal) var(--ease-standard);
}

.product-media__video-frame {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-background);
}

.product-media__video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-media__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 4rem;
    height: 4rem;
    transform: translate(-50%, -50%);
    place-items: center;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    background-color: var(--color-media-overlay);
    color: var(--color-accent);
    transition:
        background-color var(--transition-normal) var(--ease-standard),
        transform var(--transition-normal) var(--ease-standard);
}

.product-media__video-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
}

.product-media__video-title {
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.product-media__video-cta {
    flex-shrink: 0;
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.product-media__gallery {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.product-media__image {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: border-color var(--transition-normal) var(--ease-standard);
}

.product-media__image-frame {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.product-media__image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal) var(--ease-standard);
}

.product-media__image-corner {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-right: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border-strong);
    pointer-events: none;
}

.product-media__image-title {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.video-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-header) + 10);
    display: grid;
    padding: var(--space-4);
    place-items: center;
}

.video-modal[hidden] {
    display: none;
}

.video-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--color-scrim);
}

.video-modal__dialog {
    position: relative;
    width: 100%;
}

.video-modal__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 1;
    display: grid;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    place-items: center;
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-media-overlay-strong);
    color: var(--color-text);
    cursor: pointer;
    transition:
        border-color var(--transition-fast) var(--ease-standard),
        color var(--transition-fast) var(--ease-standard);
}

.video-modal__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-background);
}

.video-modal__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

body.video-modal-open {
    overflow: hidden;
}

/*
 * Projects Listing V1 (see includes/pages/projects.php). Reuses
 * .product-detail-hero and .home-final-cta from the shared family system;
 * only the showcase grid and diversity strip below are new.
 */
.projects-showcase {
    border-top: 1px solid var(--color-border);
}

.projects-grid {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    transition:
        border-color var(--transition-normal) var(--ease-standard),
        transform var(--transition-normal) var(--ease-standard);
}

.project-card__visual {
    position: relative;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-background);
}

.project-card--feature .project-card__visual {
    aspect-ratio: 3 / 1;
}

.project-card__visual svg,
.project-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-card__corner {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-right: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border-strong);
    pointer-events: none;
    transition:
        width var(--transition-normal) var(--ease-standard),
        height var(--transition-normal) var(--ease-standard),
        border-color var(--transition-normal) var(--ease-standard);
}

.project-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-5);
}

.project-card__index {
    margin-bottom: var(--space-2);
    color: var(--color-accent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.project-card__client {
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.project-card__title {
    margin-bottom: var(--space-4);
    font-size: var(--font-size-base);
}

.project-card--feature .project-card__title {
    font-size: var(--font-size-xl);
}

.project-card__summary {
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.project-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
}

.project-card__tag {
    padding: 0.2rem var(--space-3);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    transition:
        color var(--transition-fast) var(--ease-standard),
        border-color var(--transition-fast) var(--ease-standard);
}

/*
 * Full-card quick-view hit-area. A single transparent button, sized to the
 * entire card via inset:0 and placed last in the DOM so it paints above the
 * card's own display-only content, opens the shared #project-modal (see
 * includes/pages/projects.php) from a click/tap/Enter/Space ANYWHERE on the
 * card — not just a small text trigger. .project-card keeps position:
 * relative (set above) so inset:0 resolves against the card's own box.
 * Decorative children (.project-card__corner) already have
 * pointer-events: none and never compete with this button for clicks.
 */
.project-card__hitarea {
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* Native :focus-visible already outlines the full card (the button's box
   IS the card's box); this adds the same branded accent used on hover. */
.project-card:has(.project-card__hitarea:focus-visible) {
    border-color: var(--color-accent);
}

/*
 * Project quick-view modal: one shared instance populated dynamically from
 * the JSON data block rendered alongside the grid, plus the triggering
 * card's own .project-card__visual (cloned, not re-rendered — see
 * assets/js/main.js) so the abstract SVG/future image is never duplicated.
 */
.project-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-header) + 10);
    display: grid;
    place-items: center;
    padding: 10px;
}

.project-modal[hidden] {
    display: none;
}

.project-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--color-scrim);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.project-modal__dialog {
    position: relative;
    display: grid;
    width: 100%;
    max-height: 90dvh;
    grid-template-columns: 1fr;
    grid-template-areas:
        "index"
        "client"
        "title"
        "summary"
        "visual"
        "details"
        "tags";
    gap: var(--space-3);
    overflow-y: auto;
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-surface);
}

.project-modal__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 1;
    display: grid;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    place-items: center;
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-surface-elevated);
    color: var(--color-text);
    cursor: pointer;
    transition:
        border-color var(--transition-fast) var(--ease-standard),
        color var(--transition-fast) var(--ease-standard);
}

.project-modal__index {
    grid-area: index;
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.project-modal__client {
    grid-area: client;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.project-modal__title {
    grid-area: title;
    max-width: none;
    padding-right: var(--space-8);
    font-size: var(--font-size-xl);
}

.project-modal__summary {
    grid-area: summary;
    max-width: none;
    color: var(--color-text-muted);
}

.project-modal__visual {
    grid-area: visual;
}

.project-modal__visual .project-card__visual {
    aspect-ratio: 4 / 3;
}

.project-modal__details {
    grid-area: details;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.project-modal__details-text {
    max-width: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.project-modal__details-list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.project-modal__details-list li {
    position: relative;
    padding-left: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.project-modal__details-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.3rem;
    height: 0.3rem;
    background-color: var(--color-accent);
}

.project-modal__tags {
    grid-area: tags;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.project-modal__tag {
    padding: 0.2rem var(--space-3);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
}

body.project-modal-open {
    overflow: hidden;
}

.js .project-modal__dialog {
    opacity: 0;
    transform: scale(0.97) translateY(10px);
    transition:
        opacity var(--motion-base) var(--motion-ease),
        transform var(--motion-base) var(--motion-ease);
}

.js .project-modal:not([hidden]) .project-modal__dialog {
    opacity: 1;
    transform: none;
}

.js .project-modal__backdrop {
    opacity: 0;
    transition: opacity var(--motion-base) var(--motion-ease);
}

.js .project-modal:not([hidden]) .project-modal__backdrop {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .js .project-modal__dialog,
    .js .project-modal__backdrop {
        transition: none;
        transform: none;
    }
}

.diversity-strip {
    padding-block: var(--section-space);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
}

.diversity-strip__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.diversity-strip__chip {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/*
 * Global Motion System V1 — standardized reveal/stagger/ambient
 * architecture. Extends the original single reveal utility with direction
 * variants and a centralized, CSS-variable-driven stagger delay; still one
 * IntersectionObserver-based engine (see assets/js/main.js), not a second
 * animation system. Content is always fully visible without JavaScript or
 * with prefers-reduced-motion — see the guards below.
 *
 * Usage: add `.reveal` (default: fades up from --motion-distance-md) plus
 * an optional direction modifier (`.reveal-left`, `.reveal-right`,
 * `.reveal-scale`; `.reveal-up` is the explicit alias of the default) to
 * any element. Group sibling/descendant `.reveal` elements under a
 * `[data-reveal-group]` ancestor (any existing container — no wrapper
 * markup needed) to stagger them via `--stagger-index`, which
 * assets/js/main.js sets per element on page load.
 */
.js .reveal {
    --stagger-index: 0;

    opacity: 0;
    transform: translateY(var(--motion-distance-md));
    transition:
        opacity var(--motion-slow) var(--motion-ease),
        transform var(--motion-slow) var(--motion-ease);
    transition-delay: calc(var(--stagger-index) * var(--motion-stagger-step));
}

.js .reveal-left {
    transform: translateX(calc(-1 * var(--motion-distance-md)));
}

.js .reveal-right {
    transform: translateX(var(--motion-distance-md));
}

.js .reveal-scale {
    transform: scale(0.96);
}

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

@media (prefers-reduced-motion: reduce) {
    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0ms;
    }
}

/*
 * Ambient decorative loops (scan lines, node pulses) shared by hero/card
 * visuals across products and projects. Only active when the visitor has
 * no motion-reduction preference; purely decorative, never gates content.
 */
@media (prefers-reduced-motion: no-preference) {
    .motion-pulse {
        animation: motion-node-pulse 6s var(--motion-ease) infinite;
    }

    .motion-pulse-soft {
        animation: motion-node-pulse-soft 6s var(--motion-ease) infinite;
    }

    .motion-scan {
        animation: motion-dash-scan 12s linear infinite;
    }
}

/* For low-opacity glow halos (e.g. .home-hero__visual-node). */
@keyframes motion-node-pulse {
    0%,
    100% {
        opacity: 0.12;
    }

    50% {
        opacity: 0.32;
    }
}

/* For small solid accent markers — a gentle breathe, not a flicker. */
@keyframes motion-node-pulse-soft {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

@keyframes motion-dash-scan {
    to {
        stroke-dashoffset: -60;
    }
}

/* For a CSS (non-SVG) dashed connector line — see .about-process__connector. */
@media (prefers-reduced-motion: no-preference) {
    .motion-line-scan {
        animation: motion-line-scan 3s linear infinite;
    }
}

@keyframes motion-line-scan {
    to {
        background-position: 24px 0;
    }
}

/*
 * About Page V1 (see includes/pages/about.php). Reuses .product-detail-hero,
 * .home-section/.home-about and .home-final-cta from the shared family
 * system; only the editorial two-column layout, process strip and
 * principle cards below are new.
 */
.about-whatis {
    padding-block-start: var(--space-10);
}

.about-why {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
}

.about-approach {
    border-top: 1px solid var(--color-border);
}

.about-principles {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
}

.about-sophtrun {
    border-top: 1px solid var(--color-border);
}

.about-editorial__grid {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

.about-editorial__paragraph {
    margin-top: var(--space-4);
    color: var(--color-text-muted);
}

.about-editorial__visual {
    aspect-ratio: 4 / 3;
    max-width: 24rem;
    margin-inline: auto;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.about-editorial__visual-svg {
    width: 100%;
    height: 100%;
}

/*
 * Site-Wide Real Image Slot Rollout V1 — shared by About/Sustainability's
 * editorial two-column sections (see includes/pages/about.php,
 * includes/pages/sustainability.php). The SVG state above stays padded
 * inside the frame; a real photo fills it edge-to-edge instead, reusing
 * the same aspect-ratio/border/radius/background chrome so both states
 * read as the same frame at the recommended 4:3 ratio.
 */
.about-editorial__visual--photo {
    padding: 0;
    overflow: hidden;
}

.about-editorial__visual--photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-process__track {
    position: relative;
    margin-top: var(--space-8);
}

.about-process__list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-4);
}

.about-process__step {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
}

.about-process__index {
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.about-process__name {
    font-size: var(--font-size-base);
}

.about-process__description {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.about-process__connector {
    display: none;
}

.about-principles__list {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.about-principle-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    transition:
        transform var(--transition-normal) var(--ease-standard),
        border-color var(--transition-normal) var(--ease-standard);
}

.about-principle-card__index {
    display: block;
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    transition: color var(--transition-normal) var(--ease-standard);
}

.about-principle-card__name {
    font-size: var(--font-size-base);
}

.about-principle-card__description {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.about-principle-card__corner {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-right: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border-strong);
    transition:
        width var(--transition-normal) var(--ease-standard),
        height var(--transition-normal) var(--ease-standard),
        border-color var(--transition-normal) var(--ease-standard);
}

/*
 * Sustainability Page V1 (see includes/pages/sustainability.php). Reuses
 * .product-detail-hero, .home-section, .about-editorial__* (two-column
 * copy/visual), .about-principle-card (impact-area cards) and
 * .home-final-cta from the shared family system — this is a corporate
 * positioning page, not an ESG report, so no new metric/score/badge
 * component is introduced here; see /docs/CONTENT-RULES.md. Only the
 * continuous-improvement loop below is new.
 */
.sustainability-approach {
    padding-block-start: var(--space-10);
}

.sustainability-impact {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
}

.sustainability-infrastructure {
    border-top: 1px solid var(--color-border);
}

.sustainability-loop {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
}

.sustainability-responsible {
    border-top: 1px solid var(--color-border);
}

.sustainability-responsible__heading {
    max-width: 30ch;
    font-size: var(--font-size-2xl);
}

/*
 * Continuous-improvement loop (section 5): a readable, always-vertical-safe
 * step list (mirrors .about-process__step) with a decorative closed-loop
 * SVG connector layered behind it. The connector only appears once there is
 * room for the 2x2 arrangement it is drawn for (see the 64rem breakpoint in
 * responsive.css) — below that it stays hidden and the steps read as a
 * plain single-column vertical flow, satisfying "linear on tablet/mobile"
 * without a second, separate mobile layout to maintain.
 */
.sustainability-loop__track {
    position: relative;
    margin-top: var(--space-8);
}

.sustainability-loop__connector {
    display: none;
}

.sustainability-loop__list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-4);
}

/*
 * Certificates Page V1 (see includes/pages/certificates.php). Reuses
 * .product-detail-hero (text-only, see the --text-only modifier above),
 * .home-section, .blog-grid's 1/2/3-column breakpoints and .blog-card's
 * border/surface/radius chrome, and .home-final-cta from the shared family
 * system. This page presents only verified documents — see
 * /docs/CONTENT-RULES.md — so certificate-card meta fields render only when
 * actually supplied, and the empty-state below is a first-class, polished
 * section rather than a plain message.
 */
.certificate-card {
    display: flex;
    flex-direction: column;
}

.certificate-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1400 / 1000;
    padding: var(--space-4);
    background-color: var(--color-background-secondary);
}

.certificate-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.certificate-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
}

.certificate-card__title {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.certificate-card__meta {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.certificate-card__cta {
    margin-top: var(--space-2);
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.certificate-card__cta:hover {
    text-decoration: underline;
}

.certificates-empty {
    display: grid;
    justify-items: center;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-block: var(--space-10);
    text-align: center;
}

.certificates-empty__visual {
    width: 100%;
    max-width: 14rem;
    aspect-ratio: 1;
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.certificates-empty__heading {
    margin-bottom: var(--space-3);
}

.certificates-empty__text {
    color: var(--color-text-muted);
}

.certificates-verification {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
}

.certificates-verification__inner {
    max-width: var(--content-max-width);
    text-align: center;
}

.certificates-verification__inner .home-section__label,
.certificates-verification__inner .home-section__heading {
    margin-inline: auto;
}

.certificates-verification__text {
    margin-top: var(--space-4);
    color: var(--color-text-muted);
}

/*
 * Solutions Page + Document Request Flow V1 (see
 * includes/pages/solutions.php). Reuses .product-detail-hero (text-only),
 * .home-section, .home-final-cta and — inside the request form —
 * .contact-form__* wholesale (same field/control/error/consent/status
 * chrome as the Contact page) so the two forms feel identical. Only the
 * solution card grid, selection summary and its two-column layout are new.
 */
/*
 * Site-Wide Real Image Slot Rollout V1 — one optional real-photo band
 * between the (text-only) hero and the solution grid below. Only ever
 * rendered when assets/images/solutions/solutions-main.webp exists (see
 * includes/pages/solutions.php); the solution-card grid itself stays
 * fully SVG/icon-based, unchanged.
 */
.solutions-visual {
    padding-block: var(--space-8);
    border-bottom: 1px solid var(--color-border);
}

.solutions-visual__frame {
    display: block;
    max-width: 56rem;
    margin-inline: auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.solutions-visual__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solution-grid {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-8);
}

.solution-card {
    position: relative;
}

.solution-card__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    cursor: pointer;
    transition:
        border-color var(--transition-normal) var(--ease-standard),
        transform var(--transition-normal) var(--ease-standard);
}

.solution-card__inner--static {
    cursor: default;
    opacity: 0.85;
}

/* Native checkbox stays in the accessibility/keyboard tree but is visually
   replaced by .solution-card__check below — never display:none, which
   would drop it from the tab order too. */
.solution-card__checkbox {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--color-accent);
    z-index: 1;
}

.solution-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-4);
}

.solution-card__visual svg {
    width: 100%;
    height: 100%;
}

.solution-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
}

.solution-card__title {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    padding-right: var(--space-8);
}

.solution-card__summary {
    flex: 1;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.solution-card__unavailable {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-style: italic;
}

/* Hidden until the card is selected — see the :has() rule below. */
.solution-card__check {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-on-primary);
    background-color: var(--color-accent);
    border-radius: var(--radius-sm);
}

.solution-card__check svg {
    width: 0.75rem;
    height: 0.75rem;
}

.solution-card__inner:has(.solution-card__checkbox:checked) {
    border-color: var(--color-accent);
    background-color: var(--color-accent-soft);
}

.solution-card__inner:has(.solution-card__checkbox:checked) .solution-card__check {
    display: flex;
}

/* The real checkbox is visually hidden once selected (the accent
   check-badge above takes over) but stays keyboard/AT-focusable. */
.solution-card__inner:has(.solution-card__checkbox:checked) .solution-card__checkbox {
    opacity: 0;
}

.solution-card__checkbox:focus-visible {
    opacity: 1;
    outline: var(--focus-outline-width) solid var(--color-focus);
    outline-offset: var(--focus-outline-offset);
}

.solution-card__checkbox:disabled {
    cursor: not-allowed;
}

.solutions-request {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-secondary);
}

/*
 * Site-wide Demo Request Form V1 (see includes/components/demo-request.php)
 * shares this exact two-column shell with the Solutions request form — both
 * are "premium panel" forms of the same family, so .demo-request__grid is
 * added straight into the existing selector rather than duplicated.
 */
.solutions-request__grid,
.demo-request__grid {
    display: grid;
    gap: var(--space-10);
}

.demo-request {
    border-top: 1px solid var(--color-border);
}

.demo-request__text {
    margin-top: var(--space-4);
    color: var(--color-text-muted);
}

.demo-request__trust-note {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.demo-request__trust-note a {
    color: var(--color-accent);
}

.solutions-selected__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.solutions-selected__list:empty {
    display: none;
}

.solutions-selected__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35em 0.5em 0.35em 0.85em;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.solutions-selected__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: var(--font-size-base);
    line-height: 1;
}

.solutions-selected__chip-remove:hover,
.solutions-selected__chip-remove:focus-visible {
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
}

.solutions-selected__empty {
    margin-top: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.solutions-selected__list:not(:empty) + .solutions-selected__empty {
    display: none;
}

.contact-form__optional {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-regular);
}

.solutions-privacy-note {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/*
 * Contact Page V1 (see includes/pages/contact.php). Reuses .page-hero and
 * .home-section from the shared family system; the two-column layout, info
 * cards and form below are new.
 */
.contact-layout__grid {
    display: grid;
    gap: var(--space-10);
}

.contact-info__list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.contact-info__card {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
}

.contact-info__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.contact-info__value {
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

a.contact-info__value:hover {
    color: var(--color-accent);
}

.contact-info__address {
    font-style: normal;
}

.contact-form {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.contact-form__row {
    display: grid;
    gap: var(--space-5);
}

.contact-form__field {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.contact-form__field label,
.contact-form__fieldset legend {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.contact-form__control {
    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    transition:
        border-color var(--transition-fast) var(--ease-standard),
        box-shadow var(--transition-fast) var(--ease-standard);
}

.contact-form__control::placeholder {
    color: var(--color-text-muted);
}

.contact-form__control:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

textarea.contact-form__control {
    min-height: 8rem;
    resize: vertical;
}

.contact-form__fieldset {
    padding: 0;
    border: 0;
}

.contact-form__checklist {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.contact-form__checkbox,
.contact-form__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.contact-form__consent {
    color: var(--color-text);
}

.contact-form__checkbox input,
.contact-form__consent input {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.15em;
    accent-color: var(--color-accent);
}

.contact-form__actions {
    display: flex;
}

.contact-form__status {
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.contact-form__status[hidden] {
    display: none;
}

.contact-form__status--success {
    border-color: var(--color-accent);
    background-color: var(--color-accent-soft);
}

.contact-form__status--error {
    border-color: var(--color-danger);
    background-color: var(--color-danger-soft);
}

.contact-form__noscript {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/*
 * Contact Form V1.2 — visual field error states. Restrained by design: a
 * plain border/ring color change and a small text message, no glow,
 * flashing or shake. `.is-invalid` is applied to the `[data-field]`
 * wrapper (a `.contact-form__field` for ordinary inputs, or the
 * `.contact-form__consent` label for the consent checkbox) by
 * assets/js/main.js in response to api/contact.php's `field_errors`.
 */
.contact-form__field.is-invalid .contact-form__control {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 1px var(--color-danger);
}

.contact-form__error {
    margin: 0;
    min-height: 0;
    color: var(--color-danger);
    font-size: var(--font-size-xs);
}

.contact-form__error:empty {
    display: none;
}

.contact-form__consent.is-invalid {
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    background-color: var(--color-danger-soft);
    padding: var(--space-2) var(--space-3);
    margin-inline: calc(-1 * var(--space-3));
}

.js .contact-form__error {
    opacity: 0;
    transition: opacity var(--motion-fast) var(--motion-ease);
}

.js .contact-form__error.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .js .contact-form__error {
        opacity: 1;
        transition: none;
    }
}

.js .contact-form__status {
    opacity: 0;
    transform: translateY(var(--motion-distance-sm));
    transition:
        opacity var(--motion-base) var(--motion-ease),
        transform var(--motion-base) var(--motion-ease);
}

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

@media (prefers-reduced-motion: reduce) {
    .js .contact-form__status {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (forced-colors: active) {
    .button,
    .language-control,
    .theme-toggle,
    .site-navigation-toggle,
    .product-media__video-trigger,
    .video-modal__close {
        border: 1px solid ButtonText;
    }

    :focus-visible {
        outline-color: Highlight;
    }
}