/* FERROBEND — COMMON SITE STYLES */

/* Keep the contact form's spam trap out of the visible form. */
.contact-form > input[name="website"] {
    display: none;
}


/* FERROBEND HOMEPAGE.CSS PREMIUM HOMEPAGE DESIGN SYSTEM Primary Dark   : #17232f Deep Dark      : #111a21 Accent Orange  : #ff6b00 Secondary Dark : #232323 White          : #ffffff Light Gray     : #f7f8fa Warm Light     : #fff8f2 Text Gray      : #666666 Border         : #e5e5e5 NO NAVY / NO BLUE HERO ANIMATIONS Glow Animation : 3s  ← DO NOT CHANGE Float Animation: 5s  ← DO NOT CHANGE */

/* ROOT VARIABLES */
:root {
    /* ---------- COLORS ---------- */
    --dark: #17232f;
    --dark-deep: #111a21;
    --dark-soft: #232323;
    --orange: #ff6b00;
    --orange-hover: #e85f00;
    --orange-soft: #fff3e8;
    --white: #ffffff;
    --light-bg: #f7f8fa;
    --soft-bg: #f3f4f5;
    --warm-bg: #fff8f2;
    --text: #222222;
    --text-muted: #666666;
    --text-light: #d5dce2;
    --text-soft: #9ba4ab;
    --border: #e5e5e5;
    --border-dark: rgba(255,255,255,.12);
    /* ---------- GRADIENTS ---------- */
    --gradient-dark:
        linear-gradient(
            120deg,
            #111a21 0%,
            #17232f 52%,
            #232323 100%
        );
    --gradient-dark-soft:
        linear-gradient(
            135deg,
            #17232f 0%,
            #202a31 58%,
            #232323 100%
        );
    --gradient-warm:
        linear-gradient(
            145deg,
            #fff3e8 0%,
            #fff8f2 42%,
            #ffffff 100%
        );
    --gradient-light:
        linear-gradient(
            145deg,
            #f3f4f5 0%,
            #f7f8fa 55%,
            #fff8f2 100%
        );
    --gradient-orange:
        linear-gradient(
            135deg,
            #ff7a14 0%,
            #ff6b00 58%,
            #e85f00 100%
        );
    /* ---------- SHADOWS ---------- */
    --shadow-sm:
        0 8px 24px rgba(23,35,47,.07);
    --shadow-md:
        0 15px 40px rgba(23,35,47,.11);
    --shadow-lg:
        0 25px 60px rgba(23,35,47,.16);
    /* ---------- LAYOUT ---------- */
    --container-width: 1380px;
    /* ---------- RADIUS ---------- */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    /* ---------- TRANSITION ---------- */
    --transition: .3s ease;
}


/* GLOBAL RESET */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--white);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

button,
input {
    font-family: inherit;
}

ul {
    list-style: none;
}

section {
    position: relative;
}


/* SHARED SVG ICONS */
.fa-solid,
.fa-regular,
.fa-brands {
    display: inline-block;
    font-style: normal;
    line-height: 1;
    vertical-align: -.125em;
}

.fa-inline-svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.fa-inline-svg[viewBox="0 0 320 512"] { width: .625em; }

.fa-inline-svg[viewBox="0 0 384 512"] { width: .75em; }

.fa-inline-svg[viewBox="0 0 448 512"] { width: .875em; }

.fa-inline-svg[viewBox="0 0 576 512"] { width: 1.125em; }

.fa-inline-svg[viewBox="0 0 640 512"] { width: 1.25em; }

.fa-bars > .fa-svg-xmark,
.fa-xmark > .fa-svg-bars {
    display: none;
}

.fa-xmark > .fa-svg-xmark {
    display: block;
}


/* CONTAINER */
.container {
    width: 92%;
    max-width: var(--container-width);
    margin: 0 auto;
}


/* SECTION HEADER */
.section-header {
    max-width: 900px;
    margin: 0 auto 42px;
    text-align: center;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 11px;
}

.section-tag::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--orange);
}

.section-header h2 {
    color: var(--dark);
    font-size: clamp(36px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.7px;
    margin-bottom: 13px;
}

.section-header > p:last-child {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.75;
}


/* BUTTON SYSTEM */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


/* PRIMARY BUTTON */
.primary-btn {
    background: var(--gradient-orange);
    color: var(--white);
    border-color: var(--orange);
    box-shadow:
        0 9px 24px rgba(255,107,0,.20);
}

.primary-btn:hover {
    background:
        linear-gradient(
            135deg,
            #ff861f 0%,
            #ff6b00 60%,
            #d95700 100%
        );
    border-color: var(--orange-hover);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow:
        0 14px 30px rgba(255,107,0,.28);
}


/* SECONDARY BUTTON */
.secondary-btn {
    background: rgba(255,255,255,.035);
    color: var(--white);
    border-color:
        rgba(255,255,255,.38);
    backdrop-filter:
        blur(5px);
}

.secondary-btn:hover {
    background: var(--white);
    color: var(--dark);
    border-color: var(--white);
    transform: translateY(-3px);
}


/* HEADER */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.99),
            rgba(255,255,255,.96)
        );
    border-bottom:
        1px solid var(--border);
    box-shadow:
        0 5px 22px rgba(23,35,47,.055);
}


/* HEADER INNER */
.header > .container {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    position: relative;
}


/* LOGO */
.logo {
    flex: 0 0 auto;
}

.logo a {
    display: flex;
    align-items: center;
}

.logo-img {
    width: 195px;
    height: auto;
    object-fit: contain;
}


/* NAVIGATION */
.navbar {
    flex: 1;
    display: flex;
    justify-content: center;
}

.navbar > ul {
    display: flex;
    align-items: center;
    gap: 32px;
}

.navbar > ul > li {
    position: relative;
}

.navbar > ul > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 35px 0;
    color: var(--dark);
    font-size: 15px;
    font-weight: 500;
    transition:
        color var(--transition);
}

.navbar > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 25px;
    width: 0;
    height: 2px;
    background:
        var(--orange);
    transition:
        width var(--transition);
}

.navbar > ul > li > a:hover,
.navbar > ul > li > a.active {
    color: var(--orange);
}

.navbar > ul > li > a:hover::after,
.navbar > ul > li > a.active::after {
    width: 100%;
}

.navbar > ul > li > a i {
    font-size: 10px;
    transition:
        transform var(--transition);
}

.dropdown:hover > a i {
    transform: rotate(180deg);
}


/* DROPDOWN */
.dropdown-menu {
    position: absolute;
    top: calc(100% - 7px);
    left: 50%;
    width: 250px;
    padding: 8px 0;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fffaf6
        );
    border:
        1px solid var(--border);
    border-radius:
        var(--radius-md);
    box-shadow:
        var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform:
        translate(-50%, 10px);
    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
    z-index: 9999;
}

.dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform:
        translate(-50%, 0);
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu li a {
    display: block;
    padding: 12px 20px;
    color: var(--dark);
    font-size: 14px;
    font-weight: 500;
    transition:
        background var(--transition),
        color var(--transition);
}

.dropdown-menu li a:hover {
    background:
        linear-gradient(
            90deg,
            #fff3e8,
            #fff8f2
        );
    color: var(--orange);
}


/* MOBILE MENU BUTTON */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #dcdfe2;
    border-radius: 5px;
    background: var(--white);
    color: var(--dark);
    font-size: 19px;
    cursor: pointer;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.menu-toggle:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
}


/* HERO SECTION IMPORTANT: HERO ANIMATION TIMINGS ARE PRESERVED heroGlow = 3s heroFloat = 5s */
.hero {
    position: relative;
    min-height: 650px;
    padding: 82px 0 76px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 88% 39%,
            rgba(255,107,0,.16) 0,
            rgba(255,107,0,.08) 13%,
            transparent 34%
        ),
        radial-gradient(
            circle at 76% 100%,
            rgba(255,255,255,.045) 0,
            transparent 28%
        ),
        var(--gradient-dark);
}


/* HERO DECORATIVE CIRCLES */
.hero::before {
    content: "";
    position: absolute;
    width: 570px;
    height: 570px;
    right: -235px;
    top: 50%;
    transform:
        translateY(-50%);
    border:
        1px solid rgba(255,255,255,.07);
    border-radius: 50%;
    box-shadow:
        0 0 0 75px rgba(255,107,0,.018),
        0 0 0 150px rgba(255,255,255,.012);
    pointer-events:
        none;
}

.hero::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: 60px;
    top: 50%;
    transform:
        translateY(-50%);
    border:
        1px dashed rgba(255,107,0,.13);
    border-radius: 50%;
    pointer-events:
        none;
}


/* HERO CONTAINER */
.hero .hero-container {
    min-height: 495px;
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);
    align-items: center;
    gap: 55px;
    position: relative;
    z-index: 2;
}


/* HERO CONTENT */
.hero-content {
    position: relative;
    z-index: 3;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--orange);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hero-tag::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--orange);
}


/* HERO HEADING */
.hero h1 {
    color: var(--white);
    font-size:
        clamp(46px, 5vw, 70px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.4px;
    max-width: 850px;
    margin-bottom: 20px;
}


/* HERO DESCRIPTION */
.hero-description {
    color: var(--text-light);
    font-size: 17px;
    line-height: 1.75;
    max-width: 730px;
    margin-bottom: 29px;
}


/* HERO BUTTONS */
.hero-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* HERO IMAGE WRAPPER */
.hero-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 2;
}


/* HERO IMAGE GLOW EXACTLY 3s */
.hero-image::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    background:
        radial-gradient(
            circle,
            rgba(255,107,0,.13) 0%,
            rgba(255,107,0,.055) 35%,
            transparent 70%
        );
    border-radius: 50%;
    filter: blur(2px);
    animation:
        heroGlow 3s ease-in-out infinite;
}


/* HERO GLOW KEYFRAMES */
@keyframes heroGlow {
    0% {
        transform:
            scale(.96);
        opacity: .55;
    }

    50% {
        transform:
            scale(1.04);
        opacity: .9;
    }

    100% {
        transform:
            scale(.96);
        opacity: .55;
    }

}


/* HERO IMAGE EXACTLY 5s */
.hero-image img {
    position: relative;
    width: 100%;
    max-width: 590px;
    height: auto;
    object-fit: contain;
    z-index: 2;
    filter:
        drop-shadow(
            0 26px 34px rgba(0,0,0,.28)
        );
    animation:
        heroFloat 5s ease-in-out infinite;
    will-change:
        transform;
    transition:
        filter .35s ease;
}


/* HERO FLOAT KEYFRAMES */
@keyframes heroFloat {
    0% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-18px);
    }

    100% {
        transform:
            translateY(0);
    }

}


/* HERO IMAGE HOVER */
.hero-image:hover img {
    animation-play-state:
        paused;
    transform:
        translateY(-24px)
        scale(1.025);
    filter:
        drop-shadow(
            0 32px 42px rgba(0,0,0,.34)
        );
}


/* ABOUT SECTION WARM PREMIUM BACKGROUND */
.about-section {
    padding: 68px 0 72px;
    background:
        radial-gradient(
            circle at 7% 20%,
            rgba(255,107,0,.065),
            transparent 24%
        ),
        var(--gradient-warm);
}


/* ABOUT CONTENT */
.about-content {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(330px, .7fr);
    gap: 50px;
    align-items: stretch;
}

.about-text > p {
    max-width: 780px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.82;
    margin-bottom: 16px;
}


/* ABOUT POINTS */
.about-points {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 14px;
    margin-top: 24px;
}

.point {
    min-height: 112px;
    padding: 19px 17px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fff8f2 100%
        );
    border:
        1px solid rgba(255,107,0,.13);
    border-top:
        3px solid var(--orange);
    border-radius:
        var(--radius-md);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.point:hover {
    transform:
        translateY(-5px);
    border-color:
        rgba(255,107,0,.28);
    box-shadow:
        var(--shadow-sm);
}

.point i {
    color:
        var(--orange);
    font-size:
        25px;
}

.point span {
    color:
        var(--dark);
    font-size:
        14px;
    font-weight:
        600;
    line-height:
        1.4;
}


/* ABOUT CARD */
.about-card {
    position: relative;
    padding: 29px;
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(255,107,0,.13),
            transparent 28%
        ),
        var(--gradient-dark-soft);
    border-radius:
        var(--radius-lg);
    overflow:
        hidden;
    box-shadow:
        var(--shadow-md);
}

.about-card::before {
    content:
        "";
    position:
        absolute;
    width:
        250px;
    height:
        250px;
    right:
        -110px;
    top:
        -110px;
    border:
        1px solid rgba(255,107,0,.16);
    border-radius:
        50%;
}

.about-card::after {
    content:
        "";
    position:
        absolute;
    width:
        155px;
    height:
        155px;
    left:
        -72px;
    bottom:
        -72px;
    border:
        1px solid rgba(255,255,255,.07);
    border-radius:
        50%;
}


/* STATS BOX */
.stats-box {
    position:
        relative;
    z-index:
        2;
}

.stats-box h3 {
    color:
        var(--orange);
    font-size:
        22px;
    margin-bottom:
        22px;
}

.stat {
    display:
        flex;
    align-items:
        center;
    gap:
        17px;
    padding:
        14px 0;
    border-top:
        1px solid rgba(255,255,255,.10);
}

.stat:last-child {
    border-bottom:
        1px solid rgba(255,255,255,.10);
}

.stat strong {
    min-width:
        70px;
    color:
        var(--white);
    font-size:
        24px;
    font-weight:
        700;
}

.stat span {
    color:
        #c8d0d6;
    font-size:
        13px;
    line-height:
        1.5;
}


/* SEARCH */
.search-wrapper {
    position:
        relative;
    width:
        min(92%, 930px);
    margin:
        0 auto 55px;
    display:
        flex;
    align-items:
        center;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf6
        );
    border:
        1px solid rgba(255,107,0,.15);
    border-radius:
        var(--radius-md);
    box-shadow:
        0 14px 35px rgba(23,35,47,.10);
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.search-wrapper:focus-within {
    border-color:
        var(--orange);
    box-shadow:
        0 15px 38px rgba(255,107,0,.13);
}

.search-icon {
    flex:
        0 0 auto;
    color:
        var(--orange);
    font-size:
        18px;
    margin-left:
        22px;
}

.search-wrapper input {
    width:
        100%;
    min-height:
        62px;
    padding:
        0 25px 0 15px;
    border:
        none;
    outline:
        none;
    background:
        transparent;
    color:
        var(--dark);
    font-size:
        16px;
}

.search-wrapper input::placeholder {
    color:
        #929aa2;
}


/* SEARCH RESULTS */
.search-results {
    position:
        absolute;
    top:
        calc(100% + 8px);
    left:
        0;
    right:
        0;
    background:
        #ffffff;
    border:
        1px solid var(--border);
    border-radius:
        var(--radius-md);
    box-shadow:
        var(--shadow-md);
    overflow:
        hidden;
    z-index:
        100;
}


/* PRODUCTS SECTION */
.products-section {
    padding:
        68px 0 72px;
    background:
        radial-gradient(
            circle at 7% 10%,
            rgba(255,107,0,.07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #f7f8fa 0%,
            #ffffff 55%,
            #fff8f2 100%
        );
}


/* PRODUCT GRID */
.product-grid {
    display:
        grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap:
        17px;
}


/* PRODUCT CARD */
.product-card {
    position:
        relative;
    min-height:
        255px;
    padding:
        27px 24px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffaf6 100%
        );
    border:
        1px solid var(--border);
    border-radius:
        var(--radius-md);
    overflow:
        hidden;
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.product-card::before {
    content:
        "";
    position:
        absolute;
    left:
        0;
    top:
        0;
    width:
        100%;
    height:
        4px;
    background:
        var(--gradient-orange);
    transform:
        scaleX(0);
    transform-origin:
        left;
    transition:
        transform var(--transition);
}

.product-card:hover {
    transform:
        translateY(-7px);
    border-color:
        rgba(255,107,0,.27);
    box-shadow:
        var(--shadow-md);
}

.product-card:hover::before {
    transform:
        scaleX(1);
}


/* PRODUCT ICON */
.icon-box {
    width:
        58px;
    height:
        58px;
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    background:
        linear-gradient(
            145deg,
            #fff3e8,
            #fff8f2
        );
    border:
        1px solid rgba(255,107,0,.12);
    border-radius:
        10px;
    margin-bottom:
        19px;
}

.icon-box i {
    color:
        var(--orange);
    font-size:
        25px;
}


/* PRODUCT TEXT */
.product-card h3 {
    color:
        var(--dark);
    font-size:
        19px;
    font-weight:
        600;
    line-height:
        1.35;
    margin-bottom:
        9px;
}

.product-card p {
    color:
        var(--text-muted);
    font-size:
        14px;
    line-height:
        1.70;
}


/* TECHNICAL SECTION */
.technical-section {
    padding:
        70px 0;
    background:
        #ffffff;
}


/* STANDARDS GRID */
.standards-grid {
    display:
        grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap:
        17px;
}


/* STANDARD CARD */
.standard-card {
    position:
        relative;
    padding:
        26px;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f8fa 52%,
            #fff8f2 100%
        );
    border:
        1px solid var(--border);
    border-left:
        4px solid var(--orange);
    border-radius:
        var(--radius-md);
    box-shadow:
        var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.standard-card:hover {
    transform:
        translateY(-5px);
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff7f0 100%
        );
    box-shadow:
        var(--shadow-md);
}

.standard-card h3 {
    color:
        var(--dark);
    font-size:
        26px;
    margin-bottom:
        6px;
}

.standard-card p {
    color:
        var(--text-muted);
    font-size:
        14px;
    line-height:
        1.55;
}


/* MATERIAL SECTION PREMIUM DARK GRADIENT */
.material-section {
    position:
        relative;
    padding:
        72px 0;
    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(255,107,0,.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 91% 82%,
            rgba(255,255,255,.045),
            transparent 23%
        ),
        var(--gradient-dark);
    overflow:
        hidden;
}


/* MATERIAL BACKGROUND GRID */
.material-section::before {
    content:
        "";
    position:
        absolute;
    inset:
        0;
    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );
    background-size:
        42px 42px;
    opacity:
        .55;
    pointer-events:
        none;
}

.material-section .container {
    position:
        relative;
    z-index:
        2;
}

.material-section .section-header h2 {
    color:
        var(--white);
}

.material-section .section-header > p:last-child {
    color:
        #d2d9de;
}


/* MATERIAL GRID */
.material-grid {
    display:
        grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap:
        17px;
}


/* MATERIAL CARD */
.material-card {
    position:
        relative;
    min-height:
        215px;
    padding:
        27px 24px;
    display:
        flex;
    flex-direction:
        column;
    justify-content:
        flex-start;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fff8f2 100%
        );
    border-radius:
        var(--radius-lg);
    border-top:
        4px solid var(--orange);
    box-shadow:
        0 18px 45px rgba(0,0,0,.18);
    overflow:
        hidden;
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.material-card::after {
    content:
        "";
    position:
        absolute;
    width:
        115px;
    height:
        115px;
    right:
        -50px;
    bottom:
        -50px;
    border:
        1px solid rgba(255,107,0,.11);
    border-radius:
        50%;
}

.material-card:hover {
    transform:
        translateY(-7px);
    box-shadow:
        0 28px 58px rgba(0,0,0,.25);
}

.material-card h3 {
    position:
        relative;
    z-index:
        2;
    color:
        var(--dark);
    font-size:
        21px;
    line-height:
        1.3;
    margin-bottom:
        10px;
}

.material-card p {
    position:
        relative;
    z-index:
        2;
    color:
        var(--text-muted);
    font-size:
        14px;
    line-height:
        1.70;
}


/* INDUSTRIES SECTION */
.industries-section {
    padding:
        68px 0;
    background:
        linear-gradient(
            145deg,
            #f7f8fa 0%,
            #ffffff 55%,
            #fff8f2 100%
        );
}


/* INDUSTRY GRID */
.industries-grid {
    display:
        grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap:
        17px;
}


/* INDUSTRY CARD */
.industry-card {
    position:
        relative;
    min-height:
        220px;
    padding:
        25px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fafbfc
        );
    border:
        1px solid var(--border);
    border-radius:
        var(--radius-md);
    overflow:
        hidden;
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.industry-card::after {
    content:
        "";
    position:
        absolute;
    left:
        0;
    bottom:
        0;
    width:
        100%;
    height:
        3px;
    background:
        var(--gradient-orange);
    transform:
        scaleX(0);
    transform-origin:
        left;
    transition:
        transform var(--transition);
}

.industry-card:hover {
    transform:
        translateY(-6px);
    border-color:
        rgba(255,107,0,.27);
    box-shadow:
        var(--shadow-md);
}

.industry-card:hover::after {
    transform:
        scaleX(1);
}


/* INDUSTRY ICON */
.industry-card > i {
    width:
        54px;
    height:
        54px;
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    background:
        linear-gradient(
            145deg,
            #fff3e8,
            #fff8f2
        );
    border:
        1px solid rgba(255,107,0,.12);
    border-radius:
        10px;
    color:
        var(--orange);
    font-size:
        23px;
    margin-bottom:
        17px;
}


/* INDUSTRY TEXT */
.industry-card h3 {
    color:
        var(--dark);
    font-size:
        19px;
    line-height:
        1.35;
    margin-bottom:
        8px;
}

.industry-card p {
    color:
        var(--text-muted);
    font-size:
        14px;
    line-height:
        1.68;
}


/* WHY SECTION PREMIUM DARK GRADIENT */
.why-section {
    padding:
        70px 0;
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(255,107,0,.11),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 82%,
            rgba(255,255,255,.04),
            transparent 23%
        ),
        var(--gradient-dark);
}


/* WHY HEADER */
.why-section .section-header h2 {
    color:
        var(--white);
}

.why-section .section-header > p:last-child {
    color:
        #cdd4da;
}


/* WHY GRID */
.why-grid {
    display:
        grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap:
        17px;
}


/* WHY CARD */
.why-card {
    position:
        relative;
    min-height:
        225px;
    padding:
        27px 23px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.035)
        );
    border:
        1px solid rgba(255,255,255,.13);
    border-radius:
        var(--radius-md);
    overflow:
        hidden;
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition),
        background var(--transition);
}

.why-card::before {
    content:
        "";
    position:
        absolute;
    top:
        0;
    left:
        0;
    width:
        100%;
    height:
        4px;
    background:
        var(--gradient-orange);
}

.why-card:hover {
    transform:
        translateY(-7px);
    border-color:
        rgba(255,107,0,.38);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            rgba(255,107,0,.055)
        );
    box-shadow:
        0 25px 50px rgba(0,0,0,.20);
}


/* WHY ICON */
.why-card > i {
    width:
        54px;
    height:
        54px;
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    color:
        var(--orange);
    background:
        rgba(255,107,0,.12);
    border:
        1px solid rgba(255,107,0,.20);
    border-radius:
        50%;
    font-size:
        27px;
    margin-bottom:
        17px;
}


/* WHY TEXT */
.why-card h3 {
    color:
        var(--white);
    font-size:
        18px;
    line-height:
        1.35;
    margin-bottom:
        9px;
}

.why-card p {
    color:
        rgba(255,255,255,.68);
    font-size:
        14px;
    line-height:
        1.72;
}


/* CONTACT CTA PREMIUM ORANGE GRADIENT */
.contact-cta {
    position:
        relative;
    padding:
        76px 0;
    text-align:
        center;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255,255,255,.12),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            #ff790f 0%,
            #ff6b00 55%,
            #e85f00 100%
        );
    overflow:
        hidden;
}


/* CTA DECORATIVE CIRCLES */
.contact-cta::before {
    content:
        "";
    position:
        absolute;
    width:
        350px;
    height:
        350px;
    left:
        -170px;
    top:
        -170px;
    border:
        1px solid rgba(255,255,255,.19);
    border-radius:
        50%;
    box-shadow:
        0 0 0 55px rgba(255,255,255,.025);
}

.contact-cta::after {
    content:
        "";
    position:
        absolute;
    width:
        300px;
    height:
        300px;
    right:
        -145px;
    bottom:
        -145px;
    border:
        1px solid rgba(255,255,255,.16);
    border-radius:
        50%;
}


/* CTA CONTENT */
.contact-cta .container {
    position:
        relative;
    z-index:
        2;
}

.contact-cta h2 {
    color:
        var(--white);
    font-size:
        clamp(35px, 4vw, 50px);
    font-weight:
        700;
    line-height:
        1.16;
    margin-bottom:
        13px;
}

.contact-cta p {
    max-width:
        760px;
    margin:
        0 auto 27px;
    color:
        rgba(255,255,255,.93);
    font-size:
        17px;
    line-height:
        1.72;
}

.contact-cta .primary-btn {
    background:
        linear-gradient(
            135deg,
            #17232f,
            #111a21
        );
    border-color:
        var(--dark);
    color:
        var(--white);
    box-shadow:
        0 12px 28px rgba(23,35,47,.20);
}

.contact-cta .primary-btn:hover {
    background:
        var(--white);
    border-color:
        var(--white);
    color:
        var(--dark);
}


/* FOOTER */
.footer {
    padding:
        62px 0 22px;
    background:
        linear-gradient(
            135deg,
            #111a21 0%,
            #232323 100%
        );
    color:
        var(--white);
}


/* FOOTER CONTENT */
.footer-content {
    display:
        grid;
    grid-template-columns:
        1.45fr .8fr .8fr;
    gap:
        55px;
}


/* FOOTER ABOUT */
.footer-about {
    max-width:
        510px;
}

.footer-logo {
    width:
        185px;
    height:
        auto;
    margin-bottom:
        21px;
    background:
        var(--white);
    padding:
        6px 10px;
    border-radius:
        4px;
}

.footer-about > p {
    color:
        #c5cbd0;
    font-size:
        14px;
    line-height:
        1.7;
    margin-bottom:
        8px;
}

.footer-about > p:first-of-type {
    color:
        var(--orange);
    font-size:
        13px;
    font-weight:
        700;
    letter-spacing:
        1.8px;
    text-transform:
        uppercase;
    margin-bottom:
        11px;
}


/* CLOCK */
.live-clock {
    margin-top:
        20px;
    padding-top:
        19px;
    border-top:
        1px solid rgba(255,255,255,.09);
}

.clock-time,
.clock-date,
.clock-location {
    color:
        #bdc5cb;
    font-size:
        13px;
    line-height:
        1.7;
    margin-bottom:
        4px;
}

.clock-time span,
.clock-date span {
    color:
        var(--white);
}

.clock-location {
    color:
        var(--orange);
    font-weight:
        500;
}


/* SOCIAL LINKS */
.social-links {
    display:
        flex;
    align-items:
        center;
    flex-wrap:
        wrap;
    gap:
        9px;
    margin-top:
        20px;
}

.social-links a {
    width:
        42px;
    height:
        42px;
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    border:
        1px solid rgba(255,255,255,.18);
    border-radius:
        6px;
    color:
        var(--white);
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.social-links a:hover {
    background:
        var(--orange);
    border-color:
        var(--orange);
    color:
        var(--white);
    transform:
        translateY(-4px);
}


/* FOOTER LINKS */
.footer-links h3 {
    color:
        var(--white);
    font-size:
        15px;
    font-weight:
        700;
    letter-spacing:
        1.5px;
    text-transform:
        uppercase;
    margin-bottom:
        19px;
}

.footer-links h3::after {
    content:
        "";
    display:
        block;
    width:
        28px;
    height:
        2px;
    margin-top:
        8px;
    background:
        var(--orange);
}

.footer-links a {
    display:
        block;
    color:
        #bdc5cb;
    font-size:
        14px;
    line-height:
        1.6;
    margin-bottom:
        10px;
    transition:
        color var(--transition),
        transform var(--transition);
}

.footer-links a:hover {
    color:
        var(--orange);
    transform:
        translateX(4px);
}


/* COPYRIGHT */
.copyright {
    margin-top:
        42px;
    padding-top:
        19px;
    border-top:
        1px solid rgba(255,255,255,.10);
    text-align:
        center;
}

.copyright p {
    color:
        #aeb7bd;
    font-size:
        13px;
}


/* WHATSAPP FLOAT */
.whatsapp-float {
    position:
        fixed;
    right:
        25px;
    bottom:
        25px;
    width:
        60px;
    height:
        60px;
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    background:
        #25D366;
    color:
        var(--white);
    border-radius:
        50%;
    box-shadow:
        0 12px 30px rgba(37,211,102,.30);
    z-index:
        9999;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.whatsapp-float i {
    font-size:
        31px;
}

.whatsapp-float:hover {
    transform:
        translateY(-5px) scale(1.05);
    box-shadow:
        0 18px 38px rgba(37,211,102,.42);
}


/* LARGE TABLET */
@media (max-width: 1150px) {
    .navbar > ul {
        gap:
            20px;
    }

    .navbar > ul > li > a {
        font-size:
            14px;
    }

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

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

    .about-content {
        gap:
            38px;
    }

    .about-points {
        grid-template-columns:
            1fr;
    }

}


/* TABLET */
@media (max-width: 900px) {
    .header > .container {
        min-height:
            82px;
    }

    .logo-img {
        width:
            165px;
    }

    .navbar {
        overflow-x:
            auto;
    }

    .navbar > ul {
        gap:
            20px;
    }

    .navbar > ul > li > a {
        font-size:
            13px;
        padding:
            30px 0;
    }

    .hero {
        padding:
            68px 0 65px;
    }

    .hero .hero-container {
        grid-template-columns:
            1fr;
        min-height:
            auto;
        gap:
            38px;
        text-align:
            center;
    }

    .hero-content {
        display:
            flex;
        flex-direction:
            column;
        align-items:
            center;
    }

    .hero-tag {
        justify-content:
            center;
    }

    .hero h1 {
        max-width:
            850px;
        font-size:
            51px;
    }

    .hero-description {
        max-width:
            680px;
        font-size:
            16px;
    }

    .hero-image {
        justify-content:
            center;
    }

    .hero-image::before {
        width:
            380px;
        height:
            380px;
    }

    .hero-image img {
        max-width:
            500px;
    }

    .about-content {
        grid-template-columns:
            1fr;
    }

    .footer-content {
        grid-template-columns:
            1fr 1fr;
        gap:
            40px;
    }

    .footer-about {
        grid-column:
            1 / -1;
        max-width:
            700px;
    }

}


/* MOBILE */
@media (max-width: 768px) {
    html,
    body {
        width:
            100%;
        max-width:
            100%;
        overflow-x:
            hidden;
    }

    .container {
        width:
            92%;
        max-width:
            100%;
    }

    /* HEADER */
    .header {
        position:
            sticky;
        top:
            0;
        z-index:
            9999;
    }

    .header > .container {
        width:
            92%;
        min-height:
            76px;
        display:
            flex;
        align-items:
            center;
        justify-content:
            space-between;
        position:
            relative;
    }

    /* LOGO */
    .logo {
        flex:
            0 0 auto;
    }

    .logo-img {
        width:
            145px;
        max-width:
            100%;
    }

    /* MOBILE MENU BUTTON */
    .menu-toggle {
        display:
            flex;
        flex:
            0 0 auto;
        align-items:
            center;
        justify-content:
            center;
        width:
            42px;
        height:
            42px;
        margin-left:
            auto;
        background:
            var(--white);
        border:
            1px solid #dcdfe2;
        border-radius:
            5px;
        color:
            var(--dark);
        font-size:
            19px;
        cursor:
            pointer;
    }

    /* MOBILE NAVIGATION CLOSED BY DEFAULT */
    .navbar {
        display:
            none;
        position:
            absolute;
        top:
            100%;
        left:
            0;
        width:
            100%;
        max-height:
            calc(100vh - 76px);
        overflow-y:
            auto;
        overflow-x:
            hidden;
        background:
            var(--white);
        border-top:
            1px solid var(--border);
        box-shadow:
            0 15px 30px rgba(23,35,47,.10);
        z-index:
            9998;
    }

    .navbar.active {
        display:
            block;
    }

    /* MAIN MOBILE MENU */
    .navbar > ul {
        width:
            100%;
        display:
            flex;
        flex-direction:
            column;
        align-items:
            stretch;
        gap:
            0;
    }

    .navbar > ul > li {
        width:
            100%;
        border-bottom:
            1px solid var(--border);
        overflow:
            visible !important;
    }

    .navbar > ul > li > a {
        width:
            100%;
        min-height:
            50px;
        display:
            flex;
        align-items:
            center;
        justify-content:
            space-between;
        padding:
            14px 20px;
        color:
            var(--dark);
        font-size:
            14px;
        font-weight:
            500;
    }

    .navbar > ul > li > a::after {
        display:
            none;
    }

    /* MOBILE DROPDOWN */
    .navbar .dropdown {
        position:
            relative;
    }

    .navbar .dropdown-menu {
        position:
            static;
        display:
            none;
        width:
            100%;
        min-width:
            0;
        max-width:
            100%;
        padding:
            4px 0 8px;
        margin:
            0;
        background:
            #f7f8fa;
        border:
            0;
        border-top:
            1px solid #eeeeee;
        border-radius:
            0;
        box-shadow:
            none;
        opacity:
            1;
        visibility:
            visible;
        transform:
            none;
    }

    .navbar .dropdown.active > .dropdown-menu {
        display:
            block;
    }

    .navbar .dropdown-menu li {
        width:
            100%;
    }

    .navbar .dropdown-menu li a {
        display:
            block;
        width:
            100%;
        padding:
            12px 38px;
        color:
            var(--dark);
        background:
            transparent;
        font-size:
            13px;
        line-height:
            1.5;
    }

    .navbar .dropdown-menu li a:hover {
        background:
            var(--orange-soft);
        color:
            var(--orange);
    }

    .navbar .dropdown > a i {
        transition:
            transform var(--transition);
    }

    .navbar .dropdown.active > a i {
        transform:
            rotate(180deg);
    }

    /* HERO */
    .hero {
        min-height:
            auto;
        padding:
            55px 0 52px;
    }

    .hero .hero-container {
        min-height:
            auto;
        gap:
            34px;
    }

    .hero-tag {
        font-size:
            11px;
        letter-spacing:
            1.6px;
        margin-bottom:
            16px;
    }

    .hero-tag::before {
        width:
            24px;
    }

    .hero h1 {
        font-size:
            38px;
        line-height:
            1.12;
        letter-spacing:
            -.6px;
        margin-bottom:
            18px;
    }

    .hero-description {
        font-size:
            15px;
        line-height:
            1.72;
        margin-bottom:
            24px;
    }

    .hero-buttons {
        flex-direction:
            column;
        width:
            100%;
        gap:
            10px;
    }

    .hero-buttons .btn {
        width:
            100%;
        max-width:
            330px;
    }

    .hero-image {
        width:
            100%;
        justify-content:
            center;
    }

    .hero-image img {
        width:
            100%;
        max-width:
            390px;
    }

    .hero-image::before {
        width:
            320px;
        height:
            320px;
    }

    /* SECTION HEADER */
    .section-header {
        margin-bottom:
            32px;
    }

    .section-tag {
        font-size:
            10px;
        letter-spacing:
            1.8px;
        margin-bottom:
            9px;
    }

    .section-tag::before {
        width:
            21px;
    }

    .section-header h2 {
        font-size:
            31px;
        line-height:
            1.18;
        margin-bottom:
            12px;
    }

    .section-header > p:last-child {
        font-size:
            14px;
        line-height:
            1.70;
    }

    /* ABOUT */
    .about-section {
        padding:
            54px 0;
    }

    .about-content {
        gap:
            28px;
    }

    .about-text > p {
        font-size:
            14.5px;
        line-height:
            1.72;
    }

    .about-points {
        gap:
            10px;
        margin-top:
            22px;
    }

    .point {
        min-height:
            0;
        padding:
            16px;
        flex-direction:
            row;
        align-items:
            center;
    }

    .point i {
        font-size:
            22px;
    }

    .point span {
        font-size:
            13.5px;
    }

    .about-card {
        padding:
            23px;
    }

    .stats-box h3 {
        font-size:
            19px;
    }

    .stat strong {
        min-width:
            58px;
        font-size:
            21px;
    }

    .stat span {
        font-size:
            12.5px;
    }

    /* SEARCH */
    .search-wrapper {
        width:
            92%;
        max-width:
            100%;
        margin:
            0 auto 42px;
    }

    .search-wrapper input {
        min-height:
            56px;
        font-size:
            14px;
        padding-right:
            15px;
    }

    .search-icon {
        margin-left:
            16px;
        font-size:
            16px;
    }

    /* PRODUCTS */
    .products-section {
        padding:
            55px 0;
    }

    .product-grid {
        width:
            100%;
        grid-template-columns:
            1fr;
        gap:
            12px;
    }

    .product-card {
        width:
            100%;
        min-width:
            0;
        min-height:
            0;
        padding:
            22px 19px;
    }

    .product-card h3 {
        font-size:
            18px;
    }

    .product-card p {
        font-size:
            13.5px;
    }

    /* TECHNICAL */
    .technical-section {
        padding:
            58px 0;
    }

    .standards-grid {
        grid-template-columns:
            1fr;
        gap:
            12px;
    }

    .standard-card {
        width:
            100%;
        min-width:
            0;
        padding:
            22px;
    }

    .standard-card h3 {
        font-size:
            23px;
    }

    /* MATERIAL */
    .material-section {
        padding:
            62px 0;
    }

    .material-grid {
        grid-template-columns:
            1fr;
        gap:
            12px;
    }

    .material-card {
        width:
            100%;
        min-width:
            0;
        min-height:
            0;
        padding:
            22px;
    }

    .material-card h3 {
        font-size:
            20px;
    }

    .material-card p {
        font-size:
            13.5px;
    }

    /* INDUSTRIES */
    .industries-section {
        padding:
            58px 0;
    }

    .industries-grid {
        grid-template-columns:
            1fr;
        gap:
            11px;
    }

    .industry-card {
        width:
            100%;
        min-width:
            0;
        min-height:
            0;
        padding:
            21px;
    }

    .industry-card > i {
        width:
            50px;
        height:
            50px;
        font-size:
            21px;
        margin-bottom:
            15px;
    }

    .industry-card h3 {
        font-size:
            18px;
    }

    /* WHY */
    .why-section {
        padding:
            60px 0;
    }

    .why-grid {
        grid-template-columns:
            1fr;
        gap:
            10px;
    }

    .why-card {
        width:
            100%;
        min-width:
            0;
        min-height:
            0;
        padding:
            22px 19px;
    }

    .why-card > i {
        font-size:
            28px;
        margin-bottom:
            15px;
    }

    .why-card h3 {
        font-size:
            18px;
    }

    /* CTA */
    .contact-cta {
        padding:
            58px 0;
    }

    .contact-cta h2 {
        font-size:
            32px;
        line-height:
            1.20;
    }

    .contact-cta p {
        font-size:
            15px;
        line-height:
            1.68;
    }

    .contact-cta .btn {
        width:
            100%;
        max-width:
            300px;
    }

    /* FOOTER */
    .footer {
        padding:
            54px 0 20px;
    }

    .footer-content {
        grid-template-columns:
            1fr;
        gap:
            30px;
    }

    .footer-about {
        grid-column:
            auto;
        max-width:
            100%;
    }

    .footer-logo {
        width:
            160px;
    }

    .footer-about > p {
        font-size:
            13px;
        overflow-wrap:
            anywhere;
    }

    .footer-links a {
        font-size:
            13px;
        margin-bottom:
            9px;
    }

    .copyright {
        margin-top:
            35px;
        padding-top:
            17px;
    }

    .copyright p {
        font-size:
            12px;
        line-height:
            1.6;
    }

    /* WHATSAPP */
    .whatsapp-float {
        width:
            55px;
        height:
            55px;
        right:
            17px;
        bottom:
            17px;
    }

    .whatsapp-float i {
        font-size:
            28px;
    }

}


/* SMALL MOBILE */
@media (max-width: 480px) {
    .logo-img {
        width:
            135px;
    }

    .menu-toggle {
        width:
            40px;
        height:
            40px;
    }

    .hero h1 {
        font-size:
            32px;
    }

    .hero-description {
        font-size:
            14px;
    }

    .section-header h2 {
        font-size:
            29px;
    }

    .section-header > p:last-child {
        font-size:
            13.5px;
    }

    .about-card {
        padding:
            21px;
    }

    .stat {
        gap:
            11px;
    }

    .stat strong {
        min-width:
            53px;
        font-size:
            19px;
    }

    .search-wrapper input {
        font-size:
            13px;
    }

    .product-card,
    .material-card,
    .industry-card,
    .why-card,
    .standard-card {
        padding:
            20px 17px;
    }

    .contact-cta h2 {
        font-size:
            28px;
    }

    .contact-cta p {
        font-size:
            14px;
    }

    .social-links a {
        width:
            40px;
        height:
            40px;
    }

    .whatsapp-float {
        width:
            52px;
        height:
            52px;
    }

    .whatsapp-float i {
        font-size:
            26px;
    }

}


/* TOUCH DEVICES */
@media (hover: none) {
    .product-card:hover,
    .material-card:hover,
    .industry-card:hover,
    .why-card:hover,
    .point:hover {
        transform:
            none;
    }

    .hero-image:hover img {
        animation-play-state:
            running;
        transform:
            none;
    }

}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;
        animation-iteration-count:
            1 !important;
        transition-duration:
            .01ms !important;
    }

}


/* FINAL MOBILE DROPDOWN FIX */
@media (max-width: 768px) {
    /* Mobile navigation */
    .navbar {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: calc(100vh - 76px);
        overflow-x: hidden !important;
        overflow-y: auto;
        background: #ffffff;
        border-top: 1px solid #e5e5e5;
        box-shadow: 0 15px 30px rgba(23, 35, 47, 0.12);
        z-index: 9998;
    }

    .navbar.active {
        display: block !important;
    }

    .navbar > ul {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        margin: 0;
        padding: 0;
        gap: 0;
    }

    .navbar > ul > li {
        width: 100% !important;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #eeeeee;
        overflow: visible !important;
    }

    /* Main buttons */
    .navbar > ul > li > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        min-height: 54px;
        padding: 14px 20px !important;
        box-sizing: border-box;
        color: #17232f;
        background: #ffffff;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.4;
        text-decoration: none;
        white-space: normal !important;
        overflow: visible !important;
    }

    .navbar > ul > li > a:hover,
    .navbar > ul > li > a.active {
        color: #ff6b00;
        background: #fff8f2;
    }

    /* ARROWS */
    /* ALWAYS DOWN when dropdown is closed */
    .navbar .dropdown > a i {
        display: inline-block !important;
        flex: 0 0 auto;
        margin-left: 12px;
        font-size: 11px;
        color: #17232f;
        transform: rotate(0deg) !important;
        transition: none !important;
        animation: none !important;
    }

    /* UP only when dropdown is open */
    .navbar .dropdown.active > a i {
        transform: rotate(180deg) !important;
        transition: none !important;
        animation: none !important;
    }

    /* DROPDOWN CONTAINER */
    .navbar .dropdown {
        width: 100% !important;
        position: relative;
        overflow: visible !important;
    }

    .navbar .dropdown-menu {
        display: none !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 4px 0 8px !important;
        background: #f7f8fa !important;
        border: 0 !important;
        border-top: 1px solid #eeeeee !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .navbar .dropdown.active > .dropdown-menu {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    /* DROPDOWN ITEMS */
    .navbar .dropdown-menu li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        animation: none !important;
        transition: none !important;
    }

    .navbar .dropdown-menu li a {
        display: block !important;
        width: 100% !important;
        min-height: 48px;
        padding: 13px 20px 13px 34px !important;
        box-sizing: border-box;
        color: #333333;
        background: transparent;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        text-align: left;
        text-decoration: none;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        text-overflow: clip !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .navbar .dropdown-menu li a:hover {
        color: #ff6b00;
        background: #fff3e8;
    }

    /* HAMBURGER */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        min-width: 42px;
        padding: 0;
        margin-left: auto;
        background: #ffffff;
        color: #17232f;
        border: 1px solid #dcdfe2;
        border-radius: 5px;
        font-size: 19px;
        cursor: pointer;
    }

    .menu-toggle:hover {
        color: #ff6b00;
        border-color: #ff6b00;
    }

}


/* ACCESSIBILITY UTILITY */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ACCESSIBILITY CONTRAST — LIGHT SURFACES ONLY Preserve the original bright orange accent on dark sections. */
.header .navbar > ul > li > a.active,
.about-section .section-tag,
.products-section .section-tag,
.technical-section .section-tag,
.industries-section .section-tag { color:#b04200; }

.material-section .section-tag,
.why-section .section-tag { color:var(--orange); }


/* CATEGORY MATERIAL */

/* CATEGORY MATERIAL PAGE category-material.css SHARED MASTER CSS FOR: 01. Stainless Steel 02. Duplex Stainless Steel 03. Nickel Alloys 04. Special Alloys 05. Filler Materials 06. Inner Ring Materials 07. Outer Ring Materials 08. Nickel & Special Alloys IMPORTANT: Header / Footer / CTA / WhatsApp remain in homepage.css */

/* VARIABLES */
:root:where([data-page-style~="category-material"]) {
    --steel-dark: #17232f;
    --steel-deep: #111a21;
    --steel-secondary: #232323;
    --steel-orange: #ff6b00;
    --steel-orange-hover: #e85f00;
    --steel-orange-soft: #fff3e8;
    --steel-warm: #fff8f2;
    --steel-light: #f7f8fa;
    --steel-soft: #f3f4f5;
    --steel-white: #ffffff;
    --steel-text: #222222;
    --steel-muted: #666666;
    --steel-border: #e5e5e5;
    --steel-transition: 0.3s ease;
}


/* STANDARD CATEGORY HERO Used by: Stainless Duplex Nickel Special Filler Inner Ring Outer Ring */
:where(html[data-page-style~="category-material"]) .steel-hero {
    position: relative;
    padding: 74px 0 80px;
    background:
        radial-gradient(
            circle at 82% 45%,
            rgba(255, 107, 0, 0.11),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #17232f 0%,
            #111a21 100%
        );
    overflow: hidden;
}

:where(html[data-page-style~="category-material"]) .steel-hero::before {
    content: "";
    position: absolute;
    width: 610px;
    height: 610px;
    top: -380px;
    right: -215px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    pointer-events: none;
}

:where(html[data-page-style~="category-material"]) .steel-hero::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    left: -220px;
    bottom: -255px;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.028);
    pointer-events: none;
}

:where(html[data-page-style~="category-material"]) .steel-hero .container {
    position: relative;
    z-index: 2;
}


/* STANDARD HERO GRID */
:where(html[data-page-style~="category-material"]) .steel-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(320px, 0.88fr);
    align-items: center;
    gap: 70px;
}


/* STANDARD HERO CONTENT */
:where(html[data-page-style~="category-material"]) .steel-hero-content {
    min-width: 0;
    max-width: 790px;
}


/* BREADCRUMB */
:where(html[data-page-style~="category-material"]) .steel-hero .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 21px;
    color: rgba(255, 255, 255, 0.77);
    font-size: 15.5px;
    line-height: 1.5;
}

:where(html[data-page-style~="category-material"]) .steel-hero .breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.84;
    transition:
        color var(--steel-transition),
        opacity var(--steel-transition);
}

:where(html[data-page-style~="category-material"]) .steel-hero .breadcrumb a:hover {
    color: var(--steel-orange);
    opacity: 1;
}

:where(html[data-page-style~="category-material"]) .steel-hero .breadcrumb span {
    color: rgba(255, 255, 255, 0.40);
}

:where(html[data-page-style~="category-material"]) .steel-hero .breadcrumb strong {
    color: var(--steel-orange);
    font-weight: 600;
}


/* HERO SUBTITLE */
:where(html[data-page-style~="category-material"]) .hero-subtitle {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--steel-orange);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.7px;
}


/* HERO TITLE */
:where(html[data-page-style~="category-material"]) .steel-hero-content h1 {
    max-width: 790px;
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(44px, 5vw, 61px);
    font-weight: 700;
    line-height: 1.10;
    letter-spacing: -1.2px;
}


/* HERO DESCRIPTION */
:where(html[data-page-style~="category-material"]) .steel-hero-content > p {
    max-width: 720px;
    margin: 0 0 26px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.8;
}


/* HERO LINK */
:where(html[data-page-style~="category-material"]) .hero-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: color var(--steel-transition);
}

:where(html[data-page-style~="category-material"]) .hero-link span {
    color: var(--steel-orange);
    transition: transform var(--steel-transition);
}

:where(html[data-page-style~="category-material"]) .hero-link:hover {
    color: var(--steel-orange);
}

:where(html[data-page-style~="category-material"]) .hero-link:hover span {
    transform: translateX(4px);
}


/* STANDARD HERO VISUAL */
:where(html[data-page-style~="category-material"]) .steel-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 330px;
}


/* STANDARD ORBITS */
:where(html[data-page-style~="category-material"]) .steel-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

:where(html[data-page-style~="category-material"]) .orbit-one {
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

:where(html[data-page-style~="category-material"]) .orbit-two {
    width: 225px;
    height: 225px;
    border: 1px dashed rgba(255, 107, 0, 0.20);
}


/* STANDARD STEEL CORE */
:where(html[data-page-style~="category-material"]) .steel-core {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 205px;
    height: 205px;
}

:where(html[data-page-style~="category-material"]) .steel-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

:where(html[data-page-style~="category-material"]) .ring-outer {
    width: 190px;
    height: 190px;
    border: 14px solid rgba(255, 255, 255, 0.055);
}

:where(html[data-page-style~="category-material"]) .ring-middle {
    width: 142px;
    height: 142px;
    border: 10px solid rgba(255, 107, 0, 0.74);
}

:where(html[data-page-style~="category-material"]) .ring-inner {
    width: 94px;
    height: 94px;
    border: 8px solid rgba(255, 255, 255, 0.08);
}

:where(html[data-page-style~="category-material"]) .steel-center {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background: var(--steel-deep);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}


/* STANDARD HERO TAGS */
:where(html[data-page-style~="category-material"]) .steel-tag {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    background: var(--steel-dark);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.82);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

:where(html[data-page-style~="category-material"]) .tag-one {
    top: 27px;
    left: 73px;
}

:where(html[data-page-style~="category-material"]) .tag-two {
    top: 70px;
    right: 32px;
}

:where(html[data-page-style~="category-material"]) .tag-three {
    left: 30px;
    bottom: 60px;
}

:where(html[data-page-style~="category-material"]) .tag-four {
    right: 79px;
    bottom: 18px;
}


/* NICKEL & SPECIAL ALLOYS COMPATIBILITY HERO This supports the CURRENT Nickel & Special Alloys HTML that uses: .alloy-category-hero .alloy-category-hero-grid .alloy-category-content .alloy-family-visual This does NOT affect the other category pages. */
:where(html[data-page-style~="category-material"]) .alloy-category-hero {
    position: relative;
    padding: 74px 0 80px;
    background:
        radial-gradient(
            circle at 82% 45%,
            rgba(255, 107, 0, 0.11),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #17232f 0%,
            #111a21 100%
        );
    overflow: hidden;
}

:where(html[data-page-style~="category-material"]) .alloy-category-hero::before {
    content: "";
    position: absolute;
    width: 610px;
    height: 610px;
    top: -380px;
    right: -215px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    pointer-events: none;
}

:where(html[data-page-style~="category-material"]) .alloy-category-hero::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    left: -220px;
    bottom: -255px;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.028);
    pointer-events: none;
}

:where(html[data-page-style~="category-material"]) .alloy-category-hero .container {
    position: relative;
    z-index: 2;
}


/* SPECIAL ALLOY HERO GRID */
:where(html[data-page-style~="category-material"]) .alloy-category-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(340px, 0.88fr);
    align-items: center;
    gap: 70px;
}


/* SPECIAL ALLOY HERO CONTENT */
:where(html[data-page-style~="category-material"]) .alloy-category-content {
    min-width: 0;
    max-width: 790px;
}


/* SPECIAL ALLOY BREADCRUMB */
:where(html[data-page-style~="category-material"]) .alloy-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 21px;
    color: rgba(255, 255, 255, 0.77);
    font-size: 15.5px;
    line-height: 1.5;
}

:where(html[data-page-style~="category-material"]) .alloy-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.84;
    transition:
        color var(--steel-transition),
        opacity var(--steel-transition);
}

:where(html[data-page-style~="category-material"]) .alloy-breadcrumb a:hover {
    color: var(--steel-orange);
    opacity: 1;
}

:where(html[data-page-style~="category-material"]) .alloy-breadcrumb span {
    color: rgba(255, 255, 255, 0.40);
}

:where(html[data-page-style~="category-material"]) .alloy-breadcrumb strong {
    color: var(--steel-orange);
    font-weight: 600;
}


/* SPECIAL ALLOY HERO TEXT */
:where(html[data-page-style~="category-material"]) .alloy-hero-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--steel-orange);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.7px;
}

:where(html[data-page-style~="category-material"]) .alloy-category-content h1 {
    max-width: 790px;
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(44px, 5vw, 61px);
    font-weight: 700;
    line-height: 1.10;
    letter-spacing: -1.2px;
}

:where(html[data-page-style~="category-material"]) .alloy-category-content > p {
    max-width: 720px;
    margin: 0 0 26px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.8;
}

:where(html[data-page-style~="category-material"]) .alloy-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: color var(--steel-transition);
}

:where(html[data-page-style~="category-material"]) .alloy-hero-link span {
    color: var(--steel-orange);
    transition: transform var(--steel-transition);
}

:where(html[data-page-style~="category-material"]) .alloy-hero-link:hover {
    color: var(--steel-orange);
}

:where(html[data-page-style~="category-material"]) .alloy-hero-link:hover span {
    transform: translateX(4px);
}


/* SPECIAL ALLOY HERO VISUAL */
:where(html[data-page-style~="category-material"]) .alloy-family-visual,
:where(html[data-page-style~="category-material"]) .alloy-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 360px;
}


/* ALLOY GLOW */
:where(html[data-page-style~="category-material"]) .alloy-family-glow,
:where(html[data-page-style~="category-material"]) .alloy-hero-visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 107, 0, 0.11) 0%,
            rgba(255, 107, 0, 0.035) 42%,
            transparent 70%
        );
    transform: translate(-50%, -50%);
    pointer-events: none;
}


/* ALLOY ORBITS */
:where(html[data-page-style~="category-material"]) .alloy-family-orbit,
:where(html[data-page-style~="category-material"]) .alloy-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

:where(html[data-page-style~="category-material"]) .orbit-a,
:where(html[data-page-style~="category-material"]) .alloy-orbit-outer {
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

:where(html[data-page-style~="category-material"]) .orbit-b,
:where(html[data-page-style~="category-material"]) .alloy-orbit-middle {
    width: 238px;
    height: 238px;
    border: 1px dashed rgba(255, 107, 0, 0.23);
}

:where(html[data-page-style~="category-material"]) .orbit-c,
:where(html[data-page-style~="category-material"]) .alloy-orbit-inner {
    width: 158px;
    height: 158px;
    border: 1px solid rgba(255, 255, 255, 0.11);
}


/* ALLOY CENTER CORE */
:where(html[data-page-style~="category-material"]) .alloy-family-core,
:where(html[data-page-style~="category-material"]) .alloy-core {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background:
        radial-gradient(
            circle at 36% 28%,
            #2b3944 0%,
            #17232f 43%,
            #111a21 100%
        );
    border: 6px solid var(--steel-orange);
    border-radius: 50%;
    box-shadow:
        0 0 0 11px rgba(255, 107, 0, 0.075),
        0 0 0 23px rgba(255, 255, 255, 0.025),
        0 20px 48px rgba(0, 0, 0, 0.28);
}

:where(html[data-page-style~="category-material"]) .core-ni,
:where(html[data-page-style~="category-material"]) .core-symbol,
:where(html[data-page-style~="category-material"]) .alloy-core-symbol {
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

:where(html[data-page-style~="category-material"]) .core-plus,
:where(html[data-page-style~="category-material"]) .alloy-core-plus {
    position: absolute;
    top: 21px;
    right: 24px;
    color: var(--steel-orange);
    font-size: 15px;
    font-weight: 700;
}

:where(html[data-page-style~="category-material"]) .alloy-family-core small,
:where(html[data-page-style~="category-material"]) .alloy-core small {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.50);
    font-size: 6.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.9px;
}


/* ALLOY NODES */
:where(html[data-page-style~="category-material"]) .alloy-node,
:where(html[data-page-style~="category-material"]) .alloy-element {
    position: absolute;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--steel-dark);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.86);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20);
}


/* ALLOY NODE POSITIONS */
:where(html[data-page-style~="category-material"]) .node-cr,
:where(html[data-page-style~="category-material"]) .alloy-element-1 {
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
}

:where(html[data-page-style~="category-material"]) .node-mo,
:where(html[data-page-style~="category-material"]) .alloy-element-2 {
    right: 31px;
    top: 73px;
}

:where(html[data-page-style~="category-material"]) .node-cu,
:where(html[data-page-style~="category-material"]) .alloy-element-3 {
    right: 7px;
    top: 178px;
}

:where(html[data-page-style~="category-material"]) .node-fe,
:where(html[data-page-style~="category-material"]) .alloy-element-4 {
    right: 75px;
    bottom: 25px;
}

:where(html[data-page-style~="category-material"]) .node-ti,
:where(html[data-page-style~="category-material"]) .alloy-element-5 {
    left: 75px;
    bottom: 25px;
}

:where(html[data-page-style~="category-material"]) .node-zr,
:where(html[data-page-style~="category-material"]) .alloy-element-6 {
    left: 7px;
    top: 178px;
}

:where(html[data-page-style~="category-material"]) .node-ta,
:where(html[data-page-style~="category-material"]) .alloy-element-7 {
    left: 31px;
    top: 73px;
}


/* ALLOY CAPTIONS */
:where(html[data-page-style~="category-material"]) .alloy-family-caption,
:where(html[data-page-style~="category-material"]) .alloy-caption,
:where(html[data-page-style~="category-material"]) .alloy-visual-label {
    position: absolute;
    z-index: 2;
    color: rgba(255, 255, 255, 0.28);
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.4px;
}

:where(html[data-page-style~="category-material"]) .caption-one,
:where(html[data-page-style~="category-material"]) .alloy-caption-top,
:where(html[data-page-style~="category-material"]) .alloy-label-top {
    top: 2px;
    right: 4px;
}

:where(html[data-page-style~="category-material"]) .caption-two,
:where(html[data-page-style~="category-material"]) .alloy-caption-bottom,
:where(html[data-page-style~="category-material"]) .alloy-label-bottom {
    left: 4px;
    bottom: 2px;
}


/* MATERIAL / GRADES SECTION */
:where(html[data-page-style~="category-material"]) .steel-grades {
    position: relative;
    padding: 76px 0 82px;
    background: var(--steel-light);
}

:where(html[data-page-style~="category-material"]) .steel-grades .container {
    position: relative;
    z-index: 2;
}


/* SECTION HEADING */
:where(html[data-page-style~="category-material"]) .section-heading {
    max-width: 850px;
    margin-bottom: 37px;
}

:where(html[data-page-style~="category-material"]) .section-heading > span {
    display: block;
    margin-bottom: 9px;
    color: var(--steel-orange);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.65px;
}

:where(html[data-page-style~="category-material"]) .section-heading h2 {
    margin: 0 0 11px;
    color: var(--steel-text);
    font-size: clamp(31px, 4vw, 43px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.8px;
}

:where(html[data-page-style~="category-material"]) .section-heading p {
    max-width: 760px;
    margin: 0;
    color: var(--steel-muted);
    font-size: 13.5px;
    line-height: 1.72;
}


/* COMPATIBILITY SECTION HEADINGS Some existing category pages use slightly different heading class names. Keep these aliases. */
:where(html[data-page-style~="category-material"]) .steel-grades .grades-heading,
:where(html[data-page-style~="category-material"]) .steel-grades .steel-heading {
    max-width: 850px;
    margin-bottom: 37px;
}

:where(html[data-page-style~="category-material"]) .steel-grades .grades-heading > span,
:where(html[data-page-style~="category-material"]) .steel-grades .steel-heading > span {
    display: block;
    margin-bottom: 9px;
    color: var(--steel-orange);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.65px;
}

:where(html[data-page-style~="category-material"]) .steel-grades .grades-heading h2,
:where(html[data-page-style~="category-material"]) .steel-grades .steel-heading h2 {
    margin: 0 0 11px;
    color: var(--steel-text);
    font-size: clamp(31px, 4vw, 43px);
    font-weight: 700;
    line-height: 1.18;
}

:where(html[data-page-style~="category-material"]) .steel-grades .grades-heading p,
:where(html[data-page-style~="category-material"]) .steel-grades .steel-heading p {
    max-width: 760px;
    margin: 0;
    color: var(--steel-muted);
    font-size: 13.5px;
    line-height: 1.72;
}


/* OPTIONAL GRADE FAMILY / GROUP HEADING Used on Nickel & Special Alloys. Safe for any other category page. */
:where(html[data-page-style~="category-material"]) .grade-family-heading,
:where(html[data-page-style~="category-material"]) .grade-section-heading {
    display: grid;
    grid-template-columns:
        44px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    margin: 46px 0 18px;
}

:where(html[data-page-style~="category-material"]) .section-heading + .grade-family-heading,
:where(html[data-page-style~="category-material"]) .section-heading + .grade-section-heading {
    margin-top: 0;
}

:where(html[data-page-style~="category-material"]) .grade-family-number,
:where(html[data-page-style~="category-material"]) .grade-family-heading > span,
:where(html[data-page-style~="category-material"]) .grade-section-heading > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--steel-orange-soft);
    border: 1px solid rgba(255, 107, 0, 0.15);
    border-radius: 8px;
    color: var(--steel-orange);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

:where(html[data-page-style~="category-material"]) .grade-family-heading h3,
:where(html[data-page-style~="category-material"]) .grade-section-heading h3 {
    margin: 0 0 4px;
    color: var(--steel-dark);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

:where(html[data-page-style~="category-material"]) .grade-family-heading p,
:where(html[data-page-style~="category-material"]) .grade-section-heading p {
    max-width: 820px;
    margin: 0;
    color: #71767a;
    font-size: 11.5px;
    line-height: 1.65;
}


/* GRADE GRID */
:where(html[data-page-style~="category-material"]) .grade-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 20px;
}


/* GRADE CARD */
:where(html[data-page-style~="category-material"]) .grade-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 305px;
    padding: 26px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 7px 24px rgba(20, 30, 40, 0.035);
    transition:
        transform var(--steel-transition),
        border-color var(--steel-transition),
        box-shadow var(--steel-transition);
}

:where(html[data-page-style~="category-material"]) .grade-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 107, 0, 0.22);
    box-shadow:
        0 15px 34px rgba(20, 30, 40, 0.075);
}

:where(html[data-page-style~="category-material"]) .grade-featured {
    background:
        linear-gradient(
            145deg,
            #fffaf6 0%,
            #ffffff 65%
        );
}


/* GRADE WATERMARK */
:where(html[data-page-style~="category-material"]) .grade-watermark {
    position: absolute;
    right: 14px;
    bottom: -10px;
    color: #17232f;
    font-size: 88px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -4px;
    opacity: 0.075;
    pointer-events: none;
    user-select: none;
    transition:
        opacity var(--steel-transition),
        transform var(--steel-transition);
}

:where(html[data-page-style~="category-material"]) .grade-card:hover .grade-watermark {
    opacity: 0.11;
    transform: translateY(-3px);
}


/* GRADE TOP */
:where(html[data-page-style~="category-material"]) .grade-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

:where(html[data-page-style~="category-material"]) .grade-heading {
    min-width: 0;
}

:where(html[data-page-style~="category-material"]) .grade-series {
    display: block;
    margin-bottom: 6px;
    color: var(--steel-orange);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 1.05px;
}

:where(html[data-page-style~="category-material"]) .grade-heading h3 {
    margin: 0;
    color: var(--steel-dark);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.25px;
}


/* GRADE CODE */
:where(html[data-page-style~="category-material"]) .grade-code {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 54px;
    height: 42px;
    padding: 0 12px;
    background: var(--steel-orange-soft);
    border: 1px solid rgba(255, 107, 0, 0.14);
    border-radius: 9px;
    color: var(--steel-orange);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2px;
    transition:
        background var(--steel-transition),
        color var(--steel-transition),
        border-color var(--steel-transition);
}

:where(html[data-page-style~="category-material"]) .grade-card:hover .grade-code {
    background: var(--steel-orange);
    border-color: var(--steel-orange);
    color: #ffffff;
}


/* GRADE DESCRIPTION */
:where(html[data-page-style~="category-material"]) .grade-card > p {
    position: relative;
    z-index: 2;
    max-width: 93%;
    margin: 0 0 19px;
    color: #686d71;
    font-size: 12.5px;
    line-height: 1.72;
}


/* GRADE META */
:where(html[data-page-style~="category-material"]) .grade-meta {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 21px;
}

:where(html[data-page-style~="category-material"]) .grade-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 9px;
    background: #f6f7f8;
    border: 1px solid #eceeef;
    border-radius: 5px;
    color: #777b7f;
    font-size: 9.5px;
    font-weight: 500;
    line-height: 1.3;
}


/* GRADE LINK */
:where(html[data-page-style~="category-material"]) .grade-link {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: auto;
    color: var(--steel-orange);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: color var(--steel-transition);
}

:where(html[data-page-style~="category-material"]) .grade-link span {
    transition: transform var(--steel-transition);
}

:where(html[data-page-style~="category-material"]) .grade-link:hover {
    color: var(--steel-orange-hover);
}

:where(html[data-page-style~="category-material"]) .grade-link:hover span {
    transform: translateX(4px);
}


/* SELECTION SECTION */
:where(html[data-page-style~="category-material"]) .steel-selection {
    position: relative;
    padding: 76px 0 82px;
    background: var(--steel-deep);
    overflow: hidden;
}

:where(html[data-page-style~="category-material"]) .steel-selection::before {
    content: "";
    position: absolute;
    width: 470px;
    height: 470px;
    top: -310px;
    right: -250px;
    border: 1px solid rgba(255, 255, 255, 0.035);
    border-radius: 50%;
    pointer-events: none;
}

:where(html[data-page-style~="category-material"]) .steel-selection::after {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    left: -190px;
    bottom: -220px;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.025);
    pointer-events: none;
}

:where(html[data-page-style~="category-material"]) .steel-selection .container {
    position: relative;
    z-index: 2;
}


/* CRITICAL DARK SECTION HEADING FIX This works even if the HTML does NOT contain "section-heading-light". This fixes the Duplex screenshot. */
:where(html[data-page-style~="category-material"]) .steel-selection .section-heading > span,
:where(html[data-page-style~="category-material"]) .steel-selection .grades-heading > span,
:where(html[data-page-style~="category-material"]) .steel-selection .steel-heading > span {
    color: var(--steel-orange);
}

:where(html[data-page-style~="category-material"]) .steel-selection .section-heading h2,
:where(html[data-page-style~="category-material"]) .steel-selection .grades-heading h2,
:where(html[data-page-style~="category-material"]) .steel-selection .steel-heading h2 {
    color: #ffffff;
}

:where(html[data-page-style~="category-material"]) .steel-selection .section-heading p,
:where(html[data-page-style~="category-material"]) .steel-selection .grades-heading p,
:where(html[data-page-style~="category-material"]) .steel-selection .steel-heading p {
    color: rgba(255, 255, 255, 0.58);
}


/* Keep compatibility with pages already using this class */
:where(html[data-page-style~="category-material"]) .section-heading-light h2 {
    color: #ffffff;
}

:where(html[data-page-style~="category-material"]) .section-heading-light p {
    color: rgba(255, 255, 255, 0.58);
}


/* SELECTION GRID */
:where(html[data-page-style~="category-material"]) .selection-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 16px;
}


/* SELECTION CARD */
:where(html[data-page-style~="category-material"]) .selection-card {
    position: relative;
    min-width: 0;
    min-height: 205px;
    padding: 23px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 9px;
    transition:
        transform var(--steel-transition),
        border-color var(--steel-transition),
        background var(--steel-transition);
}

:where(html[data-page-style~="category-material"]) .selection-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 107, 0, 0.25);
}


/* SELECTION NUMBER / ICON */
:where(html[data-page-style~="category-material"]) .selection-card > span {
    display: block;
    margin-bottom: 18px;
    color: var(--steel-orange);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.2px;
}

:where(html[data-page-style~="category-material"]) .selection-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 17px;
    color: var(--steel-orange);
    font-size: 15px;
}


/* SELECTION CONTENT */
:where(html[data-page-style~="category-material"]) .selection-card h3 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

:where(html[data-page-style~="category-material"]) .selection-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.53);
    font-size: 11.5px;
    line-height: 1.7;
}


/* OPTIONAL CATEGORY INFORMATION BLOCKS Compatibility for simple supporting content used by Inner / Outer / Filler category pages. */
:where(html[data-page-style~="category-material"]) .steel-content {
    position: relative;
    padding: 76px 0;
    background: #ffffff;
}

:where(html[data-page-style~="category-material"]) .steel-content-soft {
    background: var(--steel-light);
}

:where(html[data-page-style~="category-material"]) .steel-content-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 30px;
}

:where(html[data-page-style~="category-material"]) .steel-content h2 {
    margin: 0 0 14px;
    color: var(--steel-dark);
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
}

:where(html[data-page-style~="category-material"]) .steel-content p {
    margin: 0;
    color: var(--steel-muted);
    font-size: 13.5px;
    line-height: 1.75;
}


/* TABLET */
@media (max-width: 1024px) {
    /* STANDARD HERO */
    :where(html[data-page-style~="category-material"]) .steel-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(285px, 0.72fr);
        gap: 42px;
    }

    :where(html[data-page-style~="category-material"]) .steel-hero-visual {
        min-height: 300px;
    }

    :where(html[data-page-style~="category-material"]) .orbit-one {
        width: 270px;
        height: 270px;
    }

    :where(html[data-page-style~="category-material"]) .orbit-two {
        width: 205px;
        height: 205px;
    }

    /* SPECIAL ALLOY HERO */
    :where(html[data-page-style~="category-material"]) .alloy-category-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.75fr);
        gap: 42px;
    }

    :where(html[data-page-style~="category-material"]) .alloy-family-visual,
:where(html[data-page-style~="category-material"]) .alloy-hero-visual {
        min-height: 325px;
    }

    :where(html[data-page-style~="category-material"]) .orbit-a,
:where(html[data-page-style~="category-material"]) .alloy-orbit-outer {
        width: 285px;
        height: 285px;
    }

    :where(html[data-page-style~="category-material"]) .orbit-b,
:where(html[data-page-style~="category-material"]) .alloy-orbit-middle {
        width: 215px;
        height: 215px;
    }

    :where(html[data-page-style~="category-material"]) .orbit-c,
:where(html[data-page-style~="category-material"]) .alloy-orbit-inner {
        width: 145px;
        height: 145px;
    }

    :where(html[data-page-style~="category-material"]) .node-cu,
:where(html[data-page-style~="category-material"]) .alloy-element-3 {
        right: 2px;
    }

    :where(html[data-page-style~="category-material"]) .node-zr,
:where(html[data-page-style~="category-material"]) .alloy-element-6 {
        left: 2px;
    }

    /* SELECTION */
    :where(html[data-page-style~="category-material"]) .selection-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */
@media (max-width: 768px) {
    /* STANDARD HERO */
    :where(html[data-page-style~="category-material"]) .steel-hero {
        padding: 53px 0 58px;
    }

    :where(html[data-page-style~="category-material"]) .steel-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    :where(html[data-page-style~="category-material"]) .steel-hero .breadcrumb {
        margin-bottom: 17px;
        font-size: 15.5px;
    }

    :where(html[data-page-style~="category-material"]) .hero-subtitle {
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    :where(html[data-page-style~="category-material"]) .steel-hero-content h1 {
        font-size: 37px;
        line-height: 1.14;
        letter-spacing: -0.7px;
    }

    :where(html[data-page-style~="category-material"]) .steel-hero-content > p {
        font-size: 13.5px;
        line-height: 1.75;
    }

    /* STANDARD HERO VISUAL */
    :where(html[data-page-style~="category-material"]) .steel-hero-visual {
        min-height: 235px;
        max-width: 360px;
        margin: 0 auto;
    }

    :where(html[data-page-style~="category-material"]) .orbit-one {
        width: 220px;
        height: 220px;
    }

    :where(html[data-page-style~="category-material"]) .orbit-two {
        width: 168px;
        height: 168px;
    }

    :where(html[data-page-style~="category-material"]) .steel-core {
        width: 160px;
        height: 160px;
    }

    :where(html[data-page-style~="category-material"]) .ring-outer {
        width: 148px;
        height: 148px;
        border-width: 11px;
    }

    :where(html[data-page-style~="category-material"]) .ring-middle {
        width: 111px;
        height: 111px;
        border-width: 8px;
    }

    :where(html[data-page-style~="category-material"]) .ring-inner {
        width: 75px;
        height: 75px;
        border-width: 6px;
    }

    :where(html[data-page-style~="category-material"]) .steel-center {
        width: 50px;
        height: 50px;
        font-size: 11px;
    }

    :where(html[data-page-style~="category-material"]) .steel-tag {
        min-width: 34px;
        height: 34px;
        font-size: 9px;
    }

    :where(html[data-page-style~="category-material"]) .tag-one {
        top: 14px;
        left: 70px;
    }

    :where(html[data-page-style~="category-material"]) .tag-two {
        top: 49px;
        right: 30px;
    }

    :where(html[data-page-style~="category-material"]) .tag-three {
        left: 27px;
        bottom: 49px;
    }

    :where(html[data-page-style~="category-material"]) .tag-four {
        right: 69px;
        bottom: 12px;
    }

    /* SPECIAL ALLOY HERO */
    :where(html[data-page-style~="category-material"]) .alloy-category-hero {
        padding: 53px 0 58px;
    }

    :where(html[data-page-style~="category-material"]) .alloy-category-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    :where(html[data-page-style~="category-material"]) .alloy-breadcrumb {
        margin-bottom: 17px;
        font-size: 15.5px;
    }

    :where(html[data-page-style~="category-material"]) .alloy-hero-eyebrow {
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    :where(html[data-page-style~="category-material"]) .alloy-category-content h1 {
        font-size: 37px;
        line-height: 1.14;
        letter-spacing: -0.7px;
    }

    :where(html[data-page-style~="category-material"]) .alloy-category-content > p {
        font-size: 13.5px;
        line-height: 1.75;
    }

    :where(html[data-page-style~="category-material"]) .alloy-family-visual,
:where(html[data-page-style~="category-material"]) .alloy-hero-visual {
        min-height: 305px;
        max-width: 350px;
        margin: 0 auto;
    }

    :where(html[data-page-style~="category-material"]) .orbit-a,
:where(html[data-page-style~="category-material"]) .alloy-orbit-outer {
        width: 265px;
        height: 265px;
    }

    :where(html[data-page-style~="category-material"]) .orbit-b,
:where(html[data-page-style~="category-material"]) .alloy-orbit-middle {
        width: 200px;
        height: 200px;
    }

    :where(html[data-page-style~="category-material"]) .orbit-c,
:where(html[data-page-style~="category-material"]) .alloy-orbit-inner {
        width: 137px;
        height: 137px;
    }

    :where(html[data-page-style~="category-material"]) .alloy-family-core,
:where(html[data-page-style~="category-material"]) .alloy-core {
        width: 104px;
        height: 104px;
        border-width: 5px;
    }

    :where(html[data-page-style~="category-material"]) .core-ni,
:where(html[data-page-style~="category-material"]) .core-symbol,
:where(html[data-page-style~="category-material"]) .alloy-core-symbol {
        font-size: 29px;
    }

    :where(html[data-page-style~="category-material"]) .core-plus,
:where(html[data-page-style~="category-material"]) .alloy-core-plus {
        top: 18px;
        right: 21px;
    }

    :where(html[data-page-style~="category-material"]) .alloy-node,
:where(html[data-page-style~="category-material"]) .alloy-element {
        width: 37px;
        height: 37px;
        font-size: 9.5px;
    }

    :where(html[data-page-style~="category-material"]) .node-cr,
:where(html[data-page-style~="category-material"]) .alloy-element-1 {
        top: 14px;
    }

    :where(html[data-page-style~="category-material"]) .node-mo,
:where(html[data-page-style~="category-material"]) .alloy-element-2 {
        top: 54px;
        right: 30px;
    }

    :where(html[data-page-style~="category-material"]) .node-cu,
:where(html[data-page-style~="category-material"]) .alloy-element-3 {
        top: 145px;
        right: 3px;
    }

    :where(html[data-page-style~="category-material"]) .node-fe,
:where(html[data-page-style~="category-material"]) .alloy-element-4 {
        right: 61px;
        bottom: 17px;
    }

    :where(html[data-page-style~="category-material"]) .node-ti,
:where(html[data-page-style~="category-material"]) .alloy-element-5 {
        left: 61px;
        bottom: 17px;
    }

    :where(html[data-page-style~="category-material"]) .node-zr,
:where(html[data-page-style~="category-material"]) .alloy-element-6 {
        top: 145px;
        left: 3px;
    }

    :where(html[data-page-style~="category-material"]) .node-ta,
:where(html[data-page-style~="category-material"]) .alloy-element-7 {
        top: 54px;
        left: 30px;
    }

    :where(html[data-page-style~="category-material"]) .alloy-family-caption,
:where(html[data-page-style~="category-material"]) .alloy-caption,
:where(html[data-page-style~="category-material"]) .alloy-visual-label {
        display: none;
    }

    /* GRADES */
    :where(html[data-page-style~="category-material"]) .steel-grades {
        padding: 58px 0 62px;
    }

    :where(html[data-page-style~="category-material"]) .section-heading,
:where(html[data-page-style~="category-material"]) .steel-grades .grades-heading,
:where(html[data-page-style~="category-material"]) .steel-grades .steel-heading {
        margin-bottom: 29px;
    }

    :where(html[data-page-style~="category-material"]) .section-heading h2,
:where(html[data-page-style~="category-material"]) .steel-grades .grades-heading h2,
:where(html[data-page-style~="category-material"]) .steel-grades .steel-heading h2 {
        font-size: 30px;
    }

    :where(html[data-page-style~="category-material"]) .section-heading p,
:where(html[data-page-style~="category-material"]) .steel-grades .grades-heading p,
:where(html[data-page-style~="category-material"]) .steel-grades .steel-heading p {
        font-size: 13px;
    }

    /* GROUP HEADINGS */
    :where(html[data-page-style~="category-material"]) .grade-family-heading,
:where(html[data-page-style~="category-material"]) .grade-section-heading {
        margin: 39px 0 16px;
    }

    /* GRADE GRID */
    :where(html[data-page-style~="category-material"]) .grade-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    :where(html[data-page-style~="category-material"]) .grade-card {
        min-height: 280px;
        padding: 23px;
    }

    :where(html[data-page-style~="category-material"]) .grade-watermark {
        font-size: 75px;
    }

    :where(html[data-page-style~="category-material"]) .grade-heading h3 {
        font-size: 19px;
    }

    /* SELECTION */
    :where(html[data-page-style~="category-material"]) .steel-selection {
        padding: 58px 0 62px;
    }

    :where(html[data-page-style~="category-material"]) .selection-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    :where(html[data-page-style~="category-material"]) .selection-card {
        min-height: 188px;
    }

    /* SUPPORTING CONTENT */
    :where(html[data-page-style~="category-material"]) .steel-content {
        padding: 58px 0;
    }

    :where(html[data-page-style~="category-material"]) .steel-content-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

}


/* SMALL MOBILE */
@media (max-width: 480px) {
    /* HERO */
    :where(html[data-page-style~="category-material"]) .steel-hero,
:where(html[data-page-style~="category-material"]) .alloy-category-hero {
        padding: 47px 0 52px;
    }

    :where(html[data-page-style~="category-material"]) .steel-hero-content h1,
:where(html[data-page-style~="category-material"]) .alloy-category-content h1 {
        font-size: 32px;
    }

    /* STANDARD VISUAL */
    :where(html[data-page-style~="category-material"]) .steel-hero-visual {
        min-height: 215px;
    }

    :where(html[data-page-style~="category-material"]) .orbit-one {
        width: 200px;
        height: 200px;
    }

    :where(html[data-page-style~="category-material"]) .orbit-two {
        width: 150px;
        height: 150px;
    }

    /* ALLOY VISUAL */
    :where(html[data-page-style~="category-material"]) .alloy-family-visual,
:where(html[data-page-style~="category-material"]) .alloy-hero-visual {
        min-height: 275px;
    }

    :where(html[data-page-style~="category-material"]) .orbit-a,
:where(html[data-page-style~="category-material"]) .alloy-orbit-outer {
        width: 238px;
        height: 238px;
    }

    :where(html[data-page-style~="category-material"]) .orbit-b,
:where(html[data-page-style~="category-material"]) .alloy-orbit-middle {
        width: 180px;
        height: 180px;
    }

    :where(html[data-page-style~="category-material"]) .orbit-c,
:where(html[data-page-style~="category-material"]) .alloy-orbit-inner {
        width: 125px;
        height: 125px;
    }

    :where(html[data-page-style~="category-material"]) .alloy-family-core,
:where(html[data-page-style~="category-material"]) .alloy-core {
        width: 94px;
        height: 94px;
    }

    :where(html[data-page-style~="category-material"]) .core-ni,
:where(html[data-page-style~="category-material"]) .core-symbol,
:where(html[data-page-style~="category-material"]) .alloy-core-symbol {
        font-size: 26px;
    }

    :where(html[data-page-style~="category-material"]) .core-plus,
:where(html[data-page-style~="category-material"]) .alloy-core-plus {
        top: 16px;
        right: 18px;
        font-size: 13px;
    }

    :where(html[data-page-style~="category-material"]) .alloy-family-core small,
:where(html[data-page-style~="category-material"]) .alloy-core small {
        font-size: 5.8px;
    }

    :where(html[data-page-style~="category-material"]) .alloy-node,
:where(html[data-page-style~="category-material"]) .alloy-element {
        width: 33px;
        height: 33px;
        font-size: 8.5px;
    }

    :where(html[data-page-style~="category-material"]) .node-cr,
:where(html[data-page-style~="category-material"]) .alloy-element-1 {
        top: 12px;
    }

    :where(html[data-page-style~="category-material"]) .node-mo,
:where(html[data-page-style~="category-material"]) .alloy-element-2 {
        top: 47px;
        right: 25px;
    }

    :where(html[data-page-style~="category-material"]) .node-cu,
:where(html[data-page-style~="category-material"]) .alloy-element-3 {
        top: 129px;
        right: 3px;
    }

    :where(html[data-page-style~="category-material"]) .node-fe,
:where(html[data-page-style~="category-material"]) .alloy-element-4 {
        right: 50px;
        bottom: 14px;
    }

    :where(html[data-page-style~="category-material"]) .node-ti,
:where(html[data-page-style~="category-material"]) .alloy-element-5 {
        left: 50px;
        bottom: 14px;
    }

    :where(html[data-page-style~="category-material"]) .node-zr,
:where(html[data-page-style~="category-material"]) .alloy-element-6 {
        top: 129px;
        left: 3px;
    }

    :where(html[data-page-style~="category-material"]) .node-ta,
:where(html[data-page-style~="category-material"]) .alloy-element-7 {
        top: 47px;
        left: 25px;
    }

    /* GROUP HEADING */
    :where(html[data-page-style~="category-material"]) .grade-family-heading,
:where(html[data-page-style~="category-material"]) .grade-section-heading {
        grid-template-columns:
            37px minmax(0, 1fr);
        gap: 11px;
    }

    :where(html[data-page-style~="category-material"]) .grade-family-number,
:where(html[data-page-style~="category-material"]) .grade-family-heading > span,
:where(html[data-page-style~="category-material"]) .grade-section-heading > span {
        width: 33px;
        height: 33px;
    }

    :where(html[data-page-style~="category-material"]) .grade-family-heading h3,
:where(html[data-page-style~="category-material"]) .grade-section-heading h3 {
        font-size: 15px;
    }

    /* GRADE CARD */
    :where(html[data-page-style~="category-material"]) .grade-card {
        min-height: 268px;
        padding: 21px;
    }

    :where(html[data-page-style~="category-material"]) .grade-top {
        gap: 11px;
    }

    :where(html[data-page-style~="category-material"]) .grade-code {
        min-width: 48px;
        height: 38px;
        padding: 0 9px;
        font-size: 11px;
    }

    :where(html[data-page-style~="category-material"]) .grade-watermark {
        font-size: 66px;
    }

    /* SELECTION */
    :where(html[data-page-style~="category-material"]) .selection-grid {
        grid-template-columns: 1fr;
    }

    :where(html[data-page-style~="category-material"]) .selection-card {
        min-height: auto;
    }

}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    :where(html[data-page-style~="category-material"]) .steel-hero .breadcrumb a,
:where(html[data-page-style~="category-material"]) .alloy-breadcrumb a,
:where(html[data-page-style~="category-material"]) .hero-link,
:where(html[data-page-style~="category-material"]) .hero-link span,
:where(html[data-page-style~="category-material"]) .alloy-hero-link,
:where(html[data-page-style~="category-material"]) .alloy-hero-link span,
:where(html[data-page-style~="category-material"]) .grade-card,
:where(html[data-page-style~="category-material"]) .grade-watermark,
:where(html[data-page-style~="category-material"]) .grade-code,
:where(html[data-page-style~="category-material"]) .grade-link,
:where(html[data-page-style~="category-material"]) .grade-link span,
:where(html[data-page-style~="category-material"]) .selection-card {
        transition: none;
    }

}


/* Accessibility: category cards and headings on light surfaces */
:where(html[data-page-style~="category-material"]) .section-heading > span,
:where(html[data-page-style~="category-material"]) .grade-family-number,
:where(html[data-page-style~="category-material"]) .grade-family-heading > span,
:where(html[data-page-style~="category-material"]) .grade-section-heading > span,
:where(html[data-page-style~="category-material"]) .grade-series,
:where(html[data-page-style~="category-material"]) .grade-code,
:where(html[data-page-style~="category-material"]) .grade-link { color:#b04200; }

:where(html[data-page-style~="category-material"]) .grade-family-heading p,
:where(html[data-page-style~="category-material"]) .grade-section-heading p,
:where(html[data-page-style~="category-material"]) .grade-meta span { color:#666; }

:where(html[data-page-style~="category-material"]) .grade-link:hover { color:#963700; }

:where(html[data-page-style~="category-material"]) .grade-card:hover .grade-code { background:#b04200; border-color:#b04200; color:#fff; }


/* CONTACT */

/* FERROBEND CONTACT PAGE contact.css Contact-page-specific styling only. Common sitewide styling remains controlled by homepage.css: Header Navigation Dropdowns Mobile menu Footer Buttons Floating WhatsApp */

/* PAGE VARIABLES */
:root:where([data-page-style~="contact"]) {
--contact-dark: #17232f;
--contact-dark-deep: #111a21;
--contact-dark-soft: #232323;
--contact-orange: #ff6b00;
--contact-orange-hover: #e85f00;
--contact-orange-soft: #fff3e8;
--contact-orange-pale: #fff8f2;
--contact-white: #ffffff;
--contact-light: #f5f6f7;
--contact-soft: #eef0f2;
--contact-warm: #fff8f2;
--contact-text: #222222;
--contact-muted: #60666b;
--contact-light-text: #797f84;
--contact-border: #dedfe1;
--contact-border-light: rgba(23, 35, 47, 0.10);
--contact-border-dark: rgba(255, 255, 255, 0.13);
--contact-shadow-sm:
    0 8px 24px rgba(23, 35, 47, 0.07);
--contact-shadow-md:
    0 14px 38px rgba(23, 35, 47, 0.11);
--contact-shadow-lg:
    0 24px 60px rgba(23, 35, 47, 0.17);
--contact-radius-sm: 6px;
--contact-radius-md: 9px;
--contact-radius-lg: 14px;
--contact-radius-xl: 20px;
--contact-transition: 0.3s ease;
}


/* CONTACT HERO */
:where(html[data-page-style~="contact"]) .contact-hero {
position: relative;
min-height: 440px;
display: flex;
align-items: center;
padding: 78px 0 82px;
background:
    radial-gradient(
        circle at 88% 38%,
        rgba(255, 107, 0, 0.17) 0,
        rgba(255, 107, 0, 0.08) 13%,
        transparent 32%
    ),
    radial-gradient(
        circle at 72% 100%,
        rgba(255, 255, 255, 0.05) 0,
        transparent 27%
    ),
    linear-gradient(
        118deg,
        #111a21 0%,
        #17232f 48%,
        #202a31 74%,
        #232323 100%
    );
overflow: hidden;
}

:where(html[data-page-style~="contact"]) .contact-hero::before {
content: "";
position: absolute;
width: 510px;
height: 510px;
top: 50%;
right: -185px;
transform: translateY(-50%);
border: 1px solid rgba(255, 107, 0, 0.19);
border-radius: 50%;
box-shadow:
    0 0 0 70px rgba(255, 107, 0, 0.025),
    0 0 0 145px rgba(255, 255, 255, 0.015);
pointer-events: none;
}

:where(html[data-page-style~="contact"]) .contact-hero::after {
content: "";
position: absolute;
width: 270px;
height: 270px;
right: 105px;
top: 50%;
transform: translateY(-50%);
border: 1px dashed rgba(255, 255, 255, 0.09);
border-radius: 50%;
pointer-events: none;
}

:where(html[data-page-style~="contact"]) .contact-hero .container {
position: relative;
z-index: 2;
}


/* BREADCRUMB */
:where(html[data-page-style~="contact"]) .contact-hero .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
margin: 0 0 21px;
color: rgba(255, 255, 255, 0.77);
font-size: 15.5px;
line-height: 1.5;
}

:where(html[data-page-style~="contact"]) .contact-hero .breadcrumb a {
color: #ffffff;
text-decoration: none;
opacity: 0.84;
transition:
    color var(--contact-transition),
    opacity var(--contact-transition);
}

:where(html[data-page-style~="contact"]) .contact-hero .breadcrumb a:hover {
color: var(--contact-orange);
opacity: 1;
}

:where(html[data-page-style~="contact"]) .contact-hero .breadcrumb span {
color: rgba(255, 255, 255, 0.40);
}

:where(html[data-page-style~="contact"]) .contact-hero .breadcrumb strong {
color: var(--contact-orange);
font-weight: 600;
}


/* HERO SUBTITLE */
:where(html[data-page-style~="contact"]) .contact-hero .hero-subtitle {
display: inline-flex;
align-items: center;
padding: 7px 14px;
margin-bottom: 16px;
color: var(--contact-orange);
background:
    linear-gradient(
        135deg,
        rgba(255, 107, 0, 0.15),
        rgba(255, 107, 0, 0.05)
    );
border: 1px solid rgba(255, 107, 0, 0.34);
border-radius: 30px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.3px;
line-height: 1.4;
}


/* HERO HEADING */
:where(html[data-page-style~="contact"]) .contact-hero h1 {
max-width: 850px;
margin: 0 0 18px;
color: #ffffff;
font-size: clamp(44px, 5vw, 66px);
font-weight: 700;
line-height: 1.06;
letter-spacing: -1.5px;
}

:where(html[data-page-style~="contact"]) .contact-hero > .container > p {
max-width: 800px;
margin: 0;
color: rgba(255, 255, 255, 0.80);
font-size: 17px;
line-height: 1.72;
}


/* COMMON CONTACT SECTION TITLES */
:where(html[data-page-style~="contact"]) .contact-info .section-title,
:where(html[data-page-style~="contact"]) .contact-form-section .section-title,
:where(html[data-page-style~="contact"]) .quick-contact .section-title {
max-width: 820px;
margin: 0 auto 38px;
text-align: center;
}

:where(html[data-page-style~="contact"]) .contact-info .section-title > span,
:where(html[data-page-style~="contact"]) .contact-form-section .section-title > span,
:where(html[data-page-style~="contact"]) .quick-contact .section-title > span {
display: inline-block;
margin-bottom: 8px;
color: var(--contact-orange);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
line-height: 1.5;
text-transform: uppercase;
}

:where(html[data-page-style~="contact"]) .contact-info .section-title h2,
:where(html[data-page-style~="contact"]) .contact-form-section .section-title h2,
:where(html[data-page-style~="contact"]) .quick-contact .section-title h2 {
margin: 0 0 12px;
color: var(--contact-dark);
font-size: clamp(33px, 4vw, 46px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.8px;
}

:where(html[data-page-style~="contact"]) .contact-info .section-title p,
:where(html[data-page-style~="contact"]) .contact-form-section .section-title p,
:where(html[data-page-style~="contact"]) .quick-contact .section-title p {
margin: 0;
color: var(--contact-muted);
font-size: 15.5px;
line-height: 1.72;
}


/* CONTACT INFORMATION */
:where(html[data-page-style~="contact"]) .contact-info {
padding: 69px 0 75px;
background:
    radial-gradient(
        circle at 5% 12%,
        rgba(255, 107, 0, 0.07),
        transparent 22%
    ),
    linear-gradient(
        180deg,
        #fff8f2 0%,
        #ffffff 58%,
        #f5f6f7 100%
    );
}

:where(html[data-page-style~="contact"]) .contact-grid {
display: grid;
grid-template-columns:
    repeat(3, minmax(0, 1fr));
gap: 19px;
}

:where(html[data-page-style~="contact"]) .contact-card {
min-width: 0;
padding: 29px 24px;
background:
    linear-gradient(
        145deg,
        #ffffff 0%,
        #fffdfb 100%
    );
border: 1px solid var(--contact-border);
border-top: 3px solid rgba(255, 107, 0, 0.70);
border-radius: var(--contact-radius-lg);
box-shadow: var(--contact-shadow-sm);
transition:
    transform var(--contact-transition),
    box-shadow var(--contact-transition),
    border-color var(--contact-transition);
}

:where(html[data-page-style~="contact"]) .contact-card:hover {
transform: translateY(-5px);
border-color: rgba(255, 107, 0, 0.40);
box-shadow: var(--contact-shadow-md);
}

:where(html[data-page-style~="contact"]) .contact-icon {
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 17px;
color: var(--contact-orange);
background:
    linear-gradient(
        145deg,
        rgba(255, 107, 0, 0.15),
        rgba(255, 107, 0, 0.05)
    );
border: 1px solid rgba(255, 107, 0, 0.23);
border-radius: 50%;
font-size: 21px;
}

:where(html[data-page-style~="contact"]) .contact-card h3 {
margin: 0 0 8px;
color: var(--contact-dark);
font-size: 20px;
font-weight: 650;
line-height: 1.4;
}

:where(html[data-page-style~="contact"]) .contact-card > p {
margin: 0 0 18px;
color: var(--contact-muted);
font-size: 14px;
line-height: 1.7;
}

:where(html[data-page-style~="contact"]) .contact-card > p strong {
color: var(--contact-dark);
font-weight: 600;
}


/* CONTACT LIST */
:where(html[data-page-style~="contact"]) .contact-list {
display: flex;
flex-direction: column;
gap: 15px;
margin: 0;
padding: 0;
list-style: none;
}

:where(html[data-page-style~="contact"]) .contact-list li {
display: grid;
grid-template-columns:
    21px minmax(0, 1fr);
gap: 11px;
align-items: start;
color: var(--contact-muted);
font-size: 13.5px;
line-height: 1.72;
}

:where(html[data-page-style~="contact"]) .contact-list li > i {
margin-top: 4px;
color: var(--contact-orange);
font-size: 13px;
}


/* QR CARD */
:where(html[data-page-style~="contact"]) .qr-card {
text-align: center;
}

:where(html[data-page-style~="contact"]) .qr-card > p {
max-width: 310px;
margin-left: auto;
margin-right: auto;
}

:where(html[data-page-style~="contact"]) .qr-box {
width: 250px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
margin: 23px auto 0;
padding: 12px;
background: #ffffff;
border: 1px solid var(--contact-border);
border-radius: var(--contact-radius-md);
box-shadow:
    0 10px 28px rgba(23, 35, 47, 0.08);
}

:where(html[data-page-style~="contact"]) .qr-image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}


/* MAP */
:where(html[data-page-style~="contact"]) .map-card {
display: flex;
flex-direction: column;
}

:where(html[data-page-style~="contact"]) .map-card iframe {
width: 100%;
min-height: 270px;
display: block;
margin-top: auto;
border: 0;
border-radius: var(--contact-radius-md);
box-shadow:
    0 8px 22px rgba(23, 35, 47, 0.08);
}


/* CONTACT FORM SECTION */
:where(html[data-page-style~="contact"]) .contact-form-section {
padding: 70px 0 76px;
background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f7f8fa 100%
    );
}

:where(html[data-page-style~="contact"]) .contact-form {
max-width: 980px;
margin: 0 auto;
padding: 32px;
background:
    linear-gradient(
        145deg,
        #ffffff 0%,
        #fffdfb 100%
    );
border: 1px solid var(--contact-border);
border-radius: var(--contact-radius-xl);
box-shadow: var(--contact-shadow-md);
}

:where(html[data-page-style~="contact"]) .form-grid {
display: grid;
grid-template-columns:
    repeat(2, minmax(0, 1fr));
gap: 20px 18px;
}

:where(html[data-page-style~="contact"]) .form-group {
min-width: 0;
display: flex;
flex-direction: column;
}

:where(html[data-page-style~="contact"]) .form-group.full-width {
margin-top: 20px;
}

:where(html[data-page-style~="contact"]) .form-group label {
margin-bottom: 8px;
color: var(--contact-dark);
font-size: 13.5px;
font-weight: 600;
line-height: 1.5;
}

:where(html[data-page-style~="contact"]) .form-group input,
:where(html[data-page-style~="contact"]) .form-group select,
:where(html[data-page-style~="contact"]) .form-group textarea {
width: 100%;
padding: 13px 15px;
color: var(--contact-text);
background: #ffffff;
border: 1px solid #d8dade;
border-radius: var(--contact-radius-sm);
outline: none;
font-family: inherit;
font-size: 14px;
line-height: 1.5;
transition:
    border-color var(--contact-transition),
    box-shadow var(--contact-transition),
    background var(--contact-transition);
}

:where(html[data-page-style~="contact"]) .form-group input {
min-height: 48px;
}

:where(html[data-page-style~="contact"]) .form-group select {
min-height: 48px;
cursor: pointer;
appearance: auto;
}

:where(html[data-page-style~="contact"]) .form-group textarea {
min-height: 165px;
resize: vertical;
}

:where(html[data-page-style~="contact"]) .form-group input::placeholder,
:where(html[data-page-style~="contact"]) .form-group textarea::placeholder {
color: #9a9ea2;
}

:where(html[data-page-style~="contact"]) .form-group input:focus,
:where(html[data-page-style~="contact"]) .form-group select:focus,
:where(html[data-page-style~="contact"]) .form-group textarea:focus {
border-color: var(--contact-orange);
box-shadow:
    0 0 0 3px rgba(255, 107, 0, 0.10);
background: #fffdfb;
}


/* PHONE COUNTRY CODE + PHONE NUMBER */
:where(html[data-page-style~="contact"]) .phone-field {
display: grid;
grid-template-columns:
    112px minmax(0, 1fr);
width: 100%;
height: 48px;
background: #ffffff;
border: 1px solid #d8dade;
border-radius: var(--contact-radius-sm);
overflow: hidden;
transition:
    border-color var(--contact-transition),
    box-shadow var(--contact-transition),
    background var(--contact-transition);
}

:where(html[data-page-style~="contact"]) .phone-field:focus-within {
border-color: var(--contact-orange);
box-shadow:
    0 0 0 3px rgba(255, 107, 0, 0.10);
background: #fffdfb;
}

:where(html[data-page-style~="contact"]) .phone-country-wrap {
position: relative;
display: flex;
align-items: center;
min-width: 0;
border-right: 1px solid #d8dade;
background: transparent;
}

:where(html[data-page-style~="contact"]) .phone-country-wrap::after {
content: "";
position: absolute;
right: 11px;
top: 50%;
width: 7px;
height: 7px;
border-right: 1.5px solid #666666;
border-bottom: 1.5px solid #666666;
transform:
    translateY(-65%)
    rotate(45deg);
pointer-events: none;
}

:where(html[data-page-style~="contact"]) .phone-country-wrap select {
width: 100%;
height: 100%;
margin: 0;
padding:
    0 28px 0 11px;
color: var(--contact-text);
background: transparent;
border: 0;
border-radius: 0;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font-family: inherit;
font-size: 14px;
line-height: 1;
cursor: pointer;
}

:where(html[data-page-style~="contact"]) .phone-field input {
width: 100%;
height: 100%;
min-height: 0;
margin: 0;
padding:
    0 15px;
color: var(--contact-text);
background: transparent;
border: 0;
border-radius: 0;
outline: none;
box-shadow: none;
font-family: inherit;
font-size: 14px;
line-height: 1;
}

:where(html[data-page-style~="contact"]) .phone-field input::placeholder {
color: #9a9ea2;
opacity: 1;
}

:where(html[data-page-style~="contact"]) .phone-field input:focus,
:where(html[data-page-style~="contact"]) .phone-country-wrap select:focus {
border: 0;
outline: none;
box-shadow: none;
background: transparent;
}


/* FORM STATUS */
:where(html[data-page-style~="contact"]) .form-status {
max-width: 980px;
margin: 0 auto 18px;
padding: 14px 17px;
display: flex;
align-items: center;
gap: 10px;
border-radius: var(--contact-radius-md);
font-size: 14px;
line-height: 1.5;
}

:where(html[data-page-style~="contact"]) .form-status i {
flex: 0 0 auto;
font-size: 17px;
}

:where(html[data-page-style~="contact"]) .form-status.success {
color: #185c37;
background: #edf9f2;
border: 1px solid #bde8ce;
}

:where(html[data-page-style~="contact"]) .form-status.error {
color: #8a2b21;
background: #fff2f0;
border: 1px solid #f0c4be;
}


/* FORM BUTTON */
:where(html[data-page-style~="contact"]) .form-button {
display: flex;
justify-content: center;
margin-top: 25px;
}

:where(html[data-page-style~="contact"]) .contact-form .primary-btn {
min-height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 13px 27px;
color: #ffffff;
background:
    linear-gradient(
        135deg,
        #ff790f 0%,
        #ff6b00 55%,
        #e85f00 100%
    );
border: 1px solid var(--contact-orange);
border-radius: var(--contact-radius-sm);
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
box-shadow:
    0 8px 20px rgba(255, 107, 0, 0.20);
transition:
    background var(--contact-transition),
    border-color var(--contact-transition),
    transform var(--contact-transition),
    box-shadow var(--contact-transition);
}

:where(html[data-page-style~="contact"]) .contact-form .primary-btn:hover {
background:
    linear-gradient(
        135deg,
        #ff861f 0%,
        #ff6b00 60%,
        #d95700 100%
    );
border-color: var(--contact-orange-hover);
transform: translateY(-2px);
box-shadow:
    0 12px 28px rgba(255, 107, 0, 0.25);
}

:where(html[data-page-style~="contact"]) .contact-form .primary-btn:disabled {
opacity: 0.75;
cursor: not-allowed;
transform: none;
box-shadow:
    0 6px 16px rgba(255, 107, 0, 0.14);
}


/* QUICK CONTACT */
:where(html[data-page-style~="contact"]) .quick-contact {
padding: 68px 0 74px;
background:
    radial-gradient(
        circle at 8% 15%,
        rgba(255, 107, 0, 0.11),
        transparent 25%
    ),
    radial-gradient(
        circle at 94% 82%,
        rgba(255, 255, 255, 0.045),
        transparent 25%
    ),
    linear-gradient(
        135deg,
        #111a21 0%,
        #17232f 52%,
        #20282e 100%
    );
}

:where(html[data-page-style~="contact"]) .quick-contact .section-title h2 {
color: #ffffff;
}

:where(html[data-page-style~="contact"]) .quick-contact .section-title p {
color: rgba(255, 255, 255, 0.70);
}

:where(html[data-page-style~="contact"]) .quick-contact-grid {
display: grid;
grid-template-columns:
    repeat(4, minmax(0, 1fr));
gap: 16px;
}

:where(html[data-page-style~="contact"]) .quick-box {
padding: 27px 20px;
background:
    linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.085),
        rgba(255, 255, 255, 0.035)
    );
border: 1px solid rgba(255, 255, 255, 0.13);
border-top: 3px solid rgba(255, 107, 0, 0.70);
border-radius: var(--contact-radius-lg);
text-align: center;
transition:
    transform var(--contact-transition),
    background var(--contact-transition),
    border-color var(--contact-transition);
}

:where(html[data-page-style~="contact"]) .quick-box:hover {
transform: translateY(-5px);
background:
    linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.12),
        rgba(255, 107, 0, 0.06)
    );
border-color: rgba(255, 107, 0, 0.42);
}

:where(html[data-page-style~="contact"]) .quick-box > i {
width: 60px;
height: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
color: var(--contact-orange);
background:
    linear-gradient(
        145deg,
        rgba(255, 107, 0, 0.19),
        rgba(255, 107, 0, 0.08)
    );
border: 1px solid rgba(255, 107, 0, 0.24);
border-radius: 50%;
font-size: 23px;
}

:where(html[data-page-style~="contact"]) .quick-box h3 {
margin: 0 0 8px;
color: #ffffff;
font-size: 18px;
font-weight: 650;
line-height: 1.4;
}

:where(html[data-page-style~="contact"]) .quick-box p {
margin: 0;
color: rgba(255, 255, 255, 0.68);
font-size: 13.5px;
line-height: 1.65;
}


/* ACCESSIBILITY */
:where(html[data-page-style~="contact"]) .contact-form .primary-btn:focus-visible,
:where(html[data-page-style~="contact"]) .form-group input:focus-visible,
:where(html[data-page-style~="contact"]) .form-group select:focus-visible,
:where(html[data-page-style~="contact"]) .form-group textarea:focus-visible {
outline: 3px solid rgba(255, 107, 0, 0.22);
outline-offset: 2px;
}

:where(html[data-page-style~="contact"]) .phone-field:focus-within {
outline: none;
}


/* TABLET */
@media (max-width: 1100px) {
:where(html[data-page-style~="contact"]) .contact-hero {
    min-height: 420px;
    padding: 72px 0 76px;
}

:where(html[data-page-style~="contact"]) .contact-hero h1 {
    font-size: 55px;
}

:where(html[data-page-style~="contact"]) .contact-hero > .container > p {
    font-size: 16px;
}

:where(html[data-page-style~="contact"]) .contact-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

:where(html[data-page-style~="contact"]) .map-card {
    grid-column: 1 / -1;
}

:where(html[data-page-style~="contact"]) .quick-contact-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

}


/* MOBILE */
@media (max-width: 768px) {
:where(html[data-page-style~="contact"]) .contact-hero {
    min-height: auto;
    padding: 60px 0 70px;
    background:
        radial-gradient(
            circle at 90% 18%,
            rgba(255, 107, 0, 0.15),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #111a21 0%,
            #17232f 68%,
            #20282e 100%
        );
}

:where(html[data-page-style~="contact"]) .contact-hero::before {
    width: 300px;
    height: 300px;
    top: -50px;
    right: -175px;
    transform: none;
}

:where(html[data-page-style~="contact"]) .contact-hero::after {
    width: 155px;
    height: 155px;
    right: 15px;
    top: 145px;
    transform: none;
}

:where(html[data-page-style~="contact"]) .contact-hero .breadcrumb {
    margin-bottom: 17px;
    font-size: 15.5px;
    line-height: 1.5;
}

:where(html[data-page-style~="contact"]) .contact-hero .hero-subtitle {
    margin-bottom: 13px;
    font-size: 10px;
    letter-spacing: 1.1px;
}

:where(html[data-page-style~="contact"]) .contact-hero h1 {
    margin-bottom: 16px;
    font-size: 37px;
    line-height: 1.10;
    letter-spacing: -0.8px;
}

:where(html[data-page-style~="contact"]) .contact-hero > .container > p {
    font-size: 15px;
    line-height: 1.70;
}

:where(html[data-page-style~="contact"]) .contact-info .section-title,
:where(html[data-page-style~="contact"]) .contact-form-section .section-title,
:where(html[data-page-style~="contact"]) .quick-contact .section-title {
    margin-bottom: 31px;
}

:where(html[data-page-style~="contact"]) .contact-info .section-title h2,
:where(html[data-page-style~="contact"]) .contact-form-section .section-title h2,
:where(html[data-page-style~="contact"]) .quick-contact .section-title h2 {
    font-size: 31px;
    line-height: 1.20;
}

:where(html[data-page-style~="contact"]) .contact-info .section-title p,
:where(html[data-page-style~="contact"]) .contact-form-section .section-title p,
:where(html[data-page-style~="contact"]) .quick-contact .section-title p {
    font-size: 14px;
    line-height: 1.72;
}

:where(html[data-page-style~="contact"]) .contact-info {
    padding: 57px 0 63px;
}

:where(html[data-page-style~="contact"]) .contact-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

:where(html[data-page-style~="contact"]) .map-card {
    grid-column: auto;
}

:where(html[data-page-style~="contact"]) .contact-card {
    padding: 25px 20px;
}

:where(html[data-page-style~="contact"]) .contact-card:hover {
    transform: none;
}

:where(html[data-page-style~="contact"]) .qr-box {
    width: 220px;
    height: 220px;
}

:where(html[data-page-style~="contact"]) .map-card iframe {
    min-height: 285px;
    margin-top: 4px;
}

:where(html[data-page-style~="contact"]) .contact-form-section {
    padding: 57px 0 63px;
}

:where(html[data-page-style~="contact"]) .contact-form {
    padding: 23px 19px;
    border-radius: var(--contact-radius-lg);
}

:where(html[data-page-style~="contact"]) .form-grid {
    grid-template-columns: 1fr;
    gap: 17px;
}

:where(html[data-page-style~="contact"]) .form-group.full-width {
    margin-top: 17px;
}

:where(html[data-page-style~="contact"]) .form-group textarea {
    min-height: 145px;
}

:where(html[data-page-style~="contact"]) .form-button {
    margin-top: 21px;
}

:where(html[data-page-style~="contact"]) .contact-form .primary-btn {
    width: 100%;
}

:where(html[data-page-style~="contact"]) .phone-field {
    grid-template-columns:
        108px minmax(0, 1fr);
}

:where(html[data-page-style~="contact"]) .quick-contact {
    padding: 57px 0 63px;
}

:where(html[data-page-style~="contact"]) .quick-contact-grid {
    grid-template-columns: 1fr;
    gap: 11px;
}

:where(html[data-page-style~="contact"]) .quick-box {
    padding: 24px 19px;
}

:where(html[data-page-style~="contact"]) .quick-box:hover {
    transform: none;
}

:where(html[data-page-style~="contact"]) .quick-box p {
    font-size: 14px;
}

}


/* SMALL MOBILE */
@media (max-width: 480px) {
:where(html[data-page-style~="contact"]) .contact-hero {
    padding: 55px 0 63px;
}

:where(html[data-page-style~="contact"]) .contact-hero h1 {
    font-size: 33px;
}

:where(html[data-page-style~="contact"]) .contact-hero > .container > p {
    font-size: 14.5px;
}

:where(html[data-page-style~="contact"]) .contact-info {
    padding: 53px 0 59px;
}

:where(html[data-page-style~="contact"]) .contact-form-section {
    padding: 53px 0 59px;
}

:where(html[data-page-style~="contact"]) .contact-form {
    padding: 21px 16px;
}

:where(html[data-page-style~="contact"]) .form-group input,
:where(html[data-page-style~="contact"]) .form-group select,
:where(html[data-page-style~="contact"]) .form-group textarea {
    font-size: 13.5px;
}

:where(html[data-page-style~="contact"]) .phone-field {
    grid-template-columns:
        102px minmax(0, 1fr);
}

:where(html[data-page-style~="contact"]) .phone-country-wrap select,
:where(html[data-page-style~="contact"]) .phone-field input {
    font-size: 13.5px;
}

:where(html[data-page-style~="contact"]) .phone-country-wrap select {
    padding-left: 9px;
    padding-right: 25px;
}

:where(html[data-page-style~="contact"]) .phone-field input {
    padding-left: 11px;
    padding-right: 11px;
}

:where(html[data-page-style~="contact"]) .quick-contact {
    padding: 53px 0 59px;
}

:where(html[data-page-style~="contact"]) .contact-card h3 {
    font-size: 19px;
}

:where(html[data-page-style~="contact"]) .contact-card > p,
:where(html[data-page-style~="contact"]) .contact-list li {
    font-size: 13.5px;
}

:where(html[data-page-style~="contact"]) .qr-box {
    width: 200px;
    height: 200px;
}

:where(html[data-page-style~="contact"]) .map-card iframe {
    min-height: 245px;
}

:where(html[data-page-style~="contact"]) .form-status {
    font-size: 13.5px;
    padding: 13px 14px;
}

}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
:where(html[data-page-style~="contact"]) .contact-card,
:where(html[data-page-style~="contact"]) .quick-box,
:where(html[data-page-style~="contact"]) .contact-form .primary-btn,
:where(html[data-page-style~="contact"]) .form-status,
:where(html[data-page-style~="contact"]) .phone-field {
    transition: none;
}

:where(html[data-page-style~="contact"]) .contact-card:hover,
:where(html[data-page-style~="contact"]) .quick-box:hover {
    transform: none;
}

}


/* INDIVIDUAL MATERIAL */

/* INDIVIDUAL MATERIAL PAGE individual-material.css */

/* VARIABLES */
:root:where([data-page-style~="individual-material"]) {
    --individual-dark: #17232f;
    --individual-deep: #111a21;
    --individual-orange: #ff6b00;
    --individual-orange-hover: #e85f00;
    --individual-orange-soft: #fff3e8;
    --individual-white: #ffffff;
    --individual-light: #f7f8fa;
    --individual-warm: #fffaf6;
    --individual-text: #222222;
    --individual-muted: #666666;
    --individual-border: #e5e5e5;
    --individual-border-dark: rgba(255, 255, 255, 0.10);
    --individual-transition: 0.3s ease;
}


/* MATERIAL HERO */
:where(html[data-page-style~="individual-material"]) .individual-material-hero {
    position: relative;
    padding:
        74px 0 78px;
    background:
        radial-gradient(
            circle at 82% 43%,
            rgba(255, 107, 0, 0.12),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #17232f 0%,
            #111a21 100%
        );
    overflow: hidden;
}

:where(html[data-page-style~="individual-material"]) .individual-material-hero::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    top: -330px;
    right: -160px;
    border:
        1px solid
        rgba(255, 255, 255, 0.045);
    border-radius: 50%;
    pointer-events: none;
}

:where(html[data-page-style~="individual-material"]) .individual-material-hero::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    left: -195px;
    bottom: -225px;
    border-radius: 50%;
    background:
        rgba(255, 107, 0, 0.035);
    pointer-events: none;
}

:where(html[data-page-style~="individual-material"]) .individual-material-hero .container {
    position: relative;
    z-index: 2;
}


/* BREADCRUMB */
:where(html[data-page-style~="individual-material"]) .material-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin:
        0 0 25px;
    color:
        rgba(255, 255, 255, 0.77);
    font-size: 15.5px;
    line-height: 1.5;
}

:where(html[data-page-style~="individual-material"]) .material-breadcrumb a {
    color:
        #ffffff;
    text-decoration: none;
    opacity: 0.84;
    transition:
        color var(--individual-transition),
        opacity var(--individual-transition);
}

:where(html[data-page-style~="individual-material"]) .material-breadcrumb a:hover {
    color:
        var(--individual-orange);
    opacity: 1;
}

:where(html[data-page-style~="individual-material"]) .material-breadcrumb span {
    color:
        rgba(255, 255, 255, 0.40);
}

:where(html[data-page-style~="individual-material"]) .material-breadcrumb strong {
    color:
        var(--individual-orange);
    font-weight: 600;
}


/* HERO GRID */
:where(html[data-page-style~="individual-material"]) .material-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(320px, 0.88fr);
    align-items: center;
    gap: 70px;
}


/* HERO CONTENT */
:where(html[data-page-style~="individual-material"]) .material-hero-content {
    max-width: 780px;
}

:where(html[data-page-style~="individual-material"]) .material-family {
    display: inline-block;
    margin-bottom: 12px;
    color:
        var(--individual-orange);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.75px;
}

:where(html[data-page-style~="individual-material"]) .individual-material-hero h1 {
    max-width: 760px;
    margin:
        0 0 18px;
    color:
        #ffffff;
    font-size:
        clamp(44px, 5vw, 61px);
    font-weight: 700;
    line-height: 1.10;
    letter-spacing: -1.2px;
}

:where(html[data-page-style~="individual-material"]) .material-hero-description {
    max-width: 715px;
    margin:
        0 0 26px;
    color:
        rgba(255, 255, 255, 0.70);
    font-size: 15px;
    line-height: 1.8;
}


/* HERO TECHNICAL DATA */
:where(html[data-page-style~="individual-material"]) .hero-material-data {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

:where(html[data-page-style~="individual-material"]) .hero-material-data span {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding:
        0 20px;
    color:
        rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

:where(html[data-page-style~="individual-material"]) .hero-material-data span:first-child {
    padding-left: 0;
}

:where(html[data-page-style~="individual-material"]) .hero-material-data span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 18px;
    background:
        rgba(255, 255, 255, 0.12);
    transform:
        translateY(-50%);
}

:where(html[data-page-style~="individual-material"]) .hero-material-data small {
    color:
        var(--individual-orange);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* HERO VISUAL */
:where(html[data-page-style~="individual-material"]) .material-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 305px;
}

:where(html[data-page-style~="individual-material"]) .material-visual-number {
    position: relative;
    z-index: 3;
    color:
        rgba(255, 255, 255, 0.115);
    font-size:
        clamp(105px, 12vw, 176px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -10px;
    user-select: none;
}

:where(html[data-page-style~="individual-material"]) .material-visual-number::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 76px;
    height: 3px;
    background:
        var(--individual-orange);
    border-radius: 10px;
    transform:
        translateX(-50%);
}


/* HERO ORBITS */
:where(html[data-page-style~="individual-material"]) .material-visual-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

:where(html[data-page-style~="individual-material"]) .orbit-large {
    width: 300px;
    height: 300px;
    border:
        1px solid
        rgba(255, 255, 255, 0.065);
}

:where(html[data-page-style~="individual-material"]) .orbit-small {
    width: 220px;
    height: 220px;
    border:
        1px dashed
        rgba(255, 107, 0, 0.17);
}


/* HERO VISUAL LABEL */
:where(html[data-page-style~="individual-material"]) .material-visual-label {
    position: absolute;
    right: 10px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding:
        10px 14px;
    background:
        rgba(13, 21, 27, 0.86);
    border:
        1px solid
        rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    backdrop-filter:
        blur(8px);
    -webkit-backdrop-filter:
        blur(8px);
}

:where(html[data-page-style~="individual-material"]) .material-visual-label span {
    color:
        var(--individual-orange);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

:where(html[data-page-style~="individual-material"]) .material-visual-label strong {
    color:
        rgba(255, 255, 255, 0.83);
    font-size: 11px;
    font-weight: 500;
}


/* MATERIAL SECTION */
:where(html[data-page-style~="individual-material"]) .material-section {
    position: relative;
    padding:
        72px 0;
    overflow: hidden;
}

:where(html[data-page-style~="individual-material"]) .material-section .container {
    position: relative;
    z-index: 2;
}


/* OVERVIEW SECTION */
:where(html[data-page-style~="individual-material"]) .material-overview-section {
    background:
        #ffffff;
}


/* MECHANICAL SECTION */
:where(html[data-page-style~="individual-material"]) .material-mechanical-section {
    background:
        #ffffff;
}


/* SECTION NUMBER */
:where(html[data-page-style~="individual-material"]) .section-number {
    position: absolute;
    top: -8px;
    right: 0;
    z-index: -1;
    color:
        #17232f;
    font-size:
        118px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -8px;
    opacity: 0.025;
    user-select: none;
    pointer-events: none;
}

:where(html[data-page-style~="individual-material"]) .section-number-dark {
    color:
        #ffffff;
    opacity: 0.035;
}


/* SECTION HEADING */
:where(html[data-page-style~="individual-material"]) .material-section-heading {
    max-width: 820px;
    margin-bottom: 31px;
}

:where(html[data-page-style~="individual-material"]) .section-kicker {
    display: block;
    margin-bottom: 9px;
    color:
        var(--individual-orange);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.7px;
}

:where(html[data-page-style~="individual-material"]) .material-section-heading h2 {
    margin:
        0 0 11px;
    color:
        var(--individual-text);
    font-size:
        clamp(31px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.7px;
}

:where(html[data-page-style~="individual-material"]) .material-section-heading p {
    max-width: 730px;
    margin: 0;
    color:
        var(--individual-muted);
    font-size: 13.5px;
    line-height: 1.72;
}


/* DESCRIPTION */
:where(html[data-page-style~="individual-material"]) .material-description {
    max-width: 940px;
    margin-bottom: 31px;
}

:where(html[data-page-style~="individual-material"]) .material-description p {
    margin:
        0 0 13px;
    color:
        #5f6367;
    font-size: 14px;
    line-height: 1.8;
}

:where(html[data-page-style~="individual-material"]) .material-description p:last-child {
    margin-bottom: 0;
}


/* TECHNICAL TABLE WRAP */
:where(html[data-page-style~="individual-material"]) .technical-table-wrap {
    width: 100%;
    overflow-x: auto;
    background:
        #ffffff;
    border-top:
        2px solid
        var(--individual-dark);
    border-bottom:
        1px solid
        var(--individual-border);
}


/* TECHNICAL TABLE */
:where(html[data-page-style~="individual-material"]) .technical-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
}

:where(html[data-page-style~="individual-material"]) .technical-table th,
:where(html[data-page-style~="individual-material"]) .technical-table td {
    padding:
        15px 18px;
    border-bottom:
        1px solid
        var(--individual-border);
    text-align: left;
    vertical-align: middle;
}

:where(html[data-page-style~="individual-material"]) .technical-table tbody tr:last-child th,
:where(html[data-page-style~="individual-material"]) .technical-table tbody tr:last-child td {
    border-bottom: none;
}


/* TABLE HEAD */
:where(html[data-page-style~="individual-material"]) .technical-table thead {
    background:
        var(--individual-dark);
}

:where(html[data-page-style~="individual-material"]) .technical-table thead th {
    color:
        #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.3px;
}


/* TABLE BODY */
:where(html[data-page-style~="individual-material"]) .technical-table tbody th {
    width: 32%;
    color:
        #303236;
    background:
        #fafafa;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.55;
}

:where(html[data-page-style~="individual-material"]) .technical-table tbody td {
    color:
        #5d6165;
    font-size: 12.5px;
    line-height: 1.6;
}

:where(html[data-page-style~="individual-material"]) .technical-table tbody tr {
    transition:
        background var(--individual-transition);
}

:where(html[data-page-style~="individual-material"]) .technical-table tbody tr:hover {
    background:
        #fff9f4;
}


/* 02 — CHEMICAL SECTION */
:where(html[data-page-style~="individual-material"]) .material-chemical-section {
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(255, 107, 0, 0.075),
            transparent 24%
        ),
        #111a21;
}

:where(html[data-page-style~="individual-material"]) .material-chemical-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -220px;
    bottom: -270px;
    border:
        1px solid
        rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    pointer-events: none;
}

:where(html[data-page-style~="individual-material"]) .material-section-heading-dark h2 {
    color:
        #ffffff;
}

:where(html[data-page-style~="individual-material"]) .material-section-heading-dark p {
    color:
        rgba(255, 255, 255, 0.58);
}


/* 02 — DARK TABLE */
:where(html[data-page-style~="individual-material"]) .technical-table-wrap-dark {
    background:
        rgba(255, 255, 255, 0.025);
    border-top:
        2px solid
        var(--individual-orange);
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);
}

:where(html[data-page-style~="individual-material"]) .chemical-table thead {
    background:
        rgba(255, 255, 255, 0.065);
}

:where(html[data-page-style~="individual-material"]) .chemical-table thead th {
    color:
        #ffffff;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.10);
}

:where(html[data-page-style~="individual-material"]) .chemical-table tbody td {
    color:
        rgba(255, 255, 255, 0.69);
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.075);
}

:where(html[data-page-style~="individual-material"]) .chemical-table tbody tr:last-child td {
    border-bottom: none;
}

:where(html[data-page-style~="individual-material"]) .chemical-table tbody tr:hover {
    background:
        rgba(255, 255, 255, 0.035);
}


/* 03 — MECHANICAL TABLE */
:where(html[data-page-style~="individual-material"]) .mechanical-table th:nth-child(1),
:where(html[data-page-style~="individual-material"]) .mechanical-table td:nth-child(1) {
    width: 48%;
}

:where(html[data-page-style~="individual-material"]) .mechanical-table th:nth-child(2),
:where(html[data-page-style~="individual-material"]) .mechanical-table td:nth-child(2) {
    width: 32%;
}

:where(html[data-page-style~="individual-material"]) .mechanical-table th:nth-child(3),
:where(html[data-page-style~="individual-material"]) .mechanical-table td:nth-child(3) {
    width: 20%;
}


/* 04 — ENGINEERING INFORMATION */
:where(html[data-page-style~="individual-material"]) .material-engineering-section {
    background:
        radial-gradient(
            circle at 10% 85%,
            rgba(255, 107, 0, 0.065),
            transparent 25%
        ),
        #111a21;
}

:where(html[data-page-style~="individual-material"]) .material-engineering-section::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    top: -285px;
    left: -230px;
    border:
        1px solid
        rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    pointer-events: none;
}

:where(html[data-page-style~="individual-material"]) .material-engineering-section::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -190px;
    bottom: -230px;
    border-radius: 50%;
    background:
        rgba(255, 107, 0, 0.025);
    pointer-events: none;
}


/* 04 — SECTION NUMBER */
:where(html[data-page-style~="individual-material"]) .material-engineering-section .section-number {
    color:
        #ffffff;
    opacity: 0.035;
}


/* 04 — SECTION HEADING */
:where(html[data-page-style~="individual-material"]) .material-engineering-section .material-section-heading h2 {
    color:
        #ffffff;
}

:where(html[data-page-style~="individual-material"]) .material-engineering-section .material-section-heading p {
    color:
        rgba(255, 255, 255, 0.58);
}


/* 04 — DARK TABLE WRAPPER */
:where(html[data-page-style~="individual-material"]) .material-engineering-section .technical-table-wrap {
    background:
        rgba(255, 255, 255, 0.025);
    border-top:
        2px solid
        var(--individual-orange);
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);
}


/* 04 — ENGINEERING TABLE */
:where(html[data-page-style~="individual-material"]) .engineering-table {
    min-width: 680px;
}

:where(html[data-page-style~="individual-material"]) .material-engineering-section .engineering-table tbody th {
    width: 31%;
    color:
        rgba(255, 255, 255, 0.92);
    background:
        rgba(255, 255, 255, 0.055);
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.075);
}

:where(html[data-page-style~="individual-material"]) .material-engineering-section .engineering-table tbody td {
    color:
        rgba(255, 255, 255, 0.68);
    background:
        transparent;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.075);
}

:where(html[data-page-style~="individual-material"]) .material-engineering-section .engineering-table tbody tr:last-child th,
:where(html[data-page-style~="individual-material"]) .material-engineering-section .engineering-table tbody tr:last-child td {
    border-bottom: none;
}

:where(html[data-page-style~="individual-material"]) .material-engineering-section .engineering-table tbody tr:hover {
    background:
        rgba(255, 255, 255, 0.035);
}


/* MATERIAL NOTE */
:where(html[data-page-style~="individual-material"]) .material-note {
    max-width: 910px;
    margin:
        19px 0 0;
    padding:
        2px 0 2px 15px;
    border-left:
        3px solid
        var(--individual-orange);
    color:
        #65686b;
    font-size: 11.5px;
    line-height: 1.7;
}


/* SCROLLBAR */
:where(html[data-page-style~="individual-material"]) .technical-table-wrap::-webkit-scrollbar {
    height: 7px;
}

:where(html[data-page-style~="individual-material"]) .technical-table-wrap::-webkit-scrollbar-track {
    background:
        #e8eaec;
}

:where(html[data-page-style~="individual-material"]) .technical-table-wrap::-webkit-scrollbar-thumb {
    background:
        #adb2b7;
    border-radius: 10px;
}

:where(html[data-page-style~="individual-material"]) .technical-table-wrap-dark::-webkit-scrollbar-track,
:where(html[data-page-style~="individual-material"]) .material-engineering-section .technical-table-wrap::-webkit-scrollbar-track {
    background:
        #1d272f;
}

:where(html[data-page-style~="individual-material"]) .technical-table-wrap-dark::-webkit-scrollbar-thumb,
:where(html[data-page-style~="individual-material"]) .material-engineering-section .technical-table-wrap::-webkit-scrollbar-thumb {
    background:
        #46515a;
}


/* TABLET */
@media (max-width: 1024px) {
    :where(html[data-page-style~="individual-material"]) .material-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 0.7fr);
        gap: 40px;
    }

    :where(html[data-page-style~="individual-material"]) .material-hero-visual {
        min-height: 270px;
    }

    :where(html[data-page-style~="individual-material"]) .orbit-large {
        width: 260px;
        height: 260px;
    }

    :where(html[data-page-style~="individual-material"]) .orbit-small {
        width: 190px;
        height: 190px;
    }

}


/* MOBILE */
@media (max-width: 768px) {
    /* HERO */
    :where(html[data-page-style~="individual-material"]) .individual-material-hero {
        padding:
            54px 0 58px;
    }

    :where(html[data-page-style~="individual-material"]) .material-breadcrumb {
        margin-bottom: 17px;
        font-size: 15.5px;
    }

    :where(html[data-page-style~="individual-material"]) .material-hero-grid {
        grid-template-columns:
            1fr;
        gap: 28px;
    }

    :where(html[data-page-style~="individual-material"]) .material-family {
        font-size: 10.5px;
        letter-spacing: 1.4px;
    }

    :where(html[data-page-style~="individual-material"]) .individual-material-hero h1 {
        font-size: 37px;
        line-height: 1.15;
        letter-spacing: -0.6px;
    }

    :where(html[data-page-style~="individual-material"]) .material-hero-description {
        font-size: 14px;
        line-height: 1.74;
    }

    /* HERO DATA */
    :where(html[data-page-style~="individual-material"]) .hero-material-data {
        gap: 10px 0;
    }

    :where(html[data-page-style~="individual-material"]) .hero-material-data span {
        padding:
            0 14px;
        font-size: 12px;
    }

    :where(html[data-page-style~="individual-material"]) .hero-material-data span:first-child {
        padding-left: 0;
    }

    /* HERO VISUAL */
    :where(html[data-page-style~="individual-material"]) .material-hero-visual {
        min-height: 205px;
    }

    :where(html[data-page-style~="individual-material"]) .material-visual-number {
        font-size: 110px;
        letter-spacing: -7px;
    }

    :where(html[data-page-style~="individual-material"]) .orbit-large {
        width: 205px;
        height: 205px;
    }

    :where(html[data-page-style~="individual-material"]) .orbit-small {
        width: 150px;
        height: 150px;
    }

    :where(html[data-page-style~="individual-material"]) .material-visual-label {
        right: 6%;
        bottom: 5px;
    }

    /* SECTIONS */
    :where(html[data-page-style~="individual-material"]) .material-section {
        padding:
            55px 0;
    }

    :where(html[data-page-style~="individual-material"]) .section-number {
        top: 0;
        font-size: 82px;
    }

    :where(html[data-page-style~="individual-material"]) .material-section-heading {
        margin-bottom: 25px;
    }

    :where(html[data-page-style~="individual-material"]) .section-kicker {
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    :where(html[data-page-style~="individual-material"]) .material-section-heading h2 {
        font-size: 29px;
    }

    :where(html[data-page-style~="individual-material"]) .material-section-heading p {
        font-size: 13px;
    }

    :where(html[data-page-style~="individual-material"]) .material-description {
        margin-bottom: 25px;
    }

    :where(html[data-page-style~="individual-material"]) .material-description p {
        font-size: 13.5px;
        line-height: 1.75;
    }

    /* TABLES */
    :where(html[data-page-style~="individual-material"]) .technical-table {
        min-width: 610px;
    }

    :where(html[data-page-style~="individual-material"]) .engineering-table {
        min-width: 650px;
    }

    :where(html[data-page-style~="individual-material"]) .technical-table th,
:where(html[data-page-style~="individual-material"]) .technical-table td {
        padding:
            13px 15px;
    }

    :where(html[data-page-style~="individual-material"]) .technical-table thead th {
        font-size: 11px;
    }

    :where(html[data-page-style~="individual-material"]) .technical-table tbody th,
:where(html[data-page-style~="individual-material"]) .technical-table tbody td {
        font-size: 11.8px;
    }

    :where(html[data-page-style~="individual-material"]) .material-note {
        font-size: 11.5px;
    }

}


/* SMALL MOBILE */
@media (max-width: 480px) {
    /* HERO */
    :where(html[data-page-style~="individual-material"]) .individual-material-hero {
        padding:
            48px 0 52px;
    }

    :where(html[data-page-style~="individual-material"]) .individual-material-hero h1 {
        font-size: 32px;
    }

    :where(html[data-page-style~="individual-material"]) .hero-material-data span {
        padding:
            0 11px;
    }

    :where(html[data-page-style~="individual-material"]) .material-hero-visual {
        min-height: 185px;
    }

    :where(html[data-page-style~="individual-material"]) .material-visual-number {
        font-size: 96px;
    }

    :where(html[data-page-style~="individual-material"]) .orbit-large {
        width: 180px;
        height: 180px;
    }

    :where(html[data-page-style~="individual-material"]) .orbit-small {
        width: 130px;
        height: 130px;
    }

    /* SECTIONS */
    :where(html[data-page-style~="individual-material"]) .material-section {
        padding:
            49px 0;
    }

    :where(html[data-page-style~="individual-material"]) .material-section-heading h2 {
        font-size: 27px;
    }

    /* TABLES */
    :where(html[data-page-style~="individual-material"]) .technical-table {
        min-width: 570px;
    }

    :where(html[data-page-style~="individual-material"]) .engineering-table {
        min-width: 620px;
    }

}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    :where(html[data-page-style~="individual-material"]) .material-breadcrumb a,
:where(html[data-page-style~="individual-material"]) .technical-table tbody tr {
        transition: none;
    }

}


/* Accessibility: kickers used on light material detail surfaces */
:where(html[data-page-style~="individual-material"]) .material-overview-section .section-kicker,
:where(html[data-page-style~="individual-material"]) .material-mechanical-section .section-kicker { color:#b04200; }


/* MATERIAL */

/* MATERIAL PAGE material.css */

/* VARIABLES */
:root:where([data-page-style~="material"]) {
    --material-dark: #17232f;
    --material-deep-dark: #111a21;
    --material-orange: #ff6b00;
    --material-orange-hover: #e85f00;
    --material-orange-soft: #fff3e8;
    --material-white: #ffffff;
    --material-light: #f7f8fa;
    --material-soft: #f3f4f5;
    --material-text: #222222;
    --material-muted: #666666;
    --material-border: #e5e5e5;
    --material-transition: 0.3s ease;
}


/* MATERIAL HERO */
:where(html[data-page-style~="material"]) .material-hero {
    position: relative;
    padding: 82px 0 86px;
    background:
        radial-gradient(
            circle at 80% 44%,
            rgba(255, 107, 0, 0.12),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #17232f 0%,
            #111a21 100%
        );
    overflow: hidden;
}

:where(html[data-page-style~="material"]) .material-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -310px;
    right: -145px;
    border:
        1px solid
        rgba(255, 255, 255, 0.045);
    border-radius: 50%;
}

:where(html[data-page-style~="material"]) .material-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -150px;
    bottom: -150px;
    border-radius: 50%;
    background:
        rgba(255, 107, 0, 0.035);
}

:where(html[data-page-style~="material"]) .material-hero .container {
    position: relative;
    z-index: 2;
}


/* HERO GRID */
:where(html[data-page-style~="material"]) .material-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(390px, 0.88fr);
    align-items: center;
    gap: 70px;
}


/* HERO CONTENT */
:where(html[data-page-style~="material"]) .material-hero .hero-content {
    max-width: 760px;
}

:where(html[data-page-style~="material"]) .material-hero .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin:
        0 0 21px;
    font-size: 15.5px;
    line-height: 1.5;
}

:where(html[data-page-style~="material"]) .material-hero .breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.84;
    transition:
        color var(--material-transition),
        opacity var(--material-transition);
}

:where(html[data-page-style~="material"]) .material-hero .breadcrumb a:hover {
    color:
        var(--material-orange);
    opacity: 1;
}

:where(html[data-page-style~="material"]) .material-hero .breadcrumb span {
    color:
        rgba(255, 255, 255, 0.40);
}

:where(html[data-page-style~="material"]) .material-hero .breadcrumb strong {
    color:
        var(--material-orange);
    font-weight: 600;
}

:where(html[data-page-style~="material"]) .material-hero .hero-subtitle {
    display: inline-block;
    margin-bottom: 13px;
    color:
        var(--material-orange);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

:where(html[data-page-style~="material"]) .material-hero h1 {
    max-width: 760px;
    margin:
        0 0 19px;
    color: #ffffff;
    font-size:
        clamp(42px, 5vw, 62px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1.2px;
}

:where(html[data-page-style~="material"]) .material-hero p {
    max-width: 680px;
    margin: 0;
    color:
        rgba(255, 255, 255, 0.70);
    font-size: 16px;
    line-height: 1.8;
}


/* HERO VISUAL */
:where(html[data-page-style~="material"]) .material-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 390px;
}


/* HERO RINGS */
:where(html[data-page-style~="material"]) .hero-visual-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

:where(html[data-page-style~="material"]) .ring-one {
    width: 330px;
    height: 330px;
    border:
        1px solid
        rgba(255, 255, 255, 0.07);
}

:where(html[data-page-style~="material"]) .ring-two {
    width: 385px;
    height: 385px;
    border:
        1px solid
        rgba(255, 255, 255, 0.035);
}

:where(html[data-page-style~="material"]) .ring-three {
    width: 440px;
    height: 440px;
    border:
        1px dashed
        rgba(255, 107, 0, 0.09);
}


/* GASKET VISUAL */
:where(html[data-page-style~="material"]) .gasket-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 290px;
    height: 290px;
    filter:
        drop-shadow(
            0 25px 38px
            rgba(0, 0, 0, 0.34)
        );
}


/* OUTER RING */
:where(html[data-page-style~="material"]) .gasket-outer-ring {
    position: absolute;
    width: 286px;
    height: 286px;
    border-radius: 50%;
    border:
        24px solid
        rgba(222, 226, 229, 0.20);
    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.10),
        0 0 0 1px
        rgba(255, 255, 255, 0.055),
        inset 0 -14px 25px
        rgba(0, 0, 0, 0.16);
}


/* WINDING */
:where(html[data-page-style~="material"]) .gasket-winding {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 215px;
    height: 215px;
    border-radius: 50%;
    background:
        repeating-conic-gradient(
            from 0deg,
            #d8dcdf 0deg 4deg,
            #ff6b00 4deg 7deg,
            #60686e 7deg 11deg,
            #ff6b00 11deg 14deg
        );
    box-shadow:
        inset 0 0 18px
        rgba(0, 0, 0, 0.38),
        0 0 26px
        rgba(255, 107, 0, 0.08);
}

:where(html[data-page-style~="material"]) .gasket-opening {
    width: 143px;
    height: 143px;
    border-radius: 50%;
    background:
        #17232f;
    box-shadow:
        inset 0 0 28px
        rgba(0, 0, 0, 0.40),
        0 0 0 1px
        rgba(255, 255, 255, 0.055);
}


/* INNER RING */
:where(html[data-page-style~="material"]) .gasket-inner-ring {
    position: absolute;
    width: 132px;
    height: 132px;
    border:
        14px solid
        rgba(220, 226, 230, 0.18);
    border-radius: 50%;
}


/* HERO TAGS */
:where(html[data-page-style~="material"]) .hero-material-tag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding:
        9px 13px;
    background:
        rgba(13, 21, 27, 0.88);
    border:
        1px solid
        rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.24);
    backdrop-filter:
        blur(10px);
    -webkit-backdrop-filter:
        blur(10px);
    color:
        rgba(255, 255, 255, 0.84);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

:where(html[data-page-style~="material"]) .hero-material-tag i {
    color:
        var(--material-orange);
    font-size: 12px;
}

:where(html[data-page-style~="material"]) .tag-one {
    top: 54px;
    left: 0;
}

:where(html[data-page-style~="material"]) .tag-two {
    right: -5px;
    top: 175px;
}

:where(html[data-page-style~="material"]) .tag-three {
    left: 24px;
    bottom: 46px;
}


/* MATERIAL CATEGORIES */
:where(html[data-page-style~="material"]) .material-categories {
    position: relative;
    padding:
        88px 0 94px;
    background:
        #ffffff;
    overflow: hidden;
}

:where(html[data-page-style~="material"]) .material-categories::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -250px;
    top: -180px;
    border-radius: 50%;
    border:
        1px solid
        rgba(17, 26, 33, 0.035);
    pointer-events: none;
}


/* SECTION TITLE */
:where(html[data-page-style~="material"]) .material-categories .section-title,
:where(html[data-page-style~="material"]) .selection-guide .section-title {
    position: relative;
    z-index: 2;
    max-width: 740px;
    margin:
        0 auto 45px;
    text-align: center;
}

:where(html[data-page-style~="material"]) .material-categories .section-title > span,
:where(html[data-page-style~="material"]) .selection-guide .section-title > span {
    display: inline-block;
    margin-bottom: 10px;
    color:
        var(--material-orange);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.7px;
}

:where(html[data-page-style~="material"]) .material-categories .section-title h2 {
    margin:
        0 0 12px;
    color:
        var(--material-text);
    font-size:
        clamp(33px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.7px;
}

:where(html[data-page-style~="material"]) .material-categories .section-title p {
    max-width: 650px;
    margin:
        0 auto;
    color:
        var(--material-muted);
    font-size: 15px;
    line-height: 1.7;
}


/* PREMIUM BENTO CATEGORY GRID */
:where(html[data-page-style~="material"]) .category-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        repeat(12, minmax(0, 1fr));
    gap: 20px;
}


/* GRID SIZING */
:where(html[data-page-style~="material"]) .category-wide {
    grid-column:
        span 7;
}

:where(html[data-page-style~="material"]) .category-narrow {
    grid-column:
        span 5;
}

:where(html[data-page-style~="material"]) .category-small {
    grid-column:
        span 4;
}


/* CATEGORY CARD */
:where(html[data-page-style~="material"]) .category-card {
    position: relative;
    display: flex;
    min-height: 245px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfbfb 100%
        );
    border:
        1px solid
        #e8e8e8;
    border-radius: 15px;
    overflow: hidden;
    box-shadow:
        0 12px 32px
        rgba(0, 0, 0, 0.045);
    transition:
        transform var(--material-transition),
        border-color var(--material-transition),
        box-shadow var(--material-transition);
}

:where(html[data-page-style~="material"]) .category-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background:
        var(--material-orange);
    transform:
        scaleY(0);
    transform-origin:
        bottom;
    transition:
        transform var(--material-transition);
}

:where(html[data-page-style~="material"]) .category-card:hover {
    transform:
        translateY(-5px);
    border-color:
        rgba(255, 107, 0, 0.24);
    box-shadow:
        0 20px 44px
        rgba(0, 0, 0, 0.075);
}

:where(html[data-page-style~="material"]) .category-card:hover::before {
    transform:
        scaleY(1);
}


/* CARD WATERMARK */
:where(html[data-page-style~="material"]) .card-watermark {
    position: absolute;
    right: -16px;
    bottom: -26px;
    color:
        #17232f;
    font-size: 130px;
    line-height: 1;
    opacity: 0.025;
    pointer-events: none;
    transform:
        rotate(-8deg);
    transition:
        opacity var(--material-transition),
        transform var(--material-transition);
}

:where(html[data-page-style~="material"]) .category-card:hover .card-watermark {
    opacity: 0.045;
    transform:
        rotate(-3deg)
        scale(1.04);
}


/* CATEGORY CONTENT */
:where(html[data-page-style~="material"]) .category-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding:
        28px;
}


/* CATEGORY TOP */
:where(html[data-page-style~="material"]) .category-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 23px;
}


/* CATEGORY ICON */
:where(html[data-page-style~="material"]) .category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    background:
        var(--material-orange-soft);
    border:
        1px solid
        rgba(255, 107, 0, 0.06);
    border-radius: 11px;
    color:
        var(--material-orange);
    font-size: 19px;
    transition:
        background var(--material-transition),
        color var(--material-transition),
        transform var(--material-transition);
}

:where(html[data-page-style~="material"]) .category-card:hover .category-icon {
    background:
        var(--material-orange);
    color:
        #ffffff;
    transform:
        translateY(-2px);
}


/* CATEGORY NUMBER */
:where(html[data-page-style~="material"]) .category-number {
    color:
        rgba(17, 26, 33, 0.11);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* CATEGORY TEXT */
:where(html[data-page-style~="material"]) .category-content h3 {
    max-width: 420px;
    margin:
        0 0 10px;
    color:
        #202020;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
}

:where(html[data-page-style~="material"]) .category-content p {
    max-width: 500px;
    margin:
        0 0 24px;
    color:
        #6a6a6a;
    font-size: 13.5px;
    line-height: 1.72;
}


/* CATEGORY LINK */
:where(html[data-page-style~="material"]) .category-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: auto;
    color:
        var(--material-orange);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition:
        color var(--material-transition),
        gap var(--material-transition);
}

:where(html[data-page-style~="material"]) .category-btn i {
    font-size: 11px;
    transition:
        transform var(--material-transition);
}

:where(html[data-page-style~="material"]) .category-btn:hover {
    color:
        var(--material-orange-hover);
    gap: 12px;
}

:where(html[data-page-style~="material"]) .category-btn:hover i {
    transform:
        translateX(3px);
}


/* MATERIAL SELECTION */
:where(html[data-page-style~="material"]) .selection-guide {
    position: relative;
    padding:
        82px 0 88px;
    background:
        #111a21;
    overflow: hidden;
}

:where(html[data-page-style~="material"]) .selection-guide::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    top: -290px;
    right: -170px;
    border-radius: 50%;
    border:
        1px solid
        rgba(255, 255, 255, 0.04);
}

:where(html[data-page-style~="material"]) .selection-guide::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    left: -170px;
    bottom: -180px;
    border-radius: 50%;
    background:
        rgba(255, 107, 0, 0.035);
}

:where(html[data-page-style~="material"]) .selection-guide .container {
    position: relative;
    z-index: 2;
}


/* SELECTION SECTION TITLE */
:where(html[data-page-style~="material"]) .selection-guide .section-title {
    margin-bottom: 42px;
}

:where(html[data-page-style~="material"]) .selection-guide .section-title h2 {
    margin:
        0 0 12px;
    color:
        #ffffff;
    font-size:
        clamp(33px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.7px;
}

:where(html[data-page-style~="material"]) .selection-guide .section-title p {
    margin: 0 auto;
    color:
        rgba(255, 255, 255, 0.57);
    font-size: 15px;
    line-height: 1.7;
}


/* GUIDE GRID */
:where(html[data-page-style~="material"]) .guide-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;
}


/* GUIDE CARD */
:where(html[data-page-style~="material"]) .guide-card {
    position: relative;
    padding:
        28px 22px;
    background:
        #ffffff;
    border:
        1px solid
        #e5e5e5;
    border-radius: 12px;
    text-align: center;
    transition:
        transform var(--material-transition),
        border-color var(--material-transition),
        box-shadow var(--material-transition);
}

:where(html[data-page-style~="material"]) .guide-card:hover {
    transform:
        translateY(-5px);
    border-color:
        rgba(255, 107, 0, 0.22);
    box-shadow:
        0 18px 36px
        rgba(0, 0, 0, 0.17);
}


/* GUIDE ICON */
:where(html[data-page-style~="material"]) .guide-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin:
        0 auto 17px;
    background:
        var(--material-orange-soft);
    border-radius: 50%;
    color:
        var(--material-orange);
    font-size: 19px;
    transition:
        background var(--material-transition),
        color var(--material-transition);
}

:where(html[data-page-style~="material"]) .guide-card:hover .guide-icon {
    background:
        var(--material-orange);
    color:
        #ffffff;
}


/* GUIDE TEXT */
:where(html[data-page-style~="material"]) .guide-card h3 {
    margin:
        0 0 9px;
    color:
        #222222;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

:where(html[data-page-style~="material"]) .guide-card p {
    margin: 0;
    color:
        #666666;
    font-size: 13px;
    line-height: 1.68;
}


/* LARGE TABLET */
@media (max-width: 1100px) {
    :where(html[data-page-style~="material"]) .material-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 0.8fr);
        gap: 45px;
    }

    :where(html[data-page-style~="material"]) .category-content {
        padding:
            25px;
    }

}


/* TABLET */
@media (max-width: 900px) {
    /* HERO */
    :where(html[data-page-style~="material"]) .material-hero {
        padding:
            72px 0 76px;
    }

    :where(html[data-page-style~="material"]) .material-hero-grid {
        grid-template-columns:
            1fr;
        gap: 42px;
    }

    :where(html[data-page-style~="material"]) .material-hero-visual {
        min-height: 330px;
    }

    /* MATERIAL GRID */
    :where(html[data-page-style~="material"]) .category-wide,
:where(html[data-page-style~="material"]) .category-narrow,
:where(html[data-page-style~="material"]) .category-small {
        grid-column:
            span 6;
    }

    /* SELECTION */
    :where(html[data-page-style~="material"]) .guide-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */
@media (max-width: 768px) {
    /* HERO */
    :where(html[data-page-style~="material"]) .material-hero {
        padding:
            58px 0 62px;
    }

    :where(html[data-page-style~="material"]) .material-hero-grid {
        gap: 34px;
    }

    :where(html[data-page-style~="material"]) .material-hero .breadcrumb {
        margin-bottom: 17px;
        font-size: 15.5px;
    }

    :where(html[data-page-style~="material"]) .material-hero .hero-subtitle {
        margin-bottom: 11px;
        font-size: 11.5px;
        letter-spacing: 1.4px;
    }

    :where(html[data-page-style~="material"]) .material-hero h1 {
        margin-bottom: 15px;
        font-size: 38px;
        line-height: 1.17;
        letter-spacing: -0.6px;
    }

    :where(html[data-page-style~="material"]) .material-hero p {
        font-size: 14.5px;
        line-height: 1.72;
    }

    /* HERO VISUAL */
    :where(html[data-page-style~="material"]) .material-hero-visual {
        min-height: 280px;
    }

    :where(html[data-page-style~="material"]) .ring-one {
        width: 240px;
        height: 240px;
    }

    :where(html[data-page-style~="material"]) .ring-two {
        width: 280px;
        height: 280px;
    }

    :where(html[data-page-style~="material"]) .ring-three {
        width: 320px;
        height: 320px;
    }

    :where(html[data-page-style~="material"]) .gasket-visual {
        width: 215px;
        height: 215px;
    }

    :where(html[data-page-style~="material"]) .gasket-outer-ring {
        width: 210px;
        height: 210px;
        border-width: 17px;
    }

    :where(html[data-page-style~="material"]) .gasket-winding {
        width: 158px;
        height: 158px;
    }

    :where(html[data-page-style~="material"]) .gasket-opening {
        width: 105px;
        height: 105px;
    }

    :where(html[data-page-style~="material"]) .gasket-inner-ring {
        width: 98px;
        height: 98px;
        border-width: 10px;
    }

    :where(html[data-page-style~="material"]) .hero-material-tag {
        padding:
            7px 10px;
        font-size: 10.5px;
    }

    :where(html[data-page-style~="material"]) .tag-one {
        top: 24px;
        left: 8%;
    }

    :where(html[data-page-style~="material"]) .tag-two {
        top: 125px;
        right: 5%;
    }

    :where(html[data-page-style~="material"]) .tag-three {
        left: 12%;
        bottom: 20px;
    }

    /* MATERIAL CATEGORIES */
    :where(html[data-page-style~="material"]) .material-categories {
        padding:
            62px 0 66px;
    }

    :where(html[data-page-style~="material"]) .material-categories .section-title,
:where(html[data-page-style~="material"]) .selection-guide .section-title {
        margin-bottom: 33px;
    }

    :where(html[data-page-style~="material"]) .material-categories .section-title > span,
:where(html[data-page-style~="material"]) .selection-guide .section-title > span {
        font-size: 11.5px;
        letter-spacing: 1.4px;
    }

    :where(html[data-page-style~="material"]) .material-categories .section-title h2,
:where(html[data-page-style~="material"]) .selection-guide .section-title h2 {
        font-size: 31px;
    }

    :where(html[data-page-style~="material"]) .material-categories .section-title p,
:where(html[data-page-style~="material"]) .selection-guide .section-title p {
        font-size: 14px;
    }

    /* BENTO GRID */
    :where(html[data-page-style~="material"]) .category-grid {
        grid-template-columns:
            1fr;
        gap: 15px;
    }

    :where(html[data-page-style~="material"]) .category-wide,
:where(html[data-page-style~="material"]) .category-narrow,
:where(html[data-page-style~="material"]) .category-small {
        grid-column:
            auto;
    }

    :where(html[data-page-style~="material"]) .category-card {
        min-height: auto;
    }

    :where(html[data-page-style~="material"]) .category-card:hover {
        transform: none;
    }

    :where(html[data-page-style~="material"]) .category-content {
        padding:
            23px;
    }

    :where(html[data-page-style~="material"]) .category-top {
        margin-bottom: 18px;
    }

    :where(html[data-page-style~="material"]) .category-icon {
        width: 46px;
        height: 46px;
        font-size: 18px;
    }

    :where(html[data-page-style~="material"]) .category-content h3 {
        font-size: 18.5px;
    }

    :where(html[data-page-style~="material"]) .category-content p {
        margin-bottom: 19px;
        font-size: 13.5px;
    }

    :where(html[data-page-style~="material"]) .card-watermark {
        font-size: 100px;
    }

    /* SELECTION GUIDE */
    :where(html[data-page-style~="material"]) .selection-guide {
        padding:
            62px 0 66px;
    }

    :where(html[data-page-style~="material"]) .guide-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    :where(html[data-page-style~="material"]) .guide-card {
        padding:
            24px 16px;
    }

    :where(html[data-page-style~="material"]) .guide-card:hover {
        transform: none;
    }

    :where(html[data-page-style~="material"]) .guide-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 15px;
        font-size: 17px;
    }

    :where(html[data-page-style~="material"]) .guide-card h3 {
        font-size: 15px;
    }

    :where(html[data-page-style~="material"]) .guide-card p {
        font-size: 12.5px;
    }

}


/* SMALL MOBILE */
@media (max-width: 480px) {
    /* HERO */
    :where(html[data-page-style~="material"]) .material-hero {
        padding:
            50px 0 54px;
    }

    :where(html[data-page-style~="material"]) .material-hero h1 {
        font-size: 33px;
    }

    :where(html[data-page-style~="material"]) .material-hero-visual {
        min-height: 240px;
    }

    :where(html[data-page-style~="material"]) .ring-one {
        width: 205px;
        height: 205px;
    }

    :where(html[data-page-style~="material"]) .ring-two {
        width: 238px;
        height: 238px;
    }

    :where(html[data-page-style~="material"]) .ring-three {
        width: 270px;
        height: 270px;
    }

    :where(html[data-page-style~="material"]) .gasket-visual {
        width: 182px;
        height: 182px;
    }

    :where(html[data-page-style~="material"]) .gasket-outer-ring {
        width: 178px;
        height: 178px;
        border-width: 14px;
    }

    :where(html[data-page-style~="material"]) .gasket-winding {
        width: 134px;
        height: 134px;
    }

    :where(html[data-page-style~="material"]) .gasket-opening {
        width: 89px;
        height: 89px;
    }

    :where(html[data-page-style~="material"]) .gasket-inner-ring {
        width: 83px;
        height: 83px;
        border-width: 8px;
    }

    :where(html[data-page-style~="material"]) .tag-one {
        left: 0;
        top: 13px;
    }

    :where(html[data-page-style~="material"]) .tag-two {
        right: 0;
        top: 104px;
    }

    :where(html[data-page-style~="material"]) .tag-three {
        left: 4%;
        bottom: 9px;
    }

    /* MATERIAL */
    :where(html[data-page-style~="material"]) .material-categories {
        padding:
            55px 0 58px;
    }

    :where(html[data-page-style~="material"]) .material-categories .section-title h2,
:where(html[data-page-style~="material"]) .selection-guide .section-title h2 {
        font-size: 28px;
    }

    :where(html[data-page-style~="material"]) .category-content {
        padding:
            21px;
    }

    /* SELECTION */
    :where(html[data-page-style~="material"]) .selection-guide {
        padding:
            55px 0 58px;
    }

    :where(html[data-page-style~="material"]) .guide-grid {
        grid-template-columns:
            1fr;
    }

    :where(html[data-page-style~="material"]) .guide-card {
        padding:
            26px 20px;
    }

    :where(html[data-page-style~="material"]) .guide-card h3 {
        font-size: 16px;
    }

    :where(html[data-page-style~="material"]) .guide-card p {
        font-size: 13px;
    }

}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    :where(html[data-page-style~="material"]) .category-card,
:where(html[data-page-style~="material"]) .category-card::before,
:where(html[data-page-style~="material"]) .category-icon,
:where(html[data-page-style~="material"]) .card-watermark,
:where(html[data-page-style~="material"]) .category-btn,
:where(html[data-page-style~="material"]) .category-btn i,
:where(html[data-page-style~="material"]) .guide-card,
:where(html[data-page-style~="material"]) .guide-icon,
:where(html[data-page-style~="material"]) .material-hero .breadcrumb a {
        transition: none;
    }

    :where(html[data-page-style~="material"]) .category-card:hover,
:where(html[data-page-style~="material"]) .guide-card:hover {
        transform: none;
    }

}


/* MATERIAL GRADE DIRECTORY */
:where(html[data-page-style~="material"]) .material-grade-directory {
    padding:72px 0;
    background:#f6f7f8;
}

:where(html[data-page-style~="material"]) .material-grade-groups {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    margin-top:34px;
}

:where(html[data-page-style~="material"]) .material-grade-group {
    padding:26px;
    background:#fff;
    border:1px solid #e7eaed;
    border-radius:14px;
}

:where(html[data-page-style~="material"]) .material-grade-group h3 {
    margin:0 0 16px;
    color:#17232f;
    font-size:18px;
}

:where(html[data-page-style~="material"]) .material-grade-links {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

:where(html[data-page-style~="material"]) .material-grade-link {
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:8px 12px;
    color:#17232f;
    background:#fff7ef;
    border:1px solid #f0d8c1;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    text-decoration:none;
    transition:transform .2s ease,border-color .2s ease,background .2s ease;
}

:where(html[data-page-style~="material"]) .material-grade-link:hover {
    transform:translateY(-1px);
    border-color:#ef7f1a;
    background:#fff;
}

@media (max-width:768px){
    :where(html[data-page-style~="material"]) .material-grade-directory {padding:54px 0;}

    :where(html[data-page-style~="material"]) .material-grade-groups {grid-template-columns:1fr;gap:16px;}

    :where(html[data-page-style~="material"]) .material-grade-group {padding:20px;}

}


/* Accessibility: section label on light material-categories surface */
:where(html[data-page-style~="material"]) .material-categories .section-title > span { color:#b04200; }


/* PRODUCT DETAILS */

/* FERROBEND PRODUCT DETAILS product-details.css Used by all individual product pages. CTA styling is intentionally NOT included here. Common CTA styling is handled by homepage.css. */

/* PRODUCT PAGE VARIABLES */
:root:where([data-page-style~="product-details"]) {
    --pd-dark: #17232f;
    --pd-dark-deep: #111a21;
    --pd-dark-soft: #232323;
    --pd-orange: #ff6b00;
    --pd-orange-hover: #e85f00;
    --pd-orange-soft: #fff3e8;
    --pd-orange-pale: #fff8f2;
    --pd-white: #ffffff;
    --pd-light-bg: #f5f6f7;
    --pd-soft-bg: #eef0f2;
    --pd-warm-bg: #fff8f2;
    --pd-text: #222222;
    --pd-muted: #5f656a;
    --pd-light-text: #777d82;
    --pd-border: #dedfe1;
    --pd-border-dark: rgba(255, 255, 255, 0.14);
    --pd-shadow-sm: 0 7px 20px rgba(23, 35, 47, 0.07);
    --pd-shadow-md: 0 12px 32px rgba(23, 35, 47, 0.11);
    --pd-shadow-lg: 0 20px 50px rgba(23, 35, 47, 0.15);
    --pd-radius-sm: 6px;
    --pd-radius-md: 9px;
    --pd-radius-lg: 14px;
    --pd-radius-xl: 20px;
    --pd-transition: 0.3s ease;
    --pd-content-width: 1380px;
}


/* GLOBAL PRODUCT PAGE RESET */
:where(html[data-page-style~="product-details"]) .product-hero *,
:where(html[data-page-style~="product-details"]) .quick-data *,
:where(html[data-page-style~="product-details"]) .overview *,
:where(html[data-page-style~="product-details"]) .construction-section *,
:where(html[data-page-style~="product-details"]) .properties-section *,
:where(html[data-page-style~="product-details"]) .features-section *,
:where(html[data-page-style~="product-details"]) .materials-section *,
:where(html[data-page-style~="product-details"]) .standards-section *,
:where(html[data-page-style~="product-details"]) .dimensions-section *,
:where(html[data-page-style~="product-details"]) .technical-table-section *,
:where(html[data-page-style~="product-details"]) .technical-spec-section *,
:where(html[data-page-style~="product-details"]) .performance-section *,
:where(html[data-page-style~="product-details"]) .applications-section *,
:where(html[data-page-style~="product-details"]) .installation-section *,
:where(html[data-page-style~="product-details"]) .storage-section *,
:where(html[data-page-style~="product-details"]) .quality-section *,
:where(html[data-page-style~="product-details"]) .inspection-section *,
:where(html[data-page-style~="product-details"]) .faq-section *,
:where(html[data-page-style~="product-details"]) .downloads-section * {
    box-sizing: border-box;
}


/* PRODUCT HERO */
:where(html[data-page-style~="product-details"]) .product-hero {
    position: relative;
    min-height: 515px;
    display: flex;
    align-items: center;
    padding: 82px 0 88px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 86% 43%,
            rgba(255, 107, 0, 0.16) 0,
            rgba(255, 107, 0, 0.08) 13%,
            transparent 34%
        ),
        radial-gradient(
            circle at 96% 90%,
            rgba(255, 255, 255, 0.06) 0,
            transparent 28%
        ),
        linear-gradient(
            112deg,
            #111a21 0%,
            #17232f 56%,
            #232323 100%
        );
}


/* Decorative ring */
:where(html[data-page-style~="product-details"]) .product-hero::before {
    content: "";
    position: absolute;
    width: 540px;
    height: 540px;
    top: 50%;
    right: -185px;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 107, 0, 0.20);
    border-radius: 50%;
    box-shadow:
        0 0 0 72px rgba(255, 107, 0, 0.025),
        0 0 0 145px rgba(255, 255, 255, 0.018);
    pointer-events: none;
}

:where(html[data-page-style~="product-details"]) .product-hero::after {
    content: "";
    position: absolute;
    width: 285px;
    height: 285px;
    right: 115px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    pointer-events: none;
}


/* Hero overlay */
:where(html[data-page-style~="product-details"]) .product-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(17, 26, 33, 0.18),
            rgba(17, 26, 33, 0.02)
        );
    pointer-events: none;
}


/* Hero container */
:where(html[data-page-style~="product-details"]) .product-hero .container {
    position: relative;
    z-index: 2;
}


/* Hero content */
:where(html[data-page-style~="product-details"]) .product-hero .hero-content {
    position: relative;
    max-width: 980px;
}


/* BREADCRUMB ALWAYS 15.5PX — DESKTOP + MOBILE */
:where(html[data-page-style~="product-details"]) .product-hero .breadcrumb,
:where(html[data-page-style~="product-details"]) .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.5;
}

:where(html[data-page-style~="product-details"]) .product-hero .breadcrumb a,
:where(html[data-page-style~="product-details"]) .breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.84;
    transition:
        color var(--pd-transition),
        opacity var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .product-hero .breadcrumb a:hover,
:where(html[data-page-style~="product-details"]) .breadcrumb a:hover {
    color: var(--pd-orange);
    opacity: 1;
}

:where(html[data-page-style~="product-details"]) .product-hero .breadcrumb > span:not(:last-child),
:where(html[data-page-style~="product-details"]) .breadcrumb > span:not(:last-child) {
    color: rgba(255, 255, 255, 0.38);
}

:where(html[data-page-style~="product-details"]) .product-hero .breadcrumb > span:last-child,
:where(html[data-page-style~="product-details"]) .breadcrumb > span:last-child {
    color: var(--pd-orange);
}


/* PRODUCT SERIES LABEL */
:where(html[data-page-style~="product-details"]) .product-series {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 7px 15px;
    color: var(--pd-orange);
    background: rgba(255, 107, 0, 0.10);
    border: 1px solid rgba(255, 107, 0, 0.35);
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.35px;
    line-height: 1.4;
}


/* PRODUCT HERO HEADING */
:where(html[data-page-style~="product-details"]) .product-hero h1 {
    max-width: 920px;
    margin: 0 0 19px;
    color: #ffffff;
    font-size: clamp(44px, 3vw, 70px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -1.5px;
}

:where(html[data-page-style~="product-details"]) .product-hero .hero-content > p {
    max-width: 850px;
    margin: 0 0 27px;
    color: rgba(255, 255, 255, 0.81);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.72;
}


/* PRODUCT HERO BUTTONS */
:where(html[data-page-style~="product-details"]) .product-hero .hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

:where(html[data-page-style~="product-details"]) .product-hero .btn {
    min-height: 51px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 25px;
    border-radius: var(--pd-radius-sm);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background var(--pd-transition),
        color var(--pd-transition),
        border-color var(--pd-transition),
        transform var(--pd-transition);
}


/* Primary hero button */
:where(html[data-page-style~="product-details"]) .product-hero .primary-btn {
    color: #ffffff;
    background: var(--pd-orange);
    border: 1px solid var(--pd-orange);
}

:where(html[data-page-style~="product-details"]) .product-hero .primary-btn:hover {
    background: var(--pd-orange-hover);
    border-color: var(--pd-orange-hover);
    transform: translateY(-2px);
}


/* Secondary hero button */
:where(html[data-page-style~="product-details"]) .product-hero .secondary-btn {
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.36);
}

:where(html[data-page-style~="product-details"]) .product-hero .secondary-btn:hover {
    color: var(--pd-dark);
    background: #ffffff;
    border-color: #ffffff;
    transform: translateY(-2px);
}


/* QUICK DATA */
:where(html[data-page-style~="product-details"]) .quick-data {
    position: relative;
    z-index: 4;
    margin-top: -32px;
}

:where(html[data-page-style~="product-details"]) .quick-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: #ffffff;
    border: 1px solid var(--pd-border);
    border-top: 4px solid var(--pd-orange);
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow-lg);
    overflow: hidden;
}

:where(html[data-page-style~="product-details"]) .quick-card {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 18px 14px;
    text-align: center;
    border-right: 1px solid var(--pd-border);
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafafa 100%
        );
}

:where(html[data-page-style~="product-details"]) .quick-card:last-child {
    border-right: none;
}

:where(html[data-page-style~="product-details"]) .quick-card h4,
:where(html[data-page-style~="product-details"]) .quick-card .quick-label {
    margin: 0 0 6px;
    color: var(--pd-dark);
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.4;
}

:where(html[data-page-style~="product-details"]) .quick-card p {
    margin: 0;
    color: var(--pd-orange);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
}


/* COMMON PRODUCT SECTION HEADING */
:where(html[data-page-style~="product-details"]) .product-details-page .section-heading,
:where(html[data-page-style~="product-details"]) section .section-heading {
    max-width: 820px;
    margin: 0 auto 36px;
    text-align: center;
}

:where(html[data-page-style~="product-details"]) .section-heading > span {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--pd-orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.45px;
    line-height: 1.5;
    text-transform: uppercase;
}

:where(html[data-page-style~="product-details"]) .section-heading h2 {
    margin: 0 0 12px;
    color: var(--pd-dark);
    font-size: clamp(33px, 3.8vw, 47px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.8px;
}

:where(html[data-page-style~="product-details"]) .section-heading p {
    max-width: 800px;
    margin: 0 auto;
    color: var(--pd-muted);
    font-size: 15.5px;
    line-height: 1.72;
}


/* COMMON SECTION SPACING */
:where(html[data-page-style~="product-details"]) .overview,
:where(html[data-page-style~="product-details"]) .construction-section,
:where(html[data-page-style~="product-details"]) .properties-section,
:where(html[data-page-style~="product-details"]) .features-section,
:where(html[data-page-style~="product-details"]) .materials-section,
:where(html[data-page-style~="product-details"]) .standards-section,
:where(html[data-page-style~="product-details"]) .dimensions-section,
:where(html[data-page-style~="product-details"]) .technical-table-section,
:where(html[data-page-style~="product-details"]) .technical-spec-section,
:where(html[data-page-style~="product-details"]) .performance-section,
:where(html[data-page-style~="product-details"]) .applications-section,
:where(html[data-page-style~="product-details"]) .installation-section,
:where(html[data-page-style~="product-details"]) .storage-section,
:where(html[data-page-style~="product-details"]) .quality-section,
:where(html[data-page-style~="product-details"]) .inspection-section,
:where(html[data-page-style~="product-details"]) .faq-section,
:where(html[data-page-style~="product-details"]) .downloads-section {
    padding: 68px 0;
}


/* OVERVIEW */
:where(html[data-page-style~="product-details"]) .overview {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffaf5 100%
        );
}

:where(html[data-page-style~="product-details"]) .overview-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);
    gap: 52px;
    align-items: center;
}

:where(html[data-page-style~="product-details"]) .overview-image {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background:
        radial-gradient(
            circle at center,
            rgba(255, 107, 0, 0.08),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #f3f4f5 0%,
            #fff8f2 100%
        );
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-xl);
    box-shadow: var(--pd-shadow-md);
    overflow: hidden;
}

:where(html[data-page-style~="product-details"]) .overview-image::before {
    content: "";
    position: absolute;
    width: 285px;
    height: 285px;
    border: 1px solid rgba(255, 107, 0, 0.16);
    border-radius: 50%;
}

:where(html[data-page-style~="product-details"]) .overview-image::after {
    content: "";
    position: absolute;
    width: 195px;
    height: 195px;
    border: 1px solid rgba(23, 35, 47, 0.09);
    border-radius: 50%;
}

:where(html[data-page-style~="product-details"]) .overview-image img {
    position: relative;
    z-index: 2;
    display: block;
    width: auto;
    max-width: 88%;
    max-height: 325px;
    object-fit: contain;
}


/* Overview text */
:where(html[data-page-style~="product-details"]) .overview-content > span {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--pd-orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.45px;
    line-height: 1.5;
    text-transform: uppercase;
}

:where(html[data-page-style~="product-details"]) .overview-content h2 {
    margin: 0 0 15px;
    color: var(--pd-dark);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.85px;
}

:where(html[data-page-style~="product-details"]) .overview-content p {
    margin: 0 0 14px;
    color: var(--pd-muted);
    font-size: 15.5px;
    line-height: 1.82;
}

:where(html[data-page-style~="product-details"]) .overview-content p:last-child {
    margin-bottom: 0;
}


/* CONSTRUCTION DARK SECTION */
:where(html[data-page-style~="product-details"]) .construction-section {
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(255, 107, 0, 0.09),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #111a21 0%,
            #17232f 70%,
            #20272d 100%
        );
}

:where(html[data-page-style~="product-details"]) .construction-section .section-heading h2,
:where(html[data-page-style~="product-details"]) .construction-section .section-heading p {
    color: #ffffff;
}

:where(html[data-page-style~="product-details"]) .construction-section .section-heading p {
    color: rgba(255, 255, 255, 0.70);
}

:where(html[data-page-style~="product-details"]) .construction-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

:where(html[data-page-style~="product-details"]) .construction-card {
    padding: 27px 23px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 3px solid rgba(255, 107, 0, 0.72);
    border-radius: var(--pd-radius-lg);
    box-shadow: none;
    transition:
        transform var(--pd-transition),
        background var(--pd-transition),
        border-color var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .construction-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 107, 0, 0.55);
}

:where(html[data-page-style~="product-details"]) .construction-card .icon-box {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    color: #ffffff;
    background: rgba(255, 107, 0, 0.16);
    border: 1px solid rgba(255, 107, 0, 0.28);
    border-radius: 50%;
    font-size: 21px;
}

:where(html[data-page-style~="product-details"]) .construction-card h3 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 650;
    line-height: 1.4;
}

:where(html[data-page-style~="product-details"]) .construction-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.69);
    font-size: 14.5px;
    line-height: 1.72;
}


/* PROPERTIES */
:where(html[data-page-style~="product-details"]) .properties-section {
    background: #ffffff;
}

:where(html[data-page-style~="product-details"]) .properties-table {
    width: 100%;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    overflow-x: auto;
    box-shadow: var(--pd-shadow-sm);
}

:where(html[data-page-style~="product-details"]) .properties-table table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    background: #ffffff;
}

:where(html[data-page-style~="product-details"]) .properties-table th {
    padding: 15px 20px;
    color: #ffffff;
    background: var(--pd-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}

:where(html[data-page-style~="product-details"]) .properties-table td {
    padding: 14px 20px;
    color: #444444;
    font-size: 14.5px;
    line-height: 1.55;
    border-top: 1px solid var(--pd-border);
}

:where(html[data-page-style~="product-details"]) .properties-table tr td:first-child {
    width: 34%;
    color: var(--pd-dark);
    font-weight: 600;
}

:where(html[data-page-style~="product-details"]) .properties-table tbody tr {
    transition: background var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .properties-table tbody tr:nth-child(even) {
    background: #fafafa;
}

:where(html[data-page-style~="product-details"]) .properties-table tbody tr:hover {
    background: var(--pd-warm-bg);
}


/* FEATURES */
:where(html[data-page-style~="product-details"]) .features-section {
    background:
        linear-gradient(
            180deg,
            #f1f3f4 0%,
            #f8f9fa 100%
        );
}

:where(html[data-page-style~="product-details"]) .features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

:where(html[data-page-style~="product-details"]) .feature-item {
    min-height: 68px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px 18px;
    background: #ffffff;
    border: 1px solid var(--pd-border);
    border-left: 3px solid transparent;
    border-radius: var(--pd-radius-md);
    transition:
        border-color var(--pd-transition),
        box-shadow var(--pd-transition),
        transform var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .feature-item:hover {
    border-left-color: var(--pd-orange);
    box-shadow: var(--pd-shadow-sm);
    transform: translateY(-2px);
}

:where(html[data-page-style~="product-details"]) .feature-item > i {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: #ffffff;
    background: var(--pd-orange);
    border-radius: 50%;
    font-size: 10px;
}

:where(html[data-page-style~="product-details"]) .feature-item p {
    margin: 0;
    color: #444444;
    font-size: 14.5px;
    line-height: 1.62;
}


/* MATERIALS */
:where(html[data-page-style~="product-details"]) .materials-section {
    background:
        linear-gradient(
            145deg,
            #fff8f2 0%,
            #ffffff 70%
        );
}

:where(html[data-page-style~="product-details"]) .materials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

:where(html[data-page-style~="product-details"]) .material-card {
    padding: 27px 24px;
    background: #ffffff;
    border: 1px solid #e4ddd7;
    border-top: 3px solid var(--pd-orange);
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow-sm);
}

:where(html[data-page-style~="product-details"]) .material-card h3 {
    margin: 0 0 16px;
    color: var(--pd-dark);
    font-size: 20px;
    font-weight: 650;
    line-height: 1.4;
}

:where(html[data-page-style~="product-details"]) .material-card ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(html[data-page-style~="product-details"]) .material-card li {
    position: relative;
    padding-left: 16px;
    color: var(--pd-muted);
    font-size: 14px;
    line-height: 1.55;
}

:where(html[data-page-style~="product-details"]) .material-card li::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    top: 8px;
    left: 0;
    background: var(--pd-orange);
    border-radius: 50%;
}


/* STANDARDS DARK SECTION */
:where(html[data-page-style~="product-details"]) .standards-section {
    background:
        linear-gradient(
            140deg,
            #17232f 0%,
            #111a21 100%
        );
}

:where(html[data-page-style~="product-details"]) .standards-section .section-heading h2,
:where(html[data-page-style~="product-details"]) .standards-section .section-heading p {
    color: #ffffff;
}

:where(html[data-page-style~="product-details"]) .standards-section .section-heading p {
    color: rgba(255, 255, 255, 0.70);
}

:where(html[data-page-style~="product-details"]) .standards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

:where(html[data-page-style~="product-details"]) .standard-card {
    padding: 26px 22px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-bottom: 3px solid rgba(255, 107, 0, 0.70);
    border-radius: var(--pd-radius-lg);
    text-align: center;
    transition:
        transform var(--pd-transition),
        background var(--pd-transition),
        border-color var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .standard-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 107, 0, 0.45);
}

:where(html[data-page-style~="product-details"]) .standard-card h3 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.4;
}

:where(html[data-page-style~="product-details"]) .standard-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.72;
}


/* DIMENSIONS */
:where(html[data-page-style~="product-details"]) .dimensions-section {
    background: #ffffff;
}

:where(html[data-page-style~="product-details"]) .dimension-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

:where(html[data-page-style~="product-details"]) .dimension-card {
    padding: 27px 24px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8f9fa 100%
        );
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow-sm);
    transition:
        transform var(--pd-transition),
        box-shadow var(--pd-transition),
        border-color var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .dimension-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 107, 0, 0.36);
    box-shadow: var(--pd-shadow-md);
}

:where(html[data-page-style~="product-details"]) .dimension-card > i {
    width: 53px;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--pd-orange);
    background: var(--pd-orange-soft);
    border: 1px solid rgba(255, 107, 0, 0.14);
    border-radius: 50%;
    font-size: 19px;
}

:where(html[data-page-style~="product-details"]) .dimension-card h3 {
    margin: 0 0 9px;
    color: var(--pd-dark);
    font-size: 19px;
    font-weight: 650;
    line-height: 1.4;
}

:where(html[data-page-style~="product-details"]) .dimension-card p {
    margin: 0 0 14px;
    color: var(--pd-muted);
    font-size: 14px;
    line-height: 1.72;
}

:where(html[data-page-style~="product-details"]) .dimension-card ul {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(html[data-page-style~="product-details"]) .dimension-card li {
    position: relative;
    padding-left: 16px;
    color: #444444;
    font-size: 14px;
    line-height: 1.5;
}

:where(html[data-page-style~="product-details"]) .dimension-card li::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    top: 8px;
    left: 0;
    background: var(--pd-orange);
    border-radius: 50%;
}


/* TECHNICAL TABLE */
:where(html[data-page-style~="product-details"]) .technical-table-section {
    background: var(--pd-light-bg);
}

:where(html[data-page-style~="product-details"]) .table-wrapper {
    width: 100%;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    overflow-x: auto;
    box-shadow: var(--pd-shadow-sm);
}

:where(html[data-page-style~="product-details"]) .technical-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #ffffff;
}

:where(html[data-page-style~="product-details"]) .technical-table th {
    padding: 15px 20px;
    color: #ffffff;
    background: var(--pd-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}

:where(html[data-page-style~="product-details"]) .technical-table td {
    padding: 14px 20px;
    color: #444444;
    font-size: 14px;
    line-height: 1.55;
    border-top: 1px solid var(--pd-border);
}

:where(html[data-page-style~="product-details"]) .technical-table tbody tr {
    transition: background var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .technical-table tbody tr:nth-child(even) {
    background: #fafafa;
}

:where(html[data-page-style~="product-details"]) .technical-table tbody tr:hover {
    background: var(--pd-warm-bg);
}

:where(html[data-page-style~="product-details"]) .technical-table tbody td:first-child {
    color: var(--pd-dark);
    font-weight: 600;
}


/* TECHNICAL SPECIFICATIONS DARK SECTION */
:where(html[data-page-style~="product-details"]) .technical-spec-section {
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(255, 107, 0, 0.10),
            transparent 25%
        ),
        #17232f;
}

:where(html[data-page-style~="product-details"]) .technical-spec-section .section-heading h2,
:where(html[data-page-style~="product-details"]) .technical-spec-section .section-heading p {
    color: #ffffff;
}

:where(html[data-page-style~="product-details"]) .technical-spec-section .section-heading p {
    color: rgba(255, 255, 255, 0.70);
}

:where(html[data-page-style~="product-details"]) .spec-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

:where(html[data-page-style~="product-details"]) .spec-card {
    padding: 27px 23px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid rgba(255, 107, 0, 0.62);
    border-radius: var(--pd-radius-lg);
    transition:
        transform var(--pd-transition),
        background var(--pd-transition),
        border-color var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .spec-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.085);
    border-color: rgba(255, 107, 0, 0.46);
}

:where(html[data-page-style~="product-details"]) .spec-card h3 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.4;
}

:where(html[data-page-style~="product-details"]) .spec-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.69);
    font-size: 14px;
    line-height: 1.72;
}


/* PERFORMANCE DARK SECTION */
:where(html[data-page-style~="product-details"]) .performance-section {
    background:
        linear-gradient(
            140deg,
            #fff3e8 0%,
            #fff8f2 45%,
            #f5f6f7 100%
        );
}

:where(html[data-page-style~="product-details"]) .performance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

:where(html[data-page-style~="product-details"]) .performance-card {
    padding: 27px 23px;
    background: #ffffff;
    border: 1px solid #e4ddd7;
    border-top: 3px solid var(--pd-orange);
    border-radius: var(--pd-radius-lg);
    text-align: center;
    box-shadow: var(--pd-shadow-sm);
    transition:
        transform var(--pd-transition),
        box-shadow var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .performance-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pd-shadow-md);
}

:where(html[data-page-style~="product-details"]) .performance-card > i {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 17px;
    color: var(--pd-orange);
    background: var(--pd-orange-soft);
    border-radius: 50%;
    font-size: 21px;
}

:where(html[data-page-style~="product-details"]) .performance-card h3 {
    margin: 0 0 9px;
    color: var(--pd-dark);
    font-size: 19px;
    font-weight: 650;
    line-height: 1.4;
}

:where(html[data-page-style~="product-details"]) .performance-card p {
    margin: 0;
    color: var(--pd-muted);
    font-size: 14px;
    line-height: 1.72;
}


/* APPLICATIONS */
:where(html[data-page-style~="product-details"]) .applications-section {
    background: #ffffff;
}

:where(html[data-page-style~="product-details"]) .applications-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

:where(html[data-page-style~="product-details"]) .application-card {
    position: relative;
    padding: 27px 23px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f6f7f8 100%
        );
    border: 1px solid var(--pd-border);
    border-left: 3px solid transparent;
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow-sm);
    transition:
        transform var(--pd-transition),
        border-color var(--pd-transition),
        box-shadow var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .application-card:hover {
    transform: translateY(-4px);
    border-left-color: var(--pd-orange);
    box-shadow: var(--pd-shadow-md);
}

:where(html[data-page-style~="product-details"]) .application-card > i {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    color: var(--pd-orange);
    background: var(--pd-orange-soft);
    border-radius: 50%;
    font-size: 20px;
}

:where(html[data-page-style~="product-details"]) .application-card h3 {
    margin: 0 0 9px;
    color: var(--pd-dark);
    font-size: 19px;
    font-weight: 650;
    line-height: 1.4;
}

:where(html[data-page-style~="product-details"]) .application-card p {
    margin: 0;
    color: var(--pd-muted);
    font-size: 14px;
    line-height: 1.72;
}


/* INSTALLATION */
:where(html[data-page-style~="product-details"]) .installation-section {
    background: var(--pd-light-bg);
}

:where(html[data-page-style~="product-details"]) .installation-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

:where(html[data-page-style~="product-details"]) .installation-card {
    position: relative;
    padding: 27px 23px 25px;
    background: #ffffff;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow-sm);
}

:where(html[data-page-style~="product-details"]) .step-number {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    color: #ffffff;
    background: var(--pd-orange);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    box-shadow: 0 7px 18px rgba(255, 107, 0, 0.22);
}

:where(html[data-page-style~="product-details"]) .installation-card h3 {
    margin: 0 0 9px;
    color: var(--pd-dark);
    font-size: 19px;
    font-weight: 650;
    line-height: 1.4;
}

:where(html[data-page-style~="product-details"]) .installation-card p {
    margin: 0;
    color: var(--pd-muted);
    font-size: 14px;
    line-height: 1.72;
}


/* STORAGE */
:where(html[data-page-style~="product-details"]) .storage-section {
    background:
        linear-gradient(
            145deg,
            #fff8f2 0%,
            #ffffff 75%
        );
}

:where(html[data-page-style~="product-details"]) .storage-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

:where(html[data-page-style~="product-details"]) .storage-box {
    padding: 27px 23px;
    background: #ffffff;
    border: 1px solid #e4ddd7;
    border-top: 3px solid var(--pd-orange);
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow-sm);
}

:where(html[data-page-style~="product-details"]) .storage-box > i {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    color: var(--pd-orange);
    background: var(--pd-orange-soft);
    border-radius: 50%;
    font-size: 20px;
}

:where(html[data-page-style~="product-details"]) .storage-box h3 {
    margin: 0 0 9px;
    color: var(--pd-dark);
    font-size: 19px;
    font-weight: 650;
    line-height: 1.4;
}

:where(html[data-page-style~="product-details"]) .storage-box p {
    margin: 0;
    color: var(--pd-muted);
    font-size: 14px;
    line-height: 1.72;
}


/* QUALITY DARK SECTION */
:where(html[data-page-style~="product-details"]) .quality-section {
    background:
        linear-gradient(
            135deg,
            #111a21 0%,
            #17232f 65%,
            #20282f 100%
        );
}

:where(html[data-page-style~="product-details"]) .quality-section .section-heading h2,
:where(html[data-page-style~="product-details"]) .quality-section .section-heading p {
    color: #ffffff;
}

:where(html[data-page-style~="product-details"]) .quality-section .section-heading p {
    color: rgba(255, 255, 255, 0.70);
}

:where(html[data-page-style~="product-details"]) .quality-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

:where(html[data-page-style~="product-details"]) .quality-card {
    padding: 27px 23px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 3px solid rgba(255, 107, 0, 0.72);
    border-radius: var(--pd-radius-lg);
    text-align: center;
    transition:
        transform var(--pd-transition),
        background var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .quality-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.09);
}

:where(html[data-page-style~="product-details"]) .quality-card > i {
    width: 59px;
    height: 59px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 17px;
    color: var(--pd-orange);
    background: rgba(255, 107, 0, 0.13);
    border: 1px solid rgba(255, 107, 0, 0.22);
    border-radius: 50%;
    font-size: 21px;
}

:where(html[data-page-style~="product-details"]) .quality-card h3 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.4;
}

:where(html[data-page-style~="product-details"]) .quality-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.72;
}


/* INSPECTION TABLE */
:where(html[data-page-style~="product-details"]) .inspection-section {
    background: #ffffff;
}

:where(html[data-page-style~="product-details"]) .inspection-table-wrapper {
    width: 100%;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    overflow-x: auto;
    box-shadow: var(--pd-shadow-sm);
}

:where(html[data-page-style~="product-details"]) .inspection-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    background: #ffffff;
}

:where(html[data-page-style~="product-details"]) .inspection-table th {
    padding: 15px 20px;
    color: #ffffff;
    background: var(--pd-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}

:where(html[data-page-style~="product-details"]) .inspection-table td {
    padding: 14px 20px;
    color: #444444;
    font-size: 14px;
    line-height: 1.55;
    border-top: 1px solid var(--pd-border);
}

:where(html[data-page-style~="product-details"]) .inspection-table tbody tr {
    transition: background var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .inspection-table tbody tr:nth-child(even) {
    background: #fafafa;
}

:where(html[data-page-style~="product-details"]) .inspection-table tbody tr:hover {
    background: var(--pd-warm-bg);
}

:where(html[data-page-style~="product-details"]) .inspection-table tbody td:first-child {
    width: 30%;
    color: var(--pd-dark);
    font-weight: 600;
}


/* FAQ */
:where(html[data-page-style~="product-details"]) .faq-section {
    background:
        linear-gradient(
            180deg,
            #f4f5f6 0%,
            #fafafa 100%
        );
}

:where(html[data-page-style~="product-details"]) .faq-container {
    max-width: 980px;
    margin: 0 auto;
}

:where(html[data-page-style~="product-details"]) .faq-item {
    padding: 21px 24px;
    margin-bottom: 10px;
    background: #ffffff;
    border: 1px solid var(--pd-border);
    border-left: 3px solid transparent;
    border-radius: var(--pd-radius-md);
    box-shadow: var(--pd-shadow-sm);
    transition:
        border-color var(--pd-transition),
        box-shadow var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .faq-item:hover {
    border-left-color: var(--pd-orange);
    box-shadow: var(--pd-shadow-md);
}

:where(html[data-page-style~="product-details"]) .faq-item:last-child {
    margin-bottom: 0;
}

:where(html[data-page-style~="product-details"]) .faq-item h3 {
    position: relative;
    margin: 0 0 8px;
    padding-left: 24px;
    color: var(--pd-dark);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.5;
}

:where(html[data-page-style~="product-details"]) .faq-item h3::before {
    content: "?";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--pd-orange);
    font-weight: 700;
}

:where(html[data-page-style~="product-details"]) .faq-item p {
    margin: 0;
    color: var(--pd-muted);
    font-size: 14.5px;
    line-height: 1.76;
}


/* DOWNLOADS DARK SECTION */
:where(html[data-page-style~="product-details"]) .downloads-section {
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255, 107, 0, 0.09),
            transparent 24%
        ),
        var(--pd-dark);
}

:where(html[data-page-style~="product-details"]) .downloads-section .section-heading h2,
:where(html[data-page-style~="product-details"]) .downloads-section .section-heading p {
    color: #ffffff;
}

:where(html[data-page-style~="product-details"]) .downloads-section .section-heading p {
    color: rgba(255, 255, 255, 0.70);
}

:where(html[data-page-style~="product-details"]) .downloads-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

:where(html[data-page-style~="product-details"]) .download-card {
    padding: 27px 23px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 3px solid var(--pd-orange);
    border-radius: var(--pd-radius-lg);
    text-align: center;
    box-shadow: var(--pd-shadow-sm);
    transition:
        transform var(--pd-transition),
        box-shadow var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .download-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pd-shadow-md);
}

:where(html[data-page-style~="product-details"]) .download-card > i {
    width: 59px;
    height: 59px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 17px;
    color: var(--pd-orange);
    background: var(--pd-orange-soft);
    border-radius: 50%;
    font-size: 22px;
}

:where(html[data-page-style~="product-details"]) .download-card h3 {
    margin: 0 0 9px;
    color: var(--pd-dark);
    font-size: 19px;
    font-weight: 650;
    line-height: 1.4;
}

:where(html[data-page-style~="product-details"]) .download-card p {
    min-height: 63px;
    margin: 0 0 18px;
    color: var(--pd-muted);
    font-size: 14px;
    line-height: 1.72;
}

:where(html[data-page-style~="product-details"]) .download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 17px;
    color: #ffffff;
    background: var(--pd-dark);
    border: 1px solid var(--pd-dark);
    border-radius: var(--pd-radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background var(--pd-transition),
        border-color var(--pd-transition),
        transform var(--pd-transition);
}

:where(html[data-page-style~="product-details"]) .download-btn:hover {
    background: var(--pd-orange);
    border-color: var(--pd-orange);
    transform: translateY(-2px);
}


/* TABLET */
@media (max-width: 1100px) {
    :where(html[data-page-style~="product-details"]) .product-hero {
        min-height: 485px;
        padding: 75px 0 80px;
    }

    :where(html[data-page-style~="product-details"]) .product-hero::before {
        width: 440px;
        height: 440px;
        right: -210px;
    }

    :where(html[data-page-style~="product-details"]) .product-hero::after {
        width: 230px;
        height: 230px;
        right: 70px;
    }

    :where(html[data-page-style~="product-details"]) .product-hero h1 {
        font-size: 54px;
    }

    :where(html[data-page-style~="product-details"]) .product-hero .hero-content > p {
        font-size: 16px;
    }

    :where(html[data-page-style~="product-details"]) .quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    :where(html[data-page-style~="product-details"]) .quick-card:nth-child(3) {
        border-right: none;
    }

    :where(html[data-page-style~="product-details"]) .quick-card:nth-child(n + 4) {
        border-top: 1px solid var(--pd-border);
    }

    :where(html[data-page-style~="product-details"]) .overview-grid {
        gap: 38px;
    }

    :where(html[data-page-style~="product-details"]) .overview-image {
        min-height: 350px;
    }

    :where(html[data-page-style~="product-details"]) .construction-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-page-style~="product-details"]) .standards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-page-style~="product-details"]) .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-page-style~="product-details"]) .performance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-page-style~="product-details"]) .spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-page-style~="product-details"]) .quality-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-page-style~="product-details"]) .downloads-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-page-style~="product-details"]) .applications-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-page-style~="product-details"]) .installation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-page-style~="product-details"]) .materials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-page-style~="product-details"]) .dimension-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-page-style~="product-details"]) .storage-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-page-style~="product-details"]) .overview,
:where(html[data-page-style~="product-details"]) .construction-section,
:where(html[data-page-style~="product-details"]) .properties-section,
:where(html[data-page-style~="product-details"]) .features-section,
:where(html[data-page-style~="product-details"]) .materials-section,
:where(html[data-page-style~="product-details"]) .standards-section,
:where(html[data-page-style~="product-details"]) .dimensions-section,
:where(html[data-page-style~="product-details"]) .technical-table-section,
:where(html[data-page-style~="product-details"]) .technical-spec-section,
:where(html[data-page-style~="product-details"]) .performance-section,
:where(html[data-page-style~="product-details"]) .applications-section,
:where(html[data-page-style~="product-details"]) .installation-section,
:where(html[data-page-style~="product-details"]) .storage-section,
:where(html[data-page-style~="product-details"]) .quality-section,
:where(html[data-page-style~="product-details"]) .inspection-section,
:where(html[data-page-style~="product-details"]) .faq-section,
:where(html[data-page-style~="product-details"]) .downloads-section {
        padding-top: 62px;
        padding-bottom: 62px;
    }

}


/* MOBILE */
@media (max-width: 768px) {
    /* HERO */
    :where(html[data-page-style~="product-details"]) .product-hero {
        min-height: auto;
        padding: 61px 0 72px;
        background:
            radial-gradient(
                circle at 90% 20%,
                rgba(255, 107, 0, 0.14),
                transparent 33%
            ),
            linear-gradient(
                135deg,
                #111a21 0%,
                #17232f 100%
            );
    }

    :where(html[data-page-style~="product-details"]) .product-hero::before {
        width: 300px;
        height: 300px;
        top: -55px;
        right: -175px;
        transform: none;
    }

    :where(html[data-page-style~="product-details"]) .product-hero::after {
        width: 160px;
        height: 160px;
        right: 10px;
        top: 155px;
        transform: none;
    }

    :where(html[data-page-style~="product-details"]) .product-hero .hero-content {
        max-width: 100%;
    }

    :where(html[data-page-style~="product-details"]) .product-hero .hero-content::after {
        display: none;
    }

    /* BREADCRUMB MUST REMAIN 15.5PX */
    :where(html[data-page-style~="product-details"]) .product-hero .breadcrumb,
:where(html[data-page-style~="product-details"]) .breadcrumb {
        margin-bottom: 18px;
        font-size: 15.5px;
        line-height: 1.5;
    }

    :where(html[data-page-style~="product-details"]) .product-series {
        margin-bottom: 13px;
        padding: 6px 12px;
        font-size: 10px;
        letter-spacing: 1.1px;
    }

    :where(html[data-page-style~="product-details"]) .product-hero h1 {
        margin-bottom: 17px;
        font-size: 37px;
        line-height: 1.10;
        letter-spacing: -0.8px;
    }

    :where(html[data-page-style~="product-details"]) .product-hero .hero-content > p {
        margin-bottom: 23px;
        font-size: 15.5px;
        line-height: 1.72;
    }

    :where(html[data-page-style~="product-details"]) .product-hero .hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    :where(html[data-page-style~="product-details"]) .product-hero .btn {
        width: 100%;
        min-height: 49px;
    }

    /* QUICK DATA */
    :where(html[data-page-style~="product-details"]) .quick-data {
        margin-top: -22px;
    }

    :where(html[data-page-style~="product-details"]) .quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: var(--pd-radius-md);
    }

    :where(html[data-page-style~="product-details"]) .quick-card {
        min-height: 102px;
        padding: 16px 10px;
    }

    :where(html[data-page-style~="product-details"]) .quick-card:nth-child(2) {
        border-right: none;
    }

    :where(html[data-page-style~="product-details"]) .quick-card:nth-child(3),
:where(html[data-page-style~="product-details"]) .quick-card:nth-child(4),
:where(html[data-page-style~="product-details"]) .quick-card:nth-child(5),
:where(html[data-page-style~="product-details"]) .quick-card:nth-child(6) {
        border-top: 1px solid var(--pd-border);
    }

    :where(html[data-page-style~="product-details"]) .quick-card:nth-child(4),
:where(html[data-page-style~="product-details"]) .quick-card:nth-child(6) {
        border-right: none;
    }

    :where(html[data-page-style~="product-details"]) .quick-card h4,
:where(html[data-page-style~="product-details"]) .quick-card .quick-label {
        font-size: 12.5px;
    }

    :where(html[data-page-style~="product-details"]) .quick-card p {
        font-size: 13px;
    }

    /* SECTION HEADINGS */
    :where(html[data-page-style~="product-details"]) section .section-heading {
        margin-bottom: 28px;
    }

    :where(html[data-page-style~="product-details"]) .section-heading > span {
        margin-bottom: 7px;
        font-size: 10px;
    }

    :where(html[data-page-style~="product-details"]) .section-heading h2 {
        font-size: 31px;
        line-height: 1.18;
    }

    :where(html[data-page-style~="product-details"]) .section-heading p {
        font-size: 14.5px;
        line-height: 1.7;
    }

    /* COMMON SECTION SPACING */
    :where(html[data-page-style~="product-details"]) .overview,
:where(html[data-page-style~="product-details"]) .construction-section,
:where(html[data-page-style~="product-details"]) .properties-section,
:where(html[data-page-style~="product-details"]) .features-section,
:where(html[data-page-style~="product-details"]) .materials-section,
:where(html[data-page-style~="product-details"]) .standards-section,
:where(html[data-page-style~="product-details"]) .dimensions-section,
:where(html[data-page-style~="product-details"]) .technical-table-section,
:where(html[data-page-style~="product-details"]) .technical-spec-section,
:where(html[data-page-style~="product-details"]) .performance-section,
:where(html[data-page-style~="product-details"]) .applications-section,
:where(html[data-page-style~="product-details"]) .installation-section,
:where(html[data-page-style~="product-details"]) .storage-section,
:where(html[data-page-style~="product-details"]) .quality-section,
:where(html[data-page-style~="product-details"]) .inspection-section,
:where(html[data-page-style~="product-details"]) .faq-section,
:where(html[data-page-style~="product-details"]) .downloads-section {
        padding-top: 54px;
        padding-bottom: 58px;
    }

    /* OVERVIEW */
    :where(html[data-page-style~="product-details"]) .overview-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    :where(html[data-page-style~="product-details"]) .overview-image {
        min-height: 285px;
        padding: 22px;
        border-radius: var(--pd-radius-lg);
    }

    :where(html[data-page-style~="product-details"]) .overview-image::before {
        width: 205px;
        height: 205px;
    }

    :where(html[data-page-style~="product-details"]) .overview-image::after {
        width: 140px;
        height: 140px;
    }

    :where(html[data-page-style~="product-details"]) .overview-image img {
        max-width: 82%;
        max-height: 230px;
    }

    :where(html[data-page-style~="product-details"]) .overview-content > span {
        font-size: 10px;
    }

    :where(html[data-page-style~="product-details"]) .overview-content h2 {
        font-size: 31px;
    }

    :where(html[data-page-style~="product-details"]) .overview-content p {
        font-size: 15px;
        line-height: 1.78;
    }

    /* CONSTRUCTION */
    :where(html[data-page-style~="product-details"]) .construction-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    :where(html[data-page-style~="product-details"]) .construction-card {
        padding: 23px 19px;
    }

    :where(html[data-page-style~="product-details"]) .construction-card:hover {
        transform: none;
    }

    :where(html[data-page-style~="product-details"]) .construction-card p {
        font-size: 14px;
    }

    /* PROPERTIES */
    :where(html[data-page-style~="product-details"]) .properties-table {
        border-radius: var(--pd-radius-md);
    }

    :where(html[data-page-style~="product-details"]) .properties-table table {
        min-width: 600px;
    }

    :where(html[data-page-style~="product-details"]) .properties-table th,
:where(html[data-page-style~="product-details"]) .properties-table td {
        padding: 12px 13px;
        font-size: 13px;
    }

    /* FEATURES */
    :where(html[data-page-style~="product-details"]) .features-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    :where(html[data-page-style~="product-details"]) .feature-item {
        min-height: auto;
        padding: 15px 14px;
    }

    :where(html[data-page-style~="product-details"]) .feature-item p {
        font-size: 14px;
    }

    /* MATERIALS */
    :where(html[data-page-style~="product-details"]) .materials-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    :where(html[data-page-style~="product-details"]) .material-card {
        padding: 23px 19px;
    }

    :where(html[data-page-style~="product-details"]) .material-card h3 {
        font-size: 19px;
    }

    :where(html[data-page-style~="product-details"]) .material-card ul {
        gap: 8px 13px;
    }

    :where(html[data-page-style~="product-details"]) .material-card li {
        font-size: 13.5px;
    }

    /* STANDARDS */
    :where(html[data-page-style~="product-details"]) .standards-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    :where(html[data-page-style~="product-details"]) .standard-card {
        padding: 23px 19px;
    }

    :where(html[data-page-style~="product-details"]) .standard-card:hover {
        transform: none;
    }

    /* DIMENSIONS */
    :where(html[data-page-style~="product-details"]) .dimension-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    :where(html[data-page-style~="product-details"]) .dimension-card {
        padding: 23px 19px;
    }

    :where(html[data-page-style~="product-details"]) .dimension-card:hover {
        transform: none;
    }

    /* TECHNICAL TABLE */
    :where(html[data-page-style~="product-details"]) .table-wrapper {
        border-radius: var(--pd-radius-md);
    }

    :where(html[data-page-style~="product-details"]) .technical-table {
        min-width: 700px;
    }

    :where(html[data-page-style~="product-details"]) .technical-table th,
:where(html[data-page-style~="product-details"]) .technical-table td {
        padding: 12px 13px;
        font-size: 13px;
    }

    /* TECHNICAL SPECIFICATIONS */
    :where(html[data-page-style~="product-details"]) .spec-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    :where(html[data-page-style~="product-details"]) .spec-card {
        padding: 23px 19px;
    }

    :where(html[data-page-style~="product-details"]) .spec-card:hover {
        transform: none;
    }

    :where(html[data-page-style~="product-details"]) .spec-card p {
        font-size: 14px;
    }

    /* PERFORMANCE */
    :where(html[data-page-style~="product-details"]) .performance-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    :where(html[data-page-style~="product-details"]) .performance-card {
        padding: 23px 19px;
    }

    :where(html[data-page-style~="product-details"]) .performance-card:hover {
        transform: none;
    }

    :where(html[data-page-style~="product-details"]) .performance-card p {
        font-size: 14px;
    }

    /* APPLICATIONS */
    :where(html[data-page-style~="product-details"]) .applications-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    :where(html[data-page-style~="product-details"]) .application-card {
        padding: 23px 19px;
    }

    :where(html[data-page-style~="product-details"]) .application-card:hover {
        transform: none;
    }

    :where(html[data-page-style~="product-details"]) .application-card p {
        font-size: 14px;
    }

    /* INSTALLATION */
    :where(html[data-page-style~="product-details"]) .installation-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    :where(html[data-page-style~="product-details"]) .installation-card {
        padding: 23px 19px;
    }

    :where(html[data-page-style~="product-details"]) .installation-card p {
        font-size: 14px;
    }

    /* STORAGE */
    :where(html[data-page-style~="product-details"]) .storage-content {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    :where(html[data-page-style~="product-details"]) .storage-box {
        padding: 23px 19px;
    }

    :where(html[data-page-style~="product-details"]) .storage-box p {
        font-size: 14px;
    }

    /* QUALITY */
    :where(html[data-page-style~="product-details"]) .quality-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    :where(html[data-page-style~="product-details"]) .quality-card {
        padding: 23px 19px;
    }

    :where(html[data-page-style~="product-details"]) .quality-card:hover {
        transform: none;
    }

    :where(html[data-page-style~="product-details"]) .quality-card p {
        font-size: 14px;
    }

    /* INSPECTION */
    :where(html[data-page-style~="product-details"]) .inspection-table-wrapper {
        border-radius: var(--pd-radius-md);
    }

    :where(html[data-page-style~="product-details"]) .inspection-table {
        min-width: 620px;
    }

    :where(html[data-page-style~="product-details"]) .inspection-table th,
:where(html[data-page-style~="product-details"]) .inspection-table td {
        padding: 12px 13px;
        font-size: 13px;
    }

    /* FAQ */
    :where(html[data-page-style~="product-details"]) .faq-item {
        padding: 18px 16px;
        margin-bottom: 9px;
    }

    :where(html[data-page-style~="product-details"]) .faq-item h3 {
        padding-left: 21px;
        font-size: 15.5px;
    }

    :where(html[data-page-style~="product-details"]) .faq-item p {
        font-size: 14px;
        line-height: 1.72;
    }

    /* DOWNLOADS */
    :where(html[data-page-style~="product-details"]) .downloads-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    :where(html[data-page-style~="product-details"]) .download-card {
        padding: 23px 19px;
    }

    :where(html[data-page-style~="product-details"]) .download-card:hover {
        transform: none;
    }

    :where(html[data-page-style~="product-details"]) .download-card p {
        min-height: auto;
        font-size: 14px;
    }

    :where(html[data-page-style~="product-details"]) .download-btn {
        width: 100%;
    }

}


/* SMALL MOBILE */
@media (max-width: 480px) {
    /* Breadcrumb remains 15.5px */
    :where(html[data-page-style~="product-details"]) .product-hero .breadcrumb,
:where(html[data-page-style~="product-details"]) .breadcrumb {
        font-size: 15.5px;
    }

    :where(html[data-page-style~="product-details"]) .product-hero {
        padding: 55px 0 65px;
    }

    :where(html[data-page-style~="product-details"]) .product-hero h1 {
        font-size: 33px;
    }

    :where(html[data-page-style~="product-details"]) .product-hero .hero-content > p {
        font-size: 15px;
    }

    :where(html[data-page-style~="product-details"]) .quick-card {
        min-height: 96px;
        padding: 14px 8px;
    }

    :where(html[data-page-style~="product-details"]) .quick-card h4,
:where(html[data-page-style~="product-details"]) .quick-card .quick-label {
        font-size: 11.8px;
    }

    :where(html[data-page-style~="product-details"]) .quick-card p {
        font-size: 12.5px;
    }

    :where(html[data-page-style~="product-details"]) .section-heading h2 {
        font-size: 28px;
    }

    :where(html[data-page-style~="product-details"]) .section-heading p {
        font-size: 14px;
    }

    :where(html[data-page-style~="product-details"]) .overview-content h2 {
        font-size: 28px;
    }

    :where(html[data-page-style~="product-details"]) .overview-content p {
        font-size: 14.5px;
    }

    :where(html[data-page-style~="product-details"]) .overview-image {
        min-height: 250px;
    }

    :where(html[data-page-style~="product-details"]) .overview-image img {
        max-height: 200px;
    }

    :where(html[data-page-style~="product-details"]) .material-card ul {
        grid-template-columns: 1fr;
    }

    :where(html[data-page-style~="product-details"]) .properties-table table {
        min-width: 560px;
    }

    :where(html[data-page-style~="product-details"]) .technical-table {
        min-width: 660px;
    }

    :where(html[data-page-style~="product-details"]) .inspection-table {
        min-width: 580px;
    }

}


/* ACCESSIBILITY */
:where(html[data-page-style~="product-details"]) .product-hero a:focus-visible,
:where(html[data-page-style~="product-details"]) .download-btn:focus-visible {
    outline: 3px solid rgba(255, 107, 0, 0.40);
    outline-offset: 3px;
}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    :where(html[data-page-style~="product-details"]) .product-hero .btn,
:where(html[data-page-style~="product-details"]) .product-hero .breadcrumb a,
:where(html[data-page-style~="product-details"]) .construction-card,
:where(html[data-page-style~="product-details"]) .standard-card,
:where(html[data-page-style~="product-details"]) .dimension-card,
:where(html[data-page-style~="product-details"]) .spec-card,
:where(html[data-page-style~="product-details"]) .performance-card,
:where(html[data-page-style~="product-details"]) .application-card,
:where(html[data-page-style~="product-details"]) .quality-card,
:where(html[data-page-style~="product-details"]) .download-card,
:where(html[data-page-style~="product-details"]) .download-btn,
:where(html[data-page-style~="product-details"]) .properties-table tbody tr,
:where(html[data-page-style~="product-details"]) .technical-table tbody tr,
:where(html[data-page-style~="product-details"]) .inspection-table tbody tr,
:where(html[data-page-style~="product-details"]) .feature-item,
:where(html[data-page-style~="product-details"]) .faq-item {
        transition: none !important;
    }

}


/* Accessibility: solid orange controls/text on light surfaces */
:where(html[data-page-style~="product-details"]) .product-hero .primary-btn { background:#b04200; border-color:#b04200; }

:where(html[data-page-style~="product-details"]) .product-hero .primary-btn:hover { background:#963700; border-color:#963700; }

:where(html[data-page-style~="product-details"]) .section-heading > span { color:#b04200; }

:where(html[data-page-style~="product-details"]) .step-number { background:#b04200; }


/* PRODUCTS */

/* FERROBEND PRODUCTS PAGE products.css Used by the main Products page only. CTA and footer styling remain controlled by homepage.css. */

/* PAGE VARIABLES */
:root:where([data-page-style~="products"]) {
    --product-dark: #17232f;
    --product-dark-deep: #111a21;
    --product-dark-soft: #232323;
    --product-orange: #ff6b00;
    --product-orange-hover: #e85f00;
    --product-orange-soft: #fff3e8;
    --product-orange-pale: #fff8f2;
    --product-white: #ffffff;
    --product-light: #f5f6f7;
    --product-soft: #eef0f2;
    --product-warm: #fff8f2;
    --product-text: #222222;
    --product-muted: #60666b;
    --product-light-text: #797f84;
    --product-border: #dedfe1;
    --product-border-light: rgba(23, 35, 47, 0.10);
    --product-border-dark: rgba(255, 255, 255, 0.13);
    --product-shadow-sm: 0 8px 24px rgba(23, 35, 47, 0.07);
    --product-shadow-md: 0 14px 38px rgba(23, 35, 47, 0.11);
    --product-shadow-lg: 0 24px 60px rgba(23, 35, 47, 0.17);
    --product-radius-sm: 6px;
    --product-radius-md: 9px;
    --product-radius-lg: 14px;
    --product-radius-xl: 20px;
    --product-transition: 0.3s ease;
}


/* PRODUCTS HERO */
:where(html[data-page-style~="products"]) .products-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    padding: 82px 0 88px;
    background:
        radial-gradient(
            circle at 88% 38%,
            rgba(255, 107, 0, 0.17) 0,
            rgba(255, 107, 0, 0.08) 13%,
            transparent 32%
        ),
        radial-gradient(
            circle at 72% 100%,
            rgba(255, 255, 255, 0.05) 0,
            transparent 27%
        ),
        linear-gradient(
            118deg,
            #111a21 0%,
            #17232f 48%,
            #202a31 74%,
            #232323 100%
        );
    overflow: hidden;
}


/* Large decorative ring */
:where(html[data-page-style~="products"]) .products-hero::before {
    content: "";
    position: absolute;
    width: 540px;
    height: 540px;
    top: 50%;
    right: -190px;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 107, 0, 0.19);
    border-radius: 50%;
    box-shadow:
        0 0 0 70px rgba(255, 107, 0, 0.025),
        0 0 0 145px rgba(255, 255, 255, 0.015);
    pointer-events: none;
}


/* Inner decorative ring */
:where(html[data-page-style~="products"]) .products-hero::after {
    content: "";
    position: absolute;
    width: 275px;
    height: 275px;
    right: 105px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px dashed rgba(255, 255, 255, 0.09);
    border-radius: 50%;
    pointer-events: none;
}


/* Overlay */
:where(html[data-page-style~="products"]) .products-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(17, 26, 33, 0.15),
            rgba(17, 26, 33, 0.02)
        );
    pointer-events: none;
}


/* Hero container */
:where(html[data-page-style~="products"]) .products-hero .container {
    position: relative;
    z-index: 2;
}


/* Hero content */
:where(html[data-page-style~="products"]) .products-hero .hero-content {
    position: relative;
    max-width: 900px;
}


/* BREADCRUMB */
:where(html[data-page-style~="products"]) .products-hero .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 21px;
    color: rgba(255, 255, 255, 0.77);
    font-size: 15.5px;
    line-height: 1.5;
}

:where(html[data-page-style~="products"]) .products-hero .breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.84;
    transition:
        color var(--product-transition),
        opacity var(--product-transition);
}

:where(html[data-page-style~="products"]) .products-hero .breadcrumb a:hover {
    color: var(--product-orange);
    opacity: 1;
}

:where(html[data-page-style~="products"]) .products-hero .breadcrumb span {
    color: rgba(255, 255, 255, 0.40);
}

:where(html[data-page-style~="products"]) .products-hero .breadcrumb strong {
    color: var(--product-orange);
    font-weight: 600;
}


/* HERO TAG */
:where(html[data-page-style~="products"]) .products-hero .hero-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    margin-bottom: 16px;
    color: var(--product-orange);
    background:
        linear-gradient(
            135deg,
            rgba(255, 107, 0, 0.15),
            rgba(255, 107, 0, 0.05)
        );
    border: 1px solid rgba(255, 107, 0, 0.34);
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
    line-height: 1.4;
}


/* HERO HEADING */
:where(html[data-page-style~="products"]) .products-hero h1 {
    max-width: 850px;
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(44px, 5vw, 68px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.5px;
}


/* Hero paragraph */
:where(html[data-page-style~="products"]) .products-hero .hero-content > p {
    max-width: 810px;
    margin: 0 0 27px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.72;
}


/* HERO BUTTONS */
:where(html[data-page-style~="products"]) .products-hero .hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

:where(html[data-page-style~="products"]) .products-hero .btn {
    min-height: 51px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 25px;
    border-radius: var(--product-radius-sm);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background var(--product-transition),
        color var(--product-transition),
        border-color var(--product-transition),
        transform var(--product-transition);
}


/* Primary */
:where(html[data-page-style~="products"]) .products-hero .primary-btn {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #ff790f 0%,
            #ff6b00 55%,
            #e85f00 100%
        );
    border: 1px solid var(--product-orange);
    box-shadow:
        0 8px 20px rgba(255, 107, 0, 0.20);
}

:where(html[data-page-style~="products"]) .products-hero .primary-btn:hover {
    background:
        linear-gradient(
            135deg,
            #ff861f 0%,
            #ff6b00 60%,
            #d95700 100%
        );
    border-color: var(--product-orange-hover);
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(255, 107, 0, 0.25);
}


/* Secondary */
:where(html[data-page-style~="products"]) .products-hero .secondary-btn {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(5px);
}

:where(html[data-page-style~="products"]) .products-hero .secondary-btn:hover {
    color: var(--product-dark);
    background: #ffffff;
    border-color: #ffffff;
    transform: translateY(-2px);
}


/* PRODUCT STATISTICS */
:where(html[data-page-style~="products"]) .product-stats {
    position: relative;
    z-index: 3;
    margin-top: -30px;
}

:where(html[data-page-style~="products"]) .product-stats .container {
    position: relative;
}

:where(html[data-page-style~="products"]) .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background:
        linear-gradient(
            140deg,
            #ffffff 0%,
            #fffaf5 100%
        );
    border: 1px solid rgba(255, 107, 0, 0.14);
    border-top: 4px solid var(--product-orange);
    border-radius: var(--product-radius-lg);
    box-shadow: var(--product-shadow-lg);
    overflow: hidden;
}

:where(html[data-page-style~="products"]) .stat-box {
    position: relative;
    min-height: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    border-right: 1px solid var(--product-border);
}

:where(html[data-page-style~="products"]) .stat-box:last-child {
    border-right: none;
}

:where(html[data-page-style~="products"]) .stat-box h2 {
    margin: 0 0 6px;
    color: var(--product-orange);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
}

:where(html[data-page-style~="products"]) .stat-box span {
    color: var(--product-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}


/* COMMON SECTION TITLE */
:where(html[data-page-style~="products"]) .products-section .section-title,
:where(html[data-page-style~="products"]) .why-ferrobend .section-title,
:where(html[data-page-style~="products"]) .comparison-section .section-title {
    max-width: 820px;
    margin: 0 auto 38px;
    text-align: center;
}

:where(html[data-page-style~="products"]) .products-section .section-title > span,
:where(html[data-page-style~="products"]) .why-ferrobend .section-title > span,
:where(html[data-page-style~="products"]) .comparison-section .section-title > span {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--product-orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.5;
    text-transform: uppercase;
}

:where(html[data-page-style~="products"]) .products-section .section-title h2,
:where(html[data-page-style~="products"]) .why-ferrobend .section-title h2,
:where(html[data-page-style~="products"]) .comparison-section .section-title h2 {
    margin: 0 0 12px;
    color: var(--product-dark);
    font-size: clamp(33px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.8px;
}

:where(html[data-page-style~="products"]) .products-section .section-title p,
:where(html[data-page-style~="products"]) .why-ferrobend .section-title p,
:where(html[data-page-style~="products"]) .comparison-section .section-title p {
    margin: 0;
    color: var(--product-muted);
    font-size: 15.5px;
    line-height: 1.72;
}


/* PRODUCTS SECTION */
:where(html[data-page-style~="products"]) .products-section {
    padding: 66px 0 72px;
    background:
        radial-gradient(
            circle at 5% 12%,
            rgba(255, 107, 0, 0.08),
            transparent 22%
        ),
        linear-gradient(
            180deg,
            #fff8f2 0%,
            #ffffff 42%,
            #f5f6f7 100%
        );
}


/* PRODUCTS GRID */
:where(html[data-page-style~="products"]) .products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 21px;
}


/* PRODUCT CARD */
:where(html[data-page-style~="products"]) .product-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--product-border);
    border-radius: var(--product-radius-lg);
    overflow: hidden;
    box-shadow: var(--product-shadow-sm);
    transition:
        transform var(--product-transition),
        box-shadow var(--product-transition),
        border-color var(--product-transition);
}

:where(html[data-page-style~="products"]) .product-card:hover {
    transform: translateY(-7px);
    border-color: rgba(255, 107, 0, 0.38);
    box-shadow: var(--product-shadow-lg);
}


/* PRODUCT IMAGE */
:where(html[data-page-style~="products"]) .product-image {
    position: relative;
    width: 100%;
    height: 238px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(
            circle at center,
            rgba(255, 107, 0, 0.10) 0,
            rgba(255, 107, 0, 0.025) 28%,
            transparent 50%
        ),
        linear-gradient(
            145deg,
            #eef0f2 0%,
            #f7f8fa 48%,
            #fff3e8 100%
        );
    border-bottom: 1px solid rgba(255, 107, 0, 0.12);
    overflow: hidden;
}


/* Decorative circles */
:where(html[data-page-style~="products"]) .product-image::before {
    content: "";
    position: absolute;
    width: 172px;
    height: 172px;
    border: 1px solid rgba(255, 107, 0, 0.15);
    border-radius: 50%;
}

:where(html[data-page-style~="products"]) .product-image::after {
    content: "";
    position: absolute;
    width: 112px;
    height: 112px;
    border: 1px solid rgba(23, 35, 47, 0.07);
    border-radius: 50%;
}

:where(html[data-page-style~="products"]) .product-image img {
    position: relative;
    z-index: 2;
    display: block;
    width: auto;
    max-width: 82%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    transition:
        transform var(--product-transition),
        filter var(--product-transition);
}

:where(html[data-page-style~="products"]) .product-card:hover .product-image img {
    transform: scale(1.055);
}


/* PRODUCT CONTENT */
:where(html[data-page-style~="products"]) .product-content {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 23px 23px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffdfb 100%
        );
}


/* Small top orange line */
:where(html[data-page-style~="products"]) .product-content::before {
    content: "";
    position: absolute;
    width: 42px;
    height: 3px;
    top: 0;
    left: 23px;
    background: var(--product-orange);
    border-radius: 0 0 5px 5px;
}


/* Product label */
:where(html[data-page-style~="products"]) .product-label {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--product-orange);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.25px;
    line-height: 1.5;
    text-transform: uppercase;
}


/* Product title */
:where(html[data-page-style~="products"]) .product-content h3 {
    min-height: 59px;
    margin: 0 0 11px;
    color: var(--product-dark);
    font-size: 21px;
    font-weight: 650;
    line-height: 1.38;
}


/* Product description */
:where(html[data-page-style~="products"]) .product-content > p {
    min-height: 76px;
    margin: 0 0 16px;
    color: var(--product-muted);
    font-size: 14.5px;
    line-height: 1.72;
}


/* Product feature list */
:where(html[data-page-style~="products"]) .product-content ul {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 0 21px;
    padding: 0;
    list-style: none;
}

:where(html[data-page-style~="products"]) .product-content ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #444444;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
}

:where(html[data-page-style~="products"]) .product-content ul li i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--product-orange);
    font-size: 11px;
}


/* Product button */
:where(html[data-page-style~="products"]) .product-btn {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 17px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #17232f 0%,
            #111a21 100%
        );
    border: 1px solid var(--product-dark);
    border-radius: var(--product-radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background var(--product-transition),
        border-color var(--product-transition),
        color var(--product-transition),
        transform var(--product-transition);
}

:where(html[data-page-style~="products"]) .product-btn i {
    font-size: 11px;
    transition: transform var(--product-transition);
}

:where(html[data-page-style~="products"]) .product-btn:hover {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #ff790f 0%,
            #ff6b00 60%,
            #e85f00 100%
        );
    border-color: var(--product-orange);
    transform: translateY(-2px);
}

:where(html[data-page-style~="products"]) .product-btn:hover i {
    transform: translateX(3px);
}


/* WHY FERROBEND DARK PREMIUM GRADIENT */
:where(html[data-page-style~="products"]) .why-ferrobend {
    padding: 68px 0 74px;
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(255, 107, 0, 0.12),
            transparent 25%
        ),
        radial-gradient(
            circle at 93% 82%,
            rgba(255, 255, 255, 0.045),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #111a21 0%,
            #17232f 52%,
            #20282e 100%
        );
}


/* White heading on dark section */
:where(html[data-page-style~="products"]) .why-ferrobend .section-title h2,
:where(html[data-page-style~="products"]) .why-ferrobend .section-title p {
    color: #ffffff;
}

:where(html[data-page-style~="products"]) .why-ferrobend .section-title p {
    color: rgba(255, 255, 255, 0.70);
}


/* Why cards */
:where(html[data-page-style~="products"]) .why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

:where(html[data-page-style~="products"]) .why-card {
    position: relative;
    padding: 27px 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.085),
            rgba(255, 255, 255, 0.035)
        );
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-top: 3px solid rgba(255, 107, 0, 0.70);
    border-radius: var(--product-radius-lg);
    text-align: center;
    transition:
        transform var(--product-transition),
        background var(--product-transition),
        border-color var(--product-transition);
}

:where(html[data-page-style~="products"]) .why-card:hover {
    transform: translateY(-5px);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 107, 0, 0.06)
        );
    border-color: rgba(255, 107, 0, 0.42);
}


/* Why icon */
:where(html[data-page-style~="products"]) .why-card > i {
    width: 61px;
    height: 61px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    color: var(--product-orange);
    background:
        linear-gradient(
            145deg,
            rgba(255, 107, 0, 0.19),
            rgba(255, 107, 0, 0.08)
        );
    border: 1px solid rgba(255, 107, 0, 0.24);
    border-radius: 50%;
    font-size: 23px;
}

:where(html[data-page-style~="products"]) .why-card h3 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 650;
    line-height: 1.4;
}

:where(html[data-page-style~="products"]) .why-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.72;
}


/* COMPARISON SECTION */
:where(html[data-page-style~="products"]) .comparison-section {
    padding: 70px 0 76px;
    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(255, 107, 0, 0.07),
            transparent 23%
        ),
        linear-gradient(
            180deg,
            #f7f8fa 0%,
            #fff8f2 100%
        );
}


/* Comparison table */
:where(html[data-page-style~="products"]) .comparison-table {
    width: 100%;
    border: 1px solid var(--product-border);
    border-radius: var(--product-radius-lg);
    overflow-x: auto;
    overflow-y: hidden;
    background: #ffffff;
    box-shadow: var(--product-shadow-md);
}

:where(html[data-page-style~="products"]) .comparison-table table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    background: #ffffff;
}


/* Table header */
:where(html[data-page-style~="products"]) .comparison-table th {
    padding: 15px 19px;
    color: #ffffff;
    background:
        linear-gradient(
            110deg,
            #111a21 0%,
            #17232f 70%,
            #232323 100%
        );
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

:where(html[data-page-style~="products"]) .comparison-table th:last-child {
    border-right: none;
}


/* Table body */
:where(html[data-page-style~="products"]) .comparison-table td {
    padding: 14px 19px;
    color: #444444;
    font-size: 14px;
    line-height: 1.55;
    border-top: 1px solid var(--product-border);
}

:where(html[data-page-style~="products"]) .comparison-table tbody tr {
    transition: background var(--product-transition);
}

:where(html[data-page-style~="products"]) .comparison-table tbody tr:nth-child(even) {
    background: #fafafa;
}

:where(html[data-page-style~="products"]) .comparison-table tbody tr:hover {
    background:
        linear-gradient(
            90deg,
            #fff3e8 0%,
            #fff8f2 100%
        );
}

:where(html[data-page-style~="products"]) .comparison-table tbody td:first-child {
    color: var(--product-dark);
    font-weight: 600;
}


/* TABLET */
@media (max-width: 1100px) {
    :where(html[data-page-style~="products"]) .products-hero {
        min-height: 485px;
        padding: 74px 0 80px;
    }

    :where(html[data-page-style~="products"]) .products-hero h1 {
        font-size: 55px;
    }

    :where(html[data-page-style~="products"]) .products-hero .hero-content > p {
        font-size: 16px;
    }

    :where(html[data-page-style~="products"]) .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    :where(html[data-page-style~="products"]) .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html[data-page-style~="products"]) .stat-box {
        min-height: 118px;
    }

    :where(html[data-page-style~="products"]) .products-section,
:where(html[data-page-style~="products"]) .why-ferrobend,
:where(html[data-page-style~="products"]) .comparison-section {
        padding-top: 62px;
        padding-bottom: 68px;
    }

}


/* MOBILE */
@media (max-width: 768px) {
    /* HERO */
    :where(html[data-page-style~="products"]) .products-hero {
        min-height: auto;
        padding: 60px 0 70px;
        background:
            radial-gradient(
                circle at 90% 18%,
                rgba(255, 107, 0, 0.15),
                transparent 32%
            ),
            linear-gradient(
                135deg,
                #111a21 0%,
                #17232f 68%,
                #20282e 100%
            );
    }

    :where(html[data-page-style~="products"]) .products-hero::before {
        width: 300px;
        height: 300px;
        top: -50px;
        right: -175px;
        transform: none;
    }

    :where(html[data-page-style~="products"]) .products-hero::after {
        width: 155px;
        height: 155px;
        right: 15px;
        top: 145px;
        transform: none;
    }

    :where(html[data-page-style~="products"]) .products-hero .hero-content {
        max-width: 100%;
    }

    :where(html[data-page-style~="products"]) .products-hero .hero-content::after {
        display: none;
    }

    /* BREADCRUMB 15.5PX */
    :where(html[data-page-style~="products"]) .products-hero .breadcrumb {
        margin-bottom: 17px;
        font-size: 15.5px;
        line-height: 1.5;
    }

    /* TAG */
    :where(html[data-page-style~="products"]) .products-hero .hero-tag {
        margin-bottom: 13px;
        font-size: 10px;
        letter-spacing: 1.1px;
    }

    /* HEADING */
    :where(html[data-page-style~="products"]) .products-hero h1 {
        margin-bottom: 16px;
        font-size: 37px;
        line-height: 1.10;
        letter-spacing: -0.8px;
    }

    /* PARAGRAPH */
    :where(html[data-page-style~="products"]) .products-hero .hero-content > p {
        margin-bottom: 23px;
        font-size: 15px;
        line-height: 1.72;
    }

    /* BUTTONS */
    :where(html[data-page-style~="products"]) .products-hero .hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    :where(html[data-page-style~="products"]) .products-hero .btn {
        width: 100%;
        min-height: 49px;
    }

    /* STATISTICS */
    :where(html[data-page-style~="products"]) .product-stats {
        margin-top: -22px;
    }

    :where(html[data-page-style~="products"]) .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        border-radius: var(--product-radius-md);
    }

    :where(html[data-page-style~="products"]) .stat-box {
        min-height: 102px;
        padding: 16px 11px;
        border-right: 1px solid var(--product-border);
        border-bottom: 1px solid var(--product-border);
    }

    :where(html[data-page-style~="products"]) .stat-box:nth-child(2) {
        border-right: none;
    }

    :where(html[data-page-style~="products"]) .stat-box:nth-child(3),
:where(html[data-page-style~="products"]) .stat-box:nth-child(4) {
        border-bottom: none;
    }

    :where(html[data-page-style~="products"]) .stat-box:nth-child(3) {
        border-right: 1px solid var(--product-border);
    }

    :where(html[data-page-style~="products"]) .stat-box h2 {
        font-size: 25px;
    }

    :where(html[data-page-style~="products"]) .stat-box span {
        font-size: 11px;
    }

    /* SECTION TITLES */
    :where(html[data-page-style~="products"]) .products-section .section-title,
:where(html[data-page-style~="products"]) .why-ferrobend .section-title,
:where(html[data-page-style~="products"]) .comparison-section .section-title {
        margin-bottom: 29px;
    }

    :where(html[data-page-style~="products"]) .products-section .section-title h2,
:where(html[data-page-style~="products"]) .why-ferrobend .section-title h2,
:where(html[data-page-style~="products"]) .comparison-section .section-title h2 {
        font-size: 30px;
        line-height: 1.20;
    }

    :where(html[data-page-style~="products"]) .products-section .section-title p,
:where(html[data-page-style~="products"]) .why-ferrobend .section-title p,
:where(html[data-page-style~="products"]) .comparison-section .section-title p {
        font-size: 14px;
        line-height: 1.72;
    }

    /* PRODUCTS */
    :where(html[data-page-style~="products"]) .products-section {
        padding: 53px 0 59px;
    }

    :where(html[data-page-style~="products"]) .products-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    :where(html[data-page-style~="products"]) .product-card {
        border-radius: var(--product-radius-md);
    }

    :where(html[data-page-style~="products"]) .product-card:hover {
        transform: none;
        box-shadow: var(--product-shadow-sm);
    }

    /* IMAGE */
    :where(html[data-page-style~="products"]) .product-image {
        height: 215px;
        padding: 21px;
    }

    :where(html[data-page-style~="products"]) .product-image::before {
        width: 145px;
        height: 145px;
    }

    :where(html[data-page-style~="products"]) .product-image::after {
        width: 95px;
        height: 95px;
    }

    :where(html[data-page-style~="products"]) .product-image img {
        max-width: 76%;
        max-height: 165px;
    }

    :where(html[data-page-style~="products"]) .product-card:hover .product-image img {
        transform: none;
    }

    /* CONTENT */
    :where(html[data-page-style~="products"]) .product-content {
        padding: 23px 20px 21px;
    }

    :where(html[data-page-style~="products"]) .product-content::before {
        left: 20px;
    }

    :where(html[data-page-style~="products"]) .product-content h3 {
        min-height: auto;
        font-size: 20px;
        line-height: 1.36;
    }

    :where(html[data-page-style~="products"]) .product-content > p {
        min-height: auto;
        font-size: 14px;
        line-height: 1.70;
    }

    :where(html[data-page-style~="products"]) .product-content ul {
        margin-bottom: 19px;
    }

    :where(html[data-page-style~="products"]) .product-content ul li {
        font-size: 13.5px;
    }

    :where(html[data-page-style~="products"]) .product-btn {
        width: 100%;
    }

    /* WHY FERROBEND */
    :where(html[data-page-style~="products"]) .why-ferrobend {
        padding: 57px 0 63px;
    }

    :where(html[data-page-style~="products"]) .why-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    :where(html[data-page-style~="products"]) .why-card {
        padding: 24px 19px;
    }

    :where(html[data-page-style~="products"]) .why-card:hover {
        transform: none;
    }

    :where(html[data-page-style~="products"]) .why-card p {
        font-size: 14px;
    }

    /* COMPARISON */
    :where(html[data-page-style~="products"]) .comparison-section {
        padding: 58px 0 64px;
    }

    :where(html[data-page-style~="products"]) .comparison-table {
        border-radius: var(--product-radius-md);
    }

    :where(html[data-page-style~="products"]) .comparison-table table {
        min-width: 700px;
    }

    :where(html[data-page-style~="products"]) .comparison-table th,
:where(html[data-page-style~="products"]) .comparison-table td {
        padding: 12px 13px;
        font-size: 13px;
    }

}


/* SMALL MOBILE */
@media (max-width: 480px) {
    :where(html[data-page-style~="products"]) .products-hero {
        padding: 55px 0 63px;
    }

    :where(html[data-page-style~="products"]) .products-hero h1 {
        font-size: 33px;
    }

    :where(html[data-page-style~="products"]) .products-hero .hero-content > p {
        font-size: 14.5px;
    }

    :where(html[data-page-style~="products"]) .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    :where(html[data-page-style~="products"]) .stat-box {
        min-height: 96px;
    }

    :where(html[data-page-style~="products"]) .stat-box h2 {
        font-size: 22px;
    }

    :where(html[data-page-style~="products"]) .stat-box span {
        max-width: 105px;
        font-size: 10.5px;
    }

    :where(html[data-page-style~="products"]) .products-section,
:where(html[data-page-style~="products"]) .why-ferrobend,
:where(html[data-page-style~="products"]) .comparison-section {
        padding-top: 50px;
        padding-bottom: 56px;
    }

    :where(html[data-page-style~="products"]) .products-section .section-title h2,
:where(html[data-page-style~="products"]) .why-ferrobend .section-title h2,
:where(html[data-page-style~="products"]) .comparison-section .section-title h2 {
        font-size: 28px;
    }

    :where(html[data-page-style~="products"]) .product-image {
        height: 198px;
    }

    :where(html[data-page-style~="products"]) .product-image img {
        max-height: 150px;
    }

    :where(html[data-page-style~="products"]) .product-content {
        padding: 22px 18px 20px;
    }

    :where(html[data-page-style~="products"]) .product-content::before {
        left: 18px;
    }

    :where(html[data-page-style~="products"]) .product-content h3 {
        font-size: 19px;
    }

    :where(html[data-page-style~="products"]) .product-content > p {
        font-size: 13.5px;
    }

    :where(html[data-page-style~="products"]) .why-card {
        padding: 23px 18px;
    }

}


/* ACCESSIBILITY */
:where(html[data-page-style~="products"]) .product-btn:focus-visible,
:where(html[data-page-style~="products"]) .products-hero .btn:focus-visible,
:where(html[data-page-style~="products"]) .products-hero .breadcrumb a:focus-visible {
    outline: 3px solid rgba(255, 107, 0, 0.40);
    outline-offset: 3px;
}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    :where(html[data-page-style~="products"]) .product-card,
:where(html[data-page-style~="products"]) .product-image img,
:where(html[data-page-style~="products"]) .product-btn,
:where(html[data-page-style~="products"]) .product-btn i,
:where(html[data-page-style~="products"]) .products-hero .btn,
:where(html[data-page-style~="products"]) .products-hero .breadcrumb a,
:where(html[data-page-style~="products"]) .why-card,
:where(html[data-page-style~="products"]) .comparison-table tbody tr {
        transition: none !important;
    }

}


/* SEARCH */

/* FERROBEND SEARCH search.css Purpose: Homepage search dropdown only. Style: Premium / Minimal / Clean Dark   : #17232f Orange : #ff6b00 Warm   : #fff3e8 / #fff8f2 */

/* SEARCH WRAPPER */
:where(html[data-page-style~="search"]) .search-wrapper {
    position: relative;
    z-index: 500;
}


/* SEARCH INPUT Keep the search bar comfortable in height. */
:where(html[data-page-style~="search"]) #siteSearch {
    min-height: 62px;
    height: 62px;
    line-height: 1.4;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-appearance: none;
    appearance: none;
}


/* SEARCH CLEAR BUTTON Native browser X */
:where(html[data-page-style~="search"]) #siteSearch::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 8px;
    cursor: pointer;
    opacity: .55;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2317232f' d='M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.29 19.7 2.88 18.29 9.17 12 2.88 5.71 4.29 4.29l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E")
        center / 13px 13px
        no-repeat;
}

:where(html[data-page-style~="search"]) #siteSearch::-webkit-search-cancel-button:hover {
    opacity: 1;
}

:where(html[data-page-style~="search"]) #siteSearch::-ms-clear {
    display: none;
}


/* SEARCH RESULTS PANEL */
:where(html[data-page-style~="search"]) #searchResults {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: 100%;
    max-height: 430px;
    padding: 6px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffaf6 100%
        );
    border:
        1px solid rgba(23,35,47,.10);
    border-top:
        2px solid #ff6b00;
    border-radius:
        9px;
    box-shadow:
        0 18px 42px rgba(23,35,47,.14);
    overflow-x:
        hidden;
    overflow-y:
        auto;
    overscroll-behavior:
        contain;
    -webkit-overflow-scrolling:
        touch;
    scrollbar-width:
        thin;
    scrollbar-color:
        rgba(255,107,0,.35)
        transparent;
    z-index:
        600;
}


/* SCROLLBAR */
:where(html[data-page-style~="search"]) #searchResults::-webkit-scrollbar {
    width: 5px;
}

:where(html[data-page-style~="search"]) #searchResults::-webkit-scrollbar-track {
    background: transparent;
}

:where(html[data-page-style~="search"]) #searchResults::-webkit-scrollbar-thumb {
    background: rgba(255,107,0,.35);
    border-radius: 20px;
}


/* RESULT ITEM Generic support for JS-generated rows */
:where(html[data-page-style~="search"]) #searchResults > a,
:where(html[data-page-style~="search"]) #searchResults > div,
:where(html[data-page-style~="search"]) #searchResults > li,
:where(html[data-page-style~="search"]) #searchResults .search-result,
:where(html[data-page-style~="search"]) #searchResults .search-result-item {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 11px 12px;
    display: block;
    color: #17232f;
    background: transparent;
    border: 0;
    border-radius: 6px;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}


/* RESULT SEPARATOR */
:where(html[data-page-style~="search"]) #searchResults > a + a,
:where(html[data-page-style~="search"]) #searchResults > div + div,
:where(html[data-page-style~="search"]) #searchResults > li + li,
:where(html[data-page-style~="search"]) #searchResults .search-result + .search-result,
:where(html[data-page-style~="search"]) #searchResults .search-result-item + .search-result-item {
    border-top:
        1px solid rgba(23,35,47,.07);
    border-radius:
        0;
}


/* RESULT HOVER */
:where(html[data-page-style~="search"]) #searchResults > a:hover,
:where(html[data-page-style~="search"]) #searchResults > div:hover,
:where(html[data-page-style~="search"]) #searchResults > li:hover,
:where(html[data-page-style~="search"]) #searchResults .search-result:hover,
:where(html[data-page-style~="search"]) #searchResults .search-result-item:hover {
    background:
        linear-gradient(
            90deg,
            #fff3e8 0%,
            #fff8f2 100%
        );
}


/* RESULT TITLE */
:where(html[data-page-style~="search"]) #searchResults .search-title,
:where(html[data-page-style~="search"]) #searchResults .result-title,
:where(html[data-page-style~="search"]) #searchResults h3,
:where(html[data-page-style~="search"]) #searchResults h4 {
    display: block;
    margin: 0;
    color: #17232f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}


/* RESULT TITLE HOVER */
:where(html[data-page-style~="search"]) #searchResults > a:hover .search-title,
:where(html[data-page-style~="search"]) #searchResults > a:hover .result-title,
:where(html[data-page-style~="search"]) #searchResults > div:hover .search-title,
:where(html[data-page-style~="search"]) #searchResults > div:hover .result-title,
:where(html[data-page-style~="search"]) #searchResults .search-result:hover .search-title,
:where(html[data-page-style~="search"]) #searchResults .search-result:hover .result-title {
    color:
        #ff6b00;
}


/* RESULT DESCRIPTION */
:where(html[data-page-style~="search"]) #searchResults .search-description,
:where(html[data-page-style~="search"]) #searchResults .result-description,
:where(html[data-page-style~="search"]) #searchResults p {
    display: block;
    margin: 3px 0 0;
    color: #666666;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}


/* RESULT CATEGORY / TYPE */
:where(html[data-page-style~="search"]) #searchResults .search-category,
:where(html[data-page-style~="search"]) #searchResults .result-category,
:where(html[data-page-style~="search"]) #searchResults .category,
:where(html[data-page-style~="search"]) #searchResults .type {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 7px;
    color: #ff6b00;
    background: #fff3e8;
    border:
        1px solid rgba(255,107,0,.10);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
}


/* RESULT ICON Small icon beside text */
:where(html[data-page-style~="search"]) #searchResults .search-result-icon,
:where(html[data-page-style~="search"]) #searchResults .result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin-right: 8px;
    vertical-align: middle;
    color: #ff6b00;
    background:
        linear-gradient(
            145deg,
            #fff3e8,
            #fff8f2
        );
    border:
        1px solid rgba(255,107,0,.10);
    border-radius: 6px;
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}


/* ICON + TITLE ALIGNMENT This keeps the icon BESIDE the title. */
:where(html[data-page-style~="search"]) #searchResults .search-result-icon + .search-title,
:where(html[data-page-style~="search"]) #searchResults .result-icon + .result-title {
    display: inline;
    vertical-align: middle;
}


/* RESULT LINK */
:where(html[data-page-style~="search"]) #searchResults a {
    color: inherit;
    text-decoration: none;
}


/* RESULT LIST */
:where(html[data-page-style~="search"]) #searchResults ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(html[data-page-style~="search"]) #searchResults li {
    margin: 0;
    padding: 0;
}


/* NO RESULTS */
:where(html[data-page-style~="search"]) #searchResults .no-results,
:where(html[data-page-style~="search"]) #searchResults .search-no-results,
:where(html[data-page-style~="search"]) #searchResults .no-result {
    display: block;
    padding: 15px 12px;
    color: #70777c;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.5;
}


/* RESULTS HEADING */
:where(html[data-page-style~="search"]) #searchResults .results-heading,
:where(html[data-page-style~="search"]) #searchResults .search-results-heading {
    padding:
        7px 10px 6px;
    color:
        #8b9297;
    font-size:
        9.5px;
    font-weight:
        700;
    letter-spacing:
        1.15px;
    line-height:
        1.35;
    text-transform:
        uppercase;
}


/* MOBILE */
@media (max-width: 768px) {
    :where(html[data-page-style~="search"]) .search-wrapper {
        position:
            relative;
        z-index:
            700;
    }

    :where(html[data-page-style~="search"]) #siteSearch {
        min-height:
            58px;
        height:
            58px;
    }

    /* Smaller but still comfortable clear button */
    :where(html[data-page-style~="search"]) #siteSearch::-webkit-search-cancel-button {
        width:
            19px;
        height:
            19px;
        margin:
            0 4px 0 6px;
        background-size:
            12px 12px;
    }

    /* Dropdown */
    :where(html[data-page-style~="search"]) #searchResults {
        top:
            calc(100% + 7px);
        left:
            0;
        right:
            0;
        width:
            100%;
        max-width:
            100%;
        max-height:
            50vh;
        padding:
            5px;
        border-radius:
            8px;
        overflow-x:
            hidden;
        overflow-y:
            auto;
    }

    /* Rows */
    :where(html[data-page-style~="search"]) #searchResults > a,
:where(html[data-page-style~="search"]) #searchResults > div,
:where(html[data-page-style~="search"]) #searchResults > li,
:where(html[data-page-style~="search"]) #searchResults .search-result,
:where(html[data-page-style~="search"]) #searchResults .search-result-item {
        width:
            100%;
        min-width:
            0;
        padding:
            11px 10px;
        white-space:
            normal;
        overflow-wrap:
            anywhere;
        cursor:
            pointer;
    }

    /* Title */
    :where(html[data-page-style~="search"]) #searchResults .search-title,
:where(html[data-page-style~="search"]) #searchResults .result-title,
:where(html[data-page-style~="search"]) #searchResults h3,
:where(html[data-page-style~="search"]) #searchResults h4 {
        font-size:
            13.5px;
        line-height:
            1.45;
    }

    /* Description */
    :where(html[data-page-style~="search"]) #searchResults .search-description,
:where(html[data-page-style~="search"]) #searchResults .result-description,
:where(html[data-page-style~="search"]) #searchResults p {
        font-size:
            11.8px;
        line-height:
            1.5;
    }

    /* Icon */
    :where(html[data-page-style~="search"]) #searchResults .search-result-icon,
:where(html[data-page-style~="search"]) #searchResults .result-icon {
        width:
            26px;
        height:
            26px;
        margin-right:
            7px;
        font-size:
            10.5px;
    }

    /* Mobile hover should never stay stuck */
    :where(html[data-page-style~="search"]) #searchResults > a:hover,
:where(html[data-page-style~="search"]) #searchResults > div:hover,
:where(html[data-page-style~="search"]) #searchResults > li:hover,
:where(html[data-page-style~="search"]) #searchResults .search-result:hover,
:where(html[data-page-style~="search"]) #searchResults .search-result-item:hover {
        background:
            transparent;
    }

    /* Touch feedback */
    :where(html[data-page-style~="search"]) #searchResults > a:active,
:where(html[data-page-style~="search"]) #searchResults > div:active,
:where(html[data-page-style~="search"]) #searchResults > li:active,
:where(html[data-page-style~="search"]) #searchResults .search-result:active,
:where(html[data-page-style~="search"]) #searchResults .search-result-item:active {
        background:
            #fff3e8;
    }

}


/* SMALL MOBILE */
@media (max-width: 480px) {
    :where(html[data-page-style~="search"]) #siteSearch {
        min-height:
            56px;
        height:
            56px;
    }

    :where(html[data-page-style~="search"]) #siteSearch::-webkit-search-cancel-button {
        width:
            19px;
        height:
            19px;
        background-size:
            12px 12px;
    }

    :where(html[data-page-style~="search"]) #searchResults {
        max-height:
            46vh;
        padding:
            4px;
        border-radius:
            7px;
    }

    :where(html[data-page-style~="search"]) #searchResults > a,
:where(html[data-page-style~="search"]) #searchResults > div,
:where(html[data-page-style~="search"]) #searchResults > li,
:where(html[data-page-style~="search"]) #searchResults .search-result,
:where(html[data-page-style~="search"]) #searchResults .search-result-item {
        padding:
            10px 9px;
    }

    :where(html[data-page-style~="search"]) #searchResults .search-title,
:where(html[data-page-style~="search"]) #searchResults .result-title,
:where(html[data-page-style~="search"]) #searchResults h3,
:where(html[data-page-style~="search"]) #searchResults h4 {
        font-size:
            13px;
    }

    :where(html[data-page-style~="search"]) #searchResults .search-description,
:where(html[data-page-style~="search"]) #searchResults .result-description,
:where(html[data-page-style~="search"]) #searchResults p {
        font-size:
            11.5px;
    }

}


/* NO HORIZONTAL OVERFLOW */
:where(html[data-page-style~="search"]) #searchResults,
:where(html[data-page-style~="search"]) #searchResults * {
    max-width:
        100%;
    box-sizing:
        border-box;
    overflow-wrap:
        anywhere;
}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    :where(html[data-page-style~="search"]) #searchResults,
:where(html[data-page-style~="search"]) #searchResults * {
        transition:
            none !important;
    }

}


/* HIDE SEARCH DROPDOWN UNTIL RESULTS EXIST */
:where(html[data-page-style~="search"]) #searchResults {
    display: none;
}

:where(html[data-page-style~="search"]) #searchResults:has(*) {
    display: block;
}


/* Accessibility: readable orange text on light search surfaces */
:where(html[data-page-style~="search"]) #searchResults .category,
:where(html[data-page-style~="search"]) #searchResults .type,
:where(html[data-page-style~="search"]) .search-result-category { color:#b04200; }


/* TECHNICAL */

/* FERROBEND — TECHNICAL.CSS Premium Engineering Resource Page Common system: - homepage.css controls header/footer/CTA/button base - technical.css controls Technical page sections */

/* ROOT */
:root:where([data-page-style~="technical"]) {
    --technical-dark: #17232f;
    --technical-deep: #111a21;
    --technical-soft-dark: #232323;
    --technical-orange: #ff6b00;
    --technical-orange-hover: #e85f00;
    --technical-white: #ffffff;
    --technical-light: #f7f8fa;
    --technical-soft: #f3f4f5;
    --technical-warm: #fff8f2;
    --technical-text: #222222;
    --technical-muted: #666666;
    --technical-border: #e5e5e5;
    --technical-gradient-dark:
        linear-gradient(
            120deg,
            #111a21 0%,
            #17232f 52%,
            #232323 100%
        );
    --technical-gradient-dark-soft:
        linear-gradient(
            135deg,
            #17232f 0%,
            #202a31 58%,
            #232323 100%
        );
    --technical-gradient-warm:
        linear-gradient(
            145deg,
            #fff3e8 0%,
            #fff8f2 42%,
            #ffffff 100%
        );
    --technical-gradient-orange:
        linear-gradient(
            135deg,
            #ff7a14 0%,
            #ff6b00 58%,
            #e85f00 100%
        );
    --technical-shadow-sm:
        0 8px 24px rgba(23,35,47,.07);
    --technical-shadow-md:
        0 15px 40px rgba(23,35,47,.11);
    --technical-shadow-lg:
        0 25px 60px rgba(23,35,47,.16);
    --technical-radius-sm: 5px;
    --technical-radius-md: 8px;
    --technical-radius-lg: 12px;
    --technical-radius-xl: 18px;
    --technical-transition: .3s ease;
}


/* HERO */
:where(html[data-page-style~="technical"]) .technical-hero {
    position: relative;
    min-height: 545px;
    padding: 72px 0 76px;
    overflow: hidden;
    color: var(--technical-white);
    background:
        radial-gradient(
            circle at 88% 39%,
            rgba(255,107,0,.16) 0,
            rgba(255,107,0,.08) 13%,
            transparent 34%
        ),
        radial-gradient(
            circle at 76% 100%,
            rgba(255,255,255,.045) 0,
            transparent 28%
        ),
        var(--technical-gradient-dark);
}

:where(html[data-page-style~="technical"]) .technical-hero::before {
    content: "";
    position: absolute;
    width: 570px;
    height: 570px;
    right: -235px;
    top: 50%;
    transform: translateY(-50%);
    border:
        1px solid rgba(255,255,255,.07);
    border-radius: 50%;
    box-shadow:
        0 0 0 75px rgba(255,107,0,.018),
        0 0 0 150px rgba(255,255,255,.012);
    pointer-events: none;
}

:where(html[data-page-style~="technical"]) .technical-hero::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    border:
        1px dashed rgba(255,107,0,.13);
    border-radius: 50%;
    pointer-events: none;
}


/* HERO GRID */
:where(html[data-page-style~="technical"]) .technical-hero-grid {
    position: relative;
    z-index: 2;
    min-height: 395px;
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, .92fr);
    align-items: center;
    gap: 54px;
}


/* HERO CONTENT */
:where(html[data-page-style~="technical"]) .technical-hero-content {
    position: relative;
    z-index: 3;
    max-width: 780px;
}


/* BREADCRUMB EXACT PRODUCT PAGE STYLE */
:where(html[data-page-style~="technical"]) .technical-hero .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 21px;
    color: rgba(255,255,255,.77);
    font-size: 15.5px;
    line-height: 1.5;
}

:where(html[data-page-style~="technical"]) .technical-hero .breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    opacity: .84;
    transition:
        color var(--technical-transition),
        opacity var(--technical-transition);
}

:where(html[data-page-style~="technical"]) .technical-hero .breadcrumb a:hover {
    color: var(--technical-orange);
    opacity: 1;
}

:where(html[data-page-style~="technical"]) .technical-hero .breadcrumb span {
    color: rgba(255,255,255,.40);
}

:where(html[data-page-style~="technical"]) .technical-hero .breadcrumb strong {
    color: var(--technical-orange);
    font-weight: 600;
}


/* HERO SUBTITLE */
:where(html[data-page-style~="technical"]) .technical-hero .hero-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 19px;
    color: var(--technical-orange);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

:where(html[data-page-style~="technical"]) .technical-hero .hero-subtitle::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--technical-orange);
}


/* HERO H1 */
:where(html[data-page-style~="technical"]) .technical-hero h1 {
    max-width: 800px;
    margin: 0 0 18px;
    color: #ffffff;
    font-size:
        clamp(44px, 5vw, 66px);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -1.4px;
}

:where(html[data-page-style~="technical"]) .technical-hero-content > p {
    max-width: 720px;
    margin: 0;
    color: #d5dce2;
    font-size: 16.5px;
    line-height: 1.78;
}


/* HERO META */
:where(html[data-page-style~="technical"]) .technical-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 25px;
}

:where(html[data-page-style~="technical"]) .technical-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border:
        1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.78);
    font-size: 11.5px;
    font-weight: 500;
}

:where(html[data-page-style~="technical"]) .technical-hero-meta i {
    color: var(--technical-orange);
    font-size: 11px;
}


/* HERO RESOURCE PANEL */
:where(html[data-page-style~="technical"]) .technical-hero-panel {
    position: relative;
    padding: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.035)
        );
    border:
        1px solid rgba(255,255,255,.12);
    border-radius:
        var(--technical-radius-xl);
    box-shadow:
        0 26px 65px rgba(0,0,0,.24);
    backdrop-filter: blur(8px);
}

:where(html[data-page-style~="technical"]) .technical-hero-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 2px;
    background: var(--technical-gradient-orange);
    border-radius: 20px;
}


/* PANEL TOP */
:where(html[data-page-style~="technical"]) .hero-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom:
        1px solid rgba(255,255,255,.09);
}

:where(html[data-page-style~="technical"]) .hero-panel-top span {
    color: var(--technical-orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
}


/* PANEL MAIN */
:where(html[data-page-style~="technical"]) .hero-panel-main {
    padding: 20px 0 17px;
}

:where(html[data-page-style~="technical"]) .hero-panel-main h2 {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 600;
}

:where(html[data-page-style~="technical"]) .hero-panel-main p {
    margin: 0;
    color: rgba(255,255,255,.64);
    font-size: 13px;
    line-height: 1.7;
}


/* PANEL ITEMS */
:where(html[data-page-style~="technical"]) .hero-panel-list {
    display: grid;
    gap: 8px;
}

:where(html[data-page-style~="technical"]) .hero-panel-item {
    display: grid;
    grid-template-columns:
        38px
        minmax(0,1fr)
        18px;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border:
        1px solid rgba(255,255,255,.075);
    border-radius: 10px;
    background:
        rgba(255,255,255,.035);
    text-decoration: none;
    transition:
        transform var(--technical-transition),
        border-color var(--technical-transition),
        background var(--technical-transition);
}

:where(html[data-page-style~="technical"]) .hero-panel-item:hover {
    transform: translateX(4px);
    border-color: rgba(255,107,0,.28);
    background: rgba(255,107,0,.07);
}

:where(html[data-page-style~="technical"]) .hero-panel-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255,107,0,.10);
    color: var(--technical-orange);
    font-size: 15px;
}

:where(html[data-page-style~="technical"]) .hero-panel-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

:where(html[data-page-style~="technical"]) .hero-panel-text strong {
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

:where(html[data-page-style~="technical"]) .hero-panel-text small {
    color: rgba(255,255,255,.50);
    font-size: 10.5px;
    line-height: 1.4;
}

:where(html[data-page-style~="technical"]) .hero-panel-item > i {
    color: rgba(255,255,255,.42);
    font-size: 10px;
    transition:
        color var(--technical-transition),
        transform var(--technical-transition);
}

:where(html[data-page-style~="technical"]) .hero-panel-item:hover > i {
    color: var(--technical-orange);
    transform: translateX(2px);
}


/* TECHNICAL PAGES SECTION */
:where(html[data-page-style~="technical"]) .technical-pages {
    padding: 76px 0 82px;
    background:
        radial-gradient(
            circle at 7% 10%,
            rgba(255,107,0,.07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #f7f8fa 0%,
            #ffffff 55%,
            #fff8f2 100%
        );
}


/* SECTION TITLE */
:where(html[data-page-style~="technical"]) .technical-pages .section-title {
    max-width: 820px;
    margin: 0 auto 42px;
    text-align: center;
}

:where(html[data-page-style~="technical"]) .technical-pages .section-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--technical-orange);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.3px;
    text-transform: uppercase;
}

:where(html[data-page-style~="technical"]) .technical-pages .section-title span::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--technical-orange);
}

:where(html[data-page-style~="technical"]) .technical-pages .section-title h2 {
    margin: 0 0 11px;
    color: var(--technical-dark);
    font-size:
        clamp(34px, 4vw, 48px);
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: -.7px;
}

:where(html[data-page-style~="technical"]) .technical-pages .section-title p {
    max-width: 700px;
    margin: 0 auto;
    color: var(--technical-muted);
    font-size: 15px;
    line-height: 1.75;
}


/* RESOURCE GRID */
:where(html[data-page-style~="technical"]) .technical-resource-grid {
    display: grid;
    grid-template-columns:
        repeat(3,1fr);
    gap: 17px;
}


/* RESOURCE CARD */
:where(html[data-page-style~="technical"]) .technical-card {
    position: relative;
    min-height: 315px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffaf6 100%
        );
    border:
        1px solid var(--technical-border);
    border-radius:
        var(--technical-radius-lg);
    box-shadow:
        var(--technical-shadow-sm);
    text-decoration: none;
    overflow: hidden;
    transition:
        transform var(--technical-transition),
        box-shadow var(--technical-transition),
        border-color var(--technical-transition);
}

:where(html[data-page-style~="technical"]) .technical-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background:
        var(--technical-gradient-orange);
    transform:
        scaleX(.12);
    transform-origin: left;
    transition:
        transform var(--technical-transition);
}

:where(html[data-page-style~="technical"]) .technical-card::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -80px;
    bottom: -85px;
    border:
        1px solid rgba(255,107,0,.08);
    border-radius: 50%;
}

:where(html[data-page-style~="technical"]) .technical-card:hover {
    transform: translateY(-7px);
    border-color: rgba(255,107,0,.25);
    box-shadow:
        var(--technical-shadow-md);
}

:where(html[data-page-style~="technical"]) .technical-card:hover::before {
    transform:
        scaleX(1);
}


/* CARD HEAD */
:where(html[data-page-style~="technical"]) .technical-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

:where(html[data-page-style~="technical"]) .technical-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border:
        1px solid rgba(255,107,0,.12);
    border-radius: 11px;
    background:
        linear-gradient(
            145deg,
            #fff3e8,
            #fff8f2
        );
    color:
        var(--technical-orange);
    font-size:
        23px;
    transition:
        background var(--technical-transition),
        color var(--technical-transition),
        transform var(--technical-transition);
}

:where(html[data-page-style~="technical"]) .technical-card-number {
    color: #c7ccd0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

:where(html[data-page-style~="technical"]) .technical-card:hover .technical-icon {
    transform: translateY(-2px);
    background:
        var(--technical-gradient-orange);
    color: #ffffff;
}


/* CARD CONTENT */
:where(html[data-page-style~="technical"]) .technical-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

:where(html[data-page-style~="technical"]) .technical-content h3 {
    margin: 0 0 10px;
    color:
        var(--technical-dark);
    font-size:
        21px;
    font-weight:
        600;
    line-height:
        1.34;
}

:where(html[data-page-style~="technical"]) .technical-content p {
    margin: 0;
    color:
        var(--technical-muted);
    font-size:
        14px;
    line-height:
        1.75;
}


/* CARD FOOTER */
:where(html[data-page-style~="technical"]) .technical-card-footer {
    position:
        relative;
    z-index:
        2;
    display:
        flex;
    align-items:
        center;
    justify-content:
        space-between;
    gap:
        15px;
    margin-top:
        26px;
    padding-top:
        17px;
    border-top:
        1px solid var(--technical-border);
    color:
        var(--technical-dark);
    font-size:
        12px;
    font-weight:
        600;
}

:where(html[data-page-style~="technical"]) .technical-card-footer i {
    width:
        29px;
    height:
        29px;
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    border-radius:
        50%;
    background:
        var(--technical-dark);
    color:
        var(--technical-orange);
    font-size:
        10px;
    transition:
        background var(--technical-transition),
        color var(--technical-transition),
        transform var(--technical-transition);
}

:where(html[data-page-style~="technical"]) .technical-card:hover .technical-card-footer i {
    background:
        var(--technical-gradient-orange);
    color:
        #ffffff;
    transform:
        translateX(3px);
}


/* ENGINEERING SECTION */
:where(html[data-page-style~="technical"]) .engineering-section {
    position:
        relative;
    padding:
        78px 0 82px;
    overflow:
        hidden;
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(255,107,0,.11),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 82%,
            rgba(255,255,255,.04),
            transparent 23%
        ),
        var(--technical-gradient-dark);
}

:where(html[data-page-style~="technical"]) .engineering-section::before {
    content:
        "";
    position:
        absolute;
    inset:
        0;
    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );
    background-size:
        42px 42px;
    opacity:
        .46;
    pointer-events:
        none;
}

:where(html[data-page-style~="technical"]) .engineering-section .container {
    position:
        relative;
    z-index:
        2;
}


/* DARK SECTION TITLE */
:where(html[data-page-style~="technical"]) .dark-section-title {
    max-width:
        860px;
    margin:
        0 auto 42px;
    text-align:
        center;
}

:where(html[data-page-style~="technical"]) .dark-section-title span {
    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        center;
    gap:
        10px;
    margin-bottom:
        10px;
    color:
        var(--technical-orange);
    font-size:
        12px;
    font-weight:
        700;
    letter-spacing:
        2.3px;
    text-transform:
        uppercase;
}

:where(html[data-page-style~="technical"]) .dark-section-title span::before {
    content:
        "";
    width:
        28px;
    height:
        2px;
    background:
        var(--technical-orange);
}

:where(html[data-page-style~="technical"]) .dark-section-title h2 {
    margin:
        0 0 11px;
    color:
        #ffffff;
    font-size:
        clamp(34px, 4vw, 48px);
    line-height:
        1.14;
    font-weight:
        700;
    letter-spacing:
        -.7px;
}

:where(html[data-page-style~="technical"]) .dark-section-title p {
    max-width:
        710px;
    margin:
        0 auto;
    color:
        rgba(255,255,255,.67);
    font-size:
        15px;
    line-height:
        1.75;
}


/* ENGINEERING LAYOUT */
:where(html[data-page-style~="technical"]) .engineering-layout {
    display:
        grid;
    grid-template-columns:
        minmax(0,1.1fr)
        minmax(340px,.9fr);
    gap:
        38px;
    align-items:
        stretch;
}


/* ENGINEERING COPY CARD */
:where(html[data-page-style~="technical"]) .engineering-copy-card {
    padding:
        29px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.085),
            rgba(255,255,255,.028)
        );
    border:
        1px solid rgba(255,255,255,.11);
    border-radius:
        var(--technical-radius-lg);
    box-shadow:
        0 18px 42px rgba(0,0,0,.14);
}

:where(html[data-page-style~="technical"]) .engineering-card-label {
    display:
        inline-flex;
    align-items:
        center;
    gap:
        9px;
    margin-bottom:
        20px;
    color:
        var(--technical-orange);
    font-size:
        11px;
    font-weight:
        700;
    letter-spacing:
        1.8px;
    text-transform:
        uppercase;
}

:where(html[data-page-style~="technical"]) .engineering-copy-card p {
    margin:
        0 0 18px;
    color:
        #d5dce2;
    font-size:
        15px;
    line-height:
        1.82;
}

:where(html[data-page-style~="technical"]) .engineering-highlight {
    display:
        flex;
    align-items:
        flex-start;
    gap:
        11px;
    margin-top:
        25px;
    padding:
        15px;
    border:
        1px solid rgba(255,107,0,.18);
    border-radius:
        10px;
    background:
        rgba(255,107,0,.065);
}

:where(html[data-page-style~="technical"]) .engineering-highlight i {
    flex:
        0 0 auto;
    margin-top:
        2px;
    color:
        var(--technical-orange);
    font-size:
        15px;
}

:where(html[data-page-style~="technical"]) .engineering-highlight span {
    color:
        rgba(255,255,255,.84);
    font-size:
        13px;
    line-height:
        1.55;
}


/* ENGINEERING POINTS */
:where(html[data-page-style~="technical"]) .engineering-points {
    display:
        grid;
    grid-template-columns:
        1fr;
    gap:
        10px;
}

:where(html[data-page-style~="technical"]) .engineering-item {
    display:
        grid;
    grid-template-columns:
        44px
        minmax(0,1fr);
    align-items:
        center;
    gap:
        13px;
    padding:
        13px;
    min-height:
        72px;
    border:
        1px solid rgba(255,255,255,.09);
    border-radius:
        11px;
    background:
        rgba(255,255,255,.045);
    transition:
        transform var(--technical-transition),
        border-color var(--technical-transition),
        background var(--technical-transition);
}

:where(html[data-page-style~="technical"]) .engineering-item:hover {
    transform:
        translateX(4px);
    border-color:
        rgba(255,107,0,.27);
    background:
        rgba(255,107,0,.07);
}

:where(html[data-page-style~="technical"]) .engineering-item-icon {
    width:
        44px;
    height:
        44px;
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    border-radius:
        10px;
    background:
        rgba(255,107,0,.10);
    color:
        var(--technical-orange);
    font-size:
        16px;
}

:where(html[data-page-style~="technical"]) .engineering-item-content {
    min-width:
        0;
    display:
        flex;
    flex-direction:
        column;
    gap:
        3px;
}

:where(html[data-page-style~="technical"]) .engineering-item-content strong {
    color:
        #ffffff;
    font-size:
        13px;
    font-weight:
        600;
    line-height:
        1.4;
}

:where(html[data-page-style~="technical"]) .engineering-item-content small {
    color:
        rgba(255,255,255,.50);
    font-size:
        10.5px;
    line-height:
        1.45;
}


/* TABLET */
@media (max-width: 1050px) {
    :where(html[data-page-style~="technical"]) .technical-hero-grid {
        grid-template-columns:
            minmax(0,1fr)
            minmax(330px,.8fr);
        gap:
            30px;
    }

    :where(html[data-page-style~="technical"]) .technical-resource-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    :where(html[data-page-style~="technical"]) .technical-resource-grid .technical-card:last-child {
        grid-column:
            1 / -1;
    }

    :where(html[data-page-style~="technical"]) .engineering-layout {
        grid-template-columns:
            1fr;
    }

}

@media (max-width: 850px) {
    :where(html[data-page-style~="technical"]) .technical-hero {
        min-height:
            auto;
        padding:
            68px 0 70px;
    }

    :where(html[data-page-style~="technical"]) .technical-hero-grid {
        grid-template-columns:
            1fr;
        min-height:
            auto;
        gap:
            34px;
    }

    :where(html[data-page-style~="technical"]) .technical-hero-content {
        max-width:
            850px;
    }

    :where(html[data-page-style~="technical"]) .technical-hero-panel {
        max-width:
            680px;
        width:
            100%;
        margin:
            0 auto;
    }

}


/* MOBILE */
@media (max-width: 768px) {
    /* HERO */
    :where(html[data-page-style~="technical"]) .technical-hero {
        padding:
            55px 0 55px;
    }

    /* EXACT PRODUCT PAGE BREADCRUMB SIZE 15.5PX */
    :where(html[data-page-style~="technical"]) .technical-hero .breadcrumb {
        margin:
            0 0 17px;
        font-size:
            15.5px;
        line-height:
            1.5;
    }

    :where(html[data-page-style~="technical"]) .technical-hero .hero-subtitle {
        margin-bottom:
            15px;
        font-size:
            11px;
        letter-spacing:
            1.7px;
    }

    :where(html[data-page-style~="technical"]) .technical-hero .hero-subtitle::before {
        width:
            24px;
    }

    :where(html[data-page-style~="technical"]) .technical-hero h1 {
        margin-bottom:
            17px;
        font-size:
            38px;
        line-height:
            1.12;
        letter-spacing:
            -.6px;
    }

    :where(html[data-page-style~="technical"]) .technical-hero-content > p {
        font-size:
            15px;
        line-height:
            1.72;
    }

    :where(html[data-page-style~="technical"]) .technical-hero-meta {
        gap:
            7px;
        margin-top:
            20px;
    }

    :where(html[data-page-style~="technical"]) .technical-hero-meta span {
        padding:
            7px 9px;
        font-size:
            10.5px;
    }

    /* HERO PANEL */
    :where(html[data-page-style~="technical"]) .technical-hero-panel {
        padding:
            19px;
        border-radius:
            15px;
    }

    :where(html[data-page-style~="technical"]) .hero-panel-main {
        padding:
            17px 0 14px;
    }

    :where(html[data-page-style~="technical"]) .hero-panel-main h2 {
        font-size:
            19px;
    }

    :where(html[data-page-style~="technical"]) .hero-panel-main p {
        font-size:
            12.5px;
    }

    :where(html[data-page-style~="technical"]) .hero-panel-item {
        grid-template-columns:
            35px
            minmax(0,1fr)
            16px;
        padding:
            9px;
    }

    :where(html[data-page-style~="technical"]) .hero-panel-icon {
        width:
            35px;
        height:
            35px;
        font-size:
            14px;
    }

    :where(html[data-page-style~="technical"]) .hero-panel-text strong {
        font-size:
            11.5px;
    }

    :where(html[data-page-style~="technical"]) .hero-panel-text small {
        font-size:
            10px;
    }

    /* DECORATION */
    :where(html[data-page-style~="technical"]) .technical-hero::before {
        width:
            390px;
        height:
            390px;
        right:
            -210px;
    }

    :where(html[data-page-style~="technical"]) .technical-hero::after {
        width:
            250px;
        height:
            250px;
        right:
            -5px;
    }

    /* RESOURCE SECTION */
    :where(html[data-page-style~="technical"]) .technical-pages {
        padding:
            55px 0 60px;
    }

    :where(html[data-page-style~="technical"]) .technical-pages .section-title {
        margin-bottom:
            31px;
    }

    :where(html[data-page-style~="technical"]) .technical-pages .section-title span,
:where(html[data-page-style~="technical"]) .dark-section-title span {
        font-size:
            10px;
        letter-spacing:
            1.8px;
    }

    :where(html[data-page-style~="technical"]) .technical-pages .section-title span::before,
:where(html[data-page-style~="technical"]) .dark-section-title span::before {
        width:
            21px;
    }

    :where(html[data-page-style~="technical"]) .technical-pages .section-title h2,
:where(html[data-page-style~="technical"]) .dark-section-title h2 {
        font-size:
            31px;
        line-height:
            1.18;
    }

    :where(html[data-page-style~="technical"]) .technical-pages .section-title p,
:where(html[data-page-style~="technical"]) .dark-section-title p {
        font-size:
            13.5px;
        line-height:
            1.7;
    }

    /* RESOURCE GRID */
    :where(html[data-page-style~="technical"]) .technical-resource-grid {
        grid-template-columns:
            1fr;
        gap:
            12px;
    }

    :where(html[data-page-style~="technical"]) .technical-resource-grid .technical-card:last-child {
        grid-column:
            auto;
    }

    :where(html[data-page-style~="technical"]) .technical-card {
        min-height:
            0;
        padding:
            20px;
        border-radius:
            13px;
    }

    :where(html[data-page-style~="technical"]) .technical-card-head {
        margin-bottom:
            18px;
    }

    :where(html[data-page-style~="technical"]) .technical-icon {
        width:
            52px;
        height:
            52px;
        font-size:
            20px;
    }

    :where(html[data-page-style~="technical"]) .technical-content h3 {
        font-size:
            18px;
        line-height:
            1.35;
    }

    :where(html[data-page-style~="technical"]) .technical-content p {
        font-size:
            13.5px;
        line-height:
            1.68;
    }

    :where(html[data-page-style~="technical"]) .technical-card-footer {
        margin-top:
            22px;
        padding-top:
            14px;
        font-size:
            11.5px;
    }

    /* ENGINEERING */
    :where(html[data-page-style~="technical"]) .engineering-section {
        padding:
            58px 0 62px;
    }

    :where(html[data-page-style~="technical"]) .engineering-layout {
        gap:
            20px;
    }

    :where(html[data-page-style~="technical"]) .engineering-copy-card {
        padding:
            22px;
    }

    :where(html[data-page-style~="technical"]) .engineering-copy-card p {
        font-size:
            14px;
        line-height:
            1.76;
    }

    :where(html[data-page-style~="technical"]) .engineering-item {
        min-height:
            64px;
        grid-template-columns:
            40px
            minmax(0,1fr);
    }

    :where(html[data-page-style~="technical"]) .engineering-item-icon {
        width:
            40px;
        height:
            40px;
        font-size:
            14px;
    }

    :where(html[data-page-style~="technical"]) .engineering-item-content strong {
        font-size:
            12px;
    }

    :where(html[data-page-style~="technical"]) .engineering-item-content small {
        font-size:
            10px;
    }

}


/* SMALL MOBILE */
@media (max-width: 480px) {
    :where(html[data-page-style~="technical"]) .technical-hero {
        padding:
            50px 0 50px;
    }

    /* KEEP SAME PRODUCT-PAGE BREADCRUMB SIZE */
    :where(html[data-page-style~="technical"]) .technical-hero .breadcrumb {
        margin:
            0 0 17px;
        font-size:
            15.5px;
        line-height:
            1.5;
    }

    :where(html[data-page-style~="technical"]) .technical-hero h1 {
        font-size:
            32px;
    }

    :where(html[data-page-style~="technical"]) .technical-hero-content > p {
        font-size:
            14px;
    }

    :where(html[data-page-style~="technical"]) .technical-hero-meta {
        display:
            grid;
        grid-template-columns:
            1fr;
        width:
            100%;
    }

    :where(html[data-page-style~="technical"]) .technical-hero-meta span {
        width:
            fit-content;
    }

    :where(html[data-page-style~="technical"]) .technical-hero-panel {
        padding:
            17px;
    }

    :where(html[data-page-style~="technical"]) .hero-panel-top {
        padding-bottom:
            15px;
    }

    :where(html[data-page-style~="technical"]) .hero-panel-main h2 {
        font-size:
            18px;
    }

    :where(html[data-page-style~="technical"]) .technical-hero::before {
        width:
            330px;
        height:
            330px;
        right:
            -180px;
    }

    :where(html[data-page-style~="technical"]) .technical-hero::after {
        width:
            210px;
        height:
            210px;
        right:
            5px;
    }

    :where(html[data-page-style~="technical"]) .technical-pages {
        padding:
            50px 0 54px;
    }

    :where(html[data-page-style~="technical"]) .technical-pages .section-title h2,
:where(html[data-page-style~="technical"]) .dark-section-title h2 {
        font-size:
            29px;
    }

    :where(html[data-page-style~="technical"]) .technical-card {
        padding:
            18px;
        border-radius:
            11px;
    }

    :where(html[data-page-style~="technical"]) .technical-icon {
        width:
            50px;
        height:
            50px;
        font-size:
            19px;
    }

    :where(html[data-page-style~="technical"]) .technical-content h3 {
        font-size:
            17px;
    }

    :where(html[data-page-style~="technical"]) .technical-content p {
        font-size:
            13px;
    }

    :where(html[data-page-style~="technical"]) .engineering-section {
        padding:
            52px 0 56px;
    }

    :where(html[data-page-style~="technical"]) .engineering-copy-card {
        padding:
            19px;
    }

    :where(html[data-page-style~="technical"]) .engineering-copy-card p {
        font-size:
            13.5px;
    }

    :where(html[data-page-style~="technical"]) .engineering-highlight {
        padding:
            13px;
    }

    :where(html[data-page-style~="technical"]) .engineering-highlight span {
        font-size:
            12px;
    }

    :where(html[data-page-style~="technical"]) .engineering-item {
        grid-template-columns:
            37px
            minmax(0,1fr);
        padding:
            11px;
    }

    :where(html[data-page-style~="technical"]) .engineering-item-icon {
        width:
            37px;
        height:
            37px;
    }

}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    :where(html[data-page-style~="technical"]) .technical-card,
:where(html[data-page-style~="technical"]) .technical-card::before,
:where(html[data-page-style~="technical"]) .technical-icon,
:where(html[data-page-style~="technical"]) .technical-card-footer i,
:where(html[data-page-style~="technical"]) .hero-panel-item,
:where(html[data-page-style~="technical"]) .hero-panel-item > i,
:where(html[data-page-style~="technical"]) .engineering-item {
        transition:
            none !important;
    }

}


/* TECHNICAL STANDARD SHORTCUTS */
:where(html[data-page-style~="technical"]) .technical-standard-shortcuts {
    padding:64px 0;
    background:#f6f7f8;
}

:where(html[data-page-style~="technical"]) .technical-standard-links {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:30px;
}

:where(html[data-page-style~="technical"]) .technical-standard-links a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:58px;
    padding:14px 18px;
    color:#17232f;
    background:#fff;
    border:1px solid #e2e6e9;
    border-left:3px solid #ef7f1a;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

:where(html[data-page-style~="technical"]) .technical-standard-links a:hover {
    transform:translateY(-2px);
    border-color:#ef7f1a;
    box-shadow:0 9px 24px rgba(23,35,47,.08);
}

@media (max-width:768px){
    :where(html[data-page-style~="technical"]) .technical-standard-shortcuts {padding:50px 0;}

    :where(html[data-page-style~="technical"]) .technical-standard-links {grid-template-columns:1fr;}

}


/* SHARED HERO AND CTA PROPORTIONS Balanced typography and content-led heights across all pages. */
html :is(.hero, .steel-hero, .standard-hero, .class-hero,
         .contact-hero, .standards-hero, .individual-material-hero,
         .material-hero, .product-hero, .products-hero, .technical-hero) {
    min-height: 0;
    padding: 44px 0 48px;
}


/* SHARED QUOTE CTA — COPY LEFT, ACTION RIGHT */
html .contact-cta.quote-cta {
    text-align: left;
}

html .quote-cta .quote-cta-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

html .quote-cta .quote-cta-copy {
    flex: 1 1 0;
    min-width: 0;
    max-width: 900px;
}

html .quote-cta .quote-cta-label {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .85);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1.5px;
}

html .contact-cta.quote-cta p {
    max-width: 800px;
    margin: 0;
}

html .quote-cta .quote-cta-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 768px) {
    html .quote-cta .quote-cta-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    html .quote-cta .quote-cta-copy {
        flex: 0 1 auto;
        width: 100%;
    }

}

html :is(.hero, .steel-hero, .standard-hero, .class-hero,
         .contact-hero, .standards-hero, .individual-material-hero,
         .material-hero, .product-hero, .products-hero, .technical-hero) h1 {
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.6px;
    margin-bottom: 16px;
}

html .hero .hero-container {
    min-height: 0;
    gap: 36px;
}

html .hero-image img {
    max-width: 420px;
}

html :is(.steel-hero-visual, .alloy-hero-visual, .standard-hero-visual,
         .class-hero-visual, .material-hero-visual, .standards-hero-visual) {
    min-height: 280px;
}

html :is(.hero-description, .material-hero-description,
         .standard-hero-description, .individual-material-hero-description),
html :is(.steel-hero-content, .standard-hero-content, .class-hero-content,
         .technical-hero-content, .material-hero-content,
         .product-hero-content, .products-hero-content) > p:not(.hero-tag),
html :is(.material-hero, .product-hero, .products-hero, .contact-hero,
         .standards-hero) .hero-content > p:not(.hero-tag) {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
}

html .contact-cta {
    padding: 24px 0;
}

html .contact-cta h2 {
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 8px;
}

html .contact-cta p {
    max-width: 720px;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 auto 12px;
}

html .contact-cta .btn {
    width: auto;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 768px) {
    html :is(.hero, .steel-hero, .standard-hero, .class-hero,
             .contact-hero, .standards-hero, .individual-material-hero,
             .material-hero, .product-hero, .products-hero, .technical-hero) {
        padding: 32px 0 36px;
    }

    html :is(.hero, .steel-hero, .standard-hero, .class-hero,
             .contact-hero, .standards-hero, .individual-material-hero,
             .material-hero, .product-hero, .products-hero, .technical-hero) h1 {
        font-size: clamp(28px, 5vw, 34px);
        letter-spacing: -.4px;
    }

    html .hero .hero-container {
        gap: 26px;
    }

    html .hero-image img {
        max-width: 300px;
    }

    html :is(.steel-hero-visual, .alloy-hero-visual, .standard-hero-visual,
             .class-hero-visual, .material-hero-visual, .standards-hero-visual) {
        min-height: 250px;
    }

    html .contact-cta {
        padding: 22px 0;
    }

    html .contact-cta h2 {
        font-size: clamp(22px, 4vw, 24px);
    }

    html .contact-cta p {
        font-size: 14px;
    }

}


/* Compact buyer layout: used only by the six product-detail main elements. */
.product-detail-page .product-section {
    padding: 35px 0;
    scroll-margin-top: 112px;
    background: var(--pd-white);
    color: var(--pd-text);
    font-size: 15px;
    line-height: 1.65;
}

.product-detail-page .product-section *,
.product-detail-page .product-section *::before,
.product-detail-page .product-section *::after { box-sizing: border-box; }

.product-detail-page .product-section-heading { margin-bottom: 18px; }

.product-detail-page .product-section-heading > span {
    display: block; margin-bottom: 8px; color: #aa4300;
    font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
}

.product-detail-page .product-section-heading h2 {
    margin: 0; color: inherit; font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 600; line-height: 1.25; letter-spacing: -.4px;
}

.product-detail-page .product-section-heading > p {
    margin: 12px 0 0; max-width: 800px; color: var(--pd-muted);
}

.product-detail-page .product-overview-grid {
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 30px; align-items: center;
}

.product-detail-page .product-image {
    margin: 0; padding: 20px; background: #f5f7f8;
    border: 1px solid #cbd3d9; border-radius: var(--pd-radius-md);
}

.product-detail-page .product-image img {
    display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto;
    object-fit: contain;
}

.product-detail-page .product-image figcaption {
    margin-top: 14px; text-align: center; font-size: 14px; font-weight: 600;
}

.product-detail-page .product-intro { margin: 0 0 16px; }

.product-detail-page :is(.product-quick-specs, .product-material-table,
    .product-standard-table, .product-technical-table, .product-quality-table) {
    width: 100%; table-layout: fixed; border-collapse: collapse;
    font-size: 14px; line-height: 1.6; background: #fff; color: var(--pd-dark);
}

.product-detail-page :is(.product-quick-specs, .product-material-table,
    .product-standard-table, .product-technical-table, .product-quality-table) caption {
    text-align: left; padding: 10px 16px; background: var(--pd-dark);
    color: #fff; font-weight: 700; font-size: 16px;
}

.product-detail-page :is(.product-quick-specs, .product-material-table,
    .product-standard-table, .product-technical-table, .product-quality-table) :is(th, td) {
    padding: 9px 16px; border: 1px solid #cbd3d9;
    text-align: left; vertical-align: top; overflow-wrap: anywhere;
}

.product-detail-page :is(.product-quick-specs, .product-material-table,
    .product-standard-table, .product-technical-table, .product-quality-table) th {
    width: 30%; font-weight: 700; color: var(--pd-dark); background: #edf1f3;
}

.product-detail-page .product-options { background: var(--pd-dark); color: #fff; }

.product-detail-page .product-options .product-section-heading > span { color: #ffad70; }

.product-detail-page :is(.product-options-grid, .product-standards-grid) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px;
}

.product-detail-page .product-subheading,
.product-detail-page .product-availability h3 {
    margin: 0 0 14px; font-size: 19px; font-weight: 600; line-height: 1.4;
}

.product-detail-page .product-feature-list { list-style: none; padding: 0; margin: 0; }

.product-detail-page .product-feature-list li {
    margin: 0 0 14px; padding-left: 16px; border-left: 3px solid var(--pd-orange);
}

.product-detail-page .product-feature-list h3 {
    margin: 0 0 4px; font-size: 16px; font-weight: 600; color: #fff;
}

.product-detail-page .product-feature-list p { margin: 0; font-size: 14px; color: #e5edf2; }

.product-detail-page .product-note {
    margin: 16px 0 0; color: #45515c; font-size: 14px; line-height: 1.65;
}

.product-detail-page .product-options .product-note { color: #e5edf2; }

.product-detail-page .product-availability {
    padding: 20px; background: #fff; border: 1px solid #cbd3d9;
    border-top: 3px solid var(--pd-orange); border-radius: var(--pd-radius-md);
}

.product-detail-page .product-availability dl { margin: 0; }

.product-detail-page .product-availability dt { margin: 14px 0 4px; font-weight: 700; font-size: 14px; }

.product-detail-page .product-availability dd { margin: 0; font-size: 14px; }

.product-detail-page .product-dimension-links { margin-top: 22px; }

.product-detail-page .product-resource-link {
    display: inline-block; padding: 12px 18px; border-radius: var(--pd-radius-sm);
    background: var(--pd-dark); color: #fff; font-size: 14px; font-weight: 600;
    text-decoration: none; overflow-wrap: anywhere;
}

.product-detail-page .product-resource-link:focus-visible,
.product-detail-page .product-document-link:focus-visible,
.product-detail-page .product-faq-list summary:focus-visible {
    outline: 3px solid var(--pd-orange); outline-offset: 4px;
}

.product-detail-page :is(.product-standards, .product-downloads) { background: #fff7f0; }

.product-detail-page .product-document-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}

.product-detail-page .product-document-link {
    display: block; padding: 18px; background: #fff; border: 1px solid #cbd3d9;
    border-top: 3px solid var(--pd-orange); border-radius: var(--pd-radius-md);
    color: var(--pd-dark); text-decoration: none;
}

.product-detail-page .product-document-link strong { display: block; font-size: 15px; line-height: 1.5; }

.product-detail-page .product-document-link span {
    display: block; margin-top: 8px; font-size: 14px; color: #45515c;
}

.product-detail-page .product-faq-list details {
    margin: 0 0 10px; border: 1px solid #cbd3d9;
    border-radius: var(--pd-radius-md); background: #fff;
}

.product-detail-page .product-faq-list summary {
    cursor: pointer; padding: 15px 20px; font-size: 16px; font-weight: 600;
}

.product-detail-page .product-faq-list details > p {
    margin: 0; padding: 0 20px 16px; color: #45515c; font-size: 15px;
}

@media (max-width: 1000px) {
    .product-detail-page .product-overview-grid { grid-template-columns: minmax(0, 1fr); }

    .product-detail-page .product-image { max-width: 560px; width: 100%; margin: 0 auto; }

    .product-detail-page .product-document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 700px) {
    .product-detail-page .product-section { padding: 26px 0; scroll-margin-top: 88px; }

    .product-detail-page .product-section-heading { margin-bottom: 18px; }

    .product-detail-page .product-options-grid,
    .product-detail-page .product-standards-grid,
    .product-detail-page .product-document-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    .product-detail-page .product-image { padding: 18px; }

    .product-detail-page :is(.product-quick-specs, .product-material-table,
        .product-standard-table, .product-technical-table, .product-quality-table) :is(th, td) {
        padding: 11px 10px; font-size: 13px;
    }

    .product-detail-page :is(.product-quick-specs, .product-material-table,
        .product-standard-table, .product-technical-table, .product-quality-table) th { width: 36%; }

    .product-detail-page .product-faq-list summary { padding: 16px; font-size: 15px; }

    .product-detail-page .product-faq-list details > p { padding: 0 16px 18px; }

}


/* The drawing-based product has fewer standard data rows and uses tighter spacing. */
@media (min-width: 1001px) {
    .product-detail-page.product-detail-custom .product-section { padding: 25px 0; }

    .product-detail-page.product-detail-custom .product-section-heading { margin-bottom: 18px; }

    .product-detail-page.product-detail-custom :is(.product-quick-specs, .product-material-table,
        .product-standard-table, .product-technical-table, .product-quality-table) :is(th, td) {
        padding-top: 9px; padding-bottom: 9px;
    }

}

@media (max-width: 700px) {
    .product-detail-page.product-detail-custom .product-section { padding: 26px 0; }

}


/* Technical contrast, deliberate section rhythm and clear buyer actions. */
.product-detail-page :is(.product-quick-specs, .product-material-table,
    .product-standard-table, .product-technical-table, .product-quality-table) td {
    font-weight: 500;
}

.product-detail-page :is(.product-quick-specs, .product-standard-table,
    .product-technical-table) tr:nth-child(even) td { background: #f5f7f8; }

.product-detail-page .product-standard-table th { background: #fff0e3; }

.product-detail-page .product-availability dd { font-weight: 500; color: var(--pd-dark); }

.product-detail-page .product-resource-link { border: 1px solid var(--pd-dark); }

.product-detail-page .product-resource-link:hover {
    background: var(--pd-dark-deep); text-decoration: underline; text-underline-offset: 4px;
}

.product-detail-page .product-quality { background: var(--pd-dark); color: #fff; }

.product-detail-page .product-quality .product-section-heading > span { color: #ffad70; }

.product-detail-page .product-quality .product-note { color: #e5edf2; }

.product-detail-page :is(.product-material-table, .product-quality-table) {
    color: #edf3f7; background: #1d2c37;
}

.product-detail-page :is(.product-material-table, .product-quality-table) caption {
    background: var(--pd-dark-deep); border-left: 3px solid var(--pd-orange);
}

.product-detail-page :is(.product-material-table, .product-quality-table) :is(th, td) {
    border-color: #53616c;
}

.product-detail-page :is(.product-material-table, .product-quality-table) th {
    background: #263742; color: #fff;
}

.product-detail-page :is(.product-material-table, .product-quality-table) tr:nth-child(even) td {
    background: #22333f;
}

.product-detail-page .product-document-link { border-radius: var(--pd-radius-sm); }

.product-detail-page .product-document-link strong {
    text-decoration: underline; text-decoration-color: #aa4300; text-underline-offset: 4px;
}

.product-detail-page .product-document-link strong::after { content: " \2192"; color: #aa4300; }

.product-detail-page .product-document-link:hover { border-color: #aa4300; }

.product-detail-page .product-faq { background: #f5f7f8; }

.product-detail-page .product-faq-list summary { color: var(--pd-dark); }

.product-detail-page .product-faq-list summary::marker { color: #aa4300; }

.product-detail-page .product-faq-list details[open] { border-color: #aa4300; }

.product-detail-page .product-hero .hero-buttons .btn,
.product-detail-page .quote-cta .quote-cta-button {
    transition: none; transform: none; box-shadow: none;
}

.product-detail-page .product-hero .hero-buttons .primary-btn {
    background: transparent; border-color: #aab6bf; color: #fff;
}

.product-detail-page .product-hero .hero-buttons .primary-btn:hover {
    background: #263742; border-color: #fff;
}

.product-detail-page .product-hero .hero-buttons .secondary-btn {
    background: var(--pd-orange); border-color: var(--pd-orange);
    color: var(--pd-dark-deep); font-weight: 700;
}

.product-detail-page .product-hero .hero-buttons .secondary-btn:hover {
    background: var(--pd-orange-hover); border-color: var(--pd-orange-hover);
    color: var(--pd-dark-deep);
}

.product-detail-page .quote-cta { background: var(--pd-orange); }

.product-detail-page .quote-cta .quote-cta-copy :is(h2, p),
.product-detail-page .quote-cta .quote-cta-label { color: var(--pd-dark-deep); }

.product-detail-page .quote-cta .quote-cta-button {
    background: var(--pd-dark-deep); color: #fff; border: 1px solid var(--pd-dark-deep);
    font-weight: 700; box-shadow: none;
}

.product-detail-page .quote-cta .quote-cta-button:hover { background: var(--pd-dark); }

.product-detail-page .product-hero .hero-buttons .btn:focus-visible,
.product-detail-page .quote-cta .quote-cta-button:focus-visible {
    outline: 3px solid #fff; outline-offset: 4px;
}


/* Final product pass: concise service/assembly guidance and engineering-table contrast. */
.product-detail-page .product-section.product-applications-installation {
    padding: 26px 0; background: #f5f7f8;
}

.product-detail-page .product-use-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 32px; align-items: start;
}

.product-detail-page .product-application-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px; list-style: none; margin: 0; padding: 0;
}

.product-detail-page .product-application-list li {
    padding: 7px 0 7px 12px; border-left: 3px solid var(--pd-orange);
    color: var(--pd-dark); font-size: 14px; font-weight: 600; line-height: 1.5;
}

.product-detail-page .product-installation-steps {
    display: grid; gap: 12px; list-style: none; margin: 0; padding: 0;
}

.product-detail-page .product-installation-steps li {
    display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px;
}

.product-detail-page .product-step-number {
    color: #aa4300; font-size: 18px; line-height: 1.4; font-weight: 700;
}

.product-detail-page .product-installation-steps h4 {
    margin: 0 0 3px; color: var(--pd-dark); font-size: 14px; line-height: 1.5; font-weight: 700;
}

.product-detail-page .product-installation-steps p {
    margin: 0; color: #45515c; font-size: 14px; line-height: 1.6; font-weight: 400;
}

.product-detail-page .product-technical-table :is(th, td) { border-color: #bcc7cf; }

.product-detail-page .product-technical-table th { background: #e1e7ec; }

.product-detail-page .product-technical-table tr:nth-child(even) th { background: #dbe3e8; }

.product-detail-page .product-technical-table tr:nth-child(even) td { background: #edf1f3; }

@media (max-width: 700px) {
    .product-detail-page .product-section.product-applications-installation { padding: 24px 0; }

    .product-detail-page .product-use-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    .product-detail-page .product-application-list { gap: 10px 14px; }

}


/* Native whole-card product links, isolated to the product listing. */
html[data-page-style~="products"] .products-grid > .product-card-link {
    color: inherit; text-decoration: none;
}

html[data-page-style~="products"] .products-grid > .product-card-link:focus-visible {
    outline: 3px solid var(--orange); outline-offset: 4px;
}


/* Compact grade cards across every material-category family. */
html[data-page-style~="category-material"] .grade-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}

html[data-page-style~="category-material"] .grade-card {
    min-height: 0; padding: 18px;
}

html[data-page-style~="category-material"] .grade-top { gap: 12px; margin-bottom: 10px; }

html[data-page-style~="category-material"] .grade-series { font-size: 10px; margin-bottom: 4px; }

html[data-page-style~="category-material"] .grade-code { height: 32px; padding: 0 8px; font-size: 11px; }

html[data-page-style~="category-material"] .grade-card > p {
    max-width: 100%; margin-bottom: 12px; color: #45515c; font-size: 13.5px; line-height: 1.55;
}

html[data-page-style~="category-material"] .grade-meta { gap: 6px; margin-bottom: 10px; }

html[data-page-style~="category-material"] .grade-meta span {
    padding: 4px 7px; color: #45515c; font-size: 11px;
}

html[data-page-style~="category-material"] .grade-link { min-height: 44px; font-size: 13px; }


/* Specifications shell: all additions are isolated to this page. */
.specifications-page .specs-hero .technical-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 280px;
}

.specifications-page .specs-empty-area { min-height: 240px; }

.specifications-page .specs-directory-shell { padding:48px 0; }

.specifications-page .specs-directory-layout { display:grid; grid-template-columns:minmax(220px,1fr) minmax(0,3fr); align-items:start; gap:30px; }

.specifications-page .specs-sidebar { min-width:0; }

.specifications-page .specs-search-label { display:block; margin-bottom:8px; color:var(--dark); font-size:14px; font-weight:500; }

.specifications-page .specs-search-input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--white); color:var(--text); font-size:15px; }

.specifications-page .specs-search-actions { display:flex; gap:10px; margin:12px 0 20px; }

.specifications-page .specs-search-button, .specifications-page .specs-reset-button { min-height:44px; flex:1; padding:10px 16px; border:1px solid var(--orange); border-radius:var(--radius-sm); background:var(--orange); color:var(--white); font-size:14px; font-weight:600; cursor:pointer; }

.specifications-page .specs-reset-button { border-color:var(--border); background:var(--light-bg); color:var(--dark); }

.specifications-page .specs-standard-tabs { border:1px solid var(--border); }

.specifications-page .specs-standard-tab { display:block; width:100%; min-height:50px; padding:12px 15px; border:0; border-left:3px solid transparent; border-bottom:1px solid var(--border); background:var(--white); color:var(--dark); text-align:left; font-family:inherit; font-size:14px; font-weight:500; cursor:pointer; }

.specifications-page .specs-standard-tab:last-child { border-bottom:0; }

.specifications-page .specs-standard-tab:hover { background:var(--orange-soft); color:var(--dark); border-left-color:var(--orange); }

.specifications-page .specs-standard-tab-active { background:var(--orange-soft); border-left-color:var(--orange); font-weight:600; }

.specifications-page .specs-astm-panel { min-width:0; }

.specifications-page .specs-astm-heading { color:var(--dark); font-size:22px; line-height:1.4; margin:0 0 18px; font-weight:600; }

.specifications-page .specs-astm-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; list-style:none; }

.specifications-page .specs-astm-item { min-width:0; }

.specifications-page .specs-astm-link { display:flex; flex-direction:column; height:100%; padding:18px; border:1px solid var(--border); border-radius:10px; background:var(--white); color:var(--dark); transition:border-color .2s,background .2s; }

.specifications-page .specs-astm-family { color:var(--text-muted); font-size:11px; font-weight:500; line-height:1.5; margin-bottom:7px; }

.specifications-page .specs-astm-card-title { font-size:17px; font-weight:600; line-height:1.4; margin:0 0 9px; }

.specifications-page .specs-astm-description { color:var(--text-muted); font-size:12px; font-weight:400; line-height:1.75; margin:0 0 16px; }

.specifications-page .specs-astm-card-action { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; color:var(--orange); font-size:11px; font-weight:500; }

.specifications-page .specs-astm-link:hover { border-color:var(--orange); background:var(--warm-bg); }

.specifications-page .specs-astm-link:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

@media(max-width:1100px) { .specifications-page .specs-astm-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media(max-width:480px) { .specifications-page .specs-astm-list { grid-template-columns:minmax(0,1fr); gap:12px; } }

@media(prefers-reduced-motion:reduce) { .specifications-page .specs-astm-link { transition:none; } }

.specifications-page .specs-search-input:focus-visible, .specifications-page .specs-standard-tab:focus-visible, .specifications-page .specs-search-button:focus-visible, .specifications-page .specs-reset-button:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

@media (max-width: 768px) {
    .specifications-page .specs-hero .technical-hero-grid { min-height: 220px; }

    .specifications-page .specs-empty-area { min-height: 160px; }

    .specifications-page .specs-directory-layout { grid-template-columns:minmax(0,1fr); gap:24px; }

    .specifications-page .specs-directory-shell { padding:30px 0; }

    .specifications-page .specs-search-input { font-size:16px; }

}

html[data-page-style~="category-material"] .grade-watermark { font-size: 64px; }

@media (max-width: 1100px) {
    html[data-page-style~="category-material"] .grade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 650px) {
    html[data-page-style~="category-material"] .grade-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }

    html[data-page-style~="category-material"] .grade-card { padding: 16px; }

}


/* Products Applications and Installation: section-scoped styles. */
#ferrobend-service {
    --fb-dark: #17232f;
    --fb-orange: #ff6b00;
    --fb-muted: #666;
    --fb-paper: #fff;
    --fb-warm: #fff8f2;
    font-family: 'Poppins', Arial, sans-serif;
    color: var(--fb-dark);
    background: var(--fb-paper);
    padding: 32px 24px;
}

#ferrobend-service * {
    box-sizing: border-box;
}

#ferrobend-service .fb-heading {
    text-align: center;
    margin-bottom: 32px;
}

#ferrobend-service .fb-heading span {
    color: var(--fb-orange);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}

#ferrobend-service h2 {
    font-size: 28px;
    line-height: 1.3;
    margin: 10px 0;
    font-weight: 600;
}

#ferrobend-service h3 {
    font-size: 24px;
    margin: 8px 0 12px;
    font-weight: 600;
}

#ferrobend-service p {
    font-size: 14px;
    line-height: 1.85;
    margin: 0;
    color: var(--fb-muted);
}

#ferrobend-service .fb-row {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 12px 0 30px;
}

#ferrobend-service .fb-row+.fb-row {
    border-top: 1px solid #e5e5e5;
    padding-top: 30px;
}

#ferrobend-service .fb-kicker {
    color: var(--fb-orange);
    font-size: 12px;
    letter-spacing: 1.6px;
    font-weight: 600;
}

#ferrobend-service .fb-circle-group {
    width: 280px;
    height: 272px;
    position: relative;
}

#ferrobend-service .fb-circle {
    position: absolute;
    width: 88px;
    height: 88px;
    padding: 3px;
    border: 0;
    border-radius: 50%;
    background: var(--fb-dark);
    font: inherit;
    color: var(--fb-dark);
}

#ferrobend-service .fb-circle-inner {
    background: var(--fb-paper);
    border-radius: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 5px;
}

#ferrobend-service .fb-circle svg {
    width: 29px;
    height: 29px;
    flex: none;
}

#ferrobend-service .fb-circle-label {
    font-size: 11px;
    line-height: 1.25;
    font-weight: 600;
    text-align: center;
}

#ferrobend-service .fb-circle[aria-pressed="true"] {
    background: var(--fb-orange);
    color: var(--fb-orange);
}

#ferrobend-service .fb-circle[aria-pressed="true"] .fb-circle-inner {
    background: var(--fb-warm);
}

#ferrobend-service .fb-center {
    cursor: default;
    background: var(--fb-orange);
    color: var(--fb-orange);
}

#ferrobend-service .fb-center svg {
    width: 42px;
    height: 42px;
}

#ferrobend-service .fb-a {
    left: 47px;
    top: 0;
}

#ferrobend-service .fb-b {
    left: 141px;
    top: 0;
}

#ferrobend-service .fb-c {
    left: 0;
    top: 90px;
}

#ferrobend-service .fb-d {
    left: 94px;
    top: 90px;
}

#ferrobend-service .fb-e {
    left: 188px;
    top: 90px;
}

#ferrobend-service .fb-f {
    left: 47px;
    top: 180px;
}

#ferrobend-service .fb-g {
    left: 141px;
    top: 180px;
}

#ferrobend-service .fb-installation .fb-c {
    left: 188px;
    top: 90px;
}

#ferrobend-service .fb-installation .fb-e {
    left: 141px;
    top: 180px;
}

#ferrobend-service .fb-installation .fb-g {
    left: 0;
    top: 90px;
}

#ferrobend-service .fb-installation button::before {
    content: attr(data-step);
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
}

#ferrobend-service .fb-installation button .fb-circle-inner {
    padding-top: 20px;
    gap: 3px;
}

#ferrobend-service .fb-installation button svg {
    width: 22px;
    height: 22px;
}

#ferrobend-service .fb-note {
    margin-top: 16px;
    font-size: 12px;
    color: var(--fb-muted);
}

@media(max-width:620px) {
    #ferrobend-service .fb-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #ferrobend-service .fb-circle-group {
        margin: auto;
    }

    #ferrobend-service {
        padding: 24px 16px;
    }

}

#ferrobend-service {
    padding: 80px 0;
}

#ferrobend-service>.container {
    max-width: 1100px;
}

#ferrobend-service .fb-row {
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1fr);
    gap: 48px;
}

#ferrobend-service .fb-circle-group {
    margin: auto;
}

#ferrobend-service button {
    cursor: pointer;
}

#ferrobend-service button:focus-visible {
    outline: 3px solid var(--fb-orange);
    outline-offset: 4px;
}

@media(max-width:700px) {
    #ferrobend-service .fb-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #ferrobend-service {
        padding: 50px 0;
    }

}


/* ASTM A240 content: isolated to .astm-standard-page; shared site components use existing rules. */
.astm-standard-page .astm-hero>.astm-crumb {
position: relative;
    z-index: 2;
    background: transparent;
    border: 0;
    margin-bottom: 27px
}

.astm-standard-page .astm-hero>.astm-crumb .container {
display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 11px;
    padding: 0;
    font-size: 12px
}

.astm-standard-page .astm-hero .astm-crumb a {
color: #c6d0d8;
    transition: color .2s
}

.astm-standard-page .astm-hero .astm-crumb a:hover,
.astm-standard-page .astm-hero .astm-crumb span {
color: #ffad72
}

.astm-standard-page .astm-hero .astm-crumb b {
color: #718392;
    font-weight: 400
}

.astm-standard-page .astm-page {
--a-dark: var(--dark, #17232f);
    --a-accent: var(--orange, #ff6b00);
    --a-line: #e5e9ed;
    --a-muted: #65727e;
    color: #17232f;
    background: #fff
}

.astm-standard-page .astm-page *,
.astm-standard-page .astm-page *::before,
.astm-standard-page .astm-page *::after {
box-sizing: border-box
}

.astm-standard-page .astm-page [hidden] {
display: none !important
}

.astm-standard-page .astm-page section[id],
.astm-standard-page .astm-page #properties {
scroll-margin-top: 120px
}

.astm-standard-page .astm-page a {
text-decoration: none
}

.astm-standard-page .astm-crumb {
background: #fff;
    border-bottom: 1px solid var(--a-line)
}

.astm-standard-page .astm-crumb .container {
display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 12px
}

.astm-standard-page .astm-crumb a {
color: #65727e
}

.astm-standard-page .astm-crumb a:hover,
.astm-standard-page .astm-crumb span {
color: var(--a-accent)
}

.astm-standard-page .astm-crumb b {
color: #b8c1c8
}

.astm-standard-page .astm-hero {
position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(circle at 83% 15%, rgba(255, 107, 0, .18), transparent 33%), linear-gradient(120deg, #101820, #17232f 65%, #243342);
    color: #fff;
    padding: 65px 0 68px
}

.astm-standard-page .astm-hero::after {
content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, transparent, #000)
}

.astm-standard-page .astm-hero-grid {
display: grid;
    grid-template-columns: 1.18fr .82fr;
    align-items: center;
    gap: 55px
}

.astm-standard-page .astm-kicker,
.astm-standard-page .astm-label {
font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: var(--a-accent)
}

.astm-standard-page .astm-kicker {
display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ff6b005e;
    padding: 9px 13px;
    border-radius: 4px;
    background: #ff6b0014;
    color: #ffad70
}

.astm-standard-page .astm-live-dot {
width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--a-accent);
    box-shadow: 0 0 0 4px #ff6b0028
}

.astm-standard-page .astm-hero h1 {
font-size: clamp(65px, 8vw, 104px);
    line-height: 1;
    letter-spacing: -4px;
    margin: 23px 0 10px;
    font-weight: 800;
    color: #fff
}

.astm-standard-page .astm-hero h1 em {
font-style: normal;
    color: var(--a-accent)
}

.astm-standard-page .astm-hero h2 {
font-size: clamp(21px, 2.4vw, 29px);
    line-height: 1.3;
    font-weight: 550;
    color: #fff;
    margin: 0 0 17px
}

.astm-standard-page .astm-hero p {
font-size: 14px;
    line-height: 1.85;
    max-width: 580px;
    color: #c3cdd6;
    margin: 0
}

.astm-standard-page .astm-hero-actions {
display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px
}

.astm-standard-page .astm-primary,
.astm-standard-page .astm-secondary {
display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 44px;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 750;
    transition: transform .2s, background .2s
}

.astm-standard-page .astm-primary {
background: var(--a-accent);
    color: #fff !important
}

.astm-standard-page .astm-primary:hover {
background: #e65e00;
    transform: translateY(-2px)
}

.astm-standard-page .astm-secondary {
border: 1px solid #ffffff50;
    color: #fff !important
}

.astm-standard-page .astm-secondary:hover {
background: #ffffff15;
    transform: translateY(-2px)
}

.astm-standard-page .astm-spec-card {
padding: 25px 28px;
    border-radius: 12px;
    background: #ffffff0e;
    border: 1px solid #ffffff30;
    box-shadow: 0 25px 55px #0003;
    backdrop-filter: blur(8px)
}

.astm-standard-page .astm-spec-top,
.astm-standard-page .astm-spec-line {
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.astm-standard-page .astm-spec-top {
font-size: 10px;
    letter-spacing: 1px;
    color: #b8c3cc
}

.astm-standard-page .astm-spec-top strong {
font-size: 10px;
    color: #ffab6e
}

.astm-standard-page .astm-spec-number {
font-size: clamp(70px, 7vw, 96px);
    font-weight: 850;
    letter-spacing: -4px;
    line-height: 1.1;
    padding: 25px 0 18px;
    color: #fff
}

.astm-standard-page .astm-spec-number span {
font-size: 22px;
    letter-spacing: 0;
    color: var(--a-accent);
    font-weight: 650;
    margin-left: 8px
}

.astm-standard-page .astm-spec-line {
border-top: 1px solid #ffffff20;
    padding: 13px 0;
    font-size: 12px
}

.astm-standard-page .astm-spec-line span {
color: #b9c5ce
}

.astm-standard-page .astm-spec-line b {
text-align: right;
    color: #fff
}

.astm-standard-page .astm-spec-foot {
border-top: 1px solid #ffffff20;
    padding-top: 16px;
    color: #ffab6e;
    font-size: 9px;
    letter-spacing: .65px
}

.astm-standard-page .astm-intro {
padding: 45px 0
}

.astm-standard-page .astm-intro-grid {
display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 65px;
    align-items: center
}

.astm-standard-page .astm-page h2 {
color: var(--a-dark);
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.23;
    letter-spacing: -.8px;
    margin: 12px 0 0;
    font-weight: 750
}

.astm-standard-page .astm-page h2 span {
color: var(--a-accent)
}

.astm-standard-page .astm-intro p,
.astm-standard-page .astm-uses p,
.astm-standard-page .astm-faq p {
font-size: 13px;
    line-height: 1.8;
    color: #5e6b75;
    margin: 0 0 10px
}

.astm-standard-page .astm-intro .astm-small-note {
font-size: 11.5px;
    color: #79848d
}

.astm-standard-page .astm-workspace {
padding: 55px 0 65px;
    background: #f5f7f9
}

.astm-standard-page .astm-workspace-head {
display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px
}

.astm-standard-page .astm-workspace-head p {
font-size: 13px;
    color: var(--a-muted);
    margin: 9px 0 0
}

.astm-standard-page .astm-count {
min-width: 98px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--a-line);
    border-radius: 9px;
    padding: 12px 17px
}

.astm-standard-page .astm-count strong {
display: block;
    color: var(--a-accent);
    font-size: 29px;
    line-height: 1
}

.astm-standard-page .astm-count small {
color: var(--a-muted);
    font-size: 10px
}

.astm-standard-page .astm-controls {
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px
}

.astm-standard-page .astm-filters {
display: flex;
    gap: 7px;
    flex-wrap: wrap
}

.astm-standard-page .astm-filters button,
.astm-standard-page .astm-tabs button {
font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid #dfe5e9;
    background: #fff;
    color: #5e6b75;
    border-radius: 5px;
    padding: 11px 15px;
    transition: .2s
}

.astm-standard-page .astm-filters button:hover,
.astm-standard-page .astm-tabs button:hover {
border-color: var(--a-accent)
}

.astm-standard-page .astm-filters button.is-active {
background: var(--a-dark);
    border-color: var(--a-dark);
    color: #fff
}

.astm-standard-page .astm-search input {
width: 230px;
    max-width: 100%;
    padding: 11px 14px;
    border: 1px solid #dfe5e9;
    border-radius: 5px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    color: var(--a-dark)
}

.astm-standard-page .astm-grade-pills {
display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 27px
}

.astm-standard-page .astm-grade-pill {
position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 49px;
    padding: 11px 14px;
    border: 1px solid #e1e6eb;
    background: #fff;
    border-radius: 6px;
    color: #1b2a35 !important;
    font-size: 13px;
    font-weight: 800;
    transition: .2s
}

.astm-standard-page .astm-grade-pill small {
font-size: 10px;
    font-weight: 500;
    color: #75828c
}

.astm-standard-page .astm-grade-pill span {
margin-left: auto;
    color: var(--a-accent)
}

.astm-standard-page a.astm-grade-pill:hover {
transform: translateY(-2px);
    border-color: #ffb47c;
    box-shadow: 0 7px 20px #17232f10
}

.astm-standard-page .astm-data {
overflow: hidden;
    border: 1px solid #e0e5e9;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 16px 42px #17232f0a
}

.astm-standard-page .astm-data-header {
display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    padding: 24px 25px;
    background: var(--a-dark);
    color: #fff
}

.astm-standard-page .astm-data-header h3 {
color: #fff;
    font-size: 21px;
    margin: 8px 0 6px
}

.astm-standard-page .astm-data-header p {
color: #bac5cd;
    font-size: 11px;
    margin: 0
}

.astm-standard-page .astm-tabs {
display: flex;
    gap: 6px;
    flex-shrink: 0
}

.astm-standard-page .astm-tabs button {
background: #ffffff12;
    color: #cbd5dc;
    border-color: #ffffff20;
    white-space: nowrap
}

.astm-standard-page .astm-tabs button.is-active {
background: var(--a-accent);
    border-color: var(--a-accent);
    color: #fff
}

.astm-standard-page .astm-table-wrap {
overflow-x: auto;
    max-width: 100%
}

.astm-standard-page .astm-table {
border-collapse: collapse;
    width: 100%;
    min-width: 750px;
    font-size: 12px
}

.astm-standard-page .astm-table caption {
position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

.astm-standard-page .astm-table th,
.astm-standard-page .astm-table td {
padding: 12px 13px;
    border-bottom: 1px solid #ebeff2;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap
}

.astm-standard-page .astm-table thead th {
background: #eaf0f4;
    color: #2c3b47;
    font-size: 11px;
    font-weight: 800
}

.astm-standard-page .astm-table tbody tr:nth-child(even) {
background: #fafbfc
}

.astm-standard-page .astm-table tbody tr:hover {
background: #fff5ed
}

.astm-standard-page .astm-table tbody th {
font-weight: 600
}

.astm-standard-page .astm-grade {
display: block;
    color: #17232f;
    font-weight: 800;
    font-size: 12px
}

.astm-standard-page .astm-table tbody th small {
display: block;
    color: #84909a;
    font-size: 10px;
    margin-top: 2px
}

.astm-standard-page .astm-table td:last-child {
white-space: normal;
    min-width: 150px
}

.astm-standard-page .astm-table-note {
padding: 15px 23px;
    margin: 0;
    background: #fff9f4;
    color: #74563e;
    font-size: 11px;
    line-height: 1.7;
    border-top: 1px solid #f4e3d4
}

.astm-standard-page .astm-data-footer {
display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 23px;
    color: #7a8790;
    font-size: 10px;
    border-top: 1px solid #e8edf0
}

.astm-standard-page .astm-uses {
padding: 55px 0;
    background: #fff
}

.astm-standard-page .astm-uses-grid {
display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center
}

.astm-standard-page .astm-uses p {
margin: 13px 0 20px;
    max-width: 460px
}

.astm-standard-page .astm-use-tags {
display: flex;
    gap: 9px;
    flex-wrap: wrap
}

.astm-standard-page .astm-use-tags span {
font-size: 11px;
    font-weight: 700;
    padding: 10px 13px;
    background: #f5f7f9;
    border: 1px solid #e7ebef;
    border-radius: 5px;
    color: #3b4a56
}

.astm-standard-page .astm-gasket-box {
padding: 28px 30px;
    background: #17232f;
    border-radius: 11px;
    color: #fff;
    position: relative;
    overflow: hidden
}

.astm-standard-page .astm-gasket-icon {
position: absolute;
    right: 18px;
    top: -30px;
    font-size: 140px;
    line-height: 1;
    color: #ffffff0a;
    pointer-events: none
}

.astm-standard-page .astm-gasket-box h3 {
color: #fff;
    font-size: 21px;
    line-height: 1.35;
    margin: 13px 0
}

.astm-standard-page .astm-gasket-box p {
color: #c3cdd6;
    margin-bottom: 14px
}

.astm-standard-page .astm-gasket-box a {
color: #ff9c57;
    font-weight: 800;
    font-size: 12px
}

.astm-standard-page .astm-faq {
padding: 48px 0 60px;
    background: #f5f7f9
}

.astm-standard-page .astm-faq-grid {
display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 65px
}

.astm-standard-page .astm-faq-grid>div>p {
margin-top: 13px
}

.astm-standard-page .astm-faq-items {
border-top: 1px solid #dfe5e9
}

.astm-standard-page .astm-faq-items details {
border-bottom: 1px solid #dfe5e9
}

.astm-standard-page .astm-faq-items summary {
position: relative;
    cursor: pointer;
    padding: 17px 28px 17px 0;
    list-style: none;
    font-weight: 750;
    font-size: 13px;
    color: #1c2c38
}

.astm-standard-page .astm-faq-items summary::-webkit-details-marker {
display: none
}

.astm-standard-page .astm-faq-items summary::after {
content: '+';
    position: absolute;
    right: 3px;
    top: 13px;
    font-size: 21px;
    color: var(--a-accent)
}

.astm-standard-page .astm-faq-items details[open] summary::after {
content: '−'
}

.astm-standard-page .astm-faq-items details p {
padding: 0 22px 16px 0;
    font-size: 12px
}

.astm-standard-page .astm-page a:focus-visible,
.astm-standard-page .astm-page button:focus-visible,
.astm-standard-page .astm-page input:focus-visible,
.astm-standard-page .astm-page summary:focus-visible {
outline: 3px solid var(--a-accent);
    outline-offset: 3px
}

@media(max-width:1050px) {
.astm-standard-page .astm-hero-grid {
gap: 30px
}

.astm-standard-page .astm-grade-pills {
grid-template-columns: repeat(3, minmax(0, 1fr))
}

.astm-standard-page .astm-data-header {
align-items: flex-start;
        flex-direction: column
}

.astm-standard-page .astm-uses-grid {
gap: 30px
}

}

@media(max-width:760px) {
.astm-standard-page .astm-hero {
padding: 48px 0
}

.astm-standard-page .astm-hero-grid,
.astm-standard-page .astm-intro-grid,
.astm-standard-page .astm-uses-grid,
.astm-standard-page .astm-faq-grid {
grid-template-columns: 1fr;
        gap: 26px
}

.astm-standard-page .astm-hero h1 {
font-size: 70px
}

.astm-standard-page .astm-spec-card {
max-width: 540px
}

.astm-standard-page .astm-intro {
padding: 35px 0
}

.astm-standard-page .astm-workspace {
padding: 40px 0 45px
}

.astm-standard-page .astm-grade-pills {
grid-template-columns: repeat(2, minmax(0, 1fr))
}

.astm-standard-page .astm-search,
.astm-standard-page .astm-search input {
width: 100%
}

.astm-standard-page .astm-controls {
align-items: stretch;
        flex-direction: column
}

.astm-standard-page .astm-data-header {
padding: 20px
}

.astm-standard-page .astm-tabs {
width: 100%
}

.astm-standard-page .astm-tabs button {
flex: 1;
        padding: 10px 7px
}

.astm-standard-page .astm-uses,
.astm-standard-page .astm-faq {
padding: 40px 0
}

}

@media(max-width:420px) {
.astm-standard-page .astm-hero h1 {
font-size: 58px
}

.astm-standard-page .astm-hero h2 {
font-size: 21px
}

.astm-standard-page .astm-hero-actions {
flex-direction: column
}

.astm-standard-page .astm-hero-actions a {
width: 100%
}

.astm-standard-page .astm-grade-pill {
padding: 9px;
        gap: 4px;
        font-size: 11px
}

.astm-standard-page .astm-grade-pill small {
font-size: 9px
}

.astm-standard-page .astm-workspace-head {
align-items: flex-start
}

.astm-standard-page .astm-count {
min-width: 70px;
        padding: 10px
}

.astm-standard-page .astm-filters button {
padding: 9px 10px;
        font-size: 11px
}

.astm-standard-page .astm-data-header h3 {
font-size: 18px
}

.astm-standard-page .astm-tabs button {
font-size: 10px
}

}

@media(prefers-reduced-motion:reduce) {
.astm-standard-page .astm-page * {
transition: none !important;
        scroll-behavior: auto !important
}

}

.astm-standard-page .astm-page {
--a-dark: var(--dark);
    --a-accent: var(--orange);
    --a-line: var(--border);
    --a-muted: var(--muted)
}

.astm-standard-page .astm-hero {
padding: 32px 0 64px
}

.astm-standard-page .astm-hero .astm-crumb {
margin-bottom: 30px
}

.astm-standard-page .astm-page h2 {
}

.astm-standard-page .astm-hero h2 {
color: #fff
}

.astm-standard-page .astm-page section[id],
.astm-standard-page .astm-page #properties {
scroll-margin-top: 25px
}

@media(max-width:768px) {
.astm-standard-page .astm-hero {
padding: 25px 0 48px
}

.astm-standard-page .astm-hero .astm-crumb {
margin-bottom: 25px
}

}

@media(max-width:480px) {
.astm-standard-page .astm-hero .astm-crumb .container {
font-size: 11px;
        gap: 6px
}

}

.astm-standard-page .astm-page { --muted:var(--text-muted); --a-muted:var(--text-muted); font-size:14px; line-height:1.7; }

.astm-standard-page .astm-page p { margin-top:0; }

.astm-standard-page .astm-hero-grid { grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); }

.astm-standard-page .astm-page section[id], .astm-standard-page .astm-page #properties { scroll-margin-top:120px; }

.astm-standard-page .astm-table-wrap { position:relative; }

.astm-standard-page .astm-table tbody th { position:sticky; left:0; background:var(--white); z-index:1; box-shadow:1px 0 0 var(--border); }

.astm-standard-page .astm-table tbody tr:nth-child(even) th { background:var(--light-bg); }

.astm-standard-page .astm-table th small { font-size:12px; color:var(--text-muted); }

.astm-standard-page .astm-table thead th, .astm-standard-page .astm-table-note { font-size:12px; }

.astm-standard-page .astm-grade-pill small, .astm-standard-page .astm-tabs button { font-size:12px; }

.astm-standard-page .astm-scroll-hint { font-size:12px; color:var(--text-muted); margin:0; padding:12px 23px; background:var(--light-bg); }

.astm-standard-page .astm-page a:focus-visible, .astm-standard-page .astm-page button:focus-visible, .astm-standard-page .astm-page summary:focus-visible, .astm-standard-page .astm-table-wrap:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

.astm-standard-page .skip-link { position:absolute; top:-100px; left:12px; padding:12px 18px; background:var(--white); color:var(--dark); z-index:10000; }

.astm-standard-page .skip-link:focus { top:12px; }

@media(max-width:760px) { .astm-standard-page .astm-hero-grid { grid-template-columns:minmax(0,1fr); } }


/* ASTM A240: isolated component styling using the common stylesheet. */
.astm-standard-page { --ink:var(--dark); --muted:var(--text-muted); }

.astm-standard-page .astm-hero>.astm-crumb {
position: relative;
    z-index: 2;
    background: transparent;
    border: 0;
    margin-bottom: 27px
}

.astm-standard-page .astm-hero>.astm-crumb .container {
display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 11px;
    padding: 0;
    font-size: 12px
}

.astm-standard-page .astm-hero .astm-crumb a {
color: #c6d0d8;
    transition: color .2s
}

.astm-standard-page .astm-hero .astm-crumb a:hover,
.astm-standard-page .astm-hero .astm-crumb span {
color: #ffad72
}

.astm-standard-page .astm-hero .astm-crumb b {
color: #718392;
    font-weight: 400
}

.astm-standard-page .astm-page {
--a-dark: var(--dark, #17232f);
    --a-accent: var(--orange, #ff6b00);
    --a-line: #e5e9ed;
    --a-muted: #65727e;
    color: #17232f;
    background: #fff
}

.astm-standard-page .astm-page *,
.astm-standard-page .astm-page *::before,
.astm-standard-page .astm-page *::after {
box-sizing: border-box
}

.astm-standard-page .astm-page [hidden] {
display: none !important
}

.astm-standard-page .astm-page section[id],
.astm-standard-page .astm-page #properties {
scroll-margin-top: 120px
}

.astm-standard-page .astm-page a {
text-decoration: none
}

.astm-standard-page .astm-crumb {
background: #fff;
    border-bottom: 1px solid var(--a-line)
}

.astm-standard-page .astm-crumb .container {
display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 12px
}

.astm-standard-page .astm-crumb a {
color: #65727e
}

.astm-standard-page .astm-crumb a:hover,
.astm-standard-page .astm-crumb span {
color: var(--a-accent)
}

.astm-standard-page .astm-crumb b {
color: #b8c1c8
}

.astm-standard-page .astm-hero {
position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(circle at 83% 15%, rgba(255, 107, 0, .18), transparent 33%), linear-gradient(120deg, #101820, #17232f 65%, #243342);
    color: #fff;
    padding: 65px 0 68px
}

.astm-standard-page .astm-hero::after {
content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, transparent, #000)
}

.astm-standard-page .astm-hero-grid {
display: grid;
    grid-template-columns: 1.18fr .82fr;
    align-items: center;
    gap: 55px
}

.astm-standard-page .astm-kicker,
.astm-standard-page .astm-label {
font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: var(--a-accent)
}

.astm-standard-page .astm-kicker {
display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ff6b005e;
    padding: 9px 13px;
    border-radius: 4px;
    background: #ff6b0014;
    color: #ffad70
}

.astm-standard-page .astm-live-dot {
width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--a-accent);
    box-shadow: 0 0 0 4px #ff6b0028
}

.astm-standard-page .astm-hero h1 {
font-size: clamp(65px, 8vw, 104px);
    line-height: 1;
    letter-spacing: -4px;
    margin: 23px 0 10px;
    font-weight: 800;
    color: #fff
}

.astm-standard-page .astm-hero h1 em {
font-style: normal;
    color: var(--a-accent)
}

.astm-standard-page .astm-hero h2 {
font-size: clamp(21px, 2.4vw, 29px);
    line-height: 1.3;
    font-weight: 550;
    color: #fff;
    margin: 0 0 17px
}

.astm-standard-page .astm-hero p {
font-size: 14px;
    line-height: 1.85;
    max-width: 580px;
    color: #c3cdd6;
    margin: 0
}

.astm-standard-page .astm-hero-actions {
display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px
}

.astm-standard-page .astm-primary,
.astm-standard-page .astm-secondary {
display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 44px;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 750;
    transition: transform .2s, background .2s
}

.astm-standard-page .astm-primary {
background: var(--a-accent);
    color: #fff !important
}

.astm-standard-page .astm-primary:hover {
background: #e65e00;
    transform: translateY(-2px)
}

.astm-standard-page .astm-secondary {
border: 1px solid #ffffff50;
    color: #fff !important
}

.astm-standard-page .astm-secondary:hover {
background: #ffffff15;
    transform: translateY(-2px)
}

.astm-standard-page .astm-spec-card {
padding: 25px 28px;
    border-radius: 12px;
    background: #ffffff0e;
    border: 1px solid #ffffff30;
    box-shadow: 0 25px 55px #0003;
    backdrop-filter: blur(8px)
}

.astm-standard-page .astm-spec-top,
.astm-standard-page .astm-spec-line {
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.astm-standard-page .astm-spec-top {
font-size: 10px;
    letter-spacing: 1px;
    color: #b8c3cc
}

.astm-standard-page .astm-spec-top strong {
font-size: 10px;
    color: #ffab6e
}

.astm-standard-page .astm-spec-number {
font-size: clamp(70px, 7vw, 96px);
    font-weight: 850;
    letter-spacing: -4px;
    line-height: 1.1;
    padding: 25px 0 18px;
    color: #fff
}

.astm-standard-page .astm-spec-number span {
font-size: 22px;
    letter-spacing: 0;
    color: var(--a-accent);
    font-weight: 650;
    margin-left: 8px
}

.astm-standard-page .astm-spec-line {
border-top: 1px solid #ffffff20;
    padding: 13px 0;
    font-size: 12px
}

.astm-standard-page .astm-spec-line span {
color: #b9c5ce
}

.astm-standard-page .astm-spec-line b {
text-align: right;
    color: #fff
}

.astm-standard-page .astm-spec-foot {
border-top: 1px solid #ffffff20;
    padding-top: 16px;
    color: #ffab6e;
    font-size: 9px;
    letter-spacing: .65px
}

.astm-standard-page .astm-intro {
padding: 45px 0
}

.astm-standard-page .astm-intro-grid {
display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 65px;
    align-items: center
}

.astm-standard-page .astm-page h2 {
color: var(--a-dark);
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.23;
    letter-spacing: -.8px;
    margin: 12px 0 0;
    font-weight: 750
}

.astm-standard-page .astm-page h2 span {
color: var(--a-accent)
}

.astm-standard-page .astm-intro p,
.astm-standard-page .astm-uses p,
.astm-standard-page .astm-faq p {
font-size: 13px;
    line-height: 1.8;
    color: #5e6b75;
    margin: 0 0 10px
}

.astm-standard-page .astm-intro .astm-small-note {
font-size: 11.5px;
    color: #79848d
}

.astm-standard-page .astm-workspace {
padding: 55px 0 65px;
    background: #f5f7f9
}

.astm-standard-page .astm-workspace-head {
display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px
}

.astm-standard-page .astm-workspace-head p {
font-size: 13px;
    color: var(--a-muted);
    margin: 9px 0 0
}

.astm-standard-page .astm-count {
min-width: 98px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--a-line);
    border-radius: 9px;
    padding: 12px 17px
}

.astm-standard-page .astm-count strong {
display: block;
    color: var(--a-accent);
    font-size: 29px;
    line-height: 1
}

.astm-standard-page .astm-count small {
color: var(--a-muted);
    font-size: 10px
}

.astm-standard-page .astm-controls {
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px
}

.astm-standard-page .astm-filters {
display: flex;
    gap: 7px;
    flex-wrap: wrap
}

.astm-standard-page .astm-filters button,
.astm-standard-page .astm-tabs button {
font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid #dfe5e9;
    background: #fff;
    color: #5e6b75;
    border-radius: 5px;
    padding: 11px 15px;
    transition: .2s
}

.astm-standard-page .astm-filters button:hover,
.astm-standard-page .astm-tabs button:hover {
border-color: var(--a-accent)
}

.astm-standard-page .astm-filters button.is-active {
background: var(--a-dark);
    border-color: var(--a-dark);
    color: #fff
}

.astm-standard-page .astm-search input {
width: 230px;
    max-width: 100%;
    padding: 11px 14px;
    border: 1px solid #dfe5e9;
    border-radius: 5px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    color: var(--a-dark)
}

.astm-standard-page .astm-grade-pills {
display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 27px
}

.astm-standard-page .astm-grade-pill {
position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 49px;
    padding: 11px 14px;
    border: 1px solid #e1e6eb;
    background: #fff;
    border-radius: 6px;
    color: #1b2a35 !important;
    font-size: 13px;
    font-weight: 800;
    transition: .2s
}

.astm-standard-page .astm-grade-pill small {
font-size: 10px;
    font-weight: 500;
    color: #75828c
}

.astm-standard-page .astm-grade-pill span {
margin-left: auto;
    color: var(--a-accent)
}

.astm-standard-page a.astm-grade-pill:hover {
transform: translateY(-2px);
    border-color: #ffb47c;
    box-shadow: 0 7px 20px #17232f10
}

.astm-standard-page .astm-data {
overflow: hidden;
    border: 1px solid #e0e5e9;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 16px 42px #17232f0a
}

.astm-standard-page .astm-data-header {
display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    padding: 24px 25px;
    background: var(--a-dark);
    color: #fff
}

.astm-standard-page .astm-data-header h3 {
color: #fff;
    font-size: 21px;
    margin: 8px 0 6px
}

.astm-standard-page .astm-data-header p {
color: #bac5cd;
    font-size: 11px;
    margin: 0
}

.astm-standard-page .astm-tabs {
display: flex;
    gap: 6px;
    flex-shrink: 0
}

.astm-standard-page .astm-tabs button {
background: #ffffff12;
    color: #cbd5dc;
    border-color: #ffffff20;
    white-space: nowrap
}

.astm-standard-page .astm-tabs button.is-active {
background: var(--a-accent);
    border-color: var(--a-accent);
    color: #fff
}

.astm-standard-page .astm-table-wrap {
overflow-x: auto;
    max-width: 100%
}

.astm-standard-page .astm-table {
border-collapse: collapse;
    width: 100%;
    min-width: 750px;
    font-size: 12px
}

.astm-standard-page .astm-table caption {
position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

.astm-standard-page .astm-table th,
.astm-standard-page .astm-table td {
padding: 12px 13px;
    border-bottom: 1px solid #ebeff2;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap
}

.astm-standard-page .astm-table thead th {
background: #eaf0f4;
    color: #2c3b47;
    font-size: 11px;
    font-weight: 800
}

.astm-standard-page .astm-table tbody tr:nth-child(even) {
background: #fafbfc
}

.astm-standard-page .astm-table tbody tr:hover {
background: #fff5ed
}

.astm-standard-page .astm-table tbody th {
font-weight: 600
}

.astm-standard-page .astm-grade {
display: block;
    color: #17232f;
    font-weight: 800;
    font-size: 12px
}

.astm-standard-page .astm-table tbody th small {
display: block;
    color: #84909a;
    font-size: 10px;
    margin-top: 2px
}

.astm-standard-page .astm-table td:last-child {
white-space: normal;
    min-width: 150px
}

.astm-standard-page .astm-table-note {
padding: 15px 23px;
    margin: 0;
    background: #fff9f4;
    color: #74563e;
    font-size: 11px;
    line-height: 1.7;
    border-top: 1px solid #f4e3d4
}

.astm-standard-page .astm-data-footer {
display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 23px;
    color: #7a8790;
    font-size: 10px;
    border-top: 1px solid #e8edf0
}

.astm-standard-page .astm-uses {
padding: 55px 0;
    background: #fff
}

.astm-standard-page .astm-uses-grid {
display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center
}

.astm-standard-page .astm-uses p {
margin: 13px 0 20px;
    max-width: 460px
}

.astm-standard-page .astm-use-tags {
display: flex;
    gap: 9px;
    flex-wrap: wrap
}

.astm-standard-page .astm-use-tags span {
font-size: 11px;
    font-weight: 700;
    padding: 10px 13px;
    background: #f5f7f9;
    border: 1px solid #e7ebef;
    border-radius: 5px;
    color: #3b4a56
}

.astm-standard-page .astm-gasket-box {
padding: 28px 30px;
    background: #17232f;
    border-radius: 11px;
    color: #fff;
    position: relative;
    overflow: hidden
}

.astm-standard-page .astm-gasket-icon {
position: absolute;
    right: 18px;
    top: -30px;
    font-size: 140px;
    line-height: 1;
    color: #ffffff0a;
    pointer-events: none
}

.astm-standard-page .astm-gasket-box h3 {
color: #fff;
    font-size: 21px;
    line-height: 1.35;
    margin: 13px 0
}

.astm-standard-page .astm-gasket-box p {
color: #c3cdd6;
    margin-bottom: 14px
}

.astm-standard-page .astm-gasket-box a {
color: #ff9c57;
    font-weight: 800;
    font-size: 12px
}

.astm-standard-page .astm-faq {
padding: 48px 0 60px;
    background: #f5f7f9
}

.astm-standard-page .astm-faq-grid {
display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 65px
}

.astm-standard-page .astm-faq-grid>div>p {
margin-top: 13px
}

.astm-standard-page .astm-faq-items {
border-top: 1px solid #dfe5e9
}

.astm-standard-page .astm-faq-items details {
border-bottom: 1px solid #dfe5e9
}

.astm-standard-page .astm-faq-items summary {
position: relative;
    cursor: pointer;
    padding: 17px 28px 17px 0;
    list-style: none;
    font-weight: 750;
    font-size: 13px;
    color: #1c2c38
}

.astm-standard-page .astm-faq-items summary::-webkit-details-marker {
display: none
}

.astm-standard-page .astm-faq-items summary::after {
content: '+';
    position: absolute;
    right: 3px;
    top: 13px;
    font-size: 21px;
    color: var(--a-accent)
}

.astm-standard-page .astm-faq-items details[open] summary::after {
content: '−'
}

.astm-standard-page .astm-faq-items details p {
padding: 0 22px 16px 0;
    font-size: 12px
}

.astm-standard-page .astm-page a:focus-visible,
.astm-standard-page .astm-page button:focus-visible,
.astm-standard-page .astm-page input:focus-visible,
.astm-standard-page .astm-page summary:focus-visible {
outline: 3px solid var(--a-accent);
    outline-offset: 3px
}

@media(max-width:1050px) {
.astm-standard-page .astm-hero-grid {
gap: 30px
}

.astm-standard-page .astm-grade-pills {
grid-template-columns: repeat(3, minmax(0, 1fr))
}

.astm-standard-page .astm-data-header {
align-items: flex-start;
        flex-direction: column
}

.astm-standard-page .astm-uses-grid {
gap: 30px
}

}

@media(max-width:760px) {
.astm-standard-page .astm-hero {
padding: 48px 0
}

.astm-standard-page .astm-hero-grid,
.astm-standard-page .astm-intro-grid,
.astm-standard-page .astm-uses-grid,
.astm-standard-page .astm-faq-grid {
grid-template-columns: 1fr;
        gap: 26px
}

.astm-standard-page .astm-hero h1 {
font-size: 70px
}

.astm-standard-page .astm-spec-card {
max-width: 540px
}

.astm-standard-page .astm-intro {
padding: 35px 0
}

.astm-standard-page .astm-workspace {
padding: 40px 0 45px
}

.astm-standard-page .astm-grade-pills {
grid-template-columns: repeat(2, minmax(0, 1fr))
}

.astm-standard-page .astm-search,
.astm-standard-page .astm-search input {
width: 100%
}

.astm-standard-page .astm-controls {
align-items: stretch;
        flex-direction: column
}

.astm-standard-page .astm-data-header {
padding: 20px
}

.astm-standard-page .astm-tabs {
width: 100%
}

.astm-standard-page .astm-tabs button {
flex: 1;
        padding: 10px 7px
}

.astm-standard-page .astm-uses,
.astm-standard-page .astm-faq {
padding: 40px 0
}

}

@media(max-width:420px) {
.astm-standard-page .astm-hero h1 {
font-size: 58px
}

.astm-standard-page .astm-hero h2 {
font-size: 21px
}

.astm-standard-page .astm-hero-actions {
flex-direction: column
}

.astm-standard-page .astm-hero-actions a {
width: 100%
}

.astm-standard-page .astm-grade-pill {
padding: 9px;
        gap: 4px;
        font-size: 11px
}

.astm-standard-page .astm-grade-pill small {
font-size: 9px
}

.astm-standard-page .astm-workspace-head {
align-items: flex-start
}

.astm-standard-page .astm-count {
min-width: 70px;
        padding: 10px
}

.astm-standard-page .astm-filters button {
padding: 9px 10px;
        font-size: 11px
}

.astm-standard-page .astm-data-header h3 {
font-size: 18px
}

.astm-standard-page .astm-tabs button {
font-size: 10px
}

}

@media(prefers-reduced-motion:reduce) {
.astm-standard-page .astm-page * {
transition: none !important;
        scroll-behavior: auto !important
}

}

.astm-standard-page .astm-page {
--a-dark: var(--dark);
    --a-accent: var(--orange);
    --a-line: var(--border);
    --a-muted: var(--muted)
}

.astm-standard-page .astm-hero {
padding: 32px 0 64px
}

.astm-standard-page .astm-hero .astm-crumb {
margin-bottom: 30px
}

.astm-standard-page .astm-page h2 {
font-family: Arial, Helvetica, sans-serif
}

.astm-standard-page .astm-hero h2 {
color: #fff
}

.astm-standard-page .astm-page section[id],
.astm-standard-page .astm-page #properties {
scroll-margin-top: 25px
}

@media(max-width:768px) {
.astm-standard-page .astm-hero {
padding: 25px 0 48px
}

.astm-standard-page .astm-hero .astm-crumb {
margin-bottom: 25px
}

}

@media(max-width:480px) {
.astm-standard-page .astm-hero .astm-crumb .container {
font-size: 11px;
        gap: 6px
}

}


/* ASTM A240: restrained light/dark section rhythm and material links. */
.astm-standard-page .astm-standard-profile { padding:28px; border:1px solid var(--border-dark); border-radius:var(--radius-lg); background:var(--dark-deep); }

.astm-standard-page .astm-standard-profile h2 { color:var(--white); font-size:26px; line-height:1.4; font-weight:600; margin:12px 0 16px; }

.astm-standard-page .astm-standard-profile p { color:var(--text-light); font-size:14px; line-height:1.8; margin:10px 0; }

.astm-standard-page .astm-standard-label { color:var(--orange); font-size:11px; letter-spacing:1.5px; font-weight:600; }

.astm-standard-page .astm-standard-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }

.astm-standard-page .astm-intro, .astm-standard-page .astm-uses { background:var(--white); padding:64px 0; }

.astm-standard-page .astm-workspace, .astm-standard-page .astm-faq { background:var(--dark-deep); color:var(--white); padding:64px 0; }

.astm-standard-page .astm-page h2 { font-weight:600; letter-spacing:0; font-size:clamp(24px,2.8vw,34px); }

.astm-standard-page .astm-workspace h2, .astm-standard-page .astm-faq h2 { color:var(--white); }

.astm-standard-page .astm-workspace-head p, .astm-standard-page .astm-faq p { color:var(--text-light); font-size:14px; }

.astm-standard-page .astm-faq-items summary { color:var(--white); font-size:14px; font-weight:500; }

.astm-standard-page .astm-faq-items, .astm-standard-page .astm-faq-items details { border-color:var(--border-dark); }

.astm-standard-page .astm-intro p, .astm-standard-page .astm-uses p { font-size:14px; }

.astm-standard-page .astm-intro .astm-small-note { font-size:13px; }

.astm-standard-page .astm-grade-pill { font-weight:600; transform:none; box-shadow:none; }

.astm-standard-page .astm-data { box-shadow:none; color:var(--text); border-radius:8px; }

.astm-standard-page .astm-grade-link { color:var(--orange); font-weight:600; font-size:13px; text-decoration:underline; text-underline-offset:3px; }

.astm-standard-page .astm-grade-link:hover { color:var(--dark); }

.astm-standard-page .astm-table { font-size:13px; }

.astm-standard-page .astm-table tbody th small { font-size:11px; }

.astm-standard-page .astm-table-note { font-size:12px; }

.astm-standard-page .astm-data-header h3 { font-weight:600; }

.astm-standard-page .astm-label { font-size:11px; }

.astm-standard-page .astm-table-wrap { overscroll-behavior-x:contain; }

@media(max-width:768px) {
 .astm-standard-page .astm-intro, .astm-standard-page .astm-workspace, .astm-standard-page .astm-uses, .astm-standard-page .astm-faq { padding:40px 0; }

 .astm-standard-page .astm-standard-profile { padding:22px; }

}


/* Shared ASTM source-table layout: these rules affect ASTM pages only. */
.astm-standard-page #astm-mech-panel .astm-table td:nth-child(2) { white-space:normal; min-width:130px; max-width:280px; }

.astm-standard-page .astm-table-wrap:focus-visible { outline:2px solid var(--orange); outline-offset:-2px; }

.astm-standard-page .astm-conditions { padding:18px 24px 18px 40px; list-style:disc; background:var(--warm-bg); color:var(--text-muted); font-size:12px; line-height:1.8; margin:0; border-top:1px solid var(--border); }

.astm-standard-page .astm-conditions li + li { margin-top:6px; }

.astm-standard-page .astm-extra-heading { padding:20px 16px 12px; font-size:16px; font-weight:600; color:var(--dark); background:var(--white); }

.astm-standard-page .astm-standard-status { display:inline-block; padding:5px 9px; margin-top:12px; background:var(--orange-soft); color:var(--dark); border-radius:var(--radius-sm); font-size:12px; font-weight:500; }

.astm-standard-page .astm-page .astm-standard-profile h2 { font-size:26px; line-height:1.4; }

@media(max-width:768px) {
 .astm-standard-page .astm-conditions { padding:16px 18px 16px 32px; }

 .astm-standard-page .astm-page .astm-standard-profile h2 { font-size:23px; }

}


/* SHARED TECHNICAL AND PRODUCT HERO DRAWINGS */
.engineering-hero-host { position: relative; padding-right: 145px !important; }

.engineering-hero-host .engineering-hero-drawing { position: absolute; right: -4px; top: 50%; width: 145px; margin: 0; transform: translateY(-50%); pointer-events: none; }

.engineering-hero-drawing svg { display: block; width: 100%; height: auto; overflow: visible; }

.engineering-hero-drawing .eh-rings { fill: none; stroke: #dbe7ef; stroke-width: 1.5; }

.engineering-hero-drawing .eh-thickness { fill: #728a9e; fill-opacity: .25; stroke: #c6d6e2; stroke-width: 1; }

.engineering-hero-drawing .eh-datum { fill: none; stroke: #9eafbd; opacity: .3; stroke-dasharray: 4 5; }

.engineering-hero-drawing .eh-winding { fill: none; stroke: #ffac6b; stroke-width: 1; animation: engineering-wind 2.5s ease-out both; }

.engineering-hero-drawing .eh-leader { fill: none; stroke: #f89e5b; stroke-width: 1; opacity: .8; }

@keyframes engineering-wind { from { stroke-dasharray: 100; stroke-dashoffset: 100; } to { stroke-dasharray: 100; stroke-dashoffset: 0; } }


@media (max-width: 480px) { .engineering-hero-host { padding-right: 110px !important; } .engineering-hero-host .engineering-hero-drawing { width: 108px; } }

@media (prefers-reduced-motion: reduce) { .engineering-hero-drawing .eh-winding { animation: none; } }


/* SIX PRODUCT CATEGORY HERO GASKETS Inline SVG only; existing product cards and photos retained. */
.product-hero .product-hero-drawing-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 44px; align-items: center; }

.product-hero .product-hero-drawing-grid .hero-content { max-width: none; min-width: 0; }

.product-hero .product-hero-gasket { width: 100%; margin: 0; min-width: 0; }

.product-hero .product-hero-gasket svg { width: 100%; max-height: 340px; }

.product-hero-gasket .ph-guide { fill: #b2cbdc; fill-opacity: .14; }

.product-hero-gasket .ph-inner { fill: #d5e4ef; fill-opacity: .22; }

.product-hero-gasket .ph-winding-face { fill: #dd9761; fill-opacity: .08; }

.product-hero-gasket .ph-bolt { fill: #17232f; stroke: #dbe7ef; stroke-width: 1.6; }

.product-hero-gasket .ph-callouts { fill: #ffad6d; stroke: #ffad6d; stroke-width: 1; }

.product-hero-gasket .ph-callouts path { fill: none; }

.product-hero-gasket .ph-callouts text { fill: #d9e3ec; stroke: none; font: 10px Arial, sans-serif; letter-spacing: .7px; }

.product-hero-gasket figcaption { text-align: center; color: #c7d5df; font-size: 10px; letter-spacing: .11em; line-height: 1.6; }

.product-hero-gasket figcaption small { display: block; margin-top: 6px; color: #98acbd; font-size: 10px; letter-spacing: .02em; }

.product-hero-gasket:hover .eh-winding { animation: product-hero-redraw 2.5s ease-out both; }

@keyframes product-hero-redraw { from { stroke-dasharray: 100; stroke-dashoffset: 100; } to { stroke-dasharray: 100; stroke-dashoffset: 0; } }

@media (max-width: 900px) { .product-hero .product-hero-drawing-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .product-hero .product-hero-gasket { max-width: 440px; justify-self: center; } .product-hero .product-hero-gasket svg { max-height: 220px; } }

@media (max-width: 480px) { .product-hero .product-hero-gasket svg { max-height: 190px; } .product-hero-gasket figcaption { font-size: 9px; } }

@media (prefers-reduced-motion: reduce) { .product-hero-gasket:hover .eh-winding { animation: none; } }


/* EN material specifications: shared template and grade table refinements */
/* BS EN context pages: scoped to preserve other site layouts. */
.en-context-page .astm-data,
.en-context-page .astm-table { color: #26343f; }
.en-context-page .astm-table th,
.en-context-page .astm-table td { color: #26343f; font-size: 14px; line-height: 1.6; white-space: normal; }
.en-context-page .astm-table th { min-width: 85px; }
.en-context-page .astm-table th:first-child { min-width: 145px; }
.en-context-page .astm-table td:last-child { min-width: 150px; max-width: 290px; }
.en-context-page .astm-table small { display: block; color: #56616a; }
.en-context-page .astm-data-header p { font-size: 15px; }
.en-context-page .astm-intro a { color: #a94800; text-decoration: underline; text-underline-offset: 3px; }
.en-context-page.en-grade-page #astm-chem-panel .astm-table { min-width: 0; }
.en-context-page .astm-table-wrap { scrollbar-gutter: stable; }
.en-context-page .astm-standard-profile h2 { overflow-wrap: anywhere; }
.specifications-page .specs-directory-panels { display: grid; gap: 32px; min-width: 0; }
.specifications-page .specs-standard-tab { text-decoration: none; }
.en-standard-page .astm-data-header { align-items: center; flex-wrap: wrap; }
.en-standard-page .astm-data-header .astm-label { color: #ffac6b; }
.en-standard-page .astm-data-header h3 { color: #fff; }
.en-standard-page .astm-tabs button { min-height: 44px; }
.en-standard-page .astm-data .astm-small-note {
    padding: 18px 22px;
    margin: 0;
    color: #37434d;
    background: #f7f9fb;
    border-top: 1px solid #e0e5e9;
    font-size: 16px;
    line-height: 1.75;
}
.en-standard-page .astm-page .astm-intro .astm-small-note {
    color: #37434d;
    font-size: 16px;
    line-height: 1.75;
}
.en-grade-page .material-mechanical-section p.material-description {
    display: block;
    padding: 18px 20px;
    margin-top: 20px;
    color: #37434d;
    background: #f7f9fb;
    border: 1px solid #e0e5e9;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.75;
}
.en-standard-page #astm-mech-panel tbody tr:nth-child(3n + 1) { border-top: 2px solid #d9e1e7; }
.en-standard-page #astm-mech-panel tbody tr:nth-child(6n + 1),
.en-standard-page #astm-mech-panel tbody tr:nth-child(6n + 2),
.en-standard-page #astm-mech-panel tbody tr:nth-child(6n + 3) { background: #f7f9fb; }
.en-grade-page .mechanical-table { min-width: 840px; }
.en-grade-page .hero-material-data { flex-wrap: wrap; }
@media (max-width: 768px) {
    .en-standard-page .astm-tabs { width: 100%; }
    .en-standard-page .astm-tabs button { flex: 1; white-space: normal; }
}

.en-standard-page #astm-mech-panel .astm-table { min-width: 980px; }
.en-standard-page #astm-mech-panel th[scope="rowgroup"] { vertical-align: middle; border-bottom: 2px solid #d9e1e7; }

/* Standard family tab panels and EN 10095 data tables. */

.specifications-page .specs-standard-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: -3px; }
.specifications-page .specs-empty-note { color: var(--text-muted); font-size: 15px; line-height: 1.7; }
.en10095-page #astm-chem-panel .astm-table,
.en10095-page #astm-mech-panel .astm-table { min-width: 1400px; }
.en-grade-page .mechanical-table th { white-space: normal; }

/* EN 10095 table contrast: keep values readable inside both tab panels. */
.en10095-page .astm-data { color: #26343f; background: #fff; }
.en10095-page .astm-table { color: #26343f; background: #fff; }
.en10095-page .astm-table th,
.en10095-page .astm-table td { color: #26343f; }
.en10095-page .astm-table small { color: #56616a; }

/* Material specifications: sticky search/navigation and continuous sections. */
.specifications-page .specs-sidebar {
    position: sticky;
    top: calc(var(--specs-header-height, 96px) + 16px);
    align-self: start;
    max-height: calc(100dvh - var(--specs-header-height, 96px) - 32px);
    overflow-y: auto;
    background: var(--white);
    z-index: 20;
}
.specifications-page .specs-directory-panels > section {
    scroll-margin-top: var(--specs-section-offset, 120px);
}
@media (max-width: 768px) {
    .specifications-page .specs-directory-layout { display: block; }
    .specifications-page .specs-sidebar {
        top: var(--specs-header-height, 80px);
        max-height: none;
        overflow: visible;
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 8px 16px rgba(23, 35, 47, .06);
    }
    .specifications-page .specs-directory-panels { margin-top: 24px; }
    .specifications-page .specs-search-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 68px 68px;
        gap: 8px;
    }
    .specifications-page .specs-search-label { grid-column: 1 / -1; margin-bottom: 0; }
    .specifications-page .specs-search-actions { display: contents; }
    .specifications-page .specs-search-button,
    .specifications-page .specs-reset-button { padding: 8px; }
    .specifications-page .specs-standard-tabs {
        display: flex;
        overflow-x: auto;
        margin-top: 10px;
    }
    .specifications-page .specs-standard-tab {
        flex: 0 0 auto;
        width: auto;
        min-height: 44px;
        padding: 10px 14px;
        border-left: 0;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }
    .specifications-page .specs-standard-tab-active { border-bottom-color: var(--orange); }
}

@media (max-width: 768px) {
    html:has(body.specifications-page),
    body.specifications-page {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
}


/* DIMENSIONAL STANDARDS DIRECTORY — scoped landing-page styles */





.dimensional-directory-page .ds-hero-row { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; }



.dimensional-directory-page .ds-hero-symbol { width: 180px; flex-shrink: 0; stroke: #a9bac7; stroke-width: 1.2; }
.dimensional-directory-page .ds-datum { stroke-dasharray: 5 6; opacity: .4; }
.dimensional-directory-page .ds-measure { stroke: #ffad70; }
.dimensional-directory-page .ds-directory { padding: 42px 0 48px; background: #f7f8fa; }
.dimensional-directory-page .ds-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dimensional-directory-page .ds-section-heading h2 { font-size: 24px; letter-spacing: -.025em; color: #17232f; margin: 0; }
.dimensional-directory-page .ds-section-heading > span { font-size: 13px; color: #606b74; }
.dimensional-directory-page .ds-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; }
.dimensional-directory-page .ds-grid > li { min-width: 0; }
.dimensional-directory-page .ds-card { display: flex; flex-direction: column; height: 100%; padding: 24px; border: 1px solid #dfe4e8; border-radius: 12px; background: #fff; color: #17232f; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.dimensional-directory-page .ds-card:hover { border-color: #c47c46; box-shadow: 0 8px 24px rgb(23 35 47 / 7%); transform: translateY(-3px); }
.dimensional-directory-page .ds-card:focus-visible { outline: 3px solid #b84c00; outline-offset: 4px; }
.dimensional-directory-page .ds-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.dimensional-directory-page .ds-family { color: #a94700; background: #fff3e8; padding: 5px 9px; border-radius: 5px; font-size: 11px; letter-spacing: .06em; font-weight: 700; }
.dimensional-directory-page .ds-arrow { font-size: 22px; color: #6c7881; }
.dimensional-directory-page .ds-card h3 { font-size: 23px; letter-spacing: -.025em; line-height: 1.3; margin: 0 0 10px; }
.dimensional-directory-page .ds-card p { font-size: 14px; line-height: 1.7; color: #58636d; margin: 0 0 20px; }
.dimensional-directory-page .ds-card-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 15px; border-top: 1px solid #edf0f2; margin-top: auto; font-size: 11px; line-height: 1.6; color: #606b74; }
.dimensional-directory-page .ds-card-action { color: #a94700; font-weight: 600; }
@media (max-width: 1000px) {
    .dimensional-directory-page .ds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {


    .dimensional-directory-page .ds-hero-symbol { display: none; }

    .dimensional-directory-page .ds-directory { padding: 28px 0 32px; }
    .dimensional-directory-page .ds-section-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
    .dimensional-directory-page .ds-section-heading h2 { font-size: 22px; }
    .dimensional-directory-page .ds-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .dimensional-directory-page .ds-card { padding: 20px; }
    .dimensional-directory-page .ds-card-top { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .dimensional-directory-page .ds-card { transition: none; }
    .dimensional-directory-page .ds-card:hover { transform: none; }
}

/* Directory diagram layout; hero appearance inherits the Technical theme. */
.dimensional-directory-page .technical-hero > .container { position: relative; z-index: 2; }


/* ASME B16.20 — one-page dimensional lookup; Technical hero styles are shared. */
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-reference { padding: 26px 0; background: #fff; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-reference-layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); align-items: center; gap: 48px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-reference-drawing { margin: 0; padding: 10px 16px; border: 1px solid #dfe4e8; border-radius: 12px; background: #17232f; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .motion-reference-svg { display: block; width: 100%; height: 190px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-reference-drawing figcaption { text-align: center; color: #becbd5; font-size: 12px; padding-bottom: 8px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .motion-metal-edge { fill: none; stroke: #d6e4ef; stroke-width: 1.5; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .motion-metal-face { fill: #adc6d8; fill-opacity: .19; stroke: #d6e4ef; stroke-width: 1.3; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .motion-inner-face { fill: #d1e2ee; fill-opacity: .25; stroke: #d6e4ef; stroke-width: 1.3; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .motion-metal-side { fill: #6f8a9f; fill-opacity: .3; stroke: #b0c5d5; stroke-width: 1.2; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .motion-winding-face { fill: #f1a467; fill-opacity: .09; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .motion-winding { fill: none; stroke: #ffac6b; stroke-width: 1.2; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .motion-datum { fill: none; stroke: #90a8ba; opacity: .3; stroke-dasharray: 5 7; stroke-width: .8; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .motion-leaders { stroke: #ffac6b; stroke-width: 1.1; fill: none; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .motion-labels { fill: #e1ebf2; font: 22px Arial, sans-serif; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-eyebrow { color: #a94700; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-reference h2,
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-lookup h2 { font-size: 25px; line-height: 1.3; color: #17232f; margin: 8px 0 18px; letter-spacing: -.4px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-dimension-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 0; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-dimension-key > div { display: flex; align-items: baseline; gap: 10px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-dimension-key dt { color: #a94700; font-size: 14px; font-weight: 700; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-dimension-key dd { margin: 0; color: #52616b; font-size: 14px; line-height: 1.6; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-lookup { padding: 32px 0 44px; background: #f7f8fa; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-lookup-heading h2 { margin: 0 0 6px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-lookup-heading p { margin: 0 0 22px; font-size: 15px; color: #52616b; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-selectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 24px; border: 1px solid #dfe4e8; border-radius: 10px; background: #fff; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-selectors label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: #17232f; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-selectors label span { color: #a94700; margin-right: 8px; font-size: 12px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-selectors select { width: 100%; min-height: 48px; padding: 10px 32px 10px 12px; border: 1px solid #aebbc4; border-radius: 6px; background: #fff; color: #26343f; font: inherit; font-size: 15px; cursor: pointer; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-selectors select:focus-visible,
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .class-table-wrapper:focus-visible { outline: 3px solid #b84c00; outline-offset: 3px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-placeholder { padding: 26px 16px; text-align: center; border: 1px dashed #bac5ce; border-radius: 8px; margin: 20px 0 0; color: #52616b; font-size: 15px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-status { color: #17232f; font-size: 15px; font-weight: 600; margin: 22px 0 12px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-status:empty { display: none; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-availability-note { padding: 14px 18px; margin: 16px 0 0; background: #fff3e8; color: #78401b; font-size: 15px; line-height: 1.65; border-radius: 6px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .class-table-wrapper { overflow-x: auto; border: 1px solid #dce2e7; border-radius: 8px; background: #fff; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .dimension-table { width: 100%; min-width: 570px; border-collapse: collapse; font-size: 15px; color: #26343f; font-variant-numeric: tabular-nums; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .dimension-table caption { padding: 18px; font-size: 16px; font-weight: 600; text-align: left; color: #17232f; background: #fff; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .dimension-table th { padding: 16px 14px; background: #17232f; color: #fff; font-size: 14px; font-weight: 600; text-align: center; line-height: 1.5; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .dimension-table td { padding: 13px 14px; border-bottom: 1px solid #e2e7eb; text-align: center; line-height: 1.5; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .dimension-table tr:nth-child(even) td { background: #f5f7f9; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .dimension-table td:first-child { font-weight: 600; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .table-notes { margin-top: 20px; padding: 22px 26px; border: 1px solid #dce2e7; border-radius: 8px; background: #fff; color: #37434d; font-size: 16px; line-height: 1.75; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .table-notes h3 { font-size: 19px; color: #17232f; margin: 0 0 10px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .table-notes p { margin: 0 0 10px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .table-notes ul,
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .table-notes ol { margin: 0; padding-left: 22px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .table-notes li + li { margin-top: 8px; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) [hidden] { display: none !important; }
@media (max-width: 800px) {
    :is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-reference-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    :is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-reference-drawing { width: 100%; max-width: 460px; justify-self: center; }
    :is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-selectors { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 18px; }
    :is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-dimension-key { gap: 12px; }
    :is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .asme-reference h2 { font-size: 23px; }
    :is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .table-notes { padding: 18px; }
}


/* DIN 2690: table filters and flat-gasket drawing details. */
.din-standard-page .motion-neck { fill: #597b94; fill-opacity: .2; stroke: #c8d9e6; stroke-width: 1.4; }
.din-standard-page .motion-bolt { fill: #233746; stroke: #e0eaf2; stroke-width: 1.3; }
.din-standard-page .motion-seal { fill: #fb9c55; fill-opacity: .6; stroke: #ffac6b; stroke-width: 1.4; }
.din-standard-page .din-diagram-note { margin: 18px 0 0; color: #52616b; font-size: 14px; line-height: 1.7; }
.din-standard-page .din-reference-badge { font-size: 13px; color: #89400b; white-space: nowrap; }
.din-standard-page .din-comparison-table { min-width: 680px; }
.din-standard-page .din-comparison-table:has(thead th:nth-child(6)) { min-width: 940px; }
.din-standard-page .dimension-table tbody th { background: #fff; color: #26343f; border-bottom: 1px solid #e2e7eb; padding: 13px 14px; font-size: 15px; }
.din-standard-page .dimension-table tbody tr:nth-child(even) th { background: #f5f7f9; }
.din-standard-page .dimension-table thead small { font-size: 12px; font-weight: 400; color: #d5dce2; }
@media (max-width: 600px) {
    .din-standard-page .din-comparison-table:not(:has(thead th:nth-child(5))) { min-width: 350px; }
}

/* DIN compact unit toggle: all sizes and pressure groups remain visible. */
.din-standard-page .din-unit-buttons { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 18px; border: 1px solid #d9e0e5; border-radius: 8px; background: #fff; }
.din-standard-page .din-unit-buttons button { min-width: 56px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 5px; background: transparent; color: #37434d; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.din-standard-page .din-unit-buttons button[aria-pressed="true"] { background: #17232f; color: #fff; }
.din-standard-page .din-unit-buttons button:hover { box-shadow: inset 0 0 0 1px #a94700; }
.din-standard-page .din-unit-buttons button:focus-visible { outline: 2px solid #b84c00; outline-offset: 2px; }


/* Sticky dimensional headings; confined to the visible table and below navigation. */
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .dimension-floating-header { position: fixed; z-index: 90; overflow: hidden; pointer-events: none; background: #17232f; box-shadow: 0 3px 8px rgb(0 0 0 / 12%); }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .dimension-floating-header .dimension-table { table-layout: fixed; margin: 0; min-width: 0; }
:is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .dimension-floating-header th { box-sizing: border-box; }
@media (max-width: 800px) {
    :is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .class-table-wrapper :is(th, td):first-child { position: sticky; left: 0; z-index: 1; box-shadow: 2px 0 4px rgb(23 35 47 / 10%); }
    :is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .class-table-wrapper tbody tr:nth-child(odd) > :first-child { background: #fff; }
    :is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .class-table-wrapper tbody tr:nth-child(even) > :first-child { background: #f5f7f9; }
    :is(.asme-standard-page, .din-standard-page, .standard-lookup-page) .dimension-floating-header th:first-child { position: relative; z-index: 2; background: #17232f; }
}
@media print {
    .dimension-floating-header { display: none !important; }
}


/* Remaining dimensional standards: shared lookup layout and source notes. */
.standard-lookup-page .remaining-lookup [hidden] { display: none !important; }
.standard-lookup-page .legacy-controls { display: none !important; }
.standard-lookup-page .remaining-lookup [class$="placeholder"] { padding: 24px; margin-top: 20px; border: 1px dashed #bac5ce; border-radius: 8px; color: #52616b; }
.standard-lookup-page .remaining-lookup [class$="placeholder"] h3 { font-size: 18px; margin-bottom: 8px; color: #17232f; }
.standard-lookup-page .remaining-lookup [class$="placeholder-icon"] { display: none; }
.standard-lookup-page .remaining-lookup [class$="summary"],
.standard-lookup-page .remaining-lookup .en-selection-summary { padding: 18px 0; color: #17232f; font-size: 15px; }
.standard-lookup-page .remaining-lookup [class$="summary"] span,
.standard-lookup-page .remaining-lookup .en-selection-summary span { display: block; font-size: 12px; color: #52616b; margin-bottom: 5px; }
.standard-lookup-page .remaining-lookup [class$="availability-note"] { margin: 16px 0; padding: 14px 18px; background: #fff3e8; color: #78401b; font-size: 15px; line-height: 1.7; border-radius: 6px; }
.standard-lookup-page .remaining-lookup [class$="notes"] { font-size: 16px; line-height: 1.75; color: #37434d; background: #fff; padding: 22px; margin-top: 20px; border: 1px solid #dce2e7; border-radius: 8px; }
.standard-lookup-page .remaining-lookup [class$="notes"] h3 { font-size: 19px; margin-bottom: 10px; }
.standard-lookup-page .remaining-lookup [class$="notes"] ul { padding-left: 22px; }
.standard-lookup-page .remaining-lookup [class$="notes"] li + li { margin-top: 8px; }
.standard-lookup-page .asme-dimension-key dt { flex-shrink: 0; }
.standard-lookup-page .remaining-lookup .dimension-table { min-width: 780px; }


/* ORIGINAL FOOTER LAYOUT — links left, Reach Us right. */
.footer.restored-footer { padding: 34px 0 18px; }
.restored-footer .footer-content { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 44px; }
.restored-footer .footer-about { max-width: none; }
.restored-footer .footer-about > p:first-of-type { margin-top: 0; }
.restored-footer .copyright { margin-top: 24px; padding-top: 18px; }
@media (max-width: 768px) {
    .restored-footer .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .restored-footer .footer-about { grid-column: 1 / -1; }
}