/* ==========================================================================
   Smilexis - clear aligner theme
   Palette taken from the Smilexis logo: navy wordmark, azure-to-cyan swoosh,
   on a soft porcelain background. The legacy "sky" and "orange" token names are
   kept so existing markup keeps working: "sky" is the azure/navy family and
   "orange" is now the cyan accent.
   ========================================================================== */

:root {
    --sky: #2385C7;
    --sky-dark: #1B6BAE;
    --sky-deep: #0F3C89;
    --sky-soft: #E6F1FA;
    --orange: #00B4D0;
    --orange-dark: #008FAE;
    --orange-soft: #E0F7FA;
    --mint: #5AD1E0;
    --ink: #0A1F44;
    --body: #56677F;
    --porcelain: #F5F9FC;
    --line: #E2ECF5;
    --white: #FFFFFF;

    --grad-sky: linear-gradient(135deg, #2385C7 0%, #1B5FA8 50%, #0A2A5E 100%);
    --grad-warm: linear-gradient(135deg, #12C6DC 0%, #1E8FCB 100%);
    --shadow-sm: 0 4px 16px rgba(10, 42, 94, .06);
    --shadow-md: 0 14px 40px rgba(10, 42, 94, .10);
    --shadow-lg: 0 28px 70px rgba(10, 42, 94, .16);
    --radius: 20px;
    --ease: cubic-bezier(.22, 1, .36, 1);

    --heading-font: 'Outfit', 'Segoe UI', system-ui, sans-serif;
    --body-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- base ---------- */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    color: var(--body);
    background-color: var(--porcelain);
    font-size: 1.02rem;
    line-height: 1.7;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--heading-font);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

a {
    text-decoration: none;
}

::selection {
    background: var(--sky);
    color: #fff;
}

.text-sky-blue { color: var(--sky-deep) !important; }
.text-sky { color: var(--sky) !important; }
.text-orange { color: var(--orange) !important; }
.text-mint { color: var(--mint) !important; }
.text-soft { color: var(--body) !important; }
.bg-sky-blue { background: var(--grad-sky) !important; }
.bg-orange { background: var(--orange) !important; }
.bg-porcelain { background: var(--porcelain) !important; }
.bg-sky-soft { background: var(--sky-soft) !important; }

.section {
    padding: 5.5rem 0;
}

@media (max-width: 767.98px) {
    .section { padding: 3.5rem 0; }
}

.section-eyebrow {
    font-family: var(--heading-font);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

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

.section-title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    margin: .75rem 0 1rem;
}

.lead-muted {
    color: var(--body);
    font-size: 1.08rem;
    max-width: 46rem;
}

/* ---------- buttons ---------- */

.btn {
    font-family: var(--heading-font);
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 50rem;
    padding: .7rem 1.6rem;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s ease, color .3s ease;
}

.btn-orange {
    background: var(--grad-warm);
    border: none;
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 180, 208, .28);
}

.btn-orange:hover,
.btn-orange:focus {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(0, 180, 208, .38);
}

.btn-sky {
    background: var(--sky);
    border: none;
    color: #fff;
    box-shadow: 0 10px 24px rgba(35, 133, 199, .26);
}

.btn-sky:hover,
.btn-sky:focus {
    color: #fff;
    background: var(--sky-dark);
    transform: translateY(-3px);
}

.btn-outline-sky {
    border: 2px solid var(--sky);
    color: var(--sky-dark);
    background: transparent;
}

.btn-outline-sky:hover {
    background: var(--sky);
    color: #fff;
    transform: translateY(-3px);
}

.btn-outline-light:hover {
    color: var(--sky-deep);
    transform: translateY(-3px);
}

.badge-pill-soft {
    display: inline-block;
    font-family: var(--heading-font);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .4rem .9rem;
    border-radius: 50rem;
}

.badge-orange { background: var(--orange-soft); color: var(--orange-dark); }
.badge-sky { background: var(--sky-soft); color: var(--sky-dark); }

/* ---------- utility top bar ---------- */
/* Deep navy running into azure, the same direction as the logo swoosh. */

.topbar {
    background: linear-gradient(90deg, #0A2A5E 0%, var(--sky-deep) 55%, var(--sky-dark) 100%);
    color: rgba(255, 255, 255, .78);
    font-size: .85rem;
    padding: .45rem 0;
    position: relative;
    z-index: 1;
}

.topbar-item {
    color: rgba(255, 255, 255, .78);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: color .3s ease;
}

.topbar-item:hover { color: #fff; }
.topbar-item--plain { pointer-events: none; }
.topbar-item span[aria-hidden] { color: var(--mint); }

.topbar-cta {
    color: #fff;
    font-weight: 600;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50rem;
    padding: .15rem .85rem;
    transition: background .3s ease, border-color .3s ease;
}

.topbar-cta:hover {
    background: var(--grad-warm);
    border-color: transparent;
    color: #fff;
}

/* ---------- navbar ---------- */
/* The strip is the same white as the logo artwork, and its height is set by the
   logo itself, so the mark reads as part of the bar rather than a tile on it. */

.site-nav {
    --brand-h: 68px;
    background: #fff;
    transition: padding .35s var(--ease), box-shadow .35s ease;
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.site-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sky-deep) 0%, var(--sky) 45%, var(--orange) 100%);
    pointer-events: none;
}

.site-nav.is-scrolled {
    --brand-h: 54px;
    padding-top: .3rem;
    padding-bottom: .3rem;
    box-shadow: var(--shadow-md);
}

/* ---------- brand ---------- */

.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

.brand-logo {
    display: block;
    height: var(--brand-h, 68px);
    width: auto;
    transition: height .35s var(--ease), transform .5s var(--ease);
}

.navbar-brand:hover .brand-logo {
    transform: scale(1.03);
}

@keyframes crest-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 575.98px) {
    .site-nav { --brand-h: 50px; }
    .site-nav.is-scrolled { --brand-h: 44px; }
}

.site-nav .nav-link {
    font-family: var(--heading-font);
    font-weight: 600;
    color: var(--sky-deep);
    padding: .5rem .85rem !important;
    position: relative;
}

.site-nav .nav-link::after {
    content: "";
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .15rem;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s var(--ease);
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.site-nav .nav-link.active {
    color: var(--orange);
}

.site-nav .dropdown-toggle::after {
    margin-left: .35rem;
    vertical-align: .15em;
}

.site-dropdown {
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: .5rem;
    margin-top: .6rem;
}

.site-dropdown .dropdown-item {
    font-family: var(--heading-font);
    font-weight: 600;
    color: var(--sky-deep);
    border-radius: 10px;
    padding: .55rem .8rem;
}

.site-dropdown .dropdown-item:hover,
.site-dropdown .dropdown-item:focus {
    background: var(--sky-soft);
    color: var(--sky-dark);
}

.navbar-toggler {
    border: none;
    box-shadow: none !important;
}

/* ---------- hero ---------- */

.hero {
    position: relative;
    color: #fff;
    padding: 8rem 0 7rem;
    background:
        linear-gradient(115deg, rgba(10, 42, 94, .93) 0%, rgba(27, 107, 174, .82) 48%, rgba(35, 133, 199, .55) 100%),
        url('../images/photos/hero-treatment-planning.webp') center/cover no-repeat;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 90px;
    background: var(--porcelain);
    clip-path: ellipse(75% 100% at 50% 100%);
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .35;
    pointer-events: none;
}

.hero-orb--1 {
    width: 320px; height: 320px;
    right: -60px; top: -80px;
    background: radial-gradient(circle at 30% 30%, rgba(51, 211, 230, .9), transparent 62%);
    animation: orb-drift 14s ease-in-out infinite;
}

.hero-orb--2 {
    width: 260px; height: 260px;
    left: -70px; bottom: 30px;
    background: radial-gradient(circle at 60% 40%, rgba(90, 209, 224, .8), transparent 62%);
    animation: orb-drift 18s ease-in-out infinite reverse;
}

@keyframes orb-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-30px, 40px, 0) scale(1.12); }
}

.hero h1 {
    color: #fff;
    font-size: clamp(2.4rem, 5.4vw, 4.1rem);
    text-shadow: 0 6px 30px rgba(0, 0, 0, .25);
}

.hero .hero-lead {
    color: rgba(255, 255, 255, .9);
    font-size: 1.18rem;
    max-width: 34rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .9rem;
    padding: .45rem 1.1rem;
    border-radius: 50rem;
}

.hero-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 0 rgba(90, 209, 224, .7);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0% { box-shadow: 0 0 0 0 rgba(90, 209, 224, .7); }
    70% { box-shadow: 0 0 0 12px rgba(90, 209, 224, 0); }
    100% { box-shadow: 0 0 0 0 rgba(90, 209, 224, 0); }
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.hero-stat .value {
    font-family: var(--heading-font);
    font-size: 2.1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.hero-stat .label {
    font-size: .85rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

/* floating aligner card in the hero */
.hero-card {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(16px);
    border-radius: 24px;
    padding: 1.6rem;
    color: #fff;
    box-shadow: var(--shadow-lg);
    animation: card-float 6s ease-in-out infinite;
}

@keyframes card-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

.hero-card .hero-card-img {
    border-radius: 16px;
    overflow: hidden;
}

.hero-card img {
    width: 100%;
    display: block;
    transition: transform 1.2s var(--ease);
}

.hero-card:hover img {
    transform: scale(1.08);
}

/* ---------- page header (inner pages) ---------- */

.page-header {
    position: relative;
    background: var(--grad-sky);
    color: #fff;
    padding: 7.5rem 0 5rem;
    overflow: hidden;
    text-align: center;
}

.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .6;
    animation: grid-pan 26s linear infinite;
}

@keyframes grid-pan {
    from { background-position: 0 0; }
    to { background-position: 260px 260px; }
}

.page-header::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 70px;
    background: var(--porcelain);
    clip-path: ellipse(70% 100% at 50% 100%);
}

.page-header h1 {
    color: #fff;
    position: relative;
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
}

.page-header p {
    color: rgba(255, 255, 255, .88);
    position: relative;
    max-width: 40rem;
    margin: 0 auto;
}

.crumb {
    position: relative;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    font-family: var(--heading-font);
}

.crumb a { color: rgba(255, 255, 255, .75); }
.crumb a:hover { color: #fff; }

/* ---------- cards ---------- */

.custom-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease;
}

.custom-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-md);
    border-color: rgba(35, 133, 199, .35);
}

.feature-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.2rem 1.8rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--grad-warm);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}

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

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    margin-bottom: 1.2rem;
    background: var(--sky-soft);
    color: var(--sky-dark);
    transition: transform .5s var(--ease), background-color .4s ease;
}

.feature-icon.warm { background: var(--orange-soft); color: var(--orange); }

.feature-card:hover .feature-icon {
    transform: rotate(-8deg) scale(1.08);
}

/* image hover zoom, used across cards and the gallery */
.img-hover-zoom {
    overflow: hidden;
    border-radius: var(--radius);
    position: relative;
}

.img-hover-zoom img {
    display: block;
    width: 100%;
    transition: transform 1.1s var(--ease), filter .6s ease;
}

.img-hover-zoom:hover img {
    transform: scale(1.09);
    filter: saturate(1.12);
}

.img-hover-zoom::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(10, 42, 94, .35) 100%);
    opacity: 0;
    transition: opacity .5s ease;
}

.img-hover-zoom:hover::after { opacity: 1; }

.card-media {
    height: 220px;
    overflow: hidden;
    border-radius: 0;
}

.card-media img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* ---------- pricing ---------- */

.price-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 2.4rem 2rem;
    height: 100%;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.price-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-md);
}

.price-card.featured {
    background: var(--grad-sky);
    border-color: transparent;
    color: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-lg);
    z-index: 2;
}

.price-card.featured h3,
.price-card.featured .price-amount { color: #fff; }

.price-card.featured .price-features li { color: rgba(255, 255, 255, .9); }

.price-card.featured .price-features li::before {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

@media (min-width: 992px) {
    .price-card.featured { transform: scale(1.06); }
    .price-card.featured:hover { transform: scale(1.06) translateY(-10px); }
}

.price-amount {
    font-family: var(--heading-font);
    font-size: 3.1rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
    margin: 1.2rem 0;
}

.price-amount span {
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
    opacity: .7;
}

.price-features {
    list-style: none;
    padding: 0;
    margin: 1.8rem 0;
    text-align: left;
}

.price-features li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-bottom: .8rem;
    font-size: .97rem;
}

.price-features li::before {
    content: "\2713";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sky-soft);
    color: var(--sky-dark);
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 700;
    margin-top: .18rem;
}

.plan-ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--grad-warm);
    color: #fff;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .45rem 1.2rem;
    border-radius: 50rem;
    box-shadow: 0 8px 20px rgba(0, 180, 208, .35);
    white-space: nowrap;
}

/* ---------- treatment process timeline ---------- */

.process-track {
    position: relative;
    padding: 1rem 0;
}

.process-track::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    background: linear-gradient(180deg, var(--sky-soft), var(--sky) 45%, var(--orange));
    border-radius: 3px;
    transform-origin: top;
    transform: scaleY(var(--track-progress, 0));
    transition: transform .2s linear;
}

.process-step {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 96px 1fr;
    align-items: center;
    margin-bottom: 3.5rem;
}

.process-step:last-child { margin-bottom: 0; }

.process-marker {
    grid-column: 2;
    justify-self: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--sky-soft);
    display: grid;
    place-items: center;
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--sky-dark);
    box-shadow: var(--shadow-sm);
    z-index: 2;
    transition: transform .5s var(--ease), background .5s ease, color .4s ease, border-color .4s ease;
}

.process-step.is-visible .process-marker {
    background: var(--grad-sky);
    border-color: #fff;
    color: #fff;
    transform: scale(1.08);
}

.process-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.process-panel:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.process-panel .panel-body { padding: 1.7rem; }

.process-visual {
    grid-column: 3;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.process-visual img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease);
}

.process-visual:hover img { transform: scale(1.08) rotate(-1deg); }

.process-step:nth-child(even) .process-panel { grid-column: 3; }
.process-step:nth-child(even) .process-visual { grid-column: 1; grid-row: 1; }
.process-step:nth-child(odd) .process-panel { grid-column: 1; }

/* slide-in direction per side. Hidden only once site.js has run and set
   .reveal-ready on <html>: on a slow connection the steps stay readable
   instead of sitting invisible until the script arrives. */
.reveal-ready .process-step .process-panel,
.reveal-ready .process-step .process-visual {
    opacity: 0;
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal-ready .process-step:nth-child(odd) .process-panel { transform: translateX(-50px); }
.reveal-ready .process-step:nth-child(odd) .process-visual { transform: translateX(50px); }
.reveal-ready .process-step:nth-child(even) .process-panel { transform: translateX(50px); }
.reveal-ready .process-step:nth-child(even) .process-visual { transform: translateX(-50px); }

.reveal-ready .process-step.is-visible .process-panel,
.reveal-ready .process-step.is-visible .process-visual {
    opacity: 1;
    transform: translateX(0);
}

.process-visual { transition-delay: .12s; }

.process-timeframe {
    font-family: var(--heading-font);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--orange);
}

.process-details {
    list-style: none;
    padding: 0;
    margin: 1.1rem 0 0;
}

.process-details li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .45rem;
    font-size: .95rem;
}

.process-details li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
}

@media (max-width: 991.98px) {
    .process-track::before { left: 32px; }

    .process-step {
        grid-template-columns: 66px 1fr;
        gap: 1.2rem;
        margin-bottom: 2.5rem;
    }

    .process-marker { grid-column: 1; grid-row: 1; width: 56px; height: 56px; font-size: 1.05rem; }

    .process-step:nth-child(odd) .process-panel,
    .process-step:nth-child(even) .process-panel { grid-column: 2; grid-row: 1; }

    .process-step:nth-child(odd) .process-visual,
    .process-step:nth-child(even) .process-visual { grid-column: 2; grid-row: 2; }

    .reveal-ready .process-step:nth-child(odd) .process-panel,
    .reveal-ready .process-step:nth-child(even) .process-panel,
    .reveal-ready .process-step:nth-child(odd) .process-visual,
    .reveal-ready .process-step:nth-child(even) .process-visual { transform: translateY(40px); }

    .reveal-ready .process-step.is-visible .process-panel,
    .reveal-ready .process-step.is-visible .process-visual { transform: none; }

    .process-visual img { height: 200px; }
}

/* ---------- gallery ---------- */

.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 2.8rem;
}

.gallery-filter {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .95rem;
    color: var(--sky-deep);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50rem;
    padding: .55rem 1.4rem;
    cursor: pointer;
    transition: all .35s var(--ease);
}

.gallery-filter:hover {
    border-color: var(--sky);
    color: var(--sky-dark);
    transform: translateY(-2px);
}

.gallery-filter.active {
    background: var(--grad-sky);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px rgba(35, 133, 199, .28);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 1.1rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    grid-column: span 1;
    grid-row: span 1;
    opacity: 0;
    transform: translateY(34px) scale(.94);
    transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .45s var(--ease);
}

.gallery-item.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.gallery-item.is-hidden {
    display: none;
}

.gallery-item.span-wide { grid-column: span 2; }
.gallery-item.span-tall { grid-row: span 2; }

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.3s var(--ease), filter .6s ease;
}

.gallery-item:hover {
    box-shadow: var(--shadow-lg);
}

.gallery-item:hover img {
    transform: scale(1.14) rotate(1.5deg);
    filter: saturate(1.15) brightness(1.02);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.3rem;
    background: linear-gradient(180deg, rgba(10, 42, 94, 0) 35%, rgba(10, 42, 94, .88) 100%);
    opacity: 0;
    transition: opacity .5s ease;
}

.gallery-item:hover .gallery-overlay { opacity: 1; }

.gallery-overlay h3 {
    color: #fff;
    font-size: 1.08rem;
    margin: 0 0 .2rem;
    transform: translateY(14px);
    transition: transform .5s var(--ease) .05s;
}

.gallery-overlay p {
    color: rgba(255, 255, 255, .82);
    font-size: .85rem;
    margin: 0;
    transform: translateY(14px);
    transition: transform .5s var(--ease) .12s;
}

.gallery-item:hover .gallery-overlay h3,
.gallery-item:hover .gallery-overlay p { transform: translateY(0); }

.gallery-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, .92);
    color: var(--sky-dark);
    font-family: var(--heading-font);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .75rem;
    border-radius: 50rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .45s ease, transform .45s var(--ease);
}

.gallery-item:hover .gallery-tag {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 991.98px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}

@media (max-width: 575.98px) {
    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
    .gallery-item.span-wide { grid-column: span 1; }
    .gallery-item.span-tall { grid-row: span 1; }
}

/* lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(5, 24, 56, .93);
    backdrop-filter: blur(6px);
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity .35s ease;
}

.lightbox.is-open { display: flex; opacity: 1; }

.lightbox figure {
    max-width: 980px;
    margin: 0;
    text-align: center;
    animation: lightbox-in .45s var(--ease);
}

@keyframes lightbox-in {
    from { opacity: 0; transform: scale(.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.lightbox img {
    max-width: 100%;
    max-height: 74vh;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.lightbox figcaption {
    color: #fff;
    font-family: var(--heading-font);
    font-weight: 600;
    margin-top: 1.1rem;
}

.lightbox figcaption small {
    display: block;
    font-family: var(--body-font);
    font-weight: 400;
    color: rgba(255, 255, 255, .7);
}

.lightbox-close {
    position: absolute;
    top: 1.4rem;
    right: 1.8rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .3s var(--ease), background .3s ease;
}

.lightbox-close:hover {
    background: var(--orange);
    border-color: var(--orange);
    transform: rotate(90deg);
}

/* ---------- blog ---------- */

.post-meta {
    font-family: var(--heading-font);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--orange);
}

.post-link {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--orange);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.post-link span {
    transition: transform .35s var(--ease);
}

.post-link:hover { color: var(--orange-dark); }
.post-link:hover span { transform: translateX(5px); }

.author-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--body);
}

.author-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sky-soft);
    color: var(--sky-dark);
    display: grid;
    place-items: center;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: .72rem;
}

/* ---------- testimonials ---------- */

.quote-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
    height: 100%;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.quote-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.quote-card::before {
    content: "\201C";
    position: absolute;
    top: .2rem;
    right: 1.4rem;
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--sky-soft);
}

.stars { color: var(--orange); letter-spacing: .15em; }

/* ---------- cta strip ---------- */

.cta-strip {
    position: relative;
    background: var(--grad-sky);
    border-radius: 28px;
    padding: 3.4rem 2.6rem;
    color: #fff;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.cta-strip::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -110px;
    top: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(51, 211, 230, .55), transparent 65%);
    animation: orb-drift 16s ease-in-out infinite;
}

.cta-strip h2 { color: #fff; position: relative; }
.cta-strip p { color: rgba(255, 255, 255, .85); position: relative; }

/* ---------- footer ---------- */

.site-footer {
    background: #0A2A5E;
    color: rgba(255, 255, 255, .68);
    padding: 4rem 0 1.5rem;
}

.site-footer h5 {
    color: #fff;
    font-size: 1rem;
    letter-spacing: .04em;
    margin-bottom: 1.1rem;
}

.site-footer a {
    color: rgba(255, 255, 255, .68);
    transition: color .3s ease, padding-left .3s ease;
}

.site-footer a:hover {
    color: var(--orange);
    padding-left: 4px;
}

.footer-brand {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    font-size: .9rem;
}

.social-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: grid;
    place-items: center;
    color: #fff !important;
    transition: transform .35s var(--ease), background .35s ease;
}

.social-dot:hover {
    background: var(--orange);
    transform: translateY(-4px);
    padding-left: 0 !important;
}

/* ---------- scroll reveal utility ---------- */

/* Hidden only once site.js has set .reveal-ready - see the process-step note. */
.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    will-change: opacity, transform;
}

.reveal-ready [data-reveal="left"] { transform: translateX(-46px); }
.reveal-ready [data-reveal="right"] { transform: translateX(46px); }
.reveal-ready [data-reveal="zoom"] { transform: scale(.9); }

.reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- misc ---------- */

.scroll-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--grad-warm);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 12px 26px rgba(0, 180, 208, .35);
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    transition: opacity .4s ease, transform .4s var(--ease);
    z-index: 1030;
}

.scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal],
    .gallery-item,
    .process-step .process-panel,
    .process-step .process-visual {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   Landing refresh - hero, marquee, segments, FAQ, software and contact.
   Loaded after the base rules above so it can override them.
   ========================================================================== */

/* ---------- hero ---------- */

.hero--landing {
    padding: 5.5rem 0 8rem;
    background:
        linear-gradient(118deg, rgba(6, 27, 63, .96) 0%, rgba(27, 107, 174, .86) 46%, rgba(35, 133, 199, .6) 100%),
        url('../images/photos/hero-treatment-planning.webp') center/cover no-repeat;
}

/* faint engineering grid, sells the "planned in 3D" idea */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
    pointer-events: none;
}

.hero-orb--3 {
    width: 220px;
    height: 220px;
    left: 42%;
    top: -70px;
    background: radial-gradient(circle at 50% 50%, rgba(35, 133, 199, .85), transparent 62%);
    animation: orb-drift 22s ease-in-out infinite;
}

/* the logo, front and centre */
.hero-crest {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 132px;
    height: 132px;
}

.hero-crest img {
    position: relative;
    z-index: 2;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    object-fit: contain;
    padding: 14px;
    background: var(--sky-deep);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .45);
}

.hero-crest-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--orange), var(--mint), var(--sky), var(--orange));
    animation: crest-spin 11s linear infinite;
    filter: blur(1px);
    opacity: .9;
}

.hero-crest::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: rgba(6, 27, 63, .95);
    z-index: 1;
}

.hero h1 {
    font-weight: 900;
    font-size: clamp(2.6rem, 5.8vw, 4.5rem);
}

.text-gradient {
    text-shadow: none;
    background: linear-gradient(100deg, #7FE6F0 0%, #00B4D0 45%, #5AD1E0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
}

.hero-trust strong { color: #fff; }

.hero-trust-sep {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
}

/* layered plan card + floating chips */
.hero-visual {
    position: relative;
    padding: 2rem 0;
}

.hero-card-title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.05rem;
}

.hero-card-sub { color: rgba(255, 255, 255, .72); font-size: .82rem; }

.hero-progress {
    height: 7px;
    border-radius: 50rem;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
}

.hero-progress span {
    display: block;
    height: 100%;
    border-radius: 50rem;
    background: var(--grad-warm);
}

.hero-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .7rem;
    background: rgba(255, 255, 255, .96);
    border-radius: 16px;
    padding: .7rem .95rem;
    box-shadow: var(--shadow-lg);
    animation: card-float 7s ease-in-out infinite;
}

.hero-chip strong {
    display: block;
    font-family: var(--heading-font);
    font-size: .88rem;
    color: var(--ink);
    line-height: 1.2;
}

.hero-chip small { color: var(--body); font-size: .74rem; }

.hero-chip-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--sky-soft);
    flex: none;
}

.hero-chip-icon.warm { background: var(--orange-soft); }

.hero-chip--top { top: 0; left: -22px; animation-delay: -1.5s; }
.hero-chip--bottom { bottom: 6px; right: -18px; animation-delay: -3.5s; }

@media (max-width: 1199.98px) {
    .hero-chip--top { left: 0; }
    .hero-chip--bottom { right: 0; }
}

@media (max-width: 575.98px) {
    .hero-chip { display: none; }
    .hero-crest { width: 104px; height: 104px; }
    .hero-crest img { width: 90px; height: 90px; }
}

.btn-glow {
    box-shadow: 0 12px 34px rgba(0, 180, 208, .45);
}

.btn-glow:hover {
    box-shadow: 0 16px 44px rgba(0, 180, 208, .58);
}

/* ---------- marquee ---------- */

.marquee {
    background: var(--sky-deep);
    color: rgba(255, 255, 255, .78);
    overflow: hidden;
    padding: .95rem 0;
    position: relative;
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    width: max-content;
    animation: marquee-slide 38s linear infinite;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .04em;
    white-space: nowrap;
}

.marquee-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
    flex: none;
}

@keyframes marquee-slide {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- small shared pieces ---------- */

.tick-line {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .96rem;
}

.tick-line .tick {
    color: var(--mint);
    font-size: 1.05rem;
    line-height: 1.4;
    flex: none;
}

.framed-img {
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.card-step-number {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--grad-warm);
    color: #fff;
    font-family: var(--heading-font);
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0, 180, 208, .4);
}

.card-media { position: relative; }

.section-eyebrow--light { color: rgba(255, 255, 255, .8); }
.section-eyebrow--light::before { background: var(--orange); }

.chip {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .82rem;
    padding: .3rem .85rem;
    border-radius: 50rem;
}

.sticky-panel {
    position: sticky;
    top: 120px;
}

/* ---------- audience segment cards ---------- */

.segment-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease;
    display: flex;
    flex-direction: column;
}

.segment-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.segment-media {
    position: relative;
    height: 190px;
    overflow: hidden;
}

.segment-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

.segment-card:hover .segment-media img { transform: scale(1.08); }

.segment-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 27, 63, .72), transparent 60%);
}

.segment-icon {
    position: absolute;
    left: 1.3rem;
    top: 163px;
    z-index: 2;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: #fff;
    box-shadow: var(--shadow-md);
}

.segment-body {
    padding: 2.2rem 1.5rem 1.6rem;
    flex: 1 1 auto;
}

.segment-tagline {
    color: var(--sky-dark);
    font-weight: 600;
    font-size: .95rem;
}

.segment-points li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .6rem;
    font-size: .93rem;
}

.segment-points li:last-child { margin-bottom: 0; }

.segment-points li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--mint);
    font-weight: 700;
}

/* ---------- result tiles ---------- */

.result-tile {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    aspect-ratio: 3 / 4;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.result-tile:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.result-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

.result-tile:hover img { transform: scale(1.08); }

.result-tile-body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.1rem;
    color: #fff;
    background: linear-gradient(to top, rgba(6, 27, 63, .92), transparent);
}

.result-tile-body strong {
    display: block;
    font-family: var(--heading-font);
    font-size: .98rem;
}

.result-tile-body small { color: rgba(255, 255, 255, .78); font-size: .78rem; }

/* ---------- FAQ accordion ---------- */

.faq-accordion .accordion-item {
    border: 1px solid var(--line);
    border-radius: 16px !important;
    margin-bottom: .85rem;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.faq-accordion .accordion-button {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    background: #fff;
    padding: 1.15rem 1.35rem;
    box-shadow: none !important;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--sky-dark);
    background: var(--sky-soft);
}

.faq-accordion .accordion-button::after {
    width: 1.1rem;
    height: 1.1rem;
    background-size: 1.1rem;
}

.faq-accordion .accordion-body {
    padding: 0 1.35rem 1.35rem;
    color: var(--body);
}

/* ---------- software band on the landing page ---------- */

.software-band {
    position: relative;
    background: var(--grad-sky);
    border-radius: 28px;
    padding: 3rem 2.6rem;
    color: #fff;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.software-band::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -140px;
    bottom: -200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90, 209, 224, .4), transparent 65%);
}

.software-band > .row { position: relative; z-index: 1; }

.software-band-img {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: #fff;
    transform: rotate(1.5deg);
    transition: transform .6s var(--ease);
}

.software-band-img:hover { transform: rotate(0) scale(1.02); }

.software-band-img img {
    width: 100%;
    display: block;
    max-height: 520px;
    object-fit: cover;
    object-position: top center;
}

@media (max-width: 575.98px) {
    .software-band { padding: 2.2rem 1.4rem; }
}

/* ---------- software catalogue page ---------- */

.software-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.15rem 1.25rem;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}

.software-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--sky-soft);
}

.software-item h3 { color: var(--sky-deep); }

.software-version {
    flex: none;
    background: var(--orange-soft);
    color: var(--orange-dark);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .18rem .55rem;
    border-radius: 50rem;
}

.flyer {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: #fff;
    border: 1px solid var(--line);
}

.flyer img { display: block; width: 100%; }

.flyer figcaption {
    padding: .9rem 1.2rem;
    font-size: .85rem;
    color: var(--body);
    border-top: 1px solid var(--line);
}

.price-inline {
    background: var(--sky-soft);
    border-radius: 18px;
    padding: 1.3rem 1.5rem;
}

.price-inline-amount {
    font-family: var(--heading-font);
    font-size: 2rem;
    font-weight: 800;
    color: var(--sky-deep);
}

.price-inline-unit {
    font-weight: 600;
    color: var(--sky-dark);
    margin-left: .35rem;
}

.price-inline p { font-size: .9rem; margin-top: .4rem; }

.step-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.4rem;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.step-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.step-number {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--grad-sky);
    color: #fff;
    font-family: var(--heading-font);
    font-weight: 800;
    margin-bottom: 1rem;
}

/* ---------- contact page ---------- */

.contact-card {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.4rem;
    color: var(--body);
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}

.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
    color: var(--body);
}

.contact-card h2 {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .72rem;
    color: var(--body);
    margin: 0;
}

.contact-card strong {
    font-family: var(--heading-font);
    font-size: 1.1rem;
    color: var(--sky-deep);
}

.contact-card small { font-size: .82rem; }

.contact-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: var(--sky-soft);
    font-size: 1.25rem;
    margin-bottom: .7rem;
}

.contact-card--accent {
    background: var(--grad-sky);
    border-color: transparent;
    color: rgba(255, 255, 255, .78);
}

.contact-card--accent:hover { color: rgba(255, 255, 255, .9); }
.contact-card--accent h2 { color: rgba(255, 255, 255, .7); }
.contact-card--accent strong { color: #fff; }
.contact-card--accent .contact-icon { background: rgba(255, 255, 255, .16); }

.contact-detail-list li {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
}

.contact-detail-list li:last-child { border-bottom: none; }

.contact-detail-list strong {
    display: block;
    font-family: var(--heading-font);
    color: var(--ink);
    margin-bottom: .15rem;
}

.contact-detail-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--orange-soft);
    flex: none;
}

.contact-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-md);
}

.contact-route {
    display: flex;
    gap: 1rem;
    padding: 1.4rem 0;
    border-top: 1px solid var(--line);
}

.contact-route-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--sky-soft);
    font-size: 1.2rem;
    flex: none;
}

.contact-route-icon.warm { background: var(--orange-soft); }

.contact-note {
    background: var(--sky-soft);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    font-size: .88rem;
    margin-top: .6rem;
}

.contact-note strong { display: block; color: var(--sky-deep); font-family: var(--heading-font); }

/* ---------- footer additions ---------- */

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
}

.footer-brand:hover { padding-left: 0 !important; }

.brand-logo--footer {
    height: 76px;
}

.site-footer .footer-brand:hover .brand-logo--footer { transform: scale(1.03); }

.footer-contact li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    font-size: .93rem;
}

.footer-contact span[aria-hidden] { color: var(--orange); flex: none; }
.footer-contact a { display: inline; }

/* ---------- cta crest + whatsapp button ---------- */

.cta-crest {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: contain;
    padding: 12px;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .1);
    margin-bottom: 1.4rem;
}

.whatsapp-float {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: #1FAF54;
    color: #fff !important;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: .92rem;
    padding: .75rem 1.2rem;
    border-radius: 50rem;
    box-shadow: 0 12px 30px rgba(31, 175, 84, .4);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.whatsapp-float:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(31, 175, 84, .5);
}

@media (max-width: 575.98px) {
    .whatsapp-float { padding: .8rem; }
    .whatsapp-float-label { display: none; }
}

/* ---------- inquiry form ---------- */

#inquiry { scroll-margin-top: 90px; }

.inquiry-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.inquiry-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--sky-deep), var(--sky), var(--orange));
}

@media (max-width: 575.98px) {
    .inquiry-card { padding: 1.4rem; }
}

.inquiry-form .form-label {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink);
    margin-bottom: .35rem;
}

.inquiry-form .form-control,
.inquiry-form .form-select {
    border: 1px solid var(--line);
    background-color: var(--porcelain);
    border-radius: 12px;
    padding: .7rem .95rem;
    color: var(--ink);
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.inquiry-form .form-control::placeholder { color: #9AA8B8; }

.inquiry-form .form-control:focus,
.inquiry-form .form-select:focus {
    background-color: #fff;
    border-color: var(--sky);
    box-shadow: 0 0 0 4px rgba(35, 133, 199, .15);
}

.inquiry-form .input-validation-error {
    border-color: #D64545;
    background-color: #FFF7F7;
}

.field-error {
    display: block;
    color: #C03535;
    font-size: .82rem;
    margin-top: .3rem;
}

.inquiry-choices {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.inquiry-choice {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .9rem;
    color: var(--sky-deep);
    border: 1px solid var(--line);
    background: var(--porcelain);
    border-radius: 50rem;
    padding: .45rem 1.05rem;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.inquiry-choice:hover { border-color: var(--sky); }

.btn-check:checked + .inquiry-choice {
    background: var(--sky-deep);
    border-color: var(--sky-deep);
    color: #fff;
}

.btn-check:focus-visible + .inquiry-choice {
    box-shadow: 0 0 0 4px rgba(35, 133, 199, .25);
}

.inquiry-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.inquiry-success {
    background: var(--orange-soft);
    border: 1px solid rgba(0, 180, 208, .35);
    color: var(--ink);
    border-radius: 14px;
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
}

.inquiry-success strong { color: var(--sky-deep); }

.inquiry-points {
    display: grid;
    gap: .6rem;
    margin-top: 1.5rem;
}

.inquiry-points li {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 600;
    color: var(--ink);
}

.inquiry-points li::before {
    content: "\2713";
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--grad-warm);
    color: #fff;
    font-size: .8rem;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .marquee-track,
    .hero-crest-ring,
    .hero-chip {
        animation: none !important;
    }
}

/* ==========================================================================
   B2B REBUILD - self-hosted typography + the components the aligner
   treatment-planning pages need. Loaded after everything above, so the
   :root block here wins.

   Typography contract:
     Merienda    -> display headings ("key text"), via .font-display
     Tangerine   -> the short line under a heading, via .script-line
     Google Sans -> body copy, UI, labels, buttons, nav
   ========================================================================== */

/* ---------- self-hosted fonts ---------- */

@font-face {
    font-family: 'Google Sans';
    src: url('../Fonts/woff2/GoogleSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans';
    src: url('../Fonts/woff2/GoogleSans-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans';
    src: url('../Fonts/woff2/GoogleSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans';
    src: url('../Fonts/woff2/GoogleSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans';
    src: url('../Fonts/woff2/GoogleSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merienda';
    src: url('../Fonts/woff2/Merienda-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merienda';
    src: url('../Fonts/woff2/Merienda-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merienda';
    src: url('../Fonts/woff2/Merienda-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merienda';
    src: url('../Fonts/woff2/Merienda-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tangerine';
    src: url('../Fonts/woff2/Tangerine-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tangerine';
    src: url('../Fonts/woff2/Tangerine-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Google Sans carries body copy AND the small UI labels (eyebrows,
       stat values, buttons). Merienda is reserved for display headings -
       it is a handwriting face and turns to mush at label sizes. */
    --body-font: 'Google Sans', 'Segoe UI', system-ui, sans-serif;
    --heading-font: 'Google Sans', 'Segoe UI', system-ui, sans-serif;
    --display-font: 'Merienda', Georgia, 'Times New Roman', serif;
    --script-font: 'Tangerine', 'Segoe Script', cursive;
}

body {
    font-size: 1.05rem;
    line-height: 1.68;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.01em;
}

/* Merienda has a tall, busy skeleton: it needs looser leading and no
   negative tracking or the ascenders collide. */
.font-display,
.hero-full h1,
.page-header h1 {
    font-family: var(--display-font);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
}

/* The Tangerine line. Tangerine's x-height is roughly half a normal face,
   so it is set large deliberately - below ~28px rendered it stops being
   readable on a phone. Do not shrink these values. */
.script-line {
    font-family: var(--script-font);
    font-weight: 700;
    font-size: clamp(2.1rem, 3.8vw, 3rem);
    line-height: 1.2;
    color: var(--orange);
    margin: .2rem 0 1.1rem;
}

.script-line--light { color: #8FE3F0; }
.script-line--dark { color: var(--sky-dark); }

/* ---------- skip link ---------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--ink);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 0 0 12px 0;
}

.skip-link:focus {
    left: 0;
    color: #fff;
}

/* ==========================================================================
   Overlay navigation - the landing hero runs under a transparent nav
   ========================================================================== */

.site-header--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.site-header--overlay .topbar {
    background: rgba(6, 27, 63, .42);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
}

.site-nav--overlay {
    background: transparent !important;
    box-shadow: none !important;
    transition: background .35s ease, box-shadow .35s ease, transform .35s var(--ease);
}

.site-nav--overlay .nav-link {
    color: rgba(255, 255, 255, .88);
}

.site-nav--overlay .nav-link:hover,
.site-nav--overlay .nav-link.active {
    color: #fff;
}

.site-nav--overlay .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

/* once past the hero the nav detaches and turns solid */
.site-nav--overlay.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: blur(10px);
    animation: nav-drop .35s var(--ease);
}

.site-nav--overlay.is-stuck .nav-link {
    color: var(--ink);
}

.site-nav--overlay.is-stuck .nav-link:hover,
.site-nav--overlay.is-stuck .nav-link.active {
    color: var(--sky-dark);
}

.site-nav--overlay.is-stuck .navbar-toggler-icon {
    filter: none;
}

@keyframes nav-drop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* two logos, so the brand stays legible on both backgrounds */
.brand-logo--light { display: none; }

.site-nav--overlay:not(.is-stuck) .brand-logo--dark { display: none; }
.site-nav--overlay:not(.is-stuck) .brand-logo--light { display: block; }

/* mobile menu needs a solid panel over the photo */
@media (max-width: 991.98px) {
    .site-nav--overlay .navbar-collapse.show,
    .site-nav--overlay .navbar-collapse.collapsing {
        background: rgba(6, 27, 63, .97);
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 16px;
        padding: 1rem 1.25rem;
        margin-top: .75rem;
    }

    .site-nav--overlay.is-stuck .navbar-collapse.show {
        background: #fff;
        border-color: var(--line);
    }
}

/* ==========================================================================
   Full-screen hero
   ========================================================================== */

.hero-full {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
    padding: 11rem 0 9rem;
}

/* A clinician driving 3D treatment-planning software on a workstation - the
   work this site sells, not a stock smile. Swap for our own de-identified
   capture from a licensed seat when one is cleared for publication.
   Unsplash photo EKcXs_VHbNw, free under the Unsplash License, served from
   wwwroot/images/photos rather than hotlinked. */
.hero-full-media {
    position: absolute;
    inset: -12% 0;
    background: url('../images/photos/hero-treatment-planning.webp') center/cover no-repeat;
    will-change: transform;
}

.hero-full-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(118deg, rgba(4, 20, 48, .92) 0%, rgba(10, 42, 94, .82) 45%, rgba(27, 107, 174, .66) 100%);
}

.hero-full-inner {
    position: relative;
    z-index: 3;
    max-width: 60rem;
}

.hero-full h1 {
    color: #fff;
    font-size: clamp(2.3rem, 5.2vw, 4.2rem);
    text-shadow: 0 8px 36px rgba(0, 0, 0, .35);
    margin: 1.25rem 0 0;
}

.hero-full .script-line {
    text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

.hero-full-lead {
    color: rgba(255, 255, 255, .9);
    font-size: 1.12rem;
    max-width: 44rem;
    margin: 0 auto;
}

.hero-full-lead strong { color: #fff; }

.hero-full-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.25rem;
}

.hero-full-micro {
    color: rgba(255, 255, 255, .7);
    font-size: .92rem;
    margin-top: 1.1rem;
}

.hero-full-trust {
    position: absolute;
    bottom: 3.25rem;
    left: 0;
    right: 0;
    z-index: 3;
}

.hero-full-trust .hero-trust {
    justify-content: center;
    font-size: .88rem;
}

.hero-scroll {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    color: rgba(255, 255, 255, .8);
    animation: scroll-bob 2.4s ease-in-out infinite;
}

.hero-scroll:hover { color: #fff; border-color: #fff; }

@keyframes scroll-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 7px); }
}

@media (max-width: 991.98px) {
    .hero-full { padding: 8.5rem 0 7rem; }
    .hero-full-trust { position: static; margin-top: 2.5rem; }
    .hero-scroll { display: none; }
}

/* ==========================================================================
   Landing sections
   ========================================================================== */

/* ---------- hero to first section ---------- */

/* The hero and "The outcome" are both dark; a porcelain band keeps them apart. */
.section--after-hero { margin-top: 4.5rem; }

@media (max-width: 767.98px) {
    .section--after-hero { margin-top: 2.5rem; }
}

/* ---------- value pillars ---------- */

.feature-punch {
    color: var(--sky-deep);
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 0;
}

/* ---------- comparison table ---------- */

.compare-wrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}

.compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.compare-table th,
.compare-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: .96rem;
    vertical-align: top;
}

.compare-table thead th {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--body);
    background: var(--porcelain);
    border-bottom: 2px solid var(--line);
}

.compare-table tbody th {
    font-family: var(--heading-font);
    font-weight: 600;
    color: var(--ink);
    width: 22%;
}

.compare-table tr:last-child th,
.compare-table tr:last-child td { border-bottom: none; }

.compare-them { color: var(--body); }

.compare-table .compare-ours {
    color: var(--ink);
    font-weight: 600;
    background: rgba(0, 180, 208, .06);
    border-left: 3px solid var(--orange);
}

.compare-table thead .compare-ours {
    color: var(--sky-deep);
    background: rgba(0, 180, 208, .12);
}

/* ---------- service tiles ---------- */

.service-tile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.service-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.service-tile h3 {
    font-size: 1.14rem;
    margin: .85rem 0 .6rem;
}

.service-tile p {
    font-size: .95rem;
    flex: 1;
}

/* ---------- platforms ---------- */

.platform-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.platform-chip {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .6rem 1.35rem .6rem .6rem;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), border-color .3s ease;
}

.platform-chip:hover {
    transform: translateY(-4px);
    border-color: var(--sky);
}

.platform-mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--grad-sky);
    color: #fff;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .02em;
}

.platform-mark--lg {
    width: 56px;
    height: 56px;
    font-size: 1.1rem;
    border-radius: 16px;
    margin-bottom: 1rem;
}

.platform-name {
    font-family: var(--heading-font);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    white-space: nowrap;
}

.platform-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.9rem 1.6rem;
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.platform-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.platform-card h3 { font-size: 1.1rem; margin-bottom: .55rem; }
.platform-card p { font-size: .95rem; margin-bottom: 0; }

/* ---------- timeline strip ---------- */

.timeline-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem 2.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 1.1rem 2rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.timeline-strip span {
    position: relative;
    font-size: .95rem;
    color: var(--body);
}

.timeline-strip span strong {
    display: block;
    font-family: var(--heading-font);
    color: var(--sky-deep);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.timeline-strip span:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    right: -1.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--orange);
}

@media (max-width: 767.98px) {
    .timeline-strip { border-radius: var(--radius); flex-direction: column; gap: 1rem; }
    .timeline-strip span:not(:last-child)::after { display: none; }
}

/* ==========================================================================
   Services page
   ========================================================================== */

/* Deliberately not sticky: the main nav already pins to top:0 on this page
   and the two bars would sit on top of each other. */
.service-jump {
    background: #fff;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
}

.service-jump ul {
    display: flex;
    gap: .4rem;
    margin: 0;
    padding: .65rem 0;
    white-space: nowrap;
}

.service-jump a {
    display: inline-block;
    padding: .45rem .95rem;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--body);
    transition: background .25s ease, color .25s ease;
}

.service-jump a:hover {
    background: var(--sky-soft);
    color: var(--sky-deep);
}

.included-heading {
    font-family: var(--heading-font);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sky-deep);
    margin: 1.75rem 0 .9rem;
}

.why-note {
    margin-top: 1.75rem;
    padding: 1.15rem 1.35rem;
    background: var(--orange-soft);
    border-left: 4px solid var(--orange);
    border-radius: 0 14px 14px 0;
}

.why-label {
    display: block;
    font-family: var(--heading-font);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--orange-dark);
    margin-bottom: .3rem;
}

.why-note p {
    margin: 0;
    color: var(--ink);
    font-weight: 500;
}

/* ==========================================================================
   About page
   ========================================================================== */

.principle-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.25rem 1.75rem 1.75rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.principle-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.principle-number {
    position: absolute;
    top: .5rem;
    right: 1.25rem;
    font-family: var(--heading-font);
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sky-soft);
}

.principle-card h3 {
    font-size: 1.2rem;
    margin-bottom: .7rem;
    position: relative;
}

.principle-card p { margin-bottom: 0; font-size: .97rem; }

.statement {
    font-size: 1.08rem;
    color: var(--ink);
    border-left: 3px solid var(--orange);
    padding-left: 1.1rem;
    margin: 1.5rem 0;
}

/* ==========================================================================
   Legal copy
   ========================================================================== */

.legal-copy h2 {
    font-size: 1.4rem;
    margin: 2.25rem 0 .75rem;
}

.legal-copy h3 {
    font-size: 1.1rem;
    margin: 1.5rem 0 .6rem;
}

.legal-copy > p:first-of-type { margin-top: 0; }

.legal-note {
    background: var(--orange-soft);
    border-left: 4px solid var(--orange);
    border-radius: 0 14px 14px 0;
    padding: 1.15rem 1.35rem;
    margin-bottom: 1.5rem;
    font-size: .96rem;
    color: var(--ink);
}

/* ==========================================================================
   Footer additions
   ========================================================================== */

.footer-strap {
    font-family: var(--script-font);
    font-size: 2.1rem;
    line-height: 1.15;
    color: var(--mint);
    margin-bottom: .35rem;
}

.footer-platforms {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    font-size: .88rem;
    color: rgba(255, 255, 255, .55);
}

.footer-platforms strong { color: rgba(255, 255, 255, .8); font-weight: 500; }

/* ==========================================================================
   Mobile sticky action bar
   ========================================================================== */

.mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    gap: .5rem;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 30px rgba(10, 42, 94, .10);
    backdrop-filter: blur(8px);
}

.mobile-cta a {
    flex: 1;
    text-align: center;
    padding: .8rem .5rem;
    border-radius: 12px;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .95rem;
}

.mobile-cta-primary {
    background: var(--grad-warm);
    color: #fff;
    flex: 2 !important;
}

.mobile-cta-secondary {
    background: var(--sky-soft);
    color: var(--sky-deep);
}

/* keep the bar from covering the last line of every page */
@media (max-width: 991.98px) {
    body { padding-bottom: 4.75rem; }
    .scroll-top { bottom: 5.5rem; }
}

/* ==========================================================================
   Misc corrections
   ========================================================================== */

.page-header .script-line { margin-top: .5rem; }

.cta-strip .script-line { position: relative; }

.cta-strip p { position: relative; }

@media (prefers-reduced-motion: reduce) {
    .hero-scroll,
    .site-nav--overlay.is-stuck {
        animation: none !important;
    }
}

/* the strip sits on --sky-soft on the How It Works page, so it needs a
   stronger edge than the plain white variant on the landing page */
.timeline-strip--light {
    border-color: rgba(35, 133, 199, .22);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Pricing page
   ========================================================================== */

.section-eyebrow--light { color: var(--mint); }
.section-eyebrow--light::before { background: var(--mint); }

/* five tiers across needs tighter cards than the old three-up layout */
.price-card--compact {
    padding: 2rem 1.35rem 1.6rem;
    border-radius: 20px;
    text-align: left;
}

.price-card--compact h3 {
    font-size: 1.16rem;
    margin-bottom: .3rem;
}

@media (min-width: 1200px) {
    /* the scale transform on .featured overlaps neighbours at this density */
    .price-card.featured { transform: none; }
    .price-card.featured:hover { transform: translateY(-10px); }
}

.price-tagline {
    font-size: .88rem;
    color: var(--body);
    min-height: 2.6em;
    margin-bottom: 0;
}

.price-card.featured .price-tagline { color: rgba(255, 255, 255, .8); }

.price-card--compact .price-amount {
    font-size: 2.5rem;
    margin: .9rem 0 .2rem;
}

.price-card--compact .price-amount span {
    display: block;
    font-size: .8rem;
    margin-top: .2rem;
}

.price-volume {
    font-family: var(--heading-font);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sky-deep);
    padding: .4rem .7rem;
    background: var(--sky-soft);
    border-radius: 999px;
    display: inline-block;
    margin-top: .6rem;
}

.price-card.featured .price-volume {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.price-card--compact .price-features {
    margin: 1.2rem 0;
}

.price-card--compact .price-features li {
    font-size: .88rem;
    margin-bottom: .6rem;
    gap: .55rem;
}

.price-card--compact .price-features li::before {
    width: 18px;
    height: 18px;
    font-size: .62rem;
}

.price-turnaround {
    font-size: .82rem;
    color: var(--orange-dark);
    font-weight: 600;
    margin-bottom: .9rem;
}

.price-card.featured .price-turnaround { color: var(--mint); }

.price-note {
    font-size: .9rem;
    color: var(--body);
}

/* two-column tick list, used for "what's in every case" */
.tick-line--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem 2rem;
}

@media (max-width: 767.98px) {
    .tick-line--two { grid-template-columns: 1fr; }
}

/* ---------- add-on cards ---------- */

.addon-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.9rem 1.6rem;
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.addon-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.addon-head {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

.addon-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--sky-soft);
    font-size: 1.3rem;
}

.addon-head h3 {
    font-size: 1.06rem;
    margin-bottom: .15rem;
}

.addon-turnaround {
    font-family: var(--heading-font);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--orange);
}

.addon-price {
    font-family: var(--heading-font);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ink);
    margin: 1.1rem 0 .8rem;
    line-height: 1;
}

.addon-price span {
    font-size: .85rem;
    font-weight: 500;
    color: var(--body);
}

.addon-card p {
    font-size: .93rem;
    margin-bottom: 0;
}

/* ==========================================================================
   Case gallery - CAD views
   ========================================================================== */

.bg-ink { background: var(--ink) !important; }

.bg-ink .section-title,
.bg-ink h3 { color: #fff; }

.gallery-intro {
    color: rgba(255, 255, 255, .72);
    max-width: 42rem;
    margin: 0 auto;
}

.cad-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.cad-tile {
    margin: 0;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .45s var(--ease), border-color .35s ease;
}

.cad-tile:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 180, 208, .55);
}

.cad-tile--wide { grid-column: span 2; }

.cad-shot {
    background: #04122C;
    line-height: 0;
}

.cad-shot img {
    width: 100%;
    height: auto;
    display: block;
}

.cad-tile figcaption {
    padding: 1.35rem 1.5rem 1.6rem;
}

.cad-platform {
    display: inline-block;
    font-family: var(--heading-font);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mint);
    border: 1px solid rgba(127, 230, 240, .35);
    border-radius: 999px;
    padding: .22rem .7rem;
    margin-bottom: .6rem;
}

.cad-tile figcaption h3 {
    font-size: 1.1rem;
    margin-bottom: .45rem;
}

.cad-tile figcaption p {
    color: rgba(255, 255, 255, .68);
    font-size: .93rem;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .cad-grid { grid-template-columns: 1fr; }
    .cad-tile--wide { grid-column: span 1; }
}

/* CAD art is 900x640; the service rows previously held 4:3 photos */
.framed-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Feature lists differ in length across tiers, so pin the CTA to the bottom
   and let the list absorb the slack - otherwise the buttons stagger. */
.price-card--compact {
    display: flex;
    flex-direction: column;
}

.price-card--compact .price-features { flex: 1 1 auto; }
.price-card--compact .price-turnaround { margin-top: auto; }

/* ==========================================================================
   Worked case - How It Works
   ========================================================================== */

.rx-figure {
    margin: 0;
    position: sticky;
    top: 92px;
}

.rx-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}

.rx-figure figcaption {
    margin-top: 1rem;
    font-size: .88rem;
    color: rgba(255, 255, 255, .62);
    line-height: 1.6;
}

.rx-figure figcaption strong { color: rgba(255, 255, 255, .88); }
.rx-figure figcaption a { color: var(--mint); text-decoration: underline; }

@media (max-width: 991.98px) {
    .rx-figure { position: static; }
}

.rx-table {
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
}

.rx-table-head,
.rx-row {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 1.25rem;
}

.rx-table-head {
    padding: .9rem 1.4rem;
    background: rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.rx-table-head span {
    font-family: var(--heading-font);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mint);
}

.rx-table-head span:first-child { color: #F5B942; }

.rx-row {
    padding: 1.05rem 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

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

.rx-ask {
    color: rgba(255, 255, 255, .72);
    font-size: .92rem;
    position: relative;
    padding-left: 1rem;
}

.rx-ask::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #F5B942;
}

.rx-did {
    color: #fff;
    font-size: .93rem;
    font-weight: 500;
}

.rx-footnote {
    margin-top: 1.75rem;
    padding: 1.2rem 1.4rem;
    background: rgba(255, 255, 255, .05);
    border-left: 3px solid var(--orange);
    border-radius: 0 14px 14px 0;
    color: rgba(255, 255, 255, .72);
    font-size: .94rem;
    margin-bottom: 0;
}

.rx-footnote strong { color: #fff; }

@media (max-width: 575.98px) {
    .rx-table-head,
    .rx-row { grid-template-columns: 1fr; gap: .5rem; }
    .rx-table-head span:last-child { display: none; }
}

/* The step visuals are now CAD frames rather than photos, so they must not be
   cropped to a fixed height - the panels at the edges carry the detail. */
.process-visual img {
    height: auto;
}

/* ==========================================================================
   Icons - SVG sprite rendered by @Html.Icon(). Stroke icons that take their
   colour from the text around them, so a link's icon and its label always
   match, including on hover and on dark sections.
   ========================================================================== */

.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.19em;
}

.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.5em; height: 1.5em; }
.icon--xl { width: 2rem; height: 2rem; stroke-width: 1.5; }

/* Solid-ish marks read better filled than stroked at small sizes. */
.icon--filled {
    fill: currentColor;
    stroke: none;
}

/* Nav, topbar and footer links: icon then label, never wrapping between them. */
.nav-link,
.topbar-item,
.footer-contact a,
.footer-contact span,
.site-footer ul a,
.crumb a,
.service-jump a {
    display: inline-flex;
    align-items: center;
    gap: .45em;
}

.site-footer ul a .icon,
.service-jump a .icon {
    opacity: .75;
    transition: opacity .25s ease, transform .25s ease;
}

.site-footer ul a:hover .icon,
.service-jump a:hover .icon {
    opacity: 1;
    transform: translateX(2px);
}

.nav-link .icon {
    opacity: .6;
    transition: opacity .25s ease;
}

.nav-link:hover .icon,
.nav-link.active .icon { opacity: 1; }

/* The footer "Get in touch" list is an icon column plus a text column. */
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}

.btn .icon { vertical-align: -.16em; }

.social-dot .icon { width: 1.05rem; height: 1.05rem; }

@media (max-width: 991.98px) {
    /* Stacked mobile menu: the icons give the list a scannable left edge. */
    .navbar-nav .nav-link { gap: .6em; }
}

/* ==========================================================================
   Contact page - dark band, STL upload, platform marks.
   ========================================================================== */

/* The form sits on the same deep navy the services gallery uses, so the white
   card is the brightest thing on the page. */
.contact-band {
    position: relative;
    overflow: hidden;
}

.contact-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%);
    pointer-events: none;
}

.contact-band > .container { position: relative; z-index: 1; }

/* The accent card is already navy; on a navy band it needs an edge to read. */
.contact-band .contact-card--accent {
    border: 1px solid rgba(255, 255, 255, .16);
}

.inquiry-reference {
    display: block;
    margin-top: .35rem;
    font-size: .88rem;
}

.form-label-optional {
    font-family: var(--body-font);
    font-weight: 500;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--body);
    background: var(--porcelain);
    border: 1px solid var(--line);
    border-radius: 50rem;
    padding: .1rem .5rem;
    margin-left: .4rem;
    vertical-align: middle;
}

/* ---------- STL drop zone ---------- */

.stl-drop { position: relative; }

/* The real input stays in the layout for keyboard and screen-reader users -
   it is the label below that is styled, and clicking it activates the input. */
.stl-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.stl-drop-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin: 0;
    padding: 1.35rem 1.5rem;
    border: 2px dashed var(--line);
    border-radius: 16px;
    background: var(--porcelain);
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, transform .25s var(--ease);
}

.stl-drop-inner:hover {
    border-color: var(--sky);
    background: var(--sky-soft);
}

/* Focus lives on the visually-hidden input, so mirror it onto the label. */
.stl-input:focus-visible + .stl-drop-inner {
    border-color: var(--sky);
    box-shadow: 0 0 0 4px rgba(35, 133, 199, .2);
}

.stl-drop.is-dragover .stl-drop-inner {
    border-color: var(--orange);
    background: var(--orange-soft);
    transform: translateY(-2px);
}

.stl-drop-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--sky-deep);
    flex: none;
}

.stl-drop.is-dragover .stl-drop-icon { color: var(--orange-dark); }

.stl-drop-text { display: grid; gap: .15rem; }

.stl-drop-text strong {
    font-family: var(--heading-font);
    color: var(--ink);
    font-size: .98rem;
}

.stl-drop-text span {
    font-size: .85rem;
    color: var(--body);
    line-height: 1.5;
}

.stl-file-list {
    display: grid;
    gap: .5rem;
    margin: .75rem 0 0;
}

.stl-file {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .85rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-size: .88rem;
}

.stl-file-icon { color: var(--sky-deep); flex: none; }

.stl-file-name {
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stl-file-size {
    margin-left: auto;
    color: var(--body);
    font-variant-numeric: tabular-nums;
    flex: none;
}

.stl-file--invalid {
    border-color: #E9B7B7;
    background: #FFF7F7;
}

.stl-file--invalid .stl-file-icon { color: #C03535; }

.stl-file-note {
    color: #C03535;
    font-size: .82rem;
    margin-left: auto;
    flex: none;
}

.stl-hint {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .82rem;
    color: var(--body);
    margin: .6rem 0 0;
    line-height: 1.55;
}

.stl-hint .icon { margin-top: .2em; color: var(--sky); }

@media (max-width: 575.98px) {
    .stl-drop-inner { flex-direction: column; text-align: center; padding: 1.25rem 1rem; }
    .stl-file-size { margin-left: 0; }
}

/* ---------- platform marks ---------- */

.contact-platforms {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.contact-platforms-label {
    display: block;
    font-family: var(--heading-font);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--body);
    margin-bottom: .9rem;
}

.platform-logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 2rem;
}

.platform-logo-row .platform-badge img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

/* ==========================================================================
   Experience claim and vendor marks.
   ========================================================================== */

/* Hero: sits between the headline and the script line, so it is read second. */
.hero-experience {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin: 1.1rem auto .2rem;
    padding: .55rem 1.35rem;
    border-radius: 50rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, .92);
    font-size: 1rem;
    line-height: 1.3;
}

.hero-experience .icon { color: var(--mint); }

.hero-experience strong {
    color: #fff;
    font-family: var(--heading-font);
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .hero-experience {
        font-size: .9rem;
        padding: .5rem 1rem;
        text-align: left;
    }
}

/* Topbar: the same claim, on every page. */
.topbar-item--accent {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    color: var(--mint);
}

.topbar-item--accent strong { color: #fff; }

/* Footer. */
.footer-experience {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 1rem 0 0;
    padding: .7rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: .92rem;
}

.footer-experience .icon { color: var(--mint); }
.footer-experience strong { color: #fff; }

/* ---------- vendor marks ---------- */

/* The vendor marks are square app icons - a multicolour glyph on white, and a
   white glyph on a blue tile. Neither survives a brightness/invert, so on the
   dark bands they keep their own colour and the platform name sits beside them
   as text. An icon on its own does not say "ArchForm". */
.platform-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.2;
    color: var(--ink);
    white-space: nowrap;
}

.platform-badge img {
    width: 28px;
    height: 28px;
    /* The files are square; object-fit guards against a future replacement
       that is not, rather than letting it stretch. */
    object-fit: contain;
    border-radius: 7px;
    flex: none;
}

.platform-badge--light { color: rgba(255, 255, 255, .88); }

.hero-trust-logos {
    display: inline-flex;
    align-items: center;
    gap: 1.4rem;
}

.footer-platform-logos {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0 .35rem;
    vertical-align: middle;
}

.footer-platform-logos .platform-badge { color: rgba(255, 255, 255, .78); }
.footer-platform-logos .platform-badge img { width: 24px; height: 24px; }

@media (max-width: 767.98px) {
    .hero-trust-logos,
    .footer-platform-logos {
        gap: 1rem;
        justify-content: center;
    }

    .platform-badge { font-size: .85rem; }
    .hero-trust-logos .platform-badge img { width: 24px; height: 24px; }
}

/* Vendor mark in place of the initials tile, where we have one. The marks are
   square, so these are square too - the tile they replace is a 40px circle. */
.platform-logo {
    display: inline-grid;
    place-items: center;
    flex: none;
}

.platform-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
}

.platform-logo--lg {
    justify-items: start;
    margin-bottom: 1rem;
}

.platform-logo--lg img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
}

/* The footer platform row became a flex line containing both text and marks;
   without this the images stretch to the line box instead of centring. */
.footer-platforms { align-items: center; }

/* Icon tiles: the sprite inherits currentColor, and these tiles sit on tinted
   backgrounds where the inherited body grey is too weak. */
.contact-detail-icon .icon,
.stl-drop-icon .icon,
.contact-route-icon .icon {
    color: var(--sky-deep);
    width: 1.35rem;
    height: 1.35rem;
}

.contact-detail-icon .icon { color: var(--orange-dark); }

/* Social dots are small circles; centre the glyph inside them. */
.social-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The floating WhatsApp button is icon + label. */
.whatsapp-float {
    align-items: center;
    gap: .5rem;
}

/* ==========================================================================
   Contact page - dark surfaces.

   The form and direct-contact cards sit on the ink band as raised navy panels
   rather than white ones, and the FAQ band below them matches. Everything in
   this block is scoped to .contact-band / .contact-faq, which exist only on
   the contact page: .section-title, .form-control and .faq-accordion are all
   shared with pages that are still light, and must stay unchanged there.

   #63acf9 is 6.0:1 on the card and 6.8:1 on the band. It is only ~2.3:1 on
   white, which is why it is not applied to .section-title globally.
   ========================================================================== */

.contact-band,
.contact-faq {
    --card: #1a284f;
    --card-raised: #22325e;
    --on-card: rgba(255, 255, 255, .84);
    --on-card-strong: #FFFFFF;
    --on-card-muted: rgba(255, 255, 255, .6);
    --card-line: rgba(255, 255, 255, .13);
    --title-blue: #63ACF9;
    --error-on-dark: #FF9B9B;
}

.contact-band .section-title,
.contact-faq .section-title,
.contact-band .contact-panel > h2 {
    color: var(--title-blue);
}

/* ---------- the two cards ---------- */

.contact-band .inquiry-card,
.contact-band .contact-panel {
    background-color: var(--card);
    border-color: var(--card-line);
    color: var(--on-card);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.contact-band .inquiry-card .text-soft,
.contact-band .contact-panel .text-soft {
    color: var(--on-card-muted) !important;
}

/* ---------- form ---------- */

.contact-band .inquiry-form .form-label {
    color: var(--on-card-strong);
}

.contact-band .inquiry-form .form-control,
.contact-band .inquiry-form .form-select {
    background-color: rgba(0, 0, 0, .22);
    border-color: var(--card-line);
    color: var(--on-card-strong);
}

.contact-band .inquiry-form .form-control::placeholder {
    color: rgba(255, 255, 255, .38);
}

.contact-band .inquiry-form .form-control:focus,
.contact-band .inquiry-form .form-select:focus {
    background-color: rgba(0, 0, 0, .3);
    border-color: var(--title-blue);
    color: var(--on-card-strong);
    box-shadow: 0 0 0 4px rgba(99, 172, 249, .22);
}

/* The native dropdown list is drawn by the OS and does not inherit the dark
   field, so the options need their own colours or they render white-on-white. */
.contact-band .inquiry-form .form-select option {
    background-color: var(--card);
    color: var(--on-card-strong);
}

.contact-band .inquiry-form .form-select {
    /* Bootstrap's chevron is a dark SVG; lighten it to match the new field. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.contact-band .inquiry-form .input-validation-error {
    border-color: var(--error-on-dark);
    background-color: rgba(255, 90, 90, .12);
}

.contact-band .field-error,
.contact-band .text-danger {
    color: var(--error-on-dark) !important;
}

.contact-band .form-label-optional {
    background: rgba(255, 255, 255, .08);
    border-color: var(--card-line);
    color: var(--on-card-muted);
}

/* ---------- success banner ---------- */

.contact-band .inquiry-success {
    background: rgba(0, 180, 208, .14);
    border-color: rgba(0, 180, 208, .45);
    color: var(--on-card);
}

.contact-band .inquiry-success strong { color: var(--mint); }

/* ---------- STL upload ---------- */

.contact-band .stl-drop-inner {
    background: rgba(0, 0, 0, .18);
    border-color: var(--card-line);
}

.contact-band .stl-drop-inner:hover {
    background: rgba(99, 172, 249, .12);
    border-color: var(--title-blue);
}

.contact-band .stl-input:focus-visible + .stl-drop-inner {
    border-color: var(--title-blue);
    box-shadow: 0 0 0 4px rgba(99, 172, 249, .22);
}

.contact-band .stl-drop.is-dragover .stl-drop-inner {
    background: rgba(0, 180, 208, .16);
    border-color: var(--orange);
}

.contact-band .stl-drop-icon {
    background: var(--card-raised);
    border-color: var(--card-line);
}

.contact-band .stl-drop-icon .icon { color: var(--title-blue); }
.contact-band .stl-drop.is-dragover .stl-drop-icon .icon { color: var(--mint); }

.contact-band .stl-drop-text strong { color: var(--on-card-strong); }
.contact-band .stl-drop-text span { color: var(--on-card-muted); }

.contact-band .stl-file {
    background: var(--card-raised);
    border-color: var(--card-line);
}

.contact-band .stl-file-name { color: var(--on-card-strong); }
.contact-band .stl-file-size { color: var(--on-card-muted); }
.contact-band .stl-file-icon { color: var(--title-blue); }

.contact-band .stl-file--invalid {
    background: rgba(255, 90, 90, .12);
    border-color: rgba(255, 155, 155, .45);
}

.contact-band .stl-file--invalid .stl-file-icon,
.contact-band .stl-file-note { color: var(--error-on-dark); }

.contact-band .stl-hint { color: var(--on-card-muted); }
.contact-band .stl-hint .icon { color: var(--title-blue); }

/* ---------- privacy note ---------- */

.contact-band .contact-note {
    background: rgba(255, 255, 255, .06);
    color: var(--on-card);
}

.contact-band .contact-note strong { color: var(--title-blue); }
.contact-band .contact-note a { color: var(--mint); }
.contact-band .contact-note a:hover { color: #fff; }

/* ---------- direct contact list ---------- */

.contact-band .contact-detail-list li { border-bottom-color: var(--card-line); }
.contact-band .contact-detail-list strong { color: var(--on-card-strong); }
.contact-band .contact-detail-list a { color: var(--title-blue); }
.contact-band .contact-detail-list a:hover { color: #fff; }

.contact-band .contact-detail-icon {
    background: rgba(0, 180, 208, .16);
}

.contact-band .contact-detail-icon .icon { color: var(--mint); }

/* The platform tile keeps its white background: the vendor marks are drawn in
   navy and cyan, and inverting them would misrepresent the artwork. */

/* ---------- FAQ band ---------- */

.contact-faq .accordion-item {
    background: var(--card);
    border-color: var(--card-line);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
}

.contact-faq .accordion-button {
    background: var(--card);
    color: var(--on-card-strong);
}

.contact-faq .accordion-button:not(.collapsed) {
    background: var(--card-raised);
    color: var(--title-blue);
}

/* Bootstrap's chevron is a dark SVG data URI in both states. */
.contact-faq .accordion-button::after {
    filter: brightness(0) invert(1);
    opacity: .7;
}

.contact-faq .accordion-button:not(.collapsed)::after { opacity: 1; }

.contact-faq .accordion-body { color: var(--on-card); }


/* ==========================================================================
   Contact page - tabs, and the platform marks in the header.
   ========================================================================== */

/* ---------- tab strip ---------- */

.contact-tabs {
    display: flex;
    gap: .4rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0 0 .75rem;
    border-bottom: 1px solid var(--card-line);
    overflow-x: auto;
    /* The strip scrolls on a phone; hide the bar so it does not sit on top of
       the tabs themselves. */
    scrollbar-width: none;
}

.contact-tabs::-webkit-scrollbar { display: none; }

.contact-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, .68);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: .7rem 1.15rem;
    cursor: pointer;
    transition: color .22s ease, background .22s ease, border-color .22s ease;
}

.contact-tab .icon { opacity: .7; }

.contact-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.contact-tab.active {
    color: var(--title-blue);
    background: var(--card);
    border-color: var(--card-line);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

.contact-tab.active .icon { opacity: 1; }

.contact-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(99, 172, 249, .3);
}

/* The trailing half of the first tab's label. Long enough to push the strip
   into a scroll on a phone, and it is a clarification rather than the name. */
.contact-tab-sub { color: rgba(255, 255, 255, .5); font-weight: 500; }
.contact-tab.active .contact-tab-sub { color: rgba(255, 255, 255, .6); }

/* A hidden panel must not be reachable by keyboard; Bootstrap handles the
   display, this just stops a mid-fade panel catching a click. */
.contact-tab-content > .tab-pane:not(.show) { pointer-events: none; }

.contact-tab-content > .tab-pane { outline: none; }

@media (max-width: 575.98px) {
    .contact-tab { font-size: .88rem; padding: .6rem .9rem; }
    .contact-tab-sub { display: none; }
}

/* ---------- direct-contact extras ---------- */

.contact-panel-sub {
    font-family: var(--heading-font);
    font-size: 1.05rem;
    margin: 0 0 .5rem;
}

.contact-band .contact-panel-sub { color: var(--on-card-strong); }

/* Outline button that works on the dark band. */
.btn-quiet-light {
    color: rgba(255, 255, 255, .85);
    border: 1px solid var(--card-line);
    background: rgba(255, 255, 255, .05);
    border-radius: 12px;
}

.btn-quiet-light:hover {
    color: #fff;
    border-color: var(--title-blue);
    background: rgba(99, 172, 249, .14);
}

/* ---------- platform marks in the page header ---------- */

.contact-platforms--header {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    margin: 1.75rem auto 0;
    padding: .85rem 1.6rem;
    /* Keeps the white tile: the marks are drawn in navy and cyan, and they
       would disappear straight into the header gradient without it. */
    background: #fff;
    text-align: left;
}

.contact-platforms--header .contact-platforms-label {
    margin-bottom: 0;
    max-width: 7rem;
    line-height: 1.35;
}

.contact-platforms--header .platform-logo-row {
    gap: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--line);
}

@media (max-width: 575.98px) {
    .contact-platforms--header {
        flex-direction: column;
        gap: .85rem;
        width: 100%;
        text-align: center;
    }

    .contact-platforms--header .contact-platforms-label { max-width: none; }

    .contact-platforms--header .platform-logo-row {
        padding-left: 0;
        border-left: none;
        gap: 1.25rem;
    }
}

/* ==========================================================================
   Home - "The outcome" section: before/after comparison + aligner photos.
   ========================================================================== */

.outcome-compare { position: relative; }

/* The source image is a side-by-side split, so each tag sits in its half. */
.outcome-tag {
    position: absolute;
    bottom: .6rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
}

.outcome-tag--before {
    left: .6rem;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
}

.outcome-tag--after {
    left: calc(50% + .6rem);
    background: var(--sky);
    color: #fff;
}

.outcome-shot { margin: 0; }

/* The four photos have different proportions; crop them to one shape so
   the row lines up. */
.outcome-shot .framed-img {
    aspect-ratio: 3 / 2;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.outcome-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.outcome-shot figcaption {
    margin-top: .9rem;
    color: rgba(255, 255, 255, .72);
    font-size: .95rem;
    text-align: center;
}