* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--xt-text); background: #fff; font-family: var(--xt-font-body); line-height: 1.6; }
body.menu-is-open { overflow: hidden; }
h1, h2, h3, h4, h5, h6 { color: var(--xt-blue); font-family: var(--xt-font-heading); line-height: 1.2; }
a { color: var(--xt-blue); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--xt-red); outline-offset: 3px; }
.site-header, .site-footer, main { padding-inline: max(1.25rem, calc((100% - 75rem) / 2)); }
.site-header { position: sticky; z-index: 50; top: 0; background: rgba(255,255,255,.98); box-shadow: 0 1px 12px rgba(26,29,41,.08); transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: 0 5px 22px rgba(26,29,41,.13); }
.header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; transition: min-height .2s ease; }
.is-scrolled .header-inner { min-height: 68px; }
.site-branding { flex: 0 0 auto; }
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { display: block; width: auto; max-width: 190px; max-height: 58px; transition: max-height .2s ease; }
.is-scrolled .custom-logo { max-height: 46px; }
.site-title { margin: 0; font: 700 1.35rem/1.2 var(--xt-font-heading); }
.site-title a { color: var(--xt-blue); text-decoration: none; }
.header-panel { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 3rem); }
.site-nav > div > ul, .site-nav > ul { display: flex; align-items: center; gap: clamp(.8rem, 1.8vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.site-nav li { position: relative; }
.site-nav a { color: var(--xt-text); text-decoration: none; font-weight: 600; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--xt-red); }
.site-nav .menu-item-has-children { display: flex; align-items: center; gap: .25rem; }
.submenu-toggle { display: inline-grid; flex: 0 0 2rem; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; color: inherit; background: transparent; cursor: pointer; font: inherit; }
.submenu-toggle:hover { background: var(--xt-bg-soft); }
.submenu-toggle span { display: block; line-height: 1; transition: transform .2s ease; }
.is-open > .submenu-toggle span { transform: rotate(180deg); }
.site-nav .sub-menu { display: none; position: absolute; z-index: 3; top: 100%; left: 0; width: max-content; min-width: 15rem; max-width: min(22rem, calc(100vw - 2rem)); margin: 0; padding: .65rem; list-style: none; background: #fff; border: 1px solid #e7eaf1; border-radius: .6rem; box-shadow: 0 15px 35px rgba(26,29,41,.14); }
.site-nav .is-open > .sub-menu { display: grid; gap: .65rem; }
.site-nav .sub-menu li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.site-nav .sub-menu a { display: block; flex: 1 1 auto; padding: .35rem .45rem; }
.site-nav .sub-menu .sub-menu { position: static; flex: 1 0 100%; width: auto; min-width: 0; max-width: none; margin: .25rem 0 0 .8rem; padding: .25rem 0 .25rem .75rem; border: 0; border-left: 2px solid var(--xt-bg-soft); border-radius: 0; box-shadow: none; }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; margin-top: 25px; padding: .01rem 1.15rem; border: 0; border-radius: .35rem; font-weight: 700; text-decoration: none; }
.button-quote { margin-top: 25px; color: #fff; background: var(--xt-red); box-shadow: 0 5px 14px rgba(214,24,42,.18); }
.button-quote:hover { background: #b91222; color: #fff; }
.menu-toggle { display: none; }
.site-main { min-height: 60vh; padding-block: 0; }
.site-home { padding: 0; }
.home-hero { position: relative; display: flex; min-height: clamp(34rem, 58vw, 48rem); align-items: center; overflow: hidden; color: #fff; background: var(--xt-blue); }
.home-hero::before { position: absolute; z-index: 1; inset: 0; content: ""; background: linear-gradient(100deg, rgba(15,24,66,.96) 0%, rgba(28,43,122,.83) 48%, rgba(28,43,122,.22) 100%); }
.home-hero-media { position: absolute; inset: 0; }
.home-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-hero-slider .home-hero-image { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.home-hero-slider .home-hero-image.is-active { opacity: 1; }
.home-hero-controls { position: absolute; z-index: 3; right: max(1.25rem, calc((100% - 75rem) / 2)); bottom: 1.5rem; display: flex; align-items: center; gap: .55rem; }
.home-hero-controls button { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: #fff; background: rgba(15,24,66,.55); cursor: pointer; }
.home-hero-controls button[data-hero-go] { width: .65rem; height: .65rem; padding: 0; border: 0; background: rgba(255,255,255,.6); }
.home-hero-controls button[data-hero-go][aria-current="true"] { background: #fff; }
.home-hero-controls button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .home-hero-slider .home-hero-image { transition: none; } }
.home-hero-content { position: relative; z-index: 2; width: 100%; max-width: 75rem; margin-inline: auto; padding: 6rem 1.25rem; }
.home-hero-copy { max-width: 44rem; }
.home-hero h1 { max-width: 13ch; margin: 0 0 1.25rem; color: #fff; font-size: clamp(2.5rem, 5.5vw, 4.6rem); letter-spacing: -.04em; }
.home-hero p { max-width: 38rem; margin: 0; color: rgba(255,255,255,.88); font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.button-outline { border: 1px solid rgba(255,255,255,.72); color: #fff; }
.button-outline:hover { color: var(--xt-blue); background: #fff; }
.home-stats { position: relative; z-index: 3; max-width: 75rem; margin: -2.5rem auto 0; padding-inline: 1.25rem; }
.home-stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); padding: 1.8rem 1rem; border-radius: .75rem; background: #fff; box-shadow: 0 12px 38px rgba(26,29,41,.12); }
.home-stat { display: grid; justify-items: center; gap: .15rem; padding: .35rem .75rem; text-align: center; }
.home-stat + .home-stat { border-left: 1px solid #e5e8f0; }
.home-stat strong { color: var(--xt-red); font: 700 clamp(1.5rem, 3vw, 2.25rem)/1.2 var(--xt-font-heading); }
.home-stat span { color: #5b6070; font-size: .9rem; }
.home-section, .home-clients { max-width: 75rem; margin-inline: auto; padding: 5.5rem 1.25rem; }
.home-section-heading { max-width: 48rem; margin: 0 auto 2.5rem; text-align: center; }
.home-section-heading h2 { margin: .4rem 0 .75rem; font-size: clamp(1.8rem, 3.4vw, 2.7rem); letter-spacing: -.025em; }
.home-section-heading p { margin: 0; color: #5b6070; font-size: 1.05rem; }
.eyebrow { color: var(--xt-red); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.home-category-grid, .home-grade-grid, .home-application-grid, .home-why-grid, .home-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.home-category-card, .home-grade-card, .home-application-card, .home-why-card, .home-news-card { min-width: 0; border: 1px solid #e7eaf1; border-radius: .7rem; background: #fff; box-shadow: 0 5px 20px rgba(26,29,41,.045); }
.home-category-card, .home-application-card { display: flex; flex-direction: column; padding: 1.5rem; color: var(--xt-text); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.home-category-card:hover, .home-application-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26,29,41,.1); }
.category-mark, .application-icon, .why-icon { display: grid; width: 3rem; height: 3rem; place-items: center; margin-bottom: 1.2rem; border-radius: .65rem; color: var(--xt-red); background: #fff0f1; font: 800 1.15rem var(--xt-font-heading); }
.home-category-card .category-mark { width: fit-content; min-width: 3rem; padding-inline: .55rem; font-size: .85rem; }
.home-category-card h3, .home-grade-card h3, .home-application-card h3, .home-why-card h3 { margin: 0 0 .6rem; color: var(--xt-blue); font-size: 1.2rem; }
.home-category-card p, .home-application-card p, .home-why-card p, .home-news-card p { margin: 0 0 1rem; color: #646a79; }
.text-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; color: var(--xt-red); font-weight: 700; }
.home-grades { max-width: none; background: var(--xt-bg-soft); }
.home-grades > .home-section-heading, .home-grades > .home-grade-grid, .home-grades > .home-section-action { max-width: 72.5rem; margin-inline: auto; }
.home-grade-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-grade-card { display: flex; flex-direction: column; padding: 1.35rem; }
.grade-material { display: inline-block; margin-bottom: .65rem; color: var(--xt-red); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.home-grade-card dl { margin: .8rem 0 1.1rem; border-top: 1px solid #edf0f5; }
.home-grade-card dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid #edf0f5; font-size: .85rem; }
.home-grade-card dt { color: #737989; }
.home-grade-card dd { margin: 0; color: var(--xt-text); font-weight: 700; }
.home-section-action { margin-top: 2rem; text-align: center; }
.button-secondary { border: 1px solid var(--xt-blue); color: var(--xt-blue); }
.button-secondary:hover { color: #fff; background: var(--xt-blue); }
.home-applications { max-width: none; }
.home-applications > .home-section-heading, .home-applications > .home-application-grid { max-width: 72.5rem; margin-inline: auto; }
.home-application-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-application-card { position: relative; min-height: 15rem; }
.application-icon { color: var(--xt-blue); background: #eef1ff; }
.application-icon svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.application-number { position: absolute; top: 1.4rem; right: 1.4rem; color: #aeb4c5; font: 700 .8rem var(--xt-font-heading); }
.home-why { max-width: none; color: #fff; background: #161d3d; }
.home-why .home-section-heading h2 { color: #fff; }
.home-why-grid { max-width: 72.5rem; margin-inline: auto; }
.home-why-card { padding: 1.5rem; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.055); }
.home-why-card h3 { color: #fff; }
.home-why-card p { margin-bottom: 0; color: #c8cde0; }
.why-icon { color: #fff; background: rgba(214,24,42,.75); }
.home-process { max-width: none; background: var(--xt-bg-soft); }
.home-process > .home-section-heading, .process-timeline { max-width: 72.5rem; margin-inline: auto; }
.process-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3rem; padding: 0; list-style: none; }
.process-timeline li { position: relative; padding: 0 1.25rem; text-align: center; }
.process-timeline li::before { position: absolute; top: 1.35rem; left: 0; right: 0; height: 2px; content: ""; background: #d8dce8; }
.process-timeline li:first-child::before { left: 50%; }
.process-timeline li:last-child::before { right: 50%; }
.process-timeline li > span { position: relative; z-index: 1; display: grid; width: 2.8rem; height: 2.8rem; place-items: center; margin: 0 auto 1rem; border: 2px solid var(--xt-red); border-radius: 50%; color: var(--xt-red); background: #fff; font-weight: 800; }
.process-timeline h3 { margin: 0; font-size: 1rem; }
.home-clients { padding-block: 3.5rem; }
.home-clients .home-section-heading { margin-bottom: 1.75rem; }
.home-clients .home-section-heading h2 { margin: 0; font-size: 1.35rem; }
.client-logo-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem 3rem; }
.client-logo { display: grid; min-width: 7rem; min-height: 3.5rem; place-items: center; }
.client-logo img { display: block; width: auto; max-width: 10rem; max-height: 3.5rem; object-fit: contain; }
.client-logo-display--carousel { position: relative; }
.client-logo-display--carousel .client-logo-list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: .5rem .25rem 1rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.client-logo-display--carousel .client-logo-list::-webkit-scrollbar { display: none; }
.client-logo-display--carousel .client-logo { flex: 0 0 clamp(9rem, 22vw, 13rem); scroll-snap-align: start; }
.client-logo-carousel-controls { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: .75rem; }
.client-logo-carousel-controls button { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--xt-border); border-radius: 50%; color: var(--xt-text); background: #fff; cursor: pointer; }
.client-logo-carousel-controls button:focus-visible { outline: 3px solid var(--xt-blue); outline-offset: 2px; }
.home-news { max-width: none; background: var(--xt-bg-soft); }
.home-news > .home-section-heading, .home-news > .home-news-grid { max-width: 72.5rem; margin-inline: auto; }
.home-news-card { display: flex; flex-direction: column; overflow: hidden; }
.news-image { position: relative; display: grid; flex: 0 0 12rem; height: 12rem; overflow: hidden; place-items: center; color: #fff; background: var(--xt-gradient); font: 700 2rem var(--xt-font-heading); text-decoration: none; }
.news-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-copy { position: relative; z-index: 1; padding: 1.25rem; background: #fff; }
.news-copy time { color: #777d8b; font-size: .8rem; }
.news-copy h3 { margin: .4rem 0 .6rem; font-size: 1.1rem; line-height: 1.4; overflow-wrap: anywhere; }
.news-copy h3 a { text-decoration: none; }
.news-copy p { display: -webkit-box; overflow: hidden; margin-bottom: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.news-copy .home-news-read-more { margin-top: .75rem; }
.home-cta-band { padding: 4.5rem 1.25rem; color: #fff; background: var(--xt-gradient); }
.home-cta-inner { display: flex; max-width: 72.5rem; align-items: center; justify-content: space-between; gap: 2rem; margin-inline: auto; }
.home-cta-band .eyebrow { color: rgba(255,255,255,.8); }
.home-cta-band h2 { margin: .4rem 0 .75rem; color: #fff; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.home-cta-band p { max-width: 42rem; margin: 0; color: rgba(255,255,255,.88); }
.button-light { flex: 0 0 auto; color: var(--xt-blue); background: #fff; }
.button-light:hover { color: var(--xt-red); background: #fff; }
.home-empty { color: #777d8b; text-align: center; }
.xt-breadcrumbs { margin-bottom: 1.75rem; color: #737989; font-size: .875rem; }
.xt-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.xt-breadcrumbs li + li::before { margin-right: .5rem; color: #a5aab6; content: "/"; }
.xt-breadcrumbs a { color: #626879; text-decoration: none; }
.xt-breadcrumbs a:hover { color: var(--xt-red); text-decoration: underline; }
.xt-page-banner { position: relative; left: 50%; display: flex; width: 100vw; max-width: none; min-height: 18rem; align-items: center; margin: -3rem 0 3rem; transform: translateX(-50%); color: #fff; background-position: center; background-size: cover; }
.xt-page-banner-inner { width: min(100% - 2.5rem, 75rem); margin-inline: auto; padding-block: 6rem; }
.xt-page-banner .xt-breadcrumbs { margin-bottom: 1.25rem; color: rgba(255,255,255,.82); }
.xt-page-banner .xt-breadcrumbs a { color: #fff; }
.xt-page-banner .xt-breadcrumbs li + li::before { color: rgba(255,255,255,.65); }
.xt-page-banner h1 { max-width: 18ch; margin: 0 0 .75rem; color: #fff; font-size: clamp(2.2rem, 5vw, 3.75rem); line-height: 1.1; }
.xt-page-banner p { max-width: 48rem; margin: 0; color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.7vw, 1.2rem); }
.xt-page-banner-features { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; margin: 1.25rem 0 0; padding: 0; list-style: none; color: rgba(255,255,255,.94); }
.xt-page-banner-features li::before { margin-right: .5rem; color: #fff; content: "✓"; }
.xt-page-banner-cta { margin-top: 1.5rem; }
.category-landing-page { padding-top: 0; }
.category-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; margin: 0 auto; padding-block: 4.5rem; }
.category-overview-image, .category-why-image { min-height: 20rem; overflow: hidden; border-radius: .8rem; background: var(--xt-bg-soft); }
.category-overview-image img, .category-why-image img { display: block; width: 100%; height: 100%; min-height: 20rem; object-fit: cover; }
.category-overview-copy h2, .category-why-copy h2 { margin: .5rem 0 1rem; color: var(--xt-blue); font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.category-overview-copy p, .category-why-copy p { color: #555b6b; line-height: 1.75; }
.category-products-section, .category-how-section, .category-faq-section { padding-block: 4.5rem; background: var(--xt-bg-soft); }
.category-how-section, .category-faq-section { margin-bottom: 60px; }
.category-section-inner { width: min(100% - 2.5rem, 75rem); margin-inline: auto; }
.category-products-section .home-section-heading, .category-benefits-section .section-heading, .category-how-section .section-heading, .category-process-section .section-heading, .category-faq-section .section-heading, .category-other-section .section-heading { max-width: 52rem; margin: 0 auto 2.5rem; text-align: center; }
.category-products-section .home-section-heading h2, .category-benefits-section h2, .category-how-section h2, .category-process-section h2, .category-faq-section h2, .category-other-section h2 { margin: .45rem 0 0; color: var(--xt-blue); font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.category-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.category-product-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #e5e8ef; border-radius: .8rem; background: #fff; box-shadow: 0 7px 24px rgba(26,29,41,.06); transition: transform .2s ease, box-shadow .2s ease; }
.category-product-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(26,29,41,.12); }
.category-product-image { display: grid; height: 13rem; place-items: center; overflow: hidden; color: #fff; background: var(--xt-gradient); text-decoration: none; }
.category-product-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.category-product-card:hover .category-product-image img { transform: scale(1.04); }
.category-product-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1.25rem; }
.category-product-copy h3 { margin: 0 0 .55rem; font-size: 1.1rem; line-height: 1.4; }
.category-product-copy h3 a { color: var(--xt-blue); text-decoration: none; }
.category-product-copy p { margin: 0 0 1.1rem; color: #646a79; font-size: .92rem; line-height: 1.6; }
.category-product-copy .button { margin-top: auto; }
.category-benefits-section, .category-process-section, .category-other-section { padding-block: 4.5rem; }
.category-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.category-benefit-grid li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border: 1px solid #e7eaf1; border-radius: .65rem; background: #fff; box-shadow: 0 5px 20px rgba(26,29,41,.04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.category-benefit-grid li:hover { transform: translateY(-4px); border-color: #cbd1e5; box-shadow: 0 13px 28px rgba(26,29,41,.1); }
.category-benefit-grid li > span, .category-how-steps li > span { flex: 0 0 auto; color: var(--xt-red); font: 800 1.1rem var(--xt-font-heading); }
.category-benefit-grid p { margin: 0; color: #505666; line-height: 1.6; }
.category-why-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; margin: 0 auto; padding-block: 4.5rem; }
.category-why-copy ul { display: grid; gap: .65rem; margin: 1.25rem 0 1.5rem; padding-left: 1.2rem; color: #505666; }
.category-how-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.category-how-steps li { display: flex; gap: .8rem; padding: 1.2rem; border: 1px solid transparent; border-radius: .65rem; background: #fff; box-shadow: 0 5px 20px rgba(26,29,41,.045); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.category-how-steps li:hover { transform: translateY(-4px); border-color: #dce1ef; box-shadow: 0 13px 28px rgba(26,29,41,.1); }
.category-rich-text > :first-child { margin-top: 0; }
.category-rich-text > :last-child { margin-bottom: 0; }
.category-how-steps p { margin: 0; color: #505666; line-height: 1.55; }
.category-process-section { position: relative; left: 50%; width: 100vw; transform: translateX(-50%); color: #fff; background: #171e3d; }
.category-process-section .section-heading h2 { color: #fff; }
.category-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.category-process-grid li { min-width: 0; }
.category-process-image { display: grid; height: 12rem; place-items: center; overflow: hidden; border-radius: .65rem; color: #fff; background: rgba(255,255,255,.1); font: 800 1.5rem var(--xt-font-heading); }
.category-process-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.category-process-grid h3 { margin: .9rem 0 .35rem; color: #fff; font-size: 1rem; }
.category-process-grid p { margin: 0; color: #c8cde0; font-size: .9rem; line-height: 1.55; }
.category-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.category-faq-grid details { align-self: start; padding: 1.2rem 1.35rem; border: 1px solid #e3e7ef; border-radius: .65rem; background: #fff; }
.category-faq-grid summary { color: var(--xt-blue); font-weight: 700; cursor: pointer; }
.category-faq-grid details p { margin: .85rem 0 0; color: #555b6b; line-height: 1.65; }
.category-other-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.category-other-grid a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; border: 1px solid #e7eaf1; border-radius: .65rem; color: var(--xt-blue); background: #fff; font-weight: 700; text-decoration: none; }
.category-inquiry-section { position: relative; left: 50%; width: 100vw; padding-block: 4.5rem; transform: translateX(-50%); color: #fff; text-align: center; background: var(--xt-gradient); }
.category-inquiry-section .category-section-inner { max-width: 58rem; }
.category-inquiry-section .eyebrow { color: rgba(255,255,255,.8); }
.category-inquiry-section h2 { margin: .5rem 0 1rem; color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.category-inquiry-content { margin-bottom: 1.5rem; color: rgba(255,255,255,.9); }
.category-inquiry-content > *:first-child { margin-top: 0; }
.category-inquiry-content > *:last-child { margin-bottom: 0; }
.category-inquiry-section .button-light { color: var(--xt-blue); }
.blog-archive-page, .blog-single-page { padding-block: 4.5rem; }
.blog-detail-banner { position: relative; left: 50%; display: flex; width: 100vw; min-height: 8rem; align-items: center; margin-top: -4.5rem; margin-bottom: 2.5rem; transform: translateX(-50%); color: #fff; background: var(--xt-gradient); }
.blog-detail-banner-inner { width: min(100% - 2.5rem, 75rem); margin-inline: auto; padding-block: 1.25rem; }
.blog-detail-banner .eyebrow { color: rgba(255,255,255,.8); }
.blog-detail-banner .xt-breadcrumbs { margin: .35rem 0 0; color: rgba(255,255,255,.78); }
.blog-detail-banner .xt-breadcrumbs a { color: #fff; }
.blog-detail-banner .xt-breadcrumbs li + li::before { color: rgba(255,255,255,.65); }
.blog-archive-inner, .blog-single-inner { width: min(100% - 2.5rem, 75rem); margin-inline: auto; }
.blog-archive-heading { max-width: 52rem; margin: 0 auto 2.5rem; text-align: center; }
.blog-archive-heading h1 { margin: .45rem 0 .75rem; color: var(--xt-blue); font-size: clamp(2rem, 4vw, 3.2rem); }
.blog-archive-description { color: #646a79; }
.blog-post-grid { display: grid; gap: 1.25rem; }
.blog-post-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-post-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blog-post-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #e7eaf1; border-radius: .75rem; background: #fff; box-shadow: 0 6px 22px rgba(26,29,41,.05); transition: transform .2s ease, box-shadow .2s ease; }
.blog-post-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26,29,41,.11); }
.blog-post-card-image { display: grid; height: 13rem; place-items: center; overflow: hidden; color: #fff; background: var(--xt-gradient); font: 800 2rem var(--xt-font-heading); text-decoration: none; }
.blog-post-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.blog-post-card:hover .blog-post-card-image img { transform: scale(1.04); }
.blog-post-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1.25rem; }
.blog-post-meta { display: flex; flex-wrap: wrap; gap: .55rem .9rem; align-items: center; color: #717787; font-size: .8rem; }
.blog-post-meta a { color: var(--xt-red); font-weight: 700; text-decoration: none; }
.blog-post-card h2 { margin: .75rem 0 .5rem; font-size: 1.15rem; line-height: 1.4; }
.blog-post-card h2 a { color: var(--xt-blue); text-decoration: none; }
.blog-post-card-copy > p { display: -webkit-box; overflow: hidden; margin: 0 0 1rem; color: #646a79; font-size: .92rem; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.blog-post-card-copy .text-link { margin-top: auto; }
.blog-archive-page .navigation.pagination { margin-top: 2.5rem; }
.blog-archive-page .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.blog-archive-page .page-numbers { display: grid; min-width: 2.6rem; min-height: 2.6rem; place-items: center; padding: .35rem .7rem; border: 1px solid #dce0e9; border-radius: .35rem; color: var(--xt-blue); text-decoration: none; }
.blog-archive-page .page-numbers.current { color: #fff; border-color: var(--xt-blue); background: var(--xt-blue); }
.blog-single-layout { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.blog-sidebar { position: sticky; top: 1.5rem; display: grid; gap: 1.25rem; }
.blog-toc, .blog-sidebar-section { padding: 1.25rem; border: 1px solid #e7eaf1; border-radius: .65rem; background: var(--xt-bg-soft); }
.blog-sidebar h2 { margin: 0 0 .85rem; color: var(--xt-blue); font-size: 1.05rem; }
.blog-toc ol, .blog-sidebar-categories, .blog-related-list { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.blog-toc li { line-height: 1.45; }
.blog-toc li.blog-toc-h3 { padding-left: .85rem; font-size: .9rem; }
.blog-toc a, .blog-sidebar-categories a { color: #4f5667; text-decoration: none; }
.blog-toc a:hover, .blog-sidebar-categories a:hover { color: var(--xt-red); text-decoration: underline; }
.blog-related-list a { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .75rem; align-items: center; color: var(--xt-blue); font-size: .9rem; font-weight: 700; line-height: 1.4; text-decoration: none; }
.blog-related-list img { display: block; width: 4rem; height: 3.5rem; border-radius: .3rem; object-fit: cover; }
.blog-article { min-width: 0; }
.blog-article-header { margin-bottom: 1.5rem; }
.blog-article-header h1 { margin: 0 0 .7rem; color: var(--xt-blue); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.15; }
.blog-article-featured-image { margin-bottom: 1.25rem; overflow: hidden; border-radius: .75rem; }
.blog-article-featured-image img { display: block; width: 100%; max-height: 38rem; object-fit: cover; }
.blog-article-content { color: #3f4553; font-size: 1.03rem; line-height: 1.8; overflow-wrap: anywhere; }
.blog-article-content h2, .blog-article-content h3 { scroll-margin-top: 1.5rem; color: var(--xt-blue); line-height: 1.3; }
.blog-article-content h2 { margin-top: 2.5rem; font-size: clamp(1.55rem, 3vw, 2rem); }
.blog-article-content h3 { margin-top: 1.8rem; font-size: 1.3rem; }
.blog-article-content img { max-width: 100%; height: auto; border-radius: .45rem; }
.blog-article .post-navigation { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #e7eaf1; }
.blog-article .post-navigation a { color: var(--xt-blue); font-weight: 700; }
.blog-empty { padding: 2rem; border-radius: .65rem; background: var(--xt-bg-soft); text-align: center; }
@media (max-width: 900px) {
.blog-post-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-single-layout { grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: 1.5rem; }
}
@media (max-width: 640px) {
.blog-archive-page, .blog-single-page { padding-block: 3rem; }
.blog-detail-banner { margin-top: -3rem; }
.blog-post-grid--3, .blog-post-grid--4 { grid-template-columns: 1fr; }
.blog-single-layout { grid-template-columns: 1fr; }
.blog-sidebar { position: static; grid-row: 2; }
}
@media (max-width: 900px) {
.category-product-grid, .category-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.category-benefit-grid, .category-how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.category-overview, .category-why-section { grid-template-columns: 1fr; }
.category-overview, .category-why-section, .category-products-section, .category-benefits-section, .category-how-section, .category-process-section, .category-faq-section, .category-other-section, .category-inquiry-section { padding-block: 3rem; }
.category-product-grid, .category-process-grid, .category-benefit-grid, .category-how-steps, .category-faq-grid, .category-other-grid { grid-template-columns: 1fr; }
.category-overview-image, .category-why-image, .category-overview-image img, .category-why-image img { min-height: 15rem; }
}
.contact-page { padding-bottom: 0; }
.contact-main { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; margin: 0 auto 4.5rem; }
.contact-main > .contact-details-panel, .contact-main > .contact-form-panel { height: 87%; box-sizing: border-box; }
.contact-details-panel { padding: clamp(1.5rem, 4vw, 3rem); border-radius: .75rem; color: #fff; background: var(--xt-contact-panel-color, var(--xt-blue)); }
.contact-details-panel .eyebrow { color: rgba(255,255,255,.78); }
.contact-details-panel h2, .contact-form-panel h2, .contact-map-heading h2 { margin: .5rem 0 .75rem; font-size: clamp(1.65rem, 3vw, 2.25rem); }
.contact-details-panel h2 { color: #fff; }
.contact-details-intro { margin: 0; color: rgba(255,255,255,.84); }
.contact-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 5.25rem; }
.contact-detail { min-width: 0; padding: 0 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.24); }
.contact-detail:nth-child(odd) { padding-left: 0; border-right: 1px solid rgba(255,255,255,.24); }
.contact-detail:nth-child(even) { padding-right: 0; }
.contact-detail-label { display: block; margin-bottom: .35rem; color: rgba(255,255,255,.7); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.contact-detail a, .contact-detail address, .contact-detail p { margin: 0; color: #fff; font-size: .98rem; font-style: normal; line-height: 1.65; overflow-wrap: anywhere; text-decoration: none; }
.contact-detail a:hover { text-decoration: underline; text-underline-offset: .2em; }
.contact-detail-hours { grid-column: 1 / -1; padding-inline: 0; border-right: 0; }
.contact-form-panel { padding: clamp(1.5rem, 4vw, 3rem); border-radius: .75rem; background: #e7e7e7; }
.contact-form-panel > p { margin: 0 0 1.5rem; color: #646a79; }
.contact-form-content .wpcf7 { margin-top: 1.5rem; }
.contact-form-content .wpcf7 form { display: grid; gap: .5rem; }
.contact-form-content .wpcf7 p { margin: 0; }
.contact-form-content .wpcf7 .xt-contact-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.contact-form-content .wpcf7 .xt-contact-form-row label { min-width: 0; }
.contact-form-content .wpcf7 label { display: block; color: #454b5c; font-size: .9rem; font-weight: 700; }
.contact-form-content .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .contact-form-content .wpcf7 select, .contact-form-content .wpcf7 textarea { display: block; width: 100%; min-height: 1rem; margin-top: .4rem; margin-bottom: 23px; padding: .7rem .8rem; border: 1px solid #cbd0dc; border-radius: .35rem; color: var(--xt-text); background: #fff; font: inherit; }
.contact-form-content .wpcf7 textarea { min-height: 150px; resize: vertical; }
.contact-form-content .wpcf7 input:focus, .contact-form-content .wpcf7 select:focus, .contact-form-content .wpcf7 textarea:focus { outline: 3px solid rgba(28,43,122,.2); border-color: var(--xt-blue); }
.contact-form-content .wpcf7 input[type="submit"] { display: block; min-height: 3rem; margin-top: 30px; padding: .3rem 1.7rem; border: 0; border-radius: .35rem; color: #fff; background: var(--xt-red); font: inherit; font-weight: 700; cursor: pointer; }
.contact-form-content .wpcf7 input[type="submit"]:hover { background: #b91222; }
.contact-form-content .wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: .25rem; color: #b91222; font-size: .82rem; }
.contact-form-content .wpcf7 .wpcf7-response-output { margin: .5rem 0 0; padding: .8rem; border-radius: .35rem; }
.contact-map-section { position: relative; left: 50%; width: 100vw; margin-bottom: -3rem; transform: translateX(-50%); }
.contact-map-section iframe { display: block; width: 100%; max-width: none; height: clamp(22rem, 45vw, 38rem); margin: 0; border: 0; border-radius: 0; }
@media (max-width: 900px) { .contact-main { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .contact-details-grid { grid-template-columns: 1fr; } .contact-detail, .contact-detail:nth-child(odd), .contact-detail:nth-child(even), .contact-detail-hours { grid-column: auto; padding-inline: 0; border-right: 0; } .contact-form-content .wpcf7 .xt-contact-form-row { grid-template-columns: 1fr; gap: .5rem; } .contact-main { margin-bottom: 3rem; } }
.product-archive, .product-single { max-width: 75rem; margin-inline: auto; }
.catalog-heading { max-width: 53rem; margin: 0 auto 2.25rem; text-align: center; }
.catalog-heading h1 { margin: .4rem 0 .75rem; font-size: clamp(2rem, 4vw, 3rem); }
.catalog-heading p { margin: 0; color: #646a79; }
.product-filters { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.25rem; padding: 1.25rem; border: 1px solid #e7eaf1; border-radius: .65rem; background: var(--xt-bg-soft); }
.product-filter-fields { display: grid; flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.product-filter-fields label, .inline-rfq-form label { display: grid; gap: .35rem; color: #454b5c; font-size: .875rem; font-weight: 700; }
.product-filter-fields select, .inline-rfq-form input, .inline-rfq-form textarea { width: 100%; min-height: 2.8rem; padding: .55rem .7rem; border: 1px solid #cbd0dc; border-radius: .35rem; color: var(--xt-text); background: #fff; font: inherit; }
.inline-rfq-form textarea { min-height: 7rem; resize: vertical; }
.product-filter-actions { display: flex; align-items: center; gap: .9rem; }
.product-filter-actions > a { color: #5f6575; font-size: .9rem; }
.catalog-count { margin: 0 0 1rem; color: #737989; font-size: .9rem; }
.product-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.product-card { min-width: 0; overflow: hidden; border: 1px solid #e7eaf1; border-radius: .7rem; background: #fff; box-shadow: 0 5px 20px rgba(26,29,41,.045); }
.product-card-image { display: grid; height: 14rem; place-items: center; color: #fff; background: var(--xt-gradient); font: 700 2rem var(--xt-font-heading); text-decoration: none; }
.product-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-card-content { display: flex; min-height: 13rem; flex-direction: column; padding: 1.25rem; }
.product-card-terms { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.product-card-terms span { padding: .2rem .45rem; border-radius: 2rem; color: var(--xt-blue); background: #eef1ff; font-size: .7rem; font-weight: 700; }
.product-card h2, .product-card h3 { margin: 0 0 .6rem; font-size: 1.2rem; }
.product-card h2 a, .product-card h3 a { color: var(--xt-blue); text-decoration: none; }
.product-card-content p { margin: 0 0 1rem; color: #646a79; }
.product-card-content .text-link { margin-top: auto; }
.product-pagination { margin-top: 2rem; }
.product-pagination .page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.product-pagination a, .product-pagination span { display: grid; min-width: 2.5rem; min-height: 2.5rem; place-items: center; padding: .3rem .6rem; border: 1px solid #dce0e9; border-radius: .35rem; text-decoration: none; }
.product-pagination .current { color: #fff; border-color: var(--xt-blue); background: var(--xt-blue); }
.product-empty { padding: 3rem 1rem; text-align: center; }
.product-empty p { color: #646a79; }
.product-detail-header { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: start; }
.product-detail-copy h1 { margin: .4rem 0 .75rem; font-size: clamp(2.1rem, 4vw, 3.2rem); }
.product-tagline { color: #5f6575; font-size: 1.1rem; }
.product-description { margin-block: 1.25rem; }
.product-detail-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
.button-download { border: 1px solid #dce0e9; color: var(--xt-blue); }
.inquiry-feedback { min-height: 1.5rem; margin: .75rem 0 0; color: #237348; font-weight: 700; }
.inquiry-view-link { display: inline-flex; margin-top: .25rem; color: var(--xt-red); font-weight: 700; }
.product-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.product-gallery-image { display: block; overflow: hidden; border-radius: .6rem; background: var(--xt-bg-soft); }
.product-gallery-image:first-child { grid-column: 1 / -1; }
.product-gallery-image img { display: block; width: 100%; height: 100%; max-height: 28rem; object-fit: cover; }
.product-gallery-image:not(:first-child) img { max-height: 11rem; }
.product-specifications, .product-related-section { margin-top: 4rem; }
.product-specifications h2, .product-related-section h2, .product-rfq h2 { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.product-specifications table { width: 100%; border-collapse: collapse; }
.product-specifications th, .product-specifications td { padding: .85rem 1rem; border-bottom: 1px solid #e7eaf1; text-align: left; vertical-align: top; }
.product-specifications th { width: 33%; color: var(--xt-blue); background: var(--xt-bg-soft); }
.product-specifications td a { color: var(--xt-blue); }
.related-grade-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.related-grade-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid #e7eaf1; border-radius: .45rem; }
.related-grade-list span { color: #737989; }
.related-content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.related-content-card { padding: 1.25rem; border: 1px solid #e7eaf1; border-radius: .55rem; }
.related-content-card h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.related-content-card p { margin: 0; color: #646a79; }
.product-rfq { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; align-items: start; margin-top: 4rem; padding: 2rem; border-radius: .8rem; background: var(--xt-bg-soft); scroll-margin-top: 7rem; }
.product-rfq > div > p { color: #646a79; }
.inline-rfq-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.inline-rfq-form .rfq-message-field { grid-column: 1 / -1; }
.inline-rfq-form button { justify-self: start; }
.xt-lightbox { position: fixed; width: min(90vw, 70rem); max-width: none; max-height: 90vh; padding: 3rem 1rem 1rem; border: 0; border-radius: .6rem; background: #101323; }
.xt-lightbox::backdrop { background: rgba(10,12,22,.86); }
.xt-lightbox img { display: block; max-width: 100%; max-height: calc(90vh - 4rem); margin-inline: auto; object-fit: contain; }
.lightbox-close { position: absolute; top: .5rem; right: .75rem; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); font-size: 1.5rem; cursor: pointer; }
.grades-page { max-width: 75rem; margin-inline: auto; }
.grades-tools { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.grades-search-label { display: grid; width: min(100%, 24rem); gap: .4rem; color: #454b5c; font-weight: 700; }
.grades-search-label input { min-height: 2.9rem; padding: .6rem .75rem; border: 1px solid #cbd0dc; border-radius: .35rem; font: inherit; }
.grade-unit-toggle { display: flex; align-items: center; gap: .35rem; }
.grade-unit-toggle > span { margin-right: .25rem; color: #626879; font-size: .9rem; }
.grade-unit-toggle button { min-height: 2.5rem; padding: .4rem .75rem; border: 1px solid #dce0e9; border-radius: .3rem; color: var(--xt-blue); background: #fff; font: 700 .85rem var(--xt-font-body); cursor: pointer; }
.grade-unit-toggle button[aria-pressed="true"] { border-color: var(--xt-blue); color: #fff; background: var(--xt-blue); }
.grade-tabs { display: flex; gap: .35rem; margin-bottom: 0; border-bottom: 1px solid #dce0e9; }
.grade-tabs button { padding: .8rem 1.15rem; border: 0; border-bottom: 3px solid transparent; color: #626879; background: transparent; font: 700 1rem var(--xt-font-body); cursor: pointer; }
.grade-tabs button[aria-selected="true"] { border-bottom-color: var(--xt-red); color: var(--xt-blue); }
.grade-table-scroll { max-height: 70vh; overflow: auto; max-width: 100%; border: 1px solid #e1e5ed; border-top: 0; border-radius: 0 0 .55rem .55rem; }
.grade-table { width: 100%; min-width: 56rem; border-collapse: separate; border-spacing: 0; }
.grade-table th, .grade-table td { padding: .85rem .8rem; border-bottom: 1px solid #e8ebf1; text-align: left; white-space: nowrap; }
.grade-table thead th { position: sticky; z-index: 2; top: 0; color: #fff; background: var(--xt-blue); }
.grade-table thead th button { padding: 0; border: 0; color: inherit; background: transparent; font: 700 .82rem var(--xt-font-body); cursor: pointer; }
.grade-table thead th[aria-sort="ascending"] button::after { content: " ↑"; }
.grade-table thead th[aria-sort="descending"] button::after { content: " ↓"; }
.grade-table tbody th { color: var(--xt-blue); font-weight: 700; }
.grade-table tbody th a { text-decoration: none; }
.grade-table tbody tr:nth-child(even) { background: #f8f9fc; }
.grade-table tbody tr:hover { background: #f0f2fa; }
.grade-request-heading { min-width: 9.5rem; }
.grade-request-cell a { color: var(--xt-red); font-size: .82rem; font-weight: 700; }
.grade-no-results td { padding: 2rem; color: #6a7080; text-align: center; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.content-width { max-width: 75rem; margin-inline: auto; }
.section-heading { max-width: 48rem; margin: 0 auto 2rem; text-align: center; }
.section-heading h2 { margin: .4rem 0 .7rem; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.section-heading p { margin: 0; color: #646a79; }
.application-archive { max-width: 75rem; margin-inline: auto; }
.application-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.application-card { overflow: hidden; border: 1px solid #e7eaf1; border-radius: .7rem; background: #fff; box-shadow: 0 5px 20px rgba(26,29,41,.045); }
.application-card-media { display: grid; height: 14rem; place-items: center; color: #fff; background: var(--xt-gradient); font: 700 2rem var(--xt-font-heading); text-decoration: none; }
.application-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.application-card-content { display: flex; min-height: 13rem; flex-direction: column; padding: 1.25rem; }
.application-card-content h2 { margin: .4rem 0 .6rem; font-size: 1.25rem; }
.application-card-content h2 a { color: var(--xt-blue); text-decoration: none; }
.application-card-content p { margin: 0 0 1rem; color: #646a79; }
.application-card-content .text-link { margin-top: auto; }
.application-hero { position: relative; display: flex; min-height: 25rem; align-items: flex-end; overflow: hidden; margin: 0 calc(50% - 50vw) 3rem; padding: 4rem max(1.25rem, calc((100vw - 75rem) / 2)); color: #fff; background: var(--xt-gradient); }
.application-hero::before { position: absolute; z-index: 1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(15,24,66,.9), rgba(28,43,122,.52)); }
.application-hero-media { position: absolute; inset: 0; }
.application-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.application-hero-content { position: relative; z-index: 2; width: 100%; max-width: 75rem; margin-inline: auto; }
.application-hero .eyebrow { color: rgba(255,255,255,.78); }
.application-hero h1 { margin: .4rem 0 .8rem; color: #fff; font-size: clamp(2.5rem, 5vw, 4rem); }
.application-tagline { max-width: 44rem; margin: 0; color: rgba(255,255,255,.9); font-size: 1.15rem; }
.application-intro { padding-block: .5rem 2rem; }
.application-challenges { margin-block: 2rem; padding: 2rem; border-left: 4px solid var(--xt-red); background: var(--xt-bg-soft); }
.application-challenges h2 { margin: .4rem 0 .75rem; }
.challenge-copy { white-space: pre-line; }
.application-recommendations { margin: 3rem calc(50% - 50vw) 0; padding: 4rem max(1.25rem, calc((100vw - 75rem) / 2)); background: var(--xt-bg-soft); }
.application-recommendations .section-heading { margin-bottom: 1.75rem; }
.application-grades, .application-gallery-section { margin-block: 4rem; }
.application-grade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.application-grade-card { padding: 1.25rem; border: 1px solid #e7eaf1; border-radius: .55rem; }
.application-grade-card > span { color: var(--xt-red); font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.application-grade-card h3 { margin: .5rem 0; }
.application-grade-card h3 a { color: var(--xt-blue); text-decoration: none; }
.application-grade-card p { margin: 0; color: #646a79; }
.content-image-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.content-image-gallery a { display: block; overflow: hidden; border-radius: .55rem; background: var(--xt-bg-soft); }
.content-image-gallery img { display: block; width: 100%; height: 15rem; object-fit: cover; transition: transform .25s ease; }
.content-image-gallery a:hover img { transform: scale(1.03); }
.content-cta-band { margin: 4rem calc(50% - 50vw) 0; padding: 3.5rem max(1.25rem, calc((100vw - 75rem) / 2)); color: #fff; background: var(--xt-gradient); }
.content-cta-inner { display: flex; max-width: 75rem; align-items: center; justify-content: space-between; gap: 2rem; margin-inline: auto; }
.content-cta-band .eyebrow { color: rgba(255,255,255,.8); }
.content-cta-band h2 { margin: .4rem 0 .7rem; color: #fff; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.content-cta-band p { max-width: 42rem; margin: 0; color: rgba(255,255,255,.88); }
.company-page { max-width: 75rem; margin-inline: auto; }
.company-page-heading { max-width: 55rem; margin: 0 auto 3rem; text-align: center; }
.company-page-heading h1 { margin: .4rem 0 1rem; font-size: clamp(2.1rem, 4vw, 3.25rem); }
.company-page-heading > p { color: #646a79; font-size: 1.05rem; }
.company-page-intro { color: #4e5463; text-align: left; }
.company-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 3rem; align-items: center; margin-bottom: 4rem; }
.company-profile-image img { display: block; width: 100%; height: auto; border-radius: .7rem; }
.company-values-section { margin: 0 calc(-1 * max(1.25rem, (100% - 75rem) / 2)); padding: 4rem max(1.25rem, calc((100% - 75rem) / 2)); background: var(--xt-bg-soft); }
.mission-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.mission-value-card { padding: 1.5rem; border: 1px solid #e7eaf1; border-radius: .65rem; background: #fff; }
.company-card-icon { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; margin-bottom: 1rem; border-radius: .6rem; color: #fff; background: var(--xt-gradient); font: 800 1.15rem var(--xt-font-heading); }
.mission-value-card h3 { margin: 0 0 .6rem; }
.mission-value-card p { margin: 0; color: #646a79; }
.company-timeline-section { padding-block: 4rem; }
.company-timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 1rem 0 0; list-style: none; }
.company-timeline::before { position: absolute; top: 1.6rem; left: 0; right: 0; height: 2px; content: ""; background: #dce0e9; }
.company-timeline li { position: relative; padding: 2rem .75rem 0; }
.company-timeline li::before { position: absolute; z-index: 1; top: .25rem; left: .75rem; width: 1rem; height: 1rem; border: 3px solid #fff; border-radius: 50%; content: ""; background: var(--xt-red); box-shadow: 0 0 0 1px var(--xt-red); }
.timeline-date { display: block; margin-bottom: .45rem; color: var(--xt-red); font-weight: 800; }
.company-timeline h3 { margin: 0 0 .4rem; font-size: 1rem; }
.company-timeline p { margin: 0; color: #646a79; font-size: .9rem; }
.facility-section, .technology-section, .clients-logo-section { padding-block: 1rem 4rem; }
.facility-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.facility-card { display: grid; grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.2fr); overflow: hidden; border: 1px solid #e7eaf1; border-radius: .65rem; background: #fff; box-shadow: 0 5px 20px rgba(26,29,41,.045); }
.facility-card-image { display: grid; min-height: 15rem; place-items: center; color: #fff; background: var(--xt-gradient); font: 700 1.5rem var(--xt-font-heading); text-decoration: none; }
.facility-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.facility-card-content { padding: 1.25rem; }
.facility-card-content h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.facility-card-content h2 a { text-decoration: none; }
.facility-card-content p { margin: .5rem 0; color: #646a79; font-size: .9rem; }
.facility-spec-list { margin: .75rem 0 0; border-top: 1px solid #e8ebf1; }
.facility-spec-list > div { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid #e8ebf1; font-size: .82rem; }
.facility-spec-list dt { color: #737989; }
.facility-spec-list dd { margin: 0; color: var(--xt-text); font-weight: 700; text-align: right; }
.technology-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.technology-card { position: relative; min-height: 15rem; padding: 1.75rem; border: 1px solid #e7eaf1; border-radius: .65rem; background: #fff; box-shadow: 0 5px 20px rgba(26,29,41,.045); }
.technology-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; margin-bottom: 1.25rem; border-radius: .7rem; color: var(--xt-blue); background: #eef1ff; }
.technology-icon svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.technology-index { position: absolute; top: 1.8rem; right: 1.8rem; color: #b5bac7; font: 700 .8rem var(--xt-font-heading); }
.technology-card h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.technology-card p { margin: 0; color: #646a79; }
.clients-logo-section .client-logo-list { gap: 2.5rem 4rem; padding: 1.5rem 0; }
.site-footer { padding-block: 7.5rem 1.25rem; color: #fff; background: #151b36; }
.footer-main { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.15fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.site-footer h2 { margin: 0 0 1rem; color: #fff; font-size: 1.05rem; }
.site-footer p { margin: .5rem 0; }
.footer-about p { max-width: 19rem; color: #d3d7e5; }
.site-footer .custom-logo { filter: brightness(0) invert(1); }
.site-footer .site-title a, .site-footer a { color: #fff; }
.footer-menu-column ul, .footer-bottom ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.footer-menu-column a, .footer-contact a { color: #d3d7e5; text-decoration: none; }
.footer-menu-column a:hover, .footer-contact a:hover, .footer-bottom a:hover { color: #fff; text-decoration: underline; }
.footer-contact address { color: #d3d7e5; font-style: normal; white-space: pre-line; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.18); color: #d3d7e5; font-size: .875rem; }
.footer-bottom p { margin: 0; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-bottom a { color: #d3d7e5; text-decoration: none; }
.floating-contact { position: fixed; z-index: 40; right: 1.25rem; bottom: 1.25rem; display: grid; gap: .65rem; }
.floating-contact-link { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; color: #fff; background: #1eaa61; box-shadow: 0 5px 18px rgba(0,0,0,.2); font-size: 1.5rem; text-decoration: none; }
.floating-contact-link:hover { color: #fff; transform: translateY(-2px); }
.email-link { background: var(--xt-red); }
.skip-link { position: absolute; z-index: 100; top: .5rem; left: .5rem; padding: .75rem; transform: translateY(-200%); background: #fff; }
.skip-link:focus { transform: none; }
@media (max-width: 900px) {
.site-header { padding-inline: 1rem; }
.header-inner, .is-scrolled .header-inner { min-height: 70px; }
.custom-logo { max-height: 48px; }
.menu-toggle { display: flex; align-items: center; gap: .65rem; margin-left: auto; padding: .55rem; border: 0; background: transparent; color: var(--xt-blue); font: 700 .9rem var(--xt-font-body); cursor: pointer; }
.menu-toggle-icon { display: grid; gap: 4px; width: 1.35rem; }
.menu-toggle-icon span { height: 2px; width: 100%; background: currentColor; transition: transform .2s, opacity .2s; }
.menu-open .menu-toggle-icon span:first-child { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-toggle-icon span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle-icon span:last-child { transform: translateY(-6px) rotate(-45deg); }
.header-panel { position: fixed; z-index: 49; inset: 70px 0 0; display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; overflow-y: auto; padding: 1.5rem 1.25rem 2rem; background: #fff; box-shadow: 0 12px 18px rgba(0,0,0,.12); visibility: hidden; opacity: 0; transform: translateX(100%); transition: transform .25s ease, opacity .25s, visibility .25s; }
.menu-open .header-panel { visibility: visible; opacity: 1; transform: none; }
.site-nav > div > ul, .site-nav > ul { display: grid; align-items: stretch; gap: 0; }
.site-nav li { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid #e7eaf1; }
.site-nav > div > ul > li > a, .site-nav > ul > li > a { padding: .95rem .25rem; }
.site-nav .sub-menu { position: static; grid-column: 1 / -1; width: auto; min-width: 0; max-width: none; margin: 0; padding: 0 0 .85rem 1rem; transform: none; border: 0; border-radius: 0; box-shadow: none; }
.site-nav .is-open > .sub-menu { display: grid; gap: .6rem; }
.site-nav .sub-menu li { border: 0; }
.site-nav .sub-menu a { display: block; padding: .3rem; }
.header-actions { align-items: stretch; flex-direction: column; }
.header-actions .button { width: 100%; }
}
@media (max-width: 640px) {
.footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
.footer-about, .footer-contact { grid-column: 1 / -1; }
.footer-bottom { align-items: flex-start; flex-direction: column; }
.floating-contact { right: .8rem; bottom: .8rem; }
}
@media (max-width: 900px) {
.application-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.company-profile { grid-template-columns: 1fr; gap: 1.5rem; }
.facility-card-grid { grid-template-columns: 1fr; }
.grades-tools { align-items: stretch; flex-direction: column; }
.grades-search-label { width: 100%; }
.product-detail-header { grid-template-columns: 1fr; }
.product-gallery { grid-row: 1; }
.product-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-rfq { grid-template-columns: 1fr; gap: 1.5rem; }
.home-hero { min-height: 38rem; }
.home-hero-content { padding-block: 5rem; }
.home-category-grid, .home-application-grid, .home-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-grade-grid, .home-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-cta-inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
.application-card-grid, .application-grade-grid, .content-image-gallery, .mission-values-grid, .company-timeline, .technology-card-grid { grid-template-columns: 1fr; }
.application-hero { min-height: 22rem; padding-block: 3rem; }
.application-recommendations { padding-block: 3rem; }
.content-cta-band { padding-block: 3rem; }
.content-cta-inner { align-items: flex-start; flex-direction: column; }
.company-page-heading { margin-bottom: 2rem; }
.company-values-section { padding-block: 3rem; }
.company-timeline { gap: .75rem; }
.company-timeline::before { top: .3rem; bottom: .3rem; left: .45rem; right: auto; width: 2px; height: auto; }
.company-timeline li { padding: 0 0 1.5rem 2rem; }
.company-timeline li::before { top: .15rem; left: 0; }
.facility-card { grid-template-columns: 1fr; }
.facility-card-image { min-height: 12rem; max-height: 15rem; }
.product-filters { align-items: stretch; flex-direction: column; }
.product-filter-fields { grid-template-columns: 1fr; }
.product-filter-actions { align-items: flex-start; flex-direction: column; }
.product-card-grid, .related-grade-list, .related-content-grid { grid-template-columns: 1fr; }
.product-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-gallery-image img { max-height: 18rem; }
.product-specifications th, .product-specifications td { padding: .7rem .65rem; }
.product-specifications th { width: 42%; }
.product-rfq { padding: 1.25rem; }
.inline-rfq-form { grid-template-columns: 1fr; }
.inline-rfq-form .rfq-message-field { grid-column: auto; }
.home-hero { min-height: 35rem; }
.home-hero::before { background: linear-gradient(90deg, rgba(15,24,66,.94), rgba(28,43,122,.67)); }
.home-hero-content { padding: 4rem 1.25rem 6rem; }
.home-hero h1 { font-size: clamp(2.35rem, 11vw, 3.4rem); }
.home-hero-actions { align-items: stretch; flex-direction: column; max-width: 20rem; }
.home-stats { margin-top: -2rem; }
.home-stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .8rem; }
.home-stat { padding: .75rem .4rem; }
.home-stat:nth-child(3) { border-left: 0; }
.home-stat:nth-child(n+3) { border-top: 1px solid #e5e8f0; }
.home-section, .home-clients { padding-block: 3.75rem; }
.home-category-grid, .home-grade-grid, .home-application-grid, .home-why-grid, .home-news-grid { grid-template-columns: 1fr; }
.process-timeline { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; }
.process-timeline li { display: flex; align-items: center; gap: 1rem; padding: 0; text-align: left; }
.process-timeline li::before { top: 2.8rem; bottom: -1.3rem; left: 1.35rem; right: auto; width: 2px; height: auto; }
.process-timeline li:first-child::before { left: 1.35rem; }
.process-timeline li:last-child::before { display: none; }
.process-timeline li > span { flex: 0 0 2.8rem; margin: 0; }
.home-cta-band { padding-block: 3.5rem; }
.home-cta-inner { gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.home-category-image { display: block; overflow: hidden; aspect-ratio: 4 / 3; margin: -1.5rem -1.5rem 1.25rem; border-radius: .7rem .7rem 0 0; background: var(--xt-bg-soft); }
.home-category-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-filter-term-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.product-filter-term-group legend { margin-bottom: .35rem; color: #454b5c; font-size: .875rem; font-weight: 700; }
.product-filter-term-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.product-filter-term-option { position: relative; display: flex !important; min-height: 2.8rem; align-items: center; gap: .5rem !important; padding: .35rem .55rem; border: 1px solid #cbd0dc; border-radius: .4rem; background: #fff; cursor: pointer; }
.product-filter-term-option:has(input:checked) { border-color: var(--xt-blue); box-shadow: 0 0 0 1px var(--xt-blue); }
.product-filter-term-option input { accent-color: var(--xt-blue); }
.product-filter-term-image { display: block; width: 2.5rem; height: 2.5rem; overflow: hidden; border-radius: .25rem; background: var(--xt-bg-soft); }
.product-filter-term-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-filter-term-option:focus-within { outline: 3px solid var(--xt-red); outline-offset: 2px; }
.taxonomy-term-hero { margin-bottom: 2.5rem; }
.taxonomy-product-results { max-width: 75rem; margin-inline: auto; }
.home-grade-image { overflow: hidden; aspect-ratio: 4 / 3; margin: -1.35rem -1.35rem 1.1rem; border-radius: .7rem .7rem 0 0; background: var(--xt-bg-soft); }
.home-grade-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.grade-inquiry-trigger { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.grade-inquiry-dialog { position: fixed; width: min(94vw, 62rem); max-width: none; max-height: 92vh; overflow: auto; padding: 0; border: 0; border-radius: .8rem; color: var(--xt-text); background: #fff; box-shadow: 0 24px 80px rgba(9,15,40,.28); }
.grade-inquiry-dialog::backdrop { background: rgba(10,14,32,.72); backdrop-filter: blur(3px); }
.grade-inquiry-layout { display: grid; min-height: 35rem; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.grade-inquiry-photo { position: relative; display: flex; min-height: 35rem; align-items: flex-end; overflow: hidden; padding: 2rem; color: #fff; background: var(--xt-gradient); }
.grade-inquiry-photo::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 35%, rgba(12,18,48,.82)); }
.grade-inquiry-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.grade-inquiry-photo h2 { position: relative; z-index: 1; margin: 0; color: #fff; font-size: clamp(1.8rem, 3vw, 2.65rem); }
.grade-inquiry-panel { position: relative; padding: 2rem clamp(1.35rem, 4vw, 3rem); }
.grade-inquiry-close { position: absolute; top: .8rem; right: .8rem; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 0; border-radius: 50%; color: var(--xt-blue); background: var(--xt-bg-soft); font-size: 1.5rem; cursor: pointer; }
.grade-inquiry-logo { min-height: 3.5rem; margin: 0 3rem 1.25rem 0; }
.grade-inquiry-logo img { display: block; width: auto; max-width: 11rem; max-height: 3.5rem; object-fit: contain; }
.grade-inquiry-logo .custom-logo-link { display: inline-flex; }
.grade-inquiry-logo > span { color: var(--xt-blue); font: 700 1.2rem var(--xt-font-heading); }
.grade-inquiry-panel > h2 { margin: 0 0 1.25rem; font-size: clamp(1.55rem, 2.8vw, 2rem); }
.grade-inquiry-form { display: grid; gap: .9rem; }
.grade-inquiry-form label { display: grid; gap: .3rem; color: #454b5c; font-size: .875rem; font-weight: 700; }
.grade-inquiry-form input, .grade-inquiry-form textarea { width: 100%; min-height: 2.8rem; padding: .6rem .75rem; border: 1px solid #cbd0dc; border-radius: .35rem; color: var(--xt-text); background: #fff; font: inherit; }
.grade-inquiry-form textarea { min-height: 7rem; resize: vertical; }
.grade-inquiry-form button { justify-self: start; }
.grade-inquiry-notice { margin: 0 0 1rem; padding: .75rem; border-radius: .35rem; color: #174c31; background: #e8f6ee; font-size: .9rem; }
.grade-inquiry-notice:not([hidden]) { display: block; }
@media (max-width: 680px) {
.grade-inquiry-dialog { width: min(94vw, 34rem); }
.grade-inquiry-layout { grid-template-columns: 1fr; }
.grade-inquiry-photo { min-height: 13rem; padding: 1.25rem; }
.grade-inquiry-panel { padding: 1.5rem 1.25rem; }
}
.grade-inquiry-dialog { height: 66.67vh; max-height: 66.67vh; overflow: hidden; }
.grade-inquiry-layout { height: 100%; min-height: 0; }
.grade-inquiry-photo { min-height: 0; justify-content: center; text-align: center; }
.grade-inquiry-photo h2 { text-align: center; }
.grade-inquiry-panel { overflow-y: auto; }
.grade-inquiry-logo { display: flex; min-height: 3.5rem; justify-content: center; align-items: center; margin: 0 0 1.25rem; }
.grade-inquiry-logo .custom-logo-link { justify-content: center; }
.grade-inquiry-logo .custom-logo { margin-inline: auto; }
.grade-inquiry-panel > h2 { text-align: center; }
.grade-inquiry-form button { justify-self: center; border: 1px solid var(--xt-red); background: var(--xt-red); }
@media (max-width: 680px) {
.grade-inquiry-dialog { height: 66.67vh; max-height: 66.67vh; overflow-y: auto; }
.grade-inquiry-layout { display: block; }
.grade-inquiry-photo { min-height: 12rem; }
.grade-inquiry-panel { overflow: visible; }
}
/* Homepage industry cards */
.home-applications { background: linear-gradient(180deg, #f7f8fc 0%, #fff 100%); }
.home-applications > .home-section-heading { max-width: 48rem; }
.home-application-grid { gap: 1.1rem; }
.home-application-card { position: relative; isolation: isolate; min-height: 22rem; overflow: hidden; padding: 0; border: 0; border-radius: .85rem; color: #fff; background: var(--xt-gradient); box-shadow: 0 10px 28px rgba(21, 30, 73, .13); transition: transform .25s ease, box-shadow .25s ease; }
.home-application-card::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(180deg, rgba(12, 20, 52, .04) 20%, rgba(12, 20, 52, .38) 52%, rgba(12, 20, 52, .96) 100%); transition: background .25s ease; }
.home-application-card:hover, .home-application-card:focus-visible { transform: translateY(-5px); color: #fff; box-shadow: 0 18px 38px rgba(21, 30, 73, .23); }
.home-application-card:hover::after, .home-application-card:focus-visible::after { background: linear-gradient(180deg, rgba(12, 20, 52, .1) 10%, rgba(12, 20, 52, .48) 47%, rgba(12, 20, 52, .98) 100%); }
.home-application-card-media { position: absolute; z-index: -2; inset: 0; display: block; overflow: hidden; background: var(--xt-gradient); }
.home-application-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.home-application-card:hover .home-application-card-media img, .home-application-card:focus-visible .home-application-card-media img { transform: scale(1.06); }
.home-application-card .application-number { top: 1rem; right: 1rem; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #fff; background: rgba(14, 24, 65, .28); font-size: .75rem; backdrop-filter: blur(8px); }
.home-application-card-content { display: flex; min-height: 22rem; flex-direction: column; justify-content: flex-end; padding: 1.5rem; }
.home-application-card .application-icon { width: 2.8rem; height: 2.8rem; margin: 0 0 1rem; border: 1px solid rgba(255,255,255,.25); border-radius: .7rem; color: #fff; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); }
.home-application-card .application-icon svg { width: 1.7rem; height: 1.7rem; }
.home-application-card-title { display: block; margin-bottom: .45rem; color: #fff; font: 700 1.35rem/1.25 var(--xt-font-heading); }
.home-application-card-description { display: -webkit-box; overflow: hidden; margin-bottom: 1.1rem; color: rgba(255,255,255,.84); font-size: .9rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.home-application-card-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.28); color: #fff; font-size: .85rem; font-weight: 700; }
.home-application-card-link > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: var(--xt-blue); background: #fff; transition: transform .2s ease; }
.home-application-card:hover .home-application-card-link > span, .home-application-card:focus-visible .home-application-card-link > span { transform: translateX(3px); }
@media (max-width: 640px) {
.home-application-grid { grid-template-columns: 1fr; }
.home-application-card, .home-application-card-content { min-height: 20rem; }
}
@media (prefers-reduced-motion: reduce) {
.home-application-card, .home-application-card::after, .home-application-card-media img, .home-application-card-link > span { transition: none; }
}
/* About page introduction and purpose cards */
.about-page { padding-top: 1.5rem; }
.about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; gap: clamp(3rem, 7vw, 6.5rem); margin: 1.5rem auto 5.5rem; }
.about-intro-visual { position: relative; min-height: 52rem; margin: .5rem 1.5rem 1rem 0; }
.about-intro-photo { position: absolute; overflow: hidden; border-radius: 1rem; background: var(--xt-bg-soft); box-shadow: 0 20px 55px rgba(26,29,41,.16); }
.about-intro-photo-main { inset: 0 3.5rem 2.5rem 0; }
.about-intro-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-photo-placeholder { display: grid; width: 100%; height: 100%; min-height: 25rem; place-items: center; color: #fff; background: var(--xt-gradient); font: 800 4rem var(--xt-font-heading); }
.about-intro-photo-secondary { z-index: 2; right: 0; bottom: 0; width: 49%; height: 48%; border: .5rem solid #fff; }
.about-photo-caption { position: absolute; z-index: 3; bottom: 3.25rem; left: 1.25rem; display: flex; align-items: center; gap: .7rem; max-width: 17rem; padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.6); border-radius: .65rem; color: #fff; background: rgba(18,29,79,.8); box-shadow: 0 8px 25px rgba(0,0,0,.16); font-size: .82rem; font-weight: 700; backdrop-filter: blur(10px); }
.about-photo-caption-mark { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: .4rem; background: var(--xt-red); font: 800 .72rem var(--xt-font-heading); }
.about-intro-copy h1 { margin: .45rem 0 .9rem; font-size: clamp(2.25rem, 4.3vw, 3.5rem); letter-spacing: -.035em; }
.about-intro-subtitle { margin: 0 0 1rem; color: var(--xt-blue); font: 700 clamp(1.1rem, 1.7vw, 1.35rem)/1.45 var(--xt-font-heading); }
.about-intro-description { margin-bottom: 1.6rem; color: #5b6070; font-size: 1.02rem; }
.about-intro-description > :first-child { margin-top: 0; }
.about-intro-description > :last-child { margin-bottom: 0; }
.about-intro-copy > .button { gap: .8rem; }
.company-values-section { padding: 5.5rem 1.25rem; background: var(--xt-bg-soft); }
.company-values-section .section-heading { max-width: 45rem; margin: 0 auto 2.5rem; text-align: center; }
.company-values-section .section-heading h2 { margin: .45rem 0 .75rem; font-size: clamp(1.8rem, 3.5vw, 2.7rem); }
.company-values-section .section-heading p { margin: 0; color: #646a79; }
.mission-values-grid { max-width: 72.5rem; margin-inline: auto; align-items: stretch; }
.mission-value-card { position: relative; padding: 1.7rem; border: 1px solid #e6eaf2; border-radius: .85rem; background: #fff; box-shadow: 0 8px 25px rgba(26,29,41,.045); }
.mission-value-card .company-card-icon { width: 3rem; height: 3rem; margin-bottom: 1.2rem; border-radius: .75rem; color: #fff; background: var(--xt-gradient); }
.mission-value-label { display: block; margin-bottom: .35rem; color: var(--xt-red); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mission-value-card h3 { margin: 0 0 .7rem; font-size: 1.3rem; }
.mission-value-card p { margin: 0; color: #646a79; }
.mission-value-card-values { border-top: 3px solid var(--xt-red); }
.about-values-list { display: grid; gap: .7rem; margin: .95rem 0 0; padding: 0; list-style: none; }
.about-values-list li { display: flex; align-items: flex-start; gap: .65rem; color: #505667; font-size: .92rem; font-weight: 600; }
.about-values-list li > span { display: grid; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--xt-red); background: #fff0f1; font-size: .75rem; }
@media (max-width: 900px) {
.about-intro { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 2rem; }
.about-intro-visual { min-height: 26rem; }
}
@media (max-width: 640px) {
.about-intro { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3.5rem; }
.about-intro-visual { min-height: 21rem; margin-right: .5rem; }
.about-intro-photo-main { right: 2.5rem; bottom: 1.8rem; }
.about-intro-photo-secondary { width: 48%; height: 45%; border-width: .35rem; }
.about-photo-caption { bottom: 2.5rem; left: .75rem; padding: .6rem .75rem; }
.company-values-section { padding-block: 3.5rem; }
}
/* Keep the About Us feature section full-bleed while constraining readable content. */
.about-intro.content-width { width: 100%; max-width: 75rem; margin-inline: auto; padding-inline: 0; }
.company-values-section { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); padding-inline: clamp(1.25rem, 5vw, 5rem); }
/* Homepage About section */
.home-about { max-width: none; background: #fff; }
.home-about-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; gap: clamp(3rem, 7vw, 6rem); max-width: 75rem; margin-inline: auto; }
.home-about .about-intro-visual { min-height: 52rem; }
.home-about-copy h2 { margin: .45rem 0 .9rem; color: var(--xt-blue); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.035em; }
.home-about-copy > .button { gap: .8rem; }
@media (max-width: 900px) {
.home-about-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 2rem; }
.home-about .about-intro-visual { min-height: 28rem; }
}
@media (max-width: 640px) {
.home-about-inner { grid-template-columns: 1fr; gap: 2rem; }
.home-about .about-intro-visual { min-height: 21rem; margin-right: .5rem; }
}
/* About page certification carousel */
.about-certificates-section { padding: 4.5rem 1.25rem; background: #fff; }
.about-certificates-inner { max-width: 75rem; margin-inline: auto; }
.about-certificates-section .section-heading { margin-bottom: 1.5rem; text-align: center; }
.about-certificates-section .section-heading h2 { margin: .45rem 0 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.about-certificates-controls { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: .8rem; }
.about-certificates-controls button { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 1px solid #d8dce8; border-radius: 50%; color: var(--xt-blue); background: #fff; cursor: pointer; }
.about-certificates-controls button:hover { color: #fff; border-color: var(--xt-blue); background: var(--xt-blue); }
.about-certificates-controls button:focus-visible { outline: 3px solid var(--xt-red); outline-offset: 2px; }
.about-certificate-track { display: flex; gap: 1.25rem; overflow-x: auto; padding: .25rem .1rem 1rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.about-certificate-card { flex: 0 0 calc((100% - 2.5rem) / 3); min-width: 0; overflow: hidden; border: 1px solid #e7eaf1; border-radius: .8rem; background: #fff; box-shadow: 0 6px 22px rgba(26,29,41,.06); scroll-snap-align: start; }
.about-certificate-image { display: grid; height: 30rem; place-items: center; padding: 1rem; background: var(--xt-bg-soft); }
.about-certificate-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.about-certificate-card h3 { margin: 0; padding: 1rem 1.1rem 1.15rem; color: var(--xt-blue); font-size: 1rem; }
@media (max-width: 900px) { .about-certificate-card { flex-basis: calc((100% - 1.25rem) / 2); } }
.about-certificate-track::-webkit-scrollbar { display: none; }
@media (max-width: 600px) { .about-certificates-section { padding-block: 3rem; } .about-certificate-card { flex-basis: 88%; } .about-certificate-image { height: 30rem; } }
@media (prefers-reduced-motion: reduce) { .about-certificate-track { scroll-behavior: auto; } }
.about-certificates-empty { max-width: 48rem; margin: 0 auto; padding: 1.5rem; border: 1px solid #e7eaf1; border-radius: .75rem; color: #646a79; background: var(--xt-bg-soft); text-align: center; }
/* Production process cards with step photography */
.process-timeline { gap: 1rem; }
.process-timeline::before, .process-timeline li::before { display: none; }
.process-timeline li { display: block; overflow: hidden; padding: 0 0 1.1rem; border: 1px solid #e4e8f0; border-radius: .8rem; background: #fff; box-shadow: 0 7px 22px rgba(26,29,41,.06); text-align: left; }
.process-step-image { position: relative; display: grid; height: 12rem; place-items: center; overflow: hidden; color: #fff; background: var(--xt-gradient); }
.process-step-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.process-step-image > span { font: 800 2.5rem var(--xt-font-heading); opacity: .85; }
.process-step-number { display: grid !important; width: 2.5rem !important; height: 2.5rem !important; margin: -1.25rem 0 .75rem 1rem !important; border: 3px solid #fff !important; color: #fff !important; background: var(--xt-red) !important; }
.process-timeline h3 { padding-inline: 1rem; font-size: 1rem; }
@media (max-width: 900px) { .process-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process-timeline li { display: block; padding: 0 0 1rem; } .process-step-image { height: 11rem; } }
@media (max-width: 600px) { .process-timeline { grid-template-columns: 1fr; } .process-step-image { height: 13rem; } }