:root {
    --navy: #0b2946;
    --navy2: #081f36;
    --teal: #00a7a7;
    --teal2: #2eb7bc;
    --copper: #d96c4a;
    --copper2: #be5736;
    --cream: #fbf3df;
    --line: #d8e3e8;
    --ink: #30485f;
    --muted: #5f7384;
    --bg: #f7fbfc;
    --white: #fff;
    --shadow: 0 18px 40px rgba(9,31,54,.08);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter,Arial,sans-serif;
    color: var(--ink);
    background: #fff;
}

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

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

.wrap {
    width: min(1180px,calc(100% - 40px));
    margin: 0 auto;
}

.site-nav {
    background: var(--navy2);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 40;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 84px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.brand-mark {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    flex: 0 0 64px;
}

.brand-mark img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.brand-copy strong {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 22px;
    letter-spacing: .06em;
    line-height: 1;
    white-space: nowrap;
}

.brand-copy strong span {
    color: #52d2d1;
}

.brand-copy .brand-by {
    font-size: 11px;
    letter-spacing: .14em;
    color: #d9e4ed;
    font-weight: 700;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 14px;
    font-weight: 800;
}

.nav-links a:not(.order-btn) {
    padding: 6px 0;
    color: #e2ebf1;
}

.nav-links a[aria-current=page] {
    color: #fff;
    border-bottom: 2px solid var(--teal2);
}

.mobile-toggle {
    display: none;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 28px;
}

.order-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 150px;
    background: var(--copper);
    color: #fff!important;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 900;
    line-height: 1.05;
    box-shadow: 0 10px 24px rgba(217,108,74,.25);
}

.order-btn span {
    white-space: nowrap;
}

.order-btn small {
    font-size: 11px;
    font-weight: 700;
    opacity: .95;
}

.order-btn:hover {
    background: var(--copper2);
}

.status-strip {
    background: var(--cream);
    border-bottom: 1px solid #ecd6aa;
    color: var(--navy);
}

.status-inner {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 14px;
}

.traffic {
    width: 30px;
    height: 60px;
    background: #182630;
    border-radius: 16px;
    padding: 5px;
    display: grid;
    gap: 3px;
    box-shadow: inset 0 0 0 2px #374752,0 4px 10px rgba(0,0,0,.2);
}

.lamp {
    width: 18px;
    height: 14px;
    border-radius: 50%;
    background: #32424d;
    margin: auto;
}

.lamp.amber {
    background: #ffbf3f;
    box-shadow: 0 0 12px rgba(255,191,63,.9),inset 0 0 4px #fff3b5;
}

.status-strip a {
    color: #123b63;
    text-decoration: underline;
    font-weight: 800;
}

.hero {
    background: linear-gradient(110deg,#f6fafb 0%,#ffffff 52%,#eef7f8 100%);
    padding: 30px 0 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.02fr;
    gap: 42px;
    align-items: center;
}

.hero-copy {
    padding: 36px 0 42px;
}

.kicker,
.eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .17em;
    color: var(--copper);
    font-weight: 900;
    margin: 0 0 14px;
}

.hero h1,
.section-title,
.page-hero h1,
.community h2,
.analytics h2,
.split-copy h2 {
    font-family: Georgia,'Times New Roman',serif;
    color: var(--navy);
    letter-spacing: -.035em;
    line-height: .95;
    margin: 0;
}

.hero h1 {
    font-size: clamp(48px,6vw,74px);
}

.hero h1 span {
    color: var(--navy);
}

.lead {
    font-size: 18px;
    line-height: 1.62;
    color: #4d677a;
    max-width: 650px;
    margin: 20px 0 26px;
}

.hero-media {
    min-height: 345px;
    border-radius: 4px;
    overflow: hidden;
}

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

.measurements {
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

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

.measure {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 18px;
    align-items: start;
    padding: 24px 20px;
}

.measure+.measure {
    border-left: 1px solid var(--line);
}

.icon-disc {
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    background: transparent;
    color: #fff;
}

.icon-image-wrap img {
    width: 960 px;
    height: 96;
    display: block;
    object-fit: contain;
}

.measure strong {
    display: block;
    font-size: 17px;
    color: var(--navy);
    margin-bottom: 4px;
}

.measure p {
    margin: 0;
    color: #557083;
    line-height: 1.5;
    font-size: 14px;
}

.band {
    padding: 86px 0;
}

.band.alt {
    background: #eef5f6;
}

.split-card {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    box-shadow: none;
}

.split-copy {
    padding: 44px 34px 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.split-copy h2 {
    font-size: clamp(42px,4.8vw,60px);
    margin-bottom: 18px;
}

.split-copy p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--navy);
    margin: 0 0 22px;
    max-width: 430px;
}

.split-media {
    min-height: 300px;
    overflow: hidden;
}

.split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.community {
    padding: 86px 0;
    background: #fff;
}

.community.alt {
    background: #eef5f6;
}

.community-head {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 56px;
    align-items: end;
    margin-bottom: 38px;
}

.community h2 {
    font-size: clamp(40px,4.8vw,62px);
}

.community-intro {
    font-size: 17px;
    line-height: 1.7;
    color: #536d7f;
    margin: 0;
}

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

.card {
    background: #fff;
    border: 1px solid #eac2b4;
    border-top: 3px solid var(--copper);
    border-radius: 8px;
    padding: 26px 22px;
    box-shadow: none;
}

.card h3 {
    margin: 0 0 12px;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.22;
}

.card p {
    margin: 0;
    color: #5e7382;
    line-height: 1.62;
    font-size: 15px;
}

.analytics {
    padding: 86px 0;
    background: linear-gradient(135deg,#f6fafb 0%,#fbf5f1 100%);
}

.analytics-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 26px;
    margin-bottom: 28px;
}

.analytics h2 {
    font-size: clamp(40px,4.6vw,62px);
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
}

.analysis-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    box-shadow: none;
}

.analysis-card h3 {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 21px;
}

.analysis-card p {
    margin: 0 0 16px;
    color: #5e7382;
    line-height: 1.58;
    font-size: 15px;
}

.chart,
.instrument-photo {
    height: 260px;
    border-radius: 4px;
    overflow: hidden;
    background: transparent;
}

.chart img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background: #fff;
}

.instrument-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.proof {
    padding: 60px 0;
    background: var(--navy2);
    color: #fff;
}

.proof-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 40px;
    align-items: center;
}

.proof h2 {
    font-family: Georgia,'Times New Roman',serif;
    font-size: 42px;
    line-height: 1;
    margin: 0 0 12px;
}

.proof p {
    margin: 0;
    color: #d1dce5;
    line-height: 1.65;
}

.cta-row {
    display: flex;
    justify-content: flex-end;
}

.page-hero {
    padding: 52px 0;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg,#f7fbfc,#edf6f7);
}

.page-hero-grid {
    display: grid;
    grid-template-columns: 1fr .72fr;
    gap: 34px;
    align-items: center;
}

.page-hero p {
    font-size: 18px;
    line-height: 1.65;
    color: #be5736;
    max-width: #be5736;
    margin: 18px 0 0;
}

.page-hero h1 {
    font-size: clamp(44px,5.3vw,66px);
}

.page-media {
    border-radius: 4px;
    overflow: hidden;
}

.page-media img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center center;
}

.page-section {
    padding: 68px 0;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

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

.panel,
.service,
.step-card,
.faq-card,
.status-card,
.form-card,
.result-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
    box-shadow: var(--shadow);
}

.panel h2,
.form-card h2,
.result-card h2 {
    color: var(--navy);
    margin: 0 0 12px;
    font-size: 28px;
}

.panel h3,
.service h3,
.faq-card h3 {
    color: var(--navy);
    margin: 0 0 10px;
    font-size: 22px;
}

.panel p,
.service p,
.faq-card p,
.form-card p,
.result-card p {
    color: #5d7384;
    line-height: 1.68;
    margin: 0 0 10px;
}

.service b,
.micro-label {
    display: block;
    color: var(--copper);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 900;
}

.feature-list,
.checklist {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 16px 0 0;
    list-style: none;
}

.feature-list li,
.checklist li {
    padding-left: 24px;
    position: relative;
    color: #51697a;
    line-height: 1.5;
}

.feature-list li:before,
.checklist li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--teal);
    font-weight: 900;
}

.service-photo {
    border-radius: 4px;
    overflow: hidden;
    margin-top: 16px;
}

.service-photo img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center center;
}

.steps {
    display: grid;
    gap: 14px;
}

.step-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid #edf2f5;
}

.step-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.step-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(145deg,#56c6c6,#1d9fa9);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    font-size: 18px;
}

.step-item h3 {
    margin: 0 0 4px;
    color: var(--navy);
    font-size: 20px;
}

.step-item p {
    margin: 0;
    color: #5c7283;
    line-height: 1.55;
}

label {
    display: block;
    font-weight: 800;
    color: var(--navy);
    margin: 14px 0 8px;
}

input,
textarea,
select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #cbd9df;
    border-radius: 10px;
    font: inherit;
    color: var(--ink);
    background: #fff;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.wide {
    grid-column: 1/-1;
}

.field-hint,
.help,
.demo-note {
    font-size: 13px;
    color: #6b8090;
    line-height: 1.55;
}

.btn,
.submit-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 13px 18px;
    border-radius: 10px;
    background: var(--navy);
    color: #fff;
    border: 0;
    font-weight: 900;
    cursor: pointer;
}

.btn small,
.submit-btn small {
    font-size: 11px;
    font-weight: 700;
    opacity: .92;
}

.btn.copper,
.submit-btn {
    background: var(--copper);
}

.notice {
    background: #fff1ef;
    border: 1px solid #efc1ba;
    border-left: 4px solid #d96c4a;
    border-radius: 12px;
    padding: 16px;
    color: #536a7c;
    line-height: 1.65;
}

.result-card {
    display: none;
}

.result-card.show {
    display: block;
}

.data-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px;
    margin: 18px 0;
}

.data-list div {
    background: #f8fbfc;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
}

.data-list span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #7a8d9a;
    margin-bottom: 5px;
}

.data-list strong {
    color: var(--navy);
}

.valid {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #136c57;
    font-weight: 900;
}

.valid-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #73ff00;
    display: grid;
    place-items: center;
}

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

.signal-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
    box-shadow: var(--shadow);
}

.signal-card h2 {
    margin: 0;
    color: var(--navy);
    font-size: 28px;
}

.signal-card p {
    margin: 6px 0 0;
    color: #5d7384;
}

.updated {
    font-size: 18px;
    color: #fffff;
}

.metric {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.metric strong {
    display: block;
    color: var(--navy);
    margin-bottom: 8px;
}

.metric span {
    color: #5c7283;
    line-height: 1.55;
}

.mini-traffic {
    width: 48px;
    height: 92px;
    background: #182630;
    border-radius: 22px;
    padding: 8px;
    display: grid;
    gap: 5px;
    box-shadow: inset 0 0 0 2px #374752;
}

.mini-traffic span {
    border-radius: 50%;
    background: #32424d;
}

.mini-traffic .green {
    background: #375544;
}

.mini-traffic .amber {
    background: #ffbf3f;
    box-shadow: 0 0 12px rgba(255,191,63,.9);
}

.mini-traffic .red {
    background: #503238;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.faq-card {
    min-height: 160px;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-mark {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
}

.footer-brand strong {
    color: #fff;
    letter-spacing: .08em;
}

.footer-brand small {
    color: #c7d5de;
}

.footer-note {
    font-size: 12px;
    color: #bfcfda;
    line-height: 1.6;
    text-align: right;
    max-width: 560px;
}

footer {
    background: #04192e;
    padding: 38px 0;
    border-top: 3px solid var(--copper);
    color: #fff;
}

.hide-mobile {
    display: block;
}

@media (max-width:980px){
    .mobile-toggle {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 84px;
        background: var(--navy2);
        padding: 18px 20px;
        flex-direction: column;
        align-items: flex-start;
        box-shadow: 0 14px 24px rgba(0,0,0,.18);
    }

    .nav-links.open {
        display: flex;
    }

    .hero-grid,
    .page-hero-grid,
    .community-head,
    .grid-2,
    .grid-3,
    .analytics-grid,
    .measure-grid,
    .cards,
    .proof-grid,
    .status-grid,
    .faq-grid,
    .split-card {
        grid-template-columns: 1fr;
    }

    .measure+.measure {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .hero-media {
        min-height: 320px;
    }

    .split-media {
        min-height: 290px;
    }

    .page-media img {
        height: 220px;
    }

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

    .footer-grid {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-note {
        text-align: left;
    }

    .cta-row {
        justify-content: flex-start;
    }

    /* Mobile header: hide BY @K9APPS so it does not collide with the menu. */
    .brand-copy .brand-by {
        display: none;
    }

    /* On narrow screens, stack the analytics heading and Order Testing button. */
    .analytics-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    /* Prevent Order Testing buttons from forcing extra width on mobile. */
    .order-btn {
        min-width: 0;
        width: auto;
        max-width: 100%;
    }
}

.status-green {
    background-color: #eef9f3;
    border-color: #bfe3ce;
}

.status-amber {
    background-color: #fff8e8;
    border-color: #efd79b;
}

.status-red {
    background-color: #fff1ef;
    border-color: #efc1ba;
}

.panel h2.note-heading {
    color: #b95335;
}

.exclusions li::before {
    content: "✕";
    color: #b95335;
}

.Scope {
    background-color: #fff8e8;
    border-color: #efd79b;
}

/* === Square / modern editorial visual variant === */
.hero-media,
.page-media,
.split-media,
.service-photo {
    background: transparent;
    box-shadow: none;
}

.hero-media img,
.page-media img,
.split-media img,
.service-photo img {
    display: block;
}

.split-card {
    border-left: 0;
    border-right: 0;
}

.analytics .analysis-card {
    border-color: #e3eaee;
}

.chart,
.instrument-photo {
    background: transparent;
}

/* Keep interactive controls softer than the larger visual panels. */
.order-btn,
.btn,
.submit-btn,
input,
textarea,
select,
.notice {
    border-radius: 10px;
}

/* Reference catalog: scoped styles for this section only. */
.reference-catalog {
    background: #eef6f8;
}

.reference-catalog .catalog-head {
    max-width: 780px;
    margin-bottom: 24px;
}

.reference-catalog h2 {
    color: #123b63;
}

.reference-catalog .catalog-status {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #bfdde0;
    border-radius: 999px;
    background: #fff;
    color: #14676c;
    font-size: .8rem;
    font-weight: 700;
}

.reference-catalog .catalog-search {
    display: block;
    margin: 24px 0;
    max-width: 600px;
}

.reference-catalog .catalog-search span {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #123b63;
}

.reference-catalog input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    border: 1px solid #bfd0dc;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    color: #123b63;
}

.reference-catalog input:focus {
    outline: 3px solid #a9e2e2;
    outline-offset: 2px;
}

.reference-catalog .catalog-group {
    margin-top: 32px;
}

.reference-catalog .catalog-group h3 {
    color: #123b63;
    margin-bottom: 8px;
}

.reference-catalog .catalog-intro {
    max-width: 850px;
    color: #5f7384;
}

.reference-catalog .compound-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.reference-catalog .compound-list li {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #d8e3e8;
    border-radius: 10px;
    color: #123b63;
    font-size: .94rem;
    overflow-wrap: anywhere;
}

.reference-catalog .blend-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.reference-catalog .blend-list li {
    padding: 18px;
    background: #fff;
    border: 1px solid #d8e3e8;
    border-top: 3px solid #00a7a7;
    border-radius: 12px;
}

.reference-catalog .blend-list h4 {
    color: #123b63;
    font-size: 1rem;
    margin: 0 0 8px;
}

.reference-catalog .blend-list p {
    color: #5f7384;
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
}

.reference-catalog .catalog-note {
    margin-top: 24px;
}

.reference-catalog [hidden] {
    display: none !important;
}

.reference-catalog .catalog-results {
    color: #5f7384;
    font-size: .9rem;
}

@media (max-width: 900px) {
    .reference-catalog .compound-list,
    .reference-catalog .blend-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .reference-catalog .compound-list,
    .reference-catalog .blend-list {
        grid-template-columns: 1fr;
    }
}

/* Order privacy and formulation controls. */
.publication-options {
    min-width: 0;
    margin: 8px 0;
    padding: 20px;
    border: 1px solid var(--line,#d8e3e8);
    border-radius: 14px;
    background: #f4f9fa;
}

.publication-options legend {
    padding: 0 8px;
    font-weight: 700;
    color: var(--navy,#123b63);
}

:is(.publication-options, .named-copy) .choice-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0;
    cursor: pointer;
}

:is(.publication-options, .named-copy) .choice-row input {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: #007c82;
}

:is(.publication-options, .named-copy) .choice-row span {
    min-width: 0;
}

:is(.publication-options, .named-copy) .choice-row small {
    display: block;
    margin-top: 5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--muted,#5f7384);
}

:is(.publication-options, .named-copy) .choice-row:has(input:disabled) {
    opacity: .65;
}

.form-grid select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--line,#d8e3e8);
    border-radius: 8px;
    background: #fff;
    color: var(--ink,#30485f);
    font: inherit;
}

.order-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 300px;
    gap: 24px;
    align-items: start;
}

.order-total {
    position: sticky;
    top: 110px;
}

.total-number {
    font-size: 32px;
    color: #123B63;
}

.sample-card {
    margin: 18px 0;
}

.sample-heading,
.sample-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.sample-heading h4 {
    margin: 0;
}

.sample-actions {
    margin-top: 20px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.component-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
}

.component-row input {
    min-width: 0;
    width: 100%;
}

.sample-card select {
    max-width: 100%;
    width: 100%;
}

#unified-order [hidden] {
    display: none!important;
}

#sample-list .panel {
    padding: 22px;
}

#order-review {
    margin-top: 24px;
}

.review-sample {
    border-top: 1px solid #d8e4e9;
    margin-top: 18px;
    padding-top: 12px;
    overflow-wrap: anywhere;
}

.review-sample p {
    white-space: pre-wrap;
}

.btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width:900px){
    .order-layout {
        grid-template-columns: 1fr;
    }

    .order-total {
        position: static;
        grid-row: 1;
    }

    .component-row {
        grid-template-columns: 1fr;
    }

    .sample-card {
        padding: 16px!important;
    }
}

@media print{
    body * {
        visibility: hidden;
    }

    #order-review,
    #order-review * {
        visibility: visible;
    }

    #order-review {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border: 0;
        background: white;
    }

    #order-review .sample-actions {
        display: none;
    }

    .review-sample {
        break-inside: avoid;
    }
}

/* Compact unified intake: full-width desktop rows, stacked mobile fields. */
.order-layout {
    grid-template-columns: minmax(0,1fr);
}

.order-layout>.order-total {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.order-total .checklist {
    grid-column: 2;
    grid-row: 1 / span 4;
}

.order-total hr {
    display: none;
}

.contact-entry {
    grid-template-columns: 1.1fr 1.35fr 1.1fr 1fr;
    gap: 14px;
}

.contact-entry>div,
.sample-entry-line>div {
    min-width: 0;
}

.sample-column-headings,
.sample-entry-line {
    display: grid;
    grid-template-columns: minmax(75px,.75fr) minmax(170px,1.75fr) minmax(120px,1.15fr) minmax(110px,1fr) minmax(85px,.8fr) minmax(90px,.85fr) 100px;
    gap: 10px;
    align-items: center;
}

.sample-column-headings {
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
    padding: 12px 12px 8px;
    border-bottom: 1px solid var(--line);
}

#sample-list .sample-card {
    padding: 12px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.sample-entry-line input,
.sample-entry-line select,
.contact-entry input {
    width: 100%;
    min-width: 0;
    font-size: 14px;
    padding: 10px;
    height: 42px;
}

.sample-entry-line>div>label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.sample-heading {
    display: none;
}

.row-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.row-button {
    background: transparent;
    color: var(--navy);
    border: 0;
    padding: 3px 5px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.row-button:hover {
    text-decoration: underline;
}

.row-button:disabled {
    opacity: .35;
    cursor: default;
}

.sample-details {
    margin-top: 8px;
}

.sample-details summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--teal);
    font-weight: 700;
    padding: 4px 0;
}

.sample-details[open] {
    background: #f8fbfc;
    padding: 10px;
    border-radius: 6px;
}

.sample-details>.form-grid {
    padding-top: 12px;
}

.compact-unknown {
    font-size: 11px;
    margin: 4px 0;
}

.sample-card>[data-custom-name] {
    margin-top: 12px;
}

#add-sample {
    margin-top: 16px;
}

@media (max-width:1099px){
    .sample-column-headings {
        display: none;
    }

    .sample-entry-line {
        grid-template-columns: repeat(3,minmax(0,1fr));
        align-items: end;
    }

    .sample-entry-line>div>label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        display: block;
    }

    .row-actions {
        flex-direction: row;
        align-items: center;
        height: 42px;
    }

    .sample-heading {
        display: flex;
        margin-bottom: 12px;
    }

    .contact-entry {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    #sample-list .sample-card {
        padding: 16px!important;
        margin-bottom: 10px;
    }
}

@media (max-width:600px){
    .sample-entry-line,
    .contact-entry {
        grid-template-columns: 1fr;
    }

    .order-layout>.order-total {
        display: block;
    }

    .sample-details[open] {
        padding: 8px;
    }
}

/* Simplified intake spacing and conditional blend details. */
#sample-list .sample-card {
    padding-top: 8px;
    padding-bottom: 8px;
}

#sample-list .compact-unknown {
    margin: 3px 0 0;
    line-height: 1.25;
}

#sample-list [data-ingredients] {
    margin-top: 12px;
    padding: 14px;
    background: #f8fbfc;
    border-radius: 6px;
}

.contact-entry label {
    margin-bottom: 5px;
}

.contact-entry {
    gap: 10px;
}

.receipt-paste {
    margin: 12px 0;
    padding: 18px;
    border: 2px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    cursor: text;
}

.receipt-paste:focus {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

#receipt-image {
    max-width: 420px;
    max-height: 300px;
    object-fit: contain;
    margin: 12px 0;
}

#manual-payment-evidence {
    margin: 16px 0;
}

#payment-method {
    max-width: 480px;
    width: 100%;
}

@media print{
    #payment-preview-status {
        display: none;
    }
}

/* Order total: one equation, with the final amount given the most weight. */
.order-layout>.pricing-summary {
    display: block;
    padding: 22px 26px;
    border: 1px solid #bfe3ce;
    border-left: 5px solid #198548;
    background: #eef9f3;
    position: static;
}

.pricing-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.pricing-summary .micro-label {
    margin: 0;
    color: var(--navy);
    font-size: 12px;
}

.pricing-equation {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.price-multiply,
.price-equals {
    color: var(--muted);
    font-weight: 400;
}

.unit-rate {
    font-size: 21px;
}

.total-emphasis {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #77d69d;
}

.pricing-summary .total-number {
    font-size: 36px;
    line-height: 1.1;
    font-weight: 900;
    color: #000;
}

.total-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
    color: #000;
}

.included-summary {
    font-size: 13px;
    line-height: 1.6;
    margin: 14px 0 0;
    color: var(--muted);
}

.pricing-summary .pricing-footnote {
    font-size: 11px;
    margin: 5px 0 0;
}

@media (max-width:600px){
    .order-layout>.pricing-summary {
        padding: 18px;
    }

    .pricing-summary-top {
        gap: 12px;
    }

    .pricing-equation {
        font-size: 17px;
        gap: 8px;
    }

    .unit-rate {
        font-size: 17px;
    }

    .pricing-summary .total-number {
        font-size: 29px;
    }

    .total-emphasis {
        padding: 8px 10px;
        gap: 7px;
    }
}

.contact-entry {
    grid-template-columns: 1.1fr 1.4fr 1fr;
}

.named-reports {
    margin: 24px 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.named-copy {
    margin: 14px 0;
    background: #f8fbfc;
}

#public-name-field {
    margin: 12px 0;
    padding: 14px;
    background: #f4fafb;
    border-radius: 6px;
}

.copy-review {
    border-left: 3px solid var(--teal);
    padding-left: 14px;
    margin: 16px 0;
}

.pricing-summary .total-label {
    max-width: 70px;
    line-height: 1.35;
}

@media (max-width:900px){
    .contact-entry {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:600px){
    .contact-entry {
        grid-template-columns: 1fr;
    }
}

/* Pricing uses the site status green, with black text and a decorative check. */
.pricing-summary .pricing-equation,
.pricing-summary .micro-label,
.pricing-summary .price-multiply,
.pricing-summary .price-equals {
    color: #000;
}

.total-check {
    color: #126b38;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
}

/* Friendly closing prompt and a quieter, whole-dollar testing total. */
.pricing-summary .pricing-welcome {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
}

.pricing-summary .total-number {
    font-size: 28px;
    font-weight: 800;
}

@media (max-width:600px){
    .pricing-summary .pricing-welcome {
        font-size: 17px;
    }

    .pricing-summary .total-number {
        font-size: 25px;
    }
}

/* Order contact opt-in and scope notice below the pricing summary. */
.order-layout>.materials-notice {
    grid-column: 1 / -1;
    margin: 0;
}

.phone-entry .sms-choice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 9px 0 0;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.sms-choice input[type=checkbox] {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: #198548;
}

.phone-entry .sms-hint {
    font-size: 10px;
    line-height: 1.4;
    margin: 5px 0 0;
}

.contact-entry {
    align-items: start;
}

/* Optional testing and additional report pricing */
.order-addons { margin: 24px 0; }
.vial-service { margin-bottom: 12px; }
.unavailable-service { background: #f3f6f8; color: #536373; margin-bottom: 16px; }
.service-extras { background: #f8fbfc; }
.service-extras .grid-3 { margin-top: 20px; }
.service-price { font-size: 1.35rem; font-weight: 800; color: #123B63; }
.price-breakdown { padding: 0 20px 12px; }
.price-breakdown p { display: flex; justify-content: space-between; gap: 14px; margin: 8px 0; font-size: .9rem; }
.price-equals { white-space: nowrap; }

/* Compact additional services: one checkbox line per option. */
.order-addons .addon-line { display: flex; align-items: baseline; gap: 9px; margin: 9px 0; font-weight: 400; }
.order-addons .addon-line input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; align-self: center; }
.order-addons .addon-line strong { margin-left: 8px; font-weight: 700; }
.order-addons .addon-line small { font-size: .85em; }
.order-addons .addon-unavailable { color: #75818d; }
.order-addons .named-reports { margin-top: 12px; }
.order-addons .named-reports[hidden] { display: none; }

/* Testing choices belong in the sample row. */
.sample-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.sample-column-headings .test-column { text-align: center; }
.sample-column-headings small { display: block; font-size: 10px; font-weight: 400; margin-top: 3px; }
.sample-entry-line .sample-test { text-align: center; }
.sample-entry-line .sample-test input[type="checkbox"] { width: 16px; height: 16px; padding: 0; margin: 0; accent-color: #00A7A7; cursor: pointer; }
.sample-entry-line .sample-test input:disabled { cursor: not-allowed; }
[data-report-options] { margin-top: 14px; }
[data-report-options][hidden] { display: none; }
@media (min-width:900px) {
 .sample-column-headings, .sample-entry-line { display: grid; grid-template-columns: 75px minmax(160px,1.6fr) 105px 115px 80px 85px 75px 80px 85px 100px; gap: 8px; align-items: center; min-width: 1150px; }
 .sample-column-headings { background: #123B63; color: white; padding: 12px; min-width: 1174px; }
 .sample-entry-line > div > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
 .sample-heading { display: none; }
 #sample-list .sample-card { min-width: 1174px; padding: 12px!important; margin-bottom: 0; }
 .row-actions { flex-direction: column; height: auto; }
}
@media (max-width:899px) { .sample-entry-line .sample-test { text-align: left; } }

/* Fit sample fields and testing choices without horizontal scrolling. */
.sample-table-scroll { overflow: visible; }
.unavailable-test { color: #92a2b1; }
@media (min-width:900px) {
 .sample-column-headings, .sample-entry-line { min-width: 0; width: 100%; grid-template-columns: minmax(50px,.65fr) minmax(130px,2.1fr) minmax(65px,.85fr) minmax(60px,.8fr) minmax(60px,.85fr) minmax(62px,.85fr) minmax(62px,.85fr) minmax(40px,.55fr) minmax(65px,.85fr) minmax(60px,.8fr); gap: 6px; }
 #sample-list .sample-card { min-width: 0; }
 .sample-column-headings { padding: 10px 8px; font-size: 11px; }
 #sample-list .sample-card { padding: 10px 8px!important; }
 .sample-entry-line input, .sample-entry-line select { font-size: 12px; padding: 8px 5px; }
 .row-button { font-size: 11px; padding: 4px 0; }
 .sample-column-headings > span { min-width: 0; overflow-wrap: anywhere; }
}

@media (min-width:900px) {
 .sample-column-headings, .sample-entry-line { grid-template-columns: minmax(45px,.6fr) minmax(115px,2fr) minmax(60px,.8fr) minmax(55px,.75fr) minmax(55px,.8fr) minmax(58px,.8fr) minmax(58px,.8fr) minmax(35px,.5fr) minmax(50px,.7fr) minmax(60px,.8fr) minmax(55px,.75fr); gap: 5px; }
}

/* New customer pages retain existing typography and colors. */
.contact-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.results-scroll{overflow-x:auto}.results-table{width:100%;border-collapse:collapse}.results-table th,.results-table td{text-align:left;padding:14px;border-bottom:1px solid #d9e3eb}.results-table th{color:#123B63}.nav-links{flex-wrap:nowrap}.status-inner{gap:12px;flex-wrap:wrap}#contact-message{width:100%;min-height:150px}#contact-status{margin:16px 0}.result-card[hidden]{display:none!important}

/* Keep the CTA beside the links; switch to the existing menu before overflow. */
.nav-links{gap:16px;white-space:nowrap}.nav-links .order-btn{flex-shrink:0}.brand{flex-shrink:0}
@media (max-width:1100px){.mobile-toggle{display:block}.nav-links{display:none;position:absolute;left:0;right:0;top:84px;background:var(--navy2);padding:18px 20px;flex-direction:column;align-items:flex-start;box-shadow:0 14px 24px rgba(0,0,0,.18)}.nav-links.open{display:flex}}
.lamp.green{background:#47bf77;box-shadow:0 0 12px rgba(71,191,119,.9)}.lamp.red{background:#e55454;box-shadow:0 0 12px rgba(229,84,84,.9)}

.packing-steps{padding-left:24px;line-height:1.7}.packing-steps li{padding:5px 0}

.site-nav .wrap{width:min(1480px,calc(100% - 40px))}

.shipping-carriers{display:flex;flex-wrap:wrap;gap:12px}.shipping-carriers a{padding:10px 14px;border:1px solid #d9e3eb;border-radius:8px;color:#123B63;font-weight:700}

.lookup-grid{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:28px;align-items:start}.lookup-steps{list-style:none;padding:0;margin:22px 0 0}.lookup-steps .pending .step-num{background:#e8eef3;color:#667b8b}.lookup-steps .active .step-num{background:#d96c4a}.lookup-steps .complete .step-num{background:#00a7a7}#lookup-result{min-width:0}#lookup-result caption{text-align:left;font-weight:800;color:#123b63;margin-bottom:12px}#lookup-result .results-table{font-size:14px}@media(max-width:900px){.lookup-grid{grid-template-columns:1fr}}
.admin-result-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:16px 0;padding:16px;background:#f1f6f8;border-radius:10px}.admin-result-row input,.admin-result-row select{width:100%}#admin-detail textarea{width:100%;min-height:100px}#admin-detail .btn,#lab-form .btn{margin:8px 0}

@media(min-width:1101px) and (max-width:1350px){.nav-links{gap:11px;font-size:13px}.nav-inner{gap:16px}.brand-copy{font-size:15px}}

/* Manual-first analytical provenance workflow. Future automated processors populate the same records. */
.analytical-workflow{margin:22px 0;padding:16px;border:1px solid rgba(18,59,99,.18);border-radius:14px;background:rgba(18,59,99,.025)}
.analytical-workflow summary{cursor:pointer;margin-bottom:12px}
.analytical-workflow .results-table{min-width:760px}