:root {
    --navy:#071a2f;
    --navy-2:#0b2945;
    --ink:#102a43;
    --muted:#52677b;
    --teal:#0bc6b0;
    --paper:#f7f9f8;
    --line:#dce5e8;
    font-family:Arial,Helvetica,sans-serif
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    color:var(--ink);
    background:#fff;
    line-height:1.6
}

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

button,input,select,textarea {
    font:inherit
}

button {
    cursor:pointer
}

.container {
    width:min(1180px,calc(100% - 48px));
    margin:auto
}

.skip-link {
    position:absolute;
    top:-60px;
    left:12px;
    padding:8px;
    background:#fff;
    z-index:20
}

.skip-link:focus {
    top:12px
}

.site-header {
    position:sticky;
    top:0;
    z-index:10;
    background:#fff;
    border-bottom:1px solid #edf1f2
}

.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:80px
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-size:20px;
    font-weight:800;
    line-height:1;
    letter-spacing:.08em
}

.brand small {
    display:block;
    margin-top:5px;
    font-size:9px;
    letter-spacing:.23em
}

.brand-mark {
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    background:var(--navy);
    color:#fff;
    border-radius:11px;
    font-size:27px;
    letter-spacing:-.08em
}

.brand-mark span,.art-core span {
    color:var(--teal)
}

.site-nav {
    display:flex;
    align-items:center;
    gap:34px;
    font-size:14px;
    font-weight:700
}

.site-nav a:hover,.footer-main a:hover {
    color:#008d82
}

.nav-cta {
    background:var(--navy);
    color:#fff!important;
    padding:12px 18px;
    border-radius:6px
}

.nav-cta span,.button span {
    margin-left:15px
}

.menu-toggle {
    display:none
}

.hero {
    background:var(--navy);
    color:#fff;
    overflow:hidden
}

.hero-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    min-height:590px;
    gap:70px
}

.eyebrow {
    color:#008f88;
    text-transform:uppercase;
    font-size:12px;
    font-weight:800;
    letter-spacing:.2em;
    margin:0 0 20px
}

.hero .eyebrow,.contact .eyebrow {
    color:var(--teal)
}

h1,h2,h3,p {
    margin-top:0
}

h1 {
    font-size:clamp(44px,5.4vw,76px);
    line-height:1.08;
    letter-spacing:-.045em;
    margin-bottom:25px
}

h2 {
    font-size:clamp(34px,3.6vw,52px);
    line-height:1.14;
    letter-spacing:-.035em;
    margin-bottom:24px
}

h3 {
    font-size:22px;
    line-height:1.25;
    letter-spacing:-.02em
}

.hero-copy {
    max-width:575px;
    color:#bed1df;
    font-size:18px
}

.hero-actions {
    display:flex;
    gap:18px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:34px
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 22px;
    border:0;
    border-radius:6px;
    font-weight:700;
    font-size:14px;
    min-height:52px
}

.button-primary {
    background:var(--teal);
    color:var(--navy)
}

.button-primary:hover {
    background:#32dfca
}

.button-text {
    color:#fff
}

.hero-art {
    position:relative;
    height:440px;
    border-radius:50%;
    background:radial-gradient(circle,#113a57 0,#09253e 48%,transparent 69%);
    display:grid;
    place-items:center
}

.orbit {
    position:absolute;
    border:1px solid rgba(107,202,203,.25);
    border-radius:50%
}

.orbit-one {
    width:310px;
    height:310px
}

.orbit-two {
    width:430px;
    height:430px
}

.art-core {
    height:210px;
    width:210px;
    display:grid;
    place-items:center;
    border-radius:36px;
    background:linear-gradient(145deg,#235471,#092137);
    box-shadow:0 28px 65px #0005;
    color:#fff;
    font-size:110px;
    font-weight:800;
    letter-spacing:-.15em;
    transform:rotate(-12deg)
}

.art-label {
    position:absolute;
    padding:9px 15px;
    border:1px solid #4a788b;
    border-radius:5px;
    background:#0d3049;
    color:#b7e8e4;
    font-size:11px;
    font-weight:800;
    letter-spacing:.2em
}

.label-one {
    top:45px;
    left:60px
}

.label-two {
    right:12px;
    top:180px
}

.label-three {
    bottom:50px;
    left:60px
}

.section {
    padding:100px 0
}

.intro-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:end
}

.intro-grid>p,.section-heading>p,.approach-grid>div>p:not(.eyebrow) {
    color:var(--muted);
    font-size:18px;
    max-width:560px
}

.services {
    background:var(--paper)
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:34px
}

.section-heading h2 {
    margin-bottom:0
}

.section-heading>p {
    font-size:16px;
    margin-bottom:4px
}

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

.service-card {
    display:flex;
    flex-direction:column;
    min-height:300px;
    padding:30px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px
}

.card-number {
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    color:#008f88
}

.card-icon {
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    border-radius:11px;
    background:#e5f7f3;
    color:#007e78;
    font-size:29px;
    margin:34px 0 21px
}

.service-card h3 {
    margin-bottom:10px
}

.service-card p {
    color:var(--muted);
    font-size:15px;
    margin-bottom:0
}

.service-card-feature {
    background:var(--navy);
    color:#fff;
    border-color:var(--navy);
    justify-content:space-between
}

.service-card-feature .card-number {
    color:var(--teal)
}

.service-card-feature p {
    color:#bbcedc
}

.service-card-feature a {
    font-weight:700;
    color:var(--teal)
}

.approach-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px
}

.steps {
    border-top:1px solid var(--line)
}

.steps>div {
    display:grid;
    grid-template-columns:50px 1fr;
    column-gap:20px;
    padding:23px 0;
    border-bottom:1px solid var(--line)
}

.steps span {
    grid-row:span 2;
    color:#008f88;
    font-weight:800
}

.steps h3 {
    margin:0 0 3px
}

.steps p {
    margin:0;
    color:var(--muted)
}

.contact {
    background:var(--navy);
    color:#fff
}

.contact-grid {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:90px
}

.contact-grid>div>p:not(.eyebrow) {
    color:#b5cad8;
    font-size:18px
}

.contact-panel {
    padding:36px;
    background:#fff;
    color:var(--ink);
    border-radius:10px
}

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

.field {
    display:flex;
    flex-direction:column;
    margin-bottom:19px
}

.field label {
    font-size:13px;
    font-weight:700;
    margin-bottom:7px
}

.field small {
    font-weight:400;
    color:var(--muted)
}

.field input,.field select,.field textarea {
    width:100%;
    border:1px solid #cbd8dd;
    border-radius:5px;
    padding:12px 14px;
    background:#fff;
    color:var(--ink)
}

.field input:focus,.field select:focus,.field textarea:focus {
    outline:2px solid var(--teal);
    outline-offset:1px
}

.field span,.validation-summary {
    color:#ad3434;
    font-size:13px
}

.form-success {
    padding:13px 16px;
    margin-bottom:20px;
    border-radius:5px;
    background:#e2f8ed;
    color:#145a3c
}

.submit-button {
    width:100%
}

.site-footer {
    padding: 72px 0 24px;
    background: #061625;
    color: #dce9ef;
}

.footer-main {
    display: grid;
    grid-template-columns: minmax(230px, 1.4fr) repeat(3, minmax(130px, 1fr));
    align-items: start;
    gap: clamp(26px, 4vw, 70px);
    padding-bottom: 58px;
}

.footer-brand {
    color: #fff;
}

.footer-brand:hover {
    color: #fff;
}

.footer-brand .brand-mark {
    background: var(--teal);
    color: #061625;
    box-shadow: 0 0 0 4px rgba(11, 198, 176, .12);
}

.footer-brand .brand-mark span {
    color: #061625;
}

.footer-brand-block p {
    max-width: 290px;
    margin: 20px 0 0;
    color: #b3cbd6;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.footer-column h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 14px;
    letter-spacing: .04em;
}

.footer-column a {
    color: #b9d0db;
    font-size: 14px;
    line-height: 1.5;
}

.footer-column a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-bottom {
    padding-top: 22px;
    border-top: 1px solid #294052;
    color: #9eb5c1;
    font-size: 13px;
}

@media (max-width: 950px) {
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 620px) {
    .footer-main {
        gap: 34px 20px;
        padding-bottom: 40px;
    }

    .footer-policies {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 20px;
    }

    .footer-policies h2 {
        grid-column: 1 / -1;
        margin-bottom: 2px;
    }
}

@media (max-width: 410px) {
    .footer-main {
        grid-template-columns: 1fr;
    }

    .footer-policies {
        grid-column: auto;
        grid-template-columns: 1fr;
    }
}
@media(max-width:850px) {
    .hero-grid,.intro-grid,.approach-grid,.contact-grid {
    grid-template-columns:1fr;
    gap:38px
}

.hero-grid {
    padding:80px 0
}

.hero-art {
    height:340px
}

.orbit-two {
    width:330px;
    height:330px
}

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

.section {
    padding:75px 0
}


}

@media(max-width:620px) {
    .container {
    width:min(100% - 32px,1180px)
}

.header-inner {
    min-height:68px
}

.menu-toggle {
    display:block;
    border:0;
    background:none;
    font-weight:700
}

.site-nav {
    display:none;
    position:absolute;
    top:68px;
    left:0;
    right:0;
    padding:22px 16px;
    background:#fff;
    box-shadow:0 10px 20px #0012;
    flex-direction:column;
    align-items:stretch;
    gap:18px
}

.site-nav.is-open {
    display:flex
}

.hero-grid {
    padding:65px 0;
    min-height:auto
}

.hero-art {
    display:none
}

.hero-copy {
    font-size:16px
}

.section {
    padding:62px 0
}

.section-heading {
    display:block
}

.service-grid,.field-row {
    grid-template-columns:1fr
}

.service-card {
    min-height:255px
}

.contact-panel {
    padding:22px
}

}



/* Service detail pages */
.breadcrumb { display: flex; gap: 10px; align-items: center; padding-top: 22px; padding-bottom: 22px; color: var(--muted); font-size: 13px; }
.breadcrumb a:hover { color: #008f88; text-decoration: underline; }
.detail-header { background: var(--navy); color: #fff; }
.detail-header-inner { padding-top: 94px; padding-bottom: 100px; max-width: 1180px; }
.detail-header h1 { max-width: 850px; }
.detail-header-inner > p:not(.eyebrow) { max-width: 690px; color: #c3d6df; font-size: 20px; margin-bottom: 30px; }
.service-image { height: clamp(180px, 22vw, 330px); background-image: url('../images/service-panels.png'); background-size: 100% 500%; background-position: center var(--panel-position); background-repeat: no-repeat; }
.detail-intro-grid, .detail-outcomes, .detail-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.detail-intro-grid > p, .detail-outcomes p { font-size: 18px; color: var(--muted); }
.detail-features { background: var(--paper); }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 35px; }
.feature-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 32px; }
.feature-card p { color: var(--muted); margin-bottom: 0; }
.feature-line { display: block; width: 38px; height: 3px; background: var(--teal); margin-bottom: 30px; }
.detail-outcomes ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.detail-outcomes li { padding: 16px 0 16px 28px; border-bottom: 1px solid var(--line); position: relative; font-weight: 700; }
.detail-outcomes li::before { content: '✓'; color: #008f88; position: absolute; left: 0; }
.detail-contact { background: var(--navy); color: #fff; }
.detail-contact p:not(.eyebrow) { color: #c3d6df; font-size: 18px; }
.detail-contact .button { justify-self: end; align-self: center; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.related-grid a { display: grid; grid-template-columns: 1fr auto; gap: 5px; border: 1px solid var(--line); border-radius: 7px; padding: 22px; }
.related-grid a:hover { border-color: #008f88; }
.related-grid a span:first-child { grid-column: span 2; text-transform: uppercase; color: #008f88; font-size: 11px; letter-spacing: .12em; font-weight: 800; }
.related-grid a strong { font-size: 17px; }
.card-link { margin-top: auto; padding-top: 22px; color: #007f78; font-size: 14px; font-weight: 800; }
.card-link:hover { text-decoration: underline; }
@media (max-width: 750px) {
    .detail-header-inner { padding-top: 65px; padding-bottom: 70px; }
    .detail-intro-grid, .detail-outcomes, .detail-contact-grid, .feature-grid, .related-grid { grid-template-columns: 1fr; gap: 22px; }
    .detail-contact .button { justify-self: start; }
}
/* Legal pages */
.legal-hero { background: var(--navy); color: #fff; padding: 80px 0 72px; }
.legal-hero h1 { margin-bottom: 10px; }
.legal-hero p:last-child { color: #b7cbd8; margin-bottom: 0; }
.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 75px; padding-top: 70px; padding-bottom: 100px; }
.legal-nav { display: flex; flex-direction: column; gap: 12px; align-self: start; position: sticky; top: 110px; font-size: 14px; }
.legal-nav strong { margin-bottom: 8px; }
.legal-nav a { color: var(--muted); }
.legal-nav a:hover, .legal-content a:hover { color: #008f88; text-decoration: underline; }
.legal-content { font-size: 16px; color: #344d61; }
.legal-content > p:first-child { font-size: 18px; color: var(--ink); }
.legal-content section { padding-top: 22px; padding-bottom: 25px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.legal-content h2 { font-size: 26px; color: var(--ink); margin-bottom: 15px; }
.legal-content a { color: #007f78; font-weight: 700; text-decoration: underline; }
.legal-content li { margin-bottom: 8px; }

@media (max-width: 750px) { .legal-layout { grid-template-columns: 1fr; gap: 30px; padding-top: 48px; } .legal-nav { position: static; } .legal-hero { padding: 58px 0; } }
/* Storefront */
.shop-hero, .simple-hero { background: var(--navy); color: #fff; padding: 74px 0; }
.shop-hero p:last-child, .simple-hero p:last-child { color: #bed1df; max-width: 720px; font-size: 18px; }
.shop-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 32px; }
.shop-filters label { font-size: 13px; font-weight: 700; }
.shop-filters input, .shop-filters select { border: 1px solid var(--line); border-radius: 5px; padding: 13px 14px; min-height: 51px; }
.shop-filters input { flex: 1 1 230px; }
.shop-empty { background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 50px; text-align: center; }
.shop-empty p { max-width: 580px; margin: 0 auto 25px; color: var(--muted); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; }
.product-art, .product-detail-art, .cart-thumbnail { display: grid; place-items: center; background: #e7f2f1; color: #1a7776; }
.product-art { position: relative; flex: 0 0 220px; height: 220px; overflow: hidden; }
.product-art span, .product-detail-art span { font-size: 80px; line-height: 1; }
.product-art img, .cart-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-art img { position: absolute; inset: 0; }
.product-detail-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 24px; }
.product-category { color: #008f88; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.product-body h2 { font-size: 22px; margin: 12px 0; }
.product-body p { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-bottom { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-top: auto; padding-top: 20px; }
.product-bottom a, .continue-shopping { color: #007f78; font-weight: 700; font-size: 14px; }
.product-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 48px; }
.product-detail-grid > div { min-width: 0; }
.product-detail-art { width: 100%; height: clamp(280px, 42vw, 520px); border-radius: 9px; overflow: hidden; }
.product-sku, .stock-label { color: var(--muted); font-size: 14px; }
.product-description { font-size: 18px; }
.product-price { font-size: 32px; font-weight: 800; margin: 20px 0; }
.add-cart-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.add-cart-form label { width: 100%; font-size: 13px; font-weight: 700; margin-bottom: -7px; }
.add-cart-form input, .cart-update input { width: 76px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; }
.fulfillment-note { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 30px; }
.fulfillment-note p { color: var(--muted); }
.checkout-note { color: var(--muted); font-size: 13px; margin-top: 20px; }
.out-of-stock { color: #a84040; }
.shop-promo { background: #e9f5f2; }
.shop-promo-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; }
.shop-promo p:not(.eyebrow) { max-width: 540px; color: var(--muted); font-size: 18px; }
.shop-promo-art { height: 290px; border-radius: 10px; background: url('../images/service-panels.png') center 50% / 100% 500% no-repeat; }
.cart-layout, .checkout-grid, .order-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 50px; align-items: start; }
.cart-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.cart-thumbnail { width: 110px; height: 110px; border-radius: 7px; overflow: hidden; font-size: 40px; }
.cart-row h2 { font-size: 21px; margin: 0 0 8px; }
.cart-row p { color: var(--muted); margin: 0 0 10px; }
.cart-update { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.cart-update button { border: 0; background: none; color: #007f78; font-weight: 700; }
.cart-update span { color: var(--muted); }
.cart-summary { background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 28px; }
.cart-summary h2 { font-size: 24px; }
.cart-summary > div:not(.form-success) { display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); padding: 15px 0; }
.cart-summary p { color: var(--muted); font-size: 14px; margin: 20px 0; }
.cart-summary .button { width: 100%; }
.continue-shopping { display: block; margin-top: 18px; text-align: center; }
.checkout-grid { grid-template-columns: minmax(0, 1fr) 360px; }
.checkout-form { max-width: 760px; }
.checkout-form h2 { font-size: 25px; margin-bottom: 20px; }
.checkout-form h2:not(:first-child) { margin-top: 30px; }
.terms-check, .publish-check { display: flex; gap: 10px; align-items: start; margin: 18px 0; }
.terms-check a { color: #007f78; text-decoration: underline; }
.field-error { color: #ad3434; display: block; font-size: 13px; }
.checkout-total { font-weight: 800; }
.confirmation { max-width: 720px; text-align: center; }
.confirmation-mark { display: grid; place-items: center; margin: 0 auto 25px; width: 70px; height: 70px; border-radius: 50%; background: #ddf5ec; color: #008f88; font-size: 36px; }
.confirmation p:not(.eyebrow) { font-size: 18px; color: var(--muted); }
.confirmation strong { word-break: break-all; color: var(--ink); }
.admin-actions { display: flex; align-items: center; gap: 22px; margin-bottom: 25px; }
.admin-actions a:not(.button), .admin-table a { color: #007f78; font-weight: 700; }
.table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-table th, .admin-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { background: var(--paper); font-size: 13px; }
.admin-form-wrap { max-width: 800px; }
.admin-form .field small { color: var(--muted); }
.order-details { display: grid; grid-template-columns: 150px 1fr; gap: 10px; }
.order-details dt { font-weight: 700; }
.order-details dd { margin: 0; }
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } .product-detail-grid, .shop-promo-grid, .cart-layout, .checkout-grid, .order-detail-grid { grid-template-columns: 1fr; } .shop-promo-art { min-height: 230px; } }
@media (max-width: 620px) { .product-detail-art { height: 320px; } .product-grid { grid-template-columns: 1fr; } .shop-filters { align-items: stretch; flex-direction: column; } .shop-filters input, .shop-filters select, .shop-filters button { width: 100%; } .cart-row { grid-template-columns: 76px 1fr; } .cart-thumbnail { width: 76px; height: 76px; } .cart-row > strong { grid-column: 2; } .shop-empty { padding: 35px 20px; } }
.product-facts { display: grid; grid-template-columns: 140px 1fr; gap: 8px 15px; border-top: 1px solid var(--line); padding-top: 20px; }
.product-facts dt { font-weight: 700; }
.product-facts dd { margin: 0; color: var(--muted); }
.lookup-wrap { max-width: 600px; }
.invoice-wrap { max-width: 930px; }
.invoice-head { display: flex; justify-content: space-between; gap: 25px; border-bottom: 2px solid var(--navy); padding-bottom: 24px; }
.invoice-head p { margin-bottom: 0; }
.invoice-head > div:last-child { text-align: right; }
.invoice-customer { padding: 25px 0; }
.invoice-customer p { margin: 8px 0 0; }
.invoice-totals { text-align: right; padding: 20px 0; }
.final-total { font-size: 22px; }
.payment-panel { white-space: pre-line; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 24px; }
.invoice-actions { display: flex; gap: 20px; align-items: center; margin-top: 25px; }
.invoice-actions a { color: #007f78; font-weight: 700; }
.invoice-admin-form { margin: 25px 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media print { .site-header, .site-footer, .no-print { display: none !important; } .section { padding: 0; } .invoice-wrap { max-width: none; } body { color: #000; } }
@media (max-width: 950px) {
    .menu-toggle { display: block; border: 0; background: none; font-weight: 700; }
    .site-nav { display: none; position: absolute; top: 80px; left: 0; right: 0; padding: 22px 16px; background: #fff; box-shadow: 0 10px 20px #0012; flex-direction: column; align-items: stretch; gap: 18px; }
    .site-nav.is-open { display: flex; }
}
@media (max-width: 620px) { .site-nav { top: 68px; } }
.utility-bar { background: #041423; color: #c9dbe1; font-size: 12px; }
.utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 38px; }
.currency-form { display: flex; align-items: center; gap: 8px; }
.currency-form label { font-weight: 700; }
.currency-form select, .currency-form button { border: 0; background: transparent; color: #fff; font-size: 12px; padding: 5px; }
.currency-form option { color: #111; }
.currency-form button { color: var(--teal); font-weight: 700; }
.site-header { top: 0; }
.shop-hero { background: var(--navy) url('../images/hardware-shop-hero.png') center / cover no-repeat; min-height: 365px; display: flex; align-items: center; }
.shop-hero .container { position: relative; z-index: 1; }
.shop-hero p:last-child { max-width: 575px; }
.source-section { background: var(--paper); }
.source-section > .container > p:not(.eyebrow) { color: var(--muted); max-width: 740px; }
.source-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 32px 0; }
.source-grid article { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 25px; }
.source-grid article > span { display: block; color: #008f88; font-size: 30px; margin-bottom: 18px; }
.source-grid h3 { font-size: 19px; }
.source-grid p { color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .source-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .utility-inner { align-items: start; flex-direction: column; padding: 8px 0; gap: 3px; } .source-grid { grid-template-columns: 1fr; } .shop-hero { background-position: 60% center; } }
.draft-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 25px; }
.draft-templates a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px; color: #007f78; font-size: 13px; font-weight: 700; }

.shop-price-note { max-width: 55rem; font-size: .92rem; opacity: .85; }


.product-bottom small { display: block; font-size: .72rem; font-weight: 500; opacity: .7; }



/* Keep product photography within its column at narrow viewport widths. */
.product-detail-grid,
.product-detail-grid > div,
.product-detail-art {
    min-width: 0;
    max-width: 100%;
}

.product-detail-grid > div:last-child {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .product-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}