/* ============================================================
   Ferrari Metals — base styles, layout shell and components
   ============================================================ */

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

html {
    scroll-behavior: smooth;
    color-scheme: dark;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--body-weight);
    letter-spacing: var(--body-tracking);
    color: var(--text-muted);
    line-height: var(--lh-body);
    background: var(--bg-base);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    line-height: calc(1.2 * var(--head-lh-scale));
    margin: 0 0 0.5em;
}

p { margin: 0 0 1rem; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--selection-bg); color: var(--selection-text); }

:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

/* ---------- Layout shell ---------- */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.main-content { flex: 1 0 auto; padding-top: var(--header-height); }
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ---------- Section helpers (reused by pages) ---------- */
.section { padding: var(--section-pad) 0; }
.section--base {
    background: var(--bg-base);
    color: var(--text-muted);
    --card-bg: var(--bg-surface-2);
    --card-bg-hover: var(--bg-surface-3);
}
.section--alt {
    background: var(--bg-alt);
    color: var(--text-muted);
    --card-bg: var(--bg-surface-hover);
    --card-bg-hover: var(--bg-surface-raised);
}
.section--steel {
    position: relative;
    background: var(--bg-steel);
    --text-muted: var(--text-on-steel-muted);
    --text-faint: var(--text-on-steel-muted);
    --border-subtle: var(--border-on-steel);
    --border-default: var(--border-on-steel);
    --border-strong: var(--border-on-steel-strong);
    --btn-outline-border: var(--border-on-steel-strong);
    --card-bg: var(--card-on-steel);
    --card-bg-hover: var(--card-on-steel-hover);
    --eyebrow: var(--accent-on-steel);
    --accent-text: var(--accent-on-steel);
}
.section--steel .service-card { background: var(--card-bg); }

.section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono);
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--eyebrow);
    margin-bottom: 18px;
}
.section__eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: currentColor;
}

.section__title {
    font-size: calc(clamp(1.75rem, 3vw, 2.5rem) * var(--head-scale));
    font-weight: var(--head-weight);
    text-transform: uppercase;
    letter-spacing: calc(-0.015em + var(--head-tracking));
    --lh: calc(1.05 * var(--head-lh-scale));
    line-height: var(--lh);
    text-wrap: balance;
    padding-bottom: var(--title-descender);
    margin-bottom: calc(1.5rem - var(--title-descender));
}
.section__title--statement {
    font-size: calc(clamp(1.85rem, 3.7vw, 3.3rem) * var(--head-scale));
    text-transform: none;
    letter-spacing: calc(-0.022em + var(--head-tracking));
    --lh: calc(0.98 * var(--head-lh-scale));
    text-wrap: balance;
    margin-bottom: calc(1.75rem - var(--title-descender));
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    :root:not([data-heading-finish="flat"]) .section__title,
    :root:not([data-heading-finish="flat"]) .page-hero__title,
    :root:not([data-heading-finish="flat"]) .hero-title,
    :root:not([data-heading-finish="flat"]) .gallery-hero__title {
        background-image:
            linear-gradient(var(--metal-veil), var(--metal-veil)),
            linear-gradient(var(--metal-shade), var(--metal-shade)),
            var(--metal-grain),
            var(--metal-heading);
        background-size: 100% 100%, 100% 100%, 100% 100%, 100% calc(var(--lh) * 1em);
        background-repeat: repeat, repeat, repeat, repeat-y;
        /* screen and multiply scale the ramp; painting the veils normally would
           simply cover it, and strength would stop doing anything at the ends.
           The striation is soft-light — overlay is what turned the old noise
           texture into visible dirt as soon as the tone darkened. */
        background-blend-mode: screen, multiply, soft-light, normal;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    :root:not([data-heading-finish="flat"]) .page-hero__title,
    :root:not([data-heading-finish="flat"]) .hero-title,
    :root:not([data-heading-finish="flat"]) .gallery-hero__title {
        background-image:
            linear-gradient(var(--metal-veil), var(--metal-veil)),
            linear-gradient(var(--metal-shade), var(--metal-shade)),
            var(--metal-grain),
            var(--metal-heading-media);
        background-size: 100% 100%, 100% 100%, 100% 100%, 100% calc(var(--lh) * 1em);
        background-repeat: repeat, repeat, repeat, repeat-y;
        background-blend-mode: screen, multiply, soft-light, normal;
    }
}


.title-mark { color: var(--accent-text); }

.section-intro { text-align: center; }
.section-intro .section__title { max-width: 26ch; margin-inline: auto; }
.section-intro .section__lead { margin-inline: auto; }

.section__lead { max-width: var(--measure-prose); font-size: 1.12rem; line-height: 1.75; color: var(--text-secondary); margin: 0; text-wrap: pretty; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }

.link-external::after {
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.3em;
    vertical-align: -0.09em;
    background-color: currentColor;
    -webkit-mask: url("/images/icons/arrow-up-right.svg") center / contain no-repeat;
    mask: url("/images/icons/arrow-up-right.svg") center / contain no-repeat;
}

.measure { max-width: 65ch; margin-inline: auto; }
.measure--xs { max-width: 38ch; }
.measure--sm { max-width: 52ch; }
.measure--md { max-width: 65ch; }
.measure--lg { max-width: 78ch; }
.measure--xl { max-width: 92ch; }

.icon-mask {
    display: block;
    background-color: currentColor;
    background-image: var(--icon-fill, none);
    filter: brightness(1.2);
    -webkit-mask: var(--icon-src) center / contain no-repeat;
    mask: var(--icon-src) center / contain no-repeat;
}

.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;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 13px 30px;
    white-space: nowrap;
    border-radius: var(--radius-btn);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
    text-decoration: none;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn--primary:hover {
    background: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-border-hover);
    color: var(--btn-primary-text);
}

.btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
.btn--secondary:hover { background: var(--btn-secondary-bg-hover); color: var(--text-primary); }

.btn--outline {
    background: transparent;
    border-color: var(--btn-outline-border);
    color: var(--btn-outline-text);
}
.btn--outline:hover {
    background: var(--btn-outline-bg-hover);
    border-color: var(--btn-outline-border-hover);
    color: var(--text-primary);
}

/* ============================================================
   Header
   ============================================================ */
@property --header-h {
    syntax: "<length>";
    inherits: true;
    initial-value: 84px;
}
@property --logo-h {
    syntax: "<length>";
    inherits: true;
    initial-value: 60px;
}

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    --header-h: var(--header-height);
    --logo-h: var(--logo-height);
    background: var(--bg-header);
    backdrop-filter: blur(var(--blur-header));
    box-shadow: var(--shadow-header);
    animation: header-condense linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px var(--header-scroll-range);
}

@keyframes header-condense {
    from {
        --header-h: var(--header-height);
        --logo-h: var(--logo-height);
    }
    to {
        --header-h: var(--header-height-scrolled);
        --logo-h: var(--logo-height-scrolled);
    }
}

.site-header__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-h);
    gap: 24px;
}
.site-header__brand { display: flex; align-items: center; gap: 14px; }
.site-header__mark { width: auto; height: var(--logo-h); }
.site-header__wordmark { width: auto; height: calc(var(--logo-h) * 0.555); }

.site-nav { margin-left: auto; }
.site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 28px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav__link {
    color: var(--text-nav);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: var(--tracking-ui);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color var(--t-base), border-color var(--t-base);
}
/* ---------- Design settings drawer ---------- */
.design {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
}
.design__toggle { position: absolute; opacity: 0; pointer-events: none; }
.design__panel {
    position: absolute;
    left: 0;
    top: 50%;
    width: 248px;
    transform: translate(-100%, -50%);
    padding: 16px 16px 18px;
    background: var(--bg-surface-2);
    box-shadow: var(--shadow-menu);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    visibility: hidden;
    transition: transform var(--t-slow) var(--motion-ease-out, ease),
                visibility 0s linear var(--t-slow);
}
.design__handle {
    position: absolute;
    left: 0;
    top: 50%;
    display: grid;
    place-items: center;
    width: 38px;
    height: 42px;
    margin-top: -21px;
    background: var(--bg-surface-2);
    box-shadow: var(--shadow-menu);
    cursor: pointer;
    opacity: 0.55;
    transition: transform var(--t-slow) var(--motion-ease-out, ease), opacity var(--t-base);
}
.design__handle::after {
    content: "";
    width: 17px;
    height: 17px;
    background-color: var(--text-nav);
    -webkit-mask: url("/images/icons/gear-wide-connected.svg") center / contain no-repeat;
    mask: url("/images/icons/gear-wide-connected.svg") center / contain no-repeat;
}
.design__handle:hover { opacity: 1; }
.design__toggle:checked ~ .design__panel {
    transform: translate(0, -50%);
    visibility: visible;
    transition: transform var(--t-slow) var(--motion-ease-out, ease), visibility 0s;
}
.design__toggle:checked ~ .design__handle { transform: translateX(248px); opacity: 1; }
.design__toggle:checked ~ .design__handle::after { background-color: var(--accent-text); }
.design__toggle:focus-visible ~ .design__handle { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.design__label {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-faint);
}
.design__row { display: flex; gap: 6px; margin-bottom: 16px; }
.design__row:last-child { margin-bottom: 0; }
.design__opt {
    flex: 1 1 auto;
    padding: 7px 4px;
    border: 1px solid var(--border-default);
    background: none;
    color: var(--text-nav);
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-label);
    cursor: pointer;
    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.design__opt:hover { color: var(--text-primary); border-color: var(--border-strong); }
.design__opt[aria-pressed="true"] {
    color: var(--text-on-accent);
    background: var(--accent);
    border-color: var(--accent);
}

/* ---------- Advanced type controls ---------- */
.design__advToggle { position: absolute; opacity: 0; pointer-events: none; }
.design__advLabel {
    display: block;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-faint);
    cursor: pointer;
    transition: color var(--t-base);
}
.design__advLabel::after { content: " +"; }
.design__advLabel:hover { color: var(--text-primary); }
.design__adv { display: none; margin-top: 14px; }
.design__advToggle:checked ~ .design__adv { display: block; }
.design__advToggle:checked ~ .design__advLabel { color: var(--text-primary); }
.design__advToggle:checked ~ .design__advLabel::after { content: " \2212"; }
.design__range { display: block; margin-bottom: 10px; }
.design__range span {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.design__range b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.design__range input {
    width: 100%;
    height: 3px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--border-default);
    cursor: pointer;
}
.design__range input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: var(--accent);
    cursor: pointer;
}
.design__range input::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    background: var(--accent);
    cursor: pointer;
}
.design__reset {
    width: 100%;
    margin-top: 6px;
    padding: 7px 4px;
    border: 1px solid var(--border-default);
    background: none;
    color: var(--text-nav);
    font-family: var(--font-body);
    font-size: 0.75rem;
    cursor: pointer;
    transition: color var(--t-base), border-color var(--t-base);
}
.design__reset:hover { color: var(--text-primary); border-color: var(--border-strong); }

.site-nav__link:hover { color: var(--text-primary); text-decoration: none; }
.site-nav__link--active {
    color: var(--accent-text);
    border-bottom-color: var(--accent);
}

.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    appearance: none;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}
.nav-burger span {
    display: block;
    height: 3px;
    width: 26px;
    background: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: transform .25s, opacity .25s;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    flex-shrink: 0;
    background: var(--bg-surface);
    color: var(--text-muted);
    padding: 64px 0 28px;
}

.site-footer__grid {
    --footer-gutter: clamp(24px, 4vw, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: var(--footer-gutter);
    row-gap: 40px;
}

.site-footer__col { border-left: 1px solid var(--border-subtle); padding-left: var(--footer-gutter); }

.site-footer__brand { text-align: center; align-self: center; }
.site-footer__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.site-footer__mark { height: 88px; width: auto; }
.site-footer__wordmark { height: 33px; width: auto; }
.site-footer__tagline {
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 36ch;
    margin-inline: auto;
}

.site-footer__title {
    position: relative;
    color: var(--text-primary);
    font-size: 1.05rem;
    letter-spacing: var(--tracking-wide);
    padding-bottom: 12px;
    margin-bottom: 18px;
}
.site-footer__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--rule-accent);
}
.site-footer__links, .site-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__links li { margin-bottom: 6px; break-inside: avoid; }
.site-footer__contact dt {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--accent-text);
}
.site-footer__contact dd { margin: 2px 0 16px; font-size: 0.95rem; color: var(--text-secondary); }
.site-footer__contact dd:last-child { margin-bottom: 0; }
.site-footer__contact address { font-style: normal; line-height: 1.5; }
.site-footer a { color: var(--link-muted); }
.site-footer a:hover { color: var(--link-muted-hover); text-decoration: none; }
.site-footer__contact a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
    transition: color var(--t-base), text-decoration-color var(--t-base);
}
.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
    color: var(--link-muted-hover);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--accent-text);
}
.site-footer__links a { display: inline-block; transition: transform var(--t-fast), color var(--t-fast); }
.site-footer__links a:hover { transform: translateX(3px); }

.site-footer__bottom {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-faint);
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 22px;
    margin-bottom: 10px;
}
.site-footer__legal a + a { position: relative; }
.site-footer__legal a + a::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 50%;
    width: 1px;
    height: 12px;
    transform: translateY(-50%);
    background: var(--border-default);
}

/* ============================================================
   Page hero (compact banner for interior pages)
   ============================================================ */
.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 320px;
    padding: 80px 0;
    background-color: var(--bg-base);
    color: var(--text-secondary);
    text-align: center;
}
.page-hero--solid { background-image: var(--metal-badge); }
.page-hero__media {
    position: absolute;
    inset: 0;
    display: block;
}
.page-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--scrim-banner);
}
.page-hero--solid .page-hero__overlay { background: transparent; }
.page-hero__content { position: relative; z-index: 1; width: 100%; }
.page-hero__title {
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    --lh: 1.02;
    line-height: var(--lh);
    margin-bottom: 0.5rem;
}
.page-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 600;
    color: var(--text-body);
    text-shadow: var(--shadow-text-media);
    margin: 0;
}

/* ============================================================
   Hero (homepage, seamless-loop background video)
   ============================================================ */
.hero {
    position: relative;
    min-height: clamp(400px, 38vw, 560px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-base);
    text-align: center;
}
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--scrim-hero);
    z-index: 1;
    pointer-events: none;
}
.hero-content {
    position: relative;
    z-index: 2;
    padding-block: 48px;
}
.hero-title {
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.022em;
    --lh: 1;
    line-height: var(--lh);
    text-wrap: balance;
    margin: 0 0 1rem;
}
.hero-subtitle {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-body);
    text-shadow: var(--shadow-text-media);
    max-width: 56ch;
    margin: 0 auto 2rem;
    text-wrap: pretty;
}
.hero__cta {
    font-size: 1.05rem;
    box-shadow: var(--shadow-cta);
}

/* ============================================================
   About intro (image + text, two columns)
   ============================================================ */
.about-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.about-intro__media img {
    border-radius: var(--radius-photo);
    width: 100%;
    object-fit: cover;
}
.about-intro__media { display: grid; gap: 14px; }
.about-intro__frame {
    position: relative;
    margin: 0;
    overflow: hidden;
    contain: paint;
    border-radius: var(--radius-photo);
    background: var(--bg-surface-2);
}
.about-intro__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-intro__lead { max-width: var(--measure-prose); font-size: 1.06rem; color: var(--text-secondary); text-wrap: pretty; }
.about-intro__text > p:not([class]) { max-width: var(--measure-prose); color: var(--text-muted); text-wrap: pretty; }
.about-intro__lead > p { margin: 0; }
.about-intro__lead > p + p { margin-top: 1rem; }

.about-intro--reverse .about-intro__media { order: 2; }

.about-intro--brief {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    column-gap: 56px;
    row-gap: 0;
    align-items: start;
}
.about-intro--brief .about-intro__lead { font-size: 0.98rem; }
.about-intro--brief .about-intro__lead > p + p { margin-top: 0.75rem; }
.about-intro--brief .about-intro__frame { align-self: stretch; }

/* ============================================================
   Photo plate — a framed photograph over a captioned foot
   ============================================================ */
.photo-plate {
    margin: 0;
    border: 1px solid var(--border-strong);
    background: var(--card-bg);
}
.photo-plate__link { display: block; }
.photo-plate__frame {
    display: block;
    overflow: hidden;
    contain: paint;
}
.photo-plate img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.photo-plate--wide img { aspect-ratio: 5 / 2; }
.photo-plate figcaption {
    padding: 13px 16px;
    border-left: 3px solid var(--rule-accent);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    line-height: 1.25;
}

/* ============================================================
   Engineering & Fabrication — ruled points beside a photo stack
   ============================================================ */
.engineering {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}

.engineering__title > span { display: block; }

.engineering__lead { margin-top: 18px; }

.engineering__points {
    display: grid;
    gap: 22px;
    margin-top: 32px;
}
.engineering__point {
    padding-left: 18px;
    border-left: 3px solid var(--rule-accent);
}
.engineering__point h3 {
    margin: 0 0 7px;
    color: var(--text-primary);
    font-size: 1.08rem;
    line-height: 1.25;
}
.engineering__point p {
    margin: 0;
    max-width: var(--measure-prose);
    color: var(--text-muted);
    text-wrap: pretty;
}

.engineering__media {
    display: grid;
    gap: 16px;
}

/* ============================================================
   Field installation — a captioned pair over a numbered run
   ============================================================ */
@property --srule-x {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 50%;
}

.field-install__head { margin-bottom: clamp(34px, 4vw, 52px); }

.field-install__media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.field-steps {
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 88px 0 0;
    padding: 0;
    list-style: none;
}
.field-steps li {
    position: relative;
    isolation: isolate;
    counter-increment: step;
    padding: 46px 24px 26px;
    text-align: center;
    --step-gap: 9px;
    --step-cut: calc(var(--step-size) + 2 * var(--step-gap));
    --srule-tint: var(--text-primary);
    --srule-x: 50%;
    --srule-w: 26%;
    --srule-o: 0;
}
.field-steps li:hover { --step-size: 52px; }
.field-steps li::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-mask:
        linear-gradient(#000 0 0),
        radial-gradient(circle calc(var(--step-cut) / 2) at top center,
            #000 0 calc(100% - 1px), transparent 100%);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0),
        radial-gradient(circle calc(var(--step-cut) / 2) at top center,
            #000 0 calc(100% - 1px), transparent 100%);
    mask-composite: exclude;
    background-color: var(--card-translucent);
    background-image:
        linear-gradient(90deg,
            color-mix(in srgb, var(--srule-tint) 0%, transparent) calc(var(--srule-x) - var(--srule-w)),
            color-mix(in srgb, var(--srule-tint) calc(30% * var(--srule-o)), transparent) calc(var(--srule-x) - var(--srule-w) * 0.52),
            color-mix(in srgb, var(--srule-tint) calc(100% * var(--srule-o)), transparent) var(--srule-x),
            color-mix(in srgb, var(--srule-tint) calc(30% * var(--srule-o)), transparent) calc(var(--srule-x) + var(--srule-w) * 0.52),
            color-mix(in srgb, var(--srule-tint) 0%, transparent) calc(var(--srule-x) + var(--srule-w)));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top;
    transition: background-color var(--t-base);
}
.field-steps li::before {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: var(--step-size);
    height: var(--step-size);
    border-radius: var(--radius-step);
    background: var(--card-translucent);
    color: var(--accent-text);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 900;
    transition: background var(--t-base);
}
.field-steps li:hover::after { background-color: var(--card-translucent-hover); }
.field-steps li:hover::before { background: var(--card-translucent-hover); }
.field-steps h3 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 1.15rem;
    line-height: 1.25;
    text-wrap: balance;
}
.field-steps p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.94rem;
    text-wrap: pretty;
}

/* ============================================================
   Spec row — a set of statements carried by rules, not plates
   ============================================================ */
.spec-row {
    --rule-color: var(--border-default);
    --rule: 1px solid var(--rule-color);
    --spec-pad: min(30px, var(--container-pad));
    position: relative;
    display: grid;
    margin-top: 64px;
    margin-inline: calc(var(--spec-pad) * -1);
}

.spec-row__item {
    min-width: 0;
    padding: 32px var(--spec-pad) 36px;
    transition: background var(--t-base);
}

.spec-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spec-row--4 .spec-row__item:not(:first-child) { border-left: var(--rule); }

.spec-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec-row--2 .spec-row__item:nth-child(even) { border-left: var(--rule); }
.spec-row--2 .spec-row__item:nth-child(n+3) { border-top: var(--rule); }

.spec-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spec-row--3 .spec-row__item:not(:nth-child(3n+1)) { border-left: var(--rule); }
.spec-row--3 .spec-row__item:nth-child(n+4) { border-top: var(--rule); }

/* On a photographic ground a hairline reads as dirt, so this run separates by
   surface instead: each statement is its own sheet of glass over the picture —
   which is also what the block is about. */
.spec-row--plates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-inline: 0;
}
.spec-row--plates .spec-row__item {
    border: 0;
    padding: 26px 26px 28px;
    border-radius: var(--radius-lg);
    background: var(--glass-film);
    backdrop-filter: blur(var(--blur-film)) saturate(1.15);
    -webkit-backdrop-filter: blur(var(--blur-film)) saturate(1.15);
}
.spec-row--plates .spec-row__item:hover { background: var(--glass-film-hover); }

.spec-row--numbered { counter-reset: spec; }
.spec-row--numbered .spec-row__item {
    counter-increment: spec;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
}
.spec-row--numbered .spec-row__item::before {
    content: counter(spec);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--rule-accent);
    color: var(--accent-text);
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 900;
    transition: background var(--t-base), color var(--t-base);
}
.spec-row--numbered .spec-row__item:hover::before {
    background: var(--accent);
    color: var(--text-on-accent);
}
.spec-row--numbered .spec-row__title {
    grid-column: 2;
    align-self: center;
    min-height: 30px;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
.spec-row--numbered .spec-row__text { grid-column: 2; }

.spec-row__label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--eyebrow);
    margin: 0 0 14px;
}
.spec-row__title {
    font-size: 1.12rem;
    line-height: 1.22;
    color: var(--text-primary);
    margin: 0 0 12px;
    text-wrap: balance;
}
.spec-row__text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
    text-wrap: pretty;
}

/* ---------- Specification list — the same ruled run as a <dl> ---------- */
.spec-row--specs { margin-bottom: 0; }
.spec-row--specs .spec-row__item { padding-block: 22px 24px; }
.spec-row--specs .spec-row__label { margin-bottom: 6px; }
.spec-row--specs .spec-row__text { font-size: 1rem; color: var(--text-primary); }

/* ============================================================
   Horticultural film — photo band under a near-black wash
   ============================================================ */
.film-section {
    position: relative;
    background: url("/images/content/film-band.jpg") center / cover no-repeat;
    background-color: var(--bg-base);
}
.film-band { position: relative; z-index: 1; }
.film-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--scrim-band);
    pointer-events: none;
}
.film-section > .container { position: relative; }

.film-band {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    column-gap: 64px;
    align-items: start;
}
.film-head .section__title { margin-bottom: calc(0.9rem - var(--title-descender)); }
.film-head__lead {
    margin: 0;
    max-width: var(--measure-prose);
    color: var(--text-secondary);
    text-wrap: pretty;
}
.film-band .spec-row {
    margin-top: 0;
    --rule-color: var(--border-strong);
}
.film-band .spec-row__text { color: var(--text-secondary); }

/* ============================================================
   Feature cards (Why Choose / Substrate / About)
   ============================================================ */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 36px;
}
.feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.feature-card {
    background: var(--card-translucent);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    text-align: center;
    transition: background var(--t-base);
}
.feature-card:hover { background: var(--card-translucent-hover); }
.feature-card__icon { width: 46px; height: 46px; object-fit: contain; margin: 0 auto 18px; }
.feature-card__icon--mask { color: var(--text-secondary); transition: color var(--t-base); }
.feature-card:hover .feature-card__icon--mask { color: var(--text-primary); }
.lit-welcome .feature-card { --icon-fill: var(--icon-lit-indigo); }
.lit-offer .feature-card { --icon-fill: var(--icon-lit-violet); }
.feature-card__title { font-size: 1.15rem; color: var(--text-primary); margin-bottom: 10px; }
.feature-card__text { font-size: 0.94rem; color: var(--text-muted); margin: 0; text-wrap: pretty}

.feature-card--stat {
    text-align: left;
    padding: 20px 22px 22px;
}
.feature-card__figure {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 6px;
}
.feature-card__figure--text {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.4;
    letter-spacing: var(--tracking-label);
    color: var(--accent-text);
    margin-bottom: 10px;
}
.feature-card--stat .feature-card__title { font-size: 1.05rem; margin-bottom: 8px; }
.feature-card--stat .feature-card__text { font-size: 0.87rem; line-height: 1.5; }
.feature-grid--compact { gap: 16px; }
.feature-grid--compact .feature-card {
    padding: 20px 20px 22px;
    border-radius: var(--radius-md);
    text-align: left;
}
.feature-grid--compact .feature-card__figure--text { margin-bottom: 6px; font-size: 0.75rem; }
.feature-grid--compact .feature-card__title { margin-bottom: 8px; font-size: 1.02rem; line-height: 1.25; }
.feature-grid--compact .feature-card__text { font-size: 0.9rem; line-height: 1.55; }

@property --step-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 42px;
}
.feature-grid--steps {
    counter-reset: step;
    margin-top: 66px;
}
.feature-grid--steps .feature-card,
.feature-grid--steps .feature-card:hover {
    position: relative;
    isolation: isolate;
    counter-increment: step;
    padding-top: 46px;
    background: none;
    --step-size: 42px;
    --step-gap: 9px;
    --step-cut: calc(var(--step-size) + 2 * var(--step-gap));
    transition: --step-size 2.2s ease;
}
.feature-grid--steps .feature-card:hover {
    --step-size: 52px;
    transition-duration: var(--t-fast);
}
.feature-grid--steps .feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card-translucent);
    -webkit-mask:
        linear-gradient(#000 0 0),
        radial-gradient(circle calc(var(--step-cut) / 2) at top center,
            #000 0 calc(100% - 1px), transparent 100%);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0),
        radial-gradient(circle calc(var(--step-cut) / 2) at top center,
            #000 0 calc(100% - 1px), transparent 100%);
    mask-composite: exclude;
    transition: background var(--t-base);
}
.feature-grid--steps .feature-card::before {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: var(--step-size);
    height: var(--step-size);
    border-radius: var(--radius-step);
    background: var(--card-translucent);
    color: var(--accent-text);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 900;
    transition: background var(--t-base);
}
.feature-grid--steps .feature-card:hover::after,
.feature-grid--steps .feature-card:hover::before { background: var(--card-translucent-hover); }
.feature-grid--steps .feature-card__title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5em;
    line-height: 1.25;
    text-wrap: balance;
}

.substrate-band {
    display: grid;
    /* The head column has to clear "Container-Grown" unbroken: at 52.8px that
       single word measures ~468px, and a narrower track pushed "and" onto a
       line of its own. It must genuinely fit, not merely look close: the metal
       finish paints the glyphs from the element's own background, so a word
       that overruns the box is not drawn past it — it is cut off mid-letter. */
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.28fr);
    column-gap: 48px;
    align-items: stretch;
}
.substrate-band__head .section__title { margin-bottom: calc(1.1rem - var(--title-descender)); }
.substrate-band__lead {
    margin: 0;
    max-width: var(--measure-prose);
    color: var(--text-secondary);
    text-wrap: pretty;
}

/* ---------- Substrate photo mosaic ---------- */
.substrate-mosaic {
    --slice: 18%;
    --space: 6px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    min-height: clamp(300px, 26vw, 440px);
    margin-inline: max(calc(var(--slice) / -3), -28px);
}
.substrate-mosaic__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    clip-path: polygon(
        calc(var(--slice) + var(--space)) 0,
        100% 0,
        calc(100% - var(--slice)) 100%,
        var(--space) 100%);
}
.substrate-mosaic__item:first-child {
    clip-path: polygon(var(--slice) 0, 100% 0, calc(100% - var(--slice)) 100%, 0 100%);
}
.substrate-mosaic__item:nth-child(1) { transform: translateX(var(--slice)); }
.substrate-mosaic__item:nth-child(3) { transform: translateX(calc(var(--slice) * -1)); }
.substrate-mosaic__item img { width: 100%; height: 100%; object-fit: cover; }
.substrate-mosaic__item:nth-child(1) img { object-position: 62% 64%; }
.substrate-mosaic__item:nth-child(2) img { object-position: 66% 58%; }
.substrate-mosaic__item:nth-child(3) img { object-position: 40% 62%; }

.substrate-mosaic__item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding-block: 42px 14px;
    padding-left: 16px;
    padding-right: max(calc(8px + var(--slice) * 0.55), calc(100% - 13em));
    line-height: 1.45;
    background: var(--scrim-tile);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* ============================================================
   Band head — statement left, summary right
   ============================================================ */
.band-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 64px;
    align-items: end;
}
.band-head .section__title { margin-bottom: calc(var(--title-descender) * -1); }
.band-head__lead {
    margin: 0 0 0.4rem;
    max-width: var(--measure-prose);
    color: var(--text-secondary);
    text-wrap: pretty;
}

/* ============================================================
   Why-Choose zigzag timeline (full-bleed, outside .container)
   ============================================================ */
.why-intro { max-width: 760px; margin-inline: auto; }
.why-intro__lead { max-width: var(--measure-prose); margin-inline: auto; color: var(--text-secondary); text-wrap: pretty; }

.timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    --tl-pad: clamp(96px, 6vw, 150px);
    --node-gap: 158px;
    margin-top: 52px;
    padding-inline: var(--tl-pad);
}
.timeline::before {
    content: "";
    position: absolute;
    left: var(--tl-pad);
    right: var(--tl-pad);
    top: 50%;
    height: 2px;
    background: var(--rail-tint, var(--rail-accent));
    mask: repeating-linear-gradient(90deg,
        #000 0,
        #000 calc(100% / 12 - var(--node-gap) / 2),
        transparent calc(100% / 12 - var(--node-gap) / 2),
        transparent calc(100% / 12 + var(--node-gap) / 2),
        #000 calc(100% / 12 + var(--node-gap) / 2),
        #000 calc(100% / 6));
    -webkit-mask: repeating-linear-gradient(90deg,
        #000 0,
        #000 calc(100% / 12 - var(--node-gap) / 2),
        transparent calc(100% / 12 - var(--node-gap) / 2),
        transparent calc(100% / 12 + var(--node-gap) / 2),
        #000 calc(100% / 12 + var(--node-gap) / 2),
        #000 calc(100% / 6));
}
.timeline__item {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    justify-items: center;
    row-gap: 58px;
    --node-half: 43px;
    --stem-gap: 12px;
}
.timeline__node {
    position: relative;
    grid-row: 2;
    width: 96px;
    height: 86px;
    display: grid;
    place-items: center;
    z-index: 1;
}
.timeline__node::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--card-translucent);
    transition: background var(--t-base);
}
@supports (clip-path: polygon(50% 0, 100% 27.65%, 0 27.65%)) {
    .timeline__node::before {
        clip-path: polygon(50% 0, 100% 27.65%, 100% 72.35%, 50% 100%, 0 72.35%, 0 27.65%);
    }
}
.timeline__item:hover .timeline__node::before { background: var(--card-translucent-hover); }
.timeline__icon {
    position: relative;
    width: 42px;
    height: 42px;
    --icon-fill: var(--icon-lit-sky);
}
.timeline__text {
    position: relative;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    /*justify-content: flex-end;*/
    width: 145%;
    max-width: 400px;
    padding: 16px 18px 18px;
    background: var(--card-translucent);
    border-radius: var(--radius-lg);
}
.timeline__item.is-down .timeline__text { grid-row: 3; justify-content: flex-start; }
/* The stem belongs to the item, not to the card: it is structure, and it has
   to stay put while the card it points at arrives. */
.timeline__item::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 26px;
    background: var(--rail-tint, var(--rail-accent));
    transform: translateX(-50%);
}
.timeline__item.is-up::after { bottom: calc(50% + var(--node-half) + var(--stem-gap)); }
.timeline__item.is-down::after { top: calc(50% + var(--node-half) + var(--stem-gap)); }

.timeline__title {
    font-size: 1.05rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.timeline__desc { font-size: 0.9rem; color: var(--text-muted); margin: 0; line-height: 1.5; text-wrap: pretty; }

/* ============================================================
   Bending machine (video banner, glass title plate, render, embed)
   ============================================================ */
.bender {
    --bender-overlap: clamp(52px, 6.2vw, 96px);
}
.bender__stage {
    position: relative;
    margin-top: calc(-1 * var(--section-pad));
}
.bender__video {
    display: block;
    width: 100%;
    height: clamp(360px, 52vw, 720px);
    object-fit: cover;
    background: var(--bg-steel);
}
.bender__plate-frame {
    position: relative;
    z-index: 1;
    width: min(100% - 2 * var(--container-pad), 880px);
    margin: calc(-1 * var(--bender-overlap)) auto clamp(56px, 6vw, 92px);
}
.bender__plate {
    padding: clamp(26px, 3.2vw, 44px) clamp(24px, 4vw, 64px) clamp(28px, 3.4vw, 46px);
    text-align: center;
    border-radius: var(--radius-lg);
    background:
        var(--glass-plate-edge) top / 100% 1px no-repeat,
        var(--glass-plate-edge-b) bottom / 100% 1px no-repeat,
        var(--glass-plate);
    backdrop-filter: blur(var(--blur-plate)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--blur-plate)) saturate(1.4);
}
.bender__plate .section__title { margin-bottom: calc(var(--title-descender) * -1); }

/* ---------- Render and embed ---------- */
.bender__detail {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
    column-gap: clamp(28px, 3.4vw, 52px);
    align-items: center;
}
.bender__render {
    aspect-ratio: 1192 / 670;
    border-radius: var(--radius-photo);
    background-color: var(--bg-surface-2);
    background-image: url("/images/content/bending-machine-render-trimmed.webp");
    background-repeat: no-repeat;
    background-size: 150.923% 101.045%;
    background-position: 1.153% 57.143%;
}
.bender__aside {
    display: grid;
    row-gap: clamp(22px, 2.4vw, 34px);
    padding-left: clamp(28px, 3.4vw, 52px);
}
.bender__text {
    max-width: var(--measure-prose);
    margin: 0;
    color: var(--text-secondary);
    text-wrap: pretty;
}
.bender__media iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* ============================================================
   Category tiles
   ============================================================ */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 44px;
}

.category-spread {
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
}
.category-spread .section-intro { text-align: left; }
.category-spread .section-intro .section__title,
.category-spread .section-intro .section__lead { margin-inline: 0; }
.category-spread .category-grid { margin-top: 0; gap: 10px; }
.category-spread .category-card__label { margin-top: 12px; padding-bottom: 0; font-size: 0.9rem; }
.category-spread .category-card__label::after { display: none; }
.category-card { display: block; margin: 0; }
.category-card__frame {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-photo);
    overflow: hidden;
    contain: paint;
    background: var(--bg-surface-2);
}
.category-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
}
.category-card:hover .category-card__img { transform: scale(1.06); }
.category-card__label {
    position: relative;
    display: block;
    margin-top: 18px;
    padding-bottom: 16px;
    text-align: center;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.category-card__label::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--rule-accent);
    transform: translateX(-50%);
}

/* ============================================================
   Products & Services cards
   ============================================================ */
.service-run {
    --svc-pad: min(30px, var(--container-pad));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 64px;
    /*margin-inline: calc(var(--svc-pad) * -1);*/
}
.service-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px var(--svc-pad) 36px;
    background: none;
}
.service-card__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 22px;
    background: var(--bg-surface-2);
}
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__title {
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1.22;
    margin-bottom: 12px;
    text-wrap: balance;
}
.service-card__body { display: contents; }
.service-card__body p {
    max-width: var(--measure-prose);
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 0.9rem;
    text-wrap: pretty;
}
.service-card__body .btn { margin-top: auto; padding-inline: 20px; }

/* ============================================================
   Featured projects
   ============================================================ */
.project-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.project-head .section__title { margin-bottom: calc(var(--title-descender) * -1); }

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 56px;
}
.project-card:first-child { grid-column: 1 / -1; }
.project-card:first-child .project-card__frame { aspect-ratio: 12 / 5; }
.project-card {
    position: relative;
    background: none;
    overflow: hidden;
    border-radius: var(--radius-photo);
}
.project-card__frame { aspect-ratio: 4 / 3; overflow: hidden; contain: paint; border-radius: var(--radius-photo); background: var(--bg-surface-3); }
.project-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.project-card:hover .project-card__img { transform: scale(1.05); }
.project-card__body {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    padding: 130px 26px 24px;
    background: var(--scrim-plate);
}
.project-card__title {
    position: relative;
    padding-top: 18px;
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--text-primary);
    text-wrap: balance;
    transition: color var(--t-base);
}
.project-card__title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 3px;
    background: var(--accent);
}
.project-card:hover .project-card__title { color: var(--accent-text); }

.project-card__specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    gap: 4px 44px;
    margin: 0 0 14px;
}
.project-card__spec { min-width: 0; }
.project-card__spec dt {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.project-card__spec dd {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.3;
    color: var(--text-primary);
    text-wrap: pretty;
}

.project-card__cta {
    margin-top: 0;
    padding: 7px 0;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent-text);
}
.project-card__cta:hover { text-decoration: none; }
.project-card__cta--muted { margin: 0; color: var(--text-muted); }
.project-card__cta::after { content: ""; position: absolute; inset: 0; }
.project-card__cta span { display: inline-block; margin-left: 6px; transition: transform var(--t-fast); }
.project-card:hover .project-card__cta span { transform: translateX(5px); }

/* ============================================================
   Project detail — authored overview, ruled specifications
   ============================================================ */
.project-overview { max-width: var(--measure-prose); margin-inline: auto; }
.project-overview__body > :last-child { margin-bottom: 0; }
.project-overview__body p {
    margin: 0 0 1.15rem;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-secondary);
    text-wrap: pretty;
}
.project-overview__body h2 { font-size: 1.5rem; margin: 2.2rem 0 0.7rem; }
.project-overview__body h3 { font-size: 1.2rem; margin: 1.8rem 0 0.6rem; }
.project-overview__body h4 { font-size: 1.02rem; margin: 1.5rem 0 0.5rem; }
.project-overview__body ul,
.project-overview__body ol { margin: 0 0 1.15rem; padding-left: 1.35rem; color: var(--text-secondary); }
.project-overview__body li { margin-bottom: 0.5rem; }
.project-overview__body a { color: var(--accent-text); text-decoration: underline; }
.project-overview__body strong { color: var(--text-primary); }
.project-overview__body img { margin: 1.6rem 0; border-radius: var(--radius-photo); }
.project-overview__body blockquote {
    margin: 1.6rem 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--rule-accent);
    color: var(--text-body);
}
.project-overview__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.15rem; }
.project-overview__body th,
.project-overview__body td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-default);
    text-align: left;
    font-size: 0.95rem;
}
.project-overview__body th {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ============================================================
   Thin pages (Products / Wholesale)
   ============================================================ */
.thin-page { max-width: 720px; margin-inline: auto; }
.thin-page__lead { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem; text-wrap: pretty; }
.thin-page__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Legal / policy pages
   ============================================================ */
.legal-prose { max-width: var(--measure-prose); margin-inline: auto; }
.legal-prose__date {
    color: var(--accent-text);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}
.legal-prose h2 {
    font-size: 1.3rem;
    margin: 2rem 0 0.6rem;
    color: var(--text-primary);
}
.legal-prose p { margin-bottom: 1rem; }
.legal-prose p:not([class]) { color: var(--text-muted); }
.legal-prose ul { margin: 0 0 1rem; padding-left: 1.4rem; color: var(--text-muted); }
.legal-prose li { margin-bottom: 0.5rem; }

/* ============================================================
   Thank-you page
   ============================================================ */
.thankyou { max-width: 620px; margin-inline: auto; text-align: center; padding: 40px 0; }
.thankyou__check {
    width: 84px;
    height: 84px;
    margin: 0 auto 24px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: 2.6rem;
    line-height: 84px;
}
.thankyou__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    margin-bottom: 1rem;
}
.thankyou__text { max-width: var(--measure-prose); margin: 0 auto 2rem; font-size: 1.08rem; color: var(--text-secondary); }
.thankyou__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Contact page
   ============================================================ */
.contact-lead { max-width: 60ch; margin: 0 auto 2.5rem; color: var(--text-secondary); text-wrap: pretty; }
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 44px;
    align-items: start;
}
.contact-info {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.contact-info__item { display: flex; flex-direction: column; gap: 4px; }
.contact-info__label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-text);
}
.contact-info__item span:not(.contact-info__label) { color: var(--text-secondary); }
.contact-info__item a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
    transition: color var(--t-base), text-decoration-color var(--t-base);
}
.contact-info__item a:hover,
.contact-info__item a:focus-visible {
    color: var(--text-primary);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--accent-text);
}

.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.contact-form__input {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--text-primary);
    background: var(--bg-surface-2);
    transition: border-color var(--t-base), box-shadow var(--t-base), opacity var(--t-slow);
}
.contact-form__input::placeholder { color: var(--text-faint); }
.contact-form__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.contact-form__textarea { resize: vertical; min-height: 140px; }
.contact-form__submit { align-self: flex-start; border: none; cursor: pointer; }
.contact-form__field { display: flex; flex-direction: column; gap: 6px; }
.contact-form__error { font-size: 0.85rem; color: var(--accent-text); }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__input.invalid { border-color: var(--accent); }

/* ---------- Sending state ---------- */
.contact-form__submit {
    position: relative;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
}
.contact-form__submit > span {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
}
.contact-form__submit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--metal-sweep);
    transform: translateX(-100%);
    opacity: 0;
}
.contact-form__submit-label--busy { visibility: hidden; }

.contact-form[data-sending] { cursor: progress; }
.contact-form[data-sending] .contact-form__input { opacity: 0.5; }
.contact-form[data-sending] .contact-form__submit { cursor: progress; }
.contact-form[data-sending] .contact-form__submit:hover {
    background: var(--btn-primary-bg);
    border-color: transparent;
}
.contact-form[data-sending] .contact-form__submit-label--idle { visibility: hidden; }
.contact-form[data-sending] .contact-form__submit-label--busy { visibility: visible; }
.contact-form[data-sending] .contact-form__submit::after {
    opacity: 1;
    animation: fm-sweep var(--t-sweep) linear infinite;
}

@keyframes fm-sweep {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.form-alert {
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: 0.95rem;
    background: var(--bg-surface-2);
}
.form-alert--ok { border-color: var(--border-strong); color: var(--text-primary); }
.form-alert--error { border-color: var(--accent); color: var(--accent-text); }

.contact-map { line-height: 0; }
.contact-map iframe { display: block; width: 100%; }

/* ============================================================
   Gallery
   ============================================================ */
.gallery-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: clamp(340px, 34vw, 480px);
    overflow: hidden;
    background: var(--bg-base);
}
.gallery-hero__media { position: absolute; inset: 0; }
.gallery-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.gallery-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--scrim-banner-left);
}
.gallery-hero__content { position: relative; z-index: 1; }
.gallery-hero__title {
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    font-weight: 900;
    text-transform: uppercase;
    --lh: 1;
    line-height: var(--lh);
    letter-spacing: -0.022em;
    margin: 0 0 0.6rem;
}
.gallery-hero__lead {
    max-width: 46ch;
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 600;
    color: var(--text-body);
    text-shadow: var(--shadow-text-media);
    text-wrap: pretty;
}

.gallery-jump {
    position: sticky;
    top: var(--header-height-scrolled);
    z-index: 900;
    background: var(--bg-surface-2);
}
.gallery-jump__inner {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-block: 10px;
}
.gallery-jump a {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    color: var(--text-nav);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: var(--tracking-ui);
    text-transform: uppercase;
    transition: background var(--t-base), color var(--t-base);
}
.gallery-jump a:hover { background: var(--bg-surface-3); color: var(--text-primary); text-decoration: none; }
.gallery-jump a.is-current { background: var(--bg-surface-hover); color: var(--accent-text); }

.gallery-section { scroll-margin-top: calc(var(--header-height-scrolled) + 56px); }
.gallery-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.gallery-section__head .section__title { margin-bottom: calc(var(--title-descender) * -1); }
.gallery-section__count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}

.gallery-grid { display: grid; gap: 20px; }
.gallery-grid--projects { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.gallery-grid--installation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-grid--crops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-grid--film-logistics { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.gallery-grid--film-logistics .gallery-card { grid-column: span 4; }
.gallery-grid--film-logistics .gallery-card:nth-child(-n+4) { grid-column: span 3; }
.gallery-grid--projects .gallery-card:first-child .gallery-card__media { aspect-ratio: 22.4 / 9; }
.gallery-grid--videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-grid--project { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.gallery-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    transition: background var(--t-base);
}
.gallery-card:hover { background: var(--card-bg-hover); }
.gallery-card__link {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    color: inherit;
}
.gallery-card__link:hover { text-decoration: none; }
.gallery-card__media {
    position: relative;
    display: block;
    flex: 1 1 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    contain: paint;
    background: var(--bg-surface-3);
}
.gallery-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.gallery-card__link:hover img,
.gallery-card__link:focus-visible img { transform: scale(1.04); }
.gallery-card__body { flex: 0 0 auto; padding: 12px 16px 14px; }
.gallery-card__title { min-height: calc(2 * 1.3em); }
@supports (grid-template-rows: subgrid) {
    .gallery-card,
    .gallery-card__link {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        row-gap: 0;
    }
    .gallery-card__media { height: 100%; }
    .gallery-card__title { min-height: 0; }
}

.gallery-grid:has(.gallery-card__tag) .gallery-card__body:not(:has(.gallery-card__tag))::before {
    content: "\00a0";
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.gallery-card__tag {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--accent-text);
}
.gallery-card__title { margin: 0; font-size: 0.9375rem; line-height: 1.3; color: var(--text-primary); }

.gallery-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-metal-inset);
    background: var(--metal-badge);
    color: var(--text-primary);
}
.gallery-card__play::before {
    content: "";
    margin-left: 4px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid currentColor;
}
.gallery-card__badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-overlay);
    color: var(--text-body);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
}

.gallery-dialog {
    width: min(94vw, 1180px);
    max-height: 92vh;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--bg-surface-2);
    color: var(--text-body);
    box-shadow: var(--shadow-lightbox);
}
.gallery-dialog::backdrop { background: var(--scrim-lightbox); }
.gallery-dialog__nav {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--overlay-control);
    backdrop-filter: blur(6px);
    color: var(--text-primary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-base);
}
.gallery-dialog__nav:hover { background: var(--overlay-control-hover); }
.gallery-dialog__close { top: 12px; right: 12px; }
.gallery-dialog__stage { position: relative; }
.gallery-dialog__prev { top: 50%; left: 12px; transform: translateY(-50%); }
.gallery-dialog__next { top: 50%; right: 12px; transform: translateY(-50%); }
.gallery-dialog__counter {
    flex-shrink: 0;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--text-secondary);
}
.gallery-dialog__media { display: grid; place-items: center; background: var(--bg-base); }
.gallery-dialog__media img,
.gallery-dialog__media video,
.gallery-dialog__media iframe {
    display: block;
    width: 100%;
    max-height: 78vh;
    border: 0;
    object-fit: contain;
    aspect-ratio: 16 / 9;
}
.gallery-dialog__caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px 20px;
}
.gallery-dialog__caption h2 { margin: 0; font-size: 1.1rem; color: var(--text-primary); }
.gallery-dialog__caption p { margin: 6px 0 0; color: var(--text-muted); }

.gallery-cta__panel {
    position: relative;
    padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px);
    border: 1px solid var(--border-metal-inset);
    border-radius: var(--radius-lg);
    background: var(--metal-card);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent);
}
.gallery-cta__panel::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 4px;
    background: var(--accent);
}
.gallery-cta__panel .section__title {
    margin-bottom: 14px;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.02;
}
.gallery-cta__panel .section__lead { font-size: 1.05rem; color: var(--text-muted); }
.gallery-cta__actions { margin: 34px 0 0; }

/* ============================================================
   Testimonials
   ============================================================ */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 36px;
}
.testimonial-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 30px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.testimonial-card__heading { font-size: 1.1rem; color: var(--accent-text); margin: 0; }
.testimonial-card__quote { margin: 0; font-style: italic; color: var(--text-secondary); }
.testimonial-card__author { display: flex; flex-direction: column; margin-top: auto; }
.testimonial-card__name { font-weight: 700; color: var(--text-primary); }
.testimonial-card__role { font-size: 0.88rem; color: var(--text-faint); }