/* WST-I background hierarchy
   Preserves the original layout and card system; only adds full-bleed section backgrounds. */

body.wsti-page {
    background: #eef2f4;
}

/* Hero: a real sleep-health environment with clear space for the title. */
.wsti-page .hero-section {
    background: #0b1b2c !important;
    box-shadow: inset 0 -1px 0 rgba(213, 180, 122, 0.18);
}

body.wsti-page:has(.wsti-tag-label) .hero-bg-overlay {
    opacity: 1 !important;
    background:
        linear-gradient(90deg, rgba(5, 17, 31, 0.76) 0%, rgba(8, 24, 40, 0.54) 48%, rgba(6, 18, 32, 0.72) 100%),
        linear-gradient(180deg, rgba(5, 15, 29, 0.24) 0%, rgba(6, 18, 33, 0.38) 55%, rgba(6, 17, 31, 0.76) 100%),
        url('../assets/images/wsti-hero-realistic-20260721-v2.png') center 49% / cover no-repeat !important;
}

.wsti-page .section-padding {
    position: relative;
    isolation: isolate;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid rgba(62, 83, 105, 0.13);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 26px 42px -52px rgba(27, 49, 72, 0.62);
}

.wsti-page .section-padding > .container-wsc,
.wsti-page .section-padding > .container {
    position: relative;
    z-index: 2;
}

/* Clean light background: evolution and comparison. */
.wsti-page .wsti-evolution-section {
    background:
        radial-gradient(820px 460px at 8% 12%, rgba(74, 111, 142, 0.13), transparent 70%),
        radial-gradient(720px 420px at 94% 88%, rgba(180, 148, 96, 0.10), transparent 72%),
        linear-gradient(180deg, #edf3f7 0%, #f8fafb 52%, #eef3f6 100%) !important;
}

/* One content-led photo background: the 3H philosophy. */
.wsti-page .wsti-philosophy-section {
    background:
        linear-gradient(120deg, rgba(8, 20, 43, 0.93) 0%, rgba(14, 35, 57, 0.87) 54%, rgba(20, 49, 61, 0.82) 100%),
        url('../assets/images/wsti-module-3h-20260721.webp') center 48% / cover no-repeat !important;
    border-top-color: rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 30px 50px -56px rgba(0, 0, 0, 0.9);
}

/* Warm paper background: composition and formula. */
.wsti-page .wsti-composition-section {
    overflow: hidden;
    background:
        radial-gradient(880px 520px at 7% 10%, rgba(55, 111, 169, 0.10), transparent 72%),
        radial-gradient(780px 440px at 94% 16%, rgba(180, 148, 96, 0.15), transparent 70%),
        linear-gradient(180deg, #f3f1eb 0%, #fbfaf7 48%, #f0eee8 100%) !important;
}

.wsti-page .wsti-composition-section::before {
    content: '';
    position: absolute;
    top: 90px;
    right: -160px;
    z-index: 0;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(31, 66, 101, 0.07);
    border-radius: 50%;
    box-shadow:
        0 0 0 58px rgba(31, 66, 101, 0.018),
        0 0 0 116px rgba(180, 148, 96, 0.014);
    pointer-events: none;
}

.wsti-page .wsti-composition-section .section-header {
    margin-bottom: 52px;
}

/* Formula core: one calm, premium banner with three readable formula nodes. */
.wsti-page .wsti-composition-section .wsc-formula {
    margin-bottom: 58px;
    padding: 42px 46px 44px;
    background:
        radial-gradient(560px 180px at 50% 0%, rgba(220, 184, 124, 0.16), transparent 76%),
        linear-gradient(118deg, #102447 0%, #132b4a 46%, #0d1d35 100%);
    border: 1px solid rgba(221, 186, 126, 0.34);
    border-radius: 22px;
    box-shadow:
        0 28px 64px -38px rgba(9, 25, 47, 0.76),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

.wsti-page .wsti-composition-section .wsc-formula::before,
.wsti-page .wsti-composition-section .wsc-formula::after {
    width: 34px;
    height: 34px;
    border-color: rgba(220, 184, 124, 0.58);
}

.wsti-page .wsti-composition-section .formula-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 30px;
    margin: 0 auto 20px;
    padding: 0 16px;
    color: #ead0a2;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(220, 184, 124, 0.20);
    border-radius: 999px;
    letter-spacing: 0.18em;
}

.wsti-page .wsti-composition-section .formula-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #ffffff;
    font-family: var(--wsc-serif);
    font-size: clamp(1.12rem, 1.55vw, 1.45rem);
    line-height: 1.45;
}

.wsti-page .wsti-composition-section .formula-body .gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    color: #f0d5a3;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045));
    border: 1px solid rgba(221, 186, 126, 0.22);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.wsti-page .wsti-composition-section .formula-body .op {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    color: #e0b467;
    background: rgba(224, 180, 103, 0.10);
    border: 1px solid rgba(224, 180, 103, 0.20);
    border-radius: 50%;
    font-size: 1rem;
}

/* Six-part framework: each part has its own restrained category colour. */
.wsti-page .wsti-composition-section .wsc-formula + .grid-3 {
    gap: 24px;
    margin-bottom: 64px !important;
}

.wsti-page .wsti-composition-section .element-card {
    --element-accent: #315f91;
    box-sizing: border-box;
    min-height: 150px;
    padding: 26px 72px 24px 32px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(35, 61, 83, 0.12);
    border-radius: 18px;
    box-shadow:
        0 20px 46px -34px rgba(24, 48, 69, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.wsti-page .wsti-composition-section .element-card:nth-child(2) { --element-accent: #2c8790; }
.wsti-page .wsti-composition-section .element-card:nth-child(3) { --element-accent: #b48745; }
.wsti-page .wsti-composition-section .element-card:nth-child(4) { --element-accent: #7463a6; }
.wsti-page .wsti-composition-section .element-card:nth-child(5) { --element-accent: #4f8a70; }
.wsti-page .wsti-composition-section .element-card:nth-child(6) { --element-accent: #a56b4f; }

.wsti-page .wsti-composition-section .element-card::before {
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 5px;
    height: auto;
    background: linear-gradient(180deg, var(--element-accent), color-mix(in srgb, var(--element-accent) 30%, white));
    border-radius: 0 4px 4px 0;
}

.wsti-page .wsti-composition-section .element-card::after {
    top: 22px;
    right: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: color-mix(in srgb, var(--element-accent) 78%, #173047);
    background: color-mix(in srgb, var(--element-accent) 8%, white);
    border: 1px solid color-mix(in srgb, var(--element-accent) 18%, white);
    border-radius: 12px;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    opacity: 1;
}

.wsti-page .wsti-composition-section .element-card:hover {
    border-color: color-mix(in srgb, var(--element-accent) 28%, white);
    box-shadow: 0 26px 58px -38px color-mix(in srgb, var(--element-accent) 42%, rgba(24, 48, 69, 0.40));
    transform: translateY(-5px);
}

.wsti-page .wsti-composition-section .element-card:hover::after {
    color: color-mix(in srgb, var(--element-accent) 88%, #173047);
    transform: none;
}

.wsti-page .wsti-composition-section .element-card .card-title {
    position: relative;
    z-index: 2;
    margin-bottom: 9px;
    color: #183047;
    font-size: 1.18rem;
    line-height: 1.45;
}

.wsti-page .wsti-composition-section .element-card .card-desc {
    position: relative;
    z-index: 2;
    color: #65788a;
    line-height: 1.65;
}

/* A visual hand-off from the six framework parts to the scientific base. */
.wsti-page .wsti-composition-section .wsc-divider {
    width: min(100%, 980px);
    margin: 0 auto 34px;
    background: linear-gradient(90deg, transparent, rgba(43, 75, 101, 0.18) 24%, rgba(180, 135, 69, 0.36) 50%, rgba(43, 75, 101, 0.18) 76%, transparent);
}

.wsti-page .wsti-composition-section .wsc-subhead {
    max-width: 760px;
    margin-bottom: 30px;
    padding: 17px 26px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(35, 61, 83, 0.09);
    border-radius: 18px;
    box-shadow: 0 18px 42px -38px rgba(24, 48, 69, 0.50);
}

.wsti-page .wsti-composition-section .wsc-subhead .wsc-eyebrow {
    margin-bottom: 7px;
}

.wsti-page .wsti-composition-section .wsc-subhead h3::after {
    width: 52px;
    background: linear-gradient(90deg, #315f91, #b48745);
}

/* Three formal scientific pillars; emoji are replaced by durable Roman badges. */
.wsti-page .wsti-composition-section .wsc-subhead + .grid-3 {
    gap: 28px;
}

.wsti-page .wsti-composition-section .wsc-subhead + .grid-3 .light-card {
    --pillar-accent: #315f91;
    box-sizing: border-box;
    min-height: 236px;
    padding: 28px 32px 26px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--pillar-accent) 4%, white), rgba(255, 255, 255, 0.94));
    border: 1px solid color-mix(in srgb, var(--pillar-accent) 17%, white);
    border-top: 4px solid var(--pillar-accent);
    border-radius: 22px;
    box-shadow:
        0 24px 54px -36px color-mix(in srgb, var(--pillar-accent) 45%, rgba(22, 45, 66, 0.34)),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.wsti-page .wsti-composition-section .wsc-subhead + .grid-3 .light-card:nth-child(2) { --pillar-accent: #4b8e88; }
.wsti-page .wsti-composition-section .wsc-subhead + .grid-3 .light-card:nth-child(3) { --pillar-accent: #b48745; }

.wsti-page .wsti-composition-section .wsc-subhead + .grid-3 .light-card::after {
    content: '';
    position: absolute;
    right: -52px;
    bottom: -62px;
    width: 150px;
    height: 150px;
    border: 1px solid color-mix(in srgb, var(--pillar-accent) 11%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 24px color-mix(in srgb, var(--pillar-accent) 3%, transparent);
}

.wsti-page .wsti-composition-section .wsc-subhead + .grid-3 .icon-box {
    position: relative;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    color: transparent;
    background: color-mix(in srgb, var(--pillar-accent) 9%, white);
    border: 1px solid color-mix(in srgb, var(--pillar-accent) 19%, white);
    border-radius: 16px;
    font-size: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.wsti-page .wsti-composition-section .wsc-subhead + .grid-3 .icon-box::before {
    content: 'I';
    color: var(--pillar-accent);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.wsti-page .wsti-composition-section .wsc-subhead + .grid-3 .light-card:nth-child(2) .icon-box::before { content: 'II'; }
.wsti-page .wsti-composition-section .wsc-subhead + .grid-3 .light-card:nth-child(3) .icon-box::before { content: 'III'; }

.wsti-page .wsti-composition-section .wsc-subhead + .grid-3 .card-title {
    position: relative;
    z-index: 2;
    margin-bottom: 9px;
    color: #183047;
    font-family: var(--wsc-serif);
    font-size: 1.28rem;
}

.wsti-page .wsti-composition-section .wsc-subhead + .grid-3 .card-desc {
    position: relative;
    z-index: 2;
    color: #637789;
    line-height: 1.68;
}

.wsti-page .wsti-composition-section .wsc-subhead + .grid-3 .light-card:hover {
    border-color: color-mix(in srgb, var(--pillar-accent) 30%, white);
    transform: translateY(-5px);
}

/* Nine principles / four layers: distinct content scenes with a shared editorial grade. */
.wsti-page #matrix {
    position: relative;
    background: #e9eff1;
}

.wsti-page #matrix > section:first-child {
    background:
        linear-gradient(180deg, rgba(235, 241, 240, 0.58), rgba(248, 246, 240, 0.68)),
        url('../assets/images/wsti-nine-overview-20260721-v2.webp') center 48% / cover no-repeat !important;
    padding-bottom: clamp(32px, 2vw, 44px) !important;
}

.wsti-page #matrix > section:nth-child(2) {
    --layer-accent: #315f91;
    background:
        linear-gradient(100deg, rgba(235, 242, 247, 0.86) 0%, rgba(249, 247, 242, 0.82) 100%),
        url('../assets/images/wsti-nine-mind-20260721-v2.webp') center 50% / cover no-repeat !important;
}

.wsti-page #matrix > section:nth-child(3) {
    --layer-accent: #2c8790;
    background:
        linear-gradient(100deg, rgba(236, 246, 245, 0.76) 0%, rgba(249, 248, 242, 0.80) 100%),
        url('../assets/images/wsti-nine-body-20260721-v2.webp') center 50% / cover no-repeat !important;
}

.wsti-page #matrix > section:nth-child(4) {
    --layer-accent: #7567a4;
    background:
        linear-gradient(100deg, rgba(247, 242, 236, 0.84) 0%, rgba(248, 245, 240, 0.86) 100%),
        url('../assets/images/wsti-nine-lifestyle-20260721-v2.webp') center 48% / cover no-repeat !important;
}

.wsti-page #matrix > section:nth-child(5) {
    --layer-accent: #b48745;
    background:
        linear-gradient(100deg, rgba(235, 243, 245, 0.81) 0%, rgba(249, 244, 236, 0.84) 100%),
        url('../assets/images/wsti-nine-environment-20260721-v2.webp') center 50% / cover no-repeat !important;
}

.wsti-page #matrix > section:not(:first-child) {
    color: #17283a !important;
    border-top: 1px solid rgba(30, 55, 75, 0.20);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        inset 0 24px 46px -42px color-mix(in srgb, var(--layer-accent) 34%, transparent),
        0 -18px 42px -40px rgba(16, 38, 58, 0.52);
}

.wsti-page #matrix > section:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, transparent 4%, var(--layer-accent) 32%, color-mix(in srgb, var(--layer-accent) 42%, white) 68%, transparent 96%) !important;
    border-radius: 0;
    opacity: 0.92 !important;
    pointer-events: none;
}

.wsti-page #matrix > section:not(:first-child)::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 92px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--layer-accent) 10%, rgba(19, 43, 59, 0.18))) !important;
    border-radius: 0;
    opacity: 0.68 !important;
    pointer-events: none;
}

.wsti-page #matrix > section:not(:first-child) .dim-header {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    overflow: hidden;
    padding: 30px 38px 30px 44px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(35, 60, 80, 0.13);
    border-radius: 0 18px 18px 0;
    box-shadow:
        0 22px 46px -38px rgba(23, 47, 67, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.wsti-page #matrix > section:not(:first-child) .dim-header::before {
    top: 20px;
    bottom: 20px;
    width: 5px;
}

.wsti-page #matrix > section:not(:first-child) .dim-subtitle {
    color: var(--layer-accent) !important;
    background: color-mix(in srgb, var(--layer-accent) 10%, white) !important;
    border: 1px solid color-mix(in srgb, var(--layer-accent) 22%, white);
}

.wsti-page #matrix .section-dark .dim-header h3,
.wsti-page #matrix .section-dark .dim-header p {
    color: #17283a !important;
}

.wsti-page #matrix .section-dark .dim-header .section-title.dark {
    color: #142b40 !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #142b40 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
}

.wsti-page #matrix .section-dark .dim-header p,
.wsti-page #matrix .section-light .dim-header p {
    color: #5f7283 !important;
}

.wsti-page #matrix > section:not(:first-child) .light-card,
.wsti-page #matrix > section:not(:first-child) .glass-card {
    color: #17283a;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(45, 71, 92, 0.15) !important;
    border-top: 4px solid color-mix(in srgb, var(--layer-accent) 86%, white) !important;
    box-shadow:
        0 22px 48px -32px rgba(29, 53, 72, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.wsti-page #matrix > section:not(:first-child) .light-card:hover,
.wsti-page #matrix > section:not(:first-child) .glass-card:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: color-mix(in srgb, var(--layer-accent) 34%, white) !important;
    box-shadow: 0 24px 54px -34px rgba(29, 53, 72, 0.42) !important;
}

.wsti-page #matrix .glass-card .card-title,
.wsti-page #matrix .light-card .card-title {
    color: #17283a !important;
}

.wsti-page #matrix .glass-card .card-desc,
.wsti-page #matrix .light-card .card-desc {
    color: #5f7283 !important;
    opacity: 1;
}

.wsti-page #matrix .glass-card .number-mark,
.wsti-page #matrix .light-card .number-mark {
    color: color-mix(in srgb, var(--layer-accent) 13%, transparent) !important;
}

.wsti-page #matrix .section-dark .layer-rail::after,
.wsti-page #matrix .section-light .layer-rail::after {
    top: 22px;
    right: 28px;
    font-size: 6rem;
    color: color-mix(in srgb, var(--layer-accent) 9%, transparent) !important;
}

/* Restrained scroll reveal: hierarchy without moving the photography. */
@keyframes wsti-layer-reveal {
    from {
        opacity: 0.46;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@supports (animation-timeline: view()) {
    .wsti-page #matrix > section:not(:first-child) .dim-header,
    .wsti-page #matrix > section:not(:first-child) .light-card,
    .wsti-page #matrix > section:not(:first-child) .glass-card {
        animation-name: wsti-layer-reveal;
        animation-duration: 1ms;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: view();
        animation-range: entry 4% cover 30%;
    }

    .wsti-page #matrix > section:not(:first-child) .grid-2 > :nth-child(2),
    .wsti-page #matrix > section:not(:first-child) .grid-3 > :nth-child(2) {
        animation-range: entry 9% cover 34%;
    }

    .wsti-page #matrix > section:not(:first-child) .grid-3 > :nth-child(3) {
        animation-range: entry 14% cover 38%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wsti-page #matrix > section:not(:first-child) .dim-header,
    .wsti-page #matrix > section:not(:first-child) .light-card,
    .wsti-page #matrix > section:not(:first-child) .glass-card {
        animation: none !important;
        transition: none !important;
    }
}

/* Second and final content-led photo background: industry ecology. */
.wsti-page #ecology {
    background:
        linear-gradient(180deg, rgba(239, 246, 245, 0.86), rgba(248, 250, 249, 0.91)),
        url('../assets/images/wsti-module-ecology-20260721.webp') center 46% / cover no-repeat !important;
}

/* Calm closing background without photography. */
.wsti-page .wsti-certification-section {
    background:
        radial-gradient(760px 430px at 10% 18%, rgba(180, 148, 96, 0.13), transparent 70%),
        radial-gradient(720px 420px at 92% 86%, rgba(81, 126, 121, 0.10), transparent 72%),
        linear-gradient(180deg, #f2eee7 0%, #faf8f4 52%, #efebe4 100%) !important;
    overflow: hidden;
}

.wsti-page .wsti-certification-section::after {
    content: '';
    position: absolute;
    top: 110px;
    right: -150px;
    z-index: 0;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(180, 148, 96, 0.14);
    border-radius: 50%;
    box-shadow:
        0 0 0 46px rgba(180, 148, 96, 0.035),
        0 0 0 92px rgba(81, 126, 121, 0.025);
    pointer-events: none;
}

.wsti-page .wsti-certification-section > div:first-child {
    opacity: 0.42;
}

.wsti-page .wsti-certification-section .section-header {
    position: relative;
    z-index: 2;
}

.wsti-page .wsti-certification-section .cert-tabs {
    max-width: 660px;
    margin-right: auto !important;
    margin-bottom: 48px !important;
    margin-left: auto !important;
    padding: 7px !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(29, 57, 82, 0.11) !important;
    border-radius: 16px;
    box-shadow:
        0 16px 38px -28px rgba(22, 45, 66, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.wsti-page .wsti-certification-section .cert-tabs button {
    flex: 1 1 0;
    padding: 14px 24px !important;
    color: #536679 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 11px !important;
    font-size: 1.02rem !important;
    font-weight: 600 !important;
}

.wsti-page .wsti-certification-section .cert-tabs button.active-tab {
    color: #173047 !important;
    background: linear-gradient(135deg, #ffffff 0%, #edf4f5 100%) !important;
    box-shadow:
        0 7px 18px rgba(31, 61, 83, 0.10),
        inset 0 0 0 1px rgba(81, 126, 121, 0.14);
}

.wsti-page .wsti-certification-section .cert-card {
    --cert-accent: #376fa9;
    min-height: 300px;
    padding: 38px 32px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(29, 57, 82, 0.10) !important;
    border-radius: 20px !important;
    box-shadow:
        0 22px 48px -34px rgba(22, 45, 66, 0.38),
        0 4px 14px rgba(22, 45, 66, 0.045) !important;
}

.wsti-page .wsti-certification-section .cert-card:nth-child(2) {
    --cert-accent: #4b8e88;
}

.wsti-page .wsti-certification-section .cert-card:nth-child(3) {
    --cert-accent: #b48745;
}

.wsti-page .wsti-certification-section .cert-card::before {
    height: 4px;
    background: linear-gradient(90deg, var(--cert-accent), color-mix(in srgb, var(--cert-accent) 44%, white), transparent 92%);
    opacity: 1;
}

.wsti-page .wsti-certification-section .cert-card::after {
    content: '01';
    position: absolute;
    top: 28px;
    right: 28px;
    color: color-mix(in srgb, var(--cert-accent) 78%, #173047);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    opacity: 0.5;
}

.wsti-page .wsti-certification-section .cert-card:nth-child(2)::after {
    content: '02';
}

.wsti-page .wsti-certification-section .cert-card:nth-child(3)::after {
    content: '03';
}

.wsti-page .wsti-certification-section .cert-card > div:first-child {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 38px;
    margin-bottom: 20px !important;
    padding: 0 14px;
    color: var(--cert-accent) !important;
    background: color-mix(in srgb, var(--cert-accent) 9%, white) !important;
    border: 1px solid color-mix(in srgb, var(--cert-accent) 20%, white);
    border-radius: 999px;
    font-family: 'Noto Sans SC', sans-serif !important;
    font-size: 1.02rem !important;
    line-height: 1 !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
}

.wsti-page .wsti-certification-section .cert-card > div:nth-child(2) {
    margin-bottom: 16px !important;
    color: #173047 !important;
    font-size: 1.18rem !important;
    line-height: 1.5;
}

.wsti-page .wsti-certification-section .cert-card p {
    color: #617486 !important;
    line-height: 1.82 !important;
}

.wsti-page .wsti-certification-section > .container > h3 {
    position: relative;
    margin-top: 8px !important;
    padding-top: 54px;
    border-top: 1px solid rgba(29, 57, 82, 0.10);
}

.wsti-page .wsti-certification-section > .container > h3::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #b48745;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(180, 135, 69, 0.10);
    transform: translateX(-50%);
}

@media (max-width: 767px) {
    body.wsti-page:has(.wsti-tag-label) .hero-bg-overlay {
        background-position: center, center, 58% center !important;
    }

    .wsti-page .wsti-philosophy-section {
        background-position: center, 58% center !important;
    }

    .wsti-page .wsti-composition-section::before {
        top: 170px;
        right: -300px;
    }

    .wsti-page .wsti-composition-section .section-header {
        margin-bottom: 38px;
    }

    .wsti-page .wsti-composition-section .wsc-formula {
        margin-bottom: 42px;
        padding: 34px 20px 36px;
        border-radius: 18px;
    }

    .wsti-page .wsti-composition-section .formula-eyebrow {
        min-height: 28px;
        padding: 0 12px;
        font-size: 0.67rem;
        letter-spacing: 0.11em;
    }

    .wsti-page .wsti-composition-section .formula-body {
        gap: 9px;
        font-size: 1rem;
    }

    .wsti-page .wsti-composition-section .formula-body .gold {
        flex: 1 1 210px;
        min-height: 46px;
        padding: 0 14px;
        border-radius: 12px;
    }

    .wsti-page .wsti-composition-section .formula-body .op {
        width: 26px;
        height: 26px;
        font-size: 0.9rem;
    }

    .wsti-page .wsti-composition-section .wsc-formula + .grid-3 {
        gap: 16px;
        margin-bottom: 46px !important;
    }

    .wsti-page .wsti-composition-section .element-card {
        min-height: 0;
        padding: 25px 64px 24px 26px;
    }

    .wsti-page .wsti-composition-section .element-card::after {
        top: 24px;
        right: 20px;
        width: 38px;
        height: 38px;
    }

    .wsti-page .wsti-composition-section .wsc-subhead {
        margin-bottom: 26px;
        padding: 20px 18px;
    }

    .wsti-page .wsti-composition-section .wsc-subhead + .grid-3 {
        gap: 18px;
    }

    .wsti-page .wsti-composition-section .wsc-subhead + .grid-3 .light-card {
        min-height: 0;
        padding: 26px 24px;
    }

    .wsti-page #matrix > section:first-child,
    .wsti-page #ecology {
        background-position: center, 56% center !important;
    }

    .wsti-page #matrix > section:nth-child(2) {
        background-position: center, 50% center !important;
    }

    .wsti-page #matrix > section:nth-child(3) {
        background-position: center, 44% center !important;
    }

    .wsti-page #matrix > section:nth-child(4) {
        background-position: center, 47% center !important;
    }

    .wsti-page #matrix > section:nth-child(5) {
        background-position: center, 58% center !important;
    }

    .wsti-page #matrix > section:first-child {
        padding-bottom: 28px !important;
    }

    .wsti-page #matrix > section:not(:first-child) .dim-header {
        margin-bottom: 30px;
        padding: 26px 22px 26px 30px;
        border-radius: 0 15px 15px 0;
    }

    .wsti-page #matrix > section:not(:first-child) .layer-rail::before {
        display: block !important;
        top: 18px;
        bottom: 18px;
        left: 0;
    }

    .wsti-page #matrix > section:not(:first-child) .layer-rail::after {
        position: absolute;
        top: 18px;
        right: 18px;
        display: block;
        margin: 0;
        font-size: 3.6rem;
        opacity: 0.78;
    }

    .wsti-page .wsti-certification-section::after {
        top: 150px;
        right: -230px;
    }

    .wsti-page .wsti-certification-section .cert-tabs {
        gap: 7px !important;
        padding: 7px !important;
        border-radius: 14px !important;
    }

    .wsti-page .wsti-certification-section .cert-tabs button {
        padding: 13px 16px !important;
    }

    .wsti-page .wsti-certification-section .cert-card {
        min-height: 0;
        padding: 30px 24px !important;
    }

    .wsti-page .wsti-certification-section .cert-card::after {
        top: 24px;
        right: 24px;
    }
}