:root {
    --red: #cd2627;
    --red-hover: #a81f20;
    --bg-page: #f9f9f9;
    --bg-card: #f9f9f9;
    --text: #1c1c1c;
    --text-muted: #585858;
    /* Figma: Px Grotesk — Space Grotesk loaded via sktmt-google-fonts */
    --font: 'Px Grotesk', 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: var(--font);
    --font-body: var(--font);
    /* Full-bleed: no max-width on .container / .mission-inner / .spotlight-row.
       Edge breathing room is now controlled solely by --pad-x and the page
       padding tokens (--pad-x-mission etc.). */
    --container: 100%;
    --pad-x: clamp(20px, 6vw, 120px);
    --pad-x-mission: clamp(20px, 6.6vw, 95px);
    --pad-x-about-mission: clamp(24px, 8vw, 115px);
    --pad-x-contact: clamp(24px, 8.3vw, 120px);
    --pad-x-showcase: clamp(24px, 8.75vw, 126px);
    /* Figma BM Websites — section bands use py-90px @ 1440 (nodes 3528:1024, 3543:285, 3559:497) */
    --section-y: clamp(56px, 6.25vw, 90px);
    --section-gap: var(--section-y);
    --copy-stack-gap: clamp(1.25rem, 2.5vw, 36px);
    --strip-w: 255px;
    --split-gap: clamp(2rem, 5vw, 69px);
    --heading-section: clamp(1.75rem, 3.5vw, 2.25rem);
    --body-lead: clamp(1rem, 2vw, 1.5rem);
    /* Section title → first block (Figma gap 40 on specs / price / process / quality). */
    --section-block-gap: clamp(1.5rem, 2.7778vw, 40px);
}

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


body.home-page,
body.about-page,
body.price-page {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg-page);
    line-height: 1.55;
    letter-spacing: -0.02em;
}

body.price-page,
body.price-page #content,
body.price-page #primary.site-main,
body.price-page .site-content {
    background: var(--red);
}

body.product-page {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    /* Same canvas as Home / About so bands line up; section backgrounds handle contrast. */
    background: var(--bg-page);
    line-height: 1.55;
    letter-spacing: -0.02em;
    /* overflow-x set with home/about in mobile optimization layer */
    /* Hero min-height matches landing/product artboards (see --sktmt-product-hero-min on .hero-home--product). */
    --sktmt-product-hero-min: min(100vh, 1024px);
}

#top,
#about,
#contact,
#quality,
#product,
#specs,
#process {
    scroll-margin-top: 1.5rem;
}

body.nav-open {
    overflow: hidden;
}

/* Hide page chrome while menu is open — prevents double logo / hero copy behind drawer. */
body.nav-open #page {
    visibility: hidden;
}

body.nav-open .nav-overlay {
    visibility: visible;
}

/* Legacy overlay: hide hero hamburger when drawer open (not skt-rail mobile panel). */
body.nav-open:not(:has(#mobile-nav.skt-rail)) .hero-home__menu {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Native OS cursor — html.sktmt-native-cursor set in header.php (+ motion-init cleanup).
 * Fixes fake dot / cursor:none from legacy motion bundles or plugins even when motion CSS is off. */
#sktmt-cursor,
.sktmt-cursor,
[class*='sktmt-cursor-dot'] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

html.sktmt-native-cursor,
html.sktmt-native-cursor body {
    cursor: auto !important;
}

html.sktmt-native-cursor a[href] {
    cursor: pointer !important;
}

html.sktmt-native-cursor button,
html.sktmt-native-cursor [role='button'],
html.sktmt-native-cursor summary {
    cursor: pointer !important;
}

html.sktmt-native-cursor input:not([type='checkbox']):not([type='radio']),
html.sktmt-native-cursor textarea {
    cursor: text !important;
}

html.sktmt-native-cursor select,
html.sktmt-native-cursor label {
    cursor: pointer !important;
}

body.sktmt-cursor-live {
    cursor: auto !important;
}

body.sktmt-cursor-live a[href] {
    cursor: pointer !important;
}

body.sktmt-cursor-live button,
body.sktmt-cursor-live [role='button'],
body.sktmt-cursor-live summary {
    cursor: pointer !important;
}

body.sktmt-cursor-live input:not([type='checkbox']):not([type='radio']),
body.sktmt-cursor-live textarea {
    cursor: text !important;
}

body.sktmt-cursor-live select,
body.sktmt-cursor-live label {
    cursor: pointer !important;
}

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

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

.container {
    max-width: var(--container); /* now 100% — full-bleed */
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

/* Home + Product: edge-to-edge spotlight (550 DM showcase + mission keep horizontal inset). */
.home-page .section--spotlight .spotlight-row,
.product-page .section--spotlight .spotlight-row {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Product template — full viewport width below hero video layer. */
body.product-page #primary.site-main {
    max-width: none;
    overflow-x: clip;
    padding-left: 0;
    padding-right: 0;
}

body.product-page .hero-home--product .hero-home__artboard.hero-home__artboard--product {
    max-width: none;
    width: 100%;
    margin-inline: 0;
}

body.product-page .site-main > section .container {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.product-page .section--why-product {
    padding-left: 0;
    padding-right: 0;
}

body.product-page .section--why-product .why-about {
    max-width: none;
    width: 100%;
}

.home-page .section--contact-figma .container.contact-row {
    max-width: none;
    width: 100%;
}

/* Figma: each white/red band owns py-90; inner wrappers only handle horizontal inset + layout */
.section {
    padding-block: var(--section-y);
}

.home-page .site-main > .about-red.about-red--home,
body.about-page .site-main > .about-red,
body.product-page .site-main > .product-about-stack,
body.about-page .site-main > .banner-about-full,
body.about-page .site-main > .about-banner-slider {
    padding-block: 0;
}

/* About: full-bleed banner sits flush under mission (Figma 3559:705) */
body.about-page .section--mission-about {
    padding-bottom: 0;
}

.home-page .section--mission-home .mission-inner,
.home-page .section--product-home .product-showcase-wrap,
.home-page .section--spotlight .spotlight-row,
body.about-page .section--mission-about .mission-inner,
body.about-page .section--product-home .product-showcase-wrap,
body.product-page .section--mission-product .mission-inner,
body.product-page .section--spotlight .spotlight-row {
    padding-top: 0;
    padding-bottom: 0;
}

/* Home contact — Figma 3730:583 px-120 */
.home-page .section--contact .container.contact-row,
body.about-page .section--contact-figma .container.contact-row,
body.product-page .section--contact .container.contact-row {
    padding-left: var(--pad-x-contact);
    padding-right: var(--pad-x-contact);
}

body.product-page .site-main > section.section--v1 > .container {
    padding-left: var(--pad-x-contact);
    padding-right: var(--pad-x-contact);
}

body.about-page .section--why-about:not(.section--why-about-706) {
    padding-left: clamp(1.5rem, 7.8vw, 112px);
    padding-right: clamp(1.5rem, 7.8vw, 112px);
}

/**
 * Section shell V1 — shared marker on every marketing band (home / about / product).
 * Isolation keeps scroll-driven transforms and overlaps predictable at section edges.
 */
section.section--v1 {
    isolation: isolate;
}

.section--mission,
.section--why,
.section--product,
.section--quality,
.section--contact {
    background: #fff;
}

.section--why550 {
    background: #f9f9f9;
}


.heading-accent {
    margin: 0 0 clamp(1.25rem, 3vw, 2.25rem);
    font-family: var(--font-heading);
    font-size: clamp(1.875rem, 2.8vw, 2.25rem);
    font-weight: 700;
    color: var(--red);
    letter-spacing: -0.05em;
    line-height: 1.14;
}

.heading-red {
    margin: 0 0 clamp(1.25rem, 3vw, 3rem);
    font-family: var(--font-heading);
    font-size: clamp(1.875rem, 2.8vw, 2.25rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.05em;
    line-height: 1.14;
}

.body-text {
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 2vw, 1.5rem);
    font-weight: 400;
    line-height: 1.33;
    letter-spacing: -0.05em;
    opacity: 0.92;
}

.body-text p {
    margin: 0 0 1rem;
}

.body-text p:last-child {
    margin-bottom: 0;
}

/* Figma Px Grotesk — section headings, subheadings, descriptions */
.about-red__text,
.about-red__text p,
.product-showcase__desc,
.blog-intro,
.contact-row__intro {
    font-family: var(--font-body);
    font-weight: 400;
}

.product-showcase__title,
.product-used__heading,
.why550__heading,
.product-specs__heading,
.product-process__heading,
.product-quality__heading,
.product-price__heading,
.hero-home--inner .hero-home__inner-title {
    font-family: var(--font-heading);
    font-weight: 700;
}

.section-title {
    margin-bottom: clamp(2rem, 4vw, 2.5rem);
}

/* Specs / price / process / quality — Figma 40px title ↔ content */
.section--specs .heading-accent.section-title,
.section--price .heading-accent.section-title,
.section--process .heading-accent.section-title,
.section--product-quality .heading-accent.section-title {
    margin-bottom: var(--section-block-gap);
}

/* ——— Hero ——— */
.hero-home {
    position: relative;
    min-height: min(100vh, 1024px);
    margin-bottom: clamp(-3rem, -10vw, -5rem);
    color: #fff;
    overflow: hidden;
}

.hero-home__bg {
    position: absolute;
    inset: 0;
}

.hero-home__bg-inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-home__bg-inner > img:not(.hero-home__bg-fallback-img),
.hero-home__bg-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-home__bg-inner video.hero-home__bg-video {
    position: absolute;
    inset: 0;
}

.hero-home__bg-fallback-img {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Product hero — Figma 3574:1011 / 3556:145 (48% scrim over photo/video). */
.hero-home--product .hero-home__bg-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.48);
    pointer-events: none;
}

.hero-home--product .hero-home__bg-fallback-img,
.hero-home--product .hero-home__bg-video {
    object-fit: cover;
    object-position: center center;
}

.hero-home__bg-embed {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: #000;
}

.hero-home__bg-iframe,
.hero-home__bg-embed iframe {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100vw, 177.777vh);
    max-width: none;
    min-width: 100%;
    height: max(100vh, 56.25vw);
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    display: block;
}

.site-header-global {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    height: 0;
    z-index: 10160;
    pointer-events: none;
}

.site-header-global .hero-home__logo-mark,
.site-header-global .hero-home__menu {
    pointer-events: auto;
    mix-blend-mode: difference;
}

.site-header-global .hero-home__logo-mark img {
    display: block;
    mix-blend-mode: difference;
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.28));
}

.site-header-global .hero-home__menu {
    color: #fff;
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.28));
}

@media (prefers-reduced-motion: reduce) {

    .hero-home__bg-video,
    .hero-home__bg-embed {
        display: none !important;
    }

    .hero-home__bg-fallback-img {
        display: block !important;
    }
}

.hero-home__logo-mark {
    position: absolute;
    top: var(--hero-chrome-top, clamp(64px, 7.3vw, 105px));
    left: clamp(24px, 11vw, 159px);
    z-index: 3;
    display: flex;
    align-items: center;
    height: var(--hero-logo-h, 50px);
}

.hero-home__logo-mark img,
.hero-home__logo-mark .custom-logo {
    height: var(--hero-logo-h, 50px);
    width: auto;
    max-width: min(275px, 42vw);
    object-fit: contain;
}

.hero-home__strip {
    position: absolute;
    top: 0;
    right: 0;
    width: min(var(--strip-w), 22vw);
    height: 100%;
    background: rgba(22, 22, 22, 0.2);
    pointer-events: none;
}

/* About subpage: Figma 255px tinted rail (no CTA). Product: rail is layout-only — no band behind menu. */
.hero-home__artboard--about .hero-home__strip {
    z-index: 5;
    background: rgba(22, 22, 22, 0.2);
}

.hero-home--product .hero-home__strip,
.hero-home__artboard--product .hero-home__strip {
    z-index: 5;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.hero-home--product .hero-home__menu,
.hero-home--product .hero-home__menu:hover,
.hero-home--product .hero-home__menu:focus,
.hero-home--product .hero-home__menu:focus-visible,
.hero-home--product .hero-home__menu[aria-expanded='true'],
.hero-home--product .hero-home__menu.hero-home__menu--open,
body.nav-open .hero-home__menu {
    z-index: 210;
}

body.product-page.nav-open .hero-home--product .hero-home__menu {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.hero-home--product .hero-home__menu::before,
.hero-home--product .hero-home__menu::after {
    display: none !important;
    content: none !important;
    background: none !important;
    box-shadow: none !important;
}

.hero-home__artboard {
    position: relative;
    z-index: 2;
    min-height: min(100vh, 1024px);
    max-width: 1440px;
    margin: 0 auto;
}

.hero-home--about .hero-home__logo-mark,
.hero-home--product .hero-home__logo-mark {
    z-index: 6;
}

.hero-home__about-hero-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    width: min(572px, 87vw);
    pointer-events: none;
    text-align: center;
}

.hero-home__about-media-placeholder {
    width: 100%;
    min-height: clamp(110px, 11vw, 138px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(8, 8, 8, 0.22);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(3px);
}

.hero-home__about-placeholder-logo {
    width: min(360px, 62%);
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.32));
}

/* About hero — Figma 3574:1017 / 3574:1034 (−102px overlap into About red). */
.hero-home--about {
    min-height: min(100vh, 1024px);
    margin-bottom: -102px;
}

.hero-home--about .hero-home__artboard--about {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: min(100vh, 1024px);
}

.hero-home--about .hero-home__bg-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.32);
    pointer-events: none;
}

.hero-home--about .hero-home__logo-mark,
.hero-home--about .hero-home__menu,
.hero-home--about .hero-home__strip,
.hero-home--about .hero-home__about-hero-center {
    z-index: 4;
}

.hero-home--about .hero-home__menu {
    z-index: 7;
}

.hero-home__product-hero-copy {
    position: absolute;
    left: clamp(24px, 11vw, 159px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: min(719px, calc(100% - min(var(--strip-w), 22vw) - 48px));
    max-width: calc(100% - min(var(--strip-w), 22vw) - 48px);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: clamp(1rem, 2.15vw, 31px);
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.35));
}

.hero-home--product .hero-home__artboard--product {
    min-height: var(--sktmt-product-hero-min, min(100vh, 1024px));
}

.hero-home__menu {
    --menu-bar-h: 4px;
    --menu-bar-gap: 6px;
    --menu-x-shift: calc((var(--menu-bar-gap) + var(--menu-bar-h)) / 2);
    position: absolute;
    top: var(--hero-chrome-top, clamp(64px, 7.3vw, 105px));
    left: calc(100% - min(var(--skt-rail-w, var(--strip-w)), 22vw) / 2);
    transform: translateX(-50%);
    z-index: 7;
    pointer-events: auto;
    background: none;
    border: 0;
    padding: 0 8px;
    box-sizing: border-box;
    height: var(--hero-chrome-h, 40px);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--menu-bar-gap);
    transition: transform 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

body.nav-open .hero-home__menu {
    z-index: 210;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

/* No faded circle / pill behind the hamburger (all hero pages). */
.hero-home__menu,
.hero-home__menu:hover,
.hero-home__menu:focus,
.hero-home__menu:focus-visible,
.hero-home__menu[aria-expanded='true'],
.hero-home__menu.hero-home__menu--open,
body.nav-open .hero-home__menu {
    background: none !important;
    box-shadow: none !important;
}

.hero-home__menu::before,
.hero-home__menu::after {
    display: none !important;
    content: none !important;
    background: none !important;
    box-shadow: none !important;
}

.hero-home__menu:hover {
    transform: translateX(-50%) scale(1.04);
}

.hero-home__menu span {
    display: block;
    height: var(--menu-bar-h);
    background: #fff;
    border-radius: 1px;
    transform-origin: center;
    transition:
        transform 0.28s cubic-bezier(0.33, 1, 0.53, 1),
        width 0.28s cubic-bezier(0.33, 1, 0.53, 1);
    position: relative;
    z-index: 1;
}

.hero-home__menu span:first-child {
    width: 23px;
}

.hero-home__menu span:last-child {
    width: 37px;
}

/* Open drawer only — hamburger on hover; X when menu is open (single close control). */
.hero-home__menu[aria-expanded="true"] span:first-child,
.hero-home__menu.hero-home__menu--open span:first-child {
    width: 32px;
    transform: translateY(var(--menu-x-shift)) rotate(45deg);
}

.hero-home__menu[aria-expanded="true"] span:last-child,
.hero-home__menu.hero-home__menu--open span:last-child {
    width: 32px;
    transform: translateY(calc(-1 * var(--menu-x-shift))) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .hero-home__menu span {
        transition: none;
    }
}

@media (max-width: 768px) {
    .hero-home__menu,
    #menu-open.hero-home__menu {
        position: absolute !important;
        top: var(--hero-chrome-top, clamp(20px, 5.5vw, 32px));
        left: auto !important;
        right: 20px;
        z-index: 7;
        transform: none;
        -webkit-tap-highlight-color: transparent;
    }

    .hero-home__menu:hover {
        transform: scale(1.04);
    }

    .hero-home__menu,
    .hero-home__menu:hover,
    .hero-home__menu:focus,
    .hero-home__menu:focus-visible,
    .hero-home__menu[aria-expanded='true'],
    .hero-home__menu.hero-home__menu--open,
    body.nav-open .hero-home__menu {
        background: none !important;
        box-shadow: none !important;
    }

    .hero-home__menu::before,
    .hero-home__menu::after {
        display: none !important;
        content: none !important;
        background: none !important;
        box-shadow: none !important;
    }

    /* Right rail is layout-only on mobile — no faded band behind the menu icon. */
    .hero-home__strip,
    .hero-home__artboard--about .hero-home__strip,
    .hero-home__artboard--product .hero-home__strip,
    .hero-home--landing .hero-home__strip,
    .hero-home--about .hero-home__strip,
    .hero-home--product .hero-home__strip {
        background: transparent !important;
    }

    .hero-home__strip {
        width: min(120px, 28vw);
    }
}

.hero-home__center {
    position: relative;
    z-index: 2;
    min-height: min(100vh, 1024px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3.36rem var(--pad-x) 6rem;
}

.hero-home__brand-large {
    width: min(95vw, 520px);
    height: auto;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.35));
}

.hero-home__tagline {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 3vw, 1.5rem);
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hero-home__tagline-line {
    width: clamp(32px, 8vw, 72px);
    height: 1px;
    background: rgba(255, 255, 255, 0.85);
}

/* Home (landing) hero — Figma node 3697:301 (1440 × 1024).
   Desktop: VIEW PRODUCT in right rail; mobile: CTA in copy column (see breakpoints). */
.hero-home--landing {
    margin-bottom: 0;
}

.hero-home--landing .hero-home__bg-inner > img:not(.hero-home__bg-fallback-img),
.hero-home--landing .hero-home__bg-inner video.hero-home__bg-video {
    object-position: center top;
    transform: scale(1.08);
    transform-origin: center top;
}

.hero-home--landing .hero-home__bg-iframe,
.hero-home--landing .hero-home__bg-embed iframe {
    top: 48%;
    height: max(112vh, 63vw);
}

.hero-home--landing .hero-home__cta--copy {
    display: none;
}

.hero-home--landing .hero-home__strip {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    pointer-events: none;
    z-index: 6;
}

.hero-home--landing .hero-home__cta--strip {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
}

/* Universal CTAs — red + white label; hover slides to white fill + red label (2px red frame). */
.sktmt-btn:not(.sktmt-btn--on-dark),
.sktmt-btn--primary,
.btn-primary,
.btn-text-figma,
.btn-submit,
.hero-home__strip-cta,
.product-showcase__btn,
.hero-home__landing-cta {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
    width: 100%;
    max-width: min(344px, 100%);
    min-height: 75px;
    padding: 0 clamp(1.25rem, 2.5vw, 2rem);
    border: 2px solid var(--red, #cd2627);
    border-radius: 0;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: -0.05em;
    text-transform: capitalize;
    text-decoration: none;
    text-align: center;
    color: #fff;
    background-color: var(--red, #cd2627);
    background-image: linear-gradient(to top, #ffffff 50%, var(--red, #cd2627) 50%);
    background-size: 100% 200%;
    background-position: 0 0%;
    transition:
        background-position 0.45s cubic-bezier(0.33, 1, 0.53, 1),
        color 0.38s ease 0.06s;
    box-shadow: none;
}

button.sktmt-btn,
.btn-submit {
    appearance: none;
    -webkit-appearance: none;
}

.sktmt-btn:not(.sktmt-btn--on-dark):hover,
.sktmt-btn--primary:hover,
.btn-primary:hover,
.btn-text-figma:hover,
.btn-submit:hover,
.hero-home__strip-cta:hover,
.product-showcase__btn:hover,
.hero-home__landing-cta:hover {
    background-position: 0 100%;
    color: var(--red, #cd2627);
    text-decoration: none;
    box-shadow: none;
}

.sktmt-btn:not(.sktmt-btn--on-dark):focus,
.sktmt-btn--primary:focus,
.btn-primary:focus,
.btn-text-figma:focus,
.btn-submit:focus,
.hero-home__strip-cta:focus,
.product-showcase__btn:focus,
.hero-home__landing-cta:focus {
    outline: none;
}

.sktmt-btn:not(.sktmt-btn--on-dark):focus-visible,
.sktmt-btn--primary:focus-visible,
.btn-primary:focus-visible,
.btn-text-figma:focus-visible,
.btn-submit:focus-visible,
.hero-home__strip-cta:focus-visible,
.product-showcase__btn:focus-visible,
.hero-home__landing-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff;
}

.sktmt-btn:not(.sktmt-btn--on-dark):focus-visible:hover,
.sktmt-btn--primary:focus-visible:hover,
.btn-primary:focus-visible:hover,
.btn-text-figma:focus-visible:hover,
.btn-submit:focus-visible:hover,
.hero-home__strip-cta:focus-visible:hover,
.product-showcase__btn:focus-visible:hover,
.hero-home__landing-cta:focus-visible:hover {
    box-shadow: 0 0 0 2px #fff;
}

.hero-home__strip-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 75px;
    padding: 0 clamp(1.25rem, 2.5vw, 2rem);
    width: auto;
    max-width: 100%;
    margin: 0;
    align-self: flex-start;
    text-align: center;
    white-space: nowrap;
}

.hero-home__landing-cta {
    flex-shrink: 0;
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
}

.hero-home__landing-stack {
    position: relative;
    z-index: 4;
    min-height: min(100vh, 1024px);
    padding: clamp(4rem, 8vw, 5.25rem) min(max(var(--strip-w), 90px), 22vw) clamp(3rem, 13.6vh, 139px) clamp(24px, 11vw, 159px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Figma 3697:301 / 3529:1028 — copy rail left 159px, top 384px, w 719, gap 31. */
.hero-home__landing-copy {
    position: absolute;
    top: 37.5%;
    left: clamp(24px, 11vw, 159px);
    transform: translateY(0);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1rem, 2.15vw, 31px);
    max-width: min(719px, calc(100% - min(var(--strip-w), 22vw) - 32px));
    z-index: 4;
}

.hero-home__landing-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5.2083vw, 4.6875rem); /* 75px @ 1440 */
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.05em; /* Figma −3.75px on 75px */
    word-spacing: normal;
    color: rgba(255, 255, 255, 0.5);
}

.hero-home__landing-title-line {
    display: block;
}

/* Figma 3529:1026 — two visual lines: "Strength is defined by" / "what lies beneath." */
@media (min-width: 768px) {
    .hero-home--landing .hero-home__landing-title-line:first-child {
        white-space: nowrap;
    }
}

.hero-home__landing-title-line + .hero-home__landing-title-line {
    margin-top: 0;
}

.hero-home__landing-lead {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(1.125rem, 2.0833vw, 1.875rem); /* 30px @ 1440 */
    font-weight: 400;
    line-height: 1.2; /* 36px / 30 */
    letter-spacing: -0.05em; /* Figma −1.5px on 30px */
    word-spacing: normal;
    max-width: min(557px, 100%);
    color: #fff;
}

.hero-home__landing-spacer {
    flex: 0 0 auto;
    min-height: 0;
}

.hero-home__landing-watch {
    position: absolute;
    bottom: clamp(96px, 13.57vh, 139px); /* 1024 − 885 = 139px (Figma 3543:290) */
    left: clamp(24px, 11vw, 159px);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding-bottom: 0;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.05em; /* −0.8px on 16px */
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    white-space: nowrap;
}

.hero-home__landing-watch:hover {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

.hero-home__landing-watch img {
    width: 24px;
    height: 24px;
}

/* Section poster + play-in-place video */
.sktmt-media-video {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.sktmt-media-video__poster {
    position: relative;
    width: 100%;
}

.sktmt-media-video__poster img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.sktmt-media-video__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    transition: background 0.2s ease;
}

.sktmt-media-video__play:hover,
.sktmt-media-video__play:focus-visible {
    background: rgba(0, 0, 0, 0.4);
    outline: none;
}

.sktmt-media-video__play-icon {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    position: relative;
}

.sktmt-media-video__play-icon::after {
    content: '';
    position: absolute;
    left: 54%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent var(--red, #c41e3a);
}

.sktmt-media-video__play-text {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.sktmt-media-video__player {
    width: 100%;
    background: #000;
}

.sktmt-media-video__video {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.sktmt-media-video__embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.sktmt-media-video__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.banner-about-full .sktmt-media-video,
.about-banner-slider .sktmt-media-video {
    height: 100%;
}

.banner-about-full .sktmt-media-video__poster,
.banner-about-full .sktmt-media-video__poster img,
.banner-about-full .sktmt-media-video__video,
.banner-about-full .sktmt-media-video__player,
.banner-about-full .sktmt-media-video__embed,
.about-banner-slider .sktmt-media-video__poster,
.about-banner-slider .sktmt-media-video__player,
.about-banner-slider .sktmt-media-video__embed {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.about-page .quality-card .quality-card__media {
    position: relative;
    overflow: hidden;
}

body.about-page .quality-card .quality-card__media img,
body.about-page .quality-card .sktmt-media-video__poster img {
    width: 100%;
    height: auto;
    display: block;
}

.quality-card__media .sktmt-media-video__play-icon {
    width: 40px;
    height: 40px;
}

.quality-card__media .sktmt-media-video__play-icon::after {
    border-width: 7px 0 7px 11px;
}

.quality-card__media .sktmt-media-video__play-text {
    display: none;
}

/*
 * Product page intro — Figma 3586:88 @ 1440:
 * Hero 3574:1011 (−30px into About) + About band 3556:483 (red 1091×636, photo 1109×541).
 */
.hero-home--product {
    margin-bottom: -30px;
}

/* Product hero — Figma 3556:146 / 3574:1011: copy left 159px, gap 31px; title 75px @ 50%; lead 30/36. */
.hero-home--product .hero-home__product-kicker {
    margin: 0;
    max-width: min(719px, 100%);
    font-size: clamp(2.5rem, 6.2vw, 4.6875rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, 0.5);
}

.hero-home--product .hero-home__product-lead {
    margin: 0;
    max-width: min(557px, 100%);
    font-size: clamp(1.125rem, 2.6vw, 1.875rem);
    line-height: calc(36 / 30);
    letter-spacing: -0.05em;
    color: #fff;
    font-weight: 400;
}

/* Product hero: min-height must match body.product-page --sktmt-product-hero-min
   (header was full viewport while overlap used a shorter calc on small screens). */
.hero-home.hero-home--product {
    min-height: var(--sktmt-product-hero-min, min(100vh, 1024px));
}

/* Home about-red — Per Figma node 3660:1237 the shape is
   1021×541 with notch top-right.
   Frame 14 (text block) sits at x=95, y=88, w=825, h=365 inside the 1021×541
   panel, with the body text starting y=77 below the heading top (= 36-px gap
   below heading bottom).
   The double-class selector beats the base .about-red shorthand-padding rule
   regardless of source order. */
.about-red.about-red--home {
    padding-top: 0;
    padding-bottom: 0;
    background: #fff;
    /* Slight overlap into hero for a tighter transition (desktop/tablet). */
    position: relative;
    z-index: 8;
    margin-top: -12px;
}

.about-red.about-red--home .about-red__shape-wrap {
    width: min(1021px, 100%);
    min-height: clamp(420px, 37.6vw, 541px);
    height: auto;
    margin-left: 0;
    margin-right: auto;
}

.about-red.about-red--home .about-red__content {
    display: flex;
    flex-direction: column;
    gap: var(--copy-stack-gap);
    /* Fill the shape-wrap (1021 px max) so that after deducting padding
       (95 + 101 = 196 px) the body text gets the full Figma 825-px line length.
       Previously this was capped at 825 which caused the body to wrap into
       6 lines instead of the 4-line Figma layout. */
    max-width: 100%;
    width: 100%;
    /* Figma: top 88, right 101 (≈ panel width 1021 - text 825 - left 95),
       bottom 88, left 95. Notch occupies the top-right corner so the body
       width stays comfortably clear of it. */
    padding:
        clamp(2rem, 6.1111vw, 88px)
        clamp(1rem, 7.0139vw, 101px)
        clamp(2rem, 6.1111vw, 88px)
        clamp(1.25rem, 6.5972vw, 95px);
}

.about-red.about-red--home .heading-red {
    margin: 0;
    /* Figma "About Us" — 36 px Px Grotesk Bold, line-height 41 px, tracking -1.8 px. */
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    line-height: calc(41 / 36);
    letter-spacing: -0.05em;
}

.about-red.about-red--home .about-red__text {
    margin: 0;
    /* Figma body — 24 px Px Grotesk Regular, line-height 32 px, tracking -1.2 px,
       opacity 0.77 (matches base .about-red__text color). */
    font-size: clamp(1rem, 1.6667vw, 1.5rem);
    line-height: calc(32 / 24);
    letter-spacing: -0.05em;
}

.about-red.about-red--home .about-red__text p {
    margin: 0;
}

.about-red.about-red--home .about-red__text p + p {
    margin-top: clamp(1rem, 2.2222vw, 32px); /* one line-height between paragraphs */
}

/* About page + product-stack red section — same SVG shape (1065×541), typography,
   and padding model as About page (.about-red--about-page).
   Used on About template and inside .product-about-stack on the Product page. */
.about-red.about-red--about-page,
.about-red.about-red--product {
    padding-top: 0;
    padding-bottom: 0;
}

.about-red.about-red--about-page .about-red__shape-wrap,
.about-red.about-red--product:not(.about-red--figma-483) .about-red__shape-wrap {
    width: min(1065px, 100%);
    min-height: clamp(420px, 37.6vw, 541px);
    height: auto;
    margin-left: 0;
    margin-right: auto;
}

.about-red.about-red--product:not(.about-red--figma-483) .about-red__content {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 3.68vw, 53px);
    max-width: 100%;
    width: 100%;
    padding:
        clamp(2rem, 6.1111vw, 88px)
        clamp(1rem, 7.0139vw, 101px)
        clamp(2rem, 6.1111vw, 88px)
        clamp(1.25rem, 6.5972vw, 95px);
}

/* About page About Us — Figma 3559:552 (1065×541 shape, 819px copy block centered, gap 53). */
body.about-page .about-red.about-red--figma-552 {
    position: relative;
    /* Sit above hero image by a small overlap. */
    z-index: 8;
    padding: 0;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #fff;
    overflow: visible;
    box-sizing: border-box;
    margin-top: -12px;
}

body.about-page .about-red.about-red--figma-552::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: none;
    opacity: 1;
}

body.about-page .about-red.about-red--figma-552 .about-red__shape-wrap {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
    width: min(1065px, 100%);
    min-height: clamp(420px, 37.6vw, 541px);
    height: auto;
    margin-left: 0;
    margin-right: auto;
}

@media (max-width: 1199px) {
    body.about-page .about-red.about-red--figma-552 .about-red__shape-wrap {
        width: 100%;
        max-width: none;
    }

    body.about-page .about-red.about-red--figma-552 .about-red__content {
        padding-left: clamp(1.25rem, 5vw, 2rem);
        padding-right: clamp(1.25rem, 5vw, 2rem);
    }
}

@media (min-width: 1200px) {
    body.about-page .about-red.about-red--figma-552 .about-red__shape-wrap {
        width: min(1065px, 74vw);
    }
}

body.about-page .about-red.about-red--figma-552 .about-red__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(1.5rem, 3.68vw, 53px);
    width: 100%;
    max-width: min(819px, calc(100% - 2.5rem));
    margin: 0;
    margin-right: auto;
    /* Figma 3559:552 — left-aligned in shape (not centered); ~95px left clears the notch. */
    padding:
        clamp(3rem, 7.2222vw, 104px)
        clamp(1rem, 7.0139vw, 101px)
        clamp(2rem, 6.1111vw, 88px)
        clamp(1.25rem, 6.5972vw, 95px);
    box-sizing: border-box;
}

body.about-page .about-red.about-red--figma-552 .heading-red {
    margin: 0;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    line-height: calc(41 / 36);
    letter-spacing: -0.05em;
}

body.about-page .about-red.about-red--figma-552 .about-red__text {
    margin: 0;
    width: 100%;
    font-size: clamp(1rem, 1.6667vw, 1.5rem);
    line-height: calc(32 / 24);
    letter-spacing: -0.05em;
}

body.about-page .about-red.about-red--figma-552 .about-red__text p {
    margin: 0;
}

body.about-page .about-red.about-red--figma-552 .about-red__text p + p {
    margin-top: clamp(1rem, 2.2222vw, 32px);
}

.about-red.about-red--about-page .heading-red,
.about-red.about-red--product .heading-red {
    margin: 0;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    line-height: calc(41 / 36);
    letter-spacing: -0.05em;
}

.about-red.about-red--about-page .about-red__text,
.about-red.about-red--product .about-red__text {
    margin: 0;
    font-size: clamp(1rem, 1.6667vw, 1.5rem);
    line-height: calc(32 / 24);
    letter-spacing: -0.05em;
}

.about-red.about-red--about-page .about-red__text p,
.about-red.about-red--product .about-red__text p {
    margin: 0;
}

.about-red.about-red--about-page .about-red__text p + p,
.about-red.about-red--product .about-red__text p + p {
    margin-top: clamp(1rem, 2.2222vw, 32px); /* one line-height between paragraphs, matches home */
}

.home-page .section--mission-home .mission-inner,
.section--mission-home .mission-inner {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding-left: var(--pad-x-mission);
    padding-right: var(--pad-x-mission);
}

/* Home Our Mission — Figma 3697:274 (py 90 / px 95, copy 619, image 561×566, gap 69). */
.home-page .section--mission-home .mission-row--figma {
    gap: var(--split-gap);
}

.home-page .section--mission-home .mission-row--figma .mission-row__copy {
    flex: 0 1 619px;
    max-width: 619px;
    width: 100%;
}

.home-page .section--mission-home .mission-row--figma .mission-row__media {
    flex: 0 1 561px;
    max-width: 561px;
    width: 100%;
}

.home-page .section--mission-home .mission-row--figma .mission-row__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 561 / 566;
    max-height: none;
    object-fit: cover;
    object-position: center;
    display: block;
}

.home-page .section--mission-home .body-text p + p {
    margin-top: 2rem; /* Figma 32px line-height between paragraphs */
}

.home-page .section--mission-home .btn-text-figma {
    width: min(100%, 344px);
    min-height: 75px;
    font-size: 1.25rem; /* 20px */
    font-weight: 400;
    letter-spacing: -0.05em;
}

.section--mission-about .mission-inner {
    padding-left: var(--pad-x-about-mission);
    padding-right: var(--pad-x-about-mission);
}

/* About page Mission — Figma 3559:699 (py 90 / px 115, copy 619, image 507×392, gap 69). */
body.about-page .section--mission-about-699 .mission-inner {
    width: 100%;
    max-width: min(1440px, 100%);
    margin-inline: auto;
    box-sizing: border-box;
}

body.about-page .section--mission-about-699 .mission-row--about-figma {
    width: 100%;
    max-width: calc(619px + 69px + 507px);
    margin-inline: auto;
    justify-content: flex-start;
    column-gap: 69px;
}

body.about-page .section--mission-about-699 .mission-row--about-figma .mission-row__copy {
    flex: 0 1 619px;
    max-width: 619px;
    width: 100%;
    gap: clamp(1.25rem, 2.5vw, 36px);
}

body.about-page .section--mission-about-699 .mission-row--about-figma .mission-row__media {
    flex: 0 1 507px;
    max-width: 507px;
    width: 100%;
}

body.about-page .section--mission-about-699 .mission-row--about-figma .mission-row__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 507 / 392;
    max-height: none;
    object-fit: cover;
    object-position: center;
    display: block;
}

body.about-page .section--mission-about-699 .body-text p + p {
    margin-top: 2rem;
}

body.product-page .section--mission-product .mission-inner,
.section--mission-product .mission-inner {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding-left: var(--pad-x-mission);
    padding-right: var(--pad-x-mission);
}

.mission-row--figma {
    gap: var(--split-gap);
    align-items: center;
}

.mission-row--figma .mission-row__copy {
    display: flex;
    flex-direction: column;
    /* Figma 3697:274 / 3774:1721 — 36px between heading, body, CTA */
    gap: var(--copy-stack-gap);
}

/* Mission + spotlight copy — Figma 3697:274 / 3774:1721 (36 title, 24/32 body @ 77% on #1c1c1c). */
.section--mission-home .heading-accent,
.section--mission-about .heading-accent,
.section--mission-product .heading-accent,
.section--spotlight .heading-accent {
    margin: 0;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    line-height: calc(41 / 36);
    letter-spacing: -0.05em;
}

.section--mission-home .body-text,
.section--mission-about .body-text,
.section--mission-product .body-text,
.section--spotlight .body-text {
    font-size: clamp(1rem, 1.6667vw, 1.5rem);
    line-height: calc(32 / 24);
    letter-spacing: -0.05em;
    color: #1c1c1c;
    opacity: 0.77;
}

.section--mission-home .body-text p,
.section--mission-about .body-text p,
.section--mission-product .body-text p,
.section--spotlight .body-text p {
    margin: 0;
}

.section--mission-home .body-text p + p,
.section--mission-about .body-text p + p,
.section--mission-product .body-text p + p,
.section--spotlight .body-text p + p {
    margin-top: 1.5rem;
}

.mission-row--figma .mission-row__media img {
    max-height: min(566px, 72vh);
}

@media (min-width: 900px) {
    .mission-row--figma {
        grid-template-columns: minmax(280px, 619px) minmax(260px, 561px);
        justify-content: flex-start;
        column-gap: var(--split-gap);
    }

    .home-page .section--mission-home .mission-row--figma {
        grid-template-columns: 619px 561px;
        justify-content: flex-start;
        column-gap: 69px;
        max-width: calc(619px + 69px + 561px);
    }

    .mission-row--about-figma {
        grid-template-columns: minmax(280px, 619px) minmax(260px, 507px);
        justify-content: space-between;
    }
}

.mission-row--about-figma .mission-row__media img {
    max-height: 392px;
}

@media (max-width: 1023px) {
    body.about-page .section--mission-about-699 .mission-row--about-figma,
    .mission-row--about-figma {
        display: flex;
        flex-direction: column;
        gap: clamp(1.5rem, 4vw, 2.5rem);
        max-width: none;
    }

    body.about-page .section--mission-about-699 .mission-row--about-figma .mission-row__copy,
    body.about-page .section--mission-about-699 .mission-row--about-figma .mission-row__media,
    .mission-row--about-figma .mission-row__copy,
    .mission-row--about-figma .mission-row__media {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    body.about-page .section--mission-about-699 .mission-row--about-figma .mission-row__media img,
    .mission-row--about-figma .mission-row__media img {
        width: 100%;
        max-height: none;
        aspect-ratio: 507 / 392;
        object-fit: cover;
        object-position: center;
    }
}

.btn-text-figma,
.sktmt-btn--primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: min(344px, 100%);
    min-height: 75px;
    padding: 0 clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: none;
}

.btn-text-figma__label {
    position: relative;
    z-index: 1;
}

.home-page .section--product-home .product-showcase-wrap,
body.about-page .section--product-about-281 .product-showcase-wrap,
.section--product-home .product-showcase-wrap {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    max-width: none;
    padding-left: var(--pad-x-showcase);
    padding-right: var(--pad-x-showcase);
}

.product-showcase--home {
    isolation: isolate;
    width: 100%;
    max-width: min(1188px, calc(100vw - 2 * var(--pad-x-showcase)));
    margin-inline: auto;
}

.product-showcase--home .product-showcase__molten,
.product-showcase--home .product-showcase__steel {
    z-index: 0;
}

.product-showcase--home .product-showcase__molten img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    max-width: none;
}

/* Home card: content drives height (Figma 271px at 1440); bg SVG stretches
   to fill. The .product-showcase--home double-class beats the base overflow rule. */
.product-showcase.product-showcase--home .product-showcase__card {
    overflow: visible;
}

.product-showcase.product-showcase--home .product-showcase__card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.product-showcase.product-showcase--home .product-showcase__card-inner {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: clamp(1.5rem, 3vw, 2.7rem) clamp(1.5rem, 5vw, 3.9rem);
    gap: clamp(1rem, 2vw, 1.75rem); /* Figma 28px title ↔ body */
}

.product-showcase--home .product-showcase__title {
    font-size: clamp(1.45rem, 4vw, 3.125rem); /* Figma 50px */
    line-height: 1.12;
    letter-spacing: -0.05em;
}

.product-showcase--home .product-showcase__desc {
    font-size: clamp(0.875rem, 1.35vw, 1.1875rem); /* Figma 19px */
    line-height: calc(24 / 19);
    letter-spacing: -0.05em;
    max-width: 32rem;
}

/* About 550 DM Bar — Figma 3697:281 (px 126 / py 90, grid 1188×728). */
body.about-page .section--product-about-281 {
    background: #fff;
}

body.about-page .product-showcase--figma-281 {
    max-width: min(1188px, calc(100vw - 2 * var(--pad-x-showcase)));
}

body.about-page .product-showcase.product-showcase--figma-281 .product-showcase__card {
    overflow: visible;
}

body.about-page .product-showcase.product-showcase--figma-281 .product-showcase__card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

body.about-page .product-showcase--figma-281 .product-showcase__molten img {
    height: 155.42%;
    top: -55.48%;
    left: 0;
    width: 100%;
    object-position: left center;
}

body.about-page .product-showcase--figma-281 .product-showcase__title {
    font-size: clamp(1.45rem, 4vw, 3.125rem);
    line-height: 1.12;
    letter-spacing: -0.05em;
}

body.about-page .product-showcase--figma-281 .product-showcase__desc {
    font-size: clamp(0.875rem, 1.35vw, 1.1875rem);
    line-height: calc(24 / 19);
    letter-spacing: -0.05em;
    max-width: 514px;
}

@media (max-width: 699px) {
    .product-showcase--home .product-showcase__molten,
    .product-showcase--home .product-showcase__steel {
        position: relative;
        min-height: clamp(180px, 42vw, 260px);
    }

    body.about-page .section--product-about-281 .product-showcase-wrap {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.about-page .product-showcase--figma-281 .product-showcase__molten img {
        height: 100%;
        top: 0;
        object-position: center 42%;
    }
}

/* About banner slider — Figma 3559:705 (1440×816) */
.about-banner-slider {
    position: relative;
    width: 100%;
    height: clamp(380px, 56.67vw, 816px);
    background: #fff;
    box-sizing: border-box;
}

.about-banner-slider__frame {
    position: relative;
    height: 100%;
    padding: clamp(14px, 1.53vw, 22px);
    box-sizing: border-box;
}

.about-banner-slider__viewport {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: #0a0a0a;
}

.about-banner-slider__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.about-banner-slider__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.about-banner-slider__slide.is-active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}

.about-banner-slider__slide img,
.about-banner-slider__slide .sktmt-media-video,
.about-banner-slider__slide .sktmt-media-video__poster,
.about-banner-slider__slide .sktmt-media-video__poster img {
    width: 100%;
    height: 117.65%;
    object-fit: cover;
    object-position: center top;
    margin-top: -14%;
    display: block;
}

.about-banner-slider__slide .sktmt-media-video {
    height: 100%;
    overflow: hidden;
}

.about-banner-slider__slide .sktmt-media-video__poster img {
    margin-top: -14%;
}

.about-banner-slider__label {
    position: absolute;
    left: clamp(18px, 4.72vw, 68px);
    top: 50%;
    z-index: 6;
    transform: translateY(-50%);
    pointer-events: none;
}

.about-banner-slider__label-inner {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-body, var(--font));
    font-size: clamp(0.6875rem, 0.97vw, 0.875rem);
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1.35;
    text-transform: uppercase;
    white-space: nowrap;
}

.about-banner-slider__brand {
    color: var(--red, #cd2627);
    font-weight: 700;
}

.about-banner-slider__slash,
.about-banner-slider__caption {
    color: #1c1c1c;
    font-weight: 400;
}

.about-banner-slider__counter {
    position: absolute;
    right: clamp(18px, 4.72vw, 68px);
    top: 50%;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1vw, 12px);
    transform: translateY(-50%);
    font-family: var(--font-body, var(--font));
    font-variant-numeric: tabular-nums;
    color: #1c1c1c;
    pointer-events: none;
}

.about-banner-slider__counter-current {
    font-size: clamp(1.125rem, 1.67vw, 1.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
}

.about-banner-slider__counter-total {
    font-size: clamp(0.8125rem, 1.11vw, 1rem);
    font-weight: 400;
    line-height: 1;
    opacity: 0.9;
}

.about-banner-slider__counter-rule {
    display: block;
    width: clamp(22px, 2.5vw, 32px);
    height: 1px;
    background: #1c1c1c;
}

.about-banner-slider__corner--tl {
    position: absolute;
    top: clamp(14px, 1.53vw, 22px);
    left: clamp(14px, 1.53vw, 22px);
    z-index: 6;
    width: 32px;
    height: 32px;
    background: #1c1c1c;
    pointer-events: none;
}

.about-banner-slider__corner--tl::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--red, #cd2627);
    border-left: 2px solid var(--red, #cd2627);
}

.about-banner-slider__corner--tr {
    position: absolute;
    top: clamp(14px, 1.53vw, 22px);
    right: clamp(14px, 1.53vw, 22px);
    z-index: 6;
    width: 32px;
    height: 24px;
    pointer-events: none;
}

.about-banner-slider__corner--tr::before,
.about-banner-slider__corner--tr::after {
    content: '';
    position: absolute;
    right: 0;
    display: block;
    height: 2px;
    background: var(--red, #cd2627);
}

.about-banner-slider__corner--tr::before {
    top: 4px;
    width: 28px;
}

.about-banner-slider__corner--tr::after {
    bottom: 4px;
    width: 18px;
}

.about-banner-slider__nav {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    width: min(22%, 180px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.about-banner-slider__nav--prev {
    left: 0;
}

.about-banner-slider__nav--next {
    right: 0;
}

.about-banner-slider:focus {
    outline: none;
}

.about-banner-slider:focus-visible .about-banner-slider__frame {
    outline: 2px solid var(--red, #cd2627);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .about-banner-slider__slide {
        transition: none;
    }
}

/* Legacy single-image banner (fallback) */
.banner-about-full:not(.about-banner-slider) {
    position: relative;
    height: clamp(380px, 70vw, 816px);
    overflow: hidden;
}

.banner-about-full:not(.about-banner-slider) img {
    width: 100%;
    height: 117.65%;
    object-fit: cover;
    object-position: center top;
    margin-top: -14%;
}

/* Vertical rhythm from `.section`; horizontal inset below + body.about-page rule */
.why-about {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.why-about__panel {
    position: relative;
    z-index: 2;
    max-width: min(787px, 100%);
    background: #fff;
    padding: clamp(2rem, 5vw, 49px) clamp(1.25rem, 5vw, 44px);
}

.why-about__panel .heading-accent {
    margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
}

.why-about__panel .body-text {
    font-size: clamp(1rem, 2vw, 1.5rem);
    line-height: 1.33;
}

.why-about__panel .body-text p + p {
    margin-top: 1.5rem;
}

.why-about__photo {
    margin: clamp(2rem, 8vw, 4rem) 0 0;
}

.why-about__photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* About page Why Choose Us — Figma 3562:706 (py 90 / px 112, panel 787, photo 804×515 @ 500/386). */
body.about-page .why-about--figma-706 {
    width: 100%;
    max-width: min(1304px, 100%);
    margin-inline: auto;
    padding-left: clamp(1.25rem, 7.8vw, 112px);
    padding-right: clamp(1.25rem, 7.8vw, 112px);
    box-sizing: border-box;
}

body.about-page .why-about--figma-706 .why-about__panel {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 36px);
    max-width: 787px;
    padding: clamp(1.75rem, 4vw, 49px) clamp(1.25rem, 3.5vw, 44px);
    box-sizing: border-box;
}

body.about-page .why-about--figma-706 .why-about__panel .heading-accent {
    margin: 0;
}

body.about-page .why-about--figma-706 .why-about__panel .body-text {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 36px);
    font-size: clamp(1rem, 1.6667vw, 1.5rem);
    line-height: calc(32 / 24);
    letter-spacing: -0.05em;
    color: #1c1c1c;
    opacity: 0.77;
}

body.about-page .why-about--figma-706 .why-about__panel .body-text p {
    margin: 0;
}

body.about-page .why-about--figma-706 .why-about__panel .body-text p + p {
    margin-top: 0;
}

body.about-page .why-about--figma-706 .why-about__photo {
    margin: clamp(2rem, 5vw, 3rem) 0 0;
    max-width: 804px;
}

body.about-page .why-about--figma-706 .why-about__photo img {
    aspect-ratio: 804 / 515;
    max-height: min(515px, 72vw);
}

@media (min-width: 960px) {
    body.about-page .why-about--figma-706 {
        min-height: 901px;
        padding-left: 0;
        padding-right: 0;
    }

    body.about-page .why-about--figma-706 .why-about__panel {
        position: absolute;
        left: 0;
        top: 0;
        width: 787px;
        max-width: none;
        padding: 49px 44px;
    }

    body.about-page .why-about--figma-706 .why-about__photo {
        position: absolute;
        left: 500px;
        top: 386px;
        width: 804px;
        max-width: none;
        margin: 0;
        z-index: 1;
    }

    body.about-page .why-about--figma-706 .why-about__photo img {
        width: 804px;
        height: 515px;
        max-height: none;
        aspect-ratio: auto;
    }
}

.section--spotlight {
    background: #fff;
}

.spotlight-row {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--pad-x-mission);
    padding-right: var(--pad-x-mission);
    display: grid;
    gap: var(--split-gap);
    align-items: center;
}

@media (min-width: 900px) {
    .spotlight-row {
        grid-template-columns: minmax(260px, 1fr) minmax(280px, 619px);
        align-items: center;
    }

    .spotlight-row--img-right .spotlight-row__media {
        order: 2;
    }

    .spotlight-row--img-right .spotlight-row__copy {
        order: 1;
    }
}

.spotlight-row__media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    min-height: 0;
}

.spotlight-row__media img {
    width: 100%;
    max-width: 561px;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center center;
}

.spotlight-row__copy {
    display: flex;
    flex-direction: column;
    gap: var(--copy-stack-gap);
}

/* Home Spotlight — Figma 1:102 (red band, TMT worker left, white copy + white CTA right). */
.home-page .section--spotlight-home-102 {
    background: var(--red);
    overflow: hidden;
}

.home-page .section--spotlight-home-102 .spotlight-row--figma-102 {
    gap: var(--split-gap);
    width: 100%;
    max-width: min(1440px, 100%);
    margin-inline: auto;
    padding-left: var(--pad-x-mission);
    padding-right: var(--pad-x-mission);
    box-sizing: border-box;
    justify-items: center;
    align-items: center;
}

.home-page .section--spotlight-home-102 .spotlight-row--figma-102 .spotlight-row__media {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: clamp(320px, 52vw, 680px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    margin-left: clamp(-2rem, -8.4vw, -121px);
}

.home-page .section--spotlight-home-102 .spotlight-row--figma-102 .spotlight-row__media img,
.home-page .section--spotlight-home-102 .spotlight-row--figma-102 .spotlight-row__media .sktmt-media-video__poster img {
    width: min(926px, 130%);
    max-width: none;
    height: auto;
    max-height: clamp(400px, 80vw, 680px);
    object-fit: cover;
    object-position: center top;
    border-radius: 47px;
    display: block;
}

.home-page .section--spotlight-home-102 .spotlight-row--figma-102 .spotlight-row__copy {
    flex: 0 1 619px;
    max-width: 619px;
    width: 100%;
    margin-inline: auto;
    gap: 36px;
    z-index: 1;
}

.home-page .section--spotlight-home-102 .heading-accent {
    color: #fff;
}

.home-page .section--spotlight-home-102 .body-text {
    color: #fff;
    opacity: 0.77;
}

.home-page .section--spotlight-home-102 .body-text p + p {
    margin-top: 2rem;
}

.home-page .section--spotlight-home-102 .spotlight-row__cta.sktmt-btn {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--red, #cd2627);
    border-color: #fff;
    background-color: #fff;
    background-image: linear-gradient(to top, var(--red, #cd2627) 50%, #ffffff 50%);
}

.home-page .section--spotlight-home-102 .spotlight-row__cta.sktmt-btn:hover {
    background-position: 0 100%;
    color: #fff;
}

.home-page .section--spotlight-home-102 .spotlight-row__cta.sktmt-btn:focus-visible {
    box-shadow: 0 0 0 2px #fff;
}

.home-page .section--spotlight-home-102 .spotlight-row__cta.sktmt-btn:focus-visible:hover {
    box-shadow: 0 0 0 2px #fff;
}

@media (min-width: 900px) {
    .home-page .section--spotlight-home-102 .spotlight-row--figma-102 {
        grid-template-columns: minmax(280px, 1fr) 619px;
        justify-content: center;
        column-gap: 69px;
    }
}

.section--contact-figma .contact-row {
    gap: var(--split-gap);
}

.hero-home__center--product {
    align-items: center;
    text-align: center;
}

.hero-home__product-kicker {
    margin: 0 0 clamp(1rem, 3vw, 1.75rem);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 6.5vw, 4.25rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    opacity: 0.88;
    line-height: 1.08;
    max-width: min(90vw, 20ch);
}

.hero-home__product-lead {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.4vw, 1.45rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    max-width: 38rem;
    opacity: 0.95;
}

.section--quality-about .container {
    max-width: none;
    padding-left: clamp(24px, 7.6vw, 110px);
    padding-right: clamp(24px, 7.6vw, 110px);
}

/* ——— Full-screen menu overlay ——— */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 250;
    visibility: hidden;
    pointer-events: none;
    background: var(--red);
}

.nav-overlay--open {
    visibility: visible;
    pointer-events: auto;
}

.nav-overlay__inner {
    display: flex;
    height: 100%;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.33, 1, 0.53, 1);
    background: var(--red);
    opacity: 1;
}

.nav-overlay--open .nav-overlay__inner,
.nav-overlay--open.nav-overlay--peek .nav-overlay__inner {
    opacity: 1;
}

/* GSAP initNavMotion sets inline x — CSS transition fights the timeline and can leave
   the panel stuck off-screen. Let GSAP own transform when motion nav is active. */
body.sktmt-motion-nav .nav-overlay__inner {
    transition: none;
}

.nav-overlay--open .nav-overlay__inner {
    transform: translateX(0);
}

.nav-overlay__main {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    background: var(--red);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 6vw, 4rem) clamp(2rem, 4vw, 3rem);
    min-height: 100%;
}

.nav-overlay__top {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.nav-overlay__close--in-main {
    display: block;
    flex-shrink: 0;
    margin: 0 0 0 auto;
    position: static;
    order: 2;
}

.nav-overlay__top .nav-overlay__brand {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
}

.nav-overlay__brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    max-width: min(22rem, 88vw);
}

.nav-overlay__brand:hover {
    text-decoration: none;
    opacity: 0.92;
}

.nav-overlay__logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: min(200px, 70vw);
    object-fit: contain;
}

.nav-overlay__brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav-overlay__brand-name--visible {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    font-size: clamp(1.125rem, 3vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.nav-overlay__brand-tag {
    display: block;
    font-size: clamp(0.6875rem, 2vw, 0.8125rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    opacity: 0.88;
    margin-top: 0.35rem;
    text-transform: none;
}

.nav-overlay__list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.25rem, 4vh, 2.25rem);
}

.nav-overlay__list a {
    display: block;
    font-size: clamp(1.125rem, 3.2vw, 1.5rem);
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.25;
    background: transparent;
    border: 0;
    border-radius: 0;
    /* Visible while the panel is off-canvas; avoid opacity: 0 here + GSAP inline styles (broken menu). */
    opacity: 1;
    transform: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.nav-overlay__list a:hover,
.nav-overlay__list a:focus,
.nav-overlay__list a:focus-visible {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    background: transparent;
    outline: none;
}

.nav-overlay__list a:focus-visible {
    box-shadow: inset 3px 0 0 #fff;
}

.nav-overlay__products-trigger {
    display: block;
    font-size: clamp(1.125rem, 3.2vw, 1.5rem);
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.25;
    cursor: default;
}

.nav-overlay__products .nav-overlay__sublist {
    list-style: none;
    margin: 0;
    padding: clamp(0.75rem, 2vh, 1.25rem) 0 0 1rem;
    display: none;
    flex-direction: column;
    gap: clamp(0.75rem, 2vh, 1.25rem);
}

.nav-overlay__products:hover .nav-overlay__sublist,
.nav-overlay__products:focus-within .nav-overlay__sublist {
    display: flex;
}

.nav-overlay__rail {
    display: none !important;
}

.nav-overlay__preview {
    display: none !important;
}

.nav-overlay__preview {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.nav-overlay--preview-active .nav-overlay__preview,
.nav-overlay--open .nav-overlay__preview {
    opacity: 1;
}

.nav-overlay__preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: opacity 0.25s ease;
    filter: saturate(0.85) contrast(1.05);
}

.nav-overlay__close {
    position: relative;
    z-index: 2;
    background: none;
    border: 0;
    padding: 0.5rem;
    cursor: pointer;
    color: #fff;
    line-height: 1;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-overlay__close:hover {
    opacity: 0.85;
    transform: scale(1.08);
}

.nav-overlay__close:active {
    transform: scale(0.96);
}

.nav-overlay__close-icon {
    display: block;
    position: relative;
    width: 36px;
    height: 36px;
}

.nav-overlay__close-icon::before,
.nav-overlay__close-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 3px;
    background: currentColor;
    border-radius: 1px;
}

.nav-overlay__close-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.nav-overlay__close-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .nav-overlay__inner {
        transition-duration: 0.01ms;
    }

    .nav-overlay__list a {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .nav-overlay--open .nav-overlay__list li:nth-child(n) a {
        transition-delay: 0s;
    }
}

/* ——— About red ——— */
.about-red {
    position: relative;
    z-index: 1;
    padding: clamp(2rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem);
}

.about-red__shape-wrap {
    position: relative;
    width: min(1065px, 96vw);
    margin-inline: auto;
    min-height: clamp(420px, 52vw, 541px);
    height: auto;
}

.about-red.about-red--home .about-red__shape,
.about-red.about-red--about-page .about-red__shape,
body.about-page .about-red.about-red--figma-552 .about-red__shape {
    object-fit: fill;
}

.about-red__shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

.about-red__content {
    position: relative;
    z-index: 1;
    padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4rem) clamp(3rem, 8vw, 5rem);
    max-width: 52rem;
}

.about-red__text {
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 1.9vw, 1.5rem);
    font-weight: 400;
    line-height: 1.33;
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, 0.77);
}

.about-red__text p {
    margin: 0 0 1rem;
}

.about-red__text p:last-child {
    margin-bottom: 0;
}

/* ——— Product page — About 550 DM Bar — Figma 3556:483 (1091×636 red, photo 1109×541) ——— */
.product-about-stack--figma-483 .about-red.about-red--product .about-red__shape-wrap {
    width: 100%;
    max-width: none;
    min-height: max(480px, calc(636 * 100vw / 1440));
}

.product-about-stack--figma-483 .about-red.about-red--product .about-red__shape {
    object-fit: fill;
}

/* ——— Product page — About 550 DM Bar (red panel + photo) ———
   Geometry scales from Figma 1440 artboard; pinned px at ≥1200. */
.product-about-stack {
    position: relative;
    z-index: 2;
    padding-block: 0;
    padding-inline: 0;
    /* Stage matches reference (clean white vs hero); keep distinct from --bg-page. */
    background: #fff;
    overflow: visible;
    box-sizing: border-box;
}

/* Overlap: .hero-home--product pulls up by −30px (Figma 3586:88); red panel uses top: −95px @ 1440. */

.product-about-stack__inner {
    position: relative;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
    isolation: isolate;
    /* 987px stage @ 1440 → scales as 987/1440 * 100vw */
    min-height: max(520px, calc(987 * 100vw / 1440));
}

.product-about-stack__red {
    position: absolute;
    left: 0;
    /* Overlap hero: -95px @ 1440 */
    top: calc((-95 * 100vw / 1440) - 12px);
    z-index: 8;
}

.product-about-stack .about-red.about-red--product {
    position: relative;
    z-index: 1;
}

.product-about-stack .about-red.about-red--product .about-red__shape-wrap {
    position: relative;
    width: 100%;
    margin-inline: 0;
    /* Red frame 636px tall @ 1440 */
    min-height: max(480px, calc(636 * 100vw / 1440));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}

/* Stretch SVG notch asset to Figma red frame 1091×636. */
.product-about-stack .about-red.about-red--product .about-red__shape {
    object-fit: fill;
}

/* Copy column — Figma 3556:218: 840×382 @ left 120px inside red (Frame 15), gap 53px */
@media (min-width: 1200px) {
    .product-about-stack .about-red.about-red--product .about-red__content {
        z-index: 3;
        position: relative;
        width: 100%;
        max-width: 840px;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 53px;
        text-align: left;
        align-items: flex-start;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    /* Let the red frame grow with content; keep Figma-like insets. */
    .product-about-stack .about-red.about-red--product .about-red__shape-wrap {
        padding:
            clamp(3rem, 7.2222vw, 104px)
            clamp(1.25rem, 7.0139vw, 101px)
            clamp(2.5rem, 6.1111vw, 88px)
            clamp(1.25rem, 8.3333vw, 120px);
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .product-about-stack .about-red.about-red--product .heading-red {
        font-size: clamp(1.85rem, 2.5vw, 2.25rem); /* 36px cap */
        line-height: calc(41 / 36);
        letter-spacing: -0.05em;
    }

    .product-about-stack .about-red.about-red--product .about-red__text,
    .product-about-stack .about-red.about-red--product .about-red__text--product {
        font-size: clamp(1rem, 1.6667vw, 1.5rem); /* 24px cap */
        line-height: calc(32 / 24);
        letter-spacing: -0.05em;
    }
}

.product-about-stack .about-red.about-red--product .heading-red {
    text-align: left;
    width: 100%;
}

/* Strip builder-injected ornaments (e.g. dot) above the product About heading. */
#product-about-heading::before,
#product-about-heading::after {
    content: none !important;
    display: none !important;
}

.product-about-stack .about-red__text--product {
    margin: 0;
    max-width: 840px;
    width: 100%;
    text-align: left;
    color: rgba(255, 255, 255, 0.77);
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.2222vw, 32px);
}

.product-about-stack .about-red__text--product p {
    margin: 0;
}

/* Highest specificity + important — WP blocks / Elementor often force center on headings/body. */
#product-about.product-about-stack .about-red.about-red--product .about-red__content,
#product-about.product-about-stack .about-red.about-red--product .about-red__content h2,
#product-about.product-about-stack .about-red.about-red--product .about-red__text,
#product-about.product-about-stack .about-red.about-red--product .about-red__text p {
    text-align: left !important;
}

#product-about .about-red--product .about-red__content,
#product-about .about-red--product .heading-red,
#product-about .about-red--product .about-red__text,
#product-about .about-red--product .about-red__text--product,
#product-about .about-red--product .about-red__text p {
    text-align: left !important;
}

/* Photo layer — Figma 3556:220 @ 1440: 1109×541, right edge flush (x 331 = 1440 − 1109). */
.product-about-stack__photo {
    position: absolute;
    left: auto;
    right: 0;
    top: calc(446 * 100vw / 1440);
    width: calc(1109 * 100vw / 1440);
    height: calc(541 * 100vw / 1440);
    margin: 0;
    padding: 0;
    z-index: 1;
    clip-path: polygon(10.914% 0, 100% 0, 100% 100%, 0 100%, 0 23.577%);
    overflow: hidden;
    background: #1a1a1a;
    box-sizing: border-box;
}

.product-about-stack__photo .product-about-stack__photo-media,
.product-about-stack__photo .sktmt-media-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

.product-about-stack__photo .sktmt-media-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.product-about-stack__photo img,
.product-about-stack__photo .product-about-stack__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
    margin: 0;
    padding: 0;
}

@media (min-width: 1200px) {
    /*
     * Figma 3556:483 — full artboard bleed (1440 wide): red left:0, photo right:0.
     * Break out of any centered page column so edges touch the viewport.
     */
    body.product-page #product-about.product-about-stack {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-inline: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    .product-about-stack__inner {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        min-height: calc(987 * 100vw / 1440);
    }

    .product-about-stack__red {
        left: 0;
        width: calc(1091 * 100vw / 1440);
        top: calc((-95 * 100vw / 1440) - 12px);
    }

    .product-about-stack__photo {
        left: auto;
        right: 0;
        width: calc(1109 * 100vw / 1440);
        height: calc(541 * 100vw / 1440);
        top: calc(446 * 100vw / 1440);
    }

    .product-about-stack__photo img,
    .product-about-stack__photo .product-about-stack__photo-img {
        object-position: center center;
        /* Figma 3556:220 — asset mirrored in frame */
        transform: rotate(180deg) scaleY(-1);
        transform-origin: center center;
    }
}

/* Figma 3556:483 @ 1440 — typography pins (geometry stays vw-scaled for edge bleed) */
@media (min-width: 1200px) {
    .product-about-stack--figma-483 .about-red.about-red--product .about-red__shape-wrap {
        min-height: calc(636 * 100vw / 1440);
    }

    .product-about-stack--figma-483 .about-red.about-red--product .about-red__content {
        left: 120px;
        width: 840px;
        max-width: min(840px, 58vw);
        gap: 53px;
        padding-right: 1.5rem;
        box-sizing: border-box;
    }

    .product-about-stack--figma-483 .about-red.about-red--product .heading-red {
        font-size: 36px;
        line-height: 41px;
    }

    .product-about-stack--figma-483 .about-red.about-red--product .about-red__text,
    .product-about-stack--figma-483 .about-red.about-red--product .about-red__text--product {
        font-size: 24px;
        line-height: 32px;
    }
}

/* Below 1200px the photo clip overlaps copy — stack into a clean vertical flow. */
@media (max-width: 1199px) {
    #product-about.product-about-stack {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-inline: 0;
    }

    .product-about-stack__inner {
        max-width: none;
        margin-inline: 0;
        min-height: 0;
        height: auto;
        padding: 0;
    }

    .product-about-stack__red {
        position: relative;
        width: 100%;
        left: auto;
        top: auto;
    }

    .product-about-stack .about-red.about-red--product .about-red__shape-wrap {
        min-height: 0;
    }

    .product-about-stack .about-red.about-red--product .about-red__shape {
        object-fit: cover;
    }

    .product-about-stack .about-red.about-red--product .about-red__content {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        max-width: none;
        width: 100%;
        margin-inline: 0;
        text-align: left !important;
        align-items: flex-start;
        justify-content: flex-start;
        gap: clamp(1.25rem, 3.68vw, 53px);
        padding: 2.5rem 20px 3rem;
    }

    .product-about-stack__photo img,
    .product-about-stack__photo .product-about-stack__photo-img {
        transform: none;
    }

    .product-about-stack__photo {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        margin-top: clamp(1.5rem, 5vw, 2.5rem);
        margin-left: 0;
        margin-right: 0;
        margin-inline: 0;
        padding: 0;
        clip-path: none;
    }

    .product-about-stack__photo .product-about-stack__photo-media,
    .product-about-stack__photo .sktmt-media-video,
    .product-about-stack__photo .sktmt-media-video__poster {
        position: relative;
        inset: auto;
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .product-about-stack .about-red.about-red--product .heading-red {
        font-size: clamp(1.5rem, 3.5vw, 2rem);
    }
}

/* ——— Mission ——— */
.mission-row {
    display: grid;
    gap: clamp(2rem, 5vw, 4.25rem);
    align-items: center;
}

@media (min-width: 900px) {
    .mission-row {
        grid-template-columns: minmax(280px, 619px) minmax(260px, 507px);
        justify-content: space-between;
    }
}

.mission-row__media img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
}

/* ——— Full banner ——— */
.banner-full {
    height: clamp(280px, 70vw, 816px);
    overflow: hidden;
}

.banner-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ——— Why composite ——— */
.why-composite {
    display: grid;
    gap: clamp(2rem, 5vw, 3rem);
    align-items: end;
}

@media (min-width: 960px) {
    .why-composite {
        grid-template-columns: minmax(280px, 787px) 1fr;
        gap: clamp(1rem, 3vw, 2rem);
        align-items: start;
        min-height: min(901px, auto);
    }

    .why-composite__photo {
        margin-top: clamp(2rem, 15vw, 12rem);
        justify-self: end;
    }
}

.why-composite__panel {
    background: #fff;
    padding: clamp(1rem, 3vw, 2.75rem) clamp(0.5rem, 2vw, 2.75rem) 0 0;
}

.why-composite__photo {
    margin: 0;
}

.why-composite__photo img {
    width: 100%;
    max-width: 804px;
    margin-left: auto;
    height: auto;
    object-fit: cover;
}

/* ——— Product showcase ——— */
.product-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 792px;
    margin: 0 auto;
    padding-bottom: clamp(4rem, 12vw, 6rem);
}

.product-showcase__molten {
    aspect-ratio: 792 / 364;
    overflow: hidden;
}

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

.product-showcase__steel {
    aspect-ratio: 792 / 364;
    overflow: hidden;
}

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

.product-showcase__card {
    position: relative;
    align-self: center;
    width: min(100%, 638px);
    margin-top: clamp(-3rem, -10vw, -5rem);
    margin-bottom: 1rem;
    z-index: 2;
}

.product-showcase__card-bg {
    width: 100%;
    height: auto;
}

.product-showcase__card-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding: clamp(1.25rem, 4vw, 2.75rem) clamp(1.5rem, 5vw, 3rem);
}

.product-showcase__title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.1rem);
    font-weight: 700;
    letter-spacing: -0.055em;
}

.product-showcase__desc {
    margin: 0;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.5;
    max-width: 32rem;
}

.btn-primary,
.sktmt-btn--primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: min(344px, 100%);
    min-height: 75px;
    padding: 0 clamp(1.5rem, 4vw, 2.5rem);
    align-self: flex-start;
    margin-top: 0.5rem;
}

.product-showcase__btn {
    text-decoration: none;
}

@media (min-width: 700px) {
    .product-showcase {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        align-items: stretch;
    }

    .product-showcase__molten {
        grid-column: 1;
        grid-row: 1;
    }

    .product-showcase__steel {
        grid-column: 2;
        grid-row: 2;
    }

    .product-showcase__card {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        width: min(88%, 638px);
    }

    .product-showcase__btn {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        margin-top: 0;
    }

    /* Home product showcase — Figma node 3697:281 (1188 × 728 inner grid).
       Layout: two 792×364 images form a diagonal overlap (molten top-left,
       steel bottom-right with 396px horizontal offset); 638.5×271 card centered
       overlapping both; 344×75 LEARN MORE button anchored to the card's left
       edge near the bottom of the grid (overlapping the steel image). */
    .product-showcase--home {
        position: relative;
        display: block;
        width: 100%;
        max-width: min(1188px, calc(100vw - 2 * var(--pad-x-showcase)));
        aspect-ratio: auto;
        min-height: 728px;
        padding: 0;
        margin-inline: auto;
    }

    .product-showcase--home .product-showcase__molten,
    .product-showcase--home .product-showcase__steel {
        position: absolute;
        width: 66.6667%;
        height: 50%;
        aspect-ratio: auto;
        min-height: 0;
        margin: 0;
        overflow: hidden;
        z-index: 0;
    }

    .product-showcase--home .product-showcase__molten {
        left: 0;
        top: 0;
    }

    .product-showcase--home .product-showcase__steel {
        left: 33.3333%;
        top: 50%;
    }

    .product-showcase--home .product-showcase__steel img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        max-width: none;
    }

    .product-showcase--home .product-showcase__card {
        position: relative;
        left: auto;
        top: auto;
        width: 53.7458%;
        max-width: 638.5px;
        min-height: 271px;
        aspect-ratio: auto;
        margin: clamp(10rem, 19.3%, 14.375rem) 0 0 23.1481%;
        transform: none;
        z-index: 2;
    }

    .product-showcase--home .product-showcase__btn {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        width: 28.9562%;
        max-width: 344px;
        margin: 0 0 0 23.1481%;
        transform: none;
        text-transform: uppercase;
        font-size: 1.25rem;
        z-index: 3;
    }
}

/* ——— Quality — Figma 3693:232 (horizontal cards 345×394) ——— */
.section--quality-232 .product-quality__heading {
    margin: 0 0 var(--section-block-gap);
}

.section--quality-232 .quality-card {
    flex: 0 0 345px;
    width: 345px;
    min-height: 394px;
    height: 394px;
    padding: 0;
    overflow: hidden;
}

.section--quality-232 .quality-card__inner {
    width: 316px;
    max-width: calc(100% - 2rem);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 394px;
    box-sizing: border-box;
}

.section--quality-232 .quality-card__media {
    width: 100%;
    height: 251px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section--quality-232 .quality-card__media img {
    width: 100%;
    height: 251px;
    object-fit: contain;
    margin: 0;
}

.section--quality-232 .quality-card__label,
.section--quality-232 .quality-card p {
    margin: 0;
    text-align: center;
}

.quality-scroll {
    display: flex;
    gap: 18px; /* Figma 3693:232 */
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.quality-card {
    flex: 0 0 min(345px, 85vw);
    scroll-snap-align: start;
    background: #f9f9f9;
    min-height: 394px;
    box-sizing: border-box;
    padding: 0 0.875rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    text-align: center;
    border-radius: 0;
}

.quality-card__step {
    display: block;
    font-size: clamp(1rem, 1.3889vw, 1.25rem); /* 20px */
    color: #585858;
    letter-spacing: -0.05em;
    margin: 0;
}

.quality-card img {
    width: 100%;
    height: 251px;
    object-fit: contain;
    margin: 0;
}

.quality-card p {
    margin: 0;
    font-size: clamp(1.125rem, 1.6667vw, 1.5rem); /* 24px */
    line-height: 1.25;
    letter-spacing: -0.05em;
    color: #000;
    font-weight: 400;
}

/* ——— Contact — Figma 3730:583 (px 120 / py 90, form 496, photo 646×551) ——— */
.section--contact .contact-row__form > .heading-accent {
    margin: 0 0 1rem;
    font-size: 2.25rem;
    letter-spacing: -0.05em;
    line-height: 1.14;
}

.section--contact .contact-row__form > .contact-row__intro {
    margin: 0 0 2.5rem; /* Figma 3730:585 — 16px title gap + 40px before fields */
    font-size: 1.125rem;
    line-height: 1.333333;
    letter-spacing: -0.05em;
    color: #000;
    max-width: none;
}

.contact-row {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 900px) {
    .contact-row {
        grid-template-columns: minmax(280px, 496px) minmax(280px, 646px);
        justify-content: space-between;
        align-items: stretch;
    }
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 496px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    font-family: inherit;
    font-size: 14px;
    line-height: normal;
    letter-spacing: -0.05em;
    min-height: 53px;
    padding: 0 30px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.contact-form textarea {
    min-height: 127px;
    padding-top: 23px;
    padding-bottom: 23px;
    resize: vertical;
}

.contact-form select {
    color: #222;
    background-color: #fff;
}

.contact-form select:invalid {
    color: #acacac;
}

.contact-form select option {
    color: #222;
    background-color: #fff;
}

.contact-form select option:hover,
.contact-form select option:focus,
.contact-form select option:checked,
.contact-form select option:selected {
    color: #fff;
    background: var(--red, #cd2627);
    box-shadow: 0 0 0 9999px var(--red, #cd2627) inset;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #acacac;
}

.btn-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 19px;
    width: 100%;
    max-width: 344px;
    min-height: 75px;
}

.sktmt-btn::-moz-focus-inner,
.btn-submit::-moz-focus-inner {
    border: 0;
    padding: 0;
}

@media (prefers-reduced-motion: reduce) {
    .sktmt-btn:not(.sktmt-btn--on-dark),
    .sktmt-btn--primary,
    .btn-primary,
    .btn-text-figma,
    .hero-home__strip-cta,
    .btn-submit,
    .footer-newsletter-form .sktmt-btn.sktmt-btn--on-dark,
    .home-page .section--spotlight-home-102 .spotlight-row__cta.sktmt-btn {
        transition-duration: 0.01ms;
    }
}

.contact-row__photo img {
    width: 100%;
    height: 100%;
    min-height: min(551px, 60vh);
    object-fit: cover;
}

/* ——— Footer (Figma BM Websites — node 3707:429) ——— */
.site-footer {
    background: var(--red);
    color: #fff;
    padding: clamp(3rem, 8vw, 5rem) 0 32px;
}

.site-footer__shell {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    flex-direction: column;
    gap: 61px;
}

.site-footer__logo-row {
    padding-top: clamp(0.5rem, 2vw, 1.25rem);
}

.site-footer__logo-row .footer-logo-wrap {
    margin: 0;
    display: block;
    line-height: 0;
}

.site-footer__logo-row .custom-logo-link,
.site-footer__logo-row .footer-logo {
    display: block;
    text-decoration: none;
    color: inherit;
}

.site-footer__logo-row .footer-logo:hover,
.site-footer__logo-row .custom-logo-link:hover {
    opacity: 0.92;
}

.site-footer__logo-row .footer-logo img,
.site-footer__logo-row .custom-logo-link img {
    height: clamp(40px, 6vw, 56px);
    width: auto;
    max-width: 298px;
    display: block;
    object-fit: contain;
}

.site-footer__columns-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
    width: 100%;
}

@media (min-width: 1080px) {
    .site-footer__columns-row {
        grid-template-columns: minmax(0, 453px) minmax(0, 1fr);
        column-gap: clamp(1.5rem, 3vw, 2.5rem);
        row-gap: 0;
    }
}

.site-footer__newsletter {
    width: 100%;
    max-width: 453px;
    min-width: 0;
}

.footer-newsletter-block__title {
    margin: 0 0 22px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    text-transform: capitalize;
}

.footer-newsletter-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.footer-newsletter-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    min-height: 61px;
    height: 61px;
    padding: 0 1rem 0 1.25rem;
    border: 1px solid #fff;
    box-sizing: border-box;
    gap: 0.5rem;
}

.footer-newsletter-form input {
    flex: 1;
    min-width: 0;
    border: none;
    padding: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
}

.footer-newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 480px) {
    .footer-newsletter-form {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        min-height: 0;
        padding: 1rem;
        gap: 0.75rem;
    }

    .footer-newsletter-form input {
        width: 100%;
    }

    .footer-newsletter-form .sktmt-btn.sktmt-btn--on-dark {
        width: 100%;
        min-height: 56px;
        justify-content: center;
    }
}

.sktmt-form-notice {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    max-width: min(92vw, 28rem);
    padding: 0.875rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9375rem;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.sktmt-form-notice--success {
    background: #fff;
    color: #1c1c1c;
    border: 2px solid var(--red);
}

.sktmt-form-notice--error {
    background: var(--red);
    color: #fff;
}

.blog-single__back.sktmt-btn--primary {
    display: inline-flex;
    margin-top: 1.5rem;
}

/* Footer send — inverted polarity + white frame on var(--red) (see sktmt_btn_class). */
.footer-newsletter-form .sktmt-btn.sktmt-btn--on-dark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1rem;
    margin: 0;
    box-sizing: border-box;
    border: 2px solid #fff;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.05em;
    text-transform: capitalize;
    text-decoration: none;
    color: var(--red);
    background-image: linear-gradient(to top, var(--red) 50%, #ffffff 50%);
    background-size: 100% 200%;
    background-position: 0 0%;
    transition:
        background-position 0.45s cubic-bezier(0.33, 1, 0.53, 1),
        color 0.38s ease 0.06s;
}

.footer-newsletter-form .sktmt-btn.sktmt-btn--on-dark:hover {
    background-position: 0 100%;
    color: #fff;
    text-decoration: none;
}

.footer-newsletter-form .sktmt-btn.sktmt-btn--on-dark:focus {
    outline: none;
}

.footer-newsletter-form .sktmt-btn.sktmt-btn--on-dark:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff;
}

.footer-newsletter-form .sktmt-btn.sktmt-btn--on-dark:focus-visible:hover {
    box-shadow: 0 0 0 2px #fff;
}

.footer-newsletter-block__fine {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
}

.footer-newsletter-block__fine a {
    color: inherit;
    text-decoration: underline;
}

/* Menu columns: single row on desktop (no flex-wrap jump); Figma gaps */
.site-footer__menus {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
    align-items: start;
    justify-items: start;
    width: 100%;
}

@media (min-width: 600px) and (max-width: 1079px) {
    .site-footer__menus {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 1.25rem;
    }
}

@media (min-width: 1080px) {
    .site-footer__menus {
        grid-template-columns: 103px 169px 73px 113px;
        column-gap: 55px;
        row-gap: 0;
        width: max-content;
        max-width: 100%;
        justify-self: end;
    }
}

.footer-col {
    min-width: 0;
}

.footer-col--shop,
.footer-col--info,
.footer-col--social,
.footer-col--legal {
    width: 100%;
}

.footer-col__header {
    margin: 0 0 10px;
}

.footer-col h3,
.footer-col__header {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    text-transform: capitalize;
}

.footer-col__toggle {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-transform: capitalize;
    cursor: default;
}

.footer-col__heading {
    display: inline;
}

.footer-col__icon {
    display: none;
}

.footer-col__panel {
    display: block;
}

.footer-col ul,
.footer-col .menu,
.footer-col__panel ul,
.footer-col__panel .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col li,
.footer-col__panel li {
    margin-bottom: 7px;
}

.footer-col li:last-child,
.footer-col__panel li:last-child {
    margin-bottom: 0;
}

.footer-col a,
.footer-col .menu a,
.footer-col__panel a,
.footer-col__panel .menu a {
    font-size: 16px;
    line-height: 24px;
    opacity: 1;
    color: inherit;
    text-decoration: none;
}

.footer-col a:hover,
.footer-col .menu a:hover,
.footer-col__panel a:hover,
.footer-col__panel .menu a:hover {
    text-decoration: underline;
}

/* Footer menus — accordion layout (mobile only) */
@media (max-width: 767px) {
    .site-footer__menus {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .footer-col--accordion {
        border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    }

    .footer-col--accordion:last-child {
        border-bottom: 0;
    }

    .footer-col__header {
        margin: 0;
    }

    .footer-col__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
        padding: 1rem 0;
        cursor: pointer;
    }

    .footer-col__icon {
        display: block;
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        position: relative;
    }

    .footer-col__icon::before,
    .footer-col__icon::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        background: #fff;
        transform: translate(-50%, -50%);
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .footer-col__icon::before {
        width: 14px;
        height: 2px;
    }

    .footer-col__icon::after {
        width: 2px;
        height: 14px;
    }

    .footer-col__toggle[aria-expanded='true'] .footer-col__icon::after {
        transform: translate(-50%, -50%) scaleY(0);
        opacity: 0;
    }

    .footer-col__panel {
        padding: 0 0 1rem;
    }

    .footer-col--accordion:not(.is-open) .footer-col__panel {
        display: none;
    }

    .footer-col--accordion.is-open .footer-col__panel {
        display: block;
    }
}

@media (min-width: 768px) {
    .footer-col__header {
        margin: 0 0 10px;
    }

    .footer-col__toggle {
        display: block;
        width: auto;
        padding: 0;
        pointer-events: none;
        cursor: default;
    }

    .footer-col__icon {
        display: none;
    }
}

.site-footer__bottom {
    margin-top: clamp(2.5rem, 6vw, 4rem);
}

.site-footer__bottom-inner {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
}

.site-footer__rule {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.38);
}

.site-footer__copyright {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}
/* ——— Product page sections ——— */
.product-used-grid {
    display: grid;
    /* Figma 3556:482 — ~86px row and column rhythm on desktop. */
    gap: clamp(2rem, 5.97vw, 5.375rem) clamp(1.75rem, 5.97vw, 5.375rem);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .product-used-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .product-used-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.section--product-used .used-card {
    background: transparent;
    border: none;
    padding: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.5vw, 1.35rem);
}

.section--product-used .used-card__media {
    flex-shrink: 0;
    align-self: flex-start;
    width: 98px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: clamp(0px, 4.3vw, 62px);
}

.section--product-used .used-card__placeholder {
    width: 98px;
    height: 74px;
    max-width: 98px;
    background: #eaeaea;
    border-radius: 0;
}

.section--product-used .used-card__thumb {
    display: block;
    width: 98px;
    height: 74px;
    max-width: 98px;
    object-fit: cover;
    background: #eaeaea;
    border-radius: 0;
}

.section--product-used .used-card__icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 98px;
    height: 74px;
    max-width: 98px;
    color: #1c1c1c;
    will-change: transform, opacity;
}

.section--product-used .used-card__icon-svg svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.section--product-used .used-card__icon-svg svg [fill]:not([fill='none']) {
    fill: currentColor;
}

.section--product-used .used-card__icon-svg svg [stroke]:not([stroke='none']) {
    stroke: currentColor;
}

.section--product-used .used-card__icon-svg svg path,
.section--product-used .used-card__icon-svg svg circle,
.section--product-used .used-card__icon-svg svg rect,
.section--product-used .used-card__icon-svg svg ellipse,
.section--product-used .used-card__icon-svg svg line,
.section--product-used .used-card__icon-svg svg polyline,
.section--product-used .used-card__icon-svg svg polygon {
    vector-effect: non-scaling-stroke;
}

.section--product-used .used-card__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Figma 3556:482 — ~29px between index and title. */
    gap: 0.35rem 1.8125rem;
    margin: 0;
}

.section--product-used .used-card__rule {
    width: 1px;
    height: 2.625rem; /* Figma 42px */
    flex-shrink: 0;
    background: #bababa;
}

.section--product-used .used-card__num {
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    color: #bababa;
    letter-spacing: -0.05em;
    flex-shrink: 0;
}

.section--product-used .used-card__title {
    margin: 0;
    font-size: clamp(1.125rem, 1.7361vw, 1.5625rem); /* 25px */
    font-weight: 400;
    color: #000;
    letter-spacing: -0.05em;
    line-height: 1.2;
    flex: 1 1 12rem;
    min-width: 0;
}

.section--product-used .used-card__desc {
    margin: 0;
    padding-left: clamp(2rem, 3.26vw, 47px);
    max-width: 16.5rem;
    font-size: 1.125rem; /* 18px */
    color: #bababa;
    line-height: 1.35;
    letter-spacing: -0.05em;
}

.section--specs,
.section--faq,
.section--process,
.section--price,
.section--product-quality {
    background: #fff;
}

/* Used in — Figma 3556:482 (bg #f9f9f9, py 90 / px 120 via .container) */
.section--product-used {
    background: #f9f9f9;
}

.product-used__layout {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 2.5rem);
}

.section--product-used-482 .product-used__heading {
    margin: 0;
}

.product-used__heading {
    margin-bottom: var(--section-block-gap);
}

/* ——— Why Choose 550 DM Bar — Figma 3556:452 (1440 × 704, bg #f9f9f9) ———
   Inner block is 1210 wide; heading 36px red bold above a two-column row
   (sidebar 581 + 74 gap + content 555) with 52px vertical gap. */
.section--why550-452 {
    background: #f9f9f9;
    overflow: visible;
}

.why550__layout {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
}

.why550__rail,
.why550__panels {
    display: none;
}

.why550__stack {
    display: flex;
    flex-direction: column;
}

.why550__shape-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.why550__item {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    /* Figma 3556:452 — shape 581×430, tabs at left 76px (gap 35px, centered on shape), content 555px + 74px gap. */
    .why550__layout {
        display: grid;
        grid-template-columns: minmax(0, 581fr) minmax(0, 555fr);
        column-gap: clamp(1.5rem, 5.1389vw, 74px);
        align-items: center;
        max-width: 1210px;
        margin-inline: auto;
    }

    .why550__rail {
        display: block;
        position: relative;
        width: 100%;
        max-width: 581px;
        min-height: clamp(280px, 29.8611vw, 430px);
    }

    .why550__panels {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        position: relative;
        width: 100%;
        max-width: 555px;
        min-height: clamp(280px, 29.8611vw, 430px);
        min-width: 0;
    }

    .why550__stack {
        display: none;
    }

    .why550__shape {
        position: relative;
        z-index: 0;
        width: 100%;
        max-width: 581px;
        height: clamp(280px, 29.8611vw, 430px);
        filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.08));
        pointer-events: none;
    }

    .why550__tabs {
        position: absolute;
        left: clamp(1.25rem, 5.2778vw, 76px);
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: clamp(1rem, 2.4306vw, 35px);
        width: min(397px, calc(100% - 2 * clamp(1.25rem, 5.2778vw, 76px)));
        max-width: 397px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .why550__rail .why550__tab {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
    }

    .why550__panels .why550__panel {
        grid-area: 1 / 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        opacity: 0;
        visibility: hidden;
        transform: translate3d(14px, 0, 0);
        transition:
            opacity 0.48s cubic-bezier(0.33, 1, 0.48, 1),
            transform 0.48s cubic-bezier(0.33, 1, 0.48, 1),
            visibility 0.48s;
        pointer-events: none;
        will-change: opacity, transform;
    }

    .why550__panels .why550__panel.is-active {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
        pointer-events: auto;
        z-index: 1;
    }

    @media (prefers-reduced-motion: reduce) {
        .why550__panels .why550__panel {
            transform: none;
            transition-duration: 0.01ms;
        }
    }
}
.why550__heading {
    margin: 0 0 clamp(1.5rem, 3.6111vw, 52px); /* 52/1440 */
    font-size: clamp(1.75rem, 2.5vw, 2.25rem); /* 28→36 */
    line-height: 1.14;
    letter-spacing: -0.05em;
    color: var(--red);
    font-weight: 700;
    white-space: nowrap;
}

.why550__tab {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.why550__tab:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 4px;
}

.why550__tab-label {
    display: block;
    font-size: clamp(1rem, 1.7361vw, 1.5625rem); /* 16→25 */
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 400;
    color: #a7a7a7;
    transition: color 0.18s ease;
    white-space: nowrap;
}

/* Red line indicator next to active/hovered tab. Figma: 119px line at
   x=521 from sidebar left → starts 48px right of the 397px tab text and
   spans 119px (extends ~59px past the sidebar's right edge). */
.why550__tab::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: clamp(48px, 8.2639vw, 119px); /* 119/1440 */
    height: 1px;
    background: var(--red);
    margin-left: clamp(16px, 3.3333vw, 48px); /* 48/1440 */
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.why550__tab.is-active .why550__tab-label,
.why550__tab.is-hover .why550__tab-label,
.why550__tab:hover .why550__tab-label,
.why550__tab:focus-visible .why550__tab-label {
    color: var(--red);
}

.why550__tab.is-active::after,
.why550__tab.is-hover::after,
.why550__tab:hover::after,
.why550__tab:focus-visible::after {
    opacity: 1;
}

/* When any tab in the group is being hovered, the previously-active tab
   defers to the hovered one so we only ever show ONE red line/label. */
@media (min-width: 1024px) {
    .why550__layout:hover .why550__tab.is-active:not(:hover):not(.is-hover) .why550__tab-label,
    .why550__layout:has(.why550__tab.is-hover) .why550__tab.is-active:not(.is-hover) .why550__tab-label {
        color: #a7a7a7;
    }

    .why550__layout:hover .why550__tab.is-active:not(:hover):not(.is-hover)::after,
    .why550__layout:has(.why550__tab.is-hover) .why550__tab.is-active:not(.is-hover)::after {
        opacity: 0;
    }
}

.why550__panel {
    display: none;
    flex-direction: column;
    gap: clamp(1.25rem, 2.4306vw, 35px); /* 35/1440 */
}

.why550__panel.is-active {
    display: flex;
}

.why550__lead {
    margin: 0;
    /* Figma: 25px Px Grotesk Regular, tracking -1.25px (-0.05em). */
    font-size: clamp(1.0625rem, 1.7361vw, 1.5625rem); /* 17→25 */
    line-height: 1.2;
    letter-spacing: -0.05em;
    font-weight: 400;
    color: #000;
}

.why550__body {
    margin: 0;
    /* Figma: 16px, color #5b5b5b, tracking -0.8px (-0.05em), width 514. */
    font-size: clamp(0.875rem, 1.1111vw, 1rem); /* 14→16 */
    line-height: 1.375; /* ~22/16 */
    letter-spacing: -0.05em;
    color: #5b5b5b;
    max-width: 514px;
}

.why550__best {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 0.9028vw, 13px); /* 13/1440 */
}

.why550__best-title {
    margin: 0;
    font-size: clamp(0.875rem, 1.1111vw, 1rem);
    line-height: 1.375;
    letter-spacing: -0.05em;
    color: #5b5b5b;
    font-weight: 400;
}

.why550__best-list {
    margin: 0;
    padding: 0 0 0 15px; /* Figma items indented 15px from list left */
    list-style: none;
    color: #8e8e8e;
    font-size: clamp(0.875rem, 1.1111vw, 1rem);
    line-height: calc(22 / 16); /* 1.375 */
    letter-spacing: -0.05em;
}

.why550__best-list li {
    position: relative;
    margin: 0;
}

/* Figma bullets: 3×4px red rectangles, top: 9px from line top. */
.why550__best-list li::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 9px;
    width: 3px;
    height: 4px;
    background: var(--red);
}

@media (max-width: 1023px) {
    .why550__heading {
        white-space: normal;
    }

    .why550__tab::after {
        display: none;
    }
}

/* Product Specifications — Figma 3574:1032 (px 120 / py 90, table 1199 × 993) */
.section--specs-1032 .product-specs__heading {
    margin: 0 0 var(--section-block-gap);
}

.section--specs-1032 .spec-row {
    gap: 0;
    padding: 0;
}

.section--specs-1032 .spec-row span {
    display: flex;
    align-items: center;
    align-self: stretch;
    min-height: 71px;
    padding: 10px 12px 10px clamp(1rem, 2.7vw, 39px);
    box-sizing: border-box;
}

.section--specs-1032 .spec-row span:last-child {
    border-left: 1px solid #d9d9d9;
    padding-left: clamp(1rem, 3.26vw, 47px);
}

.section--specs-1032 .spec-row--head span:last-child {
    border-left-color: #d9d9d9;
}

.spec-frame {
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    max-width: 100%;
    margin-inline: auto;
}

.spec-frame__inner {
    display: flex;
    flex-direction: column;
}

.spec-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    min-height: 71px; /* Figma 3574:1032 */
    padding: 0.625rem clamp(0.75rem, 2.7vw, 2.5rem);
    border-bottom: 1px solid #d9d9d9;
    font-size: clamp(1rem, 1.3889vw, 1.25rem); /* 20px */
    letter-spacing: -0.05em;
}

.spec-row:last-child {
    border-bottom: none;
}

.spec-row span:first-child {
    color: #585858;
}

.spec-row span:last-child {
    color: #585858;
}

.spec-row--head {
    background: var(--red);
    color: #fff;
    font-size: clamp(1.125rem, 1.7361vw, 1.5625rem); /* 25px */
    font-weight: 400;
    letter-spacing: -0.05em;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    min-height: 71px;
}

.spec-row--head span {
    color: #fff !important;
}

/* ============================================================
   Product page – FAQ accordion
   Figma: 3707:1477 / 3709:1643 / 3709:1848
   ============================================================ */

.section--faq {
    padding: 0;
    background: #fff;
    overflow: visible;
}

.product-faq {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.product-faq__item {
    background: #fff;
    border-bottom: 1px solid rgba(205, 38, 39, 0.35);
    transition: background-color 0.25s ease;
    overflow: visible;
}

.product-faq__item[open] {
    border-bottom-color: #edc89e;
    overflow: visible;
}

.product-faq__item:first-child {
    border-top: 1px solid rgba(205, 38, 39, 0.35);
}

.product-faq__item:first-child[open] {
    border-top-color: #edc89e;
}

.product-faq__item summary,
.product-faq__head {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3.6111vw, 52px); /* 52/1440 */
    height: auto;
    min-height: clamp(64px, 6.8vw, 96px);
    padding: clamp(0.75rem, 1.6vw, 1.25rem) clamp(1.25rem, 5.5vw, 80px);
    background: transparent;
    color: #000;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.product-faq__item summary::-webkit-details-marker,
.product-faq__head::-webkit-details-marker {
    display: none;
}

.product-faq__item summary::marker,
.product-faq__head::marker {
    content: "";
}

/* Hover (closed) AND any open state — red bg, white text */
.product-faq__item:not([open]) summary:hover,
.product-faq__item:not([open]) summary:focus-visible,
.product-faq__item[open] summary {
    background: var(--red);
    color: #fff;
}

.product-faq__num {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.55vw, 1.375rem);
    line-height: 1;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}

.product-faq__label {
    flex: 1;
    text-align: left;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.45vw, 1.25rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* + / − icon (no image, pure CSS) */
.product-faq__chev {
    position: relative;
    width: clamp(28px, 2.6389vw, 38px); /* 38/1440 */
    height: clamp(28px, 2.6389vw, 38px);
    flex-shrink: 0;
    color: inherit;
}

.product-faq__chev::before,
.product-faq__chev::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 1px;
    transition: opacity 0.25s ease;
}

.product-faq__chev::before {
    /* horizontal bar */
    left: 6%;
    right: 6%;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
}

.product-faq__chev::after {
    /* vertical bar (hidden when open) */
    top: 6%;
    bottom: 6%;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
}

.product-faq__item[open] .product-faq__chev::after {
    opacity: 0;
}

/* Content panel ---------------------------------------------------- */
.product-faq__panel {
    background: #fff;
    color: #232528;
    padding: clamp(1.25rem, 2.6vw, 38px) clamp(1rem, 4.2vw, 60px) clamp(1.25rem, 2.6vw, 38px);
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
}

.faq-table {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    color: #232528;
    font-family: var(--font-body);
    font-weight: 400;
    table-layout: auto;
}

.faq-table thead th {
    text-align: left;
    vertical-align: top;
    font-size: clamp(0.9rem, 1.35vw, 1.1rem);
    line-height: 1.15;
    font-weight: 400;
    color: #232528;
    padding: 0 0 clamp(0.85rem, 1.4vw, 18px) clamp(0.75rem, 1.6vw, 20px);
    border-bottom: 1px solid rgba(35, 37, 40, 0.2);
    letter-spacing: -0.01em;
    white-space: normal;
}

.faq-table tbody td {
    text-align: left;
    vertical-align: top;
    font-size: clamp(0.85rem, 1.05vw, 1rem);
    line-height: 1.4;
    color: rgba(35, 37, 40, 0.9);
    padding: clamp(0.75rem, 1.6vw, 20px) 0 0 clamp(0.75rem, 1.6vw, 20px);
    letter-spacing: -0.01em;
}

/* Vertical separators */
.faq-table th + th,
.faq-table td + td {
    border-left: 1px solid rgba(35, 37, 40, 0.2);
}

/* First column flush-left + a touch more breathing room before data cols */
.faq-table th:first-child,
.faq-table td:first-child {
    padding-left: 0;
    width: auto;
}

.faq-table th:nth-child(2),
.faq-table td:nth-child(2) {
    padding-left: clamp(0.75rem, 2vw, 28px);
}

/* 3-data-column variant (accordion #3) */
.faq-table--3col th:first-child,
.faq-table--3col td:first-child {
    width: auto;
}
.faq-table--3col th:nth-child(2),
.faq-table--3col td:nth-child(2) {
    padding-left: clamp(0.75rem, 2vw, 28px);
}

@media (max-width: 1023px) {
    .product-faq__item summary,
    .product-faq__head {
        height: auto;
        min-height: 72px;
        padding: 1rem 1.25rem;
        gap: 1rem;
    }
    .product-faq__num { font-size: 1.125rem; }
    .product-faq__label { font-size: 1rem; }
    .product-faq__panel {
        padding: 1.5rem 1.25rem 2rem;
    }
    .faq-table thead th { font-size: 1rem; padding-bottom: 1rem; padding-left: 1rem; }
    .faq-table tbody td { font-size: 0.875rem; padding: 1rem 0 0 1rem; }
    .faq-table th:nth-child(2),
    .faq-table td:nth-child(2),
    .faq-table--3col th:nth-child(2),
    .faq-table--3col td:nth-child(2) {
        padding-left: 1rem;
    }
}

/* Manufacturing Process — Figma 3726:244 (px 110 / py 90, rows 1209 × 445) */
.section--process-244 .product-process__heading {
    margin: 0 0 var(--section-block-gap);
}

.section--process-244 .process-stack {
    gap: clamp(1.5rem, 2.7778vw, 40px);
}

.section--process-244 .process-row__media {
    position: relative;
    width: 100%;
    max-width: 604px;
    aspect-ratio: 604 / 445;
    overflow: hidden;
    background: #1a1a1a;
    /* Left / odd rows — notch top-right (matches Figma 604×445 mask). */
    clip-path: polygon(0 0, 74.74% 0, 100% 28.31%, 100% 100%, 0 100%);
}

.section--process-244 .process-row--reverse .process-row__media {
    /* Right / even rows — notch top-left. */
    clip-path: polygon(25.26% 0, 100% 0, 100% 100%, 0 100%, 0 28.31%);
    justify-self: end;
}

.section--process-244 .process-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.section--process-244 .process-row__media--flip img {
    transform: none;
}

.section--process-244 .process-row__copy {
    max-width: 512px;
    box-sizing: border-box;
}

.section--process-244 .process-row:not(.process-row--reverse) .process-row__copy {
    padding-left: clamp(1.25rem, 4.58vw, 66px);
}

.section--process-244 .process-row--reverse .process-row__copy {
    justify-self: center;
}

.section--process-244 .process-row__copy ul {
    padding-left: 27px;
}

.section--process-244 .process-row__copy li + li {
    margin-top: 18px;
}

.process-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 2.7778vw, 40px);
}

.process-row {
    display: grid;
    gap: clamp(2rem, 5.56vw, 5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .process-row {
        grid-template-columns: 1fr 1fr;
    }

    .process-row--reverse .process-row__media {
        order: 2;
    }

    .process-row--reverse .process-row__copy {
        order: 1;
    }
}

.process-row__media img {
    width: 100%;
    height: auto;
    display: block;
}

.process-row__media--flip img {
    transform: scaleX(-1);
}

.process-row__copy h3 {
    margin: 0 0 clamp(1.25rem, 2.9861vw, 43px);
    font-size: clamp(1.125rem, 1.7361vw, 1.5625rem); /* 25px */
    font-weight: 400;
    letter-spacing: -0.05em;
    color: #000;
}

.process-row__copy ul {
    margin: 0;
    padding-left: 1.35rem;
    color: #747474;
    font-size: clamp(1rem, 1.25vw, 1.125rem); /* 18px */
    line-height: 1.55;
    letter-spacing: -0.05em;
}

.process-row__copy li + li {
    margin-top: 1.125rem; /* Figma 18px between bullets */
}

/* Price table — Figma 3730:540 (px 110 / py 90, table 1220 × 634) */
.section--price-540 .product-price__heading {
    margin: 0 0 var(--section-block-gap);
}

.section--price-540 .price-table th,
.section--price-540 .price-table td {
    text-align: left;
}

.price-table-wrap {
    overflow-x: auto;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    max-width: 100%;
    margin-inline: auto;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}

.price-table th,
.price-table td {
    padding: 0.625rem clamp(1rem, 4.17vw, 60px);
    border-bottom: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    text-align: center;
    vertical-align: middle;
    min-height: 79px;
    font-size: clamp(1rem, 1.3889vw, 1.25rem); /* 20px */
    letter-spacing: -0.05em;
    color: #585858;
}

.price-table th:last-child,
.price-table td:last-child {
    border-right: none;
}

.price-table thead th {
    background: var(--red);
    color: #fff;
    font-size: clamp(1.125rem, 1.7361vw, 1.5625rem); /* 25px */
    font-weight: 700;
    letter-spacing: -0.05em;
}

.price-table tbody tr:last-child td {
    border-bottom: none;
}

/* Price hub page */
.section--price-hub {
    position: relative;
    padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 5vw, 4.5rem);
    background: var(--red);
}

.price-hub {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: clamp(24px, 11vw, 159px);
    padding-right: var(--pad-x-contact);
}

.price-hub__surface {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.price-hub__tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    justify-content: flex-start;
}

.price-hub__tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0.875rem clamp(1.375rem, 2.3611vw, 2rem);
    border: 2px solid #fff;
    border-radius: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.3889vw, 1.25rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.2;
    transition:
        background-color 0.25s ease,
        color 0.38s ease 0.06s,
        border-color 0.25s ease;
}

.price-hub__tab:hover,
.price-hub__tab:focus-visible {
    background: #fff;
    color: var(--red);
    outline: none;
}

.price-hub__tab.is-active {
    background: #fff;
    border-color: #fff;
    color: var(--red);
}

.price-hub__tab:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(205, 38, 39, 0.35);
}

.price-hub__panel[hidden] {
    display: none;
}

.price-hub__panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.price-hub__panel-heading {
    margin: 0;
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 2.2222vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.05em;
    text-align: left;
}

.section--price-hub .price-table-wrap {
    width: 100%;
    max-width: 960px;
    margin-inline: 0;
    background: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

.section--price-hub .price-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

.section--price-hub .price-table th,
.section--price-hub .price-table td {
    width: 50%;
    padding: 10px clamp(1rem, 4.1667vw, 60px);
    height: 79px;
    min-height: 79px;
    text-align: left;
    vertical-align: middle;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .section--price-hub {
        padding-block: 24px 48px;
    }

    .price-hub {
        padding-left: 20px;
        padding-right: 20px;
    }

    .price-hub__panel-heading {
        text-align: left;
    }

    .price-hub__tablist {
        justify-content: stretch;
    }

    .price-hub__tab {
        flex: 1 1 calc(50% - 0.4375rem);
        text-align: center;
        min-height: 56px;
        padding-inline: 1rem;
    }

    .price-hub__panel {
        gap: 1rem;
    }

    .section--price-hub .price-table-wrap {
        margin: 0;
        width: 100%;
        max-width: 100%;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .section--price-hub .price-table {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    .section--price-hub .price-table th,
    .section--price-hub .price-table td {
        width: auto;
        height: auto;
        min-height: 52px;
        padding: 0.75rem 0.65rem;
        text-align: left;
    }

    .section--price-hub .price-table th:first-child,
    .section--price-hub .price-table td:first-child {
        width: 40%;
    }

    .section--price-hub .price-table th:last-child,
    .section--price-hub .price-table td:last-child {
        width: 60%;
    }

    .section--price-hub .price-table thead th {
        font-size: 0.8125rem;
        line-height: 1.3;
        font-weight: 700;
    }
}

@media (max-width: 520px) {
    .price-hub__tablist {
        flex-wrap: nowrap;
    }

    .price-hub__tab {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 380px) {
    .section--price-hub .price-table th,
    .section--price-hub .price-table td {
        padding: 0.65rem 0.5rem;
        font-size: 0.8125rem;
        min-height: 48px;
    }

    .section--price-hub .price-table thead th {
        font-size: 0.75rem;
    }
}

/* ============================================================
   MOBILE OPTIMIZATION LAYER
   Site-wide responsive fixes — kept at the end so it cascades
   over every section-specific rule above without raising
   specificity. Breakpoints:
       (max-width: 1024px) — tablet / small laptop
       (max-width: 768px)  — large phone / portrait tablet
       (max-width: 600px)  — phone
       (max-width: 380px)  — small phone (iPhone SE, 360-px Androids)
   ============================================================ */

/* --- Global baseline ---------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
}

body.home-page,
body.about-page,
body.product-page,
body.price-page {
    overflow-x: clip;
}

#page.site {
    overflow-x: clip;
    max-width: 100%;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

/* Prevent iOS auto-zoom on focus by keeping inputs at >=16px on phones */
@media (max-width: 768px) {
    .contact-form input,
    .contact-form textarea,
    .footer-newsletter-form input {
        font-size: 16px;
    }

    /* Larger tap targets */
    .sktmt-btn,
    .btn-primary,
    .btn-text-figma,
    .btn-submit,
    .hero-home__strip-cta,
    .product-faq__head,
    .why550__tab,
    .footer-newsletter-form .sktmt-btn.sktmt-btn--on-dark {
        min-height: 48px;
    }
}

/* --- Home Mission — Figma 3697:274 @ 1440 ------------------------- */
@media (min-width: 1200px) {
    .home-page .section--mission-home {
        padding-block: 90px;
    }

    .home-page .section--mission-home .mission-inner {
        padding-left: 95px;
        padding-right: 95px;
    }

    .home-page .section--mission-home .heading-accent {
        font-size: 36px;
        line-height: 41px;
    }

    .home-page .section--mission-home .body-text {
        font-size: 24px;
        line-height: 32px;
    }

    .home-page .section--mission-home .mission-row--figma .mission-row__copy {
        gap: 36px;
    }

    .home-page .section--mission-home .mission-row--figma {
        column-gap: 69px;
    }

    .home-page .section--mission-home .mission-row--figma .mission-row__media img {
        width: 561px;
        height: 566px;
        max-width: 561px;
        aspect-ratio: auto;
    }
}

/* --- Home 550 DM Bar showcase — Figma 3697:281 @ 1440 ---------------- */
@media (min-width: 1200px) {
    .home-page .section--product-home {
        padding-block: 90px;
    }

    .home-page .section--product-home .product-showcase-wrap {
        padding-left: 126px;
        padding-right: 126px;
    }

    .home-page .product-showcase--home {
        max-width: 1188px;
        aspect-ratio: auto;
        min-height: 728px;
    }

    .home-page .product-showcase--home .product-showcase__card {
        left: auto;
        top: auto;
        width: 53.7458%;
        max-width: 638.5px;
        min-height: 271px;
        aspect-ratio: auto;
        transform: none;
        margin: clamp(10rem, 19.3%, 14.375rem) 0 0 23.1481%;
    }

    .home-page .product-showcase.product-showcase--home .product-showcase__card-inner {
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        transform: none;
        width: auto;
        max-width: none;
        margin: 0;
        padding: clamp(1.5rem, 3vw, 2.7rem) clamp(1.5rem, 5vw, 3.875rem);
        gap: 28px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .home-page .product-showcase--home .product-showcase__title {
        font-size: 50px;
        line-height: 1;
    }

    .home-page .product-showcase--home .product-showcase__desc {
        font-size: 19px;
        line-height: 24px;
        max-width: 514px;
    }

    .home-page .product-showcase--home .product-showcase__btn {
        font-size: 20px;
        line-height: 32px;
    }

}

/* --- Home Spotlight — Figma 1:102 @ 1440 ------------------------ */
@media (min-width: 1200px) {
    .home-page .section--spotlight-home-102 {
        padding-block: 90px;
    }

    .home-page .section--spotlight-home-102 .spotlight-row--figma-102 {
        padding-left: 95px;
        padding-right: 95px;
        column-gap: 69px;
        justify-content: center;
    }

    .home-page .section--spotlight-home-102 .heading-accent {
        font-size: 36px;
        line-height: 41px;
    }

    .home-page .section--spotlight-home-102 .body-text {
        font-size: 24px;
        line-height: 32px;
    }

    .home-page .section--spotlight-home-102 .spotlight-row--figma-102 .spotlight-row__media {
        min-height: 558px;
    }

    .home-page .section--spotlight-home-102 .spotlight-row--figma-102 .spotlight-row__media img,
    .home-page .section--spotlight-home-102 .spotlight-row--figma-102 .spotlight-row__media .sktmt-media-video__poster img {
        max-height: 680px;
    }
}

/* --- Hero (landing / home) — Figma 3697:301 @ 1440 ---------------- */
@media (min-width: 1200px) {
    .hero-home--landing,
    .hero-home--landing .hero-home__landing-stack {
        min-height: 1024px;
        height: 1024px;
        max-height: 1024px;
    }

    .hero-home--landing .hero-home__logo-mark {
        top: 105px;
        left: 159px;
    }

    .hero-home--landing .hero-home__menu {
        display: none !important;
    }

    .hero-home--landing .hero-home__landing-copy {
        top: 384px;
        left: 159px;
        max-width: 719px;
        gap: 31px;
    }

    .hero-home--landing .hero-home__landing-title {
        font-size: 75px;
    }

    .hero-home--landing .hero-home__landing-lead {
        font-size: 30px;
        line-height: 36px;
        max-width: 557px;
    }

    .hero-home--landing .hero-home__landing-watch {
        top: 885px;
        bottom: auto;
        left: 159px;
    }

    .hero-home--landing .hero-home__strip {
        width: 255px;
    }

    .hero-home--landing {
        margin-bottom: -75px;
    }

    .hero-home--landing .hero-home__cta--strip {
        min-height: 75px;
    }
}

/* --- About hero — Figma 3574:1017 / 3574:1034 @ 1440 ------------- */
@media (min-width: 1200px) {
    .hero-home--about,
    .hero-home--about .hero-home__artboard--about {
        min-height: 1024px;
        height: 1024px;
        max-height: 1024px;
    }

    .hero-home--about .hero-home__logo-mark {
        top: 105px;
        left: 159px;
    }

    .hero-home--about .hero-home__menu {
        top: 117px;
        left: calc(100% - 127.5px);
    }

    .hero-home--about .hero-home__strip {
        width: 255px;
    }

    .hero-home--about .hero-home__about-hero-center {
        width: 572px;
    }

    .hero-home--about .hero-home__about-media-placeholder {
        width: 572px;
        min-height: 138px;
    }
}

/* --- Product hero — Figma 3574:1011 / 3556:145–148 @ 1440 ---------- */
@media (min-width: 1200px) {
    .hero-home--product,
    .hero-home--product .hero-home__artboard--product,
    .hero-home.hero-home--product {
        min-height: 1024px;
        height: 1024px;
        max-height: 1024px;
    }

    .hero-home--product .hero-home__logo-mark {
        top: 105px;
        left: 159px;
    }

    .hero-home--product .hero-home__menu {
        top: 117px;
        left: calc(100% - 127.5px);
    }

    .hero-home--product .hero-home__strip {
        width: 255px;
    }

    .hero-home--product .hero-home__product-hero-copy {
        left: 159px;
        width: 719px;
        max-width: 719px;
        gap: 31px;
    }

    .hero-home--product .hero-home__product-kicker {
        font-size: 75px;
        line-height: 1;
    }

    .hero-home--product .hero-home__product-lead {
        font-size: 30px;
        line-height: 36px;
        max-width: 557px;
    }
}

/* --- Product page Used in — Figma 3556:482 @ 1440 ----------------- */
@media (min-width: 1200px) {
    body.product-page .section--product-used-482 {
        padding-block: 90px;
    }

    body.product-page .section--product-used-482 > .container {
        padding-left: 120px;
        padding-right: 120px;
    }

    body.product-page .section--product-used-482 .product-used__layout {
        display: grid;
        grid-template-columns: 191px 1054px;
        column-gap: 0;
        align-items: start;
        max-width: 1245px;
    }

    body.product-page .section--product-used-482 .product-used__heading {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        font-size: 36px;
        line-height: 41px;
    }

    body.product-page .section--product-used-482 .product-used-grid {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        grid-template-columns: 304px 289px 289px;
        column-gap: 86px;
        row-gap: 86px;
        width: 1054px;
        max-width: 1054px;
    }

    body.product-page .section--product-used-482 .used-card {
        gap: 18px;
    }

    body.product-page .section--product-used-482 .used-card__media {
        margin-left: 62px;
    }

    body.product-page .section--product-used-482 .used-card__meta-row {
        gap: 29px;
        align-items: flex-start;
    }

    body.product-page .section--product-used-482 .used-card__num {
        font-size: 15px;
    }

    body.product-page .section--product-used-482 .used-card__title {
        font-size: 25px;
    }

    body.product-page .section--product-used-482 .used-card__desc {
        font-size: 18px;
        padding-left: 47px;
        max-width: none;
    }

    body.product-page .section--product-used-482 .used-card:nth-child(4) {
        grid-column: 1;
    }

    body.product-page .section--product-used-482 .used-card:nth-child(5) {
        grid-column: 2;
    }

    /* Why Choose 550 DM Bar — Figma 3556:452 @ 1440 */
    body.product-page .section--why550-452 {
        padding-block: 90px;
    }

    body.product-page .section--why550-452 > .container.why550 {
        padding-left: 120px;
        padding-right: 120px;
    }

    body.product-page .section--why550-452 .why550__heading {
        max-width: 1210px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 52px;
        font-size: 36px;
        line-height: 41px;
    }

    body.product-page .section--why550-452 .why550__layout {
        max-width: 1210px;
        margin-left: auto;
        margin-right: auto;
        column-gap: 74px;
        grid-template-columns: 581px 555px;
        align-items: center;
    }

    body.product-page .section--why550-452 .why550__rail {
        min-height: 430px;
    }

    body.product-page .section--why550-452 .why550__shape {
        width: 581px;
        max-width: 581px;
        height: 430px;
    }

    body.product-page .section--why550-452 .why550__tabs {
        left: 76px;
        gap: 35px;
        width: 397px;
        max-width: 397px;
    }

    body.product-page .section--why550-452 .why550__panels {
        max-width: 555px;
        min-height: 430px;
    }

    body.product-page .section--why550-452 .why550__tab-label {
        font-size: 25px;
        line-height: normal;
    }

    body.product-page .section--why550-452 .why550__tab::after {
        width: 119px;
        margin-left: 48px;
    }

    body.product-page .section--why550-452 .why550__panel {
        gap: 35px;
    }

    body.product-page .section--why550-452 .why550__lead {
        font-size: 25px;
        line-height: normal;
    }

    body.product-page .section--why550-452 .why550__body {
        font-size: 16px;
        line-height: 22px;
        max-width: 514px;
    }

    body.product-page .section--why550-452 .why550__best {
        gap: 13px;
        max-width: 529px;
    }

    body.product-page .section--why550-452 .why550__best-title,
    body.product-page .section--why550-452 .why550__best-list {
        font-size: 16px;
        line-height: 22px;
    }

    /* Product Specifications — Figma 3574:1032 @ 1440 */
    body.product-page .section--specs-1032 {
        padding-block: 90px;
        background: #fff;
    }

    body.product-page .section--specs-1032 > .container {
        padding-left: 120px;
        padding-right: 120px;
    }

    body.product-page .section--specs-1032 .product-specs__heading {
        margin-bottom: 40px;
        font-size: 36px;
        line-height: 41px;
    }

    body.product-page .section--specs-1032 .spec-frame {
        max-width: 1199px;
        margin-left: auto;
        margin-right: auto;
    }

    body.product-page .section--specs-1032 .spec-row {
        grid-template-columns: 599.5px 599.5px;
        min-height: 71px;
        font-size: 20px;
        line-height: normal;
    }

    body.product-page .section--specs-1032 .spec-row span {
        min-height: 71px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    body.product-page .section--specs-1032 .spec-row span:first-child {
        padding-left: 39px;
        padding-right: 12px;
    }

    body.product-page .section--specs-1032 .spec-row span:last-child {
        padding-left: 47px;
        padding-right: 12px;
    }

    body.product-page .section--specs-1032 .spec-row--head {
        font-size: 25px;
        line-height: normal;
        padding-top: 0;
        padding-bottom: 0;
    }

    body.product-page .section--specs-1032 .spec-row--head span:first-child {
        padding-left: 40px;
    }

    /* Manufacturing Process — Figma 3726:244 @ 1440 */
    body.product-page .section--process-244 {
        padding-block: 90px;
        background: #fff;
    }

    body.product-page .section--process-244 > .container {
        padding-left: 110px;
        padding-right: 110px;
    }

    body.product-page .section--process-244 .product-process__heading {
        margin-bottom: 40px;
        font-size: 36px;
        line-height: 41px;
    }

    body.product-page .section--process-244 .process-stack {
        max-width: 1209px;
        margin-left: auto;
        margin-right: auto;
        gap: 40px;
    }

    body.product-page .section--process-244 .process-row {
        grid-template-columns: 604px 605px;
        gap: 0;
        max-width: 1209px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    body.product-page .section--process-244 .process-row__media {
        width: 604px;
        max-width: 604px;
        height: 445px;
        aspect-ratio: auto;
    }

    body.product-page .section--process-244 .process-row__copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 445px;
        width: 512px;
        max-width: 512px;
    }

    body.product-page .section--process-244 .process-row__copy h3 {
        margin-bottom: 43px;
        font-size: 25px;
        line-height: normal;
    }

    body.product-page .section--process-244 .process-row__copy ul {
        font-size: 18px;
        line-height: normal;
    }

    body.product-page .section--process-244 .process-row:not(.process-row--reverse) .process-row__copy {
        padding-left: 66px;
    }

    /* Quality Process Management — Figma 3693:232 @ 1440 */
    body.product-page .section--quality-232 {
        padding-block: 90px;
        background: #fff;
    }

    body.product-page .section--quality-232 > .container {
        padding-left: 110px;
        padding-right: 110px;
    }

    body.product-page .section--quality-232 .product-quality__heading {
        margin-bottom: 40px;
        font-size: 36px;
        line-height: 41px;
    }

    body.product-page .section--quality-232 .quality-scroll {
        gap: 18px;
        width: 100%;
    }

    body.product-page .section--quality-232 .quality-card {
        flex: 0 0 345px;
        width: 345px;
        height: 394px;
        min-height: 394px;
    }

    body.product-page .section--quality-232 .quality-card__step {
        font-size: 20px;
        line-height: normal;
    }

    body.product-page .section--quality-232 .quality-card__label,
    body.product-page .section--quality-232 .quality-card p {
        font-size: 24px;
        line-height: normal;
        letter-spacing: -0.05em;
    }

    /* Today's 550 DM TMT Bar Price Table — Figma 3730:540 @ 1440 */
    body.product-page .section--price-540 {
        padding-block: 90px;
        background: #fff;
    }

    body.product-page .section--price-540 > .container {
        padding-left: 110px;
        padding-right: 110px;
    }

    body.product-page .section--price-540 .product-price__heading {
        margin-bottom: 40px;
        font-size: 36px;
        line-height: 41px;
    }

    body.product-page .section--price-540 .price-table-wrap {
        max-width: 1220px;
        margin-left: auto;
        margin-right: auto;
    }

    body.product-page .section--price-540 .price-table {
        width: 1220px;
        max-width: 1220px;
        table-layout: fixed;
    }

    body.product-page .section--price-540 .price-table th,
    body.product-page .section--price-540 .price-table td {
        width: 610px;
        padding: 10px 60px;
        height: 79px;
        min-height: 79px;
        font-size: 20px;
        line-height: normal;
        letter-spacing: -0.05em;
        text-align: left;
        vertical-align: middle;
        box-sizing: border-box;
    }

    body.product-page .section--price-540 .price-table thead th {
        font-size: 25px;
        font-weight: 700;
        line-height: 1.3;
        color: #fff;
    }
}

/* --- About page About Us red — Figma 3559:552 @ 1440 ---------------- */
@media (min-width: 1200px) {
    body.about-page .about-red.about-red--figma-552 .about-red__shape-wrap {
        width: 1065px;
        min-height: 541px;
        height: auto;
    }

    body.about-page .about-red.about-red--figma-552 .about-red__content {
        max-width: 819px;
        gap: 53px;
        padding: 104px 101px 88px 95px;
    }

    body.about-page .about-red.about-red--figma-552 .heading-red {
        font-size: 36px;
        line-height: 41px;
    }

    body.about-page .about-red.about-red--figma-552 .about-red__text {
        font-size: 24px;
        line-height: 32px;
    }

    .about-red.about-red--home .about-red__shape-wrap {
        min-height: 541px;
        height: auto;
    }
}

/* --- About page Mission — Figma 3559:699 @ 1440 ------------------- */
@media (min-width: 1200px) {
    body.about-page .section--mission-about-699 {
        padding-block: 90px;
    }

    body.about-page .section--mission-about-699 .mission-inner {
        padding-left: 115px;
        padding-right: 115px;
    }

    body.about-page .section--mission-about-699 .mission-row--about-figma {
        grid-template-columns: 619px 507px;
        column-gap: 69px;
    }

    body.about-page .section--mission-about-699 .mission-row--about-figma .mission-row__copy {
        gap: 36px;
    }

    body.about-page .section--mission-about-699 .heading-accent {
        font-size: 36px;
        line-height: 41px;
    }

    body.about-page .section--mission-about-699 .body-text {
        font-size: 24px;
        line-height: 32px;
    }

    body.about-page .section--mission-about-699 .mission-row--about-figma .mission-row__media img {
        width: 507px;
        height: 392px;
        max-width: 507px;
        aspect-ratio: auto;
    }

    /* About banner slider — Figma 3559:705 @ 1440 */
    .about-banner-slider {
        height: 816px;
    }

    .about-banner-slider__frame {
        padding: 22px;
    }

    .about-banner-slider__label {
        left: 68px;
    }

    .about-banner-slider__counter {
        right: 68px;
    }

    .about-banner-slider__corner--tl {
        top: 22px;
        left: 22px;
    }

    .about-banner-slider__corner--tr {
        top: 22px;
        right: 22px;
    }

    /* About Why Choose Us — Figma 3562:706 @ 1440 */
    body.about-page .section--why-about.section--why-about-706 {
        padding-block: 90px;
        padding-left: 112px;
        padding-right: 112px;
    }

    body.about-page .why-about--figma-706 {
        padding-left: 0;
        padding-right: 0;
    }

    body.about-page .why-about--figma-706 .why-about__panel {
        gap: 36px;
        padding: 49px 44px;
    }

    body.about-page .why-about--figma-706 .why-about__panel .body-text {
        gap: 36px;
        font-size: 24px;
        line-height: 32px;
    }

    body.about-page .why-about--figma-706 .why-about__panel .heading-accent {
        font-size: 36px;
        line-height: 41px;
    }

    /* About 550 DM Bar — Figma 3697:281 @ 1440 */
    body.about-page .section--product-about-281 {
        padding-block: 90px;
    }

    body.about-page .product-showcase--figma-281 {
        max-width: 1188px;
    }

    body.about-page .product-showcase--figma-281 .product-showcase__card {
        left: auto;
        top: auto;
        width: 53.7458%;
        max-width: 638.5px;
        min-height: 271px;
        aspect-ratio: auto;
        margin: clamp(10rem, 19.3%, 14.375rem) 0 0 23.1481%;
    }

    body.about-page .product-showcase.product-showcase--figma-281 .product-showcase__card-inner {
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        transform: none;
        width: auto;
        max-width: none;
        margin: 0;
        padding: clamp(1.5rem, 3vw, 2.7rem) clamp(1.5rem, 5vw, 3.875rem);
        gap: 28px;
        justify-content: flex-start;
    }

    body.about-page .product-showcase--figma-281 .product-showcase__title {
        font-size: 50px;
        line-height: 1;
    }

    body.about-page .product-showcase--figma-281 .product-showcase__desc {
        font-size: 19px;
        line-height: 24px;
        max-width: 514px;
    }

    body.about-page .product-showcase--figma-281 .product-showcase__btn {
        left: auto;
        bottom: auto;
        top: auto;
        width: 28.9562%;
        max-width: 344px;
        min-height: 75px;
        margin: 0 0 0 23.1481%;
        font-size: 20px;
        line-height: 32px;
        letter-spacing: -0.05em;
        text-transform: uppercase;
    }
}

@media (max-width: 768px) {
    .hero-home--landing {
        margin-bottom: 0;
    }

    .hero-home--landing .hero-home__cta--strip {
        display: none !important;
    }

    .hero-home--landing .hero-home__cta--copy {
        display: inline-flex;
    }

    .hero-home--landing .hero-home__strip {
        pointer-events: none;
        background: transparent !important;
    }

    /* First band (hero) — full viewport on phones. */
    :root {
        --sktmt-product-hero-min: 100vh;
    }

    .hero-home,
    .hero-home__artboard,
    .hero-home__landing-stack,
    .hero-home--landing,
    .hero-home--about,
    .hero-home--about .hero-home__artboard--about,
    .hero-home--product,
    .hero-home--product .hero-home__artboard--product,
    .hero-home.hero-home--product {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .hero-home--about {
        margin-bottom: clamp(-72px, -10vw, -102px);
    }

    .hero-home--landing {
        margin-bottom: 0;
    }

    .hero-home__logo-mark {
        top: 24px;
        left: 20px;
        height: 40px;
    }
    .hero-home__logo-mark img {
        height: 40px;
    }

    .hero-home__landing-stack {
        padding: 4rem 20px 5rem 20px;
    }

    .hero-home__landing-copy {
        left: 20px;
        /* Keep clear of the right menu rail + gutter. */
        right: 120px;
        max-width: none;
        top: 34%;
        transform: none;
    }

    .hero-home__landing-cta {
        min-height: 60px;
        padding-inline: 1.25rem;
    }
}

@media (max-width: 600px) {
    .hero-home__landing-copy {
        right: 104px; /* 88-px shrunk strip + 16-px gutter */
    }
}

@media (max-width: 768px) {
    .hero-home--landing .hero-home__landing-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1em;
        line-height: 1.12;
        font-size: clamp(1.85rem, 8vw, 2.75rem);
    }

    .hero-home--landing .hero-home__landing-title-line {
        display: block;
        width: 100%;
        max-width: calc(100vw - 140px);
    }

    .hero-home--landing .hero-home__landing-title-line:first-child {
        white-space: nowrap;
    }

    .hero-home--landing .hero-home__landing-title-line:last-child {
        white-space: nowrap;
    }

    .hero-home__landing-lead {
        font-size: clamp(1rem, 4.2vw, 1.3rem);
        line-height: 1.25;
    }

    .hero-home__landing-watch {
        left: 20px;
        right: auto;
        bottom: 96px;
        font-size: 0.875rem;
    }
    .hero-home__landing-watch img {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 600px) {
    .hero-home__strip {
        width: 88px;
        background: transparent !important;
    }

    .hero-home__menu,
    #menu-open.hero-home__menu {
        --menu-bar-h: 3px;
        position: absolute !important;
        top: 22px;
        right: 18px;
        left: auto !important;
        z-index: 7;
        transform: none;
        padding: 6px;
        background: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .hero-home__menu:hover,
    body.nav-open .hero-home__menu {
        transform: none;
    }

    .hero-home__menu span:first-child {
        width: 18px;
    }

    .hero-home__menu span:last-child {
        width: 28px;
    }

    .hero-home__menu[aria-expanded="true"] span:first-child,
    .hero-home__menu.hero-home__menu--open span:first-child,
    .hero-home__menu[aria-expanded="true"] span:last-child,
    .hero-home__menu.hero-home__menu--open span:last-child {
        width: 26px;
    }
}

/* --- Mobile: left-align primary CTAs; consistent full bar width (Figma 344px max) */
@media (max-width: 768px) {
    .sktmt-btn:not(.footer-newsletter-form__send),
    .btn-primary,
    .btn-text-figma,
    .btn-submit,
    .hero-home__strip-cta,
    .product-showcase__btn {
        align-self: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        width: 100%;
        max-width: min(344px, 100%);
    }

    .hero-home--landing .hero-home__landing-cta,
    .hero-home--landing .hero-home__landing-copy .sktmt-btn,
    .product-showcase--home .product-showcase__btn,
    .product-showcase.product-showcase--figma-281 .product-showcase__btn {
        display: inline-flex;
        align-self: flex-start;
        margin-left: 0;
        margin-right: auto;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: min(344px, 100%) !important;
    }

    .mission-row__copy .btn-text-figma,
    .spotlight-row__copy .btn-text-figma,
    .product-showcase__card-inner .product-showcase__btn {
        margin-inline: 0;
        width: 100%;
        max-width: min(344px, 100%);
    }

    /* One label size for all primary CTAs on phones */
    .sktmt-btn:not(.sktmt-btn--on-dark),
    .sktmt-btn--primary,
    .btn-primary,
    .btn-text-figma,
    .btn-submit,
    .hero-home__strip-cta,
    .hero-home__landing-cta,
    .product-showcase__btn,
    .footer-newsletter-form .sktmt-btn.sktmt-btn--on-dark,
    .home-page .section--spotlight-home-102 .spotlight-row__cta.sktmt-btn {
        font-size: 1.25rem;
    }
}

@media (max-width: 380px) {
    .hero-home--landing .hero-home__landing-title {
        font-size: clamp(1.5rem, 7.2vw, 1.65rem);
    }

    .hero-home--landing .hero-home__landing-title-line {
        max-width: calc(100vw - 120px);
    }
}

/* --- Product hero ------------------------------------------------- */
@media (max-width: 768px) {
    .hero-home--product .hero-home__product-hero-copy {
        left: 50%;
        right: auto;
        width: calc(100% - 40px);
        max-width: none;
        transform: translate(-50%, -50%);
        align-items: center;
        text-align: center;
        gap: clamp(1rem, 4vw, 31px);
    }

    .hero-home--product .hero-home__product-kicker {
        font-size: clamp(1.85rem, 8vw, 2.5rem);
        max-width: 100%;
    }

    .hero-home--product .hero-home__product-lead {
        font-size: clamp(1rem, 4.2vw, 1.25rem);
        line-height: 1.3;
    }
}

/* --- About-red (home + about page) ------------------------------- */
@media (max-width: 768px) {
    .about-red {
        padding: 0;
    }

    .about-red.about-red--home {
        position: relative;
        z-index: 1;
        margin-top: 0;
        overflow: visible;
    }

    .about-red__shape-wrap,
    .about-red.about-red--home .about-red__shape-wrap,
    .about-red--about-page .about-red__shape-wrap,
    .about-red--product .about-red__shape-wrap {
        width: 100%;
        min-height: 0;
    }

    .about-red__shape {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        /* Subtle red overlay in case the SVG cuts diagonally and leaves a corner. */
    }

    .about-red__content,
    .about-red.about-red--home .about-red__content,
    .about-red--product .about-red__content {
        padding: 2.5rem 20px 3rem;
        max-width: 100%;
        gap: 1rem;
    }

    .home-page .about-red.about-red--home .about-red__shape-wrap {
        min-height: clamp(460px, 128vw, 620px);
        overflow: visible;
    }

    .home-page .about-red.about-red--home .about-red__content {
        padding:
            clamp(4rem, 12vw, 5rem)
            clamp(1.5rem, 6vw, 2rem)
            clamp(3.25rem, 10vw, 4.25rem);
        gap: clamp(1.25rem, 3vw, 1.75rem);
    }

    body.about-page .about-red.about-red--figma-552 .about-red__shape-wrap {
        min-height: clamp(380px, 85vw, 520px);
    }

    body.about-page .about-red.about-red--figma-552 .about-red__content {
        max-width: 100%;
        gap: 1.5rem;
        padding: 3rem 1.25rem 3rem 1.25rem;
    }

    .about-red__text {
        font-size: 1rem;
        line-height: 1.45;
    }

    .heading-red,
    .about-red .heading-red {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
}

/* --- Mission / Spotlight rows ------------------------------------ */
@media (max-width: 768px) {
    .home-page .section--mission-home .mission-inner,
    .section--mission-home .mission-inner,
    .section--mission-about .mission-inner,
    body.about-page .section--mission-about .mission-inner,
    body.product-page .section--mission-product .mission-inner,
    .spotlight-row,
    body.product-page .section--spotlight .spotlight-row {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.product-page .site-main > section .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.product-page .section--why-product {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mission-row,
    .mission-row--figma,
    .mission-row--about-figma {
        gap: 1.75rem;
    }

    .mission-row__media img {
        max-height: 280px;
    }

    .spotlight-row__media img {
        max-width: 380px;
        margin-inline: auto;
    }

    .heading-accent {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .body-text {
        font-size: 1rem;
        line-height: 1.45;
    }
}

/* --- Product showcase (home + about pages) ----------------------- */
@media (max-width: 699px) {
    .home-page .section--product-home .product-showcase-wrap,
    .section--product-home .product-showcase-wrap,
    body.about-page .section--product-about-281 .product-showcase-wrap {
        padding-left: 20px;
        padding-right: 20px;
    }

    .product-showcase {
        gap: 0;
    }

    .product-showcase--home {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        aspect-ratio: auto;
        padding-bottom: 0;
    }

    .product-showcase--home .product-showcase__molten,
    .product-showcase--home .product-showcase__steel {
        position: relative;
        left: auto;
        top: auto;
        aspect-ratio: 16 / 9;
        min-height: 0;
        width: 100%;
        height: auto;
    }

    .product-showcase.product-showcase--home .product-showcase__card,
    .product-showcase--home .product-showcase__card {
        position: relative;
        width: 100%;
        max-width: 100%;
        margin-top: -2.5rem;
        margin-bottom: 1.25rem;
        left: auto;
        top: auto;
        transform: none;
    }

    .product-showcase.product-showcase--home .product-showcase__card-inner {
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        transform: none;
        width: auto;
        max-width: none;
        padding: 1.5rem 1.25rem;
        gap: 0.85rem;
    }

    .product-showcase--home .product-showcase__title {
        font-size: 1.65rem;
    }

    .product-showcase--home .product-showcase__desc {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .product-showcase--home .product-showcase__btn,
    .product-showcase.product-showcase--figma-281 .product-showcase__btn,
    .product-showcase__btn {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        top: auto;
        width: 100%;
        max-width: min(344px, 100%);
        margin: 1rem 0 0;
        transform: none;
        font-size: 1.25rem;
        min-height: 75px;
    }

    /* Product page (550 D Bar): match showcase horizontal inset on About stack */
    body.product-page #product-about.product-about-stack {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    body.product-page #product-about.product-about-stack .product-about-stack__inner {
        max-width: 100%;
    }

    body.product-page #product-about.product-about-stack .product-about-stack__photo {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* --- Product page: About 550 DM Bar ------------------------------ */
@media (max-width: 1023px) {
    .product-about-stack .about-red__text--product {
        font-size: 0.975rem;
        line-height: 1.45;
    }
}

/* --- Product page: Used in cards --------------------------------- */
@media (max-width: 639px) {
    .section--product-used-482 .product-used__layout {
        gap: 1.75rem;
    }

    .product-used-grid {
        gap: 1.75rem 1rem;
    }

    .section--product-used .used-card__media {
        margin-left: 0;
        width: 80px;
        height: 60px;
    }

    .section--product-used .used-card__placeholder,
    .section--product-used .used-card__thumb,
    .section--product-used .used-card__icon-svg {
        max-width: 80px;
        width: 80px;
        height: 60px;
    }

    .section--product-used .used-card__title {
        font-size: 1.05rem;
    }

    .section--product-used .used-card__desc {
        font-size: 0.9rem;
    }
}

/* --- Product page: Why Choose 550 DM Bar (accordion tabs) -------- */
@media (max-width: 1023px) {
    .section--why550-452 .why550__layout {
        display: block;
    }

    .section--why550-452 .why550__rail,
    .section--why550-452 .why550__panels {
        display: none !important;
    }

    .section--why550-452 .why550__stack {
        display: flex !important;
        flex-direction: column;
    }

    .section--why550-452 .why550__item {
        display: flex !important;
        flex-direction: column;
        grid-column: unset;
        grid-row: unset;
        grid-template-columns: unset;
        column-gap: 0;
    }

    .section--why550-452 .why550__tab {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 1rem 1.25rem;
        box-sizing: border-box;
        border: 1px solid #ececec;
        border-bottom: 0;
        background: #fff;
        text-align: left;
    }

    .section--why550-452 .why550__item:not(.is-active) .why550__tab {
        border-bottom: 1px solid #ececec;
    }

    .section--why550-452 .why550__tab::after {
        display: none;
    }

    .section--why550-452 .why550__tab-label {
        display: block;
        width: 100%;
        font-size: 1.0625rem;
        white-space: normal;
        text-align: left;
    }

    .section--why550-452 .why550__panel {
        display: none !important;
    }

    .section--why550-452 .why550__panel.is-active {
        display: flex !important;
        max-width: 100%;
        padding: 0 1.25rem 1.25rem;
        gap: 1.25rem;
        background: #fff;
        border: 1px solid #ececec;
        border-top: 0;
        margin-top: 0;
        visibility: visible;
        opacity: 1;
    }

    .section--why550-452 .why550__tab.is-active .why550__tab-label,
    .section--why550-452 .why550__tab.is-hover .why550__tab-label,
    .section--why550-452 .why550__tab:hover .why550__tab-label,
    .section--why550-452 .why550__tab:focus-visible .why550__tab-label {
        color: var(--red);
    }

    .section--why550-452 .why550__lead {
        font-size: 1.0625rem;
    }

    .section--why550-452 .why550__body {
        max-width: none;
    }
}

@media (max-width: 600px) {
    .section--why550-452 .why550__heading {
        font-size: 1.5rem;
        white-space: normal;
    }

    .section--why550-452 .why550__tab {
        padding: 0.875rem 1rem;
    }

    .section--why550-452 .why550__panel {
        padding: 0 1rem 1rem;
    }
}

/* --- Product page: Specs table ----------------------------------- */
@media (max-width: 600px) {
    .section--specs-1032 .spec-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        padding: 0;
        font-size: 0.95rem;
    }

    .section--specs-1032 .spec-row span {
        min-height: 0;
        padding: 1rem 1.25rem;
    }

    .section--specs-1032 .spec-row span:last-child {
        border-left: none;
        padding-left: 1.25rem;
    }

    .section--specs-1032 .spec-row span:first-child {
        font-weight: 600;
        color: #333;
        padding-bottom: 0.25rem;
    }

    .section--specs-1032 .spec-row--head {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        font-size: 1.05rem;
    }

    .section--specs-1032 .spec-row--head span {
        padding: 0.75rem 1rem;
        min-height: 0;
    }

    .section--specs-1032 .spec-row--head span:last-child {
        border-left: 1px solid #d9d9d9;
    }
}

/* --- Product page: Process rows (tablet only; phones use block below) --- */
@media (min-width: 900px) and (max-width: 1199px) {
    body.product-page .section--process-244 .process-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    body.product-page .section--process-244 .process-row__media {
        width: 100%;
        max-width: 604px;
        height: auto;
        aspect-ratio: 604 / 445;
    }

    body.product-page .section--process-244 .process-row__copy {
        min-height: 0;
        width: auto;
        max-width: 512px;
    }
}

/* --- Product page: Manufacturing Process (mobile) ---------------- */
@media (max-width: 899px) {
    .section--process .container,
    .section--process-244 .container {
        padding-left: clamp(1rem, 4vw, 20px);
        padding-right: clamp(1rem, 4vw, 20px);
    }

    .section--process-244 .product-process__heading {
        margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
        font-size: clamp(1.5rem, 5.5vw, 1.875rem);
        line-height: 1.15;
        white-space: normal;
    }

    .section--process-244 .process-stack {
        gap: clamp(2rem, 6vw, 2.75rem);
    }

    body.product-page .section--process-244 .process-row,
    .process-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        grid-template-columns: unset;
        gap: clamp(1rem, 3vw, 1.25rem);
        max-width: none;
        width: 100%;
        margin-inline: 0;
    }

    /* Image first, copy below — works for reverse rows (copy before image in DOM). */
    .process-row__media,
    .section--process-244 .process-row__media,
    .section--process-244 .process-row--reverse .process-row__media {
        order: 1;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
        clip-path: none;
        justify-self: stretch;
        border-radius: 0;
    }

    .section--process-244 .process-row__media img,
    .process-row__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: none;
    }

    .section--process-244 .process-row__media--flip img {
        transform: none;
    }

    .process-row__copy,
    .section--process-244 .process-row__copy,
    .section--process-244 .process-row--reverse .process-row__copy,
    .section--process-244 .process-row:not(.process-row--reverse) .process-row__copy {
        order: 2;
        padding-left: 0 !important;
        justify-self: stretch;
        max-width: none;
        min-height: 0;
        width: 100%;
    }

    .process-row__copy h3,
    .section--process-244 .process-row__copy h3 {
        margin-bottom: 0.75rem;
        font-size: 1.125rem;
        line-height: 1.25;
    }

    .process-row__copy ul,
    .section--process-244 .process-row__copy ul {
        margin: 0;
        padding-left: 1.15rem;
        font-size: 0.9375rem;
        line-height: 1.5;
    }

    .process-row__copy li + li,
    .section--process-244 .process-row__copy li + li {
        margin-top: 0.75rem;
    }

    .section--process-244 .process-row__media .sktmt-media-video,
    .section--process-244 .process-row__media .sktmt-media-video__poster,
    .section--process-244 .process-row__media .sktmt-media-video__poster img,
    .section--process-244 .process-row__media .sktmt-media-video__video,
    .section--process-244 .process-row__media .sktmt-media-video__player,
    .section--process-244 .process-row__media .sktmt-media-video__embed {
        width: 100%;
        height: 100%;
        min-height: 100%;
    }

    .section--process-244 .process-row__media .sktmt-media-video__play {
        min-height: 44px;
        padding: 0.5rem 0.85rem;
    }
}

@media (max-width: 600px) {
    .section--process-244 .process-stack {
        gap: 2rem;
    }

    .section--process-244 .process-row__media,
    .section--process-244 .process-row--reverse .process-row__media {
        aspect-ratio: 16 / 11;
    }

    .process-row__copy h3,
    .section--process-244 .process-row__copy h3 {
        font-size: 1.0625rem;
    }

    .process-row__copy ul,
    .section--process-244 .process-row__copy ul {
        font-size: 0.9rem;
        padding-left: 1rem;
    }
}

/* --- Product page: FAQ ------------------------------------------- */
@media (max-width: 600px) {
    .product-faq__item summary,
    .product-faq__head {
        padding: 0.85rem 1rem;
        gap: 0.85rem;
        min-height: 64px;
    }

    .product-faq__num {
        font-size: 1rem;
    }

    .product-faq__label {
        font-size: 0.9375rem;
        line-height: 1.25;
    }

    .product-faq__chev {
        width: 24px;
        height: 24px;
    }

    .product-faq__panel {
        padding: 1.25rem 1rem 1.75rem;
    }

    .faq-table {
        font-size: 0.8125rem;
    }

    .faq-table thead th {
        font-size: 0.875rem;
        padding-bottom: 0.75rem;
        padding-left: 0.75rem;
        white-space: normal;
    }

    .faq-table tbody td {
        font-size: 0.8125rem;
        padding: 0.75rem 0 0 0.75rem;
        line-height: 1.35;
    }

    .faq-table th:nth-child(2),
    .faq-table td:nth-child(2),
    .faq-table--3col th:nth-child(2),
    .faq-table--3col td:nth-child(2) {
        padding-left: 0.75rem;
    }
}

/* --- Product page: Price table (mobile only) --------------------- */
@media (max-width: 768px) {
    body.product-page .section--price-540 > .container {
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
    }

    body.product-page .section--price-540 .product-price__heading {
        margin: 0 0 1.25rem;
        padding: 0;
        width: 100%;
        max-width: 100%;
        text-align: left;
        font-size: clamp(1.2rem, 4.5vw, 1.65rem);
        line-height: 1.18;
        hyphens: auto;
        overflow-wrap: break-word;
    }

    body.product-page .section--price-540 .price-table-wrap {
        margin: 0;
        width: 100%;
        max-width: 100%;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.product-page .section--price-540 .price-table {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    body.product-page .section--price-540 .price-table th,
    body.product-page .section--price-540 .price-table td {
        width: auto;
        height: auto;
        min-height: 52px;
        padding: 0.75rem 0.65rem;
        font-size: 0.875rem;
        line-height: 1.35;
        word-break: break-word;
        overflow-wrap: break-word;
        vertical-align: middle;
        text-align: left;
        box-sizing: border-box;
    }

    body.product-page .section--price-540 .price-table th:first-child,
    body.product-page .section--price-540 .price-table td:first-child {
        width: 40%;
    }

    body.product-page .section--price-540 .price-table th:last-child,
    body.product-page .section--price-540 .price-table td:last-child {
        width: 60%;
    }

    body.product-page .section--price-540 .price-table thead th {
        font-size: 0.8125rem;
        line-height: 1.3;
        font-weight: 700;
        color: #fff;
    }
}

@media (max-width: 380px) {
    body.product-page .section--price-540 .price-table th,
    body.product-page .section--price-540 .price-table td {
        padding: 0.65rem 0.5rem;
        font-size: 0.8125rem;
        min-height: 48px;
    }

    body.product-page .section--price-540 .price-table thead th {
        font-size: 0.75rem;
    }
}

/* --- Quality scroll ---------------------------------------------- */
@media (max-width: 600px) {
    .section--quality-232 .quality-card {
        flex: 0 0 min(280px, 80vw);
        width: min(280px, 80vw);
        height: auto;
        min-height: 320px;
    }

    .section--quality-232 .quality-card__inner {
        min-height: 0;
        padding: 1rem 0;
    }

    .section--quality-232 .quality-card__media,
    .section--quality-232 .quality-card__media img {
        height: 200px;
    }

    .section--quality-232 .quality-card__label,
    .section--quality-232 .quality-card p {
        font-size: 1.0625rem;
    }

    .quality-card {
        flex-basis: min(280px, 80vw);
        padding: 1rem 0.75rem;
    }

    .quality-card img {
        height: 200px;
    }

    .quality-card p {
        font-size: 1.0625rem;
    }
}

/* --- Contact section --------------------------------------------- */
@media (max-width: 899px) {
    .section--contact-figma .container.contact-row,
    .section--contact .container.contact-row {
        padding-left: 20px;
        padding-right: 20px;
        gap: 2rem;
    }

    .contact-row__intro {
        font-size: 1rem;
    }

    .section--contact .contact-row__form > .heading-accent {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
    }

    .section--contact .contact-row__form > .contact-row__intro {
        margin-bottom: 2rem;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        padding: 0.875rem 1.25rem;
    }

    .contact-row__photo img {
        min-height: 220px;
        max-height: 320px;
    }

    .sktmt-btn,
    .btn-submit,
    .btn-primary,
    .btn-text-figma,
    .hero-home__strip-cta,
    .footer-newsletter-form .sktmt-btn.sktmt-btn--on-dark {
        min-height: 56px;
    }
}

/* --- Banner (about page full banner) ----------------------------- */
@media (max-width: 768px) {
    .about-banner-slider,
    .banner-about-full:not(.about-banner-slider) {
        height: clamp(220px, 60vw, 360px);
    }

    .about-banner-slider__slide img,
    .about-banner-slider__slide .sktmt-media-video__poster img,
    .banner-about-full:not(.about-banner-slider) img {
        height: 100%;
        margin-top: 0;
    }

    .about-banner-slider__label {
        left: 12px;
    }

    .about-banner-slider__counter {
        right: 12px;
    }

    .about-banner-slider__label-inner {
        font-size: 0.625rem;
        letter-spacing: 0.1em;
    }
}

/* --- Why-about (about page) -------------------------------------- */
@media (max-width: 959px) {
    body.about-page .section--why-about-706 {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.about-page .why-about--figma-706 {
        padding-left: 0;
        padding-right: 0;
        min-height: 0;
    }

    body.about-page .why-about--figma-706 .why-about__panel {
        position: relative;
        width: 100%;
        max-width: none;
        padding: 1.75rem 1.25rem;
    }

    body.about-page .why-about--figma-706 .why-about__photo {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 804px;
        margin-inline: auto;
    }

    body.about-page .why-about--figma-706 .why-about__photo img {
        width: 100%;
        height: auto;
        max-height: 360px;
    }
}

/* --- Footer ------------------------------------------------------ */
@media (max-width: 599px) {
    .site-footer {
        padding-top: 2.5rem;
        padding-bottom: 24px;
    }

    .site-footer__shell {
        padding-left: 20px;
        padding-right: 20px;
        gap: 2.5rem;
    }

    .site-footer__logo-row .footer-logo img,
    .site-footer__logo-row .custom-logo-link img {
        height: 56px;
    }

    .footer-col h3,
    .footer-col__header {
        font-size: 1.0625rem;
    }

    .footer-col a,
    .footer-col .menu a,
    .footer-col__panel a,
    .footer-col__panel .menu a {
        font-size: 0.95rem;
    }

    .footer-newsletter-block__title {
        font-size: 1.0625rem;
    }

    .footer-newsletter-form {
        height: auto;
        min-height: 56px;
        padding: 0.5rem 0.75rem 0.5rem 1rem;
    }

    .site-footer__bottom-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-footer__copyright {
        font-size: 0.875rem;
    }
}

/* --- Nav overlay (mobile menu) ----------------------------------- */
@media (max-width: 767px) {
    .nav-overlay__main {
        padding: 2rem 1.25rem 2rem;
    }
}

@media (max-width: 600px) {
    .nav-overlay__main {
        padding: 2rem 1.25rem 2rem;
    }

    .nav-overlay__brand-name {
        font-size: 1.125rem;
    }

    .nav-overlay__list {
        gap: 1.5rem;
    }

    .nav-overlay__list a {
        font-size: 1.25rem;
    }
}

/* --- Sections: tighter padding on phones ------------------------- */
@media (max-width: 600px) {
    :root {
        --section-y: 48px;
        --pad-x: 20px;
        --pad-x-mission: 20px;
        --pad-x-about-mission: 20px;
        --pad-x-contact: 20px;
        --pad-x-showcase: 20px;
    }
}

/* ============================================================
   END mobile optimization layer
   ============================================================ */

/* ——— WordPress theme shell (fallback header / layout) ——— */
.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1 0 auto;
    width: 100%;
}

.skip-link.screen-reader-text {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999999;
    padding: 0.75rem 1rem;
    background: var(--red);
    color: #fff;
    font-weight: 600;
}

.skip-link.screen-reader-text:focus {
    left: 1rem;
    top: 1rem;
    text-decoration: none;
}

.sktmt-header-fallback {
    background: #161616;
    color: #fff;
    padding: 1rem clamp(1rem, 4vw, 2rem);
}

.sktmt-header-fallback__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sktmt-header-fallback .custom-logo-link img,
.sktmt-header-fallback__logo-link img {
    height: 40px;
    width: auto;
}

.sktmt-header-fallback .menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sktmt-header-fallback .menu a {
    color: #fff;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.sktmt-header-fallback .menu a:hover {
    text-decoration: underline;
}

.sktmt-footer-fallback {
    margin-top: auto;
    padding: 2rem clamp(1rem, 4vw, 2rem);
    background: var(--bg-page);
    font-size: 0.9rem;
}

/* ——— Inner page hero (blog, search, 404) ——— */
.hero-home--inner {
    position: relative;
    min-height: clamp(280px, 42vw, 420px);
    margin-bottom: 0;
}

.hero-home--inner .hero-home__artboard--inner {
    position: relative;
    min-height: inherit;
}

.hero-home--inner .hero-home__inner-copy {
    position: absolute;
    left: clamp(24px, 11vw, 159px);
    bottom: clamp(2rem, 8vw, 4rem);
    z-index: 4;
    max-width: min(900px, calc(100% - 48px));
    pointer-events: none;
}

.hero-home--inner .hero-home__inner-title {
    margin: 0;
    font-size: clamp(2rem, 5.2vw, 3.75rem);
    line-height: 1.08;
    color: #fff;
    text-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.hero-home--inner .hero-home__logo-mark {
    z-index: 6;
}

.hero-home--inner .hero-home__menu {
    z-index: 7;
}

/* ——— Price page hero — custom banner, no background image ——— */
.hero-home--price {
    position: relative;
    min-height: clamp(124px, 14vw, 168px);
    margin-bottom: 0;
    background: var(--red);
    overflow: hidden;
}

.hero-home--price::before {
    display: none;
}

.hero-home--price .hero-home__artboard--price {
    position: relative;
    min-height: inherit;
    width: 100%;
    max-width: none;
}

.hero-home--price .hero-home__logo-mark {
    z-index: 6;
}

.hero-home--price .hero-home__menu {
    z-index: 7;
}

.hero-home--price .hero-home__menu,
.hero-home--price .hero-home__menu:hover,
.hero-home--price .hero-home__menu:focus,
.hero-home--price .hero-home__menu:focus-visible,
.hero-home--price .hero-home__menu[aria-expanded='true'],
.hero-home--price .hero-home__menu.hero-home__menu--open,
body.nav-open .hero-home--price .hero-home__menu {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

.hero-home--price .hero-home__strip {
    z-index: 5;
    background: transparent !important;
}

.hero-home--price .hero-home__landing-copy,
.hero-home--price .hero-home__inner-copy--price {
    top: clamp(150px, 24vw, 240px);
    left: clamp(24px, 11vw, 159px);
    max-width: min(719px, calc(100% - 48px));
}

.hero-home--price .hero-home__landing-title,
.hero-home--price .hero-home__inner-title {
    margin: 0;
    font-size: clamp(1.875rem, 4vw, 3rem);
    color: #fff;
    text-shadow: none;
}

.price-hero__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 2.5vw, 2rem);
    width: 100%;
}

.price-hero__jump {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: clamp(0.95rem, 1.25vw, 1.125rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.price-hero__jump:hover,
.price-hero__jump:focus-visible {
    color: #fff;
    text-decoration: none;
}

.price-hero__jump:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff;
}

.price-hero__jump-arrow {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 44px;
    border: 2px solid #fff;
}

.price-hero__jump-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 18px;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%);
}

.price-hero__jump-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

@media (min-width: 1200px) {
    .hero-home--price,
    .hero-home--price .hero-home__artboard--price {
        min-height: 168px;
        height: 168px;
        max-height: 168px;
    }

    .hero-home--price .hero-home__logo-mark {
        top: 48px;
        left: 159px;
    }

    .hero-home--price .hero-home__menu {
        top: 60px;
        left: calc(100% - 127.5px);
    }

    .hero-home--price .hero-home__strip {
        width: 255px;
    }

    .hero-home--price .hero-home__landing-copy,
    .hero-home--price .hero-home__inner-copy--price {
        top: 210px;
        left: 159px;
        max-width: 719px;
    }
}

body.blog-page .site-main--blog {
    background: var(--bg-page, #f5f5f5);
}

.section--blog-intro {
    padding-top: clamp(2rem, 5vw, 3.5rem);
    padding-bottom: 0;
}

.blog-intro {
    margin: 0;
    max-width: 42rem;
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #1c1c1c;
}

.section--blog-index {
    padding-top: clamp(2rem, 4vw, 3rem);
    padding-bottom: var(--section-y, 80px);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.blog-card {
    margin: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

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

.blog-card__link:hover {
    text-decoration: none;
}

.blog-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0a0a0a;
}

.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-card__body {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
}

.blog-card__date {
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red, #cd2627);
}

.blog-card__title {
    margin: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    line-height: 1.2;
}

.blog-card__excerpt {
    margin: 0;
    flex: 1;
}

.blog-card__more {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--red, #cd2627);
}

.blog-pagination {
    margin-top: clamp(2rem, 4vw, 3rem);
}

.blog-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

.blog-single {
    padding: clamp(2rem, 5vw, 4rem) 0 var(--section-y, 80px);
}

.blog-single__container {
    max-width: min(760px, 100%);
}

.blog-single__date {
    display: block;
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red, #cd2627);
}

.blog-single__content {
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.7;
}

.blog-single__content > *:first-child {
    margin-top: 0;
}

.blog-single__footer {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (max-width: 768px) {
    .hero-home--inner {
        min-height: 240px;
    }

    .hero-home--inner .hero-home__inner-copy {
        left: 20px;
        right: 20px;
        bottom: 1.5rem;
        max-width: none;
    }

    .hero-home--price {
        min-height: 104px;
    }

    .nav-overlay__preview {
        opacity: 1;
    }

    .nav-overlay__rail {
        flex-basis: clamp(96px, 28vw, 140px);
    }
}

@media (max-width: 768px) {
    .about-banner-slider__slide img,
    .about-banner-slider__slide .sktmt-media-video__poster img {
        height: 100%;
        margin-top: 0;
        object-position: center;
    }

    .about-banner-slider__viewport {
        touch-action: pan-y pinch-zoom;
    }

    .about-banner-slider__nav {
        width: 44px;
        min-width: 44px;
        z-index: 8;
    }

    .about-banner-slider__nav--prev {
        left: 0;
    }

    .about-banner-slider__nav--next {
        right: 0;
    }
}

/* ——— Media blocks: image + optional video (mobile) ——— */
.sktmt-media-video--used-card,
.sktmt-media-video--banner-slide {
    width: 100%;
    height: 100%;
}

.sktmt-media-video--used-card .sktmt-media-video__poster,
.sktmt-media-video--used-card .sktmt-media-video__poster img,
.sktmt-media-video--banner-slide .sktmt-media-video__poster,
.sktmt-media-video--banner-slide .sktmt-media-video__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-overlay__preview-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.nav-overlay__preview-img[hidden],
.nav-overlay__preview-video[hidden] {
    display: none !important;
}

.mission-row__media .sktmt-media-video,
.spotlight-row__media .sktmt-media-video,
.contact-row__photo .sktmt-media-video,
.product-showcase__molten .sktmt-media-video,
.product-showcase__steel .sktmt-media-video,
.product-about-stack__photo .sktmt-media-video,
.quality-card__media .sktmt-media-video {
    width: 100%;
    min-height: 0;
}

.mission-row__media .sktmt-media-video__poster img,
.spotlight-row__media .sktmt-media-video__poster img,
.contact-row__photo .sktmt-media-video__poster img,
.product-showcase__molten .sktmt-media-video__poster img,
.product-showcase__steel .sktmt-media-video__poster img,
.product-about-stack__photo .sktmt-media-video__poster img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: cover;
}

@media (max-width: 768px) {
    .sktmt-media-video__play {
        min-height: 48px;
        min-width: 48px;
        padding: 12px;
        -webkit-tap-highlight-color: transparent;
    }

    .sktmt-media-video__play-icon {
        width: 48px;
        height: 48px;
    }

    .sktmt-media-video__play-icon::after {
        border-width: 8px 0 8px 14px;
    }

    .sktmt-media-video__video {
        max-height: min(70vh, 480px);
        object-fit: contain;
        background: #000;
    }

    .sktmt-media-video__embed {
        max-height: min(56vw, 320px);
    }

    .section--product-used .used-card__media .sktmt-media-video,
    .section--product-used .used-card__media .sktmt-media-video__poster,
    .section--product-used .used-card__media .sktmt-media-video__poster img,
    .section--product-used .used-card__thumb {
        width: 100%;
        height: 100%;
        min-height: 180px;
        object-fit: cover;
    }

    .mission-row__media .sktmt-media-video__poster img,
    .spotlight-row__media .sktmt-media-video__poster img,
    .contact-row__photo .sktmt-media-video__poster img {
        min-height: 200px;
        max-height: 360px;
    }

    .quality-card__media .sktmt-media-video__play {
        inset: auto;
        right: 8px;
        bottom: 8px;
        width: auto;
        height: auto;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.45);
    }

    .process-row__media .sktmt-media-video__poster img {
        min-height: 200px;
        object-fit: cover;
    }
}

/* —— Premium industrial hover-expand sidebar —— */
body:has(#mobile-nav.skt-rail) {
    /* Ferro strip ≈ 13–14% viewport (255px cap @ 1920 — matches --strip-w). */
    --skt-rail-w: min(var(--strip-w, 255px), 14vw);
    --skt-rail-w-hover: min(380px, 28vw);
    --skt-rail-glyph-size: 36px;
    --skt-rail-label-size: clamp(1rem, 1.2vw, 1.1875rem);
    --skt-rail-menu-gap: clamp(12px, 1.8vh, 18px);
    --hero-chrome-top: clamp(64px, 7.3vw, 105px);
    --hero-chrome-h: 40px;
    --skt-rail-ease: cubic-bezier(0.33, 1, 0.53, 1);
    --skt-rail-glyph-dur: 1.1s;
    --skt-rail-dur-panel: 0.58s;
    --skt-rail-dur-width: 0.58s;
    --skt-rail-dur-label: 0.55s;
    --skt-rail-dur-scrim: 0.55s;
    --skt-rail-dur-slide: 0.58s;
    --skt-rail-dur-item: 0.5s;
}

body.price-page:has(#mobile-nav.skt-rail) {
    --skt-rail-w: min(var(--strip-w, 255px), 22vw);
}

/* Desktop: strip hamburger in rail; hero menu hidden (home uses side panel only). */
@media (min-width: 768px) {
    body:has(#mobile-nav.skt-rail) .hero-home .hero-home__menu,
    .hero-home--landing .hero-home__menu,
    .hero-home--landing #menu-open {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
    }

    .site-header-global .hero-home__menu {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
    }

    body:has(#mobile-nav.skt-rail) .skt-rail__toggle {
        display: flex !important;
    }
}

/* Logo shares top with rail hamburger; logo is taller than toggle row. */
body:has(#mobile-nav.skt-rail) .hero-home__logo-mark {
    top: var(--hero-chrome-top, clamp(64px, 7.3vw, 105px));
    height: var(--hero-logo-h, 50px);
}

#mobile-nav.skt-rail {
    position: fixed;
    top: var(--skt-rail-top, 0);
    right: 0;
    bottom: auto;
    height: var(--skt-rail-height, 100vh);
    z-index: 10140;
    pointer-events: none;
    font-family: var(--font-body, var(--font));
}

#mobile-nav.skt-rail .skt-rail__sidebar {
    pointer-events: auto;
}

#mobile-nav.skt-rail.skt-rail--hero-bound {
    /* Clipped to hero while scrolling; sidebar still spans hero height. */
    overflow: visible;
}

#mobile-nav.skt-rail:not(.skt-rail--open):not(.skt-rail--closing) {
    width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}

#mobile-nav.skt-rail:not(.skt-rail--open):not(.skt-rail--closing) .skt-rail__sidebar {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

.skt-rail__scrim {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(8, 10, 14, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--skt-rail-dur-scrim, 0.55s) var(--skt-rail-ease, ease);
}

.skt-rail__sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--skt-rail-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    pointer-events: auto;
    background: rgba(12, 14, 18, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.22);
    transform: translateX(0);
    opacity: 1;
    transition:
        width var(--skt-rail-dur-width, 0.58s) var(--skt-rail-ease, ease),
        background var(--skt-rail-dur-width, 0.58s) var(--skt-rail-ease, ease),
        box-shadow var(--skt-rail-dur-width, 0.58s) var(--skt-rail-ease, ease);
}

@keyframes skt-rail-panel-item-in {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.skt-rail__toggle {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: var(--hero-chrome-h, 40px);
    margin: var(--hero-chrome-top, clamp(64px, 7.3vw, 105px)) 0 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
}

.skt-rail__toggle-bar {
    display: block;
    height: 2px;
    margin-inline: auto;
    background: #fff;
    border-radius: 0;
    transform-origin: center;
    transition:
        transform 0.28s cubic-bezier(0.33, 1, 0.53, 1),
        width 0.28s cubic-bezier(0.33, 1, 0.53, 1);
}

.skt-rail__toggle-bar--top {
    width: 16px;
}

.skt-rail__toggle-bar--btm {
    width: 30px;
}

/* Open panel — hamburger becomes close (X) on the rail control. */
.skt-rail__toggle[aria-expanded='true'] .skt-rail__toggle-bar--top,
.skt-rail__toggle.skt-rail__toggle--open .skt-rail__toggle-bar--top,
#mobile-nav.skt-rail.skt-rail--open .skt-rail__toggle .skt-rail__toggle-bar--top {
    width: 24px;
    transform: translateY(4.5px) rotate(45deg);
}

.skt-rail__toggle[aria-expanded='true'] .skt-rail__toggle-bar--btm,
.skt-rail__toggle.skt-rail__toggle--open .skt-rail__toggle-bar--btm,
#mobile-nav.skt-rail.skt-rail--open .skt-rail__toggle .skt-rail__toggle-bar--btm {
    width: 24px;
    transform: translateY(-4.5px) rotate(-45deg);
}

.skt-rail__menu {
    list-style: none;
    margin: 0;
    padding: 0 0 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--skt-rail-menu-gap, clamp(12px, 1.8vh, 18px));
    width: 100%;
}

.skt-rail__menu > li {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.skt-rail__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: padding var(--skt-rail-dur-width, 0.6s) var(--skt-rail-ease, ease), transform 0.45s var(--skt-rail-ease, ease);
}

.skt-rail__item--trigger {
    width: 100%;
}

.skt-rail__menu > li.skt-rail__products {
    flex-direction: column;
    align-items: center;
}

.skt-rail__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
        max-height 0.35s ease,
        opacity 0.3s ease,
        visibility 0.35s ease;
}

.skt-rail__sublist .skt-rail__item--child {
    padding-top: 4px;
    padding-bottom: 4px;
}

.skt-rail__sublist .skt-rail__label {
    font-size: 14px;
}

/* Collapsed: icons only — fixed track centered in strip. */
.skt-rail:not(.skt-rail--open) .skt-rail__item,
.skt-rail:not(.skt-rail--open) .skt-rail__item--trigger {
    width: 48px;
    max-width: 100%;
    margin-inline: auto;
    justify-content: center;
}

.skt-rail:not(.skt-rail--open) .skt-rail__menu > li.skt-rail__products {
    align-items: center;
}

.skt-rail:not(.skt-rail--open) .skt-rail__sublist {
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.skt-rail:not(.skt-rail--open) .skt-rail__label {
    display: none;
}

.skt-rail__sidebar:not(:hover):not(:focus-within) .skt-rail__glyph {
    margin-inline: auto;
}

.skt-rail__glyph {
    position: relative;
    width: var(--skt-rail-glyph-size, 36px);
    height: var(--skt-rail-glyph-size, 36px);
    flex-shrink: 0;
    overflow: visible;
    background: transparent;
    opacity: 1;
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease;
}

.skt-rail__glyph-svg {
    display: block;
    width: 100%;
    height: 100%;
    shape-rendering: geometricPrecision;
}

.skt-rail__glyph-upload,
.skt-rail__glyph-upload svg {
    display: block;
    width: 100%;
    height: 100%;
}

.skt-rail__glyph-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.skt-rail__glyph-svg path,
.skt-rail__glyph-svg circle {
    fill: none;
    stroke: #fff;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

.skt-rail__label {
    flex: 1;
    min-width: 0;
    display: block;
    font-family: var(--font-heading, var(--font));
    font-size: var(--skt-rail-label-size, clamp(1rem, 1.2vw, 1.1875rem));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    transform: none;
    transition: color 0.3s ease;
}

.skt-rail__label-text {
    display: inline-block;
    will-change: transform, opacity;
}

.skt-rail__item:hover .skt-rail__glyph,
.skt-rail__item:focus-visible .skt-rail__glyph {
    opacity: 1;
    transform: translateX(-4px);
}

.skt-rail__item:hover .skt-rail__label,
.skt-rail__item:focus-visible .skt-rail__label {
    color: #fff;
    font-weight: 700;
}

.skt-rail__cta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    align-self: stretch;
    min-height: 52px;
    height: 52px;
    padding: 0;
    margin-top: auto;
    background: var(--red, #cd2627);
    color: #fff;
    text-decoration: none;
    transition: background 0.3s ease, filter 0.3s ease, min-height var(--skt-rail-dur-width, 0.6s) var(--skt-rail-ease, ease), padding var(--skt-rail-dur-width, 0.6s) var(--skt-rail-ease, ease);
}

/* Collapsed: red square + arrow only (reference image). */
.skt-rail:not(.skt-rail--open) .skt-rail__cta {
    padding: 0;
    justify-content: center;
}

.skt-rail:not(.skt-rail--open) .skt-rail__cta-text {
    display: none;
}

.skt-rail__cta:hover,
.skt-rail__cta:focus-visible {
    background: var(--red-hover, #a81f20);
    filter: brightness(1.08);
}

.skt-rail__cta-text {
    flex: 1;
    min-width: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    max-width: 0;
    transition:
        opacity var(--skt-rail-dur-label, 0.55s) var(--skt-rail-ease, ease),
        max-width var(--skt-rail-dur-width, 0.6s) var(--skt-rail-ease, ease);
}

.skt-rail__cta-arrow {
    flex-shrink: 0;
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    position: relative;
}

.skt-rail__cta-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}

/* Desktop: menu icons hidden on collapsed strip; show on strip hover; full panel only when .skt-rail--open (menu click). */
@media (min-width: 768px) {
    .skt-rail:not(.skt-rail--open) .skt-rail__sidebar:not(:hover):not(:focus-within) .skt-rail__menu .skt-rail__glyph {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .skt-rail--open .skt-rail__menu .skt-rail__glyph,
    .skt-rail--glyph-hover .skt-rail__menu .skt-rail__glyph,
    .skt-rail__sidebar:hover .skt-rail__menu .skt-rail__glyph,
    .skt-rail__sidebar:focus-within .skt-rail__menu .skt-rail__glyph {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Desktop / tablet: expanded panel only when .skt-rail--open (menu toggle click) */
@media (min-width: 768px) {
    .skt-rail--open:not(.skt-rail--closing) .skt-rail__sidebar {
        align-items: stretch;
        width: var(--skt-rail-w-hover);
        background: rgba(14, 16, 22, 0.88);
        box-shadow: -12px 0 48px rgba(0, 0, 0, 0.28);
    }

    .skt-rail--open.skt-rail--closing .skt-rail__sidebar {
        align-items: stretch;
        width: var(--skt-rail-w-hover);
        background: rgba(14, 16, 22, 0.88);
        box-shadow: -12px 0 48px rgba(0, 0, 0, 0.28);
        pointer-events: none;
    }

    .skt-rail--open.skt-rail--closing .skt-rail__cta-text {
        opacity: 0;
        transition: opacity 0.22s var(--skt-rail-ease, ease);
    }

    .skt-rail--open.skt-rail--closing .skt-rail__menu > li > .skt-rail__item .skt-rail__label,
    .skt-rail--open.skt-rail--closing .skt-rail__menu > li .skt-rail__glyph-svg {
        animation: none;
        clip-path: inset(0 0 0 0);
    }

    .skt-rail--open .skt-rail__menu,
    .skt-rail--open .skt-rail__cta {
        max-width: none;
        align-self: stretch;
        margin-left: 0;
        margin-right: 0;
    }

    .skt-rail:not(.skt-rail--open) .skt-rail__item:hover .skt-rail__glyph {
        transform: none;
    }

    .skt-rail--open .skt-rail__item,
    .skt-rail--open .skt-rail__item--trigger {
        width: 100%;
        justify-content: flex-start;
        padding: 0 28px;
    }

    .skt-rail--open .skt-rail__menu > li > .skt-rail__item .skt-rail__label {
        display: block;
        opacity: 1;
        transform: none;
    }

    .skt-rail--open .skt-rail__cta {
        justify-content: space-between;
        min-height: 48px;
        height: auto;
        padding: 14px 22px;
    }

    .skt-rail--open .skt-rail__cta-text {
        display: block;
        opacity: 1;
        max-width: 280px;
    }

    .skt-rail--open .skt-rail__products.skt-rail__products--open .skt-rail__sublist,
    .skt-rail--open .skt-rail__products:hover .skt-rail__sublist,
    .skt-rail--open .skt-rail__products:focus-within .skt-rail__sublist {
        max-height: 160px;
        opacity: 1;
        visibility: visible;
    }

    .skt-rail--open .skt-rail__menu > li.skt-rail__products {
        align-items: stretch;
    }

    .skt-rail--open .skt-rail__products:hover .skt-rail__item--trigger .skt-rail__label,
    .skt-rail--open .skt-rail__products:focus-within .skt-rail__item--trigger .skt-rail__label {
        color: #fff;
        font-weight: 700;
    }

    .skt-rail--open .skt-rail__sublist .skt-rail__label {
        display: block;
        opacity: 1;
        transform: translateX(0);
        font-size: clamp(0.875rem, 1.05vw, 0.9375rem);
        font-weight: 600;
        letter-spacing: -0.02em;
    }

    .skt-rail--open .skt-rail__sublist .skt-rail__item--child {
        width: 100%;
        justify-content: flex-start;
        padding: 2px 28px 2px 44px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .skt-rail--open .skt-rail__sidebar {
        width: min(360px, 42vw);
    }
}

/* Mobile: same widen-on-hover / tap-to-expand as desktop side panel */
@media (max-width: 767px) {
    body:has(#mobile-nav.skt-rail) {
        --hero-chrome-top: max(calc(env(safe-area-inset-top, 0px) + 18px), 32px);
        --hero-chrome-h: 40px;
        --hero-logo-h: 40px;
        --skt-rail-w-hover: min(300px, 78vw);
        --skt-rail-glyph-size: 30px;
        --skt-rail-label-size: clamp(0.875rem, 3.2vw, 0.9375rem);
        --skt-rail-menu-gap: clamp(10px, 1.6vh, 14px);
    }

    body.skt-rail-open .site-header-global .hero-home__logo-mark,
    body.skt-rail-open .site-header-global .hero-home__menu,
    body.nav-open .site-header-global .hero-home__logo-mark,
    body.nav-open .site-header-global .hero-home__menu,
    body.skt-rail-open .site-header-global .hero-home__logo-mark img,
    body.nav-open .site-header-global .hero-home__logo-mark img {
        mix-blend-mode: normal;
    }

    body:has(#mobile-nav.skt-rail) .skt-rail__toggle {
        display: none !important;
    }

    body:has(#mobile-nav.skt-rail) .hero-home__menu,
    #menu-open.hero-home__menu {
        display: flex !important;
        position: absolute !important;
        top: var(--hero-chrome-top);
        right: 20px;
        left: auto !important;
        transform: none;
        height: var(--hero-chrome-h);
        z-index: 7;
        pointer-events: auto;
    }

    body.skt-rail-open:has(#mobile-nav.skt-rail) .hero-home__menu,
    body.nav-open:has(#mobile-nav.skt-rail) .hero-home__menu {
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        position: absolute !important;
        right: 20px;
        z-index: 10070;
    }

    body:has(#mobile-nav.skt-rail) .hero-home__logo-mark {
        top: var(--hero-chrome-top);
        left: 20px;
        right: auto;
        height: var(--hero-logo-h);
    }

    body:has(#mobile-nav.skt-rail) .hero-home__logo-mark img,
    body:has(#mobile-nav.skt-rail) .hero-home__logo-mark .custom-logo {
        height: var(--hero-logo-h);
    }

    .skt-rail__scrim {
        transition: opacity var(--skt-rail-dur-scrim, 0.55s) var(--skt-rail-ease, ease);
    }

    .skt-rail--open .skt-rail__scrim {
        opacity: 1;
        pointer-events: auto;
    }

    /* Closed: no peek strip — only hero #menu-open opens the full panel */
    #mobile-nav.skt-rail:not(.skt-rail--open) {
        width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden;
        pointer-events: none;
    }

    #mobile-nav.skt-rail:not(.skt-rail--open) .skt-rail__sidebar {
        display: none !important;
        visibility: hidden;
        pointer-events: none;
    }

    .skt-rail__sidebar {
        background: rgba(12, 14, 18, 0.82);
        z-index: 10055;
    }

    /* Open: full-page panel (menu click) */
    .skt-rail--open,
    .skt-rail--open.skt-rail--closing {
        position: fixed;
        top: 0 !important;
        right: 0;
        left: 0;
        width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        pointer-events: auto;
    }

    .skt-rail--open .skt-rail__sidebar,
    .skt-rail--open.skt-rail--closing .skt-rail__sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(300px, 78vw);
        max-width: 78vw;
        display: flex !important;
        visibility: visible !important;
        align-items: stretch;
        background: rgba(14, 16, 22, 0.98);
        box-shadow: -16px 0 36px rgba(0, 0, 0, 0.3);
    }

    .skt-rail--open:not(.skt-rail--closing) .skt-rail__sidebar {
        transform: translateX(0);
    }

    .skt-rail--open.skt-rail--closing .skt-rail__sidebar {
        pointer-events: none;
    }

    .skt-rail--open.skt-rail--closing {
        pointer-events: none;
    }

    .skt-rail--open.skt-rail--closing .skt-rail__scrim {
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--skt-rail-dur-slide, 0.58s) var(--skt-rail-ease, ease);
    }

    /* Mobile: icons only when menu panel is open (#menu-open), not on collapsed strip */
    .skt-rail:not(.skt-rail--open) .skt-rail__menu .skt-rail__glyph {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .skt-rail--open .skt-rail__menu .skt-rail__glyph {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .skt-rail--open .skt-rail__menu {
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: var(--skt-rail-menu-gap, clamp(10px, 1.6vh, 14px));
        padding: calc(var(--hero-chrome-top) + var(--hero-chrome-h) + 28px) 0 16px;
    }

    .skt-rail--open .skt-rail__menu > li,
    .skt-rail--open .skt-rail__menu > li.skt-rail__products {
        align-items: center;
        justify-content: center;
    }

    .skt-rail--open .skt-rail__item,
    .skt-rail--open .skt-rail__item--trigger {
        width: min(100%, calc(100% - 20px));
        max-width: none;
        margin-inline: 0;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        padding: 0 20px;
        min-height: 38px;
        -webkit-tap-highlight-color: transparent;
    }

    .skt-rail--open .skt-rail__glyph {
        width: var(--skt-rail-glyph-size, 30px);
        height: var(--skt-rail-glyph-size, 30px);
    }

    .skt-rail--open .skt-rail__menu > li > .skt-rail__item .skt-rail__label {
        display: block;
        opacity: 1;
        transform: none;
        font-size: var(--skt-rail-label-size, clamp(0.875rem, 3.2vw, 0.9375rem));
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.025em;
        color: rgba(255, 255, 255, 0.78);
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        transition: color 0.3s ease;
    }

    .skt-rail--open.skt-rail--closing .skt-rail__cta-text {
        opacity: 0;
        transition: opacity 0.22s var(--skt-rail-ease, ease);
    }

    .skt-rail--open.skt-rail--closing .skt-rail__menu > li > .skt-rail__item .skt-rail__label,
    .skt-rail--open.skt-rail--closing .skt-rail__menu > li .skt-rail__glyph-svg {
        animation: none;
        clip-path: inset(0 0 0 0);
    }

    .skt-rail--open .skt-rail__cta {
        justify-content: space-between;
        min-height: 44px;
        height: auto;
        padding: 12px 16px;
    }

    .skt-rail--open .skt-rail__cta-text {
        display: block;
        opacity: 1;
        max-width: 200px;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #fff;
    }

    .skt-rail--open .skt-rail__products.skt-rail__products--open .skt-rail__sublist,
    .skt-rail--open .skt-rail__products:hover .skt-rail__sublist,
    .skt-rail--open .skt-rail__products:focus-within .skt-rail__sublist {
        max-height: 180px;
        opacity: 1;
        visibility: visible;
    }

    .skt-rail--open .skt-rail__sublist .skt-rail__item--child {
        width: min(100%, calc(100% - 20px));
        justify-content: flex-start;
        padding: 4px 20px 4px 34px;
        min-height: 34px;
    }

    .skt-rail--open .skt-rail__sublist .skt-rail__label {
        display: block;
        opacity: 1;
        transform: none;
        font-size: clamp(0.8125rem, 2.8vw, 0.875rem);
        font-weight: 600;
        letter-spacing: -0.02em;
        white-space: normal;
    }

    .skt-rail:not(.skt-rail--open) .skt-rail__item:hover .skt-rail__glyph {
        transform: none;
    }

    body.nav-open:has(#mobile-nav.skt-rail) .hero-home__menu:hover {
        transform: none;
    }

    /* Open panel: hero menu icon is X (close), including hover on touch/hover devices */
    body.skt-rail-open:has(#mobile-nav.skt-rail) #menu-open.hero-home__menu span:first-child,
    body.nav-open:has(#mobile-nav.skt-rail) #menu-open.hero-home__menu[aria-expanded='true'] span:first-child,
    body.nav-open:has(#mobile-nav.skt-rail) #menu-open.hero-home__menu.hero-home__menu--open span:first-child {
        width: 26px;
        transform: translateY(var(--menu-x-shift)) rotate(45deg);
    }

    body.skt-rail-open:has(#mobile-nav.skt-rail) #menu-open.hero-home__menu span:last-child,
    body.nav-open:has(#mobile-nav.skt-rail) #menu-open.hero-home__menu[aria-expanded='true'] span:last-child,
    body.nav-open:has(#mobile-nav.skt-rail) #menu-open.hero-home__menu.hero-home__menu--open span:last-child {
        width: 26px;
        transform: translateY(calc(-1 * var(--menu-x-shift))) rotate(-45deg);
    }
}

@media (max-width: 767px) {
    body.skt-rail-open.nav-open,
    body.nav-open:has(#mobile-nav.skt-rail) {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skt-rail--open .skt-rail__sidebar,
    .skt-rail--open.skt-rail--closing .skt-rail__sidebar,
    .skt-rail--open .skt-rail__menu > li,
    .skt-rail__scrim {
        animation: none !important;
        transition-duration: 0.01ms;
    }
}

body.skt-rail-open.nav-open #page {
    visibility: visible;
}

body.skt-rail-open.nav-open .skt-rail {
    pointer-events: auto;
}

@media (max-width: 768px) {
    html,
    body,
    #page,
    .site,
    .site-content,
    .site-main {
        max-width: 100%;
        overflow-x: hidden;
    }

    .hero-home__landing-copy {
        left: 20px;
        right: 20px;
        top: 36%;
        max-width: calc(100% - 40px);
    }

    .hero-home--landing .hero-home__landing-title-line {
        max-width: none;
        white-space: normal !important;
    }

    .contact-form,
    .contact-form .btn-submit {
        max-width: none;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    .contact-form .btn-submit {
        width: 100%;
        max-width: none;
        min-height: 44px;
        border-radius: 0;
        box-sizing: border-box;
        font-size: 16px;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        padding: 0.875rem 1.25rem;
        border: 1px solid #ccc;
        background-color: #fff;
    }

    .contact-form textarea {
        min-height: 132px;
    }

    .contact-form select {
        appearance: none;
        -webkit-appearance: none;
        padding-right: 3rem;
        background-image:
            linear-gradient(45deg, transparent 50%, #222 50%),
            linear-gradient(135deg, #222 50%, transparent 50%);
        background-position:
            calc(100% - 24px) calc(50% - 3px),
            calc(100% - 18px) calc(50% - 3px);
        background-size: 6px 6px, 6px 6px;
        background-repeat: no-repeat;
    }

    .contact-form .btn-submit {
        margin-top: 0.75rem;
    }

    .footer-newsletter-form {
        border: 0;
        padding: 0;
        gap: 0.75rem;
    }

    .footer-newsletter-form input,
    .footer-newsletter-form .sktmt-btn.sktmt-btn--on-dark {
        width: 100%;
        min-height: 44px;
        border: 1px solid #fff;
        border-radius: 0;
        box-sizing: border-box;
    }

    .footer-newsletter-form input {
        padding: 0 1rem;
    }

    .footer-newsletter-form .sktmt-btn.sktmt-btn--on-dark {
        font-size: 1rem;
    }

    .sktmt-btn:not(.footer-newsletter-form__send):not(.btn-submit),
    .hero-home__strip-cta,
    .product-showcase__btn,
    .home-page .section--spotlight-home-102 .spotlight-row__cta.sktmt-btn {
        width: auto !important;
        max-width: none !important;
        min-height: 52px !important;
        padding: 0 1.25rem !important;
        font-size: 1.0625rem !important;
    }

    .home-page .section--spotlight-home-102 .spotlight-row--figma-102 {
        padding-top: 3rem;
        padding-bottom: 3rem;
        row-gap: 2.5rem;
    }

    .home-page .section--spotlight-home-102 .spotlight-row--figma-102 .spotlight-row__media {
        min-height: 0;
        margin-left: 0;
        justify-content: center;
        margin-bottom: 0.5rem;
    }

    .home-page .section--spotlight-home-102 .spotlight-row--figma-102 .spotlight-row__media img,
    .home-page .section--spotlight-home-102 .spotlight-row--figma-102 .spotlight-row__media .sktmt-media-video__poster img {
        width: min(280px, 100%);
        max-width: 100%;
        max-height: none;
        object-fit: contain;
        object-position: center center;
        border-radius: 0;
    }

    .home-page .section--spotlight-home-102 .spotlight-row--figma-102 .spotlight-row__copy {
        gap: 1.5rem;
        padding-inline: 0.75rem;
        padding-bottom: 0.75rem;
        box-sizing: border-box;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skt-rail__sidebar,
    .skt-rail__label,
    .skt-rail__glyph,
    .skt-rail__glyph-svg path,
    .skt-rail__glyph-svg circle,
    .skt-rail__cta-text,
    .skt-rail__scrim {
        transition-duration: 0.01ms;
    }

    .skt-rail--glyph-intro .skt-rail__menu > li .skt-rail__glyph-svg,
    .skt-rail--glyph-hover .skt-rail__menu > li .skt-rail__glyph-svg,
    .skt-rail--open .skt-rail__menu > li .skt-rail__glyph-svg,
    .skt-rail--open .skt-rail__menu > li > .skt-rail__item .skt-rail__label {
        animation: none;
        clip-path: inset(0 0 0 0);
    }
}