@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap");

/* =========================================================
   ODS ALIGNERS
   New Website Design System
========================================================= */

:root {
    --ods-navy: #1C2F4A;
    --ods-cyan: #00CFE8;
    --ods-white: #FFFFFF;

    --ods-text: #1C2F4A;
    --ods-muted: #66768A;
    --ods-light: #F5F9FC;
    --ods-border: #E3EBF1;

    --container: 1240px;
    --header-height: 82px;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --transition: 0.25s ease;
}

/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Roboto", Arial, sans-serif;
    color: var(--ods-text);
    background: var(--ods-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

button {
    font: inherit;
}

.container {
    width: min(92%, var(--container));
    margin-inline: auto;
}

/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: relative;
    z-index: 1000;
    background: var(--ods-white);
}

/* Top bar */

.top-bar {
    background: var(--ods-navy);
    color: rgba(255,255,255,.78);
    font-size: 12px;
}

.top-bar-inner {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-message {
    letter-spacing: .04em;
}

.top-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-links a {
    transition: var(--transition);
}

.top-links a:hover {
    color: var(--ods-cyan);
}

.top-divider {
    width: 1px;
    height: 13px;
    background: rgba(255,255,255,.25);
}

/* Main header */

.main-header {
    position: relative;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid var(--ods-border);
}

.header-inner {
    height: var(--header-height);
    display: flex;
    align-items: center;
}

/* Logo */

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.logo-symbol {
    width: 43px;
    height: 43px;
    border: 5px solid var(--ods-navy);
    border-radius: 50%;
    position: relative;
}

.logo-symbol::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--ods-cyan);
    border-radius: 50%;
    right: -5px;
    bottom: 3px;
}

.logo-text {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: var(--ods-navy);
    font-size: 23px;
    letter-spacing: -.04em;
}

.logo-text strong {
    font-weight: 700;
}

.logo-text span {
    font-weight: 400;
}

/* Desktop navigation */

.desktop-nav {
    margin-left: auto;
}

.nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-list > li {
    position: relative;
}

.nav-list > li > a,
.nav-dropdown-button {
    height: 82px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 7px;

    border: 0;
    background: transparent;
    cursor: pointer;

    color: var(--ods-navy);
    font-size: 13px;
    font-weight: 600;

    transition: var(--transition);
}

.nav-list > li > a:hover,
.nav-dropdown-button:hover,
.nav-list > li > a.active {
    color: #008FA5;
}

.nav-list > li > a.active::after {
    content: "";
    position: absolute;
    height: 2px;
    background: var(--ods-cyan);
    left: 13px;
    right: 13px;
    bottom: 0;
}

/* Chevron */

.chevron {
    width: 6px;
    height: 6px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg);
    margin-top: -4px;
}

/* =========================================================
   DROPDOWNS
========================================================= */

.dropdown-menu {
    position: absolute;

    top: calc(100% - 1px);
    left: 50%;

    opacity: 0;
    visibility: hidden;

    transform: translate(-50%, 12px);

    background: var(--ods-white);
    border: 1px solid var(--ods-border);
    border-radius: 0 0 18px 18px;

    box-shadow: 0 25px 55px rgba(28,47,74,.14);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s;

    pointer-events: none;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

/* Science menu */

.science-menu {
    width: 760px;
    display: grid;
    grid-template-columns: 260px 1fr;
    overflow: hidden;
}

.dropdown-intro {
    padding: 32px;
    color: var(--ods-white);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(0,207,232,.22),
            transparent 38%
        ),
        var(--ods-navy);
}

.dropdown-eyebrow {
    display: block;
    margin-bottom: 12px;

    color: var(--ods-cyan);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dropdown-intro h3 {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 12px;
}

.dropdown-intro p {
    color: rgba(255,255,255,.7);
    font-size: 12px;
    line-height: 1.7;
}

.dropdown-links {
    padding: 15px;
}

.dropdown-links > a {
    display: flex;
    gap: 15px;

    padding: 15px;

    border-radius: 10px;

    transition: var(--transition);
}

.dropdown-links > a:hover {
    background: var(--ods-light);
}

.dropdown-number {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: rgba(0,207,232,.12);
    color: #008FA5;

    font-size: 10px;
    font-weight: 700;
}

.dropdown-links strong,
.product-column strong {
    display: block;
    color: var(--ods-navy);
    font-size: 13px;
    margin-bottom: 3px;
}

.dropdown-links small,
.product-column small {
    display: block;
    color: var(--ods-muted);
    font-size: 11px;
    line-height: 1.5;
}

/* Product menu */

.product-menu {
    width: 590px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 25px;
    gap: 25px;
}

.product-column + .product-column {
    border-left: 1px solid var(--ods-border);
    padding-left: 25px;
}

.product-column > a {
    display: block;
    padding: 12px;
    margin-left: -12px;
    margin-right: -12px;

    border-radius: 10px;

    transition: var(--transition);
}

.product-column > a:hover {
    background: var(--ods-light);
}

/* =========================================================
   HEADER CTA
========================================================= */

.header-actions {
    margin-left: 18px;

    display: flex;
    align-items: center;
    gap: 12px;
}

.header-cta {
    min-height: 43px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    border-radius: 7px;

    background: var(--ods-cyan);
    color: var(--ods-navy);

    font-size: 12px;
    font-weight: 700;

    transition: var(--transition);
}

.header-cta span {
    font-size: 17px;
    transition: transform var(--transition);
}

.header-cta:hover {
    background: var(--ods-navy);
    color: var(--ods-white);
}

.header-cta:hover span {
    transform: translateX(3px);
}

/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu-button {
    display: none;

    width: 44px;
    height: 44px;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.mobile-menu-button span {
    display: block;

    width: 24px;
    height: 2px;

    margin: 5px auto;

    background: var(--ods-navy);

    transition: var(--transition);
}

.mobile-navigation {
    display: none;

    position: absolute;
    left: 0;
    right: 0;

    background: var(--ods-white);

    border-bottom: 1px solid var(--ods-border);

    box-shadow: 0 18px 30px rgba(28,47,74,.08);
}

.mobile-navigation nav {
    width: min(92%, var(--container));
    margin-inline: auto;

    padding: 15px 0 25px;
}

.mobile-navigation nav > a,
.mobile-dropdown-toggle {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 5px;

    border: 0;
    border-bottom: 1px solid var(--ods-border);

    background: transparent;

    color: var(--ods-navy);

    text-align: left;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.mobile-submenu {
    display: none;

    padding: 8px 0 8px 18px;

    background: var(--ods-light);
}

.mobile-submenu.open {
    display: block;
}

.mobile-submenu a {
    display: block;

    padding: 10px 8px;

    color: var(--ods-muted);

    font-size: 12px;
}

.mobile-navigation.open {
    display: block;
}

.mobile-portal {
    color: #008FA5 !important;
}

/* =========================================================
   TEMPORARY TEST AREA
========================================================= */

.test-area {
    min-height: 600px;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(0,207,232,.13),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #F7FBFD 0%,
            #FFFFFF 60%
        );
}

.test-area h1 {
    margin: 10px 0;

    color: var(--ods-navy);

    font-size: clamp(42px, 6vw, 78px);
    line-height: 1;
    letter-spacing: -.055em;
}

.test-area p {
    max-width: 600px;

    color: var(--ods-muted);

    font-size: 18px;
}

.section-label {
    color: #008FA5;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .15em;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1180px) {

    .desktop-nav {
        display: none;
    }

    .header-actions {
        margin-left: auto;
    }

    .mobile-menu-button {
        display: block;
    }
}

@media (max-width: 700px) {

    :root {
        --header-height: 70px;
    }

    .top-message {
        display: none;
    }

    .top-bar-inner {
        justify-content: flex-end;
    }

    .logo-symbol {
        width: 36px;
        height: 36px;
        border-width: 4px;
    }

    .logo-text {
        font-size: 19px;
    }

    .header-cta {
        display: none;
    }

    .test-area {
        min-height: 520px;
    }

    .test-area h1 {
        font-size: 45px;
    }

    .test-area p {
        font-size: 16px;
    }
}
/* =========================================================
   HOMEPAGE HERO
========================================================= */

.hero-section {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    background: #f7fbfd;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.94) 30%,
        rgba(255,255,255,.55) 48%,
        rgba(255,255,255,0) 67%
    );

    pointer-events: none;
}

.hero-container {
    position: relative;
    z-index: 2;

    min-height: 650px;

    display: flex;
    align-items: center;
}

.hero-content {
    width: 48%;
    max-width: 610px;

    padding: 70px 0;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: #008fa5;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .17em;
}

.hero-eyebrow::before {
    content: "";

    width: 28px;
    height: 2px;

    background: var(--ods-cyan);
}

.hero-content h1 {
    margin: 0 0 18px;

    color: var(--ods-navy);

    font-size: clamp(48px, 5vw, 72px);
    line-height: .98;

    letter-spacing: -.055em;
    font-weight: 700;
}

.hero-content h1 span {
    display: block;
    color: #008fa5;
}

.hero-content h1 sup {
    position: relative;
    top: -.6em;

    font-size: 20px;
}

.hero-content h2 {
    margin: 0 0 20px;

    color: var(--ods-navy);

    font-size: 22px;
    line-height: 1.45;

    font-weight: 500;
}

.hero-description {
    max-width: 540px;

    margin: 0 0 30px;

    color: var(--ods-muted);

    font-size: 15px;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 22px;
}

.btn-primary,
.btn-secondary {
    min-height: 50px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    font-size: 13px;
    font-weight: 700;

    transition: var(--transition);
}

.btn-primary {
    gap: 12px;

    background: var(--ods-cyan);
    color: var(--ods-navy);

    border: 1px solid var(--ods-cyan);
}

.btn-primary span {
    font-size: 18px;

    transition: transform var(--transition);
}

.btn-primary:hover {
    background: var(--ods-navy);
    border-color: var(--ods-navy);

    color: var(--ods-white);
}

.btn-primary:hover span {
    transform: translateX(4px);
}

.btn-secondary {
    background: rgba(255,255,255,.7);

    border: 1px solid rgba(28,47,74,.25);

    color: var(--ods-navy);

    backdrop-filter: blur(8px);
}

.btn-secondary:hover {
    border-color: var(--ods-navy);
    background: var(--ods-white);
}

.hero-note {
    max-width: 470px;

    color: #8290a0;

    font-size: 10px;
    line-height: 1.6;
}

/* Hero responsive */

@media (max-width: 900px) {

    .hero-section,
    .hero-container {
        min-height: 600px;
    }

    .hero-content {
        width: 58%;
    }

    .hero-content h1 {
        font-size: 52px;
    }

}

@media (max-width: 700px) {

    .hero-section {
        min-height: auto;

        padding-bottom: 300px;

        background: #ffffff;
    }

    .hero-container {
        min-height: auto;
    }

    .hero-background {
        top: auto;
        height: 320px;
    }

    .hero-background img {
        object-position: 72% center;
    }

    .hero-section::after {
        background: linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 54%,
            rgba(255,255,255,.65) 70%,
            rgba(255,255,255,0) 100%
        );
    }

    .hero-content {
        width: 100%;
        max-width: 540px;

        padding: 55px 0 35px;
    }

    .hero-content h1 {
        font-size: 47px;
    }

    .hero-content h2 {
        font-size: 19px;
    }

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

}

@media (max-width: 480px) {

    .hero-content h1 {
        font-size: 41px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }

}
/* =========================================================
   ORTHODONTIC NEEDS
========================================================= */

.needs-section {
    padding: 110px 0;
    background: var(--ods-white);
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 58px;
    text-align: center;
}

.section-eyebrow {
    display: inline-block;

    margin-bottom: 15px;

    color: #008fa5;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .16em;
}

.section-heading h2 {
    margin: 0 0 18px;

    color: var(--ods-navy);

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.12;

    letter-spacing: -.045em;
}

.section-heading h2 span {
    display: block;
    color: #008fa5;
}

.section-heading p {
    max-width: 650px;
    margin: auto;

    color: var(--ods-muted);

    font-size: 15px;
    line-height: 1.8;
}

/* Grid */

.needs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}

/* Cards */

.need-card {
    position: relative;
    overflow: hidden;

    min-height: 340px;

    padding: 28px;

    border: 1px solid var(--ods-border);
    border-radius: 18px;

    background: #ffffff;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.need-card:hover {
    transform: translateY(-7px);

    border-color: rgba(0,207,232,.45);

    box-shadow:
        0 22px 45px rgba(28,47,74,.09);
}

/* Number */

.need-number {
    position: absolute;

    top: 24px;
    right: 25px;

    color: #a8b5c2;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .08em;
}

/* Temporary graphic */

.need-icon {
    width: 74px;
    height: 74px;

    margin: 30px 0 35px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(0,207,232,.14),
            rgba(28,47,74,.04)
        );
}

.need-icon span {
    width: 14px;
    height: 29px;

    display: block;

    border: 2px solid var(--ods-cyan);
    border-radius: 9px 9px 6px 6px;

    background: rgba(255,255,255,.8);

    transform: rotate(-5deg);
}

.need-icon span:nth-child(2) {
    height: 35px;
    transform: translateY(-3px);
}

.need-icon span:nth-child(3) {
    transform: rotate(5deg);
}

/* Spacing variation */

.spacing-icon {
    gap: 10px;
}

/* Bite variation */

.bite-icon span:first-child {
    transform: translateY(-7px);
}

.bite-icon span:nth-child(2) {
    transform: translateY(3px);
}

.bite-icon span:nth-child(3) {
    transform: translateY(-7px);
}

/* Complex variation */

.complex-icon span:first-child {
    transform: rotate(-18deg);
}

.complex-icon span:nth-child(2) {
    transform: rotate(8deg) translateY(-4px);
}

.complex-icon span:nth-child(3) {
    transform: rotate(16deg);
}

/* Card typography */

.need-card h3 {
    margin: 0 0 10px;

    color: var(--ods-navy);

    font-size: 19px;
    letter-spacing: -.02em;
}

.need-card p {
    min-height: 72px;

    margin: 0 0 22px;

    color: var(--ods-muted);

    font-size: 13px;
    line-height: 1.7;
}

.need-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #008fa5;

    font-size: 12px;
    font-weight: 700;
}

.need-card a span {
    transition: transform .25s ease;
}

.need-card a:hover span {
    transform: translateX(4px);
}

/* Featured card */

.featured-need {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(0,207,232,.15),
            transparent 35%
        ),
        var(--ods-navy);

    border-color: var(--ods-navy);
}

.featured-need .need-number {
    color: rgba(255,255,255,.4);
}

.featured-need h3 {
    color: var(--ods-white);
}

.featured-need p {
    color: rgba(255,255,255,.68);
}

.featured-need .need-icon {
    background: rgba(255,255,255,.08);
}

.featured-need a {
    color: var(--ods-cyan);
}

/* Bottom CTA */

.needs-bottom {
    margin-top: 42px;

    display: flex;
    justify-content: center;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding-bottom: 5px;

    border-bottom: 1px solid rgba(28,47,74,.25);

    color: var(--ods-navy);

    font-size: 13px;
    font-weight: 700;

    transition: var(--transition);
}

.text-link span {
    color: #008fa5;

    font-size: 17px;

    transition: transform var(--transition);
}

.text-link:hover {
    border-color: var(--ods-cyan);
}

.text-link:hover span {
    transform: translateX(4px);
}

/* Responsive */

@media (max-width: 1000px) {

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

}

@media (max-width: 600px) {

    .needs-section {
        padding: 75px 0;
    }

    .section-heading {
        margin-bottom: 38px;
        text-align: left;
    }

    .section-heading h2 span {
        display: inline;
    }

    .needs-grid {
        grid-template-columns: 1fr;
    }

    .need-card {
        min-height: auto;
    }

    .need-card p {
        min-height: auto;
    }

    .needs-bottom {
        justify-content: flex-start;
    }

}
/* =========================================================
   ODS JOURNEY
========================================================= */

.journey-section {
    position: relative;
    overflow: hidden;

    padding: 110px 0 95px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(0,207,232,.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(0,207,232,.07),
            transparent 25%
        ),
        var(--ods-navy);

    color: var(--ods-white);
}

/* subtle background detail */

.journey-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    top: -260px;

    border: 1px solid rgba(0,207,232,.13);
    border-radius: 50%;
}

.journey-section::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -175px;
    top: -185px;

    border: 1px solid rgba(0,207,232,.1);
    border-radius: 50%;
}

/* Heading */

.journey-heading {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 45px;
}

.journey-eyebrow {
    display: block;

    margin-bottom: 15px;

    color: var(--ods-cyan);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .17em;
}

.journey-heading h2 {
    margin: 0;

    max-width: 660px;

    color: var(--ods-white);

    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.1;

    letter-spacing: -.045em;
}

.journey-heading h2 span {
    display: block;

    color: var(--ods-cyan);
}

.journey-heading > p {
    max-width: 450px;

    margin: 0 0 6px;

    color: rgba(255,255,255,.65);

    font-size: 14px;
    line-height: 1.8;
}

/* Journey wrapper */

.journey-wrapper {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 24px;
}

/* Connecting line */

.journey-line {
    display: none;
}

/* Individual steps */

.journey-step {
    position: relative;

    padding-top: 65px;
}

/* Number marker */

.journey-marker {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: 0 auto 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(84, 199, 223, 0.65);
    border-radius: 50%;
    background: #0b132b;
    box-shadow: 0 0 0 6px rgba(84, 199, 223, 0.08);
}

.journey-marker span {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #54c7df;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

/* Icons */

.journey-icon {
    width: 64px;
    height: 64px;

    margin-bottom: 26px;

    position: relative;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;

    background: rgba(255,255,255,.055);
}

/* Consult icon */

.person-head {
    position: absolute;

    width: 15px;
    height: 15px;

    top: 13px;

    border: 2px solid var(--ods-cyan);
    border-radius: 50%;
}

.person-body {
    position: absolute;

    width: 28px;
    height: 19px;

    bottom: 11px;

    border: 2px solid var(--ods-cyan);
    border-bottom: 0;

    border-radius: 15px 15px 0 0;
}

/* Scan */

.scan-icon span {
    width: 31px;
    height: 22px;

    border: 2px solid var(--ods-cyan);

    border-radius: 50% 50% 42% 42%;
}

.scan-icon::before,
.scan-icon::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    border-color: rgba(255,255,255,.55);
}

.scan-icon::before {
    left: 10px;
    top: 10px;

    border-left: 1px solid;
    border-top: 1px solid;
}

.scan-icon::after {
    right: 10px;
    bottom: 10px;

    border-right: 1px solid;
    border-bottom: 1px solid;
}

/* Setup */

.setup-icon span {
    width: 34px;
    height: 25px;

    border: 2px solid var(--ods-cyan);
    border-radius: 3px;
}

.setup-icon span::after {
    content: "";

    position: absolute;

    width: 16px;
    height: 2px;

    background: var(--ods-cyan);

    left: 24px;
    top: 31px;
}

/* Aligner */

.aligner-icon span {
    width: 37px;
    height: 24px;

    border: 2px solid var(--ods-cyan);

    border-radius:
        50% 50% 42% 42% /
        65% 65% 35% 35%;

    box-shadow:
        inset 0 0 0 4px rgba(0,207,232,.07);
}

/* Smile */

.smile-icon span {
    width: 34px;
    height: 19px;

    border-bottom: 2px solid var(--ods-cyan);

    border-radius: 0 0 30px 30px;
}

.smile-icon span::before,
.smile-icon span::after {
    content: "";

    position: absolute;

    top: 20px;

    width: 3px;
    height: 3px;

    background: var(--ods-cyan);

    border-radius: 50%;
}

.smile-icon span::before {
    left: 20px;
}

.smile-icon span::after {
    right: 20px;
}

/* Typography */

.journey-step h3 {
    margin: 0 0 10px;

    color: var(--ods-white);

    font-size: 19px;
}

.journey-step p {
    margin: 0;

    max-width: 205px;

    color: rgba(255,255,255,.57);

    font-size: 12px;
    line-height: 1.75;
}

/* Footer */

.journey-footer {
    position: relative;
    z-index: 2;

    margin-top: 65px;
    padding-top: 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border-top: 1px solid rgba(255,255,255,.1);
}

.journey-note {
    display: flex;
    align-items: center;
    gap: 10px;

    color: rgba(255,255,255,.45);

    font-size: 10px;
}

.journey-note > span {
    width: 5px;
    height: 5px;

    flex-shrink: 0;

    background: var(--ods-cyan);

    border-radius: 50%;
}

.journey-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--ods-white);

    font-size: 12px;
    font-weight: 700;
}

.journey-link > span {
    color: var(--ods-cyan);

    font-size: 17px;

    transition: transform .25s ease;
}

.journey-link:hover > span {
    transform: translateX(4px);
}

/* Responsive */

@media (max-width: 950px) {

    .journey-heading {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .journey-wrapper {
        grid-template-columns: repeat(3, 1fr);

        row-gap: 55px;
    }

    .journey-line {
        display: none;
    }

}

@media (max-width: 650px) {

    .journey-section {
        padding: 75px 0;
    }

    .journey-heading {
        margin-bottom: 45px;
    }

    .journey-heading h2 span {
        display: inline;
    }

    .journey-wrapper {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .journey-step {
        min-height: 185px;

        padding:
            0 0 40px 75px;

        border-left:
            1px solid rgba(0,207,232,.3);
    }

    .journey-step:last-child {
        border-left-color: transparent;
    }

    .journey-marker {
        margin: 0 0 18px;
    }

    .journey-icon {
        margin-bottom: 16px;
    }

    .journey-step p {
        max-width: 100%;
    }

    .journey-footer {
        margin-top: 20px;

        align-items: flex-start;
        flex-direction: column;
    }

}
/* =========================================================
   ODS JOURNEY - FINAL IMAGE STYLE
========================================================= */

.journey-image {
    position: relative;
    width: 100%;
    max-width: 205px;
    aspect-ratio: 4 / 3;

    margin: 0 0 24px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;

    background: rgba(255, 255, 255, .05);

    box-shadow:
        0 14px 30px rgba(0, 0, 0, .14);
}

.journey-image::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(28, 47, 74, .16) 100%
        );
}

.journey-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .45s ease,
        filter .45s ease;
}

.journey-step:hover .journey-image img {
    transform: scale(1.04);
}

/* Mobile */

@media (max-width: 650px) {

    .journey-image {
        max-width: 280px;
        margin-bottom: 18px;
    }

}
/* =========================================================
   WHY CHOOSE ODS
========================================================= */

.why-ods-section {
    padding: 115px 0;
    background: #f7fafc;
}

.why-ods-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 90px;
    align-items: center;
}

.why-ods-content h2 {
    max-width: 580px;
    margin: 0 0 50px;

    color: var(--ods-navy);

    font-size: clamp(38px, 4vw, 55px);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.why-ods-content h2 span {
    display: block;
    color: #008fa5;
}

/* Benefits */

.why-benefits {
    border-top: 1px solid var(--ods-border);
}

.why-benefit {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;

    padding: 22px 0;

    border-bottom: 1px solid var(--ods-border);
}

.why-number {
    padding-top: 4px;

    color: #00a9c0;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.why-benefit h3 {
    margin: 0 0 6px;

    color: var(--ods-navy);

    font-size: 18px;
}

.why-benefit p {
    max-width: 520px;
    margin: 0;

    color: var(--ods-muted);

    font-size: 13px;
    line-height: 1.7;
}

/* Link */

.why-ods-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 30px;

    padding-bottom: 5px;

    border-bottom: 1px solid rgba(28,47,74,.25);

    color: var(--ods-navy);

    font-size: 12px;
    font-weight: 700;
}

.why-ods-link span {
    color: #00a9c0;
    font-size: 17px;

    transition: transform .25s ease;
}

.why-ods-link:hover span {
    transform: translateX(4px);
}

/* Visual */

.why-ods-visual {
    position: relative;

    min-height: 650px;

    overflow: hidden;

    border-radius: 24px;

    background: var(--ods-navy);

    box-shadow: 0 30px 70px rgba(28,47,74,.15);
}

.why-ods-visual img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.why-ods-visual::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(16,35,59,.8) 100%
        );
}

/* Image caption */

.why-visual-label {
    position: absolute;

    z-index: 2;

    left: 38px;
    right: 38px;
    bottom: 36px;

    color: white;
}

.why-visual-label span {
    display: block;

    margin-bottom: 8px;

    color: var(--ods-cyan);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
}

.why-visual-label strong {
    display: block;

    font-size: 22px;
    line-height: 1.35;
}

/* Responsive */

@media (max-width: 950px) {

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

    .why-ods-visual {
        min-height: 520px;
    }

}

@media (max-width: 600px) {

    .why-ods-section {
        padding: 75px 0;
    }

    .why-ods-content h2 span {
        display: inline;
    }

    .why-ods-visual {
        min-height: 430px;
        border-radius: 18px;
    }

    .why-visual-label {
        left: 25px;
        right: 25px;
        bottom: 25px;
    }

    .why-visual-label strong {
        font-size: 18px;
    }

}
/* =========================================================
   TREATMENT COST
========================================================= */

.treatment-cost-section {
    padding: 110px 0;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbfd 100%
        );
}

.treatment-cost-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 80px;
    align-items: start;
}

/* LEFT */

.cost-intro h2 {
    max-width: 620px;
    margin: 0 0 28px;

    color: var(--ods-navy);

    font-size: clamp(40px, 3.6vw, 56px);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.cost-intro h2 span {
    display: block;
    color: #2997ad;
}

.cost-lead {
    max-width: 500px;
    margin: 0;

    color: var(--ods-muted);

    font-size: 16px;
    line-height: 1.75;
}

/* CTA */

.cost-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 34px;
    padding-bottom: 6px;

    border-bottom: 1px solid rgba(28,47,74,.25);

    color: var(--ods-navy);

    font-size: 13px;
    font-weight: 700;
}

.cost-link span {
    color: #00a9c0;
    font-size: 18px;

    transition: transform .25s ease;
}

.cost-link:hover span {
    transform: translateX(4px);
}

/* RIGHT */

.cost-details {
    padding: 38px 42px;

    border: 1px solid #dce7ed;
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 20px 55px rgba(28,47,74,.07);
}

.cost-small-title {
    display: block;

    margin-bottom: 18px;

    color: #2997ad;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
}

.cost-factor {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;

    min-height: 62px;

    border-bottom: 1px solid #e5edf1;
}

.cost-factor span {
    color: #00a9c0;

    font-size: 11px;
    font-weight: 700;
}

.cost-factor p {
    margin: 0;

    color: var(--ods-navy);

    font-size: 15px;
    font-weight: 600;
}

.cost-provider-text {
    margin: 28px 0 0;

    color: var(--ods-muted);

    font-size: 13px;
    line-height: 1.7;
}

/* DISCLAIMER */

.cost-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-top: 55px;
    padding-top: 24px;

    border-top: 1px solid #dce7ed;
}

.cost-info {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 20px;
    width: 20px;
    height: 20px;

    margin-top: 1px;

    border: 1px solid #00a9c0;
    border-radius: 50%;

    color: #00a9c0;

    font-size: 10px;
    font-weight: 700;
}

.cost-disclaimer p {
    max-width: 900px;
    margin: 0;

    color: #7a899b;

    font-size: 11px;
    line-height: 1.65;
}

/* RESPONSIVE */

@media (max-width: 950px) {

    .treatment-cost-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

}

@media (max-width: 600px) {

    .treatment-cost-section {
        padding: 75px 0;
    }

    .cost-intro h2 span {
        display: inline;
    }

    .cost-details {
        padding: 28px 24px;
        border-radius: 18px;
    }

    .cost-factor {
        grid-template-columns: 38px 1fr;
    }

    .cost-factor p {
        font-size: 14px;
    }

}
.hero-description {
    max-width: 570px;
    margin-top: 24px;
}

.hero-description p {
    margin: 0 0 14px;
    color: #667892;
    font-size: 16px;
    line-height: 1.7;
}

.hero-actions {
    margin-top: 26px;
}

.hero-disclaimer {
    max-width: 650px;
    margin-top: 20px;
    color: #7d8da3;
    font-size: 11px;
    line-height: 1.6;
}
/* ========================================
   FOR EVERY KIND OF SMILE - FINAL
======================================== */

.smile-solutions {
    padding: 105px 0 100px;
    background: #ffffff;
}

.smile-solutions .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 30px;
}

.smile-heading {
    max-width: 820px;
    margin: 0 auto 58px;
    text-align: center;
}

.smile-heading .section-label {
    display: block;
    margin-bottom: 18px;
    color: #2897b1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.smile-heading h2 {
    margin: 0;
    color: #1C2F4A;
    font-size: 50px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -1.8px;
}

.smile-heading h2 span {
    color: #3e9bb1;
}

.smile-heading > p {
    max-width: 680px;
    margin: 24px auto 0;
    color: #657791;
    font-size: 16px;
    line-height: 1.7;
}

/* Cards */

.smile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.smile-card {
    position: relative;
    min-height: 330px;
    padding: 30px 28px;
    border: 1px solid #dbe5ec;
    border-radius: 18px;
    background: #ffffff;
    transition: transform .25s ease, box-shadow .25s ease;
}

.smile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(28, 47, 74, 0.08);
}

.smile-card.featured {
    border-color: #70d9e8;
}

.smile-card.dark {
    background: #1C2F4A;
    border-color: #1C2F4A;
}

.card-number {
    position: absolute;
    top: 25px;
    right: 25px;
    color: #a5b3c3;
    font-size: 12px;
    font-weight: 700;
}

.smile-card.dark .card-number {
    color: #8299ae;
}

.smile-icon {
    width: 74px;
    height: 74px;
    margin: 30px 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #eef8fa;
}

.smile-card.dark .smile-icon {
    background: rgba(255,255,255,.07);
}

.smile-card h3 {
    margin: 0 0 15px;
    color: #1C2F4A;
    font-size: 20px;
    line-height: 1.3;
}

.smile-card > p {
    margin: 0;
    color: #687a92;
    font-size: 14px;
    line-height: 1.65;
}

.smile-card.dark h3 {
    color: #ffffff;
}

.smile-card.dark > p {
    color: #b8c5d2;
}

/* Supporting client content */

.smile-supporting-content {
    margin-top: 55px;
    padding: 40px 0 0;
    border-top: 1px solid #dbe5ec;

    display: grid;
    grid-template-columns: 1.6fr .7fr;
    gap: 70px;
    align-items: end;
}

.supporting-copy {
    max-width: 790px;
}

.supporting-copy p {
    margin: 0 0 16px;
    color: #657791;
    font-size: 16px;
    line-height: 1.75;
}

.supporting-copy p:last-child {
    margin-bottom: 0;
    color: #1C2F4A;
    font-weight: 600;
}

.supporting-action {
    text-align: right;
}

.supporting-action .text-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding-bottom: 8px;
    border-bottom: 1px solid #b8c7d2;

    color: #1C2F4A;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.supporting-action .text-link span {
    color: #00CFE8;
    font-size: 19px;
    transition: transform .2s ease;
}

.supporting-action .text-link:hover span {
    transform: translateX(4px);
}

/* Responsive */

@media (max-width: 991px) {

    .smile-solutions {
        padding: 80px 0;
    }

    .smile-heading h2 {
        font-size: 42px;
    }

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

    .smile-supporting-content {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .supporting-action {
        text-align: left;
    }
}

@media (max-width: 600px) {

    .smile-solutions {
        padding: 65px 0;
    }

    .smile-solutions .container {
        padding: 0 20px;
    }

    .smile-heading {
        margin-bottom: 40px;
        text-align: left;
    }

    .smile-heading h2 {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .smile-heading > p {
        margin-left: 0;
    }

    .smile-grid {
        grid-template-columns: 1fr;
    }

    .smile-card {
        min-height: auto;
    }

    .smile-supporting-content {
        margin-top: 40px;
        padding-top: 30px;
    }
}
/* =========================================
   FOR EVERY KIND OF SMILE - CARD IMAGES
========================================= */

.smile-card-image {
    width: 100%;
    height: 170px;
    margin-bottom: 28px;
    border-radius: 16px;
    overflow: hidden;
    background: #f3f9fb;
}

.smile-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.smile-card:hover .smile-card-image img {
    transform: scale(1.04);
}

@media (max-width: 768px) {
    .smile-card-image {
        height: 210px;
    }
}
.smile-card-image {
    margin-top: -4px;
    margin-bottom: 24px;
}

.smile-card-image img {
    object-position: center center;
}
/* =========================================
   FOR EVERY SMILE - A SOLUTION
========================================= */

.every-smile-section {
    padding: 110px 0;
    background: #ffffff;
}

.every-smile-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 90px;
    align-items: center;
}

.every-smile-content {
    max-width: 560px;
}

.every-smile-content .section-eyebrow {
    display: block;
    margin-bottom: 20px;
    color: #2696b0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.every-smile-content h2 {
    margin: 0 0 30px;
    color: #1C2F4A;
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -2px;
}

.every-smile-content h2 span {
    display: block;
    color: #3d9bb1;
}

.every-smile-content p {
    margin: 0 0 22px;
    color: #667b99;
    font-size: 17px;
    line-height: 1.75;
}

.ods-text-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding-bottom: 9px;
    border-bottom: 1px solid #a9bac9;
    color: #1C2F4A;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.ods-text-link span {
    color: #00CFE8;
    font-size: 20px;
    transition: transform .25s ease;
}

.ods-text-link:hover span {
    transform: translateX(5px);
}

.every-smile-visual {
    position: relative;
    height: 570px;
    overflow: hidden;
    border-radius: 26px;
    background: #eef8fb;
}

.every-smile-visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.every-smile-visual::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 30%;
    background: linear-gradient(
        to top,
        rgba(28, 47, 74, .18),
        transparent
    );
    pointer-events: none;
}

@media (max-width: 900px) {
    .every-smile-section {
        padding: 75px 0;
    }

    .every-smile-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .every-smile-content {
        max-width: 100%;
    }

    .every-smile-content h2 {
        font-size: 44px;
    }

    .every-smile-visual {
        height: 450px;
    }
}

@media (max-width: 600px) {
    .every-smile-content h2 {
        font-size: 38px;
    }

    .every-smile-visual {
        height: 360px;
        border-radius: 20px;
    }
}
/* ========================================
   THE SCIENCE BEHIND ODS
======================================== */

.ods-science {
    background: #1d3553;
    padding: 110px 0;
    overflow: hidden;
}

.ods-science-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 85px;
    align-items: center;
}

.ods-science-visual img {
    width: 100%;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 24px;
}

.ods-science-content {
    max-width: 570px;
}

.ods-science .section-label {
    display: block;
    margin-bottom: 22px;
    color: #56cbe5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.ods-science h2 {
    margin: 0 0 34px;
    color: #ffffff;
    font-size: clamp(38px, 3.6vw, 54px);
    line-height: 1.06;
    letter-spacing: -1.8px;
}

.ods-science h2 span {
    display: block;
    color: #56cbe5;
}

.science-questions {
    margin: 0 0 30px;
    border-top: 1px solid rgba(255,255,255,.15);
}

.science-questions p {
    position: relative;
    margin: 0;
    padding: 13px 0 13px 25px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
}

.science-questions p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 21px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #56cbe5;
}

.science-description {
    margin: 0 0 27px;
    color: #b9c7d8;
    font-size: 16px;
    line-height: 1.7;
}

.science-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(86,203,229,.55);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.science-link span {
    color: #56cbe5;
    font-size: 19px;
    transition: transform .25s ease;
}

.science-link:hover span {
    transform: translateX(5px);
}

@media (max-width: 900px) {

    .ods-science {
        padding: 75px 0;
    }

    .ods-science-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .ods-science-content {
        max-width: 100%;
    }

    .ods-science-visual {
        max-width: 650px;
    }
}

@media (max-width: 600px) {

    .ods-science {
        padding: 60px 0;
    }

    .ods-science h2 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .science-questions p {
        font-size: 15px;
    }

    .ods-science-visual img {
        border-radius: 18px;
    }
}
/* =====================================================
   THE PROOF / TREATED CASES
===================================================== */

.ods-proof {
    background: #f7fafc;
    padding: 110px 0;
}

.ods-proof-container {
    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;
}

.ods-proof-grid {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 90px;
    align-items: center;
}

/* LEFT CONTENT */

.ods-proof-label {
    display: block;
    margin-bottom: 24px;
    color: #2798b5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.2px;
}

.ods-proof-content h2 {
    margin: 0 0 30px;
    color: #1d3554;
    font-size: clamp(42px, 4vw, 60px);
    line-height: 1.04;
    letter-spacing: -2px;
}

.ods-proof-content h2 span {
    color: #3fa0b8;
}

.ods-proof-content p {
    max-width: 470px;
    margin: 0 0 20px;
    color: #647996;
    font-size: 16px;
    line-height: 1.75;
}

.ods-proof-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    padding-bottom: 9px;
    border-bottom: 1px solid #adc4d0;
    color: #1d3554;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.25s ease;
}

.ods-proof-link span {
    color: #45c7e5;
    font-size: 18px;
    transition: transform 0.25s ease;
}

.ods-proof-link:hover {
    color: #2798b5;
}

.ods-proof-link:hover span {
    transform: translateX(5px);
}

/* CASE CARD */

.ods-case-slider {
    background: #ffffff;
    border: 1px solid #d9e6ed;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 24px 60px rgba(26, 57, 86, 0.08);
}

.ods-case-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.ods-case-number {
    display: block;
    margin-bottom: 6px;
    color: #3fbcd7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.ods-case-top h3 {
    margin: 0;
    color: #1d3554;
    font-size: 27px;
    line-height: 1.2;
}

.ods-case-counter {
    display: flex;
    gap: 7px;
    align-items: center;
    color: #9aaabd;
    font-size: 13px;
    font-weight: 600;
}

.ods-case-counter #currentCase {
    color: #2798b5;
}

.counter-divider {
    color: #ccd7df;
}

/* BEFORE AFTER */

.ods-before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ods-case-image {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background: #edf4f7;
    aspect-ratio: 4 / 3;
}

.ods-case-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.ods-image-label {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    padding: 7px 11px;
    border-radius: 6px;
    background: rgba(29, 53, 84, 0.90);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.ods-image-label.after-label {
    background: #49c6df;
    color: #17324e;
}

/* CONTROLS */

.ods-case-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2ebf0;
}

.ods-case-arrow {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid #c9d9e2;
    border-radius: 50%;
    background: transparent;
    color: #1d3554;
    font-size: 19px;
    cursor: pointer;
    transition: 0.25s ease;
}

.ods-case-arrow:hover {
    border-color: #4bc7e2;
    background: #4bc7e2;
    color: #17324e;
}

.ods-case-progress {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ods-progress-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c7d4dc;
    transition: 0.25s ease;
}

.ods-progress-dot.active {
    width: 24px;
    border-radius: 10px;
    background: #46c6e2;
}

/* RESPONSIVE */

@media (max-width: 1000px) {

    .ods-proof {
        padding: 80px 0;
    }

    .ods-proof-container {
        width: min(100% - 48px, 1240px);
    }

    .ods-proof-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .ods-proof-content p {
        max-width: 700px;
    }
}

@media (max-width: 650px) {

    .ods-proof {
        padding: 65px 0;
    }

    .ods-proof-container {
        width: calc(100% - 32px);
    }

    .ods-proof-content h2 {
        font-size: 40px;
        letter-spacing: -1.2px;
    }

    .ods-case-slider {
        padding: 18px;
        border-radius: 18px;
    }

    .ods-before-after {
        grid-template-columns: 1fr;
    }

    .ods-case-image {
        aspect-ratio: 4 / 3;
    }

    .ods-case-top h3 {
        font-size: 23px;
    }
}
/* =====================================================
   ODS FAQ
===================================================== */

.ods-faq {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: #ffffff;
}

.ods-faq-container {
    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;
}

.ods-faq-grid {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 110px;
    align-items: start;
}

/* LEFT SIDE */

.ods-faq-intro {
    position: relative;
    padding-top: 8px;
}

.ods-faq-eyebrow {
    display: block;
    margin-bottom: 25px;
    color: #2798b5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.2px;
}

.ods-faq-intro h2 {
    position: relative;
    z-index: 2;
    margin: 0 0 30px;
    color: #1d3554;
    font-size: clamp(42px, 4vw, 58px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.ods-faq-intro h2 span {
    color: #3fa0b8;
}

.ods-faq-intro-text {
    position: relative;
    z-index: 2;
    max-width: 430px;
    margin: 0 0 32px;
    color: #647996;
    font-size: 16px;
    line-height: 1.75;
}

.ods-faq-provider-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 9px;
    border-bottom: 1px solid #adc4d0;
    color: #1d3554;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.25s ease;
}

.ods-faq-provider-link span {
    color: #45c7e5;
    font-size: 18px;
    transition: transform 0.25s ease;
}

.ods-faq-provider-link:hover {
    color: #2798b5;
}

.ods-faq-provider-link:hover span {
    transform: translateX(5px);
}

/* DECORATIVE QUESTION MARK */

.ods-faq-decoration {
    position: absolute;
    z-index: 0;
    top: 180px;
    left: 200px;

    color: rgba(66, 188, 215, 0.045);

    font-size: 340px;
    font-weight: 700;
    line-height: 1;

    pointer-events: none;
    user-select: none;
}

/* FAQ LIST */

.ods-faq-list {
    border-top: 1px solid #d9e5eb;
}

.ods-faq-item {
    border-bottom: 1px solid #d9e5eb;
}

.ods-faq-question {
    width: 100%;
    min-height: 92px;

    display: grid;
    grid-template-columns: 55px 1fr 44px;
    gap: 14px;
    align-items: center;

    padding: 22px 0;

    border: 0;
    outline: 0;
    background: transparent;

    text-align: left;
    cursor: pointer;
}

/* NUMBER */

.ods-faq-number {
    color: #42bdd8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* QUESTION */

.ods-faq-title {
    color: #1d3554;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.4;
    transition: color 0.25s ease;
}

.ods-faq-question:hover .ods-faq-title {
    color: #2798b5;
}

/* PLUS ICON */

.ods-faq-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    justify-self: end;

    border: 1px solid #cbdce5;
    border-radius: 50%;

    color: #1d3554;
    font-size: 22px;
    font-weight: 300;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

/* OPEN STATE */

.ods-faq-item.active .ods-faq-title {
    color: #2798b5;
}

.ods-faq-item.active .ods-faq-icon {
    transform: rotate(45deg);
    border-color: #4ac5df;
    background: #4ac5df;
    color: #17324e;
}

/* ANSWER ANIMATION */

.ods-faq-answer {
    display: grid;
    grid-template-rows: 0fr;

    transition: grid-template-rows 0.35s ease;
}

.ods-faq-answer-inner {
    overflow: hidden;
}

.ods-faq-item.active .ods-faq-answer {
    grid-template-rows: 1fr;
}

.ods-faq-answer p {
    max-width: 650px;

    margin: 0;
    padding:
        0
        60px
        30px
        69px;

    color: #647996;
    font-size: 15px;
    line-height: 1.75;
}

/* RESPONSIVE */

@media (max-width: 1000px) {

    .ods-faq {
        padding: 85px 0;
    }

    .ods-faq-container {
        width: min(100% - 48px, 1240px);
    }

    .ods-faq-grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .ods-faq-intro-text {
        max-width: 650px;
    }

    .ods-faq-decoration {
        display: none;
    }
}

@media (max-width: 650px) {

    .ods-faq {
        padding: 65px 0;
    }

    .ods-faq-container {
        width: calc(100% - 32px);
    }

    .ods-faq-grid {
        gap: 50px;
    }

    .ods-faq-intro h2 {
        font-size: 40px;
        letter-spacing: -1.2px;
    }

    .ods-faq-question {
        grid-template-columns: 36px 1fr 38px;
        gap: 8px;
        min-height: 82px;
        padding: 18px 0;
    }

    .ods-faq-title {
        font-size: 16px;
    }

    .ods-faq-icon {
        width: 34px;
        height: 34px;
        font-size: 20px;
    }

    .ods-faq-answer p {
        padding:
            0
            42px
            24px
            44px;

        font-size: 14px;
    }
}
@media (min-width: 1001px) {
    .ods-faq-grid {
        grid-template-columns: 0.88fr 1.12fr;
        gap: 90px;
    }

    .ods-faq-intro h2 {
        font-size: clamp(42px, 3.5vw, 54px);
    }

    .ods-faq {
        padding: 95px 0;
    }
}
/* =====================================================
   FINAL CTA
===================================================== */

.ods-final-cta {
    padding: 90px 0 100px;
    background: #ffffff;
}

.ods-final-cta-container {
    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;
}

.ods-final-cta-box {
    position: relative;
    overflow: hidden;

    min-height: 520px;

    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: center;

    padding: 70px 75px;

    border-radius: 30px;

    background:
        linear-gradient(
            115deg,
            #193451 0%,
            #1d3b5b 55%,
            #204565 100%
        );
}

/* =====================================================
   CONTENT
===================================================== */

.ods-final-cta-content {
    position: relative;
    z-index: 5;
    max-width: 530px;
}

.ods-final-cta-label {
    display: block;

    margin-bottom: 24px;

    color: #55d1ec;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.2px;
}

.ods-final-cta-content h2 {
    margin: 0 0 27px;

    color: #ffffff;

    font-size: clamp(48px, 4.5vw, 68px);
    line-height: 1.02;
    letter-spacing: -2.3px;
}

.ods-final-cta-content h2 span {
    color: #51c9e4;
}

.ods-final-cta-content p {
    max-width: 490px;

    margin: 0 0 35px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 16px;
    line-height: 1.75;
}

/* =====================================================
   BUTTON
===================================================== */

.ods-final-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    min-height: 54px;

    padding: 0 25px;

    border-radius: 7px;

    background: #55cbe5;

    color: #17324e;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.ods-final-cta-button span {
    font-size: 19px;
    transition: transform 0.25s ease;
}

.ods-final-cta-button:hover {
    transform: translateY(-2px);

    background: #69d6ed;

    box-shadow:
        0 12px 28px
        rgba(49, 190, 221, 0.20);
}

.ods-final-cta-button:hover span {
    transform: translateX(5px);
}

/* =====================================================
   RIGHT VISUAL
===================================================== */

.ods-final-cta-visual {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ods-final-cta-visual img {
    width: min(100%, 470px);
    height: 430px;
    display: block;
    object-fit: cover;
    object-position: center 58%;
    border-radius: 22px;

    box-shadow:
        0 28px 55px rgba(0, 0, 0, 0.22);
}

/* =====================================================
   DECORATIVE ODS CIRCLES
===================================================== */

.ods-cta-circle {
    position: absolute;

    border: 1px solid
        rgba(80, 203, 230, 0.12);

    border-radius: 50%;

    pointer-events: none;
}

.ods-cta-circle-one {
    width: 470px;
    height: 470px;

    top: -270px;
    right: -100px;
}

.ods-cta-circle-two {
    width: 620px;
    height: 620px;

    top: -345px;
    right: -175px;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .ods-final-cta {
        padding: 70px 0 80px;
    }

    .ods-final-cta-container {
        width: min(100% - 48px, 1240px);
    }

    .ods-final-cta-box {
        grid-template-columns: 1fr;

        padding: 65px 55px 35px;

        text-align: center;
    }

    .ods-final-cta-content {
        max-width: 650px;
        margin: 0 auto;
    }

    .ods-final-cta-content p {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 35px;
    }

    .ods-final-cta-visual {
        min-height: 350px;
        margin-top: 20px;
    }

    .ods-final-cta-visual img {
        width: min(100%, 520px);
    }
}

@media (max-width: 650px) {

    .ods-final-cta {
        padding: 50px 0 60px;
    }

    .ods-final-cta-container {
        width: calc(100% - 32px);
    }

    .ods-final-cta-box {
        min-height: auto;

        padding:
            50px
            24px
            25px;

        border-radius: 22px;
    }

    .ods-final-cta-content h2 {
        font-size: 43px;
        letter-spacing: -1.5px;
    }

    .ods-final-cta-content p {
        font-size: 15px;
    }

    .ods-final-cta-button {
        width: 100%;

        padding:
            0
            18px;
    }

    .ods-final-cta-visual {
        min-height: 270px;
    }

    .ods-final-cta-visual img {
        width: 100%;
    }

    .ods-cta-glow {
        width: 300px;
        height: 300px;
    }
}
/* =====================================================
   ODS FOOTER
===================================================== */

.ods-footer {
    position: relative;
    overflow: hidden;
    background: #142d48;
    color: #ffffff;
}

.ods-footer::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -260px;
    top: -300px;
    border: 1px solid rgba(82, 204, 231, 0.08);
    border-radius: 50%;
}

.ods-footer::after {
    content: "";
    position: absolute;
    width: 680px;
    height: 680px;
    right: -340px;
    top: -380px;
    border: 1px solid rgba(82, 204, 231, 0.06);
    border-radius: 50%;
}

.ods-footer-container {
    position: relative;
    z-index: 2;
    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;
}

/* MAIN FOOTER */

.ods-footer-grid {
    display: grid;
    grid-template-columns: 1.65fr 0.8fr 0.9fr 1.1fr;
    gap: 65px;

    padding: 85px 0 70px;
}

/* BRAND */

.ods-footer-brand {
    max-width: 360px;
}

.ods-footer-logo {
    display: inline-block;
    margin-bottom: 28px;
}

.ods-footer-logo img {
    display: block;
    width: 190px;
    height: auto;
}

.ods-footer-brand p {
    margin: 0 0 28px;

    color: rgba(255,255,255,0.62);

    font-size: 14px;
    line-height: 1.8;
}

.ods-footer-tagline {
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.10);

    color: #55cbe5;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* COLUMNS */

.ods-footer-column h3 {
    margin: 5px 0 26px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
}

.ods-footer-column ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ods-footer-column li {
    margin-bottom: 15px;
}

.ods-footer-column li:last-child {
    margin-bottom: 0;
}

.ods-footer-column a {
    color: rgba(255,255,255,0.62);
    text-decoration: none;

    font-size: 14px;

    transition:
        color .25s ease,
        transform .25s ease;
}

.ods-footer-column li a {
    display: inline-block;
}

.ods-footer-column li a:hover {
    color: #55cbe5;
    transform: translateX(3px);
}

/* CONTACT */

.ods-footer-contact p {
    margin: 0 0 23px;

    color: rgba(255,255,255,0.62);

    font-size: 14px;
    line-height: 1.75;
}

.ods-footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding-bottom: 7px;

    border-bottom: 1px solid rgba(85,203,229,0.55);

    color: #ffffff !important;

    font-weight: 700;
}

.ods-footer-contact-link span {
    color: #55cbe5;
    font-size: 18px;
}

.ods-footer-contact-link:hover {
    color: #55cbe5 !important;
}

.ods-footer-portal {
    display: block;

    width: fit-content;

    margin-top: 27px;

    color: #55cbe5 !important;

    font-size: 13px !important;
    font-weight: 600;
}

.ods-footer-portal span {
    margin-left: 7px;
}

/* BOTTOM BAR */

.ods-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 25px 0 30px;

    border-top: 1px solid rgba(255,255,255,0.10);
}

.ods-footer-bottom p {
    margin: 0;

    color: rgba(255,255,255,0.42);

    font-size: 12px;
}

.ods-footer-legal {
    display: flex;
    align-items: center;
    gap: 30px;
}

.ods-footer-legal a {
    color: rgba(255,255,255,0.45);
    text-decoration: none;

    font-size: 12px;

    transition: color .25s ease;
}

.ods-footer-legal a:hover {
    color: #55cbe5;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .ods-footer-container {
        width: min(100% - 48px, 1240px);
    }

    .ods-footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 50px 40px;
    }

    .ods-footer-brand {
        grid-column: 1 / -1;
        max-width: 500px;
    }
}

@media (max-width: 700px) {

    .ods-footer-container {
        width: calc(100% - 40px);
    }

    .ods-footer-grid {
        grid-template-columns: 1fr 1fr;

        gap: 45px 30px;

        padding: 65px 0 55px;
    }

    .ods-footer-brand {
        grid-column: 1 / -1;
    }

    .ods-footer-contact {
        grid-column: 1 / -1;
    }

    .ods-footer-bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 16px;
    }

    .ods-footer-legal {
        gap: 20px;
    }
}

@media (max-width: 480px) {

    .ods-footer-grid {
        grid-template-columns: 1fr;
    }

    .ods-footer-brand,
    .ods-footer-contact {
        grid-column: auto;
    }
}
.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.header-logo img {
    display: block;
    width: 190px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .header-logo img {
        width: 155px;
    }
}
/* =========================================
   MOBILE HERO IMAGE
========================================= */

.hero-mobile-image {
    display: none;
}

@media (max-width: 700px) {

    .hero-background {
        display: none;
    }

    .hero-mobile-image {
        display: block;
        width: 100%;
        margin: 28px 0 24px;
        overflow: hidden;
        border-radius: 12px;
    }

    .hero-mobile-image img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: center;
    }
}
/* =========================================
   MOBILE HERO HEIGHT FIX
========================================= */

@media (max-width: 700px) {

    .hero-section {
        min-height: 0;
        height: auto;
        padding-bottom: 0;
    }

    .hero-container {
        min-height: 0;
        height: auto;
    }

    .hero-content {
        min-height: 0;
        height: auto;
        padding-bottom: 55px;
    }
}
/* =========================================
   ODS BY THE NUMBERS
========================================= */

.ods-numbers-section {
    background: #1d3958;
    padding: 105px 0 100px;
    color: #ffffff;
}

.ods-numbers-heading {
    max-width: 720px;
    margin-bottom: 65px;
}

.ods-numbers-heading .section-label {
    color: #55c6e2;
    margin-bottom: 18px;
}

.ods-numbers-heading h2 {
    margin: 0 0 22px;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -1.8px;
    color: #ffffff;
}

.ods-numbers-heading h2 span {
    display: block;
    color: #55c6e2;
}

.ods-numbers-heading p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 17px;
    line-height: 1.75;
}

/* NUMBERS */

.ods-numbers-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.ods-number-item {
    position: relative;
    padding: 42px 28px 40px 0;
}

.ods-number-item:not(:first-child) {
    padding-left: 30px;
}

.ods-number-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 35px;
    bottom: 35px;
    width: 1px;
    background: rgba(255, 255, 255, 0.14);
}

.ods-number-item strong {
    display: block;
    margin-bottom: 13px;
    color: #55c6e2;
    font-size: clamp(38px, 3.5vw, 52px);
    line-height: 1;
    letter-spacing: -1.5px;
    font-weight: 700;
}

.ods-number-item span {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.55;
}

/* TABLET */

@media (max-width: 1050px) {

    .ods-numbers-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ods-number-item {
        padding: 32px 25px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .ods-number-item::after {
        display: none;
    }
}

/* MOBILE */

@media (max-width: 700px) {

    .ods-numbers-section {
        padding: 70px 0;
    }

    .ods-numbers-heading {
        margin-bottom: 42px;
    }

    .ods-numbers-heading h2 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .ods-numbers-heading p {
        font-size: 15px;
        line-height: 1.7;
    }

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

    .ods-number-item {
        padding: 28px 18px 28px 0 !important;
    }

    .ods-number-item:nth-child(even) {
        padding-left: 20px !important;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }

    .ods-number-item strong {
        font-size: 36px;
    }

    .ods-number-item span {
        font-size: 13px;
    }

    .ods-number-item:last-child {
        grid-column: 1 / -1;
        border-left: 0;
    }
}
.ods-number-item strong small {
    font-size: 0.42em;
    font-weight: 600;
    letter-spacing: 0;
}
@media (max-width: 700px) {

    .ods-numbers-section {
        padding: 65px 0;
    }

    .ods-numbers-heading {
        margin-bottom: 38px;
    }

    .ods-numbers-heading h2 {
        font-size: 36px;
        line-height: 1.08;
        letter-spacing: -1px;
    }

    .ods-numbers-heading p {
        font-size: 15px;
        line-height: 1.7;
    }

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

    .ods-number-item {
        min-height: 145px;
        padding: 28px 14px 26px 0 !important;
    }

    .ods-number-item:nth-child(even) {
        padding-left: 20px !important;
    }

    .ods-number-item strong {
        font-size: 36px;
        line-height: 1;
        margin-bottom: 15px;
    }

    .ods-number-item strong small {
        font-size: 15px;
    }

    .ods-number-item span {
        font-size: 13px;
        line-height: 1.55;
    }

    /* Last statistic */
    .ods-number-item:last-child {
        grid-column: 1 / -1;
        min-height: auto;
        padding: 28px 0 5px !important;
        border-left: 0;
    }
}
@media (max-width: 700px) {

    .ods-final-cta-box {
        padding: 48px 22px 0;
        border-radius: 22px;
    }

    .ods-final-cta-content {
        text-align: center;
    }

    .ods-final-cta-content h2 {
        font-size: 39px;
        line-height: 1.08;
        margin-bottom: 25px;
    }

    .ods-final-cta-content p {
        font-size: 15px;
        line-height: 1.65;
        margin-left: auto;
        margin-right: auto;
        max-width: 340px;
    }

    .ods-final-cta-button {
        width: 100%;
        justify-content: center;
        margin-top: 32px;
    }

    .ods-final-cta-visual {
        width: 100%;
        height: 320px;
        margin-top: 20px;
        overflow: hidden;
        border-radius: 18px 18px 0 0;
    }

    .ods-final-cta-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
}
/* =========================================
   FLOATING WHATSAPP BUTTON
========================================= */

.ods-whatsapp-float {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 58px;
    height: 58px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #25D366;
    color: #ffffff;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);

    z-index: 9999;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ods-whatsapp-float svg {
    width: 31px;
    height: 31px;
}

.ods-whatsapp-float:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

/* MOBILE */

@media (max-width: 700px) {

    .ods-whatsapp-float {
        width: 54px;
        height: 54px;
        right: 18px;
        bottom: 18px;
    }

    .ods-whatsapp-float svg {
        width: 29px;
        height: 29px;
    }
}
/* ================================================================
   ODS PREMIUM VISUAL SYSTEM — consolidated into ods-style.css
   Client-approved HTML copy, section order and functionality retained.
   Palette: #0B132B / #FFFFFF / #00CFE8
   ================================================================ */
:root {
  --ods-navy: #0B132B;
  --ods-cyan: #00CFE8;
  --ods-white: #FFFFFF;
  --ods-text: #0B132B;
  --ods-muted: #58657A;
  --ods-light: #F4F8FA;
  --ods-border: #DFE8ED;
  --container: 1280px;
  --header-height: 86px;
}
html { scroll-padding-top: 95px; }
body { font-family: 'Roboto',Arial,sans-serif; font-size: 16px; line-height: 1.75; color: var(--ods-navy); }
h1,h2,h3,h4,h5,h6 { font-family: 'Roboto',sans-serif; letter-spacing: -.035em; }
h1,h2 { font-weight: 800; line-height: 1.13; }
h3 { font-weight: 700; line-height: 1.28; }
img { max-width: 100%; }
a:focus-visible,button:focus-visible { outline: 3px solid var(--ods-cyan); outline-offset: 4px; }
::selection { background: var(--ods-cyan); color: var(--ods-navy); }

/* Header: quiet white navigation and deliberate accent CTA */
.top-bar { background: var(--ods-navy); color: rgba(255,255,255,.82); }
.main-header { background: #fff; border-bottom: 1px solid #E8EDF1; }
.header-inner { gap: 14px; }
.nav-list > li > a,.nav-dropdown-button { font-size: 14px; font-weight: 600; height: var(--header-height); padding-inline: 11px; color: var(--ods-navy); }
.nav-list > li > a:hover,.nav-dropdown-button:hover,.nav-list > li > a.active { color: var(--ods-navy); }
.nav-list > li > a.active::after { background: var(--ods-cyan); height: 3px; }
.header-cta { background: var(--ods-navy); color: #fff; min-height: 48px; padding: 0 20px; border-radius: 5px; font-size: 13px; }
.header-cta:hover { background: var(--ods-cyan); color: var(--ods-navy); }
.dropdown-menu { border: 1px solid var(--ods-border); box-shadow: 0 25px 65px rgba(11,19,43,.15); }
.dropdown-intro { background: var(--ods-navy); }
.dropdown-eyebrow { color: var(--ods-cyan); }
.dropdown-links strong,.product-column strong { font-size: 14px; }
.dropdown-links small,.product-column small { font-size: 12px; }
.header-logo img { max-width: 190px; height: auto; }

/* Hero: dramatic navy, but maintain original imagery and words */
.hero-section { min-height: 690px; background: var(--ods-navy); }
.hero-container { min-height: 690px; }
.hero-section::after { background: linear-gradient(90deg,#0B132B 0%,rgba(11,19,43,.99) 26%,rgba(11,19,43,.90) 43%,rgba(11,19,43,.47) 67%,rgba(11,19,43,.06) 100%); }
.hero-background img { object-position: 65% center; }
.hero-content { width: 55%; max-width: 650px; padding: 88px 0; }
.hero-content .section-label { color: var(--ods-cyan); display: inline-block; font-size: 12px; letter-spacing: .2em; margin-bottom: 22px; }
.hero-content h1 { color: #fff; font-size: clamp(48px,5.2vw,76px); font-weight: 800; line-height: 1.06; letter-spacing: -.055em; margin-bottom: 24px; }
.hero-content h1 span { color: var(--ods-cyan); }
.hero-content h2 { color: #fff; font-family: 'Roboto',sans-serif; font-size: clamp(19px,1.7vw,25px); font-weight: 600; line-height: 1.48; margin-bottom: 20px; }
.hero-description { max-width: 545px; margin-top: 0; }
.hero-description p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.85; }
.hero-disclaimer { color: rgba(255,255,255,.65); font-size: 11px; line-height: 1.6; }
.btn-primary { background: var(--ods-cyan); border-color: var(--ods-cyan); color: var(--ods-navy); min-height: 54px; padding: 0 26px; border-radius: 5px; font-size: 14px; }
.btn-primary:hover { background: #fff; border-color: #fff; color: var(--ods-navy); }

/* Consistent, generous editorial typography */
.smile-heading h2,.journey-heading h2,.cost-intro h2,.why-ods-content h2,
.every-smile-content h2,.ods-science h2,.ods-proof-content h2,.ods-faq-intro h2,
.ods-numbers-heading h2,.ods-final-cta-content h2 {
  font-family: 'Roboto',sans-serif;
  font-size: clamp(34px,3.8vw,54px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.14;
}
.section-label,.section-eyebrow,.journey-eyebrow,.ods-proof-label,.ods-faq-eyebrow,
.ods-final-cta-label { font-family: 'Roboto',sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .17em; }
.smile-heading h2,.cost-intro h2,.why-ods-content h2,.every-smile-content h2,
.ods-science h2,.ods-proof-content h2,.ods-faq-intro h2 { color: var(--ods-navy); }
.smile-heading h2 span,.cost-intro h2 span,.why-ods-content h2 span,
.every-smile-content h2 span,.ods-science h2 span,.ods-proof-content h2 span,
.ods-faq-intro h2 span { color: var(--ods-navy); }
.smile-heading .section-label,.section-eyebrow,.ods-science .section-label,.ods-proof-label,
.ods-faq-eyebrow { color: #007F91; }

/* Section rhythm, premium white / navy alternation */
.smile-solutions { background: #fff; padding: 112px 0 106px; }
.smile-heading { margin-bottom: 58px; }
.smile-heading > p { color: var(--ods-muted); font-size: 16px; }
.smile-card { background: #fff; border: 1px solid var(--ods-border); border-radius: 12px; padding: 24px; min-height: 0; box-shadow: 0 10px 30px rgba(11,19,43,.035); }
.smile-card:hover { transform: translateY(-5px); box-shadow: 0 22px 45px rgba(11,19,43,.09); }
.smile-card.featured { border-color: var(--ods-cyan); }
.smile-card.dark { background: var(--ods-navy); border-color: var(--ods-navy); }
.smile-card h3 { color: var(--ods-navy); font-size: 22px; }
.smile-card.dark h3 { color: #fff; }
.smile-card.dark > p { color: rgba(255,255,255,.78); }
.smile-card > p { font-size: 14px; line-height: 1.8; }
.smile-card-image { overflow: hidden; border-radius: 8px; }
.smile-card-image img { width: 100%; display: block; }

.journey-section { background: var(--ods-navy); padding: 110px 0; }
.journey-heading h2 { color: #fff; }
.journey-heading h2 span { color: var(--ods-cyan); }
.journey-heading > p { color: rgba(255,255,255,.76); font-size: 15px; }
.journey-step { padding-top: 48px; }
.journey-marker { background: var(--ods-navy); border-color: var(--ods-cyan); box-shadow: 0 0 0 5px rgba(0,207,232,.09); }
.journey-marker span { color: var(--ods-cyan); }
.journey-image { max-width: 100%; border-radius: 10px; margin-bottom: 24px; }
.journey-step h3 { color: #fff; font-size: 21px; }
.journey-step p { color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.8; max-width: 100%; }
.journey-note { color: rgba(255,255,255,.72); font-size: 12px; }

.treatment-cost-section { background: #fff; padding: 110px 0; }
.cost-lead { color: var(--ods-muted); }
.cost-details { border-radius: 12px; border: 1px solid var(--ods-border); box-shadow: 0 20px 60px rgba(11,19,43,.065); }
.cost-small-title,.cost-factor span { color: #007F91; }
.cost-factor p { color: var(--ods-navy); font-size: 15px; }

.why-ods-section { background: #F4F8FA; padding: 110px 0; }
.why-ods-grid { gap: clamp(36px,5vw,80px); }
.why-benefit h3 { font-size: 19px; }
.why-benefit p { font-size: 14px; color: var(--ods-muted); }
.why-number { color: #007F91; }
.why-ods-visual { border-radius: 12px; box-shadow: 0 25px 65px rgba(11,19,43,.12); }

.every-smile-section { background: #fff; padding-block: 110px; }
.every-smile-grid { gap: clamp(30px,5vw,80px); }
.every-smile-content p { color: var(--ods-muted); font-size: 15px; line-height: 1.8; }
.every-smile-visual { border-radius: 12px; }
.ods-science { background: var(--ods-navy); padding-block: 110px; }
.ods-science h2,.ods-science h2 span { color: #fff; }
.ods-science .section-label { color: var(--ods-cyan); }
.ods-science-content,.ods-science-content p,.science-questions p,.science-description { color: rgba(255,255,255,.84); }
.ods-science-visual img { border-radius: 12px; }
.ods-science .science-link { color: var(--ods-cyan); }

.ods-proof { background: #F4F8FA; padding: 110px 0; }
.ods-proof-content h2,.ods-proof-content h2 span { color: var(--ods-navy); }
.ods-proof-content p { color: var(--ods-muted); font-size: 15px; line-height: 1.8; }
.ods-case-slider { border-radius: 14px; }
.ods-faq { background: #fff; padding: 110px 0; }
.ods-faq-title { font-family: 'Roboto',sans-serif; font-weight: 700; }
.ods-faq-question { color: var(--ods-navy); }
.ods-faq-intro-text,.ods-faq-answer p { color: var(--ods-muted); }

.ods-numbers-section { background: var(--ods-navy); padding: 105px 0; }
.ods-numbers-heading h2,.ods-numbers-heading h2 span { color: #fff; }
.ods-numbers-heading p { color: rgba(255,255,255,.77); font-size: 15px; }
.ods-numbers-heading .section-label { color: var(--ods-cyan); }
.ods-number-item strong { color: var(--ods-cyan); font-family: 'Roboto',sans-serif; font-weight: 800; }
.ods-number-item span { color: rgba(255,255,255,.84); }
.ods-final-cta { background: #fff; padding: 100px 0; }
.ods-final-cta-box { background: var(--ods-navy); border-radius: 16px; }
.ods-final-cta-content h2,.ods-final-cta-content h2 span { color: #fff; }
.ods-final-cta-content h2 span { color: var(--ods-cyan); }
.ods-final-cta-visual img { border-radius: 10px; }
.ods-final-cta-button { background: var(--ods-cyan); color: var(--ods-navy); border-radius: 5px; }
.ods-final-cta-button:hover { background: #fff; color: var(--ods-navy); }
.ods-footer { background: var(--ods-navy); }
.ods-footer-column h3 { font-family: 'Roboto',sans-serif; font-size: 15px; }
.ods-footer-column a:hover,.ods-footer-legal a:hover { color: var(--ods-cyan); }
.ods-footer-tagline { color: var(--ods-cyan); }
/* Keep WhatsApp recognisable, as an external platform action */

@media (max-width: 1180px) {
  .header-cta { min-height: 45px; }
  .mobile-navigation { z-index: 20; max-height: calc(100vh - 90px); overflow-y: auto; }
}
@media (max-width: 950px) {
  .hero-content { width: 66%; }
  .journey-wrapper { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ods-science-grid,.ods-proof-grid { gap: 40px; }
}
@media (max-width: 700px) {
  :root { --header-height: 72px; }
  html { scroll-padding-top: 72px; }
  .hero-section { min-height: auto; padding: 0; background: var(--ods-navy); }
  .hero-container { min-height: 0; }
  .hero-background { display: none; }
  .hero-section::after { display: none; }
  .hero-content { width: 100%; max-width: none; padding: 56px 0 54px; }
  .hero-content .section-label { margin-bottom: 17px; }
  .hero-content h1 { font-size: clamp(39px,9vw,52px); line-height: 1.08; margin-bottom: 20px; }
  .hero-content h2 { font-size: 19px; }
  .hero-description p { font-size: 15px; color: rgba(255,255,255,.84); }
  .hero-mobile-image { display: block; margin: 28px 0 26px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; }
  .hero-mobile-image img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; }
  .hero-disclaimer { color: rgba(255,255,255,.7); }
  .btn-primary { width: 100%; }
  .smile-solutions,.journey-section,.treatment-cost-section,.why-ods-section,
  .every-smile-section,.ods-science,.ods-proof,.ods-faq,.ods-numbers-section,.ods-final-cta { padding-block: 72px; }
  .smile-heading h2,.journey-heading h2,.cost-intro h2,.why-ods-content h2,
  .every-smile-content h2,.ods-science h2,.ods-proof-content h2,.ods-faq-intro h2,
  .ods-numbers-heading h2,.ods-final-cta-content h2 { font-size: clamp(31px,7.8vw,39px); line-height: 1.16; letter-spacing: -.04em; }
  .journey-wrapper { grid-template-columns: 1fr; gap: 25px; }
  .journey-step { min-height: 0; padding: 0 0 26px 65px; border-left: 1px solid rgba(0,207,232,.27); }
  .journey-marker { position: absolute; top: 0; left: -22px; margin: 0; }
  .journey-image { max-width: 360px; }
  .journey-step p { font-size: 14px; }
  .ods-final-cta-box { border-radius: 14px; }
  .ods-faq-container,.ods-proof-container,.ods-final-cta-container { width: calc(100% - 36px); }
}
@media (max-width: 420px) {
  .hero-content h1 { font-size: 38px; }
  .hero-content { padding-top: 48px; }
  .smile-card { padding: 20px; }
  .journey-step { padding-left: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Footer social media icons */
.ods-footer-social { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
.ods-footer-social a { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#FFFFFF; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }
.ods-footer-social a:hover,.ods-footer-social a:focus-visible { background:#00CFE8; border-color:#00CFE8; color:#0B132B; transform:translateY(-2px); }
.ods-footer-social a:focus-visible { outline:2px solid #00CFE8; outline-offset:3px; }
.ods-footer-social svg { width:18px; height:18px; fill:currentColor; }

/* =========================================================
   WHY CHOOSE ODS | DEDICATED INNER PAGE
   Uses the same core stylesheet as the homepage
========================================================= */
.why-page { --why-navy:#0B132B; --why-cyan:#00CFE8; --why-white:#FFFFFF; font-family:Roboto,Arial,sans-serif; overflow:clip; }
.why-page h1,.why-page h2,.why-page h3 { font-family:Roboto,Arial,sans-serif; }
.why-page-hero { position:relative; overflow:hidden; color:#fff; background:#0B132B; }
.why-page-hero-inner { position:relative; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; min-height:560px; gap:48px; padding-block:95px; }
.why-page-kicker { display:block; color:#00CFE8; font-size:11px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; margin-bottom:20px; }
.why-page-hero h1 { color:#fff; font-size:clamp(48px,6.3vw,88px); font-weight:800; letter-spacing:-.065em; line-height:1.07; margin:0 0 26px; }
.why-page-hero h1 span { color:#00CFE8; }
.why-page-hero p { max-width:560px; color:rgba(255,255,255,.74); font-size:17px; line-height:1.85; }
.why-page-hero-link { display:inline-flex; gap:25px; align-items:center; margin-top:30px; padding:15px 22px; background:#00CFE8; border-radius:6px; color:#0B132B; font-weight:750; font-size:13px; transition:transform .2s; }
.why-page-hero-link:hover { transform:translateY(-3px); }
.why-page-hero-art { position:relative; min-height:370px; display:grid; place-items:center; isolation:isolate; }
.why-page-hero-art::before { content:""; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle at 38% 35%,rgba(0,207,232,.5),rgba(0,207,232,.06) 55%,transparent 72%); filter:blur(2px); }
.why-page-ring { position:absolute; width:290px; height:290px; border:1px solid rgba(0,207,232,.3); border-radius:50%; transform:rotateX(62deg) rotate(-30deg); }
.why-page-ring-two { width:400px; height:400px; border-color:rgba(255,255,255,.13); transform:rotateY(65deg) rotate(26deg); }
.why-page-ring-three { width:335px; height:335px; border-color:rgba(0,207,232,.25); transform:rotate(47deg) rotateY(50deg); }
.why-page-art-label { position:absolute; bottom:15px; font-size:11px; letter-spacing:.18em; font-weight:750; color:#fff; }
.why-page-art-label i { color:#00CFE8; font-style:normal; padding:0 10px; }
.why-page-section { padding:105px 0 115px; background:#fff; color:#0B132B; }
.why-page-section.why-page-dark { background:#0B132B; color:#fff; }
.why-page-section-head { max-width:890px; margin-bottom:52px; }
.why-page-section-head h2 { font-size:clamp(34px,4.4vw,58px); letter-spacing:-.05em; line-height:1.13; margin:0 0 24px; font-weight:800; }
.why-page-section-head h2 span { color:#07869A; }
.why-page-dark .why-page-section-head h2 span { color:#00CFE8; }
.why-page-section-head p { max-width:790px; font-size:16px; line-height:1.9; color:#4A5C72; }
.why-page-dark .why-page-section-head p { color:rgba(255,255,255,.76); }
.why-page-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.why-page-card { border:1px solid rgba(11,19,43,.12); padding:32px; border-radius:14px; background:#fff; box-shadow:0 15px 40px rgba(11,19,43,.035); transition:transform .25s,border-color .25s; }
.why-page-card:hover { transform:translateY(-4px); border-color:#00CFE8; }
.why-page-card-num,.why-page-index { color:#00899A; display:block; font-size:12px; font-weight:800; letter-spacing:.13em; margin-bottom:38px; }
.why-page-card h3,.why-page-article-grid h3,.why-page-material-copy h3,.why-page-narrative h3 { font-size:22px; letter-spacing:-.03em; line-height:1.35; margin:0 0 15px; }
.why-page-card p,.why-page-article-grid p,.why-page-material-copy p,.why-page-narrative p { font-size:14px; line-height:1.9; color:#516076; margin:0 0 15px; }
.why-page-statement { display:grid; grid-template-columns:1.3fr .7fr; gap:35px; align-items:center; margin-top:40px; padding:30px 35px; border-left:4px solid #00CFE8; background:#F2F7F9; border-radius:0 12px 12px 0; }
.why-page-statement p { line-height:1.8; font-size:14px; }
.why-page-statement>strong { font-family:Roboto,sans-serif; font-size:20px; line-height:1.5; }
.why-page-article-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.why-page-article-grid article { padding:36px; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:rgba(255,255,255,.045); }
.why-page-dark .why-page-article-grid h3 { color:#fff; }
.why-page-dark .why-page-article-grid p { color:rgba(255,255,255,.7); }
.why-page-dark .why-page-index { color:#00CFE8; }
.why-page-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.why-page-three article { background:#F6F9FA; border-color:#E4EBEF; }
.why-page-three .why-page-index { color:#00899A; }
.why-page-quote { margin-top:40px; padding:38px 44px; border-left:4px solid #00CFE8; background:rgba(255,255,255,.07); font-family:Roboto,sans-serif; font-size:clamp(21px,2.5vw,30px); font-weight:750; line-height:1.5; letter-spacing:-.025em; }

.why-page-fact { display:grid; grid-template-columns:145px 1fr; gap:25px; margin-top:35px; padding:28px 34px; background:#0B132B; color:#fff; border-radius:12px; align-items:start; }
.why-page-fact span { color:#00CFE8; font-size:11px; font-weight:800; letter-spacing:.15em; }
.why-page-fact p { color:#fff; font-size:15px; line-height:1.85; }
.why-page-table-scroll { overflow-x:auto; border:1px solid rgba(255,255,255,.16); border-radius:14px; }
.why-page-material-table { border-collapse:collapse; width:100%; min-width:680px; text-align:left; }
.why-page-material-table th,.why-page-material-table td { padding:22px 24px; font-size:14px; line-height:1.7; border-bottom:1px solid rgba(255,255,255,.13); vertical-align:top; }
.why-page-material-table thead th { background:#00CFE8; color:#0B132B; font-family:Roboto,sans-serif; font-size:14px; font-weight:800; }
.why-page-material-table tbody th { color:#fff; width:20%; font-weight:750; }
.why-page-material-table tbody td { color:rgba(255,255,255,.78); width:40%; }
.why-page-material-table tbody tr:last-child>* { border-bottom:0; }
.why-page-material-copy { margin-top:60px; max-width:900px; }
.why-page-material-copy h3 { color:#fff; font-size:30px; }
.why-page-material-copy p { color:rgba(255,255,255,.76); font-size:15px; }
.why-page-closing { display:block; margin-top:30px; font-family:Roboto,sans-serif; color:#00CFE8; font-size:22px; line-height:1.5; }
.why-page-narrative { max-width:900px; }
.why-page-narrative p { font-size:15px; }
.why-page-narrative h3 { margin-top:38px; font-size:26px; }
.why-page-narrative blockquote { margin:32px 0 40px; padding:24px 30px; border-left:4px solid #00CFE8; background:#F2F7F9; font-family:Roboto,sans-serif; font-size:23px; font-weight:750; line-height:1.5; }
.why-page-process { list-style:none; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:28px 0 45px; padding:0; }
.why-page-process li { min-height:116px; display:flex; flex-direction:column; justify-content:space-between; gap:14px; padding:18px 15px; background:#0B132B; border-radius:8px; color:#fff; }
.why-page-process li span { color:#00CFE8; font-size:11px; font-weight:800; }
.why-page-process li strong { font-family:Roboto,sans-serif; font-size:13px; line-height:1.35; }
@media(max-width:1000px){.why-page-cards,.why-page-three{grid-template-columns:repeat(2,minmax(0,1fr));}.why-page-process{grid-template-columns:repeat(3,minmax(0,1fr));}.why-page-hero-inner{grid-template-columns:1fr .65fr;}}
@media(max-width:700px){.why-page-hero-inner{grid-template-columns:1fr; min-height:0; padding-block:80px 60px; gap:0;}.why-page-hero-art{min-height:180px; transform:scale(.7); margin:-30px 0;}.why-page-section{padding:70px 0 80px;}.why-page-section-head{margin-bottom:32px;}.why-page-cards,.why-page-article-grid,.why-page-three,.why-page-statement,.why-page-fact{grid-template-columns:1fr;}.why-page-card,.why-page-article-grid article{padding:26px;}.why-page-card-num,.why-page-index{margin-bottom:22px;}.why-page-statement{gap:12px;padding:26px;}.why-page-fact{gap:10px;padding:25px;}.why-page-process{grid-template-columns:repeat(2,minmax(0,1fr));}.why-page-quote{padding:26px;font-size:22px;}.why-page-narrative blockquote{font-size:20px;}}
@media(prefers-reduced-motion:reduce){.why-page *{scroll-behavior:auto;transition:none!important;}}

/* Why Choose ODS hero: actual aligner product image */
.why-page-hero-product { min-height:370px; display:flex; align-items:center; justify-content:center; transform:none; margin:0; }
.why-page-hero-product::before { content:none; }
.why-page-hero-product img { display:block; width:min(100%,510px); height:auto; max-height:460px; object-fit:contain; filter:drop-shadow(0 22px 35px rgba(0,207,232,.12)); }
@media (max-width:700px) {
  .why-page-hero-product { min-height:0; transform:none; margin:20px auto 0; width:100%; }
  .why-page-hero-product img { width:min(100%,380px); max-height:340px; }
}

/* =========================================================
   WHY CHOOSE ODS - PREMIUM PAGE REFINEMENTS
   Scoped to .why-page; homepage and shared navigation unaffected.
   Palette: #0B132B, #00CFE8, #FFFFFF
========================================================= */
.why-page { overflow:clip; }
.why-page .why-page-section { scroll-margin-top:24px; }
.why-page .why-page-section-head { max-width:960px; margin-bottom:42px; }
.why-page .why-page-section-head h2 { max-width:900px; text-wrap:balance; }
.why-page .why-page-section-head p { max-width:840px; }

/* Hero - product centred with balanced proportions */
.why-page .why-page-hero-inner { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); min-height:540px; gap:35px; padding-block:72px; }
.why-page .why-page-hero-product { min-height:0; }
.why-page .why-page-hero-product img { width:min(100%,590px); max-height:500px; object-fit:contain; }

/* Cause cards - editorial typography, minimal chrome, tighter rhythm */
.why-page-etiology .why-page-cards { gap:18px; align-items:stretch; }
.why-page-etiology .why-page-card {
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  padding:30px 30px 32px; border:1px solid rgba(11,19,43,.13);
  border-radius:12px; background:#FFFFFF;
  box-shadow:0 10px 28px rgba(11,19,43,.025);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.why-page-etiology .why-page-card:hover { transform:translateY(-4px); border-color:rgba(0,207,232,.55); box-shadow:0 20px 40px rgba(11,19,43,.08); }
.why-page-etiology .why-page-card-num { margin:0 0 27px; color:#07869A; font-size:11px; }
.why-page-etiology .why-page-card-num::after { content:""; display:block; width:30px; height:2px; background:#00CFE8; margin-top:15px; }
.why-page-etiology .why-page-card h3 { margin:0 0 14px; font-family:Roboto,sans-serif; font-size:clamp(18px,1.5vw,21px); line-height:1.4; }
.why-page-etiology .why-page-card p { margin:0; font-size:14px; line-height:1.85; }
.why-page-etiology .why-page-statement {
  margin-top:34px; padding:35px 40px; gap:40px; grid-template-columns:1.1fr .9fr;
  border:0; border-top:3px solid #00CFE8; border-radius:12px;
  background:#0B132B; color:#FFFFFF;
}
.why-page-etiology .why-page-statement p { color:rgba(255,255,255,.79); font-size:14px; line-height:1.85; }
.why-page-etiology .why-page-statement p strong { color:#FFFFFF; }
.why-page-etiology .why-page-statement>strong { color:#FFFFFF; font-size:clamp(19px,2vw,25px); line-height:1.45; letter-spacing:-.025em; }

/* Other page sections - consistent borders, spacing, hierarchy */
.why-page .why-page-article-grid { gap:18px; }
.why-page .why-page-article-grid article { padding:34px; }
.why-page .why-page-article-grid .why-page-index { margin-bottom:24px; }
.why-page .why-page-three article { background:#FFFFFF; border:1px solid rgba(11,19,43,.12); box-shadow:0 12px 30px rgba(11,19,43,.035); }
.why-page .why-page-quote { border-left-width:3px; }
.why-page .why-page-material-table tbody tr:hover { background:rgba(255,255,255,.045); }
.why-page .why-page-process li { border-radius:10px; }
.why-page .why-page-narrative { max-width:930px; }

@media (max-width:1000px) {
  .why-page .why-page-hero-inner { grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:22px; }
  .why-page-etiology .why-page-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .why-page .why-page-hero-inner { display:grid; grid-template-columns:minmax(0,1fr); min-height:0; gap:28px; padding-block:52px 42px; }
  .why-page .why-page-hero h1 { font-size:clamp(38px,10vw,56px); margin-bottom:18px; }
  .why-page .why-page-hero p { font-size:15px; line-height:1.8; }
  .why-page .why-page-hero-link { margin-top:24px; }
  .why-page .why-page-hero-product { width:100%; min-height:0; margin:0; transform:none; }
  .why-page .why-page-hero-product img { width:min(100%,430px); max-height:none; }
  .why-page .why-page-section { padding-block:72px; }
  .why-page .why-page-section-head { margin-bottom:30px; }
  .why-page-etiology .why-page-cards { grid-template-columns:1fr; gap:14px; }
  .why-page-etiology .why-page-card { padding:26px; }
  .why-page-etiology .why-page-card-num { margin-bottom:20px; }
  .why-page-etiology .why-page-statement { grid-template-columns:1fr; gap:18px; padding:28px 26px; }
  .why-page .why-page-article-grid article { padding:26px; }
  .why-page .why-page-process { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:380px) {
  .why-page .why-page-hero h1 { font-size:37px; }
  .why-page .why-page-process { grid-template-columns:1fr 1fr; }
}

/* ==========================================
   ODS ALIGNERS
   SECTION 03 - TREATMENT PHILOSOPHY
   Premium visual refinements
   ========================================== */

/* Three information cards */
.why-page #braces .why-page-article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    margin-top: 42px;
}

/* Individual card */
.why-page #braces .why-page-article-grid > article {
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 32px 30px;
    background: #FFFFFF;
    border: 1px solid rgba(11, 19, 43, 0.11);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(11, 19, 43, 0.025);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

/* Subtle hover */
@media (hover: hover) {
    .why-page #braces .why-page-article-grid > article:hover {
        transform: translateY(-3px);
        border-color: rgba(11, 19, 43, 0.2);
        box-shadow: 0 12px 30px rgba(11, 19, 43, 0.07);
    }
}

/* Card numbering */
.why-page #braces .why-page-index {
    display: block;
    margin-bottom: 22px;
    color: #00CFE8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* Card titles */
.why-page #braces .why-page-article-grid h3 {
    margin: 0 0 18px;
    color: #0B132B;
    font-family: 'Roboto', sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

/* Paragraph readability */
.why-page #braces .why-page-article-grid p {
    margin: 0 0 16px;
    line-height: 1.85;
}

.why-page #braces .why-page-article-grid p:last-child {
    margin-bottom: 0;
}

/* Key Fact panel */
.why-page #braces .why-page-fact {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: start;
    gap: 32px;
    margin-top: 32px;
    padding: 30px 34px;
    background: #0B132B;
    color: #FFFFFF;
    border-radius: 12px;
}

/* Key Fact label */
.why-page #braces .why-page-fact > span {
    color: #00CFE8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.8;
}

/* Key Fact text */
.why-page #braces .why-page-fact p {
    margin: 0;
    color: #FFFFFF;
    font-size: 15px;
    line-height: 1.8;
}

/* Tablet */
@media (max-width: 1000px) {
    .why-page #braces .why-page-article-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 700px) {
    .why-page #braces .why-page-article-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 28px;
    }

    .why-page #braces .why-page-article-grid > article {
        padding: 26px 22px;
    }

    .why-page #braces .why-page-article-grid h3 {
        font-size: 19px;
    }

    .why-page #braces .why-page-fact {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 26px 22px;
        margin-top: 24px;
    }

    .why-page #braces .why-page-fact p {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .why-page #braces .why-page-article-grid > article {
        transition: none;
    }

    .why-page #braces .why-page-article-grid > article:hover {
        transform: none;
    }
}

/* =========================================================
   WHY CHOOSE ODS - FINAL CONSOLIDATED PAGE FINISHES
   Applies only inside .why-page; homepage styling unchanged.
   ========================================================= */

/* Section 02: restore accessible contrast, without !important hacks */
.why-page #biology .why-page-quote {
    background: #142440;
    color: #FFFFFF;
    border-left: 4px solid #00CFE8;
    border-radius: 0 12px 12px 0;
    padding: 34px 40px;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.5;
}

/* Section 04: preserve the complete comparison table while refining its finish */
.why-page #materials .why-page-section-head h2 > span {
    display: block;
}
.why-page #materials .why-page-table-scroll {
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 20px 55px rgba(0,0,0,.09);
}
.why-page #materials .why-page-material-table thead th {
    padding: 20px 24px;
    letter-spacing: -.01em;
}
.why-page #materials .why-page-material-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,.025);
}
.why-page #materials .why-page-material-table tbody tr:hover {
    background: rgba(255,255,255,.055);
}
.why-page #materials .why-page-material-table tbody th,
.why-page #materials .why-page-material-table tbody td {
    padding: 23px 24px;
    border-bottom-color: rgba(255,255,255,.10);
}
.why-page #materials .why-page-material-copy {
    max-width: 960px;
    margin-top: 48px;
    padding: 38px 42px;
    background: #142440;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
}
.why-page #materials .why-page-material-copy h3 {
    margin-bottom: 20px;
}
.why-page #materials .why-page-closing {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(0,207,232,.35);
}
@media (max-width: 700px) {
    .why-page #biology .why-page-quote {
        padding: 24px;
        font-size: 20px;
    }
    .why-page #materials .why-page-material-copy {
        padding: 26px 22px;
        margin-top: 32px;
    }
    .why-page #materials .why-page-material-table {
        min-width: 680px;
    }
}

/* =========================================================
   OUR PRODUCTS / OEM - Page scoped, shared homepage unaffected
   ========================================================= */
.ods-products-page { --op-navy:#0B132B; --op-cyan:#00CFE8; --op-muted:#617087; font-family:Roboto,Arial,sans-serif; color:var(--op-navy); overflow:hidden; }
.ods-products-page h1,.ods-products-page h2,.ods-products-page h3,.ods-products-page h4 {font-family:Roboto,Arial,sans-serif;letter-spacing:-.045em;line-height:1.17;}
.ods-products-page p {line-height:1.85;}
.ods-products-page em {font-style:normal;color:#48cce5;}
.op-eyebrow {display:block;color:#00a6be;font-weight:800;font-size:11px;letter-spacing:.2em;margin-bottom:20px;}
.op-hero {background:#0B132B;color:#fff;overflow:hidden;position:relative;}
.op-hero-grid {min-height:570px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-block:72px;}
.op-hero h1 {font-size:clamp(58px,7vw,100px);line-height:1.04;margin:0 0 34px;}
.op-hero .op-eyebrow {color:#00CFE8;}
.op-jumplinks {display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;}
.op-jumplinks a {border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:15px 16px;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:space-between;transition:.25s;}
.op-jumplinks a span {color:#00CFE8;}
.op-jumplinks a:hover {border-color:#00CFE8;background:rgba(0,207,232,.08);}
.op-hero-visual {min-height:370px;position:relative;display:grid;place-items:center;}
.op-hero-visual .op-orbit {position:absolute;width:390px;aspect-ratio:1;border:1px solid rgba(0,207,232,.25);border-radius:50%;box-shadow:0 0 0 48px rgba(0,207,232,.025),0 0 0 100px rgba(0,207,232,.02);}
.op-hero-visual img {position:relative;z-index:1;width:min(100%,550px);max-height:400px;object-fit:contain;filter:drop-shadow(0 25px 35px rgba(0,207,232,.18));}
.op-visual-tag {position:absolute;right:0;bottom:15px;color:#00CFE8;font-size:11px;letter-spacing:.18em;font-weight:700;}
.op-section {padding:110px 0;scroll-margin-top:24px;}
.op-section .op-title-row {display:flex;justify-content:space-between;gap:25px;align-items:start;margin-bottom:50px;}
.op-title-row h2 {font-size:clamp(40px,5vw,67px);margin:0 0 18px;}
.op-title-row h3 {font-size:clamp(19px,2vw,26px);font-weight:600;letter-spacing:-.025em;}
.op-number {font-size:clamp(78px,12vw,180px);line-height:.8;opacity:.07;font-family:Roboto,sans-serif;font-weight:800;}
.op-prose p {margin:0 0 20px;font-size:15px;color:#52637a;}
.op-prose strong {color:#0B132B;}
.op-split {display:grid;grid-template-columns:1.07fr .93fr;gap:65px;align-items:start;}
.op-benefit-panel {border:1px solid #dceaf1;border-radius:18px;background:#f4fafc;padding:36px 40px;}
.op-benefit-panel .op-mini {display:block;color:#008ea7;letter-spacing:.18em;font-size:11px;font-weight:800;margin-bottom:16px;}
.op-benefit-panel h4 {font-size:23px;margin-bottom:24px;}
.op-benefit-panel ul,.op-planning-checklist ul {list-style:none;padding:0;margin:0;}
.op-benefit-panel li,.op-planning-checklist li {position:relative;padding:13px 0 13px 25px;border-bottom:1px solid rgba(11,19,43,.08);font-size:14px;line-height:1.6;}
.op-benefit-panel li:last-child,.op-planning-checklist li:last-child {border:0;}
.op-benefit-panel li::before,.op-planning-checklist li::before {content:'';position:absolute;left:0;top:23px;width:7px;height:7px;background:#00CFE8;border-radius:100%;}
.op-takeaway {margin-top:42px;background:#0B132B;color:#fff;padding:30px 38px;border-left:4px solid #00CFE8;border-radius:0 12px 12px 0;}
.op-takeaway p {font-family:Roboto,sans-serif;font-size:clamp(17px,2vw,23px);line-height:1.6;margin:0;}
.op-flx {background:#0B132B;color:#fff;}
.op-flx .op-title-row h3,.op-flx .op-title-row h2,.op-flx .op-prose strong {color:#fff;}
.op-flx .op-eyebrow {color:#00CFE8;}
.op-flx .op-prose p {color:#b9c4d4;}
.op-flx-intro {max-width:930px;}
.op-flx-intro h3 {font-size:25px;margin:32px 0 16px;color:#fff;}
.op-table-head {margin:62px 0 25px;}.op-table-head h3 {font-size:32px;}
.op-table-wrap {overflow-x:auto;border:1px solid rgba(255,255,255,.19);border-radius:15px;scrollbar-color:#00CFE8 #142440;}
.op-compare {width:100%;min-width:700px;border-collapse:collapse;text-align:left;}
.op-compare thead {background:#5acfe4;color:#0B132B;}
.op-compare thead th {padding:23px 24px;font-size:14px;}
.op-compare tbody th,.op-compare tbody td {padding:23px 24px;border-bottom:1px solid rgba(255,255,255,.14);vertical-align:top;line-height:1.7;font-size:14px;}
.op-compare tbody tr:last-child th,.op-compare tbody tr:last-child td {border-bottom:0;}
.op-compare tbody th {color:white;width:23%;font-weight:700;}
.op-compare tbody td {color:#c2cbd9;}
.op-compare tbody tr:nth-child(even) {background:rgba(255,255,255,.035);}
.op-footnote {margin:16px 0 0;color:#aab9c8;font-size:12px;line-height:1.7;}
.op-flx-reasons {display:grid;grid-template-columns:1.1fr .9fr;gap:55px;margin-top:75px;align-items:start;}
.op-flx-reasons h3 {font-size:30px;margin-bottom:23px;}
.op-flx-reasons .op-prose ul {margin:16px 0 24px;padding-left:21px;color:#d1d9e5;}
.op-flx-reasons .op-prose li {margin:10px 0;line-height:1.7;}
.op-choice {background:#182845;border:1px solid rgba(255,255,255,.12);border-radius:17px;padding:39px;}
.op-choice h3 {color:#fff;}.op-choice p {color:#ccd5df;font-size:14px;margin-bottom:21px;}.op-choice strong {color:#fff;}
.op-choice-end {display:block;color:#00CFE8!important;font-size:21px;font-family:Roboto,sans-serif;border-top:1px solid rgba(0,207,232,.25);padding-top:20px;line-height:1.55;}
.op-planning {background:#f5f9fc;}
.op-planning-grid {display:grid;grid-template-columns:1fr .85fr;gap:90px;}
.op-planning-checklist {border:1px solid #dce8ef;border-radius:17px;background:white;padding:24px 36px;}
.op-planning-bottom {margin-top:45px;border-top:1px solid #d8e3eb;padding-top:40px;max-width:1000px;}
.op-planning-conclusion {display:block;color:#0B132B;font:700 clamp(19px,2.3vw,27px)/1.5 Roboto,sans-serif;margin-top:31px;padding-left:22px;border-left:4px solid #00CFE8;}
.op-oem {background:#0B132B;color:white;}
.op-oem-grid {display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center;}
.op-oem .op-eyebrow {color:#00CFE8;}.op-oem h2 {font-size:clamp(39px,5vw,65px);}.op-oem h3 {font-size:26px;margin:20px 0 28px;color:#fff;}
.op-oem p {max-width:700px;font-size:15px;color:#c5d0dd;margin:18px 0;}.op-oem p strong {color:#fff;}
.op-oem-steps {background:rgba(0,207,232,.08);border:1px solid rgba(0,207,232,.3);border-radius:12px;padding:22px;color:#8ee7f2;font-weight:650;line-height:2;margin:27px 0;}
.op-cta {display:inline-flex;gap:30px;align-items:center;justify-content:space-between;background:#00CFE8;color:#0B132B;border-radius:8px;padding:16px 24px;margin-top:22px;font-size:14px;font-weight:800;}
.op-cta:hover {background:#fff;}
.op-oem-art {height:390px;position:relative;display:grid;place-items:center;}.op-oem-orbit {position:absolute;border:1px solid rgba(0,207,232,.18);border-radius:50%;width:320px;aspect-ratio:1;}.op-oem-orbit-b {width:430px;opacity:.6;}.op-oem-circle {width:225px;height:225px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#254563,#0B132B);border:1px solid rgba(0,207,232,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;font:800 56px Roboto,sans-serif;box-shadow:0 0 90px rgba(0,207,232,.1);}.op-oem-circle span {color:#00CFE8;font-size:17px;letter-spacing:.22em;}
.op-oem-standalone {padding:105px 0;}.op-oem-standalone h1 {font-size:clamp(50px,6vw,80px);}.op-oem-full {max-width:1000px!important;}.op-oem-full h2 {font-size:clamp(33px,4vw,55px);margin-bottom:30px;}.op-oem-full p {font-size:17px;line-height:1.8;margin:25px 0;}.op-oem-full .op-oem-steps {background:#e9f7fa;color:#0B132B;}.op-oem-full .op-cta:hover {background:#0B132B;color:white;}
@media(max-width:1000px) {.op-hero-grid,.op-split,.op-flx-reasons,.op-planning-grid,.op-oem-grid {grid-template-columns:1fr;gap:38px;}.op-hero-grid {padding-block:60px;}.op-hero-visual {min-height:280px;}.op-oem-art {height:250px;}.op-oem-orbit {width:220px;}.op-oem-orbit-b {width:290px;}.op-oem-circle {width:160px;height:160px;font-size:42px;}}
@media(max-width:700px) {.op-section {padding:72px 0;}.op-hero-grid {min-height:0;}.op-hero h1 {font-size:clamp(46px,11vw,65px);}.op-hero-visual img {max-height:260px;}.op-hero-visual .op-orbit {width:260px;}.op-title-row .op-number {display:none;}.op-title-row h2 {font-size:clamp(35px,9vw,48px);}.op-section .op-title-row {margin-bottom:32px;}.op-jumplinks {grid-template-columns:1fr;}.op-benefit-panel,.op-choice {padding:25px 22px;}.op-takeaway {padding:23px 25px;}.op-flx-reasons {margin-top:50px;}.op-table-head {margin-top:48px;}.op-planning-checklist {padding:15px 24px;}.op-planning-bottom {margin-top:35px;padding-top:30px;}.op-oem-art {display:none;}.op-oem-standalone {padding:80px 0;}}
@media(prefers-reduced-motion:reduce) {.op-jumplinks a {transition:none;}}

/* =============================================================
   ABOUT US PAGE - isolated to .about-page
   Shared homepage and Why Choose styles remain unchanged.
   ============================================================= */
.about-page{--about-navy:#0B132B;--about-cyan:#00CFE8;--about-ink:#1C2F4A;--about-muted:#66768A;font-family:Roboto,Arial,sans-serif;overflow:hidden}
.about-page h1,.about-page h2,.about-page h3{font-family:Roboto,Arial,sans-serif;letter-spacing:-.035em}
.about-page img{max-width:100%;display:block}
.about-page .about-eyebrow{display:block;margin-bottom:19px;color:#00A9BF;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.about-page h2{font-size:clamp(34px,3.65vw,53px);font-weight:800;line-height:1.16;color:var(--about-ink)}
.about-page h2 span{color:#008FA5}
.about-page p{font-size:15px;line-height:1.88}
.about-page .about-section{padding:105px 0}
.about-page .about-hero{background:#0B132B;color:#fff;position:relative;isolation:isolate;overflow:hidden}
.about-page .about-hero:before{content:"";position:absolute;width:65vw;height:65vw;max-width:850px;max-height:850px;right:-22%;top:-65%;background:radial-gradient(circle,rgba(0,207,232,.13),transparent 65%);z-index:-1}
.about-page .about-hero-grid{min-height:620px;display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center;padding-block:75px}
.about-page .about-hero .about-eyebrow,.about-page .about-dark .about-eyebrow,.about-page .about-final .about-eyebrow,.about-page .about-range .about-eyebrow{color:var(--about-cyan)}
.about-page .about-hero h1{font-size:clamp(42px,4.45vw,66px);font-weight:800;line-height:1.1;letter-spacing:-.052em;margin:0 0 25px;max-width:770px}
.about-page .about-hero h1 span,.about-page .about-final h2 span,.about-page .about-dark h2 span,.about-page .about-range h2 span{color:var(--about-cyan)}
.about-page .about-hero p{max-width:640px;color:rgba(255,255,255,.78);margin:0 0 14px}
.about-page .about-button{margin-top:23px;display:inline-flex;align-items:center;gap:28px;background:var(--about-cyan);color:#0B132B;min-height:50px;padding:0 23px;border-radius:7px;font-size:13px;font-weight:800;transition:transform .2s,background .2s}
.about-page .about-button:hover{transform:translateY(-2px);background:#fff}
.about-page .about-hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:430px}
.about-page .about-hero-visual:before{content:"";width:78%;aspect-ratio:1;position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(0,207,232,.12),transparent 70%);border:1px solid rgba(0,207,232,.12)}
.about-page .about-hero-visual img{position:relative;width:min(100%,540px);max-height:510px;object-fit:contain;filter:drop-shadow(0 18px 45px rgba(0,0,0,.3))}
.about-page .about-hero-visual-caption{position:absolute;bottom:5%;right:5%;font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--about-cyan)}
.about-page .about-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:start}
.about-page .about-richtext p{margin:0 0 17px;color:#526378;font-size:16px;line-height:1.85}
.about-page .about-section-heading{position:sticky;top:35px}
.about-page .about-range{background:#132541;color:#fff;padding:76px 0}
.about-page .about-range-grid{display:grid;grid-template-columns:1fr .72fr;gap:65px;align-items:center}
.about-page .about-range h2{color:#fff;margin-bottom:25px}
.about-page .about-range p{max-width:650px;color:rgba(255,255,255,.76);font-size:16px}
.about-page .about-range-visual{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0B132B;aspect-ratio:5/4}
.about-page .about-range-visual img{height:100%;width:100%;object-fit:cover}
.about-page .about-section-intro{max-width:850px;margin-bottom:48px}
.about-page .about-section-intro p{max-width:810px;margin-top:16px;color:var(--about-muted)}
.about-page .about-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.about-page .about-service{display:flex;flex-direction:column;padding:38px 30px;border:1px solid #E0E8EE;border-radius:15px;background:#fff;box-shadow:0 13px 35px rgba(11,19,43,.035)}
.about-page .about-count{display:block;color:#00A9BF;font-size:12px;font-weight:800;letter-spacing:.1em;margin-bottom:35px}
.about-page .about-service h3,.about-page .about-audience-grid h3{font-size:21px;line-height:1.4;color:var(--about-ink);margin:0 0 19px}
.about-page .about-service p{color:#607085;font-size:14px;margin:0 0 14px;line-height:1.8}
.about-page .about-text-link{display:inline-flex;align-items:center;gap:14px;margin-top:auto;padding-top:16px;color:#008FA5;font-size:13px;font-weight:800}
.about-page .about-text-link:hover{text-decoration:underline}
.about-page .about-dark{background:#0B132B;color:#fff}
.about-page .about-dark h2{color:#fff}
.about-page .about-dark .about-section-intro p{color:rgba(255,255,255,.72)}
.about-page .about-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.about-page .about-steps article{border-top:2px solid rgba(0,207,232,.65);padding:26px 15px 12px 0}
.about-page .about-steps article>span{color:var(--about-cyan);font-weight:800;font-size:12px;letter-spacing:.1em}
.about-page .about-steps h3{color:#fff;font-size:17px;margin:24px 0 12px;line-height:1.35}
.about-page .about-steps p{color:rgba(255,255,255,.67);font-size:13px;line-height:1.75}
.about-page .about-workflow-note{border-top:1px solid rgba(255,255,255,.15);padding-top:26px;margin-top:35px;color:rgba(255,255,255,.8)}
.about-page .about-tech-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:85px;align-items:center}
.about-page .about-tech-image{min-height:550px;border-radius:20px;overflow:hidden;background:#132541}
.about-page .about-tech-image img{width:100%;height:100%;min-height:550px;object-fit:cover}
.about-page .about-tech-copy h2{margin-bottom:26px}
.about-page .about-tech-copy p{color:#596A7F;margin-bottom:15px}
.about-page .about-audience{background:#F5F9FC}
.about-page .about-audience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.about-page .about-audience-grid article{padding:34px 34px 36px;background:#fff;border:1px solid #E3EBF1;border-radius:12px}
.about-page .about-audience-grid article>span{color:#00A9BF;font-size:12px;font-weight:800;display:block;margin-bottom:25px}
.about-page .about-audience-grid p{color:#65768A;font-size:14px}
.about-page .about-values-list{display:grid;grid-template-columns:1fr 1fr;column-gap:65px}
.about-page .about-values-list article{display:grid;grid-template-columns:42px 1fr;gap:13px;border-top:1px solid #DFE8EF;padding:27px 0}
.about-page .about-values-list article>span{color:#00A9BF;font-size:12px;font-weight:800;padding-top:3px}
.about-page .about-values-list h3{font-size:19px;margin-bottom:9px;color:var(--about-ink)}
.about-page .about-values-list p{font-size:14px;color:#627387}
.about-page .about-final{background:#132541;color:#fff;padding:85px 0}
.about-page .about-final-inner{display:flex;align-items:center;justify-content:space-between;gap:65px}
.about-page .about-final-inner>div{max-width:790px}
.about-page .about-final h2{color:#fff;margin:0 0 22px}
.about-page .about-final p{color:rgba(255,255,255,.73);max-width:720px}
.about-page .about-final .about-button{flex-shrink:0;white-space:nowrap}
@media(max-width:1100px){.about-page .about-service-grid{grid-template-columns:1fr 1fr}.about-page .about-service-grid article:last-child{grid-column:1/-1}.about-page .about-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.about-page .about-split{gap:55px}.about-page .about-tech-grid{gap:45px}}
@media(max-width:800px){.about-page .about-hero-grid,.about-page .about-split,.about-page .about-range-grid,.about-page .about-tech-grid{grid-template-columns:1fr}.about-page .about-hero-grid{gap:10px;padding-block:65px 20px}.about-page .about-hero-visual{min-height:300px}.about-page .about-hero-visual img{max-height:380px}.about-page .about-section-heading{position:static}.about-page .about-range-grid{gap:35px}.about-page .about-tech-image,.about-page .about-tech-image img{min-height:320px}.about-page .about-final-inner{flex-direction:column;align-items:flex-start;gap:15px}}
@media(max-width:600px){.about-page .about-section{padding:70px 0}.about-page h2{font-size:clamp(29px,8vw,39px)}.about-page .about-hero h1{font-size:clamp(35px,9vw,47px)}.about-page .about-hero-grid{padding-top:55px}.about-page .about-hero p,.about-page .about-range p,.about-page .about-richtext p{font-size:14px}.about-page .about-hero-visual{min-height:230px}.about-page .about-hero-visual img{max-height:300px}.about-page .about-range{padding:60px 0}.about-page .about-section-intro{margin-bottom:31px}.about-page .about-service-grid,.about-page .about-audience-grid,.about-page .about-values-list,.about-page .about-steps{grid-template-columns:1fr}.about-page .about-service-grid article:last-child{grid-column:auto}.about-page .about-service{padding:29px 23px}.about-page .about-count{margin-bottom:22px}.about-page .about-steps{gap:0}.about-page .about-steps article{padding:22px 0}.about-page .about-steps h3{margin-top:13px}.about-page .about-audience-grid article{padding:26px 23px}.about-page .about-final{padding:65px 0}.about-page .about-final .about-button{white-space:normal}}
@media(prefers-reduced-motion:reduce){.about-page .about-button{transition:none}.about-page .about-button:hover{transform:none}}


/* =========================================================
   CONTACT US — scoped styles; all existing pages preserved
   ========================================================= */
.contact-page{--contact-navy:#0B132B;--contact-cyan:#00CFE8;--contact-ink:#1C2F4A;--contact-muted:#65768A;overflow:hidden;font-family:Roboto,Arial,sans-serif}
.contact-page h1,.contact-page h2,.contact-page h3{font-family:Roboto,Arial,sans-serif;letter-spacing:-.04em}
.contact-page .contact-eyebrow{display:block;color:#008FA5;font-size:11px;letter-spacing:.16em;font-weight:800;margin-bottom:22px}
.contact-page h2{font-size:clamp(32px,3.9vw,53px);line-height:1.14;color:var(--contact-ink);font-weight:800}
.contact-page h2 span{color:#008FA5}
.contact-page .contact-hero{background:var(--contact-navy);color:#fff;position:relative;overflow:hidden}
.contact-page .contact-hero:after{content:"";position:absolute;right:-20%;top:-110%;width:900px;height:900px;border:1px solid rgba(0,207,232,.12);border-radius:50%;pointer-events:none}
.contact-page .contact-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:75px;padding:108px 0 110px}
.contact-page .contact-hero .contact-eyebrow,.contact-page .contact-final .contact-eyebrow{color:var(--contact-cyan)}
.contact-page .contact-hero h1{font-size:clamp(46px,5.1vw,75px);line-height:1.06;letter-spacing:-.058em;font-weight:800;max-width:800px;margin-bottom:28px}
.contact-page .contact-hero h1 span,.contact-page .contact-final h2 span{color:var(--contact-cyan)}
.contact-page .contact-hero p{font-size:16px;line-height:1.85;color:rgba(255,255,255,.73);max-width:620px}
.contact-page .contact-hero-link{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;color:#0B132B;background:var(--contact-cyan);font-size:13px;font-weight:800;padding:16px 24px;border-radius:7px;margin-top:32px}
.contact-page .contact-hero-link:hover{background:#fff}
.contact-page .contact-hero-panel{background:rgba(255,255,255,.045);padding:36px;border:1px solid rgba(255,255,255,.16);border-radius:19px;position:relative;z-index:1}
.contact-page .contact-panel-kicker{display:block;color:var(--contact-cyan);letter-spacing:.17em;font-size:11px;font-weight:800;margin-bottom:24px}
.contact-page .contact-hero-panel>div{display:grid;grid-template-columns:50px 1fr;gap:20px;align-items:center;padding:23px 0;border-top:1px solid rgba(255,255,255,.15)}
.contact-page .contact-hero-panel>div span{color:var(--contact-cyan);font-size:12px;font-weight:800}
.contact-page .contact-hero-panel>div strong{font-size:17px;font-family:Roboto,Arial,sans-serif;line-height:1.4}
.contact-page .contact-main-section{padding:110px 0;background:#fff}
.contact-page .contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:start}
.contact-page .contact-intro>h2{max-width:490px;margin-bottom:22px}
.contact-page .contact-intro>p{color:var(--contact-muted);font-size:15px;line-height:1.8;max-width:500px}
.contact-page .contact-method{display:flex;gap:19px;padding:27px 0;border-bottom:1px solid #DFE8EE}
.contact-page .contact-method:first-of-type{margin-top:40px;border-top:1px solid #DFE8EE}
.contact-page .contact-method-symbol{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:#E8FAFD;color:#008FA5;font-size:23px}
.contact-page .contact-method h3{font-size:19px;color:var(--contact-ink);margin:0 0 4px}
.contact-page .contact-method p{color:var(--contact-muted);font-size:13px;line-height:1.65;margin-bottom:8px}
.contact-page .contact-method a{color:#007F99;font-weight:700;font-size:14px;overflow-wrap:anywhere}
.contact-page .contact-method a:hover{text-decoration:underline}
.contact-page .contact-intro .contact-smallprint{font-size:12px;margin-top:35px;color:#768597}
.contact-page .contact-form-card{background:#F5F9FC;border:1px solid #DFE8EF;border-radius:19px;padding:48px 46px 42px;box-shadow:0 18px 48px rgba(11,19,43,.035)}
.contact-page .contact-form-top{display:flex;justify-content:space-between;gap:16px;color:#008FA5;font-size:10px;letter-spacing:.15em;font-weight:800;margin-bottom:24px}
.contact-page .contact-form-card h2{font-size:clamp(27px,3vw,39px);margin-bottom:12px}
.contact-page .contact-form-note{color:#65768A;font-size:13px;line-height:1.7;margin-bottom:30px}
.contact-page .contact-field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.contact-page .contact-field{margin-bottom:19px;min-width:0}
.contact-page .contact-field label{display:block;margin-bottom:8px;font-size:12px;font-weight:700;color:#1C2F4A}
.contact-page .contact-field label span{color:#008FA5}
.contact-page .contact-field input,.contact-page .contact-field select,.contact-page .contact-field textarea{display:block;width:100%;min-width:0;border:1px solid #CFDCE6;border-radius:7px;background:#fff;color:#1C2F4A;font:inherit;font-size:13px;padding:13px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.contact-page .contact-field select{min-height:49px}
.contact-page .contact-field textarea{min-height:125px;resize:vertical}
.contact-page .contact-field input:focus,.contact-page .contact-field select:focus,.contact-page .contact-field textarea:focus{border-color:#008FA5;box-shadow:0 0 0 3px rgba(0,207,232,.16)}
.contact-page .contact-consent{display:flex;align-items:flex-start;gap:11px;color:#586A7E;font-size:12px;line-height:1.6;margin:2px 0 23px;cursor:pointer}
.contact-page .contact-consent input{accent-color:#008FA5;flex:none;margin-top:3px;width:16px;height:16px}
.contact-page .contact-submit{display:flex;align-items:center;justify-content:space-between;gap:25px;width:100%;padding:16px 20px;background:var(--contact-navy);color:#fff;border:1px solid var(--contact-navy);border-radius:7px;font-weight:800;font-size:13px;cursor:pointer;transition:background .2s}
.contact-page .contact-submit:hover{background:#008FA5;border-color:#008FA5}
.contact-page .contact-form-status{min-height:19px;margin-top:12px;color:#526A7B;font-size:12px}
.contact-page .contact-pathways{padding:105px 0 115px;background:#F5F9FC}
.contact-page .contact-section-head{margin-bottom:42px}
.contact-page .contact-path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.contact-page .contact-path-grid a{background:#fff;border:1px solid #E0E9EF;border-radius:15px;padding:36px 29px;min-height:285px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.contact-page .contact-path-grid a:hover{transform:translateY(-4px);border-color:#00AFC5}
.contact-page .contact-path-grid a>span{font-size:10px;letter-spacing:.13em;font-weight:800;color:#008FA5;margin-bottom:32px}
.contact-page .contact-path-grid h3{color:var(--contact-ink);font-size:21px;line-height:1.3;margin-bottom:13px}
.contact-page .contact-path-grid p{color:#607286;font-size:13px;line-height:1.75;margin-bottom:24px}
.contact-page .contact-path-grid strong{color:#008FA5;font-size:13px;margin-top:auto}
.contact-page .contact-final{background:#132541;padding:90px 0;color:#fff}
.contact-page .contact-final-grid{display:flex;justify-content:space-between;align-items:center;gap:65px}
.contact-page .contact-final h2{color:#fff;margin-bottom:17px}
.contact-page .contact-final p{color:rgba(255,255,255,.7);max-width:620px;line-height:1.8;font-size:15px}
.contact-page .contact-final-grid>a{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;padding:17px 25px;background:#00CFE8;color:#0B132B;border-radius:7px;font-weight:800;font-size:13px;flex:none}
.contact-page .contact-final-grid>a:hover{background:#fff}
@media(max-width:1000px){.contact-page .contact-hero-grid{gap:38px}.contact-page .contact-layout{gap:38px}.contact-page .contact-form-card{padding:36px 28px}.contact-page .contact-path-grid a{padding:28px 22px}}
@media(max-width:800px){.contact-page .contact-hero-grid,.contact-page .contact-layout{grid-template-columns:1fr}.contact-page .contact-hero-grid{padding:77px 0;gap:40px}.contact-page .contact-hero-panel{max-width:600px}.contact-page .contact-main-section,.contact-page .contact-pathways{padding:75px 0}.contact-page .contact-layout{gap:48px}.contact-page .contact-path-grid{grid-template-columns:1fr 1fr}.contact-page .contact-path-grid a:last-child{grid-column:1/-1}.contact-page .contact-final-grid{flex-direction:column;align-items:flex-start;gap:30px}}
@media(max-width:560px){.contact-page .contact-hero-grid{padding:64px 0}.contact-page .contact-hero h1{font-size:clamp(39px,10.3vw,53px)}.contact-page .contact-hero p{font-size:14px}.contact-page .contact-hero-panel{padding:23px}.contact-page .contact-hero-panel>div{padding:18px 0}.contact-page .contact-form-card{padding:28px 19px}.contact-page .contact-field-row,.contact-page .contact-path-grid{grid-template-columns:1fr}.contact-page .contact-path-grid a:last-child{grid-column:auto}.contact-page .contact-path-grid a{min-height:240px}.contact-page .contact-final{padding:70px 0}.contact-page .contact-hero-panel>div strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.contact-page *{scroll-behavior:auto}.contact-page .contact-path-grid a:hover{transform:none}}


/* OEM confirmed capabilities — additions to the one shared stylesheet */
.oem-confirmed{background:#f4f9fc}
.oem-confirmed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:42px}
.oem-confirmed-grid article{background:#fff;border:1px solid #deebf2;border-radius:17px;padding:34px 29px;min-width:0}
.oem-confirmed-grid article span{display:block;font-size:10px;font-weight:800;letter-spacing:.13em;color:#008ea6;margin-bottom:25px}
.oem-confirmed-grid article h3{font-family:Roboto,Arial,sans-serif;font-size:23px;line-height:1.26;letter-spacing:-.035em;color:#0B132B;margin:0 0 14px}
.oem-confirmed-grid article p{color:#66768A;font-size:13px;line-height:1.78;margin:0}
.oem-confirmed-note{margin:24px 0 0;font-size:12px;color:#66768A;line-height:1.7}
.oem-confirmed-hero{margin-top:20px!important;font-size:12px!important;font-weight:700!important;color:#00CFE8!important;letter-spacing:.025em}
.oem-confirmed-hero span{padding:0 10px}
@media(max-width:900px){.oem-confirmed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.oem-confirmed-grid{grid-template-columns:1fr;gap:13px}.oem-confirmed-grid article{padding:27px 23px}.oem-confirmed-hero span{padding:0 5px}}


/* ============================================================
   OEM CONTRACT MANUFACTURING — restored dedicated page styling
   Scoped to .ods-oem-page; all other website styles untouched.
   ============================================================ */
.ods-oem-page{--oem-navy:#0B132B;--oem-cyan:#00CFE8;--oem-ink:#1C2F4A;--oem-muted:#617389;overflow:hidden;font-family:Roboto,Arial,sans-serif;color:var(--oem-ink)}
.ods-oem-page h1,.ods-oem-page h2,.ods-oem-page h3{font-family:Roboto,Arial,sans-serif;letter-spacing:-.045em}
.ods-oem-page .oem-kicker{display:block;font-size:11px;letter-spacing:.16em;font-weight:800;text-transform:uppercase;color:#008ba2;margin-bottom:19px}
.ods-oem-page h2{font-size:clamp(34px,4.1vw,56px);line-height:1.12;font-weight:800;margin:0 0 20px}
.ods-oem-page h2 span{color:#078fa7}
.ods-oem-page p{font-size:15px;line-height:1.82}
.ods-oem-page .oem-btn{display:inline-flex;align-items:center;justify-content:center;gap:19px;min-height:52px;padding:14px 22px;border-radius:7px;font-size:13px;line-height:1.3;font-weight:800;text-align:center;transition:background .2s,color .2s,transform .2s}
.ods-oem-page .oem-btn-cyan{background:var(--oem-cyan);color:var(--oem-navy)}
.ods-oem-page .oem-btn-cyan:hover{background:#fff;color:var(--oem-navy);transform:translateY(-2px)}
.ods-oem-page .oem-hero{position:relative;background:var(--oem-navy);color:#fff;isolation:isolate;overflow:hidden}
.ods-oem-page .oem-hero:before{content:"";position:absolute;width:850px;height:850px;right:-15%;top:-55%;border:1px solid rgba(0,207,232,.14);border-radius:50%;pointer-events:none;z-index:-1}
.ods-oem-page .oem-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:40px;min-height:620px;padding:85px 0 68px}
.ods-oem-page .oem-hero-copy{position:relative;z-index:2;padding-block:18px}
.ods-oem-page .oem-hero .oem-kicker{color:var(--oem-cyan)}
.ods-oem-page .oem-hero h1{font-size:clamp(48px,5.15vw,74px);line-height:1.06;letter-spacing:-.057em;font-weight:800;max-width:690px;margin:0 0 26px;color:#fff}
.ods-oem-page .oem-hero h1 span{color:var(--oem-cyan)}
.ods-oem-page .oem-hero-lead{max-width:640px;color:rgba(255,255,255,.77);font-size:16px;line-height:1.83;margin:0 0 28px}
.ods-oem-page .oem-hero-lead strong{color:#fff;font-weight:700}
.ods-oem-page .oem-hero-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}
.ods-oem-page .oem-plain-link{color:#fff;font-size:13px;font-weight:700;display:inline-flex;gap:11px;align-items:center;border-bottom:1px solid rgba(255,255,255,.35);padding:10px 0}
.ods-oem-page .oem-plain-link:hover{color:var(--oem-cyan)}
.ods-oem-page .oem-confirmed-hero{margin-top:35px;color:var(--oem-cyan);font-size:12px;font-weight:700;letter-spacing:.02em}
.ods-oem-page .oem-confirmed-hero span{padding:0 10px}
.ods-oem-page .oem-hero-art{position:relative;display:grid;place-items:center;min-height:450px;max-height:550px;align-self:center;overflow:visible}
.ods-oem-page .oem-hero-halo{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(0,207,232,.18) 0%,rgba(0,207,232,.055) 43%,transparent 70%);filter:blur(4px)}
.ods-oem-page .oem-hero-art img{position:relative;display:block;width:100%;max-width:610px;height:480px;object-fit:contain;filter:drop-shadow(0 22px 24px rgba(0,0,0,.22))}
.ods-oem-page .oem-hero-footer{display:flex;justify-content:space-between;gap:25px;align-items:center;border-top:1px solid rgba(255,255,255,.15);padding:20px 0 23px;color:rgba(255,255,255,.62);letter-spacing:.11em;font-size:10px;font-weight:700}
.ods-oem-page .oem-section{padding:105px 0}
.ods-oem-page .oem-intro-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:95px;align-items:start}
.ods-oem-page .oem-prose{padding-top:27px}
.ods-oem-page .oem-prose p{color:#52657B;font-size:16px;margin-bottom:18px}
.ods-oem-page .oem-prose .oem-support-note{border-left:3px solid var(--oem-cyan);padding-left:20px;margin-top:29px;font-size:14px}
.ods-oem-page .oem-services{background:#F4F8FB}
.ods-oem-page .oem-heading{max-width:790px;margin-bottom:43px}
.ods-oem-page .oem-heading>p{color:#63768A}
/* OEM workflow cards: premium compact grid, existing shared CSS */
.ods-oem-page .oem-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ods-oem-page .oem-service{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:0;padding:25px 26px 27px;background:#fff;border:1px solid #DCE7EF;border-radius:16px;box-shadow:0 8px 25px rgba(22,47,75,.025);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.ods-oem-page .oem-service:hover{transform:translateY(-4px);border-color:#70d4e5;box-shadow:0 17px 36px rgba(17,49,75,.08)}
.ods-oem-page .oem-service-no{position:absolute;top:29px;right:27px;margin:0;color:#078fa7;font-size:11px;font-weight:800;letter-spacing:.11em}
.ods-oem-page .oem-service-symbol{width:56px;height:56px;display:grid;place-items:center;margin:0 0 22px;border-radius:13px;background:#E7F9FC;color:#078fa7}
.ods-oem-page .oem-service-symbol svg{display:block;width:27px;height:27px}
.ods-oem-page .oem-service h3{font-size:20px;line-height:1.35;margin:0 0 10px;color:#1C2F4A}
.ods-oem-page .oem-service p{margin:0;color:#64768A;font-size:13px;line-height:1.72}
.ods-oem-page .oem-audience-grid p{color:#64768A;font-size:13px;line-height:1.75}
.ods-oem-page .oem-exact-flow{display:block;margin:26px 0 13px;padding:22px 25px;background:#1C2F4A;color:#fff;border:1px solid rgba(0,207,232,.22);border-left:4px solid var(--oem-cyan);border-radius:12px;font-size:14px;font-weight:700;line-height:1.9;letter-spacing:.005em;overflow-wrap:anywhere}
.ods-oem-page .oem-footnote{color:#718096;font-size:12px;line-height:1.7;margin-top:17px}
.ods-oem-page .oem-audience{background:#fff}
.ods-oem-page .oem-audience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.ods-oem-page .oem-audience-grid article{padding:35px 30px;border:1px solid #DEE7ED;border-radius:15px;min-height:235px}
.ods-oem-page .oem-audience-grid article>span{display:block;font-size:11px;color:#008FA5;letter-spacing:.12em;font-weight:800;margin-bottom:25px}
.ods-oem-page .oem-audience-grid h3{font-size:20px;margin-bottom:12px}
.ods-oem-page .oem-process{background:#0B132B;color:#fff}
.ods-oem-page .oem-process-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:start}
.ods-oem-page .oem-process .oem-kicker,.ods-oem-page .oem-clinical .oem-kicker,.ods-oem-page .oem-final .oem-kicker{color:var(--oem-cyan)}
.ods-oem-page .oem-process h2,.ods-oem-page .oem-final h2{color:#fff}
.ods-oem-page .oem-process h2 span,.ods-oem-page .oem-final h2 span{color:var(--oem-cyan)}
.ods-oem-page .oem-process-lead>p{color:rgba(255,255,255,.73);margin-bottom:28px}
.ods-oem-page .oem-timeline{border-top:1px solid rgba(255,255,255,.18)}
.ods-oem-page .oem-timeline > div{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:25px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.ods-oem-page .oem-timeline > div > span{color:var(--oem-cyan);font-weight:800;font-size:12px}
.ods-oem-page .oem-timeline h3{color:#fff;font-size:19px;margin:0 0 8px}
.ods-oem-page .oem-timeline p{font-size:13px;color:rgba(255,255,255,.68)}
.ods-oem-page .oem-process .oem-footnote{color:rgba(255,255,255,.6)}
.ods-oem-page .oem-clinical{background:#F4F8FB}
.ods-oem-page .oem-clinical-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}
.ods-oem-page .oem-clinical-grid p{color:#62758A;margin-bottom:20px}
.ods-oem-page .oem-clinical-image{position:relative;border-radius:20px;overflow:hidden;background:#0B132B;min-height:360px}
.ods-oem-page .oem-clinical-image img{display:block;width:100%;height:420px;object-fit:cover}
.ods-oem-page .oem-clinical-image span{position:absolute;bottom:24px;left:24px;background:#0B132B;color:#00CFE8;font-size:11px;letter-spacing:.09em;padding:12px 18px;font-weight:800}
.ods-oem-page .oem-faq-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:88px;align-items:start}
.ods-oem-page .oem-faq-grid>div:first-child>p{color:#65768A}
.ods-oem-page .oem-faq-items{border-top:1px solid #DCE6EE}
.ods-oem-page .oem-faq-items details{border-bottom:1px solid #DCE6EE;padding:0}
.ods-oem-page .oem-faq-items summary{list-style:none;cursor:pointer;padding:22px 31px 22px 0;font-weight:700;color:#1C2F4A;font-size:15px;position:relative}
.ods-oem-page .oem-faq-items summary::-webkit-details-marker{display:none}
.ods-oem-page .oem-faq-items summary:after{content:'+';position:absolute;right:0;top:20px;font-size:23px;color:#008FA5;font-weight:500}
.ods-oem-page .oem-faq-items details[open] summary:after{content:'−'}
.ods-oem-page .oem-faq-items details p{padding:0 24px 22px 0;color:#61748A;font-size:13px;line-height:1.8}
.ods-oem-page .oem-final{background:#132541;color:#fff;padding:86px 0}
.ods-oem-page .oem-final-grid{display:flex;justify-content:space-between;align-items:center;gap:60px}
.ods-oem-page .oem-final-grid>div:first-child{max-width:720px}
.ods-oem-page .oem-final p{color:rgba(255,255,255,.72);max-width:630px}
.ods-oem-page .oem-final-grid>div:last-child{display:flex;flex-direction:column;gap:18px;align-items:flex-start;flex:none}
.ods-oem-page .oem-final-whatsapp{color:#fff;border-bottom:1px solid rgba(255,255,255,.45);font-size:13px;font-weight:700;padding-bottom:5px}
@media(max-width:1050px){.ods-oem-page .oem-hero-grid{gap:20px;min-height:550px}.ods-oem-page .oem-hero-art img{height:400px}.ods-oem-page .oem-intro-grid,.ods-oem-page .oem-process-grid,.ods-oem-page .oem-faq-grid{gap:45px}.ods-oem-page .oem-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.ods-oem-page .oem-hero-grid{grid-template-columns:1fr;min-height:0;padding:70px 0 30px;gap:14px}.ods-oem-page .oem-hero-art{min-height:270px;max-height:330px}.ods-oem-page .oem-hero-art img{height:310px;max-width:470px}.ods-oem-page .oem-hero-footer{flex-wrap:wrap}.ods-oem-page .oem-intro-grid,.ods-oem-page .oem-process-grid,.ods-oem-page .oem-clinical-grid,.ods-oem-page .oem-faq-grid{grid-template-columns:1fr;gap:28px}.ods-oem-page .oem-section{padding:75px 0}.ods-oem-page .oem-prose{padding:0}.ods-oem-page .oem-audience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ods-oem-page .oem-final-grid{flex-direction:column;align-items:flex-start;gap:35px}}
@media(max-width:550px){.ods-oem-page .oem-hero-grid{padding-top:56px}.ods-oem-page .oem-hero h1{font-size:clamp(39px,11vw,56px)}.ods-oem-page .oem-hero-lead{font-size:14px}.ods-oem-page .oem-hero-actions{align-items:flex-start;flex-direction:column;gap:12px}.ods-oem-page .oem-confirmed-hero{margin-top:25px}.ods-oem-page .oem-hero-art{min-height:230px;max-height:280px}.ods-oem-page .oem-hero-art img{height:270px}.ods-oem-page .oem-hero-footer{font-size:9px}.ods-oem-page .oem-section{padding:65px 0}.ods-oem-page .oem-service-grid,.ods-oem-page .oem-audience-grid{grid-template-columns:1fr}.ods-oem-page .oem-service{padding:23px 21px}.ods-oem-page .oem-clinical-image{min-height:260px}.ods-oem-page .oem-clinical-image img{height:300px}.ods-oem-page .oem-final{padding:65px 0}}

/* Products hero refinement — scoped to the Products page only */
.ods-products-page .op-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: 34px;
}
.ods-products-page .op-hero-visual {
  min-width: 0;
  min-height: 0;
  overflow: visible;
}
.ods-products-page .op-hero-visual .op-orbit,
.ods-products-page .op-hero-visual .op-visual-tag {
  display: none;
}
.ods-products-page .op-hero-visual img {
  display: block;
  width: 106%;
  max-width: none;
  height: auto;
  max-height: 435px;
  object-fit: contain;
  object-position: center;
  border-radius: 3px;
  filter: none;
}
@media (max-width: 900px) {
  .ods-products-page .op-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ods-products-page .op-hero-visual {
    width: 100%;
  }
  .ods-products-page .op-hero-visual img {
    width: min(100%, 650px);
    max-width: 100%;
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    margin-inline: auto;
  }
}
@media (max-width: 700px) {
  .ods-products-page .op-hero-grid {
    padding-block: 58px 48px;
  }
  .ods-products-page .op-hero-visual img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
  }
}


/* ========================================================
   PRODUCTS / OEM INTRO: premium product composition
   Only affects OEM section within products.html
======================================================== */
.ods-products-page .op-oem-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(26px, 4vw, 70px);
}
.ods-products-page .op-oem-premium-art {
  position: relative;
  min-width: 0;
  height: clamp(390px, 38vw, 570px);
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: none;
  background: transparent;
}
.ods-products-page .op-oem-premium-art::before {
  content: "";
  position: absolute;
  inset: 14% 4% 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,207,232,.18) 0%, rgba(0,207,232,.07) 33%, transparent 69%);
  filter: blur(12px);
  z-index: -1;
}
.ods-products-page .op-oem-premium-art .op-oem-glow {
  position: absolute;
  width: 65%;
  height: 3px;
  bottom: 14%;
  left: 20%;
  border-radius: 50%;
  background: rgba(0,207,232,.3);
  box-shadow: 0 0 55px 19px rgba(0,207,232,.10);
  pointer-events: none;
}
.ods-products-page .op-oem-product-stage {
  width: 112%;
  max-width: 700px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ods-products-page .op-oem-product-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 28px 34px rgba(0,0,0,.28));
}
@media (max-width:1000px) {
  .ods-products-page .op-oem-grid {grid-template-columns: 1fr;gap:20px;}
  .ods-products-page .op-oem-premium-art {height:auto; min-height:0; padding:8px 0 0;}
  .ods-products-page .op-oem-product-stage {width: min(100%,680px);margin:0 auto;}
}
@media (max-width:600px) {
  .ods-products-page .op-oem-premium-art {padding:0; overflow:hidden;}
  .ods-products-page .op-oem-product-stage {width:100%;}
  .ods-products-page .op-oem-product-image {filter:drop-shadow(0 16px 18px rgba(0,0,0,.2));}
}

/* =========================================================
   PRODUCTS OEM SECTION — uploaded transparent OEM product
   This overrides legacy circle and uses existing site palette.
   ========================================================= */
.ods-products-page .op-oem-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.ods-products-page .op-oem-art.op-oem-image-wrap {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  max-width: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.ods-products-page .op-oem-image-wrap::before,
.ods-products-page .op-oem-image-wrap::after { content: none; display: none; }
.ods-products-page .op-oem-image {
  display: block;
  width: 100%;
  max-width: 650px;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 25px 30px rgba(0,0,0,.18));
}
@media (max-width: 950px) {
  .ods-products-page .op-oem-grid { grid-template-columns: 1fr; gap: 25px; }
  .ods-products-page .op-oem-art.op-oem-image-wrap { max-width: 650px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .ods-products-page .op-oem-art.op-oem-image-wrap { width: 100%; min-height: 0; }
  .ods-products-page .op-oem-image { max-width: 100%; }
}

/* =============================================================
  ODS Homepage Hero Slider | isolated from legacy .hero-section
  Six slides, keyboard arrows, touch swipe, accessible controls
============================================================= */
.ods-hero-slider{position:relative;isolation:isolate;background:#0B132B;color:#fff;overflow:hidden}
.ods-hero-slides{position:relative;min-height:690px}
.ods-hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s;pointer-events:none}
.ods-hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.ods-hero-art,.ods-hero-tint{position:absolute;inset:0}
.ods-hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:67% center}
.ods-hero-tint{background:linear-gradient(90deg,#0B132B 0%,rgba(11,19,43,.98) 26%,rgba(11,19,43,.89) 44%,rgba(11,19,43,.39) 70%,rgba(11,19,43,.08) 100%)}
.ods-hero-inner{position:relative;z-index:2;min-height:690px;display:flex;align-items:center;padding-top:35px;padding-bottom:85px}
.ods-hero-copy{width:min(57%,650px)}
.ods-hero-eyebrow{display:block;color:#00CFE8;font:700 12px/1.4 Roboto,sans-serif;letter-spacing:.18em;margin-bottom:22px}
.ods-hero-title{color:#fff;font:800 clamp(43px,5vw,74px)/1.06 Roboto,sans-serif;letter-spacing:-.055em;margin:0 0 24px}
.ods-hero-title span{color:#00CFE8}
.ods-hero-title sup{font-size:.3em;vertical-align:super}
.ods-hero-subtitle{font:600 clamp(18px,1.7vw,24px)/1.42 Roboto,sans-serif;margin-bottom:19px}
.ods-hero-body{max-width:540px;color:rgba(255,255,255,.82);font:400 15px/1.8 Roboto,sans-serif;margin-bottom:26px}
.ods-hero-body p+p{margin-top:10px}
.ods-hero-cta{display:inline-flex;align-items:center;gap:14px;border-radius:5px;background:#00CFE8;color:#0B132B;font:700 14px/1.2 Roboto,sans-serif;min-height:52px;padding:0 23px;transition:background .2s}
.ods-hero-cta:hover,.ods-hero-cta:focus-visible{background:#fff;color:#0B132B}
.ods-hero-note{font:400 11px/1.6 Roboto,sans-serif;color:rgba(255,255,255,.68);margin-top:17px;max-width:520px}
.ods-hero-navigation{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:6;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.ods-hero-dots,.ods-hero-controls{display:flex;align-items:center;gap:10px;pointer-events:auto}
.ods-hero-dot{width:26px;height:4px;border:0;border-radius:10px;background:rgba(255,255,255,.35);cursor:pointer;transition:background .2s,width .2s}
.ods-hero-dot.is-active{width:42px;background:#00CFE8}
.ods-hero-arrow{width:43px;height:43px;border:1px solid rgba(255,255,255,.35);background:rgba(11,19,43,.55);border-radius:50%;color:#fff;font-size:20px;cursor:pointer;transition:background .2s}
.ods-hero-arrow:hover{background:#00CFE8;color:#0B132B}
.ods-hero-counter{font:600 12px Roboto,sans-serif;letter-spacing:.13em;margin-right:10px;color:rgba(255,255,255,.8)}
.ods-hero-slider button:focus-visible,.ods-hero-slider a:focus-visible{outline:2px solid #00CFE8;outline-offset:4px}
@media(max-width:900px){.ods-hero-copy{width:67%}.ods-hero-slides,.ods-hero-inner{min-height:650px}.ods-hero-title{font-size:clamp(41px,5.8vw,61px)}}
@media(max-width:700px){
 .ods-hero-slides{min-height:765px}
 .ods-hero-slide{overflow:hidden}
 .ods-hero-inner{min-height:0;display:block;padding-top:45px;padding-bottom:240px}
 .ods-hero-copy{width:100%;max-width:none}
 .ods-hero-art{top:auto;bottom:0;height:315px}
 .ods-hero-art img{object-position:center center}
 .ods-hero-tint{background:linear-gradient(180deg,#0B132B 0%,#0B132B 51%,rgba(11,19,43,.93) 60%,rgba(11,19,43,.28) 81%,rgba(11,19,43,.05) 100%)}
 .ods-hero-title{font-size:clamp(35px,8.1vw,50px);margin-bottom:15px}
 .ods-hero-eyebrow{font-size:10px;margin-bottom:15px}
 .ods-hero-subtitle{font-size:17px;margin-bottom:12px}
 .ods-hero-body{font-size:13px;line-height:1.6;margin-bottom:15px}
 .ods-hero-body p+p{margin-top:8px}
 .ods-hero-cta{min-height:46px;padding:0 16px;font-size:12px}
 .ods-hero-note{font-size:10px;margin-top:12px}
 .ods-hero-navigation{bottom:19px}
 .ods-hero-counter{display:none}
 .ods-hero-arrow{width:37px;height:37px}
 .ods-hero-dot{width:18px}.ods-hero-dot.is-active{width:27px}
}
@media(max-width:390px){.ods-hero-slides{min-height:825px}.ods-hero-body{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){.ods-hero-slide,.ods-hero-dot{transition:none!important}}

/* =========================================================
   TYPOGRAPHY
   Roboto with a consistent desktop and mobile type scale.
   Layout, component dimensions and approved copy are unchanged.
========================================================= */
:root {
    --font-body: "Roboto", Arial, sans-serif;
    --font-heading: "Roboto", Arial, sans-serif;
}

body, button, input, textarea, select {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: -0.025em;
}

/* Main homepage slider */
.ods-hero-eyebrow { font: 700 12px/14px var(--font-body); letter-spacing: .5px; }
.ods-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(46px, 4.8vw, 68px);
    font-weight: 500;
    line-height: 1.07;
    letter-spacing: -1px;
}
.ods-hero-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.4px;
}
.ods-hero-body { font: 400 16px/1.5 var(--font-body); }
.ods-hero-cta { font-family: var(--font-body); }

/* Section titles and supporting text */
.smile-heading h2,
.journey-heading h2,
.why-ods-content h2,
.cost-intro h2,
.every-smile-content h2,
.ods-science-content h2,
.ods-proof-content h2,
.ods-faq-intro h2,
.ods-numbers-heading h2,
.section-heading h2,
.why-page .why-page-section-head h2 {
    font-family: var(--font-heading);
    font-size: clamp(36px, 3.6vw, 48px);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -1px;
}

.smile-heading > p, .journey-heading > p, .why-benefit p,
.cost-lead, .cost-provider-text, .smile-card > p,
.ods-proof-content p, .ods-faq-intro-text,
.why-page .why-page-section-head p, .why-page .why-page-narrative p {
    font-size: 16px;
    line-height: 1.5;
}

/* Individual website pages */
.why-page h1, .about-page .about-hero h1,
.contact-page .contact-hero h1, .ods-oem-page .oem-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(44px, 4.8vw, 64px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -1px;
}
.why-page h3, .about-page h3, .contact-page h3,
.ods-oem-page h3 { font-weight: 500; letter-spacing: -.025em; }

/* Keep small labels distinct without excessive tracking. */
.section-label, .section-eyebrow, .journey-eyebrow,
.why-page-kicker, .ods-proof-label, .ods-faq-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.25;
}

@media (max-width: 700px) {
    .ods-hero-title {
        font-size: 40px;
        font-weight: 400;
        line-height: 42px;
        letter-spacing: -1px;
    }
    .ods-hero-subtitle { font-size: 20px; line-height: 26px; }
    .ods-hero-body { font-size: 16px; line-height: 24px; }
    .ods-hero-eyebrow { font-size: 12px; line-height: 14px; }

    .smile-heading h2,
    .journey-heading h2,
    .why-ods-content h2,
    .cost-intro h2,
    .every-smile-content h2,
    .ods-science-content h2,
    .ods-proof-content h2,
    .ods-faq-intro h2,
    .ods-numbers-heading h2,
    .section-heading h2,
    .why-page .why-page-section-head h2 {
        font-size: 28px;
        font-weight: 500;
        line-height: 32px;
        letter-spacing: -1px;
    }

    .why-page h1, .about-page .about-hero h1,
    .contact-page .contact-hero h1, .ods-oem-page .oem-hero h1 {
        font-size: 40px;
        font-weight: 400;
        line-height: 42px;
        letter-spacing: -1px;
    }

    .smile-heading > p, .journey-heading > p, .why-benefit p,
    .cost-lead, .cost-provider-text, .smile-card > p,
    .ods-proof-content p, .ods-faq-intro-text,
    .why-page .why-page-section-head p, .why-page .why-page-narrative p {
        font-size: 16px;
        line-height: 24px;
    }
}


/* =========================================================
   SITE TYPOGRAPHY | 29 OCT 2026
   Roboto scale based on the approved mobile reference.
   These rules override older component-specific type sizes.
   Component spacing, colours and layouts remain unchanged.
========================================================= */

:root {
    --ods-font: "Roboto", Arial, sans-serif;
    --ods-type-body: 16px;
    --ods-type-leading: 24px;
}

html { -webkit-text-size-adjust: 100%; }
body, button, input, select, textarea { font-family: var(--ods-font); }

/* Paragraphs and supporting copy */
.hero-description p,
.ods-hero-body, .ods-hero-body p,
.smile-heading > p, .smile-card > p, .smile-supporting-content p,
.journey-heading > p, .journey-step p,
.cost-lead, .cost-provider-text,
.why-benefit p,
.every-smile-content p,
.ods-science-content > p, .science-description,
.ods-proof-content p,
.ods-faq-intro-text, .ods-faq-answer p,
.ods-numbers-heading p,
.why-page .why-page-hero p,
.why-page .why-page-section-head p,
.why-page .why-page-card p,
.why-page .why-page-article-grid p,
.why-page .why-page-material-copy p,
.why-page .why-page-narrative p,
.why-page .why-page-statement p,
.why-page .why-page-fact p,
.ods-products-page .op-prose p,
.ods-products-page .op-choice p,
.ods-products-page .op-oem p,
.about-page p,
.contact-page .contact-hero p,
.contact-page .contact-method p,
.contact-page .contact-path-grid p,
.contact-page .contact-final p,
.ods-oem-page p, .oem-confirmed-grid article p {
    font-family: var(--ods-font);
    font-size: var(--ods-type-body);
    font-weight: 400;
    line-height: var(--ods-type-leading);
}

/* Display, section and card headings */
.ods-hero-title,
.hero-content h1,
.why-page .why-page-hero h1,
.ods-products-page .op-hero h1,
.about-page .about-hero h1,
.contact-page .contact-hero h1,
.ods-oem-page .oem-hero h1 {
    font-family: var(--ods-font);
    font-size: clamp(46px, 4.8vw, 68px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -1px;
}

.smile-heading h2, .journey-heading h2, .why-ods-content h2,
.cost-intro h2, .every-smile-content h2, .ods-science h2,
.ods-proof-content h2, .ods-faq-intro h2, .ods-numbers-heading h2,
.section-heading h2, .ods-final-cta-content h2,
.why-page .why-page-section-head h2,
.ods-products-page .op-title-row h2,
.about-page h2, .contact-page h2, .ods-oem-page h2 {
    font-family: var(--ods-font);
    font-size: clamp(36px, 3.6vw, 48px);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -1px;
}

.smile-card h3, .journey-step h3, .why-benefit h3,
.why-page .why-page-card h3, .why-page .why-page-article-grid h3,
.why-page .why-page-material-copy h3, .why-page .why-page-narrative h3,
.about-page h3, .contact-page h3, .ods-oem-page h3,
.ods-products-page h3 {
    font-family: var(--ods-font);
    font-size: clamp(21px, 1.8vw, 26px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

/* Headings within the hero have a distinct visual hierarchy. */
.ods-hero-subtitle, .hero-content h2 {
    font-family: var(--ods-font);
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

/* Small uppercase labels */
.section-label, .section-eyebrow, .journey-eyebrow,
.why-page-kicker, .ods-proof-label, .ods-faq-eyebrow,
.ods-hero-eyebrow, .ods-numbers-eyebrow,
.ods-products-page .op-eyebrow {
    font-family: var(--ods-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.5px;
}

/* Keep legal notes, counters, buttons and navigation compact. */
.ods-footer, .ods-footer p, .ods-footer a { font-family: var(--ods-font); }

@media (max-width: 700px) {
    .ods-hero-title, .hero-content h1,
    .why-page .why-page-hero h1,
    .ods-products-page .op-hero h1,
    .about-page .about-hero h1,
    .contact-page .contact-hero h1,
    .ods-oem-page .oem-hero h1 {
        font-size: 40px;
        font-weight: 400;
        line-height: 42px;
        letter-spacing: -1px;
    }

    .smile-heading h2, .journey-heading h2, .why-ods-content h2,
    .cost-intro h2, .every-smile-content h2, .ods-science h2,
    .ods-proof-content h2, .ods-faq-intro h2, .ods-numbers-heading h2,
    .section-heading h2, .ods-final-cta-content h2,
    .why-page .why-page-section-head h2,
    .ods-products-page .op-title-row h2,
    .about-page h2, .contact-page h2, .ods-oem-page h2 {
        font-size: 28px;
        font-weight: 500;
        line-height: 32px;
        letter-spacing: -1px;
    }

    .smile-card h3, .journey-step h3, .why-benefit h3,
    .why-page .why-page-card h3, .why-page .why-page-article-grid h3,
    .why-page .why-page-material-copy h3, .why-page .why-page-narrative h3,
    .about-page h3, .contact-page h3, .ods-oem-page h3,
    .ods-products-page h3 {
        font-size: 22px;
        font-weight: 500;
        line-height: 28px;
        letter-spacing: -0.5px;
    }

    .ods-hero-subtitle, .hero-content h2 {
        font-size: 20px;
        line-height: 26px;
    }

    /* Mobile text matches the 16/24 reference throughout. */
    .hero-description p,
    .ods-hero-body, .ods-hero-body p,
    .smile-heading > p, .smile-card > p, .smile-supporting-content p,
    .journey-heading > p, .journey-step p,
    .cost-lead, .cost-provider-text, .why-benefit p,
    .every-smile-content p,
    .ods-science-content > p, .science-description,
    .ods-proof-content p,
    .ods-faq-intro-text, .ods-faq-answer p,
    .ods-numbers-heading p,
    .why-page .why-page-hero p, .why-page .why-page-section-head p,
    .why-page .why-page-card p, .why-page .why-page-article-grid p,
    .why-page .why-page-material-copy p, .why-page .why-page-narrative p,
    .why-page .why-page-statement p, .why-page .why-page-fact p,
    .ods-products-page .op-prose p, .ods-products-page .op-choice p,
    .ods-products-page .op-oem p,
    .about-page p,
    .contact-page .contact-hero p, .contact-page .contact-method p,
    .contact-page .contact-path-grid p, .contact-page .contact-final p,
    .ods-oem-page p, .oem-confirmed-grid article p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }
}
/* Why Choose ODS - Hero Product Image */

.why-page-hero-product img {
    display: block;
    width: 115%;
    max-width: none;
    height: auto;
    object-fit: contain;
    margin-left: -5%;
}

@media (max-width: 767px) {
    .why-page-hero-product img {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }
}


/* =============================================================
   WHY CHOOSE ODS - PREMIUM ETIOLOGY ILLUSTRATED CARDS
   Scoped only to #etiology; no effects on other pages.
   Images are in /redesign/images/etiology-*.webp.
============================================================= */
#etiology .why-page-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:18px;
}
#etiology .why-page-card.why-page-illustrated-card {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:block;
  padding:0;
  min-width:0;
  min-height:465px;
  background:linear-gradient(130deg,#fff 0%,#f7fbff 72%,#e9f7fc 100%);
  border:1px solid #d9e5ed;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(11,19,43,.045);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
#etiology .why-page-card.why-page-illustrated-card:hover {
  transform:translateY(-4px);
  border-color:#54cfe4;
  box-shadow:0 20px 42px rgba(11,19,43,.095);
}
#etiology .why-page-card-art {
  position:absolute;
  z-index:0;
  inset:0 0 0 auto;
  width:52%;
  overflow:hidden;
  pointer-events:none;
}
#etiology .why-page-card-art img {
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
#etiology .why-page-card-art::after {
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 14%,rgba(255,255,255,.75) 40%,rgba(255,255,255,.16) 85%);
}
#etiology .why-page-card-body {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:29px 28px 32px;
}
#etiology .why-page-card-num {margin:0 0 28px;color:#07879d;font-size:11px;}
#etiology .why-page-card-num::after {content:"";display:block;width:31px;height:2px;margin-top:15px;background:#00cfe8;}
#etiology .why-page-card h3 {margin:0 0 14px;max-width:100%;font-family:Roboto,Arial,sans-serif;font-size:clamp(21px,1.8vw,24px);line-height:1.25;letter-spacing:-.025em;color:#0b132b;}
#etiology .why-page-card p {
  width:100%;max-width:80%;margin:0;
  font-family:Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.62;color:#405370;
}
#etiology .why-page-card p strong {color:#334760;}
@media (min-width:1151px) and (max-width:1320px) {
  #etiology .why-page-card p {max-width:84%;font-size:14px;}
  #etiology .why-page-card-body {padding:27px 24px 30px;}
}
@media (max-width:1150px) {
  #etiology .why-page-cards {grid-template-columns:repeat(2,minmax(0,1fr));}
  #etiology .why-page-card.why-page-illustrated-card {min-height:390px;}
  #etiology .why-page-card p {max-width:78%;}
}
@media (max-width:700px) {
  #etiology .why-page-cards {grid-template-columns:1fr;gap:15px;}
  #etiology .why-page-card.why-page-illustrated-card {min-height:0;}
  #etiology .why-page-card-body {padding:27px 25px 30px;}
  #etiology .why-page-card-art {width:49%;opacity:.75;}
  #etiology .why-page-card-art::after {background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.94) 30%,rgba(255,255,255,.70) 80%);}
  #etiology .why-page-card p {max-width:90%;font-size:16px;line-height:24px;}
  #etiology .why-page-card h3 {font-size:22px;}
}
@media (prefers-reduced-motion:reduce){#etiology .why-page-card.why-page-illustrated-card{transition:none;}}

/* =========================================================
   WHY CHOOSE ODS - BIOMECHANICS VISUAL ENHANCEMENT
   Scoped to the existing #biology section only
   ========================================================= */
#biology .why-page-section-head { margin-bottom: 32px; }
#biology .ods-biomechanics-visual {
  position: relative;
  overflow: hidden;
  margin: 0 0 24px;
  border: 1px solid rgba(84,199,223,.45);
  border-radius: 16px;
  background: #102d4b;
  box-shadow: 0 16px 48px rgba(0,0,0,.16);
}
#biology .ods-biomechanics-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1372 / 232;
  object-fit: cover;
}
#biology .why-page-article-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
  align-items: stretch;
}
#biology .why-page-article-grid article {
  height: 100%;
  min-width: 0;
  padding: 31px 33px 28px;
  border: 1px solid rgba(120,165,204,.25);
  border-radius: 16px;
  background: linear-gradient(155deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  transition: border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
#biology .why-page-article-grid article:hover {
  transform: translateY(-3px);
  border-color: rgba(0,207,232,.5);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
#biology .why-page-article-grid h3 { margin-bottom: 14px; }
#biology .why-page-article-grid p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  #biology .why-page-section-head { margin-bottom: 26px; }
  #biology .ods-biomechanics-visual { margin-bottom: 18px; border-radius: 12px; }
  #biology .ods-biomechanics-visual img { height: 205px; aspect-ratio: auto; object-position: center; }
  #biology .why-page-article-grid { grid-template-columns: 1fr; gap: 14px; }
  #biology .why-page-article-grid article { padding: 25px 23px; }
}
@media (prefers-reduced-motion: reduce) {
  #biology .why-page-article-grid article { transition: none; }
  #biology .why-page-article-grid article:hover { transform: none; }
}

/* ODS Biomechanics: Mobile image aspect ratio fix */
@media (max-width: 767px) {

  #biology .ods-biomechanics-visual {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    overflow: hidden;
  }

  #biology .ods-biomechanics-visual img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto;
    object-fit: contain !important;
    object-position: center;
  }

}

/* FINAL FIX: Why Material Matters full-width */

.why-page #materials .container > .why-page-material-copy {
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* ODS Why Choose Page: Technology section alignment */

.why-page #technology > .container > .why-page-section-head,
.why-page #technology .why-page-narrative,
.why-page #technology .ods-dual-flow {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* =========================================
   ODS PRODUCTS PAGE
   FLX and Treatment Planning width fixes
========================================= */

/* FLX Aligners */
.ods-products-page .op-flx .op-flx-intro {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Treatment Planning bottom content */
.ods-products-page .op-planning .op-planning-bottom {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Keep content inside the section */
.ods-products-page .op-flx-intro,
.ods-products-page .op-planning-bottom {
    box-sizing: border-box;
}

/* Mobile */
@media (max-width: 767px) {
    .ods-products-page .op-flx-intro,
    .ods-products-page .op-planning-bottom {
        width: 100%;
        max-width: 100%;
    }
}

/* OEM workflow: respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){.ods-oem-page .oem-service{transition:none}.ods-oem-page .oem-service:hover{transform:none}}